@w6w/ui 0.0.0-stage → 0.1.1

package/src/styles/_expression-modal.scss

@@ -0,0 +1,292 @@
+.w6w-exprmodal {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 14px;
+}
+.w6w-exprmodal-sources {
+  overflow: auto;
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  background: var(--w6w-panel-2);
+  padding: var(--w6w-sp-2-5);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.w6w-exprmodal-group {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.w6w-exprmodal-group-label {
+  font-size: 0.72em;
+  font-weight: var(--w6w-fw-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--w6w-muted);
+  margin-bottom: var(--w6w-sp-0-5);
+}
+.w6w-exprmodal-source {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+}
+.w6w-exprmodal-source:hover {
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+}
+.w6w-exprmodal-source.w6w-expr-chip-var {
+  color: var(--w6w-accent);
+}
+.w6w-exprmodal-source.w6w-expr-chip-secret {
+  color: var(--w6w-danger);
+}
+.w6w-exprmodal-source-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* A step's per-field sources, nested under its whole-output source, so three
+   upstream steps x four fields reads as a tree rather than a flat wall. */
+.w6w-exprmodal-subsources {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-left: 9px;
+  padding-left: var(--w6w-sp-2);
+  border-left: 1px solid var(--w6w-border);
+}
+/* One document-field row: the primary insert source (flex: 1, so it still
+   truncates a long key the same way a bare `.w6w-exprmodal-source` does) plus
+   the second, visible action (D-P1) that inserts the SAME ref as a `render`
+   part — so the two read as one entry, not two unrelated controls. */
+.w6w-exprmodal-subsource-row {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+.w6w-exprmodal-subsource-row .w6w-exprmodal-source {
+  flex: 1;
+  min-width: 0;
+}
+.w6w-exprmodal-render-btn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-success);
+  opacity: 0.75;
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+.w6w-exprmodal-render-btn:hover {
+  opacity: 1;
+  background: var(--w6w-panel);
+  border-color: var(--w6w-success);
+}
+/* A rail source with surviving child rows (a multi-field document, a step
+   with declared outputs) — the "whole source" button plus the expand/collapse
+   toggle, as siblings on one row. Mirrors `.w6w-exprmodal-subsource-row`'s
+   flex row + child-fills-width shape (`:74-82` above), kept as its own class
+   because the two are counted independently by the test suite. */
+.w6w-exprmodal-source-row {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+.w6w-exprmodal-source-row .w6w-exprmodal-source {
+  flex: 1;
+  min-width: 0;
+}
+/* A step row's disclosure caret, sitting where the chip's `▸` sigil was —
+   that arrow reads as "expand", so on a row with fields it does exactly that
+   (the chip beside it still inserts the whole output). */
+.w6w-exprmodal-caret-btn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-accent);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+.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
+   `render` part. It carries a "N fields" label, not a bare chevron, so it is
+   auto-width (a lone 20px chevron went unnoticed beside the chip). */
+.w6w-exprmodal-toggle-btn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--w6w-sp-1);
+  height: 20px;
+  padding: 0 6px; /* lint-tokens-allow: no 6px step on the spacing scale; between sp-1 and sp-2 keeps the 20px pill's label centred */
+  white-space: nowrap;
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+.w6w-exprmodal-toggle-btn:hover {
+  background: var(--w6w-panel);
+  border-color: var(--w6w-accent);
+  color: var(--w6w-text);
+}
+.w6w-exprmodal-main {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+.w6w-exprmodal-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+  min-height: 0;
+  flex: 1 1 auto;
+}
+.w6w-exprmodal-pane-label {
+  font-size: 13px;
+  font-weight: var(--w6w-fw-semibold);
+  color: var(--w6w-text);
+}
+/* The WYSIWYG chip editor: tags flow inline with text (colored + spaced). */
+.w6w-exprmodal-chips {
+  flex: 1;
+  min-height: 180px;
+  overflow: auto;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  line-height: 2.1;
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.w6w-exprmodal-chips:focus {
+  border-color: var(--w6w-accent);
+}
+.w6w-exprmodal-chips.is-empty::before {
+  content: attr(data-placeholder);
+  color: var(--w6w-muted);
+  pointer-events: none;
+}
+.w6w-exprmodal-chips.is-masked {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+.w6w-exprmodal-chips.is-masked .w6w-expr-chip {
+  -webkit-text-security: none;
+  text-security: none;
+}
+.w6w-exprmodal-preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+}
+/* The Result pane's own share of `.w6w-exprmodal-main`'s flex column — the
+   SHARE lives on this wrapper, not on the `<pre>` below: the `<pre>`'s parent
+   is this wrapper (`.w6w-exprmodal-preview`, a flex column), not `-main`
+   itself, so a `flex-basis` on the `<pre>` would be a share of a
+   content-sized box and do nothing. 42% keeps the pane in the 30-50% band and
+   the chips editor above the 25% floor at 1440x900, 1280x720 and 1440x1200 —
+   measured in real Chromium, `test/expr-template/expr-template-guards.test.cjs`
+   T-height; see the project's result for the numbers. */
+.w6w-exprmodal-result-pane {
+  flex: 0 0 42%;
+  min-height: 0;
+}
+/* The pane's 42% share above is a flex-basis on `.w6w-exprmodal-result-pane`
+   itself (a column flex container) — it must still reach the `<pre>` now that
+   `Copyable` wraps it in a `.w6w-copyable` div. That wrapper is the actual
+   column child now, so it needs the grow/shrink share instead. */
+.w6w-exprmodal-result-pane > .w6w-copyable {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.w6w-exprmodal-result {
+  flex: 1 1 auto;
+  /* `.w6w-copyable` is a ROW flex container (`_copyable.scss:5`), and its
+     `:has(> pre)` arm (`_copyable.scss:19-21`) sets `align-items: flex-start`
+     for CodeBlock's snippet case, where the box is sized TO the pre's
+     content. Here it's the other way around — the wrapper is grown to the
+     pane's share by the rule above, and the `<pre>` must fill IT. `flex: 1 1
+     auto`'s grow/shrink applies to the row's main axis (width) and does
+     nothing for height there, so the cross-axis stretch has to be pinned
+     directly on this item, overriding the container's `flex-start`. */
+  align-self: stretch;
+  min-height: 0;
+  max-height: none;
+  overflow: auto;
+  margin: 0;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  /* `_copyable.scss:105-107`'s corner-button clearance is scoped to
+     `.w6w-code-block` and does not apply here — same 40px value (icon box +
+     inset + gap) so the overlaid copy button never sits on the first line. */
+  padding-right: var(--w6w-sp-10);
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.w6w-exprmodal-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+}
+.w6w-expr-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}

package/src/styles/_fields.scss

@@ -0,0 +1,161 @@
+/* Form fields */
+.w6w-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  color: var(--w6w-muted);
+  font-size: 0.9em;
+}
+.w6w-field > span {
+  color: var(--w6w-muted);
+}
+.w6w-field input[type="text"],
+.w6w-field input[type="password"],
+.w6w-field input[type="number"],
+.w6w-field select,
+.w6w-field textarea {
+  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;
+}
+/* Native popups: the list background follows `color-scheme` (declared with the
+   tokens), so give the options token colours too — never one theme's text on
+   the other theme's background. */
+.w6w-field option,
+.w6w-field optgroup,
+select option,
+select optgroup {
+  color: var(--w6w-text);
+  background-color: var(--w6w-panel);
+}
+.w6w-field input:focus,
+.w6w-field select:focus,
+.w6w-field textarea:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+/* Credential inputs are plain text fields (never type="password", which would
+   trigger the browser's save-password prompt + suggestions). Mask them visually
+   so a secret still reads as dots. WebKit/Blink support text-security; other
+   engines fall back to plain text, which is acceptable for a credential. */
+.w6w-secret-input {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+.w6w-hint {
+  color: var(--w6w-muted);
+  font-size: 0.8em;
+}
+/* Side-by-side fields: params sharing a `row` id lay out horizontally. */
+.w6w-field-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-2-5);
+}
+.w6w-field-row > .w6w-field {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+/* Array control: a row per item + an add button. */
+.w6w-array {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+  align-items: flex-start;
+}
+.w6w-array-row {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  width: 100%;
+}
+.w6w-array-cells {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+  flex: 1;
+  min-width: 0;
+}
+.w6w-array-cells > .w6w-array-input {
+  flex: 1 1 120px;
+}
+/* An object-item array row's boolean cell: `<label><checkbox><span>`. It is a
+   `<label>`, so `margin: 0` is load-bearing for the same reason it is on
+   `.w6w-fx-inline-label` further down — a host page layers an unscoped
+   `label { margin-bottom: 10px }` after this file (studio's does, at
+   `studio/src/styles.css:499`) and owns any property this block leaves
+   undeclared. `.w6w-array-cells` is a flex row at the default `align-items:
+   stretch`, so a bottom margin does not translate this cell, it SHORTENS its
+   stretched box — and because this block centres its own contents, the checkbox
+   and its caption then ride upward off the row's centre line. Measured before
+   this declaration existed, in [ui+studio]: checkbox cy 792 against the sibling
+   text cell's 799 — 7.0px out, while a ui-only render showed 0.0px. */
+.w6w-array-check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  flex: 0 0 auto;
+  margin: 0;
+  font-size: 13px;
+  color: var(--w6w-text);
+  white-space: nowrap;
+  cursor: pointer;
+}
+/* `> input[type="checkbox"]`, not `input`: a bare `.w6w-array-check input` is
+   (0,1,1), which TIES with a host `input[type="checkbox"] { margin-right: 6px }`
+   (studio/src/styles.css:785) and then loses on source order — measured
+   `margin-right: 6px` reaching this checkbox with the `margin: 0` below already
+   present. The compound form is (0,2,1) and wins outright. Same shape as
+   `.w6w-fx-inline > input[type="checkbox"]`, which is why that one was never
+   affected. */
+.w6w-array-check > input[type="checkbox"] {
+  margin: 0;
+}
+.w6w-field .w6w-array-input {
+  flex: 1;
+  min-width: 0;
+  /* Load-bearing, same class as `.w6w-array-check` above: a host
+     `input[type="text"] { margin-top: 4px }` otherwise lands here and drops this
+     cell 2px below its own row's checkbox cell. Measured in [ui+studio]:
+     checkbox cy 797 against this input's 799. This selector is (0,2,0) and beats
+     the host's (0,1,1). */
+  margin: 0;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+}
+.w6w-field .w6w-array-input:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+.w6w-array-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-base);
+  line-height: 1;
+  cursor: pointer;
+}
+.w6w-array-x:hover {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+.w6w-array-add {
+  margin-top: var(--w6w-sp-0-5);
+}

package/src/styles/_flow.scss

@@ -0,0 +1,217 @@
+/* React Flow chrome, driven from the app's own tokens.
+
+   React Flow themes every surface through a three-link chain,
+   `var(--xy-X-props, var(--xy-X, var(--xy-X-default)))`. The library defines
+   only the `-default` link (light/dark, its own palette); the MIDDLE name is
+   never declared by the library and exists purely as a host hook. Setting those
+   middle names here re-points the zoom/fit control stack at `--w6w-*`, so it
+   matches whatever surface the host theme actually uses — and any ControlButton
+   added to that stack later inherits it with no styling of its own.
+
+   Custom properties, deliberately, rather than a `.react-flow__controls-button`
+   override: React Flow's own stylesheet is compiled into the same
+   styles.css (`@use` in the build-only styles.build.scss), but cascade
+   order is not something to lean on: a bare class override (0,1,0) would tie
+   with the library's own rule and lose if the order ever changed. Custom properties inherit and are
+   order-independent, and scoping them on `.w6w-flow` keeps them off the rest of
+   the page.
+
+   Pairs with `colorMode={…}` on <ReactFlow>, which fixes the `-default` link for
+   the chrome this block doesn't name (minimap mask, handles, background dots). */
+.w6w-flow {
+  --xy-controls-button-background-color: var(--w6w-panel);
+  --xy-controls-button-background-color-hover: var(--w6w-panel-2);
+  --xy-controls-button-color: var(--w6w-text);
+  --xy-controls-button-color-hover: var(--w6w-accent);
+  --xy-controls-button-border-color: var(--w6w-border);
+}
+
+/* An error edge — `Edge.when: "error"` (core rfcs/workflow.md · "Amendment —
+   2026-07-29: failure-conditioned edges"). Dashed and drawn in the shared
+   --w6w-danger token (never a hard-coded hex) so the failure lane reads
+   differently from the success lane, and correctly, in BOTH themes.
+
+   ORDER MATTERS — this must stay ABOVE the selected/focused block below.
+   Both selectors are (0,4,0), i.e. exactly equal specificity, so source order
+   decides the winner. Selection has to be able to repaint the edge in the
+   accent colour; put this block after that one and a selected error edge stops
+   highlighting, which reads as a bug. */
+.w6w-flow .react-flow__edge.w6w-edge-error .react-flow__edge-path {
+  stroke: var(--w6w-danger);
+  stroke-dasharray: 6 4;
+}
+.w6w-flow .react-flow__edge.w6w-edge-error .react-flow__edge-text {
+  fill: var(--w6w-danger);
+}
+.w6w-flow .react-flow__edge.w6w-edge-error .react-flow__edge-textbg {
+  fill: var(--w6w-panel);
+}
+
+/* Run-state edge painting (T1.1.1) — whether a main-graph edge was TAKEN or
+   SKIPPED by the run currently showing on the canvas (see `run-visuals.ts`'s
+   `edgeRunState`). Both classes are ADDITIVE to `.w6w-edge-error` above (an
+   edge can be `w6w-edge-error w6w-edge-taken` at once), so ORDER decides how
+   they compose — same equal-(0,4,0)-specificity discipline `.w6w-edge-error`
+   already documents, kept below it in source:
+
+   - `.w6w-edge-taken`'s STROKE COLOUR is guarded to the non-error case via
+     `:where(:not(.w6w-edge-error))` — `:where()` contributes ZERO
+     specificity, so this stays at the SAME (0,4,0) weight as every other
+     block here instead of out-ranking `.selected` below. A taken ERROR edge
+     (the failure path a run actually followed) keeps the danger colour — the
+     fact of having failed does not stop being true — and only gets the
+     thicker stroke-width (the second, unconditional rule).
+   - `.w6w-edge-skipped` is intentionally UNGUARDED: a skipped error edge
+     (the step succeeded, so its error lane never fired) dims to muted same
+     as a skipped success edge does — the failure never happened, so danger
+     is the wrong colour regardless of which lane it is. */
+.w6w-flow .react-flow__edge.w6w-edge-taken:where(:not(.w6w-edge-error)) .react-flow__edge-path {
+  stroke: var(--w6w-success);
+}
+.w6w-flow .react-flow__edge.w6w-edge-taken .react-flow__edge-path {
+  stroke-width: 2.5;
+}
+.w6w-flow .react-flow__edge.w6w-edge-skipped .react-flow__edge-path {
+  stroke: var(--w6w-muted);
+  stroke-dasharray: 2 3;
+  opacity: 0.55;
+}
+
+/* A step's own Notes, shown under its canvas card — human override,
+   2026-08-30, so a description written once (settings → gear icon) is
+   visible without opening the step. One line, clipped with an ellipsis (the
+   full text is still on the node's `title=` for a hover); `max-width`
+   matches the card's own `minWidth` so a short note never forces the row
+   wider than the card sitting above it. Font size matches the sibling
+   meta-line's own inline fontSize:10 (not scanned by this ratchet) directly
+   above it — the smallest declared token, --w6w-fs-xs, is 12px and would
+   visibly mismatch the two lines. */
+.w6w-flow .w6w-node-notes {
+  margin-top: var(--w6w-sp-0-5);
+  padding-left: var(--w6w-sp-0-5);
+  /* lint-tokens-allow: matches the sibling meta-line's inline fontSize:10 above it */
+  font-size: 10px;
+  font-style: italic;
+  opacity: 0.75;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 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
+   own taller pill shape (`PortHandle`'s inline style), not a dot — this
+   rule must not touch it. */
+.w6w-flow .react-flow__handle:not(.w6w-handle-multi) {
+  width: 8px;
+  height: 8px;
+}
+
+/* The error exit port — a step/control node's second SOURCE handle (T1.1.1),
+   rendered below the ordinary exit via the shared PortHandle component
+   (`id={ERROR_SOURCE_HANDLE}`, `variant="error"`). Danger-tinted, same
+   --w6w-danger token as .w6w-edge-error above (never a hard-coded hex).
+   DELIBERATELY 1px SMALLER, in actual box size, than the ordinary ports
+   above (2026-08-30, second pass on "consistent size"): setting both to the
+   literal same 8px×8px box (the first pass) still read as bigger — measured
+   directly, computed styles for both were byte-identical (same width,
+   height, border-width, box-sizing, no box-shadow/outline difference) — a
+   saturated warm fill on a light canvas background perceptually "expands"
+   past a same-sized dark/cool one (the classic irradiation illusion), so
+   matching PIXELS does not produce matching APPEARANCE. Compensating with a
+   smaller literal box is what actually reads as equal. */
+.w6w-flow .react-flow__handle.w6w-handle-error {
+  width: 7px;
+  height: 7px;
+  background: var(--w6w-danger);
+  border-color: var(--w6w-danger);
+  opacity: 0.85;
+}
+.w6w-flow .react-flow__handle.w6w-handle-error:hover {
+  opacity: 1;
+}
+
+/* Workflow edges: highlight the selected/focused edge in the accent colour and
+   thicken it, so it's obvious which one Backspace/Delete will remove. The wide,
+   invisible interaction path keeps the click target generous. */
+.w6w-flow .react-flow__edge.selected .react-flow__edge-path,
+.w6w-flow .react-flow__edge:focus .react-flow__edge-path,
+.w6w-flow .react-flow__edge:focus-visible .react-flow__edge-path {
+  stroke: var(--w6w-accent);
+  stroke-width: 2.5;
+}
+
+/* The edge-lane control — `Run on: Success / Error`, revealed in a React Flow
+   <Panel position="top-right"> when exactly one edge is selected. Unlike the
+   `+ Step` button (a self-contained .w6w-btn), this row mixes a label, two ghost
+   buttons and an inline refusal, so it needs its own surface to stay legible over
+   the canvas background. Same shape as .w6w-node-toolbar below; tokens only. */
+.w6w-edge-lane {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+  max-width: 280px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+}
+/* An inline refusal (re-laning would mint an id another edge already holds).
+   Rendered here rather than through a browser dialog — see .ai/conventions.md ·
+   "No browser dialogs" — and on its own row so the buttons don't reflow. */
+.w6w-edge-lane-err {
+  flex: 1 1 100%;
+  color: var(--w6w-danger);
+}
+
+/* Per-node control toolbar (React Flow NodeToolbar) */
+.w6w-node-toolbar {
+  display: flex;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+}
+.w6w-node-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 5px;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+.w6w-node-toolbar-btn:hover {
+  background: var(--w6w-panel-2);
+}
+.w6w-node-toolbar-btn.danger:hover {
+  background: var(--w6w-danger);
+  color: white;
+}
+
+.w6w-params-optional > summary {
+  cursor: pointer;
+}
+
+/* `section` param — a layout-only container. `section: "collapsible"` renders as
+   a titled, bordered disclosure; `section: "group"` reuses `.w6w-field-row` /
+   `.w6w-stack` for its layout (no rules of its own needed). */
+
+/* Fan-out badge under a card: the glyph (⇉ parallel / → sequence), not colour, carries the mode. */
+.w6w-flow .w6w-fanout-badge {
+  display: inline-block;
+  margin-top: var(--w6w-sp-0-5);
+  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);
+  color: var(--w6w-muted, inherit);
+}