@motionscript/charts 0.1.0 → 0.1.1-alpha.1

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,aa,b,ba,c,ca,d,da,e,ea,f,fa,g,ga,h,ha,i,ia,j,ja,k,ka,l,la,m,ma,n,na,o,oa,p,q,r,s,t,u,v,w,x,y,z}from"./chunks/chunk-R3Q5EE6E.js";export{_ as CARTESIAN_GRID,Y as CHART_COLORS,$ as CHART_LEGEND,X as CHART_PALETTE_DEFAULT,W as CHART_STYLE_FAMILY,aa as CHART_STYLE_PRESETS,Z as CHART_TEXT,o as ChartCanvas,Q as ChartLegend,J as DEFAULT_LEGEND,r as DEFAULT_MARKERS,H as DEFAULT_X_AXIS,I as DEFAULT_Y_AXIS,ja as DEG,s as ENTER_SHARE,V as HorizontalAxis,p as LEGEND_SLIDE,ma as PIE_SPOTLIGHT_DIM,ia as PieLegend,l as SERIES_ARG,D as SPOTLIGHT_DIM,U as VerticalAxis,x as armed,y as arrival,w as arrivalOf,v as arrivalsEntry,k as asParts,ga as axisConfigOf,S as axisPads,u as beats,g as boundText,T as captionColumn,d as cartesianFrame,e as chartViews,h as columnGhost,i as fade,K as formatMarker,M as formatPercent,t as frameEase,a as frameGap,j as fresh,b as headroom,f as laidOutSize,q as legendAway,ha as legendConfigOf,A as lerpAxisDomain,B as lerpAxisEntry,m as loadPaints,R as markerCaption,L as markerStep,da as markerText,N as markerValues,O as niceRange,P as niceTicks,E as num,G as numericFields,c as overhang,ba as paletteFill,z as resolveAxisDomain,na as resolvedFill,oa as ringFills,la as ringPoint,n as rule,ka as selectionFade,ca as seriesFill,C as settleAxisDomain,F as text,ea as titleText,fa as valueText};
 //# 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.1-alpha.0",
   "exports": {
     ".": "dist/browser/index.js",
     "./kit": "dist/browser/kit.js"

package/dist/engine.d.ts

@@ -1,29 +1,20 @@
 /**
- * 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 five 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/style.js";
 export * from "./kit/cartesian.js";
-export * from "./kit/chart-border.js";
 export * from "./kit/chart-canvas.js";
+export * from "./kit/horizontal-axis.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/pie-legend.js";
+export * from "./kit/polar.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;;;;;;;;;;;;;;;;;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,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA"}

package/dist/engine.js

@@ -1,29 +1,20 @@
 /**
- * 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 five 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/style.js";
 export * from "./kit/cartesian.js";
-export * from "./kit/chart-border.js";
 export * from "./kit/chart-canvas.js";
+export * from "./kit/horizontal-axis.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/pie-legend.js";
+export * from "./kit/polar.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;;;;;;;;;;;;;;;;;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,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA","sourcesContent":["/**\n * The chart kit: what the five 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/style\"\nexport * from \"./kit/cartesian\"\nexport * from \"./kit/chart-canvas\"\nexport * from \"./kit/horizontal-axis\"\nexport * from \"./kit/chart-legend\"\nexport * from \"./kit/entries\"\nexport * from \"./kit/motion\"\nexport * from \"./kit/paints\"\nexport * from \"./kit/pie-legend\"\nexport * from \"./kit/polar\"\nexport * from \"./kit/vertical-axis\"\nexport * from \"@motionscript/sdk/component\"\n"]}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./line-chart/index.js";
 export * from "./bar-chart/index.js";
 export * from "./pie-chart/index.js";
+export * from "./radar-chart/index.js";
+export * from "./radial-chart/index.js";
 export * from "./engine.js";
 export { NODES } from "./nodes.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,6 +1,8 @@
 export * from "./line-chart/index.js";
 export * from "./bar-chart/index.js";
 export * from "./pie-chart/index.js";
+export * from "./radar-chart/index.js";
+export * from "./radial-chart/index.js";
 export * from "./engine.js";
 export { NODES } from "./nodes.js";
 //# sourceMappingURL=index.js.map

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,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,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 \"./radar-chart\";\nexport * from \"./radial-chart\";\nexport * from \"./engine\";\nexport { NODES } from \"./nodes\";\n"]}

package/dist/kit/cartesian.d.ts

@@ -1,44 +1,58 @@
-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. */
+import { type ChildView, type Fill, type Insets, type Node2D, type Size2D, type TextStyle } from "@motionscript/sdk";
+import type { CartesianStyle, LegendPosition } from "./style.js";
+/** Space between the frame's rows and columns: the plot and the legend, the axes and the legend. */
+export declare function frameGap(style: Pick<CartesianStyle, "fontSize">): number;
+/** Room above the plot for the top value marker, which is centred on the top grid line. */
+export declare function headroom(style: Pick<CartesianStyle, "fontSize">): number;
+/** How far an end marker of a horizontal value axis may hang past the plot: half a short caption. */
+export declare function overhang(style: Pick<CartesianStyle, "fontSize">): number;
+interface CartesianParts {
+    /** The axis beside the plot, on its left. */
+    readonly left?: Node2D;
+    /** An invisible twin of `left` under the plot, so the row there starts at the plot's left edge. */
+    readonly ghost?: Node2D;
+    /** 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 axis under the plot. */
+    readonly bottom?: Node2D;
+    readonly legend?: Node2D;
+    readonly legendAt: LegendPosition;
+    readonly gap: () => number;
+    readonly padding: () => Insets;
 }
 /**
- * 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. A legend above or below is centred
+ * on the whole chart; one on the right is a column beside the plot. An axis the
+ * style turns off is simply not here, and the plot takes its room.
  */
 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[];
+/** Every view under `children`, depth first in build order: the axis beside the plot comes before its twin, which holds no parts. */
+export declare function chartViews(children: readonly ChildView[]): ChildView[];
+/** A part's laid-out size; zero before it is built or laid out. */
+export declare function laidOutSize(node: Node2D | undefined): Size2D;
+/**
+ * A text style as props bound to `read`, so a style tween reaches text built
+ * once. Only the keys set at build are bound: an unset family stays unset, so
+ * the host's default face still applies.
+ */
+export declare function boundText(read: () => TextStyle): Record<string, unknown>;
+interface GhostSpec {
+    readonly captions: () => readonly string[];
+    /** How many captions the real axis built. */
+    readonly count: number;
+    readonly text: () => TextStyle;
+    readonly title: string;
+    readonly titleText: () => TextStyle;
+    readonly tickPad: () => number;
+    readonly titlePad: () => number;
 }
 /**
- * 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.
+ * An invisible column as wide as a vertical axis built from the same captions:
+ * the widest caption plus the tick padding, and the rotated title before it. A
+ * plain tree, so a command looking for the axis never finds this instead.
  */
-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;
+export declare function columnGhost(spec: GhostSpec): Node2D;
+/** `fill` with every layer's opacity scaled by `k`. */
+export declare function fade(fill: Fill, k: number): Fill;
+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,EAKL,KAAK,SAAS,EACd,KAAK,IAAI,EAET,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,SAAS,EACf,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7D,oGAAoG;AACpG,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,MAAM,CAExE;AAED,2FAA2F;AAC3F,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,MAAM,CAExE;AAED,qGAAqG;AACrG,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,MAAM,CAExE;AAED,UAAU,cAAc;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,mGAAmG;IACnG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAA;IACjC,QAAQ,CAAC,GAAG,EAAE,MAAM,MAAM,CAAA;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,MAAM,CAAA;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CA6B5D;AAED,qIAAqI;AACrI,wBAAgB,UAAU,CAAC,QAAQ,EAAE,SAAS,SAAS,EAAE,GAAG,SAAS,EAAE,CAUtE;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG5D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAKxE;AAED,UAAU,SAAS;IACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,SAAS,MAAM,EAAE,CAAA;IAC1C,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,SAAS,CAAA;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,SAAS,CAAA;IACnC,QAAQ,CAAC,OAAO,EAAE,MAAM,MAAM,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,MAAM,CAAA;CAChC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAQnD;AAED,uDAAuD;AACvD,wBAAgB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAGhD"}

package/dist/kit/cartesian.js

@@ -1,59 +1,97 @@
-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;
+import { Rect, RotatedBox, Text, textOps, } from "@motionscript/sdk";
+/** Space between the frame's rows and columns: the plot and the legend, the axes and the legend. */
+export function frameGap(style) {
+    return Math.round(style.fontSize * 0.9);
+}
+/** Room above the plot for the top value marker, which is centred on the top grid line. */
+export function headroom(style) {
+    return Math.ceil(style.fontSize * 0.7);
+}
+/** How far an end marker of a horizontal value axis may hang past the plot: half a short caption. */
+export function overhang(style) {
+    return Math.ceil(style.fontSize * 1.1);
+}
 /**
- * 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. A legend above or below is centred
+ * on the whole chart; one on the right is a column beside the plot. An axis the
+ * style turns off is simply not here, and the plot takes its room.
  */
 export function cartesianFrame(parts) {
+    const top = new Rect({ flow: "horizontal", width: "fill", height: "fill", children: [...(parts.left ? [parts.left] : []), parts.plot] });
+    const rows = [top];
+    if (parts.bottom) {
+        rows.push(new Rect({ flow: "horizontal", width: "fill", height: "hug", children: [...(parts.ghost ? [parts.ghost] : []), parts.bottom] }));
+    }
+    const body = new Rect({ flow: "vertical", width: "fill", height: "fill", children: rows });
+    const legend = parts.legend && parts.legendAt !== "none" ? parts.legend : undefined;
+    const main = new Rect({
+        flow: "horizontal",
+        width: "fill",
+        height: "fill",
+        align: "center",
+        gap: parts.gap,
+        children: [body, ...(legend && parts.legendAt === "right" ? [legend] : [])],
+    });
+    const across = (node) => new Rect({ flow: "horizontal", width: "fill", height: "hug", align: "center", children: [node] });
     return new Rect({
         flow: "vertical",
         width: "fill",
         height: "fill",
-        padding: { top: TOP_HEADROOM },
+        gap: parts.gap,
+        padding: parts.padding,
         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] })],
-            }),
+            ...(legend && parts.legendAt === "top" ? [across(legend)] : []),
+            main,
+            ...(legend && parts.legendAt === "bottom" ? [across(legend)] : []),
         ],
     });
 }
-/**
- * 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;
+/** Every view under `children`, depth first in build order: the axis beside the plot comes before its twin, which holds no parts. */
+export function chartViews(children) {
+    const out = [];
+    const walk = (views) => {
+        for (const view of views) {
+            out.push(view);
+            walk(view.children);
+        }
+    };
+    walk(children);
+    return out;
 }
-/** 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 };
 }
+/**
+ * A text style as props bound to `read`, so a style tween reaches text built
+ * once. Only the keys set at build are bound: an unset family stays unset, so
+ * the host's default face still applies.
+ */
+export function boundText(read) {
+    const keys = Object.keys(textOps.styleProps(read()));
+    const props = {};
+    for (const key of keys)
+        props[key] = () => read()[key];
+    return props;
+}
+/**
+ * An invisible column as wide as a vertical axis built from the same captions:
+ * the widest caption plus the tick padding, and the rotated title before it. A
+ * plain tree, so a command looking for the axis never finds this instead.
+ */
+export function columnGhost(spec) {
+    const captions = Array.from({ length: spec.count }, (_, i) => new Text({ ...boundText(spec.text), text: () => spec.captions()[i] ?? "" }));
+    const children = [];
+    if (spec.title !== "") {
+        children.push(new RotatedBox({ angle: -90, width: "hug", height: "hug", children: new Text({ ...boundText(spec.titleText), text: spec.title }) }));
+    }
+    children.push(new Rect({ flow: "vertical", width: "hug", height: "hug", padding: () => ({ right: spec.tickPad() }), children: captions }));
+    return new Rect({ opacity: 0, flow: "horizontal", gap: spec.titlePad, width: "hug", height: 0, children });
+}
+/** `fill` with every layer's opacity scaled by `k`. */
+export function fade(fill, k) {
+    const layers = (Array.isArray(fill) ? fill : [fill]);
+    return layers.map((layer) => (typeof layer === "object" && layer !== null ? { ...layer, opacity: (layer.opacity ?? 1) * k } : layer));
+}
 //# sourceMappingURL=cartesian.js.map

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":"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","sourcesContent":["import {\n  Rect,\n  RotatedBox,\n  Text,\n  textOps,\n  type ChildView,\n  type Fill,\n  type FillResolved,\n  type Insets,\n  type Node2D,\n  type Size2D,\n  type TextStyle,\n} from \"@motionscript/sdk\"\n\nimport type { CartesianStyle, LegendPosition } from \"./style\"\n\n/** Space between the frame's rows and columns: the plot and the legend, the axes and the legend. */\nexport function frameGap(style: Pick<CartesianStyle, \"fontSize\">): number {\n  return Math.round(style.fontSize * 0.9)\n}\n\n/** Room above the plot for the top value marker, which is centred on the top grid line. */\nexport function headroom(style: Pick<CartesianStyle, \"fontSize\">): number {\n  return Math.ceil(style.fontSize * 0.7)\n}\n\n/** How far an end marker of a horizontal value axis may hang past the plot: half a short caption. */\nexport function overhang(style: Pick<CartesianStyle, \"fontSize\">): number {\n  return Math.ceil(style.fontSize * 1.1)\n}\n\ninterface CartesianParts {\n  /** The axis beside the plot, on its left. */\n  readonly left?: Node2D\n  /** An invisible twin of `left` under the plot, so the row there starts at the plot's left edge. */\n  readonly ghost?: Node2D\n  /** The box the grid and the marks share. */\n  readonly plot: Node2D\n  /** The axis under the plot. */\n  readonly bottom?: Node2D\n  readonly legend?: Node2D\n  readonly legendAt: LegendPosition\n  readonly gap: () => number\n  readonly padding: () => Insets\n}\n\n/**\n * The frame the line and bar charts share. A legend above or below is centred\n * on the whole chart; one on the right is a column beside the plot. An axis the\n * style turns off is simply not here, and the plot takes its room.\n */\nexport function cartesianFrame(parts: CartesianParts): Node2D {\n  const top = new Rect({ flow: \"horizontal\", width: \"fill\", height: \"fill\", children: [...(parts.left ? [parts.left] : []), parts.plot] })\n  const rows: Node2D[] = [top as unknown as Node2D]\n  if (parts.bottom) {\n    rows.push(new Rect({ flow: \"horizontal\", width: \"fill\", height: \"hug\", children: [...(parts.ghost ? [parts.ghost] : []), parts.bottom] }) as unknown as Node2D)\n  }\n  const body = new Rect({ flow: \"vertical\", width: \"fill\", height: \"fill\", children: rows })\n  const legend = parts.legend && parts.legendAt !== \"none\" ? parts.legend : undefined\n  const main = new Rect({\n    flow: \"horizontal\",\n    width: \"fill\",\n    height: \"fill\",\n    align: \"center\",\n    gap: parts.gap,\n    children: [body, ...(legend && parts.legendAt === \"right\" ? [legend] : [])],\n  })\n  const across = (node: Node2D) => new Rect({ flow: \"horizontal\", width: \"fill\", height: \"hug\", align: \"center\", children: [node] })\n  return new Rect({\n    flow: \"vertical\",\n    width: \"fill\",\n    height: \"fill\",\n    gap: parts.gap,\n    padding: parts.padding,\n    children: [\n      ...(legend && parts.legendAt === \"top\" ? [across(legend)] : []),\n      main,\n      ...(legend && parts.legendAt === \"bottom\" ? [across(legend)] : []),\n    ],\n  }) as unknown as Node2D\n}\n\n/** Every view under `children`, depth first in build order: the axis beside the plot comes before its twin, which holds no parts. */\nexport function chartViews(children: readonly ChildView[]): ChildView[] {\n  const out: ChildView[] = []\n  const walk = (views: readonly ChildView[]) => {\n    for (const view of views) {\n      out.push(view)\n      walk(view.children)\n    }\n  }\n  walk(children)\n  return out\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\n/**\n * A text style as props bound to `read`, so a style tween reaches text built\n * once. Only the keys set at build are bound: an unset family stays unset, so\n * the host's default face still applies.\n */\nexport function boundText(read: () => TextStyle): Record<string, unknown> {\n  const keys = Object.keys(textOps.styleProps(read())) as (keyof TextStyle)[]\n  const props: Record<string, unknown> = {}\n  for (const key of keys) props[key] = () => read()[key]\n  return props\n}\n\ninterface GhostSpec {\n  readonly captions: () => readonly string[]\n  /** How many captions the real axis built. */\n  readonly count: number\n  readonly text: () => TextStyle\n  readonly title: string\n  readonly titleText: () => TextStyle\n  readonly tickPad: () => number\n  readonly titlePad: () => number\n}\n\n/**\n * An invisible column as wide as a vertical axis built from the same captions:\n * the widest caption plus the tick padding, and the rotated title before it. A\n * plain tree, so a command looking for the axis never finds this instead.\n */\nexport function columnGhost(spec: GhostSpec): Node2D {\n  const captions = Array.from({ length: spec.count }, (_, i) => new Text({ ...boundText(spec.text), text: () => spec.captions()[i] ?? \"\" }))\n  const children: Node2D[] = []\n  if (spec.title !== \"\") {\n    children.push(new RotatedBox({ angle: -90, width: \"hug\", height: \"hug\", children: new Text({ ...boundText(spec.titleText), text: spec.title }) }) as unknown as Node2D)\n  }\n  children.push(new Rect({ flow: \"vertical\", width: \"hug\", height: \"hug\", padding: () => ({ right: spec.tickPad() }), children: captions }) as unknown as Node2D)\n  return new Rect({ opacity: 0, flow: \"horizontal\", gap: spec.titlePad, width: \"hug\", height: 0, children }) as unknown as Node2D\n}\n\n/** `fill` with every layer's opacity scaled by `k`. */\nexport function fade(fill: Fill, k: number): Fill {\n  const layers = (Array.isArray(fill) ? fill : [fill]) as FillResolved[]\n  return layers.map((layer) => (typeof layer === \"object\" && layer !== null ? { ...layer, opacity: ((layer as { opacity?: number }).opacity ?? 1) * k } : layer)) as Fill\n}\n"]}

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

@@ -1,67 +1,64 @@
-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. */
-    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;
-}
+import { type Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type RenderContext, type Stroke, type StrokeResolved, type Vector2 } from "@motionscript/sdk";
+import type { Range } from "./shared.js";
+/** One rule per draw: stroking a union of open paths paints nothing, and a dashed rule keeps its own phase. */
+export declare function rule(ctx: RenderContext, from: Vector2, to: Vector2, stroke: StrokeResolved[], opacity?: number): void;
 /**
- * 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: the panel fill, the grid and the axis rules, sized from its
+ * box. Grid lines are placed from data-unit marker positions mapped through the
+ * extents, so each lands under its marker however the markers are spaced; a line
+ * on an edge is drawn just inside it.
  */
 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>;
+    /** The vertical grid lines, one per `xMarkers` entry. */
     readonly xGridStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** The horizontal grid lines, one per `yMarkers` entry. */
     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>;
+    /** `[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, {
+    /** The baseline and the value-axis rule. */
+    readonly axisStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** Where the horizontal axis rule sits on the y scale, or `null` for none. */
+    readonly xAxisAt: import("@motionscript/sdk").Type<number | null, number | null, false>;
+    /** Where the vertical axis rule sits on the x scale, or `null` for none. */
+    readonly yAxisAt: import("@motionscript/sdk").Type<number | null, number | null, 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>;
+    /** The vertical grid lines, one per `xMarkers` entry. */
     readonly xGridStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** The horizontal grid lines, one per `yMarkers` entry. */
     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>;
+    /** `[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>;
+    /** The baseline and the value-axis rule. */
+    readonly axisStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** Where the horizontal axis rule sits on the y scale, or `null` for none. */
+    readonly xAxisAt: import("@motionscript/sdk").Type<number | null, number | null, false>;
+    /** Where the vertical axis rule sits on the x scale, or `null` for none. */
+    readonly yAxisAt: import("@motionscript/sdk").Type<number | null, number | null, false>;
 }>, null, import("@motionscript/sdk").BuiltNode<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>;
+    /** The vertical grid lines, one per `xMarkers` entry. */
     readonly xGridStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** The horizontal grid lines, one per `yMarkers` entry. */
     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>;
+    /** `[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>>>>;
+    /** The baseline and the value-axis rule. */
+    readonly axisStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** Where the horizontal axis rule sits on the y scale, or `null` for none. */
+    readonly xAxisAt: import("@motionscript/sdk").Type<number | null, number | null, false>;
+    /** Where the vertical axis rule sits on the x scale, or `null` for none. */
+    readonly yAxisAt: import("@motionscript/sdk").Type<number | null, number | null, false>;
+}>, {}, _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,EAML,KAAK,IAAI,EACT,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAI1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AASrC,+GAA+G;AAC/G,wBAAgB,IAAI,CAAC,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,OAAO,SAAI,GAAG,IAAI,CAEhH;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;IAIpB,yDAAyD;;IAEzD,2DAA2D;;;;IAI3D,sEAAsE;;;IAGtE,4CAA4C;;IAE5C,8EAA8E;;IAE9E,4EAA4E;;;;IAb5E,yDAAyD;;IAEzD,2DAA2D;;;;IAI3D,sEAAsE;;;IAGtE,4CAA4C;;IAE5C,8EAA8E;;IAE9E,4EAA4E;;;;IAb5E,yDAAyD;;IAEzD,2DAA2D;;;;IAI3D,sEAAsE;;;IAGtE,4CAA4C;;IAE5C,8EAA8E;;IAE9E,4EAA4E;;gCAgC9E,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}