@drawnagency/primitives 0.1.69 → 0.1.70

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

@@ -2,6 +2,10 @@ export interface ChatMessage {
     role: "user" | "assistant";
     content: string;
 }
+/** 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. */
+export declare function assistantHtml(md: string): string;
 /** Parse our /api/chat SSE frames out of a fetch body. Exported for tests. */
 export declare function streamChat(body: {
     messages: ChatMessage[];

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":"AAGA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AAoB5E,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,CAAA;CAAE,EAC7F,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,OAAkB,EAAE,EAAE;IAChH,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,mFAAmF;IACnF,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B,kDA6EA"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AA6B5E;;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,CAAA;CAAE,EAC7F,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,OAAkB,EAAE,EAAE;IAChH,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,mFAAmF;IACnF,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B,kDA6HA"}

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,2CAoClH"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.69",
+  "version": "0.1.70",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -106,6 +106,7 @@
     "dompurify": "^3.2.6",
     "jose": "^6.2.2",
     "lucide-react": "^1.7.0",
+    "marked": "^18.0.5",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

package/src/components/chat/ChatPanel.tsx

@@ -1,10 +1,21 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState, type MouseEvent } from "react";
+import { marked } from "marked";
 import { cn } from "../../lib/cn";
+import { ensureSanitizer, sanitizeHtml } from "../../lib/sanitize";
 
 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) {
@@ -21,6 +32,25 @@ const ERROR_COPY: Record<string, string> = {
   upstream_error: "Something went wrong — please try again.",
 };
 
+/** 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. */
+export function assistantHtml(md: string): string {
+  return sanitizeHtml(marked.parse(md, { async: false, gfm: true, breaks: true }) as string);
+}
+
+// Tailwind preflight makes h1–h6 inherit size/weight, so headings only need
+// weight + spacing to clamp to the bubble's text scale.
+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 " +
+  "[&_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 " +
+  "[&_h3]:mt-2 [&_h3]:font-semibold [&_h4]:mt-2 [&_h4]:font-semibold " +
+  "[&_blockquote]:mt-2 [&_blockquote]:border-l-2 [&_blockquote]:border-base-200 [&_blockquote]:pl-2";
+
 /** 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 },
@@ -86,6 +116,46 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
   const [notice, setNotice] = useState<string | null>(null);
   const streamingRef = useRef("");
 
+  const [mdReady, setMdReady] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    // Failure just leaves mdReady false forever (plain-text messages) — never
+    // let it surface as an unhandled rejection.
+    void ensureSanitizer().then(() => { if (alive) setMdReady(true); }).catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  function onMessagesClick(e: MouseEvent<HTMLDivElement>) {
+    const link = (e.target as HTMLElement).closest("a");
+    if (!link || !link.getAttribute("href")) return;
+    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;
+      }
+    }
+    // Cross-page (or same-page but hashless, or any /edit click): new tab so
+    // chat history / unsaved editor state survive.
+    e.preventDefault();
+    window.open(url.href, "_blank", "noopener");
+  }
+
   async function send() {
     const text = input.trim();
     if (!text || busy) return;
@@ -132,13 +202,21 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
         )}
         <button type="button" aria-label="Close chat" onClick={onClose} className="text-base-contrast-light hover:text-base-contrast">×</button>
       </div>
-      <div className="flex-1 space-y-2 overflow-y-auto p-3">
-        {messages.map((m, i) => (
-          <div key={i} className={cn("max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-2 text-sm",
-            m.role === "user" ? "ml-auto bg-primary text-primary-contrast" : "bg-base-accent text-base-contrast")}>
-            {m.content || (busy && i === messages.length - 1 ? "…" : m.content)}
-          </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 ? (
+            <div
+              key={i}
+              className={cn("max-w-[85%] rounded-lg bg-base-accent px-3 py-2 text-sm text-base-contrast", MD_STYLES)}
+              dangerouslySetInnerHTML={{ __html: assistantHtml(m.content) }}
+            />
+          ) : (
+            <div key={i} className={cn("max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-2 text-sm",
+              m.role === "user" ? "ml-auto bg-primary text-primary-contrast" : "bg-base-accent text-base-contrast")}>
+              {m.content || (busy && i === messages.length - 1 ? "…" : m.content)}
+            </div>
+          ),
+        )}
         {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(); }}>

package/src/components/chat/ChatWidget.tsx

@@ -4,8 +4,8 @@
 //
 // Two placements:
 // - "viewer" (default): bottom-right corner of viewer pages.
-// - "editor": stacked above the /edit route's existing FAB column (edit-mode
-//   toggle at bottom-4, bug report at bottom-16), aligned to the content edge
+// - "editor": BOTTOM of the /edit route's FAB column (edit-mode toggle at
+//   bottom-16, bug report at bottom-28 above it), aligned to the content edge
 //   via fab-container-right like its neighbors.
 import { lazy, Suspense, useState } from "react";
 import { cn } from "../../lib/cn";
@@ -30,18 +30,25 @@ export default function ChatWidget({ siteName, tasks, isEditor, draftChatbot, va
     <>
       <button
         type="button"
-        aria-label={`Chat with ${siteName}`}
+        aria-label={open ? "Collapse chat" : `Chat with ${siteName}`}
+        aria-expanded={open}
         onClick={() => { setOpen((o) => !o); setEverOpened(true); }}
         className={cn(
           "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
           variant === "editor"
-            ? "bottom-28 right-4 lg:right-auto h-10 w-10 fab-container-right"
+            ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
             : "bottom-4 right-4 h-12 w-12",
         )}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-        </svg>
+        {open ? (
+          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        ) : (
+          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+          </svg>
+        )}
       </button>
       {everOpened && (
         <Suspense fallback={null}>

package/src/components/shell/BugReportFAB.tsx

@@ -190,7 +190,7 @@ export function BugReportFAB() {
           type="button"
           onClick={handleOpen}
           aria-label="Report a bug"
-          className="cursor-pointer fixed bottom-16 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
+          className="cursor-pointer fixed bottom-28 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
         >
           {/* Bug / beetle SVG icon */}
           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

package/src/components/shell/EditorShell.tsx

@@ -1696,7 +1696,7 @@ function EditorToolbar({
       {!historyState && (
         <button
           onClick={toggleEditMode}
-          className="cursor-pointer fixed bottom-4 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
+          className="cursor-pointer fixed bottom-16 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
           aria-label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
         >
           {isEditMode ? (