@moloodev/cli 0.3.0 → 0.4.0

package/src/dev-host-app.tsx

@@ -1,688 +0,0 @@
-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>
-  );
-}