@fundar/data-chart-telling 0.0.26 → 0.0.28

package/dist/plots/scatter/ValueLabels.svelte

@@ -1,39 +1,77 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
   import { Text, usePlot } from 'svelteplot';
   import { SvelteMap } from 'svelte/reactivity';
+  import { resolveAccessor } from '../utils/accessors';
+  import { disabledFillOverride } from '../utils/legendDisabled';
+  import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
   import { resolveEdgeAwareAnchor, estimateTextWidth } from '../../utils/edgeAwareAnchor';
-  import type { AxisValue } from '../../types/layout/scales';
+  import type { Series } from '../../types/plots/data/common';
   import type { ValuesStyle } from '../../types/layout/styles';
+  import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
+  import type { VisualGroup } from '../../types/plots/segments/config';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
+  import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 
   /**
-   * Renders every point's value label in one mark — scatter has no
-   * per-series endpoint to single out (unlike line), so this covers the
-   * whole flat dataset at once, mirroring heatmap's own `ValueLabels`.
-   * Labels the Y value, matching the "Y is the value axis" convention every
-   * other plot kind uses. Placement is edge-aware: a label whose default
+   * Renders one series' point value labels — one `<Text>` mark per series
+   * (mirrors line/bar/pyramid's own `ValueLabels`), so a legend-disabled or
+   * hover-isolated series can carry its own constant `fillOpacity`. Labels
+   * the Y value, matching the "Y is the value axis" convention every other
+   * plot kind uses. Placement is edge-aware: a label whose default
    * anchor/offset would push it past the plot's own content box flips to
-   * the opposite side instead of clipping. Deliberately read-only against
-   * `usePlot()`'s live scale — doesn't register into svelteplot's shared
-   * margin-auto-sizing context, which can spike CPU/memory into
-   * unresponsiveness when many `<Plot>` instances mount/unmount together
-   * (e.g. switching from a multi-story docs page to a single story).
+   * the opposite side instead of clipping — `onOverflow` below is a second,
+   * coarser line of defense for whatever the flip still can't fit (e.g. a
+   * corner point with no room in any direction).
    */
   let {
-    data,
-    getX,
-    getY,
-    fmtVal,
+    group,
+    formatValue,
     values,
     defaultColor,
+    disabled,
+    onHoverSeries,
+    onHoverEnd,
+    onOverflow,
   }: {
-    data: TData[];
-    getX: (d: TData) => AxisValue;
-    getY: (d: TData) => AxisValue;
-    fmtVal: (value: number, seriesName: string) => string;
+    group: VisualGroup<Series<TData>, ScatterSegmentStyle>;
+    formatValue: (value: number, seriesName: string) => string;
     values: ValuesStyle | undefined;
     defaultColor: string;
+    /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
+    disabled?: LegendDisabledStyle;
+    /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
+    onHoverSeries?: () => void;
+    onHoverEnd?: () => void;
+    /** Reports how far this series' labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
+    onOverflow?: (overflow: MarginOverflow) => void;
   } = $props();
 
+  const data = $derived(group.series.data);
+  const getX = $derived(resolveAccessor(group.series.x));
+  const getY = $derived(resolveAccessor(group.series.y));
+  const plot = usePlot();
+  let groupEl: SVGGElement | undefined = $state();
+
+  watchLabelOverflow({
+    el: () => groupEl,
+    bounds: () => {
+      // getBBox() inside isn't itself tracked — depend on whatever actually
+      // changes the rendered label layout so this re-measures.
+      void data;
+      void values;
+      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
+      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
+      if (!xRange || !yRange) return undefined;
+      return {
+        left: Math.min(xRange[0], xRange[1]),
+        right: Math.max(xRange[0], xRange[1]),
+        top: Math.min(yRange[0], yRange[1]),
+        bottom: Math.max(yRange[0], yRange[1]),
+      };
+    },
+    onOverflow: (overflow) => onOverflow?.(overflow),
+  });
+
   const font = $derived(values?.fontStyle);
   const preferredTextAnchor = $derived(
     font?.textAnchor === 'outside' || font?.textAnchor === undefined ? 'start' : font.textAnchor,
@@ -42,11 +80,10 @@
   const gapX = $derived(Math.abs(font?.dx ?? 8));
   const gapY = $derived(Math.abs(font?.dy ?? 0));
   const fontSize = $derived(typeof font?.fontSize === 'number' ? font.fontSize : 11);
-
-  const plot = usePlot();
+  const fillOverride = $derived(disabledFillOverride(disabled));
 
   function textOf(d: TData): string {
-    return fmtVal(Number(getY(d)), '');
+    return formatValue(Number(getY(d)), group.series.name);
   }
 
   /** One placement per row, keyed by row reference — avoids recomputing the same scale/edge lookup for each of the four accessor channels below. */
@@ -79,28 +116,34 @@
   });
 </script>
 
-<Text
-  {data}
-  x={getX}
-  y={getY}
-  text={(d: TData) => textOf(d)}
-  fill={font?.fill ?? defaultColor}
-  {fontSize}
-  fontWeight={font?.fontWeight ?? 500}
-  fontStyle={font?.fontStyle}
-  textAnchor={(d: TData) => placements.get(d)?.textAnchor ?? preferredTextAnchor}
-  lineAnchor={
-    // svelteplot's own `lineAnchor` accessor type isn't parameterized over the mark's row type like its siblings are.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (d: any) => placements.get(d)?.lineAnchor ?? preferredLineAnchor
-  }
-  dx={(d: TData) => placements.get(d)?.dx ?? gapX}
-  dy={(d: TData) => placements.get(d)?.dy ?? gapY}
-  lineHeight={font?.lineHeight}
-  rotate={font?.rotate}
-  stroke={font?.stroke}
-  strokeWidth={font?.strokeWidth}
-  paintOrder={font?.paintOrder}
-  class={font?.class}
-  textClass={font?.textClass}
-/>
+<!-- svelteplot's Text mark never wires pointer handlers to its DOM node,
+     despite declaring them in its types — a wrapping <g> catches the
+     boundary crossing instead (pointerenter/leave fire on every ancestor). -->
+<g bind:this={groupEl} role="presentation" onpointerenter={onHoverSeries} onpointerleave={onHoverEnd}>
+  <Text
+    {data}
+    x={getX}
+    y={getY}
+    text={(d: TData) => textOf(d)}
+    fill={font?.fill ?? defaultColor}
+    fillOpacity={fillOverride?.fillOpacity}
+    {fontSize}
+    fontWeight={font?.fontWeight ?? 500}
+    fontStyle={font?.fontStyle}
+    textAnchor={(d: TData) => placements.get(d)?.textAnchor ?? preferredTextAnchor}
+    lineAnchor={
+      // svelteplot's own `lineAnchor` accessor type isn't parameterized over the mark's row type like its siblings are.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (d: any) => placements.get(d)?.lineAnchor ?? preferredLineAnchor
+    }
+    dx={(d: TData) => placements.get(d)?.dx ?? gapX}
+    dy={(d: TData) => placements.get(d)?.dy ?? gapY}
+    lineHeight={font?.lineHeight}
+    rotate={font?.rotate}
+    stroke={font?.stroke}
+    strokeWidth={font?.strokeWidth}
+    paintOrder={font?.paintOrder}
+    class={font?.class}
+    textClass={font?.textClass}
+  />
+</g>

package/dist/plots/scatter/ValueLabels.svelte.d.ts

@@ -1,13 +1,22 @@
-import type { AxisValue } from '../../types/layout/scales';
+import type { Series } from '../../types/plots/data/common';
 import type { ValuesStyle } from '../../types/layout/styles';
+import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
-        data: TData[];
-        getX: (d: TData) => AxisValue;
-        getY: (d: TData) => AxisValue;
-        fmtVal: (value: number, seriesName: string) => string;
+        group: VisualGroup<Series<TData>, ScatterSegmentStyle>;
+        formatValue: (value: number, seriesName: string) => string;
         values: ValuesStyle | undefined;
         defaultColor: string;
+        /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
+        disabled?: LegendDisabledStyle;
+        /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
+        onHoverSeries?: () => void;
+        onHoverEnd?: () => void;
+        /** Reports how far this series' labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
+        onOverflow?: (overflow: MarginOverflow) => void;
     };
     exports: {};
     bindings: "";

package/dist/plots/utils/labelOverflow.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { MarginConfig } from '../../types/plots/props';
+/** How far a value label's rendered box extends past the plot's own content box, in pixels, on each side (0 = no overflow). */
+export type MarginOverflow = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/**
+ * Watches an SVG group's rendered bounding box against the plot's own
+ * content box (`bounds`) and reports how far it overflows on each side.
+ * Polled across successive paints until two consecutive readings agree,
+ * rather than trusted after a single frame: the group's own resolved
+ * geometry (driven by svelteplot's separate reactive graph) and svelteplot's
+ * own axis auto-margins can take a variable number of frames to settle —
+ * more on a page with many other components competing for layout (e.g. a
+ * docs page) than in an isolated story. Measuring too early can catch
+ * content still at its pre-layout default position; capped so a layout that
+ * genuinely never stabilizes still reports its last reading instead of
+ * polling forever. Also waits for web fonts to finish loading, since glyph
+ * metrics (and therefore `getBBox()`) can still reflect a fallback font's
+ * narrower widths until the real font swaps in.
+ */
+export declare function watchLabelOverflow(args: {
+    el: () => SVGGElement | undefined;
+    bounds: () => {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    } | undefined;
+    onOverflow: (overflow: MarginOverflow) => void;
+}): void;
+/**
+ * Tracks value-label overflow reported by (possibly several, e.g. one per
+ * series) {@link watchLabelOverflow} calls and grows a local margin override
+ * to fit it — monotonically, since shrinking it back would re-expose the
+ * overflow that caused the growth in the first place, oscillating between
+ * "shrink margin → overflow reappears → grow margin → …". Each side is only
+ * ever set when the caller's own `margins` prop hasn't already pinned it, so
+ * an explicit caller override always wins over this auto-grown one.
+ */
+export declare function createLabelMarginTracker(margins: () => MarginConfig | undefined): {
+    report: (overflow: MarginOverflow) => void;
+    readonly resolvedMargins: Partial<{
+        top: number | "auto";
+        right: number | "auto";
+        bottom: number | "auto";
+        left: number | "auto";
+    }> | undefined;
+};

package/dist/plots/utils/labelOverflow.svelte.js

@@ -0,0 +1,116 @@
+const NO_OVERFLOW = { left: 0, right: 0, top: 0, bottom: 0 };
+/**
+ * Watches an SVG group's rendered bounding box against the plot's own
+ * content box (`bounds`) and reports how far it overflows on each side.
+ * Polled across successive paints until two consecutive readings agree,
+ * rather than trusted after a single frame: the group's own resolved
+ * geometry (driven by svelteplot's separate reactive graph) and svelteplot's
+ * own axis auto-margins can take a variable number of frames to settle —
+ * more on a page with many other components competing for layout (e.g. a
+ * docs page) than in an isolated story. Measuring too early can catch
+ * content still at its pre-layout default position; capped so a layout that
+ * genuinely never stabilizes still reports its last reading instead of
+ * polling forever. Also waits for web fonts to finish loading, since glyph
+ * metrics (and therefore `getBBox()`) can still reflect a fallback font's
+ * narrower widths until the real font swaps in.
+ */
+export function watchLabelOverflow(args) {
+    $effect(() => {
+        const el = args.el();
+        const bounds = args.bounds();
+        const reportOverflow = args.onOverflow;
+        if (!el || !bounds)
+            return;
+        const MAX_ATTEMPTS = 30;
+        let cancelled = false;
+        let frame;
+        let attempt = 0;
+        let lastReading;
+        function measure() {
+            if (cancelled)
+                return;
+            let box;
+            try {
+                box = el.getBBox();
+            }
+            catch {
+                return;
+            }
+            const overflow = {
+                left: Math.ceil(Math.max(0, bounds.left - box.x)),
+                right: Math.ceil(Math.max(0, box.x + box.width - bounds.right)),
+                top: Math.ceil(Math.max(0, bounds.top - box.y)),
+                bottom: Math.ceil(Math.max(0, box.y + box.height - bounds.bottom)),
+            };
+            attempt += 1;
+            const stable = lastReading != null &&
+                lastReading.left === overflow.left &&
+                lastReading.right === overflow.right &&
+                lastReading.top === overflow.top &&
+                lastReading.bottom === overflow.bottom;
+            lastReading = overflow;
+            if (stable || attempt >= MAX_ATTEMPTS) {
+                reportOverflow(overflow);
+            }
+            else {
+                frame = requestAnimationFrame(measure);
+            }
+        }
+        const fontsReady = document.fonts?.ready ?? Promise.resolve();
+        fontsReady.then(() => {
+            if (cancelled)
+                return;
+            frame = requestAnimationFrame(measure);
+        });
+        return () => {
+            cancelled = true;
+            if (frame !== undefined)
+                cancelAnimationFrame(frame);
+        };
+    });
+}
+/**
+ * Tracks value-label overflow reported by (possibly several, e.g. one per
+ * series) {@link watchLabelOverflow} calls and grows a local margin override
+ * to fit it — monotonically, since shrinking it back would re-expose the
+ * overflow that caused the growth in the first place, oscillating between
+ * "shrink margin → overflow reappears → grow margin → …". Each side is only
+ * ever set when the caller's own `margins` prop hasn't already pinned it, so
+ * an explicit caller override always wins over this auto-grown one.
+ */
+export function createLabelMarginTracker(margins) {
+    let measured = $state(NO_OVERFLOW);
+    function report(overflow) {
+        const next = {
+            left: Math.max(measured.left, overflow.left),
+            right: Math.max(measured.right, overflow.right),
+            top: Math.max(measured.top, overflow.top),
+            bottom: Math.max(measured.bottom, overflow.bottom),
+        };
+        if (next.left !== measured.left ||
+            next.right !== measured.right ||
+            next.top !== measured.top ||
+            next.bottom !== measured.bottom) {
+            measured = next;
+        }
+    }
+    const resolvedMargins = $derived.by(() => {
+        const base = margins();
+        if (measured.left <= 0 && measured.right <= 0 && measured.top <= 0 && measured.bottom <= 0)
+            return base;
+        const out = { ...base };
+        if (measured.right > 0 && base?.right === undefined)
+            out.right = measured.right;
+        if (measured.left > 0 && base?.left === undefined)
+            out.left = measured.left;
+        if (measured.top > 0 && base?.top === undefined)
+            out.top = measured.top;
+        if (measured.bottom > 0 && base?.bottom === undefined)
+            out.bottom = measured.bottom;
+        return out;
+    });
+    return {
+        report,
+        get resolvedMargins() { return resolvedMargins; },
+    };
+}

package/dist/plots/utils/legendDisabled.d.ts

@@ -1,4 +1,4 @@
-import type { LegendDisabledStyle } from '../../types/charts/legend';
+import type { LegendDisabledStyle } from '../../types/layout/legend';
 import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
 /**
  * The three per-mark override layers a legend "disabled" state can apply,

package/dist/types/charts/common.d.ts

@@ -1,66 +1,19 @@
 import type { Snippet } from 'svelte';
-import type { AxisValue } from '../layout/scales';
-import type { Accessor } from '../plots/data/common';
-import type { EasingName, EasingFn } from './interpolate';
-export type TimeValue = number;
-export type Orientation = 'horizontal' | 'vertical';
-export type FacetColumns = number | {
-    desktop: number;
-    mobile: number;
-};
+import type { TimeValue } from '../layout/timeline';
+import type { LegendPlotContext } from '../layout/legend';
 export type ChartBoxContext = {
     width: number;
     height: number;
 };
 export type ChartBoxSnippet = Snippet<[ChartBoxContext]>;
-export type FacetCellContext<TRow extends Record<string, unknown>> = {
-    facetValue: string;
-    data: TRow[];
-    width: number;
-    height: number;
-};
-export type FacetCellSnippet<TRow extends Record<string, unknown>> = Snippet<[
-    FacetCellContext<TRow>
-]>;
-export type TimelineChildContext<TRow extends Record<string, unknown>> = {
-    selectedValue: TimeValue;
-    data: TRow[];
-    width: number;
-    height: number;
-};
-export type TimelineChildSnippet<TRow extends Record<string, unknown>> = Snippet<[
-    TimelineChildContext<TRow>
-]>;
 export type ChartPlotContext<TRow extends Record<string, unknown>> = {
     data: TRow[];
     width: number;
     height: number;
     facetValue?: string;
     selectedValue?: TimeValue;
+    legend?: LegendPlotContext;
 };
 export type ChartPlotSnippet<TRow extends Record<string, unknown>> = Snippet<[
     ChartPlotContext<TRow>
 ]>;
-export type TimelineInterpolation<TRow extends Record<string, unknown>> = {
-    key?: Accessor<TRow, unknown>;
-    value?: Accessor<TRow, AxisValue>;
-    create?: (lower: TRow, upper: TRow, x: TimeValue, value: number) => TRow;
-    progressEasing?: EasingName | EasingFn;
-    segmentEasing?: EasingName | EasingFn;
-};
-export type TimelineConfig<TRow extends Record<string, unknown>> = {
-    accessor: Accessor<TRow, TimeValue>;
-    progress: number;
-    values?: TimeValue[];
-    orientation?: Orientation;
-    show?: boolean;
-    thickness?: number;
-    filterMode?: 'exact' | 'upTo';
-    interpolate?: boolean | TimelineInterpolation<TRow>;
-};
-export type FacetConfig<TRow extends Record<string, unknown>> = {
-    by: Accessor<TRow, unknown>;
-    columns?: FacetColumns;
-    values?: string[];
-    gap?: number;
-};

package/dist/types/charts/props.d.ts

@@ -5,8 +5,9 @@ import type { BasePlotStylesConfig } from '../layout/styles';
 import type { SegmentsConfig, MarginConfig } from '../plots/props';
 import type { AxisBasedMarkersConfig } from '../markers/common';
 import type { TooltipProp } from '../layout/tooltip';
-import type { LegendSection } from './legend';
-import type { FacetConfig, TimelineConfig } from './common';
+import type { LegendSection } from '../layout/legend';
+import type { FacetConfig } from '../layout/facet';
+import type { TimelineConfig } from '../layout/timeline';
 /**
  * Common props accepted by every chart component (bar, line, heatmap, pyramid,
  * …). The `TSegmentStyle` parameter lets each chart narrow `segments` to its

package/dist/types/configuration/styling.d.ts

@@ -118,6 +118,25 @@ export type ChartConfig = {
         font: FontStyle;
         area: AreaStyle;
     };
+    facet: {
+        /** Position badge shown in `carousel`/`paginated` facet modes. */
+        indicator: {
+            background: string;
+            color: string;
+            fontSize: string;
+            padding: string;
+            radius: string;
+        };
+        /** Prev/next buttons shown in `paginated` facet mode. */
+        navButton: {
+            background: string;
+            color: string;
+            /** Button diameter (width and height). */
+            size: string;
+            fontSize: string;
+            disabledOpacity: number;
+        };
+    };
 };
 /** Deep-partial input accepted by `setConfiguration`. */
 export type ChartConfigInput = DeepPartial<ChartConfig>;

package/dist/types/layout/facet.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { Accessor } from '../plots/data/common';
+export type Responsive<T> = T | {
+    desktop: T;
+    mobile: T;
+};
+export type FacetColumns = Responsive<number>;
+export type FacetMode = 'grid' | 'carousel' | 'paginated';
+export type FacetCellContext<TRow extends Record<string, unknown>> = {
+    facetValue: string;
+    data: TRow[];
+    width: number;
+    height: number;
+};
+export type FacetCellSnippet<TRow extends Record<string, unknown>> = Snippet<[
+    FacetCellContext<TRow>
+]>;
+export type FacetIndicatorContext = {
+    current: number;
+    total: number;
+};
+export type FacetIndicatorSnippet = Snippet<[FacetIndicatorContext]>;
+export type FacetNavDirection = 'prev' | 'next';
+export type FacetNavContext = {
+    direction: FacetNavDirection;
+    disabled: boolean;
+    onclick: () => void;
+};
+export type FacetNavSnippet = Snippet<[FacetNavContext]>;
+export type FacetConfig<TRow extends Record<string, unknown>> = {
+    by: Accessor<TRow, unknown>;
+    columns?: FacetColumns;
+    values?: string[];
+    gap?: number;
+    mode?: Responsive<FacetMode>;
+    visible?: number;
+    pageSize?: number;
+    formatIndicator?: (current: number, total: number) => string;
+    indicator?: FacetIndicatorSnippet;
+    navButton?: FacetNavSnippet;
+};

package/dist/types/layout/legend.d.ts

@@ -1,5 +1,64 @@
 import type { SvelteMap } from 'svelte/reactivity';
-import type { LegendDisabledStyle } from '../charts/legend';
+import type { SymbolType, LineStyle } from '../plots/constants';
+import type { StrokeStyle, DotStyle } from '../plots/styling';
+export type LegendSectionType = 'discrete' | 'continuous';
+/**
+ * Style applied to whatever a legend interaction has turned "off" — a
+ * toggled-off discrete series, or a datapoint/cell/feature outside an active
+ * continuous range filter. `opacity` is a blanket convenience: any
+ * `*Opacity` field a consumer doesn't set falls back to it, so
+ * `{ opacity: 0.1 }` alone is enough to read as "disabled" everywhere.
+ */
+export type LegendDisabledStyle = {
+    opacity?: number;
+    stroke?: StrokeStyle;
+    dots?: DotStyle;
+    fill?: string;
+    fillOpacity?: number;
+};
+export type LegendItem = {
+    name: string;
+    label?: string;
+    color?: string;
+    symbol?: SymbolType;
+    opacity?: number;
+    lineStyle?: LineStyle;
+    /** Initial toggled-off state (uncontrolled — the user can still click it back on). */
+    disabled?: boolean;
+};
+export type DiscreteLegendSection = {
+    type: 'discrete';
+    title?: string;
+    items: LegendItem[];
+    columns?: number;
+    /** Enables click-to-toggle on each item. */
+    interactive?: boolean;
+    /** Style applied to a toggled-off item's series. Falls back to `cfg.legend.disabledOpacity`. */
+    disabledStyle?: LegendDisabledStyle;
+};
+export type ContinuousLegendSection = {
+    type: 'continuous';
+    title?: string;
+    columns?: number;
+    min: number;
+    max: number;
+    colorMin?: string;
+    colorMax?: string;
+    ticks?: number[];
+    width?: number;
+    format?: (v: number) => string;
+    /** Enables drag handles on the bar's edges to narrow the visible range. */
+    interactive?: boolean;
+    /**
+     * How the color ramp responds to a narrowed range: `'rescale'` reprojects
+     * it onto the new bounds, `'filter'` keeps the original domain and only
+     * excludes out-of-range values. Defaults to `'filter'`.
+     */
+    mode?: 'rescale' | 'filter';
+    /** Style applied to values outside the active range. Falls back to `cfg.legend.disabledOpacity`. */
+    disabledStyle?: LegendDisabledStyle;
+};
+export type LegendSection = DiscreteLegendSection | ContinuousLegendSection;
 /**
  * Shared legend-interaction state for cross-cutting legend → plot wiring.
  *
@@ -24,3 +83,8 @@ export type LegendInteractionStore = {
         disabledStyle: LegendDisabledStyle;
     } | null;
 };
+/** Read-only view of which series a legend has toggled off, resolved from {@link BaseChart}'s legend-interaction store. */
+export type LegendPlotContext = {
+    disabledSeries: ReadonlySet<string>;
+    isDisabled: (name: string) => boolean;
+};

package/dist/types/layout/styles.d.ts

@@ -12,20 +12,9 @@ import type { GeoFeature } from '../plots/data/geo';
 export type ValuesStyle = {
     show?: boolean;
     anchor?: ValueAnchor;
-    /** Called with the numeric value and the series name. Return a string to render. */
     format?: (value: number, seriesName: string) => string;
-    /** Text styling for the label itself. */
+    hoverIsolate?: boolean;
     fontStyle?: FontStyle;
-    /**
-     * Style for the leader line drawn from a label displaced to clear an
-     * overlap with another series' label, back to its real data point.
-     * Labels only ever move when they'd otherwise collide — this is a no-op
-     * style until that happens. Falls back to a neutral grey, thin, solid
-     * stroke — deliberately not the series' own colour or stroke width, since
-     * matching the data line reads as more data rather than as a leader,
-     * right where several lines are already converging. Unset fields keep
-     * that fallback.
-     */
     strokeStyle?: StrokeStyle;
 };
 /**

package/dist/types/layout/timeline.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { AxisValue } from './scales';
+import type { Accessor } from '../plots/data/common';
+import type { EasingName, EasingFn } from '../charts/interpolate';
+export type TimeValue = number;
+export type Orientation = 'horizontal' | 'vertical';
+export type TimelineChildContext<TRow extends Record<string, unknown>> = {
+    selectedValue: TimeValue;
+    data: TRow[];
+    width: number;
+    height: number;
+};
+export type TimelineChildSnippet<TRow extends Record<string, unknown>> = Snippet<[
+    TimelineChildContext<TRow>
+]>;
+export type TimelineInterpolation<TRow extends Record<string, unknown>> = {
+    key?: Accessor<TRow, unknown>;
+    value?: Accessor<TRow, AxisValue>;
+    create?: (lower: TRow, upper: TRow, x: TimeValue, value: number) => TRow;
+    progressEasing?: EasingName | EasingFn;
+    segmentEasing?: EasingName | EasingFn;
+};
+export type TimelineConfig<TRow extends Record<string, unknown>> = {
+    accessor: Accessor<TRow, TimeValue>;
+    progress: number;
+    values?: TimeValue[];
+    orientation?: Orientation;
+    show?: boolean;
+    thickness?: number;
+    filterMode?: 'exact' | 'upTo';
+    interpolate?: boolean | TimelineInterpolation<TRow>;
+};

package/dist/types/layout/timeline.js

@@ -0,0 +1 @@
+export {};