@brokr/sdk 2.1.1 → 2.1.2

package/dist/react.mjs

@@ -6284,11 +6284,28 @@ function CancelSubscription({ onCancel }) {
   return /* @__PURE__ */ React28.createElement("div", { className: "brokr-section", style: { gap: "0.75rem" } }, confirming ? /* @__PURE__ */ React28.createElement("div", { className: "brokr-inline-message" }, "Subscription changes are confirmed in billing. Continue?") : null, /* @__PURE__ */ React28.createElement("div", { className: "brokr-brand-row" }, /* @__PURE__ */ React28.createElement("button", { className: "brokr-button-ghost", disabled: isPending, onClick: handlePrimaryClick, type: "button" }, isPending ? "Opening billing" : confirming ? "Continue" : "Cancel subscription"), confirming ? /* @__PURE__ */ React28.createElement("button", { className: "brokr-button-secondary", onClick: handleDismiss, type: "button" }, "Keep subscription") : null));
 }
 
+// src/react/payments/UsageGrid.tsx
+import React29, { useMemo as useMemo18 } from "react";
+function UsageGrid() {
+  const { entitlements, isLoaded } = useBrokr();
+  const meteredFeatures = useMemo18(() => {
+    if (!entitlements?.features) return [];
+    return Object.entries(entitlements.features).filter(([_, check]) => check.limitType === "numeric").map(([slug]) => slug);
+  }, [entitlements]);
+  if (!isLoaded) {
+    return /* @__PURE__ */ React29.createElement("div", { className: "brokr-usage-grid" }, /* @__PURE__ */ React29.createElement(Skeleton, { height: 72 }), /* @__PURE__ */ React29.createElement(Skeleton, { height: 72 }));
+  }
+  if (meteredFeatures.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React29.createElement("div", { className: "brokr-usage-grid" }, meteredFeatures.map((slug) => /* @__PURE__ */ React29.createElement(FeatureMeter, { key: slug, feature: slug })));
+}
+
 // src/react/chat/AIChat.tsx
-import React35, {
+import React36, {
   useCallback as useCallback23,
   useEffect as useEffect12,
-  useMemo as useMemo23,
+  useMemo as useMemo24,
   useRef as useRef7,
   useState as useState18
 } from "react";
@@ -6306,7 +6323,7 @@ function useChatState() {
 }
 
 // src/react/chat/useChat.ts
-import { useCallback as useCallback16, useEffect as useEffect9, useMemo as useMemo18, useRef as useRef5, useState as useState16, useContext as useContext3 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect9, useMemo as useMemo19, useRef as useRef5, useState as useState16, useContext as useContext3 } from "react";
 
 // src/ai/types.ts
 function contentToText(content) {
@@ -6498,7 +6515,7 @@ function useChat(config) {
   const bottomRef = useRef5(null);
   const scrollContainerRef = useRef5(null);
   const sentinelRef = useRef5(null);
-  const displaySidebarItems = useMemo18(() => {
+  const displaySidebarItems = useMemo19(() => {
     if (isControlled) {
       return threadsProp?.map((t) => ({
         id: t.id,
@@ -6519,26 +6536,26 @@ function useChat(config) {
       updatedAt: new Date(c.updatedAt).toISOString()
     }));
   }, [isControlled, isPersist, threadsProp, serverThreads, memConversations]);
-  const activeId = useMemo18(() => {
+  const activeId = useMemo19(() => {
     if (isControlled) return activeThreadIdProp ?? null;
     if (isPersist) return serverActiveId;
     return memActiveId;
   }, [isControlled, isPersist, activeThreadIdProp, serverActiveId, memActiveId]);
-  const displayMessages = useMemo18(() => {
+  const displayMessages = useMemo19(() => {
     if (isControlled) return messagesProp ?? [];
     if (isPersist) return serverMessages;
     return memConversations.find((c) => c.id === memActiveId)?.messages ?? [];
   }, [isControlled, isPersist, messagesProp, serverMessages, memConversations, memActiveId]);
-  const activeMemConv = useMemo18(
+  const activeMemConv = useMemo19(
     () => memConversations.find((c) => c.id === memActiveId) ?? null,
     [memConversations, memActiveId]
   );
-  const activeThread = useMemo18(() => {
+  const activeThread = useMemo19(() => {
     if (isControlled) return threadsProp?.find((t) => t.id === activeId) ?? null;
     if (isPersist) return serverThreads.find((t) => t.id === activeId) ?? null;
     return null;
   }, [isControlled, isPersist, threadsProp, serverThreads, activeId]);
-  const renderedTitle = useMemo18(() => {
+  const renderedTitle = useMemo19(() => {
     if (isPersist && activeThread) return activeThread.title;
     if (!isPersist && activeMemConv) {
       if (activeMemConv.titleState === "loading") return "Naming conversation";
@@ -6992,7 +7009,7 @@ function useChat(config) {
 }
 
 // src/react/chat/ModelSelector.tsx
-import React29, { useCallback as useCallback17, useEffect as useEffect10, useMemo as useMemo19, useRef as useRef6, useState as useState17 } from "react";
+import React30, { useCallback as useCallback17, useEffect as useEffect10, useMemo as useMemo20, useRef as useRef6, useState as useState17 } from "react";
 function ModelOption({
   provider,
   isActive,
@@ -7007,7 +7024,7 @@ function ModelOption({
       onSelect(provider.model);
     }
   }, [isLocked, onCheckout, onSelect, provider.model]);
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "button",
     {
       "aria-selected": isActive,
@@ -7019,9 +7036,9 @@ function ModelOption({
       title: isLocked ? "Add credits to unlock" : void 0,
       type: "button"
     },
-    /* @__PURE__ */ React29.createElement("img", { alt: "", className: "brokr-model-logo", src: provider.logo }),
-    /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-option-label" }, provider.label),
-    isLocked ? /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-lock", "aria-hidden": "true" }, /* @__PURE__ */ React29.createElement(LockIcon, { size: 13 })) : null
+    /* @__PURE__ */ React30.createElement("img", { alt: "", className: "brokr-model-logo", src: provider.logo }),
+    /* @__PURE__ */ React30.createElement("span", { className: "brokr-model-option-label" }, provider.label),
+    isLocked ? /* @__PURE__ */ React30.createElement("span", { className: "brokr-model-lock", "aria-hidden": "true" }, /* @__PURE__ */ React30.createElement(LockIcon, { size: 13 })) : null
   );
 }
 function ModelSelector({
@@ -7033,7 +7050,7 @@ function ModelSelector({
   const [selectorOpen, setSelectorOpen] = useState17(false);
   const selectorRef = useRef6(null);
   const isAuto = activeModel === STACK_DEFAULT || !providers.some((p) => p.model === activeModel);
-  const activeProvider = useMemo19(
+  const activeProvider = useMemo20(
     () => isAuto ? void 0 : providers.find((p) => p.model === activeModel) ?? providers[0],
     [activeModel, isAuto]
   );
@@ -7063,7 +7080,7 @@ function ModelSelector({
   const handleToggle = useCallback17(() => {
     setSelectorOpen((v) => !v);
   }, []);
-  return /* @__PURE__ */ React29.createElement("div", { className: "brokr-model-selector", ref: selectorRef }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement("div", { className: "brokr-model-selector", ref: selectorRef }, /* @__PURE__ */ React30.createElement(
     "button",
     {
       "aria-expanded": selectorOpen,
@@ -7072,10 +7089,10 @@ function ModelSelector({
       onClick: handleToggle,
       type: "button"
     },
-    activeProvider ? /* @__PURE__ */ React29.createElement("img", { alt: "", className: "brokr-model-logo", src: activeProvider.logo }) : /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-dot", style: { background: "#6B7280" } }),
+    activeProvider ? /* @__PURE__ */ React30.createElement("img", { alt: "", className: "brokr-model-logo", src: activeProvider.logo }) : /* @__PURE__ */ React30.createElement("span", { className: "brokr-model-dot", style: { background: "#6B7280" } }),
     isAuto ? "Auto" : activeProvider?.label ?? "Model",
-    /* @__PURE__ */ React29.createElement(ChevronDownIcon, { size: 13 })
-  ), selectorOpen ? /* @__PURE__ */ React29.createElement("div", { className: "brokr-model-dropdown", role: "listbox" }, /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(ChevronDownIcon, { size: 13 })
+  ), selectorOpen ? /* @__PURE__ */ React30.createElement("div", { className: "brokr-model-dropdown", role: "listbox" }, /* @__PURE__ */ React30.createElement(
     "button",
     {
       "aria-selected": isAuto,
@@ -7084,9 +7101,9 @@ function ModelSelector({
       onClick: handleAutoSelect,
       type: "button"
     },
-    /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-dot", style: { background: "#6B7280" } }),
-    /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-option-label" }, "Stack Default")
-  ), providers.map((p) => /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement("span", { className: "brokr-model-dot", style: { background: "#6B7280" } }),
+    /* @__PURE__ */ React30.createElement("span", { className: "brokr-model-option-label" }, "Stack Default")
+  ), providers.map((p) => /* @__PURE__ */ React30.createElement(
     ModelOption,
     {
       key: p.id,
@@ -7100,10 +7117,10 @@ function ModelSelector({
 }
 
 // src/react/chat/ThreadSidebar.tsx
-import React30, { useCallback as useCallback18, useMemo as useMemo20 } from "react";
+import React31, { useCallback as useCallback18, useMemo as useMemo21 } from "react";
 function ThreadItemButton({ id, title, isActive, onSelect }) {
   const handleClick = useCallback18(() => onSelect(id), [id, onSelect]);
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "button",
     {
       className: "brokr-ai-chat-conversation",
@@ -7111,8 +7128,8 @@ function ThreadItemButton({ id, title, isActive, onSelect }) {
       onClick: handleClick,
       type: "button"
     },
-    /* @__PURE__ */ React30.createElement(MessageIcon, { size: 12 }),
-    /* @__PURE__ */ React30.createElement("span", { className: "brokr-ai-chat-conversation-label" }, title)
+    /* @__PURE__ */ React31.createElement(MessageIcon, { size: 12 }),
+    /* @__PURE__ */ React31.createElement("span", { className: "brokr-ai-chat-conversation-label" }, title)
   );
 }
 var SIDEBAR_GROUP_ORDER = [
@@ -7176,7 +7193,7 @@ function ThreadSidebar() {
   const handleRenameChange = useCallback18((e) => {
     setRenameValue(e.target.value);
   }, [setRenameValue]);
-  const groupedSidebarItems = useMemo20(() => {
+  const groupedSidebarItems = useMemo21(() => {
     const grouped = /* @__PURE__ */ new Map();
     for (const item of displaySidebarItems) {
       const key = resolveSidebarDateGroup(item.updatedAt);
@@ -7193,14 +7210,14 @@ function ThreadSidebar() {
       items: grouped.get(key) ?? []
     })).filter((group) => group.items.length > 0);
   }, [displaySidebarItems]);
-  const content = useMemo20(() => {
+  const content = useMemo21(() => {
     if (threadsLoading && displaySidebarItems.length === 0) {
-      return /* @__PURE__ */ React30.createElement("div", { className: "brokr-ai-chat-sidebar-skeleton" }, /* @__PURE__ */ React30.createElement(Skeleton, { width: "75%", height: 14, radius: 6 }), /* @__PURE__ */ React30.createElement(Skeleton, { width: "60%", height: 14, radius: 6 }), /* @__PURE__ */ React30.createElement(Skeleton, { width: "85%", height: 14, radius: 6 }));
+      return /* @__PURE__ */ React31.createElement("div", { className: "brokr-ai-chat-sidebar-skeleton" }, /* @__PURE__ */ React31.createElement(Skeleton, { width: "75%", height: 14, radius: 6 }), /* @__PURE__ */ React31.createElement(Skeleton, { width: "60%", height: 14, radius: 6 }), /* @__PURE__ */ React31.createElement(Skeleton, { width: "85%", height: 14, radius: 6 }));
     }
     if (displaySidebarItems.length === 0) {
-      return /* @__PURE__ */ React30.createElement("div", { className: "brokr-ai-chat-sidebar-empty" }, /* @__PURE__ */ React30.createElement("p", { className: "brokr-ai-chat-sidebar-empty-text" }, "No conversations yet. Start one above."));
+      return /* @__PURE__ */ React31.createElement("div", { className: "brokr-ai-chat-sidebar-empty" }, /* @__PURE__ */ React31.createElement("p", { className: "brokr-ai-chat-sidebar-empty-text" }, "No conversations yet. Start one above."));
     }
-    return /* @__PURE__ */ React30.createElement("div", { className: "brokr-ai-chat-sidebar-groups" }, groupedSidebarItems.map((group) => /* @__PURE__ */ React30.createElement("section", { className: "brokr-ai-chat-sidebar-group", key: group.key }, /* @__PURE__ */ React30.createElement("span", { className: "brokr-ai-chat-sidebar-kicker" }, group.label), /* @__PURE__ */ React30.createElement("div", { className: "brokr-ai-chat-conversations" }, group.items.map((item) => renamingId === item.id ? /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement("div", { className: "brokr-ai-chat-sidebar-groups" }, groupedSidebarItems.map((group) => /* @__PURE__ */ React31.createElement("section", { className: "brokr-ai-chat-sidebar-group", key: group.key }, /* @__PURE__ */ React31.createElement("span", { className: "brokr-ai-chat-sidebar-kicker" }, group.label), /* @__PURE__ */ React31.createElement("div", { className: "brokr-ai-chat-conversations" }, group.items.map((item) => renamingId === item.id ? /* @__PURE__ */ React31.createElement(
       "input",
       {
         autoFocus: true,
@@ -7211,7 +7228,7 @@ function ThreadSidebar() {
         onKeyDown: handleRenameKeyDown,
         value: renameValue
       }
-    ) : /* @__PURE__ */ React30.createElement(
+    ) : /* @__PURE__ */ React31.createElement(
       ThreadItemButton,
       {
         key: item.id,
@@ -7233,17 +7250,17 @@ function ThreadSidebar() {
     handleRenameChange,
     handleRenameKeyDown
   ]);
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("button", { className: "brokr-ai-chat-sidebar-new-chat", onClick: handleNewChat, type: "button" }, /* @__PURE__ */ React30.createElement(MessageIcon, { size: 16 }), "New chat"), content);
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("button", { className: "brokr-ai-chat-sidebar-new-chat", onClick: handleNewChat, type: "button" }, /* @__PURE__ */ React31.createElement(MessageIcon, { size: 16 }), "New chat"), content);
 }
 
 // src/react/chat/MessagePane.tsx
-import React33, { useCallback as useCallback21, useMemo as useMemo22 } from "react";
+import React34, { useCallback as useCallback21, useMemo as useMemo23 } from "react";
 
 // src/react/chat/MessageBubble.tsx
-import React32, { useCallback as useCallback20 } from "react";
+import React33, { useCallback as useCallback20 } from "react";
 
 // src/react/chat/MarkdownRenderer.tsx
-import React31, { useCallback as useCallback19, useMemo as useMemo21 } from "react";
+import React32, { useCallback as useCallback19, useMemo as useMemo22 } from "react";
 function parseInline(text) {
   const nodes = [];
   let remaining = text;
@@ -7251,25 +7268,25 @@ function parseInline(text) {
   while (remaining) {
     const codeMatch = remaining.match(/^`([^`]+)`/);
     if (codeMatch) {
-      nodes.push(/* @__PURE__ */ React31.createElement("code", { className: "brokr-md-inline-code", key: key++ }, codeMatch[1]));
+      nodes.push(/* @__PURE__ */ React32.createElement("code", { className: "brokr-md-inline-code", key: key++ }, codeMatch[1]));
       remaining = remaining.slice(codeMatch[0].length);
       continue;
     }
     const boldMatch = remaining.match(/^\*\*(.+?)\*\*/);
     if (boldMatch) {
-      nodes.push(/* @__PURE__ */ React31.createElement("strong", { key: key++ }, boldMatch[1]));
+      nodes.push(/* @__PURE__ */ React32.createElement("strong", { key: key++ }, boldMatch[1]));
       remaining = remaining.slice(boldMatch[0].length);
       continue;
     }
     const strikethroughMatch = remaining.match(/^~~(.+?)~~/);
     if (strikethroughMatch) {
-      nodes.push(/* @__PURE__ */ React31.createElement("del", { key: key++ }, strikethroughMatch[1]));
+      nodes.push(/* @__PURE__ */ React32.createElement("del", { key: key++ }, strikethroughMatch[1]));
       remaining = remaining.slice(strikethroughMatch[0].length);
       continue;
     }
     const italicMatch = remaining.match(/^\*(.+?)\*/);
     if (italicMatch) {
-      nodes.push(/* @__PURE__ */ React31.createElement("em", { key: key++ }, italicMatch[1]));
+      nodes.push(/* @__PURE__ */ React32.createElement("em", { key: key++ }, italicMatch[1]));
       remaining = remaining.slice(italicMatch[0].length);
       continue;
     }
@@ -7278,7 +7295,7 @@ function parseInline(text) {
       const rawHref = linkMatch[2];
       const isSafe = /^https?:\/\//i.test(rawHref) || /^mailto:/i.test(rawHref);
       nodes.push(
-        /* @__PURE__ */ React31.createElement("a", { className: "brokr-md-link", href: isSafe ? rawHref : "#", key: key++, rel: "noopener noreferrer", target: "_blank" }, linkMatch[1])
+        /* @__PURE__ */ React32.createElement("a", { className: "brokr-md-link", href: isSafe ? rawHref : "#", key: key++, rel: "noopener noreferrer", target: "_blank" }, linkMatch[1])
       );
       remaining = remaining.slice(linkMatch[0].length);
       continue;
@@ -7302,7 +7319,7 @@ function CodeBlock({ code, language }) {
   const handleCopy = useCallback19(() => {
     void navigator.clipboard?.writeText(code);
   }, [code]);
-  return /* @__PURE__ */ React31.createElement("div", { className: "brokr-md-codeblock" }, /* @__PURE__ */ React31.createElement("div", { className: "brokr-md-codeblock-header" }, /* @__PURE__ */ React31.createElement("span", { className: "brokr-md-codeblock-lang" }, language || "code"), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement("div", { className: "brokr-md-codeblock" }, /* @__PURE__ */ React32.createElement("div", { className: "brokr-md-codeblock-header" }, /* @__PURE__ */ React32.createElement("span", { className: "brokr-md-codeblock-lang" }, language || "code"), /* @__PURE__ */ React32.createElement(
     "button",
     {
       "aria-label": "Copy code",
@@ -7310,9 +7327,9 @@ function CodeBlock({ code, language }) {
       onClick: handleCopy,
       type: "button"
     },
-    /* @__PURE__ */ React31.createElement(CopyIcon, { size: 13 }),
+    /* @__PURE__ */ React32.createElement(CopyIcon, { size: 13 }),
     "Copy"
-  )), /* @__PURE__ */ React31.createElement("pre", { className: "brokr-md-codeblock-pre" }, /* @__PURE__ */ React31.createElement("code", null, code)));
+  )), /* @__PURE__ */ React32.createElement("pre", { className: "brokr-md-codeblock-pre" }, /* @__PURE__ */ React32.createElement("code", null, code)));
 }
 function looksLikeTableSeparator(line) {
   const trimmed = line.trim();
@@ -7410,35 +7427,35 @@ function renderBlocks(blocks) {
   return blocks.map((block, idx) => {
     switch (block.type) {
       case "code":
-        return /* @__PURE__ */ React31.createElement(CodeBlock, { code: block.content, key: idx, language: block.language });
+        return /* @__PURE__ */ React32.createElement(CodeBlock, { code: block.content, key: idx, language: block.language });
       case "divider":
-        return /* @__PURE__ */ React31.createElement("hr", { className: "brokr-md-divider", key: idx });
+        return /* @__PURE__ */ React32.createElement("hr", { className: "brokr-md-divider", key: idx });
       case "heading": {
         const Tag = `h${Math.min(block.level ?? 3, 6)}`;
-        return /* @__PURE__ */ React31.createElement(Tag, { className: `brokr-md-heading brokr-md-h${block.level}`, key: idx }, parseInline(block.content));
+        return /* @__PURE__ */ React32.createElement(Tag, { className: `brokr-md-heading brokr-md-h${block.level}`, key: idx }, parseInline(block.content));
       }
       case "list":
         if (block.ordered) {
-          return /* @__PURE__ */ React31.createElement("ol", { className: "brokr-md-list brokr-md-list-ordered", key: idx }, block.items?.map((item, li) => /* @__PURE__ */ React31.createElement("li", { key: li }, parseInline(item))));
+          return /* @__PURE__ */ React32.createElement("ol", { className: "brokr-md-list brokr-md-list-ordered", key: idx }, block.items?.map((item, li) => /* @__PURE__ */ React32.createElement("li", { key: li }, parseInline(item))));
         }
-        return /* @__PURE__ */ React31.createElement("ul", { className: "brokr-md-list brokr-md-list-unordered", key: idx }, block.items?.map((item, li) => /* @__PURE__ */ React31.createElement("li", { key: li }, parseInline(item))));
+        return /* @__PURE__ */ React32.createElement("ul", { className: "brokr-md-list brokr-md-list-unordered", key: idx }, block.items?.map((item, li) => /* @__PURE__ */ React32.createElement("li", { key: li }, parseInline(item))));
       case "quote":
-        return /* @__PURE__ */ React31.createElement("blockquote", { className: "brokr-md-quote", key: idx }, block.items?.map((line, lineIndex) => /* @__PURE__ */ React31.createElement("p", { className: "brokr-md-quote-line", key: lineIndex }, parseInline(line))));
+        return /* @__PURE__ */ React32.createElement("blockquote", { className: "brokr-md-quote", key: idx }, block.items?.map((line, lineIndex) => /* @__PURE__ */ React32.createElement("p", { className: "brokr-md-quote-line", key: lineIndex }, parseInline(line))));
       case "table":
-        return /* @__PURE__ */ React31.createElement("div", { className: "brokr-md-table-wrap", key: idx }, /* @__PURE__ */ React31.createElement("table", { className: "brokr-md-table" }, /* @__PURE__ */ React31.createElement("thead", null, /* @__PURE__ */ React31.createElement("tr", null, block.headers?.map((header, headerIndex) => /* @__PURE__ */ React31.createElement("th", { key: headerIndex }, parseInline(header))))), /* @__PURE__ */ React31.createElement("tbody", null, block.rows?.map((row, rowIndex) => /* @__PURE__ */ React31.createElement("tr", { key: rowIndex }, row.map((cell, cellIndex) => /* @__PURE__ */ React31.createElement("td", { key: cellIndex }, parseInline(cell))))))));
+        return /* @__PURE__ */ React32.createElement("div", { className: "brokr-md-table-wrap", key: idx }, /* @__PURE__ */ React32.createElement("table", { className: "brokr-md-table" }, /* @__PURE__ */ React32.createElement("thead", null, /* @__PURE__ */ React32.createElement("tr", null, block.headers?.map((header, headerIndex) => /* @__PURE__ */ React32.createElement("th", { key: headerIndex }, parseInline(header))))), /* @__PURE__ */ React32.createElement("tbody", null, block.rows?.map((row, rowIndex) => /* @__PURE__ */ React32.createElement("tr", { key: rowIndex }, row.map((cell, cellIndex) => /* @__PURE__ */ React32.createElement("td", { key: cellIndex }, parseInline(cell))))))));
       case "paragraph":
       default:
-        return /* @__PURE__ */ React31.createElement("p", { className: "brokr-md-paragraph", key: idx }, parseInline(block.content));
+        return /* @__PURE__ */ React32.createElement("p", { className: "brokr-md-paragraph", key: idx }, parseInline(block.content));
     }
   });
 }
 function MarkdownRenderer({ content }) {
-  const rendered = useMemo21(() => {
+  const rendered = useMemo22(() => {
     if (!content) return null;
     const blocks = parseBlocks(content);
     return renderBlocks(blocks);
   }, [content]);
-  return /* @__PURE__ */ React31.createElement("div", { className: "brokr-md" }, rendered);
+  return /* @__PURE__ */ React32.createElement("div", { className: "brokr-md" }, rendered);
 }
 
 // src/react/chat/MessageBubble.tsx
@@ -7448,10 +7465,10 @@ function MessageBubble({ message, isTyping, user }) {
     });
   }, [message.content]);
   if (message.role === "user") {
-    return /* @__PURE__ */ React32.createElement("article", { className: "brokr-ai-chat-message", "data-role": "user" }, /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-row", "data-role": "user" }, /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-bubble" }, /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-content brokr-ai-chat-message-content-user" }, message.content)), /* @__PURE__ */ React32.createElement(Avatar, { email: user?.email, name: user?.name, src: user?.image })));
+    return /* @__PURE__ */ React33.createElement("article", { className: "brokr-ai-chat-message", "data-role": "user" }, /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-row", "data-role": "user" }, /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-bubble" }, /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-content brokr-ai-chat-message-content-user" }, message.content)), /* @__PURE__ */ React33.createElement(Avatar, { email: user?.email, name: user?.name, src: user?.image })));
   }
   const mp = message.model ? resolveProviderByModel(message.model) : null;
-  return /* @__PURE__ */ React32.createElement("article", { className: "brokr-ai-chat-message", "data-role": "assistant" }, /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-row", "data-role": "assistant" }, mp ? /* @__PURE__ */ React32.createElement("img", { alt: mp.label, className: "brokr-ai-chat-model-avatar", src: mp.logo }) : null, isTyping ? /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-typing", "aria-label": "AI is typing" }, /* @__PURE__ */ React32.createElement("span", null), /* @__PURE__ */ React32.createElement("span", null), /* @__PURE__ */ React32.createElement("span", null)) : message.status === "error" && !message.content ? /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-wrap" }, /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-error" }, "Something went wrong generating a reply.")) : /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-wrap" }, /* @__PURE__ */ React32.createElement("div", { className: "brokr-ai-chat-message-content" }, /* @__PURE__ */ React32.createElement(MarkdownRenderer, { content: message.content })), message.content ? /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement("article", { className: "brokr-ai-chat-message", "data-role": "assistant" }, /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-row", "data-role": "assistant" }, mp ? /* @__PURE__ */ React33.createElement("img", { alt: mp.label, className: "brokr-ai-chat-model-avatar", src: mp.logo }) : null, isTyping ? /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-typing", "aria-label": "AI is typing" }, /* @__PURE__ */ React33.createElement("span", null), /* @__PURE__ */ React33.createElement("span", null), /* @__PURE__ */ React33.createElement("span", null)) : message.status === "error" && !message.content ? /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-wrap" }, /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-error" }, "Something went wrong generating a reply.")) : /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-wrap" }, /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-message-content" }, /* @__PURE__ */ React33.createElement(MarkdownRenderer, { content: message.content })), message.content ? /* @__PURE__ */ React33.createElement(
     "button",
     {
       "aria-label": "Copy message",
@@ -7459,7 +7476,7 @@ function MessageBubble({ message, isTyping, user }) {
       onClick: handleCopy,
       type: "button"
     },
-    /* @__PURE__ */ React32.createElement(CopyIcon, { size: 13 })
+    /* @__PURE__ */ React33.createElement(CopyIcon, { size: 13 })
   ) : null)));
 }
 
@@ -7468,7 +7485,7 @@ function StarterPromptButton({ prompt, onSend }) {
   const handleClick = useCallback21(() => {
     void onSend(prompt);
   }, [prompt, onSend]);
-  return /* @__PURE__ */ React33.createElement("button", { className: "brokr-ai-chat-starter", onClick: handleClick, type: "button" }, prompt);
+  return /* @__PURE__ */ React34.createElement("button", { className: "brokr-ai-chat-starter", onClick: handleClick, type: "button" }, prompt);
 }
 function MessagePane({ starterPrompts, emptyTitle, emptyCopy, subtitle }) {
   const {
@@ -7486,10 +7503,10 @@ function MessagePane({ starterPrompts, emptyTitle, emptyCopy, subtitle }) {
     user
   } = useChatState();
   const isEmpty = displayMessages.length === 0;
-  const messageElements = useMemo22(() => {
+  const messageElements = useMemo23(() => {
     return visibleMessages.map((message, index) => {
       const isTyping = message.role === "assistant" && !message.content && (isSubmitting && index === visibleMessages.length - 1 || message.status === "pending" || message.status === "streaming");
-      return /* @__PURE__ */ React33.createElement(
+      return /* @__PURE__ */ React34.createElement(
         MessageBubble,
         {
           isTyping,
@@ -7500,16 +7517,16 @@ function MessagePane({ starterPrompts, emptyTitle, emptyCopy, subtitle }) {
       );
     });
   }, [visibleMessages, isSubmitting, user]);
-  return /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-thread", "data-empty": isEmpty, ref: scrollContainerRef }, isEmpty ? /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-empty" }, /* @__PURE__ */ React33.createElement(SparkIcon, { size: 28 }), /* @__PURE__ */ React33.createElement("h2", { className: "brokr-title" }, emptyTitle), subtitle ?? emptyCopy ? /* @__PURE__ */ React33.createElement("p", { className: "brokr-copy" }, subtitle ?? emptyCopy) : null, starterPrompts.length > 0 ? /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-starters" }, starterPrompts.map((sp) => /* @__PURE__ */ React33.createElement(StarterPromptButton, { key: sp, prompt: sp, onSend: sendMessage }))) : null) : /* @__PURE__ */ React33.createElement("div", { className: "brokr-ai-chat-thread-inner" }, (isPersist ? hasMoreMessages : memHasMore) ? /* @__PURE__ */ React33.createElement("div", { ref: sentinelRef, className: "brokr-ai-chat-sentinel" }, loadingOlder ? /* @__PURE__ */ React33.createElement("div", { style: { display: "flex", justifyContent: "center", padding: "0.5rem" } }, /* @__PURE__ */ React33.createElement(Skeleton, { width: 120, height: 12, radius: 6 })) : null) : null, messageElements, /* @__PURE__ */ React33.createElement("div", { ref: bottomRef })));
+  return /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-thread", "data-empty": isEmpty, ref: scrollContainerRef }, isEmpty ? /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-empty" }, /* @__PURE__ */ React34.createElement(SparkIcon, { size: 28 }), /* @__PURE__ */ React34.createElement("h2", { className: "brokr-title" }, emptyTitle), subtitle ?? emptyCopy ? /* @__PURE__ */ React34.createElement("p", { className: "brokr-copy" }, subtitle ?? emptyCopy) : null, starterPrompts.length > 0 ? /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-starters" }, starterPrompts.map((sp) => /* @__PURE__ */ React34.createElement(StarterPromptButton, { key: sp, prompt: sp, onSend: sendMessage }))) : null) : /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-thread-inner" }, (isPersist ? hasMoreMessages : memHasMore) ? /* @__PURE__ */ React34.createElement("div", { ref: sentinelRef, className: "brokr-ai-chat-sentinel" }, loadingOlder ? /* @__PURE__ */ React34.createElement("div", { style: { display: "flex", justifyContent: "center", padding: "0.5rem" } }, /* @__PURE__ */ React34.createElement(Skeleton, { width: 120, height: 12, radius: 6 })) : null) : null, messageElements, /* @__PURE__ */ React34.createElement("div", { ref: bottomRef })));
 }
 
 // src/react/chat/ChatInput.tsx
-import React34, { useCallback as useCallback22, useEffect as useEffect11 } from "react";
+import React35, { useCallback as useCallback22, useEffect as useEffect11 } from "react";
 function CommandButton({ cmd, chatContext }) {
   const handleClick = useCallback22(() => {
     void cmd.run(chatContext);
   }, [cmd, chatContext]);
-  return /* @__PURE__ */ React34.createElement("button", { className: "brokr-ai-chat-sidebar-button", key: cmd.id, onClick: handleClick, type: "button" }, cmd.text);
+  return /* @__PURE__ */ React35.createElement("button", { className: "brokr-ai-chat-sidebar-button", key: cmd.id, onClick: handleClick, type: "button" }, cmd.text);
 }
 function ChatInput() {
   const {
@@ -7541,7 +7558,7 @@ function ChatInput() {
   const handleChange = useCallback22((e) => {
     setInput(e.target.value);
   }, [setInput]);
-  return /* @__PURE__ */ React34.createElement("form", { className: "brokr-ai-chat-input-area", onSubmit: handleSubmit }, /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-input-container" }, composerCommands.length > 0 ? /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-composer-actions" }, composerCommands.map((cmd) => /* @__PURE__ */ React34.createElement(CommandButton, { key: cmd.id, cmd, chatContext }))) : null, /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-input-row" }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement("form", { className: "brokr-ai-chat-input-area", onSubmit: handleSubmit }, /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-input-container" }, composerCommands.length > 0 ? /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-composer-actions" }, composerCommands.map((cmd) => /* @__PURE__ */ React35.createElement(CommandButton, { key: cmd.id, cmd, chatContext }))) : null, /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-input-row" }, /* @__PURE__ */ React35.createElement(
     "textarea",
     {
       className: "brokr-ai-chat-textarea",
@@ -7552,15 +7569,15 @@ function ChatInput() {
       rows: 1,
       value: input
     }
-  ), /* @__PURE__ */ React34.createElement(
+  ), /* @__PURE__ */ React35.createElement(
     "button",
     {
       className: "brokr-ai-chat-send",
       disabled: isSubmitting || !input.trim(),
       type: "submit"
     },
-    isSubmitting ? /* @__PURE__ */ React34.createElement(SparkIcon, { size: 16 }) : /* @__PURE__ */ React34.createElement(ArrowRightIcon, { size: 16 })
-  ))), error ? /* @__PURE__ */ React34.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null);
+    isSubmitting ? /* @__PURE__ */ React35.createElement(SparkIcon, { size: 16 }) : /* @__PURE__ */ React35.createElement(ArrowRightIcon, { size: 16 })
+  ))), error ? /* @__PURE__ */ React35.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null);
 }
 
 // src/react/chat/AIChat.tsx
@@ -7610,15 +7627,15 @@ function AIChat(inlineProps) {
   const explicitModel = modelProp ?? userSelectedModel ?? void 0;
   const displayModel = explicitModel ?? providers.find((p) => p.free)?.model ?? providers[0]?.model ?? "";
   const activeModel = explicitModel ?? STACK_DEFAULT;
-  const activeProvider = useMemo23(
+  const activeProvider = useMemo24(
     () => activeModel === STACK_DEFAULT ? void 0 : providers.find((p) => p.model === activeModel) ?? providers[0],
     [activeModel]
   );
-  const hasBalance = useMemo23(
+  const hasBalance = useMemo24(
     () => billing === null || billing.balanceCents === null || billing.balanceCents > 0 || billing.hasPaymentMethod,
     [billing]
   );
-  const availableProviders = useMemo23(
+  const availableProviders = useMemo24(
     () => hasBalance ? providers : providers.filter((p) => p.free),
     [hasBalance]
   );
@@ -7703,10 +7720,10 @@ function AIChat(inlineProps) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [sidebarOpen]);
-  const finalTitle = useMemo23(() => {
+  const finalTitle = useMemo24(() => {
     return chat.renderedTitle || title;
   }, [chat.renderedTitle, title]);
-  const chatContext = useMemo23(() => ({
+  const chatContext = useMemo24(() => ({
     thread: chat.activeThread,
     messages: chat.displayMessages,
     user,
@@ -7714,19 +7731,19 @@ function AIChat(inlineProps) {
     newThread: chat.startNewChat,
     setThread: chat.selectThread
   }), [chat.activeThread, chat.displayMessages, user, chat.sendMessage, chat.startNewChat, chat.selectThread]);
-  const headerCommands = useMemo23(
+  const headerCommands = useMemo24(
     () => commands.filter((c) => c.location === "header" && (!c.show || c.show(chatContext))),
     [commands, chatContext]
   );
-  const composerCommands = useMemo23(
+  const composerCommands = useMemo24(
     () => commands.filter((c) => c.location === "composer" && (!c.show || c.show(chatContext))),
     [commands, chatContext]
   );
-  const threadMenuCommands = useMemo23(
+  const threadMenuCommands = useMemo24(
     () => commands.filter((c) => c.location === "threadMenu" && (!c.show || c.show(chatContext))),
     [commands, chatContext]
   );
-  const chatState = useMemo23(() => ({
+  const chatState = useMemo24(() => ({
     displayMessages: chat.displayMessages,
     visibleMessages: chat.displayMessages,
     isSubmitting: chat.isSubmitting,
@@ -7793,16 +7810,16 @@ function AIChat(inlineProps) {
     checkout,
     user
   ]);
-  return /* @__PURE__ */ React35.createElement(ChatProvider, { value: chatState }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(ChatProvider, { value: chatState }, /* @__PURE__ */ React36.createElement(
     "section",
     {
       className: "brokr-ai-chat-shell",
       "data-sidebar": sidebarVisible,
       ref: shellRef
     },
-    sidebarVisible ? /* @__PURE__ */ React35.createElement("aside", { className: "brokr-ai-chat-sidebar brokr-ai-chat-sidebar-desktop" }, /* @__PURE__ */ React35.createElement(ThreadSidebar, null)) : null,
-    sidebarOpen ? /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-drawer-backdrop", onClick: closeSidebar }), /* @__PURE__ */ React35.createElement("aside", { className: "brokr-ai-chat-drawer" }, /* @__PURE__ */ React35.createElement(ThreadSidebar, null))) : null,
-    /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-stage", "data-noheader": !headerVisible }, headerVisible ? /* @__PURE__ */ React35.createElement(
+    sidebarVisible ? /* @__PURE__ */ React36.createElement("aside", { className: "brokr-ai-chat-sidebar brokr-ai-chat-sidebar-desktop" }, /* @__PURE__ */ React36.createElement(ThreadSidebar, null)) : null,
+    sidebarOpen ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", { className: "brokr-ai-chat-drawer-backdrop", onClick: closeSidebar }), /* @__PURE__ */ React36.createElement("aside", { className: "brokr-ai-chat-drawer" }, /* @__PURE__ */ React36.createElement(ThreadSidebar, null))) : null,
+    /* @__PURE__ */ React36.createElement("div", { className: "brokr-ai-chat-stage", "data-noheader": !headerVisible }, headerVisible ? /* @__PURE__ */ React36.createElement(
       ChatHeader,
       {
         activeId: chat.activeId,
@@ -7823,7 +7840,7 @@ function AIChat(inlineProps) {
         startRename: chatState.startRename,
         deleteThread: chat.deleteThread
       }
-    ) : null, /* @__PURE__ */ React35.createElement(
+    ) : null, /* @__PURE__ */ React36.createElement(
       MessagePane,
       {
         starterPrompts,
@@ -7831,21 +7848,21 @@ function AIChat(inlineProps) {
         emptyCopy,
         subtitle
       }
-    ), /* @__PURE__ */ React35.createElement(ChatInput, null))
+    ), /* @__PURE__ */ React36.createElement(ChatInput, null))
   ));
 }
 function CommandButton2({ cmd, chatContext }) {
   const handleClick = useCallback23(() => {
     void cmd.run(chatContext);
   }, [cmd, chatContext]);
-  return /* @__PURE__ */ React35.createElement("button", { className: "brokr-ai-chat-sidebar-button", onClick: handleClick, type: "button" }, cmd.text);
+  return /* @__PURE__ */ React36.createElement("button", { className: "brokr-ai-chat-sidebar-button", onClick: handleClick, type: "button" }, cmd.text);
 }
 function MenuCommandItem({ cmd, chatContext, onClose }) {
   const handleClick = useCallback23(() => {
     onClose();
     void cmd.run(chatContext);
   }, [cmd, chatContext, onClose]);
-  return /* @__PURE__ */ React35.createElement("button", { className: "brokr-ai-chat-thread-dropdown-item", onClick: handleClick, type: "button" }, cmd.text);
+  return /* @__PURE__ */ React36.createElement("button", { className: "brokr-ai-chat-thread-dropdown-item", onClick: handleClick, type: "button" }, cmd.text);
 }
 function ChatHeader({
   activeId,
@@ -7880,7 +7897,7 @@ function ChatHeader({
       void deleteThread(activeId);
     }
   }, [activeId, deleteThread, setThreadMenuOpenId]);
-  return /* @__PURE__ */ React35.createElement("header", { className: "brokr-ai-chat-topbar" }, /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-topbar-left" }, sidebarVisible ? /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement("header", { className: "brokr-ai-chat-topbar" }, /* @__PURE__ */ React36.createElement("div", { className: "brokr-ai-chat-topbar-left" }, sidebarVisible ? /* @__PURE__ */ React36.createElement(
     "button",
     {
       "aria-label": "Open sidebar",
@@ -7888,8 +7905,8 @@ function ChatHeader({
       onClick: handleOpenSidebar,
       type: "button"
     },
-    /* @__PURE__ */ React35.createElement(MenuIcon, { size: 18 })
-  ) : null), /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-topbar-actions" }, headerCommands.map((cmd) => /* @__PURE__ */ React35.createElement(CommandButton2, { key: cmd.id, cmd, chatContext })), modelSelectorVisible ? /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement(MenuIcon, { size: 18 })
+  ) : null), /* @__PURE__ */ React36.createElement("div", { className: "brokr-ai-chat-topbar-actions" }, headerCommands.map((cmd) => /* @__PURE__ */ React36.createElement(CommandButton2, { key: cmd.id, cmd, chatContext })), modelSelectorVisible ? /* @__PURE__ */ React36.createElement(
     ModelSelector,
     {
       activeModel,
@@ -7897,7 +7914,7 @@ function ChatHeader({
       checkout,
       setSelectedModel
     }
-  ) : null, activeId && threadMenuVisible ? /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-thread-menu-wrap", ref: threadMenuRef }, /* @__PURE__ */ React35.createElement(
+  ) : null, activeId && threadMenuVisible ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-ai-chat-thread-menu-wrap", ref: threadMenuRef }, /* @__PURE__ */ React36.createElement(
     "button",
     {
       "aria-label": "Thread actions",
@@ -7905,17 +7922,17 @@ function ChatHeader({
       onClick: handleToggleMenu,
       type: "button"
     },
-    /* @__PURE__ */ React35.createElement(MoreHorizontalIcon, { size: 14 })
-  ), threadMenuOpenId ? /* @__PURE__ */ React35.createElement("div", { className: "brokr-ai-chat-thread-dropdown" }, /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement(MoreHorizontalIcon, { size: 14 })
+  ), threadMenuOpenId ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-ai-chat-thread-dropdown" }, /* @__PURE__ */ React36.createElement(
     "button",
     {
       className: "brokr-ai-chat-thread-dropdown-item",
       onClick: handleRename,
       type: "button"
     },
-    /* @__PURE__ */ React35.createElement(PencilIcon, { size: 13 }),
+    /* @__PURE__ */ React36.createElement(PencilIcon, { size: 13 }),
     "Rename"
-  ), threadMenuCommands.map((cmd) => /* @__PURE__ */ React35.createElement(
+  ), threadMenuCommands.map((cmd) => /* @__PURE__ */ React36.createElement(
     MenuCommandItem,
     {
       key: cmd.id,
@@ -7923,7 +7940,7 @@ function ChatHeader({
       chatContext,
       onClose: closeMenu
     }
-  )), /* @__PURE__ */ React35.createElement(
+  )), /* @__PURE__ */ React36.createElement(
     "button",
     {
       className: "brokr-ai-chat-thread-dropdown-item",
@@ -7931,13 +7948,13 @@ function ChatHeader({
       onClick: handleDelete,
       type: "button"
     },
-    /* @__PURE__ */ React35.createElement(TrashIcon, { size: 13 }),
+    /* @__PURE__ */ React36.createElement(TrashIcon, { size: 13 }),
     "Delete"
   )) : null) : null));
 }
 
 // src/react/composites/FabAI.tsx
-import React36, { useCallback as useCallback24, useMemo as useMemo24, useRef as useRef8, useState as useState19 } from "react";
+import React37, { useCallback as useCallback24, useMemo as useMemo25, useRef as useRef8, useState as useState19 } from "react";
 
 // src/react/composites/fab-context.ts
 function buildFabSystemPrompt(appContext, brandName, existingPrompt) {
@@ -7994,14 +8011,14 @@ function FabAI({
   const [isSending, setIsSending] = useState19(false);
   const [messages, setMessages] = useState19([]);
   const conversationIdRef = useRef8(`fab_${crypto.randomUUID()}`);
-  const launcherStyle = useMemo24(
+  const launcherStyle = useMemo25(
     () => ({
       left: position === "bottom-left" ? "var(--brokr-space-6)" : void 0,
       right: position === "bottom-right" ? "var(--brokr-space-6)" : void 0
     }),
     [position]
   );
-  const canChat = useMemo24(() => can("ai.chat"), [can]);
+  const canChat = useMemo25(() => can("ai.chat"), [can]);
   const toggleOpen = useCallback24(() => {
     if (!canChat) {
       redirectTo("/pricing");
@@ -8096,7 +8113,7 @@ function FabAI({
       void sendPrompt(input);
     }
   }, [input, sendPrompt]);
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", { className: "brokr-chat-fab", style: launcherStyle }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("div", { className: "brokr-chat-fab", style: launcherStyle }, /* @__PURE__ */ React37.createElement(
     "button",
     {
       "aria-label": isOpen ? "Close AI chat" : "Open AI chat",
@@ -8106,21 +8123,21 @@ function FabAI({
       onClick: toggleOpen,
       type: "button"
     },
-    /* @__PURE__ */ React36.createElement(SparkIcon, { size: 18 })
-  )), isOpen ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-panel brokr-chat-panel", role: "dialog" }, /* @__PURE__ */ React36.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React36.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React36.createElement("strong", null, "AI Chat"), user?.name ? /* @__PURE__ */ React36.createElement("span", { className: "brokr-copy" }, user.name) : null), /* @__PURE__ */ React36.createElement("button", { className: "brokr-button-ghost", onClick: handleClose, type: "button" }, /* @__PURE__ */ React36.createElement(CloseIcon, { size: 16 }))), /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(SparkIcon, { size: 18 })
+  )), isOpen ? /* @__PURE__ */ React37.createElement("div", { className: "brokr-panel brokr-chat-panel", role: "dialog" }, /* @__PURE__ */ React37.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React37.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React37.createElement("strong", null, "AI Chat"), user?.name ? /* @__PURE__ */ React37.createElement("span", { className: "brokr-copy" }, user.name) : null), /* @__PURE__ */ React37.createElement("button", { className: "brokr-button-ghost", onClick: handleClose, type: "button" }, /* @__PURE__ */ React37.createElement(CloseIcon, { size: 16 }))), /* @__PURE__ */ React37.createElement(
     "div",
     {
       className: "brokr-chat-messages",
       "data-empty": messages.length === 0
     },
-    messages.length === 0 ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-chat-empty" }, /* @__PURE__ */ React36.createElement(SparkIcon, { size: 18 }), /* @__PURE__ */ React36.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React36.createElement("strong", null, "Send a message to chat with the AI."), /* @__PURE__ */ React36.createElement("span", { className: "brokr-copy" }, "Ask a question or drop in a starter prompt below."))) : null,
+    messages.length === 0 ? /* @__PURE__ */ React37.createElement("div", { className: "brokr-chat-empty" }, /* @__PURE__ */ React37.createElement(SparkIcon, { size: 18 }), /* @__PURE__ */ React37.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React37.createElement("strong", null, "Send a message to chat with the AI."), /* @__PURE__ */ React37.createElement("span", { className: "brokr-copy" }, "Ask a question or drop in a starter prompt below."))) : null,
     messages.map((message, index) => {
       const text = contentToText(message.content);
       const isTyping = message.role === "assistant" && !text && isSending && index === messages.length - 1;
-      return /* @__PURE__ */ React36.createElement("div", { className: "brokr-chat-bubble", "data-role": message.role, key: `${message.role}-${index}` }, isTyping ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-ai-chat-typing", "aria-label": "AI is typing" }, /* @__PURE__ */ React36.createElement("span", null), /* @__PURE__ */ React36.createElement("span", null), /* @__PURE__ */ React36.createElement("span", null)) : message.role === "assistant" ? /* @__PURE__ */ React36.createElement(MarkdownRenderer, { content: text }) : text);
+      return /* @__PURE__ */ React37.createElement("div", { className: "brokr-chat-bubble", "data-role": message.role, key: `${message.role}-${index}` }, isTyping ? /* @__PURE__ */ React37.createElement("div", { className: "brokr-ai-chat-typing", "aria-label": "AI is typing" }, /* @__PURE__ */ React37.createElement("span", null), /* @__PURE__ */ React37.createElement("span", null), /* @__PURE__ */ React37.createElement("span", null)) : message.role === "assistant" ? /* @__PURE__ */ React37.createElement(MarkdownRenderer, { content: text }) : text);
     }),
-    error ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null
-  ), /* @__PURE__ */ React36.createElement("form", { className: "brokr-section", onSubmit: handleSubmit, style: { gap: "var(--brokr-space-3)" } }, /* @__PURE__ */ React36.createElement(
+    error ? /* @__PURE__ */ React37.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null
+  ), /* @__PURE__ */ React37.createElement("form", { className: "brokr-section", onSubmit: handleSubmit, style: { gap: "var(--brokr-space-3)" } }, /* @__PURE__ */ React37.createElement(
     "textarea",
     {
       className: "brokr-textarea brokr-chat-input",
@@ -8130,14 +8147,14 @@ function FabAI({
       rows: 2,
       value: input
     }
-  ), /* @__PURE__ */ React36.createElement("button", { className: "brokr-button", disabled: isSending || !input.trim(), type: "submit" }, isSending ? "Thinking" : "Send"))) : null);
+  ), /* @__PURE__ */ React37.createElement("button", { className: "brokr-button", disabled: isSending || !input.trim(), type: "submit" }, isSending ? "Thinking" : "Send"))) : null);
 }
 
 // src/react/composites/SmartUpload.tsx
-import React37, {
+import React38, {
   useCallback as useCallback25,
   useId as useId2,
-  useMemo as useMemo25,
+  useMemo as useMemo26,
   useRef as useRef9,
   useState as useState20
 } from "react";
@@ -8155,7 +8172,7 @@ function SmartUpload({
   const [fileName, setFileName] = useState20(null);
   const [progress, setProgress] = useState20(0);
   const [isUploading, setIsUploading] = useState20(false);
-  const helperText = useMemo25(() => {
+  const helperText = useMemo26(() => {
     return `${Math.round(maxSize / (1024 * 1024))} MB max file size.`;
   }, [maxSize]);
   const beginUpload = useCallback25((file) => {
@@ -8219,7 +8236,7 @@ function SmartUpload({
   const handleBrowse = useCallback25(() => {
     inputRef.current?.click();
   }, []);
-  return /* @__PURE__ */ React37.createElement("div", { className: "brokr-card brokr-upload-shell" }, /* @__PURE__ */ React37.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React37.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React37.createElement("strong", null, "Upload files"), /* @__PURE__ */ React37.createElement("span", { className: "brokr-copy" }, "Drop a file and let Brokr handle the boring part.")), paymentsMode === "sandbox" ? /* @__PURE__ */ React37.createElement("span", { className: "brokr-badge brokr-badge-sandbox" }, "Sandbox") : null), /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement("div", { className: "brokr-card brokr-upload-shell" }, /* @__PURE__ */ React38.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React38.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React38.createElement("strong", null, "Upload files"), /* @__PURE__ */ React38.createElement("span", { className: "brokr-copy" }, "Drop a file and let Brokr handle the boring part.")), paymentsMode === "sandbox" ? /* @__PURE__ */ React38.createElement("span", { className: "brokr-badge brokr-badge-sandbox" }, "Sandbox") : null), /* @__PURE__ */ React38.createElement(
     "label",
     {
       className: "brokr-upload-dropzone",
@@ -8230,11 +8247,11 @@ function SmartUpload({
       onDragOver: handleDragEnter,
       onDrop: handleDrop
     },
-    /* @__PURE__ */ React37.createElement(UploadIcon, { size: 24 }),
-    /* @__PURE__ */ React37.createElement("strong", null, "Drag and drop a file here or choose one"),
-    /* @__PURE__ */ React37.createElement("span", { className: "brokr-copy" }, helperText),
-    /* @__PURE__ */ React37.createElement("button", { className: "brokr-button-secondary", onClick: handleBrowse, type: "button" }, "Choose file")
-  ), /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React38.createElement(UploadIcon, { size: 24 }),
+    /* @__PURE__ */ React38.createElement("strong", null, "Drag and drop a file here or choose one"),
+    /* @__PURE__ */ React38.createElement("span", { className: "brokr-copy" }, helperText),
+    /* @__PURE__ */ React38.createElement("button", { className: "brokr-button-secondary", onClick: handleBrowse, type: "button" }, "Choose file")
+  ), /* @__PURE__ */ React38.createElement(
     "input",
     {
       accept,
@@ -8244,11 +8261,11 @@ function SmartUpload({
       ref: inputRef,
       type: "file"
     }
-  ), fileName ? /* @__PURE__ */ React37.createElement("div", { className: "brokr-card brokr-upload-file" }, /* @__PURE__ */ React37.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React37.createElement("strong", null, fileName), /* @__PURE__ */ React37.createElement("span", { className: "brokr-copy" }, isUploading ? `Uploading ${progress}%` : progress === 100 ? "Processed" : "Queued")), /* @__PURE__ */ React37.createElement("div", { className: "brokr-meter-bar" }, /* @__PURE__ */ React37.createElement("div", { className: "brokr-meter-fill", style: { width: `${progress}%` } }))) : null, error ? /* @__PURE__ */ React37.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null);
+  ), fileName ? /* @__PURE__ */ React38.createElement("div", { className: "brokr-card brokr-upload-file" }, /* @__PURE__ */ React38.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React38.createElement("strong", null, fileName), /* @__PURE__ */ React38.createElement("span", { className: "brokr-copy" }, isUploading ? `Uploading ${progress}%` : progress === 100 ? "Processed" : "Queued")), /* @__PURE__ */ React38.createElement("div", { className: "brokr-meter-bar" }, /* @__PURE__ */ React38.createElement("div", { className: "brokr-meter-fill", style: { width: `${progress}%` } }))) : null, error ? /* @__PURE__ */ React38.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null);
 }
 
 // src/react/composites/FeedbackWidget.tsx
-import React38, { useCallback as useCallback26, useState as useState21 } from "react";
+import React39, { useCallback as useCallback26, useState as useState21 } from "react";
 function FeedbackWidget({
   context,
   onSubmit
@@ -8298,7 +8315,7 @@ function FeedbackWidget({
       setIsPending(false);
     }
   }, [context, onSubmit, rating, text, user?.id]);
-  return /* @__PURE__ */ React38.createElement("form", { className: "brokr-card brokr-feedback-shell", onSubmit: handleSubmit }, /* @__PURE__ */ React38.createElement("div", { className: "brokr-section", style: { gap: "0.5rem" } }, /* @__PURE__ */ React38.createElement("strong", null, "How did this feel?"), /* @__PURE__ */ React38.createElement("p", { className: "brokr-copy" }, "Tight signal only. Tell us what helped or what felt off.")), /* @__PURE__ */ React38.createElement("div", { className: "brokr-feedback-rating" }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement("form", { className: "brokr-card brokr-feedback-shell", onSubmit: handleSubmit }, /* @__PURE__ */ React39.createElement("div", { className: "brokr-section", style: { gap: "0.5rem" } }, /* @__PURE__ */ React39.createElement("strong", null, "How did this feel?"), /* @__PURE__ */ React39.createElement("p", { className: "brokr-copy" }, "Tight signal only. Tell us what helped or what felt off.")), /* @__PURE__ */ React39.createElement("div", { className: "brokr-feedback-rating" }, /* @__PURE__ */ React39.createElement(
     "button",
     {
       className: "brokr-rating-button",
@@ -8307,7 +8324,7 @@ function FeedbackWidget({
       type: "button"
     },
     "This worked"
-  ), /* @__PURE__ */ React38.createElement(
+  ), /* @__PURE__ */ React39.createElement(
     "button",
     {
       className: "brokr-rating-button",
@@ -8316,7 +8333,7 @@ function FeedbackWidget({
       type: "button"
     },
     "Needs work"
-  )), /* @__PURE__ */ React38.createElement(
+  )), /* @__PURE__ */ React39.createElement(
     "textarea",
     {
       className: "brokr-textarea",
@@ -8325,11 +8342,11 @@ function FeedbackWidget({
       rows: 4,
       value: text
     }
-  ), error ? /* @__PURE__ */ React38.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null, message ? /* @__PURE__ */ React38.createElement("div", { className: "brokr-inline-message" }, message) : null, /* @__PURE__ */ React38.createElement("button", { className: "brokr-button", disabled: isPending, type: "submit" }, isPending ? "Sending" : "Send feedback"));
+  ), error ? /* @__PURE__ */ React39.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null, message ? /* @__PURE__ */ React39.createElement("div", { className: "brokr-inline-message" }, message) : null, /* @__PURE__ */ React39.createElement("button", { className: "brokr-button", disabled: isPending, type: "submit" }, isPending ? "Sending" : "Send feedback"));
 }
 
 // src/react/BrokrErrorBoundary.tsx
-import React39 from "react";
+import React40 from "react";
 
 // src/fix-registry.ts
 var FIX_REGISTRY = {
@@ -8553,7 +8570,7 @@ var BrokrError = class extends Error {
 };
 
 // src/react/BrokrErrorBoundary.tsx
-var BrokrErrorBoundary = class extends React39.Component {
+var BrokrErrorBoundary = class extends React40.Component {
   constructor() {
     super(...arguments);
     this.state = { hasError: false, error: null };
@@ -8565,11 +8582,11 @@ var BrokrErrorBoundary = class extends React39.Component {
     if (this.state.hasError) {
       if (this.props.fallback) return this.props.fallback;
       const message = this.state.error instanceof BrokrError ? this.state.error.toUserMessage() : "Something went wrong.";
-      return React39.createElement(
+      return React40.createElement(
         "div",
         { style: { padding: 24, textAlign: "center" } },
-        React39.createElement("p", null, message),
-        React39.createElement(
+        React40.createElement("p", null, message),
+        React40.createElement(
           "button",
           {
             onClick: () => this.setState({ hasError: false, error: null }),
@@ -8583,8 +8600,8 @@ var BrokrErrorBoundary = class extends React39.Component {
   }
 };
 
-// src/react/notifications/NotificationBell.tsx
-import React40, { useCallback as useCallback27, useEffect as useEffect13, useMemo as useMemo26, useRef as useRef10, useState as useState22 } from "react";
+// src/react/notifications/ActivityFeed.tsx
+import React41, { useCallback as useCallback27, useMemo as useMemo27 } from "react";
 
 // src/react/notifications/use-notifications.ts
 import { useContext as useContext4 } from "react";
@@ -8598,7 +8615,7 @@ function useNotifications() {
   return ctx;
 }
 
-// src/react/notifications/NotificationBell.tsx
+// src/react/notifications/ActivityFeed.tsx
 function timeAgo(iso) {
   const diff = Date.now() - new Date(iso).getTime();
   const mins = Math.floor(diff / 6e4);
@@ -8609,16 +8626,79 @@ function timeAgo(iso) {
   const days = Math.floor(hours / 24);
   return `${days}d ago`;
 }
+function FeedItem({
+  item,
+  formatter
+}) {
+  if (formatter) {
+    return /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed-item" }, formatter(item));
+  }
+  return /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed-item" }, /* @__PURE__ */ React41.createElement("span", { className: `brokr-feed-dot brokr-feed-dot--${item.variant}` }), /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed-content" }, /* @__PURE__ */ React41.createElement("span", { className: "brokr-feed-title" }, item.title), item.message ? /* @__PURE__ */ React41.createElement("span", { className: "brokr-feed-message" }, item.message) : null), /* @__PURE__ */ React41.createElement("span", { className: "brokr-feed-time" }, timeAgo(item.createdAt)));
+}
+function ActivityFeed({
+  filter,
+  maxItems = 20,
+  formatters,
+  emptyState
+}) {
+  const { notifications, isLoading } = useNotifications();
+  const items = useMemo27(() => {
+    let filtered = notifications;
+    if (filter && filter.length > 0) {
+      const set = new Set(filter);
+      filtered = notifications.filter(
+        (n) => set.has(n.variant) || n.type && set.has(n.type)
+      );
+    }
+    return [...filtered].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).slice(0, maxItems);
+  }, [notifications, filter, maxItems]);
+  const getFormatter = useCallback27(
+    (item) => {
+      if (!formatters) return void 0;
+      if (item.type && formatters[item.type]) return formatters[item.type];
+      if (formatters[item.variant]) return formatters[item.variant];
+      return void 0;
+    },
+    [formatters]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed" }, [1, 2, 3].map((i) => /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed-item", key: i }, /* @__PURE__ */ React41.createElement("span", { className: "brokr-feed-dot" }), /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed-content" }, /* @__PURE__ */ React41.createElement("span", { className: "brokr-skeleton", style: { width: "60%", height: 12 } }), /* @__PURE__ */ React41.createElement("span", { className: "brokr-skeleton", style: { width: "80%", height: 12 } })), /* @__PURE__ */ React41.createElement("span", { className: "brokr-skeleton", style: { width: 40, height: 12 } }))));
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed" }, /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed-empty" }, emptyState ?? /* @__PURE__ */ React41.createElement("span", { className: "brokr-copy" }, "No activity yet.")));
+  }
+  return /* @__PURE__ */ React41.createElement("div", { className: "brokr-feed" }, items.map((item) => /* @__PURE__ */ React41.createElement(
+    FeedItem,
+    {
+      key: item.id,
+      item,
+      formatter: getFormatter(item)
+    }
+  )));
+}
+
+// src/react/notifications/NotificationBell.tsx
+import React42, { useCallback as useCallback28, useEffect as useEffect13, useMemo as useMemo28, useRef as useRef10, useState as useState22 } from "react";
+function timeAgo2(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
 function NotifDropdownItem({
   notif,
   registry,
   onClick
 }) {
-  const handleClick = useCallback27(() => onClick(notif), [notif, onClick]);
+  const handleClick = useCallback28(() => onClick(notif), [notif, onClick]);
   const notifData = notif.data ?? {};
   const notifType = notifData.type ?? "default";
   const resolved = resolveNotificationType(registry, notifType, notifData);
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React42.createElement(
     "button",
     {
       type: "button",
@@ -8626,9 +8706,9 @@ function NotifDropdownItem({
       onClick: handleClick,
       role: "menuitem"
     },
-    resolved.image ? /* @__PURE__ */ React40.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ React40.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
-    /* @__PURE__ */ React40.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React40.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React40.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
-    /* @__PURE__ */ React40.createElement("span", { className: "brokr-notif-item-time" }, timeAgo(notif.createdAt))
+    resolved.image ? /* @__PURE__ */ React42.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ React42.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+    /* @__PURE__ */ React42.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React42.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React42.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+    /* @__PURE__ */ React42.createElement("span", { className: "brokr-notif-item-time" }, timeAgo2(notif.createdAt))
   );
 }
 function NotificationBell() {
@@ -8636,7 +8716,7 @@ function NotificationBell() {
   const [open, setOpen] = useState22(false);
   const containerRef = useRef10(null);
   const markReadTimerRef = useRef10(null);
-  const toggle = useCallback27(() => setOpen((o) => !o), []);
+  const toggle = useCallback28(() => setOpen((o) => !o), []);
   useEffect13(() => {
     if (markReadTimerRef.current) {
       clearTimeout(markReadTimerRef.current);
@@ -8672,13 +8752,13 @@ function NotificationBell() {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [open]);
-  const sorted = useMemo26(
+  const sorted = useMemo28(
     () => [...notifications].sort(
       (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
     ),
     [notifications]
   );
-  const handleItemClick = useCallback27((notif) => {
+  const handleItemClick = useCallback28((notif) => {
     if (!notif.read) markRead(notif.id);
     const notifData = notif.data ?? {};
     const notifType = notif.type ?? notifData.type ?? "default";
@@ -8688,7 +8768,7 @@ function NotificationBell() {
       window.location.assign(href);
     }
   }, [markRead, registry]);
-  return /* @__PURE__ */ React40.createElement("div", { className: "brokr-notif-bell-wrap", ref: containerRef }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React42.createElement("div", { className: "brokr-notif-bell-wrap", ref: containerRef }, /* @__PURE__ */ React42.createElement(
     "button",
     {
       type: "button",
@@ -8698,9 +8778,9 @@ function NotificationBell() {
       "aria-expanded": open,
       "aria-haspopup": "menu"
     },
-    /* @__PURE__ */ React40.createElement("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React40.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React40.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })),
-    unreadCount > 0 && /* @__PURE__ */ React40.createElement("span", { className: "brokr-notif-badge" }, unreadCount > 99 ? "99+" : unreadCount)
-  ), open && /* @__PURE__ */ React40.createElement("div", { className: "brokr-notif-dropdown", role: "menu" }, /* @__PURE__ */ React40.createElement("div", { className: "brokr-notif-dropdown-header" }, /* @__PURE__ */ React40.createElement("span", { className: "brokr-notif-dropdown-title" }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React42.createElement("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React42.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React42.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })),
+    unreadCount > 0 && /* @__PURE__ */ React42.createElement("span", { className: "brokr-notif-badge" }, unreadCount > 99 ? "99+" : unreadCount)
+  ), open && /* @__PURE__ */ React42.createElement("div", { className: "brokr-notif-dropdown", role: "menu" }, /* @__PURE__ */ React42.createElement("div", { className: "brokr-notif-dropdown-header" }, /* @__PURE__ */ React42.createElement("span", { className: "brokr-notif-dropdown-title" }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React42.createElement(
     "button",
     {
       type: "button",
@@ -8708,7 +8788,7 @@ function NotificationBell() {
       onClick: markAllRead
     },
     "Mark all read"
-  )), /* @__PURE__ */ React40.createElement("div", { className: "brokr-notif-dropdown-list" }, isLoading ? /* @__PURE__ */ React40.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React40.createElement("span", { className: "brokr-notif-empty-text" }, "Loading\u2026")) : sorted.length === 0 ? /* @__PURE__ */ React40.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React40.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : sorted.map((notif) => /* @__PURE__ */ React40.createElement(
+  )), /* @__PURE__ */ React42.createElement("div", { className: "brokr-notif-dropdown-list" }, isLoading ? /* @__PURE__ */ React42.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React42.createElement("span", { className: "brokr-notif-empty-text" }, "Loading\u2026")) : sorted.length === 0 ? /* @__PURE__ */ React42.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React42.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : sorted.map((notif) => /* @__PURE__ */ React42.createElement(
     NotifDropdownItem,
     {
       key: notif.id,
@@ -8720,7 +8800,7 @@ function NotificationBell() {
 }
 
 // src/react/notifications/NotificationList.tsx
-import React41, { useCallback as useCallback28, useMemo as useMemo27 } from "react";
+import React43, { useCallback as useCallback29, useMemo as useMemo29 } from "react";
 function formatTimestamp(iso) {
   const date = new Date(iso);
   return new Intl.DateTimeFormat("en-US", {
@@ -8731,38 +8811,38 @@ function formatTimestamp(iso) {
   }).format(date);
 }
 function NotificationListSkeleton() {
-  return /* @__PURE__ */ React41.createElement("div", { className: "brokr-notif-list-items" }, [1, 2, 3].map((i) => /* @__PURE__ */ React41.createElement("div", { key: i, className: "brokr-notif-list-row brokr-notif-list-row--skeleton" }, /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-item-dot brokr-notif-item-dot--skeleton" }), /* @__PURE__ */ React41.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-item-title brokr-skeleton-line", style: { width: "60%" } }), /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-item-message brokr-skeleton-line", style: { width: "80%" } })), /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-item-time brokr-skeleton-line", style: { width: 48 } }))));
+  return /* @__PURE__ */ React43.createElement("div", { className: "brokr-notif-list-items" }, [1, 2, 3].map((i) => /* @__PURE__ */ React43.createElement("div", { key: i, className: "brokr-notif-list-row brokr-notif-list-row--skeleton" }, /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-item-dot brokr-notif-item-dot--skeleton" }), /* @__PURE__ */ React43.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-item-title brokr-skeleton-line", style: { width: "60%" } }), /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-item-message brokr-skeleton-line", style: { width: "80%" } })), /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-item-time brokr-skeleton-line", style: { width: 48 } }))));
 }
 function NotifListItem({
   notif,
   registry,
   onClick
 }) {
-  const handleClick = useCallback28(() => onClick(notif), [notif, onClick]);
+  const handleClick = useCallback29(() => onClick(notif), [notif, onClick]);
   const notifData = notif.data ?? {};
   const notifType = notif.type ?? notifData.type ?? "default";
   const resolved = resolveNotificationType(registry, notifType, notifData);
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "button",
     {
       type: "button",
       className: `brokr-notif-list-row${notif.read ? "" : " brokr-notif-list-row--unread"}`,
       onClick: handleClick
     },
-    resolved.image ? /* @__PURE__ */ React41.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ React41.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
-    /* @__PURE__ */ React41.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
-    /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-item-time" }, formatTimestamp(notif.createdAt))
+    resolved.image ? /* @__PURE__ */ React43.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ React43.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+    /* @__PURE__ */ React43.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+    /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-item-time" }, formatTimestamp(notif.createdAt))
   );
 }
 function NotificationList() {
   const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
-  const sorted = useMemo27(
+  const sorted = useMemo29(
     () => [...notifications].sort(
       (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
     ),
     [notifications]
   );
-  const handleClick = useCallback28((notif) => {
+  const handleClick = useCallback29((notif) => {
     if (!notif.read) markRead(notif.id);
     const notifData = notif.data ?? {};
     const notifType = notif.type ?? notifData.type ?? "default";
@@ -8772,7 +8852,7 @@ function NotificationList() {
       window.location.assign(href);
     }
   }, [markRead, registry]);
-  return /* @__PURE__ */ React41.createElement("div", { className: "brokr-notif-list" }, /* @__PURE__ */ React41.createElement("div", { className: "brokr-notif-list-header" }, /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-list-title" }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React43.createElement("div", { className: "brokr-notif-list" }, /* @__PURE__ */ React43.createElement("div", { className: "brokr-notif-list-header" }, /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-list-title" }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React43.createElement(
     "button",
     {
       type: "button",
@@ -8780,7 +8860,7 @@ function NotificationList() {
       onClick: markAllRead
     },
     "Mark all read"
-  )), isLoading ? /* @__PURE__ */ React41.createElement(NotificationListSkeleton, null) : sorted.length === 0 ? /* @__PURE__ */ React41.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React41.createElement("svg", { "aria-hidden": "true", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.3 } }, /* @__PURE__ */ React41.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React41.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })), /* @__PURE__ */ React41.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : /* @__PURE__ */ React41.createElement("div", { className: "brokr-notif-list-items" }, sorted.map((notif) => /* @__PURE__ */ React41.createElement(
+  )), isLoading ? /* @__PURE__ */ React43.createElement(NotificationListSkeleton, null) : sorted.length === 0 ? /* @__PURE__ */ React43.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React43.createElement("svg", { "aria-hidden": "true", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.3 } }, /* @__PURE__ */ React43.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React43.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })), /* @__PURE__ */ React43.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : /* @__PURE__ */ React43.createElement("div", { className: "brokr-notif-list-items" }, sorted.map((notif) => /* @__PURE__ */ React43.createElement(
     NotifListItem,
     {
       key: notif.id,
@@ -8820,6 +8900,7 @@ function defineAccount(config) {
 export {
   AIChat,
   AccountPanel,
+  ActivityFeed,
   AuthPageShell,
   AuthWall,
   AutoReloadToggle,
@@ -8849,8 +8930,10 @@ export {
   UpdateBilling,
   UpgradePrompt,
   UsageGate,
+  UsageGrid,
   UserButton,
   defineAccount,
+  defineBrokrTheme,
   defineChat,
   useBrokr,
   useBrokrTheme,