@m0saic/templates 0.2.0

package/dist/m0saic/code/_shared/code-theme.d.ts

@@ -0,0 +1,30 @@
+/** Shared editor/chrome and syntax colors for the code template family. */
+import type { MosaicColor } from "@m0saic/types";
+export declare const CODE_TOKEN_KINDS: readonly ["keyword", "string", "comment", "number", "fnCall", "ident", "operator", "punct", "plain"];
+export type CodeTokenKind = (typeof CODE_TOKEN_KINDS)[number];
+export type CodeSyntaxTheme = Record<CodeTokenKind, MosaicColor>;
+export interface CodeTheme {
+    /** Page behind the editor card. */
+    canvas: MosaicColor;
+    /** Code-area surface. */
+    editor: MosaicColor;
+    /** Static title-bar surface. */
+    titleBar: MosaicColor;
+    border: MosaicColor;
+    title: MosaicColor;
+    gutter: MosaicColor;
+    lineNumber: MosaicColor;
+    trafficClose: MosaicColor;
+    trafficMinimize: MosaicColor;
+    trafficMaximize: MosaicColor;
+    syntax: CodeSyntaxTheme;
+}
+export declare const CODE_THEME_PRESET_KEYS: readonly ["dark", "light", "merge-conflict", "rubber-duck"];
+export type CodeThemePreset = (typeof CODE_THEME_PRESET_KEYS)[number];
+/** Stable built-ins: the canonical pair plus two developer-minded dark variants. */
+export declare const CODE_THEME_PRESETS: Record<CodeThemePreset, CodeTheme>;
+export declare function codeTheme(preset?: CodeThemePreset): CodeTheme;
+/** Resolve a color picker value to the strict hex format the SVG rasterizer accepts. */
+export declare function resolveCodeColor(value: string | null | undefined, fallback: MosaicColor): MosaicColor;
+/** Explicit per-token overrides win; cleared fields retain the preset color. */
+export declare function resolveCodeSyntaxTheme(base: CodeTheme, overrides?: Partial<Record<CodeTokenKind, string | null | undefined>>): CodeSyntaxTheme;

package/dist/m0saic/code/_shared/code-theme.js

@@ -0,0 +1,141 @@
+"use strict";
+/** Shared editor/chrome and syntax colors for the code template family. */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CODE_THEME_PRESETS = exports.CODE_THEME_PRESET_KEYS = exports.CODE_TOKEN_KINDS = void 0;
+exports.codeTheme = codeTheme;
+exports.resolveCodeColor = resolveCodeColor;
+exports.resolveCodeSyntaxTheme = resolveCodeSyntaxTheme;
+exports.CODE_TOKEN_KINDS = [
+    "keyword",
+    "string",
+    "comment",
+    "number",
+    "fnCall",
+    "ident",
+    "operator",
+    "punct",
+    "plain",
+];
+exports.CODE_THEME_PRESET_KEYS = [
+    "dark",
+    "light",
+    "merge-conflict",
+    "rubber-duck",
+];
+/** Stable built-ins: the canonical pair plus two developer-minded dark variants. */
+exports.CODE_THEME_PRESETS = {
+    dark: {
+        canvas: "#080B14",
+        editor: "#011627",
+        titleBar: "#0B2942",
+        border: "#1D3B53",
+        title: "#D6DEEB",
+        gutter: "#011627",
+        lineNumber: "#5F7E97",
+        trafficClose: "#FF5F57",
+        trafficMinimize: "#FFBD2E",
+        trafficMaximize: "#28C840",
+        syntax: {
+            keyword: "#C792EA",
+            string: "#ECC48D",
+            comment: "#637777",
+            number: "#F78C6C",
+            fnCall: "#82AAFF",
+            ident: "#D6DEEB",
+            operator: "#7FDBCA",
+            punct: "#89DDFF",
+            plain: "#D6DEEB",
+        },
+    },
+    light: {
+        canvas: "#E9EEF5",
+        editor: "#FBFBFB",
+        titleBar: "#F0F2F5",
+        border: "#D8DEE9",
+        title: "#243447",
+        gutter: "#F4F6F8",
+        lineNumber: "#90A4AE",
+        trafficClose: "#FF5F57",
+        trafficMinimize: "#FFBD2E",
+        trafficMaximize: "#28C840",
+        syntax: {
+            keyword: "#7C3AED",
+            string: "#A15C00",
+            comment: "#6B7C85",
+            number: "#C2410C",
+            fnCall: "#2563EB",
+            ident: "#243447",
+            operator: "#047D75",
+            punct: "#52606D",
+            plain: "#243447",
+        },
+    },
+    "merge-conflict": {
+        canvas: "#0B0D10",
+        editor: "#15181E",
+        titleBar: "#20242C",
+        border: "#3B414D",
+        title: "#F4F1EC",
+        gutter: "#11141A",
+        lineNumber: "#737B8C",
+        trafficClose: "#FF5F57",
+        trafficMinimize: "#FFBD2E",
+        trafficMaximize: "#28C840",
+        syntax: {
+            keyword: "#FF6B81",
+            string: "#A9DC76",
+            comment: "#6C7486",
+            number: "#FFD166",
+            fnCall: "#73D2DE",
+            ident: "#F4F1EC",
+            operator: "#AB9DF2",
+            punct: "#FC9867",
+            plain: "#F4F1EC",
+        },
+    },
+    "rubber-duck": {
+        canvas: "#070A16",
+        editor: "#10162B",
+        titleBar: "#171F3A",
+        border: "#2A3762",
+        title: "#FFF4B8",
+        gutter: "#0D1327",
+        lineNumber: "#63739B",
+        trafficClose: "#FF5F57",
+        trafficMinimize: "#FFBD2E",
+        trafficMaximize: "#28C840",
+        syntax: {
+            keyword: "#FFD166",
+            string: "#7BDFF2",
+            comment: "#63739B",
+            number: "#FF8FAB",
+            fnCall: "#B8F2A1",
+            ident: "#F5F7FF",
+            operator: "#CDB4DB",
+            punct: "#89C2D9",
+            plain: "#F5F7FF",
+        },
+    },
+};
+function codeTheme(preset) {
+    return exports.CODE_THEME_PRESETS[preset !== null && preset !== void 0 ? preset : "dark"];
+}
+const HEX_COLOR_RE = /^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/i;
+/** Resolve a color picker value to the strict hex format the SVG rasterizer accepts. */
+function resolveCodeColor(value, fallback) {
+    const normalized = (value !== null && value !== void 0 ? value : "").trim();
+    if (normalized.length === 0 || normalized.toLowerCase() === "none") {
+        return fallback;
+    }
+    if (!HEX_COLOR_RE.test(normalized)) {
+        throw new Error(`Code theme colors must be #RRGGBB or #RRGGBBAA, got ${JSON.stringify(value)}`);
+    }
+    return normalized.toUpperCase();
+}
+/** Explicit per-token overrides win; cleared fields retain the preset color. */
+function resolveCodeSyntaxTheme(base, overrides = {}) {
+    return Object.fromEntries(exports.CODE_TOKEN_KINDS.map((kind) => [
+        kind,
+        resolveCodeColor(overrides[kind], base.syntax[kind]),
+    ]));
+}

package/dist/m0saic/code/index.d.ts

@@ -0,0 +1 @@
+export * from "./snippet-morph/v1/snippet-morph";

package/dist/m0saic/code/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./snippet-morph/v1/snippet-morph"), exports);

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

@@ -0,0 +1,60 @@
+/** Pure editor-frame geometry and chrome-source construction. */
+import { type MosaicColor, type MosaicTextSource } from "@m0saic/types";
+import { type InsetPiece } from "@m0saic/template-utils";
+import type { CodeTheme } from "../../../_shared/code-theme";
+export interface SnippetRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface SnippetFrameGeometry {
+    canvas: SnippetRect;
+    card: SnippetRect;
+    titleBar: SnippetRect;
+    gutter: SnippetRect;
+    codeArea: SnippetRect;
+    titleSlot: SnippetRect;
+    padding: number;
+}
+export interface ComputeSnippetFrameGeometrySpec {
+    width: number;
+    height: number;
+    fontSize: number;
+    showChrome: boolean;
+    lineNumbers: boolean;
+    /** Card fills the canvas edge to edge (no outer margin). Default false here
+     *  (legacy framed card); the template defaults it ON (gate 32 ruling). */
+    fullBleed?: boolean;
+}
+export interface BuildSnippetChromeSpec {
+    geometry: SnippetFrameGeometry;
+    theme: CodeTheme;
+    title: string;
+    showChrome: boolean;
+    trafficLights: boolean;
+    lineNumbers: boolean;
+    titleFontSize: number;
+    /** Code grid, for the per-line gutter numbers. */
+    lineCount: number;
+    lineStep: number;
+    fontSize?: number;
+    charW?: number;
+}
+/** Derive all static frame rectangles once in integer canvas pixels. */
+export declare function computeSnippetFrameGeometry(spec: ComputeSnippetFrameGeometrySpec): SnippetFrameGeometry;
+/**
+ * One label glyph run (gutter number): a single-layer svg text source in
+ * JetBrains Mono. `vAlign: "top"` puts its baseline at `ascent` from the row
+ * top — the same line-box model the code lines use — so numbers and code sit
+ * on one baseline. Make draws it in the real face (the app registers the
+ * bundled font); the engine rasterizes it through the core svg text path.
+ */
+export declare function codeTextSource(text: string, fontSize: number, color: MosaicColor, hAlign?: "left" | "right", label?: string): MosaicTextSource;
+/**
+ * The editor chrome — canvas, card, code area, title bar + title, traffic
+ * lights (rounded colour tiles) and per-line gutter numbers — entirely from
+ * native colour and text sources. The render and Make's preview are the same
+ * document (no pre-rasterized chrome PNGs since the core svg-text promotion).
+ */
+export declare function buildSnippetChromePieces(spec: BuildSnippetChromeSpec): InsetPiece[];

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

@@ -0,0 +1,252 @@
+"use strict";
+/** Pure editor-frame geometry and chrome-source construction. */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeSnippetFrameGeometry = computeSnippetFrameGeometry;
+exports.codeTextSource = codeTextSource;
+exports.buildSnippetChromePieces = buildSnippetChromePieces;
+const template_utils_1 = require("@m0saic/template-utils");
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function positiveInt(value, name) {
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new Error(`${name} must be a finite number > 0, got ${value}`);
+    }
+    return Math.max(1, Math.round(value));
+}
+/** Derive all static frame rectangles once in integer canvas pixels. */
+function computeSnippetFrameGeometry(spec) {
+    const width = positiveInt(spec.width, "computeSnippetFrameGeometry: width");
+    const height = positiveInt(spec.height, "computeSnippetFrameGeometry: height");
+    const fontSize = positiveInt(spec.fontSize, "computeSnippetFrameGeometry: fontSize");
+    const marginX = spec.fullBleed
+        ? 0
+        : clamp(Math.round(width * 0.07), 8, Math.max(8, Math.floor(width / 5)));
+    const marginY = spec.fullBleed
+        ? 0
+        : clamp(Math.round(height * 0.08), 8, Math.max(8, Math.floor(height / 5)));
+    const card = {
+        x: marginX,
+        y: marginY,
+        w: Math.max(1, width - marginX * 2),
+        h: Math.max(1, height - marginY * 2),
+    };
+    const titleBarH = spec.showChrome
+        ? clamp(Math.round(card.h * 0.09), Math.min(24, card.h), Math.max(1, Math.floor(card.h / 4)))
+        : 0;
+    const padding = clamp(Math.round(Math.min(card.w, card.h) * 0.035), 4, Math.max(4, Math.floor(Math.min(card.w, card.h) / 8)));
+    const innerX = card.x + padding;
+    const innerRight = card.x + card.w - padding;
+    const codeY = card.y + titleBarH + padding;
+    const codeBottom = card.y + card.h - padding;
+    const innerW = Math.max(1, innerRight - innerX);
+    const desiredGutter = spec.lineNumbers
+        ? Math.max(30, Math.round(fontSize * 3.2))
+        : 0;
+    const gutterW = Math.min(desiredGutter, Math.max(0, Math.floor(innerW * 0.28)));
+    const gutterGap = gutterW > 0
+        ? Math.min(Math.max(6, Math.round(fontSize * 0.8)), Math.max(0, innerW - gutterW - 1))
+        : 0;
+    const codeX = innerX + gutterW + gutterGap;
+    const codeArea = {
+        x: codeX,
+        y: codeY,
+        w: Math.max(1, innerRight - codeX),
+        h: Math.max(1, codeBottom - codeY),
+    };
+    const titleInset = Math.max(8, Math.round(titleBarH * 0.3));
+    const trafficReserve = spec.showChrome ? Math.round(titleBarH * 2.4) : 0;
+    return {
+        canvas: { x: 0, y: 0, w: width, h: height },
+        card,
+        titleBar: { x: card.x, y: card.y, w: card.w, h: titleBarH },
+        gutter: {
+            x: innerX,
+            y: codeY,
+            w: gutterW,
+            h: Math.max(1, codeBottom - codeY),
+        },
+        codeArea,
+        titleSlot: {
+            x: card.x + titleInset + trafficReserve,
+            y: card.y,
+            w: Math.max(1, card.w - titleInset * 2 - trafficReserve),
+            h: Math.max(1, titleBarH),
+        },
+        padding,
+    };
+}
+function labelSource(text, fontSize, color) {
+    const src = {
+        type: "text",
+        rasterizer: "svg",
+        renderMode: { kind: "image" },
+        visual: { backgroundColor: "black@0" },
+        layers: [
+            {
+                content: { kind: "literal", text: text.trim() || " " },
+                style: {
+                    fontFamily: "JetBrains Mono",
+                    fontSize,
+                    fontColor: color,
+                },
+                placement: { hAlign: "left", vAlign: "middle" },
+            },
+        ],
+        editor: { owner: "template", label: "title" },
+    };
+    // The title slot DISPLAYS `chrome.title` — bound for Make's double-click
+    // inline edit (rect present whenever the chrome shows, even when blank).
+    return (0, template_utils_1.bindProp)(src, "chrome.title");
+}
+function labeledSource(source, label) {
+    return {
+        ...source,
+        editor: { owner: "template", label },
+    };
+}
+function baseChromePieces(spec) {
+    const { geometry, theme } = spec;
+    const pieces = [
+        {
+            rect: { ...geometry.canvas, importance: 0 },
+            source: (0, template_utils_1.makeColorTile)(theme.canvas),
+        },
+        {
+            rect: { ...geometry.card, importance: 1 },
+            // A full-bleed card IS the canvas: no rounded corners or hairline
+            // against the frame edge (they read as a stray border in the render).
+            source: labeledSource(geometry.card.x === 0 &&
+                geometry.card.y === 0 &&
+                geometry.card.w === geometry.canvas.w &&
+                geometry.card.h === geometry.canvas.h
+                ? (0, template_utils_1.makeColorTile)(theme.editor)
+                : (0, template_utils_1.makeColorTile)(theme.editor, {
+                    effects: {
+                        rounding: { cornerStyle: "rounded", borderRadius: 0.025 },
+                        stroke: {
+                            position: "inner",
+                            width: 0.002,
+                            color: theme.border,
+                            alpha: 1,
+                        },
+                    },
+                }), "card"),
+        },
+        {
+            rect: { ...geometry.codeArea, importance: 2 },
+            source: labeledSource((0, template_utils_1.makeColorTile)(theme.editor), "code-area"),
+        },
+    ];
+    if (spec.showChrome && geometry.titleBar.h > 0) {
+        pieces.push({
+            rect: { ...geometry.titleBar, importance: 2 },
+            source: (0, template_utils_1.makeColorTile)(theme.titleBar),
+        });
+        pieces.push({
+            rect: { ...geometry.titleSlot, importance: 4 },
+            source: labelSource(spec.title, spec.titleFontSize, theme.title),
+        });
+    }
+    if (spec.lineNumbers && geometry.gutter.w > 0) {
+        pieces.push({
+            rect: { ...geometry.gutter, importance: 2 },
+            source: labeledSource((0, template_utils_1.makeColorTile)(theme.gutter), "gutter"),
+        });
+    }
+    return pieces;
+}
+/**
+ * One label glyph run (gutter number): a single-layer svg text source in
+ * JetBrains Mono. `vAlign: "top"` puts its baseline at `ascent` from the row
+ * top — the same line-box model the code lines use — so numbers and code sit
+ * on one baseline. Make draws it in the real face (the app registers the
+ * bundled font); the engine rasterizes it through the core svg text path.
+ */
+function codeTextSource(text, fontSize, color, hAlign = "left", label) {
+    return {
+        type: "text",
+        rasterizer: "svg",
+        renderMode: { kind: "image" },
+        visual: { backgroundColor: "black@0" },
+        layers: [
+            {
+                content: { kind: "literal", text },
+                style: { fontFamily: "JetBrains Mono", fontSize, fontColor: color },
+                placement: { hAlign, vAlign: "top" },
+            },
+        ],
+        editor: { owner: "template", ...(label ? { label } : {}) },
+    };
+}
+/**
+ * The editor chrome — canvas, card, code area, title bar + title, traffic
+ * lights (rounded colour tiles) and per-line gutter numbers — entirely from
+ * native colour and text sources. The render and Make's preview are the same
+ * document (no pre-rasterized chrome PNGs since the core svg-text promotion).
+ */
+function buildSnippetChromePieces(spec) {
+    var _a, _b;
+    const pieces = baseChromePieces(spec);
+    const { geometry, theme } = spec;
+    if (spec.showChrome && spec.trafficLights && geometry.titleBar.h > 0) {
+        // Three "●" glyphs in ONE svg text source (a layer per light, three inks
+        // → one coloured raster in the engine, the real face in the preview):
+        // round in both, where a rounded colour tile came out as a squircle in
+        // ffmpeg. Same glyph + spacing as the retired raster (cols 0 / 2 / 4).
+        const size = Math.max(4, Math.round(geometry.titleBar.h * 0.24));
+        const fontSize = Math.max(6, Math.round(size * 1.45)); // ● ink ≈ 0.7em in JetBrains Mono
+        const charW = fontSize * 0.6;
+        const boxW = Math.ceil(charW * 5);
+        const boxH = Math.max(size, Math.round(fontSize * 1.2));
+        const colors = [theme.trafficClose, theme.trafficMinimize, theme.trafficMaximize];
+        pieces.push({
+            rect: {
+                x: geometry.card.x + geometry.padding,
+                y: geometry.titleBar.y + Math.floor((geometry.titleBar.h - boxH) / 2),
+                w: boxW,
+                h: boxH,
+                importance: 4,
+            },
+            source: {
+                type: "text",
+                rasterizer: "svg",
+                renderMode: { kind: "image" },
+                visual: { backgroundColor: "black@0" },
+                style: { fontFamily: "JetBrains Mono", fontSize },
+                layers: colors.map((color, index) => ({
+                    content: { kind: "literal", text: "●" },
+                    style: { fontColor: color },
+                    placement: { hAlign: "left", vAlign: "middle", xExpr: String(Math.round(index * 2 * charW * 1000) / 1000) },
+                })),
+                editor: { owner: "template", label: "traffic-lights" },
+            },
+        });
+    }
+    if (spec.lineNumbers && geometry.gutter.w > 0) {
+        // Real line numbers (the raster path right-aligns them on the code grid,
+        // one column short of the gutter edge) — not the old bars.
+        const fontSize = (_a = spec.fontSize) !== null && _a !== void 0 ? _a : Math.max(8, Math.round(spec.lineStep / 1.5));
+        const charW = (_b = spec.charW) !== null && _b !== void 0 ? _b : fontSize * 0.6;
+        const rightPad = Math.round(charW);
+        for (let line = 0; line < spec.lineCount; line += 1) {
+            const y = geometry.codeArea.y + line * spec.lineStep;
+            if (y >= geometry.codeArea.y + geometry.codeArea.h)
+                break;
+            const h = Math.min(spec.lineStep, geometry.codeArea.y + geometry.codeArea.h - y);
+            if (h < 2)
+                break;
+            pieces.push({
+                rect: {
+                    x: geometry.gutter.x,
+                    y,
+                    w: Math.max(1, geometry.gutter.w - rightPad),
+                    h,
+                    importance: 4,
+                },
+                source: codeTextSource(String(line + 1), fontSize, theme.lineNumber, "right"),
+            });
+        }
+    }
+    return pieces;
+}

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

@@ -0,0 +1,90 @@
+/** Pure state → diff/motion → pipeline-step planning for snippet-morph v1. */
+import { type CoalescedMotionPlan, type LineOp, type MotionUnit } from "../../../_shared/code-diff";
+import { type CodeLanguage, type LexedCodeState } from "../../../_shared/code-lexer";
+export interface MorphTimingKnobs {
+    morphMs: number;
+    holdMs: number;
+    leadMs: number;
+    trailMs: number;
+}
+export declare const DEFAULT_MORPH_TIMING: MorphTimingKnobs;
+/** Maximum independently animated code rasters in one transition document. */
+export declare const MAX_ANIMATED_UNITS = 16;
+export interface TimeWindowMs {
+    /** Step-local start, inclusive. */
+    startMs: number;
+    /** Step-local end, exclusive. */
+    endMs: number;
+    durationMs: number;
+    /** Whole-pipeline start, inclusive. */
+    globalStartMs: number;
+    /** Whole-pipeline end, exclusive. */
+    globalEndMs: number;
+}
+export interface MorphStepTiming {
+    index: number;
+    naturalDurationMs: number;
+    durationMs: number;
+    globalStartMs: number;
+    globalEndMs: number;
+    lead: TimeWindowMs;
+    morph: TimeWindowMs;
+    hold: TimeWindowMs;
+    trail: TimeWindowMs;
+}
+export interface MorphTimeline {
+    stateCount: number;
+    knobs: MorphTimingKnobs;
+    naturalDurationMs: number;
+    durationMs: number;
+    /** Uniform authored-duration scale before integer step quantization. */
+    scale: number;
+    pinned: boolean;
+    steps: MorphStepTiming[];
+}
+export interface TransitionPlan {
+    index: number;
+    /** Null identifies the first reveal transition from the empty state. */
+    fromStateIndex: number | null;
+    toStateIndex: number;
+    ops: LineOp[];
+    units: MotionUnit[];
+    /** Number of animated units before the overlay-budget fallback is applied. */
+    requestedAnimatedUnitCount: number;
+    renderMode: "morph" | "crossfade";
+    coalesced: CoalescedMotionPlan;
+}
+export interface SnippetMorphStepPlan {
+    index: number;
+    stateIndex: number;
+    durationMs: number;
+    timing: MorphStepTiming;
+    transition: TransitionPlan;
+}
+export interface SnippetMorphPlan {
+    language: CodeLanguage;
+    tabWidth: number;
+    states: LexedCodeState[];
+    transitions: TransitionPlan[];
+    timeline: MorphTimeline;
+    steps: SnippetMorphStepPlan[];
+}
+export interface BuildSnippetMorphPlanSpec {
+    states: string[];
+    language?: CodeLanguage;
+    tabWidth?: number;
+    timing?: Partial<MorphTimingKnobs>;
+    /** Authored output duration. Omit/non-positive for the natural recommendation. */
+    targetDurationMs?: number;
+}
+/**
+ * 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.
+ */
+export declare function computeMorphTimeline(stateCount: number, knobs?: Partial<MorphTimingKnobs>, targetDurationMs?: number): MorphTimeline;
+/** Build the complete pure plan consumed by the raster/document seams. */
+export declare function buildSnippetMorphPlan(spec: BuildSnippetMorphPlanSpec): SnippetMorphPlan;