@cosmoops/connect-sdk 0.7.0 → 0.9.0

package/dist/esm/client/components/ai-widgets.js

@@ -0,0 +1,223 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button } from "@heroui/react";
+import { ArrowDown, ArrowUp, ChevronsUpDown, Download, ExternalLink, FileText, Minus, TrendingDown, TrendingUp } from "lucide-react";
+import { AI_EMPTY_VALUE, AI_TONE_CHIP, AI_TONE_DOT, aiStatusTone, formatAiValue, isNumericAiFormat, } from "./ai-format.js";
+/**
+ * What Ask AI draws.
+ *
+ * Seven widgets, one per data shape, rendered from the model's own tool call -
+ * see `AiToolName`. Everything here is HeroUI semantic tokens and inline SVG:
+ * **no charting library, no table library, no new dependency**, because this
+ * package ships to partners and a chart library is not a reasonable thing to
+ * make every application platform install for one panel.
+ *
+ * The hand-rolled chart is the deliberate part of that. A 400px side panel does
+ * not need pan, zoom, brushes or animation; it needs axis labels a human can
+ * read and a line that goes where the numbers do. That is ~80 lines of SVG.
+ */
+/** The four small panels share one frame, so an answer with two of them reads as one object. */
+function Panel({ title, children }) {
+    return (_jsxs("figure", { className: "my-3 rounded-lg border border-border p-3", children: [title && _jsx("figcaption", { className: "mb-2 text-xs font-semibold", children: title }), children] }));
+}
+const TONE_TEXT = {
+    neutral: "text-muted",
+    positive: "text-success",
+    warning: "text-warning",
+    danger: "text-danger",
+};
+function StatusChip({ value }) {
+    return (_jsx("span", { className: `inline-block rounded-full px-1.5 py-0.5 text-[10px] font-medium ${AI_TONE_CHIP[aiStatusTone(value)]}`, children: String(value) }));
+}
+/* ------------------------------------------------------------------ table */
+/**
+ * `showTable`. Sorting and CSV are what a table is *for* - once an answer is
+ * tabular the next thing anyone wants is to reorder it or take it elsewhere,
+ * and a markdown table can do neither. Both work off the raw values, so
+ * "₹12,500" sorts as 12500 and the export carries numbers a spreadsheet can add.
+ */
+export function AiTable({ title, columns, rows, caption }) {
+    // By column *index*: rows are positional (see `AiTableInput`), so the index
+    // is the only identity a column has.
+    const [sort, setSort] = useState(null);
+    const sorted = useMemo(() => {
+        if (!sort)
+            return rows;
+        const direction = sort.direction === "asc" ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const left = a[sort.column];
+            const right = b[sort.column];
+            // Missing values sink in both directions. The alternative is empty rows
+            // migrating to the top when you reverse a column, which reads as data
+            // appearing out of nowhere.
+            if (left === null || left === undefined)
+                return 1;
+            if (right === null || right === undefined)
+                return -1;
+            if (typeof left === "number" && typeof right === "number")
+                return (left - right) * direction;
+            return String(left).localeCompare(String(right)) * direction;
+        });
+    }, [rows, sort]);
+    const downloadCsv = () => {
+        const escape = (value) => `"${String(value ?? "").replaceAll('"', '""')}"`;
+        const csv = [
+            columns.map((column) => escape(column.label)).join(","),
+            ...sorted.map((row) => columns.map((_column, index) => escape(row[index])).join(",")),
+        ].join("\n");
+        const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${(title ?? "table").toLowerCase().replaceAll(/[^a-z0-9]+/g, "-")}.csv`;
+        link.click();
+        URL.revokeObjectURL(url);
+    };
+    const toggleSort = (column) => setSort((current) => current?.column === column
+        ? current.direction === "asc"
+            ? { column, direction: "desc" }
+            : null
+        : { column, direction: "asc" });
+    return (_jsxs("figure", { className: "my-3 overflow-hidden rounded-lg border border-border", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-surface-secondary px-3 py-2", children: [_jsx("figcaption", { className: "flex-1 truncate text-xs font-semibold", children: title ?? "Results" }), _jsxs("span", { className: "text-[11px] text-muted", children: [rows.length, " rows"] }), _jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Download as CSV", onPress: downloadCsv, children: _jsx(Download, { className: "size-3.5" }) })] }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsx("tr", { className: "border-b border-border", children: columns.map((column, columnIndex) => {
+                                    const isSorted = sort?.column === columnIndex;
+                                    const Icon = !isSorted ? ChevronsUpDown : sort.direction === "asc" ? ArrowUp : ArrowDown;
+                                    return (_jsx("th", { scope: "col", className: "p-0", children: _jsxs("button", { type: "button", onClick: () => toggleSort(columnIndex), "aria-label": `Sort by ${column.label}`, className: `flex w-full items-center gap-1 px-2.5 py-1.5 font-medium whitespace-nowrap hover:bg-surface-secondary ${isNumericAiFormat(column.format) ? "justify-end" : "justify-start"}`, children: [column.label, _jsx(Icon, { className: `size-3 shrink-0 ${isSorted ? "text-foreground" : "text-muted/60"}` })] }) }, columnIndex));
+                                }) }) }), _jsxs("tbody", { children: [sorted.map((row, index) => (_jsx("tr", { className: "border-b border-border/60 last:border-b-0", children: columns.map((column, columnIndex) => {
+                                        const value = row[columnIndex] ?? null;
+                                        return (_jsx("td", { className: `px-2.5 py-1.5 align-top ${isNumericAiFormat(column.format) ? "text-end tabular-nums" : "text-start"}`, children: column.format === "status" && value !== null ? (_jsx(StatusChip, { value: value })) : (_jsx("span", { className: value === null ? "text-muted" : undefined, children: formatAiValue(value, column.format) })) }, columnIndex));
+                                    }) }, index))), sorted.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "px-2.5 py-3 text-center text-muted", children: AI_EMPTY_VALUE }) }))] })] }) }), caption && _jsx("p", { className: "border-t border-border px-3 py-1.5 text-[11px] text-muted", children: caption })] }));
+}
+/* ------------------------------------------------------------------ chart */
+/**
+ * The theme's categorical ramp. Series identity is carried by the legend as
+ * well as the hue, never by hue alone.
+ */
+const SERIES_COLORS = [
+    "var(--chart-cat-1, var(--accent))",
+    "var(--chart-cat-2, var(--warning))",
+    "var(--chart-cat-3, var(--success))",
+    "var(--chart-cat-4, var(--danger))",
+    "var(--chart-cat-5, var(--muted))",
+];
+const VIEW_W = 320;
+const VIEW_H = 140;
+const PAD = { top: 8, right: 8, bottom: 20, left: 44 };
+/**
+ * `showChart`. Cartesian kinds are drawn as SVG against a fixed viewBox and
+ * scaled by the browser, which is why there is no resize observer here: the
+ * chart is resolution-independent, so "responsive" costs nothing at runtime.
+ *
+ * `pie` is deliberately *not* a pie. In a 400px column a pie plus its legend
+ * is smaller than the labels it needs, and reading angles is worse than
+ * reading lengths at any size - so proportions render as a labelled bar list,
+ * which answers the same question and stays legible.
+ */
+export function AiChart({ title, kind, xLabel, yLabel, valueFormat, series, caption }) {
+    const format = (value) => formatAiValue(value, valueFormat);
+    const axis = series[0]?.points.map((point) => point.x) ?? [];
+    // Which x the pointer is nearest. An SVG chart is an interactive chart:
+    // without this the exact values are unreadable, because a 140px-tall plot
+    // can only carry three axis labels.
+    const [hovered, setHovered] = useState(null);
+    if (kind === "pie") {
+        const slices = series[0]?.points ?? [];
+        // Guards a divide-by-zero on an all-zero set, which would otherwise make
+        // every bar `NaN%` wide.
+        const total = slices.reduce((sum, point) => sum + (point.y ?? 0), 0) || 1;
+        return (_jsxs(Panel, { title: title, children: [_jsx("ul", { className: "space-y-1.5", children: slices.map((slice, index) => (_jsxs("li", { className: "text-xs", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "truncate", children: slice.x }), _jsxs("span", { className: "shrink-0 tabular-nums text-muted", children: [format(slice.y ?? 0), " \u00B7 ", Math.round(((slice.y ?? 0) / total) * 100), "%"] })] }), _jsx("div", { className: "mt-0.5 h-1.5 overflow-hidden rounded-full bg-surface-tertiary", children: _jsx("div", { className: "h-full rounded-full", style: {
+                                        width: `${((slice.y ?? 0) / total) * 100}%`,
+                                        backgroundColor: SERIES_COLORS[index % SERIES_COLORS.length],
+                                    } }) })] }, slice.x))) }), caption && _jsx("p", { className: "mt-2 text-[11px] text-muted", children: caption })] }));
+    }
+    const values = series.flatMap((entry) => entry.points.map((point) => point.y)).filter((y) => y !== null);
+    // A flat series would give a zero-height range and divide by zero; padding
+    // the top by 1 draws it as a line across the middle instead of NaN.
+    const max = values.length ? Math.max(...values, 0) : 1;
+    const min = values.length ? Math.min(...values, 0) : 0;
+    const range = max - min || 1;
+    const plotW = VIEW_W - PAD.left - PAD.right;
+    const plotH = VIEW_H - PAD.top - PAD.bottom;
+    const xAt = (index) => PAD.left + (axis.length <= 1 ? plotW / 2 : (index / (axis.length - 1)) * plotW);
+    const yAt = (value) => PAD.top + plotH - ((value - min) / range) * plotH;
+    /** Ticks at the extremes and the midpoint - three labels is all a 140px-tall plot can carry. */
+    const yTicks = [min, min + range / 2, max];
+    // First, middle and last x label only, for the same reason.
+    const xTicks = axis.length <= 3 ? axis.map((_, i) => i) : [0, Math.floor((axis.length - 1) / 2), axis.length - 1];
+    return (_jsxs(Panel, { title: title, children: [_jsxs("div", { className: "relative", children: [hovered !== null && (
+                    // Positioned as a percentage of the plot so it tracks the mark at any
+                    // rendered width - the SVG scales, and this has to scale with it.
+                    _jsxs("div", { className: "pointer-events-none absolute top-0 z-10 -translate-x-1/2 rounded-md border border-border bg-overlay px-2 py-1 text-[10px] shadow-lg", style: { left: `${(xAt(hovered) / VIEW_W) * 100}%` }, children: [_jsx("p", { className: "font-medium", children: axis[hovered] }), series.map((entry, index) => {
+                                const value = entry.points[hovered]?.y;
+                                return (_jsxs("p", { className: "flex items-center gap-1 text-muted", children: [_jsx("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: SERIES_COLORS[index % SERIES_COLORS.length] }, "aria-hidden": true }), _jsx("span", { className: "tabular-nums", children: value === null || value === undefined ? AI_EMPTY_VALUE : format(value) })] }, entry.name));
+                            })] })), _jsxs("svg", { viewBox: `0 0 ${VIEW_W} ${VIEW_H}`, className: "w-full", role: "img", "aria-label": title ?? "Chart", onMouseLeave: () => setHovered(null), children: [yTicks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: PAD.left, x2: VIEW_W - PAD.right, y1: yAt(tick), y2: yAt(tick), stroke: "var(--separator)", strokeDasharray: "3 3" }), _jsx("text", { x: PAD.left - 4, y: yAt(tick) + 3, textAnchor: "end", fontSize: "7", fill: "var(--muted)", children: format(tick) })] }, tick))), xTicks.map((index) => (_jsx("text", { x: xAt(index), y: VIEW_H - 6, textAnchor: "middle", fontSize: "7", fill: "var(--muted)", children: axis[index] }, index))), series.map((entry, seriesIndex) => {
+                                const color = SERIES_COLORS[seriesIndex % SERIES_COLORS.length];
+                                if (kind === "bar") {
+                                    const slot = plotW / Math.max(axis.length, 1);
+                                    // A 2px surface gap between adjacent series, so two bars in one
+                                    // slot read as two marks rather than one two-toned block.
+                                    const width = Math.max(2, (slot * 0.7) / series.length - (series.length > 1 ? 2 : 0));
+                                    return entry.points.map((point, index) => point.y === null ? null : (_jsx("rect", { x: xAt(index) - (width * series.length) / 2 + seriesIndex * width, y: Math.min(yAt(point.y), yAt(0)), width: width, height: Math.max(1, Math.abs(yAt(point.y) - yAt(0))), fill: color, rx: "3" }, `${entry.name}-${point.x}`)));
+                                }
+                                // `null` breaks the path into separate segments rather than drawing
+                                // a straight line through a gap that has no data in it.
+                                const segments = [];
+                                let current = [];
+                                entry.points.forEach((point, index) => {
+                                    if (point.y === null) {
+                                        if (current.length)
+                                            segments.push(current.join(" "));
+                                        current = [];
+                                        return;
+                                    }
+                                    current.push(`${current.length ? "L" : "M"}${xAt(index)},${yAt(point.y)}`);
+                                });
+                                if (current.length)
+                                    segments.push(current.join(" "));
+                                return (_jsxs("g", { children: [kind === "area" && segments.length === 1 && (_jsx("path", { d: `${segments[0]} L${xAt(entry.points.length - 1)},${yAt(min)} L${xAt(0)},${yAt(min)} Z`, fill: color, fillOpacity: "0.15" })), segments.map((segment) => (_jsx("path", { d: segment, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }, segment)))] }, entry.name));
+                            }), axis.map((label, index) => (_jsx("rect", { x: xAt(index) - plotW / Math.max(axis.length, 1) / 2, y: PAD.top, width: plotW / Math.max(axis.length, 1), height: plotH, fill: "transparent", onMouseEnter: () => setHovered(index) }, label))), hovered !== null && (_jsx("line", { x1: xAt(hovered), x2: xAt(hovered), y1: PAD.top, y2: PAD.top + plotH, stroke: "var(--border)", strokeWidth: "1" }))] })] }), (series.length > 1 || xLabel || yLabel) && (_jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted", children: [series.length > 1 &&
+                        series.map((entry, index) => (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: SERIES_COLORS[index % SERIES_COLORS.length] }, "aria-hidden": true }), entry.name] }, entry.name))), yLabel && _jsxs("span", { children: ["y: ", yLabel] }), xLabel && _jsxs("span", { children: ["x: ", xLabel] })] })), caption && _jsx("p", { className: "mt-2 text-[11px] text-muted", children: caption })] }));
+}
+/* ----------------------------------------------------------------- panels */
+/**
+ * `showMetrics`. A delta is coloured by `deltaMeaning`, not by its sign -
+ * churn rising is bad and revenue rising is good, and painting both green
+ * because the arrow points up is exactly the confidently-wrong signal a
+ * dashboard must never send. The arrow still shows direction, so meaning and
+ * direction stay two separate channels.
+ */
+export function AiMetrics({ title, metrics }) {
+    return (_jsx(Panel, { title: title, children: _jsx("div", { className: "grid grid-cols-2 gap-2", children: metrics.map((metric) => {
+                const delta = metric.delta ?? null;
+                const rising = delta !== null && delta > 0;
+                const Arrow = delta === null || delta === 0 ? Minus : rising ? TrendingUp : TrendingDown;
+                const good = metric.deltaMeaning === "neutral" || delta === null || delta === 0
+                    ? null
+                    : metric.deltaMeaning === "up-is-good"
+                        ? rising
+                        : !rising;
+                return (_jsxs("div", { className: "rounded-md bg-surface-secondary p-2.5", children: [_jsx("p", { className: "truncate text-[11px] text-muted", children: metric.label }), _jsx("p", { className: "mt-0.5 text-base font-semibold tabular-nums", children: formatAiValue(metric.value, metric.format) }), delta !== null && (_jsxs("p", { className: `mt-0.5 flex items-center gap-0.5 text-[11px] tabular-nums ${good === null ? "text-muted" : good ? "text-success" : "text-danger"}`, children: [_jsx(Arrow, { className: "size-3", "aria-hidden": true }), formatAiValue(Math.abs(delta), "percent")] })), metric.hint && _jsx("p", { className: "mt-0.5 text-[10px] text-muted", children: metric.hint })] }, metric.label));
+            }) }) }));
+}
+/** `showTimeline`: dated events, oldest first, on a single rail. */
+export function AiTimeline({ title, events }) {
+    return (_jsx(Panel, { title: title, children: _jsxs("ol", { className: "relative space-y-3 ps-4", children: [_jsx("span", { className: "absolute inset-y-1 start-1 w-px bg-border", "aria-hidden": true }), events.map((event, index) => (_jsxs("li", { className: "relative", children: [_jsx("span", { className: `absolute -start-4 top-1 size-2 rounded-full ring-2 ring-surface ${AI_TONE_DOT[event.tone]}`, "aria-hidden": true }), _jsx("p", { className: "text-[11px] text-muted", children: formatAiValue(event.at, "datetime") }), _jsx("p", { className: "text-xs font-medium", children: event.title }), event.detail && _jsx("p", { className: "text-xs text-muted", children: event.detail })] }, `${event.at}-${index}`)))] }) }));
+}
+/** `showDetails`: one entity's fields, as a definition list rather than a one-row table. */
+export function AiDetails({ title, fields }) {
+    return (_jsx(Panel, { title: title, children: _jsx("dl", { className: "divide-y divide-border/60", children: fields.map((field) => (_jsxs("div", { className: "flex gap-3 py-1.5 first:pt-0 last:pb-0", children: [_jsx("dt", { className: "w-2/5 shrink-0 text-xs text-muted", children: field.label }), _jsx("dd", { className: `min-w-0 flex-1 text-xs break-words ${TONE_TEXT[field.tone]}`, children: field.format === "status" && field.value !== null ? (_jsx(StatusChip, { value: field.value })) : (formatAiValue(field.value, field.format)) })] }, field.label))) }) }));
+}
+/** `showSteps`: an ordered procedure. `renderDetail` is how the panel feeds each step back through its markdown renderer. */
+export function AiSteps({ title, steps, renderDetail, }) {
+    return (_jsx(Panel, { title: title, children: _jsx("ol", { className: "space-y-2.5", children: steps.map((step, index) => (_jsxs("li", { className: "flex gap-2.5", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-accent/12 text-[10px] font-semibold text-accent", children: index + 1 }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-xs font-medium", children: step.title }), step.detail && (_jsx("div", { className: "mt-0.5 text-xs text-muted", children: renderDetail ? renderDetail(step.detail) : _jsx("span", { className: "whitespace-pre-wrap", children: step.detail }) }))] })] }, step.title))) }) }));
+}
+/**
+ * `showSources`: what a grounded answer actually rested on. The point of a
+ * citation is that it can be opened, so a source with a `uri` is a link and one
+ * without is still a named row - never a marker with nothing behind it.
+ */
+export function AiSources({ sources }) {
+    return (_jsxs("figure", { className: "my-3 rounded-lg border border-border bg-surface-secondary p-2.5", children: [_jsx("figcaption", { className: "mb-1.5 text-[11px] font-semibold tracking-wide text-muted uppercase", children: "Sources" }), _jsx("ul", { className: "space-y-1.5", children: sources.map((source, index) => {
+                    const label = (_jsxs(_Fragment, { children: [_jsx(FileText, { className: "mt-0.5 size-3 shrink-0 text-muted", "aria-hidden": true }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs font-medium", children: source.title }), source.snippet && _jsxs("span", { className: "mt-0.5 block text-[11px] text-muted italic", children: ["\u201C", source.snippet, "\u201D"] })] })] }));
+                    return (_jsx("li", { children: source.uri ? (_jsxs("a", { href: source.uri, target: "_blank", rel: "noopener noreferrer", className: "flex gap-1.5 rounded-sm hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", children: [label, _jsx(ExternalLink, { className: "mt-0.5 size-3 shrink-0 text-muted", "aria-hidden": true })] })) : (_jsx("span", { className: "flex gap-1.5", children: label })) }, `${source.uri ?? source.title}-${index}`));
+                }) })] }));
+}

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

@@ -6,6 +6,7 @@ import { Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useConnect } from "../provider.js";
 import { ConnectAccessGate } from "./access-gate.js";
 import { ConnectAppsGrid } from "./apps-grid.js";
+import { ConnectAskAi } from "./ask-ai.js";
 import { ConnectLoginButton, ConnectRegisterButton } from "./auth-buttons.js";
 import { ConnectLogo } from "./logo.js";
 import { ConnectSideNav, defaultRenderLink } from "./side-nav.js";
@@ -79,12 +80,12 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  * "use client";
  * import Link from "next/link";
  * import { usePathname } from "next/navigation";
- * import { ConnectAppShell } from "@cosmoops/connect-sdk/client";
+ * import { AppShell } from "@cosmoops/connect-sdk/client";
  * import { LayoutDashboard, Truck } from "lucide-react";
  *
  * export function Shell({ children }: { children: React.ReactNode }) {
  *   return (
- *     <ConnectAppShell
+ *     <AppShell
  *       name="Dispatch"
  *       icon={<Truck />}
  *       activePath={usePathname()}
@@ -95,7 +96,7 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  *       ]}
  *     >
  *       {children}
- *     </ConnectAppShell>
+ *     </AppShell>
  *   );
  * }
  * ```
@@ -109,7 +110,7 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  * so a page with a shell, a plan table and a usage meter still makes one
  * session read.
  */
-export function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = defaultRenderLink, title, headerActions, sidebarFooter, footer, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, collapsible = true, showAppsGrid = true, showAuthButtons = true, theme, onThemeChange, gate = true, gateExemptRoutes, className, contentClassName, children, }) {
+export function AppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = defaultRenderLink, title, headerActions, sidebarFooter, footer, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, collapsible = true, showAppsGrid = true, showAuthButtons = true, theme, onThemeChange, gate = true, gateExemptRoutes, askAi = true, className, contentClassName, children, }) {
     const { session, isLoading } = useConnect();
     const pathname = useActivePath(activePath);
     const [mobileOpen, setMobileOpen] = useState(false);
@@ -150,5 +151,5 @@ export function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, r
                             // 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.
-                            _jsxs(Tooltip, { delay: 200, children: [_jsx(Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", className: collapsed ? "" : "self-start", onPress: toggleCollapsed, children: collapsed ? _jsx(PanelLeftOpen, { className: "size-4" }) : _jsx(PanelLeftClose, { className: "size-4" }) }), _jsx(Tooltip.Content, { placement: "right", children: collapsed ? "Expand sidebar" : "Collapse sidebar" })] }))] })] }), _jsx(Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: _jsx(Drawer.Content, { placement: "left", className: "w-72 max-w-[80vw]", children: _jsxs(Drawer.Dialog, { "aria-label": "Navigation menu", children: [_jsx(Drawer.CloseTrigger, {}), _jsx(Drawer.Header, { children: _jsx(Drawer.Heading, { "aria-label": name, children: _jsx(ConnectLogo, { name: name, icon: icon }) }) }), _jsx(Drawer.Body, { children: sideNav(true) }), sidebarFooter && _jsx(Drawer.Footer, { className: "flex flex-col items-stretch gap-3", children: sidebarFooter })] }) }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex h-16 shrink-0 items-center gap-3 border-b border-border bg-surface px-4 md:px-6", children: [_jsx(Button, { isIconOnly: true, variant: "tertiary", size: "sm", className: "md:hidden", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: _jsx(Menu, { className: "size-5" }) }), typeof title === "string" ? (_jsx("h1", { className: "truncate text-lg font-semibold text-foreground", children: title })) : (title), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [headerActions, showAppsGrid && _jsx(ConnectAppsGrid, {}), _jsx(ConnectUserMenu, { compact: true, theme: theme, onThemeChange: onThemeChange }), showAuthButtons && (_jsxs(_Fragment, { children: [_jsx(ConnectLoginButton, { size: "sm" }), _jsx(ConnectRegisterButton, { size: "sm" })] }))] })] }), _jsx("main", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-6 md:py-8", children: [gated ? _jsx(ConnectAccessGate, { children: children }) : children, footer] }) })] })] }));
+                            _jsxs(Tooltip, { delay: 200, children: [_jsx(Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", className: collapsed ? "" : "self-start", onPress: toggleCollapsed, children: collapsed ? _jsx(PanelLeftOpen, { className: "size-4" }) : _jsx(PanelLeftClose, { className: "size-4" }) }), _jsx(Tooltip.Content, { placement: "right", children: collapsed ? "Expand sidebar" : "Collapse sidebar" })] }))] })] }), _jsx(Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: _jsx(Drawer.Content, { placement: "left", className: "w-72 max-w-[80vw]", children: _jsxs(Drawer.Dialog, { "aria-label": "Navigation menu", children: [_jsx(Drawer.CloseTrigger, {}), _jsx(Drawer.Header, { children: _jsx(Drawer.Heading, { "aria-label": name, children: _jsx(ConnectLogo, { name: name, icon: icon }) }) }), _jsx(Drawer.Body, { children: sideNav(true) }), sidebarFooter && _jsx(Drawer.Footer, { className: "flex flex-col items-stretch gap-3", children: sidebarFooter })] }) }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex h-16 shrink-0 items-center gap-3 border-b border-border bg-surface px-4 md:px-6", children: [_jsx(Button, { isIconOnly: true, variant: "tertiary", size: "sm", className: "md:hidden", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: _jsx(Menu, { className: "size-5" }) }), typeof title === "string" ? (_jsx("h1", { className: "truncate text-lg font-semibold text-foreground", children: title })) : (title), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [headerActions, showAppsGrid && _jsx(ConnectAppsGrid, {}), _jsx(ConnectUserMenu, { compact: true, theme: theme, onThemeChange: onThemeChange }), showAuthButtons && (_jsxs(_Fragment, { children: [_jsx(ConnectLoginButton, { size: "sm" }), _jsx(ConnectRegisterButton, { size: "sm" })] }))] })] }), _jsx("main", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-6 md:py-8", children: [gated ? _jsx(ConnectAccessGate, { children: children }) : children, footer] }) })] }), askAi && _jsx(ConnectAskAi, { ...(askAi === true ? {} : askAi) })] }));
 }

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

@@ -0,0 +1,331 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Input, Label, TextField } from "@heroui/react";
+import { Brain, ChevronDown, Send, Sparkles, Square, X } from "lucide-react";
+import { Streamdown } from "streamdown";
+import { useConnect } from "../provider.js";
+import { AiChart, AiDetails, AiMetrics, AiSources, AiSteps, AiTable, AiTimeline } from "./ai-widgets.js";
+const PANEL_WIDTH = "w-full lg:w-[400px]";
+/**
+ * `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 (_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 (_jsxs("details", { className: "group mb-2", open: isStreaming, children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-1 text-[11px] font-medium text-muted select-none hover:text-foreground", children: [_jsx(Brain, { className: "size-3" }), isStreaming ? _jsx(ThinkingShimmer, {}) : "Thinking", _jsx(ChevronDown, { className: "size-3 transition-transform group-open:rotate-180" })] }), _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")) ? (_jsx(AiTable, { ...input })) : null;
+        case "showChart":
+            return isArray(field(input, "series")) ? _jsx(AiChart, { ...input }) : null;
+        case "showMetrics":
+            return isArray(field(input, "metrics")) ? _jsx(AiMetrics, { ...input }) : null;
+        case "showTimeline":
+            return isArray(field(input, "events")) ? _jsx(AiTimeline, { ...input }) : null;
+        case "showDetails":
+            return isArray(field(input, "fields")) ? _jsx(AiDetails, { ...input }) : null;
+        case "showSteps":
+            return isArray(field(input, "steps")) ? (_jsx(AiSteps, { ...input, renderDetail: renderMarkdown })) : null;
+        case "showSources":
+            return isArray(field(input, "sources")) ? _jsx(AiSources, { ...input }) : null;
+        default:
+            return null;
+    }
+}
+/** Placeholder while a tool's arguments are still arriving, sized like the real thing. */
+function ToolSkeleton() {
+    return (_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: _jsx(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.
+ */
+export 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 } = useConnect();
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const [turns, setTurns] = useState([]);
+    const [input, setInput] = useState("");
+    const [isBusy, setIsBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const abortRef = useRef(null);
+    const bottomRef = 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 = useRef(0);
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    }, [turns]);
+    // A conversation left mid-stream should stop costing tokens the moment the
+    // panel goes away.
+    useEffect(() => () => abortRef.current?.abort(), []);
+    const renderMarkdown = useCallback((text, isStreaming = false) => (_jsx(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 = useCallback(() => {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        setIsBusy(false);
+    }, []);
+    const send = 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 = useMemo(() => turns.map((turn) => {
+        const isLive = isAnswering && turn.id === lastTurn?.id;
+        const lastTextIndex = lastTextBlockIndex(turn.blocks);
+        return (_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: [_jsx("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: turn.role === "user" ? "You" : assistantName }), turn.role === "assistant" && (_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.
+                _jsx("div", { children: turn.role === "user" ? (_jsx("p", { className: "whitespace-pre-wrap", children: block.text })) : (renderMarkdown(block.text, isLive && index === lastTextIndex)) }, index)) : block.input === null ? (_jsx(ToolSkeleton, {}, block.id)) : (_jsx("div", { children: renderTool(block.name, block.input, renderMarkdown) }, block.id))), isLive && lastTextIndex === -1 && turn.blocks.length === 0 && _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 (_jsxs(_Fragment, { children: [!isOpen && (_jsx(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: _jsx(Sparkles, { className: "size-5" }) })), _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" }), _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 ${PANEL_WIDTH} ${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] ${isOpen ? "" : "lg:w-0 lg:overflow-hidden lg:border-s-0"}`, children: _jsxs("div", { className: `flex h-full shrink-0 flex-col ${PANEL_WIDTH}`, children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [_jsx(Sparkles, { className: "size-4 shrink-0 text-accent" }), _jsx("span", { className: "flex-1 text-sm font-semibold", children: title }), _jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Close", onPress: () => setIsOpen(false), children: _jsx(X, { className: "size-4" }) })] }), _jsxs("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [turns.length === 0 && _jsx("p", { className: "text-sm text-muted", children: hint }), rendered, isBusy && lastTurn?.role === "user" && (_jsxs("div", { className: "rounded-md border border-border bg-accent/5 p-2.5 text-sm", children: [_jsx("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: assistantName }), _jsx(ThinkingShimmer, {})] })), error && _jsx("p", { className: "text-xs text-danger", children: error }), _jsx("div", { ref: bottomRef })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2 border-t border-border p-3", children: [_jsxs(TextField, { variant: "secondary", className: "flex-1", children: [_jsx(Label, { className: "sr-only", children: placeholder }), _jsx(Input, { placeholder: placeholder, value: input, onChange: (event) => setInput(event.currentTarget.value), disabled: isBusy })] }), isBusy ? (_jsx(Button, { type: "button", isIconOnly: true, variant: "secondary", "aria-label": "Stop generating", onPress: stop, children: _jsx(Square, { className: "size-3.5" }) })) : (_jsx(Button, { type: "submit", isIconOnly: true, variant: "primary", "aria-label": "Send", isDisabled: !input.trim(), children: _jsx(Send, { className: "size-3.5" }) }))] })] }) })] }));
+}
+/** Hoisted for the same reference-equality reason as `ANIMATED` - Streamdown compares it by identity. */
+const LINK_SAFETY = { enabled: false };

package/dist/esm/client/components/nav.js

@@ -81,7 +81,7 @@ export function isNavItemActive(item, activeHref) {
         return false;
     return normalizePath(item.href) === activeHref;
 }
-/** Hrefs declared `gateExempt` - the routes `ConnectAppShell` renders outside its `ConnectAccessGate`. */
+/** Hrefs declared `gateExempt` - the routes `AppShell` renders outside its `ConnectAccessGate`. */
 export function gateExemptPaths(nav) {
     return flattenNav(nav)
         .filter((item) => item.gateExempt)