@m0saic/templates 0.2.0

package/dist/m0saic/hero/ffmpeg-pulse/_shared/assets/title-layout.m0p

@@ -0,0 +1,130 @@
+{
+  "format": "m0p",
+  "version": 1,
+  "created": "2026-06-23T00:00:00.000Z",
+  "app": "@m0saic/templates",
+  "appVersion": null,
+  "meta": {
+    "title": "FFmpeg Weekly Pulse — title beat layout (3 aspects)"
+  },
+  "regions": null,
+  "custom": {
+    "source": "sandbox 2026-06-23-ffmpeg-pulse-title · human-approved, GCD-compacted desktop+square"
+  },
+  "variants": {
+    "desktop": {
+      "meta": null,
+      "size": {
+        "width": 1920,
+        "height": 1080
+      },
+      "m0": "54[0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,96(0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),-,0,0,0,0,0,0,48(0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),-,0,0,0,0,0,96(0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),-,0,0,0,0,96(0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),0,0,0,0,0,0,-,0,0,0,0,0,0,0,16(0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,1)]{9[0,-,96(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),0,0,0,0,0,-]}",
+      "labels": {
+        "r/gcolc17/fc15": {
+          "text": "Logo"
+        },
+        "r/gcolc25/fc28": {
+          "text": "Title"
+        },
+        "r/gcolc32/fc57": {
+          "text": "Subtitle"
+        },
+        "r/gcolc38/fc34": {
+          "text": "Date pill"
+        },
+        "r/gcolc38/fc44": {
+          "text": "Week pill"
+        },
+        "r/gcolc53/fc15": {
+          "text": "Watermark"
+        },
+        "r/ov1c0/gcolc2/fc40": {
+          "text": "Wordmark"
+        }
+      },
+      "derive": {
+        "background": null
+      },
+      "masks": null,
+      "fill": null,
+      "rankSets": null,
+      "custom": null
+    },
+    "mobile": {
+      "meta": null,
+      "size": {
+        "width": 1080,
+        "height": 1920
+      },
+      "m0": "192[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,-),0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,-),0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,-,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,-),0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,54(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,-),0,0,-]{192[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,108(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-]}",
+      "labels": {
+        "r/gcolc101/fc31": {
+          "text": "Date pill"
+        },
+        "r/gcolc101/fc44": {
+          "text": "Week pill"
+        },
+        "r/gcolc188/fc49": {
+          "text": "Watermark"
+        },
+        "r/gcolc44/fc12": {
+          "text": "Logo"
+        },
+        "r/gcolc66/fc50": {
+          "text": "Title"
+        },
+        "r/gcolc85/fc48": {
+          "text": "Subtitle"
+        },
+        "r/ov1c0/gcolc43/fc76": {
+          "text": "Wordmark"
+        }
+      },
+      "derive": {
+        "background": null
+      },
+      "masks": null,
+      "fill": null,
+      "rankSets": null,
+      "custom": null
+    },
+    "square": {
+      "meta": null,
+      "size": {
+        "width": 1080,
+        "height": 1080
+      },
+      "m0": "108[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,-),0,0,-,0,0,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,-),0,0,-,0,0,0,0,0,0,0,0,0,54(0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,-,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,-),0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,54(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,-),0,-]{216[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,108(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-),0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-]}",
+      "labels": {
+        "r/gcolc105/fc51": {
+          "text": "Watermark"
+        },
+        "r/gcolc35/fc12": {
+          "text": "Logo"
+        },
+        "r/gcolc52/fc50": {
+          "text": "Title"
+        },
+        "r/gcolc67/fc50": {
+          "text": "Subtitle"
+        },
+        "r/gcolc80/fc30": {
+          "text": "Date pill"
+        },
+        "r/gcolc80/fc41": {
+          "text": "Week pill"
+        },
+        "r/ov1c0/gcolc70/fc75": {
+          "text": "Wordmark"
+        }
+      },
+      "derive": {
+        "background": null
+      },
+      "masks": null,
+      "fill": null,
+      "rankSets": null,
+      "custom": null
+    }
+  }
+}

package/dist/m0saic/hero/ffmpeg-pulse/_shared/pulse-chrome.d.ts

@@ -0,0 +1,151 @@
+/**
+ * ============================================================================
+ * @m0saic/hero/ffmpeg-pulse/_shared/pulse-chrome — the shared beat chrome
+ * ============================================================================
+ *
+ * One source of truth for the "every Weekly-Pulse beat looks the same" guarantee:
+ * the header cluster (BEAT chip floating top-left + FFmpeg logo IN LINE with the
+ * title + subtitle), the footer (WEEK · period), the rounded backdrop panels, the
+ * baked scatter background, and the bg-first-then-content intro timing.
+ *
+ * Each beat owns its GEOMETRY (where the header rects / content region sit per
+ * aspect) and its CONTENT (grid, chart+rail, table, …); it calls these builders to
+ * draw the chrome around that content with identical styling + timing.
+ *
+ * Text is fixed-font + width-capped (NEVER fit:"contain" — contain scales to the
+ * cell height then clips a long line's width, e.g. "ACTIVITY TREND").
+ * ============================================================================
+ */
+import type { MosaicColor, MosaicTextSource } from "@m0saic/types";
+import { type LayoutConstraint } from "@m0saic/template-utils";
+import { type Node } from "../../../alpine/_shared/alpine-card";
+import type { PulseTheme } from "./pulse-theme";
+export type Rect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export type Variant = "desktop" | "square" | "mobile";
+export declare function classify(W: number, H: number): Variant;
+/** A fixed-font (NO fit:"contain") text leaf; callers width-cap via `capFont`. */
+export declare function text1(text: string, fontSize: number, color: MosaicColor, hAlign?: "left" | "center" | "right"): MosaicTextSource;
+/** A pill: a fully-rounded color tile under centered fitted text. */
+export declare function pill(label: string, fill: MosaicColor, textColor: MosaicColor, fontSize: number): Node;
+/** Largest font ≤ `px` that keeps `text` within `cellW` (≈`em` per char). */
+export declare function capFont(px: number, text: string, cellW: number, min: number, em?: number): number;
+/** Stamp an intro fade (overlay.alpha) onto every source of a Node. */
+export declare function withFade(node: Node, startSec: number, durSec: number, on: boolean): Node;
+/**
+ * Stamp `editor.label` on a node's FIRST source — the box a `LayoutConstraint`
+ * resolves the label to. Every chrome/content node here is `insetSafe(...)` around
+ * a single content leaf (pill tile / logo / text / backdrop / mosaic-ref), so its
+ * first source IS that leaf, placed at the node's rect. Editor-only metadata: it
+ * never touches the m0 or the rendered pixels, so it's safe to leave on always
+ * (the contract CHECK is separately debug-gated by `withLayoutContract`).
+ */
+export declare function labelNode(node: Node, label: string): Node;
+/**
+ * Bind a node's FIRST source (the content leaf — same reasoning as `labelNode`)
+ * to the prop it SHOWS, so Make's double-click edits that prop in place.
+ * Editor-only metadata, like the label: never touches the m0 or the pixels.
+ */
+export declare function bindNode(node: Node, propKey: string): Node;
+/** Inset a node at a pixel rect, omitting 0-weight margin bands (flatten-safe). */
+export declare function insetSafe(node: Node, r: Rect, W: number, H: number): Node;
+/**
+ * A nested child's slot, derived from the CELL its inset will produce — not
+ * from the ideal rect. An absolutely-laid-out child (the deprecated alpine v1s
+ * place rects at slot pixels) needs its cell to be at least its slot, and the
+ * kit's 120-slot quantization can leave the cell a pixel short of the rect:
+ * notable-commits' 720-wide feed in a 719 px cell was SPLIT_EXCEEDS_AXIS on
+ * flatten at 1024² (2026-09-16). Rendering the child at the predicted cell
+ * makes the fit exact at every canvas. The rect is also nudged until that cell
+ * is 5-smooth on both axes, so the child inherits no rough factor
+ * (latticeSmooth): the kit quantizes to 120 slots, so a cell only moves in
+ * ~canvas/120 steps (8.5 px at 1024) and the search must span a few slots —
+ * shrink first (up to `shrink` px, a card never grows into its neighbour's
+ * gap), grow as a fallback (up to `grow` px). If nothing lands, the raw
+ * prediction is used.
+ */
+export declare function insetSlot(r: Rect, W: number, H: number, shrink?: number, grow?: number): {
+    rect: Rect;
+    slot: {
+        width: number;
+        height: number;
+    };
+};
+/** A rounded backdrop card that covers the busy scatter behind a content region. */
+export declare function backdrop(fill: MosaicColor, r: Rect, W: number, H: number, startSec: number, durSec: number, on: boolean): Node;
+/** Bounding box of a set of rects (padded, clamped to the canvas). */
+export declare function unionRect(rects: Rect[], pad: number, W: number, H: number): Rect;
+export type PulseTiming = {
+    clipSec: number;
+    animOn: boolean;
+    bgFinishT: number;
+    chromeFadeDur: number;
+    cardStagger: number;
+    cardsStart: number;
+};
+/**
+ * The shared intro choreography: the baked bg reveal plays first (its L→R wipe is
+ * pre-rendered into the scatter video, finishing ~22%); THEN the chrome fades in;
+ * THEN the beat's content cascades. reduceMotion → everything at t=0.
+ */
+export declare function pulseTiming(durationMs: number, reduceMotion: boolean): PulseTiming;
+export type HeaderRects = {
+    beat: Rect;
+    logo: Rect;
+    title: Rect;
+    subtitle: Rect;
+};
+export type HeaderLabels = {
+    eyebrow: string;
+    title: string;
+    subtitle: string;
+    /** The prop key each label SHOWS (`bindNode` provenance). Omit an entry when
+     *  the text is derived rather than a prop. */
+    bind?: {
+        eyebrow?: string;
+        title?: string;
+        subtitle?: string;
+    };
+};
+/** Build the header cluster (BEAT chip + logo + title + subtitle) at the given
+ *  rects, faded with the chrome. Returns the nodes (compose order) + their bbox. */
+export declare function buildHeader(rects: HeaderRects, theme: PulseTheme, labels: HeaderLabels, t: PulseTiming, W: number, H: number): {
+    nodes: Node[];
+    bbox: Rect;
+};
+/**
+ * The cross-beat CHROME invariant, keyed off the labels `buildHeader`/`buildFooter`
+ * stamp: the header cluster (eyebrow chip · logo · title · subtitle) stays in the
+ * top band and left of center; the footer stays in the bottom band. Ratio-based,
+ * so one declaration holds at any canvas AND any aspect (desktop / square / mobile).
+ * Each beat spreads these and adds its own content-region constraints. The bands
+ * are the invariant; the exact cluster positions differ per aspect (responsive) —
+ * these assert nothing escapes its zone, which is what "chrome across resolutions"
+ * means. Verified by `audit:layout-envelope` (16:9 × 9:16 × 1:1, 240→2160px).
+ */
+export declare const PULSE_CHROME_CONSTRAINTS: LayoutConstraint[];
+/**
+ * The shared CONTENT invariant for the chart+rail beats (activity-trend,
+ * contributions, top-contributors, changes-breakdown, notable-commits): the main
+ * content panel (`content-panel` — chart / heatmap / table / donut / feed) and the
+ * stat rail (`rail-panel`) both live in the mid band, between the header and footer,
+ * at any aspect. The exact split (side-by-side on desktop, stacked on square/mobile)
+ * is responsive; these assert both panels stay clear of the chrome bands.
+ */
+export declare const PULSE_CONTENT_CONSTRAINTS: LayoutConstraint[];
+/** Build the footer (WEEK · period) line at the given rect, faded with the chrome. */
+export declare function buildFooter(footR: Rect, theme: PulseTheme, text: string, t: PulseTiming, W: number, H: number): Node;
+/** The scatter background layer — references the baked per-aspect video (assetId
+ *  "scatterBg", supplied by `chromeAssets`). */
+export declare function scatterNode(): Node;
+/** The chrome's shared file assets: the FFmpeg logo + the baked scatter for the
+ *  given aspect. Spread into the beat document's `assets`. */
+export declare function chromeAssets(variant: Variant): Record<string, {
+    kind: "file";
+    path: string;
+    mediaType: "image" | "video";
+}>;

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

@@ -0,0 +1,305 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/hero/ffmpeg-pulse/_shared/pulse-chrome — the shared beat chrome
+ * ============================================================================
+ *
+ * One source of truth for the "every Weekly-Pulse beat looks the same" guarantee:
+ * the header cluster (BEAT chip floating top-left + FFmpeg logo IN LINE with the
+ * title + subtitle), the footer (WEEK · period), the rounded backdrop panels, the
+ * baked scatter background, and the bg-first-then-content intro timing.
+ *
+ * Each beat owns its GEOMETRY (where the header rects / content region sit per
+ * aspect) and its CONTENT (grid, chart+rail, table, …); it calls these builders to
+ * draw the chrome around that content with identical styling + timing.
+ *
+ * Text is fixed-font + width-capped (NEVER fit:"contain" — contain scales to the
+ * cell height then clips a long line's width, e.g. "ACTIVITY TREND").
+ * ============================================================================
+ */
+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.PULSE_CONTENT_CONSTRAINTS = exports.PULSE_CHROME_CONSTRAINTS = void 0;
+exports.classify = classify;
+exports.text1 = text1;
+exports.pill = pill;
+exports.capFont = capFont;
+exports.withFade = withFade;
+exports.labelNode = labelNode;
+exports.bindNode = bindNode;
+exports.insetSafe = insetSafe;
+exports.insetSlot = insetSlot;
+exports.backdrop = backdrop;
+exports.unionRect = unionRect;
+exports.pulseTiming = pulseTiming;
+exports.buildHeader = buildHeader;
+exports.buildFooter = buildFooter;
+exports.scatterNode = scatterNode;
+exports.chromeAssets = chromeAssets;
+const path = __importStar(require("node:path"));
+// Node-only deep import (not re-exported from the barrel, which must stay
+// web-bundleable). Translates in-asar paths so ffmpeg can open the assets.
+const assetPath_1 = require("@m0saic/template-utils/dist/m0saic/assetPath");
+const template_utils_1 = require("@m0saic/template-utils");
+const alpine_card_1 = require("../../../alpine/_shared/alpine-card");
+function classify(W, H) {
+    const ar = W / H;
+    return ar >= 1.3 ? "desktop" : ar < 0.85 ? "mobile" : "square";
+}
+// ── Leaves / utilities ──────────────────────────────────────────────────────
+/** A fixed-font (NO fit:"contain") text leaf; callers width-cap via `capFont`. */
+function text1(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" } }] };
+}
+/** A pill: a fully-rounded color tile under centered fitted text. */
+function pill(label, fill, textColor, fontSize) {
+    return (0, alpine_card_1.overlay)([
+        (0, alpine_card_1.paint)((0, template_utils_1.makeColorTile)(fill, { effects: { rounding: { cornerStyle: "rounded", borderRadius: 0.34 } } })),
+        (0, alpine_card_1.paint)(text1(label, fontSize, textColor, "center")),
+    ]);
+}
+/** Largest font ≤ `px` that keeps `text` within `cellW` (≈`em` per char). */
+function capFont(px, text, cellW, min, em = 0.6) {
+    return Math.max(min, Math.min(Math.round(px), Math.floor(cellW / Math.max(1, (text || " ").length * em))));
+}
+/** Stamp an intro fade (overlay.alpha) onto every source of a Node. */
+function withFade(node, startSec, durSec, on) {
+    if (!on)
+        return node;
+    const alpha = (0, template_utils_1.fadeInExpr)(startSec, durSec);
+    return { m0: node.m0, sources: node.sources.map((s) => { var _a; return ({ ...s, overlay: { ...((_a = s.overlay) !== null && _a !== void 0 ? _a : {}), alpha } }); }) };
+}
+/**
+ * Stamp `editor.label` on a node's FIRST source — the box a `LayoutConstraint`
+ * resolves the label to. Every chrome/content node here is `insetSafe(...)` around
+ * a single content leaf (pill tile / logo / text / backdrop / mosaic-ref), so its
+ * first source IS that leaf, placed at the node's rect. Editor-only metadata: it
+ * never touches the m0 or the rendered pixels, so it's safe to leave on always
+ * (the contract CHECK is separately debug-gated by `withLayoutContract`).
+ */
+function labelNode(node, label) {
+    var _a;
+    const [first, ...rest] = node.sources;
+    if (!first)
+        return node;
+    const tagged = { ...first, editor: { ...((_a = first.editor) !== null && _a !== void 0 ? _a : {}), label } };
+    return { m0: node.m0, sources: [tagged, ...rest] };
+}
+/**
+ * Bind a node's FIRST source (the content leaf — same reasoning as `labelNode`)
+ * to the prop it SHOWS, so Make's double-click edits that prop in place.
+ * Editor-only metadata, like the label: never touches the m0 or the pixels.
+ */
+function bindNode(node, propKey) {
+    const [first, ...rest] = node.sources;
+    if (!first)
+        return node;
+    return { m0: node.m0, sources: [(0, template_utils_1.bindProp)({ ...first }, propKey), ...rest] };
+}
+/** Inset a node at a pixel rect, omitting 0-weight margin bands (flatten-safe). */
+function insetSafe(node, r, W, H) {
+    const left = Math.max(0, Math.round(r.x)), top = Math.max(0, Math.round(r.y));
+    const right = Math.max(0, W - Math.round(r.x + r.w)), bottom = Math.max(0, H - Math.round(r.y + r.h));
+    const midW = Math.max(1, W - left - right), midH = Math.max(1, H - top - bottom);
+    const cols = [];
+    if (left > 0)
+        cols.push({ weight: left, node: alpine_card_1.EMPTY });
+    cols.push({ weight: midW, node });
+    if (right > 0)
+        cols.push({ weight: right, node: alpine_card_1.EMPTY });
+    const mid = cols.length === 1 ? node : (0, alpine_card_1.colSplit)(cols);
+    const rows = [];
+    if (top > 0)
+        rows.push({ weight: top, node: alpine_card_1.EMPTY });
+    rows.push({ weight: midH, node: mid });
+    if (bottom > 0)
+        rows.push({ weight: bottom, node: alpine_card_1.EMPTY });
+    return rows.length === 1 ? mid : (0, alpine_card_1.rowSplit)(rows);
+}
+/** The kit's cap — `split()` in alpine-card Hamilton-scales any band set over it to exactly this. */
+const KIT_BASIS_CAP = 120;
+/**
+ * The cell `insetSafe(node, r, W, H)` will ACTUALLY produce, in px — the same
+ * arithmetic as the kit (latticeWeights → weightedSplit → GCD) and the engine
+ * (outside-in remainder), band construction mirrored from insetSafe.
+ */
+function insetCellPx(r, W, H) {
+    const left = Math.max(0, Math.round(r.x)), top = Math.max(0, Math.round(r.y));
+    const right = Math.max(0, W - Math.round(r.x + r.w)), bottom = Math.max(0, H - Math.round(r.y + r.h));
+    const midW = Math.max(1, W - left - right), midH = Math.max(1, H - top - bottom);
+    const axis = (total, lo, mid, hi) => {
+        const bands = [lo, mid, hi].filter((v, i) => i === 1 || v > 0);
+        if (bands.length === 1)
+            return total;
+        return (0, template_utils_1.quantizedSections)(total, (0, template_utils_1.latticeWeights)(bands, { cap: KIT_BASIS_CAP }))[lo > 0 ? 1 : 0];
+    };
+    return { width: axis(W, left, midW, right), height: axis(H, top, midH, bottom) };
+}
+/**
+ * A nested child's slot, derived from the CELL its inset will produce — not
+ * from the ideal rect. An absolutely-laid-out child (the deprecated alpine v1s
+ * place rects at slot pixels) needs its cell to be at least its slot, and the
+ * kit's 120-slot quantization can leave the cell a pixel short of the rect:
+ * notable-commits' 720-wide feed in a 719 px cell was SPLIT_EXCEEDS_AXIS on
+ * flatten at 1024² (2026-09-16). Rendering the child at the predicted cell
+ * makes the fit exact at every canvas. The rect is also nudged until that cell
+ * is 5-smooth on both axes, so the child inherits no rough factor
+ * (latticeSmooth): the kit quantizes to 120 slots, so a cell only moves in
+ * ~canvas/120 steps (8.5 px at 1024) and the search must span a few slots —
+ * shrink first (up to `shrink` px, a card never grows into its neighbour's
+ * gap), grow as a fallback (up to `grow` px). If nothing lands, the raw
+ * prediction is used.
+ */
+function insetSlot(r, W, H, shrink = 40, grow = 16) {
+    const nudges = [0];
+    for (let k = 1; k <= Math.max(shrink, grow); k++) {
+        if (k <= shrink)
+            nudges.push(-k);
+        if (k <= grow)
+            nudges.push(k);
+    }
+    let rect = { ...r };
+    let cell = insetCellPx(rect, W, H);
+    if (!(0, template_utils_1.isSmooth)(cell.width)) {
+        for (const dw of nudges) {
+            const cand = { ...rect, w: Math.max(1, r.w + dw) };
+            const c = insetCellPx(cand, W, H);
+            if ((0, template_utils_1.isSmooth)(c.width)) {
+                rect = cand;
+                cell = c;
+                break;
+            }
+        }
+    }
+    if (!(0, template_utils_1.isSmooth)(cell.height)) {
+        for (const dh of nudges) {
+            const cand = { ...rect, h: Math.max(1, r.h + dh) };
+            const c = insetCellPx(cand, W, H);
+            if ((0, template_utils_1.isSmooth)(c.height)) {
+                rect = cand;
+                cell = c;
+                break;
+            }
+        }
+    }
+    return { rect, slot: { width: cell.width, height: cell.height } };
+}
+/** A rounded backdrop card that covers the busy scatter behind a content region. */
+function backdrop(fill, r, W, H, startSec, durSec, on) {
+    const card = (0, alpine_card_1.paint)((0, template_utils_1.makeColorTile)(fill, { effects: { rounding: { cornerStyle: "rounded", borderRadius: 0.05 } } }));
+    return insetSafe(withFade(card, startSec, durSec, on), r, W, H);
+}
+/** Bounding box of a set of rects (padded, clamped to the canvas). */
+function unionRect(rects, pad, W, H) {
+    const minX = Math.min(...rects.map((r) => r.x)), minY = Math.min(...rects.map((r) => r.y));
+    const maxX = Math.max(...rects.map((r) => r.x + r.w)), maxY = Math.max(...rects.map((r) => r.y + r.h));
+    const x = Math.max(0, minX - pad), y = Math.max(0, minY - pad);
+    return { x, y, w: Math.min(W - x, maxX - minX + 2 * pad), h: Math.min(H - y, maxY - minY + 2 * pad) };
+}
+/**
+ * The shared intro choreography: the baked bg reveal plays first (its L→R wipe is
+ * pre-rendered into the scatter video, finishing ~22%); THEN the chrome fades in;
+ * THEN the beat's content cascades. reduceMotion → everything at t=0.
+ */
+function pulseTiming(durationMs, reduceMotion) {
+    const clipSec = Math.max(0.1, (durationMs !== null && durationMs !== void 0 ? durationMs : 9000) / 1000);
+    const animOn = !reduceMotion;
+    const bgFinishT = animOn ? clipSec * 0.22 : 0;
+    const chromeFadeDur = Math.max(0.3, clipSec * 0.07);
+    const cardStagger = Math.max(0.1, clipSec * 0.02);
+    return { clipSec, animOn, bgFinishT, chromeFadeDur, cardStagger, cardsStart: bgFinishT + chromeFadeDur };
+}
+/** Build the header cluster (BEAT chip + logo + title + subtitle) at the given
+ *  rects, faded with the chrome. Returns the nodes (compose order) + their bbox. */
+function buildHeader(rects, theme, labels, t, W, H) {
+    var _a;
+    const { beat, logo, title, subtitle } = rects;
+    const fc = (n) => withFade(n, t.bgFinishT, t.chromeFadeDur, t.animOn);
+    const beatNode = labelNode(insetSafe(fc(pill(labels.eyebrow, theme.primary, "#0d1117", capFont(beat.h * 0.5, labels.eyebrow, beat.w * 0.82, 10))), beat, W, H), "eyebrow");
+    const logoNode = labelNode(insetSafe(fc((0, alpine_card_1.paint)({ type: "media", mediaType: "image", assetId: "ffmpegLogo", placement: { fit: "contain" } })), logo, W, H), "logo");
+    const titleNode = labelNode(insetSafe(fc((0, alpine_card_1.paint)(text1(labels.title, capFont(title.h * 0.86, labels.title, title.w, 20, 0.62), theme.title, "left"))), title, W, H), "title");
+    const subNode = labelNode(insetSafe(fc((0, alpine_card_1.paint)(text1(labels.subtitle, capFont(subtitle.h * 0.92, labels.subtitle, subtitle.w, 11, 0.5), theme.subtitle, "left"))), subtitle, W, H), "subtitle");
+    const b = (_a = labels.bind) !== null && _a !== void 0 ? _a : {};
+    const bound = (n, key) => (key ? bindNode(n, key) : n);
+    return {
+        nodes: [bound(beatNode, b.eyebrow), logoNode, bound(titleNode, b.title), bound(subNode, b.subtitle)],
+        bbox: unionRect([beat, logo, title, subtitle], 0, W, H),
+    };
+}
+/**
+ * The cross-beat CHROME invariant, keyed off the labels `buildHeader`/`buildFooter`
+ * stamp: the header cluster (eyebrow chip · logo · title · subtitle) stays in the
+ * top band and left of center; the footer stays in the bottom band. Ratio-based,
+ * so one declaration holds at any canvas AND any aspect (desktop / square / mobile).
+ * Each beat spreads these and adds its own content-region constraints. The bands
+ * are the invariant; the exact cluster positions differ per aspect (responsive) —
+ * these assert nothing escapes its zone, which is what "chrome across resolutions"
+ * means. Verified by `audit:layout-envelope` (16:9 × 9:16 × 1:1, 240→2160px).
+ */
+exports.PULSE_CHROME_CONSTRAINTS = [
+    { label: "eyebrow", within: { yFrac: [0, 0.3], xFrac: [0, 0.55] } },
+    { label: "logo", within: { yFrac: [0, 0.36], xFrac: [0, 0.55] } },
+    { label: "title", within: { yFrac: [0, 0.36] } },
+    { label: "subtitle", within: { yFrac: [0, 0.42] } },
+    { label: "footer", within: { yFrac: [0.84, 1.0] } },
+];
+/**
+ * The shared CONTENT invariant for the chart+rail beats (activity-trend,
+ * contributions, top-contributors, changes-breakdown, notable-commits): the main
+ * content panel (`content-panel` — chart / heatmap / table / donut / feed) and the
+ * stat rail (`rail-panel`) both live in the mid band, between the header and footer,
+ * at any aspect. The exact split (side-by-side on desktop, stacked on square/mobile)
+ * is responsive; these assert both panels stay clear of the chrome bands.
+ */
+exports.PULSE_CONTENT_CONSTRAINTS = [
+    { label: "content-panel", within: { yFrac: [0.14, 0.97] } },
+    { label: "rail-panel", within: { yFrac: [0.14, 0.99] } },
+];
+/** Build the footer (WEEK · period) line at the given rect, faded with the chrome. */
+function buildFooter(footR, theme, text, t, W, H) {
+    return labelNode(insetSafe(withFade((0, alpine_card_1.paint)(text1(text, capFont(footR.h * 0.5, text, footR.w, 11, 0.5), theme.label, "left")), t.bgFinishT, t.chromeFadeDur, t.animOn), footR, W, H), "footer");
+}
+// ── Baked scatter background ─────────────────────────────────────────────────
+/** The scatter background layer — references the baked per-aspect video (assetId
+ *  "scatterBg", supplied by `chromeAssets`). */
+function scatterNode() {
+    return (0, alpine_card_1.paint)({ type: "media", mediaType: "video", assetId: "scatterBg", placement: { fit: "cover" } });
+}
+/** The chrome's shared file assets: the FFmpeg logo + the baked scatter for the
+ *  given aspect. Spread into the beat document's `assets`. */
+function chromeAssets(variant) {
+    const asset = (name, mediaType) => (0, assetPath_1.fileAsset)(path.resolve(__dirname, "assets"), name, mediaType);
+    return { ffmpegLogo: asset("ffmpeg-logo.png", "image"), scatterBg: asset(`scatter-${variant}.mp4`, "video"), qrFin: asset("qr-fin.mp4", "video") };
+}