@m0saic/templates 0.2.0

package/dist/m0saic/charts/_shared/line.js

@@ -0,0 +1,134 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/charts/_shared/line — line-series geometry + canonical SVG
+ * ============================================================================
+ *
+ * Turns tabular data into line-chart geometry (the math), then into a clean,
+ * canonical SVG (the rendering). Normalization is kept strictly separate from
+ * drawing so the same projected geometry can drive either this SVG path or
+ * m0saic engine sources.
+ *
+ * The visual baseline mirrors the default Chart.js line chart: white ground,
+ * light grid, a single readable stroked line with round points, month labels,
+ * readable y ticks, title + subtitle + a small series legend.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeRecords = normalizeRecords;
+exports.buildLineChartModel = buildLineChartModel;
+exports.linePathD = linePathD;
+exports.pointsPathD = pointsPathD;
+exports.renderLineChartSvg = renderLineChartSvg;
+exports.lineChartSvgFromRecords = lineChartSvgFromRecords;
+const scale_1 = require("./scale");
+/** Normalize an array of records into label/series form (data normalization step). */
+function normalizeRecords(rows, xKey, yKeys) {
+    return {
+        labels: rows.map((r) => String(r[xKey])),
+        series: yKeys.map((y) => {
+            var _a;
+            return ({
+                name: (_a = y.name) !== null && _a !== void 0 ? _a : y.key,
+                color: y.color,
+                values: rows.map((r) => Number(r[y.key])),
+            });
+        }),
+    };
+}
+const DEFAULT_COLORS = ["#2563eb", "#16a34a", "#db2777", "#d97706", "#7c3aed"];
+/** Build the full projected model from normalized series — the deterministic math core. */
+function buildLineChartModel(input, opts = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const width = (_a = opts.width) !== null && _a !== void 0 ? _a : 1280;
+    const height = (_b = opts.height) !== null && _b !== void 0 ? _b : 720;
+    const pad = (_c = opts.padding) !== null && _c !== void 0 ? _c : {};
+    const plot = {
+        left: (_d = pad.left) !== null && _d !== void 0 ? _d : 70,
+        right: width - ((_e = pad.right) !== null && _e !== void 0 ? _e : 24),
+        top: (_f = pad.top) !== null && _f !== void 0 ? _f : 120,
+        bottom: height - ((_g = pad.bottom) !== null && _g !== void 0 ? _g : 48),
+    };
+    const allValues = input.series.flatMap((s) => s.values);
+    const dataMax = allValues.length ? Math.max(...allValues) : 1;
+    const dataMin = allValues.length ? Math.min(...allValues) : 0;
+    const scale = (0, scale_1.linearScale)(dataMin, dataMax, { beginAtZero: (_h = opts.beginAtZero) !== null && _h !== void 0 ? _h : true, maxTicks: (_j = opts.maxTicks) !== null && _j !== void 0 ? _j : 11 });
+    const xs = (0, scale_1.categoryCenters)(input.labels.length, plot.left, plot.right, false);
+    const series = input.series.map((s, i) => { var _a; return ({ name: s.name, values: s.values, color: (_a = s.color) !== null && _a !== void 0 ? _a : DEFAULT_COLORS[i % DEFAULT_COLORS.length] }); });
+    const points = series.map((s) => s.values.map((v, i) => ({ x: xs[i], y: (0, scale_1.project)(v, scale.min, scale.max, plot.bottom, plot.top) })));
+    return { layout: { width, height, plot }, scale, xs, points, labels: input.labels, series };
+}
+// ---------------------------------------------------------------------------
+// Path primitives (pure geometry → SVG path data)
+// ---------------------------------------------------------------------------
+const n = (v) => Math.round(v * 100) / 100;
+/** Polyline path through points — straight segments (Chart.js tension:0 default). */
+function linePathD(points) {
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${n(p.x)} ${n(p.y)}`).join(" ");
+}
+/** Single path drawing a filled circle at each point (engine masks are fill-only). */
+function pointsPathD(points, r) {
+    return points
+        .map((p) => `M ${n(p.x - r)} ${n(p.y)} a ${r} ${r} 0 1 0 ${n(r * 2)} 0 a ${r} ${r} 0 1 0 ${n(-r * 2)} 0 Z`)
+        .join(" ");
+}
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const FONT = "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif";
+/** Render the model to a clean, canonical line-chart SVG string. */
+function renderLineChartSvg(model, ro = {}) {
+    var _a, _b, _c, _d, _e, _f;
+    const { width: W, height: H, plot } = model.layout;
+    const bg = (_a = ro.background) !== null && _a !== void 0 ? _a : "#ffffff";
+    const grid = (_b = ro.gridColor) !== null && _b !== void 0 ? _b : "#eef2f7";
+    const axisText = (_c = ro.axisTextColor) !== null && _c !== void 0 ? _c : "#6b7280";
+    const titleColor = "#111827";
+    const sw = (_d = ro.strokeWidth) !== null && _d !== void 0 ? _d : 2;
+    const pr = (_e = ro.pointRadius) !== null && _e !== void 0 ? _e : 3;
+    const parts = [];
+    parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">`);
+    parts.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+    // grid: horizontal at each y tick, vertical at each category
+    for (const t of model.scale.ticks) {
+        const y = (0, scale_1.project)(t, model.scale.min, model.scale.max, plot.bottom, plot.top);
+        parts.push(`<line x1="${plot.left}" y1="${n(y)}" x2="${plot.right}" y2="${n(y)}" stroke="${grid}" stroke-width="1"/>`);
+        parts.push(`<text x="${plot.left - 10}" y="${n(y + 4)}" font-family="${FONT}" font-size="13" fill="${axisText}" text-anchor="end">${esc((0, scale_1.formatTick)(t))}</text>`);
+    }
+    for (let i = 0; i < model.xs.length; i++) {
+        const x = model.xs[i];
+        parts.push(`<line x1="${n(x)}" y1="${plot.top}" x2="${n(x)}" y2="${plot.bottom}" stroke="${grid}" stroke-width="1"/>`);
+        parts.push(`<text x="${n(x)}" y="${plot.bottom + 22}" font-family="${FONT}" font-size="13" fill="${axisText}" text-anchor="middle">${esc(model.labels[i])}</text>`);
+    }
+    // y axis baseline (slightly darker) for a clean canonical frame
+    parts.push(`<line x1="${plot.left}" y1="${plot.top}" x2="${plot.left}" y2="${plot.bottom}" stroke="#d1d5db" stroke-width="1"/>`);
+    parts.push(`<line x1="${plot.left}" y1="${plot.bottom}" x2="${plot.right}" y2="${plot.bottom}" stroke="#d1d5db" stroke-width="1"/>`);
+    // series lines + points
+    for (const s of model.series.map((s, i) => ({ ...s, points: model.points[i] }))) {
+        parts.push(`<path d="${linePathD(s.points)}" fill="none" stroke="${s.color}" stroke-width="${sw}" stroke-linejoin="round" stroke-linecap="round"/>`);
+        parts.push(`<path d="${pointsPathD(s.points, pr)}" fill="${s.color}"/>`);
+    }
+    // title + subtitle
+    if (ro.title)
+        parts.push(`<text x="${W / 2}" y="40" font-family="${FONT}" font-size="22" font-weight="700" fill="${titleColor}" text-anchor="middle">${esc(ro.title)}</text>`);
+    if (ro.subtitle)
+        parts.push(`<text x="${W / 2}" y="64" font-family="${FONT}" font-size="13" fill="${axisText}" text-anchor="middle">${esc(ro.subtitle)}</text>`);
+    // legend (single small chip per series, centered)
+    if ((_f = ro.showLegend) !== null && _f !== void 0 ? _f : true) {
+        const items = model.series;
+        const gap = 18, swatch = 22, textW = 70;
+        const itemW = swatch + 6 + textW + gap;
+        let lx = W / 2 - (items.length * itemW - gap) / 2;
+        const ly = 92;
+        for (const s of items) {
+            parts.push(`<rect x="${n(lx)}" y="${ly - 9}" width="${swatch}" height="11" rx="2" fill="${s.color}"/>`);
+            parts.push(`<text x="${n(lx + swatch + 6)}" y="${ly}" font-family="${FONT}" font-size="13" fill="#374151">${esc(s.name)}</text>`);
+            lx += itemW;
+        }
+    }
+    parts.push(`</svg>`);
+    return parts.join("\n");
+}
+/** Convenience: records → canonical SVG in one call (the full deterministic pipeline). */
+function lineChartSvgFromRecords(rows, xKey, yKeys, layout = {}, render = {}) {
+    const model = buildLineChartModel(normalizeRecords(rows, xKey, yKeys), layout);
+    return { svg: renderLineChartSvg(model, render), model };
+}

package/dist/m0saic/charts/_shared/scale.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @m0saic/charts/_shared/scale — re-export of the canonical scale math.
+ *
+ * The implementation lives in `@m0saic/dsl-stdlib` (builders/scale.ts) so the
+ * whole m0saic ecosystem computes axes the same way (no drift). The chart/graph
+ * templates import it from here for locality; this file is intentionally a thin
+ * pass-through — do not fork the math.
+ */
+export { niceNum, linearScale, project, categoryCenters, formatTick, type LinearScale, type LinearScaleOptions, } from "@m0saic/dsl-stdlib";

package/dist/m0saic/charts/_shared/scale.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTick = exports.categoryCenters = exports.project = exports.linearScale = exports.niceNum = void 0;
+/**
+ * @m0saic/charts/_shared/scale — re-export of the canonical scale math.
+ *
+ * The implementation lives in `@m0saic/dsl-stdlib` (builders/scale.ts) so the
+ * whole m0saic ecosystem computes axes the same way (no drift). The chart/graph
+ * templates import it from here for locality; this file is intentionally a thin
+ * pass-through — do not fork the math.
+ */
+var dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+Object.defineProperty(exports, "niceNum", { enumerable: true, get: function () { return dsl_stdlib_1.niceNum; } });
+Object.defineProperty(exports, "linearScale", { enumerable: true, get: function () { return dsl_stdlib_1.linearScale; } });
+Object.defineProperty(exports, "project", { enumerable: true, get: function () { return dsl_stdlib_1.project; } });
+Object.defineProperty(exports, "categoryCenters", { enumerable: true, get: function () { return dsl_stdlib_1.categoryCenters; } });
+Object.defineProperty(exports, "formatTick", { enumerable: true, get: function () { return dsl_stdlib_1.formatTick; } });

package/dist/m0saic/charts/bar-graph/v1/anim.d.ts

@@ -0,0 +1,83 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph — Animation Helpers (Contract + Signatures)
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Central home for the animation *contract* used by the HERO bar graph.
+ *
+ * CANONICAL RULE:
+ *   - BarFill is the ONLY template that should generate FFmpeg expressions
+ *     for animated bar fill. (No scattered math in BarsStack/BarCell/etc.)
+ *
+ * WHY THIS EXISTS:
+ *   Animation math must be centralized so that:
+ *     1) Orientation/layout templates stay “boring”.
+ *     2) Timing + easing behavior is canonical across the entire HERO chart.
+ *     3) Easing/timing can be unit-tested independently of rendering.
+ *     4) Adding a new ease curve requires changing only this file (and BarFill).
+ *
+ * TIME UNITS:
+ *   Seconds (not ms). This matches:
+ *   - FFmpeg’s `t`
+ *   - overlay.startAtSec / enable expressions
+ *   - your existing templates (AnimatedWireframe, etc.)
+ *
+ * PRODUCTION BEHAVIOR (eventually):
+ *   computeBarTiming(index, anim) → { startAtSec, endAtSec }
+ *   easingExpr(ease, u) → FFmpeg-safe expression that maps u∈[0..1] → eased∈[0..1]
+ *   fillFractionExpr(targetFraction, timing, anim) → expression yielding fillFraction∈[0..1]
+ *
+ * GUIDELINES:
+ *   - NO side effects, NO template registration, NO rendering logic.
+ *   - All functions must be PURE and deterministic.
+ *   - FFmpeg expressions must be safe (parenthesized, no semicolons).
+ *   - Boundary stability: u(0)=0, u(1)=1, no NaNs, no negative surprises.
+ * ============================================================================
+ */
+import type { AnimConfig, EaseName } from "./types";
+export type BarTiming = {
+    /** Absolute start time (sec) for this bar's intro animation. */
+    startAtSec: number;
+    /** Absolute end time (sec) for this bar's intro animation. */
+    endAtSec: number;
+};
+/**
+ * Compute the absolute start/end timestamps for a bar's intro animation.
+ *
+ * PRODUCTION:
+ *   startAtSec = intro.delaySec + (index * intro.staggerSec)
+ *   endAtSec   = startAtSec + intro.durationSec
+ */
+export declare function computeBarTiming(index: number, anim: AnimConfig): BarTiming;
+/**
+ * Generate an FFmpeg expression string for the named easing function.
+ *
+ * PRODUCTION INTENT:
+ *   - linear:     u
+ *   - smoothstep: u*u*(3-2*u)
+ *   - easeInOut:  (may be same as smoothstep for v1, or a different canonical polynomial)
+ *
+ * @param ease - Easing function name (must match types.ts)
+ * @param uVar - The normalized progress variable name in the expression (default "u")
+ */
+export declare function easingExpr(ease: EaseName, uVar?: string): string;
+/**
+ * Build an FFmpeg expression for a bar's fill fraction.
+ *
+ * CANONICAL INTENT:
+ *   If reduceMotion:
+ *     return constant target fraction: `${fraction}`
+ *
+ *   Otherwise:
+ *     - Map time t into normalized u in [0..1] over [startAtSec..endAtSec]
+ *     - Apply easing to u
+ *     - Multiply by target fraction
+ *     - Clamp to [0..fraction]
+ *
+ * NOTE (scaffold):
+ *   We only return the reduceMotion constant today.
+ *   The animated expression will be implemented in BarFill (the sole owner
+ *   of FFmpeg fill math), potentially using helper pieces from this file.
+ */
+export declare function fillFractionExpr(fraction: number, _timing: BarTiming, anim: AnimConfig): string;

package/dist/m0saic/charts/bar-graph/v1/anim.js

@@ -0,0 +1,104 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph — Animation Helpers (Contract + Signatures)
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Central home for the animation *contract* used by the HERO bar graph.
+ *
+ * CANONICAL RULE:
+ *   - BarFill is the ONLY template that should generate FFmpeg expressions
+ *     for animated bar fill. (No scattered math in BarsStack/BarCell/etc.)
+ *
+ * WHY THIS EXISTS:
+ *   Animation math must be centralized so that:
+ *     1) Orientation/layout templates stay “boring”.
+ *     2) Timing + easing behavior is canonical across the entire HERO chart.
+ *     3) Easing/timing can be unit-tested independently of rendering.
+ *     4) Adding a new ease curve requires changing only this file (and BarFill).
+ *
+ * TIME UNITS:
+ *   Seconds (not ms). This matches:
+ *   - FFmpeg’s `t`
+ *   - overlay.startAtSec / enable expressions
+ *   - your existing templates (AnimatedWireframe, etc.)
+ *
+ * PRODUCTION BEHAVIOR (eventually):
+ *   computeBarTiming(index, anim) → { startAtSec, endAtSec }
+ *   easingExpr(ease, u) → FFmpeg-safe expression that maps u∈[0..1] → eased∈[0..1]
+ *   fillFractionExpr(targetFraction, timing, anim) → expression yielding fillFraction∈[0..1]
+ *
+ * GUIDELINES:
+ *   - NO side effects, NO template registration, NO rendering logic.
+ *   - All functions must be PURE and deterministic.
+ *   - FFmpeg expressions must be safe (parenthesized, no semicolons).
+ *   - Boundary stability: u(0)=0, u(1)=1, no NaNs, no negative surprises.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeBarTiming = computeBarTiming;
+exports.easingExpr = easingExpr;
+exports.fillFractionExpr = fillFractionExpr;
+/**
+ * Compute the absolute start/end timestamps for a bar's intro animation.
+ *
+ * PRODUCTION:
+ *   startAtSec = intro.delaySec + (index * intro.staggerSec)
+ *   endAtSec   = startAtSec + intro.durationSec
+ */
+function computeBarTiming(index, anim) {
+    const startAtSec = anim.intro.delaySec + index * anim.intro.staggerSec;
+    const endAtSec = startAtSec + anim.intro.durationSec;
+    return { startAtSec, endAtSec };
+}
+// ---------------------------------------------------------------------------
+// Easing expressions (FFmpeg-safe)
+// ---------------------------------------------------------------------------
+/**
+ * Generate an FFmpeg expression string for the named easing function.
+ *
+ * PRODUCTION INTENT:
+ *   - linear:     u
+ *   - smoothstep: u*u*(3-2*u)
+ *   - easeInOut:  (may be same as smoothstep for v1, or a different canonical polynomial)
+ *
+ * @param ease - Easing function name (must match types.ts)
+ * @param uVar - The normalized progress variable name in the expression (default "u")
+ */
+function easingExpr(ease, uVar = "u") {
+    // Scaffold only — BarFill will own actual expression generation first.
+    // We still provide a safe default that won't break if called accidentally.
+    if (ease === "smoothstep")
+        return `(${uVar})*(${uVar})*(3-2*(${uVar}))`;
+    if (ease === "easeInOut")
+        return `(${uVar})*(${uVar})*(3-2*(${uVar}))`;
+    return `${uVar}`; // linear
+}
+// ---------------------------------------------------------------------------
+// Fill fraction expression (placeholder)
+// ---------------------------------------------------------------------------
+/**
+ * Build an FFmpeg expression for a bar's fill fraction.
+ *
+ * CANONICAL INTENT:
+ *   If reduceMotion:
+ *     return constant target fraction: `${fraction}`
+ *
+ *   Otherwise:
+ *     - Map time t into normalized u in [0..1] over [startAtSec..endAtSec]
+ *     - Apply easing to u
+ *     - Multiply by target fraction
+ *     - Clamp to [0..fraction]
+ *
+ * NOTE (scaffold):
+ *   We only return the reduceMotion constant today.
+ *   The animated expression will be implemented in BarFill (the sole owner
+ *   of FFmpeg fill math), potentially using helper pieces from this file.
+ */
+function fillFractionExpr(fraction, _timing, anim) {
+    if (anim.reduceMotion)
+        return `${fraction}`;
+    // Placeholder: returning empty string forces BarFill to supply its own math for now.
+    return "";
+}

package/dist/m0saic/charts/bar-graph/v1/axis.d.ts

@@ -0,0 +1,51 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph — Axis Config Resolver
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Resolve an Orientation ("vertical" | "horizontal") into a complete
+ *   AxisConfig struct that every internal template consumes.
+ *
+ * WHY THIS EXISTS:
+ *   Orientation is a single user-facing knob, but it affects MANY downstream
+ *   decisions: which axis the fill grows along, where labels dock, which
+ *   direction grid lines run, where the baseline sits, how the DSL layout
+ *   string is built. Rather than each internal template branching on
+ *   orientation independently (error-prone, duplicated), we resolve once
+ *   and pass the AxisConfig through.
+ *
+ * PRODUCTION BEHAVIOR:
+ *   resolveAxisConfig("vertical") → {
+ *     fillAxis: "y",        // bars grow upward
+ *     layoutAxis: "x",      // bars laid out left-to-right
+ *     labelDock: "bottom",   // category labels below the plot
+ *     valueDock: "top",      // value labels above bars
+ *     gridDirection: "horizontal",  // gridlines are horizontal
+ *     baselineEdge: "bottom",       // zero-line at bottom
+ *   }
+ *
+ *   resolveAxisConfig("horizontal") → {
+ *     fillAxis: "x",        // bars grow rightward
+ *     layoutAxis: "y",      // bars laid out top-to-bottom
+ *     labelDock: "left",     // category labels to the left
+ *     valueDock: "right",    // value labels to the right
+ *     gridDirection: "vertical",    // gridlines are vertical
+ *     baselineEdge: "left",         // zero-line at left
+ *   }
+ *
+ * GUIDELINES:
+ *   - This is a PURE function — no side effects, no template registration.
+ *   - If new axis-dependent properties are added (e.g., scroll direction),
+ *     extend AxisConfig in types.ts and handle both cases here.
+ *   - Never branch on orientation anywhere else; always use AxisConfig.
+ * ============================================================================
+ */
+import type { AxisConfig, Orientation } from "./types";
+/**
+ * Resolve orientation into a full AxisConfig struct.
+ *
+ * @param orientation - "vertical" or "horizontal"
+ * @returns Complete AxisConfig consumed by all internal templates.
+ */
+export declare function resolveAxisConfig(orientation: Orientation): AxisConfig;

package/dist/m0saic/charts/bar-graph/v1/axis.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph — Axis Config Resolver
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Resolve an Orientation ("vertical" | "horizontal") into a complete
+ *   AxisConfig struct that every internal template consumes.
+ *
+ * WHY THIS EXISTS:
+ *   Orientation is a single user-facing knob, but it affects MANY downstream
+ *   decisions: which axis the fill grows along, where labels dock, which
+ *   direction grid lines run, where the baseline sits, how the DSL layout
+ *   string is built. Rather than each internal template branching on
+ *   orientation independently (error-prone, duplicated), we resolve once
+ *   and pass the AxisConfig through.
+ *
+ * PRODUCTION BEHAVIOR:
+ *   resolveAxisConfig("vertical") → {
+ *     fillAxis: "y",        // bars grow upward
+ *     layoutAxis: "x",      // bars laid out left-to-right
+ *     labelDock: "bottom",   // category labels below the plot
+ *     valueDock: "top",      // value labels above bars
+ *     gridDirection: "horizontal",  // gridlines are horizontal
+ *     baselineEdge: "bottom",       // zero-line at bottom
+ *   }
+ *
+ *   resolveAxisConfig("horizontal") → {
+ *     fillAxis: "x",        // bars grow rightward
+ *     layoutAxis: "y",      // bars laid out top-to-bottom
+ *     labelDock: "left",     // category labels to the left
+ *     valueDock: "right",    // value labels to the right
+ *     gridDirection: "vertical",    // gridlines are vertical
+ *     baselineEdge: "left",         // zero-line at left
+ *   }
+ *
+ * GUIDELINES:
+ *   - This is a PURE function — no side effects, no template registration.
+ *   - If new axis-dependent properties are added (e.g., scroll direction),
+ *     extend AxisConfig in types.ts and handle both cases here.
+ *   - Never branch on orientation anywhere else; always use AxisConfig.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAxisConfig = resolveAxisConfig;
+/**
+ * Resolve orientation into a full AxisConfig struct.
+ *
+ * @param orientation - "vertical" or "horizontal"
+ * @returns Complete AxisConfig consumed by all internal templates.
+ */
+function resolveAxisConfig(orientation) {
+    if (orientation === "horizontal") {
+        return {
+            fillAxis: "x",
+            layoutAxis: "y",
+            labelDock: "left",
+            valueDock: "right",
+            gridDirection: "vertical",
+            baselineEdge: "left",
+        };
+    }
+    // Default: vertical
+    return {
+        fillAxis: "y",
+        layoutAxis: "x",
+        labelDock: "bottom",
+        valueDock: "top",
+        gridDirection: "horizontal",
+        baselineEdge: "bottom",
+    };
+}

package/dist/m0saic/charts/bar-graph/v1/bar-graph.d.ts

@@ -0,0 +1,44 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph/v1 — Canonical Bar Graph (data-viz primitive)
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   The PUBLIC top-level template for the canonical Level Bar Graph.
+ *   This is the ONLY template consumers interact with directly.
+ *
+ *   Owns:
+ *     1) DOMAIN COMPUTATION
+ *        - Derive min/max from values[] (or honor explicit minValue/maxValue)
+ *        - Normalize each value into a [0..1] fraction for bar fill
+ *
+ *     2) AXIS CONFIG RESOLUTION
+ *        - Call resolveAxisConfig(orientation) once
+ *        - Pass the resulting AxisConfig to every child template
+ *
+ *     3) CHILD COMPOSITION (top-down)
+ *        - ChartFrame → PlotArea → BarsStack → BarCell[] → BarFill
+ *        - Grid (via PlotArea)
+ *        - Labels (global overlay on top)
+ *
+ *     4) SOURCE + OVERLAY WIRING
+ *        - Build the top-level MosaicDocument with children map
+ *        - Wire source refs to child renderables
+ *
+ *     5) PROPS SCHEMA & DEFAULTS
+ *        - definePropsSchema for editors + validation
+ *        - defaults + “resolve helpers” from defaults.ts
+ *
+ * HARD RULES:
+ *   - Do NOT contain FFmpeg expressions — BarFill only.
+ *   - Do NOT contain micro-layout logic — BarsStack + BarCell.
+ *   - Do NOT duplicate orientation branching — resolve once → AxisConfig.
+ *
+ * CANONICAL UNITS:
+ *   - gap is PIXELS
+ *   - padding is PIXELS (resolved to {top,right,bottom,left})
+ * ============================================================================
+ */
+import type { MosaicTemplate } from "@m0saic/types";
+import type { BarGraphProps } from "./types";
+export declare const ChartsBarGraph: MosaicTemplate<BarGraphProps>;