@m0saic/templates 0.2.0

package/dist/m0saic/theming/v1/theme-tokens.d.ts

@@ -0,0 +1,71 @@
+/**
+ * ============================================================================
+ * `@m0saic/theming` — the m0saic design-token system
+ * ============================================================================
+ *
+ * A layered token system (the standard design-system shape — cf. Material 3,
+ * Primer, Spectrum), so a template author codes against STABLE semantic roles
+ * and never a raw hex, and so a third party can re-brand by swapping ONE layer:
+ *
+ *   Layer 1 — REFERENCE ({@link M0saicBrand}): the raw brand ramps. The
+ *             identity lives here; fork this to re-brand.
+ *   Layer 2 — SEMANTIC ({@link ThemeTokens}): role-based tokens templates read
+ *             (`surface`, `textPrimary`, `accent`, …). Names mirror the app's
+ *             `App.css :root` so the whole m0saic surface speaks one language.
+ *   Layer 3 — PRESETS ({@link THEME_PRESETS}): the semantic layer resolved per
+ *             MODE — `dark` / `light` / `high-contrast`. Modes are luminance
+ *             schemes of the SAME brand, never different brands.
+ *
+ * The m0saic identity is **deep navy + orange**, lifted verbatim from the app's
+ * design tokens (`apps/mosaic/web/src/App.css :root`): `--brand-navy #050314`,
+ * `--brand-orange #EF7525`, the `--color-bg-*` surface ladder, `--color-text-*`,
+ * status `#4ade80 / #f87171`. `dark` == the app today. `light` + `high-contrast`
+ * are derived from the same brand.
+ *
+ * ⛔ Ratified vocabulary (KEYS) is additive-only; renames force a re-checkpoint.
+ * Each consumer keeps its current constants as the deterministic standalone
+ * fallback → an un-themed render is byte-identical to today.
+ * ============================================================================
+ */
+import type { MosaicColor, MosaicThemeTokens, MosaicThemeMode } from "@m0saic/types";
+/** The shared semantic contract (lives in `@m0saic/types`). Re-exported here
+ *  so this template is a complete reference of the theming system. */
+export type ThemeTokens = MosaicThemeTokens;
+export type ThemeMode = MosaicThemeMode;
+/** @deprecated use {@link ThemeMode}. */
+export type ThemePreset = ThemeMode;
+/**
+ * Raw brand ramps. Not consumed by templates directly — the semantic presets
+ * below resolve from these. A third party supplies their own `M0saicBrand`
+ * (or forks this file) to ship their identity through the same semantic
+ * contract.
+ */
+export type M0saicBrand = {
+    orange: MosaicColor;
+    orangeSoft: MosaicColor;
+    orangePale: MosaicColor;
+    orangeGlow: MosaicColor;
+    navy: MosaicColor;
+    navyDeep: MosaicColor;
+    surface: MosaicColor;
+    surfaceRaised: MosaicColor;
+    surfaceHover: MosaicColor;
+    surfaceInset: MosaicColor;
+    navySoft: MosaicColor;
+    navyMuted: MosaicColor;
+    textHi: MosaicColor;
+    textMid: MosaicColor;
+    green: MosaicColor;
+    red: MosaicColor;
+    /** Orange-anchored categorical ramp, harmonized on navy. */
+    dataRamp: MosaicColor[];
+};
+/** The built-in m0saic brand — values from `App.css :root`. */
+export declare const M0SAIC_BRAND: M0saicBrand;
+export declare const THEME_PRESETS: Record<ThemeMode, ThemeTokens>;
+export declare const THEME_MODES: ThemeMode[];
+export declare const DEFAULT_THEME_MODE: ThemeMode;
+/** @deprecated use {@link DEFAULT_THEME_MODE}. */
+export declare const DEFAULT_THEME_PRESET: "dark";
+/** Resolve a mode to its full semantic token set (defaults to `dark`). */
+export declare function resolveTheme(mode?: ThemeMode): ThemeTokens;

package/dist/m0saic/theming/v1/theme-tokens.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_THEME_PRESET = exports.DEFAULT_THEME_MODE = exports.THEME_MODES = exports.THEME_PRESETS = exports.M0SAIC_BRAND = void 0;
+exports.resolveTheme = resolveTheme;
+/** The built-in m0saic brand — values from `App.css :root`. */
+exports.M0SAIC_BRAND = {
+    orange: "#EF7525",
+    orangeSoft: "#F99666",
+    orangePale: "#FFC6A9",
+    orangeGlow: "#EF752540",
+    navy: "#050314",
+    navyDeep: "#03020C",
+    surface: "#12111F",
+    surfaceRaised: "#1E1D2D",
+    surfaceHover: "#2A293D",
+    surfaceInset: "#161525",
+    navySoft: "#3A394F",
+    navyMuted: "#6D6D84",
+    textHi: "#F5F5F7",
+    textMid: "#A0A0B0",
+    green: "#4ADE80",
+    red: "#F87171",
+    dataRamp: ["#EF7525", "#3FB6C9", "#F5C451", "#E0607F", "#8B7FE8", "#5AD1A0"],
+};
+// ── Layer 2: SEMANTIC — the role tokens templates read ──────────────────────
+// The `MosaicThemeTokens` contract now lives in `@m0saic/types` (aliased as
+// `ThemeTokens` at the top of this file) so producers + consumers share it.
+// ── Layer 3: PRESETS — the m0saic brand resolved per mode ───────────────────
+exports.THEME_PRESETS = {
+    // `dark` == the app today (App.css :root).
+    dark: {
+        surfaceApp: exports.M0SAIC_BRAND.navy,
+        surface: exports.M0SAIC_BRAND.surface,
+        surfaceRaised: exports.M0SAIC_BRAND.surfaceRaised,
+        surfaceInset: exports.M0SAIC_BRAND.surfaceInset,
+        border: exports.M0SAIC_BRAND.surfaceHover,
+        borderStrong: exports.M0SAIC_BRAND.navySoft,
+        textPrimary: exports.M0SAIC_BRAND.textHi,
+        textSecondary: exports.M0SAIC_BRAND.textMid,
+        textMuted: exports.M0SAIC_BRAND.navyMuted,
+        eyebrow: exports.M0SAIC_BRAND.orange,
+        accent: exports.M0SAIC_BRAND.orange,
+        accentSoft: exports.M0SAIC_BRAND.orangeSoft,
+        accentGlow: exports.M0SAIC_BRAND.orangeGlow,
+        positive: exports.M0SAIC_BRAND.green,
+        negative: exports.M0SAIC_BRAND.red,
+        grid: exports.M0SAIC_BRAND.surfaceRaised,
+        gridAlpha: 1,
+        axis: exports.M0SAIC_BRAND.navySoft,
+        axisAlpha: 1,
+        radius: 0.06,
+        dataPalette: exports.M0SAIC_BRAND.dataRamp,
+    },
+    // Same brand, light mode (derived — orange accent kept, navy-tinted neutrals).
+    light: {
+        surfaceApp: "#F7F6FB",
+        surface: "#FFFFFF",
+        surfaceRaised: "#FBFAFE",
+        surfaceInset: "#F1F0F7",
+        border: "#E4E2ED",
+        borderStrong: "#CFCCDD",
+        textPrimary: "#12111F",
+        textSecondary: "#56546A",
+        textMuted: "#8A88A0",
+        eyebrow: "#D65E14",
+        accent: "#EF7525",
+        accentSoft: "#F99666",
+        accentGlow: "#EF752520",
+        positive: "#16A34A",
+        negative: "#DC2626",
+        grid: "#EDEBF3",
+        gridAlpha: 1,
+        axis: "#D8D5E4",
+        axisAlpha: 1,
+        radius: 0.06,
+        dataPalette: ["#E4670F", "#0E9AAE", "#D9A521", "#C8395C", "#6D5FD1", "#12A574"],
+    },
+    // Accessibility mode — max luminance separation, orange intensified.
+    "high-contrast": {
+        surfaceApp: "#000000",
+        surface: "#0A0A12",
+        surfaceRaised: "#12121C",
+        surfaceInset: "#08080F",
+        border: "#FFFFFF",
+        borderStrong: "#FFFFFF",
+        textPrimary: "#FFFFFF",
+        textSecondary: "#E6E6EE",
+        textMuted: "#C8C8D4",
+        eyebrow: "#FF8A3D",
+        accent: "#FF8A3D",
+        accentSoft: "#FFB07A",
+        accentGlow: "#FF8A3D40",
+        positive: "#37E88B",
+        negative: "#FF6B6B",
+        grid: "#FFFFFF",
+        gridAlpha: 0.35,
+        axis: "#FFFFFF",
+        axisAlpha: 0.6,
+        radius: 0.03,
+        dataPalette: ["#FF8A3D", "#33D6E8", "#FFD740", "#FF6B8A", "#B39DFF", "#5AF2B0"],
+    },
+};
+exports.THEME_MODES = ["dark", "light", "high-contrast"];
+exports.DEFAULT_THEME_MODE = "dark";
+/** @deprecated use {@link DEFAULT_THEME_MODE}. */
+exports.DEFAULT_THEME_PRESET = exports.DEFAULT_THEME_MODE;
+/** Resolve a mode to its full semantic token set (defaults to `dark`). */
+function resolveTheme(mode = exports.DEFAULT_THEME_MODE) {
+    var _a;
+    return (_a = exports.THEME_PRESETS[mode]) !== null && _a !== void 0 ? _a : exports.THEME_PRESETS[exports.DEFAULT_THEME_MODE];
+}

package/dist/m0saic/theming/v1/theming.d.ts

@@ -0,0 +1,18 @@
+import { type ThemeMode } from "./theme-tokens";
+type ThemingProps = {
+    /** Which token set to publish + preview. */
+    preset: ThemeMode;
+    /** Upstream alias the token block publishes under. Default `"theme"`. */
+    alias: string;
+    /**
+     * `true` (default): render the swatch preview — for eyeballing tokens
+     * standalone. `false`: emit a **data-only** doc (just the published token
+     * block, no cells). A data-only doc is valid ONLY as an
+     * `intermediate: true` pipeline step — the plan builder then skips it
+     * cleanly (zero render cost) while its tokens still thread downstream.
+     * Rendering `preview:false` standalone is intentionally an error.
+     */
+    preview: boolean;
+};
+export declare const Theming: import("@m0saic/types").MosaicTemplate<ThemingProps, import("@m0saic/types").MosaicTemplateOutputs, import("@m0saic/types").MosaicTemplateUpstreamVariables, import("@m0saic/types").MosaicTemplateUpstreamData, import("@m0saic/types").MosaicTemplateSidecars>;
+export default Theming;

package/dist/m0saic/theming/v1/theming.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theming = 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 theme_tokens_1 = require("./theme-tokens");
+const token_sheet_1 = require("./token-sheet");
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    preset: {
+        type: "string",
+        required: false,
+        description: "Design-token preset to publish (dark | light | high-contrast).",
+        meta: {
+            constraints: { oneOf: ["dark", "light", "high-contrast"] },
+            ui: { label: "Preset", order: 1 },
+        },
+    },
+    alias: {
+        type: "string",
+        required: false,
+        description: 'Upstream alias the token block appears under in ctx.upstreamData. Default "theme".',
+        meta: { ui: { label: "Alias", order: 2, consumer: "agent" } },
+    },
+    preview: {
+        type: "boolean",
+        required: false,
+        description: "Render the swatch preview (true, standalone) vs. emit a data-only token block (false, for an intermediate pipeline step — zero render cost).",
+        meta: { ui: { label: "Preview swatches", order: 3 } },
+    },
+});
+exports.Theming = (0, template_utils_1.defineMosaicTemplate)({
+    id: (0, types_1.asTemplateId)("@m0saic/theming/v1"),
+    label: "Theming — Token Producer",
+    version: 1,
+    description: "Design-token producer: publishes one ThemeTokens set (dark | light | high-contrast) onto ctx.upstreamVariables for downstream templates to read. Rendered standalone (preview:true) it draws an aspect-adaptive Theme-Tokens sheet — mosaic-M header, the labelled data palette, and the semantic swatches; as an intermediate pipeline step (preview:false) it emits pure data at zero cost and re-skins a chain by swapping one prop.",
+    capabilities: { tier: "core" },
+    tags: ["utility", "theming", "tokens", "producer", "design-system", "designers", "developers", "palette"],
+    outputHints: {
+        width: 1920,
+        height: 1080,
+        note: "A single-frame Theme-Tokens sheet (image); the real payload is the published token block on ctx.upstreamVariables.",
+        format: { kind: "image", frameCount: 1 },
+    },
+    propsSchema,
+    defaultProps: {
+        preset: theme_tokens_1.DEFAULT_THEME_MODE,
+        alias: "theme",
+        preview: true,
+    },
+    render: async (props, ctx) => {
+        var _a, _b, _c;
+        const preset = (_a = props.preset) !== null && _a !== void 0 ? _a : theme_tokens_1.DEFAULT_THEME_MODE;
+        const alias = (_b = props.alias) !== null && _b !== void 0 ? _b : "theme";
+        const preview = (_c = props.preview) !== null && _c !== void 0 ? _c : true;
+        if (!(0, types_1.isAliasId)(alias)) {
+            throw new Error(`@m0saic/theming: alias ${JSON.stringify(alias)} is not a valid AliasId (letter/_ start, alphanumeric, max 64 chars).`);
+        }
+        const t = (0, theme_tokens_1.resolveTheme)(preset);
+        const themeSource = (0, template_utils_1.publishTheme)(t, { alias });
+        // Production path: a data-only doc (no cells). Valid ONLY as an
+        // `intermediate: true` pipeline step, where the plan builder skips it
+        // (isDataOnlyStep → no commands) while the tokens still thread downstream.
+        if (!preview) {
+            return {
+                kind: "mosaic_document",
+                version: 1,
+                m0: (0, dsl_stdlib_1.toM0String)("1", "theme"),
+                assets: {},
+                sources: [themeSource],
+                sidecars: { theme: { ...t } },
+            };
+        }
+        // Preview path: the Theme-Tokens sheet at the canvas dims + the token
+        // block on the side-channel.
+        const W = ctx.target.width;
+        const H = ctx.target.height;
+        const sheet = (0, token_sheet_1.buildTokenSheet)(t, W, H, preset);
+        return {
+            kind: "mosaic_document",
+            version: 1,
+            m0: (0, dsl_stdlib_1.toM0String)(sheet.m0, "themeTokenSheet"),
+            backgroundColor: t.surfaceApp,
+            assets: {},
+            sources: [...sheet.sources, themeSource],
+            // A static sheet — emit a single PNG, not a 90-frame video.
+            format: { kind: "image", frameCount: 1 },
+            // Mirror the published tokens for byte-assertable e2e verification.
+            sidecars: { theme: { ...t } },
+        };
+    },
+});
+(0, template_utils_1.registerTemplate)(exports.Theming);
+exports.default = exports.Theming;

package/dist/m0saic/theming/v1/token-sheet.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The `preview: true` render — a "Theme Tokens" sheet showing the active
+ * preset's real values: an M mark + wordmark header, a title, the categorical
+ * `dataPalette`, and the semantic tokens (accent / positive / negative /
+ * surfaces), every swatch labelled with role name + hex.
+ *
+ * Aspect-adaptive: a **wide** grid (swatches side-by-side) for landscape/square,
+ * a **tall** stacked list (each swatch a row) for portrait. The brand M is drawn
+ * as a `placeRect` overlay so it is a **perfect square at every resolution**
+ * (a split-cell M distorts across aspect ratios).
+ *
+ * Self-contained node kit — `@m0saic/theming` stays foundational (no dependency
+ * on a consumer pack's shared card).
+ */
+import type { MosaicSource } from "@m0saic/types";
+import type { ThemeTokens, ThemeMode } from "./theme-tokens";
+type Node = {
+    m0: string;
+    sources: MosaicSource[];
+};
+/** Build the Theme-Tokens sheet node for a `W×H` canvas (aspect-adaptive). */
+export declare function buildTokenSheet(t: ThemeTokens, W: number, H: number, mode: ThemeMode): Node;
+export {};

package/dist/m0saic/theming/v1/token-sheet.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTokenSheet = buildTokenSheet;
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const template_utils_1 = require("@m0saic/template-utils");
+const brand_m_glyph_1 = require("./brand-m-glyph");
+const EMPTY = { m0: "-", sources: [] };
+const paint = (s) => ({ m0: "F", sources: [s] });
+const tile = (c) => paint((0, template_utils_1.makeColorTile)(c));
+const SPLIT_CAP = 240;
+function split(axis, bands) {
+    const bs = bands.filter((b) => b.weight > 0);
+    if (bs.length === 0)
+        return EMPTY;
+    if (bs.length === 1)
+        return bs[0].node;
+    const weights = bs.map((b) => Math.max(1, Math.round(b.weight)));
+    // Basis on the 5-smooth lattice (latticeWeights, @m0saic/template-utils):
+    // over the cap the bands are Hamilton-scaled to EXACTLY the cap (GCD ⇒ a
+    // divisor of it); a rough pixel sum under the cap drifts ≤ 1 px onto the
+    // nearest smooth basis; a symmetric inset or an item/gutter list is rewritten
+    // as the same pattern on a smooth total (every item stays equal to its
+    // siblings); smooth, tiny and equal-weight splits keep their basis.
+    const m0 = String((0, dsl_stdlib_1.weightedSplit)((0, template_utils_1.latticeWeights)(weights, { cap: SPLIT_CAP }), axis, { claimants: bs.map((b) => b.node.m0) }));
+    return { m0, sources: bs.flatMap((b) => b.node.sources) };
+}
+const rowSplit = (bands) => split("row", bands);
+const colSplit = (bands) => split("col", bands);
+/** base{layer1{layer2…}} — overlay layers, sources concatenated in order. */
+function overlay(layers) {
+    const ls = layers.filter((l) => l.sources.length > 0 || l.m0 !== "-");
+    if (ls.length === 0)
+        return EMPTY;
+    if (ls.length === 1)
+        return ls[0];
+    let m0 = ls[ls.length - 1].m0;
+    for (let i = ls.length - 2; i >= 0; i--)
+        m0 = `${ls[i].m0}{${m0}}`;
+    return { m0, sources: ls.flatMap((l) => l.sources) };
+}
+function textSrc(s, fontSize, color, hAlign = "left", vAlign = "middle") {
+    return {
+        type: "text",
+        visual: { backgroundColor: "black@0" },
+        layers: [{ content: { kind: "literal", text: s || " " }, style: { fontSize, fontColor: color }, placement: { fit: "contain", hAlign, vAlign } }],
+    };
+}
+const text = (s, fontSize, color, hAlign = "left", vAlign = "middle") => paint(textSrc(s, fontSize, color, hAlign, vAlign));
+/** A swatch color block — stroked (for dark surfaces that would vanish on the
+ *  navy) or solid (vivid data/accent colors). */
+function block(color, t, bordered) {
+    if (!bordered)
+        return tile(color);
+    // A thin hairline outline so a dark surface (esp. Surface App == the bg)
+    // shows its bounds. `stroke.width` is a FRACTION of the block's min dim
+    // (widthPx ≈ floor(width × min(w,h)), clamped ≥1) — keep it small.
+    return paint((0, template_utils_1.makeColorTile)(color, { effects: { stroke: { width: 0.012, color: t.textMuted } } }));
+}
+function labelPair(name, hex, t, nameFont, hexFont, hAlign, _vAlign) {
+    return rowSplit([
+        { weight: 4, node: text(name, nameFont, t.textPrimary, hAlign, "bottom") },
+        { weight: 2, node: EMPTY }, // space between the name and the hex
+        { weight: 3, node: text(String(hex).toUpperCase(), hexFont, t.textSecondary, hAlign, "top") },
+    ]);
+}
+function collect(t) {
+    const data = t.dataPalette.slice(0, 6).map((c, i) => ({ name: `Data 0${i + 1}`, hex: c, bordered: false }));
+    const sem = [
+        { name: "Accent", hex: t.accent, bordered: false },
+        { name: "Positive", hex: t.positive, bordered: false },
+        { name: "Negative", hex: t.negative, bordered: false },
+        { name: "Surface App", hex: t.surfaceApp, bordered: true },
+        { name: "Surface", hex: t.surface, bordered: true },
+        { name: "Surface Raised", hex: t.surfaceRaised, bordered: true },
+        { name: "Surface Inset", hex: t.surfaceInset, bordered: true },
+    ];
+    return { data, sem };
+}
+/** Header lockup drawn as placeRect overlays — the M as an exact SQUARE and the
+ *  wordmark beside it — so neither distorts nor collides at any aspect ratio.
+ *  `align: "center"` centers the whole M+wordmark lockup (portrait). */
+function headerOverlay(t, W, H, marginX, y, size, wordFont, align) {
+    const gap = Math.round(size * 0.4);
+    const wordW = Math.round(wordFont * 3.4); // "m0saic" measured width, so the lockup centers true
+    const lockupW = size + gap + wordW;
+    const x = align === "center" ? Math.max(marginX, Math.round((W - lockupW) / 2)) : marginX;
+    const glyph = (0, template_utils_1.makeColorTile)(t.accent, {
+        mask: { kind: "inline-mask", localPath: brand_m_glyph_1.BRAND_M_GLYPH.path, bounds: brand_m_glyph_1.BRAND_M_GLYPH.bounds },
+    });
+    const mNode = { m0: String((0, dsl_stdlib_1.placeRect)({ rootW: W, rootH: H, rectW: size, rectH: size, x, y }).m0), sources: [glyph] };
+    const wNode = {
+        m0: String((0, dsl_stdlib_1.placeRect)({ rootW: W, rootH: H, rectW: wordW, rectH: size, x: x + size + gap, y }).m0),
+        sources: [textSrc("m0saic", wordFont, t.textPrimary, "left", "middle")],
+    };
+    return overlay([mNode, wNode]);
+}
+/** Human-readable preset name for the eyebrow. */
+function presetLabel(mode) {
+    return mode === "high-contrast" ? "High Contrast" : mode === "light" ? "Light" : "Dark";
+}
+// ── Wide (landscape / square) — swatches side by side ───────────────────────
+function wide(t, W, H, mode) {
+    const marginX = Math.round(W * 0.045);
+    const marginY = Math.round(H * 0.055);
+    const hHeader = Math.round(Math.min(W, H) * 0.09);
+    const nameFont = Math.max(11, Math.round(H * 0.019));
+    const hexFont = Math.max(10, Math.round(H * 0.015));
+    const gutter = Math.round(W * 0.012);
+    const { data, sem } = collect(t);
+    const swatchCol = (s, blockW) => rowSplit([
+        { weight: 3, node: labelPair(s.name, s.hex, t, nameFont, hexFont, "left", "top") },
+        { weight: 1, node: EMPTY }, // breathing room between the label and the block
+        { weight: blockW, node: block(s.hex, t, s.bordered) },
+    ]);
+    const rowOf = (cells) => {
+        const bands = [];
+        cells.forEach((c, i) => {
+            if (i > 0)
+                bands.push({ weight: gutter, node: EMPTY });
+            bands.push({ weight: 100, node: c });
+        });
+        return colSplit(bands);
+    };
+    const secFont = Math.round(H * 0.028);
+    const stack = rowSplit([
+        { weight: hHeader, node: EMPTY }, // header lockup drawn by overlay
+        { weight: Math.round(H * 0.03), node: EMPTY },
+        { weight: Math.round(H * 0.028), node: text(presetLabel(mode).toUpperCase(), Math.round(H * 0.022), t.eyebrow, "left", "bottom") },
+        { weight: Math.round(H * 0.11), node: text("Theme Tokens", Math.round(H * 0.075), t.textPrimary, "left", "middle") },
+        { weight: Math.round(H * 0.045), node: EMPTY },
+        { weight: Math.round(H * 0.035), node: text("Data · categorical", secFont, t.textPrimary, "left", "middle") },
+        { weight: Math.round(H * 0.28), node: rowOf(data.map((s) => swatchCol(s, 5))) },
+        { weight: Math.round(H * 0.05), node: EMPTY },
+        { weight: Math.round(H * 0.035), node: text("Semantic", secFont, t.textPrimary, "left", "middle") },
+        { weight: Math.round(H * 0.2), node: rowOf(sem.map((s) => swatchCol(s, 3))) },
+    ]);
+    const withMargins = rowSplit([
+        { weight: marginY, node: EMPTY },
+        { weight: H - 2 * marginY, node: colSplit([{ weight: marginX, node: EMPTY }, { weight: W - 2 * marginX, node: stack }, { weight: marginX, node: EMPTY }]) },
+        { weight: marginY, node: EMPTY },
+    ]);
+    return overlay([withMargins, headerOverlay(t, W, H, marginX, marginY, hHeader, Math.round(H * 0.03), "left")]);
+}
+// ── Tall (portrait) — swatches stacked as list rows ─────────────────────────
+function tall(t, W, H, mode) {
+    const marginX = Math.round(W * 0.06);
+    const marginY = Math.round(H * 0.04);
+    const hHeader = Math.round(Math.min(W, H) * 0.11);
+    const nameFont = Math.max(12, Math.round(W * 0.032));
+    const hexFont = Math.max(10, Math.round(W * 0.026));
+    const gutter = Math.round(H * 0.008);
+    const { data, sem } = collect(t);
+    // Each swatch = a row: color block (left) + name/hex (right).
+    const swatchRow = (s) => colSplit([
+        { weight: 3, node: block(s.hex, t, s.bordered) },
+        { weight: 1, node: EMPTY },
+        { weight: 7, node: labelPair(s.name, s.hex, t, nameFont, hexFont, "left", "middle") },
+    ]);
+    const listOf = (cells) => {
+        const bands = [];
+        cells.forEach((c, i) => {
+            if (i > 0)
+                bands.push({ weight: gutter, node: EMPTY });
+            bands.push({ weight: 100, node: c });
+        });
+        return rowSplit(bands);
+    };
+    const secFont = Math.round(W * 0.04);
+    const stack = rowSplit([
+        { weight: hHeader, node: EMPTY }, // header lockup drawn by overlay
+        { weight: Math.round(H * 0.018), node: EMPTY },
+        { weight: Math.round(H * 0.024), node: text(presetLabel(mode).toUpperCase(), Math.round(W * 0.03), t.eyebrow, "center", "bottom") },
+        { weight: Math.round(H * 0.07), node: text("Theme Tokens", Math.round(W * 0.09), t.textPrimary, "center", "middle") },
+        { weight: Math.round(H * 0.03), node: EMPTY },
+        { weight: Math.round(H * 0.03), node: text("Data · categorical", secFont, t.textPrimary, "left", "middle") },
+        { weight: Math.round(H * 0.32), node: listOf(data.map(swatchRow)) },
+        { weight: Math.round(H * 0.03), node: EMPTY },
+        { weight: Math.round(H * 0.03), node: text("Semantic", secFont, t.textPrimary, "left", "middle") },
+        { weight: Math.round(H * 0.37), node: listOf(sem.map(swatchRow)) },
+    ]);
+    const withMargins = rowSplit([
+        { weight: marginY, node: EMPTY },
+        { weight: H - 2 * marginY, node: colSplit([{ weight: marginX, node: EMPTY }, { weight: W - 2 * marginX, node: stack }, { weight: marginX, node: EMPTY }]) },
+        { weight: marginY, node: EMPTY },
+    ]);
+    return overlay([withMargins, headerOverlay(t, W, H, marginX, marginY, hHeader, Math.round(W * 0.05), "center")]);
+}
+/** Build the Theme-Tokens sheet node for a `W×H` canvas (aspect-adaptive). */
+function buildTokenSheet(t, W, H, mode) {
+    return H > W * 1.1 ? tall(t, W, H, mode) : wide(t, W, H, mode);
+}

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

@@ -0,0 +1 @@
+export * from "./page-skeleton/v1";

package/dist/m0saic/web/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./page-skeleton/v1"), exports);

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

@@ -0,0 +1 @@
+export declare const PAGE_SKELETON_CAPTURE_SNIPPET: string;