@m0saic/templates 0.2.0

package/dist/m0saic/media/logo-animate/v1/logo-animate.js

@@ -0,0 +1,732 @@
+"use strict";
+/**
+ * @m0saic/media/logo-animate/v1
+ *
+ * Drop in a company-logo SVG → get an animated logo video back.
+ *
+ * The SVG is decomposed into REAL m0 geometry at render time
+ * (`parseSvg → extractGeometry → inferGrid → rectsToM0`): one concrete
+ * cell per logo shape, per-shape silhouettes as inline masks bounded to
+ * their cells, per-tile ranks driving the animation. No overlay fakery,
+ * no baked pixels — the logo's geometry lives in the m0 string, so the
+ * DSL view, structure preview and Render Hero all see it.
+ *
+ * Sources: inline `svg` string (pure), or `svgPath` file (capability
+ * tier, `fs.read`). With neither, a baked placeholder mark (the m0saic
+ * M) renders so defaults are standalone-renderable.
+ *
+ * Scope (v1): rectilinear logos at moderate shape counts convert
+ * faithfully; non-rectilinear shapes still convert and carry best-effort
+ * silhouette masks. Single ink (per-shape SVG color preservation is a
+ * later phase). Logos fill the canvas — render at the logo's own aspect
+ * for an undistorted mark (see `outputHints`).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoAnimateV1 = void 0;
+const types_1 = require("@m0saic/types");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const template_utils_1 = require("@m0saic/template-utils");
+const expressions_1 = require("./expressions");
+const layout_1 = require("./layout");
+const svg_source_1 = require("./svg-source");
+const default_logo_1 = require("./default-logo");
+const tutorial_1 = require("./tutorial");
+const onboarding_cover_1 = require("../../../_shared/onboarding-cover");
+/** Hand-tuned ink/background duos (dark is retuned, not derived). */
+const PRESETS = {
+    light: { ink: "#f97316", bg: "#ffffff" },
+    dark: { ink: "#fb923c", bg: "#0b0b0f" },
+};
+const DEFAULT_PRESET = "light";
+const DEFAULT_FIT = "contain";
+const DEFAULT_ANIMATION = "assemble";
+// "diag" per founder ruling (gate 21): the corner sweep reads as intentional
+// assembly at first sight; scatter stays a knob.
+const DEFAULT_RANK_SET = "diag";
+const DEFAULT_DRIFT_PERCENT = 0;
+const DEFAULT_PACKING = "multi";
+/**
+ * Bitmap-mode raster grid side length per precision tier. Cell count is the
+ * square of these — `ultra` (512² = 262k cells) is maximum fidelity and a very
+ * long render (the live editor preview auto-disables past its frame budget),
+ * but it completes.
+ */
+const BITMAP_PRECISION_RES = {
+    draft: 32,
+    balanced: 64,
+    crisp: 128,
+    fine: 256,
+    ultra: 512,
+};
+const DEFAULT_BITMAP_PRECISION = "balanced";
+const DEFAULT_SPAWN_DUR_MS = 1000;
+const DEFAULT_TILE_FADE_MS = 220;
+const DEFAULT_HOLD_DUR_MS = 600;
+const DEFAULT_FADE_OUT_DUR_MS = 700;
+const DEFAULT_TILE_OFFSET_PX = 1;
+const DEFAULT_LOOP_SEC = 3.2;
+const DEFAULT_PROGRESS_SEC = 2.0;
+const DEFAULT_SHIMMER_SEC = 1.2;
+const DEFAULT_SHIMMER_WIDTH = 0.18;
+const DEFAULT_FEATHER = 0.02;
+// logo_loop shape constants (the brand/logo/v3 defaults; loopSec is the
+// exposed knob, the envelope stays fixed for v1).
+const LOOP_IN_END = 0.25;
+const LOOP_OUT_START = 0.75;
+const LOOP_START_DELAY = 0.1;
+const LOOP_END_DELAY = 0.2;
+// breathing envelope constants (the brand/logo/v3 loading-UI values).
+const BREATHING_BASE_MIN = 0.18;
+const BREATHING_BASE_MAX = 0.32;
+const BREATHING_PULSE_SEC = 1.6;
+const BREATHING_SHIMMER_AMP = 0.75;
+/** Treat cleared/blank color pickers as unset (empty string is not nullish). */
+function pickColor(value, fallback) {
+    if (typeof value === "string" && value.trim() === "")
+        return fallback;
+    return value !== null && value !== void 0 ? value : fallback;
+}
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    svgPath: {
+        type: "media",
+        required: false,
+        description: "Your logo as an SVG file. Only <path>/<rect> shapes are parsed — flatten with Inkscape's Object to Path first if needed.",
+        meta: {
+            control: { picker: "file", accept: ["image"] },
+            ui: { label: "Logo SVG", order: 1, primary: true },
+        },
+    },
+    svg: {
+        type: "string",
+        required: false,
+        description: "Inline SVG content. Bypasses the file picker — useful for CLI/programmatic callers. Leave both empty to see the placeholder mark.",
+        meta: { control: { placeholder: "built-in M" }, ui: { label: "SVG string", order: 2 } },
+    },
+    driftPercent: {
+        type: "number",
+        required: false,
+        description: "Drift tolerance for grid inference (% of min canvas dim).",
+        meta: {
+            constraints: { min: 0, max: 5 },
+            ui: { label: "Drift %" },
+        },
+    },
+    packing: {
+        type: "string",
+        required: false,
+        description: 'Layer-packing strategy: "one" or "multi".',
+        meta: {
+            constraints: { oneOf: ["one", "multi"] },
+            ui: { label: "Packing", hidden: true },
+        },
+    },
+    bitmap: {
+        type: "boolean",
+        required: false,
+        description: "Rasterize the SVG to a pixel grid and animate pixel-by-pixel. Opt-in — a high-resolution grid is a heavy render. Use when a logo converts to a single shape and won't otherwise animate.",
+        meta: { ui: { label: "Bitmap mode", order: 3 } },
+    },
+    bitmapPrecision: {
+        type: "string",
+        required: false,
+        description: "Bitmap-mode fidelity (raster resolution). Higher = crisper but far more frames / slower renders. ultra (512²) is maximum fidelity — it renders but is too heavy to preview live.",
+        meta: {
+            constraints: { oneOf: ["draft", "balanced", "crisp", "fine", "ultra"] },
+            control: {
+                options: [
+                    { value: "draft", label: "Draft (32²) — fast" },
+                    { value: "balanced", label: "Balanced (64²)" },
+                    { value: "crisp", label: "Crisp (128²)" },
+                    { value: "fine", label: "Fine (256²) — heavy" },
+                    { value: "ultra", label: "Ultra (512²) — very long, no live preview" },
+                ],
+            },
+            ui: { label: "Bitmap precision" },
+        },
+    },
+    animation: {
+        type: "string",
+        required: false,
+        description: "assemble: tiles spawn in, hold, fade out · logo_loop: seamless reveal loop · progress_fill: fills like a loading bar · breathing: pulsing glow with a travelling shine · shimmer: travelling highlight band.",
+        meta: {
+            constraints: {
+                oneOf: ["assemble", "logo_loop", "progress_fill", "breathing", "shimmer"],
+            },
+            ui: { label: "Animation", order: 1 },
+        },
+    },
+    rankSet: {
+        type: "string",
+        required: false,
+        description: "Tile ordering: scatter (pixelate-in), diag (corner sweep), cascade, radial (center-out).",
+        meta: {
+            constraints: { oneOf: ["scatter", "diag", "cascade", "radial"] },
+            ui: { label: "Order", order: 2 },
+        },
+    },
+    spawnDurMs: {
+        type: "number",
+        required: false,
+        description: "Stagger from first to last tile starting its fade-in.",
+        meta: {
+            constraints: { min: 100, max: 60000 },
+            ui: {
+                label: "Spawn (ms)",
+                visibleWhen: { prop: "animation", equals: "assemble" },
+            },
+        },
+    },
+    tileFadeMs: {
+        type: "number",
+        required: false,
+        description: "Per-tile fade-in duration.",
+        meta: {
+            constraints: { min: 0, max: 10000 },
+            ui: {
+                label: "Fade (ms)",
+                visibleWhen: { prop: "animation", equals: "assemble" },
+            },
+        },
+    },
+    holdDurMs: {
+        type: "number",
+        required: false,
+        description: "Hold duration at full alpha before fade-out begins.",
+        meta: {
+            constraints: { min: 0, max: 60000 },
+            ui: {
+                label: "Hold (ms)",
+                visibleWhen: { prop: "animation", equals: "assemble" },
+            },
+        },
+    },
+    fadeOutDurMs: {
+        type: "number",
+        required: false,
+        description: "Global fade-out duration.",
+        meta: {
+            constraints: { min: 0, max: 10000 },
+            ui: {
+                label: "Fade out (ms)",
+                visibleWhen: { prop: "animation", equals: "assemble" },
+            },
+        },
+    },
+    tileOffsetPx: {
+        type: "number",
+        required: false,
+        description: "Pixel offset (down/right) each tile settles from.",
+        meta: {
+            constraints: { min: 0, max: 100 },
+            ui: {
+                label: "Settle (px)",
+                visibleWhen: { prop: "animation", equals: "assemble" },
+            },
+        },
+    },
+    loopSec: {
+        type: "number",
+        required: false,
+        description: "Seamless loop period.",
+        meta: {
+            constraints: { min: 0.5, max: 120 },
+            ui: {
+                label: "Loop (s)",
+                visibleWhen: { prop: "animation", equals: "logo_loop" },
+            },
+        },
+    },
+    progress: {
+        type: "number",
+        required: false,
+        description: "Static fill level (0..1). Leave empty to animate the fill.",
+        meta: {
+            control: { placeholder: "auto (animated)" },
+            constraints: { min: 0, max: 1 },
+            ui: {
+                label: "Progress",
+                visibleWhen: { prop: "animation", equals: "progress_fill" },
+            },
+        },
+    },
+    progressSec: {
+        type: "number",
+        required: false,
+        description: "Fill ramp duration.",
+        meta: {
+            constraints: { min: 0.2, max: 120 },
+            ui: {
+                label: "Fill (s)",
+                visibleWhen: { prop: "animation", equals: "progress_fill" },
+            },
+        },
+    },
+    oneShot: {
+        type: "boolean",
+        required: false,
+        description: "Fill once and hold instead of repeating.",
+        meta: {
+            ui: {
+                label: "One-shot",
+                visibleWhen: { prop: "animation", equals: "progress_fill" },
+            },
+        },
+    },
+    shimmerSec: {
+        type: "number",
+        required: false,
+        description: "Band sweep period (shimmer + breathing modes).",
+        meta: {
+            constraints: { min: 0.2, max: 120 },
+            ui: { label: "Shimmer (s)" },
+        },
+    },
+    shimmerWidth: {
+        type: "number",
+        required: false,
+        description: "Band width as a fraction of rank space (shimmer + breathing).",
+        meta: {
+            constraints: { min: 0.02, max: 1 },
+            ui: { label: "Band width" },
+        },
+    },
+    feather: {
+        type: "number",
+        required: false,
+        description: "Rank-space tolerance softening mode boundaries.",
+        meta: {
+            constraints: { min: 0, max: 0.5 },
+            ui: { label: "Feather", hidden: true },
+        },
+    },
+    fit: {
+        type: "string",
+        required: false,
+        description: '"contain" letterboxes the logo at its own aspect; "fill" stretches it across the canvas.',
+        meta: {
+            constraints: { oneOf: ["contain", "fill"] },
+            ui: { label: "Fit", order: 4 },
+        },
+    },
+    preset: {
+        type: "string",
+        required: false,
+        description: "Hand-tuned ink/background duo.",
+        meta: {
+            constraints: { oneOf: ["light", "dark"] },
+            ui: { label: "Preset", order: 1 },
+        },
+    },
+    color: {
+        type: "string",
+        required: false,
+        description: "Ink override — every logo shape fills with this color.",
+        meta: {
+            constraints: { isColor: true },
+            control: { placeholder: "preset ink", colorPicker: true },
+            ui: { label: "Ink", order: 2 },
+        },
+    },
+    backgroundColor: {
+        type: "string",
+        required: false,
+        description: "Canvas background override.",
+        meta: {
+            constraints: { isColor: true },
+            control: { placeholder: "preset background", colorPicker: true },
+            ui: { label: "Background", order: 3 },
+        },
+    },
+});
+exports.LogoAnimateV1 = {
+    id: (0, types_1.asTemplateId)("@m0saic/media/logo-animate/v1"),
+    label: "Logo Animate",
+    version: 1,
+    description: "Drop in an SVG logo — get an animated logo video. The SVG becomes real m0 geometry (one cell per shape, silhouette masks), animated per-tile: assemble-in, seamless loop, progress fill, breathing glow, or shimmer.",
+    capabilities: {
+        tier: "capability",
+        caps: { fs: { read: true } },
+    },
+    tags: ["media", "logo", "animated", "svg-to-mosaic", "brand", "designers", "marketers", "svg", "intro"],
+    outputHints: {
+        fps: 30,
+        durationMs: DEFAULT_SPAWN_DUR_MS +
+            DEFAULT_TILE_FADE_MS +
+            DEFAULT_HOLD_DUR_MS +
+            DEFAULT_FADE_OUT_DUR_MS,
+        width: 1080,
+        height: 1080,
+        note: "The logo fills the canvas — render at the logo's own aspect ratio for an undistorted mark (square default suits square marks).",
+        // Editor preview lands mid-hold so the assembled logo is visible
+        // while the user picks a file; scrubbing back shows the spawn.
+        posterTimeMs: DEFAULT_SPAWN_DUR_MS + DEFAULT_TILE_FADE_MS + Math.round(DEFAULT_HOLD_DUR_MS / 2),
+        format: { kind: "video", container: "mp4" },
+    },
+    propsSchema,
+    defaultProps: {
+        driftPercent: DEFAULT_DRIFT_PERCENT,
+        packing: DEFAULT_PACKING,
+        bitmap: false,
+        bitmapPrecision: DEFAULT_BITMAP_PRECISION,
+        animation: DEFAULT_ANIMATION,
+        rankSet: DEFAULT_RANK_SET,
+        spawnDurMs: DEFAULT_SPAWN_DUR_MS,
+        tileFadeMs: DEFAULT_TILE_FADE_MS,
+        holdDurMs: DEFAULT_HOLD_DUR_MS,
+        fadeOutDurMs: DEFAULT_FADE_OUT_DUR_MS,
+        tileOffsetPx: DEFAULT_TILE_OFFSET_PX,
+        loopSec: DEFAULT_LOOP_SEC,
+        progressSec: DEFAULT_PROGRESS_SEC,
+        oneShot: false,
+        shimmerSec: DEFAULT_SHIMMER_SEC,
+        shimmerWidth: DEFAULT_SHIMMER_WIDTH,
+        feather: DEFAULT_FEATHER,
+        fit: DEFAULT_FIT,
+        preset: DEFAULT_PRESET,
+    },
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        const d = this.defaultProps;
+        const driftPercent = (_a = props.driftPercent) !== null && _a !== void 0 ? _a : d.driftPercent;
+        const packing = (_b = props.packing) !== null && _b !== void 0 ? _b : d.packing;
+        const bitmap = (_c = props.bitmap) !== null && _c !== void 0 ? _c : d.bitmap;
+        const bitmapPrecision = (_d = props.bitmapPrecision) !== null && _d !== void 0 ? _d : d.bitmapPrecision;
+        const bitmapRes = (_e = BITMAP_PRECISION_RES[bitmapPrecision]) !== null && _e !== void 0 ? _e : BITMAP_PRECISION_RES[DEFAULT_BITMAP_PRECISION];
+        const animation = (_f = props.animation) !== null && _f !== void 0 ? _f : d.animation;
+        const rankSetMode = (_g = props.rankSet) !== null && _g !== void 0 ? _g : d.rankSet;
+        const spawnDurMs = (_h = props.spawnDurMs) !== null && _h !== void 0 ? _h : d.spawnDurMs;
+        const tileFadeMs = (_j = props.tileFadeMs) !== null && _j !== void 0 ? _j : d.tileFadeMs;
+        const holdDurMs = (_k = props.holdDurMs) !== null && _k !== void 0 ? _k : d.holdDurMs;
+        const fadeOutDurMs = (_l = props.fadeOutDurMs) !== null && _l !== void 0 ? _l : d.fadeOutDurMs;
+        const tileOffsetPx = (_m = props.tileOffsetPx) !== null && _m !== void 0 ? _m : d.tileOffsetPx;
+        const loopSec = (_o = props.loopSec) !== null && _o !== void 0 ? _o : d.loopSec;
+        const progressSec = (_p = props.progressSec) !== null && _p !== void 0 ? _p : d.progressSec;
+        const oneShot = (_q = props.oneShot) !== null && _q !== void 0 ? _q : d.oneShot;
+        const shimmerSec = (_r = props.shimmerSec) !== null && _r !== void 0 ? _r : d.shimmerSec;
+        const shimmerWidth = (_s = props.shimmerWidth) !== null && _s !== void 0 ? _s : d.shimmerWidth;
+        const feather = (_t = props.feather) !== null && _t !== void 0 ? _t : d.feather;
+        const fit = (_u = props.fit) !== null && _u !== void 0 ? _u : d.fit;
+        const preset = props.preset === "dark" ? "dark" : "light";
+        const duo = PRESETS[preset];
+        const ink = pickColor(props.color, duo.ink);
+        const bg = pickColor(props.backgroundColor, duo.bg);
+        const W = ctx.output.width;
+        const H = ctx.output.height;
+        const fps = ctx.output.fps;
+        const fail = (message, code) => (0, template_utils_1.makeErrorMosaic)(message, {
+            title: "Logo Animate",
+            width: W,
+            height: H,
+            errorCode: code,
+        });
+        // ── Validation ────────────────────────────────────────────────
+        const errs = [];
+        if (props.svgPath && props.svg) {
+            errs.push("specify exactly one of `svgPath` or `svg` (not both)");
+        }
+        if (!(driftPercent >= 0 && driftPercent <= 5)) {
+            errs.push(`driftPercent must be in [0, 5] (got ${driftPercent})`);
+        }
+        if (packing !== "one" && packing !== "multi") {
+            errs.push(`packing must be "one" or "multi" (got "${packing}")`);
+        }
+        const PRECISIONS = ["draft", "balanced", "crisp", "fine", "ultra"];
+        if (!PRECISIONS.includes(bitmapPrecision)) {
+            errs.push(`bitmapPrecision must be one of ${PRECISIONS.join("/")} (got "${bitmapPrecision}")`);
+        }
+        const ANIMATIONS = [
+            "assemble",
+            "logo_loop",
+            "progress_fill",
+            "breathing",
+            "shimmer",
+        ];
+        if (!ANIMATIONS.includes(animation)) {
+            errs.push(`animation must be one of ${ANIMATIONS.join("/")} (got "${animation}")`);
+        }
+        const RANK_SETS = ["scatter", "diag", "cascade", "radial"];
+        if (!RANK_SETS.includes(rankSetMode)) {
+            errs.push(`rankSet must be one of ${RANK_SETS.join("/")} (got "${rankSetMode}")`);
+        }
+        if (!(spawnDurMs >= 100 && spawnDurMs <= 60000)) {
+            errs.push(`spawnDurMs must be in [100, 60000] (got ${spawnDurMs})`);
+        }
+        if (!(tileFadeMs >= 0 && tileFadeMs <= 10000)) {
+            errs.push(`tileFadeMs must be in [0, 10000] (got ${tileFadeMs})`);
+        }
+        if (!(holdDurMs >= 0 && holdDurMs <= 60000)) {
+            errs.push(`holdDurMs must be in [0, 60000] (got ${holdDurMs})`);
+        }
+        if (!(fadeOutDurMs >= 0 && fadeOutDurMs <= 10000)) {
+            errs.push(`fadeOutDurMs must be in [0, 10000] (got ${fadeOutDurMs})`);
+        }
+        if (!(tileOffsetPx >= 0 && tileOffsetPx <= 100)) {
+            errs.push(`tileOffsetPx must be in [0, 100] (got ${tileOffsetPx})`);
+        }
+        if (!(loopSec >= 0.5 && loopSec <= 120)) {
+            errs.push(`loopSec must be in [0.5, 120] (got ${loopSec})`);
+        }
+        if (props.progress !== undefined && !(props.progress >= 0 && props.progress <= 1)) {
+            errs.push(`progress must be in [0, 1] (got ${props.progress})`);
+        }
+        if (!(progressSec >= 0.2 && progressSec <= 120)) {
+            errs.push(`progressSec must be in [0.2, 120] (got ${progressSec})`);
+        }
+        if (!(shimmerSec >= 0.2 && shimmerSec <= 120)) {
+            errs.push(`shimmerSec must be in [0.2, 120] (got ${shimmerSec})`);
+        }
+        if (!(shimmerWidth >= 0.02 && shimmerWidth <= 1)) {
+            errs.push(`shimmerWidth must be in [0.02, 1] (got ${shimmerWidth})`);
+        }
+        if (!(feather >= 0 && feather <= 0.5)) {
+            errs.push(`feather must be in [0, 0.5] (got ${feather})`);
+        }
+        if (fit !== "contain" && fit !== "fill") {
+            errs.push(`fit must be "contain" or "fill" (got "${fit}")`);
+        }
+        if (errs.length) {
+            return fail(errs.join(" | "), "LOGO_ANIMATE_PROPS");
+        }
+        // ── 1) Resolve SVG text (inline / file / baked placeholder) ──
+        let svgText;
+        try {
+            svgText = (0, svg_source_1.loadSvgText)(props, default_logo_1.DEFAULT_LOGO_SVG);
+        }
+        catch (err) {
+            return fail(`Failed to read svgPath "${props.svgPath}": ${err instanceof Error ? err.message : String(err)}`, "LOGO_ANIMATE_READ");
+        }
+        // ── 2) SVG → m0 : bitmap raster (opt-in) OR vector grid ──────
+        let logoM0;
+        let masksByKey;
+        // Intrinsic logo aspect — the source for `fit: "contain"` letterboxing.
+        let intrinsic;
+        if (bitmap) {
+            // Rasterize to a pixel grid and animate the pixels — solid square cells,
+            // no silhouette masks. Deliberately heavy (bitmapRes² cells): opt-in.
+            try {
+                const grid = await (0, svg_source_1.rasterizeSvgToBinaryGrid)(svgText, bitmapRes);
+                logoM0 = String((0, dsl_stdlib_1.binaryGridToM0)(grid));
+            }
+            catch (err) {
+                return fail(`Bitmap rasterization failed: ${err instanceof Error ? err.message : String(err)}`, "LOGO_ANIMATE_CONVERT");
+            }
+            masksByKey = {};
+            // The SVG is contain-fit into a square res×res raster, so a bitmap's
+            // intrinsic aspect is always 1:1.
+            intrinsic = { w: bitmapRes, h: bitmapRes };
+        }
+        else {
+            // One conversion pass → shared grid (m0 + masks + ranks align).
+            let logo;
+            try {
+                logo = (0, svg_source_1.buildLogoGrid)(svgText, { driftPercent, packing });
+            }
+            catch (err) {
+                return fail(`SVG conversion failed: ${err instanceof Error ? err.message : String(err)}`, "LOGO_ANIMATE_CONVERT");
+            }
+            logoM0 = logo.m0;
+            masksByKey = (0, svg_source_1.buildMasksByStableKey)(logo.grid, logo.m0);
+            intrinsic = logo.intrinsic;
+        }
+        // ── 3) Visible tiles ─────────────────────────────────────────
+        const frames = (0, dsl_stdlib_1.queryFrames)(logoM0, { width: W, height: H }).logical();
+        if (frames.length === 0) {
+            return fail("Converted m0 contains no visible tiles to animate", "LOGO_ANIMATE_EMPTY");
+        }
+        // A non-rectilinear SVG collapses to a SINGLE (masked) cell — there's
+        // nothing to stagger, so it can't animate. Point the user at bitmap mode
+        // instead of silently rendering one static frame.
+        if (!bitmap && frames.length === 1) {
+            return fail("This SVG converts to a single shape — there are no separate cells to stagger, so it won't animate. " +
+                "Enable Bitmap mode to rasterize the logo and animate it pixel-by-pixel (higher render cost).", "LOGO_ANIMATE_SINGLE_FRAME");
+        }
+        // ── 4) Per-tile ranks from geometry (no dictionary) ──────────
+        let rankOf;
+        if (rankSetMode === "scatter") {
+            const tiles = frames.map((f) => ({
+                x: f.x,
+                y: f.y,
+                logicalIndex: f.logicalIndex,
+            }));
+            const ranks = (0, expressions_1.buildPseudoRanks)(tiles);
+            rankOf = (_key, i) => ranks[i];
+        }
+        else {
+            const rankSet = (0, dsl_stdlib_1.generateStableKeyRankSet)((0, dsl_stdlib_1.rankFramesFromM0)(logoM0, { canvasW: W, canvasH: H }), rankSetMode);
+            rankOf = (key) => { var _a; return (_a = rankSet.ranks[key]) !== null && _a !== void 0 ? _a : 0; };
+        }
+        // ── 5) Phase timing (assemble) ────────────────────────────────
+        const spawnDurSec = spawnDurMs / 1000;
+        const tileFadeSec = tileFadeMs / 1000;
+        const exitStartSec = spawnDurSec + tileFadeSec + holdDurMs / 1000;
+        const fadeOutSec = fadeOutDurMs / 1000;
+        const overlayFor = (rank) => {
+            switch (animation) {
+                case "logo_loop":
+                    return {
+                        enable: (0, expressions_1.buildLoopEnableExpr)(rank, {
+                            loopSec,
+                            inEnd: LOOP_IN_END,
+                            outStart: LOOP_OUT_START,
+                            feather,
+                            fps,
+                            startDelay: LOOP_START_DELAY,
+                            endDelay: LOOP_END_DELAY,
+                            easing: "smoothstep",
+                        }),
+                    };
+                case "progress_fill":
+                    return {
+                        enable: (0, expressions_1.buildProgressFillEnableExpr)(rank, {
+                            progress: props.progress,
+                            progressSec,
+                            oneShot,
+                            feather,
+                            fps,
+                        }),
+                    };
+                case "breathing":
+                    return {
+                        alpha: (0, expressions_1.buildBreathingAlphaExpr)(rank, {
+                            baseMin: BREATHING_BASE_MIN,
+                            baseMax: BREATHING_BASE_MAX,
+                            basePulseSec: BREATHING_PULSE_SEC,
+                            shimmerSec,
+                            shimmerWidth,
+                            shimmerAmp: BREATHING_SHIMMER_AMP,
+                            feather,
+                            fps,
+                        }),
+                    };
+                case "shimmer":
+                    return {
+                        enable: (0, expressions_1.buildShimmerEnableExpr)(rank, { shimmerSec, shimmerWidth, feather, fps }),
+                    };
+                case "assemble":
+                default: {
+                    const alpha = (0, expressions_1.buildModuleAlphaExpr)(rank, {
+                        spawnDurSec,
+                        tileFadeSec,
+                        exitStartSec,
+                        fadeOutSec,
+                    });
+                    const offset = (0, expressions_1.buildTileOffsetExpr)(rank, {
+                        spawnDurSec,
+                        tileFadeSec,
+                        offsetPx: tileOffsetPx,
+                    });
+                    return offset === "0" ? { alpha } : { alpha, xExpr: offset, yExpr: offset };
+                }
+            }
+        };
+        // ── 6) One animated, silhouette-masked color tile per shape ──
+        const sources = frames.map((f, i) => {
+            const key = String(f.meta.stableKey);
+            const entry = masksByKey[key];
+            const mask = entry
+                ? { kind: "inline-mask", localPath: entry.localPath, bounds: entry.bounds }
+                : undefined;
+            return (0, template_utils_1.makeColorTile)(ink, { overlay: overlayFor(rankOf(key, i)), mask });
+        });
+        // ── 7) Aspect placement ───────────────────────────────────────
+        // "fill" (or an exact-fit canvas) → the logo geometry IS the doc.
+        // "contain" → nest the logo as a size-declared child mosaic inside
+        // one placeRect-carved fit rect; null-tile margins show the doc
+        // background. Nested children animate on the parent's global `t`.
+        const contain = fit === "contain"
+            ? (0, layout_1.buildContainLayout)(W, H, intrinsic.w, intrinsic.h)
+            : null;
+        if (!contain || contain.exactFit) {
+            return {
+                kind: "mosaic_document",
+                version: 1,
+                m0: (0, dsl_stdlib_1.toM0String)(logoM0, "LogoAnimateV1"),
+                sources,
+                assets: {},
+                backgroundColor: bg,
+                size: { width: W, height: H },
+                fps,
+                durationMs: ctx.output.durationMs,
+            };
+        }
+        const child = {
+            kind: "mosaic_document",
+            version: 1,
+            m0: (0, dsl_stdlib_1.toM0String)(logoM0, "LogoAnimateV1-logo"),
+            sources,
+            assets: {},
+            backgroundColor: bg,
+            // The child MUST declare its size (the fit rect) or it renders at
+            // the parent tile's default and stretches.
+            size: { width: contain.rect.w, height: contain.rect.h },
+            fps,
+            durationMs: ctx.output.durationMs,
+        };
+        return {
+            kind: "mosaic_document",
+            version: 1,
+            m0: (0, dsl_stdlib_1.toM0String)(contain.m0, "LogoAnimateV1-contain"),
+            children: { logo: child },
+            sources: [{ type: "mosaic", ref: "logo" }],
+            assets: {},
+            backgroundColor: bg,
+            size: { width: W, height: H },
+            fps,
+            durationMs: ctx.output.durationMs,
+        };
+    },
+    // Editor-only first-open cover — the mosaic-branding BAND. t=0 of the
+    // default render is BLANK (assemble starts from alpha 0), so the hero is
+    // the ASSEMBLED placeholder M: full-alpha static sources with silhouette
+    // masks, INLINED FLAT (never a nested child — the child composite was the
+    // gate-21 stretch source), centered px-exactly on its preset plate at the
+    // near-full-bleed scale the founder ruled, above the brand band.
+    async renderCover(props, ctx) {
+        const preset = props.preset === "dark" ? "dark" : "light";
+        const duo = PRESETS[preset];
+        const ink = pickColor(props.color, duo.ink);
+        const bg = pickColor(props.backgroundColor, duo.bg);
+        // The kit band split is exact px rows — the hero box IS the scene cell.
+        const heroBox = (0, onboarding_cover_1.brandedCoverHeroBox)(ctx, "band");
+        const sceneW = heroBox.width;
+        const sceneH = heroBox.height;
+        const logo = (0, svg_source_1.buildLogoGrid)(default_logo_1.DEFAULT_LOGO_SVG, { driftPercent: 0, packing: "multi" });
+        const masksByKey = (0, svg_source_1.buildMasksByStableKey)(logo.grid, logo.m0);
+        // Exact intrinsic aspect (1:1 for the M), centered on a px/4 basis —
+        // quantization ≤4px per side (the founder's 1:1 cover contract).
+        const contain = (0, layout_1.buildContainLayout)(Math.max(2, Math.round(sceneW * 0.97)), Math.max(2, Math.round(sceneH * 0.95)), logo.intrinsic.w, logo.intrinsic.h);
+        const logoFrames = (0, dsl_stdlib_1.queryFrames)(logo.m0, { width: contain.rect.w, height: contain.rect.h }).logical();
+        const logoSources = logoFrames.map((f) => {
+            const entry = masksByKey[String(f.meta.stableKey)];
+            const mask = entry
+                ? { kind: "inline-mask", localPath: entry.localPath, bounds: entry.bounds }
+                : undefined;
+            return (0, template_utils_1.makeColorTile)(ink, { mask });
+        });
+        const u = (px) => Math.max(1, Math.round(px / 4));
+        const padW = Math.max(2, (sceneW - contain.rect.w) / 2);
+        const padH = Math.max(2, (sceneH - contain.rect.h) / 2);
+        const sceneSplit = String((0, dsl_stdlib_1.weightedSplit)([u(padH), u(contain.rect.h), u(padH)], "row", {
+            claimants: [
+                "-",
+                String((0, dsl_stdlib_1.weightedSplit)([u(padW), u(contain.rect.w), u(padW)], "col", { claimants: ["-", logo.m0, "-"] })),
+                "-",
+            ],
+        }));
+        return (0, onboarding_cover_1.buildBrandedCover)({
+            ctx,
+            variant: "band",
+            copy: { productName: "Logo Animate", title: "Drop in an SVG; get an animated logo video." },
+            hero: (theme) => (0, onboarding_cover_1.onboardingFrame)((0, onboarding_cover_1.onboardingOverlay)((0, onboarding_cover_1.onboardingSolid)(bg), { m0: sceneSplit, sources: logoSources }), theme.borderStrong),
+        });
+    },
+    // Editor "?" tutorial: six SaaS beats with LIVE nested logo renders —
+    // hero assemble, the three built-in marks, the bring-your-own-SVG
+    // how-to (flatten guidance), two animations running side by side,
+    // bitmap mode for curvy marks, and the knobs recap. See tutorial.ts.
+    renderTutorial(_props, ctx) {
+        return (0, tutorial_1.renderLogoAnimateTutorial)(ctx);
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.LogoAnimateV1);
+exports.default = exports.LogoAnimateV1;