@m0saic/templates 0.2.0

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

@@ -0,0 +1,434 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlpineLineChartV2 = 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 onboarding_cover_1 = require("../../../_shared/onboarding-cover");
+const DEFAULT_PRESET = "light";
+const DEFAULT_CURVE = "smooth";
+const DEFAULT_GRID = { show: true, count: 4 };
+const DEFAULT_AREA = { show: true, opacity: 0.22 };
+const DEFAULT_POINTS = { show: true };
+const DEFAULT_ANIM = { introFrac: 0.7, ease: "easeOut", reduceMotion: false };
+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 r2 = (v) => Math.round(v * 100) / 100;
+/** A rectangle subpath in local coords (for gridlines / axis / thin rules). */
+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 (survives temporal overlays; SVG arcs don't). */
+function circlePolyLocal(cx, cy, rr, sides = 28) {
+    let d = "";
+    for (let k = 0; k < sides; k++) {
+        const a = (k / sides) * Math.PI * 2;
+        d += `${k === 0 ? "M" : "L"} ${r2(cx + Math.cos(a) * rr)} ${r2(cy + Math.sin(a) * rr)} `;
+    }
+    return d + "Z";
+}
+// ---------------------------------------------------------------------------
+// Template
+// ---------------------------------------------------------------------------
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    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 } } },
+    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.") },
+    },
+    showTicks: { type: "boolean", required: false, description: "Small vertical ticks on the x-axis at each labeled data point (classic chart look). Default true.", meta: { ui: { label: "Axis ticks", order: 10 } } },
+    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.") },
+    },
+    debugLayout: { type: "boolean", required: false, description: "Dev-only layout contract view: renders the contract wireframe instead of the chart — x-axis ticks GREEN when each sits on its data point's x, offenders RED. Deterministic false default; production never sets it.", meta: { ui: { label: "Debug layout", order: 13 } } },
+});
+exports.AlpineLineChartV2 = {
+    id: (0, types_1.asTemplateId)("@m0saic/alpine/line-chart/v2"),
+    label: "Alpine Line Chart",
+    version: 2,
+    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. v2 rebuilds the geometry as a ratio layout (plot marks are masks filling a ratio plot cell in plot-local coords) so it composes at any canvas without the absolute-placement precision blowup.",
+    capabilities: { tier: "core" },
+    primitive: true,
+    tags: ["data-viz", "alpine", "line-chart", "animated", "analysts", "developers", "trend", "dashboard"],
+    outputHints: { format: { kind: "video", container: "mp4" }, width: 1280, height: 800, fps: 30, durationMs: 2000 },
+    propsSchema,
+    defaultProps: {
+        showTicks: true,
+        debugLayout: false,
+        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,
+        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 });
+        }
+        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 → content 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 tickRailWpx = hasTicks ? Math.max(Math.round(cr.w * 0.07), tickFont * 3) : Math.round(cr.w * 0.01);
+        const catBandHpx = hasLabels ? Math.round(catFont * 2) : 0;
+        // Mark sizing.
+        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));
+        const topPadPx = Math.max(Math.round(H * 0.03), (points.show ? haloR : strokeW) + 3);
+        // ── Plot cell px dims (the ratio cell the marks fill; used for plot-local coords) ──
+        const plotW = Math.max(1, cr.w - tickRailWpx);
+        const showTicks = props.showTicks !== false;
+        const plotH = Math.max(1, cr.h - topPadPx - catBandHpx);
+        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 → PLOT-LOCAL px points. y inset by the marker halo so end markers stay
+        //    inside the plot-cell mask bounds; x inset so first/last markers don't clip. ──
+        const marginY = points.show ? haloR + 1 : strokeW;
+        const xInset = Math.min((points.show ? haloR : strokeW) + 2, plotW * 0.45);
+        const xAt = (i) => (N === 1 ? plotW / 2 : xInset + (i / (N - 1)) * (plotW - 2 * xInset));
+        const yAt = (v) => marginY + (1 - Math.max(0, Math.min(1, (v - minValue) / denom))) * (plotH - 2 * marginY);
+        const pts = values.map((v, i) => ({ x: xAt(i), y: yAt(v) }));
+        const baselineY = yAt(minValue);
+        const { poly: rawPoly } = (0, geometry_1.curvePolyline)(pts, curve);
+        const poly = rawPoly.map((p) => ({ x: p.x, y: Math.max(marginY, Math.min(baselineY, p.y)) }));
+        const hasLine = poly.length >= 2;
+        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;
+        // ── A plot-cell mask: fills the plot cell, path authored in plot-local coords ──
+        const bounds = { x: 0, y: 0, width: plotW, height: plotH };
+        const plotMask = (color, localPath, overlayObj) => (0, template_utils_1.makeColorTile)(color, { mask: { kind: "inline-mask", localPath, bounds }, ...(overlayObj ? { overlay: overlayObj } : {}) });
+        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));
+        // ── Plot overlay layers (all fill the plot cell; one shared coordinate system) ──
+        const plotLayers = [];
+        // Gridlines — one mask, all rows (at the tick y's).
+        if (grid.show && gridCount >= 1) {
+            const gys = Array.from({ length: gridCount + 1 }, (_, k) => yAt(minValue + (k / gridCount) * (maxValue - minValue)));
+            plotLayers.push((0, alpine_card_1.paint)(plotMask(theme.grid, gys.map((gy) => rectLocal(0, gy - gw / 2, plotW, gw)).join(" "), theme.gridAlpha < 1 ? { alpha: `${theme.gridAlpha}` } : undefined)));
+        }
+        // Axis baseline — one mask.
+        plotLayers.push((0, alpine_card_1.paint)(plotMask(theme.axis, rectLocal(0, baselineY - axisW / 2, plotW, axisW), theme.axisAlpha < 1 ? { alpha: `${theme.axisAlpha}` } : undefined)));
+        // Every mask painted with `lineColor` (area fill, line, marker dots) binds it —
+        // Make's color picker on double-click (1:N; the halos are card-colored, the
+        // grid / axis theme-colored → unbound). Values stay unbound: the marks are
+        // combined masks, no per-value rect.
+        // Area fill.
+        if (area.show && hasLine) {
+            plotLayers.push((0, alpine_card_1.paint)((0, template_utils_1.bindProp)(plotMask(lineColor, (0, geometry_1.areaPolygonPath)(poly, baselineY), { alpha: `${op}` }), "lineColor")));
+        }
+        // Line.
+        if (hasLine) {
+            plotLayers.push((0, alpine_card_1.paint)((0, template_utils_1.bindProp)(plotMask(lineColor, (0, geometry_1.polylineStrokePath)(poly, strokeW)), "lineColor")));
+        }
+        // Point markers — halos then dots (2 masks total, not 2 per point).
+        if (points.show && pts.length > 0) {
+            plotLayers.push((0, alpine_card_1.paint)(plotMask(theme.card, pts.map((p) => circlePolyLocal(p.x, p.y, haloR)).join(" "))));
+            plotLayers.push((0, alpine_card_1.paint)((0, template_utils_1.bindProp)(plotMask(lineColor, pts.map((p) => circlePolyLocal(p.x, p.y, markerR)).join(" ")), "lineColor")));
+        }
+        // Curtain — one card-colored tile that slides right off the plot (left→right reveal).
+        if (animate) {
+            const reveal = (0, template_utils_1.easingExpr)(anim.ease, `min(1,max(0,t/${introSec}))`);
+            plotLayers.push((0, alpine_card_1.paint)((0, template_utils_1.makeColorTile)(theme.card, { overlay: { xExpr: `(w)*(${reveal})` } })));
+        }
+        // Kept (decimated) label indices — computed early so the TICKS render at
+        // exactly the labeled positions (a tick per data point broke the flat
+        // tile-count invariant at high N, and served nothing: the ticks exist to
+        // anchor the LABELS to their points).
+        const keptIdx = [];
+        if (hasLabels) {
+            const baseSpacingK = N > 1 ? (plotW - 2 * xInset) / (N - 1) : plotW;
+            const maxLabelCharsK = labels.reduce((m, l) => (l ? Math.max(m, l.length) : m), 0);
+            const approxLabelWK = maxLabelCharsK * catFont * 0.72 + catFont; // 0.72em = CLI rasterizer width
+            const labelStepK = Math.max(1, Math.ceil((approxLabelWK + catFont * 0.5) / Math.max(1, baseSpacingK)));
+            for (let i = 0; i < N; i++)
+                if (i % labelStepK === 0 && labels[i])
+                    keptIdx.push(i);
+        }
+        // ── X-axis ticks: slim VERTICAL strokes hanging from the axis line
+        //    INSIDE the plot (the founder-ruled classic look; the earlier separate
+        //    band floated as horizontal dashes). One REAL rect per LABELED point,
+        //    authored at the serializer's 120 basis (emitted = intended); the tile
+        //    slims to ~3px via a SYMMETRIC x inset, which cannot move its center —
+        //    so the contract's span-frac lock measures the true position. ──
+        const TICK_BASIS = 120;
+        const tickCenterU = [];
+        const tickNodes = [];
+        if (showTicks && keptIdx.length >= 2) {
+            const tickHpx = Math.max(6, Math.round(H * 0.012));
+            const topU = Math.max(0, Math.min(TICK_BASIS - 2, Math.round(((baselineY + axisW / 2) / plotH) * TICK_BASIS)));
+            const tickHU = Math.max(2, Math.round((tickHpx / plotH) * TICK_BASIS));
+            const cellWpx = plotW / TICK_BASIS;
+            const slimInsetX = Math.max(0, Math.min(0.45, (1 - 3 / Math.max(3, cellWpx)) / 2));
+            for (const i of keptIdx) {
+                const leftU = Math.max(0, Math.min(TICK_BASIS - 1, Math.round((xAt(i) / plotW) * TICK_BASIS - 0.5)));
+                tickCenterU.push(leftU + 0.5);
+                const tickTile = (0, template_utils_1.makeColorTile)(theme.axis, {
+                    overlay: { alpha: `${theme.axisAlpha}` },
+                    ...(slimInsetX > 0 ? { placement: { inset: { x: slimInsetX } } } : {}),
+                });
+                // "x-tick" tag = the layout contract's join key (span-frac position lock).
+                tickTile.editor = { label: "x-tick" };
+                const col = (0, alpine_card_1.colSplit)([
+                    ...(leftU > 0 ? [{ weight: leftU, node: alpine_card_1.EMPTY }] : []),
+                    { weight: 1, node: (0, alpine_card_1.paint)(tickTile) },
+                    ...(TICK_BASIS - 1 - leftU > 0 ? [{ weight: TICK_BASIS - 1 - leftU, node: alpine_card_1.EMPTY }] : []),
+                ]);
+                tickNodes.push((0, alpine_card_1.rowSplit)([
+                    ...(topU > 0 ? [{ weight: topU, node: alpine_card_1.EMPTY }] : []),
+                    { weight: tickHU, node: col },
+                    ...(TICK_BASIS - topU - tickHU > 0 ? [{ weight: TICK_BASIS - topU - tickHU, node: alpine_card_1.EMPTY }] : []),
+                ]));
+            }
+        }
+        for (const t of tickNodes)
+            plotLayers.push(t);
+        const plotCell = (0, alpine_card_1.overlay)(plotLayers);
+        // ── Value rail (y ticks): each label inset to the SAME plot fraction as its
+        //    gridline, so ticks line up with the lines. ──
+        const railLabelH = Math.round(tickFont * 1.8);
+        const tickRail = hasTicks
+            ? (0, alpine_card_1.overlay)(Array.from({ length: gridCount + 1 }, (_, k) => {
+                const tv = minValue + (k / gridCount) * (maxValue - minValue);
+                const cy = yAt(tv); // plot-local center (rail shares the plot cell's height)
+                const top = Math.max(0, Math.min(plotH - railLabelH, Math.round(cy - railLabelH / 2)));
+                return (0, alpine_card_1.insetNode)((0, alpine_card_1.paint)((0, alpine_card_1.tag)((0, alpine_card_1.textCell)(formatCompact(tv), tickFont, theme.muted, "right"), "y-tick-label")), top, Math.round(tickRailWpx * 0.16), plotH - top - railLabelH, 0, tickRailWpx, plotH);
+            }))
+            : alpine_card_1.EMPTY;
+        // ── Category band (x labels): decimate so kept labels never overlap; each inset
+        //    to its point's plot fraction so labels sit under the markers. ──
+        let catBand = alpine_card_1.EMPTY;
+        if (hasLabels) {
+            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.72 + catFont; // 0.72em = CLI rasterizer width
+            const labelStep = Math.max(1, Math.ceil((approxLabelW + catFont * 0.5) / Math.max(1, baseSpacing)));
+            // Cells span the KEPT pitch (labelStep × spacing), NOT the per-point
+            // spacing — the old cells passed the app's narrow rasterizer but the
+            // CLI's wider metrics clipped "W11"→"N11" at 40 points (gate-8
+            // founder catch: Make-vs-render diff).
+            const colW = Math.max(catFont * 2, Math.round(baseSpacing * labelStep));
+            const kept = [];
+            for (let i = 0; i < N; i++) {
+                if (i % labelStep !== 0 || !labels[i])
+                    continue;
+                const cx = xAt(i); // plot-local (cat band shares the plot cell's width)
+                // Interior labels center ON their point. EDGE labels align INWARD
+                // (first left-aligned at the plot edge, last right-aligned) with a
+                // full-width cell — the classic chart treatment: an edge-shrunk cell
+                // kept the center on the point but left less room than the text
+                // needs (the text-fit contract caught 25px cells for 40px labels);
+                // the axis TICK carries the exact point anchor either way.
+                const cellW = colW;
+                const nearLeft = cx < cellW / 2;
+                const nearRight = cx > plotW - cellW / 2;
+                const left = nearLeft ? 0 : nearRight ? plotW - cellW : Math.max(0, Math.min(plotW - cellW, Math.round(cx - cellW / 2)));
+                const align = nearLeft ? "left" : nearRight ? "right" : "center";
+                const labelSrc = (0, alpine_card_1.textCell)(labels[i], catFont, theme.label, align);
+                // "x-label" tag = the layout contract's join key (text-fit lock).
+                labelSrc.editor = { label: "x-label" };
+                // The kept label IS labels[i] → bound at its ORIGINAL index (decimation
+                // skips indices, never renumbers them) so Make edits the right element.
+                kept.push((0, alpine_card_1.insetNode)((0, alpine_card_1.paint)((0, template_utils_1.bindProp)(labelSrc, "labels", i)), 0, plotW - left - cellW, 0, left, plotW, catBandHpx));
+            }
+            catBand = kept.length ? (0, alpine_card_1.overlay)(kept) : alpine_card_1.EMPTY;
+        }
+        // ── X-axis ticks: one REAL rect per data point, centered at xAt(i). The
+        //    points themselves are mask-drawn (unmeasurable) — the ticks are the
+        //    contract's measurable proxy for the whole x alignment. ──
+        // ── Assemble: [topPad] / [tickRail | plotCell] / [catRail-gap | catBand] ──
+        const wH = (px) => Math.max(1, Math.round((px / cr.h) * 100));
+        const bodyNode = hasTicks
+            ? (0, alpine_card_1.colSplit)([
+                { weight: Math.max(1, Math.round((tickRailWpx / cr.w) * 100)), node: tickRail },
+                { weight: Math.max(1, 100 - Math.round((tickRailWpx / cr.w) * 100)), node: plotCell },
+            ])
+            : plotCell;
+        const catRow = hasLabels
+            ? (0, alpine_card_1.colSplit)([
+                { weight: Math.max(1, Math.round((tickRailWpx / cr.w) * 100)), node: alpine_card_1.EMPTY },
+                { weight: Math.max(1, 100 - Math.round((tickRailWpx / cr.w) * 100)), node: catBand },
+            ])
+            : alpine_card_1.EMPTY;
+        const contentBands = [{ weight: wH(topPadPx), node: alpine_card_1.EMPTY }, { weight: wH(plotH), node: bodyNode }];
+        if (catBandHpx > 0)
+            contentBands.push({ weight: wH(catBandHpx), node: catRow });
+        const content = (0, alpine_card_1.rowSplit)(contentBands);
+        const root = card.compose(content);
+        const doc = {
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: root.m0,
+            sources: root.sources,
+            backgroundColor: card.backgroundColor,
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+        };
+        // Dev tripwire — the founder-ruled alignment guarantee: every x-tick sits
+        // on its data point's x. GROUP-RELATIVE (span fractions of the tick row
+        // itself): the ticks share their rail-offset weights with the plot cell,
+        // so the group's origin is structurally aligned with the dots; the only
+        // possible failure is a tick displaced WITHIN the band — exactly what the
+        // frac lock catches, with no canvas-space origin model to drift.
+        const expectedTickFracs = tickCenterU.length >= 2
+            ? tickCenterU.map((u) => (u - tickCenterU[0]) / Math.max(1e-6, tickCenterU[tickCenterU.length - 1] - tickCenterU[0]))
+            : [];
+        return Promise.resolve((0, template_utils_1.withLayoutContract)(doc, ctx, {
+            templateId: "@m0saic/alpine/line-chart/v2",
+            relations: [],
+            // 0.06, not 0.02: with points/area OFF the contract's frames↔sources
+            // zip mis-pairs boxes by up to ~0.04 of span at small canvases (the
+            // measurement-channel candidate, the internal contract-frame-zip-misalignment
+            // notes). The class this guards — a tick a full
+            // spacing off its point — is ≥0.14 of span, still 2.3× the tolerance.
+            constraints: [
+                ...(expectedTickFracs.length
+                    ? [{ label: "x-tick", xCentersFrac: expectedTickFracs, centerToleranceFrac: 0.06 }]
+                    : []),
+                // Text-fit tripwires: a kept category label, rail value, or header
+                // that clips at the CLI's wider metrics reds the debug wireframe
+                // (the Make-passes-render-breaks class, caught statically).
+                ...card.constraints,
+                ...(hasLabels && keptIdx.length > 0 ? [{ label: "x-label", textFits: {} }] : []),
+                ...(hasTicks ? [{ label: "y-tick-label", textFits: { charWidthEm: 0.62 } }] : []),
+            ],
+            debug: props.debugLayout === true,
+        }));
+    },
+    // Editor-only first-open cover — the mosaic-branding theme; hero = the
+    // template's own static default render, INLINED flat (gate-15/21 keeper).
+    async renderCover(_props, ctx) {
+        const heroBox = (0, onboarding_cover_1.brandedCoverHeroBox)(ctx, "band");
+        const heroCtx = {
+            ...ctx,
+            target: { ...ctx.target, width: heroBox.width, height: heroBox.height },
+            output: { ...ctx.output, width: heroBox.width, height: heroBox.height },
+        };
+        const hero = (await exports.AlpineLineChartV2.render({
+            ...exports.AlpineLineChartV2.defaultProps,
+            anim: { ...DEFAULT_ANIM, reduceMotion: true },
+        }, heroCtx));
+        return (0, onboarding_cover_1.buildBrandedCover)({
+            ctx,
+            // Band variant (founder ruling 08-30): basic viz needs no
+            // explanation — hero full-bleed + brand band, nothing else.
+            variant: "band",
+            copy: {
+                productName: "Line Chart",
+                title: "A line chart.",
+            },
+            hero: (theme) => (0, onboarding_cover_1.onboardingFrame)((0, onboarding_cover_1.inlineHeroDoc)(hero), theme.borderStrong),
+            heroAssets: hero.assets,
+            children: hero.children,
+        });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.AlpineLineChartV2);

package/dist/m0saic/alpine/progress-card/v1/index.d.ts

@@ -0,0 +1 @@
+export { AlpineProgressCard } from "./progress-card";

package/dist/m0saic/alpine/progress-card/v1/index.js

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

package/dist/m0saic/alpine/progress-card/v1/progress-card.d.ts

@@ -0,0 +1,53 @@
+/**
+ * ============================================================================
+ * @m0saic/alpine/progress-card/v1 — Alpine Progress Card (friendly mobile-marketing)
+ * ============================================================================
+ *
+ * A goal-tracker card: a vertical list of progress rows, each a label + value
+ * over a rounded TRACK with a colored FILL grown to its fraction. STANDALONE
+ * Alpine brand flavor (white rounded card chrome + soft palette).
+ *
+ * Construction follows the bar-graph model — real m0 cells via row/col splits +
+ * rounded `makeColorTile`s, NO inline-mask geometry. The fill grows left→right
+ * via an overlay translate clipped by a plot child doc (the proven bar-graph
+ * grow); the value counts up. `anim.reduceMotion` → the static final card.
+ * ============================================================================
+ */
+import type { MosaicColor, MosaicTemplate } from "@m0saic/types";
+import { type EaseName, type ThemeSourceConfig } from "@m0saic/template-utils";
+import { type AlpinePreset } from "../../_shared/alpine-theme";
+type ProgressItem = {
+    label: string;
+    value: number;
+    max?: number;
+    valueLabel?: string;
+    color?: MosaicColor;
+};
+type AnimConfig = {
+    introFrac: number;
+    countUp: boolean;
+    easing: EaseName;
+    reduceMotion: boolean;
+};
+type AlpineProgressCardProps = {
+    items: ProgressItem[];
+    title?: string;
+    subtitle?: string;
+    preset?: AlpinePreset;
+    showValue?: boolean;
+    /** Override the per-item bar color for ALL rows (per-item `color` still wins). */
+    barColor?: MosaicColor;
+    trackColor?: MosaicColor;
+    /** Bar/track rounding (0..1). */
+    bars?: {
+        cornerRadius?: number;
+    };
+    anim?: AnimConfig;
+    /** Opt-in producer theming (mirrors the charts). Preset is the fallback; a
+     *  producer's published tokens override it. Explicit color props still win. */
+    theme?: ThemeSourceConfig;
+    /** Dev-only layout contract: assert tracks equal-size + text fits its slot. */
+    debugLayout?: boolean;
+};
+export declare const AlpineProgressCard: MosaicTemplate<AlpineProgressCardProps>;
+export {};