@brokr/sdk 2.0.0 → 2.1.0

package/dist/react.mjs

@@ -4173,10 +4173,12 @@ function getBrokrRootStyle(theme) {
     ...theme.colors.error ? { ["--brokr-error"]: theme.colors.error } : {},
     ...theme.colors.success ? { ["--brokr-success"]: theme.colors.success } : {},
     ...theme.colors.warning ? { ["--brokr-warning"]: theme.colors.warning } : {},
-    ...theme.colors.toastBg ? { ["--brokr-toast-bg"]: theme.colors.toastBg } : {},
-    ...theme.colors.toastText ? { ["--brokr-toast-text"]: theme.colors.toastText } : {},
-    ...theme.colors.toastTextSecondary ? { ["--brokr-toast-text-secondary"]: theme.colors.toastTextSecondary } : {},
-    ...theme.colors.toastBorder ? { ["--brokr-toast-border"]: theme.colors.toastBorder } : {},
+    // Toast vars always emitted with smart defaults — toasts stay light in dark mode.
+    // Users can override via theme.colors.toastBg etc.
+    ["--brokr-toast-bg"]: theme.colors.toastBg ?? "#ffffff",
+    ["--brokr-toast-text"]: theme.colors.toastText ?? "#0a0a0a",
+    ["--brokr-toast-text-secondary"]: theme.colors.toastTextSecondary ?? "#52525b",
+    ["--brokr-toast-border"]: theme.colors.toastBorder ?? "#e4e4e7",
     ["--brokr-radius-card"]: `${theme.radii.card}px`,
     ["--brokr-radius-input"]: `${theme.radii.input}px`,
     ["--brokr-radius-button"]: `${theme.radii.button}px`
@@ -4298,6 +4300,37 @@ function resolveNotificationType(registry, type, data) {
 
 // src/react/notifications/Toast.tsx
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+function ToastItem({
+  notification,
+  exiting,
+  registry,
+  onDismiss
+}) {
+  const handleDismiss = useCallback(() => onDismiss(notification.id), [notification.id, onDismiss]);
+  const notifData = notification.data ?? {};
+  const notifType = notifData.type ?? "default";
+  const resolved = resolveNotificationType(registry, notifType, notifData);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `brokr-toast brokr-toast--${notification.variant}${exiting ? " brokr-toast--exit" : ""}`,
+      role: "alert",
+      "aria-live": "polite"
+    },
+    resolved.image ? /* @__PURE__ */ React.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-toast-provider-logo" }) : /* @__PURE__ */ React.createElement("span", { className: `brokr-toast-icon brokr-toast-icon--${notification.variant}` }),
+    /* @__PURE__ */ React.createElement("div", { className: "brokr-toast-content" }, /* @__PURE__ */ React.createElement("span", { className: "brokr-toast-title" }, notification.title), /* @__PURE__ */ React.createElement("span", { className: "brokr-toast-message" }, notification.message)),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "brokr-toast-dismiss",
+        onClick: handleDismiss,
+        "aria-label": "Dismiss notification"
+      },
+      /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ React.createElement("path", { d: "M18 6 6 18M6 6l12 12" }))
+    )
+  );
+}
 var DEFAULT_DURATION = 4e3;
 var DEFAULT_MAX_VISIBLE = 3;
 var EXIT_ANIMATION_MS = 300;
@@ -4308,6 +4341,26 @@ function ToastLayer({ toasts, config, registry, onDismiss }) {
   const duration = config.toast?.duration ?? DEFAULT_DURATION;
   const maxVisible = config.toast?.maxVisible ?? DEFAULT_MAX_VISIBLE;
   const position = config.toast?.position ?? "top-right";
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  const exitingRef = useRef(/* @__PURE__ */ new Set());
+  const dismissToast = useCallback((id) => {
+    if (exitingRef.current.has(id)) return;
+    exitingRef.current.add(id);
+    setEntries(
+      (prev) => prev.map((e) => e.notification.id === id ? { ...e, exiting: true } : e)
+    );
+    setTimeout(() => {
+      setEntries((prev) => prev.filter((e) => e.notification.id !== id));
+      onDismissRef.current(id);
+      exitingRef.current.delete(id);
+    }, EXIT_ANIMATION_MS);
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
+  }, []);
   useEffect(() => {
     for (const toast of toasts) {
       if (processedRef.current.has(toast.id)) continue;
@@ -4326,21 +4379,7 @@ function ToastLayer({ toasts, config, registry, onDismiss }) {
         timersRef.current.set(toast.id, timer);
       }
     }
-  }, [toasts, duration, maxVisible]);
-  const dismissToast = useCallback((id) => {
-    setEntries(
-      (prev) => prev.map((e) => e.notification.id === id ? { ...e, exiting: true } : e)
-    );
-    setTimeout(() => {
-      setEntries((prev) => prev.filter((e) => e.notification.id !== id));
-      onDismiss(id);
-    }, EXIT_ANIMATION_MS);
-    const timer = timersRef.current.get(id);
-    if (timer) {
-      clearTimeout(timer);
-      timersRef.current.delete(id);
-    }
-  }, [onDismiss]);
+  }, [toasts, duration, maxVisible, dismissToast]);
   useEffect(() => {
     return () => {
       for (const timer of timersRef.current.values()) {
@@ -4360,39 +4399,16 @@ function ToastLayer({ toasts, config, registry, onDismiss }) {
     return map[position] ?? "brokr-toast-layer--bottom-right";
   }, [position]);
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: `brokr-toast-layer ${positionClass}` }, entries.map(({ notification, exiting }) => {
-    const notifData = notification.data ?? {};
-    const notifType = notifData.type ?? "default";
-    const resolved = resolveNotificationType(registry, notifType, notifData);
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: notification.id,
-        className: `brokr-toast brokr-toast--${notification.variant}${exiting ? " brokr-toast--exit" : ""}`,
-        role: "alert",
-        "aria-live": "polite"
-      },
-      resolved.image ? /* @__PURE__ */ React.createElement(
-        "img",
-        {
-          src: resolved.image.url,
-          alt: resolved.image.alt,
-          className: "brokr-toast-provider-logo"
-        }
-      ) : /* @__PURE__ */ React.createElement("span", { className: `brokr-toast-icon brokr-toast-icon--${notification.variant}` }),
-      /* @__PURE__ */ React.createElement("div", { className: "brokr-toast-content" }, /* @__PURE__ */ React.createElement("span", { className: "brokr-toast-title" }, notification.title), /* @__PURE__ */ React.createElement("span", { className: "brokr-toast-message" }, notification.message)),
-      /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          className: "brokr-toast-dismiss",
-          onClick: () => dismissToast(notification.id),
-          "aria-label": "Dismiss notification"
-        },
-        /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ React.createElement("path", { d: "M18 6 6 18M6 6l12 12" }))
-      )
-    );
-  }));
+  return /* @__PURE__ */ React.createElement("div", { className: `brokr-toast-layer ${positionClass}` }, entries.map(({ notification, exiting }) => /* @__PURE__ */ React.createElement(
+    ToastItem,
+    {
+      key: notification.id,
+      notification,
+      exiting,
+      registry,
+      onDismiss: dismissToast
+    }
+  )));
 }
 
 // src/react/notifications/provider.tsx
@@ -5515,6 +5531,26 @@ function filterDefined(defaults, overrides) {
 }
 
 // src/react/account/AccountPanel.tsx
+function AccountTabButton({
+  tab,
+  active,
+  icon,
+  label,
+  onSelect
+}) {
+  const handleClick = useCallback8(() => onSelect(tab), [tab, onSelect]);
+  return /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      className: "brokr-account-tab",
+      "data-active": active,
+      onClick: handleClick,
+      type: "button"
+    },
+    /* @__PURE__ */ React10.createElement("span", { className: "brokr-account-tab-icon" }, icon),
+    /* @__PURE__ */ React10.createElement("span", null, label)
+  );
+}
 var TAB_META = {
   general: {
     label: "General"
@@ -5646,16 +5682,15 @@ function AccountPanel(inlineProps) {
     }
   }, []);
   return /* @__PURE__ */ React10.createElement("section", { className: "brokr-account-panel", "data-density": density }, /* @__PURE__ */ React10.createElement("aside", { className: "brokr-account-sidebar" }, groupedTabs.map((group) => /* @__PURE__ */ React10.createElement("div", { className: "brokr-account-sidebar-group", key: group.label }, /* @__PURE__ */ React10.createElement("span", { className: "brokr-account-sidebar-kicker" }, group.label), /* @__PURE__ */ React10.createElement("nav", { className: "brokr-account-tab-list", "aria-label": `${group.label} settings` }, group.tabs.map((tab) => /* @__PURE__ */ React10.createElement(
-    "button",
+    AccountTabButton,
     {
-      className: "brokr-account-tab",
-      "data-active": activeTab === tab,
       key: tab,
-      onClick: () => setActiveTab(tab),
-      type: "button"
-    },
-    /* @__PURE__ */ React10.createElement("span", { className: "brokr-account-tab-icon" }, getTabIcon(tab)),
-    /* @__PURE__ */ React10.createElement("span", null, TAB_META[tab].label)
+      tab,
+      active: activeTab === tab,
+      icon: getTabIcon(tab),
+      label: TAB_META[tab].label,
+      onSelect: setActiveTab
+    }
   )))))), /* @__PURE__ */ React10.createElement("div", { className: "brokr-account-surface" }, /* @__PURE__ */ React10.createElement("header", { className: "brokr-account-surface-header" }, /* @__PURE__ */ React10.createElement("h2", { className: "brokr-title" }, activeTabMeta.label)), activeTab === "general" ? /* @__PURE__ */ React10.createElement("form", { className: "brokr-account-form", onSubmit: handleSaveProfile }, /* @__PURE__ */ React10.createElement("section", { className: "brokr-account-card" }, /* @__PURE__ */ React10.createElement("div", { className: "brokr-account-photo-row" }, /* @__PURE__ */ React10.createElement(ProfilePhotoButton, { size: 88 }), /* @__PURE__ */ React10.createElement("div", { className: "brokr-account-photo-copy" }, /* @__PURE__ */ React10.createElement("strong", null, "Profile photo"), /* @__PURE__ */ React10.createElement("span", { className: "brokr-copy" }, "PNG, JPEG, and GIF under 10MB"), /* @__PURE__ */ React10.createElement("span", { className: "brokr-account-photo-hint" }, /* @__PURE__ */ React10.createElement(UploadIcon, { size: 14 }), "Upload new picture")))), /* @__PURE__ */ React10.createElement("section", { className: "brokr-account-card brokr-account-field-list" }, /* @__PURE__ */ React10.createElement("div", { className: "brokr-account-field-row" }, /* @__PURE__ */ React10.createElement("div", { className: "brokr-account-field-head" }, /* @__PURE__ */ React10.createElement("label", { className: "brokr-label", htmlFor: "brokr-account-name" }, "Name")), /* @__PURE__ */ React10.createElement("div", { className: "brokr-account-field-body" }, /* @__PURE__ */ React10.createElement(
     "input",
     {
@@ -5763,6 +5798,9 @@ function UserButton({
     setOpen(false);
     await signOut();
   }, [signOut]);
+  const stopPropagation = useCallback9((event) => {
+    event.stopPropagation();
+  }, []);
   useEffect7(() => {
     if (!open) return void 0;
     const handlePointerDown = (event) => {
@@ -5796,13 +5834,13 @@ function UserButton({
       "data-align": align,
       role: "dialog"
     },
-    /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu" }, /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu-header" }, /* @__PURE__ */ React12.createElement(Avatar, { email: summary.email, name: summary.name, src: user.image, size: 44 }), /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu-copy" }, /* @__PURE__ */ React12.createElement("strong", null, summary.name), /* @__PURE__ */ React12.createElement("span", null, summary.email))), /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu-actions" }, /* @__PURE__ */ React12.createElement("button", { className: "brokr-account-menu-action", onClick: openSettings, type: "button" }, /* @__PURE__ */ React12.createElement("span", { className: "brokr-account-menu-action-icon" }, /* @__PURE__ */ React12.createElement(SettingsIcon, { size: 15 })), /* @__PURE__ */ React12.createElement("span", null, "Settings")), /* @__PURE__ */ React12.createElement("button", { className: "brokr-account-menu-action", onClick: () => void handleSignOut(), type: "button" }, /* @__PURE__ */ React12.createElement("span", { className: "brokr-account-menu-action-icon" }, /* @__PURE__ */ React12.createElement(LogoutIcon, { size: 15 })), /* @__PURE__ */ React12.createElement("span", null, "Sign out"))))
+    /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu" }, /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu-header" }, /* @__PURE__ */ React12.createElement(Avatar, { email: summary.email, name: summary.name, src: user.image, size: 44 }), /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu-copy" }, /* @__PURE__ */ React12.createElement("strong", null, summary.name), /* @__PURE__ */ React12.createElement("span", null, summary.email))), /* @__PURE__ */ React12.createElement("div", { className: "brokr-account-menu-actions" }, /* @__PURE__ */ React12.createElement("button", { className: "brokr-account-menu-action", onClick: openSettings, type: "button" }, /* @__PURE__ */ React12.createElement("span", { className: "brokr-account-menu-action-icon" }, /* @__PURE__ */ React12.createElement(SettingsIcon, { size: 15 })), /* @__PURE__ */ React12.createElement("span", null, "Settings")), /* @__PURE__ */ React12.createElement("button", { className: "brokr-account-menu-action", onClick: handleSignOut, type: "button" }, /* @__PURE__ */ React12.createElement("span", { className: "brokr-account-menu-action-icon" }, /* @__PURE__ */ React12.createElement(LogoutIcon, { size: 15 })), /* @__PURE__ */ React12.createElement("span", null, "Sign out"))))
   ) : null, settingsOpen ? /* @__PURE__ */ React12.createElement("div", { className: "brokr-modal-backdrop", role: "presentation", onClick: closeSettings }, /* @__PURE__ */ React12.createElement(
     "div",
     {
       "aria-modal": "true",
       className: "brokr-panel brokr-modal-dialog brokr-account-settings-dialog",
-      onClick: (event) => event.stopPropagation(),
+      onClick: stopPropagation,
       role: "dialog"
     },
     /* @__PURE__ */ React12.createElement("div", { className: "brokr-modal-toolbar" }, /* @__PURE__ */ React12.createElement("button", { className: "brokr-button-ghost", onClick: closeSettings, type: "button" }, /* @__PURE__ */ React12.createElement(CloseIcon, { size: 16 }))),
@@ -5998,6 +6036,28 @@ function AuthWall({ children }) {
 
 // src/react/payments/Plans.tsx
 import React21, { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
+function PlanCard({
+  plan,
+  highlight,
+  isPending,
+  onSelect
+}) {
+  const isHighlighted = highlight === plan.slug;
+  const features = Object.entries(plan.features);
+  const handleClick = useCallback12(() => {
+    void onSelect(plan.slug);
+  }, [plan.slug, onSelect]);
+  return /* @__PURE__ */ React21.createElement("article", { className: "brokr-card brokr-plan-card", "data-highlight": isHighlighted, key: plan.slug }, /* @__PURE__ */ React21.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-3)" } }, /* @__PURE__ */ React21.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React21.createElement("strong", null, plan.name), plan.isCurrent ? /* @__PURE__ */ React21.createElement("span", { className: "brokr-badge" }, "Current") : null, isHighlighted && !plan.isCurrent ? /* @__PURE__ */ React21.createElement("span", { className: "brokr-badge" }, "Recommended") : null), /* @__PURE__ */ React21.createElement("div", { className: "brokr-plan-price" }, /* @__PURE__ */ React21.createElement("span", { className: "brokr-plan-value" }, plan.price === 0 ? "$0" : `$${(plan.price / 100).toFixed(0)}`), /* @__PURE__ */ React21.createElement("span", { className: "brokr-copy" }, "/", plan.interval)), plan.trialDays ? /* @__PURE__ */ React21.createElement("span", { className: "brokr-copy" }, plan.trialDays, " day trial included.") : null), /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      className: plan.isCurrent ? "brokr-button-secondary" : "brokr-button",
+      disabled: plan.isCurrent || isPending,
+      onClick: handleClick,
+      type: "button"
+    },
+    plan.isCurrent ? "Current plan" : isPending ? "Redirecting" : "Choose plan"
+  ), /* @__PURE__ */ React21.createElement("ul", { className: "brokr-feature-list" }, features.map(([key, value]) => /* @__PURE__ */ React21.createElement("li", { className: "brokr-feature-item", key }, /* @__PURE__ */ React21.createElement(CheckIcon, { size: 14 }), /* @__PURE__ */ React21.createElement("span", null, featureLabel(key), " \xB7 ", featureValueLabel(value))))));
+}
 function Plans({
   columns,
   highlight,
@@ -6028,34 +6088,16 @@ function Plans({
       setPendingPlan(null);
     }
   }, [checkout, onSelect]);
-  return /* @__PURE__ */ React21.createElement("div", { className: "brokr-section" }, paymentsMode === "sandbox" ? /* @__PURE__ */ React21.createElement("div", { className: "brokr-inline-message" }, "Sandbox mode \u2014 test cards only.") : null, error ? /* @__PURE__ */ React21.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null, /* @__PURE__ */ React21.createElement("div", { className: "brokr-grid-auto", style: layoutStyle }, plans.map((plan) => {
-    const features = Object.entries(plan.features);
-    const isHighlighted = highlight === plan.slug;
-    const isPending = pendingPlan === plan.slug;
-    const handleClick = () => {
-      void handleSelect(plan.slug);
-    };
-    return /* @__PURE__ */ React21.createElement(
-      "article",
-      {
-        className: "brokr-card brokr-plan-card",
-        "data-highlight": isHighlighted,
-        key: plan.slug
-      },
-      /* @__PURE__ */ React21.createElement("div", { className: "brokr-section", style: { gap: "0.75rem" } }, /* @__PURE__ */ React21.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React21.createElement("strong", null, plan.name), plan.isCurrent ? /* @__PURE__ */ React21.createElement("span", { className: "brokr-badge" }, "Current") : null, isHighlighted && !plan.isCurrent ? /* @__PURE__ */ React21.createElement("span", { className: "brokr-badge" }, "Recommended") : null), /* @__PURE__ */ React21.createElement("div", { className: "brokr-plan-price" }, /* @__PURE__ */ React21.createElement("span", { className: "brokr-plan-value" }, plan.price === 0 ? "$0" : `$${(plan.price / 100).toFixed(0)}`), /* @__PURE__ */ React21.createElement("span", { className: "brokr-copy" }, "/", plan.interval)), plan.trialDays ? /* @__PURE__ */ React21.createElement("span", { className: "brokr-copy" }, plan.trialDays, " day trial included.") : null),
-      /* @__PURE__ */ React21.createElement(
-        "button",
-        {
-          className: plan.isCurrent ? "brokr-button-secondary" : "brokr-button",
-          disabled: plan.isCurrent || isPending,
-          onClick: handleClick,
-          type: "button"
-        },
-        plan.isCurrent ? "Current plan" : isPending ? "Redirecting" : "Choose plan"
-      ),
-      /* @__PURE__ */ React21.createElement("ul", { className: "brokr-feature-list" }, features.map(([key, value]) => /* @__PURE__ */ React21.createElement("li", { className: "brokr-feature-item", key }, /* @__PURE__ */ React21.createElement(CheckIcon, { size: 14 }), /* @__PURE__ */ React21.createElement("span", null, featureLabel(key), " \xB7 ", featureValueLabel(value)))))
-    );
-  })));
+  return /* @__PURE__ */ React21.createElement("div", { className: "brokr-section" }, paymentsMode === "sandbox" ? /* @__PURE__ */ React21.createElement("div", { className: "brokr-inline-message" }, "Sandbox mode \u2014 test cards only.") : null, error ? /* @__PURE__ */ React21.createElement("div", { className: "brokr-inline-message", "data-tone": "error" }, error) : null, /* @__PURE__ */ React21.createElement("div", { className: "brokr-grid-auto", style: layoutStyle }, plans.map((plan) => /* @__PURE__ */ React21.createElement(
+    PlanCard,
+    {
+      key: plan.slug,
+      plan,
+      highlight,
+      isPending: pendingPlan === plan.slug,
+      onSelect: handleSelect
+    }
+  ))));
 }
 
 // src/react/payments/FeatureMeter.tsx
@@ -6193,7 +6235,7 @@ function AutoReloadToggle({ onChange }) {
       setIsPending(false);
     }
   }, [enabled, onChange]);
-  return /* @__PURE__ */ React26.createElement("div", { className: "brokr-card brokr-gate-card" }, /* @__PURE__ */ React26.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React26.createElement("div", { className: "brokr-section", style: { gap: "0.35rem" } }, /* @__PURE__ */ React26.createElement("strong", null, "Auto reload"), /* @__PURE__ */ React26.createElement("span", { className: "brokr-copy" }, helperText)), /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement("div", { className: "brokr-card brokr-gate-card" }, /* @__PURE__ */ React26.createElement("div", { className: "brokr-brand-row", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React26.createElement("div", { className: "brokr-section", style: { gap: "var(--brokr-space-1)" } }, /* @__PURE__ */ React26.createElement("strong", null, "Auto reload"), /* @__PURE__ */ React26.createElement("span", { className: "brokr-copy" }, helperText)), /* @__PURE__ */ React26.createElement(
     "button",
     {
       className: "brokr-button-secondary",
@@ -6243,7 +6285,7 @@ function CancelSubscription({ onCancel }) {
 
 // src/react/chat/AIChat.tsx
 import React35, {
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useEffect as useEffect12,
   useMemo as useMemo23,
   useRef as useRef7,
@@ -6889,6 +6931,37 @@ 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";
+function ModelOption({
+  provider,
+  isActive,
+  isLocked,
+  onSelect,
+  onCheckout
+}) {
+  const handleClick = useCallback17(() => {
+    if (isLocked) {
+      void onCheckout({ plan: "pro" });
+    } else {
+      onSelect(provider.model);
+    }
+  }, [isLocked, onCheckout, onSelect, provider.model]);
+  return /* @__PURE__ */ React29.createElement(
+    "button",
+    {
+      "aria-selected": isActive,
+      className: "brokr-model-option",
+      "data-active": isActive,
+      "data-locked": isLocked,
+      disabled: isLocked,
+      onClick: handleClick,
+      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
+  );
+}
 function ModelSelector({
   activeModel,
   setSelectedModel,
@@ -6901,6 +6974,10 @@ function ModelSelector({
     () => providers.find((p) => p.model === activeModel) ?? providers[0],
     [activeModel]
   );
+  const handleModelSelect = useCallback17((model) => {
+    setSelectedModel(model);
+    setSelectorOpen(false);
+  }, [setSelectedModel]);
   useEffect10(() => {
     if (!selectorOpen) return;
     const onMouseDown = (e) => {
@@ -6931,37 +7008,34 @@ function ModelSelector({
     activeProvider ? /* @__PURE__ */ React29.createElement("img", { alt: "", className: "brokr-model-logo", src: activeProvider.logo }) : /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-dot", style: { background: "currentColor" } }),
     activeProvider?.label ?? "Model",
     /* @__PURE__ */ React29.createElement(ChevronDownIcon, { size: 13 })
-  ), selectorOpen ? /* @__PURE__ */ React29.createElement("div", { className: "brokr-model-dropdown", role: "listbox" }, providers.map((p) => {
-    const locked = !availableProviders.some((a) => a.id === p.id);
-    return /* @__PURE__ */ React29.createElement(
-      "button",
-      {
-        "aria-selected": p.model === activeModel,
-        className: "brokr-model-option",
-        "data-active": p.model === activeModel,
-        "data-locked": locked,
-        disabled: locked,
-        key: p.id,
-        onClick: () => {
-          if (locked) {
-            void checkout({ plan: "pro" });
-          } else {
-            setSelectedModel(p.model);
-            setSelectorOpen(false);
-          }
-        },
-        title: locked ? "Add credits to unlock" : void 0,
-        type: "button"
-      },
-      /* @__PURE__ */ React29.createElement("img", { alt: "", className: "brokr-model-logo", src: p.logo }),
-      /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-option-label" }, p.label),
-      locked ? /* @__PURE__ */ React29.createElement("span", { className: "brokr-model-lock", "aria-hidden": "true" }, /* @__PURE__ */ React29.createElement(LockIcon, { size: 13 })) : null
-    );
-  })) : null);
+  ), selectorOpen ? /* @__PURE__ */ React29.createElement("div", { className: "brokr-model-dropdown", role: "listbox" }, providers.map((p) => /* @__PURE__ */ React29.createElement(
+    ModelOption,
+    {
+      key: p.id,
+      provider: p,
+      isActive: p.model === activeModel,
+      isLocked: !availableProviders.some((a) => a.id === p.id),
+      onSelect: handleModelSelect,
+      onCheckout: checkout
+    }
+  ))) : null);
 }
 
 // src/react/chat/ThreadSidebar.tsx
 import React30, { useCallback as useCallback18, useMemo as useMemo20 } from "react";
+function ThreadItemButton({ id, title, isActive, onSelect }) {
+  const handleClick = useCallback18(() => onSelect(id), [id, onSelect]);
+  return /* @__PURE__ */ React30.createElement(
+    "button",
+    {
+      className: "brokr-ai-chat-conversation",
+      "data-active": isActive,
+      onClick: handleClick,
+      type: "button"
+    },
+    title
+  );
+}
 function ThreadSidebar() {
   const {
     startNewChat,
@@ -7012,15 +7086,14 @@ function ThreadSidebar() {
         value: renameValue
       }
     ) : /* @__PURE__ */ React30.createElement(
-      "button",
+      ThreadItemButton,
       {
-        className: "brokr-ai-chat-conversation",
-        "data-active": item.id === activeId,
         key: item.id,
-        onClick: () => selectThreadAndCloseSidebar(item.id),
-        type: "button"
-      },
-      item.title
+        id: item.id,
+        title: item.title,
+        isActive: item.id === activeId,
+        onSelect: selectThreadAndCloseSidebar
+      }
     )));
   }, [
     threadsLoading,
@@ -7037,7 +7110,7 @@ function ThreadSidebar() {
 }
 
 // src/react/chat/MessagePane.tsx
-import React33, { useMemo as useMemo22 } from "react";
+import React33, { useCallback as useCallback21, useMemo as useMemo22 } from "react";
 
 // src/react/chat/MessageBubble.tsx
 import React32, { useCallback as useCallback20 } from "react";
@@ -7220,6 +7293,12 @@ function MessageBubble({ message, isTyping, user }) {
 }
 
 // src/react/chat/MessagePane.tsx
+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);
+}
 function MessagePane({ starterPrompts, emptyTitle, emptyCopy, subtitle }) {
   const {
     displayMessages,
@@ -7250,20 +7329,17 @@ 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(
-    "button",
-    {
-      className: "brokr-ai-chat-starter",
-      key: sp,
-      onClick: () => void sendMessage(sp),
-      type: "button"
-    },
-    sp
-  ))) : 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__ */ 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 })));
 }
 
 // src/react/chat/ChatInput.tsx
-import React34, { useCallback as useCallback21, useEffect as useEffect11 } from "react";
+import React34, { 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);
+}
 function ChatInput() {
   const {
     input,
@@ -7281,29 +7357,20 @@ function ChatInput() {
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 168)}px`;
   }, [input, textareaRef]);
-  const handleSubmit = useCallback21((e) => {
+  const handleSubmit = useCallback22((e) => {
     e.preventDefault();
     void sendMessage();
   }, [sendMessage]);
-  const handleKeyDown = useCallback21((e) => {
+  const handleKeyDown = useCallback22((e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       void sendMessage();
     }
   }, [sendMessage]);
-  const handleChange = useCallback21((e) => {
+  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(
-    "button",
-    {
-      className: "brokr-ai-chat-sidebar-button",
-      key: cmd.id,
-      onClick: () => void cmd.run(chatContext),
-      type: "button"
-    },
-    cmd.text
-  ))) : null, /* @__PURE__ */ React34.createElement("div", { className: "brokr-ai-chat-input-row" }, /* @__PURE__ */ React34.createElement(
+  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(
     "textarea",
     {
       className: "brokr-ai-chat-textarea",
@@ -7437,11 +7504,19 @@ function AIChat(inlineProps) {
   const [sidebarOpen, setSidebarOpen] = useState18(false);
   const [threadMenuOpenId, setThreadMenuOpenId] = useState18(null);
   const threadMenuRef = useRef7(null);
-  const closeSidebar = useCallback22(() => setSidebarOpen(false), []);
-  const selectThreadAndCloseSidebar = useCallback22((id) => {
+  const closeSidebar = useCallback23(() => setSidebarOpen(false), []);
+  const selectThreadAndCloseSidebar = useCallback23((id) => {
     chat.selectThread(id);
     setSidebarOpen(false);
   }, [chat.selectThread]);
+  const handleCopy = useCallback23((content) => {
+    navigator.clipboard.writeText(content).catch(() => {
+    });
+  }, []);
+  const handleStartRename = useCallback23((threadId) => {
+    setThreadMenuOpenId(null);
+    chat.startRename(threadId);
+  }, [chat.startRename]);
   useEffect12(() => {
     if (!threadMenuOpenId) return;
     const onMouseDown = (e) => {
@@ -7499,17 +7574,11 @@ function AIChat(inlineProps) {
     startNewChat: chat.startNewChat,
     selectThread: chat.selectThread,
     deleteThread: chat.deleteThread,
-    handleCopy: (content) => {
-      navigator.clipboard.writeText(content).catch(() => {
-      });
-    },
+    handleCopy,
     renamingId: chat.renamingId,
     renameValue: chat.renameValue,
     setRenameValue: chat.setRenameValue,
-    startRename: (threadId) => {
-      setThreadMenuOpenId(null);
-      chat.startRename(threadId);
-    },
+    startRename: handleStartRename,
     submitRename: chat.submitRename,
     displaySidebarItems: chat.displaySidebarItems,
     threadsLoading: chat.threadsLoading,
@@ -7595,6 +7664,19 @@ function AIChat(inlineProps) {
     ), /* @__PURE__ */ React35.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);
+}
+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);
+}
 function ChatHeader({
   activeId,
   sidebarVisible,
@@ -7614,10 +7696,20 @@ function ChatHeader({
   startRename,
   deleteThread
 }) {
-  const handleOpenSidebar = useCallback22(() => setSidebarOpen(true), [setSidebarOpen]);
-  const handleToggleMenu = useCallback22(() => {
+  const handleOpenSidebar = useCallback23(() => setSidebarOpen(true), [setSidebarOpen]);
+  const handleToggleMenu = useCallback23(() => {
     setThreadMenuOpenId(threadMenuOpenId ? null : activeId);
   }, [setThreadMenuOpenId, threadMenuOpenId, activeId]);
+  const closeMenu = useCallback23(() => setThreadMenuOpenId(null), [setThreadMenuOpenId]);
+  const handleRename = useCallback23(() => {
+    if (activeId) startRename(activeId);
+  }, [activeId, startRename]);
+  const handleDelete = useCallback23(() => {
+    if (activeId) {
+      setThreadMenuOpenId(null);
+      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(
     "button",
     {
@@ -7627,16 +7719,7 @@ function ChatHeader({
       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(
-    "button",
-    {
-      className: "brokr-ai-chat-sidebar-button",
-      key: cmd.id,
-      onClick: () => void cmd.run(chatContext),
-      type: "button"
-    },
-    cmd.text
-  )), modelSelectorVisible ? /* @__PURE__ */ React35.createElement(
+  ) : 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(
     ModelSelector,
     {
       activeModel,
@@ -7657,32 +7740,25 @@ function ChatHeader({
     "button",
     {
       className: "brokr-ai-chat-thread-dropdown-item",
-      onClick: () => startRename(activeId),
+      onClick: handleRename,
       type: "button"
     },
     /* @__PURE__ */ React35.createElement(PencilIcon, { size: 13 }),
     "Rename"
   ), threadMenuCommands.map((cmd) => /* @__PURE__ */ React35.createElement(
-    "button",
+    MenuCommandItem,
     {
-      className: "brokr-ai-chat-thread-dropdown-item",
       key: cmd.id,
-      onClick: () => {
-        setThreadMenuOpenId(null);
-        void cmd.run(chatContext);
-      },
-      type: "button"
-    },
-    cmd.text
+      cmd,
+      chatContext,
+      onClose: closeMenu
+    }
   )), /* @__PURE__ */ React35.createElement(
     "button",
     {
       className: "brokr-ai-chat-thread-dropdown-item",
       "data-tone": "danger",
-      onClick: () => {
-        setThreadMenuOpenId(null);
-        void deleteThread(activeId);
-      },
+      onClick: handleDelete,
       type: "button"
     },
     /* @__PURE__ */ React35.createElement(TrashIcon, { size: 13 }),
@@ -7691,7 +7767,11 @@ function ChatHeader({
 }
 
 // src/react/composites/FabAI.tsx
-import React36, { useCallback as useCallback23, useMemo as useMemo24, useState as useState19 } from "react";
+import React36, { useCallback as useCallback24, useMemo as useMemo24, useState as useState19 } from "react";
+function StarterButton({ prompt, onSelect }) {
+  const handleClick = useCallback24(() => onSelect(prompt), [prompt, onSelect]);
+  return /* @__PURE__ */ React36.createElement("button", { className: "brokr-chat-starter", onClick: handleClick, type: "button" }, prompt);
+}
 function FabAI({
   model,
   onSendMessage,
@@ -7713,20 +7793,20 @@ function FabAI({
     [position]
   );
   const canChat = useMemo24(() => can("ai.chat"), [can]);
-  const toggleOpen = useCallback23(() => {
+  const toggleOpen = useCallback24(() => {
     if (!canChat) {
       redirectTo("/pricing");
       return;
     }
     setIsOpen((current) => !current);
   }, [canChat]);
-  const handleInputChange = useCallback23((event) => {
+  const handleInputChange = useCallback24((event) => {
     setInput(event.target.value);
   }, []);
-  const handleClose = useCallback23(() => {
+  const handleClose = useCallback24(() => {
     setIsOpen(false);
   }, []);
-  const sendPrompt = useCallback23(async (prompt) => {
+  const sendPrompt = useCallback24(async (prompt) => {
     const nextPrompt = prompt.trim();
     if (!nextPrompt) return;
     const nextMessages = [...messages, { role: "user", content: nextPrompt }];
@@ -7759,17 +7839,17 @@ function FabAI({
       setIsSending(false);
     }
   }, [messages, model, onSendMessage, systemPrompt]);
-  const handleSubmit = useCallback23(async (event) => {
+  const handleSubmit = useCallback24(async (event) => {
     event.preventDefault();
     await sendPrompt(input);
   }, [input, sendPrompt]);
-  const handleKeyDown = useCallback23((event) => {
+  const handleKeyDown = useCallback24((event) => {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       void sendPrompt(input);
     }
   }, [input, sendPrompt]);
-  const handleStarterPrompt = useCallback23((prompt) => {
+  const handleStarterPrompt = useCallback24((prompt) => {
     void sendPrompt(prompt);
   }, [sendPrompt]);
   return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", { className: "brokr-chat-fab", style: launcherStyle }, /* @__PURE__ */ React36.createElement(
@@ -7783,30 +7863,16 @@ function FabAI({
     },
     /* @__PURE__ */ React36.createElement(MessageIcon, { size: 16 }),
     "Ask AI"
-  )), 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: "0.25rem" } }, /* @__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(
+  )), 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(
     "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: "0.35rem" } }, /* @__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.")), starterPrompts.length > 0 ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-chat-starters" }, starterPrompts.map((prompt) => {
-      const handleClick = () => {
-        handleStarterPrompt(prompt);
-      };
-      return /* @__PURE__ */ React36.createElement(
-        "button",
-        {
-          className: "brokr-chat-starter",
-          key: prompt,
-          onClick: handleClick,
-          type: "button"
-        },
-        prompt
-      );
-    })) : null) : null,
+    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.")), starterPrompts.length > 0 ? /* @__PURE__ */ React36.createElement("div", { className: "brokr-chat-starters" }, starterPrompts.map((prompt) => /* @__PURE__ */ React36.createElement(StarterButton, { key: prompt, prompt, onSelect: handleStarterPrompt }))) : null) : null,
     messages.map((message, index) => /* @__PURE__ */ React36.createElement("div", { className: "brokr-chat-bubble", "data-role": message.role, key: `${message.role}-${index}` }, contentToText(message.content))),
     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: "0.75rem" } }, /* @__PURE__ */ React36.createElement(
+  ), /* @__PURE__ */ React36.createElement("form", { className: "brokr-section", onSubmit: handleSubmit, style: { gap: "var(--brokr-space-3)" } }, /* @__PURE__ */ React36.createElement(
     "textarea",
     {
       className: "brokr-textarea brokr-chat-input",
@@ -7821,7 +7887,7 @@ function FabAI({
 
 // src/react/composites/SmartUpload.tsx
 import React37, {
-  useCallback as useCallback24,
+  useCallback as useCallback25,
   useId as useId2,
   useMemo as useMemo25,
   useRef as useRef8,
@@ -7844,7 +7910,7 @@ function SmartUpload({
   const helperText = useMemo25(() => {
     return `${Math.round(maxSize / (1024 * 1024))} MB max file size.`;
   }, [maxSize]);
-  const beginUpload = useCallback24((file) => {
+  const beginUpload = useCallback25((file) => {
     if (file.size > maxSize) {
       setError(`That file is larger than ${Math.round(maxSize / (1024 * 1024))} MB.`);
       return;
@@ -7881,31 +7947,31 @@ function SmartUpload({
     body.append("purpose", purpose);
     request.send(body);
   }, [maxSize, onUpload, purpose]);
-  const handleInputChange = useCallback24((event) => {
+  const handleInputChange = useCallback25((event) => {
     const file = event.target.files?.[0];
     event.target.value = "";
     if (!file) return;
     beginUpload(file);
   }, [beginUpload]);
-  const handleDrop = useCallback24((event) => {
+  const handleDrop = useCallback25((event) => {
     event.preventDefault();
     setDragActive(false);
     const file = event.dataTransfer.files?.[0];
     if (!file) return;
     beginUpload(file);
   }, [beginUpload]);
-  const handleDragEnter = useCallback24((event) => {
+  const handleDragEnter = useCallback25((event) => {
     event.preventDefault();
     setDragActive(true);
   }, []);
-  const handleDragLeave = useCallback24((event) => {
+  const handleDragLeave = useCallback25((event) => {
     event.preventDefault();
     setDragActive(false);
   }, []);
-  const handleBrowse = useCallback24(() => {
+  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: "0.35rem" } }, /* @__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__ */ 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(
     "label",
     {
       className: "brokr-upload-dropzone",
@@ -7930,11 +7996,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: "0.35rem" } }, /* @__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", style: { width: "7rem" } }, /* @__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__ */ 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);
 }
 
 // src/react/composites/FeedbackWidget.tsx
-import React38, { useCallback as useCallback25, useState as useState21 } from "react";
+import React38, { useCallback as useCallback26, useState as useState21 } from "react";
 function FeedbackWidget({
   context,
   onSubmit
@@ -7945,16 +8011,16 @@ function FeedbackWidget({
   const [error, setError] = useState21(null);
   const [message, setMessage] = useState21(null);
   const [isPending, setIsPending] = useState21(false);
-  const handleTextChange = useCallback25((event) => {
+  const handleTextChange = useCallback26((event) => {
     setText(event.target.value);
   }, []);
-  const handleRateUp = useCallback25(() => {
+  const handleRateUp = useCallback26(() => {
     setRating("up");
   }, []);
-  const handleRateDown = useCallback25(() => {
+  const handleRateDown = useCallback26(() => {
     setRating("down");
   }, []);
-  const handleSubmit = useCallback25(async (event) => {
+  const handleSubmit = useCallback26(async (event) => {
     event.preventDefault();
     if (!rating) {
       setError("Choose a direction first.");
@@ -8270,7 +8336,7 @@ var BrokrErrorBoundary = class extends React39.Component {
 };
 
 // src/react/notifications/NotificationBell.tsx
-import React40, { useCallback as useCallback26, useEffect as useEffect13, useMemo as useMemo26, useRef as useRef9, useState as useState22 } from "react";
+import React40, { useCallback as useCallback27, useEffect as useEffect13, useMemo as useMemo26, useRef as useRef9, useState as useState22 } from "react";
 
 // src/react/notifications/use-notifications.ts
 import { useContext as useContext4 } from "react";
@@ -8295,12 +8361,34 @@ function timeAgo(iso) {
   const days = Math.floor(hours / 24);
   return `${days}d ago`;
 }
+function NotifDropdownItem({
+  notif,
+  registry,
+  onClick
+}) {
+  const handleClick = useCallback27(() => onClick(notif), [notif, onClick]);
+  const notifData = notif.data ?? {};
+  const notifType = notifData.type ?? "default";
+  const resolved = resolveNotificationType(registry, notifType, notifData);
+  return /* @__PURE__ */ React40.createElement(
+    "button",
+    {
+      type: "button",
+      className: `brokr-notif-item${notif.read ? "" : " brokr-notif-item--unread"}`,
+      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))
+  );
+}
 function NotificationBell() {
   const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
   const [open, setOpen] = useState22(false);
   const containerRef = useRef9(null);
   const markReadTimerRef = useRef9(null);
-  const toggle = useCallback26(() => setOpen((o) => !o), []);
+  const toggle = useCallback27(() => setOpen((o) => !o), []);
   useEffect13(() => {
     if (markReadTimerRef.current) {
       clearTimeout(markReadTimerRef.current);
@@ -8342,7 +8430,7 @@ function NotificationBell() {
     ),
     [notifications]
   );
-  const handleItemClick = useCallback26((notif) => {
+  const handleItemClick = useCallback27((notif) => {
     if (!notif.read) markRead(notif.id);
     const notifData = notif.data ?? {};
     const notifType = notif.type ?? notifData.type ?? "default";
@@ -8359,7 +8447,8 @@ function NotificationBell() {
       className: "brokr-notif-bell",
       onClick: toggle,
       "aria-label": `Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
-      "aria-expanded": open
+      "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)
@@ -8371,35 +8460,19 @@ 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) => {
-    const notifData = notif.data ?? {};
-    const notifType = notifData.type ?? "default";
-    const resolved = resolveNotificationType(registry, notifType, notifData);
-    return /* @__PURE__ */ React40.createElement(
-      "button",
-      {
-        key: notif.id,
-        type: "button",
-        className: `brokr-notif-item${notif.read ? "" : " brokr-notif-item--unread"}`,
-        onClick: () => handleItemClick(notif),
-        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))
-    );
-  }))));
+  )), /* @__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(
+    NotifDropdownItem,
+    {
+      key: notif.id,
+      notif,
+      registry,
+      onClick: handleItemClick
+    }
+  )))));
 }
 
 // src/react/notifications/NotificationList.tsx
-import React41, { useCallback as useCallback27, useMemo as useMemo27 } from "react";
+import React41, { useCallback as useCallback28, useMemo as useMemo27 } from "react";
 function formatTimestamp(iso) {
   const date = new Date(iso);
   return new Intl.DateTimeFormat("en-US", {
@@ -8412,6 +8485,27 @@ function formatTimestamp(iso) {
 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 } }))));
 }
+function NotifListItem({
+  notif,
+  registry,
+  onClick
+}) {
+  const handleClick = useCallback28(() => 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(
+    "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))
+  );
+}
 function NotificationList() {
   const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
   const sorted = useMemo27(
@@ -8420,7 +8514,7 @@ function NotificationList() {
     ),
     [notifications]
   );
-  const handleClick = useCallback27((notif) => {
+  const handleClick = useCallback28((notif) => {
     if (!notif.read) markRead(notif.id);
     const notifData = notif.data ?? {};
     const notifType = notif.type ?? notifData.type ?? "default";
@@ -8438,30 +8532,15 @@ 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) => {
-    const notifData = notif.data ?? {};
-    const notifType = notif.type ?? notifData.type ?? "default";
-    const resolved = resolveNotificationType(registry, notifType, notifData);
-    return /* @__PURE__ */ React41.createElement(
-      "button",
-      {
-        key: notif.id,
-        type: "button",
-        className: `brokr-notif-list-row${notif.read ? "" : " brokr-notif-list-row--unread"}`,
-        onClick: () => handleClick(notif)
-      },
-      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))
-    );
-  })));
+  )), 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(
+    NotifListItem,
+    {
+      key: notif.id,
+      notif,
+      registry,
+      onClick: handleClick
+    }
+  ))));
 }
 
 // src/react/hooks/use-user.ts