@sckyzo/cosmos-react 0.3.0 → 0.4.1

package/dist/index.d.cts

@@ -1,14 +1,17 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ElementType, ComponentPropsWithRef, Ref, ComponentType, AnchorHTMLAttributes, ButtonHTMLAttributes, ImgHTMLAttributes, MouseEvent, HTMLAttributeReferrerPolicy, ComponentPropsWithoutRef, ChangeEvent, MouseEventHandler, ComponentProps } from 'react';
+import { HTMLAttributes, ReactNode, ElementType, ComponentPropsWithRef, Ref, ComponentType, AnchorHTMLAttributes, ButtonHTMLAttributes, ImgHTMLAttributes, MouseEvent, HTMLAttributeReferrerPolicy, ComponentPropsWithoutRef, ChangeEvent, MouseEventHandler, ComponentProps, CSSProperties } from 'react';
+import { I as Intent } from './intent-D0bANgYJ.cjs';
+export { a as CodeBlock, C as CodeBlockProps } from './CodeBlock-CY18_3tZ.cjs';
 import { LucideIcon } from 'lucide-react';
 import useEmblaCarousel from 'embla-carousel-react';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import { ToasterProps } from 'sonner';
 export { toast } from 'sonner';
 import { Command } from 'cmdk';
+import { F as FieldSize } from './fieldRecipe-Cao5uUIK.cjs';
 import { DayPickerProps } from 'react-day-picker';
 
-type DividerAlign = 'left' | 'center' | 'right';
+type DividerAlign = 'start' | 'center' | 'end';
 type DividerProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Render an inset label/icon centered (or aligned) on top of the line.
@@ -35,9 +38,9 @@ type DividerIconProps = Omit<DividerProps, 'inset' | 'emphasis'> & {
     iconClassName?: string;
 };
 type DividerRowProps = HTMLAttributes<HTMLDivElement> & {
-    /** Left-aligned title. Use `null` to render only actions. */
+    /** Title at the start of the line. Use `null` to render only actions. */
     title?: ReactNode;
-    /** Right-aligned trailing content — button, button group, toolbar, etc. */
+    /** Trailing content at the end of the line — button, button group, toolbar, etc. */
     actions?: ReactNode;
     /**
      * Use a larger font size for the title (TUI "With title and button").
@@ -51,7 +54,7 @@ declare const Divider: (({ inset, align, emphasis, insetBg, className, ...rest }
 };
 
 type MediaObjectAlign = 'start' | 'center' | 'bottom' | 'stretch';
-type MediaObjectPosition = 'left' | 'right';
+type MediaObjectPosition = 'start' | 'end';
 type MediaObjectProps = ComponentPropsWithRef<'div'> & {
     /**
      * Where the media sits against the body: `start` (top), `center`, `bottom`,
@@ -59,7 +62,7 @@ type MediaObjectProps = ComponentPropsWithRef<'div'> & {
      * `h-full`). Default `start`.
      */
     align?: MediaObjectAlign;
-    /** Side of the body the media sits on. `right` reverses the row. Default `left`. */
+    /** Side of the body the media sits on. `end` reverses the row. Default `start`. */
     mediaPosition?: MediaObjectPosition;
     /** Gap between the media and the body. Default `gap-x-4` (16px). */
     gapClassName?: string;
@@ -106,7 +109,7 @@ declare const PageContainer: ({ children, width, className }: PageContainerProps
 
 type SplitViewBreakpoint = 'md' | 'lg' | 'xl';
 type SplitViewProps = {
-    /** The panes: `SplitView.Pane`, in the order they sit from left to right. */
+    /** The panes: `SplitView.Pane`, in the order they sit along the line, the first at the start. */
     children: ReactNode;
     /**
      * Below this breakpoint the panes no longer sit side by side: only the active one shows, and
@@ -171,7 +174,19 @@ declare const SplitView: (({ children, collapseBelow, activePane: controlledPane
     Pane: ({ id, label, width, children, className, ref }: SplitViewPaneProps) => react.JSX.Element;
 };
 
+/**
+ * How the Shell spans the window: `fluid` (the whole width) or `boxed` (a column of at most
+ * 1440px, centred).
+ */
+type ShellContainer = 'fluid' | 'boxed';
 type ShellProps = {
+    /**
+     * `fluid` (default): the topbar, the sidebar and the content take the whole window.
+     * `boxed`: they sit together in a centred column of at most 1440px, with the page background
+     * on both sides and a hairline on the column's edges once the window is wider. Below 1440px
+     * the two are the same. The sidebar's drawer, below `lg`, is not part of the column.
+     */
+    container?: ShellContainer;
     /**
      * Top header bar: typically `<Topbar />`, or any header (a `<Navbar>`). Shell
      * passes it no props: a Topbar or a `SidebarToggle` reads the sidebar state
@@ -183,7 +198,7 @@ type ShellProps = {
     /** Main content area. */
     children: ReactNode;
     /**
-     * Optional right-aligned secondary panel — mirrors the TUI Plus "Multi-
+     * Optional end-aligned secondary panel — mirrors the TUI Plus "Multi-
      * column" application shell pattern (sidebar + main + secondary). Renders
      * after `children` inside a flex row below the topbar; below `lg` it stacks under `children`.
      */
@@ -207,7 +222,7 @@ type ShellProps = {
      * Where the built-in collapse control lives. `topbar` (default): the Topbar's
      * hamburger. `sidebar`: a button at the bottom of the Sidebar, and the
      * Topbar shows no hamburger. For both, or another place, put a
-     * `<SidebarToggle />` there (a Topbar's `leftActions`, the Sidebar's
+     * `<SidebarToggle />` there (a Topbar's `startActions`, the Sidebar's
      * `footer`, a custom header): it needs no props in a Shell.
      */
     collapseControl?: 'topbar' | 'sidebar';
@@ -242,7 +257,7 @@ type ShellProps = {
  *
  * The Shell owns two sidebar states: collapsed from `lg` up (the rail) and open below `lg`,
  * where the sidebar leaves the layout and the toggle opens it as a 288px drawer over a scrim
- * (`sidebarOpen`). It closes on the scrim, the close button, Escape, a swipe toward the left
+ * (`sidebarOpen`). It closes on the scrim, the close button, Escape, a swipe toward the start
  * edge, a click on a `Sidebar.Item` and when the viewport grows past `lg`.
  *
  * The Shell's state is the only one inside it: the Topbar's
@@ -250,7 +265,7 @@ type ShellProps = {
  * value left on them can't freeze a toggle. Their `onCollapsedChange` still
  * fires when their own button is pressed.
  */
-declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onCollapsedChange, collapseControl, defaultSidebarOpen, sidebarOpen: controlledOpen, onSidebarOpenChange, className, }: ShellProps) => react.JSX.Element;
+declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onCollapsedChange, collapseControl, container, defaultSidebarOpen, sidebarOpen: controlledOpen, onSidebarOpenChange, className, }: ShellProps) => react.JSX.Element;
 
 type TopbarProps = {
     /** Current page title (≠ site name — that lives in `Sidebar.Brand`). */
@@ -280,16 +295,16 @@ type TopbarProps = {
      * it always shows. Keep it compact: it shares the bar with the hamburger and the actions.
      */
     brand?: ReactNode;
-    /** Extra slot rendered between the hamburger and the page title. */
-    leftActions?: ReactNode;
+    /** Extra slot rendered between the hamburger and the page title (at the start of the bar). */
+    startActions?: ReactNode;
     /** Center area — typically search, breadcrumb, or empty. */
     center?: ReactNode;
-    /** Right-aligned actions — theme switcher, notifications, avatar… */
-    rightActions?: ReactNode;
+    /** Actions at the end of the bar — theme switcher, notifications, avatar… */
+    endActions?: ReactNode;
     /**
      * `Menu.Item`s (or `Menu.Group`s) for the actions that do not fit a phone. Below `sm` the
-     * Topbar shows a "More" menu with them, before `rightActions`; from `sm` up the menu is gone.
-     * Hide the matching actions of `rightActions` below `sm` (`max-sm:hidden`) and keep there only
+     * Topbar shows a "More" menu with them, before `endActions`; from `sm` up the menu is gone.
+     * Hide the matching actions of `endActions` below `sm` (`max-sm:hidden`) and keep there only
      * what must stay in reach, such as the profile menu.
      */
     moreActions?: ReactNode;
@@ -299,7 +314,7 @@ type TopbarProps = {
 /**
  * Topbar — application header bar.
  *
- * Layout: [toggle] [brand] [leftActions] [pageTitle] [center] [rightActions]
+ * Layout: [toggle] [brand] [startActions] [pageTitle] [center] [endActions]
  *
  * The site brand belongs in `<Sidebar.Brand />`; the `brand` prop repeats the logo here while
  * the sidebar is off screen (below `lg` in a Shell). Otherwise the topbar carries only
@@ -310,7 +325,7 @@ type TopbarProps = {
  * Height: 72px. Background: `var(--color-bg-panel)` with a 500ms
  * background-color transition (eases the dark/light toggle).
  */
-declare const Topbar: ({ pageTitle, as: TitleTag, sidebarCollapsed, onCollapsedChange, brand, leftActions, center, rightActions, moreActions, className, }: TopbarProps) => react.JSX.Element;
+declare const Topbar: ({ pageTitle, as: TitleTag, sidebarCollapsed, onCollapsedChange, brand, startActions, center, endActions, moreActions, className, }: TopbarProps) => react.JSX.Element;
 
 /** How the active row is drawn: a tinted pill (default) or a filled one. */
 type SidebarActiveStyle = 'tint' | 'solid';
@@ -320,9 +335,24 @@ type SidebarActiveStyle = 'tint' | 'solid';
  * room for it).
  */
 type SidebarExpandOnHover = false | 'overlay' | 'push';
+/**
+ * The shape of the sidebar: `default` (expanded, or collapsed to an icon rail) or `compact`, a
+ * fixed narrow rail with the label under each icon.
+ */
+type SidebarVariant = 'default' | 'compact';
 /** Line drawn above the footer and the collapse row. */
 type SidebarFooterDivider = 'full' | 'inset' | 'none';
 type SidebarProps = {
+    /**
+     * `default` (default): expanded, or collapsed to an icon rail. `compact`: a fixed 88 px rail
+     * with the label under each icon, on at most two lines (the full name shows in a tooltip when
+     * it is cut). A sub-menu opens in a flyout, as in the collapsed rail. It has no collapsed
+     * state (`collapsed`, the Shell's toggles, `expandOnHover` and the bottom button do nothing
+     * there: with a Shell, set `collapseControl="sidebar"` to keep the Topbar free of a hamburger
+     * that would do nothing), and ignores `width`, `maxWidth` and `collapsedWidth`. Below `lg`, in
+     * the Shell's drawer, the sidebar is the default one.
+     */
+    variant?: SidebarVariant;
     /**
      * Whether the sidebar is in collapsed (icons-only) state, when controlled. Not read inside
      * a `Shell`, which owns the state: control it with the Shell's `sidebarCollapsed`.
@@ -390,7 +420,7 @@ type SidebarProps = {
     className?: string;
 };
 /**
- * Sidebar — left-side navigation panel.
+ * Sidebar — navigation panel at the start of the line.
  *
  * Compound component: brand + items + groups + sub-menus + footer slot.
  * Smooth width transition when `collapsed` toggles. The `collapsed` state
@@ -409,7 +439,7 @@ type SidebarProps = {
  * shows the sidebar as a drawer: it then fills the panel, is always expanded, and `Sidebar.Brand`
  * gets a close button.
  */
-declare const SidebarRoot: ({ collapsed: collapsedProp, defaultCollapsed, width, maxWidth, collapsedWidth, children, expandOnHover, footer, footerDivider, activeStyle, onCollapsedChange, className, }: SidebarProps) => react.JSX.Element;
+declare const SidebarRoot: ({ variant, collapsed: collapsedProp, defaultCollapsed, width, maxWidth, collapsedWidth, children, expandOnHover, footer, footerDivider, activeStyle, onCollapsedChange, className, }: SidebarProps) => react.JSX.Element;
 type SidebarBrandProps = {
     /** Logo node — typically a small icon, lucide component, or img. */
     logo?: ReactNode;
@@ -461,7 +491,7 @@ type SidebarItemProps = {
      * also closes the drawer, after this runs.
      */
     onClick?: () => void;
-    /** Optional badge (count, "new"…) shown right of label. Hidden when collapsed. */
+    /** Optional badge (count, "new"…) shown after the label. Hidden when collapsed. */
     badge?: ReactNode;
     /** Override the inherited collapsed state. */
     collapsed?: boolean;
@@ -504,7 +534,7 @@ type SidebarSubMenuProps = {
      * rail the nested rows aren't mounted: pass `active` there to mark the sub-menu.
      */
     active?: boolean;
-    /** Optional badge shown right of label (hidden when collapsed). */
+    /** Optional badge shown after the label (hidden when collapsed). */
     badge?: ReactNode;
     /** Nested items: Sidebar.Item, or another Sidebar.SubMenu for a deeper level. */
     children: ReactNode;
@@ -587,17 +617,6 @@ type SidebarToggleProps = {
  */
 declare const SidebarToggle: ({ variant, collapsed: collapsedProp, onCollapsedChange, controls, className, ref, }: SidebarToggleProps) => react.JSX.Element | null;
 
-/**
- * The meaning a component carries, as a color: the one vocabulary behind every
- * `intent` prop. A component may accept a documented subset (a `Button` takes
- * `brand`, `success`, `warning` and `danger`), but never a synonym: `danger`, not
- * `error` or `crit`; `warning`, not `warn`.
- *
- * `variant` is the other axis: it describes structure or emphasis (`solid`,
- * `outline`, `ghost`), never meaning.
- */
-type Intent = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
-
 type PageHeaderProps = {
     /** Main page title */
     title: string;
@@ -606,25 +625,27 @@ type PageHeaderProps = {
      * (the default) passes `h1` so it keeps exactly one.
      */
     as?: 'h1' | 'h2';
-    /** Optional description shown below title (only when no breadcrumb) */
+    /** Optional description shown below the title, with or without a `breadcrumb`. */
     description?: string;
-    /** Breadcrumb shown below title (replaces description if provided) */
+    /** Breadcrumb shown above the title. */
     breadcrumb?: ReactNode;
     /**
      * Optional meta row shown below the title — typically a `flex gap-x-6` of
      * `<PageHeader.MetaItem icon=...>` children, mirroring the TUI "With meta
-     * and actions" pattern. Renders alongside (below) `breadcrumb` and
-     * `description`.
+     * and actions" pattern. Renders below the title and the `description`.
      */
     meta?: ReactNode;
     /**
-     * Icon in a rounded tile left of the title and description: 48px, 40px below `sm`. It is
+     * Icon in a rounded tile before the title and description: 48px, 40px below `sm`. It is
      * decorative (`aria-hidden`); the title says what the page is.
      */
     icon?: ElementType;
     /** Color of the icon tile, from `INTENT_STYLE`. Default `brand`. Needs `icon`. */
     iconIntent?: Intent;
-    /** Right-aligned actions (buttons, icon buttons, etc.) */
+    /**
+     * Actions at the end of the line (buttons, icon buttons, etc.). Below `sm` they wrap under the
+     * meta, at the start of the line.
+     */
     actions?: ReactNode;
     className?: string;
 };
@@ -784,6 +805,11 @@ type EmptyStateProps = {
     title?: string;
     /** Optional description below title */
     description?: string;
+    /**
+     * Under the description, before the `action`: a short list of steps, a hint. It is start-aligned
+     * and up to 28rem wide, whatever the centering of the rest.
+     */
+    children?: ReactNode;
     /** Optional call-to-action (button, link) */
     action?: ReactNode;
     /**
@@ -805,7 +831,7 @@ type EmptyStateProps = {
  * if there's an action the user can take to populate the list.
  * It is static: nothing announces it, since nothing changed under the user.
  */
-declare const EmptyState: ({ title, description, action, intent, icon, compact, className, }: EmptyStateProps) => react.JSX.Element;
+declare const EmptyState: ({ title, description, children, action, intent, icon, compact, className, }: EmptyStateProps) => react.JSX.Element;
 
 type ErrorStateProps = {
     /** What went wrong. Default: 'Something went wrong.' */
@@ -814,27 +840,34 @@ type ErrorStateProps = {
     description?: string;
     /** Alias of `title`, kept for existing callers. `title` wins when both are set. */
     message?: string;
-    /** Optional retry callback. If set, a "Try again" button appears. */
+    /** Optional retry callback. If set, a retry button appears. */
     onRetry?: () => void;
+    /** Label of the retry button. Default 'Try again'. */
+    retryLabel?: string;
+    /**
+     * A way out that is not a retry ("Back to tickets" on a record that does not exist), next to
+     * the retry button, which comes first. Alone when there is no `onRetry`.
+     */
+    action?: ReactNode;
     /** Tighter spacing, for a card or a table body. */
     compact?: boolean;
     className?: string;
 };
 /**
- * ErrorState — error placeholder with optional retry action.
+ * ErrorState — error placeholder with an optional retry button and an optional `action`.
  *
  * Use when an API call fails or rendering fails inside a section.
  * Pair with `<EmptyState>` when the error is "no data found" rather
  * than a real failure. It is announced to assistive technology (`role="alert"`).
  */
-declare const ErrorState: ({ title, description, message, onRetry, compact, className, }: ErrorStateProps) => react.JSX.Element;
+declare const ErrorState: ({ title, description, message, onRetry, retryLabel, action, compact, className, }: ErrorStateProps) => react.JSX.Element;
 
 type SkProps = {
     /** Tailwind height class — default `h-4`. */
     h?: string;
     /** Tailwind width class — default `w-full`. */
     w?: string;
-    /** Tailwind border-radius class — default `rounded`. */
+    /** Tailwind border-radius class — default `rounded-sm`. */
     round?: string;
     /** Element to render — default `div`; `span` where only phrasing content is allowed (inside a button). */
     as?: 'div' | 'span';
@@ -890,6 +923,10 @@ declare const STATUS_DOT: Record<HealthStatus, string>;
 type StatusBadgeProps = {
     status: HealthStatus;
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Text of the pill, default `status`. It sits in a `<bdi>`: "12 OK" keeps its order in a
+     * right-to-left page.
+     */
     label?: string;
     className?: string;
 };
@@ -919,6 +956,250 @@ type HealthDotProps = {
  */
 declare const HealthDot: ({ status, pulse, label, className }: HealthDotProps) => react.JSX.Element;
 
+type DateTimeValue = Date | number | string;
+/** Presets of `DateTime`'s `format`, each a set of `Intl.DateTimeFormat` options. */
+type DateTimeFormat = 'date' | 'time' | 'datetime' | 'long' | 'full';
+type CountdownParts = {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+type CountdownUnit = keyof CountdownParts;
+
+type RefreshOption = {
+    label: string;
+    ms: number;
+};
+declare const REFRESH_OPTIONS: RefreshOption[];
+/**
+ * Hook that manages auto-refresh state for a page key, persisted to localStorage.
+ * Pass a stable `pageKey` (e.g. "room", "rack", "alerts").
+ */
+declare const useAutoRefresh: (pageKey: string, onRefresh: () => void | Promise<void>) => {
+    autoRefreshMs: number;
+    onIntervalChange: (ms: number) => void;
+};
+type RefreshButtonProps = {
+    refreshing?: boolean;
+    autoRefreshMs: number;
+    onRefresh: () => void | Promise<void>;
+    onIntervalChange: (ms: number) => void;
+    options?: RefreshOption[];
+    className?: string;
+};
+declare const RefreshButton: ({ refreshing, autoRefreshMs, onRefresh, onIntervalChange, options, className, }: RefreshButtonProps) => react.JSX.Element;
+
+/**
+ * One health check: a named probe and its last result.
+ *
+ * `latency` is in milliseconds. `checkedAt` is a `Date`, a timestamp in milliseconds or an
+ * ISO 8601 string. `output` is the raw text of the probe, shown in a code block when a row is
+ * expanded.
+ */
+type HealthCheck = {
+    id: string;
+    name: string;
+    status: HealthStatus;
+    message?: string;
+    /** What the check probes: a URL, a DSN, a host. */
+    target?: string;
+    latency?: number;
+    checkedAt?: DateTimeValue;
+    output?: string;
+};
+/**
+ * A named set of checks. A group nests: `groups` holds the groups below it, one level per
+ * dependency of a service for instance. Its status is never stored, it is the worst status
+ * of everything under it (`groupWorst`).
+ */
+type HealthCheckGroup = {
+    id: string;
+    name: string;
+    checks?: HealthCheck[];
+    groups?: HealthCheckGroup[];
+};
+/**
+ * Worst first: CRIT, then WARN, then UNKNOWN (a check nobody could run is worse than one that
+ * passes), then INFO, then OK. Every health component sorts and rolls up by this one list.
+ */
+declare const SEVERITY_ORDER: readonly HealthStatus[];
+/** Comparator for `Array.prototype.sort`: negative when `a` is worse than `b`. */
+declare const compareSeverity: (a: HealthStatus, b: HealthStatus) => number;
+/** The worst of some statuses. With none to look at, nothing is known: `UNKNOWN`. */
+declare const worstStatus: (statuses: Iterable<HealthStatus>) => HealthStatus;
+/** The reading of each status, for badges, cell names and legends. */
+declare const STATUS_NAME: Record<HealthStatus, string>;
+/** Every check under `groups`, depth first, in the order they were given. */
+declare const flattenChecks: (groups: readonly HealthCheckGroup[]) => HealthCheck[];
+/** The worst status of the checks under a group, nested groups included. */
+declare const groupWorst: (group: HealthCheckGroup) => HealthStatus;
+
+type HealthSummaryProps = {
+    /** The checks to roll up: the worst status among them is the summary's. */
+    checks: HealthCheck[];
+    /**
+     * Forces the status the summary shows, when the host weighs the checks differently (a
+     * warning on a backup job is not an outage). The counts still come from `checks`.
+     */
+    status?: HealthStatus;
+    /**
+     * The headline of each status. Defaults: "All systems operational" (OK), "Degraded
+     * performance" (WARN), "Major outage" (CRIT), "Status unknown" (UNKNOWN) and "Operational,
+     * with notices" (INFO). Give only the ones to change.
+     */
+    labels?: Partial<Record<HealthStatus, string>>;
+    /**
+     * `banner` is full width and tinted by the status, with the counts as badges. `compact` is
+     * one line, for a card or a topbar. Default `banner`.
+     */
+    variant?: 'banner' | 'compact';
+    /** When the checks last ran. Default: the most recent `checkedAt` among `checks`. */
+    checkedAt?: DateTimeValue;
+    /**
+     * When the last data came in, for a source that has stopped answering. The banner takes the
+     * neutral surface, its badges turn grey, a "Stale · 4 minutes ago" tag joins it and the headline
+     * is read as stale. The status shown stays the last known one. Default: fresh.
+     */
+    stale?: DateTimeValue;
+    /** Draws a `RefreshButton` with these props. Without it there is no refresh action. */
+    refresh?: RefreshButtonProps;
+    /**
+     * Accessible name of the group. Default "System health". It is a group, not a landmark, so
+     * several summaries on a page need no distinct name.
+     */
+    ariaLabel?: string;
+    /** Freezes the "last check" text at this moment. For stories and tests. */
+    now?: Date | number;
+    className?: string;
+};
+/**
+ * HealthSummary — the roll-up of a set of checks, for the top of a status page.
+ *
+ * The worst status among `checks` wins (severity order: critical, warning, unknown, info,
+ * OK) and `status` overrides it. It shows the counts per status, when the checks last ran
+ * and, with `refresh`, a refresh button. The headline is a live region: a change of status is
+ * announced.
+ */
+declare const HealthSummary: ({ checks, status, labels, variant, checkedAt, stale, refresh, ariaLabel, now, className, }: HealthSummaryProps) => react.JSX.Element;
+
+type HealthCheckListProps = {
+    /** Checks outside any group, drawn first. */
+    checks?: HealthCheck[];
+    /**
+     * Groups of checks: database, cache, queue, external APIs. A group nests, so a dependency
+     * tree is groups inside groups, one level per dependency. Each header shows the worst status
+     * under it and the counts, and collapses.
+     */
+    groups?: HealthCheckGroup[];
+    /**
+     * `severity` puts the failing checks first, and the group with the worst check first,
+     * inside every level (critical, warning, unknown, info, OK; equals keep their order).
+     * `none` keeps the order given. Default `none`.
+     */
+    sort?: 'none' | 'severity';
+    /** `list` is one row per check, `grid` one small card per check, for a wall screen. Default `list`. */
+    variant?: 'list' | 'grid';
+    /** Ids of the collapsed groups. Controlled. */
+    collapsedGroups?: string[];
+    /** Ids of the groups collapsed at first, when uncontrolled. Default none: every group is open. */
+    defaultCollapsedGroups?: string[];
+    /** Called with the ids of the collapsed groups, once one is opened or closed. */
+    onCollapsedGroupsChange?: (collapsedGroups: string[]) => void;
+    /** Accessible name of the list. */
+    ariaLabel?: string;
+    /** Freezes the "last check" texts at this moment. For stories and tests. */
+    now?: Date | number;
+    className?: string;
+};
+/**
+ * HealthCheckList — the checks of a system, as rows or as cards, in groups that collapse.
+ *
+ * Every row says its status in words (a badge), then the name, target, message, latency and
+ * time of the last check. A check with an `output` has a toggle on its name that shows the raw
+ * output in a code block. `sort="severity"` puts the failing checks, and the groups holding
+ * them, first. Groups nest: use one level per dependency to read a dependency tree.
+ */
+declare const HealthCheckList: ({ checks, groups, sort, variant, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ariaLabel, now, className, }: HealthCheckListProps) => react.JSX.Element;
+
+/** What one cell of the matrix says: the status of a service in an environment, a node, a region. */
+type HealthMatrixCell = {
+    status: HealthStatus;
+    /** Why the status is what it is, shown in the cell's popover. */
+    message?: string;
+    /** Milliseconds. */
+    latency?: number;
+    /** When the cell was last checked. */
+    checkedAt?: Date | number | string;
+    /** More for the popover: a link to the checks, an owner, a runbook. */
+    detail?: ReactNode;
+};
+/** A column: an environment, a node, a region. */
+type HealthMatrixColumn = {
+    id: string;
+    label: string;
+};
+/**
+ * A row: a service. `cells` is keyed by column id; a column with no entry is a service that does
+ * not run there, drawn as an empty cell.
+ */
+type HealthMatrixRow = {
+    id: string;
+    label: string;
+    cells: Record<string, HealthMatrixCell | undefined>;
+};
+type HealthMatrixProps = {
+    columns: HealthMatrixColumn[];
+    rows: HealthMatrixRow[];
+    /**
+     * `dots` is the dense variant: one mark per cell, which carries a shape as well as a colour
+     * (OK a filled circle, warning a diamond, critical a square, unknown a hollow ring, info a
+     * triangle). `pills` writes the status in each cell. Default `dots`.
+     */
+    variant?: 'dots' | 'pills';
+    /** Accessible name of the grid. */
+    ariaLabel: string;
+    /** A visible title, above the grid. */
+    title?: ReactNode;
+    /**
+     * The text of the first header cell, above the row names. Default "Service"; a cluster says
+     * "Rack".
+     */
+    rowHeader?: ReactNode;
+    /**
+     * Lists the rows holding a warning or a critical cell in a "Needs attention" strip above the
+     * grid, worst first, each with its counts in words. Picking one scrolls its row into view (in
+     * the grid's own box when `maxHeight` is set) and moves the focus to its worst cell. The strip
+     * scrolls sideways on a phone. Default `false`; no strip when no row has a problem.
+     */
+    attentionStrip?: boolean;
+    /**
+     * When the last data came in, for a source that has stopped answering. The header says "Stale
+     * · 4 minutes ago", the marks turn grey and each cell is named as stale. The statuses stay
+     * those of the last data. Default: fresh.
+     */
+    stale?: DateTimeValue;
+    /** Shows the legend of the shapes. Default: with `dots`, not with `pills`. */
+    legend?: boolean;
+    /**
+     * Height past which the grid scrolls vertically, its column headers staying in view. The grid
+     * always scrolls sideways in its own box when the columns do not fit.
+     */
+    maxHeight?: number | string;
+    /** Freezes the "checked" texts of the popovers at this moment. For stories and tests. */
+    now?: Date | number;
+    className?: string;
+};
+/**
+ * HealthMatrix — one status cell per service and per environment, node or region.
+ *
+ * A `role="grid"` with sticky row and column headers and one tab stop: the arrow keys move
+ * between cells, Home and End to the ends of the row. A cell opens its detail in a popover with
+ * Enter, Space or a click; Escape closes it and the focus returns to the cell. At a narrow width
+ * the grid scrolls in its own box.
+ */
+declare const HealthMatrix: ({ columns, rows, variant, ariaLabel, title, rowHeader, attentionStrip, stale, legend, maxHeight, now, className, }: HealthMatrixProps) => react.JSX.Element;
+
 type HealthBadgeProps = {
     status: HealthStatus;
     /** Custom label override (default: the status text) */
@@ -933,6 +1214,241 @@ type HealthBadgeProps = {
  */
 declare const HealthBadge: ({ status, label, className }: HealthBadgeProps) => react.JSX.Element;
 
+/**
+ * What one check of a monitor found. `maintenance` is a planned window, `pending` a check
+ * that has not run or has not answered yet.
+ */
+type BeatStatus = 'up' | 'down' | 'degraded' | 'maintenance' | 'pending';
+/**
+ * One check of a monitor: when it ran and what it found. `latency` is in milliseconds.
+ * `time` is a `Date`, a timestamp in milliseconds or an ISO 8601 string. `message` says why
+ * (a timeout, an HTTP status), and shows in the beat's tooltip.
+ */
+type Beat = {
+    time: DateTimeValue;
+    status: BeatStatus;
+    latency?: number;
+    message?: string;
+};
+/**
+ * One day of history. `uptime` is a share from 0 to 1 (0.9995 is 99.95 %), or `null` for a day
+ * with no data (the monitor did not exist yet, or was paused). `date` is a `Date`, a timestamp or
+ * an ISO string; a bare `YYYY-MM-DD` names that calendar day whatever the time zone of the
+ * reader. `incidents` is how many incidents the day had.
+ */
+type UptimeDay = {
+    date: DateTimeValue;
+    uptime: number | null;
+    incidents?: number;
+};
+/**
+ * The limits that colour an uptime, as shares from 0 to 1. An uptime of `good` or more is
+ * green, one from `warning` up to `good` is amber, one below `warning` is red. Defaults: 0.999
+ * (99.9 %) and 0.99 (99 %).
+ */
+type UptimeThresholds = {
+    good: number;
+    warning: number;
+};
+/** What a threshold makes of an uptime. `none` is a day with no data. */
+type UptimeLevel = 'good' | 'warning' | 'bad' | 'none';
+/** The statuses of a beat, worst last, as the legend lists them. */
+declare const BEAT_STATUSES: readonly BeatStatus[];
+/** The reading of each status, for names, tooltips and legends. */
+declare const BEAT_NAME: Record<BeatStatus, string>;
+
+type HeartbeatBarVariant = 'bars' | 'blocks' | 'dots';
+type HeartbeatBarSize = 'md' | 'sm';
+type HeartbeatBarProps = {
+    /** The checks, oldest first: the newest is the last, at the end of the bar. */
+    beats: Beat[];
+    /**
+     * `bars` (default) are thin rounded bars, `blocks` square cells and `dots` dots. A `down` beat
+     * differs by shape as well as colour: a taller bar, a block crossed by a diagonal, a square dot.
+     */
+    variant?: HeartbeatBarVariant;
+    /** `md` is 32px high (default), `sm` is 24px, the height inside a `MonitorRow`. */
+    size?: HeartbeatBarSize;
+    /**
+     * Accessible name of the bar. Default: what it shows, "Last 60 checks: 54 up, 3 down", written
+     * again as the bar is resized.
+     */
+    ariaLabel?: string;
+    /** Draws the key of the statuses under the bar. Default `false`. */
+    legend?: boolean;
+    className?: string;
+};
+/**
+ * HeartbeatBar — one mark per check of a monitor, the newest at the end.
+ *
+ * It holds as many beats as its width allows and drops the oldest, so a narrow screen still shows
+ * the latest history; give it the width of its container and it adapts. The bar is one tab stop
+ * (the newest beat): the arrow keys, Home and End move between beats, and hovering or focusing a
+ * beat shows its time, status, latency and message. Each beat is named in words (status, time,
+ * latency, message), so no status rests on its colour alone.
+ */
+declare const HeartbeatBar: ({ beats, variant, size, ariaLabel, legend, className, }: HeartbeatBarProps) => react.JSX.Element;
+
+type UptimeBarsPeriod = 30 | 60 | 90;
+type UptimeBarsProps = {
+    /** One entry per day, oldest first: the last is today. */
+    days: UptimeDay[];
+    /** How many days to show, the latest ones: 30, 60 or 90 (default). */
+    period?: UptimeBarsPeriod;
+    /** Overrides the limits that colour a day. Default: 99.9 % and up green, 99 % and up amber, below red. */
+    thresholds?: Partial<UptimeThresholds>;
+    /** Shown at the start of the header, above the bars: the name of the service. */
+    title?: ReactNode;
+    /**
+     * The uptime written in the header, 0 to 1. Default: the mean of the days shown that have
+     * data. Set it when the host has the exact figure for the period.
+     */
+    uptime?: number | null;
+    /** Draws the key of the thresholds under the bars. Default `false`. */
+    legend?: boolean;
+    /**
+     * The compact form for a card: lower bars, with no header, captions or legend. The days stay
+     * named and reachable.
+     */
+    compact?: boolean;
+    /** Accessible name of the bars. Default: "Daily uptime over N days". */
+    ariaLabel?: string;
+    className?: string;
+};
+/**
+ * UptimeBars — one bar per day over 30, 60 or 90 days, the block of a public status page.
+ *
+ * Each day is coloured by its uptime against the thresholds (green, amber, red), and grey without
+ * data. The captions read "90 days ago" and "Today", and the header gives the uptime of the whole
+ * period. When the width cannot hold every day, the oldest days are dropped, and the caption and
+ * the uptime follow: they always describe what is drawn. The bars are one tab stop (today): the
+ * arrow keys, Home and End move between days, and hovering or focusing a day shows its date, uptime
+ * and incidents. Every day is named in words, and `legend` writes the thresholds.
+ */
+declare const UptimeBars: ({ days, period, thresholds, title, uptime, legend, compact, ariaLabel, className, }: UptimeBarsProps) => react.JSX.Element;
+
+/** The uptime of one period: "24 hours", "30 days". */
+type UptimePeriod = {
+    /** What the period is called: "24 hours", "7 days", "1 year". */
+    label: string;
+    /** 0 to 1, or `null` when there is no data for the period. */
+    uptime: number | null;
+    /**
+     * How long the period is, in milliseconds. With it the `card` says the downtime the uptime
+     * stands for ("39 min down").
+     */
+    duration?: number;
+};
+/** The certificate of the monitored host. */
+type UptimeCertificate = {
+    /** Days until it expires; a negative number is an expired certificate. */
+    daysLeft: number;
+    /**
+     * Days left under which the figure is a warning. Default 14. It is a warning for fewer days
+     * than this, never at it.
+     */
+    warnBelow?: number;
+};
+type UptimeStatProps = {
+    /**
+     * `row` (default) puts the figures side by side, for a monitor's header: the uptime of each
+     * period, the average response time and the certificate. `card` is one figure for a dashboard
+     * tile: the first of `periods`, and the downtime it stands for.
+     */
+    variant?: 'row' | 'card';
+    /** The periods, in the order shown. The `card` shows the first one only. */
+    periods: UptimePeriod[];
+    /** Overrides the limits that colour an uptime. Default: 99.9 % and up green, 99 % and up amber, below red. */
+    thresholds?: Partial<UptimeThresholds>;
+    /** Average response time over the period, in milliseconds. `row` only. */
+    responseTime?: number;
+    /** The certificate and its expiry. `row` only. */
+    certificate?: UptimeCertificate;
+    /** What the `card` is about: "API uptime, 30 days". Default: "Uptime, " and the period. */
+    label?: ReactNode;
+    /** The days of the `card`, drawn as compact bars under the figure. */
+    days?: UptimeDay[];
+    /** Accessible name of the `row`. Default "Uptime". */
+    ariaLabel?: string;
+    className?: string;
+};
+/**
+ * UptimeStat — the uptime figures of a monitor.
+ *
+ * `row` lines up the uptime of several periods (24 h, 7 d, 30 d, 1 y: the host names them), each
+ * coloured by the thresholds, then the average response time and the certificate expiry, which
+ * turns to a warning under `certificate.warnBelow` days. `card` is one period's figure and the
+ * downtime it stands for, with the days as compact bars when given.
+ */
+declare const UptimeStat: ({ variant, periods, thresholds, responseTime, certificate, label, days, ariaLabel, className, }: UptimeStatProps) => react.JSX.Element;
+
+/** What a monitor is doing: the status of its last check, or paused. */
+type MonitorState = BeatStatus | 'paused';
+type MonitorRowProps = {
+    /** The monitor's name. */
+    name: string;
+    /** What it checks: `HTTP`, `TCP`, `DNS`, `ping`, `keyword`… a free string, shown as a tag. */
+    type?: string;
+    /** Its recent checks, oldest first. Drawn as a `HeartbeatBar` of 24px. */
+    beats: Beat[];
+    /**
+     * The monitor's state. Default: the status of the last beat, `pending` without beats. `paused`
+     * is set by `paused`, which wins.
+     */
+    status?: BeatStatus;
+    /**
+     * The monitor is paused: it is not checked. The status turns grey, the uptime reads "Paused" and
+     * the row is dimmed. The beats it has stay shown.
+     */
+    paused?: boolean;
+    /** Uptime over the last 24 hours, 0 to 1. `null` or unset: no data. */
+    uptime?: number | null;
+    /** The current response time, in milliseconds. Default: the latency of the last beat. */
+    latency?: number;
+    /** Overrides the limits that colour the uptime. Default: 99.9 % and up green, 99 % and up amber, below red. */
+    thresholds?: Partial<UptimeThresholds>;
+    /**
+     * When the last data came in, for a source that has stopped answering. The state chip, the
+     * beats and the uptime turn grey, a "Stale · 4 minutes ago" tag sits under the name and the
+     * state is read as stale. The state shown stays the last known one. Default: fresh.
+     */
+    stale?: DateTimeValue;
+    /** Freezes the "stale" tag at this moment. For stories and tests. */
+    now?: Date | number;
+    /** Makes the name a link, to the monitor's page. */
+    href?: string;
+    /**
+     * `row` (default) is one line in a list, the host drawing the list and its separators; it
+     * stacks on a narrow screen. `card` is a tile for a grid of monitors.
+     */
+    variant?: 'row' | 'card';
+    className?: string;
+};
+/**
+ * MonitorRow — one monitor: its state, name and type, its recent checks, its uptime over 24 hours
+ * and its current response time.
+ *
+ * `row` is a line of a list (the host draws the list), `card` a tile of a grid. The state is a
+ * chip named in words ("Down"); the beats are a 24px `HeartbeatBar` and keep its keyboard model
+ * and tooltips. A paused monitor says "Paused" where its uptime was.
+ */
+declare const MonitorRow: ({ name, type, beats, status, paused, uptime, latency, thresholds, stale, now, href, variant, className, }: MonitorRowProps) => react.JSX.Element;
+
+/** 99.9 % and up is green, 99 % to 99.9 % amber, below 99 % red. */
+declare const DEFAULT_THRESHOLDS: UptimeThresholds;
+/**
+ * The thresholds a component uses: the defaults, with the limits the host gave. A `warning`
+ * limit above `good` would leave no amber range: it is lowered to `good`.
+ */
+declare const resolveThresholds: (given?: Partial<UptimeThresholds>) => UptimeThresholds;
+/** The level of an uptime. `null` (no data) and `NaN` are `none`. */
+declare const uptimeLevel: (uptime: number | null | undefined, thresholds?: Partial<UptimeThresholds>) => UptimeLevel;
+/**
+ * "99.95%", "100%", "97.4%": at most two decimals, none when they are zero. The value is cut,
+ * never rounded up, so 99.999 % never reads "100%": only a perfect uptime does.
+ */
+declare const formatUptime: (uptime: number) => string;
+
 type StackedListProps = Omit<ComponentPropsWithRef<'ul'>, 'children' | 'title'> & {
     children: ReactNode;
     /**
@@ -945,12 +1461,12 @@ type StackedListProps = Omit<ComponentPropsWithRef<'ul'>, 'children' | 'title'>
     title?: ReactNode;
     /** Card header text under the title. Only with `card`. */
     description?: ReactNode;
-    /** Card header action at the right of the title (a link, a button). Only with `card`. */
+    /** Card header action at the end of the title row (a link, a button). Only with `card`. */
     action?: ReactNode;
 };
 /**
- * Divided list of rows: avatar, title and subtitle on the left; a meta column
- * (hidden on phones), a trailing slot and a chevron on the right. An item with
+ * Divided list of rows: avatar, title and subtitle at the start; a meta column
+ * (hidden on phones), a trailing slot and a chevron at the end. An item with
  * `href` is a link across the whole row.
  *
  * Items also take a `badge` and a line of `details` for content rows (issues,
@@ -976,7 +1492,7 @@ type StackedListItemProps = Omit<ComponentPropsWithRef<'li'>, 'title'> & {
     title: ReactNode;
     /** Secondary text below the title (truncated by default). */
     subtitle?: ReactNode;
-    /** Right-aligned meta column, hidden on mobile (mirrors TUI `hidden sm:flex`). */
+    /** End-aligned meta column, hidden on mobile (mirrors TUI `hidden sm:flex`). */
     meta?: ReactNode;
     /** Trailing slot rendered after `meta` (icon, actions menu, badge…). */
     trailing?: ReactNode;
@@ -996,11 +1512,11 @@ type StackedListItemProps = Omit<ComponentPropsWithRef<'li'>, 'title'> & {
     badge?: ReactNode;
     /**
      * Inline items under the title (author, date, owner…) separated by a dot. Each item stays
-     * on one line; the last one truncates when the row runs out of room. Not the right-hand
-     * `meta` column.
+     * on one line; the last one truncates when the row runs out of room. Not the `meta`
+     * column.
      */
     details?: ReactNode[];
-    /** Timestamp at the right of the title, for a narrow column. */
+    /** Timestamp at the end of the title row, for a narrow column. */
     timestamp?: ReactNode;
     /** Body text under the title, clamped to two lines. Replaces `subtitle`. */
     description?: ReactNode;
@@ -1052,7 +1568,7 @@ type ActivityFeedItemProps = ComponentPropsWithRef<'li'> & {
     }>;
     /** Color of the circle indicator. Default `neutral`. */
     intent?: ActivityFeedIntent;
-    /** Right-aligned timestamp (text or `<time>`). */
+    /** End-aligned timestamp (text or `<time>`). */
     timestamp?: ReactNode;
     /** Main content (paragraph). */
     children: ReactNode;
@@ -1098,7 +1614,7 @@ type GridListFooterProps = ComponentPropsWithRef<'div'>;
  */
 declare function GridListFooter({ className, children, ref, ...rest }: GridListFooterProps): react.JSX.Element;
 type GridListFooterActionProps = ComponentPropsWithRef<'a'> & {
-    /** Index in the footer row — only used to apply `-ml-px` on cells after the first. */
+    /** Index in the footer row — only used to apply `-ms-px` on cells after the first. */
     index?: number;
 };
 /** One link of the footer row. The first and last cells round the card's bottom corners. */
@@ -1212,6 +1728,34 @@ type NavbarProps = ComponentPropsWithRef<'nav'> & {
     children: ReactNode;
 };
 declare function NavbarRoot({ theme, maxWidth, heightClassName, className, children, ref, ...rest }: NavbarProps): react.JSX.Element;
+type NavbarMenuProps = {
+    /** Text of the trigger. It also names the group in the "More" menu when the bar is full. */
+    label: string;
+    /**
+     * Marks the group as holding the current page, the way `Navbar.Item`'s `active` marks a page.
+     * Mark the current link itself with `aria-current="page"`.
+     */
+    active?: boolean;
+    /** Defaults to the theme of the parent `<Navbar>`. */
+    theme?: NavbarTheme;
+    /** Open state, when controlled. */
+    open?: boolean;
+    /** Initial open state, when uncontrolled. Default `false`. */
+    defaultOpen?: boolean;
+    /** Called with the open state to move to. */
+    onOpenChange?: (open: boolean) => void;
+    /** Edge of the trigger the panel lines up with. Default `start`. */
+    align?: 'start' | 'end';
+    /** Tailwind width class of the panel. Default `w-56` (224px). */
+    width?: string;
+    className?: string;
+    /** The links: `Menu.Item` with an `href`, `Menu.Group`, `Menu.Separator`. */
+    children: ReactNode;
+};
+type NavbarItemsProps = HTMLAttributes<HTMLDivElement> & {
+    /** Label of the menu that takes the items that do not fit. Default `More`. */
+    moreLabel?: string;
+};
 type NavbarItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     active?: boolean;
     /** Defaults to the theme of the parent `<Navbar>`. */
@@ -1223,8 +1767,9 @@ type NavbarMobileMenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 declare const Navbar: typeof NavbarRoot & {
     Brand: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
-    Items: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    Items: ({ className, children, moreLabel, ...rest }: NavbarItemsProps) => react.JSX.Element;
     Item: ({ active, theme, className, children, ...rest }: NavbarItemProps) => react.JSX.Element;
+    Menu: ({ label, active, theme, open, defaultOpen, onOpenChange, align, width, className, children, }: NavbarMenuProps) => react.JSX.Element;
     Actions: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
     MobileMenuButton: ({ theme, className, children, ...rest }: NavbarMobileMenuButtonProps) => react.JSX.Element;
 };
@@ -1327,7 +1872,9 @@ type RecordPagerProps = {
     /**
      * Keyboard shortcuts, off unless given: a default key would be taken from apps that never asked
      * for one. They listen on the document and do nothing while a field is being typed in. List
-     * them for the user in a `HelpOverlay`; the pager doesn't register itself there.
+     * them for the user in a `HelpOverlay`; the pager doesn't register itself there. The keys are
+     * literal and do not follow the reading direction: where the page reads right to left, give
+     * Previous the arrow that points to the right if you want one.
      */
     hotkeys?: RecordPagerHotkeys;
     /** Names the landmark. Default `{Noun} navigation`; two pagers on one page need distinct names. */
@@ -1443,14 +1990,21 @@ type StickyScrollNavProps = {
      * above. A jump lands the section below the nav, so below that header too.
      */
     topOffset?: number;
+    /**
+     * Name of the jump menu shown below `sm`, in place of the row of buttons. Default
+     * 'Jump to section'; a translated app passes its own wording.
+     */
+    jumpLabel?: string;
     className?: string;
 };
 /**
  * StickyScrollNav — sticky horizontal nav row that scrolls to in-page
  * sections by id, each landing just below the nav. Useful for long template
- * gallery pages and docs.
+ * gallery pages, docs and settings pages. Below `sm` the row folds into a jump
+ * menu (a native select) that shows the section being read and moves to the
+ * one picked.
  */
-declare const StickyScrollNav: ({ sections, onNavigate, topOffset, className, }: StickyScrollNavProps) => react.JSX.Element;
+declare const StickyScrollNav: ({ sections, onNavigate, topOffset, jumpLabel, className, }: StickyScrollNavProps) => react.JSX.Element;
 
 /**
  * Emphasis: how loud the button is. Its color is the `intent`. `link` is the quietest: an action
@@ -1486,7 +2040,8 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSize;
     shape?: ButtonShape;
     icon?: ElementType;
-    iconPosition?: 'left' | 'right';
+    /** `start` leads the label, `end` follows it. Both follow the reading direction. Default `start`. */
+    iconPosition?: 'start' | 'end';
     loading?: boolean;
     children?: ReactNode;
     /** Ref to the `<button>`. */
@@ -1513,7 +2068,7 @@ type CardProps = {
     edgeToEdgeMobile?: boolean;
     /**
      * `vertical` (default) stacks the parts. `horizontal` puts a `Card.Image` in a fixed-width
-     * column on the left and the rest on the right from the `sm` breakpoint, and stacks them
+     * column at the start and the rest after it from the `sm` breakpoint, and stacks them
      * below it.
      */
     orientation?: CardOrientation;
@@ -1561,7 +2116,8 @@ type BadgeProps = {
     appearance?: BadgeAppearance;
     /** Optional Lucide icon. */
     icon?: ElementType;
-    iconPosition?: 'left' | 'right';
+    /** `start` leads the label, `end` follows it. Both follow the reading direction. Default `start`. */
+    iconPosition?: 'start' | 'end';
     className?: string;
 };
 declare const Badge: ({ children, intent, size, shape, appearance, icon: Icon, iconPosition, className, }: BadgeProps) => react.JSX.Element;
@@ -1628,7 +2184,7 @@ type AvatarProps = {
      */
     intent?: Intent;
     /**
-     * Presence dot at the bottom-right. The status is also text: it joins the accessible name
+     * Presence dot at the bottom-right (bottom-left in right to left). The status is also text: it joins the accessible name
      * ("Ana Costa, online").
      */
     status?: AvatarStatus;
@@ -1675,7 +2231,8 @@ type AvatarGroupProps = {
  */
 declare const AvatarGroup: ({ children, avatars, max, size, spacing, "aria-label": ariaLabel, onOverflowClick, ref, renderOverflow, className, }: AvatarGroupProps) => react.JSX.Element;
 
-type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/** `start` and `end` are the sides of the line: `end` is the right of the trigger, its left under `dir="rtl"`. */
+type TooltipPosition = 'top' | 'bottom' | 'start' | 'end';
 /** Surface of the tooltip. */
 type TooltipVariant = 'dark' | 'white';
 /** Meaning of the tooltip: colors it over its surface. */
@@ -1743,7 +2300,8 @@ type DropdownProps = {
     defaultValue?: string;
     onChange?: (value: string) => void;
     placeholder?: string;
-    align?: 'left' | 'right';
+    /** Edge of the trigger the menu lines up with: where the text starts or ends. Default `start`. */
+    align?: 'start' | 'end';
     disabled?: boolean;
     className?: string;
     /** Open state of the menu, when controlled. */
@@ -1797,8 +2355,8 @@ type ModalAlertProps = {
     /**
      * Visual layout. `centered` (default): icon + title + buttons stacked
      * vertically and centered (TUI "Centered with single action").
-     * `horizontal`: icon to the left of the title/message, with buttons in
-     * a separate gray footer right-aligned (TUI "Simple with gray footer").
+     * `horizontal`: icon before the title/message, with buttons in
+     * a separate gray footer aligned to the end (TUI "Simple with gray footer").
      */
     layout?: ModalAlertLayout;
     /**
@@ -1821,20 +2379,22 @@ declare const Modal: ((props: ModalProps) => react.JSX.Element) & {
     Alert: ({ open, onClose, intent, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, loading, layout, fullWidthAction, }: ModalAlertProps) => react.JSX.Element;
 };
 
-type DrawerSide = 'left' | 'right' | 'bottom';
+/** `start` and `end` are the edges of the line: the left and the right, swapped under `dir="rtl"`. */
+type DrawerSide = 'start' | 'end' | 'bottom';
 type DrawerSize = 'sm' | 'md' | 'lg';
 type DrawerProps = {
     open: boolean;
     onClose: () => void;
     /**
-     * The edge the panel slides in from. `left` and `right` give a full-height panel, `bottom` a
+     * The edge the panel slides in from. `start` and `end` give a full-height panel, on the edge
+     * the text starts at and ends at: left and right, swapped under `dir="rtl"`. `bottom` gives a
      * sheet: full width, as tall as its content up to 85% of the viewport (`Drawer.Body` scrolls
      * past that), rounded on top, with a grab `handle`, and the scrim stays visible above it. All
      * three are the same dialog, with the same focus trap, Escape and `Drawer.Header`, `Body` and
-     * `Footer`. Default `right`.
+     * `Footer`. Default `end`.
      */
     side?: DrawerSide;
-    /** The width of a `left` or `right` drawer. Ignored on `bottom`, where the content sets the height. Default `md`. */
+    /** The width of a `start` or `end` drawer. Ignored on `bottom`, where the content sets the height. Default `md`. */
     size?: DrawerSize;
     /**
      * Show a grab handle at the top of a bottom sheet: a visual cue that the sheet can be dragged
@@ -1858,12 +2418,12 @@ type DrawerProps = {
      */
     closeOutside?: boolean;
     /**
-     * Let a touch or pen swipe on the panel, toward its edge (left for `side="left"`, right for
-     * `side="right"`, down for `side="bottom"`), close the drawer. The panel follows the finger and
+     * Let a touch or pen swipe on the panel, toward its edge (toward the start of the line for
+     * `side="start"`, the end for `side="end"`, down for `side="bottom"`), close the drawer. The panel follows the finger and
      * never goes past its open position; released past a third of its width (its height for
      * `bottom`), or as a fast flick, it calls `onClose`, otherwise it springs back (without the
      * animation under `prefers-reduced-motion`). A mouse does not swipe. Scrolling inside the panel
-     * is left to the browser: vertical on `left` and `right`; on `bottom`, a `Drawer.Body` that
+     * is left to the browser: vertical on `start` and `end`; on `bottom`, a `Drawer.Body` that
      * scrolls keeps the vertical drag, so the sheet is dragged by its handle, header, footer or a
      * body that fits. Default `false`.
      */
@@ -1925,7 +2485,7 @@ type TabsProps = {
     defaultValue?: string;
     /** Called with the tab to activate. */
     onChange?: (value: string) => void;
-    /** Layout direction. `horizontal` (default) puts the tab list on top; `vertical` puts it on the left. */
+    /** Layout direction. `horizontal` (default) puts the tab list on top; `vertical` puts it at the start of the line. */
     orientation?: TabsOrientation;
     /**
      * Visual style. `underline` (default) marks the active tab with an accent
@@ -1960,22 +2520,6 @@ declare const Tabs: (({ value: valueProp, defaultValue, onChange: onChangeProp,
     }) => react.JSX.Element | null;
 };
 
-type CodeBlockProps = {
-    code: string;
-    language?: string;
-    /**
-     * Turns `code` into highlighted nodes, rendered inside the block's `<code>`.
-     * Cosmos ships no highlighter: plug one in (the story wires Shiki to the
-     * `--color-code-*` theme tokens). Without it the code is plain text. The
-     * copy button always copies `code`.
-     */
-    highlight?: (code: string, language?: string) => ReactNode;
-    /** Show the copy button (top-right, hover-revealed). Default `true`. */
-    showCopy?: boolean;
-    className?: string;
-};
-declare const CodeBlock: ({ code, language, highlight, showCopy, className, }: CodeBlockProps) => react.JSX.Element;
-
 /** Emphasis: a bordered `outline` or a filled `primary`. Its color is the `intent`. */
 type PageActionVariant = 'outline' | 'primary';
 /** Meaning: the accent or a destructive action. */
@@ -2005,29 +2549,6 @@ type PageActionIconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, '
 };
 declare const PageActionIconButton: ({ icon: Icon, variant, intent, className, type, ref, ...rest }: PageActionIconButtonProps) => react.JSX.Element;
 
-type RefreshOption = {
-    label: string;
-    ms: number;
-};
-declare const REFRESH_OPTIONS: RefreshOption[];
-/**
- * Hook that manages auto-refresh state for a page key, persisted to localStorage.
- * Pass a stable `pageKey` (e.g. "room", "rack", "alerts").
- */
-declare const useAutoRefresh: (pageKey: string, onRefresh: () => void | Promise<void>) => {
-    autoRefreshMs: number;
-    onIntervalChange: (ms: number) => void;
-};
-type RefreshButtonProps = {
-    refreshing?: boolean;
-    autoRefreshMs: number;
-    onRefresh: () => void | Promise<void>;
-    onIntervalChange: (ms: number) => void;
-    options?: RefreshOption[];
-    className?: string;
-};
-declare const RefreshButton: ({ refreshing, autoRefreshMs, onRefresh, onIntervalChange, options, className, }: RefreshButtonProps) => react.JSX.Element;
-
 type RowActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: ReactNode;
     hideChevron?: boolean;
@@ -2036,7 +2557,7 @@ type RowActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 /**
  * RowActionButton — compact action button for the right edge of table rows
- * or list items. Defaults to a chevron-right indicator suggesting navigation.
+ * or list items. Defaults to a chevron indicator suggesting navigation, pointing along the reading direction.
  */
 declare const RowActionButton: ({ children, hideChevron, className, type, ref, ...rest }: RowActionButtonProps) => react.JSX.Element;
 
@@ -2094,7 +2615,7 @@ type AlertBannerProps = {
     intent?: AlertBannerIntent;
     /**
      * Surface. `tinted` (default) = a full border and the tinted background. `accent` = the same
-     * background with a 4px edge on the left in the intent color and no other border.
+     * background with a 4px edge at the start of the line in the intent color and no other border.
      */
     appearance?: AlertBannerAppearance;
     /** Bold first line. The icon aligns with it instead of centering on the whole banner. */
@@ -2106,7 +2627,7 @@ type AlertBannerProps = {
      */
     bodyTone?: AlertBannerBodyTone;
     children: ReactNode;
-    /** Right-side slot: a Link or a Button. */
+    /** Slot at the end of the line: a Link or a Button. */
     action?: ReactNode;
     /** Shows a close button that calls this. The host removes the banner. */
     onDismiss?: () => void;
@@ -2201,8 +2722,8 @@ type NotificationsPanelProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Which side of the trigger the panel anchors to. Default `right`. */
-    align?: 'left' | 'right';
+    /** Edge of the trigger the panel lines up with: where the text starts or ends. Default `end`. */
+    align?: 'start' | 'end';
     children: ReactNode;
 };
 type NotificationsPanelTriggerProps = Omit<ComponentPropsWithRef<'button'>, 'onClick' | 'children'> & {
@@ -2227,7 +2748,7 @@ type NotificationsPanelHeaderProps = {
      * rendered without it, and the panel stays open: the host clears its `unread` items.
      */
     onMarkAllRead?: () => void;
-    /** Right-side slot — pills, action buttons, etc. */
+    /** Slot at the end of the line — pills, action buttons, etc. */
     children?: ReactNode;
     className?: string;
 };
@@ -2260,7 +2781,7 @@ type NotificationsPanelItemProps = ComponentPropsWithRef<'button'> & {
     time?: ReactNode;
     /** Not read yet: a dot before the title and a tinted row. Default false. */
     unread?: boolean;
-    /** Right-side badge label. If omitted, derived from `intent` (CRIT/WARN/INFO/OK). */
+    /** Badge label at the end of the item. If omitted, derived from `intent` (CRIT/WARN/INFO/OK). */
     badgeLabel?: string;
     /** When true, the panel auto-closes after the item is clicked. Default true. */
     closeOnClick?: boolean;
@@ -2305,7 +2826,7 @@ type NotificationCardSimpleProps = {
     className?: string;
 };
 type NotificationCardCondensedProps = {
-    /** Primary text shown on the left. */
+    /** Primary text, at the start of the line. */
     title: ReactNode;
     /** Inline action label (e.g., "Undo") — rendered as a link-styled button. */
     actionLabel?: ReactNode;
@@ -2324,8 +2845,8 @@ type MenuProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Edge of the trigger the menu lines up with. Default `left`. */
-    align?: 'left' | 'right';
+    /** Edge of the trigger the menu lines up with: where the text starts or ends, so the right under `dir="rtl"` for `start`. Default `start`. */
+    align?: 'start' | 'end';
     children: ReactNode;
 };
 type MenuTriggerProps = ComponentPropsWithRef<'button'>;
@@ -2417,8 +2938,8 @@ type UserMenuProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Side of the trigger the menu anchors to. Default `right`. */
-    align?: 'left' | 'right';
+    /** Edge of the trigger the menu lines up with: where the text starts or ends. Default `end`. */
+    align?: 'start' | 'end';
     children: ReactNode;
 };
 type UserMenuTriggerProps = Omit<ComponentPropsWithRef<'button'>, 'onClick' | 'children'> & {
@@ -2630,8 +3151,9 @@ type RatingProps = {
 };
 declare const Rating: ({ value: valueProp, defaultValue, onChange, max, allowHalf, readOnly, size, label, count, showValue, disabled, className, ref, }: RatingProps) => react.JSX.Element;
 
-type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
-/** Horizontal alignment with the trigger, for `top` / `bottom` positions. */
+/** `start` and `end` are the sides of the line: `end` is the right of the trigger, its left under `dir="rtl"`. */
+type PopoverPosition = 'top' | 'bottom' | 'start' | 'end';
+/** Alignment with the trigger along the line, for `top` / `bottom` positions. */
 type PopoverAlign = 'center' | 'end';
 type PopoverProps = {
     open?: boolean;
@@ -2642,12 +3164,14 @@ type PopoverProps = {
 type PopoverTriggerProps = ComponentPropsWithRef<'button'>;
 declare function PopoverTrigger({ onClick, className, children, ref, ...rest }: PopoverTriggerProps): react.JSX.Element;
 type PopoverContentProps = {
+    /** Side of the trigger the panel opens on. `start` / `end` follow the reading direction. Default `bottom`. */
     position?: PopoverPosition;
     /**
-     * Horizontal alignment with the trigger for `top` / `bottom`: `center`
-     * (default) or `end`, flush with its right edge — for triggers near the
-     * right of the screen. `end` also caps the width so the panel keeps 16px
-     * from the left of the screen. Ignored for `left` / `right`.
+     * Alignment with the trigger along the line for `top` / `bottom`: `center`
+     * (default) or `end`, flush with the trigger's end edge (its right edge, its
+     * left under `dir="rtl"`) — for triggers near the end of the line. `end` also
+     * caps the width so the panel keeps 16px from the other side of the screen.
+     * Ignored for `start` / `end` positions.
      */
     align?: PopoverAlign;
     /** Accessible name of the dialog. Name it with this or `aria-labelledby`: a dialog needs a name. */
@@ -2770,11 +3294,15 @@ type ProgressRingProps = {
 };
 declare const ProgressRing: ({ value, max, size, thickness, intent, children, indeterminate, "aria-label": ariaLabel, "aria-labelledby": labelledBy, className, }: ProgressRingProps) => react.JSX.Element;
 
-type RibbonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type RibbonPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
 type RibbonIntent = Extract<Intent, 'brand' | 'success' | 'warning' | 'danger' | 'neutral'>;
 type RibbonShape = 'flat' | 'angled' | 'pill';
 type RibbonProps = {
-    /** Corner of the parent to anchor to. Parent must be `position: relative` (and `overflow-hidden` for `angled`). */
+    /**
+     * Corner of the parent to anchor to. Parent must be `position: relative` (and `overflow-hidden`
+     * for `angled`). `start` and `end` follow the reading direction: under `dir="rtl"` a
+     * `top-end` ribbon sits in the top-left corner.
+     */
     position?: RibbonPosition;
     intent?: RibbonIntent;
     /**
@@ -3021,7 +3549,8 @@ declare const VideoEmbed: ({ src, title, aspectRatio, rounded, type, allow, sand
  * Mount the `<Toaster />` once at the app root. Trigger toasts from anywhere
  * with `toast(...)`, `toast.success(...)`, `toast.error(...)`, `toast.promise(...)`.
  *
- * Cosmos defaults: bottom-right, light or dark from the Cosmos theme class on
+ * Cosmos defaults: the bottom corner at the end of the line (bottom right, bottom left under
+ * `dir="rtl"` on `<html>`, or on the `dir` prop), light or dark from the Cosmos theme class on
  * `<html>` (not the OS setting), close button on. The toasts are drawn by Cosmos
  * classes (`toastOptions.unstyled`), not by sonner: `success`, `info`, `warning`
  * and `error` take the `INTENT_STYLE` palette of `AlertBanner` on an opaque
@@ -3038,7 +3567,7 @@ type AnnouncementBarProps = {
     /** Override the default icon for the intent. Pass `null` to hide. */
     icon?: ElementType | null;
     message: ReactNode;
-    /** Right-side slot — a Link, Button, etc. */
+    /** Slot at the end of the line — a Link, Button, etc. */
     action?: ReactNode;
     /** Render a close button. */
     dismissible?: boolean;
@@ -3101,7 +3630,7 @@ type CommandPaletteGroupProps = ComponentPropsWithRef<typeof Command.Group>;
 declare function CommandPaletteGroup({ className, ref, ...rest }: CommandPaletteGroupProps): react.JSX.Element;
 type CommandPaletteItemProps = Omit<ComponentPropsWithRef<typeof Command.Item>, 'children'> & {
     icon?: ElementType;
-    /** Right-aligned keyboard shortcut hint (e.g. "⌘D"). */
+    /** Keyboard shortcut hint at the end of the item (e.g. "⌘D"). */
     shortcut?: ReactNode;
     /** Second line under the label: what the command does. The item stays one line without it. */
     description?: ReactNode;
@@ -3128,6 +3657,32 @@ declare const CommandPalette: (({ hotkey, open, onOpenChange, className, overlay
     Footer: ({ className, children }: CommandPaletteFooterProps) => react.JSX.Element;
 };
 
+type CommandPaletteTriggerProps = Omit<ComponentPropsWithRef<'button'>, 'children'> & {
+    /** Text of the field-like button. Default `Search…`. Below `sm` it is read by assistive technology only. */
+    placeholder?: string;
+    /**
+     * The hotkey that opens the palette, written as `CommandPalette`'s `hotkey` (`'mod+k'`), shown
+     * as a key hint: `⌘K` on Apple platforms, `Ctrl K` elsewhere. It only labels the button: the
+     * `CommandPalette` listens for the keys, so give both the same value. `null` hides the hint
+     * (a palette with `hotkey={null}`). Default `'mod+k'`.
+     */
+    shortcut?: string | null;
+    /** Height and text size, aligned on the form fields'. Default `md`. */
+    size?: FieldSize;
+};
+/**
+ * `CommandPaletteTrigger` — a button drawn like a search field, which opens a `CommandPalette`:
+ * a placeholder, a magnifier and the hotkey as a key hint. Not an input: nothing is typed here,
+ * the palette holds the field, so a screen reader announces a button that opens a dialog.
+ *
+ * The palette owns the hotkey (its `hotkey` prop, `mod+k` by default) and the open state. This
+ * button registers no key listener: it takes `onClick={() => setOpen(true)}` and the same hotkey
+ * for its hint, so the keys never toggle the palette twice.
+ *
+ * Below `sm` it shrinks to a square icon button; the placeholder stays as its accessible name.
+ */
+declare const CommandPaletteTrigger: ({ placeholder, shortcut, size, className, ref, ...rest }: CommandPaletteTriggerProps) => react.JSX.Element;
+
 type ClipboardVariant = 'icon' | 'button';
 type ClipboardSize = 'sm' | 'md';
 type ClipboardProps = Omit<ComponentPropsWithRef<'button'>, 'onCopy'> & {
@@ -3189,12 +3744,15 @@ type SecretValueProps = {
  */
 declare const SecretValue: ({ value, label, revealed: revealedProp, defaultRevealed, onRevealedChange, visibleSuffix, autoHideAfter, className, ref, }: SecretValueProps) => react.JSX.Element;
 
-type BackToTopFabPosition = 'bottom-right' | 'bottom-left';
+type BackToTopFabPosition = 'bottom-end' | 'bottom-start';
 type BackToTopFabIntent = Extract<Intent, 'brand' | 'neutral'>;
 type BackToTopFabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     /** Pixels of vertical scroll before the FAB fades in. Default `300`. */
     threshold?: number;
-    /** Anchor corner. Default `bottom-right`. */
+    /**
+     * Anchor corner. Default `bottom-end`. The side follows the reading direction: under `dir="rtl"`
+     * `bottom-end` is the bottom-left corner and `bottom-start` the bottom-right one.
+     */
     position?: BackToTopFabPosition;
     /** Use smooth scrolling. Default `true`. */
     smoothScroll?: boolean;
@@ -3255,16 +3813,14 @@ declare const HelpOverlay: (({ open: controlledOpen, defaultOpen, onOpenChange,
     Shortcut: ({ keys, description, className }: HelpOverlayShortcutProps) => react.JSX.Element;
 };
 
-type FieldSize = 'sm' | 'md' | 'lg';
-
 type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
     label?: string;
     description?: string;
     error?: string;
     /**
      * Message shown once the value is valid (a free username, an accepted code):
-     * a green border and message, and a check icon on the right edge, which
-     * `rightSlot` replaces. The message is linked as the description and
+     * a green border and message, and a check icon on the end edge, which
+     * `endSlot` replaces. The message is linked as the description and
      * announced politely when it appears. `error` wins when both are set.
      */
     success?: string;
@@ -3275,12 +3831,12 @@ type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
     size?: FieldSize;
     /** Marks the field required: an asterisk after the label, `required` and `aria-required` on the input. */
     required?: boolean;
-    /** Optional left icon (lucide-react). Ignored when `prefix` is set. */
+    /** Optional icon at the start edge (lucide-react). Ignored when `prefix` is set. */
     icon?: ElementType;
     /**
-     * Draws an alert icon on the right edge while `error` is set, so the state
+     * Draws an alert icon on the end edge while `error` is set, so the state
      * doesn't rest on the border color alone. Default `false`. Ignored when
-     * `rightSlot` is set.
+     * `endSlot` is set.
      */
     errorIcon?: boolean;
     /**
@@ -3288,8 +3844,8 @@ type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
      * one. Unlike `disabled`, the field stays focusable and is submitted.
      */
     readOnly?: boolean;
-    /** Optional right slot — e.g. unit suffix, validation pill. Ignored when `suffix` is set. */
-    rightSlot?: ReactNode;
+    /** Optional slot on the end edge — e.g. unit suffix, validation pill. Ignored when `suffix` is set. */
+    endSlot?: ReactNode;
     /** Slot rendered next to the label text (e.g. a TooltipHelp). */
     labelTrailing?: ReactNode;
     /** Attached prefix addon (e.g. `https://`, `€`, `@`). Renders as a bordered group. */
@@ -3297,7 +3853,7 @@ type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
     /** Attached suffix addon (e.g. `.com`, `kg`). Renders as a bordered group. */
     suffix?: ReactNode;
 };
-declare function Input({ label, description, error, success, size, required, icon: Icon, errorIcon, readOnly, rightSlot, labelTrailing, prefix, suffix, className, id, ref, ...rest }: InputProps): react.JSX.Element;
+declare function Input({ label, description, error, success, size, required, icon: Icon, errorIcon, readOnly, endSlot, labelTrailing, prefix, suffix, className, id, ref, ...rest }: InputProps): react.JSX.Element;
 
 /** Naming props shared by the bare controls that can sit in a FormRow. */
 type FieldA11yProps = {
@@ -3450,8 +4006,8 @@ type NumberInputProps = FieldA11yProps & {
     required?: boolean;
     /**
      * Where the step buttons sit. `sides` (default): `−` / `+` on the outer edges,
-     * centered text. `stacked`: ↑ / ↓ arrows stacked in a column inside the right
-     * edge, left-aligned text: the compact form for settings panels.
+     * centered text. `stacked`: ↑ / ↓ arrows stacked in a column inside the end
+     * edge, start-aligned text: the compact form for settings panels.
      */
     controls?: 'sides' | 'stacked';
     /** Tailwind width class for the inner input — default `w-20`. */
@@ -3508,7 +4064,9 @@ type FormRowProps = {
 };
 /**
  * FormRow — horizontal setting row : label (+ optional description and help)
- * on the left, control on the right. Pair multiple FormRows inside a
+ * at the start, control at the end. Below `sm` the label and its description stack
+ * above the control, which takes the row's width; a switch (`Toggle`) stays beside its
+ * label, as phones show a setting that turns on and off. Pair multiple FormRows inside a
  * `divide-y` container to build settings panels. The Cosmos controls inside
  * (Toggle, NumberInput, SearchInput, Select, SegmentedControl) take the
  * label as their name and the description as their description; any other
@@ -3546,7 +4104,7 @@ type AvatarUploaderProps = {
 };
 declare const AvatarUploader: ({ src, name, size, onUpload, onRemove, loading: loadingProp, error: errorProp, helperText, maxSizeMB, accept, disabled, uploadLabel, removeLabel, className, }: AvatarUploaderProps) => react.JSX.Element;
 
-type PasswordInputProps = Omit<InputProps, 'type' | 'icon' | 'rightSlot' | 'labelTrailing'> & {
+type PasswordInputProps = Omit<InputProps, 'type' | 'icon' | 'endSlot' | 'labelTrailing'> & {
     /** Tooltip text shown next to the label (uses TooltipHelp). */
     helpText?: string;
     /** Override the visibility-toggle button labels (defaults: "Show/Hide password"). */
@@ -3762,7 +4320,7 @@ type UploadQueueProps = {
  */
 declare const UploadQueue: ({ items, onRetry, onRemove, label, className, ref, }: UploadQueueProps) => react.JSX.Element | null;
 
-type FormFooterAlign = 'right' | 'between';
+type FormFooterAlign = 'end' | 'between';
 type FormFooterProps = {
     /** Cancel button handler. Hidden when omitted. */
     onCancel?: () => void;
@@ -3779,7 +4337,7 @@ type FormFooterProps = {
     submitIntent?: ButtonIntent;
     /** Form name attribute (used by submit when the button is outside the form). */
     formId?: string;
-    /** Where to render the buttons. Default `right`. */
+    /** Where to render the buttons: `end` is the end edge (the left one in right to left). Default `end`. */
     align?: FormFooterAlign;
     /** Render a top border separator. Default `true`. */
     bordered?: boolean;
@@ -3957,7 +4515,7 @@ type ActionPanelProps = ComponentPropsWithRef<'div'> & {
     action?: ReactNode;
     /**
      * Layout. `stacked` (default): action sits below the description.
-     * `inline`: action floats top-right (TUI "With button at top right").
+     * `inline`: action floats at the top end (TUI "With button at top right").
      */
     layout?: ActionPanelLayout;
     /**
@@ -4014,6 +4572,11 @@ declare const Combobox: ({ label, value: valueProp, defaultValue, onChange, opti
 type MultiSelectOption = ComboboxOption;
 type MultiSelectProps = {
     label?: ReactNode;
+    /**
+     * Keeps the label for assistive technology only: the label and the count row leave the layout,
+     * so the field's top edge is the component's, for a toolbar where it lines up with buttons.
+     */
+    labelHidden?: boolean;
     /** Chosen option values, when controlled. */
     value?: string[];
     /** Initial option values, when uncontrolled. None chosen when omitted. */
@@ -4052,7 +4615,7 @@ type MultiSelectProps = {
  * the list. The list stays open after a pick, a checkbox marks the chosen options, and Backspace
  * in an empty input removes the last value.
  */
-declare const MultiSelect: ({ label, value: valueProp, defaultValue, onChange, options, placeholder, emptyMessage, maxItems, disabled, helperText, error, size, required, className, ref, open: openProp, defaultOpen, onOpenChange, }: MultiSelectProps) => react.JSX.Element;
+declare const MultiSelect: ({ label, labelHidden, value: valueProp, defaultValue, onChange, options, placeholder, emptyMessage, maxItems, disabled, helperText, error, size, required, className, ref, open: openProp, defaultOpen, onOpenChange, }: MultiSelectProps) => react.JSX.Element;
 
 type TagInputProps = {
     label?: ReactNode;
@@ -4132,7 +4695,7 @@ type SliderProps = {
     /** What the arrow keys and the pointer snap to. Default `1`. */
     step?: number;
     /**
-     * Names the slider, on the left of the header row. The handles take it as their accessible
+     * Names the slider, at the start of the header row. The handles take it as their accessible
      * name; a range names them "<label> minimum" and "<label> maximum".
      */
     label?: string;
@@ -4363,7 +4926,10 @@ type DescriptionListItemProps = ComponentPropsWithRef<'div'> & {
     label: ReactNode;
     /** Render the value in a monospace font (IDs, hashes, paths…). */
     mono?: boolean;
-    /** Value (`<dd>`). */
+    /**
+     * Value (`<dd>`). A text or a number sits in a `<bdi>`, so a value that starts with a number
+     * keeps its order in a right-to-left page ("2 minutes ago", not "minutes ago 2").
+     */
     children: ReactNode;
 };
 declare function Item({ label, mono, children, className, ref, ...rest }: DescriptionListItemProps): react.JSX.Element;
@@ -4383,8 +4949,8 @@ type DescriptionListProps = ComponentPropsWithRef<'dl'> & {
      */
     striped?: boolean;
     /**
-     * When `true`, items are flat label/value rows, the label on the left and the value on the
-     * right, for the metadata of a card (ID, template, last seen…). The default items are
+     * When `true`, items are flat label/value rows, the label at the start and the value at the
+     * end, for the metadata of a card (ID, template, last seen…). The default items are
      * wide, with the label above the value on a phone.
      */
     compact?: boolean;
@@ -4400,6 +4966,13 @@ type KpiCardIntent = Extract<Intent, 'neutral' | 'warning' | 'danger'>;
 type KpiCardProps = {
     label: string;
     value: ReactNode;
+    /**
+     * The exact figure behind an abbreviated `value` (`€12,418,906.40` for `€12.4M`). A tooltip shows
+     * it on hover and focus, and it is part of the card's accessible name, which would otherwise
+     * read only "12.4M". On a plain card the value becomes a tab stop to reach the tooltip; a link or
+     * button card shows it when the card takes keyboard focus. Ignored while `loading`.
+     */
+    exactValue?: string;
     /** Smaller text under the value — e.g. "across 3 sites". */
     sub?: ReactNode;
     /** Lucide icon (or any component taking `className`), in a tinted chip next to the label. */
@@ -4440,7 +5013,7 @@ type KpiCardProps = {
  * against a previous period and a chart. Use in dashboards as the top-row at-a-glance panel.
  * With `href` or `onClick` the whole card is one link or button.
  */
-declare const KpiCard: ({ label, value, sub, icon: Icon, iconIntent, delta, chart, intent, loading, href, onClick, ref, className, }: KpiCardProps) => react.JSX.Element;
+declare const KpiCard: ({ label, value, exactValue, sub, icon: Icon, iconIntent, delta, chart, intent, loading, href, onClick, ref, className, }: KpiCardProps) => react.JSX.Element;
 
 type TrendDeltaSize = 'sm' | 'md';
 type TrendDeltaProps = {
@@ -4484,7 +5057,7 @@ type TimelineItem = {
     /**
      * The state of the event, as a color on its marker: the icon circle of
      * `stepper` and `alternating` (tinted), the dot of `dot`, a ring around the
-     * avatar of `avatar`, the left edge of the card of `card`. Defaults to
+     * avatar of `avatar`, the start edge of the card of `card`. Defaults to
      * `brand` in `dot`, `stepper` and `alternating`; `avatar` and `card` draw
      * nothing without it, so an item with no `intent` keeps its look there.
      */
@@ -4512,9 +5085,9 @@ type TimelineVariant =
 /** Each entry rendered as a stand-alone card (no connector line). */
  | 'card'
 /**
- * Cards alternating left and right of a centred line, with a `stepper`
+ * Cards alternating between the two sides of a centred line, with a `stepper`
  * icon circle on the line and the time on the other side. Below `md`, one
- * column with the line on the left.
+ * column with the line at the start.
  */
  | 'alternating';
 type TimelineProps = {
@@ -4708,17 +5281,6 @@ type KanbanBoardProps = {
  */
 declare const KanbanBoard: ({ value, defaultValue, onChange, onCardMove, onCardOpen, onAddCard, renderCard, loading, ariaLabel, className, ref, }: KanbanBoardProps) => react.JSX.Element;
 
-type DateTimeValue = Date | number | string;
-/** Presets of `DateTime`'s `format`, each a set of `Intl.DateTimeFormat` options. */
-type DateTimeFormat = 'date' | 'time' | 'datetime' | 'long' | 'full';
-type CountdownParts = {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
-};
-type CountdownUnit = keyof CountdownParts;
-
 type DateTimeProps = {
     /** A `Date`, a timestamp in milliseconds or a date string (ISO 8601: other forms depend on the browser). */
     value: DateTimeValue;
@@ -4887,7 +5449,8 @@ type AuditDiffProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
  * on a green tint, and every cue also has a text: the column headers say Before and After, an
  * absent value reads "empty", and the words that moved in a long text are wrapped in `<del>` and
  * `<ins>` with a visually hidden "removed:" / "added:", so colour is never the only signal.
- * Values are React text, so markup in one shows as written.
+ * Values are React text, so markup in one shows as written. Each field name and value is isolated
+ * in a `<bdi>`, so a phone number or a size keeps its order in a right-to-left page.
  */
 declare const AuditDiff: ({ changes, variant, formatValue, labels: labelOverrides, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: AuditDiffProps) => react.JSX.Element;
 
@@ -4900,16 +5463,74 @@ type DataTableSort = {
     key: string;
     direction: SortDirection;
 } | null;
-/** Row height of a `DataTable`: the standard rows, or taller `comfortable` ones. */
-type DataTableDensity = 'default' | 'comfortable';
+/**
+ * Row height of a `DataTable`: the standard rows, tighter `compact` ones or taller `comfortable`
+ * ones. Same names as the page's `data-density`.
+ */
+type DataTableDensity = 'compact' | 'default' | 'comfortable';
+/** The edge of a `DataTable` a column is pinned to. */
+type ColumnPin = 'start' | 'end';
+/**
+ * What `ColumnEdit.render` gets to draw an editor: the draft and what to do with it. The draft is
+ * a string, what a form field holds: parse it in `onCellEdit` / `onRowEdit`.
+ */
+type CellEditor<T> = {
+    /** The row being edited. */
+    row: T;
+    /** The draft value: `initialValue(row)` until `setValue` changes it. */
+    value: string;
+    /** Changes the draft. */
+    setValue: (value: string) => void;
+    /**
+     * Saves the draft: what Enter does (and blur, with `editTrigger` `'cell'` and `'button'`). With
+     * `editTrigger="row"` it saves the whole row.
+     */
+    commit: () => void;
+    /** Drops the draft and closes the editor: what Escape does. With `'row'`, for the whole row. */
+    cancel: () => void;
+    /** A save is waiting for its promise (`'row'` only: a cell editor is closed meanwhile). */
+    saving: boolean;
+    /**
+     * What the field needs, spread on it: its name (`aria-label`, "Rack for node-a02"), the error
+     * tie (`aria-describedby`, `aria-invalid`), `disabled` while saving and a `className` that turns
+     * the border red on `aria-invalid`. An `Input`, a `Select` or any field that takes these props
+     * accepts the object as it is.
+     */
+    fieldProps: {
+        'aria-label': string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': true | undefined;
+        disabled: boolean | undefined;
+        /** Turns the border red while `aria-invalid` is set. */
+        className: string;
+    };
+};
+/** The editor of a column (`ColumnDef.edit`). */
+type ColumnEdit<T> = {
+    /** The draft the editor starts from, for a row: usually the plain text of the cell. */
+    initialValue: (row: T) => string;
+    /**
+     * Draws the editor from the existing form fields:
+     * `(e) => <Input {...e.fieldProps} size="sm" value={e.value} onChange={(ev) => e.setValue(ev.target.value)} />`.
+     * Enter, Escape and blur are handled by the table around it, not by the field.
+     */
+    render: (editor: CellEditor<T>) => ReactNode;
+};
 type ColumnDef<T> = {
     /** Stable key — used for sort/filter identity. */
     key: string;
     label: ReactNode;
     /** Optional fixed width (CSS value, e.g. `'20%'` or `'180px'`). */
     width?: string;
-    /** Tailwind text alignment override. */
-    align?: 'left' | 'right' | 'center';
+    /**
+     * The narrowest the column is drawn when `width` is a percentage or unset (a length, `'180px'`,
+     * is kept as it is). Default `'8rem'`. The table is never narrower than what its columns need,
+     * so on a narrow screen it scrolls sideways instead of squeezing them. Columns without a width
+     * split what the others leave in equal parts: each gets at least the largest `minWidth` of them.
+     */
+    minWidth?: string;
+    /** Text alignment override: `start` (the default), `end` or `center`. `end` is for numbers. */
+    align?: 'start' | 'end' | 'center';
     /** Renders the cell for a row. */
     render: (row: T) => ReactNode;
     /** Returns the raw sortable value for the row. */
@@ -4946,6 +5567,25 @@ type ColumnDef<T> = {
      * the card. The others become label/value pairs. The table above `sm` ignores it.
      */
     mobile?: 'title' | 'hidden';
+    /**
+     * Pins the column to the `start` or the `end` of the table while it scrolls sideways, so a row
+     * stays identified (a name at the start) or its status and actions stay in reach (at the end).
+     * Several columns can sit on each side. List the pinned columns first (`start`) or last (`end`)
+     * in `columns`: a pinned column keeps its place in the order. The selection and toggle columns
+     * stay first, and pinned with the start columns; the action column is pinned with the end ones.
+     * A shadow marks the edge while content scrolls under it. With `rowHref`, the link of the row
+     * covers its own column only when that one is pinned, and a click on the rest of the row follows
+     * it from a handler (middle click and the context menu work on that column only). The table
+     * above `sm` only: the cards of `mobileLayout="cards"` ignore it.
+     */
+    pin?: ColumnPin;
+    /**
+     * Makes the cells of the column editable (see `DataTable`'s `editTrigger`, `onCellEdit` and
+     * `onRowEdit`): the editor to draw, and the draft it starts from. A cell's content is drawn
+     * inside a button with `editTrigger` `'cell'`, so keep it to text and badges, with no link or
+     * button of its own. Not in the cards of `mobileLayout="cards"`.
+     */
+    edit?: ColumnEdit<T>;
     /** The label of the column's pair in a card, in place of `label` (a short or plain-text one). */
     mobileLabel?: ReactNode;
 };
@@ -4958,6 +5598,31 @@ type DataTableExportQuery = {
     sort: DataTableSort;
     /** The keys of the visible data columns, in the order they are drawn. */
     columns: string[];
+    /**
+     * The `rowKey`s of the selected rows, present only while rows are selected: the export is of
+     * those rows alone, whatever the search and the filters keep.
+     */
+    selection?: (string | number)[];
+};
+/**
+ * A bulk action of `DataTable`'s `bulkActionItems`, shown while rows are selected. The first is a
+ * button; when the bar runs out of room the others fold into an "Actions" menu, and on a phone
+ * (`mobileLayout="cards"`) each one is an icon button named by its `label`.
+ */
+type DataTableBulkAction<T> = {
+    /** Identifies the action among the others. */
+    key: string;
+    /** The text of the button or menu item, and the name of its icon-only form. */
+    label: string;
+    /** Drawn before the label. An action with no icon is a text button on a phone too. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** `danger` colors a destructive action red. Default `neutral`. */
+    intent?: Extract<Intent, 'neutral' | 'danger'>;
+    disabled?: boolean;
+    /** Called with the selected rows. */
+    onClick: (selectedRows: T[]) => void;
 };
 /**
  * A saved view of a `DataTable`: a name and every part of the state a user sets. Plain JSON, so
@@ -5015,7 +5680,7 @@ type DataTableProps<T> = {
      * others' as many as you want: they stay clickable above the row.
      */
     rowHref?: (row: T) => string | undefined;
-    /** Optional right-edge action column (typically a `RowActionButton` or a `RowActionsMenu`). */
+    /** Optional end-edge action column (typically a `RowActionButton` or a `RowActionsMenu`). */
     renderRowAction?: (row: T) => React.ReactNode;
     /**
      * Rows per page, when controlled. Without `pageSizeOptions` it is the fixed size. Default 25.
@@ -5036,31 +5701,97 @@ type DataTableProps<T> = {
     emptyTitle?: string;
     emptyDescription?: string;
     /**
-     * Row height. `default` keeps the standard rows. `comfortable` pads the
-     * header and body cells more, for rows that carry two lines (a name over an
-     * email, an avatar) or need more room. Cell content stays vertically centred. A `density`
-     * passed without `onDensityChange` is a controlled value that never moves: applying a saved view
-     * then reports its density and keeps this one.
+     * A call to action under the empty state ("Create the first order"). It shows when the table
+     * has no data to start with. When a search or filters hide every row it gives way to a
+     * "Clear filters" button that clears both, since a call to create would not answer an empty
+     * result. With `manual`, where the host holds the rows, an active search or filter counts as
+     * the cause.
+     */
+    emptyAction?: ReactNode;
+    /**
+     * Row height. Without it (and without `defaultDensity`) the table follows the page's
+     * `data-density`. Set, it is a local override of the page: `default` keeps the standard rows,
+     * `compact` pads the header and body cells less, `comfortable` more, for rows that carry two
+     * lines (a name over an email, an avatar) or need more room. Cell content stays vertically
+     * centred. A `density` passed without `onDensityChange` is a controlled value that never
+     * moves: applying a saved view then reports its density and keeps this one. A table that
+     * follows the page saves `default` in a view.
      */
     density?: DataTableDensity;
     defaultDensity?: DataTableDensity;
     /** Called with the density to move to, in both modes (a saved view sets it). */
     onDensityChange?: (density: DataTableDensity) => void;
     /**
-     * Pins the first data column (and the selection column before it) to the start while the table
-     * scrolls sideways, so the row stays identified on a narrow screen. With `rowHref`, the link
-     * of the row then covers its own column, and a click on the rest of the row follows it from a
-     * handler: middle click and the context menu work on the first column only.
-     */
-    stickyFirstColumn?: boolean;
+     * Makes the rows expandable: a first column holds a chevron button per row (`aria-expanded`,
+     * `aria-controls` the detail row while it is open, named "Show details for <row key>"), and the
+     * content this returns is drawn in a row below it that spans every column. Opening a row never
+     * selects it nor counts as a click on it. Not combined with `virtualize`: the rows of a
+     * virtualized table have one fixed height, so nothing expands there (the prop is ignored).
+     * With `mobileLayout="cards"` below `sm` the chevron sits on the card's title line and the
+     * content opens inside the card, under its fields.
+     */
+    renderExpandedRow?: (row: T) => ReactNode;
+    /**
+     * The keys (`rowKey`) of the open rows, when controlled. A controlled table shows a toggle once
+     * the host passes the new set back through `onExpandedRowsChange`.
+     */
+    expandedRows?: Set<string | number>;
+    defaultExpandedRows?: Set<string | number>;
+    /** Called with the set of open row keys after a row is toggled, in both modes. */
+    onExpandedRowsChange?: (expanded: Set<string | number>) => void;
+    /**
+     * How an editable cell (a column with `edit`) opens its editor. Only one cell, or one row, edits
+     * at a time. Not combined with `virtualize` (its fixed-height cells would clip an editor and its
+     * error) nor with the cards of `mobileLayout="cards"`: the prop is ignored there.
+     * - `'cell'` (default): the cell's content is a button that fills it; a click, Enter or F2 on it
+     *   opens the editor in place, focused. Enter or blur saves, Escape cancels and puts the focus
+     *   back on the cell's button.
+     * - `'button'`: a pencil button in each editable cell, shown on the hovered or focused row and
+     *   always on a screen with no hover, opens the editor, which has Save and Cancel buttons too.
+     *   Keys and blur as in `'cell'`.
+     * - `'row'`: an Edit button in the row's action column turns every editable cell of the row into
+     *   its field, with Cancel and Save in their place. Save (or Enter in a field) calls
+     *   `onRowEdit` once with the cells that changed; Escape or Cancel drops the changes.
+     */
+    editTrigger?: 'cell' | 'button' | 'row';
+    /**
+     * Saves one cell, with `editTrigger` `'cell'` or `'button'`: the row, the column `key` and the
+     * draft string (parse it yourself). Not called when the draft did not change. Without it those
+     * cells are not editable. Return a promise to show the save: the cell is `aria-busy` with a
+     * spinner until it settles, then the editor closes. If it rejects (or throws), the editor opens
+     * again with the value the user typed, and the error's message shows under the cell, tied to the
+     * field by `aria-describedby`. The table never changes `rows`: update them from here.
+     */
+    onCellEdit?: (row: T, columnKey: string, value: string) => void | PromiseLike<unknown>;
+    /**
+     * Saves a row, with `editTrigger="row"`: the row and its changes, column `key` → draft string,
+     * for the cells that changed only (not called when none did). Without it the Edit button is not
+     * shown. Return a promise to show the save: the row's Save button spins and the fields are
+     * disabled until it settles. If it rejects (or throws) the fields stay open with what was typed,
+     * and the error's message shows in a row under the row.
+     */
+    onRowEdit?: (row: T, changes: Record<string, string>) => void | PromiseLike<unknown>;
     /** Show a checkbox column and enable row selection. */
     selectable?: boolean;
     /** Controlled selection set (row keys). */
     selection?: Set<string | number>;
     defaultSelection?: Set<string | number>;
     onSelectionChange?: (selection: Set<string | number>) => void;
-    /** Toolbar rendered above the table when `selection.size > 0`. Receives the selected rows. */
+    /**
+     * Nodes shown in the selection bar while rows are selected, after `bulkActionItems`. Receives
+     * the selected rows. They stay as given at every width: use `bulkActionItems` for actions that
+     * fold into a menu when the bar runs out of room.
+     */
     bulkActions?: (selectedRows: T[]) => ReactNode;
+    /**
+     * The bulk actions as data, for a bar that adapts: the first is a button and, when the bar is
+     * narrower than 1152px, the others fold into an "Actions" menu; with `mobileLayout="cards"` on a
+     * phone each is an icon button named by its `label`. While rows are selected the bar holds the
+     * count, "Clear" and these actions on the start side, and the search and the toolbar on the end
+     * side; the toolbar buttons go icon-only and the search narrows below 1360px, and under 640px the
+     * bar wraps to two lines. Shown before the nodes of `bulkActions`, which keeps working.
+     */
+    bulkActionItems?: DataTableBulkAction<T>[];
     /** Controlled search value. When provided, the search input is shown. */
     searchValue?: string;
     defaultSearchValue?: string;
@@ -5112,13 +5843,13 @@ type DataTableProps<T> = {
      * assistive technology where the window is, and the row that holds the keyboard focus stays
      * drawn while it is scrolled out of view, so focus and selection survive scrolling.
      *
-     * Every row has one fixed height, set by `density` (49px, or 61px when `comfortable`, at the
+     * Every row has one fixed height, set by the density (41px `compact`, 49px, or 61px `comfortable`, at the
      * default text size, and growing with the text size setting): content taller than that is
      * clipped, so keep each cell to the one line of text (or a control) it has in a standard row.
      * The rows scroll in the table's own area:
      * give it a height (`className="max-h-96"`), or the window has no end. Table layout only: with
-     * `mobileLayout="cards"` below `sm` the cards keep the pagination. Not for expandable rows. On
-     * paper only the drawn rows print. Default `false`.
+     * `mobileLayout="cards"` below `sm` the cards keep the pagination. Not for expandable rows nor
+     * inline editing: both are off with it. On paper only the drawn rows print. Default `false`.
      */
     virtualize?: boolean;
     /**
@@ -5169,7 +5900,8 @@ type DataTableProps<T> = {
      * Shows an "Export" button in the toolbar, before the "Columns" one; the toolbar then shows even
      * without a search field. It downloads a CSV of every page of the rows that the search, the
      * filters and the sort keep, in the visible columns and their order (the selection and action
-     * columns are not data). With `manual` it holds the loaded rows only, one page: pass `onExport`
+     * columns are not data). While rows are selected it follows the selection: the button says
+     * "Export 3" and downloads those rows alone, in the table's sort order. With `manual` it holds the loaded rows only, one page: pass `onExport`
      * to export on the server. A column's header is its `label` when that is a string or a number,
      * else its `mobileLabel` when that is a string, else its `key`; its cells come from `exportValue`
      * (see `ColumnDef`, and `toCsv` for the format). The file is UTF-8 with a byte order mark, so
@@ -5180,7 +5912,8 @@ type DataTableProps<T> = {
     exportFileName?: string;
     /**
      * Makes the Export button call this with what the table shows (search, filters, sort, visible
-     * column keys) and build no file: for a host that exports on the server.
+     * column keys, and the selected keys while rows are selected) and build no file: for a host that
+     * exports on the server.
      */
     onExport?: (query: DataTableExportQuery) => void;
     /**
@@ -5206,8 +5939,11 @@ type DataTableProps<T> = {
      * sideways. `cards` swaps it for a list of blocks: the selection checkbox, the `mobile: 'title'`
      * column and the row action on the first line, then one label/value pair per remaining column
      * (`mobileLabel`, else the column header; `mobile: 'hidden'` leaves a column out). The toolbar
-     * gets a second line with a "Sort by" select for the sortable columns and the columns button.
-     * From `sm` up the table is the same either way.
+     * gets a second line with a "Filters" button (when a column is filterable), a "Sort by" select
+     * for the sortable columns and the columns button. "Filters" shows how many values are filtered
+     * and opens a bottom sheet with each filterable column's filter, "Clear all" and "Show n rows";
+     * it sets the same `filters` as the column headers do, controlled or not. From `sm` up the table
+     * is the same either way.
      */
     mobileLayout?: 'scroll' | 'cards';
 };
@@ -5220,7 +5956,7 @@ type DataTableProps<T> = {
  * the keyboard focus, so the arrow keys scroll it even when no cell holds a
  * control.
  */
-declare const DataTable: <T>({ rows, columns: allColumns, rowKey, onRowClick, rowHref, renderRowAction, pageSize: pageSizeProp, manual, rowCount, virtualize, loading, loadingRows, error, onRetry, emptyTitle, emptyDescription, density: densityProp, defaultDensity, onDensityChange, stickyFirstColumn, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, filters: filtersProp, defaultFilters, onFiltersChange, filterTabs, sort: sortProp, defaultSort, onSortChange, page: pageProp, defaultPage, onPageChange, defaultPageSize, onPageSizeChange, pageSizeOptions, columnsMenu, exportable, exportFileName, onExport, views: viewsProp, defaultViews, onViewsChange, activeView: activeViewProp, defaultActiveView, onActiveViewChange, columnVisibility: columnVisibilityProp, defaultColumnVisibility, onColumnVisibilityChange, mobileLayout, }: DataTableProps<T>) => react.JSX.Element;
+declare const DataTable: <T>({ rows, columns: allColumns, rowKey, onRowClick, rowHref, renderRowAction, pageSize: pageSizeProp, manual, rowCount, virtualize, loading, loadingRows, error, onRetry, emptyTitle, emptyDescription, emptyAction, density: densityProp, defaultDensity, onDensityChange, editTrigger, onCellEdit, onRowEdit, renderExpandedRow, expandedRows: expandedRowsProp, defaultExpandedRows, onExpandedRowsChange, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, bulkActionItems, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, filters: filtersProp, defaultFilters, onFiltersChange, filterTabs, sort: sortProp, defaultSort, onSortChange, page: pageProp, defaultPage, onPageChange, defaultPageSize, onPageSizeChange, pageSizeOptions, columnsMenu, exportable, exportFileName, onExport, views: viewsProp, defaultViews, onViewsChange, activeView: activeViewProp, defaultActiveView, onActiveViewChange, columnVisibility: columnVisibilityProp, defaultColumnVisibility, onColumnVisibilityChange, mobileLayout, }: DataTableProps<T>) => react.JSX.Element;
 
 /**
  * The CSV text of `rows` in `columns`: a header row, then one record per row, every record ended
@@ -5239,15 +5975,16 @@ declare const DataTable: <T>({ rows, columns: allColumns, rowKey, onRowClick, ro
 declare const toCsv: <T>(rows: T[], columns: ColumnDef<T>[]) => string;
 
 type CellAlignProps = {
-    /** Text alignment. Default `left`, or `right` when `numeric` is set. */
-    align?: 'left' | 'center' | 'right';
-    /** Numbers: right-aligned, with tabular figures so the digits line up. */
+    /** Text alignment. Default `start`, or `end` when `numeric` is set. */
+    align?: 'start' | 'center' | 'end';
+    /** Numbers: aligned to the end, with tabular figures so the digits line up. */
     numeric?: boolean;
 };
 type TableProps = ComponentProps<'table'> & {
     /**
-     * Row height, shared with `DataTable`. `default` keeps the standard rows,
-     * `comfortable` pads the cells more for rows with two lines of content.
+     * Row height, shared with `DataTable`. Without it the table follows the page's
+     * `data-density`. `default` keeps the standard rows whatever the page says, `compact` pads the
+     * cells less, `comfortable` more, for rows with two lines of content.
      */
     density?: DataTableDensity;
     /** Shade every other body row. */
@@ -5293,14 +6030,14 @@ declare const TableFoot: ({ className, ...rest }: TableFootProps) => react.JSX.E
 type TableRowProps = ComponentProps<'tr'>;
 /** TableRow — a `<tr>`; body rows highlight on hover. */
 declare const TableRow: ({ className, ...rest }: TableRowProps) => react.JSX.Element;
-type TableHeaderCellProps = ComponentProps<'th'> & CellAlignProps;
+type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'align'> & CellAlignProps;
 /**
  * TableHeaderCell — a `<th>`. `scope` defaults to `col` in `TableHead` and to
  * `row` in `TableBody` and `TableFoot`; pass `colgroup` or `rowgroup` for a
  * header that spans a group.
  */
 declare const TableHeaderCell: ({ align, numeric, scope, className, ...rest }: TableHeaderCellProps) => react.JSX.Element;
-type TableCellProps = ComponentProps<'td'> & CellAlignProps;
+type TableCellProps = Omit<ComponentProps<'td'>, 'align'> & CellAlignProps;
 /** TableCell — a `<td>`, padded to the table's `density`. */
 declare const TableCell: ({ align, numeric, className, ...rest }: TableCellProps) => react.JSX.Element;
 type TableSkeletonRowsProps = {
@@ -5320,7 +6057,7 @@ declare const TableSkeletonRows: ({ rows, columns, numericColumns, }: TableSkele
 
 type ColumnHeaderProps = {
     label: ReactNode;
-    align?: 'left' | 'right' | 'center';
+    align?: 'start' | 'end' | 'center';
     sortable?: boolean;
     filterable?: boolean;
     /** Current sort direction for this column, or null if not active. */
@@ -5331,11 +6068,13 @@ type ColumnHeaderProps = {
     filterSelected?: Set<string>;
     onFilterToggle?: (v: string) => void;
     onFilterClear?: () => void;
-    /** Cell padding, matching the `density` of the table it heads. Default `default`. */
+    /** Cell padding, matching the `density` of the table it heads. Default: the page's. */
     density?: DataTableDensity;
     className?: string;
+    /** Inline style of the header cell (a pinned column's offset). */
+    style?: CSSProperties;
 };
-declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, density, className, }: ColumnHeaderProps) => react.JSX.Element;
+declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, density, className, style, }: ColumnHeaderProps) => react.JSX.Element;
 
 type ColumnFilterDropdownProps = {
     values: string[];
@@ -5374,8 +6113,8 @@ declare const ActiveFiltersBar: ({ filters, onClearOne, onClearAll, className, }
 type RowActionsMenuProps = {
     /** Name of the trigger. Name the row too ("Actions for node-100"): there is one per row. */
     'aria-label'?: string;
-    /** Edge of the trigger the menu lines up with. Default `right`: the column is the table's last. */
-    align?: 'left' | 'right';
+    /** Edge of the trigger the menu lines up with. Default `end`: the column is the table's last. */
+    align?: 'start' | 'end';
     /** Tailwind width class of the menu. Default `w-48`. */
     width?: string;
     open?: boolean;
@@ -5441,7 +6180,7 @@ type TableAmountCellProps = {
 /**
  * TableAmountCell — a signed amount tinted by its sign: green for a gain, red for a loss, plain
  * for zero. The sign is written too, so the colour is never the only cue. Put it in a numeric
- * column (`align="right"`, or `numeric` on `TableCell`).
+ * column (`align="end"`, or `numeric` on `TableCell`).
  */
 declare const TableAmountCell: ({ value, currency, locale, format }: TableAmountCellProps) => react.JSX.Element;
 
@@ -5817,6 +6556,15 @@ type CosmosAccent = 'blue' | 'indigo' | 'violet' | 'purple' | 'rose' | 'teal' |
 type CosmosFont = 'outfit' | 'inter' | 'plex' | 'montserrat' | 'open-sans' | 'system';
 /** A Cosmos text size: the `data-text-size` attribute on `<html>`, none for `md`. */
 type CosmosTextSize = 'sm' | 'md' | 'lg' | 'xl';
+/** A Cosmos density: the `data-density` attribute on `<html>`, none for `default`. */
+type CosmosDensity = 'compact' | 'default' | 'comfortable';
+/**
+ * A Cosmos corner radius: the `data-radius` attribute on `<html>`, none for `default`.
+ * `none` squares every corner to 2px, `sm` halves them, `lg` takes them one and a half times.
+ */
+type CosmosRadius = 'none' | 'sm' | 'default' | 'lg';
+/** The reading direction of the page. */
+type CosmosDirection = 'ltr' | 'rtl';
 type CosmosThemeMeta = PaletteMeta & {
     id: CosmosTheme;
     dark: boolean;
@@ -5840,9 +6588,17 @@ type CosmosTextSizeMeta = {
     label: string;
     scale: number;
 };
+type CosmosDensityMeta = {
+    id: CosmosDensity;
+    label: string;
+};
+type CosmosRadiusMeta = {
+    id: CosmosRadius;
+    label: string;
+};
 /**
- * The page's appearance. `font` and `textSize` are optional: leave them out
- * and `applyAppearance` doesn't touch their attributes.
+ * The page's appearance. `font`, `textSize`, `density`, `radius` and `direction`
+ * are optional: leave them out and `applyAppearance` doesn't touch their attributes.
  */
 type CosmosAppearance = {
     /** `system` follows `prefers-color-scheme`: see `systemThemes`. */
@@ -5852,6 +6608,10 @@ type CosmosAppearance = {
     accent: CosmosAccent;
     font?: CosmosFont;
     textSize?: CosmosTextSize;
+    density?: CosmosDensity;
+    radius?: CosmosRadius;
+    /** The reading direction: the `dir` attribute on `<html>`, none for `ltr`. */
+    direction?: CosmosDirection;
 };
 /** The four themes shipped by `@sckyzo/cosmos-theme`, ready for `<PalettePicker>`. */
 declare const COSMOS_THEMES: CosmosThemeMeta[];
@@ -5875,6 +6635,17 @@ declare const COSMOS_ACCENTS: CosmosAccentMeta[];
 declare const COSMOS_FONTS: CosmosFontMeta[];
 /** The four text sizes of `@sckyzo/cosmos-theme`, smallest first. */
 declare const COSMOS_TEXT_SIZES: CosmosTextSizeMeta[];
+/**
+ * The three densities of `@sckyzo/cosmos-theme`, tightest first. They move the
+ * height of controls and the vertical padding of rows, nothing else.
+ */
+declare const COSMOS_DENSITIES: CosmosDensityMeta[];
+/**
+ * The four corner radii of `@sckyzo/cosmos-theme`, sharpest first. They rescale
+ * Tailwind's `--radius-*` tokens (`rounded-sm` to `rounded-4xl`); `rounded-full`
+ * never moves.
+ */
+declare const COSMOS_RADII: CosmosRadiusMeta[];
 /** `true` for the themes that enable Tailwind's `dark:` variant. */
 declare const isDarkTheme: (theme: CosmosTheme) => boolean;
 /** Whether the device asks for a dark color scheme. `false` during SSR or without `matchMedia`. */
@@ -5892,13 +6663,14 @@ declare const resolveTheme: (choice: CosmosThemeChoice, prefersDark: boolean, sy
 declare const watchSystemTheme: (onChange: (prefersDark: boolean) => void) => (() => void);
 /**
  * Apply an appearance to `root` (default `<html>`): swaps the theme class and
- * sets `data-accent`, `data-font` and `data-text-size`, removing each one for
- * its default (blue, Outfit, `md`). A `system` theme is resolved with
- * `prefers-color-scheme` when applied: call this again on `watchSystemTheme`.
- * A `font` or `textSize` left out keeps its
- * attribute as it is. No-op during SSR.
+ * sets `data-accent`, `data-font`, `data-text-size`, `data-density` and
+ * `data-radius`, and `dir="rtl"` for a `direction` of `rtl`, removing each one
+ * for its default (blue, Outfit, `md`, `default`, `default`, `ltr`). A `system`
+ * theme is resolved with `prefers-color-scheme` when applied: call this again
+ * on `watchSystemTheme`. A `font`, `textSize`, `density`, `radius` or `direction`
+ * left out keeps its attribute as it is. No-op during SSR.
  */
-declare const applyAppearance: ({ theme: choice, systemThemes, accent, font, textSize }: CosmosAppearance, root?: HTMLElement) => void;
+declare const applyAppearance: ({ theme: choice, systemThemes, accent, font, textSize, density, radius, direction, }: CosmosAppearance, root?: HTMLElement) => void;
 
 type AppearanceSettingsProps<T extends CosmosThemeChoice = CosmosTheme> = {
     /** Selected theme (`'system'` when `themes` offers it: then type the state as `CosmosThemeChoice`). */
@@ -5928,10 +6700,16 @@ type AppearanceSettingsProps<T extends CosmosThemeChoice = CosmosTheme> = {
     textSize?: CosmosTextSize;
     /** Shows the text size group. */
     onTextSizeChange?: (textSize: CosmosTextSize) => void;
+    /** Selected density. Default `'default'`. */
+    density?: CosmosDensity;
+    /** Shows the density group. */
+    onDensityChange?: (density: CosmosDensity) => void;
     /** Heading of the font group. Default `'Font'`. */
     fontLabel?: string;
     /** Heading of the text size group. Default `'Text size'`. */
     textSizeLabel?: string;
+    /** Heading of the density group. Default `'Density'`. */
+    densityLabel?: string;
     /**
      * Fonts to offer. Default: all of `COSMOS_FONTS`. Offer only the fonts whose
      * CSS the app imports (`@sckyzo/cosmos-theme/fonts/<id>`).
@@ -5939,6 +6717,8 @@ type AppearanceSettingsProps<T extends CosmosThemeChoice = CosmosTheme> = {
     fonts?: CosmosFontMeta[];
     /** Text sizes to offer. Default: all of `COSMOS_TEXT_SIZES`. */
     textSizes?: CosmosTextSizeMeta[];
+    /** Densities to offer. Default: all of `COSMOS_DENSITIES`. */
+    densities?: CosmosDensityMeta[];
     /**
      * Pin each group's heading to the top of the scrolling ancestor while its group is in view.
      * For a panel that scrolls (`AppearanceMenu` sets it): the headings paint the `Popover` surface
@@ -5950,11 +6730,11 @@ type AppearanceSettingsProps<T extends CosmosThemeChoice = CosmosTheme> = {
 };
 /**
  * AppearanceSettings — theme and accent pickers for the Cosmos themes, built
- * on `<PalettePicker>` and `<AccentPicker>`, plus font and text size pickers
- * when their `on…Change` handlers are set. Controlled: pass the result to
+ * on `<PalettePicker>` and `<AccentPicker>`, plus font, text size and density
+ * pickers when their `on…Change` handlers are set. Controlled: pass the result to
  * `applyAppearance` (or your own theme switcher) to update the page.
  */
-declare const AppearanceSettings: <T extends CosmosThemeChoice = CosmosTheme>({ theme, accent, onThemeChange, onAccentChange, themeLabel, accentLabel, themes, accents, themeColumns, font, onFontChange, textSize, onTextSizeChange, fontLabel, textSizeLabel, fonts, textSizes, stickyHeadings, className, }: AppearanceSettingsProps<T>) => react.JSX.Element;
+declare const AppearanceSettings: <T extends CosmosThemeChoice = CosmosTheme>({ theme, accent, onThemeChange, onAccentChange, themeLabel, accentLabel, themes, accents, themeColumns, font, onFontChange, textSize, onTextSizeChange, density, onDensityChange, fontLabel, textSizeLabel, densityLabel, fonts, textSizes, densities, stickyHeadings, className, }: AppearanceSettingsProps<T>) => react.JSX.Element;
 
 type AppearanceMenuSize = 'sm' | 'md';
 type AppearanceMenuProps<T extends CosmosThemeChoice = CosmosTheme> = Omit<AppearanceSettingsProps<T>, 'className' | 'stickyHeadings'> & {
@@ -5964,7 +6744,7 @@ type AppearanceMenuProps<T extends CosmosThemeChoice = CosmosTheme> = Omit<Appea
     size?: AppearanceMenuSize;
     /**
      * Adds a "Reset" button under the groups, always in view. Called with no argument: put the
-     * theme, accent, font and text size back to the app's defaults. The panel stays open.
+     * theme, accent, font, text size and density back to the app's defaults. The panel stays open.
      */
     onReset?: () => void;
     /** Class for the trigger button. */
@@ -5972,22 +6752,131 @@ type AppearanceMenuProps<T extends CosmosThemeChoice = CosmosTheme> = Omit<Appea
 };
 /**
  * AppearanceMenu — icon button for a top bar that opens `<AppearanceSettings>`
- * in a panel flush with its right edge. Controlled like AppearanceSettings:
+ * in a panel flush with its end edge. Controlled like AppearanceSettings:
  * apply the choice in the callbacks (for example with `applyAppearance`). The
  * panel stays open while the user tries combinations; Escape, a click
  * outside or the button close it.
  */
 declare const AppearanceMenu: <T extends CosmosThemeChoice = CosmosTheme>({ label, size, onReset, className, ...settings }: AppearanceMenuProps<T>) => react.JSX.Element;
 
+/** The shell's navigation: a sidebar down the side, or a navbar across the top. */
+type CustomizerLayout = 'vertical' | 'horizontal';
+/**
+ * The sidebar's mode: `expanded`, `collapsed` to its icons, `hover` (collapsed, opens while the
+ * pointer rests on it) or `compact` (icons over small labels).
+ */
+type CustomizerSidebar = 'expanded' | 'collapsed' | 'hover' | 'compact';
+/**
+ * What the Customizer holds: the page's appearance (what `applyAppearance` takes) plus the three
+ * choices about the shell. Every field is optional but the theme and the accent; a missing one
+ * shows as its Cosmos default.
+ */
+type CustomizerValue = CosmosAppearance & {
+    layout?: CustomizerLayout;
+    sidebar?: CustomizerSidebar;
+    container?: ShellContainer;
+};
+/** A section of the panel, in the order the panel lists them. */
+type CustomizerSection = 'presets' | 'theme' | 'accent' | 'font' | 'textSize' | 'density' | 'radius' | 'direction' | 'layout' | 'sidebar' | 'container';
+/** A named value the host offers as a one-click starting point. */
+type CustomizerPreset = {
+    id: string;
+    label: string;
+    /** The fields it sets; the others keep the current value. */
+    value: Partial<CustomizerValue>;
+};
+/** Every section of the panel, in order: the default of `sections`. */
+declare const CUSTOMIZER_SECTIONS: CustomizerSection[];
+/** The Cosmos defaults: the default of `defaultValue`, and what a missing field shows as. */
+declare const CUSTOMIZER_DEFAULT_VALUE: {
+    theme: "light";
+    accent: "blue";
+    font: "outfit";
+    textSize: "md";
+    density: "default";
+    radius: "default";
+    direction: "ltr";
+    layout: "vertical";
+    sidebar: "expanded";
+    container: "fluid";
+};
+type CustomizerProps = {
+    /** Whether the panel is open. The host owns it, as for a `Drawer`. */
+    open: boolean;
+    /** Called by the close button, the backdrop and Escape. */
+    onClose: () => void;
+    /** The current choices. */
+    value: CustomizerValue;
+    /**
+     * Called with the whole new value as soon as an option is picked (on click, never on hover),
+     * a preset is applied, or Reset is pressed. The Customizer applies nothing itself: see above.
+     */
+    onChange: (next: CustomizerValue) => void;
+    /** What Reset restores. Default `CUSTOMIZER_DEFAULT_VALUE`. */
+    defaultValue?: CustomizerValue;
+    /**
+     * Starting points. The Presets section shows only when this is not empty; Cosmos ships none.
+     * The preset whose fields all equal the current value shows as selected.
+     */
+    presets?: CustomizerPreset[];
+    /**
+     * The sections to show. A host hides one by leaving it out (a fixed layout: no `layout`,
+     * `sidebar` or `container`). They always appear in the panel's order, whatever the order here.
+     * Default `CUSTOMIZER_SECTIONS`.
+     */
+    sections?: CustomizerSection[];
+    /** Themes to offer. Default: all of `COSMOS_THEMES`. Add `COSMOS_SYSTEM_THEME` for "System". */
+    themes?: (CosmosThemeMeta | CosmosSystemThemeMeta)[];
+    /** Accents to offer. Default: all of `COSMOS_ACCENTS`. */
+    accents?: CosmosAccentMeta[];
+    /** Fonts to offer. Default: all of `COSMOS_FONTS`; offer only those whose CSS the app imports. */
+    fonts?: CosmosFontMeta[];
+    /** Text sizes to offer. Default: all of `COSMOS_TEXT_SIZES`. */
+    textSizes?: CosmosTextSizeMeta[];
+    /** Densities to offer. Default: all of `COSMOS_DENSITIES`. */
+    densities?: CosmosDensityMeta[];
+    /** Corner radii to offer. Default: all of `COSMOS_RADII`. */
+    radii?: CosmosRadiusMeta[];
+    /** Headings of the sections, by section. Default: English names ("Accent color", "Text size"…). */
+    labels?: Partial<Record<CustomizerSection, string>>;
+    /** Title of the panel. Default `'Customize'`. */
+    title?: string;
+    /** Line under the title. Default `'Changes apply at once.'`. */
+    subtitle?: string;
+    /** Width of the panel. Default `lg`. */
+    size?: DrawerSize;
+};
+/**
+ * Customizer — a panel on the end side where a user shapes the app: theme, accent, font, text
+ * size, density, corner radius, direction, and the shell's layout, sidebar mode and container, with optional
+ * presets, a Reset and a "Copy config" that puts the value on the clipboard as JSON. Built on
+ * `Drawer`, `PalettePicker`, `AccentPicker` and `OptionPicker`.
+ *
+ * It only holds the choice, and applies nothing: it is controlled (`value`, `onChange`) and the
+ * host does the rest, on every change:
+ *
+ * - `applyAppearance(value)` sets the theme, accent, font, text size, density, radius
+ *   (`data-radius`) and direction (`dir`) on `<html>`;
+ * - `value.container` is `Shell`'s `container`;
+ * - `value.sidebar` drives `Shell` and `Sidebar`: `collapsed` is `Shell`'s `sidebarCollapsed`,
+ *   `hover` is collapsed plus `expandOnHover="overlay"`, `compact` is `Sidebar`'s
+ *   `variant="compact"`, `expanded` is none of those;
+ * - `value.layout` `horizontal` puts a `Navbar` in `Shell`'s `topbar` in place of the `Sidebar`.
+ *
+ * Keep the Customizer outside what `layout` swaps, so the panel keeps its focus as the shell
+ * re-renders. Saving the value (local storage, a user profile) is the host's too.
+ */
+declare const Customizer: ({ open, onClose, value, onChange, defaultValue, presets, sections, themes, accents, fonts, textSizes, densities, radii, labels, title, subtitle, size, }: CustomizerProps) => react.JSX.Element;
+
 type BlockquoteVariant = 'plain' | 'solid' | 'icon' | 'testimonial';
 type BlockquoteSize = 'sm' | 'md' | 'lg';
-type BlockquoteAlign = 'left' | 'center' | 'right';
+type BlockquoteAlign = 'start' | 'center' | 'end';
 type BlockquoteProps = {
     children: ReactNode;
     /**
      * Visual treatment:
      * - `plain` (default): bare italic quote
-     * - `solid`: muted background + brand-coloured left border
+     * - `solid`: muted background + brand-coloured border on the start edge
      * - `icon`: large quote glyph above the text
      * - `testimonial`: solid background + author block in the footer
      */
@@ -6022,7 +6911,7 @@ type KbdProps = {
  */
 declare const Kbd: ({ children, size, className }: KbdProps) => react.JSX.Element;
 
-type FigureAlign = 'left' | 'center' | 'right';
+type FigureAlign = 'start' | 'center' | 'end';
 type FigureSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 type FigureRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 type FigureProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
@@ -6090,7 +6979,7 @@ type ChatMessageContent = {
     children: ReactNode;
 };
 type ChatMessageBaseProps = {
-    /** `outgoing` (right, accent) for the current user, `incoming` (left) otherwise. */
+    /** `outgoing` (at the end of the line, accent) for the current user, `incoming` (at the start) otherwise. */
     direction: ChatMessageDirection;
     /** Sender name: shown on the first message of a group, always read by screen readers. */
     sender: string;
@@ -6129,8 +7018,8 @@ type ChatMessageBaseProps = {
 };
 type ChatMessageProps = ChatMessageBaseProps & ChatMessageContent;
 /**
- * One chat bubble. Incoming bubbles sit on the left with the sender's avatar
- * on the first message of a group; outgoing ones sit on the right in the
+ * One chat bubble. Incoming bubbles sit at the start of the line with the sender's
+ * avatar on the first message of a group; outgoing ones sit at the end in the
  * accent color with their delivery state. Sender and time are read by screen
  * readers on every message, grouped or not.
  */
@@ -6145,7 +7034,7 @@ type ChatComposerProps = {
     /** Accessible name of the send button. Default `Send message`. */
     sendLabel?: string;
     disabled?: boolean;
-    /** Slot left of the textarea, e.g. an attach-file button. */
+    /** Slot before the textarea, e.g. an attach-file button. */
     attachment?: ReactNode;
     /**
      * A line under the field and the send button, inside the same panel: an attach button, a model
@@ -6296,7 +7185,7 @@ type ChatConversationListProps = {
     className?: string;
 };
 /**
- * Conversation picker for the left pane of a two-pane chat: name, last
+ * Conversation picker for the start pane of a two-pane chat: name, last
  * message, time, unread count and presence of each thread.
  */
 declare const ChatConversationList: ({ conversations, selectedId, onSelect, label, className, }: ChatConversationListProps) => react.JSX.Element;
@@ -6382,6 +7271,11 @@ type CommentLabels = {
     replies?: (author: string) => string;
     /** The button that unfolds the replies past `maxReplies`. Default `Show 3 more replies`. */
     showReplies?: (hidden: number) => string;
+    /**
+     * The same button with `keepReplies="last"`, where the folded replies are the older ones.
+     * Default `Show 3 earlier replies`.
+     */
+    showEarlierReplies?: (hidden: number) => string;
     /** The same button once they are unfolded. Default `Show fewer replies`. */
     hideReplies?: string;
 };
@@ -6464,6 +7358,12 @@ type CommentBaseProps = {
     replies?: ReactNode;
     /** Replies shown before the rest fold behind a "Show n more replies" button. Default `2`. */
     maxReplies?: number;
+    /**
+     * Which replies stay on screen when they fold: the `first` `maxReplies` (the rest fold below
+     * them, "Show n more replies"), or the `last` ones, for a ticket where the latest exchanges
+     * matter (the older ones fold above them, "Show n earlier replies"). Default `first`.
+     */
+    keepReplies?: 'first' | 'last';
     /** Texts for another language; a `CommentThread` can give them to all of its comments. */
     labels?: CommentLabels;
     className?: string;
@@ -6474,13 +7374,52 @@ type CommentProps = CommentBaseProps & CommentContent;
 /**
  * One comment on a record: avatar, author, role, time, body, and the actions the host allows.
  * Reply and Edit open a `CommentComposer` in place; the host receives the text and owns the data.
- * Replies are `Comment`s passed as `replies`, folded beyond `maxReplies`.
+ * Replies are `Comment`s passed as `replies`, folded beyond `maxReplies` (the first ones stay, or
+ * the last ones with `keepReplies="last"`).
  */
-declare function Comment({ author, avatarSrc, role, time, edited, variant, text, children, onReply, onEdit, onDelete, editText, replies, maxReplies, labels: ownLabels, className, ref, }: CommentProps): react.JSX.Element;
+declare function Comment({ author, avatarSrc, role, time, edited, variant, text, children, onReply, onEdit, onDelete, editText, replies, maxReplies, keepReplies, labels: ownLabels, className, ref, }: CommentProps): react.JSX.Element;
 
+/** One thing the composer can write: a reply to the customer, an internal note. */
+type CommentComposerMode = {
+    /** What `onSubmit` and `onModeChange` receive. */
+    value: string;
+    /** The segment's text. */
+    label: string;
+    /**
+     * A note only the team sees. Tints the field and the submit button the way
+     * `variant="internal"` tints a comment, and says so in words, so it is not sent to a customer
+     * by mistake. Default `false`.
+     */
+    internal?: boolean;
+    /** Placeholder while this mode is selected. Default: the composer's `placeholder`. */
+    placeholder?: string;
+    /** Submit button text while this mode is selected. Default: the composer's `submitLabel`. */
+    submitLabel?: string;
+};
 type CommentComposerProps = {
-    /** Called with the trimmed text when the user submits a non-empty comment. */
-    onSubmit: (text: string) => void;
+    /**
+     * Called with the trimmed text when the user submits a non-empty comment, and with the selected
+     * mode's `value` when the composer has `modes` (the text alone otherwise).
+     */
+    onSubmit: (text: string, mode?: string) => void;
+    /**
+     * What the text can be (Reply, Internal note), as a segmented control above the field. Without
+     * it the composer has no control and `onSubmit` gets the text alone.
+     */
+    modes?: CommentComposerMode[];
+    /** The selected mode's `value`, when the host controls it. Only `undefined` means uncontrolled. */
+    mode?: string;
+    /** The mode selected first when uncontrolled. Default: the first of `modes`. */
+    defaultMode?: string;
+    /** Called with the new mode's `value`, in both modes. */
+    onModeChange?: (mode: string) => void;
+    /** Accessible name of the modes' control. Default `Type of message`. */
+    modeLabel?: string;
+    /**
+     * Said, and announced when the mode changes, while an `internal` mode is selected. Default
+     * `Internal note: only your team sees this.`
+     */
+    internalNotice?: string;
     /**
      * Shows a Cancel button and lets Escape cancel. Without it neither exists, which is right for
      * the composer at the bottom of a thread.
@@ -6518,9 +7457,465 @@ type CommentComposerProps = {
 /**
  * The field to write, reply to or edit a comment. Enter adds a line (a comment is not a chat
  * message); the submit button, or Ctrl/Cmd+Enter, sends. Built on `Textarea` with `autoResize`.
- * Submit stays disabled while the text is empty or `submitting`.
+ * Submit stays disabled while the text is empty or `submitting`. `modes` adds a segmented control
+ * to choose what is being written.
+ */
+declare function CommentComposer({ onSubmit, modes, mode: modeProp, defaultMode, onModeChange, modeLabel, internalNotice, onCancel, value, defaultValue, onChange, submitting, label, placeholder, submitLabel, cancelLabel, rows, maxRows, autoFocus, className, ref, }: CommentComposerProps): react.JSX.Element;
+
+/** The severities a log line can carry, from the least to the most severe. */
+type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+/** A level as the components know it: one of `LogLevel`, or `unknown` for anything else. */
+type LogLevelKey = LogLevel | 'unknown';
+/** Every level, least severe first. */
+declare const LOG_LEVELS: readonly LogLevel[];
+/** Every level key, `unknown` last: the default set of the level filters. */
+declare const LOG_LEVEL_KEYS: readonly LogLevelKey[];
+/** The id of a line: stable and unique in the buffer. */
+type LogLineId = string | number;
+/**
+ * One record of a log. The host owns the data: it fetches, streams and trims the lines, the
+ * components draw what they are given.
+ */
+type LogLine = {
+    /** Stable and unique in the buffer: it keys the row, and tells which lines are new. */
+    id: LogLineId;
+    /** A `Date`, a timestamp in milliseconds or an ISO 8601 string. Shown with milliseconds. */
+    time: DateTimeValue;
+    /**
+     * `trace`, `debug`, `info`, `warn`, `error` or `fatal`, in any case. Missing or anything else
+     * (`warning`, `notice`…) draws as `unknown`.
+     */
+    level?: LogLevel | (string & {});
+    /** The logger or the service that wrote the line. */
+    source?: string;
+    /** The text of the line. Drawn as text, never as HTML. */
+    message: string;
+    /** Structured data of the record (a request id, a duration…). Shown when the row is expanded. */
+    fields?: Record<string, unknown>;
+    /** A stack trace, shown when the row is expanded. */
+    stack?: string;
+};
+/** The parts of a row a viewer can hide, besides the message. */
+type LogColumn = 'time' | 'level' | 'source';
+/** Which end of the buffer the newest line is at. */
+type LogOrder = 'newest-last' | 'newest-first';
+
+type LogTone = 'terminal' | 'surface';
+type LogLevelBadgeProps = {
+    /**
+     * The level of the line, in any case: `trace`, `debug`, `info`, `warn`, `error` or `fatal`.
+     * Missing, or anything else, draws as `unknown`.
+     */
+    level?: string;
+    /**
+     * The ground it sits on. `surface` (default) follows the theme, for a table or a card;
+     * `terminal` is for the dark panel of a `LogViewer`, dark in every theme.
+     */
+    tone?: LogTone;
+    className?: string;
+};
+/** The text of each level: the badge never says it with colour alone. */
+declare const LOG_LEVEL_LABEL: Record<LogLevelKey, string>;
+/**
+ * LogLevelBadge — the level of a log line as a short label in its colour (`ERROR`, `WARN`…). The
+ * word carries the level, the colour only backs it. Use it in a table cell, a detail panel or a
+ * card; `LogViewer` draws it in every row.
+ */
+declare const LogLevelBadge: ({ level, tone, className }: LogLevelBadgeProps) => react.JSX.Element;
+
+type LogDensity = 'compact' | 'comfortable';
+type LogViewerProps = {
+    /**
+     * The lines of the buffer, oldest first, whatever the `order` they are drawn in. The host
+     * fetches, streams and trims them; each `id` is unique and stays the same from one render to
+     * the next.
+     */
+    lines: readonly LogLine[];
+    /** Accessible name of the log. Default `Log`. Name it, or point `aria-labelledby` at a heading. */
+    'aria-label'?: string;
+    /** Id of an element that names the log, instead of `aria-label`. */
+    'aria-labelledby'?: string;
+    /**
+     * `terminal` (default) is a dark panel in every theme, as a console is. `surface` follows the
+     * theme: for a card on a dashboard.
+     */
+    tone?: LogTone;
+    /** `compact` (default) is one line per record; `comfortable` puts the message under its details. */
+    density?: LogDensity;
+    /**
+     * Wrap the long lines (`true`), or keep each on one line and scroll sideways (`false`, default).
+     * Wrapped lines have no fixed height, so they are all drawn, not windowed: keep the buffer to a
+     * few thousand lines, or leave `wrap` off for a larger one.
+     */
+    wrap?: boolean;
+    /** Where the newest line sits: last, like a tail (`newest-last`, default), or first. */
+    order?: LogOrder;
+    /** The parts of a row to draw, besides the message. Default all of them. */
+    columns?: readonly LogColumn[];
+    /** Number the lines, from 1, in the order of `lines` (a trimmed buffer renumbers). Default `false`. */
+    lineNumbers?: boolean;
+    /**
+     * Stay at the end while lines arrive (`true`), at the newest line: the bottom for `newest-last`,
+     * the top for `newest-first`. Scrolling away from the end pauses it, and scrolling back to the
+     * end, or the "Jump to latest" button, resumes it. Controlled; defaults to `defaultFollow`.
+     */
+    follow?: boolean;
+    /** Initial `follow` while uncontrolled. Default `true`. */
+    defaultFollow?: boolean;
+    /** Called with the state to move to when the reader scrolls away from the end or back to it. */
+    onFollowChange?: (follow: boolean) => void;
+    /**
+     * The levels to show. Left out, all of them; an empty list shows nothing. Pair it with the
+     * toolbar's `activeLevels`.
+     */
+    activeLevels?: readonly LogLevelKey[];
+    /** The sources to show. Left out or empty, all of them. Pair it with the toolbar's `activeSources`. */
+    activeSources?: readonly string[];
+    /**
+     * The text to find in the messages and sources, highlighted in every line. Case-insensitive.
+     * Empty or left out, no search.
+     */
+    search?: string;
+    /** Read `search` as a regular expression. A pattern that does not compile finds nothing. Default `false`. */
+    searchRegex?: boolean;
+    /**
+     * Which match is the active one, counted from 0 among the lines that match: it is drawn
+     * stronger and scrolled into view when it changes. Held by the host (`LogToolbar` moves it with
+     * previous and next, wrapping around); clamped to the matches there are. Default 0.
+     */
+    activeMatch?: number;
+    /** Called with the number of lines that match, whenever it changes (also to 0). */
+    onMatchCountChange?: (count: number) => void;
+    /** Ids of the expanded lines, when controlled. */
+    expandedIds?: readonly LogLineId[];
+    /** Ids of the lines expanded at first, when uncontrolled. None by default. */
+    defaultExpandedIds?: readonly LogLineId[];
+    /** Called with the ids to move to when a line is expanded or collapsed. */
+    onExpandedIdsChange?: (ids: readonly LogLineId[]) => void;
+    /**
+     * Adds an "Open details" button to an expanded line, called with it: open a `LogEntryDetail` in
+     * a drawer or a side panel.
+     */
+    onOpenLine?: (line: LogLine) => void;
+    /** The line to mark as the one in focus (`aria-current`), as in the context of an entry. */
+    currentId?: LogLineId;
+    /**
+     * Announce the error and fatal lines that arrive to screen readers, in a polite live region of
+     * their own: up to three, then the count of the rest. Off by default, as is every other line: a
+     * stream read aloud line by line cannot be followed.
+     */
+    announceErrors?: boolean;
+    /** Shown when no line is left to draw. Default `No log lines.` */
+    emptyMessage?: string;
+    /** BCP 47 tag for the times (`fr-FR`). Default: the browser's language. */
+    locale?: string;
+    /** IANA zone for the times (`Asia/Tokyo`). Default: the browser's zone. */
+    timeZone?: string;
+    /** The height of the viewer: a CSS length, or a number of px. Default `24rem`. */
+    height?: number | string;
+    className?: string;
+    /** Ref to the scrolling element (`role="log"`). */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * LogViewer — the live tail of a log: one monospace row per record, with its time, level, source
+ * and message. It stays at the end while lines arrive and pauses when the reader scrolls away,
+ * with a "Jump to latest" button that counts what came meanwhile. It highlights a search with an
+ * active match, expands a row in place to show its fields and stack trace, and is windowed, so
+ * tens of thousands of lines stay smooth in the default mode (see `wrap` for the limit).
+ *
+ * The host owns the data (fetching, streaming, trimming the buffer) and the filters: it passes
+ * `lines` and what to show. Messages, sources, fields and stacks are text, never HTML. The log
+ * does not announce new lines (`aria-live="off"`); `announceErrors` reads the error ones.
+ */
+declare const LogViewer: ({ lines, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tone, density, wrap, order, columns, lineNumbers, follow: followProp, defaultFollow, onFollowChange, activeLevels, activeSources, search, searchRegex, activeMatch, onMatchCountChange, expandedIds: expandedProp, defaultExpandedIds, onExpandedIdsChange, onOpenLine, currentId, announceErrors: announce, emptyMessage, locale, timeZone, height, className, ref, }: LogViewerProps) => react.JSX.Element;
+
+/** Where a job or one of its steps stands. */
+type JobStatus = 'queued' | 'running' | 'passed' | 'failed' | 'skipped';
+/** One line of a step: its text, and when it was written. */
+type JobLogLine = {
+    /** The raw text of the line. ANSI colours are drawn as theme colours; markup stays text. */
+    text: string;
+    /** A `Date`, a timestamp in milliseconds or an ISO 8601 string. Shown in the timestamps column. */
+    timestamp?: DateTimeValue;
+};
+/** One step of a job, as a CI tool shows it. */
+type JobLogStep = {
+    /** Stable and unique among the steps: it keys the step and builds the links of its lines. */
+    id: string;
+    /** The name of the step. Text, never HTML. */
+    name: string;
+    status: JobStatus;
+    /** How long the step took, in milliseconds. The host measures it, and updates it while the step runs. */
+    duration?: number;
+    /** When the step started: the origin of the `elapsed` timestamps. Defaults to the first timestamp of the step. */
+    startedAt?: DateTimeValue;
+    /** The output of the step, oldest first: a string is a line without a timestamp. */
+    lines: readonly (string | JobLogLine)[];
+};
+/** A line of a step: `line` counts from 1 in each step. */
+type JobLogLineRef = {
+    step: string;
+    line: number;
+};
+/** How the timestamps column reads: the time of day of each line, or the time since its step started. */
+type JobLogTimestampFormat = 'clock' | 'elapsed';
+/** The controls of the toolbar the host can leave out. */
+type JobLogControl = 'search' | 'timestamps' | 'wrap' | 'expand' | 'download';
+/** The `href` of a line's number: `#<prefix><step id>-L<n>`. */
+declare const jobLogLineHref: (prefix: string, ref: JobLogLineRef) => string;
+/**
+ * The line a URL hash (`#run-tests-L6`, with or without the `#`) points at, for a host that
+ * syncs `currentLine` with `location.hash`. `prefix` is the `idPrefix` of the log. `null` for a
+ * hash that is not a line of this log.
+ */
+declare const parseJobLogHash: (hash: string, prefix?: string) => JobLogLineRef | null;
+
+type JobLogProps = {
+    /** The steps of the job, in order. Each `id` is unique and stays the same from one render to the next. */
+    steps: readonly JobLogStep[];
+    /** Accessible name of the log. Default: the `title`, else `Job log`. */
+    'aria-label'?: string;
+    /** Id of an element that names the log, instead of `aria-label`. */
+    'aria-labelledby'?: string;
+    /** Heading of the log: the job's name. The header is drawn when any of `title`, `status`, `meta` or `duration` is given. */
+    title?: ReactNode;
+    /** The status of the job as a whole. */
+    status?: JobStatus;
+    /** What goes with the title: a branch and a commit, a trigger. Drawn in monospace. */
+    meta?: ReactNode;
+    /** How long the job took, in milliseconds. The host measures it. */
+    duration?: number;
+    /**
+     * `terminal` (default) is a dark panel in every theme, as a console is. `surface` follows the
+     * theme: for a card on a page.
+     */
+    tone?: LogTone;
+    /** The controls of the toolbar to draw. Default all of them; an empty list leaves the toolbar out. */
+    controls?: readonly JobLogControl[];
+    /** Ids of the open steps, when controlled. */
+    expandedSteps?: readonly string[];
+    /**
+     * Ids of the steps open at first, when uncontrolled. Default: the failed and the running
+     * steps. A step that starts running later opens, as the reader would open it.
+     */
+    defaultExpandedSteps?: readonly string[];
+    /** Called with the ids to move to when a step is opened or closed. */
+    onExpandedStepsChange?: (ids: readonly string[]) => void;
+    /**
+     * The line in focus, when controlled: its step opens, it scrolls into view and is marked
+     * (`aria-current`). `null` is none. A line is a step id and a number counted from 1 in that step.
+     */
+    currentLine?: JobLogLineRef | null;
+    /** The line in focus at first, when uncontrolled. None by default. */
+    defaultCurrentLine?: JobLogLineRef | null;
+    /**
+     * Called with the line to move to when a line number is clicked. The log never reads or writes
+     * `location`: a host that syncs it with the URL hash does it here (see `parseJobLogHash`). A
+     * click with a modifier key is the browser's own, so "open in a new tab" works.
+     */
+    onCurrentLineChange?: (line: JobLogLineRef) => void;
+    /** Put in front of the ids of the line links (`#<prefix><step id>-L<n>`), to tell two logs on a page apart. */
+    idPrefix?: string;
+    /** Show the timestamps column, when controlled. Default off. */
+    timestamps?: boolean;
+    /** Initial `timestamps` while uncontrolled. Default `false`. */
+    defaultTimestamps?: boolean;
+    /** Called with the state to move to. */
+    onTimestampsChange?: (timestamps: boolean) => void;
+    /**
+     * What the timestamps column says: the time of day of each line (`clock`, default), or the time
+     * since its step started (`elapsed`, `+0:04.2`).
+     */
+    timestampFormat?: JobLogTimestampFormat;
+    /**
+     * Wrap the long lines, when controlled. Default off: each line stays on one line and the lines
+     * of a step scroll sideways. Wrapped lines have no fixed height, so all of them are drawn, not
+     * windowed: keep a step to a few thousand lines, or leave `wrap` off.
+     */
+    wrap?: boolean;
+    /** Initial `wrap` while uncontrolled. Default `false`. */
+    defaultWrap?: boolean;
+    /** Called with the state to move to. */
+    onWrapChange?: (wrap: boolean) => void;
+    /** The text to find in the lines, highlighted, case-insensitive: the search of the toolbar, when controlled. */
+    search?: string;
+    /** Initial search while uncontrolled. Default empty. */
+    defaultSearch?: string;
+    /** Called with the text typed. */
+    onSearchChange?: (search: string) => void;
+    /**
+     * Stay at the end while a step is running (`true`). Scrolling away from the end pauses it, and
+     * scrolling back to it, or "Jump to latest", resumes it. Controlled; defaults to `defaultFollow`.
+     */
+    follow?: boolean;
+    /** Initial `follow` while uncontrolled. Default `true`. */
+    defaultFollow?: boolean;
+    /** Called with the state to move to. */
+    onFollowChange?: (follow: boolean) => void;
+    /** Name of the downloaded file. Default `job-log.txt`. */
+    fileName?: string;
+    /** BCP 47 tag for the clock times (`fr-FR`). Default: the browser's language. */
+    locale?: string;
+    /** IANA zone for the clock times (`Asia/Tokyo`). Default: the browser's zone. */
+    timeZone?: string;
+    /** The height of the log: a CSS length, or a number of px. Default `32rem`. */
+    height?: number | string;
+    className?: string;
+    /** Ref to the scrolling element. */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * JobLog — the output of a CI job or a build: collapsible steps, each with its status and
+ * duration, its lines numbered from 1 and drawn with their ANSI colours as theme colours. Failed
+ * and running steps start open. The header of an open step sticks to the top while its lines
+ * scroll, and a long step is windowed, so tens of thousands of lines stay smooth.
+ *
+ * It is read differently from a live tail (`LogViewer`): a line number is a link, `currentLine`
+ * marks one line and scrolls to it, and the toolbar searches across all the steps, shows
+ * timestamps (the time of day, or the time since the step started), wraps lines, expands or
+ * collapses every step and downloads the log as plain text. While a step runs the log follows the
+ * end, pauses when the reader scrolls up, and has a "Jump to latest" button.
+ *
+ * The host owns the data and the clock: it passes `steps`, their durations and the new lines as
+ * they come. A line is text, never HTML: the ANSI colour codes are read into styled spans, and
+ * every other escape sequence is dropped.
+ */
+declare const JobLog: ({ steps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, title, status, meta, duration, tone, controls, expandedSteps: expandedProp, defaultExpandedSteps: defaultExpandedProp, onExpandedStepsChange, currentLine: currentProp, defaultCurrentLine, onCurrentLineChange, idPrefix, timestamps: timestampsProp, defaultTimestamps, onTimestampsChange, timestampFormat, wrap: wrapProp, defaultWrap, onWrapChange, search: searchProp, defaultSearch, onSearchChange, follow: followProp, defaultFollow, onFollowChange, fileName, locale, timeZone, height, className, ref, }: JobLogProps) => react.JSX.Element;
+
+type LogToolbarProps = {
+    /** Accessible name of the group of controls. Default `Log controls`. */
+    'aria-label'?: string;
+    /** The stream is running. Controlled; the toolbar has the Live / Paused button when `onLiveChange` is given. */
+    live?: boolean;
+    /** Initial `live` while uncontrolled. Default `true`. */
+    defaultLive?: boolean;
+    /**
+     * Called with the state to move to. Wire it to the viewer's `follow` to have the pause on
+     * scroll shown in the bar, or to your own switch that stops feeding the stream.
+     */
+    onLiveChange?: (live: boolean) => void;
+    /** The levels to offer as toggles, in the order to show them. No level toggles when omitted. */
+    levels?: readonly LogLevelKey[];
+    /** The number of lines per level, shown in the toggle. Count them with `countLogLevels`. */
+    levelCounts?: Partial<Record<LogLevelKey, number>>;
+    /** The levels that are on, when controlled. Default: all of `levels`. */
+    activeLevels?: readonly LogLevelKey[];
+    /** The levels on at first, when uncontrolled. Default: all of `levels`. */
+    defaultActiveLevels?: readonly LogLevelKey[];
+    /** Called with the levels to move to (in the order of `levels`). */
+    onActiveLevelsChange?: (levels: readonly LogLevelKey[]) => void;
+    /** The search text, when controlled. The search field is there when `onSearchChange` is given. */
+    search?: string;
+    /** Initial search text while uncontrolled. Default empty. */
+    defaultSearch?: string;
+    /** Called with the text typed. Reset the viewer's `activeMatch` to 0 here. */
+    onSearchChange?: (search: string) => void;
+    /** Read the search as a regular expression, when controlled. The toggle is there when `onSearchRegexChange` is given. */
+    searchRegex?: boolean;
+    /** Initial `searchRegex` while uncontrolled. Default `false`. */
+    defaultSearchRegex?: boolean;
+    /** Called with the state to move to. */
+    onSearchRegexChange?: (regex: boolean) => void;
+    /** How many lines match (the viewer's `onMatchCountChange`): shown as "2 of 3", and enables previous / next. */
+    matchCount?: number;
+    /** The active match, counted from 0. */
+    activeMatch?: number;
+    /**
+     * Called with the match to go to, wrapping around the ends, when previous or next is pressed
+     * (also Enter and Shift+Enter in the field). Previous and next are there when it is given.
+     */
+    onActiveMatchChange?: (index: number) => void;
+    /** The sources to offer in the filter, which is there when this is given. */
+    sources?: readonly string[];
+    /** The sources that are on, when controlled. Empty means all of them. */
+    activeSources?: readonly string[];
+    /** The sources on at first, when uncontrolled. Default none: all of them. */
+    defaultActiveSources?: readonly string[];
+    /** Called with the sources to move to. */
+    onActiveSourcesChange?: (sources: readonly string[]) => void;
+    /** Wrap the long lines, when controlled. The toggle is there when `onWrapChange` is given. */
+    wrap?: boolean;
+    /** Initial `wrap` while uncontrolled. Default `false`. */
+    defaultWrap?: boolean;
+    /** Called with the state to move to. */
+    onWrapChange?: (wrap: boolean) => void;
+    /** Newest line first or last, when controlled. The toggle is there when `onOrderChange` is given. */
+    order?: LogOrder;
+    /** Initial `order` while uncontrolled. Default `newest-last`. */
+    defaultOrder?: LogOrder;
+    /** Called with the order to move to. */
+    onOrderChange?: (order: LogOrder) => void;
+    /** The download button is there when this is given. The host builds the file from its buffer. */
+    onDownload?: () => void;
+    /** The clear button is there when this is given. */
+    onClear?: () => void;
+    /** BCP 47 tag for the counts. Default `en-US`: the numbers do not change between server and browser. */
+    locale?: string;
+    className?: string;
+};
+/**
+ * LogToolbar — the controls above a `LogViewer`, each there only when its props are given: Live /
+ * Paused, level toggles with their counts, search with previous / next and an optional regular
+ * expression, a source filter, wrap, order, download and clear. It holds none of the log: the host
+ * passes the same filters to the toolbar and the viewer.
+ *
+ * From `sm` up it is one bar. Below, Live / Paused and the search stay in the bar, and the levels,
+ * the sources and the view options move into a "Filters" popover whose button counts the active
+ * filters (levels narrowed, sources chosen). It sits in a page header, a card header, or on its own.
+ */
+declare const LogToolbar: ({ "aria-label": ariaLabel, live: liveProp, defaultLive, onLiveChange, levels, levelCounts, activeLevels: levelsProp, defaultActiveLevels, onActiveLevelsChange, search: searchProp, defaultSearch, onSearchChange, searchRegex: regexProp, defaultSearchRegex, onSearchRegexChange, matchCount, activeMatch, onActiveMatchChange, sources, activeSources: sourcesProp, defaultActiveSources, onActiveSourcesChange, wrap: wrapProp, defaultWrap, onWrapChange, order: orderProp, defaultOrder, onOrderChange, onDownload, onClear, locale, className, }: LogToolbarProps) => react.JSX.Element;
+
+type LogEntryContext = {
+    /** The lines just before the entry, oldest first. */
+    before: readonly LogLine[];
+    /** The lines just after it, oldest first. */
+    after: readonly LogLine[];
+};
+type LogEntryDetailProps = {
+    /** The record to show in full. */
+    line: LogLine;
+    /**
+     * The lines around the entry, for "Show context". Passed up front, the button only shows them;
+     * left out, pressing it calls `onShowContext` and the host passes them once it has them.
+     */
+    context?: LogEntryContext;
+    /**
+     * Called when "Show context" is pressed and there is no `context` yet: fetch the lines around
+     * `line`. The button is there when this or `context` is given.
+     */
+    onShowContext?: (line: LogLine) => void;
+    /** Called after a field value is copied. Every field has a copy button. */
+    onCopyField?: (field: string, value: unknown) => void;
+    /** Adds a "Filter on this value" button to every field, called with the field and its value. */
+    onFilterValue?: (field: string, value: unknown) => void;
+    /** Adds an "Exclude this value" button to every field, called with the field and its value. */
+    onExcludeValue?: (field: string, value: unknown) => void;
+    /** BCP 47 tag for the time. Default: the browser's language. */
+    locale?: string;
+    /** IANA zone for the time. Default: the browser's zone. */
+    timeZone?: string;
+    className?: string;
+};
+/**
+ * LogEntryDetail — one log record in full, for a drawer or a side panel: its level, time, source
+ * and message, the fields as key / value pairs with a copy button (and "filter on" / "exclude"
+ * buttons when the host handles them), the stack trace, the raw JSON, and the lines around it on
+ * demand. Everything is text, never HTML.
+ */
+declare const LogEntryDetail: ({ line, context, onShowContext, onCopyField, onFilterValue, onExcludeValue, locale, timeZone, className, }: LogEntryDetailProps) => react.JSX.Element;
+
+/** The level of a line: `level` lower-cased, or `unknown` when it is missing or not a `LogLevel`. */
+declare const parseLogLevel: (level: string | undefined) => LogLevelKey;
+/** Lines per level, every level present (0 when none): the counts of the toolbar's toggles. */
+declare const countLogLevels: (lines: readonly LogLine[]) => Record<LogLevelKey, number>;
+/**
+ * The lines the filters keep. `levels` and `sources` are the ones to show: left out (`undefined`)
+ * means no filter on that side, and an empty `sources` too (nothing chosen is "all sources"),
+ * while an empty `levels` shows nothing. A line without a source passes the source filter only
+ * when none is chosen. Returns `lines` itself when nothing is filtered.
  */
-declare function CommentComposer({ onSubmit, onCancel, value, defaultValue, onChange, submitting, label, placeholder, submitLabel, cancelLabel, rows, maxRows, autoFocus, className, ref, }: CommentComposerProps): react.JSX.Element;
+declare const filterLogLines: (lines: readonly LogLine[], levels?: readonly LogLevelKey[], sources?: readonly string[]) => readonly LogLine[];
 
-export { AccentPicker, Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, AnnouncementBar, AppearanceMenu, AppearanceSettings, AuditDiff, AuthLayout, Avatar, AvatarGroup, AvatarUploader, BackToTopFab, Backdrop, Badge, BarList, Blockquote, Breadcrumb, Button, ButtonGroup, COSMOS_ACCENTS, COSMOS_FONTS, COSMOS_SYSTEM_THEME, COSMOS_TEXT_SIZES, COSMOS_THEMES, Calendar, Card, Carousel, CarouselRoot, ChatComposer, ChatConversationList, ChatDaySeparator, ChatMessage, ChatMessageActions, ChatSources, ChatSuggestions, ChatThread, ChatToolCall, ChatTypingIndicator, Chatbot, Checkbox, CheckboxGroup, Clipboard, Clock, CodeBlock, ColBox, ColorInput, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, Comment, CommentComposer, CommentThread, ConfirmationModal, ContentNarrow, CookieBanner, Countdown, DataTable, DatePicker, DateTime, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, EventCalendar, Figure, FileInput, FileTile, FormFooter, FormRow, GridList, HealthBadge, HealthDot, HelpOverlay, IconBox, ImageGrid, Input, IntegrationCard, KanbanBoard, Kbd, KpiCard, Link, LinkProvider, List, LoadingState, MediaObject, Menu, MiniCalendar, Modal, MultiSelect, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageContainer, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, PhoneInput, PipelineStages, Popover, ProfileHeader, ProgressBar, ProgressRing, REFRESH_OPTIONS, Radio, RadioGroup, Rating, RecordPager, RefreshButton, RelativeTime, ResetPasswordForm, Ribbon, Row, RowActionButton, RowActionsMenu, STATUS_DOT, STATUS_PILL, SearchInput, SecretValue, SectionCard, SectionLabel, SegmentedControl, Select, Shell, Sidebar, SidebarToggle, SignInForm, SignUpForm, Sk, SkeletonAvatarText, SkeletonList, SkeletonTable, SkeletonText, Slider, SocialAuthButtons, Spinner, SplitView, StackedList, StatefulSaveButton, StatusBadge, Stepper, StepperRoot, StickyScrollNav, Table, TableAmountCell, TableBody, TableCaption, TableCell, TableDescriptionCell, TableFoot, TableHead, TableHeaderCell, TableIdCell, TableIdentityCell, TableRow, TableSkeletonRows, Tabs, Tag, TagInput, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, TrendDelta, TwoStepVerificationForm, UnsavedIndicator, UploadQueue, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, applyAppearance, defaultPasswordRules, isDarkTheme, resolveTheme, systemPrefersDark, toCsv, useAutoRefresh, useSplitView, watchSystemTheme };
-export type { AccentColor, AccentPickerProps, AccordionContentProps, AccordionItemProps, AccordionProps, AccordionSize, AccordionTriggerProps, ActionPanelLayout, ActionPanelProps, ActiveFilter, ActiveFiltersBarProps, ActivityFeedIntent, ActivityFeedItemProps, ActivityFeedProps, AlertBannerAppearance, AlertBannerBodyTone, AlertBannerIntent, AlertBannerProps, AnnouncementBarIntent, AnnouncementBarProps, AppearanceMenuProps, AppearanceMenuSize, AppearanceSettingsProps, AuditChange, AuditDiffLabels, AuditDiffProps, AuditDiffVariant, AuthLayoutProps, AuthLayoutVariant, AvatarGroupProps, AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarStatus, AvatarUploaderProps, AvatarUploaderSize, BackToTopFabIntent, BackToTopFabPosition, BackToTopFabProps, BackdropProps, BadgeAppearance, BadgeProps, BadgeShape, BadgeSize, BarListIntent, BarListItem, BarListProps, BlockquoteAlign, BlockquoteProps, BlockquoteSize, BlockquoteVariant, BreadcrumbItem, BreadcrumbProps, BreadcrumbSeparator, ButtonGroupOrientation, ButtonGroupProps, ButtonIntent, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, CalendarEvent, CalendarProps, CardImageProps, CardOrientation, CardProps, CarouselControlsProps, CarouselIndicatorsProps, CarouselOptions, CarouselProps, CarouselSlideProps, CarouselThumbnailsProps, CarouselViewportProps, ChatComposerProps, ChatConversation, ChatConversationListProps, ChatDaySeparatorProps, ChatFeedback, ChatMessageActionsProps, ChatMessageDirection, ChatMessageProps, ChatMessageStatus, ChatPresence, ChatSource, ChatSourcesProps, ChatSuggestionsProps, ChatThreadProps, ChatToolCallProps, ChatToolCallStatus, ChatTypingIndicatorProps, ChatbotMessage, ChatbotProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxSize, ClipboardProps, ClipboardSize, ClipboardVariant, ClockProps, ClockVariant, CodeBlockProps, ColBoxProps, ColorInputProps, ColorPreset, ColorSwatchProps, ColumnDef, ColumnFilterDropdownProps, ColumnHeaderProps, ComboboxOption, ComboboxProps, CommandPaletteFooterProps, CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommentComposerProps, CommentLabels, CommentProps, CommentThreadProps, CommentVariant, ConfirmationModalProps, ContentNarrowProps, CookieBannerPosition, CookieBannerProps, CosmosAccent, CosmosAccentMeta, CosmosAppearance, CosmosFont, CosmosFontMeta, CosmosSystemThemeMeta, CosmosSystemThemes, CosmosTextSize, CosmosTextSizeMeta, CosmosTheme, CosmosThemeChoice, CosmosThemeMeta, CosmosToasterProps, CountdownProps, CountdownUnit, CountdownVariant, DataTableDensity, DataTableExportQuery, DataTableFilterTabOption, DataTableFilterTabsConfig, DataTableProps, DataTableSort, DataTableView, DatePickerMode, DatePickerProps, DateRange, DateTimeFormat, DateTimeProps, DescriptionListItemProps, DescriptionListProps, DividerAlign, DividerIconProps, DividerProps, DividerRowProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerSize, DropdownDivider, DropdownItem, DropdownOption, DropdownProps, DropzoneProps, DropzoneRejection, EmptyStateIntent, EmptyStateProps, ErrorPageProps, ErrorStateProps, EventCalendarIntent, EventCalendarProps, FieldSize, FigureAlign, FigureProps, FigureRadius, FigureSize, FileInputProps, FileKind, FileTileLayout, FileTileProps, FormFooterAlign, FormFooterProps, FormRowProps, GridListCardProps, GridListCols, GridListFooterActionProps, GridListFooterProps, GridListProps, HealthBadgeProps, HealthDotProps, HealthStatus, HelpOverlayProps, HelpOverlaySectionProps, HelpOverlayShortcutProps, IconBoxProps, IconBoxSize, ImageGridColumns, ImageGridGap, ImageGridItemProps, ImageGridLayout, ImageGridProps, InputProps, IntegrationCardProps, IntegrationStatus, Intent, KanbanBoardProps, KanbanCard, KanbanColumn, KanbanMove, KbdProps, KbdSize, KpiCardIntent, KpiCardProps, LinkComponent, LinkComponentProps, LinkIntent, LinkProps, LinkProviderProps, LinkVariant, ListItemProps, ListMarker, ListOrientation, ListProps, ListSpacing, ListVariant, LoadingStateProps, MediaObjectAlign, MediaObjectBodyProps, MediaObjectImageProps, MediaObjectPosition, MediaObjectProps, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemIntent, MenuItemProps, MenuProps, MenuRadioItemProps, MenuTriggerProps, MiniCalendarProps, ModalAlertIntent, ModalAlertLayout, ModalAlertProps, ModalHeaderProps, ModalProps, ModalSize, MultiSelectOption, MultiSelectProps, NavbarItemProps, NavbarMobileMenuButtonProps, NavbarProps, NavbarTheme, NotificationCardCondensedProps, NotificationCardSimpleProps, NotificationIntent, NotificationsPanelContentProps, NotificationsPanelCountersProps, NotificationsPanelEmptyProps, NotificationsPanelFooterProps, NotificationsPanelHeaderActionProps, NotificationsPanelHeaderProps, NotificationsPanelIntent, NotificationsPanelItemProps, NotificationsPanelListProps, NotificationsPanelProps, NotificationsPanelTriggerProps, NumberInputProps, OptionCardProps, OptionItem, OptionPickerProps, OtpInputProps, PageActionButtonProps, PageActionIconButtonProps, PageActionIntent, PageActionVariant, PageContainerProps, PageContainerWidth, PageHeaderMetaItemProps, PageHeaderProps, PaginationPrevNextLabel, PaginationProps, PaginationSize, PaginationVariant, PaletteCardProps, PaletteMeta, PalettePickerProps, PalettePreview, PasswordInputProps, PasswordPolicyCheckerProps, PasswordRule, PhoneInputProps, PipelineStage, PipelineStageIntent, PipelineStagesProps, PopoverAlign, PopoverContentProps, PopoverPosition, PopoverProps, PopoverTriggerProps, ProfileHeaderProps, ProfileHeaderStat, ProgressBarIntent, ProgressBarLabel, ProgressBarProps, ProgressBarSegment, ProgressBarSize, ProgressRingIntent, ProgressRingProps, ProgressRingSize, RadioGroupOption, RadioGroupProps, RadioProps, RadioSize, RatingProps, RecordPagerHotkeys, RecordPagerLabels, RecordPagerProps, RecordPagerVariant, RefreshButtonProps, RefreshOption, RelativeTimeProps, ResetPasswordFormProps, RibbonIntent, RibbonPosition, RibbonProps, RibbonShape, RowActionButtonProps, RowActionsMenuProps, RowProps, SaveState, SearchInputProps, SecretValueProps, SectionCardProps, SectionLabelProps, SegmentOption, SegmentedControlProps, SegmentedProgressBarProps, SelectOption, SelectProps, ShellProps, SidebarGroupProps, SidebarItemProps, SidebarProps, SidebarSectionProps, SidebarToggleProps, SidebarToggleVariant, SignInFormProps, SignInFormValues, SignUpFormProps, SignUpFormValues, SingleProgressBarProps, SkProps, SkeletonAvatarTextProps, SkeletonListProps, SkeletonTableProps, SkeletonTextProps, SliderIntent, SliderProps, SliderValue, SocialAuthButtonsLayout, SocialAuthButtonsProps, SocialProvider, SortDirection, SpinnerIntent, SpinnerProps, SpinnerSize, SplitViewBreakpoint, SplitViewPaneProps, SplitViewProps, StackedListHeaderProps, StackedListItemProps, StackedListProps, StatefulSaveButtonProps, StatusBadgeProps, StepStatus, StepperOrientation, StepperProps, StepperSize, StepperStepProps, StepperVariant, StickyScrollNavProps, StickyScrollNavSection, TabProps, TableAmountCellProps, TableBodyProps, TableCaptionProps, TableCellProps, TableDescriptionCellProps, TableFootProps, TableHeadProps, TableHeaderCellProps, TableIdCellProps, TableIdentityCellProps, TableProps, TableRowProps, TableSkeletonRowsProps, TabsOrientation, TabsProps, TabsVariant, TagInputProps, TagProps, TagSize, TextareaProps, TextareaResize, ThemeMode, ThemeModeChoice, ThemeToggleProps, ThemeToggleSize, ThemeToggleTriProps, ThemeToggleTriSize, TimePickerProps, TimelineIntent, TimelineItem, TimelineProps, TimelineVariant, ToggleProps, ToggleSize, TooltipIntent, TooltipPosition, TooltipProps, TooltipVariant, TopbarProps, TrendDeltaProps, TrendDeltaSize, TwoStepVerificationFormProps, UnsavedIndicatorProps, UploadQueueItem, UploadQueueProps, UploadStatus, UserMenuContentProps, UserMenuHeaderProps, UserMenuItemIntent, UserMenuItemProps, UserMenuProps, UserMenuTriggerProps, VerticalNavigationItemProps, VerticalNavigationProps, VerticalNavigationSectionProps, VideoEmbedAspect, VideoEmbedProps, ZoomBarProps };
+export { AccentPicker, Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, AnnouncementBar, AppearanceMenu, AppearanceSettings, AuditDiff, AuthLayout, Avatar, AvatarGroup, AvatarUploader, BEAT_NAME, BEAT_STATUSES, BackToTopFab, Backdrop, Badge, BarList, Blockquote, Breadcrumb, Button, ButtonGroup, COSMOS_ACCENTS, COSMOS_DENSITIES, COSMOS_FONTS, COSMOS_RADII, COSMOS_SYSTEM_THEME, COSMOS_TEXT_SIZES, COSMOS_THEMES, CUSTOMIZER_DEFAULT_VALUE, CUSTOMIZER_SECTIONS, Calendar, Card, Carousel, CarouselRoot, ChatComposer, ChatConversationList, ChatDaySeparator, ChatMessage, ChatMessageActions, ChatSources, ChatSuggestions, ChatThread, ChatToolCall, ChatTypingIndicator, Chatbot, Checkbox, CheckboxGroup, Clipboard, Clock, ColBox, ColorInput, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, CommandPaletteTrigger, Comment, CommentComposer, CommentThread, ConfirmationModal, ContentNarrow, CookieBanner, Countdown, Customizer, DEFAULT_THRESHOLDS, DataTable, DatePicker, DateTime, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, EventCalendar, FieldSize, Figure, FileInput, FileTile, FormFooter, FormRow, GridList, HealthBadge, HealthCheckList, HealthDot, HealthMatrix, HealthSummary, HeartbeatBar, HelpOverlay, IconBox, ImageGrid, Input, IntegrationCard, Intent, JobLog, KanbanBoard, Kbd, KpiCard, LOG_LEVELS, LOG_LEVEL_KEYS, LOG_LEVEL_LABEL, Link, LinkProvider, List, LoadingState, LogEntryDetail, LogLevelBadge, LogToolbar, LogViewer, MediaObject, Menu, MiniCalendar, Modal, MonitorRow, MultiSelect, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageContainer, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, PhoneInput, PipelineStages, Popover, ProfileHeader, ProgressBar, ProgressRing, REFRESH_OPTIONS, Radio, RadioGroup, Rating, RecordPager, RefreshButton, RelativeTime, ResetPasswordForm, Ribbon, Row, RowActionButton, RowActionsMenu, SEVERITY_ORDER, STATUS_DOT, STATUS_NAME, STATUS_PILL, SearchInput, SecretValue, SectionCard, SectionLabel, SegmentedControl, Select, Shell, Sidebar, SidebarToggle, SignInForm, SignUpForm, Sk, SkeletonAvatarText, SkeletonList, SkeletonTable, SkeletonText, Slider, SocialAuthButtons, Spinner, SplitView, StackedList, StatefulSaveButton, StatusBadge, Stepper, StepperRoot, StickyScrollNav, Table, TableAmountCell, TableBody, TableCaption, TableCell, TableDescriptionCell, TableFoot, TableHead, TableHeaderCell, TableIdCell, TableIdentityCell, TableRow, TableSkeletonRows, Tabs, Tag, TagInput, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, TrendDelta, TwoStepVerificationForm, UnsavedIndicator, UploadQueue, UptimeBars, UptimeStat, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, applyAppearance, compareSeverity, countLogLevels, defaultPasswordRules, filterLogLines, flattenChecks, formatUptime, groupWorst, isDarkTheme, jobLogLineHref, parseJobLogHash, parseLogLevel, resolveTheme, resolveThresholds, systemPrefersDark, toCsv, uptimeLevel, useAutoRefresh, useSplitView, watchSystemTheme, worstStatus };
+export type { AccentColor, AccentPickerProps, AccordionContentProps, AccordionItemProps, AccordionProps, AccordionSize, AccordionTriggerProps, ActionPanelLayout, ActionPanelProps, ActiveFilter, ActiveFiltersBarProps, ActivityFeedIntent, ActivityFeedItemProps, ActivityFeedProps, AlertBannerAppearance, AlertBannerBodyTone, AlertBannerIntent, AlertBannerProps, AnnouncementBarIntent, AnnouncementBarProps, AppearanceMenuProps, AppearanceMenuSize, AppearanceSettingsProps, AuditChange, AuditDiffLabels, AuditDiffProps, AuditDiffVariant, AuthLayoutProps, AuthLayoutVariant, AvatarGroupProps, AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarStatus, AvatarUploaderProps, AvatarUploaderSize, BackToTopFabIntent, BackToTopFabPosition, BackToTopFabProps, BackdropProps, BadgeAppearance, BadgeProps, BadgeShape, BadgeSize, BarListIntent, BarListItem, BarListProps, Beat, BeatStatus, BlockquoteAlign, BlockquoteProps, BlockquoteSize, BlockquoteVariant, BreadcrumbItem, BreadcrumbProps, BreadcrumbSeparator, ButtonGroupOrientation, ButtonGroupProps, ButtonIntent, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, CalendarEvent, CalendarProps, CardImageProps, CardOrientation, CardProps, CarouselControlsProps, CarouselIndicatorsProps, CarouselOptions, CarouselProps, CarouselSlideProps, CarouselThumbnailsProps, CarouselViewportProps, CellEditor, ChatComposerProps, ChatConversation, ChatConversationListProps, ChatDaySeparatorProps, ChatFeedback, ChatMessageActionsProps, ChatMessageDirection, ChatMessageProps, ChatMessageStatus, ChatPresence, ChatSource, ChatSourcesProps, ChatSuggestionsProps, ChatThreadProps, ChatToolCallProps, ChatToolCallStatus, ChatTypingIndicatorProps, ChatbotMessage, ChatbotProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxSize, ClipboardProps, ClipboardSize, ClipboardVariant, ClockProps, ClockVariant, ColBoxProps, ColorInputProps, ColorPreset, ColorSwatchProps, ColumnDef, ColumnEdit, ColumnFilterDropdownProps, ColumnHeaderProps, ColumnPin, ComboboxOption, ComboboxProps, CommandPaletteFooterProps, CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerProps, CommentComposerMode, CommentComposerProps, CommentLabels, CommentProps, CommentThreadProps, CommentVariant, ConfirmationModalProps, ContentNarrowProps, CookieBannerPosition, CookieBannerProps, CosmosAccent, CosmosAccentMeta, CosmosAppearance, CosmosDensity, CosmosDensityMeta, CosmosDirection, CosmosFont, CosmosFontMeta, CosmosRadius, CosmosRadiusMeta, CosmosSystemThemeMeta, CosmosSystemThemes, CosmosTextSize, CosmosTextSizeMeta, CosmosTheme, CosmosThemeChoice, CosmosThemeMeta, CosmosToasterProps, CountdownProps, CountdownUnit, CountdownVariant, CustomizerLayout, CustomizerPreset, CustomizerProps, CustomizerSection, CustomizerSidebar, CustomizerValue, DataTableBulkAction, DataTableDensity, DataTableExportQuery, DataTableFilterTabOption, DataTableFilterTabsConfig, DataTableProps, DataTableSort, DataTableView, DatePickerMode, DatePickerProps, DateRange, DateTimeFormat, DateTimeProps, DescriptionListItemProps, DescriptionListProps, DividerAlign, DividerIconProps, DividerProps, DividerRowProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerSize, DropdownDivider, DropdownItem, DropdownOption, DropdownProps, DropzoneProps, DropzoneRejection, EmptyStateIntent, EmptyStateProps, ErrorPageProps, ErrorStateProps, EventCalendarIntent, EventCalendarProps, FigureAlign, FigureProps, FigureRadius, FigureSize, FileInputProps, FileKind, FileTileLayout, FileTileProps, FormFooterAlign, FormFooterProps, FormRowProps, GridListCardProps, GridListCols, GridListFooterActionProps, GridListFooterProps, GridListProps, HealthBadgeProps, HealthCheck, HealthCheckGroup, HealthCheckListProps, HealthDotProps, HealthMatrixCell, HealthMatrixColumn, HealthMatrixProps, HealthMatrixRow, HealthStatus, HealthSummaryProps, HeartbeatBarProps, HeartbeatBarSize, HeartbeatBarVariant, HelpOverlayProps, HelpOverlaySectionProps, HelpOverlayShortcutProps, IconBoxProps, IconBoxSize, ImageGridColumns, ImageGridGap, ImageGridItemProps, ImageGridLayout, ImageGridProps, InputProps, IntegrationCardProps, IntegrationStatus, JobLogControl, JobLogLine, JobLogLineRef, JobLogProps, JobLogStep, JobLogTimestampFormat, JobStatus, KanbanBoardProps, KanbanCard, KanbanColumn, KanbanMove, KbdProps, KbdSize, KpiCardIntent, KpiCardProps, LinkComponent, LinkComponentProps, LinkIntent, LinkProps, LinkProviderProps, LinkVariant, ListItemProps, ListMarker, ListOrientation, ListProps, ListSpacing, ListVariant, LoadingStateProps, LogColumn, LogDensity, LogEntryContext, LogEntryDetailProps, LogLevel, LogLevelBadgeProps, LogLevelKey, LogLine, LogLineId, LogOrder, LogTone, LogToolbarProps, LogViewerProps, MediaObjectAlign, MediaObjectBodyProps, MediaObjectImageProps, MediaObjectPosition, MediaObjectProps, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemIntent, MenuItemProps, MenuProps, MenuRadioItemProps, MenuTriggerProps, MiniCalendarProps, ModalAlertIntent, ModalAlertLayout, ModalAlertProps, ModalHeaderProps, ModalProps, ModalSize, MonitorRowProps, MonitorState, MultiSelectOption, MultiSelectProps, NavbarItemProps, NavbarItemsProps, NavbarMenuProps, NavbarMobileMenuButtonProps, NavbarProps, NavbarTheme, NotificationCardCondensedProps, NotificationCardSimpleProps, NotificationIntent, NotificationsPanelContentProps, NotificationsPanelCountersProps, NotificationsPanelEmptyProps, NotificationsPanelFooterProps, NotificationsPanelHeaderActionProps, NotificationsPanelHeaderProps, NotificationsPanelIntent, NotificationsPanelItemProps, NotificationsPanelListProps, NotificationsPanelProps, NotificationsPanelTriggerProps, NumberInputProps, OptionCardProps, OptionItem, OptionPickerProps, OtpInputProps, PageActionButtonProps, PageActionIconButtonProps, PageActionIntent, PageActionVariant, PageContainerProps, PageContainerWidth, PageHeaderMetaItemProps, PageHeaderProps, PaginationPrevNextLabel, PaginationProps, PaginationSize, PaginationVariant, PaletteCardProps, PaletteMeta, PalettePickerProps, PalettePreview, PasswordInputProps, PasswordPolicyCheckerProps, PasswordRule, PhoneInputProps, PipelineStage, PipelineStageIntent, PipelineStagesProps, PopoverAlign, PopoverContentProps, PopoverPosition, PopoverProps, PopoverTriggerProps, ProfileHeaderProps, ProfileHeaderStat, ProgressBarIntent, ProgressBarLabel, ProgressBarProps, ProgressBarSegment, ProgressBarSize, ProgressRingIntent, ProgressRingProps, ProgressRingSize, RadioGroupOption, RadioGroupProps, RadioProps, RadioSize, RatingProps, RecordPagerHotkeys, RecordPagerLabels, RecordPagerProps, RecordPagerVariant, RefreshButtonProps, RefreshOption, RelativeTimeProps, ResetPasswordFormProps, RibbonIntent, RibbonPosition, RibbonProps, RibbonShape, RowActionButtonProps, RowActionsMenuProps, RowProps, SaveState, SearchInputProps, SecretValueProps, SectionCardProps, SectionLabelProps, SegmentOption, SegmentedControlProps, SegmentedProgressBarProps, SelectOption, SelectProps, ShellContainer, ShellProps, SidebarGroupProps, SidebarItemProps, SidebarProps, SidebarSectionProps, SidebarToggleProps, SidebarToggleVariant, SidebarVariant, SignInFormProps, SignInFormValues, SignUpFormProps, SignUpFormValues, SingleProgressBarProps, SkProps, SkeletonAvatarTextProps, SkeletonListProps, SkeletonTableProps, SkeletonTextProps, SliderIntent, SliderProps, SliderValue, SocialAuthButtonsLayout, SocialAuthButtonsProps, SocialProvider, SortDirection, SpinnerIntent, SpinnerProps, SpinnerSize, SplitViewBreakpoint, SplitViewPaneProps, SplitViewProps, StackedListHeaderProps, StackedListItemProps, StackedListProps, StatefulSaveButtonProps, StatusBadgeProps, StepStatus, StepperOrientation, StepperProps, StepperSize, StepperStepProps, StepperVariant, StickyScrollNavProps, StickyScrollNavSection, TabProps, TableAmountCellProps, TableBodyProps, TableCaptionProps, TableCellProps, TableDescriptionCellProps, TableFootProps, TableHeadProps, TableHeaderCellProps, TableIdCellProps, TableIdentityCellProps, TableProps, TableRowProps, TableSkeletonRowsProps, TabsOrientation, TabsProps, TabsVariant, TagInputProps, TagProps, TagSize, TextareaProps, TextareaResize, ThemeMode, ThemeModeChoice, ThemeToggleProps, ThemeToggleSize, ThemeToggleTriProps, ThemeToggleTriSize, TimePickerProps, TimelineIntent, TimelineItem, TimelineProps, TimelineVariant, ToggleProps, ToggleSize, TooltipIntent, TooltipPosition, TooltipProps, TooltipVariant, TopbarProps, TrendDeltaProps, TrendDeltaSize, TwoStepVerificationFormProps, UnsavedIndicatorProps, UploadQueueItem, UploadQueueProps, UploadStatus, UptimeBarsPeriod, UptimeBarsProps, UptimeCertificate, UptimeDay, UptimeLevel, UptimePeriod, UptimeStatProps, UptimeThresholds, UserMenuContentProps, UserMenuHeaderProps, UserMenuItemIntent, UserMenuItemProps, UserMenuProps, UserMenuTriggerProps, VerticalNavigationItemProps, VerticalNavigationProps, VerticalNavigationSectionProps, VideoEmbedAspect, VideoEmbedProps, ZoomBarProps };