@w6w/ui 0.2.0 → 0.2.54

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

package/src/styles/_expression-modal.scss

@@ -13,11 +13,86 @@
   padding: var(--w6w-sp-2-5);
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--w6w-sp-1);
+}
+/* The seed-mode "Insert as" toggle is a <fieldset> for its group semantics; drop the
+   browser's fieldset chrome so it lays out like the plain row it replaced. */
+.w6w-exprmodal-insert-as {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-inline-size: 0;
 }
+/* A rail section is an accordion item: its header always shows, its body animates open
+   (grid-template-rows 0fr -> 1fr) and only one section is open at a time. */
 .w6w-exprmodal-group {
   display: flex;
   flex-direction: column;
+}
+.w6w-exprmodal-group-head {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+.w6w-exprmodal-group-toggle {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-1);
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-0-5);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.w6w-exprmodal-group-toggle:focus-visible {
+  outline: 2px solid var(--w6w-accent);
+  outline-offset: 1px;
+}
+.w6w-exprmodal-group-toggle:hover .w6w-exprmodal-group-label,
+.w6w-exprmodal-group.is-open .w6w-exprmodal-group-label {
+  color: var(--w6w-text);
+}
+.w6w-exprmodal-group-caret {
+  color: var(--w6w-muted);
+  line-height: 1;
+  transition: transform 200ms ease;
+}
+.w6w-exprmodal-group.is-open .w6w-exprmodal-group-caret {
+  transform: rotate(90deg);
+}
+.w6w-exprmodal-group-body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease;
+}
+.w6w-exprmodal-group.is-open .w6w-exprmodal-group-body {
+  grid-template-rows: 1fr;
+}
+.w6w-exprmodal-group-inner {
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.w6w-exprmodal-group.is-open .w6w-exprmodal-group-inner {
+  padding-bottom: var(--w6w-sp-1-5);
+}
+@media (prefers-reduced-motion: reduce) {
+  .w6w-exprmodal-group-caret,
+  .w6w-exprmodal-group-body {
+    transition: none;
+  }
+}
+/* A labelled block inside a section (Previous steps' Loop). */
+.w6w-exprmodal-subgroup {
+  display: flex;
+  flex-direction: column;
   gap: 3px;
 }
 .w6w-exprmodal-group-label {
@@ -26,7 +101,6 @@
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--w6w-muted);
-  margin-bottom: var(--w6w-sp-0-5);
 }
 .w6w-exprmodal-source {
   display: flex;
@@ -49,6 +123,16 @@
 .w6w-exprmodal-source.w6w-expr-chip-var {
   color: var(--w6w-accent);
 }
+/* A step's output field: a plain tree row (just the field's own name), not a
+   chip, so a step with many fields reads as a list rather than a wall of boxes. */
+.w6w-exprmodal-source.w6w-exprmodal-field {
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-1-5);
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-xs);
+}
+.w6w-exprmodal-source.w6w-exprmodal-field:hover {
+  color: var(--w6w-accent);
+}
 .w6w-exprmodal-source.w6w-expr-chip-secret {
   color: var(--w6w-danger);
 }
@@ -135,20 +219,6 @@
 .w6w-exprmodal-caret-btn:hover {
   background: var(--w6w-panel);
 }
-/* The "N fields" toggle with the Metadata toggle stacked under it, so both
-   disclosures share one left edge on a step row. */
-.w6w-exprmodal-toggle-stack {
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 3px; /* lint-tokens-allow: 3px sits between no two steps of the spacing scale; tight stack of the fields and Metadata toggles */
-}
-/* A step with no fields: its Metadata toggle sits at the leaf indentation of
-   `.w6w-exprmodal-subsources` (margin 9px + 1px border + sp-2 padding). */
-.w6w-exprmodal-meta-row {
-  margin-left: calc(10px + var(--w6w-sp-2)); /* lint-tokens-allow: 9px margin + 1px border of .w6w-exprmodal-subsources */
-}
 /* Same 20px-high chrome as `.w6w-exprmodal-render-btn` above — the sizing
    precedent for a dense rail control — but a separate class: this toggles
    the `.w6w-exprmodal-subsources` block below it, the render-btn inserts a
@@ -290,3 +360,23 @@
   align-items: center;
   gap: var(--w6w-sp-2);
 }
+
+/* The JSON compose pane (json-binding mode) fills the editor pane like the chips editor does,
+   instead of sitting at its content height over empty space. */
+.w6w-exprmodal-json {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 180px;
+}
+.w6w-exprmodal-json > .w6w-json-editor {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+/* CodeMirror's own root (the react-codemirror wrapper) — its `.cm-editor` is `height: 100%`. */
+.w6w-exprmodal-json > .w6w-json-editor > :first-child {
+  flex: 1 1 auto;
+  min-height: 0;
+}

package/src/styles/_fields.scss

@@ -159,3 +159,14 @@ select optgroup {
 .w6w-array-add {
   margin-top: var(--w6w-sp-0-5);
 }
+
+/* Combobox (`components/Combobox.tsx`): its <input> sits inside the component's
+   own positioned root, so it is not a direct flex child of `.w6w-field` and would
+   keep its intrinsic width. The root and the input fill the field instead. */
+.w6w-combobox {
+  width: 100%;
+}
+.w6w-combobox > input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+}

package/src/styles/_flow.scss

@@ -99,6 +99,17 @@
   white-space: nowrap;
 }
 
+/* A trigger node's card (ControlNodeCard, `isTrigger`) — a half-pill: fully
+   rounded entry (left) edge, the ordinary 4px corner on the exit (right) edge,
+   so a run's start reads apart from the steps it feeds. No radius token
+   exists beyond --w6w-radius (10px), hence the literals. Wider left inset
+   clears the curve. */
+.w6w-flow .w6w-node-trigger {
+  border-radius: 999px 4px 4px 999px;
+  /* lint-tokens-allow: 14px right inset matches the non-trigger card's inline padding */
+  padding: var(--w6w-sp-1-5) 14px var(--w6w-sp-1-5) var(--w6w-sp-4);
+}
+
 /* The ordinary (success) ports — bumped from the library's own 6px default
    (2026-08-30: "ports must have consistent size") to match the error port
    below exactly. `:not(.w6w-handle-multi)`: the multi-input handle is its
@@ -196,6 +207,42 @@
   background: var(--w6w-danger);
   color: white;
 }
+/* A toggle (pause / disable) shows its on state; the divider splits the run controls
+   (run, pause, disable) from the edit controls (edit, copy, delete). */
+.w6w-node-toolbar-btn[aria-pressed="true"] {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-accent);
+}
+.w6w-node-toolbar-divider {
+  align-self: stretch;
+  width: 1px;
+  margin: 2px var(--w6w-sp-0-5);
+  background: var(--w6w-border);
+}
+
+/* Persistent node flags under the card: ⏸ paused (test runs stop before it), ⃠ disabled
+   (skipped in every run). The glyph and the text carry the state, not colour. */
+.w6w-flow .w6w-node-flag {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin-top: var(--w6w-sp-0-5);
+  margin-right: var(--w6w-sp-1);
+  padding: 0 var(--w6w-sp-1);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius-sm, 3px);
+  font-size: var(--w6w-fs-xs);
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+}
+.w6w-flow .w6w-node-flag-paused {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+}
+/* The card's opacity is inline (it is also the run-status visual), so only the grey is here. */
+.w6w-flow .w6w-node-disabled > [data-run-status] {
+  filter: grayscale(1);
+}
 
 .w6w-params-optional > summary {
   cursor: pointer;
@@ -215,3 +262,127 @@
   font-size: var(--w6w-fs-xs);
   color: var(--w6w-muted, inherit);
 }
+
+/* For each loops (T2.3.1). The Each item edge — a loop-body link, never
+   serialized — reads as a solid line in its loop's colour (`--w6w-loop-color`,
+   set per edge by `paintLoopEdges`), distinct from the error dash. */
+.w6w-flow .react-flow__edge.w6w-edge-each .react-flow__edge-path {
+  stroke: var(--w6w-loop-color, var(--w6w-accent));
+}
+.w6w-flow .react-flow__edge.w6w-edge-each .react-flow__edge-text {
+  fill: var(--w6w-accent);
+}
+.w6w-flow .react-flow__edge.w6w-edge-each .react-flow__edge-textbg {
+  fill: var(--w6w-panel);
+}
+
+/* The Each item handle: in its loop's colour, on the right beside the Done handle. */
+.w6w-flow .react-flow__handle.w6w-handle-each {
+  background: var(--w6w-loop-color, var(--w6w-accent));
+  border-color: var(--w6w-loop-color, var(--w6w-accent));
+}
+.w6w-flow .w6w-node-foreach .react-flow__handle-right {
+  top: 72%;
+}
+.w6w-flow .w6w-node-foreach .react-flow__handle-right.w6w-handle-each {
+  top: 28%;
+}
+.w6w-flow .w6w-foreach-ports {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-self: stretch;
+  text-align: right;
+  color: var(--w6w-muted);
+}
+
+/* A loop-body step looks like any other step; one dot per enclosing For each, just
+   above its top-right corner (named on hover), is all that marks it. */
+.w6w-flow .w6w-loop-dots {
+  position: absolute;
+  top: -11px; /* lint-tokens-allow: dot sits just above the card edge */
+  right: var(--w6w-sp-1);
+  display: flex;
+  gap: var(--w6w-sp-0-5);
+}
+.w6w-flow .w6w-loop-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1.5px var(--w6w-panel);
+  cursor: help;
+}
+.w6w-flow .w6w-loop-legacy-note {
+  max-width: 220px;
+  margin-top: var(--w6w-sp-1);
+  color: var(--w6w-muted);
+}
+
+/* The connect-time loop refusal, anchored to its source node. */
+.w6w-flow .w6w-loop-notice {
+  max-width: 260px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-danger);
+  border-radius: 8px;
+  color: var(--w6w-danger);
+}
+
+// Router ports sit on the card's own edges (routerPortLayout, flow-types.ts):
+// condition routes on the right, the fallback on the bottom. The right-edge labels
+// are one grid row per port spanning the card's padding box (the negative margin
+// cancels the card's 6px vertical padding), so each row centres on its handle.
+.w6w-flow .w6w-router-ports {
+  align-self: stretch;
+  display: grid;
+  align-items: center;
+  margin: -6px 0;
+  max-width: 120px;
+  text-align: right;
+  color: var(--w6w-muted);
+  pointer-events: none;
+}
+.w6w-flow .w6w-router-ports > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+// The fallback label sits just under the card, right of its bottom handle, so an
+// edge leaving that handle downward never crosses it.
+.w6w-flow .w6w-router-fallback-label {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: calc(50% + 8px);
+  white-space: nowrap;
+  pointer-events: none;
+  color: var(--w6w-muted);
+}
+
+/* "Write to state" (step settings): the `validateStateConfig` messages for the current config. */
+.w6w-state-write-issues {
+  color: var(--w6w-danger);
+}
+
+/* "Write to state" mapping rows (Pick fields, Append): the shared `.w6w-datavar-row`
+   input style, laid out as output path → state key → remove. The header row uses the
+   same columns so each label sits over its input. Doubled on the row so it beats
+   `.w6w-datavar-row`'s own columns whatever the partial order. */
+.w6w-state-map-row,
+.w6w-datavar-row.w6w-state-map-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1fr) 2rem;
+  gap: var(--w6w-sp-1-5);
+  align-items: center;
+}
+.w6w-state-map-head {
+  color: var(--w6w-muted);
+  font-size: 12px;
+}
+.w6w-state-map-arrow {
+  color: var(--w6w-muted);
+  text-align: center;
+}
+.w6w-state-map-add {
+  align-self: flex-start;
+}

package/src/styles/_fx.scss

@@ -24,7 +24,9 @@
 .w6w-fx-wrap > select,
 .w6w-fx-wrap > textarea,
 .w6w-fx-wrap > .w6w-multiselect,
-.w6w-fx-wrap > .w6w-expr {
+.w6w-fx-wrap > .w6w-expr,
+.w6w-fx-wrap > .w6w-combobox,
+.w6w-fx-wrap > .w6w-fx-grow {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -156,3 +158,26 @@
 .w6w-expr-fx.is-active {
   color: var(--w6w-accent);
 }
+
+/* The json param's ƒx rides INSIDE the editor box, top-right, as the editor's
+   `overlay` (same mechanism as the `copyable` button in `_step-config.scss`).
+   Opaque backdrop because it sits on line 1; the text keeps right padding so
+   it is never covered; with `copyable` on it steps left of the copy button. */
+.w6w-json-editor > .w6w-expr-fx {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  z-index: 1;
+  border: none;
+  background: var(--w6w-panel);
+  border-radius: 6px;
+}
+.w6w-json-editor:has(> .w6w-expr-fx) .cm-content {
+  padding-right: var(--w6w-sp-10);
+}
+.w6w-json-editor:has(> .w6w-copyable-btn) > .w6w-expr-fx {
+  right: calc(var(--w6w-sp-1) * 2 + var(--w6w-sp-8));
+}
+.w6w-json-editor:has(> .w6w-copyable-btn):has(> .w6w-expr-fx) .cm-content {
+  padding-right: var(--w6w-sp-20);
+}

package/src/styles/_incoming-state.scss

@@ -34,6 +34,10 @@
   flex-wrap: wrap;
   gap: var(--w6w-sp-1-5);
 }
+/* A whole-value JSON field's "Use the output of <step>" row (ParamsForm). */
+.w6w-json-quickbind {
+  align-items: center;
+}
 .w6w-seed-chip {
   cursor: pointer;
 }
@@ -44,3 +48,32 @@
   cursor: default;
   opacity: 0.6;
 }
+/* Run script (ParamsForm `ScriptCodeField`, WorkflowFlowEditor `ScriptBindingsNotice`): the
+   insert row under the code, the collapsed "How to read data", and the quiet conversion note. */
+.w6w-script-insert {
+  align-items: center;
+}
+.w6w-script-help > summary {
+  cursor: pointer;
+  width: fit-content;
+}
+.w6w-script-help-examples {
+  margin: var(--w6w-sp-1-5) 0;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2);
+  border-radius: 6px;
+  background: var(--w6w-bg);
+  font-size: 0.85em;
+  overflow-x: auto;
+}
+.w6w-script-converted {
+  display: block;
+}
+.w6w-script-converted-undo {
+  border: 0;
+  padding: 0;
+  background: none;
+  font: inherit;
+  color: var(--w6w-accent);
+  cursor: pointer;
+  text-decoration: underline;
+}