@m0saic/templates 0.2.0

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

@@ -0,0 +1,95 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph — Value label formatting
+ * ============================================================================
+ *
+ * Pure formatters for the three canonical value-label modes.
+ *   - "raw":     value.toFixed(decimals)
+ *   - "percent": ((value / max) * 100).toFixed(decimals) + "%"
+ *   - "compact": k/M/B/T suffix notation, e.g. 1500 → "1.5K", 2.3e9 → "2.3B"
+ *
+ * No side effects, no template registration, no rendering — these run inside
+ * any internal that needs to display a value.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatValue = formatValue;
+exports.niceAxis = niceAxis;
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+function formatValue(value, format, decimals, domain, suffix) {
+    const base = (() => {
+        var _a;
+        switch (format) {
+            case "raw":
+                return value.toFixed(decimals);
+            case "percent": {
+                const max = (_a = domain === null || domain === void 0 ? void 0 : domain.max) !== null && _a !== void 0 ? _a : 100;
+                if (max === 0)
+                    return (0).toFixed(decimals) + "%";
+                return ((value / max) * 100).toFixed(decimals) + "%";
+            }
+            case "compact":
+                return formatCompact(value, decimals);
+        }
+    })();
+    return suffix ? `${base}${suffix}` : base;
+}
+function formatCompact(n, decimals) {
+    const abs = Math.abs(n);
+    const sign = n < 0 ? "-" : "";
+    if (abs >= 1e12)
+        return sign + (abs / 1e12).toFixed(decimals) + "T";
+    if (abs >= 1e9)
+        return sign + (abs / 1e9).toFixed(decimals) + "B";
+    if (abs >= 1e6)
+        return sign + (abs / 1e6).toFixed(decimals) + "M";
+    if (abs >= 1e3)
+        return sign + (abs / 1e3).toFixed(decimals) + "K";
+    return sign + abs.toFixed(decimals);
+}
+/**
+ * Round a raw step up to the nearest "nice" value. Delegates the Heckbert
+ * nice-number rule to the shared `niceNum` in `@m0saic/dsl-stdlib` (single
+ * source of truth across the graph base), passing bar-graph's augmented set
+ * `[1, 2, 2.5, 5]` so ranges like 0..120 resolve to step 25 (6 ticks) instead
+ * of 50 (4 ticks).
+ */
+function niceStep(rawStep) {
+    if (!Number.isFinite(rawStep) || rawStep <= 0)
+        return 1;
+    return (0, dsl_stdlib_1.niceNum)(rawStep, [1, 2, 2.5, 5]);
+}
+/**
+ * Compute a "nice" axis (round-number ticks) covering [min..max] with
+ * approximately `targetTickCount` ticks. Returns `min`, `max`, `step`, and
+ * the full tick list min → max. The resulting axis is guaranteed to contain
+ * the input range (niceMin ≤ min, niceMax ≥ max).
+ *
+ * Example: niceAxis(0, 85, 6) → { min: 0, max: 100, step: 20,
+ *   ticks: [0, 20, 40, 60, 80, 100] }.
+ *
+ * @param min Raw lower bound.
+ * @param max Raw upper bound.
+ * @param targetTickCount Desired tick count including both endpoints.
+ *                         The actual count may differ slightly so the step
+ *                         stays a nice round number.
+ */
+function niceAxis(min, max, targetTickCount) {
+    if (max === min) {
+        return { min, max: max + 1, step: 1, ticks: [min, max + 1] };
+    }
+    const range = Math.abs(max - min);
+    const rawStep = range / Math.max(1, targetTickCount - 1);
+    const step = niceStep(rawStep);
+    const niceMin = Math.floor(min / step) * step;
+    const niceMax = Math.ceil(max / step) * step;
+    const ticks = [];
+    // Use a small epsilon to handle floating-point drift at the upper bound.
+    const eps = step * 1e-6;
+    for (let v = niceMin; v <= niceMax + eps; v += step) {
+        // Round to step's natural decimal precision to avoid "0.30000000000000004".
+        ticks.push(Number(v.toFixed(6)));
+    }
+    return { min: niceMin, max: niceMax, step, ticks };
+}

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

@@ -0,0 +1,31 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph — Entry Point
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Single import entry for the entire bar-graph template family.
+ *
+ *   Importing this file triggers side-effect registration of ALL templates
+ *   (public + internal) via their registerTemplate() calls.
+ *
+ * WHAT THIS FILE DOES:
+ *   1) Imports all internal templates (for side-effect registration)
+ *   2) Re-exports the public ChartsBarGraph template
+ *   3) Re-exports shared public types for external consumers
+ *
+ * GUIDELINES:
+ *   - Every new internal template MUST be imported here.
+ *   - Only the public template (ChartsBarGraph) is exported by name.
+ *   - Internal templates are registered but not re-exported — they are
+ *     accessed only via renderNestedTemplate by template ID.
+ * ============================================================================
+ */
+import "./internal/chart-frame";
+import "./internal/plot-area";
+import "./internal/bars-stack";
+import "./internal/bar-cell";
+import "./internal/bar-fill";
+import "./internal/labels";
+export { ChartsBarGraph } from "./bar-graph";
+export type { BarGraphProps, Orientation } from "./types";

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

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph — Entry Point
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Single import entry for the entire bar-graph template family.
+ *
+ *   Importing this file triggers side-effect registration of ALL templates
+ *   (public + internal) via their registerTemplate() calls.
+ *
+ * WHAT THIS FILE DOES:
+ *   1) Imports all internal templates (for side-effect registration)
+ *   2) Re-exports the public ChartsBarGraph template
+ *   3) Re-exports shared public types for external consumers
+ *
+ * GUIDELINES:
+ *   - Every new internal template MUST be imported here.
+ *   - Only the public template (ChartsBarGraph) is exported by name.
+ *   - Internal templates are registered but not re-exported — they are
+ *     accessed only via renderNestedTemplate by template ID.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartsBarGraph = void 0;
+// Internal templates — imported for side-effect registration only.
+require("./internal/chart-frame");
+require("./internal/plot-area");
+require("./internal/bars-stack");
+require("./internal/bar-cell");
+require("./internal/bar-fill");
+require("./internal/labels");
+// Public template
+var bar_graph_1 = require("./bar-graph");
+Object.defineProperty(exports, "ChartsBarGraph", { enumerable: true, get: function () { return bar_graph_1.ChartsBarGraph; } });

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

@@ -0,0 +1,53 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph/internal/bar-cell/v1
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Represents ONE bar in the chart.
+ *
+ *   BarCell owns the per-bar *micro-composition* (track + fill + labels),
+ *   but it does NOT own any FFmpeg animation math.
+ *
+ *   Owns:
+ *     - Track (background rail behind the fill)
+ *     - Instantiating BarFill (animated colored fill) via renderNestedTemplate
+ *     - (Production) Delegating labels to internal/labels/v1 OR composing
+ *       label overlays in a consistent way
+ *     - Highlight state visuals (neutral emphasis: outline/glow/lift)
+ *     - Per-bar cornerRadius consistency across track + fill
+ *
+ * Does NOT own:
+ *   - Animation math / expressions (BarFill owns ALL FFmpeg expressions)
+ *   - Multi-bar layout (BarsStack positions BarCell instances)
+ *   - Domain normalization (parent computes `fraction`)
+ *   - Orientation branching (consume AxisConfig; do not check orientation)
+ *
+ * COMPOSITION (canonical layering):
+ *   Base layer: Track (static)
+ *   Overlay 1:  Fill  (BarFill child)
+ *   Overlay 2+: Labels / highlight accents (production)
+ *
+ * Recommended m0saic:
+ *   - Minimal: "F{F}" (track with fill overlay)
+ *   - If labels are handled here: "F{F{F}}" (track + fill + labels overlay)
+ *
+ * ORIENTATION HANDLING:
+ *   BarCell should NOT re-interpret vertical vs horizontal.
+ *   It only needs AxisConfig for label docking rules (valueDock/labelDock).
+ *   Fill direction is entirely handled by BarFill using axisConfig.fillAxis.
+ *
+ * PRODUCTION BEHAVIOR (eventual):
+ *   render(props, ctx) → MosaicDocument:
+ *     1) Build track source if track.show (static rail)
+ *     2) renderNestedTemplate(bar-fill/v1, fillProps, ctx)
+ *     3) If labels enabled: delegate to internal/labels/v1 for consistent typography
+ *     4) Compose overlay layers (track → fill → labels/highlight)
+ *     5) If highlighted: add neutral emphasis overlay (not error styling)
+ *     6) Return document
+ * ============================================================================
+ */
+import type { MosaicTemplate } from "@m0saic/types";
+import type { BarCellProps } from "../types";
+export declare const BAR_CELL_TEMPLATE_ID: import("@m0saic/types").TemplateId;
+export declare const BarCell: MosaicTemplate<BarCellProps>;

package/dist/m0saic/charts/bar-graph/v1/internal/bar-cell.js

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarCell = exports.BAR_CELL_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");
+const defaults_1 = require("../defaults");
+const format_1 = require("../format");
+exports.BAR_CELL_TEMPLATE_ID = (0, types_1.asTemplateId)("@m0saic/charts/bar-graph/internal/bar-cell/v1");
+/**
+ * Props schema note:
+ *   Nested object validation (axisConfig/anim/valueLabels/track) may be shallow
+ *   depending on your schema system. That’s fine for scaffold; production can
+ *   tighten validation later if desired.
+ */
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    axisConfig: {
+        type: "group",
+        required: true,
+        description: "Resolved axis configuration (docks + fillAxis info).",
+    },
+    fraction: {
+        type: "number",
+        required: true,
+        description: "Domain-normalized fill fraction (0..1).",
+        meta: { constraints: { min: 0, max: 1 } },
+    },
+    value: {
+        type: "number",
+        required: true,
+        description: "Raw numeric value for this bar (label formatting).",
+    },
+    label: {
+        meta: { control: { placeholder: "none" } },
+        type: "string",
+        required: false,
+        description: "Optional category label for this bar.",
+    },
+    minValue: {
+        type: "number",
+        required: true,
+        description: "Resolved domain min (for percent value-label formatting).",
+    },
+    maxValue: {
+        type: "number",
+        required: true,
+        description: "Resolved domain max (for percent value-label formatting).",
+    },
+    color: {
+        type: "string",
+        required: true,
+        description: "Resolved per-bar fill color.",
+        meta: { constraints: { isColor: true }, control: { colorPicker: true } },
+    },
+    index: {
+        type: "number",
+        required: true,
+        description: "Zero-based bar index (used for stagger timing).",
+        meta: { constraints: { min: 0 } },
+    },
+    highlighted: {
+        type: "boolean",
+        required: true,
+        description: "Whether this bar is highlighted (neutral emphasis).",
+    },
+    track: {
+        type: "group",
+        required: true,
+        description: "Track display configuration (show/hide).",
+    },
+    valueLabels: {
+        type: "group",
+        required: true,
+        description: "Value label display configuration (show/format/decimals).",
+    },
+    anim: {
+        type: "group",
+        required: true,
+        description: "Animation configuration forwarded to BarFill.",
+    },
+    cornerRadius: {
+        type: "number",
+        required: true,
+        description: "Geometric radius fraction (0..1) shared by track + fill.",
+        meta: { constraints: { min: 0, max: 1 } },
+    },
+});
+exports.BarCell = {
+    id: exports.BAR_CELL_TEMPLATE_ID,
+    label: "Bar Graph — Bar Cell (internal)",
+    version: 1,
+    internal: true,
+    // Building block of the DEPRECATED @m0saic/charts/bar-graph/v1 composition —
+    // superseded with it (v2 is a flat single document and needs none of these).
+    deprecated: {
+        reason: "Internal piece of the deprecated 5-deep bar-graph/v1 nested composition; bar-graph/v2 renders the same chart as one flat document.",
+        replacement: (0, types_1.asTemplateId)("@m0saic/charts/bar-graph/v2"),
+        since: "2026-09-16",
+    },
+    description: "Internal: composes track + BarFill + optional labels for a single bar.",
+    capabilities: { tier: "core" },
+    tags: ["data-viz", "bar-graph", "internal", "bar-cell"],
+    propsSchema,
+    defaultProps: {
+        axisConfig: {
+            fillAxis: "y",
+            layoutAxis: "x",
+            labelDock: "bottom",
+            valueDock: "top",
+            gridDirection: "horizontal",
+            baselineEdge: "bottom",
+        },
+        fraction: 0.5,
+        value: 50,
+        label: undefined,
+        minValue: 0,
+        maxValue: 100,
+        color: "#f97316",
+        index: 0,
+        highlighted: false,
+        track: defaults_1.DEFAULT_TRACK,
+        valueLabels: defaults_1.DEFAULT_VALUE_LABELS,
+        anim: defaults_1.DEFAULT_ANIM,
+        cornerRadius: defaults_1.DEFAULT_CORNER_RADIUS,
+    },
+    async render(props, ctx) {
+        const children = {};
+        children["fill"] = await (0, template_utils_1.renderNestedTemplate)("@m0saic/charts/bar-graph/internal/bar-fill/v1", {
+            axisConfig: props.axisConfig,
+            fraction: props.fraction,
+            color: props.color,
+            index: props.index,
+            anim: props.anim,
+            cornerRadius: props.cornerRadius,
+        }, ctx);
+        // m0-shaped layout: the cell is a banded split that reserves a slot for
+        // the value label so the bar never overlaps it. No animation tracking is
+        // needed — the bar grows inside its own band, the label sits in its own.
+        //
+        //   vertical:   row split [label-band, fill-band] (weights 3 : 17)
+        //   horizontal: col split [fill-band, label-band] (weights 17 : 3)
+        //   no-label:   just the fill ("1")
+        //
+        // Per-bar mode means the bar's maximum visible extent is the fill band,
+        // not the full cell. That's fine: BarsStack sets the same cell size for
+        // every bar, so all bars share the same fill-band scale.
+        const isVertical = props.axisConfig.fillAxis === "y";
+        const fillRef = { type: "mosaic", ref: "fill" };
+        if (!props.valueLabels.show) {
+            return {
+                kind: "mosaic_document",
+                version: 1,
+                sources: [fillRef],
+                assets: {},
+                m0: "1",
+                fps: ctx.target.fps,
+                durationMs: ctx.target.durationMs,
+                children,
+            };
+        }
+        const text = (0, format_1.formatValue)(props.value, props.valueLabels.format, props.valueLabels.decimals, { max: props.maxValue }, props.valueLabels.suffix);
+        // Per-bar value labels are the "data" — sized larger and brighter than
+        // the axis tick numbers so the two roles are visually distinct (axis
+        // ticks read as scale; bar labels read as values).
+        const fontSize = Math.max(12, Math.round(ctx.output.height * 0.024));
+        const valueLabel = {
+            type: "text",
+            visual: { backgroundColor: "black@0" },
+            layers: [
+                {
+                    content: { kind: "literal", text },
+                    style: { fontSize, fontColor: "#ffffff" },
+                    placement: { fit: "contain", hAlign: "center", vAlign: "middle" },
+                },
+            ],
+        };
+        // Source order matches m0 slot order:
+        //   vertical (row): label slot first (top), then fill slot (bottom)
+        //   horizontal (col): fill slot first (left), then label slot (right)
+        const sources = isVertical
+            ? [valueLabel, fillRef]
+            : [fillRef, valueLabel];
+        const m0 = isVertical
+            ? (0, dsl_stdlib_1.weightedSplit)([3, 17], "row")
+            : (0, dsl_stdlib_1.weightedSplit)([17, 3], "col");
+        return {
+            kind: "mosaic_document",
+            version: 1,
+            sources,
+            assets: {},
+            m0: m0,
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+            children,
+        };
+    }
+};
+(0, template_utils_1.registerTemplate)(exports.BarCell);

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

@@ -0,0 +1,4 @@
+import type { MosaicTemplate } from "@m0saic/types";
+import type { BarFillProps } from "../types";
+export declare const BAR_FILL_TEMPLATE_ID: import("@m0saic/types").TemplateId;
+export declare const BarFill: MosaicTemplate<BarFillProps>;

package/dist/m0saic/charts/bar-graph/v1/internal/bar-fill.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarFill = exports.BAR_FILL_TEMPLATE_ID = void 0;
+const types_1 = require("@m0saic/types");
+const template_utils_1 = require("@m0saic/template-utils");
+const defaults_1 = require("../defaults");
+const anim_1 = require("../anim");
+exports.BAR_FILL_TEMPLATE_ID = (0, types_1.asTemplateId)("@m0saic/charts/bar-graph/internal/bar-fill/v1");
+/**
+ * Props schema note:
+ *   Your props schema system may not deeply validate nested objects like
+ *   axisConfig/anim today. That’s fine for scaffold — these fields are still
+ *   “real” props for internal calls, and production can improve schema support
+ *   later if desired.
+ */
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    // axisConfig is required for fill axis + baseline anchoring decisions.
+    axisConfig: {
+        // If your schema system doesn’t support "group", keep as "any"/"object"
+        // in production or add a dedicated axisConfig schema.
+        type: "group",
+        required: true,
+        description: "Resolved axis configuration (fillAxis/layoutAxis/docks).",
+    },
+    fraction: {
+        type: "number",
+        required: true,
+        description: "Target fill fraction (0..1) from domain normalization.",
+        meta: { constraints: { min: 0, max: 1 } },
+    },
+    color: {
+        type: "string",
+        required: true,
+        description: "Fill color.",
+        meta: { constraints: { isColor: true }, control: { colorPicker: true } },
+    },
+    index: {
+        type: "number",
+        required: true,
+        description: "Bar index (0-based) used for stagger timing.",
+        meta: { constraints: { min: 0 } },
+    },
+    anim: {
+        type: "group",
+        required: true,
+        description: "Animation config (intro timing, easing, reduceMotion).",
+    },
+    cornerRadius: {
+        type: "number",
+        required: true,
+        description: "Geometric radius fraction (0..1) for the leading edge of the fill.",
+        meta: { constraints: { min: 0, max: 1 } },
+    },
+});
+exports.BarFill = {
+    id: exports.BAR_FILL_TEMPLATE_ID,
+    label: "Bar Graph — Bar Fill (internal)",
+    version: 1,
+    internal: true,
+    // Building block of the DEPRECATED @m0saic/charts/bar-graph/v1 composition —
+    // superseded with it (v2 is a flat single document and needs none of these).
+    deprecated: {
+        reason: "Internal piece of the deprecated 5-deep bar-graph/v1 nested composition; bar-graph/v2 renders the same chart as one flat document.",
+        replacement: (0, types_1.asTemplateId)("@m0saic/charts/bar-graph/v2"),
+        since: "2026-09-16",
+    },
+    description: "Internal leaf: sole owner of FFmpeg expressions for animated bar fill.",
+    capabilities: { tier: "core" },
+    tags: ["data-viz", "bar-graph", "internal", "bar-fill", "animated"],
+    propsSchema,
+    /**
+     * Default props are only for local testing/debug. In real composition,
+     * BarCell will pass these.
+     */
+    defaultProps: {
+        axisConfig: {
+            fillAxis: "y",
+            layoutAxis: "x",
+            labelDock: "bottom",
+            valueDock: "top",
+            gridDirection: "horizontal",
+            baselineEdge: "bottom",
+        },
+        fraction: 0.5,
+        color: "#f97316",
+        index: 0,
+        anim: defaults_1.DEFAULT_ANIM,
+        cornerRadius: 0.15,
+    },
+    async render(props, ctx) {
+        const timing = (0, anim_1.computeBarTiming)(props.index, props.anim);
+        const dur = props.anim.intro.durationSec;
+        const reduceMotion = props.anim.reduceMotion;
+        // u01(dur) uses `lt` (local time since overlay.startAtSec) by default.
+        // Stagger is achieved via startAtSec from computeBarTiming, not by
+        // offsetting u01. The ramp clamps to 1 and holds — no enable window,
+        // so the bar never disappears after the intro animation completes.
+        //
+        // When reduceMotion is true, eased collapses to "1": the bar snaps to
+        // its final fraction immediately, alpha is full, and startAtSec is 0.
+        // We still emit the overlay (vs. skipping it) so the crop expression
+        // sees the final fraction — otherwise the lavfi color source would
+        // fill the whole tile and ignore `fraction`.
+        const uExpr = (0, template_utils_1.u01)(dur);
+        const eased = reduceMotion ? "1" : (0, anim_1.easingExpr)(props.anim.intro.ease, uExpr);
+        const alphaExpr = reduceMotion ? "1" : eased;
+        const startAtSec = reduceMotion ? 0 : timing.startAtSec;
+        // Axis-aware crop. Overlay expr context provides w/h (overlay
+        // dimensions in the parent tile), not iw/ih or W/H.
+        //
+        // Vertical (fillAxis="y"): bar top edge travels from y=h (off-screen
+        // below) toward y=h - h*fraction (final position). Visible band = the
+        // bottom h*fraction of the tile.
+        //
+        // Horizontal (fillAxis="x"): bar left edge travels from x=-w
+        // (off-screen left) toward x=w*fraction - w (final position). Visible
+        // band = the left w*fraction of the tile.
+        let xExpr = "0";
+        let yExpr = "0";
+        if (props.axisConfig.fillAxis === "y") {
+            yExpr = `h-(h*${props.fraction})*(${eased})`;
+        }
+        else {
+            xExpr = `(w*${props.fraction})*(${eased})-w`;
+        }
+        const fill = {
+            type: "lavfi",
+            fitMode: "tile",
+            lavfi: `color=${props.color}`,
+            overlay: {
+                startAtSec,
+                alpha: alphaExpr,
+                xExpr,
+                yExpr,
+            },
+        };
+        // Base transparent, overlay our moving bar
+        const transparent = {
+            type: "lavfi",
+            fitMode: "tile",
+            lavfi: "color=black@0",
+        };
+        return {
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: "1{1}",
+            sources: [transparent, fill],
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+        };
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.BarFill);

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

@@ -0,0 +1,41 @@
+/**
+ * ============================================================================
+ * @m0saic/charts/bar-graph/internal/bars-stack/v1
+ * ============================================================================
+ *
+ * RESPONSIBILITY:
+ *   Layout-only container that arranges N bars along the layout axis.
+ *
+ *   Owns:
+ *     - Building the m0saic DSL string that splits space for N bars along
+ *       axisConfig.layoutAxis
+ *     - Instantiating N BarCell children via renderNestedTemplate
+ *     - Forwarding per-bar props (fraction, color, label, index, highlight)
+ *     - Applying gap spacing between bars (production strategy)
+ *     - Resolving per-bar colors from barColor (single vs array)
+ *
+ * COMPOSITION:
+ *   BarsStack sits inside PlotArea. For each bar i:
+ *     - renderNestedTemplate("@m0saic/charts/bar-graph/internal/bar-cell/v1", barCellProps, ctx)
+ *     - store child in children[`bar-${i}`]
+ *   The M0 string is an N-way split along layoutAxis:
+ *     - layoutAxis="x" → `N(bar-0,bar-1,...,bar-(N-1))` (horizontal split)
+ *     - layoutAxis="y" → `N[bar-0,bar-1,...,bar-(N-1)]` (vertical split)
+ *
+ * GAP (CANONICAL NOTE):
+ *   `gap` is in PIXELS (not fraction).
+ *   Production implementation will decide the concrete strategy to realize
+ *   gaps deterministically (e.g., via spacer tiles / weighted slots / or a
+ *   standardized placement inset mechanism if available).
+ *
+ * WHAT NOT TO DO:
+ *   - Do NOT own animation — BarFill only.
+ *   - Do NOT compute fill fractions — receive `fractions[]` from parent.
+ *   - Do NOT draw grid/baseline — PlotArea/Grid owns that.
+ *   - Do NOT format numbers — Labels internal owns formatting.
+ * ============================================================================
+ */
+import type { MosaicTemplate } from "@m0saic/types";
+import type { BarsStackProps } from "../types";
+export declare const BARS_STACK_TEMPLATE_ID: import("@m0saic/types").TemplateId;
+export declare const BarsStack: MosaicTemplate<BarsStackProps>;