@motionscript/charts 0.1.1-alpha.0 → 0.1.1-alpha.2

package/dist/line-chart/chart-line.d.ts

@@ -1,10 +1,20 @@
-import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type Stroke, type StrokeResolved, type Vector2 } from "@motionscript/sdk";
-import { type RegionBox } from "./shared.js";
-/** One series of a {@link LineChart}: a rounded polyline through pre-mapped pixel `points`, one {@link Graphics2D} command list. `progress` traces it in; `enabled` shows or hides it wholesale. */
+import { type Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type Stroke, type StrokeResolved, type Vector2 } from "@motionscript/sdk";
+import { type LineCurve, type RegionBox } from "./shared.js";
+/** The x a trace at `progress` has reached, across `points` ordered along x. */
+export declare function traceX(points: readonly Vector2[], progress: number): number;
+/**
+ * One series of a {@link LineChart}: its line through pre-mapped pixel `points`,
+ * shaped by `curve`, and a dot on each point. `progress` traces it in from the
+ * left; `enabled` shows or hides it wholesale.
+ */
 export declare const ChartLine: import("@motionscript/sdk").Component<"chartLine", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */
     readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    readonly curve: import("@motionscript/sdk").Type<LineCurve, LineCurve, false>;
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** A dot of `dotSize` on each point, in `dotFill`; none at size 0. */
+    readonly dotSize: 0;
+    readonly dotFill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
     /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
     readonly progress: 1;
     /** Whether the line is drawn at all, flipped alongside its legend entry. */
@@ -17,10 +27,17 @@ export declare const ChartLine: import("@motionscript/sdk").Component<"chartLine
         readonly from: import("@motionscript/sdk").Type<number, number, false>;
         readonly to: import("@motionscript/sdk").Type<number, number, false>;
     };
+    readonly hold: {
+        readonly shown: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    };
 }, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */
     readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    readonly curve: import("@motionscript/sdk").Type<LineCurve, LineCurve, false>;
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** A dot of `dotSize` on each point, in `dotFill`; none at size 0. */
+    readonly dotSize: 0;
+    readonly dotFill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
     /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
     readonly progress: 1;
     /** Whether the line is drawn at all, flipped alongside its legend entry. */
@@ -31,7 +48,11 @@ export declare const ChartLine: import("@motionscript/sdk").Component<"chartLine
 }>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
     /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */
     readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    readonly curve: import("@motionscript/sdk").Type<LineCurve, LineCurve, false>;
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** A dot of `dotSize` on each point, in `dotFill`; none at size 0. */
+    readonly dotSize: 0;
+    readonly dotFill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
     /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
     readonly progress: 1;
     /** Whether the line is drawn at all, flipped alongside its legend entry. */
@@ -44,6 +65,77 @@ export declare const ChartLine: import("@motionscript/sdk").Component<"chartLine
         readonly from: import("@motionscript/sdk").Type<number, number, false>;
         readonly to: import("@motionscript/sdk").Type<number, number, false>;
     };
+    readonly hold: {
+        readonly shown: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    };
 }, _Node2D<_Node2DProps>>>>;
 export type ChartLine = NodeOf<typeof ChartLine>;
+/**
+ * The fill under one series of a {@link LineChart}: down to `base` (the series
+ * below it in a stack) or, without one, to the `baseline`. Drawn by its own node
+ * so every area sits under every line; the chart binds its trace, switch and
+ * opacity to its line's, so the two move as one.
+ */
+export declare const ChartArea: import("@motionscript/sdk").Component<"chartArea", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** The series' points, as its line has them. */
+    readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    /** The line the area fills down to, at the same x positions; empty for the baseline. */
+    readonly base: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    /** Pixel y of the baseline. */
+    readonly baseline: 0;
+    readonly curve: import("@motionscript/sdk").Type<LineCurve, LineCurve, false>;
+    readonly area: import("@motionscript/sdk").Type<"none" | "solid" | "gradient", "none" | "solid" | "gradient", false>;
+    /** The series colour; the area paints it at `areaOpacity`, a gradient fading it out towards the bottom. */
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly areaOpacity: 0.4;
+    readonly progress: 1;
+    readonly enabled: true;
+    readonly spotlight: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
+    readonly dimOpacity: 0.2;
+}>, {}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** The series' points, as its line has them. */
+    readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    /** The line the area fills down to, at the same x positions; empty for the baseline. */
+    readonly base: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    /** Pixel y of the baseline. */
+    readonly baseline: 0;
+    readonly curve: import("@motionscript/sdk").Type<LineCurve, LineCurve, false>;
+    readonly area: import("@motionscript/sdk").Type<"none" | "solid" | "gradient", "none" | "solid" | "gradient", false>;
+    /** The series colour; the area paints it at `areaOpacity`, a gradient fading it out towards the bottom. */
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly areaOpacity: 0.4;
+    readonly progress: 1;
+    readonly enabled: true;
+    readonly spotlight: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
+    readonly dimOpacity: 0.2;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** The series' points, as its line has them. */
+    readonly points: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    /** The line the area fills down to, at the same x positions; empty for the baseline. */
+    readonly base: import("@motionscript/sdk").Type<Vector2[], Vector2[], false>;
+    /** Pixel y of the baseline. */
+    readonly baseline: 0;
+    readonly curve: import("@motionscript/sdk").Type<LineCurve, LineCurve, false>;
+    readonly area: import("@motionscript/sdk").Type<"none" | "solid" | "gradient", "none" | "solid" | "gradient", false>;
+    /** The series colour; the area paints it at `areaOpacity`, a gradient fading it out towards the bottom. */
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly areaOpacity: 0.4;
+    readonly progress: 1;
+    readonly enabled: true;
+    readonly spotlight: import("@motionscript/sdk").Type<RegionBox, RegionBox, false>;
+    readonly dimOpacity: 0.2;
+}>, {}, _Node2D<_Node2DProps>>>>;
+interface Span {
+    readonly top: number;
+    readonly bottom: number;
+}
+/**
+ * The area's paint for an outline spanning `own`: the series colour at
+ * `opacity`, or for a gradient that colour fading to nearly nothing across
+ * `whole`. A gradient maps onto the bounds of the shape it fills, so its ends
+ * are placed in `own`'s unit box (y-up) at `whole`'s top and bottom.
+ */
+export declare function areaFill(colour: FillResolved[], area: "none" | "solid" | "gradient", opacity: number, whole: Span, own: Span): FillResolved[];
+export type ChartArea = NodeOf<typeof ChartArea>;
+export {};
 //# sourceMappingURL=chart-line.d.ts.map

package/dist/line-chart/chart-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-line.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAM1B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAkCjB,oMAAoM;AACpM,eAAO,MAAM,SAAS;IAGlB,qGAAqG;;;IAGrG,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;;;;;;IAP7E,qGAAqG;;;IAGrG,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;IAP7E,qGAAqG;;;IAGrG,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;;;;;2BAyD/E,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"chart-line.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,IAAI,EACT,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAGhC,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAEjB,gFAAgF;AAChF,wBAAgB,MAAM,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAK3E;AAuBD;;;;GAIG;AACH,eAAO,MAAM,SAAS;IAGlB,qGAAqG;;;;IAIrG,sEAAsE;;;IAGtE,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;;;;;;;;;IAX7E,qGAAqG;;;;IAIrG,sEAAsE;;;IAGtE,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;IAX7E,qGAAqG;;;;IAIrG,sEAAsE;;;IAGtE,yHAAyH;;IAEzH,4EAA4E;;IAE5E,6EAA6E;;;;;;;;;;;2BAyE/E,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;IAGlB,gDAAgD;;IAEhD,wFAAwF;;IAExF,+BAA+B;;;;IAI/B,2GAA2G;;;;;;;;IAR3G,gDAAgD;;IAEhD,wFAAwF;;IAExF,+BAA+B;;;;IAI/B,2GAA2G;;;;;;;;IAR3G,gDAAgD;;IAEhD,wFAAwF;;IAExF,+BAA+B;;;;IAI/B,2GAA2G;;;;;;;gCAkC7G,CAAA;AAEF,UAAU,IAAI;IACZ,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CACxB;AAYD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,YAAY,EAAE,CAY7I;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/line-chart/chart-line.js

@@ -1,49 +1,51 @@
-import { Graphics2D, Types, component2d, strokeOps, } from "@motionscript/sdk";
+import { Graphics2D, Types, clamp, component2d, fillOps, strokeOps, } from "@motionscript/sdk";
+import { fade } from "../kit/cartesian.js";
 import { fresh } from "../kit/entries.js";
 import { frameEase } from "../kit/motion.js";
 import { loadPaints } from "../kit/paints.js";
 import { SPOTLIGHT_DIM } from "../kit/shared.js";
-import { EMPTY_REGION_BOX, clipPolylineToBox, hasRegion, } from "./shared.js";
-/** The prefix of `pts` revealed at fraction `p`, measured by cumulative arc length so the trace keeps a steady pace over uneven spacing. */
-function tracePoints(pts, p) {
-    if (p >= 1 || pts.length < 2)
-        return pts;
-    if (p <= 0)
-        return [];
-    const segLen = [];
-    let total = 0;
-    for (let i = 1; i < pts.length; i++) {
-        const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y);
-        segLen.push(d);
-        total += d;
-    }
-    if (total === 0)
-        return pts;
-    let target = total * p;
-    const out = [pts[0]];
-    for (let i = 0; i < segLen.length; i++) {
-        if (target >= segLen[i]) {
-            out.push(pts[i + 1]);
-            target -= segLen[i];
-        }
-        else {
-            const t = segLen[i] === 0 ? 0 : target / segLen[i];
-            out.push({
-                x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,
-                y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,
-            });
-            break;
-        }
-    }
-    return out;
+import { EMPTY_REGION_BOX, clipPolygonToBox, clipPolylineToBox, cutAt, curvePoints, hasRegion, } from "./shared.js";
+/** The x a trace at `progress` has reached, across `points` ordered along x. */
+export function traceX(points, progress) {
+    if (points.length === 0)
+        return 0;
+    const first = points[0].x;
+    const last = points[points.length - 1].x;
+    return progress >= 1 ? Infinity : first + (last - first) * progress;
 }
-/** One series of a {@link LineChart}: a rounded polyline through pre-mapped pixel `points`, one {@link Graphics2D} command list. `progress` traces it in; `enabled` shows or hides it wholesale. */
+/** The drawn path at `progress`: the whole curve once traced, else the part left of the trace. */
+function traced(points, curve, progress) {
+    const path = curvePoints(points, curve);
+    return progress >= 1 ? path : cutAt(path, traceX(points, progress));
+}
+const curveEntry = () => Types.custom("smooth");
+/** A closed outline as path commands. */
+function outlineCommands(points) {
+    return [...points.map((p, i) => ({ type: i === 0 ? "M" : "L", x: p.x, y: p.y })), { type: "Z" }];
+}
+function fillOutline(ctx, outline, fill, opacity) {
+    if (outline.length < 3 || opacity <= 0)
+        return;
+    const { width, height } = ctx.size;
+    // A frame symmetric about the origin, so the outline draws where its points say rather than re-centred on itself.
+    const centerBounds = [-width / 2, -height / 2, width / 2, height / 2];
+    ctx.draw(new Graphics2D().path({ data: outlineCommands(outline), centerBounds }).fill(fill).opacity(opacity));
+}
+/**
+ * One series of a {@link LineChart}: its line through pre-mapped pixel `points`,
+ * shaped by `curve`, and a dot on each point. `progress` traces it in from the
+ * left; `enabled` shows or hides it wholesale.
+ */
 export const ChartLine = component2d({
     key: "chartLine",
     state: {
         /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */
         points: fresh(() => []),
+        curve: curveEntry(),
         stroke: Types.custom([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+        /** A dot of `dotSize` on each point, in `dotFill`; none at size 0. */
+        dotSize: 0,
+        dotFill: Types.custom([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
         /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */
         progress: 1,
         /** Whether the line is drawn at all, flipped alongside its legend entry. */
@@ -52,7 +54,7 @@ export const ChartLine = component2d({
         spotlight: fresh(() => EMPTY_REGION_BOX),
         dimOpacity: SPOTLIGHT_DIM,
     },
-    load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),
+    load: (loader, state) => loadPaints(loader, { fills: [state.dotFill], strokes: [state.stroke] }),
     commands: {
         /**
          * Trace the line from `from` to `to`; `showSeries`/`hideSeries` are this with
@@ -72,35 +74,145 @@ export const ChartLine = component2d({
                 });
             },
         },
+        /** Hold the line fully traced while its chart moves it, switched on throughout a show and off once a hide lands. */
+        hold: {
+            args: { shown: Types.boolean(true) },
+            run: (timeline) => {
+                const { shown } = timeline.args;
+                return timeline.animate((t) => ({ progress: 1, enabled: shown || t < 1 }), { eased: false });
+            },
+        },
     },
     render: (ctx, state) => {
         if (!state.enabled)
             return;
         const pts = state.points;
-        if (pts.length < 2)
+        const p = clamp(state.progress, 0, 1);
+        if (pts.length === 0 || p <= 0)
             return;
-        const p = Math.max(0, Math.min(1, state.progress));
-        if (p <= 0)
+        const box = state.spotlight;
+        const lit = hasRegion(box);
+        const dim = clamp(state.dimOpacity, 0, 1);
+        const stroke = state.stroke;
+        const weight = stroke[0]?.weight ?? 0;
+        const drawn = traced(pts, state.curve, p);
+        if (drawn.length >= 2 && weight > 0) {
+            // Rounded corners only where the line has corners to round.
+            const radius = state.curve === "linear" ? weight * 2 : 0;
+            ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke).opacity(lit ? dim : 1));
+            // One `draw` per run: shapes chained before `stroke()` combine into one surface, and stroking a union of disjoint open paths paints nothing.
+            if (lit)
+                for (const run of clipPolylineToBox(drawn, box))
+                    ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke));
+        }
+        const size = state.dotSize;
+        if (size <= 0)
             return;
-        const drawn = tracePoints(pts, p);
-        if (drawn.length < 2)
+        const reach = traceX(pts, p);
+        const bright = new Graphics2D();
+        const dimmed = new Graphics2D();
+        let brightAny = false;
+        let dimAny = false;
+        for (const pt of pts) {
+            // A dot grows in as the trace passes it.
+            const grown = reach === Infinity ? 1 : clamp((reach - pt.x) / (size * 2), 0, 1);
+            if (grown <= 0)
+                continue;
+            const inside = !lit || (pt.x >= box.left && pt.x <= box.right && pt.y >= box.bottom && pt.y <= box.top);
+            (inside ? bright : dimmed).ellipse({ x: pt.x, y: pt.y, width: size * grown, height: size * grown });
+            if (inside)
+                brightAny = true;
+            else
+                dimAny = true;
+        }
+        if (dimAny)
+            ctx.draw(dimmed.fill(state.dotFill).opacity(dim));
+        if (brightAny)
+            ctx.draw(bright.fill(state.dotFill));
+    },
+});
+/**
+ * The fill under one series of a {@link LineChart}: down to `base` (the series
+ * below it in a stack) or, without one, to the `baseline`. Drawn by its own node
+ * so every area sits under every line; the chart binds its trace, switch and
+ * opacity to its line's, so the two move as one.
+ */
+export const ChartArea = component2d({
+    key: "chartArea",
+    state: {
+        /** The series' points, as its line has them. */
+        points: fresh(() => []),
+        /** The line the area fills down to, at the same x positions; empty for the baseline. */
+        base: fresh(() => []),
+        /** Pixel y of the baseline. */
+        baseline: 0,
+        curve: curveEntry(),
+        area: Types.custom("solid"),
+        /** The series colour; the area paints it at `areaOpacity`, a gradient fading it out towards the bottom. */
+        fill: Types.custom([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+        areaOpacity: 0.4,
+        progress: 1,
+        enabled: true,
+        spotlight: fresh(() => EMPTY_REGION_BOX),
+        dimOpacity: SPOTLIGHT_DIM,
+    },
+    load: (loader, state) => loadPaints(loader, { fills: [state.fill] }),
+    render: (ctx, state) => {
+        const pts = state.points;
+        const p = clamp(state.progress, 0, 1);
+        if (!state.enabled || state.area === "none" || pts.length < 2 || p <= 0 || state.fill.length === 0)
             return;
-        const stroke = state.stroke;
-        const radius = (stroke[0]?.weight ?? 0) * 2;
+        const outlineAt = (progress) => {
+            const top = traced(pts, state.curve, progress);
+            if (top.length < 2)
+                return [];
+            const base = state.base.length === pts.length
+                ? traced(state.base, state.curve, progress)
+                : [{ x: top[0].x, y: state.baseline }, { x: top[top.length - 1].x, y: state.baseline }];
+            return [...top, ...[...base].reverse()];
+        };
+        // The gradient spans the whole area's height, so it holds still while the area traces in and across a spotlight's cut.
+        const span = verticalSpan(outlineAt(1));
+        const paint = (outline, opacity) => fillOutline(ctx, outline, areaFill(state.fill, state.area, state.areaOpacity, span, verticalSpan(outline)), opacity);
+        const outline = outlineAt(p);
         const box = state.spotlight;
         if (!hasRegion(box)) {
-            ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke));
+            paint(outline, 1);
             return;
         }
-        // Dim the whole line, then redraw the stretches inside the region at full strength: the bright run keeps continuous geometry and round joins, and the boundary lands on the region edge.
-        ctx.draw(new Graphics2D()
-            .line({ points: drawn, radius })
-            .stroke(stroke)
-            .opacity(Math.max(0, Math.min(1, state.dimOpacity))));
-        // One `draw` per run: shapes chained before `stroke()` combine into one surface, and stroking a union of disjoint open paths paints nothing.
-        for (const run of clipPolylineToBox(drawn, box)) {
-            ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke));
-        }
+        paint(outline, clamp(state.dimOpacity, 0, 1));
+        paint(clipPolygonToBox(outline, box), 1);
     },
 });
+function verticalSpan(points) {
+    let top = -Infinity;
+    let bottom = Infinity;
+    for (const p of points) {
+        if (p.y > top)
+            top = p.y;
+        if (p.y < bottom)
+            bottom = p.y;
+    }
+    return { top, bottom };
+}
+/**
+ * The area's paint for an outline spanning `own`: the series colour at
+ * `opacity`, or for a gradient that colour fading to nearly nothing across
+ * `whole`. A gradient maps onto the bounds of the shape it fills, so its ends
+ * are placed in `own`'s unit box (y-up) at `whole`'s top and bottom.
+ */
+export function areaFill(colour, area, opacity, whole, own) {
+    const top = colour[colour.length - 1];
+    if (area !== "gradient" || top?.type !== "solid" || !(own.top > own.bottom))
+        return fade(colour, opacity);
+    const [r, g, b, a] = top.color;
+    const middle = (own.top + own.bottom) / 2;
+    const half = (own.top - own.bottom) / 2;
+    return fillOps.resolve({
+        type: "linear-gradient",
+        colors: [[r, g, b, a * opacity], [r, g, b, a * opacity * 0.04]],
+        start: { x: 0, y: (whole.top - middle) / half },
+        end: { x: 0, y: (whole.bottom - middle) / half },
+    });
+}
 //# sourceMappingURL=chart-line.js.map

package/dist/line-chart/chart-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-line.js","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  strokeOps,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type Stroke,\n  type StrokeResolved,\n  type Vector2,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { frameEase } from \"../kit/motion\"\nimport { loadPaints } from \"../kit/paints\"\nimport { SPOTLIGHT_DIM } from \"../kit/shared\"\nimport {\n  EMPTY_REGION_BOX,\n  clipPolylineToBox,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\n\n/** The prefix of `pts` revealed at fraction `p`, measured by cumulative arc length so the trace keeps a steady pace over uneven spacing. */\nfunction tracePoints(pts: Vector2[], p: number): Vector2[] {\n  if (p >= 1 || pts.length < 2) return pts\n  if (p <= 0) return []\n\n  const segLen: number[] = []\n  let total = 0\n  for (let i = 1; i < pts.length; i++) {\n    const d = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y)\n    segLen.push(d)\n    total += d\n  }\n  if (total === 0) return pts\n\n  let target = total * p\n  const out: Vector2[] = [pts[0]]\n  for (let i = 0; i < segLen.length; i++) {\n    if (target >= segLen[i]) {\n      out.push(pts[i + 1])\n      target -= segLen[i]\n    } else {\n      const t = segLen[i] === 0 ? 0 : target / segLen[i]\n      out.push({\n        x: pts[i].x + (pts[i + 1].x - pts[i].x) * t,\n        y: pts[i].y + (pts[i + 1].y - pts[i].y) * t,\n      })\n      break\n    }\n  }\n  return out\n}\n\n/** One series of a {@link LineChart}: a rounded polyline through pre-mapped pixel `points`, one {@link Graphics2D} command list. `progress` traces it in; `enabled` shows or hides it wholesale. */\nexport const ChartLine = component2d({\n  key: \"chartLine\",\n  state: {\n    /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */\n    points: fresh<Vector2[]>(() => []),\n    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */\n    progress: 1,\n    /** Whether the line is drawn at all, flipped alongside its legend entry. */\n    enabled: true,\n    /** In this node's pixel space; outside it the line drops to `dimOpacity`. */\n    spotlight: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    dimOpacity: SPOTLIGHT_DIM,\n  },\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),\n  commands: {\n    /**\n     * Trace the line from `from` to `to`; `showSeries`/`hideSeries` are this with\n     * the ends stated. `enabled` rides along in the same value, so the line is\n     * drawable for every `t` the trace covers and arriving backwards matches\n     * arriving forwards.\n     */\n    enter: {\n      args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },\n      run: (timeline) => {\n        const { from, to } = timeline.args\n        const ease = frameEase(timeline)\n        return timeline.animate((t) => {\n          const progress = from + (to - from) * ease(t)\n          // Hidden only once fully retraced, so a hide does not vanish a frame early.\n          return { progress, enabled: progress > 0 }\n        })\n      },\n    },\n  },\n  render: (ctx, state) => {\n    if (!state.enabled) return\n    const pts = state.points\n    if (pts.length < 2) return\n\n    const p = Math.max(0, Math.min(1, state.progress))\n    if (p <= 0) return\n\n    const drawn = tracePoints(pts, p)\n    if (drawn.length < 2) return\n    const stroke = state.stroke\n    const radius = (stroke[0]?.weight ?? 0) * 2\n\n    const box = state.spotlight\n    if (!hasRegion(box)) {\n      ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke))\n      return\n    }\n\n    // Dim the whole line, then redraw the stretches inside the region at full strength: the bright run keeps continuous geometry and round joins, and the boundary lands on the region edge.\n    ctx.draw(\n      new Graphics2D()\n        .line({ points: drawn, radius })\n        .stroke(stroke)\n        .opacity(Math.max(0, Math.min(1, state.dimOpacity)))\n    )\n\n    // One `draw` per run: shapes chained before `stroke()` combine into one surface, and stroking a union of disjoint open paths paints nothing.\n    for (const run of clipPolylineToBox(drawn, box)) {\n      ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke))\n    }\n  },\n})\n\nexport type ChartLine = NodeOf<typeof ChartLine>\n"]}
+{"version":3,"file":"chart-line.js","sourceRoot":"","sources":["../../src/line-chart/chart-line.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  clamp,\n  component2d,\n  fillOps,\n  strokeOps,\n  type Fill,\n  type FillResolved,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type PathCommand,\n  type RenderContext,\n  type Stroke,\n  type StrokeResolved,\n  type Vector2,\n} from \"@motionscript/sdk\"\n\nimport { fade } from \"../kit/cartesian\"\nimport { fresh } from \"../kit/entries\"\nimport { frameEase } from \"../kit/motion\"\nimport { loadPaints } from \"../kit/paints\"\nimport { SPOTLIGHT_DIM } from \"../kit/shared\"\nimport {\n  EMPTY_REGION_BOX,\n  clipPolygonToBox,\n  clipPolylineToBox,\n  cutAt,\n  curvePoints,\n  hasRegion,\n  type LineCurve,\n  type RegionBox,\n} from \"./shared\"\n\n/** The x a trace at `progress` has reached, across `points` ordered along x. */\nexport function traceX(points: readonly Vector2[], progress: number): number {\n  if (points.length === 0) return 0\n  const first = points[0].x\n  const last = points[points.length - 1].x\n  return progress >= 1 ? Infinity : first + (last - first) * progress\n}\n\n/** The drawn path at `progress`: the whole curve once traced, else the part left of the trace. */\nfunction traced(points: readonly Vector2[], curve: LineCurve, progress: number): Vector2[] {\n  const path = curvePoints(points, curve)\n  return progress >= 1 ? path : cutAt(path, traceX(points, progress))\n}\n\nconst curveEntry = () => Types.custom<LineCurve>(\"smooth\")\n\n/** A closed outline as path commands. */\nfunction outlineCommands(points: readonly Vector2[]): PathCommand[] {\n  return [...points.map((p, i): PathCommand => ({ type: i === 0 ? \"M\" : \"L\", x: p.x, y: p.y })), { type: \"Z\" }]\n}\n\nfunction fillOutline(ctx: RenderContext, outline: readonly Vector2[], fill: FillResolved[], opacity: number): void {\n  if (outline.length < 3 || opacity <= 0) return\n  const { width, height } = ctx.size\n  // A frame symmetric about the origin, so the outline draws where its points say rather than re-centred on itself.\n  const centerBounds: [number, number, number, number] = [-width / 2, -height / 2, width / 2, height / 2]\n  ctx.draw(new Graphics2D().path({ data: outlineCommands(outline), centerBounds }).fill(fill).opacity(opacity))\n}\n\n/**\n * One series of a {@link LineChart}: its line through pre-mapped pixel `points`,\n * shaped by `curve`, and a dot on each point. `progress` traces it in from the\n * left; `enabled` shows or hides it wholesale.\n */\nexport const ChartLine = component2d({\n  key: \"chartLine\",\n  state: {\n    /** In this node's pixel space (origin at centre, y-up), mapped by the parent and ordered along x. */\n    points: fresh<Vector2[]>(() => []),\n    curve: curveEntry(),\n    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /** A dot of `dotSize` on each point, in `dotFill`; none at size 0. */\n    dotSize: 0,\n    dotFill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    /** Trace from the left end, `[0, 1]`. Rests at 1 so a paused editor canvas paints the line; `enter` drives it from 0. */\n    progress: 1,\n    /** Whether the line is drawn at all, flipped alongside its legend entry. */\n    enabled: true,\n    /** In this node's pixel space; outside it the line drops to `dimOpacity`. */\n    spotlight: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    dimOpacity: SPOTLIGHT_DIM,\n  },\n  load: (loader, state) => loadPaints(loader, { fills: [state.dotFill], strokes: [state.stroke] }),\n  commands: {\n    /**\n     * Trace the line from `from` to `to`; `showSeries`/`hideSeries` are this with\n     * the ends stated. `enabled` rides along in the same value, so the line is\n     * drawable for every `t` the trace covers and arriving backwards matches\n     * arriving forwards.\n     */\n    enter: {\n      args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },\n      run: (timeline) => {\n        const { from, to } = timeline.args\n        const ease = frameEase(timeline)\n        return timeline.animate((t) => {\n          const progress = from + (to - from) * ease(t)\n          // Hidden only once fully retraced, so a hide does not vanish a frame early.\n          return { progress, enabled: progress > 0 }\n        })\n      },\n    },\n    /** Hold the line fully traced while its chart moves it, switched on throughout a show and off once a hide lands. */\n    hold: {\n      args: { shown: Types.boolean(true) },\n      run: (timeline) => {\n        const { shown } = timeline.args\n        return timeline.animate((t) => ({ progress: 1, enabled: shown || t < 1 }), { eased: false })\n      },\n    },\n  },\n  render: (ctx, state) => {\n    if (!state.enabled) return\n    const pts = state.points\n    const p = clamp(state.progress, 0, 1)\n    if (pts.length === 0 || p <= 0) return\n\n    const box = state.spotlight\n    const lit = hasRegion(box)\n    const dim = clamp(state.dimOpacity, 0, 1)\n    const stroke = state.stroke\n    const weight = stroke[0]?.weight ?? 0\n    const drawn = traced(pts, state.curve, p)\n\n    if (drawn.length >= 2 && weight > 0) {\n      // Rounded corners only where the line has corners to round.\n      const radius = state.curve === \"linear\" ? weight * 2 : 0\n      ctx.draw(new Graphics2D().line({ points: drawn, radius }).stroke(stroke).opacity(lit ? dim : 1))\n      // One `draw` per run: shapes chained before `stroke()` combine into one surface, and stroking a union of disjoint open paths paints nothing.\n      if (lit) for (const run of clipPolylineToBox(drawn, box)) ctx.draw(new Graphics2D().line({ points: run, radius }).stroke(stroke))\n    }\n\n    const size = state.dotSize\n    if (size <= 0) return\n    const reach = traceX(pts, p)\n    const bright = new Graphics2D()\n    const dimmed = new Graphics2D()\n    let brightAny = false\n    let dimAny = false\n    for (const pt of pts) {\n      // A dot grows in as the trace passes it.\n      const grown = reach === Infinity ? 1 : clamp((reach - pt.x) / (size * 2), 0, 1)\n      if (grown <= 0) continue\n      const inside = !lit || (pt.x >= box.left && pt.x <= box.right && pt.y >= box.bottom && pt.y <= box.top)\n      ;(inside ? bright : dimmed).ellipse({ x: pt.x, y: pt.y, width: size * grown, height: size * grown })\n      if (inside) brightAny = true\n      else dimAny = true\n    }\n    if (dimAny) ctx.draw(dimmed.fill(state.dotFill).opacity(dim))\n    if (brightAny) ctx.draw(bright.fill(state.dotFill))\n  },\n})\n\nexport type ChartLine = NodeOf<typeof ChartLine>\n\n/**\n * The fill under one series of a {@link LineChart}: down to `base` (the series\n * below it in a stack) or, without one, to the `baseline`. Drawn by its own node\n * so every area sits under every line; the chart binds its trace, switch and\n * opacity to its line's, so the two move as one.\n */\nexport const ChartArea = component2d({\n  key: \"chartArea\",\n  state: {\n    /** The series' points, as its line has them. */\n    points: fresh<Vector2[]>(() => []),\n    /** The line the area fills down to, at the same x positions; empty for the baseline. */\n    base: fresh<Vector2[]>(() => []),\n    /** Pixel y of the baseline. */\n    baseline: 0,\n    curve: curveEntry(),\n    area: Types.custom<\"none\" | \"solid\" | \"gradient\">(\"solid\"),\n    /** The series colour; the area paints it at `areaOpacity`, a gradient fading it out towards the bottom. */\n    fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    areaOpacity: 0.4,\n    progress: 1,\n    enabled: true,\n    spotlight: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    dimOpacity: SPOTLIGHT_DIM,\n  },\n  load: (loader, state) => loadPaints(loader, { fills: [state.fill] }),\n  render: (ctx, state) => {\n    const pts = state.points\n    const p = clamp(state.progress, 0, 1)\n    if (!state.enabled || state.area === \"none\" || pts.length < 2 || p <= 0 || state.fill.length === 0) return\n    const outlineAt = (progress: number) => {\n      const top = traced(pts, state.curve, progress)\n      if (top.length < 2) return []\n      const base = state.base.length === pts.length\n        ? traced(state.base, state.curve, progress)\n        : [{ x: top[0].x, y: state.baseline }, { x: top[top.length - 1].x, y: state.baseline }]\n      return [...top, ...[...base].reverse()]\n    }\n    // The gradient spans the whole area's height, so it holds still while the area traces in and across a spotlight's cut.\n    const span = verticalSpan(outlineAt(1))\n    const paint = (outline: readonly Vector2[], opacity: number) =>\n      fillOutline(ctx, outline, areaFill(state.fill, state.area, state.areaOpacity, span, verticalSpan(outline)), opacity)\n    const outline = outlineAt(p)\n    const box = state.spotlight\n    if (!hasRegion(box)) {\n      paint(outline, 1)\n      return\n    }\n    paint(outline, clamp(state.dimOpacity, 0, 1))\n    paint(clipPolygonToBox(outline, box), 1)\n  },\n})\n\ninterface Span {\n  readonly top: number\n  readonly bottom: number\n}\n\nfunction verticalSpan(points: readonly Vector2[]): Span {\n  let top = -Infinity\n  let bottom = Infinity\n  for (const p of points) {\n    if (p.y > top) top = p.y\n    if (p.y < bottom) bottom = p.y\n  }\n  return { top, bottom }\n}\n\n/**\n * The area's paint for an outline spanning `own`: the series colour at\n * `opacity`, or for a gradient that colour fading to nearly nothing across\n * `whole`. A gradient maps onto the bounds of the shape it fills, so its ends\n * are placed in `own`'s unit box (y-up) at `whole`'s top and bottom.\n */\nexport function areaFill(colour: FillResolved[], area: \"none\" | \"solid\" | \"gradient\", opacity: number, whole: Span, own: Span): FillResolved[] {\n  const top = colour[colour.length - 1]\n  if (area !== \"gradient\" || top?.type !== \"solid\" || !(own.top > own.bottom)) return fade(colour, opacity) as FillResolved[]\n  const [r, g, b, a] = top.color\n  const middle = (own.top + own.bottom) / 2\n  const half = (own.top - own.bottom) / 2\n  return fillOps.resolve({\n    type: \"linear-gradient\",\n    colors: [[r, g, b, a * opacity], [r, g, b, a * opacity * 0.04]],\n    start: { x: 0, y: (whole.top - middle) / half },\n    end: { x: 0, y: (whole.bottom - middle) / half },\n  })\n}\n\nexport type ChartArea = NodeOf<typeof ChartArea>\n"]}

package/dist/line-chart/chart-region.d.ts

@@ -3,7 +3,7 @@ import { type RegionBox } from "./shared.js";
 /**
  * The call-out of a {@link LineChart}: a washed rectangle with a dashed rule on
  * each bounded edge, drawn from the pre-mapped `box`. Dimming the series outside
- * is {@link ChartLine}'s job, clipped against the same box so the two agree on
+ * is the line's and area's job, clipped against the same box so they agree on
  * the boundary. An unbounded edge is the plot's own border, and a rule there
  * would assert a limit the author did not set.
  */

package/dist/line-chart/chart-region.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-region.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,IAAI,EACT,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAEjB;;;;;;GAMG;AACH,eAAO,MAAM,WAAW;IAGpB,iHAAiH;;;;IAIjH,8FAA8F;;;IAJ9F,iHAAiH;;;;IAIjH,8FAA8F;;;IAJ9F,iHAAiH;;;;IAIjH,8FAA8F;;gCAmChG,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}
+{"version":3,"file":"chart-region.d.ts","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,IAAI,EACT,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAK1B,OAAO,EAGL,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAEjB;;;;;;GAMG;AACH,eAAO,MAAM,WAAW;IAGpB,iHAAiH;;;;IAIjH,8FAA8F;;;IAJ9F,iHAAiH;;;;IAIjH,8FAA8F;;;IAJ9F,iHAAiH;;;;IAIjH,8FAA8F;;gCA+BhG,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/line-chart/chart-region.js

@@ -1,11 +1,12 @@
 import { Graphics2D, Types, component2d, fillOps, strokeOps, } from "@motionscript/sdk";
+import { rule } from "../kit/chart-canvas.js";
 import { fresh } from "../kit/entries.js";
 import { loadPaints } from "../kit/paints.js";
-import { DEFAULT_CHART_THEME, EMPTY_REGION_BOX, hasRegion, } from "./shared.js";
+import { EMPTY_REGION_BOX, hasRegion, } from "./shared.js";
 /**
  * The call-out of a {@link LineChart}: a washed rectangle with a dashed rule on
  * each bounded edge, drawn from the pre-mapped `box`. Dimming the series outside
- * is {@link ChartLine}'s job, clipped against the same box so the two agree on
+ * is the line's and area's job, clipped against the same box so they agree on
  * the boundary. An unbounded edge is the plot's own border, and a rule there
  * would assert a limit the author did not set.
  */
@@ -14,8 +15,8 @@ export const ChartRegion = component2d({
     state: {
         /** In this node's pixel space (origin at centre, y-up), mapped by the parent. A degenerate box draws nothing. */
         box: fresh(() => EMPTY_REGION_BOX),
-        stroke: Types.custom(DEFAULT_CHART_THEME.region.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
-        fill: Types.custom(DEFAULT_CHART_THEME.region.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+        stroke: Types.custom({ weight: 2, fill: "white/70", dash: [14, 12], cap: "butt", align: "center" }, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+        fill: Types.custom("white/6", { resolve: fillOps.resolve, lerp: fillOps.lerp }),
         /** Driven by the chart's `regionReveal`, so the rules and the series' dimming move as one. */
         reveal: 0,
     },
@@ -36,17 +37,15 @@ export const ChartRegion = component2d({
         }
         if (state.stroke.length === 0)
             return;
-        // One `draw` per rule: stroking a union of disjoint open paths paints nothing.
-        const rule = (points) => ctx.draw(new Graphics2D().line({ points }).stroke(state.stroke).opacity(r));
         if (box.xBounded) {
             const half = (height / 2) * r;
             for (const x of [box.left, box.right])
-                rule([{ x, y: cy - half }, { x, y: cy + half }]);
+                rule(ctx, { x, y: cy - half }, { x, y: cy + half }, state.stroke, r);
         }
         if (box.yBounded) {
             const half = (width / 2) * r;
             for (const y of [box.bottom, box.top])
-                rule([{ x: cx - half, y }, { x: cx + half, y }]);
+                rule(ctx, { x: cx - half, y }, { x: cx + half, y }, state.stroke, r);
         }
     },
 });

package/dist/line-chart/chart-region.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-region.js","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  fillOps,\n  strokeOps,\n  type Fill,\n  type FillResolved,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { loadPaints } from \"../kit/paints\"\nimport {\n  DEFAULT_CHART_THEME,\n  EMPTY_REGION_BOX,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\n\n/**\n * The call-out of a {@link LineChart}: a washed rectangle with a dashed rule on\n * each bounded edge, drawn from the pre-mapped `box`. Dimming the series outside\n * is {@link ChartLine}'s job, clipped against the same box so the two agree on\n * the boundary. An unbounded edge is the plot's own border, and a rule there\n * would assert a limit the author did not set.\n */\nexport const ChartRegion = component2d({\n  key: \"chartRegion\",\n  state: {\n    /** In this node's pixel space (origin at centre, y-up), mapped by the parent. A degenerate box draws nothing. */\n    box: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_CHART_THEME.region.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_CHART_THEME.region.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    /** Driven by the chart's `regionReveal`, so the rules and the series' dimming move as one. */\n    reveal: 0,\n  },\n  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),\n  render: (ctx, state) => {\n    const box = state.box\n    if (!hasRegion(box)) return\n\n    const r = Math.max(0, Math.min(1, state.reveal))\n    if (r <= 0) return\n\n    const width = box.right - box.left\n    const height = box.top - box.bottom\n    const cx = (box.left + box.right) / 2\n    const cy = (box.bottom + box.top) / 2\n\n    if (state.fill.length > 0) {\n      ctx.draw(new Graphics2D().rect({ x: cx, y: cy, width, height }).fill(state.fill).opacity(r))\n    }\n\n    if (state.stroke.length === 0) return\n\n    // One `draw` per rule: stroking a union of disjoint open paths paints nothing.\n    const rule = (points: { x: number; y: number }[]) =>\n      ctx.draw(new Graphics2D().line({ points }).stroke(state.stroke).opacity(r))\n\n    if (box.xBounded) {\n      const half = (height / 2) * r\n      for (const x of [box.left, box.right]) rule([{ x, y: cy - half }, { x, y: cy + half }])\n    }\n    if (box.yBounded) {\n      const half = (width / 2) * r\n      for (const y of [box.bottom, box.top]) rule([{ x: cx - half, y }, { x: cx + half, y }])\n    }\n  },\n})\n\nexport type ChartRegion = NodeOf<typeof ChartRegion>\n"]}
+{"version":3,"file":"chart-region.js","sourceRoot":"","sources":["../../src/line-chart/chart-region.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GASV,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EACL,gBAAgB,EAChB,SAAS,GAEV,MAAM,UAAU,CAAA;AAEjB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,GAAG,EAAE,aAAa;IAClB,KAAK,EAAE;QACL,iHAAiH;QACjH,GAAG,EAAE,KAAK,CAAY,GAAG,EAAE,CAAC,gBAAgB,CAAC;QAC7C,MAAM,EAAE,KAAK,CAAC,MAAM,CAA2B,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;QACnL,IAAI,EAAE,KAAK,CAAC,MAAM,CAAuB,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC;QACrG,8FAA8F;QAC9F,MAAM,EAAE,CAAC;KACV;IACD,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7F,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACrB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAA;QACrB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;YAAE,OAAM;QAE3B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;QAChD,IAAI,CAAC,IAAI,CAAC;YAAE,OAAM;QAElB,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,CAAA;QAClC,MAAM,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAA;QACnC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACrC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAErC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,GAAG,CAAC,IAAI,CAAC,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAC9F,CAAC;QAED,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAErC,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;YAC7B,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC;gBAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;QAC7G,CAAC;QACD,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;YAC5B,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC;gBAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;QAC7G,CAAC;IACH,CAAC;CACF,CAAC,CAAA","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  fillOps,\n  strokeOps,\n  type Fill,\n  type FillResolved,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { rule } from \"../kit/chart-canvas\"\nimport { fresh } from \"../kit/entries\"\nimport { loadPaints } from \"../kit/paints\"\nimport {\n  EMPTY_REGION_BOX,\n  hasRegion,\n  type RegionBox,\n} from \"./shared\"\n\n/**\n * The call-out of a {@link LineChart}: a washed rectangle with a dashed rule on\n * each bounded edge, drawn from the pre-mapped `box`. Dimming the series outside\n * is the line's and area's job, clipped against the same box so they agree on\n * the boundary. An unbounded edge is the plot's own border, and a rule there\n * would assert a limit the author did not set.\n */\nexport const ChartRegion = component2d({\n  key: \"chartRegion\",\n  state: {\n    /** In this node's pixel space (origin at centre, y-up), mapped by the parent. A degenerate box draws nothing. */\n    box: fresh<RegionBox>(() => EMPTY_REGION_BOX),\n    stroke: Types.custom<Stroke, StrokeResolved[]>({ weight: 2, fill: \"white/70\", dash: [14, 12], cap: \"butt\", align: \"center\" }, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    fill: Types.custom<Fill, FillResolved[]>(\"white/6\", { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    /** Driven by the chart's `regionReveal`, so the rules and the series' dimming move as one. */\n    reveal: 0,\n  },\n  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),\n  render: (ctx, state) => {\n    const box = state.box\n    if (!hasRegion(box)) return\n\n    const r = Math.max(0, Math.min(1, state.reveal))\n    if (r <= 0) return\n\n    const width = box.right - box.left\n    const height = box.top - box.bottom\n    const cx = (box.left + box.right) / 2\n    const cy = (box.bottom + box.top) / 2\n\n    if (state.fill.length > 0) {\n      ctx.draw(new Graphics2D().rect({ x: cx, y: cy, width, height }).fill(state.fill).opacity(r))\n    }\n\n    if (state.stroke.length === 0) return\n\n    if (box.xBounded) {\n      const half = (height / 2) * r\n      for (const x of [box.left, box.right]) rule(ctx, { x, y: cy - half }, { x, y: cy + half }, state.stroke, r)\n    }\n    if (box.yBounded) {\n      const half = (width / 2) * r\n      for (const y of [box.bottom, box.top]) rule(ctx, { x: cx - half, y }, { x: cx + half, y }, state.stroke, r)\n    }\n  },\n})\n\nexport type ChartRegion = NodeOf<typeof ChartRegion>\n"]}

package/dist/line-chart/index.d.ts

@@ -1,10 +1,9 @@
 export { LineChart, lineChartDomains } from "./line-chart.js";
-export type { LineChartDomains, LineChartValues } from "./line-chart.js";
+export type { LineChartDomains, LineChartStyle, LineChartValues } from "./line-chart.js";
 export { ChartRegion } from "./chart-region.js";
-export { ChartLine } from "./chart-line.js";
-export { HorizontalAxis } from "./horizontal-axis.js";
-export { DEFAULT_CHART_THEME, EMPTY_REGION_BOX, clipPolylineToBox, hasRegion, lerpChartTheme, resolveChartTheme, resolveRegionBox, resolveYScale, seriesPoints, yExtent, } from "./shared.js";
-export type { ChartConfig, ChartTheme, LineSeries, PlotRegion, RegionBox, RegionConfig, } from "./shared.js";
-export { formatInstant, parseInstant, resolveXScale } from "./x-scale.js";
+export { ChartArea, ChartLine, areaFill, traceX } from "./chart-line.js";
+export { EMPTY_REGION_BOX, LINE_LABELS, LINE_MARKS, clipPolygonToBox, clipPolylineToBox, curvePoints, cutAt, hasRegion, resolveRegionBox, resolveYScale, seriesPoints, stackExtent, stackSeries, yExtent, } from "./shared.js";
+export type { LineCurve, LineSeries, LineStack, PlotRegion, RegionBox, StackedSeries, } from "./shared.js";
+export { EVERY_SAMPLE, formatInstant, parseInstant, resolveXScale } from "./x-scale.js";
 export type { XScale, XScaleKind } from "./x-scale.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/line-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC1D,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,OAAO,GACR,MAAM,UAAU,CAAA;AACjB,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAY,GACb,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACtE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC1D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrE,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,KAAK,EACL,SAAS,EAET,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,GACR,MAAM,UAAU,CAAA;AACjB,YAAY,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACpF,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}

package/dist/line-chart/index.js

@@ -1,7 +1,6 @@
 export { LineChart, lineChartDomains } from "./line-chart.js";
 export { ChartRegion } from "./chart-region.js";
-export { ChartLine } from "./chart-line.js";
-export { HorizontalAxis } from "./horizontal-axis.js";
-export { DEFAULT_CHART_THEME, EMPTY_REGION_BOX, clipPolylineToBox, hasRegion, lerpChartTheme, resolveChartTheme, resolveRegionBox, resolveYScale, seriesPoints, yExtent, } from "./shared.js";
-export { formatInstant, parseInstant, resolveXScale } from "./x-scale.js";
+export { ChartArea, ChartLine, areaFill, traceX } from "./chart-line.js";
+export { EMPTY_REGION_BOX, LINE_LABELS, LINE_MARKS, clipPolygonToBox, clipPolylineToBox, curvePoints, cutAt, hasRegion, resolveRegionBox, resolveYScale, seriesPoints, stackExtent, stackSeries, yExtent, } from "./shared.js";
+export { EVERY_SAMPLE, formatInstant, parseInstant, resolveXScale } from "./x-scale.js";
 //# sourceMappingURL=index.js.map

package/dist/line-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,OAAO,GACR,MAAM,UAAU,CAAA;AASjB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA","sourcesContent":["export { LineChart, lineChartDomains } from \"./line-chart\"\nexport type { LineChartDomains, LineChartValues } from \"./line-chart\"\nexport { ChartRegion } from \"./chart-region\"\nexport { ChartLine } from \"./chart-line\"\nexport { HorizontalAxis } from \"./horizontal-axis\"\nexport {\n  DEFAULT_CHART_THEME,\n  EMPTY_REGION_BOX,\n  clipPolylineToBox,\n  hasRegion,\n  lerpChartTheme,\n  resolveChartTheme,\n  resolveRegionBox,\n  resolveYScale,\n  seriesPoints,\n  yExtent,\n} from \"./shared\"\nexport type {\n  ChartConfig,\n  ChartTheme,\n  LineSeries,\n  PlotRegion,\n  RegionBox,\n  RegionConfig,\n} from \"./shared\"\nexport { formatInstant, parseInstant, resolveXScale } from \"./x-scale\"\nexport type { XScale, XScaleKind } from \"./x-scale\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/line-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrE,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,KAAK,EACL,SAAS,EAET,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,GACR,MAAM,UAAU,CAAA;AASjB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA","sourcesContent":["export { LineChart, lineChartDomains } from \"./line-chart\"\nexport type { LineChartDomains, LineChartStyle, LineChartValues } from \"./line-chart\"\nexport { ChartRegion } from \"./chart-region\"\nexport { ChartArea, ChartLine, areaFill, traceX } from \"./chart-line\"\nexport {\n  EMPTY_REGION_BOX,\n  LINE_LABELS,\n  LINE_MARKS,\n  clipPolygonToBox,\n  clipPolylineToBox,\n  curvePoints,\n  cutAt,\n  hasRegion,\n\n  resolveRegionBox,\n  resolveYScale,\n  seriesPoints,\n  stackExtent,\n  stackSeries,\n  yExtent,\n} from \"./shared\"\nexport type {\n  LineCurve,\n  LineSeries,\n  LineStack,\n  PlotRegion,\n  RegionBox,\n  StackedSeries,\n} from \"./shared\"\nexport { EVERY_SAMPLE, formatInstant, parseInstant, resolveXScale } from \"./x-scale\"\nexport type { XScale, XScaleKind } from \"./x-scale\"\n"]}