@w6w/ui 0.2.11 → 0.2.55

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@w6w/ui",
-  "version": "0.2.11",
+  "version": "0.2.55",
   "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",
+  "bugs": "https://github.com/w6w-io/w6w-studio/issues",
   "keywords": [
     "w6w",
     "react",
@@ -14,7 +14,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/w6w-io/w6w-ui.git"
+    "url": "https://github.com/w6w-io/w6w-studio.git",
+    "directory": "packages/ui"
   },
   "type": "module",
   "main": "./dist/index.cjs",
@@ -71,10 +72,12 @@
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.35.0",
     "@uiw/react-codemirror": "^4.23.7",
-    "@w6w/expr": "^0.1.0",
+    "@w6w/expr": "^0.1.2",
     "@xyflow/react": "^12.3.6",
     "prism-react-renderer": "^2.4.1",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "typescript": "^5.7.2",
+    "@codemirror/autocomplete": "^6.18.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -90,7 +93,6 @@
     "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"
   },
@@ -102,16 +104,23 @@
     "test": "node --max-old-space-size=2048 --conditions=w6w-source --import ./src/test-jsx-loader.mjs --test --test-concurrency=4 --test-timeout=120000 src/__tests__/*.test.ts src/components/__tests__/*.test.ts",
     "test:picker-layout": "bash test/picker-layout/run.sh",
     "test:canvas-layer": "bash test/canvas-layer/run.sh",
+    "test:foreach-loop": "bash test/foreach-loop/run.sh",
     "test:expr-template": "bash test/expr-template/run.sh",
+    "test:friendly-expressions": "node test/friendly-expressions/run.mjs",
     "test:action-test-form": "bash test/action-test-form/run.sh",
     "test:host-isolation": "bash test/host-isolation/run.sh",
     "test:copyable": "bash test/copyable/run.sh",
+    "test:code-editor-fill": "bash test/code-editor-fill/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 ."
+    "format": "biome format --write .",
+    "test:workflow-connections": "node test/workflow-connections/run.mjs",
+    "test:workflow-undo": "node test/workflow-connections/undo.mjs",
+    "test:workflow-context-menu": "node test/workflow-connections/context-menu.mjs",
+    "test:script-completion": "node test/script-completion/run.mjs"
   }
 }

package/src/code.css

@@ -32,7 +32,9 @@
  * host rule — even a plain `:root { ... }` — wins without !important. Tokens are
  * defined on :root so every `.w6w-*` component inherits them out of the box.
  */
-/* Light — the base defaults. */
+/* Light — the base defaults.
+   `--w6w-loop-N` is the For each palette (flow-loop-colors.ts, LOOP_TONES): no red,
+   black or green, so a loop never reads as an error port or a success edge. */
 :where(:root) {
   --w6w-bg: #f7f8fa;
   --w6w-panel: #ffffff;
@@ -48,6 +50,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #5f6875;
   --w6w-icon-swatch: #f0f2f6;
+  --w6w-loop-1: #2f6fdf;
+  --w6w-loop-2: #7c4ddb;
+  --w6w-loop-3: #b7791f;
+  --w6w-loop-4: #0e8fa8;
+  --w6w-loop-5: #b0399f;
+  --w6w-loop-6: #4f4fc7;
   --w6w-code-comment: #6b7280;
   --w6w-code-keyword: #8250df;
   --w6w-code-string: #0a7b34;
@@ -77,6 +85,12 @@
     --w6w-health-down: var(--w6w-danger);
     --w6w-health-unknown: #9aa3b2;
     --w6w-icon-swatch: #1f232c;
+    --w6w-loop-1: #5b9bff;
+    --w6w-loop-2: #a98bff;
+    --w6w-loop-3: #f0b13a;
+    --w6w-loop-4: #3cc6e0;
+    --w6w-loop-5: #e47ad6;
+    --w6w-loop-6: #8a8aff;
     --w6w-scheme: dark;
     --w6w-code-comment: #7d8797;
     --w6w-code-keyword: #d2a8ff;
@@ -105,6 +119,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #5f6875;
   --w6w-icon-swatch: #f0f2f6;
+  --w6w-loop-1: #2f6fdf;
+  --w6w-loop-2: #7c4ddb;
+  --w6w-loop-3: #b7791f;
+  --w6w-loop-4: #0e8fa8;
+  --w6w-loop-5: #b0399f;
+  --w6w-loop-6: #4f4fc7;
   --w6w-code-comment: #6b7280;
   --w6w-code-keyword: #8250df;
   --w6w-code-string: #0a7b34;
@@ -130,6 +150,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #9aa3b2;
   --w6w-icon-swatch: #1f232c;
+  --w6w-loop-1: #5b9bff;
+  --w6w-loop-2: #a98bff;
+  --w6w-loop-3: #f0b13a;
+  --w6w-loop-4: #3cc6e0;
+  --w6w-loop-5: #e47ad6;
+  --w6w-loop-6: #8a8aff;
   --w6w-code-comment: #7d8797;
   --w6w-code-keyword: #d2a8ff;
   --w6w-code-string: #7ee787;
@@ -405,6 +431,32 @@
   min-width: 0;
 }
 
+/* ── Hover modifier: ResultViewer — the button overlays the top-right corner of
+   ANY child and is revealed on hover/focus; always shown where there is no hover. */
+.w6w-copyable--hover {
+  position: relative;
+  align-items: flex-start;
+}
+
+.w6w-copyable--hover > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+  opacity: 0;
+}
+
+.w6w-copyable--hover:hover > .w6w-copyable-btn,
+.w6w-copyable--hover:focus-within > .w6w-copyable-btn {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .w6w-copyable--hover > .w6w-copyable-btn {
+    opacity: 1;
+  }
+}
 .w6w-code-block {
   background: var(--w6w-panel-2);
   border: 1px solid var(--w6w-border);
@@ -528,15 +580,17 @@
 /* The expanded form of a clipped value (`resolved-clip.ts`). A block with its
    own scroll, so "Show all" can never restore the unbounded inline paste that
    buried the other params and the run's result. */
+.w6w-resolved-copy {
+  margin: var(--w6w-sp-1) 0;
+}
+
 .w6w-resolved-text-full {
   display: block;
-  margin: var(--w6w-sp-1) 0;
+  margin: 0;
   max-height: 14em;
   overflow: auto;
-  padding: var(--w6w-sp-2);
-  background: var(--w6w-panel-2);
-  border: 1px solid var(--w6w-border);
-  border-radius: var(--w6w-radius);
+  padding: 0;
+  padding-right: var(--w6w-sp-10);
   font-family: var(--w6w-font-mono);
   font-size: 0.85em; /* lint-tokens-allow: matches the sibling code-typography rules above in this same file */
   line-height: var(--w6w-lh-normal);

package/src/styles/_canvas.scss

@@ -268,6 +268,41 @@
 .w6w-note-menu-item:hover {
   background: var(--w6w-panel-2);
 }
+// The canvas right-click menu (CanvasContextMenu): the note menu's panel and items,
+// placed at the pointer instead of under a toolbar button.
+.w6w-canvas-menu {
+  top: auto;
+  z-index: 10;
+  flex-direction: column;
+  min-width: 170px;
+  .w6w-note-menu-item {
+    font-weight: var(--w6w-fw-medium);
+  }
+  .w6w-note-menu-item:focus-visible {
+    outline: none;
+    background: var(--w6w-panel-2);
+  }
+  .w6w-note-menu-item.danger {
+    color: var(--w6w-danger);
+  }
+  .w6w-note-menu-item.separated {
+    position: relative;
+    margin-top: var(--w6w-sp-2);
+  }
+  .w6w-note-menu-item.separated::before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * var(--w6w-sp-1) - 0.5px);
+    right: 0;
+    left: 0;
+    border-top: 1px solid var(--w6w-border);
+  }
+  .w6w-note-menu-item[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: default;
+    background: transparent;
+  }
+}
 .w6w-note-size-1 {
   font-size: var(--w6w-fs-xl);
 }

package/src/styles/_code-editor.scss

@@ -0,0 +1,35 @@
+/* Every CodeMirror code view (`JsonEditor`, `CodeEditor`, `YamlEditor`) FILLS
+   its bordered box. The border is on `.cm-editor`, which react-codemirror
+   sizes with the `height` / `minHeight` / `maxHeight` props and whose
+   `.cm-scroller` it gives `height: 100%`. With only a min/max height (the Data
+   page's Document modal) that percentage has nothing definite to resolve
+   against, so the scroller — and the gutter column inside it — stopped at the
+   last content line, the horizontal scrollbar sat right under it, and the rest
+   of the box was empty.
+
+   The react-codemirror root (the wrapper's first child) is a one-cell grid.
+   A grid area is definite once its track is sized, so `.cm-editor`, stretched
+   into it, has a definite height whether that came from `height`, from
+   `minHeight` or from the content (capped by `maxHeight`), and the scroller and
+   the gutters fill it. `minmax(0, 1fr)` keeps a long line from widening the
+   editor: the scroller scrolls it instead. The wrapper is a flex column so a
+   wrapper given a definite height (a flex item with `min-height: 0`, as in
+   `_step-config.scss`) hands that height down to the editor.
+
+   Everything sits under `:where()` (specificity 0 for the wrapper part), so a
+   call site's own layout for the same elements — `_expression-modal.scss`'s
+   JSON pane, a host's dialog — still wins. */
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) {
+  display: flex;
+  flex-direction: column;
+}
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) > :first-child {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) .cm-scroller,
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) .cm-gutters {
+  min-height: 100%;
+}

package/src/styles/_code.scss

@@ -108,15 +108,16 @@
 /* The expanded form of a clipped value (`resolved-clip.ts`). A block with its
    own scroll, so "Show all" can never restore the unbounded inline paste that
    buried the other params and the run's result. */
+.w6w-resolved-copy {
+  margin: var(--w6w-sp-1) 0;
+}
 .w6w-resolved-text-full {
   display: block;
-  margin: var(--w6w-sp-1) 0;
+  margin: 0;
   max-height: 14em;
   overflow: auto;
-  padding: var(--w6w-sp-2);
-  background: var(--w6w-panel-2);
-  border: 1px solid var(--w6w-border);
-  border-radius: var(--w6w-radius);
+  padding: 0;
+  padding-right: var(--w6w-sp-10);
   font-family: var(--w6w-font-mono);
   font-size: 0.85em; /* lint-tokens-allow: matches the sibling code-typography rules above in this same file */
   line-height: var(--w6w-lh-normal);

package/src/styles/_connections.scss

@@ -86,3 +86,67 @@
 .w6w-connection-id-copy:focus-within .w6w-copyable-btn {
   opacity: 1;
 }
+
+/* Identify workflow connections and their consuming canvas nodes. */
+.w6w-connection-app-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-connection-node-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.w6w-connection-node-list .w6w-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  text-align: left;
+  width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.w6w-connection-node-label {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.w6w-workflow-connections-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+}
+.w6w-workflow-connections-heading h3 { margin: 0; font-size: inherit; }
+.w6w-workflow-connection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  padding-bottom: var(--w6w-sp-3);
+  border-bottom: 1px solid var(--w6w-border);
+}
+.w6w-connection-summary {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.w6w-connection-consumers summary { cursor: pointer; }
+.w6w-connection-consumers[open] summary { margin-bottom: var(--w6w-sp-2); }
+.w6w-connection-scope { display: flex; align-items: flex-start; gap: var(--w6w-sp-2); }
+.w6w-connection-remove { border-top: 1px solid var(--w6w-border); padding-top: var(--w6w-sp-3); }
+
+.w6w-connection-node-kind {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--w6w-accent);
+}

package/src/styles/_copyable.scss

@@ -145,3 +145,27 @@
   flex: 1 1 auto;
   min-width: 0;
 }
+
+/* ── Hover modifier: ResultViewer — the button overlays the top-right corner of
+   ANY child and is revealed on hover/focus; always shown where there is no hover. */
+.w6w-copyable--hover {
+  position: relative;
+  align-items: flex-start;
+}
+.w6w-copyable--hover > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+  opacity: 0;
+}
+.w6w-copyable--hover:hover > .w6w-copyable-btn,
+.w6w-copyable--hover:focus-within > .w6w-copyable-btn {
+  opacity: 1;
+}
+@media (hover: none) {
+  .w6w-copyable--hover > .w6w-copyable-btn {
+    opacity: 1;
+  }
+}

package/src/styles/_data-stores.scss

@@ -0,0 +1,138 @@
+/* Data stores (F-2): DataStoreList, ColumnsEditor, CsvPanel and the data-grid/entry rules ported from Studio's Data store detail page. */
+.w6w-data-store-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+.w6w-data-store-list-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--w6w-sp-4);
+}
+.w6w-data-store-list-heading {
+  min-width: 0;
+}
+.w6w-data-store-list-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+.w6w-data-columns-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.w6w-data-columns-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+}
+.w6w-data-columns-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-data-columns-required {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+.w6w-data-columns-error {
+  flex-basis: 100%;
+}
+.w6w-data-entries-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  margin: var(--w6w-sp-3) 0;
+}
+.w6w-data-entries-toolbar input[type="search"] {
+  flex: 1;
+  max-width: 20rem;
+  /* Same box as `.w6w-field` inputs — no host page styles a bare search input. */
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+}
+.w6w-data-entries-toolbar input[type="search"]:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+/* Entries open a viewer. Keep the list quiet and bounded, even for long keys or JSON. */
+.w6w-data-entry-list {
+  table-layout: fixed;
+}
+.w6w-data-entry-key,
+.w6w-data-entry-preview {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.w6w-data-entry-key {
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.w6w-data-entry-key:focus-visible {
+  outline: 2px solid var(--w6w-accent);
+  outline-offset: 2px;
+}
+.w6w-data-entry-delete {
+  margin-inline-end: auto;
+}
+/* The wide-table pane: the sheet scrolls INSIDE this box, so a 24-column
+   table never widens its container and the page itself never overflows. */
+.w6w-data-grid-scroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+.w6w-data-grid-scroll input {
+  min-width: var(--w6w-sp-16);
+}
+.w6w-data-cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+.w6w-data-cell-error {
+  color: var(--w6w-danger);
+  font-size: var(--w6w-fs-xs);
+}
+.w6w-data-row-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-data-entry-editor {
+  margin-top: var(--w6w-sp-4);
+}
+.w6w-data-entry-editor-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  margin-top: var(--w6w-sp-3);
+}
+.w6w-data-csv-panel {
+  margin-bottom: var(--w6w-sp-4);
+}
+.w6w-data-csv-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+}

package/src/styles/_data-vars.scss

@@ -1,12 +1,12 @@
 .w6w-datavar-row {
   display: grid;
-  grid-template-columns: 1fr 110px 1fr auto;
+  // A long expression must not widen its track and shift the other columns in that row.
+  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) auto;
   gap: var(--w6w-sp-1-5);
-  /* Align to the end so that on an `expression` row — where the value cell is a
-     taller ExpressionInput (toolbar above its editor) — the key/type/remove
-     cells line up with the editor at the bottom, not the toolbar. Single-line
-     rows are unaffected (every cell is the same height). */
-  align-items: end;
+  align-items: stretch;
+}
+.w6w-datavar-row > * {
+  min-width: 0;
 }
 .w6w-datavar-row input,
 .w6w-datavar-row select {
@@ -36,3 +36,14 @@
 .w6w-datavar-row .w6w-btn {
   padding: var(--w6w-sp-1-5) var(--w6w-sp-2-5);
 }
+.w6w-datavar-modes {
+  margin-left: auto;
+}
+.w6w-datavar-modes .active {
+  background: var(--w6w-panel-2);
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+}
+.w6w-datavar-error {
+  color: var(--w6w-danger);
+}

package/src/styles/_execution-history.scss

@@ -35,9 +35,30 @@
 }
 
 .w6w-execution-list-rows > li {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  min-width: 0;
+}
+
+/* The row stays the full-width click target; a Re-run control, when the host
+   offers one, sits beside it rather than inside it (a button cannot nest in
+   the row's own `<button>`). */
+.w6w-execution-list-rows > li > .w6w-list-item {
+  flex: 1 1 auto;
   min-width: 0;
 }
 
+.w6w-execution-list-rerun {
+  flex-shrink: 0;
+}
+
+/* The row's input snippet: inline in the subtitle, so the subtitle's own
+   one-line ellipsis cuts it — no box of its own, just the code face. */
+.w6w-execution-input-preview {
+  font-family: var(--w6w-font-mono);
+}
+
 /* Both non-list branches (the loading and the empty `<p>`) hang straight off
    the root, so one direct-child rule covers them and neither needs a class the
    pinned markup doesn't have. Same dashed box `.w6w-execution-log-empty`
@@ -193,6 +214,12 @@
   min-width: 0;
 }
 
+/* The Back control sits alone on its own line, flush left, so the detail
+   reads as a page the list was swapped for. */
+.w6w-execution-detail-back {
+  display: flex;
+}
+
 /* Title block left, controls right; the actions keep their width, the name
    wraps or ellipses into whatever is left. */
 .w6w-execution-detail-head {
@@ -230,6 +257,13 @@
   flex-shrink: 0;
 }
 
+/* Glyph + label on one baseline (`.w6w-btn` itself is not a flex box). */
+.w6w-execution-detail-rerun {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+
 .w6w-execution-detail-id-line {
   margin: 0;
 }
@@ -280,3 +314,42 @@
   color: var(--w6w-danger);
   font-size: var(--w6w-fs-sm);
 }
+
+/* "Re-run": marks an execution started by History's Re-run — on its list row
+   (after the title) and on its detail ("Re-run of <id>"). */
+.w6w-execution-rerun-tag {
+  display: inline-block;
+  margin-left: var(--w6w-sp-2);
+  padding: 0 var(--w6w-sp-1-5);
+  border: 1px solid var(--w6w-accent);
+  border-radius: var(--w6w-radius);
+  color: var(--w6w-accent);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-tight);
+  vertical-align: middle;
+}
+
+.w6w-execution-detail-rerun-of {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  margin: 0;
+}
+
+.w6w-execution-detail-rerun-of .w6w-execution-rerun-tag {
+  margin-left: 0;
+}
+
+.w6w-execution-detail-rerun-of code {
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-sm);
+}
+
+.w6w-execution-detail-rerun-of-link {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--w6w-accent);
+  cursor: pointer;
+  text-decoration: underline;
+}