@drawnagency/primitives 0.1.88 → 0.1.90

package/dist/{chunk-H2FENAQH.js → chunk-ZLG7S54V.js}

@@ -3,23 +3,25 @@ import {
   pluralize,
   stripHtmlToPlainText,
   truncate
-} from "./chunk-SK6GGTTO.js";
+} from "./chunk-XUIJHYKI.js";
 import {
   DeleteButton,
   DragHandle,
+  Kbd,
   Popover,
   PopoverItem,
   SettingsButton,
   SettingsForm,
+  Tooltip,
   buildBlockDragData,
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "./chunk-XDG2K6UT.js";
+} from "./chunk-SIYQ37QY.js";
 import {
   EditableRichText,
   defineHeadingSection
-} from "./chunk-PTVY3Q7P.js";
+} from "./chunk-KBQNJZUX.js";
 import {
   EditablePlainText,
   ImageDropZone,
@@ -27,12 +29,13 @@ import {
   MediaBlock,
   colSpanClass,
   containerGridClass,
+  masonryColumnsClass,
   spacerHiddenClass
-} from "./chunk-NEDOJHHR.js";
+} from "./chunk-XKRQMTE4.js";
 import {
   useMediaLibrary,
   useResolvedMedia
-} from "./chunk-EO7K45GV.js";
+} from "./chunk-NV4R6VHN.js";
 import {
   embedUrl
 } from "./chunk-Y4JQGO6G.js";
@@ -51,7 +54,7 @@ import {
 } from "./chunk-TZQPOR5A.js";
 import {
   SingleMediaReferenceSchema
-} from "./chunk-XPUBUR64.js";
+} from "./chunk-KMQZYORS.js";
 import {
   defineSection,
   getSection
@@ -483,14 +486,17 @@ import { CopyPlus } from "lucide-react";
 // src/components/editor/ColSpanControl.tsx
 import { useRef, useState } from "react";
 import { Columns3 } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 function ColSpanControl({ colSpan, columns, onChange }) {
   const buttonRef = useRef(null);
   const [open, setOpen] = useState(false);
   if (columns <= 1) return null;
   const current = Math.min(Math.max(colSpan, 1), columns);
   return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx11(Tooltip, { side: "right", content: /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx11(Kbd, { children: "Set" }),
+      " column span"
+    ] }), children: /* @__PURE__ */ jsx11(
       "button",
       {
         ref: buttonRef,
@@ -502,7 +508,7 @@ function ColSpanControl({ colSpan, columns, onChange }) {
         className: "pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded p-1 text-xs text-base-contrast-light hover:text-primary",
         children: /* @__PURE__ */ jsx11(Columns3, { size: 14 })
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx11(Popover, { isOpen: open, onClose: () => setOpen(false), anchorRef: buttonRef, className: "min-w-28", children: /* @__PURE__ */ jsx11("ul", { role: "list", className: "py-1", children: Array.from({ length: columns }, (_, i) => i + 1).map((span) => /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsxs3(
       PopoverItem,
       {
@@ -522,7 +528,7 @@ function ColSpanControl({ colSpan, columns, onChange }) {
 }
 
 // src/components/editor/ChildBlockWrapper.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var ChildBlockWrapper = forwardRef(
   function ChildBlockWrapper2({
     label,
@@ -559,10 +565,16 @@ var ChildBlockWrapper = forwardRef(
               ),
               children: [
                 /* @__PURE__ */ jsx12("span", { className: "sr-only", children: label }),
-                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DragHandle, { ref: dragHandleRef }) }),
+                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DragHandle, { ref: dragHandleRef, tooltipSide: "right" }) }),
                 /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(ColSpanControl, { colSpan, columns, onChange: onColSpanChange }) }),
-                hasSettings && onOpenSettings && /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(SettingsButton, { onClick: onOpenSettings }) }),
-                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(
+                hasSettings && onOpenSettings && /* @__PURE__ */ jsx12(Tooltip, { side: "right", className: "pointer-events-auto", content: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx12(Kbd, { children: "Edit" }),
+                  " settings"
+                ] }), children: /* @__PURE__ */ jsx12(SettingsButton, { onClick: onOpenSettings }) }),
+                /* @__PURE__ */ jsx12(Tooltip, { side: "right", className: "pointer-events-auto", content: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx12(Kbd, { children: "Duplicate" }),
+                  " block"
+                ] }), children: /* @__PURE__ */ jsx12(
                   "button",
                   {
                     type: "button",
@@ -572,7 +584,10 @@ var ChildBlockWrapper = forwardRef(
                     children: /* @__PURE__ */ jsx12(CopyPlus, { size: 16 })
                   }
                 ) }),
-                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DeleteButton, { onDelete }) })
+                /* @__PURE__ */ jsx12(Tooltip, { side: "right", className: "pointer-events-auto", content: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx12(Kbd, { children: "Delete" }),
+                  " block"
+                ] }), children: /* @__PURE__ */ jsx12(DeleteButton, { onDelete }) })
               ]
             }
           ),
@@ -769,7 +784,6 @@ function ContainerChild({
   index,
   child,
   columns,
-  flow,
   cellClass,
   label,
   hasSettings,
@@ -782,7 +796,8 @@ function ContainerChild({
   onColSpanChange,
   onOpenSettings,
   onChildContentChange,
-  openModal
+  openModal,
+  allowedEdges = ROW_EDGES
 }) {
   const isContainer = Array.isArray(child.content?.children);
   const { dragRef, handleRef, closestEdge, isDragging } = useBlockDnd({
@@ -790,7 +805,7 @@ function ContainerChild({
     containerId,
     index,
     isContainer,
-    allowedEdges: flow === "column" ? COL_EDGES : ROW_EDGES,
+    allowedEdges,
     enabled: true
   });
   return /* @__PURE__ */ jsx13(
@@ -858,11 +873,37 @@ function EmptyColumnCell({
     }
   );
 }
+function MasonryDropZone({
+  containerId,
+  index,
+  testId
+}) {
+  const { dropRef, closestEdge } = useBlockDropZone({
+    containerId,
+    index,
+    allowedEdges: COL_EDGES,
+    enabled: true
+  });
+  const active = closestEdge !== null;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref: dropRef,
+      "data-masonry-dropzone": true,
+      "data-testid": testId,
+      className: cn(
+        "mb-8 flex min-h-20 items-center justify-center rounded-md border-2 border-dashed break-inside-avoid text-xs text-base-contrast-light/50",
+        active ? "border-primary" : "border-base-200"
+      ),
+      children: index === 0 ? "Empty container \u2014 drag items here or use the + button" : "Drop here to add"
+    }
+  );
+}
 function newId() {
   return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `child-${Math.random().toString(36).slice(2)}-${Date.now()}`;
 }
 function Container({ content, isEditMode, onChange, openModal }) {
-  const { columns, flow, childDefaults, children } = content.content;
+  const { layout, columns, equalizeRowHeight, childDefaults, children } = content.content;
   const editable = isEditMode && !!onChange;
   const container = {
     id: content.id ?? "container",
@@ -883,8 +924,104 @@ function Container({ content, isEditMode, onChange, openModal }) {
     "grid",
     "gap-8",
     containerGridClass[columns] ?? "grid-cols-1",
-    flow === "column" && "grid-flow-col"
+    equalizeRowHeight && "items-stretch"
   );
+  const cellStretch = equalizeRowHeight ? "h-full [&>*]:h-full" : void 0;
+  function buildOnOpenSettings(child, index) {
+    const def = getSection(child.type);
+    if (!def) return void 0;
+    const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
+    if (!hasSettings || !openModal) return void 0;
+    const childOptions = "options" in child ? child.options : void 0;
+    return () => {
+      const childOpts = childOptions ?? {};
+      const childContent = child.content ?? {};
+      const seed = { ...childContent, ...childOpts };
+      const applyResult = (result) => updateChild(index, {
+        ...child,
+        content: { ...child.content, ...result.content },
+        options: { ...childOpts, ...result.options }
+      });
+      if (def.settingsForm) {
+        const CustomForm = def.settingsForm;
+        openModal(`${def.label} Settings`, /* @__PURE__ */ jsx13(CustomForm, { ...seed, onChange: applyResult }));
+      } else if (def.settings) {
+        openModal(
+          `${def.label} Settings`,
+          /* @__PURE__ */ jsx13(
+            SettingsForm,
+            {
+              schema: def.settings,
+              values: seed,
+              onChange: applyResult,
+              tabs: def.settingsTabs
+            }
+          )
+        );
+      }
+    };
+  }
+  if (layout === "masonry") {
+    const laidOut = children.map((child, index) => ({ child, index })).filter(({ child }) => !isSpacer(child));
+    const masonryClass = cn("gap-8", masonryColumnsClass[columns] ?? "columns-1");
+    if (!editable) {
+      if (laidOut.length === 0) return null;
+      return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsx13("div", { "data-masonry": true, className: masonryClass, children: laidOut.map(({ child, index }) => {
+        const def = getSection(child.type);
+        if (!def) return null;
+        const Child = def.component;
+        const childOptions = "options" in child ? child.options : void 0;
+        const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
+        return /* @__PURE__ */ jsx13(
+          "div",
+          {
+            "data-masonry-box": true,
+            "data-child-index": index,
+            className: "mb-8 break-inside-avoid",
+            children: /* @__PURE__ */ jsx13(Child, { content: child, options: mergedOptions, isEditMode })
+          },
+          child.id ?? index
+        );
+      }) }) });
+    }
+    if (laidOut.length === 0) {
+      return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsx13("div", { "data-masonry": true, className: masonryClass, children: /* @__PURE__ */ jsx13(MasonryDropZone, { containerId: container.id, index: 0, testId: "masonry-empty" }) }) });
+    }
+    return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsxs5("div", { "data-masonry": true, className: masonryClass, children: [
+      laidOut.map(({ child, index }, k) => {
+        const def = getSection(child.type);
+        if (!def) return null;
+        const childOptions = "options" in child ? child.options : void 0;
+        const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
+        const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
+        return /* @__PURE__ */ jsx13("div", { "data-masonry-box": true, className: "mb-8 break-inside-avoid", children: /* @__PURE__ */ jsx13(
+          ContainerChild,
+          {
+            containerId: container.id,
+            index,
+            child,
+            columns: 1,
+            cellClass: void 0,
+            label: def.label,
+            hasSettings,
+            mergedOptions,
+            isEditMode,
+            clearSectionChrome: k === 0,
+            ChildComp: def.component,
+            onDelete: () => emit(removeChildAt(container, index).container),
+            onDuplicate: () => emit(duplicateChildAt(container, index, newId)),
+            onColSpanChange: () => {
+            },
+            onOpenSettings: buildOnOpenSettings(child, index),
+            onChildContentChange: (c) => updateChild(index, c),
+            openModal,
+            allowedEdges: COL_EDGES
+          }
+        ) }, child.id ?? index);
+      }),
+      /* @__PURE__ */ jsx13(MasonryDropZone, { containerId: container.id, index: children.length, testId: "masonry-append" })
+    ] }) });
+  }
   if (!editable) {
     return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsx13("div", { className: gridClass, children: children.map((child, index) => {
       const def = getSection(child.type);
@@ -895,7 +1032,8 @@ function Container({ content, isEditMode, onChange, openModal }) {
       const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
       const cellClass = cn(
         colSpanClass[columns]?.[Math.min(span, columns)] || void 0,
-        child.type === "spacer" && spacerHiddenClass[columns]
+        child.type === "spacer" && spacerHiddenClass[columns],
+        cellStretch
       );
       return /* @__PURE__ */ jsx13("div", { className: cellClass, children: /* @__PURE__ */ jsx13(Child, { content: child, options: mergedOptions, isEditMode }) }, child.id ?? index);
     }) }) });
@@ -924,38 +1062,12 @@ function Container({ content, isEditMode, onChange, openModal }) {
     const span = child.layout?.colSpan ?? 1;
     const childOptions = "options" in child ? child.options : void 0;
     const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
-    const cellClass = colSpanClass[columns]?.[Math.min(span, columns)] || void 0;
+    const cellClass = cn(
+      colSpanClass[columns]?.[Math.min(span, columns)] || void 0,
+      cellStretch
+    );
     const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
-    const onOpenSettings = hasSettings && openModal ? () => {
-      const childOpts = childOptions ?? {};
-      const childContent = child.content ?? {};
-      const seed = { ...childContent, ...childOpts };
-      const applyResult = (result) => updateChild(index, {
-        ...child,
-        content: { ...child.content, ...result.content },
-        options: { ...childOpts, ...result.options }
-      });
-      if (def.settingsForm) {
-        const CustomForm = def.settingsForm;
-        openModal(
-          `${def.label} Settings`,
-          /* @__PURE__ */ jsx13(CustomForm, { ...seed, onChange: applyResult })
-        );
-      } else if (def.settings) {
-        openModal(
-          `${def.label} Settings`,
-          /* @__PURE__ */ jsx13(
-            SettingsForm,
-            {
-              schema: def.settings,
-              values: seed,
-              onChange: applyResult,
-              tabs: def.settingsTabs
-            }
-          )
-        );
-      }
-    } : void 0;
+    const onOpenSettings = buildOnOpenSettings(child, index);
     return /* @__PURE__ */ jsx13(
       ContainerChild,
       {
@@ -963,7 +1075,6 @@ function Container({ content, isEditMode, onChange, openModal }) {
         index,
         child,
         columns,
-        flow,
         cellClass,
         label: def.label,
         hasSettings,
@@ -1014,12 +1125,17 @@ function inheritableSchema(children) {
 }
 function ContainerSettingsForm({
   columns = 1,
-  flow = "row",
+  layout: layoutProp = "grid",
+  equalizeRowHeight = false,
   childDefaults = {},
   children = [],
   onChange
 }) {
-  const [layout, setLayout] = useState3({ columns, flow });
+  const [layout, setLayout] = useState3({
+    layout: layoutProp,
+    columns,
+    equalizeRowHeight
+  });
   const [defaults, setDefaults] = useState3(childDefaults);
   const childSchema = inheritableSchema(children);
   const hasChildDefaults = Object.keys(childSchema).length > 0;
@@ -1027,27 +1143,41 @@ function ContainerSettingsForm({
     onChange({ content: { ...nextLayout, childDefaults: nextDefaults }, options: {} });
   }
   const layoutSchema = {
+    layout: {
+      type: "select",
+      label: "Layout",
+      default: layout.layout,
+      target: "content",
+      options: [
+        { label: "Grid", value: "grid" },
+        { label: "Masonry (image gallery)", value: "masonry" }
+      ]
+    },
     columns: {
       type: "select",
       label: "Columns",
       default: String(layout.columns),
       target: "content",
       coerce: "number",
-      options: Array.from({ length: MAX_CONTAINER_COLUMNS }, (_, i) => ({
-        label: String(i + 1),
-        value: String(i + 1)
-      }))
+      // Masonry's CSS multi-column flow needs at least 2 columns to read as a
+      // gallery (1 column would just be a plain stack, same as grid), so floor
+      // the options at 2 there; grid still allows 1 (a single-column stack).
+      options: Array.from(
+        { length: layout.layout === "masonry" ? MAX_CONTAINER_COLUMNS - 1 : MAX_CONTAINER_COLUMNS },
+        (_, i) => {
+          const n = layout.layout === "masonry" ? i + 2 : i + 1;
+          return { label: String(n), value: String(n) };
+        }
+      )
     },
-    flow: {
-      type: "select",
-      label: "Flow",
-      default: layout.flow,
-      target: "content",
-      options: [
-        { label: "Rows (wrap across)", value: "row" },
-        { label: "Columns (fill down)", value: "column" }
-      ]
-    }
+    ...layout.layout === "grid" ? {
+      equalizeRowHeight: {
+        type: "checkbox",
+        label: "Equalize row height",
+        default: layout.equalizeRowHeight,
+        target: "content"
+      }
+    } : {}
   };
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ jsxs6("fieldset", { className: "flex flex-col gap-4", children: [
@@ -1056,16 +1186,23 @@ function ContainerSettingsForm({
         SettingsForm,
         {
           schema: layoutSchema,
-          values: { columns: String(layout.columns), flow: layout.flow },
+          values: {
+            layout: layout.layout,
+            columns: String(layout.columns),
+            equalizeRowHeight: layout.equalizeRowHeight
+          },
           onChange: (result) => {
             const next = {
+              layout: result.content.layout ?? layout.layout,
               columns: Number(result.content.columns ?? layout.columns),
-              flow: String(result.content.flow ?? layout.flow)
+              equalizeRowHeight: result.content.equalizeRowHeight ?? layout.equalizeRowHeight
             };
+            if (next.layout === "masonry" && next.columns < 2) next.columns = 2;
             setLayout(next);
             emit(next, defaults);
           }
-        }
+        },
+        layout.layout
       )
     ] }),
     hasChildDefaults && /* @__PURE__ */ jsxs6("fieldset", { className: "flex flex-col gap-4 border-t border-base-200 pt-4", children: [
@@ -1091,33 +1228,55 @@ import { jsx as jsx15 } from "react/jsx-runtime";
 var schema5 = z5.object({
   type: z5.literal("container"),
   content: z5.object({
-    columns: z5.number().int().min(1).max(MAX_CONTAINER_COLUMNS).describe("Number of columns in the grid. Children flow across this many columns.").default(1),
-    flow: z5.enum(["row", "column"]).describe(
-      "Layout direction: 'row' (children flow left-to-right across columns) or 'column' (stacked)."
-    ).default("row"),
+    layout: z5.enum(["grid", "masonry"]).describe(
+      "Layout engine: 'grid' arranges children in fixed columns with per-child column spans; 'masonry' flows children through a CSS multi-column gallery at their natural height (no column spans)."
+    ).default("grid"),
+    columns: z5.number().int().min(1).max(MAX_CONTAINER_COLUMNS).describe(
+      "Grid: number of columns children flow across. Masonry: number of CSS multi-columns children flow through."
+    ).default(1),
+    equalizeRowHeight: z5.boolean().describe(
+      "Grid only: stretch every child to the height of the tallest child in its row (best-effort \u2014 applies to children whose root element can stretch, e.g. media/cards). Ignored in masonry."
+    ).default(false),
     childDefaults: z5.record(z5.string(), z5.unknown()).describe("Optional default option values applied to child sections (inheritable settings only).").optional(),
     // Recursive: children are full blocks. z.lazy defers evaluation to parse
     // time, by which point every section schema (incl. container) is registered.
     children: z5.array(z5.lazy(() => getSectionSchema())).default([])
-  }).transform((c) => ({
-    ...c,
-    children: c.children.map(
-      (child) => child.layout?.colSpan && child.layout.colSpan > c.columns ? { ...child, layout: { ...child.layout, colSpan: c.columns } } : child
-    )
-  }))
+  }).transform((c) => {
+    if (c.layout === "masonry") {
+      return {
+        ...c,
+        children: c.children.map((child) => {
+          if (child.layout === void 0) return child;
+          const { layout: _drop, ...rest } = child;
+          return rest;
+        })
+      };
+    }
+    return {
+      ...c,
+      children: c.children.map(
+        (child) => child.layout?.colSpan && child.layout.colSpan > c.columns ? { ...child, layout: { ...child.layout, colSpan: c.columns } } : child
+      )
+    };
+  })
 });
 var Container_default = defineSection({
   type: "container",
   label: "Container",
   icon: /* @__PURE__ */ jsx15(LayoutTemplate, { size: 18 }),
   schema: schema5,
-  authoringNote: "A layout wrapper that arranges child sections into columns/rows. Use to place blocks side by side or build multi-column layouts; set columns and add children.",
+  authoringNote: "A layout wrapper for child sections. 'grid' arranges children into a fixed number of columns (each child can span multiple columns) with an optional equal-row-height toggle; 'masonry' flows children through a CSS multi-column gallery at their natural height (no column spans). Set layout, columns, and add children.",
   component: ({ content, onChange, isEditMode, openModal }) => /* @__PURE__ */ jsx15(Container, { content, isEditMode: !!isEditMode, onChange, openModal }),
   defaults: () => ({
     type: "container",
-    content: { columns: 1, flow: "row", children: [] }
+    content: { layout: "grid", columns: 1, equalizeRowHeight: false, children: [] }
   }),
   getLabel: (content) => `Container (${pluralize(content.content.children.length, "item")})`,
+  // Aggregate child thumbnails so the reorder-sections modal shows a stacked media
+  // preview for a container (restores the retired media_grid preview). Each child is a
+  // full section block; delegate to its own type's getThumbnails. The modal caps the
+  // stack at 3 + a "+N" badge and resolves each imageId → src itself.
+  getThumbnails: (content) => content.content.children.flatMap((child) => getSection(child.type)?.getThumbnails?.(child) ?? []),
   settingsForm: ContainerSettingsForm
 });
 

package/dist/components/chat/ChatPanel.d.ts

@@ -2,6 +2,11 @@ export interface ChatMessage {
     role: "user" | "assistant";
     content: string;
 }
+/** How the conversation is framed on screen:
+ *  - "floating": the compact anchored panel (/edit FAB + settings test chat)
+ *  - "docked":   full-height right sidebar (viewer, >=768px)
+ *  - "sheet":    bottom sheet (viewer, phones) */
+export type ChatPanelMode = "floating" | "docked" | "sheet";
 /** Assistant markdown → sanitized HTML. Callers MUST gate on the sanitizer
  *  having loaded (`mdReady`) — before then sanitizeHtml passes raw HTML
  *  through, and model output is untrusted. Exported for tests. */
@@ -13,7 +18,7 @@ export declare function streamChat(body: {
     taskId?: string;
     draftChatbot?: unknown;
     simulateAudience?: string;
-}, onText: (text: string) => void): Promise<{
+}, onText: (text: string) => void, signal?: AbortSignal): Promise<{
     ok: true;
     truncated: boolean;
 } | {
@@ -21,10 +26,14 @@ export declare function streamChat(body: {
     error: string;
     retryAfterMs?: number;
 }>;
-export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot, simulateAudience, variant }: {
+export default function ChatPanel({ open, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant, mode, focusComposer, audience }: {
     open: boolean;
     onClose: () => void;
     siteName: string;
+    /** Resolved assistant display name (per-audience, server-side). */
+    botName: string;
+    /** Raw configured phrases; "…" appending + fallback happen here. */
+    thinkingPhrases?: string[];
     tasks: {
         id: string;
         label: string;
@@ -34,7 +43,15 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
     draftChatbot?: unknown;
     /** Configurator test panel only: preview this audience's prompt overlay. */
     simulateAudience?: string;
-    /** Anchors the panel above its launcher: viewer corner FAB vs /edit FAB column. */
+    /** Floating mode only — anchors the panel above its launcher: viewer corner
+     *  FAB vs /edit FAB column. */
     variant?: "viewer" | "editor";
+    mode?: ChatPanelMode;
+    /** Focus the composer when opened (explicit user open on desktop). Never
+     *  used for the sheet — autofocusing there pops the keyboard over content. */
+    focusComposer?: boolean;
+    /** Viewer's audience (null for editor sessions) — tags history entries so
+     *  the list never shows another audience's transcripts. */
+    audience?: string | null;
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ChatPanel.d.ts.map

package/dist/components/chat/ChatPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AAoB5E;;kEAEkE;AAClE,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEhD;AAcD,8EAA8E;AAC9E,wBAAsB,UAAU,CAC9B,IAAI,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,EACxH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAC7B,OAAO,CAAC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAyCjG;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAkB,EAAE,EAAE;IAClI,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mFAAmF;IACnF,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B,kDA8JA"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AAE5E;;;kDAGkD;AAClD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AA8C5D;;kEAEkE;AAClE,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEhD;AAcD,8EAA8E;AAC9E,wBAAsB,UAAU,CAC9B,IAAI,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,EACxH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAC9B,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CA6CjG;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAkB,EAAE,IAAiB,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE;IACxM,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;mCAC+B;IAC/B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;kFAC8E;IAC9E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;+DAC2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,kDA8dA"}

package/dist/components/chat/ChatWidget.d.ts

@@ -1,5 +1,9 @@
 export interface ChatWidgetProps {
     siteName: string;
+    /** Resolved assistant display name (per-audience, resolved server-side). */
+    botName: string;
+    /** Configured waiting phrases ("…" appended in the panel). */
+    thinkingPhrases?: string[];
     /** Already audience-filtered server-side — never pass unfiltered config tasks. */
     tasks: {
         id: string;
@@ -9,6 +13,8 @@ export interface ChatWidgetProps {
     /** Editor-only: chat against the current (unsaved) chatbot config. */
     draftChatbot?: unknown;
     variant?: "viewer" | "editor";
+    /** Viewer's audience (null for editor sessions) — tags local chat history. */
+    audience?: string | null;
 }
-export default function ChatWidget({ siteName, tasks, isEditor, draftChatbot, variant }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
+export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, variant, audience }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatWidget.d.ts.map

package/dist/components/chat/ChatWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWidget.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAkB,EAAE,EAAE,eAAe,2CA2ClH"}
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWidget.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,kFAAkF;IAClF,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAkB,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAyFtJ"}

package/dist/components/chat/chat-history.d.ts

@@ -0,0 +1,24 @@
+import type { ChatMessage } from "./ChatPanel";
+export declare const HISTORY_RETENTION_DAYS = 30;
+export declare const HISTORY_MAX_UNPINNED = 20;
+export interface StoredConversation {
+    id: string;
+    title: string;
+    /** Audience tag ("editor" for editor sessions on viewer pages). */
+    audience: string;
+    pinned: boolean;
+    updatedAt: number;
+    messages: ChatMessage[];
+}
+/** Current audience's conversations: pinned first, then newest first. */
+export declare function loadHistory(audience: string, now?: number): StoredConversation[];
+/** Create/refresh a conversation's archive entry (preserves its pinned flag)
+ *  and apply retention. No-ops on empty transcripts. */
+export declare function upsertConversation(input: {
+    id: string;
+    audience: string;
+    messages: ChatMessage[];
+}, now?: number): void;
+export declare function setConversationPinned(id: string, pinned: boolean): void;
+export declare function removeConversation(id: string): void;
+//# sourceMappingURL=chat-history.d.ts.map

package/dist/components/chat/chat-history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-history.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-history.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAIvC,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,WAAW,EAAE,CAAC;CACzB;AAyCD,yEAAyE;AACzE,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAa,GAAG,kBAAkB,EAAE,CAKpF;AAED;wDACwD;AACxD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,EAChE,GAAG,SAAa,GACf,IAAI,CAeN;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,CAEvE;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAEnD"}

package/dist/components/editor/AudienceIndicator.d.ts

@@ -1,4 +1,10 @@
 import type { Audience } from "../../auth/types";
+interface AudienceChecklistProps {
+    access: string[];
+    audiences: Audience[];
+    onToggle: (name: string) => void;
+}
+export declare function AudienceChecklist({ access, audiences, onToggle }: AudienceChecklistProps): import("react/jsx-runtime").JSX.Element;
 interface AudienceIndicatorProps {
     access: string[];
     audiences: Audience[];

package/dist/components/editor/AudienceIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudienceIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/editor/AudienceIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAmElG"}
+{"version":3,"file":"AudienceIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/editor/AudienceIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAyCxF;AAED,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA+BlG"}