@drawnagency/primitives 0.1.84 → 0.1.86

package/dist/{chunk-56J4QMF4.js → chunk-2CVP2AGK.js}

@@ -15,7 +15,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "./chunk-Q6LZOH5M.js";
+} from "./chunk-YAPG44NS.js";
 import {
   EditableRichText,
   defineHeadingSection
@@ -544,7 +544,7 @@ var ChildBlockWrapper = forwardRef(
       {
         ref,
         className: cn(
-          "group/childblock relative h-full rounded-sm",
+          "group/childblock relative h-full rounded-inner",
           isDragging && "opacity-50",
           "hover:outline hover:outline-2 hover:outline-primary/30"
         ),

package/dist/{chunk-Q6LZOH5M.js → chunk-YAPG44NS.js}

@@ -376,7 +376,7 @@ function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar })
       },
       tab.id
     )) }) }),
-    /* @__PURE__ */ jsx8("div", { role: "tabpanel", className: cn("px-px", fullBleedTabBar && "pt-4"), children: activeTab?.content })
+    /* @__PURE__ */ jsx8("div", { role: "tabpanel", className: cn("flex min-h-0 flex-1 flex-col px-px", fullBleedTabBar && "pt-4"), children: activeTab?.content })
   ] });
 }
 

package/dist/collab/rebase.d.ts

@@ -33,5 +33,28 @@ export interface RebaseResult {
  *  structure in both branches), and the result partitions: every section in
  *  `sections` is reachable from `index`; a dirty section deleted remotely is
  *  kept, re-linked into the index, and reported in `conflictIds`. */
+/** Fold a peer's live (pre-save) index broadcast under our current index — the
+ *  live-collab `onRemoteIndexUpdate` path, applied ONLY when we hold no unsaved
+ *  structural work (so our index equals the last-saved branch: every id in it is
+ *  a real, branch-backed section).
+ *
+ *  Keep every peer entry whose id our current index already knows; withhold the
+ *  rest, which is one of:
+ *    (a) the peer's unsaved ADD — its section file is not on the branch yet, so
+ *        letting it into our index would poison our next save with a dangling
+ *        ref the server rejects (its live appearance is deferred to the peer's
+ *        save event, which arrives via the saved-event sync); or
+ *    (b) a section WE deleted unsaved — absent from our index; our deletion
+ *        stands until save-time arbitration.
+ *
+ *  The keep-set is our INDEX's section ids, NOT the section bodies we managed to
+ *  load. A live, branch-backed section whose body was skipped by the client
+ *  loader (schema/registry miss, missing file, depth trip) is still in our index
+ *  and MUST survive — otherwise our next save posts an index missing it and the
+ *  server rejects with "section … not found in site index" (or the write drops
+ *  the live section). Taking the whole `localIndex` here, rather than a
+ *  caller-computed id set, is deliberate: it makes passing the loaded-bodies set
+ *  (the original bug) unrepresentable. Neither input is mutated. */
+export declare function reconcileRemoteIndex(remoteIndex: SiteIndex, localIndex: SiteIndex): SiteIndex;
 export declare function rebaseContent(args: RebaseArgs): RebaseResult;
 //# sourceMappingURL=rebase.d.ts.map

package/dist/collab/rebase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rebase.d.ts","sourceRoot":"","sources":["../../src/collab/rebase.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,aAAa,EAAE,CAAC;IAC/B,UAAU,EAAE,SAAS,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B;;;;;+EAK2E;IAC3E,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,WAAW,EAAE,SAAS,CAAC;IAKvB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IAIjB,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;;;;;;;;;qEAUqE;AACrE,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,YAAY,CA2F5D"}
+{"version":3,"file":"rebase.d.ts","sourceRoot":"","sources":["../../src/collab/rebase.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,aAAa,EAAE,CAAC;IAC/B,UAAU,EAAE,SAAS,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B;;;;;+EAK2E;IAC3E,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,WAAW,EAAE,SAAS,CAAC;IAKvB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IAIjB,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;;;;;;;;;qEAUqE;AACrE;;;;;;;;;;;;;;;;;;;;;oEAqBoE;AACpE,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,GAAG,SAAS,CAS7F;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,YAAY,CA2F5D"}

package/dist/collab/rebase.js

@@ -1,6 +1,16 @@
 import "../chunk-JSBRDJBE.js";
 
 // src/collab/rebase.ts
+function reconcileRemoteIndex(remoteIndex, localIndex) {
+  const knownIds = new Set(Object.keys(localIndex.sections));
+  return {
+    ...remoteIndex,
+    pages: remoteIndex.pages.map((p) => ({ ...p, order: p.order.filter((id) => knownIds.has(id)) })),
+    sections: Object.fromEntries(
+      Object.entries(remoteIndex.sections).filter(([id]) => knownIds.has(id))
+    )
+  };
+}
 function rebaseContent(args) {
   const localById = new Map(args.localSections.map((s) => [s.section.id, s]));
   const remoteIds = new Set(args.remoteSections.map((s) => s.section.id));
@@ -60,5 +70,6 @@ function rebaseContent(args) {
   return { sections: merged, index, conflictIds };
 }
 export {
-  rebaseContent
+  rebaseContent,
+  reconcileRemoteIndex
 };

package/dist/components/editor/index.js

@@ -11,7 +11,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "../../chunk-Q6LZOH5M.js";
+} from "../../chunk-YAPG44NS.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-ZSPCE6MZ.js";
 import {
@@ -569,9 +569,9 @@ function SectionWrapper({
         "relative",
         isDragging && "opacity-50",
         isLocked && "opacity-60",
-        isActive && "outline outline-2 outline-primary/50 rounded-sm",
-        !isActive && showAllChrome && "outline outline-2 outline-primary/20 rounded-sm",
-        !alwaysShow && "group-hover:outline group-hover:outline-2 group-hover:outline-primary/20 group-hover:rounded-sm"
+        isActive && "outline outline-2 outline-primary/50 rounded-outer",
+        !isActive && showAllChrome && "outline outline-2 outline-primary/20 rounded-outer",
+        !alwaysShow && "group-hover:outline group-hover:outline-2 group-hover:outline-primary/20 group-hover:rounded-outer"
       ),
       "data-section-id": sectionId,
       "data-section-type": sectionType,

package/dist/components/sections/register-schemas.js

@@ -1,8 +1,8 @@
 import {
   allSectionDefs
-} from "../../chunk-56J4QMF4.js";
+} from "../../chunk-2CVP2AGK.js";
 import "../../chunk-665DW3HR.js";
-import "../../chunk-Q6LZOH5M.js";
+import "../../chunk-YAPG44NS.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-FDBZZ4AT.js";
 import "../../chunk-DKXISNJ2.js";

package/dist/components/sections/register.js

@@ -1,8 +1,8 @@
 import {
   allSectionDefs
-} from "../../chunk-56J4QMF4.js";
+} from "../../chunk-2CVP2AGK.js";
 import "../../chunk-665DW3HR.js";
-import "../../chunk-Q6LZOH5M.js";
+import "../../chunk-YAPG44NS.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-FDBZZ4AT.js";
 import "../../chunk-DKXISNJ2.js";

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,EAAoC,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAwDtF,OAAO,KAAK,EAAE,eAAe,EAA2D,MAAM,oBAAoB,CAAC;AAmCnH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAoBxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,EAC9B,eAAe,GAChB,EAAE,KAAK,2CAsiDP;AAuED;6EAC6E;AAC7E,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EACvC,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK/B"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,EAAoC,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAuDtF,OAAO,KAAK,EAAE,eAAe,EAA2D,MAAM,oBAAoB,CAAC;AAmCnH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAoBxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,EAC9B,eAAe,GAChB,EAAE,KAAK,2CAshDP;AAuED;6EAC6E;AAC7E,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EACvC,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK/B"}

package/dist/components/shell/{ChatbotConfigModal.d.ts → SiteSettingsChatbot.d.ts}

@@ -1,13 +1,11 @@
 import type { SiteConfig } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 interface Props {
-    isOpen: boolean;
-    onClose: () => void;
     siteConfig: SiteConfig;
     onSiteConfigChange: (config: SiteConfig) => void;
     audiences: Audience[];
     platformEnabled: boolean;
 }
-export declare function ChatbotConfigModal({ isOpen, onClose, siteConfig, onSiteConfigChange, audiences, platformEnabled }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences, platformEnabled }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=ChatbotConfigModal.d.ts.map
+//# sourceMappingURL=SiteSettingsChatbot.d.ts.map

package/dist/components/shell/SiteSettingsChatbot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteSettingsChatbot.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsChatbot.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAA8B,MAAM,2BAA2B,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAsBD,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,KAAK,2CAwJxG"}

package/dist/components/shell/SiteSettingsModal.d.ts

@@ -6,6 +6,8 @@ interface Props {
     siteConfig: SiteConfig;
     onSiteConfigChange: (config: SiteConfig) => void;
     onAudiencesChange: (audiences: Audience[]) => void;
+    audiences: Audience[];
+    chatbotPlatformEnabled: boolean;
     capabilities: {
         oauth: boolean;
         emailPassword: boolean;
@@ -19,6 +21,6 @@ interface Props {
         role: "owner" | "editor";
     } | null;
 }
-export declare function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, capabilities, currentUser }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, audiences, chatbotPlatformEnabled, capabilities, currentUser }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SiteSettingsModal.d.ts.map

package/dist/components/shell/SiteSettingsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SiteSettingsModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsModal.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,KAAK,2CA2FzI"}
+{"version":3,"file":"SiteSettingsModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsModal.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACnD,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,sBAAsB,EAAE,OAAO,CAAC;IAChC,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,sBAAsB,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,KAAK,2CA0G5K"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/collab/rebase.ts

@@ -46,6 +46,39 @@ export interface RebaseResult {
  *  structure in both branches), and the result partitions: every section in
  *  `sections` is reachable from `index`; a dirty section deleted remotely is
  *  kept, re-linked into the index, and reported in `conflictIds`. */
+/** Fold a peer's live (pre-save) index broadcast under our current index — the
+ *  live-collab `onRemoteIndexUpdate` path, applied ONLY when we hold no unsaved
+ *  structural work (so our index equals the last-saved branch: every id in it is
+ *  a real, branch-backed section).
+ *
+ *  Keep every peer entry whose id our current index already knows; withhold the
+ *  rest, which is one of:
+ *    (a) the peer's unsaved ADD — its section file is not on the branch yet, so
+ *        letting it into our index would poison our next save with a dangling
+ *        ref the server rejects (its live appearance is deferred to the peer's
+ *        save event, which arrives via the saved-event sync); or
+ *    (b) a section WE deleted unsaved — absent from our index; our deletion
+ *        stands until save-time arbitration.
+ *
+ *  The keep-set is our INDEX's section ids, NOT the section bodies we managed to
+ *  load. A live, branch-backed section whose body was skipped by the client
+ *  loader (schema/registry miss, missing file, depth trip) is still in our index
+ *  and MUST survive — otherwise our next save posts an index missing it and the
+ *  server rejects with "section … not found in site index" (or the write drops
+ *  the live section). Taking the whole `localIndex` here, rather than a
+ *  caller-computed id set, is deliberate: it makes passing the loaded-bodies set
+ *  (the original bug) unrepresentable. Neither input is mutated. */
+export function reconcileRemoteIndex(remoteIndex: SiteIndex, localIndex: SiteIndex): SiteIndex {
+  const knownIds = new Set(Object.keys(localIndex.sections));
+  return {
+    ...remoteIndex,
+    pages: remoteIndex.pages.map((p) => ({ ...p, order: p.order.filter((id) => knownIds.has(id)) })),
+    sections: Object.fromEntries(
+      Object.entries(remoteIndex.sections).filter(([id]) => knownIds.has(id)),
+    ),
+  };
+}
+
 export function rebaseContent(args: RebaseArgs): RebaseResult {
   const localById = new Map(args.localSections.map((s) => [s.section.id, s]));
   const remoteIds = new Set(args.remoteSections.map((s) => s.section.id));

package/src/components/editor/ChildBlockWrapper.tsx

@@ -53,7 +53,7 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
       <div
         ref={ref}
         className={cn(
-          "group/childblock relative h-full rounded-sm",
+          "group/childblock relative h-full rounded-inner",
           isDragging && "opacity-50",
           "hover:outline hover:outline-2 hover:outline-primary/30",
         )}

package/src/components/editor/PagesModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Check } from "lucide-react";
+import { Check, ChevronDown, Home } from "lucide-react";
 import type { SiteIndex, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 // Sanctioned outside->inside import: document/ is a sealed subtree, but the
@@ -8,7 +8,7 @@ import type { Audience } from "../../auth/types";
 import type { DocumentOptions } from "../../document/engine/settings";
 import { Button } from "../shared/Button";
 import { Input } from "../shared/Input";
-import { Checkbox } from "../shared/Checkbox";
+import { Toggle } from "../shared/Toggle";
 import { AudienceIndicator } from "./AudienceIndicator";
 import { DragHandle } from "./DragHandle";
 import { useSortableRow } from "../../hooks/useSortableRow";
@@ -208,30 +208,35 @@ function PageRow({
       className={cn("relative rounded-md border border-base-200", isDragging && "opacity-50")}
     >
       <DropEdgeIndicator edge={closestEdge} />
-      <div className="flex items-center gap-2 px-3 py-2">
+      <div className="flex items-stretch gap-2 pl-3">
         {draggable && (
-          <div className="shrink-0 [&_[role=tooltip]]:hidden">
+          <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
             <DragHandle ref={handleRef} />
           </div>
         )}
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className={cn("truncate text-sm font-medium text-base-contrast", !page.title && "italic text-base-contrast/60")}>
-              {pageDisplayTitle(page.title)}
-            </span>
-            {page.isHome && <span className="rounded bg-primary px-1.5 py-0.5 text-xs font-medium text-primary-contrast">Home page</span>}
-            {!page.showInNav && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Hidden</span>}
-            {page.status === "archived" && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Archived</span>}
-          </div>
-          <div className="text-xs text-base-contrast/70">{page.isHome ? "/" : `/${page.slug}`}</div>
-        </div>
         <button
           type="button"
           aria-label={`Edit settings for ${pageDisplayTitle(page.title)}`}
+          aria-expanded={expanded}
           onClick={handleHeaderClick}
-          className="cursor-pointer rounded px-2 py-1 text-sm text-base-contrast/70 hover:text-primary"
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded py-2 pr-3 pl-4 text-left hover:bg-base-accent"
         >
-          {expanded ? "Done" : "Edit"}
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className={cn("truncate text-sm font-medium text-base-contrast", !page.title && "italic text-base-contrast/60")}>
+                {pageDisplayTitle(page.title)}
+              </span>
+              {page.isHome && <Home size={14} aria-label="Home page" className="shrink-0 text-base-contrast/60" />}
+              {!page.showInNav && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Hidden</span>}
+              {page.status === "archived" && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Archived</span>}
+            </div>
+            <div className="text-xs text-base-contrast/70">{page.isHome ? "/" : `/${page.slug}`}</div>
+          </div>
+          <ChevronDown
+            size={16}
+            aria-hidden="true"
+            className={cn("shrink-0 text-base-contrast/50 transition-transform", expanded && "rotate-180")}
+          />
         </button>
       </div>
 
@@ -254,7 +259,7 @@ function PageRow({
               onChange={handleSlugChange}
             />
           )}
-          <div className="flex items-start justify-between gap-4">
+          <div className="flex flex-col gap-3">
             <div>
               <label className="mb-1 block text-sm text-base-contrast">Audience</label>
               <AudienceIndicator access={page.access} audiences={audiences} onChange={onSetAudience} />
@@ -264,20 +269,23 @@ function PageRow({
                 </p>
               )}
             </div>
-            <Checkbox
-              label="Hide from Menu"
-              align="center"
-              checked={!page.showInNav}
-              onChange={(hidden) => onSetFields({ showInNav: !hidden })}
-              className="shrink-0"
-            />
+            <div className="flex flex-col divide-y divide-base-200 rounded-inner border border-base-200">
+              <div className="flex items-center justify-between gap-4 px-3 py-2.5">
+                <div className="min-w-0">
+                  <div className="text-sm text-base-contrast">Show in menu</div>
+                  <div className="text-xs text-base-contrast/70">List this page in the site navigation.</div>
+                </div>
+                <Toggle label="Show in menu" checked={page.showInNav} onChange={(v) => onSetFields({ showInNav: v })} />
+              </div>
+              <div className="flex items-center justify-between gap-4 px-3 py-2.5">
+                <div className="min-w-0">
+                  <div className="text-sm text-base-contrast">Document mode</div>
+                  <div className="text-xs text-base-contrast/70">Adds a presentation view of this page.</div>
+                </div>
+                <Toggle label="Document mode" checked={page.document?.enabled ?? false} onChange={(enabled) => onSetDocument({ enabled })} />
+              </div>
+            </div>
           </div>
-          <Checkbox
-            label="Document mode"
-            description="Adds a presentation view of this page."
-            checked={page.document?.enabled ?? false}
-            onChange={(enabled) => onSetDocument({ enabled })}
-          />
           <div className="flex items-center gap-2">
             <Button
               variant="secondary"

package/src/components/editor/SectionWrapper.tsx

@@ -246,12 +246,12 @@ export function SectionWrapper({
         "relative",
         isDragging && "opacity-50",
         isLocked && "opacity-60",
-        isActive && "outline outline-2 outline-primary/50 rounded-sm",
+        isActive && "outline outline-2 outline-primary/50 rounded-outer",
         !isActive &&
           showAllChrome &&
-          "outline outline-2 outline-primary/20 rounded-sm",
+          "outline outline-2 outline-primary/20 rounded-outer",
         !alwaysShow &&
-          "group-hover:outline group-hover:outline-2 group-hover:outline-primary/20 group-hover:rounded-sm",
+          "group-hover:outline group-hover:outline-2 group-hover:outline-primary/20 group-hover:rounded-outer",
       )}
       data-section-id={sectionId}
       data-section-type={sectionType}

package/src/components/shared/Tabs.tsx

@@ -60,7 +60,7 @@ export function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTa
       {/* px-px: the root's overflow-hidden would clip the 1px focus ring of
           inputs that span the full panel width (rings are box-shadows drawn
           outside the border box) — give them 1px to paint into. */}
-      <div role="tabpanel" className={cn("px-px", fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
+      <div role="tabpanel" className={cn("flex min-h-0 flex-1 flex-col px-px", fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
     </div>
   );
 }

package/src/components/shell/EditorShell.tsx

@@ -23,7 +23,6 @@ import type { BlockMove } from "../../lib/block-move";
 import { EditorModalProvider, useEditorModal } from "./EditorModalContext";
 import { EditorModal } from "./EditorModal";
 import { SiteSettingsModal } from "./SiteSettingsModal";
-import { ChatbotConfigModal } from "./ChatbotConfigModal";
 import ChatWidget from "../chat/ChatWidget";
 import { MediaLibraryModal } from "./MediaLibraryModal";
 import { MediaLibraryContext } from "./MediaLibraryContext";
@@ -69,7 +68,7 @@ import {
   deleteSectionRows,
   preserveEdit,
 } from "../../lib/dexie";
-import { rebaseContent } from "../../collab/rebase";
+import { rebaseContent, reconcileRemoteIndex } from "../../collab/rebase";
 import { deriveRecoveryInputs, applyConflictChoices } from "../../collab/recovery";
 import { getCollabProvider } from "../../collab/provider-registry";
 import type { CollabBootstrap, CollabPeer, CollabStatus, SavedMessage, TakeoverMessage } from "../../collab/types";
@@ -100,7 +99,7 @@ import { IconButton } from "../shared/IconButton";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { computeDisplaySections } from "./view-branch";
 import { SettingsIcon } from "../shared/icons";
-import { ImageIcon, ListOrderedIcon, FilesIcon, MessageCircleIcon, X } from "lucide-react";
+import { ImageIcon, ListOrderedIcon, FilesIcon, JoystickIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
@@ -201,7 +200,6 @@ export default function EditorShell({
   const [showRestoreModal, setShowRestoreModal] = useState(false);
   const [showOrderingModal, setShowOrderingModal] = useState(false);
   const [showPagesModal, setShowPagesModal] = useState(false);
-  const [showChatbotConfig, setShowChatbotConfig] = useState(false);
   const [showDocumentEditor, setShowDocumentEditor] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
@@ -634,22 +632,16 @@ export default function EditorShell({
       if (persistence.hasUnsavedIndex()) return;
       const parsed = IndexSchema.safeParse(msg.index);
       if (!parsed.success) return;
-      // PRUNE ids we hold no content for before applying. An id in the peer's
-      // index with no counterpart in our local sections state is either (a) the
-      // peer's unsaved ADD — its section file is not on the branch yet, so
-      // letting it into siteIndexRef would poison OUR next save with a dangling
-      // index ref the server rejects (live new-section appearance is deliberately
-      // deferred to the peer's save, which arrives via the saved-event sync); or
-      // (b) a section WE deleted unsaved — our deletion stands until save-time
-      // arbitration.
-      const localIds = new Set(sectionsRef.current.map((s) => s.section.id));
-      const pruned: SiteIndex = {
-        ...parsed.data,
-        pages: parsed.data.pages.map((p) => ({ ...p, order: p.order.filter((id) => localIds.has(id)) })),
-        sections: Object.fromEntries(
-          Object.entries(parsed.data.sections).filter(([id]) => localIds.has(id)),
-        ),
-      };
+      // Withhold ids our current index doesn't know before applying the peer's:
+      // (a) the peer's unsaved ADD — its file isn't on the branch yet, so letting
+      // it into siteIndexRef would poison OUR next save with a dangling index ref
+      // the server rejects (its live appearance is deferred to the peer's save,
+      // via the saved-event sync); or (b) a section WE deleted unsaved — our
+      // deletion stands until save-time arbitration. Keyed on our INDEX, not the
+      // loaded section bodies: a live section whose body the loader skipped
+      // (schema/registry miss, depth trip) is still indexed and must survive —
+      // guaranteed because we only reach here with no unsaved index work.
+      const pruned = reconcileRemoteIndex(parsed.data, siteIndexRef.current);
       setSiteIndex(pruned);
       siteIndexRef.current = pruned;
     },
@@ -1445,7 +1437,6 @@ export default function EditorShell({
             onRestoreClick={() => setShowRestoreModal(true)}
             onOrderingClick={() => setShowOrderingModal(true)}
             onPagesClick={() => setShowPagesModal(true)}
-            onChatbotClick={() => setShowChatbotConfig(true)}
             collabPeers={collab.peers}
             collabSelfId={collabBootstrap?.userId ?? null}
             collabStatus={collab.status}
@@ -1577,19 +1568,11 @@ export default function EditorShell({
             siteConfig={siteConfig!}
             onSiteConfigChange={handleSiteConfigChange}
             onAudiencesChange={setAudiences}
+            audiences={audiences}
+            chatbotPlatformEnabled={chatbotPlatformEnabled}
             capabilities={capabilities}
             currentUser={currentUser}
           />
-          {siteConfig && (
-            <ChatbotConfigModal
-              isOpen={showChatbotConfig}
-              onClose={() => setShowChatbotConfig(false)}
-              siteConfig={siteConfig}
-              onSiteConfigChange={handleSiteConfigChange}
-              audiences={audiences}
-              platformEnabled={chatbotPlatformEnabled}
-            />
-          )}
           <EditorModal
             isOpen={pendingDeleteSectionId !== null}
             onClose={() => setPendingDeleteSectionId(null)}
@@ -2280,7 +2263,6 @@ function EditorToolbar({
   onRestoreClick,
   onOrderingClick,
   onPagesClick,
-  onChatbotClick,
   collabPeers,
   collabSelfId,
   collabStatus,
@@ -2303,7 +2285,6 @@ function EditorToolbar({
   onRestoreClick: () => void;
   onOrderingClick: () => void;
   onPagesClick: () => void;
-  onChatbotClick: () => void;
   collabPeers: CollabPeer[];
   collabSelfId: string | null;
   collabStatus: CollabStatus;
@@ -2377,42 +2358,11 @@ function EditorToolbar({
             </div>
             <div className="flex items-center justify-end gap-2">
               <ProcessingIndicator items={processingItems} />
-              <IconButton
-                icon={<ListOrderedIcon size={16} />}
-                label="Reorder sections"
-                size="md"
-                onClick={onOrderingClick}
-                className="border border-base-200 bg-base-accent"
-              />
-              <IconButton
-                icon={<ImageIcon size={16} />}
-                label="Media library"
-                size="md"
-                onClick={onMediaClick}
-                className="border border-base-200 bg-base-accent"
-              />
-              <IconButton
-                icon={<FilesIcon size={16} />}
-                label="Pages"
-                size="md"
-                onClick={onPagesClick}
-                className="border border-base-200 bg-base-accent"
-              />
-              <IconButton
-                icon={<MessageCircleIcon size={16} />}
-                label="Chatbot"
-                size="md"
-                onClick={onChatbotClick}
-                className="border border-base-200 bg-base-accent"
-              />
-              <IconButton
-                icon={<SettingsIcon size={16} />}
-                label="Site settings"
-                size="md"
-                onClick={onSettingsClick}
-                className="border border-base-200 bg-base-accent"
-              />
+              <IconButton icon={<ImageIcon size={16} />} label="Media library" size="md" onClick={onMediaClick} className="border border-base-200 bg-base-accent" />
+              <IconButton icon={<ListOrderedIcon size={16} />} label="Reorder sections" size="md" onClick={onOrderingClick} className="border border-base-200 bg-base-accent" />
+              <IconButton icon={<FilesIcon size={16} />} label="Pages" size="md" onClick={onPagesClick} className="border border-base-200 bg-base-accent" />
               <ShowAllChromeToggle />
+              <IconButton icon={<SettingsIcon size={16} />} label="Site settings" size="md" onClick={onSettingsClick} className="border border-base-200 bg-base-accent" />
             </div>
           </div>
         </div>
@@ -2457,14 +2407,13 @@ function ShowAllChromeToggle() {
   const { showAllChrome, toggleShowAllChrome } = useEditorContext();
 
   return (
-    <Button
-      variant="secondary"
-      size="sm"
+    <IconButton
+      icon={<JoystickIcon size={16} />}
+      label="Toggle editor chrome visibility"
+      size="md"
       onClick={toggleShowAllChrome}
-      className="bg-base-accent"
-      aria-label="Toggle editor chrome visibility"
-    >
-      {showAllChrome ? "Hide Controls" : "Show Controls"}
-    </Button>
+      aria-pressed={showAllChrome}
+      className="border border-base-200 bg-base-accent"
+    />
   );
 }

package/src/components/shell/SiteSettingsChatbot.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useState } from "react";
+import { Button } from "../shared/Button";
+import { cn } from "../../lib/cn";
+import ChatPanel from "../chat/ChatPanel";
+import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
+import type { Audience } from "../../auth/types";
+import { audiencePasses } from "../../lib/pages";
+
+interface Props {
+  siteConfig: SiteConfig;
+  onSiteConfigChange: (config: SiteConfig) => void;
+  audiences: Audience[];
+  platformEnabled: boolean;
+}
+
+function slugify(label: string): string {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32) || "task";
+}
+
+function AudienceChips({ audiences, selected, onToggle }: { audiences: Audience[]; selected: string[]; onToggle: (name: string) => void }) {
+  return (
+    <div className="flex flex-wrap gap-1">
+      {audiences.map((a) => (
+        <button key={a.name} type="button" onClick={() => onToggle(a.name)}
+          className={cn("rounded-full border px-2 py-0.5 text-xs",
+            selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
+          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color } : undefined}>
+          {a.displayName}
+        </button>
+      ))}
+      {audiences.length === 0 && <span className="text-xs text-base-contrast-light">No audiences configured</span>}
+    </div>
+  );
+}
+
+export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences, platformEnabled }: Props) {
+  const chatbot = siteConfig.chatbot;
+  const [newTaskLabel, setNewTaskLabel] = useState("");
+  const [showTest, setShowTest] = useState(false);
+  const [previewAudience, setPreviewAudience] = useState("");
+
+  // A deselected audience can no longer chat — never keep simulating it.
+  useEffect(() => {
+    if (previewAudience && !chatbot.audiences.includes(previewAudience)) setPreviewAudience("");
+  }, [previewAudience, chatbot.audiences]);
+
+  const patch = (p: Partial<ChatbotConfig>) =>
+    onSiteConfigChange({ ...siteConfig, chatbot: { ...chatbot, ...p } });
+
+  const patchTask = (i: number, p: Partial<ChatbotTask>) =>
+    patch({ tasks: chatbot.tasks.map((t, idx) => (idx === i ? { ...t, ...p } : t)) });
+
+  function addTask() {
+    const label = newTaskLabel.trim();
+    if (!label || chatbot.tasks.length >= 20) return;
+    let id = slugify(label);
+    if (chatbot.tasks.some((t) => t.id === id)) {
+      for (let n = 2; ; n++) {
+        const suffix = `-${n}`;
+        const candidate = `${id.slice(0, 32 - suffix.length)}${suffix}`;
+        if (!chatbot.tasks.some((t) => t.id === candidate)) {
+          id = candidate;
+          break;
+        }
+      }
+    }
+    patch({ tasks: [...chatbot.tasks, { id, label, prompt: "", access: [] }] });
+    setNewTaskLabel("");
+  }
+
+  const toggleName = (list: string[], name: string) =>
+    list.includes(name) ? list.filter((n) => n !== name) : [...list, name];
+
+  // Record lookups can hit inherited Object.prototype members ("constructor"
+  // is a legal audience name) — treat anything non-string as absent.
+  const overlayValue = (name: string) => {
+    const v = chatbot.audiencePrompts[name];
+    return typeof v === "string" ? v : "";
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {!platformEnabled && (
+        <div className="rounded border border-base-200 bg-base-accent px-3 py-2 text-sm text-base-contrast">
+          Chat is not enabled for this site — contact Drawn Agency. You can still edit the
+          configuration below; it activates when chat is switched on.
+        </div>
+      )}
+
+      <label className="flex items-center gap-2 text-sm text-base-contrast">
+        <input type="checkbox" aria-label="Enable chatbot" checked={chatbot.enabled}
+          className="h-5 w-5 cursor-pointer accent-primary"
+          onChange={(e) => patch({ enabled: e.target.checked })} />
+        Show the chat widget to viewers
+      </label>
+
+      <div>
+        <p className="mb-1 text-sm font-medium text-base-contrast">Audiences</p>
+        <p className="mb-2 text-xs text-base-contrast-light">Who sees the widget — only the selected audiences; none selected means no one.</p>
+        <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
+        {chatbot.audiences.map((name) => (
+          <div key={name} className="mt-2">
+            <label htmlFor={`audience-prompt-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
+              Additional guidance for {name}
+            </label>
+            <textarea id={`audience-prompt-${name}`} aria-label={`Guidance for ${name}`} rows={2} maxLength={8000}
+              value={overlayValue(name)}
+              onChange={(e) => patch({ audiencePrompts: { ...chatbot.audiencePrompts, [name]: e.target.value } })}
+              placeholder={`Only ${name} sees answers shaped by this — safe for ${name}-level info.`}
+              className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+          </div>
+        ))}
+      </div>
+
+      <div>
+        <label htmlFor="chatbot-system-prompt" className="mb-1 block text-sm font-medium text-base-contrast">System prompt</label>
+        <textarea id="chatbot-system-prompt" aria-label="System prompt" rows={5} maxLength={8000}
+          value={chatbot.systemPrompt}
+          onChange={(e) => patch({ systemPrompt: e.target.value })}
+          placeholder="Describe the brand's voice and how the assistant should behave — e.g. “Speak warmly and concisely; always reference our color names, never hex codes.”"
+          className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+        <p className="text-right text-xs text-base-contrast-light">{chatbot.systemPrompt.length}/8000</p>
+      </div>
+
+      <div>
+        <p className="mb-1 text-sm font-medium text-base-contrast">Tasks</p>
+        <p className="mb-2 text-xs text-base-contrast-light">Goal presets shown as a dropdown in the widget. Each task layers its own instructions onto the system prompt.</p>
+        <div className="space-y-3">
+          {chatbot.tasks.map((t, i) => (
+            <div key={t.id} className="rounded border border-base-200 p-2">
+              <div className="mb-1 flex items-center justify-between gap-2">
+                <input aria-label={`Task ${t.id} label`} value={t.label} maxLength={60}
+                  onChange={(e) => patchTask(i, { label: e.target.value })}
+                  className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+                <Button type="button" variant="destructive"
+                  onClick={() => patch({ tasks: chatbot.tasks.filter((_, idx) => idx !== i) })}>
+                  Remove
+                </Button>
+              </div>
+              <textarea aria-label={`Task ${t.id} prompt`} rows={2} maxLength={4000} value={t.prompt}
+                onChange={(e) => patchTask(i, { prompt: e.target.value })}
+                placeholder="Instructions for this task…"
+                className="mb-1 w-full rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+              <AudienceChips audiences={audiences} selected={t.access} onToggle={(n) => patchTask(i, { access: toggleName(t.access, n) })} />
+            </div>
+          ))}
+        </div>
+        <div className="mt-2 flex gap-2">
+          <input aria-label="New task label" value={newTaskLabel} maxLength={60}
+            onChange={(e) => setNewTaskLabel(e.target.value)}
+            placeholder="e.g. Draft a social post"
+            className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+          <Button type="button" onClick={addTask}>Add task</Button>
+        </div>
+      </div>
+
+      <div>
+        <Button type="button" onClick={() => setShowTest((s) => !s)} disabled={!platformEnabled}>
+          {showTest ? "Hide test chat" : "Test with current draft"}
+        </Button>
+        <p className="mt-1 text-xs text-base-contrast-light">
+          Tests your unsaved prompt and tasks. Answers ground on published content.
+        </p>
+        {showTest && platformEnabled && (
+          <label className="mt-2 flex items-center gap-2 text-xs text-base-contrast">
+            Preview as
+            <select aria-label="Preview as" value={previewAudience} onChange={(e) => setPreviewAudience(e.target.value)}
+              className="rounded border border-base-200 bg-base-accent px-1 py-0.5 text-xs">
+              <option value="">Editor (base prompt only)</option>
+              {chatbot.audiences.map((n) => <option key={n} value={n}>{n}</option>)}
+            </select>
+            <span className="text-base-contrast-light">Prompt and task preview only — grounding stays editor-wide.</span>
+          </label>
+        )}
+        {showTest && platformEnabled && (
+          <ChatPanel
+            open onClose={() => setShowTest(false)} siteName={siteConfig.siteName}
+            tasks={chatbot.tasks
+              .filter((t) => previewAudience === "" || audiencePasses(t.access, previewAudience))
+              .map((t) => ({ id: t.id, label: t.label }))}
+            isEditor draftChatbot={chatbot}
+            simulateAudience={previewAudience || undefined}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/shell/SiteSettingsModal.tsx

@@ -5,6 +5,7 @@ import { Tabs } from "../shared/Tabs";
 import { SiteSettingsViewerAccess } from "./SiteSettingsViewerAccess";
 import { SiteSettingsDisplay } from "./SiteSettingsDisplay";
 import { SiteSettingsUsers } from "./SiteSettingsUsers";
+import { SiteSettingsChatbot } from "./SiteSettingsChatbot";
 import type { SiteConfig } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 
@@ -14,6 +15,8 @@ interface Props {
   siteConfig: SiteConfig;
   onSiteConfigChange: (config: SiteConfig) => void;
   onAudiencesChange: (audiences: Audience[]) => void;
+  audiences: Audience[];
+  chatbotPlatformEnabled: boolean;
   capabilities: {
     oauth: boolean;
     emailPassword: boolean;
@@ -25,7 +28,7 @@ interface Props {
   currentUser: { email: string; role: "owner" | "editor" } | null;
 }
 
-export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, capabilities, currentUser }: Props) {
+export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, audiences, chatbotPlatformEnabled, capabilities, currentUser }: Props) {
   const [signOutError, setSignOutError] = useState<string | null>(null);
 
   async function handleSignOut() {
@@ -50,25 +53,30 @@ export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigCha
 
   const allTabs = [
     {
-      id: "users",
-      label: "Users",
-      show: capabilities.userManagement && currentUser?.role === "owner",
+      id: "viewer-access",
+      label: "Audiences",
+      show: true,
       content: (
         <div data-testid="site-settings-tab-panel" className="flex flex-1 flex-col overflow-y-auto px-6 py-4">
-          <SiteSettingsUsers currentUser={currentUser} />
+          <SiteSettingsViewerAccess
+            audienceManagement={capabilities.audienceManagement}
+            passwordToggle={capabilities.passwordToggle}
+            onAudiencesChange={onAudiencesChange}
+          />
         </div>
       ),
     },
     {
-      id: "viewer-access",
-      label: "Viewer Access",
+      id: "chatbot",
+      label: "Chatbot",
       show: true,
       content: (
         <div data-testid="site-settings-tab-panel" className="flex flex-1 flex-col overflow-y-auto px-6 py-4">
-          <SiteSettingsViewerAccess
-            audienceManagement={capabilities.audienceManagement}
-            passwordToggle={capabilities.passwordToggle}
-            onAudiencesChange={onAudiencesChange}
+          <SiteSettingsChatbot
+            siteConfig={siteConfig}
+            onSiteConfigChange={onSiteConfigChange}
+            audiences={audiences}
+            platformEnabled={chatbotPlatformEnabled}
           />
         </div>
       ),
@@ -83,6 +91,16 @@ export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigCha
         </div>
       ),
     },
+    {
+      id: "users",
+      label: "Users",
+      show: capabilities.userManagement && currentUser?.role === "owner",
+      content: (
+        <div data-testid="site-settings-tab-panel" className="flex flex-1 flex-col overflow-y-auto px-6 py-4">
+          <SiteSettingsUsers currentUser={currentUser} />
+        </div>
+      ),
+    },
   ];
 
   const tabItems = allTabs.filter((t) => t.show).map(({ id, label, content }) => ({ id, label, content }));

package/dist/components/shell/ChatbotConfigModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatbotConfigModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/ChatbotConfigModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAA8B,MAAM,2BAA2B,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAsBD,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,KAAK,2CA0JxH"}

package/src/components/shell/ChatbotConfigModal.tsx

@@ -1,193 +0,0 @@
-import { useEffect, useState } from "react";
-import { EditorModal } from "./EditorModal";
-import { Button } from "../shared/Button";
-import { cn } from "../../lib/cn";
-import ChatPanel from "../chat/ChatPanel";
-import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
-import type { Audience } from "../../auth/types";
-import { audiencePasses } from "../../lib/pages";
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  siteConfig: SiteConfig;
-  onSiteConfigChange: (config: SiteConfig) => void;
-  audiences: Audience[];
-  platformEnabled: boolean;
-}
-
-function slugify(label: string): string {
-  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32) || "task";
-}
-
-function AudienceChips({ audiences, selected, onToggle }: { audiences: Audience[]; selected: string[]; onToggle: (name: string) => void }) {
-  return (
-    <div className="flex flex-wrap gap-1">
-      {audiences.map((a) => (
-        <button key={a.name} type="button" onClick={() => onToggle(a.name)}
-          className={cn("rounded-full border px-2 py-0.5 text-xs",
-            selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
-          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color } : undefined}>
-          {a.displayName}
-        </button>
-      ))}
-      {audiences.length === 0 && <span className="text-xs text-base-contrast-light">No audiences configured</span>}
-    </div>
-  );
-}
-
-export function ChatbotConfigModal({ isOpen, onClose, siteConfig, onSiteConfigChange, audiences, platformEnabled }: Props) {
-  const chatbot = siteConfig.chatbot;
-  const [newTaskLabel, setNewTaskLabel] = useState("");
-  const [showTest, setShowTest] = useState(false);
-  const [previewAudience, setPreviewAudience] = useState("");
-
-  // A deselected audience can no longer chat — never keep simulating it.
-  useEffect(() => {
-    if (previewAudience && !chatbot.audiences.includes(previewAudience)) setPreviewAudience("");
-  }, [previewAudience, chatbot.audiences]);
-
-  const patch = (p: Partial<ChatbotConfig>) =>
-    onSiteConfigChange({ ...siteConfig, chatbot: { ...chatbot, ...p } });
-
-  const patchTask = (i: number, p: Partial<ChatbotTask>) =>
-    patch({ tasks: chatbot.tasks.map((t, idx) => (idx === i ? { ...t, ...p } : t)) });
-
-  function addTask() {
-    const label = newTaskLabel.trim();
-    if (!label || chatbot.tasks.length >= 20) return;
-    let id = slugify(label);
-    if (chatbot.tasks.some((t) => t.id === id)) {
-      for (let n = 2; ; n++) {
-        const suffix = `-${n}`;
-        const candidate = `${id.slice(0, 32 - suffix.length)}${suffix}`;
-        if (!chatbot.tasks.some((t) => t.id === candidate)) {
-          id = candidate;
-          break;
-        }
-      }
-    }
-    patch({ tasks: [...chatbot.tasks, { id, label, prompt: "", access: [] }] });
-    setNewTaskLabel("");
-  }
-
-  const toggleName = (list: string[], name: string) =>
-    list.includes(name) ? list.filter((n) => n !== name) : [...list, name];
-
-  // Record lookups can hit inherited Object.prototype members ("constructor"
-  // is a legal audience name) — treat anything non-string as absent.
-  const overlayValue = (name: string) => {
-    const v = chatbot.audiencePrompts[name];
-    return typeof v === "string" ? v : "";
-  };
-
-  return (
-    <EditorModal isOpen={isOpen} onClose={onClose} title="Chatbot" size="settings" noPadding>
-      <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-4">
-        {!platformEnabled && (
-          <div className="rounded border border-base-200 bg-base-accent px-3 py-2 text-sm text-base-contrast">
-            Chat is not enabled for this site — contact Drawn Agency. You can still edit the
-            configuration below; it activates when chat is switched on.
-          </div>
-        )}
-
-        <label className="flex items-center gap-2 text-sm text-base-contrast">
-          <input type="checkbox" aria-label="Enable chatbot" checked={chatbot.enabled}
-            className="h-5 w-5 cursor-pointer accent-primary"
-            onChange={(e) => patch({ enabled: e.target.checked })} />
-          Show the chat widget to viewers
-        </label>
-
-        <div>
-          <p className="mb-1 text-sm font-medium text-base-contrast">Audiences</p>
-          <p className="mb-2 text-xs text-base-contrast-light">Who sees the widget — only the selected audiences; none selected means no one.</p>
-          <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
-          {chatbot.audiences.map((name) => (
-            <div key={name} className="mt-2">
-              <label htmlFor={`audience-prompt-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
-                Additional guidance for {name}
-              </label>
-              <textarea id={`audience-prompt-${name}`} aria-label={`Guidance for ${name}`} rows={2} maxLength={8000}
-                value={overlayValue(name)}
-                onChange={(e) => patch({ audiencePrompts: { ...chatbot.audiencePrompts, [name]: e.target.value } })}
-                placeholder={`Only ${name} sees answers shaped by this — safe for ${name}-level info.`}
-                className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
-            </div>
-          ))}
-        </div>
-
-        <div>
-          <label htmlFor="chatbot-system-prompt" className="mb-1 block text-sm font-medium text-base-contrast">System prompt</label>
-          <textarea id="chatbot-system-prompt" aria-label="System prompt" rows={5} maxLength={8000}
-            value={chatbot.systemPrompt}
-            onChange={(e) => patch({ systemPrompt: e.target.value })}
-            placeholder="Describe the brand's voice and how the assistant should behave — e.g. “Speak warmly and concisely; always reference our color names, never hex codes.”"
-            className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
-          <p className="text-right text-xs text-base-contrast-light">{chatbot.systemPrompt.length}/8000</p>
-        </div>
-
-        <div>
-          <p className="mb-1 text-sm font-medium text-base-contrast">Tasks</p>
-          <p className="mb-2 text-xs text-base-contrast-light">Goal presets shown as a dropdown in the widget. Each task layers its own instructions onto the system prompt.</p>
-          <div className="space-y-3">
-            {chatbot.tasks.map((t, i) => (
-              <div key={t.id} className="rounded border border-base-200 p-2">
-                <div className="mb-1 flex items-center justify-between gap-2">
-                  <input aria-label={`Task ${t.id} label`} value={t.label} maxLength={60}
-                    onChange={(e) => patchTask(i, { label: e.target.value })}
-                    className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
-                  <Button type="button" variant="destructive"
-                    onClick={() => patch({ tasks: chatbot.tasks.filter((_, idx) => idx !== i) })}>
-                    Remove
-                  </Button>
-                </div>
-                <textarea aria-label={`Task ${t.id} prompt`} rows={2} maxLength={4000} value={t.prompt}
-                  onChange={(e) => patchTask(i, { prompt: e.target.value })}
-                  placeholder="Instructions for this task…"
-                  className="mb-1 w-full rounded border border-base-200 bg-base px-2 py-1 text-sm" />
-                <AudienceChips audiences={audiences} selected={t.access} onToggle={(n) => patchTask(i, { access: toggleName(t.access, n) })} />
-              </div>
-            ))}
-          </div>
-          <div className="mt-2 flex gap-2">
-            <input aria-label="New task label" value={newTaskLabel} maxLength={60}
-              onChange={(e) => setNewTaskLabel(e.target.value)}
-              placeholder="e.g. Draft a social post"
-              className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
-            <Button type="button" onClick={addTask}>Add task</Button>
-          </div>
-        </div>
-
-        <div>
-          <Button type="button" onClick={() => setShowTest((s) => !s)} disabled={!platformEnabled}>
-            {showTest ? "Hide test chat" : "Test with current draft"}
-          </Button>
-          <p className="mt-1 text-xs text-base-contrast-light">
-            Tests your unsaved prompt and tasks. Answers ground on published content.
-          </p>
-          {showTest && platformEnabled && (
-            <label className="mt-2 flex items-center gap-2 text-xs text-base-contrast">
-              Preview as
-              <select aria-label="Preview as" value={previewAudience} onChange={(e) => setPreviewAudience(e.target.value)}
-                className="rounded border border-base-200 bg-base-accent px-1 py-0.5 text-xs">
-                <option value="">Editor (base prompt only)</option>
-                {chatbot.audiences.map((n) => <option key={n} value={n}>{n}</option>)}
-              </select>
-              <span className="text-base-contrast-light">Prompt and task preview only — grounding stays editor-wide.</span>
-            </label>
-          )}
-          {showTest && platformEnabled && (
-            <ChatPanel
-              open onClose={() => setShowTest(false)} siteName={siteConfig.siteName}
-              tasks={chatbot.tasks
-                .filter((t) => previewAudience === "" || audiencePasses(t.access, previewAudience))
-                .map((t) => ({ id: t.id, label: t.label }))}
-              isEditor draftChatbot={chatbot}
-              simulateAudience={previewAudience || undefined}
-            />
-          )}
-        </div>
-      </div>
-    </EditorModal>
-  );
-}