@sableui/react 0.15.0 → 0.17.0

package/dist/index.d.ts

@@ -1,15 +1,15 @@
 import { ClassValue } from 'clsx';
 import { C as ComponentMeta } from './meta-DX5r5wQL.js';
 export { A as AnatomyMeta, a as BestPracticeMeta, E as ExampleMeta, M as MotionMeta, b as MotionSlot, c as PropMeta, R as RelatedMeta, S as SubcomponentMeta, U as UsageMeta } from './meta-DX5r5wQL.js';
-import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-CkqXDVww.js';
-export { A as ART_TOKENS, D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, P as PALETTE_TOKENS, R as RADIUS_TOKENS, d as RHYTHM_TOKENS, e as RadiusToken, f as RhythmToken, S as SEMANTIC_TOKENS, g as SemanticToken, h as TYPE_OVERLINE_TOKENS, i as TYPE_REFINEMENT_TOKENS, j as TYPE_SCALE_TOKENS, k as TYPE_UI_TOKENS, l as TypeOverlineToken, m as TypeRefinementToken, n as TypeScaleToken, o as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, p as WorkspaceSurfaceToken } from './_contract-CkqXDVww.js';
-import { T as ThemeId } from './theme-provider-CdSicAad.js';
-export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-CdSicAad.js';
+import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-CDa9-NdB.js';
+export { A as APP_SHELL_TOKENS, b as ART_TOKENS, D as DENSITY_TOKENS, c as DensityToken, F as FIELD_TOKENS, M as MARK_TOKENS, d as MOTION_TOKENS, e as MotionToken, P as PALETTE_TOKENS, R as RADIUS_TOKENS, f as RHYTHM_TOKENS, g as RadiusToken, h as RhythmToken, S as SEMANTIC_TOKENS, i as SemanticToken, j as TYPE_OVERLINE_TOKENS, k as TYPE_REFINEMENT_TOKENS, l as TYPE_SCALE_TOKENS, m as TYPE_UI_TOKENS, n as TypeOverlineToken, o as TypeRefinementToken, p as TypeScaleToken, q as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, r as WorkspaceSurfaceToken } from './_contract-CDa9-NdB.js';
+import { T as ThemeId } from './theme-provider-BydfM5Z0.js';
+export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-BydfM5Z0.js';
 export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, CenterProps, Col, ColProps, Columns, ColumnsProps, Grid, GridOverlay, GridOverlayProps, GridProps, Page, PageProps, Region, RegionMax, RegionProps, Responsive, Row, RowProps, SafeArea, SafeAreaProps, Spacer, SpacerProps, SplitPane, SplitPaneProps, Stack, StackProps } from './layout/index.js';
 export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
 export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
 import * as react from 'react';
-import { ReactNode, AnimationEvent, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, FormEvent } from 'react';
+import { ReactNode, AnimationEvent, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, RefObject, FormEvent } 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';
@@ -580,7 +580,7 @@ declare namespace ViewTransitionName {
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "floating" | "field" | "on-color" | "on-color-outline" | "on-color-ghost" | null | undefined;
+    variant?: "link" | "primary" | "secondary" | "destructive" | "field" | "outline" | "ghost" | "floating" | "on-color" | "on-color-outline" | "on-color-ghost" | null | undefined;
     size?: "icon" | "sm" | "md" | "xs" | "cta" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -1479,7 +1479,9 @@ interface InputProps$1 extends Omit<ComponentPropsWithRef<"input">, "size"> {
 }
 /**
  * Input — a styled native `<input>`. Soft-square (rounded-sm, 8px), never a pill.
- * Sits on the card surface with a 1px input border; focus raises a 2px ring.
+ * Wears the theme's field surface (`field` fill, 1px `field-border` outline — outlined
+ * on the card by default, a filled well in a theme that fills its fields); focus
+ * raises a 2px ring.
  * Set `aria-invalid` (Base UI form fields do this for you) to surface the
  * destructive error treatment on border + ring.
  *
@@ -1548,7 +1550,7 @@ interface TextareaProps extends ComponentPropsWithRef<"textarea"> {
 }
 /**
  * Textarea — a styled native multi-line text control. Soft-square (rounded-sm,
- * like all inputs, never a pill). Sits on the card surface with a 1px input
+ * like all inputs, never a pill). Sits on the field surface with a 1px field
  * border; the focus ring uses the --ring token. Set `aria-invalid` to surface
  * the destructive error treatment on border + ring (same as Input). Pass `autoResize` to grow with content.
  *
@@ -2625,6 +2627,12 @@ type RootProps$3 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
     strokeWidth?: number;
     /** Print the value in the ring's centre. */
     showValue?: boolean;
+    /**
+     * Draw the bar as this many separate ticks instead of a continuous fill —
+     * a quota, score or spend limit read at a glance (▮▮▮▮▮▮▯▯▯▯). Any reading
+     * above `min` fills at least one tick. Bar only: ignored for `shape="ring"`.
+     */
+    segments?: number;
 };
 /**
  * Meter — a static measurement within a known range, over Base UI's Meter.
@@ -2646,8 +2654,10 @@ type RootProps$3 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
  *   </Meter>
  *
  * `shape="ring"` draws the same measurement as a circular gauge (it was Gauge).
+ * `segments={20}` draws the bar as a row of ticks — a spend limit or a score
+ * read at a glance (bar only).
  */
-declare function Meter({ className, children, tone, shape, size, strokeWidth, showValue, ...props }: RootProps$3): react.JSX.Element;
+declare function Meter({ className, children, tone, shape, size, strokeWidth, showValue, segments, ...props }: RootProps$3): react.JSX.Element;
 declare namespace Meter {
     var displayName: string;
 }
@@ -2656,7 +2666,11 @@ type TrackProps$1 = Omit<ComponentProps<typeof Meter$1.Track>, "className"> & {
     /** Bar thickness. Inherits the Meter's `size` unless set here. @default "md" */
     size?: MeterSize;
 };
-/** The rail. Renders a MeterIndicator child by default. */
+/**
+ * The rail. Renders a MeterIndicator child by default — or, when the Meter has
+ * `segments`, its row of ticks (children are not rendered then: there is no
+ * single fill to put in it).
+ */
 declare function MeterTrack({ className, children, size, ...props }: TrackProps$1): react.JSX.Element;
 declare namespace MeterTrack {
     var displayName: string;
@@ -2836,9 +2850,9 @@ declare const CHART_SERIES_COUNT = 8;
 declare function chartColor(index: number): string;
 /**
  * The CSS colour for a tone as a chart fill — for a series that names its role
- * (`tone: "success"`), not for default series (see chartColor). Tones are
- * tuned to be legible as TEXT (dark, restrained); a plotted mark keeps the hue
- * but is lifted into the chart lightness band with a chroma floor, so a quiet
+ * (`tone: "success"`), not for default series (see chartColor). Status and
+ * decorative tones plot at graphic strength (their `-mark` tokens, which each
+ * theme tunes), held in the chart lightness band with a chroma floor, so a quiet
  * tone (a slate "3") still reads as colour rather than grey.
  */
 declare function toneColor(tone: ChartTone): string;
@@ -4789,7 +4803,16 @@ interface ComboboxItemGroup<Item = unknown> {
     /** The rows under it. */
     items: readonly Item[];
 }
-type ComboboxProps<Value, Multiple extends boolean | undefined = false> = ComboboxRootProps<Value, Multiple>;
+type ComboboxProps<Value, Multiple extends boolean | undefined = false> = ComboboxRootProps<Value, Multiple> & {
+    /**
+     * Paint the typed text wherever it appears in a row's label, on the
+     * `highlight` token pair. Only typed text: a field that still holds the
+     * selected item's label lists everything, and lighting that label in every
+     * row would mark matches nobody searched for. See useMatchHighlight.
+     * @default true
+     */
+    highlightMatches?: boolean;
+};
 /**
  * Root of the combobox. Owns selection, input value, filtering and open state —
  * all of it Base UI's, passed straight through.
@@ -4800,7 +4823,7 @@ type ComboboxProps<Value, Multiple extends boolean | undefined = false> = Combob
  * highlight is forwarded to the virtual list, which knows every row's offset
  * whether or not it exists. Your own `onItemHighlighted` still fires, first.
  */
-declare function Combobox<Value, Multiple extends boolean | undefined = false>({ onItemHighlighted, ...props }: ComboboxProps<Value, Multiple>): react.JSX.Element;
+declare function Combobox<Value, Multiple extends boolean | undefined = false>({ onItemHighlighted, onInputValueChange, highlightMatches, ...props }: ComboboxProps<Value, Multiple>): react.JSX.Element;
 declare const ComboboxValue: typeof Combobox$1.Value;
 declare const ComboboxClear: react.ForwardRefExoticComponent<Omit<_base_ui_react.AutocompleteClearProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const ComboboxPortal: {
@@ -4879,7 +4902,7 @@ type ContentProps$2 = Omit<ComponentProps<typeof Combobox$1.Popup>, "className">
  * callers pass items/children directly. Defaults to the `bottom` side, `start`
  * aligned, 6px offset; matches the input width via `--anchor-width`.
  */
-declare function ComboboxContent({ className, children, side, align, sideOffset, scroll, ...props }: ContentProps$2): react.JSX.Element;
+declare function ComboboxContent({ className, children, side, align, sideOffset, scroll, ref, ...props }: ContentProps$2): react.JSX.Element;
 type ItemProps$1 = Omit<ComponentProps<typeof Combobox$1.Item>, "className"> & {
     className?: string;
 };
@@ -6122,6 +6145,9 @@ declare function hueColor(h: number): string;
 
 declare const colorFieldMeta: ComponentMeta;
 
+/** How AppShell frames its main content on desktop. See `AppShellProps.frame`. */
+type AppShellFrame = "flush" | "inset";
+
 interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
     /**
      * Full-width status banners pinned above the frame (offline / chain-down).
@@ -6154,6 +6180,23 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
     dock?: ReactNode;
     /** Floating overlays (a message launcher, FAB, modal mount points). */
     overlays?: ReactNode;
+    /**
+     * How the desktop frame (`lg` and up) holds the content. Below `lg` the two
+     * are identical: mobile header, plain main, page scroll, bottom nav.
+     * - `flush` (default) — main sits directly on the page beside the rail and
+     *   the document scrolls.
+     * - `inset` — the shell's ground (`shell-ground`, one step off the rail's
+     *   surface) holds the rail and the gap, and main
+     *   is a raised, rounded, bordered panel inset from the window edges that
+     *   scrolls inside itself while the rail stays put. For dense, multi-pane
+     *   product apps. The Sidebar in the `sidebar` slot reads the frame (see
+     *   `app-shell-frame.tsx`), drops its right border — the gap is the divider
+     *   now — and fills the body row. Pair it with `surface="rail"`; with
+     *   `surface="page"` the ground turns page-coloured and the panel's border
+     *   alone lifts it.
+     * @default "flush"
+     */
+    frame?: AppShellFrame;
     /** Main content. */
     children?: ReactNode;
 }
@@ -6165,7 +6208,9 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
  * It is layout-agnostic about the breakpoint switch: each slot component owns
  * its own `hidden`/`lg:*` visibility (Sidebar is `hidden lg:flex`, AppHeader and
  * BottomNav are `lg:hidden`), so the same shell drives mobile and desktop. The
- * only coupling AppShell adds is reserving bottom space for a fixed `bottomNav`.
+ * only couplings AppShell adds are reserving bottom space for a fixed
+ * `bottomNav` and, with `frame="inset"`, telling the Sidebar in its slot to drop
+ * its border and fill the row (`AppShellFrameProvider`, app-shell-frame.tsx).
  *
  *   <AppShell
  *     banners={<NetworkBanner />}
@@ -6176,7 +6221,7 @@ interface AppShellProps extends Omit<ComponentProps<"div">, "title"> {
  *     <Region max="feed">…</Region>
  *   </AppShell>
  */
-declare function AppShell({ banners, header, sidebar, bottomNav, dock, overlays, className, children, ...rest }: AppShellProps): react.JSX.Element;
+declare function AppShell({ banners, header, sidebar, bottomNav, dock, overlays, frame, className, children, ...rest }: AppShellProps): react.JSX.Element;
 declare namespace AppShell {
     var displayName: string;
 }
@@ -6253,6 +6298,12 @@ interface SidebarProps extends ComponentPropsWithRef<"aside"> {
      * - `page` — the page's own surface and ink, no border. Use it when a
      *   full-width header sits above the rail: a tinted column that starts
      *   under a page-coloured bar reads as pasted on, not as chrome.
+     *
+     * Inside `<AppShell frame="inset">` the rail's surface is also the shell's
+     * ground, so from `lg` the `rail` border is dropped (the gap around the main
+     * panel divides them) and the rail fills the shell's body row rather than
+     * sizing itself to the viewport. AppShell signals this through its
+     * `sidebar` slot only (`useAppShellFrame`), so a rail elsewhere is unaffected.
      * @default "rail"
      */
     surface?: "rail" | "page";
@@ -6420,6 +6471,67 @@ declare namespace SideNavItem {
 
 declare const sideNavMeta: ComponentMeta;
 
+interface SectionRailSection {
+    /** The section element's `id` — the rail links to `#id` and watches it. */
+    id: string;
+    /** The section's name: the tooltip, and the link's accessible name. */
+    label: string;
+}
+interface SectionRailProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+    /** The sections, in document order. */
+    sections: readonly SectionRailSection[];
+    /**
+     * The current section's id, when the parent decides it. Leave it unset and
+     * the rail follows the scroll itself.
+     */
+    value?: string;
+    /** Called with the new id when the reader scrolls into a section or picks one. */
+    onValueChange?: (id: string) => void;
+    /**
+     * Where the reading line sits, as a fraction of the viewport from its top.
+     * A section becomes current once its top crosses it.
+     * @default 0.35
+     */
+    offset?: number;
+    /** The element that scrolls, when it is not the window. */
+    root?: RefObject<HTMLElement | null>;
+    /**
+     * Which edge of the page the rail sits on. The labels open toward the
+     * content, on the other side.
+     * @default "left"
+     */
+    side?: "left" | "right";
+    /**
+     * How much motion this component uses: `full` (default) inherits the app's
+     * policy, `subtle` keeps feedback and drops the marker's glide, `off` stills
+     * it. It can only turn motion down — it never overrides a reader's
+     * reduce-motion setting.
+     */
+    motion?: MotionLevel;
+}
+/**
+ * SectionRail — a slim vertical rail of dots, one per section of a long page,
+ * that shows where the reader is and jumps to any section. A bar marks the
+ * current section and glides to the next as the page scrolls; hovering or
+ * focusing a dot names its section in a tooltip that travels with the pointer.
+ *
+ *   <SectionRail
+ *     sections={[{ id: "overview", label: "Overview" }, { id: "process", label: "Process" }]}
+ *     className="fixed top-1/2 left-6 z-(--z-nav) -translate-y-1/2 max-lg:hidden"
+ *   />
+ *
+ * It renders in flow; place it with layout classes. Picking a dot scrolls to
+ * the section with the page's own `scroll-behavior` (instantly under reduced
+ * motion) and, at page level, puts its id in the URL without adding a history
+ * entry. Give sections a `scroll-mt-*` when a sticky header would cover them.
+ */
+declare function SectionRail({ sections, value, onValueChange, offset, root, side, motion, className, "aria-label": ariaLabel, ref, ...props }: SectionRailProps): react.JSX.Element;
+declare namespace SectionRail {
+    var displayName: string;
+}
+
+declare const sectionRailMeta: ComponentMeta;
+
 /**
  * BottomNav — the mobile bottom tab bar. Fixed to the bottom edge, hidden at
  * `lg` (the desktop Sidebar takes over). Pads the home-indicator safe area and
@@ -6598,7 +6710,7 @@ interface SearchInputProps extends Omit<ComponentPropsWithRef<"input">, "onChang
 }
 /**
  * SearchInput — a styled search field with a leading magnifier and a clearable
- * X. Soft-square (rounded-sm), card surface, 2px focus ring — same shell as
+ * X. Soft-square (rounded-sm), field surface, 2px focus ring — same shell as
  * Input, padded to make room for the leading and trailing affordances. The
  * clear button only renders while the value is non-empty.
  *
@@ -7705,6 +7817,14 @@ interface CommandMenuProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
      * self-filtering — if you own which rows exist, you own all of them.
      */
     filter?: CommandFilter;
+    /**
+     * Paint the query wherever it appears in a row's label, on the `highlight`
+     * token pair. A literal, case-insensitive match — so under a fuzzy `filter`
+     * a row that matched as a subsequence keeps an unpainted label, which is
+     * honest: nothing in it reads as the query. See useMatchHighlight.
+     * @default true
+     */
+    highlightMatches?: boolean;
     /**
      * Classes for the scrolling list, which is a `Scroller` — so `className`
      * (which lands on the dialog surface) cannot reach it, and the list's own
@@ -7793,7 +7913,7 @@ type CommandMenuPanelProps = Omit<CommandMenuProps, "open" | "onOpenChange" | "f
  * top-aligned Dialog with a combobox search header and a scrollable listbox of
  * command options.
  */
-declare function CommandMenu({ open, onOpenChange, items, query: queryProp, onQueryChange, filter, listClassName, placeholder, emptyMessage, title, description, finalFocus, scope, inputProps, children, className, ...props }: CommandMenuProps): react.JSX.Element;
+declare function CommandMenu({ open, onOpenChange, items, query: queryProp, onQueryChange, filter, highlightMatches, listClassName, placeholder, emptyMessage, title, description, finalFocus, scope, inputProps, children, className, ...props }: CommandMenuProps): react.JSX.Element;
 /**
  * The same palette rendered in place: search header, filtered and grouped
  * listbox, the full keyboard model — on a card in the page instead of in a
@@ -7807,7 +7927,7 @@ declare function CommandMenu({ open, onOpenChange, items, query: queryProp, onQu
  * once the query is empty, so a Popover around the panel still closes on it.
  * Choosing a row runs its onSelect and leaves the panel as it was.
  */
-declare function CommandMenuPanel({ items, query: queryProp, onQueryChange, filter, listClassName, placeholder, emptyMessage, title, scope, inputProps, children, className, ...props }: CommandMenuPanelProps): react.JSX.Element;
+declare function CommandMenuPanel({ items, query: queryProp, onQueryChange, filter, highlightMatches, listClassName, placeholder, emptyMessage, title, scope, inputProps, children, className, ...props }: CommandMenuPanelProps): react.JSX.Element;
 interface CommandMenuGroupProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
     /** Group heading shown above the items. */
     label: string;
@@ -7887,7 +8007,7 @@ interface CommandMenuTriggerProps extends Omit<ComponentPropsWithRef<"button">,
 }
 /**
  * CommandMenuTrigger — the search field in a header that is really a button:
- * it wears SearchInput's shell (border-input, card surface, leading magnifier,
+ * it wears SearchInput's shell (the field fill and outline, leading magnifier,
  * muted placeholder) and opens a `CommandMenu` on click or on ⌘K / Ctrl+K.
  *
  *   const [open, setOpen] = useState(false)
@@ -8497,6 +8617,8 @@ type ArtVariant = "mesh" | "grain";
 
 /** The decorative tones art can be painted from — the palette's `--tone-*` family. */
 type ArtTone = "info" | "3" | "2" | "1" | "warning";
+/** How strongly the art is painted: the preset's art as-is, or a pastel wash of it. */
+type ArtIntensity = "vivid" | "soft";
 interface GradientArtProps extends ComponentProps<"div"> {
     /**
      * `mesh` (default) — soft spots of colour pulled together by gentle waves
@@ -8515,6 +8637,14 @@ interface GradientArtProps extends ComponentProps<"div"> {
      * item keeps its own look across renders and reloads.
      */
     seed?: string | number;
+    /**
+     * `vivid` (default) paints the preset's art at full strength. `soft` turns
+     * every colour and the ground into a light pastel of itself — a wash to
+     * stage white chips, logo tiles or a card's header band on, in light and
+     * dark alike. It is a light ground: put content on a card or chip over it,
+     * not overlay-foreground text straight on it.
+     */
+    intensity?: ArtIntensity;
 }
 /**
  * GradientArt — placeholder artwork painted from the theme's art direction:
@@ -8531,7 +8661,7 @@ interface GradientArtProps extends ComponentProps<"div"> {
  *
  * Children render above the art: initials, a play glyph, a caption.
  */
-declare function GradientArt({ variant, tones, seed, className, style, children, ...props }: GradientArtProps): react.JSX.Element;
+declare function GradientArt({ variant, tones, seed, intensity, className, style, children, ...props }: GradientArtProps): react.JSX.Element;
 declare namespace GradientArt {
     var displayName: string;
 }
@@ -9684,6 +9814,45 @@ declare function usePresentation(): Presentation;
  */
 declare function useScrollActivity(): (node: HTMLElement | null) => void;
 
+/**
+ * useMatchHighlight — paint every occurrence of a query inside a region, without
+ * touching the region's DOM.
+ *
+ *   const results = useMatchHighlight<HTMLUListElement>(query)
+ *   <SearchInput value={query} onValueChange={setQuery} />
+ *   <ul ref={results}>{rows}</ul>
+ *
+ * The obvious way to mark a match is to split the label around it and wrap the
+ * hit in a `<mark>`. That means every row renders its label as three nodes, the
+ * component owning the row has to know the query, and the text a screen reader
+ * walks is cut into fragments. The CSS Custom Highlight API marks a Range
+ * instead: the text nodes stay exactly as React rendered them, and the paint is
+ * `::highlight(sable-match)` in styles.css, on the `highlight` token pair —
+ * whose stated intent is search hits.
+ *
+ * Returns a callback ref rather than taking a ref object, because the regions
+ * this is for (a popup list, a results panel) usually mount after the component
+ * holding the query does, and an effect keyed on the query never sees a ref
+ * object fill in.
+ *
+ * Matching is case-insensitive and literal, within one text node: a match split
+ * across elements (`<b>Re</b>port`) is not painted. That is the same text the
+ * built-in filters compare, so whatever survives a substring filter is lit.
+ * `selector` narrows the search to parts of the region — a row's label and not
+ * its shortcut hint.
+ *
+ * Purely visual, and that is fine here: the query is already in the field, and
+ * the row's accessible name is unchanged. Where the API is missing it does
+ * nothing at all.
+ */
+declare function useMatchHighlight<T extends Element = HTMLElement>(query: string, options?: UseMatchHighlightOptions): (element: T | null) => void;
+interface UseMatchHighlightOptions {
+    /** Only search inside elements matching this, within the region. */
+    selector?: string;
+    /** Turn the paint off without unmounting anything. @default true */
+    enabled?: boolean;
+}
+
 interface UseCopyOptions {
     /** How long `copied` stays true after a successful copy, in ms. @default 1500 */
     timeout?: number;
@@ -9772,6 +9941,39 @@ interface SmoothWheelOptions {
  */
 declare function useSmoothWheel({ axis, mapVertical, smooth, }?: SmoothWheelOptions): (node: HTMLElement | null) => void;
 
-declare const SABLE_UI_VERSION: "0.15.0";
+interface UseActiveSectionOptions {
+    /**
+     * Where the reading line sits, as a fraction of the viewport's height from
+     * its top. A section becomes current once its top crosses the line, so the
+     * one being read wins over the one merely peeking in at the bottom.
+     * @default 0.35
+     */
+    offset?: number;
+    /**
+     * The element that scrolls, when it is not the window — a `Scroller`, an
+     * inset `AppShell` main, a docs preview.
+     */
+    root?: RefObject<HTMLElement | null>;
+}
+/**
+ * useActiveSection — which of these sections the reader is in. The scroll spy
+ * behind `SectionRail`, exported for a contents list a consumer draws itself
+ * (an "On this page" column, a chapter select).
+ *
+ *   const active = useActiveSection(["intro", "usage", "api"])
+ *
+ * The current section is the last one, in the order given, whose top has
+ * crossed the reading line (`offset`). Before any has, the first one is
+ * current: the reader is at the start. Once the scroller reaches its end the
+ * last section in view wins instead, because a short closing section can never
+ * climb to the line and would otherwise never become current.
+ *
+ * Measures on scroll and resize, at most once a frame. Ids missing from the
+ * document are skipped, so sections may mount late. Returns `null` only for an
+ * empty list.
+ */
+declare function useActiveSection(ids: readonly string[], { offset, root }?: UseActiveSectionOptions): string | null;
+
+declare const SABLE_UI_VERSION: "0.17.0";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, BubbleReactionAdd, type BubbleReactionAddProps, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Burst, type BurstProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ConfirmButton, type ConfirmButtonProps, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DEFAULT_REACTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LikeButton, type LikeButtonProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuReactions, type MenuReactionsProps, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionLevel, type MotionPolicy, MotionProvider, type MotionProviderProps, MotionScope, type MotionScopeProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, NumberTicker, type NumberTickerProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, type Reaction, ReactionPicker, type ReactionPickerProps, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TOOL_CALL_STATUS_LABELS, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, ToolCall, type ToolCallProps, type ToolCallStatus, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipGroup, type TooltipGroupProps, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, confirmButtonMeta, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, likeButtonMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, motionAttribute, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, numberTickerMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, reactionPickerMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolCallMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useAutoSize, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, useMotionLevel, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useShake, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtIntensity, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, BubbleReactionAdd, type BubbleReactionAddProps, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Burst, type BurstProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ConfirmButton, type ConfirmButtonProps, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DEFAULT_REACTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LikeButton, type LikeButtonProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuReactions, type MenuReactionsProps, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionLevel, type MotionPolicy, MotionProvider, type MotionProviderProps, MotionScope, type MotionScopeProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, NumberTicker, type NumberTickerProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, type Reaction, ReactionPicker, type ReactionPickerProps, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, 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 };

package/dist/index.js

@@ -18,6 +18,9 @@ import {
   DENSITY_TOKENS,
   RHYTHM_TOKENS,
   WORKSPACE_SURFACE_TOKENS,
+  FIELD_TOKENS,
+  APP_SHELL_TOKENS,
+  MARK_TOKENS,
   ART_TOKENS,
   PALETTE_TOKENS,
   TYPE_UI_TOKENS
@@ -127,6 +130,7 @@ export * from "./components/color-field/index.js";
 export * from "./components/app-shell/index.js";
 export * from "./components/sidebar/index.js";
 export * from "./components/side-nav/index.js";
+export * from "./components/section-rail/index.js";
 export * from "./components/bottom-nav/index.js";
 export * from "./components/app-header/index.js";
 export * from "./components/page-header/index.js";
@@ -170,15 +174,18 @@ 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 { useMatchHighlight } from "./lib/use-match-highlight.js";
 import { useCopy } from "./lib/use-copy.js";
 import { useSmoothWheel } from "./lib/use-smooth-wheel.js";
+import { useActiveSection } from "./lib/use-active-section.js";
 import {
   useCaretTrigger
 } 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.15.0";
+var SABLE_UI_VERSION = "0.17.0";
 export {
+  APP_SHELL_TOKENS,
   ART_TOKENS,
   CHART_SERIES_COUNT,
   COMPONENT_GROUPS,
@@ -187,6 +194,8 @@ export {
   DENSITY_TOKENS,
   Density,
   DensityProvider,
+  FIELD_TOKENS,
+  MARK_TOKENS,
   MOTION_TOKENS,
   PALETTE_COLORS,
   PALETTE_FAMILIES,
@@ -227,10 +236,12 @@ export {
   themeIds,
   themeManifestById,
   themeManifests,
+  useActiveSection,
   useAnchoredDensity,
   useCaretTrigger,
   useCopy,
   useDensity,
+  useMatchHighlight,
   usePresentation,
   useSableTheme,
   useScrollActivity,

package/dist/lib/chart/types.js

@@ -4,18 +4,18 @@ function chartColor(index) {
   return `var(--chart-${index % CHART_SERIES_COUNT + 1})`;
 }
 var TONE_VAR = {
-  "1": "var(--tone-1)",
-  "2": "var(--tone-2)",
-  "3": "var(--tone-3)",
-  info: "var(--tone-info)",
-  warning: "var(--tone-warning)",
+  "1": "var(--tone-1-mark)",
+  "2": "var(--tone-2-mark)",
+  "3": "var(--tone-3-mark)",
+  info: "var(--tone-info-mark)",
+  warning: "var(--tone-warning-mark)",
   primary: "var(--primary)",
   neutral: "var(--muted-foreground)",
-  success: "var(--success)",
-  destructive: "var(--destructive)"
+  success: "var(--success-mark)",
+  destructive: "var(--destructive-mark)"
 };
 function toneColor(tone) {
-  return `oklch(from ${TONE_VAR[tone]} clamp(0.5, calc(l + 0.1), 0.72) max(calc(c * 1.1), 0.1) h)`;
+  return `oklch(from ${TONE_VAR[tone]} clamp(0.5, l, 0.78) max(c, 0.1) h)`;
 }
 function resolveSeries(series) {
   return series.map((s, i) => ({

package/dist/lib/chart/use-arrival.js

@@ -25,13 +25,14 @@ function useArrival() {
       cancelAnimationFrame(frame);
       frame = requestAnimationFrame(() => onScreen() && setArrived(true));
     };
-    window.addEventListener("scroll", check, { passive: true, capture: true });
-    window.addEventListener("resize", check, { passive: true });
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    window.addEventListener("scroll", check, { passive: true, capture: true, signal });
+    window.addEventListener("resize", check, { passive: true, signal });
     return () => {
       observer.disconnect();
       cancelAnimationFrame(frame);
-      window.removeEventListener("scroll", check, { capture: true });
-      window.removeEventListener("resize", check);
+      listeners.abort();
     };
   }, [el, arrived]);
   return [ref, arrived];

package/dist/lib/field-shell.js

@@ -1,5 +1,5 @@
 // src/lib/field-shell.ts
-var FIELD_SHELL = "rounded-sm border border-input bg-card motion-interactive placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+var FIELD_SHELL = "rounded-sm border border-field-border bg-field motion-interactive placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
 var MOBILE_FIELD_TIER = "max-sm:text-body-lg";
 var FIELD_INVALID = "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/30";
 var FIELD_SHELL_XS = "rounded-[var(--panel-field-radius,var(--radius-xs))] border-transparent bg-panel-field hover:bg-panel-field-hover";

package/dist/lib/highlight-glide.js

@@ -95,16 +95,16 @@ function HighlightGlide({
     mutations.observe(host, { attributes: true, attributeFilter: [follow], subtree: true, childList: true });
     const resize = new ResizeObserver(place);
     resize.observe(host);
-    host.addEventListener("scroll", place, true);
-    host.addEventListener("transitionend", place);
-    host.addEventListener("animationend", place);
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    host.addEventListener("scroll", place, { capture: true, signal });
+    host.addEventListener("transitionend", place, { signal });
+    host.addEventListener("animationend", place, { signal });
     return () => {
       cancelAnimationFrame(frame);
       mutations.disconnect();
       resize.disconnect();
-      host.removeEventListener("scroll", place, true);
-      host.removeEventListener("transitionend", place);
-      host.removeEventListener("animationend", place);
+      listeners.abort();
       host.removeAttribute("data-glide");
     };
   }, [follow, timing]);