@stealthscale/component-screen 0.0.1 → 0.2.2

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-import { ButtonProps, IconButtonProps } from "@stealthscale/component-actions";
-import { RecipeProps } from "@stealthscale/theme/authoring";
+import { a as Choice, i as SwitcherSize, n as RootProps$8, r as Placement, t as Root$8 } from "./root-DDwipXru.js";
+import { Button, ButtonProps, IconButtonProps } from "@stealthscale/component-actions";
+import "@stealthscale/theme/authoring";
 import { PresenceOptions } from "@stealthscale/hooks";
 import { RovingFocus } from "@stealthscale/component-a11y";
-import { ComponentProps, ElementType, MouseEvent, MouseEventHandler, ReactElement, ReactNode } from "react";
+import { ComponentProps, DOMAttributes, ElementType, MouseEvent, MouseEventHandler, ReactElement, ReactNode } from "react";
 import { ScrollArea } from "@stealthscale/component-primitives";
 import { Breakpoint } from "@stealthscale/provider-viewport";
 import * as floatingPanel from "@zag-js/floating-panel";
@@ -93,44 +94,76 @@ type PositionerProps$1 = ComponentProps<typeof Drawn$13>;
  */
 declare function Positioner$1(props: PositionerProps$1): null | ReactElement;
 //#endregion
+//#region src/presence.d.ts
+/**
+ * Describes when an overlay renders its content while the overlay is closed.
+ *
+ * @remarks
+ *   The package declares the options again, because the hooks package is a peer. A specimen page
+ *   lists only the props that the package or its runtime dependencies declare.
+ */
+interface OverlayPresence extends Omit<PresenceOptions, "present"> {
+  /**
+   * When true, the overlay renders no content until it first opens.
+   *
+   * @defaultValue true
+   */
+  readonly lazyMount?: boolean | undefined;
+  /**
+   * Runs once the content's exit animation ends.
+   */
+  readonly onExitComplete?: (() => void) | undefined;
+  /**
+   * When true, content that is open on mount plays no entry animation.
+   */
+  readonly skipAnimationOnMount?: boolean | undefined;
+  /**
+   * When true, the overlay removes its content once the exit animation ends.
+   *
+   * @defaultValue true
+   */
+  readonly unmountOnExit?: boolean | undefined;
+}
+//#endregion
 //#region src/action-bar/root.d.ts
 /**
  * Renders the `div` that provides the recipe's variants.
  */
 declare const Framed$2: import("@stealthscale/theme").StyledComponent<"div", {
-  readonly placement?: "bottom" | "bottom-end" | "bottom-start";
+  readonly placement?: "bottom" | "bottom-end" | "bottom-start" | undefined;
 }>;
 /**
  * Describes the details `onOpenChange` receives.
  */
 interface OpenChangeDetails$1 {
   /**
-   * Whether the bar asks to be open, false for Escape and the close trigger.
+   * The open state that the bar asks for. Escape and the close trigger ask for false.
    */
   readonly open: boolean;
 }
 /**
  * Describes the props of the root: whether the bar is open, how it asks to close, its announcement,
  * the presence options, the recipe's variants and the props of a `div`.
- *
- * @remarks
- *   `lazyMount` and `unmountOnExit` are true by default.
  */
-interface RootProps$8 extends ComponentProps<typeof Framed$2>, Omit<PresenceOptions, "present"> {
+interface RootProps$7 extends ComponentProps<typeof Framed$2>, OverlayPresence {
   /**
-   * Words a screen reader hears as the bar opens. Defaults to `Actions available`.
+   * The words that a screen reader announces when the bar opens.
+   *
+   * @defaultValue "Actions available"
    */
   readonly announcement?: string | undefined;
   /**
-   * Whether Escape inside the bar asks to close it. True by default.
+   * When true, Escape inside the bar asks to close it.
+   *
+   * @defaultValue true
    */
   readonly closeOnEscape?: boolean | undefined;
   /**
-   * Called when the bar asks to close. The caller clears the selection, which closes the bar.
+   * Runs when the bar asks to close. The caller closes the bar by clearing the selection.
    */
   readonly onOpenChange?: ((details: OpenChangeDetails$1) => void) | undefined;
   /**
-   * Whether the bar is open, usually while anything is selected.
+   * True while the bar is open. A caller sets it while anything is selected.
    */
   readonly open: boolean;
 }
@@ -141,9 +174,9 @@ interface RootProps$8 extends ComponentProps<typeof Framed$2>, Omit<PresenceOpti
  *   options, the recipe's variants and the props of a `div`.
  * @returns The `div` element inside the providers.
  */
-declare function Root$8({ announcement, closeOnEscape, lazyMount, onExitComplete, onOpenChange, open, skipAnimationOnMount, unmountOnExit, ...props }: RootProps$8): ReactElement;
+declare function Root$7({ announcement, closeOnEscape, lazyMount, onExitComplete, onOpenChange, open, skipAnimationOnMount, unmountOnExit, ...props }: RootProps$7): ReactElement;
 declare namespace index_d_exports {
-  export { CloseTrigger$1 as CloseTrigger, CloseTriggerProps$1 as CloseTriggerProps, Content$4 as Content, ContentProps$2 as ContentProps, OpenChangeDetails$1 as OpenChangeDetails, Positioner$1 as Positioner, PositionerProps$1 as PositionerProps, Root$8 as Root, RootProps$8 as RootProps };
+  export { CloseTrigger$1 as CloseTrigger, CloseTriggerProps$1 as CloseTriggerProps, Content$4 as Content, ContentProps$2 as ContentProps, OpenChangeDetails$1 as OpenChangeDetails, Positioner$1 as Positioner, PositionerProps$1 as PositionerProps, Root$7 as Root, RootProps$7 as RootProps };
 }
 //#endregion
 //#region src/app-shell/panels.d.ts
@@ -155,10 +188,22 @@ interface Panel$1 {
    * Result of closing the panel in the body: `hide` hides it, and `icons` leaves a rail.
    */
   readonly collapse: Collapse;
+  /**
+   * Whether the shell is too narrow for the panel and the panel is hidden.
+   */
+  readonly hidden: boolean;
   /**
    * Identifier of the panel's element, which a trigger's `aria-controls` points at.
    */
   readonly id: string;
+  /**
+   * Widest width a person resizes the panel to, in pixels, or undefined for half the window.
+   */
+  readonly maxSize: number | undefined;
+  /**
+   * Narrowest width a person resizes the panel to, in pixels, or undefined for 192.
+   */
+  readonly minSize: number | undefined;
   /**
    * Whether the panel is shown: open in the body, or open over the page.
    */
@@ -167,10 +212,22 @@ interface Panel$1 {
    * Whether the shell is too narrow for the panel and the panel is over the page.
    */
   readonly overlaid: boolean;
+  /**
+   * Whether a person resizes the panel by its rail.
+   */
+  readonly resizable: boolean;
   /**
    * Shows or hides the panel.
    */
   readonly setOpen: (open: boolean) => void;
+  /**
+   * Sets the width a person resized the panel to, in pixels.
+   */
+  readonly setSize: (size: number) => void;
+  /**
+   * Side of the page the panel is on.
+   */
+  readonly side: Side;
   /**
    * Whether the shell is too narrow for the panel and the panel has dropped under the page.
    */
@@ -195,9 +252,11 @@ declare const COLLAPSES: readonly Collapse[];
  *
  * @remarks
  *   `over` lays it over the page behind a backdrop, the usual navigation on a phone. `under` drops
- *   it under the page as a block that is always shown, the usual detail panel on a phone.
+ *   it under the page as a block that is always shown, the usual detail panel on a phone. `hide`
+ *   removes it until the shell is wide enough again, such as a rail of sections whose destinations
+ *   a phone lists in a bar at its foot.
  */
-type Fold = "over" | "under";
+type Fold = "hide" | "over" | "under";
 /**
  * Every `Fold` value.
  */
@@ -245,8 +304,13 @@ interface PanelOptions {
    */
   readonly defaultOpen?: boolean | undefined;
   /**
-   * Where the panel goes when the shell is too narrow for it: over the page behind a backdrop, or
-   * under the page as a block. Defaults to `over`.
+   * Width the panel starts at, in pixels, when the caller does not control `size`. The panel's
+   * open width where left out.
+   */
+  readonly defaultSize?: number | undefined;
+  /**
+   * Where the panel goes when the shell is too narrow for it: over the page behind a backdrop,
+   * under the page as a block, or out of the shell. Defaults to `over`.
    */
   readonly folds?: Fold | undefined;
   /**
@@ -254,6 +318,14 @@ interface PanelOptions {
    * Defaults to `md` on the start side and `lg` on the end side.
    */
   readonly foldsBelow?: "never" | Breakpoint | undefined;
+  /**
+   * Widest width a person resizes the panel to, in pixels. Half the window's width by default.
+   */
+  readonly maxSize?: number | undefined;
+  /**
+   * Narrowest width a person resizes the panel to, in pixels. 192 by default.
+   */
+  readonly minSize?: number | undefined;
   /**
    * Name a trigger uses to find the panel. Defaults to `navbar` on the start side and `aside` on
    * the end side.
@@ -264,14 +336,28 @@ interface PanelOptions {
    */
   readonly onOpenChange?: ((open: boolean) => void) | undefined;
   /**
-   * Whether the panel is open, when the application controls it.
+   * Called with the new width, in pixels, while a person resizes the panel.
+   */
+  readonly onSizeChange?: ((size: number) => void) | undefined;
+  /**
+   * Whether the panel is open beside the page, when the application controls it. A panel over the
+   * page keeps its own state, which starts closed.
    */
   readonly open?: boolean | undefined;
+  /**
+   * Whether a person resizes the panel by its rail, the strip `AppShell.Rail` renders on its edge.
+   * Defaults to `false`.
+   */
+  readonly resizable?: boolean | undefined;
   /**
    * Key that toggles the panel with the platform's modifier held: `b` for ⌘B and Ctrl+B. No
    * shortcut by default.
    */
   readonly shortcut?: string | undefined;
+  /**
+   * Width a person resized the panel to, in pixels, when the application controls it.
+   */
+  readonly size?: number | undefined;
 }
 //#endregion
 //#region src/app-shell/panel.d.ts
@@ -377,16 +463,24 @@ declare function Header$4({ sticky, ...rest }: HeaderProps$4): ReactElement;
 //#endregion
 //#region src/app-shell/main.d.ts
 /**
- * Describes the props of `Main`: the props of the `main` element.
+ * Describes the props of `Main`, which are the props of the `main` element.
  */
-type MainProps = Omit<ScrollArea.ViewportProps, "as" | "focusable">;
+interface MainProps extends Omit<ScrollArea.ViewportProps, "as" | "focusable"> {
+  /**
+   * Id that the root's `ids` give the `main` element.
+   */
+  readonly id?: string | undefined;
+}
 /**
- * Renders the main region in the space the panels leave, scrolling when the page scrolls.
+ * Renders the main region in the space that the panels leave.
  *
- * @param props - The `main` element's props, the page among its children.
- * @returns The main region, inert while a panel is over the page.
+ * @remarks
+ *   The scroll area's machine finds the `main` element by its id. The caller's `id` goes to the
+ *   root's `ids`. The root sets it on the `main` element.
+ * @param props - The props of the `main` element. Its children contain the page.
+ * @returns The main region.
  */
-declare function Main({ children, ...props }: MainProps): ReactElement;
+declare function Main({ children, id, ...props }: MainProps): ReactElement;
 //#endregion
 //#region src/app-shell/metrics.d.ts
 /**
@@ -411,15 +505,51 @@ type NavbarProps = Omit<PanelProps$1, "side">;
  */
 declare function Navbar(props: NavbarProps): ReactElement;
 //#endregion
-//#region src/app-shell/rail.d.ts
+//#region src/app-shell/pane.d.ts
+/**
+ * Renders the pane `div`.
+ */
+declare const Pane: import("@stealthscale/theme").StyledComponent<"div", {}>;
 /**
- * Renders the rail `button`, typed `button` so it submits no form.
+ * Describes the props of `Pane`: the props of a `div`.
  */
-declare const Pressable$1: import("@stealthscale/theme").StyledComponent<"button", {}>;
+type PaneProps = ComponentProps<typeof Pane>;
+//#endregion
+//#region src/app-shell/rail-separator.d.ts
 /**
- * Describes the props of `Rail`.
+ * Renders the separator `div` with the rail's class.
  */
-interface RailProps extends Omit<ComponentProps<typeof Pressable$1>, "aria-controls"> {
+declare const Divided: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes the props of `RailSeparator`: the panel, the name, a press handler, and the attributes
+ * and style props of an element, without its other handlers.
+ *
+ * @remarks
+ *   The rail renders a `button` for a panel that is not resizable and this `div` for one that is,
+ *   so its props leave out every handler typed for one element.
+ */
+interface RailSeparatorProps extends Omit<ComponentProps<typeof Divided>, "aria-controls" | "ref" | keyof DOMAttributes<HTMLElement>> {
+  /**
+   * The panel the separator resizes.
+   */
+  readonly held: Panel$1;
+  /**
+   * Accessible name of the separator.
+   */
+  readonly label: string;
+  /**
+   * Called on a press before the separator toggles its panel. Calling `preventDefault` leaves the
+   * panel as it is.
+   */
+  readonly onClick?: MouseEventHandler<HTMLElement> | undefined;
+}
+//#endregion
+//#region src/app-shell/rail.d.ts
+/**
+ * Describes the props of `Rail`: the labels, the panel's name, a press handler, and the attributes
+ * and style props of the element.
+ */
+interface RailProps extends Omit<RailSeparatorProps, "held" | "label"> {
   /**
    * Accessible name of the rail while its panel is open. Defaults to `Close`.
    */
@@ -432,36 +562,41 @@ interface RailProps extends Omit<ComponentProps<typeof Pressable$1>, "aria-contr
    * Name of the panel the rail controls. Defaults to `navbar`.
    */
   readonly panel?: string | undefined;
+  /**
+   * Accessible name of the rail of a resizable panel. Defaults to `Resize`.
+   */
+  readonly resizeLabel?: string | undefined;
 }
 /**
- * Renders the strip that toggles one panel.
+ * Renders the strip that toggles one panel, or the separator that resizes it.
  *
- * @param props - The labels, the panel's name and the `button` element's props.
+ * @param props - The labels, the panel's name and the element's props.
  * @returns The strip, or `null` while its panel is not in the body.
  */
-declare function Rail({ closeLabel, onClick, openLabel, panel, ...rest }: RailProps): null | ReactElement;
+declare function Rail({ closeLabel, onClick, openLabel, panel, resizeLabel, ...rest }: RailProps): null | ReactElement;
 //#endregion
 //#region src/app-shell/root.d.ts
 /**
  * Renders the column and provides the variants to every part below it.
  */
-declare const Columned$2: import("@stealthscale/theme").StyledComponent<"div", {
-  readonly divided?: boolean;
-  readonly scroll?: "page" | "window";
-  readonly variant?: "floating" | "inset" | "plain";
+declare const Columned$3: import("@stealthscale/theme").StyledComponent<"div", {
+  readonly content?: "constrained" | "fluid" | undefined;
+  readonly divided?: boolean | undefined;
+  readonly scroll?: "page" | "window" | undefined;
+  readonly variant?: "floating" | "inset" | "plain" | undefined;
 }>;
 /**
  * Describes the props of `Root`.
  */
-type RootProps$7 = ComponentProps<typeof Columned$2>;
+type RootProps$6 = ComponentProps<typeof Columned$3>;
 /**
- * Renders the shell: bars across the top and the bottom, and a body between them with a panel on
- * either side of the page.
+ * Renders the shell: bars across the top and the bottom, and a body between them with panels on
+ * either side of the page or of a pane.
  *
  * @param props - The recipe's variants and the `div` element's props.
  * @returns The column, with the shell's state in context.
  */
-declare function Root$7({ scroll, ...rest }: RootProps$7): ReactElement;
+declare function Root$6({ scroll, ...rest }: RootProps$6): ReactElement;
 //#endregion
 //#region src/app-shell/section.d.ts
 /**
@@ -491,33 +626,30 @@ declare function Section({ grows, scrolls, ...rest }: SectionProps): ReactElemen
 //#endregion
 //#region src/app-shell/status.d.ts
 /**
- * Renders the bar `div`.
+ * Renders the bar `section`.
  */
-declare const Barred: import("@stealthscale/theme").StyledComponent<"div", {}>;
+declare const Barred: import("@stealthscale/theme").StyledComponent<"section", {}>;
 /**
- * Describes the props of `Status`.
+ * Describes the props of `Status`: `label` and the props of a `section` element.
  */
-type StatusProps = ComponentProps<typeof Barred>;
+interface StatusProps extends ComponentProps<typeof Barred> {
+  /**
+   * Name of the region. `Status` by default.
+   */
+  readonly label?: string | undefined;
+}
 /**
  * Renders the status bar.
  *
- * @param props - The `div` element's props.
  * @returns The bar, inert while a panel is over the page.
  */
-declare function Status(props: StatusProps): ReactElement;
+declare function Status({ label, ...props }: StatusProps): ReactElement;
 //#endregion
 //#region src/app-shell/trigger.d.ts
 /**
  * Renders the library's button as a neutral ghost, typed `button` so it submits no form.
  */
-declare const Pressable: import("@stealthscale/theme").StyledComponent<import("@stealthscale/theme").StyledComponent<"button", {
-  readonly effect?: "glow" | "pulse";
-  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
-  readonly palette?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning";
-  readonly shape?: "square";
-  readonly size?: import("@stealthscale/theme/authoring").Scale;
-  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
-}>, {}>;
+declare const Pressable: import("@stealthscale/theme").StyledComponent<typeof Button, {}>;
 /**
  * Describes the props of `Trigger`.
  */
@@ -531,11 +663,11 @@ interface TriggerProps$2 extends Omit<ComponentProps<typeof Pressable>, "aria-co
  * Renders the control that toggles one panel.
  *
  * @param props - `panel` and the button's props.
- * @returns The control, or `null` while its panel has dropped under the page.
+ * @returns The control, or `null` while its panel is under the page or hidden.
  */
 declare function Trigger$2({ onClick, panel, ...rest }: TriggerProps$2): null | ReactElement;
 declare namespace index_d_exports$1 {
-  export { Aside$1 as Aside, AsideProps$1 as AsideProps, Body$3 as Body, BodyProps$3 as BodyProps, COLLAPSES, Collapse, FOLDS, Fold, Footer$3 as Footer, FooterProps$3 as FooterProps, Header$4 as Header, HeaderProps$4 as HeaderProps, Main, MainProps, Navbar, NavbarProps, Panel$1 as Panel, PanelOptions, Rail, RailProps, Root$7 as Root, RootProps$7 as RootProps, Section, SectionProps, ShellWidth, Side, Status, StatusProps, Trigger$2 as Trigger, TriggerProps$2 as TriggerProps, WINDOW_HEIGHT, useAppShellPanel, useNearestPanel, useOverlaid };
+  export { Aside$1 as Aside, AsideProps$1 as AsideProps, Body$3 as Body, BodyProps$3 as BodyProps, COLLAPSES, Collapse, FOLDS, Fold, Footer$3 as Footer, FooterProps$3 as FooterProps, Header$4 as Header, HeaderProps$4 as HeaderProps, Main, MainProps, Navbar, NavbarProps, Pane, PaneProps, Panel$1 as Panel, PanelOptions, Rail, RailProps, Root$6 as Root, RootProps$6 as RootProps, Section, SectionProps, ShellWidth, Side, Status, StatusProps, Trigger$2 as Trigger, TriggerProps$2 as TriggerProps, WINDOW_HEIGHT, useAppShellPanel, useNearestPanel, useOverlaid };
 }
 //#endregion
 //#region src/floating-panel/body.d.ts
@@ -727,16 +859,15 @@ declare const Framed$1: import("@stealthscale/theme").StyledComponent<"div", {}>
  *   The element's `id`, `dir`, `draggable` and `position` are left out, because the machine takes
  *   all four. It derives every part's id from `id` and writes `dir` on every part. It reads
  *   `draggable` as whether a person can move the panel, and `position` as the panel's place.
- *   `lazyMount` and `unmountOnExit` are true by default.
  */
-interface RootProps$6 extends FloatingPanelOptions, Omit<ComponentProps<typeof Framed$1>, "dir" | "draggable" | "id" | "position">, Omit<PresenceOptions, "present"> {}
+interface RootProps$5 extends FloatingPanelOptions, Omit<ComponentProps<typeof Framed$1>, "dir" | "draggable" | "id" | "position">, OverlayPresence {}
 /**
  * Renders the root and provides the machine and the panel's presence to the parts.
  *
  * @param props - The machine's options, the presence options and the props of a `div`.
  * @returns The `div` element inside the providers.
  */
-declare function Root$6({ lazyMount, onExitComplete, skipAnimationOnMount, unmountOnExit, ...props }: RootProps$6): ReactElement;
+declare function Root$5({ lazyMount, onExitComplete, skipAnimationOnMount, unmountOnExit, ...props }: RootProps$5): ReactElement;
 //#endregion
 //#region src/floating-panel/stage-trigger.d.ts
 /**
@@ -769,14 +900,14 @@ declare const Drawn$5: import("@stealthscale/theme").StyledComponent<"h2", {}>;
 /**
  * Describes the props of the title: the props of an `h2`.
  */
-type TitleProps$2 = ComponentProps<typeof Drawn$5>;
+type TitleProps$3 = ComponentProps<typeof Drawn$5>;
 /**
  * Renders the title with the machine's title props merged under the caller's.
  *
  * @param props - The props of an `h2`.
  * @returns The heading element.
  */
-declare function Title$2(props: TitleProps$2): ReactElement;
+declare function Title$3(props: TitleProps$3): ReactElement;
 //#endregion
 //#region src/floating-panel/trigger.d.ts
 /**
@@ -796,7 +927,7 @@ type TriggerProps$1 = ComponentProps<typeof Drawn$4>;
  */
 declare function Trigger$1(props: TriggerProps$1): ReactElement;
 declare namespace index_d_exports$2 {
-  export { AnchorPositionDetails, Body$2 as Body, BodyProps$2 as BodyProps, CloseTrigger, CloseTriggerProps, Content$3 as Content, ContentProps$1 as ContentProps, Control, ControlProps, DragTrigger, DragTriggerProps, Header$3 as Header, HeaderProps$3 as HeaderProps, OpenChangeDetails, Point, PositionChangeDetails, Positioner, PositionerProps, ResizeTrigger$1 as ResizeTrigger, ResizeTriggerAxis$1 as ResizeTriggerAxis, ResizeTriggerProps$1 as ResizeTriggerProps, ResizeTriggers, ResizeTriggersProps, Root$6 as Root, RootProps$6 as RootProps, Size, SizeChangeDetails, Stage$1 as Stage, StageChangeDetails, StageTrigger, StageTriggerProps, Title$2 as Title, TitleProps$2 as TitleProps, Trigger$1 as Trigger, TriggerProps$1 as TriggerProps };
+  export { AnchorPositionDetails, Body$2 as Body, BodyProps$2 as BodyProps, CloseTrigger, CloseTriggerProps, Content$3 as Content, ContentProps$1 as ContentProps, Control, ControlProps, DragTrigger, DragTriggerProps, Header$3 as Header, HeaderProps$3 as HeaderProps, OpenChangeDetails, Point, PositionChangeDetails, Positioner, PositionerProps, ResizeTrigger$1 as ResizeTrigger, ResizeTriggerAxis$1 as ResizeTriggerAxis, ResizeTriggerProps$1 as ResizeTriggerProps, ResizeTriggers, ResizeTriggersProps, Root$5 as Root, RootProps$5 as RootProps, Size, SizeChangeDetails, Stage$1 as Stage, StageChangeDetails, StageTrigger, StageTriggerProps, Title$3 as Title, TitleProps$3 as TitleProps, Trigger$1 as Trigger, TriggerProps$1 as TriggerProps };
 }
 //#endregion
 //#region src/folding/priority.d.ts
@@ -814,13 +945,6 @@ declare namespace index_d_exports$2 {
 type Priority = "primary" | "secondary" | "tertiary";
 //#endregion
 //#region src/page/state.d.ts
-/**
- * Provides the page's size and measured width to its parts and to the sections in it.
- *
- * @remarks
- *   A section in a page reads its size from here, so one size on `Page.Root` sets every section.
- *   A part rendered at one width reads the page's measured width from here.
- */
 /**
  * Size of a page.
  */
@@ -845,14 +969,7 @@ interface WhenProps {
 /**
  * Renders the library's button with the recipe's action class.
  */
-declare const Acted$2: import("@stealthscale/theme").StyledComponent<import("@stealthscale/theme").StyledComponent<"button", {
-  readonly effect?: "glow" | "pulse";
-  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
-  readonly palette?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning";
-  readonly shape?: "square";
-  readonly size?: import("@stealthscale/theme/authoring").Scale;
-  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
-}>, {}>;
+declare const Acted$2: import("@stealthscale/theme").StyledComponent<typeof Button, {}>;
 /**
  * Describes the props of an action: its icon, whether it is primary, its priority, `when` and the
  * props of the library's button.
@@ -1154,14 +1271,7 @@ type PaletteProps = ComponentProps<typeof Palette>;
 /**
  * Renders the library's button with the recipe's picker class.
  */
-declare const Picker: import("@stealthscale/theme").StyledComponent<import("@stealthscale/theme").StyledComponent<"button", {
-  readonly effect?: "glow" | "pulse";
-  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
-  readonly palette?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning";
-  readonly shape?: "square";
-  readonly size?: import("@stealthscale/theme/authoring").Scale;
-  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
-}>, {}>;
+declare const Picker: import("@stealthscale/theme").StyledComponent<typeof Button, {}>;
 /**
  * Describes the props of the picker: the props of the library's button.
  */
@@ -1171,19 +1281,19 @@ type PickerProps = ComponentProps<typeof Picker>;
 /**
  * Renders the `div` with the recipe's root class, which provides the variants to the bands.
  */
-declare const Columned$1: import("@stealthscale/theme").StyledComponent<"div", {
-  readonly align?: "center" | "start";
-  readonly divided?: boolean;
-  readonly gutter?: import("@stealthscale/theme/authoring").Scale;
-  readonly measure?: "full" | "narrow" | "wide";
-  readonly folded?: boolean;
-  readonly size?: "lg" | "md" | "sm";
+declare const Columned$2: import("@stealthscale/theme").StyledComponent<"div", {
+  readonly align?: "center" | "start" | undefined;
+  readonly divided?: boolean | undefined;
+  readonly gutter?: import("@stealthscale/theme/authoring").Scale | undefined;
+  readonly measure?: "full" | "narrow" | "wide" | undefined;
+  readonly folded?: boolean | undefined;
+  readonly size?: "lg" | "md" | "sm" | undefined;
 }>;
 /**
  * Describes the props of the page: its size, the recipe's variants without `folded`, which the
  * page measures, and the props of a `div`.
  */
-interface RootProps$5 extends Omit<ComponentProps<typeof Columned$1>, "folded" | "size"> {
+interface RootProps$4 extends Omit<ComponentProps<typeof Columned$2>, "folded" | "size"> {
   /**
    * Size of the page, which a section in it reads too.
    */
@@ -1195,7 +1305,76 @@ interface RootProps$5 extends Omit<ComponentProps<typeof Columned$1>, "folded" |
  * @param props - The size, the recipe's variants and the props of a `div`.
  * @returns The `div` element, with `folded` and `data-narrow` while it is narrow.
  */
-declare function Root$5({ size, ...rest }: RootProps$5): ReactElement;
+declare function Root$4({ size, ...rest }: RootProps$4): ReactElement;
+//#endregion
+//#region src/page/sidebar-column.d.ts
+/**
+ * Renders the column `div` with the recipe's sidebar class.
+ */
+declare const Columned$1: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes the props of `SidebarColumn`: `sticky`, the resizing options and the props of a `div`.
+ */
+interface SidebarColumnProps extends ComponentProps<typeof Columned$1>, StickyProps {
+  /**
+   * Width the sidebar starts at, in pixels, when the caller does not control `size`. The theme's
+   * sidebar width where left out.
+   */
+  readonly defaultSize?: number | undefined;
+  /**
+   * Widest width a person resizes the sidebar to, in pixels. Half the window's width by default.
+   */
+  readonly maxSize?: number | undefined;
+  /**
+   * Narrowest width a person resizes the sidebar to, in pixels. 192 by default.
+   */
+  readonly minSize?: number | undefined;
+  /**
+   * Called with the new width, in pixels, while a person resizes the sidebar.
+   */
+  readonly onSizeChange?: ((size: number) => void) | undefined;
+  /**
+   * Whether a person resizes the sidebar by the separator on its end edge. Defaults to `false`.
+   */
+  readonly resizable?: boolean | undefined;
+  /**
+   * Accessible name of the separator. Defaults to `Resize`.
+   */
+  readonly resizeLabel?: string | undefined;
+  /**
+   * Width a person resized the sidebar to, in pixels, when the application controls it.
+   */
+  readonly size?: number | undefined;
+}
+//#endregion
+//#region src/page/sidebar.d.ts
+/**
+ * Describes the props of `Sidebar`: the picker's words and mark, `sticky`, the resizing options and
+ * the props of a `div`.
+ */
+interface SidebarProps extends SidebarColumnProps {
+  /**
+   * Words the picker shows on a narrow page, such as the current destination's name. `label`
+   * where left out.
+   */
+  readonly current?: ReactNode | undefined;
+  /**
+   * Accessible name of the picker's panel, and the picker's words where `current` is left out.
+   */
+  readonly label: string;
+  /**
+   * Mark at the end of the picker, such as a chevron.
+   */
+  readonly pickerIcon?: ReactNode | undefined;
+}
+/**
+ * Renders the column beside the body, or the band with the picker on a narrow page.
+ *
+ * @param props - The picker's words and mark, `sticky`, the resizing options and the props of a
+ *   `div`.
+ * @returns The `div` element.
+ */
+declare function Sidebar({ children, current, label, pickerIcon, ...rest }: SidebarProps): ReactElement;
 //#endregion
 //#region src/page/tab-list.d.ts
 /**
@@ -1280,11 +1459,11 @@ type TabsProps = ComponentProps<typeof Tabs$1>;
 /**
  * Renders the `h1` with the recipe's title class.
  */
-declare const Title$1: import("@stealthscale/theme").StyledComponent<"h1", {}>;
+declare const Title$2: import("@stealthscale/theme").StyledComponent<"h1", {}>;
 /**
  * Describes the props of the title: the props of a heading.
  */
-type TitleProps$1 = ComponentProps<typeof Title$1>;
+type TitleProps$2 = ComponentProps<typeof Title$2>;
 //#endregion
 //#region src/page/toolbar.d.ts
 /**
@@ -1331,21 +1510,14 @@ interface WhenComponentProps extends WhenProps {
  */
 declare function When({ children, when }: WhenComponentProps): ReactNode;
 declare namespace index_d_exports$3 {
-  export { Action$3 as Action, ActionProps$3 as ActionProps, Actions$1 as Actions, ActionsProps$1 as ActionsProps, Aside, AsideFold, AsideProps, Banner, BannerProps, Body$1 as Body, BodyProps$1 as BodyProps, Breadcrumbs, BreadcrumbsProps, Context, ContextProps, Crumb, Description$1 as Description, DescriptionProps$1 as DescriptionProps, Footer$2 as Footer, FooterProps$2 as FooterProps, Header$2 as Header, HeaderProps$2 as HeaderProps, Leading, LeadingProps, Meta, MetaProps, Nav$1 as Nav, NavProps$1 as NavProps, Palette, PaletteProps, Picker, PickerProps, Root$5 as Root, RootProps$5 as RootProps, Tab, TabList, TabListProps, TabProps, Tabs$1 as Tabs, TabsProps, Title$1 as Title, TitleProps$1 as TitleProps, Toolbar, ToolbarProps, Trail, TrailProps, When, WhenComponentProps };
+  export { Action$3 as Action, ActionProps$3 as ActionProps, Actions$1 as Actions, ActionsProps$1 as ActionsProps, Aside, AsideFold, AsideProps, Banner, BannerProps, Body$1 as Body, BodyProps$1 as BodyProps, Breadcrumbs, BreadcrumbsProps, Context, ContextProps, Crumb, Description$1 as Description, DescriptionProps$1 as DescriptionProps, Footer$2 as Footer, FooterProps$2 as FooterProps, Header$2 as Header, HeaderProps$2 as HeaderProps, Leading, LeadingProps, Meta, MetaProps, Nav$1 as Nav, NavProps$1 as NavProps, Palette, PaletteProps, Picker, PickerProps, Root$4 as Root, RootProps$4 as RootProps, Sidebar, SidebarProps, Tab, TabList, TabListProps, TabProps, Tabs$1 as Tabs, TabsProps, Title$2 as Title, TitleProps$2 as TitleProps, Toolbar, ToolbarProps, Trail, TrailProps, When, WhenComponentProps };
 }
 //#endregion
 //#region src/section/action.d.ts
 /**
  * Renders the library's button with the recipe's action class.
  */
-declare const Acted$1: import("@stealthscale/theme").StyledComponent<import("@stealthscale/theme").StyledComponent<"button", {
-  readonly effect?: "glow" | "pulse";
-  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
-  readonly palette?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning";
-  readonly shape?: "square";
-  readonly size?: import("@stealthscale/theme/authoring").Scale;
-  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
-}>, {}>;
+declare const Acted$1: import("@stealthscale/theme").StyledComponent<typeof Button, {}>;
 /**
  * Describes the props of an action: its icon, whether it is primary, its priority and the props of
  * the library's button.
@@ -1460,22 +1632,22 @@ type HeaderProps$1 = ComponentProps<typeof Header$1>;
  * Renders the `section` with the recipe's root class, which provides the variants to the parts.
  */
 declare const Block: import("@stealthscale/theme").StyledComponent<"section", {
-  readonly annotated?: boolean;
-  readonly size?: "lg" | "md" | "sm";
-  readonly variant?: "plain" | "surface";
+  readonly annotated?: boolean | undefined;
+  readonly size?: "lg" | "md" | "sm" | undefined;
+  readonly variant?: "plain" | "surface" | undefined;
 }>;
 /**
  * Describes the props of the section: the recipe's variants and the props of a `section`, without
  * `aria-labelledby`, which the root sets.
  */
-type RootProps$4 = Omit<ComponentProps<typeof Block>, "aria-labelledby">;
+type RootProps$3 = Omit<ComponentProps<typeof Block>, "aria-labelledby">;
 /**
  * Renders the section with its title's id and its measured width.
  *
  * @param props - The recipe's variants and the props of a `section`.
  * @returns The `section` element, with `data-narrow` while it is narrow.
  */
-declare function Root$4({ size, ...rest }: RootProps$4): ReactElement;
+declare function Root$3({ size, ...rest }: RootProps$3): ReactElement;
 //#endregion
 //#region src/section/title.d.ts
 /**
@@ -1485,16 +1657,16 @@ declare const Named: import("@stealthscale/theme").StyledComponent<"h2", {}>;
 /**
  * Describes the props of the title: the props of a heading without `id`, which the section sets.
  */
-type TitleProps = Omit<ComponentProps<typeof Named>, "id">;
+type TitleProps$1 = Omit<ComponentProps<typeof Named>, "id">;
 /**
  * Renders the heading with the section's title id.
  *
  * @param props - The props of a heading, without `id`.
  * @returns The heading element.
  */
-declare function Title(props: TitleProps): ReactElement;
+declare function Title$1(props: TitleProps$1): ReactElement;
 declare namespace index_d_exports$4 {
-  export { Action$2 as Action, ActionProps$2 as ActionProps, Actions, ActionsProps, Body, BodyProps, Description, DescriptionProps, Footer$1 as Footer, FooterProps$1 as FooterProps, Header$1 as Header, HeaderProps$1 as HeaderProps, Root$4 as Root, RootProps$4 as RootProps, Title, TitleProps };
+  export { Action$2 as Action, ActionProps$2 as ActionProps, Actions, ActionsProps, Body, BodyProps, Description, DescriptionProps, Footer$1 as Footer, FooterProps$1 as FooterProps, Header$1 as Header, HeaderProps$1 as HeaderProps, Root$3 as Root, RootProps$3 as RootProps, Title$1 as Title, TitleProps$1 as TitleProps };
 }
 //#endregion
 //#region src/sidebar/content.d.ts
@@ -1614,13 +1786,13 @@ declare function Nav(props: NavProps): ReactElement;
  * Renders the column and provides the variants to every part below it.
  */
 declare const Columned: import("@stealthscale/theme").StyledComponent<"div", {
-  readonly size?: "lg" | "md" | "sm";
-  readonly variant?: "outline" | "plain" | "subtle" | "surface";
+  readonly size?: "lg" | "md" | "sm" | undefined;
+  readonly variant?: "outline" | "plain" | "subtle" | "surface" | undefined;
 }>;
 /**
  * Describes the props of `Root`.
  */
-interface RootProps$3 extends ComponentProps<typeof Columned> {
+interface RootProps$2 extends ComponentProps<typeof Columned> {
   /**
    * Whether the sidebar is a rail of icons, in place of the one its panel implies.
    */
@@ -1632,7 +1804,7 @@ interface RootProps$3 extends ComponentProps<typeof Columned> {
  * @param props - `iconic`, the recipe's variants and the `div` element's props.
  * @returns The column, with `data-iconic` on a rail.
  */
-declare function Root$3({ iconic, onClick, size, ...rest }: RootProps$3): ReactElement;
+declare function Root$2({ iconic, onClick, size, ...rest }: RootProps$2): ReactElement;
 //#endregion
 //#region src/sidebar/search.d.ts
 /**
@@ -1648,7 +1820,7 @@ interface SearchProps$1 extends SearchInputProps {
  * Renders the field that filters the scope, the rail's button, or the caller's field.
  *
  * @param props - The props of the search input and the shortcut.
- * @returns The `div` element, or nothing on a rail it cannot open.
+ * @returns The `div` element in the `search` role, or nothing on a rail it cannot open.
  */
 declare function Search$1({ "aria-label": named, children, defaultValue, onKeyDown, onValueChange, searchIndicator, shortcut, value: driven, ...rest }: SearchProps$1): null | ReactElement;
 //#endregion
@@ -1662,7 +1834,7 @@ declare const Separator$1: import("@stealthscale/theme").StyledComponent<typeof
  */
 type SeparatorProps$1 = ComponentProps<typeof Separator$1>;
 declare namespace index_d_exports$5 {
-  export { Content, ContentProps, Empty, EmptyProps, Footer, FooterProps, Header, HeaderProps, Nav, NavAction, NavActionProps, NavHeading, NavHeadingProps, NavLabel, NavLabelProps, NavProps, Root$3 as Root, RootProps$3 as RootProps, Search$1 as Search, SearchProps$1 as SearchProps, Separator$1 as Separator, SeparatorProps$1 as SeparatorProps };
+  export { Content, ContentProps, Empty, EmptyProps, Footer, FooterProps, Header, HeaderProps, Nav, NavAction, NavActionProps, NavHeading, NavHeadingProps, NavLabel, NavLabelProps, NavProps, Root$2 as Root, RootProps$2 as RootProps, Search$1 as Search, SearchProps$1 as SearchProps, Separator$1 as Separator, SeparatorProps$1 as SeparatorProps };
 }
 //#endregion
 //#region src/splitter/machine.d.ts
@@ -1787,12 +1959,12 @@ declare function ResizeTrigger({ children, disabled, id, label, ...props }: Resi
  * Renders the `div` that provides the recipe's variants.
  */
 declare const Framed: import("@stealthscale/theme").StyledComponent<"div", {
-  readonly palette?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning";
+  readonly palette?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
 }>;
 /**
  * Describes the props of the root: the api, the recipe's variants and the props of a `div`.
  */
-interface RootProps$2 extends ComponentProps<typeof Framed> {
+interface RootProps$1 extends ComponentProps<typeof Framed> {
   /**
    * Api `useSplitter` returns, which every part reads.
    */
@@ -1805,9 +1977,9 @@ interface RootProps$2 extends ComponentProps<typeof Framed> {
  * @param props - The api, the recipe's variants and the props of a `div`.
  * @returns The `div` element inside the api provider.
  */
-declare function Root$2({ splitter, ...props }: RootProps$2): ReactElement;
+declare function Root$1({ splitter, ...props }: RootProps$1): ReactElement;
 declare namespace index_d_exports$6 {
-  export { ExpandCollapseDetails, Panel, PanelData, PanelProps, PanelSize, ResizeDetails, ResizeEndDetails, ResizeTrigger, ResizeTriggerIndicator, ResizeTriggerIndicatorProps, ResizeTriggerProps, ResizeTriggerSeparator, ResizeTriggerSeparatorProps, Root$2 as Root, RootProps$2 as RootProps, SplitterApi, SplitterOptions, useSplitter };
+  export { ExpandCollapseDetails, Panel, PanelData, PanelProps, PanelSize, ResizeDetails, ResizeEndDetails, ResizeTrigger, ResizeTriggerIndicator, ResizeTriggerIndicatorProps, ResizeTriggerProps, ResizeTriggerSeparator, ResizeTriggerSeparatorProps, Root$1 as Root, RootProps$1 as RootProps, SplitterApi, SplitterOptions, useSplitter };
 }
 //#endregion
 //#region src/switcher/action.d.ts
@@ -1832,37 +2004,6 @@ interface ActionProps$1 extends Omit<ComponentProps<typeof Menu.Item>, "value">
  */
 declare function Action$1({ children, icon, value, ...rest }: ActionProps$1): ReactElement;
 //#endregion
-//#region src/switcher/choice.d.ts
-/**
- * Describes one workspace, project or tenant a switcher lists.
- */
-interface Choice {
-  /**
-   * Plan, role or region, rendered under the name in a sidebar and in the menu's row.
-   */
-  readonly detail?: string | undefined;
-  /**
-   * Whether the reader cannot switch to the choice.
-   */
-  readonly disabled?: boolean | undefined;
-  /**
-   * Address of the choice's own page, which renders its row as a link.
-   */
-  readonly href?: string | undefined;
-  /**
-   * Name of the choice.
-   */
-  readonly label: string;
-  /**
-   * Logo or avatar. The mark shows the name's initials without one.
-   */
-  readonly mark?: ReactNode | undefined;
-  /**
-   * Value the application knows the choice by.
-   */
-  readonly value: string;
-}
-//#endregion
 //#region src/switcher/detail.d.ts
 /**
  * Renders the detail `span` at the switcher's size.
@@ -1913,274 +2054,6 @@ declare const Name: import("@stealthscale/theme").StyledComponent<"span", {}>;
  */
 type NameProps = ComponentProps<typeof Name>;
 //#endregion
-//#region src/switcher/recipe.d.ts
-/**
- * Declares the switcher's slot recipe, which styles the control that shows the current workspace,
- * project or environment and opens the menu of the others.
- *
- * @remarks
- *   The recipe has six slots. The root slot is the trigger, and the mark, the label, the name, the
- *   detail and the indicator are inside it. `Switcher.Root` is the disclosure package's menu, so
- *   the menu's recipe styles the panel and its rows. The trigger takes the button's looks and
- *   palettes from the same layer styles, so an outlined switcher has the button's light edge. The
- *   mark is a square in the palette's muted fill for an initial, an icon or an avatar. The name and
- *   the detail truncate to keep the control at one height. A pair of chevrons marks a control that
- *   switches and not a direction, so the indicator does not rotate while the menu is open. In a
- *   sidebar closed to icons the control is its mark alone, square, and in a narrow toolbar a
- *   switcher with a mark hides its name. The words remain in the accessible name in both.
- */
-/**
- * Styles a ghost switcher at the middle size, alone.
- */
-declare const recipe: import("@stealthscale/theme/authoring").SlotRecipe<"detail" | "indicator" | "label" | "mark" | "name" | "root", {
-  /**
-   * The palette of the look and the mark.
-   */
-  readonly palette: {
-    accent: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    error: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    info: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    neutral: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    primary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    secondary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    success: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    warning: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-  };
-  /**
-   * Where the control is placed, which sets its width and its lines.
-   *
-   * @remarks
-   *   `Switcher.Root` reads the placement from the sidebar or the toolbar around it unless a
-   *   caller states one. The `marked` compound sizes the mark to `icon.lg` on one line, because
-   *   the size axis sizes it for a sidebar and a compound applies over an axis.
-   */
-  readonly placement: {
-    alone: {
-      detail: {
-        display: string;
-      };
-      root: {
-        inlineSize: string;
-        minBlockSize: string;
-      };
-    };
-    sidebar: {
-      root: {
-        "&[data-iconic]": {
-          alignSelf: string;
-          aspectRatio: string;
-          borderWidth: string;
-          inlineSize: string;
-          justifyContent: string;
-          padding: string;
-        };
-        inlineSize: string;
-      };
-    };
-    toolbar: {
-      detail: {
-        display: string;
-      };
-      root: {
-        inlineSize: string;
-        minBlockSize: string;
-      };
-    };
-  };
-  readonly size: {
-    lg: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
-    md: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
-    sm: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
-  };
-  /**
-   * The button's six looks, each one of the theme's layer styles.
-   *
-   * @remarks
-   *   `ghost`, the default, has no fill at rest, so a switcher at the head of a sidebar shows the
-   *   sidebar's own ground and fills under a pointer.
-   */
-  readonly variant: {
-    ghost: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    outline: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    plain: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    solid: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    subtle: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    surface: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-  };
-}>;
-//#endregion
-//#region src/switcher/sized.d.ts
-/**
- * Selects one of the sizes the menu renders at, which are the switcher's sizes.
- */
-type Step = "lg" | "md" | "sm";
-/**
- * Describes the props of `Sized`: the menu's props and the step.
- */
-interface SizedProps extends Omit<ComponentProps<typeof Menu.Root>, "size"> {
-  /**
-   * Size the switcher renders at.
-   */
-  readonly step: Step;
-}
-/**
- * Renders the menu at the step.
- *
- * @param props - The step and the menu's props.
- * @returns The menu at that size.
- */
-declare function Sized({ step, ...rest }: SizedProps): ReactElement;
-//#endregion
-//#region src/switcher/state.d.ts
-/**
- * Derives where a switcher renders from the sidebar or the toolbar around it, and provides it to
- * the switcher's parts.
- *
- * @remarks
- *   A switcher in a sidebar is a row at the sidebar's size, and its mark alone while the sidebar
- *   is a rail. A switcher in a toolbar is one of the row's controls at the toolbar's size, and a
- *   switcher with a mark hides its name while the toolbar is narrow. Anywhere else it is one line
- *   at its own size. A caller's `placement` or `size` applies over the derived one.
- */
-/**
- * Selects where a switcher renders.
- */
-type Placement = "alone" | "sidebar" | "toolbar";
-/**
- * Selects the size of a switcher.
- */
-type SwitcherSize = "lg" | "md" | "sm";
-//#endregion
-//#region src/switcher/root.d.ts
-/**
- * Binds the sized menu as the root that provides the variants.
- */
-declare const Bound: import("@stealthscale/theme").RootProvider<typeof Sized, {
-  readonly palette: {
-    accent: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    error: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    info: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    neutral: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    primary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    secondary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    success: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    warning: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-  };
-  readonly placement: {
-    alone: {
-      detail: {
-        display: string;
-      };
-      root: {
-        inlineSize: string;
-        minBlockSize: string;
-      };
-    };
-    sidebar: {
-      root: {
-        "&[data-iconic]": {
-          alignSelf: string;
-          aspectRatio: string;
-          borderWidth: string;
-          inlineSize: string;
-          justifyContent: string;
-          padding: string;
-        };
-        inlineSize: string;
-      };
-    };
-    toolbar: {
-      detail: {
-        display: string;
-      };
-      root: {
-        inlineSize: string;
-        minBlockSize: string;
-      };
-    };
-  };
-  readonly size: {
-    lg: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
-    md: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
-    sm: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
-  };
-  readonly variant: {
-    ghost: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    outline: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    plain: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    solid: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    subtle: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-    surface: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
-  };
-}>;
-/**
- * Variant props of the switcher's recipe.
- */
-type Variants = RecipeProps<typeof recipe>;
-/**
- * Props of the binding, with the variants typed as the recipe types them.
- */
-type ProvidedProps = Omit<ComponentProps<typeof Bound>, keyof Variants> & Variants;
-/**
- * Describes the props of `Root`: the choices and their glyphs, the switcher's variants and the
- * menu's props.
- *
- * @remarks
- *   The menu's recipe also offers `size` and `variant`. Over the menu's root the two `variant` axes
- *   intersect to a type no value satisfies, so the switcher's axes replace the menu's here. The
- *   menu's size is the switcher's `size`, so `step` is omitted.
- */
-interface RootProps$1 extends Omit<ProvidedProps, "placement" | "size" | "step"> {
-  /**
-   * Glyph that marks the current choice's row in the menu.
-   */
-  readonly checkIcon?: ReactNode | undefined;
-  /**
-   * Value of the choice that is current at first, when the caller does not control it. Defaults to
-   * the first choice.
-   */
-  readonly defaultValue?: string | undefined;
-  /**
-   * Glyph at the end of the trigger.
-   */
-  readonly indicator?: ReactNode | undefined;
-  /**
-   * The choices. With them the root renders the trigger and the menu.
-   */
-  readonly items?: readonly Choice[] | undefined;
-  /**
-   * Kind of thing the switcher switches, which a screen reader announces before the current name.
-   * Used with `items`.
-   */
-  readonly label?: string | undefined;
-  /**
-   * Called with the value of the choice the reader switches to.
-   */
-  readonly onValueChange?: ((value: string) => void) | undefined;
-  /**
-   * Where the switcher renders. Read from the sidebar or the toolbar around it when absent.
-   */
-  readonly placement?: Placement | undefined;
-  /**
-   * Size of the switcher. The sidebar's or the toolbar's size when absent, and `md` alone.
-   */
-  readonly size?: SwitcherSize | undefined;
-  /**
-   * Value of the current choice, when the caller controls it.
-   */
-  readonly value?: string | undefined;
-}
-/**
- * Renders the menu with the switcher's variants, at the switcher's size.
- *
- * @remarks
- *   A caller's `positioning` applies over the placement's, and a caller's `ids` over the trigger id
- *   the root shares with the rail's tooltip.
- * @param props - The choices, the glyphs, the switcher's variants and the menu's props.
- * @returns The menu, providing the variants and the placement.
- */
-declare function Root$1({ checkIcon, children, defaultValue, indicator, items, label, onValueChange, placement, positioning, size, value, ...rest }: RootProps$1): ReactElement;
-//#endregion
 //#region src/switcher/trigger.d.ts
 /**
  * Renders the menu's trigger with the root slot's class.
@@ -2204,21 +2077,14 @@ interface TriggerProps extends ComponentProps<typeof Pressed> {
  */
 declare function Trigger({ children, label, ...rest }: TriggerProps): ReactElement;
 declare namespace index_d_exports$7 {
-  export { Action$1 as Action, ActionProps$1 as ActionProps, Choice, Detail, DetailProps, Indicator, IndicatorProps, Label, LabelProps, Mark, MarkProps, Name, NameProps, Placement, Root$1 as Root, RootProps$1 as RootProps, SwitcherSize, Trigger, TriggerProps };
+  export { Action$1 as Action, ActionProps$1 as ActionProps, Choice, Detail, DetailProps, Indicator, IndicatorProps, Label, LabelProps, Mark, MarkProps, Name, NameProps, Placement, Root$8 as Root, RootProps$8 as RootProps, SwitcherSize, Trigger, TriggerProps };
 }
 //#endregion
 //#region src/toolbar/action.d.ts
 /**
  * Renders the library's button with the recipe's action class.
  */
-declare const Acted: import("@stealthscale/theme").StyledComponent<import("@stealthscale/theme").StyledComponent<"button", {
-  readonly effect?: "glow" | "pulse";
-  readonly elevation?: import("@stealthscale/theme/authoring").Lift;
-  readonly palette?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning";
-  readonly shape?: "square";
-  readonly size?: import("@stealthscale/theme/authoring").Scale;
-  readonly variant?: "ghost" | "glass" | "outline" | "plain" | "solid" | "subtle" | "surface";
-}>, {}>;
+declare const Acted: import("@stealthscale/theme").StyledComponent<typeof Button, {}>;
 /**
  * Describes the props of an action: its icon, whether it is primary, its priority and the props of
  * the library's button.
@@ -2275,13 +2141,13 @@ type EndProps = ComponentProps<typeof End>;
  * Renders the layout package's group, attached, with the recipe's group class.
  */
 declare const Group: import("@stealthscale/theme").StyledComponent<import("@stealthscale/theme").StyledComponent<"div", {
-  readonly align?: import("@stealthscale/theme/authoring").Align;
-  readonly dim?: boolean;
-  readonly attached?: boolean;
-  readonly gap?: "lg" | "md" | "sm" | "xl" | "xs";
-  readonly grow?: boolean;
-  readonly justify?: import("@stealthscale/theme/authoring").Justify;
-  readonly orientation?: "horizontal" | "vertical";
+  readonly align?: import("@stealthscale/theme/authoring").Align | undefined;
+  readonly dim?: boolean | undefined;
+  readonly attached?: boolean | undefined;
+  readonly gap?: "lg" | "md" | "sm" | "xl" | "xs" | undefined;
+  readonly grow?: boolean | undefined;
+  readonly justify?: import("@stealthscale/theme/authoring").Justify | undefined;
+  readonly orientation?: "horizontal" | "vertical" | undefined;
 }>, {}>;
 /**
  * Describes the props of the group: the props of the layout package's group.
@@ -2342,9 +2208,9 @@ declare function Link({ children, current, href, icon, onClick, priority, ...res
  * Renders the roving focus root with the recipe's root class.
  */
 declare const Rowed: import("@stealthscale/theme").StyledComponent<typeof RovingFocus.Root, {
-  readonly radius?: "l1" | "l2" | "l3";
-  readonly size?: import("@stealthscale/theme/authoring").Scale;
-  readonly variant?: "outline" | "plain" | "surface";
+  readonly radius?: "l1" | "l2" | "l3" | undefined;
+  readonly size?: import("@stealthscale/theme/authoring").Scale | undefined;
+  readonly variant?: "outline" | "plain" | "surface" | undefined;
 }>;
 /**
  * Describes the props of the toolbar: its accessible name, the menu's words and mark, the recipe's
@@ -2405,8 +2271,25 @@ declare const Start: import("@stealthscale/theme").StyledComponent<"div", {}>;
  * Describes the props of the start band: the props of a `div`.
  */
 type StartProps = ComponentProps<typeof Start>;
+//#endregion
+//#region src/toolbar/title.d.ts
+/**
+ * Renders the `div` with the recipe's title class.
+ */
+declare const Titled: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes the props of the title: the props of a `div`.
+ */
+type TitleProps = ComponentProps<typeof Titled>;
+/**
+ * Renders the title, marked narrow on a narrow row.
+ *
+ * @param props - The props of a `div`.
+ * @returns The `div` element.
+ */
+declare function Title(props: TitleProps): ReactElement;
 declare namespace index_d_exports$8 {
-  export { Action, ActionProps, Center, CenterProps, End, EndProps, Group, GroupProps, Item, ItemProps, Link, LinkProps, Root, RootProps, Search, SearchProps, Separator, SeparatorProps, Start, StartProps };
+  export { Action, ActionProps, Center, CenterProps, End, EndProps, Group, GroupProps, Item, ItemProps, Link, LinkProps, Root, RootProps, Search, SearchProps, Separator, SeparatorProps, Start, StartProps, Title, TitleProps };
 }
 //#endregion
 export { index_d_exports as ActionBar, index_d_exports$1 as AppShell, index_d_exports$2 as FloatingPanel, index_d_exports$3 as Page, index_d_exports$4 as Section, index_d_exports$5 as Sidebar, index_d_exports$6 as Splitter, index_d_exports$7 as Switcher, index_d_exports$8 as Toolbar };