@sableui/react 0.2.0 → 0.3.1

package/dist/index.js

@@ -1,31 +1,30 @@
+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';
 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-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 { AppHeader, AppShell, BottomNav, BottomNavItem, Browser, ChatComposer, DataTable, EmptyState, Marker, MessageScroller, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, NotificationBadge, PageHeader, Presence, RelativeTime, Reveal, SearchInput, SettingsMenu, SettingsRow, SideNav, SideNavGroup, SideNavItem, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Skeleton, StreamingText, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, ViewTransitionName, appHeaderMeta, appShellMeta, bottomNavMeta, browserMeta, chatComposerMeta, dataTableMeta, emptyStateMeta, markerMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, pageHeaderMeta, relativeTimeMeta, searchInputMeta, settingsMenuMeta, sideNavMeta, sidebarMeta, skeletonMeta, startViewTransition, streamingTextMeta, supportsViewTransitions, tabsMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, useInView, useSidebar } from './chunk-6LCIBMMG.js';
+import { SELECTION_CARD_CHECKED, CartesianChart, resolveSeries, chartFormatters, categoryText, numberValue, niceTicks, ChartFrame, polar, riseTransition, stagger, pathStyle, morphTransition, ChartLegend, RADIO_DOT, RADIO_RING, SELECTION_CARD_TILE_HEAD, SELECTION_CARD_GLYPH, SELECTION_CARD_SHELL, SELECTION_CARD_LAYOUT, CheckboxMark, CHECK_BOX, SEGMENTED_STEP, SEGMENTED_ITEM, SEGMENTED_TRACK, ToggleGroup, Toggle, approxTextWidth, ChartTooltipContent } from './chunk-WCFLQVK5.js';
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AreaChart, BarChart, CHART_SERIES_COUNT, Checkbox, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, DateTile, Kbd, KbdGroup, OtpField, PieChart, RadialChart, SEGMENTED_BAR_TONES, Scroller, SegmentedBar, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, Stepper, StepperItem, Toggle, ToggleGroup, Toggle as ToggleGroupItem, accordionMeta, areaChartMeta, barChartMeta, chartColor, toneColor as chartToneColor, checkboxMeta, commandMenuMeta, dateTileMeta, kbdMeta, otpFieldMeta, pieChartMeta, radialChartMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, sliderMeta, sparklineMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, toggleMeta, useCommandMenuShortcut } from './chunk-WCFLQVK5.js';
+import { withPortalThemeScope, FIELD_SHELL_XS, useTypeTier, useDensity, FIELD_SHELL, MOBILE_FIELD_TIER, useMotion, HighlightGlide, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, buttonVariants, FIELD_INVALID, Select, SelectTrigger, SelectContent, SelectItem, Button, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, DensityProvider, Input, Textarea, Progress } from './chunk-CKNM7KSB.js';
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, Field, Form, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useMotion, useReducedMotion, useScrollActivity, useTypeTier } from './chunk-CKNM7KSB.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';
-import { Icon } from './chunk-PAOZBZME.js';
-export { Icon, IconProvider, composeIconSets, useIconSet } from './chunk-PAOZBZME.js';
-export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './chunk-5Z5KLOAU.js';
-import { featuredThemeManifests, defaultThemeId } from './chunk-L6Y46C62.js';
-export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, defaultThemeId, getThemeManifest, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from './chunk-L6Y46C62.js';
+import { Icon } from './chunk-NGBDP3BM.js';
+export { Icon, IconProvider, composeIconSets, useIconSet } from './chunk-NGBDP3BM.js';
+export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './chunk-TH563WLW.js';
+import { featuredThemeManifests, defaultThemeId } from './chunk-MXJX3NZI.js';
+export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, defaultThemeId, getThemeManifest, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from './chunk-MXJX3NZI.js';
+import './chunk-7MG4SHYX.js';
 import './chunk-KO3NAEBF.js';
 import './chunk-L4IEIQQA.js';
 import './chunk-EP55KSYA.js';
 import './chunk-ADLLDWLW.js';
 import './chunk-K7RUHUGC.js';
 import './chunk-YXBOYWBN.js';
-import './chunk-7MG4SHYX.js';
 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, useEffect, useLayoutEffect, Children, isValidElement, useContext, useMemo, useCallback, useSyncExternalStore } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useId, useRef, useState, useEffect, useLayoutEffect, useContext, useMemo, useCallback, useSyncExternalStore, Children } from 'react';
 import { cva } from 'class-variance-authority';
-import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
-import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
-import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
 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';
@@ -33,12 +32,11 @@ import { Drawer } from '@base-ui/react/drawer';
 import { DayPicker } from 'react-day-picker';
 import { format, setHours, setMinutes, setMilliseconds, setSeconds } from 'date-fns';
 import { Toast } from '@base-ui/react/toast';
-import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
 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 { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
+import { Checkbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
 import { PreviewCard } from '@base-ui/react/preview-card';
 
@@ -251,6 +249,7 @@ var componentGuidance = {
 var COMPONENT_GROUPS = [
   "Actions",
   "Badges & pills",
+  "Charts",
   "Chat & AI",
   "Containers",
   "Data display",
@@ -266,13 +265,13 @@ var COMPONENT_GROUPS = [
 ];
 var COMPONENT_TAXONOMY = {
   /* ── Actions ──────────────────────────────────────────────────────────────
-     Things whose whole purpose is to DO something on activation. `DotsMenu`
+     Things whose whole purpose is to DO something on activation. `OverflowMenu`
      is here, not in Overlays: it is the "more actions" button a reader reaches
      for as an action (and the options half of Button's "main action with
      options" pattern) — that its list opens in a layer is how it works, not
      what it is. Copying is `useCopy` on a Button, not a component. */
   Button: ["Actions", "either"],
-  DotsMenu: ["Actions", "either"],
+  OverflowMenu: ["Actions", "either"],
   Toolbar: ["Actions", "either"],
   /* ── Forms ────────────────────────────────────────────────────────────────
      Typing or entering a value, and the structure a form is built from.
@@ -354,15 +353,30 @@ var COMPONENT_TAXONOMY = {
   Collapsible: ["Containers", "either"],
   Scroller: ["Containers", "either"],
   Separator: ["Containers", "either"],
+  /* ── Charts ───────────────────────────────────────────────────────────────
+     Plotted data for dashboards, landing pages and decks: SVG on the theme's
+     tones, with arrival and data-change motion and a data table for assistive
+     tech. Data-heavy apps (streaming, zoom, thousands of points) belong on a
+     charting library. `SegmentedBar` and `Meter` stay in Data display: they
+     are readings, not plots. */
+  AreaChart: ["Charts", "page"],
+  BarChart: ["Charts", "page"],
+  LineChart: ["Charts", "page"],
+  PieChart: ["Charts", "page"],
+  RadarChart: ["Charts", "page"],
+  RadialChart: ["Charts", "page"],
+  Sparkline: ["Charts", "either"],
   /* ── Data display ─────────────────────────────────────────────────────────
      Showing records and readings. `Meter` (bar or ring) is here: it shows a
      value within a known range (a reading), which is not loading or progress. */
   Avatar: ["Data display", "either"],
   DataTable: ["Data display", "either"],
+  DateTile: ["Data display", "page"],
   Entity: ["Data display", "either"],
   GlidingHighlight: ["Data display", "either"],
   Meter: ["Data display", "either"],
   RelativeTime: ["Data display", "either"],
+  SegmentedBar: ["Data display", "either"],
   Table: ["Data display", "either"],
   /* ── Badges & pills ───────────────────────────────────────────────────────
      Small labelled shapes. `Badge` (with `dot`) / `StatusDot` belong HERE, not in
@@ -598,255 +612,6 @@ var numberFieldMeta = {
     }
   ]
 };
-var otpExports = Object.fromEntries(Object.entries(OtpParts));
-var Base2 = otpExports.OTPField ?? otpExports.OTPFieldPreview;
-var defaultSlotLabel = (index, length) => `Character ${index + 1} of ${length}`;
-function OtpField({
-  className,
-  length = 6,
-  groupSize,
-  getSlotLabel = defaultSlotLabel,
-  "aria-invalid": ariaInvalid,
-  ...root
-}) {
-  const invalid = ariaInvalid === true || ariaInvalid === "true";
-  return /* @__PURE__ */ jsx(
-    Base2.Root,
-    {
-      length,
-      "data-invalid": invalid ? "" : void 0,
-      className: cn("inline-flex max-w-full items-center gap-2", className),
-      ...root,
-      children: Array.from({ length }, (_, index) => (
-        // Slots are positional and never reorder, so the index is the identity.
-        // biome-ignore lint/suspicious/noArrayIndexKey: positional slots
-        /* @__PURE__ */ jsxs(Fragment, { children: [
-          groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-otp-gap": "",
-              className: "h-px w-2 shrink-0 bg-border-strong"
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(
-            Base2.Input,
-            {
-              "aria-label": index === 0 ? void 0 : getSlotLabel(index, length),
-              "aria-invalid": invalid || void 0,
-              className: cn(
-                "h-(--control-lg) w-(--control-md) min-w-0 text-center text-mono-lg text-foreground caret-primary",
-                // 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 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
-              )
-            }
-          )
-        ] }, index)
-      ))
-    }
-  );
-}
-OtpField.displayName = "OtpField";
-
-// src/components/otp-field/otp-field.meta.ts
-var otpFieldMeta = {
-  name: "OtpField",
-  summary: "One-time-code entry over Base UI's OTP Field \u2014 one slot per character, SMS autofill on the first slot, paste fills every slot, and only one tab stop for the whole code.",
-  status: "stable",
-  keywords: [
-    "otp",
-    "one-time code",
-    "one-time password",
-    "verification code",
-    "2fa",
-    "two-factor",
-    "mfa",
-    "pin",
-    "passcode",
-    "input otp"
-  ],
-  usage: {
-    description: "Use OtpField for a short, fixed-length code the user copies from somewhere else \u2014 an SMS or email verification code, an authenticator app, a device pairing PIN. The slots show how long the code is and where the user is in it, which a plain Input cannot.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Set `length` to the exact length the server sends, and verify in `onValueComplete` (or with `autoSubmit` inside a form). Most users paste or autofill the whole code at once, so the moment of completion is the natural submit."
-      },
-      {
-        guidance: "do",
-        description: 'Label it through a `Field` ("Verification code") and say where the code was sent in the description. The first slot takes the field\'s name; the rest are announced by position.'
-      },
-      {
-        guidance: "do",
-        description: "Use `groupSize` for codes of 6 or more so the user can check the code in chunks against the message they are reading from."
-      },
-      {
-        guidance: "dont",
-        description: 'Do not use OtpField for a password, an arbitrary-length PIN, or anything the user types from memory. Slots promise a fixed length; use Input with `type="password"` and `autocomplete="current-password"` instead.'
-      },
-      {
-        guidance: "dont",
-        description: "Do not intercept paste or clear the field on a wrong code before the user has seen the error. Blocking paste breaks SMS autofill and password managers, and wiping the slots erases the evidence of which digit was wrong."
-      },
-      {
-        guidance: "dont",
-        description: "Do not swap it for NumberField because the code is digits. A code is an identifier, not a quantity: NumberField strips leading zeros and offers steppers that make no sense here."
-      }
-    ],
-    anatomy: [
-      {
-        name: "Root",
-        required: true,
-        description: "A role=group that holds the value, carries the field label and description, and reports completion."
-      },
-      {
-        name: "Slot",
-        required: true,
-        description: 'One input per character. The first carries autocomplete="one-time-code" and accepts the whole code.'
-      },
-      {
-        name: "Group gap",
-        required: false,
-        description: "A decorative dash inserted every `groupSize` slots; hidden from assistive tech."
-      }
-    ]
-  },
-  related: {
-    components: ["Input", "Form", "NumberField"]
-  },
-  props: [
-    {
-      name: "length",
-      type: "number",
-      default: "6",
-      description: "Number of character slots. Completion fires when every slot is filled."
-    },
-    {
-      name: "groupSize",
-      type: "number",
-      description: "Insert a visual gap every N slots (3 renders 123 \u2013 456). The value stays one contiguous string."
-    },
-    {
-      name: "value / defaultValue",
-      type: "string",
-      description: "Controlled / uncontrolled code."
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string, details) => void",
-      description: "Fires on every edit. `details.reason` is input-change, input-clear, input-paste or keyboard."
-    },
-    {
-      name: "onValueComplete",
-      type: "(value: string, details) => void",
-      description: "Fires once every slot is filled \u2014 the place to verify the code. Also fires when a complete code is pasted over a complete value."
-    },
-    {
-      name: "onValueInvalid",
-      type: "(attempted: string, details) => void",
-      description: "Fires when typed or pasted text contains characters `validationType` rejects, so you can explain the rejection rather than letting it vanish."
-    },
-    {
-      name: "validationType",
-      type: '"numeric" | "alpha" | "alphanumeric" | "none"',
-      default: '"numeric"',
-      description: "Which characters a slot accepts. Also picks the virtual keyboard (numeric \u2192 number pad)."
-    },
-    {
-      name: "autoSubmit",
-      type: "boolean",
-      default: "false",
-      description: "Submit the owning form when the code becomes complete."
-    },
-    {
-      name: "mask",
-      type: "boolean",
-      default: "false",
-      description: "Render slots as password inputs. Only for codes that are secret on screen, such as a card PIN."
-    },
-    {
-      name: "getSlotLabel",
-      type: "(index: number, length: number) => string",
-      default: "Character N of L",
-      description: "Accessible name for slots after the first. Override to localize."
-    },
-    {
-      name: "aria-invalid",
-      type: "boolean",
-      description: "Marks every slot invalid (destructive border). `<Field error>` sets it for you."
-    },
-    {
-      name: "disabled / readOnly / required / name / id / form",
-      type: "\u2014",
-      description: "Standard form-control props. `id` lands on the first slot, so `<Field>` and `<label htmlFor>` name the field."
-    }
-  ],
-  tokensUsed: [
-    "input",
-    "card",
-    "foreground",
-    "muted-foreground",
-    "border-strong",
-    "primary",
-    "ring",
-    "destructive"
-  ],
-  motion: [
-    {
-      slot: "arrival",
-      recipe: "none",
-      part: "Root",
-      why: "A code field is part of the form it sits in and appears with it. Animating it in would delay the one thing the user arrived to do \u2014 paste the code they just copied."
-    },
-    {
-      slot: "response",
-      recipe: "motion-interactive",
-      part: "Slot",
-      why: "Focus moves between slots on every keystroke. The eased ring and border are what let the eye follow the cursor across six identical boxes instead of hunting for it after each digit."
-    },
-    {
-      slot: "transition",
-      recipe: "motion-interactive",
-      part: "Slot",
-      why: "A filled slot strengthens its border, so a pasted code visibly lands in every slot at once. Easing it reads as the code arriving rather than the field flickering."
-    },
-    {
-      slot: "activity",
-      recipe: "none",
-      part: "Root",
-      why: "Verifying the code is the form's work, not the field's. Show it on the submit Button's `loading` state, where the user expects the answer to appear."
-    }
-  ],
-  a11y: [
-    'The root is a role=group named by the field label; the first slot shares the label through `id`/`htmlFor`, and later slots are announced by position ("Character 2 of 6").',
-    "Only one slot is in the tab order. Arrow keys, Home/End and Backspace move between slots; Tab leaves the whole field.",
-    'The first slot carries autocomplete="one-time-code" and the numeric virtual keyboard, so iOS and Android offer the SMS code above the keyboard.',
-    "Slots render at 20px (`text-mono-lg`), above the 16px floor that stops iOS Safari zooming on focus."
-  ],
-  examples: [
-    {
-      label: "Six digits",
-      code: '<Field label="Verification code"><OtpField length={6} onValueComplete={verify} /></Field>'
-    },
-    {
-      label: "In a field, grouped",
-      code: '<Field label="Verification code" description="Enter the 6-digit code we sent to your phone."><OtpField length={6} groupSize={3} /></Field>'
-    },
-    {
-      label: "With an error",
-      code: '<Field label="Verification code" error="That code has expired. Request a new code and try again."><OtpField length={6} groupSize={3} defaultValue="482913" /></Field>'
-    },
-    {
-      label: "Alphanumeric",
-      code: '<Field label="Pairing code"><OtpField length={8} groupSize={4} validationType="alphanumeric" /></Field>'
-    }
-  ]
-};
 var fileDropzoneVariants = cva(
   [
     "group flex w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border-strong bg-card text-center text-foreground motion-interactive",
@@ -1005,7 +770,7 @@ function FileDropzone({
                 }
               ),
               /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx("span", { className: tier.control, children: label ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                /* @__PURE__ */ jsx("span", { className: tier.control, children: label ?? /* @__PURE__ */ jsxs(Fragment, { children: [
                   multiple ? "Drop files here or " : "Drop a file here or ",
                   /* @__PURE__ */ jsx("span", { className: "text-primary underline underline-offset-2", children: "browse" })
                 ] }) }),
@@ -1255,200 +1020,6 @@ var fileDropzoneMeta = {
   ]
 };
 
-// src/lib/selection-card.ts
-var SELECTION_CARD_SHELL = [
-  "group relative flex cursor-pointer border border-input bg-card p-4 text-start motion-interactive motion-press",
-  "hover:border-ring",
-  // Focus is an OUTLINE, not a ring: the checked state is an inset ring in the
-  // tone colour, and both rings write box-shadow, so a focused checked card
-  // used to lose its tone ring to the focus ring.
-  "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",
-  collectible: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-collectible",
-  edition: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-edition",
-  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-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(
-    Checkbox$1.Indicator,
-    {
-      className: cn(
-        "flex items-center justify-center text-current motion-interactive ease-spring data-[starting-style]:scale-0 data-[starting-style]:opacity-0 data-[ending-style]:scale-0 data-[ending-style]:opacity-0",
-        className
-      ),
-      render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", { ...indicatorProps, children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          name: state.indeterminate ? "minus" : "check",
-          className: cn(CHECK_MARK_SIZE, "[&_path]:stroke-current [&_path]:[stroke-width:2] [&_path]:[stroke-linejoin:round] [&_path]:[stroke-linecap:round]")
-        }
-      ) })
-    }
-  );
-}
-CheckboxMark.displayName = "CheckboxMark";
-function Checkbox({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Checkbox$1.Root,
-    {
-      className: cn(
-        CHECK_BOX,
-        "text-primary-foreground",
-        "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",
-        // 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,
-      children: children ?? /* @__PURE__ */ jsx(CheckboxMark, {})
-    }
-  );
-}
-Checkbox.displayName = "Checkbox";
-
-// src/components/checkbox/checkbox.meta.ts
-var checkboxMeta = {
-  name: "Checkbox",
-  summary: "Square toggle (18px at rest, on the spacing scale) over Base UI's Checkbox. Checked/indeterminate/disabled states; controlled or uncontrolled; form-ready via the hidden native input.",
-  status: "stable",
-  keywords: [
-    "checkbox",
-    "boolean",
-    "multi select",
-    "form control"
-  ],
-  usage: {
-    description: "Use Checkbox for independent boolean choices or for selecting multiple options in a set.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use Checkbox when each option can be toggled independently."
-      },
-      {
-        guidance: "do",
-        description: "Attach a visible label that explains the consequence of checking the control."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use Checkbox for mutually exclusive choices; use Radio or Select instead."
-      },
-      {
-        guidance: "dont",
-        description: 'Do not use it without a label or an aria-label. An 18px square with no accessible name is announced as just "checkbox", which tells a screen-reader user nothing about what they are agreeing to.'
-      },
-      {
-        guidance: "dont",
-        description: `Do not phrase the label as a negative, such as "Don't send read receipts". Paired with an unchecked box it becomes a double negative the reader has to solve before they can answer. Label the state being turned on.`
-      }
-    ]
-  },
-  related: {
-    components: [
-      "CheckboxCard",
-      "Switch",
-      "Radio"
-    ]
-  },
-  props: [
-    {
-      name: "checked",
-      type: "boolean",
-      description: "Controlled checked state. Pair with onCheckedChange. Omit for uncontrolled."
-    },
-    {
-      name: "defaultChecked",
-      type: "boolean",
-      default: "false",
-      description: "Initial checked state for an uncontrolled checkbox."
-    },
-    {
-      name: "onCheckedChange",
-      type: "(checked: boolean, eventDetails) => void",
-      description: "Fires when the checkbox is ticked or unticked. Note: Base UI passes a second eventDetails arg \u2014 not the common (checked) => void, so a single-arg handler must widen its signature."
-    },
-    {
-      name: "indeterminate",
-      type: "boolean",
-      default: "false",
-      description: 'Mixed state (neither checked nor unchecked). Renders a dash instead of the check. For a "select all" box inside a CheckboxGroup, use `parent` instead and the group sets this for you.'
-    },
-    {
-      name: "parent",
-      type: "boolean",
-      default: "false",
-      description: 'Makes this the "select all" box of a CheckboxGroup that has `allValues`. It checks or clears every child, and shows the dash when only some are checked. Only works inside a CheckboxGroup.'
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      default: "false",
-      description: "Ignores user interaction and dims the control."
-    },
-    {
-      name: "name",
-      type: "string",
-      description: "Field name for the hidden input on form submit."
-    },
-    {
-      name: "value",
-      type: "string",
-      description: "Value submitted with the form when checked. Inside a group-owned CheckboxGroup, it is the name the group's value array uses for this checkbox."
-    },
-    {
-      name: "render",
-      type: "ReactElement | (props, state) => ReactElement",
-      description: "Compose the root with another element through the Base UI render prop."
-    }
-  ],
-  tokensUsed: [
-    "card",
-    "input",
-    "primary",
-    "primary-foreground",
-    "ring"
-  ],
-  a11y: [
-    "Base UI renders a hidden native <input type=checkbox> for keyboard, focus, and form semantics.",
-    "Space toggles; focus-visible draws a 2px ring in the --ring token.",
-    "indeterminate sets aria-checked=mixed automatically; a `parent` checkbox in a CheckboxGroup gets aria-checked=mixed and aria-controls for its children from the group.",
-    `Label it with Field orientation="horizontal": it wires the label's htmlFor to the checkbox, so the label text joins the click target, and adds the description and error plumbing.`
-  ],
-  examples: [
-    { label: "Default", code: "<Checkbox defaultChecked />" },
-    {
-      label: "Controlled",
-      code: "<Checkbox checked={value} onCheckedChange={setValue} />"
-    },
-    { label: "Indeterminate", code: "<Checkbox indeterminate />" },
-    {
-      label: "Select all in a group",
-      code: '<CheckboxGroup allValues={["email", "sms"]} defaultValue={["email"]} className="gap-3"><Field label="All channels" orientation="horizontal"><Checkbox parent /></Field><Field label="Email" orientation="horizontal" className="ps-7"><Checkbox value="email" /></Field><Field label="SMS" orientation="horizontal" className="ps-7"><Checkbox value="sms" /></Field></CheckboxGroup>'
-    },
-    {
-      label: "With label",
-      code: '<Field label="Remember me" orientation="horizontal"><Checkbox /></Field>'
-    }
-  ]
-};
-
 // src/components/thinking-orb/thinking-orb.render.ts
 var ORB_PX = { sm: 20, md: 32, lg: 64 };
 var ORB_TUNING = {
@@ -2120,567 +1691,571 @@ var glidingHighlightMeta = {
     }
   ]
 };
-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(
-        // 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: items.map((child, index) => /* @__PURE__ */ jsx(
-        StepContext.Provider,
-        {
-          value: {
-            index,
-            count: items.length,
-            current,
-            orientation,
-            indicator,
-            statusLabels: labels
-          },
-          children: child
-        },
-        child.key ?? index
-      ))
-    }
-  );
-}
-Stepper.displayName = "Stepper";
-function StepperItem({
-  title,
-  description,
-  status: statusProp,
-  onSelect,
-  className,
-  ...props
-}) {
-  const ctx = useContext(StepContext);
-  const tier = useTypeTier();
-  const index = ctx?.index ?? 0;
-  const count2 = ctx?.count ?? 1;
-  const orientation = ctx?.orientation ?? "horizontal";
-  const dot = (ctx?.indicator ?? "number") === "dot";
-  const current = ctx?.current ?? 0;
-  const status = statusProp ?? (index < current ? "complete" : index === current ? "current" : "upcoming");
-  const isLast = index === count2 - 1;
-  const isCurrent = index === current;
-  const statusLabel = (ctx?.statusLabels ?? DEFAULT_STATUS_LABELS)[status];
-  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    dot ? (
-      // One title line tall (the step carries the title's type), so the dot
-      // centres on the title's first line at any density.
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "relative z-10 flex h-[1lh] shrink-0 items-center", children: /* @__PURE__ */ jsx("span", { className: stepperDotVariants({ status }) }) })
-    ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: stepperIndicatorVariants({ status }), children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-sm" }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { name: "warning", className: "text-sm" }) : index + 1 }),
-    /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          "flex min-w-0 flex-col gap-0.5 text-start",
-          !dot && "min-h-(--control-xs) justify-center"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: cn(
-                tier.control,
-                "underline-offset-2 motion-interactive group-hover/step:underline",
-                status === "upcoming" && "text-muted-foreground",
-                status === "error" && "text-destructive",
-                (status === "complete" || status === "current") && "text-foreground"
-              ),
-              children: [
-                title,
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: ` (${statusLabel})` })
-              ]
-            }
-          ),
-          description ? /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", tier.secondary), children: description }) : null
-        ]
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      "aria-current": isCurrent ? "step" : void 0,
-      "data-status": status,
-      className: cn(
-        orientation === "horizontal" ? cn("flex min-w-0 items-start gap-3", isLast ? "flex-none" : "flex-1") : cn("relative", !isLast && "pb-6"),
-        // The dot and its line are measured in the title's `lh` and `em`.
-        dot && tier.control,
-        className
-      ),
-      ...props,
-      children: [
-        onSelect ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onSelect,
-            className: "group/step flex min-w-0 items-start gap-3 rounded-sm motion-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            children: body
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-start gap-3", children: body }),
-        isLast ? null : /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: (dot ? stepperDotConnectorVariants : stepperConnectorVariants)({
-              orientation,
-              filled: status === "complete"
-            })
-          }
-        )
-      ]
-    }
-  );
+function LineChart(props) {
+  return /* @__PURE__ */ jsx(CartesianChart, { kind: "line", ...props });
 }
-StepperItem.displayName = "StepperItem";
+LineChart.displayName = "LineChart";
 
-// src/components/stepper/stepper.meta.ts
-var stepperMeta = {
-  name: "Stepper",
-  summary: 'Where the user is in a multi-step flow \u2014 an ordered list of numbered steps, horizontal or vertical, each complete, current, upcoming or in error, with aria-current="step" on the current one. `indicator="dot"` turns it into a timeline of events (an order\'s delivery) with dots instead of numbers.',
-  status: "stable",
+// src/components/line-chart/line-chart.meta.ts
+var lineChartMeta = {
+  name: "LineChart",
+  summary: "Lines over a sequence \u2014 for comparing how measures move. Smooth, linear or step curves, optional dots (coloured by series or by category) and value labels. Lines draw on as the chart scrolls into view.",
   keywords: [
-    "stepper",
-    "steps",
-    "wizard",
-    "multi-step form",
-    "checkout steps",
-    "onboarding progress",
-    "progress steps",
-    "timeline"
+    "chart",
+    "line",
+    "trend",
+    "time series",
+    "graph",
+    "compare",
+    "analytics",
+    "dashboard"
   ],
   usage: {
-    description: "Use Stepper above or beside a flow that is split into a known, small number of named steps \u2014 checkout, onboarding, an import wizard \u2014 so the user can see how far they have come and what is left. It reports position; the flow's own Back and Continue buttons move it.",
+    description: "Use LineChart to compare how two or more measures change over the same sequence, or to show one trend precisely (with dots and labels). Unlike AreaChart, its value axis is fitted to the data rather than forced to zero, so small movements stay visible \u2014 say so if the axis is shown.",
     bestPractices: [
       {
         guidance: "do",
-        description: 'Drive it from one number (`current`) and override a single step\'s `status` only for what a number cannot say \u2014 a completed step that now needs attention is `status="error"`.'
-      },
-      {
-        guidance: "do",
-        description: 'Name steps with a word or two ("Shipping", "Payment"). Go vertical when steps need a description or there are more than five; horizontal titles truncate first.'
+        description: "Turn on dots and labels for six or fewer points, when the exact values are the story."
       },
       {
         guidance: "do",
-        description: "Give completed steps `onSelect` only when going back to edit them actually works, and keep the user's later answers when they do."
+        description: 'Use curve="step" for values that hold until they change \u2014 prices, plan tiers, headcount.'
       },
       {
         guidance: "dont",
-        description: "Do not use Stepper for a task with unknown length or for a percentage. That is Progress; a stepper promises a fixed set of named stops."
+        description: "Plot unordered categories (channels, products) as a line \u2014 the line implies a path between them; use BarChart."
       },
       {
         guidance: "dont",
-        description: "Do not use it as navigation between independent sections. Sections the user can visit in any order are Tabs; a stepper implies each step depends on the one before."
-      },
-      {
-        guidance: "dont",
-        description: "Do not make upcoming steps pressable to skip ahead. A step that looks reachable but is not is worse than one that is plainly locked."
-      }
-    ],
-    anatomy: [
-      {
-        name: "Stepper",
-        required: true,
-        description: "The ordered list. Takes `current` and `orientation`, and an aria-label naming the flow."
-      },
-      {
-        name: "StepperItem",
-        required: true,
-        description: 'One step: a numbered disc (a check when complete, a warning mark on error) \u2014 or, with `indicator="dot"`, a dot centred on the title\'s first line \u2014 a title, and an optional description.'
-      },
-      {
-        name: "Connector",
-        required: false,
-        description: "The line to the next step, filled once this step is complete. Drawn automatically between items."
+        description: "Use it for data-heavy views \u2014 streaming or real-time data, thousands of points, zoom and brushing, trading charts. Those belong on a charting library (Recharts, visx, ECharts); Sable's charts are for dashboards, landing pages and decks."
       }
     ]
   },
   related: {
-    components: ["Progress", "Tabs", "Form", "Button"]
+    components: [
+      "AreaChart",
+      "BarChart",
+      "Sparkline",
+      "Card"
+    ]
   },
+  status: "beta",
   props: [
     {
-      name: "current",
-      type: "number",
-      default: "0",
-      description: "Zero-based index of the current step. Earlier steps derive complete, later ones upcoming."
+      name: "data",
+      type: "Record<string, unknown>[]",
+      description: "The rows, in order along the category axis."
     },
     {
-      name: "orientation",
-      type: '"horizontal" | "vertical"',
-      default: '"horizontal"',
-      description: "Horizontal for a short flow across the top of a form; vertical for long flows, narrow columns or steps with descriptions."
+      name: "index",
+      type: "string",
+      description: "The datum field naming each row's category (a month, a day, a channel)."
     },
     {
-      name: "indicator",
-      type: '"number" | "dot"',
-      default: '"number"',
-      description: "`number` for a flow the user moves through; `dot` for a timeline of events (delivery tracking, a document's history) where the position number adds nothing. The dot centres on the title's first line and scales with its type at every density."
+      name: "series",
+      type: "{ key: string; label: string; tone?: ChartTone; color?: string; icon?: string }[]",
+      description: "The measures to plot: the datum field, its name in the legend/tooltip/table, and its colour (a tone by role, or any CSS colour). Omitted, series take the chart palette in order: --chart-1 \u2026 --chart-8, validated for colour-blind separation in light and dark; a theme may override the set."
     },
     {
-      name: "statusLabels",
-      type: "Partial<Record<StepStatus, string>>",
-      description: "Screen-reader status words appended to each title (Completed, Current step, Not started, Needs attention). Override to localize."
+      name: "label",
+      type: "string",
+      description: "What the chart shows. Its accessible name and the caption of the data table assistive tech reads."
     },
     {
-      name: "aria-label",
+      name: "className",
       type: "string",
-      description: 'Names the flow ("Checkout progress"). Every Stepper needs one.'
-    }
-  ],
-  subcomponents: [
+      default: '"h-60"',
+      description: "Sizes the chart (plot + legend). Set a height: `h-72`, `aspect-video h-auto`."
+    },
+    {
+      name: "valueFormatter",
+      type: "(value: number) => string",
+      description: 'Format values everywhere (axis, labels, tooltip, table) \u2014 units like "$12,480". Default: compact on the axis, full elsewhere.'
+    },
+    {
+      name: "indexFormatter",
+      type: "(value: string) => string",
+      description: 'Shorten category labels on the axis ("January" \u2192 "Jan"); the tooltip keeps the full value.'
+    },
+    {
+      name: "locale",
+      type: "string",
+      default: "runtime locale",
+      description: "BCP 47 locale for default number and date formatting."
+    },
+    {
+      name: "tooltip",
+      type: 'boolean | { indicator?: "dot" | "line" | "dashed" | "none"; hideLabel?: boolean; labelFormatter?: (label, datum) => ReactNode; showTotal?: boolean }',
+      default: "true",
+      description: "Show a tooltip on hover and keyboard focus, or configure it: the row marker, hiding the heading, rewriting it, adding a Total row."
+    },
+    {
+      name: "legend",
+      type: "boolean",
+      default: "true when there is more than one series",
+      description: "Show the legend under the chart."
+    },
+    {
+      name: "grid",
+      type: "boolean",
+      default: "true (false for horizontal bars)",
+      description: "Hairline gridlines along the value axis."
+    },
+    {
+      name: "xAxis",
+      type: "boolean",
+      default: "true for columns; false for horizontal bars",
+      description: "The horizontal axis."
+    },
+    {
+      name: "yAxis",
+      type: "boolean",
+      default: "false for columns; true for horizontal bars",
+      description: "The vertical axis."
+    },
+    {
+      name: "animate",
+      type: "boolean",
+      default: "true",
+      description: "Play the arrival once the chart scrolls into view. Reduced motion shows the finished chart."
+    },
+    {
+      name: "activeIndex",
+      type: "number | null",
+      description: "The highlighted row (controlled); `null` for none."
+    },
+    {
+      name: "defaultActiveIndex",
+      type: "number | null",
+      description: "The row highlighted at first \u2014 a tooltip already open before anyone hovers."
+    },
+    {
+      name: "onActiveIndexChange",
+      type: "(index: number | null) => void",
+      description: "Called as the pointer or keyboard moves between rows."
+    },
+    {
+      name: "curve",
+      type: '"smooth" | "linear" | "step"',
+      default: '"smooth"',
+      description: "How the line runs between points. `smooth` is monotone: it never overshoots a value the data does not contain."
+    },
+    {
+      name: "dots",
+      type: "boolean",
+      default: "false",
+      description: "Mark every data point with a dot."
+    },
+    {
+      name: "colorBy",
+      type: '"series" | "index"',
+      default: '"series"',
+      description: "Colour the dots by series, or each by its category."
+    },
     {
-      name: "StepperItem",
-      type: "{ title: ReactNode; description?: ReactNode; status?: StepStatus; onSelect?: () => void } + li props",
-      description: "One step. `status` overrides the derived state; `onSelect` makes the disc and title a button for returning to the step."
+      name: "labels",
+      type: "boolean",
+      default: "false",
+      description: "Print each point's value above it."
     }
   ],
-  variants: {
-    orientation: ["horizontal", "vertical"],
-    indicator: ["number", "dot"],
-    status: ["complete", "current", "upcoming", "error"]
-  },
   tokensUsed: [
+    "tone-edition",
+    "tone-collectible",
+    "tone-standard",
+    "tone-info",
+    "tone-warning",
     "primary",
-    "primary-foreground",
-    "background",
-    "foreground",
     "muted-foreground",
-    "border-strong",
-    "destructive",
-    "destructive-foreground",
-    "ring"
+    "border",
+    "popover",
+    "popover-foreground",
+    "foreground",
+    "background"
   ],
   motion: [
     {
       slot: "arrival",
-      recipe: "none",
-      part: "Stepper",
-      why: "The stepper frames the flow and is on screen before any step is. Animating it in would compete with the step content, which is what changed."
+      recipe: "custom",
+      part: "Line",
+      why: "Once on screen each line draws on from the first point (stroke-dashoffset), series staggered, then the dots and labels fade in. On the motion tokens; reduced motion shows the finished chart."
     },
     {
       slot: "response",
-      recipe: "motion-interactive",
-      part: "StepperItem",
-      why: "Only steps with onSelect respond, and the eased underline is what tells a returning user that this completed step can be reopened while the upcoming ones cannot."
+      recipe: "none",
+      part: "Cursor + tooltip",
+      why: "Hover and focus move the cursor and tooltip instantly \u2014 a lagging cursor reads as a slow chart."
     },
     {
       slot: "transition",
-      recipe: "motion-interactive",
-      part: "Indicator",
-      why: "When the user continues, the disc they leave fills and its connector darkens. Easing the colour makes that read as one step completing rather than the whole bar re-rendering."
+      recipe: "custom",
+      part: "Line + dots",
+      why: "Geometry eases from the old shape to the new one through a CSS `d` transition on the motion tokens (no recipe animates path geometry); browsers without `d` transitions update in place."
     },
     {
       slot: "activity",
       recipe: "none",
-      part: "Stepper",
-      why: "A step is a place, not a process. Saving or validating between steps belongs on the Continue button's loading state; a pulsing disc would suggest the step itself is busy."
+      part: "LineChart",
+      why: "A chart has no indeterminate state; show a Skeleton while the data loads."
     }
   ],
   a11y: [
-    "Renders an ordered list, so assistive tech announces the step count and each step's position.",
-    'The current step carries aria-current="step"; every title also gets a visually hidden status word (Completed, Not started, Needs attention), so state never depends on colour or the disc glyph.',
-    "Discs and connectors are aria-hidden \u2014 the number is already the list position.",
-    "Steps with onSelect render as native buttons with a visible focus ring; steps without it are not focusable."
+    "The drawing is aria-hidden; the same numbers are in a visually hidden data table (captioned by `label`) that the chart is aria-describedby, so assistive tech reads values, not shapes.",
+    'With a tooltip, the chart is one tab stop (role=group, aria-roledescription="chart"): arrow keys, Home and End step through the data, Escape clears, and each step is announced in a polite live region.',
+    "Colour is never the only key: series are named in the legend, tooltip and table."
   ],
   examples: [
     {
-      label: "Checkout",
-      code: `<Stepper current={1} aria-label="Checkout progress">
-	<StepperItem title="Cart" />
-	<StepperItem title="Shipping" />
-	<StepperItem title="Payment" />
-	<StepperItem title="Review" />
-</Stepper>`
-    },
-    {
-      label: "Vertical with descriptions",
-      code: `<Stepper orientation="vertical" current={2} aria-label="Workspace setup">
-	<StepperItem title="Create account" description="Email verified" />
-	<StepperItem title="Invite team" description="3 people invited" />
-	<StepperItem title="Connect data" description="Choose a source to import from" />
-	<StepperItem title="Launch" />
-</Stepper>`
+      label: "Compare two series",
+      code: '<LineChart\n	label="Desktop and mobile visitors"\n	data={visitors}\n	index="month"\n	series={[\n		{ key: "desktop", label: "Desktop", tone: "primary" },\n		{ key: "mobile", label: "Mobile", tone: "info" },\n	]}\n	indexFormatter={(m) => m.slice(0, 3)}\n/>'
     },
     {
-      label: "Delivery timeline (dots)",
-      code: `<Stepper orientation="vertical" indicator="dot" current={2} aria-label="Delivery status">
-	<StepperItem title="Order placed" description="Oct 9, 10:14 AM" />
-	<StepperItem title="Printed and packed" description="Oct 10, 4:02 PM" />
-	<StepperItem title="Out for delivery" description="Arriving today by 6 PM" />
-	<StepperItem title="Delivered" />
-</Stepper>`
-    },
-    {
-      label: "A completed step with an error",
-      code: `<Stepper current={2} aria-label="Checkout progress">
-	<StepperItem title="Cart" onSelect={() => console.log("cart")} />
-	<StepperItem title="Shipping" status="error" description="Address needs a postcode" onSelect={() => console.log("shipping")} />
-	<StepperItem title="Payment" />
-</Stepper>`
+      label: "Dots and labels",
+      code: '<LineChart\n	label="Desktop visitors"\n	data={visitors}\n	index="month"\n	series={[{ key: "desktop", label: "Desktop" }]}\n	curve="linear"\n	dots\n	labels\n	grid={false}\n/>'
     }
   ]
 };
-
-// src/lib/segmented.ts
-var SEGMENTED_TRACK = "relative inline-flex w-fit flex-row items-center gap-0.5 rounded-full border border-border bg-card p-0.5";
-var SEGMENTED_ITEM = "relative z-10 inline-flex h-7 min-w-7 items-center justify-center rounded-full text-muted-foreground motion-interactive motion-press hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
-var SEGMENTED_STEP = "calc(var(--spacing) * 7.5)";
-var ToggleAppearanceContext = createContext("default");
-function Toggle({ className, ...props }) {
-  const appearance = useContext(ToggleAppearanceContext);
+function RadarChart({
+  data,
+  index,
+  series: rawSeries,
+  label,
+  className,
+  grid = "polygon",
+  gridFill = false,
+  filled = true,
+  dots = false,
+  radiusAxis = false,
+  legend,
+  tooltip = true,
+  valueFormatter,
+  locale,
+  animate = true,
+  activeIndex,
+  defaultActiveIndex,
+  onActiveIndexChange
+}) {
+  const series = resolveSeries(rawSeries);
+  const fmt = chartFormatters(locale, valueFormatter);
+  const n = data.length;
+  const spokes = data.map((d) => categoryText(d[index], locale));
+  const values = series.map((s) => data.map((d) => Math.max(0, numberValue(d[s.key]))));
+  const ticks = niceTicks(0, Math.max(0, ...values.flat()), 4);
+  const max = ticks[ticks.length - 1] || 1;
+  const angleAt = (i) => i / Math.max(1, n) * Math.PI * 2;
+  const tooltipOptions = typeof tooltip === "object" ? tooltip : {};
+  const geometry = (size) => {
+    const labelW = Math.max(0, ...spokes.map(approxTextWidth));
+    const outer = Math.max(8, Math.min(size.width / 2 - labelW - 10, size.height / 2 - 22));
+    return { cx: size.width / 2, cy: size.height / 2, outer };
+  };
+  const ringPoints = (g, r) => spokes.map((_, i) => polar(g.cx, g.cy, r, angleAt(i)));
+  const toPath = (pts) => pts.length ? `M${pts.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join("L")}Z` : "";
+  const hitTest = (x, y, size) => {
+    const g = geometry(size);
+    if (Math.hypot(x - g.cx, y - g.cy) > g.outer + 24 || !n) return null;
+    const angle = (Math.atan2(x - g.cx, -(y - g.cy)) + Math.PI * 2) % (Math.PI * 2);
+    return Math.round(angle / (Math.PI * 2 / n)) % n;
+  };
+  const describe = (i) => `${spokes[i]}: ${series.map((s, k) => `${s.label} ${fmt.full(values[k][i])}`).join(", ")}`;
+  const tooltipFor = (i, size) => {
+    const g = geometry(size);
+    const [x, y] = polar(g.cx, g.cy, g.outer, angleAt(i));
+    return {
+      x,
+      y,
+      content: /* @__PURE__ */ jsx(
+        ChartTooltipContent,
+        {
+          indicator: tooltipOptions.indicator,
+          label: tooltipOptions.hideLabel ? void 0 : tooltipOptions.labelFormatter ? tooltipOptions.labelFormatter(spokes[i], data[i]) : spokes[i],
+          rows: series.map((s, k) => ({ key: s.key, label: s.label, value: fmt.full(values[k][i]), color: s.colorValue, icon: s.icon }))
+        }
+      )
+    };
+  };
   return /* @__PURE__ */ jsx(
-    Toggle$1,
-    {
-      className: cn(
-        appearance === "segmented" ? cn(SEGMENTED_ITEM, "cursor-pointer px-2 text-label-md data-[pressed]:hover:text-accent-foreground") : cn(
-          "inline-flex h-(--control-sm) min-w-(--control-sm) cursor-pointer items-center justify-center rounded-sm px-2.5 text-label-md text-muted-foreground motion-interactive motion-press",
-          // Hover is the surface's quiet step, NOT the pressed fill: with
-          // both on bg-accent an unpressed toggle looked pressed under the
-          // pointer, which is the one state a toggle must never fake.
-          "sable-surface-interactive",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        ),
-        "data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
-        "disabled:pointer-events-none disabled:opacity-50",
-        "[&_svg]:shrink-0",
-        className
-      ),
-      ...props
+    ChartFrame,
+    {
+      label,
+      className: cn("h-72", className),
+      count: n,
+      interactive: tooltip !== false,
+      animate,
+      activeIndex,
+      defaultActiveIndex,
+      onActiveIndexChange,
+      hitTest,
+      tooltip: tooltip === false ? void 0 : tooltipFor,
+      describe,
+      table: {
+        headers: [index.charAt(0).toUpperCase() + index.slice(1), ...series.map((s) => s.label)],
+        rows: data.map((_, i) => [spokes[i], ...series.map((_2, k) => fmt.full(values[k][i]))])
+      },
+      legend: legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { items: series.map((s) => ({ key: s.key, label: s.label, color: s.colorValue, icon: s.icon })) }) : null,
+      children: ({ size, activeIndex: active }) => {
+        const g = geometry(size);
+        const rings = ticks.slice(1).map((t) => t / max * g.outer);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          gridFill ? grid === "circle" ? /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.outer, className: "fill-foreground/[0.04]" }) : /* @__PURE__ */ jsx("path", { d: toPath(ringPoints(g, g.outer)), className: "fill-foreground/[0.04]" }) : null,
+          grid !== "none" ? /* @__PURE__ */ jsxs("g", { className: "fill-none stroke-foreground/10", children: [
+            rings.map(
+              (r) => grid === "circle" ? /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r }, r) : /* @__PURE__ */ jsx("path", { d: toPath(ringPoints(g, r)) }, r)
+            ),
+            spokes.map((s, i) => {
+              const [x, y] = polar(g.cx, g.cy, g.outer, angleAt(i));
+              return /* @__PURE__ */ jsx("line", { x1: g.cx, y1: g.cy, x2: x, y2: y }, s);
+            })
+          ] }) : null,
+          series.map((s, k) => {
+            const pts = values[k].map((v, i) => polar(g.cx, g.cy, v / max * g.outer, angleAt(i)));
+            const d = toPath(pts);
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d,
+                  strokeWidth: 2,
+                  strokeLinejoin: "round",
+                  className: "[[data-reveal=out]_&]:scale-0 [[data-reveal=out]_&]:opacity-0",
+                  style: {
+                    ...pathStyle(d),
+                    stroke: s.colorValue,
+                    fill: filled ? s.colorValue : "none",
+                    fillOpacity: filled ? 0.24 : 0,
+                    transformOrigin: `${g.cx}px ${g.cy}px`,
+                    transition: riseTransition(stagger(k, 120))
+                  }
+                }
+              ),
+              dots || active != null ? pts.map(
+                ([x, y], i) => dots || active === i ? /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: x,
+                    cy: y,
+                    r: active === i ? 5 : 4,
+                    strokeWidth: 2,
+                    className: "stroke-(--sable-surface-bg,var(--background)) [[data-reveal=out]_&]:opacity-0",
+                    style: { fill: s.colorValue, transition: morphTransition() }
+                  },
+                  spokes[i]
+                ) : null
+              ) : null
+            ] }, s.key);
+          }),
+          spokes.map((s, i) => {
+            const a = angleAt(i);
+            const [x, y] = polar(g.cx, g.cy, g.outer + 12, a);
+            const anchor = Math.sin(a) > 0.1 ? "start" : Math.sin(a) < -0.1 ? "end" : "middle";
+            return /* @__PURE__ */ jsx("text", { x, y, dy: "0.32em", textAnchor: anchor, className: cn("text-caption", active === i ? "fill-foreground" : "fill-muted-foreground"), children: s }, s);
+          }),
+          radiusAxis ? ticks.slice(1, -1).map((t) => /* @__PURE__ */ jsx("text", { x: g.cx + 4, y: g.cy - t / max * g.outer, dy: "-0.2em", className: "fill-muted-foreground text-caption tabular-nums", children: fmt.axis(t) }, t)) : null
+        ] });
+      }
     }
   );
 }
-Toggle.displayName = "Toggle";
-function ToggleGroup({ className, appearance = "default", ...props }) {
-  return /* @__PURE__ */ jsx(ToggleAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(
-    ToggleGroup$1,
-    {
-      "data-appearance": appearance,
-      className: cn(
-        appearance === "segmented" ? SEGMENTED_TRACK : "inline-flex items-center gap-1",
-        className
-      ),
-      ...props,
-      "aria-orientation": props.role === "toolbar" ? props.orientation ?? "horizontal" : void 0
-    }
-  ) });
-}
-ToggleGroup.displayName = "ToggleGroup";
+RadarChart.displayName = "RadarChart";
 
-// 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",
+// src/components/radar-chart/radar-chart.meta.ts
+var radarChartMeta = {
+  name: "RadarChart",
+  summary: "Several measures compared around a centre: one polygon per series over a polygon or circular web, filled or outline only, with optional dots, a radius scale and a tinted web. Polygons grow from the centre as the chart scrolls into view.",
   keywords: [
-    "toggle",
-    "pressed",
-    "button state",
-    "toolbar",
-    "segmented control",
-    "segmented",
-    "toggle group",
-    "button group",
-    "view switcher"
+    "chart",
+    "radar",
+    "spider",
+    "web",
+    "profile",
+    "skills",
+    "comparison",
+    "polar"
   ],
   usage: {
-    description: "Use Toggle for button-like controls that can be pressed on or off within a toolbar or compact control set.",
+    description: "Use RadarChart to compare the shape of a profile across five to eight dimensions \u2014 skills, product scores, a cycle of months \u2014 for one to three series. The shape is the message; for exact values or more than three series, BarChart is easier to read.",
     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."
+        description: "Keep every spoke on the same scale and direction (more is better on all of them)."
       },
       {
         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.'
+        description: "Use filled={false} when two polygons overlap heavily, so both outlines stay visible."
       },
       {
         guidance: "dont",
-        description: "Do not use Toggle for persistent application settings; use Switch."
+        description: "Use fewer than five spokes \u2014 three or four make a triangle or square that says little; use BarChart."
       },
       {
         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.'
+        description: "Use it for data-heavy views \u2014 streaming or real-time data, thousands of points, zoom and brushing, trading charts. Those belong on a charting library (Recharts, visx, ECharts); Sable's charts are for dashboards, landing pages and decks."
       }
     ]
   },
   related: {
     components: [
-      "Switch",
-      "Button",
-      "Tabs"
+      "BarChart",
+      "LineChart",
+      "Card"
     ]
   },
+  status: "beta",
   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: "data",
+      type: "Record<string, unknown>[]",
+      description: "One row per spoke."
     },
     {
-      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: "index",
+      type: "string",
+      description: "The datum field naming each spoke."
     },
     {
-      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: "series",
+      type: "{ key: string; label: string; tone?: ChartTone; color?: string; icon?: string }[]",
+      description: "The measures to plot: the datum field, its name in the legend/tooltip/table, and its colour (a tone by role, or any CSS colour). Omitted, series take the chart palette in order: --chart-1 \u2026 --chart-8, validated for colour-blind separation in light and dark; a theme may override the set."
     },
     {
-      name: "ToggleGroupItem",
-      type: "Alias of Toggle",
-      description: "Re-export of Toggle for group composition \u2014 a Toggle carrying a value is the group item."
-    }
+      name: "label",
+      type: "string",
+      description: "What the chart shows. Its accessible name and the caption of the data table assistive tech reads."
+    },
+    {
+      name: "className",
+      type: "string",
+      default: '"h-72"',
+      description: "Sizes the chart. Set a height."
+    },
+    {
+      name: "grid",
+      type: '"polygon" | "circle" | "none"',
+      default: '"polygon"',
+      description: "The web behind the polygons."
+    },
+    {
+      name: "gridFill",
+      type: "boolean",
+      default: "false",
+      description: "Tint the web's outer area."
+    },
+    {
+      name: "filled",
+      type: "boolean",
+      default: "true",
+      description: "Fill each polygon; `false` draws outlines only."
+    },
+    {
+      name: "dots",
+      type: "boolean",
+      default: "false",
+      description: "Mark every vertex with a dot."
+    },
+    {
+      name: "radiusAxis",
+      type: "boolean",
+      default: "false",
+      description: "Print the ring values along the top spoke."
+    },
+    {
+      name: "legend",
+      type: "boolean",
+      default: "true when there is more than one series",
+      description: "Show the legend."
+    },
+    {
+      name: "tooltip",
+      type: 'boolean | { indicator?: "dot" | "line" | "dashed" | "none"; hideLabel?: boolean; labelFormatter?: (label, datum) => ReactNode; showTotal?: boolean }',
+      default: "true",
+      description: "Show a tooltip on hover and keyboard focus, or configure it: the row marker, hiding the heading, rewriting it, adding a Total row."
+    },
+    {
+      name: "valueFormatter",
+      type: "(value: number) => string",
+      description: 'Format values everywhere (axis, labels, tooltip, table) \u2014 units like "$12,480". Default: compact on the axis, full elsewhere.'
+    },
+    {
+      name: "locale",
+      type: "string",
+      default: "runtime locale",
+      description: "BCP 47 locale for default number and date formatting."
+    },
+    {
+      name: "animate",
+      type: "boolean",
+      default: "true",
+      description: "Grow the polygons from the centre when the chart scrolls into view."
+    },
+    {
+      name: "activeIndex",
+      type: "number | null",
+      description: "The highlighted row (controlled); `null` for none."
+    },
+    {
+      name: "defaultActiveIndex",
+      type: "number | null",
+      description: "The row highlighted at first \u2014 a tooltip already open before anyone hovers."
+    },
+    {
+      name: "onActiveIndexChange",
+      type: "(index: number | null) => void",
+      description: "Called as the pointer or keyboard moves between rows."
+    }
   ],
-  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."
+  tokensUsed: [
+    "tone-edition",
+    "tone-collectible",
+    "tone-standard",
+    "tone-info",
+    "tone-warning",
+    "primary",
+    "muted-foreground",
+    "border",
+    "popover",
+    "popover-foreground",
+    "foreground",
+    "background"
   ],
-  examples: [
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "custom",
+      part: "Polygon",
+      why: "Once on screen each polygon grows from the centre and fades in, series staggered, on the emphasized easing. On the motion tokens; reduced motion shows the finished chart."
+    },
     {
-      label: "Standalone",
-      code: '<Toggle aria-label="Mute">Mute</Toggle>'
+      slot: "response",
+      recipe: "none",
+      part: "Active spoke",
+      why: "The hovered spoke's vertices and label highlight at once."
     },
     {
-      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: "custom",
+      part: "Polygon",
+      why: "Geometry eases from the old shape to the new one through a CSS `d` transition on the motion tokens (no recipe animates path geometry); browsers without `d` transitions update in place."
     },
     {
-      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: "RadarChart",
+      why: "A chart has no indeterminate state; show a Skeleton while the data loads."
+    }
+  ],
+  a11y: [
+    "The drawing is aria-hidden; the same numbers are in a visually hidden data table (captioned by `label`) that the chart is aria-describedby, so assistive tech reads values, not shapes.",
+    'With a tooltip, the chart is one tab stop (role=group, aria-roledescription="chart"): arrow keys, Home and End step through the data, Escape clears, and each step is announced in a polite live region.',
+    "Colour is never the only key: series are named in the legend, tooltip and table."
+  ],
+  examples: [
+    {
+      label: "Two profiles",
+      code: 'const scores = [\n	{ skill: "Speed", a: 86, b: 65 },\n	{ skill: "Quality", a: 72, b: 90 },\n	{ skill: "Support", a: 64, b: 80 },\n	{ skill: "Price", a: 90, b: 55 },\n	{ skill: "Docs", a: 70, b: 85 },\n	{ skill: "Ecosystem", a: 60, b: 75 },\n]\n\n<RadarChart\n	label="Product scores compared"\n	data={scores}\n	index="skill"\n	series={[\n		{ key: "a", label: "Atlas" },\n		{ key: "b", label: "Beacon" },\n	]}\n/>'
     },
     {
-      label: "Multi-select group",
-      code: '<ToggleGroup multiple defaultValue={["bold"]}><Toggle value="bold">Bold</Toggle><Toggle value="italic">Italic</Toggle></ToggleGroup>'
+      label: "Circular web, outlines only",
+      code: '<RadarChart\n	label="Atlas scores"\n	data={scores}\n	index="skill"\n	series={[{ key: "a", label: "Atlas" }]}\n	grid="circle"\n	gridFill\n	filled={false}\n	dots\n/>'
     }
   ]
 };
@@ -4333,211 +3908,6 @@ var toastMeta = {
     }
   ]
 };
-var Accordion = Accordion$1.Root;
-function AccordionItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Accordion$1.Item,
-    {
-      className: cn("border-b border-border", className),
-      ...props
-    }
-  );
-}
-function AccordionTrigger({
-  className,
-  children,
-  indicator,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Accordion$1.Header, { children: /* @__PURE__ */ jsxs(
-    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 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
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-slot": "accordion-chevron",
-            className: "flex h-[1lh] shrink-0 items-center motion-interactive",
-            children: indicator ?? /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "text-xs text-muted-foreground" })
-          }
-        )
-      ]
-    }
-  ) });
-}
-function AccordionPanel({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Accordion$1.Panel,
-    {
-      className: cn(
-        "h-[var(--accordion-panel-height)] text-body-md text-muted-foreground motion-disclosure data-[ending-style]:h-0 data-[starting-style]:h-0",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "pb-4", children })
-    }
-  );
-}
-
-// src/components/accordion/accordion.meta.ts
-var accordionMeta = {
-  name: "Accordion",
-  summary: "Stacked, collapsible disclosure sections over Base UI Accordion \u2014 roving focus, arrow-key navigation, ARIA region/heading/button wiring, and an animated height transition. Each item pairs a full-width trigger (with a rotating chevron) and a panel.",
-  status: "stable",
-  keywords: [
-    "accordion",
-    "disclosure",
-    "collapse",
-    "faq"
-  ],
-  usage: {
-    description: "Use Accordion to reveal a vertical set of related sections while keeping the surrounding page scannable.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use concise trigger text that describes the content revealed below it."
-      },
-      {
-        guidance: "do",
-        description: "Keep section content focused so expanding one item does not feel like navigating to a new page."
-      },
-      {
-        guidance: "dont",
-        description: "Do not hide required fields, primary actions, or critical errors inside collapsed sections."
-      },
-      {
-        guidance: "dont",
-        description: "Do not nest an Accordion inside an Accordion. Two layers of roving focus fight each other, and the arrow keys become ambiguous \u2014 flatten the hierarchy or use a Tree."
-      }
-    ],
-    anatomy: [
-      {
-        name: "AccordionItem",
-        required: true,
-        description: "One expandable section in the group."
-      },
-      {
-        name: "AccordionTrigger",
-        required: true,
-        description: "The button-like control that opens the section."
-      },
-      {
-        name: "AccordionPanel",
-        required: true,
-        description: "The content revealed by the trigger."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Collapsible",
-      "Tabs"
-    ]
-  },
-  props: [
-    {
-      name: "Accordion (Root)",
-      type: "Base UI Accordion.Root props (value, defaultValue, multiple, disabled, onValueChange, orientation, loopFocus, keepMounted, hiddenUntilFound)",
-      default: "\u2014",
-      description: "Groups all items and owns the open value(s). Uncontrolled via defaultValue, controlled via value."
-    },
-    {
-      name: "defaultValue",
-      type: "Value[]",
-      default: "[]",
-      description: "Uncontrolled set of item values that start expanded (e.g. ['faq-1'])."
-    },
-    {
-      name: "value",
-      type: "Value[]",
-      default: "\u2014",
-      description: "Controlled set of expanded item values; pair with onValueChange."
-    },
-    {
-      name: "onValueChange",
-      type: "(value: Value[]) => void",
-      description: "Called with the new set of expanded item values when an item opens or closes."
-    },
-    {
-      name: "multiple",
-      type: "boolean",
-      default: "false",
-      description: "Whether more than one item can be open at the same time. When false, opening one closes the others."
-    }
-  ],
-  subcomponents: [
-    {
-      name: "AccordionItem",
-      type: "Base UI Accordion.Item props + className (value, disabled, onOpenChange)",
-      description: "Pairs a header with its panel. Give each a stable `value` to control or set initial open state."
-    },
-    {
-      name: "AccordionTrigger",
-      type: "Base UI Accordion.Trigger props + className + indicator?: ReactNode",
-      description: "The header button (Header + Trigger composed). Renders children plus a chevron that rotates via data-[panel-open] by default; pass `indicator` to replace the icon and its open-state behavior entirely (e.g. a plus that becomes an \xD7 for a FAQ-style toggle)."
-    },
-    {
-      name: "AccordionPanel",
-      type: "Base UI Accordion.Panel props + className (keepMounted, hiddenUntilFound)",
-      description: "The collapsible body. Animates height using the --accordion-panel-height CSS var; fades on data-[starting-style]/data-[ending-style]."
-    }
-  ],
-  tokensUsed: ["border", "foreground", "muted-foreground", "ring"],
-  motion: [
-    {
-      slot: "arrival",
-      recipe: "none",
-      part: "Root",
-      why: "An accordion is page furniture that is present from first paint. Animating it in would stage content the reader is already scanning past."
-    },
-    {
-      slot: "response",
-      recipe: "motion-interactive",
-      part: "AccordionTrigger",
-      why: "The whole header row is the hit target, and it looks like a heading rather than a control. The hover shift is what tells the reader it can be clicked before they click it."
-    },
-    {
-      slot: "transition",
-      recipe: "motion-disclosure",
-      part: "AccordionPanel",
-      why: "Panel height is the only cue that content came from THIS header rather than appearing at the bottom of the page. Snapping it open moves everything below by a screenful with nothing connecting cause to effect."
-    },
-    {
-      slot: "activity",
-      recipe: "none",
-      part: "Root",
-      why: "Nothing here is indeterminate \u2014 the panel content is already resident. A panel that loads on expand should put its own loader inside the panel."
-    }
-  ],
-  a11y: [
-    "Base UI renders the trigger inside an <h3> heading and wires aria-expanded / aria-controls to the panel region.",
-    "Arrow keys move roving focus between triggers; Home/End jump to the first/last; loopFocus wraps by default.",
-    "Each trigger toggles its panel with Enter/Space; the panel is announced as a labelled region.",
-    "A disabled AccordionItem dims and is skipped by keyboard focus while neighbouring items stay interactive.",
-    "The chevron rotation is driven by data-[panel-open] and the focus ring by focus-visible \u2014 both honor reduced-motion via the consumer's transitions."
-  ],
-  examples: [
-    {
-      label: "Single (default)",
-      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger>Is it permanent?</AccordionTrigger><AccordionPanel>Yes \u2014 stored on Arweave.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>How much?</AccordionTrigger><AccordionPanel>A one-time mint fee.</AccordionPanel></AccordionItem></Accordion>'
-    },
-    {
-      label: "Multiple open",
-      code: '<Accordion multiple defaultValue={["a", "b"]}><AccordionItem value="a"><AccordionTrigger>First</AccordionTrigger><AccordionPanel>One.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>Second</AccordionTrigger><AccordionPanel>Two.</AccordionPanel></AccordionItem></Accordion>'
-    },
-    {
-      label: "Custom indicator (plus-becomes-\xD7)",
-      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground transition-transform [[data-panel-open]_&]:rotate-45" />}>Is it permanent?</AccordionTrigger><AccordionPanel>Yes \u2014 stored on Arweave.</AccordionPanel></AccordionItem></Accordion>'
-    }
-  ]
-};
 var Collapsible = Collapsible$1.Root;
 var CollapsibleTrigger = Collapsible$1.Trigger;
 function CollapsibleIndicator({ className }) {
@@ -4680,320 +4050,45 @@ var collapsibleMeta = {
     }
   ]
 };
-var SliderRoot = Slider$1.Root;
-var SliderValue = Slider$1.Value;
-function SliderControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Slider$1.Control,
-    {
-      className: cn(
-        "relative flex h-5 w-full items-center data-[disabled]:opacity-50",
-        // Vertical: the same lane turned on its side. Give the slider a
-        // height (h-40, flex-1) — a vertical track has no intrinsic length.
-        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=vertical]:justify-center",
-        className
-      ),
-      ...props
-    }
+var useComboboxFilteredItems = Combobox$1.useFilteredItems;
+var ComboboxVirtualContext = createContext(null);
+function Combobox({
+  onItemHighlighted,
+  ...props
+}) {
+  const revealRef = useRef(null);
+  const highlightRef = useRef(onItemHighlighted);
+  highlightRef.current = onItemHighlighted;
+  const handleHighlight = useCallback(
+    (value, details) => {
+      highlightRef.current?.(
+        value,
+        details
+      );
+      const reveal = revealRef.current;
+      if (reveal && details.index >= 0) {
+        queueMicrotask(() => reveal(details.index));
+      }
+    },
+    []
   );
-}
-function SliderTrack({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Slider$1.Track,
+  const bridge = useMemo(
+    () => ({
+      register(reveal) {
+        revealRef.current = reveal;
+      },
+      value: props.value,
+      isItemEqualToValue: props.isItemEqualToValue
+    }),
+    [props.value, props.isItemEqualToValue]
+  );
+  return /* @__PURE__ */ jsx(ComboboxVirtualContext.Provider, { value: bridge, children: /* @__PURE__ */ jsx(
+    Combobox$1.Root,
     {
-      className: cn("h-1.5 w-full rounded-full bg-secondary data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", className),
-      ...props
+      ...props,
+      onItemHighlighted: handleHighlight
     }
-  );
-}
-function SliderIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Slider$1.Indicator,
-    {
-      className: cn("h-full rounded-full bg-primary data-[orientation=vertical]:w-full", className),
-      ...props
-    }
-  );
-}
-function SliderThumb({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    Slider$1.Thumb,
-    {
-      className: cn(
-        // The hit target: fixed box, no paint, no transform. Never resize this.
-        "group/thumb size-4 rounded-full motion-interactive",
-        "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
-        "data-[disabled]:pointer-events-none",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "pointer-events-none absolute inset-0 rounded-full border-2 border-primary bg-background shadow-sm",
-              // The only thing that resizes. Scale (not width/height) so the box
-              // metrics — and the row height around them — never move.
-              "scale-75 motion-interactive ease-spring",
-              "group-hover/thumb:scale-100 group-has-[:focus-visible]/thumb:scale-100",
-              "group-data-[dragging]/thumb:scale-110"
-            )
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function Slider({
-  className,
-  ...props
-}) {
-  const current = props.value ?? props.defaultValue;
-  const thumbCount = Array.isArray(current) ? current.length : 1;
-  return /* @__PURE__ */ jsx(
-    Slider$1.Root,
-    {
-      className: cn("w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto", className),
-      ...props,
-      children: /* @__PURE__ */ jsx(SliderControl, { children: /* @__PURE__ */ jsxs(SliderTrack, { children: [
-        /* @__PURE__ */ jsx(SliderIndicator, {}),
-        Array.from({ length: thumbCount }, (_, i) => /* @__PURE__ */ jsx(SliderThumb, { index: thumbCount > 1 ? i : void 0 }, i))
-      ] }) })
-    }
-  );
-}
-Slider.displayName = "Slider";
-
-// src/components/slider/slider.meta.ts
-var sliderMeta = {
-  name: "Slider",
-  summary: "Slider over Base UI Slider \u2014 pointer + keyboard control, ARIA slider wiring, and range support via multiple thumbs. The default export composes Root + Control + Track + Indicator + Thumb; pass an array value for a range.",
-  status: "stable",
-  keywords: [
-    "slider",
-    "range",
-    "value",
-    "input"
-  ],
-  usage: {
-    description: "Use Slider for bounded numeric choices where approximate adjustment is faster than typing.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use visible labels, min/max context, and value output when precision matters."
-      },
-      {
-        guidance: "do",
-        description: "Choose steps that match the real granularity of the setting."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use Slider when users must enter an exact arbitrary number; use NumberField."
-      },
-      {
-        guidance: "dont",
-        description: "Do not use it without showing the value. A slider with no numeric readout makes any precise choice guesswork \u2014 pair it with a ScrubField or a NumberField."
-      },
-      {
-        guidance: "dont",
-        description: "Do not resize the thumb's box on hover, focus, or drag. The thumb is a fixed-size hit target wrapping a decorative dot; only the dot scales. A target that grows under the cursor is a target nobody can learn, and WCAG 2.5.8 measures target size at rest. Restyle the dot, not the box."
-      }
-    ],
-    anatomy: [
-      {
-        name: "SliderRoot",
-        required: true,
-        description: "The controlled slider wrapper."
-      },
-      {
-        name: "SliderControl",
-        required: true,
-        description: "The interactive slider control region."
-      },
-      {
-        name: "SliderTrack",
-        required: true,
-        description: "The visible value range."
-      },
-      {
-        name: "SliderIndicator",
-        required: false,
-        description: "The filled portion of the track."
-      },
-      {
-        name: "SliderThumb",
-        required: true,
-        description: "The draggable handle."
-      },
-      {
-        name: "SliderValue",
-        required: false,
-        description: "A readable value display."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "NumberField",
-      "Progress"
-    ]
-  },
-  props: [
-    {
-      name: "value",
-      type: "number | number[]",
-      default: "\u2014",
-      description: "Controlled value. An array renders a range slider with one thumb per entry."
-    },
-    {
-      name: "defaultValue",
-      type: "number | number[]",
-      default: "\u2014",
-      description: "Uncontrolled initial value. An array renders a range slider."
-    },
-    {
-      name: "onValueChange",
-      type: "(value, eventDetails) => void",
-      default: "\u2014",
-      description: "Fires on every value change. value is a number (or number[] for a range)."
-    },
-    {
-      name: "min",
-      type: "number",
-      default: "0",
-      description: "Minimum allowed value."
-    },
-    {
-      name: "max",
-      type: "number",
-      default: "100",
-      description: "Maximum allowed value."
-    },
-    {
-      name: "step",
-      type: "number",
-      default: "1",
-      description: "Granularity the slider steps through. Snaps to multiples."
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      default: "false",
-      description: "Ignore user interaction and dim the control."
-    },
-    {
-      name: "orientation",
-      type: "'horizontal' | 'vertical'",
-      default: "horizontal",
-      description: "Axis the slider tracks along. A vertical slider has no intrinsic length \u2014 give it a height (h-40, or flex-1 in a column)."
-    }
-  ],
-  subcomponents: [
-    {
-      name: "SliderRoot",
-      type: "Base UI Slider.Root props",
-      description: "The unstyled Base UI Root for custom composition \u2014 owns the value state and forwards value / defaultValue / onValueChange / min / max / step. Drag state surfaces via data-[dragging]. The default Slider export wires all the parts for you."
-    },
-    {
-      name: "SliderControl",
-      type: "Base UI Control props + className",
-      description: "The interactive track lane \u2014 the positioning context the indicator and thumbs sit in; dims when disabled."
-    },
-    {
-      name: "SliderTrack",
-      type: "Base UI Track props + className",
-      description: "The full-range rail beneath the indicator."
-    },
-    {
-      name: "SliderIndicator",
-      type: "Base UI Indicator props + className",
-      description: "The filled portion from min (or the lower thumb) to the current value."
-    },
-    {
-      name: "SliderThumb",
-      type: "Base UI Thumb props + className",
-      description: "A draggable handle: a fixed-size hit target wrapping a decorative dot. The dot rests small and scales to full size on hover, keyboard focus, and drag; the box never changes, so row metrics and the tap target hold. Range sliders render one per value; pass index for SSR. Interaction state surfaces via data-[dragging]."
-    },
-    {
-      name: "SliderValue",
-      type: "Base UI Value props",
-      description: "Formatted value readout for custom compositions (e.g. a live number beside the control)."
-    }
-  ],
-  tokensUsed: ["secondary", "primary", "background", "ring"],
-  a11y: [
-    "Base UI provides role=slider, aria-valuemin/max/now, and arrow-key / Page Up-Down / Home-End control.",
-    "Each thumb is a focusable input[type=range] nested in the thumb element; keyboard focus raises a 2px ring on the thumb via has-[:focus-visible] (a bare focus-visible: on the thumb never fires, since the div itself is not focusable).",
-    "The thumb's hit area is a fixed 16px box at every state. Only the decorative inner dot resizes \u2014 rest 12px, full 16px on hover, keyboard focus, and drag \u2014 so the target a pointer or finger must land on never moves or changes size. Keyboard users, who never hover, get the enlarged dot from focus-visible.",
-    "The rest-to-full transition uses the motion duration/easing tokens, so it collapses to an instant state change under prefers-reduced-motion or MotionProvider off. The size change itself still happens: it reports interaction state, it is not decoration.",
-    "Range sliders get one thumb per value with minStepsBetweenValues honored.",
-    "Pass an aria-label (or getAriaLabel on a thumb) so each handle has an accessible name."
-  ],
-  examples: [
-    {
-      label: "Single value",
-      code: '<Slider defaultValue={50} aria-label="Volume" />'
-    },
-    {
-      label: "Range",
-      code: 'const [range, setRange] = useState([20, 60])\n<Slider value={range} onValueChange={setRange} aria-label="Price range" />'
-    },
-    {
-      label: "Stepped",
-      code: "<Slider defaultValue={40} min={0} max={100} step={10} />"
-    },
-    {
-      label: "Vertical",
-      code: '<div className="h-40"><Slider orientation="vertical" defaultValue={40} aria-label="Level" /></div>'
-    },
-    {
-      label: "Composed with a value readout",
-      code: '<Field label="Volume"><SliderRoot defaultValue={40} className="flex items-center gap-3"><SliderControl><SliderTrack><SliderIndicator /><SliderThumb /></SliderTrack></SliderControl><SliderValue className="text-mono-sm" /></SliderRoot></Field>'
-    }
-  ]
-};
-var useComboboxFilteredItems = Combobox$1.useFilteredItems;
-var ComboboxVirtualContext = createContext(null);
-function Combobox({
-  onItemHighlighted,
-  ...props
-}) {
-  const revealRef = useRef(null);
-  const highlightRef = useRef(onItemHighlighted);
-  highlightRef.current = onItemHighlighted;
-  const handleHighlight = useCallback(
-    (value, details) => {
-      highlightRef.current?.(
-        value,
-        details
-      );
-      const reveal = revealRef.current;
-      if (reveal && details.index >= 0) {
-        queueMicrotask(() => reveal(details.index));
-      }
-    },
-    []
-  );
-  const bridge = useMemo(
-    () => ({
-      register(reveal) {
-        revealRef.current = reveal;
-      },
-      value: props.value,
-      isItemEqualToValue: props.isItemEqualToValue
-    }),
-    [props.value, props.isItemEqualToValue]
-  );
-  return /* @__PURE__ */ jsx(ComboboxVirtualContext.Provider, { value: bridge, children: /* @__PURE__ */ jsx(
-    Combobox$1.Root,
-    {
-      ...props,
-      onItemHighlighted: handleHighlight
-    }
-  ) });
+  ) });
 }
 var ComboboxValue = Combobox$1.Value;
 var ComboboxClear = Combobox$1.Clear;
@@ -5755,7 +4850,7 @@ var contextMenuMeta = {
   related: {
     components: [
       "Menu",
-      "DotsMenu"
+      "OverflowMenu"
     ]
   },
   props: [
@@ -6244,199 +5339,62 @@ var paginationMeta = {
     }
   ]
 };
-function detectApple() {
-  if (typeof navigator === "undefined") return false;
-  const nav = navigator;
-  const platform = nav.userAgentData?.platform || nav.platform || nav.userAgent || "";
-  return /mac|iphone|ipad|ipod/i.test(platform);
-}
-var noopSubscribe = () => () => {
+
+// src/lib/status-tone.ts
+var STATUS_TONES = ["neutral", "info", "success", "warning", "destructive"];
+var STATUS_TONE_ICON = {
+  neutral: { name: "info", className: "text-muted-foreground" },
+  info: { name: "info", className: "text-tone-info" },
+  success: { name: "circle-check", className: "text-success" },
+  warning: { name: "warning", className: "text-tone-warning" },
+  destructive: { name: "warning", className: "text-destructive" }
 };
-function useIsApple() {
-  return useSyncExternalStore(noopSubscribe, detectApple, () => false);
-}
-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"
+var noteVariants = cva(
+  "flex gap-3 rounded-md border p-4 text-body-sm text-foreground",
+  {
+    variants: {
+      tone: {
+        info: "border-tone-info/30 bg-tone-info/10",
+        warning: "border-tone-warning/30 bg-tone-warning/10",
+        success: "border-success/30 bg-success/10",
+        destructive: "border-destructive/30 bg-destructive/10",
+        neutral: "border-border bg-muted/40"
+      }
+    },
+    defaultVariants: {
+      tone: "info"
+    }
+  }
+);
+var toneAction = {
+  info: "text-tone-info",
+  warning: "text-tone-warning",
+  success: "text-success",
+  destructive: "text-destructive",
+  neutral: "text-foreground"
 };
-function Kbd({ mod = false, variant = "key", className, children, ...props }) {
-  const apple = useIsApple();
-  const content = mod ? apple ? "\u2318" : "Ctrl" : children;
-  return /* @__PURE__ */ jsx(
-    "kbd",
+function Note({
+  tone = "info",
+  title,
+  icon,
+  action,
+  className,
+  children,
+  ...props
+}) {
+  const resolved = tone ?? "info";
+  const { name, className: iconClassName } = STATUS_TONE_ICON[resolved];
+  const glyph = icon === void 0 ? /* @__PURE__ */ jsx(Icon, { name, className: cn("text-base", iconClassName) }) : icon === null ? null : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: cn("text-base", iconClassName) }) : icon;
+  const leadingIcon = glyph ? /* @__PURE__ */ jsx(
+    "span",
     {
-      "data-slot": "kbd",
-      className: cn(
-        "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,
-      children: content
+      "data-slot": "note-icon",
+      className: cn("flex h-[1lh] shrink-0 items-center", title ? "text-title-sm" : "text-body-sm"),
+      children: glyph
     }
-  );
-}
-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 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",
-    "shortcut",
-    "key",
-    "kbd"
-  ],
-  usage: {
-    description: "Use Kbd to display keyboard keys or shortcuts in help text, menus, and docs.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Use it only for literal keyboard input such as Cmd, Enter, or Esc."
-      },
-      {
-        guidance: "do",
-        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."
-      }
-    ]
-  },
-  related: {
-    components: [
-      "Code",
-      "Menu",
-      "CommandMenu"
-    ]
-  },
-  props: [
-    {
-      name: "mod",
-      type: "boolean",
-      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",
-      description: "Merge additional classes onto the key cap."
-    },
-    {
-      name: "...props",
-      type: 'ComponentPropsWithRef<"kbd">',
-      description: "All native <kbd> attributes (children, ref, etc.)."
-    }
-  ],
-  tokensUsed: ["border", "border-strong", "background", "muted-foreground"],
-  a11y: [
-    "Uses the semantic <kbd> element so assistive tech announces keyboard input.",
-    "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: [
-    {
-      label: "Single keys",
-      code: "<Kbd>Esc</Kbd>"
-    },
-    {
-      label: "Combo",
-      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>'
-    }
-  ]
-};
-
-// src/lib/status-tone.ts
-var STATUS_TONES = ["neutral", "info", "success", "warning", "destructive"];
-var STATUS_TONE_ICON = {
-  neutral: { name: "info", className: "text-muted-foreground" },
-  info: { name: "info", className: "text-tone-info" },
-  success: { name: "circle-check", className: "text-success" },
-  warning: { name: "warning", className: "text-tone-warning" },
-  destructive: { name: "warning", className: "text-destructive" }
-};
-var noteVariants = cva(
-  "flex gap-3 rounded-md border p-4 text-body-sm text-foreground",
-  {
-    variants: {
-      tone: {
-        info: "border-tone-info/30 bg-tone-info/10",
-        warning: "border-tone-warning/30 bg-tone-warning/10",
-        success: "border-success/30 bg-success/10",
-        destructive: "border-destructive/30 bg-destructive/10",
-        neutral: "border-border bg-muted/40"
-      }
-    },
-    defaultVariants: {
-      tone: "info"
-    }
-  }
-);
-var toneAction = {
-  info: "text-tone-info",
-  warning: "text-tone-warning",
-  success: "text-success",
-  destructive: "text-destructive",
-  neutral: "text-foreground"
-};
-function Note({
-  tone = "info",
-  title,
-  icon,
-  action,
-  className,
-  children,
-  ...props
-}) {
-  const resolved = tone ?? "info";
-  const { name, className: iconClassName } = STATUS_TONE_ICON[resolved];
-  const glyph = icon === void 0 ? /* @__PURE__ */ jsx(Icon, { name, className: cn("text-base", iconClassName) }) : icon === null ? null : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: cn("text-base", iconClassName) }) : icon;
-  const leadingIcon = glyph ? /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "note-icon",
-      className: cn("flex h-[1lh] shrink-0 items-center", title ? "text-title-sm" : "text-body-sm"),
-      children: glyph
-    }
-  ) : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
       role: "note",
       className: cn(noteVariants({ tone: resolved }), className),
@@ -8470,7 +7428,7 @@ function TreeRow({
     }
   );
   if (subtree === void 0) return row;
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     row,
     expanded ? /* @__PURE__ */ jsx(TreeDepthContext.Provider, { value: depth + 1, children: subtree }) : null
   ] });
@@ -9688,13 +8646,13 @@ function RadioCard({
         className
       ),
       ...props,
-      children: icon != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      children: icon != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("span", { className: SELECTION_CARD_TILE_HEAD, children: [
           /* @__PURE__ */ jsx("span", { className: cn(SELECTION_CARD_GLYPH, t.glyph), children: icon }),
           marker
         ] }),
         content
-      ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: cn("flex h-[1lh] shrink-0 items-center text-title-sm", titleClassName), children: marker }),
         content
       ] })
@@ -9927,7 +8885,7 @@ function CheckboxCard({
   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,
+    Checkbox.Root,
     {
       className: cn(
         SELECTION_CARD_SHELL,
@@ -10761,965 +9719,6 @@ var showMoreMeta = {
     }
   ]
 };
-var LINE_HEIGHT = 16;
-var PAGE_HEIGHT = 400;
-function toPixels(delta, mode) {
-  if (mode === 1) return delta * LINE_HEIGHT;
-  if (mode === 2) return delta * PAGE_HEIGHT;
-  return delta;
-}
-function useWheelToHorizontal(enabled = true) {
-  const nodeRef = useRef(null);
-  const onWheel = useCallback((event) => {
-    const el = nodeRef.current;
-    if (!el) return;
-    if (event.shiftKey) return;
-    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) return;
-    if (event.deltaY === 0) return;
-    const delta = toPixels(event.deltaY, event.deltaMode);
-    const max = el.scrollWidth - el.clientWidth;
-    if (max <= 0) return;
-    const atStart = Math.round(el.scrollLeft) <= 0;
-    const atEnd = Math.round(el.scrollLeft) >= max;
-    if (delta < 0 && atStart || delta > 0 && atEnd) return;
-    event.preventDefault();
-    el.scrollLeft += delta;
-  }, []);
-  return useCallback(
-    (node) => {
-      const previous = nodeRef.current;
-      if (previous === node) return;
-      previous?.removeEventListener("wheel", onWheel);
-      nodeRef.current = node;
-      if (node && enabled) {
-        node.addEventListener("wheel", onWheel, { passive: false });
-      }
-    },
-    [enabled, onWheel]
-  );
-}
-function scrollRegionKeyDown(event, orientation) {
-  const el = event.currentTarget;
-  const horizontal = orientation === "horizontal";
-  const page = horizontal ? el.clientWidth : el.clientHeight;
-  const step = Math.max(40, page * 0.2);
-  const back = horizontal ? "ArrowLeft" : "ArrowUp";
-  const forward = horizontal ? "ArrowRight" : "ArrowDown";
-  const axis = horizontal ? "scrollLeft" : "scrollTop";
-  const max = horizontal ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight;
-  let next = null;
-  if (event.key === back) next = el[axis] - step;
-  else if (event.key === forward) next = el[axis] + step;
-  else if (event.key === "Home") next = 0;
-  else if (event.key === "End") next = max;
-  else if (event.key === "PageUp") next = el[axis] - page;
-  else if (event.key === "PageDown") next = el[axis] + page;
-  if (next === null) return;
-  event.preventDefault();
-  el[axis] = Math.max(0, Math.min(max, next));
-}
-function Scroller({
-  orientation = "vertical",
-  wheelScroll = true,
-  label,
-  className,
-  viewportClassName,
-  children,
-  ref,
-  style,
-  onScroll,
-  onKeyDown,
-  ...props
-}) {
-  const regionRef = useRef(null);
-  const isHorizontal = orientation === "horizontal";
-  const trackActivity = useScrollActivity();
-  const trackWheel = useWheelToHorizontal(isHorizontal && wheelScroll);
-  const setRegion = useCallback(
-    (node) => {
-      setRef(ref, node);
-      trackActivity(node);
-      trackWheel(node);
-      regionRef.current = node;
-    },
-    [ref, trackActivity, trackWheel]
-  );
-  const handleKeyDown = useCallback(
-    (event) => {
-      onKeyDown?.(event);
-      if (event.defaultPrevented) return;
-      scrollRegionKeyDown(event, orientation);
-    },
-    [onKeyDown, orientation]
-  );
-  const [showStart, setShowStart] = useState(false);
-  const [showEnd, setShowEnd] = useState(false);
-  const sync = useCallback(
-    (el) => {
-      if (orientation === "horizontal") {
-        const { scrollLeft, scrollWidth, clientWidth } = el;
-        setShowStart(scrollLeft > 0);
-        setShowEnd(scrollLeft < scrollWidth - clientWidth - 1);
-      } else {
-        const { scrollTop, scrollHeight, clientHeight } = el;
-        setShowStart(scrollTop > 0);
-        setShowEnd(scrollTop < scrollHeight - clientHeight - 1);
-      }
-    },
-    [orientation]
-  );
-  useLayoutEffect(() => {
-    if (regionRef.current) sync(regionRef.current);
-  }, [sync]);
-  const handleScroll = useCallback(
-    (event) => {
-      sync(event.currentTarget);
-      onScroll?.(event);
-    },
-    [sync, onScroll]
-  );
-  const isVertical = orientation === "vertical";
-  const fade = "calc(var(--spacing) * 7)";
-  const mask = showStart || showEnd ? `linear-gradient(to ${isVertical ? "bottom" : "right"}, ${showStart ? "transparent" : "#000"}, #000 ${showStart ? fade : "0"}, #000 ${showEnd ? `calc(100% - ${fade})` : "100%"}, ${showEnd ? "transparent" : "#000"})` : void 0;
-  return (
-    // The chrome box. Carries the consumer's border/background/radius and the
-    // sizing, and is NOT masked — which is the entire point of the split. A
-    // flex column so the scroller below can be `flex-1 min-h-0`, which bounds
-    // off `h-*`, `max-h-*` and `flex-1` alike with no percentage to resolve.
-    /* @__PURE__ */ jsx("div", { style, className: cn("flex flex-col", className), children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: setRegion,
-        onScroll: handleScroll,
-        onKeyDown: handleKeyDown,
-        tabIndex: 0,
-        role: "group",
-        "aria-label": label,
-        "data-orientation": orientation,
-        style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0,
-        className: cn(
-          // Fill the chrome box without a percentage height. `min-h-0` /
-          // `min-w-0` because a flex item's default `min-size: auto` refuses to
-          // shrink below its content — which is exactly how a scroll region
-          // silently stops scrolling.
-          "min-h-0 min-w-0 flex-1",
-          // Inherit the wrapper's radius so content clips to the same curve the
-          // border draws; a scroll container already clips to its own padding
-          // box, so this needs no `overflow-hidden` fighting the scroll axis.
-          "rounded-[inherit]",
-          "motion-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          // Contained overscroll: a Scroller is almost always a bounded region
-          // inside a page or a popup, and a wheel gesture that reaches its end
-          // should stop rather than start scrolling whatever is behind it.
-          "overscroll-contain",
-          isVertical ? (
-            // Vertical: a thin bar, revealed while scrolling. The fade says
-            // "more below"; the bar says how much and where you are — a long
-            // list needs both.
-            "scrollbar-quiet overflow-y-auto overflow-x-hidden"
-          ) : (
-            // Horizontal: no bar at all. The edge fades this component already
-            // draws ARE the affordance, and they say the same thing better —
-            // which is the carousel read a media strip or chip row wants. A
-            // 4px rail under a row of tiles adds chrome and no information.
-            "scrollbar-hidden overflow-x-auto overflow-y-hidden"
-          ),
-          viewportClassName
-        ),
-        ...props,
-        children
-      }
-    ) })
-  );
-}
-Scroller.displayName = "Scroller";
-function defaultFilter(items, query) {
-  const q = query.trim().toLowerCase();
-  if (!q) return items;
-  return items.filter((item) => item.label.toLowerCase().includes(q));
-}
-function useCommandQuery(queryProp, onQueryChange) {
-  const [ownQuery, setOwnQuery] = useState("");
-  const query = queryProp ?? ownQuery;
-  const setQuery = (next) => {
-    if (queryProp === void 0) setOwnQuery(next);
-    onQueryChange?.(next);
-  };
-  return [query, setQuery];
-}
-var COMMAND_GEOMETRY = "[--cm-inset:max(--spacing(1),calc(var(--radius-lg)/3))] [--cm-pad:max(--spacing(2),calc(--spacing(4)-var(--cm-inset)))]";
-function CommandMenuBody({
-  query,
-  setQuery,
-  items,
-  filter,
-  listClassName,
-  placeholder,
-  emptyMessage,
-  title,
-  scope,
-  inputProps,
-  children,
-  close,
-  open,
-  inline
-}) {
-  const [activeId, setActiveId] = useState(null);
-  const listRef = useRef(null);
-  const listboxId = useId();
-  const tier = useTypeTier();
-  const grouped = useMemo(() => {
-    if (!items) return [];
-    const visible = filter === null ? items : filter ? filter(items, query) : defaultFilter(items, query);
-    const map = /* @__PURE__ */ new Map();
-    for (const item of visible) {
-      const bucket = map.get(item.group);
-      if (bucket) bucket.push(item);
-      else map.set(item.group, [item]);
-    }
-    return Array.from(map, ([group, groupItems]) => ({ group, groupItems }));
-  }, [items, query, filter]);
-  const q = filter === void 0 ? query.trim().toLowerCase() : "";
-  const options = () => Array.from(
-    listRef.current?.querySelectorAll('[role="option"]') ?? []
-  );
-  const seedActive = useCallback(() => {
-    const all = options();
-    const runnable = all.find(
-      (option) => option.getAttribute("aria-disabled") !== "true"
-    );
-    setActiveId((runnable ?? all[0])?.id ?? null);
-  }, []);
-  const [resultCount, setResultCount] = useState(0);
-  useEffect(() => {
-    const all = options();
-    const next = all.length;
-    setResultCount((current) => current === next ? current : next);
-    if (inline && (activeId ? !all.some((option) => option.id === activeId) : next > 0)) {
-      seedActive();
-    }
-  });
-  const attachList = useCallback(
-    (node) => {
-      listRef.current = node;
-      if (node) seedActive();
-    },
-    [seedActive]
-  );
-  useEffect(() => {
-    if (open) seedActive();
-  }, [open, query]);
-  const onInputKeyDown = (event) => {
-    inputProps?.onKeyDown?.(event);
-    if (event.defaultPrevented) return;
-    if (inline && event.key === "Escape") {
-      if (query) {
-        event.preventDefault();
-        event.stopPropagation();
-        setQuery("");
-      }
-      return;
-    }
-    const opts = options();
-    if (opts.length === 0) return;
-    const index = opts.findIndex((o) => o.id === activeId);
-    const move = (next) => {
-      if (!next) return;
-      event.preventDefault();
-      setActiveId(next.id);
-      next.scrollIntoView({ block: "nearest" });
-    };
-    switch (event.key) {
-      case "ArrowDown":
-        move(index < 0 ? opts[0] : opts[(index + 1) % opts.length]);
-        break;
-      case "ArrowUp":
-        move(
-          index < 0 ? opts[opts.length - 1] : opts[(index - 1 + opts.length) % opts.length]
-        );
-        break;
-      case "Home":
-        move(opts[0]);
-        break;
-      case "End":
-        move(opts[opts.length - 1]);
-        break;
-      // A screenful, near enough. Rows are a fixed height, so "ten" is the
-      // same distance every time — measuring the listbox would be more exact
-      // and less predictable. Clamped rather than wrapped: a page jump that
-      // wraps to the far end is a jump nobody asked for.
-      case "PageDown":
-        move(opts[Math.min(opts.length - 1, (index < 0 ? 0 : index) + 10)]);
-        break;
-      case "PageUp":
-        move(opts[Math.max(0, (index < 0 ? 0 : index) - 10)]);
-        break;
-      case "Enter": {
-        const active = opts.find((o) => o.id === activeId) ?? opts[0];
-        if (active) {
-          event.preventDefault();
-          if (active.getAttribute("aria-disabled") !== "true") active.click();
-        }
-        break;
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2 border-b border-border px-[calc(var(--cm-inset)+var(--cm-pad))] py-3", COMMAND_GEOMETRY), children: [
-      /* @__PURE__ */ jsx(Icon, { name: "search", className: "text-base text-muted-foreground" }),
-      scope ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: scope }) : null,
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          autoFocus: !inline,
-          type: "text",
-          ...inputProps,
-          "data-command-menu-input": inline ? void 0 : "",
-          role: "combobox",
-          "aria-expanded": true,
-          "aria-controls": listboxId,
-          "aria-activedescendant": activeId ?? void 0,
-          "aria-autocomplete": "list",
-          value: query,
-          onChange: (event) => setQuery(event.target.value),
-          onKeyDown: onInputKeyDown,
-          placeholder,
-          "aria-label": inputProps?.["aria-label"] ?? "Command search",
-          className: cn(
-            `w-full border-0 bg-transparent ${tier.body} text-foreground outline-none placeholder:text-muted-foreground`,
-            inputProps?.className
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: resultCount === 0 ? "No results" : `${resultCount} result${resultCount === 1 ? "" : "s"}` }),
-    /* @__PURE__ */ jsxs(
-      Scroller,
-      {
-        ref: attachList,
-        role: "listbox",
-        id: listboxId,
-        "aria-label": title,
-        className: cn("min-h-0 max-h-80 p-(--cm-inset)", COMMAND_GEOMETRY, listClassName),
-        children: [
-          /* @__PURE__ */ jsx(
-            CommandQueryContext.Provider,
-            {
-              value: { query: children ? q : "", close, activeId, setActiveId },
-              children: children ?? grouped.map(({ group, groupItems }) => /* @__PURE__ */ jsx(CommandMenuGroup, { label: group, children: groupItems.map((item) => /* @__PURE__ */ jsx(
-                CommandMenuItem,
-                {
-                  id: item.id ? `${listboxId}-${item.id}` : void 0,
-                  icon: item.icon,
-                  detail: item.detail,
-                  hint: item.hint,
-                  disabled: item.disabled,
-                  onSelect: () => {
-                    item.onSelect();
-                    close();
-                  },
-                  children: item.label
-                },
-                item.id ?? `${group}:${item.label}`
-              )) }, group))
-            }
-          ),
-          (children ? resultCount === 0 : grouped.length === 0) && /* @__PURE__ */ jsx("div", { className: "px-(--cm-pad) py-6 text-center text-body-sm text-muted-foreground", children: emptyMessage })
-        ]
-      }
-    )
-  ] });
-}
-function CommandMenu({
-  open,
-  onOpenChange,
-  items,
-  query: queryProp,
-  onQueryChange,
-  filter,
-  listClassName,
-  placeholder = "Type a command or search\u2026",
-  emptyMessage = "No results found.",
-  title = "Command menu",
-  description = "Search for a command and press Enter to run it.",
-  finalFocus,
-  scope,
-  inputProps,
-  children,
-  className,
-  ...props
-}) {
-  const [query, setQuery] = useCommandQuery(queryProp, onQueryChange);
-  const anchoredDensity = useAnchoredDensity();
-  const handleOpenChange = (next) => {
-    if (!next) setQuery("");
-    onOpenChange(next);
-  };
-  const close = () => handleOpenChange(false);
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      scroll: false,
-      ...anchoredDensity,
-      finalFocus,
-      className: cn(
-        // Top-anchored rather than centred, so the viewport cap DialogContent
-        // applies (which assumes a 1rem margin top and bottom) has to be
-        // restated for the 12vh offset: everything below the offset, less the
-        // bottom margin.
-        "top-[12vh] max-h-[calc(88dvh-1rem)] max-w-140 -translate-y-0 overflow-hidden p-0",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: description }),
-        /* @__PURE__ */ jsx(
-          CommandMenuBody,
-          {
-            query,
-            setQuery,
-            items,
-            filter,
-            listClassName,
-            placeholder,
-            emptyMessage,
-            title,
-            scope,
-            inputProps,
-            close,
-            open,
-            inline: false,
-            children
-          }
-        )
-      ]
-    }
-  ) });
-}
-var noop = () => {
-};
-function CommandMenuPanel({
-  items,
-  query: queryProp,
-  onQueryChange,
-  filter,
-  listClassName,
-  placeholder = "Type a command or search\u2026",
-  emptyMessage = "No results found.",
-  title = "Command menu",
-  scope,
-  inputProps,
-  children,
-  className,
-  ...props
-}) {
-  const [query, setQuery] = useCommandQuery(queryProp, onQueryChange);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "command-menu-panel",
-      className: cn(
-        "flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-card text-card-foreground",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        CommandMenuBody,
-        {
-          query,
-          setQuery,
-          items,
-          filter,
-          listClassName,
-          placeholder,
-          emptyMessage,
-          title,
-          scope,
-          inputProps,
-          close: noop,
-          open: true,
-          inline: true,
-          children
-        }
-      )
-    }
-  );
-}
-var CommandQueryContext = createContext(
-  null
-);
-function CommandMenuGroup({
-  label,
-  className,
-  children,
-  ...props
-}) {
-  const labelId = useId();
-  const tier = useTypeTier();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "group",
-      "aria-labelledby": labelId,
-      className: cn("py-1", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: labelId,
-            className: `px-(--cm-pad,--spacing(2)) py-1 ${tier.label} text-muted-foreground`,
-            children: label
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function CommandMenuItem({
-  onSelect,
-  icon,
-  detail,
-  hint,
-  id: idProp,
-  className,
-  children,
-  disabled,
-  ...props
-}) {
-  const ctx = useContext(CommandQueryContext);
-  const tier = useTypeTier();
-  const autoId = useId();
-  const id = idProp ?? autoId;
-  if (ctx?.query) {
-    const text = textOf(children).toLowerCase();
-    if (!text.includes(ctx.query)) return null;
-  }
-  const handleSelect = () => {
-    if (disabled) return;
-    onSelect?.();
-    ctx?.close();
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      role: "option",
-      "aria-selected": ctx?.activeId === id,
-      "aria-disabled": disabled || void 0,
-      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))-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
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-base text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
-        detail && /* @__PURE__ */ jsx("span", { className: "truncate text-body-sm text-muted-foreground", children: detail }),
-        hint && /* @__PURE__ */ jsx("span", { className: "ms-auto flex min-w-0 max-w-1/2 items-center ps-4 text-body-sm text-muted-foreground", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: hint }) })
-      ]
-    }
-  );
-}
-function textOf(node) {
-  if (node == null || typeof node === "boolean") return "";
-  if (typeof node === "string" || typeof node === "number") return String(node);
-  if (Array.isArray(node)) return node.map(textOf).join("");
-  if (typeof node === "object" && "props" in node) {
-    const props = node.props;
-    return textOf(props?.children);
-  }
-  return "";
-}
-var COMMAND_MENU_INPUT_ATTR = "data-command-menu-input";
-var NON_TEXT_INPUTS = /* @__PURE__ */ new Set([
-  "button",
-  "checkbox",
-  "color",
-  "file",
-  "image",
-  "radio",
-  "range",
-  "reset",
-  "submit"
-]);
-function isEditable(target) {
-  if (!(target instanceof Element)) return false;
-  if (target.closest(`[${COMMAND_MENU_INPUT_ATTR}]`)) return false;
-  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)
-    return true;
-  if (target instanceof HTMLInputElement)
-    return !NON_TEXT_INPUTS.has(target.type);
-  if (target instanceof HTMLElement && target.isContentEditable) return true;
-  return target.closest('[contenteditable]:not([contenteditable="false"])') !== null;
-}
-function detectApple2() {
-  if (typeof navigator === "undefined") return false;
-  const nav = navigator;
-  const platform = nav.userAgentData?.platform || nav.platform || nav.userAgent || "";
-  return /mac|iphone|ipad|ipod/i.test(platform);
-}
-var noopSubscribe2 = () => () => {
-};
-function useIsApple2() {
-  return useSyncExternalStore(noopSubscribe2, detectApple2, () => false);
-}
-function useCommandMenuShortcut(onShortcut, key = "k") {
-  const handler = useRef(onShortcut);
-  useIsomorphicLayoutEffect(() => {
-    handler.current = onShortcut;
-  });
-  useEffect(() => {
-    if (key === false || typeof window === "undefined") return;
-    const wanted = key.toLowerCase();
-    const apple = detectApple2();
-    function onKeyDown(event) {
-      if (event.defaultPrevented || event.isComposing) return;
-      if (typeof event.key !== "string" || event.key.toLowerCase() !== wanted) return;
-      const mod = apple ? event.metaKey : event.ctrlKey;
-      const other = apple ? event.ctrlKey : event.metaKey;
-      if (!mod || other || event.altKey || event.shiftKey) return;
-      if (isEditable(event.target)) return;
-      event.preventDefault();
-      handler.current(event);
-    }
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [key]);
-}
-function CommandMenuTrigger({
-  onOpen,
-  onClick,
-  placeholder = "Search",
-  shortcut = "k",
-  size = "md",
-  className,
-  type,
-  ...props
-}) {
-  const tier = useTypeTier();
-  const apple = useIsApple2();
-  useCommandMenuShortcut(() => onOpen?.(), props.disabled ? false : shortcut);
-  const keyLabel = shortcut === false ? null : shortcut.toUpperCase();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: type ?? "button",
-      "aria-haspopup": "dialog",
-      "aria-keyshortcuts": keyLabel ? `${apple ? "Meta" : "Control"}+${keyLabel}` : void 0,
-      onClick: (event) => {
-        onClick?.(event);
-        if (!event.defaultPrevented) onOpen?.();
-      },
-      className: cn(
-        // FIELD_SHELL carries motion-interactive too; it is restated here so
-        // the hover it eases is visibly paired with its recipe.
-        "flex w-full items-center gap-2 text-start text-muted-foreground motion-interactive hover:text-foreground",
-        FIELD_SHELL,
-        size === "sm" ? `h-(--control-sm) ps-2.5 pe-1.5 ${tier.supporting}` : `h-(--control-md) ps-3 pe-2 ${tier.body}`,
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: "search", className: "shrink-0 text-sm" }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: placeholder }),
-        keyLabel ? (
-          // aria-hidden: the shortcut is announced once, through
-          // aria-keyshortcuts, rather than read out as part of the name.
-          // 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
-      ]
-    }
-  );
-}
-CommandMenuTrigger.displayName = "CommandMenuTrigger";
-
-// src/components/command-menu/command-menu.meta.ts
-var commandMenuMeta = {
-  name: "CommandMenu",
-  summary: "A command palette (Cmd+K) built on our Dialog: a top-aligned wide surface with a search input and a scrollable, JS-filtered list of grouped commands. CommandMenuPanel renders the same palette in place, on a card in the page.",
-  keywords: [
-    "command",
-    "command menu",
-    "palette",
-    "launcher",
-    "cmd k",
-    "search",
-    "quick action",
-    "spotlight",
-    "navigation",
-    "search trigger",
-    "header search",
-    "keyboard shortcut",
-    "inline command menu",
-    "embedded palette",
-    "settings search"
-  ],
-  usage: {
-    description: "Use CommandMenu for global or contextual keyboard-driven actions: navigation, creation, quick settings, or searchable commands. It should feel curated and fast; use Select, Menu, or Combobox for ordinary inline choices.",
-    bestPractices: [
-      {
-        guidance: "do",
-        description: "Open the palette from a header search with CommandMenuTrigger: a button wearing SearchInput's field shell, with the \u2318K / Ctrl K hint and the page-wide shortcut built in. A palette with no visible trigger still takes useCommandMenuShortcut rather than a hand-written keydown listener."
-      },
-      {
-        guidance: "dont",
-        description: "Hand-style a <button> to look like a search field, or put a SearchInput in the header that opens a dialog when focused. The first drifts from the field it imitates; the second is a text box you cannot type in. A header search that opens the palette is CommandMenuTrigger."
-      },
-      {
-        guidance: "do",
-        description: "Group items by task area, such as Navigation, Create, or Settings, so users can scan before typing."
-      },
-      {
-        guidance: "do",
-        description: "Keep command labels action-oriented and unique enough to search."
-      },
-      {
-        guidance: "do",
-        description: "Provide useful bootstrap items so the menu is valuable before the user types."
-      },
-      {
-        guidance: "dont",
-        description: "Use CommandMenu as a replacement for every dropdown. Simple choices belong in Select, Menu, or Tabs."
-      },
-      {
-        guidance: "do",
-        description: "Pass a filter when the palette searches more than one source. Ranking (exact prefix over substring over subsequence) is the caller's to own, and the returned order is kept verbatim \u2014 including group order, which follows each group's first surviving row."
-      },
-      {
-        guidance: "do",
-        description: "List a command the user cannot currently run as disabled with the reason in hint, rather than filtering it away. A palette that hides what you cannot do teaches you nothing about why."
-      },
-      {
-        guidance: "do",
-        description: "Resize the list with listClassName rather than reaching past className into the palette's DOM. className is the dialog surface; listClassName is the Scroller that actually scrolls."
-      },
-      {
-        guidance: "do",
-        description: "Use CommandMenuPanel when the palette lives in the page: a sidebar launcher, a settings search, a demo. It takes the same items, filter, query and children, and keeps the same keyboard model; it is a static card, so it does not trap focus or take it on mount, and Esc clears the query instead of closing anything."
-      },
-      {
-        guidance: "dont",
-        description: "Hand-build a palette mock from a search glyph, a row of buttons and a highlight. That is CommandMenuPanel, and the hand-built one has no combobox, no filtering and no keyboard model."
-      },
-      {
-        guidance: "dont",
-        description: "Dump every app route and action into one uncurated list. Keep the palette opinionated."
-      },
-      {
-        guidance: "dont",
-        description: "Rebuild the combobox over Dialog to get consumer-owned ranking. query/onQueryChange and filter are that seam; the keyboard model, activedescendant wiring, and result-count live region come with them."
-      }
-    ],
-    anatomy: [
-      {
-        name: "Trigger",
-        required: false,
-        description: "CommandMenuTrigger \u2014 the search-field-shaped button in a header that opens the palette on click or on \u2318K / Ctrl+K. It sits outside CommandMenu; wire its onOpen to the palette's open state."
-      },
-      {
-        name: "Dialog surface",
-        required: true,
-        description: "The modal shell that traps focus and positions the launcher. CommandMenuPanel replaces it with a static card in the page (border, card fill, no shadow)."
-      },
-      {
-        name: "Search input",
-        required: true,
-        description: "The combobox input that filters commands while focus remains in the field."
-      },
-      {
-        name: "Groups",
-        required: false,
-        description: "Labelled command sections that keep results scannable."
-      },
-      {
-        name: "Items",
-        required: true,
-        description: "Keyboard-selectable command rows that run onSelect and close the palette."
-      }
-    ]
-  },
-  related: {
-    components: ["Dialog", "SearchInput", "Kbd", "Menu", "Select", "Combobox"],
-    patterns: ["DashboardPage", "ListDetailPage"]
-  },
-  status: "stable",
-  props: [
-    {
-      name: "scope",
-      type: "ReactNode",
-      description: 'A scope chip in the header, between the search glyph and the input \u2014 "In: Backdrop". A scope belongs beside the field rather than in its value: put it in the value and the user deletes prose to widen their search, and your filter parses it back out. Pair with inputProps.onKeyDown handling Backspace on an empty query, or the only way out of a scope is the mouse.'
-    },
-    {
-      name: "inputProps",
-      type: "Omit<ComponentProps<'input'>, 'role' | 'value' | 'onChange' | aria-*>",
-      description: "Extra props for the search input. `onKeyDown` runs BEFORE the palette's own handling and opts out of a key by calling preventDefault() \u2014 which is what makes a scope chip Backspace-dismissable. Running first is deliberate: Backspace happens not to be a key the palette claims today, so a plain passthrough would work until the palette grows a 'Backspace clears the query' affordance, at which point the consumer's behaviour breaks silently. The combobox wiring (role, aria relationships, controlled value) is not overridable; aria-label and className compose."
-    },
-    {
-      name: "open",
-      type: "boolean",
-      description: "Controlled open state of the palette."
-    },
-    {
-      name: "onOpenChange",
-      type: "(open: boolean) => void",
-      description: "Called on open/close (select, Esc, outside click)."
-    },
-    {
-      name: "items",
-      type: "CommandItem[]",
-      description: "Data-driven commands ({ group, label, onSelect, id?, icon?, detail?, hint?, disabled? }). Ignored when children are provided. id is optional identity: filter is handed these same objects, so it is how a caller that ranks over its own richer model maps the array back onto it \u2014 and it becomes the row's DOM id (namespaced to the palette) and React key, so two rows may share a label."
-    },
-    {
-      name: "query",
-      type: "string",
-      description: "Controlled query. Leave undefined to let the palette own it; either way it resets on close (a controlled caller gets onQueryChange(''))."
-    },
-    {
-      name: "onQueryChange",
-      type: "(query: string) => void",
-      description: "Called on every query change. Required to control query, optional otherwise."
-    },
-    {
-      name: "filter",
-      type: "((items: CommandItem[], query: string) => CommandItem[]) | null",
-      default: "case-insensitive substring match on label",
-      description: "Replaces or disables the built-in match. A function ranks and filters items itself and its order is kept verbatim; null renders items exactly as given. Either also stops declarative CommandMenuItem children self-filtering. The query arrives raw \u2014 trimming and case are policy, and this is the prop that hands policy over."
-    },
-    {
-      name: "listClassName",
-      type: "string",
-      description: `Classes for the scrolling list. className lands on the dialog surface, so this is the seam for the list's own height cap \u2014 listClassName="max-h-[60vh]". The list is a Scroller, so the cap lands on the element that scrolls and the edge fades come free.`
-    },
-    {
-      name: "placeholder",
-      type: "string",
-      default: '"Type a command or search\u2026"',
-      description: "Placeholder for the search input."
-    },
-    {
-      name: "emptyMessage",
-      type: "string",
-      default: '"No results found."',
-      description: "Copy shown when the query matches nothing."
-    },
-    {
-      name: "title",
-      type: "string",
-      default: '"Command menu"',
-      description: "Accessible name for the palette dialog (visually hidden)."
-    },
-    {
-      name: "description",
-      type: "string",
-      default: '"Search for a command and press Enter to run it."',
-      description: "Accessible description for the palette dialog (visually hidden)."
-    },
-    {
-      name: "finalFocus",
-      type: "RefObject<HTMLElement> | ((closeType) => HTMLElement | false) | false",
-      description: "Where focus goes when the palette closes. The Dialog default returns it to the trigger \u2014 the CommandMenuTrigger, when there is one. A palette opened by the keystroke alone has none, so pass a resolver to restore whatever had focus, or false to restore nothing."
-    },
-    {
-      name: "children",
-      type: "ReactNode",
-      description: "Declarative commands via CommandMenuGroup / CommandMenuItem. Takes precedence over items."
-    }
-  ],
-  subcomponents: [
-    {
-      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} />"
-    }
-  ]
-};
 var ContextCard = PreviewCard.Root;
 var ContextCardTrigger = PreviewCard.Trigger;
 var ContextCardPortal = withPortalThemeScope(PreviewCard.Portal);
@@ -12073,7 +10072,7 @@ function MiddleTruncate({
       title: fits ? void 0 : text,
       className: cn("text-mono-sm tabular-nums", className),
       ...props,
-      children: fits ? text : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      children: fits ? text : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: `${text.slice(0, startChars)}\u2026${text.slice(-endChars)}` }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: text })
       ] })
@@ -13074,7 +11073,7 @@ function Carousel({
               )
             }
           ),
-          showArrows && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               CarouselArrowButton,
               {
@@ -13261,6 +11260,6 @@ var carouselMeta = {
 };
 
 // src/index.ts
-var SABLE_UI_VERSION = "0.2.0";
+var SABLE_UI_VERSION = "0.3.1";
 
-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 };
+export { Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, CheckboxCard, CheckboxGroup, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, Feedback, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, GlidingHighlight, InlineStatus, LineChart, Marquee, MiddleTruncate, Note, NumberField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, RadarChart, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, StatusBar, StatusBarGroup, StatusBarSeparator, TRANSPARENT, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, bannerMeta, bannerVariants, breadcrumbsMeta, calendarMeta, carouselMeta, checkboxCardMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, lineChartMeta, marqueeMeta, middleTruncateMeta, noteMeta, noteVariants, numberFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radarChartMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, statusBarMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, treeIndent, treeMeta, useComboboxFilteredItems, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };