basalt-ui 1.27.0 → 1.29.0

package/dist/charts/kinds/ZonedLine.d.ts

@@ -1,10 +1,10 @@
+import type { BasaltProps } from '../../common/props.js';
 import type { CursorResolution } from '../cursor/resolve.js';
 import type { CartesianTooltipConfig, AxisConfig } from '../primitives/CartesianChart.js';
 import type { XZoneSpec } from '../primitives/XZoneRects.js';
 import type { ZoneSpec } from '../primitives/ZoneRects.js';
+import type { ChartState } from '../primitives/ChartPending.js';
 import type { ChartLegendConfig, ChartSeries } from '../series.js';
-/** @deprecated Use ZoneSpec from primitives/ZoneRects. Kept as an alias for back-compat. */
-export type ZonedLineZone = ZoneSpec;
 /** Semi-transparent fill above (or below) a threshold value, tracking the line. */
 export type ZonedLineThreshold = {
     value: number;
@@ -18,7 +18,7 @@ export type ZonedLineRefLine = {
     /** Solid by default; set true for a dashed line. */
     dashed?: boolean;
 };
-export type ZonedLineProps<T> = {
+export type ZonedLineProps<T> = BasaltProps & {
     data: T[];
     /** Fixed height in pixels, forwarded to `CartesianChart`. Default 240. */
     height?: number;
@@ -32,7 +32,7 @@ export type ZonedLineProps<T> = {
     /** Y-axis. Collapses the old `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` / `yAutoPad` /
      * `numTicksY` / `formatYTick` prop soup into one object. */
     y?: AxisConfig<T>;
-    zones?: ZonedLineZone[];
+    zones?: ZoneSpec[];
     /** Vertical x-range overlays (time windows), rendered behind the line. Bounds are `getX`
      * domain keys. */
     xZones?: XZoneSpec[];
@@ -46,6 +46,9 @@ export type ZonedLineProps<T> = {
     xTickValues?: (keys: readonly string[], xMax: number) => readonly string[];
     /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
     formatX?: (key: string) => string;
+    /** Tilt the x tick labels 45° or 90°, or `0` to opt out of the phone tier's auto-rotation —
+     * see `CartesianChartProps.xLabelRotate`. */
+    xLabelRotate?: 0 | 45 | 90;
     /**
      * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
      * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
@@ -69,6 +72,9 @@ export type ZonedLineProps<T> = {
     ariaLabel?: string;
     /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
     isPending?: boolean;
+    /** The three "nothing to draw" states in one prop — pending → error → empty. See
+     * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
+    state?: ChartState;
 };
 /**
  * Single-series line chart with zone backgrounds, threshold fills, an optional area gradient,
@@ -79,15 +85,11 @@ export type ZonedLineProps<T> = {
  * and the derived tooltip — this kind draws ONLY the marks (thresholds, area fill, and the line).
  * Single-series, so the legend is optional in practice but present by default.
  *
- * X-axis is built from the full `data` array so the calendar is preserved even
- * when the series has nulls; the line itself skips null points (creating
- * visual gaps).
+ * X-axis is built from the full `data` array so the calendar is preserved even when the series has
+ * nulls; the line, the area fill and the threshold fills all BREAK at a null point, leaving a real
+ * gap rather than interpolating across it.
  */
 declare function ZonedLineInner<T>(props: ZonedLineProps<T>): import("react").JSX.Element;
-/**
- * Hand-memoized: React Compiler does not process the shipped dist, so the hot ZonedLine kind is
- * wrapped in `React.memo` to retain the auto-memoization it had as source (parity with Bars).
- */
 export declare const ZonedLine: typeof ZonedLineInner;
 export {};
 //# sourceMappingURL=ZonedLine.d.ts.map

package/dist/charts/kinds/ZonedLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZonedLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/ZonedLine.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAe,MAAM,8BAA8B,CAAA;AAEnG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,4FAA4F;AAC5F,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAA;AAEpC,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;;wEAEoE;IACpE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB;gEAC4D;IAC5D,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IACjB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAA;IACvB;sBACkB;IAClB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC7B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;wBAEoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC1E,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC;qGACiG;IACjG,OAAO,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IAC3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAiBD;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAiElD;AA+ED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}
+{"version":3,"file":"ZonedLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/ZonedLine.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAe,MAAM,8BAA8B,CAAA;AAEnG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,WAAW,GAAG;IAC5C,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;;wEAEoE;IACpE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB;gEAC4D;IAC5D,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IACjB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB;sBACkB;IAClB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC7B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;wBAEoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC1E,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC;iDAC6C;IAC7C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAA;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC;qGACiG;IACjG,OAAO,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IAC3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAeD;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BA6ElD;AAyGD,eAAO,MAAM,SAAS,EAAoB,OAAO,cAAc,CAAA"}

package/dist/charts/kinds/ZonedLine.js

@@ -1,24 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { curveMonotoneX } from "@visx/curve";
 import { AreaClosed, LinePath } from "@visx/shape";
 import { Threshold } from "@visx/threshold";
 import { memo, useMemo } from "react";
+import { assertRequiredProps } from "../../common/validate.js";
 import { AreaGradient, areaFillUrl } from "../primitives/AreaGradient.js";
 import { CartesianChart } from "../primitives/CartesianChart.js";
-import { LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
+import { curveFor, definedOn, LINE_OVERLAY_STROKE_WIDTH, toPlotPoint } from "../series.js";
 import { VX } from "../../tokens/index.js";
-function validPoints(series, data) {
+function linePoints(series, data) {
   if (!series) return [];
-  const out = [];
-  for (const d of data) {
-    const y = series.getValue(d);
-    if (y !== null && y !== void 0 && !Number.isNaN(y)) {
-      out.push(Object.assign({}, d, { __y: y }));
-    }
-  }
-  return out;
+  return data.map((d) => Object.assign({}, d, { __y: toPlotPoint(series.getValue(d)) }));
 }
 function ZonedLineInner(props) {
+  assertRequiredProps("ZonedLine", props, ["data", "getX", "series"]);
   const {
     data,
     chartId,
@@ -32,13 +26,17 @@ function ZonedLineInner(props) {
     xTicks,
     xTickValues,
     formatX,
+    xLabelRotate,
     cursorResolution,
     tooltip,
     areaFill,
     height,
     legend,
     ariaLabel,
-    isPending
+    isPending,
+    state,
+    className,
+    style
   } = props;
   const styledSeries = useMemo(
     () => series.map((s) => ({
@@ -61,12 +59,16 @@ function ZonedLineInner(props) {
       ...xTicks !== void 0 && { xTicks },
       ...xTickValues !== void 0 && { xTickValues },
       ...formatX !== void 0 && { formatX },
+      ...xLabelRotate !== void 0 && { xLabelRotate },
       ...cursorResolution !== void 0 && { cursorResolution },
       ...tooltip !== void 0 && { tooltip },
       ...height !== void 0 && { height },
       ...legend !== void 0 && { legend },
       ...ariaLabel !== void 0 && { ariaLabel },
       ...isPending !== void 0 && { isPending },
+      ...state !== void 0 && { state },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: (ctx) => /* @__PURE__ */ jsx(
         ZonedLineMarks,
         {
@@ -89,7 +91,10 @@ function ZonedLineMarks({
 }) {
   const { data, visible, xScale, yScale, yMax } = ctx;
   const primary = visible[0];
-  const valid = useMemo(() => validPoints(primary, data), [primary, data]);
+  const pts = useMemo(() => linePoints(primary, data), [primary, data]);
+  const defined = definedOn(yScale);
+  const curve = curveFor(primary?.curve);
+  const yOf = (d) => yScale(d.__y ?? NaN);
   const showArea = areaFill !== void 0 && areaFill !== false;
   const areaColor = typeof areaFill === "string" ? areaFill : primary?.color;
   const areaId = `${chartId}-area`;
@@ -98,13 +103,14 @@ function ZonedLineMarks({
       Threshold,
       {
         id: `${chartId}-thr-${i}`,
-        data: valid,
+        data: pts,
+        defined,
         x: (d) => xScale(getX(d)) ?? 0,
         y0: () => yScale(t.value),
-        y1: (d) => yScale(d.__y),
+        y1: yOf,
         clipAboveTo: 0,
         clipBelowTo: yMax,
-        curve: curveMonotoneX,
+        curve,
         belowAreaProps: { fill: t.side === "above" ? t.fill : "transparent" },
         aboveAreaProps: { fill: t.side === "below" ? t.fill : "transparent" }
       },
@@ -115,11 +121,12 @@ function ZonedLineMarks({
       /* @__PURE__ */ jsx(
         AreaClosed,
         {
-          data: valid,
+          data: pts,
+          defined,
           x: (d) => xScale(getX(d)) ?? 0,
-          y: (d) => yScale(d.__y),
+          y: yOf,
           yScale,
-          curve: curveMonotoneX,
+          curve,
           fill: areaFillUrl(areaId)
         }
       )
@@ -127,19 +134,22 @@ function ZonedLineMarks({
     primary && /* @__PURE__ */ jsx(
       LinePath,
       {
-        data: valid,
+        data: pts,
+        defined,
         x: (d) => xScale(getX(d)) ?? 0,
-        y: (d) => yScale(d.__y),
+        y: yOf,
         stroke: primary.color,
         strokeWidth: primary.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
         strokeDasharray: primary.dash === "dashed" ? VX.dashArray : void 0,
         strokeOpacity: primary.strokeOpacity ?? 1,
-        curve: curveMonotoneX
+        curve
       }
     )
   ] });
 }
-const ZonedLine = memo(ZonedLineInner);
+const ZonedLineMemo = memo(ZonedLineInner);
+ZonedLineMemo.displayName = "ZonedLine";
+const ZonedLine = ZonedLineMemo;
 export {
   ZonedLine
 };

package/dist/charts/layout/auto-margin.d.ts

@@ -9,6 +9,46 @@
  * See `docs/CHARTS-SPEC.md` §1.
  */
 import type { ChartMargin } from '../../tokens/index.js';
+/**
+ * The `dx`/`dy` nudge `primitives/Axes.tsx` paints a rotated tick label through — the d3 idiom
+ * that puts a 45° label under its tick's lower-left and centres a 90° one on its vertical line.
+ *
+ * It lives HERE, and the axis imports it, because it is the one number that must be in both
+ * places: the nudge was applied at paint and absent from the measure, so §1's measured-equals-
+ * painted law broke in exactly the rotated case §8 introduced (the first label crossed the SVG's
+ * left edge by 3.2px at 390 and 5.7px at 320, and every rotated label's descender row sat on the
+ * bottom clip line). Move a value here and the gutter moves with it.
+ */
+export declare const ROTATED_LABEL_OFFSET: Record<45 | 90, {
+    dx: number;
+    dy: number;
+}>;
+/**
+ * How far a rotated x label reaches LEFT of the plot's left edge, and how far BELOW the axis line —
+ * measured from the baseline point the axis anchors it at, through the same `dx`/`dy` the axis
+ * paints it with.
+ *
+ * `AxisBottomDate` anchors a rotated label at its right edge (`textAnchor: 'end'`) and rotates it
+ * counter-clockwise about that point, so the string runs down-and-to-the-LEFT from the tick it
+ * belongs to. The FIRST tick sits at the plot's left edge, so its label hangs into the left gutter;
+ * the LAST row of glyphs hangs below the axis. Rotating the label's box about its anchor gives both
+ * extents exactly:
+ *
+ * - left  = `cos θ · (width + ascent) − dx`  — zero at 90°, where the string runs straight down.
+ * - below = `tickLength + max(10, fontPx) + dy + sin θ · width + cos θ · descent`.
+ *
+ * Both carry {@link ROTATED_CLEARANCE} so the painted box clears the SVG's clip rather than
+ * touching it.
+ */
+export declare function rotatedLabelExtents(input: {
+    /** Width of the widest x tick label, already measured at the painted font. */
+    labelWidth: number;
+    fontPx: number;
+    rotate: number;
+}): {
+    left: number;
+    below: number;
+};
 export type AutoMarginInput = {
     /** Left-axis tick labels, already formatted. */
     left?: readonly string[];
@@ -18,21 +58,34 @@ export type AutoMarginInput = {
     bottom?: readonly string[];
     /** Degrees of counter-clockwise rotation applied to the x tick labels. Default 0. */
     rotate?: number;
-    /** Tick-label font size. Default `VX.axisFont`. */
+    /** Tick-label font size. Default `VX.axisFont`. A phone-tier chart passes its own smaller size
+     * (`chartTierMetrics().axisFont`) — the measured label must be the painted label. */
     fontPx?: number;
+    /**
+     * Per-side FLOORS. Default `VX.margin`. The phone tier passes its tightened set
+     * (`chartTierMetrics().margin`) so a static 44px left gutter does not spend an eighth of a 360px
+     * chart on a three-character label. The law itself does not move: a side may still only ever
+     * grow past its floor.
+     */
+    floor?: ChartMargin;
     /** Explicit per-side overrides — applied LAST, so an escape hatch always wins. */
     override?: Partial<ChartMargin>;
 };
 /**
  * Resolve the four margins from measured labels.
  *
- * Law, per side:
- * - `left` — widest left label + gap, floored at `VX.margin.left`.
- * - `right` — with a right axis: widest right label + gap. Without one: half the widest x label,
- *   so the LAST x tick (centered on the plot's right edge) cannot clip. Both floored at
- *   `VX.margin.right`.
- * - `bottom` — one label line (or the rotated bounding height) + gap, floored at
- *   `VX.margin.bottom`.
+ * Law, per side (the floors are `VX.margin` by default; a tier may tighten them via `floor`):
+ * - `left` — widest left label + gap, floored at `VX.margin.left`. When the x labels are ROTATED
+ *   they also reach into this gutter, so the left side additionally clears their leftward
+ *   extent — see {@link rotatedLabelExtents}.
+ * - `right` — with a right axis: widest right label + gap. Without one, and the x labels are NOT
+ *   rotated: half the widest x label, so the LAST x tick (centered on the plot's right edge)
+ *   cannot clip. Without one AND rotated: nothing — a rotated label is anchored at its right edge
+ *   (`textAnchor: 'end'`, same as {@link rotatedLabelExtents}), so it hangs left of its tick, not
+ *   right, and reserving half its width would pad a side nothing paints into. Every case is
+ *   floored at `VX.margin.right`.
+ * - `bottom` — one label line + gap; when ROTATED, the label's measured drop below the axis line
+ *   ({@link rotatedLabelExtents}) instead. Floored at `VX.margin.bottom`.
  * - `top` — `VX.margin.top`. Nothing measures into it; a chart that draws into the top gutter
  *   passes an override.
  */
@@ -53,6 +106,10 @@ export declare function probeAxisLabels(opts: {
     format?: (v: number) => string;
     /** Must match the real scale's `nice` — niceing changes which ticks exist. */
     nice?: boolean;
+    /** `'log'` measures through {@link logTickValues} instead of a linear probe scale — the same
+     * helper the axis paints from (CHARTS-SPEC §1: measured labels == painted labels). Default
+     * `'linear'`. */
+    scale?: 'linear' | 'log';
 }): {
     labels: string[];
     format: (v: number) => string;

package/dist/charts/layout/auto-margin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-margin.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/auto-margin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAa/C,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB,GAAG,WAAW,CA6BnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE;IACpC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAAE,CAQtD"}
+{"version":3,"file":"auto-margin.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/auto-margin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAgC/C;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAG5E,CAAA;AASD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiBlC;AAUD,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;yFACqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB,GAAG,WAAW,CA8BnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE;IACpC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;qBAEiB;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACzB,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAAE,CAatD"}

package/dist/charts/layout/auto-margin.js

@@ -1,28 +1,61 @@
 import { scaleLinear } from "@visx/scale";
 import { VX } from "../../tokens/index.js";
 import { maxTextWidth } from "../utils/measure-text.js";
+import { logTickValues, niceLogDomain } from "./log-ticks.js";
 const AXIS_TICK_GAP = 12;
 const lineHeight = (fontPx) => Math.ceil(fontPx * 1.35);
+const DESCENT_RATIO = 0.3;
+const descent = (fontPx) => fontPx * DESCENT_RATIO;
+const ascent = (fontPx) => lineHeight(fontPx) - descent(fontPx);
+const AXIS_TICK_LENGTH = 8;
+const VISX_MIN_LABEL_FONT = 10;
+const ROTATED_LABEL_OFFSET = {
+  45: { dx: -6, dy: 2 },
+  90: { dx: -4, dy: 4 }
+};
+const ROTATED_CLEARANCE = 2;
+const rotatedOffset = (rotate) => ROTATED_LABEL_OFFSET[rotate] ?? { dx: 0, dy: 0 };
+function rotatedLabelExtents(input) {
+  const { labelWidth, fontPx, rotate } = input;
+  if (rotate === 0) return { left: 0, below: 0 };
+  const radians = rotate * Math.PI / 180;
+  const cos = Math.abs(Math.cos(radians));
+  const sin = Math.abs(Math.sin(radians));
+  const { dx, dy } = rotatedOffset(rotate);
+  return {
+    left: cos * (labelWidth + ascent(fontPx)) - dx + ROTATED_CLEARANCE,
+    below: AXIS_TICK_LENGTH + Math.max(VISX_MIN_LABEL_FONT, fontPx) + dy + sin * labelWidth + cos * descent(fontPx) + ROTATED_CLEARANCE
+  };
+}
+const LOG_TICK_FORMAT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 20 });
 function autoMargin(input = {}) {
   const fontPx = input.fontPx ?? VX.axisFont;
-  const { left = [], right = [], bottom = [], rotate = 0, override } = input;
+  const { left = [], right = [], bottom = [], rotate = 0, floor = VX.margin, override } = input;
   const leftWidth = maxTextWidth(left, fontPx);
   const rightWidth = maxTextWidth(right, fontPx);
   const bottomWidth = maxTextWidth(bottom, fontPx);
-  const radians = rotate * Math.PI / 180;
-  const bottomExtent = rotate === 0 ? lineHeight(fontPx) : Math.ceil(
-    Math.abs(bottomWidth * Math.sin(radians)) + Math.abs(lineHeight(fontPx) * Math.cos(radians))
-  );
+  const rotated = rotatedLabelExtents({ labelWidth: bottomWidth, fontPx, rotate });
+  const bottomExtent = rotate === 0 ? lineHeight(fontPx) + AXIS_TICK_GAP : rotated.below;
   return {
-    top: override?.top ?? VX.margin.top,
+    top: override?.top ?? floor.top,
     right: override?.right ?? Math.ceil(
-      Math.max(VX.margin.right, right.length > 0 ? rightWidth + AXIS_TICK_GAP : bottomWidth / 2)
+      Math.max(
+        floor.right,
+        right.length > 0 ? rightWidth + AXIS_TICK_GAP : rotate === 0 ? bottomWidth / 2 : 0
+      )
     ),
-    bottom: override?.bottom ?? Math.ceil(Math.max(VX.margin.bottom, bottomExtent + AXIS_TICK_GAP)),
-    left: override?.left ?? Math.ceil(Math.max(VX.margin.left, left.length > 0 ? leftWidth + AXIS_TICK_GAP : 0))
+    bottom: override?.bottom ?? Math.ceil(Math.max(floor.bottom, bottomExtent)),
+    left: override?.left ?? Math.ceil(
+      Math.max(floor.left, left.length > 0 ? leftWidth + AXIS_TICK_GAP : 0, rotated.left)
+    )
   };
 }
 function probeAxisLabels(opts) {
+  if (opts.scale === "log") {
+    const domain = opts.nice === true ? niceLogDomain(opts.domain) : opts.domain;
+    const format2 = opts.format ?? ((v) => LOG_TICK_FORMAT.format(v));
+    return { labels: logTickValues(domain, opts.ticks).map(format2), format: format2 };
+  }
   const probe = scaleLinear({
     domain: opts.domain,
     range: [1, 0],
@@ -32,6 +65,8 @@ function probeAxisLabels(opts) {
   return { labels: probe.ticks(opts.ticks).map(format), format };
 }
 export {
+  ROTATED_LABEL_OFFSET,
   autoMargin,
-  probeAxisLabels
+  probeAxisLabels,
+  rotatedLabelExtents
 };

package/dist/charts/layout/log-ticks.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 1-2-5 mantissa tick law for a log axis (`docs/CHARTS-SPEC.md` §2).
+ *
+ * d3's own `scaleLog().ticks()` multiplies the mantissa density by the number of decades the
+ * domain spans, so a wide financial range (e.g. $10k–$300k) reads `$316,228 / $100,000 / $31,623 /
+ * $10,000` — every finance reference instead ticks a log price axis at `{1, 2, 5} × 10^n`
+ * (`$10,000 · $20,000 · $50,000 · $100,000`). Pure, no visx dependency, so both the measured
+ * (`probeAxisLabels`) and painted (`CartesianChart`) sides can share the exact same tick list.
+ */
+/**
+ * Every `{1, 2, 5} × 10^k` value for every decade touching `[min, max]`, filtered to the domain —
+ * escalating through {@link MANTISSA_SETS} while a set leaves fewer than {@link DENSIFY_BELOW}
+ * candidates (a short span collapses the strict law to one tick). The exact same list is what
+ * `probeAxisLabels` measures and what `CartesianChart` paints, so the two can never disagree.
+ * An over-budget result collapses to whole decades only when the decades ALONE form a readable
+ * axis ({@link DENSIFY_BELOW}+ in-domain); otherwise it is thinned by a budget-derived stride
+ * (may exceed `ticks` by one — see {@link thinToBudget}). Collapsing to decades unconditionally
+ * is the bug this ordering exists to prevent: a 4-year BTC window ($15.5k–$139k) holds ONE whole
+ * decade, so the collapse produced a single-tick axis. Never returns a non-positive value; a
+ * non-positive or inverted domain (a log axis has no zero and no reversed extent) returns `[]`.
+ */
+export declare function logTickValues([min, max]: readonly [number, number], ticks: number): number[];
+/** Round a domain outward to the nearest enclosing power-of-10 bounds — the log analog of
+ * `scale.nice()`, used to keep `probeAxisLabels` (measurement) and the real niced scale
+ * (rendering) computing ticks from the same rounded domain. */
+export declare function niceLogDomain([min, max]: readonly [number, number]): [number, number];
+//# sourceMappingURL=log-ticks.d.ts.map

package/dist/charts/layout/log-ticks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-ticks.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/log-ticks.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA0CH;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAoB5F;AAED;;+DAE+D;AAC/D,wBAAgB,aAAa,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF"}

package/dist/charts/layout/log-ticks.js

@@ -0,0 +1,42 @@
+const MANTISSA_SETS = [
+  [1, 2, 5],
+  [1, 1.5, 2, 3, 4, 5, 7],
+  [1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9]
+];
+const DENSIFY_BELOW = 4;
+function decadeExponents(min, max) {
+  const lo = Math.floor(Math.log10(min));
+  const hi = Math.ceil(Math.log10(max));
+  const exponents = [];
+  for (let k = lo; k <= hi; k++) exponents.push(k);
+  return exponents;
+}
+function thinToBudget(values, ticks) {
+  if (values.length <= ticks) return values;
+  const stride = Math.ceil(values.length / ticks);
+  const thinned = values.filter((_, i) => i % stride === 0);
+  const last = values[values.length - 1];
+  return thinned[thinned.length - 1] === last ? thinned : [...thinned, last];
+}
+function logTickValues([min, max], ticks) {
+  if (min <= 0 || max <= 0 || min >= max) return [];
+  const exponents = decadeExponents(min, max);
+  const inDomain = (v) => v >= min && v <= max;
+  const collect = (mantissas) => exponents.flatMap((k) => mantissas.map((m) => m * 10 ** k)).filter(inDomain);
+  let resolved = [];
+  for (const mantissas of MANTISSA_SETS) {
+    resolved = collect(mantissas);
+    if (resolved.length >= DENSIFY_BELOW) break;
+  }
+  if (resolved.length <= ticks) return resolved;
+  const decades = exponents.map((k) => 10 ** k).filter(inDomain);
+  if (decades.length >= DENSIFY_BELOW) return thinToBudget(decades, ticks);
+  return thinToBudget(resolved, ticks);
+}
+function niceLogDomain([min, max]) {
+  return [10 ** Math.floor(Math.log10(min)), 10 ** Math.ceil(Math.log10(max))];
+}
+export {
+  logTickValues,
+  niceLogDomain
+};

package/dist/charts/primitives/Axes.d.ts

@@ -1,20 +1,42 @@
 import type { AxisScale, TickFormatter } from '@visx/axis';
-/** Themed left numeric axis — baked-in theme colors + font size. */
-export declare function AxisLeftNumeric({ scale, numTicks, tickFormat, }: {
+/** Themed left numeric axis — baked-in theme colors + font size. The tick font tracks the ambient
+ * chart tier (`docs/CHARTS-SPEC.md` §8); a caller measuring its own gutter must measure at the
+ * SAME size (`chartTierMetrics().axisFont` into `autoMargin`'s `fontPx`), or the measured label
+ * and the painted one stop being the same string's width. */
+export declare function AxisLeftNumeric({ scale, numTicks, tickFormat, tickValues, }: {
     scale: AxisScale;
     numTicks?: number;
     tickFormat?: TickFormatter<number>;
+    /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
+    tickValues?: readonly number[];
 }): import("react").JSX.Element;
 /** Themed right numeric axis — mirrors AxisLeftNumeric for dual-axis charts. */
-export declare function AxisRightNumeric({ scale, left, numTicks, tickFormat, }: {
+export declare function AxisRightNumeric({ scale, left, numTicks, tickFormat, tickValues, }: {
     scale: AxisScale;
     /** Left offset inside the Group (typically xMax). Required since AxisRight needs positioning. */
     left: number;
     numTicks?: number;
     tickFormat?: TickFormatter<number>;
+    /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
+    tickValues?: readonly number[];
+}): import("react").JSX.Element;
+/**
+ * Themed bottom numeric axis — the numeric twin of {@link AxisLeftNumeric}, for a plot whose x is
+ * a continuous number rather than a date/category (e.g. `sky-panorama.tsx`'s azimuth 0–360°,
+ * `docs/CHARTS-SPEC.md` issue #52). Exists so a bespoke continuous-x plot — declared exempt from
+ * `CartesianChart` by a `theme-allow-file hand-rolled-plot` waiver, since the point-scale x axis
+ * that primitive builds cannot represent one — stops re-implementing tick text/color/font by hand.
+ */
+export declare function AxisBottomNumeric({ scale, top, numTicks, tickFormat, tickValues, }: {
+    scale: AxisScale;
+    top: number;
+    numTicks?: number;
+    tickFormat?: TickFormatter<number>;
+    /** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
+    tickValues?: readonly number[];
 }): import("react").JSX.Element;
 /** Themed bottom date axis — baked-in smartTicks + DD.MM formatting. */
-export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, }: {
+export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, rotate, }: {
     scale: AxisScale;
     top: number;
     tickValues: string[];
@@ -23,5 +45,11 @@ export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, }:
      * tick to the same label.
      */
     tickFormat?: TickFormatter<string>;
+    /**
+     * Tilt each tick label counter-clockwise by 45° or 90°, anchored at its right edge — the answer
+     * to labels too wide to sit side by side. The caller owns the deepened bottom gutter it needs
+     * (`autoMargin({ rotate })`, `docs/CHARTS-SPEC.md` §1); this only paints them.
+     */
+    rotate?: 45 | 90;
 }): import("react").JSX.Element;
 //# sourceMappingURL=Axes.d.ts.map

package/dist/charts/primitives/Axes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Axes.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/Axes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAW1D,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAY,EACZ,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAgBA;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAY,EACZ,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,iGAAiG;IACjG,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAiBA;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAiBA"}
+{"version":3,"file":"Axes.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/Axes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAa1D;;;6DAG6D;AAC7D,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAY,EACZ,UAAU,EACV,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC/B,+BAkBA;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAY,EACZ,UAAU,EACV,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,iGAAiG;IACjG,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC/B,+BAmBA;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,GAAG,EACH,QAAY,EACZ,UAAU,EACV,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC/B,+BAmBA;AAYD,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAwB,EACxB,MAAM,GACP,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;CACjB,+BAqBA"}