basalt-ui 1.40.3 → 2.0.0

package/{src/content/article-card.module.css.d.ts → dist/charts/chart-box.module.css.d.ts}

@@ -3,14 +3,10 @@
  * signature — so dot access stays verbatim under the package's strict flags.
  */
 declare const classes: {
-  readonly card: string
-  readonly clickable: string
-  readonly linkWrap: string
-  readonly icon: string
-  readonly title: string
-  readonly description: string
-  readonly tags: string
-  readonly tag: string
-  readonly meta: string
+  readonly frame: string
+  readonly box: string
+  readonly fillFrame: string
+  readonly fill: string
+  readonly state: string
 }
 export default classes

package/dist/charts/chart-card.module.css

@@ -0,0 +1,25 @@
+/*
+ * ChartCard's header inset, by the card's own inline size (W10 SSR contract). A card under 480px
+ * trims the header's top inset: the subtitle has already folded into the info glyph there, and the
+ * chart below is sized by the 160–420px law, so a narrow card is a short one. Decided in CSS, not
+ * from a post-hydration height measurement, so the server HTML is the hydrated header. The literal
+ * is CONTAINER_CLASSES.regular (`breakpoint-literals.test.ts`).
+ */
+
+.header {
+  padding: 4px var(--vx-space-card-inset-x, 0.8125rem) 4px;
+}
+
+@container (min-width: 480px) {
+  .header {
+    padding-top: var(--vx-space-card-inset-y, 0.6875rem);
+  }
+}
+
+/* A short card trims it at any width: its chart states a small `height` (`data-basalt-chart-short`,
+ * in the server HTML), or, for a body that is not a chart, `ChartCard` measured it under 280px. */
+/* (`data-basalt-chart-short` is written by `ChartBox`, `box.tsx`; the same `:is` is in
+ * `dashboard/widget-header.module.css`.) */
+:is([data-basalt-card-short], [data-basalt-chart-card]:has([data-basalt-chart-short])) .header {
+  padding-top: 4px;
+}

package/dist/{dashboard/widget-grid.module.css.d.ts → charts/chart-card.module.css.d.ts}

@@ -3,8 +3,6 @@
  * signature — so dot access stays verbatim under the package's strict flags.
  */
 declare const classes: {
-  readonly container: string
-  readonly root: string
-  readonly item: string
+  readonly header: string
 }
 export default classes

package/dist/charts/chart-legend.module.css

@@ -0,0 +1,38 @@
+/*
+ * The derived legend's responsive mode, in CSS (docs/V2-SPEC.md § 9.6, W10 SSR contract): none below
+ * 240px, dots below 480px, chips from 480px, by the enclosing chart's inline size — so the legend in
+ * the server HTML is the legend of the hydrated page. `ChartLegend` renders both swatches; this
+ * file shows one. Literals are CONTAINER_CLASSES (`breakpoint-literals.test.ts`); the container is
+ * the chart root (`CartesianChart.tsx`), whose `container-type` this relies on.
+ */
+
+.auto {
+  display: none;
+}
+
+.auto .chip {
+  display: none;
+}
+
+@container (min-width: 240px) {
+  .auto {
+    display: flex;
+    column-gap: var(--bc-dots-gap);
+    --vx-hit-gap: var(--bc-dots-gap);
+  }
+}
+
+@container (min-width: 480px) {
+  .auto {
+    column-gap: var(--bc-legend-gap);
+    --vx-hit-gap: var(--bc-legend-gap);
+  }
+
+  .auto .dot {
+    display: none;
+  }
+
+  .auto .chip {
+    display: inline-flex;
+  }
+}

package/{src/dashboard/widget-grid.module.css.d.ts → dist/charts/chart-legend.module.css.d.ts}

@@ -3,8 +3,8 @@
  * signature — so dot access stays verbatim under the package's strict flags.
  */
 declare const classes: {
-  readonly container: string
-  readonly root: string
-  readonly item: string
+  readonly auto: string
+  readonly dot: string
+  readonly chip: string
 }
 export default classes

package/dist/charts/compile.d.ts

@@ -0,0 +1,62 @@
+import type { ChartGradient, ChartPositionScaleOptions, ChartValue, ResponsiveChartDefinition } from '@tanstack/charts/types/core';
+import type { ContainerClass } from '../tokens/size-classes.js';
+import type { XScaleModel } from './scales.js';
+import type { AxisConfig, CartesianChartProps, ChartSeries, ChartX } from './types.js';
+/**
+ * The compiled definition. Annotated on purpose: TanStack's inferred definition type names internal
+ * modules (`dist/scene`, `cursor-host-contract`) and fails declaration emit (TS2883 / TS4058).
+ */
+export type CartesianDefinition = ResponsiveChartDefinition<unknown, ChartValue, number, 'dom'>;
+/** Everything the rung compiles: the public props minus React chrome, plus the host's state. */
+export type CartesianInput<T, X extends ChartX> = Pick<CartesianChartProps<T, X>, 'data' | 'x' | 'series' | 'marks' | 'y' | 'y2' | 'xTicks' | 'formatX' | 'zones' | 'xZones' | 'refLines' | 'cursorGroup' | 'cursorResolution' | 'tooltip'> & {
+    /** Unique per mounted chart (React `useId`): owns what this chart publishes to the cursor. */
+    chartId: string;
+    /** Series keys the legend has toggled off. */
+    hidden?: ReadonlySet<string>;
+    /** The legend entry under the pointer. */
+    highlighted?: string | null;
+    /** A band x scale (bar kinds), whatever `x` returns. */
+    band?: boolean;
+    /** A coarse primary pointer: tap pins the cursor. */
+    coarse?: boolean;
+    /** Tooltip series rows bottom-up (a stack reads top-down in the plot). */
+    reverseRows?: boolean;
+    /** Bar kinds: how the left-axis `mark: 'bar'` series combine for the auto domain. */
+    stack?: 'stacked' | 'normalized';
+};
+export declare function defaultNumberFormat(v: number): string;
+/** `DD.MM`, read in UTC like the time scale that placed it (a local read shifts a day west of UTC). */
+export declare function utcAxisDate(d: Date): string;
+/** `Mon Sep 1 2026`, in UTC; a non-midnight instant adds `HH:MM`. */
+export declare function utcHeaderDate(d: Date): string;
+/**
+ * Default Date tick values: the time scale's own ticks, kept to whole UTC days once the data is
+ * daily or coarser — d3 picks 12-hour steps for a short daily series, which label one day twice.
+ */
+export declare function dateTicks(domain: readonly [Date, Date], count: number, stepMs: number): Date[];
+export declare function defaultFormatX(v: ChartValue): string;
+/** The visible series: not toggled off, and not a companion whose parent is. */
+export declare function visibleSeries<T>(series: readonly ChartSeries<T>[], hidden: ReadonlySet<string>): ChartSeries<T>[];
+type YAxis = {
+    domain: readonly [number, number];
+    format: (v: number) => string;
+};
+export declare function yGuide<T>(opts: {
+    cfg: AxisConfig<T> | undefined;
+    axis: YAxis;
+    cls: ContainerClass;
+    side: 'left' | 'right';
+    grid: boolean;
+}): Omit<ChartPositionScaleOptions<number>, 'scale'>;
+export declare function xGuide<X extends ChartX>(opts: {
+    model: XScaleModel<X>;
+    xTicks: number | readonly X[] | undefined;
+    format: (v: ChartValue) => string;
+    cls: ContainerClass;
+}): Omit<ChartPositionScaleOptions<ChartValue>, 'scale'>;
+/** Gradient resource id for a series' area fill; the host's `idPrefix` scopes it per chart. */
+export declare const areaGradientId: (index: number) => string;
+export declare function areaGradient(index: number, color: string): ChartGradient;
+export declare function compileCartesian<T, X extends ChartX>(input: CartesianInput<T, X>): CartesianDefinition;
+export {};
+//# sourceMappingURL=compile.d.ts.map

package/dist/charts/compile.d.ts.map

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

package/dist/charts/compile.js

@@ -0,0 +1,386 @@
+import { crosshair } from "@tanstack/charts/crosshair";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { rect } from "@tanstack/charts/rect";
+import { ruleY } from "@tanstack/charts/rule";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scaleUtc } from "d3-scale";
+import { tooltip as tooltipHost } from "@tanstack/charts/tooltip";
+import { portal } from "@tanstack/charts/tooltip/portal";
+import { fmtCompact } from "../format/number.js";
+import { VX } from "../tokens/index.js";
+import { cursorBinding, sourceOnlyFocus } from "./cursor.js";
+import { resolveContainerClass } from "../tokens/size-classes.js";
+import { resolveYDomain, xScaleFor, xZoneFractions, yScaleFor } from "./scales.js";
+import { AXIS_LINE, CHART_THEME, CROSSHAIR, DASH, GRID_LINE } from "./theme.js";
+const LADDER = {
+  micro: { font: VX.text.nano, xTicks: 2, yTicks: 0 },
+  compact: { font: VX.text.nano, xTicks: 3, yTicks: 3 },
+  regular: { font: VX.text.micro, xTicks: 5, yTicks: 5 },
+  wide: { font: VX.text.micro, xTicks: 6, yTicks: 5 }
+};
+const INSIDE_LABEL_DX = 4;
+const INSIDE_LABEL_DY = -6;
+function defaultNumberFormat(v) {
+  return fmtCompact(v, { digits: Math.abs(v) >= 1e3 ? 1 : 2 });
+}
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const pad2 = (n) => String(n).padStart(2, "0");
+function utcAxisDate(d) {
+  return `${pad2(d.getUTCDate())}.${pad2(d.getUTCMonth() + 1)}`;
+}
+function utcHeaderDate(d) {
+  const date = `${DAYS[d.getUTCDay()]} ${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()} ${d.getUTCFullYear()}`;
+  const ms = d.getTime() % DAY_MS;
+  return ms === 0 ? date : `${date} ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}`;
+}
+const DAY_MS = 864e5;
+function dateTicks(domain, count, stepMs) {
+  const ticks = scaleUtc().domain([domain[0], domain[1]]).ticks(count);
+  if (stepMs < DAY_MS) return ticks;
+  const days = ticks.filter((t) => t.getTime() % DAY_MS === 0);
+  return days.length >= 2 ? days : ticks.filter((_, i, all) => i === 0 || i === all.length - 1);
+}
+function defaultFormatX(v) {
+  if (v instanceof Date) return utcAxisDate(v);
+  if (typeof v === "number") return defaultNumberFormat(v);
+  return String(v);
+}
+const clampTo = (v, [lo, hi]) => Math.min(Math.max(v, Math.min(lo, hi)), Math.max(lo, hi));
+function visibleSeries(series, hidden) {
+  return series.filter(
+    (s) => !hidden.has(s.key) && !(s.parent !== void 0 && hidden.has(s.parent))
+  );
+}
+function yGuide(opts) {
+  const { cfg, axis, cls, side, grid } = opts;
+  const ladder = LADDER[cls];
+  const ticks = typeof cfg?.ticks === "object" ? { values: cfg.ticks } : { count: typeof cfg?.ticks === "number" ? cfg.ticks : ladder.yTicks };
+  const gridLine = grid ? { grid: GRID_LINE } : {};
+  if (cls === "micro") return { ...gridLine, axis: false };
+  const inside = cls === "compact";
+  return {
+    ...gridLine,
+    ...side === "right" && { side: "right" },
+    axis: {
+      line: false,
+      ticks: { ...ticks, format: axis.format, line: false, ...inside && { size: 0, padding: 0 } },
+      tickLabels: {
+        fontSize: ladder.font,
+        opacity: 1,
+        ...inside && {
+          anchor: side === "left" ? "start" : "end",
+          dx: side === "left" ? INSIDE_LABEL_DX : -INSIDE_LABEL_DX,
+          dy: INSIDE_LABEL_DY
+        }
+      }
+    }
+  };
+}
+function xTickPolicy(model, xTicks) {
+  if (typeof xTicks === "object") return { values: xTicks };
+  if (model.band || model.kind === "string") return { values: model.values };
+  if (model.kind === "date" && model.extent)
+    return {
+      values: dateTicks([new Date(model.extent[0]), new Date(model.extent[1])], xTicks, model.step)
+    };
+  return { count: xTicks };
+}
+function xGuide(opts) {
+  const { model, xTicks, format, cls } = opts;
+  const ladder = LADDER[cls];
+  const ticks = xTickPolicy(model, xTicks ?? ladder.xTicks);
+  return {
+    axis: {
+      line: AXIS_LINE,
+      ticks: { ...ticks, format, line: false, size: 0 },
+      tickLabels: {
+        fontSize: ladder.font,
+        opacity: 1,
+        thin: true,
+        // A locked-zero left margin (compact) must not clip the first label.
+        ...cls === "compact" && {
+          anchor: ({ index }) => index === 0 ? "start" : void 0
+        }
+      }
+    }
+  };
+}
+const areaGradientId = (index) => `basalt-area-${index}`;
+function areaGradient(index, color) {
+  return {
+    id: areaGradientId(index),
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 1,
+    stops: [
+      { offset: 0, color: `color-mix(in srgb, ${color} var(--vx-area-top), transparent)` },
+      { offset: 1, color: `color-mix(in srgb, ${color} var(--vx-area-bottom), transparent)` }
+    ]
+  };
+}
+const isBar = (s) => s.mark === "bar";
+const STACK_POSITIVE_KEY = "__stack+";
+const STACK_NEGATIVE_KEY = "__stack-";
+function stackedSeries(series) {
+  const bars = series.filter(isBar);
+  if (bars.length === 0) return [...series];
+  const sum = (d, sign) => {
+    let total = 0;
+    let summed = false;
+    for (const s of bars) {
+      const v = s.getValue(d);
+      if (v === null || !Number.isFinite(v) || Math.sign(v) !== sign) continue;
+      total += v;
+      summed = true;
+    }
+    return summed ? total : null;
+  };
+  const base = bars[0];
+  return [
+    ...series.filter((s) => !isBar(s)),
+    { ...base, key: STACK_POSITIVE_KEY, getValue: (d) => sum(d, 1) },
+    { ...base, key: STACK_NEGATIVE_KEY, getValue: (d) => sum(d, -1) }
+  ];
+}
+function normalizedDomain(data, series) {
+  const negative = data.some((d) => series.some((s) => isBar(s) && (s.getValue(d) ?? 0) < 0));
+  return negative ? [-1, 1] : [0, 1];
+}
+function overlayBounds(input) {
+  const bounds = { left: [], right: [] };
+  const sideOf = (side) => side === "right" && input.y2 !== void 0 ? "right" : "left";
+  for (const z of input.zones ?? []) bounds[sideOf(z.axisSide)].push(z.from, z.to);
+  for (const l of input.refLines ?? []) bounds[sideOf(l.axis)].push(l.value);
+  return bounds;
+}
+function leftDomain(input, series, bounds) {
+  const auto = input.y?.domain === void 0 || input.y.domain === "auto";
+  if (auto && input.stack === "normalized") return normalizedDomain(input.data, series);
+  return resolveYDomain(
+    input.y,
+    input.data,
+    auto && input.stack ? stackedSeries(series) : series,
+    bounds
+  );
+}
+function resolveAxes(input, visible) {
+  const hasY2 = input.y2 !== void 0;
+  const bounds = overlayBounds(input);
+  const onRight = (s) => hasY2 && s.axis === "right";
+  const left = {
+    domain: leftDomain(
+      input,
+      visible.filter((s) => !onRight(s)),
+      bounds.left
+    ),
+    format: input.y?.format ?? defaultNumberFormat
+  };
+  const right = hasY2 ? {
+    domain: resolveYDomain(input.y2, input.data, visible.filter(onRight), bounds.right),
+    format: input.y2?.format ?? defaultNumberFormat
+  } : null;
+  return {
+    left,
+    right,
+    onRight,
+    axisOf: (side) => side === "right" && right ? right : left,
+    scaleId: (side) => side === "right" && hasY2 ? "y2" : "y"
+  };
+}
+function underlayMarks(input, model, axes) {
+  const fractionRows = [{ f0: 0, f1: 1 }];
+  const zones = (input.zones ?? []).map((z, i) => {
+    const domain = axes.axisOf(z.axisSide).domain;
+    return decorative(
+      rect(fractionRows, {
+        id: `zone-${i}`,
+        x1: "f0",
+        x2: "f1",
+        y1: () => clampTo(z.from, domain),
+        y2: () => clampTo(z.to, domain),
+        xScale: "zx",
+        yScale: axes.scaleId(z.axisSide),
+        fill: z.fill,
+        inset: 0
+      })
+    );
+  });
+  const xZones = (input.xZones ?? []).flatMap((z, i) => {
+    const f = xZoneFractions(z, model);
+    if (!f) return [];
+    return [
+      decorative(
+        rect([{ f0: f[0], f1: f[1] }], {
+          id: `xzone-${i}`,
+          x1: "f0",
+          x2: "f1",
+          y1: () => axes.left.domain[0],
+          y2: () => axes.left.domain[1],
+          xScale: "zx",
+          fill: z.fill,
+          inset: 0
+        })
+      )
+    ];
+  });
+  return [...zones, ...xZones];
+}
+const refLineMarks = (input, axes) => (input.refLines ?? []).map(
+  (r, i) => ruleY([r.value], {
+    id: `ref-${i}`,
+    stroke: r.color,
+    strokeOpacity: 1,
+    strokeWidth: 1,
+    yScale: axes.scaleId(r.axis),
+    ...r.dashed && { strokeDasharray: DASH }
+  })
+);
+function buildScales(opts) {
+  const { input, model, axes, formatX, cls, zoneScale } = opts;
+  const { left, right } = axes;
+  return {
+    x: {
+      scale: model.scale,
+      ...xGuide({ model, xTicks: input.xTicks, format: formatX, cls })
+    },
+    y: {
+      scale: yScaleFor(input.y, left.domain),
+      ...yGuide({ cfg: input.y, axis: left, cls, side: "left", grid: input.y?.grid ?? true })
+    },
+    ...right && {
+      y2: {
+        channel: "y",
+        scale: yScaleFor(input.y2, right.domain),
+        ...yGuide({
+          cfg: input.y2,
+          axis: right,
+          cls,
+          side: "right",
+          grid: input.y2?.grid ?? false
+        })
+      }
+    },
+    ...zoneScale && {
+      zx: { channel: "x", scale: scaleLinear().domain([0, 1]), axis: false }
+    }
+  };
+}
+function tooltipHeader(input, formatX, v, d) {
+  if (input.tooltip && input.tooltip.formatHeader) return input.tooltip.formatHeader(v, d);
+  if (v instanceof Date && !input.formatX) return utcHeaderDate(v);
+  return formatX(v);
+}
+function rowsOf(input, visibleKeys) {
+  const seriesBy = new Map(input.series.map((s) => [s.key, s]));
+  return (key) => {
+    const s = seriesBy.get(key);
+    if (!s)
+      throw new Error(`[basalt] CartesianChart: marks asked for series "${key}", not in \`series\``);
+    if (!visibleKeys.has(key)) return [];
+    return input.data.map((d) => {
+      const v = s.getValue(d);
+      return {
+        x: input.x(d),
+        y: v === null || !Number.isFinite(v) ? null : v,
+        series: s.key,
+        datum: d
+      };
+    });
+  };
+}
+function tooltipSpec(opts) {
+  const { input, axes, visible, keys, visibleKeys, formatX } = opts;
+  const hidden = input.series.filter((s) => !visibleKeys.has(s.key));
+  const rowSeries = (input.reverseRows ? visible.toReversed() : visible).filter(
+    (s) => s.tooltip !== false
+  );
+  return {
+    use: tooltipHost,
+    portal,
+    anchor: "group-center",
+    content: (points) => {
+      const primary = points[0];
+      if (!primary) return { rows: [] };
+      const datum = primary.datum;
+      const row = typeof datum === "object" && datum !== null && "datum" in datum && "series" in datum ? datum : void 0;
+      const [x, d] = row && keys.has(row.series) ? [row.x, row.datum] : [primary.xValue, datum];
+      const rows = [];
+      for (const s of rowSeries) {
+        const v = s.getValue(d);
+        if (v === null || !Number.isFinite(v)) continue;
+        rows.push({
+          label: s.note === void 0 ? s.label : `${s.label} \xB7 ${s.note}`,
+          value: s.formatValue ? s.formatValue(v, d) : axes.axisOf(axes.onRight(s) ? "right" : "left").format(v),
+          color: s.color,
+          ...input.highlighted === s.key && { active: true }
+        });
+      }
+      const extra = (input.tooltip || void 0)?.rows?.(d, { visible, hidden }) ?? [];
+      return { title: tooltipHeader(input, formatX, x, d), rows: [...rows, ...extra] };
+    }
+  };
+}
+function compileCartesian(input) {
+  const visible = visibleSeries(input.series, input.hidden ?? /* @__PURE__ */ new Set());
+  const visibleKeys = new Set(visible.map((s) => s.key));
+  const keys = new Set(input.series.map((s) => s.key));
+  const model = xScaleFor(input.data.map(input.x), input.band === true);
+  const axes = resolveAxes(input, visible);
+  const under = underlayMarks(input, model, axes);
+  const over = refLineMarks(input, axes);
+  const rows = rowsOf(input, visibleKeys);
+  const formatX = (v) => input.formatX ? input.formatX(v) : defaultFormatX(v);
+  const gradients = input.series.flatMap(
+    (s, i) => s.area ? [areaGradient(i, typeof s.area === "string" ? s.area : s.color)] : []
+  );
+  return {
+    chart: ({ width, height }) => {
+      const cls = resolveContainerClass(width);
+      const kindMarks = input.marks({
+        rows,
+        visible,
+        highlighted: input.highlighted ?? null,
+        containerClass: cls,
+        width,
+        height,
+        y2: axes.right ? "y2" : void 0,
+        yDomain: axes.left.domain,
+        y2Domain: axes.right?.domain
+      });
+      return {
+        marks: [...under, ...kindMarks, ...over, crosshair({ x: CROSSHAIR, y: false })],
+        scales: buildScales({ input, model, axes, formatX, cls, zoneScale: under.length > 0 }),
+        theme: CHART_THEME,
+        ...gradients.length > 0 && { gradients },
+        clip: true,
+        ...cls === "compact" && { margin: { left: 0, ...axes.right && { right: 0 } } }
+      };
+    },
+    // Followers paint the crosshair only, unless the chart opts into following tooltips.
+    focus: typeof input.tooltip === "object" && input.tooltip.onFollow ? "group-x" : sourceOnlyFocus(input.cursorGroup, input.chartId),
+    maxFocusDistance: Number.POSITIVE_INFINITY,
+    cursor: cursorBinding({
+      group: input.cursorGroup,
+      chartId: input.chartId,
+      keys: model.values,
+      mode: input.cursorResolution ?? "nearest",
+      pin: input.coarse === true
+    }),
+    tooltip: input.tooltip === false ? false : tooltipSpec({ input, axes, visible, keys, visibleKeys, formatX })
+  };
+}
+export {
+  areaGradient,
+  areaGradientId,
+  compileCartesian,
+  dateTicks,
+  defaultFormatX,
+  defaultNumberFormat,
+  utcAxisDate,
+  utcHeaderDate,
+  visibleSeries,
+  xGuide,
+  yGuide
+};

package/dist/charts/cursor.d.ts

@@ -0,0 +1,50 @@
+import type { ChartCursorController } from '@tanstack/charts/cursor';
+import type { ChartCursorBinding, ChartFocusStrategy } from '@tanstack/charts/types/core';
+import type { ChartX, CursorResolution } from './types.js';
+/**
+ * The cursor controller for a group (default `'default'`), for app-side sync — a map timeline that
+ * follows the charts, or drives them:
+ *
+ * ```ts
+ * const cursor = chartCursor()
+ * const state = useSyncExternalStore(cursor.subscribe, cursor.getState, () => null)
+ * ```
+ *
+ * The same object for the same group, so `useSyncExternalStore` never resubscribes per render. On
+ * the server it is inert.
+ */
+export declare function chartCursor(group?: string): ChartCursorController;
+/** Test seam: whether a group currently has an entry. */
+export declare const hasCursorGroup: (group: string) => boolean;
+export declare function isForeign(group: string | undefined, chartId: string): boolean;
+/**
+ * Each chart's view of its group's controller. Two jobs:
+ *  - stamp what this chart publishes with its id (ownership, above);
+ *  - snap a foreign value onto THIS chart's x values. TanStack matches a shared value exactly, so a
+ *    weekly chart following a daily one would paint an unsnapped rule. State identity is preserved:
+ *    the same object when no snap is needed, one memoized copy otherwise.
+ *
+ * The view object itself is stable per `group` + `chartId` on the client (see `views`); its entry
+ * is dropped a microtask after its last subscription ends, or after its creation if nothing
+ * subscribed by then.
+ */
+export declare function chartCursorView(group: string | undefined, chartId: string, keys: readonly ChartX[], mode: CursorResolution): ChartCursorController;
+/**
+ * Source-only tooltips. A 1.1.0 host shows a tooltip (and its `role="status"` live region) exactly
+ * when it resolves a focus point, and it resolves a shared cursor's point through the definition's
+ * focus strategy. Wrapping `group-x` so it groups nothing while a FOREIGN state is current leaves a
+ * follower with the crosshair (painted from the cursor presentation, not from focus) and nothing
+ * else.
+ */
+export declare function sourceOnlyFocus(group: string | undefined, chartId: string): ChartFocusStrategy;
+export declare function cursorBinding(opts: {
+    group: string | undefined;
+    chartId: string;
+    keys: readonly ChartX[];
+    mode: CursorResolution;
+    /** Activation pins and unpins the cursor — on for a coarse pointer (§ 9.6: tap to pin). */
+    pin: boolean;
+}): ChartCursorBinding;
+/** Test seam: whether a chart's view entry exists. */
+export declare const hasCursorView: (group: string | undefined, chartId: string) => boolean;
+//# sourceMappingURL=cursor.d.ts.map

package/dist/charts/cursor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../src/charts/cursor.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAEpE,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAEnB,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAiEvD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,SAAY,GAAG,qBAAqB,CAQpE;AAED,yDAAyD;AACzD,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,OAA4B,CAAA;AAc3E,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAG7E;AA8ED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,IAAI,EAAE,gBAAgB,GACrB,qBAAqB,CAqBvB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,kBAAkB,CAQ9F;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE;IAClC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,IAAI,EAAE,gBAAgB,CAAA;IACtB,2FAA2F;IAC3F,GAAG,EAAE,OAAO,CAAA;CACb,GAAG,kBAAkB,CAQrB;AAED,sDAAsD;AACtD,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,GAAG,SAAS,EAAE,SAAS,MAAM,KAAG,OACvB,CAAA"}