@w6w/ui 0.2.11 → 0.2.55

package/CHANGELOG.md

@@ -3,18 +3,155 @@
 All notable changes to `@w6w/ui` are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Releases are
-tagged `vX.Y.Z` and published to npm by `.github/workflows/release.yml`; changes not yet released
+tagged `ui-vX.Y.Z` in Studio and published to npm by `.github/workflows/release-ui.yml`; changes not yet released
 accumulate under `[Unreleased]`. Entries below `[0.1.0]` predate the first npm release — see the
 repo's git history for exact dates and commits.
 
-## [Unreleased]
+## [0.2.51]
 
+- Fix GitHub Actions publication with npm 12 by explicitly identifying the tested tarball as a local file.
+
+## [0.2.50]
+
+- Move UI into the Studio workspace while preserving its npm package and MIT license.
+- Add JSON parameter customization, Update object, and boolean and array condition controls.
+- Open webhook setup immediately and defer document JSON validation until blur.
+
+- A trigger's payload fields reach the expression picker. **trigger.event** and the trigger's own
+  row (`nodes.<trigger>.output`) now list the fields of the payload the trigger last ran with: a
+  Test this session, else the server's remembered sample (`node_samples`), so they survive a
+  reload. Before, a webhook or schedule entry showed only "Entire output" while every step after it
+  listed its fields. An app trigger's declared event fields still annotate and top up the list; a
+  Manual trigger's payload is its output only, since a manual run has no event.
+  `ExpressionOptions.eventOutputsFrom` now also takes `fresh` and `persisted`.
+- An edited sample payload on a trigger's Test tab is remembered as it is typed and when the modal
+  closes, not only on **Test run**, so the header Run, ▶ on the node and the Run node modal run it
+  straight away. New `trackTestInputSave` / `testInputSavesSettled` (from `@w6w/ui`): every
+  remembered-input read now waits for a save still on the wire, so a Run pressed right after
+  closing the modal never reads the payload from before the edit.
+- A webhook trigger's **Or test with a sample payload** section opens by itself when a saved
+  payload is loaded into it, so reopening the Test tab shows what ▶ Run will run with. Collapsed,
+  a loaded payload looked like none.
+- The expression picker's Previous steps no longer offer a **Stop workflow**: it ends the run, so
+  no step after it reads its output (its static meta stays in the Metadata section). The node
+  builder's picker now scopes to the new node's own path once the node is wired in, as the step
+  editor's already did, so a step on the other side of an If (True/False) or on another Router
+  route is no longer offered either. Before, only a node inside a loop body was scoped, and every
+  other new node was offered every node in the workflow.
+- Name a node while adding it. Once the node builder has added a node, its header shows the
+  node's name (its step id) with the same pencil the step editor has, prefilled with the generated
+  id and checked the same way (unique, no dot); Done creates the node under that name. Hosts pass
+  the graph's ids as `StepBuilderModal`'s new `stepIds`; `BuiltStep` gains an optional `id` (the
+  chosen name). The step editor's rename now also refuses a taken name with a message, through the
+  new `stepNameError` in `flow-utils`.
+- If, Stop workflow and Router conditions take several rows. **+ Add condition** adds a row, each
+  row gets a remove button, and a selector joins them: **All of (AND)**, **Any of (OR)** or
+  **Exactly one of (XOR)**, saved as JSONLogic `and`, `or` and `@w6w/expr`'s `xor`. One row still
+  saves as a bare comparison; a nested group opens in the code view as before. The run log's
+  condition table names the combinator and shows the overall result.
+- The workflow canvas has a right-click menu. On empty canvas: **Add node** and **Add trigger**,
+  which open the node builder (Add trigger on its Triggers tab) and place the step at the click. On
+  a node, or with nodes selected: **Duplicate** and **Delete** too, acting on the selection; Delete
+  takes the Delete key's selection confirm and is one undo step. Drawn with the canvas note menu's
+  styles, keyboard-driven (arrows, Home/End, Enter, Esc),
+  closed by an outside click, scroll, pan or zoom, greyed under `readOnly`. `StepBuilderModal`'s
+  `initialTab` also takes `"triggers"`. New real-browser gate: `pnpm test:workflow-context-menu`.
+- Code views fill their box. In `JsonEditor`, `CodeEditor` and `YamlEditor` the code area now
+  covers the whole bordered box, also when only `minHeight` / `maxHeight` size it (the Data page's
+  Document modal, the default-height Script and YAML editors, the full-view JSON body). Before, the
+  gutter and the horizontal scrollbar stopped under the last line and the rest of the box was empty.
+  Taller content still scrolls inside the editor, and an explicit `height` is kept. New real-browser
+  gate: `pnpm test:code-editor-fill`.
+- **Write to state** says which side is which. **Pick fields** and **Append** rows carry the column
+  headers **From this step output** → **To state key** (or **Append to state list**), an arrow and a
+  hint (`Copies output.<path> into state.<key>`), and use the Set data row style: the same inputs,
+  a trash `DeleteButton` and **+ Add field**. The left box is a free-text `Combobox` listing the
+  step's output fields. **Under a key** is labelled **To state key**. The stored `state` is unchanged.
+- Test forms remember the last values used, server-side: the Run node modal, the step Test tab
+  (incoming state) and the trigger Test tab reopen PREFILLED with what that workflow + node last ran
+  with, after a success, a reload, another browser or the embed, and show a muted **last used
+  values · Clear** note. New optional `W6WApi.loadTestInputs` / `saveTestInput`
+  (`GET /workflows/:id/test-inputs`, `PUT /workflows/:id/nodes/:nodeId/test-input`), wired in
+  `createW6WApi`; a host without them keeps the step-test fixture prefill. Never in the workflow
+  definition (no dirty, no version); a literal typed into a `secret` param and sealed envelopes are
+  never remembered — bindings are. New exports `useRememberedTestInput`, `LastUsedNote`,
+  `findTestInput`, `rememberableInput`, `NodeTestInput`. 0.2.46.
+- `ExpressionEditorModal` json-binding mode takes `startingState` for a workflow's starting state
+  (`Workflow.initialState`, evaluated once at run start): no Previous steps, State or Secrets in the
+  rail, Documents shown, an **Insert as Reference / Value** toggle (a value copies the source's
+  current sample in), clicks always compose into the object, an empty draft saves `undefined`, and
+  `jsonProblem` refuses a draft. It also takes `title`. `addRefToDraft` takes an optional literal
+  value. New `database` icon. `ExpressionEditorModal` is now exported from the root entry.
+- The run state tree: a step's settings get **Write to state** (Off, Merge at root, Under a key, Pick
+  fields, Append; `FlowStep.state`, `FlowWorkflow.initialState`). The expression picker gains a
+  **State** section built before any run from the writers on the paths that reach the step (the old
+  "Workflow state" section is now "Previous steps"), and ƒx previews resolve `state.*` (`state`,
+  `var` and `vars` are one tree). The run log shows each step's state writes and "State after this
+  step" (`ExecutionLogStep.stateWrites` / `stateAfter`), and `findStateWriteProblems` (`@w6w/ui/flow`)
+  flags two parallel branches writing the same path. Script ƒx insertions read `run.*`.
+- Ctrl/Cmd+Z undoes workflow edits to nodes, configuration, edges, connections and canvas layout.
+  Ctrl/Cmd+Shift+Z or Ctrl+Y redoes them. History keeps the latest 100 edits while the workflow is
+  open; test runs and learned output shapes stay intact, and text fields keep their own undo.
+- A node's input takes any number of incoming edges: wiring a second trigger (or a second path)
+  into a node that already has one adds the edge instead of replacing the existing one. Only an
+  exact duplicate, or an edge into a trigger, is refused.
+- A run's skipped steps say why: `ExecutionLogStep.skipReason` (`SkipReason`) shows "condition
+  false", "run stopped" or "disabled" beside the Skipped pill. A `not_on_path` step (on another
+  path, never part of the run) leaves the run log for a collapsed "N steps on other paths" footer
+  and gets no run paint on the canvas, nor do its edges.
+- Run script reads data as code: a `{{ }}` in its code is converted to `state.nodes.<id>.output…`,
+  `vars.…` or `consts.…` (Python indexes them) when the step opens, behind a quiet note with
+  **Undo**; step chips and ƒx under the code insert those reads; the hint is one line plus a
+  collapsed "How to read data". **Input** moved under a collapsed "Custom input (advanced)"
+  section (open when set). A whole-value JSON param offers "Use the output of <step>" chips, and
+  the Test tab shows script code verbatim. `ResolvedParams` takes `literalKeys`; `CodeEditor`
+  takes `onCreateEditor`; a collapsible section param takes `openWhenSet`, a code param
+  `scriptReads`.
+- A JSON param can be composed from references: the picker shows each step's outputs with their
+  metadata, a click inserts the reference at the cursor (adding to the draft, never replacing it),
+  a bound field renders as a chip, and the editor fills its pane.
+- References save as `{{ }}` template strings, with `\{{` escaping a literal marker; a JSON param
+  binds a reference as a quoted `"{{ ref }}"`. Variables are offered under the `var.` root
+  (`vars.` still resolves), and account constants appear as a read-only Constants group under
+  `const.`.
+- `ParamConfig.valueFormat: "csv"` lets a multiselect param store its choices as one
+  comma-separated string.
 - `WorkflowFlowEditor` takes an optional `stepProblems` map (`StepProblems`, exported from `./flow`)
   and paints a missing-connection error ring and tooltip on each affected app step, repainting live
   when the map changes. The host owns detection; omitted, the canvas renders as before.
 - The step panel's Setup tab labels a connection that is absent from the loaded list "Missing
   connection — choose another", and a failed connections fetch "Couldn't load connections" instead
   of treating it as missing.
+- `Combobox` fills the field it is dropped into and grows to the ƒx button inside a `.w6w-fx-wrap`,
+  so the ƒx sits at the field's right end again everywhere the component is used (Setup Action,
+  dynamic-option and model-route params, flow-editor step actions, the action-test picker).
+- New `ResultViewer`: a read-only result display that picks the view from the value's format — a
+  collapsible JSON tree, xml/markdown/html source, markdown through `Markdown`, and html rendered
+  ONLY inside a sandboxed `<iframe srcdoc>` (`HtmlPreview`, also exported) whose `srcdoc` opens with a
+  `default-src 'none'` CSP meta, so a vendor payload cannot run script and cannot read or reach this
+  page. Accepted residual: a reader's click on a link inside the preview navigates the frame itself —
+  a scriptless, same-origin-less document with no cookies, nothing more. Rendered/Source toggle for
+  html and markdown, one hover-revealed copy button, `detectResultFormat` / `resultCopyText` /
+  `RESULT_RENDER_MAX_CHARS` exported alongside. Source views stop being highlighted above 64 KiB, so a
+  multi-megabyte result renders instantly instead of stalling the pane. No existing pane adopts it yet.
+  ONLY inside a sandboxed `<iframe srcdoc>` (`HtmlPreview`, also exported) with a `default-src 'none'`
+  CSP, so vendor HTML cannot run script, read the page or make a request. Rendered/Source toggle for
+  html and markdown, one hover-revealed copy button, `detectResultFormat` / `resultCopyText` /
+  `RESULT_RENDER_MAX_CHARS` exported alongside.
+- The six existing result panes now render through `ResultViewer`, so a JSON result is a collapsible
+  tree instead of wall-to-wall pretty-printed text and an HTML body is previewed in the sandboxed
+  iframe rather than shown as source: the step builder's inline test-run result and its test-run log
+  (request and response bodies), the flow editor's per-step Result and Metadata, both
+  `ActionTestForm` result panes, `TriggerFillForm`'s filled output state, and `ApiCallsPanel`'s
+  captured request/response bodies (headers stay plain). Error panes, log panes and header panes are
+  unchanged.
+  ONLY inside a sandboxed `<iframe srcdoc>` (`HtmlPreview`, also exported) with a `default-src 'none'`
+  CSP, so vendor HTML cannot run script, read the page or make a request. Rendered/Source toggle for
+  html and markdown, one hover-revealed copy button, `detectResultFormat` / `resultCopyText` /
+  `RESULT_RENDER_MAX_CHARS` exported alongside. No existing pane adopts it yet.
+- The step modal's Test tab shows the step's newest stored run (success or failure) when reopened,
+  labelled with its time, until a new test replaces it; its Result and Metadata panes use
+  `ResultViewer`. Nothing about the result is written to the workflow document.
 
 ## [0.2.0]
 

package/README.md

@@ -38,15 +38,14 @@ npm install @w6w/ui react react-dom
 are peer dependencies. The npm tarball ships compiled `dist/` (ESM + CJS + `.d.ts`), plus the
 stylesheets; the CommonJS build needs Node 20.19+ / 22.12+ to `require()` the ESM-only `@w6w/expr`.
 
-Two source routes remain, for working against an unreleased commit or a sibling checkout:
+For development against unreleased source:
 
-- **Git dependency**: `"@w6w/ui": "github:w6w-io/w6w-ui#<commit-sha>"` — the repo is public.
-- **Sibling checkout with `link:`**: `"@w6w/ui": "link:../w6w-ui"` — the pattern this monorepo
-  uses (`studio` links `ui` this way).
+- **Studio workspace source**: the app and embed resolve `@w6w/ui` to `packages/ui`
+  through the workspace override; published consumers install the npm package.
 
 In this repo `main`/`module`/`types` and `exports` point at raw `.tsx` source under `./src`
 (`publishConfig` switches them to `dist/` in the packed npm tarball, which `pnpm pack` applies), so
-on those two routes your bundler compiles the package like your own code. Inside this repo
+the workspace bundler compiles the package like your own code. Inside this repo
 `@w6w/expr` resolves to the sibling `packages/core` checkout through the `w6w-source` export
 condition (set in `tsconfig.json`, `vite.config.ts`, `.storybook/vite.config.ts`, the `test` script
 and the `test/` rigs). Vite needs nothing extra; a few setups do — see the
@@ -54,11 +53,8 @@ and the `test/` rigs). Vite needs nothing extra; a few setups do — see the
 
 - **Vite with a `link:` checkout**: studio sets `optimizeDeps.exclude: ["@w6w/ui"]` so edits are
   picked up live.
-- **SSR builds**: the package must be bundled, not externalized — the frontend site's Astro build
-  sets `ssr.noExternal` for `@w6w/ui` and `prism-react-renderer` (a React-rendering dependency of a
-  source package needs its own entry). Next.js needs the equivalent, `transpilePackages`.
-- **A linked checkout**: dedupe React (`resolve.dedupe: ["react", "react-dom"]`), or two copies
-  break hooks.
+- **SSR builds consuming workspace source**: bundle the package rather than externalizing
+  raw TSX. Next.js supports this through `transpilePackages`.
 
 ## Usage
 
@@ -215,6 +211,10 @@ not pulled in automatically.
   `ServerResourcesBadge`.
 - **Connections**: `ConnectionList`, `ConnectionHeader`, `EditConnectionModal` (provider; needs
   the optional `updateConnection` on the API client).
+- **Data stores**: `DataStoreList`, `ColumnsEditor`, `CsvPanel` (all props-only), plus the pure
+  data-store helpers (cell parsing, row drafts, error placement) the same entrypoint exports.
+- **Data store entries**: `DataEntryList`, `DataEntryEditor`, `DataTableGrid` (props-only; the host
+  owns drafts, queries, versions and delete confirmation).
 
 Everything is exported from `@w6w/ui` except `WorkflowFlowEditor`, which is only in `@w6w/ui/flow`
 (alongside a re-export of `ExpressionOptionsProvider`). `@w6w/ui/code` re-exports `CodeBlock` and
@@ -276,3 +276,21 @@ FSL.)
 
 `@w6w/expr`, which this package depends on, is MIT too, as is `@w6w/types`, the shared model these
 components' wire types mirror (`@w6w/ui` keeps its own local copy rather than depending on it).
+
+## Workspace and releases
+
+Source lives in `w6w-studio/packages/ui`, beside `packages/embed` and `packages/studio`.
+Install from the Studio repository root with `pnpm install`; all three packages share its
+lockfile. From that root, use `pnpm -C packages/ui build`, `test`, or `storybook`.
+The published npm package remains `@w6w/ui` with the same exports and MIT license.
+
+Publish through `.github/workflows/release-ui.yml` in **w6w-io/w6w-studio**: bump
+`packages/ui/package.json`, commit, then tag `ui-vX.Y.Z`. A manual workflow dispatch
+runs verification, tarball checks and consumer builds without publishing.
+The workflow publishes the exact tested pnpm tarball using npm trusted publishing.
+Before the first release from Studio, update @w6w/ui's npm trusted publisher to
+repository `w6w-studio`, workflow `release-ui.yml` (the former `w6w-ui/release.yml`
+identity no longer matches). No stored npm token is needed.
+
+UI changes deploy with Studio through the repository's existing `studio-dispatch.yml`.
+The old standalone UI checkout and its deploy workflow are no longer used.

package/dist/AppPicker.d.ts

@@ -26,6 +26,9 @@ export interface AppPickerProps {
     emptyMessage?: string;
     /** Render the search input. Defaults to `true`; the connected-apps list opts out. */
     search?: boolean;
+    /** Controlled query for a shared search field outside the picker. */
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
     /** Rendered beneath `emptyMessage` in the empty state (e.g. a "Browse all apps" button). */
     emptyAction?: ReactNode;
     /**
@@ -79,6 +82,14 @@ export interface AppPickerProps {
      * Ignored when `apps` is supplied or the host has no `listAppsPage`.
      */
     category?: string;
+    /**
+     * Server-side "declares at least one trigger" filter for the bounded paged
+     * fetch (`GET /apps?hasTriggers=true`), forwarded to `listAppsPage` exactly
+     * like {@link category}: the page `total` is the FILTERED total, so the footer
+     * reads the server's `N of M`. Part of the query identity — changing it
+     * restarts the fetch. Ignored when `apps` is supplied or via a custom `loadPage`.
+     */
+    hasTriggers?: boolean;
     /**
      * Server-side id allow-list (`GET /apps?ids=a,b&paged=true`) for the bounded
      * paged fetch: the page `total` is the FILTERED total, so the footer reads
@@ -126,4 +137,4 @@ export interface AppPickerProps {
  *    with neither `listAppsPage` nor `listApps` settles into this same
  *    mode's existing empty state — no request, no throw.
  */
-export declare function AppPicker({ onSelectApp, theme, filter, searchPlaceholder, emptyMessage, search, emptyAction, apps: providedApps, categoryFilter, providerFilter, bridgeSupport, category, ids, pageLimit, loadPage, }: AppPickerProps): import("react").JSX.Element;
+export declare function AppPicker({ onSelectApp, theme, filter, searchPlaceholder, emptyMessage, search, searchValue, onSearchChange, emptyAction, apps: providedApps, categoryFilter, providerFilter, bridgeSupport, category, hasTriggers, ids, pageLimit, loadPage, }: AppPickerProps): import("react").JSX.Element;

package/dist/CanvasContextMenu.d.ts

@@ -0,0 +1,19 @@
+import { CanvasMenuAction, CanvasMenuItem } from './canvas-context-menu.ts';
+/**
+ * The workflow canvas's right-click menu. Positioned in the editor's own box (`x`/`y` are
+ * relative to it) so it inherits the editor's theme tokens, and drawn with the canvas
+ * note menu's classes rather than a look of its own.
+ *
+ * Keyboard: focus lands on the first item; ↑/↓ (and Home/End) move, Enter or Space runs
+ * the focused item, Esc or Tab closes. A greyed item stays focusable (`aria-disabled`, the
+ * menu pattern's rule) but does nothing. It closes on any pointer-down outside it and on
+ * a scroll anywhere; the editor closes it on a pan or zoom.
+ */
+export declare function CanvasContextMenu({ x, y, items, onAction, onClose, }: {
+    x: number;
+    y: number;
+    items: CanvasMenuItem[];
+    onAction: (action: CanvasMenuAction) => void;
+    /** `restoreFocus` is true when the menu closed from the keyboard (Esc / Tab). */
+    onClose: (restoreFocus: boolean) => void;
+}): import("react").JSX.Element;