@salilvnair/dui 1.0.7 → 1.0.8

package/dist/lib/components/input/ThemeCardSelectorView.d.ts

@@ -10,9 +10,18 @@ export interface ThemeOption {
     };
 }
 export interface ThemeCardSelectorViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     options: ThemeOption[];
     value: string;
     onChange: (value: string) => void;
     className?: string;
 }
-export declare function ThemeCardSelectorView({ options, value, onChange, className, }: ThemeCardSelectorViewProps): import("react").JSX.Element;
+export declare function ThemeCardSelectorView({ testId, options, value, onChange, className, }: ThemeCardSelectorViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TimeWheelView.d.ts

@@ -5,6 +5,15 @@ export interface TimeWheelValue {
     meridiem?: 'AM' | 'PM';
 }
 export interface TimeWheelViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: TimeWheelValue;
     onChange: (value: TimeWheelValue) => void;
     use24Hour?: boolean;
@@ -18,4 +27,4 @@ export interface TimeWheelViewProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function TimeWheelView({ value, onChange, use24Hour, minuteStep, size, width, borderRadius, color, visibleRows, disabled, className, style, }: TimeWheelViewProps): import("react").JSX.Element;
+export declare function TimeWheelView({ testId, value, onChange, use24Hour, minuteStep, size, width, borderRadius, color, visibleRows, disabled, className, style, }: TimeWheelViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TimeZoneSelectView.d.ts

@@ -0,0 +1,40 @@
+import { SelectInputSize } from './SelectInputView';
+/** The browser's own zone, e.g. `America/Chicago`. */
+export declare function localTimeZone(): string;
+/** The zones this runtime knows, common ones first. Falls back to a short list. */
+export declare function timeZoneList(): string[];
+/** How far `timeZone` sits from UTC at `date`, in milliseconds. */
+export declare function zoneOffsetMs(date: Date, timeZone: string): number;
+/**
+ * A wall-clock `YYYY-MM-DDTHH:mm` read in `timeZone`, as an instant.
+ *
+ * Twice, because the offset itself depends on the instant: the first pass uses
+ * the offset at the guessed time, and near a daylight-saving change that guess
+ * can land on the wrong side of the transition. Re-deriving the offset at the
+ * corrected instant settles it.
+ */
+export declare function zonedToUtcMs(local: string, timeZone: string): number;
+/** An instant as a `YYYY-MM-DDTHH:mm` wall-clock reading in `timeZone`. */
+export declare function utcMsToZoned(ms: number, timeZone: string): string;
+/** `UTC+05:30`, the way an offset is usually written. */
+export declare function offsetLabel(timeZone: string, at?: Date): string;
+export interface TimeZoneSelectViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
+    value: string;
+    onChange: (timeZone: string) => void;
+    size?: SelectInputSize;
+    width?: string | number;
+    color?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function TimeZoneSelectView({ testId, value, onChange, size, width, color, disabled, className, style, }: TimeZoneSelectViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TimeZoneSelectView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/input/TogglePillView.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode, CSSProperties } from 'react';
+export type TogglePillVariant = 'default' | 'go';
+export interface TogglePillViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
+    children: ReactNode;
+    /** A glyph before the label. */
+    icon?: ReactNode;
+    /** Lit in the accent, with a tinted ground and a matching border. */
+    active?: boolean;
+    /**
+     * A number after the label — how many filters are on, how many are selected.
+     *
+     * Bold rather than a second chip: a count inside its own pill turns one
+     * control into two objects, and a toolbar of them stops being scannable.
+     */
+    count?: number | string;
+    /**
+     * `go` fills the pill solid.
+     *
+     * For the one pill in a row that commits rather than toggles — Run, Apply,
+     * Export. It reads as a button among switches, which is what it is.
+     */
+    variant?: TogglePillVariant;
+    accentColor?: string;
+    disabled?: boolean;
+    title?: string;
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A toolbar pill: a small bordered control that is either on or off.
+ *
+ * The unit a dense toolbar is built from, where a segmented control would be
+ * wrong. A segmented control says "these are the choices, pick one"; a row of
+ * pills says "each of these is a thing you can turn on", which is what a view
+ * switch, a filter toggle and a grouping selector actually are — they are not
+ * one set, and boxing them into one implies a relationship that is not there.
+ *
+ * Off is a plain border on the panel, not a grey fill: a toolbar where every
+ * pill has a background is a wall, and the lit one no longer stands out.
+ */
+export declare function TogglePillView({ testId, children, icon, active, count, variant, accentColor, disabled, title, onClick, className, style, }: TogglePillViewProps): import("react").JSX.Element;

package/dist/lib/components/input/ToggleSwitchView.d.ts

@@ -2,6 +2,15 @@ import { DuiSize } from '../../core/DuiTypes';
 /** Accepts all 4 canonical sizes (maps to DuiToggle tokens). */
 export type ToggleSwitchSize = DuiSize;
 export interface ToggleSwitchViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
@@ -16,4 +25,4 @@ export interface ToggleSwitchViewProps {
     /** Label text color override */
     color?: string;
 }
-export declare function ToggleSwitchView({ checked, onChange, disabled, size, accentColor, label, labelPosition, className, activeColor, color, }: ToggleSwitchViewProps): import("react").JSX.Element;
+export declare function ToggleSwitchView({ testId, checked, onChange, disabled, size, accentColor, label, labelPosition, className, activeColor, color, }: ToggleSwitchViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TransferListView.d.ts

@@ -5,6 +5,15 @@ export interface TransferItem {
     label: string;
 }
 export interface TransferListViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     items: TransferItem[];
     /** Values currently on the right ("selected") side. */
     value: string[];
@@ -18,4 +27,4 @@ export interface TransferListViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function TransferListView({ items, value, onChange, leftTitle, rightTitle, size, borderRadius, color, height, className, style, }: TransferListViewProps): import("react").JSX.Element;
+export declare function TransferListView({ testId, items, value, onChange, leftTitle, rightTitle, size, borderRadius, color, height, className, style, }: TransferListViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TreeSelectView.d.ts

@@ -6,6 +6,15 @@ export interface TreeSelectNode {
     children?: TreeSelectNode[];
 }
 export interface TreeSelectViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     nodes: TreeSelectNode[];
     /** Checked node ids. */
     value: string[];
@@ -16,4 +25,4 @@ export interface TreeSelectViewProps {
     style?: CSSProperties;
 }
 /** Checkbox-driven hierarchical select — tri-state parent checkboxes over a folder-style tree. */
-export declare function TreeSelectView({ nodes, value, onChange, size, color, className, style, }: TreeSelectViewProps): import("react").JSX.Element;
+export declare function TreeSelectView({ testId, nodes, value, onChange, size, color, className, style, }: TreeSelectViewProps): import("react").JSX.Element;

package/dist/lib/components/input/WizardStepperView.d.ts

@@ -6,6 +6,15 @@ export interface WizardStep {
     description?: string;
 }
 export interface WizardStepperViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     steps: WizardStep[];
     activeStep: string;
     completedSteps?: string[];
@@ -16,4 +25,4 @@ export interface WizardStepperViewProps {
     style?: CSSProperties;
 }
 /** Multi-step form wizard progress header — numbered step indicator pattern. Distinct from `StepperInputView` (numeric +/-). */
-export declare function WizardStepperView({ steps, activeStep, completedSteps, onStepClick, size, color, className, style, }: WizardStepperViewProps): import("react").JSX.Element;
+export declare function WizardStepperView({ testId, steps, activeStep, completedSteps, onStepClick, size, color, className, style, }: WizardStepperViewProps): import("react").JSX.Element;

package/dist/lib/components/input/doc-path.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The path to whatever the cursor is sitting on.
+ *
+ * Reading a value out of a response and then writing the expression that
+ * selects it is a transcription job: you can see `id` on screen and still have
+ * to count array indices and retype four ancestor names to say where it lives.
+ * Right-click, and the editor says it.
+ *
+ * ── Why a scanner rather than a parse ──
+ *
+ * `JSON.parse` gives a tree with no offsets, so it cannot answer "which node is
+ * at character 4,812". It also refuses the case this is most useful in: a body
+ * being edited is malformed for as long as you are typing it, and a feature
+ * that stops working while you type is one you stop reaching for. A scanner
+ * tracks the enclosing stack as it goes and can answer from wherever it got to,
+ * whether or not the rest of the document is well formed.
+ */
+/**
+ * The JSONPath of the value at `offset`, in the `$.a.b[0].c` dialect every
+ * JSONPath implementation accepts.
+ *
+ * On a key, the path names that key — asking for the path of `"total"` and
+ * getting its parent's path back would be the wrong answer to the obvious
+ * question.
+ */
+export declare function jsonPathAt(text: string, offset: number): string | undefined;
+/**
+ * Every level from the root down to the cursor.
+ *
+ * The innermost path is the one usually wanted and not the one always wanted:
+ * standing on `id` you may want the object that holds it, or the array, or the
+ * collection above that — and each is a different assertion to write. Offering
+ * the whole chain costs one submenu and saves re-deriving an ancestor by hand.
+ */
+export declare function jsonPathLevels(text: string, offset: number): string[];
+/**
+ * The XPath of the element containing `offset`.
+ *
+ * Attributes and text nodes resolve to their element rather than to
+ * `/a/b/@id` or `/a/b/text()`: the element is what the path is nearly always
+ * wanted for, and a path that sometimes ends in an attribute is one you have
+ * to check before pasting.
+ */
+export declare function xPathAt(text: string, offset: number): string | undefined;
+/**
+ * Every enclosing element, outermost first.
+ *
+ * The same reason as JSON, and more often wanted: an XPath is usually written
+ * against a container — `/order/items` — rather than against the leaf you
+ * happened to right-click.
+ */
+export declare function xPathLevels(text: string, offset: number): string[];

package/dist/lib/components/input/doc-path.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/input/markdown-serialise.d.ts

@@ -0,0 +1,23 @@
+/**
+ * HTML back to Markdown.
+ *
+ * The rich view is a `contenteditable` rendering of the Markdown document, so
+ * every edit has to come back the other way. This is the half where fidelity is
+ * lost if it is lost at all, which is why it is written out rather than pulled
+ * in: a dependency here is a dependency whose idea of "close enough" you inherit.
+ *
+ * It handles exactly what the toolbar can produce and what `marked` renders from
+ * the Markdown it is given: headings, paragraphs, bold, italic, strikethrough,
+ * inline and block code, links, images, bullet, ordered and task lists,
+ * blockquotes, tables and rules. Anything else — raw HTML somebody pasted — is
+ * reduced to its text, because silently emitting HTML into a Markdown document
+ * makes the next round trip worse, not better.
+ */
+/**
+ * Turn a contenteditable's HTML into Markdown.
+ *
+ * Blank blocks are dropped and runs of blank lines collapsed to one, because a
+ * contenteditable emits `<p><br></p>` freely and a document that grows two
+ * blank lines every time you press Enter is not one anybody would keep using.
+ */
+export declare function htmlToMarkdown(html: string): string;

package/dist/lib/components/input/select-position.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/layout/PathBreadcrumbView.d.ts

@@ -0,0 +1,67 @@
+import { DuiSize } from '../../core/DuiTypes';
+/**
+ * A filesystem path, as a chain of jump targets or as the string it always was.
+ *
+ * `BreadcrumbView` is the right component for a trail of pages, where each
+ * label is prose and the whole thing is read rather than typed. A PATH is a
+ * different object: it has a canonical text form people already know, and the
+ * fastest way to reach one you know is to type it rather than click five
+ * ancestors. Splitting a slash-separated string is also not the caller's job
+ * to repeat everywhere it shows a path.
+ *
+ * So the control has two states over one value. Double-click — or press Enter
+ * on the focused chain — swaps the segments for an input holding the raw path;
+ * Enter commits, Escape puts the chain back untouched.
+ */
+export interface PathBreadcrumbViewProps {
+    /** An absolute, slash-separated path. `/` renders as a single root segment. */
+    path: string;
+    /** A segment was clicked; the argument is the absolute path of that segment. */
+    onNavigate?: (path: string) => void;
+    /**
+     * A path was typed and committed.
+     *
+     * Omit to make the control read-only: with no handler there is nothing for
+     * editing to do, so the double-click does not arm and the affordance is not
+     * advertised.
+     */
+    onSubmit?: (path: string) => void;
+    /**
+     * Editing started or stopped.
+     *
+     * The chain sizes itself to its segments; the text field wants room to type
+     * a path into. Only the layout around this control can give it that room, so
+     * it has to be told which of the two it is currently holding.
+     */
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * Drive editing from outside, for a caller that owns a bigger hit area.
+     *
+     * The chain is as wide as its segments, which leaves most of the bar it sits
+     * in dead to a double-click — you have to hit the text. A caller that wants
+     * the whole strip to arm editing needs to be able to say so, and this makes
+     * the control optionally controlled: pass it and you own the state, omit it
+     * and it keeps its own.
+     */
+    editing?: boolean;
+    /** Label for the leading `/`. Some filesystems want a share or drive name. */
+    rootLabel?: string;
+    /** Collapse the middle into `…` past this many segments. Default 5. */
+    maxVisible?: number;
+    size?: DuiSize;
+    /** Colour of the segment the path currently ends at. */
+    color?: string;
+    className?: string;
+    placeholder?: string;
+}
+export declare function PathBreadcrumbView({ path, onNavigate, onSubmit, onEditingChange, editing: editingProp, rootLabel, maxVisible, size, color, className, placeholder, }: PathBreadcrumbViewProps): import("react").JSX.Element;
+/**
+ * `/var/lib/app` into segments that each address a real directory.
+ *
+ * Exported because the caller almost always needs the same walk for its own
+ * navigation, and two implementations of "what is the parent of this" drift.
+ */
+export declare function splitPath(path: string, rootLabel?: string): {
+    label: string;
+    path: string;
+}[];

package/dist/lib/components/layout/PathBreadcrumbView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/layout/SplitPanelView.d.ts

@@ -22,6 +22,31 @@ export interface SplitPanelViewProps {
     onResizeEnd?: (split: number) => void;
     /** Fired when the handle is clicked without dragging (e.g. to collapse/expand) */
     onHandleClick?: () => void;
+    /**
+     * Show only the first panel — no second panel, no handle, no divider.
+     *
+     * The reason to use this instead of rendering `first` on its own is that the
+     * tree keeps its shape. `first` stays the same element in the same position
+     * whether or not the second panel is showing, so React reconciles it rather
+     * than unmounting it.
+     *
+     * A caller that instead swaps between `<>{content}</>` and
+     * `<SplitPanelView first={content} />` moves that subtree to a new position
+     * on every toggle, so React tears it down and builds it again — and any
+     * state inside it goes with it: a parsed file, a scroll position, a
+     * half-filled form. It looks like a layout prop and behaves like a data one.
+     */
+    collapsed?: boolean;
+    /**
+     * Which panel `collapsed` hides. Defaults to the second.
+     *
+     * A split that can only collapse one side is half a component: a details pane
+     * on the right collapses second, a sidebar or a facet rail on the left
+     * collapses first. Without this a left-hand caller has to swap `first` and
+     * `second` — which puts the panel on the wrong side — or drop the split, and
+     * lose the state the collapse existed to preserve.
+     */
+    collapsedSide?: 'first' | 'second';
     /**
      * Tooltip shown on pill hover. Pass `null` to suppress.
      * Defaults to "Double-click to reset Alt+/ / Drag to resize" with a styled kbd badge.
@@ -30,4 +55,4 @@ export interface SplitPanelViewProps {
     style?: React.CSSProperties;
     className?: string;
 }
-export declare function SplitPanelView({ direction, first, second, defaultSplit, split: splitProp, minFirst, minSecond, minFirstPct, minSecondPct, accentColor, onResize, onResizeEnd, onHandleClick, pillTooltip, style, className, }: SplitPanelViewProps): import("react").JSX.Element;
+export declare function SplitPanelView({ direction, first, second, defaultSplit, split: splitProp, minFirst, minSecond, minFirstPct, minSecondPct, accentColor, onResize, onResizeEnd, onHandleClick, pillTooltip, collapsed, collapsedSide, style, className, }: SplitPanelViewProps): import("react").JSX.Element;

package/dist/lib/components/modal/ActionSheetView.d.ts

@@ -8,6 +8,15 @@ export interface ActionSheetItem {
     onClick: () => void;
 }
 export interface ActionSheetViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     open: boolean;
     onClose: () => void;
     title?: string;
@@ -16,4 +25,4 @@ export interface ActionSheetViewProps {
     size?: DuiSize;
     className?: string;
 }
-export declare function ActionSheetView({ open, onClose, title, items, cancelLabel, size, className, }: ActionSheetViewProps): import('react').ReactPortal | null;
+export declare function ActionSheetView({ testId, open, onClose, title, items, cancelLabel, size, className, }: ActionSheetViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/AlertDialogView.d.ts

@@ -1,5 +1,14 @@
 import { DuiSize } from '../../core/DuiTypes';
 export interface AlertDialogViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     open: boolean;
     title: string;
     message: string;
@@ -12,4 +21,4 @@ export interface AlertDialogViewProps {
     className?: string;
 }
 /** Pre-built confirm/cancel dialog with danger styling — the standard "Are you sure?" pattern. */
-export declare function AlertDialogView({ open, title, message, confirmLabel, cancelLabel, danger, onConfirm, onCancel, size, className, }: AlertDialogViewProps): import('react').ReactPortal | null;
+export declare function AlertDialogView({ testId, open, title, message, confirmLabel, cancelLabel, danger, onConfirm, onCancel, size, className, }: AlertDialogViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/BottomSheetView.d.ts

@@ -1,6 +1,15 @@
 import { ReactNode } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface BottomSheetViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     open: boolean;
     onClose: () => void;
     title?: string;
@@ -11,4 +20,4 @@ export interface BottomSheetViewProps {
     className?: string;
 }
 /** Mobile-style sheet — drag the handle down past a threshold, or fling it, to dismiss. */
-export declare function BottomSheetView({ open, onClose, title, children, heightRatio, size, className, }: BottomSheetViewProps): import('react').ReactPortal | null;
+export declare function BottomSheetView({ testId, open, onClose, title, children, heightRatio, size, className, }: BottomSheetViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/CommandPaletteView.d.ts

@@ -10,6 +10,15 @@ export interface PaletteCommand {
     action: () => void;
 }
 export interface CommandPaletteViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     open: boolean;
     onClose: () => void;
     commands: PaletteCommand[];
@@ -18,4 +27,4 @@ export interface CommandPaletteViewProps {
     accentColor?: string;
 }
 /** Cmd-K style launcher: fuzzy filter + ↑/↓/Enter/Esc keyboard navigation. */
-export declare function CommandPaletteView({ open, onClose, commands, placeholder, emptyText, accentColor, }: CommandPaletteViewProps): import('react').ReactPortal | null;
+export declare function CommandPaletteView({ testId, open, onClose, commands, placeholder, emptyText, accentColor, }: CommandPaletteViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/ContextMenuView.d.ts

@@ -1,6 +1,15 @@
 export interface ContextMenuItem {
     id: string;
     label: string;
+    /**
+     * A line under the label, for a menu whose entries need explaining.
+     *
+     * Most items do not want one — a menu of verbs reads faster without a
+     * paragraph under each. It earns its place where choosing wrongly costs
+     * something and the label alone cannot say so: an action that pauses a
+     * process, or one that is unavailable and owes the reader a reason.
+     */
+    description?: string;
     icon?: React.ReactNode;
     iconColor?: string;
     shortcut?: string;
@@ -12,6 +21,15 @@ export interface ContextMenuItem {
 }
 export type ContextMenuWidth = 'auto' | 'sm' | 'md' | 'lg' | number;
 export interface ContextMenuViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     items: ContextMenuItem[];
     anchorEl: HTMLElement | null;
     open: boolean;
@@ -25,4 +43,4 @@ export interface ContextMenuViewProps {
     };
     align?: 'auto' | 'left' | 'right';
 }
-export declare function ContextMenuView({ items, anchorEl, open, onClose, width, rounded, matchAnchorWidth, position, align, }: ContextMenuViewProps): import('react').ReactPortal | null;
+export declare function ContextMenuView({ testId, items, anchorEl, open, onClose, width, rounded, matchAnchorWidth, position, align, }: ContextMenuViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/DrawerView.d.ts

@@ -2,6 +2,15 @@ import { ReactNode } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export type DrawerEdge = 'left' | 'right' | 'top' | 'bottom';
 export interface DrawerViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     open: boolean;
     onClose: () => void;
     edge?: DrawerEdge;
@@ -12,4 +21,4 @@ export interface DrawerViewProps {
     duiSize?: DuiSize;
     className?: string;
 }
-export declare function DrawerView({ open, onClose, edge, title, children, size, duiSize, className, }: DrawerViewProps): import('react').ReactPortal | null;
+export declare function DrawerView({ testId, open, onClose, edge, title, children, size, duiSize, className, }: DrawerViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/InfoPopupView.d.ts

@@ -12,6 +12,18 @@ export interface InfoPopupViewProps {
     footer?: string;
     wikiLabel?: string;
     wikiHref?: string;
+    /**
+     * Open the docs in the host app instead of the browser.
+     *
+     * `wikiHref` assumes the documentation is a URL. An app whose docs are a
+     * panel of its own has nowhere to point one -- and inside an embedded host
+     * (a VS Code webview, an iframe with no top-level navigation) an anchor to
+     * an internal route does nothing at all, silently. Given this, the footer
+     * becomes a button and the app decides what "open the wiki" means.
+     *
+     * Takes precedence over `wikiHref` when both are given.
+     */
+    onWikiOpen?: () => void;
     width?: number;
 }
-export declare function InfoPopupView({ open, onClose, anchorEl, title, description, items, footer, wikiLabel, wikiHref, width, }: InfoPopupViewProps): import('react').ReactPortal | null;
+export declare function InfoPopupView({ open, onClose, anchorEl, title, description, items, footer, wikiLabel, wikiHref, onWikiOpen, width, }: InfoPopupViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/ModalView.d.ts

@@ -1,13 +1,29 @@
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 /**
  * 'popout' — centered overlay with backdrop, portalled to document.body (default)
  * 'inline' — bare card with no backdrop, no portal; parent controls positioning
  */
 export type ModalMode = 'popout' | 'inline';
 export interface ModalViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     open: boolean;
     onClose: () => void;
-    title?: string;
+    /**
+     * Rendered in the header at title weight.
+     *
+     * A node rather than a string, so a header can carry two registers on one
+     * line — a subject and a quieter label for what you are doing to it — which
+     * a single styled string cannot express.
+     */
+    title?: React.ReactNode;
     /** Secondary text shown below the title in the header */
     subtitle?: React.ReactNode;
     /** Node rendered to the left of the title block — e.g. a coloured icon circle */
@@ -47,4 +63,4 @@ export interface ModalViewProps {
     /** Extra styles merged onto the body div (e.g. flex column layout for nested flex children) */
     bodyStyle?: React.CSSProperties;
 }
-export declare function ModalView({ open, onClose, title, subtitle, headerIcon, children, footerLeft, footerRight, size, showCloseIcon, headerColor, headerGradient, headerRight, noPadding, elevated, mode, maxHeight, height, bodyStyle, }: ModalViewProps): import("react").JSX.Element | null;
+export declare function ModalView({ testId, open, onClose, title, subtitle, headerIcon, children, footerLeft, footerRight, size, showCloseIcon, headerColor, headerGradient, headerRight, noPadding, elevated, mode, maxHeight, height, bodyStyle, }: ModalViewProps): import("react").JSX.Element | null;