시작하기

bun add @reopt-ai/opt-shell @reopt-ai/opt-palette

# adapter 데모까지 함께 쓸 경우
bun add @reopt-ai/opt-datagrid @reopt-ai/opt-editor

import { createShellApp } from "@reopt-ai/opt-shell/core";

export const builderHarness = createShellApp({
  id: "reopt-builder",
  label: "reopt design Builder",
  description:
    "Internal-first harness for the Builder experience, page rhythm, and shared state UX.",
  audience: "internal",
  routeGroups: [
    {
      id: "projects",
      label: "Projects",
      href: "/builder/projects",
    },
    {
      id: "templates",
      label: "Templates",
      href: "/builder/starters",
    },
  ],
  defaults: {
    density: "comfortable",
    contentWidth: "wide",
    navigationMode: "sidebar",
    motionPolicy: "reduced",
    stateLabels: {
      loading: "Builder 화면을 불러오는 중입니다.",
      emptyTitle: "표시할 항목이 없습니다",
      emptyDescription: "새 항목을 만들거나 현재 필터를 조정해 보세요.",
      errorTitle: "Builder 화면을 표시하지 못했습니다",
    },
    adapters: {
      datagrid: { chrome: "card" },
      editor: { chrome: "card" },
    },
  },
});

import {
  DashboardWorkspace,
  ShellAppShell,
  ShellCollapsibleNav,
  ShellProvider,
  ShellSection,
  ShellStateBoundary,
} from "@reopt-ai/opt-shell";
import { builderHarness } from "@/lib/harness";
import type { ReactNode } from "react";

export function BuilderFrame({
  nav,
  children,
}: {
  nav: ReactNode;
  children: ReactNode;
}) {
  return (
    <ShellProvider manifest={builderHarness}>
      <ShellAppShell nav={<ShellCollapsibleNav>{nav}</ShellCollapsibleNav>}>
        <DashboardWorkspace
          header={<div>Builder Header</div>}
          toolbar={<div>Primary Actions</div>}
          aside={<div>Inspector</div>}
        >
          <ShellStateBoundary loading={false}>
            <ShellSection
              title="Overview"
              description="핵심 지표와 작업 상태를 한 리듬으로 묶습니다."
              frame="card"
            >
              {children}
            </ShellSection>
          </ShellStateBoundary>
        </DashboardWorkspace>
      </ShellAppShell>
    </ShellProvider>
  );
}