@sableui/react 0.14.0 → 0.16.0

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { ClassValue } from 'clsx';
 import { C as ComponentMeta } from './meta-DX5r5wQL.js';
 export { A as AnatomyMeta, a as BestPracticeMeta, E as ExampleMeta, M as MotionMeta, b as MotionSlot, c as PropMeta, R as RelatedMeta, S as SubcomponentMeta, U as UsageMeta } from './meta-DX5r5wQL.js';
-import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-CkqXDVww.js';
-export { A as ART_TOKENS, D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, P as PALETTE_TOKENS, R as RADIUS_TOKENS, d as RHYTHM_TOKENS, e as RadiusToken, f as RhythmToken, S as SEMANTIC_TOKENS, g as SemanticToken, h as TYPE_OVERLINE_TOKENS, i as TYPE_REFINEMENT_TOKENS, j as TYPE_SCALE_TOKENS, k as TYPE_UI_TOKENS, l as TypeOverlineToken, m as TypeRefinementToken, n as TypeScaleToken, o as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, p as WorkspaceSurfaceToken } from './_contract-CkqXDVww.js';
-import { T as ThemeId } from './theme-provider-CdSicAad.js';
-export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-CdSicAad.js';
+import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-CDa9-NdB.js';
+export { A as APP_SHELL_TOKENS, b as ART_TOKENS, D as DENSITY_TOKENS, c as DensityToken, F as FIELD_TOKENS, M as MARK_TOKENS, d as MOTION_TOKENS, e as MotionToken, P as PALETTE_TOKENS, R as RADIUS_TOKENS, f as RHYTHM_TOKENS, g as RadiusToken, h as RhythmToken, S as SEMANTIC_TOKENS, i as SemanticToken, j as TYPE_OVERLINE_TOKENS, k as TYPE_REFINEMENT_TOKENS, l as TYPE_SCALE_TOKENS, m as TYPE_UI_TOKENS, n as TypeOverlineToken, o as TypeRefinementToken, p as TypeScaleToken, q as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, r as WorkspaceSurfaceToken } from './_contract-CDa9-NdB.js';
+import { T as ThemeId } from './theme-provider-BydfM5Z0.js';
+export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-BydfM5Z0.js';
 export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, CenterProps, Col, ColProps, Columns, ColumnsProps, Grid, GridOverlay, GridOverlayProps, GridProps, Page, PageProps, Region, RegionMax, RegionProps, Responsive, Row, RowProps, SafeArea, SafeAreaProps, Spacer, SpacerProps, SplitPane, SplitPaneProps, Stack, StackProps } from './layout/index.js';
 export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
 export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
@@ -440,6 +440,118 @@ declare namespace Presence {
     var displayName: string;
 }
 
+/**
+ * The palette: nine colour families and a scale under every tone, generated
+ * for whatever theme is painting. `scripts/build-palette.mjs` writes this into
+ * `src/palette.css`; `palette.test.ts` holds every built-in theme to it.
+ *
+ * The contract is roles, and roles are not enough for a product. Tags, avatars,
+ * labels and illustration need more colours than three tones, and raw Tailwind
+ * steps ignore the theme, so they were banned outright. These follow it:
+ *
+ * - A **family** (red, orange, yellow, green, teal, blue, purple, pink) keeps
+ *   its own hue and leans toward the brand by half the gap, at most 15°, and
+ *   only as far as the brand has colour to lean toward (an ink-black primary
+ *   pulls nothing). Material 3's harmonize, the same lean the customizer gives
+ *   status colours. Lightness and chroma are fixed per step, fitted inside sRGB
+ *   across the whole lean, so no brand can push a step out of gamut.
+ * - **neutral** is the theme's own page and ink mixed in steps, so it carries
+ *   whatever tint the theme's surfaces do.
+ * - Every **tone** (tone-1…3, info, warning, success, destructive) gets a scale
+ *   on one shared ladder of depths, and the tone lands exactly on the step
+ *   nearest its own lightness: a light status colour in dark mode is 800, a
+ *   mid one is 500. The steps either side stretch to keep the ladder's ends,
+ *   so a tone near one end does not crush five steps into the little room
+ *   left past it, and tone-1-100 and success-100 are the same depth.
+ *
+ * Steps follow the mode rather than literal lightness: a low step is always
+ * near the page and a high step always far from it, so 800 text on a 100
+ * wash reads in both modes with no `dark:` (Sable has none).
+ */
+declare const PALETTE_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+type PaletteStep = (typeof PALETTE_STEPS)[number];
+interface PaletteFamily {
+    name: string;
+    /** The family's own hue, before the lean. */
+    hue: number;
+    /** Step 500, per mode: lightness and the chroma the family is aiming for. */
+    light: {
+        l: number;
+        c: number;
+    };
+    dark: {
+        l: number;
+        c: number;
+    };
+}
+declare const PALETTE_FAMILIES: readonly PaletteFamily[];
+/** The hue families by name — the values Badge, Pill and StatusDot take on `tone`. */
+declare const PALETTE_COLORS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"];
+type PaletteColor = (typeof PALETTE_COLORS)[number];
+declare const isPaletteColor: (value: unknown) => value is PaletteColor;
+/** Tokens that get a scale of their own, `--<token>-50` … `--<token>-950`. */
+declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
+/** Everything the palette names: neutral, the families, then the tone scales. */
+declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
+
+interface BurstProps {
+    /**
+     * Plays the burst each time this value changes. Nothing plays on mount, so
+     * a page that loads with a post already liked stays still. A counter that
+     * goes up on each "on" is the usual trigger; leave it alone on "off" so
+     * un-liking is quiet.
+     */
+    trigger: unknown;
+    /**
+     * The palette families the dots take in turn. The ring blooms in the host's
+     * `currentColor` and fades into the first. Families, not colours: the
+     * palette is generated from the active theme, so the confetti re-themes
+     * with everything else. @default ["pink", "purple", "blue", "orange"]
+     */
+    palette?: readonly PaletteColor[];
+    /** How many places dots fly from; each throws a pair. @default 7 */
+    count?: number;
+    /**
+     * Throw this instead of dots: copies of the glyph being celebrated (an
+     * emoji reaction), larger than a dot and with no ring, the way a reaction
+     * sprays its own emoji. Text only — it is repeated once per piece.
+     */
+    particle?: ReactNode;
+    /**
+     * Also play once when it mounts. For a glyph that arrives BECAUSE of the
+     * action — a reaction pill that did not exist until the reader chose it —
+     * where mounting is the change. Never for a page that loads.
+     * @default false
+     */
+    playOnMount?: boolean;
+    /** Sizing (`[--burst-size:…]`) or placement. */
+    className?: string;
+    /**
+     * How much motion this component uses. A burst is pure flourish, so it
+     * renders only at `full`: `subtle` and `off` render nothing.
+     */
+    motion?: MotionLevel;
+}
+/**
+ * Burst — the follow-through after a small celebratory toggle: a disc that
+ * hollows into a ring, then dots thrown outward that shrink as they go. Place
+ * it inside a `relative` wrapper around the glyph it celebrates, beside a
+ * `motion-bloom` on the glyph itself:
+ *
+ *   <span className="relative inline-flex">
+ *     <span key={likes} className={liked ? "motion-bloom" : undefined}><Icon name="heart" /></span>
+ *     <Burst trigger={likes} />
+ *   </span>
+ *
+ * It sizes from `--burst-size` (the ring's diameter, default 2.25em — about
+ * twice the glyph) and colours from the themed palette families. Decorative and
+ * `aria-hidden`; it draws outside its box and never takes pointer events.
+ * Use it for a moment of delight on an action a person chose — a like, a
+ * star, a finished task — never on something the system did, and never on
+ * every row of a list at once.
+ */
+declare function Burst({ trigger, palette, count, particle, playOnMount, className, motion, }: BurstProps): react.JSX.Element | null;
+
 /** Is the cross-document/SPA View Transitions API available? */
 declare function supportsViewTransitions(): boolean;
 /**
@@ -468,7 +580,7 @@ declare namespace ViewTransitionName {
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "floating" | "field" | "on-color" | "on-color-outline" | "on-color-ghost" | null | undefined;
+    variant?: "link" | "primary" | "secondary" | "destructive" | "field" | "outline" | "ghost" | "floating" | "on-color" | "on-color-outline" | "on-color-ghost" | null | undefined;
     size?: "icon" | "sm" | "md" | "xs" | "cta" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -643,6 +755,67 @@ declare namespace ConfirmButton {
 
 declare const confirmButtonMeta: ComponentMeta;
 
+type LabelledSize = "xs" | "sm" | "md";
+interface LikeButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "iconStart" | "iconEnd" | "badge" | "loading" | "loadingLabel" | "render" | "type"> {
+    /** Pressed (liked), controlled. */
+    pressed?: boolean;
+    /** Pressed (liked) at first, uncontrolled. @default false */
+    defaultPressed?: boolean;
+    /** Called when a press turns it on or off, with the new state. */
+    onPressedChange?: (pressed: boolean, event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The total, shown beside the glyph and rolled when it changes. Pressing
+     * adds or removes the viewer's like at once, before your handler has saved
+     * it, and the button goes back to showing `count` exactly whenever `count`
+     * changes — so pass the server's total and update it when the save lands.
+     * Omit it for a bare glyph.
+     */
+    count?: number;
+    /** How to write the count — `{ notation: "compact" }` for 1.2K. Passed to `Intl.NumberFormat`. */
+    format?: Intl.NumberFormatOptions;
+    /** The glyph, by icon name. Its `solid` variant is shown while pressed. @default "heart" */
+    icon?: string;
+    /**
+     * The palette family the glyph fills with while pressed; the burst blooms
+     * from it. A family, not a colour, so it follows the theme. @default "red"
+     */
+    tone?: PaletteColor;
+    /** The accessible name, read before the count. @default "Like" */
+    label?: string;
+    /** @default "ghost" */
+    variant?: "ghost" | "outline" | "secondary";
+    /** @default "sm" */
+    size?: LabelledSize;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
+     * It can only turn motion down — it never overrides a reader's reduce-motion
+     * setting. The bloom and burst are the flourish; the fill and the count
+     * changing stay.
+     */
+    motion?: MotionLevel;
+}
+/**
+ * LikeButton — a pressed-or-not toggle for a like, a star, a save. Pressing
+ * it on fills the glyph, which blooms past its size and settles while a ring
+ * and a spray of dots burst from it, and the count rolls up a digit. Pressing
+ * it off is quiet: the glyph empties and the count rolls back.
+ *
+ *   <LikeButton count={post.likes} defaultPressed={post.liked} onPressedChange={(on) => save(on)} />
+ *   <LikeButton icon="star" tone="yellow" label="Star" count={repo.stars} />
+ *
+ * A Sable Button carrying `aria-pressed`, with Toggle's controlled/uncontrolled
+ * contract (`pressed` / `defaultPressed` / `onPressedChange`). It composes
+ * Button rather than Toggle: Toggle's pressed fill is the one thing a like
+ * must not show — its state is the glyph.
+ */
+declare function LikeButton({ className, count, format, icon, tone, label, variant, size, motion, pressed: pressedProp, defaultPressed, onPressedChange, onClick, ...props }: LikeButtonProps): react.JSX.Element;
+declare namespace LikeButton {
+    var displayName: string;
+}
+
+declare const likeButtonMeta: ComponentMeta;
+
 interface CardProps extends ComponentPropsWithRef<"div"> {
     /** "default" = raised surface (bg-card + edge + soft shadow). "flat" = transparent. */
     variant?: "default" | "flat";
@@ -1306,7 +1479,9 @@ interface InputProps$1 extends Omit<ComponentPropsWithRef<"input">, "size"> {
 }
 /**
  * Input — a styled native `<input>`. Soft-square (rounded-sm, 8px), never a pill.
- * Sits on the card surface with a 1px input border; focus raises a 2px ring.
+ * Wears the theme's field surface (`field` fill, 1px `field-border` outline — outlined
+ * on the card by default, a filled well in a theme that fills its fields); focus
+ * raises a 2px ring.
  * Set `aria-invalid` (Base UI form fields do this for you) to surface the
  * destructive error treatment on border + ring.
  *
@@ -1375,7 +1550,7 @@ interface TextareaProps extends ComponentPropsWithRef<"textarea"> {
 }
 /**
  * Textarea — a styled native multi-line text control. Soft-square (rounded-sm,
- * like all inputs, never a pill). Sits on the card surface with a 1px input
+ * like all inputs, never a pill). Sits on the field surface with a 1px field
  * border; the focus ring uses the --ring token. Set `aria-invalid` to surface
  * the destructive error treatment on border + ring (same as Input). Pass `autoResize` to grow with content.
  *
@@ -2452,6 +2627,12 @@ type RootProps$3 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
     strokeWidth?: number;
     /** Print the value in the ring's centre. */
     showValue?: boolean;
+    /**
+     * Draw the bar as this many separate ticks instead of a continuous fill —
+     * a quota, score or spend limit read at a glance (▮▮▮▮▮▮▯▯▯▯). Any reading
+     * above `min` fills at least one tick. Bar only: ignored for `shape="ring"`.
+     */
+    segments?: number;
 };
 /**
  * Meter — a static measurement within a known range, over Base UI's Meter.
@@ -2473,8 +2654,10 @@ type RootProps$3 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
  *   </Meter>
  *
  * `shape="ring"` draws the same measurement as a circular gauge (it was Gauge).
+ * `segments={20}` draws the bar as a row of ticks — a spend limit or a score
+ * read at a glance (bar only).
  */
-declare function Meter({ className, children, tone, shape, size, strokeWidth, showValue, ...props }: RootProps$3): react.JSX.Element;
+declare function Meter({ className, children, tone, shape, size, strokeWidth, showValue, segments, ...props }: RootProps$3): react.JSX.Element;
 declare namespace Meter {
     var displayName: string;
 }
@@ -2483,7 +2666,11 @@ type TrackProps$1 = Omit<ComponentProps<typeof Meter$1.Track>, "className"> & {
     /** Bar thickness. Inherits the Meter's `size` unless set here. @default "md" */
     size?: MeterSize;
 };
-/** The rail. Renders a MeterIndicator child by default. */
+/**
+ * The rail. Renders a MeterIndicator child by default — or, when the Meter has
+ * `segments`, its row of ticks (children are not rendered then: there is no
+ * single fill to put in it).
+ */
 declare function MeterTrack({ className, children, size, ...props }: TrackProps$1): react.JSX.Element;
 declare namespace MeterTrack {
     var displayName: string;
@@ -2663,9 +2850,9 @@ declare const CHART_SERIES_COUNT = 8;
 declare function chartColor(index: number): string;
 /**
  * The CSS colour for a tone as a chart fill — for a series that names its role
- * (`tone: "success"`), not for default series (see chartColor). Tones are
- * tuned to be legible as TEXT (dark, restrained); a plotted mark keeps the hue
- * but is lifted into the chart lightness band with a chroma floor, so a quiet
+ * (`tone: "success"`), not for default series (see chartColor). Status and
+ * decorative tones plot at graphic strength (their `-mark` tokens, which each
+ * theme tunes), held in the chart lightness band with a chroma floor, so a quiet
  * tone (a slate "3") still reads as colour rather than grey.
  */
 declare function toneColor(tone: ChartTone): string;
@@ -4177,7 +4364,7 @@ declare const datePickerMeta: ComponentMeta;
  * binds it via Base UI's `toastManager` prop.
  */
 declare const toastManager: _base_ui_react.ToastManager<any>;
-/** Visual/semantic type of a toast — drives the accent and (for loading) a spinner. */
+/** Visual/semantic type of a toast — drives the status glyph and (for loading) a spinner. */
 type ToastType = "success" | "error" | "warning" | "info" | "loading";
 /** Screen anchor for the toast stack. */
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
@@ -4616,7 +4803,16 @@ interface ComboboxItemGroup<Item = unknown> {
     /** The rows under it. */
     items: readonly Item[];
 }
-type ComboboxProps<Value, Multiple extends boolean | undefined = false> = ComboboxRootProps<Value, Multiple>;
+type ComboboxProps<Value, Multiple extends boolean | undefined = false> = ComboboxRootProps<Value, Multiple> & {
+    /**
+     * Paint the typed text wherever it appears in a row's label, on the
+     * `highlight` token pair. Only typed text: a field that still holds the
+     * selected item's label lists everything, and lighting that label in every
+     * row would mark matches nobody searched for. See useMatchHighlight.
+     * @default true
+     */
+    highlightMatches?: boolean;
+};
 /**
  * Root of the combobox. Owns selection, input value, filtering and open state —
  * all of it Base UI's, passed straight through.
@@ -4627,7 +4823,7 @@ type ComboboxProps<Value, Multiple extends boolean | undefined = false> = Combob
  * highlight is forwarded to the virtual list, which knows every row's offset
  * whether or not it exists. Your own `onItemHighlighted` still fires, first.
  */
-declare function Combobox<Value, Multiple extends boolean | undefined = false>({ onItemHighlighted, ...props }: ComboboxProps<Value, Multiple>): react.JSX.Element;
+declare function Combobox<Value, Multiple extends boolean | undefined = false>({ onItemHighlighted, onInputValueChange, highlightMatches, ...props }: ComboboxProps<Value, Multiple>): react.JSX.Element;
 declare const ComboboxValue: typeof Combobox$1.Value;
 declare const ComboboxClear: react.ForwardRefExoticComponent<Omit<_base_ui_react.AutocompleteClearProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const ComboboxPortal: {
@@ -4706,7 +4902,7 @@ type ContentProps$2 = Omit<ComponentProps<typeof Combobox$1.Popup>, "className">
  * callers pass items/children directly. Defaults to the `bottom` side, `start`
  * aligned, 6px offset; matches the input width via `--anchor-width`.
  */
-declare function ComboboxContent({ className, children, side, align, sideOffset, scroll, ...props }: ContentProps$2): react.JSX.Element;
+declare function ComboboxContent({ className, children, side, align, sideOffset, scroll, ref, ...props }: ContentProps$2): react.JSX.Element;
 type ItemProps$1 = Omit<ComponentProps<typeof Combobox$1.Item>, "className"> & {
     className?: string;
 };
@@ -5949,6 +6145,9 @@ declare function hueColor(h: number): string;
 
 declare const colorFieldMeta: ComponentMeta;
 
+/** How AppShell frames its main content on desktop. See `AppShellProps.frame`. */
+type AppShellFrame = "flush" | "inset";
+
 interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
     /**
      * Full-width status banners pinned above the frame (offline / chain-down).
@@ -5981,6 +6180,23 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
     dock?: ReactNode;
     /** Floating overlays (a message launcher, FAB, modal mount points). */
     overlays?: ReactNode;
+    /**
+     * How the desktop frame (`lg` and up) holds the content. Below `lg` the two
+     * are identical: mobile header, plain main, page scroll, bottom nav.
+     * - `flush` (default) — main sits directly on the page beside the rail and
+     *   the document scrolls.
+     * - `inset` — the shell's ground (`shell-ground`, one step off the rail's
+     *   surface) holds the rail and the gap, and main
+     *   is a raised, rounded, bordered panel inset from the window edges that
+     *   scrolls inside itself while the rail stays put. For dense, multi-pane
+     *   product apps. The Sidebar in the `sidebar` slot reads the frame (see
+     *   `app-shell-frame.tsx`), drops its right border — the gap is the divider
+     *   now — and fills the body row. Pair it with `surface="rail"`; with
+     *   `surface="page"` the ground turns page-coloured and the panel's border
+     *   alone lifts it.
+     * @default "flush"
+     */
+    frame?: AppShellFrame;
     /** Main content. */
     children?: ReactNode;
 }
@@ -5992,7 +6208,9 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
  * It is layout-agnostic about the breakpoint switch: each slot component owns
  * its own `hidden`/`lg:*` visibility (Sidebar is `hidden lg:flex`, AppHeader and
  * BottomNav are `lg:hidden`), so the same shell drives mobile and desktop. The
- * only coupling AppShell adds is reserving bottom space for a fixed `bottomNav`.
+ * only couplings AppShell adds are reserving bottom space for a fixed
+ * `bottomNav` and, with `frame="inset"`, telling the Sidebar in its slot to drop
+ * its border and fill the row (`AppShellFrameProvider`, app-shell-frame.tsx).
  *
  *   <AppShell
  *     banners={<NetworkBanner />}
@@ -6003,7 +6221,7 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
  *     <Region max="feed">…</Region>
  *   </AppShell>
  */
-declare function AppShell({ banners, header, sidebar, bottomNav, dock, overlays, className, children, ...rest }: AppShellProps): react.JSX.Element;
+declare function AppShell({ banners, header, sidebar, bottomNav, dock, overlays, frame, className, children, ...rest }: AppShellProps): react.JSX.Element;
 declare namespace AppShell {
     var displayName: string;
 }
@@ -6080,6 +6298,12 @@ interface SidebarProps extends ComponentPropsWithRef<"aside"> {
      * - `page` — the page's own surface and ink, no border. Use it when a
      *   full-width header sits above the rail: a tinted column that starts
      *   under a page-coloured bar reads as pasted on, not as chrome.
+     *
+     * Inside `<AppShell frame="inset">` the rail's surface is also the shell's
+     * ground, so from `lg` the `rail` border is dropped (the gap around the main
+     * panel divides them) and the rail fills the shell's body row rather than
+     * sizing itself to the viewport. AppShell signals this through its
+     * `sidebar` slot only (`useAppShellFrame`), so a rail elsewhere is unaffected.
      * @default "rail"
      */
     surface?: "rail" | "page";
@@ -6425,7 +6649,7 @@ interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChang
 }
 /**
  * SearchInput — a styled search field with a leading magnifier and a clearable
- * X. Soft-square (rounded-sm), card surface, 2px focus ring — same shell as
+ * X. Soft-square (rounded-sm), field surface, 2px focus ring — same shell as
  * Input, padded to make room for the leading and trailing affordances. The
  * clear button only renders while the value is non-empty.
  *
@@ -7532,6 +7756,14 @@ interface CommandMenuProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
      * self-filtering — if you own which rows exist, you own all of them.
      */
     filter?: CommandFilter;
+    /**
+     * Paint the query wherever it appears in a row's label, on the `highlight`
+     * token pair. A literal, case-insensitive match — so under a fuzzy `filter`
+     * a row that matched as a subsequence keeps an unpainted label, which is
+     * honest: nothing in it reads as the query. See useMatchHighlight.
+     * @default true
+     */
+    highlightMatches?: boolean;
     /**
      * Classes for the scrolling list, which is a `Scroller` — so `className`
      * (which lands on the dialog surface) cannot reach it, and the list's own
@@ -7620,7 +7852,7 @@ type CommandMenuPanelProps = Omit<CommandMenuProps, "open" | "onOpenChange" | "f
  * top-aligned Dialog with a combobox search header and a scrollable listbox of
  * command options.
  */
-declare function CommandMenu({ open, onOpenChange, items, query: queryProp, onQueryChange, filter, listClassName, placeholder, emptyMessage, title, description, finalFocus, scope, inputProps, children, className, ...props }: CommandMenuProps): react.JSX.Element;
+declare function CommandMenu({ open, onOpenChange, items, query: queryProp, onQueryChange, filter, highlightMatches, listClassName, placeholder, emptyMessage, title, description, finalFocus, scope, inputProps, children, className, ...props }: CommandMenuProps): react.JSX.Element;
 /**
  * The same palette rendered in place: search header, filtered and grouped
  * listbox, the full keyboard model — on a card in the page instead of in a
@@ -7634,7 +7866,7 @@ declare function CommandMenu({ open, onOpenChange, items, query: queryProp, onQu
  * once the query is empty, so a Popover around the panel still closes on it.
  * Choosing a row runs its onSelect and leaves the panel as it was.
  */
-declare function CommandMenuPanel({ items, query: queryProp, onQueryChange, filter, listClassName, placeholder, emptyMessage, title, scope, inputProps, children, className, ...props }: CommandMenuPanelProps): react.JSX.Element;
+declare function CommandMenuPanel({ items, query: queryProp, onQueryChange, filter, highlightMatches, listClassName, placeholder, emptyMessage, title, scope, inputProps, children, className, ...props }: CommandMenuPanelProps): react.JSX.Element;
 interface CommandMenuGroupProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
     /** Group heading shown above the items. */
     label: string;
@@ -7714,7 +7946,7 @@ interface CommandMenuTriggerProps extends Omit<ComponentPropsWithRef<"button">,
 }
 /**
  * CommandMenuTrigger — the search field in a header that is really a button:
- * it wears SearchInput's shell (border-input, card surface, leading magnifier,
+ * it wears SearchInput's shell (the field fill and outline, leading magnifier,
  * muted placeholder) and opens a `CommandMenu` on click or on ⌘K / Ctrl+K.
  *
  *   const [open, setOpen] = useState(false)
@@ -8324,6 +8556,8 @@ type ArtVariant = "mesh" | "grain";
 
 /** The decorative tones art can be painted from — the palette's `--tone-*` family. */
 type ArtTone = "info" | "3" | "2" | "1" | "warning";
+/** How strongly the art is painted: the preset's art as-is, or a pastel wash of it. */
+type ArtIntensity = "vivid" | "soft";
 interface GradientArtProps extends ComponentProps<"div"> {
     /**
      * `mesh` (default) — soft spots of colour pulled together by gentle waves
@@ -8342,6 +8576,14 @@ interface GradientArtProps extends ComponentProps<"div"> {
      * item keeps its own look across renders and reloads.
      */
     seed?: string | number;
+    /**
+     * `vivid` (default) paints the preset's art at full strength. `soft` turns
+     * every colour and the ground into a light pastel of itself — a wash to
+     * stage white chips, logo tiles or a card's header band on, in light and
+     * dark alike. It is a light ground: put content on a card or chip over it,
+     * not overlay-foreground text straight on it.
+     */
+    intensity?: ArtIntensity;
 }
 /**
  * GradientArt — placeholder artwork painted from the theme's art direction:
@@ -8358,7 +8600,7 @@ interface GradientArtProps extends ComponentProps<"div"> {
  *
  * Children render above the art: initials, a play glyph, a caption.
  */
-declare function GradientArt({ variant, tones, seed, className, style, children, ...props }: GradientArtProps): react.JSX.Element;
+declare function GradientArt({ variant, tones, seed, intensity, className, style, children, ...props }: GradientArtProps): react.JSX.Element;
 declare namespace GradientArt {
     var displayName: string;
 }
@@ -8937,6 +9179,68 @@ declare namespace Message {
 
 declare const messageMeta: ComponentMeta;
 
+/** One choice in a reaction picker: the emoji and the name a screen reader says for it. */
+interface Reaction {
+    emoji: string;
+    /** The accessible name, e.g. "Heart". An emoji's own spoken name varies by platform. */
+    label: string;
+}
+/** The quick set a picker offers when you pass none — the reactions most chats lead with. */
+declare const DEFAULT_REACTIONS: readonly Reaction[];
+interface ReactionChoiceProps {
+    /** The choices, in order. @default DEFAULT_REACTIONS */
+    reactions?: readonly Reaction[];
+    /** The emoji the reader has already reacted with: shown pressed, and choosing one again removes it. */
+    selected?: readonly string[];
+    /** Called with the emoji the reader chose. Toggle it in or out of `selected`. */
+    onSelect?: (emoji: string) => void;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps the press and drops the wave of emoji blooming in,
+     * `off` stills it. It can only turn motion down.
+     */
+    motion?: MotionLevel;
+}
+interface ReactionPickerProps extends ReactionChoiceProps, Omit<ToolbarProps, "children" | "onSelect"> {
+    /** Trailing controls after the emoji — a "more" button that opens a full picker. */
+    children?: ReactNode;
+}
+/**
+ * ReactionPicker — the quick row of emoji you react to a message with. A
+ * toolbar: one stop in the tab order, the arrow keys move along it, and each
+ * emoji is a toggle reporting `aria-pressed`. Opening it plays a short wave as
+ * the emoji bloom in one after another, and the one under the pointer
+ * magnifies. Put it in a Popover from an add-reaction control — or use
+ * `BubbleReactionAdd`, which is exactly that — and use `MenuReactions` for the
+ * same row inside a right-click menu.
+ *
+ *   <ReactionPicker selected={mine} onSelect={(emoji) => toggle(message.id, emoji)} />
+ */
+declare function ReactionPicker({ reactions, selected, onSelect, motion, className, children, "aria-label": ariaLabel, ...props }: ReactionPickerProps): react.JSX.Element;
+declare namespace ReactionPicker {
+    var displayName: string;
+}
+interface MenuReactionsProps extends ReactionChoiceProps, Omit<ComponentProps<typeof Menu$1.Group>, "className" | "children" | "onSelect"> {
+    className?: string;
+}
+/**
+ * The same quick row as the first group of a menu — the reactions above Reply
+ * and Copy when a message is right-clicked or long-pressed. Each emoji is a
+ * checkbox menu item (checked when the reader has reacted with it), so the
+ * arrow keys and typeahead reach it like any other row, and choosing one
+ * closes the menu. Works in `MenuContent` and `ContextMenuContent` alike.
+ *
+ *   <ContextMenuContent>
+ *     <MenuReactions selected={mine} onSelect={toggle} />
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem>Reply</ContextMenuItem>
+ *   </ContextMenuContent>
+ */
+declare function MenuReactions({ reactions, selected, onSelect, motion, className, "aria-label": ariaLabel, ...props }: MenuReactionsProps): react.JSX.Element;
+declare namespace MenuReactions {
+    var displayName: string;
+}
+
 interface BubbleProps extends ComponentPropsWithRef<"div"> {
     /**
      * Surface treatment. `muted` for the other party, `primary` for the reader's
@@ -8971,8 +9275,9 @@ interface BubbleProps extends ComponentPropsWithRef<"div"> {
  *   <Message>
  *     <Bubble>Shipping it now.</Bubble>
  *     <BubbleReactions>
- *       <BubbleReaction emoji="🎉" count={3} active onClick={() => toggle("🎉")} />
- *       <BubbleReaction emoji="👀" count={1} onClick={() => toggle("👀")} />
+ *       <BubbleReaction emoji="🎉" label="Party" count={3} active onClick={() => toggle("🎉")} />
+ *       <BubbleReaction emoji="👀" label="Eyes" count={1} onClick={() => toggle("👀")} />
+ *       <BubbleReactionAdd selected={mine} onSelect={toggle} />
  *     </BubbleReactions>
  *   </Message>
  *
@@ -8989,31 +9294,82 @@ interface BubbleReactionsProps extends ComponentPropsWithRef<"div"> {
     /** Match the enclosing `<Bubble align>` so the row hangs off the right edge. @default "start" */
     align?: "start" | "end";
 }
-/** The row of reaction pills belonging to one bubble. */
-declare function BubbleReactions({ align, className, ...props }: BubbleReactionsProps): react.JSX.Element;
+/**
+ * The row of reaction pills belonging to one bubble. Render it for every
+ * message, even one with no reactions yet: it hides itself while empty, and
+ * staying mounted is how it knows the first reaction someone adds is new
+ * (and so celebrates) rather than one the page loaded with.
+ */
+declare function BubbleReactions({ align, className, children, ...props }: BubbleReactionsProps): react.JSX.Element;
 declare namespace BubbleReactions {
     var displayName: string;
 }
 interface BubbleReactionProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
     /** The reaction glyph. Rendered as text, so any emoji works with no icon mapping. */
     emoji: ReactNode;
+    /**
+     * What the emoji means, for the accessible name ("Party, 3"). An emoji's own
+     * spoken name varies by platform; without a label the pill is named by its
+     * count alone.
+     */
+    label?: string;
     /** How many people reacted this way. Hidden at 1 — the pill already says "one". */
     count?: number;
     /** The reader reacted this way. Drives `aria-pressed`, not just the styling. */
     active?: boolean;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps the tint and the count changing and drops the
+     * bloom and the spray of emoji, `off` stills it. It can only turn motion down.
+     */
+    motion?: MotionLevel;
 }
 /**
  * One reaction pill — a toggle, not a label. It reports `aria-pressed` because
  * "did I react to this" is state a screen-reader user needs before deciding
  * whether pressing it adds or removes their reaction.
+ *
+ * When it becomes the reader's own — pressed on, or added from a picker — the
+ * emoji blooms and a spray of copies of it bursts out, the way a chat app
+ * answers a reaction, and the count rolls. Pressing it off is quiet. A pill
+ * the page loads with never plays.
  */
-declare function BubbleReaction({ emoji, count, active, className, ...props }: BubbleReactionProps): react.JSX.Element;
+declare function BubbleReaction({ emoji, label, count, active, motion, className, ...props }: BubbleReactionProps): react.JSX.Element;
 declare namespace BubbleReaction {
     var displayName: string;
 }
+interface BubbleReactionAddProps extends Omit<ComponentPropsWithRef<"button">, "children" | "onSelect"> {
+    /** The choices the picker offers. @default DEFAULT_REACTIONS */
+    reactions?: readonly Reaction[];
+    /** The emoji the reader has already reacted with, shown pressed in the picker. */
+    selected?: readonly string[];
+    /** Called with the emoji the reader chose; the picker closes. Toggle it in or out of `selected`. */
+    onSelect?: (emoji: string) => void;
+    /** The accessible name. @default "Add reaction" */
+    label?: string;
+    /** Passed to the picker: how much motion it uses. */
+    motion?: MotionLevel;
+}
+/**
+ * The add-reaction pill at the end of a reaction row: a smiley that opens a
+ * ReactionPicker above it. Choosing an emoji closes the picker and hands the
+ * emoji to `onSelect`; add it to the row and the new pill celebrates as it
+ * arrives.
+ *
+ *   <BubbleReactions>
+ *     {pills}
+ *     <BubbleReactionAdd selected={mine} onSelect={toggle} />
+ *   </BubbleReactions>
+ */
+declare function BubbleReactionAdd({ reactions, selected, onSelect, label, motion, className, ...props }: BubbleReactionAddProps): react.JSX.Element;
+declare namespace BubbleReactionAdd {
+    var displayName: string;
+}
 
 declare const bubbleMeta: ComponentMeta;
 
+declare const reactionPickerMeta: ComponentMeta;
+
 interface AttachmentProps extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
     /**
      * File name. When it runs out of room the stem truncates and the extension
@@ -9397,6 +9753,45 @@ declare function usePresentation(): Presentation;
  */
 declare function useScrollActivity(): (node: HTMLElement | null) => void;
 
+/**
+ * useMatchHighlight — paint every occurrence of a query inside a region, without
+ * touching the region's DOM.
+ *
+ *   const results = useMatchHighlight<HTMLUListElement>(query)
+ *   <SearchInput value={query} onValueChange={setQuery} />
+ *   <ul ref={results}>{rows}</ul>
+ *
+ * The obvious way to mark a match is to split the label around it and wrap the
+ * hit in a `<mark>`. That means every row renders its label as three nodes, the
+ * component owning the row has to know the query, and the text a screen reader
+ * walks is cut into fragments. The CSS Custom Highlight API marks a Range
+ * instead: the text nodes stay exactly as React rendered them, and the paint is
+ * `::highlight(sable-match)` in styles.css, on the `highlight` token pair —
+ * whose stated intent is search hits.
+ *
+ * Returns a callback ref rather than taking a ref object, because the regions
+ * this is for (a popup list, a results panel) usually mount after the component
+ * holding the query does, and an effect keyed on the query never sees a ref
+ * object fill in.
+ *
+ * Matching is case-insensitive and literal, within one text node: a match split
+ * across elements (`<b>Re</b>port`) is not painted. That is the same text the
+ * built-in filters compare, so whatever survives a substring filter is lit.
+ * `selector` narrows the search to parts of the region — a row's label and not
+ * its shortcut hint.
+ *
+ * Purely visual, and that is fine here: the query is already in the field, and
+ * the row's accessible name is unchanged. Where the API is missing it does
+ * nothing at all.
+ */
+declare function useMatchHighlight<T extends Element = HTMLElement>(query: string, options?: UseMatchHighlightOptions): (element: T | null) => void;
+interface UseMatchHighlightOptions {
+    /** Only search inside elements matching this, within the region. */
+    selector?: string;
+    /** Turn the paint off without unmounting anything. @default true */
+    enabled?: boolean;
+}
+
 interface UseCopyOptions {
     /** How long `copied` stays true after a successful copy, in ms. @default 1500 */
     timeout?: number;
@@ -9485,60 +9880,6 @@ interface SmoothWheelOptions {
  */
 declare function useSmoothWheel({ axis, mapVertical, smooth, }?: SmoothWheelOptions): (node: HTMLElement | null) => void;
 
-/**
- * The palette: nine colour families and a scale under every tone, generated
- * for whatever theme is painting. `scripts/build-palette.mjs` writes this into
- * `src/palette.css`; `palette.test.ts` holds every built-in theme to it.
- *
- * The contract is roles, and roles are not enough for a product. Tags, avatars,
- * labels and illustration need more colours than three tones, and raw Tailwind
- * steps ignore the theme, so they were banned outright. These follow it:
- *
- * - A **family** (red, orange, yellow, green, teal, blue, purple, pink) keeps
- *   its own hue and leans toward the brand by half the gap, at most 15°, and
- *   only as far as the brand has colour to lean toward (an ink-black primary
- *   pulls nothing). Material 3's harmonize, the same lean the customizer gives
- *   status colours. Lightness and chroma are fixed per step, fitted inside sRGB
- *   across the whole lean, so no brand can push a step out of gamut.
- * - **neutral** is the theme's own page and ink mixed in steps, so it carries
- *   whatever tint the theme's surfaces do.
- * - Every **tone** (tone-1…3, info, warning, success, destructive) gets a scale
- *   on one shared ladder of depths, and the tone lands exactly on the step
- *   nearest its own lightness: a light status colour in dark mode is 800, a
- *   mid one is 500. The steps either side stretch to keep the ladder's ends,
- *   so a tone near one end does not crush five steps into the little room
- *   left past it, and tone-1-100 and success-100 are the same depth.
- *
- * Steps follow the mode rather than literal lightness: a low step is always
- * near the page and a high step always far from it, so 800 text on a 100
- * wash reads in both modes with no `dark:` (Sable has none).
- */
-declare const PALETTE_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-type PaletteStep = (typeof PALETTE_STEPS)[number];
-interface PaletteFamily {
-    name: string;
-    /** The family's own hue, before the lean. */
-    hue: number;
-    /** Step 500, per mode: lightness and the chroma the family is aiming for. */
-    light: {
-        l: number;
-        c: number;
-    };
-    dark: {
-        l: number;
-        c: number;
-    };
-}
-declare const PALETTE_FAMILIES: readonly PaletteFamily[];
-/** The hue families by name — the values Badge, Pill and StatusDot take on `tone`. */
-declare const PALETTE_COLORS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"];
-type PaletteColor = (typeof PALETTE_COLORS)[number];
-declare const isPaletteColor: (value: unknown) => value is PaletteColor;
-/** Tokens that get a scale of their own, `--<token>-50` … `--<token>-950`. */
-declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
-/** Everything the palette names: neutral, the families, then the tone scales. */
-declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
-
-declare const SABLE_UI_VERSION: "0.14.0";
+declare const SABLE_UI_VERSION: "0.16.0";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ConfirmButton, type ConfirmButtonProps, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionLevel, type MotionPolicy, MotionProvider, type MotionProviderProps, MotionScope, type MotionScopeProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, NumberTicker, type NumberTickerProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TOOL_CALL_STATUS_LABELS, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, ToolCall, type ToolCallProps, type ToolCallStatus, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipGroup, type TooltipGroupProps, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, confirmButtonMeta, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, motionAttribute, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, numberTickerMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolCallMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtIntensity, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, BubbleReactionAdd, type BubbleReactionAddProps, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Burst, type BurstProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ConfirmButton, type ConfirmButtonProps, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DEFAULT_REACTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LikeButton, type LikeButtonProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuReactions, type MenuReactionsProps, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionLevel, type MotionPolicy, MotionProvider, type MotionProviderProps, MotionScope, type MotionScopeProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, NumberTicker, type NumberTickerProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, type Reaction, ReactionPicker, type ReactionPickerProps, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TOOL_CALL_STATUS_LABELS, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, ToolCall, type ToolCallProps, type ToolCallStatus, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipGroup, type TooltipGroupProps, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UseMatchHighlightOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, confirmButtonMeta, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, likeButtonMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, motionAttribute, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, numberTickerMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, reactionPickerMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolCallMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMatchHighlight, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };