@cosmoops/connect-sdk 0.9.0 → 0.15.0

package/README.md

@@ -35,7 +35,7 @@ The fast path — most integrations are this and nothing else. Not on Next.js?
 Skip to [Other frameworks](#other-frameworks); the shape is the same, you
 just wire the session cookie yourself.
 
-**1. Install and get credentials.** From your application's Integration tab
+**1. Install and get credentials.** From your application's Connect client section
 in Connect, copy the API key and OAuth client id.
 
 ```bash
@@ -87,7 +87,7 @@ import "streamdown/styles.css";
 Skip the last two if you pass `askAi={false}` to `AppShell`. The colour tokens
 Streamdown expects are already mapped onto HeroUI's in `theme.css`.
 
-**5. Register the redirect URI.** In the application's Integration tab, add
+**5. Register the redirect URI.** In the application's Connect client section, add
 `{your origin}/api/connect/callback`. This is the one step the SDK cannot do
 for you.
 
@@ -123,7 +123,7 @@ layout and Connect's dashboard rather than files it can safely write. See
 
 Two things most integrations add next:
 
-- **A shell** — `AppShell` from `/client` is the sidebar, top bar and access
+- **A shell** — `AppShell` from `/client` is the rail and the access
   gate every application platform needs. See [App shell](#app-shell).
 - **Route protection before render** — see [Route protection and
   `proxy.ts`](#route-protection-and-proxyts) below; `requireConnectSession()`
@@ -136,7 +136,7 @@ for you under the hood.
 
 ## Server setup
 
-One credential does three jobs — the API key plaintext from your application's Integration tab is also your OAuth2 `client_secret` and the key your `id_token` is signed with. Revoking it revokes all three.
+One credential does three jobs — the API key plaintext from your application's Connect client section is also your OAuth2 `client_secret` and the key your `id_token` is signed with. Revoking it revokes all three.
 
 ```ts
 import { ConnectClient } from "@cosmoops/connect-sdk/server";
@@ -518,17 +518,17 @@ that URL yourself instead.
 import {
   AppShell,
   ConnectLoginButton, ConnectRegisterButton,
-  ConnectUserMenu, ConnectAppsGrid, ConnectPlans,
+  ConnectUserButton, ConnectAppsGrid, ConnectPlans,
 } from "@cosmoops/connect-sdk/client";
 
-// The whole frame — sidebar, top bar, access gate, Ask AI. See "App shell" below.
-<AppShell name="Dispatch" nav={nav}>{children}</AppShell>
+// The whole frame — the rail, the access gate, Ask AI. See "App shell" below.
+<AppShell name="Dispatch" nav={nav} secondaryNav={settingsNav}>{children}</AppShell>
 
 // Or the pieces, if you already have a layout. The pair swaps automatically
 // on sign-in state.
-<ConnectAppsGrid />
+<ConnectAppsGrid variant="icon" />
 <ConnectLoginButton />
-<ConnectUserMenu />
+<ConnectUserButton variant="inline" />
 
 // Pricing page
 <ConnectPlans />
@@ -536,10 +536,13 @@ import {
 
 | Component | What it does |
 | --- | --- |
-| `AppShell` | **The whole application frame** — collapsible sidebar, top bar with the launcher and account menu, and your pages in the middle. Mounts `ConnectAccessGate` for you. |
-| `ConnectSideNav` | The sidebar's nav column on its own — sections, one level of children, active-route highlight — for an app that already has its own chrome. |
+| `AppShell` | **The whole application frame** — one collapsible rail carrying the brand, workspace switcher, both navs, the launcher and the account row, with your pages beside it. No top bar. Mounts `ConnectAccessGate` for you. The one `/client` export without the `Connect` prefix; alias it on import if your own layout shares the name. |
+| `ConnectSidebar` · `ConnectSidebarHeader` · `ConnectSidebarBody` · `ConnectSidebarFooter` · `ConnectSidebarRow` | The rail in pieces, for chrome the props cannot express. `AppShell` composes exactly these; they coordinate through `ConnectShellProvider`. |
+| `ConnectSidebarNav` | The rail's nav column on its own — sections, one level of children, active-route highlight — for an app that already has its own chrome. (Was `ConnectSideNav`.) |
 | `ConnectLoginButton` · `ConnectRegisterButton` | "Continue with Connect", in the shape people know from Google. Render nothing when signed in. |
-| `ConnectUserMenu` | Avatar, name, workspace. Profile, Manage subscription and Open Connect each open Connect in a new tab; Sign out acts in place. Renders nothing when signed out. |
+| `ConnectUserButton` | The account row at the foot of the rail — circular avatar, name over email — opening a modal with identity, sessions and the Connect destinations. Profile, Manage subscription and Open Connect each open Connect in a new tab; Sign out acts in place. Renders nothing when signed out. (Was `ConnectUserMenu`.) |
+| `ConnectProfileModal` | The same modal with no trigger, driven by `isOpen`/`onOpenChange` — for an app keeping its own account control. |
+| `ConnectWorkspaceSwitcher` | Sits in the rail's header. Hides itself for an account with one workspace; shows unusable ones disabled, with the reason. |
 | `ConnectAppsGrid` | Google-style launcher — grid icon opening a modal of every app this workspace can open. |
 | `ConnectPlans` | Monthly/annual toggle, features, add-ons, live discount, coupon field, and the subscribe / upgrade / downgrade / cancel flow. |
 | `ConnectPlansPage` | A whole `/plans` page — readiness banner, current subscription, and the grid. What `connect-sdk init` scaffolds. |
@@ -706,21 +709,20 @@ export function Shell({ children }: { children: React.ReactNode }) {
       nav={[
         { label: "Overview", href: "/", icon: <LayoutDashboard className="size-5" /> },
         { label: "Shipments", href: "/shipments", icon: <Truck className="size-5" /> },
+      ]}
+      // Pinned to the foot of the rail: the routes you go to in order to
+      // change how the job works, not to do it.
+      secondaryNav={[
         {
-          title: "Workspace",
+          label: "Settings",
+          href: "/settings",
+          icon: <Settings className="size-5" />,
           items: [
-            {
-              label: "Settings",
-              href: "/settings",
-              icon: <Settings className="size-5" />,
-              items: [
-                { label: "Members", href: "/settings/members" },
-                { label: "Billing", href: "/settings/billing" },
-              ],
-            },
-            { label: "Plans", href: "/plans", icon: <Receipt className="size-5" />, gateExempt: true },
+            { label: "Members", href: "/settings/members" },
+            { label: "Billing", href: "/settings/billing" },
           ],
         },
+        { label: "Plans", href: "/plans", icon: <Receipt className="size-5" />, gateExempt: true },
       ]}
     >
       {children}
@@ -729,10 +731,16 @@ export function Shell({ children }: { children: React.ReactNode }) {
 }
 ```
 
-That is the entire layout of a application platform. Everything that should look
-identical across the family — the lockup, the rail geometry, the active-route
-treatment, the app launcher, the account menu, the mobile drawer — comes from
-here; only `name`, `icon` and `nav` differ per platform.
+That is the entire layout of an application platform. Everything that should
+look identical across the family — the lockup, the rail geometry, the
+active-route treatment, the app launcher, the account row, the mobile drawer —
+comes from here; only `name`, `icon` and the two navs differ per platform.
+
+**There is no top bar.** The launcher and the account row live at the foot of
+the rail, one press from wherever the pointer already is, and a page's own
+heading belongs to the page — put it in `ConnectPageShell` from
+`@cosmoops/connect-sdk/ui`. Below `md` a slim bar carries the drawer trigger
+and nothing else.
 
 **Routing is a prop.** The SDK ships into any React app and cannot import
 `next/link`, so `renderLink` is how your router gets involved; the default is a
@@ -747,7 +755,7 @@ around `children` — an app that ships a shell and forgets the gate is an app
 that lets a suspended workspace keep working. The chrome is never gated: the
 sidebar, the lockup, the account menu and sign-out stay reachable in every
 blocked state. Routes that resolve a block rather than needing one — your
-pricing page — are flagged where they are declared:
+pricing page — are flagged where they are declared, in either nav:
 
 ```tsx
 { label: "Plans", href: "/plans", gateExempt: true }
@@ -771,26 +779,38 @@ Connect, and `ai:chat` on the API key behind your bridge.
 
 Other things worth knowing:
 
-- **The rail collapses to icons** and remembers the choice per browser
-  (`localStorage`). Drive it yourself with `collapsed` + `onCollapsedChange`,
-  or pin it open with `collapsible={false}`.
-- **Below `md` there is no rail**, only a drawer behind the top bar's menu
+- **The rail starts collapsed** and remembers the choice per browser
+  (`localStorage`). The icon rail is the resting state; expanding is the
+  deliberate act. Expanded, the collapse control sits at the header's trailing
+  edge; collapsed, hovering the lockup swaps it for the expand glyph — so the
+  rail spends no row on a permanent control, at the cost of the lockup no
+  longer being a link home while collapsed. Pass `defaultCollapsed={false}` to
+  open by default, drive it with `collapsed` + `onCollapsedChange`, or pin it
+  open with `collapsible={false}`.
+- **The collapse animates width and nothing else.** Every row is laid out so
+  its glyph sits on the same horizontal centre in both states, and labels are
+  clipped rather than re-measured — so no row reflows and nothing drifts
+  sideways mid-transition.
+- **Below `md` there is no rail**, only a drawer behind the mobile bar's menu
   button — a 64px icon strip on a phone is a worse drawer, not a smaller one.
 - **Children unfold only on the branch you are on.** A sidebar that opens
   every branch at once is a sitemap.
 - **No `isSignedIn` branch, in here or in yours.** The auth buttons render
-  nothing once a session exists, the account menu renders nothing without one,
+  nothing once a session exists, the account row renders nothing without one,
   and the launcher renders nothing when signed out.
-- `title`, `headerActions`, `sidebarFooter` and `footer` are slots;
-  `contentClassName` replaces the content pane's default max-width and
-  padding.
-- `theme` / `onThemeChange` pass straight through to `ConnectUserMenu` — the
+- `secondaryNav`, `sidebarFooter` and `footer` are slots; `contentClassName`
+  replaces the content pane's default max-width and padding. (`title` and
+  `headerActions` are gone with the top bar — see the 0.12.0 changelog entry.)
+- `theme` / `onThemeChange` pass straight through to `ConnectUserButton` — the
   SDK has no theme provider of its own, deliberately.
 
-`ConnectSideNav` is the nav column alone, for an app with chrome it already
-likes. `resolveActivePath` and `isNavItemActive` are the same pure functions
-the rail highlights with, exported so a breadcrumb or a document title derived
-from your nav cannot disagree with it.
+`ConnectSidebarNav` is the nav column alone, for an app with chrome it already
+likes, and `ConnectSidebar` / `ConnectSidebarHeader` / `ConnectSidebarBody` /
+`ConnectSidebarFooter` / `ConnectSidebarRow` are the rest of the rail — the
+exact pieces `AppShell` composes, so chrome the props cannot express is a
+rearrangement rather than a fork. `resolveActivePath` and `isNavItemActive` are
+the same pure functions the rail highlights with, exported so a breadcrumb or a
+document title derived from your nav cannot disagree with it.
 
 ### Logo
 
@@ -825,6 +845,56 @@ So the hand-off is a URL, and Connect renders it as a modal over the relevant pa
 
 Full history: [CHANGELOG.md](./CHANGELOG.md). Latest first:
 
+### 0.12.0 — breaking
+
+The application shell is one column. **The top bar is gone**; the rail holds
+everything it used to, and starts collapsed.
+
+- **`title` and `headerActions` are removed** with the bar that held them. A
+  page's heading goes in `ConnectPageShell` (from `/ui`), next to that page's
+  own breadcrumbs and actions; an application-level control goes in
+  `sidebarFooter` as a `ConnectSidebarRow`.
+- **`defaultCollapsed` now defaults to `true`.** Pass `false` for 0.11's
+  behaviour.
+- **`ConnectSideNav` → `ConnectSidebarNav`**, **`ConnectUserMenu` →
+  `ConnectUserButton`**. Both old names remain as deprecated aliases.
+  `AppShell` keeps its name — the one export here without the `Connect`
+  prefix, as decided in 0.8.0.
+- **New:** `secondaryNav` (a second nav group pinned to the foot of the rail),
+  `ConnectProfileModal` (the account modal with no trigger), and the rail's
+  own pieces — `ConnectSidebar`, `ConnectSidebarHeader`, `ConnectSidebarBody`,
+  `ConnectSidebarFooter`, `ConnectSidebarRow`, `ConnectShellProvider`,
+  `useConnectShell`, `sidebarRowClass`.
+- **The workspace switcher moved into the rail's header** and is collapse-aware;
+  the account row sits at the foot with a circular avatar.
+- **Fixed:** the closed Ask AI panel occupied 400px at `lg` and up on every page
+  with `askAi` on; sidebar contrast (the active row was **below WCAG AA** in
+  both schemes); the launcher and account rows looked permanently selected.
+
+### 0.11.0 — breaking
+
+- **`ConnectUser.workspaceId`, `workspaceName` and `workspaceType` are
+  nullable.** They are `null` for exactly one thing: a **Connect platform
+  staff** session, which belongs to no workspace. If you never enable staff
+  access — it is off by default — this is a type narrow and nothing else.
+  `?? ""` is the wrong fix: decide what your tenanting does with a session that
+  has no tenant.
+- **Connect platform staff sign-in**, `platformAccess` on `exchangeCode()` and
+  `getUser()`, `<ConnectPlatformGate>` and `useConnectPlatformAccess()`.
+
+### 0.10.0
+
+- **`@cosmoops/connect-sdk/ui`** — `ConnectPageShell`, `ConnectSection`,
+  `ConnectEmptyState`, `ConnectStatusChip`, `ConnectSettingRow`. Deliberately
+  *not* a `"use client"` module, so a page shell does not become a client
+  boundary.
+- `ConnectLinkButton`, `ConnectConfirmDialog`, `ConnectCursorPagination`,
+  `ConnectFilterTabs`, `ConnectAccountSessions` — built since 0.8 and reachable
+  from no entry point until now.
+- `ConnectWorkspaceSwitcher`, `useConnectWorkspaces()`,
+  `useConnectWorkspaceMembers()`, and the `workspaces` resource on the server
+  client.
+
 ### 0.9.0
 
 - **Ask AI**, mounted by `AppShell` by default — a chat panel grounded in the

package/dist/cjs/cli/doctor.js

@@ -162,8 +162,8 @@ function checkEnv(root) {
             status: "fail",
             title: `${name} set`,
             detail: declaredEmpty
-                ? `Declared but empty in .env.local. The value is in your application's Integration tab in Connect.`
-                : `Not found in .env.local or the environment. Both values are in your application's Integration tab in Connect.`,
+                ? `Declared but empty in .env.local. The value is in your application's Connect client section in Connect.`
+                : `Not found in .env.local or the environment. Both values are in your application's Connect client section in Connect.`,
         };
     });
 }
@@ -176,7 +176,7 @@ function checkRedirectUri() {
     return {
         status: "warn",
         title: "Redirect URI registered in Connect",
-        detail: "Not checkable from here. Confirm {your origin}/api/connect/callback is listed as a redirect URI in your application's Integration tab - including the deployed origin, not just http://localhost:3000.",
+        detail: "Not checkable from here. Confirm {your origin}/api/connect/callback is listed as a redirect URI in your application's Connect client section - including the deployed origin, not just http://localhost:3000.",
     };
 }
 const MARKER = { pass: "  ok  ", warn: " note ", fail: " FAIL " };

package/dist/cjs/cli/init.js

@@ -44,7 +44,7 @@ const PLANS_PAGE = `"use client";
 // with the other exports) whenever you want your own copy or layout.
 export { ConnectPlansPage as default } from "@cosmoops/connect-sdk/client";
 `;
-const ENV_TEMPLATE = `# CosmoOps Connect - values come from your application's Integration tab.
+const ENV_TEMPLATE = `# CosmoOps Connect - values come from your application's Connect client section.
 CONNECT_API_KEY=
 CONNECT_CLIENT_ID=
 `;
@@ -111,7 +111,7 @@ function runInit(argv = []) {
         console.log(`  ${marker}  ${(0, node_path_1.relative)(root, target)}  - ${scaffold.description}`);
     }
     const env = ensureEnv(root);
-    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the two values from your application's Integration tab`);
+    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the two values from your application's Connect client section`);
     // The two steps a scaffolder must not do for you: editing an existing layout
     // means parsing and rewriting JSX someone else wrote, and the redirect URI
     // lives in Connect, not in this repo.
@@ -137,7 +137,7 @@ Three things left, all one-time:
      Tailwind roots its content scan inside node_modules and skips your app.
 
   3. Register {your origin}/api/connect/callback as a redirect URI in your
-     application's Integration tab in Connect.
+     application's Connect client section in Connect.
 
 No next.config.ts changes needed - not even transpilePackages: dist/ is
 already ES2022 with "use client" hoisted, so Turbopack and webpack consume it

package/dist/cjs/client/components/access-gate.js

@@ -40,12 +40,31 @@ function formatDate(iso) {
 function useConnectAccessGate() {
     const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
     const { data, isLoading: entitlementsLoading } = (0, provider_js_1.useConnectEntitlements)();
-    if (sessionLoading || (session?.user && entitlementsLoading)) {
+    if (sessionLoading) {
         return { state: "loading", blocker: null, paymentRetry: null };
     }
     if (!session?.user) {
         return { state: "signed_out", blocker: null, paymentRetry: null };
     }
+    // Connect platform staff pass straight through, and this check has to come
+    // *before* the entitlements read below or the gate would hard-block them.
+    //
+    // Every state this gate can report is a fact about a workspace - suspended,
+    // no plan, wrong audience, awaiting approval, payment due. A staff session
+    // has no workspace at all (see `SessionAccess.staff`), so it has no subscription
+    // either, and `subscription_missing` would send an operator to your plan
+    // picker to buy a plan for a workspace that does not exist. "Nothing is
+    // blocking this session" is the truthful answer, not a lenient one.
+    //
+    // The entitlements request is still issued - hooks cannot be called
+    // conditionally - and the bridge answers it `403 no_workspace`. That costs
+    // one failed request per staff page load, and its result is ignored here.
+    if (session.staff) {
+        return { state: "clear", blocker: null, paymentRetry: null };
+    }
+    if (entitlementsLoading) {
+        return { state: "loading", blocker: null, paymentRetry: null };
+    }
     if (!data) {
         // Signed in, not loading, yet nothing came back - a failed read (see
         // `error` on `useConnectEntitlements`). Fail open rather than hard-block

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

@@ -9,7 +9,26 @@ const lucide_react_1 = require("lucide-react");
 const streamdown_1 = require("streamdown");
 const provider_js_1 = require("../provider.js");
 const ai_widgets_js_1 = require("./ai-widgets.js");
+/**
+ * The panel's open width. The *inner* pane always carries it, so the content
+ * keeps its layout while the outer shell's width animates to zero around it.
+ */
 const PANEL_WIDTH = "w-full lg:w-[400px]";
+/**
+ * The outer shell's width, which is the thing that animates.
+ *
+ * Two mutually exclusive branches rather than `PANEL_WIDTH` plus an
+ * `lg:w-0` override, because that override never applied: `lg:w-[400px]` and
+ * `lg:w-0` are the same utility at the same breakpoint, so the winner is
+ * whichever Tailwind emits later - and it emits arbitrary values after scale
+ * values. The closed panel therefore measured a full 400px at `lg` and up and
+ * sat there permanently, eating that much of the content pane on every page
+ * with `askAi` on. Only the `translate-x` hid it below `lg`, which is why this
+ * looked correct on a phone and wrong on a laptop.
+ */
+function panelShellWidth(isOpen) {
+    return isOpen ? PANEL_WIDTH : "w-full lg:w-0 lg:overflow-hidden lg:border-s-0";
+}
 /**
  * `blurIn` over the default `fadeIn`: Gemini arrives in bursts rather than an
  * even token drip, and a blur masks a batch landing at once where a plain
@@ -328,7 +347,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.jsx)("p", { className: "text-sm text-muted", children: hint }), rendered, isBusy && lastTurn?.role === "user" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-md border border-border bg-accent/5 p-2.5 text-sm", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: assistantName }), (0, jsx_runtime_1.jsx)(ThinkingShimmer, {})] })), error && (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-danger", children: error }), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex gap-2 border-t border-border p-3", children: [(0, jsx_runtime_1.jsxs)(react_2.TextField, { variant: "secondary", className: "flex-1", children: [(0, jsx_runtime_1.jsx)(react_2.Label, { className: "sr-only", children: placeholder }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: placeholder, value: input, onChange: (event) => setInput(event.currentTarget.value), disabled: isBusy })] }), isBusy ? ((0, jsx_runtime_1.jsx)(react_2.Button, { type: "button", isIconOnly: true, variant: "secondary", "aria-label": "Stop generating", onPress: stop, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Square, { className: "size-3.5" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", isIconOnly: true, variant: "primary", "aria-label": "Send", isDisabled: !input.trim(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "size-3.5" }) }))] })] }) })] }));
 }
 /** Hoisted for the same reference-equality reason as `ANIMATED` - Streamdown compares it by identity. */
 const LINK_SAFETY = { enabled: false };