@sableui/react 0.17.0 → 0.19.0

package/dist/index.d.ts

@@ -1,15 +1,16 @@
 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-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';
+import { C as ComponentMeta } from './meta-Dfm9AExe.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-Dfm9AExe.js';
+import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-DlklV0Im.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-DlklV0Im.js';
+import { T as ThemeId } from './theme-provider-BUBealk_.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-BUBealk_.js';
+import { Breakpoint } from './layout/index.js';
+export { AspectBox, AspectBoxProps, Bleed, BleedProps, 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_ALIASES, ICON_NAMES, Icon, IconContextValue, IconName, IconProps, IconProvider, IconProviderProps, composeIconSets, nearestIconNames, resolveIconAlias, useIconSet } from './icon/index.js';
 export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
 import * as react from 'react';
-import { ReactNode, AnimationEvent, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, RefObject, FormEvent } from 'react';
+import { ReactNode, AnimationEvent, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, RefObject, FormEvent, CSSProperties } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { useRender } from '@base-ui/react/use-render';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -27,6 +28,8 @@ import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { Progress as Progress$1 } from '@base-ui/react/progress';
 import { Meter as Meter$1 } from '@base-ui/react/meter';
+import { a as ActivityData } from './activity-DT8VK9fx.js';
+export { A as ActivityDay, m as mergeActivity } from './activity-DT8VK9fx.js';
 import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
 import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
@@ -1126,6 +1129,11 @@ type SubmenuTriggerProps = Omit<ComponentProps<typeof Menu$1.SubmenuTrigger>, "c
     className?: string;
     /** Trailing value shown before the chevron — the current choice, usually. */
     value?: ComponentProps<"span">["children"];
+    /**
+     * Leading icon, as MenuItem's: a submenu row among items that have icons
+     * takes one too, or its label starts a column left of theirs.
+     */
+    icon?: ReactNode;
 };
 /**
  * The row that opens a submenu. Styled as a MenuItem plus a trailing chevron,
@@ -1133,7 +1141,7 @@ type SubmenuTriggerProps = Omit<ComponentProps<typeof Menu$1.SubmenuTrigger>, "c
  * as `Effort   High ›` rather than making the reader open each row to find out
  * what is set.
  */
-declare function MenuSubmenuTrigger({ className, children, value, ...props }: SubmenuTriggerProps): react.JSX.Element;
+declare function MenuSubmenuTrigger({ className, children, value, icon, ...props }: SubmenuTriggerProps): react.JSX.Element;
 /**
  * A single-choice group inside a menu. Controlled via `value`/`onValueChange`,
  * uncontrolled via `defaultValue`.
@@ -1251,7 +1259,7 @@ declare const BADGE_APPEARANCES: readonly ["soft", "outline", "solid", "overlay"
 type BadgeAppearance = (typeof BADGE_APPEARANCES)[number];
 declare const badgeVariants: (props?: ({
     appearance?: "overlay" | "outline" | "solid" | "soft" | "plain" | null | undefined;
-    tone?: "1" | "2" | "3" | "destructive" | "success" | "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "neutral" | "warning" | "info" | null | undefined;
+    tone?: "1" | "2" | "3" | "destructive" | "success" | "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "info" | "warning" | "neutral" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -1315,8 +1323,13 @@ declare const badgeMeta: ComponentMeta;
  *       <img src="…" alt="Studio, 2026" className="max-h-full max-w-full object-contain" />
  *     </DialogContent>
  *   </Dialog>
+ *
+ * Opened from your own button through controlled `open`, with no DialogTrigger,
+ * it still returns focus to that button on close: the root records whatever
+ * held focus when `open` turned true and makes it DialogContent's default
+ * `finalFocus` (lib/focus-return has the why). An explicit `finalFocus` wins.
  */
-declare const Dialog: typeof Dialog$1.Root;
+declare function Dialog<Payload = unknown>({ open, onOpenChange, ...props }: Dialog$1.Root.Props<Payload>): react.JSX.Element;
 declare const DialogTrigger: Dialog$1.Trigger;
 declare const DialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: {
@@ -1368,9 +1381,20 @@ type PopupProps$1 = Omit<ComponentProps<typeof Dialog$1.Popup>, "className"> & {
      * children directly and the media sizes itself to the viewport.
      */
     scroll?: boolean;
+    /**
+     * Keep the content mounted while the dialog is closed, hidden, instead of
+     * unmounting it. Opt in for a draft the user may come back to: a half-written
+     * form closed by Esc or a stray click keeps its fields (typed values, React
+     * state, scroll position) when it reopens. Leave it off otherwise: a dialog
+     * that should start fresh each time, or one with live content (polling,
+     * video), should not keep running behind a closed door. Reset the draft
+     * yourself once it is submitted or discarded.
+     * @default false
+     */
+    keepMounted?: boolean;
 };
 /** Backdrop + popup surface. Renders through a portal. */
-declare function DialogContent({ size, showCloseButton, scroll, ...props }: PopupProps$1): react.JSX.Element;
+declare function DialogContent({ size, showCloseButton, scroll, finalFocus, ref, ...props }: PopupProps$1): react.JSX.Element;
 type TitleProps$3 = Omit<ComponentProps<typeof Dialog$1.Title>, "className"> & {
     className?: string;
 };
@@ -1404,7 +1428,7 @@ declare function DialogFooter({ className, ...props }: ComponentProps<"div">): r
  *     </AlertDialogContent>
  *   </AlertDialog>
  */
-declare const AlertDialog: typeof AlertDialog$1.Root;
+declare function AlertDialog<Payload = unknown>({ open, onOpenChange, ...props }: AlertDialog$1.Root.Props<Payload>): react.JSX.Element;
 declare const AlertDialogTrigger: AlertDialog$1.Trigger;
 declare const AlertDialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogContent: typeof DialogContent;
@@ -2053,22 +2077,9 @@ declare namespace TooltipGroup {
 
 declare const tooltipMeta: ComponentMeta;
 
-/**
- * Avatar root — a circular, fixed-size frame that clips its image. The only axis
- * is `size`, which sets the square footprint; the image and fallback inherit it.
- * `bg-muted` is the resting surface shown behind a loading or missing image.
- * Each size also sets the tier its initials (and a group's "+N") take, so the
- * initials grow with the circle instead of one 12px label at every size. They
- * hold roughly 30% of the diameter all the way up: the label tiers cover the
- * row sizes; past them the initials are a mark standing in for a face — type
- * as image — so the portrait sizes borrow heading-2 (28px in 96) and display-lg
- * (48px in 160), the tiers built to be read as a shape at that size.
- *
- * `xl` and `2xl` are portrait sizes — a profile header, an artist hero, a
- * roster tile — not row sizes, so AvatarGroup stops at `lg`.
- */
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "2xs" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * AvatarGroup — an overlapping stack. Each child is pulled left by about an
@@ -2083,7 +2094,7 @@ declare const avatarVariants: (props?: ({
  * cases.
  */
 declare const avatarGroupVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "2xs" | null | undefined;
     surface?: "card" | "background" | "popover" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -2098,13 +2109,22 @@ declare const avatarGroupVariants: (props?: ({
  *
  *   <Avatar src={user.pfp} alt={user.name} fallback="AM" size="lg" />
  */
+/** The fallback's colour: the muted surface, or a palette family's wash and ink. */
+type AvatarTone = "neutral" | PaletteColor;
 type RootProps$5 = Omit<ComponentProps<typeof Avatar$1.Root>, "className"> & VariantProps<typeof avatarVariants> & {
+    /**
+     * Paint the resting surface from a palette family instead of the muted
+     * grey: its wash behind, its deep ink on the initials — the pair a soft
+     * Badge uses, held to contrast in every theme. For a category colour (a
+     * project, a workspace, a team) that should not read as a status.
+     */
+    tone?: AvatarTone;
     className?: string;
 };
 /** The row sizes. `xl`/`2xl` are portraits, which are never stacked. */
 type AvatarGroupSize = NonNullable<VariantProps<typeof avatarGroupVariants>["size"]>;
-/** The circular frame. Clips the image; holds the `size` axis. */
-declare function AvatarRoot({ size, className, ...props }: RootProps$5): react.JSX.Element;
+/** The frame. Clips the image; holds the `size`, `shape` and `tone` axes. */
+declare function AvatarRoot({ size, shape, tone, className, ...props }: RootProps$5): react.JSX.Element;
 declare namespace AvatarRoot {
     var displayName: string;
 }
@@ -2158,7 +2178,7 @@ interface AvatarProps extends RootProps$5 {
  * The ergonomic, all-in-one avatar. Composes Root + Image + Fallback from simple
  * props. Pass `src`/`alt` for the picture and `fallback` for the resting state.
  */
-declare function Avatar({ src, alt, fallback, fallbackDelay, size, status, variant, seed, className, ...props }: AvatarProps): react.JSX.Element;
+declare function Avatar({ src, alt, fallback, fallbackDelay, size, shape, tone, status, variant, seed, className, ...props }: AvatarProps): react.JSX.Element;
 declare namespace Avatar {
     var displayName: string;
 }
@@ -2180,7 +2200,8 @@ declare namespace AvatarGroupCount {
 }
 interface AvatarGroupProps extends Omit<ComponentProps<"div">, "className"> {
     /**
-     * Size of every avatar in the group: 32px / 40px / 48px. Overrides each
+     * Size of every avatar in the group: 20px / 24px for dense rows, 32px /
+     * 40px / 48px otherwise. Overrides each
      * child's own size. The portrait sizes (`xl`, `2xl`) are not offered: a
      * stack is a row-sized summary of people, never a set of portraits.
      */
@@ -2777,7 +2798,7 @@ declare const numberTickerMeta: ComponentMeta;
  * failed).
  */
 declare const segmentedBarSegmentVariants: (props?: ({
-    tone?: "1" | "2" | "3" | "primary" | "destructive" | "success" | "neutral" | "warning" | "info" | null | undefined;
+    tone?: "1" | "2" | "3" | "primary" | "destructive" | "success" | "info" | "warning" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /** Bar thickness — the same three rails as Meter and Progress. */
 declare const segmentedBarVariants: (props?: ({
@@ -3244,6 +3265,172 @@ declare namespace Sparkline {
 
 declare const sparklineMeta: ComponentMeta;
 
+/**
+ * Levels and colour for a heatmap: how a value becomes one of a few steps, and
+ * what each step looks like on the active theme.
+ */
+/** What a scale function is told about the data it is scaling. */
+interface ActivityStats {
+    /** The smallest positive value. */
+    min: number;
+    /** The largest value. */
+    max: number;
+    /** How many levels there are, including the empty level 0. */
+    levels: number;
+}
+/**
+ * How a value becomes a level. `"quantile"` splits the positive values evenly
+ * between the levels above 0, as GitHub does, so one outlier does not wash the
+ * rest out. `"linear"` divides 0…max evenly. An array gives the lower bound of
+ * each level from 1 up; a function decides for itself.
+ */
+type ActivityScale = "quantile" | "linear" | number[] | ((value: number, stats: ActivityStats) => number);
+interface ActivityLevels {
+    /** The lower bound of each level from 1 up (`thresholds[0]` is level 1). Empty for a scale function. */
+    thresholds: number[];
+    /** The level of a value: 0 for nothing, up to `levels - 1`. */
+    level: (value: number) => number;
+}
+/**
+ * The levels for a set of values. Zero and negative values are always level 0;
+ * any positive value is at least level 1, so a day with activity never reads as
+ * a day without it.
+ */
+declare function activityLevels(values: number[], { levels, scale }?: {
+    levels?: number;
+    scale?: ActivityScale;
+}): ActivityLevels;
+
+/** A day as the heatmap resolved it — what `tooltip`, `renderCell` and the callbacks receive. */
+interface ActivityHeatmapDay {
+    date: string;
+    value: number;
+    level: number;
+    category?: string;
+}
+/** What `renderCell` is told about the cell it draws into. */
+interface ActivityHeatmapCell {
+    level: number;
+    /** The cell's fill, as a CSS colour. */
+    color: string;
+    /** The cell's edge length in px. */
+    size: number;
+}
+interface ActivityHeatmapProps extends Omit<ComponentPropsWithRef<"figure">, "children"> {
+    /** What the grid shows ("Contributions in 2026") — its caption and accessible name. */
+    label: string;
+    /** The days, as a list or a map of date to value. Sparse is fine; a missing day is 0. */
+    data: ActivityData;
+    /** First day drawn, "YYYY-MM-DD". @default 53 weeks before `end`, from the start of that week */
+    start?: string;
+    /** Last day drawn, "YYYY-MM-DD". @default today */
+    end?: string;
+    /** Draw Jan 1 – Dec 31 of this year. Wins over `start` / `end`. */
+    year?: number;
+    /** 0 puts Sunday on top, 1 Monday. @default the locale's */
+    weekStart?: 0 | 1;
+    /** How many levels, including the empty level 0. @default 5 */
+    levels?: number;
+    /** How a value becomes a level. A day's own `level` always wins. @default "quantile" */
+    levelScale?: ActivityScale;
+    /** The hue of the intensity ramp. Decorative tones lead; `"success"` gives the GitHub look. @default "1" */
+    tone?: ChartTone;
+    /** Colour cells by `day.category` instead of one ramp — a label and tone (or colour) per key. */
+    categories?: ChartCategories;
+    /** Names the value in the tooltip and each cell's name: "contributions", or `{ one, other }` to pluralise. */
+    unit?: string | {
+        one: string;
+        other: string;
+    };
+    /** Formats a value. @default in full up to 9,999, compact past it */
+    formatValue?: (value: number) => string;
+    /** Show a tooltip on hover, focus and tap; a function replaces its content. @default true */
+    tooltip?: boolean | ((day: ActivityHeatmapDay) => ReactNode);
+    /** The Less–More ramp, or swatches for categories. @default true */
+    legend?: boolean;
+    /** The ramp's end words. @default ["Less", "More"] */
+    legendLabels?: [string, string];
+    /** Short month names over each month's first week. @default true */
+    monthLabels?: boolean;
+    /** Which weekday names to show beside the rows. @default "alternate" (Mon, Wed, Fri) */
+    weekdayLabels?: "alternate" | "all" | "none";
+    /** The smallest a cell may get before the grid scrolls instead of shrinking: 10, 12 or 14 px. @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Grow cells to fill the width, up to 20 px. @default true */
+    stretch?: boolean;
+    /** The hovered or focused day, controlled. */
+    activeDate?: string | null;
+    defaultActiveDate?: string | null;
+    onActiveDateChange?: (date: string | null) => void;
+    /** The selected day, controlled. Selection is on only when `onSelectDate` is set. */
+    selectedDate?: string | null;
+    /** Called when a day is clicked or chosen with Enter / Space — as GitHub filters its feed below. */
+    onSelectDate?: (date: string) => void;
+    /** Draw something into a cell (an icon for a milestone, a reward, an outage). Rendered over the fill. */
+    renderCell?: (day: ActivityHeatmapDay, cell: ActivityHeatmapCell) => ReactNode;
+    /** Draw the empty grid, shimmering, while data loads. */
+    loading?: boolean;
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps feedback and drops the flourish, `off` stills it.
+     * The weeks fading in as the grid scrolls into view is the flourish.
+     */
+    motion?: MotionLevel;
+    /** BCP 47 locale for month and weekday names, numbers and plurals. */
+    locale?: string;
+}
+/**
+ * A calendar heatmap: one value per day as a grid of weeks by weekdays — the
+ * GitHub contribution graph, for any daily measure (commits, habits, sales,
+ * uptime). Levels come from the data by quartile unless a day brings its own;
+ * categories colour days by source instead of intensity.
+ *
+ * The grid is a real `role="grid"` table, as GitHub's is: one tab stop, arrow
+ * keys between days, each cell named with its date and value. It fills the
+ * width down to `size`; narrower than that, the weeks scroll sideways (opening
+ * on the latest) while the weekday labels and legend stay put.
+ */
+declare function ActivityHeatmap({ label, data, start, end, year, weekStart, levels, levelScale, tone, categories, unit, formatValue, tooltip, legend, legendLabels, monthLabels, weekdayLabels, size, stretch, activeDate, defaultActiveDate, onActiveDateChange, selectedDate, onSelectDate, renderCell, loading, motion, locale, className, style, ref, ...props }: ActivityHeatmapProps): react.JSX.Element;
+declare namespace ActivityHeatmap {
+    var displayName: string;
+}
+
+declare const activityHeatmapMeta: ComponentMeta;
+
+interface ActivityWeek {
+    /** Day numbers for each row, top to bottom; null where the day falls outside the range. */
+    days: (number | null)[];
+}
+interface ActivityMonth {
+    /** The first day of the month (or of the range, for a partial first month). */
+    day: number;
+    /** The week column the month's header starts at. */
+    week: number;
+    /** How many week columns it spans. */
+    span: number;
+}
+interface ActivityGrid {
+    start: number;
+    end: number;
+    weekStart: 0 | 1;
+    /** The day number in the top-left slot, which may sit before `start`. */
+    origin: number;
+    weeks: ActivityWeek[];
+    /** Month header segments, left to right, spanning every week column between them. */
+    months: ActivityMonth[];
+}
+/**
+ * The weeks-by-weekdays grid for a range: one column per week, one row per
+ * weekday starting at `weekStart`, with partial first and last weeks padded by
+ * nulls. Month segments start at the week holding each month's 1st; the weeks
+ * before the first 1st belong to the range's opening month.
+ */
+declare function activityGrid({ start, end, weekStart }: {
+    start: number;
+    end: number;
+    weekStart: 0 | 1;
+}): ActivityGrid;
+
 type StepStatus = "complete" | "current" | "upcoming" | "error";
 type StepperOrientation = "horizontal" | "vertical";
 type StepperIndicator = "number" | "dot";
@@ -3878,7 +4065,7 @@ type SheetSnapPoint = number | string;
  * to a panel that slides sideways.
  */
 type SheetProps<Payload = unknown> = Omit<Drawer.Root.Props<Payload>, "swipeDirection">;
-declare function Sheet<Payload = unknown>({ snapPoints, snapPoint, defaultSnapPoint, onSnapPointChange, snapToSequentialPoints, ...props }: SheetProps<Payload>): react.JSX.Element;
+declare function Sheet<Payload = unknown>({ snapPoints, snapPoint, defaultSnapPoint, onSnapPointChange, snapToSequentialPoints, open, onOpenChange, ...props }: SheetProps<Payload>): react.JSX.Element;
 declare const SheetTrigger: Drawer.Trigger;
 declare const SheetClose: Drawer.Close;
 declare const SheetPortal: {
@@ -3888,7 +4075,7 @@ declare const SheetPortal: {
 type ContentProps$4 = Omit<ComponentProps<typeof Drawer.Popup>, "className"> & VariantProps<typeof sheetVariants> & {
     className?: string;
 };
-declare function SheetContent({ className, children, side, initialFocus, ref, style, ...props }: ContentProps$4): react.JSX.Element;
+declare function SheetContent({ className, children, side, initialFocus, finalFocus, ref, style, ...props }: ContentProps$4): react.JSX.Element;
 type TitleProps$1 = Omit<ComponentProps<typeof Drawer.Title>, "className"> & {
     className?: string;
 };
@@ -3926,6 +4113,13 @@ declare const sheetMeta: ComponentMeta;
  * Styled native table. Wraps the <table> in a horizontally scrollable frame so
  * wide tables stay responsive without breaking layout. Caption renders at the
  * bottom. No rounding on cells; rows are separated by hairline borders.
+ *
+ * Density-aware. The head height and the cells' block padding read
+ * `--table-head-h` / `--table-cell-py`, which the compact scope sets (28px
+ * head, 32px rows), and the cells' type follows the register: body-sm on a
+ * page, the 12px ui reading tier in a workspace — a row is the content a
+ * tracker is read for, so it takes prose weight, not the 11px supporting tier
+ * the compact remap would otherwise give body-sm.
  */
 declare function Table({ className, ...props }: ComponentPropsWithRef<"table">): react.JSX.Element;
 declare namespace Table {
@@ -4010,6 +4204,19 @@ interface DataTableColumn<Row> {
     className?: string;
 }
 type DataTableRowKey = string | number;
+/** How one group of rows is labelled and ordered. */
+interface DataTableGroup {
+    /** The value `groupBy` returns for the rows in this group. */
+    key: string;
+    /** The group's name in its header row. @default the key */
+    label?: ReactNode;
+    /** A leading glyph for the header row — a status mark, an icon. */
+    icon?: ReactNode;
+    /** Trailing controls in the header row, e.g. an icon Button that adds a row to this group. */
+    action?: ReactNode;
+    /** Whether the group starts open when `expandedGroups` is not passed. @default true */
+    defaultExpanded?: boolean;
+}
 interface DataTableProps<Row> {
     /** Column definitions, left to right. */
     columns: DataTableColumn<Row>[];
@@ -4043,13 +4250,32 @@ interface DataTableProps<Row> {
     empty?: ReactNode;
     /** Bottom caption. */
     caption?: ReactNode;
+    /**
+     * Group the rows under header rows, by the key this returns (a status, an
+     * owner, a day). One header for the whole table, so every group shares the
+     * columns; sorting applies within each group.
+     */
+    groupBy?: (row: Row) => string;
+    /**
+     * Order and presentation of the groups, by key. Groups `groupBy` returns
+     * that are not listed follow, in the order their first row appears in `data`.
+     * A listed group with no rows is not shown.
+     */
+    groups?: DataTableGroup[];
+    /** Whether a group's header row opens and closes it. @default true */
+    collapsible?: boolean;
+    /** The open groups, by key (controlled). Without it each group starts at its `defaultExpanded`. */
+    expandedGroups?: ReadonlySet<string>;
+    /** Called with the new set of open group keys when a group is opened or closed. */
+    onExpandedGroupsChange?: (keys: Set<string>) => void;
     className?: string;
 }
 /**
  * DataTable — a data-driven table over the Table primitives: a `columns` def + a
  * `data` array, with built-in client-side sorting (click a `sortable` header to
  * cycle asc → desc → none), optional row click, checkbox selection for bulk
- * actions (`selectedKeys` + `onSelectedKeysChange`), and an empty state.
+ * actions (`selectedKeys` + `onSelectedKeysChange`), rows grouped under
+ * collapsible header rows (`groupBy` + `groups`), and an empty state.
  * For server-side data or paging, sort/page the `data` you pass in and pair it
  * with `Pagination`.
  *
@@ -4063,7 +4289,7 @@ interface DataTableProps<Row> {
  *     ]}
  *   />
  */
-declare function DataTable<Row>({ columns, data, rowKey, onRowClick, isRowSelected, selectedKeys, onSelectedKeysChange, rowSelectionLabel, selectAllLabel, defaultSort, empty, caption, className, }: DataTableProps<Row>): react.JSX.Element;
+declare function DataTable<Row>({ columns, data, rowKey, onRowClick, isRowSelected, selectedKeys, onSelectedKeysChange, rowSelectionLabel, selectAllLabel, defaultSort, empty, caption, groupBy, groups, collapsible, expandedGroups, onExpandedGroupsChange, className, }: DataTableProps<Row>): react.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -4071,7 +4297,7 @@ declare namespace DataTable {
 declare const dataTableMeta: ComponentMeta;
 
 /**
- * A chip someone clicks. Two appearances, two sizes, one `selected` state each:
+ * A chip someone clicks. Two appearances, three sizes, one `selected` state each:
  *
  * - `solid` (default): the filter-row chip. Rests on the secondary surface;
  *   `selected` lifts it onto the primary surface so the active filter reads at
@@ -4082,15 +4308,24 @@ declare const dataTableMeta: ComponentMeta;
  *   `selected` (the reader's own choice) takes a primary tint and a soft
  *   primary edge — distinct from rest without a heavy dark outline.
  *
- * Both sizes are fixed heights, md the larger: md sits on the density ladder's
- * xs control height (28px), sm is 24px — the touch-target floor. md used to be
+ * All sizes are fixed heights. md sits on the density ladder's xs control
+ * height (28px), sm is 24px — the touch-target floor, deliberately NOT a
+ * ladder step, so a compact scope cannot shrink it under 24. md used to be
  * padding-sized (~18px) while sm was 28px, so the "small" chip was the taller
  * one. A fixed-height chip centred with `items-center` needs no optical nudge,
- * so both drop it. Semantic tokens only — theme-safe in light and dark.
+ * so all drop it. Semantic tokens only — theme-safe in light and dark.
+ *
+ * `lg` sits on `--control-sm` (32px, compact 28), the rung the spacing doctrine
+ * gives toolbar controls: Button `sm`, Toggle and SearchInput `sm` stand on it
+ * too, so a filter row beside a search field and its buttons is one height. A
+ * page toolbar is the case it exists for ("All · Products · Open source" …
+ * [Find a project]). md's 28px is the chip under or among content, and no text
+ * field shares it — Input / SearchInput `xs` is the inset tool-panel field, a
+ * different surface — so md beside a field is always a mismatch.
  */
 declare const pillVariants: (props?: ({
     appearance?: "outline" | "solid" | null | undefined;
-    size?: "sm" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     selected?: boolean | null | undefined;
     tone?: "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -4108,8 +4343,10 @@ interface PillProps extends ComponentPropsWithRef<"button">, Omit<VariantProps<t
  * half clickable and half not.
  *
  * `appearance="outline"` is the quiet chip for choices that annotate other
- * content (a reaction, a tag on a card); `size="sm"` puts it on the xs control
- * height. Use these rather than restyling a Pill with classes — an override is
+ * content (a reaction, a tag on a card); `size="sm"` is the small chip under
+ * content, `size="lg"` the toolbar chip that shares `--control-sm` with a
+ * SearchInput `size="sm"` and Button `size="sm"` beside it. Use these rather
+ * than restyling a Pill with classes — an override is
  * a look that exists nowhere else in the system. `tone="blue"` (any palette
  * family) colours the chip as a category, like a tag picker's choices.
  */
@@ -4187,7 +4424,7 @@ declare const notificationBadgeMeta: ComponentMeta;
  * rounded-full and shrink-0 so it holds its shape inline next to text.
  */
 declare const statusDotVariants: (props?: ({
-    tone?: "1" | "2" | "3" | "destructive" | "success" | "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "neutral" | "warning" | "info" | null | undefined;
+    tone?: "1" | "2" | "3" | "destructive" | "success" | "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "info" | "warning" | "neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -4308,6 +4545,21 @@ interface DatePickerProps extends TriggerAttributes {
     minDate?: Date;
     /** Latest selectable day (inclusive); later days are disabled. */
     maxDate?: Date;
+    /**
+     * The trigger's rung. `md` is the form field, beside Input and Select. `xs`
+     * is the property-grid rung (24px in a workspace): an inset `panel-field`
+     * well with no border, the same shape as SelectTrigger `size="xs"` and
+     * ScrubField on the neighbouring rows of an inspector.
+     * @default "md"
+     */
+    size?: "md" | "xs";
+    /**
+     * How the trigger writes the chosen date, as `Intl.DateTimeFormat` options
+     * in the reader's locale — `{ month: "short", day: "numeric" }` for "Oct 23"
+     * where the rest of a list writes dates that way. Omitted: "Oct 23, 2026"
+     * (and "Oct 23, 2026 at 14:30" under `granularity="minute"`).
+     */
+    formatOptions?: Intl.DateTimeFormatOptions;
     /** Extra classes for the trigger button. */
     className?: string;
 }
@@ -4621,19 +4873,32 @@ declare const accordionMeta: ComponentMeta;
 declare const Collapsible: react.ForwardRefExoticComponent<Omit<_base_ui_react.CollapsibleRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const CollapsibleTrigger: react.ForwardRefExoticComponent<Omit<_base_ui_react.CollapsibleTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 /**
- * An auto-rotating chevron for a Collapsible trigger — the disclosure caret that
- * flips 180° when the panel opens (parity with AccordionTrigger's chevron). Drop
- * it inside the trigger's content and mark the trigger with the `group/collapsible`
- * class so the indicator can read its open state (Base UI puts `data-panel-open`
- * on the trigger, not the icon):
+ * Where the closed caret points, and so how it turns. `down` flips 180° on open
+ * (parity with AccordionTrigger's chevron). `end` points to the inline end while
+ * closed (right in LTR, left in RTL) and turns down a quarter on open — the
+ * caret a grouped list or a tree row uses.
+ */
+declare const DIRECTION: {
+    readonly down: "[[data-panel-open]_&]:rotate-180";
+    readonly end: "-rotate-90 rtl:rotate-90 [[data-panel-open]_&]:rotate-0";
+};
+interface CollapsibleIndicatorProps {
+    /** Where the caret points while closed. @default "down" */
+    direction?: keyof typeof DIRECTION;
+    className?: string;
+}
+/**
+ * An auto-rotating chevron for a Collapsible trigger. Drop it anywhere inside
+ * the trigger's content; nothing else to set up. Base UI puts `data-panel-open`
+ * on the trigger, not the icon, so the glyph reads it from the trigger above
+ * it. (It used to need a `group/collapsible` class on the trigger, and an app
+ * that missed that rotated its own chevron with no transition instead.)
  *
- *   <CollapsibleTrigger className="group/collapsible" render={
+ *   <CollapsibleTrigger render={
  *     <Button variant="ghost">Details <CollapsibleIndicator /></Button>
  *   } />
  */
-declare function CollapsibleIndicator({ className }: {
-    className?: string;
-}): react.JSX.Element;
+declare function CollapsibleIndicator({ direction, className }: CollapsibleIndicatorProps): react.JSX.Element;
 type PanelProps$1 = Omit<ComponentProps<typeof Collapsible$1.Panel>, "className"> & {
     className?: string;
 };
@@ -5214,6 +5479,13 @@ interface CodeBlockProps extends ComponentPropsWithRef<"div"> {
      * What Snippet was.
      */
     prompt?: string;
+    /**
+     * Wrap long lines instead of scrolling them. For prose in a code face (a
+     * prompt to paste into an agent, a log line), where the end of a line
+     * scrolled out of view hides what it says. Code keeps scrolling: wrapping
+     * breaks the indentation it is read by.
+     */
+    wrap?: boolean;
 }
 /**
  * A multi-line code block. An optional header bar carries the filename and a
@@ -5224,7 +5496,7 @@ interface CodeBlockProps extends ComponentPropsWithRef<"div"> {
  * Highlighting is opt-in through `highlight` or `CodeHighlightProvider`.
  * Soft-square (rounded-md), never a pill.
  */
-declare function CodeBlock({ code, filename, showCopy, highlight, prompt, className, ...props }: CodeBlockProps): react.JSX.Element;
+declare function CodeBlock({ code, filename, showCopy, highlight, prompt, wrap, className, ...props }: CodeBlockProps): react.JSX.Element;
 declare namespace CodeBlock {
     var displayName: string;
 }
@@ -5307,7 +5579,7 @@ declare const kbdMeta: ComponentMeta;
  * (neutral/info/success/warning/destructive).
  */
 declare const noteVariants: (props?: ({
-    tone?: "destructive" | "success" | "neutral" | "warning" | "info" | null | undefined;
+    tone?: "destructive" | "success" | "info" | "warning" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 /**
@@ -5417,7 +5689,7 @@ declare const inlineStatusMeta: ComponentMeta;
  * and `sticky` positioning live in `banner.tsx`.
  */
 declare const bannerVariants: (props?: ({
-    tone?: "1" | "destructive" | "success" | "neutral" | "warning" | "info" | null | undefined;
+    tone?: "1" | "destructive" | "success" | "info" | "warning" | "neutral" | null | undefined;
     appearance?: "solid" | "soft" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -5495,6 +5767,12 @@ type WorkspaceProps = Omit<ComponentProps<"div">, "children"> & {
     toolbar?: ReactNode;
     /** Bottom chrome — usually a StatusBar. */
     statusBar?: ReactNode;
+    /**
+     * Phone navigation — usually a BottomNav. Its row is reserved below `lg`
+     * (BottomNav's own breakpoint) and gone above it, so the body ends where the
+     * nav begins without the app subtracting the nav's height from the viewport.
+     */
+    bottomNav?: ReactNode;
     /**
      * Density scope for everything inside. Defaults to `compact`, because a
      * workspace IS the compact register — see DESIGN.md → Registers.
@@ -5521,7 +5799,14 @@ type WorkspaceProps = Omit<ComponentProps<"div">, "children"> & {
  *     </PanelGroup>
  *   </Workspace>
  *
- * Two structural details do the real work:
+ * Three structural details do the real work:
+ *
+ * - The shell is a flex column and the body is its only `flex-1` row. Every
+ *   slot is optional, and a fixed `auto / 1fr / auto` grid assumed all of them:
+ *   with no toolbar, the body fell into the first `auto` track and the status
+ *   bar took the `1fr` one, so the body sized to its content and the status bar
+ *   was pushed off the bottom. A slot whose component renders nothing now costs
+ *   nothing too, which a track list counted from the props could not promise.
  *
  * - `min-h-0` on the body row. Without it a grid/flex child refuses to shrink
  *   below its content, `overflow-y-auto` never activates on a panel, and panels
@@ -5530,7 +5815,7 @@ type WorkspaceProps = Omit<ComponentProps<"div">, "children"> & {
  * - `data-density` scopes the control ladder, so every control inside lands on
  *   the workspace sizes without any selector overriding a height afterwards.
  */
-declare function Workspace({ toolbar, statusBar, density, skipLinkLabel, className, children, ...props }: WorkspaceProps): react.JSX.Element;
+declare function Workspace({ toolbar, statusBar, bottomNav, density, skipLinkLabel, className, children, ...props }: WorkspaceProps): react.JSX.Element;
 declare namespace Workspace {
     var displayName: string;
 }
@@ -5558,6 +5843,46 @@ declare namespace WorkspaceBar {
 
 declare const workspaceMeta: ComponentMeta;
 
+/** A named viewport breakpoint: Tailwind's defaults, which Sable's `lg:` chrome follows. */
+type ViewportBreakpoint = Exclude<Breakpoint, "base">;
+/**
+ * The min-width each breakpoint starts at, in rem — Tailwind v4's defaults
+ * (sm 40 / md 48 / lg 64 / xl 80 / 2xl 96), so `useBelowBreakpoint("lg")` flips
+ * at exactly the width where an `lg:` class starts to apply.
+ */
+declare const VIEWPORT_BREAKPOINTS: Record<ViewportBreakpoint, string>;
+/** The query that is true below `breakpoint`: the complement of its `lg:`-style min-width. */
+declare function belowBreakpointQuery(breakpoint: ViewportBreakpoint): string;
+interface UseMediaQueryOptions {
+    /**
+     * What the server (and the first client render, before hydration settles)
+     * reports. @default false
+     */
+    serverValue?: boolean;
+}
+/**
+ * `true` while a media query matches, kept live as the viewport changes.
+ *
+ * Read through useSyncExternalStore, so there is no setState in a resize
+ * listener, no tearing under concurrent rendering, and no hydration mismatch:
+ * the server reports `serverValue`, and the client reconciles on hydration.
+ * Don't hand-roll a `window.innerWidth` read in state plus a `resize` listener
+ * in an effect; that renders the wrong layout first and re-renders on every
+ * pixel of a drag.
+ *
+ *   const coarse = useMediaQuery("(pointer: coarse)")
+ */
+declare function useMediaQuery(query: string, { serverValue }?: UseMediaQueryOptions): boolean;
+/**
+ * `true` below a named breakpoint, the width where Sable's own chrome changes
+ * shape (Sidebar and BottomNav swap at `lg`). Use it to branch structure that a
+ * class can't express — a docked panel becoming a sheet — and prefer `lg:` and
+ * friends for anything that is only styling.
+ *
+ *   const narrow = useBelowBreakpoint("lg")
+ */
+declare function useBelowBreakpoint(breakpoint?: ViewportBreakpoint, options?: UseMediaQueryOptions): boolean;
+
 interface UsePanelWidthOptions {
     /** localStorage key. Omit to keep the width in memory only (per hook instance). */
     storageKey?: string;
@@ -5608,14 +5933,47 @@ type PanelProps = Omit<ComponentProps<"aside">, "children"> & {
      * body region instead.
      */
     scroll?: boolean;
+    /**
+     * What the panel becomes below `below`, where a docked column no longer fits
+     * beside the canvas. @default "dock"
+     *
+     * - `"dock"` keeps it docked at every width (today's behaviour).
+     * - `"sheet"` moves it into a Sheet on the panel's `side`, open while `open`
+     *   is true: an inspector becomes a sheet over the list, a navigation rail a
+     *   drawer. Wire `onOpenChange` so Esc, the scrim and a swipe can close it.
+     * - `"hidden"` drops it, for chrome a phone does without.
+     */
+    narrow?: "dock" | "sheet" | "hidden";
+    /**
+     * Whether the panel is showing. Docked, it defaults to `true`, and `false`
+     * removes the column so the canvas takes its width (an inspector with nothing
+     * selected). As a sheet it is the sheet's open state and defaults to `false`:
+     * a modal that opened by itself on every phone load would block the app.
+     */
+    open?: boolean;
+    /** Called when the sheet asks to close (Esc, scrim, swipe) or open. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The edge the sheet slides in from when `narrow="sheet"`. A panel docked
+     * before the canvas is a `"left"` one. @default "right"
+     */
+    side?: "left" | "right";
+    /** The breakpoint `narrow` applies below. Matches Sidebar's and BottomNav's swap. @default "lg" */
+    below?: ViewportBreakpoint;
     /** Panel content. Optional: an empty flexible centre is a valid placeholder. */
     children?: ReactNode;
 };
 /**
  * Panel — one docked chrome column. Fixed-width when `width` is set, flexible
  * otherwise. Scrolls its own content; the group never scrolls.
+ *
+ * Below `below`, `narrow` decides what a docked column becomes. The content is
+ * rendered once, in whichever of the two places applies, so an app never mounts
+ * its inspector twice (a Panel for desktop and a Sheet for phones, each holding
+ * its own copy of the same form). Crossing the breakpoint remounts it, so keep
+ * state that must survive a rotation in the app, not in the panel's children.
  */
-declare function Panel({ label, width, scroll, className, children, ...props }: PanelProps): react.JSX.Element;
+declare function Panel({ label, width, scroll, narrow, open, onOpenChange, side, below, className, children, ...props }: PanelProps): react.JSX.Element | null;
 declare namespace Panel {
     var displayName: string;
 }
@@ -6255,7 +6613,15 @@ type SidebarContextValue = {
      * paint, so an expanded rail's labels are simply there on load.
      */
     reopened?: boolean;
+    /**
+     * The row rung every part of the rail draws from: `rail` on a page,
+     * `rail-compact` inside a compact scope such as a Workspace. One value, so
+     * the brand, the items, the group labels and the account row stay on the
+     * same columns at either density.
+     */
+    rung: RailRung;
 };
+type RailRung = "rail" | "rail-compact";
 declare function useSidebar(): SidebarContextValue;
 interface SidebarProps extends ComponentPropsWithRef<"aside"> {
     /**
@@ -6383,6 +6749,64 @@ declare function SidebarItem({ icon, label, active, badge, render, className, "a
 declare namespace SidebarItem {
     var displayName: string;
 }
+interface SidebarGroupProps extends ComponentPropsWithRef<"div"> {
+    /** The group's name, shown above its items on the rail's columns. Collapsed, a hairline stands in for it. */
+    label?: ReactNode;
+}
+/**
+ * A labelled run of SidebarItems inside SidebarNav: "Workspace", "Favorites".
+ * The label starts on the items' icon column, so a group reads as part of the
+ * rail rather than a heading dropped onto it. Without it, a rail that needed
+ * groups reached for SideNav, whose rows sit on different columns from the
+ * brand above and the account row below.
+ *
+ *   <SidebarNav>
+ *     <SidebarGroup label="Workspace">
+ *       <SidebarItem icon={<Icon name="folder" />} label="Projects" />
+ *     </SidebarGroup>
+ *   </SidebarNav>
+ */
+declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react.JSX.Element;
+declare namespace SidebarGroup {
+    var displayName: string;
+}
+interface SidebarAccountProps extends Omit<ComponentPropsWithRef<"button">, "children" | "title"> {
+    /** The person or workspace: an Avatar sized to the slot, `xs` on a page rail and `2xs` in a compact one. */
+    avatar: ReactNode;
+    /** The name, on the items' label column. */
+    label: ReactNode;
+    /** One quiet line under the label: a plan, a role, a workspace, "Demo". Not a badge. */
+    detail?: ReactNode;
+    /**
+     * The trailing glyph that says the row opens something. Defaults to an
+     * up-down chevron (the row usually opens a menu of account actions); `false`
+     * drops it.
+     */
+    indicator?: ReactNode | false;
+    /** Render as another element, most often an account Menu's trigger through `MenuTrigger render`. */
+    render?: useRender.RenderProp;
+}
+/**
+ * The account row at the foot of the rail: the avatar in the items' icon slot,
+ * the name on their label column, one detail line, and a chevron that says it
+ * opens a menu. Settings, appearance and sign-out live in that menu, so the
+ * footer is one row instead of a Settings button stacked over a person.
+ *
+ *   <SidebarFooter>
+ *     <Menu>
+ *       <MenuTrigger render={<SidebarAccount avatar={<Avatar size="2xs" fallback="EL" alt="" />} label="Emma Lee" detail="Forma Studio" />} />
+ *       <MenuContent side="top" align="start">…</MenuContent>
+ *     </Menu>
+ *   </SidebarFooter>
+ *
+ * It replaces an Entity patched with `[--entity-py:0]`: an Entity has its own
+ * insets and lands on none of the rail's columns. Collapsed, the avatar alone
+ * stays, centred on the icon column, with the label in a tooltip.
+ */
+declare function SidebarAccount({ avatar, label, detail, indicator, render, className, "aria-label": ariaLabel, ...props }: SidebarAccountProps): react.JSX.Element;
+declare namespace SidebarAccount {
+    var displayName: string;
+}
 
 declare const sidebarMeta: ComponentMeta;
 
@@ -6610,6 +7034,14 @@ interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
      * shows a PageHeader as an example. @default "h1"
      */
     titleAs?: "h1" | "h2";
+    /**
+     * The title's scale. `md` (text-heading-2 over a text-body-sm description)
+     * for product pages: settings, lists, dashboards. `lg` (text-display-lg over
+     * a text-body-lg lede) for an editorial page: a personal site, a marketing
+     * page, an article index. Display type is never product chrome, so keep `lg`
+     * off app routes. @default "md"
+     */
+    size?: "md" | "lg";
 }
 /**
  * PageHeader — an in-flow page heading block: a title row (optional back control
@@ -6623,9 +7055,10 @@ interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
  * must never be cut — and the actions drop under it when the row runs out of
  * room. Beside a back control or actions the title sits in a band one control
  * tall, so a one-line title centres on the buttons and a wrapped one starts level
- * with them.
+ * with them. A title whose line is taller than the controls (`size="lg"`) is
+ * lifted by half the difference instead, so its first line still centres on them.
  */
-declare function PageHeader({ title, description, back, actions, titleAs: Title, className, children, ...props }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, description, back, actions, titleAs: Title, size, className, children, ...props }: PageHeaderProps): react.JSX.Element;
 declare namespace PageHeader {
     var displayName: string;
 }
@@ -6653,11 +7086,13 @@ interface SectionHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title">
      */
     titleId?: string;
     /**
-     * Visual weight, independent of the heading level. `md` (text-heading-3) for
-     * a page's sections and shelves; `sm` (text-heading-4) for a denser set —
-     * settings groups, subsections, a sidebar's sections. @default "md"
+     * Visual weight, independent of the heading level. `lg` (text-heading-2 over
+     * a text-body-md description) for an editorial page's sections, under a
+     * `PageHeader size="lg"`; `md` (text-heading-3) for a page's sections and
+     * shelves; `sm` (text-heading-4) for a denser set — settings groups,
+     * subsections, a sidebar's sections. @default "md"
      */
-    size?: "md" | "sm";
+    size?: "lg" | "md" | "sm";
 }
 /**
  * SectionHeader — the heading block for one section of a page: a title, an
@@ -6675,7 +7110,9 @@ interface SectionHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title">
  *
  * It shares PageHeader's title row: the title wraps rather than truncating,
  * the actions keep to the title's row and drop beneath it only when the row
- * runs out of room. It carries no outer spacing — the Stack or Page it sits in
+ * runs out of room. A title whose line is taller than the controls (`lg`, or
+ * a denser register's shorter ladder) is lifted by half the difference, so its
+ * first line stays centred on them. It carries no outer spacing — the Stack or Page it sits in
  * owns the rhythm between the header and what it introduces.
  */
 declare function SectionHeader({ title, description, actions, titleAs, titleId, size, className, ...props }: SectionHeaderProps): react.JSX.Element;
@@ -6685,7 +7122,20 @@ declare namespace SectionHeader {
 
 declare const sectionHeaderMeta: ComponentMeta;
 
-interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | "defaultValue"> {
+/** The rungs of the control ladder a SearchInput stands on. */
+type SearchInputSize = "md" | "sm" | "xs";
+interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | "defaultValue" | "size"> {
+    /**
+     * Which rung of the control ladder the field stands on — the same names as
+     * Input, Select and Combobox. `md` is the form field. `sm` is the toolbar
+     * field: it shares `--control-sm` with Pill `lg` and Button `sm`, so a row
+     * of filter chips beside the search is one height. `xs` is the inset
+     * tool-panel field, Input `xs`'s surface. The magnifier and clear button
+     * scale and stay centred at every rung. The native numeric `size` attribute
+     * is omitted; the field's width comes from `className`.
+     * @default "md"
+     */
+    size?: SearchInputSize;
     /** Controlled value of the search field. */
     value?: string;
     /**
@@ -6719,7 +7169,7 @@ interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChang
  * Controlled via `value` + `onValueChange`, or uncontrolled via `defaultValue`;
  * pass `onClear` to hook the reset. `className` sizes the whole field.
  */
-declare function SearchInput({ value, defaultValue, onValueChange, onClear, placeholder, className, inputClassName, ref, type, ...props }: SearchInputProps): react.JSX.Element;
+declare function SearchInput({ value, defaultValue, onValueChange, onClear, placeholder, className, inputClassName, size, ref, type, ...props }: SearchInputProps): react.JSX.Element;
 declare namespace SearchInput {
     var displayName: string;
 }
@@ -8692,6 +9142,14 @@ interface MediaImageProps extends Omit<ComponentPropsWithRef<"div">, "children">
      * the muted surface — a logo, a product shot that must not be cropped.
      */
     fit?: "cover" | "contain";
+    /**
+     * Where the image sits in its frame — CSS `object-position`, the sibling of
+     * `fit`. Under `cover` it is the part kept when the crop trims the rest (a
+     * face at `"50% 30%"`, a horizon at `"bottom"`); under `contain` it is the
+     * side the letterbox gives way to. Takes any object-position value.
+     * @default "center"
+     */
+    position?: CSSProperties["objectPosition"];
     /** `srcSet` / `sizes` for responsive images, passed to the `<img>`. */
     srcSet?: string;
     sizes?: string;
@@ -8722,7 +9180,7 @@ interface MediaImageProps extends Omit<ComponentPropsWithRef<"div">, "children">
  * — painting the art first would flash a colourful stand-in for a frame and
  * then swap it for the photo. Once loaded, the image fades in.
  */
-declare function MediaImage({ src, alt, seed, fallback, fit, srcSet, sizes, loading, className, ...props }: MediaImageProps): react.JSX.Element;
+declare function MediaImage({ src, alt, seed, fallback, fit, position, srcSet, sizes, loading, className, ...props }: MediaImageProps): react.JSX.Element;
 declare namespace MediaImage {
     var displayName: string;
 }
@@ -8760,6 +9218,13 @@ interface MediaTileProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
     alt?: string;
     /** Seeds the fallback art. Defaults to `title` when it is a string. */
     seed?: string | number;
+    /**
+     * Which part of the cover the crop keeps — CSS `object-position`, passed to
+     * the cover's MediaImage: `"50% 30%"` for a face, `"top"` for a poster's
+     * title. Store it with the image when each one frames differently.
+     * @default "center"
+     */
+    position?: CSSProperties["objectPosition"];
     /**
      * The cover's shape: `square` (albums, podcasts, playlists), `video` (16:9),
      * `poster` (2:3 — films, books), or any width / height ratio.
@@ -8823,7 +9288,7 @@ interface MediaTileProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
  * and the cover is drawn above it with `order`, so focus moves the way a
  * reader names the item — what it is, who made it, then what to do with it.
  */
-declare function MediaTile({ title, subtitle, meta, src, srcSet, sizes, alt, seed, aspect, size, href, render, subtitleHref, subtitleRender, action, badge, titleAs: TitleTag, loading, className, ...props }: MediaTileProps): react.JSX.Element;
+declare function MediaTile({ title, subtitle, meta, src, srcSet, sizes, alt, seed, position, aspect, size, href, render, subtitleHref, subtitleRender, action, badge, titleAs: TitleTag, loading, className, ...props }: MediaTileProps): react.JSX.Element;
 declare namespace MediaTile {
     var displayName: string;
 }
@@ -9974,6 +10439,6 @@ interface UseActiveSectionOptions {
  */
 declare function useActiveSection(ids: readonly string[], { offset, root }?: UseActiveSectionOptions): string | null;
 
-declare const SABLE_UI_VERSION: "0.17.0";
+declare const SABLE_UI_VERSION: "0.19.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 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, SectionRail, type SectionRailProps, type SectionRailSection, 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 UseActiveSectionOptions, 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, sectionRailMeta, 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, useActiveSection, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMatchHighlight, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActivityData, type ActivityGrid, ActivityHeatmap, type ActivityHeatmapCell, type ActivityHeatmapDay, type ActivityHeatmapProps, type ActivityLevels, type ActivityMonth, type ActivityScale, type ActivityStats, type ActivityWeek, 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, Breakpoint, 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 DataTableGroup, 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, SectionRail, type SectionRailProps, type SectionRailSection, 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, SidebarAccount, type SidebarAccountProps, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarGroup, type SidebarGroupProps, 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 UseActiveSectionOptions, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UseMatchHighlightOptions, type UseMediaQueryOptions, type UsePanelWidthOptions, VIEWPORT_BREAKPOINTS, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, type ViewportBreakpoint, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, activityGrid, activityHeatmapMeta, activityLevels, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, belowBreakpointQuery, 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, sectionRailMeta, 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, useActiveSection, useAnchoredDensity, useAutoSize, useBelowBreakpoint, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMatchHighlight, useMediaQuery, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };