@vvedantb/ui 0.4.4 → 0.5.0

package/README.md

@@ -4,7 +4,7 @@ Shared React 19 web UI. Source-exported: no build step.
 
 | Import | What it is |
 | --- | --- |
-| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
 | `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `animations`, `compat-shadcn-rgb`. CSS. |
@@ -248,6 +248,56 @@ import {
 - `SelectField`: a labelled single select built from `Select`. Children are `SelectItem`s. An empty `value` shows the placeholder. `id` goes to the trigger and the label points at it. `className` merges onto the trigger.
 - Motion: `springTransition`, `springFastTransition` and `fadeUpSpring` presets. `FadePresence` takes optional `variants` (`hidden`, `show`, `exit`); omitted, it keeps its opacity fade. `PanelTransition` wraps children in React `ViewTransition` with `default="none"` and `enter`/`exit` classes (`vt-panel-in`, `vt-panel-out` by default). It needs a React build that exports `ViewTransition`, and the app supplies the `::view-transition-*` CSS.
 
+## App shell (0.5.0)
+
+A sidebar and main page layout, extracted from existing app markup. It is router-free: pass your own links (with `asChild`), state and media query result. Tooltips need a `TooltipProvider` above the shell.
+
+```tsx
+import {
+  AppShell, AppSidebar, SidebarRail, RailTile, RailDivider, SidebarPanel,
+  SidebarAccountMenu, DropdownMenuItem, railBadgeClass,
+} from "@vvedantb/ui";
+
+<AppShell
+  panelHidden={collapsed || !hasPanel}
+  sidebar={
+    <AppSidebar
+      isDesktop={isDesktop}
+      collapsed={collapsed}
+      panelHidden={!hasPanel}
+      mobileOpen={open}
+      onMobileOpenChange={setOpen}
+      mobileTitle={pageTitle}
+      rail={
+        <SidebarRail
+          showDivider={hasPanel && !(isDesktop && collapsed)}
+          top={<RailTile asChild label="Home" active={isHome}><Link to="/"><IconHome size={22} /></Link></RailTile>}
+          bodyClassName="scrollbar-thin"
+          footerClassName="border-t border-separator"
+          footer={<SidebarAccountMenu name={name} email={email} imageUrl={avatarUrl}><DropdownMenuItem>Settings</DropdownMenuItem></SidebarAccountMenu>}
+        >
+          <RailDivider />
+        </SidebarRail>
+      }
+      panel={<SidebarPanel title="Library" collapsed={collapsed} onClose={isDesktop ? undefined : () => setOpen(false)}>{nav}</SidebarPanel>}
+    />
+  }
+>
+  {page}
+</AppShell>
+```
+
+- Widths: `AppShell` sets `--app-shell-rail-width` (default `4rem`), `--app-shell-sidebar-width` (rail plus panel, default `20rem`) and `--app-shell-mobile-header-height` (default `calc(3.5rem + env(safe-area-inset-top, 0px))`) as inline style. Change them with `railWidth`, `sidebarWidth` and `mobileHeaderHeight`. The other pieces read these variables. Outside `AppShell`, set the variables yourself or pass a width class with `className`.
+- `AppShell`: `sidebar`, `children`, `panelHidden` (main offsets by the rail width instead of the sidebar width), `skipLinkLabel` (`"Skip to main content"`), `mainId` (`"main-content"`), `className`, `mainClassName`, `contentClassName`.
+- `AppSidebar`: `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app.
+- `SidebarRail`: `top`, `children` (scroll body), `footer`, `showDivider`, `bodyAsChild` (the single child, for example a tabs list, becomes the body), `className`, `topClassName`, `bodyClassName`, `footerClassName`. Other HTML attributes (`id`, `data-*`, `aria-*`) go to the root `<div>`. The top and footer wrappers render only when their slot is set.
+- `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `className`. Without `asChild` it is a ghost `Button`; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
+- `RailDivider`, `SidebarIconTooltip` (`label`, `enabled`, `side` `"right"`, `sideOffset` 8).
+- `SidebarPanel`: `title`, `headerTrailing`, `onClose` (adds the close button; pass it on the mobile drawer only), `closeLabel`, `closeButtonClassName`, `collapsed` (`md:hidden`), `className`, `children`.
+- `SidebarAccountMenu`: `name`, `email` (two-line label when set), `stackedLabel` (two-line layout even without `email`, default `false`), `imageUrl` (initials without it), `align` (`"center"`), `side` (`"right"`), `sideOffset` (8), `collisionPadding`, `contentClassName`, `children` (menu items). `SidebarAccountMenuPlaceholder` is the tile-sized loading box.
+- `SignOutDialog`: `open`, `onOpenChange` (not called with `false` while `pending`), `pending`, `onConfirm`, `description`, `contentClassName`, `title` (`"Sign out"`), `question` (`"Sign out of your account?"`).
+- Class helpers: `railTileClass`, `railTileStateClass(active)`, `railBadgeClass`, `sidebarNavRowClass(isIconOnly)`, `sidebarNavLinkTextClass(isActive)`, `sidebarSectionLabelClass`.
+
 ## Toaster
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -40,7 +40,7 @@
   "types": "./src/index.ts",
   "files": [
     "src",
-    "shell/src",
+    "shell/src/**/*.{ts,tsx}",
     "app/src",
     "tokens/src",
     "tokens/examples",

package/shell/src/AppShell.tsx

@@ -0,0 +1,83 @@
+import type { CSSProperties, ReactNode } from "react";
+import { cn } from "../../src/utils/cn";
+
+export type AppShellProps = {
+  /** Rendered between the skip link and `<main>`, usually an `AppSidebar`. */
+  sidebar?: ReactNode;
+  children?: ReactNode;
+  /**
+   * `true` when only the rail shows on desktop (sidebar collapsed, or the
+   * current section has no panel). Main then offsets by the rail width
+   * instead of the sidebar width.
+   */
+  panelHidden?: boolean;
+  /** Sets `--app-shell-rail-width`. Default `"4rem"`. */
+  railWidth?: string;
+  /** Sets `--app-shell-sidebar-width` (rail plus panel). Default `"20rem"`. */
+  sidebarWidth?: string;
+  /** Sets `--app-shell-mobile-header-height`. Default `"calc(3.5rem + env(safe-area-inset-top, 0px))"`. */
+  mobileHeaderHeight?: string;
+  /** Default `"Skip to main content"`. */
+  skipLinkLabel?: string;
+  /** `id` of `<main>` and the skip link target. Default `"main-content"`. */
+  mainId?: string;
+  className?: string;
+  mainClassName?: string;
+  /** Merged onto the content card inside `<main>`. */
+  contentClassName?: string;
+};
+
+type ShellVars = CSSProperties & Record<`--app-shell-${string}`, string>;
+
+/** Full-height app frame: skip link, a sidebar slot and the main content card. */
+export function AppShell({
+  sidebar,
+  children,
+  panelHidden = false,
+  railWidth = "4rem",
+  sidebarWidth = "20rem",
+  mobileHeaderHeight = "calc(3.5rem + env(safe-area-inset-top, 0px))",
+  skipLinkLabel = "Skip to main content",
+  mainId = "main-content",
+  className,
+  mainClassName,
+  contentClassName,
+}: AppShellProps) {
+  const style: ShellVars = {
+    "--app-shell-rail-width": railWidth,
+    "--app-shell-sidebar-width": sidebarWidth,
+    "--app-shell-mobile-header-height": mobileHeaderHeight,
+  };
+  return (
+    <div className={cn("relative h-dvh overflow-hidden bg-background", className)} style={style}>
+      <a
+        href={`#${mainId}`}
+        className="sr-only focus:absolute focus:left-3 focus:top-[max(0.75rem,env(safe-area-inset-top))] focus:z-[100] focus:block focus:rounded-lg focus:bg-surface-secondary focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+      >
+        {skipLinkLabel}
+      </a>
+      {sidebar}
+      <main
+        id={mainId}
+        tabIndex={-1}
+        className={cn(
+          "relative z-10 flex h-full min-h-0 outline-none md:p-2",
+          panelHidden
+            ? "md:ml-[var(--app-shell-rail-width)]"
+            : "md:ml-[var(--app-shell-sidebar-width)]",
+          "md:transition-[margin-left] md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+          mainClassName,
+        )}
+      >
+        <div
+          className={cn(
+            "flex min-h-0 flex-1 flex-col overflow-hidden bg-surface pt-[var(--app-shell-mobile-header-height)] md:rounded-lg md:pt-0",
+            contentClassName,
+          )}
+        >
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

package/shell/src/AppSidebar.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useId, type KeyboardEvent, type ReactNode } from "react";
+import { AnimatePresence, motion, type PanInfo } from "motion/react";
+import { IconMenu2 } from "@tabler/icons-react";
+import { Button } from "../../src/ui/button";
+import { motionEase, motionTiming } from "../../src/motion/presets";
+import { cn } from "../../src/utils/cn";
+import { mobileMenuButtonClass } from "./app-shell-classes";
+
+export type AppSidebarProps = {
+  /** Icon rail, usually a `SidebarRail`. */
+  rail: ReactNode;
+  /** Panel beside the rail, usually a `SidebarPanel`. Not rendered while `panelHidden`. */
+  panel?: ReactNode;
+  /** Desktop: show only the rail. The panel stays mounted (hide it with `SidebarPanel collapsed`). */
+  collapsed?: boolean;
+  /** The current section has no panel: the sidebar is rail-wide on every viewport. */
+  panelHidden?: boolean;
+  /** From the app's desktop media query (for example `(min-width: 768px)`). */
+  isDesktop: boolean;
+  /** Mobile drawer state. Owned by the app (which also closes it on route change). */
+  mobileOpen: boolean;
+  onMobileOpenChange: (open: boolean) => void;
+  /** `id` of the drawer, used by the menu button `aria-controls`. Default from `useId`. */
+  id?: string;
+  /** Extra `data-*` attributes for the `<aside>`, for example a view-transition target. */
+  asideProps?: Record<`data-${string}`, string | undefined>;
+  /** Merged onto the `<aside>`. */
+  className?: string;
+  /** Centred in the mobile header when truthy. */
+  mobileTitle?: ReactNode;
+  /** Menu button icon. Default a 20px menu icon. */
+  mobileMenuIcon?: (open: boolean) => ReactNode;
+  /** Default `"Open navigation menu"`. */
+  mobileMenuLabel?: string;
+  /** Backdrop label. Default `"Close navigation"`. */
+  closeLabel?: string;
+};
+
+const defaultMobileMenuIcon = () => <IconMenu2 size={20} />;
+
+/**
+ * Sidebar chrome: the mobile header, the drawer backdrop and the `<aside>`
+ * (fixed on desktop, a swipe-to-close drawer below it). Reads the
+ * `--app-shell-*` width variables set by `AppShell`.
+ */
+export function AppSidebar({
+  rail,
+  panel,
+  collapsed = false,
+  panelHidden = false,
+  isDesktop,
+  mobileOpen,
+  onMobileOpenChange,
+  id,
+  asideProps,
+  className,
+  mobileTitle,
+  mobileMenuIcon = defaultMobileMenuIcon,
+  mobileMenuLabel = "Open navigation menu",
+  closeLabel = "Close navigation",
+}: AppSidebarProps) {
+  const autoId = useId();
+  const drawerId = id ?? autoId;
+  const layout = isDesktop ? "desktop" : "drawer";
+
+  // Reaching the desktop breakpoint closes the drawer, so it does not reopen
+  // on the way back down. Runs on breakpoint change only.
+  useEffect(() => {
+    if (isDesktop && mobileOpen) onMobileOpenChange(false);
+  }, [isDesktop]);
+
+  const close = () => onMobileOpenChange(false);
+
+  const handleDrawerDragEnd = (
+    _event: MouseEvent | TouchEvent | PointerEvent,
+    info: PanInfo,
+  ) => {
+    if (isDesktop || !mobileOpen) return;
+    if (info.offset.x < -72 || info.velocity.x < -500) {
+      close();
+    }
+  };
+
+  const closeOnEscape = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && !isDesktop && mobileOpen) {
+      close();
+    }
+  };
+
+  return (
+    <>
+      <header
+        onKeyDown={closeOnEscape}
+        className="fixed inset-x-0 top-0 z-30 flex h-[var(--app-shell-mobile-header-height)] items-center gap-2 bg-background/80 px-3 pt-[env(safe-area-inset-top,0px)] pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] backdrop-blur-md md:hidden"
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => onMobileOpenChange(true)}
+          aria-label={mobileMenuLabel}
+          aria-expanded={mobileOpen}
+          aria-controls={drawerId}
+          className={mobileMenuButtonClass}
+        >
+          {mobileMenuIcon(mobileOpen)}
+        </Button>
+        {mobileTitle ? (
+          <h1 className="pointer-events-none absolute inset-x-14 top-[env(safe-area-inset-top,0px)] bottom-0 flex items-center justify-center truncate text-center text-base font-semibold leading-none tracking-tight text-foreground text-balance">
+            {mobileTitle}
+          </h1>
+        ) : null}
+        <div className="ml-auto h-11 w-11 shrink-0" aria-hidden="true" />
+      </header>
+
+      <AnimatePresence initial={false}>
+        {mobileOpen && !isDesktop ? (
+          <motion.button
+            type="button"
+            aria-label={closeLabel}
+            className="fixed inset-0 z-40 bg-backdrop/80 md:hidden"
+            onClick={close}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: motionTiming.sidebar, ease: motionEase }}
+          />
+        ) : null}
+      </AnimatePresence>
+
+      <motion.aside
+        id={drawerId}
+        data-sidebar-layout={layout}
+        {...asideProps}
+        inert={!isDesktop && !mobileOpen}
+        onKeyDown={closeOnEscape}
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex bg-background pb-[env(safe-area-inset-bottom,0px)] pt-[env(safe-area-inset-top,0px)] md:py-0",
+          panelHidden
+            ? "w-[var(--app-shell-rail-width)]"
+            : "w-[min(var(--app-shell-sidebar-width),calc(100vw-1.5rem))]",
+          collapsed || panelHidden
+            ? "md:w-[var(--app-shell-rail-width)]"
+            : "md:w-[var(--app-shell-sidebar-width)]",
+          "md:transition-[width] md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+          className,
+        )}
+        initial={false}
+        animate={{ x: isDesktop || mobileOpen ? 0 : "-100%" }}
+        transition={{ duration: motionTiming.sidebar, ease: motionEase }}
+        drag={!isDesktop && mobileOpen ? "x" : false}
+        dragDirectionLock
+        dragConstraints={{ left: 0, right: 0 }}
+        dragElastic={{ left: 0.45, right: 0.08 }}
+        onDragEnd={handleDrawerDragEnd}
+      >
+        {rail}
+        {panelHidden ? null : panel}
+      </motion.aside>
+    </>
+  );
+}

package/shell/src/SidebarAccountMenu.tsx

@@ -0,0 +1,121 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Button } from "../../src/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../src/ui/dropdown-menu";
+import { cn } from "../../src/utils/cn";
+import { accountEmailClass, railTileClass, railTileStateClass } from "./app-shell-classes";
+
+type ContentProps = ComponentPropsWithoutRef<typeof DropdownMenuContent>;
+
+export type SidebarAccountMenuProps = {
+  /** Trigger `title`, `aria-label` and the menu label. */
+  name: string;
+  /** When set, the label shows the name and email on two lines. */
+  email?: string;
+  /** Always use the two-line label layout, even without `email`. Default `false`. */
+  stackedLabel?: boolean;
+  /** Avatar image. Without it the avatar shows up to two initials of `name`. */
+  imageUrl?: string;
+  /** Default `"center"`. */
+  align?: ContentProps["align"];
+  /** Default `"right"`. */
+  side?: ContentProps["side"];
+  /** Default `8`. */
+  sideOffset?: number;
+  collisionPadding?: ContentProps["collisionPadding"];
+  /** Merged onto the menu content after `w-56`. */
+  contentClassName?: string;
+  /** Menu items after the label and separator. */
+  children?: ReactNode;
+};
+
+function AccountAvatar({ src, name, className }: { src?: string; name: string; className: string }) {
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt=""
+        className={cn(className, "rounded-full object-cover outline outline-1 -outline-offset-1 outline-separator")}
+      />
+    );
+  }
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+  return (
+    <span
+      className={cn(
+        "flex items-center justify-center rounded-full bg-surface-tertiary text-[10px] font-medium text-foreground outline outline-1 -outline-offset-1 outline-separator",
+        className,
+      )}
+    >
+      {initials || "?"}
+    </span>
+  );
+}
+
+/** Account menu on a rail tile: avatar trigger, identity label, then the app's items. */
+export function SidebarAccountMenu({
+  name,
+  email,
+  stackedLabel = false,
+  imageUrl,
+  align = "center",
+  side = "right",
+  sideOffset = 8,
+  collisionPadding,
+  contentClassName,
+  children,
+}: SidebarAccountMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          title={name}
+          aria-label={`Account menu for ${name}`}
+          className={cn(railTileClass, "h-11 w-11 p-0", railTileStateClass(false))}
+        >
+          <AccountAvatar src={imageUrl} name={name} className="h-7 w-7" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
+        className={cn("w-56", contentClassName)}
+      >
+        <DropdownMenuLabel className="flex items-center gap-2 font-normal normal-case tracking-normal">
+          <AccountAvatar src={imageUrl} name={name} className="h-6 w-6 shrink-0" />
+          {stackedLabel || email ? (
+            <span className="min-w-0">
+              <span className="block truncate text-sm font-medium text-foreground">{name}</span>
+              {email ? <span className={accountEmailClass}>{email}</span> : null}
+            </span>
+          ) : (
+            <span className="truncate text-sm font-medium text-foreground">{name}</span>
+          )}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export type SidebarAccountMenuPlaceholderProps = { className?: string };
+
+/** Tile-sized placeholder while the account loads. */
+export function SidebarAccountMenuPlaceholder({ className }: SidebarAccountMenuPlaceholderProps) {
+  return <div className={cn("size-11 rounded-lg bg-surface-tertiary", className)} />;
+}

package/shell/src/SidebarIconTooltip.tsx

@@ -0,0 +1,34 @@
+import type { ReactElement } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../src/ui/tooltip";
+
+export type SidebarIconTooltipProps = {
+  label: string;
+  enabled: boolean;
+  children: ReactElement;
+  /** Default `"right"`. */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Default `8`. */
+  sideOffset?: number;
+};
+
+// radix tooltip for icon-only sidebar rail — skipped when labels are visible
+export function SidebarIconTooltip({
+  label,
+  enabled,
+  children,
+  side = "right",
+  sideOffset = 8,
+}: SidebarIconTooltipProps) {
+  if (!enabled) {
+    return children;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side} sideOffset={sideOffset}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/shell/src/SidebarPanel.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { IconX } from "@tabler/icons-react";
+import { Button } from "../../src/ui/button";
+import { cn } from "../../src/utils/cn";
+import { panelCloseButtonClass } from "./app-shell-classes";
+import { SidebarHeader } from "./SidebarHeader";
+
+export type SidebarPanelProps = {
+  title: string;
+  /** Rendered in the header, before the close button. */
+  headerTrailing?: ReactNode;
+  /** When set, a close button follows `headerTrailing`. Pass it on the mobile drawer only. */
+  onClose?: () => void;
+  /** Close button label. Default `"Close navigation"`. */
+  closeLabel?: string;
+  /** Merged onto the close button. */
+  closeButtonClassName?: string;
+  /** Desktop: hides the panel (`md:hidden`) and leaves the rail. */
+  collapsed?: boolean;
+  className?: string;
+  /** Panel body: nav, footer and so on. */
+  children?: ReactNode;
+};
+
+/** Sidebar panel column beside the rail: a `SidebarHeader` and the app's body. */
+export function SidebarPanel({
+  title,
+  headerTrailing,
+  onClose,
+  closeLabel = "Close navigation",
+  closeButtonClassName,
+  collapsed = false,
+  className,
+  children,
+}: SidebarPanelProps) {
+  const trailing =
+    headerTrailing || onClose ? (
+      <>
+        {headerTrailing}
+        {onClose ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            onClick={onClose}
+            aria-label={closeLabel}
+            className={cn(panelCloseButtonClass, closeButtonClassName)}
+          >
+            <IconX className="h-4 w-4" />
+          </Button>
+        ) : null}
+      </>
+    ) : null;
+
+  return (
+    <div
+      className={cn(
+        // No border-r: the main content card floats beside this panel, so a
+        // right edge line reads as a hard divider.
+        "relative flex h-full min-w-0 flex-1 flex-col overflow-hidden bg-background",
+        collapsed && "md:hidden",
+        className,
+      )}
+    >
+      <div className="px-2 pt-3">
+        <SidebarHeader title={title} trailing={trailing} />
+      </div>
+      {children}
+    </div>
+  );
+}

package/shell/src/SidebarRail.tsx

@@ -0,0 +1,130 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { Button } from "../../src/ui/button";
+import { cn } from "../../src/utils/cn";
+import { railTileClass, railTileStateClass } from "./app-shell-classes";
+import { SidebarIconTooltip } from "./SidebarIconTooltip";
+
+export type SidebarRailProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "className"> & {
+  /** Pinned at the top, above the scroll body. */
+  top?: ReactNode;
+  /** Scroll body. */
+  children?: ReactNode;
+  /** Pinned at the bottom. */
+  footer?: ReactNode;
+  /** Adds a right border between the rail and the panel. Default `false`. */
+  showDivider?: boolean;
+  /** Render the body as its single child element (for example a tabs list), with the body classes merged. */
+  bodyAsChild?: boolean;
+  className?: string;
+  topClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+};
+
+/** Icon rail column. Width reads `--app-shell-rail-width`; override with `className`. Other props go to the root `<div>`. */
+export function SidebarRail({
+  top,
+  children,
+  footer,
+  showDivider = false,
+  bodyAsChild = false,
+  className,
+  topClassName,
+  bodyClassName,
+  footerClassName,
+  ...props
+}: SidebarRailProps) {
+  const Body = bodyAsChild ? Slot : "div";
+  return (
+    <div
+      {...props}
+      className={cn(
+        "flex h-full w-[var(--app-shell-rail-width)] shrink-0 flex-col items-center bg-background",
+        showDivider && "border-r border-separator",
+        className,
+      )}
+    >
+      {top == null ? null : (
+        <div className={cn("flex w-full flex-col items-center gap-1.5 px-0 pt-3", topClassName)}>
+          {top}
+        </div>
+      )}
+      <Body
+        className={cn(
+          "flex w-full flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2",
+          bodyClassName,
+        )}
+      >
+        {children}
+      </Body>
+      {footer == null ? null : (
+        <div className={cn("flex w-full flex-col items-center gap-1.5 py-3", footerClassName)}>
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
+  /** `aria-label`, and the tooltip unless `tooltip` is set. */
+  label: string;
+  /** Active state. With `asChild`, also sets `aria-current="page"`. */
+  active?: boolean;
+  /** Tooltip text. Default `label`. */
+  tooltip?: string;
+  /** Default `true`. */
+  showTooltip?: boolean;
+  /** Rendered after the children, inside the tile (for example a count with `railBadgeClass`). */
+  badge?: ReactNode;
+  /** Render the single child element (for example a router link) as the tile. */
+  asChild?: boolean;
+  children: ReactNode;
+};
+
+/** Rail tile with a right-side tooltip. Renders a ghost `Button`, or its child with `asChild`. */
+export function RailTile({
+  label,
+  active = false,
+  tooltip,
+  showTooltip = true,
+  badge,
+  asChild = false,
+  className,
+  children,
+  ...props
+}: RailTileProps) {
+  return (
+    <SidebarIconTooltip label={tooltip ?? label} enabled={showTooltip}>
+      {asChild ? (
+        <Slot
+          {...props}
+          aria-label={label}
+          aria-current={active ? "page" : undefined}
+          className={cn(railTileClass, "group", railTileStateClass(active), className)}
+        >
+          <Slottable>{children}</Slottable>
+          {badge}
+        </Slot>
+      ) : (
+        <Button
+          type="button"
+          variant="ghost"
+          {...props}
+          aria-label={label}
+          className={cn(railTileClass, "group h-11 w-11 p-0", railTileStateClass(active), className)}
+        >
+          {children}
+          {badge}
+        </Button>
+      )}
+    </SidebarIconTooltip>
+  );
+}
+
+export type RailDividerProps = { className?: string };
+
+export function RailDivider({ className }: RailDividerProps) {
+  return <div className={cn("h-px w-8 bg-separator", className)} aria-hidden />;
+}

package/shell/src/SignOutDialog.tsx

@@ -0,0 +1,93 @@
+import { IconAlertTriangle, IconLoader2 } from "@tabler/icons-react";
+import { Button } from "../../src/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../src/ui/dialog";
+import { cn } from "../../src/utils/cn";
+import { signOutCancelClass, signOutDescriptionClass } from "./app-shell-classes";
+
+export type SignOutDialogProps = {
+  open: boolean;
+  /** Not called with `false` while `pending`, so the dialog stays open during sign-out. */
+  onOpenChange: (open: boolean) => void;
+  /** Disables both buttons and shows "Signing out...". */
+  pending: boolean;
+  onConfirm: () => void | Promise<void>;
+  /** Second line under the question. */
+  description?: string;
+  /** Merged onto the dialog content after `sm:max-w-sm`. */
+  contentClassName?: string;
+  /** Dialog title and confirm button label. Default `"Sign out"`. */
+  title?: string;
+  /** Default `"Sign out of your account?"`. */
+  question?: string;
+};
+
+/** Sign-out confirmation. The app owns the state and the sign-out call. */
+export function SignOutDialog({
+  open,
+  onOpenChange,
+  pending,
+  onConfirm,
+  description,
+  contentClassName,
+  title = "Sign out",
+  question = "Sign out of your account?",
+}: SignOutDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && pending) return;
+        onOpenChange(next);
+      }}
+    >
+      <DialogContent className={cn("sm:max-w-sm", contentClassName)}>
+        <DialogHeader>
+          <DialogTitle className="text-foreground">{title}</DialogTitle>
+          <DialogDescription className="sr-only">
+            Confirm signing out of your account
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-start gap-3 py-4">
+          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-danger/10">
+            <IconAlertTriangle size={20} className="text-danger" />
+          </div>
+          <div>
+            <p className="text-foreground">{question}</p>
+            {description ? <p className={signOutDescriptionClass}>{description}</p> : null}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={pending}
+            className={signOutCancelClass}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => void onConfirm()}
+            disabled={pending}
+            className="bg-danger text-danger-foreground"
+          >
+            {pending ? (
+              <>
+                <IconLoader2 size={16} className="animate-spin" />
+                Signing out...
+              </>
+            ) : (
+              title
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/shell/src/app-shell-classes.ts

@@ -0,0 +1,44 @@
+import { cn } from "../../src/utils/cn";
+
+// Class strings for the app shell, copied from existing app markup so an app
+// that moves to these components renders the same classes. The bare muted and
+// accent colour names match that markup and are allow-listed for check:tokens
+// on the marked lines only.
+
+/** Rail tile: size-11, rounded-lg, press scale. */
+export const railTileClass =
+  "relative flex size-11 items-center justify-center rounded-lg border active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring";
+
+const railTileActiveClass = "border-transparent bg-surface-tertiary text-foreground";
+const railTileIdleClass = "border-transparent text-muted opacity-75 hover:bg-surface-tertiary/50 hover:opacity-100 hover:text-foreground"; // check-tokens-allow: text-muted
+
+export function railTileStateClass(active: boolean): string {
+  return active ? railTileActiveClass : railTileIdleClass;
+}
+
+/** Count badge pinned to the bottom-right of a rail tile. */
+export const railBadgeClass = "absolute -bottom-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-semibold leading-none text-accent-foreground"; // check-tokens-allow: accent
+
+/** Static section label, sentence case, padded to match nav rows. */
+export const sidebarSectionLabelClass =
+  "sidebar-section-label px-3 py-1 text-[11px] font-medium tracking-[-0.01em]";
+
+/** Nav link text: muted until active. */
+export function sidebarNavLinkTextClass(isActive: boolean): string {
+  return cn(isActive ? "text-foreground" : "text-muted hover:text-foreground"); // check-tokens-allow: text-muted
+}
+
+/** Padding for main sidebar nav rows. */
+export function sidebarNavRowClass(isIconOnly: boolean): string {
+  return cn(isIconOnly ? "justify-center px-0 py-1.5" : "gap-3 px-3 py-1.5");
+}
+
+export const mobileMenuButtonClass = "-ml-1 h-11 w-11 shrink-0 rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
+
+export const panelCloseButtonClass = "rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
+
+export const accountEmailClass = "block truncate text-xs font-normal text-muted"; // check-tokens-allow: text-muted
+
+export const signOutDescriptionClass = "mt-1 text-sm text-muted"; // check-tokens-allow: text-muted
+
+export const signOutCancelClass = "text-muted"; // check-tokens-allow: text-muted

package/shell/src/index.ts

@@ -10,3 +10,28 @@ export type {
   SessionsHoverCardProps,
   SessionsHoverCardSurface,
 } from "./SessionsHoverCard.js";
+export { AppShell } from "./AppShell.js";
+export type { AppShellProps } from "./AppShell.js";
+export { AppSidebar } from "./AppSidebar.js";
+export type { AppSidebarProps } from "./AppSidebar.js";
+export { SidebarRail, RailTile, RailDivider } from "./SidebarRail.js";
+export type { SidebarRailProps, RailTileProps, RailDividerProps } from "./SidebarRail.js";
+export { SidebarIconTooltip } from "./SidebarIconTooltip.js";
+export type { SidebarIconTooltipProps } from "./SidebarIconTooltip.js";
+export { SidebarPanel } from "./SidebarPanel.js";
+export type { SidebarPanelProps } from "./SidebarPanel.js";
+export { SidebarAccountMenu, SidebarAccountMenuPlaceholder } from "./SidebarAccountMenu.js";
+export type {
+  SidebarAccountMenuProps,
+  SidebarAccountMenuPlaceholderProps,
+} from "./SidebarAccountMenu.js";
+export { SignOutDialog } from "./SignOutDialog.js";
+export type { SignOutDialogProps } from "./SignOutDialog.js";
+export {
+  railBadgeClass,
+  railTileClass,
+  railTileStateClass,
+  sidebarNavLinkTextClass,
+  sidebarNavRowClass,
+  sidebarSectionLabelClass,
+} from "./app-shell-classes.js";

package/src/index.ts

@@ -120,6 +120,34 @@ export type {
   SessionsHoverCardSurface,
 } from "../shell/src/SessionsHoverCard";
 
+// App shell: sidebar and main page layout. Widths come from the
+// `--app-shell-*` CSS variables that `AppShell` sets.
+export { AppShell } from "../shell/src/AppShell";
+export type { AppShellProps } from "../shell/src/AppShell";
+export { AppSidebar } from "../shell/src/AppSidebar";
+export type { AppSidebarProps } from "../shell/src/AppSidebar";
+export { SidebarRail, RailTile, RailDivider } from "../shell/src/SidebarRail";
+export type { SidebarRailProps, RailTileProps, RailDividerProps } from "../shell/src/SidebarRail";
+export { SidebarIconTooltip } from "../shell/src/SidebarIconTooltip";
+export type { SidebarIconTooltipProps } from "../shell/src/SidebarIconTooltip";
+export { SidebarPanel } from "../shell/src/SidebarPanel";
+export type { SidebarPanelProps } from "../shell/src/SidebarPanel";
+export { SidebarAccountMenu, SidebarAccountMenuPlaceholder } from "../shell/src/SidebarAccountMenu";
+export type {
+  SidebarAccountMenuProps,
+  SidebarAccountMenuPlaceholderProps,
+} from "../shell/src/SidebarAccountMenu";
+export { SignOutDialog } from "../shell/src/SignOutDialog";
+export type { SignOutDialogProps } from "../shell/src/SignOutDialog";
+export {
+  railBadgeClass,
+  railTileClass,
+  railTileStateClass,
+  sidebarNavLinkTextClass,
+  sidebarNavRowClass,
+  sidebarSectionLabelClass,
+} from "../shell/src/app-shell-classes";
+
 // App helpers: confirm skip, update watcher, settings chrome, stable auth.
 export * from "../app/src/index";
 

package/src/motion/panel-transition.tsx

@@ -1,4 +1,15 @@
-import { ViewTransition, type ReactNode } from "react";
+import * as React from "react";
+import type { ComponentType, ReactNode } from "react";
+
+/** The `ViewTransition` props used here. Typed locally so consumers on `@types/react` without `ViewTransition` still typecheck. */
+type ViewTransitionLikeProps = {
+  children?: ReactNode;
+  default?: string;
+  enter?: string;
+  exit?: string;
+};
+
+const ViewTransition: ComponentType<ViewTransitionLikeProps> = Reflect.get(React, "ViewTransition");
 
 export interface PanelTransitionProps {
   children?: ReactNode;

package/shell/src/SessionsHoverCard.test.tsx

@@ -1,256 +0,0 @@
-// @vitest-environment happy-dom
-import { act, createRef } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { SessionsHoverCard } from "./SessionsHoverCard";
-
-(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-let root: Root | null = null;
-let host: HTMLElement | null = null;
-
-async function mount(node: React.ReactNode) {
-  host = document.createElement("div");
-  document.body.appendChild(host);
-  root = createRoot(host);
-  await act(async () => {
-    root!.render(node);
-  });
-}
-
-afterEach(async () => {
-  await act(async () => root?.unmount());
-  host?.remove();
-  document.body.innerHTML = "";
-  root = null;
-  host = null;
-});
-
-describe("SessionsHoverCard", () => {
-  it("renders header, body and footer slots when open", async () => {
-    await mount(
-      <SessionsHoverCard open header="Head" body="Body text" footer="Foot">
-        <button type="button">Row</button>
-      </SessionsHoverCard>,
-    );
-    const text = document.body.textContent ?? "";
-    expect(text).toContain("Row");
-    expect(text).toContain("Head");
-    expect(text).toContain("Body text");
-    expect(text).toContain("Foot");
-    expect(document.body.innerHTML).toContain("w-64");
-  });
-
-  it("does not call the body render prop or loadContent while closed", async () => {
-    const body = vi.fn(() => "x");
-    const loadContent = vi.fn(() => "y");
-    await mount(
-      <>
-        <SessionsHoverCard open={false} body={body}>
-          <button type="button">A</button>
-        </SessionsHoverCard>
-        <SessionsHoverCard open={false} loadContent={loadContent}>
-          <button type="button">B</button>
-        </SessionsHoverCard>
-      </>,
-    );
-    expect(body).not.toHaveBeenCalled();
-    expect(loadContent).not.toHaveBeenCalled();
-  });
-
-  it("calls the render prop with open true and loads content once when open", async () => {
-    const body = vi.fn((ctx: { open: boolean }) => `open=${ctx.open}`);
-    const loadContent = vi.fn(async () => "Loaded preview");
-    await mount(
-      <>
-        <SessionsHoverCard open body={body}>
-          <button type="button">A</button>
-        </SessionsHoverCard>
-        <SessionsHoverCard open loadContent={loadContent} loadingFallback="Loading">
-          <button type="button">B</button>
-        </SessionsHoverCard>
-      </>,
-    );
-    expect(body).toHaveBeenCalledWith({ open: true });
-    expect(document.body.textContent).toContain("open=true");
-    expect(loadContent).toHaveBeenCalledTimes(1);
-    expect(document.body.textContent).toContain("Loaded preview");
-  });
-
-  it("portals the content to document.body by default", async () => {
-    await mount(
-      <div id="clip" style={{ overflow: "hidden" }}>
-        <SessionsHoverCard open body="Body text">
-          <button type="button">Row</button>
-        </SessionsHoverCard>
-      </div>,
-    );
-    const content = document.querySelector("[data-radix-popper-content-wrapper]");
-    expect(content).not.toBeNull();
-    expect(document.getElementById("clip")!.contains(content)).toBe(false);
-    expect(document.body.textContent).toContain("Body text");
-  });
-
-  it("keeps the content in place with portal={false}", async () => {
-    await mount(
-      <div id="clip" style={{ overflow: "hidden" }}>
-        <SessionsHoverCard open portal={false} body="Body text">
-          <button type="button">Row</button>
-        </SessionsHoverCard>
-      </div>,
-    );
-    const content = document.querySelector("[data-radix-popper-content-wrapper]");
-    expect(document.getElementById("clip")!.contains(content)).toBe(true);
-  });
-
-  it("swaps the surface without keeping the default one", async () => {
-    await mount(
-      <>
-        <SessionsHoverCard open surface="glass" body="G" className="p-5">
-          <button type="button">A</button>
-        </SessionsHoverCard>
-      </>,
-    );
-    const card = document.querySelector("[data-state=open][data-side]") as HTMLElement;
-    expect(card.className).toContain("glass-panel-strong");
-    expect(card.className).toContain("rounded-surface");
-    expect(card.className).not.toContain("bg-overlay");
-    expect(card.className).not.toContain("rounded-lg");
-    expect(card.className).toContain("p-5");
-    expect(card.className).not.toContain("p-3");
-  });
-
-  it("uses the floating overlay surface by default", async () => {
-    await mount(
-      <SessionsHoverCard open body="B">
-        <button type="button">A</button>
-      </SessionsHoverCard>,
-    );
-    const card = document.querySelector("[data-state=open][data-side]") as HTMLElement;
-    expect(card.className).toContain("bg-overlay");
-    expect(card.className).toContain("rounded-lg");
-  });
-
-  it("forwards the ref and props to the child trigger and keeps its handlers", async () => {
-    const ref = createRef<HTMLButtonElement>();
-    const onClick = vi.fn();
-    await mount(
-      <SessionsHoverCard ref={ref as never} data-testid="row" body="B">
-        <button type="button" onClick={onClick}>
-          Row
-        </button>
-      </SessionsHoverCard>,
-    );
-    const button = document.querySelector("button") as HTMLButtonElement;
-    expect(ref.current).toBe(button);
-    expect(button.getAttribute("data-testid")).toBe("row");
-    await act(async () => button.click());
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("renders its own trigger element with asChild={false}", async () => {
-    await mount(
-      <SessionsHoverCard asChild={false} body="B">
-        <span>Row</span>
-      </SessionsHoverCard>,
-    );
-    const trigger = document.querySelector("[data-state]") as HTMLElement;
-    expect(trigger.tagName).toBe("A");
-    expect(trigger.textContent).toBe("Row");
-  });
-
-  describe("focus and pointer", () => {
-    function setFocusVisible(el: HTMLElement, value: boolean) {
-      const orig = el.matches.bind(el);
-      el.matches = (sel: string) => (sel === ":focus-visible" ? value : orig(sel));
-    }
-
-    it("does not open on pointer-driven focus after a context menu", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard openDelay={0} header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, false);
-      await act(async () => {
-        row.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true }));
-        row.dispatchEvent(new FocusEvent("focus", { bubbles: false }));
-        row.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-      });
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(onOpenChange).not.toHaveBeenCalledWith(true);
-      expect(document.body.textContent).not.toContain("Head");
-    });
-
-    it("opens on keyboard focus-visible", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard openDelay={0} header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, true);
-      await act(async () => {
-        row.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-      });
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(onOpenChange).toHaveBeenCalledWith(true);
-    });
-
-    // React derives onPointerLeave from native pointerout (with a null or outside
-    // relatedTarget). A native pointerleave event does not reach the handler.
-    function leave(el: HTMLElement) {
-      return act(async () => {
-        el.dispatchEvent(new PointerEvent("pointerout", { pointerType: "mouse", bubbles: true, relatedTarget: null }));
-      });
-    }
-
-    it("closes on pointer leave when stuck open by non-focus-visible focus", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard defaultOpen header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, false);
-      row.focus();
-      await leave(row);
-      expect(onOpenChange).toHaveBeenCalledWith(false);
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(document.body.textContent).not.toContain("Head");
-    });
-
-    it("stays open on pointer leave with keyboard focus-visible", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard defaultOpen header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, true);
-      row.focus();
-      await leave(row);
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(onOpenChange).not.toHaveBeenCalledWith(false);
-      expect(document.body.textContent).toContain("Head");
-    });
-
-    it("does not force-close on pointer leave without focus (Radix owns hover close)", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard defaultOpen closeDelay={1000} header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      await leave(row);
-      expect(onOpenChange).not.toHaveBeenCalledWith(false);
-      expect(document.body.textContent).toContain("Head");
-    });
-  });
-});