@m0saic/templates 0.2.0

package/dist/m0saic/media/qr/stamp-video/v1/qr-stamp.js

@@ -0,0 +1,424 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QrStampVideo = void 0;
+const types_1 = require("@m0saic/types");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const template_utils_1 = require("@m0saic/template-utils");
+const expressions_1 = require("./expressions");
+const gleamBand_1 = require("./gleamBand");
+const BRAND_ORANGE = "#f97316";
+function variantBackgroundColor(variant, bgOpacity) {
+    if (variant === "transparent")
+        return undefined;
+    const base = variant === "dark" ? "#000000" : "#ffffff";
+    const clamped = Math.max(0, Math.min(1, bgOpacity));
+    return (clamped >= 1 ? base : `${base}@${clamped}`);
+}
+// ─────────────────────────────────────────────────────────────────────
+// Tunable defaults for the free-tier QR watermark.
+//
+// Most-tuned knobs (in order of how often we touch them):
+//   stampSizePct   — size of the QR as a % of min(canvasW, canvasH).
+//                    Bumped to 18 (~20% larger than 15) for better
+//                    legibility on social-aspect deliverables. Floor
+//                    is ~10 (scanner-friendly on phones); ceiling is
+//                    ~24 before it starts to dominate the corner.
+//   cornerInsetPx  — padding from the bottom-right edge in pixels.
+//   entrance       — set to FALSE so the stamp is present from t=0.
+//                    The earlier scale-bounce + fade-in was nice in
+//                    isolation but felt fussy on short clips and
+//                    made the stamp briefly invisible at the start.
+//   bgOpacity      — solid-background variant's bleed-through. 0.92
+//                    keeps the modules crisp without a sticker look.
+// ─────────────────────────────────────────────────────────────────────
+const DEFAULTS = {
+    text: "https://www.m0saic.io",
+    cornerInsetPx: 24,
+    stampSizePct: 18,
+    entrance: false,
+    entranceDurMs: 400,
+    gleam: true,
+    gleamPeriodSec: 6,
+    gleamSweepSec: 0.9,
+    gleamAngleDeg: 20,
+    gleamPeakAlpha: 0.4,
+    mode: "auto",
+    adaptiveLowLuma: 100,
+    adaptiveHighLuma: 156,
+    crossfadeDurMs: 400,
+    bgOpacity: 0.92,
+};
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    videoPath: {
+        type: "media",
+        required: true,
+        description: "Path to the base video file to stamp.",
+        meta: { control: { picker: "file", accept: ["video"] } },
+    },
+    text: {
+        type: "string",
+        required: false,
+        description: "Text encoded into the QR — URL, plain string, or structured payload (default: https://www.m0saic.io).",
+        meta: { control: { flavor: "url", placeholder: "https://www.m0saic.io" } },
+    },
+    cornerInsetPx: {
+        type: "number",
+        required: false,
+        description: "Padding from the bottom-right edge, in pixels.",
+        meta: { constraints: { min: 0, max: 500 } },
+    },
+    stampSizePct: {
+        type: "number",
+        required: false,
+        description: "Stamp size as a percent of min(W, H).",
+        meta: { constraints: { min: 1, max: 50 } },
+    },
+    entrance: {
+        type: "boolean",
+        required: false,
+        description: "Play the entrance fade-in animation.",
+    },
+    entranceDurMs: {
+        type: "number",
+        required: false,
+        description: "Entrance duration, ms.",
+        meta: { constraints: { min: 0, max: 5000 } },
+    },
+    gleam: {
+        type: "boolean",
+        required: false,
+        description: "Periodic diagonal shine sweep on the QR (screen-blend overlay) — premium polish, on by default.",
+    },
+    gleamPeriodSec: {
+        type: "number",
+        required: false,
+        description: "Time between gleam sweeps, in seconds.",
+        meta: { constraints: { min: 1, max: 60 } },
+    },
+    gleamSweepSec: {
+        type: "number",
+        required: false,
+        description: "How long each sweep takes (seconds). Short = quick flash, long = lazier shine.",
+        meta: { constraints: { min: 0.2, max: 10 } },
+    },
+    gleamAngleDeg: {
+        type: "number",
+        required: false,
+        description: "Band angle in degrees (0 = vertical band, 20 = mild diagonal).",
+        meta: { constraints: { min: 0, max: 60 } },
+    },
+    gleamPeakAlpha: {
+        type: "number",
+        required: false,
+        description: "Peak alpha of the shine band (0..1).",
+        meta: { constraints: { min: 0, max: 1 } },
+    },
+    mode: {
+        type: "string",
+        required: false,
+        description: "QR adaptation mode.",
+        meta: {
+            constraints: { oneOf: ["auto", "light", "dark", "transparent"] },
+        },
+    },
+    luminanceBuckets: {
+        type: "json",
+        required: false,
+        description: "Pre-computed luminance buckets for mode=auto. The CLI free-tier hook fills this from a probe over the bottom-right region.",
+    },
+    adaptiveLowLuma: {
+        type: "number",
+        required: false,
+        description: "Auto-mode adaptive band low end. Decision threshold is the midpoint of [low, high].",
+        meta: { constraints: { min: 0, max: 255 } },
+    },
+    adaptiveHighLuma: {
+        type: "number",
+        required: false,
+        description: "Auto-mode adaptive band high end. Decision threshold is the midpoint of [low, high].",
+        meta: { constraints: { min: 0, max: 255 } },
+    },
+    crossfadeDurMs: {
+        type: "number",
+        required: false,
+        description: "Smoothstep crossfade duration in ms between auto-mode variants at scene boundaries.",
+        meta: { constraints: { min: 0, max: 2000 } },
+    },
+    bgOpacity: {
+        type: "number",
+        required: false,
+        description: "Opacity of the QR's solid background, 0..1 (default 0.92). Lower = softer sticker.",
+        meta: { constraints: { min: 0, max: 1 } },
+    },
+});
+function variantsForMode(mode) {
+    if (mode === "auto")
+        return ["light", "dark"];
+    if (mode === "light")
+        return ["light"];
+    if (mode === "dark")
+        return ["dark"];
+    return ["transparent"];
+}
+exports.QrStampVideo = (0, template_utils_1.defineMosaicTemplate)({
+    id: (0, types_1.asTemplateId)("@m0saic/media/qr/stamp-video/v1"),
+    label: "QR Stamp — Video (v1, deprecated)",
+    version: 1,
+    // BITMAP drafting mode (handbook §3c): the split counts ARE the QR module grid —
+    // never live-composed, so the latticeSmooth convention does not apply.
+    lattice: { mode: "bitmap" },
+    description: "Brands a video with an adaptive QR. The card crossfades light↔dark with the scene's brightness so the QR tones with the underlying frame. Optional gleam shine + entrance fade.",
+    deprecated: {
+        reason: "Fully absorbed by QR Stamp (media/qr/stamp/v1), which shares the same stampQrOnMedia adaptive-crossfade engine and additionally handles images. The one exclusive here — the render-time gleam sweep — is retired by design: decoration belongs baked into the input media (seed it with another template), not computed in the stamp. Kept as the reference adaptive video stamp.",
+        replacement: (0, types_1.asTemplateId)("@m0saic/media/qr/stamp/v1"),
+        since: "2026-07-21",
+    },
+    capabilities: {
+        tier: "capability",
+        caps: { fs: { read: true, write: true, temp: true } },
+    },
+    tags: ["brand", "qr", "watermark", "free-tier", "adaptive"],
+    outputHints: {
+        width: 1920,
+        height: 1080,
+        fps: 30,
+        durationMs: 10000,
+        format: { kind: "video", container: "mp4" },
+    },
+    propsSchema,
+    defaultProps: DEFAULTS,
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        if (!props.videoPath) {
+            // Return a visible error mosaic rather than throwing. Same pattern as
+            // subtitle-burn / other capability templates so the smoke test + any
+            // mis-configured caller surface a clear "missing input" frame instead
+            // of a stack trace.
+            return (0, template_utils_1.makeErrorMosaic)("QrStampVideo: videoPath prop is required (the base video to stamp).", {
+                title: "QR Stamp (Video)",
+                width: ctx.target.width,
+                height: ctx.target.height,
+            });
+        }
+        const text = (_a = props.text) !== null && _a !== void 0 ? _a : DEFAULTS.text;
+        const cornerInsetPx = (_b = props.cornerInsetPx) !== null && _b !== void 0 ? _b : DEFAULTS.cornerInsetPx;
+        const stampSizePct = (_c = props.stampSizePct) !== null && _c !== void 0 ? _c : DEFAULTS.stampSizePct;
+        const entrance = (_d = props.entrance) !== null && _d !== void 0 ? _d : DEFAULTS.entrance;
+        const entranceDurMs = (_e = props.entranceDurMs) !== null && _e !== void 0 ? _e : DEFAULTS.entranceDurMs;
+        const gleam = (_f = props.gleam) !== null && _f !== void 0 ? _f : DEFAULTS.gleam;
+        const gleamPeriodSec = (_g = props.gleamPeriodSec) !== null && _g !== void 0 ? _g : DEFAULTS.gleamPeriodSec;
+        const gleamSweepSec = (_h = props.gleamSweepSec) !== null && _h !== void 0 ? _h : DEFAULTS.gleamSweepSec;
+        const gleamAngleDeg = (_j = props.gleamAngleDeg) !== null && _j !== void 0 ? _j : DEFAULTS.gleamAngleDeg;
+        const gleamPeakAlpha = (_k = props.gleamPeakAlpha) !== null && _k !== void 0 ? _k : DEFAULTS.gleamPeakAlpha;
+        const mode = (_l = props.mode) !== null && _l !== void 0 ? _l : DEFAULTS.mode;
+        const luminanceBuckets = (_m = props.luminanceBuckets) !== null && _m !== void 0 ? _m : [];
+        const adaptiveLowLuma = (_o = props.adaptiveLowLuma) !== null && _o !== void 0 ? _o : DEFAULTS.adaptiveLowLuma;
+        const adaptiveHighLuma = (_p = props.adaptiveHighLuma) !== null && _p !== void 0 ? _p : DEFAULTS.adaptiveHighLuma;
+        const crossfadeDurMs = (_q = props.crossfadeDurMs) !== null && _q !== void 0 ? _q : DEFAULTS.crossfadeDurMs;
+        const bgOpacity = (_r = props.bgOpacity) !== null && _r !== void 0 ? _r : DEFAULTS.bgOpacity;
+        const canvasW = ctx.output.width;
+        const canvasH = ctx.output.height;
+        const stampSizePx = Math.max(64, Math.round(Math.min(canvasW, canvasH) * (stampSizePct / 100)));
+        // Build the m0 layout: base video + N nested bottom-right cells. The cell
+        // is (stampSizePx + cornerInsetPx) on each side; the source's
+        // placement.inset leaves the gutter visible as canvas-edge margin.
+        // When gleam is on we reserve an extra overlay layer for the
+        // screen-blend shine band that sits on top of the QR variants.
+        const variants = variantsForMode(mode);
+        const overlayCount = variants.length + (gleam ? 1 : 0);
+        const layout = (0, expressions_1.buildCornerStampM0)({
+            canvasW,
+            canvasH,
+            stampPx: stampSizePx,
+            gutterPx: cornerInsetPx,
+            overlayCount,
+        });
+        // Base video occupies the full canvas (outer F tile).
+        const baseAssetId = (0, types_1.asAssetId)("qr_stamp_base");
+        const assets = {
+            [baseAssetId]: {
+                kind: "file",
+                path: props.videoPath,
+                mediaType: "video",
+            },
+        };
+        const sources = [
+            {
+                type: "media",
+                mediaType: "video",
+                assetId: baseAssetId,
+                placement: { fit: "cover" },
+            },
+        ];
+        // Each variant becomes a self-contained child MosaicDocument: in-house
+        // qrToM0 modules + a tinted background. No PNG raster, no sharp. The
+        // parent references each child via a `type: "mosaic"` source, so the
+        // existing adaptive-alpha and entrance expressions still attach to the
+        // QR's slot in the parent's m0 without any change in semantics.
+        const variantChildren = {};
+        for (const v of variants) {
+            let qr;
+            try {
+                qr = (0, template_utils_1.qrToRenderable)({
+                    text,
+                    moduleColor: BRAND_ORANGE,
+                    errorCorrectionLevel: "H",
+                });
+            }
+            catch (err) {
+                return (0, template_utils_1.makeErrorMosaic)(`QrStampVideo: ${err instanceof Error ? err.message : String(err)}`, {
+                    title: "QR Stamp (Video)",
+                    width: ctx.target.width,
+                    height: ctx.target.height,
+                });
+            }
+            const bgColor = variantBackgroundColor(v, bgOpacity);
+            const childKey = `qr_stamp_${v}`;
+            variantChildren[childKey] = {
+                kind: "mosaic_document",
+                version: 1,
+                m0: (0, dsl_stdlib_1.toM0String)(String(qr.m0), `QrStampVideo-qr-${v}`),
+                sources: qr.sources,
+                assets: {},
+                size: { width: qr.canvasW, height: qr.canvasH },
+                ...(bgColor !== undefined ? { backgroundColor: bgColor } : {}),
+            };
+            // Compose alpha = entrance × adaptive (gleam is now its own
+            // screen-blend overlay layer, not an alpha modulation).
+            const factors = [];
+            if (mode === "auto" && (v === "light" || v === "dark")) {
+                factors.push((0, expressions_1.buildAdaptiveAlphaExpr)(luminanceBuckets, v, adaptiveLowLuma, adaptiveHighLuma, crossfadeDurMs / 1000));
+            }
+            if (entrance) {
+                factors.push((0, expressions_1.buildEntranceExpr)(0, entranceDurMs / 1000));
+            }
+            const alphaExpr = factors.length > 0 ? (0, expressions_1.composeAlpha)(...factors) : undefined;
+            sources.push({
+                type: "mosaic",
+                ref: childKey,
+                placement: {
+                    fit: "contain",
+                    hAlign: "left",
+                    vAlign: "top",
+                    inset: { right: layout.insetRight, bottom: layout.insetBottom },
+                },
+                ...(alphaExpr ? { overlay: { alpha: alphaExpr } } : {}),
+            });
+        }
+        // Gleam shine band — diagonal white stripe swept across the QR.
+        //
+        // # Nested-mosaic clipping (the whole point of this structure)
+        //
+        // The gleam is wrapped in a nested mosaic doc rather than added
+        // as a direct media source on the parent. ffmpeg's `overlay`
+        // filter does NOT clip a layer to its destination rect — a
+        // tilted band shifted by `xExpr` paints wherever its pixels
+        // land, including outside the QR cell. The nested mosaic gives
+        // us pixel-perfect clipping for free: the engine renders the
+        // child mosaic into an intermediate framebuffer sized exactly
+        // to the gleam-cell's bounds, so anything the inner overlay
+        // tries to paint past that frame's edges literally doesn't
+        // exist. The intermediate (which carries the gleam over a
+        // transparent base) then gets composited onto the QR with
+        // `blendMode: "screen"` — outside-band pixels are transparent
+        // (no effect under screen), inside-band pixels brighten the
+        // QR modules.
+        //
+        // Layout: inner doc m0 = "F{F}". Outer F holds the lavfi
+        // transparent base; nested F holds the gleam image source with
+        // the sweep xExpr. Both fill the inner canvas — no inset, no
+        // positioning offset — because the inner canvas IS the gleam's
+        // bounding box.
+        const children = { ...variantChildren };
+        if (gleam) {
+            const { pngPath: gleamPngPath } = await (0, gleamBand_1.generateGleamBandPng)({
+                sizePx: stampSizePx,
+                workspaceDir: ctx.output.workspaceDir,
+                angleDeg: gleamAngleDeg,
+                peakAlpha: gleamPeakAlpha,
+                outputName: "qr-stamp-gleam.png",
+            });
+            const sweepXExpr = (0, gleamBand_1.buildGleamSweepXExpr)(gleamPeriodSec, gleamSweepSec);
+            // Active window per cycle: [0, sweepSec). Outside this window
+            // mod(t,period) ≥ sweepSec so lt(mod(t,P),S) is false → enable=0
+            // and the engine skips the overlay. With entrance, additionally
+            // gate on t ≥ entrance end so the shine doesn't pop mid-fade-in.
+            const periodFixed = gleamPeriodSec.toFixed(3);
+            const sweepFixed = gleamSweepSec.toFixed(3);
+            const sweepGate = `lt(mod(t,${periodFixed}),${sweepFixed})`;
+            const enableExpr = entrance
+                ? `gte(t,${(entranceDurMs / 1000).toFixed(3)})*${sweepGate}`
+                : sweepGate;
+            const gleamInnerAssetId = (0, types_1.asAssetId)("qr_stamp_gleam_inner");
+            // Child doc — the gleam's self-contained universe. Two
+            // sources: a transparent base that gives the overlay
+            // something to composite onto, and the gleam image with the
+            // sweep xExpr. Both fill the inner F.
+            const gleamInnerDoc = {
+                kind: "mosaic_document",
+                version: 1,
+                m0: (0, dsl_stdlib_1.toM0String)("F{F}", "QrStampGleamInner"),
+                assets: {
+                    [gleamInnerAssetId]: {
+                        kind: "file",
+                        path: gleamPngPath,
+                        mediaType: "image",
+                    },
+                },
+                sources: [
+                    // Outer F: transparent base. Engine forces it to
+                    // inner-canvas dimensions automatically (fitMode default
+                    // "tile"). Provides the framebuffer the gleam overlays
+                    // onto.
+                    {
+                        type: "lavfi",
+                        color: "black@0",
+                    },
+                    // Inner F: the gleam, with overlay.xExpr driving the
+                    // sweep. Stays inside the inner canvas because the
+                    // framebuffer is finite — that's the clipping guarantee
+                    // this whole nested structure exists for.
+                    {
+                        type: "media",
+                        mediaType: "image",
+                        assetId: gleamInnerAssetId,
+                        placement: { fit: "contain" },
+                        overlay: {
+                            xExpr: sweepXExpr,
+                            enable: enableExpr,
+                        },
+                    },
+                ],
+            };
+            children["qr_stamp_gleam"] = gleamInnerDoc;
+            // Parent reference — placed in the same QR cell as the
+            // variants, with screen blend to brighten the modules. The
+            // enable gate is duplicated here so the engine can skip the
+            // intermediate composite entirely outside the sweep window.
+            sources.push({
+                type: "mosaic",
+                ref: "qr_stamp_gleam",
+                placement: {
+                    fit: "contain",
+                    hAlign: "left",
+                    vAlign: "top",
+                    inset: { right: layout.insetRight, bottom: layout.insetBottom },
+                },
+                overlay: {
+                    blendMode: "screen",
+                    enable: enableExpr,
+                },
+            });
+        }
+        return {
+            kind: "mosaic_document",
+            version: 1,
+            m0: (0, dsl_stdlib_1.toM0String)(layout.m0, "QrStampVideo"),
+            assets,
+            sources,
+            ...(Object.keys(children).length > 0 ? { children } : {}),
+        };
+    },
+});
+(0, template_utils_1.registerTemplate)(exports.QrStampVideo);
+exports.default = exports.QrStampVideo;

package/dist/m0saic/media/screencap_grid/index.d.ts

@@ -0,0 +1,3 @@
+export { ScreencapGrid, type ScreencapGridProps } from "./v1";
+export { ScreencapGridV2, type ScreencapGridV2Props } from "./v2";
+export { InfoPane, type InfoPaneProps } from "./internal";

package/dist/m0saic/media/screencap_grid/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoPane = exports.ScreencapGridV2 = exports.ScreencapGrid = void 0;
+var v1_1 = require("./v1");
+Object.defineProperty(exports, "ScreencapGrid", { enumerable: true, get: function () { return v1_1.ScreencapGrid; } });
+var v2_1 = require("./v2");
+Object.defineProperty(exports, "ScreencapGridV2", { enumerable: true, get: function () { return v2_1.ScreencapGridV2; } });
+var internal_1 = require("./internal");
+Object.defineProperty(exports, "InfoPane", { enumerable: true, get: function () { return internal_1.InfoPane; } });

package/dist/m0saic/media/screencap_grid/internal/index.d.ts

@@ -0,0 +1 @@
+export { InfoPane, type InfoPaneProps } from "./info_pane";

package/dist/m0saic/media/screencap_grid/internal/index.js

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

package/dist/m0saic/media/screencap_grid/internal/info_pane.d.ts

@@ -0,0 +1,13 @@
+import type { MosaicTemplate } from "@m0saic/types";
+export type InfoPaneProps = {
+    /** Primary title text (typically the filename). */
+    title: string;
+    /** Multi-line metadata text (duration, codecs, etc.). */
+    metadata: string;
+    /** Pixel height of the info pane tile (passed by parent for reference). */
+    paneHeight: number;
+    /** Horizontal alignment of the title + metadata text. Default "left". */
+    align?: "left" | "center" | "right";
+};
+export declare const INFO_PANE_TEMPLATE_ID: import("@m0saic/types").TemplateId;
+export declare const InfoPane: MosaicTemplate<InfoPaneProps>;

package/dist/m0saic/media/screencap_grid/internal/info_pane.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoPane = exports.INFO_PANE_TEMPLATE_ID = void 0;
+const types_1 = require("@m0saic/types");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const template_utils_1 = require("@m0saic/template-utils");
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    title: {
+        type: "string",
+        required: true,
+        description: "Primary title text (typically the filename).",
+    },
+    metadata: {
+        type: "string",
+        required: true,
+        description: "Multi-line metadata text.",
+    },
+    paneHeight: {
+        type: "number",
+        required: true,
+        description: "Pixel height of the info pane tile.",
+    },
+    align: {
+        type: "string",
+        required: false,
+        description: "Horizontal alignment of the text.",
+        meta: { constraints: { oneOf: ["left", "center", "right"] } },
+    },
+});
+// ---- TEMPLATE ----
+exports.INFO_PANE_TEMPLATE_ID = (0, types_1.asTemplateId)("@m0saic/media/screencap_grid/internal/info_pane/v1");
+/*
+ * Typography limitations:
+ *   FFmpeg drawtext does not support fontWeight or fontStyle (italic).
+ *   Bold is simulated via a thin same-color border (borderWidth) that thickens
+ *   each glyph. Italic is not achievable without a separate italic font file.
+ *   Font sizes are derived from ctx.target.height (the full output height),
+ *   NOT from paneHeight, so they remain stable regardless of how tall the
+ *   info pane is. The pane is auto-sized from the content in the parent.
+ */
+exports.InfoPane = {
+    id: exports.INFO_PANE_TEMPLATE_ID,
+    label: "Screencap Grid — Info Pane (internal)",
+    version: 1,
+    internal: true,
+    description: "Internal subtemplate: renders the filename + metadata info pane for the screencap grid.",
+    capabilities: { tier: "core" },
+    tags: ["media", "screencap", "internal"],
+    propsSchema,
+    outputHints: {
+        format: { kind: "image", container: "png" },
+    },
+    defaultProps: {
+        align: "left",
+        title: "",
+        metadata: "",
+        paneHeight: 130,
+    },
+    render(props, ctx) {
+        var _a;
+        const { title, metadata } = props;
+        const hAlign = (_a = props.align) !== null && _a !== void 0 ? _a : "left";
+        const targetH = ctx.target.height;
+        // Font sizes scaled from the full output height for consistency across
+        // pane sizes. Must match the formulas in screencap-grid.ts estimateInfoPaneHeight.
+        const titleFontSize = Math.max(16, Math.min(48, Math.round(targetH * 0.022)));
+        const metaFontSize = Math.max(9, Math.min(20, Math.round(targetH * 0.012)));
+        // Thin same-color border to simulate bold (thickens each glyph slightly).
+        const titleBorderWidth = Math.max(1, Math.round(titleFontSize * 0.02));
+        // Pixel-based positioning so text fills the pane tightly. BOTH layers
+        // must be pixel-anchored (yExpr): the engine resolves fractional padding
+        // against the RASTER height, and this doc rasterizes at the full parent
+        // canvas (the wrapper-stamped `size`), not at paneHeight — a fraction of
+        // paneHeight would land the title below the metadata block. The pixel
+        // values are exactly what estimateInfoPaneHeight budgets for the pane.
+        const topPad = 6;
+        const titleBlockH = Math.round(titleFontSize * 1.3);
+        const gap = Math.round(titleFontSize * 0.35);
+        const metaY = topPad + titleBlockH + gap;
+        const doc = {
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: (0, dsl_stdlib_1.toM0String)("F", "InfoPane"),
+            sources: [
+                {
+                    type: "text",
+                    renderMode: { kind: "image" },
+                    layers: [
+                        // Layer 0: Title (filename) — large, bright white, faux-bold via border
+                        {
+                            content: { kind: "literal", text: title },
+                            style: {
+                                fontSize: titleFontSize,
+                                fontColor: "#ffffff",
+                                borderWidth: titleBorderWidth,
+                                borderColor: "#ffffff",
+                            },
+                            visual: { backgroundColor: "#0d0d0d" },
+                            placement: {
+                                hAlign,
+                                vAlign: "top",
+                                yExpr: `${topPad}`,
+                                padding: { x: 0.015 },
+                            },
+                        },
+                        // Layer 1: Metadata (dense info lines) — smaller, muted gray
+                        {
+                            content: { kind: "literal", text: metadata },
+                            style: {
+                                fontSize: metaFontSize,
+                                fontColor: "#a0a0a0",
+                            },
+                            visual: {},
+                            placement: {
+                                hAlign,
+                                vAlign: "top",
+                                yExpr: `${metaY}`,
+                                padding: { x: 0.015 },
+                            },
+                        },
+                    ],
+                    editor: { owner: "template" },
+                },
+            ],
+        };
+        return Promise.resolve(doc);
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.InfoPane);

package/dist/m0saic/media/screencap_grid/v1/index.d.ts

@@ -0,0 +1 @@
+export { ScreencapGrid, type ScreencapGridProps } from "./screencap-grid";

package/dist/m0saic/media/screencap_grid/v1/index.js

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