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

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

package/dist/browser/manifest.json

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

package/dist/engine.d.ts

@@ -1,17 +1,20 @@
 /**
- * The chart kit: what the three charts share, and what a copied chart does not
+ * 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;;;;;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"}
+{"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,17 +1,20 @@
 /**
- * The chart kit: what the three charts share, and what a copied chart does not
+ * 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;;;;;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"]}
+{"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,24 +1,60 @@
-import { type ChildView, type Node2D, type Size2D } from "@motionscript/sdk";
+import { type ChildView, type Fill, type Insets, type Node2D, type Size2D, type TextStyle } from "@motionscript/sdk";
+import { type CartesianStyle, type 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, "legendText">): 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, "yLabelText">): 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, "xLabelText">): number;
 interface CartesianParts {
-    readonly axis: Node2D;
+    /** Behind the whole chart, axes and legend included. */
+    readonly background?: () => Fill;
+    /** 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, so the rows below start at the plot's left edge. */
+/**
+ * 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;
-interface CartesianViews {
-    readonly axis: ChildView;
-    /** The plot panel's own children: grid, marks, border. */
-    readonly plot: readonly ChildView[];
-    readonly below: readonly ChildView[];
-}
-/** 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;
+/** 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;
+}
+/**
+ * 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 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;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"}
+{"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,EAAU,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA;AAE1E,oGAAoG;AACpG,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,MAAM,CAE1E;AAED,2FAA2F;AAC3F,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,MAAM,CAE1E;AAED,qGAAqG;AACrG,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,MAAM,CAE1E;AAED,UAAU,cAAc;IACtB,wDAAwD;IACxD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,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,CA8B5D;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,47 +1,99 @@
-import { Rect } from "@motionscript/sdk";
-import { VerticalAxis } from "./vertical-axis.js";
+import { Rect, RotatedBox, Text, textOps, } from "@motionscript/sdk";
+import { sizeOf } from "./style.js";
+/** 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(sizeOf(style.legendText) * 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(sizeOf(style.yLabelText) * 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(sizeOf(style.xLabelText) * 1.1);
+}
 /**
- * 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.
+ * 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.
  */
-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) {
+    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,
+        ...(parts.background ? { fill: parts.background } : {}),
         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 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];
-        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; 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;;;;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"]}
+{"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 { sizeOf, type CartesianStyle, type 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, \"legendText\">): number {\n  return Math.round(sizeOf(style.legendText) * 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, \"yLabelText\">): number {\n  return Math.ceil(sizeOf(style.yLabelText) * 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, \"xLabelText\">): number {\n  return Math.ceil(sizeOf(style.xLabelText) * 1.1)\n}\n\ninterface CartesianParts {\n  /** Behind the whole chart, axes and legend included. */\n  readonly background?: () => Fill\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    ...(parts.background ? { fill: parts.background } : {}),\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,56 +1,64 @@
-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";
+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: 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.
+ * 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>;
-    /**
-     * 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>;
+    /** 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>;
-    /**
-     * 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>;
+    /** 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>;
-    /**
-     * 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>;
+    /** 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,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"}
+{"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"}

package/dist/kit/chart-canvas.js

@@ -1,68 +1,74 @@
-import { Graphics2D, Types, component2d, fillOps, shadowOps, strokeOps, } from "@motionscript/sdk";
+import { Graphics2D, Types, component2d, fillOps, strokeOps, } from "@motionscript/sdk";
 import { fresh } from "./entries.js";
 import { loadPaints } from "./paints.js";
-import { DEFAULT_PLOT_AREA, DEFAULT_X_AXIS, DEFAULT_Y_AXIS, } from "./shared.js";
-const strokeEntry = (initial) => Types.custom(initial, { resolve: strokeOps.resolve, lerp: strokeOps.lerp });
+const strokeEntry = () => Types.custom([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp });
+/** Where along a scale a fraction lands in a run of `length` px centred on 0. */
+function along(value, [min, max], length) {
+    return (max <= min ? 0 : (value - min) / (max - min) - 0.5) * length;
+}
+/** One rule per draw: stroking a union of open paths paints nothing, and a dashed rule keeps its own phase. */
+export function rule(ctx, from, to, stroke, opacity = 1) {
+    ctx.draw(new Graphics2D().line({ points: [from, to] }).stroke(stroke).opacity(opacity));
+}
 /**
- * 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.
+ * 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 const ChartCanvas = component2d({
     key: "chartCanvas",
     state: {
-        fill: Types.custom(DEFAULT_PLOT_AREA.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),
-        shadow: Types.custom(DEFAULT_PLOT_AREA.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),
-        xGridStroke: strokeEntry(DEFAULT_X_AXIS.lineStyle),
-        yGridStroke: strokeEntry(DEFAULT_Y_AXIS.lineStyle),
-        /**
-         * 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.
-         */
+        fill: Types.custom([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+        /** The vertical grid lines, one per `xMarkers` entry. */
+        xGridStroke: strokeEntry(),
+        /** The horizontal grid lines, one per `yMarkers` entry. */
+        yGridStroke: strokeEntry(),
         xMarkers: fresh(() => []),
         yMarkers: fresh(() => []),
         /** `[min, max]` of each scale, mapping the markers into the panel. */
         xExtent: fresh(() => [0, 1]),
         yExtent: fresh(() => [0, 1]),
+        /** The baseline and the value-axis rule. */
+        axisStroke: strokeEntry(),
+        /** Where the horizontal axis rule sits on the y scale, or `null` for none. */
+        xAxisAt: Types.custom(null),
+        /** Where the vertical axis rule sits on the x scale, or `null` for none. */
+        yAxisAt: Types.custom(null),
     },
-    // 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] }),
+    load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.xGridStroke, state.yGridStroke, state.axisStroke] }),
     render: (ctx, state) => {
         const { width: W, height: H } = ctx.size;
         if (W <= 0 || H <= 0)
             return;
-        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;
-        // 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));
-        // 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) {
-            const xGrid = new Graphics2D();
-            for (const v of state.xMarkers) {
-                const f = xFrac(v);
-                if (!interior(f))
-                    continue;
-                xGrid.rect({ x: -W / 2 + f * W, y: 0, width: xStroke.weight, height: H });
+        if (state.fill.length > 0)
+            ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width: W, height: H }).fill(state.fill));
+        const inside = (at, length, weight) => Math.max(-length / 2 + weight / 2, Math.min(length / 2 - weight / 2, at));
+        const verticals = (values, stroke) => {
+            const weight = stroke[0]?.weight ?? 0;
+            if (weight <= 0)
+                return;
+            for (const v of values) {
+                const x = inside(along(v, state.xExtent, W), W, weight);
+                rule(ctx, { x, y: -H / 2 }, { x, y: H / 2 }, stroke);
             }
-            ctx.draw(xGrid.fill(xStroke.fill));
-        }
-        const yStroke = state.yGridStroke[0];
-        if (yStroke) {
-            const yGrid = new Graphics2D();
-            for (const v of state.yMarkers) {
-                const f = yFrac(v);
-                if (!interior(f))
-                    continue;
-                yGrid.rect({ x: 0, y: -H / 2 + f * H, width: W, height: yStroke.weight });
+        };
+        const horizontals = (values, stroke) => {
+            const weight = stroke[0]?.weight ?? 0;
+            if (weight <= 0)
+                return;
+            for (const v of values) {
+                const y = inside(along(v, state.yExtent, H), H, weight);
+                rule(ctx, { x: -W / 2, y }, { x: W / 2, y }, stroke);
             }
-            ctx.draw(yGrid.fill(yStroke.fill));
-        }
+        };
+        const within = ([min, max]) => (v) => v >= Math.min(min, max) - 1e-9 && v <= Math.max(min, max) + 1e-9;
+        verticals(state.xMarkers.filter(within(state.xExtent)), state.xGridStroke);
+        horizontals(state.yMarkers.filter(within(state.yExtent)), state.yGridStroke);
+        if (state.xAxisAt !== null)
+            horizontals([state.xAxisAt], state.axisStroke);
+        if (state.yAxisAt !== null)
+            verticals([state.yAxisAt], state.axisStroke);
     },
 });
 //# sourceMappingURL=chart-canvas.js.map