@inneranimalmedia/agentsam-sdk 2.6.5 → 2.6.8

package/apps/client-cms-editor/frontend/src/editor/CmsEditor.tsx

@@ -0,0 +1,213 @@
+import type { CmsEditorAdapter } from '../../../shared/cms/src/adapter';
+import type { CmsEditorHost } from '../../../shared/cms/src/host';
+import type { CmsAgentHost } from '../lib/agent-host';
+import { CmsEditorProvider } from './CmsEditorProvider';
+import { useCmsEditorController } from './useCmsEditorController';
+import { PreviewCanvas } from './canvas/PreviewCanvas';
+import { useCmsEditor } from './CmsEditorProvider';
+import '../styles/studio.css';
+
+export type CmsEditorProps = {
+  adapter: CmsEditorAdapter;
+  host?: CmsEditorHost;
+  /** Optional agent host slots (render props). */
+  agentHost?: CmsAgentHost;
+  siteId: string;
+  initialPageId?: string | null;
+  initialRail?: 'pages' | 'sections' | 'blocks' | 'settings';
+  /** True when the attached adapter is temporary (e.g. in-memory preview). Pack content is not temporary. */
+  temporaryAdapter?: boolean;
+};
+
+function EditorShell() {
+  const editor = useCmsEditor();
+  const { site, page, section, ui, published, lastDraft } = editor;
+
+  if (ui.error && !site) {
+    return (
+      <main className="cms-shell cms-shell--error">
+        <h1>CMS failed to load</h1>
+        <p>{ui.error}</p>
+        <p>A broken adapter must surface the error — never a fake working site.</p>
+        <button type="button" onClick={() => void editor.reload()}>
+          Retry
+        </button>
+      </main>
+    );
+  }
+
+  if (!site || !page) {
+    return (
+      <main className="cms-shell cms-shell--loading">
+        <p>Loading CMS site…</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="cms-shell cms-shell--product" data-cms-authority="adapter">
+      {ui.temporaryAdapterNotice ? (
+        <div className="cms-ephemeral-banner" role="status">
+          {ui.temporaryAdapterNotice}
+        </div>
+      ) : null}
+      <header className="cms-topbar">
+        <div>
+          <strong>{site.name}</strong>
+          <span>{site.domain || site.id}</span>
+        </div>
+        <div className="cms-topbar-actions">
+          <span className={ui.dirty ? 'badge draft' : 'badge saved'}>
+            {ui.dirty ? 'Unsaved draft' : 'Draft synced'}
+          </span>
+          <button
+            type="button"
+            disabled={!ui.dirty || ui.saving}
+            onClick={() => void editor.saveDraft()}
+          >
+            {ui.saving ? 'Saving…' : 'Save Draft'}
+          </button>
+          <button
+            type="button"
+            disabled={ui.publishing}
+            onClick={() => void editor.publish()}
+          >
+            {ui.publishing ? 'Publishing…' : 'Publish'}
+          </button>
+          <button type="button" onClick={() => void editor.reload()}>
+            Reload
+          </button>
+          {editor.host?.navigate ? (
+            <button type="button" onClick={() => editor.navigateHost('/cms')}>
+              Host CMS
+            </button>
+          ) : null}
+        </div>
+      </header>
+
+      <div className="cms-workspace">
+        <aside className="cms-rail">
+          {(['pages', 'sections', 'blocks', 'settings'] as const).map((rail) => (
+            <button
+              key={rail}
+              type="button"
+              className={ui.rail === rail ? 'active' : ''}
+              onClick={() => editor.setRail(rail)}
+            >
+              {rail}
+            </button>
+          ))}
+        </aside>
+
+        <aside className="cms-sidebar">
+          {ui.rail === 'pages' ? (
+            <ul>
+              {site.pages.map((entry) => (
+                <li key={entry.id}>
+                  <button
+                    type="button"
+                    className={entry.id === page.id ? 'active' : ''}
+                    onClick={() => editor.selectPage(entry.id)}
+                  >
+                    {entry.title}
+                    <small>{entry.slug}</small>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+          {ui.rail === 'sections' || ui.rail === 'blocks' ? (
+            <ul>
+              {page.sections.map((entry) => (
+                <li key={entry.id}>
+                  <button
+                    type="button"
+                    className={entry.id === section?.id ? 'active' : ''}
+                    onClick={() => editor.selectSection(entry.id)}
+                  >
+                    {entry.name}
+                    <small>{entry.type}</small>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+          {ui.rail === 'settings' ? (
+            <div className="cms-settings">
+              <p>Persistence goes only through CmsEditorAdapter.</p>
+              <p>Last draft: {lastDraft?.id || '—'}</p>
+              <p>Published: {published?.publicationId || '—'}</p>
+            </div>
+          ) : null}
+        </aside>
+
+        <section className="cms-canvas-wrap">
+          <div className="cms-viewport-switch">
+            {(['phone', 'tablet', 'desktop'] as const).map((viewport) => (
+              <button
+                key={viewport}
+                type="button"
+                className={ui.viewport === viewport ? 'active' : ''}
+                onClick={() => editor.setViewport(viewport)}
+              >
+                {viewport}
+              </button>
+            ))}
+          </div>
+          <PreviewCanvas />
+        </section>
+
+        <aside className="cms-inspector">
+          {section ? (
+            <>
+              <h2>{section.name}</h2>
+              <p>{section.type}</p>
+              {Object.entries(section.fields || {}).map(([key, value]) => (
+                <label key={key}>
+                  <span>{key}</span>
+                  <input
+                    value={typeof value === 'string' ? value : JSON.stringify(value)}
+                    onChange={(event) => editor.updateSectionField(key, event.target.value)}
+                  />
+                </label>
+              ))}
+            </>
+          ) : (
+            <p>Select a section</p>
+          )}
+          {ui.error ? <p className="cms-error">{ui.error}</p> : null}
+        </aside>
+      </div>
+    </main>
+  );
+}
+
+/**
+ * Canonical CMS editor entry — shell composition only.
+ * Persistence: CmsEditorAdapter. Host navigation: CmsEditorHost.
+ */
+export default function CmsEditor({
+  adapter,
+  host,
+  siteId,
+  initialPageId = null,
+  initialRail = 'sections',
+  temporaryAdapter = false,
+}: CmsEditorProps) {
+  const editor = useCmsEditorController({
+    adapter,
+    host,
+    siteId,
+    initialPageId,
+    initialRail,
+    temporaryAdapter,
+  });
+
+  return (
+    <CmsEditorProvider value={editor}>
+      <EditorShell />
+    </CmsEditorProvider>
+  );
+}
+
+export type { CmsEditorController } from './useCmsEditorController';

package/apps/client-cms-editor/frontend/src/editor/CmsEditorProvider.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { CmsEditorController } from './useCmsEditorController';
+
+const CmsEditorContext = createContext<CmsEditorController | null>(null);
+
+export function CmsEditorProvider({
+  value,
+  children,
+}: {
+  value: CmsEditorController;
+  children: ReactNode;
+}) {
+  return <CmsEditorContext.Provider value={value}>{children}</CmsEditorContext.Provider>;
+}
+
+export function useCmsEditor() {
+  const ctx = useContext(CmsEditorContext);
+  if (!ctx) throw new Error('useCmsEditor requires CmsEditorProvider');
+  return ctx;
+}

package/apps/client-cms-editor/frontend/src/editor/canvas/PreviewCanvas.tsx

@@ -0,0 +1,53 @@
+/**
+ * Structural draft canvas — NOT a second pretend website renderer.
+ * Shows the same draft model the adapter owns. Schema-driven CmsRenderer replaces this later.
+ */
+import { useCmsEditor } from '../CmsEditorProvider';
+
+export function PreviewCanvas() {
+  const { page, section, selectSection, ui } = useCmsEditor();
+  if (!page) {
+    return <div className="cms-canvas-empty">Open a page to preview the draft model.</div>;
+  }
+
+  return (
+    <div className={`cms-canvas cms-canvas--${ui.viewport}`} data-cms-preview="draft-model">
+      <header className="cms-canvas-meta">
+        <strong>{page.title}</strong>
+        <span>{page.slug}</span>
+        <em>Draft model preview · schema renderer pending</em>
+      </header>
+      <ol className="cms-canvas-sections">
+        {page.sections.map((entry) => (
+          <li key={entry.id}>
+            <button
+              type="button"
+              className={entry.id === section?.id ? 'is-selected' : ''}
+              onClick={() => selectSection(entry.id)}
+            >
+              <span>{entry.name}</span>
+              <small>{entry.type}</small>
+              {!entry.visible ? <em>hidden</em> : null}
+            </button>
+            {entry.id === section?.id ? (
+              <dl>
+                {Object.entries(entry.fields || {}).map(([key, value]) => (
+                  <div key={key}>
+                    <dt>{key}</dt>
+                    <dd>{typeof value === 'string' ? value : JSON.stringify(value)}</dd>
+                  </div>
+                ))}
+                {(entry.blocks || []).length ? (
+                  <div>
+                    <dt>blocks</dt>
+                    <dd>{entry.blocks.map((b) => b.type).join(', ')}</dd>
+                  </div>
+                ) : null}
+              </dl>
+            ) : null}
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

package/apps/client-cms-editor/frontend/src/{CmsEditor.tsx → editor/legacy/CmsEditorPrototype.tsx}

@@ -1,10 +1,9 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { AgentPrincipal, AgentWorkbenchAdapter } from "@inneranimalmedia/agentsam-contracts";
-import { MiniAgentSam, type AnnotationSelection } from "@inneranimalmedia/agentsam-workbench/agent";
-import "@inneranimalmedia/agentsam-workbench/agent/mini-agentsam.css";
+import { createCmsAgentContextProvider } from "@inneranimalmedia/agentsam-cms-shared";
 import { AgentSamDrawer } from "./AgentSamDrawer";
+import type { CmsAgentHost, CmsAnnotationSelection } from "./lib/agent-host";
 import { escapeCmsText, safeCmsAssetUrl, safeCmsCssValue, sanitizeCmsRichText } from "./lib/content-safety";
 import {
   createCmsEditorBlock,
@@ -124,11 +123,8 @@ function ToastStack({ toasts, dismiss }: { toasts: Toast[]; dismiss: (id: number
   return <div className="toast-stack">{toasts.slice(-3).map(t => <div className={`toast ${t.type}`} key={t.id}><span className="toast-icon"><Icon name={t.type === "success" ? "check" : t.type === "warning" ? "warning" : t.type === "error" ? "close" : "info"}/></span><span>{t.message}</span>{t.action && <button>{t.action}</button>}<button className="toast-x" onClick={() => dismiss(t.id)}><Icon name="close" size={12}/></button>{t.type !== "error" && <i/>}</div>)}</div>;
 }
 
-export type CmsEditorAgentConfig = {
-  adapter: AgentWorkbenchAdapter;
-  principal: AgentPrincipal;
-  conversationId?: string;
-};
+/** @deprecated Prefer `agentHost` — kept as alias for migration. */
+export type CmsEditorAgentConfig = CmsAgentHost;
 
 export type CmsEditorProps = {
   projectSlug?: string;
@@ -136,7 +132,10 @@ export type CmsEditorProps = {
   initialPanel?: "pages" | "sections" | "templates" | "imports" | "theme";
   siteCatalog?: Array<{ slug: string; name?: string; domain?: string | null }>;
   onSiteChange?: (slug: string) => void;
-  agent?: CmsEditorAgentConfig;
+  /** Optional AgentSam / workbench host. Core editor boots with none attached. */
+  agentHost?: CmsAgentHost;
+  /** @deprecated Use agentHost */
+  agent?: CmsAgentHost;
   basePath?: string;
   onNavigate?: (path: string) => void;
 };
@@ -159,10 +158,12 @@ export default function CmsEditor({
   initialPanel = "sections",
   siteCatalog = [],
   onSiteChange,
+  agentHost,
   agent,
   basePath = "/cms",
   onNavigate,
 }: CmsEditorProps) {
+  const host = agentHost || agent;
   const [sites, setSites] = useState<Site[]>(initialSites);
   const [siteId, setSiteId] = useStored("cms-active-site", projectSlug);
   const site = sites.find((s) => s.id === siteId) || sites.find((s) => s.pages?.length) || sites[0] || null;
@@ -419,14 +420,27 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
     }
   }, [page, chooseBlock]);
 
-  const onAnnotateSubmit = useCallback(async (prompt: string, annotation: AnnotationSelection) => {
-    selectAnnotatedResource(annotation.id);
+  const onAnnotateSubmit = useCallback(async (prompt: string, annotation: CmsAnnotationSelection) => {
+    selectAnnotatedResource(String(annotation.id || ""));
     setAgentSamOpen(true);
     setInspectorSheetOpen(false);
     setAnnotatePrompt(prompt);
-    toast(`Annotated “${annotation.label || annotation.tag}”`, "info");
+    toast(`Annotated “${annotation.label || "selection"}”`, "info");
     window.dispatchEvent(new CustomEvent("agentsam:cms-annotate", { detail: { prompt, annotation } }));
   }, [selectAnnotatedResource, setAgentSamOpen, toast]);
+
+  const agentContextProvider = useMemo(() => createCmsAgentContextProvider(() => ({
+    principal: host?.principal || {
+      accountId: "local",
+      authUserId: "local",
+      displayName: "Local",
+    },
+    projectId: site?.id || projectSlug || "site",
+    route: page?.slug,
+    pageId: page?.id || null,
+    sectionId: selected?.id || null,
+    blockId: selectedBlock?.id || null,
+  })), [host?.principal, site?.id, projectSlug, page?.slug, page?.id, selected?.id, selectedBlock?.id]);
   const choosePage = (id: string) => { if (dirty && !window.confirm("You have unsaved changes. Discard and continue?")) return; const p = site.pages.find(x => x.id === id); if (!p) return; setPageId(id); setSelectedId(p.sections[0]?.id || ""); setSelectedBlockId(""); setDirty(false); setTab("content"); toast(`Opened ${p.title}`, "info"); };
   const chooseSite = (id: string) => { const s = sites.find(x => x.id === id); if (!s) return; setSiteSwitcher(false); if (onSiteChange) { onSiteChange(id); toast(`Opening ${s.name}`, "info"); return; } setSiteId(id); if (s.pages[0]) { setPageId(s.pages[0].id); setSelectedId(s.pages[0].sections[0]?.id || ""); setSelectedBlockId(""); } toast(`Switched to ${s.name}`, "info"); };
 
@@ -948,10 +962,8 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
       <AgentSamDrawer
         open={agentSamOpen}
         onClose={() => setAgentSamOpen(false)}
-        adapter={agent?.adapter}
-        principal={agent?.principal}
         projectId={site.id || projectSlug}
-        conversationId={agent?.conversationId || `cms:${site.id || projectSlug}`}
+        conversationId={host?.conversationId || `cms:${site.id || projectSlug}`}
         route={page.slug}
         pageId={page.id}
         sectionId={selected?.id || null}
@@ -959,17 +971,34 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
         selectionLabel={selectedBlock ? String(selectedBlock.data?.text || selectedBlock.data?.title || selectedBlock.type) : selected?.name || null}
         pendingPrompt={annotatePrompt}
         onPendingPromptConsumed={() => setAnnotatePrompt(null)}
-      />
+      >
+        {host?.renderDrawer?.({
+          open: agentSamOpen,
+          onClose: () => setAgentSamOpen(false),
+          projectId: site.id || projectSlug,
+          conversationId: host?.conversationId || `cms:${site.id || projectSlug}`,
+          contextProvider: agentContextProvider,
+          route: page.slug,
+          pageId: page.id,
+          sectionId: selected?.id || null,
+          blockId: selectedBlock?.id || null,
+          selectionLabel: selectedBlock ? String(selectedBlock.data?.text || selectedBlock.data?.title || selectedBlock.type) : selected?.name || null,
+          pendingPrompt: annotatePrompt,
+          onPendingPromptConsumed: () => setAnnotatePrompt(null),
+        })}
+      </AgentSamDrawer>
     </div>
 
-    <MiniAgentSam
-      selecting={annotateSelecting}
-      onSelectingChange={setAnnotateSelecting}
-      scope={() => canvasScopeRef.current}
-      onSubmit={onAnnotateSubmit}
-    />
+    {host?.renderMini?.({
+      projectId: site.id || projectSlug,
+      conversationId: host?.conversationId || `cms:${site.id || projectSlug}`,
+      contextProvider: agentContextProvider,
+      annotateSelecting,
+      onAnnotateToggle: () => setAnnotateSelecting((v) => !v),
+      onAnnotateSubmit,
+    })}
 
-    <footer className="statusbar"><div><i/> {annotateSelecting ? "Annotate mode" : agentSamOpen ? "AgentSam open" : "Connected"}</div><span>{dirty ? "Unsaved changes" : saving ? "Saving…" : "Saved"}</span><span>{page.slug}</span><span>{page.sections.length} sections · {page.sections.reduce((total, section) => total + (section.blocks?.length || 0), 0)} blocks</span><button onClick={() => setModal("shortcuts")}>Shortcuts <kbd>⌘/</kbd></button></footer>
+    <footer className="statusbar"><div><i/> {annotateSelecting ? "Annotate mode" : agentSamOpen ? "AgentSam open" : host ? "Host ready" : "Local"}</div><span>{dirty ? "Unsaved changes" : saving ? "Saving…" : "Saved"}</span><span>{page.slug}</span><span>{page.sections.length} sections · {page.sections.reduce((total, section) => total + (section.blocks?.length || 0), 0)} blocks</span><button onClick={() => setModal("shortcuts")}>Shortcuts <kbd>⌘/</kbd></button></footer>
     <nav className="mobile-tabs">{railItems.slice(0, 5).map((i) => <button key={i.id} className={rail === i.id ? "active" : ""} onClick={() => setRail(i.id)}><Icon name={i.icon}/><span>{i.label}</span></button>)}</nav>
     <ToastStack toasts={toasts} dismiss={dismissToast}/>
 

package/apps/client-cms-editor/frontend/src/editor/useCmsEditorController.ts

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { CmsEditorAdapter } from '../../../shared/cms/src/adapter';
+import type {
+  CmsEditorBlock,
+  CmsEditorPage,
+  CmsEditorSection,
+  CmsEditorSite,
+} from '../../../shared/cms/src/editor-types';
+import type { CmsEditorHost } from '../../../shared/cms/src/host';
+import type { CmsPublicationSnapshot, CmsRevision } from '../../../shared/cms/src/adapter';
+
+export type CmsEditorUiState = {
+  rail: 'pages' | 'sections' | 'blocks' | 'media' | 'settings';
+  viewport: 'phone' | 'tablet' | 'desktop';
+  dirty: boolean;
+  saving: boolean;
+  publishing: boolean;
+  error: string | null;
+  temporaryAdapterNotice: string | null;
+};
+
+export type CmsEditorController = {
+  adapter: CmsEditorAdapter;
+  host?: CmsEditorHost;
+  site: CmsEditorSite | null;
+  page: CmsEditorPage | null;
+  section: CmsEditorSection | null;
+  block: CmsEditorBlock | null;
+  ui: CmsEditorUiState;
+  published: CmsPublicationSnapshot | null;
+  lastDraft: CmsRevision | null;
+  selectPage: (pageId: string) => void;
+  selectSection: (sectionId: string) => void;
+  selectBlock: (blockId: string) => void;
+  setRail: (rail: CmsEditorUiState['rail']) => void;
+  setViewport: (viewport: CmsEditorUiState['viewport']) => void;
+  updateSectionField: (key: string, value: unknown) => void;
+  saveDraft: () => Promise<void>;
+  publish: () => Promise<void>;
+  reload: () => Promise<void>;
+  navigateHost: (path: string) => void;
+};
+
+export type UseCmsEditorControllerArgs = {
+  adapter: CmsEditorAdapter;
+  host?: CmsEditorHost;
+  siteId: string;
+  initialPageId?: string | null;
+  initialRail?: CmsEditorUiState['rail'];
+  temporaryAdapter?: boolean;
+};
+
+export function useCmsEditorController({
+  adapter,
+  host,
+  siteId,
+  initialPageId = null,
+  initialRail = 'sections',
+  temporaryAdapter = false,
+}: UseCmsEditorControllerArgs): CmsEditorController {
+  const [site, setSite] = useState<CmsEditorSite | null>(null);
+  const [pageId, setPageId] = useState<string | null>(initialPageId);
+  const [sectionId, setSectionId] = useState<string | null>(null);
+  const [blockId, setBlockId] = useState<string | null>(null);
+  const [published, setPublished] = useState<CmsPublicationSnapshot | null>(null);
+  const [lastDraft, setLastDraft] = useState<CmsRevision | null>(null);
+  const [ui, setUi] = useState<CmsEditorUiState>({
+    rail: initialRail,
+    viewport: 'desktop',
+    dirty: false,
+    saving: false,
+    publishing: false,
+    error: null,
+    temporaryAdapterNotice: temporaryAdapter
+      ? 'Temporary adapter · changes are not durable until a SQLite/D1/HTTP adapter is attached. Starter pack content is real product content.'
+      : null,
+  });
+
+  const reload = useCallback(async () => {
+    setUi((u) => ({ ...u, error: null }));
+    const loaded = await adapter.loadSite(siteId);
+    setSite(loaded);
+    const page =
+      loaded.pages.find((p) => p.id === initialPageId) ||
+      loaded.pages.find((p) => p.id === pageId) ||
+      loaded.pages[0] ||
+      null;
+    setPageId(page?.id || null);
+    setSectionId(page?.sections[0]?.id || null);
+    setBlockId(null);
+    setUi((u) => ({ ...u, dirty: false }));
+    if (page?.id) {
+      const pub = await adapter.getPublishedRevision(page.id);
+      setPublished(pub);
+    }
+  }, [adapter, siteId, initialPageId, pageId]);
+
+  useEffect(() => {
+    reload().catch((error) => {
+      setUi((u) => ({ ...u, error: error?.message || String(error) }));
+      setSite(null);
+    });
+    // intentionally load once per site/adapter
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adapter, siteId]);
+
+  const page = useMemo(
+    () => site?.pages.find((p) => p.id === pageId) || site?.pages[0] || null,
+    [site, pageId],
+  );
+  const section = useMemo(
+    () => page?.sections.find((s) => s.id === sectionId) || page?.sections[0] || null,
+    [page, sectionId],
+  );
+  const block = useMemo(
+    () => section?.blocks.find((b) => b.id === blockId) || null,
+    [section, blockId],
+  );
+
+  const selectPage = useCallback((id: string) => {
+    setPageId(id);
+    setSectionId(null);
+    setBlockId(null);
+    setUi((u) => ({ ...u, dirty: false, rail: 'sections' }));
+  }, []);
+
+  const selectSection = useCallback((id: string) => {
+    setSectionId(id);
+    setBlockId(null);
+    setUi((u) => ({ ...u, rail: 'sections' }));
+  }, []);
+
+  const selectBlock = useCallback((id: string) => {
+    setBlockId(id);
+    setUi((u) => ({ ...u, rail: 'blocks' }));
+  }, []);
+
+  const updateSectionField = useCallback(
+    (key: string, value: unknown) => {
+      if (!site || !page || !section) return;
+      setSite((current) => {
+        if (!current) return current;
+        return {
+          ...current,
+          pages: current.pages.map((p) =>
+            p.id !== page.id
+              ? p
+              : {
+                  ...p,
+                  sections: p.sections.map((s) =>
+                    s.id !== section.id ? s : { ...s, fields: { ...s.fields, [key]: value } },
+                  ),
+                },
+          ),
+        };
+      });
+      setUi((u) => ({ ...u, dirty: true }));
+    },
+    [site, page, section],
+  );
+
+  const saveDraft = useCallback(async () => {
+    if (!page) return;
+    setUi((u) => ({ ...u, saving: true, error: null }));
+    try {
+      const revision = await adapter.saveDraft(page.id, { sections: page.sections });
+      setLastDraft(revision);
+      setUi((u) => ({ ...u, dirty: false, saving: false }));
+    } catch (error: any) {
+      setUi((u) => ({ ...u, saving: false, error: error?.message || String(error) }));
+      throw error;
+    }
+  }, [adapter, page]);
+
+  const publish = useCallback(async () => {
+    if (!page) return;
+    setUi((u) => ({ ...u, publishing: true, error: null }));
+    try {
+      if (ui.dirty) await saveDraft();
+      const snapshot = await adapter.publish(page.id);
+      setPublished(snapshot);
+      await reload();
+      setUi((u) => ({ ...u, publishing: false, dirty: false }));
+    } catch (error: any) {
+      setUi((u) => ({ ...u, publishing: false, error: error?.message || String(error) }));
+      throw error;
+    }
+  }, [adapter, page, ui.dirty, saveDraft, reload]);
+
+  const navigateHost = useCallback(
+    (path: string) => {
+      if (host?.navigate) host.navigate(path);
+    },
+    [host],
+  );
+
+  return {
+    adapter,
+    host,
+    site,
+    page,
+    section,
+    block,
+    ui,
+    published,
+    lastDraft,
+    selectPage,
+    selectSection,
+    selectBlock,
+    setRail: (rail) => setUi((u) => ({ ...u, rail })),
+    setViewport: (viewport) => setUi((u) => ({ ...u, viewport })),
+    updateSectionField,
+    saveDraft,
+    publish,
+    reload,
+    navigateHost,
+  };
+}

package/apps/client-cms-editor/frontend/src/index.ts

@@ -1,8 +1,22 @@
-export { default as CmsEditor } from './CmsEditor';
-export { default } from './CmsEditor';
-export type { CmsEditorProps } from './CmsEditor';
-export { mountClientCmsEditor, type ClientCmsEditorBoot } from './mount.tsx';
+export { default as CmsEditor } from './editor/CmsEditor';
+export { default } from './editor/CmsEditor';
+export type { CmsEditorProps } from './editor/CmsEditor';
+export { mountClientCmsEditor, type ClientCmsEditorBoot } from './mount';
 export { CmsAgentSurface, type CmsAgentSurfaceProps } from './CmsAgentSurface';
 export { AgentSamDrawer, type AgentSamDrawerProps } from './AgentSamDrawer';
+export type { CmsAgentHost, CmsAnnotationSelection, CmsHostPrincipal } from './lib/agent-host';
+export { MemoryCmsAdapter } from './adapters/memory';
+export { HttpCmsAdapter, createHttpCmsAdapter } from './adapters/http';
+export { previewHeuristicStarter, createHeuristicThemeMemoryAdapter } from './adapters/heuristic';
+export { useCmsEditorController } from './editor/useCmsEditorController';
+export { useCmsEditor } from './editor/CmsEditorProvider';
+export {
+  heuristicStarterPack,
+  listBuiltinStarterPacks,
+  HEURISTIC_STARTER_PACK_ID,
+} from '../../starter-packs/heuristic';
+export { blankStarterPack, BLANK_STARTER_PACK_ID } from '../../starter-packs/blank';
+export { iasfStarterPack, IASF_STARTER_PACK_ID, listIasfStarterPacks } from '../../starter-packs/iasf';
+export { installStarterPack } from '../../shared/cms/src/starter-pack';
+export type { CmsStarterPack } from '../../shared/cms/src/starter-pack';
 export * from './surfaces/index';
-