@motionscript/charts 0.1.0 → 0.1.1-alpha.0

package/dist/browser/kit.js

@@ -1,2 +1,2 @@
-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-TJNHLQGV.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};
+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,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-4SMRCU24.js";export{q as CHART_PALETTE,Y as ChartBorder,Z as ChartCanvas,_ as ChartLegend,z as DEFAULT_LEGEND,e as DEFAULT_MARKERS,y as DEFAULT_PLOT_AREA,r as DEFAULT_SERIES_COLORS,B as DEFAULT_SERIES_FILLS,A as DEFAULT_SERIES_STROKES,w as DEFAULT_X_AXIS,x as DEFAULT_Y_AXIS,f as ENTER_SHARE,d as LEGEND_SLIDE,c as SERIES_ARG,s as SPOTLIGHT_DIM,T as VerticalAxis,k as armed,l as arrival,j as arrivalOf,i as arrivalsEntry,b as asParts,h as beats,U as cartesianFrame,V as cartesianViews,O as formatMarker,Q as formatPercent,g as frameEase,a as fresh,W as laidOutSize,D as lerpAxisConfig,n as lerpAxisDomain,o as lerpAxisEntry,H as lerpLegendConfig,F as lerpPlotArea,L as lerpSeriesFills,J as lerpSeriesStrokes,X as loadPaints,S as markerCaption,P as markerStep,R as markerValues,t as num,v as numericFields,C as resolveAxisConfig,m as resolveAxisDomain,G as resolveLegendConfig,E as resolvePlotArea,N as resolveSeriesFill,K as resolveSeriesFills,M as resolveSeriesStroke,I as resolveSeriesStrokes,p as settleAxisDomain,u as text};
 //# sourceMappingURL=kit.js.map

package/dist/browser/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionscript/charts",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0",
   "exports": {
     ".": "dist/browser/index.js",
     "./kit": "dist/browser/kit.js"

package/dist/engine.d.ts

@@ -1,20 +1,8 @@
 /**
- * The chart **kit**: everything the three charts share, and the one thing a
- * copied chart does not copy.
- *
- * A copy of the line chart takes `line-chart/*` into your project and rewrites its
- * reach for these to `@motionscript/charts`, so the plot panel, the value
- * 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 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.
+ * The chart kit: what the three charts share, and what a copied chart does not
+ * copy. A chart finds its parts by component identity (`VerticalAxis.is`), so a
+ * second copy of `VerticalAxis` would be a second component that the chart never
+ * finds, with no error. Copies import the kit from `@motionscript/charts`.
  */
 export * from "./kit/shared.js";
 export * from "./kit/cartesian.js";

package/dist/engine.d.ts.map

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

@@ -1,20 +1,8 @@
 /**
- * The chart **kit**: everything the three charts share, and the one thing a
- * copied chart does not copy.
- *
- * A copy of the line chart takes `line-chart/*` into your project and rewrites its
- * reach for these to `@motionscript/charts`, so the plot panel, the value
- * 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 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.
+ * The chart kit: what the three charts share, and what a copied chart does not
+ * copy. A chart finds its parts by component identity (`VerticalAxis.is`), so a
+ * second copy of `VerticalAxis` would be a second component that the chart never
+ * finds, with no error. Copies import the kit from `@motionscript/charts`.
  */
 export * from "./kit/shared.js";
 export * from "./kit/cartesian.js";

package/dist/engine.js.map

@@ -1 +1 @@
-{"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":["/**\n * The chart **kit**: everything the three charts share, and the one thing a\n * copied chart does not copy.\n *\n * A copy of the line chart takes `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 by component identity (`VerticalAxis.is`).\n * Copy `VerticalAxis` alongside your fork and there are now two of it — two\n * components answering one name, and whichever one your chart did not get is\n * a part it never finds, 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/cartesian\"\nexport * from \"./kit/chart-border\"\nexport * from \"./kit/chart-canvas\"\nexport * from \"./kit/chart-legend\"\nexport * from \"./kit/entries\"\nexport * from \"./kit/motion\"\nexport * from \"./kit/paints\"\nexport * from \"./kit/vertical-axis\"\nexport * from \"@motionscript/sdk/component\"\n"]}
+{"version":3,"file":"engine.js","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;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":["/**\n * The chart kit: what the three charts share, and what a copied chart does not\n * copy. A chart finds its parts by component identity (`VerticalAxis.is`), so a\n * second copy of `VerticalAxis` would be a second component that the chart never\n * finds, with no error. Copies import the kit from `@motionscript/charts`.\n */\nexport * from \"./kit/shared\"\nexport * from \"./kit/cartesian\"\nexport * from \"./kit/chart-border\"\nexport * from \"./kit/chart-canvas\"\nexport * from \"./kit/chart-legend\"\nexport * from \"./kit/entries\"\nexport * from \"./kit/motion\"\nexport * from \"./kit/paints\"\nexport * from \"./kit/vertical-axis\"\nexport * from \"@motionscript/sdk/component\"\n"]}

package/dist/kit/cartesian.d.ts

@@ -1,44 +1,24 @@
 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. */
+interface CartesianParts {
     readonly axis: Node2D;
-    /** The plot panel: the box the grid and the marks share. */
+    /** 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.
- */
+/** The frame the line and bar charts share: the value axis beside the plot, and under them the gutter, so the rows below start at the plot's left edge. */
 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 {
+interface CartesianViews {
     readonly axis: ChildView;
-    /** The plot panel's own children: the grid, the marks, the border. */
+    /** The plot panel's own children: grid, marks, 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.
- */
+/** 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, 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. */
+/** A part's laid-out size; zero before it is built or laid out. */
 export declare function laidOutSize(node: Node2D | undefined): Size2D;
+export {};
 //# sourceMappingURL=cartesian.d.ts.map

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

@@ -1 +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"}
+{"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;AAWlF,UAAU,cAAc;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,4CAA4C;IAC5C,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,2JAA2J;AAC3J,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAe5D;AAED,UAAU,cAAc;IACtB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;IACxB,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,CAAA;IACnC,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;CACrC;AAED,iLAAiL;AACjL,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,SAAS,EAAE,GAAG,cAAc,GAAG,IAAI,CAYpF;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG5D"}

package/dist/kit/cartesian.js

@@ -1,20 +1,12 @@
 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.
+ * Headroom above the plot, in px. Real padding on the composition, so the top
+ * marker, centred on the top grid line, does not draw its upper half above the
+ * chart's own box.
  */
+const TOP_HEADROOM = 24;
+/** The frame the line and bar charts share: the value axis beside the plot, and under them the gutter, so the rows below start at the plot's left edge. */
 export function cartesianFrame(parts) {
     return new Rect({
         flow: "vertical",
@@ -31,11 +23,7 @@ export function cartesianFrame(parts) {
         ],
     });
 }
-/**
- * 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.
- */
+/** 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, so it is found by shape. */
 export function cartesianViews(children) {
     for (let i = children.length - 1; i >= 0; i--) {
         const frame = children[i];
@@ -51,7 +39,7 @@ export function cartesianViews(children) {
     }
     return null;
 }
-/** A part's laid-out size, or nothing before it is built or laid out. */
+/** A part's laid-out size; zero before it is built or laid out. */
 export function laidOutSize(node) {
     const bounds = node?.layoutBounds;
     return { width: bounds?.width ?? 0, height: bounds?.height ?? 0 };

package/dist/kit/cartesian.js.map

@@ -1 +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\"\n\nimport { VerticalAxis } from \"./vertical-axis\"\n\n/**\n * Headroom above the plot, in px.\n *\n * Two jobs, and the second is why it is real padding on the composition rather\n * than a number the point-mapping math imagines: a series peaking at the top of\n * the scale isn't flush to the top edge, **and** the top marker, which is\n * centred on that top grid line, has somewhere to be. Without it the marker's\n * upper half is drawn above the chart's own box.\n */\nexport const TOP_HEADROOM = 24\n\n/** The parts of a cartesian chart's frame, as {@link cartesianFrame} arranges them. */\nexport interface CartesianParts {\n  /** The value axis, left of the plot. */\n  readonly axis: Node2D\n  /** The plot panel: the box the grid and the marks share. */\n  readonly plot: Node2D\n  /** An invisible twin of the value axis, reserving its gutter under the plot. */\n  readonly gutter: Node2D\n  /** What sits under the plot, top to bottom: the other axis, then the legend. */\n  readonly below: readonly Node2D[]\n}\n\n/**\n * The frame the line and bar charts share: the value axis beside the plot, and\n * under them the gutter beside the rows below the plot, so those rows start at\n * the plot's left edge rather than the chart's.\n */\nexport function cartesianFrame(parts: CartesianParts): Node2D {\n  return new Rect({\n    flow: \"vertical\",\n    width: \"fill\",\n    height: \"fill\",\n    padding: { top: TOP_HEADROOM },\n    children: [\n      new Rect({ flow: \"horizontal\", height: \"fill\", width: \"fill\", children: [parts.axis, parts.plot] }),\n      new Rect({\n        flow: \"horizontal\",\n        width: \"fill\",\n        children: [parts.gutter, new Rect({ flow: \"vertical\", width: \"fill\", gap: 20, children: [...parts.below] })],\n      }),\n    ],\n  }) as unknown as Node2D\n}\n\n/** A cartesian frame's parts, as a command reaches them through its chart's children. */\nexport interface CartesianViews {\n  readonly axis: ChildView\n  /** The plot panel's own children: the grid, the marks, the border. */\n  readonly plot: readonly ChildView[]\n  readonly below: readonly ChildView[]\n}\n\n/**\n * The frame among a chart's children: the last child shaped as\n * {@link cartesianFrame} builds it. The chart builds it after the children it\n * was given, and a document adds its own later still, so it is found by shape.\n */\nexport function cartesianViews(children: readonly ChildView[]): CartesianViews | null {\n  for (let i = children.length - 1; i >= 0; i--) {\n    const frame = children[i]\n    if (!Rect.is(frame)) continue\n    const [top, bottom] = frame.children\n    const axis = top?.children[0]\n    const plot = top?.children[1]\n    const below = bottom?.children[1]\n    if (!axis || !VerticalAxis.is(axis) || !plot || !below) continue\n    return { axis, plot: plot.children, below: below.children }\n  }\n  return null\n}\n\n/** A part's laid-out size, or nothing before it is built or laid out. */\nexport function laidOutSize(node: Node2D | undefined): Size2D {\n  const bounds = node?.layoutBounds\n  return { width: bounds?.width ?? 0, height: bounds?.height ?? 0 }\n}\n"]}
+{"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;;;;GAIG;AACH,MAAM,YAAY,GAAG,EAAE,CAAA;AAYvB,2JAA2J;AAC3J,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;AASD,iLAAiL;AACjL,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,mEAAmE;AACnE,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\"\n\nimport { VerticalAxis } from \"./vertical-axis\"\n\n/**\n * Headroom above the plot, in px. Real padding on the composition, so the top\n * marker, centred on the top grid line, does not draw its upper half above the\n * chart's own box.\n */\nconst TOP_HEADROOM = 24\n\ninterface CartesianParts {\n  readonly axis: Node2D\n  /** The box the grid and the marks share. */\n  readonly plot: Node2D\n  /** An invisible twin of the value axis, reserving its gutter under the plot. */\n  readonly gutter: Node2D\n  /** What sits under the plot, top to bottom: the other axis, then the legend. */\n  readonly below: readonly Node2D[]\n}\n\n/** The frame the line and bar charts share: the value axis beside the plot, and under them the gutter, so the rows below start at the plot's left edge. */\nexport function cartesianFrame(parts: CartesianParts): Node2D {\n  return new Rect({\n    flow: \"vertical\",\n    width: \"fill\",\n    height: \"fill\",\n    padding: { top: TOP_HEADROOM },\n    children: [\n      new Rect({ flow: \"horizontal\", height: \"fill\", width: \"fill\", children: [parts.axis, parts.plot] }),\n      new Rect({\n        flow: \"horizontal\",\n        width: \"fill\",\n        children: [parts.gutter, new Rect({ flow: \"vertical\", width: \"fill\", gap: 20, children: [...parts.below] })],\n      }),\n    ],\n  }) as unknown as Node2D\n}\n\ninterface CartesianViews {\n  readonly axis: ChildView\n  /** The plot panel's own children: grid, marks, border. */\n  readonly plot: readonly ChildView[]\n  readonly below: readonly ChildView[]\n}\n\n/** 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, so it is found by shape. */\nexport function cartesianViews(children: readonly ChildView[]): CartesianViews | null {\n  for (let i = children.length - 1; i >= 0; i--) {\n    const frame = children[i]\n    if (!Rect.is(frame)) continue\n    const [top, bottom] = frame.children\n    const axis = top?.children[0]\n    const plot = top?.children[1]\n    const below = bottom?.children[1]\n    if (!axis || !VerticalAxis.is(axis) || !plot || !below) continue\n    return { axis, plot: plot.children, below: below.children }\n  }\n  return null\n}\n\n/** A part's laid-out size; zero before it is built or laid out. */\nexport function laidOutSize(node: Node2D | undefined): Size2D {\n  const bounds = node?.layoutBounds\n  return { width: bounds?.width ?? 0, height: bounds?.height ?? 0 }\n}\n"]}

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

@@ -1,27 +1,18 @@
-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
-     * `'inside'`, so the whole weight sits within the layout box unless the theme
-     * overrides it.
-     */
-    stroke: Stroke;
-}
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type Stroke, type StrokeResolved } from "@motionscript/sdk";
 /**
- * The thick **frame** around a cartesian chart's plot: an empty rect wearing an
- * 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.
+ * The frame around a cartesian plot: an empty rect with an inside stroke. Split
+ * from {@link ChartCanvas} so it is placed after the marks and frames the plot
+ * over them, tucking a line or column running to the edge under the border.
  */
 export declare const ChartBorder: import("@motionscript/sdk").Component<"chartBorder", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** The stroke resolver's default `align` is `'inside'`, so the whole weight sits within the box unless the theme overrides it. */
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
-}>, {}, null, _Node2D<Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+}>, {}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** The stroke resolver's default `align` is `'inside'`, so the whole weight sits within the box unless the theme overrides it. */
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
 }>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** The stroke resolver's default `align` is `'inside'`, so the whole weight sits within the box unless the theme overrides it. */
     readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
-}>, {}, _Node2D<Node2DProps>>>>;
+}>, {}, _Node2D<_Node2DProps>>>>;
 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,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;;;;;;+BAatB,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}
+{"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,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAK1B;;;;GAIG;AACH,eAAO,MAAM,WAAW;IAGpB,kIAAkI;;;IAAlI,kIAAkI;;;IAAlI,kIAAkI;;gCASpI,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/kit/chart-border.js

@@ -2,17 +2,14 @@ import { Graphics2D, Types, component2d, strokeOps, } from "@motionscript/sdk";
 import { loadPaints } from "./paints.js";
 import { DEFAULT_PLOT_AREA } from "./shared.js";
 /**
- * The thick **frame** around a cartesian chart's plot: an empty rect wearing an
- * 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.
+ * The frame around a cartesian plot: an empty rect with an inside stroke. Split
+ * from {@link ChartCanvas} so it is placed after the marks and frames the plot
+ * over them, tucking a line or column running to the edge under the border.
  */
 export const ChartBorder = component2d({
     key: "chartBorder",
     state: {
+        /** The stroke resolver's default `align` is `'inside'`, so the whole weight sits within the box unless the theme overrides it. */
         stroke: Types.custom(DEFAULT_PLOT_AREA.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
     },
     load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),
@@ -20,8 +17,6 @@ export const ChartBorder = component2d({
         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, height }).stroke(state.stroke));
     },
 });

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,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 {\n  Graphics2D,\n  Types,\n  component2d,\n  strokeOps,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { loadPaints } from \"./paints\"\nimport { DEFAULT_PLOT_AREA } from \"./shared\"\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 box.\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 const ChartBorder = component2d({\n  key: \"chartBorder\",\n  state: {\n    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_PLOT_AREA.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n  },\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),\n  render: (ctx, state) => {\n    const { width, height } = ctx.size\n    if (width <= 0 || height <= 0) return\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(new Graphics2D().rect({ x: 0, y: 0, width, height }).stroke(state.stroke))\n  },\n})\n\nexport type ChartBorder = NodeOf<typeof ChartBorder>\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;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,GAAG,EAAE,aAAa;IAClB,KAAK,EAAE;QACL,kIAAkI;QAClI,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,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 {\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} from \"@motionscript/sdk\"\n\nimport { loadPaints } from \"./paints\"\nimport { DEFAULT_PLOT_AREA } from \"./shared\"\n\n/**\n * The frame around a cartesian plot: an empty rect with an inside stroke. Split\n * from {@link ChartCanvas} so it is placed after the marks and frames the plot\n * over them, tucking a line or column running to the edge under the border.\n */\nexport const ChartBorder = component2d({\n  key: \"chartBorder\",\n  state: {\n    /** The stroke resolver's default `align` is `'inside'`, so the whole weight sits within the box unless the theme overrides it. */\n    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_PLOT_AREA.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n  },\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),\n  render: (ctx, state) => {\n    const { width, height } = ctx.size\n    if (width <= 0 || height <= 0) return\n    ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width, height }).stroke(state.stroke))\n  },\n})\n\nexport type ChartBorder = NodeOf<typeof ChartBorder>\n"]}

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

@@ -1,56 +1,39 @@
-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 Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Node2DProps as _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. */
-    fill: Fill;
-    /** Drop shadow of the panel. Default none. */
-    shadow: Shadow;
-    /** Stroke of the vertical grid lines (one per {@link xMarkers}). */
-    xGridStroke: Stroke;
-    /** Stroke of the horizontal grid lines (one per {@link yMarkers}). */
-    yGridStroke: Stroke;
-    /**
-     * Data-unit x positions to draw a vertical grid line at — one per horizontal
-     * axis marker, so a line lands under every marker regardless of spacing.
-     * Positions at (or past) an {@link xExtent} edge coincide with the border and
-     * are skipped. Pass an empty list for a chart whose horizontal axis is
-     * categorical and so has no numeric position to rule at.
-     */
-    xMarkers: number[];
-    /** Data-unit y positions to draw a horizontal grid line at. */
-    yMarkers: number[];
-    /** `[min, max]` of the horizontal scale — maps {@link xMarkers} into the panel. */
-    xExtent: Range;
-    /** `[min, max]` of the vertical scale — maps {@link yMarkers} into the panel. */
-    yExtent: Range;
-}
 /**
- * The plot **backdrop** of a cartesian chart: a filled panel with a grid of
- * 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
- * the axis marker positions (in data units) mapped into the panel through
- * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its
- * marker whether or not the markers are evenly spaced.
+ * The plot backdrop: a filled panel and a grid, sized from its box. The frame is
+ * a separate {@link ChartBorder} drawn over the marks. Grid lines are placed from
+ * the axis markers' data-unit positions mapped through the extents, so each lands
+ * under its marker however the markers are spaced.
  */
 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>;
+    /**
+     * Data-unit positions of the vertical grid lines, one per horizontal marker.
+     * Positions at or past an extent edge coincide with the border and are
+     * skipped. Empty for a categorical axis, which has no numeric position to rule at.
+     */
     readonly xMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
     readonly yMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** `[min, max]` of each scale, mapping the markers into the panel. */
     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, {
+}>, {}, 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>;
+    /**
+     * Data-unit positions of the vertical grid lines, one per horizontal marker.
+     * Positions at or past an extent edge coincide with the border and are
+     * skipped. Empty for a categorical axis, which has no numeric position to rule at.
+     */
     readonly xMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
     readonly yMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** `[min, max]` of each scale, mapping the markers into the panel. */
     readonly xExtent: import("@motionscript/sdk").Type<Range, Range, false>;
     readonly yExtent: import("@motionscript/sdk").Type<Range, Range, false>;
 }>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
@@ -58,10 +41,16 @@ export declare const ChartCanvas: import("@motionscript/sdk").Component<"chartCa
     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>;
+    /**
+     * Data-unit positions of the vertical grid lines, one per horizontal marker.
+     * Positions at or past an extent edge coincide with the border and are
+     * skipped. Empty for a categorical axis, which has no numeric position to rule at.
+     */
     readonly xMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
     readonly yMarkers: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** `[min, max]` of each scale, mapping the markers into the panel. */
     readonly xExtent: import("@motionscript/sdk").Type<Range, Range, false>;
     readonly yExtent: import("@motionscript/sdk").Type<Range, Range, false>;
-}>, {}, _Node2D<Node2DProps>>>>;
+}>, {}, _Node2D<_Node2DProps>>>>;
 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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAoDtB,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}
+{"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,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAIL,KAAK,KAAK,EACX,MAAM,UAAU,CAAA;AAKjB;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;;;;IAOpB;;;;OAIG;;;IAGH,sEAAsE;;;;;;;;IAPtE;;;;OAIG;;;IAGH,sEAAsE;;;;;;;;IAPtE;;;;OAIG;;;IAGH,sEAAsE;;;gCA2CxE,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/kit/chart-canvas.js

@@ -4,15 +4,10 @@ import { loadPaints } from "./paints.js";
 import { DEFAULT_PLOT_AREA, DEFAULT_X_AXIS, DEFAULT_Y_AXIS, } from "./shared.js";
 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, 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
- * the axis marker positions (in data units) mapped into the panel through
- * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its
- * marker whether or not the markers are evenly spaced.
+ * The plot backdrop: a filled panel and a grid, sized from its box. The frame is
+ * a separate {@link ChartBorder} drawn over the marks. Grid lines are placed from
+ * the axis markers' data-unit positions mapped through the extents, so each lands
+ * under its marker however the markers are spaced.
  */
 export const ChartCanvas = component2d({
     key: "chartCanvas",
@@ -21,25 +16,30 @@ export const ChartCanvas = component2d({
         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),
+        /**
+         * Data-unit positions of the vertical grid lines, one per horizontal marker.
+         * Positions at or past an extent edge coincide with the border and are
+         * skipped. Empty for a categorical axis, which has no numeric position to rule at.
+         */
         xMarkers: fresh(() => []),
         yMarkers: fresh(() => []),
+        /** `[min, max]` of each scale, mapping the markers into the panel. */
         xExtent: fresh(() => [0, 1]),
         yExtent: fresh(() => [0, 1]),
     },
-    // The grid strokes are named past the conventional slots, so they are named here.
+    // The grid strokes sit 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(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.
+        // A zero-width extent maps to 0.
         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.
+        // Markers on or past the edges would sit under the border.
         const interior = (f) => f > 1e-6 && f < 1 - 1e-6;
         const xStroke = state.xGridStroke[0];
         if (xStroke) {

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

@@ -1 +1 @@
-{"version":3,"file":"chart-canvas.js","sourceRoot":"","sources":["../../src/kit/chart-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  fillOps,\n  shadowOps,\n  strokeOps,\n  type Fill,\n  type FillResolved,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps,\n  type Shadow,\n  type ShadowResolved,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"./entries\"\nimport { loadPaints } from \"./paints\"\nimport {\n  DEFAULT_PLOT_AREA,\n  DEFAULT_X_AXIS,\n  DEFAULT_Y_AXIS,\n  type Range,\n} from \"./shared\"\n\nexport interface ChartCanvasProps extends Node2DProps {\n  /** Fill of the plot panel behind the marks. */\n  fill: Fill\n  /** Drop shadow of the panel. Default none. */\n  shadow: Shadow\n  /** Stroke of the vertical grid lines (one per {@link xMarkers}). */\n  xGridStroke: Stroke\n  /** Stroke of the horizontal grid lines (one per {@link yMarkers}). */\n  yGridStroke: Stroke\n  /**\n   * Data-unit x positions to draw a vertical grid line at — one per horizontal\n   * axis marker, so a line lands under every marker regardless of spacing.\n   * Positions at (or past) an {@link xExtent} edge coincide with the border and\n   * are skipped. Pass an empty list for a chart whose horizontal axis is\n   * categorical and so has no numeric position to rule at.\n   */\n  xMarkers: number[]\n  /** Data-unit y positions to draw a horizontal grid line at. */\n  yMarkers: number[]\n  /** `[min, max]` of the horizontal scale — maps {@link xMarkers} into the panel. */\n  xExtent: Range\n  /** `[min, max]` of the vertical scale — maps {@link yMarkers} into the panel. */\n  yExtent: Range\n}\n\nconst strokeEntry = (initial: Stroke) =>\n  Types.custom<Stroke, StrokeResolved[]>(initial, { resolve: strokeOps.resolve, lerp: strokeOps.lerp })\n\n/**\n * The plot **backdrop** of a cartesian chart: a filled panel with a grid of\n * faint lines spanning both directions across it, sized from its box and centred\n * on its origin.\n *\n * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn\n * *over* the marks while this panel sits under them. Grid lines are placed from\n * the axis marker positions (in data units) mapped into the panel through\n * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its\n * marker whether or not the markers are evenly spaced.\n */\nexport const ChartCanvas = component2d({\n  key: \"chartCanvas\",\n  state: {\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_PLOT_AREA.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    shadow: Types.custom<Shadow, ShadowResolved[]>(DEFAULT_PLOT_AREA.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),\n    xGridStroke: strokeEntry(DEFAULT_X_AXIS.lineStyle),\n    yGridStroke: strokeEntry(DEFAULT_Y_AXIS.lineStyle),\n    xMarkers: fresh<number[]>(() => []),\n    yMarkers: fresh<number[]>(() => []),\n    xExtent: fresh<Range>(() => [0, 1]),\n    yExtent: fresh<Range>(() => [0, 1]),\n  },\n  // The grid strokes are named past the conventional slots, so they are named here.\n  load: (loader, state) =>\n    loadPaints(loader, { fills: [state.fill], shadows: [state.shadow], strokes: [state.xGridStroke, state.yGridStroke] }),\n  render: (ctx, state) => {\n    const { width: W, height: H } = ctx.size\n    if (W <= 0 || H <= 0) return\n\n    // Plot panel, centred on the origin (node space is y-up, origin centre).\n    ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).shadow(state.shadow).fill(state.fill))\n\n    const [xMin, xMax] = state.xExtent\n    const [yMin, yMax] = state.yExtent\n    // Fraction of a marker across its extent; guard a zero-width extent.\n    const xFrac = (v: number) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin))\n    const yFrac = (v: number) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin))\n    // Skip markers landing on (or outside) the edges — they'd sit under the border.\n    const interior = (f: number) => f > 1e-6 && f < 1 - 1e-6\n\n    const xStroke = state.xGridStroke[0]\n    if (xStroke) {\n      const xGrid = new Graphics2D()\n      for (const v of state.xMarkers) {\n        const f = xFrac(v)\n        if (!interior(f)) continue\n        xGrid.rect({ x: -W / 2 + f * W, y: 0, width: xStroke.weight, height: H })\n      }\n      ctx.draw(xGrid.fill(xStroke.fill))\n    }\n\n    const yStroke = state.yGridStroke[0]\n    if (yStroke) {\n      const yGrid = new Graphics2D()\n      for (const v of state.yMarkers) {\n        const f = yFrac(v)\n        if (!interior(f)) continue\n        yGrid.rect({ x: 0, y: -H / 2 + f * H, width: W, height: yStroke.weight })\n      }\n      ctx.draw(yGrid.fill(yStroke.fill))\n    }\n  },\n})\n\nexport type ChartCanvas = NodeOf<typeof ChartCanvas>\n"]}
+{"version":3,"file":"chart-canvas.js","sourceRoot":"","sources":["../../src/kit/chart-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  component2d,\n  fillOps,\n  shadowOps,\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 Shadow,\n  type ShadowResolved,\n  type Stroke,\n  type StrokeResolved,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"./entries\"\nimport { loadPaints } from \"./paints\"\nimport {\n  DEFAULT_PLOT_AREA,\n  DEFAULT_X_AXIS,\n  DEFAULT_Y_AXIS,\n  type Range,\n} from \"./shared\"\n\nconst strokeEntry = (initial: Stroke) =>\n  Types.custom<Stroke, StrokeResolved[]>(initial, { resolve: strokeOps.resolve, lerp: strokeOps.lerp })\n\n/**\n * The plot backdrop: a filled panel and a grid, sized from its box. The frame is\n * a separate {@link ChartBorder} drawn over the marks. Grid lines are placed from\n * the axis markers' data-unit positions mapped through the extents, so each lands\n * under its marker however the markers are spaced.\n */\nexport const ChartCanvas = component2d({\n  key: \"chartCanvas\",\n  state: {\n    fill: Types.custom<Fill, FillResolved[]>(DEFAULT_PLOT_AREA.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n    shadow: Types.custom<Shadow, ShadowResolved[]>(DEFAULT_PLOT_AREA.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),\n    xGridStroke: strokeEntry(DEFAULT_X_AXIS.lineStyle),\n    yGridStroke: strokeEntry(DEFAULT_Y_AXIS.lineStyle),\n    /**\n     * Data-unit positions of the vertical grid lines, one per horizontal marker.\n     * Positions at or past an extent edge coincide with the border and are\n     * skipped. Empty for a categorical axis, which has no numeric position to rule at.\n     */\n    xMarkers: fresh<number[]>(() => []),\n    yMarkers: fresh<number[]>(() => []),\n    /** `[min, max]` of each scale, mapping the markers into the panel. */\n    xExtent: fresh<Range>(() => [0, 1]),\n    yExtent: fresh<Range>(() => [0, 1]),\n  },\n  // The grid strokes sit past the conventional slots, so they are named here.\n  load: (loader, state) =>\n    loadPaints(loader, { fills: [state.fill], shadows: [state.shadow], strokes: [state.xGridStroke, state.yGridStroke] }),\n  render: (ctx, state) => {\n    const { width: W, height: H } = ctx.size\n    if (W <= 0 || H <= 0) return\n\n    ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).shadow(state.shadow).fill(state.fill))\n\n    const [xMin, xMax] = state.xExtent\n    const [yMin, yMax] = state.yExtent\n    // A zero-width extent maps to 0.\n    const xFrac = (v: number) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin))\n    const yFrac = (v: number) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin))\n    // Markers on or past the edges would sit under the border.\n    const interior = (f: number) => f > 1e-6 && f < 1 - 1e-6\n\n    const xStroke = state.xGridStroke[0]\n    if (xStroke) {\n      const xGrid = new Graphics2D()\n      for (const v of state.xMarkers) {\n        const f = xFrac(v)\n        if (!interior(f)) continue\n        xGrid.rect({ x: -W / 2 + f * W, y: 0, width: xStroke.weight, height: H })\n      }\n      ctx.draw(xGrid.fill(xStroke.fill))\n    }\n\n    const yStroke = state.yGridStroke[0]\n    if (yStroke) {\n      const yGrid = new Graphics2D()\n      for (const v of state.yMarkers) {\n        const f = yFrac(v)\n        if (!interior(f)) continue\n        yGrid.rect({ x: 0, y: -H / 2 + f * H, width: W, height: yStroke.weight })\n      }\n      ctx.draw(yGrid.fill(yStroke.fill))\n    }\n  },\n})\n\nexport type ChartCanvas = NodeOf<typeof ChartCanvas>\n"]}