@w6w/ui 0.0.0-stage → 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,413 @@
+/**
+ * Wire types the components consume. These mirror the shapes the w6w server
+ * returns over HTTP. They are intentionally a local copy so consumers who
+ * don't use `@w6w/types` (partners, non-TypeScript backends) don't need it.
+ */
+/** Summary of a registered app as returned by GET /apps. */
+export interface AppSummary {
+    id: string;
+    displayName: string;
+    version?: string;
+    description?: string;
+    categories?: string[];
+    sourceRef?: string;
+    importedAt?: string;
+    /** Inlined data: URI (or absolute URL) for the app's icon. */
+    iconSvg?: string;
+    /** Optional dark-mode variant. */
+    iconSvgDark?: string;
+    brandColor?: string;
+    brandColorDark?: string;
+    versionCount?: number;
+    maturity?: string;
+    visibility?: string;
+    successor?: string;
+    /**
+     * True when the calling tenant has zero-credential access flagged for this
+     * app — usable with no connection step at all (server-computed per caller;
+     * `packages/server/packages/api/wire-summary.ts`'s `zeroCredential`).
+     */
+    zeroCredential?: boolean;
+}
+/** One trigger an app declares, as returned by GET /apps/:id/triggers. */
+export interface TriggerSummary {
+    key: string;
+    /** The trigger's human label. REQUIRED — the wire type calls it `title`, not
+     *  `displayName`; do not rename it. */
+    title: string;
+    description?: string;
+    requiresAuth?: boolean;
+    /** `"poll"` triggers are fetched on an interval; absent or `"webhook"` receive pushes. */
+    type?: "webhook" | "poll";
+    /** Host floor for a poll trigger's interval, in milliseconds. */
+    minIntervalMs?: number;
+}
+/** A Subscription (rfcs/trigger.md) as returned by the console subscription routes. */
+export interface SubscriptionSummary {
+    id: string;
+    appId: string;
+    triggerKey: string;
+    workflowId: string;
+    connectionId: string | null;
+    /** Present only for `appId === "@w6w/webhook"` — the server's own computed receive URL. */
+    webhookUrl?: string;
+    type?: "webhook" | "poll";
+    status?: string;
+    /** Poll interval in milliseconds; null for webhook subscriptions. */
+    intervalMs?: number | null;
+    lastError?: {
+        code: string;
+        message: string;
+    } | null;
+}
+/** One field on an Auth method's connection form. Drives the input widgets. */
+export interface AuthField {
+    key: string;
+    label: string;
+    type: "string" | "number" | "boolean" | "secret" | string;
+    required?: boolean;
+    default?: unknown;
+    hint?: string;
+}
+/**
+ * One declared parameter of an action, as returned by GET /apps/:id (the
+ * `actions[].params` array). Drives the guided step-builder form. Same shape as
+ * an app manifest's action param — a superset of `AuthField` (adds `text`/`json`
+ * widget types).
+ */
+export interface ActionParam {
+    key: string;
+    label?: string;
+    /**
+     * Widget to render for this param. Beyond the scalar types, `text` is a
+     * textarea, `json`/`group` an inline JSON editor, `code` a code editor, and
+     * `vars` a dynamic typed key/value table.
+     */
+    type: "string" | "text" | "number" | "boolean" | "select" | "multiselect" | "array" | "json" | "group" | "secret" | "code" | "vars" | "section" | string;
+    required?: boolean;
+    default?: unknown;
+    hint?: string;
+    /** Placeholder text for the input (e.g. the trailing prompt on a multiselect). */
+    placeholder?: string;
+    /**
+     * Move this (optional) param under the collapsed "Additional parameters"
+     * section. Required + non-advanced params show up front. Ignored for required
+     * params (they always show).
+     */
+    advanced?: boolean;
+    /**
+     * Lay this param out on a shared row with adjacent params carrying the same
+     * `row` id — e.g. a username/password pair side by side.
+     */
+    row?: string;
+    /**
+     * Allow multiple values (array of `type`). Renders as an add/remove list via
+     * the same `ArrayField` a `type: "array"` param uses, with a synthesized
+     * `item` — sugar for `type: "array"`; see rfcs/param.md's `repeat` amendment.
+     * Mirrors `@w6w/types`' `Param.repeat`.
+     */
+    repeat?: boolean;
+    /** Element schema when `type: "array"` (a scalar list or a list of objects). */
+    item?: ParamArrayItem;
+    /**
+     * Conditional visibility — the param renders only when this predicate holds
+     * against a sibling field's value. Lets a schema declare conditional sections
+     * (e.g. Basic-auth fields shown only when `auth` is `"basic"`).
+     */
+    showIf?: ParamCondition;
+    /**
+     * Constrained choices. Renders as a single-select dropdown for `select` (or any
+     * param with options), and as a multi-select pill picker for `multiselect`.
+     */
+    options?: ParamOption[];
+    /** Type-specific render/behavior options. */
+    config?: ParamConfig;
+    /**
+     * Nested params, walked by the renderer for `type: "group"` (nested object)
+     * and `type: "section"` (layout-only container whose children write to the
+     * ENCLOSING form values, not under this param's key).
+     */
+    children?: ActionParam[];
+    /**
+     * `type: "section"` only — the container behavior. `"collapsible"` renders a
+     * titled, collapsed-by-default disclosure; `"group"` a `layout` row/stack.
+     */
+    section?: "collapsible" | "group";
+    /** `section: "collapsible"` only — the `<summary>` heading. */
+    title?: string;
+    /** `section: "collapsible"` only — an optional secondary summary line. */
+    subtitle?: string;
+    /** `section: "group"` only — `"row"` side by side, `"stack"` vertical (default). */
+    layout?: "row" | "stack";
+    /** `section: "collapsible"` only — start collapsed (default `true`). */
+    collapsed?: boolean;
+}
+/** A single choice for a param rendered as a dropdown. */
+export interface ParamOption {
+    value: string | number;
+    label: string;
+}
+/**
+ * The element schema for a `type: "array"` param. Either a scalar list
+ * (`type: "string" | "number"`, each item a single value) or a list of objects
+ * (`type: "object"` with `fields`, each item a `{ [key]: value }` record whose
+ * fields render side by side).
+ */
+export interface ParamArrayItem {
+    type: "string" | "number" | "object" | string;
+    /** For object items — the fields of each element (rendered inline in a row). */
+    fields?: ActionParam[];
+    /** Placeholder for a scalar item's input. */
+    placeholder?: string;
+    /** For a scalar item — constrained choices, carried over from a `repeat: true`
+     *  param's own `options` (a `repeat` scalar with `options` still needs them). */
+    options?: ParamOption[];
+}
+/**
+ * A conditional-visibility predicate tested against a sibling param's value.
+ * Exactly one of `equals` / `in` / `notIn` / `truthy` is used (checked in that
+ * order). The compared value falls back to the sibling's `default` when unset.
+ */
+export interface ParamCondition {
+    /** Sibling param key whose value is tested. */
+    field: string;
+    /** Visible when the field's value strictly equals this. */
+    equals?: string | number | boolean;
+    /** Visible when the field's value is one of these. */
+    in?: Array<string | number | boolean>;
+    /** Visible when the field's value is NOT one of these. */
+    notIn?: Array<string | number | boolean>;
+    /** Visible when the field's value is truthy (`true`) or falsy (`false`). */
+    truthy?: boolean;
+}
+/** Type-specific render/behavior options for a param. */
+export interface ParamConfig {
+    /** Render as a multi-line textarea. Implied by `type: "text"`. */
+    multiline?: boolean;
+}
+/** Summary of an action an app exposes, as returned by GET /apps/:id. */
+export interface ActionDef {
+    key: string;
+    type?: string;
+    title?: string;
+    description?: string;
+    params?: ActionParam[];
+    /**
+     * The declared output shape — `OutputField[]` (`{ key, type, label }`, a dot
+     * key for a nested path) or a `DynamicOutput` (`{ source }`) the editor does
+     * not resolve. Read by `output-shape.ts`, so a later step can pick fields.
+     */
+    output?: unknown;
+    /** An example output value; used for the field shape when `output` is absent. */
+    sample?: unknown;
+    /** Declared connection ports; `"many"` is unbounded. Absent fields fall through to defaults. */
+    ports?: {
+        in?: number | "many";
+        out?: number | "many";
+    };
+}
+/**
+ * Summary of a registered Function, as returned by GET /functions (core
+ * rfcs/function.md). `valid` mirrors the server's `isFunctionValid` — false for
+ * a draft Function (no `impl`, or an incomplete one) — the picker's list stage
+ * doesn't gate on it (an invalid Function still shows up; the server's own
+ * invoke route is what refuses it).
+ */
+export interface FunctionSummary {
+    id: string;
+    key: string;
+    displayName?: string;
+    description?: string;
+    updatedAt?: string;
+    valid: boolean;
+}
+/**
+ * A Function's canonical interface, as returned by GET /functions/:id — enough
+ * to render its `inputs` form (core rfcs/function.md). `inputs` reuses the
+ * wire-mirror `ActionParam[]` shape verbatim, exactly as an app action's own
+ * declared `params` do.
+ */
+export interface FunctionDetail {
+    id: string;
+    key: string;
+    displayName?: string;
+    description?: string;
+    inputs: ActionParam[];
+    valid: boolean;
+}
+/** Summary of a registered Workflow, as returned by GET /workflows. */
+export interface WorkflowSummary {
+    id: string;
+    name: string;
+    displayName?: string;
+    description?: string;
+    status?: string;
+    updatedAt?: string;
+}
+/** One step of a Workflow, as returned by GET /workflows/:id — the minimal
+ * shape the picker's Configure stage needs to find the entry/trigger step's
+ * own declared `with.fields` (core rfcs/node-types.md's trigger node). */
+export interface WorkflowStepSummary {
+    id: string;
+    uses: {
+        app: string;
+        action: string;
+    };
+    with?: Record<string, unknown>;
+}
+/**
+ * Full Workflow definition, as returned by GET /workflows/:id — enough to
+ * derive the trigger's declared input fields for the Functions/Workflows
+ * picker's Configure stage. A deliberately smaller mirror than `FlowWorkflow`
+ * (`flow-types.ts`) — these wire types stay independent of the flow-editor's
+ * own type, matching this file's own "local copy" convention.
+ */
+export interface WorkflowDetail {
+    id: string;
+    name: string;
+    displayName?: string;
+    description?: string;
+    steps: WorkflowStepSummary[];
+}
+/** Auth method declaration as exposed by an app's manifest. */
+export interface AuthDef {
+    key: string;
+    type: "oauth2" | "apiKey" | "basic" | "bearer" | "custom" | "tenantAuth" | "jit" | string;
+    displayName?: string;
+    description?: string;
+    connectionLabel?: string;
+    fields?: AuthField[];
+    /** OAuth2 endpoints (only present when type === "oauth2"). */
+    oauth2?: Record<string, unknown>;
+    /**
+     * False when the method requires per-host configuration that hasn't been
+     * provided yet (e.g. an oauth2 method with no client credentials set up).
+     * The picker hides entries with `available === false`.
+     */
+    available?: boolean;
+    /** Names of host-side config keys this method needs, when applicable. */
+    requiresHostConfig?: string[];
+    /**
+     * Present only on a `tenantAuth`/`jit` entry: `true` when the operator has
+     * flagged this method as zero-credential for the calling scope's tenant, so
+     * the server resolves a connection automatically at invoke time. This is
+     * NOT `available` — `available` means "this method can be picked at all";
+     * `autoSatisfied` means "the user does not have to pick anything for it".
+     */
+    autoSatisfied?: boolean;
+    /**
+     * `true` on the one method the server marks as the tenant's default for this
+     * app. The connect modal preselects it (among the available methods).
+     */
+    default?: boolean;
+}
+/** Public summary of a stored connection — never carries the credential. */
+/** The display meta the server inlines on each {@link ConnectionSummary} (`app`). */
+export interface ConnectionAppMeta {
+    displayName: string;
+    iconSvg?: string;
+    iconSvgDark?: string;
+    brandColor?: string;
+    brandColorDark?: string;
+}
+export interface ConnectionSummary {
+    id: string;
+    appId: string;
+    authKey: string;
+    /** The owning tenant. The server sends `tenant`/`subject`, never `owner`. */
+    tenant?: string;
+    /** The owning subject (the partner's user id). */
+    subject?: string;
+    /**
+     * The connection's app, inline: just enough to draw its card. `null` when the
+     * app is no longer in the catalog; absent from servers that don't send it.
+     */
+    app?: ConnectionAppMeta | null;
+    displayName?: string;
+    state?: "pending" | "connected" | "needs_refresh" | "broken" | "revoked" | string;
+    profile?: Record<string, unknown>;
+    createdAt?: string;
+    updatedAt?: string;
+}
+/** A saved set of action-test input values, scoped to a connection + action. */
+export interface SavedTest {
+    id: string;
+    connectionId: string;
+    appId: string;
+    actionKey: string;
+    name: string;
+    values: Record<string, unknown>;
+    createdAt: string;
+    updatedAt: string;
+    /** When this saved test was last run (ISO), or null/undefined if never run. */
+    lastRunAt?: string | null;
+    /** Whether the most recent run succeeded, or null/undefined if never run. */
+    lastRunOk?: boolean | null;
+    /** Short headline for the most recent run's outcome, or null/undefined if never run. */
+    lastRunSummary?: string | null;
+}
+/**
+ * One outbound HTTP call an action made while running — the exact (redacted)
+ * request that went to the third-party API and the response that came back.
+ * Returned alongside an invoke's value/error and persisted server-side, so a
+ * run can be debugged and evaluated against the vendor's documented API.
+ */
+export interface ApiCallRecord {
+    host: string;
+    method: string;
+    /** 0 when the request never produced a response (`error` says why). */
+    status: number;
+    url?: string;
+    requestHeaders?: Record<string, string>;
+    /** `null` on a persisted row that captured no body. */
+    requestBody?: string | null;
+    responseHeaders?: Record<string, string>;
+    responseBody?: string | null;
+    responseBytes?: number;
+    durationMs?: number;
+    /** A captured body hit the size cap and was cut. */
+    truncated?: boolean;
+    error?: string | null;
+}
+/** Effective theme hint passed to icon components to pick a light/dark variant. */
+export type ThemeMode = "light" | "dark";
+/** The segment kinds an {@link ExprValue} part can take. */
+export type ExprPartKind = "text" | "var" | "secret" | "expr" | "render";
+/**
+ * One segment of an {@link ExprValue}. The populated field depends on `kind`:
+ *   - `text`   → `value` holds a literal string chunk.
+ *   - `var`    → `ref` names a project variable.
+ *   - `secret` → `ref` names a vault secret (surfaced via the secret picker).
+ *   - `expr`   → `expr` holds inline JSONLogic evaluated against the run scope.
+ */
+export interface ExprPart {
+    kind: ExprPartKind;
+    /** Literal chunk, for `kind: "text"`. */
+    value?: string;
+    /** Name of the referenced variable/secret, for `kind: "var" | "secret"`. */
+    ref?: string;
+    /** Inline JSONLogic, for `kind: "expr"`. */
+    expr?: unknown;
+}
+/**
+ * A multipart value: an ordered list of {@link ExprPart} segments that
+ * concatenate to a string at resolve time.
+ */
+export interface ExprValue {
+    type: "expr";
+    parts: ExprPart[];
+}
+/**
+ * The at-rest form of a secret-typed scalar field: AES-GCM ciphertext + IV
+ * (both base64). Decrypted server-side; never decrypted in the client — the UI
+ * renders it as `***`.
+ */
+export interface SecretValue {
+    type: "secret";
+    ciphertext: string;
+    iv: string;
+}
+/** `true` if `v` is an {@link ExprValue} envelope. Safe on `unknown`. */
+export declare function isExprValue(v: unknown): v is ExprValue;
+/** `true` if `v` is a {@link SecretValue} envelope. Safe on `unknown`. */
+export declare function isSecretValue(v: unknown): v is SecretValue;

package/dist/ui.css

@@ -0,0 +1 @@
+.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;touch-action:none}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px) translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px) translateY(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) )}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:5px;height:5px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));translate:-50% -50%}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}

package/dist/use-app-action-defs.d.ts

@@ -0,0 +1,7 @@
+import { PortsLookup } from './flow-types.ts';
+import { StepNode } from './flow-utils.ts';
+import { W6WApi } from './provider.tsx';
+import { ActionDef } from './types.ts';
+export declare function useAppActionDefs(api: W6WApi, nodes: StepNode[]): Record<string, ActionDef[]>;
+/** Build a `PortsLookup` over the fetched catalog defs (`useAppActionDefs`' result). */
+export declare function portsLookupFromDefs(defs: Record<string, ActionDef[]>): PortsLookup;

package/dist/use-enter-submit.d.ts

@@ -0,0 +1,23 @@
+import { KeyboardEventHandler } from 'react';
+/**
+ * Enter-to-submit for a single-line text input, one implementation mounted by
+ * every form instead of each surface hand-rolling its own `onKeyDown` — see
+ * `studio/src/components/ApiServerSetting.tsx:75-80` for the ad-hoc version
+ * this replaces (a bare `if (e.key === "Enter")` with no modifier guard and no
+ * check that the target is actually a single-line text field). Spread the
+ * returned object onto the input: `<input {...useEnterSubmit(save)} … />`.
+ *
+ * Deliberately narrow: fires only for a bare `Enter` (no Shift/Alt/Ctrl/Meta,
+ * and not mid-IME-composition) on an `<input>` whose `type` is a plain
+ * single-line text control — never a `<textarea>`, a `contenteditable` node,
+ * or a non-text `<input>` (checkbox, date picker, …), each of which has its
+ * own meaning for Enter (a newline, a native widget's own key handling) that
+ * this hook must not steal. `opts.enabled` is a hard off switch: pass the same
+ * boolean guarding the caller's own submit button so Enter can never do
+ * something the button itself refuses to do.
+ */
+export declare function useEnterSubmit(onSubmit: () => void, opts?: {
+    enabled?: boolean;
+}): {
+    onKeyDown: KeyboardEventHandler<HTMLElement>;
+};

package/dist/use-seed-sources.d.ts

@@ -0,0 +1,16 @@
+import { ExpressionStepSource } from './components/ExpressionOptions.tsx';
+import { SeedSource } from './step-preview-state.ts';
+/**
+ * Gather each graph ancestor's latest saved step-test so the incoming-state
+ * control can offer it as a seed. **One implementation**, mounted by every
+ * surface — the step editor's Test tab, the canvas ▶ Run collect form, and the
+ * add-step builder's Test tab — so the `gate_1 · succeeded` chip behaves
+ * identically on each.
+ *
+ * Driven by `upstreamSteps` (from `upstreamStateSources` /
+ * `stepBuilderUpstreamSteps`), not a re-walked graph. Keyed on the *set* of
+ * upstream ids rather than the array's identity: that array is rebuilt on
+ * every node drag and every field edit, so keying on it would refetch on each
+ * keystroke.
+ */
+export declare function useSeedSources(workflowId: string, upstreamSteps: ExpressionStepSource[], enabled: boolean): SeedSource[];

package/package.json

@@ -1,6 +1,114 @@
 {
   "name": "@w6w/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "React components for w6w — central API management. Build plugins, apps and integrations on them.",
+  "license": "MIT",
+  "homepage": "https://w6w.io",
+  "author": "W6W (https://w6w.io)",
+  "bugs": "https://github.com/w6w-io/w6w-ui/issues",
+  "keywords": [
+    "w6w",
+    "react",
+    "components",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/w6w-io/w6w-ui.git"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./flow": {
+      "types": "./dist/flow.d.ts",
+      "import": "./dist/flow.mjs",
+      "require": "./dist/flow.cjs"
+    },
+    "./code": {
+      "types": "./dist/code.d.ts",
+      "import": "./dist/code.mjs",
+      "require": "./dist/code.cjs"
+    },
+    "./styles.css": "./src/styles.css",
+    "./code.css": "./src/code.css",
+    "./styles.scss": "./src/styles.scss",
+    "./styles/*": "./src/styles/_*.scss"
+  },
+  "files": [
+    "dist",
+    "src/styles.css",
+    "src/code.css",
+    "src/styles.scss",
+    "src/styles/_*.scss",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.1.6",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/lint": "^6.8.4",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.35.0",
+    "@uiw/react-codemirror": "^4.23.7",
+    "@w6w/expr": "^0.1.0",
+    "@xyflow/react": "^12.3.6",
+    "prism-react-renderer": "^2.4.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@storybook/react-vite": "^10.5.8",
+    "@types/jsdom": "^28.0.3",
+    "@types/node": "^25.9.1",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^30.0.1",
+    "playwright-core": "1.60.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.102.0",
+    "storybook": "^10.5.8",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "scripts": {
+    "build": "pnpm build:css && tsc -b && vite build",
+    "build:css": "node scripts/build-css.mjs",
+    "check:css": "node scripts/build-css.mjs --check",
+    "typecheck": "tsc -b --noEmit",
+    "test": "node --conditions=w6w-source --import ./src/test-jsx-loader.mjs --test src/__tests__/*.test.ts src/components/__tests__/*.test.ts",
+    "test:picker-layout": "bash test/picker-layout/run.sh",
+    "test:expr-template": "bash test/expr-template/run.sh",
+    "test:action-test-form": "bash test/action-test-form/run.sh",
+    "test:copyable": "bash test/copyable/run.sh",
+    "test:pack-smoke": "bash test/pack-smoke/run.sh",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "lint": "biome check .",
+    "lint:tokens": "node scripts/lint-tokens.mjs",
+    "coverage:stories": "node scripts/coverage-stories.mjs",
+    "format": "biome format --write ."
+  }
 }