@m0saic/templates 0.2.0

package/dist/m0saic/charts/line-chart/v1/chrome-spec.js

@@ -0,0 +1,208 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/charts/line-chart — chrome spec (the REAL-geometry plan)
+ * ============================================================================
+ *
+ * Pure: turns the projected model + resolved axis/title/legend config into a
+ * DECLARATIVE plan of frame REGIONS (header bands, y-gutter tick labels,
+ * x-gutter category labels, gridlines, axis lines). chrome.ts encodes this plan
+ * as REAL m0 geometry (weightedSplit cells + the grid primitive) — NOT a stack
+ * of full-canvas drawtext/mask overlays.
+ *
+ * This file is "JS pixel-math → region intent"; chrome.ts is "intent → m0 DSL".
+ * See the internal rects-not-drawtext-real-geometry notes.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildChromeSpec = buildChromeSpec;
+const template_utils_1 = require("@m0saic/template-utils");
+const scale_1 = require("../../_shared/scale");
+const format_1 = require("./format");
+/** vAlign for the i-th of n stacked labels so edges hug the gridline. */
+function vAlignFor(i, n) {
+    if (n <= 1)
+        return "middle";
+    if (i === 0)
+        return "top";
+    if (i === n - 1)
+        return "bottom";
+    return "middle";
+}
+/** hAlign for the i-th of n side-by-side labels so edge labels hug the plot edge. */
+function hAlignFor(i, n) {
+    if (n <= 1)
+        return "center";
+    if (i === 0)
+        return "left";
+    if (i === n - 1)
+        return "right";
+    return "center";
+}
+/** Width-cap a font so `text` fits `maxPx` at the CLI's glyph metrics
+ *  (script-aware em units; the app's fit:contain shrinks, the CLI CLIPS —
+ *  the cap closes that gap). Binds only on overflow; ASCII-in-slot renders
+ *  byte-identical. */
+function capW(px, text, maxPx, min, em = 0.62) {
+    return Math.max(min, Math.min(px, Math.floor(maxPx / (Math.max(1, (0, template_utils_1.textEmUnits)(text)) * em))));
+}
+/** Fit-first last resort: when the min-font floor still overflows the slot,
+ *  ellipsize to the units that fit (never clip). No-op when the text fits. */
+function fitTo(text, size, maxPx, em = 0.62) {
+    const maxUnits = maxPx / (em * size);
+    if ((0, template_utils_1.textEmUnits)(text) <= maxUnits + 0.5)
+        return text;
+    return (0, template_utils_1.fitEmUnits)(text, Math.max(1, Math.floor(maxUnits)));
+}
+function buildChromeSpec(model, frame, o) {
+    var _a, _b, _c;
+    const { width: W, height: H } = model.layout;
+    // ---- header bands (title / subtitle / legend), present-only ----
+    const bands = [];
+    let title;
+    let subtitle;
+    let legend;
+    if (o.title) {
+        bands.push({ kind: "title", weight: 46 });
+        // 0.66em: the title renders bold-ish and mixed-case (wider than body text).
+        const tSize = capW(o.titleSize, o.title, W * 0.94, 11, 0.66);
+        title = { text: fitTo(o.title, tSize, W * 0.94, 0.66), size: tSize, color: o.titleColor, hAlign: o.titleAlign, vAlign: "middle", weight: 700, binding: { propKey: "titles.title" } };
+    }
+    if (o.subtitle) {
+        bands.push({ kind: "subtitle", weight: 28 });
+        const sSize = capW(13, o.subtitle, W * 0.94, 9);
+        subtitle = { text: fitTo(o.subtitle, sSize, W * 0.94), size: sSize, color: o.subtitleColor, hAlign: o.titleAlign, vAlign: "middle", binding: { propKey: "titles.subtitle" } };
+    }
+    let footer;
+    if (o.legend.show && model.series.length > 0) {
+        // Each legend label binds `seriesLabels[i]` (an absent prop shows the
+        // derived "Series N" — the rect is the handle to name it).
+        const entries = model.series.map((s, i) => {
+            var _a, _b;
+            return ({
+                swatch: ((_b = (_a = o.series[i]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : s.color),
+                label: { text: s.name, size: o.legend.fontSize, color: o.legend.color, hAlign: "left", vAlign: "middle", binding: { propKey: "seriesLabels", index: i } },
+            });
+        });
+        if (o.legend.position === "bottom") {
+            footer = { entries, bandPx: Math.max(16, (_a = o.legendBandPx) !== null && _a !== void 0 ? _a : 36) };
+        }
+        else {
+            bands.push({ kind: "legend", weight: 40 });
+            legend = { entries };
+        }
+    }
+    // ---- y tick labels (top→bottom: ticks are emitted low→high, so reverse) ----
+    const yTicks = [];
+    if (o.yAxis.showLabels) {
+        const ticks = model.scale.ticks;
+        // ticks[] runs min→max; gutter cells run top→bottom = max→min, so reverse.
+        const ordered = [...ticks].reverse();
+        const texts = ordered.map((v) => (0, format_1.formatAxisValue)(v, o.yAxis.format, o.yAxis.decimals, model.scale.max, o.yAxis.prefix, o.yAxis.suffix));
+        // One shared cap from the longest label so the column stays uniform. The
+        // gutter auto-widens upstream when padding isn't explicit; this cap is the
+        // backstop for explicit (too-narrow) padding.
+        const longestY = texts.reduce((a, b) => ((0, template_utils_1.textEmUnits)(b) > (0, template_utils_1.textEmUnits)(a) ? b : a), "");
+        const gutterPx = Math.max(8, frame.plot.left * 0.88);
+        const yFont = capW(o.yAxis.fontSize, longestY, gutterPx, 8);
+        for (let i = 0; i < texts.length; i++) {
+            yTicks.push({
+                text: texts[i],
+                size: yFont,
+                color: o.yAxis.labelColor,
+                hAlign: "right",
+                vAlign: vAlignFor(i, ordered.length),
+            });
+        }
+    }
+    // ---- x category labels (left→right) ----
+    const xLabels = [];
+    if (o.xAxis.showLabels) {
+        const n = model.labels.length;
+        // Chart.js-style AUTOSKIP with WIDENED cells: when a label can't fit its
+        // half-band cell, show every k-th label and give each shown label a cell
+        // spanning the skipped span (blank filler cells hold the geometry). k keys
+        // to the EDGE half-cell (the binding constraint — edge labels get pitch/2),
+        // so shown labels keep their full font instead of shrinking to the floor.
+        const plotW = Math.max(1, frame.plot.right - frame.plot.left);
+        const pitch = n > 1 ? plotW / (n - 1) : plotW;
+        const longestX = model.labels.reduce((a, b) => ((0, template_utils_1.textEmUnits)(b !== null && b !== void 0 ? b : "") > (0, template_utils_1.textEmUnits)(a) ? b !== null && b !== void 0 ? b : "" : a), "");
+        const needPx = Math.max(1, (0, template_utils_1.textEmUnits)(longestX)) * 0.62 * o.xAxis.fontSize + 6;
+        const skip = Math.max(1, Math.ceil(needPx / Math.max(1, pitch / 2)));
+        const xFont = capW(o.xAxis.fontSize, longestX, Math.max(8, (pitch * skip) / 2 - 4), 8);
+        // Every SHOWN category label binds `labels[i]` (autoskip fillers span
+        // several skipped labels, so they name no index and stay unbound).
+        if (skip === 1 || n <= 2) {
+            for (let i = 0; i < n; i++) {
+                xLabels.push({
+                    text: (_b = model.labels[i]) !== null && _b !== void 0 ? _b : "",
+                    size: xFont,
+                    color: o.xAxis.labelColor,
+                    hAlign: hAlignFor(i, n),
+                    vAlign: "top",
+                    binding: { propKey: "labels", index: i },
+                });
+            }
+        }
+        else {
+            // Half-unit axis of length T = 2(n-1); shown label i owns [2i-k, 2i+k]
+            // clamped to the axis; gaps become blank cells. Tail: always show the
+            // last label, dropping a prior shown one that would collide.
+            const T = 2 * (n - 1);
+            const shownIdx = [];
+            for (let i = 0; i < n; i += skip)
+                shownIdx.push(i);
+            if (shownIdx[shownIdx.length - 1] !== n - 1) {
+                if (n - 1 - shownIdx[shownIdx.length - 1] < skip)
+                    shownIdx.pop();
+                shownIdx.push(n - 1);
+            }
+            let cursor = 0;
+            for (const i of shownIdx) {
+                const lo = Math.max(cursor, 2 * i - skip);
+                const hi = Math.min(T, 2 * i + skip);
+                if (lo > cursor)
+                    xLabels.push({ text: "", size: xFont, color: o.xAxis.labelColor, hAlign: "center", vAlign: "top", cellWeight: lo - cursor });
+                xLabels.push({
+                    text: (_c = model.labels[i]) !== null && _c !== void 0 ? _c : "",
+                    size: xFont,
+                    color: o.xAxis.labelColor,
+                    hAlign: hAlignFor(i, n),
+                    vAlign: "top",
+                    cellWeight: Math.max(1, hi - lo),
+                    binding: { propKey: "labels", index: i },
+                });
+                cursor = hi;
+            }
+            if (cursor < T)
+                xLabels.push({ text: "", size: xFont, color: o.xAxis.labelColor, hAlign: "center", vAlign: "top", cellWeight: T - cursor });
+        }
+    }
+    // ---- gridlines (drawn inside the plot cell via the grid primitive) ----
+    const grids = [];
+    if (o.yAxis.showGrid && model.scale.ticks.length > 1) {
+        grids.push({ direction: "horizontal", count: model.scale.ticks.length - 1, color: o.yAxis.gridColor, opacity: o.yAxis.gridOpacity });
+    }
+    if (o.xAxis.showGrid && model.labels.length > 1) {
+        grids.push({ direction: "vertical", count: model.labels.length - 1, color: o.xAxis.gridColor, opacity: o.xAxis.gridOpacity });
+    }
+    return {
+        width: W,
+        height: H,
+        frame,
+        header: { bands, title, subtitle, legend },
+        footer,
+        yTicks,
+        xLabels,
+        grids,
+        axis: { y: o.yAxis.show ? o.yAxis.color : undefined, x: o.xAxis.show ? o.xAxis.color : undefined },
+        tickMarks: {
+            y: o.yAxis.showTicks ? { color: o.yAxis.tickColor, length: Math.max(1, o.yAxis.tickLength) } : undefined,
+            x: o.xAxis.showTicks ? { color: o.xAxis.tickColor, length: Math.max(1, o.xAxis.tickLength) } : undefined,
+        },
+    };
+}
+// `project` re-exported usage kept implicit; the model already carries projected
+// points. (Tick Y positions are even fractions, so the gutter half-band split
+// in chrome.ts aligns labels to gridlines without per-pixel projection here.)
+void scale_1.project;

package/dist/m0saic/charts/line-chart/v1/chrome.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/line-chart/internal/chrome/v1
+ * ============================================================================
+ *
+ * Renders the chart chrome as REAL m0 GEOMETRY — not a stack of full-canvas
+ * drawtext/mask overlays. The ChromeSpec plan becomes a weightedSplit frame:
+ *
+ *     row: header(title/subtitle/legend) | body | x-gutter
+ *     body(col): y-gutter(tick labels) | plot(gridlines + axis lines) | margin
+ *
+ * Each label is a text source that FILLS ITS OWN CELL (aligned in-cell); each
+ * gridline set is the first-party `@m0saic/primitives/grid/v2` (composable
+ * proportional-overlay grid) nested into the plot cell. The only thing NOT
+ * expressed as m0 geometry is the animated line
+ * (the parent overlays it). See
+ * the internal rects-not-drawtext-real-geometry notes.
+ *
+ * Weights use a bounded basis (≤200 cells/split) to stay under the engine's
+ * split-rounding cap; the plot rect is derived from those weights in frame.ts
+ * so the data layer aligns to the geometry at every resolution.
+ * ============================================================================
+ */
+import type { MosaicTemplate } from "@m0saic/types";
+import type { ChromeSpec } from "./chrome-spec";
+export declare const CHROME_TEMPLATE_ID: import("@m0saic/types").TemplateId;
+export type ChromeProps = {
+    spec: ChromeSpec;
+};
+export declare const Chrome: MosaicTemplate<ChromeProps>;

package/dist/m0saic/charts/line-chart/v1/chrome.js

@@ -0,0 +1,335 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chrome = exports.CHROME_TEMPLATE_ID = void 0;
+const types_1 = require("@m0saic/types");
+const template_utils_1 = require("@m0saic/template-utils");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+exports.CHROME_TEMPLATE_ID = (0, types_1.asTemplateId)("@m0saic/charts/line-chart/internal/chrome/v1");
+const GRID_TEMPLATE_ID = "@m0saic/primitives/grid/v2";
+function leaf(source) {
+    return { m0: "1", sources: [source] };
+}
+function split(axis, cells) {
+    const live = cells.filter((c) => c.weight > 0);
+    if (live.length === 0)
+        return undefined;
+    // A single live cell with no siblings collapses to that cell (avoid 1(...) noise).
+    if (live.length === 1 && live[0].node)
+        return live[0].node;
+    const weights = live.map((c) => Math.max(1, Math.round(c.weight)));
+    const claimants = live.map((c) => (c.node ? String(c.node.m0) : "-"));
+    // Basis on the 5-smooth lattice (latticeWeights, @m0saic/template-utils): a
+    // rough pixel sum (a 57 px gutter, a 101-unit rail) drifts ≤ 1 px onto the
+    // nearest smooth basis, patterns keep their structure; smooth, tiny and
+    // equal-weight splits keep theirs.
+    const m0 = String((0, dsl_stdlib_1.weightedSplit)((0, template_utils_1.latticeWeights)(weights), axis, { claimants }));
+    const sources = live.flatMap((c) => (c.node ? c.node.sources : []));
+    return { m0, sources };
+}
+/** Stack nodes as nested overlays: base{next{…}}. */
+function overlay(nodes) {
+    if (nodes.length === 0)
+        return undefined;
+    if (nodes.length === 1)
+        return nodes[0];
+    let inner = "";
+    for (let i = nodes.length - 1; i >= 0; i--)
+        inner = inner ? `${nodes[i].m0}{${inner}}` : nodes[i].m0;
+    return { m0: inner, sources: nodes.flatMap((n) => n.sources) };
+}
+function alignH(a) {
+    return a === "left" ? "left" : a === "right" ? "right" : "center";
+}
+function alignV(v) {
+    return v;
+}
+function textLeaf(t, padding, label) {
+    const src = {
+        type: "text",
+        visual: { backgroundColor: "black@0" },
+        layers: [
+            {
+                content: { kind: "literal", text: t.text || " " },
+                style: { fontSize: t.size, fontColor: t.color },
+                placement: { fit: "contain", hAlign: alignH(t.hAlign), vAlign: alignV(t.vAlign), padding },
+            },
+        ],
+    };
+    // Blank (autoskipped) labels stay untagged so the layout contract only
+    // judges real text.
+    const tagged = label && t.text.trim() ? (0, template_utils_1.tag)(src, label) : src;
+    // The Make binding rides the spec (the PARENT names its prop); unlike the
+    // tag it applies even to blank text, so the rect is a handle to ADD.
+    return leaf(t.binding ? (0, template_utils_1.bindProp)(tagged, t.binding.propKey, t.binding.index) : tagged);
+}
+/** A short horizontal legend swatch, centered in its cell (≈30% band height). */
+function swatchLeaf(color) {
+    const src = {
+        type: "lavfi",
+        color,
+        fitMode: "content",
+        size: { wExpr: "TW", hExpr: "max(2, TH*0.3)" },
+        placement: { fit: "contain", hAlign: "center", vAlign: "middle" },
+    };
+    return leaf(src);
+}
+/** A 1px-ish axis line strip at one edge of the plot cell. */
+function axisLineLeaf(color, edge) {
+    const t = 0.004;
+    const horizontal = edge === "bottom";
+    const src = {
+        type: "lavfi",
+        color,
+        fitMode: "content",
+        size: horizontal ? { wExpr: "TW", hExpr: `max(1, TH*${t})` } : { wExpr: `max(1, TW*${t})`, hExpr: "TH" },
+        placement: { fit: "contain", hAlign: edge === "left" ? "left" : "center", vAlign: edge === "bottom" ? "bottom" : "middle" },
+    };
+    return leaf(src);
+}
+// Tick marks are tiny colored rects rendered as REAL GEOMETRY: a short `grid`
+// (horizontal for y, vertical for x) nested in a narrow rail cell carved beside
+// the labels. The grid's thin line-cells ARE the ticks; the rail constrains
+// their length. (Built inline in render() — it needs renderGrid + child refs.)
+/** Half-band weights so N labels center on evenly-spaced gridlines, edges hugging. */
+function halfBandWeights(n) {
+    if (n <= 1)
+        return [1];
+    const w = [1];
+    for (let i = 1; i < n - 1; i++)
+        w.push(2);
+    w.push(1);
+    return w;
+}
+// ---------------------------------------------------------------------------
+// Template
+// ---------------------------------------------------------------------------
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    spec: { type: "json", required: true, description: "Declarative chrome plan (frame weights + labels + gridlines)." },
+});
+exports.Chrome = {
+    id: exports.CHROME_TEMPLATE_ID,
+    label: "Line Chart — Chrome (internal)",
+    version: 1,
+    internal: true,
+    description: "Internal: real-geometry chart frame (weightedSplit cells + grid primitive + in-cell text).",
+    capabilities: { tier: "core" },
+    tags: ["data-viz", "line-chart", "internal", "chrome"],
+    propsSchema,
+    defaultProps: { spec: undefined },
+    async render(props, ctx) {
+        const spec = props.spec;
+        if (!spec) {
+            // Internal template: `spec` is injected by the line-chart parent.
+            // Invoked standalone (no spec) → render the usage-card placeholder
+            // instead of crashing, same pattern as screencap_grid.
+            return (0, template_utils_1.makeErrorMosaic)("spec is required — injected by the line-chart parent template", {
+                title: `${this.id} props`,
+                width: Math.max(1, Math.round(ctx.target.width)),
+                height: Math.max(1, Math.round(ctx.target.height)),
+            });
+        }
+        const { width: W, height: H, frame } = spec;
+        const children = {};
+        // ── plot cell content: gridlines (grid primitive) + axis lines ──
+        const plotW = Math.max(1, Math.round(frame.plot.right - frame.plot.left));
+        const plotH = Math.max(1, Math.round(frame.plot.bottom - frame.plot.top));
+        const plotLayers = [];
+        let gridIndex = 0;
+        for (const g of spec.grids) {
+            const refId = `grid${gridIndex++}`;
+            children[refId] = await renderGrid(g, plotW, plotH, ctx);
+            plotLayers.push(leaf({ type: "mosaic", ref: refId }));
+        }
+        if (spec.axis.y)
+            plotLayers.push(axisLineLeaf(spec.axis.y, "left"));
+        if (spec.axis.x)
+            plotLayers.push(axisLineLeaf(spec.axis.x, "bottom"));
+        const plotNode = overlay(plotLayers);
+        // ── y-gutter: tick labels (top→bottom) on half-band cells. With ticks on,
+        //    carve a narrow rail at the plot edge holding a short horizontal grid —
+        //    its thin line-cells are the tick rects, aligned to the same fractions. ──
+        const yTick = spec.tickMarks.y;
+        const labelCol = spec.yTicks.length > 0
+            ? split("row", spec.yTicks.map((t, i) => ({
+                weight: halfBandWeights(spec.yTicks.length)[i],
+                node: textLeaf(t, { right: yTick ? 0.08 : 0.16, left: 0.04 }, "y-tick"),
+            })))
+            : undefined;
+        let yGutterNode = labelCol;
+        if (yTick && labelCol && spec.yTicks.length > 1) {
+            children["tickGridY"] = await renderGrid({ direction: "horizontal", count: spec.yTicks.length - 1, color: yTick.color, opacity: 1 }, Math.max(1, Math.round(yTick.length)), plotH, ctx);
+            const railW = Math.max(1, Math.round((yTick.length / Math.max(1, frame.plot.left)) * 100));
+            yGutterNode = split("col", [
+                { weight: 100 - railW, node: labelCol },
+                { weight: railW, node: leaf({ type: "mosaic", ref: "tickGridY" }) },
+            ]);
+        }
+        // ── body row: y-gutter | plot | right-margin ──
+        const bodyNode = split("col", [
+            { weight: frame.bodyCol[0], node: yGutterNode },
+            { weight: frame.bodyCol[1], node: plotNode },
+            { weight: frame.bodyCol[2] }, // right margin (null)
+        ]);
+        // ── header: title / subtitle / legend bands (centered full-width) ──
+        const headerCells = spec.header.bands.map((b) => {
+            if (b.kind === "title" && spec.header.title)
+                return { weight: b.weight, node: textLeaf(spec.header.title, { left: 0.02, right: 0.02 }, "chart-title") };
+            if (b.kind === "subtitle" && spec.header.subtitle)
+                return { weight: b.weight, node: textLeaf(spec.header.subtitle, { left: 0.02, right: 0.02 }, "chart-subtitle") };
+            if (b.kind === "legend" && spec.header.legend)
+                return { weight: b.weight, node: buildLegend(spec.header.legend.entries, W) };
+            return { weight: b.weight };
+        });
+        const headerNode = headerCells.length > 0 ? split("row", headerCells) : undefined;
+        // ── x-gutter: category labels under the plot (offset by the y-gutter width),
+        //    each optionally overlaid with a tick-mark stub at the plot edge ──
+        const xTick = spec.tickMarks.x;
+        // Autoskipped rows carry explicit cellWeights (wide label cells + blank
+        // fillers); dense rows fall back to the half-band pattern.
+        const anyCellWeight = spec.xLabels.some((t) => t.cellWeight != null);
+        const labelRow = spec.xLabels.length > 0
+            ? split("col", spec.xLabels.map((t, i) => {
+                var _a;
+                return ({
+                    weight: (_a = t.cellWeight) !== null && _a !== void 0 ? _a : halfBandWeights(spec.xLabels.length)[i],
+                    node: textLeaf(t, { top: xTick ? 0.1 : 0.18, left: 0.02, right: 0.02 }, "x-label"),
+                });
+            }))
+            : undefined;
+        void anyCellWeight;
+        let xContent = labelRow;
+        if (xTick && labelRow && spec.xLabels.length > 1) {
+            children["tickGridX"] = await renderGrid({ direction: "vertical", count: spec.xLabels.length - 1, color: xTick.color, opacity: 1 }, plotW, Math.max(1, Math.round(xTick.length)), ctx);
+            const railH = Math.max(1, Math.round((xTick.length / Math.max(1, H - frame.plot.bottom)) * 100));
+            xContent = split("row", [
+                { weight: railH, node: leaf({ type: "mosaic", ref: "tickGridX" }) },
+                { weight: 100 - railH, node: labelRow },
+            ]);
+        }
+        let xGutterNode = xContent
+            ? split("col", [
+                { weight: frame.bodyCol[0] }, // under the y-gutter (null)
+                { weight: frame.bodyCol[1], node: xContent },
+                { weight: frame.bodyCol[2] }, // right margin (null)
+            ])
+            : undefined;
+        // Bottom-positioned legend: a full-width footer band under the x labels.
+        // The parent widened pad.bottom by footer.bandPx, so the x-gutter row has
+        // the room; split it [labels | legend] in px weights.
+        if (spec.footer) {
+            const gutterPx = Math.max(1, Math.round(H - frame.plot.bottom));
+            const bandPx = Math.min(spec.footer.bandPx, Math.max(1, gutterPx - 1));
+            const legendRow = buildLegend(spec.footer.entries, W);
+            if (legendRow) {
+                xGutterNode = split("row", [
+                    { weight: Math.max(1, gutterPx - bandPx), node: xGutterNode },
+                    { weight: bandPx, node: legendRow },
+                ]);
+            }
+        }
+        // ── root row: header | body | x-gutter ──
+        const root = split("row", [
+            { weight: frame.rootRow[0], node: headerNode },
+            { weight: frame.rootRow[1], node: bodyNode },
+            { weight: frame.rootRow[2], node: xGutterNode },
+        ]);
+        if (!root) {
+            return {
+                kind: "mosaic_document",
+                version: 1,
+                assets: {},
+                m0: "1",
+                sources: [(0, template_utils_1.transparentSlot)()],
+                fps: ctx.target.fps,
+                durationMs: ctx.target.durationMs,
+            };
+        }
+        return {
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: root.m0,
+            sources: root.sources,
+            children: Object.keys(children).length ? children : undefined,
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+        };
+    },
+};
+// ---------------------------------------------------------------------------
+// Helpers needing async / W
+// ---------------------------------------------------------------------------
+async function renderGrid(g, plotW, plotH, ctx) {
+    return (0, template_utils_1.renderNestedTemplate)(GRID_TEMPLATE_ID, {
+        show: true,
+        direction: g.direction,
+        count: g.count,
+        excludeEdges: false, // chart convention: lines at every tick incl. min/max
+        origin: g.direction === "horizontal" ? "bottom" : "left",
+        color: g.color,
+        opacity: g.opacity,
+    }, ctx, { slot: { width: plotW, height: plotH } });
+}
+/** Centered legend row: spacer | (swatch label){gap…} | spacer, basis ≈ 100.
+ *  Label widths are SCRIPT-AWARE (textEmUnits — a flat .length under-sized
+ *  Cyrillic labels ~40% and the CLI clipped them). When the row would overflow
+ *  the basis, the label font steps down (fit-first) so every entry still fits. */
+function buildLegend(entries, W) {
+    var _a, _b;
+    if (entries.length === 0)
+        return undefined;
+    const pctW = (px) => Math.max(1, Math.round((px / W) * 100));
+    const SWATCH = pctW(24);
+    const GAP = pctW(8); // swatch→label
+    const SEP = pctW(26); // between entries
+    const fixed = SWATCH * entries.length + GAP * entries.length + SEP * (entries.length - 1);
+    // Fit-first: at the requested font, does the row fit the 100 basis? If not,
+    // shrink the label font toward the floor so the text widths scale down.
+    // ceil + 0.62em (the CLI checker's metric) + headroom: round() at 1%-of-W
+    // granularity shaved narrow-canvas cells under the text width.
+    const labelPct = (text, size) => Math.max(3, Math.ceil(((Math.max(1, (0, template_utils_1.textEmUnits)(text)) * 0.62 * size * 1.2 + 6) / W) * 100));
+    const baseFont = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.label.size) !== null && _b !== void 0 ? _b : 13;
+    let font = baseFont;
+    for (let pass = 0; pass < 2; pass++) {
+        const content = fixed + entries.reduce((a, e) => a + labelPct(e.label.text, font), 0);
+        if (content <= 100)
+            break;
+        const textPct = content - fixed;
+        font = Math.max(8, Math.floor(font * Math.max(0.35, (100 - fixed - entries.length) / Math.max(1, textPct))));
+    }
+    // Fit-first last resort: past the font floor the row can still overflow the
+    // basis — the engine then normalizes every cell down by 100/content, so
+    // ellipsize each label to its SCALED cell (never clip).
+    const contentAtFloor = fixed + entries.reduce((a, e) => a + labelPct(e.label.text, font), 0);
+    const squeeze = contentAtFloor > 100 ? 100 / contentAtFloor : 1;
+    const cells = [];
+    let content = 0;
+    const entryCells = [];
+    for (let i = 0; i < entries.length; i++) {
+        const e = entries[i];
+        const labelW = labelPct(e.label.text, font);
+        // 0.85 safety: the engine's weight rounding squeezes a touch further than
+        // the ideal 100/content ratio predicts.
+        const usablePx = ((labelW * squeeze) / 100) * W - 8;
+        const text = squeeze < 1 ? (0, template_utils_1.fitEmUnits)(e.label.text, Math.max(1, Math.floor((usablePx * 0.85) / (0.62 * font)))) : e.label.text;
+        if (i > 0) {
+            entryCells.push({ weight: SEP });
+            content += SEP;
+        }
+        entryCells.push({ weight: SWATCH, node: swatchLeaf(e.swatch) });
+        entryCells.push({ weight: GAP });
+        entryCells.push({ weight: labelW, node: textLeaf({ ...e.label, text, size: font, hAlign: "left" }, {}, "legend-label") });
+        content += SWATCH + GAP + labelW;
+    }
+    const spacer = Math.max(1, Math.round((100 - content) / 2));
+    cells.push({ weight: spacer });
+    cells.push(...entryCells);
+    cells.push({ weight: spacer });
+    return split("col", cells);
+}
+/** Script-aware text width estimate (avg Latin glyph ≈ 0.55em; wide scripts
+ *  scale by their measured multipliers via textEmUnits). */
+function estTextW(s, size) {
+    return Math.max(1, (0, template_utils_1.textEmUnits)(s)) * size * 0.55;
+}
+(0, template_utils_1.registerTemplate)(exports.Chrome);

package/dist/m0saic/charts/line-chart/v1/defaults.d.ts

@@ -0,0 +1,65 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/line-chart — Defaults + Canonical Tokens + Resolvers
+ * ============================================================================
+ *
+ * Central home for default props, per-preset design tokens, and the
+ * union→resolved helpers the public template uses. No rendering, no FFmpeg
+ * math, no template registration here.
+ *
+ * The token sets are LIGHT-first: `neutral` reproduces the default Chart.js
+ * line chart (white card, light grid, dark text, blue line).
+ * ============================================================================
+ */
+import type { MosaicColor } from "@m0saic/types";
+import type { AnimConfig, AxisConfigInput, BorderConfig, LegendConfig, LineChartPreset, Padding, PointBorder, ResolvedAxis, ResolvedBorder, ResolvedLegend, ResolvedPadding, ResolvedValueLabels, ValueLabelsConfig } from "./types";
+export type LineChartPresetTokens = {
+    /** Page/canvas color behind the card. */
+    bg: MosaicColor;
+    /** Card surface color (the plot ground). */
+    card: MosaicColor;
+    /** Gridline color. */
+    grid: MosaicColor;
+    /** Axis line + tick color. */
+    axis: MosaicColor;
+    /** Tick-label / subtitle text color. */
+    axisText: MosaicColor;
+    /** Title color. */
+    title: MosaicColor;
+    /** Default first-series line color. */
+    line: MosaicColor;
+    /** Card inner-stroke color + alpha. */
+    border: MosaicColor;
+    borderAlpha: number;
+};
+export declare const PRESET_TOKENS: Record<LineChartPreset, LineChartPresetTokens>;
+/** Multi-series default palette (cycled in series order). */
+export declare const SERIES_PALETTE: MosaicColor[];
+export declare const DEFAULT_PRESET: LineChartPreset;
+export declare const DEFAULT_CORNER_RADIUS = 0.04;
+/**
+ * Default plot insets (px, at 1280×720) — match the approved sandbox frame:
+ *   y-gutter 72 | plot | x-gutter 48 ; header 120 top.
+ */
+export declare const DEFAULT_PADDING: ResolvedPadding;
+export declare const DEFAULT_STROKE_WIDTH = 2;
+export declare const DEFAULT_POINT_RADIUS = 3;
+export declare const DEFAULT_ANIM: AnimConfig;
+export declare const DEFAULT_VALUE_LABELS: ResolvedValueLabels;
+export declare function resolvePadding(p: Padding | undefined): ResolvedPadding;
+export declare function resolveBorder(b: BorderConfig | undefined, preset: LineChartPreset): ResolvedBorder;
+export declare function resolveLegend(l: LegendConfig | undefined, preset: LineChartPreset): ResolvedLegend;
+export declare function resolveValueLabels(v: ValueLabelsConfig | undefined): ResolvedValueLabels;
+export declare function resolveAnim(anim: AnimConfig | undefined, reduceMotion?: boolean): AnimConfig;
+/**
+ * Resolve a public per-axis group into a fully-resolved ResolvedAxis. `which`
+ * selects sensible per-axis defaults (the y axis shows gridlines + labels; the
+ * x axis shows category labels but no vertical grid by default — Chart.js look).
+ */
+export declare function resolveAxis(cfg: AxisConfigInput | undefined, which: "x" | "y", preset: LineChartPreset): ResolvedAxis;
+/** First-series line color when nothing explicit was passed. */
+export declare function presetLineColor(preset: LineChartPreset): MosaicColor;
+export declare function resolvePointBorder(pb: PointBorder | undefined): {
+    color?: MosaicColor;
+    width: number;
+};