@w6w/ui 0.1.1 → 0.2.11

package/dist/EditConnectionModal.d.ts

@@ -0,0 +1,26 @@
+import { ConnectionSummary, ThemeMode } from './types.ts';
+export interface EditConnectionModalProps {
+    /** The row being edited. `builtIn` rows have nothing to edit: the modal shows a notice only. */
+    connection: Pick<ConnectionSummary, "id" | "appId" | "authKey" | "displayName" | "builtIn" | "credentialId" | "lastTestOk">;
+    onClose: () => void;
+    /** Fired with the server's updated row. The typed credential is cleared before this runs. */
+    onSaved: (updated: ConnectionSummary) => void;
+    /** Reserved for icon variants, like the other modals. */
+    theme?: ThemeMode;
+}
+/**
+ * Edit an existing connection: rename it and/or replace some of its credential fields. Runs on
+ * the {@link useW6WApi} adapter alone. The server never returns the stored secret, so credential
+ * fields start empty and blank means "keep what is stored" — only the fields the user filled are
+ * sent, and the server merges them over the stored credential. OAuth connections can be renamed
+ * here; re-authorizing is not part of this modal.
+ *
+ * A connection that uses a stored credential (`connection.credentialId`), when the host supplies
+ * `api.rotateCredential`, is split in two: Save only renames it and changes its binding (never the
+ * credential, which other connections may share), and "Rotate credential" is a separate explicit
+ * action that replaces the stored secret for every connection using it.
+ *
+ * Needs `api.updateConnection`. Without it (or for a `builtIn` row) there is no Save button, a
+ * one-line notice shows instead, and nothing is called. Hosts should not offer Edit in that case.
+ */
+export declare function EditConnectionModal({ connection, onClose, onSaved }: EditConnectionModalProps): import("react").JSX.Element;

package/dist/JsonEditor.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ThemeMode } from './types.ts';
 export interface JsonEditorProps {
     value: string;
@@ -45,6 +46,13 @@ export interface JsonEditorProps {
      * this prop existed.
      */
     copyable?: boolean;
+    /**
+     * Content overlaid inside the editor box at its top-right corner, a direct
+     * child of `.w6w-json-editor` (same overlay mechanism as `copyable`). The
+     * `ParamsForm` json field puts its `ƒx` here. Text keeps right padding so
+     * line 1 is not covered.
+     */
+    overlay?: ReactNode;
 }
 /**
  * JSON editor built on CodeMirror 6. Syntax highlighting, folding, gutter with

package/dist/Markdown.d.ts

@@ -0,0 +1,25 @@
+export interface MarkdownProps {
+    content: string;
+    className?: string;
+}
+/**
+ * Pass a URL through only when its *parsed* protocol is allowlisted; relative,
+ * unparseable and every other scheme (javascript:, data:, vbscript:, any casing
+ * or whitespace trick the URL parser normalises) collapse to "".
+ */
+export declare function safeUrl(url: string): string;
+/**
+ * A leading `---` YAML block and the Markdown after it. Rendered as Markdown the block would
+ * come out as a rule plus a heading; it is metadata, so `Markdown` shows it in a collapsed
+ * section instead. Kept as text, not parsed — this package carries no YAML parser.
+ */
+export declare function splitFrontmatter(text: string): {
+    frontmatter: string | null;
+    body: string;
+};
+/**
+ * Renders imported, attacker-controllable note content. No `rehype-raw`: raw HTML
+ * is dropped (`skipHtml`), images are not rendered, and links are protocol-allowlisted.
+ * A leading YAML frontmatter block becomes a collapsed section above the body.
+ */
+export declare function Markdown({ content, className }: MarkdownProps): import("react").JSX.Element;

package/dist/ParamsForm.d.ts

@@ -1,3 +1,4 @@
+import { DynamicContext } from './dynamic-fields.ts';
 import { ActionParam } from './types.ts';
 /**
  * Evaluate a param's `showIf` predicate. `getValue` resolves a sibling field's
@@ -29,6 +30,11 @@ export interface ParamsFormProps {
     /** Fired with the next values object on every edit. */
     onChange: (values: Record<string, unknown>) => void;
     readOnly?: boolean;
+    /**
+     * Opt-in context for `options: { source: "resolveFields" }` params. Absent (or
+     * the host has no `resolveActionFields`) = those params render as plain inputs.
+     */
+    dynamic?: DynamicContext;
 }
 /**
  * Renders an action's declared params as a form. Required params are always
@@ -40,7 +46,7 @@ export interface ParamsFormProps {
  * expression bindings (`{ $: "steps.x.output.y" }`) authors drop to the JSON
  * view; this form deals in literals.
  */
-export declare function ParamsForm({ params, values, onChange, readOnly }: ParamsFormProps): import("react").JSX.Element;
+export declare function ParamsForm({ params, values, onChange, readOnly, dynamic }: ParamsFormProps): import("react").JSX.Element;
 /**
  * One typed key/value entry in a `vars` param. `type` is a real value type only:
  * `expression` is a binding *mode* (see {@link FxField}/`ExprValue`), not a value

package/dist/StepBuilderModal.d.ts

@@ -2,7 +2,7 @@ import { NodeConfig } from './NodeConfigForm.tsx';
 import { ExpressionStepSource } from './components/ExpressionOptions.tsx';
 import { InternalNodeDef } from './flow-types.ts';
 import { StepStartState } from './provider.tsx';
-import { ActionParam, AppSummary, FunctionSummary, ThemeMode, WorkflowSummary } from './types.ts';
+import { ActionParam, AppSummary, FunctionSummary, ThemeMode, WorkflowDetail, WorkflowSummary } from './types.ts';
 /** The step the builder emits — the editor assigns the final `id`. `NodeConfig`
  * carries the base settings (retry / onError / notes) set on the Config view. */
 export interface BuiltStep extends NodeConfig {
@@ -27,7 +27,7 @@ export interface StepBuilderModalProps {
      * `onAdd` — keeps the already-added node current without minting a second
      * one. `id` is the id `onAdd` returned. Progressive commit (mint-then-update)
      * only engages when this is supplied; omitted callers (the Functions/
-     * Endpoints pickers) keep the original one-shot "Add step" behavior.
+     * Endpoints pickers) keep the original one-shot "Add node" behavior.
      */
     onDraftChange?: (id: string, step: BuiltStep) => void;
     theme?: ThemeMode;
@@ -59,7 +59,7 @@ export interface StepBuilderModalProps {
      * value lives instead of making the author re-find the tab.
      */
     initialTab?: "connected" | "functions" | "workflows";
-    /** Modal heading. Defaults to "Add a step". */
+    /** Modal heading. Defaults to "Add a node". */
     title?: string;
     /**
      * Workflow-step context, when the builder is opened for a step that already
@@ -114,6 +114,11 @@ export interface StepBuilderModalProps {
      * and the selected-app header omits the ` · v<version>` suffix for it.
      */
     appsFilter?: (app: AppSummary) => boolean;
+    /**
+     * Server-side id allow-list for the Apps-tab picker (forwarded as `ids` to the
+     * paged fetch), so the footer total equals the cards shown.
+     */
+    appsIds?: string[];
     /**
      * Stop at "a connection is chosen" — no Action, no Configure/Test. Renders
      * {@link AppConnectionOnlyConfig} in place of the usual `AppStepConfig`
@@ -126,6 +131,13 @@ export interface StepBuilderModalProps {
      * selection alone. Only meaningful with {@link StepBuilderModalProps.connectionOnly}.
      */
     onConnected?: (connectionId: string, app: AppSummary) => void;
+    /**
+     * Callable ids (`fn_…` / `wf_…`) the Functions and Workflows tabs, and the
+     * "Ready to use" tab, never offer — matched by id equality only. A Function
+     * editor passes its own id: a Function bound to itself has no state change,
+     * so the only outcome is an infinite loop. Absent ⇒ nothing is excluded.
+     */
+    excludeCallableIds?: readonly string[];
 }
 /** The four representations of the Configure tab: form, full-step JSON,
  * params-only JSON, node settings. */
@@ -155,7 +167,7 @@ export declare function ConfigViewToggle({ view, onChange, disabled, views, }: {
  *
  * Data + IO come from `useW6WApi()`, so mount it under `<W6WUIProvider>`.
  */
-export declare function StepBuilderModal({ onClose, onAdd, onDraftChange, theme, appsOnly, callables, initialTab, title, workflowId, stepId, upstreamSteps, initialApp, initialAction, initialConnection, initialWith, appsFilter, connectionOnly, onConnected, }: StepBuilderModalProps): import("react").JSX.Element;
+export declare function StepBuilderModal({ onClose, onAdd, onDraftChange, theme, appsOnly, callables, initialTab, title, workflowId, stepId, upstreamSteps, initialApp, initialAction, initialConnection, initialWith, appsFilter, appsIds, connectionOnly, onConnected, excludeCallableIds, }: StepBuilderModalProps): import("react").JSX.Element;
 /**
  * Config form for a chosen internal node — its schema rendered through the same
  * `ParamsForm` as app actions, seeded with the node's defaults. Emits the built
@@ -171,6 +183,7 @@ export declare function ControlStepConfig({ node, onAdd, onClose, onDraftChange,
     /** The new step's known graph ancestors — see {@link StepBuilderModalProps.upstreamSteps}. */
     upstreamSteps?: ExpressionStepSource[];
 }): import("react").JSX.Element;
+export declare function triggerFieldsOf(wf: WorkflowDetail): ActionParam[];
 /**
  * Config → test → add flow for a picked Function/Workflow target (D-12,
  * D-15). Mints a single `@w6w/call` step — `family` only decides which
@@ -331,7 +344,12 @@ export declare function clampMinutes(raw: string, min: number): number;
  *
  * Exported for tests only (not re-exported from the package index).
  */
-export declare function useReadyToUse(callables: readonly ("function" | "workflow")[], appsFilter?: (app: AppSummary) => boolean): ReadyToUse;
+export declare function useReadyToUse(callables: readonly ("function" | "workflow")[], appsFilter?: (app: AppSummary) => boolean, excludeIds?: readonly string[], appsIds?: readonly string[]): ReadyToUse;
+/** A copy of `items` without any entry whose `id` equals one of `ids` (id
+ *  equality only — never name or position). No `ids` ⇒ an unchanged copy. */
+export declare function withoutIds<T extends {
+    id: string;
+}>(items: readonly T[], ids?: readonly string[]): T[];
 export declare function AppStepConfig({ appId, app, onAdd, onClose, onDraftChange, onChangeApp, theme, workflowId, stepId, upstreamSteps, initialAction, initialConnection, initialWith, }: {
     appId: string;
     app?: AppSummary;

package/dist/WorkflowFlowEditor.d.ts

@@ -1,6 +1,7 @@
 import { ExpressionOptions, ExpressionStepSource } from './components/ExpressionOptions.tsx';
 import { FlowStep, FlowWorkflow } from './flow-types.ts';
 import { RunState } from './run-visuals.ts';
+import { StepProblem, StepProblems } from './step-problems.ts';
 import { AppSummary } from './types.ts';
 export interface WorkflowFlowEditorProps {
     /** The workflow being edited. The editor re-derives layout when this changes identity. */
@@ -59,6 +60,14 @@ export interface WorkflowFlowEditorProps {
      * back off a node.
      */
     runState?: RunState;
+    /**
+     * Host-detected per-step problems, keyed by step id — an app step whose bound
+     * connection no longer exists gets an error ring + tooltip. Omitted ⇒ the
+     * canvas renders exactly as today. The host owns detection; this editor never
+     * infers a problem itself. Repaints live (same `value.id`) and is never
+     * persisted: `flowToWorkflow` never reads `data.stepProblem`.
+     */
+    stepProblems?: StepProblems;
     /**
      * Fired the instant a step test starts — the ▶ collect form's Run button, or
      * `StepEditModal`'s footer Test button — before the invoke goes out, so a host
@@ -95,14 +104,14 @@ type EditView = "props" | "json" | "settings";
  *   - Auto-layouted on load (topological columns + sibling rows).
  *   - Nodes render differently for action steps vs. control steps
  *     (`uses.app === "@w6w/control"`).
- *   - `+ Step` opens a guided builder (pick app → connection → action → params,
+ *   - `+ Node` opens a guided builder (pick app → connection → action → params,
  *     or a flow control). Drag nodes to reposition; connect handles to add edges.
  *   - Selecting a node reveals a toolbar above it: Edit / Duplicate / Delete.
  *   - Edit opens a modal with a Form ⇄ JSON toggle for that step.
  *   - Every meaningful change fires `onChange` with an updated Workflow.
  */
 export declare function WorkflowFlowEditor(props: WorkflowFlowEditorProps): import("react").JSX.Element;
-export declare function StepEditModal({ workflowId, step: initialStep, upstreamSteps, onChange, onClose, readOnly, initialView, fanOutCount, onTestRun, }: {
+export declare function StepEditModal({ workflowId, step: initialStep, upstreamSteps, onChange, onClose, readOnly, initialView, fanOutCount, onTestRun, stepProblem, }: {
     workflowId: string;
     step: FlowStep;
     /** Graph ancestors of this step (from `upstreamStateSources`); the incoming-state picker seeds from their saved tests. */
@@ -111,9 +120,11 @@ export declare function StepEditModal({ workflowId, step: initialStep, upstreamS
     onClose: () => void;
     readOnly?: boolean;
     initialView?: EditView;
-    /** Most outgoing edges this step has in one lane; "Run next steps" needs >= 2. */
+    /** Most outgoing edges this node has in one lane; "Run next nodes" needs >= 2. */
     fanOutCount?: number;
     /** Fired the instant the footer Test button is clicked, before the test runs (T1.1.1). */
     onTestRun?: () => void;
+    /** Host-supplied problem for this step; a dangling connection locks Configure/Test. */
+    stepProblem?: StepProblem;
 }): import("react").JSX.Element;
 export {};

package/dist/app-pages.d.ts

@@ -5,6 +5,8 @@ export interface AppsPageQuery {
     q: string;
     /** Server-side category filter (e.g. `"ai"` for the AI tab), or absent. */
     category?: string;
+    /** Server-side id allow-list, or absent. */
+    ids?: string[];
 }
 /**
  * Two queries are the same fetch target when both fields match exactly
@@ -29,6 +31,8 @@ export interface AppsPageState {
     /** Cursor to send on the NEXT "load more"; absent once the server has no more pages. */
     cursor?: string;
     hasMore: boolean;
+    /** The server's total for the current query, once a page has carried it. */
+    total?: number;
     error?: string;
 }
 export declare function initialAppsPageState(query: AppsPageQuery, generation?: number): AppsPageState;
@@ -65,6 +69,7 @@ export type AppsPageAction =
     apps: AppSummary[];
     nextCursor?: string;
     requestedCursor?: string;
+    total?: number;
 } | {
     type: "page-failed";
     generation: number;

package/dist/canvas-types.d.ts

@@ -0,0 +1,36 @@
+/** Workflow canvas (notes + sections); hand-mirror of core's `Workflow.canvas`. */
+export interface CanvasNote {
+    id: string;
+    color: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    content: string;
+}
+export interface CanvasSection {
+    id: string;
+    title: string;
+    color: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    /** Member node ids; a node belongs to at most one section. */
+    nodes: string[];
+}
+export interface FlowCanvas {
+    notes?: CanvasNote[];
+    sections?: CanvasSection[];
+}
+export declare const MAX_NOTES = 200;
+export declare const MAX_SECTIONS = 200;
+export declare const MAX_NOTE_BYTES = 10240;

package/dist/canvas-utils.d.ts

@@ -0,0 +1,44 @@
+import { FlowCanvas } from './canvas-types.ts';
+/** Live geometry keyed by note/section id. */
+export interface LiveGeometry {
+    [id: string]: {
+        position?: {
+            x: number;
+            y: number;
+        };
+        size?: {
+            width: number;
+            height: number;
+        };
+    };
+}
+/** Round every stored number to an integer. */
+export declare function roundGeometry<T extends {
+    x: number;
+    y: number;
+} | {
+    width: number;
+    height: number;
+}>(g: T): T;
+/**
+ * Stamp live geometry onto the stored canvas, rounded to integers. When
+ * `savePosition === false` the stored canvas is returned untouched (mirrors
+ * `flowToWorkflow`'s `withPosition`): not written is not erased.
+ */
+export declare function withCanvasGeometry(canvas: FlowCanvas, savePosition: boolean, live?: LiveGeometry): FlowCanvas;
+/** Remove a deleted node id from every section. */
+export declare function pruneSectionMembers(canvas: FlowCanvas, deletedNodeId: string): FlowCanvas;
+/** Map a renamed node id in every section. */
+export declare function renameSectionMember(canvas: FlowCanvas, from: string, to: string): FlowCanvas;
+/** Put `nodeIds` into `sectionId`, removing them from any other section (at most one each). */
+export declare function assignMembership(canvas: FlowCanvas, sectionId: string, nodeIds: string[]): FlowCanvas;
+/** Ids of every section containing the node. */
+export declare function sectionsContaining(canvas: FlowCanvas, nodeId: string): string[];
+/** Enforce the caps: 200 notes, 200 sections, 10240 UTF-8 bytes per note content. */
+export declare function clampCanvas(canvas: FlowCanvas): FlowCanvas;
+/**
+ * The canvas to emit. Geometry is stamped (rounded) from the live canvas when `savePosition` is
+ * on; when off, every item already in `stored` keeps its STORED position/size (live edits render
+ * but are not written — mirrors node positions). Items new this session keep their live geometry.
+ */
+export declare function persistCanvas(canvas: FlowCanvas, stored: FlowCanvas | undefined, savePosition: boolean): FlowCanvas;

package/dist/code.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CodeBlock-CZu4TFSi.cjs"),o=require("./Copyable-CYZU1o4X.cjs");exports.CodeBlock=e.CodeBlock;exports.Copyable=o.Copyable;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CodeBlock-CulfbnZD.cjs"),o=require("./Copyable-DA6eiU7w.cjs");exports.CodeBlock=e.CodeBlock;exports.Copyable=o.Copyable;
 //# sourceMappingURL=code.cjs.map

package/dist/code.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { C as r } from "./CodeBlock-Dot3Pd7P.js";
-import { C as a } from "./Copyable-1niV9gUa.js";
+import { C as r } from "./CodeBlock-BqXDA35P.js";
+import { C as a } from "./Copyable-F4NTaG77.js";
 export {
   r as CodeBlock,
   a as Copyable

package/dist/components/AuthFieldsForm.d.ts

@@ -13,10 +13,28 @@ interface Props {
     enterSubmitProps?: {
         onKeyDown: KeyboardEventHandler<HTMLElement>;
     };
+    /**
+     * `"create"` (default) seeds each field from its manifest `default`. `"edit"` is for replacing
+     * part of a stored credential: it never seeds `default`, gives secret inputs the placeholder
+     * `•••••• (unchanged)`, and reports an emptied number input as `""` (not `0`) so the caller can
+     * treat blank as "keep what is stored".
+     */
+    mode?: "create" | "edit";
 }
+/**
+ * Parses every filled `json` field of `values` (they are held as raw text while typing). Returns
+ * the values with those fields parsed, or an `error` naming the offending field by label. The
+ * error NEVER contains the typed text or the parser's message (which can quote it): a pasted key
+ * file that is almost valid must not be echoed back into the page.
+ */
+export declare function parseJsonFields(fields: AuthField[], values: Record<string, unknown>): {
+    values: Record<string, unknown>;
+} | {
+    error: string;
+};
 /**
  * Renders the form for an Auth method's `fields` declaration. Field shape
  * comes from the app's manifest so no app-specific knowledge is needed here.
  */
-export declare function AuthFieldsForm({ fields, values, onChange, enterSubmitProps }: Props): import("react").JSX.Element;
+export declare function AuthFieldsForm({ fields, values, onChange, enterSubmitProps, mode, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/BudgetMeter.d.ts

@@ -0,0 +1,15 @@
+export interface BudgetMeterProps {
+    /** Accessible name and the visible caption. */
+    label: string;
+    /** Amount already consumed. */
+    used: number;
+    /** Upper bound `used` is measured against. */
+    limit: number;
+    /** Amount held back but not yet spent. The segment renders only when > 0. */
+    reserved?: number;
+    /** Formats every number the meter prints (visible text and aria-valuetext). */
+    format?: (n: number) => string;
+    className?: string;
+    testId?: string;
+}
+export declare function BudgetMeter({ label, used, limit, reserved, format, className, testId, }: BudgetMeterProps): import("react").JSX.Element;

package/dist/components/CallableList.d.ts

@@ -0,0 +1,58 @@
+import { MouseEvent, ReactNode } from 'react';
+/** One row of a {@link CallableList}. The host decides `archived`; the list never learns a kind. */
+export interface CallableListRow {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    archived: boolean;
+    /** Extra badges, rendered before the archived badge in the trailing slot. */
+    badges?: ReactNode;
+    /** Trailing content; sits inside the row's anchor when `getHref` is set, so keep it non-interactive. */
+    trailing?: ReactNode;
+}
+export interface CallableListProps {
+    rows: readonly CallableListRow[];
+    title: ReactNode;
+    description?: ReactNode;
+    /** Shown (inside an EmptyState) when no rows exist at all and not `loading`. */
+    emptyCopy?: ReactNode;
+    /** Label of the New button. Defaults to "New". */
+    newLabel?: string;
+    /** Tooltip (`title` attribute) on each openable row. */
+    openRowTitle?: string;
+    testIds?: {
+        showArchived?: string;
+        importOpen?: string;
+        archivedBadge?: string;
+    };
+    loading?: boolean;
+    error?: string | null;
+    /** The New button renders only when this is set. */
+    onCreate?: () => void;
+    /** New button is disabled and reads "Creating…" while true. */
+    creating?: boolean;
+    /** The Import button renders only when this is set. */
+    onImport?: () => void;
+    /** Row click. The event is passed through untouched; the host may `preventDefault`. */
+    onOpen?: (id: string, event: MouseEvent<Element>) => void;
+    /** When set, each row is a real `<a href>`. */
+    getHref?: (id: string) => string;
+    /** Controlled "Show archived". Omit for an uncontrolled toggle that starts off. */
+    showArchived?: boolean;
+    onShowArchivedChange?: (next: boolean) => void;
+    slots?: {
+        /** Replaces the default title/description block (the Show-archived toggle stays). */
+        header?: ReactNode;
+        /** Rendered before Import/New. */
+        actions?: ReactNode;
+        /** Replaces `emptyCopy`. */
+        empty?: ReactNode;
+    };
+}
+/**
+ * A presentational list of callables (Functions, Endpoints, Workflows): rows in, callbacks out.
+ * Owns only the archived filter and its toggle; it knows no router, query, modal or kind.
+ * Rows render through {@link DataTable}: a click handler with `onOpen`, anchors with `getHref`.
+ * No visible rows renders an {@link EmptyState}; when only archived rows exist it offers "Show archived".
+ */
+export declare function CallableList({ rows, title, description, emptyCopy, newLabel, openRowTitle, testIds, loading, error, onCreate, creating, onImport, onOpen, getHref, showArchived: showArchivedProp, onShowArchivedChange, slots, }: CallableListProps): import("react").JSX.Element;

package/dist/components/Combobox.d.ts

@@ -15,10 +15,17 @@ export interface ComboboxProps {
     forceSelection?: boolean;
     /** Estimated option height in px, used by `auto` mode. Default 32. */
     optionHeight?: number;
+    /**
+     * Cap for the open list, in px — the list scrolls past it instead of growing.
+     * Default 240 (the shared value). A host inside an already-scrolling container
+     * (a modal body) passes a smaller one so the popup cannot add a second scroller.
+     */
+    listMaxHeight?: number;
     className?: string;
 }
 /** Combobox is chosen when the list would take more than 60% of the viewport. */
 export declare function shouldUseCombobox(count: number, optionHeight: number, viewportHeight: number): boolean;
 /** Case-insensitive substring match on label and value. */
 export declare function filterOptions(options: ComboboxOption[], query: string): ComboboxOption[];
-export declare function Combobox({ options, value, onChange, placeholder, disabled, "aria-label": ariaLabel, mode, forceSelection, optionHeight, className, }: ComboboxProps): import("react").JSX.Element;
+export declare const DEFAULT_LIST_MAX_HEIGHT = 240;
+export declare function Combobox({ options, value, onChange, placeholder, disabled, "aria-label": ariaLabel, mode, forceSelection, optionHeight, listMaxHeight, className, }: ComboboxProps): import("react").JSX.Element;

package/dist/components/ConnectionList.d.ts

@@ -0,0 +1,43 @@
+import { MouseEvent, ReactNode } from 'react';
+import { InlineAppMeta } from '../connection-app-meta.ts';
+import { ConnectionSummary } from '../types.ts';
+export interface ConnectionListProps {
+    connections: readonly ConnectionSummary[];
+    /**
+     * App meta by id, used for rows whose own inline `app` is `undefined` (an older server).
+     * Rows with an inline `app` object, or `null`, never consult it.
+     */
+    appsById?: ReadonlyMap<string, InlineAppMeta>;
+    loading?: boolean;
+    error?: string | null;
+    /** Row click. The event is passed through untouched; the host may `preventDefault`. */
+    onOpen?: (id: string, event: MouseEvent<Element>) => void;
+    /** When set, each openable row is a real `<a href>`. */
+    getHref?: (id: string) => string;
+    /**
+     * Renders an Edit button per row. Pass it only when the host's adapter has `updateConnection`
+     * (otherwise the modal it opens has nothing to save with).
+     */
+    onEdit?: (connection: ConnectionSummary) => void;
+    /** Renders a Delete button per row. Confirmation and the delete call are the host's. */
+    onDelete?: (connection: ConnectionSummary) => void;
+    /** Disables every Delete button while a delete is in flight. */
+    busy?: boolean;
+    slots?: {
+        /** Heading block above the rows. */
+        header?: ReactNode;
+        /** Trailing action(s) next to the header (e.g. an "Add" button). */
+        actions?: ReactNode;
+        /** Shown when there are no connections and the list is not `loading`. */
+        empty?: ReactNode;
+    };
+}
+/**
+ * A presentational list of connections: rows in, callbacks out; it needs no provider. Rows render
+ * through {@link DataTable} (name/app, status, and an Edit/Delete column that is never a link).
+ *
+ * A `builtIn` row (the server's synthetic "no credential" entry) is a plain non-interactive item:
+ * no link, no `onOpen`, no Edit, no Delete, because the server 404s get/test/delete on its id.
+ * Detection is `row.builtIn === true`, never an id prefix.
+ */
+export declare function ConnectionList({ connections, appsById, loading, error, onOpen, getHref, onEdit, onDelete, busy, slots, }: ConnectionListProps): import("react").JSX.Element;

package/dist/components/CredentialPicker.d.ts

@@ -0,0 +1,35 @@
+import { AuthField, ConnectionBinding, CredentialSummary, ServiceAccountConfig } from '../types.ts';
+export interface CredentialPickerProps {
+    /** Credentials to offer. Pass them already filtered; this component renders them as given. */
+    credentials: CredentialSummary[];
+    /** `"existing"` picks one of `credentials`; `"new"` is for the caller's create form. */
+    mode: "existing" | "new";
+    onModeChange: (mode: "existing" | "new") => void;
+    /** The chosen credential id (`""` for none). Only used in `"existing"` mode. */
+    selectedId: string;
+    onSelect: (id: string) => void;
+    /** False hides the "Use existing" choice (nothing to choose from). Default true. */
+    canUseExisting?: boolean;
+    /** The contract the credential must satisfy, shown as a hint. */
+    contract?: string;
+}
+/**
+ * The Use existing / Create new switch of a connection's Credential step, plus the list of stored
+ * credentials. Presentational: no API access, no state of its own. Each option shows the
+ * credential's name and its non-secret `display` values, never a payload. The "Create new" form
+ * itself (name + fields) is the caller's, rendered beneath this.
+ */
+export declare function CredentialPicker({ credentials, mode, onModeChange, selectedId, onSelect, canUseExisting, contract, }: CredentialPickerProps): import("react").JSX.Element;
+/**
+ * The binding fields a `serviceAccount` auth asks for on a connection. `delegatedUser` is always
+ * labelled "Impersonated user" (the person the credential acts as, never the connection's owner),
+ * is absent when impersonation is `"none"` even if declared, and is synthesised when impersonation
+ * is allowed but the auth declares no such field.
+ */
+export declare function bindingFieldsFor(sa: ServiceAccountConfig): AuthField[];
+/**
+ * Maps typed binding values to the wire `binding`: `delegatedUser` stays top-level, every other key
+ * goes under `settings`, blank values are dropped, and an empty result is `undefined`. `scopes` is
+ * never sent (the server applies the auth's declared scopes).
+ */
+export declare function buildBinding(fields: AuthField[], values: Record<string, unknown>): ConnectionBinding | undefined;

package/dist/components/DataTable.d.ts

@@ -0,0 +1,27 @@
+import { MouseEvent, ReactNode } from 'react';
+export interface DataTableColumn<Row> {
+    key: string;
+    header: ReactNode;
+    /** Omitted ⇒ the cell shows `String(row[key] ?? "")`. */
+    render?: (row: Row) => ReactNode;
+    width?: string;
+    align?: "left" | "right" | "center";
+    /** With `getRowHref`, wrap this column's cells in an anchor. Default true. */
+    link?: boolean;
+}
+export interface DataTableProps<Row> {
+    columns: readonly DataTableColumn<Row>[];
+    rows: readonly Row[];
+    rowKey: (row: Row) => string;
+    /** Row click. The event is passed through untouched; the host may `preventDefault`. */
+    onRowClick?: (row: Row, e: MouseEvent<Element>) => void;
+    /** When set, every cell of a `link !== false` column wraps its content in `<a href>`. */
+    getRowHref?: (row: Row) => string | undefined;
+    /** Rendered in place of the body when there are no rows and not `loading`. */
+    empty?: ReactNode;
+    loading?: boolean;
+    className?: string;
+    testId?: string;
+    rowTestId?: (row: Row) => string | undefined;
+}
+export declare function DataTable<Row>(props: DataTableProps<Row>): import("react").JSX.Element;

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface EmptyStateProps {
+    title?: ReactNode;
+    children?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    testId?: string;
+}
+export declare function EmptyState({ title, children, action, className, testId }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/ListItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 export interface ListItemProps {
     /** Primary label — prominent, single-line with ellipsis overflow. */
     title: ReactNode;
@@ -6,12 +6,21 @@ export interface ListItemProps {
     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 slot pushed to the right (e.g. a badge or chevron). With `href` it sits INSIDE the
+     * anchor, so it must stay non-interactive (no buttons or links).
+     */
     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;
+    /**
+     * When provided, the row renders as a focusable, keyboard-activatable button — or, with `href`,
+     * still fires on a click of the anchor. Receives the click event; ListItem never calls
+     * `preventDefault`, so the host decides whether the browser navigates.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** When provided, the row renders as a real `<a href>` (middle-click, copy link, new tab). */
+    href?: string;
     /** Accessible label for the clickable row (falls back to the `title` DOM text). */
     ariaLabel?: string;
 }
@@ -20,6 +29,7 @@ export interface ListItemProps {
  *
  * 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.
+ * activatable) with `aria-pressed={active}`; with `href` an `<a href>` (the click still reaches
+ * `onClick`); otherwise a plain, non-interactive row.
  */
-export declare function ListItem({ title, subtitle, icon, trailing, active, onClick, ariaLabel, }: ListItemProps): import("react").JSX.Element;
+export declare function ListItem({ title, subtitle, icon, trailing, active, onClick, href, ariaLabel, }: ListItemProps): import("react").JSX.Element;