@cosmoops/connect-sdk 0.7.0 → 0.15.0

package/dist/cjs/client/components/app-shell.js

@@ -1,7 +1,7 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectAppShell = ConnectAppShell;
+exports.AppShell = AppShell;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@heroui/react");
@@ -9,9 +9,14 @@ const lucide_react_1 = require("lucide-react");
 const provider_js_1 = require("../provider.js");
 const access_gate_js_1 = require("./access-gate.js");
 const apps_grid_js_1 = require("./apps-grid.js");
+const ask_ai_js_1 = require("./ask-ai.js");
 const auth_buttons_js_1 = require("./auth-buttons.js");
 const logo_js_1 = require("./logo.js");
+const motion_js_1 = require("./motion.js");
+const sidebar_js_1 = require("./sidebar.js");
 const side_nav_js_1 = require("./side-nav.js");
+const shell_context_js_1 = require("./shell-context.js");
+const workspace_switcher_js_1 = require("./workspace-switcher.js");
 const user_menu_js_1 = require("./user-menu.js");
 const nav_js_1 = require("./nav.js");
 const use_active_path_js_1 = require("../use-active-path.js");
@@ -36,7 +41,7 @@ function collapsedSnapshot() {
 /**
  * No preference on the server, which is the point: `useSyncExternalStore` uses
  * this for the hydrating render and only then swaps in the real reading, so a
- * returning user's collapsed rail can never make the server's HTML and the
+ * returning user's rail state can never make the server's HTML and the
  * client's first pass disagree. Reading storage during render instead is a
  * hydration mismatch waiting for its first user.
  */
@@ -54,65 +59,73 @@ function subscribeCollapsed(onStoreChange) {
     };
 }
 /**
- * The sidebar's brand row: the lockup when expanded, the badge alone when not.
- */
-function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
-    return renderLink({
-        href: homeHref,
-        className: `flex items-center rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus ${collapsed ? "justify-center" : ""}`,
-        // `ConnectLogo` names itself, but it does it with `role="img"` on a
-        // `<span>`, which the `<a>` wrapping it does not inherit as its own name.
-        "aria-label": `${name} home`,
-        children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon, collapsed: collapsed }),
-    });
-}
-/**
- * The application frame every CosmoOps application platform runs inside: a
- * collapsible sidebar, a top bar carrying the app launcher and the account
- * menu, and your pages in the middle.
+ * The application frame every CosmoOps application platform runs inside: one
+ * rail down the side holding the brand, the workspace, the navigation and the
+ * account, and your pages in the rest.
  *
  * This is the piece each partner was otherwise writing by hand, and writing
- * slightly differently - which is how a family of applications stops looking like
- * one product. Everything that should be identical across platforms (the
- * lockup, the rail geometry, the active-route treatment, the launcher, the
- * account menu, the access gate) lives here; everything that genuinely
- * differs is a prop:
+ * slightly differently - which is how a family of applications stops looking
+ * like one product. Everything that should be identical across platforms
+ * lives here; everything that genuinely differs is a prop:
  *
  * ```tsx
  * "use client";
  * import Link from "next/link";
  * import { usePathname } from "next/navigation";
- * import { ConnectAppShell } from "@cosmoops/connect-sdk/client";
- * import { LayoutDashboard, Truck } from "lucide-react";
+ * import { AppShell } from "@cosmoops/connect-sdk/client";
+ * import { LayoutDashboard, Settings, Truck } from "lucide-react";
  *
  * export function Shell({ children }: { children: React.ReactNode }) {
  *   return (
- *     <ConnectAppShell
+ *     <AppShell
  *       name="Dispatch"
  *       icon={<Truck />}
  *       activePath={usePathname()}
  *       renderLink={(props) => <Link {...props} />}
  *       nav={[
  *         { label: "Overview", href: "/", icon: <LayoutDashboard className="size-5" /> },
- *         { label: "Plans", href: "/plans", icon: <Truck className="size-5" />, gateExempt: true },
+ *         { label: "Shipments", href: "/shipments", icon: <Truck className="size-5" /> },
+ *       ]}
+ *       secondaryNav={[
+ *         { label: "Settings", href: "/settings", icon: <Settings className="size-5" /> },
  *       ]}
  *     >
  *       {children}
- *     </ConnectAppShell>
+ *     </AppShell>
  *   );
  * }
  * ```
  *
+ * **There is no top bar.** There used to be one, carrying a page title, the
+ * launcher and the account menu - and it was a second, half-width strip of
+ * chrome saying things the rail was better placed to say. The launcher and
+ * the account row moved into the rail's footer, where they are one press from
+ * wherever the pointer already is; the page title moved into the page, where
+ * `ConnectPageShell` renders it next to that page's own actions and
+ * breadcrumbs. What is left is a single column of chrome and a full-height
+ * content pane, which is what every application this shell is modelled on
+ * settled at.
+ *
+ * The one exception is below `md`, where a slim bar carries the drawer
+ * trigger. A phone has no rail to put it in, and a navigation you cannot open
+ * is not a smaller navigation.
+ *
+ * **The rail starts collapsed.** `defaultCollapsed` is `true`: the icon rail
+ * is the resting state, and expanding is the deliberate act. That is the right
+ * default because the rail's job is to be *there*, not to be read - a person
+ * learns five glyphs in a day and then wants the 200px back for their data.
+ * A stored preference from the user's last visit always wins over it.
+ *
  * There is no `isSignedIn` branch anywhere in here, and there should be none
- * in yours: the auth buttons render nothing once a session exists, the user
- * menu renders nothing without one, and the launcher renders nothing when
+ * in yours: the auth buttons render nothing once a session exists, the account
+ * row renders nothing without one, and the launcher renders nothing when
  * signed out. The swap happens inside the components.
  *
  * It renders no provider of its own - mount `ConnectProvider` above it, once,
  * so a page with a shell, a plan table and a usage meter still makes one
  * session read.
  */
-function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = side_nav_js_1.defaultRenderLink, title, headerActions, sidebarFooter, footer, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, collapsible = true, showAppsGrid = true, showAuthButtons = true, theme, onThemeChange, gate = true, gateExemptRoutes, className, contentClassName, children, }) {
+function AppShell({ name, icon, homeHref = "/", nav, secondaryNav, activePath, renderLink = shell_context_js_1.defaultRenderLink, sidebarFooter, workspaceSwitcher, footer, defaultCollapsed = true, collapsed: controlledCollapsed, onCollapsedChange, collapsible = true, showAppsGrid = true, showAuthButtons = true, theme, onThemeChange, gate = true, gateExemptRoutes, askAi = true, className, contentClassName, children, }) {
     const { session, isLoading } = (0, provider_js_1.useConnect)();
     const pathname = (0, use_active_path_js_1.useActivePath)(activePath);
     const [mobileOpen, setMobileOpen] = (0, react_1.useState)(false);
@@ -122,8 +135,7 @@ function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, renderLi
     const stored = (0, react_1.useSyncExternalStore)(subscribeCollapsed, collapsedSnapshot, serverCollapsedSnapshot);
     const isControlled = controlledCollapsed !== undefined;
     const collapsed = collapsible ? (isControlled ? controlledCollapsed : (stored ?? defaultCollapsed)) : false;
-    const toggleCollapsed = (0, react_1.useCallback)(() => {
-        const next = !collapsed;
+    const setCollapsed = (0, react_1.useCallback)((next) => {
         onCollapsedChange?.(next);
         if (isControlled)
             return;
@@ -134,24 +146,47 @@ function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, renderLi
             // Not persisted - but the event below still moves the rail for this session.
         }
         window.dispatchEvent(new Event(COLLAPSED_EVENT));
-    }, [collapsed, isControlled, onCollapsedChange]);
+    }, [isControlled, onCollapsedChange]);
     const closeMobile = (0, react_1.useCallback)(() => setMobileOpen(false), []);
+    // Connect platform staff see a different set of routes - see
+    // `ConnectNavItem.audience`. Derived from the session rather than passed in,
+    // so a host app never has to thread "is this an operator" through its own
+    // layout to get the right rail.
+    const isStaff = session?.staff === true;
+    const visibleNav = (0, react_1.useMemo)(() => (0, nav_js_1.filterNavForAudience)(nav, isStaff), [nav, isStaff]);
+    const visibleSecondaryNav = (0, react_1.useMemo)(() => (secondaryNav ? (0, nav_js_1.filterNavForAudience)(secondaryNav, isStaff) : undefined), [secondaryNav, isStaff]);
     const currentPath = (0, nav_js_1.normalizePath)(pathname);
-    const exempt = [...(0, nav_js_1.gateExemptPaths)(nav), ...(gateExemptRoutes ?? []).map(nav_js_1.normalizePath)];
+    // Computed from the *unfiltered* nav on purpose: `gateExempt` is a fact
+    // about a route, not about who can see it, and reading it from the filtered
+    // list would quietly re-gate a route the moment it became staff-only. Both
+    // navs contribute - a `gateExempt` "Plans" route is just as often in the
+    // secondary group as the primary one.
+    const exempt = [
+        ...(0, nav_js_1.gateExemptPaths)(nav),
+        ...(secondaryNav ? (0, nav_js_1.gateExemptPaths)(secondaryNav) : []),
+        ...(gateExemptRoutes ?? []).map(nav_js_1.normalizePath),
+    ];
     const isExempt = exempt.some((path) => currentPath === path || currentPath.startsWith(`${path}/`));
     // A signed-out visitor has no readiness to check and nothing to be blocked
     // by; `ConnectAccessGate` passes them straight through, but mounting it at
     // all costs an entitlements read that cannot succeed.
     const signedOut = !isLoading && !session?.user;
     const gated = gate && !isExempt && !signedOut;
-    const sideNav = (mobile) => ((0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSideNav, { nav: nav, activePath: pathname, renderLink: renderLink, collapsed: mobile ? false : collapsed, onNavigate: mobile ? closeMobile : undefined }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex h-screen bg-background ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("aside", { "aria-label": "Sidebar", className: `hidden shrink-0 flex-col border-r border-border bg-surface transition-[width] duration-200 ease-in-out will-change-[width] md:flex ${collapsed ? "w-16" : "w-64"}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `flex h-16 shrink-0 items-center border-b border-border ${collapsed ? "justify-center px-2" : "px-4"}`, children: (0, jsx_runtime_1.jsx)(BrandLink, { name: name, icon: icon, homeHref: homeHref, collapsed: collapsed, renderLink: renderLink }) }), (0, jsx_runtime_1.jsx)("div", { className: `flex-1 overflow-y-auto py-4 ${collapsed ? "px-2" : "px-3"}`, children: sideNav(false) }), (0, jsx_runtime_1.jsxs)("div", { className: `shrink-0 border-t border-border ${collapsed ? "flex flex-col items-center gap-2 p-2" : "flex flex-col gap-2 p-3"}`, children: [!collapsed && sidebarFooter, collapsible && (
-                            // The button goes in as a *direct* child, the way `Modal` and
-                            // `Dropdown` take theirs. `Tooltip.Trigger` renders a wrapper
-                            // `<div>` and puts the props it is given on that div - so an
-                            // `aria-label` passed there names a div nobody can reach and
-                            // leaves this icon-only button with no accessible name at all.
-                            // The wrapper is for trigger elements React Aria cannot drive
-                            // directly; a HeroUI `Button` is not one.
-                            (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { delay: 200, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", className: collapsed ? "" : "self-start", onPress: toggleCollapsed, children: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftOpen, { className: "size-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "size-4" }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip.Content, { placement: "right", children: collapsed ? "Expand sidebar" : "Collapse sidebar" })] }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Content, { placement: "left", className: "w-72 max-w-[80vw]", children: (0, jsx_runtime_1.jsxs)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", children: [(0, jsx_runtime_1.jsx)(react_2.Drawer.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_2.Drawer.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Heading, { "aria-label": name, children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon }) }) }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Body, { children: sideNav(true) }), sidebarFooter && (0, jsx_runtime_1.jsx)(react_2.Drawer.Footer, { className: "flex flex-col items-stretch gap-3", children: sidebarFooter })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex h-16 shrink-0 items-center gap-3 border-b border-border bg-surface px-4 md:px-6", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", className: "md:hidden", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { className: "size-5" }) }), typeof title === "string" ? ((0, jsx_runtime_1.jsx)("h1", { className: "truncate text-lg font-semibold text-foreground", children: title })) : (title), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [headerActions, showAppsGrid && (0, jsx_runtime_1.jsx)(apps_grid_js_1.ConnectAppsGrid, {}), (0, jsx_runtime_1.jsx)(user_menu_js_1.ConnectUserMenu, { compact: true, theme: theme, onThemeChange: onThemeChange }), showAuthButtons && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectLoginButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectRegisterButton, { size: "sm" })] }))] })] }), (0, jsx_runtime_1.jsx)("main", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-6 md:py-8", children: [gated ? (0, jsx_runtime_1.jsx)(access_gate_js_1.ConnectAccessGate, { children: children }) : children, footer] }) })] })] }));
+    // Two shell contexts, one set of children. The drawer's is always expanded
+    // and closes itself on navigation; the rail's carries the real collapse
+    // state. Building them here rather than inside the sidebar is what lets the
+    // same `railContent` render in both places with no `mobile` prop threaded
+    // through every part.
+    const railShell = (0, react_1.useMemo)(() => ({ collapsed, collapsible, setCollapsed, renderLink, activePath }), [collapsed, collapsible, setCollapsed, renderLink, activePath]);
+    const drawerShell = (0, react_1.useMemo)(() => ({
+        collapsed: false,
+        collapsible: false,
+        setCollapsed: () => { },
+        renderLink,
+        activePath,
+        onNavigate: closeMobile,
+    }), [renderLink, activePath, closeMobile]);
+    const accountRow = signedOut ? (showAuthButtons && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectLoginButton, { size: "sm", fullWidth: true }), (0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectRegisterButton, { size: "sm", fullWidth: true })] }))) : ((0, jsx_runtime_1.jsx)(user_menu_js_1.ConnectUserButton, { variant: "row", theme: theme, onThemeChange: onThemeChange }));
+    const railContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarHeader, { name: name, icon: icon, homeHref: homeHref }), workspaceSwitcher !== false && ((0, jsx_runtime_1.jsx)("div", { className: "shrink-0 px-3 pb-1", children: (0, jsx_runtime_1.jsx)(workspace_switcher_js_1.ConnectWorkspaceSwitcher, {}) })), (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarBody, { children: (0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSidebarNav, { nav: visibleNav }) }), (visibleSecondaryNav || sidebarFooter || showAppsGrid) && ((0, jsx_runtime_1.jsxs)(sidebar_js_1.ConnectSidebarFooter, { separated: false, children: [visibleSecondaryNav && (0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSidebarNav, { nav: visibleSecondaryNav }), sidebarFooter, showAppsGrid && (0, jsx_runtime_1.jsx)(apps_grid_js_1.ConnectAppsGrid, { variant: "row" })] })), accountRow && (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarFooter, { children: accountRow })] }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: `flex h-screen bg-background ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(shell_context_js_1.ConnectShellProvider, { value: railShell, children: (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebar, { children: railContent }) }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Content, { placement: "left", className: "w-[min(20rem,85vw)]", children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", className: "p-0", children: (0, jsx_runtime_1.jsx)(shell_context_js_1.ConnectShellProvider, { value: drawerShell, children: (0, jsx_runtime_1.jsx)("div", { className: "flex h-full flex-col", children: railContent }) }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border bg-surface px-3 md:hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon })] }), (0, jsx_runtime_1.jsx)("main", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-8 md:py-8", children: [gated ? (0, jsx_runtime_1.jsx)(access_gate_js_1.ConnectAccessGate, { children: children }) : children, footer] }) })] }), askAi && (0, jsx_runtime_1.jsx)(ask_ai_js_1.ConnectAskAi, { ...(askAi === true ? {} : askAi) })] }) }));
 }

package/dist/cjs/client/components/apps-grid.js

@@ -7,6 +7,7 @@ const react_1 = require("@heroui/react");
 const lucide_react_1 = require("lucide-react");
 const provider_js_1 = require("../provider.js");
 const motion_js_1 = require("./motion.js");
+const shell_context_js_1 = require("./shell-context.js");
 function AppTile({ app }) {
     const disabled = app.launchUrl === null;
     const body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "relative flex size-12 items-center justify-center overflow-hidden rounded-xl bg-surface-secondary", children: [app.iconUrl ? (
@@ -33,13 +34,13 @@ function AppTile({ app }) {
  * Renders nothing when signed out: a launcher with nothing to launch is just a
  * button that opens an empty box.
  */
-function ConnectAppsGrid({ className, label = "Switch app" }) {
+function ConnectAppsGrid({ className, label = "Switch app", variant = "row" }) {
     const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
     const { data, isLoading, error } = (0, provider_js_1.useConnectApps)();
     if (sessionLoading || !session?.user)
         return null;
     const apps = data?.apps ?? [];
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { className: "sm:max-w-md", children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Your apps" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 p-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-12 rounded-xl" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-muted", children: "No other apps yet. Anything this workspace subscribes to shows up here." })), !isLoading && !error && apps.length > 0 && ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid grid-cols-3 gap-2", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: apps.map((app) => ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsx)(AppTile, { app: app }) }, app.applicationId))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(ConnectBrowseAllLink, {}) })] }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [variant === "row" ? ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", "aria-label": label, className: (0, shell_context_js_1.sidebarRowClass)({ className }), children: [(0, jsx_runtime_1.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(shell_context_js_1.SidebarLabel, { children: label })] })) : ((0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-5" }) })), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { className: "sm:max-w-md", children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Your apps" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 p-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-12 rounded-xl" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-muted", children: "No other apps yet. Anything this workspace subscribes to shows up here." })), !isLoading && !error && apps.length > 0 && ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid grid-cols-3 gap-2", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: apps.map((app) => ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsx)(AppTile, { app: app }) }, app.applicationId))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(ConnectBrowseAllLink, {}) })] }) }) })] }) }));
 }
 function ConnectBrowseAllLink() {
     const { appUrl } = (0, provider_js_1.useConnect)();

package/dist/cjs/client/components/ask-ai.js

@@ -0,0 +1,353 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectAskAi = ConnectAskAi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const streamdown_1 = require("streamdown");
+const provider_js_1 = require("../provider.js");
+const ai_widgets_js_1 = require("./ai-widgets.js");
+/**
+ * The panel's open width. The *inner* pane always carries it, so the content
+ * keeps its layout while the outer shell's width animates to zero around it.
+ */
+const PANEL_WIDTH = "w-full lg:w-[400px]";
+/**
+ * The outer shell's width, which is the thing that animates.
+ *
+ * Two mutually exclusive branches rather than `PANEL_WIDTH` plus an
+ * `lg:w-0` override, because that override never applied: `lg:w-[400px]` and
+ * `lg:w-0` are the same utility at the same breakpoint, so the winner is
+ * whichever Tailwind emits later - and it emits arbitrary values after scale
+ * values. The closed panel therefore measured a full 400px at `lg` and up and
+ * sat there permanently, eating that much of the content pane on every page
+ * with `askAi` on. Only the `translate-x` hid it below `lg`, which is why this
+ * looked correct on a phone and wrong on a laptop.
+ */
+function panelShellWidth(isOpen) {
+    return isOpen ? PANEL_WIDTH : "w-full lg:w-0 lg:overflow-hidden lg:border-s-0";
+}
+/**
+ * `blurIn` over the default `fadeIn`: Gemini arrives in bursts rather than an
+ * even token drip, and a blur masks a batch landing at once where a plain
+ * opacity fade just flickers. Hoisted to module scope because Streamdown
+ * compares `animated` by reference.
+ */
+const ANIMATED = {
+    animation: "blurIn",
+    duration: 220,
+    easing: "ease-out",
+    sep: "word",
+};
+/**
+ * The "working on it" state - a highlight sweeping through the word rather
+ * than a spinner beside it. `connect-ai-shimmer` is defined in the SDK's
+ * `theme.css`, which every application platform already imports.
+ */
+function ThinkingShimmer({ label = "Thinking" }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: "connect-ai-shimmer text-xs font-medium", role: "status", children: label }));
+}
+/** Open while it streams, collapsed once the answer lands. */
+function ThinkingDisclosure({ text, isStreaming }) {
+    if (!text)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("details", { className: "group mb-2", open: isStreaming, children: [(0, jsx_runtime_1.jsxs)("summary", { className: "flex cursor-pointer list-none items-center gap-1 text-[11px] font-medium text-muted select-none hover:text-foreground", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Brain, { className: "size-3" }), isStreaming ? (0, jsx_runtime_1.jsx)(ThinkingShimmer, {}) : "Thinking", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-3 transition-transform group-open:rotate-180" })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1.5 border-s-2 border-border ps-2 text-xs whitespace-pre-wrap text-muted italic", children: text })] }));
+}
+/**
+ * Structural guards, one per widget.
+ *
+ * The published package carries no schema validator, and should not gain one
+ * for this - so each tool input is checked for the fields its renderer would
+ * otherwise crash on. Anything that fails renders nothing: the model's prose
+ * sits around it either way, so a missing widget reads as terse rather than
+ * broken, which is the better failure.
+ */
+const isArray = (value) => Array.isArray(value) && value.length > 0;
+const field = (input, key) => typeof input === "object" && input !== null ? input[key] : undefined;
+function renderTool(name, input, renderMarkdown) {
+    switch (name) {
+        case "showTable":
+            return isArray(field(input, "columns")) && Array.isArray(field(input, "rows")) ? ((0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiTable, { ...input })) : null;
+        case "showChart":
+            return isArray(field(input, "series")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiChart, { ...input }) : null;
+        case "showMetrics":
+            return isArray(field(input, "metrics")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiMetrics, { ...input }) : null;
+        case "showTimeline":
+            return isArray(field(input, "events")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiTimeline, { ...input }) : null;
+        case "showDetails":
+            return isArray(field(input, "fields")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiDetails, { ...input }) : null;
+        case "showSteps":
+            return isArray(field(input, "steps")) ? ((0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiSteps, { ...input, renderDetail: renderMarkdown })) : null;
+        case "showSources":
+            return isArray(field(input, "sources")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiSources, { ...input }) : null;
+        default:
+            return null;
+    }
+}
+/** Placeholder while a tool's arguments are still arriving, sized like the real thing. */
+function ToolSkeleton() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "my-3 flex h-24 animate-pulse items-center justify-center rounded-lg border border-border bg-surface-secondary", role: "status", "aria-label": "Preparing result", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 text-accent/60", "aria-hidden": true }) }));
+}
+/**
+ * One server-sent event stream, folded into the turn being built.
+ *
+ * Hand-rolled rather than pulled from `@ai-sdk/react`, and that is a deliberate
+ * trade: this package ships to partners, and `ai` + `@ai-sdk/react` is a large
+ * dependency to add to every application platform for one panel. The wire format
+ * is small, both ends of it are ours, and the chunk kinds below are all this
+ * panel can render.
+ *
+ * Tool arguments are read from `tool-input-available` - the complete object -
+ * rather than reassembled from `tool-input-delta` fragments. `tool-input-start`
+ * is enough to put a skeleton on screen in the meantime, and partial-JSON
+ * parsing buys nothing a placeholder does not.
+ *
+ * Chunks are newline-delimited `data:` frames; a frame can split across network
+ * reads, so the tail of each read is carried forward rather than parsed.
+ */
+async function readStream(response, onChunk) {
+    const body = response.body;
+    if (!body)
+        throw new Error("Ask AI returned no stream");
+    const reader = body.pipeThrough(new TextDecoderStream()).getReader();
+    let buffer = "";
+    for (;;) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        buffer += value;
+        // Everything up to the last newline is whole; whatever follows it is a
+        // partial frame and waits for the next read.
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+            if (!line.startsWith("data:"))
+                continue;
+            const payload = line.slice(5).trim();
+            if (!payload || payload === "[DONE]")
+                continue;
+            let chunk;
+            try {
+                chunk = JSON.parse(payload);
+            }
+            catch {
+                // A frame we cannot parse is a frame we cannot render. Dropping it
+                // keeps the rest of the answer flowing, which is strictly better than
+                // failing the whole turn over one malformed chunk.
+                continue;
+            }
+            switch (chunk.type) {
+                case "text-delta":
+                    if (chunk.delta)
+                        onChunk({ text: chunk.delta });
+                    break;
+                case "reasoning-delta":
+                    if (chunk.delta)
+                        onChunk({ reasoning: chunk.delta });
+                    break;
+                case "tool-input-start":
+                    if (chunk.toolCallId && chunk.toolName) {
+                        onChunk({ toolStart: { id: chunk.toolCallId, name: chunk.toolName } });
+                    }
+                    break;
+                case "tool-input-available":
+                    if (chunk.toolCallId)
+                        onChunk({ toolInput: { id: chunk.toolCallId, input: chunk.input } });
+                    break;
+                case "error":
+                    throw new Error(chunk.errorText || "Ask AI failed");
+            }
+        }
+    }
+}
+/**
+ * Index of the final text block, or `-1`. A reverse loop rather than
+ * `findLastIndex`, which is ES2023 - this package targets ES2022 so its
+ * published output stays usable on the runtimes its `engines` field claims.
+ */
+function lastTextBlockIndex(blocks) {
+    for (let index = blocks.length - 1; index >= 0; index--) {
+        if (blocks[index]?.kind === "text")
+            return index;
+    }
+    return -1;
+}
+/** Appends a text delta to the open text block, or opens one after a widget. */
+function appendText(blocks, text) {
+    const last = blocks.at(-1);
+    if (last?.kind === "text") {
+        return [...blocks.slice(0, -1), { kind: "text", text: last.text + text }];
+    }
+    return [...blocks, { kind: "text", text }];
+}
+/**
+ * Ask AI - a chat panel grounded in the signed-in workspace's Context Index,
+ * streamed through your own bridge.
+ *
+ * Answers are not only prose. Connect's model can call a small set of
+ * presentation tools - `showTable`, `showChart`, `showMetrics`, `showTimeline`,
+ * `showDetails`, `showSteps`, `showSources` - and this panel renders each one
+ * natively: a sortable table with a CSV download, a chart, a row of metric
+ * tiles. Values arrive raw with a format tag, so they are formatted here rather
+ * than by the model, which is what lets a column sort numerically.
+ *
+ * Nothing here holds a credential: it POSTs to `${basePath}/ai/chat` on your
+ * own origin, and `createConnectHandler` is what reaches Connect. The workspace
+ * is resolved from the caller's session there, never sent from the browser - so
+ * a user can only ever ask about the workspace they are signed into.
+ *
+ * ```tsx
+ * <AppShell name="Dispatch" nav={nav}>
+ *   {children}
+ * </AppShell>
+ * ```
+ *
+ * `AppShell` mounts it by default. Mount it directly only when you are not
+ * using the shell: it renders a fixed corner trigger plus a panel that is an
+ * *in-flow flex sibling* at `lg` and up, so opening it pushes your content
+ * aside rather than covering it. That requires it to be the last child of a
+ * `flex` row owning the viewport height - which is exactly what `AppShell` is.
+ * Below `lg` it is a full-screen sheet with a backdrop instead; there is no
+ * room to push anything on a phone.
+ *
+ * **Host setup:** markdown rendering needs `streamdown` installed, one Tailwind
+ * `@source "…/node_modules/streamdown/dist/*.js"` line so its utility classes
+ * are generated, and `import "streamdown/styles.css"` for the streaming
+ * animation. The colour tokens Streamdown expects are already mapped in this
+ * SDK's `theme.css`.
+ *
+ * Answers require the workspace's Context Index to be turned on (a workspace
+ * admin toggle in Connect) and your API key to carry the `ai:chat` scope.
+ * Neither is something the browser can discover, so both surface as a message
+ * in the panel rather than as a hidden button.
+ */
+function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placeholder = "Ask a question...", hint = "Ask a question about your workspace - answers are grounded in what your team has indexed.", defaultOpen = false, markdownPlugins, }) {
+    const { session, isLoading, streamResource } = (0, provider_js_1.useConnect)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
+    const [turns, setTurns] = (0, react_1.useState)([]);
+    const [input, setInput] = (0, react_1.useState)("");
+    const [isBusy, setIsBusy] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const abortRef = (0, react_1.useRef)(null);
+    const bottomRef = (0, react_1.useRef)(null);
+    // Ids only have to be unique within one mounted conversation, so a counter is
+    // enough - and unlike `crypto.randomUUID()` it cannot differ between the
+    // server's render and the browser's.
+    const nextId = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    }, [turns]);
+    // A conversation left mid-stream should stop costing tokens the moment the
+    // panel goes away.
+    (0, react_1.useEffect)(() => () => abortRef.current?.abort(), []);
+    const renderMarkdown = (0, react_1.useCallback)((text, isStreaming = false) => ((0, jsx_runtime_1.jsx)(streamdown_1.Streamdown, { className: "connect-ai-body", mode: isStreaming ? "streaming" : "static", isAnimating: isStreaming, animated: ANIMATED, caret: isStreaming ? "block" : undefined, plugins: markdownPlugins, 
+        // Retrieved documents cite real URLs; an interstitial on every one of
+        // them turns a citation into a chore. The renderer still sanitises the
+        // markup itself, which is the part that matters.
+        linkSafety: LINK_SAFETY, children: text })), [markdownPlugins]);
+    const stop = (0, react_1.useCallback)(() => {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        setIsBusy(false);
+    }, []);
+    const send = (0, react_1.useCallback)(async (text) => {
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setError(null);
+        setIsBusy(true);
+        const userTurn = {
+            id: `u${nextId.current++}`,
+            role: "user",
+            blocks: [{ kind: "text", text }],
+            reasoning: "",
+        };
+        const answerId = `a${nextId.current++}`;
+        // The wire format Connect reads - part-based `UIMessage`s, not flat
+        // strings. Built from the turns *plus* this one rather than from state,
+        // which has not been committed yet at this point. Only text is sent back:
+        // a widget is a rendering of something the model already said.
+        const history = [...turns, userTurn].map((turn) => ({
+            id: turn.id,
+            role: turn.role,
+            parts: [
+                {
+                    type: "text",
+                    text: turn.blocks
+                        .filter((block) => block.kind === "text")
+                        .map((block) => block.text)
+                        .join(""),
+                },
+            ],
+        }));
+        setTurns((current) => [...current, userTurn]);
+        const patchAnswer = (patch) => setTurns((current) => current.map((turn) => (turn.id === answerId ? patch(turn) : turn)));
+        try {
+            // Relative to the provider's own `basePath` - `streamResource` prefixes
+            // it, the same way every other bridge call is addressed.
+            const response = await streamResource("/ai/chat", { messages: history }, { signal: controller.signal });
+            // The assistant's turn is appended only once the stream is live, so a
+            // failed request leaves an error under the question rather than an
+            // empty bubble that never fills.
+            setTurns((current) => [...current, { id: answerId, role: "assistant", blocks: [], reasoning: "" }]);
+            await readStream(response, (chunk) => {
+                if (chunk.text) {
+                    patchAnswer((turn) => ({ ...turn, blocks: appendText(turn.blocks, chunk.text) }));
+                }
+                if (chunk.reasoning) {
+                    patchAnswer((turn) => ({ ...turn, reasoning: turn.reasoning + chunk.reasoning }));
+                }
+                if (chunk.toolStart) {
+                    const { id, name } = chunk.toolStart;
+                    patchAnswer((turn) => ({ ...turn, blocks: [...turn.blocks, { kind: "tool", id, name, input: null }] }));
+                }
+                if (chunk.toolInput) {
+                    const { id, input: toolInput } = chunk.toolInput;
+                    patchAnswer((turn) => ({
+                        ...turn,
+                        blocks: turn.blocks.map((block) => block.kind === "tool" && block.id === id ? { ...block, input: toolInput } : block),
+                    }));
+                }
+            });
+        }
+        catch (cause) {
+            // Pressing Stop aborts the fetch, which lands here - a decision, not a
+            // failure, and nothing to report.
+            if (!controller.signal.aborted) {
+                setError(cause instanceof Error ? cause.message : "Ask AI failed");
+            }
+        }
+        finally {
+            if (abortRef.current === controller)
+                abortRef.current = null;
+            setIsBusy(false);
+        }
+    }, [streamResource, turns]);
+    const lastTurn = turns.at(-1);
+    const isAnswering = isBusy && lastTurn?.role === "assistant";
+    const rendered = (0, react_1.useMemo)(() => turns.map((turn) => {
+        const isLive = isAnswering && turn.id === lastTurn?.id;
+        const lastTextIndex = lastTextBlockIndex(turn.blocks);
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `connect-ai-host rounded-md border border-border p-2.5 text-sm ${turn.role === "user" ? "bg-surface-secondary" : "bg-accent/5"}`, children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: turn.role === "user" ? "You" : assistantName }), turn.role === "assistant" && ((0, jsx_runtime_1.jsx)(ThinkingDisclosure, { text: turn.reasoning, isStreaming: isLive && lastTextIndex === -1 })), turn.blocks.map((block, index) => block.kind === "text" ? (
+                // The user's own turn is shown as they typed it - running a
+                // question that happens to start with `#` through the markdown
+                // renderer would turn it into a heading.
+                (0, jsx_runtime_1.jsx)("div", { children: turn.role === "user" ? ((0, jsx_runtime_1.jsx)("p", { className: "whitespace-pre-wrap", children: block.text })) : (renderMarkdown(block.text, isLive && index === lastTextIndex)) }, index)) : block.input === null ? ((0, jsx_runtime_1.jsx)(ToolSkeleton, {}, block.id)) : ((0, jsx_runtime_1.jsx)("div", { children: renderTool(block.name, block.input, renderMarkdown) }, block.id))), isLive && lastTextIndex === -1 && turn.blocks.length === 0 && (0, jsx_runtime_1.jsx)(ThinkingShimmer, {})] }, turn.id));
+    }), [turns, isAnswering, lastTurn?.id, assistantName, renderMarkdown]);
+    // Signed out there is no workspace to ground an answer in, and the bridge
+    // would answer 401 - so there is nothing to offer, not even a button.
+    if (isLoading || !session?.user)
+        return null;
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const text = input.trim();
+        if (!text || isBusy)
+            return;
+        setInput("");
+        void send(text);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isOpen && ((0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "primary", "aria-label": title, onPress: () => setIsOpen(true), className: "fixed bottom-4 end-4 z-30 size-12 rounded-full shadow-lg sm:bottom-6 sm:end-6", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-5" }) })), (0, jsx_runtime_1.jsx)("div", { className: `fixed inset-0 z-40 bg-backdrop transition-opacity lg:hidden ${isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`, onClick: () => setIsOpen(false), "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("aside", { "aria-hidden": !isOpen, className: `fixed inset-y-0 end-0 z-50 flex flex-col border-s border-border bg-surface shadow-xl transition-transform duration-300 ease-in-out ${panelShellWidth(isOpen)} ${isOpen ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"} lg:static lg:z-auto lg:translate-x-0 lg:shadow-none lg:transition-[width]`, children: (0, jsx_runtime_1.jsxs)("div", { className: `flex h-full shrink-0 flex-col ${PANEL_WIDTH}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 shrink-0 text-accent" }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 text-sm font-semibold", children: title }), (0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Close", onPress: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [turns.length === 0 && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: hint }), rendered, isBusy && lastTurn?.role === "user" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-md border border-border bg-accent/5 p-2.5 text-sm", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: assistantName }), (0, jsx_runtime_1.jsx)(ThinkingShimmer, {})] })), error && (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-danger", children: error }), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex gap-2 border-t border-border p-3", children: [(0, jsx_runtime_1.jsxs)(react_2.TextField, { variant: "secondary", className: "flex-1", children: [(0, jsx_runtime_1.jsx)(react_2.Label, { className: "sr-only", children: placeholder }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: placeholder, value: input, onChange: (event) => setInput(event.currentTarget.value), disabled: isBusy })] }), isBusy ? ((0, jsx_runtime_1.jsx)(react_2.Button, { type: "button", isIconOnly: true, variant: "secondary", "aria-label": "Stop generating", onPress: stop, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Square, { className: "size-3.5" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", isIconOnly: true, variant: "primary", "aria-label": "Send", isDisabled: !input.trim(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "size-3.5" }) }))] })] }) })] }));
+}
+/** Hoisted for the same reference-equality reason as `ANIMATED` - Streamdown compares it by identity. */
+const LINK_SAFETY = { enabled: false };