@sableui/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,8 +1,8 @@
-export { Phone, phoneMeta } from './chunk-RWP4XBSK.js';
+export { Phone, phoneMeta } from './chunk-KFZ43RKU.js';
 import './chunk-NEQNXI2G.js';
-export { DENSITY_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS } from './chunk-JI7WJP2L.js';
-import { withPortalThemeScope, FIELD_SHELL_XS, Button, useTypeTier, FIELD_SHELL, FIELD_INVALID, trimLabel, useMotion, HighlightGlide, buttonVariants, Input, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, Select, SelectTrigger, SelectContent, SelectItem, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, Card, DensityProvider, sideNavItemIconVariants, sideNavItemVariants, useScrollActivity, setRef, Menu, MenuTrigger, MenuContent, Textarea, Field, Progress } from './chunk-J23ELQQZ.js';
-export { AppHeader, AppShell, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, BottomNav, BottomNavItem, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, ChatComposer, CodeBlock, CodeHighlightProvider, DataTable, Density, DensityProvider, Description, DescriptionDetail, DescriptionItem, DescriptionTerm, Entity, Field, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, Form, Input, Label, Marker, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MessageScroller, MotionProvider, PageHeader, Pill, Presence, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RelativeTime, Reveal, SearchInput, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsMenu, SettingsRow, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, SimpleTooltip, Spinner, StatusDot, StreamingText, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TextReveal, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, ViewTransitionName, appHeaderMeta, appShellMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bottomNavMeta, bubbleMeta, buttonMeta, buttonVariants, cardMeta, chatComposerMeta, codeBlockMeta, dataTableMeta, descriptionMeta, descriptionVariants, entityMeta, fieldsetMeta, formMeta, inputMeta, labelMeta, markerMeta, menuMeta, messageMeta, messageScrollerMeta, pageHeaderMeta, pillVariants, progressMeta, progressTrackVariants, relativeTimeMeta, searchInputMeta, selectMeta, separatorMeta, settingsMenuMeta, sidebarMeta, spinnerMeta, startViewTransition, statusDotMeta, statusDotVariants, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, textareaMeta, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useInView, useMotion, useReducedMotion, useScrollActivity, useSidebar, useTypeTier } from './chunk-J23ELQQZ.js';
+export { DENSITY_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS } from './chunk-X276MF2W.js';
+import { withPortalThemeScope, FIELD_SHELL_XS, useTypeTier, useDensity, FIELD_SHELL, MOBILE_FIELD_TIER, FIELD_INVALID, useMotion, HighlightGlide, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, buttonVariants, Select, SelectTrigger, SelectContent, SelectItem, Button, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, DensityProvider, Input, useScrollActivity, setRef, Dialog, DialogContent, DialogTitle, DialogDescription, Textarea, Progress } from './chunk-AOWBYEQ6.js';
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, AppShell, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, BottomNav, BottomNavItem, Browser, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, ChatComposer, Code, CodeBlock, CodeHighlightProvider, DataTable, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsMenu, EmptyState, Entity, Field, Form, Input, Label, Marker, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MessageScroller, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MotionProvider, NotificationBadge, PageHeader, Pill, Presence, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RelativeTime, Reveal, SearchInput, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsMenu, SettingsRow, SideNav, SideNavGroup, SideNavItem, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, SimpleTooltip, Skeleton, Spinner, StatusDot, StreamingText, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, Textarea, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, ViewTransitionName, appHeaderMeta, appShellMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bottomNavMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, cardMeta, chatComposerMeta, codeBlockMeta, codeMeta, dataTableMeta, destructiveActionModalMeta, dialogMeta, dotsMenuMeta, emptyStateMeta, entityMeta, formMeta, inputMeta, labelMeta, markerMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, pageHeaderMeta, pillVariants, progressMeta, progressTrackVariants, relativeTimeMeta, searchInputMeta, selectMeta, separatorMeta, settingsMenuMeta, sideNavMeta, sidebarMeta, skeletonMeta, spinnerMeta, startViewTransition, statusDotMeta, statusDotVariants, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useInView, useMotion, useReducedMotion, useScrollActivity, useSidebar, useTypeTier } from './chunk-AOWBYEQ6.js';
 export { AspectBox, Bleed, Center, Col, Columns, Grid, GridOverlay, Page, Region, Row, SafeArea, Spacer, SplitPane, Stack } from './chunk-3IWZYBGH.js';
 import { cn } from './chunk-SRQWQUTW.js';
 export { cn } from './chunk-SRQWQUTW.js';
@@ -18,19 +18,14 @@ import './chunk-ADLLDWLW.js';
 import './chunk-K7RUHUGC.js';
 import './chunk-YXBOYWBN.js';
 import './chunk-7MG4SHYX.js';
-import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
-import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { NumberField as NumberField$1 } from '@base-ui/react/number-field';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as OtpParts from '@base-ui/react/otp-field';
-import { createContext, Fragment, useId, useRef, useState, useContext, useEffect, useLayoutEffect, Children, isValidElement, useMemo, useCallback, useSyncExternalStore } from 'react';
+import { createContext, Fragment, useId, useRef, useState, useEffect, useLayoutEffect, Children, isValidElement, useContext, useMemo, useCallback, useSyncExternalStore } from 'react';
 import { cva } from 'class-variance-authority';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
-import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
-import { Meter as Meter$1 } from '@base-ui/react/meter';
 import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
-import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
 import { Radio as Radio$1 } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
@@ -43,7 +38,7 @@ import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
 import { Slider as Slider$1 } from '@base-ui/react/slider';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
 import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
-import { useRender } from '@base-ui/react/use-render';
+import { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
 import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
 import { PreviewCard } from '@base-ui/react/preview-card';
 
@@ -364,7 +359,6 @@ var COMPONENT_TAXONOMY = {
      value within a known range (a reading), which is not loading or progress. */
   Avatar: ["Data display", "either"],
   DataTable: ["Data display", "either"],
-  Description: ["Data display", "either"],
   Entity: ["Data display", "either"],
   GlidingHighlight: ["Data display", "either"],
   Meter: ["Data display", "either"],
@@ -438,420 +432,6 @@ var LABEL_OVERRIDES = {
 function componentLabel(name) {
   return LABEL_OVERRIDES[name] ?? name.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
 }
-var Dialog = Dialog$1.Root;
-var DialogTrigger = Dialog$1.Trigger;
-var DialogClose = Dialog$1.Close;
-var DialogPortal = withPortalThemeScope(Dialog$1.Portal);
-function DialogOverlay({ className, size = "default", ...props }) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Backdrop,
-    {
-      "data-size": size,
-      className: cn(
-        "fixed inset-0 z-(--z-overlay) motion-fade",
-        size === "fullscreen" ? "bg-overlay/95" : "bg-overlay/50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  size = "default",
-  showCloseButton,
-  scroll,
-  ...props
-}) {
-  return size === "fullscreen" ? /* @__PURE__ */ jsx(FullscreenContent, { showCloseButton: showCloseButton ?? true, ...props }) : /* @__PURE__ */ jsx(
-    CardContent2,
-    {
-      showCloseButton: showCloseButton ?? false,
-      scroll: scroll ?? true,
-      ...props
-    }
-  );
-}
-function FullscreenContent({
-  className,
-  children,
-  showCloseButton,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, { size: "fullscreen" }),
-    /* @__PURE__ */ jsxs(
-      Dialog$1.Popup,
-      {
-        "data-size": "fullscreen",
-        className: cn(
-          // No scale pop at full-bleed size — the popup IS the viewport, so a
-          // scale reads as the whole screen lurching. Fade with the scrim.
-          "fixed inset-0 z-(--z-overlay) flex items-center justify-center outline-none motion-fade",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton ? (
-            // The floating Button: Sable's control over content. Its own
-            // translucent popover chip and border keep it legible over bright
-            // or dark media alike, with its hover built in — no restyled
-            // ghost. It sits at the screen edge, so it clears the notch and
-            // home-indicator insets.
-            /* @__PURE__ */ jsx(
-              Dialog$1.Close,
-              {
-                render: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "floating",
-                    size: "icon",
-                    "aria-label": "Close",
-                    className: "absolute right-[max(--spacing(4),env(safe-area-inset-right))] top-[max(--spacing(4),env(safe-area-inset-top))] z-10"
-                  }
-                ),
-                children: /* @__PURE__ */ jsx(Icon, { name: "xmark" })
-              }
-            )
-          ) : null
-        ]
-      }
-    )
-  ] });
-}
-function CardContent2({
-  className,
-  children,
-  showCloseButton,
-  scroll,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      Dialog$1.Popup,
-      {
-        "data-size": "default",
-        className: cn(
-          "fixed left-1/2 top-1/2 z-(--z-overlay) flex w-[calc(100%-2rem)] max-w-125 -translate-x-1/2 -translate-y-1/2 flex-col rounded-lg border border-border-floating bg-popover sable-surface-popover p-6 text-popover-foreground shadow-lg outline-none",
-          // A dialog is viewport-anchored, so it caps against the viewport with
-          // its own 1rem margin on each side accounted for. Without the cap a
-          // tall dialog centred on the viewport overflows BOTH edges and the top
-          // half is unreachable — Base UI locks the page scroll, so there is
-          // nothing left to scroll. `dvh` so a mobile URL bar counts.
-          "max-h-[calc(100dvh-2rem)]",
-          // The close button is pinned over the popup's top-end corner,
-          // inside the p-6 padding; the header gives way to it so a long
-          // title wraps before the button instead of running under it.
-          showCloseButton && "[&_[data-slot=dialog-header]]:pe-8",
-          "motion-pop",
-          className
-        ),
-        ...props,
-        children: [
-          scroll ? /* @__PURE__ */ jsx("div", { className: "-m-2 min-h-0 overflow-y-auto overscroll-contain p-2 scrollbar-quiet", children }) : children,
-          showCloseButton ? /* @__PURE__ */ jsx(
-            Dialog$1.Close,
-            {
-              render: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  "aria-label": "Close",
-                  className: "absolute end-4 top-4 text-muted-foreground"
-                }
-              ),
-              children: /* @__PURE__ */ jsx(Icon, { name: "xmark" })
-            }
-          ) : null
-        ]
-      }
-    )
-  ] });
-}
-function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Title,
-    {
-      className: cn("text-title-lg text-popover-foreground", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Description,
-    {
-      className: cn("text-body-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
-function DialogHeader({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-header", className: cn("mb-4 flex flex-col gap-1.5", className), ...props });
-}
-function DialogFooter({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("mt-6 flex items-center justify-end gap-2", className),
-      ...props
-    }
-  );
-}
-var AlertDialog = AlertDialog$1.Root;
-var AlertDialogTrigger = AlertDialog$1.Trigger;
-var AlertDialogClose = DialogClose;
-var AlertDialogContent = DialogContent;
-var AlertDialogOverlay = DialogOverlay;
-var AlertDialogTitle = DialogTitle;
-var AlertDialogDescription = DialogDescription;
-var AlertDialogHeader = DialogHeader;
-var AlertDialogFooter = DialogFooter;
-
-// src/components/dialog/dialog.meta.ts
-var dialogMeta = {
-  name: "Dialog",
-  summary: 'Modal surface over Base UI Dialog (focus trap, scroll lock, Esc/outside dismissal). Centered on desktop; max-width 500px. size="fullscreen" is the full-bleed media viewer (image, video, Carousel) over a near-opaque scrim.',
-  keywords: [
-    "dialog",
-    "modal",
-    "overlay",
-    "confirmation",
-    "alert",
-    "form",
-    "focus trap",
-    "sheet",
-    "lightbox",
-    "fullscreen",
-    "image viewer",
-    "media overlay",
-    "gallery"
-  ],
-  usage: {
-    description: "Use Dialog for focused decisions, short modal forms, confirmations, and content that temporarily blocks the underlying page. Prefer Sheet for side-panel workflows, Popover for lightweight anchored content, and inline sections for content that should remain part of the page.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Always include DialogTitle and usually DialogDescription so the modal has an accessible name and context."
-      },
-      {
-        guidance: "do",
-        description: "Keep the footer actions explicit: a safe escape path plus the primary or destructive action."
-      },
-      {
-        guidance: "do",
-        description: "Use showCloseButton for dismissible informational dialogs; keep destructive confirmations action-led."
-      },
-      {
-        guidance: "do",
-        description: 'In a destructive confirmation, state the consequence in DialogDescription ("This is permanent.") and reserve the destructive button variant for actions that cannot be undone.'
-      },
-      {
-        guidance: "dont",
-        description: "Put large multipage workflows in a centered dialog. Use Sheet or a page route when the task needs space."
-      },
-      {
-        guidance: "do",
-        description: 'Use size="fullscreen" when an image, video, or gallery needs a larger view than the layout can give it. Give the popup an accessible name (aria-label on DialogContent, or a visually hidden DialogTitle) and alt text on the media.'
-      },
-      {
-        guidance: "dont",
-        description: `Use size="fullscreen" for forms, confirmations, or anything that isn't media. A dialog that happens to need room is a Sheet or a page; the fullscreen affordances (dark scrim, corner close, centred content) all assume something to look at.`
-      },
-      {
-        guidance: "dont",
-        description: `Hide the close button at size="fullscreen" without another visible way out. A full-bleed viewer that only Esc dismisses is a dead end for anyone who doesn't know the key.`
-      },
-      {
-        guidance: "dont",
-        description: "Open a dialog for passive status updates. Use Toast, Banner, or InlineStatus instead."
-      },
-      {
-        guidance: "do",
-        description: 'Use the AlertDialog family for a confirmation that must be answered (discard changes, leave without saving). It looks identical but is role="alertdialog" and a backdrop click does not dismiss it \u2014 only Cancel, Esc, or the action. For irreversible deletes, use DestructiveActionModal, which is built on it.'
-      }
-    ],
-    anatomy: [
-      {
-        name: "Trigger",
-        required: false,
-        description: "The element that opens the dialog when using the composed trigger pattern."
-      },
-      {
-        name: "Overlay",
-        required: true,
-        description: "The dimming backdrop behind the modal content."
-      },
-      {
-        name: "Content",
-        required: true,
-        description: "The modal surface that receives focus trap, labelled-by, and described-by wiring."
-      },
-      {
-        name: "Header",
-        required: true,
-        description: "Title and optional description that explain the decision or task."
-      },
-      {
-        name: "Footer",
-        required: false,
-        description: "Action row for cancel, confirm, submit, or destructive choices."
-      }
-    ]
-  },
-  related: {
-    components: ["Sheet", "Popover", "Toast", "Button", "Form", "Note", "Carousel", "Video"],
-    patterns: ["SettingsPage", "AuthPage"]
-  },
-  status: "stable",
-  props: [
-    {
-      name: "Dialog (Root)",
-      type: "Base UI Dialog.Root props (open, defaultOpen, onOpenChange, modal)",
-      description: "Controls open state. Uncontrolled by default."
-    }
-  ],
-  variants: {
-    size: ["default", "fullscreen"]
-  },
-  subcomponents: [
-    {
-      name: "DialogContent",
-      type: 'Base UI Popup props + size?: "default" | "fullscreen" + showCloseButton?: boolean + scroll?: boolean + className',
-      description: 'Backdrop + popup; portals to <body>. Composes DialogOverlay by default. size="fullscreen" is the media viewer: a near-opaque scrim (bg-overlay/95), an edge-to-edge popup that centres its children with no card chrome, motion-fade instead of motion-pop, and a safe-area-aware floating close button (Button variant="floating"); at that size showCloseButton defaults to true and scroll to false, and the media fits itself with max-h-full max-w-full object-contain. At the default size, showCloseButton (defaults to false) renders a built-in close (X) button in the top-end corner, and the header leaves room for it (Icon name="xmark"). The popup caps at the viewport height less a 1rem margin and wraps its children in a scrolling region, so a tall dialog scrolls instead of overflowing a viewport whose own scroll is locked; pass scroll={false} when the dialog owns its internal layout (a pinned header over a scrolling body) and supplies its own min-h-0 scroll region.'
-    },
-    {
-      name: "DialogOverlay",
-      type: 'Base UI Backdrop props + size?: "default" | "fullscreen" + className',
-      description: 'The styleable scrim/backdrop \u2014 bg-overlay/50 by default, near-opaque bg-overlay/95 at size="fullscreen". Composed into DialogContent (at the matching size) by default; exported for manual styling.'
-    },
-    {
-      name: "DialogTrigger",
-      type: "Base UI Dialog.Trigger props (render)",
-      description: "Element that opens the dialog. Compose via render prop."
-    },
-    {
-      name: "DialogClose",
-      type: "Base UI Dialog.Close props (render)",
-      description: "Element that dismisses the dialog. Compose via render prop."
-    },
-    {
-      name: "DialogHeader",
-      type: 'ComponentProps<"div">',
-      description: "Top section holding DialogTitle/DialogDescription."
-    },
-    {
-      name: "DialogTitle",
-      type: "Base UI Dialog.Title props + className",
-      description: "The dialog's accessible name \u2014 wires aria-labelledby on the popup."
-    },
-    {
-      name: "DialogDescription",
-      type: "Base UI Dialog.Description props + className",
-      description: "Muted supporting line; wires aria-describedby."
-    },
-    {
-      name: "DialogFooter",
-      type: 'ComponentProps<"div">',
-      description: "Bottom action row (right-aligned buttons)."
-    },
-    {
-      name: "AlertDialog (Root)",
-      type: "Base UI AlertDialog.Root props (open, defaultOpen, onOpenChange)",
-      description: 'Root for a confirmation that needs an answer. Always modal; the popup is role="alertdialog" and a click outside does not dismiss \u2014 only an AlertDialogClose, an action that sets open to false, or Esc.'
-    },
-    {
-      name: "AlertDialogTrigger",
-      type: "Base UI AlertDialog.Trigger props (render)",
-      description: "Opens the alert dialog."
-    },
-    {
-      name: "AlertDialogContent / AlertDialogOverlay / AlertDialogTitle / AlertDialogDescription / AlertDialogHeader / AlertDialogFooter / AlertDialogClose",
-      type: "Same props as the matching Dialog part",
-      description: "The Dialog parts under AlertDialog names \u2014 Base UI shares the popup, backdrop, title, description and close parts between the two, so the surface is identical. Pass initialFocus to AlertDialogContent (a ref to the Cancel button) to open focus on the safe action."
-    }
-  ],
-  tokensUsed: [
-    "popover",
-    "popover-foreground",
-    "border",
-    "muted-foreground",
-    "overlay",
-    "overlay-foreground",
-    "accent",
-    "accent-foreground",
-    "ring"
-  ],
-  motion: [
-    {
-      slot: "arrival",
-      recipe: "motion-fade",
-      part: "DialogOverlay",
-      why: "The scrim is what tells the reader the page behind is no longer live. Appearing at full opacity in one frame reads as a page navigation \u2014 the surrounding context vanishes instead of receding."
-    },
-    {
-      slot: "arrival",
-      recipe: "motion-pop",
-      part: "DialogContent",
-      why: "The panel scales up as the scrim darkens, so the two read as one event. Overlay and panel arriving on separate timings is the most common way a modal feels cheap."
-    },
-    {
-      slot: "response",
-      recipe: "motion-interactive",
-      part: "DialogClose",
-      why: "The close affordance is a small icon in a corner and is often the only control a reader looks for. Its hover state has to be findable, not just present."
-    },
-    {
-      slot: "transition",
-      recipe: "motion-pop",
-      part: "DialogContent",
-      why: "Exit runs the same recipe in reverse so dismissal is legibly the inverse of opening. A modal that fades out having scaled in leaves the reader unsure whether it closed or navigated away."
-    },
-    {
-      slot: "activity",
-      recipe: "none",
-      part: "DialogContent",
-      why: "The dialog is a container. Work happening inside it is the content's to report \u2014 a dialog-level indicator would claim the whole surface is busy when usually one field is."
-    }
-  ],
-  a11y: [
-    "Base UI provides focus trapping, scroll lock, aria-modal, and labelled-by wiring (DialogTitle).",
-    "Content taller than the viewport scrolls inside the dialog (thin scrollbar, contained overscroll) rather than overflowing off screen \u2014 the page behind is scroll-locked, so anything past the edge would be unreachable.",
-    'Esc and click-outside dismiss by default. AlertDialog keeps Esc but ignores click-outside, and its popup is role="alertdialog".',
-    "Animate via data-[starting-style]/data-[ending-style] attributes.",
-    'size="fullscreen" has no title chrome, so name the popup yourself: aria-label on DialogContent (or a visually hidden DialogTitle), plus alt text on the media \u2014 the zoomed image is a separate image to assistive technology. Its built-in close button carries aria-label="Close" and clears the safe-area insets (notch, home indicator).'
-  ],
-  examples: [
-    {
-      label: "Fullscreen media",
-      code: '<Dialog><DialogTrigger render={<Button variant="secondary">View full size</Button>} /><DialogContent size="fullscreen" aria-label="Studio, 2026"><img src={url} alt="Studio, 2026" className="max-h-full max-w-full object-contain p-8" /></DialogContent></Dialog>'
-    },
-    {
-      label: "Fullscreen gallery",
-      code: '<Dialog><DialogTrigger render={<Button>Open gallery</Button>} /><DialogContent size="fullscreen" aria-label="Gallery"><Carousel loop dots counter label="Gallery" className="w-full max-w-4xl px-8">{images.map((src) => <img key={src} src={src} alt="" className="size-full object-contain" />)}</Carousel></DialogContent></Dialog>'
-    },
-    {
-      label: "Basic",
-      code: '<Dialog><DialogTrigger render={<Button>Open</Button>} /><DialogContent><DialogHeader><DialogTitle>Edition details</DialogTitle><DialogDescription>A limited run of 100, stored permanently on Arweave.</DialogDescription></DialogHeader><DialogFooter><DialogClose render={<Button variant="secondary">Close</Button>} /><DialogClose render={<Button>Collect</Button>} /></DialogFooter></DialogContent></Dialog>'
-    },
-    {
-      label: "Settings form",
-      code: '<Dialog><DialogTrigger render={<Button variant="secondary">Rename collection</Button>} /><DialogContent showCloseButton><DialogHeader><DialogTitle>Rename collection</DialogTitle><DialogDescription>Update the display name shown to collectors.</DialogDescription></DialogHeader><Form><Field label="Collection name"><Input defaultValue="Midnight Archive" /></Field><DialogFooter><DialogClose render={<Button variant="secondary">Cancel</Button>} /><Button type="submit">Save changes</Button></DialogFooter></Form></DialogContent></Dialog>'
-    },
-    {
-      label: "Destructive confirmation",
-      code: '<AlertDialog><AlertDialogTrigger render={<Button variant="destructive">Delete edition</Button>} /><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete edition?</AlertDialogTitle><AlertDialogDescription>This removes the edition and cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogClose render={<Button variant="secondary">Cancel</Button>} /><Button variant="destructive" onClick={deleteEdition}>Delete edition</Button></AlertDialogFooter></AlertDialogContent></AlertDialog>'
-    }
-  ]
-};
 function NumberField({
   className,
   steppers = true,
@@ -865,10 +445,11 @@ function NumberField({
     {
       variant: "ghost",
       size: "icon-sm",
-      className: "mx-0.5 self-center text-muted-foreground"
+      className: "mx-[calc((var(--control-md)-var(--control-sm)-2px)/2)] shrink-0 self-center text-muted-foreground"
     }
   );
   const tier = useTypeTier();
+  const density = useDensity();
   return /* @__PURE__ */ jsx(NumberField$1.Root, { ...root, children: /* @__PURE__ */ jsxs(
     NumberField$1.Group,
     {
@@ -885,6 +466,7 @@ function NumberField({
         // Tailwind scan; keep in step with lib/field-shell.
         "has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/30",
         tier.body,
+        density === "comfortable" && MOBILE_FIELD_TIER,
         className
       ),
       children: [
@@ -897,9 +479,9 @@ function NumberField({
             "aria-label": ariaLabel,
             className: cn(
               "w-full min-w-0 bg-transparent tabular-nums outline-none",
-              // Centred between two steppers; left-aligned without them, so a
-              // column of stepper-less fields reads as a column of values.
-              steppers ? "px-2 text-center" : "px-2 text-left"
+              // Centred between two steppers; left-aligned without them, on
+              // Input's px-3 text column so a stack of fields shares one edge.
+              steppers ? "px-2 text-center" : "px-3 text-left"
             )
           }
         ),
@@ -1017,7 +599,7 @@ var numberFieldMeta = {
   ]
 };
 var otpExports = Object.fromEntries(Object.entries(OtpParts));
-var Base3 = otpExports.OTPField ?? otpExports.OTPFieldPreview;
+var Base2 = otpExports.OTPField ?? otpExports.OTPFieldPreview;
 var defaultSlotLabel = (index, length) => `Character ${index + 1} of ${length}`;
 function OtpField({
   className,
@@ -1029,7 +611,7 @@ function OtpField({
 }) {
   const invalid = ariaInvalid === true || ariaInvalid === "true";
   return /* @__PURE__ */ jsx(
-    Base3.Root,
+    Base2.Root,
     {
       length,
       "data-invalid": invalid ? "" : void 0,
@@ -1048,7 +630,7 @@ function OtpField({
             }
           ) : null,
           /* @__PURE__ */ jsx(
-            Base3.Input,
+            Base2.Input,
             {
               "aria-label": index === 0 ? void 0 : getSlotLabel(index, length),
               "aria-invalid": invalid || void 0,
@@ -1057,7 +639,9 @@ function OtpField({
                 // The shell Input wears — lib/field-shell — so a slot reads as
                 // the same field; only the slot-specific states are added here.
                 FIELD_SHELL,
-                "focus-visible:border-ring data-[filled]:border-border-strong",
+                // Focus is FIELD_SHELL's ring alone, like every other field — a ring-
+                // coloured border under it made a 3px edge only here.
+                "data-[filled]:border-border-strong",
                 FIELD_INVALID
               )
             }
@@ -1681,6 +1265,12 @@ var SELECTION_CARD_SHELL = [
   "focus-within:outline-2 focus-within:outline-solid focus-within:outline-offset-2 focus-within:outline-ring",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:border-input"
 ].join(" ");
+var SELECTION_CARD_LAYOUT = {
+  row: "items-start gap-3 rounded-md",
+  tile: "flex-col gap-3 rounded-lg"
+};
+var SELECTION_CARD_TILE_HEAD = "flex w-full items-start justify-between gap-3";
+var SELECTION_CARD_GLYPH = "shrink-0 text-2xl leading-none motion-interactive";
 var SELECTION_CARD_CHECKED = {
   neutral: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-primary data-[checked]:bg-muted",
   standard: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-standard",
@@ -1689,7 +1279,9 @@ var SELECTION_CARD_CHECKED = {
   info: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-info",
   warning: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-warning"
 };
-var CHECK_BOX = "flex size-4.5 shrink-0 items-center justify-center rounded-xs border border-input bg-card motion-interactive";
+var CHECK_BOX = "flex size-4.5 shrink-0 items-center justify-center rounded-xs border border-control-border bg-card motion-interactive";
+var RADIO_RING = "relative inline-flex size-4.5 shrink-0 rounded-full border border-control-border bg-card motion-interactive";
+var RADIO_DOT = "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full motion-interactive ease-spring data-[starting-style]:scale-0 data-[ending-style]:scale-0";
 var CHECK_MARK_SIZE = "text-[length:--spacing(2.75)]";
 function CheckboxMark({ className }) {
   return /* @__PURE__ */ jsx(
@@ -1703,7 +1295,7 @@ function CheckboxMark({ className }) {
         Icon,
         {
           name: state.indeterminate ? "minus" : "check",
-          className: CHECK_MARK_SIZE
+          className: cn(CHECK_MARK_SIZE, "[&_path]:stroke-current [&_path]:[stroke-width:2] [&_path]:[stroke-linejoin:round] [&_path]:[stroke-linecap:round]")
         }
       ) })
     }
@@ -1720,7 +1312,9 @@ function Checkbox({ className, children, ...props }) {
         "data-[checked]:border-primary data-[checked]:bg-primary",
         "data-[indeterminate]:border-primary data-[indeterminate]:bg-primary",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Base UI renders the root as a <span>, which `:disabled` never matches —
+        // the state is the data attribute, as on Switch.
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
         className
       ),
       ...props,
@@ -1854,264 +1448,6 @@ var checkboxMeta = {
     }
   ]
 };
-var Tabs = Tabs$1.Root;
-var TabsVariantContext = createContext("underline");
-function TabsList({ className, variant = "underline", ...props }) {
-  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
-    Tabs$1.List,
-    {
-      "data-variant": variant,
-      className: cn(
-        variant === "underline" ? "inline-flex items-center gap-1 border-b border-border" : "inline-flex items-center gap-1",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function TabsTrigger({ className, children, ...props }) {
-  const variant = useContext(TabsVariantContext);
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Tab,
-    {
-      className: cn(
-        "cursor-pointer text-label-lg text-muted-foreground motion-interactive hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        variant === "underline" ? "-mb-px border-b-2 border-transparent px-3 py-2 data-[active]:border-foreground" : "inline-flex h-(--control-sm) items-center rounded-sm px-3 data-[active]:bg-muted",
-        className
-      ),
-      ...props,
-      children: variant === "pill" && typeof children !== "function" ? trimLabel(children) : children
-    }
-  );
-}
-function TabsPanel({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Panel,
-    {
-      className: cn(
-        "pt-4 text-foreground focus-visible:outline-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/tabs/tabs.meta.ts
-var tabsMeta = {
-  name: "Tabs",
-  summary: "Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers). Tabs (Root) + TabsList + TabsTrigger + TabsPanel.",
-  status: "stable",
-  keywords: [
-    "tabs",
-    "tablist",
-    "panels",
-    "segmented content"
-  ],
-  usage: {
-    description: "Use Tabs to switch between related panels within the same page context.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use tabs when each panel is peer content and users may compare or switch often."
-      },
-      {
-        guidance: "do",
-        description: "Keep tab labels short and make the active tab unmistakable."
-      },
-      {
-        guidance: "do",
-        description: 'Use variant="pill" for a short switcher inside a card or toolbar (Preview / Code, List / Grid); keep the default underline for sections of a page.'
-      },
-      {
-        guidance: "dont",
-        description: "Do not use Tabs for unrelated pages or primary navigation that needs distinct URLs."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use tabs for sequential steps. Tabs are peer views the user returns to in any order; a process with an order needs a stepper, or the user will skip ahead."
-      }
-    ],
-    anatomy: [
-      {
-        name: "TabsList",
-        required: true,
-        description: "The list of tab triggers."
-      },
-      {
-        name: "TabsTrigger",
-        required: true,
-        description: "One selectable tab."
-      },
-      {
-        name: "TabsPanel",
-        required: true,
-        description: "The content associated with a trigger."
-      },
-      {
-        name: "TabsContent",
-        required: false,
-        description: "Compatibility alias for panel content."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Accordion",
-      "BottomNav",
-      "SideNav"
-    ]
-  },
-  props: [
-    {
-      name: "Tabs (Root)",
-      type: "Base UI Tabs.Root props (value, defaultValue, onValueChange, orientation)",
-      default: "defaultValue: 0",
-      description: "Controls the active tab. Uncontrolled via defaultValue; controlled via value + onValueChange."
-    }
-  ],
-  subcomponents: [
-    {
-      name: "TabsList",
-      type: 'Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" | "pill" + className',
-      description: 'The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger. Triggers inherit the variant.'
-    },
-    {
-      name: "TabsTrigger",
-      type: "Base UI Tabs.Tab props (value, disabled) + className",
-      description: "A single tab button. value pairs it with the panel of the same value."
-    },
-    {
-      name: "TabsPanel",
-      type: "Base UI Tabs.Panel props (value, keepMounted) + className",
-      description: "The content shown when the matching trigger is active."
-    },
-    {
-      name: "TabsContent",
-      type: "Alias of TabsPanel",
-      description: "Re-export of TabsPanel for consumers that prefer this name."
-    }
-  ],
-  tokensUsed: ["border", "muted", "muted-foreground", "foreground", "ring"],
-  a11y: [
-    "Base UI provides the tablist/tab/tabpanel roles, aria-selected, and roving tabindex.",
-    "Arrow keys move between tabs; Home/End jump to first/last; panels are linked via aria-controls.",
-    "Active tab styling reads from the data-active attribute; disabled tabs from data-disabled. Disabled tabs are skipped by arrow-key navigation.",
-    "Keyboard focus shows a ring on the focused trigger in both variants; the panel remains focusable."
-  ],
-  examples: [
-    {
-      label: "Basic",
-      code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel><TabsPanel value="activity">Activity content</TabsPanel></Tabs>'
-    },
-    {
-      label: "Pill switcher",
-      code: '<Tabs defaultValue="preview"><TabsList variant="pill"><TabsTrigger value="preview">Preview</TabsTrigger><TabsTrigger value="code">Code</TabsTrigger></TabsList><TabsPanel value="preview">Rendered example</TabsPanel><TabsPanel value="code">Source</TabsPanel></Tabs>'
-    },
-    {
-      label: "With a disabled tab",
-      code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="holders" disabled>Holders</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>'
-    }
-  ]
-};
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("motion-shimmer rounded-md bg-muted", className),
-      ...props
-    }
-  );
-}
-Skeleton.displayName = "Skeleton";
-
-// src/components/skeleton/skeleton.meta.ts
-var skeletonMeta = {
-  name: "Skeleton",
-  summary: "Loading placeholder \u2014 a muted, shimmering block (rounded-md bg-muted motion-shimmer). Shape it with utility classes; rounded-full for circles.",
-  status: "stable",
-  keywords: [
-    "skeleton",
-    "loading",
-    "placeholder",
-    "pending"
-  ],
-  usage: {
-    description: "Use Skeleton to reserve space and hint at the shape of content while data is loading.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Match the approximate size and rhythm of the eventual content."
-      },
-      {
-        guidance: "do",
-        description: "Use it for content regions where layout stability matters during loading."
-      },
-      {
-        guidance: "dont",
-        description: "Do not leave Skeleton visible after an error or empty state; switch to EmptyState (tone='destructive' for an error)."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use a skeleton whose shape differs from the content that replaces it. A mismatched placeholder causes a visible jump, which is worse than a brief spinner."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Spinner",
-      "PageLoader"
-    ]
-  },
-  props: [
-    {
-      name: "...props",
-      type: 'ComponentPropsWithRef<"div">',
-      description: "All native div props plus className. Size and shape the placeholder with utilities (h-*, w-*, size-*, rounded-full)."
-    }
-  ],
-  tokensUsed: ["muted"],
-  motion: [
-    {
-      slot: "arrival",
-      recipe: "none",
-      part: "Root",
-      why: "A skeleton stands in for content that has not arrived; fading the placeholder in adds a wait before the wait."
-    },
-    {
-      slot: "response",
-      recipe: "none",
-      part: "Root",
-      why: "Nothing here is interactive. A skeleton that reacted to the pointer would invite a click on a thing that cannot be clicked."
-    },
-    {
-      slot: "transition",
-      recipe: "none",
-      part: "Root",
-      why: "The skeleton has one state. Swapping it for real content is the parent's job, and the parent decides whether that swap is animated."
-    },
-    {
-      slot: "activity",
-      recipe: "motion-shimmer",
-      part: "Root",
-      why: "The sweep is the entire point of the component: it is what separates 'still loading' from 'loaded, and empty'. A static grey block is indistinguishable from a broken layout, which is why users reload the page."
-    }
-  ],
-  a11y: [
-    "Purely presentational; the shimmer sweep is decorative, and it stops under reduced motion because motion-shimmer follows --motion-scale.",
-    'Mark the loading region with aria-busy="true" on a parent, and swap in real content (with the same layout) once loaded to avoid shift.'
-  ],
-  examples: [
-    {
-      label: "Shapes",
-      code: '<Skeleton className="h-4 w-40" /><Skeleton className="size-10 rounded-full" /><Skeleton className="h-40 w-full" />'
-    },
-    {
-      label: "Post-card composition",
-      code: '<div className="flex items-center gap-3"><Skeleton className="size-10 rounded-full" /><div className="space-y-2"><Skeleton className="h-3 w-32" /><Skeleton className="h-3 w-20" /></div></div>'
-    }
-  ]
-};
 
 // src/components/thinking-orb/thinking-orb.render.ts
 var ORB_PX = { sm: 20, md: 32, lg: 64 };
@@ -2784,485 +2120,115 @@ var glidingHighlightMeta = {
     }
   ]
 };
-var meterIndicatorVariants = cva(
-  "h-full rounded-full transition-[width,background-color] duration-(--motion-duration-slow) ease-decelerate",
+var stepperIndicatorVariants = cva(
+  "relative z-10 flex size-(--control-xs) shrink-0 items-center justify-center rounded-full border text-label-sm motion-interactive",
   {
     variants: {
-      tone: {
-        primary: "bg-primary",
-        standard: "bg-tone-standard",
-        success: "bg-success",
-        warning: "bg-tone-warning",
-        destructive: "bg-destructive"
+      status: {
+        complete: "border-primary bg-primary text-primary-foreground",
+        current: "border-2 border-primary bg-[var(--sable-surface-bg,var(--background))] text-primary",
+        upcoming: "border-border-strong bg-[var(--sable-surface-bg,var(--background))] text-muted-foreground",
+        error: "border-destructive bg-destructive text-destructive-foreground"
       }
     },
     defaultVariants: {
-      tone: "primary"
+      status: "upcoming"
     }
   }
 );
-var meterTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-secondary", {
-  variants: {
-    size: {
-      sm: "h-1.5",
-      md: "h-2",
-      lg: "h-3"
+var stepperDotVariants = cva(
+  "size-[0.75em] shrink-0 rounded-full motion-interactive",
+  {
+    variants: {
+      status: {
+        complete: "bg-primary",
+        current: "bg-[var(--sable-surface-bg,var(--background))] ring-[0.1875em] ring-primary ring-inset",
+        upcoming: "bg-border-strong",
+        error: "bg-destructive"
+      }
+    },
+    defaultVariants: {
+      status: "upcoming"
     }
-  },
-  defaultVariants: {
-    size: "md"
   }
-});
-var meterRingValueVariants = cva("absolute inset-0 flex items-center justify-center text-foreground", {
+);
+var stepperDotConnectorVariants = cva("shrink-0 rounded-full motion-interactive", {
   variants: {
-    size: {
-      sm: "text-label-xs",
-      md: "text-label-md",
-      lg: "text-title-sm"
+    orientation: {
+      horizontal: "mt-[calc(0.5lh_-_1px)] h-0.5 min-w-4 flex-1",
+      vertical: "absolute start-[0.375em] top-[0.5lh] -bottom-[0.5lh] w-0.5 -translate-x-1/2 rtl:translate-x-1/2"
+    },
+    filled: {
+      true: "bg-primary",
+      false: "bg-border-strong"
     }
   },
   defaultVariants: {
-    size: "md"
+    orientation: "horizontal",
+    filled: false
   }
 });
-var meterRingVariants = cva("relative inline-flex shrink-0", {
+var stepperConnectorVariants = cva("shrink-0 rounded-full motion-interactive", {
   variants: {
-    size: {
-      sm: "size-10",
-      md: "size-16",
-      lg: "size-24"
+    orientation: {
+      horizontal: "mt-[calc(var(--control-xs)/2)] h-px min-w-4 flex-1",
+      vertical: "absolute start-[calc(var(--control-xs)/2_-_0.5px)] top-[calc(var(--control-xs)_+_--spacing(1))] bottom-1 w-px"
+    },
+    filled: {
+      true: "bg-primary",
+      false: "bg-border-strong"
     }
   },
   defaultVariants: {
-    size: "md"
+    orientation: "horizontal",
+    filled: false
   }
 });
-var ToneContext = createContext("primary");
-var SizeContext = createContext(void 0);
-var RING_TONE_STROKE = {
-  primary: "var(--primary)",
-  standard: "var(--tone-standard)",
-  success: "var(--success)",
-  warning: "var(--tone-warning)",
-  destructive: "var(--destructive)"
+var DEFAULT_STATUS_LABELS = {
+  complete: "Completed",
+  current: "Current step",
+  upcoming: "Not started",
+  error: "Needs attention"
 };
-function MeterRing({
-  value,
-  min = 0,
-  max = 100,
-  strokeWidth,
-  showValue,
-  tone,
-  size
+var StepContext = createContext(null);
+function Stepper({
+  current = 0,
+  orientation = "horizontal",
+  indicator = "number",
+  statusLabels,
+  className,
+  children,
+  ...props
 }) {
-  const ratio = value == null || max === min ? 0 : Math.min(1, Math.max(0, (value - min) / (max - min)));
-  const radius = 50 - strokeWidth;
-  const circumference = 2 * Math.PI * radius;
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "size-full", "aria-hidden": "true", focusable: "false", children: [
-      /* @__PURE__ */ jsx("circle", { cx: 50, cy: 50, r: radius, fill: "none", strokeWidth, style: { stroke: "var(--secondary)" } }),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: 50,
-          cy: 50,
-          r: radius,
-          fill: "none",
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeDasharray: circumference,
-          strokeDashoffset: circumference * (1 - ratio),
-          transform: "rotate(-90 50 50)",
-          className: "transition-[stroke-dashoffset] duration-(--motion-duration-slow) ease-decelerate",
-          style: { stroke: RING_TONE_STROKE[tone] }
-        }
-      )
-    ] }),
-    showValue ? /* @__PURE__ */ jsx(MeterValue, { className: meterRingValueVariants({ size }) }) : null
-  ] });
-}
-function Meter({ className, children, tone = "primary", shape = "bar", size, strokeWidth = 6, showValue, ...props }) {
-  if (shape === "ring") {
-    return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(Meter$1.Root, { className: cn(meterRingVariants({ size }), className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterRing, { value: props.value ?? null, min: props.min, max: props.max, strokeWidth, showValue, tone, size }) }) });
-  }
-  return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(Meter$1.Root, { className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterTrack, {}) }) }) });
-}
-Meter.displayName = "Meter";
-function MeterTrack({ className, children, size, ...props }) {
-  const inherited = useContext(SizeContext);
+  const items = Children.toArray(children).filter(isValidElement);
+  const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
   return /* @__PURE__ */ jsx(
-    Meter$1.Track,
+    "ol",
     {
-      className: cn(meterTrackVariants({ size: size ?? inherited }), className),
+      "data-orientation": orientation,
+      className: cn(
+        // isolate: the indicators' z-10 (above the connector) stays inside the
+        // stepper instead of rising over sticky headers and nav bars.
+        "isolate flex w-full",
+        orientation === "horizontal" ? "flex-row items-start gap-3" : "flex-col",
+        className
+      ),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx(MeterIndicator, {})
-    }
-  );
-}
-MeterTrack.displayName = "MeterTrack";
-function MeterIndicator({ className, tone, ...props }) {
-  const inherited = useContext(ToneContext);
-  return /* @__PURE__ */ jsx(
-    Meter$1.Indicator,
-    {
-      className: cn(meterIndicatorVariants({ tone: tone ?? inherited }), className),
-      ...props
-    }
-  );
-}
-MeterIndicator.displayName = "MeterIndicator";
-function MeterLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Meter$1.Label,
-    {
-      className: cn("text-label-md text-foreground", className),
-      ...props
-    }
-  );
-}
-MeterLabel.displayName = "MeterLabel";
-function MeterValue({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Meter$1.Value,
-    {
-      className: cn("text-mono-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
-MeterValue.displayName = "MeterValue";
-
-// src/components/meter/meter.meta.ts
-var meterMeta = {
-  name: "Meter",
-  summary: "A role=meter reading over Base UI Meter, drawn as a bar or a ring \u2014 how full something is within a known range (storage, quota, strength), with a tone for good/caution/bad. Not task progress.",
-  status: "stable",
-  keywords: [
-    "meter",
-    "usage bar",
-    "storage",
-    "quota",
-    "capacity",
-    "limit",
-    "password strength",
-    "level"
-  ],
-  usage: {
-    description: "Use Meter to show a static measurement against a known maximum \u2014 storage used, seats taken, API quota, password strength. It is announced as a meter, not a progress bar, so a screen-reader user hears a level rather than a task underway.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: 'Label it and show the reading in units people use ("7.2 of 10 GB"), with MeterLabel and MeterValue. The bar shows proportion; the number is what gets acted on.'
-      },
-      {
-        guidance: "do",
-        description: "Pick `tone` from thresholds you own and apply them consistently across the page \u2014 warning near the limit, destructive at or over it. The component does not guess where good becomes bad."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use Meter for a task in flight \u2014 an upload, an install, a step count. That is Progress; Meter tells assistive tech nothing is happening."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use it for a value without a meaningful maximum (followers, total spend). A bar implies a full scale; an unbounded count is a stat."
-      },
-      {
-        guidance: "do",
-        description: 'Use shape="ring" when the reading is a score that belongs in a small, glanceable spot on a card. It is the same measurement drawn as a circular gauge, not a different component.'
-      }
-    ],
-    anatomy: [
-      {
-        name: "MeterTrack",
-        required: true,
-        description: "The rail that represents the full range."
-      },
-      {
-        name: "MeterIndicator",
-        required: true,
-        description: "The fill, sized from value and coloured by tone."
-      },
-      {
-        name: "MeterLabel",
-        required: false,
-        description: "The visible name; also names the meter for assistive tech."
-      },
-      {
-        name: "MeterValue",
-        required: false,
-        description: "The formatted reading."
-      }
-    ]
-  },
-  related: {
-    components: ["Progress", "Badge"]
-  },
-  props: [
-    {
-      name: "value",
-      type: "number",
-      description: "The current reading, between min and max. Required."
-    },
-    {
-      name: "min",
-      type: "number",
-      default: "0",
-      description: "The bottom of the range."
-    },
-    {
-      name: "max",
-      type: "number",
-      default: "100",
-      description: "The top of the range."
-    },
-    {
-      name: "tone",
-      type: '"primary" | "standard" | "success" | "warning" | "destructive"',
-      default: '"primary"',
-      description: "Fill colour, mapped to a semantic token. Choose it from your own thresholds."
-    },
-    {
-      name: "shape",
-      type: '"bar" | "ring"',
-      default: '"bar"',
-      description: "bar is a horizontal track; ring is a circular gauge for a small, glanceable reading \u2014 the same value, min, max and tones."
-    },
-    {
-      name: "size",
-      type: '"sm" | "md" | "lg"',
-      default: '"md"',
-      description: "Ring diameter (40 / 64 / 96px at the default spacing; the centre value steps with it), or bar thickness on the same sm / md / lg rails as Progress."
-    },
-    {
-      name: "showValue",
-      type: "boolean",
-      description: "Print the value in the ring's centre (formatted like MeterValue)."
-    },
-    {
-      name: "strokeWidth",
-      type: "number",
-      default: "6",
-      description: "Ring stroke width, in viewBox units of 100."
-    },
-    {
-      name: "format",
-      type: "Intl.NumberFormatOptions",
-      description: "Formatting for MeterValue and aria-valuetext (percent, unit, currency)."
-    },
-    {
-      name: "getAriaValueText",
-      type: "(formatted: string, value: number) => string",
-      description: 'Human-readable reading for assistive tech ("7.2 of 10 gigabytes used").'
-    },
-    {
-      name: "locale",
-      type: "Intl.LocalesArgument",
-      description: "Locale for formatting. Defaults to the runtime locale."
-    }
-  ],
-  subcomponents: [
-    {
-      name: "MeterTrack",
-      type: "Base UI Track props + className + size",
-      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default."
-    },
-    {
-      name: "MeterIndicator",
-      type: "Base UI Indicator props + className + tone",
-      description: "The fill. Inherits the Meter's tone unless given its own."
-    },
-    {
-      name: "MeterLabel",
-      type: "Base UI Label props + className",
-      description: "Visible label; wires aria-labelledby on the root."
-    },
-    {
-      name: "MeterValue",
-      type: "Base UI Value props + className",
-      description: "Formatted reading. Accepts a `(formatted, value) => ReactNode` child."
-    }
-  ],
-  variants: {
-    tone: ["primary", "standard", "success", "warning", "destructive"],
-    shape: ["bar", "ring"],
-    size: ["sm", "md", "lg"]
-  },
-  tokensUsed: [
-    "secondary",
-    "primary",
-    "success",
-    "tone-warning",
-    "destructive",
-    "foreground",
-    "muted-foreground"
-  ],
-  motion: [
-    {
-      slot: "arrival",
-      recipe: "none",
-      part: "Meter",
-      why: "A meter is a reading, present with the page that reports it. Animating the fill up from zero on load would act out a change that did not happen."
-    },
-    {
-      slot: "response",
-      recipe: "none",
-      part: "Meter",
-      why: "It reports and accepts no input. A bar that reacted to the pointer would read as a Slider the user could drag."
-    },
-    {
-      slot: "transition",
-      recipe: "custom",
-      part: "MeterIndicator",
-      why: "Width and colour ease on the motion tokens (no recipe animates width) when the reading changes \u2014 freeing space after a delete visibly shrinks the bar, so the user sees the cause and effect rather than a different bar."
-    },
-    {
-      slot: "activity",
-      recipe: "none",
-      part: "Meter",
-      why: "A meter has no indeterminate state; a reading is either known or not shown. Unknown-but-working is Progress with no value."
-    }
-  ],
-  a11y: [
-    "Base UI renders role=meter with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext \u2014 distinct from Progress's role=progressbar.",
-    "Name it with MeterLabel or aria-label; an unnamed meter is announced as a bare number.",
-    'Tone is colour only. Say the state in text too ("Almost full") when it matters, and use getAriaValueText to give units.'
-  ],
-  examples: [
-    {
-      label: "Ring",
-      code: '<Meter shape="ring" value={72} showValue aria-label="Storage used" />'
-    },
-    {
-      label: "Bare",
-      code: '<Meter value={64} aria-label="Storage used" />'
-    },
-    {
-      label: "Storage with label and reading",
-      code: `<Meter value={7.2} max={10} tone="warning" getAriaValueText={(_, v) => \`\${v} of 10 gigabytes used\`}>
-	<div className="mb-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
-		<MeterLabel>Storage</MeterLabel>
-		<MeterValue>{(_, value) => \`\${value} of 10 GB\`}</MeterValue>
-	</div>
-	<MeterTrack />
-</Meter>`
-    },
-    {
-      label: "Tones",
-      code: `<div className="flex flex-col gap-3">
-	<Meter value={30} tone="success" aria-label="Seats used" />
-	<Meter value={82} tone="warning" aria-label="API quota used" />
-	<Meter value={100} tone="destructive" aria-label="Storage used" />
-</div>`
-    }
-  ]
-};
-var stepperIndicatorVariants = cva(
-  "relative z-10 flex size-(--control-xs) shrink-0 items-center justify-center rounded-full border text-label-sm motion-interactive",
-  {
-    variants: {
-      status: {
-        complete: "border-primary bg-primary text-primary-foreground",
-        current: "border-2 border-primary bg-[var(--sable-surface-bg,var(--background))] text-primary",
-        upcoming: "border-border-strong bg-[var(--sable-surface-bg,var(--background))] text-muted-foreground",
-        error: "border-destructive bg-destructive text-destructive-foreground"
-      }
-    },
-    defaultVariants: {
-      status: "upcoming"
-    }
-  }
-);
-var stepperDotVariants = cva(
-  "size-[0.75em] shrink-0 rounded-full motion-interactive",
-  {
-    variants: {
-      status: {
-        complete: "bg-primary",
-        current: "bg-[var(--sable-surface-bg,var(--background))] ring-[0.1875em] ring-primary ring-inset",
-        upcoming: "bg-border-strong",
-        error: "bg-destructive"
-      }
-    },
-    defaultVariants: {
-      status: "upcoming"
-    }
-  }
-);
-var stepperDotConnectorVariants = cva("shrink-0 rounded-full motion-interactive", {
-  variants: {
-    orientation: {
-      horizontal: "mt-[calc(0.5lh_-_1px)] h-0.5 min-w-4 flex-1",
-      vertical: "absolute start-[0.375em] top-[0.5lh] -bottom-[0.5lh] w-0.5 -translate-x-1/2 rtl:translate-x-1/2"
-    },
-    filled: {
-      true: "bg-primary",
-      false: "bg-border-strong"
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-    filled: false
-  }
-});
-var stepperConnectorVariants = cva("shrink-0 rounded-full motion-interactive", {
-  variants: {
-    orientation: {
-      horizontal: "mt-[calc(var(--control-xs)/2)] h-px min-w-4 flex-1",
-      vertical: "absolute start-[calc(var(--control-xs)/2_-_0.5px)] top-[calc(var(--control-xs)_+_--spacing(1))] bottom-1 w-px"
-    },
-    filled: {
-      true: "bg-primary",
-      false: "bg-border-strong"
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-    filled: false
-  }
-});
-var DEFAULT_STATUS_LABELS = {
-  complete: "Completed",
-  current: "Current step",
-  upcoming: "Not started",
-  error: "Needs attention"
-};
-var StepContext = createContext(null);
-function Stepper({
-  current = 0,
-  orientation = "horizontal",
-  indicator = "number",
-  statusLabels,
-  className,
-  children,
-  ...props
-}) {
-  const items = Children.toArray(children).filter(isValidElement);
-  const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
-  return /* @__PURE__ */ jsx(
-    "ol",
-    {
-      "data-orientation": orientation,
-      className: cn(
-        "flex w-full",
-        orientation === "horizontal" ? "flex-row items-start gap-3" : "flex-col",
-        className
-      ),
-      ...props,
-      children: items.map((child, index) => /* @__PURE__ */ jsx(
-        StepContext.Provider,
-        {
-          value: {
-            index,
-            count: items.length,
-            current,
-            orientation,
-            indicator,
-            statusLabels: labels
-          },
-          children: child
-        },
-        child.key ?? index
-      ))
+      children: items.map((child, index) => /* @__PURE__ */ jsx(
+        StepContext.Provider,
+        {
+          value: {
+            index,
+            count: items.length,
+            current,
+            orientation,
+            indicator,
+            statusLabels: labels
+          },
+          children: child
+        },
+        child.key ?? index
+      ))
     }
   );
 }
@@ -3588,471 +2554,133 @@ function ToggleGroup({ className, appearance = "default", ...props }) {
       ...props,
       "aria-orientation": props.role === "toolbar" ? props.orientation ?? "horizontal" : void 0
     }
-  ) });
-}
-ToggleGroup.displayName = "ToggleGroup";
-
-// src/components/toggle/toggle.meta.ts
-var toggleMeta = {
-  name: "Toggle",
-  summary: "Pressed-state button over Base UI Toggle, plus ToggleGroup for shared single- or multi-select rows. Pressed styling reads from data-[pressed].",
-  status: "stable",
-  keywords: [
-    "toggle",
-    "pressed",
-    "button state",
-    "toolbar",
-    "segmented control",
-    "segmented",
-    "toggle group",
-    "button group",
-    "view switcher"
-  ],
-  usage: {
-    description: "Use Toggle for button-like controls that can be pressed on or off within a toolbar or compact control set.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use it for transient UI modes such as bold, preview, pin, or favorite."
-      },
-      {
-        guidance: "do",
-        description: "Make the pressed state visually and programmatically clear."
-      },
-      {
-        guidance: "do",
-        description: 'Use ToggleGroup appearance="segmented" for a single-select view switch (List / Grid). It is the same capsule ThemeSwitcher wears \u2014 do not hand-build a track around a row of toggles.'
-      },
-      {
-        guidance: "dont",
-        description: "Do not use Toggle for persistent application settings; use Switch."
-      },
-      {
-        guidance: "dont",
-        description: 'Do not leave an icon-only Toggle without an accessible name. It announces as "button, pressed", which tells a screen-reader user the state but never what the state applies to.'
-      }
-    ],
-    anatomy: [
-      {
-        name: "Toggle",
-        required: true,
-        description: "A single pressed or unpressed control."
-      },
-      {
-        name: "ToggleGroup",
-        required: false,
-        description: "A coordinated group of toggle choices."
-      },
-      {
-        name: "ToggleGroupItem",
-        required: false,
-        description: 'One toggle inside a group \u2014 an alias of Toggle, so <Toggle value="\u2026"> inside a ToggleGroup is the same thing.'
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Switch",
-      "Button",
-      "Tabs"
-    ]
-  },
-  props: [
-    {
-      name: "appearance",
-      type: '"default" | "segmented"',
-      default: '"default"',
-      description: "On ToggleGroup: `default` is a loose row of toggles; `segmented` draws the capsule segmented control (one track, the pressed option filled) shared with ThemeSwitcher. Toggles inside inherit it."
-    },
-    {
-      name: "multiple",
-      type: "boolean",
-      default: "false",
-      description: "On ToggleGroup: allow several toggles pressed at once. The default is single-select, which behaves like a radio group."
-    },
-    {
-      name: "Toggle",
-      type: "Base UI Toggle props (pressed, defaultPressed, onPressedChange, disabled, value) + className",
-      default: "defaultPressed: false",
-      description: "A two-state button. Uncontrolled via defaultPressed; controlled via pressed + onPressedChange. Pass value to identify it inside a ToggleGroup."
-    }
-  ],
-  subcomponents: [
-    {
-      name: "ToggleGroup",
-      type: 'Base UI ToggleGroup props (value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus) + appearance?: "default" | "segmented" + className',
-      description: "Groups child Toggles and shares pressed state across them \u2014 each Toggle inside carries a value. Defaults to multiple: false (single-select) \u2014 the fit for view-mode switches and segmented controls; pass multiple to allow several pressed at once, e.g. a row of formatting toggles."
-    },
-    {
-      name: "ToggleGroupItem",
-      type: "Alias of Toggle",
-      description: "Re-export of Toggle for group composition \u2014 a Toggle carrying a value is the group item."
-    }
-  ],
-  variants: {
-    appearance: ["default", "segmented"]
-  },
-  tokensUsed: ["muted-foreground", "foreground", "accent", "accent-foreground", "card", "border", "ring"],
-  a11y: [
-    "Base UI sets aria-pressed on each Toggle and manages the pressed/disabled states.",
-    "ToggleGroup provides arrow-key roving focus across its items; loopFocus wraps at the ends.",
-    "Pressed styling reads from the data-[pressed] attribute; disabled items are dimmed and non-interactive.",
-    "Always supply an aria-label (or visible text) when a Toggle holds only an icon."
-  ],
-  examples: [
-    {
-      label: "Standalone",
-      code: '<Toggle aria-label="Mute">Mute</Toggle>'
-    },
-    {
-      label: "Single-select group",
-      code: '<ToggleGroup defaultValue={["list"]}><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
-    },
-    {
-      label: "Segmented view switch",
-      code: '<ToggleGroup appearance="segmented" defaultValue={["list"]} aria-label="View"><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
-    },
-    {
-      label: "Multi-select group",
-      code: '<ToggleGroup multiple defaultValue={["bold"]}><Toggle value="bold">Bold</Toggle><Toggle value="italic">Italic</Toggle></ToggleGroup>'
-    }
-  ]
-};
-var toolbarVariants = cva(
-  "inline-flex items-center gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
-);
-var toolbarGroupVariants = cva(
-  "inline-flex items-center gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
-);
-var toolbarSeparatorVariants = cva(
-  "shrink-0 self-stretch bg-hairline-strong data-[orientation=vertical]:mx-1 data-[orientation=vertical]:my-1.5 data-[orientation=vertical]:w-px data-[orientation=horizontal]:mx-1.5 data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px"
-);
-function Toolbar({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Toolbar$1.Root, { className: cn(toolbarVariants(), className), ...props });
-}
-Toolbar.displayName = "Toolbar";
-function ToolbarButton({
-  variant = "ghost",
-  size = "sm",
-  className,
-  children,
-  ...props
-}) {
-  const tier = useTypeTier();
-  return /* @__PURE__ */ jsx(
-    Toolbar$1.Button,
-    {
-      className: cn(buttonVariants({ variant, size }), tier.action, className),
-      ...props,
-      children: trimLabel(children)
-    }
-  );
-}
-ToolbarButton.displayName = "ToolbarButton";
-function ToolbarLink({
-  variant = "ghost",
-  size = "sm",
-  className,
-  children,
-  ...props
-}) {
-  const tier = useTypeTier();
-  return /* @__PURE__ */ jsx(
-    Toolbar$1.Link,
-    {
-      className: cn(buttonVariants({ variant, size }), tier.action, className),
-      ...props,
-      children: trimLabel(children)
-    }
-  );
-}
-ToolbarLink.displayName = "ToolbarLink";
-function ToolbarInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Toolbar$1.Input,
-    {
-      render: /* @__PURE__ */ jsx(Input, {}),
-      className: cn("h-(--control-sm) w-40", className),
-      ...props
-    }
-  );
-}
-ToolbarInput.displayName = "ToolbarInput";
-function ToolbarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Toolbar$1.Group, { className: cn(toolbarGroupVariants(), className), ...props });
-}
-ToolbarGroup.displayName = "ToolbarGroup";
-function ToolbarSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Toolbar$1.Separator, { className: cn(toolbarSeparatorVariants(), className), ...props });
+  ) });
 }
-ToolbarSeparator.displayName = "ToolbarSeparator";
+ToggleGroup.displayName = "ToggleGroup";
 
-// src/components/toolbar/toolbar.meta.ts
-var toolbarMeta = {
-  name: "Toolbar",
-  summary: `A row or column of controls that is one tab stop, with arrow-key movement between its items (role="toolbar"), over Base UI Toolbar. Items reuse Button's ghost variants and Input, so they follow density like every other control.`,
+// src/components/toggle/toggle.meta.ts
+var toggleMeta = {
+  name: "Toggle",
+  summary: "Pressed-state button over Base UI Toggle, plus ToggleGroup for shared single- or multi-select rows. Pressed styling reads from data-[pressed].",
   status: "stable",
   keywords: [
+    "toggle",
+    "pressed",
+    "button state",
     "toolbar",
-    "action bar",
-    "button row",
-    "icon buttons",
-    "formatting bar",
-    "roving focus",
-    "arrow keys",
-    "tool chrome",
-    "editor toolbar"
+    "segmented control",
+    "segmented",
+    "toggle group",
+    "button group",
+    "view switcher"
   ],
   usage: {
-    description: "Use Toolbar when three or more related controls sit together and act on the same thing \u2014 a text selection, a canvas, a document, a table. Tab lands on the toolbar once and the arrow keys move along it, so a keyboard user crosses an editor's twelve buttons in one keystroke instead of twelve. It works in both registers: ghost sm buttons on a page, compact icon-xs buttons inside a Workspace.",
+    description: "Use Toggle for button-like controls that can be pressed on or off within a toolbar or compact control set.",
     bestPractices: [
       {
         guidance: "do",
-        description: 'Give every Toolbar an aria-label that names what it acts on ("Text formatting", "Canvas"). With more than one toolbar on screen, that label is the only way a screen-reader user tells them apart.'
-      },
-      {
-        guidance: "do",
-        description: 'Use size="icon-sm" (page) or size="icon-xs" (workspace) with an aria-label for icon-only ToolbarButtons, and keep one size across the row so the controls line up.'
+        description: "Use it for transient UI modes such as bold, preview, pin, or favorite."
       },
       {
         guidance: "do",
-        description: "Split a long row into ToolbarGroups with a ToolbarSeparator between them \u2014 undo/redo, text style, insert. Groups give the eye the same structure the arrow keys already cross."
+        description: "Make the pressed state visually and programmatically clear."
       },
       {
         guidance: "do",
-        description: `Compose triggers and toggles through ToolbarButton's render prop \u2014 render={<MenuTrigger />}, render={<PopoverTrigger />}, or render={<Toggle value="bold" />} inside a ToggleGroup \u2014 so they join the toolbar's arrow-key order.`
-      },
-      {
-        guidance: "dont",
-        description: "Put a bare Button, Toggle or Input inside a Toolbar. It renders, but it is not a toolbar item: the arrow keys skip it and it takes its own tab stop, which is the inconsistency Toolbar exists to remove. Use ToolbarButton, ToolbarInput, or render through ToolbarButton."
-      },
-      {
-        guidance: "dont",
-        description: "Wrap one or two buttons, or a dialog's Cancel/Confirm pair, in a Toolbar. Those are independent actions; arrow-key movement there is a surprise, not a shortcut. A plain row of Buttons is right."
+        description: 'Use ToggleGroup appearance="segmented" for a single-select view switch (List / Grid). It is the same capsule ThemeSwitcher wears \u2014 do not hand-build a track around a row of toggles.'
       },
       {
         guidance: "dont",
-        description: "Use Toolbar for navigation between pages or views. Links that go somewhere are Tabs, SideNav or Breadcrumbs; ToolbarLink is for the odd link that sits among actions, like Help."
+        description: "Do not use Toggle for persistent application settings; use Switch."
       },
       {
         guidance: "dont",
-        description: "Give toolbar buttons primary or destructive fills by default. A toolbar is a quiet strip of tools; the ghost default keeps it from competing with the page's one primary action."
+        description: 'Do not leave an icon-only Toggle without an accessible name. It announces as "button, pressed", which tells a screen-reader user the state but never what the state applies to.'
       }
     ],
     anatomy: [
       {
-        name: "Toolbar",
-        required: true,
-        description: 'The root (role="toolbar"). Owns orientation, loopFocus and disabled for everything inside it.'
-      },
-      {
-        name: "ToolbarButton",
+        name: "Toggle",
         required: true,
-        description: "An action. Button's ghost variants by default; `render` composes a menu trigger, popover trigger or Toggle into the toolbar."
-      },
-      {
-        name: "ToolbarGroup",
-        required: false,
-        description: "A run of related items. `disabled` disables the whole run."
-      },
-      {
-        name: "ToolbarSeparator",
-        required: false,
-        description: "A hairline between groups, oriented across the toolbar. Never a focus stop."
+        description: "A single pressed or unpressed control."
       },
       {
-        name: "ToolbarInput",
+        name: "ToggleGroup",
         required: false,
-        description: "A compact Input that joins the arrow-key order \u2014 a search or find field in the bar."
+        description: "A coordinated group of toggle choices."
       },
       {
-        name: "ToolbarLink",
+        name: "ToggleGroupItem",
         required: false,
-        description: "An <a> styled like a ToolbarButton, for a link that sits among the actions."
+        description: 'One toggle inside a group \u2014 an alias of Toggle, so <Toggle value="\u2026"> inside a ToggleGroup is the same thing.'
       }
     ]
   },
   related: {
     components: [
+      "Switch",
       "Button",
-      "Toggle",
-      "Menu",
-      "Popover",
-      "Tooltip",
-      "Workspace",
-      "PanelSection",
-      "Separator"
+      "Tabs"
     ]
   },
   props: [
     {
-      name: "orientation",
-      type: '"horizontal" | "vertical"',
-      default: '"horizontal"',
-      description: "Which arrow keys move focus (Left/Right or Up/Down) and which way the items stack. Separators turn to match."
-    },
-    {
-      name: "loopFocus",
-      type: "boolean",
-      default: "true",
-      description: "Arrowing past the last item wraps to the first, and back."
+      name: "appearance",
+      type: '"default" | "segmented"',
+      default: '"default"',
+      description: "On ToggleGroup: `default` is a loose row of toggles; `segmented` draws the capsule segmented control (one track, the pressed option filled) shared with ThemeSwitcher. Toggles inside inherit it."
     },
     {
-      name: "disabled",
+      name: "multiple",
       type: "boolean",
       default: "false",
-      description: "Disables every item. Items stay focusable (aria-disabled) so the row keeps its shape under the keyboard."
-    },
-    {
-      name: "aria-label",
-      type: "string",
-      description: "Names the toolbar for assistive technology. Always set it."
+      description: "On ToggleGroup: allow several toggles pressed at once. The default is single-select, which behaves like a radio group."
     },
     {
-      name: "className",
-      type: "string",
-      description: "Layout overrides \u2014 e.g. `flex-1` to let the toolbar fill a bar."
+      name: "Toggle",
+      type: "Base UI Toggle props (pressed, defaultPressed, onPressedChange, disabled, value) + className",
+      default: "defaultPressed: false",
+      description: "A two-state button. Uncontrolled via defaultPressed; controlled via pressed + onPressedChange. Pass value to identify it inside a ToggleGroup."
     }
   ],
   subcomponents: [
     {
-      name: "ToolbarButton",
-      type: '{ variant?: buttonVariants variant (default "ghost"); size?: buttonVariants size (default "sm"); disabled?: boolean; focusableWhenDisabled?: boolean (default true); render?: ReactElement } + Base UI Toolbar.Button props',
-      description: 'A toolbar action, styled exactly like <Button>. Disabled buttons stay focusable by default and carry aria-disabled. Pass size="icon-sm"/"icon-xs" plus aria-label for icon-only.'
-    },
-    {
-      name: "ToolbarLink",
-      type: '{ href?: string; variant?: buttonVariants variant (default "ghost"); size?: buttonVariants size (default "sm"); render?: ReactElement } + Base UI Toolbar.Link props',
-      description: "An <a> in the toolbar's arrow-key order, styled like a ToolbarButton."
-    },
-    {
-      name: "ToolbarInput",
-      type: "{ disabled?: boolean; focusableWhenDisabled?: boolean (default true) } + Base UI Toolbar.Input / native input props",
-      description: "Sable's Input at the sm control height (w-40 by default; override with className). Arrow keys leave the field so it does not trap the row."
-    },
-    {
-      name: "ToolbarGroup",
-      type: "{ disabled?: boolean } + Base UI Toolbar.Group props",
-      description: "Groups related items; `disabled` disables all of them."
+      name: "ToggleGroup",
+      type: 'Base UI ToggleGroup props (value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus) + appearance?: "default" | "segmented" + className',
+      description: "Groups child Toggles and shares pressed state across them \u2014 each Toggle inside carries a value. Defaults to multiple: false (single-select) \u2014 the fit for view-mode switches and segmented controls; pass multiple to allow several pressed at once, e.g. a row of formatting toggles."
     },
     {
-      name: "ToolbarSeparator",
-      type: "Base UI Toolbar.Separator props + className",
-      description: `A hairline-strong rule across the toolbar's axis, exposed as role="separator" and skipped by the arrow keys.`
+      name: "ToggleGroupItem",
+      type: "Alias of Toggle",
+      description: "Re-export of Toggle for group composition \u2014 a Toggle carrying a value is the group item."
     }
   ],
   variants: {
-    orientation: ["horizontal", "vertical"],
-    variant: ["ghost", "secondary", "outline", "primary", "destructive", "link"],
-    size: ["xs", "sm", "md", "icon", "icon-sm", "icon-xs"]
+    appearance: ["default", "segmented"]
   },
-  tokensUsed: ["foreground", "accent", "accent-foreground", "ring", "hairline-strong", "input", "card"],
-  motion: [
-    {
-      slot: "arrival",
-      recipe: "none",
-      part: "Toolbar",
-      why: "A toolbar is fixed chrome. It is present when its surface is; animating it in would leave the tools briefly unusable for no reason the user can see."
-    },
+  tokensUsed: ["muted-foreground", "foreground", "accent", "accent-foreground", "card", "border", "ring"],
+  a11y: [
+    "Base UI sets aria-pressed on each Toggle and manages the pressed/disabled states.",
+    "ToggleGroup provides arrow-key roving focus across its items; loopFocus wraps at the ends.",
+    "Pressed styling reads from the data-[pressed] attribute; disabled items are dimmed and non-interactive.",
+    "Always supply an aria-label (or visible text) when a Toggle holds only an icon."
+  ],
+  examples: [
     {
-      slot: "response",
-      recipe: "motion-interactive",
-      part: "ToolbarButton",
-      why: "Inherited from buttonVariants: hover fill, focus ring and disabled dim ease together, so the item under the arrow keys reads as the one that moved."
+      label: "Standalone",
+      code: '<Toggle aria-label="Mute">Mute</Toggle>'
     },
     {
-      slot: "response",
-      recipe: "motion-press",
-      part: "ToolbarButton",
-      why: "Inherited from buttonVariants. Many toolbar actions change something off to the side (the canvas, the selection), so the settle on press is the confirmation that lands where the pointer is."
+      label: "Single-select group",
+      code: '<ToggleGroup defaultValue={["list"]}><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
     },
     {
-      slot: "transition",
-      recipe: "none",
-      part: "Toolbar",
-      why: "The toolbar has no state of its own. Pressed state belongs to a Toggle rendered through ToolbarButton, which carries its own transition."
+      label: "Segmented view switch",
+      code: '<ToggleGroup appearance="segmented" defaultValue={["list"]} aria-label="View"><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
     },
     {
-      slot: "activity",
-      recipe: "none",
-      part: "Toolbar",
-      why: "A toolbar never works on its own. Pending work belongs to the surface the action targets, or to a Spinner in the button that started it."
-    }
-  ],
-  a11y: [
-    'Base UI renders role="toolbar" with aria-orientation, and a roving tabindex: the toolbar is one tab stop, the arrow keys move between items, Home/End jump to the ends.',
-    "Disabled items stay focusable by default and announce as disabled (aria-disabled), so arrowing along the row never silently skips a control. Set focusableWhenDisabled={false} on an item to opt out.",
-    `ToolbarSeparator is role="separator" with the orientation opposite the toolbar's, and is not a focus stop.`,
-    "ToolbarInput lets the arrow keys move the caret and only leaves the field at either end of its text.",
-    "Always set aria-label on the Toolbar, and on every icon-only ToolbarButton.",
-    "A Toggle rendered through ToolbarButton keeps aria-pressed; a MenuTrigger keeps aria-haspopup/aria-expanded."
-  ],
-  examples: [
-    {
-      label: "Formatting toolbar",
-      code: `<Toolbar aria-label="Text formatting">
-  <ToolbarGroup aria-label="History">
-    <ToolbarButton size="icon-sm" aria-label="Undo">
-      <Icon name="arrow-left" />
-    </ToolbarButton>
-    <ToolbarButton size="icon-sm" aria-label="Redo">
-      <Icon name="arrow-right" />
-    </ToolbarButton>
-  </ToolbarGroup>
-  <ToolbarSeparator />
-  <ToggleGroup multiple aria-label="Style">
-    <ToolbarButton size="icon-sm" aria-label="Bold" render={<Toggle value="bold" />}>
-      <Icon name="bold" />
-    </ToolbarButton>
-    <ToolbarButton size="icon-sm" aria-label="Italic" render={<Toggle value="italic" />}>
-      <Icon name="italic" />
-    </ToolbarButton>
-  </ToggleGroup>
-  <ToolbarSeparator />
-  <ToolbarLink href="/help">Help</ToolbarLink>
-</Toolbar>`
-    },
-    {
-      label: "With a menu trigger and a search field",
-      code: `<Toolbar aria-label="Table">
-  <ToolbarButton>Export</ToolbarButton>
-  <Menu>
-    <ToolbarButton render={<MenuTrigger />}>View</ToolbarButton>
-    <MenuContent>
-      <MenuItem>Compact rows</MenuItem>
-      <MenuItem>Comfortable rows</MenuItem>
-    </MenuContent>
-  </Menu>
-  <ToolbarSeparator />
-  <ToolbarInput aria-label="Search rows" placeholder="Search" />
-</Toolbar>`
-    },
-    {
-      label: "Vertical tool rail",
-      code: `<Toolbar orientation="vertical" aria-label="Tools">
-  <ToolbarButton size="icon-sm" aria-label="Select">
-    <Icon name="arrow-up" />
-  </ToolbarButton>
-  <ToolbarButton size="icon-sm" aria-label="Draw">
-    <Icon name="edit" />
-  </ToolbarButton>
-  <ToolbarSeparator />
-  <ToolbarButton size="icon-sm" aria-label="Delete" disabled>
-    <Icon name="trash" />
-  </ToolbarButton>
-</Toolbar>`
-    },
-    {
-      label: "In a workspace bar",
-      code: `<WorkspaceBar>
-  <Toolbar aria-label="Document" className="flex-1">
-    <ToolbarButton size="xs">File</ToolbarButton>
-    <ToolbarButton size="xs">Edit</ToolbarButton>
-    <ToolbarButton size="icon-xs" aria-label="Share" className="ms-auto">
-      <Icon name="share" />
-    </ToolbarButton>
-  </Toolbar>
-</WorkspaceBar>`
+      label: "Multi-select group",
+      code: '<ToggleGroup multiple defaultValue={["bold"]}><Toggle value="bold">Bold</Toggle><Toggle value="italic">Italic</Toggle></ToggleGroup>'
     }
   ]
 };
@@ -4073,14 +2701,14 @@ function Radio({ className, ...props }) {
       render: /* @__PURE__ */ jsx("button", { type: "button" }),
       nativeButton: true,
       className: cn(
-        "relative inline-flex size-[18px] shrink-0 rounded-full border border-input bg-card motion-interactive",
+        RADIO_RING,
         "data-[checked]:border-primary",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(Radio$1.Indicator, { className: "absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary data-[starting-style]:scale-0 data-[ending-style]:scale-0 motion-interactive ease-spring" })
+      children: /* @__PURE__ */ jsx(Radio$1.Indicator, { className: cn(RADIO_DOT, "bg-primary") })
     }
   );
 }
@@ -4449,7 +3077,7 @@ function SheetContent({
   const popupRef = useRef(null);
   const mergedRef = useMemo(() => mergeRefs(popupRef, ref), [ref]);
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(Drawer.Backdrop, { className: "fixed inset-0 z-(--z-overlay) bg-overlay/50 opacity-[calc(1_-_var(--drawer-swipe-progress))] motion-fade data-[swiping]:transition-none" }),
+    /* @__PURE__ */ jsx(Drawer.Backdrop, { className: "fixed inset-0 z-(--z-overlay) bg-overlay/(--scrim-alpha) opacity-[calc(1_-_var(--drawer-swipe-progress))] motion-fade data-[swiping]:transition-none" }),
     /* @__PURE__ */ jsx(Drawer.Viewport, { className: "fixed inset-0 z-(--z-overlay)", children: /* @__PURE__ */ jsx(
       Drawer.Popup,
       {
@@ -4683,261 +3311,69 @@ var pillMeta = {
     ]
   },
   related: {
-    components: [
-      "Badge",
-      "ToggleGroup"
-    ]
-  },
-  props: [
-    {
-      name: "selected",
-      type: "boolean",
-      default: "false",
-      description: "Marks the pill as chosen. Solid lifts onto the primary surface; outline takes a primary tint and soft primary edge. Sets aria-pressed."
-    },
-    {
-      name: "appearance",
-      type: '"solid" | "outline"',
-      default: '"solid"',
-      description: "solid for a filter row; outline for quiet chips that annotate other content (a reaction under a message, a tag on a card), where a filled chip would compete with what it annotates."
-    },
-    {
-      name: "size",
-      type: '"md" | "sm"',
-      default: '"md"',
-      description: "sm sits on the density ladder's xs control height, for chips under or inside other content."
-    },
-    {
-      name: "icon",
-      type: "ReactNode",
-      description: 'Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap.'
-    }
-  ],
-  variants: {
-    appearance: ["solid", "outline"],
-    size: ["md", "sm"],
-    selected: ["true", "false"]
-  },
-  tokensUsed: [
-    "secondary",
-    "secondary-foreground",
-    "accent",
-    "accent-foreground",
-    "primary",
-    "primary-foreground",
-    "card",
-    "border",
-    "muted-foreground",
-    "foreground"
-  ],
-  a11y: [
-    'Renders a native <button type="button"> for focus and keyboard activation.',
-    "Selected state is exposed via aria-pressed."
-  ],
-  examples: [
-    {
-      label: "Filter row",
-      code: "<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Editions</Pill><Pill onClick={() => {}}>Collectibles</Pill></Row>"
-    },
-    {
-      label: "Outline, small (reactions)",
-      code: '<Row gap={1}><Pill appearance="outline" size="sm" selected onClick={() => {}}>\u{1F389} 3</Pill><Pill appearance="outline" size="sm" onClick={() => {}}>\u{1F440}</Pill></Row>'
-    },
-    {
-      label: "With icon",
-      code: '<Pill icon={<Icon name="lock" />} onClick={() => {}}>Locked</Pill>'
-    }
-  ]
-};
-var notificationDotVariants = cva("inline-block rounded-full", {
-  variants: {
-    tone: {
-      destructive: "bg-destructive",
-      primary: "bg-primary",
-      neutral: "bg-secondary-foreground"
-    },
-    size: {
-      sm: "size-1.5",
-      md: "size-2",
-      lg: "size-2.5"
-    },
-    // A dot is small enough to sit inside the corner; a count straddles it.
-    overlay: {
-      true: "absolute end-1 top-1",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    tone: "destructive",
-    size: "md",
-    overlay: false
-  }
-});
-var notificationCountVariants = cva(
-  "inline-flex items-center justify-center rounded-full px-1 text-label-xs",
-  {
-    variants: {
-      tone: {
-        destructive: "bg-destructive text-destructive-foreground",
-        primary: "bg-primary text-primary-foreground",
-        neutral: "bg-secondary text-secondary-foreground"
-      },
-      size: {
-        sm: "h-4 min-w-4",
-        md: "h-4.5 min-w-4.5",
-        lg: "h-5 min-w-5"
-      },
-      overlay: {
-        true: "absolute -end-0.5 -top-0.5",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      tone: "destructive",
-      size: "md",
-      overlay: false
-    }
-  }
-);
-function NotificationBadge({
-  dot,
-  count: count2,
-  max = 99,
-  tone,
-  size,
-  overlay = false,
-  className,
-  ...props
-}) {
-  if (dot) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-slot": "notification-badge",
-        "aria-hidden": true,
-        className: cn(notificationDotVariants({ tone, size, overlay }), className),
-        ...props
-      }
-    );
-  }
-  if (count2 === void 0 || count2 <= 0) {
-    return null;
-  }
-  const label = count2 > max ? `${max}+` : String(count2);
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "notification-badge",
-      "aria-hidden": true,
-      className: cn(notificationCountVariants({ tone, size, overlay }), className),
-      ...props,
-      children: trimLabel(label)
-    }
-  );
-}
-NotificationBadge.displayName = "NotificationBadge";
-
-// src/components/notification-badge/notification-badge.meta.ts
-var notificationBadgeMeta = {
-  name: "NotificationBadge",
-  summary: `An unread indicator. Renders a bare dot or a count pill (capped as "{max}+"), or nothing when there's nothing to show. overlay pins it to the corner of a relative host; it is aria-hidden, so the host's name carries the count.`,
-  status: "stable",
-  keywords: [
-    "notification",
-    "badge",
-    "count",
-    "unread"
-  ],
-  usage: {
-    description: "Use NotificationBadge to show a compact unread count, alert count, or attention marker.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Place it on or near the item that owns the notifications."
-      },
-      {
-        guidance: "do",
-        description: "Use compact counts and cap large numbers when exact precision is not useful."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use NotificationBadge as a standalone status label or category marker."
-      },
-      {
-        guidance: "dont",
-        description: 'Do not show a bare dot when the count is meaningful. A dot says "something"; if the user can act on "how many", show the number.'
-      },
-      {
-        guidance: "dont",
-        description: "Do not put a neutral badge on a secondary host. Both are the secondary surface, so the badge disappears; use primary or destructive there."
-      }
-    ]
-  },
-  related: {
-    components: ["Badge", "StatusDot"]
+    components: [
+      "Badge",
+      "ToggleGroup"
+    ]
   },
   props: [
     {
-      name: "dot",
+      name: "selected",
       type: "boolean",
       default: "false",
-      description: "Render a bare dot indicator with no number. Takes precedence over count."
-    },
-    {
-      name: "count",
-      type: "number",
-      description: "Unread count. Renders nothing when <= 0 and dot is unset."
-    },
-    {
-      name: "max",
-      type: "number",
-      default: "99",
-      description: 'Cap before showing "{max}+".'
+      description: "Marks the pill as chosen. Solid lifts onto the primary surface; outline takes a primary tint and soft primary edge. Sets aria-pressed."
     },
     {
-      name: "tone",
-      type: '"destructive" | "primary" | "neutral"',
-      default: '"destructive"',
-      description: "Fill color. destructive for alarming counts; primary/neutral for non-alarming ones."
+      name: "appearance",
+      type: '"solid" | "outline"',
+      default: '"solid"',
+      description: "solid for a filter row; outline for quiet chips that annotate other content (a reaction under a message, a tag on a card), where a filled chip would compete with what it annotates."
     },
     {
       name: "size",
-      type: '"sm" | "md" | "lg"',
+      type: '"md" | "sm"',
       default: '"md"',
-      description: "Scales the dot/pill on the spacing scale (count pill: sm 16px, md 18px, lg 20px at the default density)."
+      description: "md sits on the density ladder's xs control height (28px); sm is 24px, for chips under or inside other content."
     },
     {
-      name: "overlay",
-      type: "boolean",
-      default: "false",
-      description: "Pin to the top-end corner of the nearest relative host (an icon button) \u2014 one placement for every caller instead of hand-tuned absolute offsets."
+      name: "icon",
+      type: "ReactNode",
+      description: 'Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap.'
     }
   ],
   variants: {
-    tone: ["destructive", "primary", "neutral"],
-    size: ["sm", "md", "lg"],
-    overlay: ["true", "false"]
+    appearance: ["solid", "outline"],
+    size: ["md", "sm"],
+    selected: ["true", "false"]
   },
   tokensUsed: [
-    "destructive",
-    "destructive-foreground",
+    "secondary",
+    "secondary-foreground",
+    "accent",
+    "accent-foreground",
     "primary",
     "primary-foreground",
-    "secondary",
-    "secondary-foreground"
+    "card",
+    "border",
+    "muted-foreground",
+    "foreground"
   ],
   a11y: [
-    'The badge is aria-hidden: a count rendered on a control is not associated with it, so the host needs an accessible name that includes the count \u2014 "Notifications, 3 unread" \u2014 or a screen-reader user hears "Notifications, button" and never learns there is anything new. Pass aria-hidden={false} only for a standalone badge whose number is the information.',
-    "A dot carries no number and no words: on its own it tells a sighted user only that something changed, and tells everyone else nothing. Pair it with a label that says what is new, and never make its colour the only difference between two states."
+    'Renders a native <button type="button"> for focus and keyboard activation.',
+    "Selected state is exposed via aria-pressed."
   ],
   examples: [
     {
-      label: "Dot + counts",
-      code: "<Row gap={3}><NotificationBadge dot /><NotificationBadge count={3} /><NotificationBadge count={128} /></Row>"
+      label: "Filter row",
+      code: "<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Editions</Pill><Pill onClick={() => {}}>Collectibles</Pill></Row>"
+    },
+    {
+      label: "Outline, small (reactions)",
+      code: '<Row gap={1}><Pill appearance="outline" size="sm" selected onClick={() => {}}>\u{1F389} 3</Pill><Pill appearance="outline" size="sm" onClick={() => {}}>\u{1F440}</Pill></Row>'
     },
     {
-      label: "Overlay on an icon button",
-      code: '<Button variant="secondary" size="icon" aria-label="Notifications, 5 unread" className="relative"><Icon name="bell" /><NotificationBadge count={5} overlay /></Button>'
+      label: "With icon",
+      code: '<Pill icon={<Icon name="lock" />} onClick={() => {}}>Locked</Pill>'
     }
   ]
 };
@@ -5004,7 +3440,9 @@ function Calendar({
         // Today is a dot under the number, in the button's own ink — never a
         // ring, which is what keyboard focus draws and would be mistaken for it.
         today: "[&>button]:relative [&>button]:after:absolute [&>button]:after:bottom-1 [&>button]:after:size-1 [&>button]:after:rounded-full [&>button]:after:bg-current",
-        outside: "[&>button]:text-muted-foreground [&>button]:opacity-50",
+        // Muted ink alone (4.5:1+): these are live, clickable days. At 50%
+        // opacity they measured 2.2:1 and looked exactly like `disabled`.
+        outside: "[&>button]:text-muted-foreground",
         disabled: "[&>button]:pointer-events-none [&>button]:text-muted-foreground [&>button]:opacity-50",
         hidden: "invisible",
         ...classNames
@@ -5192,6 +3630,8 @@ function DatePicker(props) {
     "aria-required": ariaRequired
   } = props;
   const timeLabelId = useId();
+  const tier = useTypeTier();
+  const density = useDensity();
   const [open, setOpen] = useState(false);
   const [uncontrolled, setUncontrolled] = useState(defaultValue);
   const controlled = "value" in props;
@@ -5255,7 +3695,11 @@ function DatePicker(props) {
               "aria-required": ariaRequired,
               disabled,
               className: cn(
-                "inline-flex h-(--control-md) items-center gap-2 ps-3 pe-3 text-start text-body-md text-foreground",
+                "inline-flex h-(--control-md) items-center gap-2 ps-3 pe-3 text-start text-foreground",
+                // Select's type: the density tier, plus the 16px phone tier
+                // its form-row neighbours take (lib/field-shell).
+                tier.body,
+                density === "comfortable" && MOBILE_FIELD_TIER,
                 FIELD_SHELL,
                 FIELD_INVALID,
                 className
@@ -5485,6 +3929,15 @@ var POSITION = {
   "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
   "bottom-right": "bottom-4 right-4 items-end"
 };
+var ENTER_MOTION = {
+  "top-left": "motion-slide-right",
+  "top-center": "motion-slide-down",
+  "top-right": "motion-slide-left",
+  "bottom-left": "motion-slide-right",
+  "bottom-center": "motion-slide-up",
+  "bottom-right": "motion-slide-left"
+};
+var ToastPositionContext = createContext("top-right");
 function persistsByDefault(type, options) {
   return type === "loading" || type === "error" || options?.actionProps !== void 0;
 }
@@ -5516,12 +3969,13 @@ var toast = Object.assign(
     update: toastManager.update
   }
 );
+var ToastPortal = withPortalThemeScope(Toast.Portal);
 function ToastViewport({
   className,
   position = "top-right",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ToastPositionContext.Provider, { value: position, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(
     Toast.Viewport,
     {
       className: cn(
@@ -5531,15 +3985,16 @@ function ToastViewport({
       ),
       ...props
     }
-  );
+  ) }) });
 }
 function ToastRoot({ className, ...props }) {
+  const position = useContext(ToastPositionContext);
   return /* @__PURE__ */ jsx(
     Toast.Root,
     {
       className: cn(
         "flex w-full gap-3 rounded-md border border-border-floating bg-popover p-4 text-popover-foreground shadow-xl",
-        "motion-slide-left",
+        ENTER_MOTION[position],
         className
       ),
       ...props
@@ -5569,7 +4024,7 @@ function ToastClose({ className, children, ...props }) {
     Toast.Close,
     {
       className: cn(
-        "-m-1 ms-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-concentric-md/3 text-muted-foreground outline-none motion-interactive",
+        "-m-1 ms-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none motion-interactive",
         hitTargetMin,
         "hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring",
         className
@@ -5898,7 +4353,7 @@ function AccordionTrigger({
     Accordion$1.Trigger,
     {
       className: cn(
-        "flex w-full items-start justify-between gap-3 py-4 text-start text-title-sm text-foreground motion-interactive hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "flex w-full items-start justify-between gap-3 py-4 text-start text-title-sm text-foreground motion-interactive hover:text-muted-foreground rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50",
         !indicator && "[&[data-panel-open]_[data-slot=accordion-chevron]]:rotate-180",
         className
       ),
@@ -6548,8 +5003,14 @@ var ComboboxItemIndicator = Combobox$1.ItemIndicator;
 var ComboboxGroup = Combobox$1.Group;
 var FIELD_SHELL2 = {
   xs: cn(FIELD_SHELL_XS, "pe-7 text-ui-md"),
-  md: "rounded-sm border border-input bg-card pe-9 text-body-md"
+  md: "rounded-sm border border-input bg-card pe-9"
 };
+function useFieldType(xs) {
+  const tier = useTypeTier();
+  const density = useDensity();
+  if (xs) return void 0;
+  return cn(tier.body, density === "comfortable" && MOBILE_FIELD_TIER);
+}
 function FieldToggle({ xs }) {
   return /* @__PURE__ */ jsx(
     Combobox$1.Trigger,
@@ -6568,6 +5029,7 @@ function FieldToggle({ xs }) {
 }
 function ComboboxInput({ className, size = "md", ...props }) {
   const xs = size === "xs";
+  const type = useFieldType(xs);
   return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, { className: "relative inline-flex w-full items-center", children: [
     /* @__PURE__ */ jsx(
       Combobox$1.Input,
@@ -6575,6 +5037,7 @@ function ComboboxInput({ className, size = "md", ...props }) {
         className: cn(
           "flex w-full text-foreground motion-interactive",
           xs ? cn("h-(--control-xs) ps-1.5", FIELD_SHELL2.xs) : cn("h-(--control-md) ps-3", FIELD_SHELL2.md),
+          type,
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -6601,12 +5064,14 @@ function ComboboxChips({
   ...props
 }) {
   const xs = size === "xs";
+  const type = useFieldType(xs);
   return /* @__PURE__ */ jsxs(
     Combobox$1.InputGroup,
     {
       className: cn(
         "relative flex w-full flex-wrap items-center text-foreground motion-interactive",
         xs ? cn("min-h-(--control-xs) gap-0.5 py-0.5 ps-0.5", FIELD_SHELL2.xs) : cn("min-h-(--control-md) gap-1 py-1 ps-1.5", FIELD_SHELL2.md),
+        type,
         "has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring",
         "has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/30",
         "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
@@ -7779,88 +6244,6 @@ var paginationMeta = {
     }
   ]
 };
-function Code({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "code",
-    {
-      className: cn(
-        "rounded-xs bg-muted px-1.5 py-0.5 text-mono-sm text-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-Code.displayName = "Code";
-
-// src/components/code/code.meta.ts
-var codeMeta = {
-  name: "Code",
-  summary: "Inline code. A styled `<code>` for code spans, keys, and identifiers inside running text \u2014 soft muted fill, monospace.",
-  status: "stable",
-  keywords: [
-    "code",
-    "inline code",
-    "token",
-    "monospace"
-  ],
-  usage: {
-    description: "Use Code for short inline identifiers, commands, tokens, props, and file names inside prose.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use it for brief technical literals that need to stand apart from body copy."
-      },
-      {
-        guidance: "do",
-        description: "Keep inline code short enough that it does not dominate the paragraph."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use Code for multiline snippets; use CodeBlock instead."
-      },
-      {
-        guidance: "dont",
-        description: "Do not put a value the reader needs to copy inside it. Code has no copy affordance, so they will select it by hand and catch the surrounding punctuation; use CodeBlock with a prompt."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "CodeBlock",
-      "Kbd"
-    ]
-  },
-  props: [
-    {
-      name: "...props",
-      type: 'ComponentPropsWithRef<"code">',
-      description: "All native `<code>` attributes (children, className, ref, \u2026) pass through."
-    }
-  ],
-  tokensUsed: ["muted", "foreground"],
-  a11y: [
-    "Renders a semantic `<code>` element so assistive tech announces it as code.",
-    "A `<code>` element is not announced distinctly by most screen readers \u2014 a code span in running prose is read as ordinary text. Where the exactness matters (a command to type verbatim, a case-sensitive identifier), say so in the sentence rather than relying on the styling to carry it."
-  ],
-  examples: [
-    {
-      label: "Inline",
-      code: "Run <Code>pnpm dev</Code> to start the server."
-    },
-    {
-      label: "Code vs CodeBlock",
-      code: `// Picking the wrong one is the usual mistake:
-//
-//   Code                   inline, inside a sentence       \u2192 \`useState\`
-//   CodeBlock              multi-line, read-only           \u2192 an example to study
-//   CodeBlock prompt="$"   one line, meant to be COPIED    \u2192 an install command
-
-Install with <Code>pnpm add @sableui/react</Code>          {/* \u2717 they will want to copy it */}
-<CodeBlock prompt="$" code="pnpm add @sableui/react" />   {/* \u2713 one line, with a copy button */}`
-    }
-  ]
-};
 function detectApple() {
   if (typeof navigator === "undefined") return false;
   const nav = navigator;
@@ -7872,14 +6255,20 @@ var noopSubscribe = () => () => {
 function useIsApple() {
   return useSyncExternalStore(noopSubscribe, detectApple, () => false);
 }
-function Kbd({ mod = false, className, children, ...props }) {
+var KBD_VARIANTS = {
+  key: "rounded-xs border border-border border-b-border-strong bg-[var(--sable-surface-bg,var(--background))] text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
+  ghost: "text-current opacity-70"
+};
+function Kbd({ mod = false, variant = "key", className, children, ...props }) {
   const apple = useIsApple();
   const content = mod ? apple ? "\u2318" : "Ctrl" : children;
   return /* @__PURE__ */ jsx(
     "kbd",
     {
+      "data-slot": "kbd",
       className: cn(
-        "inline-flex h-5 min-w-5 items-center justify-center rounded-xs border border-border bg-muted px-1.5 text-mono-sm text-muted-foreground",
+        "inline-flex h-[1.6em] min-w-[1.6em] items-center justify-center px-[0.4em] align-middle font-sans text-[max(0.75rem,0.85em)] font-medium leading-none tabular-nums",
+        KBD_VARIANTS[variant],
         className
       ),
       ...props,
@@ -7888,11 +6277,22 @@ function Kbd({ mod = false, className, children, ...props }) {
   );
 }
 Kbd.displayName = "Kbd";
+function KbdGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      "data-slot": "kbd-group",
+      className: cn("inline-flex items-center gap-[0.2em] align-middle", className),
+      ...props
+    }
+  );
+}
+KbdGroup.displayName = "KbdGroup";
 
 // src/components/kbd/kbd.meta.ts
 var kbdMeta = {
   name: "Kbd",
-  summary: "A keyboard key indicator. Renders a styled <kbd> key cap in monospace; compose several with a + between to show a shortcut combo. `mod` renders the platform modifier (\u2318 or Ctrl).",
+  summary: 'A keyboard key indicator. Renders a raised <kbd> key cap sized from the surrounding text, so one Kbd fits body copy, menus and tooltips; KbdGroup sets one cap per key for a combo. `mod` renders the platform modifier (\u2318 or Ctrl); `variant="ghost"` is the bare label for menu rows and tooltips.',
   status: "stable",
   keywords: [
     "keyboard",
@@ -7909,12 +6309,20 @@ var kbdMeta = {
       },
       {
         guidance: "do",
-        description: "Keep multi-key shortcuts readable by separating individual keys."
+        description: "Show a combo as one cap per key inside KbdGroup \u2014 `<KbdGroup><Kbd mod /><Kbd>K</Kbd></KbdGroup>` \u2014 not several keys typed into one cap."
+      },
+      {
+        guidance: "do",
+        description: 'Use `variant="ghost"` where the shortcut sits on a surface of its own \u2014 a menu row\'s trailing slot, a tooltip \u2014 so it reads as a hint, not a second control.'
       },
       {
         guidance: "dont",
         description: "Do not use Kbd as a decorative badge or button replacement."
       },
+      {
+        guidance: "dont",
+        description: "Do not set a text size on a Kbd. It sizes itself from the text around it."
+      },
       {
         guidance: "dont",
         description: "Do not hardcode \u2318 or Ctrl. The modifier differs by platform; use `<Kbd mod />`, which renders \u2318 on macOS/iOS and Ctrl elsewhere, or Windows users read Mac keys."
@@ -7935,6 +6343,12 @@ var kbdMeta = {
       default: "false",
       description: "Render the platform's shortcut modifier in place of children: \u2318 on macOS and iOS, Ctrl everywhere else. Server-rendered as Ctrl and corrected on hydration."
     },
+    {
+      name: "variant",
+      type: '"key" | "ghost"',
+      default: '"key"',
+      description: "`key`: a raised cap on the surface it sits on, with a heavier bottom edge as the key's lip. `ghost`: the bare label, for menu rows, tooltips and other surfaces that are already a frame."
+    },
     {
       name: "className",
       type: "string",
@@ -7946,10 +6360,11 @@ var kbdMeta = {
       description: "All native <kbd> attributes (children, ref, etc.)."
     }
   ],
-  tokensUsed: ["border", "muted", "muted-foreground"],
+  tokensUsed: ["border", "border-strong", "background", "muted-foreground"],
   a11y: [
     "Uses the semantic <kbd> element so assistive tech announces keyboard input.",
-    "Monospace key text keeps single keys and symbols legible at small sizes."
+    "KbdGroup is itself a <kbd> around the per-key caps \u2014 the HTML spelling of one key combination \u2014 so the combo is announced as a single piece of input.",
+    "Sized in em from the surrounding text, so it scales with the user's text size and never shrinks below 12px."
   ],
   examples: [
     {
@@ -7958,7 +6373,11 @@ var kbdMeta = {
     },
     {
       label: "Combo",
-      code: "<Row gap={1}><Kbd mod /><span>+</span><Kbd>K</Kbd></Row>"
+      code: "<KbdGroup><Kbd mod /><Kbd>K</Kbd></KbdGroup>"
+    },
+    {
+      label: "In a menu row",
+      code: '<MenuItem>Search<KbdGroup className="ms-auto"><Kbd variant="ghost" mod /><Kbd variant="ghost">K</Kbd></KbdGroup></MenuItem>'
     }
   ]
 };
@@ -8278,7 +6697,7 @@ var inlineStatusMeta = {
   ]
 };
 var bannerVariants = cva(
-  "relative flex w-full items-center gap-3 px-4 py-2.5 text-label-md",
+  "relative flex min-h-(--control-md) w-full items-center gap-3 px-4 py-2 text-label-md",
   {
     variants: {
       tone: {
@@ -8521,229 +6940,31 @@ var bannerMeta = {
   examples: [
     {
       label: "Tones",
-      code: '<Banner tone="info">Maintenance window tonight at 02:00 UTC.</Banner>'
-    },
-    {
-      label: "Solid (loud)",
-      code: '<Banner tone="destructive" appearance="solid" live="assertive">Blockchain unavailable. Collect and buy are temporarily disabled.</Banner>'
-    },
-    {
-      label: "Success",
-      code: '<Banner tone="success" live="polite">Credits authorized for Studio.</Banner>'
-    },
-    {
-      label: "Action",
-      code: '<Banner sticky action={<Button variant="outline" size="sm">Refresh</Button>}>12 new posts</Banner>'
-    },
-    {
-      label: "Dismissible",
-      code: '<Banner tone="warning" dismissible>Your session expires soon.</Banner>'
-    },
-    {
-      label: "Recoverable warning",
-      code: '<Banner tone="warning" action={<Button variant="outline" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>'
-    },
-    {
-      label: "App-shell outage",
-      code: '<AppShell banners={<Banner tone="destructive" appearance="solid" live="assertive">Uploads are temporarily unavailable.</Banner>}><Region max="feed"><EmptyState title="Uploads paused" description="Existing posts are still visible while the service recovers." /></Region></AppShell>'
-    }
-  ]
-};
-function EmptyState({
-  icon,
-  title,
-  description,
-  action,
-  code,
-  tone = "neutral",
-  size = "md",
-  surface = "none",
-  className,
-  ...props
-}) {
-  const destructive = tone === "destructive";
-  const glyph = icon ?? (destructive && code == null ? /* @__PURE__ */ jsx(Icon, { name: "warning" }) : null);
-  const Title = size === "lg" ? "h2" : "p";
-  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    code != null ? /* @__PURE__ */ jsx("p", { className: "text-display-lg text-muted-foreground", children: code }) : null,
-    glyph != null ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "flex size-12 items-center justify-center rounded-full text-2xl",
-          destructive ? "bg-destructive/15 text-destructive" : "bg-muted text-muted-foreground"
-        ),
-        children: glyph
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(Title, { className: size === "lg" ? "text-heading-2" : "text-title-lg", children: title }),
-    description != null ? /* @__PURE__ */ jsx("p", { className: "max-w-md text-body-md text-muted-foreground", children: description }) : null,
-    action != null ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: action }) : null
-  ] });
-  const layout = cn(
-    "flex flex-col items-center justify-center gap-3 text-center",
-    size === "lg" ? "px-6 py-20" : "px-6 py-12"
-  );
-  const a11y = destructive ? { role: "alert" } : {};
-  if (surface === "card") {
-    return /* @__PURE__ */ jsx(Card, { className: cn(layout, "p-[var(--card-p)]", className), ...a11y, ...props, children: body });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn(layout, className), ...a11y, ...props, children: body });
-}
-EmptyState.displayName = "EmptyState";
-
-// src/components/empty-state/empty-state.meta.ts
-var emptyStateMeta = {
-  name: "EmptyState",
-  summary: 'The centered empty / error block: optional icon disc or error code, title, description and an action. tone="destructive" makes it an announced error, size="lg" a page-level state, surface="card" a self-contained card.',
-  keywords: [
-    "empty",
-    "zero state",
-    "blank slate",
-    "no results",
-    "placeholder",
-    "onboarding",
-    "no data"
-  ],
-  usage: {
-    description: "Use EmptyState when a content area has no items, no search results, or no first-time setup yet. The title should name the empty condition and the description/action should give the user a next step.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: 'Explain what is empty in plain language, such as "No posts yet" or "No matching collectors".'
-      },
-      {
-        guidance: "do",
-        description: "Offer one next step when the user can recover, create, clear filters, or start setup."
-      },
-      {
-        guidance: "do",
-        description: "Keep the icon decorative and make the title carry the meaning."
-      },
-      {
-        guidance: "do",
-        description: `For a search or filter result, name the query back to the user and offer the way out, such as "No results for 'quarterly'" with a Clear filters action. An empty result that does not say what was searched leaves the user unsure whether the query or the data was wrong.`
-      },
-      {
-        guidance: "dont",
-        description: 'Use generic copy like "No data"; it gives users and agents no useful path forward.'
-      },
-      {
-        guidance: "dont",
-        description: "Park anything the user needs permanently here, such as setup instructions, billing notices, or keyboard shortcuts. An empty state is the one surface guaranteed to disappear the moment content exists, so information that matters after the first item is lost exactly when the user has learned enough to want it."
-      },
-      {
-        guidance: "dont",
-        description: `Use it for a field's validation error \u2014 that is Field error messaging. Reserve tone="destructive" for a view or block that failed to load.`
-      }
-    ],
-    anatomy: [
-      {
-        name: "Icon",
-        required: false,
-        description: "A decorative cue that reinforces the empty condition."
-      },
-      {
-        name: "Title",
-        required: true,
-        description: "The short message naming what is empty."
-      },
-      {
-        name: "Description",
-        required: false,
-        description: "Supporting copy that explains why the state exists or what to try next."
-      },
-      {
-        name: "Action",
-        required: false,
-        description: "One clear button or link that moves the user forward."
-      }
-    ]
-  },
-  related: {
-    components: ["Button", "Icon", "Card", "Banner", "DataTable"],
-    patterns: ["FeedPage", "ListDetailPage", "DashboardPage"]
-  },
-  status: "stable",
-  props: [
-    {
-      name: "icon",
-      type: "ReactNode",
-      description: "Optional leading glyph \u2014 pass an `<Icon />`. Rendered in a soft muted disc."
-    },
-    {
-      name: "title",
-      type: "ReactNode",
-      description: "The headline. Short and direct."
-    },
-    {
-      name: "description",
-      type: "ReactNode",
-      description: "Optional supporting line beneath the title."
-    },
-    {
-      name: "action",
-      type: "ReactNode",
-      description: "Optional action below the copy \u2014 typically a `<Button />`."
-    },
-    {
-      name: "code",
-      type: "ReactNode",
-      description: "A large figure above the title, such as an error code (404)."
-    },
-    {
-      name: "tone",
-      type: '"neutral" | "destructive"',
-      default: '"neutral"',
-      description: 'destructive is an error state: a destructive icon disc (a warning by default) and role="alert" so it is announced.'
-    },
-    {
-      name: "size",
-      type: '"md" | "lg"',
-      default: '"md"',
-      description: "lg is page-level: the title is an h2 and the block takes more room. md sits in a panel, list or card."
-    },
-    {
-      name: "surface",
-      type: '"none" | "card"',
-      default: '"none"',
-      description: "card draws it as a Card, for an error or empty block standing on its own in a page."
-    }
-  ],
-  variants: {
-    tone: ["neutral", "destructive"],
-    size: ["md", "lg"],
-    surface: ["none", "card"]
-  },
-  tokensUsed: ["muted", "muted-foreground", "foreground", "destructive"],
-  a11y: [
-    "Decorative icon discs should not carry meaning the title doesn't already convey.",
-    "Pair with an actionable next step so the zero-state is a path forward, not a dead end."
-  ],
-  examples: [
+      code: '<Banner tone="info">Maintenance window tonight at 02:00 UTC.</Banner>'
+    },
     {
-      label: "With icon and action",
-      code: '<EmptyState icon={<Icon name="info" />} title="No posts yet" description="Create your first." action={<Button>New post</Button>} />'
+      label: "Solid (loud)",
+      code: '<Banner tone="destructive" appearance="solid" live="assertive">Blockchain unavailable. Collect and buy are temporarily disabled.</Banner>'
     },
     {
-      label: "No search results",
-      code: '<EmptyState icon={<Icon name="search" />} title="No matching posts" description="Try a different keyword or clear your filters." action={<Button variant="secondary">Clear filters</Button>} />'
+      label: "Success",
+      code: '<Banner tone="success" live="polite">Credits authorized for Studio.</Banner>'
     },
     {
-      label: "First-run setup",
-      code: '<EmptyState surface="card" icon={<Icon name="sparkles" />} title="Start your collection" description="Create a first edition, import an existing drop, or invite collaborators." action={<Row gap={1}><Button>Create edition</Button><Button variant="ghost">Import</Button></Row>} />'
+      label: "Action",
+      code: '<Banner sticky action={<Button variant="outline" size="sm">Refresh</Button>}>12 new posts</Banner>'
     },
     {
-      label: "Page-level error",
-      code: '<EmptyState tone="destructive" size="lg" code="404" title="Page not found" description="The page you are looking for has moved or never existed." action={<Button>Go home</Button>} />'
+      label: "Dismissible",
+      code: '<Banner tone="warning" dismissible>Your session expires soon.</Banner>'
     },
     {
-      label: "Error card",
-      code: '<EmptyState tone="destructive" surface="card" title="Could not load this edition" description="Check your connection and try again." action={<Button variant="secondary">Retry</Button>} />'
+      label: "Recoverable warning",
+      code: '<Banner tone="warning" action={<Button variant="outline" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>'
     },
     {
-      label: "Empty table body",
-      code: '<DataTable data={[]} columns={[{ key: "name", header: "Collector" }, { key: "status", header: "Status" }]} empty={<EmptyState title="No collectors yet" description="Collectors appear here after the first mint." />} />'
+      label: "App-shell outage",
+      code: '<AppShell banners={<Banner tone="destructive" appearance="solid" live="assertive">Uploads are temporarily unavailable.</Banner>}><Region max="feed"><EmptyState title="Uploads paused" description="Existing posts are still visible while the service recovers." /></Region></AppShell>'
     }
   ]
 };
@@ -9354,13 +7575,28 @@ function PanelSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("section", { className: cn("flex flex-col border-t border-hairline", className), ...props, children: [
-    /* @__PURE__ */ jsxs("header", { className: "flex h-7 items-center justify-between gap-2 px-2", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-ui-section text-foreground", children: title }),
-      action
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 px-2 pb-2", children })
-  ] });
+  return (
+    // Side padding and the first/last section's top/bottom come from a framing
+    // sable-frame-tool, so rows stay concentric with a rounded frame's corners;
+    // in a square Workspace column they fall back to the 8px tool inset.
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col border-t border-hairline first:pt-[var(--panel-edge,0px)] last:pb-[var(--panel-edge,0px)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex h-7 items-center justify-between gap-2 px-[var(--panel-inset,--spacing(2))]", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-ui-section text-foreground", children: title }),
+            action
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 px-[var(--panel-inset,--spacing(2))] pb-2", children })
+        ]
+      }
+    )
+  );
 }
 PanelSection.displayName = "PanelSection";
 function PropertyRow({
@@ -11134,202 +9370,230 @@ const parsed = isTransparent(value) ? null : parseHex(value) // null = not a col
     }
   ]
 };
-var SideNavContext = createContext({
-  size: "md",
-  activeVariant: "content"
-});
-function SideNav({
+function Fieldset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Fieldset$1.Root,
+    {
+      className: cn(
+        // min-w-0: a native <fieldset> defaults to min-inline-size: min-content
+        // and would refuse to shrink below its widest control. overflow-hidden
+        // keeps the footer's wash inside the rounded corners.
+        // Publishes its surface like Card, so wells, stepper discs and
+        // interactive rows inside derive from the card, not the page.
+        "min-w-0 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm [--sable-surface-bg:var(--card)]",
+        // No opacity of its own: a disabled fieldset disables every control
+        // in it, and each already dims to 50% — dimming here as well stacked
+        // to ~30%, against 50% everywhere else in the system.
+        className
+      ),
+      ...props
+    }
+  );
+}
+Fieldset.displayName = "Fieldset";
+function FieldsetLegend({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Fieldset$1.Legend,
+    {
+      className: cn("px-6 pt-6 text-title-lg text-foreground", className),
+      ...props
+    }
+  );
+}
+FieldsetLegend.displayName = "FieldsetLegend";
+function FieldsetDescription({
   className,
-  size = "md",
-  activeVariant = "content",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SideNavContext.Provider, { value: { size, activeVariant }, children: /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col gap-0.5", className), ...props }) });
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "fieldset-description",
+      className: cn("px-6 text-body-sm text-muted-foreground", className),
+      ...props
+    }
+  );
 }
-SideNav.displayName = "SideNav";
-function SideNavGroup({
-  label,
+FieldsetDescription.displayName = "FieldsetDescription";
+function FieldsetContent({
   className,
-  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", className), ...props, children: [
-    label ? /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-1 text-caption text-muted-foreground", children: label }) : null,
-    children
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4 px-6 py-4 last:pb-6", className), ...props });
 }
-SideNavGroup.displayName = "SideNavGroup";
-function SideNavItem({
-  label,
-  icon,
-  active,
-  badge,
-  size,
-  activeVariant,
-  render,
+FieldsetContent.displayName = "FieldsetContent";
+function FieldsetFooter({
   className,
   ...props
 }) {
-  const context = useContext(SideNavContext);
-  const resolvedSize = size ?? context.size;
-  const resolvedActiveVariant = activeVariant ?? context.activeVariant;
-  return useRender({
-    render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
-    props: {
-      ...props,
-      "data-active": active ? "" : void 0,
-      "aria-current": active ? "page" : void 0,
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
       className: cn(
-        sideNavItemVariants({
-          size: resolvedSize,
-          activeVariant: resolvedActiveVariant
-        }),
+        "flex justify-end gap-2 border-t border-border bg-muted/30 px-6 py-4",
+        "[[data-slot=fieldset-description]+&]:mt-6",
         className
       ),
-      children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: resolvedSize }), children: icon }) : null,
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
-        badge ? /* @__PURE__ */ jsx("span", { className: "ms-auto shrink-0", children: badge }) : null
-      ] })
-    },
-    defaultTagName: "button"
-  });
+      ...props
+    }
+  );
 }
-SideNavItem.displayName = "SideNavItem";
+FieldsetFooter.displayName = "FieldsetFooter";
 
-// src/components/side-nav/side-nav.meta.ts
-var sideNavMeta = {
-  name: "SideNav",
-  summary: "A lightweight in-content vertical navigation list - the settings / docs sub-nav, distinct from the app-chrome Sidebar. Router-agnostic items, optional SideNavGroup sections, and an explicit active-state vocabulary for content rails or sidebar chrome.",
+// src/components/fieldset/fieldset.meta.ts
+var fieldsetMeta = {
+  name: "Fieldset",
+  summary: "Form section panel (Card-like bordered surface) over Base UI Fieldset, with Legend/Description/Content/Footer parts.",
+  status: "stable",
   keywords: [
-    "side nav",
-    "navigation",
-    "settings nav",
-    "sidebar",
-    "rail",
-    "docs nav",
-    "active item",
-    "group"
+    "fieldset",
+    "form group",
+    "legend",
+    "fields"
   ],
   usage: {
-    description: "Use SideNav for vertical navigation inside a settings page, documentation area, dashboard rail, or sidebar chrome. It is router-agnostic: compose items with render={<Link />} and choose activeVariant based on whether the nav sits in content or app chrome.",
+    description: "Use Fieldset to group related controls under a shared label or explanation.",
     bestPractices: [
       {
         guidance: "do",
-        description: "Use aria-label on SideNav when a page contains more than one nav landmark."
-      },
-      {
-        guidance: "do",
-        description: "Group related items with SideNavGroup when the rail has more than one conceptual area."
-      },
-      {
-        guidance: "do",
-        description: "Use size='lg' and activeVariant='sidebar' when the nav is part of persistent app chrome."
+        description: "Use it for grouped form sections such as contact details, preferences, or permissions."
       },
       {
         guidance: "do",
-        description: "Inside a rounded, padded frame, give each item rounded-concentric-<outer>/<inset> (e.g. rounded-concentric-lg/2 in a rounded-lg p-2 box). The rows' own radius is fixed per size, and a same-radius row inset into a frame reads as a second system."
+        description: "Keep the legend meaningful so assistive tech and agents understand the group purpose."
       },
       {
         guidance: "dont",
-        description: "Use SideNav for bottom mobile navigation; use BottomNav in AppShell's bottomNav slot."
+        description: "Do not use Fieldset as a generic spacing wrapper outside forms."
       },
       {
         guidance: "dont",
-        description: "Mix content and sidebar active variants in the same rail unless individual items intentionally override the group."
+        description: "Do not use a Legend that is really a heading. A legend names the group's question for assistive technology; using it as a section title puts a question mark where the outline should be."
       }
     ],
     anatomy: [
       {
-        name: "Nav",
+        name: "Fieldset",
+        required: true,
+        description: "The bordered group: a native <fieldset> whose disabled state reaches every control inside it."
+      },
+      {
+        name: "Legend",
         required: true,
-        description: "The landmark container for the vertical navigation list."
+        description: "FieldsetLegend: the question the group's controls answer, announced before each of them."
       },
       {
-        name: "Group",
+        name: "Description",
         required: false,
-        description: "Optional labelled cluster of related navigation items."
+        description: "FieldsetDescription: muted copy under the legend."
       },
       {
-        name: "Item",
+        name: "Content",
         required: true,
-        description: "Interactive row with label, optional icon, optional badge, and active state."
+        description: "FieldsetContent: the stacked body, one Field per control."
       },
       {
-        name: "Badge",
+        name: "Footer",
         required: false,
-        description: "Trailing count or state indicator aligned to the row end."
+        description: "FieldsetFooter: the group's actions on a muted wash."
       }
     ]
   },
   related: {
-    components: ["Sidebar", "AppShell", "BottomNav", "Badge", "Icon"],
-    patterns: ["SettingsPage", "DashboardPage"]
+    components: [
+      "Form",
+      "Label"
+    ]
   },
-  status: "stable",
   props: [
     {
-      name: "size",
-      type: '"md" | "lg"',
-      description: 'Density shared by all items. "md" (default) = the lightweight in-content sub-nav; "lg" = chrome-weight (larger label + icon, roomier rows) for a rail that pairs with the app Sidebar.'
+      name: "disabled",
+      type: "boolean",
+      description: "Disables the whole group. Renders <fieldset disabled> (native control disabling) and surfaces data-[disabled] for dimming."
+    },
+    {
+      name: "render",
+      type: "ReactElement | function",
+      description: "Base UI render prop to replace or compose the underlying element."
     },
     {
-      name: "activeVariant",
-      type: '"content" | "sidebar"',
-      default: '"content"',
-      description: 'Active-state token vocabulary shared by all items. "content" uses bg-accent/text-accent-foreground for local rails inside the content area; "sidebar" uses bg-sidebar-accent/text-sidebar-accent-foreground for SideNavs rendered inside app chrome.'
+      name: "className",
+      type: "string",
+      description: "Merged onto each part via cn() for one-off overrides."
     }
   ],
   subcomponents: [
     {
-      name: "SideNavItem",
-      type: '{ label: ReactNode; icon?: ReactNode; active?: boolean; badge?: ReactNode; size?: "md" | "lg"; activeVariant?: "content" | "sidebar"; render?: useRender.RenderProp } + button props',
-      description: 'A single row. label is the row text; icon is an optional leading icon; active marks the current sub-section (active fill + aria-current="page"); badge is a trailing node (e.g. a count) pushed to the row end; size and activeVariant override the enclosing SideNav per item; render composes another element, e.g. render={<Link to="/x" />}.'
+      name: "FieldsetLegend",
+      type: "ComponentPropsWithRef<typeof Fieldset.Legend>",
+      description: "The group's name \u2014 the question its controls answer. Base UI renders it as a <div> wired to the <fieldset> through aria-labelledby, so a screen reader announces it before each control in the group. This is the whole reason to reach for Fieldset."
+    },
+    {
+      name: "FieldsetDescription",
+      type: 'ComponentPropsWithRef<"p">',
+      description: "Muted supporting copy under the legend."
+    },
+    {
+      name: "FieldsetContent",
+      type: 'ComponentPropsWithRef<"div">',
+      description: "The stacked body holding one Field per control."
     },
     {
-      name: "SideNavGroup",
-      type: "{ label?: ReactNode } + div props",
-      description: "A labelled section within a SideNav - groups settings into areas. label renders an optional sentence-case caption heading above the group's items."
+      name: "FieldsetFooter",
+      type: 'ComponentPropsWithRef<"div">',
+      description: "Optional right-aligned action bar on a muted wash."
     }
   ],
-  a11y: [
-    "SideNav renders a <nav> landmark; pair multiple navs with aria-label to distinguish them.",
-    'The active item carries aria-current="page".',
-    "Items expose a focus-visible ring; the active state is reinforced by weight + fill, not colour alone.",
-    'Use activeVariant="content" for local in-page rails and activeVariant="sidebar" when a SideNav is placed on Sidebar chrome.'
-  ],
   tokensUsed: [
-    "muted",
-    "muted-foreground",
+    "card",
+    "card-foreground",
+    "border",
     "foreground",
-    "accent",
-    "accent-foreground",
-    "ring",
-    "sidebar-foreground",
-    "sidebar-accent",
-    "sidebar-accent-foreground",
-    "sidebar-ring"
+    "muted-foreground",
+    "muted"
+  ],
+  a11y: [
+    "Base.Root renders a native <fieldset>; Base.Legend renders an auto-associated label, so screen readers announce the group name.",
+    "disabled propagates as native <fieldset disabled>, disabling all contained controls.",
+    "Wrap each control inside FieldsetContent in a Field, which wires its own label, description and error to the control."
   ],
   examples: [
     {
-      label: "Settings sub-nav",
-      code: '<SideNav><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Account" render={<Link to="/settings/account" />} /><SideNavItem label="Notifications" render={<Link to="/settings/notifications" />} /></SideNav>'
-    },
-    {
-      label: "Grouped",
-      code: '<SideNav><SideNavGroup label="Account"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNavGroup><SideNavGroup label="Workspace"><SideNavItem label="Members" render={<Link to="/settings/members" />} /></SideNavGroup></SideNav>'
-    },
-    {
-      label: "Chrome-weight rail (size=lg)",
-      code: '<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Wallets" render={<Link to="/settings/wallets" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>'
-    },
-    {
-      label: "Inside Sidebar chrome",
-      code: '<SideNav size="lg" activeVariant="sidebar"><SideNavItem label="Overview" active render={<Link to="/" />} /><SideNavItem label="Reports" render={<Link to="/reports" />} /><SideNavItem label="Settings" render={<Link to="/settings" />} /></SideNav>'
+      label: "A grouped question",
+      code: `<Fieldset>
+	<FieldsetLegend>Notify me about</FieldsetLegend>
+	<FieldsetDescription>Pick what reaches your inbox.</FieldsetDescription>
+	<FieldsetContent>
+		<Field label="Mentions" orientation="horizontal"><Checkbox defaultChecked /></Field>
+		<Field label="Replies" orientation="horizontal"><Checkbox /></Field>
+		<Field label="Direct messages" orientation="horizontal"><Checkbox /></Field>
+	</FieldsetContent>
+	<FieldsetFooter>
+		<Button>Save preferences</Button>
+	</FieldsetFooter>
+</Fieldset>`
     },
     {
-      label: "Grouped with icons and badges",
-      code: '<SideNav aria-label="Settings sections"><SideNavGroup label="Account"><SideNavItem icon={<Icon name="user" />} label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem icon={<Icon name="lock" />} label="Security" badge={<Badge tone="warning" size="sm">2</Badge>} render={<Link to="/settings/security" />} /></SideNavGroup><SideNavGroup label="Workspace"><SideNavItem icon={<Icon name="bell" />} label="Notifications" render={<Link to="/settings/notifications" />} /></SideNavGroup></SideNav>'
+      label: "Why a fieldset, and when it is wrong",
+      code: `// Fieldset groups inputs that are ONE question with multiple parts, and gives
+// the group a single accessible name \u2014 which is the part you cannot do with a
+// div and a heading.
+
+<Fieldset>
+  <FieldsetLegend>Digest frequency</FieldsetLegend>
+  <FieldsetContent>
+    <RadioGroup defaultValue="weekly">
+      <Field label="Daily" orientation="horizontal"><Radio value="daily" /></Field>
+      <Field label="Weekly" orientation="horizontal"><Radio value="weekly" /></Field>
+    </RadioGroup>
+  </FieldsetContent>
+</Fieldset>
+
+// \u2713 Required for radio groups: without a fieldset the options have no shared
+//   name, so a screen reader announces "Weekly, radio" with no question.
+// \u2717 Not for visual grouping of unrelated fields. Use PanelSection on a panel or
+//   a Card section on a page; a legend that is really a heading lies to
+//   assistive technology about the form's structure.`
     }
   ]
 };
@@ -11388,14 +9652,14 @@ function RadioCard({
     "span",
     {
       className: cn(
-        "relative inline-flex size-4.5 shrink-0 rounded-full border border-input bg-card motion-interactive",
+        RADIO_RING,
         t.marker
       ),
       children: /* @__PURE__ */ jsx(
         Radio$1.Indicator,
         {
           className: cn(
-            "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full motion-interactive ease-spring data-[starting-style]:scale-0 data-[ending-style]:scale-0",
+            RADIO_DOT,
             t.dot
           )
         }
@@ -11420,22 +9684,13 @@ function RadioCard({
       className: cn(
         SELECTION_CARD_SHELL,
         t.card,
-        icon != null ? "flex-col gap-3 rounded-lg" : "items-start gap-3 rounded-md",
+        icon != null ? SELECTION_CARD_LAYOUT.tile : SELECTION_CARD_LAYOUT.row,
         className
       ),
       ...props,
       children: icon != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex w-full items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "shrink-0 text-2xl leading-none motion-interactive",
-                t.glyph
-              ),
-              children: icon
-            }
-          ),
+        /* @__PURE__ */ jsxs("span", { className: SELECTION_CARD_TILE_HEAD, children: [
+          /* @__PURE__ */ jsx("span", { className: cn(SELECTION_CARD_GLYPH, t.glyph), children: icon }),
           marker
         ] }),
         content
@@ -11670,19 +9925,30 @@ function CheckboxCard({
   ...props
 }) {
   const t = checkboxCardToneClasses[tone];
+  const box = /* @__PURE__ */ jsx("span", { className: cn(CHECK_BOX, t.box), children: /* @__PURE__ */ jsx(CheckboxMark, { className: t.check }) });
   return /* @__PURE__ */ jsxs(
     Checkbox$1.Root,
     {
       className: cn(
         SELECTION_CARD_SHELL,
-        "items-start gap-3 rounded-md",
+        icon != null ? SELECTION_CARD_LAYOUT.tile : SELECTION_CARD_LAYOUT.row,
         t.card,
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-title-sm", children: /* @__PURE__ */ jsx("span", { className: cn(CHECK_BOX, t.box), children: /* @__PURE__ */ jsx(CheckboxMark, { className: t.check }) }) }),
-        icon != null ? /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-title-sm", children: /* @__PURE__ */ jsx("span", { className: cn("text-xl leading-none", t.glyph), children: icon }) }) : null,
+        icon != null ? (
+          // The tile, as RadioCard draws it (lib/selection-card).
+          /* @__PURE__ */ jsxs("span", { className: SELECTION_CARD_TILE_HEAD, children: [
+            /* @__PURE__ */ jsx("span", { className: cn(SELECTION_CARD_GLYPH, t.glyph), children: icon }),
+            box
+          ] })
+        ) : (
+          // The box sits on the title's first line — a box `1lh` tall in the
+          // title's tier, centred — rather than nudged down by a fixed margin
+          // that only matched one line height.
+          /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-title-sm", children: box })
+        ),
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
           /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: title }),
           description ? /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: description }) : null
@@ -11770,7 +10036,7 @@ var checkboxCardMeta = {
     {
       name: "icon",
       type: "ReactNode",
-      description: "Optional leading glyph (a solid <Icon>); takes the tone colour."
+      description: "Optional glyph (a solid <Icon>) in the tone colour. Its presence switches to the two-dimensional card RadioCard uses \u2014 icon top-left, checkbox top-right, copy below \u2014 so the two cards match in one form."
     },
     {
       name: "tone",
@@ -11883,11 +10149,13 @@ function ThemeSelector({
               render: /* @__PURE__ */ jsx("button", { type: "button" }),
               nativeButton: true,
               className: cn(
-                // sable-frame-inner: concentric inside a sable-frame host (a popover, a
-                // docked panel); the theme's small radius anywhere else.
+                // sable-frame-inner: concentric inside a sable-frame host (a frame-styled
+                // popover, a docked panel); the theme's small radius anywhere else.
                 "flex h-(--control-sm) w-full items-center gap-2 px-1.5 text-start motion-interactive sable-frame-inner",
-                "hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring",
-                "aria-checked:bg-muted"
+                // Menu / Select rows' fills and ink, so a theme list beside a
+                // menu reads as the same kind of row.
+                "hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring",
+                "aria-checked:bg-accent aria-checked:text-accent-foreground"
               ),
               children: [
                 /* @__PURE__ */ jsxs(
@@ -12039,7 +10307,7 @@ var themeSelectorMeta = {
     bestPractices: [
       {
         guidance: "do",
-        description: 'Use layout="list" in a popover, a menu, or a docked panel. Rows sit on the --control-sm ladder and still show each theme\'s swatch strip, so the choice stays visible rather than described. Rows take `sable-frame-inner`, so host the list in a sable-frame (a Popover, or `sable-frame sable-surface sable-surface-popover sable-frame-popover`) and their corners nest concentrically.'
+        description: 'Use layout="list" in a popover, a menu, or a docked panel. Rows sit on the --control-sm ladder and still show each theme\'s swatch strip, so the choice stays visible rather than described. Rows take `sable-frame-inner`, so host the list in a sable-frame (`sable-frame sable-surface sable-surface-popover sable-frame-popover` \u2014 PopoverContent is not one; give it that class list, or its p-4 leaves the rows unnested) and their corners nest concentrically.'
       },
       {
         guidance: "do",
@@ -12386,7 +10654,7 @@ function ShowMore({
         {
           "aria-hidden": true,
           className: cn(
-            "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-background to-transparent motion-interactive",
+            "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-[var(--sable-surface-bg,var(--background))] to-transparent motion-interactive",
             expanded && "opacity-0"
           )
         }
@@ -13044,7 +11312,7 @@ function CommandMenuItem({
       onClick: handleSelect,
       onMouseMove: () => ctx?.setActiveId(id),
       className: cn(
-        `flex items-center gap-2 rounded-[max(0px,calc(var(--radius-lg)-var(--cm-inset,--spacing(1))))] px-(--cm-pad,--spacing(2)) py-2 ${tier.body} outline-none motion-interactive aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg]:shrink-0`,
+        `flex items-center gap-2 rounded-[max(0px,calc(var(--radius-lg)-var(--cm-inset,--spacing(1))-1px))] px-(--cm-pad,--spacing(2)) py-2 ${tier.body} outline-none motion-interactive aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg]:shrink-0`,
         disabled ? "cursor-default text-muted-foreground" : "cursor-pointer text-foreground",
         className
       ),
@@ -13163,7 +11431,12 @@ function CommandMenuTrigger({
         keyLabel ? (
           // aria-hidden: the shortcut is announced once, through
           // aria-keyshortcuts, rather than read out as part of the name.
-          /* @__PURE__ */ jsx(Kbd, { "aria-hidden": true, className: "shrink-0", children: apple ? `\u2318${keyLabel}` : `Ctrl ${keyLabel}` })
+          // One cap per key (Kbd's own guidance) — "Ctrl K" in a single cap
+          // read as one key.
+          /* @__PURE__ */ jsxs(KbdGroup, { "aria-hidden": true, className: "shrink-0", children: [
+            /* @__PURE__ */ jsx(Kbd, { children: apple ? "\u2318" : "Ctrl" }),
+            /* @__PURE__ */ jsx(Kbd, { children: keyLabel })
+          ] })
         ) : null
       ]
     }
@@ -13367,199 +11640,83 @@ var commandMenuMeta = {
     {
       name: "CommandMenuTrigger",
       type: '{ onOpen?: () => void; placeholder?: string; shortcut?: string | false; size?: "sm" | "md"; disabled?: boolean }',
-      description: `The search field in a header that is really a button. Wears SearchInput's shell (border-input, card surface, leading magnifier, muted placeholder) on the control ladder, with a trailing Kbd: \u2318K on macOS, Ctrl K elsewhere. onOpen runs on click and on the shortcut, which it listens for page-wide (useCommandMenuShortcut). shortcut is the key (default "k"); false drops both the hint and the listener. size is sm in a header beside small buttons, md (default) beside Input and SearchInput. It sits outside CommandMenu, so the Dialog returns focus to it on close.`
-    },
-    {
-      name: "useCommandMenuShortcut",
-      type: "(onShortcut: (event: KeyboardEvent) => void, key?: string | false) => void",
-      description: `The page-wide \u2318K / Ctrl+K listener CommandMenuTrigger installs, for a palette with no visible trigger. Ignored while focus is in a text field, textarea, select or contenteditable (Ctrl+K belongs to the field there) except the palette's own input, so the callback may toggle. It calls preventDefault() on a match and skips an event already prevented, so two listeners on one page fire once. key defaults to "k"; false turns it off. Removed on unmount.`
-    },
-    {
-      name: "CommandMenuPanel",
-      type: "{ items?: CommandItem[]; query?: string; onQueryChange?: (query: string) => void; filter?: CommandFilter; listClassName?: string; placeholder?: string; emptyMessage?: string; title?: string; scope?: ReactNode; inputProps?: ComponentProps<'input'>; className?: string; children?: ReactNode }",
-      description: "The palette rendered in place: the same search header, filtered and grouped listbox, keyboard model and result-count live region, on a static card (border-border, bg-card, no shadow) instead of in a Dialog. Takes every CommandMenu prop except open, onOpenChange, finalFocus and description; className lands on the card, title names the listbox. Focus is not trapped and the input does not take focus on mount (inputProps.autoFocus opts in). Esc clears the query, and passes through once it is empty, so a Popover around the panel still closes. A chosen row runs its onSelect and the panel stays as it was. The page-wide shortcut does not fire from its input."
-    },
-    {
-      name: "CommandMenuGroup",
-      type: "{ label: string; children }",
-      description: "A labelled group of command rows."
-    },
-    {
-      name: "CommandMenuItem",
-      type: "{ onSelect?: () => void; icon?: string; detail?: ReactNode; hint?: ReactNode; disabled?: boolean; id?: string; children }",
-      description: "A selectable row. Self-filters by its text (unless the root was given a filter), runs onSelect, then closes the palette. detail is secondary text after the label; hint is the end-aligned trailing slot \u2014 a shortcut, a count, or a disabled row's reason. A disabled row stays listed, stays announced, and stays reachable by arrow key so its reason can be read, but is inert to Enter and to a click."
-    }
-  ],
-  tokensUsed: [
-    "card",
-    "card-foreground",
-    "border",
-    "foreground",
-    "muted-foreground",
-    "accent",
-    "accent-foreground"
-  ],
-  a11y: [
-    "CommandMenuTrigger is a real <button> named by its visible placeholder, with aria-haspopup=dialog and aria-keyshortcuts (Meta+K on macOS, Control+K elsewhere). Its Kbd hint is aria-hidden, so the shortcut is announced once rather than read as part of the name.",
-    "The shortcut never fires from inside a text field, textarea, select or contenteditable (Ctrl+K is delete-to-end-of-line in macOS text views), except the palette's own input.",
-    "CommandMenuPanel is the same combobox and listbox in the page, with no dialog: it does not trap or steal focus, and Esc clears a non-empty query (stopping there) instead of dismissing. With an empty query Esc is left alone for whatever contains the panel.",
-    "Built on Base UI Dialog, so focus trap, scroll lock, and Esc/outside dismissal come for free; the dialog carries a visually-hidden title + description so it is announced.",
-    "Follows the ARIA combobox pattern: the search input is role=combobox (aria-autocomplete=list) that owns the role=listbox popup via aria-controls.",
-    "ArrowDown/ArrowUp/Home/End and PageUp/PageDown move a virtual aria-activedescendant highlight while focus stays in the input; Enter runs the highlighted command. Arrow keys wrap; page jumps clamp.",
-    "Groups expose role=group labelled by their heading; items are role=option and never enter the tab order.",
-    "A polite role=status live region announces the result count as the query narrows, so the size of the list is available without reading it.",
-    "A disabled row carries aria-disabled and is skipped when seeding the highlight, but stays in the arrow-key walk so its reason can be reached and read.",
-    "The component keeps ownership of aria-activedescendant even when a caller claims a key through inputProps.onKeyDown. Skipping a move is coherent (they took responsibility for that key), but nothing may leave the active id naming a row that is not painted as active \u2014 so the opt-out returns before any highlight change rather than after it.",
-    "Exactly one row is ever painted as active: the pointer takes the highlight over (moving onto a row makes it the aria-activedescendant) rather than adding a hover fill of its own, so what looks highlighted is always what Enter will run."
-  ],
-  examples: [
-    {
-      label: "Data-driven",
-      code: "<CommandMenu open={open} onOpenChange={setOpen} items={[{ group: 'Navigation', label: 'Go to feed', icon: 'home', onSelect: () => {} }, { group: 'Actions', label: 'New post', onSelect: () => {} }]} />"
-    },
-    {
-      label: "Declarative",
-      code: "<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label='Navigation'><CommandMenuItem icon='home' onSelect={() => {}}>Go to feed</CommandMenuItem></CommandMenuGroup></CommandMenu>"
-    },
-    {
-      label: "Grouped launcher",
-      code: '<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label="Create"><CommandMenuItem icon="plus" onSelect={() => createPost()}>New post</CommandMenuItem><CommandMenuItem icon="sparkles" onSelect={() => createEdition()}>New edition</CommandMenuItem></CommandMenuGroup><CommandMenuGroup label="Navigation"><CommandMenuItem icon="home" onSelect={() => navigate("/")}>Home</CommandMenuItem><CommandMenuItem icon="gear" onSelect={() => navigate("/settings")}>Settings</CommandMenuItem></CommandMenuGroup></CommandMenu>'
-    },
-    {
-      label: "Consumer-owned ranking",
-      code: "<CommandMenu open={open} onOpenChange={setOpen} query={query} onQueryChange={setQuery} filter={(items, q) => rank(items, q)} items={items} />"
-    },
-    {
-      label: "Listed but unavailable",
-      code: "<CommandMenu open={open} onOpenChange={setOpen} items={[{ group: 'Layers', label: 'Align left', disabled: true, hint: 'Select another layer to align to', onSelect: () => {} }]} />"
-    },
-    {
-      label: "Inline panel",
-      code: `<CommandMenuPanel className="w-80" items={[{ group: 'Create', label: 'New project', icon: 'plus', hint: <Kbd>N</Kbd>, onSelect: () => {} }, { group: 'Settings', label: 'Open settings', icon: 'gear', onSelect: () => {} }]} />`
-    },
-    {
-      label: "Header search trigger",
-      code: '<CommandMenuTrigger size="sm" placeholder="Search docs" onOpen={() => setOpen(true)} className="w-56" />\n<CommandMenu open={open} onOpenChange={setOpen} items={items} />'
-    },
-    {
-      label: "Keyboard shortcut with no visible trigger",
-      code: "useCommandMenuShortcut(() => setOpen((value) => !value))\n<CommandMenu open={open} onOpenChange={setOpen} items={items} />"
-    }
-  ]
-};
-function DotsMenu({
-  children,
-  align = "end",
-  label = "More actions",
-  icon = "ellipsis",
-  size = "icon"
-}) {
-  return /* @__PURE__ */ jsxs(Menu, { children: [
-    /* @__PURE__ */ jsx(
-      MenuTrigger,
-      {
-        render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size, "aria-label": label, children: /* @__PURE__ */ jsx(Icon, { name: icon }) })
-      }
-    ),
-    /* @__PURE__ */ jsx(MenuContent, { align, children })
-  ] });
-}
-DotsMenu.displayName = "DotsMenu";
-
-// src/components/dots-menu/dots-menu.meta.ts
-var dotsMenuMeta = {
-  name: "DotsMenu",
-  summary: "An overflow ellipsis icon button that opens a Menu. Composes our Menu + Button + Icon \u2014 pass MenuItems as children and it wires the ghost icon trigger, accessible label, and portal-rendered content. All keyboard, focus, and dismissal behavior comes through Menu.",
-  status: "stable",
-  keywords: [
-    "dots menu",
-    "more actions",
-    "overflow",
-    "kebab"
-  ],
-  usage: {
-    description: "Use DotsMenu for compact overflow actions when the primary action is already visible elsewhere.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use it for secondary commands that belong to a row, card, or toolbar item."
-      },
-      {
-        guidance: "do",
-        description: "Keep labels explicit so the icon-only trigger does not obscure the command meaning."
-      },
-      {
-        guidance: "dont",
-        description: "Do not hide the most important or most frequent action inside DotsMenu."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use it as the only affordance on a touch surface. It is revealed on hover in most layouts, and hover does not exist on touch \u2014 pair it with a visible action or make it always-visible there."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Menu",
-      "ContextMenu"
-    ]
-  },
-  props: [
-    {
-      name: "children",
-      type: "ReactNode",
-      default: "\u2014",
-      description: "The menu rows \u2014 MenuItem / MenuSeparator / MenuGroup, etc. Rendered inside MenuContent."
+      description: `The search field in a header that is really a button. Wears SearchInput's shell (border-input, card surface, leading magnifier, muted placeholder) on the control ladder, with a trailing Kbd: \u2318K on macOS, Ctrl K elsewhere. onOpen runs on click and on the shortcut, which it listens for page-wide (useCommandMenuShortcut). shortcut is the key (default "k"); false drops both the hint and the listener. size is sm in a header beside small buttons, md (default) beside Input and SearchInput. It sits outside CommandMenu, so the Dialog returns focus to it on close.`
     },
     {
-      name: "align",
-      type: "'start' | 'center' | 'end'",
-      default: "end",
-      description: "Alignment of the popup along its side. Overflow menus typically right-align under the trigger; 'start' anchors the popup's left edge to the trigger instead."
+      name: "useCommandMenuShortcut",
+      type: "(onShortcut: (event: KeyboardEvent) => void, key?: string | false) => void",
+      description: `The page-wide \u2318K / Ctrl+K listener CommandMenuTrigger installs, for a palette with no visible trigger. Ignored while focus is in a text field, textarea, select or contenteditable (Ctrl+K belongs to the field there) except the palette's own input, so the callback may toggle. It calls preventDefault() on a match and skips an event already prevented, so two listeners on one page fire once. key defaults to "k"; false turns it off. Removed on unmount.`
     },
     {
-      name: "label",
-      type: "string",
-      default: "More actions",
-      description: "Accessible label (aria-label) for the icon-only trigger button."
+      name: "CommandMenuPanel",
+      type: "{ items?: CommandItem[]; query?: string; onQueryChange?: (query: string) => void; filter?: CommandFilter; listClassName?: string; placeholder?: string; emptyMessage?: string; title?: string; scope?: ReactNode; inputProps?: ComponentProps<'input'>; className?: string; children?: ReactNode }",
+      description: "The palette rendered in place: the same search header, filtered and grouped listbox, keyboard model and result-count live region, on a static card (border-border, bg-card, no shadow) instead of in a Dialog. Takes every CommandMenu prop except open, onOpenChange, finalFocus and description; className lands on the card, title names the listbox. Focus is not trapped and the input does not take focus on mount (inputProps.autoFocus opts in). Esc clears the query, and passes through once it is empty, so a Popover around the panel still closes. A chosen row runs its onSelect and the panel stays as it was. The page-wide shortcut does not fire from its input."
     },
     {
-      name: "icon",
-      type: "string",
-      default: "ellipsis",
-      description: "Semantic icon name rendered in the trigger."
+      name: "CommandMenuGroup",
+      type: "{ label: string; children }",
+      description: "A labelled group of command rows."
     },
     {
-      name: "size",
-      type: "'icon' | 'icon-sm' | 'icon-xs'",
-      default: "icon",
-      description: "The trigger's rung on the icon-button ladder. 'icon' for a card or page header; 'icon-sm' or 'icon-xs' in a list row or dense toolbar, so the trigger does not set the row height."
+      name: "CommandMenuItem",
+      type: "{ onSelect?: () => void; icon?: string; detail?: ReactNode; hint?: ReactNode; disabled?: boolean; id?: string; children }",
+      description: "A selectable row. Self-filters by its text (unless the root was given a filter), runs onSelect, then closes the palette. detail is secondary text after the label; hint is the end-aligned trailing slot \u2014 a shortcut, a count, or a disabled row's reason. A disabled row stays listed, stays announced, and stays reachable by arrow key so its reason can be read, but is inert to Enter and to a click."
     }
   ],
-  variants: {
-    size: ["icon", "icon-sm", "icon-xs"]
-  },
   tokensUsed: [
-    "popover",
-    "popover-foreground",
+    "card",
+    "card-foreground",
     "border",
+    "foreground",
+    "muted-foreground",
     "accent",
-    "accent-foreground",
-    "muted-foreground"
+    "accent-foreground"
   ],
   a11y: [
-    "The icon-only trigger is labeled via aria-label (label prop, default 'More actions').",
-    "Menu provides role=menu/menuitem, roving tabindex, arrow-key navigation, and typeahead via Base UI.",
-    "Esc and outside-press dismiss; focus returns to the trigger on close."
+    "CommandMenuTrigger is a real <button> named by its visible placeholder, with aria-haspopup=dialog and aria-keyshortcuts (Meta+K on macOS, Control+K elsewhere). Its Kbd hint is aria-hidden, so the shortcut is announced once rather than read as part of the name.",
+    "The shortcut never fires from inside a text field, textarea, select or contenteditable (Ctrl+K is delete-to-end-of-line in macOS text views), except the palette's own input.",
+    "CommandMenuPanel is the same combobox and listbox in the page, with no dialog: it does not trap or steal focus, and Esc clears a non-empty query (stopping there) instead of dismissing. With an empty query Esc is left alone for whatever contains the panel.",
+    "Built on Base UI Dialog, so focus trap, scroll lock, and Esc/outside dismissal come for free; the dialog carries a visually-hidden title + description so it is announced.",
+    "Follows the ARIA combobox pattern: the search input is role=combobox (aria-autocomplete=list) that owns the role=listbox popup via aria-controls.",
+    "ArrowDown/ArrowUp/Home/End and PageUp/PageDown move a virtual aria-activedescendant highlight while focus stays in the input; Enter runs the highlighted command. Arrow keys wrap; page jumps clamp.",
+    "Groups expose role=group labelled by their heading; items are role=option and never enter the tab order.",
+    "A polite role=status live region announces the result count as the query narrows, so the size of the list is available without reading it.",
+    "A disabled row carries aria-disabled and is skipped when seeding the highlight, but stays in the arrow-key walk so its reason can be reached and read.",
+    "The component keeps ownership of aria-activedescendant even when a caller claims a key through inputProps.onKeyDown. Skipping a move is coherent (they took responsibility for that key), but nothing may leave the active id naming a row that is not painted as active \u2014 so the opt-out returns before any highlight change rather than after it.",
+    "Exactly one row is ever painted as active: the pointer takes the highlight over (moving onto a row makes it the aria-activedescendant) rather than adding a hover fill of its own, so what looks highlighted is always what Enter will run."
   ],
   examples: [
     {
-      label: "Basic",
-      code: '<DotsMenu label="Post actions"><MenuItem>Edit</MenuItem><MenuItem>Share</MenuItem><MenuSeparator /><MenuItem variant="destructive">Delete</MenuItem></DotsMenu>'
+      label: "Data-driven",
+      code: "<CommandMenu open={open} onOpenChange={setOpen} items={[{ group: 'Navigation', label: 'Go to feed', icon: 'home', onSelect: () => {} }, { group: 'Actions', label: 'New post', onSelect: () => {} }]} />"
+    },
+    {
+      label: "Declarative",
+      code: "<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label='Navigation'><CommandMenuItem icon='home' onSelect={() => {}}>Go to feed</CommandMenuItem></CommandMenuGroup></CommandMenu>"
+    },
+    {
+      label: "Grouped launcher",
+      code: '<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label="Create"><CommandMenuItem icon="plus" onSelect={() => createPost()}>New post</CommandMenuItem><CommandMenuItem icon="sparkles" onSelect={() => createEdition()}>New edition</CommandMenuItem></CommandMenuGroup><CommandMenuGroup label="Navigation"><CommandMenuItem icon="home" onSelect={() => navigate("/")}>Home</CommandMenuItem><CommandMenuItem icon="gear" onSelect={() => navigate("/settings")}>Settings</CommandMenuItem></CommandMenuGroup></CommandMenu>'
+    },
+    {
+      label: "Consumer-owned ranking",
+      code: "<CommandMenu open={open} onOpenChange={setOpen} query={query} onQueryChange={setQuery} filter={(items, q) => rank(items, q)} items={items} />"
+    },
+    {
+      label: "Listed but unavailable",
+      code: "<CommandMenu open={open} onOpenChange={setOpen} items={[{ group: 'Layers', label: 'Align left', disabled: true, hint: 'Select another layer to align to', onSelect: () => {} }]} />"
+    },
+    {
+      label: "Inline panel",
+      code: `<CommandMenuPanel className="w-80" items={[{ group: 'Create', label: 'New project', icon: 'plus', hint: <Kbd>N</Kbd>, onSelect: () => {} }, { group: 'Settings', label: 'Open settings', icon: 'gear', onSelect: () => {} }]} />`
+    },
+    {
+      label: "Header search trigger",
+      code: '<CommandMenuTrigger size="sm" placeholder="Search docs" onOpen={() => setOpen(true)} className="w-56" />\n<CommandMenu open={open} onOpenChange={setOpen} items={items} />'
     },
     {
-      label: "With leading icons",
-      code: '<DotsMenu><MenuItem><Icon name="check" className="text-sm" />Mark as read</MenuItem><MenuSeparator /><MenuItem variant="destructive"><Icon name="xmark" className="text-sm" />Delete</MenuItem></DotsMenu>'
+      label: "Keyboard shortcut with no visible trigger",
+      code: "useCommandMenuShortcut(() => setOpen((value) => !value))\n<CommandMenu open={open} onOpenChange={setOpen} items={items} />"
     }
   ]
 };
@@ -13711,7 +11868,7 @@ var contextCardMeta = {
     },
     {
       label: "With stat row",
-      code: "<ContextCard><ContextCardTrigger render={<a href='/u/nyx' className='text-title-sm underline-offset-2 hover:underline'>@nyx</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='NY' size='lg' />} title='Nyx' subtitle='@nyx' /><Description cols='2' className='mt-4 border-t border-border pt-3'><DescriptionItem term='Posts' detail='128' /><DescriptionItem term='Followers' detail='4.2k' /></Description></ContextCardContent></ContextCard>"
+      code: "<ContextCard><ContextCardTrigger render={<a href='/u/nyx' className='text-title-sm underline-offset-2 hover:underline'>@nyx</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='NY' size='lg' />} title='Nyx' subtitle='@nyx' /><div className='@container mt-4 border-t border-border pt-3'><dl className='sable-list-dl sable-list-dl-2'><dt>Posts</dt><dd>128</dd><dt>Followers</dt><dd>4.2k</dd></dl></div></ContextCardContent></ContextCard>"
     }
   ]
 };
@@ -14115,359 +12272,6 @@ var scrollerMeta = {
     }
   ]
 };
-function DestructiveActionModal({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel = "Delete",
-  cancelLabel = "Cancel",
-  onConfirm,
-  pending,
-  confirmingLabel,
-  children,
-  confirmText
-}) {
-  const [typed, setTyped] = useState("");
-  const [internalBusy, setInternalBusy] = useState(false);
-  const inFlight = useRef(false);
-  const cancelRef = useRef(null);
-  const controlledPending = pending !== void 0;
-  const busy = pending ?? internalBusy;
-  useEffect(() => {
-    if (!open) {
-      setTyped("");
-    }
-  }, [open]);
-  const requiresMatch = typeof confirmText === "string" && confirmText.length > 0;
-  const matched = !requiresMatch || typed === confirmText;
-  async function handleConfirm() {
-    if (!matched || busy || inFlight.current) {
-      return;
-    }
-    inFlight.current = true;
-    try {
-      const result = onConfirm();
-      if (controlledPending) {
-        return;
-      }
-      if (result instanceof Promise) {
-        setInternalBusy(true);
-        try {
-          await result;
-          setInternalBusy(false);
-          onOpenChange(false);
-        } catch {
-          setInternalBusy(false);
-        }
-      } else {
-        onOpenChange(false);
-      }
-    } finally {
-      inFlight.current = false;
-    }
-  }
-  function handleOpenChange(next) {
-    if (busy && !next) {
-      return;
-    }
-    onOpenChange(next);
-  }
-  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { initialFocus: cancelRef, children: [
-    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-      /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
-      description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
-    ] }),
-    children != null || requiresMatch ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      children,
-      requiresMatch ? /* @__PURE__ */ jsx(
-        Field,
-        {
-          label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            "Type ",
-            /* @__PURE__ */ jsx(Code, { children: confirmText }),
-            " to confirm"
-          ] }),
-          children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: typed,
-              onChange: (event) => setTyped(event.target.value),
-              placeholder: confirmText,
-              autoComplete: "off",
-              autoCapitalize: "off",
-              spellCheck: false
-            }
-          )
-        }
-      ) : null
-    ] }) : null,
-    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-      /* @__PURE__ */ jsx(
-        AlertDialogClose,
-        {
-          render: /* @__PURE__ */ jsx(Button, { ref: cancelRef, variant: "secondary", disabled: busy, children: cancelLabel })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "destructive",
-          loading: busy,
-          loadingLabel: confirmingLabel ?? confirmLabel,
-          disabled: !matched,
-          onClick: handleConfirm,
-          children: confirmLabel
-        }
-      )
-    ] })
-  ] }) });
-}
-DestructiveActionModal.displayName = "DestructiveActionModal";
-
-// src/components/destructive-action-modal/destructive-action-modal.meta.ts
-var destructiveActionModalMeta = {
-  name: "DestructiveActionModal",
-  summary: "Confirmation modal for irreversible actions, built on AlertDialog (role=alertdialog; a backdrop click does not dismiss). Pairs a secondary Cancel with a destructive confirm; awaits an async onConfirm (spinner + stays open on failure) or takes an external pending flag; optional body slot and type-to-confirm guard for high-stakes deletions.",
-  status: "stable",
-  keywords: [
-    "destructive",
-    "modal",
-    "confirmation",
-    "danger"
-  ],
-  usage: {
-    description: "Use DestructiveActionModal to confirm irreversible or high-risk actions before they run.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Name the affected object and the consequence of the action in plain language."
-      },
-      {
-        guidance: "do",
-        description: "Make the destructive action visually distinct from the cancel path."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use it for routine low-risk actions where undo or inline confirmation would be faster."
-      },
-      {
-        guidance: "dont",
-        description: "Do not put the destructive action where Cancel usually sits, or make it the default focus. A confirmation dialog exists to add friction; autofocusing Delete removes the friction it was added for."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Dialog",
-      "Button",
-      "Banner"
-    ]
-  },
-  props: [
-    {
-      name: "open",
-      type: "boolean",
-      description: "Controlled open state."
-    },
-    {
-      name: "onOpenChange",
-      type: "(open: boolean) => void",
-      description: "Called when the open state should change (Esc, Cancel, or confirm). A backdrop click does not dismiss."
-    },
-    {
-      name: "title",
-      type: "ReactNode",
-      description: "Modal heading \u2014 names the irreversible action."
-    },
-    {
-      name: "description",
-      type: "ReactNode",
-      description: "Optional supporting copy explaining the consequence."
-    },
-    {
-      name: "confirmLabel",
-      type: "string",
-      default: '"Delete"',
-      description: "Label for the destructive confirm button."
-    },
-    {
-      name: "cancelLabel",
-      type: "string",
-      default: '"Cancel"',
-      description: "Label for the dismissing secondary button."
-    },
-    {
-      name: "onConfirm",
-      type: "() => void | Promise<void>",
-      description: "Called when the user confirms. If it returns a Promise the modal shows an in-flight spinner, closes on resolve, and stays open on reject; if void it closes immediately (unless pending is controlled)."
-    },
-    {
-      name: "pending",
-      type: "boolean",
-      description: "Externally-driven in-flight state. Overrides the internal await tracking; the parent owns closing (the modal stays open on a synchronous confirm)."
-    },
-    {
-      name: "confirmingLabel",
-      type: "string",
-      default: "confirmLabel",
-      description: "Confirm-button label shown while the action is in flight."
-    },
-    {
-      name: "children",
-      type: "ReactNode",
-      description: "Body content rendered between the description and the type-to-confirm Input / footer \u2014 e.g. a warning <Note>."
-    },
-    {
-      name: "confirmText",
-      type: "string",
-      description: "When set, renders an Input the user must type matching to enable the destructive confirm button."
-    }
-  ],
-  tokensUsed: [
-    "card",
-    "card-foreground",
-    "border",
-    "muted-foreground",
-    "foreground",
-    "input",
-    "destructive",
-    "destructive-foreground",
-    "secondary",
-    "secondary-foreground"
-  ],
-  a11y: [
-    `Built on AlertDialog (Base UI): role="alertdialog", focus trapping, scroll lock, and aria-modal. Esc dismisses; a click on the backdrop does not, so a stray click can't throw away the decision.`,
-    "Focus opens on Cancel \u2014 the safe action \u2014 even when a type-to-confirm Input comes first, so a reflexive Enter never fires the destructive action.",
-    "The title labels the modal; the description describes it.",
-    "The type-to-confirm Input is wired to its label via htmlFor; the destructive Button is disabled (not just hidden) until the text matches.",
-    "While a confirm is in flight (awaited onConfirm or pending), both buttons disable, the confirm Button sets aria-busy, and Esc dismissal is blocked so the action can't be interrupted or double-fired."
-  ],
-  examples: [
-    {
-      label: "Basic",
-      code: "<DestructiveActionModal open={open} onOpenChange={setOpen} title='Delete post?' description='This permanently removes the post. This cannot be undone.' onConfirm={handleDelete} />"
-    },
-    {
-      label: "Async confirm (awaited spinner)",
-      code: "<DestructiveActionModal open={open} onOpenChange={setOpen} title='Block user?' description='They can no longer interact with you.' confirmLabel='Block' confirmingLabel='Blocking\u2026' onConfirm={() => blockUser(id)} />"
-    },
-    {
-      label: "Body slot + type-to-confirm",
-      code: "<DestructiveActionModal open={open} onOpenChange={setOpen} title='Delete this post?' confirmText='gold rush' confirmLabel='Delete forever' onConfirm={handleDelete}><Note tone='warning'>Collectors who minted this edition keep their copies.</Note></DestructiveActionModal>"
-    }
-  ]
-};
-function Browser({ url, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn("overflow-hidden rounded-xl border border-border bg-card shadow-sm", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "grid h-11 grid-cols-[1fr_minmax(0,28rem)_1fr] items-center gap-3 border-b border-border px-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-muted" }),
-              /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-muted" }),
-              /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-muted" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2.5 text-muted-foreground sm:flex", children: [
-              /* @__PURE__ */ jsx(Icon, { name: "chevron-left", className: "text-sm" }),
-              /* @__PURE__ */ jsx(Icon, { name: "chevron-right", className: "text-sm opacity-50" }),
-              /* @__PURE__ */ jsx(Icon, { name: "refresh", className: "text-sm" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex h-7 min-w-0 items-center justify-center gap-1.5 rounded-md bg-muted px-3 text-muted-foreground", children: [
-            url ? /* @__PURE__ */ jsx(Icon, { name: "lock", className: "shrink-0 text-xs" }) : null,
-            /* @__PURE__ */ jsx("span", { className: "truncate text-body-sm", children: url ?? "" })
-          ] }),
-          /* @__PURE__ */ jsx("div", {})
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "bg-background", children })
-      ]
-    }
-  );
-}
-Browser.displayName = "Browser";
-
-// src/components/browser/browser.meta.ts
-var browserMeta = {
-  name: "Browser",
-  summary: "A generic, current browser window: one compact toolbar (window controls, back/forward/reload, a centered address field) around page content.",
-  status: "stable",
-  keywords: [
-    "browser",
-    "mockup",
-    "preview",
-    "website"
-  ],
-  usage: {
-    description: "Use Browser to frame a website or product surface preview when the browser chrome is part of the story.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use it for documentation, product examples, and visual previews where the page context matters."
-      },
-      {
-        guidance: "do",
-        description: "Keep the framed content simple enough to remain legible at the rendered size."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use Browser for real navigation, real forms, or arbitrary card decoration."
-      },
-      {
-        guidance: "dont",
-        description: "Do not put a real, working URL in the address pill. It reads as a link, is not one, and invites a click that does nothing."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Phone",
-      "Card"
-    ]
-  },
-  props: [
-    {
-      name: "url",
-      type: "string",
-      description: "Address shown in the centered address pill. Omit for a blank pill."
-    },
-    {
-      name: "children",
-      type: "ReactNode",
-      description: "Page content rendered inside the content region."
-    }
-  ],
-  tokensUsed: ["card", "background", "border", "muted", "muted-foreground"],
-  a11y: [
-    "Purely presentational chrome; the framed content carries its own semantics.",
-    "The toolbar is drawn, not interactive, and hidden from assistive technology; the address is decorative text."
-  ],
-  examples: [
-    {
-      label: "Framing a page",
-      code: '<Browser url="studio.example/explore"><div className="p-8"><PageHeader title="Explore" description="Trending posts from every chain." /></div></Browser>'
-    },
-    {
-      label: "Mockup, not chrome",
-      code: `// Browser is DECORATIVE framing for a screenshot or a demo \u2014 it belongs on a
-// marketing page, never around your actual app.
-
-<Region max="wide">
-  <Browser url="studio.example">
-    <img src="/screenshots/editor.png" alt="The editor" />
-  </Browser>
-</Region>
-
-// \u2717 Wrapping live UI in it. The frame implies "this is a picture of software";
-//   putting real controls inside makes users hunt for a browser that isn't there.
-// \u2717 Using it to fake a URL bar for credibility. Show the real product.`
-    }
-  ]
-};
 var PLAY_MARK = "flex size-14 items-center justify-center rounded-full bg-overlay/85 text-overlay-foreground shadow-sm";
 function Video({
   src,
@@ -14809,7 +12613,7 @@ function Marquee({
             size: "icon-xs",
             onClick: togglePlay,
             "aria-label": isPaused ? "Play" : "Pause",
-            className: "absolute right-1 top-1 z-10",
+            className: "absolute end-2 top-2 z-10",
             children: /* @__PURE__ */ jsx(PlayPauseGlyph, { playing: !isPaused })
           }
         ),
@@ -15457,6 +13261,6 @@ var carouselMeta = {
 };
 
 // src/index.ts
-var SABLE_UI_VERSION = "0.1.0";
+var SABLE_UI_VERSION = "0.2.0";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Browser, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, Checkbox, CheckboxCard, CheckboxGroup, Code, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsMenu, EmptyState, Feedback, FileDropzone, GlidingHighlight, InlineStatus, Kbd, Marquee, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MiddleTruncate, Note, NotificationBadge, NumberField, OtpField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, Scroller, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, SideNav, SideNavGroup, SideNavItem, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, StatusBar, StatusBarGroup, StatusBarSeparator, Stepper, StepperItem, TRANSPARENT, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroup, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, bannerMeta, bannerVariants, breadcrumbsMeta, browserMeta, calendarMeta, carouselMeta, checkboxCardMeta, checkboxMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, destructiveActionModalMeta, dialogMeta, dotsMenuMeta, emptyStateMeta, feedbackMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, kbdMeta, marqueeMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, skeletonMeta, sliderMeta, statusBarMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, tabsMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, treeIndent, treeMeta, useComboboxFilteredItems, useCommandMenuShortcut, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, Checkbox, CheckboxCard, CheckboxGroup, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, Feedback, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, GlidingHighlight, InlineStatus, Kbd, KbdGroup, Marquee, MiddleTruncate, Note, NumberField, OtpField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, Scroller, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, StatusBar, StatusBarGroup, StatusBarSeparator, Stepper, StepperItem, TRANSPARENT, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroup, Toggle as ToggleGroupItem, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, bannerMeta, bannerVariants, breadcrumbsMeta, calendarMeta, carouselMeta, checkboxCardMeta, checkboxMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, kbdMeta, marqueeMeta, middleTruncateMeta, noteMeta, noteVariants, numberFieldMeta, otpFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, sliderMeta, statusBarMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, treeIndent, treeMeta, useComboboxFilteredItems, useCommandMenuShortcut, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };