@drawnagency/primitives 0.1.70 → 0.1.72

package/dist/schemas/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/schemas/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAwBxB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;2BAKzB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,cAAc,CAAC,CAAC;AAoCtD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAE/B,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAElE;iEACiE;AACjE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;2BAAqD,CAAC;AAE7F,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAG9E,eAAO,MAAM,cAAc,aAEiC,CAAC;AAO7D,eAAO,MAAM,cAAc,aAG6C,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/schemas/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAwBxB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;2BAKzB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,cAAc,CAAC,CAAC;AA6CtD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAE/B,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAElE;iEACiE;AACjE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;2BAAqD,CAAC;AAE7F,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAG9E,eAAO,MAAM,cAAc,aAEiC,CAAC;AAO7D,eAAO,MAAM,cAAc,aAG6C,CAAC"}

package/dist/schemas/site-config.d.ts

@@ -161,6 +161,7 @@ export declare const ChatbotConfigSchema: z.ZodObject<{
     enabled: z.ZodDefault<z.ZodBoolean>;
     systemPrompt: z.ZodDefault<z.ZodString>;
     audiences: z.ZodDefault<z.ZodArray<z.ZodString>>;
+    audiencePrompts: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodString>>;
     tasks: z.ZodDefault<z.ZodArray<z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
@@ -189,11 +190,13 @@ export declare const SiteConfigSchema: z.ZodObject<{
         sizes: z.ZodDefault<z.ZodArray<z.ZodNumber>>;
         maxFileSize: z.ZodDefault<z.ZodNumber>;
         quality: z.ZodDefault<z.ZodNumber>;
+        maxAssetSize: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strip>>;
     chatbot: z.ZodDefault<z.ZodObject<{
         enabled: z.ZodDefault<z.ZodBoolean>;
         systemPrompt: z.ZodDefault<z.ZodString>;
         audiences: z.ZodDefault<z.ZodArray<z.ZodString>>;
+        audiencePrompts: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodString>>;
         tasks: z.ZodDefault<z.ZodArray<z.ZodObject<{
             id: z.ZodString;
             label: z.ZodString;

package/dist/schemas/site-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-config.d.ts","sourceRoot":"","sources":["../../src/schemas/site-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAQxB,eAAO,MAAM,iBAAiB;;;;;;;;;iBAI5B,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAO5D,eAAO,MAAM,cAAc,0DAA2D,CAAC;AAEvF,eAAO,MAAM,gBAAgB;;;EAA+B,CAAC;AAE7D,eAAO,MAAM,UAAU;;;;;;;;;;;;iBASrB,CAAC;AAEH,MAAM,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC;AA0C9C,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6CtB,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAyE,CAAC;AAElG,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAE7D,oFAAoF;AACpF,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,OAAO,GAAG,SAAS,CAE1D;AAMD,eAAO,MAAM,iBAAiB;;;;;iBAM5B,CAAC;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE5D,eAAO,MAAM,mBAAmB;;;;;;;;;;iBAgB5B,CAAC;AACL,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyB3B,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"site-config.d.ts","sourceRoot":"","sources":["../../src/schemas/site-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAQxB,eAAO,MAAM,iBAAiB;;;;;;;;;iBAI5B,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAO5D,eAAO,MAAM,cAAc,0DAA2D,CAAC;AAEvF,eAAO,MAAM,gBAAgB;;;EAA+B,CAAC;AAE7D,eAAO,MAAM,UAAU;;;;;;;;;;;;iBASrB,CAAC;AAEH,MAAM,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC;AA0C9C,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6CtB,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAyE,CAAC;AAElG,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAE7D,oFAAoF;AACpF,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,OAAO,GAAG,SAAS,CAE1D;AAMD,eAAO,MAAM,iBAAiB;;;;;iBAM5B,CAAC;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE5D,eAAO,MAAM,mBAAmB;;;;;;;;;;;iBAwB5B,CAAC;AACL,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyB3B,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/storage/index.d.ts

@@ -1,3 +1,3 @@
-export type { StorageProvider, FileWrite } from "./types";
+export type { StorageProvider, FileWrite, AssetStore } from "./types";
 export { StorageConflictError } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/storage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/storage/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/storage/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

package/dist/storage/types.d.ts

@@ -30,4 +30,30 @@ export type FileWrite = {
     content: string | Uint8Array | null;
     encoding?: "utf-8" | "base64";
 };
+/**
+ * Optional large-asset store (Supabase Storage bucket). Holds video originals
+ * too big for the git path; deliberately generic so future large kinds (zips)
+ * can slot in. All paths are SITE-RELATIVE ("media/{hash}/original.mp4") —
+ * implementations prepend the tenant prefix ("sites/{siteId}/") themselves so
+ * a caller can never address another tenant's objects.
+ */
+export interface AssetStore {
+    /** Mint a signed direct-upload URL for the browser (PUT). */
+    createUploadUrl(path: string, opts: {
+        contentType: string;
+    }): Promise<{
+        uploadUrl: string;
+        path: string;
+        publicUrl: string;
+    }>;
+    /** Deterministic public CDN URL for an object (no network call). */
+    getPublicUrl(path: string): string;
+    delete(paths: string[]): Promise<void>;
+    /** Recursive listing under a site-relative prefix. */
+    list(prefix: string): Promise<{
+        path: string;
+        size: number;
+        updatedAt: string;
+    }[]>;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/storage/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/storage/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qBAAa,oBAAqB,SAAQ,KAAK;aACjB,cAAc,EAAE,MAAM,GAAG,IAAI;gBAA7B,cAAc,EAAE,MAAM,GAAG,IAAI;CAI1D;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CACR,KAAK,EAAE,SAAS,EAAE,EAClB,OAAO,EAAE,MAAM,EAIf,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GACxC,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEhC,QAAQ,CACN,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAC5B,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAE9B,YAAY,IAAI,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE7C,UAAU,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAE9B,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;CAC/E;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/storage/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qBAAa,oBAAqB,SAAQ,KAAK;aACjB,cAAc,EAAE,MAAM,GAAG,IAAI;gBAA7B,cAAc,EAAE,MAAM,GAAG,IAAI;CAI1D;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CACR,KAAK,EAAE,SAAS,EAAE,EAClB,OAAO,EAAE,MAAM,EAIf,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GACxC,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEhC,QAAQ,CACN,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAC5B,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAE9B,YAAY,IAAI,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE7C,UAAU,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAE9B,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;CAC/E;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,6DAA6D;IAC7D,eAAe,CACb,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,GAC5B,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEnE,oEAAoE;IACpE,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAEnC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvC,sDAAsD;IACtD,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC,CAAC;CACpF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -36,6 +36,10 @@
       "types": "./dist/lib/env.d.ts",
       "default": "./dist/lib/env.js"
     },
+    "./lib/video-url": {
+      "types": "./dist/lib/video-url.d.ts",
+      "default": "./dist/lib/video-url.js"
+    },
     "./lib/platform-broker": {
       "types": "./dist/lib/platform-broker.d.ts",
       "default": "./dist/lib/platform-broker.js"

package/src/components/chat/ChatPanel.tsx

@@ -1,21 +1,15 @@
-import { useEffect, useRef, useState, type MouseEvent } from "react";
+import { useEffect, useRef, useState, type KeyboardEvent, type MouseEvent } from "react";
 import { marked } from "marked";
 import { cn } from "../../lib/cn";
 import { ensureSanitizer, sanitizeHtml } from "../../lib/sanitize";
+import { Select } from "../shared/Select";
+import { IconButton } from "../shared/IconButton";
+import { RemoveIcon } from "../shared/icons";
 
 export interface ChatMessage { role: "user" | "assistant"; content: string }
 
 const SESSION_KEY = "bp-chat-session";
 
-// Astro's trailingSlash: "ignore" means the viewer can be on "/brand/" while
-// grounding links say "/brand#voice-tone" — the pathnames are equivalent
-// but not literally equal. Per the HTML spec, same-document fragment
-// navigation requires URL equality *excluding* the fragment, so a literal
-// mismatch (e.g. "/brand/" vs "/brand") can't rely on native navigation —
-// this helper only detects that "equivalent but not equal" case so we can
-// handle it ourselves. "/" stays "/" rather than collapsing to "".
-const normalizePathname = (p: string): string => p.replace(/\/+$/, "") || "/";
-
 function sessionId(): string {
   let id = window.localStorage.getItem(SESSION_KEY);
   if (!id) {
@@ -44,7 +38,7 @@ export function assistantHtml(md: string): string {
 const MD_STYLES =
   "[&_p:not(:first-child)]:mt-2 [&_ul]:mt-1 [&_ul]:list-disc [&_ul]:pl-4 " +
   "[&_ol]:mt-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li:not(:first-child)]:mt-1 " +
-  "[&_a]:underline [&_a]:underline-offset-2 " +
+  "[&_a]:underline [&_a]:underline-offset-2 [&_a]:text-primary " +
   "[&_code]:rounded [&_code]:bg-base-200 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.8em] " +
   "[&_pre]:mt-2 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-base-200 [&_pre]:p-2 " +
   "[&_h1]:mt-2 [&_h1]:font-semibold [&_h2]:mt-2 [&_h2]:font-semibold " +
@@ -53,7 +47,7 @@ const MD_STYLES =
 
 /** Parse our /api/chat SSE frames out of a fetch body. Exported for tests. */
 export async function streamChat(
-  body: { messages: ChatMessage[]; sessionId: string; taskId?: string; draftChatbot?: unknown },
+  body: { messages: ChatMessage[]; sessionId: string; taskId?: string; draftChatbot?: unknown; simulateAudience?: string },
   onText: (text: string) => void,
 ): Promise<{ ok: true; truncated: boolean } | { ok: false; error: string; retryAfterMs?: number }> {
   try {
@@ -98,7 +92,7 @@ export async function streamChat(
   }
 }
 
-export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot, variant = "viewer" }: {
+export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot, simulateAudience, variant = "viewer" }: {
   open: boolean;
   onClose: () => void;
   siteName: string;
@@ -106,6 +100,8 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
   isEditor?: boolean;
   /** Set by the configurator's test panel and the /edit chat FAB. */
   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. */
   variant?: "viewer" | "editor";
 }) {
@@ -115,6 +111,33 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
   const [busy, setBusy] = useState(false);
   const [notice, setNotice] = useState<string | null>(null);
   const streamingRef = useRef("");
+  const composerRef = useRef<HTMLTextAreaElement>(null);
+
+  // Autosize the composer: height tracks content up to the className's
+  // 4-line max-h cap, then it scrolls internally. Keyed on `input` so the
+  // post-send clear snaps it back to a single row. (field-sizing: content
+  // would do this in CSS alone, but it's still Chromium-only.)
+  useEffect(() => {
+    const el = composerRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [input]);
+
+  function onComposerKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    // Chat convention: Enter sends, Shift+Enter inserts a newline.
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      void send();
+    }
+  }
+
+  // The tasks prop can shrink live (the configurator's Preview-as filters it):
+  // never keep a selected task that's no longer offered, or the next send would
+  // assemble a task the previewed audience can't access.
+  useEffect(() => {
+    if (taskId && !tasks.some((t) => t.id === taskId)) setTaskId("");
+  }, [taskId, tasks]);
 
   const [mdReady, setMdReady] = useState(false);
   useEffect(() => {
@@ -128,31 +151,30 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
   function onMessagesClick(e: MouseEvent<HTMLDivElement>) {
     const link = (e.target as HTMLElement).closest("a");
     if (!link || !link.getAttribute("href")) return;
+    e.preventDefault();
     const url = new URL(link.href, window.location.href);
-    // Native navigation is only safe when there's a hash to scroll to — the
-    // grounding emits hashless same-pathname links (e.g. "/") for content
-    // before the first heading, and letting those navigate natively would
-    // full-reload the page, unmounting the panel and wiping chat history.
-    const sameOriginWithHash = variant !== "editor" && url.origin === window.location.origin && url.hash !== "";
-    if (sameOriginWithHash) {
-      if (url.pathname === window.location.pathname) {
-        return; // literally same document: native hash navigation, panel stays open
-      }
-      if (normalizePathname(url.pathname) === normalizePathname(window.location.pathname)) {
-        // Equivalent pathnames (trailing-slash only difference) but NOT
-        // literally equal — per spec, same-document fragment navigation
-        // requires URL equality excluding the fragment, so the browser would
-        // treat a literal mismatch as a full cross-document navigation,
-        // unmounting the panel and wiping chat history. Perform the fragment
-        // navigation ourselves on the current (already-correct) URL instead.
-        e.preventDefault();
-        window.location.hash = url.hash;
-        return;
+    // Trust the hash, not the path: the model reliably preserves a section's
+    // #anchor but improvises the path around it (a bare "#anchor", or a path
+    // copied from elsewhere in the prompt). If the cited anchor exists in the
+    // CURRENT document — viewer page or /edit editor, both render heading
+    // ids — scroll to it in place; nothing navigates and the panel survives.
+    let anchorId = "";
+    if (url.hash.length > 1 && url.origin === window.location.origin) {
+      try {
+        anchorId = decodeURIComponent(url.hash.slice(1));
+      } catch {
+        anchorId = url.hash.slice(1); // malformed percent-encoding in model output
       }
     }
-    // Cross-page (or same-page but hashless, or any /edit click): new tab so
-    // chat history / unsaved editor state survive.
-    e.preventDefault();
+    const target = anchorId ? document.getElementById(anchorId) : null;
+    if (target) {
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
+      window.history.replaceState(null, "", url.hash);
+      return;
+    }
+    // Anchor not in this document (cross-page citation on a multi-page
+    // portal, external URL, hashless link, or hallucinated anchor): new tab
+    // so chat history and any unsaved editor state survive.
     window.open(url.href, "_blank", "noopener");
   }
 
@@ -166,7 +188,7 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
     setMessages([...history, { role: "assistant", content: "" }]);
     streamingRef.current = "";
     const result = await streamChat(
-      { messages: history, sessionId: sessionId(), ...(taskId ? { taskId } : {}), ...(draftChatbot !== undefined ? { draftChatbot } : {}) },
+      { messages: history, sessionId: sessionId(), ...(taskId ? { taskId } : {}), ...(draftChatbot !== undefined ? { draftChatbot } : {}), ...(simulateAudience ? { simulateAudience } : {}) },
       (delta) => {
         streamingRef.current += delta;
         const streamed = streamingRef.current;
@@ -188,20 +210,24 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
     <div role="dialog" aria-label={`Chat with ${siteName}`}
       className={cn(
         "fixed z-40 flex h-[28rem] w-80 flex-col rounded-lg border border-base-200 bg-base shadow-xl",
-        variant === "editor" ? "bottom-40 right-4 lg:right-auto fab-container-right" : "bottom-20 right-4",
+        variant === "editor" ? "bottom-4 fab-panel-left max-w-[calc(100vw-5.25rem)]" : "bottom-20 right-4",
       )}>
 
       <div className="flex items-center justify-between gap-2 border-b border-base-200 px-3 py-2">
-        <span className="text-sm font-medium text-base-contrast">{siteName} assistant</span>
-        {tasks.length > 0 && (
-          <select aria-label="Task" value={taskId} onChange={(e) => setTaskId(e.target.value)}
-            className="max-w-36 rounded border border-base-200 bg-base-accent px-1 py-0.5 text-xs">
-            <option value="">General</option>
-            {tasks.map((t) => <option key={t.id} value={t.id}>{t.label}</option>)}
-          </select>
-        )}
-        <button type="button" aria-label="Close chat" onClick={onClose} className="text-base-contrast-light hover:text-base-contrast">×</button>
+        <span className="text-sm font-medium text-base-contrast">Portal Assistant</span>
+        <IconButton icon={<RemoveIcon size={18} />} label="Close chat" onClick={onClose} className="rounded-md hover:bg-base-accent" />
       </div>
+      {tasks.length > 0 && (
+        <div className="border-b border-base-200 px-3 py-2">
+          <Select
+            label="Task"
+            value={taskId}
+            onChange={setTaskId}
+            options={[{ value: "", label: "General" }, ...tasks.map((t) => ({ value: t.id, label: t.label }))]}
+            selectClassName="py-1"
+          />
+        </div>
+      )}
       <div className="flex-1 space-y-2 overflow-y-auto p-3" onClick={onMessagesClick}>
         {messages.map((m, i) =>
           m.role === "assistant" && mdReady && m.content ? (
@@ -219,13 +245,16 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
         )}
         {notice && <p className="text-xs text-base-contrast-light">{notice}</p>}
       </div>
-      <form className="flex gap-2 border-t border-base-200 p-2" onSubmit={(e) => { e.preventDefault(); void send(); }}>
-        <input
+      <form className="flex items-end gap-2 border-t border-base-200 p-2" onSubmit={(e) => { e.preventDefault(); void send(); }}>
+        <textarea
+          ref={composerRef}
+          rows={1}
           value={input}
           onChange={(e) => setInput(e.target.value)}
+          onKeyDown={onComposerKeyDown}
           placeholder={`Ask about ${siteName}…`}
           maxLength={4000}
-          className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast"
+          className="max-h-[5.625rem] min-w-0 flex-1 resize-none overflow-y-auto rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast focus:outline-none focus:bg-[color-mix(in_srgb,var(--color-base),var(--color-base-contrast)_5%)]"
         />
         <button type="submit" aria-label="Send" disabled={busy}
           className="rounded bg-primary px-3 py-1 text-sm text-primary-contrast disabled:opacity-50">→</button>

package/src/components/editor/SettingsForm.tsx

@@ -5,8 +5,10 @@ import { Select } from "../shared/Select";
 import { Checkbox } from "../shared/Checkbox";
 import { FormLabel } from "../shared/FormLabel";
 import { LinkField } from "../shared/LinkField";
+import { VideoSourceField } from "../shared/VideoSourceField";
 import { Tabs } from "../shared/Tabs";
 import type { LinkValue } from "../../schemas/link";
+import type { VideoSource } from "../sections/Video/VideoBlock";
 import { cn } from "../../lib/cn";
 
 export interface SettingsFormResult {
@@ -163,6 +165,15 @@ function renderField(
         />
       );
 
+    case "video-source":
+      return (
+        <VideoSourceField
+          key={key}
+          value={value as VideoSource | undefined}
+          onChange={(v) => handleFieldChange(key, v)}
+        />
+      );
+
     default:
       return null;
   }

package/src/components/sections/Video/VideoBlock.tsx

@@ -0,0 +1,149 @@
+import { cn } from "../../../lib/cn";
+import { embedUrl } from "../../../lib/video-url";
+import { useResolvedMedia } from "../../../hooks/useResolvedMedia";
+import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+import { ImageDropZone } from "../../primitives/ImageDropZone";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+
+export type VideoSource =
+  | { type: "library"; ref: { imageId: string }; poster?: { imageId: string; src?: string } }
+  | { type: "external"; provider: "youtube" | "vimeo"; id: string; url: string; width: number; height: number };
+
+interface VideoBlockProps {
+  source: VideoSource;
+  caption?: string;
+  options: { playback?: "ambient" | "click"; showCaption?: boolean };
+  isEditMode?: boolean;
+  onSourceChange?: (source: VideoSource) => void;
+  onCaptionChange?: (caption: string) => void;
+}
+
+export function VideoBlock({ source, caption, options, isEditMode, onSourceChange, onCaptionChange }: VideoBlockProps) {
+  const mediaLibrary = useMediaLibrary();
+
+  // Hooks run unconditionally (rules of hooks): undefined ids resolve to nothing.
+  const imageId = source.type === "library" ? source.ref.imageId : undefined;
+  const posterId = source.type === "library" ? source.poster?.imageId : undefined;
+  const resolved = useResolvedMedia(imageId);
+  const posterOverride = useResolvedMedia(posterId);
+
+  const playback = options.playback ?? "click";
+  const editable = Boolean(isEditMode && onSourceChange);
+  const captionEditable = Boolean(isEditMode && onCaptionChange);
+  // Edit mode: show the (possibly empty) editor whenever the toggle is on, so
+  // the placeholder is typeable. View mode: only render a caption that exists
+  // (mirrors MediaBlock's showCaption gating — no empty figcaption for viewers).
+  const showCaptionBlock = Boolean(options.showCaption && (captionEditable || caption));
+
+  const replaceWithLibraryVideo = editable
+    ? (newImageId: string) => onSourceChange!({ type: "library", ref: { imageId: newImageId } })
+    : undefined;
+
+  let media: React.ReactNode;
+  let aspect: string | undefined;
+
+  if (source.type === "external") {
+    aspect = `${source.width} / ${source.height}`;
+    media = (
+      <iframe
+        src={embedUrl(source)}
+        title={caption || "Embedded video"}
+        loading="lazy"
+        allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
+        allowFullScreen
+        className="absolute inset-0 h-full w-full border-0"
+      />
+    );
+  } else {
+    // The zero-JS viewer has no MediaLibraryContext, so useResolvedMedia() can't
+    // resolve the URL. The SSR pass (resolveManifestReferences) bakes src/poster/
+    // width/height onto the ref — it matches any object structurally by its
+    // `imageId` key, so content.source.ref gets these fields without code changes
+    // there. Forward them here so a real <video> renders (mirrors MediaBlock's
+    // `baked` pattern for the same reason).
+    const baked = source.ref as Record<string, unknown>;
+    const bakedSrc = typeof baked.src === "string" ? baked.src : undefined;
+    const bakedPoster = typeof baked.poster === "string" ? baked.poster : undefined;
+    const bakedWidth = typeof baked.width === "number" ? baked.width : undefined;
+    const bakedHeight = typeof baked.height === "number" ? baked.height : undefined;
+    // The poster OVERRIDE lives as a sibling `{ imageId }` object (not nested
+    // inside `ref`) so the SSR baker resolves it independently instead of
+    // colliding with the video's own auto-generated poster. `source.poster.src`
+    // is the baked field on the viewer path; `posterOverride.src` (below) is
+    // the live-resolved equivalent for the editor path.
+    const bakedPosterOverride = source.poster as Record<string, unknown> | undefined;
+    const bakedPosterOverrideSrc = typeof bakedPosterOverride?.src === "string" ? bakedPosterOverride.src : undefined;
+
+    const src = bakedSrc ?? resolved.src;
+    // An explicit poster-image-id override wins; otherwise fall back to the
+    // baked/auto-generated frame from the video asset itself.
+    const poster = bakedPosterOverrideSrc ?? posterOverride.src ?? bakedPoster ?? resolved.poster;
+    const width = bakedWidth ?? resolved.width;
+    const height = bakedHeight ?? resolved.height;
+    aspect = width && height ? `${width} / ${height}` : undefined;
+
+    const playbackProps =
+      playback === "ambient"
+        ? { autoPlay: true, muted: true, loop: true, playsInline: true }
+        : { controls: true, preload: "metadata" as const };
+
+    const videoEl = imageId ? (
+      <video
+        src={src}
+        poster={poster}
+        width={width}
+        height={height}
+        className="absolute inset-0 h-full w-full object-contain"
+        {...playbackProps}
+      />
+    ) : (
+      <div className="absolute inset-0 flex items-center justify-center bg-base-accent text-base-contrast-light/50">
+        <span className="text-sm">No video selected</span>
+      </div>
+    );
+
+    media = replaceWithLibraryVideo ? (
+      <ImageDropZone onImageSelected={replaceWithLibraryVideo} className="absolute inset-0 h-full w-full">
+        {videoEl}
+      </ImageDropZone>
+    ) : (
+      videoEl
+    );
+  }
+
+  const onSurfaceClick =
+    replaceWithLibraryVideo && mediaLibrary
+      ? () => mediaLibrary.openSelectModal((id) => replaceWithLibraryVideo(id))
+      : undefined;
+
+  return (
+    <figure className="w-full">
+      <div
+        data-testid="video-open-surface"
+        className={cn("relative w-full overflow-hidden", onSurfaceClick && "cursor-pointer")}
+        style={{ aspectRatio: aspect ?? "16 / 9" }}
+        onClick={onSurfaceClick}
+        onPointerDown={onSurfaceClick ? (e) => e.stopPropagation() : undefined}
+      >
+        {media}
+      </div>
+
+      {showCaptionBlock && (
+        <figcaption className="mt-2 min-h-[1em] text-sm text-base-contrast-light/70">
+          {captionEditable ? (
+            <EditablePlainText
+              tag="span"
+              value={caption ?? ""}
+              onChange={onCaptionChange!}
+              isEditMode={true}
+              placeholder="Caption"
+              className="block min-h-[1em]"
+            />
+          ) : (
+            caption
+          )}
+        </figcaption>
+      )}
+    </figure>
+  );
+}

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

@@ -0,0 +1,111 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { Clapperboard } from "lucide-react";
+import { VideoBlock, type VideoSource } from "./VideoBlock";
+
+const LibrarySource = z.object({
+  type: z.literal("library"),
+  ref: z.object({
+    imageId: z.string().default("").describe("Media-library id of the video asset. Required for library videos."),
+  }),
+  // Kept as a SIBLING of `ref` (not nested inside it): the SSR ref-baker
+  // (resolveManifestReferences) matches objects structurally by a top-level
+  // `imageId` key and merges the resolved video's own poster onto that same
+  // object. Nesting the override inside `ref` would collide with that bake
+  // and get silently overwritten on the published viewer. As a sibling with
+  // its own `imageId`, it gets baked independently.
+  poster: z
+    .object({
+      imageId: z.string().describe("Media-library image id used as the poster frame instead of the auto-generated one."),
+    })
+    .optional()
+    .describe("Optional poster-image override for a library video."),
+});
+
+const ExternalSource = z.object({
+  type: z.literal("external"),
+  provider: z.enum(["youtube", "vimeo"]).describe("Hosting provider, derived from the pasted URL."),
+  id: z.string().describe("Provider video id parsed from the pasted URL."),
+  url: z.string().describe("The original video page URL as pasted."),
+  width: z.number().positive().describe("Native width used for the aspect-ratio box (from oEmbed; 16 when unknown)."),
+  height: z.number().positive().describe("Native height used for the aspect-ratio box (from oEmbed; 9 when unknown)."),
+});
+
+const schema = z.object({
+  type: z.literal("video"),
+  content: z.object({
+    source: z
+      .discriminatedUnion("type", [LibrarySource, ExternalSource])
+      .describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo URL."),
+    caption: z.string().optional().describe("Optional caption rendered beneath the player when Show caption is on."),
+  }),
+  options: z
+    .object({
+      playback: z
+        .enum(["ambient", "click"])
+        .describe("'click' (default): poster + native controls with audio. 'ambient': autoplays muted in a loop with no controls.")
+        .optional(),
+      showCaption: z.boolean().describe("When true, render the caption beneath the player.").optional(),
+    })
+    .default({}),
+});
+
+export default defineSection({
+  type: "video",
+  label: "Video",
+  icon: <Clapperboard size={18} />,
+  schema,
+  authoringNote:
+    "A watchable video player — self-hosted from the media library or embedded from YouTube/Vimeo. " +
+    "Use playback 'click' for content viewers press play on (controls + audio) and 'ambient' for silent looping footage. " +
+    "For decorative loops inside grids prefer the Media block; large self-hosted files require the site's asset storage.",
+  component: ({ content, options, onChange }) => (
+    <VideoBlock
+      source={content.content.source as VideoSource}
+      caption={content.content.caption}
+      options={(options ?? {}) as { playback?: "ambient" | "click"; showCaption?: boolean }}
+      isEditMode={!!onChange}
+      onSourceChange={
+        onChange ? (source) => onChange({ ...content, content: { ...content.content, source } }) : undefined
+      }
+      onCaptionChange={
+        onChange
+          ? (caption) => onChange({ ...content, content: { ...content.content, caption: caption || undefined } })
+          : undefined
+      }
+    />
+  ),
+  defaults: () => ({
+    type: "video" as const,
+    content: { source: { type: "library" as const, ref: { imageId: "" } } },
+    options: {},
+  }),
+  getLabel: () => "Video",
+  getThumbnails: (content) =>
+    content.content.source.type === "library" && content.content.source.ref.imageId
+      ? [{ type: "image" as const, src: content.content.source.ref.imageId }]
+      : [],
+  settings: {
+    source: {
+      type: "video-source",
+      label: "Source",
+      target: "content",
+      default: { type: "library" as const, ref: { imageId: "" } },
+    },
+    playback: {
+      type: "select",
+      label: "Playback",
+      default: "click",
+      options: [
+        { label: "Click to play (controls + audio)", value: "click" },
+        { label: "Ambient loop (muted, no controls)", value: "ambient" },
+      ],
+    },
+    showCaption: { type: "checkbox", label: "Show caption", default: false },
+  },
+  inheritableSettings: ["playback", "showCaption"],
+  settingsTabs: [
+    { label: "Source", fields: ["source"] },
+    { label: "Display", fields: ["playback", "showCaption"] },
+  ],
+});

package/src/components/sections/core-sections.ts

@@ -3,6 +3,7 @@ import subHeading from "./SubHeading";
 import subSubHeading from "./SubSubHeading";
 import prose from "./Prose";
 import media from "./Media";
+import video from "./Video";
 import button from "./Button";
 import container from "./Container";
 import spacer from "./Spacer";
@@ -20,6 +21,7 @@ export const coreSectionDefs = [
   subSubHeading,
   prose,
   media,
+  video,
   button,
   container,
   spacer,

package/src/components/shared/Tabs.tsx

@@ -17,7 +17,7 @@ interface TabsProps {
   /**
    * When true, the tab-bar row uses -mx-6 to break out of the parent's px-6 padding
    * (e.g. EditorModal's content wrapper) and re-pads with px-6 so buttons stay aligned.
-   * The tab panel inherits the parent's padding unchanged.
+   * The tab panel also gets a top `pt-4` for spacing under the tab bar.
    * Use only when the parent container has px-6; leave false for noPadding contexts.
    */
   fullBleedTabBar?: boolean;
@@ -57,7 +57,7 @@ export function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTa
           ))}
         </div>
       </div>
-      <div role="tabpanel">{activeTab?.content}</div>
+      <div role="tabpanel" className={cn(fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
     </div>
   );
 }