@inneranimalmedia/agentsam-sdk 2.6.5 → 2.6.8

package/apps/client-cms-editor/frontend/src/lib/agent-host.ts

@@ -0,0 +1,24 @@
+/**
+ * Optional AgentSam / workbench host slot (React render props).
+ * Defined in the frontend package so shared/cms stays React-free.
+ */
+import type { ReactNode } from 'react';
+import type {
+  CmsAgentDrawerSlotProps,
+  CmsAgentMiniSlotProps,
+  CmsHostPrincipal,
+} from '../../../shared/cms/src/host';
+
+export type CmsAgentHost = {
+  principal?: CmsHostPrincipal | null;
+  conversationId?: string;
+  renderDrawer?: (props: CmsAgentDrawerSlotProps) => ReactNode;
+  renderMini?: (props: CmsAgentMiniSlotProps) => ReactNode;
+};
+
+export type {
+  CmsAgentDrawerSlotProps,
+  CmsAgentMiniSlotProps,
+  CmsAnnotationSelection,
+  CmsHostPrincipal,
+} from '../../../shared/cms/src/host';

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

@@ -1,17 +1,91 @@
 import { createRoot } from 'react-dom/client';
-import { StrictMode } from 'react';
-import CmsEditor from './CmsEditor';
+import { StrictMode, useEffect, useState } from 'react';
+import CmsEditor from './editor/CmsEditor';
+import { previewHeuristicStarter } from './adapters/heuristic';
+import type { CmsEditorAdapter } from '../../shared/cms/src/adapter';
 import './styles/studio.css';
 
 const root = document.getElementById('root');
 if (!root) throw new Error('cms_studio_root_missing');
 
 const params = new URLSearchParams(window.location.search);
-const projectSlug = (params.get('site') || params.get('project') || 'demo').trim() || 'demo';
+const starter = (params.get('starter') || params.get('example') || '').trim();
+const siteParam = (params.get('site') || params.get('project') || '').trim();
 const pageId = (params.get('page') || '').trim() || null;
 
-createRoot(root).render(
-  <StrictMode>
-    <CmsEditor projectSlug={projectSlug} initialPageId={pageId} />
-  </StrictMode>,
-);
+function HeuristicBoot() {
+  const [state, setState] = useState<{
+    adapter: CmsEditorAdapter;
+    siteId: string;
+    pageId: string | null;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    previewHeuristicStarter(siteParam || undefined)
+      .then((seeded) =>
+        setState({
+          adapter: seeded.adapter,
+          siteId: seeded.siteId,
+          pageId: pageId || seeded.pageId,
+        }),
+      )
+      .catch((err) => setError(err?.message || String(err)));
+  }, []);
+
+  if (error) {
+    return (
+      <main className="cms-shell cms-shell--error">
+        <h1>Starter install failed</h1>
+        <p>{error}</p>
+      </main>
+    );
+  }
+  if (!state) {
+    return (
+      <main className="cms-shell cms-shell--loading">
+        <p>Installing Heuristic starter into temporary adapter…</p>
+      </main>
+    );
+  }
+
+  return (
+    <CmsEditor
+      adapter={state.adapter}
+      siteId={state.siteId}
+      initialPageId={state.pageId}
+      temporaryAdapter
+    />
+  );
+}
+
+function boot() {
+  if (starter === 'heuristic' || starter === 'heuristic-theme') {
+    return <HeuristicBoot />;
+  }
+
+  if (!siteParam) {
+    return (
+      <main className="cms-shell cms-shell--error">
+        <h1>CMS site required</h1>
+        <p>
+          Pass <code>?site=your-site</code> with a host-provided CmsEditorAdapter, or start the
+          stock Heuristic pack with <code>?starter=heuristic</code> (temporary in-memory adapter
+          until a durable adapter is attached).
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="cms-shell cms-shell--error">
+      <h1>CmsEditorAdapter required</h1>
+      <p>
+        Site <code>{siteParam}</code> needs a host-provided CmsEditorAdapter. This package does not
+        invent persistence from hostname or empty site ids.
+      </p>
+    </main>
+  );
+}
+
+createRoot(root).render(<StrictMode>{boot()}</StrictMode>);

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

@@ -1,51 +1,113 @@
-import { StrictMode } from 'react';
+import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import CmsEditor from './CmsEditor';
-import studioCss from './styles/studio.css?raw';
+import CmsEditor from './editor/CmsEditor';
+import { previewHeuristicStarter } from './adapters/heuristic';
+import type { CmsEditorAdapter } from '../../shared/cms/src/adapter';
 
 export type ClientCmsEditorBoot = {
   projectSlug: string;
   pageId?: string | null;
   panel?: 'pages' | 'sections' | 'templates' | 'imports' | 'theme';
+  /**
+   * Explicit stock starter. Never implied by localhost alone.
+   * Installs Heuristic into a temporary in-memory adapter for preview.
+   * Durable hosts should call installStarterPack(adapter, heuristicStarterPack) themselves.
+   */
+  starter?: 'heuristic';
+  /** @deprecated Use starter: 'heuristic' */
+  example?: 'heuristic-theme';
 };
 
-function injectStudioCss() {
-  if (document.querySelector('style[data-client-cms-editor]')) return;
-  const style = document.createElement('style');
-  style.dataset.clientCmsEditor = 'true';
-  style.textContent = String(studioCss || '');
-  document.head.appendChild(style);
+function HeuristicMount({
+  projectSlug,
+  pageId,
+  onSiteChange,
+}: {
+  projectSlug: string;
+  pageId?: string | null;
+  onSiteChange?: (slug: string) => void;
+}) {
+  const [state, setState] = useState<{
+    adapter: CmsEditorAdapter;
+    siteId: string;
+    pageId: string | null;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    previewHeuristicStarter(projectSlug || undefined)
+      .then((seeded) => {
+        setState({
+          adapter: seeded.adapter,
+          siteId: seeded.siteId,
+          pageId: pageId || seeded.pageId,
+        });
+        onSiteChange?.(seeded.siteId);
+      })
+      .catch((err) => setError(err?.message || String(err)));
+  }, [projectSlug, pageId, onSiteChange]);
+
+  if (error) {
+    return (
+      <main className="cms-shell cms-shell--error">
+        <h1>Starter install failed</h1>
+        <p>{error}</p>
+      </main>
+    );
+  }
+  if (!state) {
+    return (
+      <main className="cms-shell cms-shell--loading">
+        <p>Installing Heuristic starter…</p>
+      </main>
+    );
+  }
+  return (
+    <CmsEditor
+      adapter={state.adapter}
+      siteId={state.siteId}
+      initialPageId={state.pageId}
+      temporaryAdapter
+    />
+  );
 }
 
+/**
+ * Imperative mount helper for hosts.
+ * Import styles separately:
+ *   import '@inneranimalmedia/client-cms-editor/styles/studio.css'
+ *
+ * Hosts should prefer passing their own CmsEditorAdapter + installStarterPack.
+ */
 export function mountClientCmsEditor(
   mountEl: HTMLElement,
   boot: ClientCmsEditorBoot,
   onSiteChange?: (slug: string) => void,
 ) {
-  injectStudioCss();
-  const panelRaw = boot.panel || 'pages';
-  const panel =
-    panelRaw === 'sections' ||
-    panelRaw === 'templates' ||
-    panelRaw === 'imports' ||
-    panelRaw === 'theme'
-      ? panelRaw
-      : 'pages';
+  if (boot.starter === 'heuristic' || boot.example === 'heuristic-theme') {
+    createRoot(mountEl).render(
+      <StrictMode>
+        <HeuristicMount
+          projectSlug={boot.projectSlug}
+          pageId={boot.pageId}
+          onSiteChange={onSiteChange}
+        />
+      </StrictMode>,
+    );
+    return;
+  }
 
   createRoot(mountEl).render(
     <StrictMode>
-      <CmsEditor
-        projectSlug={boot.projectSlug}
-        initialPageId={boot.pageId || null}
-        initialPanel={panel}
-        siteCatalog={[]}
-        onSiteChange={(slug) => {
-          const url = new URL(window.location.href);
-          url.searchParams.set('site', slug);
-          window.history.replaceState({}, '', url.toString());
-          onSiteChange?.(slug);
-        }}
-      />
+      <main className="cms-shell cms-shell--error">
+        <h1>CmsEditorAdapter required</h1>
+        <p>
+          mountClientCmsEditor no longer invents persistence. Pass a host adapter via{' '}
+          <code>&lt;CmsEditor adapter=&#123;...&#125; /&gt;</code> and optionally{' '}
+          <code>installStarterPack(adapter, heuristicStarterPack)</code>, or set{' '}
+          <code>starter: &apos;heuristic&apos;</code> for an explicit temporary preview.
+        </p>
+      </main>
     </StrictMode>,
   );
 }

package/apps/client-cms-editor/frontend/src/styles/agentsam-drawer.css

@@ -1,4 +1,4 @@
-/* FnF AgentSam Side Assistant — docked drawer (from fuelnfreetime admin) */
+/* Agent host side drawer */
 
 .agentsam-dock {
   flex: none;

package/apps/client-cms-editor/frontend/src/styles/cmsShell.css

@@ -1,13 +1,13 @@
 /* AgentSam CMS shell — mobile-first, warm command center + editor chrome */
 .iam-cms-shell {
-  --cms-bg: #f9f7f2;
-  --cms-panel: #ffffff;
-  --cms-border: #e8e4dc;
-  --cms-text: #1a1a1a;
-  --cms-muted: #6b6560;
-  --cms-teal: #0d9488;
-  --cms-teal-soft: rgba(13, 148, 136, 0.12);
-  --cms-shadow: 0 1px 0 rgba(26, 26, 26, 0.04), 0 12px 40px rgba(26, 26, 26, 0.06);
+  --cms-bg: var(--color-background, #f9f7f2);
+  --cms-panel: var(--color-card, #ffffff);
+  --cms-border: var(--color-border, #e8e4dc);
+  --cms-text: var(--color-foreground, #1a1a1a);
+  --cms-muted: var(--color-muted-foreground, #6b6560);
+  --cms-teal: var(--color-accent, #0d9488);
+  --cms-teal-soft: color-mix(in srgb, var(--cms-teal) 14%, transparent);
+  --cms-shadow: 0 1px 0 color-mix(in srgb, var(--cms-text) 5%, transparent), 0 12px 40px color-mix(in srgb, var(--cms-text) 7%, transparent);
   display: flex;
   flex-direction: column;
   flex: 1;

package/apps/client-cms-editor/frontend/src/styles/studio.css

@@ -1,5 +1,5 @@
-:root{--shell-bg:#F9F7F2;--topbar-bg:#ffffff;--topbar-border:rgba(43,39,31,.1);--rail-bg:#F3F0E8;--rail-active:rgba(30,106,111,.15);--sidebar-bg:#ffffff;--sidebar-border:rgba(43,39,31,.1);--canvas-bg:#F3F0E8;--canvas-dot-color:rgba(43,39,31,.05);--panel-bg:#ffffff;--panel-border:rgba(43,39,31,.1);--accent:#1e6a6f;--accent-hover:#22797f;--accent-muted:rgba(30,106,111,.12);--accent-border:rgba(30,106,111,.3);--success:#22c55e;--success-muted:rgba(34,197,94,.12);--warning:#f59e0b;--warning-muted:rgba(245,158,11,.12);--danger:#ef4444;--danger-muted:rgba(239,68,68,.12);--info:#3b82f6;--info-muted:rgba(59,130,246,.12);--text-1:#1a1a1a;--text-2:#4b4b57;--text-3:#8a8a95;--text-4:#c7c3b5;--border-1:rgba(43,39,31,.18);--border-2:rgba(43,39,31,.1);--border-3:rgba(43,39,31,.06);--surface-1:#F3F0E8;--surface-2:#EFEBDD;--surface-3:#E8E2D2;--surface-4:#DCD5C2;--r-xs:3px;--r-sm:5px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px;--font-ui:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--ease-out:cubic-bezier(.16,1,.3,1);--dur-fast:120ms;--dur-normal:200ms;--dur-slow:350ms}
-*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--shell-bg);color:var(--text-1);font-family:var(--font-ui);font-size:13px}button,input,textarea,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button:disabled{opacity:.34;cursor:not-allowed!important}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:rgba(43,39,31,.18);border-radius:20px}::-webkit-scrollbar-track{background:transparent}
+:root{--shell-bg:#F9F7F2;--topbar-bg:#ffffff;--topbar-border:rgba(43,39,31,.1);--rail-bg:#F3F0E8;--rail-active:rgba(30,106,111,.15);--sidebar-bg:#ffffff;--sidebar-border:rgba(43,39,31,.1);--canvas-bg:#F3F0E8;--canvas-dot-color:rgba(43,39,31,.05);--panel-bg:#ffffff;--panel-border:rgba(43,39,31,.1);--accent:#1e6a6f;--accent-hover:#22797f;--accent-muted:rgba(30,106,111,.12);--accent-border:rgba(30,106,111,.3);--success:#22c55e;--success-muted:rgba(34,197,94,.12);--warning:#f59e0b;--warning-muted:rgba(245,158,11,.12);--danger:#ef4444;--danger-muted:rgba(239,68,68,.12);--info:#3b82f6;--info-muted:rgba(59,130,246,.12);--text-1:#1a1a1a;--text-2:#4b4b57;--text-3:#8a8a95;--text-4:#c7c3b5;--border-1:rgba(43,39,31,.18);--border-2:rgba(43,39,31,.1);--border-3:rgba(43,39,31,.06);--surface-1:#F3F0E8;--surface-2:#EFEBDD;--surface-3:#E8E2D2;--surface-4:#DCD5C2;--r-xs:3px;--r-sm:5px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px;--font-ui:var(--font-sans,"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif);--font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--ease-out:cubic-bezier(.16,1,.3,1);--dur-fast:120ms;--dur-normal:200ms;--dur-slow:350ms}
+/* Hosted AgentSam: never style bare html/body — that nukes Instrument host tokens. Scope under .cms-shell. */*{box-sizing:border-box}.cms-shell{font-family:var(--font-ui);font-size:13px;color:var(--text-1)}.cms-shell button,.cms-shell input,.cms-shell textarea,.cms-shell select{font:inherit}.cms-shell button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button:disabled{opacity:.34;cursor:not-allowed!important}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:rgba(43,39,31,.18);border-radius:20px}::-webkit-scrollbar-track{background:transparent}
 .cms-shell{height:100vh;display:grid;grid-template-rows:48px minmax(0,1fr) 24px;background:var(--shell-bg);overflow:hidden}.topbar{grid-row:1;display:grid;grid-template-columns:300px minmax(110px,1fr) auto minmax(380px,1fr);align-items:center;height:48px;border-bottom:1px solid var(--topbar-border);background:var(--topbar-bg);padding:0 8px 0 10px;position:relative;z-index:30}.site-trigger-wrap,.publish-wrap{position:relative}.topbar-left{display:flex;align-items:center;gap:6px;min-width:0}.hub-exit{flex:none}.site-trigger{border:0;background:none;display:flex;align-items:center;gap:9px;min-width:0;padding:4px 6px;border-radius:7px;cursor:pointer}.site-trigger:hover{background:var(--surface-2)}.site-trigger>span:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;min-width:0}.site-trigger b{font-size:12px;line-height:15px;white-space:nowrap}.site-trigger small{font-size:10px;color:var(--text-3);white-space:nowrap}.site-avatar{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:10px;color:white;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.breadcrumb{display:flex;align-items:center;gap:6px;color:var(--text-3);font-size:11px;min-width:0;overflow:hidden}.breadcrumb span,.breadcrumb b{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.breadcrumb b{color:var(--text-1);font-weight:500}.viewport-switcher{height:30px;display:flex;align-items:center;padding:3px;border:1px solid var(--border-2);border-radius:7px;background:#ffffff}.viewport-switcher button{width:33px;height:23px;border:0;border-radius:4px;background:transparent;color:var(--text-3);display:grid;place-items:center;cursor:pointer}.viewport-switcher button:hover{color:var(--text-1)}.viewport-switcher button.active{background:var(--surface-3);color:var(--text-1);box-shadow:0 1px 3px rgba(43,39,31,.35)}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.collab{display:flex;align-items:center;margin-right:7px}.collab>span{width:24px;height:24px;border-radius:50%;background:#E8E2D2;border:2px solid var(--topbar-bg);display:grid;place-items:center;font-size:8px;font-weight:700;margin-left:-5px}.collab>span:first-child{background:#1e6a6f}.collab small{color:var(--text-3);font-size:10px;margin-left:6px}.user-avatar{width:28px;height:28px;border:1px solid #D8D2C0;border-radius:50%;background:linear-gradient(135deg,#1e6a6f,#123f42);font-size:9px;font-weight:700;cursor:pointer;margin-left:3px}.button{min-height:30px;border:1px solid transparent;border-radius:6px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;color:var(--text-2);cursor:pointer;font-size:11px;white-space:nowrap;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}.button:hover{color:var(--text-1);background:var(--surface-2)}.button.secondary{background:var(--surface-2);border-color:var(--border-1);color:var(--text-1)}.button.secondary:hover{background:var(--surface-3)}.button.accent{background:var(--accent);border-color:#155a5e;color:white;font-weight:600;box-shadow:0 1px 8px rgba(30,106,111,.25)}.button.accent:hover{background:var(--accent-hover);transform:translateY(-1px)}.button.wide-action{width:calc(100% - 16px);margin:10px 8px}.mobile-top,.mobile-tabs,.mobile-fab{display:none}
 .workspace{grid-row:2;display:grid;grid-template-columns:52px auto minmax(0,1fr) auto;min-height:0}.rail{grid-column:1;background:var(--rail-bg);border-right:1px solid var(--border-3);display:flex;flex-direction:column;align-items:center;padding-top:4px;z-index:12}.rail button{width:44px;height:44px;border:0;background:transparent;color:var(--text-3);display:grid;place-items:center;border-radius:8px;cursor:pointer;position:relative;transition:all var(--dur-fast)}.rail button:hover{color:var(--text-1);background:var(--surface-1)}.rail button.active{color:#1e6a6f;background:var(--rail-active)}.rail button.active:before{content:"";width:2px;height:18px;background:var(--accent);position:absolute;left:-4px;border-radius:0 3px 3px 0}.rail button[data-tip]:after{content:attr(data-tip);position:absolute;left:50px;background:#292934;color:white;border:1px solid #3a3a48;border-radius:5px;padding:6px 8px;font-size:10px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(-4px);transition:opacity 150ms .15s,transform 150ms .15s;z-index:400;box-shadow:0 8px 24px rgba(43,39,31,.35)}.rail button[data-tip]:hover:after{opacity:1;transform:none}.rail .rail-collapse{margin-top:auto;margin-bottom:4px}
 .sidebar{grid-column:2;min-width:0;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:grid;grid-template-rows:91px minmax(0,1fr);overflow:hidden;transition:width var(--dur-normal) var(--ease-out),opacity var(--dur-fast);width:260px;z-index:11}.sidebar.collapsed{width:0;border:0;opacity:0}.sidebar-head{padding:12px 10px 8px;display:grid;grid-template-columns:1fr auto;gap:8px;border-bottom:1px solid var(--border-3)}.sidebar-head>div:first-child{min-width:0}.eyebrow{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:700}.sidebar-head h2{font-size:15px;margin:2px 0 0;letter-spacing:-.02em}.search{height:30px;position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:#ffffff;border-radius:6px;padding:0 7px;grid-column:1/-1;transition:border-color var(--dur-fast)}.search:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-muted)}.search svg{color:var(--text-3);flex:none}.search input{border:0;background:transparent;color:var(--text-1);outline:0;min-width:0;width:100%;font-size:11px}.search input::placeholder{color:var(--text-4)}.search button{border:0;background:none;padding:0;color:var(--text-3);display:grid;cursor:pointer}.search kbd{font-size:8px;color:var(--text-4);border:1px solid var(--border-2);border-radius:3px;padding:1px 3px}.sidebar-scroll{overflow-y:auto;overflow-x:hidden}.sidebar-section{padding:5px 0 12px}.group-title{height:31px;display:flex;align-items:center;gap:6px;padding:0 10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.09em;font-size:8px;font-weight:700;margin-top:3px}.group-title span{flex:1}.group-title b{font-size:8px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:8px;min-width:18px;text-align:center;padding:2px 4px;color:var(--text-3)}.group-title.zone-title{width:100%;background:none;border:0;cursor:pointer}.page-row,.section-row{height:47px;margin:0 5px;border-radius:5px;display:flex;align-items:center;gap:8px;padding:0 6px;cursor:pointer;position:relative;border-left:2px solid transparent}.page-row:hover,.section-row:hover{background:var(--surface-1)}.page-row.selected,.section-row.selected{border-left-color:var(--accent);background:var(--accent-muted)}.page-row .status,.publish-status .status{width:6px;height:6px;border-radius:50%;flex:none}.status.live{background:var(--success);box-shadow:0 0 0 3px var(--success-muted)}.status.draft{background:var(--warning);box-shadow:0 0 0 3px var(--warning-muted)}.status.new{background:var(--text-4)}.page-row>span:nth-of-type(1),.section-row>span:nth-of-type(2){min-width:0;flex:1;display:flex;flex-direction:column}.page-row b,.section-row>span b{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-row small,.section-row small{font-size:9px;color:var(--text-3);margin-top:2px}.page-row>button,.section-row>button{border:0;background:none;color:var(--text-3);padding:4px;display:grid;place-items:center;opacity:0;cursor:pointer}.page-row:hover>button,.section-row:hover>button,.section-row.selected>button{opacity:1}.page-row.nested{padding-left:22px}.drag{font-size:13px;color:var(--text-4);cursor:grab}.swatch{width:7px;height:18px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
@@ -30,7 +30,7 @@
 .cms-agent-workbench [data-agent-composer]>div{display:flex;align-items:center;gap:6px;margin-top:6px}
 .cms-agent-workbench [data-agent-composer] button,.cms-agent-workbench [data-agent-composer] select{min-height:29px;border:1px solid var(--border-2);border-radius:6px;background:var(--surface-1);color:var(--text-2);padding:0 9px;font-size:9px}
 
-/* FnF theme-editor shell — rail | library | inspector+canvas | AgentSam dock */
+/* Theme-editor shell — rail | library | inspector+canvas | agent dock */
 .cms-shell--fnf{grid-template-rows:48px minmax(0,1fr) 24px;background:#f4f4f5}
 .fnf-topbar{grid-row:1;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;background:#1f1f1f;color:#e8e8e8;position:relative;z-index:40;border-bottom:1px solid #2a2a2a}
 .fnf-topbar-left{display:flex;align-items:center;gap:8px;min-width:0;flex:none}
@@ -104,3 +104,55 @@
   .statusbar{display:none}
   .mobile-tabs{display:grid}
 }
+
+/* Product shell — adapter-driven CmsEditor (not donor prototype chrome) */
+.cms-shell--product,.cms-shell--loading,.cms-shell--error{display:flex;flex-direction:column;min-height:100vh;background:var(--shell-bg);color:var(--text-1)}
+.cms-shell--loading,.cms-shell--error{align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}
+.cms-shell--error h1{margin:0;font-size:22px;letter-spacing:-.02em}
+.cms-shell--error p,.cms-shell--loading p{margin:0;max-width:420px;color:var(--text-2);line-height:1.55}
+.cms-shell--error code{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);padding:2px 6px;border-radius:4px}
+.cms-ephemeral-banner{background:var(--warning-muted);color:#7a5a12;padding:8px 14px;font-size:12px;border-bottom:1px solid rgba(245,158,11,.35);text-align:center}
+.cms-topbar{height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border)}
+.cms-topbar>div:first-child{display:flex;flex-direction:column;min-width:0}
+.cms-topbar strong{font-size:13px}
+.cms-topbar span{font-size:10px;color:var(--text-3)}
+.cms-topbar-actions{display:flex;align-items:center;gap:6px}
+.cms-topbar-actions button{min-height:30px;border:1px solid var(--border-2);border-radius:6px;background:var(--surface-1);padding:0 10px;cursor:pointer;font-size:11px}
+.cms-topbar-actions button:hover{background:var(--surface-2)}
+.cms-topbar-actions .badge{font-size:10px;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:4px 8px;font-weight:700}
+.cms-topbar-actions .badge.draft{background:var(--warning-muted);color:#7a5a12}
+.cms-topbar-actions .badge.saved{background:var(--success-muted);color:#0a7a3e}
+.cms-workspace{flex:1;min-height:0;display:grid;grid-template-columns:52px 220px minmax(0,1fr) 300px}
+.cms-rail{background:var(--rail-bg);border-right:1px solid var(--border-3);display:flex;flex-direction:column;align-items:stretch;padding:6px;gap:4px}
+.cms-rail button{border:0;background:transparent;color:var(--text-3);padding:10px 6px;border-radius:8px;cursor:pointer;text-transform:capitalize;font-size:10px}
+.cms-rail button:hover,.cms-rail button.active{background:var(--rail-active);color:var(--accent)}
+.cms-sidebar,.cms-inspector{background:var(--sidebar-bg);overflow:auto;padding:10px}
+.cms-sidebar{border-right:1px solid var(--sidebar-border)}
+.cms-inspector{border-left:1px solid var(--panel-border)}
+.cms-sidebar ul,.cms-inspector ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
+.cms-sidebar li button{width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
+.cms-sidebar li button:hover,.cms-sidebar li button.active{background:var(--accent-muted)}
+.cms-sidebar small,.cms-inspector p{color:var(--text-3);font-size:10px}
+.cms-inspector h2{margin:0 0 4px;font-size:14px}
+.cms-inspector label{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-size:11px}
+.cms-inspector input{border:1px solid var(--border-2);border-radius:5px;padding:8px;background:#fff}
+.cms-error{color:var(--danger);font-size:11px}
+.cms-canvas-wrap{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--canvas-bg);background-image:radial-gradient(var(--canvas-dot-color) 1px,transparent 1px);background-size:16px 16px}
+.cms-viewport-switch{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border-3);background:rgba(255,255,255,.7)}
+.cms-viewport-switch button{border:1px solid var(--border-2);background:#fff;border-radius:5px;padding:4px 10px;font-size:10px;text-transform:capitalize;cursor:pointer}
+.cms-viewport-switch button.active{background:var(--accent-muted);border-color:var(--accent-border);color:var(--accent)}
+.cms-canvas{flex:1;overflow:auto;padding:16px;max-width:100%}
+.cms-canvas--phone{max-width:420px;margin:0 auto}
+.cms-canvas--tablet{max-width:780px;margin:0 auto}
+.cms-canvas-meta{display:flex;gap:10px;align-items:baseline;margin-bottom:12px}
+.cms-canvas-meta em{margin-left:auto;font-size:10px;color:var(--text-3);font-style:normal}
+.cms-canvas-sections{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
+.cms-canvas-sections>li{background:#fff;border:1px solid var(--border-2);border-radius:8px;overflow:hidden}
+.cms-canvas-sections button{width:100%;border:0;background:transparent;text-align:left;padding:12px 14px;cursor:pointer;display:flex;gap:8px;align-items:center}
+.cms-canvas-sections button.is-selected{background:var(--accent-muted)}
+.cms-canvas-sections small{color:var(--text-3);font-size:10px}
+.cms-canvas-sections em{margin-left:auto;font-size:9px;color:var(--warning);font-style:normal}
+.cms-canvas-sections dl{margin:0;padding:0 14px 12px;display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:11px}
+.cms-canvas-sections dt{color:var(--text-3)}
+.cms-canvas-empty{padding:40px;text-align:center;color:var(--text-3)}
+.cms-settings{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text-2)}

package/apps/client-cms-editor/frontend/tsconfig.json

@@ -17,7 +17,18 @@
     "types": [
       "vite/client"
     ],
-    "preserveSymlinks": true
+    "preserveSymlinks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@inneranimalmedia/agentsam-cms-shared": ["../shared/cms/src/index.ts"],
+      "@inneranimalmedia/agentsam-cms-shared/*": ["../shared/cms/src/*"],
+      "@inneranimalmedia/agentsam-cms-backend/api": ["../backend/src/api/client.ts"],
+      "@inneranimalmedia/agentsam-cms-backend/model": ["../backend/src/model.ts"],
+      "@inneranimalmedia/agentsam-cms-backend/preview": ["../backend/src/preview/bridge.ts"],
+      "@inneranimalmedia/agentsam-cms-backend/routing": ["../backend/src/routing/index.js"],
+      "@inneranimalmedia/agentsam-cms-backend": ["../backend/src/index.ts"],
+      "@inneranimalmedia/agentsam-cms-backend/*": ["../backend/src/*"]
+    }
   },
   "include": [
     "src"

package/apps/client-cms-editor/frontend/vite.config.ts

@@ -1,10 +1,22 @@
 import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 
+const root = path.dirname(fileURLToPath(import.meta.url));
+
 export default defineConfig({
   plugins: [react()],
   resolve: {
     preserveSymlinks: true,
+    alias: {
+      '@inneranimalmedia/agentsam-cms-shared': path.join(root, '../shared/cms/src/index.ts'),
+      '@inneranimalmedia/agentsam-cms-backend/api': path.join(root, '../backend/src/api/client.ts'),
+      '@inneranimalmedia/agentsam-cms-backend/model': path.join(root, '../backend/src/model.ts'),
+      '@inneranimalmedia/agentsam-cms-backend/preview': path.join(root, '../backend/src/preview/bridge.ts'),
+      '@inneranimalmedia/agentsam-cms-backend/routing': path.join(root, '../backend/src/routing/index.js'),
+      '@inneranimalmedia/agentsam-cms-backend': path.join(root, '../backend/src/index.ts'),
+    },
   },
   build: {
     outDir: 'dist',