@m0saic/templates 0.2.0

package/dist/m0saic/brand/community-m/v1/timing.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTimeline = resolveTimeline;
+const template_utils_1 = require("@m0saic/template-utils");
+const PIECE_MIN_MS = 500;
+/**
+ * Visible time per beat. The stitched pipeline equals `totalMs` exactly
+ * (fades ride on the outgoing step). A pinned duration (`--durationMs` /
+ * Make) is honoured by shrinking the piece window first, then scaling the
+ * harness beats; below the floor the caller shows an error card.
+ */
+function resolveTimeline(p, declaredPieceMs, ctx) {
+    const r = (n) => Math.max(0, Math.round(n));
+    let introHoldMs = r(p.introMs), zoomMs = r(p.zoomMs), tileHoldMs = r(p.holdMs), revealMs = r(p.revealMs), slideMs = r(p.slideMs), outroMs = r(p.outroMs), closerMs = r(p.closerMs);
+    const xfadeMs = r(p.xfadeMs);
+    let pieceVisibleMs = r(Math.min(declaredPieceMs, p.pieceMaxMs));
+    // reveal + slide play twice: out to the canvas, and back to the M.
+    const harness = () => introHoldMs + zoomMs + tileHoldMs + 2 * (revealMs + slideMs) + outroMs + closerMs;
+    let source = "natural";
+    const pinned = (0, template_utils_1.resolvePinnedDurationMs)(ctx);
+    if (pinned !== undefined) {
+        source = "pinned";
+        const target = r(pinned);
+        const minTotal = 1200 + PIECE_MIN_MS; // absolute floor: a few hundred ms per beat
+        if (target < minTotal)
+            return { ok: false, error: `pinned duration ${target} ms is too short (minimum ${minTotal} ms)` };
+        if (target >= harness() + PIECE_MIN_MS) {
+            pieceVisibleMs = Math.min(pieceVisibleMs, target - harness());
+            if (harness() + pieceVisibleMs < target)
+                pieceVisibleMs = target - harness(); // stretch the piece to fill
+        }
+        else {
+            pieceVisibleMs = PIECE_MIN_MS;
+            const k = (target - PIECE_MIN_MS) / harness();
+            introHoldMs = r(introHoldMs * k);
+            zoomMs = r(zoomMs * k);
+            tileHoldMs = r(tileHoldMs * k);
+            revealMs = r(revealMs * k);
+            slideMs = r(slideMs * k);
+            outroMs = r(outroMs * k);
+            closerMs = r(closerMs * k);
+            // absorb rounding into the outro so the total is exact (the reveal runs twice)
+            outroMs += target - (harness() + pieceVisibleMs);
+        }
+    }
+    const totalMs = harness() + pieceVisibleMs;
+    return {
+        ok: true,
+        timeline: {
+            introVisibleMs: introHoldMs + zoomMs + tileHoldMs, introHoldMs, zoomMs, tileHoldMs, revealMs, slideMs,
+            popMs: Math.min(r(p.popMs), Math.floor(pieceVisibleMs / 2)),
+            pieceVisibleMs, outroMs, closerMs,
+            xfadeMs: Math.min(xfadeMs, Math.floor(Math.min(pieceVisibleMs, outroMs) / 2)),
+            totalMs, source,
+        },
+    };
+}

package/dist/m0saic/brand/community-m/v1/webPiece.d.ts

@@ -0,0 +1,23 @@
+import type { LoadedPiece } from "./piece";
+/**
+ * The contributor's own canvas, in the browser.
+ *
+ * The web app serves each seed slot's `piece.mosaic` next to its tile, so the
+ * real canvas plays here rather than a stand-in card. What it CANNOT do is
+ * bring the piece's own media with it — slot assets are not served — so a
+ * piece that references files is declined and the caller falls back (and
+ * says Desktop renders that one for real).
+ *
+ * Deliberately narrow: this is untrusted third-party data arriving over the
+ * network, so it must look exactly like what the seed ships or be refused.
+ */
+export type WebPieceResult = {
+    ok: true;
+    piece: LoadedPiece;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function acceptWebPiece(raw: unknown): WebPieceResult;
+/** Fetch a served piece. Never throws — an unreachable piece is a fallback, not a failure. */
+export declare function fetchWebPiece(url: string): Promise<WebPieceResult>;

package/dist/m0saic/brand/community-m/v1/webPiece.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.acceptWebPiece = acceptWebPiece;
+exports.fetchWebPiece = fetchWebPiece;
+/** Source kinds a served piece may use — everything else needs files or the engine. */
+const ALLOWED_SOURCE_KINDS = new Set(["lavfi", "text", "mosaic"]);
+function acceptWebPiece(raw) {
+    if (!raw || typeof raw !== "object")
+        return { ok: false, error: "piece is not an object" };
+    const doc = raw;
+    if (doc.kind !== "mosaic_document")
+        return { ok: false, error: `piece kind is "${String(doc.kind)}"` };
+    const size = doc.size;
+    if (!size || !(size.width > 0) || !(size.height > 0))
+        return { ok: false, error: "piece declares no size" };
+    if (typeof doc.durationMs !== "number" || !(doc.durationMs > 0))
+        return { ok: false, error: "piece declares no durationMs" };
+    if (doc.assets && Object.keys(doc.assets).length > 0) {
+        return { ok: false, error: "piece carries its own media, which the browser cannot reach" };
+    }
+    if (!Array.isArray(doc.sources) || doc.sources.length === 0)
+        return { ok: false, error: "piece has no sources" };
+    for (const s of doc.sources) {
+        if (!s || !ALLOWED_SOURCE_KINDS.has(String(s.type))) {
+            return { ok: false, error: `piece uses a "${String(s === null || s === void 0 ? void 0 : s.type)}" source, which the browser cannot render` };
+        }
+    }
+    const d = raw;
+    return { ok: true, piece: { doc: d, declaredMs: d.durationMs, size: { width: size.width, height: size.height } } };
+}
+/** Fetch a served piece. Never throws — an unreachable piece is a fallback, not a failure. */
+async function fetchWebPiece(url) {
+    try {
+        const resp = await fetch(url);
+        if (!resp.ok)
+            return { ok: false, error: `piece not served (${resp.status})` };
+        return acceptWebPiece(await resp.json());
+    }
+    catch (err) {
+        return { ok: false, error: `piece unreachable: ${err instanceof Error ? err.message : String(err)}` };
+    }
+}

package/dist/m0saic/brand/community-m/v1/wordmark.d.ts

@@ -0,0 +1,34 @@
+import type { MosaicDocument } from "@m0saic/types";
+/** The wordmark's height as a share of the caption row it sits in
+ *  (0.7 → 0.82, founder 2026-09-16: "a tad larger"; the row still keeps
+ *  ~9 % of air above and below it). */
+export declare const WORDMARK_ROW_SHARE = 0.82;
+export type WordmarkBox = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/**
+ * The wordmark's box inside a caption row: {@link WORDMARK_ROW_SHARE} of the
+ * row tall at the wordmark's own 1213:283 aspect (whole px — the engine
+ * scales mask bounds per axis, so the box must hold the aspect or the
+ * letters smear), centred in the row.
+ */
+export declare function wordmarkBox(rowW: number, rowH: number): WordmarkBox;
+/**
+ * A caption row carrying the official m0saic wordmark — the letterforms in
+ * the ink colour, the rect-built "0" in the accent — the same lockup the
+ * business-card and hello-world templates paint. Laundered onto the lattice
+ * with zero drift (`placeInsetPieces`): the two halves share one exact rect,
+ * the zero painted over the letters.
+ */
+export declare function wordmarkRowDoc(o: {
+    rowW: number;
+    rowH: number;
+    fps: number;
+    durationMs: number;
+    ink: string;
+    accent: string;
+    canvasColor: string;
+}): MosaicDocument;

package/dist/m0saic/brand/community-m/v1/wordmark.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WORDMARK_ROW_SHARE = void 0;
+exports.wordmarkBox = wordmarkBox;
+exports.wordmarkRowDoc = wordmarkRowDoc;
+const template_utils_1 = require("@m0saic/template-utils");
+/** The wordmark's height as a share of the caption row it sits in
+ *  (0.7 → 0.82, founder 2026-09-16: "a tad larger"; the row still keeps
+ *  ~9 % of air above and below it). */
+exports.WORDMARK_ROW_SHARE = 0.82;
+/**
+ * The wordmark's box inside a caption row: {@link WORDMARK_ROW_SHARE} of the
+ * row tall at the wordmark's own 1213:283 aspect (whole px — the engine
+ * scales mask bounds per axis, so the box must hold the aspect or the
+ * letters smear), centred in the row.
+ */
+function wordmarkBox(rowW, rowH) {
+    const aspect = template_utils_1.WORDMARK_BOUNDS.width / template_utils_1.WORDMARK_BOUNDS.height;
+    let h = Math.max(1, Math.round(rowH * exports.WORDMARK_ROW_SHARE));
+    let w = Math.max(1, Math.round(h * aspect));
+    if (w > rowW) {
+        w = rowW;
+        h = Math.max(1, Math.round(w / aspect));
+    }
+    return { x: Math.floor((rowW - w) / 2), y: Math.floor((rowH - h) / 2), w, h };
+}
+/** A single-colour silhouette clipped by SVG paths (one half of the wordmark). */
+function pathTile(paths, color) {
+    return (0, template_utils_1.makeColorTile)(color, {
+        mask: { kind: "inline-mask", localPath: paths.join(" "), bounds: { x: 0, y: 0, width: template_utils_1.WORDMARK_BOUNDS.width, height: template_utils_1.WORDMARK_BOUNDS.height } },
+    });
+}
+/**
+ * A caption row carrying the official m0saic wordmark — the letterforms in
+ * the ink colour, the rect-built "0" in the accent — the same lockup the
+ * business-card and hello-world templates paint. Laundered onto the lattice
+ * with zero drift (`placeInsetPieces`): the two halves share one exact rect,
+ * the zero painted over the letters.
+ */
+function wordmarkRowDoc(o) {
+    const box = wordmarkBox(o.rowW, o.rowH);
+    const placed = (0, template_utils_1.placeInsetPieces)({
+        rootW: o.rowW,
+        rootH: o.rowH,
+        pieces: [
+            { rect: { ...box, importance: 0 }, source: pathTile(template_utils_1.WORDMARK_LETTER_PATHS, o.ink) },
+            { rect: { ...box, importance: 1 }, source: pathTile(template_utils_1.WORDMARK_ZERO_PATHS, o.accent) },
+        ],
+    });
+    return {
+        kind: "mosaic_document",
+        version: 1,
+        m0: placed.m0,
+        size: { width: o.rowW, height: o.rowH },
+        fps: o.fps,
+        durationMs: o.durationMs,
+        backgroundColor: o.canvasColor,
+        audio: { mode: "off" },
+        assets: {},
+        sources: placed.sources,
+    };
+}

package/dist/m0saic/brand/index.d.ts

@@ -0,0 +1,7 @@
+export { TheMosaicM } from "./logo/v1";
+export { TheMosaicMV2 } from "./logo/v2";
+export { TheMosaicMV3 } from "./logo/v3";
+export { QrStampVideoV2 } from "./qr-stamp/video/v2";
+export { QrStampStill } from "./qr-stamp/still/v1";
+export { CommunityMV1 } from "./community-m/v1";
+export { BusinessCard } from "./business-card/v1";

package/dist/m0saic/brand/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BusinessCard = exports.CommunityMV1 = exports.QrStampStill = exports.QrStampVideoV2 = exports.TheMosaicMV3 = exports.TheMosaicMV2 = exports.TheMosaicM = void 0;
+var v1_1 = require("./logo/v1");
+Object.defineProperty(exports, "TheMosaicM", { enumerable: true, get: function () { return v1_1.TheMosaicM; } });
+var v2_1 = require("./logo/v2");
+Object.defineProperty(exports, "TheMosaicMV2", { enumerable: true, get: function () { return v2_1.TheMosaicMV2; } });
+var v3_1 = require("./logo/v3");
+Object.defineProperty(exports, "TheMosaicMV3", { enumerable: true, get: function () { return v3_1.TheMosaicMV3; } });
+var v2_2 = require("./qr-stamp/video/v2");
+Object.defineProperty(exports, "QrStampVideoV2", { enumerable: true, get: function () { return v2_2.QrStampVideoV2; } });
+var v1_2 = require("./qr-stamp/still/v1");
+Object.defineProperty(exports, "QrStampStill", { enumerable: true, get: function () { return v1_2.QrStampStill; } });
+var v1_3 = require("./community-m/v1");
+Object.defineProperty(exports, "CommunityMV1", { enumerable: true, get: function () { return v1_3.CommunityMV1; } });
+var v1_4 = require("./business-card/v1");
+Object.defineProperty(exports, "BusinessCard", { enumerable: true, get: function () { return v1_4.BusinessCard; } });

package/dist/m0saic/brand/logo/v1/index.d.ts

@@ -0,0 +1 @@
+export { TheMosaicM } from "./logo";

package/dist/m0saic/brand/logo/v1/index.js

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

package/dist/m0saic/brand/logo/v1/logo.d.ts

@@ -0,0 +1,30 @@
+import type { MosaicColor, MosaicTemplate } from "@m0saic/types";
+type LogoProps = {
+    color?: MosaicColor;
+    size?: "m-33_bitmap";
+    /**
+     * logo_loop: existing radial reveal in/out loop
+     * progress_fill: deterministic 0..1 fill (requires progress or time-based progressSec)
+     * loading_shimmer: deterministic sweeping shimmer band (best for unknown load times)
+     */
+    animation?: "logo_loop" | "progress_fill" | "loading_shimmer";
+    loopSec?: number;
+    inEnd?: number;
+    outStart?: number;
+    feather?: number;
+    startDelay?: number;
+    endDelay?: number;
+    easing?: "linear" | "smoothstep";
+    /** Progress 0..1 for progress_fill; when set, controls fill directly (no time-based animation). */
+    progress?: number;
+    /** Duration in seconds for auto progress animation when progress is undefined. Used only for progress_fill. */
+    progressSec?: number;
+    /** When true and progress is auto-animated, use one-shot (no loop). */
+    oneShot?: boolean;
+    /** Duration (sec) for one shimmer sweep. Used only for loading_shimmer. */
+    shimmerSec?: number;
+    /** Band width in normalized units across the filled tiles (0..1). Used only for loading_shimmer. */
+    shimmerWidth?: number;
+};
+export declare const TheMosaicM: MosaicTemplate<LogoProps>;
+export {};