@w6w/ui 0.0.0-stage → 0.1.0

package/dist/components/ExecutionLogPanel.d.ts

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+import { StepMeta } from '../provider.tsx';
+import { StepStatus } from './StepStatusPill.tsx';
+/**
+ * A step's or run's failure, already normalised by the HOST from the workflow
+ * spec's `StepError` (`code`/`message`/`phase`/`retryable`). The panel never
+ * parses an `unknown` error itself — same "host owns the data" split as the
+ * rest of this file. Rendered in `TriggerFillForm`'s error visual: a
+ * `.w6w-result.w6w-error` box, an optional `<code>` badge line, then the message.
+ */
+export interface ExecutionLogError {
+    /** `StepError.code`. Optional: the host may normalise an error that carries no code. */
+    code?: string;
+    /** The human-readable reason. Never empty when the host supplies it. */
+    message: string;
+    /** `StepError.phase`, when known. Carried for the host; not rendered. */
+    phase?: string;
+    /** `StepError.retryable`, when known. Carried for the host; not rendered. */
+    retryable?: boolean;
+}
+/**
+ * One entry of `RunState.stepErrors` — a step failure the run recorded and
+ * moved past (`onError: "continue-record"`, or a failure an error edge
+ * handled), so the run itself may still have succeeded.
+ */
+export interface ExecutionLogRecordedError {
+    /** The step the error belongs to. */
+    stepId: string;
+    /** Human-readable step name. Falls back to `stepId` when rendered. */
+    label?: string;
+    error: ExecutionLogError;
+}
+/**
+ * One step's display row — an already-mapped, already-resolved slice of a
+ * `RunState`/`StepExecution` (workflow spec). The HOST maps its own run
+ * state into this shape (same "host owns the data, the panel is
+ * presentational" split `readOnly` already establishes elsewhere in this
+ * package) — this component never fetches, polls, or reaches for an SDK.
+ */
+export interface ExecutionLogStep {
+    /** Stable id for this row — typically the step id from the workflow definition. */
+    id: string;
+    /** Human-readable step name. Falls back to `id` when omitted. */
+    label?: string;
+    status: StepStatus;
+    /** ISO-8601 timestamp the step started, once it has. */
+    startedAt?: string;
+    /** ISO-8601 timestamp the step finished, once it has. */
+    finishedAt?: string;
+    /** The resolved input sent to the step's action, once it is known. */
+    input?: unknown;
+    /** The step's output, once it has one. */
+    output?: unknown;
+    /**
+     * What ran (`StepExecution.meta`): app, version, action and connection id. Shown as a
+     * Metadata block after Output. Absent or `null` ⇒ no block at all (R-12: no filler).
+     */
+    meta?: StepMeta | null;
+    /**
+     * Why the step failed (`StepExecution.error`, "present on failed"). Rendered
+     * below the row's box and outside its lazy `<details>` body, so the reason
+     * reads without expanding the row.
+     */
+    error?: ExecutionLogError;
+}
+export interface ExecutionLogPanelProps {
+    /** The run's steps, rendered in exactly this order — never re-sorted. */
+    steps: ExecutionLogStep[];
+    /** Shown instead of the list when `steps` is empty. */
+    emptyLabel?: ReactNode;
+    /**
+     * Supplied ⇒ the panel grows a header row carrying a dismiss control that
+     * calls this and nothing else (T1.1.1). Omitted ⇒ no header row at all, no
+     * extra DOM node. The panel still owns no run state — it only reports the
+     * click; the host decides what dismissing means.
+     */
+    onDismiss?: () => void;
+    /**
+     * The run's own failure (`RunState.error`). Rendered below the dismiss head
+     * and above the steps — in the empty branch too, since a run that failed
+     * before any step ran has nothing else to say why.
+     */
+    runError?: ExecutionLogError;
+    /**
+     * Step failures the run recorded and moved past (`RunState.stepErrors`),
+     * one error block each, in the order given, after `runError`.
+     */
+    stepErrors?: ExecutionLogRecordedError[];
+}
+/**
+ * Read-only log of a workflow run's steps, in the order given: each row is
+ * the step's status pill, its timing, and its resolved input/output.
+ *
+ * A pure display leaf — no data fetching, no polling, no layout media
+ * queries (the host docks the panel; see `_scale.scss`'s breakpoint
+ * docstring). Fills whatever box its host gives it.
+ */
+export declare function ExecutionLogPanel({ steps, emptyLabel, onDismiss, runError, stepErrors, }: ExecutionLogPanelProps): import("react").JSX.Element;

package/dist/components/ExecutionStats.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+/**
+ * The aggregate numbers of a history view — the same rows the list shows,
+ * rolled up (D1: stats are computed over the same visibility the list uses, so
+ * the two can never disagree about who may see what).
+ *
+ * `succeeded`/`canceled` are carried even though the strip renders no card for
+ * them today: the host's payload has them, the breakdown is what a host needs
+ * for a chart or a chip row, and a host re-deriving them from the list would be
+ * computing the same total a second time.
+ */
+export interface ExecutionStatsValue {
+    /** Every run in the current filter — the denominator of `successRate`. */
+    total: number;
+    succeeded: number;
+    failed: number;
+    canceled: number;
+    /** Runs that are queued or running right now. `> 0` is what makes the
+     * `In flight` card exist at all. */
+    inFlight: number;
+    /** `0…1`, or `null` when the host has no rate to report (no runs at all —
+     * a rate over zero runs is not 0%). */
+    successRate: number | null;
+    /** Mean wall-clock duration of the FINISHED runs, or `null` when none has
+     * finished. */
+    avgDurationMs: number | null;
+}
+export interface ExecutionStatsProps {
+    /** The aggregate, or `null` while nothing has loaded yet — rendered as `—`
+     * per card rather than as a spinner, so the strip never changes height. */
+    stats: ExecutionStatsValue | null;
+    /** Caption above the cards, e.g. the window they cover ("Last 7 days").
+     * Omitted ⇒ no node at all. */
+    label?: ReactNode;
+}
+/**
+ * A headline strip of run aggregates: one big value over a muted label per
+ * card.
+ *
+ * Promotes studio `DashboardPage.tsx`'s page-local `StatCard` into `ui`, with
+ * two differences that come from this being a shared component rather than one
+ * page's private helper: the values are pre-formatted here (a rate as `67%`, a
+ * duration through `formatDurationMs`) so every consumer renders the same
+ * string, and each card carries `data-stat-value` so a host can assert on the
+ * value without re-parsing its own formatting.
+ */
+export declare function ExecutionStats({ stats, label }: ExecutionStatsProps): import("react").JSX.Element;

package/dist/components/ExpressionEditorModal.d.ts

@@ -0,0 +1,42 @@
+import { ExprValue, SecretValue } from '../types.ts';
+import { ExpressionOptions } from './ExpressionOptions.tsx';
+/**
+ * A near-full-screen editor for an expression value. Left: the data sources in
+ * scope (variables, secrets, and the workflow state leading to this step) — one
+ * click inserts a colored TAG (chip) at the caret. Right: the expression editor
+ * (top, where tags read distinctly from plain text) over the `{{ }}` template
+ * form that gets saved plus a live Result pane (bottom) that previews the
+ * expression against user-supplied sample values for the injected scope.
+ *
+ * The value it saves is the same `ExprValue | string` the inline field and the
+ * engine already use (see `expression-template.ts` / `expression-dom.ts`).
+ */
+export interface ExpressionEditorModalProps {
+    value: ExprValue | string | SecretValue | undefined;
+    masked?: boolean;
+    /**
+     * The field being edited holds multi-line text (a `text`-typed param, or one
+     * flagged `config.multiline`). Enter then inserts a literal `"\n"` at the
+     * caret instead of being swallowed, and `aria-multiline` follows. Omitted ⇒
+     * single-line, as every existing consumer expects.
+     */
+    multiline?: boolean;
+    options: ExpressionOptions;
+    /** Field name shown in the modal title. */
+    fieldLabel?: string;
+    /** Expression mode's commit. Not used in `mode="json-binding"` (see `onBind`). */
+    onSave?: (next: ExprValue | string) => void;
+    onClose: () => void;
+    /**
+     * `"json-binding"`: pick ONE upstream step output for a whole `json`/`group`
+     * param. The rail shows only the Workflow state slot, each step gets an
+     * "Entire output" leaf, and a click calls `onBind({ $: ref })` (the plain
+     * one-key object, never an `ExprValue`) and closes. No chips editor, no
+     * Save, no template/Result panes. Absent ⇒ expression mode, unchanged.
+     */
+    mode?: "json-binding";
+    onBind?: (next: {
+        $: string;
+    }) => void;
+}
+export declare function ExpressionEditorModal({ value, masked, multiline, options, fieldLabel, onSave, onClose, mode, onBind, }: ExpressionEditorModalProps): import("react").JSX.Element;

package/dist/components/ExpressionInput.d.ts

@@ -0,0 +1,36 @@
+import { ExprValue, SecretValue } from '../types.ts';
+/**
+ * ExpressionInput — a single field that reads like a textbox but whose contents
+ * are inline SEGMENTS: plain text plus var/secret/expr chips (Notion/Zapier
+ * blocks). You can type directly; to browse the data sources in scope
+ * (variables, secrets, upstream step outputs) and build a reference, open the
+ * full editor via the ƒx button — see {@link ExpressionEditorModal}.
+ *
+ * Value in ↔ out: incoming `value` is a plain string, an `ExprValue`, or a
+ * sealed `SecretValue`. `onChange` emits the leanest faithful form — a plain
+ * string when pure-text, an `ExprValue` for mixed content, or a sealed
+ * `SecretValue` once a masked field is encrypted.
+ */
+export interface ExpressionInputProps {
+    value: ExprValue | string | SecretValue | undefined;
+    onChange: (next: ExprValue | string | SecretValue) => void;
+    placeholder?: string;
+    /** Mask typed text as dots + seal on blur (used for secret-typed params). */
+    masked?: boolean;
+    /**
+     * The underlying param holds multi-line text (a `text`-typed param, or one
+     * flagged `config.multiline` — the same fields that render a `textarea`).
+     * Enter then inserts a literal `"\n"` at the caret instead of being swallowed,
+     * and `aria-multiline` follows. Omitted ⇒ single-line, as every existing
+     * consumer expects.
+     */
+    multiline?: boolean;
+    readOnly?: boolean;
+    /** Picker data; falls back to the nearest `ExpressionOptionsProvider`. */
+    options?: {
+        vars?: string[];
+        secrets?: string[];
+    };
+    "aria-label"?: string;
+}
+export declare function ExpressionInput({ value, onChange, placeholder, masked, multiline, readOnly, options, "aria-label": ariaLabel, }: ExpressionInputProps): import("react").JSX.Element;

package/dist/components/ExpressionOptions.d.ts

@@ -0,0 +1,185 @@
+import { ReactNode } from 'react';
+import { SecretValue } from '../types.ts';
+/**
+ * Drop the step being edited (or drafted, not yet persisted) from its own rail
+ * sources — a step cannot reference its own output.
+ */
+export declare function excludeSelfStep(steps: ExpressionStepSource[], selfId: string | null | undefined): ExpressionStepSource[];
+/** An upstream step whose output this field can reference (`steps.<id>.output`). */
+export interface ExpressionStepSource {
+    /** Step id — the key under `steps` in the run scope. */
+    id: string;
+    /** Human label (defaults to the id). */
+    label?: string;
+    /**
+     * The step's output field keys, when any are known (a manual trigger's
+     * configured `fields`, a built-in node's static output, or an app action's
+     * shape — see `outputsFrom`). Each entry feeds exactly one ref —
+     * `steps.<id>.output.<key>` — which is the canonical form the engine resolves
+     * (`RunScope.steps`; `core/rfcs/workflow.md` §"Expressions", `core/rfcs/node-types.md`
+     * "Executing a trigger node yields the run's start payload … which downstream
+     * nodes read as `steps.<triggerId>.output`").
+     *
+     * `key` is carried **verbatim**: a display-shortened key would build a ref
+     * that renders fine in the editor and evaluates to empty at run time, with no
+     * error. `label` is for display only and must never be substituted into a ref.
+     *
+     * **Omitted** (not `[]`) when the step declares no outputs, so a consumer can
+     * tell "nothing declared" from "declared none" without a special case.
+     */
+    outputs?: {
+        key: string;
+        label?: string;
+        path?: boolean;
+    }[];
+    /**
+     * Where `outputs` came from, for an app-action step: the action's declared
+     * `output`, its `sample`, or the step's last test run (`output-shape.ts`).
+     * An entry with `path: true` is a dot path into nested output (`start.utc`),
+     * checked segment by segment; without it the key is one literal key.
+     */
+    outputsFrom?: "declared" | "sample" | "test";
+    /**
+     * `true` when the step is an app action that declares no output shape and has
+     * no test run yet — the picker tells the author to run a test to see fields.
+     */
+    needsTest?: boolean;
+    /**
+     * `true` for an EXTERNAL app-action step only (R-7): the picker then offers a fixed
+     * Metadata group (`steps.<id>.meta.app|version|action|connectionId`). **Omitted, not
+     * `false`**, for triggers and every `@w6w/*` node. Carries no metadata VALUE: the group
+     * is just labels, and the value exists only at run time.
+     */
+    hasMeta?: boolean;
+}
+/**
+ * A document contributing pickable refs (`documents.<key>`, and one
+ * `documents.<key>.<field>` per top-level field when it qualifies).
+ *
+ * A document contributes field sub-entries **iff**: `doc.format === "json"`
+ * AND `JSON.parse(doc.content)` succeeds into a plain object, OR
+ * `doc.format === "yaml"` AND npm `yaml`'s `parse(doc.content)` succeeds into
+ * a plain object — where *plain object* means
+ * `typeof v === "object" && v !== null && !Array.isArray(v)`. This mirrors
+ * the engine's own gate: `documentsSeed`
+ * (`packages/server/packages/api/run-seed.ts`, read-only, out of scope) is the
+ * authority for each format — `format === "json"` or `format === "yaml"`,
+ * then a `try/catch` parse, falling back to the raw content string on either
+ * a non-matching format or a throw. `text`/`markdown`/`html` documents, and a
+ * `json`/`yaml` document whose parse throws or yields a non-plain-object
+ * (array/scalar), are excluded — offering a field ref outside this gate would
+ * fail at run time with `render_ref_unresolved`, because the run scope itself
+ * never parsed that document into an object.
+ *
+ * The two parsers (`@std/yaml` server-side, npm `yaml` here) are not
+ * identical for every input — they diverge on tab-indented content and on an
+ * unresolvable custom tag, both accepted, tested debt (D-3) — but agree on
+ * everything else, including a plain JSON object (JSON is a subset of YAML).
+ */
+export interface ExpressionDocumentSource {
+    /** Document key — the key under `documents` in the run scope. */
+    key: string;
+    /**
+     * The document's top-level field keys, when the gate above holds. Each
+     * entry feeds exactly one ref — `documents.<key>.<field>` — with `key`
+     * carried **verbatim**: a display-shortened key would build a ref that
+     * renders fine in the editor and evaluates to empty at run time, with no
+     * error.
+     *
+     * **Omitted** (not `[]`) when the document contributes no fields, so a
+     * consumer can tell "nothing declared" from "declared none" without a
+     * special case — mirrors {@link ExpressionStepSource.outputs}'s own rule.
+     */
+    fields?: {
+        key: string;
+    }[];
+}
+/** Known variable/secret names offered in an ExpressionInput's insert menu. */
+export interface ExpressionOptions {
+    vars?: string[];
+    secrets?: string[];
+    /**
+     * Function/run input keys in scope (`inputs.<name>`). Present when the field
+     * is edited inside a Function (the engine resolves these from `RunScope.inputs`);
+     * omitted for a standalone field.
+     */
+    inputs?: string[];
+    /**
+     * Documents in scope (`documents.<key>`, plus `documents.<key>.<field>` for
+     * each document that qualifies — see {@link ExpressionDocumentSource}). A
+     * store-independent affordance: whatever the host passes is offered as
+     * insertable chips. Omitted when no documents are available.
+     */
+    documents?: ExpressionDocumentSource[];
+    /**
+     * The workflow state leading to this step: upstream steps whose output is in
+     * scope (`steps.<id>.output`). Present only in a workflow context; omitted for
+     * a standalone field.
+     */
+    steps?: ExpressionStepSource[];
+    /** Whether a trigger event is in scope (`trigger.event`). */
+    hasTrigger?: boolean;
+    /**
+     * Design-time sample values the Result preview substitutes for known refs,
+     * keyed by FULL ref (`"vars.from_email"`, `"documents.test"`). Seeded by the
+     * host from the project's real vars/documents so the preview shows actual
+     * values instead of the raw `{{ ref }}` template. Optional — a user-typed
+     * Sample value still overrides, and unknown refs keep the raw fallback.
+     */
+    sampleValues?: Record<string, unknown>;
+    /**
+     * Seal a typed secret value into an at-rest `SecretValue` envelope via the
+     * host (the client has no key). Provided by studio (`POST /vault/seal`); when
+     * present, a secret-typed field encrypts on blur so its clear text never
+     * lands in the workflow/config JSON. Absent → the value stays a plain string
+     * and the server encrypts it on receive instead.
+     */
+    sealSecret?: (value: string) => Promise<SecretValue>;
+    /**
+     * Create a new named variable via the host (`POST /vars`-shaped: the host
+     * persists it, `ui` never fetches). Powers the rail's "+ Add" control next
+     * to the Variables group label. Absent ⇒ the control is not rendered.
+     */
+    createVar?: (input: {
+        name: string;
+        value: string;
+        description?: string;
+    }) => Promise<void>;
+    /**
+     * Create a new named secret via the host (`POST /vault`-shaped, plaintext
+     * value — the server encrypts it, `ui` never sees a key). Powers the rail's
+     * "+ Add" control next to the Secrets group label. Absent ⇒ the control is
+     * not rendered.
+     */
+    createSecret?: (input: {
+        name: string;
+        value: string;
+        description?: string;
+    }) => Promise<void>;
+}
+export interface ExpressionOptionsProviderProps {
+    /**
+     * The scope this level CONTRIBUTES — not the whole scope. Shallow-merged over
+     * whatever is inherited (see the module doc): keys here win, keys absent are
+     * inherited, and an explicit `undefined` removes an inherited key for this
+     * subtree.
+     */
+    value: ExpressionOptions;
+    children: ReactNode;
+}
+/**
+ * Contribute expression scope to every `ExpressionInput` below.
+ *
+ * Layers over the inherited scope rather than replacing it, so an app shell can
+ * provide vars/secrets/documents once and a page can add its `inputs` without
+ * restating them — and without a field somewhere in the page missing the rail
+ * because a prop was not threaded to it. See the module doc for the model.
+ */
+export declare function ExpressionOptionsProvider({ value, children }: ExpressionOptionsProviderProps): import("react").JSX.Element;
+/**
+ * The scope in effect here — every contributing provider above, merged.
+ *
+ * Empty by default so a standalone `ExpressionInput` (no provider) still works
+ * — authors just type names by hand.
+ */
+export declare function useExpressionOptions(): ExpressionOptions;

package/dist/components/HealthStatusPill.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+/**
+ * The four health states a probe can report — a thin LOCAL copy of the RFC's
+ * `HealthReport.state` union. `@w6w/ui` deliberately keeps a small literal type
+ * here rather than depend on `@w6w/types`, so the display component stays a
+ * pure-presentation leaf with no transport/spec coupling.
+ */
+export type HealthPillState = "ok" | "degraded" | "down" | "unknown";
+export interface HealthStatusPillProps {
+    /** Which health state to render — drives the colour + default label. */
+    state: HealthPillState;
+    /** Override the visible text (defaults to a humanised form of `state`). */
+    label?: ReactNode;
+    /** Accessible label for the pill (falls back to the visible text). */
+    ariaLabel?: string;
+}
+/**
+ * A small, theme-aware status pill for a single health state.
+ *
+ * Renders a coloured dot + label using the `--w6w-health-*` tokens, so a host
+ * can restyle every state by overriding those custom properties (see
+ * `styles.css`). Colour is never the only signal — the text label carries the
+ * same meaning for accessibility.
+ */
+export declare function HealthStatusPill({ state, label, ariaLabel }: HealthStatusPillProps): import("react").JSX.Element;

package/dist/components/HistoryTimeline.d.ts

@@ -0,0 +1,56 @@
+import { UptimeCellState, UptimeDay } from './UptimeStrip.tsx';
+/** The calendar window both lanes are plotted against. Both bounds inclusive. */
+export interface HistoryWindow {
+    /** Inclusive first calendar day, `YYYY-MM-DD`. */
+    from: string;
+    /** Inclusive last calendar day, `YYYY-MM-DD`. */
+    to: string;
+}
+/** One entry in the vendor's incident feed. */
+export interface VendorIncidentBar {
+    id?: string;
+    title: string;
+    state: UptimeCellState;
+    /** ISO instant. Absent = a point-in-time update, not a span. */
+    startedAt?: string;
+    updatedAt?: string;
+    /** ISO instant. Absent WITH `startedAt` present = still open. */
+    resolvedAt?: string;
+    components?: string[];
+    link?: string;
+}
+export interface HistoryTimelineProps {
+    window: HistoryWindow;
+    /** Execution lane, oldest first, one entry per calendar day. */
+    days: UptimeDay[];
+    /** Vendor lane. `undefined` = this vendor publishes no incident history at all. */
+    incidents?: VendorIncidentBar[];
+    /** Overrides the vendor lane's empty text. */
+    vendorEmptyLabel?: string;
+    /** Clock injection for tests and for an open incident's right edge. Defaults to `Date.now()`. */
+    nowMs?: number;
+    ariaLabel?: string;
+}
+/**
+ * Two time series — our per-day execution history and the vendor's incident
+ * history — plotted on one shared x-axis, so "our calls failed *during* that
+ * vendor incident" is a visible alignment rather than a claim.
+ *
+ * Purely presentational, same discipline as `UptimeStrip`: `days` is already
+ * one already-decided state per calendar day (no sort, no reverse, no gap
+ * fill), and `incidents` is already the vendor's own feed. This component
+ * places them; it makes no judgement about what counts as an incident.
+ *
+ * `incidents === undefined` ("this vendor publishes no incident history") and
+ * `incidents === []` ("nothing happened in this window") are different facts
+ * and render different empty-row text — Stripe is the first, a quiet Slack
+ * window is the second. Either way the axis and the execution lane render in
+ * full, at full width: a vendor with no feed never shrinks the half of the
+ * chart that does have data.
+ *
+ * Severity is encoded twice, same rule as `UptimeStrip` and `HealthStatusPill`:
+ * a per-state class AND a geometry difference (fill height on a day cell,
+ * clip markers on a bar), never colour alone. Every cell and every bar
+ * carries a `title`.
+ */
+export declare function HistoryTimeline({ window: win, days, incidents, vendorEmptyLabel, nowMs, ariaLabel, }: HistoryTimelineProps): import("react").JSX.Element;

package/dist/components/Icon.d.ts

@@ -0,0 +1,34 @@
+import { IconName } from './icons.tsx';
+export interface IconProps {
+    /** Which glyph. Required — this component carries no default icon. */
+    name: IconName;
+    /** Rendered width AND height, in px. Default 16, the size every rail glyph and
+     *  icon button in the tree already draws at. */
+    size?: number;
+    /**
+     * Accessible name. Omit it for the common case — a decorative glyph inside a
+     * button that already has one — and the `<svg>` is `aria-hidden`; pass it and
+     * the glyph becomes `role="img"` with that `aria-label`, for an icon standing
+     * alone as content.
+     */
+    label?: string;
+    /** Merged with `w6w-icon`. */
+    className?: string;
+}
+/**
+ * One glyph from the shared set (`./icons.tsx`), sized by prop and coloured by
+ * `currentColor` — so a caller colours it with `color` on any ancestor, and it
+ * inherits hover/disabled/theme states for free.
+ *
+ * Accessibility is a two-way switch, never an absent middle: with no `label` the
+ * glyph is decorative (`aria-hidden`, `focusable="false"`) for the common case
+ * inside an already-labelled button; with a `label` it is `role="img"` with that
+ * name. There is no third state, because an unlabelled `<svg>` that is not
+ * hidden is exactly the noise a screen reader announces as "graphic".
+ *
+ * The four ARIA attributes are written out as plain expressions rather than
+ * spread from a conditional object: `biome check`'s `a11y/noSvgWithoutTitle`
+ * reads the JSX attributes it can see, and a spread hides them (measured —
+ * "Alternative text title element cannot be empty" on the spread form only).
+ */
+export declare function Icon(props: IconProps): import("react").JSX.Element;

package/dist/components/IconButton.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { IconName } from './icons.tsx';
+export interface IconButtonProps {
+    /** Accessible name — ALWAYS rendered as `aria-label`. Required: an icon-only
+     *  button with no name has no safe default (unlike `Copyable`'s `label`,
+     *  which is always "Copy"). */
+    label: string;
+    /** The glyph, as caller-supplied markup. Still the primary path — pass this
+     *  or `icon` (both given ⇒ `children` wins). */
+    children?: ReactNode;
+    /** The glyph, by name from the shared set (`./icons.tsx`) — e.g. `"history"`.
+     *  Renders `<Icon name={icon} size={iconSize ?? 16} />`, decorative, so this
+     *  button's `label` stays the only thing announced. */
+    icon?: IconName;
+    /** Size handed to `Icon`. Default 16. No effect without `icon`. */
+    iconSize?: number;
+    /** Tooltip override. Defaults to `label`; `aria-label` is ALWAYS `label`, so
+     *  the two may legitimately differ (see the docblock). */
+    title?: string;
+    /** Required — an icon-only button that can't fire has no reason to exist. */
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+    /** Caller opts into danger styling; `IconButton` itself has no "delete" concept. */
+    danger?: boolean;
+    /** Passed straight through, for a toggle button. */
+    "aria-pressed"?: boolean;
+    /** Passed straight through, for a disclosure button. */
+    "aria-expanded"?: boolean;
+    /** Passed straight through, for a disclosure button naming the region it controls. */
+    "aria-controls"?: string;
+    "data-testid"?: string;
+}
+/**
+ * The primitive icon-only button: a caller-supplied glyph, a required
+ * accessible name, native `disabled`, and a merged `className`.
+ *
+ * `EditButton`/`DeleteButton` build on this and bundle one canonical glyph
+ * each — this component itself carries no glyph and no "edit"/"delete"
+ * meaning, only the `danger` styling hook.
+ *
+ * The glyph comes from one of two places. `children` is the original path and
+ * still works unchanged; `icon` names one from the shared set (`./icons.tsx`)
+ * and is rendered through `Icon`, so a caller no longer has to redraw (or
+ * import) an SVG for a glyph the set already holds. Given both, `children`
+ * wins — the named prop is the convenience, never a way to hide a caller's own
+ * markup.
+ *
+ * `label` is always the accessible name, and `title` overrides ONLY the
+ * tooltip. The two legitimately differ: studio's history button is named
+ * "Execution history" while, with nothing executed yet, its tooltip reads "No
+ * executions yet" — the tooltip says why the control is inert to a sighted
+ * user, the name stays the action, and a screen reader must keep hearing the
+ * latter.
+ *
+ * `ref` reaches the `<button>` itself (`forwardRef` — React 18, so the
+ * ref-as-prop syntax is not available), which is what a caller needs to move
+ * focus or measure the control.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/InfoTip.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface InfoTipProps {
+    /** Accessible name AND tooltip of the toggle button (e.g. "About client secrets"). */
+    label: string;
+    /** The explanation, rendered only while expanded. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A small "i" button that reveals a muted explanation block on click — for
+ * copy that would otherwise clutter a modal. Collapsed by default; the button
+ * carries `aria-expanded` and `aria-controls` pointing at the block, and the
+ * block is not rendered at all while collapsed.
+ */
+export declare function InfoTip({ label, children, className }: InfoTipProps): import("react").JSX.Element;

package/dist/components/InternalIcon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * InternalIcon — an internal pseudo-app's glyph on a rounded tile, sized and
+ * shaped to match `AppIcon`'s image tile so internal (`@w6w/*`) nodes and app
+ * nodes read as the same family everywhere they appear (canvas, add-step
+ * picker, edit modal). The glyph markup comes from the node def
+ * (`InternalNodeDef.icon` / `internalNodeIcon`) — static, in-repo SVG (no user
+ * input). It strokes with the accent color and tracks the active theme.
+ *
+ * Deliberately NOT the shared `Icon` (`./Icon.tsx`), despite owning an `<svg>`:
+ * this is a DATA-DRIVEN per-app identity mark — its content is a markup string
+ * off the node def, one glyph per internal app, not a fixed UI glyph with a name
+ * in the set (`./icons.tsx`). Unifying them would mean changing
+ * `InternalNodeDef` to carry a name instead of its markup, which is a data-model
+ * change, not an icon migration.
+ */
+export declare function InternalIcon({ icon, size }: {
+    icon: string;
+    size?: number;
+}): import("react").JSX.Element;

package/dist/components/ListItem.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface ListItemProps {
+    /** Primary label — prominent, single-line with ellipsis overflow. */
+    title: ReactNode;
+    /** Secondary label under the title — muted, small, truncates. */
+    subtitle?: ReactNode;
+    /** Leading slot (e.g. an `<AppIcon />` or status glyph). */
+    icon?: ReactNode;
+    /** Trailing slot pushed to the right (e.g. a badge or chevron). */
+    trailing?: ReactNode;
+    /** Highlights the row as selected/current. Reflected as `aria-pressed` when clickable. */
+    active?: boolean;
+    /** When provided, the row renders as a focusable, keyboard-activatable button. */
+    onClick?: () => void;
+    /** Accessible label for the clickable row (falls back to the `title` DOM text). */
+    ariaLabel?: string;
+}
+/**
+ * A clean, reusable list row: leading icon · title over subtitle · trailing slot.
+ *
+ * Mirrors the look/behaviour of the saved-test button rows it replaces. When
+ * `onClick` is given it renders a `<button type="button">` (focusable, Enter/Space
+ * activatable) with `aria-pressed={active}`; otherwise a plain, non-interactive row.
+ */
+export declare function ListItem({ title, subtitle, icon, trailing, active, onClick, ariaLabel, }: ListItemProps): import("react").JSX.Element;