@graphty/compact-mantine 0.9.3 → 0.9.4

package/dist/index.d.cts

@@ -1083,6 +1083,14 @@ export declare interface CompactMantineLabels {
      * @returns The announcement, such as "3 selected"
      */
     rowsSelected: (count: string) => string;
+    /**
+     * Accessible name of the caret that opens a data table column's menu. Optional, so a full
+     * set of labels written before it existed still type-checks; left out, the English default
+     * is used.
+     * @param header - The column's header text
+     * @returns The name, such as "Options for Degree"
+     */
+    columnMenu?: (header: string) => string;
     /**
      * How a cell holding true is written, when its column supplies no drawing
      * of its own.
@@ -1673,6 +1681,7 @@ export declare interface ControlGroupProps {
  * @param props.onAdd - Sets the section up, from the "+" an empty section carries
  * @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.summary - One line saying what the section holds, shown after the name while it is collapsed
  * @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
@@ -1691,6 +1700,13 @@ export declare interface ControlGroupProps {
  * </ControlSection>
  * ```
  * @example
+ * A section that says what it holds while it is closed.
+ * ```tsx
+ * <ControlSection label="Sources" defaultOpened={false} summary={`${name} . ${nodeCount} nodes`}>
+ *     <SourceRows />
+ * </ControlSection>
+ * ```
+ * @example
  * A section for a subject that has not been set up yet.
  * ```tsx
  * <ControlSection label="Edge properties" empty onAdd={() => { addEdgeProperties(); }} />
@@ -1765,6 +1781,16 @@ export declare interface ControlSectionProps extends DisclosureProps {
      * never as a replacement for them.
      */
     actions?: default_2.ReactNode;
+    /**
+     * What the section holds, in one short line, shown only while the section is collapsed:
+     * `"les miserables . 77 nodes"`, `"12 attributes"`.
+     *
+     * It is drawn after the name in the secondary ink, cut with an ellipsis before the name is,
+     * and it becomes the expand button's accessible description, so a reader moving through
+     * closed sections hears what each holds without opening it. An open section shows its rows
+     * instead, so the summary is hidden there. Keep it to text.
+     */
+    summary?: default_2.ReactNode;
     /** The rows the section holds: the controls commonly adjusted for its subject. */
     children?: default_2.ReactNode;
     /**
@@ -2221,6 +2247,28 @@ export declare interface DataTableColumn<TRow extends object> {
     filterable?: boolean;
     /** Whether this column may be hidden. Defaults to `true`. */
     hideable?: boolean;
+    /**
+     * Keeps the column at the start of the table while the other columns scroll sideways: the
+     * key column, such as a node's id or an edge's From and To. Pinned columns are drawn first,
+     * in their own order, whatever `columnOrder` says.
+     */
+    pinned?: "start";
+    /**
+     * A small glyph drawn before the header's name, such as the column's data type. It is
+     * decoration: the header is still named by `header` alone.
+     */
+    icon?: default_2.ReactNode;
+    /**
+     * A tooltip on the header, shown on hover and on keyboard focus and linked to the header
+     * as its description: the column's profile, such as "77 values, 1 to 36".
+     */
+    headerTooltip?: default_2.ReactNode;
+    /**
+     * The column's menu: the `Menu.Item`s (and `Menu.Divider`s) of a Mantine `Menu`. The table
+     * draws a caret at the end of the header, shown on hover and focus, that opens them; from
+     * the keyboard, Alt+ArrowDown, Shift+F10 or the context-menu key on the header opens it.
+     */
+    menu?: default_2.ReactNode;
 }
 
 /**
@@ -2273,7 +2321,7 @@ export declare interface DataTableHandle {
  * functions, so a translation can order the pieces the way its own language
  * needs, and numbers arrive already formatted for the active locale.
  */
-export declare type DataTableLabels = Pick<CompactMantineLabels, "clearSearch" | "dataTable" | "no" | "noMatchingRows" | "noRows" | "rowsSelected" | "rowsShown" | "search" | "searchPlaceholder" | "yes">;
+export declare type DataTableLabels = Pick<CompactMantineLabels, "clearSearch" | "columnMenu" | "dataTable" | "no" | "noMatchingRows" | "noRows" | "rowsSelected" | "rowsShown" | "search" | "searchPlaceholder" | "yes">;
 
 /**
  * Props for the DataTable component.
@@ -2554,7 +2602,7 @@ export declare const DEFAULT_GRADIENT_STOP_COLOR = "#888888";
  * build a full set of your own, or pass only the entries you want to change to
  * `LabelsProvider`.
  */
-export declare const defaultLabels: CompactMantineLabels;
+export declare const defaultLabels: Required<CompactMantineLabels>;
 
 /**
  * Which way text runs: left to right, or right to left.
@@ -3534,7 +3582,9 @@ export declare type OpenChangeHandler = (opened: boolean, event?: default_2.Synt
 /**
  * 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.
+ * click switches; F2 or a double-click renames when `onRename` is given. A row can carry a second
+ * line, a trailing value and a row menu (see PageListItem); ArrowRight moves into the menu. The
+ * menu's controls are taken out of the Tab order, so the list stays one Tab stop.
  * @param props - Component props
  * @param props.items - The items or pages
  * @param props.current - The current page (controlled)
@@ -3545,6 +3595,22 @@ export declare type OpenChangeHandler = (opened: boolean, event?: default_2.Synt
  * @param props.onRename - Called with a new name; turns renaming on
  * @param props.renameLabel - The rename field's accessible name
  * @returns The list
+ * @example
+ * A recent-files list: a size, a time, an error line and a row menu.
+ * ```tsx
+ * <PageList
+ *     label="Recent projects"
+ *     items={recent.map((file) => ({
+ *         id: file.id,
+ *         name: file.name,
+ *         value: `${file.nodes} nodes`,
+ *         description: file.missing ? "This file can no longer be read" : file.savedAt,
+ *         descriptionTone: file.missing ? "danger" : "default",
+ *         menu: <RecentMenu file={file} />,
+ *     }))}
+ *     onCurrentChange={(id) => open(id)}
+ * />
+ * ```
  */
 export declare function PageList({ items, current, defaultCurrent, onCurrentChange, tone, label, onRename, renameLabel, }: PageListProps): default_2.JSX.Element;
 
@@ -3554,6 +3620,23 @@ export declare interface PageListItem {
     name: string;
     /** A divider row: drawn as a line, skipped by the arrow keys. */
     divider?: boolean;
+    /**
+     * A second line under the name, in the secondary ink: a time, a hint, a status sentence
+     * ("This file can no longer be read"). It is part of the row's accessible name, after the
+     * name and the value, since the name is built from the row's visible text.
+     */
+    description?: default_2.ReactNode;
+    /** `"danger"` draws the second line in the danger ink, for an error. Default `"default"`. */
+    descriptionTone?: "default" | "danger";
+    /** A short value at the end of the name's line, in the secondary ink: a size, a count. */
+    value?: default_2.ReactNode;
+    /**
+     * The row's own control -- usually a "More" button opening a Menu -- drawn after the row in
+     * a cell of its own, so a click on it never switches to the page. Name the button after
+     * the row ("More for Les Miserables"). ArrowRight on a row moves into it and ArrowLeft
+     * moves back.
+     */
+    menu?: default_2.ReactNode;
 }
 
 /**
@@ -3605,6 +3688,14 @@ export declare interface PageRowProps extends Omit<default_2.HTMLAttributes<HTML
     nameSlot?: default_2.ReactNode;
     /** The focusable cell's tab index (PageList manages it). Default 0. */
     tabIndex?: number;
+    /** A second line under the name. See PageListItem.description. */
+    description?: default_2.ReactNode;
+    /** `"danger"` draws the second line in the danger ink. Default `"default"`. */
+    descriptionTone?: "default" | "danger";
+    /** A short value at the end of the name's line. See PageListItem.value. */
+    value?: default_2.ReactNode;
+    /** The row's own control, in a cell after the row. See PageListItem.menu. */
+    menu?: default_2.ReactNode;
 }
 
 /**
@@ -4901,6 +4992,13 @@ export declare interface QuickAction {
     keywords?: readonly string[];
     /** Shown, but cannot be run or highlighted. */
     disabled?: boolean;
+    /**
+     * A second, dimmed line under the name: why a disabled action cannot be run ("Holds
+     * groups, not amounts"), or what it does. It is the option's accessible description, so its
+     * accessible name stays `label` alone, and it survives a search (which drops the section
+     * headings).
+     */
+    description?: string;
 }
 
 /**
@@ -4918,6 +5016,7 @@ export declare interface QuickAction {
  * @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.truncate - Cut a long name at the end or in the middle
  * @param props.placeholder - Placeholder of the search field
  * @param props.width - Panel width
  * @param props.height - Panel height
@@ -4925,7 +5024,7 @@ export declare interface QuickAction {
  * @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;
+export declare function QuickActions({ actions, onRun, onClose, query, onQueryChange, filter, header, searchAction, truncate, placeholder, width, height, className, style, ...others }: QuickActionsProps): default_2.JSX.Element;
 
 /**
  * Props for the QuickActions component.
@@ -4959,6 +5058,12 @@ export declare interface QuickActionsProps {
     "aria-label"?: string;
     /** Placeholder of the search field. Defaults to the "Search actions" label. */
     placeholder?: string;
+    /**
+     * How a name too long for its row is cut. `"end"` (the default) ends it with an ellipsis;
+     * `"middle"` keeps its start and its end ("shared_ch...apters"), for names that differ at
+     * the end. A middle-cut name carries the full name as its tooltip.
+     */
+    truncate?: "end" | "middle";
     /** Panel width. Default 529 (Figma's, the toolbar's width). */
     width?: number;
     /** Panel height. Default 354. */
@@ -6623,7 +6728,8 @@ export declare interface TrailingSlotProps {
  * 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.
+ * Alt+ArrowDown move the focused item one place among its siblings. `onRowKeyDown` sees every
+ * key first and can claim one with `preventDefault()`.
  * 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
@@ -6641,9 +6747,23 @@ export declare interface TrailingSlotProps {
  * @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
+ * @param props.onRowKeyDown - Called first for a key pressed on a focused row; preventDefault claims it
  * @returns The tree
+ * @example
+ * A row with a swatch, a count, a running line and its state in words, and a row shortcut.
+ * ```tsx
+ * <Tree
+ *     items={[{ id: "pr", name: "PageRank", swatch: <Ramp />, count: 77, progress: 0.4, description: "Running" }]}
+ *     onRowKeyDown={(id, event) => {
+ *         if (event.key === "Delete") {
+ *             event.preventDefault();
+ *             remove(id);
+ *         }
+ *     }}
+ * />
+ * ```
  */
-export declare function Tree({ items, label, selected, defaultSelected, onSelect, expanded, defaultExpanded, onExpandedChange, multiselect, onRename, onMove, stickyRoots, height, renameLabel, }: TreeProps): default_2.JSX.Element;
+export declare function Tree({ items, label, selected, defaultSelected, onSelect, expanded, defaultExpanded, onExpandedChange, multiselect, onRename, onMove, stickyRoots, height, renameLabel, onRowKeyDown, }: 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
@@ -6686,6 +6806,14 @@ export declare interface TreeItemProps extends Omit<default_2.HTMLAttributes<HTM
     posInSet?: number;
     /** How many siblings it has, for assistive technology. */
     setSize?: number;
+    /** A swatch drawn between the glyph and the name. See TreeNodeData.swatch. */
+    swatch?: default_2.ReactNode;
+    /** An always-visible count before the toggles. See TreeNodeData.count. */
+    count?: default_2.ReactNode;
+    /** A progress line along the bottom of the row. See TreeNodeData.progress. */
+    progress?: number | "indeterminate";
+    /** The row's state in words, read after its name. See TreeNodeData.description. */
+    description?: string;
     /** Drawn in place of the name, e.g. an InlineRename. */
     nameSlot?: default_2.ReactNode;
     /** Called when the caret is clicked. */
@@ -6733,6 +6861,29 @@ export declare interface TreeNodeData {
      * or `data-pinned` stays visible.
      */
     actions?: default_2.ReactNode;
+    /**
+     * A small swatch drawn between the glyph and the name: a color, a ramp. It is decoration;
+     * say what it means in `description` if the reader needs to hear it.
+     */
+    swatch?: default_2.ReactNode;
+    /**
+     * A count drawn before the toggles in the secondary ink, always visible (the toggles hide
+     * until hover). It joins the row's accessible description, so it is heard as well as seen.
+     */
+    count?: default_2.ReactNode;
+    /**
+     * A progress line along the bottom of the row, for an item whose work is running: a
+     * fraction from 0 to 1, or `"indeterminate"` when the end is not known. Omit it once the
+     * work is done. The line is a `progressbar` named by the row's name.
+     */
+    progress?: number | "indeterminate";
+    /**
+     * The row's state in words -- "Running", "Failed: the graph has no edges" -- read by a
+     * screen reader after the name (the row's `aria-describedby`) and never drawn. A row's
+     * accessible name is only its `name`, so anything a glyph or a tooltip says belongs here
+     * too.
+     */
+    description?: string;
 }
 
 /**
@@ -6775,6 +6926,13 @@ export declare interface TreeProps {
     height?: number | string;
     /** The accessible name of the rename field. Defaults to "Layer name". */
     renameLabel?: string;
+    /**
+     * Called with the row's id for every key pressed on a focused row (not on a control inside
+     * it), before the tree's own keys. Call `event.preventDefault()` to claim the key: the tree
+     * then does nothing with it. Use it for the row's own shortcuts -- Space to toggle the row's
+     * eye, Delete to delete the row.
+     */
+    onRowKeyDown?: (id: string, event: default_2.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 /**

package/dist/index.d.ts

@@ -1083,6 +1083,14 @@ export declare interface CompactMantineLabels {
      * @returns The announcement, such as "3 selected"
      */
     rowsSelected: (count: string) => string;
+    /**
+     * Accessible name of the caret that opens a data table column's menu. Optional, so a full
+     * set of labels written before it existed still type-checks; left out, the English default
+     * is used.
+     * @param header - The column's header text
+     * @returns The name, such as "Options for Degree"
+     */
+    columnMenu?: (header: string) => string;
     /**
      * How a cell holding true is written, when its column supplies no drawing
      * of its own.
@@ -1673,6 +1681,7 @@ export declare interface ControlGroupProps {
  * @param props.onAdd - Sets the section up, from the "+" an empty section carries
  * @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.summary - One line saying what the section holds, shown after the name while it is collapsed
  * @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
@@ -1691,6 +1700,13 @@ export declare interface ControlGroupProps {
  * </ControlSection>
  * ```
  * @example
+ * A section that says what it holds while it is closed.
+ * ```tsx
+ * <ControlSection label="Sources" defaultOpened={false} summary={`${name} . ${nodeCount} nodes`}>
+ *     <SourceRows />
+ * </ControlSection>
+ * ```
+ * @example
  * A section for a subject that has not been set up yet.
  * ```tsx
  * <ControlSection label="Edge properties" empty onAdd={() => { addEdgeProperties(); }} />
@@ -1765,6 +1781,16 @@ export declare interface ControlSectionProps extends DisclosureProps {
      * never as a replacement for them.
      */
     actions?: default_2.ReactNode;
+    /**
+     * What the section holds, in one short line, shown only while the section is collapsed:
+     * `"les miserables . 77 nodes"`, `"12 attributes"`.
+     *
+     * It is drawn after the name in the secondary ink, cut with an ellipsis before the name is,
+     * and it becomes the expand button's accessible description, so a reader moving through
+     * closed sections hears what each holds without opening it. An open section shows its rows
+     * instead, so the summary is hidden there. Keep it to text.
+     */
+    summary?: default_2.ReactNode;
     /** The rows the section holds: the controls commonly adjusted for its subject. */
     children?: default_2.ReactNode;
     /**
@@ -2221,6 +2247,28 @@ export declare interface DataTableColumn<TRow extends object> {
     filterable?: boolean;
     /** Whether this column may be hidden. Defaults to `true`. */
     hideable?: boolean;
+    /**
+     * Keeps the column at the start of the table while the other columns scroll sideways: the
+     * key column, such as a node's id or an edge's From and To. Pinned columns are drawn first,
+     * in their own order, whatever `columnOrder` says.
+     */
+    pinned?: "start";
+    /**
+     * A small glyph drawn before the header's name, such as the column's data type. It is
+     * decoration: the header is still named by `header` alone.
+     */
+    icon?: default_2.ReactNode;
+    /**
+     * A tooltip on the header, shown on hover and on keyboard focus and linked to the header
+     * as its description: the column's profile, such as "77 values, 1 to 36".
+     */
+    headerTooltip?: default_2.ReactNode;
+    /**
+     * The column's menu: the `Menu.Item`s (and `Menu.Divider`s) of a Mantine `Menu`. The table
+     * draws a caret at the end of the header, shown on hover and focus, that opens them; from
+     * the keyboard, Alt+ArrowDown, Shift+F10 or the context-menu key on the header opens it.
+     */
+    menu?: default_2.ReactNode;
 }
 
 /**
@@ -2273,7 +2321,7 @@ export declare interface DataTableHandle {
  * functions, so a translation can order the pieces the way its own language
  * needs, and numbers arrive already formatted for the active locale.
  */
-export declare type DataTableLabels = Pick<CompactMantineLabels, "clearSearch" | "dataTable" | "no" | "noMatchingRows" | "noRows" | "rowsSelected" | "rowsShown" | "search" | "searchPlaceholder" | "yes">;
+export declare type DataTableLabels = Pick<CompactMantineLabels, "clearSearch" | "columnMenu" | "dataTable" | "no" | "noMatchingRows" | "noRows" | "rowsSelected" | "rowsShown" | "search" | "searchPlaceholder" | "yes">;
 
 /**
  * Props for the DataTable component.
@@ -2554,7 +2602,7 @@ export declare const DEFAULT_GRADIENT_STOP_COLOR = "#888888";
  * build a full set of your own, or pass only the entries you want to change to
  * `LabelsProvider`.
  */
-export declare const defaultLabels: CompactMantineLabels;
+export declare const defaultLabels: Required<CompactMantineLabels>;
 
 /**
  * Which way text runs: left to right, or right to left.
@@ -3534,7 +3582,9 @@ export declare type OpenChangeHandler = (opened: boolean, event?: default_2.Synt
 /**
  * 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.
+ * click switches; F2 or a double-click renames when `onRename` is given. A row can carry a second
+ * line, a trailing value and a row menu (see PageListItem); ArrowRight moves into the menu. The
+ * menu's controls are taken out of the Tab order, so the list stays one Tab stop.
  * @param props - Component props
  * @param props.items - The items or pages
  * @param props.current - The current page (controlled)
@@ -3545,6 +3595,22 @@ export declare type OpenChangeHandler = (opened: boolean, event?: default_2.Synt
  * @param props.onRename - Called with a new name; turns renaming on
  * @param props.renameLabel - The rename field's accessible name
  * @returns The list
+ * @example
+ * A recent-files list: a size, a time, an error line and a row menu.
+ * ```tsx
+ * <PageList
+ *     label="Recent projects"
+ *     items={recent.map((file) => ({
+ *         id: file.id,
+ *         name: file.name,
+ *         value: `${file.nodes} nodes`,
+ *         description: file.missing ? "This file can no longer be read" : file.savedAt,
+ *         descriptionTone: file.missing ? "danger" : "default",
+ *         menu: <RecentMenu file={file} />,
+ *     }))}
+ *     onCurrentChange={(id) => open(id)}
+ * />
+ * ```
  */
 export declare function PageList({ items, current, defaultCurrent, onCurrentChange, tone, label, onRename, renameLabel, }: PageListProps): default_2.JSX.Element;
 
@@ -3554,6 +3620,23 @@ export declare interface PageListItem {
     name: string;
     /** A divider row: drawn as a line, skipped by the arrow keys. */
     divider?: boolean;
+    /**
+     * A second line under the name, in the secondary ink: a time, a hint, a status sentence
+     * ("This file can no longer be read"). It is part of the row's accessible name, after the
+     * name and the value, since the name is built from the row's visible text.
+     */
+    description?: default_2.ReactNode;
+    /** `"danger"` draws the second line in the danger ink, for an error. Default `"default"`. */
+    descriptionTone?: "default" | "danger";
+    /** A short value at the end of the name's line, in the secondary ink: a size, a count. */
+    value?: default_2.ReactNode;
+    /**
+     * The row's own control -- usually a "More" button opening a Menu -- drawn after the row in
+     * a cell of its own, so a click on it never switches to the page. Name the button after
+     * the row ("More for Les Miserables"). ArrowRight on a row moves into it and ArrowLeft
+     * moves back.
+     */
+    menu?: default_2.ReactNode;
 }
 
 /**
@@ -3605,6 +3688,14 @@ export declare interface PageRowProps extends Omit<default_2.HTMLAttributes<HTML
     nameSlot?: default_2.ReactNode;
     /** The focusable cell's tab index (PageList manages it). Default 0. */
     tabIndex?: number;
+    /** A second line under the name. See PageListItem.description. */
+    description?: default_2.ReactNode;
+    /** `"danger"` draws the second line in the danger ink. Default `"default"`. */
+    descriptionTone?: "default" | "danger";
+    /** A short value at the end of the name's line. See PageListItem.value. */
+    value?: default_2.ReactNode;
+    /** The row's own control, in a cell after the row. See PageListItem.menu. */
+    menu?: default_2.ReactNode;
 }
 
 /**
@@ -4901,6 +4992,13 @@ export declare interface QuickAction {
     keywords?: readonly string[];
     /** Shown, but cannot be run or highlighted. */
     disabled?: boolean;
+    /**
+     * A second, dimmed line under the name: why a disabled action cannot be run ("Holds
+     * groups, not amounts"), or what it does. It is the option's accessible description, so its
+     * accessible name stays `label` alone, and it survives a search (which drops the section
+     * headings).
+     */
+    description?: string;
 }
 
 /**
@@ -4918,6 +5016,7 @@ export declare interface QuickAction {
  * @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.truncate - Cut a long name at the end or in the middle
  * @param props.placeholder - Placeholder of the search field
  * @param props.width - Panel width
  * @param props.height - Panel height
@@ -4925,7 +5024,7 @@ export declare interface QuickAction {
  * @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;
+export declare function QuickActions({ actions, onRun, onClose, query, onQueryChange, filter, header, searchAction, truncate, placeholder, width, height, className, style, ...others }: QuickActionsProps): default_2.JSX.Element;
 
 /**
  * Props for the QuickActions component.
@@ -4959,6 +5058,12 @@ export declare interface QuickActionsProps {
     "aria-label"?: string;
     /** Placeholder of the search field. Defaults to the "Search actions" label. */
     placeholder?: string;
+    /**
+     * How a name too long for its row is cut. `"end"` (the default) ends it with an ellipsis;
+     * `"middle"` keeps its start and its end ("shared_ch...apters"), for names that differ at
+     * the end. A middle-cut name carries the full name as its tooltip.
+     */
+    truncate?: "end" | "middle";
     /** Panel width. Default 529 (Figma's, the toolbar's width). */
     width?: number;
     /** Panel height. Default 354. */
@@ -6623,7 +6728,8 @@ export declare interface TrailingSlotProps {
  * 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.
+ * Alt+ArrowDown move the focused item one place among its siblings. `onRowKeyDown` sees every
+ * key first and can claim one with `preventDefault()`.
  * 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
@@ -6641,9 +6747,23 @@ export declare interface TrailingSlotProps {
  * @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
+ * @param props.onRowKeyDown - Called first for a key pressed on a focused row; preventDefault claims it
  * @returns The tree
+ * @example
+ * A row with a swatch, a count, a running line and its state in words, and a row shortcut.
+ * ```tsx
+ * <Tree
+ *     items={[{ id: "pr", name: "PageRank", swatch: <Ramp />, count: 77, progress: 0.4, description: "Running" }]}
+ *     onRowKeyDown={(id, event) => {
+ *         if (event.key === "Delete") {
+ *             event.preventDefault();
+ *             remove(id);
+ *         }
+ *     }}
+ * />
+ * ```
  */
-export declare function Tree({ items, label, selected, defaultSelected, onSelect, expanded, defaultExpanded, onExpandedChange, multiselect, onRename, onMove, stickyRoots, height, renameLabel, }: TreeProps): default_2.JSX.Element;
+export declare function Tree({ items, label, selected, defaultSelected, onSelect, expanded, defaultExpanded, onExpandedChange, multiselect, onRename, onMove, stickyRoots, height, renameLabel, onRowKeyDown, }: 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
@@ -6686,6 +6806,14 @@ export declare interface TreeItemProps extends Omit<default_2.HTMLAttributes<HTM
     posInSet?: number;
     /** How many siblings it has, for assistive technology. */
     setSize?: number;
+    /** A swatch drawn between the glyph and the name. See TreeNodeData.swatch. */
+    swatch?: default_2.ReactNode;
+    /** An always-visible count before the toggles. See TreeNodeData.count. */
+    count?: default_2.ReactNode;
+    /** A progress line along the bottom of the row. See TreeNodeData.progress. */
+    progress?: number | "indeterminate";
+    /** The row's state in words, read after its name. See TreeNodeData.description. */
+    description?: string;
     /** Drawn in place of the name, e.g. an InlineRename. */
     nameSlot?: default_2.ReactNode;
     /** Called when the caret is clicked. */
@@ -6733,6 +6861,29 @@ export declare interface TreeNodeData {
      * or `data-pinned` stays visible.
      */
     actions?: default_2.ReactNode;
+    /**
+     * A small swatch drawn between the glyph and the name: a color, a ramp. It is decoration;
+     * say what it means in `description` if the reader needs to hear it.
+     */
+    swatch?: default_2.ReactNode;
+    /**
+     * A count drawn before the toggles in the secondary ink, always visible (the toggles hide
+     * until hover). It joins the row's accessible description, so it is heard as well as seen.
+     */
+    count?: default_2.ReactNode;
+    /**
+     * A progress line along the bottom of the row, for an item whose work is running: a
+     * fraction from 0 to 1, or `"indeterminate"` when the end is not known. Omit it once the
+     * work is done. The line is a `progressbar` named by the row's name.
+     */
+    progress?: number | "indeterminate";
+    /**
+     * The row's state in words -- "Running", "Failed: the graph has no edges" -- read by a
+     * screen reader after the name (the row's `aria-describedby`) and never drawn. A row's
+     * accessible name is only its `name`, so anything a glyph or a tooltip says belongs here
+     * too.
+     */
+    description?: string;
 }
 
 /**
@@ -6775,6 +6926,13 @@ export declare interface TreeProps {
     height?: number | string;
     /** The accessible name of the rename field. Defaults to "Layer name". */
     renameLabel?: string;
+    /**
+     * Called with the row's id for every key pressed on a focused row (not on a control inside
+     * it), before the tree's own keys. Call `event.preventDefault()` to claim the key: the tree
+     * then does nothing with it. Use it for the row's own shortcuts -- Space to toggle the row's
+     * eye, Delete to delete the row.
+     */
+    onRowKeyDown?: (id: string, event: default_2.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 /**