@graphty/compact-mantine 0.8.19 → 0.9.0

package/dist/index.d.cts

@@ -1,19 +1,32 @@
 import { ActionIconProps } from '@mantine/core';
+import { BoxProps } from '@mantine/core';
 import { ComboboxData } from '@mantine/core';
+import { ComponentPropsWithoutRef } from 'react';
 import { default as default_2 } from 'react';
 import { ElementProps } from '@mantine/core';
 import { ForwardRefExoticComponent } from 'react';
 import { JSX } from 'react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MantineColorShade } from '@mantine/core';
 import { MantineColorsTuple } from '@mantine/core';
 import { MantineRadius } from '@mantine/core';
 import { MantineTheme } from '@mantine/core';
+import { MantineThemeOverride } from '@mantine/core';
+import { MenuItemProps } from '@mantine/core';
+import { MenuProps } from '@mantine/core';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { MouseEventHandler } from 'react';
+import { NotificationProps } from '@mantine/core';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { SegmentedControl as SegmentedControl_2 } from '@mantine/core';
 import { SyntheticEvent } from 'react';
+import { TextInputProps } from '@mantine/core';
+import { TooltipProps } from '@mantine/core';
+import { UnstyledButtonProps } from '@mantine/core';
 import { VariantColorsResolver } from '@mantine/core';
 
 /**
@@ -21,16 +34,15 @@ import { VariantColorsResolver } from '@mantine/core';
  * doing something about it: a reading at the leading edge, a cluster of
  * controls at the trailing edge.
  *
- * **The hover split is the whole component.** A control that *acts* -- Run,
- * Recompute, Copy, a button that opens the advanced settings -- is hidden until
- * the row is reached, because a panel of resident verbs is a panel of noise.
- * Anything that *reports a state* is drawn always, because a state that only
- * appears on hover is a state nobody can scan a column for. A layers panel is
- * the model: the eye appears on hover, but a layer that is actually hidden
- * shows its crossed-out eye with no hover at all.
+ * **Actions and resident actions.** `actions` are controls that *act* -- Run,
+ * Recompute, Copy, a button that opens the advanced settings. The resident
+ * ones *report a state* and are never hidden. On a property row Figma draws both
+ * always, which is the default here. `reveal="hover"` gives the layer-row
+ * behavior instead: the acting controls fade in (100ms) when the row is
+ * reached, while a state -- a crossed-out eye on a hidden layer -- stays
+ * visible with no hover at all.
  *
- * Three things keep the split usable rather than merely tidy, and all three are
- * why this is a component instead of a CSS rule:
+ * When the actions are revealed on hover, three things keep that usable:
  *
  * - **A touch screen has no hover**, so where the pointer cannot hover every
  *   hidden control is drawn.
@@ -43,11 +55,12 @@ import { VariantColorsResolver } from '@mantine/core';
  * destructive, anything ending in "anyway". Everything else is a 24px glyph
  * carrying its word as its tooltip and its accessible name.
  * @param props - Component props
- * @param props.state - What the row reports, drawn at the leading edge in the secondary text colour
+ * @param props.state - What the row reports, drawn at the leading edge in the secondary text color
  * @param props.stateTitle - The complete reading, for when `state` is markup or an abbreviation of what the row means
  * @param props.busy - Whether the reading is still being worked out by something that finishes later
  * @param props.live - How urgently a screen reader announces the reading when it changes on its own
- * @param props.actions - Controls that act, hidden until the row is hovered or focused, and always drawn where the pointer cannot hover
+ * @param props.actions - Controls that act: always drawn by default, or revealed on hover and focus with `reveal="hover"`
+ * @param props.reveal - When the actions are drawn: "always" (the default) or "hover"
  * @param props.residentActions - Controls that report a state, which are never hidden
  * @param props.actionsVisible - Forces the hidden controls shown or hidden instead of letting hover and focus decide
  * @param props.disabled - Whether the row cannot act, which draws its reading at the disabled ink and announces it as unavailable
@@ -75,7 +88,7 @@ export declare interface ActionRowProps {
     /**
      * What the row reports: a count, a status, a record of the last run.
      *
-     * Always drawn, at the leading edge, in the secondary text colour, and
+     * Always drawn, at the leading edge, in the secondary text color, and
      * truncated with an ellipsis rather than wrapped -- the row is 32px and
      * stays 32px. Only the drawing is truncated: the text itself is complete in
      * the document, so a screen reader reads all of it however little of it
@@ -127,12 +140,21 @@ export declare interface ActionRowProps {
      * Controls that act: Run, Recompute, Copy, a button that opens the advanced
      * settings.
      *
-     * Hidden until the row is hovered or something inside it is focused, and
-     * always drawn where the pointer cannot hover. Hidden means faded out, not
-     * unmounted: they keep their accessible names and their place in the tab
-     * order, and any one of them reveals the whole cluster by taking focus.
+     * Always drawn by default, as Figma draws the actions of a property row.
+     * With `reveal="hover"` they are hidden until the row is hovered or
+     * something inside it is focused, and always drawn where the pointer cannot
+     * hover. Hidden means faded out over 100ms, not unmounted: they keep their
+     * accessible names and their place in the tab order, and any one of them
+     * reveals the whole cluster by taking focus.
      */
     actions?: default_2.ReactNode;
+    /**
+     * When `actions` are drawn: `"always"` (Figma's property rows) or `"hover"`
+     * (Figma's layer rows: shown while the row is hovered or focused).
+     * `actionsVisible` overrides either.
+     * @default "always"
+     */
+    reveal?: "always" | "hover";
     /**
      * Controls that report a state as well as changing it: the crossed-out eye
      * on a hidden item, the pin on a pinned reading.
@@ -149,7 +171,7 @@ export declare interface ActionRowProps {
      * rows below are "dimmed and disabled instead of tagged individually". The reading
      * then takes the disabled ink -- a different token from the ordinary muted one --
      * and the row is announced as unavailable, so nothing about the state depends on
-     * telling two greys apart.
+     * telling two grays apart.
      * @default false
      */
     disabled?: boolean;
@@ -157,7 +179,7 @@ export declare interface ActionRowProps {
      * Forces `actions` to be drawn, or forces them hidden, instead of letting
      * the row decide from hover and focus.
      *
-     * Leave it out for the usual behaviour. Set it to `true` while a menu or a
+     * Leave it out for the usual behavior. Set it to `true` while a menu or a
      * pop-out opened from this row is still open, so that the control which
      * opened it does not vanish the moment the pointer moves onto the thing it
      * opened.
@@ -225,7 +247,7 @@ export declare type ActivationHandler = (event: ActivationEvent) => void;
  * Called when a control is activated, with the activation source stated
  * separately.
  *
- * Use this in place of {@link ActivationHandler} only where the behaviour
+ * Use this in place of {@link ActivationHandler} only where the behavior
  * genuinely differs between a pointer and a key -- selectable list rows, where a
  * click extends a selection and Enter does not. Everywhere else the plain event
  * is enough, and a second parameter is noise.
@@ -299,7 +321,7 @@ export declare interface AdvancedButtonProps extends Omit<default_2.ButtonHTMLAt
      * Names the settings the button opens, such as `"Image export options"`.
      *
      * It becomes both the button's tooltip and the name a screen reader
-     * announces, so write it as a phrase a person would recognise rather than
+     * announces, so write it as a phrase a person would recognize rather than
      * as the word "settings". When `changed` is true the name also states that,
      * so there is no need to spell the change into this string yourself.
      */
@@ -312,15 +334,15 @@ export declare interface AdvancedButtonProps extends Omit<default_2.ButtonHTMLAt
      * state the panel behind the button edits; a button that forgets it tells
      * the reader that a changed setting is unchanged.
      *
-     * A changed button draws in the primary text colour instead of the
-     * secondary one, and says so in its accessible name as well, so the signal
-     * survives for a reader who cannot see the difference in colour.
+     * A changed button draws its glyph in the brand ink instead of the
+     * ordinary icon ink, and says so in its accessible name as well, so the
+     * signal survives for a reader who cannot see the difference in color.
      * @default false
      */
     changed?: boolean;
     /**
      * The glyph drawn on the button.
-     * @default a gear
+     * @default the settings glyph
      */
     icon?: default_2.ReactNode;
     /**
@@ -335,7 +357,7 @@ export declare interface AdvancedButtonProps extends Omit<default_2.ButtonHTMLAt
     /**
      * Whether the button cannot be used.
      *
-     * A disabled button is drawn in the same dimmed colour as any other
+     * A disabled button is drawn in the same dimmed color as any other
      * disabled control, refuses activation, and is skipped by the Tab key.
      * @default false
      */
@@ -351,6 +373,58 @@ export declare interface AdvancedButtonProps extends Omit<default_2.ButtonHTMLAt
     loading?: boolean;
 }
 
+/** Every value, in reading order. */
+export declare const ALIGNMENT_MATRIX_VALUES: readonly AlignmentMatrixValue[];
+
+/**
+ * The 3 x 3 alignment picker of an auto layout frame: nine radios drawn as dots, with the chosen
+ * one drawn as the three bars of the alignment it sets.
+ * @param props - Component props
+ * @param props.value - The chosen cell, to drive the matrix from your own state
+ * @param props.defaultValue - The cell chosen before anything is picked
+ * @param props.onChange - Called with the newly chosen cell and the event
+ * @param props.direction - Which way the children run, and so how the bars are drawn
+ * @param props.label - The group's accessible name
+ * @param props.cellLabels - The name and tooltip of each cell
+ * @param props.disabled - Whether the matrix cannot be used
+ * @param props.name - The shared name of the radio inputs
+ * @returns the matrix
+ * @example
+ * ```tsx
+ * <AlignmentMatrix value={align} onChange={setAlign} direction="horizontal" />
+ * ```
+ */
+export declare function AlignmentMatrix({ value, defaultValue, onChange, direction, label, cellLabels, disabled, name, }: AlignmentMatrixProps): default_2.JSX.Element;
+
+/**
+ * Props for the AlignmentMatrix.
+ */
+export declare interface AlignmentMatrixProps {
+    /** The chosen cell. Supply it to drive the matrix from your own state. */
+    value?: AlignmentMatrixValue;
+    /** The cell chosen before anything is picked, when the matrix keeps its own state. @default "top-left" */
+    defaultValue?: AlignmentMatrixValue;
+    /** Called with the newly chosen cell and the event that chose it. */
+    onChange?: ChangeHandler<AlignmentMatrixValue>;
+    /**
+     * Which way the children run, which is how the bars are drawn: `"vertical"` stacks three
+     * horizontal bars, `"horizontal"` stands three vertical bars side by side.
+     * @default "vertical"
+     */
+    direction?: "horizontal" | "vertical";
+    /** The group's accessible name. @default "Alignment" */
+    label?: string;
+    /** The name (and tooltip) of each cell, when the English defaults will not do. */
+    cellLabels?: Partial<Record<AlignmentMatrixValue, string>>;
+    /** Whether the matrix cannot be used. @default false */
+    disabled?: boolean;
+    /** The shared name of the radio inputs. One is generated when left out. */
+    name?: string;
+}
+
+/** One cell of the matrix: `"top-left"` .. `"bottom-right"`. */
+export declare type AlignmentMatrixValue = `${(typeof ROWS)[number]}-${(typeof COLUMNS)[number]}`;
+
 /**
  * Called when a component's value changes.
  *
@@ -368,8 +442,104 @@ export declare interface AdvancedButtonProps extends Omit<default_2.ButtonHTMLAt
  */
 export declare type ChangeHandler<T> = (value: T, event?: default_2.SyntheticEvent) => void;
 
+/** The value formats the format select offers. */
+export declare type ColorPickerFormat = "hex" | "rgb" | "hsl" | "hsb";
+
+/** The paint types the paint-type bar can offer. */
+export declare type ColorPickerPaintType = "solid" | "gradient";
+
+/**
+ * Figma's color picker body (design/figma-spec.md 7.3), for a 240-wide light popover: an
+ * optional paint-type bar, a 208 x 208 saturation / brightness field with a keyboard-operable
+ * reticle, the eyedropper (where the browser has one) beside the hue and opacity sliders, a
+ * format select and a joined value / opacity field, and the swatch set under a divider.
+ *
+ * It holds the color in HSV so that dragging through gray keeps its hue. Put it inside a
+ * `Popout.Panel` (CompactColorInput does), which supplies the header, the close button, Escape
+ * and one-popover-at-a-time.
+ * @param props - Component props
+ * @param props.value - the value
+ * @param props.onChange - called on every change
+ * @param props.onChangeEnd - called when a drag or step settles
+ * @param props.withAlpha - offer opacity
+ * @param props.swatches - the swatch set
+ * @param props.defaultFormat - the value row's first format
+ * @param props.gradient - gradient content for the paint-type bar
+ * @param props.paintType - the selected paint type
+ * @param props.onPaintTypeChange - called when the reader picks a paint type
+ * @param props.labels - English string overrides
+ * @returns the picker body
+ * @example
+ * ```tsx
+ * <Popout.Panel width={240} header={{ variant: "title", title: "Fill" }}>
+ *     <ColorPickerPanel value={fill} onChange={setFill} swatches={SWATCH_COLORS_HEXA} />
+ * </Popout.Panel>
+ * ```
+ */
+export declare function ColorPickerPanel({ value, onChange, onChangeEnd, withAlpha, swatches, defaultFormat, gradient, paintType, onPaintTypeChange, labels: labelOverrides, }: ColorPickerPanelProps): default_2.JSX.Element;
+
+/** Every string ColorPickerPanel draws or announces, in English by default. */
+export declare interface ColorPickerPanelLabels {
+    /** Name of the saturation and brightness field. */
+    saturation: string;
+    /** Name of the hue slider. */
+    hue: string;
+    /** Name of the opacity slider and the opacity box. */
+    opacity: string;
+    /** Name of the eyedropper button. */
+    eyedropper: string;
+    /** Name of the format select. */
+    format: string;
+    /** Name of the color value box (hex, or three numbers). */
+    value: string;
+    /** Name of the paint-type group. */
+    paintType: string;
+    /** The solid paint type. */
+    solid: string;
+    /** The gradient paint type. */
+    gradient: string;
+    /** Name of the swatch list. */
+    swatches: string;
+}
+
+/** Props for ColorPickerPanel. */
+export declare interface ColorPickerPanelProps {
+    /** The color, `#RRGGBB` or `#RRGGBBAA`. */
+    value: string;
+    /**
+     * Called on every change: live while dragging, once per typed commit, arrow key or swatch.
+     * Reports `#RRGGBBAA` (upper case) when `withAlpha`, `#RRGGBB` otherwise.
+     */
+    onChange: (value: string) => void;
+    /** Called once when a drag in the field or a slider settles, with the settled color. */
+    onChangeEnd?: (value: string) => void;
+    /**
+     * Offer opacity: the opacity slider and box.
+     * @default true
+     */
+    withAlpha?: boolean;
+    /** The swatch set under the divider, as hex or hexa strings. Each is named by its string. */
+    swatches?: readonly string[];
+    /**
+     * The format the value row starts in.
+     * @default "hex"
+     */
+    defaultFormat?: ColorPickerFormat;
+    /**
+     * Gradient content (for instance a GradientEditor). When given, a paint-type bar offers
+     * Solid and Gradient, and this is shown instead of the solid controls while Gradient is on.
+     */
+    gradient?: ReactNode;
+    /** The selected paint type, when you drive the bar. */
+    paintType?: ColorPickerPaintType;
+    /** Called when the reader picks a paint type. */
+    onPaintTypeChange?: (paintType: ColorPickerPaintType) => void;
+    /** Replace any of the English strings. */
+    labels?: Partial<ColorPickerPanelLabels>;
+}
+
 /**
- * One stop of a gradient: a colour, and where along the ramp it sits.
+ * One stop of a gradient: a color, and where along the ramp it sits.
  *
  * Build these with `createColorStop` rather than writing the object by hand, so
  * that the identifier is unique. The identifier is what React keys the stop by
@@ -381,10 +551,98 @@ export declare interface ColorStop {
     id: string;
     /** Where the stop sits along the ramp, from 0 at the start to 1 at the end. */
     offset: number;
-    /** The stop's colour, as a hex string such as `#6366f1`. */
+    /** The stop's color, as a hex string such as `#6366f1`. */
     color: string;
 }
 
+declare const COLUMNS: readonly ["left", "center", "right"];
+
+/**
+ * A combo field (design/figma-spec.md 6.3): a value you can type, with a chevron that opens a list
+ * of presets over the field, the current value sitting exactly on top of the field. Figma uses it
+ * for font size, auto-layout width and height ("Hug"), gap and export scale.
+ *
+ * Keyboard: typing edits the value and commits on Enter, Tab or blur; Control+ArrowDown (or
+ * Alt+ArrowDown) opens the list with the current value highlighted; ArrowUp / ArrowDown move,
+ * Home / End jump, Enter picks, Escape closes without a change and leaves focus in the field.
+ * With the list closed, ArrowUp / ArrowDown step a numeric value.
+ * @example
+ * ```tsx
+ * <ComboInput
+ *     label="Font size"
+ *     numeric
+ *     value={size}
+ *     onChange={(next) => { setSize(Number(next)); }}
+ *     options={[10, 11, 12, 13, 14, 16, 24].map((n) => ({ value: String(n) }))}
+ * />
+ * ```
+ */
+export declare const ComboInput: default_2.ForwardRefExoticComponent<ComboInputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+/** An entry in a ComboInput's list. */
+export declare type ComboInputItem = ComboInputOption | ComboInputSeparator;
+
+/** One choice in a ComboInput's list. */
+export declare interface ComboInputOption {
+    /** What is committed when the choice is picked. */
+    value: string;
+    /** What the list shows; the value when absent. */
+    label?: string;
+    /** Shown but not selectable. */
+    disabled?: boolean;
+}
+
+/** Props for ComboInput. */
+export declare interface ComboInputProps {
+    /** The field's accessible name ("Font size"). */
+    label: string;
+    /** The value, when you drive the field from your own state. */
+    value?: string | number;
+    /** The value the field starts with when it keeps its own state. */
+    defaultValue?: string | number;
+    /**
+     * Called once per commit: a choice from the list, Enter, Tab or blur after typing, an arrow
+     * step or the end of a scrub. A numeric field reports a number, a text field a string.
+     */
+    onChange?: ChangeHandler<string | number>;
+    /** The list's entries: choices and separators. */
+    options: ComboInputItem[];
+    /**
+     * Whether the value is a number: typing evaluates arithmetic (`12*2`), ArrowUp / ArrowDown
+     * step it while the list is closed (Shift: ten steps), and a `glyph` slot scrubs it.
+     */
+    numeric?: boolean;
+    /** The smallest number a numeric field accepts. */
+    min?: number;
+    /** The largest number a numeric field accepts. */
+    max?: number;
+    /** One arrow step of a numeric field. @default 1 */
+    step?: number;
+    /** A mode word shown right-aligned before the chevron, in the secondary ink ("Hug"). */
+    suffix?: string;
+    /** A 24px leading slot: a glyph or a letter. On a numeric field it is the scrub handle. */
+    glyph?: default_2.ReactNode;
+    /** Draws the chevron slot 25 wide with a 1px divider in the panel color (the font-size field). */
+    divided?: boolean;
+    /** The field's width. @default 88 (PANEL_GRID.FIELD) */
+    width?: number | string;
+    /** The field cannot be used. */
+    disabled?: boolean;
+    /** Text shown in an empty field. */
+    placeholder?: string;
+    /** The chevron button's accessible name. @default "Open list" */
+    openLabel?: string;
+    /** Extra class on the field's outer element. */
+    className?: string;
+    /** Extra style on the field's outer element. */
+    style?: default_2.CSSProperties;
+}
+
+/** A line between groups of choices. */
+export declare interface ComboInputSeparator {
+    separator: true;
+}
+
 /**
  * Compact theme sizing constants.
  * These values represent the standard sizing used throughout the compact theme
@@ -413,66 +671,65 @@ export declare const COMPACT_SIZING: {
 };
 
 /**
- * A colour swatch, a hex box and an opacity box, joined into one 24px control.
- *
- * Pressing the swatch opens a picker in a pop-out; the hex box takes a typed
- * `RRGGBB` and commits it when it loses focus; the opacity box takes a
- * percentage. All three describe one colour, so they are drawn as a single run
- * with only its outer ends rounded.
+ * The accent palette, the theme's `primaryColor` (spec 3.3). Mantine reads shade 6 filled and
+ * 7 hover in light (#0d99ff / #007be5), 8 / 9 in dark (#0c8ce9 / #0a6dc2), and shade 4 as the
+ * dark-scheme anchor color (#7cc4f8, Figma's dark brand text).
+ */
+export declare const compactBrandColors: MantineColorsTuple;
+
+/**
+ * A color in one paint field: the chit, the hex value and the opacity.
  *
- * As in the other controls of this family, `undefined` means "the reader has
- * chosen nothing here": the control shows the default in italics and offers no
- * reset until something of the reader's own is set, and pressing the reset
- * reports `undefined` again. Colour and opacity are tracked separately, so
- * either can be the reader's while the other is still the default.
+ * Pressing the chit opens the color picker in a pop-out (one at a time, docked to the start
+ * side of the panel); the hex box takes `RRGGBB` (or `RGB`) and commits on blur or Enter, and
+ * reverts on Escape; the opacity box commits on blur or Enter, steps with ArrowUp / ArrowDown
+ * (Shift for 10) and scrubs by dragging its "%".
  *
- * What is typed into the opacity box is read in the reader's own locale, so a
- * comma decimal separator and a locale's own digits are understood rather than
- * discarded. Nothing that is typed is reported until the box loses focus, so a
- * half-typed value never reaches your state.
+ * As in the other controls of this family, `undefined` means "the reader has chosen nothing
+ * here": the control shows the default in italics and offers no reset until something of the
+ * reader's own is set, and pressing the reset reports `undefined` again. Color and opacity are
+ * tracked separately, so either can be the reader's while the other is still the default.
+ * Typed opacity is read in the reader's own locale.
  * @param props - Component props
- * @param props.color - The colour, when you drive the control from your own state
- * @param props.defaultColor - The colour shown while the reader has chosen none of their own
+ * @param props.color - The color, when you drive the control from your own state
+ * @param props.defaultColor - The color shown while the reader has chosen none of their own
  * @param props.opacity - The opacity as a percentage, when you drive the control from your own state
  * @param props.defaultOpacity - The opacity shown while the reader has set none of their own
- * @param props.onColorChange - Called with the new colour, or with `undefined` when the control is reset
+ * @param props.onColorChange - Called with the new color, or with `undefined` when the control is reset
  * @param props.onOpacityChange - Called with the new opacity, or with `undefined` when the control is reset
- * @param props.onChange - Called once per gesture with both halves of the colour, whichever of them moved
+ * @param props.onChange - Called once per gesture with both halves of the color, whichever of them moved
  * @param props.label - The field's name, drawn above the control and used to name the group
- * @param props.showOpacity - Whether to offer an opacity box beside the colour
+ * @param props.showOpacity - Whether to offer the opacity box
  * @param props.disabled - Whether the control cannot be used at all
  * @param props.disabledReason - One sentence saying why the control is off, drawn only while it is off
  * @param props.onFocus - Called when the hex box or the opacity box takes focus
  * @param props.onBlur - Called when the hex box or the opacity box loses focus
- * @returns The joined colour control, and its reset button when something has been set
+ * @param props.width - The field's width
+ * @param props.showReset - Whether to offer the reset button
+ * @returns The paint field, and its reset button when something has been set
  * @example
  * ```tsx
  * const [fill, setFill] = useState<string | undefined>(undefined);
  *
  * <PopoutManager>
- *     <CompactColorInput
- *         label="Fill"
- *         color={fill}
- *         defaultColor="#5B8FF9"
- *         onColorChange={setFill}
- *     />
+ *     <CompactColorInput label="Fill" color={fill} defaultColor="#5B8FF9" onColorChange={setFill} />
  * </PopoutManager>
  * ```
  */
-export declare function CompactColorInput({ color, defaultColor, opacity, defaultOpacity, onColorChange, onOpacityChange, onChange, label, showOpacity, disabled, disabledReason, onFocus, onBlur, }: CompactColorInputProps): default_2.JSX.Element;
+export declare function CompactColorInput({ color, defaultColor, opacity, defaultOpacity, onColorChange, onOpacityChange, onChange, label, showOpacity, disabled, disabledReason, onFocus, onBlur, width, showReset, }: CompactColorInputProps): default_2.JSX.Element;
 
 /**
  * Props for the CompactColorInput component.
  */
 export declare interface CompactColorInputProps {
     /**
-     * The colour, as `#RRGGBB`, when you drive the control from your own state.
+     * The color, as `#RRGGBB`, when you drive the control from your own state.
      *
-     * `undefined` does not mean "no colour" here: it means the reader has
+     * `undefined` does not mean "no color" here: it means the reader has
      * chosen none and the control is showing `defaultColor`.
      */
     color?: string | undefined;
-    /** The colour shown, in italics, while the reader has chosen none of their own. */
+    /** The color shown, in italics, while the reader has chosen none of their own. */
     defaultColor: string;
     /**
      * The opacity as a percentage from 0 to 100, when you drive the control
@@ -487,10 +744,10 @@ export declare interface CompactColorInputProps {
      */
     defaultOpacity?: number;
     /**
-     * Called when the colour changes, and with `undefined` when the control is
+     * Called when the color changes, and with `undefined` when the control is
      * reset to its default.
      *
-     * The colour comes first, as `#RRGGBB` in upper case; the event that caused
+     * The color comes first, as `#RRGGBB` in upper case; the event that caused
      * the change is second and is absent for a change made from the picker,
      * which reports none.
      *
@@ -507,7 +764,7 @@ export declare interface CompactColorInputProps {
      */
     onOpacityChange?: ChangeHandler<number | undefined>;
     /**
-     * Called once per gesture with BOTH halves of the colour, whichever of them
+     * Called once per gesture with BOTH halves of the color, whichever of them
      * moved.
      *
      * Reach for this one, alone, whenever you drive the control from your own
@@ -515,17 +772,10 @@ export declare interface CompactColorInputProps {
      * already use them, but they cannot carry a gesture that moves both halves
      * at once.
      *
-     * THE DEFECT THIS REPAIRS, reproduced at runtime rather than reasoned
-     * about: dragging in the picker used to call `onColorChange` and then
-     * `onOpacityChange` back to back inside one React batch. A controlled
-     * consumer builds its next state out of the props it is holding -- the only
-     * snapshot it has -- and both callbacks run against the SAME pre-gesture
-     * snapshot, so the second one writes a state rebuilt from a colour the
-     * first one had already replaced. A test in this package
-     * (tests/components/CompactColorInput.test.tsx, "the two separate callbacks
-     * cannot carry one gesture") drives a picker swatch and watches the second
-     * write arrive as `{opacity: 50}` with the new colour gone. The application
-     * had already forked this whole component to escape it.
+     * Why: a picker gesture can move the color and the opacity at once. With
+     * the two separate callbacks, both run against the same props, so a
+     * controlled consumer that rebuilds its state from those props in each one
+     * loses the color when the opacity write lands second.
      *
      * Both halves are always passed, so a consumer never has to remember which
      * one moved -- the same shape `GradientEditor` already uses for its stops
@@ -551,12 +801,12 @@ export declare interface CompactColorInputProps {
      * The field's name, drawn above the control and used to name the group the
      * three controls sit in.
      *
-     * Leave it out for a colour that is already named by what surrounds it,
+     * Leave it out for a color that is already named by what surrounds it,
      * such as one stop of a gradient.
      */
     label?: string;
     /**
-     * Whether to offer an opacity box beside the colour.
+     * Whether to offer an opacity box beside the color.
      * @default true
      */
     showOpacity?: boolean;
@@ -575,15 +825,13 @@ export declare interface CompactColorInputProps {
      * is true.
      *
      * It is appended to the control's own name after a full stop and drawn as
-     * the tooltip -- "Glow colour. Glow is not drawn yet" -- and it also joins
+     * the tooltip -- "Glow color. Glow is not drawn yet" -- and it also joins
      * the accessible description of the swatch, the hex box and the opacity
      * box, so the reason reaches a pointer user and a screen reader user alike.
      * With no `label` to append to, the sentence stands on its own.
      *
-     * THE DEFECT THIS REPAIRS: a disabled colour control used to be dimmed and
-     * silent, so a reader who could not open the picker had no route at all to
-     * learning why -- spec:6641 asks for the one reason to travel with the
-     * disabled ink, and until now this component had nowhere to put it.
+     * Write it as a whole sentence naming what would make the control usable
+     * again.
      */
     disabledReason?: string;
     /** Called when the hex box or the opacity box takes focus. Forwarded unchanged. */
@@ -595,14 +843,27 @@ export declare interface CompactColorInputProps {
      * keep for this control inside the handler sees the new value.
      */
     onBlur?: default_2.FocusEventHandler<HTMLInputElement>;
+    /**
+     * The field's width. Figma's paint field is 156 beside a row's eye and minus buttons and
+     * 184 on its own, which is the default here (the reset button sits in the trailing slot).
+     * Pass `"100%"` to fill a flex slot, as the gradient editor's stop rows do.
+     * @default 184
+     */
+    width?: number | string;
+    /**
+     * Whether to offer the reset button once something is chosen.
+     * @default true
+     */
+    showReset?: boolean;
 }
 
 /**
- * Color configuration for the compact theme.
- * Includes all default Mantine colors plus custom dark palette.
+ * Color configuration for the compact theme: every Mantine color, the neutral `dark` ramp and
+ * the `brand` accent.
  */
 export declare const compactColors: {
     dark: MantineColorsTuple;
+    brand: MantineColorsTuple;
     gray: MantineColorsTuple;
     red: MantineColorsTuple;
     pink: MantineColorsTuple;
@@ -619,16 +880,25 @@ export declare const compactColors: {
 };
 
 /**
- * Custom dark color palette optimized for dense UIs.
+ * Mantine's `dark` ramp, re-pointed at Figma's neutral grays (spec 3.3), so an unthemed Mantine
+ * surface in the dark scheme matches the panels around it.
  *
- * Usage:
- * - 0-2: Light tones (text, borders in light mode)
- * - 3-5: Mid tones (secondary elements)
- * - 6-7: Dark tones (input backgrounds in dark mode)
- * - 8-9: Darkest tones (main backgrounds in dark mode)
+ * - 0: text (#fff)
+ * - 5: hover (#444)
+ * - 6: default field (#383838)
+ * - 7: body / panel (#2c2c2c)
+ * - 8: menus and tooltips (#1e1e1e)
  */
 export declare const compactDarkColors: MantineColorsTuple;
 
+/**
+ * The whole stylesheet, for SSR or a shadow root. With `highContrast` the AA tokens are also
+ * applied unconditionally, so the result needs no `data-cm-contrast` attribute.
+ * @param options - the theme options
+ * @returns the CSS text
+ */
+export declare function compactGlobalCss(options?: CompactThemeOptions): string;
+
 /**
  * Every user-visible or assistive-technology-visible string this library
  * produces.
@@ -738,13 +1008,13 @@ export declare interface CompactMantineLabels {
      * @returns The button's accessible name
      */
     resetToDefault: (label: string) => string;
-    /** Accessible name of the swatch button that opens the colour picker. */
+    /** Accessible name of the swatch button that opens the color picker. */
     colorSwatch: string;
-    /** Accessible name of the text box holding the colour's hex value. */
+    /** Accessible name of the text box holding the color's hex value. */
     colorHexValue: string;
-    /** Accessible name of the number box holding the colour's opacity percentage. */
+    /** Accessible name of the number box holding the color's opacity percentage. */
     opacity: string;
-    /** Title of the colour picker pop-out when the caller supplied no label. */
+    /** Title of the color picker pop-out when the caller supplied no label. */
     colorPanelTitle: string;
     /**
      * Stands in for a missing control name inside a reset button's accessible
@@ -827,6 +1097,22 @@ export declare interface CompactMantineLabels {
     closePanel: string;
     /** Accessible name of a tabbed pop-out panel when its first tab has no label. */
     settings: string;
+    /** Default accessible name of a `Toolbar` when the caller gives none. */
+    toolbar: string;
+    /** Default accessible name of a `NavRail`, the vertical navigation toolbar. */
+    navigation: string;
+    /** Accessible name and tooltip of the round `HelpButton`. */
+    help: string;
+    /** Accessible name of the `ShortcutSheet` and of its tab list. */
+    keyboardShortcuts: string;
+    /** Accessible name of the close button in the `ShortcutSheet`'s tab strip. */
+    close: string;
+    /** Accessible name of the `QuickActions` dialog. */
+    quickActions: string;
+    /** Placeholder and accessible name of the `QuickActions` search field. */
+    searchActions: string;
+    /** Shown in `QuickActions` when nothing matches the search. */
+    noResults: string;
     /**
      * Accessible name of the eye button inside a password field that shows or
      * hides what was typed. One name in both states: the button reports whether
@@ -850,25 +1136,9 @@ export declare interface CompactMantineLabels {
 }
 
 /**
- * Full Mantine theme with compact sizing by default for dense UIs.
- *
- * This is a complete theme merged with DEFAULT_THEME, suitable for:
- * - Direct use with MantineProvider
- * - Merging with other themes using mergeMantineTheme()
- *
- * All components default to size="sm" automatically with compact styling:
- * - Input height: 24px
- * - Font size: 11px
- * - Borderless at rest, with a visible focus indicator on keyboard focus
- * - Semantic color backgrounds
- *
- * Global token overrides:
- * - fontSizes: Smaller font sizes (xs: 10px, sm: 11px, md: 13px, lg: 14px, xl: 16px)
- * - spacing: Tighter spacing (xs: 4px, sm: 6px, md: 8px, lg: 12px, xl: 16px)
- * - radius: Compact corner radii (xs: 2px, sm: 4px, md: 6px, lg: 8px, xl: 12px)
+ * The full Mantine theme at Figma defaults, merged with DEFAULT_THEME.
  * @example
  * ```tsx
- * // Simple usage - direct with MantineProvider
  * import { MantineProvider } from '@mantine/core';
  * import { compactTheme } from '@graphty/compact-mantine';
  *
@@ -876,33 +1146,25 @@ export declare interface CompactMantineLabels {
  *     <App />
  * </MantineProvider>
  * ```
- * @example
- * ```tsx
- * // Extending the theme with mergeMantineTheme
- * import { mergeMantineTheme, createTheme } from '@mantine/core';
- * import { compactTheme } from '@graphty/compact-mantine';
- *
- * const myTheme = mergeMantineTheme(compactTheme, createTheme({
- *     primaryColor: 'teal',
- * }));
- *
- * <MantineProvider theme={myTheme}>
- *     <App />
- * </MantineProvider>
- * ```
  */
 export declare const compactTheme: MantineTheme;
 
+/** The options the theme and its stylesheet take. */
+export declare interface CompactThemeOptions {
+    /**
+     * Apply the WCAG 2.2 AA token set (spec 2.9). Default false: exact Figma.
+     */
+    highContrast?: boolean;
+}
+
 /**
- * Partial theme override with compact sizing for dense UIs.
- *
- * This is the raw theme override created with createTheme().
- * Use this if you need to merge with other theme overrides using mergeThemeOverrides().
+ * The compact theme override at Figma defaults: `createCompactTheme()`.
  *
- * For most use cases, use `compactTheme` instead which is a full merged theme.
+ * Use this to merge with other overrides (`mergeThemeOverrides`); for most uses pass
+ * `compactTheme` to `MantineProvider` instead.
  */
 export declare const compactThemeOverride: {
-    focusRing?: "auto" | "never" | "always" | undefined;
+    focusRing?: "never" | "auto" | "always" | undefined;
     scale?: number | undefined;
     fontSmoothing?: boolean | undefined;
     white?: string | undefined;
@@ -973,8 +1235,8 @@ export declare const compactThemeOverride: {
     } | undefined;
     radius?: {
         [x: string & {}]: string | undefined;
-        sm?: string | undefined;
         xs?: string | undefined;
+        sm?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
@@ -983,40 +1245,40 @@ export declare const compactThemeOverride: {
     spacing?: {
         [x: number]: string | undefined;
         [x: string & {}]: string | undefined;
-        sm?: string | undefined;
         xs?: string | undefined;
+        sm?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     fontSizes?: {
         [x: string & {}]: string | undefined;
-        sm?: string | undefined;
         xs?: string | undefined;
+        sm?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     lineHeights?: {
         [x: string & {}]: string | undefined;
-        sm?: string | undefined;
         xs?: string | undefined;
+        sm?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     breakpoints?: {
         [x: string & {}]: string | undefined;
-        sm?: string | undefined;
         xs?: string | undefined;
+        sm?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
     } | undefined;
     shadows?: {
         [x: string & {}]: string | undefined;
-        sm?: string | undefined;
         xs?: string | undefined;
+        sm?: string | undefined;
         md?: string | undefined;
         lg?: string | undefined;
         xl?: string | undefined;
@@ -1041,30 +1303,38 @@ export declare const compactThemeOverride: {
     other?: {
         [x: string]: any;
         panelGrid?: {
-            readonly WIDTH?: 280 | undefined;
+            readonly WIDTH?: 240 | undefined;
             readonly PAD_LEFT?: 16 | undefined;
             readonly PAD_RIGHT?: 8 | undefined;
-            readonly CONTENT?: 256 | undefined;
-            readonly BODY?: 224 | undefined;
-            readonly FIELD?: 108 | undefined;
+            readonly CONTENT?: 216 | undefined;
+            readonly BODY?: 184 | undefined;
+            readonly FIELD?: 88 | undefined;
             readonly GUTTER?: 8 | undefined;
             readonly TRAIL_GAP?: 8 | undefined;
             readonly TRAIL?: 24 | undefined;
-            readonly TRIPLE?: 72 | undefined;
-            readonly TRIPLE_GAP?: 4 | undefined;
+            readonly TRIPLE?: number | undefined;
+            readonly TRIPLE_GAP?: 0 | undefined;
             readonly CONTROL_HEIGHT?: 24 | undefined;
             readonly ROW_PITCH?: 32 | undefined;
-            readonly TOGGLE_PITCH?: 24 | undefined;
-            readonly DATA_PITCH?: 28 | undefined;
-            readonly SECTION_HEADER?: 32 | undefined;
-            readonly SECTION_PAD_BOTTOM?: 8 | undefined;
-            readonly GLYPH_SLOT?: 16 | undefined;
-            readonly GLYPH?: 14 | undefined;
-            readonly CHEVRON?: 12 | undefined;
+            readonly TOGGLE_PITCH?: 32 | undefined;
+            readonly DATA_PITCH?: 32 | undefined;
+            readonly SECTION_HEADER?: 40 | undefined;
+            readonly SECTION_PAD_BOTTOM?: 12 | undefined;
+            readonly GLYPH_SLOT?: 24 | undefined;
+            readonly GLYPH?: 12 | undefined;
+            readonly CHEVRON?: 10 | undefined;
             readonly VALUE_INSET?: 24 | undefined;
             readonly SPARKLINE_HEIGHT?: 32 | undefined;
             readonly HISTOGRAM_HEIGHT?: 64 | undefined;
-            readonly LABEL_COLUMN?: 76 | undefined;
+            readonly LABEL_COLUMN?: 72 | undefined;
+            readonly FIELD_ROW?: 48 | undefined;
+            readonly CAPTION_ROW?: 50 | undefined;
+            readonly LEGEND?: 16 | undefined;
+            readonly POPOVER_WIDTH?: 240 | undefined;
+            readonly POPOVER_HEADER?: 40 | undefined;
+        } | undefined;
+        compact?: {
+            highContrast?: boolean | undefined;
         } | undefined;
     } | undefined;
 };
@@ -1073,14 +1343,14 @@ export declare const compactThemeOverride: {
  * Two or three values that belong to one thing, in a single box divided by
  * hairlines.
  *
- * A colour and its opacity are one setting seen two ways rather than two
- * settings. Drawing them in one box, split by a one-pixel divider in the colour
+ * A color and its opacity are one setting seen two ways rather than two
+ * settings. Drawing them in one box, split by a one-pixel divider in the color
  * of the panel behind it, says exactly that; drawing them in two boxes with a
  * gap between them says the opposite. The divider is a hairline and not a
  * gutter on purpose, because a gutter reads as two separate controls.
  *
  * **The rule people break.** Never put two unrelated values in one box. The
- * test is whether the box has one honest name: "Node colour and opacity" is one
+ * test is whether the box has one honest name: "Node color and opacity" is one
  * thing seen two ways, so it belongs here; "Node size and edge width" is two
  * things that happen to be adjacent, so it belongs in a `FieldRow` pair -- two
  * fields, two boxes, two glyphs. A compound row is a claim about the data, and
@@ -1110,11 +1380,11 @@ export declare const compactThemeOverride: {
  * When the "show labels on controls" preference is on -- see
  * `PanelLabelsProvider` -- the row's one name moves out to a column of its own
  * beside the box, and the box fills the rest of the row. The segments are never
- * labelled individually, because they are not individually named things.
+ * labeled individually, because they are not individually named things.
  * @param props - Component props
  * @param props.label - Names the one thing the segments belong to; becomes the box's tooltip and part of its accessible name
  * @param props.segments - Two or three values that belong to one thing
- * @param props.width - The width of the box in pixels: 224 to fill the row, 108 for half of one
+ * @param props.width - The width of the box in pixels: 184 to fill the row, 88 for half of one
  * @param props.trailing - The 24px trailing control: an advanced settings button, a reset, or nothing
  * @param props.busy - Whether the row's values are still being worked out by something that finishes later
  * @param props.live - How urgently a screen reader announces the row when it changes on its own
@@ -1125,9 +1395,9 @@ export declare const compactThemeOverride: {
  * @example
  * ```tsx
  * <CompoundRow
- *     label="Node colour and opacity"
+ *     label="Node color and opacity"
  *     segments={[
- *         {glyph: <Swatch colour="#4a7ee8" />, value: "4A7EE8", mono: true, grow: true},
+ *         {glyph: <Swatch color="#4a7ee8" />, value: "4A7EE8", mono: true, grow: true},
  *         {value: percentFormatter.format(1), unit: "%"},
  *     ]}
  *     onClick={() => { setEditorOpen(true); }}
@@ -1147,8 +1417,8 @@ export declare interface CompoundRowProps {
     /**
      * The width of the box in pixels.
      *
-     * `PANEL_GRID.BODY` (224) fills the row and still leaves room for the
-     * trailing control; `PANEL_GRID.FIELD` (108) is half a row, for a box that
+     * `PANEL_GRID.BODY` (184) fills the row and still leaves room for the
+     * trailing control; `PANEL_GRID.FIELD` (88) is half a row, for a box that
      * sits beside another control. Ignored while the "show labels on controls"
      * preference is on, when the box fills whatever the label column leaves.
      */
@@ -1196,9 +1466,9 @@ export declare interface CompoundRowProps {
      * @example
      * ```tsx
      * <CompoundRow
-     *     label="Node colour and opacity"
+     *     label="Node color and opacity"
      *     segments={segments}
-     *     onClick={(event) => { openColourEditor({addToSelection: event.shiftKey}); }}
+     *     onClick={(event) => { openColorEditor({addToSelection: event.shiftKey}); }}
      * />
      * ```
      */
@@ -1214,8 +1484,8 @@ export declare interface CompoundRowProps {
  */
 export declare interface CompoundSegment {
     /**
-     * A glyph name, a single capital letter, or your own node -- a colour
-     * swatch, say -- drawn in this segment's leading 16px slot.
+     * A glyph name, a single capital letter, or your own node -- a color
+     * swatch, say -- drawn in this segment's leading 24px slot.
      *
      * A plain string is deliberately not accepted: a loose word in the slot
      * would be a label smuggled into a space meant for a drawing. A segment
@@ -1248,48 +1518,86 @@ export declare interface CompoundSegment {
     fullValue?: string;
     /** Dimmed suffix drawn immediately after the value, inside the same segment, such as a percent sign. */
     unit?: string;
-    /** Draw the value in the monospace face. For hex colours, identifiers and anything read character by character. */
+    /** Draw the value in the monospace face. For hex colors, identifiers and anything read character by character. */
     mono?: boolean;
     /** This segment takes the box's remaining width. Exactly one segment should set it, and it should be the main value. */
     grow?: boolean;
 }
 
 /**
- * A labelled group of controls, with a rule above its name.
+ * A dark menu opened at the pointer by a right-click (design/figma-spec.md 8.2):
+ * its top-left corner 3px right of and 5px above the pointer, flipping and
+ * shifting to stay on screen, with the first enabled row highlighted so Enter
+ * acts on it at once. It also opens from the keyboard (Shift+F10, the
+ * ContextMenu key) at the focused element. Escape, a click outside or choosing a
+ * row closes it and returns focus to where it was.
+ * @param props - Component props
+ * @param props.target - The element that opens the menu
+ * @param props.children - The menu's rows
+ * @param props.onChange - Called when the menu opens or closes
+ * @returns The target, with the menu attached
+ * @example
+ * ```tsx
+ * <ContextMenu target={<div className="canvas" tabIndex={0} />}>
+ *     <Menu.Item rightSection="Ctrl+C">Copy</Menu.Item>
+ *     <Menu.Item rightSection="Ctrl+V">Paste here</Menu.Item>
+ *     <Menu.Divider />
+ *     <Menu.Item color="red">Delete</Menu.Item>
+ * </ContextMenu>
+ * ```
+ */
+export declare function ContextMenu({ target, children, onChange, ...menuProps }: ContextMenuProps): JSX.Element;
+
+/**
+ * Props for ContextMenu: the target, the rows, and any Mantine `Menu` prop
+ * except those that place and open it, which the context menu owns.
+ */
+export declare interface ContextMenuProps extends Omit<MenuProps, "children" | "opened" | "defaultOpened" | "position" | "offset" | "trigger"> {
+    /**
+     * The element that opens the menu when it is right-clicked, or when it (or
+     * something inside it) has focus and Shift+F10 or the ContextMenu key is
+     * pressed. One element that accepts `onContextMenu` and `onKeyDown`.
+     */
+    target: ReactElement<{
+        onContextMenu?: (event: MouseEvent_2<HTMLElement>) => void;
+        onKeyDown?: (event: KeyboardEvent_2<HTMLElement>) => void;
+    }>;
+    /** The menu's rows: `Menu.Item`, `Menu.Label`, `Menu.Divider`, `Menu.Sub`, `MenuCheckItem`. */
+    children: ReactNode;
+}
+
+/**
+ * A labeled group of controls: a 16px legend band carrying the group's name
+ * as a small caption, then the rows.
  *
- * The group is always open: the rule, the name, any header buttons and the
- * controls are all on screen at once, and nothing about it collapses. That is
- * the whole difference between this and `ControlSection`, and it is the
- * question to ask when choosing between them:
+ * The group is always open. That is the whole difference between this and
+ * `ControlSection`, and it is the question to ask when choosing between them:
  *
- * - Reach for `ControlSection` when the group should fold away, or when it
- *   sits directly in a property panel and should line up on that panel's
- *   16px/8px grid. It adds a chevron, a keyboard-operable header, an empty
- *   state and an explanation bubble.
- * - Reach for `ControlGroup` when the controls must stay visible, or when the
- *   group is nested inside a container that already supplies its own padding.
- *   `bleed` exists for exactly that case and `ControlSection` has no
- *   equivalent.
+ * - Reach for `ControlSection` for a subject of the panel, with a 40px header,
+ *   a rule below and, where it collapses, a chevron.
+ * - Reach for `ControlGroup` for a named cluster of rows inside a section --
+ *   Figma's "Alignment" or "Position" legends -- or inside a pop-out.
  *
- * The header is a flex row: the name takes the space it needs and shortens
- * with an ellipsis when the container is narrow, and the buttons stay pinned
- * to the end of the row. Everything is laid out in inline terms, so the group
- * mirrors correctly when it is rendered right to left.
+ * A field row under a legend comes out at Figma's 48px: the 16px band, then the
+ * 32px row with its 24px control centered. The legend shortens with an ellipsis
+ * when the container is narrow, header buttons stay pinned to its end, and
+ * everything is laid out in inline terms so the group mirrors right to left.
  * @param props - Component props
  * @param props.label - The group's name, which is also its accessible name
- * @param props.actions - Buttons drawn at the end of the header row
+ * @param props.actions - Buttons drawn at the end of the legend band
  * @param props.children - The controls the group holds
- * @param props.bleed - Run the rule out to the edges of a padded container
  * @returns The control group
  * @example
  * ```tsx
- * <ControlGroup label="Appearance" actions={<ResetButton />}>
- *     <ToggleRow label="Labels" defaultChecked />
- *     <StyleSelect label="Shape" defaultValue="circle" options={shapes} />
+ * <ControlGroup label="Position">
+ *     <FieldRow>
+ *         <PanelField label="X" glyph="X" value="100" />
+ *         <PanelField label="Y" glyph="Y" value="40" />
+ *     </FieldRow>
  * </ControlGroup>
  * ```
  */
-export declare function ControlGroup({ label, actions, children, bleed }: ControlGroupProps): default_2.JSX.Element;
+export declare function ControlGroup({ label, actions, children }: ControlGroupProps): default_2.JSX.Element;
 
 /**
  * Props for the ControlGroup component.
@@ -1312,14 +1620,10 @@ export declare interface ControlGroupProps {
     /** The controls the group holds, stacked in the order you write them. */
     children: default_2.ReactNode;
     /**
-     * Run the rule above the header out to the edges of the surrounding
-     * container instead of stopping at its padding.
-     *
-     * Turn this on when the group sits inside something that supplies its own
-     * padding -- a pop-out panel, or a sidebar -- and you want the rule to read
-     * as a divider across the whole panel rather than as a line floating
-     * inside it. It is drawn with a negative inline margin, so it follows the
-     * text direction with no further work.
+     * Kept so existing callers compile. The group no longer draws a rule (Figma
+     * does not divide groups inside a section), so there is nothing to bleed and
+     * the prop has no effect.
+     * @deprecated no effect since the Figma restyle
      */
     bleed?: boolean;
 }
@@ -1327,33 +1631,35 @@ export declare interface ControlGroupProps {
 /**
  * A named, collapsible group of controls for a dense property panel.
  *
- * A section is drawn as a 1px rule, a 32px header carrying the section's name,
- * the rows it holds, and 8px of padding beneath them. Naming the group once in
+ * A section is drawn as a 40px header carrying the section's name, the rows it
+ * holds, 12px of padding beneath them, and a 1px rule below. Naming the group once in
  * the header is what lets the rows inside it spend their width on values rather
  * than on labels and buttons of their own.
  *
  * **A section always expands**, and three rules follow from that:
  *
  * 1. The chevron is drawn only when there is something to expand. An `empty`
- *    section has no chevron at all: its 16px slot is left blank and its
- *    trailing slot carries one "+".
+ *    section has no chevron at all and its trailing slot carries one "+".
+ *    Hovering its header brings the name, and the "+", up to the primary
+ *    ink; clicking the name adds, like the "+".
  * 2. In development it warns when it is given neither children nor `empty`,
  *    because a header that opens onto nothing is a dead end for the reader.
  * 3. There is no way to put the section's own content behind a pop-out. An
  *    advanced settings button belongs in `actions`, beside the rows rather than
  *    instead of them.
  *
- * The name is drawn in the primary text colour when the section holds
- * something and in the secondary colour when it is `empty`. That dimming is the
+ * The name is drawn in the primary text color when the section holds
+ * something and in the secondary color when it is `empty`. That dimming is the
  * whole empty state -- no "Not set", no "None", no sentence -- so a column of
  * dim section names reads as an inventory of what has not been set up yet. It
  * is never the only signal: an empty section also loses its chevron and gains a
- * "+", so nothing about the state depends on telling two greys apart.
+ * "+", so nothing about the state depends on telling two grays apart.
  *
  * The section draws the panel's own horizontal padding, 16px at the leading
- * edge and 8px at the trailing edge, so a section dropped straight into a 280px
+ * edge and 8px at the trailing edge, so a section dropped straight into a 240px
  * panel lands its header and its rows on the same grid the rows expect. The
- * padding follows the text direction, and so does the chevron -- a collapsed
+ * chevron sits in the 16px gutter before the name. The padding follows the
+ * text direction, and so does the chevron -- a collapsed
  * section points towards the left in a right-to-left interface -- so the
  * section is correct in either direction with nothing to configure.
  * @param props - Component props
@@ -1368,6 +1674,7 @@ export declare interface ControlGroupProps {
  * @param props.info - An explanation, put behind a circled "i" and used as the section's accessible description
  * @param props.actions - The section's own buttons, drawn at the end of the header
  * @param props.children - The rows the section holds
+ * @param props.collapsible - Whether the section folds away behind a chevron, defaulting to true
  * @returns The section, its header and its rows
  * @example
  * ```tsx
@@ -1417,12 +1724,12 @@ export declare interface ControlSectionProps extends DisclosureProps {
      * Whether the section is set up at all.
      *
      * An empty section is drawn as one 32px row: the name in the secondary text
-     * colour, no chevron, and a single "+" in the trailing slot. It shows no
+     * color, no chevron, and a single "+" in the trailing slot. It shows no
      * content and no empty-state sentence, and its children are not rendered.
      *
      * The dimmed name is never the only thing that says so. The chevron is
      * gone, the "+" is there, and the group holds nothing, so the state still
-     * reads for someone who cannot tell the two text colours apart. Give
+     * reads for someone who cannot tell the two text colors apart. Give
      * `onAdd` whenever a section can be empty: its "Add ..." button is what
      * states the section is waiting to be set up, in words, to a screen reader.
      */
@@ -1460,23 +1767,30 @@ export declare interface ControlSectionProps extends DisclosureProps {
     actions?: default_2.ReactNode;
     /** The rows the section holds: the controls commonly adjusted for its subject. */
     children?: default_2.ReactNode;
+    /**
+     * Whether the section folds away behind a chevron in the left gutter.
+     *
+     * Figma collapses only a few sections (Export, Styles); most are shown or hidden as a whole
+     * by the app. Set it to false for a section that is always open: no chevron, no toggle
+     * button, and its rows are always on screen.
+     * @default true
+     */
+    collapsible?: boolean;
 }
 
 /**
  * A collapsible sub-group of controls, lighter than a section.
  *
- * Use it inside a `ControlSection` for the settings most readers never open:
- * text effects under a label section, easing under an animation section. It is
- * deliberately quieter than a section -- no rule above it, a smaller chevron,
- * and its name drawn small in the secondary text colour -- so that a panel
- * still reads as a list of sections with a few foldaways inside them rather
- * than as two competing levels of heading.
+ * Prefer an `AdvancedButton` that opens a pop-out: that is how Figma keeps rare
+ * settings off the panel. Where a fold inside the section is still wanted, this
+ * draws it the Figma way: a 32px row whose chevron hangs in the 16px gutter to
+ * the left of the section's content edge, and a label in the secondary text
+ * color that comes up to the primary one under the pointer. The content opens
+ * in one frame, on the same grid as the rows around it.
  *
  * The header is one button carrying the open state, and the controls it reveals
- * are a labelled region that the button points at, so a screen reader announces
- * the group and can jump straight into it. The content stays in the document
- * while it is closed and animates open, and nothing inside a closed sub-group
- * can be reached by Tab.
+ * are a labeled region that the button points at. Nothing inside a closed
+ * sub-group can be reached by Tab.
  *
  * Drive it from your own state with `opened` and `onOpenChange`, or leave both
  * out and let it remember its own with `defaultOpened`.
@@ -1527,6 +1841,23 @@ export declare interface ControlSubGroupProps extends DisclosureProps {
  */
 export declare function createColorStop(offset: number, color: string): ColorStop;
 
+/**
+ * Create the compact theme: Figma's editor look in both color schemes, or with
+ * `highContrast: true` the WCAG 2.2 AA token set (design/figma-spec.md 2.9).
+ *
+ * Light and dark are Mantine's own color scheme (`defaultColorScheme`, `forceColorScheme`,
+ * `useMantineColorScheme`); one theme object serves both.
+ * @param options - `highContrast` switches on the AA tokens
+ * @returns a theme override for `MantineProvider`
+ * @example
+ * ```tsx
+ * <MantineProvider theme={createCompactTheme({ highContrast: true })}>
+ *     <App />
+ * </MantineProvider>
+ * ```
+ */
+export declare function createCompactTheme(options?: CompactThemeOptions): MantineThemeOverride;
+
 /**
  * Creates default gradient stops for a new gradient configuration.
  * @returns An array of two ColorStops (start and end)
@@ -1541,30 +1872,26 @@ export declare function createDefaultGradientStops(): ColorStop[];
  * value, and the reason is worth stating because every other row type exists to
  * replace that label with a glyph. An identifier, a node label, an attribute
  * name or a filename is *data*, and data cannot be drawn: there is no picture of
- * `Mr_Whiskers`. So the string stays, at 12px in the primary text colour, and
+ * `Mr_Whiskers`. So the string stays, at 11px in the primary text color, and
  * the number that describes it rides at the trailing edge in the smaller
- * secondary colour.
+ * secondary color.
  *
  * The number is bare. A run of rows that all measure the same thing carries its
  * unit word once, on a `DataRowHeader` above the column, rather than repeating
  * it on every row -- "links" above the column and `4` on the rows. A rank is a
  * `RankChip` reading `#6`, not the sentence "Rank 6 of 318".
  *
- * Rows are selectable, and the handler is given the event, so the selection
- * gestures a list is expected to answer -- Shift to extend, Control or Command
- * to toggle, a right click for a menu -- are all yours to implement. Selection
- * is reported to a screen reader as well as drawn, either as `aria-current` for
- * a single selected row or, inside a listbox, as `aria-selected`.
+ * A row is a reading, not an object in a list. Give it `onClick` to open what
+ * the reading is about, and `selected` to mark the current row of a ranking
+ * (reported as `aria-current`). A list the reader selects, renames or reorders
+ * is a `Tree` (nested) or a `PageList` (flat); a find result is a `ResultRow`.
  * @param props - Component props
  * @param props.name - The reader's own string
- * @param props.value - The trailing value, bare and in the secondary text colour
+ * @param props.value - The trailing value, bare and in the secondary text color; a number is formatted for the locale
+ * @param props.stat - Draws the row as a stat: the name as the label, the value emphasized, the pair one group
  * @param props.icon - A 16px leading icon, worth drawing only when the rows differ in type
- * @param props.selected - Whether this row is the selected one
- * @param props.role - How the row reports being selected: `"button"` for one selected row, `"option"` inside a listbox
- * @param props.tabIndex - The row's position in the tab order, for a list that manages focus itself
+ * @param props.selected - Whether this row is the current one, reported as `aria-current`
  * @param props.onClick - Called when the row is activated, with the event and the activation source
- * @param props.onDoubleClick - Called when the row is double-clicked, anywhere along it
- * @param props.onContextMenu - Called when a context menu is asked for on the row, by pointer or from the keyboard
  * @param props.onFocus - Called when the row's body takes focus
  * @param props.onBlur - Called when the row's body loses focus
  * @param props.trailing - The row's occasional control, in the 24px slot at its trailing edge
@@ -1576,17 +1903,17 @@ export declare function createDefaultGradientStops(): ColorStop[];
  *     <DataRow
  *         key={node.id}
  *         name={node.id}
- *         value={formatter.format(node.degree)}
+ *         value={node.degree}
  *         selected={node.id === current}
  *         onClick={() => { setCurrent(node.id); }}
  *     />
  * ))}
  * ```
  */
-export declare function DataRow({ name, value, icon, selected, role, tabIndex, onClick, onDoubleClick, onContextMenu, onFocus, onBlur, trailing, }: DataRowProps): default_2.JSX.Element;
+export declare function DataRow({ name, value, stat, icon, selected, onClick, onFocus, onBlur, trailing, }: DataRowProps): default_2.JSX.Element;
 
 /**
- * The 20px caption above a run of data rows, optionally sortable.
+ * The 32px caption above a run of data rows (11/16 at 550), optionally sortable.
  *
  * It exists to carry the one word the rows below must not repeat. Three or more
  * rows measuring the same thing put their unit here once -- "links" above the
@@ -1594,9 +1921,9 @@ export declare function DataRow({ name, value, icon, selected, role, tabIndex, o
  * trailing edge becomes a number a reader can compare down rather than a ragged
  * phrase they have to re-read.
  *
- * Both halves are drawn small in the secondary text colour, because a caption is
+ * Both halves are drawn small in the secondary text color, because a caption is
  * chrome rather than content. The name of the sorted column is drawn in the
- * primary colour instead, which is how a reader sees at a glance which column
+ * primary color instead, which is how a reader sees at a glance which column
  * the list is in the order of.
  *
  * Give it `onSortChange` and the caption becomes a button that cycles between
@@ -1688,43 +2015,41 @@ export declare interface DataRowProps {
     /** The reader's own string: an identifier, a node label, an attribute name, a filename. */
     name: string;
     /**
-     * The trailing value, drawn small in the secondary text colour. Bare: the
+     * The trailing value, drawn small in the secondary text color. Bare: the
      * repeated unit word belongs on `DataRowHeader`.
      *
-     * It is drawn exactly as given. A number is not formatted for you, so pass
-     * it through `useNumberFormatter().format(n)` first; handed the raw number
-     * the row draws `1284` in every locale, rather than `1,284` for a reader in
-     * en-US and `1.284` for one in de-DE.
+     * Pass a number raw: the row formats it for the reader's locale, `1,284`
+     * in en-US and `1.284` in de-DE, keeping every fraction digit it is given.
+     * Anything else is drawn exactly as given, so pass a string when you have
+     * rounded or formatted the value yourself.
      */
     value?: default_2.ReactNode;
-    /** A 16px leading icon, worth drawing only when the rows differ in type. */
-    icon?: default_2.ReactNode;
-    /** Whether this row is the selected one. Draws the accent tint and reports the selection to a screen reader. */
-    selected?: boolean;
     /**
-     * How the row reports being selected. Defaults to `"button"`.
+     * Draws the row as a stat: a label and its reading, such as "Nodes 1,000,000".
      *
-     * Leave it alone for a list with one selected row. Set `"option"` when you
-     * have wrapped a run of rows in an element with `role="listbox"`, which is
-     * what lets a screen reader announce several rows as selected at once.
+     * The name is drawn in the secondary text color at weight 400 and the value
+     * in the primary color at weight 500, because the reading is the half the
+     * reader came for. The pair is exposed as one `role="group"` named by the
+     * name, so a screen reader reads "Nodes, 1,000,000" as one unit (WCAG 1.3.1).
+     *
+     * Leave it off for a list of the reader's own strings -- datasets, files,
+     * nodes -- where the name is the thing being read.
      */
-    role?: DataRowRole;
+    stat?: boolean;
+    /** A 16px leading icon, worth drawing only when the rows differ in type. */
+    icon?: default_2.ReactNode;
     /**
-     * The row's position in the tab order.
-     *
-     * A clickable row is reachable by Tab on its own. Pass `-1` on every row but
-     * one when you are managing focus yourself, as a listbox does when the arrow
-     * keys move between rows and Tab enters and leaves the list.
+     * Whether this row is the current one: the item on screen, or the current
+     * entry of a ranking. Draws the accent tint and reports it to a screen
+     * reader as `aria-current`.
      */
-    tabIndex?: number;
+    selected?: boolean;
     /**
      * Called when the row is activated, by a click or by Enter or Space.
      *
-     * Read the event for the modifier keys a selection needs: Shift to extend a
-     * range, and Control or Command to add and remove one row. The second
-     * argument says whether the row was activated with a pointer or from the
-     * keyboard, which is worth branching on because a keyboard activation
-     * carries no click count and no modifiers to extend a range with.
+     * Open what the reading is about: the node a ranking names, the file a
+     * recent-files row names. The second argument says whether the row was
+     * activated with a pointer or from the keyboard.
      *
      * Giving a row this handler makes its name and value a real button, so the
      * row is reachable by Tab and answers Enter and Space. A row without one is
@@ -1733,46 +2058,18 @@ export declare interface DataRowProps {
      * ```tsx
      * <DataRow
      *     name={node.id}
-     *     selected={selection.has(node.id)}
-     *     onClick={(event, meta) => {
-     *         if (event.shiftKey && meta.source === "pointer") {
-     *             extendSelectionTo(node.id);
-     *         } else if (event.metaKey || event.ctrlKey) {
-     *             toggleSelection(node.id);
-     *         } else {
-     *             replaceSelectionWith(node.id);
-     *         }
-     *     }}
+     *     value={node.degree}
+     *     selected={node.id === current}
+     *     onClick={() => { setCurrent(node.id); }}
      * />
      * ```
      */
     onClick?: ActivationHandlerWithMeta;
-    /**
-     * Called when the row is double-clicked, anywhere along it.
-     *
-     * Open the thing the row names, or start renaming it. The browser delivers
-     * two `onClick` activations before this, which is how a double click is
-     * defined rather than something this component adds; `event.detail` on
-     * those clicks counts them, so a consumer that must act on a single click
-     * alone can wait for the count to settle.
-     */
-    onDoubleClick?: (event: default_2.MouseEvent) => void;
-    /**
-     * Called when a context menu is asked for on the row, anywhere along it.
-     *
-     * Call `preventDefault` on the event to replace the browser's own menu with
-     * yours. The keyboard's context-menu key and Shift+F10 raise it as well as a
-     * right click, so a menu opened from here is reachable without a pointer --
-     * as long as the row can hold focus, which it can as soon as it has an
-     * `onClick`, or when you give it a `tabIndex` of its own.
-     */
-    onContextMenu?: (event: default_2.MouseEvent) => void;
     /**
      * Called when the row's body takes focus.
      *
-     * The element is typed as a plain `HTMLElement` because the body is a
-     * `<button>` on a row that can be activated and a `<div>` on one that
-     * cannot.
+     * The body takes focus only when the row has an `onClick`, which makes it a
+     * `<button>`.
      */
     onFocus?: default_2.FocusEventHandler<HTMLElement>;
     /** Called when the row's body loses focus. */
@@ -1781,17 +2078,6 @@ export declare interface DataRowProps {
     trailing?: default_2.ReactNode;
 }
 
-/**
- * How a row reports being selected to a screen reader.
- *
- * - `"button"` marks the row `aria-current`, which is what a list with one
- *   selected item means: this row is the one on screen.
- * - `"option"` gives the row the `option` role and `aria-selected`. Use it only
- *   when the rows sit inside an element you have given `role="listbox"`, adding
- *   `aria-multiselectable` there when more than one row can be selected at once.
- */
-export declare type DataRowRole = "button" | "option";
-
 /**
  * Which way a sorted column is ordered, in the spelling ARIA uses.
  *
@@ -2075,9 +2361,9 @@ export declare interface DataTableProps<TRow extends object> {
      * the thing virtualization exists to avoid.
      */
     height?: number | string;
-    /** How tall each row is drawn, in pixels. Defaults to the 28px row this library gives a row of data. */
+    /** How tall each row is drawn, in pixels. Defaults to 32, Figma's list row pitch (`PANEL_GRID.ROW_PITCH`). */
     rowHeight?: number;
-    /** How tall the header row is drawn, in pixels. Defaults to the 24px control height of a property panel. */
+    /** How tall the header row is drawn, in pixels. Defaults to 32, like a row. */
     headerHeight?: number;
     /**
      * How many rows to draw beyond the ones on screen, above and below.
@@ -2292,6 +2578,17 @@ export declare interface DisclosureProps {
     onOpenChange?: OpenChangeHandler;
 }
 
+/**
+ * Inject the stylesheet into `document.head` (once) and set `data-cm-contrast` on `<html>` to
+ * `"high"` or `"figma"`. Does nothing without a DOM.
+ *
+ * ponytail: one contrast attribute per document, so the last theme rendered wins; two providers
+ * with different `highContrast` on one page are not supported. Scope the attribute to the
+ * provider's root if that is ever needed.
+ * @param options - the theme options
+ */
+export declare function ensureCompactStyles(options?: CompactThemeOptions): void;
+
 /**
  * Every glyph name in the closed field register, in register order.
  */
@@ -2303,21 +2600,21 @@ export declare const FIELD_GLYPH_NAMES: readonly FieldGlyphName[];
 export declare const FIELD_LETTERS: readonly FieldLetter[];
 
 /**
- * A glyph from the closed register, drawn in a field's 16px slot.
+ * A glyph from the closed register, drawn in a field's 24px slot.
  *
  * The glyph is the field's label: it replaces the word that a label-above-field
  * stack used to spend a line on. It is decorative to assistive technology --
  * the field itself carries the word as its title and accessible name.
  * @param props - Component props
  * @param props.name - Which glyph of the closed field register to draw
- * @param props.filled - Draw the bound form: the glyph's closed shapes fill with the current colour, which is how a field says its value comes from a data attribute rather than from a fixed literal
- * @param props.size - Drawn size in pixels, defaulting to the 14px glyph size
+ * @param props.filled - Draw the bound form: the glyph's closed shapes fill with the current color, which is how a field says its value comes from a data attribute rather than from a fixed literal
+ * @param props.size - Drawn size in pixels, defaulting to the 12px nominal glyph size
  * @returns The field glyph SVG
  */
 export declare function FieldGlyph({ name, filled, size }: FieldGlyphProps): default_2.JSX.Element;
 
 /**
- * The closed register of drawings allowed in a field's 16px slot.
+ * The closed register of drawings allowed in a field's 24px slot.
  *
  * Nothing outside this list may be drawn there. The premise of the field is
  * that a small drawing can replace a word, which only works if the drawings are
@@ -2334,7 +2631,7 @@ export declare interface FieldGlyphProps {
     name: FieldGlyphName;
     /** a bound glyph draws filled; a fixed literal draws hollow */
     filled?: boolean;
-    /** Drawn size in pixels. Defaults to the 14px glyph size of the 16px slot. */
+    /** Drawn size in pixels. Defaults to the 12px nominal glyph size of the 24px slot. */
     size?: number;
 }
 
@@ -2347,40 +2644,34 @@ export declare type FieldLetter = "N" | "E" | "W" | "D" | "K";
 /**
  * A panel row holding one or two compact fields and a fixed trailing slot.
  *
- * This is the row a dense property panel is mostly made of. Rather than
- * stacking a caption above an input, each field carries a glyph inside its own
- * box, which is what lets the row stand 32px tall instead of 37 and a panel come
- * out around half its usual height.
+ * This is the row a dense property panel is mostly made of: 32px tall, a 24px
+ * control centered in it. Each field carries a glyph inside its own box instead
+ * of a caption above it.
  *
  * The row owns the widths and the gaps; each field owns everything inside its
- * own box. Three arrangements, all of them filling the same 256px band of a
- * 280px panel:
+ * own box. Three arrangements, all of them filling the same 216px band of a
+ * 240px panel:
  *
- * - two fields side by side -- `108 + 8 + 108 + 8 + 24`
- * - one field beside a trailing control -- `224 + 8 + 24`
- * - one field alone -- `232 + 24`; with no control to be held apart from, the
+ * - two fields side by side -- `88 + 8 + 88 + 8 + 24`
+ * - one field beside a trailing control -- `184 + 8 + 24`
+ * - one field alone -- `192 + 24`; with no control to be held apart from, the
  *   field takes the 8px gap for itself
  *
- * The trailing slot is drawn whether or not it holds anything, because the row
- * only keeps its shape if the slot keeps its width, and so every row in a panel
- * ends at the same place. Put the row's one rare control there -- an advanced
- * settings button that opens a pop-out, or a small reset. A select's chevron is
- * not one of those: it belongs inside the field's own box.
+ * The trailing slot is drawn whether or not it holds anything, so every row in
+ * a panel ends at the same place. Put the row's one rare control there -- an
+ * advanced settings button that opens a pop-out, or a small reset.
  *
  * **Right-to-left.** All of the row's spacing is written in CSS logical
  * properties, so the row lays itself out correctly under `dir="rtl"` with
- * nothing to configure: the gutter stays between the two fields, the trailing
- * slot stays at the end of the row rather than jumping to its start, and the
- * three arrangements above still spend exactly 256px. The row writes the same
- * style in both directions; only the browser resolves it differently.
+ * nothing to configure.
  *
  * **When control labels are switched on.** `PanelLabelsProvider` turns on a
- * preference that writes each control's word beside it. A row holding two fields
- * then splits into two rows of one field each, each with its word in a 76px
- * column in the secondary text colour -- never into a two-line stack. The word
- * is printed once, by the column: the fields are handed a labels-off context so
- * that they do not repeat it inside their boxes, and the row's one trailing
- * control stays on the first of the two rows.
+ * preference that writes each control's word. By default the row becomes
+ * Figma's labeled row: a 9px caption in the secondary ink above each column
+ * (4 above, 14 caption, 4 gap, 24 control, 4 below = 50px). With
+ * `labelPosition="inline"` a pair instead splits into two rows, each with its
+ * word in a 72px column beside the field. Either way the word is printed once:
+ * the fields are handed a labels-off context so that they do not repeat it.
  * @example
  * ```tsx
  * <FieldRow
@@ -2424,6 +2715,32 @@ export declare interface FieldRowProps extends Omit<default_2.ComponentPropsWith
      * on the page, such as in the section header above the row.
      */
     groupLabel?: string;
+    /**
+     * Where each field's label word goes while the "show labels on controls"
+     * preference is on (see `PanelLabelsProvider`).
+     *
+     * - `"above"` (default): Figma's labeled two-column row. A 9px caption sits
+     *   above each column, and the row grows from 32px to 50px.
+     * - `"inline"`: the earlier layout. A pair splits into two rows of one field
+     *   each, with the word in a 72px column beside the field.
+     *
+     * With the preference off the row draws no words and this has no effect.
+     * @default "above"
+     */
+    labelPosition?: "above" | "inline";
+}
+
+/** One visible row. */
+export declare interface FlatTreeRow {
+    node: TreeNodeData;
+    /** 1 for a top-level row. */
+    level: number;
+    parentId: string | null;
+    /** 1-based position among its siblings. */
+    posInSet: number;
+    setSize: number;
+    hasChildren: boolean;
+    expanded: boolean;
 }
 
 /**
@@ -2437,7 +2754,7 @@ export declare type GestureChangeHandler<T = number> = (value: T, event: default
 
 /**
  * Called once when a continuous gesture finishes, including when it is
- * cancelled.
+ * canceled.
  */
 export declare type GestureEndHandler = (event: default_2.PointerEvent) => void;
 
@@ -2462,7 +2779,7 @@ export declare interface GestureHandlers<T = number> {
     onGestureStart?: GestureStartHandler;
     /** Called repeatedly while the gesture is in progress. */
     onGestureChange?: GestureChangeHandler<T>;
-    /** Called when the gesture finishes or is cancelled. Commit the undo transaction here. */
+    /** Called when the gesture finishes or is canceled. Commit the undo transaction here. */
     onGestureEnd?: GestureEndHandler;
 }
 
@@ -2475,9 +2792,9 @@ export declare type GestureStartHandler = (event: default_2.PointerEvent) => voi
 /**
  * Works out whether an activation came from a pointer or from the keyboard.
  *
- * A keyboard activation is recognised three ways: the event is a keyboard event;
+ * A keyboard activation is recognized three ways: the event is a keyboard event;
  * or it is a pointer event with no pointer type; or it is a mouse event with a
- * click count of zero, which is how a browser reports the click it synthesises
+ * click count of zero, which is how a browser reports the click it synthesizes
  * from Enter or Space on a button.
  * @param event - The event that activated the control
  * @returns The activation source, ready to hand to an {@link ActivationHandlerWithMeta}
@@ -2485,39 +2802,38 @@ export declare type GestureStartHandler = (event: default_2.PointerEvent) => voi
 export declare function getActivationMeta(event: ActivationEvent): ActivationMeta;
 
 /**
- * An editor for a multi-stop linear gradient.
+ * An editor for a multi-stop linear gradient, laid out as Figma's: square stop handles over a
+ * gradient bar, a color picker (ColorPickerPanel, without opacity) for the selected stop, a
+ * "Stops" list of rows (position, chit and hex, remove), and an optional direction row (the
+ * angle, flip and rotate).
  *
- * Each stop is one row: a colour control, a slider for where the stop sits
- * along the gradient, and a button that removes it. A button above the list
- * adds a stop halfway between the last one and the end, and an optional slider
- * below sets the angle the gradient runs at.
+ * One stop is selected at a time: its handle, its row's chit, or focus entering its row selects
+ * it, and the picker edits its color. The row's hex box edits it too. Nothing opens a pop-out.
  *
- * The list is bounded at both ends. It will not go below `minStops`, because a
- * gradient of one colour is a flat fill rather than a gradient, and it will not
- * go above `maxStops`, because the position sliders get too short to aim at.
- * At either bound the button that would cross it is disabled rather than
- * silently doing nothing.
+ * Drag a handle to move its stop, click the bar to add a stop there (its color mixed from its
+ * neighbors), and use the arrow keys on a focused handle to nudge it (Shift for 10%), Home /
+ * End to send it to an end, and Delete or Backspace to remove it. The list is bounded by
+ * `minStops` and `maxStops`; at either bound the button that would cross it is disabled.
  *
- * Dragging reports three things: `onChangeStart` once when the drag begins,
- * `onChange` on every step, and `onChangeEnd` once when it settles. Opening an
- * undo transaction on the first and closing it on the last turns a whole drag
- * into one undo entry rather than one per pixel moved.
+ * A drag -- of a handle, or in the picker -- reports `onChangeStart` once, `onChange` on every
+ * step and `onChangeEnd` once, so a consumer can wrap the whole drag in one undo entry. A
+ * keyboard step or a typed commit is one complete gesture of its own.
  *
- * Every stop carries an `id`, which is what keeps the right control attached to
- * the right stop as stops are added, removed and reordered. Build stops with
- * `createColorStop` rather than writing the object by hand, so the id is unique.
+ * Every stop carries an `id`, which keeps the right controls attached to the right stop as stops
+ * are added, removed and reordered. Build stops with `createColorStop`.
  * @param props - Component props
- * @param props.stops - The gradient's colour stops, when you drive the editor from your own state
+ * @param props.stops - The gradient's color stops, when you drive the editor from your own state
  * @param props.defaultStops - The stops the editor starts with when it keeps its own state
  * @param props.direction - The angle the gradient runs at, when you drive the editor from your own state
  * @param props.defaultDirection - The angle the editor starts at when it keeps its own state
- * @param props.showDirection - Whether to offer the direction slider
+ * @param props.showDirection - Whether to offer the direction row
  * @param props.onChange - Called whenever the gradient changes, with both halves of it
  * @param props.onChangeStart - Called once when a change to a position or to the direction begins
  * @param props.onChangeEnd - Called once when such a change settles, with the gradient it settled on
  * @param props.minStops - The fewest stops the reader can reduce the gradient to
  * @param props.maxStops - The most stops the reader can build up to
- * @returns The list of stops, and the direction slider when it is asked for
+ * @param props.labels - English names for the flip and rotate buttons
+ * @returns The gradient editor
  * @example
  * ```tsx
  * const [stops, setStops] = useState([createColorStop(0, "#6366F1"), createColorStop(1, "#06B6D4")]);
@@ -2530,19 +2846,25 @@ export declare function getActivationMeta(event: ActivationEvent): ActivationMet
  *         setStops(nextStops);
  *         setAngle(nextAngle);
  *     }}
- *     onChangeStart={() => history.begin()}
- *     onChangeEnd={() => history.commit()}
  * />
  * ```
  */
-export declare function GradientEditor({ stops, defaultStops, direction, defaultDirection, showDirection, onChange, onChangeStart, onChangeEnd, minStops, maxStops, }: GradientEditorProps): default_2.JSX.Element;
+export declare function GradientEditor({ stops, defaultStops, direction, defaultDirection, showDirection, onChange, onChangeStart, onChangeEnd, minStops, maxStops, labels: labelOverrides, }: GradientEditorProps): default_2.JSX.Element;
+
+/** The English names of the buttons Figma adds; every other string comes from the labels. */
+export declare interface GradientEditorLabels {
+    /** The button that reverses the stops. */
+    flip: string;
+    /** The button that turns the gradient 90 degrees. */
+    rotate: string;
+}
 
 /**
  * Props for the GradientEditor component.
  */
 export declare interface GradientEditorProps {
     /**
-     * The gradient's colour stops, when you drive the editor from your own
+     * The gradient's color stops, when you drive the editor from your own
      * state. Order them by `offset`; the editor keeps them in order as it
      * works.
      */
@@ -2563,19 +2885,19 @@ export declare interface GradientEditorProps {
      */
     defaultDirection?: number;
     /**
-     * Whether to offer the direction slider.
+     * Whether to offer the direction row: the angle field, flip and rotate.
      * @default true
      */
     showDirection?: boolean;
     /**
-     * Called whenever the gradient changes: a colour, a position, a stop added
+     * Called whenever the gradient changes: a color, a position, a stop added
      * or a stop removed.
      *
      * Both halves of the gradient are passed on every change, so a consumer
      * never has to remember which one moved. The event that caused the change
-     * is third and optional -- a drag and the colour picker report none.
+     * is third and optional -- a drag and the color picker report none.
      *
-     * While a slider is being dragged this is called on every step. Use
+     * While a stop handle is being dragged this is called on every step. Use
      * `onChangeEnd` if you want the settled value only.
      */
     onChange?: (stops: ColorStop[], direction: number, event?: default_2.SyntheticEvent) => void;
@@ -2612,6 +2934,33 @@ export declare interface GradientEditorProps {
      * @default 5
      */
     maxStops?: number;
+    /** Replace the English names of the flip and rotate buttons. */
+    labels?: Partial<GradientEditorLabels>;
+}
+
+/**
+ * Figma's floating help button: a 32 x 32 circle on `--cm-bg` with the 200 elevation and no hover
+ * change. Its tooltip shows and hides at once outside a Tooltip.Group; its focus ring (1px at -2px) fades in over 200ms.
+ * It opens a dark menu of the caller's items, 4px above and end-aligned.
+ * @param props - Component props
+ * @param props.label - Accessible name and tooltip
+ * @param props.children - The menu's items
+ * @param props.menuProps - Extra props for the Mantine `Menu`
+ * @param props.className - Extra class on the root
+ * @returns The help button
+ */
+export declare function HelpButton({ label, children, menuProps, className, ...others }: HelpButtonProps): default_2.JSX.Element;
+
+/**
+ * Props for the HelpButton component.
+ */
+export declare interface HelpButtonProps extends Omit<UnstyledButtonProps, "children">, Omit<ElementProps<"button">, "children"> {
+    /** Accessible name and tooltip. Defaults to the "Help" label. */
+    label?: string;
+    /** The menu's items (`Menu.Item`, `Menu.Divider`, ...). Without any, the button opens nothing. */
+    children?: default_2.ReactNode;
+    /** Extra props for the Mantine `Menu` (its `opened`, `onChange`, ...). */
+    menuProps?: Omit<MenuProps, "children">;
 }
 
 /**
@@ -2628,12 +2977,12 @@ export declare interface HistogramBin {
     label: string;
     /** How many things fell in this bin. The bar's height is this over the tallest bin's. */
     count: number;
-    /** Draws this bar in the accent colour, for the bin the reader has selected or the one being explained. */
+    /** Draws this bar in the accent color, for the bin the reader has selected or the one being explained. */
     highlighted?: boolean;
 }
 
 /**
- * A distribution drawn instead of the four numbers that summarise it.
+ * A distribution drawn instead of the four numbers that summarize it.
  *
  * `min 2, median 3, max 4, standard deviation 0.62` is four numbers standing in
  * for a shape. A histogram draws the shape in the same space, and answers what
@@ -2729,252 +3078,90 @@ export declare interface HistogramRowProps {
 }
 
 /**
- * One option of an icon group: a value, the word it is called, and the drawing
- * that stands in for the word.
- */
-export declare interface IconGroupOption {
-    /** The value this option selects. Unique within the group. */
-    value: string;
-    /**
-     * The word this option would have been called.
-     *
-     * It is what a screen reader announces for the option and what the tooltip
-     * says, whether or not it is drawn, so write the word rather than a
-     * description of the drawing.
-     */
-    label: string;
-    /**
-     * The drawing that lets the word be dropped.
-     *
-     * A 14px inline SVG that takes its colour from its parent, so the drawing
-     * changes colour with the selection. Mark it `aria-hidden` -- the word
-     * beside it is what names the option.
-     */
-    icon: default_2.ReactNode;
-    /**
-     * Whether this option cannot be chosen.
-     *
-     * A disabled option is drawn dimmer, is skipped by the arrow keys and is
-     * announced as unavailable.
-     * @default false
-     */
-    disabled?: boolean;
-}
-
-/**
- * A row of two to six mutually exclusive options drawn as pictures, in one
- * segmented track.
- *
- * Reach for it in place of a select whose whole option list is short and can be
- * drawn: node shapes, edge routing, layouts, scale curves. It costs the same
- * single row as the select and spends it better, because every alternative is
- * visible at rest instead of hidden behind a chevron.
- *
- * Stay inside the range. One option is a statement rather than a choice and
- * belongs in a field; more than six stop reading as a set of drawings. So does
- * any set whose options differ conceptually rather than visually, however few
- * of them there are -- those belong in a select, and a legible checkbox is
- * never worth converting into a pair of pictures. Outside two to six the row
- * still renders, and says so once in the console during development.
- *
- * Every option carries the word it would have been called. The word is not
- * drawn unless you ask for it, but it is always the option's accessible name
- * and its tooltip, so the row is operable by someone who cannot see the
- * drawings. Two things ask for it to be drawn as well: `hybrid`, which names
- * the selected option only, and `PanelLabelsProvider`, the application-wide
- * preference that puts a word beside every control in the panel.
- *
- * The group is a set of radio buttons, so Tab reaches it in one stop and lands
- * on the current choice, the arrow keys move the selection and the focus
- * together and follow the direction the text runs, Home and End jump to the
- * ends, and Space selects.
+ * A circled "i" that reveals an explanation on hover, on focus or on tap.
+ *
+ * Use it where an explanation would otherwise become a sentence of its own on a
+ * dense panel: put it immediately after the name of the thing it explains. Give
+ * `label` that name -- the button is announced as "About " and the name, and
+ * the explanation becomes the button's accessible description, so a screen
+ * reader reads the two together.
+ *
+ * The bubble closes when the pointer leaves, when focus moves away, on Escape,
+ * on a second tap, and when something else on the page is clicked. It shares
+ * the page's floating layer with every other pop-out (Escape closes the
+ * innermost open thing), but as a hover bubble it neither closes an open panel
+ * nor is closed by one opening; when there is no `PopoutManager` above it, it
+ * supplies its own and works standalone.
+ *
+ * Leave `opened` out and the bubble keeps its own state. Supply it, with
+ * `onOpenChange`, to drive it from yours.
  * @param props - Component props
- * @param props.options - Two to six mutually exclusive options whose difference can be drawn
- * @param props.value - The selected value, to drive the row from your own state
- * @param props.defaultValue - The value selected before anything is chosen, when the row keeps its own state
- * @param props.onChange - Called with the newly selected value and the event that selected it
- * @param props.label - What the whole group is for, announced as its name
- * @param props.labelledBy - The `id` of the element that already names the group
- * @param props.name - The name shared by the group's radio inputs
- * @param props.disabled - Whether the whole group cannot be used
- * @param props.disabledReason - One sentence saying why the group is off, drawn only while it is off
- * @param props.hybrid - Draw the word beside the drawing on the selected option only
- * @param props.width - How wide the track is drawn, or `"fill"` to take the rest of the row
- * @param props.trailing - The row's 24px trailing slot
- * @param props.onFocus - Called when the focus enters the group
- * @param props.onBlur - Called when the focus leaves the group
- * @returns The icon group row
+ * @param props.children - The explanation, which becomes the button's accessible description
+ * @param props.label - Names what is being explained, for the accessible name of the button
+ * @param props.opened - Whether the bubble is open, when driven from your own state
+ * @param props.defaultOpened - Whether the bubble starts open, when it keeps its own state
+ * @param props.onOpenChange - Called when the bubble opens or closes, with the new state first
+ * @returns The info circle and its bubble
  * @example
  * ```tsx
- * <IconGroupRow
- *     label="Node shape"
- *     options={[
- *         {value: "box", label: "Box", icon: <BoxGlyph />},
- *         {value: "sphere", label: "Sphere", icon: <SphereGlyph />},
- *         {value: "disc", label: "Disc", icon: <DiscGlyph />},
- *     ]}
- *     value={shape}
- *     onChange={(next) => { setShape(next); }}
- * />
+ * <Group gap={4}>
+ *     <Text>Resolution</Text>
+ *     <InfoCircle label="Resolution">
+ *         Higher resolution finds more, smaller communities.
+ *     </InfoCircle>
+ * </Group>
  * ```
  */
-export declare function IconGroupRow(props: IconGroupRowProps): default_2.JSX.Element;
+export declare function InfoCircle({ children, label, opened, defaultOpened, onOpenChange, }: InfoCircleProps): default_2.JSX.Element;
 
 /**
- * Props for the IconGroupRow component.
+ * Props for the InfoCircle component.
  */
-export declare interface IconGroupRowProps {
-    /** Two to six mutually exclusive options whose difference can be drawn. */
-    options: IconGroupOption[];
-    /** The selected value. Supply this to drive the row from your own state. */
-    value?: string;
-    /**
-     * The value selected before anything is chosen, when the row keeps its own
-     * state. Defaults to the first option.
-     */
-    defaultValue?: string;
-    /**
-     * Called with the newly selected value, and with the event that selected it
-     * when a person did the selecting.
-     *
-     * The event is second and optional so that a change made in code is
-     * expressible as `onChange(next)`.
-     */
-    onChange?: ChangeHandler<string>;
-    /**
-     * What the whole group is for, such as `"Node shape"`.
-     *
-     * A group of radio buttons needs a name of its own: without one a screen
-     * reader announces the options but never says what is being chosen. The
-     * word is not drawn on the row -- give it here when nothing else on the
-     * screen names the group, or use `labelledBy` when something does.
-     */
-    label?: string;
-    /**
-     * The `id` of the element that names the group, such as the heading of the
-     * section it sits in.
-     *
-     * Prefer this to `label` whenever the name is already on the screen, so
-     * that the drawn name and the announced one cannot drift apart. When both
-     * are given, this one wins.
-     */
-    labelledBy?: string;
-    /**
-     * The name shared by the group's radio inputs, as an HTML form would use.
-     *
-     * One is generated when you leave it out. Set it to submit the choice with
-     * a form, or to keep it stable between renders in a test.
-     */
-    name?: string;
-    /**
-     * Whether the whole group cannot be used.
-     *
-     * Every option is drawn dimmer, none can be chosen, and the group is
-     * skipped by the Tab key. To disable one option rather than all of them,
-     * set `disabled` on that option.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * One sentence saying why the whole group is off, shown only while
-     * `disabled` is true.
-     *
-     * It is appended to the group's own name after a full stop and drawn as the
-     * row's tooltip -- "Node shape. Load data first" -- and it joins the
-     * group's accessible description, so the reason reaches a pointer user and
-     * a screen reader user alike. With no `label` to append to, the sentence
-     * stands on its own.
-     *
-     * It says nothing about one option: a single unavailable choice is
-     * `disabled` on that option, and its own word still names it. THE DEFECT
-     * THIS REPAIRS: a whole group drawn dimmed with no explanation reads as a
-     * broken control, which is what spec:6641 forbids -- and until now this row
-     * had nowhere to put the one reason.
-     */
-    disabledReason?: string;
-    /**
-     * Draw the word beside the drawing on the selected option only.
-     *
-     * Some option sets have names the panel cannot afford to hide -- layout
-     * names, scale names, method names -- and drawing every word costs a row
-     * the panel does not have. This names the current choice, leaves the
-     * alternatives to be learned by trying them, and still fits one row. It
-     * wants the 224px track: on the 108px one the words squeeze the drawings
-     * down to nothing.
-     * @default false
-     */
-    hybrid?: boolean;
-    /**
-     * How wide the track is drawn, in pixels, or `"fill"` to take whatever the
-     * row has left over.
-     *
-     * Defaults to the width the option count asks for: 108px for up to three
-     * options and 224px for four to six. Use `"fill"` inside a container that
-     * is not the 280px panel this library measures for.
-     */
-    width?: number | "fill";
-    /**
-     * The row's 24px trailing slot: an advanced settings button, a control that
-     * resets the row, or nothing.
-     */
-    trailing?: default_2.ReactNode;
-    /** Called when the focus enters the group, with the option that took it. */
-    onFocus?: default_2.FocusEventHandler<HTMLDivElement>;
-    /** Called when the focus leaves the group. */
-    onBlur?: default_2.FocusEventHandler<HTMLDivElement>;
+export declare interface InfoCircleProps extends DisclosureProps {
+    /** The explanation. Becomes the accessible description of the info button. */
+    children: default_2.ReactNode;
+    /** Names what is being explained, for the accessible name of the button. */
+    label: string;
 }
 
 /**
- * A circled "i" that reveals an explanation on hover, on focus or on tap.
- *
- * Use it where an explanation would otherwise become a sentence of its own on a
- * dense panel: put it immediately after the name of the thing it explains. Give
- * `label` that name -- the button is announced as "About " and the name, and
- * the explanation becomes the button's accessible description, so a screen
- * reader reads the two together.
+ * A name edited in place: the 24px outlined field that replaces a layer, page or collection
+ * name while it is renamed (design/figma-spec.md 10.3).
  *
- * The bubble closes when the pointer leaves, when focus moves away, on Escape,
- * on a second tap, and when something else on the page is clicked. It shares
- * the page's floating layer with every other pop-out, so opening one closes
- * whatever else was open at the same level; when there is no `PopoutManager`
- * above it, it supplies its own and works standalone.
- *
- * Leave `opened` out and the bubble keeps its own state. Supply it, with
- * `onOpenChange`, to drive it from yours.
+ * It opens focused with the whole name selected. Enter commits and Escape cancels, and both
+ * hand focus back to whatever held it before the field opened -- the row it came from. Leaving
+ * the field any other way (a click elsewhere, Tab) commits and lets focus go where it was sent.
  * @param props - Component props
- * @param props.children - The explanation, which becomes the button's accessible description
- * @param props.label - Names what is being explained, for the accessible name of the button
- * @param props.opened - Whether the bubble is open, when driven from your own state
- * @param props.defaultOpened - Whether the bubble starts open, when it keeps its own state
- * @param props.onOpenChange - Called when the bubble opens or closes, with the new state first
- * @returns The info circle and its bubble
- * @example
- * ```tsx
- * <Group gap={4}>
- *     <Text>Resolution</Text>
- *     <InfoCircle label="Resolution">
- *         Higher resolution finds more, smaller communities.
- *     </InfoCircle>
- * </Group>
- * ```
+ * @param props.value - The current name
+ * @param props.onCommit - Called once with the new name
+ * @param props.onCancel - Called when Escape abandons the edit
+ * @param props.label - The field's accessible name
+ * @param props.width - The field's width
+ * @returns The rename field
  */
-export declare function InfoCircle({ children, label, opened, defaultOpened, onOpenChange, }: InfoCircleProps): default_2.JSX.Element;
+export declare function InlineRename({ value, onCommit, onCancel, label, width, }: InlineRenameProps): default_2.JSX.Element;
 
 /**
- * Props for the InfoCircle component.
+ * Props for the InlineRename component.
  */
-export declare interface InfoCircleProps extends DisclosureProps {
-    /** The explanation. Becomes the accessible description of the info button. */
-    children: default_2.ReactNode;
-    /** Names what is being explained, for the accessible name of the button. */
-    label: string;
+export declare interface InlineRenameProps {
+    /** The current name. The field opens holding it, wholly selected. */
+    value: string;
+    /** Called once with the new name, on Enter or when the field loses focus. */
+    onCommit: (name: string) => void;
+    /** Called when Escape abandons the edit. */
+    onCancel?: () => void;
+    /** The field's accessible name. Defaults to "Name". */
+    label?: string;
+    /** The field's width: a number of pixels or any CSS length. Defaults to filling its slot. */
+    width?: number | string;
 }
 
 /**
  * Whether a value names a glyph in the closed field register.
  *
  * A field's `glyph` prop takes a register name, one of the five capital
- * letters, or an arbitrary node such as a colour swatch; this is how a row type
+ * letters, or an arbitrary node such as a color swatch; this is how a row type
  * tells the first case from the third.
  * @param value - The candidate glyph
  * @returns True when the value is a name in the closed field register
@@ -2984,13 +3171,21 @@ export declare function isFieldGlyphName(value: unknown): value is FieldGlyphNam
 /**
  * Whether a value is one of the five capital letters allowed in a field slot.
  *
- * A letter draws as an 11px capital in the secondary text colour instead of an
+ * A letter draws as an 11px capital in the secondary text color instead of an
  * SVG, for a concept no drawing stands for.
  * @param value - The candidate glyph
  * @returns True when the value is one of `N`, `E`, `W`, `D` or `K`
  */
 export declare function isFieldLetter(value: unknown): value is FieldLetter;
 
+/**
+ * Whether a color is light enough to need the swatch ring Figma draws on
+ * near-white colors (every channel at or above 0xE0).
+ * @param color - a hex color
+ * @returns true for near-white colors
+ */
+export declare function isLightColor(color: string): boolean;
+
 /**
  * Whether text runs right to left.
  * @param direction - The text direction in force
@@ -3076,6 +3271,36 @@ export declare const MAX_ALPHA_HEX = 255;
 /** Maximum opacity percentage value */
 export declare const MAX_OPACITY_PERCENT = 100;
 
+/**
+ * A menu row with Figma's 16 x 16 check column (design/figma-spec.md 8.1): the
+ * white 9 x 8.5 check shows when `checked` and is invisible (but keeps its
+ * space) when not, so the labels of a menu's rows stay aligned 32px from its
+ * edge. Use it inside a Mantine `Menu.Dropdown` beside ordinary items.
+ * @param props - Component props
+ * @param props.checked - Whether the row is checked
+ * @param props.radio - Whether the row is one of a set of radio rows
+ * @returns The menu row
+ * @example
+ * ```tsx
+ * <Menu.Dropdown>
+ *     <MenuCheckItem checked={rulers} onClick={toggleRulers}>Rulers</MenuCheckItem>
+ *     <MenuCheckItem checked={grid} onClick={toggleGrid}>Pixel grid</MenuCheckItem>
+ * </Menu.Dropdown>
+ * ```
+ */
+export declare function MenuCheckItem({ checked, radio, ...props }: MenuCheckItemProps): JSX.Element;
+
+/**
+ * Props for MenuCheckItem: every `Menu.Item` prop except the leading section,
+ * which is the check column, plus the checked state.
+ */
+export declare interface MenuCheckItemProps extends Omit<MenuItemProps, "leftSection">, Omit<ComponentPropsWithoutRef<"button">, keyof MenuItemProps | "role"> {
+    /** Whether the row is checked: the white check shows in the 16px column. */
+    checked: boolean;
+    /** Render a `menuitemradio` (one of a set) instead of a `menuitemcheckbox`. */
+    radio?: boolean;
+}
+
 /**
  * One reading, with a bar for where it falls in its distribution and a chip for
  * its rank.
@@ -3117,7 +3342,7 @@ export declare function MetricRow({ name, percentile, value, rank, busy, live, o
  * Props for the MetricRow component.
  */
 export declare interface MetricRowProps {
-    /** The metric's own name. Shown at 12px, and shortened with an ellipsis when the row is too narrow for it. */
+    /** The metric's own name. Shown at 11px, and shortened with an ellipsis when the row is too narrow for it. */
     name: string;
     /** Where the value falls in its distribution, from 0 to 100. Values outside that range are clamped rather than drawn off the end of the bar. */
     percentile: number;
@@ -3164,7 +3389,7 @@ export declare interface MetricRowProps {
      * The event comes first, so you can read modifier keys for a multiple
      * selection and call `preventDefault`. The second argument states whether
      * the activation came from a pointer or from the keyboard, which is the
-     * distinction selection behaviour usually turns on.
+     * distinction selection behavior usually turns on.
      *
      * Supplying it makes the row a real button: focusable, with a pointer
      * cursor, and answering Enter and Space.
@@ -3191,6 +3416,102 @@ export declare interface MetricRowProps {
     onBlur?: default_2.FocusEventHandler<HTMLDivElement>;
 }
 
+/**
+ * The color a fraction of the way between two hex colors, channel by channel.
+ * Used when a click on a gradient bar adds a stop between two others.
+ * @param from - the color at 0
+ * @param to - the color at 1
+ * @param t - how far along, 0 to 1
+ * @returns `#RRGGBB`, upper case
+ */
+export declare function mixHex(from: string, to: string, t: number): string;
+
+/**
+ * The button bar at the bottom of a Modal (design/figma-spec.md 8.5): 40 tall
+ * across the modal's full width, a 1px divider above it, padding 0 8 0 16, its
+ * buttons end-aligned 8px apart. Put it last inside the Modal's children, with
+ * the secondary action (Cancel) first and the primary or danger action last.
+ * @param props - Box props and div attributes
+ * @param props.className - Extra classes, merged with the footer's own
+ * @returns The footer
+ * @example
+ * ```tsx
+ * <Modal opened={opened} onClose={close} title="Save to version history">
+ *     <TextInput data-autofocus aria-label="Title" />
+ *     <ModalFooter>
+ *         <Button variant="default" onClick={close}>Cancel</Button>
+ *         <Button disabled={!valid}>Save</Button>
+ *     </ModalFooter>
+ * </Modal>
+ * ```
+ */
+export declare function ModalFooter({ className, ...props }: ModalFooterProps): JSX.Element;
+
+/**
+ * Props for ModalFooter: a Box and any div attribute.
+ */
+export declare interface ModalFooterProps extends BoxProps, Omit<ComponentPropsWithoutRef<"div">, keyof BoxProps> {
+}
+
+/**
+ * Apply a move that `Tree`'s `onMove` reported: take the item out of the list and insert it at
+ * `index` among `parentId`'s children (the top level when `parentId` is null). Works on your own
+ * item type, so every other field comes through untouched. Returns a new list; an unknown id
+ * returns a copy of the list unchanged.
+ * @param items - the tree, top level first
+ * @param move - the move `onMove` reported
+ * @returns the moved tree
+ * @example
+ * ```tsx
+ * <Tree items={items} label="Layers" onMove={(move) => setItems(moveTreeItem(items, move))} />
+ * ```
+ */
+export declare function moveTreeItem<T extends TreeLike<T>>(items: readonly T[], move: TreeMove): T[];
+
+/** The navigation rail, with `NavRail.Separator`. */
+export declare const NavRail: typeof NavRailRoot & {
+    Separator: typeof NavRailSeparator;
+};
+
+/**
+ * Props for the NavRail component.
+ */
+export declare interface NavRailProps extends BoxProps, ElementProps<"div"> {
+    /** Accessible name of the rail. Defaults to the "Navigation" label. */
+    "aria-label"?: string;
+    /** Buttons pinned to the rail's foot, 8px apart (a 32 icon button with a notification dot). */
+    footer?: default_2.ReactNode;
+    /** Rail buttons and separators, top to bottom. */
+    children?: default_2.ReactNode;
+}
+
+/**
+ * The vertical navigation rail at the window's start edge (Figma's navigation bar): 56 wide plus
+ * a 1px end border, padding 8 top and 16 bottom, full height. One Tab stop; ArrowUp / ArrowDown /
+ * Home / End move between its buttons, Enter or Space activates.
+ * @param props - Component props
+ * @param props.footer - Buttons pinned to the rail's foot
+ * @param props.children - Rail buttons and separators
+ * @param props.className - Extra class on the root
+ * @param props.onKeyDown - Called before the roving-focus key handling
+ * @param props.onFocus - Called before the roving-focus bookkeeping
+ * @returns The rail
+ */
+declare function NavRailRoot({ footer, children, className, onKeyDown, onFocus, ...others }: NavRailProps): default_2.JSX.Element;
+
+/**
+ * The rail's 16 x 1 separator (8px above, 7px below).
+ * @returns The separator
+ */
+declare function NavRailSeparator(): default_2.JSX.Element;
+
+/**
+ * Expand a 3-, 4-, 6- or 8-digit hex color into `#RRGGBBAA`, upper case.
+ * @param color - a hex color, with or without `#`
+ * @returns the 8-digit form, or `undefined` when the text is not a hex color
+ */
+export declare function normalizeHexa(color: string): string | undefined;
+
 /**
  * Converts an opacity percentage (0-100) to a hex alpha string (00-ff).
  * @param opacity - Opacity as a percentage from 0 to 100
@@ -3210,244 +3531,222 @@ export declare function opacityToAlphaHex(opacity: number): string;
  */
 export declare type OpenChangeHandler = (opened: boolean, event?: default_2.SyntheticEvent) => void;
 
+/**
+ * A page list (design/figma-spec.md 10.2): Figma's own accessible model, a one-column grid with
+ * one Tab stop. ArrowUp / ArrowDown / Home / End move focus without switching; Enter, Space or a
+ * click switches; F2 or a double-click renames when `onRename` is given.
+ * @param props - Component props
+ * @param props.items - The items or pages
+ * @param props.current - The current page (controlled)
+ * @param props.defaultCurrent - The current page to start with
+ * @param props.onCurrentChange - Called when a page is switched to
+ * @param props.tone - Page or group look
+ * @param props.label - The accessible name
+ * @param props.onRename - Called with a new name; turns renaming on
+ * @param props.renameLabel - The rename field's accessible name
+ * @returns The list
+ */
+export declare function PageList({ items, current, defaultCurrent, onCurrentChange, tone, label, onRename, renameLabel, }: PageListProps): default_2.JSX.Element;
+
+/** One entry of a PageList. */
+export declare interface PageListItem {
+    id: string;
+    name: string;
+    /** A divider row: drawn as a line, skipped by the arrow keys. */
+    divider?: boolean;
+}
+
+/**
+ * Props for the PageList component.
+ */
+export declare interface PageListProps {
+    /** The pages, in order. */
+    items: readonly PageListItem[];
+    /** The current page (controlled). */
+    current?: string;
+    /** The current page to start with (uncontrolled). */
+    defaultCurrent?: string;
+    /** Called when a page is switched to, by click, Enter or Space. */
+    onCurrentChange?: (id: string, event?: default_2.SyntheticEvent) => void;
+    /** `"group"` draws the collection-group look (selected blue, weight 600). Default `"page"`. */
+    tone?: "page" | "group";
+    /** The list's accessible name. Defaults to "Pages". */
+    label?: string;
+    /** Called with a new name. Giving it turns on renaming (F2 or a double-click). */
+    onRename?: (id: string, name: string) => void;
+    /** The accessible name of the rename field. Defaults to "Page name". */
+    renameLabel?: string;
+}
+
+/**
+ * One row of a page list (design/figma-spec.md 10.2): a 240 x 32 grid cell (padding 4 8) around
+ * a 224 x 24 pill, text 16px in at 11/24. Hover fills the pill; the current page is gray and
+ * weight 550. The cell carries the focus ring (1px, radius 5, offset 0).
+ * @param props - Component props
+ * @returns The row
+ */
+export declare const PageRow: default_2.ForwardRefExoticComponent<PageRowProps & default_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the PageRow component.
+ */
+export declare interface PageRowProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    /** The page's name. Ignored by a divider row. */
+    name: string;
+    /** This is the page on screen (gray fill, weight 550; `aria-current="page"`). */
+    current?: boolean;
+    /** `"group"`: a selectable group in a collection list (selected blue, weight 600). */
+    tone?: "page" | "group";
+    /** For `tone="group"`: whether the group is selected. */
+    selected?: boolean;
+    /** Draw a divider line instead of a name. */
+    divider?: boolean;
+    /** Drawn in place of the name, e.g. an InlineRename. */
+    nameSlot?: default_2.ReactNode;
+    /** The focusable cell's tab index (PageList manages it). Default 0. */
+    tabIndex?: number;
+}
+
 /**
  * The pixel grid every panel row is measured against.
  *
- * All members are pixels. Import them; a literal `24`, `108` or `32` written
- * into a component is a bug, because it hides the fact that the number is part
- * of one identity that has to keep adding up to 280.
+ * All members are pixels. Import them; a literal `24`, `88` or `32` written into a component is
+ * a bug, because it hides the fact that the number is part of one identity that has to keep
+ * adding up to 240.
  */
 export declare const PANEL_GRID: {
-    /** the width of the panel column every row is laid out in */
-    readonly WIDTH: 280;
+    /** the width of the panel column every row is laid out in (241 with its 1px edge) */
+    readonly WIDTH: 240;
     /** left panel padding: where the content band begins */
     readonly PAD_LEFT: 16;
-    /** right panel padding: 8, not 16, because the trailing slot's glyph is optically inset */
+    /** right panel padding */
     readonly PAD_RIGHT: 8;
-    /** x 16 to x 272 */
-    readonly CONTENT: 256;
-    /** a control that fills the row and still leaves a trailing slot */
-    readonly BODY: 224;
+    /** x 16 to x 232 */
+    readonly CONTENT: 216;
+    /** a control that spans both fields and still leaves a trailing slot */
+    readonly BODY: 184;
     /** one of a pair */
-    readonly FIELD: 108;
+    readonly FIELD: 88;
     /** between the two fields of a pair */
     readonly GUTTER: 8;
     /** between the body and the trailing slot */
     readonly TRAIL_GAP: 8;
-    /** the fixed trailing slot at x 248..272: an advanced settings button, a reset control, or nothing */
+    /** the fixed trailing slot at x 208..232: an advanced settings button, a reset control, or nothing */
     readonly TRAIL: 24;
-    /** one of three segmented buttons */
-    readonly TRIPLE: 72;
-    /** between two segmented buttons */
-    readonly TRIPLE_GAP: 4;
+    /** one of three segments: the body shared three ways, no gaps */
+    readonly TRIPLE: number;
+    /** between two segments: joined */
+    readonly TRIPLE_GAP: 0;
     /** every field, button and icon button in a panel row */
     readonly CONTROL_HEIGHT: 24;
-    /** 24px control, 8px between */
+    /** a single row: a 24px control in a 32px row */
     readonly ROW_PITCH: 32;
-    /** toggles are the one row type that packs tighter than the row pitch */
-    readonly TOGGLE_PITCH: 24;
-    /** a row of the user's own strings */
-    readonly DATA_PITCH: 28;
-    /** the section header row, frozen at 32 */
-    readonly SECTION_HEADER: 32;
+    /** a checkbox row in a panel (24 in dialogs) */
+    readonly TOGGLE_PITCH: 32;
+    /** list and tree rows: a 24 pill in a 32 row */
+    readonly DATA_PITCH: 32;
+    /** the section header row */
+    readonly SECTION_HEADER: 40;
     /** the pad below a section's last content row */
-    readonly SECTION_PAD_BOTTOM: 8;
-    /** the square a field's label glyph lives in, and the scrub handle */
-    readonly GLYPH_SLOT: 16;
-    /** the drawn size of a glyph inside its slot */
-    readonly GLYPH: 14;
-    /** the drawn size of a chevron, an X and a reset */
-    readonly CHEVRON: 12;
+    readonly SECTION_PAD_BOTTOM: 12;
+    /** a field's leading slot, and the scrub handle */
+    readonly GLYPH_SLOT: 24;
+    /** the nominal drawn size of a glyph inside its slot (10-14 allowed) */
+    readonly GLYPH: 12;
+    /** the box of a chevron, an X and a reset; carets are drawn 5 x 3 inside it */
+    readonly CHEVRON: 10;
     /** the value text begins here, measured from the field's leading edge */
     readonly VALUE_INSET: 24;
     /** one row pitch of chart */
     readonly SPARKLINE_HEIGHT: 32;
     /** two row pitches of chart */
     readonly HISTOGRAM_HEIGHT: 64;
-    /** the label column shown when the `showLabels` preference writes a word beside each control */
-    readonly LABEL_COLUMN: 76;
+    /** the label column of a popover row (64-72) */
+    readonly LABEL_COLUMN: 72;
+    /** a field row with a legend: 16 legend + 4 + 24 control + 4 */
+    readonly FIELD_ROW: 48;
+    /** a 9/14 caption above each column + 3 + 24 */
+    readonly CAPTION_ROW: 50;
+    /** the legend band */
+    readonly LEGEND: 16;
+    /** a light popover's default width */
+    readonly POPOVER_WIDTH: 240;
+    /** a popover or modal header */
+    readonly POPOVER_HEADER: 40;
 };
 
 /**
- * The panel ink map: one Mantine CSS variable per colour role a panel row
- * paints.
+ * The panel ink map: one `--cm-*` token per color role a panel row paints (spec 2.2).
  *
- * Every colour a row type paints comes from here, so the same component reads
- * correctly in the light scheme, in the dark scheme and under a consumer's own
- * primary colour. A raw hex written into a component is a defect that shows up
- * in only one of the two schemes.
- *
- * A hex in the notes below is the value the token resolves to in the dark
- * scheme, quoted so the intended shade is recognisable. Contrast ratios are
- * WCAG 2.x ratios measured from this library's own theme, in the scheme named
- * beside them.
+ * Every value resolves per element from its `color-scheme`, so the same component reads
+ * correctly in light, in dark, inside a dark-scoped menu, and in the AA mode. Light / dark hex
+ * values are quoted in the notes.
  */
 export declare const PANEL_INK: {
-    /** primary text: the value in a field, a data row's name, a filled-in section's name (#d5d7da) */
-    readonly VALUE: "var(--mantine-color-text)";
-    /**
-     * secondary text: glyph labels, unit suffixes, the name of a section that
-     * has nothing set in it.
-     *
-     * One step brighter than the #7a828e of the original palette, which
-     * measured 4.03:1 on the panel and 3.44:1 on a field against the 4.5:1
-     * WCAG AA requirement for text. This is the dimmest step of the palette
-     * that meets AA on both of those grounds, in both colour schemes.
-     */
-    readonly CHROME: "light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1))";
-    /**
-     * reading prose: a sentence of explanation rather than a value.
-     *
-     * It shares its value with the secondary text, because the secondary text
-     * had to be lifted to this step to meet WCAG AA on a field.
-     */
-    readonly PROSE: "light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1))";
-    /**
-     * placeholder text: what an empty but editable field shows in place of a
-     * value.
-     *
-     * Lifted from the #5f6873 of the original palette, which measured 2.36:1
-     * on a field against the 4.5:1 WCAG AA requirement for text. Placeholder
-     * text is ordinary text to WCAG and gets no exemption, so on these grounds
-     * it cannot be dimmer than the secondary text and still meet AA.
-     *
-     * A control that cannot be operated is a different case and uses
-     * `DISABLED`, which is allowed to be dimmer than this.
-     */
-    readonly PLACEHOLDER: "light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1))";
-    /**
-     * the text and glyphs of a control that is present but not operable.
-     *
-     * Deliberately dimmer than every other text role here -- 2.36:1 on a field
-     * and 2.77:1 on the panel in the dark scheme, 1.87:1 and 2.07:1 in the
-     * light one -- and deliberately not lifted to meet the 4.5:1 that ordinary
-     * text has to meet. WCAG 2.2 exempts an inactive control from its contrast
-     * minimums (1.4.3 for text and 1.4.11 for boundaries both exclude a
-     * component that cannot be operated), and being visibly dimmer than a live
-     * control is how a disabled one says what it is. An ink bright enough to
-     * meet the text minimum would read as available.
-     *
-     * The value is Mantine's own `--mantine-color-disabled-color`, so a
-     * disabled row in this library matches a disabled Mantine input standing
-     * next to it, and follows a consumer who overrides that variable.
-     */
-    readonly DISABLED: "var(--mantine-color-disabled-color)";
-    /**
-     * the default surface: a field's background, a segmented track (#2a3035).
-     *
-     * A field is borderless, so the only thing that draws its box is a fill
-     * one step away from the panel behind it. That step runs in opposite
-     * directions in the two schemes -- lighter than the panel in dark, darker
-     * than it in light -- so this cannot be `--mantine-color-default`, which
-     * is the panel's own white in light mode and would leave every field
-     * invisible.
-     *
-     * The fill is 1.17:1 against the panel, short of the 3:1 that WCAG AA asks
-     * of a component boundary. It is not lifted here: any fill bright enough
-     * to reach 3:1 against the panel leaves no room for an ink dimmer than the
-     * primary text colour inside the field. Giving a field a visible boundary is a
-     * design decision -- a hairline, a shadow or an underline -- rather than a
-     * token move.
-     */
-    readonly SURFACE: "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))";
-    /** the panel itself, and therefore the hairline that divides a compound row (#1f2428) */
-    readonly PANEL: "var(--mantine-color-body)";
-    /**
-     * the raised surface: the ground under a small chip's label, and the track
-     * a bar's fill runs along (#374047).
-     *
-     * One step further from the panel than `SURFACE`, in the same direction.
-     * Like `SURFACE` it flips between the schemes, which
-     * `--mantine-color-default-hover` does not -- in the light scheme that
-     * token is #f8f9fa and would be indistinguishable from the surface under
-     * it.
-     *
-     * This is not the ground of a selected item; that is `SELECTED`. The two
-     * pull in opposite directions and cannot be one value. A raised ground has
-     * things drawn *on* it -- a chip's label, a bar's coloured fill -- so in
-     * the dark scheme it has to stay dark enough for those to stay legible. A
-     * selected item is the other way round: it has to separate from the track
-     * around it, which in the dark scheme means going lighter. Lifting this
-     * token to serve a selected item is what made a chip's label and a bar's
-     * fill unreadable, so the two roles are two tokens.
-     *
-     * One pairing on this token is still short of WCAG AA, and it cannot be
-     * fixed by moving it. A chip labelled in the secondary text colour
-     * measures 4.43:1 in the dark scheme against the 4.5:1 for text; the same
-     * chip labelled in the primary text colour measures 7.33:1, which is what
-     * the row draws. An accent fill on this track measures 3.53:1 (dark) and
-     * 3.86:1 (light), past the 3:1 for a shape that carries meaning.
-     */
-    readonly RAISED: "light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5))";
-    /**
-     * the ground of the selected item in a group: the checked segment of a
-     * segmented control, the current tile of an icon group, the active choice
-     * in a set of buttons.
-     *
-     * It inverts -- light in the dark scheme, dark in the light scheme -- so a
-     * selected item reads as a solid patch against its track rather than as a
-     * slightly different shade of it. Against `SURFACE`, which is what a track
-     * is painted with, it measures 5.59:1 in the dark scheme and 7.35:1 in the
-     * light one, past the 3:1 that WCAG 2.2 (1.4.11) asks of the visual
-     * boundary that distinguishes a control's state. Against the panel it
-     * measures 6.56:1 and 8.18:1, so it also survives a selected item that
-     * sits directly on the panel.
-     *
-     * Label it with `ON_SELECTED` rather than `VALUE`: a ground bright enough
-     * to satisfy 1.4.11 against its track is too bright to carry the primary
-     * text colour, which measures only 1.66:1 on it in the dark scheme.
-     *
-     * See `RAISED` for why the selected state and the raised surface are not
-     * one token.
-     */
-    readonly SELECTED: "light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1))";
-    /**
-     * the text and glyphs drawn on `SELECTED`.
-     *
-     * The panel's own colour, so the label of a selected item reads as a shape
-     * punched out of a solid patch. It measures 6.56:1 against `SELECTED` in
-     * the dark scheme and 8.18:1 in the light one, past the 4.5:1 WCAG AA
-     * (1.4.3) requirement for text.
-     */
-    readonly ON_SELECTED: "var(--mantine-color-body)";
-    /**
-     * borders, chart bars and the chart baseline.
-     *
-     * Lifted from the #48525c of the original palette, which measured 1.97:1
-     * on the panel against the 3:1 WCAG AA requirement for meaningful non-text
-     * such as a chart bar. This is the dimmest step of the palette that meets
-     * 3:1 on the panel in both colour schemes.
-     */
-    readonly BORDER: "light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2))";
-    /** the 1px rule above a section header, at the weight of `BORDER` */
-    readonly DIVIDER: "light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2))";
-    /**
-     * accent: a checked box, the highlighted bin, a filled micro-bar, the Run
-     * button (#1971c2, blue-8, in the light scheme; #339af0, blue-5, in the
-     * dark one).
-     *
-     * The theme sets `primaryShade` so the fill stands at least 3:1 off the
-     * panel, a field and the raised surface in both schemes (WCAG 1.4.11):
-     * 3.86:1 or more in the light scheme, 3.53:1 or more in the dark one.
-     *
-     * This token and `ON_ACCENT` follow a consumer's own `primaryColor`;
-     * `WARNING`, `SUCCESS` and `DANGER` are stock Mantine yellow, green and
-     * red. The theme sets no `primaryColor`, so a consumer who sets one gets
-     * it throughout.
-     */
-    readonly ACCENT: "var(--mantine-primary-color-filled)";
-    /**
-     * text and glyphs drawn on the accent: white in the light scheme (5.02:1)
-     * and black in the dark one (7.02:1), chosen by the theme's `autoContrast`
-     * from the fill's luminance, so both pass WCAG 1.4.3's 4.5:1.
-     */
-    readonly ON_ACCENT: "var(--mantine-primary-color-contrast)";
-    /** the warning glyph on a departure line (#fab005) */
-    readonly WARNING: "var(--mantine-color-yellow-6)";
-    /** success (#40c057) */
-    readonly SUCCESS: "var(--mantine-color-green-6)";
-    /** danger (#fa5252) */
-    readonly DANGER: "var(--mantine-color-red-6)";
+    /** primary text: a field's value, a row's name (#000000e5 / #fff) */
+    readonly VALUE: "var(--cm-text)";
+    /** secondary text: glyph labels, unit suffixes, legends (#00000080 / #ffffffb2) */
+    readonly CHROME: "var(--cm-text-secondary)";
+    /** reading prose (secondary text) */
+    readonly PROSE: "var(--cm-text-secondary)";
+    /** placeholder text (#0000004d / #ffffff66; darker in the AA mode) */
+    readonly PLACEHOLDER: "var(--cm-text-tertiary)";
+    /** the text and glyphs of a control that cannot be operated (exempt from contrast minimums) */
+    readonly DISABLED: "var(--cm-text-disabled)";
+    /** a field's fill, a segmented track (#f5f5f5 / #383838) */
+    readonly SURFACE: "var(--cm-bg-secondary)";
+    /** the panel itself (#fff / #2c2c2c) */
+    readonly PANEL: "var(--cm-bg)";
+    /** a raised or pressed ground: a chip's label ground, a bar's track (#e6e6e6 / #444) */
+    readonly RAISED: "var(--cm-bg-pressed)";
+    /** a selected item's ground (#e5f4ff / #394360) */
+    readonly SELECTED: "var(--cm-bg-selected)";
+    /** the glyph on a selected item (#007be5 / #7cc4f8) */
+    readonly ON_SELECTED: "var(--cm-icon-brand)";
+    /** borders, chart bars, the chart baseline (#e6e6e6 / #444) */
+    readonly BORDER: "var(--cm-border)";
+    /** the 1px divider (#e6e6e6 / #444) */
+    readonly DIVIDER: "var(--cm-border)";
+    /** a filled accent surface: primary button, checked box (#0d99ff / #0c8ce9) */
+    readonly ACCENT: "var(--cm-bg-brand)";
+    /** text and glyphs on the accent (#fff) */
+    readonly ON_ACCENT: "var(--cm-text-onbrand)";
+    /** warning (#ffcd29 / #f3c11b) */
+    readonly WARNING: "var(--cm-bg-warning)";
+    /** success (#14ae5c / #198f51) */
+    readonly SUCCESS: "var(--cm-bg-success)";
+    /** danger (#f24822 / #e03e1a) */
+    readonly DANGER: "var(--cm-bg-danger)";
+    /** a row, tab or tool under the pointer (#f5f5f5 / #383838) */
+    readonly HOVER: "var(--cm-bg-hover)";
+    /** pressed (#e6e6e6 / #444) */
+    readonly PRESSED: "var(--cm-bg-pressed)";
+    /** translucent hover over any ground (#0000000d / #ffffff0d) */
+    readonly TRANSPARENT_HOVER: "var(--cm-bg-transparent-hover)";
+    /** translucent pressed over any ground (#0000001a / #ffffff1a) */
+    readonly TRANSPARENT_PRESSED: "var(--cm-bg-transparent-pressed)";
+    /** a selected item under the pointer (#bde3ff / #4a5878) */
+    readonly SELECTED_HOVER: "var(--cm-bg-selected-hover)";
+    /** the children of a selected item (#f2f9ff / #32394d) */
+    readonly SELECTED_SECONDARY: "var(--cm-bg-selected-secondary)";
+    /** links and brand text (#007be5 / #7cc4f8) */
+    readonly BRAND_TEXT: "var(--cm-text-brand)";
+    /** tertiary glyphs (#0000004d / #ffffff66) */
+    readonly TERTIARY: "var(--cm-icon-tertiary)";
+    /** the focus ring (#0d99ff / #0c8ce9) */
+    readonly FOCUS: "var(--cm-border-selected)";
+    /** a translucent hairline: secondary button, panel edge (#0000001a / #ffffff1a) */
+    readonly TRANSLUCENT: "var(--cm-border-translucent)";
+    /** a stronger translucent edge: checkbox, switch track (#00000033 / #ffffff33) */
+    readonly TRANSLUCENT_STRONG: "var(--cm-border-translucent-strong)";
+    /** the dark menu surface, the same in both schemes (#1e1e1e) */
+    readonly MENU: "var(--cm-bg-menu)";
+    /** text on the menu (#fff) */
+    readonly ON_MENU: "var(--cm-text-menu)";
+    /** secondary text on the menu: shortcuts (#ffffffb2) */
+    readonly ON_MENU_SECONDARY: "var(--cm-text-menu-secondary)";
+    /** component (purple) text (#8638e5 / #d1a8ff) */
+    readonly COMPONENT: "var(--cm-text-component)";
 };
 
 /**
@@ -3470,11 +3769,13 @@ export declare const PANEL_INK: {
  * (`placeholder`), offer a list of choices (`kind="select"`), or have been set
  * without taking effect yet (`pending`).
  *
- * The glyph slot is also a drag handle. Give it `onScrubStart`, `onScrub` and
- * `onScrubEnd` and dragging the glyph sideways reports how far the pointer
- * moved, with the start and end marking one interaction so a drag becomes a
- * single undo entry. Dragging is a shortcut, not the only way in: the same value
- * can always be typed.
+ * The glyph slot is also a drag handle. A number field scrubs itself: dragging
+ * the glyph sideways moves the value half a unit per pixel, with the page
+ * cursor held at `ew-resize`, and commits once on release. Give any field
+ * `onScrubStart`, `onScrub` and `onScrubEnd` and the drag reports how far the
+ * pointer moved instead, with the start and end marking one interaction so a
+ * drag becomes a single undo entry. Dragging is a shortcut, not the only way
+ * in: the same value can always be typed.
  * @example
  * ```tsx
  * const [size, setSize] = useState("1.0");
@@ -3497,12 +3798,17 @@ export declare const PanelField: default_2.ForwardRefExoticComponent<PanelFieldP
  * What a field holds, and therefore which control it draws.
  *
  * - `"text"` -- a text box. The default.
- * - `"number"` -- a number box. Up and down arrows step the value, and the
- *   digits and decimal separator follow the reader's locale.
- * - `"select"` -- a drop-down. Pass `data` with the choices to get a real
- *   drop-down list; with no `data` the field draws the chevron but opens
- *   nothing of its own, which is what you want when `onClick` opens a panel you
- *   have built yourself.
+ * - `"number"` -- Figma's scrubbable number box. Typing applies nothing until
+ *   Enter, Tab or blur, and may be arithmetic (`40*2`); anything that does not
+ *   evaluate reverts. Up and down arrows step the value at once (Shift: ten
+ *   steps). Dragging the glyph slot scrubs the value at half a unit per pixel
+ *   and commits once on release. Digits and the decimal separator follow the
+ *   reader's locale.
+ * - `"select"` -- a drop-down, drawn as Figma's outlined select trigger. Pass
+ *   `data` with the choices to get a real drop-down list, which opens over the
+ *   field with the current choice on top of it; with no `data` the field draws
+ *   the caret but opens nothing of its own, which is what you want when
+ *   `onClick` opens a panel you have built yourself.
  */
 export declare type PanelFieldKind = "text" | "number" | "select";
 
@@ -3529,7 +3835,7 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
      *
      * Pass the name of one of the built-in field glyphs, one of the five
      * capital letters `N`, `E`, `W`, `D` or `K`, or your own node such as a
-     * colour swatch. A bare string is deliberately not accepted: the slot holds
+     * color swatch. A bare string is deliberately not accepted: the slot holds
      * a drawing, not a word.
      */
     glyph?: FieldGlyphName | FieldLetter | Exclude<default_2.ReactNode, string>;
@@ -3553,9 +3859,9 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
      * Called when the value changes, with the new value first and the event that
      * caused it second where there is one.
      *
-     * A text field and a drop-down report a string. A number field reports a
-     * number when what was typed is one, and the raw text while it is still
-     * being typed -- which is what Mantine's own number input reports.
+     * A text field reports every keystroke and a drop-down each choice, as a
+     * string. A number field reports a number once per commit: Enter, Tab or
+     * blur after typing, each arrow step, and the release of a scrub.
      */
     onChange?: ChangeHandler<string | number>;
     /**
@@ -3567,12 +3873,12 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
      */
     data?: ComboboxData;
     /**
-     * A short unit shown after the value, in the secondary text colour, at the
+     * A short unit shown after the value, in the secondary text color, at the
      * end of the same box -- "%", "px" per second, a count of links.
      */
     unit?: string;
     /**
-     * How wide the field is: 108 for one of a pair, 224 for a field that spans
+     * How wide the field is: 88 for one of a pair, 184 for a field that spans
      * the body of a row, or `"fill"` to take whatever width its container gives
      * it.
      */
@@ -3595,7 +3901,7 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
      */
     mixed?: boolean;
     /**
-     * The text shown in an empty field, in the placeholder colour.
+     * The text shown in an empty field, in the placeholder color.
      *
      * Passing `true` instead of a string is the older spelling: it moves
      * whatever is in `value` into the placeholder, which is what a field
@@ -3614,8 +3920,14 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
     min?: number;
     /** The largest value a number field accepts. */
     max?: number;
-    /** How much one press of an arrow key changes a number field. */
+    /** How much one press of an arrow key changes a number field. Shift moves ten. */
     step?: number;
+    /**
+     * What a number field says about its arrow keys, after its name and value,
+     * as its `aria-description`. Pass an empty string to say nothing.
+     * @default "Use arrow keys to change the value"
+     */
+    stepHint?: string;
     /**
      * Called once when a drag of the glyph slot begins, on the first movement
      * rather than on the press.
@@ -3632,9 +3944,13 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
      * The distance is positive when the pointer moves in the direction the text
      * runs -- to the right in English, to the left in Arabic or Hebrew -- so
      * dragging forwards always raises the value.
+     *
+     * A number field scrubs on its own (half a unit per pixel, one `onChange`
+     * on release). Pass `onScrub` to take the value over yourself: the field
+     * then reports the distances and changes nothing.
      */
     onScrub?: GestureChangeHandler;
-    /** Called once when a drag of the glyph slot finishes or is cancelled. Close the undo transaction here. */
+    /** Called once when a drag of the glyph slot finishes or is canceled. Close the undo transaction here. */
     onScrubEnd?: GestureEndHandler;
     /**
      * Called when the field is activated by a click or by pressing Enter.
@@ -3749,17 +4065,19 @@ export declare const Popout: typeof PopoutRoot & {
 
 /**
  * Gap in pixels between trigger and panel for root-level popouts.
+ *
+ * Zero: Figma docks a light popover flush against the panel it opened from (its end edge on the
+ * panel's start border), design/figma-spec.md 8.4.
  */
-export declare const POPOUT_GAP = 8;
+export declare const POPOUT_GAP = 0;
 
 /**
  * Gap in pixels between a pop-out panel and the panel it opened from.
  *
- * A panel opened from inside another panel uses this as its default `gap`, so
- * every level of a nested stack steps out by the same amount and the stack
- * reads as a stack rather than as several panels that happen to overlap.
+ * Zero: a child popout docks flush to the start of its parent, as Figma's create-style dialog
+ * docks against the color picker (design/figma-spec.md 8.4).
  */
-export declare const POPOUT_NESTED_GAP = 4;
+export declare const POPOUT_NESTED_GAP = 0;
 
 /**
  * Z-index base value for popout panels.
@@ -3772,7 +4090,7 @@ export declare const POPOUT_Z_INDEX_BASE = 1000;
  *
  * For a panel placed to the left or right, this is the vertical axis:
  * - "start": the panel's top edge meets the top of what it aligns to
- * - "center": the panel is centred on it
+ * - "center": the panel is centered on it
  * - "end": the panel's bottom edge meets its bottom
  *
  * For a panel placed above or below, this is the horizontal axis, and "start"
@@ -3836,16 +4154,19 @@ export declare interface PopoutAnchorProps {
 export declare type PopoutAnchorTarget = RefObject<HTMLElement | null> | "parent" | "panel" | "trigger";
 
 /**
- * An icon button that opens a pop-out and stays lit while it is open.
+ * An icon button that opens a pop-out and shows that it is open.
  *
- * It draws itself dimmed and subtle while the panel is closed and highlighted
- * while it is open, so a column of them says at a glance which panel is on
- * screen. Give it an `aria-label`: an icon on its own has no accessible name.
+ * It is Figma's 24px ghost icon button (design/figma-spec.md 4.3): transparent
+ * at rest, and while its panel is up it takes the "open" look -- the selected
+ * ground (#e5f4ff / #394360) with a brand-colored glyph -- which the theme
+ * draws from the `aria-expanded="true"` that `Popout.Trigger` sets. A column of
+ * them therefore says at a glance which panel is on screen. Give it an
+ * `aria-label`: an icon on its own has no accessible name.
  *
- * Use it inside `Popout.Trigger`, which supplies the open state it reads.
+ * Use it inside `Popout.Trigger`, which supplies the open state.
  * @param props - Component props
  * @param props.icon - The drawing on the button
- * @param props.size - How big the button is, defaulting to the compact 18px `"xs"`
+ * @param props.size - How big the button is, defaulting to Figma's 24px `"sm"`
  * @returns The trigger button
  * @example
  * ```tsx
@@ -3853,7 +4174,7 @@ export declare type PopoutAnchorTarget = RefObject<HTMLElement | null> | "parent
  *     <Popout.Trigger>
  *         <PopoutButton icon={<UiGlyph name="gear" />} aria-label="Open settings" />
  *     </Popout.Trigger>
- *     <Popout.Panel width={280} header={{variant: "title", title: "Settings"}}>
+ *     <Popout.Panel width={240} header={{variant: "title", title: "Settings"}}>
  *         <Popout.Content>Content here</Popout.Content>
  *     </Popout.Panel>
  * </Popout>
@@ -3867,7 +4188,7 @@ export declare const PopoutButton: ForwardRefExoticComponent<PopoutButtonProps &
  * Every `ActionIcon` prop but `variant` and `children` is accepted as well and
  * is forwarded to the underlying button, so `size`, `color`, `disabled`,
  * `aria-label` and a `data-` attribute all work. The variant is the button's
- * own: it is what draws the open state.
+ * own: the ghost (`subtle`) button, whose open state the theme draws.
  */
 export declare interface PopoutButtonProps extends Omit<ActionIconProps, "variant" | "children">, ElementProps<"button", "color" | keyof ActionIconProps> {
     /**
@@ -3884,7 +4205,11 @@ export declare interface PopoutButtonProps extends Omit<ActionIconProps, "varian
  *
  * Wrap a panel's content in it for the padding every pop-out shares, or leave
  * it out and lay the panel out yourself when the content has to reach the
- * panel's own edges -- a colour picker, a list that scrolls.
+ * panel's own edges -- a color picker, a list that scrolls.
+ *
+ * The padding is Figma's popover body (design/figma-spec.md 8.4): 16px at each
+ * side and 12px above and below, so the 24px control of a first 32px row sits
+ * 16px under the header's divider, and the last one 16px above the bottom.
  * @param props - Component props
  * @param props.children - What the panel shows, laid out inside the panel's own padding
  * @returns The panel's padded content area
@@ -3933,12 +4258,17 @@ export declare interface PopoutContextValue {
     /**
      * The region this pop-out was opened in, or null when it sits in no region.
      *
-     * Root-level pop-outs compete for one open slot per region, so a pop-out
-     * opened in a panel and one opened in an inspector can both be open while
-     * two opened in the same panel cannot. It is the opener's region, not the
-     * panel's screen position.
+     * Recorded for consumers that read it. It no longer separates pop-outs:
+     * one root pop-out is open at a time across the whole page, as in Figma.
      */
     region: string | null;
+    /**
+     * Whether opening this pop-out closes the other open root pop-out (and is
+     * closed by the next one). False only for a hover bubble such as
+     * `InfoCircle`, which explains a control without replacing the panel the
+     * person is working in.
+     */
+    exclusive?: boolean;
 }
 
 /**
@@ -3954,7 +4284,7 @@ declare interface PopoutHeaderAction {
      *
      * The button is icon-only, so this is its accessible name and there is no
      * other text to fall back on. Write it as a phrase a person would
-     * recognise.
+     * recognize.
      */
     label: string;
     /**
@@ -4008,6 +4338,11 @@ export declare interface PopoutHeaderProps {
      * `aria-labelledby` at.
      */
     titleId?: string;
+    /**
+     * The base id of the tab strip, from which Mantine's Tabs derives each tab's
+     * id and aria-controls. The panel gives its tab panel the matching id.
+     */
+    tabsId?: string;
 }
 
 /**
@@ -4016,8 +4351,10 @@ export declare interface PopoutHeaderProps {
  * Put one high in the tree, around anything that contains a pop-out. It owns
  * the stacking order, the portal the panels render into, and the dismissal
  * rules they all obey: Escape closes the innermost open panel, a click outside
- * closes them all, opening one panel closes the others at its own level, and
- * closing a panel closes everything opened from it.
+ * closes them all, opening one panel closes the one already open at its level
+ * (one root pop-out on the whole page at a time, as in Figma; a panel opened
+ * from inside an open one is its child and stays), and closing a panel closes
+ * everything opened from it.
  * @param props - Component props
  * @param props.children - The part of the tree that may contain pop-outs
  * @returns The provider that pop-outs inside it coordinate through
@@ -4037,7 +4374,7 @@ export declare interface PopoutManagerContextValue {
      * Adds a pop-out to the layer, with the callback that closes it, the pop-out
      * it was opened from, and the region it was opened in.
      */
-    register: (id: string, closeCallback: () => void, parentId?: string | null, region?: string | null) => void;
+    register: (id: string, closeCallback: () => void, parentId?: string | null, region?: string | null, exclusive?: boolean) => void;
     /** Takes a pop-out out of the layer, when it leaves the page. */
     unregister: (id: string) => void;
     /** The stacking order a pop-out currently draws at. */
@@ -4187,9 +4524,8 @@ export declare interface PopoutPanelProps {
      * Gap between the panel and the anchor, in pixels. Negative values overlap
      * the two so their borders meet exactly.
      *
-     * Defaults to 0 for a panel opened from the page, and to 4 for a panel
-     * opened from inside another panel, so a stack of nested panels shows a
-     * consistent step.
+     * Defaults to 0: a panel docks flush against what it opened from, and a
+     * nested panel flush against its parent (POPOUT_GAP, POPOUT_NESTED_GAP).
      */
     gap?: number;
     /**
@@ -4203,6 +4539,10 @@ export declare interface PopoutPanelProps {
      * Whether opening the panel moves keyboard focus into it, and closing it
      * returns focus to the trigger.
      *
+     * Focus lands on the panel itself, or on the first element inside it marked
+     * `data-autofocus` (Mantine's convention) when there is one -- mark the
+     * field a settings panel should start in.
+     *
      * Turn this off for a panel that opens on hover, where taking focus away
      * from what the person is doing would be an interruption.
      * @default true
@@ -4259,25 +4599,15 @@ export declare interface PopoutProps extends DisclosureProps {
  * Which region the pop-outs beneath this point belong to.
  *
  * A shell is divided into regions -- a properties panel, an inspector, the
- * surface between them, a dialog, a dock -- and a reader may hold one pop-out
- * open in each, because two pop-outs describing two different objects are not
- * competing for the same answer. What they may not do is stack up inside ONE
- * region: opening a second there closes the first, because both describe the
- * same object and the second is the reader changing their mind.
- *
- * Without a region, every pop-out opened straight from the page is a sibling of
- * every other, so an inspector pop-out closes a panel pop-out that has nothing
- * to do with it. That is the behaviour this component exists to divide up, and
- * it is why the default -- no region at all -- keeps the older whole-page rule:
- * an application that never mentions regions is unaffected.
- *
- * The region is the OPENER's, not the surface's screen position. Wrap the
- * region's own markup, and a pop-out that slides out over neighbouring space
- * still counts against the region whose control opened it.
- *
- * Nesting is unaffected either way. A pop-out opened from another pop-out is
- * grouped by its parent, as it always was, and inherits this region only for
- * the benefit of anything it opens in turn.
+ * surface between them -- and each pop-out records the region its trigger sits
+ * in, readable through `usePopoutRegion`.
+ *
+ * The region no longer decides which pop-outs may be open together. Figma
+ * keeps ONE light popover open at a time: opening another replaces it, in any
+ * region (design/figma-spec.md 8.4). Before the Figma restyle a reader could
+ * hold one pop-out open per region; that rule is gone, and this component is
+ * kept so existing markup and `usePopoutRegion` keep working. A pop-out opened
+ * from inside an open one is its child and stays allowed.
  * @param props - Component props
  * @param props.id - What to call this region
  * @param props.children - The part of the tree whose pop-outs belong to it
@@ -4410,7 +4740,7 @@ declare interface PopoutTitleHeaderConfig {
  * @param props - Component props
  * @param props.children - The trigger element (typically a button or icon button)
  * @param props.action - What activating the trigger does: toggle the panel, or only open it
- * @returns The trigger element with the pop-out's behaviour attached
+ * @returns The trigger element with the pop-out's behavior attached
  */
 declare function PopoutTrigger({ children, action }: PopoutTriggerProps): JSX.Element;
 
@@ -4555,6 +4885,118 @@ export declare interface ProseBlockProps {
     live?: LiveSetting;
 }
 
+/** One action of the palette. */
+export declare interface QuickAction {
+    /** The action's identifier, handed to `onRun`. */
+    value: string;
+    /** The action's name. */
+    label: string;
+    /** A 24px glyph before the name. */
+    icon?: default_2.ReactNode;
+    /** The keyboard shortcut, shown right-aligned. */
+    shortcut?: string;
+    /** The section heading the action is listed under ("Recents", "Design tools"). */
+    section?: string;
+    /** Extra words the default filter matches. */
+    keywords?: readonly string[];
+    /** Shown, but cannot be run or highlighted. */
+    disabled?: boolean;
+}
+
+/**
+ * Figma's quick actions palette: a 529 x 354 panel (the caller positions it; Figma puts it 8px
+ * above the toolbar) with a 32 tall search field, section headings and 32 tall rows. Typing
+ * filters live, and the results are listed flat (no headings); ArrowUp / ArrowDown move the highlight while focus stays in the field (a
+ * combobox with `aria-activedescendant` on a listbox); Enter runs; Escape closes. The first row
+ * is highlighted on open and after every change of the search.
+ * @param props - Component props
+ * @param props.actions - Every action
+ * @param props.onRun - Called with an action's value when it is run
+ * @param props.onClose - Called by Escape
+ * @param props.query - The search text (controlled)
+ * @param props.onQueryChange - Called as the search text changes
+ * @param props.filter - Which actions match the search
+ * @param props.header - Rendered between the search field and the list
+ * @param props.searchAction - A trailing action at the right end of the search field
+ * @param props.placeholder - Placeholder of the search field
+ * @param props.width - Panel width
+ * @param props.height - Panel height
+ * @param props.className - Extra class on the panel
+ * @param props.style - Extra style on the panel
+ * @returns The palette
+ */
+export declare function QuickActions({ actions, onRun, onClose, query, onQueryChange, filter, header, searchAction, placeholder, width, height, className, style, ...others }: QuickActionsProps): default_2.JSX.Element;
+
+/**
+ * Props for the QuickActions component.
+ */
+export declare interface QuickActionsProps {
+    /** Every action. Sections appear in the order their first action does. */
+    actions: readonly QuickAction[];
+    /** Called with an action's value when it is run (Enter, or a click). */
+    onRun: (value: string) => void;
+    /** Called by Escape. */
+    onClose?: () => void;
+    /** The search text (controlled). */
+    query?: string;
+    /** Called as the search text changes. */
+    onQueryChange?: (query: string) => void;
+    /** Which actions match the search. Defaults to a case-insensitive substring of the name or a keyword. */
+    filter?: (action: QuickAction, query: string) => boolean;
+    /**
+     * Rendered in a 32 tall row between the search field and the list, 8px in from the panel
+     * edge: Figma's scope tabs (`<Tabs>` with the theme's pill tabs), for example.
+     */
+    header?: default_2.ReactNode;
+    /**
+     * A trailing action at the right end of the search field, 6px in from its edge and 16px
+     * after the text: pass an `<ActionIcon aria-label="...">` (the theme's 24px ghost icon
+     * button), as Figma's visual-search button. While there is search text the palette shows its
+     * own clear button in this place instead, as Figma does.
+     */
+    searchAction?: default_2.ReactNode;
+    /** Accessible name of the dialog. Defaults to the "Quick actions" label. */
+    "aria-label"?: string;
+    /** Placeholder of the search field. Defaults to the "Search actions" label. */
+    placeholder?: string;
+    /** Panel width. Default 529 (Figma's, the toolbar's width). */
+    width?: number;
+    /** Panel height. Default 354. */
+    height?: number;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * A 56 x 56 rail button: a 32 x 32 pill (24 glyph) above a 9/14 caption. The pill turns
+ * `--cm-bg-hover` under the pointer and `--cm-bg-selected` with a brand glyph when active; the
+ * caption never changes. Tooltip to the end side after 500ms, none on the active button.
+ * @param props - Component props
+ * @param props.icon - The destination's glyph
+ * @param props.label - The caption, accessible name and tooltip
+ * @param props.shortcut - The keyboard shortcut shown in the tooltip
+ * @param props.active - Whether the destination is open
+ * @returns The rail button
+ */
+export declare const RailButton: default_2.ForwardRefExoticComponent<RailButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Props for the RailButton component.
+ */
+export declare interface RailButtonProps extends Omit<UnstyledButtonProps, "children">, Omit<ElementProps<"button">, "children"> {
+    /** The destination's glyph, drawn in the 32 x 32 pill. */
+    icon: default_2.ReactNode;
+    /** The 9px caption under the pill, also the accessible name and the tooltip. */
+    label: string;
+    /** The keyboard shortcut shown in the tooltip. */
+    shortcut?: string;
+    /**
+     * Whether the destination is open. `aria-expanded="true"` means the same thing, so a button
+     * that opens a panel only needs that.
+     */
+    active?: boolean;
+}
+
 /**
  * A row that draws a range: two values with the mapping between them drawn
  * in-line, and no sentence anywhere.
@@ -4588,8 +5030,8 @@ export declare interface ProseBlockProps {
  * @param props.min - The value at the low end of the range
  * @param props.max - The value at the high end of the range
  * @param props.label - Names what the ramp maps; never drawn, and read first in the drawing's accessible name
- * @param props.variant - Which drawing the row makes of its range: a growing wedge or a colour bar
- * @param props.gradient - A CSS gradient for the colour form, written as though text ran left to right
+ * @param props.variant - Which drawing the row makes of its range: a growing wedge or a color bar
+ * @param props.gradient - A CSS gradient for the color form, written as though text ran left to right
  * @param props.scale - The transform between the two values, drawn as a small curve at the end of the row
  * @param props.busy - Whether the values are still being worked out by something that finishes later
  * @param props.live - How urgently a screen reader announces the drawing when it changes on its own
@@ -4601,7 +5043,7 @@ export declare interface ProseBlockProps {
  * <RampRow label="Node size by age" min="45" max="68" scale="sqrt" />
  * ```
  * @example
- * A colour ramp filled in by a background run, whose curve opens a chooser.
+ * A color ramp filled in by a background run, whose curve opens a chooser.
  * ```tsx
  * const format = useNumberFormatter({maximumFractionDigits: 2});
  *
@@ -4658,7 +5100,7 @@ export declare interface RampRowProps {
      * Which drawing the row makes of its range.
      *
      * - `"size"` -- a wedge that grows from the low value to the high one,
-     *   drawn in the secondary text colour. Its two ends are the smallest and
+     *   drawn in the secondary text color. Its two ends are the smallest and
      *   the largest size the mapping produces.
      * - `"color"` -- a bar painted with `gradient`, so the ramp on the panel is
      *   the ramp on the picture it describes.
@@ -4666,7 +5108,7 @@ export declare interface RampRowProps {
      */
     variant?: "size" | "color";
     /**
-     * A CSS gradient for the colour form, such as
+     * A CSS gradient for the color form, such as
      * `"linear-gradient(to right, #123, #abc)"`.
      *
      * Write it as though text ran left to right; the drawing is mirrored for
@@ -4755,11 +5197,9 @@ declare type RampScale = "sqrt" | "linear" | "log";
  *
  * The denominator is not information the reader is missing -- the panel above it
  * already says how many nodes there are -- so the chip keeps the number that
- * changes and drops the words that do not. It is Mantine's `Badge` at the size
- * this library's theme gives it: 14px tall on a 9px face, fully round, on a
- * surface one step lighter than the panel. That is small enough to read as an
- * annotation of the row rather than as a second value competing with the row's
- * own.
+ * changes and drops the words that do not. It draws Figma's "Beta" badge look
+ * (design/figma-spec.md 9.8): 16 tall, radius 5, a 1px border-color outline drawn
+ * inside, transparent, 11/16 in the primary text color (bottom-toolbar/mode-metronome-full #296).
  * @param props - Component props
  * @param props.children - The rank, already spelled the short way
  * @returns The rank chip
@@ -4774,6 +5214,226 @@ export declare interface RankChipProps {
     children: default_2.ReactNode;
 }
 
+/**
+ * Apply a rename that `Tree`'s `onRename` reported. Returns a new list.
+ * @param items - the tree, top level first
+ * @param id - the renamed item
+ * @param name - its new name
+ * @returns the renamed tree
+ */
+export declare function renameTreeItem<T extends TreeLike<T> & {
+    name: string;
+}>(items: readonly T[], id: string, name: string): T[];
+
+/**
+ * A handle that resizes a panel by dragging, by the arrow keys, or back to its default size by
+ * a double-click.
+ *
+ * Put it inside the panel it resizes, which must be `position: relative`; it places itself
+ * across the named edge. It draws nothing until it has keyboard focus, like Figma's.
+ *
+ * - Drag: the size follows the pointer live (`onChange`) and settles on release (`onChangeEnd`).
+ * - Keys: the arrows along the handle's axis change the size by 1px, in the direction the
+ *   edge moves (ArrowRight grows a leading-side panel); Shift moves 10px; Home and End jump to
+ *   `min` and `max`.
+ * - Double-click resets to `defaultValue`.
+ *
+ * The cursor says which ways the edge can still move: `e-resize` or `w-resize` at the ends of
+ * the range and `ew-resize` between them; `ns-resize` on a split.
+ * @param props - Component props
+ * @param props.edge - Which panel edge the handle straddles
+ * @param props.value - The panel's size, when controlled
+ * @param props.defaultValue - The starting size when uncontrolled, and the double-click reset size
+ * @param props.min - The smallest size
+ * @param props.max - The largest size
+ * @param props.onChange - Called with every new size
+ * @param props.onChangeEnd - Called once a size settles
+ * @param props.label - The accessible name
+ * @param props.valueText - How the size is read out
+ * @returns The resize handle
+ * @example
+ * ```tsx
+ * <Box pos="relative" w={width}>
+ *     <ResizeHandle edge="end" value={width} min={240} max={500} defaultValue={240} onChange={setWidth} />
+ * </Box>
+ * ```
+ */
+export declare const ResizeHandle: default_2.ForwardRefExoticComponent<ResizeHandleProps & default_2.RefAttributes<HTMLDivElement>>;
+
+/** The size range, handed to `valueText`. */
+export declare interface ResizeHandleBounds {
+    min: number;
+    max: number;
+}
+
+/** Which edge of its panel the handle sits on. The panel must be positioned (relative). */
+export declare type ResizeHandleEdge = "start" | "end" | "top" | "bottom";
+
+/**
+ * Props for the ResizeHandle component. Every other `div` prop is forwarded.
+ */
+export declare interface ResizeHandleProps extends Omit<default_2.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "children"> {
+    /**
+     * The panel edge the handle straddles: `"end"` for a panel on the leading side of the
+     * window (its trailing edge is dragged), `"start"` for a panel on the trailing side, `"top"`
+     * or `"bottom"` for a vertical split. Start and end follow the text direction.
+     * @default "end"
+     */
+    edge?: ResizeHandleEdge;
+    /** The panel's size in pixels, when you drive it from your own state. */
+    value?: number;
+    /**
+     * The size it starts at when it keeps its own state, and the size a double-click resets
+     * to. Defaults to `min`.
+     */
+    defaultValue?: number;
+    /** The smallest size, in pixels. */
+    min: number;
+    /** The largest size, in pixels. */
+    max: number;
+    /** Called with every new size, live while dragging and on each key press. */
+    onChange?: (value: number) => void;
+    /** Called once the size settles: on pointer release, after a key press, after a reset. */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * The handle's accessible name.
+     * @default "Resize panel"
+     */
+    label?: string;
+    /**
+     * How the size is read out. Defaults to `"240 pixels"`, with `" (min)"` or `" (max)"` at
+     * the ends of the range.
+     */
+    valueText?: (value: number, bounds: ResizeHandleBounds) => string;
+}
+
+/**
+ * A find result (design/figma-spec.md 10.4): 240 x 52 with a path line, 34 without, padding
+ * 8 8 8 16, a 16px glyph, the name at 11/16 with the match at 600 and the path at 10/16 in the
+ * secondary color. The current result is blue; hover is gray.
+ *
+ * It is an `option`: put the rows in an element with `role="listbox"` and drive them from the
+ * search field with `aria-activedescendant` (give each row an `id`), so focus stays in the
+ * field. Pressing a row does not take focus from the field.
+ * @param props - Component props
+ * @returns The row
+ */
+export declare const ResultRow: default_2.ForwardRefExoticComponent<ResultRowProps & default_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the ResultRow component.
+ */
+export declare interface ResultRowProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The result's name. */
+    name: string;
+    /** The search text: its first case-insensitive occurrence in the name is drawn at 600. */
+    match?: string;
+    /** The second line: where the result lives (a page, a parent path). */
+    path?: default_2.ReactNode;
+    /** The 16 x 16 type glyph. */
+    icon?: default_2.ReactNode;
+    /** The current result (blue fill; `aria-selected`). */
+    current?: boolean;
+    /** `"component"`: both lines and the glyph in the component (purple) color. */
+    tone?: "default" | "component";
+}
+
+/** The rows and columns of the matrix, top to bottom and left to right. */
+declare const ROWS: readonly ["top", "middle", "bottom"];
+
+/**
+ * A search field (design/figma-spec.md 6.2): a filled 24px field with a leading magnifier, a clear
+ * button once there is text, and a focus ring drawn flush with the field that lingers 100ms after
+ * focus leaves.
+ *
+ * Escape clears the text; with nothing to clear it is left to bubble, so an enclosing popover
+ * can close. `autoFocus` is off by default: Figma focuses its search fields when their panel
+ * opens, and whether that is right is the caller's decision.
+ * @example
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * <SearchInput value={query} onChange={setQuery} placeholder="Search layers" />
+ * ```
+ */
+export declare const SearchInput: default_2.ForwardRefExoticComponent<SearchInputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+/** Props for SearchInput. Every other TextInput prop is passed through. */
+export declare interface SearchInputProps extends Omit<TextInputProps, "value" | "defaultValue" | "onChange" | "size" | "leftSection" | "rightSection"> {
+    /** The search text, when you drive the field from your own state. */
+    value?: string;
+    /** The text the field starts with when it keeps its own state. */
+    defaultValue?: string;
+    /** Called with the new text on every keystroke and on clear; the event is second when there is one. */
+    onChange?: ChangeHandler<string>;
+    /**
+     * `"sm"`: the 24px panel field (default). `"lg"`: the 32px quick-actions field with 13/24 text.
+     * @default "sm"
+     */
+    size?: "sm" | "lg";
+    /**
+     * A 24 x 24 control joined to the field's end (Figma's Variables table filter button): the
+     * field takes the `5px 0 0 5px` corners and the control `0 5px 5px 0`, 1px apart.
+     */
+    rightSection?: default_2.ReactNode;
+    /** The accessible name of the clear button. Defaults to the `clearSearch` label ("Clear search"). */
+    clearLabel?: string;
+}
+
+/** The contextual secondary bar, with `SecondaryToolbar.Button` and `SecondaryToolbar.Divider`. */
+export declare const SecondaryToolbar: typeof SecondaryToolbarRoot & {
+    Button: default_2.ForwardRefExoticComponent<SecondaryToolbarButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Divider: typeof SecondaryToolbarDivider;
+};
+
+/**
+ * Props for SecondaryToolbar.Button.
+ */
+export declare interface SecondaryToolbarButtonProps extends UnstyledButtonProps, ElementProps<"button"> {
+    /** A 24px glyph before the label. */
+    icon?: default_2.ReactNode;
+    /** Whether this is the current mode (`aria-pressed`): brand fill, white content. */
+    selected?: boolean;
+    /**
+     * The button opens a dropdown (Figma's "More"): a 16px chevron trails the label with 4px end
+     * padding. Wrap the button in `Menu.Target` so `aria-expanded` draws the open state.
+     */
+    dropdown?: boolean;
+    /** The visible label. Without one the button is a 24 x 24 icon button and needs an `aria-label`. */
+    children?: default_2.ReactNode;
+}
+
+/**
+ * The divider between groups of the secondary bar, full height.
+ * @returns The divider
+ */
+declare function SecondaryToolbarDivider(): default_2.JSX.Element;
+
+/**
+ * Props for the SecondaryToolbar component.
+ */
+export declare interface SecondaryToolbarProps extends BoxProps, ElementProps<"div"> {
+    /** Accessible name of the bar, such as "Vector editing". */
+    "aria-label": string;
+    /** Drop the 8px padding, for a crop-style bar whose items sit on its edges. */
+    flush?: boolean;
+    /** The bar's buttons and dividers. */
+    children?: default_2.ReactNode;
+}
+
+/**
+ * The contextual bar that appears 8px above the main toolbar while a mode is active (Figma's
+ * vector-edit and image bars): 40 tall, 13px corners, the 200 elevation, 1 x 40 dividers.
+ * One Tab stop, ArrowLeft / ArrowRight between its items. The caller positions it.
+ * @param props - Component props
+ * @param props.flush - Drop the 8px padding
+ * @param props.children - The bar's buttons and dividers
+ * @param props.className - Extra class on the root
+ * @param props.onKeyDown - Called before the roving-focus key handling
+ * @param props.onFocus - Called before the roving-focus bookkeeping
+ * @returns The bar
+ */
+declare function SecondaryToolbarRoot({ flush, children, className, onKeyDown, onFocus, ...others }: SecondaryToolbarProps): default_2.JSX.Element;
+
 /**
  * Mantine's SegmentedControl, named by the `Input.Wrapper` around it.
  *
@@ -4801,6 +5461,84 @@ export declare interface RankChipProps {
  */
 export declare function SegmentedControl(props: default_2.ComponentProps<typeof SegmentedControl_2>): default_2.JSX.Element;
 
+/** One shortcut: what it does and the keys that do it. */
+export declare interface ShortcutEntry {
+    /** What the shortcut does, such as "Frame tool". */
+    label: default_2.ReactNode;
+    /** The key caps, in order, such as `["Shift", "P"]`. */
+    keys: readonly string[];
+    /** A glyph before the label. */
+    icon?: default_2.ReactNode;
+    /** A 12/16 line under the label saying when to use it (the "essential" tab's rows). */
+    description?: default_2.ReactNode;
+    /** Draw the entry lit (#80caff): the shortcut the reader just pressed. */
+    highlighted?: boolean;
+}
+
+/** A column of shortcuts. */
+export declare interface ShortcutGroup {
+    /** The column's heading. */
+    title?: default_2.ReactNode;
+    /** The column's rows. */
+    shortcuts: readonly ShortcutEntry[];
+}
+
+/**
+ * Figma's keyboard shortcuts sheet: docked full width at the window's foot (the caller positions
+ * it), #1e1e1e in both themes, a 38px folder-tab strip and columns of shortcuts with dark key caps.
+ * Focus is not moved into it on open; ArrowLeft / ArrowRight / Home / End move between tabs and
+ * open them (automatic activation); Escape closes it (Figma's does not).
+ * @param props - Component props
+ * @param props.tabs - The tabs, left to right
+ * @param props.value - The open tab (controlled)
+ * @param props.defaultValue - The tab open at first
+ * @param props.onChange - Called with a tab's value when it opens
+ * @param props.onClose - Called by the close button and by Escape
+ * @param props.className - Extra class on the sheet
+ * @param props.style - Extra style on the sheet
+ * @returns The sheet
+ */
+export declare function ShortcutSheet({ tabs, value, defaultValue, onChange, onClose, className, style, ...others }: ShortcutSheetProps): default_2.JSX.Element;
+
+/**
+ * Props for the ShortcutSheet component.
+ */
+export declare interface ShortcutSheetProps {
+    /** The tabs, left to right. */
+    tabs: readonly ShortcutSheetTab[];
+    /** The open tab (controlled). */
+    value?: string;
+    /** The tab open at first (uncontrolled). Defaults to the first. */
+    defaultValue?: string;
+    /** Called with a tab's value when it opens. */
+    onChange?: (value: string) => void;
+    /** Called by the close button and by Escape. Without it the sheet has no close button. */
+    onClose?: () => void;
+    /** Accessible name of the sheet. Defaults to the "Keyboard shortcuts" label. */
+    "aria-label"?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+/** One tab of the sheet. */
+export declare interface ShortcutSheetTab {
+    /** The tab's identifier. */
+    value: string;
+    /** The tab's text. */
+    label: string;
+    /** The tab's columns, laid out side by side and centered. */
+    groups: readonly ShortcutGroup[];
+    /**
+     * `"list"` (the default) draws rows of 12px labels and small key caps. `"essential"` draws
+     * Figma's first tab (ma/keyboard-shortcuts-essential): a caption above the columns, each
+     * column numbered, 68px rows of 14/24 labels with their description under them, and the
+     * 31-tall 14px key caps.
+     */
+    variant?: "list" | "essential";
+    /** The 14/24 line above the columns, such as "Essential keyboard shortcuts". */
+    caption?: default_2.ReactNode;
+}
+
 /**
  * The same chart at half the height, for a series rather than a distribution.
  *
@@ -4810,7 +5548,7 @@ export declare function SegmentedControl(props: default_2.ComponentProps<typeof
  * row pitch has no second line to put them on. They are still always drawn: a
  * sparkline with no ends is a squiggle.
  *
- * The series is normalised over its own extremes, so the line reports shape and
+ * The series is normalized over its own extremes, so the line reports shape and
  * the labels report magnitude. No legend, no title, no summary line.
  *
  * The line is drawn from the start of the axis to its end, following the text
@@ -4883,20 +5621,68 @@ export declare interface SparklineRowProps {
     trailing?: default_2.ReactNode;
 }
 
+/**
+ * Two icon buttons joined into one control (design/figma-spec.md 4.5): a main action and a
+ * chevron that opens a menu of related choices. Hovering either half lights both; the pressed half
+ * darkens; the chevron shows the selected ground and a brand caret while its menu is open.
+ * @param props - Component props
+ * @param props.icon - The main half's glyph
+ * @param props.label - The main half's accessible name and tooltip, and the group's name
+ * @param props.onClick - Called when the main half is activated
+ * @param props.menuLabel - The chevron's accessible name and tooltip
+ * @param props.children - The menu the chevron opens
+ * @param props.size - md (32 tall, the default) or sm (24 tall)
+ * @param props.disabled - Disable both halves
+ * @param props.menuProps - Passed to the Mantine Menu
+ * @param props.className - Added to the group
+ * @returns The split button
+ * @example
+ * ```tsx
+ * <SplitButton icon={<PlayGlyph />} label="Present" menuLabel="Prototype view" onClick={present}>
+ *     <Menu.Item>Present</Menu.Item>
+ *     <Menu.Item>Preview</Menu.Item>
+ * </SplitButton>
+ * ```
+ */
+export declare function SplitButton({ icon, label, onClick, menuLabel, children, size, disabled, menuProps, className, ...rest }: SplitButtonProps): React.JSX.Element;
+
+/** Props for SplitButton. */
+export declare interface SplitButtonProps extends BoxProps, ElementProps<"div", "onClick"> {
+    /** The main half's glyph. */
+    icon: ReactNode;
+    /** The main half's accessible name and tooltip ("Present"). */
+    label: string;
+    /** Called when the main half is activated. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** The chevron half's accessible name and tooltip ("Prototype view"). */
+    menuLabel: string;
+    /** The menu the chevron opens: `Menu.Item`, `Menu.Label`, `Menu.Divider` ... */
+    children: ReactNode;
+    /** `md` (Figma's header size): a 32 x 32 main half and a 16 x 32 chevron. `sm`: 24 tall. @default "md" */
+    size?: "sm" | "md";
+    /** Disable both halves. */
+    disabled?: boolean;
+    /** Passed to the Mantine Menu (position, offset, opened / onChange ...). */
+    menuProps?: Omit<MenuProps, "children">;
+}
+
 /**
  * A number box that says whether the reader typed its value or inherited it.
  *
  * It is a Mantine `NumberInput` with one idea added: `undefined` means "nothing
- * has been entered here", so the control shows `defaultValue` in italics and
- * offers no reset. As soon as the reader commits a number of their own the text
- * turns upright and a reset button appears beside it, and pressing that reset
+ * has been entered here", so the control shows `defaultValue` and offers no
+ * reset. As soon as the reader commits a number of their own a reset button
+ * appears beside it, and pressing that reset
  * reports `undefined` again. A panel built from these reads at a glance as a
- * list of what has been customised and what has not.
+ * list of what has been customized and what has not.
  *
- * The number is committed when the control loses focus, not on every keystroke,
- * so what the reader is part-way through typing is never sent anywhere and the
- * control never takes the caret away mid-word. On commit the number is pulled
- * into `min`..`max` and the box is redrawn showing what was actually kept.
+ * The number is committed on Enter, Tab or blur, not on every keystroke, so
+ * what the reader is part-way through typing is never sent anywhere and the
+ * control never takes the caret away mid-word. What is typed may be arithmetic
+ * (`40*2` commits 80); text that is not a number reverts. On commit the number
+ * is pulled into `min`..`max` and the box is redrawn showing what was actually
+ * kept. ArrowUp and ArrowDown step it at once (Shift: ten steps), Escape
+ * abandons what was typed.
  *
  * What the reader types is read in their own locale, so `3,14` is 3.14 wherever
  * the comma is the decimal separator, and the locale's own digits are numbers
@@ -4913,10 +5699,9 @@ export declare interface SparklineRowProps {
  * @param props.onChange - Called with the committed number, or with `undefined` when the control is reset
  * @param props.min - The smallest number accepted
  * @param props.max - The largest number accepted
- * @param props.step - How far the steppers and the arrow keys move the number
+ * @param props.step - How far the arrow keys move the number
  * @param props.decimalScale - How many digits after the decimal separator to keep
  * @param props.suffix - A unit written after the number
- * @param props.hideControls - Whether to leave out the up and down steppers, which are left out by default
  * @param props.disabled - Whether the control cannot be used at all
  * @param props.disabledReason - One sentence saying why the control is off, drawn only while it is off
  * @param props.onFocus - Called when the control takes focus
@@ -4937,7 +5722,7 @@ export declare interface SparklineRowProps {
  * />
  * ```
  */
-export declare function StyleNumberInput({ label, value, defaultValue, onChange, min, max, step, decimalScale, suffix, hideControls, disabled, disabledReason, onFocus, onBlur, }: StyleNumberInputProps): default_2.JSX.Element;
+export declare function StyleNumberInput({ label, value, defaultValue, onChange, min, max, step, decimalScale, suffix, disabled, disabledReason, onFocus, onBlur, }: StyleNumberInputProps): default_2.JSX.Element;
 
 /**
  * Props for the StyleNumberInput component.
@@ -4952,7 +5737,7 @@ export declare interface StyleNumberInputProps {
      * nothing and the control is showing `defaultValue`.
      */
     value?: number | undefined;
-    /** What is shown, in italics, while the reader has entered nothing of their own. */
+    /** What is shown while the reader has entered nothing of their own. */
     defaultValue: number;
     /**
      * Called when the reader commits a number, and with `undefined` when they
@@ -4967,18 +5752,18 @@ export declare interface StyleNumberInputProps {
     min?: number;
     /** The largest number accepted. Anything higher is pulled down to it on commit. */
     max?: number;
-    /** How far the steppers and the arrow keys move the number each time. */
+    /** How far the arrow keys move the number each time. Shift moves ten. */
     step?: number;
     /** How many digits after the decimal separator to keep. */
     decimalScale?: number;
     /** A unit written after the number, such as `"%"` or `"px"`. */
     suffix?: string;
     /**
-     * Whether to leave out the up and down steppers.
+     * Kept so existing callers still compile; it no longer changes anything.
      *
-     * They are left out by default, because a 24px panel row has no room for
-     * them; the arrow keys still work either way.
-     * @default true
+     * Figma's number fields never draw up and down steppers, so neither does
+     * this one; the arrow keys step the number instead.
+     * @deprecated The steppers are gone at either value.
      */
     hideControls?: boolean;
     /**
@@ -5001,10 +5786,7 @@ export declare interface StyleNumberInputProps {
      * instead of announcing an unexplained unavailable control.
      *
      * Write it as a whole sentence naming what would make the control usable
-     * again. THE DEFECT THIS REPAIRS: a disabled control here used to be dimmed
-     * and silent, so a reader who could not type into it had no route at all to
-     * learning why -- spec:6641 asks for the reason to travel with the ink, and
-     * until now this component had nowhere to put it.
+     * again.
      */
     disabledReason?: string;
     /** Called when the control takes focus. Forwarded unchanged. */
@@ -5021,12 +5803,15 @@ export declare interface StyleNumberInputProps {
 /**
  * A dropdown that says whether the reader chose its value or inherited it.
  *
+ * It is drawn as Figma's outlined select trigger (the theme's Select), and its
+ * list is the dark listbox, opening over the trigger with the current choice
+ * on top of it (design/figma-spec.md 6.4, 6.5).
+ *
  * It is a Mantine `Select` with one idea added: `undefined` means "nothing has
- * been chosen here", so the control shows `defaultValue` in italics and offers
- * no reset. As soon as the reader picks something the text turns upright and a
- * reset button appears beside it, and pressing that reset reports `undefined`
+ * been chosen here", so the control shows `defaultValue` and offers no reset.
+ * As soon as the reader picks something a reset button appears beside it, and pressing that reset reports `undefined`
  * again. A panel built from these reads at a glance as a list of what has been
- * customised and what has not.
+ * customized and what has not.
  *
  * Reach for Mantine's own `Select` for an ordinary form. Reach for this one
  * where a value has a sensible default that the reader is overriding rather
@@ -5083,7 +5868,7 @@ export declare interface StyleSelectProps {
      * chosen anything and the control is showing `defaultValue`.
      */
     value?: string | undefined;
-    /** What is shown, in italics, while the reader has chosen nothing of their own. */
+    /** What is shown while the reader has chosen nothing of their own. */
     defaultValue: string;
     /** The choices offered, in the order they should be listed. */
     options: StyleSelectOption[];
@@ -5115,11 +5900,7 @@ export declare interface StyleSelectProps {
      * of announcing an unexplained unavailable control.
      *
      * Write it as a whole sentence naming what would make the control usable
-     * again, not as a restatement that it is off. THE DEFECT THIS REPAIRS: a
-     * disabled control here used to be dimmed and silent, so a reader who could
-     * not press it had no route at all to learning why -- spec:6641 asks for
-     * the reason to travel with the ink, and until now this component had
-     * nowhere to put it.
+     * again, not as a restatement that it is off.
      */
     disabledReason?: string;
     /** Called when the control takes focus. Forwarded unchanged. */
@@ -5135,6 +5916,147 @@ export declare interface StyleSelectProps {
  */
 export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#61D095FF", "#F7B731FF", "#9B59B6FF", "#5B8FF980", "#FF6B6B80", "#61D09580", "#F7B73180", "#9B59B680"];
 
+/**
+ * One toast: Figma's pill notification (design/figma-spec.md 8.6). Render it
+ * yourself where it should sit, or let `ToastProvider` and `useToast` place,
+ * time and replace it.
+ * @param props - Component props
+ * @param props.message - The message
+ * @param props.icon - An optional 16px glyph before the message
+ * @param props.action - An optional action button
+ * @param props.withCloseButton - Show the dismiss X
+ * @param props.onClose - Called when the dismiss X is pressed
+ * @param props.closeLabel - The dismiss button's accessible name
+ * @returns The toast
+ */
+export declare const Toast: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLDivElement>>;
+
+/** A button in the toast that acts on what the message is about. */
+export declare interface ToastAction {
+    /** The button's text, such as "Copy to clipboard". */
+    label: string;
+    /** What the button does. The toast stays up until it is dismissed. */
+    onClick: (event: MouseEvent_2<HTMLButtonElement>) => void;
+}
+
+/** The toast controls `useToast` returns. */
+export declare interface ToastApi {
+    /** Show a toast, replacing the one on screen and restarting the timer. */
+    show: (toast: ReactNode | ToastOptions) => void;
+    /** Take the toast down. */
+    hide: () => void;
+}
+
+/** What `useToast().show` takes: a message, or a message with its extras. */
+export declare interface ToastOptions extends Omit<ToastProps, "onClose" | "message"> {
+    /** The message. */
+    message: ReactNode;
+    /**
+     * How long it stays, in ms; `null` keeps it until it is dismissed or
+     * replaced. Defaults to Figma's rule: about 3 s for a message under 20
+     * characters, about 6 s for a longer one, and never for a toast with an
+     * action.
+     */
+    duration?: number | null;
+}
+
+/**
+ * Props for Toast: the message and its extras, plus any Mantine `Notification`
+ * prop except the ones the toast owns.
+ */
+export declare interface ToastProps extends Omit<NotificationProps, "children" | "title" | "icon" | "onClose" | "withCloseButton" | "role"> {
+    /** The message, such as "Zoom to selection". */
+    message: ReactNode;
+    /** An optional 16px glyph before the message. */
+    icon?: ReactNode;
+    /** An optional action button after the message. */
+    action?: ToastAction;
+    /** Show the dismiss X at the end. @default false */
+    withCloseButton?: boolean;
+    /** Called when the dismiss X is pressed. */
+    onClose?: () => void;
+    /** The dismiss button's accessible name. @default "Dismiss" */
+    closeLabel?: string;
+}
+
+/**
+ * The one toast the page shows (design/figma-spec.md 8.6): centered
+ * horizontally near the bottom of the window. Only one exists; a new one
+ * replaces the text and restarts the timer. It appears and goes in one frame,
+ * and hovering it does not pause the timer. Wrap the application once and call
+ * `useToast()` anywhere inside.
+ * @param props - Component props
+ * @param props.children - The part of the tree that may show toasts
+ * @param props.bottom - The distance from the window's bottom edge, in px
+ * @param props.zIndex - The layer the toast draws at
+ * @returns The provider and, while a toast is up, the toast
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *     <App />
+ * </ToastProvider>
+ * // anywhere inside:
+ * const toast = useToast();
+ * toast.show("Zoom to selection");
+ * ```
+ */
+export declare function ToastProvider({ children, bottom, zIndex }: ToastProviderProps): JSX.Element;
+
+/** Props for ToastProvider. */
+export declare interface ToastProviderProps {
+    /** The part of the tree that may show toasts. Usually the whole application. */
+    children: ReactNode;
+    /**
+     * The distance from the window's bottom edge to the toast's, in px. Figma
+     * keeps the toast 16px above its bottom toolbar; the default clears a
+     * 60px toolbar the same way.
+     * @default 76
+     */
+    bottom?: number;
+    /** The layer the toast draws at. @default 1300 */
+    zIndex?: number;
+}
+
+/**
+ * A 24 x 24 icon toggle (design/figma-spec.md 4.4): lock aspect ratio, use as mask, visibility.
+ * @param props - Component props
+ * @returns The toggle
+ * @example
+ * ```tsx
+ * <ToggleIconButton label="Lock aspect ratio" icon={<UiGlyph name="unlock" />} checkedIcon={<UiGlyph name="lock" />} />
+ * ```
+ */
+export declare const ToggleIconButton: ForwardRefExoticComponent<ToggleIconButtonProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Props for ToggleIconButton.
+ *
+ * Every ActionIcon prop but `variant`, `children` and `onChange` is accepted and reaches the
+ * button (`size`, `disabled`, `className`, a `data-` attribute ...).
+ */
+export declare interface ToggleIconButtonProps extends Omit<ActionIconProps, "variant" | "children">, ElementProps<"button", "color" | "onChange" | keyof ActionIconProps> {
+    /** Whether the toggle is on (controlled). */
+    checked?: boolean;
+    /** Whether the toggle starts on (uncontrolled). @default false */
+    defaultChecked?: boolean;
+    /** Called with the new state when the toggle flips. */
+    onChange?: (checked: boolean) => void;
+    /** The accessible name, and the tooltip text. */
+    label: string;
+    /** The glyph. */
+    icon: ReactNode;
+    /** The glyph drawn while on, for a `swap` toggle (eye / eye closed). */
+    checkedIcon?: ReactNode;
+    /**
+     * `fill` (default): on is the selected ground with a brand glyph (lock aspect ratio, use as
+     * mask). `swap`: never filled, on swaps the glyph (the visibility eye).
+     * @default "fill"
+     */
+    variant?: "fill" | "swap";
+    /** Show the tooltip. @default true */
+    withTooltip?: boolean;
+}
+
 /**
  * A single boolean on a row of its own, packed tighter than every other row
  * type.
@@ -5146,12 +6068,13 @@ export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#6
  * 1. **The label is the only word on the row, and the verb is deleted from
  *    it.** `Show labels` is `Labels`; `Animate transitions` is `Transitions`.
  *    The checkbox already says "show", so the word is spent on what is shown.
- * 2. **Toggles pack tighter than everything else**, at a 24px pitch rather than
- *    the 32px every other row uses, because a 16px control needs no air around
- *    it to stay legible.
+ * 2. **It is Figma's checkbox row**: 32px tall like every other property row,
+ *    the neutral (panel) checkbox that stays gray when checked, and the word
+ *    8px after the box (design/figma-spec.md 5.10).
  *
- * The control is a Mantine `Checkbox` at 16px, or a Mantine `Switch` at 28x16
- * when the boolean is a live mode rather than an option. Both are real inputs,
+ * The control is a Mantine `Checkbox` at 16px (`variant="neutral"`), or a
+ * Mantine `Switch` at 32x16 when the boolean is a live mode rather than an
+ * option. Both are real inputs,
  * so Tab reaches them, Space toggles them, and a screen reader reads the state
  * out; clicking the word works as well as clicking the box.
  *
@@ -5162,7 +6085,7 @@ export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#6
  * @param props.checked - Whether the toggle is on, when driven from your own state
  * @param props.defaultChecked - Whether the toggle starts on, when the row keeps its own state
  * @param props.onChange - Called with the new state first and the event that caused it second
- * @param props.control - Which control to draw: a 16px checkbox, or a 28x16 switch for a live mode
+ * @param props.control - Which control to draw: a 16px checkbox, or a 32x16 switch for a live mode
  * @param props.trailing - What to put in the fixed 24px slot at the end of the row
  * @param props.disabled - Whether the toggle can be changed
  * @param props.disabledReason - One sentence saying why the toggle is off, drawn only while it is off
@@ -5194,8 +6117,8 @@ export declare function ToggleRow({ label, checked, defaultChecked, onChange, co
  * That is a rule about the design rather than about the runtime, so the group
  * holds the line where the design is edited: it warns on the console in a
  * development build when it is given fewer than two children, and renders them
- * anyway. The pitch needs no gap -- each row is exactly 24px tall, so a plain
- * column is already the 24px pitch.
+ * anyway. The pitch needs no gap -- each row is exactly 32px tall, so a plain
+ * column is already the row pitch.
  *
  * The rows are wrapped in a group so a screen reader announces them as one set
  * rather than as loose checkboxes. Name it: point `labelledBy` at the heading
@@ -5304,7 +6227,7 @@ export declare interface ToggleRowProps {
      * Whether the toggle can be changed.
      *
      * A disabled row keeps its place and its word, drops to the dimmed text
-     * colour that Mantine's own disabled controls use, and is announced as
+     * color that Mantine's own disabled controls use, and is announced as
      * unavailable rather than merely looking it.
      */
     disabled?: boolean;
@@ -5317,12 +6240,9 @@ export declare interface ToggleRowProps {
      * control's accessible description, so the reason reaches a pointer user
      * and a screen reader user alike.
      *
-     * THE DEFECT THIS REPAIRS, and it was the sharper half of the two: this row
-     * used to hardcode its tooltip as `wrapperProps = {title: label}`, so a
-     * call site could not append a reason even by hand. A disabled toggle was
-     * therefore dimmed and permanently unexplained, which is what spec:6641
-     * forbids. The caller supplies the sentence; the library never invents one,
-     * because only the call site knows what would turn the control back on.
+     * Write it as a whole sentence naming what would make the toggle usable.
+     * The library never invents one: only the caller knows what would turn the
+     * control back on.
      */
     disabledReason?: string;
     /**
@@ -5332,10 +6252,7 @@ export declare interface ToggleRowProps {
      * The row draws a filled attribute glyph beside its word -- the same filled
      * glyph `PanelField` uses to say the same thing -- so a panel can say "this
      * follows the data" without spending a row on a fixed-or-by-attribute
-     * switch. A boolean channel can be bound just as a numeric one can, and
-     * until now `PanelField` was the only control in the library able to say
-     * so, which is why a bound boolean had to be drawn as a number field or not
-     * drawn at all.
+     * switch.
      * @default false
      */
     bound?: boolean;
@@ -5361,7 +6278,7 @@ export declare interface ToggleRowProps {
  * it.
  *
  * Reach for it when a setting is a yes or no that brings its own settings with
- * it -- a glow with a radius and a colour, an outline with a width, a legend
+ * it -- a glow with a radius and a color, an outline with a width, a legend
  * with a position. Turning the feature off takes its controls off the screen,
  * so a panel shows only what is currently in play.
  *
@@ -5437,7 +6354,7 @@ export declare interface ToggleWithContentProps {
      * Whether the toggle can be changed.
      *
      * A disabled toggle keeps its place and its word, drops to the dimmed text
-     * colour Mantine's own disabled controls use, and is announced as
+     * color Mantine's own disabled controls use, and is announced as
      * unavailable rather than merely looking it. Controls already revealed stay
      * revealed; disable them yourself if they should not be touched either.
      */
@@ -5451,12 +6368,9 @@ export declare interface ToggleWithContentProps {
      * accessible description, so the reason reaches a pointer user and a screen
      * reader user alike.
      *
-     * THE DEFECT THIS REPAIRS: a feature that cannot be turned on yet used to
-     * be drawn as a dimmed checkbox with nothing to say for itself, which reads
-     * as a broken control rather than as an unfinished feature. spec:6641 asks
-     * for the one reason to travel with the disabled ink; until now this
-     * component had nowhere to put it. The caller supplies the sentence -- only
-     * the call site knows what would turn the feature back on.
+     * Write it as a whole sentence naming what would make the toggle usable.
+     * The library never invents one: only the caller knows what would turn the
+     * feature back on.
      */
     disabledReason?: string;
     /**
@@ -5466,9 +6380,7 @@ export declare interface ToggleWithContentProps {
      * The toggle draws a filled attribute glyph beside its word -- the same
      * filled glyph `PanelField` uses to say the same thing -- so a panel can
      * say "this follows the data" without spending a row on a
-     * fixed-or-by-attribute switch. A boolean channel can be bound just as a
-     * numeric one can, and until now `PanelField` was the only control in the
-     * library able to say so.
+     * fixed-or-by-attribute switch.
      * @default false
      */
     bound?: boolean;
@@ -5505,6 +6417,166 @@ export declare interface ToggleWithContentProps {
  */
 export declare function toHexaColor(hex: string, opacity: number): string;
 
+/** The floating editor toolbar, with `Toolbar.Divider`. */
+export declare const Toolbar: typeof ToolbarRoot & {
+    Divider: typeof ToolbarDivider;
+};
+
+/**
+ * The toolbar's 1px divider, full height (48).
+ * @returns The divider
+ */
+declare function ToolbarDivider(): default_2.JSX.Element;
+
+/**
+ * Props for the Toolbar component.
+ */
+export declare interface ToolbarProps extends BoxProps, ElementProps<"div"> {
+    /** Accessible name of the toolbar. Defaults to the "Tools" label. */
+    "aria-label"?: string;
+    /**
+     * Pin the toolbar to the bottom center of the window, 12px up (Figma's position). Leave it off
+     * to position the toolbar yourself.
+     */
+    floating?: boolean;
+    /** Tool groups, tool buttons, dividers and a mode switch. */
+    children?: default_2.ReactNode;
+}
+
+/**
+ * The floating editor toolbar: a white (dark #2c2c2c) bar 48 tall with 13px corners and the
+ * 200 elevation, holding tool buttons, tool groups with flyouts, dividers and a
+ * `SegmentedControl variant="toolbar"` mode switch.
+ *
+ * It is one Tab stop: focus lands on the selected tool, and ArrowLeft / ArrowRight / Home / End
+ * move between tools, chevrons and the mode radios.
+ * @param props - Component props
+ * @param props.floating - Pin the toolbar to the bottom center of the window
+ * @param props.children - Tool groups, tool buttons, dividers and a mode switch
+ * @param props.className - Extra class on the root
+ * @param props.onKeyDown - Called before the roving-focus key handling
+ * @param props.onFocus - Called before the roving-focus bookkeeping
+ * @returns The toolbar
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Editor" floating>
+ *     <ToolGroup label="Shape tools" tools={shapes} activeTool={tool} onToolChange={setTool} />
+ *     <Toolbar.Divider />
+ *     <SegmentedControl variant="toolbar" data={modes} />
+ * </Toolbar>
+ * ```
+ */
+declare function ToolbarRoot({ floating, children, className, onKeyDown, onFocus, ...others }: ToolbarProps): default_2.JSX.Element;
+
+/**
+ * A 32 x 32 toolbar tool (Figma's toolbelt button): transparent at rest, `--cm-bg-hover` under the
+ * pointer, the brand fill when selected, a 1px inside focus ring (a double ring when selected).
+ * The tooltip opens above with the shortcut after the name.
+ * @param props - Component props
+ * @param props.label - The tool's name
+ * @param props.icon - The tool's glyph
+ * @param props.shortcut - The keyboard shortcut shown in the tooltip
+ * @param props.selected - Whether this is the current tool
+ * @param props.tooltipPosition - Where the tooltip opens
+ * @returns The tool button
+ */
+export declare const ToolButton: default_2.ForwardRefExoticComponent<ToolButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Props for the ToolButton component.
+ */
+export declare interface ToolButtonProps extends Omit<UnstyledButtonProps, "children">, Omit<ElementProps<"button">, "children"> {
+    /** The tool's name: its accessible name and its tooltip. */
+    label: string;
+    /** The tool's glyph, drawn in a 24px box. */
+    icon: default_2.ReactNode;
+    /** The keyboard shortcut shown in the tooltip, such as `"F"`. */
+    shortcut?: string;
+    /**
+     * Whether this is the current tool (`aria-pressed`): a brand fill with a white glyph. Leave it
+     * undefined for a button that runs an action rather than picking a tool.
+     */
+    selected?: boolean;
+    /** Where the tooltip opens. Defaults to above, as on Figma's bottom toolbar. */
+    tooltipPosition?: TooltipProps["position"];
+}
+
+/**
+ * A tool and its flyout (Figma's tool group): the face is the LAST tool picked from the flyout,
+ * and a 16 x 32 chevron 1px after it opens a dark menu 4px above, start-aligned to the chevron,
+ * whose rows are radios with a check on the current face. Picking a row selects the tool, makes
+ * it the face and closes the menu.
+ * @param props - Component props
+ * @param props.label - The chevron's name, such as "Shape tools"
+ * @param props.tools - The tools of the group
+ * @param props.activeTool - The toolbar's current tool
+ * @param props.onToolChange - Called with a tool's value when it is picked
+ * @param props.defaultFace - The tool the face shows until one is picked
+ * @param props.chevronProps - Extra attributes for the chevron button
+ * @returns The tool group
+ */
+export declare function ToolGroup({ label, tools, activeTool, onToolChange, defaultFace, chevronProps, }: ToolGroupProps): default_2.JSX.Element;
+
+/**
+ * Props for the ToolGroup component.
+ */
+export declare interface ToolGroupProps {
+    /** The chevron's accessible name and tooltip, and the flyout's name, such as "Shape tools". */
+    label: string;
+    /** The tools of the group, in flyout order. */
+    tools: readonly ToolItem[];
+    /** The toolbar's current tool. When it is one of this group's tools, the face shows it selected. */
+    activeTool?: string | null;
+    /** Called with a tool's value when the face is clicked or a flyout row is picked. */
+    onToolChange?: (value: string) => void;
+    /** The tool the face shows until one is picked. Defaults to the first tool. */
+    defaultFace?: string;
+    /** Extra attributes for the chevron button, such as a `data-testid` or a forced `data-state`. */
+    chevronProps?: default_2.ComponentPropsWithoutRef<"button"> & {
+        [data: `data-${string}`]: string | undefined;
+    };
+}
+
+/** One tool of a group: what the face and the flyout row show. */
+export declare interface ToolItem {
+    /** The tool's identifier, handed to `onToolChange`. */
+    value: string;
+    /** The tool's name. */
+    label: string;
+    /** The tool's glyph (drawn in a 24px box). */
+    icon: default_2.ReactNode;
+    /** The keyboard shortcut shown in the tooltip and the flyout, such as `"R"`. */
+    shortcut?: string;
+}
+
+/**
+ * A tooltip label with its keyboard shortcut on the same line (design/figma-spec.md
+ * 8.3): the shortcut sits 12px after the label in the tooltip's secondary text
+ * color, as Figma's "Align left  Alt+A". Pass it as a Tooltip's `label`. The
+ * tooltip's `aria-describedby` reads both.
+ * @param props - Component props
+ * @param props.label - What the control does
+ * @param props.shortcut - Its keyboard shortcut
+ * @returns The label and shortcut
+ * @example
+ * ```tsx
+ * <Tooltip label={<TooltipShortcut label="Align left" shortcut="Alt+A" />}>
+ *     <ActionIcon aria-label="Align left">...</ActionIcon>
+ * </Tooltip>
+ * ```
+ */
+export declare function TooltipShortcut({ label, shortcut }: TooltipShortcutProps): JSX.Element;
+
+/**
+ * Props for TooltipShortcut.
+ */
+export declare interface TooltipShortcutProps {
+    /** What the control does, such as "Align left". */
+    label: ReactNode;
+    /** Its keyboard shortcut, such as "Alt+A". */
+    shortcut: ReactNode;
+}
+
 /**
  * The fixed 24px slot every panel row ends with.
  *
@@ -5513,8 +6585,8 @@ export declare function toHexaColor(hex: string, opacity: number): string;
  * and common: it is what makes a row with no extra control end level with a row
  * that has one.
  *
- * The panel this library lays out is 280px wide and spends it as
- * `16 + 108 + 8 + 108 + 8 + 24 + 8`: leading padding, two fields with a gutter
+ * The panel this library lays out is 240px wide and spends it as
+ * `16 + 88 + 8 + 88 + 8 + 24 + 8`: leading padding, two fields with a gutter
  * between them, a gap, this slot, and trailing padding. Dropping the slot when
  * it is empty is what breaks that.
  * @param props - Component props
@@ -5540,6 +6612,181 @@ export declare interface TrailingSlotProps {
     children?: default_2.ReactNode;
 }
 
+/**
+ * A layer tree with Figma's rows and the WAI-ARIA tree-view keyboard model
+ * (design/figma-spec.md 10.1).
+ *
+ * The tree renders; the caller owns the data. Selection and expansion are controlled or
+ * uncontrolled; renaming and moving are reported through `onRename` and `onMove`.
+ *
+ * Keyboard (one Tab stop, roving focus): ArrowUp / ArrowDown move; ArrowRight opens a closed
+ * parent or moves to its first child; ArrowLeft closes an open parent or moves to the parent;
+ * Home / End; type-ahead; Enter or Space selects (Shift extends, Control / Command toggles); `*`
+ * opens every sibling; F2 renames; Alt+L closes everything; with `onMove`, Alt+ArrowUp /
+ * Alt+ArrowDown move the focused item one place among its siblings.
+ * Pointer: click selects (Shift range, Control / Command toggle); the caret opens one row;
+ * double-click renames; drag a row to move it.
+ * @param props - Component props
+ * @param props.items - The items or pages
+ * @param props.label - The accessible name
+ * @param props.selected - Selected ids (controlled)
+ * @param props.defaultSelected - Selected ids to start with
+ * @param props.onSelect - Called with the new selection
+ * @param props.expanded - Expanded ids (controlled)
+ * @param props.defaultExpanded - Expanded ids to start with
+ * @param props.onExpandedChange - Called with the expanded ids
+ * @param props.multiselect - Allow several selected rows
+ * @param props.onRename - Called with a new name; turns renaming on
+ * @param props.onMove - Called when a row is dropped somewhere new or moved from the keyboard
+ * @param props.stickyRoots - Pin expanded top-level rows while scrolling
+ * @param props.height - The scrolling height when virtualized
+ * @param props.renameLabel - The rename field's accessible name
+ * @returns The tree
+ */
+export declare function Tree({ items, label, selected, defaultSelected, onSelect, expanded, defaultExpanded, onExpandedChange, multiselect, onRename, onMove, stickyRoots, height, renameLabel, }: TreeProps): default_2.JSX.Element;
+
+/**
+ * One row of a layer tree, as Figma draws it (design/figma-spec.md 10.1): 32 tall, a 16px caret
+ * slot and a 16px type glyph indented 24px per level, the name at 11/32, and the trailing
+ * toggles. Hover, selection and the selected-parent band are pseudo-element fills behind the
+ * content. It is a `treeitem`; `Tree` renders it with the keyboard model, but it can be drawn on
+ * its own (a static preview, a story).
+ * @param props - Component props
+ * @returns The row
+ */
+export declare const TreeItem: default_2.ForwardRefExoticComponent<TreeItemProps & default_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the TreeItem component: one row of a layer tree.
+ */
+export declare interface TreeItemProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The visible name. */
+    name: string;
+    /** The 16 x 16 type glyph. */
+    icon?: default_2.ReactNode;
+    /** Depth, 1 for a top-level row. Each level indents 24px. */
+    level?: number;
+    /** Whether the row has children (draws the caret). */
+    hasChildren?: boolean;
+    /** Whether its children are shown. */
+    expanded?: boolean;
+    /** Whether the row is selected. */
+    selected?: boolean;
+    /** The fill it draws; see Tree. Defaults to `selected` or `none`. */
+    tint?: TreeRowTint;
+    /** `"component"`: purple name and glyph. */
+    tone?: "default" | "component";
+    /** A hidden layer: tertiary name and glyph. */
+    dimmed?: boolean;
+    /** Weight 600 and a primary glyph. Defaults to true for a top-level row with children. */
+    strong?: boolean;
+    /** The trailing toggles, revealed on hover or focus. */
+    actions?: default_2.ReactNode;
+    /** 1-based position among its siblings, for assistive technology. */
+    posInSet?: number;
+    /** How many siblings it has, for assistive technology. */
+    setSize?: number;
+    /** Drawn in place of the name, e.g. an InlineRename. */
+    nameSlot?: default_2.ReactNode;
+    /** Called when the caret is clicked. */
+    onExpandToggle?: (event: default_2.MouseEvent) => void;
+}
+
+/** Anything a tree can hold: an id, and optionally children of the same shape. */
+declare interface TreeLike<T> {
+    id: string;
+    children?: readonly T[];
+}
+
+/** Where a drop lands. `index` counts the parent's children with the moved item already removed. */
+export declare interface TreeMove {
+    id: string;
+    parentId: string | null;
+    index: number;
+}
+
+/** One item of a Tree. Nest items through `children`. */
+export declare interface TreeNodeData {
+    /** Stable, unique across the whole tree. */
+    id: string;
+    /** The visible name; also the item's accessible name and its type-ahead key. */
+    name: string;
+    /** The 16 x 16 type glyph drawn before the name. */
+    icon?: default_2.ReactNode;
+    /**
+     * The item's children. An item with a `children` array (even an empty one) is a container
+     * that other items can be dropped into; one without is a leaf.
+     */
+    children?: readonly TreeNodeData[];
+    /** `"component"` draws the name and glyph in the component (purple) color. */
+    tone?: "default" | "component";
+    /** A hidden layer: the name and glyph draw in the tertiary color. */
+    dimmed?: boolean;
+    /**
+     * Draw the name at weight 600 with a primary-color glyph. Defaults to true for a top-level
+     * item with a `children` array, even an empty one (Figma's top-level frames), false otherwise.
+     */
+    strong?: boolean;
+    /**
+     * The row's trailing toggles (lock, eye): the caller's own controls. They stay hidden until
+     * the row is hovered or focused; a control with `aria-pressed="true"`, `aria-checked="true"`
+     * or `data-pinned` stays visible.
+     */
+    actions?: default_2.ReactNode;
+}
+
+/**
+ * Props for the Tree component.
+ */
+export declare interface TreeProps {
+    /** The items, nested through `children`. */
+    items: readonly TreeNodeData[];
+    /** The tree's accessible name. Defaults to "Layers". */
+    label?: string;
+    /** Selected ids (controlled). */
+    selected?: readonly string[];
+    /** Selected ids to start with (uncontrolled). */
+    defaultSelected?: readonly string[];
+    /** Called with the new selection. */
+    onSelect?: (ids: string[], event?: default_2.SyntheticEvent) => void;
+    /** Expanded ids (controlled). */
+    expanded?: readonly string[];
+    /** Expanded ids to start with (uncontrolled). */
+    defaultExpanded?: readonly string[];
+    /** Called with the new set of expanded ids. */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Allow several selected rows (Shift and Control/Command). Default true. */
+    multiselect?: boolean;
+    /**
+     * Called with a new name. Giving it turns on renaming: F2 or a double-click opens an
+     * InlineRename in place of the name.
+     */
+    onRename?: (id: string, name: string) => void;
+    /**
+     * Called when a row is dropped somewhere new, or moved one place among its siblings with
+     * Alt+ArrowUp / Alt+ArrowDown. `index` counts the new parent's children with the moved item
+     * already removed. Giving it makes rows draggable and turns on the keyboard move; the tree
+     * never moves data itself, and focus stays on the moved item once the caller has moved it.
+     */
+    onMove?: (move: TreeMove) => void;
+    /** Keep an expanded top-level row pinned while its children scroll (not while virtualized). */
+    stickyRoots?: boolean;
+    /** The scrolling height. Needed for virtualization (over 200 visible rows); default 480. */
+    height?: number | string;
+    /** The accessible name of the rename field. Defaults to "Layer name". */
+    renameLabel?: string;
+}
+
+/**
+ * The fill a row draws (design/figma-spec.md 10.1):
+ * - `selected`: a lone selected row;
+ * - `first` / `middle` / `last`: a run of adjacent selected rows, drawn as one block;
+ * - `parent`: a selected, expanded parent (its pill runs into the band below);
+ * - `child` / `child-last`: the band behind a selected parent's visible descendants;
+ * - `none`.
+ */
+export declare type TreeRowTint = "none" | "selected" | "first" | "middle" | "last" | "parent" | "child" | "child-last";
+
 /**
  * Every shared UI glyph name.
  */
@@ -5552,7 +6799,7 @@ export declare const UI_GLYPH_NAMES: readonly UiGlyphName[];
  * title and the accessible name.
  * @param props - Component props
  * @param props.name - Which shared UI glyph to draw
- * @param props.size - Drawn size in pixels, defaulting to the 14px glyph size
+ * @param props.size - Drawn size in pixels, defaulting to the 12px nominal glyph size
  * @returns The UI glyph SVG
  */
 export declare function UiGlyph({ name, size }: UiGlyphProps): default_2.JSX.Element;
@@ -5561,7 +6808,7 @@ export declare function UiGlyph({ name, size }: UiGlyphProps): default_2.JSX.Ele
  * Shared UI glyphs: the chevrons, the doors and the status marks the row types
  * draw outside a field's slot.
  */
-export declare type UiGlyphName = "chevronDown" | "chevronRight" | "chevronLeft" | "close" | "plus" | "minus" | "gear" | "warning" | "check" | "eye" | "refresh" | "copy" | "pin" | "keepOpen" | "info" | "reset";
+export declare type UiGlyphName = "chevronDown" | "chevronRight" | "chevronLeft" | "close" | "plus" | "minus" | "gear" | "warning" | "check" | "eye" | "refresh" | "copy" | "pin" | "keepOpen" | "info" | "reset" | "caretDown" | "caretRight" | "dash" | "eyeClosed" | "lock" | "unlock" | "search" | "settings" | "link" | "unlink" | "eyedropper" | "rotate" | "flipHorizontal" | "flipVertical" | "alignLeft" | "alignCenterH" | "alignRight" | "alignTop" | "alignCenterV" | "alignBottom" | "more" | "help" | "frame" | "rectangle" | "ellipse" | "text" | "component" | "group";
 
 /**
  * Props for the UiGlyph component.
@@ -5569,7 +6816,7 @@ export declare type UiGlyphName = "chevronDown" | "chevronRight" | "chevronLeft"
 export declare interface UiGlyphProps {
     /** Which shared UI glyph to draw. */
     name: UiGlyphName;
-    /** Drawn size in pixels. Defaults to the 14px glyph size. */
+    /** Drawn size in pixels. Defaults to the 12px nominal glyph size. */
     size?: number;
 }
 
@@ -5595,7 +6842,7 @@ export declare function useActualColorScheme(fallback?: "light" | "dark"): "ligh
  * after every unaccented one and sorts "item 10" before "item 9". A collator
  * sorts the way a reader of that language expects.
  * @param options - Collation options, passed straight to `Intl.Collator`; `{numeric: true}` is usually what a column of values wants
- * @returns A memoised `Intl.Collator` for the active locale
+ * @returns A memoized `Intl.Collator` for the active locale
  * @example
  * ```tsx
  * const collator = useCollator({numeric: true});
@@ -5641,7 +6888,7 @@ export declare function useLocale(): string;
  * there is none. The formatter is rebuilt only when the locale or the options
  * change, so it is safe to call on every row of a long list.
  * @param options - Formatting options, passed straight to `Intl.NumberFormat`
- * @returns A memoised `Intl.NumberFormat` for the active locale
+ * @returns A memoized `Intl.NumberFormat` for the active locale
  * @example
  * ```tsx
  * const formatter = useNumberFormatter({maximumFractionDigits: 2});
@@ -5715,6 +6962,78 @@ export declare function usePopoutManager(): Pick<PopoutManagerContextValue, "clo
  */
 export declare function usePopoutRegion(): string | null;
 
+/**
+ * The page's toast: `show` a message (it replaces any toast on screen) or
+ * `hide` it. Call it inside a `ToastProvider`.
+ * @returns The toast controls
+ */
+export declare function useToast(): ToastApi;
+
+/**
+ * A value bound to a design variable (design/figma-spec.md 6.6).
+ *
+ * In a number field the value becomes a 20px pill (`--cm-bg`, 1px `--cm-border`, radius 5) after
+ * the field's 24px glyph slot; hovering the pill shows the variable's name and value, and
+ * hovering the field shows a 16px Detach button at its end. With `swatch` it is the bound fill
+ * row: one 156 x 24 button with a 14px chit and the name, which gains a 24px Detach button on
+ * hover. `kind="property"` draws the component-property chip.
+ *
+ * With `onValueCommit` the rest of a bound number field is an input: typing a literal there and
+ * pressing Enter reports it, so the caller can detach and apply it.
+ * @param props - the variable, its handlers and the form to draw
+ * @returns the bound field, fill row or property chip
+ * @example
+ * ```tsx
+ * <VariablePill glyph="R" name="rsu/radius-sm" value="4" onDetach={detach} onClick={openPicker} />
+ * <VariablePill swatch="#0d99ff" name="rsu/brand" onDetach={detach} onClick={openPicker} />
+ * ```
+ */
+export declare function VariablePill(props: VariablePillProps): default_2.JSX.Element;
+
+/** Props for VariablePill. */
+export declare interface VariablePillProps {
+    /** The variable's name ("rsu/radius-sm"). */
+    name: string;
+    /** The variable's resolved value, shown in the pill and in its tooltip ("4"). */
+    value?: string;
+    /**
+     * Called by the Detach (broken link) button, which appears while the field is hovered or
+     * focused. Without it there is no Detach button.
+     */
+    onDetach?: ActivationHandler;
+    /** Called when the pill (or the fill row) is clicked: reopen the variable picker here. */
+    onClick?: ActivationHandler;
+    /**
+     * A color: draws the bound FILL row instead of a number field -- one 156 x 24 button with
+     * a 14px chit and the variable's name.
+     */
+    swatch?: string;
+    /**
+     * `"variable"` (default) or `"property"`: a layer property bound to a component property,
+     * drawn as a chip on the component tint.
+     */
+    kind?: "variable" | "property";
+    /** A 24px leading slot for the bound number field: the field's glyph or letter. */
+    glyph?: default_2.ReactNode;
+    /** The field's width. @default 88 for a number field, 156 for a fill row */
+    width?: number | string;
+    /** The Detach button's accessible name. @default "Detach variable" */
+    detachLabel?: string;
+    /**
+     * Makes the rest of a bound number field editable, as in Figma: typing after the pill and
+     * pressing Enter (or leaving the field) reports the text, and the caller replaces the binding
+     * with that literal (detach, then apply). Escape abandons the text. Without it the field after
+     * the pill is empty space.
+     */
+    onValueCommit?: ChangeHandler<string>;
+    /** The accessible name of the input after the pill. @default "Value" */
+    valueLabel?: string;
+    /** Extra class on the outer element. */
+    className?: string;
+    /** Extra style on the outer element. */
+    style?: default_2.CSSProperties;
+}
+
 export { }
 
 
@@ -5723,17 +7042,20 @@ declare module "@mantine/core" {
      * The values this package puts on `theme.other`.
      *
      * Everything here is optional: a consumer who writes their own
-     * `createTheme({ other: {...} })` is not required to carry the panel grid,
-     * and reading `theme.other.panelGrid` is therefore a narrowed read.
+     * `createTheme({ other: {...} })` is not required to carry them, and reading
+     * them is therefore a narrowed read.
      */
     interface MantineThemeOther {
         /**
-         * The pixel grid every panel row is measured against, so a consumer
-         * theming this library can read the geometry -- the 280px width, the
-         * 224px body span, the 108px field, the 24px trailing slot -- from the
-         * theme instead of retyping it.
+         * The pixel grid every panel row is measured against (the 240px panel, the 88px
+         * field, the 24px trailing slot), published so a consumer reads the geometry from
+         * the theme instead of retyping it.
          */
         panelGrid?: typeof PANEL_GRID;
+        /** The options this theme was created with, resolved. */
+        compact?: {
+            highContrast: boolean;
+        };
     }
 }
 
@@ -5743,16 +7065,19 @@ declare module "@mantine/core" {
      * The values this package puts on `theme.other`.
      *
      * Everything here is optional: a consumer who writes their own
-     * `createTheme({ other: {...} })` is not required to carry the panel grid,
-     * and reading `theme.other.panelGrid` is therefore a narrowed read.
+     * `createTheme({ other: {...} })` is not required to carry them, and reading
+     * them is therefore a narrowed read.
      */
     interface MantineThemeOther {
         /**
-         * The pixel grid every panel row is measured against, so a consumer
-         * theming this library can read the geometry -- the 280px width, the
-         * 224px body span, the 108px field, the 24px trailing slot -- from the
-         * theme instead of retyping it.
+         * The pixel grid every panel row is measured against (the 240px panel, the 88px
+         * field, the 24px trailing slot), published so a consumer reads the geometry from
+         * the theme instead of retyping it.
          */
         panelGrid?: typeof PANEL_GRID;
+        /** The options this theme was created with, resolved. */
+        compact?: {
+            highContrast: boolean;
+        };
     }
 }