@moloodev/cli 0.2.2 → 0.4.0

package/src/dev-host-client.ts

@@ -1,940 +0,0 @@
-import {
-  REMOTE_ORIGIN,
-  applyUpdate,
-  createDoc,
-  encodeState,
-  fromBase64,
-  observe,
-  toBase64,
-  toJson,
-  writeJson,
-  writeTextBodyContent,
-  type Doc,
-} from "@moloodev/editor-sdk/crdt";
-import { editorLayoutStorageKey } from "@moloodev/editor-sdk/layout";
-import {
-  createEditorChannel,
-  parseChromeManifest,
-  parseSessionOpen,
-  type ChromeManifest,
-  type EditorAccess,
-  type EditorAsset,
-  type EditorChannel,
-  type EditorEvent,
-  type EditorLayoutValues,
-  type EditorOperation,
-  type EditorPort,
-  type EditorRequest,
-  type EditorSession,
-  type Json,
-} from "@moloodev/editor-sdk/protocol";
-import type { EditorFileMatcher, EditorTemplate } from "@moloodev/editor-sdk/commands/editor-document";
-
-export type DevHostBootstrap = {
-  editorId: string;
-  hostOrigin: string;
-  viewOrigin: string;
-  manifest: {
-    id: string;
-    title: string;
-    icon?: string;
-    description?: string;
-    acceptedTypes?: string[];
-    fileTypes?: EditorFileMatcher[];
-    templates?: EditorTemplate[];
-    importAccept?: string;
-    capabilities?: string[];
-    layoutVersion?: number;
-  };
-};
-
-type SandboxAssetRecord = {
-  asset: EditorAsset;
-  storageMode: "json" | "text" | "blob";
-  contentType: string;
-  schema: string | null;
-  docStateBase64: string | null;
-  initialPayload: Record<string, Json>;
-  fileUrl: string | null;
-};
-
-type CommandStateEntry = {
-  id: string;
-  visible: boolean;
-  disabled: boolean;
-  pressed: boolean;
-  label: string;
-};
-
-function adaptMessagePort(port: MessagePort): EditorPort {
-  const listeners = new Map<
-    (event: { readonly data: unknown }) => void,
-    (event: MessageEvent) => void
-  >();
-  return {
-    postMessage(data: unknown) {
-      port.postMessage(data);
-    },
-    start() {
-      port.start();
-    },
-    close() {
-      port.close();
-    },
-    addEventListener(_type, listener) {
-      const wrapped = (event: MessageEvent) => listener({ data: event.data });
-      listeners.set(listener, wrapped);
-      port.addEventListener("message", wrapped);
-    },
-    removeEventListener(_type, listener) {
-      const wrapped = listeners.get(listener);
-      if (!wrapped) return;
-      listeners.delete(listener);
-      port.removeEventListener("message", wrapped);
-    },
-  };
-}
-
-function defaultTemplateFor(manifest: DevHostBootstrap["manifest"]): EditorTemplate {
-  const first = manifest.templates?.[0];
-  if (first) return first;
-  const matcher = manifest.fileTypes?.[0];
-  const ext = matcher?.extensions?.[0] ?? ".json";
-  const storageMode = matcher?.storageMode ?? "json";
-  const contentType = matcher?.mimeTypes?.[0] ?? (storageMode === "text" ? "text/plain" : "application/json");
-  const type = manifest.acceptedTypes?.[0] ?? manifest.id;
-  return {
-    id: "default-blank",
-    label: "빈 문서",
-    description: "기본 빈 문서",
-    type,
-    defaultName: `untitled${ext}`,
-    storageMode,
-    contentType,
-    ...(matcher?.schema ? { schema: matcher.schema } : {}),
-    payload: storageMode === "text" ? { body: "" } : { version: 1 },
-  };
-}
-
-function initDocFromTemplate(template: EditorTemplate): { doc: Doc; data: Record<string, Json> } {
-  const doc = createDoc();
-  const payload = (template.payload ?? (template.storageMode === "text" ? { body: "" } : { version: 1 })) as Record<string, unknown>;
-  if (template.storageMode === "text") {
-    writeTextBodyContent(doc, payload);
-  } else {
-    writeJson(doc, payload);
-  }
-  const projected = toJson(doc).root;
-  const data = (projected && typeof projected === "object" && !Array.isArray(projected)
-    ? projected
-    : payload) as Record<string, Json>;
-  return { doc, data };
-}
-
-function createSampleCompanionAssets(nowIso: string): SandboxAssetRecord[] {
-  const catalogPayload: Record<string, Json> = {
-    version: 1,
-    components: {
-      "sample.Card": {
-        target: "react-dom",
-        package: "@moloodev/layout-basic@1.3.0",
-        export: "Panel",
-        props: { type: "object", properties: { gap: { type: "number" } } },
-        slots: ["header", "default", "footer"],
-      },
-    },
-  };
-  const catalogDoc = createDoc();
-  writeJson(catalogDoc, catalogPayload);
-
-  const noteDoc = createDoc();
-  writeTextBodyContent(noteDoc, { body: "# 샘플 노트\n\n로컬 개발 샌드박스 동반 에셋입니다.\n" });
-
-  return [
-    {
-      asset: {
-        id: "dev_asset_catalog_000001",
-        name: "sample.mcat",
-        type: "moloo.layout-catalog",
-        storageMode: "json",
-        contentType: "application/json",
-        schema: "https://moloo.dev/schemas/layout-catalog/v1.json",
-        path: "/sample.mcat",
-        epoch: 1,
-        headRevision: 1,
-        updatedAt: nowIso,
-        contentBytes: 256,
-        locked: false,
-        lockHeld: false,
-        trashed: false,
-      },
-      storageMode: "json",
-      contentType: "application/json",
-      schema: "https://moloo.dev/schemas/layout-catalog/v1.json",
-      docStateBase64: toBase64(encodeState(catalogDoc)),
-      initialPayload: catalogPayload,
-      fileUrl: null,
-    },
-    {
-      asset: {
-        id: "dev_asset_markdown_00002",
-        name: "readme.md",
-        type: "moloo.markdown",
-        storageMode: "text",
-        contentType: "text/markdown",
-        schema: null,
-        path: "/readme.md",
-        epoch: 1,
-        headRevision: 1,
-        updatedAt: nowIso,
-        contentBytes: 64,
-        locked: false,
-        lockHeld: false,
-        trashed: false,
-      },
-      storageMode: "text",
-      contentType: "text/markdown",
-      schema: null,
-      docStateBase64: toBase64(encodeState(noteDoc)),
-      initialPayload: { body: "# 샘플 노트\n\n로컬 개발 샌드박스 동반 에셋입니다.\n" },
-      fileUrl: null,
-    },
-  ];
-}
-
-export type DevHostDialog =
-  | { kind: "start" }
-  | { kind: "browser" }
-  | { kind: "pick"; candidates: EditorAsset[] }
-  | { kind: "search" };
-
-type PickBody = Extract<EditorRequest, { type: "host.pick" }>["body"];
-type PickResult = EditorOperation["host.pick"]["success"];
-
-/** Host UI preference; cleared by resetStorage with the editor keys. */
-export const INSPECTOR_STORAGE_KEY = "moloo-editor-dev:inspector";
-
-export type DevHostSnapshot = {
-  manifest: DevHostBootstrap["manifest"];
-  theme: "dark" | "light";
-  mode: EditorSession["mode"];
-  syncStatus: EditorSession["syncStatus"];
-  canManage: boolean;
-  buildError: string | null;
-  chrome: ChromeManifest | null;
-  commandState: Readonly<Record<string, CommandStateEntry>>;
-  logs: readonly string[];
-  docJson: unknown;
-  activeAsset: EditorAsset;
-  templates: readonly EditorTemplate[];
-  currentTemplateId: string;
-  companions: readonly EditorAsset[];
-  dialog: DevHostDialog | null;
-  frameKey: number;
-};
-
-export type DevHostController = {
-  getSnapshot(): DevHostSnapshot;
-  subscribe(listener: () => void): () => void;
-  attachFrame(frame: HTMLIFrameElement | null): void;
-  frameUrl(): string;
-  setTheme(theme: "dark" | "light"): void;
-  setMode(mode: EditorSession["mode"]): void;
-  setSyncStatus(status: EditorSession["syncStatus"]): void;
-  setCanManage(canManage: boolean): void;
-  dismissBuildError(): void;
-  renameAsset(name: string): void;
-  newFromTemplate(templateId: string): void;
-  openCompanion(assetId: string): void;
-  importFile(file: File): Promise<void>;
-  resetLayout(): void;
-  restartView(): void;
-  resetStorage(): void;
-  openDialog(dialog: DevHostDialog): void;
-  closeDialog(): void;
-  resolvePick(assetId: string | null): void;
-  invokeCommand(commandId: string): void;
-};
-
-export const SIMULATOR_DEFAULTS = {
-  mode: "edit",
-  syncStatus: "live",
-  canManage: true,
-} as const;
-
-export function simulatorIsDefault(
-  snapshot: Pick<DevHostSnapshot, "mode" | "syncStatus" | "canManage">,
-): boolean {
-  return (
-    snapshot.mode === SIMULATOR_DEFAULTS.mode &&
-    snapshot.syncStatus === SIMULATOR_DEFAULTS.syncStatus &&
-    snapshot.canManage === SIMULATOR_DEFAULTS.canManage
-  );
-}
-
-/** The view runs in `sandbox="allow-scripts"`, so its messages arrive from the opaque origin "null". */
-export function isViewHandshake(
-  event: Pick<MessageEvent, "origin" | "source">,
-  frameWindow: MessageEventSource | null | undefined,
-): boolean {
-  return event.origin === "null" && frameWindow != null && event.source === frameWindow;
-}
-
-export function pickCandidates(assets: readonly EditorAsset[], body: PickBody): EditorAsset[] {
-  return assets.filter((a) => {
-    if (body.excludeIds?.includes(a.id)) return false;
-    if (body.excludeTypes?.includes(a.type)) return false;
-    if (body.acceptedTypes?.length && !body.acceptedTypes.includes(a.type)) return false;
-    return true;
-  });
-}
-
-export function createDevHostController(config: DevHostBootstrap): DevHostController {
-  const storagePrefix = `moloo.dev-host.${config.editorId}`;
-  let manifest = config.manifest;
-  let theme: "dark" | "light" = "dark";
-  let mode: EditorSession["mode"] = SIMULATOR_DEFAULTS.mode;
-  let syncStatus: EditorSession["syncStatus"] = SIMULATOR_DEFAULTS.syncStatus;
-  let access: EditorAccess = { canManage: SIMULATOR_DEFAULTS.canManage };
-  let buildError: string | null = null;
-  let dialog: DevHostDialog | null = null;
-  let pendingPick: ((result: PickResult) => void) | null = null;
-  let frameKey = 0;
-  let frame: HTMLIFrameElement | null = null;
-
-  let activeChannel: EditorChannel | null = null;
-  let activeDocCleanup: (() => void) | null = null;
-  let submittedChrome: ChromeManifest | null = null;
-  let commandStates: Record<string, CommandStateEntry> = {};
-  let protocolLogs: string[] = [];
-
-  const listeners = new Set<() => void>();
-  let snapshot: DevHostSnapshot | null = null;
-
-  const nowIso = new Date().toISOString();
-  const companionAssets = new Map<string, SandboxAssetRecord>();
-  for (const item of createSampleCompanionAssets(nowIso)) {
-    companionAssets.set(item.asset.id, item);
-  }
-
-  let currentTemplate = defaultTemplateFor(manifest);
-  const activeAssetId = "dev_active_asset_0000001";
-  let activeAssetName = currentTemplate.defaultName;
-  let activeAssetType = currentTemplate.type || manifest.acceptedTypes?.[0] || manifest.id;
-  let activeStorageMode: "json" | "text" | "blob" = currentTemplate.storageMode ?? "json";
-  let activeContentType = currentTemplate.contentType ?? (activeStorageMode === "text" ? "text/plain" : "application/json");
-  let activeSchema = currentTemplate.schema ?? null;
-  let activeDoc: Doc = createDoc();
-  let activeData: Record<string, Json> = {};
-
-  function templates(): EditorTemplate[] {
-    return manifest.templates?.length ? manifest.templates : [defaultTemplateFor(manifest)];
-  }
-
-  function activeAsset(): EditorAsset {
-    return {
-      id: activeAssetId,
-      name: activeAssetName,
-      type: activeAssetType,
-      storageMode: activeStorageMode,
-      contentType: activeContentType,
-      schema: activeSchema,
-      path: `/${activeAssetName}`,
-      epoch: 1,
-      headRevision: 1,
-      updatedAt: nowIso,
-      contentBytes: 0,
-      locked: false,
-      lockHeld: false,
-      trashed: false,
-    };
-  }
-
-  function notify(): void {
-    snapshot = null;
-    for (const listener of listeners) listener();
-  }
-
-  function logProtocol(entry: string): void {
-    const stamp = new Date().toISOString().slice(11, 23);
-    protocolLogs = [`[${stamp}] ${entry}`, ...protocolLogs].slice(0, 200);
-    notify();
-  }
-
-  function saveStateToStorage(): void {
-    try {
-      const saved = {
-        name: activeAssetName,
-        type: activeAssetType,
-        storageMode: activeStorageMode,
-        contentType: activeContentType,
-        schema: activeSchema,
-        docBase64: toBase64(encodeState(activeDoc)),
-      };
-      window.localStorage.setItem(`${storagePrefix}.session`, JSON.stringify(saved));
-    } catch {
-      // Ignore quota errors in sandbox
-    }
-  }
-
-  function projectData(doc: Doc): Record<string, Json> {
-    const root = toJson(doc).root;
-    return (root && typeof root === "object" && !Array.isArray(root) ? root : {}) as Record<string, Json>;
-  }
-
-  function bindActiveDocObserver(): void {
-    activeDocCleanup?.();
-    activeDocCleanup = observe(activeDoc, () => {
-      activeData = projectData(activeDoc);
-      saveStateToStorage();
-      notify();
-    });
-  }
-
-  function loadOrInitTemplate(template: EditorTemplate, ignoreSaved = false): void {
-    currentTemplate = template;
-    if (!ignoreSaved) {
-      try {
-        const raw = window.localStorage.getItem(`${storagePrefix}.session`);
-        if (raw) {
-          const parsed = JSON.parse(raw) as {
-            name: string;
-            type: string;
-            storageMode: "json" | "text" | "blob";
-            contentType: string;
-            schema: string | null;
-            docBase64: string;
-          };
-          const doc = createDoc();
-          applyUpdate(doc, fromBase64(parsed.docBase64), REMOTE_ORIGIN);
-          activeAssetName = parsed.name;
-          activeAssetType = parsed.type;
-          activeStorageMode = parsed.storageMode;
-          activeContentType = parsed.contentType;
-          activeSchema = parsed.schema;
-          activeDoc = doc;
-          activeData = projectData(doc);
-          bindActiveDocObserver();
-          return;
-        }
-      } catch {
-        // Fall through to template initialization
-      }
-    }
-    const initialized = initDocFromTemplate(template);
-    activeAssetName = template.defaultName;
-    activeAssetType = template.type || manifest.acceptedTypes?.[0] || manifest.id;
-    activeStorageMode = template.storageMode ?? "json";
-    activeContentType = template.contentType ?? (activeStorageMode === "text" ? "text/plain" : "application/json");
-    activeSchema = template.schema ?? null;
-    activeDoc = initialized.doc;
-    activeData = initialized.data;
-    bindActiveDocObserver();
-    saveStateToStorage();
-  }
-
-  loadOrInitTemplate(currentTemplate, false);
-
-  function currentSessionPayload(): EditorSession {
-    if (mode === "idle") {
-      return { asset: null, mode: "idle", data: null, syncStatus };
-    }
-    return {
-      asset: {
-        id: activeAssetId,
-        type: activeAssetType,
-        name: activeAssetName,
-        storageMode: activeStorageMode,
-        contentType: activeContentType,
-        schema: activeSchema,
-      },
-      mode,
-      data: activeData,
-      syncStatus,
-    };
-  }
-
-  function publishAllToView(): void {
-    if (!activeChannel) return;
-    activeChannel.emit({ v: 1, type: "access", body: access });
-    activeChannel.emit({ v: 1, type: "theme", body: { theme } });
-    const session = currentSessionPayload();
-    activeChannel.emit({ v: 1, type: "session", body: session });
-    if (session.asset) {
-      const update = toBase64(encodeState(activeDoc));
-      activeChannel.emit({
-        v: 1,
-        type: "doc.update",
-        body: { assetId: session.asset.id, update },
-      });
-    }
-  }
-
-  function frameUrl(): string {
-    return `${config.viewOrigin}/?parent=${encodeURIComponent(window.location.origin)}`;
-  }
-
-  function restartView(): void {
-    if (pendingPick) resolvePick(null);
-    activeChannel?.close();
-    activeChannel = null;
-    submittedChrome = null;
-    commandStates = {};
-    frameKey += 1;
-    notify();
-  }
-
-  function openDialog(next: DevHostDialog): void {
-    if (dialog?.kind === "pick") resolvePick(null);
-    dialog = next;
-    notify();
-  }
-
-  function closeDialog(): void {
-    if (dialog?.kind === "pick") {
-      resolvePick(null);
-      return;
-    }
-    dialog = null;
-    notify();
-  }
-
-  function resolvePick(assetId: string | null): void {
-    const resolve = pendingPick;
-    pendingPick = null;
-    const candidates = dialog?.kind === "pick" ? dialog.candidates : [];
-    dialog = null;
-    notify();
-    if (!resolve) return;
-    const chosen = assetId ? candidates.find((asset) => asset.id === assetId) : undefined;
-    resolve(chosen ? { cancelled: false, assets: [chosen] } : { cancelled: true });
-  }
-
-  function requestPick(body: PickBody): Promise<PickResult> {
-    const candidates = pickCandidates([...companionAssets.values()].map((item) => item.asset), body);
-    if (pendingPick) resolvePick(null);
-    return new Promise<PickResult>((resolve) => {
-      pendingPick = resolve;
-      dialog = { kind: "pick", candidates };
-      notify();
-    });
-  }
-
-  function resetLayout(): void {
-    try {
-      window.localStorage.removeItem(editorLayoutStorageKey(manifest.id, manifest.layoutVersion));
-    } catch {
-      // ignore
-    }
-    logProtocol("layout reset");
-  }
-
-  function invokeCommand(commandId: string): void {
-    activeChannel?.emit({ v: 1, type: "command.invoke", body: { commandId } });
-    logProtocol(`command.invoke -> ${commandId}`);
-  }
-
-  async function handleRequest(
-    request: EditorRequest,
-  ): Promise<{ ok: true; body: EditorOperation[EditorRequest["type"]]["success"] } | { ok: false; code: string }> {
-    logProtocol(`req ${request.type}`);
-    const layoutKey = editorLayoutStorageKey(manifest.id, manifest.layoutVersion);
-
-    switch (request.type) {
-      case "chrome.submit": {
-        const parsed = parseChromeManifest(request.body);
-        if (!parsed.ok) return { ok: false, code: "schema" };
-        submittedChrome = parsed.message;
-        notify();
-        return { ok: true, body: {} };
-      }
-      case "doc.append": {
-        if (request.body.assetId !== activeAssetId || mode !== "edit") {
-          return { ok: false, code: "forbidden" };
-        }
-        try {
-          applyUpdate(activeDoc, fromBase64(request.body.update), REMOTE_ORIGIN);
-          const root = toJson(activeDoc).root;
-          if (root && typeof root === "object" && !Array.isArray(root)) {
-            activeData = root as Record<string, Json>;
-          }
-          saveStateToStorage();
-          notify();
-          return { ok: true, body: {} };
-        } catch {
-          return { ok: false, code: "invalid_update" };
-        }
-      }
-      case "layout.load": {
-        try {
-          const raw = window.localStorage.getItem(layoutKey);
-          const layout = raw ? (JSON.parse(raw) as EditorLayoutValues) : null;
-          return { ok: true, body: { layout } };
-        } catch {
-          return { ok: true, body: { layout: null } };
-        }
-      }
-      case "layout.save": {
-        try {
-          window.localStorage.setItem(layoutKey, JSON.stringify(request.body.layout));
-        } catch {
-          // ignore
-        }
-        return { ok: true, body: {} };
-      }
-      case "asset.rename": {
-        activeAssetName = request.body.name;
-        saveStateToStorage();
-        notify();
-        activeChannel?.emit({ v: 1, type: "session", body: currentSessionPayload() });
-        return { ok: true, body: { name: activeAssetName } };
-      }
-      case "asset.list": {
-        const rows = [...companionAssets.values()]
-          .map((item) => item.asset)
-          .filter((a) => !request.body.type || a.type === request.body.type);
-        return { ok: true, body: rows };
-      }
-      case "asset.read": {
-        const record = companionAssets.get(request.body.id);
-        if (!record) return { ok: false, code: "not_found" };
-        return {
-          ok: true,
-          body: {
-            asset: record.asset,
-            payload: record.initialPayload,
-            fileUrl: record.fileUrl,
-          },
-        };
-      }
-      case "asset.listRevisions": {
-        return {
-          ok: true,
-          body: [
-            {
-              id: "rev_00000000000000000001",
-              assetId: request.body.id,
-              revision: 1,
-              message: "Initial sandbox revision",
-              contentBytes: 128,
-              createdAt: nowIso,
-            },
-          ],
-        };
-      }
-      case "asset.getComposition": {
-        return {
-          ok: true,
-          body: {
-            bundleId: request.body.id,
-            bundleName: activeAssetName,
-            bundleEpoch: 1,
-            bundleUpdatedAt: nowIso,
-            headRevision: 1,
-            entries: {},
-            members: [],
-            refs: [],
-            previousMembers: [],
-            previousRefs: [],
-            added: [],
-            removed: [],
-            issues: [],
-            reviewed: "rev-1",
-            totalBytes: 0,
-            deltaBytes: 0,
-          },
-        };
-      }
-      case "asset.getPublication": {
-        return {
-          ok: true,
-          body: {
-            visibility: "private",
-          },
-        };
-      }
-      case "asset.confirmBundle": {
-        return {
-          ok: true,
-          body: {
-            revision: 1,
-            composition: {
-              bundleId: request.body.id,
-              bundleName: activeAssetName,
-              bundleEpoch: 1,
-              bundleUpdatedAt: nowIso,
-              headRevision: 1,
-              entries: {},
-              members: [],
-              refs: [],
-              previousMembers: [],
-              previousRefs: [],
-              added: [],
-              removed: [],
-              issues: [],
-              reviewed: request.body.reviewed,
-              totalBytes: 0,
-              deltaBytes: 0,
-            },
-          },
-        };
-      }
-      case "asset.putPublication": {
-        return {
-          ok: true,
-          body: request.body.publication,
-        };
-      }
-      case "host.pick": {
-        return { ok: true, body: await requestPick(request.body) };
-      }
-      case "host.start": {
-        openDialog({ kind: "start" });
-        return { ok: true, body: {} };
-      }
-      case "host.openBrowser": {
-        openDialog({ kind: "browser" });
-        return { ok: true, body: {} };
-      }
-      case "host.openAsset":
-      case "host.openInfo": {
-        return { ok: true, body: {} };
-      }
-      case "host.clipboardWrite": {
-        try {
-          await navigator.clipboard.writeText(request.body.text);
-          return { ok: true, body: {} };
-        } catch {
-          return { ok: false, code: "clipboard_denied" };
-        }
-      }
-      case "host.download": {
-        if ("url" in request.body) {
-          const a = document.createElement("a");
-          a.href = request.body.url;
-          a.download = "";
-          a.click();
-          return { ok: true, body: {} };
-        }
-        const bytes =
-          request.body.content.kind === "text"
-            ? new TextEncoder().encode(request.body.content.text)
-            : fromBase64(request.body.content.data);
-        const blob = new Blob([new Uint8Array(bytes)], { type: request.body.mimeType });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = request.body.filename;
-        a.click();
-        setTimeout(() => URL.revokeObjectURL(url), 1000);
-        return { ok: true, body: {} };
-      }
-      case "host.openPopup": {
-        window.open(request.body.url, "_blank", "noopener,noreferrer");
-        return { ok: true, body: {} };
-      }
-      case "host.render": {
-        const blob = new Blob([JSON.stringify(request.body.document, null, 2)], {
-          type: "application/pdf",
-        });
-        const url = URL.createObjectURL(blob);
-        return { ok: true, body: { url } };
-      }
-    }
-  }
-
-
-  function handleEvent(event: EditorEvent): void {
-    if (event.type === "command.state") {
-      commandStates = { ...commandStates, [event.body.id]: event.body };
-      notify();
-      return;
-    }
-    if (event.type === "command.shortcut") {
-      invokeCommand(event.body.commandId);
-    }
-  }
-
-  window.addEventListener("message", (event: MessageEvent) => {
-    if (!isViewHandshake(event, frame?.contentWindow)) return;
-    const port = event.ports?.[0];
-    if (!port) return;
-    const open = parseSessionOpen(event.data);
-    activeChannel?.close();
-    activeChannel = null;
-    if (!open.ok || open.message.body.editorId !== config.editorId) {
-      port.postMessage({ v: 1, ok: false, code: open.ok ? "rejected" : open.code });
-      port.close();
-      return;
-    }
-    const channel = createEditorChannel({
-      role: "host",
-      editorId: config.editorId,
-      port: adaptMessagePort(port),
-      onRequest: handleRequest,
-      onEvent: handleEvent,
-    });
-    activeChannel = channel;
-    void channel.handshake.then((res) => {
-      if (!res.ok || activeChannel !== channel) return;
-      logProtocol(`handshake ok (${config.editorId})`);
-      publishAllToView();
-    });
-  });
-
-  if (typeof EventSource !== "undefined") {
-    const events = new EventSource("/events");
-    events.addEventListener("reload", async () => {
-      buildError = null;
-      try {
-        const res = await fetch("/manifest.json");
-        if (res.ok) {
-          manifest = (await res.json()) as DevHostBootstrap["manifest"];
-        }
-      } catch {
-        // ignore
-      }
-      logProtocol("SSE reload -> view restarted");
-      restartView();
-    });
-    events.addEventListener("build-error", (e: MessageEvent) => {
-      try {
-        const parsed = JSON.parse(String(e.data)) as { message?: string };
-        buildError = parsed.message ?? String(e.data);
-      } catch {
-        buildError = String(e.data);
-      }
-      notify();
-    });
-  }
-
-  return {
-    getSnapshot() {
-      const next: DevHostSnapshot = snapshot ?? {
-        manifest,
-        theme,
-        mode,
-        syncStatus,
-        canManage: access.canManage,
-        buildError,
-        chrome: submittedChrome,
-        commandState: commandStates,
-        logs: protocolLogs,
-        docJson: toJson(activeDoc).root,
-        activeAsset: activeAsset(),
-        templates: templates(),
-        currentTemplateId: currentTemplate.id,
-        companions: [...companionAssets.values()].map((item) => item.asset),
-        dialog,
-        frameKey,
-      };
-      snapshot = next;
-      return next;
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-    attachFrame(next) {
-      frame = next;
-    },
-    frameUrl,
-    setTheme(next) {
-      theme = next;
-      document.documentElement.classList.toggle("dark", theme === "dark");
-      publishAllToView();
-      logProtocol(`theme -> ${theme}`);
-    },
-    setMode(next) {
-      mode = next;
-      publishAllToView();
-      logProtocol(`session.mode -> ${mode}`);
-    },
-    setSyncStatus(next) {
-      syncStatus = next;
-      publishAllToView();
-      logProtocol(`session.syncStatus -> ${syncStatus}`);
-    },
-    setCanManage(next) {
-      access = { canManage: next };
-      publishAllToView();
-      logProtocol(`access.canManage -> ${String(next)}`);
-    },
-    dismissBuildError() {
-      buildError = null;
-      notify();
-    },
-    renameAsset(name) {
-      const trimmed = name.trim();
-      if (!trimmed || trimmed === activeAssetName) return;
-      activeAssetName = trimmed;
-      saveStateToStorage();
-      publishAllToView();
-      logProtocol(`asset.rename -> ${trimmed}`);
-    },
-    newFromTemplate(templateId) {
-      const chosen = templates().find((t) => t.id === templateId) ?? templates()[0]!;
-      loadOrInitTemplate(chosen, true);
-      dialog = null;
-      publishAllToView();
-      logProtocol(`template -> ${chosen.id} (${chosen.defaultName})`);
-    },
-    openCompanion(assetId) {
-      const record = companionAssets.get(assetId);
-      if (!record) return;
-      const doc = createDoc();
-      if (record.docStateBase64) applyUpdate(doc, fromBase64(record.docStateBase64), REMOTE_ORIGIN);
-      activeAssetName = record.asset.name;
-      activeAssetType = record.asset.type;
-      activeStorageMode = record.storageMode;
-      activeContentType = record.contentType;
-      activeSchema = record.schema;
-      activeDoc = doc;
-      activeData = projectData(doc);
-      bindActiveDocObserver();
-      saveStateToStorage();
-      dialog = null;
-      publishAllToView();
-      logProtocol(`open companion -> ${record.asset.name}`);
-    },
-    async importFile(file) {
-      if (!activeChannel) return;
-      const bytes = new Uint8Array(await file.arrayBuffer());
-      activeChannel.emit({
-        v: 1,
-        type: "file.import",
-        body: { name: file.name, data: toBase64(bytes) },
-      });
-      logProtocol(`emit file.import (${file.name}, ${bytes.byteLength}B)`);
-    },
-    resetLayout,
-    restartView,
-    resetStorage() {
-      try {
-        const keys: string[] = [];
-        for (let i = 0; i < window.localStorage.length; i += 1) {
-          const key = window.localStorage.key(i);
-          if (key && key.startsWith(storagePrefix)) keys.push(key);
-        }
-        for (const key of keys) window.localStorage.removeItem(key);
-        window.localStorage.removeItem(editorLayoutStorageKey(manifest.id, manifest.layoutVersion));
-        window.localStorage.removeItem(INSPECTOR_STORAGE_KEY);
-      } catch {
-        // ignore
-      }
-      loadOrInitTemplate(templates()[0]!, true);
-      logProtocol("localStorage reset");
-      restartView();
-    },
-    openDialog,
-    closeDialog,
-    resolvePick,
-    invokeCommand,
-  };
-}
-
-declare global {
-  interface Window {
-    __MOLOO_DEV_HOST__?: DevHostBootstrap;
-  }
-}