@m0saic/templates 0.2.0

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

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

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

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

package/dist/m0saic/media/screencap_grid/v2/screencap-grid-cover-assets.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Browser-safe media used only by the Screencap Grid editor cover.
+ *
+ * The M mark is sourced verbatim from apps/mosaic/assets/brand/mosaic-m.svg.
+ * The hero URL is the exact preview.png registered for this template and
+ * mirrored into the web app's public template-assets tree.
+ */
+export declare const SCREENCAP_COVER_LOGO_URI = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcyIiBoZWlnaHQ9IjI3MiIgdmlld0JveD0iMCAwIDI3MiAyNzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOS43Mjk2IDAuMDEwMzc2SDAuMDU5OTk3NlY0OC4xMTdIMTkuNzI5NlYwLjAxMDM3NloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTM0LjkzMjcgNTUuOTYwNEgwVjEwNC4wNjdIMzQuOTMyN1Y1NS45NjA0WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNNjIuMjQzOCAxMTEuOTMxSDM0LjkzMjdWMTYwLjAzOEg2Mi4yNDM4VjExMS45MzFaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNy4zMjEyIDExMS45MzFIMFYxNjAuMDM4SDI3LjMyMTJWMTExLjkzMVoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTM0LjkzMjcgMTY3LjkxMkgwVjIxNi4wMTlIMzQuOTMyN1YxNjcuOTEyWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNNjIuMTMzNiAyMjMuODkzSDI3LjM3MTJWMjcySDYyLjEzMzZWMjIzLjg5M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTE5LjcxOTcgMjIzLjg5M0gwLjAxMDAwOThWMjcySDE5LjcxOTdWMjIzLjg5M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTEzMS43OTkgMTExLjkzMUgxMDMuNDk2VjE2MC4wMzhIMTMxLjc5OVYxMTEuOTMxWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTc0LjUwMyA1Ni4wMTIyTDE2My43MzcgNTUuOTkxNUwxMzkuNDkgODkuNjY1MVYxMDQuMDg4TDE3NC41MDMgMTA0LjExOVY1Ni4wMTIyWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTE4LjI0OCAxMDQuMDY3SDEzMS43OTlWODkuNTJMMTA3LjU4MiA1NS45NjA0SDY5LjY3NVYxMDQuMDY3SDExNS42MTRIMTE4LjI0OFoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTkxLjM0NzcgMzMuOTIyM0w2OS42NzUgMy4zODgwNVY0OC4xMDY3SDEwMS45MjRMOTEuMzQ3NyAzMy45MjIzWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTgwLjQyMiAzMi44NzU4TDE2OS44ODYgNDguMTA2N0gxODAuMDUxSDE4MS41NzRIMjAxLjc1NFYzLjM0NjYyTDE4MC40MjIgMzIuOTE3MlYzMi44NzU4WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTM5LjQ5IDE2MC4wNjlIMTY1LjgxTDIwMC41MTIgMTExLjk2MkgxMzkuNDlWMTYwLjA2OVoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTk1Ljg4NDUgMTQ4LjI3OEw5NS44OTQ2IDExMS45MzFINjkuNjc1TDk1Ljg4NDUgMTQ4LjI3OFoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTEzNS4wNTQgMjAyLjYxMkwxNjAuMTUxIDE2Ny45MTJMMTEwLjAzNiAxNjcuOTAyTDEzNS4wNTQgMjAyLjYxMloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTYyLjE3MzggNTUuOTYwNEg0Mi41NzQyVjc1LjY3NzZINjIuMTczOFY1NS45NjA0WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNNjIuMTczOCA4My41MzEzSDQyLjU3NDJWMTA0LjA1N0g2Mi4xNzM4VjgzLjUzMTNaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0xODIuMTg1IDEwNC4wODhMMjAxLjcxNCAxMDQuMDY3VjU1Ljk2MDRMMTgyLjE4NSA1NS45OTE1VjEwNC4wODhaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik02Mi4xODM3IDAuMDEwMzc2SDI3LjMzMTJWNDguMTE3SDYyLjE4MzdWMC4wMTAzNzZaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik02Mi4wNzM2IDE2Ny45MTJINDIuNTE0MVYxODcuNjI5SDYyLjA3MzZWMTY3LjkxMloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTYyLjA3MzYgMTk1LjQ5NEg0Mi41MTQxVjIxNi4wMTlINjIuMDczNlYxOTUuNDk0WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjcxLjk1IDIyMy44ODNIMjUyLjI4VjI3MS45OUgyNzEuOTVWMjIzLjg4M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTI3MiAxNjcuOTMzSDIzNy4wNjdWMjE2LjA0SDI3MlYxNjcuOTMzWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjM3LjA2NyAxMTEuOTUySDIwOS43NTZWMTYwLjA1OUgyMzcuMDY3VjExMS45NTJaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNzIgMTExLjk1MkgyNDQuNjc5VjE2MC4wNTlIMjcyVjExMS45NTJaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNzIgNTUuOTcwN0gyMzcuMDY3VjEwNC4wNzdIMjcyVjU1Ljk3MDdaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNDQuNjI5IDBIMjA5Ljg2NlY0OC4xMDY3SDI0NC42MjlWMFoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTI3MS45OSAwSDI1Mi4yOFY0OC4xMDY3SDI3MS45OVYwWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjI5LjQyNiAxOTYuMzIySDIwOS44MjZWMjE2LjA0SDIyOS40MjZWMTk2LjMyMloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTIyOS40MjYgMTY3LjkzM0gyMDkuODI2VjE4OC40NThIMjI5LjQyNlYxNjcuOTMzWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjQ0LjY3OSAyMjMuODgzSDIwOS44MjZWMjcxLjk5SDI0NC42NzlWMjIzLjg4M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTIyOS40ODYgODQuMzYwMkgyMDkuOTI2VjEwNC4wNzdIMjI5LjQ4NlY4NC4zNjAyWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjI5LjQ4NiA1NS45NzA3SDIwOS45MjZWNzYuNDk2MUgyMjkuNDg2VjU1Ljk3MDdaIiBmaWxsPSIjRUY3NTI1Ii8+Cjwvc3ZnPgo=";
+export declare const SCREENCAP_COVER_PREVIEW_URL = "/template-assets/assets/templates/@m0saic__media__screencap_grid__v2/preview.png?v=3846a527";

package/dist/m0saic/media/screencap_grid/v2/screencap-grid-cover-assets.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCREENCAP_COVER_PREVIEW_URL = exports.SCREENCAP_COVER_LOGO_URI = void 0;
+/**
+ * Browser-safe media used only by the Screencap Grid editor cover.
+ *
+ * The M mark is sourced verbatim from apps/mosaic/assets/brand/mosaic-m.svg.
+ * The hero URL is the exact preview.png registered for this template and
+ * mirrored into the web app's public template-assets tree.
+ */
+exports.SCREENCAP_COVER_LOGO_URI = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcyIiBoZWlnaHQ9IjI3MiIgdmlld0JveD0iMCAwIDI3MiAyNzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOS43Mjk2IDAuMDEwMzc2SDAuMDU5OTk3NlY0OC4xMTdIMTkuNzI5NlYwLjAxMDM3NloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTM0LjkzMjcgNTUuOTYwNEgwVjEwNC4wNjdIMzQuOTMyN1Y1NS45NjA0WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNNjIuMjQzOCAxMTEuOTMxSDM0LjkzMjdWMTYwLjAzOEg2Mi4yNDM4VjExMS45MzFaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNy4zMjEyIDExMS45MzFIMFYxNjAuMDM4SDI3LjMyMTJWMTExLjkzMVoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTM0LjkzMjcgMTY3LjkxMkgwVjIxNi4wMTlIMzQuOTMyN1YxNjcuOTEyWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNNjIuMTMzNiAyMjMuODkzSDI3LjM3MTJWMjcySDYyLjEzMzZWMjIzLjg5M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTE5LjcxOTcgMjIzLjg5M0gwLjAxMDAwOThWMjcySDE5LjcxOTdWMjIzLjg5M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTEzMS43OTkgMTExLjkzMUgxMDMuNDk2VjE2MC4wMzhIMTMxLjc5OVYxMTEuOTMxWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTc0LjUwMyA1Ni4wMTIyTDE2My43MzcgNTUuOTkxNUwxMzkuNDkgODkuNjY1MVYxMDQuMDg4TDE3NC41MDMgMTA0LjExOVY1Ni4wMTIyWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTE4LjI0OCAxMDQuMDY3SDEzMS43OTlWODkuNTJMMTA3LjU4MiA1NS45NjA0SDY5LjY3NVYxMDQuMDY3SDExNS42MTRIMTE4LjI0OFoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTkxLjM0NzcgMzMuOTIyM0w2OS42NzUgMy4zODgwNVY0OC4xMDY3SDEwMS45MjRMOTEuMzQ3NyAzMy45MjIzWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTgwLjQyMiAzMi44NzU4TDE2OS44ODYgNDguMTA2N0gxODAuMDUxSDE4MS41NzRIMjAxLjc1NFYzLjM0NjYyTDE4MC40MjIgMzIuOTE3MlYzMi44NzU4WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMTM5LjQ5IDE2MC4wNjlIMTY1LjgxTDIwMC41MTIgMTExLjk2MkgxMzkuNDlWMTYwLjA2OVoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTk1Ljg4NDUgMTQ4LjI3OEw5NS44OTQ2IDExMS45MzFINjkuNjc1TDk1Ljg4NDUgMTQ4LjI3OFoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTEzNS4wNTQgMjAyLjYxMkwxNjAuMTUxIDE2Ny45MTJMMTEwLjAzNiAxNjcuOTAyTDEzNS4wNTQgMjAyLjYxMloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTYyLjE3MzggNTUuOTYwNEg0Mi41NzQyVjc1LjY3NzZINjIuMTczOFY1NS45NjA0WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNNjIuMTczOCA4My41MzEzSDQyLjU3NDJWMTA0LjA1N0g2Mi4xNzM4VjgzLjUzMTNaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0xODIuMTg1IDEwNC4wODhMMjAxLjcxNCAxMDQuMDY3VjU1Ljk2MDRMMTgyLjE4NSA1NS45OTE1VjEwNC4wODhaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik02Mi4xODM3IDAuMDEwMzc2SDI3LjMzMTJWNDguMTE3SDYyLjE4MzdWMC4wMTAzNzZaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik02Mi4wNzM2IDE2Ny45MTJINDIuNTE0MVYxODcuNjI5SDYyLjA3MzZWMTY3LjkxMloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTYyLjA3MzYgMTk1LjQ5NEg0Mi41MTQxVjIxNi4wMTlINjIuMDczNlYxOTUuNDk0WiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjcxLjk1IDIyMy44ODNIMjUyLjI4VjI3MS45OUgyNzEuOTVWMjIzLjg4M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTI3MiAxNjcuOTMzSDIzNy4wNjdWMjE2LjA0SDI3MlYxNjcuOTMzWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjM3LjA2NyAxMTEuOTUySDIwOS43NTZWMTYwLjA1OUgyMzcuMDY3VjExMS45NTJaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNzIgMTExLjk1MkgyNDQuNjc5VjE2MC4wNTlIMjcyVjExMS45NTJaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNzIgNTUuOTcwN0gyMzcuMDY3VjEwNC4wNzdIMjcyVjU1Ljk3MDdaIiBmaWxsPSIjRUY3NTI1Ii8+CjxwYXRoIGQ9Ik0yNDQuNjI5IDBIMjA5Ljg2NlY0OC4xMDY3SDI0NC42MjlWMFoiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTI3MS45OSAwSDI1Mi4yOFY0OC4xMDY3SDI3MS45OVYwWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjI5LjQyNiAxOTYuMzIySDIwOS44MjZWMjE2LjA0SDIyOS40MjZWMTk2LjMyMloiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTIyOS40MjYgMTY3LjkzM0gyMDkuODI2VjE4OC40NThIMjI5LjQyNlYxNjcuOTMzWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjQ0LjY3OSAyMjMuODgzSDIwOS44MjZWMjcxLjk5SDI0NC42NzlWMjIzLjg4M1oiIGZpbGw9IiNFRjc1MjUiLz4KPHBhdGggZD0iTTIyOS40ODYgODQuMzYwMkgyMDkuOTI2VjEwNC4wNzdIMjI5LjQ4NlY4NC4zNjAyWiIgZmlsbD0iI0VGNzUyNSIvPgo8cGF0aCBkPSJNMjI5LjQ4NiA1NS45NzA3SDIwOS45MjZWNzYuNDk2MUgyMjkuNDg2VjU1Ljk3MDdaIiBmaWxsPSIjRUY3NTI1Ii8+Cjwvc3ZnPgo=";
+exports.SCREENCAP_COVER_PREVIEW_URL = "/template-assets/assets/templates/@m0saic__media__screencap_grid__v2/preview.png?v=3846a527";

package/dist/m0saic/media/screencap_grid/v2/screencap-grid-cover.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Screencap Grid v2 — first-open cover and the small design kit shared with
+ * its tutorial.
+ *
+ * The cover is editor-only. It replaces the zero-input error on a pure-default
+ * first open, then disappears permanently after the first prop edit. It never
+ * reads media, time, or ambient state.
+ *
+ * Every visible region below is real m0 geometry. Copy is split into one cell
+ * per line because static SVG text does not soft-wrap (and its v1 path ignores
+ * drawtext y expressions). The production cover uses a bundled brand mark and
+ * the template registry's own preview image; the tutorial owns the diagrams.
+ */
+import type { MosaicColor, MosaicDocument, MosaicEngineContext, MosaicSource, MosaicTextSource, MosaicThemeTokens } from "@m0saic/types";
+/** Canonical Desktop dark tokens, sourced from App.css through theming/v1. */
+export declare const SCREENCAP_ONBOARDING_THEME: MosaicThemeTokens;
+/**
+ * Resolve the onboarding palette. The canonical Desktop tokens are the local
+ * fallback; an upstream theme may override them through the standard channel.
+ */
+export declare function resolveScreencapOnboardingTheme(ctx: MosaicEngineContext): MosaicThemeTokens;
+export type OnboardingTypeRamp = {
+    display: number;
+    headline: number;
+    body: number;
+    callout: number;
+    label: number;
+    micro: number;
+    chip: number;
+};
+/**
+ * Optical type ramp driven by the canvas short edge. Each role has its own
+ * ratio and clamp: display type grows faster than utility copy, so the
+ * hierarchy survives thumbnails, portrait canvases, and very large stages
+ * without behaving like one uniformly-scaled poster.
+ */
+export declare function onboardingTypeRamp(canvasW: number, canvasH: number): OnboardingTypeRamp;
+/**
+ * Cover typography follows the stage above 1080p instead of staying pinned to
+ * the shared tutorial caps. Normalize the canvas to a 1080px short edge, build
+ * the established optical ramp there, then scale every role back up. A 4K
+ * cover therefore gets exactly 2× the 1080p type while preserving wrapping
+ * and hierarchy; compact canvases retain the shared ramp's minimums.
+ */
+export declare function coverTypeRamp(canvasW: number, canvasH: number): OnboardingTypeRamp;
+/** A piece of real m0 geometry and the sources bound to its leaves. */
+export type OnboardingComposition = {
+    m0: string;
+    sources: MosaicSource[];
+};
+export declare function onboardingLeaf(source: MosaicSource): OnboardingComposition;
+/**
+ * Split compositions in document order. Null entries are actual `-` space and
+ * therefore produce no source.
+ */
+export declare function onboardingSplit(axis: "row" | "col", weights: number[], parts: Array<OnboardingComposition | null>): OnboardingComposition;
+/** Attach paint geometry over a base while preserving both real rect trees. */
+export declare function onboardingOverlay(base: OnboardingComposition, paint: OnboardingComposition): OnboardingComposition;
+/** Even items separated by real null gutters. */
+export declare function onboardingGuttered(axis: "row" | "col", items: OnboardingComposition[], itemWeight?: number, gutterWeight?: number): OnboardingComposition;
+/** One deterministic, literal SVG-glyph text cell. */
+export declare function onboardingTextSource(args: {
+    text: string;
+    fontSize: number;
+    color: MosaicColor;
+    hAlign?: "left" | "center" | "right";
+    backgroundColor?: MosaicColor;
+    fadeDelaySec?: number;
+    label?: string;
+}): MosaicTextSource;
+/**
+ * Static wrapped copy as real geometry: one SVG text source per line, nested
+ * in padded row cells. This avoids both rasterizers' no-wrap trap and avoids
+ * the SVG rasterizer's intentionally unsupported drawtext y expressions.
+ */
+export declare function onboardingTextBlock(args: {
+    text: string;
+    fontSize: number;
+    color: MosaicColor;
+    cellWidthPx: number;
+    hAlign?: "left" | "center" | "right";
+    widthFrac?: number;
+    fadeDelaySec?: number;
+    label?: string;
+}): OnboardingComposition;
+export declare function onboardingSolid(color: MosaicColor, fadeDelaySec?: number): OnboardingComposition;
+/** Four painted border cells around a nested composition. */
+export declare function onboardingFrame(content: OnboardingComposition, borderColor: MosaicColor): OnboardingComposition;
+/** A full-cell tile with a true bottom-right overlay chip. */
+export declare function onboardingTimestampTile(args: {
+    tileColor: MosaicColor;
+    chipText: string;
+    chipFontSize: number;
+    theme: MosaicThemeTokens;
+}): OnboardingComposition;
+/** Production cover: an instruction pane beside a dominant sample still. */
+export declare function renderScreencapGridV2Cover(ctx: MosaicEngineContext): MosaicDocument;

package/dist/m0saic/media/screencap_grid/v2/screencap-grid-cover.js

@@ -0,0 +1,367 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCREENCAP_ONBOARDING_THEME = void 0;
+exports.resolveScreencapOnboardingTheme = resolveScreencapOnboardingTheme;
+exports.onboardingTypeRamp = onboardingTypeRamp;
+exports.coverTypeRamp = coverTypeRamp;
+exports.onboardingLeaf = onboardingLeaf;
+exports.onboardingSplit = onboardingSplit;
+exports.onboardingOverlay = onboardingOverlay;
+exports.onboardingGuttered = onboardingGuttered;
+exports.onboardingTextSource = onboardingTextSource;
+exports.onboardingTextBlock = onboardingTextBlock;
+exports.onboardingSolid = onboardingSolid;
+exports.onboardingFrame = onboardingFrame;
+exports.onboardingTimestampTile = onboardingTimestampTile;
+exports.renderScreencapGridV2Cover = renderScreencapGridV2Cover;
+const types_1 = require("@m0saic/types");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const template_utils_1 = require("@m0saic/template-utils");
+const theme_tokens_1 = require("../../../theming/v1/theme-tokens");
+const screencap_grid_cover_assets_1 = require("./screencap-grid-cover-assets");
+/** Canonical Desktop dark tokens, sourced from App.css through theming/v1. */
+exports.SCREENCAP_ONBOARDING_THEME = (0, theme_tokens_1.resolveTheme)("dark");
+/**
+ * Resolve the onboarding palette. The canonical Desktop tokens are the local
+ * fallback; an upstream theme may override them through the standard channel.
+ */
+function resolveScreencapOnboardingTheme(ctx) {
+    return (0, template_utils_1.applyTheme)(exports.SCREENCAP_ONBOARDING_THEME, ctx);
+}
+const clampRound = (value, min, max) => Math.max(min, Math.min(max, Math.round(value)));
+/**
+ * Optical type ramp driven by the canvas short edge. Each role has its own
+ * ratio and clamp: display type grows faster than utility copy, so the
+ * hierarchy survives thumbnails, portrait canvases, and very large stages
+ * without behaving like one uniformly-scaled poster.
+ */
+function onboardingTypeRamp(canvasW, canvasH) {
+    const shortEdge = Math.max(1, Math.min(canvasW, canvasH));
+    return {
+        display: clampRound(shortEdge * 0.072, 18, 88),
+        headline: clampRound(shortEdge * 0.052, 15, 58),
+        body: clampRound(shortEdge * 0.027, 11, 30),
+        callout: clampRound(shortEdge * 0.022, 10, 24),
+        label: clampRound(shortEdge * 0.016, 8, 18),
+        micro: clampRound(shortEdge * 0.0125, 8, 14),
+        chip: clampRound(shortEdge * 0.011, 8, 12),
+    };
+}
+/**
+ * Cover typography follows the stage above 1080p instead of staying pinned to
+ * the shared tutorial caps. Normalize the canvas to a 1080px short edge, build
+ * the established optical ramp there, then scale every role back up. A 4K
+ * cover therefore gets exactly 2× the 1080p type while preserving wrapping
+ * and hierarchy; compact canvases retain the shared ramp's minimums.
+ */
+function coverTypeRamp(canvasW, canvasH) {
+    const shortEdge = Math.max(1, Math.min(canvasW, canvasH));
+    const stageScale = Math.max(1, shortEdge / 1080);
+    const base = onboardingTypeRamp(canvasW / stageScale, canvasH / stageScale);
+    const scale = (value) => Math.max(1, Math.round(value * stageScale));
+    return {
+        display: scale(base.display),
+        headline: scale(base.headline),
+        body: scale(base.body),
+        callout: scale(base.callout),
+        label: scale(base.label),
+        micro: scale(base.micro),
+        chip: scale(base.chip),
+    };
+}
+function onboardingLeaf(source) {
+    return { m0: "1", sources: [source] };
+}
+/**
+ * Split compositions in document order. Null entries are actual `-` space and
+ * therefore produce no source.
+ */
+function onboardingSplit(axis, weights, parts) {
+    if (weights.length !== parts.length || parts.length < 2) {
+        throw new Error("onboardingSplit requires matching weights and 2+ parts");
+    }
+    return {
+        m0: (0, dsl_stdlib_1.weightedSplit)(weights, axis, {
+            claimants: parts.map((part) => { var _a; return (_a = part === null || part === void 0 ? void 0 : part.m0) !== null && _a !== void 0 ? _a : "-"; }),
+        }),
+        sources: parts.flatMap((part) => { var _a; return (_a = part === null || part === void 0 ? void 0 : part.sources) !== null && _a !== void 0 ? _a : []; }),
+    };
+}
+/** Attach paint geometry over a base while preserving both real rect trees. */
+function onboardingOverlay(base, paint) {
+    return {
+        m0: `${base.m0}{${paint.m0}}`,
+        sources: [...base.sources, ...paint.sources],
+    };
+}
+/** Even items separated by real null gutters. */
+function onboardingGuttered(axis, items, itemWeight = 12, gutterWeight = 1) {
+    if (items.length === 1)
+        return items[0];
+    const parts = [];
+    const weights = [];
+    items.forEach((item, index) => {
+        if (index > 0) {
+            parts.push(null);
+            weights.push(gutterWeight);
+        }
+        parts.push(item);
+        weights.push(itemWeight);
+    });
+    return onboardingSplit(axis, weights, parts);
+}
+/** One deterministic, literal SVG-glyph text cell. */
+function onboardingTextSource(args) {
+    var _a;
+    const hAlign = (_a = args.hAlign) !== null && _a !== void 0 ? _a : "center";
+    return {
+        type: "text",
+        rasterizer: "svg",
+        style: { fontSize: args.fontSize, fontColor: args.color },
+        layers: [{ content: { kind: "literal", text: args.text } }],
+        placement: { hAlign, vAlign: "middle" },
+        ...(args.backgroundColor
+            ? { visual: { backgroundColor: args.backgroundColor } }
+            : {}),
+        ...(args.fadeDelaySec != null
+            ? { overlay: { alpha: (0, template_utils_1.fadeInExpr)(args.fadeDelaySec, 0.28) } }
+            : {}),
+        renderMode: { kind: "image" },
+        editor: {
+            owner: "template",
+            ...(args.label ? { label: args.label } : {}),
+        },
+    };
+}
+/**
+ * Static wrapped copy as real geometry: one SVG text source per line, nested
+ * in padded row cells. This avoids both rasterizers' no-wrap trap and avoids
+ * the SVG rasterizer's intentionally unsupported drawtext y expressions.
+ */
+function onboardingTextBlock(args) {
+    var _a;
+    const trimmed = args.text.trim();
+    if (!trimmed) {
+        throw new Error("onboardingTextBlock requires non-empty copy");
+    }
+    const usableW = args.cellWidthPx * ((_a = args.widthFrac) !== null && _a !== void 0 ? _a : 0.94);
+    const maxCharsPerLine = Math.max(5, Math.floor(usableW / (args.fontSize * 0.58)));
+    const lines = (0, template_utils_1.wrapText)(trimmed, maxCharsPerLine);
+    const lineParts = lines.map((line, index) => onboardingLeaf(onboardingTextSource({
+        text: line,
+        fontSize: args.fontSize,
+        color: args.color,
+        hAlign: args.hAlign,
+        fadeDelaySec: args.fadeDelaySec,
+        label: args.label && lines.length > 1
+            ? `${args.label} ${index + 1}`
+            : args.label,
+    })));
+    return onboardingSplit("row", [1, ...lineParts.map(() => 3), 1], [null, ...lineParts, null]);
+}
+function onboardingSolid(color, fadeDelaySec) {
+    return onboardingLeaf((0, template_utils_1.makeColorTile)(color, fadeDelaySec == null
+        ? undefined
+        : { overlay: { alpha: (0, template_utils_1.fadeInExpr)(fadeDelaySec, 0.3) } }));
+}
+/** Four painted border cells around a nested composition. */
+function onboardingFrame(content, borderColor) {
+    const middle = onboardingSplit("col", [1, 72, 1], [onboardingSolid(borderColor), content, onboardingSolid(borderColor)]);
+    return onboardingSplit("row", [1, 46, 1], [onboardingSolid(borderColor), middle, onboardingSolid(borderColor)]);
+}
+/** A full-cell tile with a true bottom-right overlay chip. */
+function onboardingTimestampTile(args) {
+    const chip = onboardingLeaf(onboardingTextSource({
+        text: args.chipText,
+        fontSize: args.chipFontSize,
+        color: args.theme.textPrimary,
+        backgroundColor: args.theme.surfaceApp,
+        label: "timestamp",
+    }));
+    const chipCorner = onboardingSplit("row", [7, 3], [
+        null,
+        onboardingSplit("col", [7, 3], [null, chip]),
+    ]);
+    return onboardingOverlay(onboardingSolid(args.tileColor), chipCorner);
+}
+const COVER_LOGO_ASSET_ID = (0, types_1.asAssetId)("screencap-cover-logo");
+const COVER_HERO_ASSET_ID = (0, types_1.asAssetId)("screencap-cover-preview");
+function coverMedia(args) {
+    const source = {
+        type: "media",
+        mediaType: "image",
+        assetId: args.assetId,
+        placement: args.fit === "cover"
+            ? {
+                fit: "cover",
+                ...(args.focusX == null ? {} : { focusX: args.focusX }),
+            }
+            : { fit: "contain" },
+        editor: { owner: "template", label: args.label },
+    };
+    return onboardingLeaf(source);
+}
+function coverBrand(theme, type) {
+    const logo = coverMedia({
+        assetId: COVER_LOGO_ASSET_ID,
+        fit: "contain",
+        label: "m0saic M logo",
+    });
+    const name = onboardingLeaf(onboardingTextSource({
+        text: "Screencap Grid",
+        fontSize: Math.max(type.body, Math.round(type.headline * 0.64)),
+        color: theme.textPrimary,
+        hAlign: "left",
+        label: "cover product name",
+    }));
+    return onboardingSplit("col", [5, 2, 23], [logo, null, name]);
+}
+function coverMessage(paneWidth, theme, type, label, body) {
+    const copy = onboardingSplit("row", [4, 11], [
+        onboardingTextBlock({
+            text: label,
+            fontSize: type.micro,
+            color: theme.accent,
+            cellWidthPx: paneWidth * 0.72,
+            hAlign: "left",
+            label: `cover ${label.toLowerCase()} label`,
+        }),
+        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 = onboardingOverlay(onboardingSolid(theme.surfaceRaised), onboardingSplit("col", [1, 18, 1], [null, copy, null]));
+    return onboardingSplit("col", [1, 19], [onboardingSolid(theme.accent), bubble]);
+}
+function coverTip(paneWidth, theme, type) {
+    const copy = onboardingSplit("row", [2, 5], [
+        onboardingTextBlock({
+            text: "START HERE",
+            fontSize: type.micro,
+            color: theme.accent,
+            cellWidthPx: paneWidth * 0.72,
+            hAlign: "left",
+            label: "cover start tip label",
+        }),
+        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 onboardingFrame(onboardingOverlay(onboardingSolid(theme.surface), onboardingSplit("col", [1, 18, 1], [null, copy, null])), theme.borderStrong);
+}
+function coverChatPane(paneWidth, theme, type, compact) {
+    const brand = coverBrand(theme, type);
+    const title = onboardingTextBlock({
+        text: "Video at a glance.",
+        fontSize: type.headline,
+        color: theme.textPrimary,
+        cellWidthPx: paneWidth * 0.83,
+        hAlign: "left",
+        widthFrac: 0.9,
+        label: "cover title",
+    });
+    const overview = onboardingTextBlock({
+        text: compact
+            ? "Turn source footage into a grid that is easy to scan."
+            : "Turn source footage into a PNG contact sheet or MP4 animated grid. Sample the full timeline in one view.",
+        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
+        ? "Choose files or a folder."
+        : "Choose one file, multiple files, or a folder.");
+    const gridMessage = coverMessage(paneWidth, theme, type, "SHAPE THE GRID", compact
+        ? "Set rows, columns, gap, and fit."
+        : "Set rows, columns, tile gap, fit, info, and timestamps.");
+    const outputMessage = coverMessage(paneWidth, theme, type, "EXPORT OR CUSTOMIZE", compact
+        ? "Choose PNG, MP4, or a custom m0 layout."
+        : "Choose PNG or MP4. Advanced accepts a custom m0 layout.");
+    const tip = coverTip(paneWidth, theme, type);
+    const conversation = 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,
+        gridMessage,
+        null,
+        outputMessage,
+        null,
+        tip,
+        null,
+    ]);
+    const paddedConversation = onboardingSplit("col", [2, 26, 2], [null, conversation, null]);
+    return onboardingFrame(onboardingOverlay(onboardingSolid(theme.surfaceInset), paddedConversation), theme.border);
+}
+function coverHero(theme) {
+    const image = coverMedia({
+        assetId: COVER_HERO_ASSET_ID,
+        fit: "contain",
+        label: "Screencap Grid registered preview",
+    });
+    return onboardingFrame(image, theme.borderStrong);
+}
+/** Production cover: an instruction pane beside a dominant sample still. */
+function renderScreencapGridV2Cover(ctx) {
+    const canvasW = ctx.target.width;
+    const canvasH = ctx.target.height;
+    const theme = resolveScreencapOnboardingTheme(ctx);
+    const type = 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
+        ? onboardingSplit("row", [47, 3, 50], [
+            onboardingSplit("col", [6, 88, 6], [null, pane, null]),
+            null,
+            onboardingSplit("col", [6, 88, 6], [null, hero, null]),
+        ])
+        : onboardingSplit("col", [4, 30, 3, 59, 4], [null, pane, null, hero, null]);
+    const page = onboardingSplit("row", [5, 90, 5], [null, content, null]);
+    const assets = {
+        [COVER_LOGO_ASSET_ID]: {
+            kind: "data-uri",
+            uri: screencap_grid_cover_assets_1.SCREENCAP_COVER_LOGO_URI,
+            mediaType: "image",
+            displayName: "m0saic M",
+        },
+        [COVER_HERO_ASSET_ID]: {
+            kind: "url",
+            url: screencap_grid_cover_assets_1.SCREENCAP_COVER_PREVIEW_URL,
+            mediaType: "image",
+            displayName: "Screencap Grid preview.png",
+        },
+    };
+    return {
+        kind: "mosaic_document",
+        version: 1,
+        assets,
+        size: { width: canvasW, height: canvasH },
+        backgroundColor: theme.surfaceApp,
+        m0: page.m0,
+        sources: page.sources,
+    };
+}

package/dist/m0saic/media/screencap_grid/v2/screencap-grid-tutorial.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Screencap Grid v2 — the editor "?" tutorial.
+ *
+ * Eight authored pages teach the shortest path to a useful result, then reveal
+ * the template's real depth. Each page is a real mosaic document; diagrams are
+ * structural geometry rather than illustrations painted into a full-canvas
+ * text source. The pipeline owns its fixed 25-second pace.
+ */
+import type { MosaicAssetManifest, MosaicColor, MosaicDocumentPipeline, MosaicEngineContext, MosaicThemeTokens } from "@m0saic/types";
+import { type OnboardingComposition, type OnboardingTypeRamp } from "./screencap-grid-cover";
+/**
+ * The tutorial's media manifest. Node (CLI --tutorial, electron main) reads
+ * the bundled jpg via __dirname string concat — the highlights-cover
+ * web-safe pattern (the internal 2026-08-25 notes): no node:path import, asar
+ * rewrite inlined. The browser uses the same picture through the public
+ * template-assets URL the cover already ships.
+ */
+export declare function tutorialAssets(): MosaicAssetManifest;
+/** A real-footage window: one sheet tile's pixels, cover-filling its cell. */
+export declare function footageWindow(row: number, col: number, label: string): OnboardingComposition;
+/** The real info pane's own pixels (title + metadata strip of the sheet). */
+export declare function paneStrip(label: string): OnboardingComposition;
+/** The whole registered sheet, contain-fit — "this is the deliverable". */
+export declare function sheetStill(label: string, fit?: "contain" | "cover"): OnboardingComposition;
+/** A footage window carrying a real timestamp chip in a chosen corner. */
+export declare function windowWithChip(args: {
+    row: number;
+    col: number;
+    chipText: string;
+    corner: "tl" | "tr" | "bl" | "br";
+    chipColor: MosaicColor;
+    chipBg: MosaicColor;
+    chipFontSize: number;
+}): OnboardingComposition;
+/** The cover's brand row: M mark + product name, opening every page. */
+export declare function tutorialBrand(theme: MosaicThemeTokens, type: OnboardingTypeRamp, productName?: string): OnboardingComposition;
+/** Build the fixed, scrubbable eight-page walkthrough. */
+export declare function renderScreencapGridV2Tutorial(ctx: MosaicEngineContext): MosaicDocumentPipeline;