@w6w/ui 0.2.11 → 0.2.54

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/_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;
+}

package/src/styles/_execution-log.scss

@@ -128,8 +128,40 @@
   flex-wrap: wrap;
 }
 
-.w6w-execution-log-row-label {
+/* Label over "App · Action": takes the row's free width, so the timing stays right-aligned. */
+.w6w-execution-log-row-title {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--w6w-sp-0-5);
+}
+
+.w6w-execution-log-row-uses {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* "Trigger" / "Node": a small outlined tag before the label; a trigger takes the accent. */
+.w6w-execution-log-kind {
+  flex: 0 0 auto;
+  padding: 0 var(--w6w-sp-1-5);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-tight);
+}
+
+.w6w-execution-log-kind-trigger {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+}
+
+.w6w-execution-log-row-label {
   min-width: 0;
   font-weight: var(--w6w-fw-medium);
   overflow: hidden;
@@ -141,6 +173,26 @@
    "<ts> → <ts> (elapsed)" text inside the row's box. With `flex-shrink: 0` it
    kept its max-content width, wrapped onto its own flex line, and ran past the
    row's border. */
+.w6w-execution-log-skip-reason {
+  flex: 0 0 auto;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+
+/* Steps on other paths (not part of this run): one muted, collapsed line after the list. */
+.w6w-execution-log-off-path {
+  margin-top: var(--w6w-sp-2);
+
+  summary {
+    cursor: pointer;
+  }
+
+  ul {
+    margin: var(--w6w-sp-1) 0 0;
+    padding-left: var(--w6w-sp-4);
+  }
+}
+
 .w6w-execution-log-timing {
   flex: 0 1 auto;
   min-width: 0;
@@ -150,6 +202,14 @@
 
 .w6w-execution-log-json {
   min-width: 0;
+
+  > summary {
+    cursor: pointer;
+  }
+
+  > .w6w-result-viewer {
+    margin-top: var(--w6w-sp-2);
+  }
 }
 
 /* Error blocks (step `error`, run `runError`/`stepErrors`). The box itself is
@@ -176,3 +236,87 @@
   display: block;
   margin-bottom: var(--w6w-sp-1);
 }
+
+/* --- For each iterations (T1.5.1) ----------------------------------------
+   Chips carry the status as TEXT as well as colour; failed/running also differ
+   in border style, so colour is never the only signal. */
+.w6w-execution-log-foreach {
+  margin-top: var(--w6w-sp-2);
+  padding-left: var(--w6w-sp-3);
+  border-left: 2px solid var(--w6w-border);
+}
+.w6w-execution-log-iteration-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1);
+}
+.w6w-execution-log-iteration-chip {
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  font-size: var(--w6w-fs-xs);
+  white-space: nowrap;
+}
+.w6w-execution-log-iteration-chip-succeeded {
+  border-color: var(--w6w-success);
+}
+.w6w-execution-log-iteration-chip-failed {
+  border-color: var(--w6w-danger);
+  border-width: 2px;
+}
+.w6w-execution-log-iteration-chip-running {
+  border-color: var(--w6w-accent);
+  border-style: dashed;
+}
+.w6w-execution-log-subrows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.w6w-execution-log-subrow-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+}
+/* An If / Stop / Router row's resolved comparisons. Operands are arbitrary
+   resolved values (long URLs), so they wrap rather than widen the panel. */
+.w6w-execution-log-conditions {
+  font-size: var(--w6w-fs-xs);
+  table-layout: auto;
+}
+.w6w-execution-log-conditions code {
+  word-break: break-all;
+}
+.w6w-execution-log-condition-true {
+  color: var(--w6w-success);
+}
+.w6w-execution-log-condition-false {
+  color: var(--w6w-danger);
+}
+
+/* A step's State block: its state writes in recorded order (`state.<path>: old → new`),
+   warnings marked, then the run's state after this step. Values are arbitrary JSON,
+   so rows wrap rather than widen the panel. */
+.w6w-execution-log-state {
+  min-width: 0;
+}
+.w6w-execution-log-state-writes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--w6w-font-mono);
+  word-break: break-all;
+}
+.w6w-execution-log-state-warning {
+  padding-left: var(--w6w-sp-1-5);
+  border-left: 2px solid var(--w6w-danger);
+  color: var(--w6w-danger);
+  font-family: inherit;
+}