@caddis/cli 0.4.46 → 0.4.48

package/bundles/antigravity-plugin/skills/flow-studio/templates/flow-studio.lib.mjs

@@ -29,6 +29,7 @@ function validateModel(input) {
   if (!Array.isArray(m.lanes) || m.layout !== "auto" && m.lanes.length === 0) add("error", "lanes-missing", "lanes", "At least one lane is required.");
   if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
   const columns = Array.isArray(m.columns) ? m.columns : [];
+  if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
   const lanes = Array.isArray(m.lanes) ? m.lanes : [];
   const states = m.states && typeof m.states === "object" ? m.states : {};
   if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");
@@ -347,11 +348,19 @@ __export(rules_exports, {
   linkVisible: () => linkVisible,
   nodeStateId: () => nodeStateId,
   nodeVisible: () => nodeVisible,
+  stripHeads: () => stripHeads,
   toggleGroupState: () => toggleGroupState
 });
 var baselineView = (m) => m.views?.[0]?.id ?? "all";
 var defaultView = (m) => (m.views?.find((v) => v.default) ?? m.views?.[0])?.id ?? "all";
 var initialCollapsed = (m) => new Set(m.nodes.filter((n) => n.kind === "group" && n.contains && n.collapsed !== false).map((n) => n.id));
+var stripHeads = (m) => {
+  let head = 0;
+  return m.columns.map((c, i) => {
+    if (!c.continues || i === 0) head = i;
+    return head;
+  });
+};
 var columnTitle = (m, n) => n.col === void 0 ? "" : m.columns[n.col]?.title ?? "";
 function groupFor(m, nodeId) {
   return m.nodes.find((n) => n.kind === "group" && n.contains?.includes(nodeId));
@@ -1203,7 +1212,7 @@ function install3(ctx) {
     if (!cols.firstChild) {
       model.columns.forEach((c, i2) => {
         const h = el("div", "hd");
-        h.textContent = (c.short ?? c.title).toUpperCase();
+        h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase();
         h.title = c.title;
         h.dataset.i = String(i2);
         cols.appendChild(h);
@@ -1589,16 +1598,18 @@ function install5(ctx) {
   }
   function buildStrip() {
     const box = els.strip;
+    const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
     box.style.display = model.columns.length ? "" : "none";
-    box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+    box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
     if (!box.firstChild) {
-      box.innerHTML = model.columns.map((c) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+      box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
     }
-    box.querySelectorAll(".lcell").forEach((cell, i) => {
-      cell.style.setProperty("--i", String(i));
+    box.querySelectorAll(".lcell").forEach((cell, cellIndex) => {
+      const i = cells[cellIndex]?.i ?? cellIndex;
+      cell.style.setProperty("--i", String(cellIndex));
       let tot = 0, good = 0, neutral = 0, gap = 0;
       for (const n of model.nodes) {
-        if (n.col !== i || n.kind === "chip") continue;
+        if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
         if (!visible(n.id)) continue;
         const w = Math.max(1, n.weight ?? 1);
         tot += w;
@@ -1764,7 +1775,8 @@ function install6(ctx) {
       if (!a) continue;
       let r = a.getBoundingClientRect();
       if (!r.width && !r.height) {
-        const d = a.closest("details");
+        let d = a.closest("details");
+        while (d && d.open) d = d.parentElement?.closest("details") ?? null;
         if (d) r = d.getBoundingClientRect();
       }
       if (!r.width && !r.height) continue;
@@ -1816,7 +1828,7 @@ function install6(ctx) {
   const markdown = () => {
     const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
     for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-    out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+    out.push("", "## Columns", ...model.columns.filter((c) => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
     out.push("", "## Lanes", ...model.lanes.map((l) => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
     out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
     if (notes.length) out.push("", "## Notes", ...notes.map((n) => `${n.id}. **${n.title}**: ${n.text}`));
@@ -2481,6 +2493,7 @@ export {
   rules_exports as rules,
   slaState,
   stateCss,
+  stripHeads,
   suggestedExit,
   toggleGroupState,
   trace_exports as trace,

package/bundles/codex/.codex/skills/frontend/flow-studio/SKILL.md

@@ -70,12 +70,13 @@ In either route, derive node and link IDs from immutable business keys. Preserve
 8. **Short titles**: titles fit one line at column width. Long descriptions belong in subtitles or member lists.
 9. **Fixed node dimensions**: node kinds use fixed box sizes so font rendering does not shift layout.
 10. **Reduced motion**: removes all animations while preserving static borders and status glows.
+11. **Thin links, dotted canvas**: links are hairlines (about 1.1 px) and the canvas background is faint dots, not a grid. Both come from tokens (`--edge-w`, `--dot`, ...), so an app can change them with one CSS line; see `references/design-language.md`.
 
 ## Model summary
 
 ```
 version 1, meta {title, help, asOf, source, labels?}, layout "columns-lanes" | "free" | "auto"
-columns [{id, title, short?, width, phase?}]              stages, left to right
+columns [{id, title, short?, width, phase?, continues?}]              stages, left to right
 lanes   [{id, title, badge?, badgeTone?, note?, gap?}]    rows; gap true = dashed amber lane
 states  {id: {word, tone, border, edge, motion, bucket}}  tone: ok|warn|crit|info|muted|accent; bucket: good|neutral|gap
 nodes   [{id, kind, lane?, col?, colSpan?, row?, x?, y?, w?, h?, state, title, subtitle?, members?, weight?,

package/bundles/codex/.codex/skills/frontend/flow-studio/model.schema.json

@@ -26,7 +26,7 @@
         "type": "object", "required": ["id", "title", "width"], "additionalProperties": false,
         "properties": {
           "id": { "type": "string" }, "title": { "type": "string" }, "short": { "type": "string" },
-          "width": { "type": "number", "minimum": 60 }, "phase": { "type": "string" }
+          "width": { "type": "number", "minimum": 60 }, "phase": { "type": "string" }, "continues": { "type": "boolean" }
         }
       }
     },

package/bundles/codex/.codex/skills/frontend/flow-studio/references/design-language.md

@@ -24,7 +24,15 @@ Tokens are defined on `:root` and adapted for dark mode via `@media (prefers-col
 | `--down` | `#8250df` | `#d0a0ee` | Downstream relation count and notes marker |
 | `--glow` | `rgba(9,105,218,.22)` | `rgba(68,147,248,.35)` | Accent halo for selection, hover, and canvas focus |
 | `--shadow` | `0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08)` | `0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45)` | Elevated card and modal elevation shadow |
-| `--grid` | `rgba(31,35,40,.035)` | `rgba(255,255,255,.04)` | Viewport grid pattern dots and lines |
+| `--grid` | `rgba(31,35,40,.035)` | `rgba(255,255,255,.04)` | Legacy: no longer drawn. The canvas background is dots now (see `--dot`) |
+| `--dot` | `rgba(31,35,40,.18)` | `rgba(255,255,255,.16)` | Colour of the canvas background dots |
+| `--dot-size` | `1.2px` | Same | Radius of a background dot |
+| `--dot-gap` | `24px` | Same | Spacing of the background dots |
+| `--edge-w` | `1.1px` | Same | Width of a normal link (thin, like a hairline; motion carries the state) |
+| `--edge-w-hot` | `1.5px` | Same | Width of a traced or selected link |
+| `--edge-w-play` | `1.6px` | Same | Width of a link while playback runs along it |
+| `--trail-w` | `1.8px` | Same | Width of the draw-in trail on a selected path (divided by the zoom) |
+| `--ripple-w` | `2px` | Same | Width of the what-if ripple (divided by the zoom) |
 | `--ok-bg` | `rgba(26,127,55,.10)` | `rgba(63,185,80,.12)` | Subtle tinted background for healthy states |
 | `--warn-bg` | `rgba(154,103,0,.10)` | `rgba(210,153,34,.14)` | Subtle tinted background for warning states |
 | `--crit-bg` | `rgba(207,34,46,.08)` | `rgba(248,81,73,.12)` | Subtle tinted background for critical states |
@@ -65,7 +73,7 @@ Layout elements follow a strict 4px grid rhythm:
 | xs | 4px to 7px | Button vertical padding (`4px 11px`), card vertical padding (`5px 10px 7px`), playbar gaps (`7px`) |
 | sm | 8px to 10px | Card horizontal padding (`10px`), toolbar item gaps, summary grid gaps |
 | md | 12px to 16px | Page padding (`12px 14px 20px`), header gaps, inspector body padding |
-| lg | 20px to 28px | Section margins, top header padding, grid line pitch (28px canvas grid) |
+| lg | 20px to 28px | Section margins, top header padding, dot pitch (24px canvas dots) |
 | xl | 32px to 44px | Column header heights (44px), tool button dimensions (34px x 32px) |
 
 ---

package/bundles/codex/.codex/skills/frontend/flow-studio/references/model-schema.md

@@ -48,6 +48,7 @@ Columns provide vertical partitioning for time, stages, or architecture tiers.
 | `short` | `string` | Optional | - | Compact abbreviated title for tight viewports. |
 | `width` | `number` | Required | - | Column width in pixels (minimum 60). |
 | `phase` | `string` | Optional | - | Super-category phase grouping shown in top banner. |
+| `continues` | `boolean` | Optional | `false` | This column is a wrapped continuation of the column before it (for example one long list laid out in three side-by-side columns). It shows no header label and no strip cell of its own: its nodes count into the cell of the column it continues. Not allowed on the first column. |
 
 ---
 

package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/styles.test.mjs

@@ -0,0 +1,37 @@
+// The canvas look is part of the skill's contract: thin lines and a dotted background, both set by tokens
+// an app can override. These tests pin the defaults so a later edit cannot quietly bring back the grid.
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { join, dirname } from "node:path";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const css = readFileSync(join(root, "src/styles.css"), "utf8");
+
+test("the canvas background is dots, not grid lines", () => {
+  assert.match(css, /#viewport[\s\S]*radial-gradient\(circle, var\(--dot\) var\(--dot-size\)/);
+  assert.doesNotMatch(css, /linear-gradient\(var\(--grid\)/, "grid lines must not come back");
+});
+
+test("dots are set by tokens: size, spacing and a colour for light and dark", () => {
+  assert.match(css, /--dot-size:\s*1\.2px/);
+  assert.match(css, /--dot-gap:\s*24px/);
+  const colours = css.match(/--dot:\s*rgba\([^)]*\)/g) ?? [];
+  assert.ok(colours.length >= 3, "a dot colour for light, dark by media query and dark by attribute");
+});
+
+test("links are thin by default and every width comes from a token", () => {
+  assert.match(css, /--edge-w:\s*1\.1px/);
+  assert.match(css, /path\.edge \{ fill:none; stroke-width:var\(--edge-w\)/);
+  assert.match(css, /path\.edge\.hot \{[^}]*stroke-width:var\(--edge-w-hot\)/);
+  assert.match(css, /path\.trail \{[^}]*stroke-width:calc\(var\(--trail-w\)/);
+  assert.match(css, /path\.ripple \{[^}]*stroke-width:calc\(var\(--ripple-w\)/);
+  // Thin means at most 1.5 px for a plain link and 2 px for the highlighted one.
+  const w = (name) => Number(css.match(new RegExp(`${name}:\s*([0-9.]+)px`))[1]);
+  assert.ok(w("--edge-w") <= 1.5 && w("--edge-w-hot") <= 2 && w("--ripple-w") <= 2.5 && w("--trail-w") <= 2.5);
+});
+
+test("forced-colours mode drops the dot pattern", () => {
+  assert.match(css, /@media \(forced-colors: active\) \{ #viewport \{ background: Canvas; \} \}/);
+});

package/bundles/codex/.codex/skills/frontend/flow-studio/src/chrome.ts

@@ -4,7 +4,7 @@
 import { el, on, type Ctx } from "./ctx.ts";
 import { esc } from "./model.ts";
 import { DASH, toneVar, cssId } from "./stateCss.ts";
-import { bucketOf, columnTitle, effectiveLinks, nodeStateId, nodeVisible } from "./rules.ts";
+import { bucketOf, columnTitle, effectiveLinks, nodeStateId, nodeVisible, stripHeads } from "./rules.ts";
 import { matches } from "./interact.ts";
 
 const DEFAULT_LABELS: Record<string, string> = {
@@ -34,16 +34,19 @@ export function install(ctx: Ctx): void {
 
   function buildStrip(): void {
     const box = els.strip;
+    // One cell per head column: a column that `continues` another counts into the cell before it.
+    const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
     box.style.display = model.columns.length ? "" : "none";
-    box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+    box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
     if (!box.firstChild) {
-      box.innerHTML = model.columns.map(c => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+      box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
     }
-    box.querySelectorAll<HTMLElement>(".lcell").forEach((cell, i) => {
-      cell.style.setProperty("--i", String(i));
+    box.querySelectorAll<HTMLElement>(".lcell").forEach((cell, cellIndex) => {
+      const i = cells[cellIndex]?.i ?? cellIndex;
+      cell.style.setProperty("--i", String(cellIndex));
       let tot = 0, good = 0, neutral = 0, gap = 0;
       for (const n of model.nodes) {
-        if (n.col !== i || n.kind === "chip") continue;
+        if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
         if (!visible(n.id)) continue;
         const w = Math.max(1, n.weight ?? 1);
         tot += w;

package/bundles/codex/.codex/skills/frontend/flow-studio/src/controls.ts

@@ -71,7 +71,7 @@ export function install(ctx: Ctx): void {
     const cols = els.cols;
     cols.style.display = model.columns.length ? "" : "none";
     if (!cols.firstChild) {
-      model.columns.forEach((c, i) => { const h = el("div", "hd"); h.textContent = (c.short ?? c.title).toUpperCase(); h.title = c.title; h.dataset.i = String(i); cols.appendChild(h); });
+      model.columns.forEach((c, i) => { const h = el("div", "hd"); h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase(); h.title = c.title; h.dataset.i = String(i); cols.appendChild(h); });
       let i = 0;
       while (i < model.columns.length) {
         const name = model.columns[i]?.phase;

package/bundles/codex/.codex/skills/frontend/flow-studio/src/model.test.ts

@@ -165,3 +165,11 @@ test("group containment validates ids, ownership, self-reference, and skips grou
   assert.ok(found.includes("contains-undefined"));
   assert.ok(found.includes("contains-duplicate"));
 });
+test("a column may continue the one before it", () => {
+  const m = base(); m.columns.push({ id: "c2", title: "B", width: 150, continues: true });
+  assert.deepEqual(codes(m), []);
+});
+test("the first column cannot continue a column that does not exist", () => {
+  const m = base(); m.columns[0]!.continues = true;
+  assert.ok(codes(m).includes("column-continues-first"));
+});

package/bundles/codex/.codex/skills/frontend/flow-studio/src/model.ts

@@ -16,7 +16,7 @@ export interface StateDef {
   motion: Motion;
   bucket: Bucket;
 }
-export interface ColumnDef { id: string; title: string; short?: string; width: number; phase?: string }
+export interface ColumnDef { id: string; title: string; short?: string; width: number; phase?: string; continues?: boolean }
 export interface LaneDef { id: string; title: string; badge?: string; badgeTone?: "ok" | "warn" | "muted"; note?: string; gap?: boolean }
 export interface NodeDef {
   id: string;
@@ -111,6 +111,7 @@ export function validateModel(input: unknown): Issue[] {
   if (!Array.isArray(m.lanes) || (m.layout !== "auto" && m.lanes.length === 0)) add("error", "lanes-missing", "lanes", "At least one lane is required.");
   if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
   const columns = Array.isArray(m.columns) ? m.columns : [];
+  if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
   const lanes = Array.isArray(m.lanes) ? m.lanes : [];
   const states = m.states && typeof m.states === "object" ? m.states : {};
   if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");

package/bundles/codex/.codex/skills/frontend/flow-studio/src/notes.ts

@@ -70,7 +70,7 @@ export function install(ctx: Ctx): void {
   const markdown = (): string => {
     const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
     for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-    out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+    out.push("", "## Columns", ...model.columns.filter(c => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
     out.push("", "## Lanes", ...model.lanes.map(l => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
     out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
     if (notes.length) out.push("", "## Notes", ...notes.map(n => `${n.id}. **${n.title}**: ${n.text}`));

package/bundles/codex/.codex/skills/frontend/flow-studio/src/rules.test.ts

@@ -1,7 +1,7 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import type { Model } from "./model.ts";
-import { baselineView, defaultView, nodeVisible, nodeStateId, linkVisible, linkStateId, isNew, isImproved, bucketOf, canonOf, effectiveLinks, initialCollapsed, columnTitle, toggleGroupState } from "./rules.ts";
+import { baselineView, defaultView, nodeVisible, nodeStateId, linkVisible, linkStateId, isNew, isImproved, bucketOf, canonOf, effectiveLinks, initialCollapsed, columnTitle, toggleGroupState, stripHeads } from "./rules.ts";
 
 const m = (): Model => ({
   version: 1,
@@ -133,3 +133,12 @@ test("toggleGroup selects a visible child on expansion and its group on collapse
   assert.equal(folded.collapsed.has("group"), true);
   assert.equal(toggleGroupState(mm, "full", starting, "missing"), null);
 });
+
+test("stripHeads: a continuing column joins the one before it", () => {
+  const mm = m();
+  mm.columns = [{ id: "a", title: "A", width: 100 }, { id: "p", title: "P", width: 100 }, { id: "p2", title: "P", width: 100, continues: true }, { id: "p3", title: "P", width: 100, continues: true }, { id: "z", title: "Z", width: 100 }];
+  assert.deepEqual(stripHeads(mm), [0, 1, 1, 1, 4]);
+});
+test("stripHeads: with no continuing column every column is its own head", () => {
+  assert.deepEqual(stripHeads(m()), [0, 1]);
+});

package/bundles/codex/.codex/skills/frontend/flow-studio/src/rules.ts

@@ -10,6 +10,12 @@ export const defaultView = (m: Model): string => (m.views?.find(v => v.default)
 /** A group that contains nodes starts folded unless it explicitly opts out. */
 export const initialCollapsed = (m: Model): Set<string> => new Set(m.nodes
   .filter(n => n.kind === "group" && n.contains && n.collapsed !== false).map(n => n.id));
+/** For each column, the index of the column whose header and strip cell it shares: itself, or (when it
+ *  `continues` another) the nearest earlier column that does not. */
+export const stripHeads = (m: Model): number[] => {
+  let head = 0;
+  return m.columns.map((c, i) => { if (!c.continues || i === 0) head = i; return head; });
+};
 export const columnTitle = (m: Model, n: NodeDef): string => n.col === undefined ? "" : m.columns[n.col]?.title ?? "";
 
 export function groupFor(m: Model, nodeId: string): NodeDef | undefined {

package/bundles/codex/.codex/skills/frontend/flow-studio/src/styles.css

@@ -1,7 +1,7 @@
 :root {
     --bg:#f6f8fa; --panel:#ffffff; --panel2:#f6f8fa; --edge:#d0d7de; --rule:#d8dee4; --fg:#1f2328; --muted:#59636e;
     --accent:#0969da; --accent-solid:#0969da; --ok:#1a7f37; --warn:#9a6700; --crit:#cf222e; --glow:rgba(9,105,218,.22);
-    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035);
+    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035); --dot:rgba(31,35,40,.18); --dot-size:1.2px; --dot-gap:24px; --edge-w:1.1px; --edge-w-hot:1.5px; --edge-w-play:1.6px; --trail-w:1.8px; --ripple-w:2px;
     --warn-bg:rgba(154,103,0,.10); --ok-bg:rgba(26,127,55,.10); --crit-bg:rgba(207,34,46,.08); --info-bg:rgba(9,105,218,.10);
     --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
   }
@@ -9,14 +9,14 @@
     :root:not([data-theme="light"]) {
       --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
       --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
-      --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+      --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04); --dot:rgba(255,255,255,.16);
       --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
     }
   }
   :root[data-theme="dark"] {
     --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
     --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
-    --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+    --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04); --dot:rgba(255,255,255,.16);
     --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
   }
   * { box-sizing:border-box; }
@@ -58,7 +58,7 @@
   .workspace { display:block; height:max(540px, calc(100vh - 232px)); border:1px solid var(--edge); background:var(--panel); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
   .canvaswrap { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
   #viewport { position:relative; flex:1; min-height:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none;
-    background:radial-gradient(760px 380px at 4% 0%, var(--glow), transparent 65%), radial-gradient(640px 320px at 98% 100%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px, var(--bg); }
+    background:radial-gradient(760px 380px at 4% 0%, var(--glow), transparent 65%), radial-gradient(640px 320px at 98% 100%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), radial-gradient(circle, var(--dot) var(--dot-size), transparent calc(var(--dot-size) + .5px)) 0 0 / var(--dot-gap) var(--dot-gap), var(--bg); }
   #viewport.panning { cursor:grabbing; } #viewport.hand .node { cursor:grab; }
   #world { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
   #viewport.anim #world, #viewport.anim .hd, #viewport.anim .ph { transition:transform .28s cubic-bezier(.2,.8,.2,1), left .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1); }
@@ -92,8 +92,8 @@
   .cor.up { right:6px; background:var(--info-bg); color:var(--accent); } .cor.meas { right:6px; background:var(--ok-bg); color:var(--ok); } .cor.up + .cor.meas { right:27px; }
   .node.hascor .t { padding-right:24px; } .node.hascor2 .t { padding-right:44px; }
   #viewport.lod1 .node .s, #viewport.lod1 .bandlabel .bn { display:none; } #viewport.lod2 .node .cor, #viewport.lod2 .node.ref .s { display:none; }
-  path.edge { fill:none; stroke-width:1.8; transition:opacity .35s; vector-effect:non-scaling-stroke; }
-  path.edge.hot { stroke:var(--accent); stroke-width:2.4; opacity:1; stroke-dasharray:6 8; animation:flowhot .9s linear infinite; filter:drop-shadow(0 0 5px var(--accent)); }
+  path.edge { fill:none; stroke-width:var(--edge-w); transition:opacity .35s; vector-effect:non-scaling-stroke; }
+  path.edge.hot { stroke:var(--accent); stroke-width:var(--edge-w-hot); opacity:1; stroke-dasharray:6 8; animation:flowhot .9s linear infinite; filter:drop-shadow(0 0 3px var(--accent)); }
   path.edge.dim { opacity:.07; filter:none; } path.edge.off { opacity:0; }
   .elabel { position:absolute; font-size:11px; padding:0 6px; border-radius:9px; background:var(--panel); border:1px solid var(--edge); color:var(--muted); white-space:nowrap; transform:translate(-50%,-50%); opacity:0; transition:opacity .35s; z-index:4; } .elabel.show { opacity:1; } .elabel.off { display:none; }
   #cols { position:absolute; left:0; right:0; top:0; height:44px; pointer-events:none; z-index:20; background:linear-gradient(var(--bg) 62%, transparent); }
@@ -146,8 +146,8 @@
   .node.lit { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow), 0 0 18px var(--glow), var(--shadow); }
   .node.sel { animation:selpulse 2.4s ease-out infinite; }
   .node.fail { border-color:var(--crit); background:var(--crit-bg); box-shadow:0 0 0 2px var(--crit-bg), 0 0 20px color-mix(in srgb, var(--crit) 45%, transparent); animation:failflash .9s ease-out 1; } .node.fail .s { color:var(--crit); font-weight:600; }
-  path.trail { fill:none; stroke:var(--accent); vector-effect:none; stroke-width:calc(3.4px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 6px var(--accent)); opacity:.95; }
-  path.ripple { fill:none; stroke:var(--crit); vector-effect:none; stroke-width:calc(3.6px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 7px var(--crit)); }
+  path.trail { fill:none; stroke:var(--accent); vector-effect:none; stroke-width:calc(var(--trail-w) / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 4px var(--accent)); opacity:.95; }
+  path.ripple { fill:none; stroke:var(--crit); vector-effect:none; stroke-width:calc(var(--ripple-w) / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 4px var(--crit)); }
   .intro .band { animation:fadein .6s both; } .intro .node { animation:rise .55s both; animation-delay:calc(var(--c, 0) * 60ms + 150ms); } .intro #edges { animation:fadein 1s .5s both; }
   .intro .lcell, .intro .tile { animation:rise .5s both; animation-delay:calc(var(--i, 0) * 55ms); }
   #viewport:focus-visible { outline-offset:-2px; }
@@ -171,7 +171,7 @@
   #pbChoices { display:flex; gap:5px; flex-wrap:wrap; } #pbChoices:empty { display:none; }
   #pbChoices .suggested { border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
   circle.token { fill:var(--accent); stroke:var(--panel); stroke-width:2; filter:drop-shadow(0 0 5px var(--accent)); pointer-events:none; }
-  path.edge.playing { stroke:var(--accent); stroke-width:3; filter:drop-shadow(0 0 5px var(--accent)); opacity:1; }
+  path.edge.playing { stroke:var(--accent); stroke-width:var(--edge-w-play); filter:drop-shadow(0 0 4px var(--accent)); opacity:1; }
   path.edge.visited { stroke:var(--accent); opacity:.7; }
   .node.playing { outline:2px solid var(--accent); outline-offset:2px; }
   /* The pulse runs only while the player really plays; a paused step keeps the plain outline. */
@@ -188,3 +188,4 @@
   .node.gateway:has(.metric-badge) .gw-title, .node.gateway.has-metrics .gw-title { width:45%; margin-right:42px; }
   .node .spark polyline, .metrics polyline { fill:none; stroke:var(--accent); stroke-width:1.5; }
   .metrics svg { max-width:100%; margin-top:8px; } .metric-range { display:flex; justify-content:space-between; width:300px; max-width:100%; font:10px var(--mono); color:var(--muted); }
+  @media (forced-colors: active) { #viewport { background: Canvas; } }

package/bundles/codex/.codex/skills/frontend/flow-studio/templates/engine.html

@@ -15,7 +15,7 @@
 <style>:root {
     --bg:#f6f8fa; --panel:#ffffff; --panel2:#f6f8fa; --edge:#d0d7de; --rule:#d8dee4; --fg:#1f2328; --muted:#59636e;
     --accent:#0969da; --accent-solid:#0969da; --ok:#1a7f37; --warn:#9a6700; --crit:#cf222e; --glow:rgba(9,105,218,.22);
-    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035);
+    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035); --dot:rgba(31,35,40,.18); --dot-size:1.2px; --dot-gap:24px; --edge-w:1.1px; --edge-w-hot:1.5px; --edge-w-play:1.6px; --trail-w:1.8px; --ripple-w:2px;
     --warn-bg:rgba(154,103,0,.10); --ok-bg:rgba(26,127,55,.10); --crit-bg:rgba(207,34,46,.08); --info-bg:rgba(9,105,218,.10);
     --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
   }
@@ -23,14 +23,14 @@
     :root:not([data-theme="light"]) {
       --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
       --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
-      --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+      --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04); --dot:rgba(255,255,255,.16);
       --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
     }
   }
   :root[data-theme="dark"] {
     --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
     --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
-    --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+    --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04); --dot:rgba(255,255,255,.16);
     --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
   }
   * { box-sizing:border-box; }
@@ -72,7 +72,7 @@
   .workspace { display:block; height:max(540px, calc(100vh - 232px)); border:1px solid var(--edge); background:var(--panel); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
   .canvaswrap { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
   #viewport { position:relative; flex:1; min-height:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none;
-    background:radial-gradient(760px 380px at 4% 0%, var(--glow), transparent 65%), radial-gradient(640px 320px at 98% 100%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px, var(--bg); }
+    background:radial-gradient(760px 380px at 4% 0%, var(--glow), transparent 65%), radial-gradient(640px 320px at 98% 100%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), radial-gradient(circle, var(--dot) var(--dot-size), transparent calc(var(--dot-size) + .5px)) 0 0 / var(--dot-gap) var(--dot-gap), var(--bg); }
   #viewport.panning { cursor:grabbing; } #viewport.hand .node { cursor:grab; }
   #world { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
   #viewport.anim #world, #viewport.anim .hd, #viewport.anim .ph { transition:transform .28s cubic-bezier(.2,.8,.2,1), left .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1); }
@@ -106,8 +106,8 @@
   .cor.up { right:6px; background:var(--info-bg); color:var(--accent); } .cor.meas { right:6px; background:var(--ok-bg); color:var(--ok); } .cor.up + .cor.meas { right:27px; }
   .node.hascor .t { padding-right:24px; } .node.hascor2 .t { padding-right:44px; }
   #viewport.lod1 .node .s, #viewport.lod1 .bandlabel .bn { display:none; } #viewport.lod2 .node .cor, #viewport.lod2 .node.ref .s { display:none; }
-  path.edge { fill:none; stroke-width:1.8; transition:opacity .35s; vector-effect:non-scaling-stroke; }
-  path.edge.hot { stroke:var(--accent); stroke-width:2.4; opacity:1; stroke-dasharray:6 8; animation:flowhot .9s linear infinite; filter:drop-shadow(0 0 5px var(--accent)); }
+  path.edge { fill:none; stroke-width:var(--edge-w); transition:opacity .35s; vector-effect:non-scaling-stroke; }
+  path.edge.hot { stroke:var(--accent); stroke-width:var(--edge-w-hot); opacity:1; stroke-dasharray:6 8; animation:flowhot .9s linear infinite; filter:drop-shadow(0 0 3px var(--accent)); }
   path.edge.dim { opacity:.07; filter:none; } path.edge.off { opacity:0; }
   .elabel { position:absolute; font-size:11px; padding:0 6px; border-radius:9px; background:var(--panel); border:1px solid var(--edge); color:var(--muted); white-space:nowrap; transform:translate(-50%,-50%); opacity:0; transition:opacity .35s; z-index:4; } .elabel.show { opacity:1; } .elabel.off { display:none; }
   #cols { position:absolute; left:0; right:0; top:0; height:44px; pointer-events:none; z-index:20; background:linear-gradient(var(--bg) 62%, transparent); }
@@ -160,8 +160,8 @@
   .node.lit { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow), 0 0 18px var(--glow), var(--shadow); }
   .node.sel { animation:selpulse 2.4s ease-out infinite; }
   .node.fail { border-color:var(--crit); background:var(--crit-bg); box-shadow:0 0 0 2px var(--crit-bg), 0 0 20px color-mix(in srgb, var(--crit) 45%, transparent); animation:failflash .9s ease-out 1; } .node.fail .s { color:var(--crit); font-weight:600; }
-  path.trail { fill:none; stroke:var(--accent); vector-effect:none; stroke-width:calc(3.4px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 6px var(--accent)); opacity:.95; }
-  path.ripple { fill:none; stroke:var(--crit); vector-effect:none; stroke-width:calc(3.6px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 7px var(--crit)); }
+  path.trail { fill:none; stroke:var(--accent); vector-effect:none; stroke-width:calc(var(--trail-w) / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 4px var(--accent)); opacity:.95; }
+  path.ripple { fill:none; stroke:var(--crit); vector-effect:none; stroke-width:calc(var(--ripple-w) / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 4px var(--crit)); }
   .intro .band { animation:fadein .6s both; } .intro .node { animation:rise .55s both; animation-delay:calc(var(--c, 0) * 60ms + 150ms); } .intro #edges { animation:fadein 1s .5s both; }
   .intro .lcell, .intro .tile { animation:rise .5s both; animation-delay:calc(var(--i, 0) * 55ms); }
   #viewport:focus-visible { outline-offset:-2px; }
@@ -185,7 +185,7 @@
   #pbChoices { display:flex; gap:5px; flex-wrap:wrap; } #pbChoices:empty { display:none; }
   #pbChoices .suggested { border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
   circle.token { fill:var(--accent); stroke:var(--panel); stroke-width:2; filter:drop-shadow(0 0 5px var(--accent)); pointer-events:none; }
-  path.edge.playing { stroke:var(--accent); stroke-width:3; filter:drop-shadow(0 0 5px var(--accent)); opacity:1; }
+  path.edge.playing { stroke:var(--accent); stroke-width:var(--edge-w-play); filter:drop-shadow(0 0 4px var(--accent)); opacity:1; }
   path.edge.visited { stroke:var(--accent); opacity:.7; }
   .node.playing { outline:2px solid var(--accent); outline-offset:2px; }
   /* The pulse runs only while the player really plays; a paused step keeps the plain outline. */
@@ -202,6 +202,7 @@
   .node.gateway:has(.metric-badge) .gw-title, .node.gateway.has-metrics .gw-title { width:45%; margin-right:42px; }
   .node .spark polyline, .metrics polyline { fill:none; stroke:var(--accent); stroke-width:1.5; }
   .metrics svg { max-width:100%; margin-top:8px; } .metric-range { display:flex; justify-content:space-between; width:300px; max-width:100%; font:10px var(--mono); color:var(--muted); }
+  @media (forced-colors: active) { #viewport { background: Canvas; } }
 </style>
 </head>
 <body>
@@ -285,6 +286,7 @@
     if (!Array.isArray(m.lanes) || m.layout !== "auto" && m.lanes.length === 0) add("error", "lanes-missing", "lanes", "At least one lane is required.");
     if (!m.states || typeof m.states !== "object" || Object.keys(m.states).length === 0) add("error", "states-missing", "states", "At least one state is required.");
     const columns = Array.isArray(m.columns) ? m.columns : [];
+    if (columns[0]?.continues) add("error", "column-continues-first", "columns[0]", "The first column cannot continue a column before it.");
     const lanes = Array.isArray(m.lanes) ? m.lanes : [];
     const states = m.states && typeof m.states === "object" ? m.states : {};
     if (!m.meta || typeof m.meta !== "object" || typeof m.meta.title !== "string") add("error", "meta-missing", "meta", "meta with a title is required.");
@@ -590,6 +592,13 @@
   var baselineView = (m) => m.views?.[0]?.id ?? "all";
   var defaultView = (m) => (m.views?.find((v) => v.default) ?? m.views?.[0])?.id ?? "all";
   var initialCollapsed = (m) => new Set(m.nodes.filter((n) => n.kind === "group" && n.contains && n.collapsed !== false).map((n) => n.id));
+  var stripHeads = (m) => {
+    let head = 0;
+    return m.columns.map((c, i) => {
+      if (!c.continues || i === 0) head = i;
+      return head;
+    });
+  };
   var columnTitle = (m, n) => n.col === void 0 ? "" : m.columns[n.col]?.title ?? "";
   function groupFor(m, nodeId) {
     return m.nodes.find((n) => n.kind === "group" && n.contains?.includes(nodeId));
@@ -1414,7 +1423,7 @@
       if (!cols.firstChild) {
         model.columns.forEach((c, i2) => {
           const h = el("div", "hd");
-          h.textContent = (c.short ?? c.title).toUpperCase();
+          h.textContent = c.continues ? "" : (c.short ?? c.title).toUpperCase();
           h.title = c.title;
           h.dataset.i = String(i2);
           cols.appendChild(h);
@@ -1800,16 +1809,18 @@
     }
     function buildStrip() {
       const box = els.strip;
+      const heads = stripHeads(model), cells = model.columns.map((c, i) => ({ c, i })).filter(({ i }) => heads[i] === i);
       box.style.display = model.columns.length ? "" : "none";
-      box.style.gridTemplateColumns = `repeat(${Math.max(1, model.columns.length)}, minmax(0, 1fr))`;
+      box.style.gridTemplateColumns = `repeat(${Math.max(1, cells.length)}, minmax(0, 1fr))`;
       if (!box.firstChild) {
-        box.innerHTML = model.columns.map((c) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
+        box.innerHTML = cells.map(({ c }) => `<div class="lcell"><div class="ln">${esc(c.title)}</div><div class="lb"><i class="good"></i><i class="neutral"></i><i class="gap"></i></div><div class="lv"></div></div>`).join("");
       }
-      box.querySelectorAll(".lcell").forEach((cell, i) => {
-        cell.style.setProperty("--i", String(i));
+      box.querySelectorAll(".lcell").forEach((cell, cellIndex) => {
+        const i = cells[cellIndex]?.i ?? cellIndex;
+        cell.style.setProperty("--i", String(cellIndex));
         let tot = 0, good = 0, neutral = 0, gap = 0;
         for (const n of model.nodes) {
-          if (n.col !== i || n.kind === "chip") continue;
+          if (heads[n.col ?? -1] !== i || n.kind === "chip") continue;
           if (!visible(n.id)) continue;
           const w = Math.max(1, n.weight ?? 1);
           tot += w;
@@ -2028,7 +2039,7 @@
     const markdown = () => {
       const out = [`# ${model.meta.title}`, "", model.meta.help, "", `As of ${model.meta.asOf}. Source: ${model.meta.source}`, "", "## States"];
       for (const [id, s] of Object.entries(model.states)) out.push(`- **${s.word}** (${id}): tone ${s.tone}, border ${s.border}, link ${s.edge}, motion ${s.motion}, bucket ${s.bucket}`);
-      out.push("", "## Columns", ...model.columns.map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
+      out.push("", "## Columns", ...model.columns.filter((c) => !c.continues).map((c, i) => `${i + 1}. ${c.title}${c.phase ? ` (${c.phase})` : ""}`));
       out.push("", "## Lanes", ...model.lanes.map((l) => `- ${l.title}${l.badge ? ` [${l.badge}]` : ""}${l.note ? `: ${l.note}` : ""}`));
       out.push("", `## Size`, `${model.nodes.length} nodes, ${model.links.length} links.`);
       if (notes.length) out.push("", "## Notes", ...notes.map((n) => `${n.id}. **${n.title}**: ${n.text}`));

package/bundles/codex/.codex/skills/frontend/flow-studio/templates/flow-studio.css

@@ -1,7 +1,7 @@
 :root {
     --bg:#f6f8fa; --panel:#ffffff; --panel2:#f6f8fa; --edge:#d0d7de; --rule:#d8dee4; --fg:#1f2328; --muted:#59636e;
     --accent:#0969da; --accent-solid:#0969da; --ok:#1a7f37; --warn:#9a6700; --crit:#cf222e; --glow:rgba(9,105,218,.22);
-    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035);
+    --up:#0a7ea4; --down:#8250df; --shadow:0 1px 0 rgba(31,35,40,.04), 0 6px 18px rgba(31,35,40,.08); --grid:rgba(31,35,40,.035); --dot:rgba(31,35,40,.18); --dot-size:1.2px; --dot-gap:24px; --edge-w:1.1px; --edge-w-hot:1.5px; --edge-w-play:1.6px; --trail-w:1.8px; --ripple-w:2px;
     --warn-bg:rgba(154,103,0,.10); --ok-bg:rgba(26,127,55,.10); --crit-bg:rgba(207,34,46,.08); --info-bg:rgba(9,105,218,.10);
     --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
   }
@@ -9,14 +9,14 @@
     :root:not([data-theme="light"]) {
       --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
       --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
-      --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+      --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04); --dot:rgba(255,255,255,.16);
       --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
     }
   }
   :root[data-theme="dark"] {
     --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --edge:#30363d; --rule:#2b323a; --fg:#e6edf3; --muted:#9198a1;
     --accent:#4493f8; --accent-solid:#1f6feb; --ok:#3fb950; --warn:#d29922; --crit:#f85149; --glow:rgba(68,147,248,.35);
-    --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04);
+    --up:#6fcbe6; --down:#d0a0ee; --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --grid:rgba(255,255,255,.04); --dot:rgba(255,255,255,.16);
     --warn-bg:rgba(210,153,34,.14); --ok-bg:rgba(63,185,80,.12); --crit-bg:rgba(248,81,73,.12); --info-bg:rgba(68,147,248,.14);
   }
   * { box-sizing:border-box; }
@@ -58,7 +58,7 @@
   .workspace { display:block; height:max(540px, calc(100vh - 232px)); border:1px solid var(--edge); background:var(--panel); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
   .canvaswrap { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
   #viewport { position:relative; flex:1; min-height:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none;
-    background:radial-gradient(760px 380px at 4% 0%, var(--glow), transparent 65%), radial-gradient(640px 320px at 98% 100%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px, var(--bg); }
+    background:radial-gradient(760px 380px at 4% 0%, var(--glow), transparent 65%), radial-gradient(640px 320px at 98% 100%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), radial-gradient(circle, var(--dot) var(--dot-size), transparent calc(var(--dot-size) + .5px)) 0 0 / var(--dot-gap) var(--dot-gap), var(--bg); }
   #viewport.panning { cursor:grabbing; } #viewport.hand .node { cursor:grab; }
   #world { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
   #viewport.anim #world, #viewport.anim .hd, #viewport.anim .ph { transition:transform .28s cubic-bezier(.2,.8,.2,1), left .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1); }
@@ -92,8 +92,8 @@
   .cor.up { right:6px; background:var(--info-bg); color:var(--accent); } .cor.meas { right:6px; background:var(--ok-bg); color:var(--ok); } .cor.up + .cor.meas { right:27px; }
   .node.hascor .t { padding-right:24px; } .node.hascor2 .t { padding-right:44px; }
   #viewport.lod1 .node .s, #viewport.lod1 .bandlabel .bn { display:none; } #viewport.lod2 .node .cor, #viewport.lod2 .node.ref .s { display:none; }
-  path.edge { fill:none; stroke-width:1.8; transition:opacity .35s; vector-effect:non-scaling-stroke; }
-  path.edge.hot { stroke:var(--accent); stroke-width:2.4; opacity:1; stroke-dasharray:6 8; animation:flowhot .9s linear infinite; filter:drop-shadow(0 0 5px var(--accent)); }
+  path.edge { fill:none; stroke-width:var(--edge-w); transition:opacity .35s; vector-effect:non-scaling-stroke; }
+  path.edge.hot { stroke:var(--accent); stroke-width:var(--edge-w-hot); opacity:1; stroke-dasharray:6 8; animation:flowhot .9s linear infinite; filter:drop-shadow(0 0 3px var(--accent)); }
   path.edge.dim { opacity:.07; filter:none; } path.edge.off { opacity:0; }
   .elabel { position:absolute; font-size:11px; padding:0 6px; border-radius:9px; background:var(--panel); border:1px solid var(--edge); color:var(--muted); white-space:nowrap; transform:translate(-50%,-50%); opacity:0; transition:opacity .35s; z-index:4; } .elabel.show { opacity:1; } .elabel.off { display:none; }
   #cols { position:absolute; left:0; right:0; top:0; height:44px; pointer-events:none; z-index:20; background:linear-gradient(var(--bg) 62%, transparent); }
@@ -146,8 +146,8 @@
   .node.lit { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow), 0 0 18px var(--glow), var(--shadow); }
   .node.sel { animation:selpulse 2.4s ease-out infinite; }
   .node.fail { border-color:var(--crit); background:var(--crit-bg); box-shadow:0 0 0 2px var(--crit-bg), 0 0 20px color-mix(in srgb, var(--crit) 45%, transparent); animation:failflash .9s ease-out 1; } .node.fail .s { color:var(--crit); font-weight:600; }
-  path.trail { fill:none; stroke:var(--accent); vector-effect:none; stroke-width:calc(3.4px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 6px var(--accent)); opacity:.95; }
-  path.ripple { fill:none; stroke:var(--crit); vector-effect:none; stroke-width:calc(3.6px / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 7px var(--crit)); }
+  path.trail { fill:none; stroke:var(--accent); vector-effect:none; stroke-width:calc(var(--trail-w) / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 4px var(--accent)); opacity:.95; }
+  path.ripple { fill:none; stroke:var(--crit); vector-effect:none; stroke-width:calc(var(--ripple-w) / var(--k, 1)); stroke-linecap:round; filter:drop-shadow(0 0 4px var(--crit)); }
   .intro .band { animation:fadein .6s both; } .intro .node { animation:rise .55s both; animation-delay:calc(var(--c, 0) * 60ms + 150ms); } .intro #edges { animation:fadein 1s .5s both; }
   .intro .lcell, .intro .tile { animation:rise .5s both; animation-delay:calc(var(--i, 0) * 55ms); }
   #viewport:focus-visible { outline-offset:-2px; }
@@ -171,7 +171,7 @@
   #pbChoices { display:flex; gap:5px; flex-wrap:wrap; } #pbChoices:empty { display:none; }
   #pbChoices .suggested { border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
   circle.token { fill:var(--accent); stroke:var(--panel); stroke-width:2; filter:drop-shadow(0 0 5px var(--accent)); pointer-events:none; }
-  path.edge.playing { stroke:var(--accent); stroke-width:3; filter:drop-shadow(0 0 5px var(--accent)); opacity:1; }
+  path.edge.playing { stroke:var(--accent); stroke-width:var(--edge-w-play); filter:drop-shadow(0 0 4px var(--accent)); opacity:1; }
   path.edge.visited { stroke:var(--accent); opacity:.7; }
   .node.playing { outline:2px solid var(--accent); outline-offset:2px; }
   /* The pulse runs only while the player really plays; a paused step keeps the plain outline. */
@@ -188,3 +188,4 @@
   .node.gateway:has(.metric-badge) .gw-title, .node.gateway.has-metrics .gw-title { width:45%; margin-right:42px; }
   .node .spark polyline, .metrics polyline { fill:none; stroke:var(--accent); stroke-width:1.5; }
   .metrics svg { max-width:100%; margin-top:8px; } .metric-range { display:flex; justify-content:space-between; width:300px; max-width:100%; font:10px var(--mono); color:var(--muted); }
+  @media (forced-colors: active) { #viewport { background: Canvas; } }