@salilvnair/dui 1.0.7 → 1.0.9

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

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface SpectrumSliderViewProps {
+    /**
+     * 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: number;
     min?: number;
     max?: number;
@@ -13,4 +22,4 @@ export interface SpectrumSliderViewProps {
     style?: CSSProperties;
 }
 /** The slider track is a live rendered gradient spectrum; the handle shows a magnified live-color preview bubble while dragging. */
-export declare function SpectrumSliderView({ value, min, max, onChange, gradient, width, size, className, style, }: SpectrumSliderViewProps): import("react").JSX.Element;
+export declare function SpectrumSliderView({ testId, value, min, max, onChange, gradient, width, size, className, style, }: SpectrumSliderViewProps): import("react").JSX.Element;

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

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize, DuiRadius } from '../../core/DuiTypes';
 export interface StepperInputViewProps {
+    /**
+     * 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: number;
     onChange: (value: number) => void;
     min?: number;
@@ -13,4 +22,4 @@ export interface StepperInputViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function StepperInputView({ value, onChange, min, max, step, disabled, size, borderRadius, color, className, style, }: StepperInputViewProps): import("react").JSX.Element;
+export declare function StepperInputView({ testId, value, onChange, min, max, step, disabled, size, borderRadius, color, className, style, }: StepperInputViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { CSSProperties } from 'react';
+export interface SwatchOption {
+    id: string;
+    /** Shown as the tooltip and the accessible name — never as visible text. */
+    label: string;
+    /** The one colour that stands for this option. */
+    color: string;
+}
+export interface SwatchPickerViewProps {
+    /**
+     * 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: SwatchOption[];
+    value: string;
+    onChange: (id: string) => void;
+    size?: number;
+    /**
+     * Draw each option's first letter inside its swatch.
+     *
+     * Colour alone is enough to CHOOSE by and not enough to NAME by: pointing
+     * someone at "the blue one" fails the moment two palettes are both blue, and
+     * a tooltip only helps a reader who already went looking. The initial makes
+     * the row sayable out loud without turning it back into a list of words.
+     *
+     * Needs room — below about 14px the letter is a smudge — so the swatch is
+     * given a floor when this is on.
+     */
+    initials?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SwatchPickerView({ testId, options, value, onChange, size, initials, className, style, }: SwatchPickerViewProps): import("react").JSX.Element;

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

@@ -8,6 +8,15 @@ export interface SwitchGroupItem {
     disabled?: boolean;
 }
 export interface SwitchGroupViewProps {
+    /**
+     * 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;
     title?: string;
     items: SwitchGroupItem[];
     /** Set of currently-enabled item values. */
@@ -18,4 +27,4 @@ export interface SwitchGroupViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function SwitchGroupView({ title, items, checked, onChange, size, color, className, style, }: SwitchGroupViewProps): import("react").JSX.Element;
+export declare function SwitchGroupView({ testId, title, items, checked, onChange, size, color, className, style, }: SwitchGroupViewProps): import("react").JSX.Element;

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

@@ -19,6 +19,15 @@ export interface TabItem {
 }
 export type TabVariant = 'pill' | 'underline' | 'chip' | 'picker';
 export interface TabViewProps {
+    /**
+     * 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;
     tabs: TabItem[];
     activeTab: string;
     onChange: (id: string) => void;
@@ -35,4 +44,4 @@ export interface TabViewProps {
     activeColor?: string;
     fontStyle?: DuiFontStyle;
 }
-export declare function TabView({ tabs, activeTab, onChange, size, variant, accentColor, className, width, borderRadius, color, activeColor, fontStyle, }: TabViewProps): import("react").JSX.Element;
+export declare function TabView({ testId, tabs, activeTab, onChange, size, variant, accentColor, className, width, borderRadius, color, activeColor, fontStyle, }: TabViewProps): import("react").JSX.Element;

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

@@ -1,4 +1,13 @@
 export interface TagInputViewProps {
+    /**
+     * 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;
     tags: string[];
     onChange: (tags: string[]) => void;
     placeholder?: string;
@@ -7,4 +16,4 @@ export interface TagInputViewProps {
     disabled?: boolean;
     className?: string;
 }
-export declare function TagInputView({ tags, onChange, placeholder, accentColor, maxTags, disabled, className, }: TagInputViewProps): import("react").JSX.Element;
+export declare function TagInputView({ testId, tags, onChange, placeholder, accentColor, maxTags, disabled, className, }: TagInputViewProps): import("react").JSX.Element;

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

@@ -28,6 +28,15 @@ export interface TextInputViewProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /** When true: no border, transparent bg, no focus ring — for embedding inside containers that supply their own chrome */
     naked?: boolean;
     width?: DuiWidth;
+    /**
+     * Styles for the inner `<input>`, where `style` reaches only the box.
+     *
+     * `style` is the container's — its border, height and width — so a caller
+     * setting `fontSize` there was styling the wrapper and watching the text
+     * ignore it. A title being renamed in place wants its own type size while
+     * keeping everything else this control brings.
+     */
+    inputStyle?: React.CSSProperties;
     borderRadius?: DuiRadius | number;
     /** Text color override */
     color?: string;

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,39 @@
+/**
+ * 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.
+ */
+/**
+ * Characters that would otherwise turn plain text into markup.
+ *
+ * Escaped only where they would ACTUALLY be markup, which is narrower than
+ * "at the start of a line" and the difference matters.
+ *
+ * CommonMark needs a space after the marker: `# Title` is a heading, `#14` is
+ * the text `#14`. Escaping the second produced `\#14`, which renders as `#14`
+ * and so looked right — while GitHub quietly stopped linking it to issue 14. A
+ * reference typed into a comment box arrived dead on github.com and dead in
+ * dkgh, for a heading nobody was writing.
+ *
+ * Same rule for the list markers: `- item` is a bullet, `-5` is a number.
+ * `>` is the exception — a blockquote needs no space, so it always escapes.
+ */
+export declare function escapeText(text: string): string;
+/**
+ * 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/markdown-serialise.test.d.ts

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

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;