@cosmoops/connect-sdk 0.9.0 → 0.16.0

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

@@ -12,7 +12,11 @@ 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");
@@ -37,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.
  */
@@ -55,36 +59,21 @@ 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 { AppShell } from "@cosmoops/connect-sdk/client";
- * import { LayoutDashboard, Truck } from "lucide-react";
+ * import { LayoutDashboard, Settings, Truck } from "lucide-react";
  *
  * export function Shell({ children }: { children: React.ReactNode }) {
  *   return (
@@ -95,7 +84,10 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  *       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}
@@ -104,16 +96,36 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  * }
  * ```
  *
+ * **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 AppShell({ 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, askAi = true, 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);
@@ -123,8 +135,7 @@ function AppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = si
     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;
@@ -135,24 +146,47 @@ function AppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = si
             // 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] }) })] }), askAi && (0, jsx_runtime_1.jsx)(ask_ai_js_1.ConnectAskAi, { ...(askAi === true ? {} : askAi) })] }));
+    // 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

@@ -8,8 +8,29 @@ 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 use_active_path_js_1 = require("../use-active-path.js");
+const ai_screens_js_1 = require("./ai-screens.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
@@ -47,7 +68,7 @@ function ThinkingDisclosure({ text, isStreaming }) {
  */
 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) {
+function renderTool(name, input, renderMarkdown, screens, renderLink) {
     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;
@@ -63,6 +84,12 @@ function renderTool(name, input, renderMarkdown) {
             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;
+        case "showActions":
+            // Every href is checked against the declared screens before anything is
+            // drawn - see `AiActions`. With none declared, nothing resolves and the
+            // tool renders nothing, which is the correct outcome rather than a
+            // collection of dead links.
+            return isArray(field(input, "actions")) ? ((0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiActions, { ...input, screens: screens, renderLink: renderLink })) : null;
         default:
             return null;
     }
@@ -204,7 +231,7 @@ function appendText(blocks, text) {
  * 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, }) {
+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, screens = [], activePath, renderLink, }) {
     const { session, isLoading, streamResource } = (0, provider_js_1.useConnect)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
     const [turns, setTurns] = (0, react_1.useState)([]);
@@ -223,6 +250,16 @@ function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placehold
     // A conversation left mid-stream should stop costing tokens the moment the
     // panel goes away.
     (0, react_1.useEffect)(() => () => abortRef.current?.abort(), []);
+    /**
+     * The declared screen the user is on, if any.
+     *
+     * Drives the opening chips here and travels with each message so the answer
+     * is written from where they are standing. `null` whenever nothing matches -
+     * an application need only describe the screens it wants the assistant to
+     * know about.
+     */
+    const resolvedPath = (0, use_active_path_js_1.useActivePath)(activePath);
+    const currentScreen = (0, react_1.useMemo)(() => (resolvedPath ? (0, ai_screens_js_1.matchConnectScreen)(screens, resolvedPath) : null), [screens, resolvedPath]);
     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
@@ -267,7 +304,15 @@ function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placehold
         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 });
+            const response = await streamResource("/ai/chat", {
+                messages: history,
+                // What the assistant is told about where the user is, and what your
+                // application's screens are. Both are prose: Connect uses them to
+                // write a better answer and to validate action links, never to
+                // decide what anyone may do. See `ConnectScreen`.
+                ...(resolvedPath ? { screenContext: { pathname: resolvedPath } } : {}),
+                ...(screens.length > 0 ? { screens } : {}),
+            }, { 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.
@@ -314,7 +359,7 @@ function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placehold
                 // 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));
+                (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, screens, renderLink) }, 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.
@@ -328,7 +373,7 @@ function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placehold
         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 ${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: (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" }) }))] })] }) })] }));
+    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.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: hint }), currentScreen?.suggestions?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1.5", children: currentScreen.suggestions.map((suggestion) => ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "secondary", className: "h-auto rounded-full px-2.5 py-1 text-start text-xs whitespace-normal", isDisabled: isBusy, onPress: () => void send(suggestion), children: suggestion }, suggestion))) })) : null] })), 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 };

package/dist/cjs/client/components/confirm-dialog.js

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectConfirmDialog = ConnectConfirmDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+/**
+ * The confirmation in front of a destructive action.
+ *
+ * **It closes on confirm, not on response.** Holding the modal open until the
+ * server answers makes every delete feel like a form submission, and the error
+ * path already has somewhere to go - a toast, or the row reappearing. A dialog
+ * that stays open to report failure is right only where the failure is
+ * *expected* and correctable in place (a seat cap, a last-admin invariant),
+ * and that is a blocking form, not this.
+ *
+ * `onConfirm` may return a promise. It is not awaited before closing, but a
+ * rejection is caught here rather than escaping - an error thrown out of an
+ * async transition reaches the nearest error boundary and takes the page down.
+ *
+ * The anatomy is HeroUI's: `Modal.Backdrop` owns the open state,
+ * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. The trigger
+ * goes inside `Modal.Trigger`, which *is* a React Aria button - so pass a
+ * plain element, never a `<Button>`, or the nested button swallows the press
+ * and the dialog silently never opens.
+ */
+function ConnectConfirmDialog({ trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger", onConfirm, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const confirm = () => {
+        setIsOpen(false);
+        void Promise.resolve()
+            .then(() => onConfirm())
+            .catch(() => {
+            // Swallowed on purpose - see the note above. Reporting belongs to the
+            // caller, which owns the toast and the rollback.
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Modal.Trigger, { onClick: () => setIsOpen(true), children: trigger }), (0, jsx_runtime_1.jsx)(react_2.Modal.Backdrop, { isOpen: isOpen, onOpenChange: setIsOpen, children: (0, jsx_runtime_1.jsx)(react_2.Modal.Container, { size: "sm", children: (0, jsx_runtime_1.jsxs)(react_2.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_2.Modal.CloseTrigger, { onPress: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)(react_2.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Heading, { children: title }) }), description && ((0, jsx_runtime_1.jsx)(react_2.Modal.Body, { children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: description }) })), (0, jsx_runtime_1.jsxs)(react_2.Modal.Footer, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "secondary", onPress: () => setIsOpen(false), children: cancelLabel }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: tone === "danger" ? "danger" : "primary", onPress: confirm, children: confirmLabel })] })] }) }) })] }));
+}

package/dist/cjs/client/components/cursor-pagination.js

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectCursorPagination = ConnectCursorPagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * Next / previous for a cursor-paginated list.
+ *
+ * Cursor rather than page numbers, and the component shape follows from that:
+ * there is no "page 7 of 42" because a keyset-paginated list does not know how
+ * many pages there are without a second count query over the same filter -
+ * which is a billed index scan for a number nobody acts on. What a user does
+ * act on is "more" and "back", and those are exact.
+ *
+ * The count is announced in a live region so a screen-reader user learns that
+ * filtering or paging changed the result set. Without it the table silently
+ * swaps its contents.
+ */
+function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending = false, noun = ["row", "rows"], }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3 pt-3", children: [(0, jsx_runtime_1.jsxs)("p", { "aria-live": "polite", className: "text-xs text-muted", children: [shown, " ", shown === 1 ? noun[0] : noun[1]] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", isDisabled: !hasPrevious || isPending, onPress: onPrevious, children: "Previous" }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", isDisabled: nextCursor === null || isPending, onPress: () => nextCursor && onNext(nextCursor), children: "Next" })] })] }));
+}

package/dist/cjs/client/components/filter-tabs.js

@@ -0,0 +1,24 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectFilterTabs = ConnectFilterTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * A single-select filter strip - the "All / Open / Won / Lost" row above a
+ * list.
+ *
+ * Real radio semantics rather than a row of buttons: it is a single choice
+ * from a closed set, so arrow keys should move between options and the
+ * selected one should be announced as selected. A group of `<button>`s gets
+ * neither, and that is the usual hand-rolled shape.
+ *
+ * Scrolls horizontally rather than wrapping on a narrow viewport - a filter
+ * strip that wraps to three lines pushes the list itself off the screen.
+ */
+function ConnectFilterTabs({ options, value, onChange, label, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { role: "radiogroup", "aria-label": label, className: "-mx-1 flex gap-2 overflow-x-auto px-1 pb-1", children: options.map((option) => {
+            const isSelected = option.value === value;
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": isSelected, onClick: () => onChange(option.value), className: "shrink-0 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", children: (0, jsx_runtime_1.jsxs)(react_1.Chip, { size: "sm", variant: isSelected ? "primary" : "soft", color: isSelected ? "accent" : "default", children: [option.label, option.count !== undefined && (0, jsx_runtime_1.jsx)("span", { className: "ml-1 opacity-70", children: option.count })] }) }, option.value ?? "__all"));
+        }) }));
+}

package/dist/cjs/client/components/grievance-notice.js

@@ -0,0 +1,30 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectGrievanceNotice = ConnectGrievanceNotice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const provider_js_1 = require("../provider.js");
+/**
+ * The DPDP s.13 grievance channel, rendered.
+ *
+ * Every application on the platform is a Data Processor under one notice, so
+ * the wording lives here rather than being retyped per application - a user
+ * comparing two applications' privacy pages should not find two different
+ * accounts of who their Data Fiduciary is.
+ *
+ * Renders nothing at all while loading and nothing on failure, rather than a
+ * skeleton or an error. That is unusual here and deliberate: this component
+ * is almost always inside a larger privacy page that has its own content, and
+ * a red error box in the middle of a legal notice reads as the notice itself
+ * being broken. The address is also on the public web either way. Pass
+ * `useConnectCompanyProfile()` directly to your own layout if you want to
+ * handle those states yourself.
+ */
+function ConnectGrievanceNotice({ title = "Grievance redressal", applicationName, className, }) {
+    const { data } = (0, provider_js_1.useConnectCompanyProfile)();
+    const profile = data?.companyProfile;
+    if (!profile)
+        return null;
+    const { grievance } = profile;
+    return ((0, jsx_runtime_1.jsxs)("section", { className: className ?? "space-y-3", children: [title !== null && (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: [applicationName ? `${applicationName} is operated on ` : "This service runs on ", "the CosmoOps Connect platform. ", (0, jsx_runtime_1.jsx)("strong", { className: "font-medium text-foreground", children: profile.legalName }), " ", "is the Data Fiduciary for personal data processed here, under the Digital Personal Data Protection Act, 2023."] }), (0, jsx_runtime_1.jsxs)("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-[auto_1fr]", children: [(0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Grievance Officer" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: grievance.officerName }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Email" }), (0, jsx_runtime_1.jsx)("dd", { children: (0, jsx_runtime_1.jsx)("a", { className: "text-accent underline underline-offset-2", href: `mailto:${grievance.officerEmail}`, children: grievance.officerEmail }) }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Contactable" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: grievance.hours }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Registered address" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: profile.registeredAddress })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: ["Complaints are acknowledged and resolved within ", grievance.responseDays, " days of receipt."] })] }));
+}

package/dist/cjs/client/components/link-button.js

@@ -5,20 +5,27 @@ exports.ConnectLinkButton = ConnectLinkButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
 /**
- * A HeroUI `Button` that renders a real `<a>`.
+ * A HeroUI `Button` that renders a link.
  *
- * A plain anchor, deliberately not a router link: this package imports nothing
- * from `next` (see the `./next` entry's doc comment for why that is a hard
- * rule), so it cannot know which router - if any - the host app uses. An
- * `<a href>` navigates under all of them, and a host that wants client-side
- * routing can pass its own element via `render` on the underlying `Button`.
+ * HeroUI v3's `Button` has no `as` prop, so `<Button as={Link}>` does not type
+ * check and does not work - this is the supported route, via `render`.
  *
  * The cast is the same one HeroUI's own "Render Function" example needs:
  * `render` types its argument as the props of the element `Button` would have
- * emitted, which is a `<button>` - including a `ref` typed to
+ * emitted, which is a `<button>`, including a `ref` typed to
  * `HTMLButtonElement`. Spreading that onto an anchor is sound at runtime and
- * unrepresentable in the type, which is exactly what a cast is for.
+ * unrepresentable in the type, which is what the cast is for.
  */
-function ConnectLinkButton({ href, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Button, { ...props, render: (renderProps) => (0, jsx_runtime_1.jsx)("a", { ...renderProps, href: href }) }));
+function ConnectLinkButton({ href, renderLink, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Button, { ...props, render: (renderProps) => {
+            const anchorProps = renderProps;
+            if (renderLink) {
+                return renderLink({
+                    href,
+                    ...(anchorProps.className ? { className: anchorProps.className } : {}),
+                    children: anchorProps.children,
+                });
+            }
+            return (0, jsx_runtime_1.jsx)("a", { ...anchorProps, href: href });
+        } }));
 }

package/dist/cjs/client/components/logo.js

@@ -18,10 +18,11 @@ const mark_js_1 = require("../mark.js");
  * as `text-sm`, with the badge, gap and tracking all in proportion. That is
  * why there is no `size` prop.
  */
-function ConnectLogo({ name, icon, collapsed = false, className }) {
+function ConnectLogo({ name, icon, variant, collapsed = false, className }) {
+    const resolved = variant ?? (collapsed ? "mark" : "full");
     const badge = ((0, jsx_runtime_1.jsxs)("span", { className: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[0.28em] bg-accent text-accent-foreground", style: { width: "2em", height: "2em" }, "aria-hidden": "true", children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center justify-center [&>*]:size-[1.25em]", children: icon }) : null, !icon && (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: "absolute inset-0 size-full" })] }));
-    if (collapsed) {
+    if (resolved === "mark") {
         return ((0, jsx_runtime_1.jsx)("span", { className: `inline-flex text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": name, children: badge }));
     }
-    return ((0, jsx_runtime_1.jsxs)("span", { className: `inline-flex min-w-0 items-center gap-[0.6em] text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": `cosmoops ${name}`, children: [badge, (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col leading-none", children: [(0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { children: "cosmo" }), (0, jsx_runtime_1.jsx)("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), (0, jsx_runtime_1.jsx)("span", { children: "ops" })] }), (0, jsx_runtime_1.jsx)("span", { className: "mt-[0.42em] truncate text-[0.6em] font-semibold uppercase tracking-[0.26em] text-accent", "aria-hidden": "true", children: name })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: `inline-flex min-w-0 items-center gap-[0.6em] text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": `cosmoops ${name}`, children: [resolved === "full" && badge, (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col leading-none", children: [(0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { children: "cosmo" }), (0, jsx_runtime_1.jsx)("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), (0, jsx_runtime_1.jsx)("span", { children: "ops" })] }), (0, jsx_runtime_1.jsx)("span", { className: "mt-[0.42em] truncate text-[0.6em] font-semibold uppercase tracking-[0.26em] text-accent", "aria-hidden": "true", children: name })] })] }));
 }

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

@@ -5,6 +5,7 @@ exports.flattenNav = flattenNav;
 exports.normalizePath = normalizePath;
 exports.resolveActivePath = resolveActivePath;
 exports.isNavItemActive = isNavItemActive;
+exports.filterNavForAudience = filterNavForAudience;
 exports.gateExemptPaths = gateExemptPaths;
 function isSection(entry) {
     return !("href" in entry) && Array.isArray(entry.items);
@@ -89,6 +90,46 @@ function isNavItemActive(item, activeHref) {
         return false;
     return normalizePath(item.href) === activeHref;
 }
+/**
+ * `nav` with every item the current session should not see removed - see
+ * `ConnectNavItem.audience`.
+ *
+ * Applied to nested `items` too, and a parent whose children all disappear is
+ * dropped along with them: a section header pointing at nothing reads as a
+ * broken link rather than as a hidden one.
+ */
+function filterNavForAudience(nav, isStaff) {
+    const keep = (item) => item.audience === undefined || (item.audience === "staff") === isStaff;
+    const filterItem = (item) => {
+        if (!keep(item))
+            return null;
+        if (!item.items)
+            return item;
+        const items = item.items.filter(keep);
+        // A parent that had children and now has none, but is a real destination
+        // in its own right, still renders - only one that exists purely to hold
+        // them is dropped.
+        if (items.length === 0 && item.items.length > 0 && !item.href)
+            return null;
+        return { ...item, items };
+    };
+    // A plain loop rather than `flatMap`: the array's element type is a union,
+    // so a callback returning either shape widens past what `flatMap` accepts.
+    const out = [];
+    for (const entry of nav) {
+        if ("items" in entry && !("href" in entry)) {
+            const section = entry;
+            const items = section.items.map(filterItem).filter((i) => i !== null);
+            if (items.length > 0)
+                out.push({ ...section, items });
+            continue;
+        }
+        const item = filterItem(entry);
+        if (item)
+            out.push(item);
+    }
+    return out;
+}
 /** Hrefs declared `gateExempt` - the routes `AppShell` renders outside its `ConnectAccessGate`. */
 function gateExemptPaths(nav) {
     return flattenNav(nav)