@m0saic/templates 0.2.0

package/dist/m0saic/dsl-tutorial/v1/pipeline/cursor.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ============================================================================
+ * dsl-tutorial — geometry cursor projection
+ * ============================================================================
+ *
+ * The cursor is the thin orange box that sits at the current X/Y/W/H bounds and
+ * LEADS the parse: it jumps + resizes the instant the geometry changes (a split
+ * shrinks it to the first child, a comma slides it to the next sibling, a close
+ * grows it back to the parent), and the cell then emits into it.
+ *
+ * The cursor SNAPS per step — it never interpolates between two positions — so
+ * it's modelled as a list of enable-GATED rects, one per distinct position, each
+ * lit for its time window. The canvas panel draws each as a thin inline-mask
+ * RING (depth-cheap, reuses the split-overlay machinery); only one is ever
+ * visible at a time. This replaces the old per-frame `geq` expression: `geq`
+ * re-evaluates per PIXEL per FRAME (multiplying render cost by pixels×frames) to
+ * solve a continuous-motion problem the cursor doesn't have. We already compute
+ * every cursor rect in `buildSteps` — baking them as rects is just emitting what
+ * we know, and it's near-free at render time.
+ *
+ * Rects are FRACTIONS (0..1) of the canvas; the canvas panel multiplies by its
+ * own pixel dims, so they're resolution-independent (the panel renders at a slot
+ * size that differs from the parse size).
+ *
+ * Consecutive steps that don't move the cursor collapse into one rect (its
+ * window spans both) — fewer overlay layers, which keeps dense layouts further
+ * from the ~25 overlay-depth mask-drop ceiling.
+ * ============================================================================
+ */
+import type { Step } from "./buildSteps";
+import type { Timing } from "./timing";
+/** One cursor position, lit for `[activeStartSec, activeEndSec)`. */
+export type CursorRect = {
+    /** Bounds as fractions (0..1) of the whole canvas. */
+    xFrac: number;
+    yFrac: number;
+    wFrac: number;
+    hFrac: number;
+    activeStartSec: number;
+    activeEndSec: number;
+};
+/**
+ * Build the enable-gated cursor rects from the step cursor rects. One entry per
+ * DISTINCT position; each spans from its first step's start to the next distinct
+ * position's start (the last runs to the end of the timeline). Deterministic.
+ */
+export declare function buildCursorRects(steps: Step[], timing: Timing, parseW: number, parseH: number): CursorRect[];

package/dist/m0saic/dsl-tutorial/v1/pipeline/cursor.js

@@ -0,0 +1,64 @@
+"use strict";
+/**
+ * ============================================================================
+ * dsl-tutorial — geometry cursor projection
+ * ============================================================================
+ *
+ * The cursor is the thin orange box that sits at the current X/Y/W/H bounds and
+ * LEADS the parse: it jumps + resizes the instant the geometry changes (a split
+ * shrinks it to the first child, a comma slides it to the next sibling, a close
+ * grows it back to the parent), and the cell then emits into it.
+ *
+ * The cursor SNAPS per step — it never interpolates between two positions — so
+ * it's modelled as a list of enable-GATED rects, one per distinct position, each
+ * lit for its time window. The canvas panel draws each as a thin inline-mask
+ * RING (depth-cheap, reuses the split-overlay machinery); only one is ever
+ * visible at a time. This replaces the old per-frame `geq` expression: `geq`
+ * re-evaluates per PIXEL per FRAME (multiplying render cost by pixels×frames) to
+ * solve a continuous-motion problem the cursor doesn't have. We already compute
+ * every cursor rect in `buildSteps` — baking them as rects is just emitting what
+ * we know, and it's near-free at render time.
+ *
+ * Rects are FRACTIONS (0..1) of the canvas; the canvas panel multiplies by its
+ * own pixel dims, so they're resolution-independent (the panel renders at a slot
+ * size that differs from the parse size).
+ *
+ * Consecutive steps that don't move the cursor collapse into one rect (its
+ * window spans both) — fewer overlay layers, which keeps dense layouts further
+ * from the ~25 overlay-depth mask-drop ceiling.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildCursorRects = buildCursorRects;
+const near = (a, b) => Math.abs(a - b) < 1e-6;
+/**
+ * Build the enable-gated cursor rects from the step cursor rects. One entry per
+ * DISTINCT position; each spans from its first step's start to the next distinct
+ * position's start (the last runs to the end of the timeline). Deterministic.
+ */
+function buildCursorRects(steps, timing, parseW, parseH) {
+    if (steps.length === 0 || parseW <= 0 || parseH <= 0)
+        return [];
+    // Collapse consecutive identical positions into one window.
+    const runs = [];
+    for (const s of steps) {
+        const x = s.rect.x / parseW;
+        const y = s.rect.y / parseH;
+        const w = s.rect.width / parseW;
+        const h = s.rect.height / parseH;
+        const last = runs[runs.length - 1];
+        if (last && near(last.x, x) && near(last.y, y) && near(last.w, w) && near(last.h, h)) {
+            continue; // same position — its window extends through this step
+        }
+        runs.push({ x, y, w, h, start: timing.stepStartSec(s.index) });
+    }
+    const endSec = timing.durationMs / 1000;
+    return runs.map((r, i) => ({
+        xFrac: r.x,
+        yFrac: r.y,
+        wFrac: r.w,
+        hFrac: r.h,
+        activeStartSec: r.start,
+        activeEndSec: i + 1 < runs.length ? runs[i + 1].start : endSec,
+    }));
+}

package/dist/m0saic/dsl-tutorial/v1/pipeline/dslString.d.ts

@@ -0,0 +1,61 @@
+/**
+ * ============================================================================
+ * dsl-tutorial — live DSL-string projection (syntax + caret + narration)
+ * ============================================================================
+ *
+ * Projects the deterministic `Step[]` + the m0 source string into what the
+ * DSL-string panel renders against the GLOBAL clock:
+ *
+ *  - **glyphs** — every character of the m0 string classified into a syntax
+ *    token type (`count` / `bracket` / `comma` / `passthrough` / `frame` /
+ *    `base`), so the panel can colour each one from `theme.syntax`. Classified
+ *    lexically with the same rule the parser uses: a digit run followed by `(` or
+ *    `[` is a split COUNT; a lone `0` is a PASSTHROUGH; any other digit run / `F`
+ *    is a leaf FRAME.
+ *
+ *  - **caretEnable** — one filter-context enable expr per glyph: nonzero exactly
+ *    while the parse cursor sits on that character (the union of the step windows
+ *    whose `charIndex` lands there). Drives the stepping caret + active-char wash.
+ *    These are SIBLING cells in the panel (aligned 1:1 with the glyph strip), so
+ *    no overlay-depth stacking.
+ *
+ *  - **narration** — enable-gated text variants (one per DISTINCT narration line,
+ *    merged over its step windows) for the banner that reads out what each symbol
+ *    does. Only the active line is lit.
+ *
+ * All exprs are FILTER context (raw commas). Deterministic — pure function of the
+ * string + timing.
+ * ============================================================================
+ */
+import type { Step } from "./buildSteps";
+import type { Timing } from "./timing";
+import type { ChipVariant } from "./inspector";
+import type { DslSyntaxTheme } from "../theme/tokens";
+export type SyntaxType = keyof DslSyntaxTheme;
+export type Glyph = {
+    ch: string;
+    type: SyntaxType;
+};
+/** One step's caret position in the string + its time window. The panel needs
+ *  the raw (charIndex, window) — not just per-glyph enables — to compute the
+ *  scroll offset + screen-slot caret when a long string scrolls (the scroll math
+ *  depends on the panel's pixel width, which only the panel knows). */
+export type CaretStep = {
+    charIndex: number;
+    startSec: number;
+    endSec: number;
+};
+export type DslStringProjection = {
+    /** The m0 string, one classified glyph per character (display order). */
+    glyphs: Glyph[];
+    /** Per-glyph filter-context enable expr (nonzero while the cursor is here; "" = never). */
+    caretEnable: string[];
+    /** Raw per-step caret timeline (drives the scrolling-window math). */
+    caretSteps: CaretStep[];
+    /** Enable-gated narration lines (one lit at a time). */
+    narration: ChipVariant[];
+};
+/** Classify every character of an m0 string into its syntax token type. */
+export declare function classifyGlyphs(m0: string): Glyph[];
+/** Build the full DSL-string projection (glyphs + caret enables + narration). */
+export declare function buildDslStringProjection(steps: Step[], timing: Timing, m0: string): DslStringProjection;

package/dist/m0saic/dsl-tutorial/v1/pipeline/dslString.js

@@ -0,0 +1,135 @@
+"use strict";
+/**
+ * ============================================================================
+ * dsl-tutorial — live DSL-string projection (syntax + caret + narration)
+ * ============================================================================
+ *
+ * Projects the deterministic `Step[]` + the m0 source string into what the
+ * DSL-string panel renders against the GLOBAL clock:
+ *
+ *  - **glyphs** — every character of the m0 string classified into a syntax
+ *    token type (`count` / `bracket` / `comma` / `passthrough` / `frame` /
+ *    `base`), so the panel can colour each one from `theme.syntax`. Classified
+ *    lexically with the same rule the parser uses: a digit run followed by `(` or
+ *    `[` is a split COUNT; a lone `0` is a PASSTHROUGH; any other digit run / `F`
+ *    is a leaf FRAME.
+ *
+ *  - **caretEnable** — one filter-context enable expr per glyph: nonzero exactly
+ *    while the parse cursor sits on that character (the union of the step windows
+ *    whose `charIndex` lands there). Drives the stepping caret + active-char wash.
+ *    These are SIBLING cells in the panel (aligned 1:1 with the glyph strip), so
+ *    no overlay-depth stacking.
+ *
+ *  - **narration** — enable-gated text variants (one per DISTINCT narration line,
+ *    merged over its step windows) for the banner that reads out what each symbol
+ *    does. Only the active line is lit.
+ *
+ * All exprs are FILTER context (raw commas). Deterministic — pure function of the
+ * string + timing.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classifyGlyphs = classifyGlyphs;
+exports.buildDslStringProjection = buildDslStringProjection;
+const f3 = (n) => n.toFixed(3);
+const isDigit = (c) => c >= "0" && c <= "9";
+/** Classify every character of an m0 string into its syntax token type. */
+function classifyGlyphs(m0) {
+    const out = [];
+    const n = m0.length;
+    let i = 0;
+    while (i < n) {
+        const ch = m0[i];
+        if (isDigit(ch)) {
+            let j = i;
+            while (j < n && isDigit(m0[j]))
+                j++;
+            const run = m0.slice(i, j);
+            const next = j < n ? m0[j] : "";
+            // A digit run that opens a split (`2(`, `3[`) is a COUNT; a lone `0` is a
+            // PASSTHROUGH; anything else (`1`, `2`…) standing alone is a leaf FRAME.
+            const type = next === "(" || next === "[" ? "count" : run === "0" ? "passthrough" : "frame";
+            for (let k = i; k < j; k++)
+                out.push({ ch: m0[k], type });
+            i = j;
+            continue;
+        }
+        let type;
+        if (ch === "(" || ch === ")" || ch === "[" || ch === "]" || ch === "{" || ch === "}")
+            type = "bracket";
+        else if (ch === ",")
+            type = "comma";
+        else if (ch === "-" || ch === ">")
+            type = "passthrough";
+        else if (ch === "F")
+            type = "frame";
+        else
+            type = "base";
+        out.push({ ch, type });
+        i++;
+    }
+    return out;
+}
+/** Raw per-step caret timeline (charIndex + window) for the scrolling math. */
+function caretStepList(steps, timing) {
+    return steps.map((s) => {
+        const a = timing.stepStartSec(s.index);
+        return { charIndex: s.charIndex, startSec: a, endSec: a + timing.stepDurSec };
+    });
+}
+/** Per-glyph enable expr — the union of step windows whose cursor sits there. */
+function caretEnableExprs(steps, timing, count) {
+    const windows = Array.from({ length: count }, () => []);
+    for (const s of steps) {
+        const i = s.charIndex;
+        if (i < 0 || i >= count)
+            continue;
+        const a = timing.stepStartSec(s.index);
+        const b = a + timing.stepDurSec;
+        const list = windows[i];
+        const last = list[list.length - 1];
+        if (last && Math.abs(last.b - a) < 1e-6)
+            last.b = b; // contiguous → extend
+        else
+            list.push({ a, b });
+    }
+    return windows.map((list) => list.length === 0 ? "" : list.map((r) => `(gte(t,${f3(r.a)})*lt(t,${f3(r.b)}))`).join("+"));
+}
+/** Merge consecutive identical narration lines into enable-gated variants. The
+ *  last line holds through the trail (the closing narration stays on screen for
+ *  the end hold, like the canvas + inspector values). */
+function narrationVariants(steps, timing) {
+    const lastIndex = steps.length > 0 ? steps[0].total : 0;
+    const endT = timing.durationMs / 1000;
+    const ranges = new Map();
+    const order = [];
+    for (const s of steps) {
+        const label = s.narration || " ";
+        const a = timing.stepStartSec(s.index);
+        const b = s.index === lastIndex ? Math.max(a + timing.stepDurSec, endT) : a + timing.stepDurSec;
+        if (!ranges.has(label)) {
+            ranges.set(label, []);
+            order.push(label);
+        }
+        const list = ranges.get(label);
+        const last = list[list.length - 1];
+        if (last && Math.abs(last.b - a) < 1e-6)
+            last.b = b;
+        else
+            list.push({ a, b });
+    }
+    return order.map((label) => ({
+        label,
+        enableExpr: ranges.get(label).map((r) => `(gte(t,${f3(r.a)})*lt(t,${f3(r.b)}))`).join("+"),
+    }));
+}
+/** Build the full DSL-string projection (glyphs + caret enables + narration). */
+function buildDslStringProjection(steps, timing, m0) {
+    const glyphs = classifyGlyphs(m0);
+    return {
+        glyphs,
+        caretEnable: caretEnableExprs(steps, timing, glyphs.length),
+        caretSteps: caretStepList(steps, timing),
+        narration: narrationVariants(steps, timing),
+    };
+}

package/dist/m0saic/dsl-tutorial/v1/pipeline/inspector.d.ts

@@ -0,0 +1,62 @@
+/**
+ * ============================================================================
+ * dsl-tutorial — inspector projection (live X/Y/W/H/Z + Kind/Status)
+ * ============================================================================
+ *
+ * Projects the deterministic `Step[]` into the ffmpeg expressions the inspector
+ * panel renders against the GLOBAL clock — so the values mutate in lockstep with
+ * the geometry walk, the camera, and the step pill (no local clock).
+ *
+ * Two depth-safe mechanisms (both keep the panel well under the ~25 overlay
+ * mask-drop limit):
+ *
+ *  - **Numeric fields (X/Y/W/H/Z)** — ONE `drawtext` expr per field: a
+ *    piecewise-constant `%{eif:…}` over `t` that prints the active node's value.
+ *    No per-step overlay stacking (which would blow the depth limit on a big
+ *    walk); a single text layer that "reads out" the value as the parser moves.
+ *
+ *  - **Kind / Status chips** — a handful of enable-gated text variants (one per
+ *    DISTINCT kind / status), each lit over the union of its step windows. Only
+ *    a few distinct values, so depth stays ~3.
+ *
+ * Plus a git-diff "just changed" PULSE per field: a soft alpha expr (filter
+ * context) that flashes once on each step where that field's value mutated
+ * (`before != after`), decaying over the step — the cue that a value is "new".
+ *
+ * Escaping: `drawtext` `%{eif:…}` text needs commas escaped as `\,` and colons
+ * as `\:` (the `eifText` wrapper does this). Overlay `alpha`/`enable` exprs are
+ * FILTER context — raw commas. The two never mix.
+ * ============================================================================
+ */
+import type { Step, InspectorField } from "./buildSteps";
+import type { Timing } from "./timing";
+export type InspectorFieldExpr = {
+    name: InspectorField;
+    /** Value variants: one per DISTINCT value, each gated over the union of the
+     *  windows where the field holds that value. The panel renders these as
+     *  enable-gated LAYERS of one video text source (the narration-collapse idiom).
+     *  Replaces the old single `%{eif:…}` expression, which hit drawtext's ~80-
+     *  boundary parser ceiling on dense grids (10×10 → ~100 changes → crash). */
+    valueVariants: ChipVariant[];
+    /** Filter-context ENABLE expr (nonzero = the "just changed" pulse is lit) — the
+     *  union of the step windows where this field mutated. Drives the pulse tile's
+     *  `overlay.enable` (a per-frame gate on the overlay), NOT `overlay.alpha`: a
+     *  time-varying alpha becomes a per-PIXEL `geq`, and 8 fields × a dense-grid
+     *  alpha expr overflowed the inspector filtergraph ("Cannot allocate memory").
+     *  Enable gates the whole tile per frame — no geq — at a fixed tile alpha. */
+    changeEnable: string;
+};
+export type ChipVariant = {
+    label: string;
+    /** Filter-context enable expr (nonzero = shown). */
+    enableExpr: string;
+};
+export type InspectorProjection = {
+    fields: InspectorFieldExpr[];
+    kindVariants: ChipVariant[];
+    statusVariants: ChipVariant[];
+    /** "cols" / "rows" enable windows for the split N refers to — tags the arity. */
+    axisVariants: ChipVariant[];
+};
+/** Build the full inspector projection (field exprs + Kind/Status chip variants). */
+export declare function buildInspectorProjection(steps: Step[], timing: Timing): InspectorProjection;

package/dist/m0saic/dsl-tutorial/v1/pipeline/inspector.js

@@ -0,0 +1,197 @@
+"use strict";
+/**
+ * ============================================================================
+ * dsl-tutorial — inspector projection (live X/Y/W/H/Z + Kind/Status)
+ * ============================================================================
+ *
+ * Projects the deterministic `Step[]` into the ffmpeg expressions the inspector
+ * panel renders against the GLOBAL clock — so the values mutate in lockstep with
+ * the geometry walk, the camera, and the step pill (no local clock).
+ *
+ * Two depth-safe mechanisms (both keep the panel well under the ~25 overlay
+ * mask-drop limit):
+ *
+ *  - **Numeric fields (X/Y/W/H/Z)** — ONE `drawtext` expr per field: a
+ *    piecewise-constant `%{eif:…}` over `t` that prints the active node's value.
+ *    No per-step overlay stacking (which would blow the depth limit on a big
+ *    walk); a single text layer that "reads out" the value as the parser moves.
+ *
+ *  - **Kind / Status chips** — a handful of enable-gated text variants (one per
+ *    DISTINCT kind / status), each lit over the union of its step windows. Only
+ *    a few distinct values, so depth stays ~3.
+ *
+ * Plus a git-diff "just changed" PULSE per field: a soft alpha expr (filter
+ * context) that flashes once on each step where that field's value mutated
+ * (`before != after`), decaying over the step — the cue that a value is "new".
+ *
+ * Escaping: `drawtext` `%{eif:…}` text needs commas escaped as `\,` and colons
+ * as `\:` (the `eifText` wrapper does this). Overlay `alpha`/`enable` exprs are
+ * FILTER context — raw commas. The two never mix.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildInspectorProjection = buildInspectorProjection;
+const FIELDS = ["X", "Y", "W", "H", "Z", "N", "R", "C"];
+/** Max change-pulse enable windows per field — bounds the overlay `enable=` expr
+ *  regardless of grid density (a dense grid changes a field ~once per tile). The
+ *  pulse is a subtle value-changed flash that fires near-constantly on a dense
+ *  walk, so an evenly-spaced subset reads identically. */
+const PULSE_TERM_CAP = 32;
+const f3 = (n) => n.toFixed(3);
+/**
+ * The live value as enable-gated VARIANTS: one per DISTINCT value, each gated
+ * over the union of windows where the field holds that value. A field's value is
+ * piecewise-constant over `t` (holds the root value through the lead, then steps
+ * to each new value at its step start); we build those segments and group them by
+ * value. Because a value repeats (a grid's X cycles 0,tileW,2·tileW,… every row),
+ * the distinct-value count is ≪ the change count, so this stays a handful of
+ * variants even on a dense grid — one gated LAYER each, no giant `%{eif}` expr.
+ */
+function valueVariantsFor(steps, timing, field) {
+    // Boundaries: { tStart, v } — only where the value actually changes.
+    const bounds = [];
+    // Step 0 (the lead, before step 1) shows the root's own value — the unparsed
+    // canvas — so the very first split visibly mutates it.
+    if (steps.length > 0 && steps[0].fields[field].before != null) {
+        bounds.push({ tStart: 0, v: Math.round(steps[0].fields[field].before) });
+    }
+    for (const s of steps) {
+        const v = Math.round(s.fields[field].after);
+        if (bounds.length === 0 || bounds[bounds.length - 1].v !== v) {
+            bounds.push({ tStart: timing.stepStartSec(s.index), v });
+        }
+    }
+    const endT = timing.durationMs / 1000;
+    if (bounds.length === 0)
+        return [{ label: "0", enableExpr: `(gte(t,0.000)*lt(t,${f3(endT)}))` }];
+    // Each boundary segment [tStart_k, tStart_{k+1 or end}) holds value v_k; group
+    // segments by value into disjoint windows, merging contiguous ones.
+    const byValue = new Map();
+    const order = [];
+    for (let k = 0; k < bounds.length; k++) {
+        const a = bounds[k].tStart;
+        const b = k + 1 < bounds.length ? bounds[k + 1].tStart : endT;
+        if (b <= a)
+            continue;
+        let list = byValue.get(bounds[k].v);
+        if (!list) {
+            list = [];
+            byValue.set(bounds[k].v, list);
+            order.push(bounds[k].v);
+        }
+        const last = list[list.length - 1];
+        if (last && Math.abs(last.b - a) < 1e-6)
+            last.b = b; // contiguous → extend
+        else
+            list.push({ a, b });
+    }
+    return order.map((v) => ({
+        label: String(v),
+        enableExpr: byValue
+            .get(v)
+            .map((r) => `(gte(t,${f3(r.a)})*lt(t,${f3(r.b)}))`)
+            .join("+"),
+    }));
+}
+/** ENABLE windows for the "just changed" pulse — the union of step windows where
+ *  the field mutated. On/off over each step (no decay), applied as the pulse
+ *  tile's `overlay.enable` (per-frame, cheap) rather than a per-pixel `geq` alpha.
+ *  `N` additionally pulses on EVERY count-read step, so reading a split count is
+ *  never a visual no-op even when the count repeats (e.g. an 8×8 grid). */
+function changeEnable(steps, timing, field) {
+    const terms = [];
+    for (const s of steps) {
+        const d = s.fields[field];
+        // Internal fields pulse on the event that "reads" them even if the value
+        // repeats, so the engine-state read is never a visual no-op: N/R on a count,
+        // C on a passthrough or leaf (donate / claim).
+        const forcePulse = ((field === "N" || field === "R") && s.eventType === "count") ||
+            (field === "C" && (s.eventType === "passthrough" || s.eventType === "emitLeaf"));
+        if (!forcePulse && (d.before == null || d.before === d.after))
+            continue; // dedupe steady fields
+        const a = timing.stepStartSec(s.index);
+        const b = a + timing.stepDurSec;
+        if (b <= a)
+            continue;
+        terms.push(`(gte(t,${f3(a)})*lt(t,${f3(b)}))`);
+    }
+    if (terms.length === 0)
+        return "0";
+    // Cap + decimate: the enable joins the overlay's `enable=` in the filtergraph,
+    // so keep it bounded regardless of grid density (see PULSE_TERM_CAP).
+    const capped = terms.length > PULSE_TERM_CAP
+        ? Array.from({ length: PULSE_TERM_CAP }, (_v, i) => terms[Math.floor((i * terms.length) / PULSE_TERM_CAP)])
+        : terms;
+    // Windows are disjoint → the sum is a clean 0/1 gate.
+    return capped.join("+");
+}
+/** Merge each step's `label` into disjoint [start,end) ranges, OR'd into an enable expr. */
+function variantsFor(steps, timing, labelOf) {
+    var _a;
+    // Per label → merged ranges (collapse consecutive same-label steps). The walk's
+    // FINAL step (index === total) runs to the end of the video, so the chips hold
+    // their final state through the trail (they used to blank out for the closing
+    // hold while the canvas + values kept theirs). A filtered step list (the axis
+    // chip only sees split-focused steps) is NOT extended past its own last step —
+    // the arity tag must stay blank once the walk is back at the root (N = 0).
+    const lastIndex = steps.length > 0 ? steps[0].total : 0;
+    const endT = timing.durationMs / 1000;
+    const ranges = new Map();
+    for (const s of steps) {
+        const label = labelOf(s);
+        const a = timing.stepStartSec(s.index);
+        const b = s.index === lastIndex ? Math.max(a + timing.stepDurSec, endT) : a + timing.stepDurSec;
+        const list = (_a = ranges.get(label)) !== null && _a !== void 0 ? _a : [];
+        const last = list[list.length - 1];
+        if (last && Math.abs(last.b - a) < 1e-6)
+            last.b = b; // contiguous → extend
+        else
+            list.push({ a, b });
+        ranges.set(label, list);
+    }
+    const out = [];
+    for (const [label, list] of ranges) {
+        const enableExpr = list
+            .map((r) => `(gte(t,${f3(r.a)})*lt(t,${f3(r.b)}))`)
+            .join("+");
+        out.push({ label, enableExpr });
+    }
+    return out;
+}
+// Short, chip-safe kind names (full "Passthrough" overflows the chip → "Pass").
+const KIND_LABEL = {
+    passthrough: "Pass",
+};
+const kindLabel = (s) => {
+    var _a;
+    return s.kind
+        ? (_a = KIND_LABEL[s.kind]) !== null && _a !== void 0 ? _a : s.kind.charAt(0).toUpperCase() + s.kind.slice(1)
+        : "Node";
+};
+const STATUS = {
+    count: "Count",
+    enter: "Split",
+    sibling: "Next",
+    emitLeaf: "Leaf",
+    exit: "Close",
+    passthrough: "Pass",
+    null: "Null",
+    overlay: "Overlay",
+};
+const statusLabel = (s) => { var _a; return (_a = STATUS[s.eventType]) !== null && _a !== void 0 ? _a : "Step"; };
+/** Build the full inspector projection (field exprs + Kind/Status chip variants). */
+function buildInspectorProjection(steps, timing) {
+    const fields = FIELDS.map((name) => ({
+        name,
+        valueVariants: valueVariantsFor(steps, timing, name),
+        changeEnable: changeEnable(steps, timing, name),
+    }));
+    return {
+        fields,
+        kindVariants: variantsFor(steps, timing, kindLabel),
+        statusVariants: variantsFor(steps, timing, statusLabel),
+        // Only steps that sit inside (or read) a split carry an axis — root steps
+        // (no split in focus) are excluded so the tag is blank there.
+        axisVariants: variantsFor(steps.filter((s) => s.axisInFocus), timing, (s) => (s.axisInFocus === "col" ? "cols" : "rows")),
+    };
+}