@m0saic/templates 0.2.0

package/dist/m0saic/alpine/line-chart/v1/line-chart.js

@@ -0,0 +1,408 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlpineLineChart = void 0;
+const types_1 = require("@m0saic/types");
+const template_utils_1 = require("@m0saic/template-utils");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const geometry_1 = require("../../../charts/line-chart/v1/geometry");
+const alpine_card_1 = require("../../_shared/alpine-card");
+const alpine_theme_1 = require("../../_shared/alpine-theme");
+const alpine_anim_1 = require("../../_shared/alpine-anim");
+const DEFAULT_PRESET = "light";
+const DEFAULT_CURVE = "smooth";
+const DEFAULT_GRID = { show: true, count: 4 };
+const DEFAULT_AREA = { show: true, opacity: 0.14 };
+const DEFAULT_POINTS = { show: true };
+const DEFAULT_ANIM = { introFrac: 0.7, ease: "easeOut", reduceMotion: false };
+// Full-canvas tight-cell packing (mirrors the donut).
+const SNAP_PX = 4;
+const EDGE_PAD = 1.5;
+function niceAxis(min, max, targetTicks) {
+    if (max === min) {
+        const pad = Math.abs(min) > 0 ? Math.abs(min) * 0.1 : 1;
+        return { min: min - pad, max: max + pad, step: pad, ticks: [min - pad, min, max + pad] };
+    }
+    const range = Math.abs(max - min);
+    const rawStep = range / Math.max(1, targetTicks - 1);
+    const step = !Number.isFinite(rawStep) || rawStep <= 0 ? 1 : (0, dsl_stdlib_1.niceNum)(rawStep, [1, 2, 2.5, 5]);
+    const niceMin = Math.floor(min / step) * step;
+    const niceMax = Math.ceil(max / step) * step;
+    const ticks = [];
+    const eps = step * 1e-6;
+    for (let v = niceMin; v <= niceMax + eps; v += step)
+        ticks.push(Number(v.toFixed(6)));
+    return { min: niceMin, max: niceMax, step, ticks };
+}
+function formatCompact(n) {
+    const abs = Math.abs(n);
+    const sign = n < 0 ? "-" : "";
+    const trim = (s) => s.replace(/\.0+$/, "");
+    if (abs >= 1e9)
+        return sign + trim((abs / 1e9).toFixed(1)) + "B";
+    if (abs >= 1e6)
+        return sign + trim((abs / 1e6).toFixed(1)) + "M";
+    if (abs >= 1e3)
+        return sign + trim((abs / 1e3).toFixed(1)) + "K";
+    if (abs >= 100)
+        return sign + Math.round(abs).toString();
+    return sign + trim(abs.toFixed(abs < 10 ? 1 : 0));
+}
+const clampInt = (v, lo, hi) => Math.max(lo, Math.min(hi, Math.round(v)));
+function placePiece(W, H, bbox, importance, makeSource) {
+    const snapDown = (v) => Math.floor((v - EDGE_PAD) / SNAP_PX) * SNAP_PX;
+    const snapUp = (v) => Math.ceil((v + EDGE_PAD) / SNAP_PX) * SNAP_PX;
+    const x = clampInt(snapDown(bbox.minX), 0, W - 1);
+    const y = clampInt(snapDown(bbox.minY), 0, H - 1);
+    const x2 = clampInt(snapUp(bbox.maxX), x + SNAP_PX, W);
+    const y2 = clampInt(snapUp(bbox.maxY), y + SNAP_PX, H);
+    return { rect: { x, y, w: x2 - x, h: y2 - y, claimant: "F", importance }, source: makeSource(x2 - x, y2 - y, x, y) };
+}
+/** A masked color tile placed at its tight bbox; `localPath` is built in cell-local px. */
+function maskPiece(W, H, bbox, importance, color, localPath, opts = {}) {
+    // NOTE: makeColorTile honors only overlay/mask/placement/effects — opacity must
+    // ride on overlay.alpha, never `visual` (which it silently drops).
+    return placePiece(W, H, bbox, importance, (cw, ch, ox, oy) => (0, template_utils_1.makeColorTile)(color, {
+        mask: { kind: "inline-mask", localPath: localPath(ox, oy), bounds: { x: 0, y: 0, width: cw, height: ch } },
+        ...(opts.overlay ? { overlay: opts.overlay } : {}),
+    }));
+}
+/** Pack a piece list full-canvas and return its INDIVIDUAL layers (placeRects'
+ *  per-layer m0 is a single split, never a `{}` chain — so the caller can nest
+ *  layers from several packNode calls into one overlay without illegal chains).
+ *  Source order follows placeRects' frame order: per band (y asc), per rect (x asc). */
+function packLayers(W, H, pieces) {
+    if (pieces.length === 0)
+        return [];
+    const placed = (0, dsl_stdlib_1.placeRects)({ rootW: W, rootH: H, rects: pieces.map((p) => p.rect) });
+    return placed.layers.map((layer) => {
+        const ordered = [...layer.rectIndices].sort((a, b) => pieces[a].rect.y - pieces[b].rect.y || pieces[a].rect.x - pieces[b].rect.x);
+        return { m0: String(layer.m0), sources: ordered.map((i) => pieces[i].source) };
+    });
+}
+/** Nest a bottom→top list of (non-chained) layers into one overlay Node:
+ *  L0{L1{…{Ln}}}, sources concatenated in the same layer order (= frame order). */
+function chainLayers(layers) {
+    if (layers.length === 0)
+        return alpine_card_1.EMPTY;
+    let m0 = layers[layers.length - 1].m0;
+    for (let i = layers.length - 2; i >= 0; i--)
+        m0 = `${layers[i].m0}{${m0}}`;
+    return { m0, sources: layers.flatMap((l) => l.sources) };
+}
+function textBBox(cxp, cyp, text, font) {
+    // Generous cell so `textCell`'s fit:contain has room to lay the glyphs out
+    // crisply (too-tight cells rasterize small text as tofu).
+    const w = Math.max(font * 1.5, text.length * font * 0.78 + font);
+    const h = font * 1.7;
+    return { minX: cxp - w / 2, minY: cyp - h / 2, maxX: cxp + w / 2, maxY: cyp + h / 2 };
+}
+function textPiece(W, H, importance, cxp, cyp, text, font, color, hAlign, overlay) {
+    return placePiece(W, H, textBBox(cxp, cyp, text, font), importance, () => {
+        // Use the pack's proven text cell (fit:contain, transparent bg) — same helper
+        // the donut legend uses, so small labels render crisp, not as tofu.
+        const src = (0, alpine_card_1.textCell)(text, font, color, hAlign, "middle");
+        if (overlay)
+            src.overlay = overlay;
+        return src;
+    });
+}
+function unionBBox(boxes) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const b of boxes) {
+        minX = Math.min(minX, b.minX);
+        minY = Math.min(minY, b.minY);
+        maxX = Math.max(maxX, b.maxX);
+        maxY = Math.max(maxY, b.maxY);
+    }
+    return { minX, minY, maxX, maxY };
+}
+const r2 = (v) => Math.round(v * 100) / 100;
+function rectLocal(x, y, w, h) {
+    return `M ${r2(x)} ${r2(y)} L ${r2(x + w)} ${r2(y)} L ${r2(x + w)} ${r2(y + h)} L ${r2(x)} ${r2(y + h)} Z`;
+}
+// A circle as a many-sided POLYGON (M L … Z). The engine's mask rasterizer
+// renders SVG arcs (`markerPath(...,"circle")`) only on the static path; under a
+// temporal `overlay` it drops the arc and fills the bbox (a square). Polygon
+// masks survive overlays (the line/area prove it), so animated markers use this.
+function circlePolyLocal(cx, cy, r, sides = 28) {
+    let d = "";
+    for (let k = 0; k < sides; k++) {
+        const a = (k / sides) * Math.PI * 2;
+        const x = cx + Math.cos(a) * r;
+        const y = cy + Math.sin(a) * r;
+        d += `${k === 0 ? "M" : "L"} ${r2(x)} ${r2(y)} `;
+    }
+    return d + "Z";
+}
+// ---------------------------------------------------------------------------
+// Template
+// ---------------------------------------------------------------------------
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    // ── Primary props — flat, always visible up top (declaration order = display order). ──
+    values: { type: "number[]", required: true, description: "Numeric series driving the line (left→right).", meta: { constraints: { minItems: 1 }, control: { flavor: "numberList" }, ui: { label: "Values", order: 1 } } },
+    labels: { type: "string[]", required: false, description: "Category labels (index-aligned to values) along the x-axis.", meta: { ui: { label: "Category Labels", order: 2, primary: true } } },
+    title: { type: "string", required: false, description: "Card title.", meta: { control: { placeholder: "e.g., LINE CHART" }, ui: { label: "Title", order: 3 } } },
+    subtitle: { type: "string", required: false, description: "Card subtitle.", meta: { control: { placeholder: "e.g., Monthly Active Users" }, ui: { label: "Subtitle", order: 4 } } },
+    curve: { type: "string", required: false, description: "Interpolation between points.", meta: { constraints: { oneOf: ["smooth", "linear", "stepped"] }, ui: { label: "Curve", order: 5 } } },
+    preset: { type: "string", required: false, description: "Alpine theme variant.", meta: { constraints: { oneOf: ["light", "dark"] }, ui: { label: "Preset", order: 6 } } },
+    lineColor: { type: "string", required: false, description: "Line + marker color. Defaults to the resolved theme primary.", meta: { constraints: { isColor: true }, control: { placeholder: "theme primary", colorPicker: true, defaultColor: "#2563EB" }, ui: { label: "Line Color", order: 7 } } },
+    // ── Everything else grouped into collapsible sections. ──
+    grid: {
+        type: "group", required: false, description: "Gridlines + value ticks behind the line.",
+        meta: { ui: { label: "Grid", order: 8, collapsedByDefault: true } },
+        fields: { show: (0, alpine_anim_1.fBool)("Show", "Draw horizontal gridlines + value ticks."), count: (0, alpine_anim_1.fNum)("Tick count", "Number of horizontal gridlines/ticks.", { flavor: "slider", step: 1 }, { min: 2, max: 8 }) },
+    },
+    area: {
+        type: "group", required: false, description: "Soft area fill under the line.",
+        meta: { ui: { label: "Area", order: 9, collapsedByDefault: true } },
+        fields: { show: (0, alpine_anim_1.fBool)("Show", "Fill under the line."), opacity: (0, alpine_anim_1.fFrac)("Opacity", "Area fill opacity (0..1).") },
+    },
+    points: {
+        type: "group", required: false, description: "Point markers at each data vertex.",
+        meta: { ui: { label: "Points", order: 10, collapsedByDefault: true } },
+        fields: { show: (0, alpine_anim_1.fBool)("Show", "Draw a dot at each data vertex.") },
+    },
+    domain: {
+        type: "group", required: false, description: "Value-axis domain overrides — leave unset to auto-fit to nice round numbers.",
+        meta: { ui: { label: "Domain", order: 11, collapsedByDefault: true } },
+        fields: {
+            minValue: (0, alpine_anim_1.fNum)("Min Value", "Explicit domain minimum. Auto-derived when unset.", { placeholder: "data min" }),
+            maxValue: (0, alpine_anim_1.fNum)("Max Value", "Explicit domain maximum. Auto-derived when unset.", { placeholder: "data max" }),
+        },
+    },
+    anim: {
+        type: "group", required: false, description: "Left→right draw-on intro.",
+        meta: { ui: { label: "Animation", order: 12, collapsedByDefault: true } },
+        fields: { reduceMotion: alpine_anim_1.ALPINE_ANIM_FIELDS.reduceMotion, introFrac: alpine_anim_1.ALPINE_ANIM_FIELDS.introFrac, ease: (0, alpine_anim_1.fEnum)("Easing", ["easeOut", "smoothstep", "easeInOut", "linear"], "Intro draw-on easing curve.") },
+    },
+    theme: {
+        type: "group", required: false, description: "Opt into a theme source. Uses the alpine preset by default; set a producer slug + namespace to pull shared design tokens. Explicit color props still win.",
+        meta: { ui: { label: "Theme", order: 13, collapsedByDefault: true } },
+        fields: { slug: (0, alpine_anim_1.fStr)("Producer slug", "Producer template to seed tokens from (e.g. \"@m0saic/theming/v1\").", "preset palette (no producer)"), preset: (0, alpine_anim_1.fStr)("Preset", "Producer preset/variant (light | dark | high-contrast; producer-defined).", "producer default"), namespace: (0, alpine_anim_1.fStr)("Namespace", "Upstream alias to read tokens from. Default \"theme\".", "theme"), forceFetch: (0, alpine_anim_1.fBool)("Force fetch", "Re-seed via the slug even if the namespace is populated.") },
+    },
+});
+exports.AlpineLineChart = {
+    id: (0, types_1.asTemplateId)("@m0saic/alpine/line-chart/v1"),
+    label: "Alpine Line Chart",
+    version: 1,
+    description: "Alpine line/area chart — friendly mobile-marketing card: soft area fill, rounded line, point markers, value rail, left→right draw-on. Standalone Alpine brand flavor.",
+    capabilities: { tier: "core" },
+    primitive: true,
+    deprecated: {
+        reason: "Absolute-placement antipattern: every mark (gridlines, axis, area, line, markers, labels) is a tight cell-local inline-mask placed DIRECTLY on the full canvas via placeRects, so a single coordinate system aligns them — but precision tracks the canvas (audit: ABSOLUTE, slope 1.08) and it pins its parent when nested. Use v2 — the SAME single-coordinate-system idea scoped to a RATIO plot cell: the marks are masks that fill that cell in plot-local coords (so they still register exactly), while the cell is a ratio split → bounded precision. Composes at any canvas.",
+        replacement: (0, types_1.asTemplateId)("@m0saic/alpine/line-chart/v2"),
+        since: "2026-07-09",
+    },
+    tags: ["alpine", "line-chart", "chart", "data-viz"],
+    outputHints: { width: 1280, height: 800, fps: 30, durationMs: 2000 },
+    propsSchema,
+    defaultProps: {
+        theme: { forceFetch: false },
+        values: [12, 19, 15, 25, 22, 30, 28, 36],
+        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
+        title: "LINE CHART",
+        subtitle: "Monthly Active Users",
+        curve: DEFAULT_CURVE,
+        preset: DEFAULT_PRESET,
+        // No `lineColor` default: it falls through to the resolved theme primary so a
+        // preset switch / producer theme recolors the line. Unthemed light → the exact
+        // former default (ALPINE_PRESETS.light.primary), so byte-identity holds.
+        grid: DEFAULT_GRID,
+        area: DEFAULT_AREA,
+        points: DEFAULT_POINTS,
+        anim: DEFAULT_ANIM,
+    },
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const W = Math.max(1, Math.round(ctx.target.width));
+        const H = Math.max(1, Math.round(ctx.target.height));
+        const values = ((_a = props.values) !== null && _a !== void 0 ? _a : []).filter((v) => Number.isFinite(v));
+        if (values.length === 0) {
+            return (0, template_utils_1.makeErrorMosaic)("values[] must be non-empty", { title: `${this.id} props`, width: W, height: H });
+        }
+        // Theming: the shared alpine theme (light default via the preset). A producer
+        // overrides card/line/grid tokens through `props.theme`; explicit color props
+        // still win downstream. Unthemed → byte-identical to the sync `alpineTheme`.
+        const theme = await (0, alpine_theme_1.resolveAlpineTheme)((_b = props.preset) !== null && _b !== void 0 ? _b : DEFAULT_PRESET, ctx, props.theme);
+        const lineColor = (0, alpine_card_1.resolveColor)(props.lineColor, theme.primary);
+        const curve = (_c = props.curve) !== null && _c !== void 0 ? _c : DEFAULT_CURVE;
+        const grid = { ...DEFAULT_GRID, ...((_d = props.grid) !== null && _d !== void 0 ? _d : {}) };
+        const area = { ...DEFAULT_AREA, ...((_e = props.area) !== null && _e !== void 0 ? _e : {}) };
+        const points = { ...DEFAULT_POINTS, ...((_f = props.points) !== null && _f !== void 0 ? _f : {}) };
+        const anim = { ...DEFAULT_ANIM, ...((_g = props.anim) !== null && _g !== void 0 ? _g : {}) };
+        const labels = (_h = props.labels) !== null && _h !== void 0 ? _h : [];
+        const hasLabels = labels.length > 0;
+        const N = values.length;
+        // ── Domain (nice axis unless both bounds explicit) ──
+        const domain = (_j = props.domain) !== null && _j !== void 0 ? _j : {};
+        const dataMin = Math.min(...values);
+        const dataMax = Math.max(...values);
+        const explicit = domain.minValue != null && domain.maxValue != null;
+        let minValue, maxValue, gridCount;
+        if (explicit) {
+            minValue = domain.minValue;
+            maxValue = domain.maxValue;
+            gridCount = Math.max(1, grid.count);
+        }
+        else {
+            const nice = niceAxis((_k = domain.minValue) !== null && _k !== void 0 ? _k : dataMin, (_l = domain.maxValue) !== null && _l !== void 0 ? _l : dataMax, grid.count + 1);
+            minValue = nice.min;
+            maxValue = nice.max;
+            gridCount = Math.max(1, nice.ticks.length - 1);
+        }
+        const denom = maxValue - minValue || 1;
+        // ── Card chrome → plot rect ──
+        const card = (0, alpine_card_1.alpineCard)({ theme, W, H, title: props.title, subtitle: props.subtitle });
+        const cr = card.contentRect;
+        const tickFont = Math.max(10, Math.round(H * 0.019));
+        const catFont = Math.max(10, Math.round(H * 0.02));
+        const hasTicks = grid.show;
+        const tickRailW = hasTicks ? Math.max(Math.round(cr.w * 0.07), tickFont * 3) : Math.round(cr.w * 0.01);
+        const catBandH = hasLabels ? Math.round(catFont * 2) : 0;
+        // Mark sizing (needed before the plot inset so the end markers get breathing
+        // room). strokeW/markerR scale with the plot's short side.
+        const strokeW = Math.max(2, Math.round(Math.min(cr.w, cr.h) * 0.009));
+        const markerR = Math.max(3, Math.round(strokeW * 1.5));
+        const haloR = markerR + Math.max(1, Math.round(strokeW * 0.6));
+        // Inset the data x-range and the top so the first/last/peak markers (and their
+        // halos) sit fully inside the plot — otherwise edge markers poke out past the
+        // curtain at t=0 (left) and clip against the card at the final state (right/top).
+        const edgePad = (points.show ? haloR : strokeW) + 3;
+        const topPad = Math.max(Math.round(H * 0.03), edgePad);
+        const plotX = cr.x + tickRailW;
+        const plotY = cr.y + topPad;
+        const plotW = cr.x + cr.w - plotX;
+        const plotH = cr.y + cr.h - catBandH - plotY;
+        if (plotW < 24 || plotH < 24) {
+            return Promise.resolve((0, template_utils_1.makeErrorMosaic)("plot area too small", { title: `${this.id}`, width: W, height: H }));
+        }
+        // ── Data → canvas px points (x inset by edgePad so end markers don't clip) ──
+        const xInset = Math.min(edgePad, plotW * 0.45);
+        const xAt = (i) => (N === 1 ? plotX + plotW / 2 : plotX + xInset + (i / (N - 1)) * (plotW - 2 * xInset));
+        const yAt = (v) => plotY + (1 - Math.max(0, Math.min(1, (v - minValue) / denom))) * plotH;
+        const points2 = values.map((v, i) => ({ x: xAt(i), y: yAt(v) }));
+        const baselineY = plotY + plotH;
+        // Smooth (Catmull-Rom) interpolation can OVERSHOOT past the data — a sharp drop
+        // to the axis floor (e.g. a run of 0s) makes the spline dip BELOW the baseline,
+        // reading as fake-negative data. Clamp the flattened polyline to the plot's
+        // vertical bounds so neither under- nor over-shoot escapes the axes.
+        const { poly: rawPoly } = (0, geometry_1.curvePolyline)(points2, curve);
+        const poly = rawPoly.map((p) => ({ x: p.x, y: Math.max(plotY, Math.min(baselineY, p.y)) }));
+        // ── Intro timing ──
+        const clipSec = Math.max(0.1, ((_m = ctx.target.durationMs) !== null && _m !== void 0 ? _m : 2000) / 1000);
+        const introSec = Math.max(0.1, Math.min(1, anim.introFrac) * clipSec);
+        const animate = !anim.reduceMotion;
+        const hasLine = poly.length >= 2;
+        // ── Reveal strategy: CURTAIN WIPE ──
+        // The chart marks (gridlines, area, line, markers, labels) are built STATIC —
+        // exactly the reduceMotion layout, which packs cleanly and renders crisp. The
+        // intro is ONE card-colored rectangle covering the plot that slides left→right
+        // off the plot, uncovering the chart as it goes.
+        //
+        // Why not a per-segment line draw-on? That needs many overlapping ribbon
+        // slivers; each spills to its own placeRects overlay layer, and past ~25 nested
+        // overlay layers this engine starts dropping inline-masks (circle markers
+        // collapse to their square bbox; text rasterizes to tofu). The curtain adds
+        // exactly ONE overlay layer over the proven-clean static chart — no depth blow-up,
+        // and a clean premium left→right wipe that reveals every mark together.
+        const chartPieces = [];
+        // Every same-color mark group is drawn as ONE multi-subpath mask, not one tile
+        // per mark. This keeps the tile count flat as the data grows (N points add 0
+        // tiles, not 2N+ ) — the desktop render executor expands each tile to its own
+        // ffmpeg scaling pass, and a per-point tile explosion exhausted it ("Failed
+        // initializing scaling graph: Resource temporarily unavailable").
+        const gw = Math.max(1, Math.round(H * 0.0016));
+        const axisW = Math.max(1, Math.round(H * 0.0022));
+        const op = Math.max(0, Math.min(1, area.opacity));
+        // ── Gridlines (one mask, all rows) + axis baseline (one mask) ──
+        if (grid.show && gridCount >= 1) {
+            const gys = Array.from({ length: gridCount + 1 }, (_, k) => yAt(minValue + (k / gridCount) * (maxValue - minValue)));
+            const gbox = unionBBox(gys.map((gy) => ({ minX: plotX, maxX: plotX + plotW, minY: gy - gw / 2, maxY: gy + gw / 2 })));
+            chartPieces.push(maskPiece(W, H, gbox, 0, theme.grid, (ox, oy) => gys.map((gy) => rectLocal(plotX - ox, gy - oy - gw / 2, plotW, gw)).join(" "), theme.gridAlpha < 1 ? { overlay: { alpha: `${theme.gridAlpha}` } } : {}));
+        }
+        chartPieces.push(maskPiece(W, H, { minX: plotX, maxX: plotX + plotW, minY: baselineY - axisW / 2, maxY: baselineY + axisW / 2 }, 1, theme.axis, (ox, oy) => rectLocal(plotX - ox, baselineY - oy - axisW / 2, plotW, axisW), theme.axisAlpha < 1 ? { overlay: { alpha: `${theme.axisAlpha}` } } : {}));
+        // ── Area fill — soft translucent wash (opacity rides on overlay.alpha; makeColorTile ignores `visual`). ──
+        if (area.show && hasLine) {
+            const localPts = (ox, oy) => poly.map((p) => (0, geometry_1.local)(p, ox, oy));
+            chartPieces.push(maskPiece(W, H, (0, geometry_1.areaBBox)(poly, baselineY), 2, lineColor, (ox, oy) => (0, geometry_1.areaPolygonPath)(localPts(ox, oy), baselineY - oy), { overlay: { alpha: `${op}` } }));
+        }
+        // ── Line — one tight mask of the whole (curve-flattened) polyline ──
+        if (hasLine) {
+            chartPieces.push(maskPiece(W, H, (0, geometry_1.polylineStrokeBBox)(poly, strokeW), 3, lineColor, (ox, oy) => (0, geometry_1.polylineStrokePath)(poly.map((p) => (0, geometry_1.local)(p, ox, oy)), strokeW)));
+        }
+        // ── Point markers — ALL halos as one mask, ALL dots as one mask (2 tiles total,
+        //    not 2 per point); dots paint above halos for the stroked-marker look. ──
+        if (points.show && points2.length > 0) {
+            chartPieces.push(maskPiece(W, H, unionBBox(points2.map((p) => (0, geometry_1.markerBBox)(p, haloR))), 4, theme.card, (ox, oy) => points2.map((p) => circlePolyLocal(p.x - ox, p.y - oy, haloR)).join(" ")));
+            chartPieces.push(maskPiece(W, H, unionBBox(points2.map((p) => (0, geometry_1.markerBBox)(p, markerR))), 5, lineColor, (ox, oy) => points2.map((p) => circlePolyLocal(p.x - ox, p.y - oy, markerR)).join(" ")));
+        }
+        // ── Y tick labels + X category labels — their OWN pack ──
+        // Text cells that OVERLAP each other corrupt placeRects' per-band cursor walk
+        // (it assumes non-overlapping rects), which renders labels as tofu boxes AND
+        // can break sibling layers (the curtain stopped covering). Two guards: (1) keep
+        // labels in their own pack so a label collision can't corrupt the chart marks;
+        // (2) DECIMATE x-labels — show every k-th so the kept labels never overlap.
+        const labelPieces = [];
+        if (hasTicks) {
+            for (let k = 0; k <= gridCount; k++) {
+                const gv = minValue + (k / gridCount) * (maxValue - minValue);
+                const gy = yAt(gv);
+                labelPieces.push(textPiece(W, H, 0, cr.x + tickRailW * 0.5, gy, formatCompact(gv), tickFont, theme.muted, "center"));
+            }
+        }
+        if (hasLabels) {
+            const cy = baselineY + catBandH * 0.5;
+            // Decimate so kept labels don't collide: step = ceil(widest label / spacing).
+            const baseSpacing = N > 1 ? (plotW - 2 * xInset) / (N - 1) : plotW;
+            const maxLabelChars = labels.reduce((m, l) => (l ? Math.max(m, l.length) : m), 0);
+            const approxLabelW = maxLabelChars * catFont * 0.62 + catFont;
+            const labelStep = Math.max(1, Math.ceil((approxLabelW + catFont * 0.5) / Math.max(1, baseSpacing)));
+            for (let i = 0; i < N; i++) {
+                if (i % labelStep !== 0)
+                    continue;
+                if (!labels[i])
+                    continue;
+                labelPieces.push(textPiece(W, H, 0, xAt(i), cy, labels[i], catFont, theme.label, "center"));
+            }
+        }
+        // ── Curtain: one plot-sized card-colored rect that slides right to reveal ──
+        const curtainLayers = [];
+        if (animate) {
+            // x-offset grows 0 → plotW over the intro (eased), sliding the cover off the
+            // plot to the right; its trailing edge is the wipe line. The label rail/band
+            // sit outside the plot rect, so they're never covered (always legible).
+            // Pad the curtain UP by the marker halo (into the empty headroom) so a peak
+            // marker at the top edge is fully covered at t=0; pad DOWN only a hair (to
+            // cover the axis line) so the curtain never clips the x-label band beneath it.
+            const cy = clampInt(plotY - (haloR + 3), 0, H - 1);
+            const chh = clampInt(baselineY + strokeW + 2 - cy, 1, H - cy);
+            // Slide the cover from x=0 (covers the plot) to x=+plotW (off to the right).
+            const reveal = (0, template_utils_1.easingExpr)(anim.ease, `min(1,max(0,t/${introSec}))`);
+            const xExpr = `(${plotW})*(${reveal})`;
+            const curtain = {
+                rect: { x: plotX, y: cy, w: plotW, h: chh, claimant: "F", importance: 0 },
+                source: (0, template_utils_1.makeColorTile)(theme.card, { overlay: { xExpr } }),
+            };
+            curtainLayers.push(...packLayers(W, H, [curtain]));
+        }
+        // The static chart packs cleanly (it's the reduceMotion layout); labels pack
+        // separately (decimated → non-overlapping); the curtain adds one overlay on top.
+        const plotNode = chainLayers([
+            ...packLayers(W, H, chartPieces),
+            ...packLayers(W, H, labelPieces),
+            ...curtainLayers,
+        ]);
+        const root = card.compose(alpine_card_1.EMPTY, plotNode);
+        return Promise.resolve({
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: root.m0,
+            sources: root.sources,
+            backgroundColor: card.backgroundColor,
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+        });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.AlpineLineChart);

package/dist/m0saic/alpine/line-chart/v2/index.d.ts

@@ -0,0 +1 @@
+export { AlpineLineChartV2 } from "./line-chart";

package/dist/m0saic/alpine/line-chart/v2/index.js

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

package/dist/m0saic/alpine/line-chart/v2/line-chart.d.ts

@@ -0,0 +1,72 @@
+/**
+ * ============================================================================
+ * @m0saic/alpine/line-chart/v2 — Alpine Line Chart (RATIO rebuild)
+ * ============================================================================
+ *
+ * Same picture as v1 — soft area fill, rounded line, point markers, value rail,
+ * category labels, hairline gridlines, left→right curtain draw-on — but rebuilt
+ * as a RATIO layout instead of absolute full-canvas `placeRects`.
+ *
+ * v1 packed every mark as a TIGHT cell-local inline-mask placed directly on the
+ * full canvas via `placeRects`, so a single pixel coordinate system aligned them
+ * — but that pinned precision to the canvas (audit: ABSOLUTE, slope 1.08). v2
+ * keeps the single-coordinate-system idea but scopes it to a ratio-positioned
+ * PLOT CELL: the gridlines, axis, area, line and markers are inline-masks that
+ * FILL that cell with paths in PLOT-LOCAL coordinates, so they register exactly
+ * (a mask's path is relative to its own cell) while the cell is a plain ratio
+ * split → bounded precision. The value rail + category band are sibling ratio
+ * cells whose label positions are inset to the SAME plot fractions, so ticks
+ * line up with the gridlines and category labels line up with the points. The
+ * curtain is one card-colored tile in the plot cell that slides off via `xExpr`.
+ *
+ * This is the "mask-in-a-cell" fix (see kpi-card/v2's sparkline) applied to a
+ * full chart: connected curve geometry stays exact, yet nothing pins the canvas.
+ * ============================================================================
+ */
+import type { MosaicColor, MosaicTemplate } from "@m0saic/types";
+import { type EaseName, type ThemeSourceConfig } from "@m0saic/template-utils";
+import { type AlpinePreset } from "../../_shared/alpine-theme";
+type Curve = "linear" | "smooth" | "stepped";
+type DomainConfig = {
+    minValue?: number;
+    maxValue?: number;
+};
+type GridConfig = {
+    show: boolean;
+    count: number;
+};
+type AreaConfig = {
+    show: boolean;
+    opacity: number;
+};
+type PointsConfig = {
+    show: boolean;
+};
+type AnimConfig = {
+    reduceMotion: boolean;
+    introFrac: number;
+    ease: EaseName;
+};
+type AlpineLineChartV2Props = {
+    values: number[];
+    labels?: string[];
+    title?: string;
+    subtitle?: string;
+    curve?: Curve;
+    preset?: AlpinePreset;
+    lineColor?: MosaicColor;
+    grid?: GridConfig;
+    area?: AreaConfig;
+    points?: PointsConfig;
+    domain?: DomainConfig;
+    anim?: AnimConfig;
+    /** Opt-in producer theming. The preset is the fallback; a producer's published
+     *  tokens override it. Explicit color props still win. */
+    theme?: ThemeSourceConfig;
+    /** Small vertical ticks on the x-axis at each labeled data point (default true). */
+    showTicks?: boolean;
+    /** Dev-only layout contract: assert every x-axis tick sits on its data point's x. */
+    debugLayout?: boolean;
+};
+export declare const AlpineLineChartV2: MosaicTemplate<AlpineLineChartV2Props>;
+export {};