@m0saic/templates 0.2.0

package/dist/m0saic/hero/ffmpeg-pulse/_shared/scatter.js

@@ -0,0 +1,173 @@
+"use strict";
+/**
+ * ============================================================================
+ * hero/ffmpeg-pulse — background scatter (loads the shipped layout)
+ * ============================================================================
+ *
+ * The signature backdrop: a field of dark rounded squares with the occasional
+ * green accent, behind every beat. The geometry is NOT generated — it's the
+ * HUMAN-TRACED scatter shipped as a sidecar `.m0p` (`scatter-layout.m0p`, the
+ * sandbox-approved desktop trace + cover-fit square/mobile derivations, each
+ * variant carrying per-tile fill colors). At render the loader:
+ *   1. picks the variant matching the canvas aspect,
+ *   2. scales its tiles to the actual render dims,
+ *   3. paints each as a rounded `makeColorTile` of its stored fill color,
+ *   4. packs them into `placeRects` layers (a valid overlay base each).
+ *
+ * Returns per-layer Nodes so the chrome can nest its content as the frontmost
+ * child over the backdrop ({@link pulseChrome} `scatter` opt). Resolution is
+ * baked per render (the px are scaled from the variant's native size), the
+ * deliberate trade for matching the approved trace exactly.
+ * ============================================================================
+ */
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scatterLayers = scatterLayers;
+exports.scatterNode = scatterNode;
+const path = __importStar(require("node:path"));
+const template_utils_1 = require("@m0saic/template-utils");
+// readLayoutFile reads the filesystem — deep import (not re-exported from the
+// barrel, which must stay web-bundleable). This hero pack is node-only.
+const readLayoutFile_1 = require("@m0saic/template-utils/dist/m0saic/readLayoutFile");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const dsl_file_formats_1 = require("@m0saic/dsl-file-formats");
+const dsl_1 = require("@m0saic/dsl");
+const alpine_card_1 = require("../../../alpine/_shared/alpine-card");
+// The shipped scatter pack, loaded once (copy-assets mirrors assets/ to dist).
+let BUNDLED = null;
+function bundledPack() {
+    if (!BUNDLED) {
+        const r = (0, readLayoutFile_1.readLayoutFile)(path.resolve(__dirname, "assets", "scatter-layout.m0p"));
+        if (r.kind !== "m0p")
+            throw new Error("scatter-layout asset is not an .m0p pack");
+        BUNDLED = r.file;
+    }
+    return BUNDLED;
+}
+function variantKey(W, H) {
+    const ar = W / H;
+    return ar >= 1.3 ? "desktop" : ar < 0.85 ? "mobile" : "square";
+}
+/**
+ * Build the scatter as per-layer Nodes (one per `placeRects` layer, each a
+ * single split → a valid overlay base). Spread into `overlay([...layers, top])`
+ * so caller content nests over the backdrop. Returns `[]` for degenerate dims.
+ */
+function scatterLayers(opts) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const W = Math.max(1, Math.round(opts.W));
+    const H = Math.max(1, Math.round(opts.H));
+    const pack = (_a = opts.pack) !== null && _a !== void 0 ? _a : bundledPack();
+    const variant = (_b = (0, dsl_file_formats_1.getVariant)(pack, variantKey(W, H))) !== null && _b !== void 0 ? _b : (0, dsl_file_formats_1.getVariant)(pack, "desktop");
+    if (!variant)
+        return [];
+    const nW = variant.size.width;
+    const nH = variant.size.height;
+    const fill = ((_c = variant.fill) !== null && _c !== void 0 ? _c : {});
+    const parsed = (0, dsl_1.parseM0StringComplete)(variant.m0, nW, nH);
+    const frames = (_f = (_e = (_d = parsed.ir) === null || _d === void 0 ? void 0 : _d.renderFrames) !== null && _e !== void 0 ? _e : parsed.renderFrames) !== null && _f !== void 0 ? _f : [];
+    const sx = W / nW;
+    const sy = H / nH;
+    const SNAP = 4;
+    const snap = (v) => Math.max(SNAP, Math.round(v / SNAP) * SNAP);
+    const rects = [];
+    const colors = [];
+    for (const f of frames) {
+        const key = (_h = (_g = f.meta) === null || _g === void 0 ? void 0 : _g.stableKey) !== null && _h !== void 0 ? _h : f.stableKey;
+        const color = (_j = fill[key]) === null || _j === void 0 ? void 0 : _j.color;
+        if (!color)
+            continue;
+        const x = snap(f.x * sx);
+        const y = snap(f.y * sy);
+        let w = snap(f.width * sx);
+        let h = snap(f.height * sy);
+        if (x + w > W)
+            w = W - x;
+        if (y + h > H)
+            h = H - y;
+        if (w < SNAP || h < SNAP)
+            continue;
+        rects.push({ x, y, w, h, claimant: "F" });
+        colors.push(color);
+    }
+    if (rects.length === 0)
+        return [];
+    const cr = (_k = opts.cornerRadius) !== null && _k !== void 0 ? _k : 0.16;
+    // Rank-set reveal: assign every tile a global rank, then a staggered fade start.
+    // Ranks span all tiles (across placeRects layers) so the reveal reads as one
+    // ordered sweep/sparkle, not per-layer.
+    let revealStart = null;
+    if (opts.reveal) {
+        const N = rects.length;
+        const order = rects.map((_, i) => i);
+        if (opts.reveal.order === "random") {
+            // Seeded shuffle (deterministic — no Math.random): hash the rect geometry.
+            const keyOf = (i) => { const r = rects[i]; let h = (r.x * 73856093) ^ (r.y * 19349663) ^ (r.w * 83492791) ^ (r.h * 2654435761); return (h >>> 0); };
+            order.sort((a, b) => keyOf(a) - keyOf(b));
+        }
+        else if (opts.reveal.order === "horizontal") {
+            // A vertical reveal line sweeping LEFT → RIGHT (order purely by x).
+            order.sort((a, b) => rects[a].x - rects[b].x || rects[a].y - rects[b].y);
+        }
+        else {
+            // Diagonal sweep (top-left → bottom-right).
+            order.sort((a, b) => (rects[a].x + rects[a].y) - (rects[b].x + rects[b].y));
+        }
+        const rank = new Array(N);
+        order.forEach((ri, o) => { rank[ri] = o; });
+        const { startSec, spanSec, tileSec, ease } = opts.reveal;
+        revealStart = (idx) => (0, template_utils_1.fadeInExpr)(startSec + (N <= 1 ? 0 : (rank[idx] / (N - 1)) * spanSec), tileSec, ease !== null && ease !== void 0 ? ease : "smoothstep");
+    }
+    const placed = (0, dsl_stdlib_1.placeRects)({ rootW: W, rootH: H, rects: rects });
+    return placed.layers.map((L) => {
+        const ordered = [...L.rectIndices].sort((a, b) => rects[a].y - rects[b].y || rects[a].x - rects[b].x);
+        const sources = ordered.map((idx) => {
+            var _a;
+            const src = (0, template_utils_1.makeColorTile)(colors[idx], {
+                effects: { rounding: { cornerStyle: "rounded", borderRadius: cr } },
+            });
+            return revealStart
+                ? { ...src, overlay: { ...((_a = src.overlay) !== null && _a !== void 0 ? _a : {}), alpha: revealStart(idx) } }
+                : src;
+        });
+        return { m0: String(L.m0), sources };
+    });
+}
+/** The scatter composed into a single full-canvas Node (standalone backdrop).
+ *  EMPTY when nothing is emitted. */
+function scatterNode(opts) {
+    const layers = scatterLayers(opts);
+    return layers.length ? (0, alpine_card_1.overlay)(layers) : alpine_card_1.EMPTY;
+}

package/dist/m0saic/hero/ffmpeg-pulse/activity-trend/v1/activity-trend.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ============================================================================
+ * @m0saic/hero/ffmpeg-pulse/activity-trend/v1 — Weekly Pulse · Activity Trend (Beat 2)
+ * ============================================================================
+ *
+ * Commits-over-time beat: the SAME chrome as the KPI Overview beat (BEAT chip
+ * floating top-left, FFmpeg logo IN LINE with the title, subtitle, footer, baked
+ * scatter, bg-first-then-content timing) — kept identical so the beats read as one
+ * set — wrapping a "COMMITS OVER TIME" line chart (nested @m0saic/alpine/line-chart)
+ * on the left and a rail of derived stat tiles (Total Commits / Peak Day / Daily Avg
+ * / Active Days, nested @m0saic/alpine/stat-card) on the right.
+ *
+ * Driven by `pulse.activity` (Mon→Sun day commits + peak); the rail figures are
+ * derived (sum / peak / avg / active-days). Aspect-adaptive (rail right on desktop,
+ * a 2×2 under the chart on square/mobile). Deterministic; reduceMotion → static.
+ * ============================================================================
+ */
+import type { MosaicTemplate } from "@m0saic/types";
+import { type PulsePreset } from "../../_shared/pulse-theme";
+import { type WeeklyPulse } from "../../_shared/pulse-data";
+type AnimConfig = {
+    introFrac: number;
+    reduceMotion: boolean;
+};
+type ActivityTrendProps = {
+    pulse: WeeklyPulse;
+    eyebrow?: string;
+    headline?: string;
+    subtitle?: string;
+    preset?: PulsePreset;
+    renderMode?: "premium" | "light";
+    anim?: AnimConfig;
+    animate?: boolean;
+    debugLayout?: boolean;
+};
+export declare const FfmpegPulseActivityTrend: MosaicTemplate<ActivityTrendProps>;
+export {};

package/dist/m0saic/hero/ffmpeg-pulse/activity-trend/v1/activity-trend.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FfmpegPulseActivityTrend = void 0;
+const types_1 = require("@m0saic/types");
+const template_utils_1 = require("@m0saic/template-utils");
+const alpine_card_1 = require("../../../../alpine/_shared/alpine-card");
+const pulse_chrome_1 = require("../../_shared/pulse-chrome");
+const pulse_theme_1 = require("../../_shared/pulse-theme");
+const pulse_data_1 = require("../../_shared/pulse-data");
+const pulse_glyphs_1 = require("../../_shared/pulse-glyphs");
+const DEFAULT_PRESET = "dark";
+const DEFAULT_ANIM = { introFrac: 0.7, reduceMotion: false };
+const GEOM = {
+    desktop: { nativeW: 1920, nativeH: 1080, margin: 140,
+        beat: { x: 140, y: 66, w: 128, h: 42 }, logo: { x: 140, y: 138, w: 116, h: 116 }, title: { x: 276, y: 150, w: 680, h: 92 }, subtitle: { x: 142, y: 282, w: 680, h: 34 },
+        footer: { x: 140, y: 1006, w: 560, h: 50 }, chart: { x: 140, y: 384, w: 960, h: 600 }, rail: { x0: 1140, y0: 384, cols: 2, cw: 300, ch: 288, gx: 20, gy: 24 } },
+    // Square: all three sections (header / chart / KPI rail) share ONE width — a
+    // centered ~740px column (margin 170) — with the rail widened so its 2×2 cards
+    // stay square-ish. The chart is a compact strip; header + chart + rail align.
+    square: { nativeW: 1080, nativeH: 1080, margin: 170,
+        beat: { x: 170, y: 40, w: 120, h: 38 }, logo: { x: 170, y: 104, w: 92, h: 92 }, title: { x: 282, y: 110, w: 600, h: 78 }, subtitle: { x: 172, y: 202, w: 720, h: 30 },
+        footer: { x: 170, y: 1026, w: 420, h: 34 }, chart: { x: 170, y: 252, w: 740, h: 210 },
+        rail: { x0: 170, y0: 482, cols: 2, cw: 360, ch: 258, gx: 20, gy: 16 } },
+    mobile: { nativeW: 1080, nativeH: 1920, margin: 80,
+        beat: { x: 80, y: 110, w: 150, h: 46 }, logo: { x: 80, y: 196, w: 130, h: 130 }, title: { x: 230, y: 212, w: 700, h: 100 }, subtitle: { x: 82, y: 332, w: 760, h: 38 },
+        footer: { x: 80, y: 1800, w: 640, h: 56 }, chart: { x: 80, y: 430, w: 920, h: 560 }, rail: { x0: 80, y0: 1024, cols: 2, cw: 448, ch: 338, gx: 24, gy: 24 } },
+};
+// ---------------------------------------------------------------------------
+// Template
+// (chrome helpers — text1/pill/capFont/withFade/insetSafe/backdrop/header/footer/
+//  scatter/timing — now live in ../../_shared/pulse-chrome)
+// ---------------------------------------------------------------------------
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    pulse: { type: "group", required: false, description: "Weekly Pulse data sheet (activity drives the chart + rail).", meta: { ui: { label: "Pulse data", order: 1, consumer: "agent" } } },
+    eyebrow: { type: "string", required: false, description: "Beat chip label.", meta: { control: { placeholder: "BEAT 2" }, ui: { label: "Eyebrow", order: 1 } } },
+    headline: { type: "string", required: false, description: "Beat title.", meta: { control: { placeholder: "ACTIVITY TREND" }, ui: { label: "Headline", order: 2 } } },
+    subtitle: { type: "string", required: false, description: "One-line beat subtitle.", meta: { ui: { label: "Subtitle", order: 3 } } },
+    preset: { type: "string", required: false, description: "Pulse theme variant.", meta: { constraints: { oneOf: ["dark"] }, ui: { label: "Preset", order: 10 } } },
+    renderMode: { type: "string", required: false, description: "Render weight for this beat's nested charts/cards. \"premium\" (default): alpha-fade reveals — the softer look; the engine's enable-gating makes the per-pixel geq nearly free. \"light\": geq-free enable-gate pops — cheapest, most composable when nested many-deep. Set by the runner.", meta: { constraints: { oneOf: ["light", "premium"] }, ui: { label: "Render mode", order: 11 } } },
+    anim: { type: "group", required: false, description: "Intro: introFrac, reduceMotion.", meta: { ui: { label: "Animation", collapsedByDefault: true, consumer: "agent" } } },
+    animate: { type: "boolean", required: false, description: "Animate the chart draw-on + content fade.", meta: { ui: { label: "Animate", consumer: "human", order: 1 }, control: { syncsTo: [{ prop: "anim.reduceMotion", map: { kind: "boolInvert" } }] } } },
+    debugLayout: { type: "boolean", required: false, description: "Dev-only layout contract: assert the shared chrome (header cluster in the top band, footer in the bottom band) + this beat's chart/rail panels hold their canvas-fraction zones at any resolution/aspect; on violation render a LAYOUT_CONTRACT error mosaic + stamp editor.layoutContract. Default false; production never sets it. Swept by audit:layout-envelope.", meta: { ui: { label: "Debug layout", order: 20, collapsedByDefault: true } } },
+});
+exports.FfmpegPulseActivityTrend = {
+    id: (0, types_1.asTemplateId)("@m0saic/hero/ffmpeg-pulse/activity-trend/v1"),
+    label: "Weekly Pulse · Activity Trend",
+    version: 1,
+    description: "FFmpeg Weekly Pulse — Activity Trend beat (Beat 2). The KPI-Overview chrome wrapping a commits-over-time line chart + a rail of derived stat tiles (total / peak / avg / active days). Aspect-adaptive.",
+    capabilities: { tier: "core" },
+    internal: true,
+    tags: ["hero", "ffmpeg-pulse", "activity-trend", "beat"],
+    outputHints: { width: 1920, height: 1080, fps: 30, durationMs: 9000 },
+    upstreamDataSchema: pulse_data_1.WEEKLY_PULSE_UPSTREAM_SCHEMA,
+    propsSchema,
+    defaultProps: {
+        debugLayout: false,
+        pulse: pulse_data_1.MOCK_FFMPEG_PULSE,
+        eyebrow: "BEAT 2",
+        headline: "ACTIVITY TREND",
+        subtitle: "Commits over the week.",
+        preset: DEFAULT_PRESET,
+        renderMode: "premium",
+        anim: DEFAULT_ANIM,
+    },
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        const W = Math.max(1, Math.round(ctx.target.width));
+        const H = Math.max(1, Math.round(ctx.target.height));
+        const theme = (0, pulse_theme_1.pulseTheme)((_a = props.preset) !== null && _a !== void 0 ? _a : DEFAULT_PRESET);
+        const pulse = (0, pulse_data_1.resolvePulse)(props.pulse, ctx);
+        const anim = { ...DEFAULT_ANIM, ...((_b = props.anim) !== null && _b !== void 0 ? _b : {}) };
+        const reduceMotion = anim.reduceMotion;
+        const renderMode = props.renderMode === "light" ? "light" : "premium";
+        const durationMs = (_c = ctx.target.durationMs) !== null && _c !== void 0 ? _c : 9000;
+        const variant = (0, pulse_chrome_1.classify)(W, H);
+        const gm = GEOM[variant];
+        const sx = W / gm.nativeW, sy = H / gm.nativeH;
+        const scale = (r) => ({ x: Math.round(r.x * sx), y: Math.round(r.y * sy), w: Math.round(r.w * sx), h: Math.round(r.h * sy) });
+        const days = (_e = (_d = pulse.activity) === null || _d === void 0 ? void 0 : _d.days) !== null && _e !== void 0 ? _e : [];
+        if (!days.length)
+            return (0, template_utils_1.makeErrorMosaic)("activity-trend: pulse has no activity days", { title: `${this.id}`, width: W, height: H });
+        const values = days.map((d) => d.commits);
+        const dayLabels = days.map((d) => d.label);
+        const total = values.reduce((a, b) => a + b, 0);
+        const peak = (_f = pulse.activity) === null || _f === void 0 ? void 0 : _f.peak;
+        const avg = Math.round((total / values.length) * 10) / 10;
+        const active = values.filter((v) => v > 0).length;
+        const commitsKpi = ((_g = pulse.kpis) !== null && _g !== void 0 ? _g : []).find((k) => k.key === "commits");
+        // Rail tiles (derived from activity).
+        const railData = [
+            { label: "Total Commits", value: String(total), delta: commitsKpi ? (0, pulse_data_1.kpiDelta)(commitsKpi) : "", direction: (_h = commitsKpi === null || commitsKpi === void 0 ? void 0 : commitsKpi.direction) !== null && _h !== void 0 ? _h : "flat", sublabel: "vs last week", iconKey: "commits" },
+            { label: "Peak Day", value: String((_j = peak === null || peak === void 0 ? void 0 : peak.commits) !== null && _j !== void 0 ? _j : ""), sublabel: `${(_k = peak === null || peak === void 0 ? void 0 : peak.dayLabel) !== null && _k !== void 0 ? _k : ""} · ${peak ? (0, pulse_data_1.monthDay)(peak.dateISO) : ""}`.trim(), iconKey: "stars" },
+            { label: "Daily Avg", value: String(avg), sublabel: "commits / day", iconKey: "commits" },
+            { label: "Active Days", value: `${active}/${values.length}`, sublabel: "100% of week", iconKey: "contributors" },
+        ];
+        // ── Rail cells (row-major) ──
+        const rg = gm.rail;
+        const railCells = railData.map((_, i) => {
+            const row = Math.floor(i / rg.cols), col = i % rg.cols;
+            return scale({ x: rg.x0 + col * (rg.cw + rg.gx), y: rg.y0 + row * (rg.ch + rg.gy), w: rg.cw, h: rg.ch });
+        });
+        // Every nested child renders at the CELL its inset will produce (exact fit
+        // for an absolutely-laid-out child at any canvas) — nudged so that cell is
+        // 5-smooth and hands the child no rough factor (insetSlot, pulse-chrome).
+        const railSlots = railCells.map((r) => (0, pulse_chrome_1.insetSlot)(r, W, H));
+        railCells.forEach((_, i) => { railCells[i] = railSlots[i].rect; });
+        const chartRSlot = (0, pulse_chrome_1.insetSlot)(scale(gm.chart), W, H);
+        const chartR = chartRSlot.rect;
+        // ── Nested panels: the line chart + the rail stat cards ──
+        const introMs = reduceMotion ? 0 : Math.max(500, Math.round(durationMs * anim.introFrac));
+        const chartChild = await (0, template_utils_1.renderNestedTemplate)("@m0saic/alpine/line-chart/v1", {
+            values, labels: dayLabels, title: "COMMITS OVER TIME", subtitle: `${total} commits this week`,
+            curve: "smooth", preset: "dark", lineColor: theme.primaryBright,
+            area: { show: true, opacity: 0.18 }, points: { show: true }, grid: { show: true, count: 4 },
+            anim: { introFrac: anim.introFrac, ease: "smoothstep", reduceMotion },
+        }, ctx, { slot: { width: chartRSlot.slot.width, height: chartRSlot.slot.height, durationMs } });
+        const railChildren = await Promise.all(railData.map((r, i) => {
+            var _a, _b, _c;
+            return (0, template_utils_1.renderNestedTemplate)("@m0saic/alpine/stat-card/v1", {
+                label: r.label, value: r.value, delta: (_a = r.delta) !== null && _a !== void 0 ? _a : "", direction: (_b = r.direction) !== null && _b !== void 0 ? _b : "flat", sublabel: (_c = r.sublabel) !== null && _c !== void 0 ? _c : "",
+                accent: theme.primaryBright, iconPath: r.iconKey ? pulse_glyphs_1.KPI_GLYPHS[r.iconKey] : undefined,
+                renderMode, // runner-controlled render weight (light = geq-free; premium = alpha-fade)
+                preset: "dark", // hero keeps its dark KPI look (stat-card now light by default)
+                backgroundColor: theme.card,
+                anim: { countUp: !reduceMotion, fade: false, introMs, reduceMotion },
+            }, ctx, { slot: { width: railSlots[i].slot.width, height: railSlots[i].slot.height, durationMs } });
+        }));
+        // ── Intro timing + content cascade (shared chrome) ──
+        const t = (0, pulse_chrome_1.pulseTiming)(durationMs, reduceMotion);
+        const { bgFinishT, chromeFadeDur, cardStagger, cardsStart, animOn } = t;
+        const children = { chart: chartChild };
+        const chartNode = (0, pulse_chrome_1.insetSafe)((0, pulse_chrome_1.withFade)((0, alpine_card_1.paint)({ type: "mosaic", ref: "chart" }), bgFinishT, chromeFadeDur, animOn), chartR, W, H);
+        const railNodes = railChildren.map((c, i) => {
+            const ref = `rail${i}`;
+            children[ref] = c;
+            return (0, pulse_chrome_1.insetSafe)((0, pulse_chrome_1.withFade)((0, alpine_card_1.paint)({ type: "mosaic", ref }), cardsStart + i * cardStagger, cardStagger, animOn), railCells[i], W, H);
+        });
+        // ── Header cluster + footer (shared chrome) ──
+        const beatR = scale(gm.beat), logoR = scale(gm.logo), titleR = scale(gm.title), subR = scale(gm.subtitle), footR = scale(gm.footer);
+        const footText = `WEEK ${(_m = (_l = pulse.period) === null || _l === void 0 ? void 0 : _l.weekNumber) !== null && _m !== void 0 ? _m : ""} · ${(0, pulse_data_1.periodLabel)(pulse.period)}`.trim();
+        const header = (0, pulse_chrome_1.buildHeader)({ beat: beatR, logo: logoR, title: titleR, subtitle: subR }, theme, { eyebrow: (_o = props.eyebrow) !== null && _o !== void 0 ? _o : "BEAT 2", title: (_p = props.headline) !== null && _p !== void 0 ? _p : "ACTIVITY TREND", subtitle: (_q = props.subtitle) !== null && _q !== void 0 ? _q : "Commits over the week.", bind: { eyebrow: "eyebrow", title: "headline", subtitle: "subtitle" } }, t, W, H);
+        const footNode = (0, pulse_chrome_1.buildFooter)(footR, theme, footText, t, W, H);
+        // ── Backdrop panels (aligned left edge), fading with the header ──
+        const M = Math.round(gm.margin * sx);
+        const pad = Math.round(Math.min(W, H) * 0.018);
+        const panelX = Math.max(0, M - pad), panelRight = Math.min(W, W - M + pad);
+        const railBbox = (0, pulse_chrome_1.unionRect)(railCells, 0, W, H);
+        // The chart panel gets a DISTINCT (slightly lighter) bg so the plot stands out
+        // from the card-colored header/rail panels.
+        const CHART_BG = "#1b2330";
+        const headerBg = (0, pulse_chrome_1.backdrop)(theme.card, { x: panelX, y: Math.max(0, header.bbox.y - pad), w: panelRight - panelX, h: header.bbox.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn);
+        const chartBg = (0, pulse_chrome_1.labelNode)((0, pulse_chrome_1.backdrop)(CHART_BG, { x: chartR.x - pad, y: chartR.y - pad, w: chartR.w + 2 * pad, h: chartR.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn), "content-panel");
+        const railBg = (0, pulse_chrome_1.labelNode)((0, pulse_chrome_1.backdrop)(theme.card, { x: railBbox.x - pad, y: railBbox.y - pad, w: railBbox.w + 2 * pad, h: railBbox.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn), "rail-panel");
+        const footBg = (0, pulse_chrome_1.backdrop)(theme.card, { x: panelX, y: footR.y - pad, w: footR.w + 2 * pad, h: footR.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn);
+        const root = (0, alpine_card_1.overlay)([(0, pulse_chrome_1.scatterNode)(), chartBg, railBg, headerBg, footBg, ...header.nodes, footNode, chartNode, ...railNodes]);
+        const doc = {
+            kind: "mosaic_document",
+            version: 1,
+            assets: { ...(0, pulse_chrome_1.chromeAssets)(variant) },
+            m0: root.m0,
+            sources: root.sources,
+            children,
+            backgroundColor: theme.canvas,
+            fps: ctx.target.fps,
+            durationMs,
+            size: { width: W, height: H },
+        };
+        // Layout contract (dev tripwire; falsy debug → returns `doc` untouched at zero
+        // cost). Shared chrome zones + this beat's chart/rail content panels.
+        const constraints = [...pulse_chrome_1.PULSE_CHROME_CONSTRAINTS, ...pulse_chrome_1.PULSE_CONTENT_CONSTRAINTS];
+        // flatten:false — the constraints target this beat's OWN top-level chrome +
+        // content panels (all in `root.m0`); we must NOT flatten into the nested
+        // line-chart/stat-cards, whose grid primitive hits SPLIT_EXCEEDS_AXIS at small
+        // canvases (a separate U-C1 quirk) and would collapse the whole check.
+        return (0, template_utils_1.withLayoutContract)(doc, ctx, { templateId: "@m0saic/hero/ffmpeg-pulse/activity-trend/v1", constraints, flatten: false, debug: props.debugLayout === true });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.FfmpegPulseActivityTrend);

package/dist/m0saic/hero/ffmpeg-pulse/activity-trend/v1/index.d.ts

@@ -0,0 +1 @@
+export { FfmpegPulseActivityTrend } from "./activity-trend";

package/dist/m0saic/hero/ffmpeg-pulse/activity-trend/v1/index.js

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

package/dist/m0saic/hero/ffmpeg-pulse/changes-breakdown/v1/changes-breakdown.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ============================================================================
+ * @m0saic/hero/ffmpeg-pulse/changes-breakdown/v1 — Weekly Pulse · Changes Breakdown (Beat 4)
+ * ============================================================================
+ *
+ * The SAME chrome as the other beats (BEAT chip top-left, FFmpeg logo in line with
+ * the title, subtitle, footer, baked scatter, bg-first timing) wrapping a
+ * changes-by-subsystem donut (nested @m0saic/alpine/donut, ring + side legend +
+ * center "files changed" total) on the left + a rail of aggregate stat tiles
+ * (nested @m0saic/alpine/stat-card) on the right.
+ *
+ * Driven by `pulse.changes` (byArea → donut segments + legend, totalFiles → center,
+ * rail → stat tiles). The donut self-surfaces with theme.card, so a theme.card
+ * backdrop at ±pad behind it keeps the panel edges aligned with the rest of the
+ * chrome (cohesive). Aspect-adaptive; deterministic; reduceMotion → static.
+ * ============================================================================
+ */
+import type { MosaicTemplate } from "@m0saic/types";
+import { type PulsePreset } from "../../_shared/pulse-theme";
+import { type WeeklyPulse } from "../../_shared/pulse-data";
+type AnimConfig = {
+    introFrac: number;
+    reduceMotion: boolean;
+};
+type ChangesBreakdownProps = {
+    pulse: WeeklyPulse;
+    eyebrow?: string;
+    headline?: string;
+    subtitle?: string;
+    preset?: PulsePreset;
+    renderMode?: "premium" | "light";
+    anim?: AnimConfig;
+    animate?: boolean;
+    debugLayout?: boolean;
+};
+export declare const FfmpegPulseChangesBreakdown: MosaicTemplate<ChangesBreakdownProps>;
+export {};

package/dist/m0saic/hero/ffmpeg-pulse/changes-breakdown/v1/changes-breakdown.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FfmpegPulseChangesBreakdown = void 0;
+const types_1 = require("@m0saic/types");
+const template_utils_1 = require("@m0saic/template-utils");
+const alpine_card_1 = require("../../../../alpine/_shared/alpine-card");
+const pulse_chrome_1 = require("../../_shared/pulse-chrome");
+const pulse_theme_1 = require("../../_shared/pulse-theme");
+const pulse_data_1 = require("../../_shared/pulse-data");
+const pulse_glyphs_1 = require("../../_shared/pulse-glyphs");
+const DEFAULT_PRESET = "dark";
+const DEFAULT_ANIM = { introFrac: 0.7, reduceMotion: false };
+const GEOM = {
+    desktop: { nativeW: 1920, nativeH: 1080, margin: 140,
+        beat: { x: 140, y: 66, w: 128, h: 42 }, logo: { x: 140, y: 138, w: 116, h: 116 }, title: { x: 276, y: 150, w: 980, h: 92 }, subtitle: { x: 142, y: 282, w: 760, h: 34 },
+        footer: { x: 140, y: 1006, w: 560, h: 50 }, donut: { x: 140, y: 384, w: 980, h: 600 }, rail: { x0: 1160, y0: 384, cols: 2, cw: 290, ch: 288, gx: 20, gy: 24 } },
+    square: { nativeW: 1080, nativeH: 1080, margin: 170,
+        beat: { x: 170, y: 40, w: 120, h: 38 }, logo: { x: 170, y: 104, w: 92, h: 92 }, title: { x: 282, y: 120, w: 628, h: 58 }, subtitle: { x: 172, y: 202, w: 720, h: 30 },
+        footer: { x: 170, y: 1026, w: 420, h: 34 }, donut: { x: 170, y: 252, w: 740, h: 366 },
+        rail: { x0: 170, y0: 638, cols: 2, cw: 360, ch: 184, gx: 20, gy: 16 } },
+    mobile: { nativeW: 1080, nativeH: 1920, margin: 80,
+        beat: { x: 80, y: 110, w: 150, h: 46 }, logo: { x: 80, y: 196, w: 130, h: 130 }, title: { x: 230, y: 228, w: 760, h: 74 }, subtitle: { x: 82, y: 332, w: 760, h: 38 },
+        // Donut shortened (the ring + legend don't need the full column) so the rail beneath
+        // gets real height — a 2×2 of wider+taller tiles reads far better than a 4×1 of
+        // narrow width-bound cards.
+        footer: { x: 80, y: 1800, w: 640, h: 56 }, donut: { x: 80, y: 430, w: 920, h: 720 },
+        rail: { x0: 80, y0: 1180, cols: 2, cw: 448, ch: 298, gx: 24, gy: 16 } },
+};
+// rail KPI key → glyph key.
+const RAIL_GLYPH = { totalFiles: "commits", additions: "additions", deletions: "deletions", netChanges: "commits", contributors: "contributors", stars: "stars" };
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    pulse: { type: "group", required: false, description: "Weekly Pulse data sheet (changes drives the donut + rail).", meta: { ui: { label: "Pulse data", order: 1, consumer: "agent" } } },
+    eyebrow: { type: "string", required: false, description: "Beat chip label.", meta: { control: { placeholder: "BEAT 4" }, ui: { label: "Eyebrow", order: 1 } } },
+    headline: { type: "string", required: false, description: "Beat title.", meta: { control: { placeholder: "CHANGES BREAKDOWN" }, ui: { label: "Headline", order: 2 } } },
+    subtitle: { type: "string", required: false, description: "One-line beat subtitle.", meta: { ui: { label: "Subtitle", order: 3 } } },
+    preset: { type: "string", required: false, description: "Pulse theme variant.", meta: { constraints: { oneOf: ["dark"] }, ui: { label: "Preset", order: 10 } } },
+    renderMode: { type: "string", required: false, description: "Render weight for this beat's nested charts/cards. \"premium\" (default): alpha-fade reveals — the softer look; the engine's enable-gating makes the per-pixel geq nearly free. \"light\": geq-free enable-gate pops — cheapest, most composable when nested many-deep. Set by the runner.", meta: { constraints: { oneOf: ["light", "premium"] }, ui: { label: "Render mode", order: 11 } } },
+    anim: { type: "group", required: false, description: "Intro: introFrac, reduceMotion.", meta: { ui: { label: "Animation", collapsedByDefault: true, consumer: "agent" } } },
+    animate: { type: "boolean", required: false, description: "Animate the donut sweep + content fade.", meta: { ui: { label: "Animate", consumer: "human", order: 1 }, control: { syncsTo: [{ prop: "anim.reduceMotion", map: { kind: "boolInvert" } }] } } },
+    debugLayout: { type: "boolean", required: false, description: "Dev-only layout contract: assert the shared chrome (header cluster top-band, footer bottom-band) + this beat's content/rail panels hold their canvas-fraction zones at any resolution/aspect; on violation render a LAYOUT_CONTRACT error mosaic + stamp editor.layoutContract. Default false; production never sets it. Swept by audit:layout-envelope.", meta: { ui: { label: "Debug layout", order: 20, collapsedByDefault: true } } },
+});
+exports.FfmpegPulseChangesBreakdown = {
+    id: (0, types_1.asTemplateId)("@m0saic/hero/ffmpeg-pulse/changes-breakdown/v1"),
+    label: "Weekly Pulse · Changes Breakdown",
+    version: 1,
+    description: "FFmpeg Weekly Pulse — Changes Breakdown beat (Beat 4). The shared beat chrome wrapping a changes-by-subsystem donut (ring + legend + center total) + a rail of aggregate stat tiles. Aspect-adaptive.",
+    capabilities: { tier: "core" },
+    internal: true,
+    tags: ["hero", "ffmpeg-pulse", "changes-breakdown", "beat"],
+    outputHints: { width: 1920, height: 1080, fps: 30, durationMs: 9000 },
+    upstreamDataSchema: pulse_data_1.WEEKLY_PULSE_UPSTREAM_SCHEMA,
+    propsSchema,
+    defaultProps: {
+        debugLayout: false,
+        pulse: pulse_data_1.MOCK_FFMPEG_PULSE,
+        eyebrow: "BEAT 4",
+        headline: "CHANGES BREAKDOWN",
+        subtitle: "What changed, by subsystem.",
+        preset: DEFAULT_PRESET,
+        renderMode: "premium",
+        anim: DEFAULT_ANIM,
+    },
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const W = Math.max(1, Math.round(ctx.target.width));
+        const H = Math.max(1, Math.round(ctx.target.height));
+        const theme = (0, pulse_theme_1.pulseTheme)((_a = props.preset) !== null && _a !== void 0 ? _a : DEFAULT_PRESET);
+        const pulse = (0, pulse_data_1.resolvePulse)(props.pulse, ctx);
+        const anim = { ...DEFAULT_ANIM, ...((_b = props.anim) !== null && _b !== void 0 ? _b : {}) };
+        const reduceMotion = anim.reduceMotion;
+        const renderMode = props.renderMode === "light" ? "light" : "premium";
+        const durationMs = (_c = ctx.target.durationMs) !== null && _c !== void 0 ? _c : 9000;
+        const variant = (0, pulse_chrome_1.classify)(W, H);
+        const gm = GEOM[variant];
+        const sx = W / gm.nativeW, sy = H / gm.nativeH;
+        const scale = (r) => ({ x: Math.round(r.x * sx), y: Math.round(r.y * sy), w: Math.round(r.w * sx), h: Math.round(r.h * sy) });
+        const areas = (_e = (_d = pulse.changes) === null || _d === void 0 ? void 0 : _d.byArea) !== null && _e !== void 0 ? _e : [];
+        if (!areas.length)
+            return (0, template_utils_1.makeErrorMosaic)("changes-breakdown: pulse has no changes.byArea", { title: `${this.id}`, width: W, height: H });
+        const segments = areas.map((a) => ({ label: a.area, value: a.files, color: a.color }));
+        const totalFiles = (_g = (_f = pulse.changes) === null || _f === void 0 ? void 0 : _f.totalFiles) !== null && _g !== void 0 ? _g : areas.reduce((s, a) => s + a.files, 0);
+        // Rail tiles (aggregate KPIs, first 4 of pulse.changes.rail).
+        const railData = ((_j = (_h = pulse.changes) === null || _h === void 0 ? void 0 : _h.rail) !== null && _j !== void 0 ? _j : []).slice(0, 4).map((k) => {
+            var _a, _b, _c;
+            return ({
+                label: k.label, value: (0, pulse_data_1.kpiValue)(k), delta: (0, pulse_data_1.kpiDelta)(k), direction: (_a = k.direction) !== null && _a !== void 0 ? _a : "flat", sublabel: (_b = k.sublabel) !== null && _b !== void 0 ? _b : "vs last week", iconKey: (_c = RAIL_GLYPH[k.key]) !== null && _c !== void 0 ? _c : "commits",
+            });
+        });
+        // ── Rail cells (row-major) ──
+        const rg = gm.rail;
+        const railCells = railData.map((_, i) => {
+            const row = Math.floor(i / rg.cols), col = i % rg.cols;
+            return scale({ x: rg.x0 + col * (rg.cw + rg.gx), y: rg.y0 + row * (rg.ch + rg.gy), w: rg.cw, h: rg.ch });
+        });
+        // Every nested child renders at the CELL its inset will produce (exact fit
+        // for an absolutely-laid-out child at any canvas) — nudged so that cell is
+        // 5-smooth and hands the child no rough factor (insetSlot, pulse-chrome).
+        const railSlots = railCells.map((r) => (0, pulse_chrome_1.insetSlot)(r, W, H));
+        railCells.forEach((_, i) => { railCells[i] = railSlots[i].rect; });
+        const donutRSlot = (0, pulse_chrome_1.insetSlot)(scale(gm.donut), W, H);
+        const donutR = donutRSlot.rect;
+        // ── Nested panels: the donut + the rail stat cards ──
+        const introMs = reduceMotion ? 0 : Math.max(500, Math.round(durationMs * anim.introFrac));
+        const donutChild = await (0, template_utils_1.renderNestedTemplate)("@m0saic/alpine/donut/v1", {
+            segments, title: "", subtitle: "", centerValue: String(totalFiles), centerLabel: "files changed",
+            preset: "dark", legend: "right", segmentLabels: "percent",
+            anim: { introFrac: anim.introFrac, countUp: !reduceMotion, easing: "easeOut", reduceMotion, renderMode }, // runner-controlled render weight (light = geq-free donut sweep; premium = alpha fade)
+        }, ctx, { slot: { width: donutRSlot.slot.width, height: donutRSlot.slot.height, durationMs } });
+        const railChildren = await Promise.all(railData.map((r, i) => {
+            var _a, _b, _c;
+            return (0, template_utils_1.renderNestedTemplate)("@m0saic/alpine/stat-card/v1", {
+                label: r.label, value: r.value, delta: (_a = r.delta) !== null && _a !== void 0 ? _a : "", direction: (_b = r.direction) !== null && _b !== void 0 ? _b : "flat", sublabel: (_c = r.sublabel) !== null && _c !== void 0 ? _c : "",
+                accent: theme.primaryBright, iconPath: r.iconKey ? pulse_glyphs_1.KPI_GLYPHS[r.iconKey] : undefined,
+                renderMode, // runner-controlled render weight (light = geq-free; premium = alpha-fade)
+                preset: "dark", // hero keeps its dark KPI look (stat-card now light by default)
+                backgroundColor: theme.card,
+                anim: { countUp: !reduceMotion, fade: false, introMs, reduceMotion },
+            }, ctx, { slot: { width: railSlots[i].slot.width, height: railSlots[i].slot.height, durationMs } });
+        }));
+        // ── Intro timing + content cascade (shared chrome) ──
+        const t = (0, pulse_chrome_1.pulseTiming)(durationMs, reduceMotion);
+        const { bgFinishT, chromeFadeDur, cardStagger, cardsStart, animOn } = t;
+        const children = { donut: donutChild };
+        const donutNode = (0, pulse_chrome_1.insetSafe)((0, pulse_chrome_1.withFade)((0, alpine_card_1.paint)({ type: "mosaic", ref: "donut" }), bgFinishT, chromeFadeDur, animOn), donutR, W, H);
+        const railNodes = railChildren.map((c, i) => {
+            const ref = `rail${i}`;
+            children[ref] = c;
+            return (0, pulse_chrome_1.insetSafe)((0, pulse_chrome_1.withFade)((0, alpine_card_1.paint)({ type: "mosaic", ref }), cardsStart + i * cardStagger, cardStagger, animOn), railCells[i], W, H);
+        });
+        // ── Header cluster + footer (shared chrome) ──
+        const beatR = scale(gm.beat), logoR = scale(gm.logo), titleR = scale(gm.title), subR = scale(gm.subtitle), footR = scale(gm.footer);
+        const footText = `WEEK ${(_l = (_k = pulse.period) === null || _k === void 0 ? void 0 : _k.weekNumber) !== null && _l !== void 0 ? _l : ""} · ${(0, pulse_data_1.periodLabel)(pulse.period)}`.trim();
+        const header = (0, pulse_chrome_1.buildHeader)({ beat: beatR, logo: logoR, title: titleR, subtitle: subR }, theme, { eyebrow: (_m = props.eyebrow) !== null && _m !== void 0 ? _m : "BEAT 4", title: (_o = props.headline) !== null && _o !== void 0 ? _o : "CHANGES BREAKDOWN", subtitle: (_p = props.subtitle) !== null && _p !== void 0 ? _p : "What changed, by subsystem.", bind: { eyebrow: "eyebrow", title: "headline", subtitle: "subtitle" } }, t, W, H);
+        const footNode = (0, pulse_chrome_1.buildFooter)(footR, theme, footText, t, W, H);
+        // ── Backdrop panels (all theme.card with the same ±pad inset → aligned edges).
+        //    The donut self-surfaces with theme.card, so its ±pad backdrop blends seamlessly. ──
+        const M = Math.round(gm.margin * sx);
+        const pad = Math.round(Math.min(W, H) * 0.018);
+        const panelX = Math.max(0, M - pad), panelRight = Math.min(W, W - M + pad);
+        const railBbox = (0, pulse_chrome_1.unionRect)(railCells, 0, W, H);
+        const donutBg = (0, pulse_chrome_1.labelNode)((0, pulse_chrome_1.backdrop)(theme.card, { x: donutR.x - pad, y: donutR.y - pad, w: donutR.w + 2 * pad, h: donutR.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn), "content-panel");
+        const headerBg = (0, pulse_chrome_1.backdrop)(theme.card, { x: panelX, y: Math.max(0, header.bbox.y - pad), w: panelRight - panelX, h: header.bbox.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn);
+        const railBg = (0, pulse_chrome_1.labelNode)((0, pulse_chrome_1.backdrop)(theme.card, { x: railBbox.x - pad, y: railBbox.y - pad, w: railBbox.w + 2 * pad, h: railBbox.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn), "rail-panel");
+        const footBg = (0, pulse_chrome_1.backdrop)(theme.card, { x: panelX, y: footR.y - pad, w: footR.w + 2 * pad, h: footR.h + 2 * pad }, W, H, bgFinishT, chromeFadeDur, animOn);
+        const root = (0, alpine_card_1.overlay)([(0, pulse_chrome_1.scatterNode)(), donutBg, railBg, headerBg, footBg, ...header.nodes, footNode, donutNode, ...railNodes]);
+        const doc = {
+            kind: "mosaic_document",
+            version: 1,
+            assets: { ...(0, pulse_chrome_1.chromeAssets)(variant) },
+            m0: root.m0,
+            sources: root.sources,
+            children,
+            backgroundColor: theme.canvas,
+            fps: ctx.target.fps,
+            durationMs,
+            size: { width: W, height: H },
+        };
+        // Layout contract (dev tripwire; flatten:false → judge only this beat's own
+        // top-level chrome + content/rail panels, not the nested donut/cards).
+        const constraints = [...pulse_chrome_1.PULSE_CHROME_CONSTRAINTS, ...pulse_chrome_1.PULSE_CONTENT_CONSTRAINTS];
+        return (0, template_utils_1.withLayoutContract)(doc, ctx, { templateId: "@m0saic/hero/ffmpeg-pulse/changes-breakdown/v1", constraints, flatten: false, debug: props.debugLayout === true });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.FfmpegPulseChangesBreakdown);

package/dist/m0saic/hero/ffmpeg-pulse/changes-breakdown/v1/index.d.ts

@@ -0,0 +1 @@
+export { FfmpegPulseChangesBreakdown } from "./changes-breakdown";

package/dist/m0saic/hero/ffmpeg-pulse/changes-breakdown/v1/index.js

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