@drawnagency/primitives 0.1.66 → 0.1.68

package/src/components/sections/IconList/IconListSettings.tsx

@@ -1,45 +1,89 @@
 import { useState } from "react";
+import { Check, X } from "lucide-react";
 import { Checkbox } from "../../shared/Checkbox";
 import { FormLabel } from "../../shared/FormLabel";
 import { IconPicker } from "../../primitives/IconPicker";
 import { getIcon } from "../../../lib/icons";
+import { cn } from "../../../lib/cn";
 
 export function IconListSettings({
   icon: initialIcon,
   showLabel: initialShowLabel,
   stackText: initialStackText,
+  dodont: initialDodont,
   onChange,
 }: {
   icon: string | null;
   showLabel: boolean;
   stackText: boolean;
+  dodont?: "do" | "dont";
   onChange: (result: { content: Record<string, unknown>; options: Record<string, unknown> }) => void;
 }) {
   const [icon, setIcon] = useState(initialIcon);
   const [showLabel, setShowLabel] = useState(initialShowLabel);
   const [stackText, setStackText] = useState(initialStackText);
+  const [dodont, setDodont] = useState<"do" | "dont" | undefined>(initialDodont);
   const [pickerOpen, setPickerOpen] = useState(false);
 
-  const emit = (overrides: Partial<{ icon: string | null; showLabel: boolean; stackText: boolean }>) =>
-    onChange({ content: {}, options: { icon, showLabel, stackText, ...overrides } });
+  const emit = (
+    overrides: Partial<{ icon: string | null; showLabel: boolean; stackText: boolean; dodont: "do" | "dont" | undefined }>,
+  ) => onChange({ content: {}, options: { icon, showLabel, stackText, dodont, ...overrides } });
 
-  const showIcons = icon !== null;
   const iconEntry = icon ? getIcon(icon) : null;
+  const dodontActive = dodont === "do" || dodont === "dont";
+
+  const tile = (value: "do" | "dont" | undefined, label: string, aria: string, glyph: React.ReactNode, tint: string) => (
+    <button
+      type="button"
+      aria-label={aria}
+      aria-pressed={dodont === value}
+      className={cn(
+        "cursor-pointer flex flex-col items-center gap-1 rounded border py-2 transition-colors",
+        tint,
+        dodont === value ? "border-primary bg-base-accent" : "border-base-200",
+      )}
+      onClick={() => { setDodont(value); emit({ dodont: value }); }}
+    >
+      {glyph}
+      <span className="text-xs font-medium">{label}</span>
+    </button>
+  );
 
   return (
     <div className="space-y-4">
+      <div>
+        <FormLabel>Do / Don't list</FormLabel>
+        <div className="grid grid-cols-3 gap-2">
+          {tile(
+            undefined,
+            "None",
+            "No do/don't",
+            <span className="flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" />,
+            "text-base-contrast-light",
+          )}
+          {tile("do", "Do", "Do list", <Check size={20} />, "text-green-600")}
+          {tile("dont", "Don't", "Don't list", <X size={20} />, "text-red-600")}
+        </div>
+      </div>
+
       <div className="relative">
         <FormLabel htmlFor="icon-picker-btn">Default Icon</FormLabel>
         <div className="flex items-center gap-2">
           <button
             id="icon-picker-btn"
-            className="cursor-pointer flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light hover:border-primary hover:text-primary"
-            onClick={() => setPickerOpen((prev) => !prev)}
+            disabled={dodontActive}
+            className={cn(
+              "flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light",
+              dodontActive
+                ? "cursor-not-allowed opacity-50"
+                : "cursor-pointer hover:border-primary hover:text-primary",
+            )}
+            onClick={() => { if (!dodontActive) setPickerOpen((prev) => !prev); }}
           >
             {iconEntry && <iconEntry.icon size={16} />}
             <span>{iconEntry?.label ?? "None"}</span>
           </button>
-          {icon && (
+          {icon && !dodontActive && (
             <button
               className="cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast"
               onClick={() => { setIcon(null); emit({ icon: null }); }}
@@ -48,15 +92,17 @@ export function IconListSettings({
             </button>
           )}
         </div>
-        {pickerOpen && (
+        {dodontActive && (
+          <p className="mt-1 text-xs text-base-contrast-light/70">
+            Whole-list Do/Don't overrides the default icon.
+          </p>
+        )}
+        {pickerOpen && !dodontActive && (
           <div className="absolute top-full left-0 z-50 mt-1">
             <IconPicker
               selected={icon}
               onSelect={(newIcon) => {
-                if (newIcon !== null) {
-                  setIcon(newIcon);
-                  emit({ icon: newIcon });
-                }
+                if (newIcon !== null) { setIcon(newIcon); emit({ icon: newIcon }); }
                 setPickerOpen(false);
               }}
               onClose={() => setPickerOpen(false)}
@@ -64,6 +110,7 @@ export function IconListSettings({
           </div>
         )}
       </div>
+
       <Checkbox
         checked={showLabel}
         onChange={(v) => { setShowLabel(v); emit({ showLabel: v }); }}

package/src/components/sections/IconList/index.tsx

@@ -1,6 +1,8 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
-import { List } from "lucide-react";
+import { List, Columns2 } from "lucide-react";
+import type { SectionPreset } from "../../../lib/registry";
+import type { SectionContent } from "../../../schemas/sections";
 import IconList from "./IconList";
 import { IconListSettings } from "./IconListSettings";
 import { pluralize } from "../../../lib/text";
@@ -16,27 +18,68 @@ export type IconListItem = z.infer<typeof IconListItemSchema>;
 const schema = z.object({
   type: z.literal("icon_list"),
   content: z.object({
-    items: z.array(IconListItemSchema),
+    items: z
+      .array(IconListItemSchema)
+      .describe(
+        "The list entries. Each item has a label, descriptive text, an optional icon, and an optional do/don't marker.",
+      ),
   }),
-  options: z.object({
-    icon: z.string().nullable().optional(),
-    showLabel: z.boolean().optional(),
-    stackText: z.boolean().optional(),
-  }).optional(),
+  options: z
+    .object({
+      icon: z
+        .string()
+        .nullable()
+        .describe("Default icon name applied to items that don't specify their own; null for no icon.")
+        .optional(),
+      showLabel: z.boolean().describe("When true, render each item's label.").optional(),
+      stackText: z
+        .boolean()
+        .describe("When true, stack the label and text vertically instead of inline.")
+        .optional(),
+      dodont: z
+        .enum(["do", "dont"])
+        .describe("Whole-list do/don't mode: render every item with a green check (do) or red x (don't).")
+        .optional(),
+    })
+    .optional(),
 });
 
+// One-click "Do / Don't list": a 2-column container holding a green-check "Do"
+// icon_list and a red-x "Don't" icon_list, using the whole-list options.dodont
+// default. Same shape the legacy do_dont migration produces. Lives here (brand-guide
+// layer); it reaches the core Add-menu only via SectionDefinition.presets.
+const doDontListPreset: SectionPreset = {
+  id: "do_dont_list",
+  label: "Do / Don't list",
+  icon: <Columns2 size={18} />,
+  build: (newId): SectionContent => ({
+    type: "container",
+    content: {
+      columns: 2,
+      flow: "row",
+      children: [
+        { id: newId(), type: "icon_list", content: { items: [{ label: "", text: "" }] }, options: { dodont: "do" } },
+        { id: newId(), type: "icon_list", content: { items: [{ label: "", text: "" }] }, options: { dodont: "dont" } },
+      ],
+    },
+  }),
+};
+
 export default defineSection({
   type: "icon_list",
   category: "brand-guide",
   label: "Icon List",
   icon: <List size={18} />,
   schema,
+  authoringNote:
+    "A list of labeled items, optionally with per-item icons and do/don't markers. Use for feature lists, guidelines, or do/don't guidance.",
   component: ({ content, options, onChange }) => (
     <IconList
       items={content.content.items}
       icon={options?.icon as string | null}
       showLabel={options?.showLabel as boolean}
       stackText={options?.stackText as boolean}
+      dodont={options?.dodont as "do" | "dont" | undefined}
       onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
     />
   ),
@@ -46,4 +89,5 @@ export default defineSection({
   }),
   getLabel: (content) => pluralize(content.content.items.length, "icon"),
   settingsForm: IconListSettings,
+  presets: [doDontListPreset],
 });

package/src/components/sections/LinkHeading/index.tsx

@@ -9,4 +9,6 @@ export default defineHeadingSection({
   tag: "h2",
   placeholder: "Section heading",
   defaultHeading: "New Section",
+  authoringNote:
+    "A top-level section heading (renders an <h2>, reported to navigation as h1). Use it to begin a major named section of the guide; its text becomes a navigation entry.",
 });

package/src/components/sections/Media/index.tsx

@@ -8,15 +8,22 @@ import { MediaBlock } from "./MediaBlock";
 const schema = z.object({
   type: z.literal("media"),
   content: z.object({
-    ref: SingleMediaReferenceSchema,
-    link: LinkValueSchema.optional(),
+    ref: SingleMediaReferenceSchema.describe(
+      "The image or video asset to display (a media reference by id). Required.",
+    ),
+    link: LinkValueSchema.describe(
+      "Optional link wrapping the media — an internal page or a safe external URL.",
+    ).optional(),
   }),
   options: z
     .object({
-      square: z.boolean().optional(),
-      showCaption: z.boolean().optional(),
-      border: z.boolean().optional(),
-      objectFit: z.enum(["cover", "contain"]).optional(),
+      square: z.boolean().describe("When true, crop the media to a 1:1 square aspect ratio.").optional(),
+      showCaption: z.boolean().describe("When true, render the asset's caption beneath it.").optional(),
+      border: z.boolean().describe("When true, draw a border around the media.").optional(),
+      objectFit: z
+        .enum(["cover", "contain"])
+        .describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop).")
+        .optional(),
     })
     .default({}),
 });
@@ -26,6 +33,8 @@ export default defineSection({
   label: "Media",
   icon: <ImageIcon size={18} />,
   schema,
+  authoringNote:
+    "A single image or video with optional caption and link. Use to show one asset; for several assets side by side, place multiple Media blocks inside a Container.",
   component: ({ content, options, onChange }) => (
     <MediaBlock
       refValue={content.content.ref}

package/src/components/sections/Prose/index.tsx

@@ -6,7 +6,13 @@ import { stripHtmlToPlainText, truncate } from "../../../lib/text";
 
 const schema = z.object({
   type: z.literal("prose"),
-  content: z.object({ body: z.string() }),
+  content: z.object({
+    body: z
+      .string()
+      .describe(
+        "Rich-text HTML for the paragraph block. Author with the editor; stored as sanitized HTML.",
+      ),
+  }),
 });
 
 export default defineSection({
@@ -14,6 +20,8 @@ export default defineSection({
   label: "Prose",
   icon: <AlignLeft size={18} />,
   schema,
+  authoringNote:
+    "A block of rich-text body copy (paragraphs, lists, inline emphasis, links). Use for any explanatory prose; author with the editor, not raw HTML.",
   richTextFields: ["body"],
   component: ({ content, onChange }) => (
     <Prose body={content.content.body} onChange={onChange ? (c) => onChange(c as typeof content) : undefined} />

package/src/components/sections/Spacer/index.tsx

@@ -13,6 +13,8 @@ export default defineSection({
   label: "Spacer",
   icon: <SquareDashed size={18} />,
   schema,
+  authoringNote:
+    "Vertical whitespace between sections. Use sparingly to add breathing room where default section spacing is insufficient.",
   component: () => <Spacer />,
   defaults: () => ({ type: "spacer" as const, content: {} }),
 });

package/src/components/sections/SubHeading/index.tsx

@@ -10,4 +10,6 @@ export default defineHeadingSection({
   placeholder: "Sub heading",
   defaultHeading: "New Sub Heading",
   navExclusion: true,
+  authoringNote:
+    "A second-level heading (renders <h3>, nav level h2). Use under a Link Heading to divide a section; toggle Exclude from navigation to keep it out of the nav tree.",
 });

package/src/components/sections/SubSubHeading/index.tsx

@@ -10,4 +10,6 @@ export default defineHeadingSection({
   placeholder: "Sub sub heading",
   defaultHeading: "New Sub Sub Heading",
   navExclusion: true,
+  authoringNote:
+    "A third-level heading (renders <h4>, nav level h3). Use for the finest-grained labeled subsection; toggle Exclude from navigation to omit it from the nav tree.",
 });

package/src/components/shell/ChatbotConfigModal.tsx

@@ -0,0 +1,152 @@
+import { 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";
+
+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 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];
+
+  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}
+            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. None selected = all audiences.</p>
+          <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
+        </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 && (
+            <ChatPanel
+              open onClose={() => setShowTest(false)} siteName={siteConfig.siteName}
+              tasks={chatbot.tasks.map((t) => ({ id: t.id, label: t.label }))}
+              isEditor draftChatbot={chatbot}
+            />
+          )}
+        </div>
+      </div>
+    </EditorModal>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -19,6 +19,7 @@ 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 { MediaLibraryModal } from "./MediaLibraryModal";
 import { MediaLibraryContext } from "./MediaLibraryContext";
 import { ProcessingIndicator } from "./ProcessingIndicator";
@@ -27,6 +28,7 @@ import { SectionTypePicker } from "./SectionTypePicker";
 import { ensureSectionsRegistered } from "../sections/register";
 import { getSection, getAllSections } from "../../lib/registry";
 import { childInsertableTypes, insertChildAt } from "../../lib/container-ops";
+import { buildInsertMenuOptions, resolveInsertedContent } from "../../lib/insert-menu";
 
 ensureSectionsRegistered();
 import { BugReportFAB } from "./BugReportFAB";
@@ -71,7 +73,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, X } from "lucide-react";
+import { ImageIcon, ListOrderedIcon, FilesIcon, MessageCircleIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
@@ -103,6 +105,10 @@ interface Props {
     passwordToggle: boolean;
   };
   currentUser: { email: string; role: "owner" | "editor" } | null;
+  // Whether the platform (admin) has enabled the chatbot for this site.
+  // Controls the configurator's banner + test panel; the config UI itself
+  // always works so editors can prepare before activation.
+  chatbotPlatformEnabled?: boolean;
 }
 
 export default function EditorShell({
@@ -112,6 +118,7 @@ export default function EditorShell({
   audiences: initialAudiences,
   capabilities,
   currentUser,
+  chatbotPlatformEnabled = false,
 }: Props) {
   const [shellState, setShellState] = useState<ShellState>({ phase: "loading-content" });
   const [sections, setSections] = useState<LoadedSection[]>([]);
@@ -142,6 +149,7 @@ 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 [isRestoring, setIsRestoring] = useState(false);
   const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
   const [activePageId, setActivePageId] = useState<string | null>(null);
@@ -591,13 +599,16 @@ export default function EditorShell({
   );
 
   const onAddSection = useCallback(
-    (insertIndex: number, type: string) => {
-      const definition = getSection(type);
-      if (!definition || !resolvedActivePage) return;
-      const id = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
-        ? crypto.randomUUID() : `_id_${Date.now()}_${Math.random().toString(36).slice(2)}`;
-      const content = definition.defaults() as object;
-      const meta = { type, status: "draft" as const, access: [] as string[] };
+    (insertIndex: number, selection: string) => {
+      if (!resolvedActivePage) return;
+      const newId = () =>
+        typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+          ? crypto.randomUUID()
+          : `_id_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      const content = resolveInsertedContent(selection, getAllSections(), newId);
+      if (!content) return;
+      const id = newId();
+      const meta = { type: content.type, status: "draft" as const, access: [] as string[] };
       const newSection: LoadedSection = { section: { id, ...content } as LoadedSection["section"], meta };
 
       setSections((prev) => [...prev, newSection]);
@@ -883,6 +894,7 @@ export default function EditorShell({
             onRestoreClick={() => setShowRestoreModal(true)}
             onOrderingClick={() => setShowOrderingModal(true)}
             onPagesClick={() => setShowPagesModal(true)}
+            onChatbotClick={() => setShowChatbotConfig(true)}
           />
 
           {/* Bug reports persist via Supabase. On the password-only (zero-Supabase)
@@ -933,6 +945,16 @@ export default function EditorShell({
             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)}
@@ -1189,7 +1211,7 @@ function EditorContent({
   dirtySectionIds: Set<string>;
   isPublishing: boolean;
   onSectionChange: (sectionId: string, content: SectionContent) => void;
-  onAddSection: (insertIndex: number, type: string) => void;
+  onAddSection: (insertIndex: number, selection: string) => void;
   onDeleteSection: (sectionId: string) => void;
   onReorderSections: (fromIndex: number, toIndex: number) => void;
   onBlockMove: (move: BlockMove) => void;
@@ -1205,17 +1227,7 @@ function EditorContent({
   const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null);
   const dismissPendingInsert = useCallback(() => setPendingInsertIndex(null), []);
 
-  const typeOptions = useMemo(
-    () =>
-      getAllSections()
-        .filter((def) => def.type !== "spacer")
-        .map((def) => ({
-          type: def.type,
-          label: def.label,
-          icon: def.icon,
-        })),
-    [],
-  );
+  const typeOptions = useMemo(() => buildInsertMenuOptions(getAllSections()), []);
 
   const editingEnabled = isEditMode && !isPublishing;
 
@@ -1528,6 +1540,7 @@ function EditorToolbar({
   onRestoreClick,
   onOrderingClick,
   onPagesClick,
+  onChatbotClick,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -1546,6 +1559,7 @@ function EditorToolbar({
   onRestoreClick: () => void;
   onOrderingClick: () => void;
   onPagesClick: () => void;
+  onChatbotClick: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState } = useEditorContext();
 
@@ -1631,6 +1645,13 @@ function EditorToolbar({
                 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"

package/src/lib/index.ts

@@ -1,5 +1,6 @@
 export { env } from "./env";
 export { cn } from "./cn";
+export { audiencePasses } from "./pages";
 export { generateNavLinks, toSectionId, type NavItem } from "./nav";
 export { deriveContrast } from "./contrast";
 export { sanitizeHtml, ensureSanitizer } from "./sanitize";