@m0saic/templates 0.2.0

package/dist/m0saic/media/screencap_grid_aspect_safe/v1/screencap-grid-aspect-safe-cover.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASPECT_SAFE_COVER_PREVIEW_URL = void 0;
+exports.renderScreencapGridAspectSafeCover = renderScreencapGridAspectSafeCover;
+const types_1 = require("@m0saic/types");
+const screencap_grid_cover_1 = require("../../screencap_grid/v2/screencap-grid-cover");
+const screencap_grid_cover_assets_1 = require("../../screencap_grid/v2/screencap-grid-cover-assets");
+const COVER_LOGO_ASSET_ID = (0, types_1.asAssetId)("aspect-safe-cover-logo");
+const COVER_PAIR_ASSET_ID = (0, types_1.asAssetId)("aspect-safe-cover-pair");
+/** The registered pair preview, served for browser contexts. */
+exports.ASPECT_SAFE_COVER_PREVIEW_URL = "/template-assets/assets/templates/@m0saic__media__screencap_grid_aspect_safe__v1/preview.png";
+function coverAssets() {
+    var _a;
+    const isNode = typeof process !== "undefined" && !!((_a = process.versions) === null || _a === void 0 ? void 0 : _a.node);
+    const unpackedAsar = (p) => p.includes("/app.asar/")
+        ? p.split("/app.asar/").join("/app.asar.unpacked/")
+        : p.split("\\app.asar\\").join("\\app.asar.unpacked\\");
+    return {
+        [COVER_PAIR_ASSET_ID]: isNode
+            ? {
+                kind: "file",
+                path: unpackedAsar(`${__dirname}/assets/pair-sheet.jpg`),
+                mediaType: "image",
+            }
+            : {
+                kind: "url",
+                url: exports.ASPECT_SAFE_COVER_PREVIEW_URL,
+                mediaType: "image",
+            },
+        [COVER_LOGO_ASSET_ID]: {
+            kind: "data-uri",
+            uri: screencap_grid_cover_assets_1.SCREENCAP_COVER_LOGO_URI,
+            mediaType: "image",
+            displayName: "m0saic M",
+        },
+    };
+}
+function coverBrand(theme, type) {
+    const logo = (0, screencap_grid_cover_1.onboardingLeaf)({
+        type: "media",
+        mediaType: "image",
+        assetId: COVER_LOGO_ASSET_ID,
+        placement: { fit: "contain" },
+        editor: { owner: "template", label: "m0saic M logo" },
+    });
+    const name = (0, screencap_grid_cover_1.onboardingLeaf)((0, screencap_grid_cover_1.onboardingTextSource)({
+        text: "Aspect Safe Grid",
+        fontSize: Math.max(type.body, Math.round(type.headline * 0.64)),
+        color: theme.textPrimary,
+        hAlign: "left",
+        label: "cover product name",
+    }));
+    return (0, screencap_grid_cover_1.onboardingSplit)("col", [5, 2, 23], [logo, null, name]);
+}
+function coverMessage(paneWidth, theme, type, label, body) {
+    const copy = (0, screencap_grid_cover_1.onboardingSplit)("row", [4, 11], [
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: label,
+            fontSize: type.micro,
+            color: theme.accent,
+            cellWidthPx: paneWidth * 0.72,
+            hAlign: "left",
+            label: `cover ${label.toLowerCase()} label`,
+        }),
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: body,
+            fontSize: type.label,
+            color: theme.textPrimary,
+            cellWidthPx: paneWidth * 0.72,
+            hAlign: "left",
+            widthFrac: 0.92,
+            label: `cover ${label.toLowerCase()} message`,
+        }),
+    ]);
+    const bubble = (0, screencap_grid_cover_1.onboardingOverlay)((0, screencap_grid_cover_1.onboardingSolid)(theme.surfaceRaised), (0, screencap_grid_cover_1.onboardingSplit)("col", [1, 18, 1], [null, copy, null]));
+    return (0, screencap_grid_cover_1.onboardingSplit)("col", [1, 19], [(0, screencap_grid_cover_1.onboardingSolid)(theme.accent), bubble]);
+}
+function coverTip(paneWidth, theme, type) {
+    const copy = (0, screencap_grid_cover_1.onboardingSplit)("row", [2, 5], [
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: "START HERE",
+            fontSize: type.micro,
+            color: theme.accent,
+            cellWidthPx: paneWidth * 0.72,
+            hAlign: "left",
+            label: "cover start tip label",
+        }),
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: "Choose Source(s) or edit any prop to start. Open ? for the full tutorial.",
+            fontSize: type.label,
+            color: theme.textPrimary,
+            cellWidthPx: paneWidth * 0.72,
+            hAlign: "left",
+            widthFrac: 0.92,
+            label: "cover start tip",
+        }),
+    ]);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingOverlay)((0, screencap_grid_cover_1.onboardingSolid)(theme.surface), (0, screencap_grid_cover_1.onboardingSplit)("col", [1, 18, 1], [null, copy, null])), theme.borderStrong);
+}
+function coverChatPane(paneWidth, theme, type, compact) {
+    const brand = coverBrand(theme, type);
+    const title = (0, screencap_grid_cover_1.onboardingTextBlock)({
+        text: "Both orientations. One pass.",
+        fontSize: type.headline,
+        color: theme.textPrimary,
+        cellWidthPx: paneWidth * 0.83,
+        hAlign: "left",
+        widthFrac: 0.9,
+        label: "cover title",
+    });
+    const overview = (0, screencap_grid_cover_1.onboardingTextBlock)({
+        text: compact
+            ? "Each video renders a matched desktop + mobile grid pair."
+            : "Each source video renders a coordinated desktop + mobile pair — same cell count, same cell shape, exact at both canvases.",
+        fontSize: type.callout,
+        color: theme.textSecondary,
+        cellWidthPx: paneWidth * 0.83,
+        hAlign: "left",
+        widthFrac: 0.9,
+        label: "cover overview",
+    });
+    const sourceMessage = coverMessage(paneWidth, theme, type, "ADD SOURCE(S)", compact
+        ? "Files or a folder — 2 outputs per file."
+        : "Choose files or a folder. Every file fans out to 2 outputs.");
+    const shapeMessage = coverMessage(paneWidth, theme, type, "PICK THE SHAPE", compact
+        ? "Cell Shape steers both grids."
+        : "Cell Shape steers both grids: landscape, square, portrait, or an exact ratio.");
+    const pairMessage = coverMessage(paneWidth, theme, type, "SCROLL THE PAIRS", compact
+        ? "Grid Choice walks the ranked list."
+        : "Grid Choice walks the ranked pair list. Export PNG sheets or MP4 grids.");
+    const tip = coverTip(paneWidth, theme, type);
+    const conversation = (0, screencap_grid_cover_1.onboardingSplit)("row", compact
+        ? [1, 6, 2, 9, 8, 2, 7, 1, 7, 1, 7, 2, 6, 1]
+        : [1, 6, 2, 10, 9, 2, 7, 1, 7, 1, 7, 2, 6, 1], [
+        null,
+        brand,
+        null,
+        title,
+        overview,
+        null,
+        sourceMessage,
+        null,
+        shapeMessage,
+        null,
+        pairMessage,
+        null,
+        tip,
+        null,
+    ]);
+    const paddedConversation = (0, screencap_grid_cover_1.onboardingSplit)("col", [2, 26, 2], [null, conversation, null]);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingOverlay)((0, screencap_grid_cover_1.onboardingSolid)(theme.surfaceInset), paddedConversation), theme.border);
+}
+function coverHero(theme) {
+    const image = (0, screencap_grid_cover_1.onboardingLeaf)({
+        type: "media",
+        mediaType: "image",
+        assetId: COVER_PAIR_ASSET_ID,
+        placement: { fit: "contain" },
+        editor: { owner: "template", label: "Aspect Safe registered pair preview" },
+    });
+    return (0, screencap_grid_cover_1.onboardingFrame)(image, theme.borderStrong);
+}
+/** Production cover: an instruction pane beside the registered PAIR preview. */
+function renderScreencapGridAspectSafeCover(ctx) {
+    const canvasW = ctx.target.width;
+    const canvasH = ctx.target.height;
+    const theme = (0, screencap_grid_cover_1.resolveScreencapOnboardingTheme)(ctx);
+    const type = (0, screencap_grid_cover_1.coverTypeRamp)(canvasW, canvasH);
+    const compact = Math.min(canvasW, canvasH) < 480;
+    const stacked = canvasH > canvasW * 1.05;
+    const paneWidth = stacked ? canvasW * 0.88 : canvasW * 0.3;
+    const pane = coverChatPane(paneWidth, theme, type, compact);
+    const hero = coverHero(theme);
+    const content = stacked
+        ? (0, screencap_grid_cover_1.onboardingSplit)("row", [47, 3, 50], [
+            (0, screencap_grid_cover_1.onboardingSplit)("col", [6, 88, 6], [null, pane, null]),
+            null,
+            (0, screencap_grid_cover_1.onboardingSplit)("col", [6, 88, 6], [null, hero, null]),
+        ])
+        : (0, screencap_grid_cover_1.onboardingSplit)("col", [4, 30, 3, 59, 4], [null, pane, null, hero, null]);
+    const page = (0, screencap_grid_cover_1.onboardingSplit)("row", [5, 90, 5], [null, content, null]);
+    return {
+        kind: "mosaic_document",
+        version: 1,
+        assets: coverAssets(),
+        size: { width: canvasW, height: canvasH },
+        backgroundColor: theme.surfaceApp,
+        m0: page.m0,
+        sources: page.sources,
+    };
+}

package/dist/m0saic/media/screencap_grid_aspect_safe/v1/screencap-grid-aspect-safe-tutorial.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Aspect-safe screencap grid — the editor "?" tutorial.
+ *
+ * Seven pages in the rebuilt screencap_grid/v2 tutorial language (gate 24):
+ * brand row on every page, and REAL material throughout — footage tiles are
+ * `sourceRect` windows into the family's registered render (imported from
+ * the v2 tutorial's exported machinery), so nothing reads as placeholder
+ * blocks. The story is this template's own: one video → a coordinated
+ * landscape + portrait pair, steered by the shape question.
+ */
+import type { MosaicDocumentPipeline, MosaicEngineContext } from "@m0saic/types";
+/** Build the fixed, scrubbable seven-page walkthrough. */
+export declare function renderScreencapGridAspectSafeTutorial(ctx: MosaicEngineContext): MosaicDocumentPipeline;

package/dist/m0saic/media/screencap_grid_aspect_safe/v1/screencap-grid-aspect-safe-tutorial.js

@@ -0,0 +1,355 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderScreencapGridAspectSafeTutorial = renderScreencapGridAspectSafeTutorial;
+const screencap_grid_cover_1 = require("../../screencap_grid/v2/screencap-grid-cover");
+const screencap_grid_tutorial_1 = require("../../screencap_grid/v2/screencap-grid-tutorial");
+const TUTORIAL_FPS = 30;
+const PAGE_COUNT = 7;
+function diagramLabel(text, theme, type, backgroundColor = theme.surfaceInset) {
+    return (0, screencap_grid_cover_1.onboardingLeaf)((0, screencap_grid_cover_1.onboardingTextSource)({
+        text,
+        fontSize: type.micro,
+        color: theme.textSecondary,
+        hAlign: "center",
+        backgroundColor,
+        label: text.toLowerCase(),
+    }));
+}
+function fileCard(text, theme, type, output = false) {
+    return (0, screencap_grid_cover_1.onboardingLeaf)((0, screencap_grid_cover_1.onboardingTextSource)({
+        text,
+        fontSize: type.callout,
+        color: output ? theme.accent : theme.textPrimary,
+        backgroundColor: output ? theme.surfaceInset : theme.surfaceRaised,
+        label: output ? "output file" : "source file",
+    }));
+}
+/** A mini grid of real footage windows with a gutter — rows × cols. */
+function miniGrid(rows, cols, windows, labelPrefix) {
+    let i = 0;
+    const rowComps = [];
+    for (let r = 0; r < rows; r++) {
+        const cells = [];
+        for (let c = 0; c < cols; c++) {
+            const [wr, wc] = windows[i % windows.length];
+            i++;
+            cells.push((0, screencap_grid_tutorial_1.footageWindow)(wr, wc, `${labelPrefix} r${r}c${c}`));
+        }
+        rowComps.push((0, screencap_grid_cover_1.onboardingGuttered)("col", cells, 8, 1));
+    }
+    return (0, screencap_grid_cover_1.onboardingGuttered)("row", rowComps, 8, 1);
+}
+/** The 8 scenic moments the v2 tutorial sweeps (credits row avoided). */
+const MOMENTS = [
+    [0, 0], [0, 1], [0, 2], [0, 3], [1, 0], [1, 2], [2, 1], [2, 3],
+];
+/** A framed orientation card: label on top, mini grid below. */
+function orientationCard(label, grid, theme, type) {
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingSplit)("row", [2, 1, 12], [diagramLabel(label, theme, type), null, grid]), theme.borderStrong);
+}
+// ── Page visuals ──────────────────────────────────────────────
+function buildIdeaVisual(theme, type) {
+    // The SAME eight moments arranged 2×4 on desktop and 4×2 on mobile —
+    // the coordinated pair in one glance.
+    // Desktop card vertically inset so its 2 × 4 grid lands LANDSCAPE cells;
+    // the mobile column stays full height (portrait cells fall out naturally).
+    const landscape = (0, screencap_grid_cover_1.onboardingSplit)("row", [3, 10, 3], [
+        null,
+        orientationCard("DESKTOP · 2 × 4", miniGrid(2, 4, MOMENTS, "idea landscape"), theme, type),
+        null,
+    ]);
+    const portrait = orientationCard("MOBILE · 4 × 2", miniGrid(4, 2, MOMENTS, "idea portrait"), theme, type);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingSplit)("row", [1, 14, 1, 2], [
+        null,
+        (0, screencap_grid_cover_1.onboardingSplit)("col", [12, 1, 5], [landscape, null, portrait]),
+        null,
+        diagramLabel("SAME 8 MOMENTS · SAME CELL SHAPE", theme, type),
+    ]), theme.borderStrong);
+}
+function buildSourcesVisual(theme, type) {
+    const inputs = (0, screencap_grid_cover_1.onboardingGuttered)("col", [fileCard("A.mov", theme, type), fileCard("B.mov", theme, type)]);
+    const outputs = (0, screencap_grid_cover_1.onboardingGuttered)("row", [
+        (0, screencap_grid_cover_1.onboardingGuttered)("col", [
+            fileCard("A__landscape.png", theme, type, true),
+            fileCard("A__portrait.png", theme, type, true),
+        ], 8, 1),
+        (0, screencap_grid_cover_1.onboardingGuttered)("col", [
+            fileCard("B__landscape.png", theme, type, true),
+            fileCard("B__portrait.png", theme, type, true),
+        ], 8, 1),
+    ], 8, 1);
+    const flowRule = (0, screencap_grid_cover_1.onboardingSplit)("col", [2, 8, 2], [null, (0, screencap_grid_cover_1.onboardingSolid)(theme.accent, 0.08), null]);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingSplit)("row", [2, 4, 1, 8, 2], [
+        diagramLabel("SOURCE(S) · REQUIRED", theme, type),
+        inputs,
+        flowRule,
+        outputs,
+        diagramLabel("2 NAMED OUTPUTS PER FILE", theme, type),
+    ]), theme.borderStrong);
+}
+function buildShapeVisual(theme, type) {
+    // Three shape answers, each realized as real cells of that shape.
+    const cards = (0, screencap_grid_cover_1.onboardingGuttered)("col", [
+        (0, screencap_grid_cover_1.onboardingSplit)("row", [10, 2], [
+            miniGrid(3, 2, MOMENTS, "shape landscape"),
+            diagramLabel("LANDSCAPE 16:9", theme, type, theme.surfaceRaised),
+        ]),
+        (0, screencap_grid_cover_1.onboardingSplit)("row", [10, 2], [
+            miniGrid(3, 3, MOMENTS, "shape square"),
+            diagramLabel("SQUARE 1:1", theme, type, theme.surfaceRaised),
+        ]),
+        (0, screencap_grid_cover_1.onboardingSplit)("row", [10, 2], [
+            miniGrid(2, 4, MOMENTS, "shape portrait"),
+            diagramLabel("PORTRAIT 9:16", theme, type, theme.surfaceRaised),
+        ]),
+    ], 12, 2);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingSplit)("row", [14, 1, 2], [cards, null, diagramLabel("ONE ANSWER STEERS BOTH GRIDS", theme, type)]), theme.borderStrong);
+}
+function buildChoiceVisual(theme, type) {
+    // The ranked list: three candidate pairs, #0 wearing the accent frame.
+    const candidate = (label, rows, cols, best) => {
+        const grid = miniGrid(rows, cols, MOMENTS, `choice ${label}`);
+        const card = (0, screencap_grid_cover_1.onboardingSplit)("row", [2, 10], [diagramLabel(label, theme, type, best ? theme.accentSoft : theme.surfaceRaised), grid]);
+        return best
+            ? (0, screencap_grid_cover_1.onboardingFrame)(card, theme.accent)
+            : (0, screencap_grid_cover_1.onboardingFrame)(card, theme.border);
+    };
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingSplit)("row", [14, 1, 2], [
+        (0, screencap_grid_cover_1.onboardingGuttered)("col", [
+            candidate("0 · BEST", 3, 4, true),
+            candidate("1", 2, 4, false),
+            candidate("2", 4, 4, false),
+        ], 10, 1),
+        null,
+        diagramLabel("GRID CHOICE WALKS THE RANKED PAIRS", theme, type),
+    ]), theme.borderStrong);
+}
+function buildSearchVisual(theme, type) {
+    const sparse = orientationCard("MIN CELLS 4", miniGrid(2, 2, MOMENTS, "search sparse"), theme, type);
+    const dense = orientationCard("MAX CELLS 32", miniGrid(4, 8, MOMENTS, "search dense"), theme, type);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingSplit)("row", [1, 14, 1, 2], [
+        null,
+        (0, screencap_grid_cover_1.onboardingSplit)("col", [7, 1, 10], [sparse, null, dense]),
+        null,
+        diagramLabel("CELL ASPECT (EXACT) OVERRIDES THE PRESET", theme, type),
+    ]), theme.borderStrong);
+}
+function buildOutputVisual(theme, type) {
+    const still = (0, screencap_grid_cover_1.onboardingSplit)("row", [3, 1, 12, 1, 3], [
+        diagramLabel("PNG", theme, type, theme.surfaceRaised),
+        null,
+        (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_tutorial_1.sheetStill)("png pair sheet"), theme.borderStrong),
+        null,
+        diagramLabel("EVERY TILE IS STILL", theme, type),
+    ]);
+    const playing = (row, col) => (0, screencap_grid_cover_1.onboardingOverlay)((0, screencap_grid_tutorial_1.footageWindow)(row, col, "playing tile"), (0, screencap_grid_cover_1.onboardingSplit)("row", [8, 1], [null, (0, screencap_grid_cover_1.onboardingSolid)(theme.accent)]));
+    const animated = (0, screencap_grid_cover_1.onboardingSplit)("row", [3, 1, 12, 1, 3], [
+        diagramLabel("MP4", theme, type, theme.surfaceRaised),
+        null,
+        (0, screencap_grid_cover_1.onboardingGuttered)("col", [playing(0, 1), playing(1, 2), playing(2, 1)], 8, 1),
+        null,
+        diagramLabel("EVERY TILE PLAYS FROM ITS TIMESTAMP", theme, type),
+    ]);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingGuttered)("row", [still, animated], 12, 2), theme.borderStrong);
+}
+function buildStartVisual(theme, type) {
+    const pair = (0, screencap_grid_cover_1.onboardingSplit)("col", [12, 1, 5], [
+        (0, screencap_grid_cover_1.onboardingSplit)("row", [3, 10, 3], [
+            null,
+            orientationCard("DESKTOP", miniGrid(2, 4, MOMENTS, "start landscape"), theme, type),
+            null,
+        ]),
+        null,
+        orientationCard("MOBILE", miniGrid(4, 2, MOMENTS, "start portrait"), theme, type),
+    ]);
+    return (0, screencap_grid_cover_1.onboardingFrame)((0, screencap_grid_cover_1.onboardingSplit)("row", [1, 14, 1, 2], [
+        null,
+        pair,
+        null,
+        diagramLabel("SOURCE(S) IS ALL IT NEEDS", theme, type),
+    ]), theme.borderStrong);
+}
+// ── Pages ─────────────────────────────────────────────────────
+const PAGES = [
+    {
+        name: "idea",
+        durationMs: 4000,
+        eyebrow: "01 · THE IDEA",
+        title: "Both orientations. One pass.",
+        body: "Every source video renders a coordinated pair: a desktop landscape grid and a mobile portrait grid — the same cell count, the same cell shape, exact at both canvases. Not a transpose; a matched pair.",
+        detail: "One video · two deliverables",
+        buildVisual: buildIdeaVisual,
+    },
+    {
+        name: "sources",
+        durationMs: 3800,
+        eyebrow: "02 · SOURCE(S)",
+        title: "Bring footage your way.",
+        body: "Source(s) is the one required field. Pick files or a whole directory — every file fans out to two named outputs, __landscape and __portrait.",
+        detail: "N inputs · 2 × N outputs",
+        buildVisual: buildSourcesVisual,
+    },
+    {
+        name: "shape",
+        durationMs: 4200,
+        eyebrow: "03 · CELL SHAPE",
+        title: "Answer the shape question.",
+        body: "What shape should a cell be? Landscape 16:9 suits video frames; square and portrait re-factorize both grids — portrait cells put many columns on the desktop canvas and many rows on mobile.",
+        detail: "Landscape · square · portrait",
+        buildVisual: buildShapeVisual,
+    },
+    {
+        name: "choice",
+        durationMs: 4000,
+        eyebrow: "04 · GRID CHOICE",
+        title: "Scroll the ranked pairs.",
+        body: "The search enumerates every feasible pair in the cell-count window and ranks them — both orientations closest to your shape first. Grid Choice walks that list; 0 is the best match.",
+        detail: "0 = best · out-of-range clamps",
+        buildVisual: buildChoiceVisual,
+    },
+    {
+        name: "search",
+        durationMs: 4000,
+        eyebrow: "05 · GRID SEARCH",
+        title: "Tune the sweep.",
+        body: "Min and Max Cells bound the search — few cells for big readable tiles, many for dense sheets. Cell Aspect (exact) overrides the preset when you need 3:2, 4:5, or anything else.",
+        detail: "Min Cells · Max Cells · Cell Aspect (exact)",
+        buildVisual: buildSearchVisual,
+    },
+    {
+        name: "output",
+        durationMs: 4000,
+        eyebrow: "06 · OUTPUT",
+        title: "Choose what time does.",
+        body: "PNG freezes one sampled frame per tile — contact sheets for both orientations. MP4 lets every tile play from its own timestamp. Info pane, timestamps, gap, and fit all still apply.",
+        detail: "PNG · scan   MP4 · watch",
+        buildVisual: buildOutputVisual,
+    },
+    {
+        name: "start",
+        durationMs: 3600,
+        eyebrow: "07 · START",
+        title: "The pair is one drop away.",
+        body: "Defaults do the rest: landscape cells, the best-ranked pair, info pane and timestamps on. Drop a video into Source(s) and read both orientations at once.",
+        detail: "Start with Source(s). The expert controls can wait.",
+        buildVisual: buildStartVisual,
+    },
+];
+// ── Page chrome (the v2 rebuilt-page shell) ───────────────────
+function pageProgress(pageIndex, theme, type) {
+    const counter = (0, screencap_grid_cover_1.onboardingLeaf)((0, screencap_grid_cover_1.onboardingTextSource)({
+        text: `${String(pageIndex + 1).padStart(2, "0")} / ${String(PAGE_COUNT).padStart(2, "0")}`,
+        fontSize: type.micro,
+        color: theme.textMuted,
+        hAlign: "left",
+        label: "tutorial progress",
+    }));
+    const bars = (0, screencap_grid_cover_1.onboardingGuttered)("col", Array.from({ length: PAGE_COUNT }, (_, index) => (0, screencap_grid_cover_1.onboardingSolid)(index === pageIndex
+        ? theme.accent
+        : index < pageIndex
+            ? theme.accentSoft
+            : theme.border, index === pageIndex ? 0.04 : undefined)), 8, 1);
+    return (0, screencap_grid_cover_1.onboardingSplit)("col", [6, 12, 48, 28, 6], [null, counter, null, bars, null]);
+}
+function pageCopy(spec, copyWidth, theme, type) {
+    return (0, screencap_grid_cover_1.onboardingSplit)("row", [4, 3, 1, 2, 4, 14, 16, 3, 6, 3], [
+        (0, screencap_grid_tutorial_1.tutorialBrand)(theme, type, "Aspect Safe Grid"),
+        null,
+        (0, screencap_grid_cover_1.onboardingSolid)(theme.accent, 0.03),
+        null,
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: spec.eyebrow,
+            fontSize: type.label,
+            color: theme.eyebrow,
+            cellWidthPx: copyWidth,
+            hAlign: "left",
+            fadeDelaySec: 0.04,
+            label: "page eyebrow",
+        }),
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: spec.title,
+            fontSize: type.headline,
+            color: theme.textPrimary,
+            cellWidthPx: copyWidth,
+            hAlign: "left",
+            widthFrac: 0.9,
+            fadeDelaySec: 0.08,
+            label: "page title",
+        }),
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: spec.body,
+            fontSize: type.body,
+            color: theme.textSecondary,
+            cellWidthPx: copyWidth,
+            hAlign: "left",
+            widthFrac: 0.91,
+            fadeDelaySec: 0.12,
+            label: "page body",
+        }),
+        null,
+        (0, screencap_grid_cover_1.onboardingTextBlock)({
+            text: spec.detail,
+            fontSize: type.micro,
+            color: theme.accentSoft,
+            cellWidthPx: copyWidth,
+            hAlign: "left",
+            fadeDelaySec: 0.16,
+            label: "page detail",
+        }),
+        null,
+    ]);
+}
+function buildPage(spec, pageIndex, canvasW, canvasH, theme) {
+    const type = (0, screencap_grid_cover_1.onboardingTypeRamp)(canvasW, canvasH);
+    const stacked = canvasH > canvasW * 0.9;
+    const copyWidth = stacked ? canvasW * 0.84 : canvasW * 0.38;
+    const copy = pageCopy(spec, copyWidth, theme, type);
+    const visual = spec.buildVisual(theme, type);
+    const progress = pageProgress(pageIndex, theme, type);
+    const page = stacked
+        ? (0, screencap_grid_cover_1.onboardingSplit)("row", [4, 34, 4, 43, 2, 7, 6], [
+            null,
+            (0, screencap_grid_cover_1.onboardingSplit)("col", [8, 84, 8], [null, copy, null]),
+            null,
+            (0, screencap_grid_cover_1.onboardingSplit)("col", [7, 86, 7], [null, visual, null]),
+            null,
+            progress,
+            null,
+        ])
+        : (0, screencap_grid_cover_1.onboardingSplit)("row", [6, 80, 8, 6], [
+            null,
+            (0, screencap_grid_cover_1.onboardingSplit)("col", [6, 38, 5, 45, 6], [null, copy, null, visual, null]),
+            progress,
+            null,
+        ]);
+    return {
+        kind: "mosaic_document",
+        version: 1,
+        assets: (0, screencap_grid_tutorial_1.tutorialAssets)(),
+        size: { width: canvasW, height: canvasH },
+        backgroundColor: theme.surfaceApp,
+        m0: page.m0,
+        sources: page.sources,
+    };
+}
+/** Build the fixed, scrubbable seven-page walkthrough. */
+function renderScreencapGridAspectSafeTutorial(ctx) {
+    var _a;
+    const canvasW = ctx.target.width;
+    const canvasH = ctx.target.height;
+    const theme = (0, screencap_grid_cover_1.resolveScreencapOnboardingTheme)(ctx);
+    const steps = PAGES.map((page, pageIndex) => ({
+        name: page.name,
+        durationMs: page.durationMs,
+        file: buildPage(page, pageIndex, canvasW, canvasH, theme),
+    }));
+    return {
+        kind: "mosaic_pipeline",
+        version: 1,
+        fps: (_a = ctx.target.fps) !== null && _a !== void 0 ? _a : TUTORIAL_FPS,
+        durationMs: steps.reduce((sum, step) => sum + step.durationMs, 0),
+        defaultTransition: { type: "cut" },
+        backgroundColor: theme.surfaceApp,
+        steps,
+    };
+}