@w6w/ui 0.2.0 → 0.2.54

package/dist/CodeEditor.d.ts

@@ -1,10 +1,11 @@
+import { EditorView } from '@codemirror/view';
 import { ThemeMode } from './types.ts';
 /**
  * A CodeMirror *editing* mode for `<CodeEditor>` — a distinct concept from the
  * Prism *display-highlighting* grammar name a sibling module exports for
  * rendered snippets. Deliberately its own type, not shared with that one.
  */
-export type ScriptLanguage = "javascript" | "python";
+export type ScriptLanguage = "javascript" | "typescript" | "python";
 export interface CodeEditorProps {
     value: string;
     onChange: (value: string) => void;
@@ -30,6 +31,8 @@ export interface CodeEditorProps {
     language?: ScriptLanguage;
     /** Accessible label for the editor. */
     "aria-label"?: string;
+    /** Called with the CodeMirror view once it exists — for inserting at the caret. */
+    onCreateEditor?: (view: EditorView) => void;
 }
 /**
  * Plain-text-by-default code editor built on CodeMirror 6 — the same surface as

package/dist/ConditionEditor.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The standard expression textbox on either side of each comparison row, the rows joined by
+ * one combinator (all of / any of / exactly one of). A condition the rows cannot express
+ * (a nested group, another operator) opens in the code view.
+ */
+export declare function ConditionEditor({ values, onChange, readOnly, purpose, }: {
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    readOnly?: boolean;
+    purpose?: "if" | "stop" | "router";
+}): import("react").JSX.Element;

package/dist/EditConnectionModal.d.ts

@@ -1,7 +1,7 @@
 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">;
+    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;
@@ -15,6 +15,11 @@ export interface EditConnectionModalProps {
  * 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.
  */

package/dist/JsonEditor.d.ts

@@ -1,3 +1,5 @@
+import { EditorView } from '@codemirror/view';
+import { ReactNode } from 'react';
 import { ThemeMode } from './types.ts';
 export interface JsonEditorProps {
     value: string;
@@ -25,6 +27,17 @@ export interface JsonEditorProps {
      * `minHeight` and `maxHeight` — an inline JSON/group field wants this.
      */
     height?: string;
+    /**
+     * Receives the CodeMirror view once it exists — for a host that inserts text at the caret
+     * (the JSON compose pane of `ExpressionEditorModal`).
+     */
+    onCreateEditor?: (view: EditorView) => void;
+    /** Fired when the editor loses focus. */
+    onBlur?: () => void;
+    /** Fired when the editor gains focus. */
+    onFocus?: () => void;
+    /** Show JSON syntax diagnostics. Defaults to true; forms can defer them until blur. */
+    showDiagnostics?: boolean;
     /** Read-only mode — useful for previewing a stored definition. */
     readOnly?: boolean;
     /**
@@ -45,6 +58,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/ParamCustomization.d.ts

@@ -0,0 +1,5 @@
+export declare function ParamCustomization({ values, onChange, readOnly, }: {
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    readOnly?: boolean;
+}): 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
@@ -36,11 +42,17 @@ export interface ParamsFormProps {
  * tidy. Widget is chosen by `param.type` — same field-driven approach as
  * `AuthFieldsForm`, extended with `text` (textarea) and `json` (JsonEditor).
  *
- * Values are collected into a plain object suitable for a step's `with`. For
- * expression bindings (`{ $: "steps.x.output.y" }`) authors drop to the JSON
- * view; this form deals in literals.
+ * Values are collected into a plain object suitable for a step's `with`. A field
+ * bound to a reference holds a `{{ }}` template string (`"{{ nodes.x.output.y }}"`).
  */
-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;
+/** Entries one picker request asks for: a page, never the whole store. */
+export declare const STORE_KEY_PAGE = 25;
+/** One muted line under an entry's key: its value, shortened, and when it last changed. */
+export declare function storeEntryDetail(entry: {
+    value?: unknown;
+    updatedAt?: string;
+}): string;
 /**
  * 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
@@ -54,3 +66,5 @@ export interface DataVar {
     type: "string" | "number" | "boolean" | "json";
     value: unknown;
 }
+/** Rows for a literal object or the existing typed-row format; bindings stay in JSON mode. */
+export declare function dataVarRows(value: unknown, previous?: DataVar[]): DataVar[] | null;

package/dist/RouterEditor.d.ts

@@ -0,0 +1,5 @@
+export declare function RouterEditor({ values, onChange, readOnly, }: {
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    readOnly?: boolean;
+}): import("react").JSX.Element;

package/dist/StepBuilderModal.d.ts

@@ -1,15 +1,21 @@
 import { NodeConfig } from './NodeConfigForm.tsx';
-import { ExpressionStepSource } from './components/ExpressionOptions.tsx';
+import { ExpressionLoopSource, 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';
-/** The step the builder emits — the editor assigns the final `id`. `NodeConfig`
- * carries the base settings (retry / onError / notes) set on the Config view. */
+import { StepStartState, W6WApi } from './provider.tsx';
+import { ActionDef, ActionParam, AppSummary, FunctionSummary, ThemeMode, WorkflowDetail, WorkflowSummary } from './types.ts';
+/** The step the builder emits — the editor assigns the final `id` unless `id` carries a
+ * name the user chose in the add flow. `NodeConfig` carries the base settings (retry /
+ * onError / notes) set on the Config view. */
 export interface BuiltStep extends NodeConfig {
+    /** The node name chosen in the add flow; on `onDraftChange` it renames the minted node. */
+    id?: string;
     uses: {
         app: string;
         action: string;
         connection?: string | null;
+        connectionRef?: string;
+        /** Marks an app TRIGGER node (`action` is the trigger key); the engine/server read it. */
+        trigger?: true;
     };
     with?: Record<string, unknown>;
 }
@@ -27,9 +33,15 @@ 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;
+    /**
+     * The graph's current node ids. With `onDraftChange`, the add flow shows the minted node's
+     * name with the same rename control the step editor has, validated against these (unique,
+     * no dot), and applies it on Done — so the node is created with that name.
+     */
+    stepIds?: string[];
     theme?: ThemeMode;
     /**
      * Hide the GRAPH-ONLY tabs — Triggers / Controls / Utilities / Data, the
@@ -56,10 +68,11 @@ export interface StepBuilderModalProps {
      * Which homepage tab opens first. Defaults to `"connected"` — F-2.0's
      * homepage. A caller re-opening the picker for an already-bound target
      * passes that target's own family, so "Change" lands where the current
-     * value lives instead of making the author re-find the tab.
+     * value lives instead of making the author re-find the tab. The canvas's
+     * right-click "Add trigger" opens on `"triggers"`.
      */
-    initialTab?: "connected" | "functions" | "workflows";
-    /** Modal heading. Defaults to "Add a step". */
+    initialTab?: "connected" | "functions" | "workflows" | "triggers";
+    /** Modal heading. Defaults to "Add a node". */
     title?: string;
     /**
      * Workflow-step context, when the builder is opened for a step that already
@@ -81,6 +94,11 @@ export interface StepBuilderModalProps {
      * which have no graph to draw ancestors from.
      */
     upstreamSteps?: ExpressionStepSource[];
+    /**
+     * The For each whose body the new step lands in (`stepBuilderLoop`, same decision as its
+     * rail). Seeds the Test tab's `state.foreach` with the sample item and index 0; not editable here.
+     */
+    loop?: ExpressionLoopSource;
     /**
      * Pre-select an app when the modal opens. When provided along with
      * initialAction/initialConnection/initialWith, the modal opens directly
@@ -114,6 +132,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 +149,19 @@ 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[];
+    /**
+     * Fired once an app trigger or webhook picked on the Triggers tab is committed (needs
+     * `onDraftChange`), with the new node's id: the host closes this modal and
+     * opens that node in its own step editor, as it does for any node.
+     */
+    onOpenStep?: (id: string) => void;
 }
 /** The four representations of the Configure tab: form, full-step JSON,
  * params-only JSON, node settings. */
@@ -140,12 +176,13 @@ export type ConfigView = "props" | "code" | "params-code" | "config";
  * deliberately no second toggle component: one glyph set, one styling, one
  * pressed-state behaviour, however many views a host offers.
  */
-export declare function ConfigViewToggle({ view, onChange, disabled, views, }: {
+export declare function ConfigViewToggle({ view, onChange, disabled, views, customized, }: {
     view: ConfigView;
     onChange: (v: ConfigView) => void;
     disabled?: boolean;
     /** Which views to offer, in order. Defaults to all four. */
     views?: ConfigView[];
+    customized?: boolean;
 }): import("react").JSX.Element;
 /**
  * Guided "add a step" flow. A sidebar toggles between **Apps** (pick app →
@@ -155,22 +192,29 @@ 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, loop, initialApp, initialAction, initialConnection, initialWith, appsFilter, appsIds, connectionOnly, onConnected, excludeCallableIds, onOpenStep, stepIds, }: 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
  * step on Add.
  */
-export declare function ControlStepConfig({ node, onAdd, onClose, onDraftChange, workflowId, upstreamSteps, }: {
+export declare function ControlStepConfig({ node: initialNode, onAdd, onClose, onDone, onDraftChange, onOpenStep, workflowId, upstreamSteps, loop, }: {
     node: InternalNodeDef;
     onAdd: (s: BuiltStep) => string | undefined | void;
     onClose: () => void;
+    /** Done, once the node is added — applies the add flow's name, then closes. Else `onClose`. */
+    onDone?: () => void;
     /** See {@link StepBuilderModalProps.onDraftChange}. */
     onDraftChange?: (id: string, step: BuiltStep) => void;
+    /** Open the full webhook editor, including its URL and listener, as soon as it is added. */
+    onOpenStep?: (id: string) => void;
     workflowId?: string;
     /** The new step's known graph ancestors — see {@link StepBuilderModalProps.upstreamSteps}. */
     upstreamSteps?: ExpressionStepSource[];
+    /** See {@link StepBuilderModalProps.loop}. */
+    loop?: ExpressionLoopSource;
 }): 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
@@ -183,15 +227,25 @@ export declare function ControlStepConfig({ node, onAdd, onClose, onDraftChange,
  * `NodeConfigForm` is reached once the `@w6w/call` step already lives on a
  * canvas, not at add-time.
  */
-export declare function CallableStepConfig({ family, targetId, targetLabel, onAdd, onClose, onDraftChange, }: {
+export declare function CallableStepConfig({ family, targetId, targetLabel, onAdd, onClose, onDone, onDraftChange, }: {
     family: "function" | "workflow";
     targetId: string;
     targetLabel: string;
     onAdd: (s: BuiltStep) => string | undefined | void;
     onClose: () => void;
+    /** Done, once the node is added — applies the add flow's name, then closes. Else `onClose`. */
+    onDone?: () => void;
     /** See {@link StepBuilderModalProps.onDraftChange}. */
     onDraftChange?: (id: string, step: BuiltStep) => void;
 }): import("react").JSX.Element;
+/**
+ * The starting `with` for a freshly picked action: every param whose `default` is
+ * an expression (e.g. `"{{ const.account_id }}"`). A plain default is only shown
+ * as a placeholder value and never stored, so an expression default would render
+ * as literal text and never reach the engine — seeding it makes it a live,
+ * saved binding the user can still clear or replace.
+ */
+export declare function expressionDefaults(params: ActionParam[]): Record<string, unknown>;
 /**
  * Whether every required param has a usable value — gates the inline "Test run".
  * A required array (e.g. a `vars` table) may be empty (see the Data node); other
@@ -284,6 +338,8 @@ interface ReadyToUse {
     state: "loading" | "error" | "empty" | "ready";
     error?: string;
     apps: AppSummary[];
+    /** Full connected-id scope for server search, including apps not loaded yet. */
+    appIds?: string[];
     fns: FunctionSummary[];
     wfs: WorkflowSummary[];
     /** More connected-app ids remain unresolved — draw an explicit "load more" affordance. */
@@ -331,12 +387,42 @@ 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 AppStepConfig({ appId, app, onAdd, onClose, onDraftChange, onChangeApp, theme, workflowId, stepId, upstreamSteps, initialAction, initialConnection, initialWith, }: {
+export declare function useReadyToUse(callables: readonly ("function" | "workflow")[], appsFilter?: (app: AppSummary) => boolean, excludeIds?: readonly string[], appsIds?: readonly string[], 
+/** `resolveInline`: ignore a connection row's inline `app` meta and resolve every id through
+ *  `listAppsByIds` — for a caller that needs fields the inline meta lacks (`triggerCount`). */
+opts?: {
+    resolveInline?: boolean;
+}): 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[];
+/** An app's triggers as action-shaped defs ({ key, title, description, params }), so
+ *  the action pickers and param forms take them as they are. No API member => none. */
+export declare function getTriggerDefs(api: W6WApi, appId: string): Promise<ActionDef[]>;
+/** An app trigger's Test tab: it runs when the app reports the event, not by hand. */
+export declare function AppTriggerTestNote({ title, app }: {
+    title: string;
+    app: string;
+}): import("react").JSX.Element;
+export declare function AppStepConfig({ kind, onOpenStep, appId, app, onAdd, onClose, onDone, onDraftChange, onChangeApp, theme, workflowId, stepId, upstreamSteps, loop, initialAction, initialConnection, initialWith, }: {
+    /**
+     * What the Setup tab picks: one of the app's actions, or (`"trigger"`, the
+     * Triggers tab) one of its triggers. Same account step, same picker, same
+     * add-on-pick; a trigger node carries `uses.trigger: true` and lists
+     * `api.getAppTriggers`. Its Test tab only says when it runs: there is no
+     * action to invoke by hand.
+     */
+    kind?: "action" | "trigger";
+    /** See {@link StepBuilderModalProps.onOpenStep}. */
+    onOpenStep?: (id: string) => void;
     appId: string;
     app?: AppSummary;
     onAdd: (s: BuiltStep) => string | undefined | void;
     onClose: () => void;
+    /** Done, once the node is added — applies the add flow's name, then closes. Else `onClose`. */
+    onDone?: () => void;
     /** See {@link StepBuilderModalProps.onDraftChange}. */
     onDraftChange?: (id: string, step: BuiltStep) => void;
     onChangeApp?: () => void;
@@ -345,6 +431,8 @@ export declare function AppStepConfig({ appId, app, onAdd, onClose, onDraftChang
     stepId?: string;
     /** The new step's known graph ancestors — see {@link StepBuilderModalProps.upstreamSteps}. */
     upstreamSteps?: ExpressionStepSource[];
+    /** See {@link StepBuilderModalProps.loop}. */
+    loop?: ExpressionLoopSource;
     /** Pre-selected action key, opens directly to Configure tab when provided with initialWith */
     initialAction?: string;
     /** Pre-selected connection id */

package/dist/StepNameEditor.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A node's name (its step id) with a pencil to rename it — the one control both the step
+ * editor and the add flow show. `onCommit` validates and applies a changed name, returning
+ * why it was refused (shown inline, the input stays open) or `null`. Enter / blur commit,
+ * Escape reverts.
+ */
+export declare function StepNameEditor({ value, onCommit, readOnly, }: {
+    value: string;
+    onCommit: (id: string) => string | null;
+    readOnly?: boolean;
+}): import("react").JSX.Element;

package/dist/StopEditor.d.ts

@@ -0,0 +1,5 @@
+export declare function StopEditor({ values, onChange, readOnly, }: {
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    readOnly?: boolean;
+}): import("react").JSX.Element;

package/dist/TriggerFillForm.d.ts

@@ -1,4 +1,6 @@
 import { StepTestPersist } from './StepBuilderModal.tsx';
+/** How long an edited sample payload sits before it is remembered (it is flushed on close too). */
+export declare const EDIT_SAVE_DEBOUNCE_MS = 600;
 /**
  * The Test-tab widget for a manual/webhook trigger. A trigger's configured
  * `fields` ARE the run's starting state, so testing it means **filling those
@@ -37,8 +39,14 @@ import { StepTestPersist } from './StepBuilderModal.tsx';
  * `packages/studio/src/lib/workflow-live-run.ts`): it fetches the manual
  * trigger's latest `step_tests` row and sends its `with` verbatim as `input`.
  * This form is not in that path; it only writes the fixture that call reads.
+ *
+ * **Listen for test event.** With `listen` supplied (a `@w6w/webhook` trigger inside a workflow),
+ * the primary action is {@link WebhookListenPanel}: the real request a caller sends becomes the
+ * payload. **Use as test data** runs exactly this form's Test path with the captured request as
+ * the values, so it lands as the trigger's output and saved test like a typed payload would. The
+ * manual payload box stays, folded below as the secondary option.
  */
-export declare function TriggerFillForm({ app, action, fields, persist, }: {
+export declare function TriggerFillForm({ app, action, fields, persist, listen, }: {
     app: string;
     action: string;
     /** The trigger's `fields` param value (an array of field definitions). */
@@ -49,4 +57,9 @@ export declare function TriggerFillForm({ app, action, fields, persist, }: {
      * a fixture by and this form neither reads nor writes one.
      */
     persist?: StepTestPersist;
+    /** Offer "Listen for test event" (webhook triggers in a saved workflow). */
+    listen?: {
+        stepWith: Record<string, unknown> | undefined;
+        readOnly?: boolean;
+    };
 }): import("react").JSX.Element;

package/dist/WebhookListenPanel.d.ts

@@ -0,0 +1,28 @@
+import { SubscriptionSummary, WebhookListenSession } from './types.ts';
+/** The captured call a webhook trigger emits as its output. */
+export type CapturedWebhookRequest = NonNullable<WebhookListenSession["request"]>;
+/**
+ * The `@w6w/webhook` subscription that feeds `stepId`: the one bound to that node, else the
+ * workflow's first webhook subscription (one not bound to any node — the URL panel's own pick).
+ */
+export declare function pickWebhookSubscription(subs: SubscriptionSummary[], stepId: string): SubscriptionSummary | null;
+/** Headers for display: secret-looking values masked. */
+export declare function displayHeaders(headers: Record<string, string>): Record<string, string>;
+/**
+ * "Listen for test event" — the webhook trigger's primary Test action. Opens a short-lived listen
+ * session on the node's webhook subscription, so the receive URL captures the next request even
+ * while the workflow is unpublished (the caller gets a test acknowledgement and no run starts),
+ * and long-polls it. A captured request is shown — method, time, query, headers (secret-looking
+ * ones masked), pretty body — and **Use as test data** hands it to `onUse`, which makes it this
+ * trigger's output and saved test.
+ */
+export declare function WebhookListenPanel({ workflowId, stepId, stepWith, readOnly, onUse, using, }: {
+    workflowId: string;
+    stepId: string;
+    /** The node's current config — the params a newly created subscription starts from. */
+    stepWith: Record<string, unknown> | undefined;
+    readOnly?: boolean;
+    onUse: (request: CapturedWebhookRequest) => void;
+    /** `onUse`'s save is in flight. */
+    using?: boolean;
+}): import("react").JSX.Element | null;

package/dist/WorkflowConnections.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+import { FlowStep } from './flow-types.ts';
+import { ConnectionSummary } from './types.ts';
+import { FlowConnections } from './workflow-connections.ts';
+export declare const WorkflowConnectionsContext: import('react').Context<{
+    nodes: FlowStep[];
+    readOnly?: boolean;
+    connections: FlowConnections;
+    setConnections: (connections: FlowConnections) => void;
+} | null>;
+export declare function useWorkflowConnections(): {
+    nodes: FlowStep[];
+    readOnly?: boolean;
+    connections: FlowConnections;
+    setConnections: (connections: FlowConnections) => void;
+} | null;
+/** One account menu for both adding and editing workflow nodes. */
+export declare function WorkflowConnectionPicker({ step, conns, failed, readOnly, open, onOpenChange, anchorRef, onChangeConnection, onChangeConnectionRef, onConnectionCreated, }: {
+    step: FlowStep;
+    conns: ConnectionSummary[] | null;
+    failed?: boolean;
+    readOnly?: boolean;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    anchorRef: RefObject<HTMLElement | null>;
+    onChangeConnection: (id: string) => void;
+    onChangeConnectionRef: (ref: string) => void;
+    onConnectionCreated: () => void;
+}): import("react").JSX.Element;