@w6w/ui 0.2.0 → 0.2.54

package/src/styles.css

@@ -699,7 +699,9 @@ svg.react-flow__connectionline {
  * 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;
@@ -715,6 +717,12 @@ svg.react-flow__connectionline {
   --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;
@@ -744,6 +752,12 @@ svg.react-flow__connectionline {
     --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;
@@ -772,6 +786,12 @@ svg.react-flow__connectionline {
   --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;
@@ -797,6 +817,12 @@ svg.react-flow__connectionline {
   --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;
@@ -914,6 +940,15 @@ svg.react-flow__connectionline {
  * uncoordinated ones exist across the four repos today).
  */
 /* Layout helpers */
+/* A vertical column whose direct children are cards/panels. ONE gap, from the
+   shared spacing scale — never a per-screen number and never a second gap: do
+   not add this class to a container whose parent already gaps its children. */
+.w6w-card-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-4);
+}
+
 .w6w-stack {
   display: flex;
   flex-direction: column;
@@ -1100,6 +1135,18 @@ select optgroup {
   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;
+}
+
 /* Material-style multi-select: chips live INSIDE a single input-like box,
    followed by the dropdown which reads as the trailing placeholder. */
 .w6w-multiselect {
@@ -1177,6 +1224,49 @@ select optgroup {
   color: var(--w6w-text);
 }
 
+.w6w-fx-wrap:has(> .w6w-multiselect-checks) {
+  align-items: flex-start;
+}
+
+.w6w-multiselect-checks {
+  padding: var(--w6w-sp-1) 0;
+}
+
+.w6w-multiselect-checks-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+  margin-bottom: var(--w6w-sp-2);
+}
+
+.w6w-multiselect-checks-options {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
+  gap: var(--w6w-sp-2) var(--w6w-sp-4);
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.w6w-field .w6w-multiselect-check {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  margin: 0;
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+
+.w6w-field .w6w-multiselect-check input[type=checkbox] {
+  width: auto;
+  margin: 0;
+  flex-shrink: 0;
+  accent-color: var(--w6w-accent);
+}
+
 /* Incoming state (WorkflowFlowEditor · `IncomingStateField`, mounted by BOTH the
    step editor's Test tab and the canvas ▶ Run collect form). The raw JSON box is
    an OVERRIDE, so it sits behind a disclosure instead of being the first thing
@@ -1218,6 +1308,11 @@ select optgroup {
   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;
 }
@@ -1231,6 +1326,40 @@ select optgroup {
   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;
+}
+
 /* Expression input: a field whose contents are inline SEGMENTS — plain text
    plus var/secret/expr chips, edited in place (contentEditable, like a Notion /
    Zapier block field). A small toolbar carries the Insert menu + the {{ }} (fx)
@@ -1321,12 +1450,99 @@ select optgroup {
   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;
 }
 
@@ -1336,7 +1552,6 @@ select optgroup {
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--w6w-muted);
-  margin-bottom: var(--w6w-sp-0-5);
 }
 
 .w6w-exprmodal-source {
@@ -1363,6 +1578,18 @@ select optgroup {
   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);
 }
@@ -1460,22 +1687,6 @@ select optgroup {
   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
@@ -1633,6 +1844,28 @@ select optgroup {
   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;
+}
+
 /* fx toggle — an end decoration INSIDE the field, not a button beside it. The
    WRAPPER owns the input chrome (background/border/radius/min-height and the
    focus ring) and every widget it holds is flattened below, so the value and its
@@ -1662,7 +1895,9 @@ select optgroup {
 .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;
 }
@@ -1804,6 +2039,32 @@ select optgroup {
   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);
+}
+
 /* Copyable — an in-box copy affordance decorating a value-displaying control
    (an <input>, a <textarea>, or CodeBlock's <pre>). Mirrors `.w6w-fx-wrap`
    (`_fx.scss:1-88`): the WRAPPER owns the box chrome and every child it holds
@@ -1963,6 +2224,32 @@ select optgroup {
   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;
+  }
+}
 /* The raw {{ }} input stands alone, so it keeps an input box of its own. */
 .w6w-expr-raw {
   width: 100%;
@@ -2273,13 +2560,13 @@ select optgroup {
 /* Typed key/value rows (the `vars` form element / `data` control step). */
 .w6w-datavar-row {
   display: grid;
-  grid-template-columns: 1fr 110px 1fr auto;
+  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,
@@ -2314,6 +2601,20 @@ select optgroup {
   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);
+}
+
 /* Buttons */
 .w6w-btn {
   background: var(--w6w-accent);
@@ -2628,6 +2929,18 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   flex-shrink: 0;
 }
 
+.w6w-json-customized {
+  align-self: center;
+  border: 1px solid var(--w6w-accent);
+  border-radius: var(--w6w-radius-sm, 3px);
+  padding: 3px 7px;
+  background: color-mix(in srgb, var(--w6w-accent) 8%, transparent);
+  color: var(--w6w-accent);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
 .w6w-icon-btn {
   display: inline-flex;
   align-items: center;
@@ -2737,6 +3050,39 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
 }
 
 /* Step builder (sidebar + content) */
+.w6w-stepbuilder-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  height: min(70vh, 560px);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.w6w-stepbuilder-picker > .w6w-stepbuilder-search {
+  flex-shrink: 0;
+}
+
+.w6w-stepbuilder-picker > .w6w-stepbuilder {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.w6w-stepbuilder-picker .w6w-stepbuilder-sidebar {
+  overflow-y: auto;
+}
+
+.w6w-stepbuilder-picker .w6w-stepbuilder-content {
+  height: auto;
+}
+
+.w6w-stepbuilder-picker .w6w-apppicker-host {
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+}
+
 .w6w-stepbuilder {
   display: flex;
   gap: var(--w6w-sp-4);
@@ -3081,17 +3427,39 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   color: var(--w6w-muted-text, var(--w6w-text));
 }
 
-/* A Function/Workflow row, distinct from an app row at a glance: an app is
-   somebody else's service, a Function/Workflow is something YOU built here.
-   Applied by `CallableRow`, which both the home tab and the Workflows/
-   Functions tabs render — so the tint and the glyph travel together and a
-   Function looks the same wherever it is offered. */
-.w6w-stepbuilder-item--callable {
-  background: var(--w6w-panel);
-  border-style: dashed;
+/* Triggers tab: the "Search all apps" row under the two columns, outside the
+   grid so the columns keep the host's remaining height. */
+.w6w-readytouse-footer {
+  flex: 0 0 auto;
+  padding-top: var(--w6w-sp-3);
 }
 
-/* Step config (app action / control node): a fixed header (connection + action)
+.w6w-readytouse-empty {
+  margin: 0;
+}
+
+/* A button that reads as an inline link — the empty state's "Search all apps". */
+.w6w-linkbtn {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: var(--w6w-accent);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* A Function/Workflow row, distinct from an app row at a glance: an app is
+   somebody else's service, a Function/Workflow is something YOU built here.
+   Applied by `CallableRow`, which both the home tab and the Workflows/
+   Functions tabs render — so the tint and the glyph travel together and a
+   Function looks the same wherever it is offered. */
+.w6w-stepbuilder-item--callable {
+  background: var(--w6w-panel);
+  border-style: dashed;
+}
+
+/* Step config (app action / control node): a fixed header (connection + action)
    that never scrolls, a scrolling parameters body, and a pinned footer — mirrors
    the fixed-header/scroll-body split used by `.w6w-stepbuilder-apps`. */
 .w6w-stepconfig {
@@ -3105,6 +3473,13 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   padding-inline: var(--w6w-sp-1);
 }
 
+/* The add flow's title: the node kind's label, then its editable name. */
+.w6w-stepbuilder-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+
 /* Inline step rename (pencil) shown next to the modal title. */
 .w6w-step-rename {
   display: inline-flex;
@@ -3123,6 +3498,145 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   font-family: inherit;
 }
 
+.w6w-router-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-router-editor > p {
+  margin: 0;
+}
+
+.w6w-router-routes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-router-route {
+  min-width: 0;
+}
+
+.w6w-router-route.is-dragging {
+  opacity: 0.45;
+}
+
+.w6w-router-route.is-drop-target {
+  box-shadow: 0 -2px var(--w6w-accent);
+}
+
+.w6w-router-route-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  margin-bottom: var(--w6w-sp-1);
+}
+
+.w6w-router-route-heading > :last-child {
+  margin-left: auto;
+}
+
+.w6w-router-grip {
+  cursor: grab;
+}
+
+.w6w-router-grip:active {
+  cursor: grabbing;
+}
+
+.w6w-router-route-name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  border: 0;
+  background: transparent;
+  padding: var(--w6w-sp-1) 0;
+  font: inherit;
+  font-size: var(--w6w-fs-xs);
+  color: var(--w6w-muted);
+  cursor: pointer;
+}
+
+.w6w-router-route-name:hover {
+  color: var(--w6w-text);
+}
+
+.w6w-router-route-name:disabled {
+  cursor: default;
+}
+
+.w6w-router-add {
+  align-self: flex-start;
+}
+
+.w6w-condition-editor {
+  position: relative;
+  padding-right: var(--w6w-sp-8);
+}
+
+.w6w-condition-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto) minmax(0, 1fr);
+  gap: var(--w6w-sp-2);
+  align-items: stretch;
+}
+
+.w6w-condition-row > * {
+  min-width: 0;
+}
+
+.w6w-condition-row-removable {
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto) minmax(0, 1fr) auto;
+}
+
+.w6w-condition-row-boolean {
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto);
+}
+
+.w6w-condition-row-boolean.w6w-condition-row-removable {
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto) auto;
+}
+
+.w6w-condition-negate {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  font-size: var(--w6w-fs-xs);
+}
+
+.w6w-condition-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-condition-combinator,
+.w6w-condition-add {
+  align-self: flex-start;
+}
+
+.w6w-condition-remove {
+  align-self: center;
+}
+
+.w6w-condition-comparison {
+  min-height: var(--w6w-sp-10);
+  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  color: var(--w6w-text);
+  font: inherit;
+  font-size: var(--w6w-fs-xs);
+}
+
+.w6w-condition-mode {
+  position: absolute;
+  right: 0;
+  top: var(--w6w-sp-2);
+}
+
 .w6w-stepconfig-header {
   display: flex;
   flex-direction: column;
@@ -3444,6 +3958,17 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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
@@ -3547,6 +4072,46 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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;
 }
@@ -3565,6 +4130,136 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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);
+}
+
+.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;
+}
+
+.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;
+}
+
 .w6w-section {
   border: 1px solid var(--w6w-border);
   border-radius: 8px;
@@ -3606,22 +4301,60 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   gap: var(--w6w-sp-2-5);
 }
 
-/* A labeled test-run output block (Result vs Console). */
-.w6w-testout {
+/* Webhook "Listen for test event": the waiting row, its pulse, and the folded manual payload. */
+.w6w-listen-waiting {
   display: flex;
-  flex-direction: column;
-  gap: var(--w6w-sp-1);
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  min-width: 0;
 }
-
-.w6w-testout-label {
-  font-size: 0.72em;
-  font-weight: var(--w6w-fw-semibold);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--w6w-muted);
+.w6w-listen-waiting code {
+  word-break: break-all;
 }
 
-/* Console output reads as a terminal — monospace + muted, distinct from Result. */
+.w6w-listen-pulse {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--w6w-accent);
+  animation: w6w-listen-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes w6w-listen-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .w6w-listen-pulse {
+    animation: none;
+  }
+}
+.w6w-listen-manual > summary {
+  cursor: pointer;
+  margin-bottom: var(--w6w-sp-2);
+}
+
+/* A labeled test-run output block (Result vs Console). */
+.w6w-testout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-testout-label {
+  font-size: 0.72em;
+  font-weight: var(--w6w-fw-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--w6w-muted);
+}
+
+/* Console output reads as a terminal — monospace + muted, distinct from Result. */
 .w6w-testout-console {
   font-family: var(--w6w-font-mono);
   color: var(--w6w-muted);
@@ -3648,7 +4381,7 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
 
 /* Host-embedded ActionTestForm (studio's ConnectionTesterModal wraps it in its
    OWN full modal). The widget then fills that modal as a full-height flex column:
-   the params + saved-tests region scrolls, and the action bar is a bottom-pinned,
+   the params / result / saved-tests cards scroll, and the action bar is a bottom-pinned,
    non-scrolling footer. These classes are only applied in `embedded` mode, so the
    inline / own-pop-out layout is untouched. */
 .w6w-tester-embedded-root {
@@ -3669,22 +4402,6 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   overflow: auto;
 }
 
-.w6w-tester-embedded-cols {
-  display: flex;
-  gap: var(--w6w-sp-4);
-  align-items: flex-start;
-}
-
-.w6w-tester-embedded-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.w6w-tester-embedded-rail {
-  width: 260px;
-  flex-shrink: 0;
-}
-
 /* The action bar as a pinned footer: kept out of the scroll region and separated
    with a top border so Run / Save / Delete stay visible however long the params. */
 .w6w-tester-actions-footer {
@@ -3728,6 +4445,68 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
    baseline bar, `degraded` taller, `down` the full cell, and `unknown` a hatched
    outline with no solid fill (nothing was measured: not a good day, not a bad
    one). Each cell also carries a `title` with its day and state. */
+/* ── ResultViewer (T0.1.1) — one result value, shown by format: a collapsible
+   JSON tree, xml/html/markdown source, or vendor html in a sandboxed iframe.
+   The viewer owns its OWN internal spacing only; the host pane spaces it. */
+.w6w-result-viewer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  min-width: 0;
+}
+
+/* The toolbar — Expand all / Collapse all for a tree, Rendered / Source for
+   html and markdown. End-aligned so it sits under the copy button's corner. */
+.w6w-result-viewer-bar {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--w6w-sp-1);
+}
+
+/* The viewport: the one element that scrolls, capped by the inline `maxHeight`.
+   Mono + 0.85em are `.w6w-result`'s type (above), because both present the same
+   thing to the reader. */
+.w6w-result-viewer-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: var(--w6w-font-mono);
+  /* lint-tokens-allow: mirrors `.w6w-result`'s result type size above; the value is pinned by T0.1.1 */
+  font-size: 0.85em;
+}
+
+/* A plain-text result wraps instead of scrolling sideways: prose has no
+   meaningful line structure to preserve (a code block does — it keeps `wrap`
+   off by default for that reason). */
+.w6w-result-viewer-text {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* One indent step per nesting level, and no list markers: the `<summary>`
+   triangle already says "this node opens". */
+.w6w-json-children {
+  padding-left: var(--w6w-sp-4);
+}
+
+/* Keys and counts recede; values stay the reading colour. */
+.w6w-json-key,
+.w6w-json-count {
+  color: var(--w6w-muted);
+}
+
+/* The sandboxed frame: fills the body's width and gives the preview a fixed
+   viewport (it cannot size itself to its own content from outside). `display:
+   block` is load-bearing — an inline iframe sits on a text baseline, so the
+   3 px descender made the 320 px body scroll 3 px and drew a stray scrollbar. */
+.w6w-html-preview {
+  display: block;
+  width: 100%;
+  height: 320px;
+  border: none;
+  background: var(--w6w-panel);
+}
+
 .w6w-uptime-strip {
   display: grid;
   grid-auto-flow: column;
@@ -4076,15 +4855,17 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
 /* 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);
@@ -4108,6 +4889,44 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   text-decoration: underline;
 }
 
+/* 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%;
+}
+
 .w6w-icon-button {
   display: inline-flex;
   align-items: center;
@@ -4411,8 +5230,40 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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;
@@ -4424,6 +5275,24 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
    "<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);
+}
+.w6w-execution-log-off-path summary {
+  cursor: pointer;
+}
+.w6w-execution-log-off-path 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;
@@ -4434,6 +5303,12 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
 .w6w-execution-log-json {
   min-width: 0;
 }
+.w6w-execution-log-json > summary {
+  cursor: pointer;
+}
+.w6w-execution-log-json > .w6w-result-viewer {
+  margin-top: var(--w6w-sp-2);
+}
 
 /* Error blocks (step `error`, run `runError`/`stepErrors`). The box itself is
    `.w6w-result.w6w-error` (`_tester.scss`) — TriggerFillForm's StepError
@@ -4460,6 +5335,103 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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;
+}
+
 /* --- ExecutionList ------------------------------------------------------- */
 /* Rows of past executions: a click-to-select list plus a prev/next pager.
    Closer in shape to `.w6w-execution-log` (`_execution-log.scss`) than to
@@ -4496,9 +5468,30 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
 }
 
 .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`
@@ -4651,6 +5644,12 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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 {
@@ -4688,6 +5687,13 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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;
 }
@@ -4739,29 +5745,68 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   font-size: var(--w6w-fs-sm);
 }
 
-/*
- * Server resources — the four presentational variants from
- * `src/components/ServerResources.tsx` (card, small card, rail, badge).
- *
- * Spacing and type come from the `--w6w-sp-*` / `--w6w-fs-*` ramps only, so a
- * host that re-tunes the scale re-tunes these too; box geometry (heights,
- * track widths, radii) is deliberately literal, as everywhere else in this
- * package. The only colour that is not a themed token reference is the
- * sparkline stroke, which is `--w6w-accent` in both modes.
- *
- * The rail variant is the size-sensitive one: it lands in a ~200 px sidebar
- * column, so every part of it is `min-width: 0`-safe and the sparkline is
- * scaled by `preserveAspectRatio="none"` rather than given an intrinsic width.
- */
-.w6w-server-resources {
-  display: flex;
-  flex-direction: column;
-  gap: var(--w6w-sp-2);
-  min-width: 0;
-  color: var(--w6w-text);
-  font-size: var(--w6w-fs-sm);
-  line-height: var(--w6w-lh-normal);
-}
+/* "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;
+}
+
+/*
+ * Server resources — the four presentational variants from
+ * `src/components/ServerResources.tsx` (card, small card, rail, badge).
+ *
+ * Spacing and type come from the `--w6w-sp-*` / `--w6w-fs-*` ramps only, so a
+ * host that re-tunes the scale re-tunes these too; box geometry (heights,
+ * track widths, radii) is deliberately literal, as everywhere else in this
+ * package. The only colour that is not a themed token reference is the
+ * sparkline stroke, which is `--w6w-accent` in both modes.
+ *
+ * The rail variant is the size-sensitive one: it lands in a ~200 px sidebar
+ * column, so every part of it is `min-width: 0`-safe and the sparkline is
+ * scaled by `preserveAspectRatio="none"` rather than given an intrinsic width.
+ */
+.w6w-server-resources {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  min-width: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  line-height: var(--w6w-lh-normal);
+}
 
 .w6w-server-resources__title {
   margin: 0;
@@ -5341,16 +6386,23 @@ button.w6w-rel-open:focus-visible strong {
 .w6w-callable-list-body {
   border: 1px solid var(--w6w-border);
   border-radius: 8px;
-  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  overflow: hidden;
 }
 
-.w6w-callable-list-rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.w6w-callable-list-main {
   display: flex;
   flex-direction: column;
-  gap: var(--w6w-sp-1);
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+  text-align: left;
+}
+
+.w6w-callable-list-open {
+  all: unset;
+  cursor: pointer;
+  display: block;
+  width: 100%;
 }
 
 .w6w-callable-list-trail {
@@ -5367,6 +6419,75 @@ button.w6w-rel-open:focus-visible strong {
   font-size: var(--w6w-fs-xs);
 }
 
+.w6w-callable-list-row-desc {
+  display: block;
+}
+
+/* The frame is the ONLY element of a DataTable that draws an outer border and a
+   radius (T-3). `overflow: hidden` clips the cells at the rounded corners, so
+   the table below never needs an outer edge of its own. */
+.w6w-data-table-frame {
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+  overflow: hidden;
+}
+
+/* No outer border here (T-3): the frame above already draws it. */
+.w6w-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--w6w-text);
+}
+
+/* Inner separators only (T-3): a right border on every cell but the last column
+   and a bottom border on every row but the last. First column, first row, last
+   column and last row therefore paint nothing on the outside — one border per
+   outer edge, from the frame. */
+.w6w-data-table th,
+.w6w-data-table td {
+  border-right: 1px solid var(--w6w-border);
+  border-bottom: 1px solid var(--w6w-border);
+  padding: var(--w6w-sp-2) var(--w6w-sp-3);
+  text-align: left;
+  vertical-align: middle;
+}
+
+.w6w-data-table th:last-child,
+.w6w-data-table td:last-child {
+  border-right: 0;
+}
+
+.w6w-data-table tbody tr:last-child > td {
+  border-bottom: 0;
+}
+
+/* Header-only table (rows=[] + loading, e.g. a list still fetching): there is no
+   `tbody tr:last-child` to strip, so the header's bottom border would sit right
+   on top of the frame's own bottom edge and paint it twice. With no body row the
+   header is the last row, so it paints no bottom border — the frame supplies it. */
+.w6w-data-table:not(:has(tbody tr)) th {
+  border-bottom: 0;
+}
+
+.w6w-data-table th {
+  color: var(--w6w-muted);
+}
+
+.w6w-data-table-row-clickable {
+  cursor: pointer;
+}
+
+.w6w-data-table-row-clickable:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-data-table-link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
 /* Connections (D-12u): ConnectionList, ConnectionHeader and the state tags they share. */
 .w6w-connection-list {
   display: flex;
@@ -5391,26 +6512,12 @@ button.w6w-rel-open:focus-visible strong {
   flex-shrink: 0;
 }
 
-.w6w-connection-rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--w6w-sp-1);
-}
-
-.w6w-connection-row {
-  display: flex;
+.w6w-connection-cell-name {
+  display: inline-flex;
   align-items: center;
   gap: var(--w6w-sp-2);
 }
 
-.w6w-connection-row-main {
-  flex: 1;
-  min-width: 0;
-}
-
 .w6w-connection-row-actions {
   display: flex;
   gap: var(--w6w-sp-1-5);
@@ -5484,3 +6591,642 @@ button.w6w-rel-open:focus-visible strong {
 .w6w-connection-id-copy:focus-within .w6w-copyable-btn {
   opacity: 1;
 }
+
+/* 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);
+}
+
+.w6w-empty-state {
+  position: relative;
+  min-height: 10rem;
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+}
+
+.w6w-empty-state-inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  text-align: center;
+}
+
+.w6w-empty-state-body {
+  color: var(--w6w-muted);
+}
+
+.w6w-canvas-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.w6w-canvas-section,
+.w6w-canvas-note {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px solid var(--w6w-canvas-color, var(--w6w-border));
+  border-radius: var(--w6w-radius, 6px);
+  background: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-panel)) 14%, transparent);
+  pointer-events: none;
+}
+
+.w6w-canvas-note {
+  border-color: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-border)) 55%, var(--w6w-panel));
+  background: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-panel)) 32%, var(--w6w-panel));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.w6w-canvas-note.selected,
+.w6w-canvas-section.selected {
+  outline: 2px solid var(--w6w-accent);
+  outline-offset: 2px;
+}
+
+.w6w-canvas-note-body {
+  pointer-events: auto;
+  color: var(--w6w-text);
+}
+
+.w6w-canvas-section-title {
+  position: absolute;
+  max-width: 320px;
+  overflow: hidden;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-1-5);
+  border-radius: 6px;
+  color: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-text)) 55%, var(--w6w-text));
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w6w-canvas-section-title.editable {
+  pointer-events: auto;
+  cursor: grab;
+  touch-action: none;
+}
+
+.w6w-canvas-section-title.editable:hover {
+  background: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-panel)) 18%, transparent);
+}
+
+.w6w-canvas-note-body {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+  padding: var(--w6w-sp-3) var(--w6w-sp-3);
+  font-size: var(--w6w-fs-sm);
+  line-height: var(--w6w-lh-normal);
+  overflow-wrap: anywhere;
+}
+.w6w-canvas-note-body h1,
+.w6w-canvas-note-body h2,
+.w6w-canvas-note-body h3,
+.w6w-canvas-note-body h4,
+.w6w-canvas-note-body h5,
+.w6w-canvas-note-body h6,
+.w6w-canvas-note-body p,
+.w6w-canvas-note-body ul,
+.w6w-canvas-note-body ol {
+  margin: 0 0 var(--w6w-sp-1);
+}
+.w6w-canvas-note-body h1 {
+  font-size: var(--w6w-fs-2xl);
+  line-height: var(--w6w-lh-tight);
+}
+.w6w-canvas-note-body h2 {
+  font-size: var(--w6w-fs-xl);
+  line-height: var(--w6w-lh-tight);
+}
+.w6w-canvas-note-body h3 {
+  font-size: var(--w6w-fs-lg);
+  line-height: var(--w6w-lh-tight);
+}
+.w6w-canvas-note-body h4,
+.w6w-canvas-note-body h5,
+.w6w-canvas-note-body h6 {
+  font-size: var(--w6w-fs-base);
+}
+
+.w6w-canvas-note-editor {
+  outline: none;
+  cursor: text;
+}
+.w6w-canvas-note-editor > div,
+.w6w-canvas-note-editor > h1,
+.w6w-canvas-note-editor > h2,
+.w6w-canvas-note-editor > h3,
+.w6w-canvas-note-editor > h4,
+.w6w-canvas-note-editor > h5,
+.w6w-canvas-note-editor > h6 {
+  margin: 0;
+}
+
+.w6w-note-resize {
+  position: absolute;
+  right: var(--w6w-sp-0-5);
+  bottom: var(--w6w-sp-0-5);
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+  pointer-events: auto;
+  touch-action: none;
+  opacity: 0;
+  background: linear-gradient(135deg, transparent 45%, var(--w6w-muted) 45% 52%, transparent 52% 70%, var(--w6w-muted) 70% 77%, transparent 77%);
+}
+
+.w6w-canvas-note:hover .w6w-note-resize,
+.w6w-canvas-note.selected .w6w-note-resize,
+.w6w-canvas-section.selected .w6w-note-resize {
+  opacity: 1;
+}
+
+.w6w-canvas-note-empty {
+  color: var(--w6w-muted);
+  font-style: italic;
+}
+
+.w6w-note-toolbar {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-0-5);
+  padding: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+  border-radius: 10px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  font-size: var(--w6w-fs-sm);
+  white-space: nowrap;
+  pointer-events: auto;
+}
+.w6w-note-toolbar .w6w-icon-btn {
+  gap: var(--w6w-sp-1);
+  padding: var(--w6w-sp-1-5);
+  color: var(--w6w-text);
+}
+
+.w6w-note-toolbar-group {
+  position: relative;
+  display: inline-flex;
+}
+
+.w6w-note-toolbar-sep {
+  align-self: stretch;
+  width: 1px;
+  margin: var(--w6w-sp-0-5) var(--w6w-sp-0-5);
+  background: var(--w6w-border);
+}
+
+.w6w-note-grip {
+  cursor: grab;
+  touch-action: none;
+}
+
+.w6w-note-grip:active {
+  cursor: grabbing;
+}
+
+.w6w-note-toolbar .w6w-section-title-input {
+  flex: none;
+  width: auto;
+  margin: 0;
+  padding: var(--w6w-sp-1) var(--w6w-sp-1-5);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: var(--w6w-fw-semibold);
+}
+
+.w6w-note-toolbar .w6w-section-title-input:hover {
+  border-color: var(--w6w-border);
+}
+
+.w6w-note-toolbar .w6w-section-title-input:focus {
+  border-color: var(--w6w-accent);
+  outline: none;
+}
+
+.w6w-note-size-btn {
+  font-weight: var(--w6w-fw-semibold);
+}
+
+.w6w-note-delete:hover {
+  color: var(--w6w-danger);
+}
+
+.w6w-note-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--w6w-canvas-color);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.w6w-note-menu {
+  position: absolute;
+  top: calc(100% + var(--w6w-sp-2));
+  left: 0;
+  z-index: 1;
+  display: flex;
+  padding: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 10px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+}
+
+.w6w-note-menu-colors {
+  display: grid;
+  grid-template-columns: repeat(5, 24px);
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-2);
+}
+
+.w6w-note-swatch-btn {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  background: var(--w6w-canvas-color);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+
+.w6w-note-swatch-btn.active {
+  border-color: var(--w6w-panel);
+  box-shadow: 0 0 0 2px var(--w6w-accent);
+}
+
+.w6w-note-swatch-custom {
+  overflow: hidden;
+  background: conic-gradient(#f87171, #facc15, #4ade80, #60a5fa, #a78bfa, #f87171);
+}
+.w6w-note-swatch-custom input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.w6w-note-menu-sizes {
+  flex-direction: column;
+  min-width: 150px;
+}
+
+.w6w-note-menu-item {
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  font-weight: var(--w6w-fw-semibold);
+  cursor: pointer;
+}
+
+.w6w-note-menu-item:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-canvas-menu {
+  top: auto;
+  z-index: 10;
+  flex-direction: column;
+  min-width: 170px;
+}
+.w6w-canvas-menu .w6w-note-menu-item {
+  font-weight: var(--w6w-fw-medium);
+}
+.w6w-canvas-menu .w6w-note-menu-item:focus-visible {
+  outline: none;
+  background: var(--w6w-panel-2);
+}
+.w6w-canvas-menu .w6w-note-menu-item.danger {
+  color: var(--w6w-danger);
+}
+.w6w-canvas-menu .w6w-note-menu-item.separated {
+  position: relative;
+  margin-top: var(--w6w-sp-2);
+}
+.w6w-canvas-menu .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-canvas-menu .w6w-note-menu-item[aria-disabled=true] {
+  opacity: 0.45;
+  cursor: default;
+  background: transparent;
+}
+
+.w6w-note-size-1 {
+  font-size: var(--w6w-fs-xl);
+}
+
+.w6w-note-size-2 {
+  font-size: var(--w6w-fs-lg);
+}
+
+.w6w-note-size-3 {
+  font-size: var(--w6w-fs-base);
+}
+
+.w6w-note-size-0 {
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-regular);
+}
+
+.w6w-flow-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-flow-tool {
+  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+}
+
+.w6w-flow-tool.active {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+  background: color-mix(in srgb, var(--w6w-accent) 12%, var(--w6w-panel));
+}
+
+.w6w-section-draw {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.w6w-section-draw-rect {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px dashed var(--w6w-accent);
+  border-radius: var(--w6w-radius, 6px);
+  background: color-mix(in srgb, var(--w6w-accent) 10%, transparent);
+  pointer-events: none;
+}
+
+/* BudgetMeter — usage-vs-limit bar with a reserved segment.
+ *
+ * Token-only: every colour is a --w6w-* custom property, so a host restyles
+ * the meter (including the over-limit state) by overriding tokens, never by
+ * targeting a hex value here. */
+.w6w-budget-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-budget-meter-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+  color: var(--w6w-muted);
+}
+
+.w6w-budget-meter-label {
+  color: var(--w6w-text);
+}
+
+.w6w-budget-meter-value {
+  font-variant-numeric: tabular-nums;
+}
+
+.w6w-budget-meter-track {
+  display: flex;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+}
+
+.w6w-budget-meter-used {
+  height: 100%;
+  background: var(--w6w-accent);
+}
+
+.w6w-budget-meter-reserved {
+  height: 100%;
+  background: var(--w6w-health-degraded);
+}
+
+.w6w-budget-meter-over .w6w-budget-meter-used {
+  background: var(--w6w-danger);
+}
+
+.w6w-budget-meter-over .w6w-budget-meter-value {
+  color: var(--w6w-danger);
+}
+
+/* Markdown: the leading YAML frontmatter, collapsed above the rendered body. The body itself
+   is unstyled here — the host styles it through the `className` it passes. */
+.w6w-md-frontmatter {
+  margin-bottom: var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2-5);
+  font-size: var(--w6w-fs-sm);
+}
+
+.w6w-md-frontmatter > summary {
+  cursor: pointer;
+  color: var(--w6w-muted);
+}
+
+.w6w-md-frontmatter > pre {
+  margin: var(--w6w-sp-2) 0 0;
+  overflow-x: auto;
+  font-family: var(--w6w-font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}