@sableui/react 0.18.0 → 0.19.0

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 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, CSSProperties } from 'react';
@@ -1128,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,
@@ -1135,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`.
@@ -1253,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;
 
@@ -2071,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
@@ -2101,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;
 
@@ -2116,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;
 }
@@ -2176,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;
 }
@@ -2198,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.
      */
@@ -2795,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?: ({
@@ -4110,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 {
@@ -4194,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>[];
@@ -4227,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`.
  *
@@ -4247,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;
 }
@@ -4382,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;
 
@@ -4503,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;
 }
@@ -4816,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;
 };
@@ -5509,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;
 
 /**
@@ -5619,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;
 
@@ -5697,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.
@@ -5723,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
@@ -5732,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;
 }
@@ -5760,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;
@@ -5810,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;
 }
@@ -6457,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"> {
     /**
@@ -6585,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;
 
@@ -10217,6 +10439,6 @@ interface UseActiveSectionOptions {
  */
 declare function useActiveSection(ids: readonly string[], { offset, root }?: UseActiveSectionOptions): string | null;
 
-declare const SABLE_UI_VERSION: "0.18.0";
+declare const SABLE_UI_VERSION: "0.19.0";
 
-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, 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, activityGrid, activityHeatmapMeta, activityLevels, 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 };

package/dist/index.js

@@ -178,6 +178,12 @@ export * from "./components/marker/index.js";
 import { Density, DensityProvider, useDensity, useAnchoredDensity, useTypeTier } from "./lib/density.js";
 import { PresentationProvider, usePresentation } from "./lib/presentation.js";
 import { useScrollActivity } from "./lib/use-scroll-activity.js";
+import {
+  belowBreakpointQuery,
+  useBelowBreakpoint,
+  useMediaQuery,
+  VIEWPORT_BREAKPOINTS
+} from "./lib/use-media-query.js";
 import { useMatchHighlight } from "./lib/use-match-highlight.js";
 import { useCopy } from "./lib/use-copy.js";
 import { useSmoothWheel } from "./lib/use-smooth-wheel.js";
@@ -187,7 +193,7 @@ import {
 } from "./lib/use-caret-trigger.js";
 import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
 import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
-var SABLE_UI_VERSION = "0.18.0";
+var SABLE_UI_VERSION = "0.19.0";
 export {
   APP_SHELL_TOKENS,
   ART_TOKENS,
@@ -223,11 +229,13 @@ export {
   TYPE_REFINEMENT_TOKENS,
   TYPE_SCALE_TOKENS,
   TYPE_UI_TOKENS,
+  VIEWPORT_BREAKPOINTS,
   WORKSPACE_SURFACE_TOKENS,
   activityGrid,
   activityLevels,
   applySableColorMode,
   applySableTheme,
+  belowBreakpointQuery,
   chartColor,
   toneColor as chartToneColor,
   componentGuidance,
@@ -245,10 +253,12 @@ export {
   themeManifests,
   useActiveSection,
   useAnchoredDensity,
+  useBelowBreakpoint,
   useCaretTrigger,
   useCopy,
   useDensity,
   useMatchHighlight,
+  useMediaQuery,
   usePresentation,
   useSableTheme,
   useScrollActivity,

package/dist/lib/chart/heat.js

@@ -33,7 +33,7 @@ function activityLevels(values, { levels = 5, scale = "quantile" } = {}) {
     }
   };
 }
-var HEAT_EMPTY = "color-mix(in oklch, var(--foreground) 8%, transparent)";
+var HEAT_EMPTY = "color-mix(in oklab, var(--foreground) 8%, transparent)";
 function heatColor(base, level, levels) {
   if (level <= 0) return HEAT_EMPTY;
   const top = Math.max(1, levels - 1);