@m0saic/templates 0.2.0

package/dist/m0saic/code/snippet-morph/v1/internal/plan.js

@@ -0,0 +1,226 @@
+"use strict";
+/** Pure state → diff/motion → pipeline-step planning for snippet-morph v1. */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_ANIMATED_UNITS = exports.DEFAULT_MORPH_TIMING = void 0;
+exports.computeMorphTimeline = computeMorphTimeline;
+exports.buildSnippetMorphPlan = buildSnippetMorphPlan;
+const code_diff_1 = require("../../../_shared/code-diff");
+const code_lexer_1 = require("../../../_shared/code-lexer");
+exports.DEFAULT_MORPH_TIMING = {
+    morphMs: 750,
+    holdMs: 3000,
+    leadMs: 0,
+    trailMs: 0,
+};
+/** Maximum independently animated code rasters in one transition document. */
+exports.MAX_ANIMATED_UNITS = 16;
+function normalizeDuration(value, fallback, name, allowZero) {
+    const selected = value !== null && value !== void 0 ? value : fallback;
+    if (!Number.isFinite(selected) ||
+        (allowZero ? selected < 0 : selected <= 0)) {
+        throw new Error(`${name} must be a finite number ${allowZero ? ">= 0" : "> 0"}, got ${selected}`);
+    }
+    const rounded = Math.round(selected);
+    if (!allowZero && rounded <= 0) {
+        throw new Error(`${name} rounds below 1ms, got ${selected}`);
+    }
+    return rounded;
+}
+function normalizeTiming(input) {
+    return {
+        morphMs: normalizeDuration(input.morphMs, exports.DEFAULT_MORPH_TIMING.morphMs, "computeMorphTimeline: morphMs", false),
+        holdMs: normalizeDuration(input.holdMs, exports.DEFAULT_MORPH_TIMING.holdMs, "computeMorphTimeline: holdMs", true),
+        leadMs: normalizeDuration(input.leadMs, exports.DEFAULT_MORPH_TIMING.leadMs, "computeMorphTimeline: leadMs", true),
+        trailMs: normalizeDuration(input.trailMs, exports.DEFAULT_MORPH_TIMING.trailMs, "computeMorphTimeline: trailMs", true),
+    };
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function timeWindow(startMs, endMs, globalOffsetMs) {
+    return {
+        startMs,
+        endMs,
+        durationMs: endMs - startMs,
+        globalStartMs: globalOffsetMs + startMs,
+        globalEndMs: globalOffsetMs + endMs,
+    };
+}
+/**
+ * Build integer pipeline-step timings from the uniform duration-fit model.
+ *
+ * Natural duration = lead + S·(morph + hold) + trail. Under a pin every
+ * component first scales by one `k`; step durations round independently and
+ * the final step owns the exact remainder. A ≥1ms reservation keeps every
+ * state present when a very short (but viable) duration is authored.
+ */
+function computeMorphTimeline(stateCount, knobs = {}, targetDurationMs) {
+    if (!Number.isInteger(stateCount) || stateCount < 1) {
+        throw new Error(`computeMorphTimeline: stateCount must be a positive integer, got ${stateCount}`);
+    }
+    const normalized = normalizeTiming(knobs);
+    const naturalDurationMs = normalized.leadMs +
+        stateCount * (normalized.morphMs + normalized.holdMs) +
+        normalized.trailMs;
+    if (targetDurationMs != null && !Number.isFinite(targetDurationMs)) {
+        throw new Error(`computeMorphTimeline: targetDurationMs must be finite, got ${targetDurationMs}`);
+    }
+    const pinned = targetDurationMs != null && targetDurationMs > 0;
+    const durationMs = pinned
+        ? Math.round(targetDurationMs)
+        : naturalDurationMs;
+    if (pinned && durationMs < stateCount) {
+        throw new Error(`computeMorphTimeline: targetDurationMs must provide at least 1ms per state (${stateCount} states, got ${durationMs}ms)`);
+    }
+    const scale = durationMs / naturalDurationMs;
+    const naturalStepDurations = Array.from({ length: stateCount }, (_, index) => normalized.morphMs +
+        normalized.holdMs +
+        (index === 0 ? normalized.leadMs : 0) +
+        (index === stateCount - 1 ? normalized.trailMs : 0));
+    const stepDurations = [];
+    let remaining = durationMs;
+    for (let index = 0; index < stateCount; index += 1) {
+        const remainingSteps = stateCount - index - 1;
+        const stepDuration = index === stateCount - 1
+            ? remaining
+            : clamp(Math.round(naturalStepDurations[index] * scale), 1, remaining - remainingSteps);
+        stepDurations.push(stepDuration);
+        remaining -= stepDuration;
+    }
+    const steps = [];
+    let globalStartMs = 0;
+    for (let index = 0; index < stateCount; index += 1) {
+        const duration = stepDurations[index];
+        const isFirst = index === 0;
+        const isLast = index === stateCount - 1;
+        const leadEnd = isFirst
+            ? clamp(Math.round(normalized.leadMs * scale), 0, duration)
+            : 0;
+        const naturalMorphEnd = (isFirst ? normalized.leadMs : 0) + normalized.morphMs;
+        const morphEnd = clamp(Math.round(naturalMorphEnd * scale), leadEnd, duration);
+        const scaledTrail = isLast
+            ? clamp(Math.round(normalized.trailMs * scale), 0, duration)
+            : 0;
+        const trailStart = isLast
+            ? clamp(duration - scaledTrail, morphEnd, duration)
+            : duration;
+        const globalEndMs = globalStartMs + duration;
+        steps.push({
+            index,
+            naturalDurationMs: naturalStepDurations[index],
+            durationMs: duration,
+            globalStartMs,
+            globalEndMs,
+            lead: timeWindow(0, leadEnd, globalStartMs),
+            morph: timeWindow(leadEnd, morphEnd, globalStartMs),
+            hold: timeWindow(morphEnd, trailStart, globalStartMs),
+            trail: timeWindow(trailStart, duration, globalStartMs),
+        });
+        globalStartMs = globalEndMs;
+    }
+    return {
+        stateCount,
+        knobs: normalized,
+        naturalDurationMs,
+        durationMs,
+        scale,
+        pinned,
+        steps,
+    };
+}
+function validateStates(states) {
+    if (!Array.isArray(states) || states.length === 0) {
+        throw new Error("buildSnippetMorphPlan: states must contain at least one code state");
+    }
+    states.forEach((state, index) => {
+        if (typeof state !== "string") {
+            throw new Error(`buildSnippetMorphPlan: states[${index}] must be a string`);
+        }
+    });
+}
+function animatedUnitCount(plan) {
+    return (plan.moves.length +
+        (plan.removalRaster ? 1 : 0) +
+        (plan.additionRaster ? 1 : 0));
+}
+function wholeSnippetCrossfade(beforeLines, afterLines) {
+    return {
+        ...(beforeLines.length > 0
+            ? {
+                removalRaster: {
+                    kind: "remove",
+                    lines: beforeLines.map((text, fromLine) => ({
+                        text,
+                        fromLine,
+                        toLine: null,
+                    })),
+                },
+            }
+            : {}),
+        ...(afterLines.length > 0
+            ? {
+                additionRaster: {
+                    kind: "add",
+                    lines: afterLines.map((text, toLine) => ({
+                        text,
+                        fromLine: null,
+                        toLine,
+                    })),
+                },
+            }
+            : {}),
+        moves: [],
+    };
+}
+/** Build the complete pure plan consumed by the raster/document seams. */
+function buildSnippetMorphPlan(spec) {
+    var _a, _b;
+    if (spec == null || typeof spec !== "object") {
+        throw new Error("buildSnippetMorphPlan: spec must be an object");
+    }
+    validateStates(spec.states);
+    const language = (_a = spec.language) !== null && _a !== void 0 ? _a : "ts";
+    const tabWidth = (_b = spec.tabWidth) !== null && _b !== void 0 ? _b : 2;
+    const states = spec.states.map((state) => (0, code_lexer_1.lexTsJs)(state, language, { tabWidth }));
+    const timeline = computeMorphTimeline(states.length, spec.timing, spec.targetDurationMs);
+    const transitions = states.map((state, index) => {
+        const beforeLines = index === 0
+            ? []
+            : states[index - 1].lines.map((line) => line.text);
+        const afterLines = state.lines.map((line) => line.text);
+        const ops = (0, code_diff_1.lcsDiffLines)(beforeLines, afterLines);
+        const units = (0, code_diff_1.groupMotionUnits)(ops);
+        const morphPlan = (0, code_diff_1.coalesceFadeUnits)(units, "block");
+        const requestedAnimatedUnitCount = animatedUnitCount(morphPlan);
+        const renderMode = index > 0 && requestedAnimatedUnitCount > exports.MAX_ANIMATED_UNITS
+            ? "crossfade"
+            : "morph";
+        return {
+            index,
+            fromStateIndex: index === 0 ? null : index - 1,
+            toStateIndex: index,
+            ops,
+            units,
+            requestedAnimatedUnitCount,
+            renderMode,
+            coalesced: renderMode === "crossfade"
+                ? wholeSnippetCrossfade(beforeLines, afterLines)
+                : morphPlan,
+        };
+    });
+    const steps = transitions.map((transition, index) => ({
+        index,
+        stateIndex: index,
+        durationMs: timeline.steps[index].durationMs,
+        timing: timeline.steps[index],
+        transition,
+    }));
+    return {
+        language,
+        tabWidth,
+        states,
+        transitions,
+        timeline,
+        steps,
+    };
+}

package/dist/m0saic/code/snippet-morph/v1/internal/steps.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Step / document construction for snippet-morph v1.
+ *
+ * Every code LINE is ONE svg text source: one layer per token run, each in
+ * its token colour, placed on the monospace grid by an absolute px `xExpr`. The engine
+ * rasterizes such a source to a single coloured RGBA image (core svg text,
+ * multi-colour route) — one animatable unit per line — and Make's preview
+ * draws the very same document. There is no template-side rasterizer and no
+ * separate preview stand-in.
+ */
+import { type MosaicDocument, type MosaicDocumentPipeline } from "@m0saic/types";
+import type { CodeTheme } from "../../../_shared/code-theme";
+import type { LexedCodeState } from "../../../_shared/code-lexer";
+import { type SnippetFrameGeometry } from "./chrome";
+import type { MorphStepTiming, SnippetMorphPlan, TransitionPlan } from "./plan";
+export type SnippetCodeAlign = "left" | "center";
+export type SnippetAddEntrance = "fade" | "rise";
+export interface SnippetMotionOptions {
+    reduceMotion: boolean;
+    addEntrance: SnippetAddEntrance;
+}
+/** Typography of the code grid. */
+export interface SnippetTextStyle {
+    fontSize: number;
+    lineHeight: number;
+    fontFamily?: string;
+    fontWeight?: number | "normal" | "bold";
+    fontStyle?: "normal" | "italic";
+}
+export interface SnippetStepVisualOptions extends SnippetTextStyle {
+    title: string;
+    showChrome: boolean;
+    trafficLights: boolean;
+    lineNumbers: boolean;
+    codeAlign: SnippetCodeAlign;
+    /** Card fills the canvas (no outer margin). */
+    fullBleed?: boolean;
+}
+/** One RAW line of a `states[i]` string: its text and `[start, end)` span
+ *  in the prop value (newline excluded). Offsets index the raw prop — what
+ *  Make's ranged inline edit splices — not the tab-expanded lexer copy. */
+export type LiteLineSpan = {
+    start: number;
+    end: number;
+    raw: string;
+};
+export type LiteBindSpans = {
+    tabWidth: number;
+    /** Line spans of the state the step shows (`states[bindStateIndex]`). */
+    current?: LiteLineSpan[];
+    /** Line spans of the previous state (removed lines bind there). */
+    previous?: LiteLineSpan[];
+};
+/** Split a raw state into line spans the way the lexer splits lines
+ *  (`\r\n` / `\r` / `\n`; a trailing newline yields an empty last line). */
+export declare function rawLineSpans(raw: string): LiteLineSpan[];
+/** Raw string offset (UTF-16 units) of a character-grid column in a raw
+ *  line: tabs advance `tabWidth` columns (the lexer expands them so), wide
+ *  glyphs two, astral glyphs one column over two code units. */
+export declare function rawOffsetForColumn(rawLine: string, col: number, tabWidth: number): number;
+export interface BuildSnippetDocumentSpec {
+    state: LexedCodeState;
+    geometry: SnippetFrameGeometry;
+    theme: CodeTheme;
+    visual: SnippetStepVisualOptions;
+    width: number;
+    height: number;
+    fps: number;
+    durationMs: number;
+    /** Morph context for an animated step (absent → the state at rest). */
+    transition?: TransitionPlan;
+    previousState?: LexedCodeState;
+    stepTiming?: MorphStepTiming;
+    motion?: SnippetMotionOptions;
+    /** `states[]` index the code lines bind to (Make double-click → edit). */
+    bindStateIndex?: number;
+    bindPreviousStateIndex?: number;
+    /** Raw line spans of the bound states — each line then binds ITS span. */
+    bindSpans?: LiteBindSpans;
+}
+/** One state's document: chrome + code lines (+ the morph into it). */
+export declare function buildSnippetDocument(spec: BuildSnippetDocumentSpec): MosaicDocument;
+export interface BuildSnippetPipelineSpec {
+    plan: SnippetMorphPlan;
+    /** The RAW `states` prop + tab width: each code line then binds ITS line
+     *  of its state in raw offsets (Make ranged inline edit). Absent →
+     *  whole-state bindings. */
+    rawStates?: string[];
+    tabWidth?: number;
+    geometry: SnippetFrameGeometry;
+    theme: CodeTheme;
+    visual: SnippetStepVisualOptions;
+    width: number;
+    height: number;
+    fps: number;
+    motion: SnippetMotionOptions;
+}
+/**
+ * The per-state cut pipeline — one document per state, each carrying the
+ * morph INTO it, step lengths from the plan's timing. The same pipeline is
+ * the explicit render and Make's live preview (which scrubs it step by step).
+ */
+export declare function buildSnippetPipeline(spec: BuildSnippetPipelineSpec): MosaicDocumentPipeline;

package/dist/m0saic/code/snippet-morph/v1/internal/steps.js

@@ -0,0 +1,313 @@
+"use strict";
+/**
+ * Step / document construction for snippet-morph v1.
+ *
+ * Every code LINE is ONE svg text source: one layer per token run, each in
+ * its token colour, placed on the monospace grid by an absolute px `xExpr`. The engine
+ * rasterizes such a source to a single coloured RGBA image (core svg text,
+ * multi-colour route) — one animatable unit per line — and Make's preview
+ * draws the very same document. There is no template-side rasterizer and no
+ * separate preview stand-in.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rawLineSpans = rawLineSpans;
+exports.rawOffsetForColumn = rawOffsetForColumn;
+exports.buildSnippetDocument = buildSnippetDocument;
+exports.buildSnippetPipeline = buildSnippetPipeline;
+const template_utils_1 = require("@m0saic/template-utils");
+const code_metrics_1 = require("../../../_shared/code-metrics");
+const chrome_1 = require("./chrome");
+/** Split a raw state into line spans the way the lexer splits lines
+ *  (`\r\n` / `\r` / `\n`; a trailing newline yields an empty last line). */
+function rawLineSpans(raw) {
+    const spans = [];
+    const re = /\r\n|\r|\n/g;
+    let start = 0;
+    let m;
+    while ((m = re.exec(raw))) {
+        spans.push({ start, end: m.index, raw: raw.slice(start, m.index) });
+        start = m.index + m[0].length;
+    }
+    spans.push({ start, end: raw.length, raw: raw.slice(start) });
+    return spans;
+}
+/** Raw string offset (UTF-16 units) of a character-grid column in a raw
+ *  line: tabs advance `tabWidth` columns (the lexer expands them so), wide
+ *  glyphs two, astral glyphs one column over two code units. */
+function rawOffsetForColumn(rawLine, col, tabWidth) {
+    let cols = 0;
+    let offset = 0;
+    for (const ch of rawLine) {
+        if (cols >= col)
+            break;
+        cols += ch === "\t" ? tabWidth : (0, code_metrics_1.codeColumnCount)(ch);
+        offset += ch.length;
+    }
+    return offset;
+}
+function codeOffsetX(state, geometry, visual) {
+    if (visual.codeAlign === "left")
+        return 0;
+    const metrics = (0, code_metrics_1.measureCodeGrid)(state.lines, {
+        fontSize: visual.fontSize,
+        lineHeight: visual.lineHeight,
+    });
+    return Math.max(0, Math.floor((geometry.codeArea.w - metrics.width) / 2));
+}
+function seconds(milliseconds) {
+    return milliseconds / 1000;
+}
+function intersectRect(rect, bounds) {
+    const left = Math.max(rect.x, bounds.x);
+    const top = Math.max(rect.y, bounds.y);
+    const right = Math.min(rect.x + rect.w, bounds.x + bounds.w);
+    const bottom = Math.min(rect.y + rect.h, bounds.y + bounds.h);
+    if (right <= left || bottom <= top)
+        return null;
+    return { x: left, y: top, w: right - left, h: bottom - top };
+}
+/**
+ * One code line as ONE svg text source: a layer per token run, each in its
+ * token colour, placed at `col × charW` px from the line box's left edge
+ * (a plain-number `xExpr` — an absolute px offset for the engine's svg text
+ * path AND the preview, so the grid never scales with the quantized frame
+ * width a fractional padding would). `vAlign: "top"` puts every run's
+ * baseline at `ascent` from the row top: the line-box model the gutter
+ * numbers share. Returns null for a blank line (nothing to draw, nothing to bind).
+ */
+function codeLineSource(line, box, metrics, theme, visual, overlay, bindIndex, bindSpan) {
+    var _a;
+    const layers = [];
+    line.tokens.forEach((token) => {
+        var _a;
+        for (const match of token.text.matchAll(/\S+/gu)) {
+            const text = match[0];
+            const prefix = token.text.slice(0, (_a = match.index) !== null && _a !== void 0 ? _a : 0);
+            const startCol = token.col + (0, code_metrics_1.codeColumnCount)(prefix);
+            const startPx = startCol * metrics.charW;
+            if (startPx >= box.w)
+                continue; // starts past the code area's right edge
+            layers.push({
+                content: { kind: "literal", text },
+                style: { fontColor: theme.syntax[token.kind] },
+                placement: {
+                    hAlign: "left",
+                    vAlign: "top",
+                    xExpr: String(Math.round(startPx * 1000) / 1000),
+                },
+            });
+        }
+    });
+    if (layers.length === 0)
+        return null;
+    const source = {
+        type: "text",
+        rasterizer: "svg",
+        renderMode: { kind: "image" },
+        visual: { backgroundColor: "black@0" },
+        style: {
+            fontFamily: (_a = visual.fontFamily) !== null && _a !== void 0 ? _a : "JetBrains Mono",
+            fontSize: visual.fontSize,
+            ...(visual.fontWeight != null ? { fontWeight: visual.fontWeight } : {}),
+            ...(visual.fontStyle != null ? { fontStyle: visual.fontStyle } : {}),
+        },
+        layers,
+        editor: { owner: "template" },
+    };
+    if (overlay)
+        source.overlay = overlay;
+    // Make double-click → inline edit of THIS line of its state (range in
+    // raw-prop offsets); without spans, the whole state.
+    if (bindIndex != null) {
+        if (bindSpan)
+            (0, template_utils_1.bindPropRange)(source, "states", bindIndex, { start: bindSpan.start, end: bindSpan.end });
+        else
+            (0, template_utils_1.bindProp)(source, "states", bindIndex);
+    }
+    return source;
+}
+/** Grid column just past the last glyph of a line (0 for a blank line). */
+function lineEndCol(line) {
+    let end = 0;
+    for (const token of line.tokens) {
+        const trimmed = token.text.replace(/\s+$/u, "");
+        if (trimmed.length > 0)
+            end = Math.max(end, token.col + (0, code_metrics_1.codeColumnCount)(trimmed));
+    }
+    return end;
+}
+/** Pixels kept to the right of the last glyph: room for a glyph's ink to
+ *  overhang its advance box (anti-aliasing, italics) so nothing is clipped,
+ *  and a little air for the hover ring. The raster itself is width-agnostic
+ *  (measured: the same glyphs in a 26 px and a 300 px tile are pixel-identical). */
+const LINE_BOX_INK_PAD_PX = 6;
+function linePiece(line, row, offsetX, geometry, metrics, theme, visual, importance, overlay, bindIndex, bindSpan) {
+    if (!line)
+        return null;
+    const area = geometry.codeArea;
+    // The line box HUGS its text: from the code column to just past the last
+    // glyph (clipped at the code area's right edge). The render is unchanged
+    // (runs sit at absolute px), the raster is only as wide as the ink, and in
+    // Make the hover ring, the edit handle and the inline editor wrap the text
+    // instead of running to the far edge of the card.
+    const inkW = Math.ceil(lineEndCol(line) * metrics.charW) + LINE_BOX_INK_PAD_PX;
+    const box = intersectRect({ x: area.x + offsetX, y: area.y + row * metrics.lineStep, w: Math.max(1, Math.min(inkW, area.w - offsetX)), h: metrics.lineStep }, area);
+    if (!box || box.h < 2)
+        return null;
+    const source = codeLineSource(line, box, metrics, theme, visual, overlay, bindIndex, bindSpan);
+    if (!source)
+        return null;
+    return { rect: { ...box, importance }, source };
+}
+/**
+ * Code pieces for one step. With a morph context the lines carry the
+ * transition's overlay expressions — persisting lines slide from their
+ * previous row, added lines fade (and rise) in, removed lines fade out at
+ * their old row (drawn from the previous state). Without one (first state,
+ * reduced motion) the state sits at rest.
+ */
+function codePieces(state, geometry, theme, visual, motionCtx, bindStateIndex, bindPreviousStateIndex, bindSpans) {
+    const metrics = (0, code_metrics_1.measureCodeGrid)(state.lines, {
+        fontSize: visual.fontSize,
+        lineHeight: visual.lineHeight,
+    });
+    const offsetX = codeOffsetX(state, geometry, visual);
+    const spanAt = (spans, row) => spans === null || spans === void 0 ? void 0 : spans[row];
+    const pieces = [];
+    const push = (piece) => {
+        if (piece)
+            pieces.push(piece);
+    };
+    const animate = motionCtx &&
+        !motionCtx.motion.reduceMotion &&
+        motionCtx.transition.fromStateIndex != null;
+    if (!animate) {
+        state.lines.forEach((line, row) => {
+            push(linePiece(line, row, offsetX, geometry, metrics, theme, visual, 10, undefined, bindStateIndex, spanAt(bindSpans === null || bindSpans === void 0 ? void 0 : bindSpans.current, row)));
+        });
+        return pieces;
+    }
+    const { transition, previousState, timing, motion } = motionCtx;
+    const morphStartSec = seconds(timing.morph.startMs);
+    const morphEndSec = seconds(timing.morph.endMs);
+    const morphDurationSec = Math.max(0.0001, seconds(timing.morph.durationMs));
+    const fade = (0, template_utils_1.fadeInExpr)(morphStartSec, morphDurationSec, "easeInOut");
+    const eased = (0, template_utils_1.easingExpr)("easeInOut", (0, template_utils_1.progressExpr)(morphStartSec, morphDurationSec));
+    const risePx = Math.max(1, Math.round(metrics.lineStep * 0.25));
+    const previousOffsetX = previousState ? codeOffsetX(previousState, geometry, visual) : offsetX;
+    transition.ops.forEach((op) => {
+        if (op.kind === "same") {
+            const offsetPx = (op.fromLine - op.toLine) * metrics.lineStep;
+            const overlay = offsetPx !== 0 ? { yExpr: `(1-(${eased}))*${offsetPx}`, startAtSec: morphStartSec } : undefined;
+            push(linePiece(state.lines[op.toLine], op.toLine, offsetX, geometry, metrics, theme, visual, overlay ? 12 : 10, overlay, bindStateIndex, spanAt(bindSpans === null || bindSpans === void 0 ? void 0 : bindSpans.current, op.toLine)));
+        }
+        else if (op.kind === "add") {
+            const overlay = {
+                alpha: fade,
+                ...(motion.addEntrance === "rise" ? { yExpr: `(1-(${eased}))*${risePx}` } : {}),
+                startAtSec: morphStartSec,
+                window: { startSec: morphStartSec },
+            };
+            push(linePiece(state.lines[op.toLine], op.toLine, offsetX, geometry, metrics, theme, visual, 30, overlay, bindStateIndex, spanAt(bindSpans === null || bindSpans === void 0 ? void 0 : bindSpans.current, op.toLine)));
+        }
+        else {
+            const overlay = {
+                alpha: `(1-(${fade}))`,
+                startAtSec: morphStartSec,
+                window: { endSec: morphEndSec },
+            };
+            push(linePiece(previousState === null || previousState === void 0 ? void 0 : previousState.lines[op.fromLine], op.fromLine, previousOffsetX, geometry, metrics, theme, visual, 11, overlay, bindPreviousStateIndex, spanAt(bindSpans === null || bindSpans === void 0 ? void 0 : bindSpans.previous, op.fromLine)));
+        }
+    });
+    return pieces;
+}
+/** One state's document: chrome + code lines (+ the morph into it). */
+function buildSnippetDocument(spec) {
+    const metrics = (0, code_metrics_1.measureCodeGrid)(spec.state.lines, {
+        fontSize: spec.visual.fontSize,
+        lineHeight: spec.visual.lineHeight,
+    });
+    const pieces = (0, chrome_1.buildSnippetChromePieces)({
+        geometry: spec.geometry,
+        theme: spec.theme,
+        title: spec.visual.title,
+        showChrome: spec.visual.showChrome,
+        trafficLights: spec.visual.trafficLights,
+        lineNumbers: spec.visual.lineNumbers,
+        titleFontSize: Math.max(10, Math.round(spec.geometry.titleBar.h * 0.3)),
+        lineCount: spec.state.lines.length,
+        lineStep: metrics.lineStep,
+        fontSize: spec.visual.fontSize,
+        charW: metrics.charW,
+    });
+    pieces.push(...codePieces(spec.state, spec.geometry, spec.theme, spec.visual, spec.transition && spec.stepTiming && spec.motion
+        ? { transition: spec.transition, previousState: spec.previousState, timing: spec.stepTiming, motion: spec.motion }
+        : undefined, spec.bindStateIndex, spec.bindPreviousStateIndex, spec.bindSpans));
+    const placed = (0, template_utils_1.placeInsetPieces)({
+        rootW: spec.width,
+        rootH: spec.height,
+        pieces,
+    });
+    return {
+        kind: "mosaic_document",
+        version: 1,
+        m0: placed.m0,
+        sources: placed.sources,
+        assets: {},
+        size: { width: spec.width, height: spec.height },
+        fps: spec.fps,
+        durationMs: spec.durationMs,
+        backgroundColor: spec.theme.canvas,
+        // Author stamp: a silent video deliverable. Also what Make's Output Type
+        // reads (without it `inferOutputKind` judged a still-only doc an IMAGE).
+        format: { kind: "video", container: "mp4" },
+        audio: { mode: "off" },
+    };
+}
+/**
+ * The per-state cut pipeline — one document per state, each carrying the
+ * morph INTO it, step lengths from the plan's timing. The same pipeline is
+ * the explicit render and Make's live preview (which scrubs it step by step).
+ */
+function buildSnippetPipeline(spec) {
+    var _a, _b;
+    const spans = (_a = spec.rawStates) === null || _a === void 0 ? void 0 : _a.map(rawLineSpans);
+    const tabWidth = (_b = spec.tabWidth) !== null && _b !== void 0 ? _b : 2;
+    const steps = spec.plan.steps.map((step) => {
+        const state = spec.plan.states[step.stateIndex];
+        const from = step.transition.fromStateIndex;
+        const file = buildSnippetDocument({
+            state,
+            geometry: spec.geometry,
+            theme: spec.theme,
+            visual: spec.visual,
+            width: spec.width,
+            height: spec.height,
+            fps: spec.fps,
+            durationMs: step.durationMs,
+            transition: step.transition,
+            previousState: from == null ? undefined : spec.plan.states[from],
+            stepTiming: step.timing,
+            motion: spec.motion,
+            bindStateIndex: step.stateIndex,
+            bindPreviousStateIndex: from == null ? undefined : from,
+            ...(spans
+                ? { bindSpans: { tabWidth, current: spans[step.stateIndex], previous: from == null ? undefined : spans[from] } }
+                : {}),
+        });
+        return { name: `state-${step.index + 1}`, durationMs: step.durationMs, file };
+    });
+    return {
+        kind: "mosaic_pipeline",
+        version: 1,
+        emit: "single",
+        steps,
+        defaultTransition: { type: "cut" },
+        size: { width: spec.width, height: spec.height },
+        fps: spec.fps,
+        durationMs: spec.plan.timeline.durationMs,
+        backgroundColor: spec.theme.canvas,
+        format: { kind: "video", container: "mp4" },
+        audio: { mode: "off" },
+    };
+}