@inneranimalmedia/agentsam-sdk 2.6.10 → 2.6.12

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

@@ -1,4 +1,5 @@
 import type { CmsEditorAdapter } from '../../../shared/cms/src/adapter';
+import { buildCmsEditorGroups, getCmsSectionGroupId } from '../../../shared/cms/src/editor-types';
 import type { CmsEditorHost } from '../../../shared/cms/src/host';
 import type { CmsAgentHost } from '../lib/agent-host';
 import { CmsEditorProvider } from './CmsEditorProvider';
@@ -14,14 +15,15 @@ export type CmsEditorProps = {
   agentHost?: CmsAgentHost;
   siteId: string;
   initialPageId?: string | null;
-  initialRail?: 'pages' | 'sections' | 'blocks' | 'settings';
+  initialRail?: 'groups' | 'sections' | 'blocks' | 'pages' | 'media' | '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;
+  const { site, page, section, block, ui, published, lastDraft } = editor;
+  const groups = page ? buildCmsEditorGroups(page.sections) : [];
 
   if (ui.error && !site) {
     return (
@@ -55,6 +57,16 @@ function EditorShell() {
         <div>
           <strong>{site.name}</strong>
           <span>{site.domain || site.id}</span>
+          <label className="cms-route-select">
+            <span>Route</span>
+            <select value={page.id} onChange={(event) => editor.selectPage(event.target.value)}>
+              {site.pages.map((entry) => (
+                <option key={entry.id} value={entry.id}>
+                  {entry.title} · {entry.slug}
+                </option>
+              ))}
+            </select>
+          </label>
         </div>
         <div className="cms-topbar-actions">
           <span className={ui.dirty ? 'badge draft' : 'badge saved'}>
@@ -87,7 +99,7 @@ function EditorShell() {
 
       <div className="cms-workspace">
         <aside className="cms-rail">
-          {(['pages', 'sections', 'blocks', 'settings'] as const).map((rail) => (
+          {(['groups', 'sections', 'blocks', 'settings'] as const).map((rail) => (
             <button
               key={rail}
               type="button"
@@ -100,33 +112,52 @@ function EditorShell() {
         </aside>
 
         <aside className="cms-sidebar">
-          {ui.rail === 'pages' ? (
+          {ui.rail === 'groups' ? (
             <ul>
-              {site.pages.map((entry) => (
+              {groups.map((group) => {
+                const active = section ? getCmsSectionGroupId(section) === group.id : false;
+                return (
+                  <li key={group.id}>
+                    <button
+                      type="button"
+                      className={active ? 'active' : ''}
+                      onClick={() => group.sectionIds[0] && editor.selectSection(group.sectionIds[0])}
+                    >
+                      {group.name}
+                      <small>{group.sectionIds.length} section{group.sectionIds.length === 1 ? '' : 's'}</small>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+          {ui.rail === 'sections' ? (
+            <ul>
+              {page.sections.map((entry) => (
                 <li key={entry.id}>
                   <button
                     type="button"
-                    className={entry.id === page.id ? 'active' : ''}
-                    onClick={() => editor.selectPage(entry.id)}
+                    className={entry.id === section?.id ? 'active' : ''}
+                    onClick={() => editor.selectSection(entry.id)}
                   >
-                    {entry.title}
-                    <small>{entry.slug}</small>
+                    {entry.name}
+                    <small>{getCmsSectionGroupId(entry)} · {entry.type}</small>
                   </button>
                 </li>
               ))}
             </ul>
           ) : null}
-          {ui.rail === 'sections' || ui.rail === 'blocks' ? (
+          {ui.rail === 'blocks' ? (
             <ul>
-              {page.sections.map((entry) => (
+              {(section?.blocks || []).map((entry) => (
                 <li key={entry.id}>
                   <button
                     type="button"
-                    className={entry.id === section?.id ? 'active' : ''}
-                    onClick={() => editor.selectSection(entry.id)}
+                    className={entry.id === block?.id ? 'active' : ''}
+                    onClick={() => editor.selectBlock(entry.id)}
                   >
-                    {entry.name}
-                    <small>{entry.type}</small>
+                    {entry.type}
+                    <small>{entry.visible ? 'Visible' : 'Hidden'}</small>
                   </button>
                 </li>
               ))}
@@ -191,7 +222,7 @@ export default function CmsEditor({
   host,
   siteId,
   initialPageId = null,
-  initialRail = 'sections',
+  initialRail = 'groups',
   temporaryAdapter = false,
 }: CmsEditorProps) {
   const editor = useCmsEditorController({

package/apps/client-cms-editor/frontend/src/editor/composition-groups.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildCmsEditorGroups,
+  getCmsSectionGroupId,
+  type CmsEditorSection,
+} from '../../../shared/cms/src/editor-types';
+
+const section = (
+  id: string,
+  group: string | undefined,
+  zone: CmsEditorSection['zone'] = 'BODY',
+): CmsEditorSection => ({
+  id,
+  name: id,
+  type: 'section',
+  zone,
+  visible: true,
+  color: '#111115',
+  fields: group ? { group_id: group, group_label: group.toUpperCase() } : {},
+  blocks: [],
+});
+
+describe('CMS composition groups', () => {
+  it('groups sections without making pages the authoring primitive', () => {
+    const sections = [
+      section('hero', 'intro'),
+      section('proof', 'intro'),
+      section('features', 'content'),
+      section('footer', undefined, 'FOOTER'),
+    ];
+
+    const groups = buildCmsEditorGroups(sections);
+
+    expect(groups.map((group) => group.id)).toEqual(['intro', 'content', 'footer']);
+    expect(groups[0]?.sectionIds).toEqual(['hero', 'proof']);
+    expect(groups[1]?.sectionIds).toEqual(['features']);
+    expect(groups[2]?.sectionIds).toEqual(['footer']);
+    expect(getCmsSectionGroupId(sections[3]!)).toBe('footer');
+  });
+});

package/apps/client-cms-editor/frontend/src/editor/legacy/CmsEditorPrototype.tsx

@@ -788,11 +788,11 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
   }
 
 
-  return <main className={`cms-shell cms-shell--fnf${agentSamOpen ? " is-agentsam-open" : ""}${inspectorSheetOpen ? " is-inspector-open" : ""}`}>
-    <header className="fnf-topbar" data-annotation-control="">
-      <div className="fnf-topbar-left">
+  return <main className={`cms-shell cms-shell--commerce${agentSamOpen ? " is-agentsam-open" : ""}${inspectorSheetOpen ? " is-inspector-open" : ""}`}>
+    <header className="commerce-topbar" data-annotation-control="">
+      <div className="commerce-topbar-left">
         <button
-          className="fnf-topbar-ghost"
+          className="commerce-topbar-ghost"
           onClick={() => {
             const target = basePath || "/cms";
             if (onNavigate) onNavigate(target);
@@ -809,30 +809,30 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
           {siteSwitcher && <SiteSwitcher sites={sites} active={site.id} choose={chooseSite} close={() => setSiteSwitcher(false)} newSite={() => { setSiteSwitcher(false); toast("Create sites from the CMS hub", "info"); }}/>}
         </div>
       </div>
-      <button className="fnf-search" type="button" onClick={() => setModal("palette")} aria-label="Search">
+      <button className="commerce-search" type="button" onClick={() => setModal("palette")} aria-label="Search">
         <Icon name="search" size={14}/>
         <span>Search pages, sections…</span>
         <kbd>⌘K</kbd>
       </button>
-      <div className="fnf-topbar-actions">
+      <div className="commerce-topbar-actions">
         <ViewportSwitcher viewport={viewport} setViewport={setViewport}/>
         <button
           type="button"
-          className={`fnf-topbar-btn${annotateSelecting ? " is-active" : ""}`}
+          className={`commerce-topbar-btn${annotateSelecting ? " is-active" : ""}`}
           data-annotation-control=""
           onClick={() => setAnnotateSelecting((v) => !v)}
           title="Annotate canvas"
         >{annotateSelecting ? "Selecting…" : "Annotate"}</button>
-        <button type="button" className="fnf-topbar-icon" onClick={undo} disabled={!history.length} title="Undo ⌘Z"><Icon name="undo" size={14}/></button>
-        <button type="button" className="fnf-topbar-icon" onClick={redo} disabled={!future.length} title="Redo ⌘⇧Z"><Icon name="redo" size={14}/></button>
-        <button type="button" className="fnf-topbar-btn" onClick={() => setPreview(true)}>Preview</button>
+        <button type="button" className="commerce-topbar-icon" onClick={undo} disabled={!history.length} title="Undo ⌘Z"><Icon name="undo" size={14}/></button>
+        <button type="button" className="commerce-topbar-icon" onClick={redo} disabled={!future.length} title="Redo ⌘⇧Z"><Icon name="redo" size={14}/></button>
+        <button type="button" className="commerce-topbar-btn" onClick={() => setPreview(true)}>Preview</button>
         <div className="publish-wrap">
           <Button icon="publish" kind="accent" onClick={() => setPublishMenu(v => !v)}>Publish live <Icon name="down" size={11}/></Button>
           {publishMenu && <PublishMenu action={(m: string) => { if (m === "Schedule") { setModal("schedule"); } else { setSaving(true); publishIamPage(page.id).then(() => toast("Page published")).catch((error) => toast(error?.message || "Publish failed", "error")).finally(() => setSaving(false)); } setPublishMenu(false); }}/>}
         </div>
         <button
           type="button"
-          className={`fnf-topbar-icon${agentSamOpen ? " is-agentsam-active" : ""}`}
+          className={`commerce-topbar-icon${agentSamOpen ? " is-agentsam-active" : ""}`}
           data-annotation-control=""
           aria-label="AgentSam"
           aria-expanded={agentSamOpen}
@@ -842,14 +842,14 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>
         </button>
       </div>
-      <div className="fnf-mobile-top" data-annotation-control="">
-        <button type="button" className="fnf-topbar-ghost" onClick={() => { setSidebarCollapsed(false); setRail("sections"); }} aria-label="Library"><Icon name="menu" size={16}/></button>
+      <div className="commerce-mobile-top" data-annotation-control="">
+        <button type="button" className="commerce-topbar-ghost" onClick={() => { setSidebarCollapsed(false); setRail("sections"); }} aria-label="Library"><Icon name="menu" size={16}/></button>
         <b>{page.title}</b>
-        <div className="fnf-mobile-top-actions">
-          <button type="button" className={`fnf-topbar-btn${inspectorSheetOpen ? " is-active" : ""}`} onClick={() => setInspectorSheetOpen((v) => !v)}>{inspectorSheetOpen ? "Preview" : "Edit"}</button>
+        <div className="commerce-mobile-top-actions">
+          <button type="button" className={`commerce-topbar-btn${inspectorSheetOpen ? " is-active" : ""}`} onClick={() => setInspectorSheetOpen((v) => !v)}>{inspectorSheetOpen ? "Preview" : "Edit"}</button>
           <button
             type="button"
-            className={`fnf-topbar-icon${agentSamOpen ? " is-agentsam-active" : ""}`}
+            className={`commerce-topbar-icon${agentSamOpen ? " is-agentsam-active" : ""}`}
             aria-label="AgentSam"
             aria-expanded={agentSamOpen}
             onClick={() => setAgentSamOpen((v) => !v)}
@@ -860,13 +860,13 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
       </div>
     </header>
 
-    <div className="fnf-workspace">
-      <nav className="rail fnf-rail" data-annotation-control="">
+    <div className="commerce-workspace">
+      <nav className="rail commerce-rail" data-annotation-control="">
         {railItems.map((item, i) => <button key={item.id} className={rail === item.id ? "active" : ""} onClick={() => { setRail(item.id); setSidebarCollapsed(false); }} data-tip={`${item.label}  ⌘${i + 1}`}><Icon name={item.icon}/></button>)}
         <button className="rail-collapse" onClick={() => setSidebarCollapsed(v => !v)} data-tip={sidebarCollapsed ? "Expand library" : "Collapse library"}><Icon name="collapse"/></button>
       </nav>
 
-      <aside className={`sidebar fnf-library ${sidebarCollapsed ? "collapsed" : ""}`} data-annotation-control="">
+      <aside className={`sidebar commerce-library ${sidebarCollapsed ? "collapsed" : ""}`} data-annotation-control="">
         <SidebarHeader rail={rail} search={search} setSearch={setSearch} action={() => rail === "pages" ? setModal("page") : rail === "sections" ? setModal("add-section") : rail === "blocks" ? addBlock() : rail === "media" ? setModal("upload") : toast("No create action is available for this panel", "info")}/>
         <div className="sidebar-scroll">
           {rail === "pages" && <PagesSidebar pages={filteredPages} active={page.id} choose={choosePage} create={() => setModal("page")} toast={toast}/>}
@@ -879,14 +879,14 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
         </div>
       </aside>
 
-      <div className="fnf-editor">
-        <aside className={`fnf-inspector ${inspectorCollapsed ? "collapsed" : ""}`} data-annotation-control="">
-          <div className="fnf-inspector-head">
+      <div className="commerce-editor">
+        <aside className={`commerce-inspector ${inspectorCollapsed ? "collapsed" : ""}`} data-annotation-control="">
+          <div className="commerce-inspector-head">
             <div>
               <strong>{selectedBlock ? selectedBlock.type : selected?.name || "Section"}</strong>
               <span className={`badge ${dirty ? "draft" : "active"}`}>{dirty ? "draft" : "saved"}</span>
             </div>
-            <button type="button" className="fnf-topbar-icon" onClick={() => setInspectorCollapsed((v) => !v)} title="Collapse inspector"><Icon name="collapse" size={14}/></button>
+            <button type="button" className="commerce-topbar-icon" onClick={() => setInspectorCollapsed((v) => !v)} title="Collapse inspector"><Icon name="collapse" size={14}/></button>
           </div>
           {selected && (
             <div className="selected-head">
@@ -912,14 +912,14 @@ const FALLBACK_TEMPLATE_CARDS: TemplateCard[] = [
             {tab === "crm" ? <InspectorCrm contacts={contacts} viewAll={() => setRail("crm")} select={setContactId}/> : null}
             {!selected && tab === "content" ? <EmptyState icon="layers" title="Select a section" copy="Choose a section from the library or canvas markers to edit fields."/> : null}
           </div>
-          <p className="fnf-live-note">{dirty ? "Unsaved changes" : "Live editing connected."}</p>
+          <p className="commerce-live-note">{dirty ? "Unsaved changes" : "Live editing connected."}</p>
         </aside>
 
-        <section className="canvas-area fnf-canvas" ref={canvasScopeRef} data-agentsam-resource={`page:${page.id}`} aria-label={`${page.title} canvas`}>
-          <div className="fnf-preview-bar" data-annotation-control="">
+        <section className="canvas-area commerce-canvas" ref={canvasScopeRef} data-agentsam-resource={`page:${page.id}`} aria-label={`${page.title} canvas`}>
+          <div className="commerce-preview-bar" data-annotation-control="">
             <span>Preview — {page.slug || page.title}</span>
-            <div className="fnf-preview-bar-actions">
-              <button type="button" className="fnf-topbar-btn" onClick={() => setPreview(true)}>Open in tab</button>
+            <div className="commerce-preview-bar-actions">
+              <button type="button" className="commerce-topbar-btn" onClick={() => setPreview(true)}>Open in tab</button>
             </div>
           </div>
           <div className="canvas-stage">

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

@@ -10,7 +10,7 @@ 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';
+  rail: 'groups' | 'sections' | 'blocks' | 'pages' | 'media' | 'settings';
   viewport: 'phone' | 'tablet' | 'desktop';
   dirty: boolean;
   saving: boolean;
@@ -55,7 +55,7 @@ export function useCmsEditorController({
   host,
   siteId,
   initialPageId = null,
-  initialRail = 'sections',
+  initialRail = 'groups',
   temporaryAdapter = false,
 }: UseCmsEditorControllerArgs): CmsEditorController {
   const [site, setSite] = useState<CmsEditorSite | null>(null);
@@ -121,7 +121,7 @@ export function useCmsEditorController({
     setPageId(id);
     setSectionId(null);
     setBlockId(null);
-    setUi((u) => ({ ...u, dirty: false, rail: 'sections' }));
+    setUi((u) => ({ ...u, dirty: false, rail: 'groups' }));
   }, []);
 
   const selectSection = useCallback((id: string) => {

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

@@ -1,6 +1,6 @@
 /* Agent host side drawer */
 
-.agentsam-dock {
+.cms-shell .agentsam-dock {
   flex: none;
   width: 0;
   min-width: 0;
@@ -13,7 +13,7 @@
   z-index: 25;
 }
 
-.agentsam-dock.is-open {
+.cms-shell .agentsam-dock.is-open {
   width: min(400px, 36vw);
   border-left-width: 1px;
 }
@@ -196,13 +196,13 @@
   cursor: not-allowed;
 }
 
-.fnf-topbar-btn.is-agentsam-active {
+.commerce-topbar-btn.is-agentsam-active {
   background: rgba(92, 45, 145, 0.22);
   color: #e8d4ff;
 }
 
 @media (max-width: 900px) {
-  .agentsam-dock.is-open {
+  .cms-shell .agentsam-dock.is-open {
     width: min(100%, 420px);
     position: absolute;
     right: 0;
@@ -212,3 +212,4 @@
     box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
   }
 }
+