@m0saic/templates 0.2.0

package/dist/m0saic/alpine/stat-card/v1/stat-card.js

@@ -0,0 +1,295 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlpineStatCard = void 0;
+const types_1 = require("@m0saic/types");
+const template_utils_1 = require("@m0saic/template-utils");
+const alpine_card_1 = require("../../_shared/alpine-card");
+const onboarding_cover_1 = require("../../../_shared/onboarding-cover");
+const alpine_glyphs_1 = require("../../_shared/alpine-glyphs");
+const alpine_theme_1 = require("../../_shared/alpine-theme");
+const alpine_anim_1 = require("../../_shared/alpine-anim");
+// Alpine pack citizen: all colors come from the shared alpine theme (light by
+// default, `preset:"dark"` for the night look). The FFmpeg Weekly Pulse hero
+// keeps its exact dark KPI look by passing `preset:"dark"` + its own `accent`
+// (bright green) + `backgroundColor` (#161b22) as overrides — explicit props win.
+const GLYPH_COLOR = "#0d1117"; // dark glyph cut into the accent chip
+const STAT_CARD_ID = "@m0saic/alpine/stat-card/v1";
+// Band weights (header / value / delta) + inner gaps, as row weights.
+const BANDS = { padY: 9, header: 22, gap1: 4, value: 42, gap2: 4, delta: 18, padYb: 9 };
+// Font sizes as a fraction of card height; capped by fit:"contain".
+const LABEL_FRAC = 0.11, VALUE_FRAC = 0.30, DELTA_FRAC = 0.115, SUB_FRAC = 0.085;
+const PAD_FRAC = 0.085; // card inner padding (fraction of min dimension)
+// Placement laundering: the card's elements ride placeInsetPieces — cells
+// quantize outward to a divisor lattice (precision bounds at ~120, the modern
+// canvas-family gcd) and each source carries a placement.inset that paints it
+// back on the EXACT computed rect. Zero visual drift (the previous
+// placeOptimizedPieces drift budget moved edges ≈1–2px); same escape from the
+// coprime-pixel precision blowup (exact placeRects pins the card to 100%
+// precision / a huge m0 at odd canvases). Hostile prime-dim cells degrade to
+// exact placement on that axis (the same degradation drift had there).
+// ---------------------------------------------------------------------------
+// Leaves
+// ---------------------------------------------------------------------------
+function txt(text, fontSize, color, hAlign = "left") {
+    // FIXED font (NO fit:"contain" — contain scales text to the cell HEIGHT and then
+    // clips the width on a long line, which cut off the "%" / "vs last week"). Callers
+    // size each font to fit its cell WIDTH up front (capFont), so a fixed font never clips.
+    return { type: "text", visual: { backgroundColor: "black@0" }, layers: [{ content: { kind: "literal", text: text || " " }, style: { fontSize, fontColor: color }, placement: { hAlign, vAlign: "middle" } }] };
+}
+function exprTxt(expr, fontSize, color) {
+    return { type: "text", renderMode: { kind: "video" }, visual: { backgroundColor: "black@0" }, layers: [{ content: { kind: "expr", expr, eval: "frame" }, style: { fontSize, fontColor: color }, placement: { hAlign: "left", vAlign: "middle" } }] };
+}
+/** SVG-triangle arrow (color tile masked by an equilateral path; crisp + undistorted). */
+function triangle(dir, color, cellW, cellH) {
+    const S = Math.min(cellW, cellH) * 0.72, cx = cellW / 2, cy = cellH / 2, half = S / 2, ht = S * 0.866;
+    const top = cy - ht / 2, bot = cy + ht / 2, n = (x) => Math.round(x * 10) / 10;
+    const localPath = dir === "up"
+        ? `M ${n(cx)} ${n(top)} L ${n(cx + half)} ${n(bot)} L ${n(cx - half)} ${n(bot)} Z`
+        : `M ${n(cx - half)} ${n(top)} L ${n(cx + half)} ${n(top)} L ${n(cx)} ${n(bot)} Z`;
+    return (0, template_utils_1.makeColorTile)(color, { mask: { kind: "inline-mask", localPath, bounds: { x: 0, y: 0, width: cellW, height: cellH } } });
+}
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    // ── Primary props — flat, always visible (declaration order = display order). ──
+    label: { type: "string", required: true, description: "Metric label (e.g. \"Commits\").", meta: { ui: { label: "Label", order: 1 } } },
+    value: { type: "string", required: true, description: "Headline value, pre-formatted (e.g. \"1,243\", \"96.7%\").", meta: { ui: { label: "Value", order: 2 } } },
+    // Text inputs together, then the enum toggles together, then the color pickers
+    // together — like controls near like controls.
+    delta: { type: "string", required: false, description: "Signed change, pre-formatted (e.g. \"+12.4%\"). Omit for no delta.", meta: { ui: { label: "Delta", order: 3 } } },
+    sublabel: { type: "string", required: false, description: "Muted caption next to the delta (e.g. \"vs last week\").", meta: { ui: { label: "Sublabel", order: 4 } } },
+    direction: { type: "string", required: false, description: "Delta direction — arrow + color (green up / red down / muted flat).", meta: { constraints: { oneOf: ["up", "down", "flat"] }, ui: { label: "Direction", order: 5 } } },
+    icon: { type: "string", required: false, description: "Named glyph for the accent chip (shared alpine catalog). A derived HUMAN view of the raw iconPath agent prop: picking a name WRITES the SVG path into iconPath (the stored, code-friendly value); a bespoke agent-written path shows as no selection.", meta: { constraints: { oneOf: alpine_glyphs_1.ALPINE_GLYPH_NAMES }, ui: { label: "Icon", order: 6, consumer: "human" }, control: { syncsTo: [{ prop: "iconPath", map: { kind: "lookup", table: alpine_glyphs_1.ALPINE_GLYPHS } }] } } },
+    renderMode: { type: "string", required: false, description: "Reveal quality/cost. \"premium\" (default): soft alpha crossfade — best look, a per-pixel geq. \"light\": geq-free (header static, delta band slides). The FFmpeg pulse hero opts into light.", meta: { constraints: { oneOf: ["premium", "light"] }, ui: { label: "Render Mode", order: 7 } } },
+    preset: { type: "string", required: false, description: "Alpine theme variant.", meta: { constraints: { oneOf: ["light", "dark"] }, ui: { label: "Preset", order: 8 } } },
+    accent: { type: "string", required: false, description: "Accent color (icon chip + up-delta). Defaults to the alpine primary.", meta: { constraints: { isColor: true }, control: { placeholder: "theme primary", colorPicker: true, defaultColor: "#2563EB" }, ui: { label: "Accent", order: 9 } } },
+    backgroundColor: { type: "string", required: false, description: "Card surface color. \"black@0\" → transparent (composed under a chrome).", meta: { constraints: { isColor: true }, control: { placeholder: "theme card", colorPicker: true, defaultColor: "#FFFFFF" }, ui: { label: "Card color", order: 10 } } },
+    // ── Collapsible groups (surfaced — nice human controls, NOT agent props). ──
+    anim: { type: "group", required: false, description: "Intro reveal: reduceMotion, intro length, easing, count-up.", meta: { ui: { label: "Animation", order: 11, collapsedByDefault: true } }, fields: { ...alpine_anim_1.ALPINE_ANIM_FIELDS, countUp: (0, alpine_anim_1.fBool)("Count up", "Count the value up on intro.") } },
+    theme: { type: "group", required: false, description: "Opt into a theme source. Uses the local palette by default; set a producer slug + namespace to pull shared design tokens. Explicit accent/card color still win.", meta: { ui: { label: "Theme", order: 12, collapsedByDefault: true } }, fields: { slug: (0, alpine_anim_1.fStr)("Producer slug", "Producer template to seed tokens from (e.g. \"@m0saic/theming/v1\").", "preset palette (no producer)"), preset: (0, alpine_anim_1.fStr)("Preset", "Producer preset/variant (light | dark | high-contrast; producer-defined).", "producer default"), namespace: (0, alpine_anim_1.fStr)("Namespace", "Upstream alias to read tokens from. Default \"theme\".", "theme"), forceFetch: (0, alpine_anim_1.fBool)("Force fetch", "Re-seed via the slug even if the namespace is populated.") } },
+    // ── Agent prop — the RAW SVG path (code-friendly storage; wins over `icon`). ──
+    iconPath: { type: "string", required: false, description: "Glyph SVG path d (24×24 viewBox), drawn as a mask on the accent chip — the raw value behind the friendly `icon` knob, and the override that wins. Omit both for the bare colored square.", meta: { control: { placeholder: "from Icon (catalog glyph)" }, ui: { label: "Icon path (SVG d)", order: 13, consumer: "agent" } } },
+    // ── Debug — hidden by default; the sandbox / matrix / Make iteration flip it true. ──
+    debugGeometry: { type: "boolean", required: false, description: "Dev-only geometry contract view: renders the contract wireframe instead of the card — every element GREEN when its computed rect survived to the pixels at this canvas, realized RED + intended amber ghost when not. Deterministic default false; production never sets it.", meta: { ui: { label: "Debug geometry", order: 14, collapsedByDefault: true } } },
+});
+exports.AlpineStatCard = {
+    id: (0, types_1.asTemplateId)(STAT_CARD_ID),
+    label: "Alpine Stat Card",
+    version: 1,
+    description: "Alpine KPI stat card — friendly mobile-marketing card: accent icon + muted label, dominant count-up value, SVG-triangle delta (green up / red down) + sublabel. Light by default; \"dark\" preset for the night look (the FFmpeg Weekly Pulse hero passes preset:\"dark\" + its own accent/card).",
+    capabilities: { tier: "core" },
+    primitive: true,
+    tags: ["data-viz", "alpine", "stat-card", "kpi", "animated", "analysts", "marketers", "metric", "number"],
+    outputHints: { format: { kind: "video", container: "mp4" }, width: 1280, height: 800, fps: 30, durationMs: 3000 }, // landscape 16:10 — matches the Alpine pack siblings (donut/timeline/kpi). The vertical band stack fills wide canvases cleanly; nested tile usage (pulse beats) passes its own ctx.target and is unaffected.
+    propsSchema,
+    defaultProps: {
+        anim: { reduceMotion: false, introFrac: 0.7, easing: "easeOut", countUp: true },
+        debugGeometry: false,
+        theme: { forceFetch: false },
+        label: "Commits",
+        value: "1,243",
+        delta: "+12.4%",
+        direction: "up",
+        sublabel: "vs last week",
+        icon: "commits",
+        renderMode: "premium",
+        preset: "light",
+    },
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const W = Math.max(1, Math.round(ctx.target.width));
+        const H = Math.max(1, Math.round(ctx.target.height));
+        // Theming: the shared alpine theme (light default). A producer overrides
+        // per-key; explicit accent/backgroundColor win (the hero passes both + dark).
+        const theme = await (0, alpine_theme_1.resolveAlpineTheme)((_a = props.preset) !== null && _a !== void 0 ? _a : "light", ctx, props.theme);
+        const accent = (_b = props.accent) !== null && _b !== void 0 ? _b : theme.primary;
+        const cardBg = (_c = props.backgroundColor) !== null && _c !== void 0 ? _c : theme.card;
+        const anim = (_d = props.anim) !== null && _d !== void 0 ? _d : {};
+        const reduceMotion = (_e = anim.reduceMotion) !== null && _e !== void 0 ? _e : false;
+        const animOn = !reduceMotion;
+        const totalSec = ((_f = ctx.target.durationMs) !== null && _f !== void 0 ? _f : 3000) / 1000;
+        const introSec = anim.introMs != null ? anim.introMs / 1000 : totalSec * ((_g = anim.introFrac) !== null && _g !== void 0 ? _g : 0.7);
+        const doFade = ((_h = anim.fade) !== null && _h !== void 0 ? _h : true) && animOn;
+        const animateValue = ((_j = anim.countUp) !== null && _j !== void 0 ? _j : true) && animOn && /\d/.test(props.value);
+        const isLight = ((_k = props.renderMode) !== null && _k !== void 0 ? _k : "premium") === "light";
+        // Reveal cascade timing. premium fades the header too; light keeps it static.
+        const labelFade = [0, introSec * 0.3];
+        const deltaFade = [introSec * 0.4, introSec * 0.4];
+        const subFade = [introSec * 0.6, introSec * 0.35];
+        const pad = Math.round(Math.min(W, H) * PAD_FRAC);
+        const innerW = Math.max(1, W - 2 * pad), innerH = Math.max(1, H - 2 * pad);
+        const sum = Object.values(BANDS).reduce((a, b) => a + b, 0);
+        const px = (w) => Math.round((w / sum) * innerH);
+        const headerH = px(BANDS.header), deltaH = px(BANDS.delta);
+        // ── Cell widths FIRST, so every font can be capped to fit its own cell ──
+        // iconSide caps at 0.18·min-dim: bands are FRACTIONS of height, so at tall
+        // portrait cards an uncapped header band minted a ~195px chip towering
+        // over its width-capped label (gate-10 sweep catch). Landscape defaults
+        // sit under the cap — byte-identical.
+        const iconSide = Math.min(headerH, Math.round(Math.min(W, H) * 0.18));
+        const gapW = Math.round(iconSide * 0.42);
+        const labelCellW = Math.max(1, innerW - iconSide - gapW);
+        const dir = (_l = props.direction) !== null && _l !== void 0 ? _l : "flat";
+        const hasDelta = !!(props.delta && props.delta.trim() !== "");
+        const hasArrow = hasDelta && (dir === "up" || dir === "down");
+        // TWO-PASS arrow sizing: the arrow must track the DELTA TEXT, not the band
+        // (the band is a height fraction — at portrait it minted a 73px triangle
+        // beside 17px text). Pass 1 sizes the font against the band-derived arrow;
+        // pass 2 shrinks the arrow to ≤1.25× that font and re-derives the cells
+        // (fonts only ever GROW when the arrow shrinks — monotone-safe).
+        const arrowSide0 = Math.round(H * DELTA_FRAC * 0.85);
+        const cellsFor = (arrow) => {
+            const gg = Math.max(2, Math.round(arrow * 0.4));
+            const space = hasArrow ? arrow + gg : 0;
+            const rest = Math.max(2, innerW - space - gg);
+            const dW = Math.max(1, Math.round(rest * 0.5));
+            return { g: gg, arrowSpace: space, deltaW: dW, subW: Math.max(1, rest - dW) };
+        };
+        let { g, arrowSpace, deltaW, subW } = cellsFor(arrowSide0);
+        // Fixed font sized to fit the cell WIDTH → never clips, never rescales per frame.
+        // `em` is em-per-char: it sets how much SLACK the text leaves in its cell. The
+        // delta uses a big em (0.82) so "+12.4%" sits well inside its cell with a wide
+        // safety margin — the CLI renderer fit it at a tight margin but the app
+        // renderer's font metrics ran a hair wider and clipped the "%". Generous slack
+        // is robust across both render paths; the band-height fraction still caps size.
+        // Script-aware length (textEmUnits): the CLI face draws Cyrillic ~0.95em /
+        // CJK ~0.98em — a flat .length under-measures wide scripts ~1.5× and clips.
+        // Floor-bound text ELLIPSIZES (fitEmUnits) — truncated text must FIT.
+        const capFont = (frac, text, cellW, minPx, em = 0.7) => Math.max(minPx, Math.min(Math.round(H * frac), Math.floor(cellW / Math.max(1, (0, template_utils_1.textEmUnits)(text || " ") * em))));
+        const fitTo = (text, cellW, font, em) => (0, alpine_card_1.fitEmUnits)(text, Math.max(2, cellW / (font * em)));
+        const labelText0 = props.label.toUpperCase();
+        const labelFont = capFont(LABEL_FRAC, labelText0, labelCellW, 10, 0.7);
+        const labelText = fitTo(labelText0, labelCellW, labelFont, 0.7);
+        const valueFont = capFont(VALUE_FRAC, props.value, innerW, 16, 0.66);
+        const valueText = fitTo(props.value, innerW, valueFont, 0.66);
+        const deltaFont0 = capFont(DELTA_FRAC, (_m = props.delta) !== null && _m !== void 0 ? _m : "", deltaW, 10, 0.88);
+        const arrowSide = Math.min(arrowSide0, Math.round(deltaFont0 * 1.25));
+        ({ g, arrowSpace, deltaW, subW } = cellsFor(arrowSide));
+        const deltaFont = capFont(DELTA_FRAC, (_o = props.delta) !== null && _o !== void 0 ? _o : "", deltaW, 10, 0.88);
+        const deltaText = hasDelta ? fitTo(props.delta, deltaW, deltaFont, 0.88) : " ";
+        const subFont = capFont(SUB_FRAC, (_p = props.sublabel) !== null && _p !== void 0 ? _p : "", subW, 9, 0.62);
+        const subText = fitTo((_q = props.sublabel) !== null && _q !== void 0 ? _q : " ", subW, subFont, 0.62);
+        // ── Build EACH element as its own top-level overlay layer (the title-beat
+        // pattern), positioned by pixel rect. A monolithic content split with a MEDIA
+        // source in one cell makes the renderer re-lay-out the whole content (clipping
+        // the text); independent per-element layers keep the media chip isolated and
+        // render correctly. ──
+        const before = (w) => pad + Math.round((w / sum) * innerH);
+        const headerTop = before(BANDS.padY);
+        const valueTop = before(BANDS.padY + BANDS.header + BANDS.gap1);
+        const deltaTop = before(BANDS.padY + BANDS.header + BANDS.gap1 + BANDS.value + BANDS.gap2);
+        const valueH = px(BANDS.value);
+        // Every element is positioned with placeRects (exact-pixel rects + null-tile margins),
+        // NOT insetNode. insetNode's real-split margins spread the quantization remainder INTO
+        // the placed rect, shrinking/shifting it at sizes that don't divide evenly — that
+        // clipped the value (band crushed 59→38px) and shoved the icon glyph off-center on the
+        // desktop rail. placeRects packs the rects onto few layers (light m0) with `importance`
+        // for z-order; null margins never distort a placed rect.
+        // Two-mode reveal. premium = soft alpha crossfade (header + delta band cascade,
+        // a per-pixel geq — the default, best look). light = geq-free: header static,
+        // only the delta band (below the number) slides up. Value always count-up.
+        const slideDist = Math.round(H * 0.06);
+        const revealHeader = (n) => (isLight ? n : (0, alpine_anim_1.revealFadeNode)(n, labelFade[0], labelFade[1], doFade));
+        const revealDelta = (n, f) => isLight ? (0, alpine_anim_1.revealSlideNode)(n, f[0], f[1], slideDist, doFade) : (0, alpine_anim_1.revealFadeNode)(n, f[0], f[1], doFade);
+        const Z = { surface: 0, chip: 1, ink: 2 };
+        const pieces = [];
+        const addP = (node, x, y, w, h, importance) => {
+            const xi = Math.max(0, Math.min(W - 1, Math.round(x))), yi = Math.max(0, Math.min(H - 1, Math.round(y)));
+            const wi = Math.max(1, Math.min(Math.round(w), W - xi)), hi = Math.max(1, Math.min(Math.round(h), H - yi));
+            pieces.push({ rect: { x: xi, y: yi, w: wi, h: hi, importance }, source: node.sources[0] });
+        };
+        // chip: the colored accent tile, with an optional GLYPH drawn as an SVG MASK on
+        // top (a lavfi tile, NOT a media image — a media source mis-lays-out the card).
+        // Both are independent per-element layers, so neither needs an in-cell overlay.
+        // The chip's FILL is `accent` → bound to it (Make's color picker); the card
+        // surface's fill is `backgroundColor`. Both bind at their theme defaults
+        // too — double-click is the handle to SET one.
+        const chipTile = (0, alpine_card_1.paint)((0, template_utils_1.bindProp)((0, template_utils_1.makeColorTile)(accent, { effects: { rounding: { cornerStyle: "rounded", borderRadius: 0.28 } } }), "accent"));
+        const glyphSide = Math.round(iconSide * 0.56);
+        const glyphX = pad + Math.round((iconSide - glyphSide) / 2);
+        const glyphY = headerTop + Math.round((headerH - glyphSide) / 2);
+        // Friendly `icon` name → shared catalog path; raw `iconPath` wins.
+        const glyphPath = (0, alpine_glyphs_1.resolveAlpineGlyph)(props.icon, props.iconPath, STAT_CARD_ID);
+        const glyphNode = glyphPath
+            ? (0, alpine_card_1.paint)((0, template_utils_1.makeColorTile)(GLYPH_COLOR, { mask: { kind: "inline-mask", localPath: glyphPath, bounds: { x: 0, y: 0, width: 24, height: 24 } } }))
+            : null;
+        // Each text rect is bound to the prop it displays (Make's double-click edit);
+        // the delta + sublabel rects are ALWAYS allocated, so they stay bound even
+        // when empty — a handle to ADD one.
+        const valueNode = animateValue
+            ? (0, alpine_card_1.paint)((0, template_utils_1.bindProp)((0, alpine_card_1.tag)(exprTxt((0, template_utils_1.animateNumbersInText)(valueText, { durationSec: introSec, ease: (_r = anim.easing) !== null && _r !== void 0 ? _r : "easeOut" }), valueFont, theme.title), "stat-value"), "value"))
+            : (0, alpine_card_1.paint)((0, template_utils_1.bindProp)((0, alpine_card_1.tag)(txt(valueText, valueFont, theme.title, "left"), "stat-value"), "value"));
+        const dColor = dir === "up" ? theme.positive : dir === "down" ? theme.negative : theme.muted;
+        const surface = (0, alpine_card_1.paint)((0, template_utils_1.bindProp)((0, template_utils_1.makeColorTile)(cardBg, { effects: { rounding: { cornerStyle: "rounded", borderRadius: 0.08 } } }), "backgroundColor"));
+        addP(surface, 0, 0, W, H, Z.surface);
+        // Header (chip + label): premium fades, light static. Value always count-up.
+        // The chip is a SQUARE (iconSide can now be < headerH), centered in the band.
+        const chipY = headerTop + Math.round((headerH - iconSide) / 2);
+        addP(revealHeader(chipTile), pad, chipY, iconSide, iconSide, Z.chip);
+        if (glyphNode)
+            addP(revealHeader(glyphNode), glyphX, glyphY, glyphSide, glyphSide, Z.ink);
+        addP(revealHeader((0, alpine_card_1.paint)((0, template_utils_1.bindProp)((0, alpine_card_1.tag)(txt(labelText, labelFont, theme.label, "left"), "stat-label"), "label"))), pad + iconSide + gapW, headerTop, labelCellW, headerH, Z.ink);
+        // Value fades with the header (premium) so the count-up doesn't sit at full
+        // opacity before the labels appear; light keeps it static (count-up only).
+        addP(revealHeader(valueNode), pad, valueTop, innerW, valueH, Z.ink);
+        // Below the number (delta arrow + delta + sublabel): premium fades, light slides.
+        if (hasArrow)
+            addP(revealDelta((0, alpine_card_1.paint)(triangle(dir, dColor, arrowSide, deltaH)), deltaFade), pad, deltaTop, arrowSide, deltaH, Z.ink);
+        addP(revealDelta((0, alpine_card_1.paint)((0, template_utils_1.bindProp)((0, alpine_card_1.tag)(txt(deltaText, deltaFont, dColor, "left"), "stat-delta"), "delta")), deltaFade), pad + arrowSpace, deltaTop, deltaW, deltaH, Z.ink);
+        addP(revealDelta((0, alpine_card_1.paint)((0, template_utils_1.bindProp)((0, alpine_card_1.tag)(txt(subText, subFont, theme.muted, "left"), "stat-sublabel"), "sublabel")), subFade), pad + arrowSpace + deltaW + g, deltaTop, subW, deltaH, Z.ink);
+        // Zero-drift laundered placement: the friendly helper packs the pieces (as
+        // placeRects) over lattice-quantized cells and wires a recovery
+        // placement.inset onto each source, so every element paints on its EXACT
+        // computed rect while the m0's precision stays bounded (~120 basis). The
+        // returned `expectations` declare each element's intent for the geometry
+        // contract below (nearly free — no extra parse here).
+        const { m0: placedM0, sources, expectations } = (0, template_utils_1.placeInsetPieces)({ rootW: W, rootH: H, pieces });
+        const doc = {
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: String(placedM0),
+            sources,
+            backgroundColor: "black@0",
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+            // Pin the canvas (the glyph media source otherwise lets the renderer infer
+            // size from the image, scaling the whole composition and clipping the text).
+            size: { width: W, height: H },
+        };
+        // Dev tripwire: `debugGeometry` falsy (the default) → returns `doc` untouched
+        // at zero cost. True → checks every element's computed rect survived to the
+        // pixels at THIS canvas, stamps `editor.geometryContract`, and on a violation
+        // returns a GEOMETRY_CONTRACT error mosaic at exactly the canvas that broke.
+        return Promise.resolve((0, template_utils_1.withGeometryContract)(doc, ctx, {
+            templateId: STAT_CARD_ID,
+            expectations,
+            debug: props.debugGeometry === true,
+        }));
+    },
+    // Editor-only first-open cover — the mosaic-branding theme; hero = the
+    // static default card INLINED flat (gate-15/21 keeper).
+    async renderCover(_props, ctx) {
+        const heroBox = (0, onboarding_cover_1.brandedCoverHeroBox)(ctx, "band");
+        const heroCtx = {
+            ...ctx,
+            target: { ...ctx.target, width: heroBox.width, height: heroBox.height },
+            output: { ...ctx.output, width: heroBox.width, height: heroBox.height },
+        };
+        const card = (await exports.AlpineStatCard.render({
+            ...exports.AlpineStatCard.defaultProps,
+            anim: { reduceMotion: true },
+        }, heroCtx));
+        return (0, onboarding_cover_1.buildBrandedCover)({
+            ctx,
+            // Band variant (founder ruling 08-30): basic viz needs no
+            // explanation — hero full-bleed + brand band, nothing else.
+            variant: "band",
+            copy: {
+                productName: "Stat Card",
+                title: "A KPI tile.",
+            },
+            hero: (theme) => (0, onboarding_cover_1.onboardingFrame)((0, onboarding_cover_1.inlineHeroDoc)(card), theme.borderStrong),
+            heroAssets: card.assets,
+        });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.AlpineStatCard);

package/dist/m0saic/alpine/timeline/v1/index.d.ts

@@ -0,0 +1 @@
+export { AlpineTimeline } from "./timeline";

package/dist/m0saic/alpine/timeline/v1/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlpineTimeline = void 0;
+var timeline_1 = require("./timeline");
+Object.defineProperty(exports, "AlpineTimeline", { enumerable: true, get: function () { return timeline_1.AlpineTimeline; } });

package/dist/m0saic/alpine/timeline/v1/timeline.d.ts

@@ -0,0 +1,55 @@
+/**
+ * ============================================================================
+ * @m0saic/alpine/timeline/v1 — Alpine Timeline (friendly mobile-marketing)
+ * ============================================================================
+ *
+ * A vertical milestone timeline inside the Alpine white card: a spine running
+ * down a left rail with a dot per event, and each event's date + title (+ an
+ * optional description) to the right of its dot. The classic "our journey" /
+ * roadmap / changelog surface. STANDALONE Alpine brand flavor.
+ *
+ * Construction follows the donut / heatmap model — the spine segments, dots and
+ * every text line are ABSOLUTELY-PLACED tight rects packed full-canvas via
+ * `placeRects` on the SNAP_PX lattice, so the dots align exactly to their text
+ * rows and the layout never fights nested-split quantization. Dots are rounded
+ * `makeColorTile`s (borderRadius 0.5 = circle), no inline-masks. Animation: the
+ * spine "draws down" as each segment + dot cascades in top→bottom with the text
+ * fading alongside; `anim.reduceMotion` → the static timeline.
+ * ============================================================================
+ */
+import type { MosaicColor, MosaicTemplate } from "@m0saic/types";
+import { type EaseName, type ThemeSourceConfig } from "@m0saic/template-utils";
+import { type AlpinePreset } from "../../_shared/alpine-theme";
+type TimelineEvent = {
+    date?: string;
+    title: string;
+    description?: string;
+    color?: MosaicColor;
+};
+/** Reveal cost/quality dial. "premium" (default): dots/spine/text fade in (a geq
+ *  each). "light": the same cascade via free enable-gate pops — no geq, composable. */
+type RenderMode = "premium" | "light";
+type AnimConfig = {
+    renderMode: RenderMode;
+    reduceMotion: boolean;
+    introFrac: number;
+    easing: EaseName;
+};
+/** "auto" → horizontal on a wide (landscape) card, vertical otherwise. */
+type Orientation = "auto" | "vertical" | "horizontal";
+type AlpineTimelineProps = {
+    events: TimelineEvent[];
+    title?: string;
+    subtitle?: string;
+    orientation?: Orientation;
+    preset?: AlpinePreset;
+    showDescription?: boolean;
+    /** Spine + dot accent color. Defaults to the theme primary. */
+    color?: MosaicColor;
+    anim?: AnimConfig;
+    /** Opt-in producer theming. The preset is the fallback; a producer's published
+     *  tokens override it. Explicit color props still win. */
+    theme?: ThemeSourceConfig;
+};
+export declare const AlpineTimeline: MosaicTemplate<AlpineTimelineProps>;
+export {};

package/dist/m0saic/alpine/timeline/v1/timeline.js

@@ -0,0 +1,266 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlpineTimeline = void 0;
+const types_1 = require("@m0saic/types");
+const template_utils_1 = require("@m0saic/template-utils");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const alpine_card_1 = require("../../_shared/alpine-card");
+const alpine_theme_1 = require("../../_shared/alpine-theme");
+const alpine_anim_1 = require("../../_shared/alpine-anim");
+const DEFAULT_PRESET = "light";
+const DEFAULT_RENDER_MODE = "premium";
+const DEFAULT_ANIM = { renderMode: DEFAULT_RENDER_MODE, introFrac: 0.7, easing: "easeOut", reduceMotion: false };
+const MAX_EVENTS = 7;
+const SNAP_PX = 4;
+const EDGE_PAD = 1.5;
+const clampInt = (v, lo, hi) => Math.max(lo, Math.min(hi, Math.round(v)));
+const snapGrid = (v) => Math.round(v / SNAP_PX) * SNAP_PX;
+/** Place a pixel rect, snapping its edges to the SNAP_PX lattice (quantization-safe). */
+function rectPiece(W, H, x, y, w, h, source, importance) {
+    const x0 = clampInt(snapGrid(x), 0, W - SNAP_PX);
+    const y0 = clampInt(snapGrid(y), 0, H - SNAP_PX);
+    const x1 = clampInt(snapGrid(x + w), x0 + SNAP_PX, W);
+    const y1 = clampInt(snapGrid(y + h), y0 + SNAP_PX, H);
+    return { rect: { x: x0, y: y0, w: x1 - x0, h: y1 - y0, claimant: "F", importance }, source };
+}
+/** Place a text bbox snapped to the SNAP grid. */
+function placeText(W, H, bbox, source, importance) {
+    const snapDown = (v) => Math.floor((v - EDGE_PAD) / SNAP_PX) * SNAP_PX;
+    const snapUp = (v) => Math.ceil((v + EDGE_PAD) / SNAP_PX) * SNAP_PX;
+    const x = clampInt(snapDown(bbox.minX), 0, W - 1);
+    const y = clampInt(snapDown(bbox.minY), 0, H - 1);
+    const x2 = clampInt(snapUp(bbox.maxX), x + SNAP_PX, W);
+    const y2 = clampInt(snapUp(bbox.maxY), y + SNAP_PX, H);
+    return { rect: { x, y, w: x2 - x, h: y2 - y, claimant: "F", importance }, source };
+}
+function cellText(text, fontSize, color, hAlign = "left") {
+    return { type: "text", visual: { backgroundColor: "black@0" }, layers: [{ content: { kind: "literal", text: text || " " }, style: { fontSize, fontColor: color }, placement: { hAlign, vAlign: "middle" } }] };
+}
+function fadeIn(src, startSec, durSec, on) {
+    var _a;
+    if (!on)
+        return src;
+    const prev = (_a = src.overlay) !== null && _a !== void 0 ? _a : {};
+    return { ...src, overlay: { ...prev, alpha: (0, template_utils_1.fadeInExpr)(startSec, durSec) } };
+}
+/** Left-anchored text bbox (the headline starts AT x, extends right). */
+function leftTextBBox(x, cy, text, font) {
+    const w = Math.max(font, text.length * font * 0.6 + font * 0.5);
+    const h = font * 1.5;
+    return { minX: x, minY: cy - h / 2, maxX: x + w, maxY: cy + h / 2 };
+}
+/** Center-anchored text bbox (the headline is centered on cx). */
+function centerTextBBox(cx, cy, text, font) {
+    const w = Math.max(font, text.length * font * 0.6 + font * 0.5);
+    const h = font * 1.5;
+    return { minX: cx - w / 2, minY: cy - h / 2, maxX: cx + w / 2, maxY: cy + h / 2 };
+}
+/** Clip a line to `maxW` px with a trailing ellipsis — so an absurdly long title
+ *  can't overflow the card or collide with a neighbor (it truncates instead). */
+function truncateToWidth(text, font, maxW) {
+    const charW = font * 0.6;
+    const maxChars = Math.max(1, Math.floor(maxW / charW));
+    if (text.length <= maxChars)
+        return text;
+    return `${text.slice(0, Math.max(1, maxChars - 1)).trimEnd()}…`;
+}
+// ---------------------------------------------------------------------------
+// Template
+// ---------------------------------------------------------------------------
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    events: { type: "array", required: true, description: "Timeline events (top→bottom). Each: an optional date, a title, an optional description + color.", meta: { control: { flavor: "objectRows", columns: [{ label: "Date", key: "date", kind: "text", placeholder: "Jan 2024" }, { label: "Title", key: "title", kind: "text", placeholder: "Milestone" }, { label: "Description", key: "description", kind: "text", placeholder: "What happened" }, { label: "Color", key: "color", kind: "color" }] }, ui: { label: "Events", order: 1 } } },
+    // ── Flat props grouped by control type (text → enum → toggle → color). ──
+    title: { type: "string", required: false, description: "Card title.", meta: { control: { placeholder: "e.g., MILESTONES" }, ui: { label: "Title", order: 2 } } },
+    subtitle: { type: "string", required: false, description: "Card subtitle.", meta: { ui: { label: "Subtitle", order: 3 } } },
+    orientation: { type: "string", required: false, description: "Layout direction. auto → horizontal on a wide card, vertical on square/tall.", meta: { constraints: { oneOf: ["auto", "vertical", "horizontal"] }, ui: { label: "Orientation", order: 4 } } },
+    preset: { type: "string", required: false, description: "Alpine theme variant.", meta: { constraints: { oneOf: ["light", "dark"] }, ui: { label: "Preset", order: 5 } } },
+    showDescription: { type: "boolean", required: false, description: "Show each event's description line.", meta: { ui: { label: "Show description", order: 6 } } },
+    color: { type: "string", required: false, description: "Spine + dot accent color. Defaults to the theme primary.", meta: { constraints: { isColor: true }, control: { placeholder: "theme primary", colorPicker: true, defaultColor: "#2563EB" }, ui: { label: "Accent color", order: 7 } } },
+    // ── Collapsible groups. ──
+    anim: {
+        type: "group", required: false, description: "Reveal mode + spine-draw cascade intro.",
+        meta: { ui: { label: "Animation", order: 8, collapsedByDefault: true } },
+        fields: {
+            renderMode: (0, alpine_anim_1.fEnum)("Render mode", ["premium", "light"], "\"premium\" (default): dots/spine/text fade in — a geq each. \"light\": the same cascade via free enable-gate pops — no geq, composable, cheap when nested."),
+            reduceMotion: alpine_anim_1.ALPINE_ANIM_FIELDS.reduceMotion,
+            introFrac: alpine_anim_1.ALPINE_ANIM_FIELDS.introFrac,
+            easing: alpine_anim_1.ALPINE_ANIM_FIELDS.easing,
+        },
+    },
+    theme: {
+        type: "group", required: false, description: "Opt into a theme source. Uses the alpine preset by default; set a producer slug + namespace to pull shared design tokens. Explicit color props still win.",
+        meta: { ui: { label: "Theme", order: 9, collapsedByDefault: true } },
+        fields: { slug: (0, alpine_anim_1.fStr)("Producer slug", "Producer template to seed tokens from (e.g. \"@m0saic/theming/v1\").", "preset palette (no producer)"), preset: (0, alpine_anim_1.fStr)("Preset", "Producer preset/variant (light | dark | high-contrast; producer-defined).", "producer default"), namespace: (0, alpine_anim_1.fStr)("Namespace", "Upstream alias to read tokens from. Default \"theme\".", "theme"), forceFetch: (0, alpine_anim_1.fBool)("Force fetch", "Re-seed via the slug even if the namespace is populated.") },
+    },
+});
+exports.AlpineTimeline = {
+    id: (0, types_1.asTemplateId)("@m0saic/alpine/timeline/v1"),
+    label: "Alpine Timeline",
+    version: 1,
+    description: "Alpine timeline — friendly mobile-marketing card: a vertical milestone timeline with a spine + dots that draw down top→bottom, each event a date + title + description. Standalone Alpine brand flavor.",
+    capabilities: { tier: "core" },
+    primitive: true,
+    deprecated: {
+        reason: "Absolute-placement antipattern: the spine segments, dots and every text line are exact-pixel rects packed full-canvas via placeRects on the SNAP lattice, so precision tracks the canvas (audit: ABSOLUTE, slope 1.04) — a nestable primitive that pins its parent near its own render canvas. Kept as the canonical 'absolute list' example. Use v2 — the SAME picture rebuilt as nested row/col splits (dots insetNode-centered to squares on a shared band), so it composes at any canvas.",
+        replacement: (0, types_1.asTemplateId)("@m0saic/alpine/timeline/v2"),
+        since: "2026-07-09",
+    },
+    tags: ["alpine", "timeline", "milestones", "data-viz"],
+    outputHints: { width: 1280, height: 800, fps: 30, durationMs: 2000 },
+    propsSchema,
+    defaultProps: {
+        theme: { forceFetch: false },
+        events: [
+            { date: "Jan 2024", title: "Project kickoff", description: "Team assembled, first commit landed" },
+            { date: "Mar 2024", title: "Beta launch", description: "500 early users onboarded" },
+            { date: "Jun 2024", title: "Series A", description: "$12M raised to scale the team" },
+            { date: "Sep 2024", title: "10k customers", description: "Crossed five figures" },
+            { date: "Dec 2024", title: "Global expansion", description: "Live in 12 countries" },
+        ],
+        title: "MILESTONES",
+        subtitle: "Our journey so far",
+        preset: DEFAULT_PRESET,
+        orientation: "auto",
+        showDescription: true,
+        anim: DEFAULT_ANIM,
+    },
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f;
+        const W = Math.max(1, Math.round(ctx.target.width));
+        const H = Math.max(1, Math.round(ctx.target.height));
+        const events = ((_a = props.events) !== null && _a !== void 0 ? _a : [])
+            .filter((e) => e && typeof e.title === "string" && e.title.trim())
+            .slice(0, MAX_EVENTS);
+        if (events.length === 0) {
+            return (0, template_utils_1.makeErrorMosaic)("events[] must have at least one event with a title", { title: `${this.id} props`, width: W, height: H });
+        }
+        const N = events.length;
+        // Theming: the shared alpine theme (light default). A producer overrides tokens
+        // via props.theme; explicit colors still win. Unthemed → byte-identical.
+        const theme = await (0, alpine_theme_1.resolveAlpineTheme)((_b = props.preset) !== null && _b !== void 0 ? _b : DEFAULT_PRESET, ctx, props.theme);
+        const anim = { ...DEFAULT_ANIM, ...((_c = props.anim) !== null && _c !== void 0 ? _c : {}) };
+        const animate = !anim.reduceMotion;
+        const light = ((_d = anim.renderMode) !== null && _d !== void 0 ? _d : DEFAULT_RENDER_MODE) === "light";
+        // Mode-aware overlay for the dots/spine (premium fades = geq; light enable-gates = no geq).
+        const revealOv = (s, dur) => light ? { startAtSec: s, enable: `gte(t,${s.toFixed(3)})` } : { startAtSec: s, alpha: (0, template_utils_1.fadeInExpr)(s, dur) };
+        // Mode-aware text reveal.
+        const ffText = (src, s, dur) => !animate ? src : light ? (0, alpine_anim_1.revealGate)(src, s) : fadeIn(src, s, dur, true);
+        const showDescription = (_e = props.showDescription) !== null && _e !== void 0 ? _e : true;
+        const accent = (0, alpine_card_1.resolveColor)(props.color, theme.primary);
+        const dotColor = (i) => (0, alpine_card_1.resolveColor)(events[i].color, accent);
+        const card = (0, alpine_card_1.alpineCard)({ theme, W, H, title: props.title, subtitle: props.subtitle });
+        const cr = card.contentRect;
+        // Fonts.
+        const titleFont = Math.max(13, Math.round(H * 0.03));
+        const dateFont = Math.max(10, Math.round(H * 0.021));
+        const descFont = Math.max(10, Math.round(H * 0.022));
+        const dotR = Math.max(SNAP_PX, snapGrid(titleFont * 0.42));
+        const spineW = Math.max(SNAP_PX, snapGrid(H * 0.005));
+        const clipSec = Math.max(0.1, ((_f = ctx.target.durationMs) !== null && _f !== void 0 ? _f : 2000) / 1000);
+        const introT = Math.max(0.1, Math.min(1, anim.introFrac) * clipSec);
+        const introDelay = Math.min(0.12, introT * 0.06);
+        const CASCADE = 0.6;
+        const eventDur = Math.max(0.05, (introT - introDelay) / (1 + CASCADE * Math.max(0, N - 1)));
+        const eventStagger = CASCADE * eventDur;
+        const startAt = (i) => (animate ? introDelay + i * eventStagger : 0);
+        const lineGap = Math.round(titleFont * 0.28);
+        const eventLines = (i) => {
+            const lines = [];
+            if (events[i].date && events[i].date.trim())
+                lines.push({ text: events[i].date, font: dateFont, color: theme.muted });
+            lines.push({ text: events[i].title, font: titleFont, color: theme.title });
+            if (showDescription && events[i].description && events[i].description.trim())
+                lines.push({ text: events[i].description, font: descFont, color: theme.subtitle });
+            return lines;
+        };
+        const stackHeight = (lines) => lines.reduce((a, l) => a + l.font * 1.1, 0) + lineGap * (lines.length - 1);
+        const pieces = [];
+        // dot: a circle (borderRadius 0.5 on a square), accent (or per-event) color.
+        const pushDot = (cx, cy, i, s) => pieces.push(rectPiece(W, H, cx - dotR, cy - dotR, dotR * 2, dotR * 2, (0, template_utils_1.makeColorTile)(dotColor(i), { effects: { rounding: { cornerStyle: "rounded", borderRadius: 0.5 } }, ...(animate ? { overlay: revealOv(s, eventDur) } : {}) }), 1));
+        // spine segment (between two dots) — draws in with the later event (importance 0, behind dots).
+        const pushSeg = (x, y, w, h, s) => pieces.push(rectPiece(W, H, x, y, w, h, (0, template_utils_1.makeColorTile)(theme.grid, { effects: { rounding: { cornerStyle: "rounded", borderRadius: 0.5 } }, ...(animate ? { overlay: revealOv(s, eventDur) } : {}) }), 0));
+        const pushStack = (lines, anchorX, blockTop, hAlign, s) => {
+            let ly = blockTop;
+            for (const ln of lines) {
+                const hK = ln.font * 1.1, lcy = ly + hK / 2;
+                const bbox = hAlign === "left" ? leftTextBBox(anchorX, lcy, ln.text, ln.font) : centerTextBBox(anchorX, lcy, ln.text, ln.font);
+                pieces.push(placeText(W, H, bbox, ffText(cellText(ln.text, ln.font, ln.color, hAlign), s + eventDur * 0.25, eventDur), 1));
+                ly += hK + lineGap;
+            }
+        };
+        // Orientation: explicit, else auto — horizontal on a wide (landscape) card so the
+        // timeline fills the width instead of hugging the left rail; vertical on square/tall.
+        const orientation = props.orientation === "vertical" || props.orientation === "horizontal"
+            ? props.orientation
+            : W / H >= 1.25 ? "horizontal" : "vertical";
+        if (orientation === "vertical") {
+            // Left rail: spine + dot, then a gap, then the left-aligned text block.
+            const rowH = Math.min(Math.round(H * 0.16), Math.floor(cr.h / N));
+            const top = snapGrid(cr.y + Math.max(0, (cr.h - rowH * N) / 2));
+            const rowCenterY = (i) => top + Math.round(rowH * (i + 0.5));
+            const railX = snapGrid(cr.x + dotR + Math.round(cr.w * 0.01));
+            const textX = snapGrid(railX + dotR + Math.round(cr.w * 0.03));
+            // Truncate to the room between the text rail and the card's right edge.
+            const maxW = Math.max(dotR * 4, cr.x + cr.w - textX - Math.round(cr.w * 0.01));
+            for (let i = 1; i < N; i++)
+                pushSeg(railX - spineW / 2, rowCenterY(i - 1), spineW, rowCenterY(i) - rowCenterY(i - 1), startAt(i));
+            for (let i = 0; i < N; i++) {
+                const cy = rowCenterY(i), s = startAt(i);
+                const lines = eventLines(i).map((l) => ({ ...l, text: truncateToWidth(l.text, l.font, maxW) }));
+                pushDot(railX, cy, i, s);
+                pushStack(lines, textX, cy - stackHeight(lines) / 2, "left", s);
+            }
+        }
+        else {
+            // Horizontal: a spine across the content rect, dots evenly spaced, each event's
+            // text block ALTERNATING above / below the line so the card fills its width.
+            const margin = Math.round(cr.w * 0.06);
+            const railL = snapGrid(cr.x + margin), railR = snapGrid(cr.x + cr.w - margin);
+            const spineY = snapGrid(cr.y + cr.h / 2);
+            const dotX = (i) => (N > 1 ? snapGrid(railL + (railR - railL) * (i / (N - 1))) : snapGrid(cr.x + cr.w / 2));
+            const gap = Math.round(dotR + titleFont * 0.7);
+            // Truncate each block to ~one column width so adjacent events never collide.
+            const columnPitch = N > 1 ? (railR - railL) / (N - 1) : cr.w;
+            const maxW = Math.min(columnPitch * 0.92, cr.w * 0.92);
+            for (let i = 1; i < N; i++)
+                pushSeg(dotX(i - 1), spineY - spineW / 2, dotX(i) - dotX(i - 1), spineW, startAt(i));
+            const halfWidth = (lines) => Math.max(...lines.map((l) => l.text.length * l.font * 0.6 + l.font * 0.5)) / 2;
+            for (let i = 0; i < N; i++) {
+                const cx = dotX(i), s = startAt(i);
+                const lines = eventLines(i).map((l) => ({ ...l, text: truncateToWidth(l.text, l.font, maxW) }));
+                pushDot(cx, spineY, i, s);
+                const above = i % 2 === 0;
+                const blockTop = above ? spineY - gap - stackHeight(lines) : spineY + gap;
+                // Clamp the text-block center so the edge events (first/last dot near the card
+                // border) never spill past the content rect — the dot stays at cx; the text
+                // shifts inward just enough to stay in-bounds.
+                const hw = halfWidth(lines);
+                const ax = Math.max(cr.x + hw, Math.min(cr.x + cr.w - hw, cx));
+                pushStack(lines, snapGrid(ax), blockTop, "center", s);
+            }
+        }
+        // ── Pack full-canvas → one { m0, sources } ──
+        const placed = (0, dsl_stdlib_1.placeRects)({ rootW: W, rootH: H, rects: pieces.map((p) => p.rect) });
+        const sources = [];
+        for (const layer of placed.layers) {
+            const ordered = [...layer.rectIndices].sort((a, b) => pieces[a].rect.y - pieces[b].rect.y || pieces[a].rect.x - pieces[b].rect.x);
+            for (const idx of ordered)
+                sources.push(pieces[idx].source);
+        }
+        const body = { m0: String(placed.m0), sources };
+        // Full-canvas absolute geometry → pass as an extraLayer (NOT the scaled content),
+        // so it renders at exact canvas pixels and is never re-quantized by insetNode.
+        const root = card.compose(alpine_card_1.EMPTY, body);
+        return Promise.resolve({
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: root.m0,
+            sources: root.sources,
+            backgroundColor: card.backgroundColor,
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+        });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.AlpineTimeline);