@moloodev/cli 0.0.0-stage → 0.3.0

package/src/dev-host-app.tsx

@@ -0,0 +1,688 @@
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import {
+  IconFile,
+  IconFileImport,
+  IconFolderOpen,
+  IconMoon,
+  IconPlus,
+  IconRefresh,
+  IconSearch,
+  IconSun,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react";
+import { KindIcon } from "@moloodev/ui/kind-icon";
+import { EditorHostChrome, type HostChromeHandlers } from "@moloodev/editor-sdk/host";
+import { EditorLoading } from "@moloodev/editor-sdk/layout";
+import { editorFrameAttributes, type EditorAsset, type EditorSession } from "@moloodev/editor-sdk/protocol";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Kbd,
+  NativeSelect,
+  NativeSelectOption,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  cn,
+} from "@moloodev/ui";
+import {
+  INSPECTOR_STORAGE_KEY,
+  simulatorIsDefault,
+  type DevHostController,
+  type DevHostSnapshot,
+} from "./dev-host-client";
+
+const MODES: readonly EditorSession["mode"][] = ["edit", "read", "loading", "idle"];
+const SYNC: readonly EditorSession["syncStatus"][] = ["live", "pending", "offline", "error"];
+
+function useSnapshot(controller: DevHostController): DevHostSnapshot {
+  return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+}
+
+function HeaderIconButton({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label={label}
+            onClick={onClick}
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function AssetChip({
+  snapshot,
+  controller,
+  onImport,
+}: {
+  snapshot: DevHostSnapshot;
+  controller: DevHostController;
+  onImport: () => void;
+}) {
+  const asset = snapshot.activeAsset;
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(asset.name);
+  useEffect(() => {
+    if (open) setDraft(asset.name);
+  }, [open, asset.name]);
+  const commit = () => controller.renameAsset(draft);
+  const rows: [string, string][] = [
+    ["type", asset.type],
+    ["storageMode", asset.storageMode ?? "—"],
+    ["contentType", asset.contentType ?? "—"],
+    ["schema", asset.schema ?? "—"],
+    ["id", asset.id],
+  ];
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button variant="ghost" size="sm" className="max-w-[22rem] gap-1.5" aria-label="현재 에셋" />
+        }
+      >
+        <IconFile className="text-muted-foreground" />
+        <span className="truncate">{asset.name}</span>
+        <Badge variant="outline" className="h-4 px-1 font-mono text-[10px]">
+          {asset.storageMode}
+        </Badge>
+      </PopoverTrigger>
+      <PopoverContent align="center" className="w-80">
+        <form
+          className="flex flex-col gap-1"
+          onSubmit={(event) => {
+            event.preventDefault();
+            commit();
+            setOpen(false);
+          }}
+        >
+          <label className="text-xs font-semibold text-muted-foreground" htmlFor="dev-asset-name">
+            이름
+          </label>
+          <Input
+            id="dev-asset-name"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            onBlur={commit}
+          />
+        </form>
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+          {rows.map(([key, value]) => (
+            <div key={key} className="contents">
+              <dt className="text-muted-foreground">{key}</dt>
+              <dd className="truncate font-mono" title={value}>
+                {value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+        <div className="flex flex-col gap-0.5 border-t border-border pt-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="justify-start"
+            onClick={() => {
+              setOpen(false);
+              controller.openDialog({ kind: "start" });
+            }}
+          >
+            <IconPlus /> 템플릿으로 새로 만들기...
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="justify-start"
+            onClick={() => {
+              setOpen(false);
+              onImport();
+            }}
+          >
+            <IconFileImport /> 가져오기...
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="justify-start"
+            onClick={() => {
+              setOpen(false);
+              controller.openDialog({ kind: "browser" });
+            }}
+          >
+            <IconFolderOpen /> 에셋 브라우저
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function Rail({ snapshot }: { snapshot: DevHostSnapshot }) {
+  const iconName = snapshot.manifest.icon ?? snapshot.manifest.fileTypes?.[0]?.icon;
+  return (
+    <aside
+      data-slot="dev-rail"
+      className="flex w-12 shrink-0 flex-col items-center border-r border-border bg-sidebar py-2"
+    >
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              aria-current="page"
+              className="flex size-8 rotate-[-1deg] items-center justify-center rounded-md bg-accent text-accent-foreground shadow-moloo-sm"
+            />
+          }
+        >
+          {iconName ? <KindIcon icon={iconName} className="size-4" /> : <IconFile className="size-4" />}
+        </TooltipTrigger>
+        <TooltipContent side="right">{snapshot.manifest.title}</TooltipContent>
+      </Tooltip>
+    </aside>
+  );
+}
+
+function AssetRow({ asset, onSelect, active }: { asset: EditorAsset; onSelect?: () => void; active?: boolean }) {
+  return (
+    <button
+      type="button"
+      disabled={!onSelect}
+      onClick={onSelect}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted disabled:opacity-60",
+        active && "bg-muted",
+      )}
+    >
+      <IconFile className="size-4 shrink-0 text-muted-foreground" />
+      <span className="min-w-0 flex-1 truncate">{asset.name}</span>
+      <span className="truncate font-mono text-[10px] text-muted-foreground">{asset.type}</span>
+    </button>
+  );
+}
+
+function Dialogs({ snapshot, controller }: { snapshot: DevHostSnapshot; controller: DevHostController }) {
+  const dialog = snapshot.dialog;
+  const onOpenChange = (open: boolean) => {
+    if (!open) controller.closeDialog();
+  };
+  return (
+    <>
+      <Dialog open={dialog?.kind === "start"} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>새로 만들기</DialogTitle>
+            <DialogDescription>템플릿을 골라 현재 문서를 새로 시작해요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-2">
+            {snapshot.templates.map((template) => (
+              <button
+                key={template.id}
+                type="button"
+                onClick={() => controller.newFromTemplate(template.id)}
+                className="flex flex-col gap-1 rounded-md border-2 border-border bg-card p-3 text-left hover:border-primary"
+              >
+                <span className="font-display text-sm font-bold">{template.label}</span>
+                {template.description ? (
+                  <span className="text-xs text-muted-foreground">{template.description}</span>
+                ) : null}
+                <span className="font-mono text-[10px] text-muted-foreground">{template.defaultName}</span>
+              </button>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={dialog?.kind === "browser" || dialog?.kind === "pick"} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{dialog?.kind === "pick" ? "에셋 선택" : "에셋 브라우저"}</DialogTitle>
+            <DialogDescription>로컬 샌드박스 에셋이에요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-0.5">
+            {dialog?.kind === "pick" ? (
+              dialog.candidates.length === 0 ? (
+                <p className="px-2 py-4 text-center text-xs text-muted-foreground">선택할 수 있는 에셋이 없어요.</p>
+              ) : (
+                dialog.candidates.map((asset) => (
+                  <AssetRow key={asset.id} asset={asset} onSelect={() => controller.resolvePick(asset.id)} />
+                ))
+              )
+            ) : (
+              <>
+                <AssetRow asset={snapshot.activeAsset} active />
+                {snapshot.companions.map((asset) => (
+                  <AssetRow key={asset.id} asset={asset} onSelect={() => controller.openCompanion(asset.id)} />
+                ))}
+              </>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+function SearchDialog({ snapshot, controller }: { snapshot: DevHostSnapshot; controller: DevHostController }) {
+  const [query, setQuery] = useState("");
+  const open = snapshot.dialog?.kind === "search";
+  useEffect(() => {
+    if (open) setQuery("");
+  }, [open]);
+  const commands = snapshot.chrome?.contributes?.commands ?? [];
+  const matches = commands.filter((command) => {
+    const state = snapshot.commandState[command.id];
+    if (state && !state.visible) return false;
+    const q = query.trim().toLowerCase();
+    return !q || command.title.toLowerCase().includes(q) || command.id.toLowerCase().includes(q);
+  });
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && controller.closeDialog()}>
+      <DialogContent className="top-24 translate-y-0 gap-2 p-2 sm:max-w-md" showCloseButton={false}>
+        <DialogTitle className="sr-only">명령 검색</DialogTitle>
+        <Input
+          autoFocus
+          placeholder="명령 검색..."
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onKeyDown={(event) => {
+            const first = matches.find((command) => !snapshot.commandState[command.id]?.disabled);
+            if (event.key === "Enter" && first) {
+              controller.closeDialog();
+              controller.invokeCommand(first.id);
+            }
+          }}
+        />
+        <div className="flex max-h-72 flex-col overflow-auto">
+          {matches.length === 0 ? (
+            <p className="px-2 py-3 text-center text-xs text-muted-foreground">명령이 없어요.</p>
+          ) : (
+            matches.map((command) => (
+              <button
+                key={command.id}
+                type="button"
+                disabled={snapshot.commandState[command.id]?.disabled}
+                onClick={() => {
+                  controller.closeDialog();
+                  controller.invokeCommand(command.id);
+                }}
+                className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted disabled:opacity-50"
+              >
+                <span className="truncate">{snapshot.commandState[command.id]?.label || command.title}</span>
+                <span className="font-mono text-[10px] text-muted-foreground">{command.id}</span>
+              </button>
+            ))
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function JsonBlock({ value }: { value: unknown }) {
+  return (
+    <pre className="m-0 min-h-0 flex-1 overflow-auto p-3 font-mono text-[11px] leading-relaxed text-foreground">
+      {JSON.stringify(value, null, 2) ?? "undefined"}
+    </pre>
+  );
+}
+
+const INSPECTOR_MIN_WIDTH = 240;
+const INSPECTOR_MAX_WIDTH = 720;
+
+type InspectorLayout = { open: boolean; width: number };
+
+function clampWidth(width: number): number {
+  return Math.min(INSPECTOR_MAX_WIDTH, Math.max(INSPECTOR_MIN_WIDTH, Math.round(width)));
+}
+
+function readInspectorLayout(): InspectorLayout {
+  try {
+    const saved = JSON.parse(window.localStorage.getItem(INSPECTOR_STORAGE_KEY) ?? "null") as Partial<InspectorLayout> | null;
+    return { open: saved?.open === true, width: clampWidth(saved?.width ?? 360) };
+  } catch {
+    return { open: false, width: 360 };
+  }
+}
+
+function useInspectorLayout() {
+  const [layout, setLayout] = useState(readInspectorLayout);
+  useEffect(() => {
+    window.localStorage.setItem(INSPECTOR_STORAGE_KEY, JSON.stringify(layout));
+  }, [layout]);
+  return [layout, setLayout] as const;
+}
+
+function SimulatorRow({ label, uiOnly, children }: { label: string; uiOnly?: boolean; children: React.ReactNode }) {
+  return (
+    <label className="flex items-center justify-between gap-2 text-xs">
+      <span className="flex items-center gap-1.5 font-mono text-muted-foreground">
+        {label}
+        {uiOnly ? (
+          <Badge variant="outline" className="h-4 px-1 font-sans text-[10px]">
+            UI만 바뀜
+          </Badge>
+        ) : null}
+      </span>
+      {children}
+    </label>
+  );
+}
+
+function SimulatorTab({ snapshot, controller }: { snapshot: DevHostSnapshot; controller: DevHostController }) {
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      <SimulatorRow label="mode">
+        <NativeSelect
+          size="sm"
+          value={snapshot.mode}
+          onChange={(event) => controller.setMode(event.target.value as EditorSession["mode"])}
+        >
+          {MODES.map((m) => (
+            <NativeSelectOption key={m} value={m}>
+              {m}
+            </NativeSelectOption>
+          ))}
+        </NativeSelect>
+      </SimulatorRow>
+      <SimulatorRow label="syncStatus">
+        <NativeSelect
+          size="sm"
+          value={snapshot.syncStatus}
+          onChange={(event) => controller.setSyncStatus(event.target.value as EditorSession["syncStatus"])}
+        >
+          {SYNC.map((s) => (
+            <NativeSelectOption key={s} value={s}>
+              {s}
+            </NativeSelectOption>
+          ))}
+        </NativeSelect>
+      </SimulatorRow>
+      <SimulatorRow label="canManage" uiOnly>
+        <Switch checked={snapshot.canManage} onCheckedChange={(checked) => controller.setCanManage(checked)} />
+      </SimulatorRow>
+      <p className="m-0 text-[11px] text-muted-foreground">
+        값은 뷰에 보내는 세션만 바꿔요. 서버 권한이나 동기화는 바뀌지 않아요.
+      </p>
+      <div className="flex flex-col gap-0.5 border-t border-border pt-2">
+        <Button variant="ghost" size="sm" className="justify-start" onClick={() => controller.restartView()}>
+          <IconRefresh /> 뷰 재시작
+        </Button>
+        <Button variant="ghost" size="sm" className="justify-start" onClick={() => controller.resetStorage()}>
+          <IconTrash /> localStorage 초기화
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function Inspector({
+  snapshot,
+  controller,
+  layout,
+  setLayout,
+}: {
+  snapshot: DevHostSnapshot;
+  controller: DevHostController;
+  layout: InspectorLayout;
+  setLayout: React.Dispatch<React.SetStateAction<InspectorLayout>>;
+}) {
+  const drag = useRef<{ x: number; width: number; moved: boolean } | null>(null);
+  const changed = !simulatorIsDefault(snapshot);
+  return (
+    <div data-slot="dev-inspector" className="flex shrink-0">
+      <button
+        type="button"
+        data-slot="dev-inspector-handle"
+        aria-label="인스펙터"
+        aria-expanded={layout.open}
+        aria-controls="dev-inspector-panel"
+        title="인스펙터 (클릭: 열기/닫기, 드래그: 폭 조절)"
+        className="moloo-focus relative flex w-3 shrink-0 cursor-col-resize touch-none items-center justify-center border-l border-border bg-card hover:bg-muted"
+        onPointerDown={(event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          drag.current = { x: event.clientX, width: layout.width, moved: false };
+        }}
+        onPointerMove={(event) => {
+          const start = drag.current;
+          if (!start) return;
+          const delta = start.x - event.clientX;
+          if (!start.moved && Math.abs(delta) < 4) return;
+          start.moved = true;
+          setLayout({ open: true, width: clampWidth(start.width + delta) });
+        }}
+        onPointerUp={() => {
+          const start = drag.current;
+          drag.current = null;
+          if (start && !start.moved) setLayout((prev) => ({ ...prev, open: !prev.open }));
+        }}
+        onPointerCancel={() => {
+          drag.current = null;
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            const step = event.key === "ArrowLeft" ? 24 : -24;
+            setLayout((prev) => ({ open: true, width: clampWidth(prev.width + step) }));
+          }
+        }}
+        onClick={(event) => {
+          // Pointer clicks toggle in onPointerUp; detail 0 means keyboard activation.
+          if (event.detail === 0) setLayout((prev) => ({ ...prev, open: !prev.open }));
+        }}
+      >
+        <span className="h-8 w-1 rounded-full bg-border" />
+        {changed ? (
+          <span
+            data-slot="simulator-dot"
+            className="absolute top-2 left-1/2 size-2 -translate-x-1/2 rounded-full bg-primary"
+          />
+        ) : null}
+      </button>
+      <aside
+        id="dev-inspector-panel"
+        aria-label="인스펙터"
+        hidden={!layout.open}
+        style={{ width: layout.width }}
+        className="flex flex-col bg-card"
+      >
+        <Tabs defaultValue="doc" className="flex min-h-0 flex-1 flex-col gap-0">
+          <div className="flex h-10 shrink-0 items-center border-b border-border px-2">
+            <TabsList variant="line">
+              <TabsTrigger value="doc">Y.Doc</TabsTrigger>
+              <TabsTrigger value="log">로그</TabsTrigger>
+              <TabsTrigger value="manifest">Manifest</TabsTrigger>
+              <TabsTrigger value="simulator">시뮬레이터</TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="doc" className="flex min-h-0 flex-1 flex-col">
+            <JsonBlock value={snapshot.docJson} />
+          </TabsContent>
+          <TabsContent value="log" className="flex min-h-0 flex-1 flex-col">
+            <pre className="m-0 min-h-0 flex-1 overflow-auto p-3 font-mono text-[11px] leading-relaxed text-muted-foreground">
+              {snapshot.logs.join("\n") || "(아직 이벤트 없음)"}
+            </pre>
+          </TabsContent>
+          <TabsContent value="manifest" className="flex min-h-0 flex-1 flex-col">
+            <JsonBlock value={{ manifest: snapshot.manifest, chrome: snapshot.chrome }} />
+          </TabsContent>
+          <TabsContent value="simulator" className="min-h-0 flex-1 overflow-auto">
+            <SimulatorTab snapshot={snapshot} controller={controller} />
+          </TabsContent>
+        </Tabs>
+      </aside>
+    </div>
+  );
+}
+
+function ViewFrame({ snapshot, controller }: { snapshot: DevHostSnapshot; controller: DevHostController }) {
+  const attach = useCallback((frame: HTMLIFrameElement | null) => controller.attachFrame(frame), [controller]);
+  return (
+    <div className="relative flex min-h-0 min-w-0 flex-1">
+      <iframe
+        key={snapshot.frameKey}
+        ref={attach}
+        src={controller.frameUrl()}
+        sandbox={editorFrameAttributes.sandbox}
+        referrerPolicy={editorFrameAttributes.referrerPolicy}
+        title={snapshot.manifest.id}
+        className="size-full flex-1 border-0"
+      />
+      {snapshot.chrome ? null : (
+        <div className="absolute inset-0 flex">
+          <EditorLoading />
+        </div>
+      )}
+      {snapshot.buildError ? (
+        <div role="alert" className="absolute inset-0 z-10 flex items-start justify-center bg-background/80 p-6">
+          <div className="flex max-h-full w-full max-w-3xl flex-col gap-2 rounded-md border-2 border-destructive bg-card p-3 shadow-moloo-lg">
+            <div className="flex items-center justify-between">
+              <span className="font-display text-sm font-bold text-destructive">빌드 에러</span>
+              <Button variant="ghost" size="icon-xs" aria-label="닫기" onClick={() => controller.dismissBuildError()}>
+                <IconX />
+              </Button>
+            </div>
+            <pre className="m-0 overflow-auto whitespace-pre-wrap font-mono text-xs">{snapshot.buildError}</pre>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function DevHostApp({ controller }: { controller: DevHostController }) {
+  const snapshot = useSnapshot(controller);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const openImport = useCallback(() => fileInput.current?.click(), []);
+  const [inspector, setInspector] = useInspectorLayout();
+
+  const handlers = useMemo<HostChromeHandlers>(
+    () => ({
+      openStartDialog: () => controller.openDialog({ kind: "start" }),
+      openBrowser: () => controller.openDialog({ kind: "browser" }),
+      openImport,
+      resetLayout: () => controller.resetLayout(),
+    }),
+    [controller, openImport],
+  );
+  const onViewCommand = useCallback((commandId: string) => controller.invokeCommand(commandId), [controller]);
+
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+      const key = event.key.toLowerCase();
+      if (key === "k") {
+        event.preventDefault();
+        controller.openDialog({ kind: "search" });
+      } else if (key === "i") {
+        event.preventDefault();
+        setInspector((prev) => ({ ...prev, open: !prev.open }));
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [controller, setInspector]);
+
+  const dark = snapshot.theme === "dark";
+  return (
+    <TooltipProvider>
+      <div data-slot="dev-host" className="flex h-svh flex-col overflow-hidden bg-background pt-12 font-sans text-foreground">
+        <header className="fixed inset-x-0 top-0 z-40 grid h-12 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b-2 border-border bg-card px-3">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span className="shrink-0 rotate-[-2deg] bg-accent px-[0.45rem] py-[0.18rem] font-display text-[0.8rem] font-extrabold tracking-[-0.03em] text-accent-foreground shadow-moloo-sm">
+              moloo
+            </span>
+            <span className="ml-1 truncate font-display text-[0.8rem] font-bold tracking-[-0.02em]">{snapshot.manifest.title}</span>
+            <Badge variant="secondary" className="h-4 px-1 text-[10px]">
+              DEV
+            </Badge>
+          </div>
+          <div className="flex min-w-0 items-center justify-center gap-1.5">
+            <AssetChip snapshot={snapshot} controller={controller} onImport={openImport} />
+          </div>
+          <div className="flex min-w-0 items-center justify-end gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-44 justify-between font-sans font-normal text-muted-foreground shadow-none"
+              onClick={() => controller.openDialog({ kind: "search" })}
+            >
+              <span className="flex items-center gap-1.5">
+                <IconSearch /> Search...
+              </span>
+              <Kbd>⌘K</Kbd>
+            </Button>
+            <HeaderIconButton
+              label={dark ? "라이트 모드" : "다크 모드"}
+              onClick={() => controller.setTheme(dark ? "light" : "dark")}
+            >
+              {dark ? <IconSun /> : <IconMoon />}
+            </HeaderIconButton>
+          </div>
+        </header>
+        <div className="flex min-h-0 flex-1">
+          <Rail snapshot={snapshot} />
+          <main className="flex min-h-0 min-w-0 flex-1 flex-col">
+            {snapshot.chrome ? (
+              <EditorHostChrome
+                value={snapshot.chrome}
+                host={handlers}
+                onViewCommand={onViewCommand}
+                commandState={snapshot.commandState}
+              />
+            ) : (
+              <nav className="h-8 shrink-0 border-b border-border bg-card" aria-label="에디터 메뉴" />
+            )}
+            <div className="flex min-h-0 flex-1">
+              <ViewFrame snapshot={snapshot} controller={controller} />
+              <Inspector snapshot={snapshot} controller={controller} layout={inspector} setLayout={setInspector} />
+            </div>
+          </main>
+        </div>
+        <input
+          ref={fileInput}
+          type="file"
+          hidden
+          accept={snapshot.manifest.importAccept}
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            event.target.value = "";
+            if (file) void controller.importFile(file);
+          }}
+        />
+        <Dialogs snapshot={snapshot} controller={controller} />
+        <SearchDialog snapshot={snapshot} controller={controller} />
+      </div>
+    </TooltipProvider>
+  );
+}