@salilvnair/dui 1.0.7 → 1.0.9

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;

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

@@ -0,0 +1,28 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface GroupHeaderViewProps {
+    /** The group's name. Set in small caps, because it is a label not a heading. */
+    name: string;
+    /** How many are in it. */
+    count?: number | string;
+    /**
+     * What the group is worth knowing at a glance — a chip, a count of the ones
+     * that need attention.
+     *
+     * Sits after the rule, hard right, so a column of group headers puts every
+     * summary in the same place and the eye can run straight down them.
+     */
+    summary?: ReactNode;
+    /** Tints the name — for the pile nobody owns. */
+    tone?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The line above a group of things.
+ *
+ * Name, size, a rule that eats the remaining width, and the one fact about the
+ * group worth carrying. The rule is what makes a stack of these read as
+ * sections rather than as a list with bold entries in it, and it costs nothing
+ * — it is the leftover space, drawn.
+ */
+export declare function GroupHeaderView({ name, count, summary, tone, className, style, }: GroupHeaderViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+export interface IssueCardSkeletonViewProps {
+    /** Leave room for the evidence strip, when the board shows screenshots. */
+    media?: boolean;
+    /**
+     * How long the title bar is, 0–1.
+     *
+     * Varied by the caller across a grid so the placeholder reads as a list of
+     * different things rather than a printed pattern — a wall of identical bars
+     * looks like a rendering bug, which is the opposite of reassuring.
+     */
+    titleFill?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * An issue card that has not arrived yet.
+ *
+ * Deliberately the twin of IssueCardView: same padding, radius, gaps and row
+ * order, so the real card lands exactly where the placeholder stood and the
+ * grid does not jump under a cursor already on its way to a click.
+ *
+ * A skeleton rather than a spinner because the shape is the information — a
+ * reader can see a board is coming, roughly how much of it, and start moving
+ * before the data lands. A centred spinner says only "wait", and a centred
+ * panel that takes over the whole view says "something is wrong".
+ */
+export declare function IssueCardSkeletonView({ media, titleFill, className, style, }: IssueCardSkeletonViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface IssueCardViewProps {
+    /** The identifier, shown as given — `#41`, `PROJ-8`. */
+    reference?: string;
+    title: string;
+    /**
+     * The chips beside the reference — module, environment, whatever classifies
+     * this one. Rendered by the caller so it can use the same chip component the
+     * rest of the screen uses.
+     */
+    chips?: ReactNode;
+    /** Evidence: a screenshot strip, a thumbnail. Sits under the title. */
+    media?: ReactNode;
+    /** The left of the footer: an avatar, or the word for having no owner. */
+    owner?: ReactNode;
+    /** Beside the owner: priority, state. */
+    mark?: ReactNode;
+    /** The right of the footer: age, comment count, a stale chip. */
+    meta?: ReactNode;
+    /** Lift the card — selected, or dragged over. */
+    selected?: boolean;
+    accentColor?: string;
+    onClick?: () => void;
+    tooltip?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * One tracked item on a board — an issue, a ticket.
+ *
+ * The order is the whole component: reference and classification, then the
+ * sentence, then the evidence, then who and when. A reader who has scanned one
+ * card knows where to look on every other one, which is the only reason a board
+ * beats a table.
+ *
+ * The title is never truncated. A card whose sentence ends in an ellipsis makes
+ * you open the item to find out whether you cared, which is precisely the work
+ * the board existed to save; cards in a row may be different heights instead.
+ */
+export declare function IssueCardView({ reference, title, chips, media, owner, mark, meta, selected, accentColor, onClick, tooltip, className, style, }: IssueCardViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { CSSProperties } from 'react';
+import { Span } from './lane-scale';
+export interface LaneSeries {
+    id: string;
+    label: string;
+    points: {
+        at: number;
+        value: number;
+    }[];
+    color?: string;
+    /** Fill under the line. Off for a series read as a level rather than a volume. */
+    filled?: boolean;
+    /** Right-hand readout — usually the latest or peak value, already formatted. */
+    readout?: string;
+    /** Draw as ticks rising from the baseline instead of a line: events, not a level. */
+    kind?: 'line' | 'ticks';
+}
+export interface LaneMarker {
+    at: number;
+    label?: string;
+    color?: string;
+}
+export interface LaneChartViewProps {
+    series: LaneSeries[];
+    markers?: LaneMarker[];
+    laneHeight?: number;
+    /** Clamp the axis instead of deriving it from the data. */
+    window?: Span;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Several measurements over one time axis.
+ *
+ * Telemetry read as a stack of lanes rather than one chart with many lines:
+ * heap in megabytes and CPU in percent share no y scale, and overlaying them
+ * forces either two axes or a normalisation that makes both meaningless.
+ * Separate lanes keep each series in its own units and still let the eye run
+ * a vertical line down the stack, which is the actual question — what else was
+ * happening when this happened.
+ *
+ * The axis is shared and computed across every series, for the same reason the
+ * swimlane's is: lanes scaled independently put simultaneous events in
+ * different columns.
+ */
+export declare function LaneChartView({ series, markers, laneHeight, window: fixedWindow, className, style, }: LaneChartViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+export interface LineDiffViewProps {
+    left: string;
+    right: string;
+    leftLabel?: string;
+    rightLabel?: string;
+    /** Shown beside the label — e.g. a filename, or "not present". */
+    leftNote?: string;
+    rightNote?: string;
+    /** A fixed height, or omit to fill a flex parent. */
+    height?: number | string;
+    /** Adds a "+n / −n" tally to each header. */
+    showTally?: boolean;
+    /**
+     * Colour of the two header labels.
+     *
+     * Defaults to error on the left and success on the right, which is the
+     * convention every diff uses: what left had and right does not is a removal.
+     */
+    leftTone?: string;
+    rightTone?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function LineDiffView({ left, right, leftLabel, rightLabel, leftNote, rightNote, height, showTally, leftTone, rightTone, className, style, }: LineDiffViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,61 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface LoadingStateViewProps {
+    /**
+     * The thing being waited for, drawn large.
+     *
+     * Deliberately the subject rather than a generic spinner: a reader glancing
+     * at the screen learns what is happening from the icon before they read a
+     * word of it.
+     */
+    icon?: ReactNode;
+    title: string;
+    message?: string;
+    accentColor?: string;
+    /** Matches EmptyStateView, so the two swap without the layout moving. */
+    compact?: boolean;
+    /**
+     * The medallion's box, in px.
+     *
+     * Defaulted from `compact`, and worth overriding in one case: a state that
+     * owns a whole panel rather than sitting inside a list. 54px centred in an
+     * empty tab reads as something that failed to load rather than as the
+     * subject of the screen. Pair it with a larger icon — `IconSize.hero`.
+     */
+    medallionSize?: number;
+    /**
+     * Seconds after which the wait stops being ordinary.
+     *
+     * A cluster on the other side of the world, behind a VPN, answers in seconds
+     * rather than milliseconds — and the reader cannot tell that from a hang. At
+     * this point the component says so itself instead of leaving them to guess.
+     * 0 disables it.
+     */
+    slowAfterSeconds?: number;
+    /** What to say once it has been slow. Replaces `message`. */
+    slowMessage?: string;
+    /** Offered only once the wait has gone long — Cancel, Try again, Go back. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Shown under the message: what is being fetched, step by step. */
+    hints?: {
+        key: ReactNode;
+        text: string;
+    }[];
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Waiting, said properly.
+ *
+ * The shape of EmptyStateView with a pulse and a clock. It exists because the
+ * alternative everywhere was a line of grey text — "Loading pods…", "Loading
+ * namespaces…" — which says nothing about what is being waited for, nothing
+ * about how long it has been, and looks identical whether the answer is a
+ * hundred milliseconds away or never coming.
+ *
+ * Three things it does that a spinner cannot: it names the subject, it changes
+ * its mind after a while, and it eventually offers a way out.
+ */
+export declare function LoadingStateView({ icon, title, message, accentColor, compact, medallionSize, slowAfterSeconds, slowMessage, action, hints, className, style, }: LoadingStateViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+export type PriorityMarkLevel = 'urgent' | 'high' | 'medium' | 'low' | 'none';
+export interface PriorityMarkViewProps {
+    level: PriorityMarkLevel;
+    /** Show the word as well as the ring. On by default. */
+    showLabel?: boolean;
+    /** Override the word — for a tracker that calls Urgent something else. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A priority, as a ring and a word.
+ *
+ * A ring rather than a filled dot, because status is already a filled dot
+ * everywhere else and the two sit side by side on the same row — two solid
+ * dots in different palettes read as one broken thing. The ring is the whole
+ * distinction, and it survives being 7px.
+ */
+export declare function PriorityMarkView({ level, showLabel, label, className, style, }: PriorityMarkViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,56 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface SetupOptionViewProps {
+    /** The route's name — `winget`, `Homebrew`, `Sign in with a browser`. */
+    title: string;
+    /** A short marker beside the title: `recommended`, `apt`, `needs admin`. */
+    tag?: string;
+    /**
+     * Lift it as the one to pick.
+     *
+     * Exactly one option in a set should carry this. A screen where every card is
+     * highlighted has no recommendation on it, only decoration.
+     */
+    recommended?: boolean;
+    /**
+     * The command to run, shown with a copy button — never a button that runs it.
+     *
+     * Installing software and authenticating are the reader's actions. A one-click
+     * "do it for me" here would be running an installer, or driving a credential
+     * flow, on somebody's behalf.
+     */
+    command?: string;
+    /** The language for the command block. Shell by default. */
+    language?: string;
+    /**
+     * What a reader needs in order to choose THIS one over the one beside it —
+     * not what the command does, which the command already says.
+     */
+    note?: ReactNode;
+    /** A control in the header: a link out, a picker, a button. */
+    action?: ReactNode;
+    /**
+     * The route's own controls, where a command is not the thing to show — a
+     * field to type into, a list to choose from.
+     *
+     * Sits where the command would, so a set of cards mixing the two still lines
+     * up: name, the thing you interact with, then the one line about when to
+     * pick it.
+     */
+    children?: ReactNode;
+    accentColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * One way to get something set up, among several.
+ *
+ * The shape every install or sign-in screen converges on: a name, the exact
+ * thing to run, and one line on when to pick it. Fixing that order in a
+ * component keeps a grid of routes scannable — a reader compares the same part
+ * of each card rather than re-reading whole paragraphs to find the command.
+ *
+ * The card never performs the route itself. It shows what to run and lets the
+ * reader run it, which is the only honest arrangement for actions that install
+ * software or reach a credential store.
+ */
+export declare function SetupOptionView({ title, tag, recommended, command, language, note, action, children, accentColor, className, style, }: SetupOptionViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+import { HierarchyNode, SunburstSlice } from './hierarchy-layout';
+export interface SunburstViewProps {
+    root: HierarchyNode;
+    size?: number;
+    /** Rings drawn outward from the centre. */
+    maxDepth?: number;
+    /** Slices thinner than this share of the whole are dropped. */
+    minShare?: number;
+    accentColor?: string;
+    /** Format the value for the centre label and tooltips. */
+    format?: (value: number) => string;
+    /** Shown in the hole when nothing is hovered. */
+    centerLabel?: string;
+    onSelect?: (slice: SunburstSlice) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A hierarchy as concentric rings.
+ *
+ * The profiler's idiom for "what is big and what is inside it": each ring is a
+ * level, each slice is sized by its share, and a child sits inside the arc of
+ * its parent. Reading outward from the centre follows containment, which is
+ * what a treemap makes you infer from adjacency instead.
+ *
+ * Hue is derived from depth and position rather than from a palette, so a
+ * hierarchy of any width gets distinguishable neighbours without the caller
+ * supplying colours. Lightness falls with depth, which is what makes the
+ * nesting legible at a glance — outer rings recede.
+ */
+export declare function SunburstView({ root, size, maxDepth, minShare, accentColor, format, centerLabel, onSelect, className, style, }: SunburstViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { CSSProperties } from 'react';
+import { Span } from './lane-scale';
+export interface SwimlaneSegment extends Span {
+    /** What state this stretch was in. Drives the colour via `colors`. */
+    state: string;
+    /** Anything the caller wants back on hover or click. */
+    meta?: unknown;
+}
+export interface SwimlaneRow {
+    id: string;
+    label: string;
+    segments: SwimlaneSegment[];
+}
+export interface SwimlaneMarker {
+    at: number;
+    label?: string;
+    color?: string;
+}
+export interface SwimlaneChartViewProps {
+    rows: SwimlaneRow[];
+    /** state → colour. A state with no entry is drawn in the muted default. */
+    colors: Record<string, string>;
+    /** Vertical marks across every lane — a dump taken, a GC, a deploy. */
+    markers?: SwimlaneMarker[];
+    rowHeight?: number;
+    /** Width of the label gutter. */
+    labelWidth?: number;
+    /** Clamp the axis instead of deriving it from the data. */
+    window?: Span;
+    format?: (span: Span) => string;
+    onSelect?: (row: SwimlaneRow, segment: SwimlaneSegment) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Entities on a shared timeline, coloured by what they were doing.
+ *
+ * Threads by state, connections by lifetime, pods by phase — the shape is the
+ * same whenever the question is "what was each of these doing, and did they do
+ * it at the same time". The vertical alignment IS the information: three rows
+ * turning red within the same 40ms is a lock, and no table of states will ever
+ * show that.
+ *
+ * Every lane shares one axis, computed across all rows. Scaling lanes
+ * independently would put simultaneous events in different columns, which
+ * destroys the only thing this chart is for.
+ */
+export declare function SwimlaneChartView({ rows, colors, markers, rowHeight, labelWidth, window: fixedWindow, format, onSelect, className, style, }: SwimlaneChartViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { CSSProperties } from 'react';
+export interface TableSkeletonColumn {
+    /**
+     * A number is a fixed pixel width; a string is used as-is.
+     *
+     * `'flex'` takes the remaining space, which is how the name column in a file
+     * list behaves — the one column whose width is not known in advance.
+     */
+    width: number | string | 'flex';
+    /** Draw this cell's bar shorter than its column, as real content usually is. */
+    fill?: number;
+    align?: 'left' | 'right';
+}
+export interface TableSkeletonViewProps {
+    columns: TableSkeletonColumn[];
+    /** Height of one row, matching the table this stands in for. */
+    rowHeight?: number;
+    /** Fixed row count. Omit to fill the available height. */
+    rows?: number;
+    /** A small square before the first column — a file or status icon. */
+    leadingIcon?: boolean;
+    /**
+     * Fraction of the measured height to fill. Default 1.
+     *
+     * A placeholder that reaches the last pixel of the panel is claiming the
+     * list is exactly as long as the window, and when the real rows turn out to
+     * be fewer the whole thing appears to collapse. Filling part of the space
+     * says "a list is coming" without promising how much of one.
+     */
+    fill?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function TableSkeletonView({ columns, rowHeight, rows, leadingIcon, fill, className, style, }: TableSkeletonViewProps): import("react").JSX.Element;