@m0saic/templates 0.2.0

package/dist/m0saic/web/page-skeleton/v1/sample-capture.d.ts

@@ -0,0 +1,7 @@
+import type { PageSkeletonCapture } from "./schema";
+/**
+ * Network-free default capture: a hand-authored 1440x900 video-site home page.
+ * It exercises every rect kind, round avatar/pill geometry, shallow and deep
+ * paint order, and the renderer's expected 2x6 card layout.
+ */
+export declare const SAMPLE_CAPTURE: PageSkeletonCapture;

package/dist/m0saic/web/page-skeleton/v1/sample-capture.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SAMPLE_CAPTURE = void 0;
+const card = (x, y, titleWidth, subtitleWidth) => [
+    { x, y, w: 181, h: 102, k: "image", r: 10, d: 2 },
+    { x, y: y + 116, w: 32, h: 32, k: "image", r: 16, d: 3 },
+    { x: x + 44, y: y + 117, w: titleWidth, h: 12, k: "text", r: 6, d: 3 },
+    { x: x + 44, y: y + 139, w: subtitleWidth, h: 10, k: "text", r: 5, d: 3 },
+];
+/**
+ * Network-free default capture: a hand-authored 1440x900 video-site home page.
+ * It exercises every rect kind, round avatar/pill geometry, shallow and deep
+ * paint order, and the renderer's expected 2x6 card layout.
+ */
+exports.SAMPLE_CAPTURE = {
+    format: "m0saic-page-skeleton",
+    version: 1,
+    viewport: { w: 1440, h: 900, dpr: 2 },
+    rects: [
+        { x: 0, y: 0, w: 1440, h: 64, k: "block", r: 0, d: 0 },
+        { x: 24, y: 18, w: 112, h: 28, k: "image", r: 6, d: 1 },
+        { x: 425, y: 12, w: 520, h: 40, k: "control", r: 20, d: 1 },
+        { x: 957, y: 14, w: 36, h: 36, k: "control", r: 18, d: 1 },
+        { x: 1240, y: 16, w: 72, h: 32, k: "control", r: 16, d: 1 },
+        { x: 1320, y: 16, w: 32, h: 32, k: "control", r: 16, d: 1 },
+        { x: 1368, y: 16, w: 32, h: 32, k: "image", r: 16, d: 1 },
+        { x: 0, y: 64, w: 216, h: 836, k: "block", r: 0, d: 0 },
+        { x: 0, y: 63, w: 1440, h: 1, k: "divider", r: 0, d: 1 },
+        { x: 240, y: 80, w: 54, h: 32, k: "control", r: 16, d: 1 },
+        { x: 302, y: 80, w: 74, h: 32, k: "control", r: 16, d: 1 },
+        { x: 384, y: 80, w: 88, h: 32, k: "control", r: 16, d: 1 },
+        { x: 480, y: 80, w: 66, h: 32, k: "control", r: 16, d: 1 },
+        { x: 554, y: 80, w: 102, h: 32, k: "control", r: 16, d: 1 },
+        { x: 664, y: 80, w: 78, h: 32, k: "control", r: 16, d: 1 },
+        { x: 750, y: 80, w: 94, h: 32, k: "control", r: 16, d: 1 },
+        ...card(240, 136, 126, 92),
+        ...card(437, 136, 118, 104),
+        ...card(634, 136, 132, 78),
+        ...card(831, 136, 110, 98),
+        ...card(1028, 136, 125, 88),
+        ...card(1225, 136, 122, 96),
+        ...card(240, 504, 116, 82),
+        ...card(437, 504, 128, 100),
+        ...card(634, 504, 104, 74),
+        ...card(831, 504, 130, 94),
+        ...card(1028, 504, 120, 86),
+        ...card(1225, 504, 112, 90),
+    ],
+    meta: { total: 64, dropped: 0 },
+};

package/dist/m0saic/web/page-skeleton/v1/schema.d.ts

@@ -0,0 +1,35 @@
+export declare const PAGE_SKELETON_CAPTURE_FORMAT: "m0saic-page-skeleton";
+export declare const PAGE_SKELETON_CAPTURE_VERSION: 1;
+export declare const PAGE_SKELETON_RECT_KINDS: readonly ["block", "text", "image", "control", "divider"];
+export type PageSkeletonRectKind = (typeof PAGE_SKELETON_RECT_KINDS)[number];
+export type PageSkeletonCaptureViewport = {
+    w: number;
+    h: number;
+    dpr?: number;
+};
+export type PageSkeletonCaptureRect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    k: PageSkeletonRectKind;
+    r: number;
+    d: number;
+};
+export type PageSkeletonCaptureMeta = {
+    total: number;
+    dropped: number;
+};
+export type PageSkeletonCapture = {
+    format: typeof PAGE_SKELETON_CAPTURE_FORMAT;
+    version: typeof PAGE_SKELETON_CAPTURE_VERSION;
+    viewport: PageSkeletonCaptureViewport;
+    rects: PageSkeletonCaptureRect[];
+    meta?: PageSkeletonCaptureMeta;
+};
+/**
+ * Read the browser-capture seam. Editors may provide either parsed JSON or a
+ * raw JSON string, so this boundary normalizes both and rejects malformed
+ * geometry before the renderer sees it.
+ */
+export declare function parseCapture(value: unknown): PageSkeletonCapture;

package/dist/m0saic/web/page-skeleton/v1/schema.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PAGE_SKELETON_RECT_KINDS = exports.PAGE_SKELETON_CAPTURE_VERSION = exports.PAGE_SKELETON_CAPTURE_FORMAT = void 0;
+exports.parseCapture = parseCapture;
+exports.PAGE_SKELETON_CAPTURE_FORMAT = "m0saic-page-skeleton";
+exports.PAGE_SKELETON_CAPTURE_VERSION = 1;
+exports.PAGE_SKELETON_RECT_KINDS = [
+    "block",
+    "text",
+    "image",
+    "control",
+    "divider",
+];
+const RECT_KIND_SET = new Set(exports.PAGE_SKELETON_RECT_KINDS);
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function expectRecord(value, path) {
+    if (!isRecord(value)) {
+        throw new Error(`page-skeleton capture: ${path} must be an object`);
+    }
+    return value;
+}
+function expectInteger(value, path) {
+    if (typeof value !== "number" || !Number.isFinite(value) || !Number.isInteger(value)) {
+        throw new Error(`page-skeleton capture: ${path} must be a finite integer`);
+    }
+    return value;
+}
+function expectPositiveInteger(value, path) {
+    const parsed = expectInteger(value, path);
+    if (parsed < 1) {
+        throw new Error(`page-skeleton capture: ${path} must be at least 1`);
+    }
+    return parsed;
+}
+function expectNonNegativeInteger(value, path) {
+    const parsed = expectInteger(value, path);
+    if (parsed < 0) {
+        throw new Error(`page-skeleton capture: ${path} must be at least 0`);
+    }
+    return parsed;
+}
+function parseJsonString(value) {
+    try {
+        return JSON.parse(value);
+    }
+    catch (error) {
+        const detail = error instanceof Error ? error.message : String(error);
+        throw new Error(`page-skeleton capture: invalid JSON — ${detail}`);
+    }
+}
+function parseViewport(value) {
+    const viewport = expectRecord(value, "viewport");
+    const parsed = {
+        w: expectPositiveInteger(viewport.w, "viewport.w"),
+        h: expectPositiveInteger(viewport.h, "viewport.h"),
+    };
+    if (viewport.dpr !== undefined) {
+        if (typeof viewport.dpr !== "number" ||
+            !Number.isFinite(viewport.dpr) ||
+            viewport.dpr <= 0) {
+            throw new Error("page-skeleton capture: viewport.dpr must be a positive finite number");
+        }
+        parsed.dpr = viewport.dpr;
+    }
+    return parsed;
+}
+function parseRect(value, index) {
+    const path = `rects[${index}]`;
+    const rect = expectRecord(value, path);
+    const w = expectPositiveInteger(rect.w, `${path}.w`);
+    const h = expectPositiveInteger(rect.h, `${path}.h`);
+    let k = "block";
+    if (rect.k !== undefined) {
+        if (typeof rect.k !== "string") {
+            throw new Error(`page-skeleton capture: ${path}.k must be a string`);
+        }
+        if (RECT_KIND_SET.has(rect.k)) {
+            k = rect.k;
+        }
+    }
+    const r = rect.r === undefined ? 0 : expectNonNegativeInteger(rect.r, `${path}.r`);
+    const maxRadius = Math.floor(Math.min(w, h) / 2);
+    if (r > maxRadius) {
+        throw new Error(`page-skeleton capture: ${path}.r must be at most ${maxRadius} for a ${w}x${h} rect`);
+    }
+    return {
+        x: expectInteger(rect.x, `${path}.x`),
+        y: expectInteger(rect.y, `${path}.y`),
+        w,
+        h,
+        k,
+        r,
+        d: rect.d === undefined ? 0 : expectNonNegativeInteger(rect.d, `${path}.d`),
+    };
+}
+function parseMeta(value) {
+    const meta = expectRecord(value, "meta");
+    return {
+        total: expectNonNegativeInteger(meta.total, "meta.total"),
+        dropped: expectNonNegativeInteger(meta.dropped, "meta.dropped"),
+    };
+}
+/**
+ * Read the browser-capture seam. Editors may provide either parsed JSON or a
+ * raw JSON string, so this boundary normalizes both and rejects malformed
+ * geometry before the renderer sees it.
+ */
+function parseCapture(value) {
+    const decoded = typeof value === "string" ? parseJsonString(value) : value;
+    const capture = expectRecord(decoded, "payload");
+    if (capture.format !== exports.PAGE_SKELETON_CAPTURE_FORMAT) {
+        throw new Error(`page-skeleton capture: format must be "${exports.PAGE_SKELETON_CAPTURE_FORMAT}"`);
+    }
+    if (capture.version !== exports.PAGE_SKELETON_CAPTURE_VERSION) {
+        throw new Error(`page-skeleton capture: version must be ${exports.PAGE_SKELETON_CAPTURE_VERSION}`);
+    }
+    if (!Array.isArray(capture.rects)) {
+        throw new Error("page-skeleton capture: rects must be an array");
+    }
+    const parsed = {
+        format: exports.PAGE_SKELETON_CAPTURE_FORMAT,
+        version: exports.PAGE_SKELETON_CAPTURE_VERSION,
+        viewport: parseViewport(capture.viewport),
+        rects: capture.rects.map(parseRect),
+    };
+    if (capture.meta !== undefined) {
+        parsed.meta = parseMeta(capture.meta);
+    }
+    return parsed;
+}

package/dist/m0saic/wireframe/animated/v1/animated-wireframe.d.ts

@@ -0,0 +1,93 @@
+import type { M0String } from "@m0saic/dsl";
+import type { MosaicTemplate } from "@m0saic/types";
+import type { WireframeTheme, WireframePreset } from "../../base/v1/wireframe";
+import type { WireframeBackgroundValue, WireframeUnlabeledCellsValue } from "../../base/v2/wireframe";
+/**
+ * Animated Wireframe — the wireframe family's video baseline: every cell of
+ * an m0 layout slides into place in document order, so a layout's structure
+ * reads as a sequence instead of a still.
+ *
+ * Architecture: one nested `@m0saic/wireframe/cell/v1` document per cell
+ * (drawtext labels), each bound to its m0 leaf with `overlay.startAtSec` +
+ * `overlay.enable` for the reveal and a `yExpr` slide. The nested-cell path
+ * costs one ffmpeg spawn per cell (100 cells ≈ 24s at 1080p) — fine for the
+ * docs / explainer clips this is for; a single-pass port onto base/v2's
+ * glyph-outline tiles is the v2 of this template if that ever matters.
+ *
+ * Gate 30 (v1 prod cut) findings fixed here:
+ *  - cell labels printed the PRE-header geometry (960×540 for a 2×2 at
+ *    1080p while the engine rendered 960×486 under the header band) — the
+ *    frames now come from the WRAPPED string, so the dims are what renders;
+ *  - the header was a fixed 26px drawtext that clipped long m0 strings and
+ *    vanished at 4K — it now sizes to the band and shrinks / middle-ellipsizes
+ *    to the canvas width under the CLI width model;
+ *  - custom labels and the dims/ratio marks never fit-checked (a long label
+ *    clipped at the cell edge; a narrow tall cell clipped its `W×H`) — both
+ *    now shrink to the cell and the marks degrade (ratio → dims → number);
+ *  - the `grid-paper` preset resolved a lattice nothing drew (base/v2's
+ *    gate-29 finding, same resolver) — wired via the shared paperGrid util;
+ *  - no `format` / `audio` stamps, no `background` knob (canvas fell to the
+ *    engine's black), and `labels` blanked every unlabeled cell — all aligned
+ *    with base/v2's shipped defaults (white canvas, unlabeled cells keep
+ *    their marks, explicit debug defaults, a real 2×2 default layout).
+ */
+type AnimatedWireframeSchemaProps = {
+    M0String: M0String;
+    labels?: string[];
+    /**
+     * Padding in seconds at the start and end so the reveal is contained within duration.
+     * Same value for both; trail is at least 0.3s so the final cell's slide animation completes.
+     * Decimal allowed. Default: 0.35.
+     * Total duration comes from ctx.target.durationMs (set by CLI/desktop).
+     */
+    paddingSec?: number;
+    /** Hide the header band that prints the m0 string above the layout. */
+    disableUi?: boolean;
+    /** "debug" (default) renders numbers/dims/AR. "thumb" renders clean tiles. */
+    mode?: "debug" | "thumb";
+    /** Named theme preset. */
+    preset?: WireframePreset | "none";
+    /** Theme overrides applied on top of preset defaults. */
+    theme?: WireframeTheme;
+    /** Canvas backing in debug mode: white (default) or the engine's default (black / alpha). */
+    background?: WireframeBackgroundValue;
+    /** What an unlabeled cell shows once some cells carry custom labels. */
+    unlabeledCells?: WireframeUnlabeledCellsValue;
+};
+/** Em width of a label line under {@link charEm}. */
+export declare function textEm(text: string): number;
+/** Em width of an m0 header line under {@link m0CharEm}. */
+export declare function m0TextEm(text: string): number;
+/**
+ * Middle-ellipsize to at most `maxEm` ems under `emOf`, keeping the head and
+ * the tail — an m0 string's shape is its opening and closing structure, so
+ * the ends carry more than a truncated head would.
+ */
+export declare function middleEllipsize(text: string, maxEm: number, emOf?: (ch: string) => number): string;
+/**
+ * Header text sized to the band and fitted to the canvas width: font = 36% of
+ * the band height (12–48px), shrunk to fit; below the floor the m0 string is
+ * middle-ellipsized so the strip never clips.
+ */
+export declare function fitHeader(m0: string, canvasW: number, bandH: number): {
+    text: string;
+    fontSize: number;
+};
+type FittedCell = {
+    text: string;
+    textSize: number;
+    showOrder: boolean;
+};
+/**
+ * Resolve what a cell prints and at what size. A custom label replaces the
+ * marks (one centred line, shrunk to fit, ellipsized at the floor); the marks
+ * degrade ratio → dims → number-only so a narrow cell never clips.
+ */
+export declare function fitCellText(opts: {
+    cellW: number;
+    cellH: number;
+    label: string | undefined;
+    minTextSize: number;
+}): FittedCell;
+export declare const AnimatedWireframe: MosaicTemplate<AnimatedWireframeSchemaProps>;
+export {};