@motionscript/charts 0.1.0-alpha.3 → 0.1.0-alpha.6

package/dist/browser/kit.js

@@ -1,2 +1,2 @@
-import{A,B,C,D,E,F,G,H,I,J,K,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z}from"./chunks/chunk-RMHQ6GYU.js";export{c as CHART_PALETTE,H as ChartBorder,I as ChartCanvas,J as ChartLegend,m as DEFAULT_LEGEND,l as DEFAULT_PLOT_AREA,d as DEFAULT_SERIES_COLORS,o as DEFAULT_SERIES_FILLS,n as DEFAULT_SERIES_STROKES,j as DEFAULT_X_AXIS,k as DEFAULT_Y_AXIS,e as SPOTLIGHT_DIM,K as VerticalAxis,f as clampUnit,G as enterBudget,C as formatMarker,D as formatPercent,q as lerpAxisConfig,b as lerpAxisDomain,u as lerpLegendConfig,s as lerpPlotArea,y as lerpSeriesFills,w as lerpSeriesStrokes,E as markerValues,F as niceStep,g as num,i as numericFields,p as resolveAxisConfig,a as resolveAxisDomain,t as resolveLegendConfig,B as resolvePalettePaint,r as resolvePlotArea,A as resolveSeriesFill,x as resolveSeriesFills,z as resolveSeriesStroke,v as resolveSeriesStrokes,h as text};
+import{$,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,a,aa,b,ba,c,ca,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z}from"./chunks/chunk-XROBIRQK.js";export{o as CHART_PALETTE,$ as ChartBorder,aa as ChartCanvas,ba as ChartLegend,y as DEFAULT_LEGEND,x as DEFAULT_PLOT_AREA,p as DEFAULT_SERIES_COLORS,A as DEFAULT_SERIES_FILLS,z as DEFAULT_SERIES_STROKES,v as DEFAULT_X_AXIS,w as DEFAULT_Y_AXIS,e as LANDED,q as SPOTLIGHT_DIM,W as TOP_HEADROOM,V as VerticalAxis,h as armed,i as arrival,g as arrivalOf,f as arrivalsEntry,b as asParts,l as axisTweenTarget,d as beats,X as cartesianFrame,Y as cartesianViews,r as clampUnit,T as enterBudget,O as formatMarker,Q as formatPercent,c as frameEase,a as fresh,Z as laidOutSize,ca as legendShows,C as lerpAxisConfig,k as lerpAxisDomain,m as lerpAxisEntry,G as lerpLegendConfig,E as lerpPlotArea,K as lerpSeriesFills,I as lerpSeriesStrokes,_ as loadPaints,U as markerCaption,P as markerStep,R as markerValues,S as niceStep,s as num,u as numericFields,B as resolveAxisConfig,j as resolveAxisDomain,F as resolveLegendConfig,N as resolvePalettePaint,D as resolvePlotArea,M as resolveSeriesFill,J as resolveSeriesFills,L as resolveSeriesStroke,H as resolveSeriesStrokes,n as settleAxisDomain,t as text};
 //# sourceMappingURL=kit.js.map

package/dist/browser/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionscript/charts",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.6",
   "exports": {
     ".": "dist/browser/index.js",
     "./kit": "dist/browser/kit.js"
@@ -8,5 +8,6 @@
   "peers": [
     "@motionscript/sdk"
   ],
-  "assets": {}
+  "assets": {},
+  "thirdParty": []
 }

package/dist/engine.d.ts

@@ -7,21 +7,23 @@
  * axis, the legend and the number formatting stay a real dependency. That is
  * not a size decision — it is the only arrangement that works.
  *
- * A chart identifies its own parts, and the engine keys signal machinery to
- * class identity: `@property` installs against the class it was applied with,
- * and the renderer asks `instanceof` about what it is drawing. Copy
- * `VerticalAxis` alongside your fork and there are now two of it — two classes
- * answering one name, and whichever one your chart did not get renders as
- * nothing at all, with no error. Keeping the kit external makes that
+ * A chart identifies its own parts by component identity (`VerticalAxis.is`).
+ * Copy `VerticalAxis` alongside your fork and there are now two of it — two
+ * components answering one name, and whichever one your chart did not get is
+ * a part it never finds, with no error. Keeping the kit external makes that
  * impossible rather than unlikely.
  *
  * It also means a fix to the axis reaches a forked chart without a re-add,
  * which is the half of the bargain you get back for it.
  */
 export * from "./kit/shared.js";
+export * from "./kit/cartesian.js";
 export * from "./kit/chart-border.js";
 export * from "./kit/chart-canvas.js";
 export * from "./kit/chart-legend.js";
+export * from "./kit/entries.js";
+export * from "./kit/motion.js";
+export * from "./kit/paints.js";
 export * from "./kit/vertical-axis.js";
 export * from "@motionscript/sdk/component";
 //# sourceMappingURL=engine.d.ts.map

package/dist/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA"}

package/dist/engine.js

@@ -7,21 +7,23 @@
  * axis, the legend and the number formatting stay a real dependency. That is
  * not a size decision — it is the only arrangement that works.
  *
- * A chart identifies its own parts, and the engine keys signal machinery to
- * class identity: `@property` installs against the class it was applied with,
- * and the renderer asks `instanceof` about what it is drawing. Copy
- * `VerticalAxis` alongside your fork and there are now two of it — two classes
- * answering one name, and whichever one your chart did not get renders as
- * nothing at all, with no error. Keeping the kit external makes that
+ * A chart identifies its own parts by component identity (`VerticalAxis.is`).
+ * Copy `VerticalAxis` alongside your fork and there are now two of it — two
+ * components answering one name, and whichever one your chart did not get is
+ * a part it never finds, with no error. Keeping the kit external makes that
  * impossible rather than unlikely.
  *
  * It also means a fix to the axis reaches a forked chart without a re-add,
  * which is the half of the bargain you get back for it.
  */
 export * from "./kit/shared.js";
+export * from "./kit/cartesian.js";
 export * from "./kit/chart-border.js";
 export * from "./kit/chart-canvas.js";
 export * from "./kit/chart-legend.js";
+export * from "./kit/entries.js";
+export * from "./kit/motion.js";
+export * from "./kit/paints.js";
 export * from "./kit/vertical-axis.js";
 export * from "@motionscript/sdk/component";
 //# sourceMappingURL=engine.js.map

package/dist/engine.js.map

@@ -1 +1 @@
-{"version":3,"file":"engine.js","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA","sourcesContent":["/**\n * The chart **kit**: everything the three charts share, and the one thing a\n * copied chart does not copy.\n *\n * `ms add line-chart` writes `line-chart/*` into your project and rewrites its\n * reach for these to `@motionscript/charts`, so the plot panel, the value\n * axis, the legend and the number formatting stay a real dependency. That is\n * not a size decision — it is the only arrangement that works.\n *\n * A chart identifies its own parts, and the engine keys signal machinery to\n * class identity: `@property` installs against the class it was applied with,\n * and the renderer asks `instanceof` about what it is drawing. Copy\n * `VerticalAxis` alongside your fork and there are now two of it — two classes\n * answering one name, and whichever one your chart did not get renders as\n * nothing at all, with no error. Keeping the kit external makes that\n * impossible rather than unlikely.\n *\n * It also means a fix to the axis reaches a forked chart without a re-add,\n * which is the half of the bargain you get back for it.\n */\nexport * from \"./kit/shared\"\nexport * from \"./kit/chart-border\"\nexport * from \"./kit/chart-canvas\"\nexport * from \"./kit/chart-legend\"\nexport * from \"./kit/vertical-axis\"\nexport * from \"@motionscript/sdk/component\"\n"]}
+{"version":3,"file":"engine.js","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA","sourcesContent":["/**\r\n * The chart **kit**: everything the three charts share, and the one thing a\r\n * copied chart does not copy.\r\n *\r\n * `ms add line-chart` writes `line-chart/*` into your project and rewrites its\r\n * reach for these to `@motionscript/charts`, so the plot panel, the value\r\n * axis, the legend and the number formatting stay a real dependency. That is\r\n * not a size decision — it is the only arrangement that works.\r\n *\r\n * A chart identifies its own parts by component identity (`VerticalAxis.is`).\r\n * Copy `VerticalAxis` alongside your fork and there are now two of it — two\r\n * components answering one name, and whichever one your chart did not get is\r\n * a part it never finds, with no error. Keeping the kit external makes that\r\n * impossible rather than unlikely.\r\n *\r\n * It also means a fix to the axis reaches a forked chart without a re-add,\r\n * which is the half of the bargain you get back for it.\r\n */\r\nexport * from \"./kit/shared\"\r\nexport * from \"./kit/cartesian\"\r\nexport * from \"./kit/chart-border\"\r\nexport * from \"./kit/chart-canvas\"\r\nexport * from \"./kit/chart-legend\"\r\nexport * from \"./kit/entries\"\r\nexport * from \"./kit/motion\"\r\nexport * from \"./kit/paints\"\r\nexport * from \"./kit/vertical-axis\"\r\nexport * from \"@motionscript/sdk/component\"\r\n"]}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export * from \"./line-chart\";\nexport * from \"./bar-chart\";\nexport * from \"./pie-chart\";\nexport * from \"./engine\";\nexport { NODES } from \"./nodes\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export * from \"./line-chart\";\r\nexport * from \"./bar-chart\";\r\nexport * from \"./pie-chart\";\r\nexport * from \"./engine\";\r\nexport { NODES } from \"./nodes\";\r\n"]}

package/dist/kit/cartesian.d.ts

@@ -0,0 +1,44 @@
+import { type ChildView, type Node2D, type Size2D } from "@motionscript/sdk";
+/**
+ * Headroom above the plot, in px.
+ *
+ * Two jobs, and the second is why it is real padding on the composition rather
+ * than a number the point-mapping math imagines: a series peaking at the top of
+ * the scale isn't flush to the top edge, **and** the top marker, which is
+ * centred on that top grid line, has somewhere to be. Without it the marker's
+ * upper half is drawn above the chart's own box.
+ */
+export declare const TOP_HEADROOM = 24;
+/** The parts of a cartesian chart's frame, as {@link cartesianFrame} arranges them. */
+export interface CartesianParts {
+    /** The value axis, left of the plot. */
+    readonly axis: Node2D;
+    /** The plot panel: the box the grid and the marks share. */
+    readonly plot: Node2D;
+    /** An invisible twin of the value axis, reserving its gutter under the plot. */
+    readonly gutter: Node2D;
+    /** What sits under the plot, top to bottom: the other axis, then the legend. */
+    readonly below: readonly Node2D[];
+}
+/**
+ * The frame the line and bar charts share: the value axis beside the plot, and
+ * under them the gutter beside the rows below the plot, so those rows start at
+ * the plot's left edge rather than the chart's.
+ */
+export declare function cartesianFrame(parts: CartesianParts): Node2D;
+/** A cartesian frame's parts, as a command reaches them through its chart's children. */
+export interface CartesianViews {
+    readonly axis: ChildView;
+    /** The plot panel's own children: the grid, the marks, the border. */
+    readonly plot: readonly ChildView[];
+    readonly below: readonly ChildView[];
+}
+/**
+ * The frame among a chart's children: the last child shaped as
+ * {@link cartesianFrame} builds it. The chart builds it after the children it
+ * was given, and a document adds its own later still, so it is found by shape.
+ */
+export declare function cartesianViews(children: readonly ChildView[]): CartesianViews | null;
+/** A part's laid-out size, or nothing before it is built or laid out. */
+export declare function laidOutSize(node: Node2D | undefined): Size2D;
+//# sourceMappingURL=cartesian.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cartesian.d.ts","sourceRoot":"","sources":["../../src/kit/cartesian.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAIlF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,KAAK,CAAA;AAE9B,uFAAuF;AACvF,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,4DAA4D;IAC5D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,gFAAgF;IAChF,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,gFAAgF;IAChF,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CAClC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAe5D;AAED,yFAAyF;AACzF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;IACxB,sEAAsE;IACtE,QAAQ,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,CAAA;IACnC,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;CACrC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,SAAS,EAAE,GAAG,cAAc,GAAG,IAAI,CAYpF;AAED,yEAAyE;AACzE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG5D"}

package/dist/kit/cartesian.js

@@ -0,0 +1,59 @@
+import { Rect } from "@motionscript/sdk";
+import { VerticalAxis } from "./vertical-axis.js";
+/**
+ * Headroom above the plot, in px.
+ *
+ * Two jobs, and the second is why it is real padding on the composition rather
+ * than a number the point-mapping math imagines: a series peaking at the top of
+ * the scale isn't flush to the top edge, **and** the top marker, which is
+ * centred on that top grid line, has somewhere to be. Without it the marker's
+ * upper half is drawn above the chart's own box.
+ */
+export const TOP_HEADROOM = 24;
+/**
+ * The frame the line and bar charts share: the value axis beside the plot, and
+ * under them the gutter beside the rows below the plot, so those rows start at
+ * the plot's left edge rather than the chart's.
+ */
+export function cartesianFrame(parts) {
+    return new Rect({
+        flow: "vertical",
+        width: "fill",
+        height: "fill",
+        padding: { top: TOP_HEADROOM },
+        children: [
+            new Rect({ flow: "horizontal", height: "fill", width: "fill", children: [parts.axis, parts.plot] }),
+            new Rect({
+                flow: "horizontal",
+                width: "fill",
+                children: [parts.gutter, new Rect({ flow: "vertical", width: "fill", gap: 20, children: [...parts.below] })],
+            }),
+        ],
+    });
+}
+/**
+ * The frame among a chart's children: the last child shaped as
+ * {@link cartesianFrame} builds it. The chart builds it after the children it
+ * was given, and a document adds its own later still, so it is found by shape.
+ */
+export function cartesianViews(children) {
+    for (let i = children.length - 1; i >= 0; i--) {
+        const frame = children[i];
+        if (!Rect.is(frame))
+            continue;
+        const [top, bottom] = frame.children;
+        const axis = top?.children[0];
+        const plot = top?.children[1];
+        const below = bottom?.children[1];
+        if (!axis || !VerticalAxis.is(axis) || !plot || !below)
+            continue;
+        return { axis, plot: plot.children, below: below.children };
+    }
+    return null;
+}
+/** A part's laid-out size, or nothing before it is built or laid out. */
+export function laidOutSize(node) {
+    const bounds = node?.layoutBounds;
+    return { width: bounds?.width ?? 0, height: bounds?.height ?? 0 };
+}
+//# sourceMappingURL=cartesian.js.map

package/dist/kit/cartesian.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cartesian.js","sourceRoot":"","sources":["../../src/kit/cartesian.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,mBAAmB,CAAA;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAA;AAc9B;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,KAAqB;IAClD,OAAO,IAAI,IAAI,CAAC;QACd,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE;QAC9B,QAAQ,EAAE;YACR,IAAI,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;YACnG,IAAI,IAAI,CAAC;gBACP,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;aAC7G,CAAC;SACH;KACF,CAAsB,CAAA;AACzB,CAAC;AAUD;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,QAA8B;IAC3D,KAAK,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QACzB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC;YAAE,SAAQ;QAC7B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAA;QACpC,MAAM,IAAI,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;QAC7B,MAAM,IAAI,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;QAC7B,MAAM,KAAK,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;QACjC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK;YAAE,SAAQ;QAChE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAA;IAC7D,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,WAAW,CAAC,IAAwB;IAClD,MAAM,MAAM,GAAG,IAAI,EAAE,YAAY,CAAA;IACjC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,CAAA;AACnE,CAAC","sourcesContent":["import { Rect, type ChildView, type Node2D, type Size2D } from \"@motionscript/sdk\"\r\n\r\nimport { VerticalAxis } from \"./vertical-axis\"\r\n\r\n/**\r\n * Headroom above the plot, in px.\r\n *\r\n * Two jobs, and the second is why it is real padding on the composition rather\r\n * than a number the point-mapping math imagines: a series peaking at the top of\r\n * the scale isn't flush to the top edge, **and** the top marker, which is\r\n * centred on that top grid line, has somewhere to be. Without it the marker's\r\n * upper half is drawn above the chart's own box.\r\n */\r\nexport const TOP_HEADROOM = 24\r\n\r\n/** The parts of a cartesian chart's frame, as {@link cartesianFrame} arranges them. */\r\nexport interface CartesianParts {\r\n  /** The value axis, left of the plot. */\r\n  readonly axis: Node2D\r\n  /** The plot panel: the box the grid and the marks share. */\r\n  readonly plot: Node2D\r\n  /** An invisible twin of the value axis, reserving its gutter under the plot. */\r\n  readonly gutter: Node2D\r\n  /** What sits under the plot, top to bottom: the other axis, then the legend. */\r\n  readonly below: readonly Node2D[]\r\n}\r\n\r\n/**\r\n * The frame the line and bar charts share: the value axis beside the plot, and\r\n * under them the gutter beside the rows below the plot, so those rows start at\r\n * the plot's left edge rather than the chart's.\r\n */\r\nexport function cartesianFrame(parts: CartesianParts): Node2D {\r\n  return new Rect({\r\n    flow: \"vertical\",\r\n    width: \"fill\",\r\n    height: \"fill\",\r\n    padding: { top: TOP_HEADROOM },\r\n    children: [\r\n      new Rect({ flow: \"horizontal\", height: \"fill\", width: \"fill\", children: [parts.axis, parts.plot] }),\r\n      new Rect({\r\n        flow: \"horizontal\",\r\n        width: \"fill\",\r\n        children: [parts.gutter, new Rect({ flow: \"vertical\", width: \"fill\", gap: 20, children: [...parts.below] })],\r\n      }),\r\n    ],\r\n  }) as unknown as Node2D\r\n}\r\n\r\n/** A cartesian frame's parts, as a command reaches them through its chart's children. */\r\nexport interface CartesianViews {\r\n  readonly axis: ChildView\r\n  /** The plot panel's own children: the grid, the marks, the border. */\r\n  readonly plot: readonly ChildView[]\r\n  readonly below: readonly ChildView[]\r\n}\r\n\r\n/**\r\n * The frame among a chart's children: the last child shaped as\r\n * {@link cartesianFrame} builds it. The chart builds it after the children it\r\n * was given, and a document adds its own later still, so it is found by shape.\r\n */\r\nexport function cartesianViews(children: readonly ChildView[]): CartesianViews | null {\r\n  for (let i = children.length - 1; i >= 0; i--) {\r\n    const frame = children[i]\r\n    if (!Rect.is(frame)) continue\r\n    const [top, bottom] = frame.children\r\n    const axis = top?.children[0]\r\n    const plot = top?.children[1]\r\n    const below = bottom?.children[1]\r\n    if (!axis || !VerticalAxis.is(axis) || !plot || !below) continue\r\n    return { axis, plot: plot.children, below: below.children }\r\n  }\r\n  return null\r\n}\r\n\r\n/** A part's laid-out size, or nothing before it is built or laid out. */\r\nexport function laidOutSize(node: Node2D | undefined): Size2D {\r\n  const bounds = node?.layoutBounds\r\n  return { width: bounds?.width ?? 0, height: bounds?.height ?? 0 }\r\n}\r\n"]}

package/dist/kit/chart-border.d.ts

@@ -1,4 +1,4 @@
-import { type AssetScope, Node2D, type Node2DProps, type RenderContext2D, type Stroke } from "@motionscript/sdk";
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps, type Stroke, type StrokeResolved } from "@motionscript/sdk";
 export interface ChartBorderProps extends Node2DProps {
     /**
      * The plot's thick frame stroke. The stroke resolver's default `align` is
@@ -9,20 +9,17 @@ export interface ChartBorderProps extends Node2DProps {
 }
 /**
  * The thick **frame** around a cartesian chart's plot: an empty rect wearing an
- * inside stroke, sized from its allocated `layoutBounds`.
+ * inside stroke, sized from its box.
  *
  * Split out of {@link ChartCanvas} (the filled + gridded backdrop) so it can be
  * placed *after* the marks in the tree — the box then frames the plot **over**
  * them, so a line or a column running to the edge tucks cleanly under the border
  * rather than sitting on top of it.
  */
-export declare class ChartBorder extends Node2D<ChartBorderProps> {
-    stroke: Stroke;
-    /**
-     * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-     * paint props it carries — see {@link declarePaints}.
-     */
-    declareAssets(assets: AssetScope): void;
-    protected renderSelf(ctx: RenderContext2D): void;
-}
+export declare const ChartBorder: import("@motionscript/sdk").Component<"chartBorder", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+}>, {}, null, _Node2D<Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+}>, null>>;
+export type ChartBorder = NodeOf<typeof ChartBorder>;
 //# sourceMappingURL=chart-border.d.ts.map

package/dist/kit/chart-border.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-border.d.ts","sourceRoot":"","sources":["../../src/kit/chart-border.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAEf,MAAM,EAGN,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,MAAM,EACZ,MAAM,mBAAmB,CAAA;AAK1B,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,MAAM,CAAC,gBAAgB,CAAC;IAM/C,MAAM,EAAE,MAAM,CAAA;IAEtB;;;OAGG;IACM,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAKhD,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI;CAWjD"}
+{"version":3,"file":"chart-border.d.ts","sourceRoot":"","sources":["../../src/kit/chart-border.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,EAChB,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAK1B,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;;;;UAatB,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/kit/chart-border.js

@@ -1,45 +1,28 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Graphics2D, Node2D, strokeOps, property, } from "@motionscript/sdk";
+import { Graphics2D, Types, component2d, strokeOps, } from "@motionscript/sdk";
+import { loadPaints } from "./paints.js";
 import { DEFAULT_PLOT_AREA } from "./shared.js";
-import { declarePaints } from "@motionscript/sdk/component";
 /**
  * The thick **frame** around a cartesian chart's plot: an empty rect wearing an
- * inside stroke, sized from its allocated `layoutBounds`.
+ * inside stroke, sized from its box.
  *
  * Split out of {@link ChartCanvas} (the filled + gridded backdrop) so it can be
  * placed *after* the marks in the tree — the box then frames the plot **over**
  * them, so a line or a column running to the edge tucks cleanly under the border
  * rather than sitting on top of it.
  */
-export class ChartBorder extends Node2D {
-    /**
-     * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-     * paint props it carries — see {@link declarePaints}.
-     */
-    declareAssets(assets) {
-        super.declareAssets(assets);
-        declarePaints(this, assets);
-    }
-    renderSelf(ctx) {
-        const W = this.layoutBounds.width;
-        const H = this.layoutBounds.height;
-        if (W <= 0 || H <= 0)
+export const ChartBorder = component2d({
+    key: "chartBorder",
+    state: {
+        stroke: Types.custom(DEFAULT_PLOT_AREA.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+    },
+    load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),
+    render: (ctx, state) => {
+        const { width, height } = ctx.size;
+        if (width <= 0 || height <= 0)
             return;
         // Empty rect (no fill) with the themed stroke, so the frame sits over the
         // marks but the box interior stays clear.
-        ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).stroke(this.stroke));
-    }
-}
-__decorate([
-    property({
-        default: DEFAULT_PLOT_AREA.stroke,
-        mapper: strokeOps.resolve,
-        tween: strokeOps.lerp,
-    })
-], ChartBorder.prototype, "stroke", void 0);
+        ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width, height }).stroke(state.stroke));
+    },
+});
 //# sourceMappingURL=chart-border.js.map

package/dist/kit/chart-border.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-border.js","sourceRoot":"","sources":["../../src/kit/chart-border.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAEL,UAAU,EACV,MAAM,EACN,SAAS,EACT,QAAQ,GAIT,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAW3D;;;;;;;;GAQG;AACH,MAAM,OAAO,WAAY,SAAQ,MAAwB;IAQvD;;;OAGG;IACM,aAAa,CAAC,MAAkB;QACvC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QAC3B,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAC7B,CAAC;IAES,UAAU,CAAC,GAAoB;QACvC,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA;QACjC,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAA;QAClC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAAE,OAAM;QAE5B,0EAA0E;QAC1E,0CAA0C;QAC1C,GAAG,CAAC,IAAI,CACN,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAC/E,CAAA;IACH,CAAC;CACF;AAtBS;IALP,QAAQ,CAAC;QACR,OAAO,EAAE,iBAAiB,CAAC,MAAM;QACjC,MAAM,EAAE,SAAS,CAAC,OAAO;QACzB,KAAK,EAAE,SAAS,CAAC,IAAI;KACtB,CAAC;2CACoB","sourcesContent":["import {\n  type AssetScope,\n  Graphics2D,\n  Node2D,\n  strokeOps,\n  property,\n  type Node2DProps,\n  type RenderContext2D,\n  type Stroke,\n} from \"@motionscript/sdk\"\n\nimport { DEFAULT_PLOT_AREA } from \"./shared\"\nimport { declarePaints } from \"@motionscript/sdk/component\"\n\nexport interface ChartBorderProps extends Node2DProps {\n  /**\n   * The plot's thick frame stroke. The stroke resolver's default `align` is\n   * `'inside'`, so the whole weight sits within the layout box unless the theme\n   * overrides it.\n   */\n  stroke: Stroke\n}\n\n/**\n * The thick **frame** around a cartesian chart's plot: an empty rect wearing an\n * inside stroke, sized from its allocated `layoutBounds`.\n *\n * Split out of {@link ChartCanvas} (the filled + gridded backdrop) so it can be\n * placed *after* the marks in the tree — the box then frames the plot **over**\n * them, so a line or a column running to the edge tucks cleanly under the border\n * rather than sitting on top of it.\n */\nexport class ChartBorder extends Node2D<ChartBorderProps> {\n  @property({\n    default: DEFAULT_PLOT_AREA.stroke,\n    mapper: strokeOps.resolve,\n    tween: strokeOps.lerp,\n  })\n  declare stroke: Stroke\n\n  /**\n   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the\n   * paint props it carries — see {@link declarePaints}.\n   */\n  override declareAssets(assets: AssetScope): void {\n    super.declareAssets(assets)\n    declarePaints(this, assets)\n  }\n\n  protected renderSelf(ctx: RenderContext2D): void {\n    const W = this.layoutBounds.width\n    const H = this.layoutBounds.height\n    if (W <= 0 || H <= 0) return\n\n    // Empty rect (no fill) with the themed stroke, so the frame sits over the\n    // marks but the box interior stays clear.\n    ctx.draw(\n      new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).stroke(this.stroke)\n    )\n  }\n}\n"]}
+{"version":3,"file":"chart-border.js","sourceRoot":"","sources":["../../src/kit/chart-border.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,GAOV,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAW5C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,GAAG,EAAE,aAAa;IAClB,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,MAAM,CAA2B,iBAAiB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;KAC/H;IACD,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACxE,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACrB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,IAAI,CAAA;QAClC,IAAI,KAAK,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;YAAE,OAAM;QACrC,0EAA0E;QAC1E,0CAA0C;QAC1C,GAAG,CAAC,IAAI,CAAC,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACrF,CAAC;CACF,CAAC,CAAA","sourcesContent":["import {\r\n  Graphics2D,\r\n  Types,\r\n  component2d,\r\n  strokeOps,\r\n  type NodeOf,\r\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\r\n  type Node2D as _Node2D,\r\n  type Node2DProps,\r\n  type Stroke,\r\n  type StrokeResolved,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { loadPaints } from \"./paints\"\r\nimport { DEFAULT_PLOT_AREA } from \"./shared\"\r\n\r\nexport interface ChartBorderProps extends Node2DProps {\r\n  /**\r\n   * The plot's thick frame stroke. The stroke resolver's default `align` is\r\n   * `'inside'`, so the whole weight sits within the layout box unless the theme\r\n   * overrides it.\r\n   */\r\n  stroke: Stroke\r\n}\r\n\r\n/**\r\n * The thick **frame** around a cartesian chart's plot: an empty rect wearing an\r\n * inside stroke, sized from its box.\r\n *\r\n * Split out of {@link ChartCanvas} (the filled + gridded backdrop) so it can be\r\n * placed *after* the marks in the tree — the box then frames the plot **over**\r\n * them, so a line or a column running to the edge tucks cleanly under the border\r\n * rather than sitting on top of it.\r\n */\r\nexport const ChartBorder = component2d({\r\n  key: \"chartBorder\",\r\n  state: {\r\n    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_PLOT_AREA.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\r\n  },\r\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),\r\n  render: (ctx, state) => {\r\n    const { width, height } = ctx.size\r\n    if (width <= 0 || height <= 0) return\r\n    // Empty rect (no fill) with the themed stroke, so the frame sits over the\r\n    // marks but the box interior stays clear.\r\n    ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width, height }).stroke(state.stroke))\r\n  },\r\n})\r\n\r\nexport type ChartBorder = NodeOf<typeof ChartBorder>\r\n"]}

package/dist/kit/chart-canvas.d.ts

@@ -1,4 +1,4 @@
-import { type AssetScope, Node2D, type Fill, type Node2DProps, type RenderContext2D, type Shadow, type Stroke } from "@motionscript/sdk";
+import { type Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Node2DProps, type Shadow, type ShadowResolved, type Stroke, type StrokeResolved } from "@motionscript/sdk";
 import { type Range } from "./shared.js";
 export interface ChartCanvasProps extends Node2DProps {
     /** Fill of the plot panel behind the marks. */
@@ -26,9 +26,8 @@ export interface ChartCanvasProps extends Node2DProps {
 }
 /**
  * The plot **backdrop** of a cartesian chart: a filled panel with a grid of
- * faint lines spanning both directions across it. Drawn as one {@link Graphics2D}
- * command list, sized from its allocated `layoutBounds` and centred on the node
- * origin.
+ * faint lines spanning both directions across it, sized from its box and centred
+ * on its origin.
  *
  * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn
  * *over* the marks while this panel sits under them. Grid lines are placed from
@@ -36,21 +35,24 @@ export interface ChartCanvasProps extends Node2DProps {
  * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its
  * marker whether or not the markers are evenly spaced.
  */
-export declare class ChartCanvas extends Node2D<ChartCanvasProps> {
-    fill: Fill;
-    shadow: Shadow;
-    xGridStroke: Stroke;
-    yGridStroke: Stroke;
-    xMarkers: number[];
-    yMarkers: number[];
-    xExtent: Range;
-    yExtent: Range;
-    /**
-     * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-     * paint props it carries — see {@link declarePaints}. The grid strokes are
-     * named past the conventional slots, so they are passed explicitly.
-     */
-    declareAssets(assets: AssetScope): void;
-    protected renderSelf(ctx: RenderContext2D): void;
-}
+export declare const ChartCanvas: import("@motionscript/sdk").Component<"chartCanvas", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly shadow: import("@motionscript/sdk").Type<Shadow, ShadowResolved[], false>;
+    readonly xGridStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    readonly yGridStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    readonly xMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly yMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly xExtent: import("@motionscript/sdk").Type<Range, Range, false>;
+    readonly yExtent: import("@motionscript/sdk").Type<Range, Range, false>;
+}>, {}, null, _Node2D<Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly shadow: import("@motionscript/sdk").Type<Shadow, ShadowResolved[], false>;
+    readonly xGridStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    readonly yGridStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    readonly xMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly yMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly xExtent: import("@motionscript/sdk").Type<Range, Range, false>;
+    readonly yExtent: import("@motionscript/sdk").Type<Range, Range, false>;
+}>, null>>;
+export type ChartCanvas = NodeOf<typeof ChartCanvas>;
 //# sourceMappingURL=chart-canvas.d.ts.map

package/dist/kit/chart-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-canvas.d.ts","sourceRoot":"","sources":["../../src/kit/chart-canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAEf,MAAM,EAKN,KAAK,IAAI,EACT,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,MAAM,EACX,KAAK,MAAM,EAEZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAIL,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AAGjB,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,+CAA+C;IAC/C,IAAI,EAAE,IAAI,CAAA;IACV,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,WAAW,EAAE,MAAM,CAAA;IACnB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,mFAAmF;IACnF,OAAO,EAAE,KAAK,CAAA;IACd,iFAAiF;IACjF,OAAO,EAAE,KAAK,CAAA;CACf;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,WAAY,SAAQ,MAAM,CAAC,gBAAgB,CAAC;IAM/C,IAAI,EAAE,IAAI,CAAA;IAMV,MAAM,EAAE,MAAM,CAAA;IAMd,WAAW,EAAE,MAAM,CAAA;IAMnB,WAAW,EAAE,MAAM,CAAA;IAC0B,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE,KAAK,CAAA;IACd,OAAO,EAAE,KAAK,CAAA;IAEpE;;;;OAIG;IACM,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAOhD,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI;CAqDjD"}
+{"version":3,"file":"chart-canvas.d.ts","sourceRoot":"","sources":["../../src/kit/chart-canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,IAAI,EACT,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,EAChB,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAIL,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,+CAA+C;IAC/C,IAAI,EAAE,IAAI,CAAA;IACV,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,WAAW,EAAE,MAAM,CAAA;IACnB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,mFAAmF;IACnF,OAAO,EAAE,KAAK,CAAA;IACd,iFAAiF;IACjF,OAAO,EAAE,KAAK,CAAA;CACf;AAKD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;UAoDtB,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/kit/chart-canvas.js

@@ -1,17 +1,12 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Graphics2D, Node2D, fillOps, shadowOps, strokeOps, property, } from "@motionscript/sdk";
+import { Graphics2D, Types, component2d, fillOps, shadowOps, strokeOps, } from "@motionscript/sdk";
+import { fresh } from "./entries.js";
+import { loadPaints } from "./paints.js";
 import { DEFAULT_PLOT_AREA, DEFAULT_X_AXIS, DEFAULT_Y_AXIS, } from "./shared.js";
-import { declarePaints } from "@motionscript/sdk/component";
+const strokeEntry = (initial) => Types.custom(initial, { resolve: strokeOps.resolve, lerp: strokeOps.lerp });
 /**
  * The plot **backdrop** of a cartesian chart: a filled panel with a grid of
- * faint lines spanning both directions across it. Drawn as one {@link Graphics2D}
- * command list, sized from its allocated `layoutBounds` and centred on the node
- * origin.
+ * faint lines spanning both directions across it, sized from its box and centred
+ * on its origin.
  *
  * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn
  * *over* the marks while this panel sits under them. Grid lines are placed from
@@ -19,107 +14,55 @@ import { declarePaints } from "@motionscript/sdk/component";
  * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its
  * marker whether or not the markers are evenly spaced.
  */
-export class ChartCanvas extends Node2D {
-    /**
-     * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-     * paint props it carries — see {@link declarePaints}. The grid strokes are
-     * named past the conventional slots, so they are passed explicitly.
-     */
-    declareAssets(assets) {
-        super.declareAssets(assets);
-        declarePaints(this, assets, {
-            strokes: [this.xGridStroke, this.yGridStroke],
-        });
-    }
-    renderSelf(ctx) {
-        const W = this.layoutBounds.width;
-        const H = this.layoutBounds.height;
+export const ChartCanvas = component2d({
+    key: "chartCanvas",
+    state: {
+        fill: Types.custom(DEFAULT_PLOT_AREA.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+        shadow: Types.custom(DEFAULT_PLOT_AREA.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),
+        xGridStroke: strokeEntry(DEFAULT_X_AXIS.lineStyle),
+        yGridStroke: strokeEntry(DEFAULT_Y_AXIS.lineStyle),
+        xMarkers: fresh(() => []),
+        yMarkers: fresh(() => []),
+        xExtent: fresh(() => [0, 1]),
+        yExtent: fresh(() => [0, 1]),
+    },
+    // The grid strokes are named past the conventional slots, so they are named here.
+    load: (loader, state) => loadPaints(loader, { fills: [state.fill], shadows: [state.shadow], strokes: [state.xGridStroke, state.yGridStroke] }),
+    render: (ctx, state) => {
+        const { width: W, height: H } = ctx.size;
         if (W <= 0 || H <= 0)
             return;
         // Plot panel, centred on the origin (node space is y-up, origin centre).
-        ctx.draw(new Graphics2D()
-            .rect({ x: 0, y: 0, width: W, height: H })
-            .shadow(this.shadow)
-            .fill(this.fill));
-        const [xMin, xMax] = this.xExtent;
-        const [yMin, yMax] = this.yExtent;
+        ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).shadow(state.shadow).fill(state.fill));
+        const [xMin, xMax] = state.xExtent;
+        const [yMin, yMax] = state.yExtent;
         // Fraction of a marker across its extent; guard a zero-width extent.
         const xFrac = (v) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin));
         const yFrac = (v) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin));
         // Skip markers landing on (or outside) the edges — they'd sit under the border.
         const interior = (f) => f > 1e-6 && f < 1 - 1e-6;
-        const xStroke = this.xGridStroke[0];
+        const xStroke = state.xGridStroke[0];
         if (xStroke) {
             const xGrid = new Graphics2D();
-            for (const v of this.xMarkers) {
+            for (const v of state.xMarkers) {
                 const f = xFrac(v);
                 if (!interior(f))
                     continue;
-                xGrid.rect({
-                    x: -W / 2 + f * W,
-                    y: 0,
-                    width: xStroke.weight,
-                    height: H,
-                });
+                xGrid.rect({ x: -W / 2 + f * W, y: 0, width: xStroke.weight, height: H });
             }
             ctx.draw(xGrid.fill(xStroke.fill));
         }
-        const yStroke = this.yGridStroke[0];
+        const yStroke = state.yGridStroke[0];
         if (yStroke) {
             const yGrid = new Graphics2D();
-            for (const v of this.yMarkers) {
+            for (const v of state.yMarkers) {
                 const f = yFrac(v);
                 if (!interior(f))
                     continue;
-                yGrid.rect({
-                    x: 0,
-                    y: -H / 2 + f * H,
-                    width: W,
-                    height: yStroke.weight,
-                });
+                yGrid.rect({ x: 0, y: -H / 2 + f * H, width: W, height: yStroke.weight });
             }
             ctx.draw(yGrid.fill(yStroke.fill));
         }
-    }
-}
-__decorate([
-    property({
-        default: DEFAULT_PLOT_AREA.fill,
-        mapper: fillOps.resolve,
-        tween: fillOps.lerp,
-    })
-], ChartCanvas.prototype, "fill", void 0);
-__decorate([
-    property({
-        default: DEFAULT_PLOT_AREA.shadow,
-        mapper: shadowOps.resolve,
-        tween: shadowOps.lerp,
-    })
-], ChartCanvas.prototype, "shadow", void 0);
-__decorate([
-    property({
-        default: DEFAULT_X_AXIS.lineStyle,
-        mapper: strokeOps.resolve,
-        tween: strokeOps.lerp,
-    })
-], ChartCanvas.prototype, "xGridStroke", void 0);
-__decorate([
-    property({
-        default: DEFAULT_Y_AXIS.lineStyle,
-        mapper: strokeOps.resolve,
-        tween: strokeOps.lerp,
-    })
-], ChartCanvas.prototype, "yGridStroke", void 0);
-__decorate([
-    property({ default: () => [] })
-], ChartCanvas.prototype, "xMarkers", void 0);
-__decorate([
-    property({ default: () => [] })
-], ChartCanvas.prototype, "yMarkers", void 0);
-__decorate([
-    property({ default: () => [0, 1] })
-], ChartCanvas.prototype, "xExtent", void 0);
-__decorate([
-    property({ default: () => [0, 1] })
-], ChartCanvas.prototype, "yExtent", void 0);
+    },
+});
 //# sourceMappingURL=chart-canvas.js.map