@motionscript/charts 0.1.0 → 0.1.1-alpha.1

package/dist/kit/style.d.ts

@@ -0,0 +1,254 @@
+/**
+ * The chart family's style: one `style` entry per chart, built from the groups
+ * below, so a look saved off one chart lays onto any other (a field the other
+ * chart does not draw is dropped). A chart spreads the shared groups and adds a
+ * `marks` group of its own.
+ */
+import { type Fill, type StrokeResolved, type Stroke as _Stroke, type StyleInput, type TextStyle, type FillResolved as _FillResolved, type Type as _Type } from "@motionscript/sdk";
+import type { AxisConfig, ChartSeries, LegendConfig } from "./shared.js";
+/** The style family every chart shares; a host keys saved styles by it. */
+export declare const CHART_STYLE_FAMILY = "chart";
+/** The out-of-the-box series colours, cycled by series (or row) index. */
+export declare const CHART_PALETTE_DEFAULT: readonly ["#4f8cff", "#2fbf8f", "#f5a524", "#e5547a", "#9b6cf0"];
+export declare const CHART_COLORS: {
+    /** A colour per series (a pie's or radial's per row), cycled. */
+    palette: _Type<Fill[], _FillResolved[][], false>;
+    /** Values, legend captions, centre text. */
+    foreground: _Type<Fill, _FillResolved[], false>;
+    /** Axis markers and captions, spoke labels. */
+    muted: _Type<Fill, _FillResolved[], false>;
+    /** Behind the plot; none by default, so the chart reads against the stage. */
+    background: _Type<Fill, _FillResolved[], false>;
+};
+export declare const CHART_TEXT: {
+    /** Empty: the scene's default face. */
+    fontFamily: _Type<string, string, false>;
+    /** Marker and legend size at 1080p; titles and values scale from it. */
+    fontSize: _Type<number, number, false>;
+    fontWeight: _Type<number, number, false>;
+};
+export declare const CARTESIAN_GRID: {
+    /** The lines along the value ticks of a column chart (one per tick); empty draws none. */
+    horizontalGrid: _Type<_Stroke, StrokeResolved[], false>;
+    /** The lines under the category markers; empty draws none. */
+    verticalGrid: _Type<_Stroke, StrokeResolved[], false>;
+    /** The baseline and the value-axis rule; empty draws none. */
+    axisStroke: _Type<_Stroke, StrokeResolved[], false>;
+    /** Read as the chart is built: whether the category (x) axis row is drawn. */
+    showXAxis: _Type<boolean, boolean, false>;
+    /** Read as the chart is built: whether the value (y) axis column is drawn. */
+    showYAxis: _Type<boolean, boolean, false>;
+};
+export type LegendPosition = "bottom" | "top" | "right" | "none";
+export type LegendSwatch = "square" | "circle" | "line";
+export declare const CHART_LEGEND: {
+    /** Read as the chart is built: where the legend sits, or `none`. */
+    legend: _Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+    swatch: _Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+};
+/** The type fields, and the two text colours: what every text helper reads. */
+export interface ChartTextStyle {
+    readonly foreground: Fill;
+    readonly muted: Fill;
+    readonly fontFamily: string;
+    readonly fontSize: number;
+    readonly fontWeight: number;
+}
+/** The fields every chart's style resolves, whichever groups it spreads. */
+export interface ChartStyleBase extends ChartTextStyle {
+    readonly palette: readonly Fill[];
+    readonly background: Fill;
+    readonly legend: LegendPosition;
+    readonly swatch: LegendSwatch;
+}
+/** The cartesian grid fields, for the line and bar charts. */
+export interface CartesianStyle extends ChartStyleBase {
+    readonly horizontalGrid: StrokeResolved[];
+    readonly verticalGrid: StrokeResolved[];
+    readonly axisStroke: StrokeResolved[];
+    readonly showXAxis: boolean;
+    readonly showYAxis: boolean;
+}
+/** The rule and track fields a preset restates so its rules read on its background (a chart keeps those it draws). */
+declare const _PRESET_RULES: {
+    horizontalGrid: _Type<_Stroke, StrokeResolved[], false>;
+    gridStroke: _Type<_Stroke, StrokeResolved[], false>;
+    spokeStroke: _Type<_Stroke, StrokeResolved[], false>;
+    track: _Type<Fill, _FillResolved[], false>;
+};
+/** A preset's fields: any chart's, so one preset dresses every chart. */
+export type ChartStylePreset = StyleInput<typeof CHART_COLORS & typeof CHART_TEXT & typeof _PRESET_RULES>;
+/** Ready-made looks, each stating every colour so applying one replaces the last. */
+export declare const CHART_STYLE_PRESETS: {
+    midnight: {
+        palette: ("#4f8cff" | "#2fbf8f" | "#f5a524" | "#e5547a" | "#9b6cf0")[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: never[];
+    };
+    paper: {
+        palette: string[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: string;
+    };
+    ember: {
+        palette: string[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: string;
+    };
+    neon: {
+        palette: string[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: never[];
+    };
+    ocean: {
+        palette: string[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: string;
+    };
+    sunset: {
+        palette: string[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: never[];
+    };
+    pastel: {
+        palette: string[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: never[];
+    };
+    mono: {
+        palette: string[];
+        foreground: string;
+        muted: string;
+        horizontalGrid: {
+            weight: number;
+            fill: string;
+        };
+        gridStroke: {
+            weight: number;
+            fill: string;
+        };
+        spokeStroke: {
+            weight: number;
+            fill: string;
+        };
+        track: string;
+        background: never[];
+    };
+};
+/** Series `index`'s colour: its own `fill`, else the palette's, cycled. */
+export declare function paletteFill(style: Pick<ChartStyleBase, "palette">, index: number, own?: Fill): Fill;
+/** {@link paletteFill} for a series. */
+export declare function seriesFill(style: Pick<ChartStyleBase, "palette">, series: ChartSeries, index: number): Fill;
+/** Axis markers, spoke labels: muted, at the base size. */
+export declare function markerText(style: ChartTextStyle, textAlign?: TextStyle["textAlign"]): TextStyle;
+/** Axis captions: muted, a step larger and heavier than the markers. */
+export declare function titleText(style: ChartTextStyle): TextStyle;
+/** Values on marks and legend captions: the foreground, at the base size. */
+export declare function valueText(style: ChartTextStyle, textAlign?: TextStyle["textAlign"]): TextStyle;
+/**
+ * The kit axis parts' config from a style. `x` is the axis under the plot;
+ * its grid lines are vertical (one per x marker), the `y` axis's horizontal.
+ */
+export declare function axisConfigOf(style: Pick<CartesianStyle, "verticalGrid" | "horizontalGrid"> & ChartTextStyle, axis: "x" | "y"): AxisConfig;
+/** The kit legend's config: captions in the foreground, the swatch shaped by `swatch`. */
+export declare function legendConfigOf(style: ChartTextStyle & Pick<ChartStyleBase, "swatch">): LegendConfig;
+export {};
+//# sourceMappingURL=style.d.ts.map

package/dist/kit/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/kit/style.ts"],"names":[],"mappings":"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"}

package/dist/kit/style.js

@@ -0,0 +1,197 @@
+/**
+ * The chart family's style: one `style` entry per chart, built from the groups
+ * below, so a look saved off one chart lays onto any other (a field the other
+ * chart does not draw is dropped). A chart spreads the shared groups and adds a
+ * `marks` group of its own.
+ */
+import { Types, } from "@motionscript/sdk";
+/** The style family every chart shares; a host keys saved styles by it. */
+export const CHART_STYLE_FAMILY = "chart";
+/** The out-of-the-box series colours, cycled by series (or row) index. */
+export const CHART_PALETTE_DEFAULT = ["#4f8cff", "#2fbf8f", "#f5a524", "#e5547a", "#9b6cf0"];
+export const CHART_COLORS = {
+    /** A colour per series (a pie's or radial's per row), cycled. */
+    palette: Types.palette(CHART_PALETTE_DEFAULT),
+    /** Values, legend captions, centre text. */
+    foreground: Types.fill("#f4f4f5"),
+    /** Axis markers and captions, spoke labels. */
+    muted: Types.fill("#a1a1aa"),
+    /** Behind the plot; none by default, so the chart reads against the stage. */
+    background: Types.fill([]),
+};
+export const CHART_TEXT = {
+    /** Empty: the scene's default face. */
+    fontFamily: Types.font(""),
+    /** Marker and legend size at 1080p; titles and values scale from it. */
+    fontSize: Types.number(28, { min: 8, max: 160, step: 1, unit: "px" }),
+    fontWeight: Types.number(500, { min: 100, max: 900, step: 100 }),
+};
+export const CARTESIAN_GRID = {
+    /** The lines along the value ticks of a column chart (one per tick); empty draws none. */
+    horizontalGrid: Types.stroke({ weight: 2, fill: "white/15" }),
+    /** The lines under the category markers; empty draws none. */
+    verticalGrid: Types.stroke([]),
+    /** The baseline and the value-axis rule; empty draws none. */
+    axisStroke: Types.stroke([]),
+    /** Read as the chart is built: whether the category (x) axis row is drawn. */
+    showXAxis: Types.boolean(true, { animatable: false }),
+    /** Read as the chart is built: whether the value (y) axis column is drawn. */
+    showYAxis: Types.boolean(true, { animatable: false }),
+};
+export const CHART_LEGEND = {
+    /** Read as the chart is built: where the legend sits, or `none`. */
+    legend: Types.oneOf(["bottom", "top", "right", "none"], { animatable: false }),
+    swatch: Types.oneOf(["square", "circle", "line"]),
+};
+/** The rule and track fields a preset restates so its rules read on its background (a chart keeps those it draws). */
+const _PRESET_RULES = {
+    horizontalGrid: CARTESIAN_GRID.horizontalGrid,
+    gridStroke: Types.stroke([]),
+    spokeStroke: Types.stroke([]),
+    track: Types.fill([]),
+};
+/** Ready-made looks, each stating every colour so applying one replaces the last. */
+export const CHART_STYLE_PRESETS = {
+    midnight: {
+        palette: [...CHART_PALETTE_DEFAULT],
+        foreground: "#f4f4f5",
+        muted: "#a1a1aa",
+        horizontalGrid: { weight: 2, fill: "white/15" },
+        gridStroke: { weight: 2, fill: "white/15" },
+        spokeStroke: { weight: 2, fill: "white/15" },
+        track: "white/10",
+        background: [],
+    },
+    paper: {
+        palette: ["#2563eb", "#059669", "#d97706", "#db2777", "#7c3aed"],
+        foreground: "#1c1917",
+        muted: "#57534e",
+        horizontalGrid: { weight: 2, fill: "#1c1917/12" },
+        gridStroke: { weight: 2, fill: "#1c1917/12" },
+        spokeStroke: { weight: 2, fill: "#1c1917/12" },
+        track: "#1c1917/12",
+        background: "#fafaf9",
+    },
+    ember: {
+        palette: ["#d9603b", "#8194ad", "#e0a93b", "#5e9d6b", "#9ec85a"],
+        foreground: "#e9e1d4",
+        muted: "#8a7f70",
+        horizontalGrid: { weight: 2, fill: "#2c2820" },
+        gridStroke: { weight: 2, fill: "#2c2820" },
+        spokeStroke: { weight: 2, fill: "#2c2820" },
+        track: "#2c2820",
+        background: "#15130e",
+    },
+    neon: {
+        palette: ["#22d3ee", "#a3e635", "#f472b6", "#facc15", "#818cf8"],
+        foreground: "#ffffff",
+        muted: "#94a3b8",
+        horizontalGrid: { weight: 2, fill: "white/10" },
+        gridStroke: { weight: 2, fill: "white/10" },
+        spokeStroke: { weight: 2, fill: "white/10" },
+        track: "white/10",
+        background: [],
+    },
+    ocean: {
+        palette: ["#0ea5e9", "#14b8a6", "#6366f1", "#38bdf8", "#2dd4bf"],
+        foreground: "#e0f2fe",
+        muted: "#7dd3fc",
+        horizontalGrid: { weight: 2, fill: "#7dd3fc/20" },
+        gridStroke: { weight: 2, fill: "#7dd3fc/20" },
+        spokeStroke: { weight: 2, fill: "#7dd3fc/20" },
+        track: "#7dd3fc/20",
+        background: "#082f49",
+    },
+    sunset: {
+        palette: ["#f97316", "#ef4444", "#ec4899", "#f59e0b", "#a855f7"],
+        foreground: "#fff7ed",
+        muted: "#fdba74",
+        horizontalGrid: { weight: 2, fill: "#fdba74/20" },
+        gridStroke: { weight: 2, fill: "#fdba74/20" },
+        spokeStroke: { weight: 2, fill: "#fdba74/20" },
+        track: "#fdba74/20",
+        background: [],
+    },
+    pastel: {
+        palette: ["#a5b4fc", "#f9a8d4", "#86efac", "#fde68a", "#7dd3fc"],
+        foreground: "#f8fafc",
+        muted: "#cbd5e1",
+        horizontalGrid: { weight: 2, fill: "white/12" },
+        gridStroke: { weight: 2, fill: "white/12" },
+        spokeStroke: { weight: 2, fill: "white/12" },
+        track: "white/12",
+        background: [],
+    },
+    mono: {
+        palette: ["#fafafa", "#a3a3a3", "#737373", "#d4d4d4", "#525252"],
+        foreground: "#fafafa",
+        muted: "#a3a3a3",
+        horizontalGrid: { weight: 2, fill: "white/12" },
+        gridStroke: { weight: 2, fill: "white/12" },
+        spokeStroke: { weight: 2, fill: "white/12" },
+        track: "white/12",
+        background: [],
+    },
+};
+/** Series `index`'s colour: its own `fill`, else the palette's, cycled. */
+export function paletteFill(style, index, own) {
+    if (own != null)
+        return own;
+    const palette = style.palette;
+    return palette.length > 0 ? palette[index % palette.length] : "white";
+}
+/** {@link paletteFill} for a series. */
+export function seriesFill(style, series, index) {
+    return paletteFill(style, index, series.fill);
+}
+function face(style) {
+    return style.fontFamily ? { fontFamily: style.fontFamily } : {};
+}
+/** Axis markers, spoke labels: muted, at the base size. */
+export function markerText(style, textAlign = "center") {
+    return { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign, fill: style.muted };
+}
+/** Axis captions: muted, a step larger and heavier than the markers. */
+export function titleText(style) {
+    return {
+        ...face(style),
+        fontSize: Math.round(style.fontSize * 1.1),
+        fontWeight: Math.min(900, style.fontWeight + 100),
+        textAlign: "center",
+        fill: style.muted,
+    };
+}
+/** Values on marks and legend captions: the foreground, at the base size. */
+export function valueText(style, textAlign = "center") {
+    return { ...face(style), fontSize: style.fontSize, fontWeight: Math.min(900, style.fontWeight + 100), textAlign, fill: style.foreground };
+}
+/**
+ * The kit axis parts' config from a style. `x` is the axis under the plot;
+ * its grid lines are vertical (one per x marker), the `y` axis's horizontal.
+ */
+export function axisConfigOf(style, axis) {
+    const gap = Math.round(style.fontSize * 0.6);
+    return {
+        labelStyle: markerText(style, axis === "x" ? "center" : "right"),
+        titleStyle: titleText(style),
+        lineStyle: axis === "x" ? style.verticalGrid : style.horizontalGrid,
+        tickPadding: axis === "x" ? { top: gap } : { right: gap },
+        titlePadding: axis === "x" ? { top: Math.round(gap / 2) } : { right: gap },
+    };
+}
+/** The kit legend's config: captions in the foreground, the swatch shaped by `swatch`. */
+export function legendConfigOf(style) {
+    const size = Math.max(8, Math.round(style.fontSize * 0.6));
+    const marker = style.swatch === "line"
+        ? { width: Math.round(size * 2), height: Math.max(3, Math.round(size / 4)), borderRadius: size }
+        : style.swatch === "circle"
+            ? { width: size, height: size, borderRadius: size / 2 }
+            : { width: size, height: size, borderRadius: Math.round(size / 4) };
+    return {
+        padding: 0,
+        textStyle: { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: "left", fill: style.foreground },
+        itemGap: Math.round(style.fontSize * 1.4),
+        markerStyle: { ...marker, stroke: [], shadow: [] },
+    };
+}
+//# sourceMappingURL=style.js.map

package/dist/kit/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/kit/style.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,KAAK,GASN,MAAM,mBAAmB,CAAA;AAI1B,2EAA2E;AAC3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,OAAO,CAAA;AAEzC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAU,CAAA;AAErG,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,iEAAiE;IACjE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,qBAAqB,CAAC;IAC7C,4CAA4C;IAC5C,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;IACjC,+CAA+C;IAC/C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;IAC5B,8EAA8E;IAC9E,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;CAC3B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,uCAAuC;IACvC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;IAC1B,wEAAwE;IACxE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACrE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;CACjE,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,0FAA0F;IAC1F,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;IAC7D,8DAA8D;IAC9D,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAC9B,8DAA8D;IAC9D,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;IACrD,8EAA8E;IAC9E,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;CACtD,CAAA;AAKD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,oEAAoE;IACpE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAU,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;IACvF,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;CAC3D,CAAA;AA4BD,sHAAsH;AACtH,MAAM,aAAa,GAAG;IACpB,cAAc,EAAE,cAAc,CAAC,cAAc;IAC7C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;CACtB,CAAA;AAKD,qFAAqF;AACrF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,QAAQ,EAAE;QACR,OAAO,EAAE,CAAC,GAAG,qBAAqB,CAAC;QACnC,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC/C,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC3C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC5C,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,EAAE;KACf;IACD,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QAChE,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QACjD,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QAC7C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QAC9C,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,SAAS;KACtB;IACD,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QAChE,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE;QAC9C,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE;QAC1C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE;QAC3C,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,SAAS;KACtB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QAChE,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC/C,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC3C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC5C,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,EAAE;KACf;IACD,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QAChE,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QACjD,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QAC7C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QAC9C,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,SAAS;KACtB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QAChE,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QACjD,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QAC7C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;QAC9C,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,EAAE;KACf;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QAChE,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC/C,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC3C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC5C,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,EAAE;KACf;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QAChE,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC/C,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC3C,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC5C,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,EAAE;KACf;CACyC,CAAA;AAE5C,2EAA2E;AAC3E,MAAM,UAAU,WAAW,CAAC,KAAsC,EAAE,KAAa,EAAE,GAAU;IAC3F,IAAI,GAAG,IAAI,IAAI;QAAE,OAAO,GAAG,CAAA;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;IAC7B,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;AACvE,CAAC;AAED,wCAAwC;AACxC,MAAM,UAAU,UAAU,CAAC,KAAsC,EAAE,MAAmB,EAAE,KAAa;IACnG,OAAO,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;AAC/C,CAAC;AAED,SAAS,IAAI,CAAC,KAAyC;IACrD,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;AACjE,CAAC;AAED,2DAA2D;AAC3D,MAAM,UAAU,UAAU,CAAC,KAAqB,EAAE,YAAoC,QAAQ;IAC5F,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,CAAA;AACjH,CAAC;AAED,wEAAwE;AACxE,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,OAAO;QACL,GAAG,IAAI,CAAC,KAAK,CAAC;QACd,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC;QAC1C,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC;QACjD,SAAS,EAAE,QAAQ;QACnB,IAAI,EAAE,KAAK,CAAC,KAAK;KAClB,CAAA;AACH,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,SAAS,CAAC,KAAqB,EAAE,YAAoC,QAAQ;IAC3F,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,CAAA;AAC3I,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,KAA+E,EAAE,IAAe;IAC3H,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAA;IAC5C,OAAO;QACL,UAAU,EAAE,UAAU,CAAC,KAAK,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;QAChE,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC;QAC5B,SAAS,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc;QACnE,WAAW,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;QACzD,YAAY,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;KAC3E,CAAA;AACH,CAAC;AAED,0FAA0F;AAC1F,MAAM,UAAU,cAAc,CAAC,KAAsD;IACnF,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAA;IAC1D,MAAM,MAAM,GACV,KAAK,CAAC,MAAM,KAAK,MAAM;QACrB,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE;QAChG,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ;YACzB,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE;YACvD,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,CAAA;IACzE,OAAO;QACL,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE;QAChI,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC;QACzC,WAAW,EAAE,EAAE,GAAG,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;KACnD,CAAA;AACH,CAAC","sourcesContent":["/**\n * The chart family's style: one `style` entry per chart, built from the groups\n * below, so a look saved off one chart lays onto any other (a field the other\n * chart does not draw is dropped). A chart spreads the shared groups and adds a\n * `marks` group of its own.\n */\n\nimport {\n  Types,\n  type Fill,\n  type StrokeResolved,\n  type Stroke as _Stroke,\n  type StyleInput,\n  type TextStyle,\n  // Named so the emitted style types reach these through the sdk, not core.\n  type FillResolved as _FillResolved,\n  type Type as _Type,\n} from \"@motionscript/sdk\"\n\nimport type { AxisConfig, ChartSeries, LegendConfig } from \"./shared\"\n\n/** The style family every chart shares; a host keys saved styles by it. */\nexport const CHART_STYLE_FAMILY = \"chart\"\n\n/** The out-of-the-box series colours, cycled by series (or row) index. */\nexport const CHART_PALETTE_DEFAULT = [\"#4f8cff\", \"#2fbf8f\", \"#f5a524\", \"#e5547a\", \"#9b6cf0\"] as const\n\nexport const CHART_COLORS = {\n  /** A colour per series (a pie's or radial's per row), cycled. */\n  palette: Types.palette(CHART_PALETTE_DEFAULT),\n  /** Values, legend captions, centre text. */\n  foreground: Types.fill(\"#f4f4f5\"),\n  /** Axis markers and captions, spoke labels. */\n  muted: Types.fill(\"#a1a1aa\"),\n  /** Behind the plot; none by default, so the chart reads against the stage. */\n  background: Types.fill([]),\n}\n\nexport const CHART_TEXT = {\n  /** Empty: the scene's default face. */\n  fontFamily: Types.font(\"\"),\n  /** Marker and legend size at 1080p; titles and values scale from it. */\n  fontSize: Types.number(28, { min: 8, max: 160, step: 1, unit: \"px\" }),\n  fontWeight: Types.number(500, { min: 100, max: 900, step: 100 }),\n}\n\nexport const CARTESIAN_GRID = {\n  /** The lines along the value ticks of a column chart (one per tick); empty draws none. */\n  horizontalGrid: Types.stroke({ weight: 2, fill: \"white/15\" }),\n  /** The lines under the category markers; empty draws none. */\n  verticalGrid: Types.stroke([]),\n  /** The baseline and the value-axis rule; empty draws none. */\n  axisStroke: Types.stroke([]),\n  /** Read as the chart is built: whether the category (x) axis row is drawn. */\n  showXAxis: Types.boolean(true, { animatable: false }),\n  /** Read as the chart is built: whether the value (y) axis column is drawn. */\n  showYAxis: Types.boolean(true, { animatable: false }),\n}\n\nexport type LegendPosition = \"bottom\" | \"top\" | \"right\" | \"none\"\nexport type LegendSwatch = \"square\" | \"circle\" | \"line\"\n\nexport const CHART_LEGEND = {\n  /** Read as the chart is built: where the legend sits, or `none`. */\n  legend: Types.oneOf([\"bottom\", \"top\", \"right\", \"none\"] as const, { animatable: false }),\n  swatch: Types.oneOf([\"square\", \"circle\", \"line\"] as const),\n}\n\n/** The type fields, and the two text colours: what every text helper reads. */\nexport interface ChartTextStyle {\n  readonly foreground: Fill\n  readonly muted: Fill\n  readonly fontFamily: string\n  readonly fontSize: number\n  readonly fontWeight: number\n}\n\n/** The fields every chart's style resolves, whichever groups it spreads. */\nexport interface ChartStyleBase extends ChartTextStyle {\n  readonly palette: readonly Fill[]\n  readonly background: Fill\n  readonly legend: LegendPosition\n  readonly swatch: LegendSwatch\n}\n\n/** The cartesian grid fields, for the line and bar charts. */\nexport interface CartesianStyle extends ChartStyleBase {\n  readonly horizontalGrid: StrokeResolved[]\n  readonly verticalGrid: StrokeResolved[]\n  readonly axisStroke: StrokeResolved[]\n  readonly showXAxis: boolean\n  readonly showYAxis: boolean\n}\n\n/** The rule and track fields a preset restates so its rules read on its background (a chart keeps those it draws). */\nconst _PRESET_RULES = {\n  horizontalGrid: CARTESIAN_GRID.horizontalGrid,\n  gridStroke: Types.stroke([]),\n  spokeStroke: Types.stroke([]),\n  track: Types.fill([]),\n}\n\n/** A preset's fields: any chart's, so one preset dresses every chart. */\nexport type ChartStylePreset = StyleInput<typeof CHART_COLORS & typeof CHART_TEXT & typeof _PRESET_RULES>\n\n/** Ready-made looks, each stating every colour so applying one replaces the last. */\nexport const CHART_STYLE_PRESETS = {\n  midnight: {\n    palette: [...CHART_PALETTE_DEFAULT],\n    foreground: \"#f4f4f5\",\n    muted: \"#a1a1aa\",\n    horizontalGrid: { weight: 2, fill: \"white/15\" },\n    gridStroke: { weight: 2, fill: \"white/15\" },\n    spokeStroke: { weight: 2, fill: \"white/15\" },\n    track: \"white/10\",\n    background: [],\n  },\n  paper: {\n    palette: [\"#2563eb\", \"#059669\", \"#d97706\", \"#db2777\", \"#7c3aed\"],\n    foreground: \"#1c1917\",\n    muted: \"#57534e\",\n    horizontalGrid: { weight: 2, fill: \"#1c1917/12\" },\n    gridStroke: { weight: 2, fill: \"#1c1917/12\" },\n    spokeStroke: { weight: 2, fill: \"#1c1917/12\" },\n    track: \"#1c1917/12\",\n    background: \"#fafaf9\",\n  },\n  ember: {\n    palette: [\"#d9603b\", \"#8194ad\", \"#e0a93b\", \"#5e9d6b\", \"#9ec85a\"],\n    foreground: \"#e9e1d4\",\n    muted: \"#8a7f70\",\n    horizontalGrid: { weight: 2, fill: \"#2c2820\" },\n    gridStroke: { weight: 2, fill: \"#2c2820\" },\n    spokeStroke: { weight: 2, fill: \"#2c2820\" },\n    track: \"#2c2820\",\n    background: \"#15130e\",\n  },\n  neon: {\n    palette: [\"#22d3ee\", \"#a3e635\", \"#f472b6\", \"#facc15\", \"#818cf8\"],\n    foreground: \"#ffffff\",\n    muted: \"#94a3b8\",\n    horizontalGrid: { weight: 2, fill: \"white/10\" },\n    gridStroke: { weight: 2, fill: \"white/10\" },\n    spokeStroke: { weight: 2, fill: \"white/10\" },\n    track: \"white/10\",\n    background: [],\n  },\n  ocean: {\n    palette: [\"#0ea5e9\", \"#14b8a6\", \"#6366f1\", \"#38bdf8\", \"#2dd4bf\"],\n    foreground: \"#e0f2fe\",\n    muted: \"#7dd3fc\",\n    horizontalGrid: { weight: 2, fill: \"#7dd3fc/20\" },\n    gridStroke: { weight: 2, fill: \"#7dd3fc/20\" },\n    spokeStroke: { weight: 2, fill: \"#7dd3fc/20\" },\n    track: \"#7dd3fc/20\",\n    background: \"#082f49\",\n  },\n  sunset: {\n    palette: [\"#f97316\", \"#ef4444\", \"#ec4899\", \"#f59e0b\", \"#a855f7\"],\n    foreground: \"#fff7ed\",\n    muted: \"#fdba74\",\n    horizontalGrid: { weight: 2, fill: \"#fdba74/20\" },\n    gridStroke: { weight: 2, fill: \"#fdba74/20\" },\n    spokeStroke: { weight: 2, fill: \"#fdba74/20\" },\n    track: \"#fdba74/20\",\n    background: [],\n  },\n  pastel: {\n    palette: [\"#a5b4fc\", \"#f9a8d4\", \"#86efac\", \"#fde68a\", \"#7dd3fc\"],\n    foreground: \"#f8fafc\",\n    muted: \"#cbd5e1\",\n    horizontalGrid: { weight: 2, fill: \"white/12\" },\n    gridStroke: { weight: 2, fill: \"white/12\" },\n    spokeStroke: { weight: 2, fill: \"white/12\" },\n    track: \"white/12\",\n    background: [],\n  },\n  mono: {\n    palette: [\"#fafafa\", \"#a3a3a3\", \"#737373\", \"#d4d4d4\", \"#525252\"],\n    foreground: \"#fafafa\",\n    muted: \"#a3a3a3\",\n    horizontalGrid: { weight: 2, fill: \"white/12\" },\n    gridStroke: { weight: 2, fill: \"white/12\" },\n    spokeStroke: { weight: 2, fill: \"white/12\" },\n    track: \"white/12\",\n    background: [],\n  },\n} satisfies Record<string, ChartStylePreset>\n\n/** Series `index`'s colour: its own `fill`, else the palette's, cycled. */\nexport function paletteFill(style: Pick<ChartStyleBase, \"palette\">, index: number, own?: Fill): Fill {\n  if (own != null) return own\n  const palette = style.palette\n  return palette.length > 0 ? palette[index % palette.length] : \"white\"\n}\n\n/** {@link paletteFill} for a series. */\nexport function seriesFill(style: Pick<ChartStyleBase, \"palette\">, series: ChartSeries, index: number): Fill {\n  return paletteFill(style, index, series.fill)\n}\n\nfunction face(style: Pick<ChartTextStyle, \"fontFamily\">): Pick<TextStyle, \"fontFamily\"> {\n  return style.fontFamily ? { fontFamily: style.fontFamily } : {}\n}\n\n/** Axis markers, spoke labels: muted, at the base size. */\nexport function markerText(style: ChartTextStyle, textAlign: TextStyle[\"textAlign\"] = \"center\"): TextStyle {\n  return { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign, fill: style.muted }\n}\n\n/** Axis captions: muted, a step larger and heavier than the markers. */\nexport function titleText(style: ChartTextStyle): TextStyle {\n  return {\n    ...face(style),\n    fontSize: Math.round(style.fontSize * 1.1),\n    fontWeight: Math.min(900, style.fontWeight + 100),\n    textAlign: \"center\",\n    fill: style.muted,\n  }\n}\n\n/** Values on marks and legend captions: the foreground, at the base size. */\nexport function valueText(style: ChartTextStyle, textAlign: TextStyle[\"textAlign\"] = \"center\"): TextStyle {\n  return { ...face(style), fontSize: style.fontSize, fontWeight: Math.min(900, style.fontWeight + 100), textAlign, fill: style.foreground }\n}\n\n/**\n * The kit axis parts' config from a style. `x` is the axis under the plot;\n * its grid lines are vertical (one per x marker), the `y` axis's horizontal.\n */\nexport function axisConfigOf(style: Pick<CartesianStyle, \"verticalGrid\" | \"horizontalGrid\"> & ChartTextStyle, axis: \"x\" | \"y\"): AxisConfig {\n  const gap = Math.round(style.fontSize * 0.6)\n  return {\n    labelStyle: markerText(style, axis === \"x\" ? \"center\" : \"right\"),\n    titleStyle: titleText(style),\n    lineStyle: axis === \"x\" ? style.verticalGrid : style.horizontalGrid,\n    tickPadding: axis === \"x\" ? { top: gap } : { right: gap },\n    titlePadding: axis === \"x\" ? { top: Math.round(gap / 2) } : { right: gap },\n  }\n}\n\n/** The kit legend's config: captions in the foreground, the swatch shaped by `swatch`. */\nexport function legendConfigOf(style: ChartTextStyle & Pick<ChartStyleBase, \"swatch\">): LegendConfig {\n  const size = Math.max(8, Math.round(style.fontSize * 0.6))\n  const marker =\n    style.swatch === \"line\"\n      ? { width: Math.round(size * 2), height: Math.max(3, Math.round(size / 4)), borderRadius: size }\n      : style.swatch === \"circle\"\n        ? { width: size, height: size, borderRadius: size / 2 }\n        : { width: size, height: size, borderRadius: Math.round(size / 4) }\n  return {\n    padding: 0,\n    textStyle: { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: \"left\", fill: style.foreground },\n    itemGap: Math.round(style.fontSize * 1.4),\n    markerStyle: { ...marker, stroke: [], shadow: [] },\n  }\n}\n"]}

package/dist/kit/vertical-axis.d.ts

@@ -1,60 +1,45 @@
-import { type NodeOf, type Node2D, type Node2DProps } from "@motionscript/sdk";
+import { type NodeOf, type Node2D, type Node2DProps as _Node2DProps } from "@motionscript/sdk";
 import { type Arrival } from "./motion.js";
 import { type AxisConfig, type Range } from "./shared.js";
-export interface VerticalAxisProps extends Node2DProps {
-    /** `[min, max]` of the vertical scale the markers are positioned within. */
-    range: Range;
-    /**
-     * Tick values (in data units) to draw up the axis, each placed by its fraction
-     * across {@link VerticalAxisProps.range}. Need not be evenly spaced or include
-     * the ends.
-     */
-    markers: number[];
-    /**
-     * How each marker is captioned, one per entry of `markers` and in its order.
-     * Empty (the default), or short, captions a marker with its bare numeric
-     * reading; a chart with a number format on this axis writes them through it.
-     */
-    captions: string[];
-    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
-    axis: AxisConfig;
-    /**
-     * Rotated caption drawn in the gutter to the left of the marker column. Empty
-     * string (the default) hides it — no caption node is built and no label gutter
-     * is reserved.
-     */
-    label: string;
-}
-/** How a tick value is captioned — see {@link VerticalAxisProps.captions}. */
-export type MarkerLabel = (value: number) => string;
 /** What a marker's caption reads: the one listed for its value, else its bare reading. */
 export declare function markerCaption(s: {
     readonly markers: readonly number[];
     readonly captions: readonly string[];
 }, value: number): string;
+/** The gap between an axis's markers and the plot, and between the markers and the caption, read off its config. */
+export declare function axisPads(axis: AxisConfig, side: "top" | "right"): {
+    tick: number;
+    title: number;
+};
 /**
- * The numeric vertical axis shared by the cartesian charts: a **column of
- * {@link Text} nodes**, one per marker value, running top-to-bottom (highest
- * value at the top). Pure layout — no `Graphics` — so the markers are real text
- * nodes the scene can measure, restyle, or animate individually.
- *
- * Each marker is positioned so its centre lands exactly on its value's fraction
- * across `range` within the axis's filled height, so unevenly-spaced markers
- * land where their values fall. Both the caption and the position are *bound*,
- * not snapshotted: a chart that rescales its axes (see `LineChart.zoomTo`)
- * tweens `range`/`markers` live. Only the marker **count** is fixed at
- * construction.
- *
- * `enter` staggers them in **bottom-to-top**: each marker starts pushed a
- * little to the right and transparent, then fades and slides left into place.
- * The resting state is the landed one, so a chart that is never told to enter
- * still reads as a finished chart.
+ * A column of right-aligned captions beside the plot: `place(i)` is caption
+ * `i`'s centre height in the column (y-up), whose height it is handed. The
+ * value axis and a horizontal bar chart's category axis are both this column.
+ */
+export declare function captionColumn(spec: {
+    readonly count: number;
+    readonly axis: () => AxisConfig;
+    readonly text: (i: number) => string;
+    readonly place: (i: number, height: number) => number;
+    readonly arrivals: () => Readonly<Record<string, Arrival>>;
+    readonly opacity?: (i: number) => number;
+    readonly label: string;
+}): Node2D;
+/**
+ * The numeric vertical axis the cartesian charts share: a column of {@link Text}
+ * markers, highest at the top, each centred on its value's fraction across
+ * `range` and right-aligned against the plot. Caption and position are bound, so
+ * a rescale tweens live; only the marker count is fixed at construction. The
+ * resting state is landed.
  */
 export declare const VerticalAxis: import("@motionscript/sdk").Component<"verticalAxis", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    /** Tick values in data units, each placed by its fraction across `range`; need not be even or include the ends. */
     readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** One caption per marker in its order; a missing one reads as the bare numeric value. */
     readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
     readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    /** Rotated caption in the gutter left of the markers; empty builds no caption node and reserves no gutter. */
     readonly label: "";
     readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
 }>, {
@@ -62,18 +47,24 @@ export declare const VerticalAxis: import("@motionscript/sdk").Component<"vertic
         readonly stagger: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
         readonly slide: import("@motionscript/sdk").Type<number, number, false>;
     };
-}, null, Node2D<Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+}, null, Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    /** Tick values in data units, each placed by its fraction across `range`; need not be even or include the ends. */
     readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** One caption per marker in its order; a missing one reads as the bare numeric value. */
     readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
     readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    /** Rotated caption in the gutter left of the markers; empty builds no caption node and reserves no gutter. */
     readonly label: "";
     readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
 }>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     readonly range: import("@motionscript/sdk").Type<Range, Range, false>;
+    /** Tick values in data units, each placed by its fraction across `range`; need not be even or include the ends. */
     readonly markers: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** One caption per marker in its order; a missing one reads as the bare numeric value. */
     readonly captions: import("@motionscript/sdk").Type<string[], string[], false>;
     readonly axis: import("@motionscript/sdk").Type<AxisConfig, AxisConfig, false>;
+    /** Rotated caption in the gutter left of the markers; empty builds no caption node and reserves no gutter. */
     readonly label: "";
     readonly arrivals: import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
 }>, {
@@ -81,6 +72,6 @@ export declare const VerticalAxis: import("@motionscript/sdk").Component<"vertic
         readonly stagger: import("@motionscript/sdk").Type<number | undefined, number | undefined, false>;
         readonly slide: import("@motionscript/sdk").Type<number, number, false>;
     };
-}, Node2D<Node2DProps>>>>;
+}, Node2D<_Node2DProps>>>>;
 export type VerticalAxis = NodeOf<typeof VerticalAxis>;
 //# sourceMappingURL=vertical-axis.d.ts.map

package/dist/kit/vertical-axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-axis.d.ts","sourceRoot":"","sources":["../../src/kit/vertical-axis.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAA8D,KAAK,OAAO,EAAE,MAAM,UAAU,CAAA;AACnG,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAA;IACZ;;;;OAIG;IACH,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,oFAAoF;IACpF,IAAI,EAAE,UAAU,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAKD,8EAA8E;AAC9E,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;AAEnD,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGrI;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiHvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,YAAY,CAAC,CAAA"}
+{"version":3,"file":"vertical-axis.d.ts","sourceRoot":"","sources":["../../src/kit/vertical-axis.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAK1B,OAAO,EAA8D,KAAK,OAAO,EAAE,MAAM,UAAU,CAAA;AACnG,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AAIjB,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGrI;AAED,oHAAoH;AACpH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAEjG;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,UAAU,CAAA;IAC/B,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACpC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACrD,QAAQ,CAAC,QAAQ,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,GAAG,MAAM,CAiCT;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;IAIrB,mHAAmH;;IAEnH,0FAA0F;;;IAG1F,8GAA8G;;;;;;;;;;IAL9G,mHAAmH;;IAEnH,0FAA0F;;;IAG1F,8GAA8G;;;;;IAL9G,mHAAmH;;IAEnH,0FAA0F;;;IAG1F,8GAA8G;;;;;;;;0BAwDhH,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,YAAY,CAAC,CAAA"}