@w6w/ui 0.0.0-stage → 0.1.0

package/src/styles/_fx.scss

@@ -0,0 +1,158 @@
+/* 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
+   ƒx affordance read as ONE box. Mirrors `.w6w-multiselect` above. */
+.w6w-fx-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  min-height: 38px;
+}
+/* A textarea is taller than the ƒx, so there the decoration rides at the top. */
+.w6w-fx-wrap:has(> textarea) {
+  align-items: flex-start;
+}
+/* Focus reads on the box now that the inner widget has no border of its own. */
+.w6w-fx-wrap:focus-within {
+  border-color: var(--w6w-accent);
+}
+.w6w-fx-wrap > input,
+.w6w-fx-wrap > select,
+.w6w-fx-wrap > textarea,
+.w6w-fx-wrap > .w6w-multiselect,
+.w6w-fx-wrap > .w6w-expr {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* The widget inside the wrapper carries NO chrome of its own. COMPOUND
+   selectors, because the global `.w6w-field input|select|textarea` rule is
+   (0,2,1) and a bare `.w6w-fx-wrap > input` at (0,1,1) would lose to it — the
+   same trap documented on `.w6w-multiselect-add` above. `.w6w-datavar-row
+   input|select` is the second rule to beat, for the `bare` vars-row cell. */
+.w6w-field .w6w-fx-wrap input[type="text"],
+.w6w-field .w6w-fx-wrap input[type="password"],
+.w6w-field .w6w-fx-wrap input[type="number"],
+.w6w-field .w6w-fx-wrap select,
+.w6w-field .w6w-fx-wrap textarea,
+.w6w-datavar-row .w6w-fx-wrap input,
+.w6w-datavar-row .w6w-fx-wrap select,
+.w6w-fx-wrap input[type="text"],
+.w6w-fx-wrap input[type="password"],
+.w6w-fx-wrap input[type="number"],
+.w6w-fx-wrap select,
+.w6w-fx-wrap textarea {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  padding: var(--w6w-sp-1) var(--w6w-sp-0-5);
+  outline: none;
+  /* EVERY property in this block is load-bearing, for the same reason
+     `.w6w-fx-inline-label`'s `margin: 0` is (see below): a host page layers its
+     own unscoped `input[type="text"], textarea { … }` rule AFTER this file
+     (studio's does, at `studio/src/styles.css:513-533`, `:759-771` and `:788`),
+     so every property this block leaves undeclared is the host's — including
+     inside a box this library draws. The two below were measured leaking, in
+     [ui+studio], before they were declared — and they fix DIFFERENT things:
+
+       margin     — ALIGNMENT. A host `margin-top: 4px` in an `align-items:
+                    center` row drops the control 2px below the ƒx it shares the
+                    row with (string, number and the bare vars cell; select and
+                    multiselect escaped only because the host rule does not list
+                    them). Rendered: control cy 67 vs ƒx cy 65. On the textarea
+                    row — `align-items: flex-start` — the same 4px showed up as
+                    the ƒx sitting 4px off the control's first line. `margin: 0`
+                    is the whole of that fix.
+
+       min-height — SIZE, and nothing else. Do not re-justify this one as
+                    alignment: the counterfactual was rendered (this `margin: 0`
+                    kept, `min-height: 0` removed) and the row measures a 0.0px
+                    top delta with the host's 80px floor fully in effect. What it
+                    fixes is that a host `textarea { min-height: 80px }`, written
+                    for that host's own bare textareas, was sizing the INSIDE of
+                    a box it cannot see — 80px/94px against the 62px/72px the
+                    same markup renders elsewhere, i.e. one of five control types
+                    29% taller than the library drew it. The box is the library's
+                    to size; how many lines it holds is `rows` on the control.
+                    If a taller body field is ever wanted, it belongs HERE, not
+                    in a host element selector.
+
+     Declared, not fought for: this stays at the block's existing specificity and
+     uses no `!important`. A component that is only aligned while the host
+     cooperates is broken. */
+  margin: 0;
+  min-height: 0;
+}
+/* …and the two widgets that own an input-like box themselves are flattened too,
+   so the wrapper never draws a box around a box. */
+.w6w-fx-wrap .w6w-expr-field,
+.w6w-fx-wrap .w6w-multiselect {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+  min-height: 0;
+}
+/* The OTHER wrapper FxField can render (`variant="inline"`). A control that does
+   not FILL a text-field box — today only a `boolean`'s ~13px checkbox — opts out
+   of the box at the component seam and lands here instead, so `.w6w-fx-wrap`'s
+   chrome above is never applied and nothing has to be clawed back with a more
+   specific selector. Layout is the review's sketch: <checkbox> <ƒx> <label>,
+   one row, no border/background/padding/min-height of its own. */
+.w6w-fx-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-fx-inline > input[type="checkbox"] {
+  flex: 0 0 auto;
+  margin: 0;
+}
+/* The label reads as the control's own text, next to it (mirrors
+   `.w6w-array-check` above, the existing inline-checkbox idiom).
+   `margin: 0` is LOAD-BEARING, not tidiness: a host page may carry an unscoped
+   top-level `label { … margin-bottom: 10px }` (studio's own sheet does, at
+   `studio/src/styles.css:499`), and since it is layered AFTER this file any
+   property this block leaves undeclared is the host's. A bottom margin inside an
+   `align-items: center` row lifts the text off the row's centre line — measured
+   5px above the checkbox and the ƒx before this declaration existed. Every other
+   element of the row is defended the same way: the checkbox's `margin: 0` above
+   out-specifies a host `input[type="checkbox"] { margin-right: … }` (0,2,1 vs
+   0,1,1), and the ƒx's chrome is pinned by `.w6w-fx-inline .w6w-expr-fx` below.
+   A component that only lines up when the host sheet cooperates is broken. */
+.w6w-fx-inline-label {
+  margin: 0;
+  color: var(--w6w-text);
+  font-size: 13px;
+  cursor: pointer;
+}
+/* The ƒx itself is a decoration inside whichever wrapper holds it: no chrome,
+   colour only. This is where the UA button border/background is removed (the
+   `.w6w-expr-fx` block below declares neither), so the inline wrapper has to be
+   listed here too or its ƒx comes back as a grey rounded button. The label row
+   (`json` / childless `group` params, which have no field box) is a third
+   placement and gets the same chrome-stripping. */
+.w6w-fx-wrap .w6w-expr-fx,
+.w6w-fx-inline .w6w-expr-fx,
+.w6w-field-labelrow .w6w-expr-fx {
+  border: none;
+  background: transparent;
+}
+.w6w-expr-fx {
+  flex-shrink: 0;
+  color: var(--w6w-muted);
+  font-size: 13px;
+  font-family: var(--w6w-font-mono);
+  line-height: 1;
+  padding: var(--w6w-sp-1) var(--w6w-sp-1-5);
+  cursor: pointer;
+}
+.w6w-expr-fx:hover {
+  color: var(--w6w-text);
+}
+.w6w-expr-fx.is-active {
+  color: var(--w6w-accent);
+}

package/src/styles/_health.scss

@@ -0,0 +1,46 @@
+.w6w-health-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2) var(--w6w-sp-0-5) 7px;
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 40%, var(--w6w-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--w6w-health-color) 12%, transparent);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-normal);
+  white-space: nowrap;
+  --w6w-health-color: var(--w6w-health-unknown);
+}
+.w6w-health-pill-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+}
+.w6w-health-pill-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+}
+.w6w-health-pill-down {
+  --w6w-health-color: var(--w6w-health-down);
+}
+.w6w-health-pill-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+}
+.w6w-health-pill-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--w6w-health-color);
+}
+.w6w-health-pill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* App summary block */
+.w6w-app-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+}
+
+/* Modal */

package/src/styles/_history-timeline.scss

@@ -0,0 +1,156 @@
+.w6w-history-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+}
+
+/* One positioned container shared by both lanes AND the axis, so every
+   `left`/`width` percentage in any of the three is on the same coordinate
+   system — this is what keeps the two series from drifting apart. */
+.w6w-history-plot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-history-lane {
+  position: relative;
+  height: 22px;
+  min-width: 0;
+}
+
+/* --- execution lane -------------------------------------------------- */
+
+.w6w-history-cell {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-history-fill: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  min-width: 1px;
+  border-radius: 2px;
+  overflow: hidden;
+  /* The unfilled remainder of the cell, so the lane reads as a continuous
+     row rather than as floating marks — same treatment as `UptimeStrip`. */
+  background: color-mix(in srgb, var(--w6w-border) 55%, transparent);
+}
+.w6w-history-cell::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--w6w-history-fill);
+  border-radius: inherit;
+  background: var(--w6w-health-color);
+}
+.w6w-history-cell-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+  --w6w-history-fill: 35%;
+}
+.w6w-history-cell-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+  --w6w-history-fill: 65%;
+}
+.w6w-history-cell-down {
+  --w6w-health-color: var(--w6w-health-down);
+  --w6w-history-fill: 100%;
+}
+.w6w-history-cell-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-history-fill: 100%;
+}
+/* No solid fill for `unknown` — a hatch, same reasoning as `UptimeStrip`'s:
+   an unmeasured day must never be mistaken for a healthy or a failing one. */
+.w6w-history-cell-unknown::after {
+  background: repeating-linear-gradient(
+    45deg,
+    color-mix(in srgb, var(--w6w-health-color) 45%, transparent) 0 2px,
+    transparent 2px 5px
+  );
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 35%, var(--w6w-border));
+}
+
+/* --- vendor lane ------------------------------------------------------- */
+
+.w6w-history-bar {
+  --w6w-health-color: var(--w6w-health-unknown);
+  position: absolute;
+  /* Thickness is the geometry half of severity — thin for `ok`, thicker for
+     `degraded`, full lane height for `down`/`unknown` — using the spacing
+     scale rather than a one-off literal so it never drifts from it. */
+  top: var(--w6w-sp-1);
+  bottom: var(--w6w-sp-1);
+  min-width: 2px;
+  border-radius: 2px;
+  background: var(--w6w-health-color);
+}
+.w6w-history-bar-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+}
+.w6w-history-bar-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+  top: var(--w6w-sp-0-5);
+  bottom: var(--w6w-sp-0-5);
+}
+.w6w-history-bar-down {
+  --w6w-health-color: var(--w6w-health-down);
+  top: 0;
+  bottom: 0;
+}
+.w6w-history-bar-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+  top: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    45deg,
+    color-mix(in srgb, var(--w6w-health-color) 45%, transparent) 0 2px,
+    transparent 2px 5px
+  );
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 35%, var(--w6w-border));
+}
+/* A clipped edge is squared off rather than rounded, so a bar that runs off
+   the window reads as continuing beyond it rather than as ending there. */
+.w6w-history-bar-clip-start {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.w6w-history-bar-clip-end {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.w6w-history-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- axis --------------------------------------------------------------- */
+
+.w6w-history-axis {
+  position: relative;
+  height: 16px;
+}
+.w6w-history-tick {
+  position: absolute;
+  top: 0;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-normal);
+  white-space: nowrap;
+}
+.w6w-history-tick-start {
+  transform: translateX(0);
+}
+.w6w-history-tick-end {
+  transform: translateX(-100%);
+}

package/src/styles/_icon-button.scss

@@ -0,0 +1,22 @@
+.w6w-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5);
+  color: var(--w6w-muted);
+  cursor: pointer;
+}
+.w6w-icon-button:hover:not(:disabled) {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+.w6w-icon-button-danger:hover:not(:disabled) {
+  color: var(--w6w-danger);
+}
+.w6w-icon-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}

package/src/styles/_icon.scss

@@ -0,0 +1,15 @@
+/* The shared `Icon` (`src/components/Icon.tsx`).
+ *
+ * Only geometry invariants live here. The PAINT is per-entry in
+ * `src/components/icons.tsx` (the set mixes filled Material-style glyphs with
+ * stroked Feather ones, and the language marks paint their own elements), and
+ * the SIZE comes from the `size` prop — so there is nothing about colour or
+ * scale for this class to say. */
+.w6w-icon {
+  /* Never squashed by a flex parent: a rail glyph squeezed to 9px is unreadable,
+     and the sources draw at 14–20px inside rows that can be tight. */
+  flex-shrink: 0;
+  /* A glyph dropped into a line of text sits on the baseline by default, which
+     reads as a foot below the words. */
+  vertical-align: middle;
+}

package/src/styles/_icons.scss

@@ -0,0 +1,31 @@
+.w6w-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5);
+  color: var(--w6w-muted);
+  cursor: pointer;
+}
+.w6w-icon-btn:hover {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+.w6w-icon-btn.active {
+  background: var(--w6w-panel-2);
+  border-color: var(--w6w-accent);
+  color: var(--w6w-text);
+}
+
+/* Segmented sub-tabs inside the edit modal's form view (Parameters | Config). */
+.w6w-subtabs {
+  display: inline-flex;
+  gap: var(--w6w-sp-0-5);
+  padding: var(--w6w-sp-0-5);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  align-self: flex-start;
+}

package/src/styles/_incoming-state.scss

@@ -0,0 +1,46 @@
+/* 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
+   the tab shows — the seed chips above it stay in plain sight. */
+.w6w-state-override {
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2);
+}
+.w6w-state-override > summary {
+  cursor: pointer;
+  color: var(--w6w-muted);
+  font-size: 0.85em;
+}
+/* Breathing room only once it is open: closed, the summary IS the whole box. */
+.w6w-state-override[open] > summary {
+  margin-bottom: var(--w6w-sp-1-5);
+}
+.w6w-state-override > .w6w-hint {
+  display: block;
+  margin-top: var(--w6w-sp-1);
+}
+
+/* Incoming-state seed picker: upstream steps' saved tests offered as one-click
+   seeds for the step's incoming state (WorkflowFlowEditor · StepEditModal). */
+.w6w-seed-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  margin-bottom: var(--w6w-sp-1-5);
+}
+.w6w-seed-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+}
+.w6w-seed-chip {
+  cursor: pointer;
+}
+.w6w-seed-chip:hover:not(:disabled) {
+  border-color: var(--w6w-text);
+}
+.w6w-seed-chip:disabled {
+  cursor: default;
+  opacity: 0.6;
+}

package/src/styles/_info-tip.scss

@@ -0,0 +1,9 @@
+.w6w-info-tip {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+.w6w-info-tip-body {
+  flex-basis: 100%;
+}

package/src/styles/_layout.scss

@@ -0,0 +1,6 @@
+/* Layout helpers */
+.w6w-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+}

package/src/styles/_lists.scss

@@ -0,0 +1,64 @@
+.w6w-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  width: 100%;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--w6w-text);
+  text-align: left;
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+button.w6w-list-item {
+  font: inherit;
+  font-size: var(--w6w-fs-sm);
+}
+.w6w-list-item:hover {
+  background: var(--w6w-panel-2);
+}
+.w6w-list-item:focus-visible {
+  outline: none;
+  border-color: var(--w6w-accent);
+  box-shadow: 0 0 0 2px var(--w6w-accent);
+}
+.w6w-list-item.active {
+  border-color: var(--w6w-accent);
+  background: var(--w6w-panel-2);
+}
+.w6w-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.w6w-list-item-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: var(--w6w-sp-0-5);
+}
+.w6w-list-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.w6w-list-item-subtitle {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.w6w-list-item-trailing {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Health status pill — a small, theme-aware badge for one health state
+   (ok · degraded · down · unknown). Colour comes from the `--w6w-health-*`
+   tokens so a host can restyle every state by overriding those; the dot tints
+   with the state while the pill keeps a soft tinted background + border. */

package/src/styles/_modal.scss

@@ -0,0 +1,125 @@
+.w6w-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: grid;
+  place-items: center;
+  padding: var(--w6w-sp-5);
+  z-index: 50;
+}
+dialog.w6w-modal {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  overflow: auto;
+  padding: var(--w6w-sp-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+dialog.w6w-modal::backdrop {
+  background: rgba(0, 0, 0, 0.55);
+}
+dialog.w6w-modal h3,
+dialog.w6w-modal h4,
+dialog.w6w-modal p {
+  color: var(--w6w-text);
+  margin: 0;
+}
+dialog.w6w-modal.w6w-modal-wide {
+  max-width: min(850px, 80vw);
+  min-height: min(70vh, 560px);
+}
+dialog.w6w-modal.w6w-modal-xl {
+  max-width: 1040px;
+  min-height: min(70vh, 620px);
+}
+dialog.w6w-modal.w6w-modal-full {
+  max-width: min(1200px, 96vw);
+  width: 96vw;
+  height: 92vh;
+  max-height: 92vh;
+  overflow: hidden;
+}
+/* Edge-to-edge surface: the whole viewport, no rounded corners and no visible
+   backdrop margin. Distinct from `.w6w-modal-full` (96vw x 92vh), which is
+   deliberately inset so the page behind stays visible as context — the
+   expression editor and the action tester both rely on that.
+   `position: fixed; inset: 0` already sizes to the viewport, so width/height
+   here are belt-and-braces against a UA stylesheet's `dialog` sizing.
+   The header is pinned; the caller's own child scrolls (it must set
+   `flex: 1; min-height: 0; overflow: auto` on itself). */
+dialog.w6w-modal.w6w-modal-fullscreen {
+  max-width: none;
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  padding: var(--w6w-sp-5) var(--w6w-sp-6);
+}
+dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
+  flex-shrink: 0;
+  padding-bottom: var(--w6w-sp-4);
+  border-bottom: 1px solid var(--w6w-border);
+}
+.w6w-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+}
+.w6w-modal-title {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  min-width: 0;
+}
+.w6w-modal-subtitle {
+  color: var(--w6w-muted);
+  font-size: 0.7em;
+  font-weight: var(--w6w-fw-regular);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.w6w-modal-subtitle code {
+  font-size: inherit;
+}
+/* The one scrolling region of a dialog (D-3): the body takes the leftover height
+   and scrolls, so the header/footer around it stay put. The dialog's own
+   `gap: var(--w6w-sp-3)` column is reproduced here so content-spacing is
+   unchanged now that body children are flex items of THIS box, not the dialog's. */
+.w6w-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+/* Pinned below the scrolling `.w6w-modal-body`, never shrunk away by it (D-3).
+   Sits at the dialog's bottom for free: the body above it already absorbs the
+   free space, so no `margin-top: auto` is needed (or wanted — it would shrink
+   this row instead). */
+.w6w-modal-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+/* Icon-button view toggle (e.g. Form ⇄ JSON), inline with a modal header. */
+.w6w-view-toggle {
+  display: flex;
+  gap: var(--w6w-sp-1);
+  flex-shrink: 0;
+}