@salilvnair/dui 1.0.7 → 1.0.8

package/dist/lib/components/button/AIButtonView.d.ts

@@ -1,6 +1,15 @@
 import { DuiSize, DuiRadius, DuiWidth, DuiFontStyle } from '../../core/DuiTypes';
 export type AIButtonAction = 'generate' | 'fuzz' | 'explain' | 'fix' | 'ask' | 'suggest';
 export interface AIButtonViewProps {
+    /**
+     * 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;
     action?: AIButtonAction;
     label?: string;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -17,4 +26,4 @@ export interface AIButtonViewProps {
     color?: string;
     fontStyle?: DuiFontStyle;
 }
-export declare function AIButtonView({ action, label, onClick, loading, disabled, size, compact, accentColor, className, width, borderRadius, color, fontStyle, }: AIButtonViewProps): import("react").JSX.Element;
+export declare function AIButtonView({ testId, action, label, onClick, loading, disabled, size, compact, accentColor, className, width, borderRadius, color, fontStyle, }: AIButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/ActionButtonView.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { DuiSize, DuiRadius, DuiWidth, DuiFontStyle } from '../../core/DuiTypes';
+export interface ActionButtonViewProps {
+    /**
+     * 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;
+    label?: ReactNode;
+    children?: ReactNode;
+    /**
+     * Rendered before the label.
+     *
+     * A function receives the size's own icon size, which is how it ends up
+     * identical to the sparkle on an `AIButtonView` beside it — passing a node
+     * with a hand-picked size is how two buttons in one row come to disagree by
+     * a pixel.
+     */
+    icon?: ReactNode | ((iconSize: number) => ReactNode);
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    title?: string;
+    /** Falls back to the DuiProvider size when omitted. */
+    size?: DuiSize;
+    /**
+     * The tone the fill, border and text are mixed from.
+     *
+     * Defaults to the provider's colour rather than to the AI accent: this
+     * button belongs to whatever surface it sits on.
+     */
+    accentColor?: string;
+    className?: string;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    fontStyle?: DuiFontStyle;
+}
+export declare function ActionButtonView({ testId, label, children, icon, onClick, disabled, title, size, accentColor, className, width, borderRadius, color, fontStyle, }: ActionButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/BookmarkButtonView.d.ts

@@ -1,5 +1,14 @@
 import { DuiSize } from '../../core/DuiTypes';
 export interface BookmarkButtonViewProps {
+    /**
+     * 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;
     saved: boolean;
     onChange: (saved: boolean) => void;
     size?: DuiSize;
@@ -7,4 +16,4 @@ export interface BookmarkButtonViewProps {
     className?: string;
 }
 /** Animated bookmark/save toggle button. */
-export declare function BookmarkButtonView({ saved, onChange, size, color, className, }: BookmarkButtonViewProps): import("react").JSX.Element;
+export declare function BookmarkButtonView({ testId, saved, onChange, size, color, className, }: BookmarkButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/FabView.d.ts

@@ -6,6 +6,15 @@ export interface FabAction {
     onClick: () => void;
 }
 export interface FabViewProps {
+    /**
+     * 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;
     icon?: ReactNode;
     /** Extended FAB: renders `label` beside the icon. */
     label?: string;
@@ -17,4 +26,4 @@ export interface FabViewProps {
     color?: string;
     className?: string;
 }
-export declare function FabView({ icon, label, onClick, actions, position, size, color, className, }: FabViewProps): import("react").JSX.Element;
+export declare function FabView({ testId, icon, label, onClick, actions, position, size, color, className, }: FabViewProps): import("react").JSX.Element;

package/dist/lib/components/button/FollowButtonView.d.ts

@@ -1,5 +1,14 @@
 import { DuiSize } from '../../core/DuiTypes';
 export interface FollowButtonViewProps {
+    /**
+     * 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;
     following: boolean;
     onChange: (following: boolean) => void;
     size?: DuiSize;
@@ -7,4 +16,4 @@ export interface FollowButtonViewProps {
     className?: string;
 }
 /** Follow/following state-toggle button — swaps label + style, "Unfollow" on hover while following. */
-export declare function FollowButtonView({ following, onChange, size, color, className, }: FollowButtonViewProps): import("react").JSX.Element;
+export declare function FollowButtonView({ testId, following, onChange, size, color, className, }: FollowButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/HoldToConfirmView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties, ReactNode } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface HoldToConfirmViewProps {
+    /**
+     * 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;
     onConfirm: () => void;
     /** Hold duration in ms required to trigger. Default 900. */
@@ -11,4 +20,4 @@ export interface HoldToConfirmViewProps {
     style?: CSSProperties;
 }
 /** Press-and-hold with a radial fill that must complete before the destructive action fires. */
-export declare function HoldToConfirmView({ children, onConfirm, duration, size, color, className, style, }: HoldToConfirmViewProps): import("react").JSX.Element;
+export declare function HoldToConfirmView({ testId, children, onConfirm, duration, size, color, className, style, }: HoldToConfirmViewProps): import("react").JSX.Element;

package/dist/lib/components/button/LikeButtonView.d.ts

@@ -1,5 +1,14 @@
 import { DuiSize } from '../../core/DuiTypes';
 export interface LikeButtonViewProps {
+    /**
+     * 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;
     liked: boolean;
     onChange: (liked: boolean) => void;
     count?: number;
@@ -8,4 +17,4 @@ export interface LikeButtonViewProps {
     className?: string;
 }
 /** Animated heart/like toggle button — pop animation on like. */
-export declare function LikeButtonView({ liked, onChange, count, size, color, className, }: LikeButtonViewProps): import("react").JSX.Element;
+export declare function LikeButtonView({ testId, liked, onChange, count, size, color, className, }: LikeButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/MorphingIconButtonView.d.ts

@@ -2,6 +2,15 @@ import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export type MorphIconPreset = 'play-pause' | 'menu-close' | 'sun-moon';
 export interface MorphingIconButtonViewProps {
+    /**
+     * 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;
     preset: MorphIconPreset;
     active: boolean;
     onClick: () => void;
@@ -11,4 +20,4 @@ export interface MorphingIconButtonViewProps {
     style?: CSSProperties;
 }
 /** The icon itself SVG-path-morphs between two states instead of a crossfade/swap. */
-export declare function MorphingIconButtonView({ preset, active, onClick, size, color, className, style, }: MorphingIconButtonViewProps): import("react").JSX.Element;
+export declare function MorphingIconButtonView({ testId, preset, active, onClick, size, color, className, style, }: MorphingIconButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/SegmentedView.d.ts

@@ -6,6 +6,15 @@ export interface SegmentedOption {
     icon?: ReactNode;
 }
 export interface SegmentedViewProps {
+    /**
+     * 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: SegmentedOption[];
     value: string;
     onChange: (id: string) => void;
@@ -14,4 +23,4 @@ export interface SegmentedViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function SegmentedView({ options, value, onChange, size, accentColor, className, style, }: SegmentedViewProps): import("react").JSX.Element;
+export declare function SegmentedView({ testId, options, value, onChange, size, accentColor, className, style, }: SegmentedViewProps): import("react").JSX.Element;

package/dist/lib/components/button/ThemeToggleView.d.ts

@@ -1,5 +1,14 @@
 import { IconButtonSize } from './IconButtonView';
 export interface ThemeToggleViewProps {
+    /**
+     * 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;
     theme: 'dark' | 'light';
     onToggle: () => void;
     size?: IconButtonSize;
@@ -9,4 +18,4 @@ export interface ThemeToggleViewProps {
 }
 /** Sun/moon icon-swap button — no app-specific theme logic, just renders
  * the icon for the *current* theme and calls onToggle on click. */
-export declare function ThemeToggleView({ theme, onToggle, size, sunColor, moonColor, className, }: ThemeToggleViewProps): import("react").JSX.Element;
+export declare function ThemeToggleView({ testId, theme, onToggle, size, sunColor, moonColor, className, }: ThemeToggleViewProps): import("react").JSX.Element;

package/dist/lib/components/button/VoteWidgetView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface VoteWidgetViewProps {
+    /**
+     * 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;
     score: number;
     userVote: 'up' | 'down' | null;
     onVote: (vote: 'up' | 'down' | null) => void;
@@ -10,4 +19,4 @@ export interface VoteWidgetViewProps {
     style?: CSSProperties;
 }
 /** Upvote/downvote counter control. */
-export declare function VoteWidgetView({ score, userVote, onVote, size, color, className, style, }: VoteWidgetViewProps): import("react").JSX.Element;
+export declare function VoteWidgetView({ testId, score, userVote, onVote, size, color, className, style, }: VoteWidgetViewProps): import("react").JSX.Element;

package/dist/lib/components/chips/ChipView.d.ts

@@ -3,6 +3,15 @@ import { DuiSize } from '../../core/DuiTypes';
 /** `'xs'` is a sub-sm alias kept for dense protocol badges. */
 export type ChipViewSize = 'xs' | DuiSize;
 export interface ChipViewProps {
+    /**
+     * 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;
     label: string;
     /** Leading glyph — pass a DUI icon component (e.g. `<TargetGoalIcon size={12} />`),
      *  never an emoji. Sized/colored by the caller; the chip just positions it. */
@@ -16,9 +25,31 @@ export interface ChipViewProps {
     /** true = rounded-full (default), false = token border-radius */
     rounded?: boolean;
     onClick?: () => void;
+    /**
+     * Makes the chip removable: a dismiss control **inside** the chip, after the
+     * label.
+     *
+     * Inside, not beside. A remove button placed next to the chip is a second
+     * object that has to be kept aligned to it, and it comes apart the moment the
+     * row wraps or the size changes — so the chip owns it.
+     */
+    onRemove?: () => void;
+    /** Screen-reader name for the dismiss control. Defaults to `Remove <label>`. */
+    removeLabel?: string;
+    /**
+     * Cap the label and end it with an ellipsis past that width.
+     *
+     * A tag, a filename or a header value can be arbitrarily long, and one long
+     * chip in a wrapping row otherwise stretches the whole way across and pushes
+     * every chip after it onto a line of its own. The full text stays in the
+     * tooltip, which is what makes truncating it safe.
+     */
+    maxLabelWidth?: number | string;
     /** Filled background instead of translucent */
     active?: boolean;
     className?: string;
     style?: CSSProperties;
+    /** Tooltip. Defaults to the label. */
+    title?: string;
 }
-export declare function ChipView({ label, icon, color, bg, size, rounded, onClick, active, className, style, }: ChipViewProps): import("react").JSX.Element;
+export declare function ChipView({ testId, label, icon, color, bg, size, rounded, onClick, onRemove, removeLabel, maxLabelWidth, active, className, style, title, }: ChipViewProps): import("react").JSX.Element;

package/dist/lib/components/chips/CommandChipView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface CommandChipViewProps {
+    /**
+     * 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;
     /** The command text — also what is copied to the clipboard on click. */
     command: string;
     /** DUI size — shares the SAME height/padding/font tokens as ButtonView, so a
@@ -25,4 +34,4 @@ export interface CommandChipViewProps {
  * the same `size`. Degrades to a plain, selectable pill when the Clipboard API
  * is unavailable (non-secure context).
  */
-export declare function CommandChipView({ command, size, color, copiedLabel, copyable, className, style, }: CommandChipViewProps): import("react").JSX.Element;
+export declare function CommandChipView({ testId, command, size, color, copiedLabel, copyable, className, style, }: CommandChipViewProps): import("react").JSX.Element;

package/dist/lib/components/display/BadgeChipView.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, ReactNode } from 'react';
+export type BadgeChipSize = '2xs' | 'xs' | 'sm' | 'md';
+export interface BadgeChipViewProps {
+    children: ReactNode;
+    /**
+     * The chip's colour, used for text, fill, border and the top highlight.
+     *
+     * One value rather than a palette per part: a chip whose border and text
+     * disagree stops reading as a single object, and every call site that has
+     * tried to tune them separately has produced something worse.
+     */
+    tone?: string;
+    size?: BadgeChipSize;
+    /**
+     * Drop the tint and the border, keeping only the text.
+     *
+     * For a chip in a dense row where a dozen of them would be more border than
+     * content — the colour still carries the meaning.
+     */
+    plain?: boolean;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function BadgeChipView({ children, tone, size, plain, title, className, style, }: BadgeChipViewProps): import("react").JSX.Element;

package/dist/lib/components/display/DonutView.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties } from 'react';
+import { DonutSlice } from './hierarchy-layout';
+export interface DonutViewProps {
+    items: {
+        name: string;
+        value: number;
+        color?: string;
+        meta?: unknown;
+    }[];
+    size?: number;
+    /** Ring thickness as a fraction of the radius. */
+    thickness?: number;
+    /** Slices past this are rolled into one named remainder. */
+    maxSlices?: number;
+    accentColor?: string;
+    format?: (value: number) => string;
+    /** Draw the name/value list beside the ring. */
+    legend?: boolean;
+    centerLabel?: string;
+    onSelect?: (slice: DonutSlice) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * One level of a whole, as a ring.
+ *
+ * For the case a sunburst over-serves: a flat breakdown where the question is
+ * "how much of this is that", not "what is inside it". A leak report opens on
+ * one of these because the first thing worth knowing is whether the heap has
+ * one owner or fifty.
+ *
+ * The tail is rolled into a named remainder rather than dropped — see
+ * donutLayout. A gap in a chart that claims to be a whole reads as a bug.
+ */
+export declare function DonutView({ items, size, thickness, maxSlices, accentColor, format, legend, centerLabel, onSelect, className, style, }: DonutViewProps): import("react").JSX.Element;

package/dist/lib/components/display/EmptyStateView.d.ts

@@ -2,6 +2,20 @@ export interface EmptyStateAction {
     label: string;
     onClick: () => void;
 }
+export interface EmptyStateHint {
+    /**
+     * The control this describes.
+     *
+     * A node rather than a string so it can be the ACTUAL icon. Naming a glyph
+     * in words — "eye", "arrow" — asks the reader to translate a description
+     * back into the thing they will click, which is exactly the work the icon
+     * was supposed to save. A key name like `Ctrl+K` is still fine here; the
+     * point is that the hint shows whatever the button shows.
+     */
+    key: React.ReactNode;
+    /** What it does. */
+    text: string;
+}
 export interface EmptyStateViewProps {
     icon?: React.ReactNode;
     title: string;
@@ -10,5 +24,23 @@ export interface EmptyStateViewProps {
     accentColor?: string;
     compact?: boolean;
     className?: string;
+    /**
+     * Sit the icon in a tinted medallion instead of floating it.
+     *
+     * A small glyph at half opacity in the middle of a large empty pane reads as
+     * something that failed to load. Giving it a ground turns the same icon into
+     * a deliberate mark, which is the difference between "nothing here yet" and
+     * "something is broken" — and an empty state's whole job is to say the first
+     * one convincingly.
+     */
+    variant?: 'plain' | 'medallion';
+    /**
+     * What you could do next, as key/description pairs.
+     *
+     * An empty state is the one moment the reader has attention to spare and
+     * nothing to read, so it is the cheapest place to teach the two or three
+     * gestures the view depends on.
+     */
+    hints?: EmptyStateHint[];
 }
-export declare function EmptyStateView({ icon, title, message, action, accentColor, compact, className, }: EmptyStateViewProps): import("react").JSX.Element;
+export declare function EmptyStateView({ icon, title, message, action, accentColor, compact, className, variant, hints, }: EmptyStateViewProps): import("react").JSX.Element;

package/dist/lib/components/display/FileBrowserView.d.ts

@@ -0,0 +1,143 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+/**
+ * A directory listing — the rows a file manager shows.
+ *
+ * `FileListView` is a list of things being uploaded: it has progress bars and
+ * a remove button, and every row is going the same way. This is the other
+ * shape entirely — entries already exist somewhere, some are folders you
+ * descend into, some are files you act on, and some you can see but not touch.
+ *
+ * The row actions are supplied rather than fixed, because what you can do with
+ * a file depends on where it lives. A listing from a pod offers "open" and
+ * "download"; one from a bucket might offer a signed link; the table should not
+ * have to know. `show` on an action is how a row ends up with fewer buttons
+ * than its neighbour, which is the affordance doing the talking: a file with no
+ * open action is a file nothing here can render.
+ */
+export type FileBrowserKind = 'file' | 'dir' | 'link' | 'other';
+export type FileBrowserTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
+export interface FileBrowserEntry {
+    id: string;
+    name: string;
+    kind: FileBrowserKind;
+    /** Rendered by `formatSize`; omit where a size is meaningless (a folder). */
+    size?: number;
+    /** Free text — whatever the source calls a date. Not parsed. */
+    modified?: string;
+    /** Secondary column for a folder: `142 items`, `38 files`. */
+    detail?: string;
+    /** Short type badge — `csv`, `properties`, `binary`. */
+    badge?: string;
+    badgeTone?: FileBrowserTone;
+    /** Where a symlink points. Shown after the name. */
+    linkTarget?: string;
+    /**
+     * Visible but untouchable, with the reason.
+     *
+     * Kept in the list rather than filtered out: a listing that silently shows
+     * one fewer entry than the directory holds is worse than one showing a
+     * locked row, because only the second tells you to go and look at why.
+     */
+    disabledReason?: string;
+}
+export interface FileBrowserAction {
+    id: string;
+    /** Rendered inside a square button; supply a sized icon. */
+    icon: ReactNode;
+    /** Tooltip and accessible name. Required — an icon with no name is a rebus. */
+    label: string;
+    tone?: FileBrowserTone;
+    /** Return false to leave this row without the action. */
+    show?: (entry: FileBrowserEntry) => boolean;
+}
+export interface FileBrowserViewProps {
+    entries: FileBrowserEntry[];
+    /** Selecting a row. Single click, the way a file manager behaves. */
+    onSelect?: (entry: FileBrowserEntry) => void;
+    /**
+     * Briefly mark one row.
+     *
+     * For arriving from somewhere else — a search result, a deep link — where
+     * the row you came for is one of forty and the eye has no idea which. The
+     * caller clears it; a highlight that never fades becomes a second, competing
+     * selection.
+     */
+    highlightId?: string;
+    /** Hide the size column. A search hit has no size to show, and a column of
+     *  em dashes is worse than no column. */
+    showSize?: boolean;
+    /** Hide the modified column, for the same reason. */
+    showModified?: boolean;
+    /** Tighter rows and smaller chips, for a list inside a dialog. */
+    dense?: boolean;
+    /**
+     * The literal a search matched on, highlighted wherever it appears.
+     *
+     * Pass the plain text, not the glob or the regex that was typed — this is
+     * for the eye, and `*invoice*` highlighted literally would find nothing.
+     * When a row's name is a whole path, the directory in front of the filename
+     * dims at the same time: three weights on one line — dim ancestry, the
+     * matched run, the rest of the name — say WHY this row is a result, which a
+     * uniform grey path never does.
+     */
+    match?: string;
+    /** A folder was opened, or a file activated. */
+    onOpen?: (entry: FileBrowserEntry) => void;
+    /**
+     * Right-click on a row.
+     *
+     * The row actions are the two or three verbs worth a permanent icon; a file
+     * manager has always had more than that, and putting the rest on every row
+     * would bury the ones people use. The caller gets the entry and the event so
+     * it can put a menu where the pointer is.
+     */
+    onContextMenu?: (entry: FileBrowserEntry, e: React.MouseEvent) => void;
+    /**
+     * Right-click on the list itself, away from any row.
+     *
+     * The empty area below the last row is still the directory, and a file
+     * manager has always let you act on it there — "search here", "refresh",
+     * "download all of this". Without a handler the browser's own menu appears
+     * instead, offering Copy and Select All over a list that has neither.
+     */
+    onEmptyContextMenu?: (e: React.MouseEvent) => void;
+    actions?: FileBrowserAction[];
+    onAction?: (actionId: string, entry: FileBrowserEntry) => void;
+    /** Offer a `..` row. Omit `onParent` at the root rather than disabling it. */
+    onParent?: () => void;
+    selectedId?: string;
+    /**
+     * The wash on the selected row. Defaults to the neutral one below.
+     *
+     * Selection is a state, not an event, so it does not take the view's accent:
+     * a list where the selected row wears the same colour as every meaningful
+     * badge on it has nowhere left to go when something actually needs saying.
+     */
+    selectionColor?: string;
+    /** The wash on the arriving row. Defaults to the amber below. */
+    flashColor?: string;
+    /** Shown in place of the rows when there are none. */
+    emptyText?: ReactNode;
+    /**
+     * The listing is on its way.
+     *
+     * Draws column-aligned placeholder rows instead of the empty state, because
+     * "nothing here" and "not here yet" are different answers and only one of
+     * them is worth reading. The component draws it rather than the caller: the
+     * column widths are known here and nowhere else, and a skeleton whose
+     * columns do not line up with the table it precedes makes the real rows look
+     * like they jumped.
+     */
+    loading?: boolean;
+    /** A summary line under the rows — counts, the command that ran. */
+    footer?: ReactNode;
+    showHeader?: boolean;
+    size?: DuiSize;
+    accentColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Three significant figures, so a column of sizes lines up and reads. */
+export declare function formatSize(bytes?: number): string;
+export declare function FileBrowserView({ entries, onOpen, onContextMenu, onEmptyContextMenu, onSelect, highlightId, showSize, showModified, dense, actions, onAction, onParent, selectedId, match, selectionColor, flashColor, emptyText, loading, footer, showHeader, size, accentColor, className, style, }: FileBrowserViewProps): import("react").JSX.Element;

package/dist/lib/components/display/FileBrowserView.test.d.ts

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

package/dist/lib/components/display/FindingCardView.d.ts

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode } from 'react';
+export type FindingSeverity = 'critical' | 'warning' | 'info' | 'success';
+export interface FindingCardViewProps {
+    severity: FindingSeverity;
+    title: ReactNode;
+    /** Small monospace label after the title — a rule id, a category, a source. */
+    meta?: ReactNode;
+    /** One or two sentences. What was found, with the numbers that matter. */
+    detail?: ReactNode;
+    /** Anything structured — a stack, a table, a chart. Sits below the detail. */
+    children?: ReactNode;
+    /** What to do about it. Rendered apart from the detail, because it is advice. */
+    remediation?: ReactNode;
+    /** Buttons on the right of the header — Ask AI, dismiss, open. */
+    actions?: ReactNode;
+    /** Colour override; otherwise the severity decides. */
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A diagnostic finding: something was detected, here is what and what to do.
+ *
+ * Distinct from a callout or a banner, which announce a state. A finding is the
+ * output of a rule, and it always has the same four parts in the same order —
+ * severity, what was found, the evidence, what to change. Fixing that order in
+ * a component is most of the value: a reader who has seen one finding knows
+ * where to look in every other one, and a rule author cannot accidentally bury
+ * the remediation.
+ *
+ * The severity paints a left edge rather than filling the card. A wall of
+ * findings where each is a block of tinted background is exhausting to read and
+ * makes the critical one no easier to spot than the rest; a 3px edge is enough
+ * to sort them by eye and leaves the content on the ordinary surface.
+ */
+export declare function FindingCardView({ severity, title, meta, detail, children, remediation, actions, color, className, style, }: FindingCardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/FlameGraphView.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+import { HierarchyNode, FlameCell } from './hierarchy-layout';
+export interface FlameGraphViewProps {
+    root: HierarchyNode;
+    width?: number;
+    /** Height of one row. */
+    rowHeight?: number;
+    maxDepth?: number;
+    /** Cells narrower than this fraction of the width are not drawn. */
+    minWidth?: number;
+    accentColor?: string;
+    format?: (value: number) => string;
+    /** Click a frame to make it the new root. */
+    onZoom?: (cell: FlameCell) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Merged stacks, as stacked bars.
+ *
+ * The standard way to read a profile: width is how much of the sample a frame
+ * accounts for, and a frame sits on top of its caller. A wide plateau near the
+ * top is where the time or the memory actually is; a tall narrow spire is deep
+ * but cheap, and the eye can tell those apart instantly in a way it cannot
+ * from a call tree.
+ *
+ * Drawn as DOM rather than canvas so a frame can carry a title, be clicked and
+ * be found by the browser's own search. A merged thread dump is hundreds of
+ * cells, not the hundreds of thousands a CPU profile produces, and that is
+ * comfortably inside what the DOM handles.
+ */
+export declare function FlameGraphView({ root, width, rowHeight, maxDepth, minWidth, accentColor, format, onZoom, className, style, }: FlameGraphViewProps): import("react").JSX.Element;