@fundar/data-chart-telling 1.18.0 → 1.20.0

package/dist/layout/geometry/ScaleGateMarks.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { getContext, setContext, type Snippet } from 'svelte';
+	import { ScaleGate } from './ScaleGate.svelte';
+	import type { SvelteplotContext } from './ScaleFreeContext';
+
+	/**
+	 * Hands every mark drawn under it to svelteplot's plot behind a gate: the plot works its scales out again when a
+	 * mark's rows hold something new, not each time the mark copies them. See `ScaleGate`.
+	 */
+	let { children }: { children: Snippet } = $props();
+
+	setContext('svelteplot', ScaleGate.of(getContext<SvelteplotContext>('svelteplot')));
+</script>
+
+{@render children()}

package/dist/layout/geometry/ScaleGateMarks.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const ScaleGateMarks: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScaleGateMarks = ReturnType<typeof ScaleGateMarks>;
+export default ScaleGateMarks;

package/dist/layout/hover/HoverShapes.d.ts

@@ -16,15 +16,15 @@ export type HoverShapesReach = {
     dimmed: (row: Row) => boolean;
     cfg: PlotStylesConfig;
 };
-/** One part of a marker: its rows that the hover styles alike, keyed by how. */
-export type HoverShapesPart<T> = {
-    key: string;
-    marker: T;
-};
 /**
  * The look the plot's hover markers give the shapes of every marker linked to the hover (`hover: true` or
  * `'style'`): the hovered ones take `active`, the others `others`, each over the shape's own style. A shape
  * the legend dims keeps its own fill and opacities; one the hover cannot reach (hidden, omitted) is untouched.
+ *
+ * The marker stays one marker over all its rows, whatever is hovered: each style the hover sets is a function of
+ * the row that asks the hover how it reaches it. Moving the pointer then only draws the marker's shapes again in
+ * their new look - their rows and options do not change, so svelteplot never works the plot's scales out again
+ * (it does so from every mark's data and options, and a style with no scale is never read for them).
  */
 export declare class HoverShapes {
     #private;
@@ -36,9 +36,21 @@ export declare class HoverShapes {
     /** Whether `marker`'s shapes take the hover's styles. */
     static links(marker: object): boolean;
     /**
-     * `marker` in parts, each drawing the rows the hover styles alike - the shapes it does not style first, the
-     * hovered ones last, so their outline is on top. A marker the hover does not style is one part, as it is.
+     * `marker` with each style the hover sets as a function of the row: the hovered rows take `active`, the others
+     * `others`, and while nothing is hovered every row its own style. A marker the hover does not style is returned
+     * as it is. `rows` are what the marker draws without `data` of its own.
+     *
+     * The outline `active` sets is not the shape's own: {@link outline} draws it over every shape, whole.
+     */
+    styled<T extends object>(marker: T, rows: readonly unknown[], reach: HoverShapesReach): T;
+    /** Whether any rule outlines the hovered shapes: an `active` that sets one of the stroke's fields. */
+    get outlines(): boolean;
+    /**
+     * The outline of `marker`'s hovered shapes, to draw over every shape of the plot: the marker over its hovered
+     * rows only, with no fill, no label and no pointer of its own. A shape is drawn in its marker's order, so its
+     * neighbours drawn after it would cover part of its outline - a treemap's tile, a heatmap's cell with no gap.
+     * `undefined` when no rule outlines the shapes or nothing of the marker is hovered.
      */
-    split<T extends object>(marker: T, rows: readonly unknown[], reach: HoverShapesReach): HoverShapesPart<T>[];
+    outline<T extends object>(marker: T, rows: readonly unknown[], reach: HoverShapesReach): T | undefined;
 }
 export {};

package/dist/layout/hover/HoverShapes.js

@@ -1,13 +1,30 @@
 import { MarkerStyles } from '../../phases/markers/MarkerStyles';
 import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+import { RowStyle } from '../../markers/utils/RowStyle';
 /**
  * The look the plot's hover markers give the shapes of every marker linked to the hover (`hover: true` or
  * `'style'`): the hovered ones take `active`, the others `others`, each over the shape's own style. A shape
  * the legend dims keeps its own fill and opacities; one the hover cannot reach (hidden, omitted) is untouched.
+ *
+ * The marker stays one marker over all its rows, whatever is hovered: each style the hover sets is a function of
+ * the row that asks the hover how it reaches it. Moving the pointer then only draws the marker's shapes again in
+ * their new look - their rows and options do not change, so svelteplot never works the plot's scales out again
+ * (it does so from every mark's data and options, and a style with no scale is never read for them).
  */
 export class HoverShapes {
     /** What the legend owns on a dimmed shape. */
-    static #LEGEND_KEYS = ['fill', 'fillOpacity', 'strokeOpacity'];
+    static #LEGEND_KEYS = new Set(['fill', 'fillOpacity', 'strokeOpacity']);
+    /** The fields that draw a shape's outline. */
+    static #OUTLINE_KEYS = [
+        'stroke',
+        'strokeWidth',
+        'strokeOpacity',
+        'strokeDasharray'
+    ];
+    /** The fields that hold an opacity, fully opaque unless set. */
+    static #OPACITY_KEYS = new Set(['fillOpacity', 'strokeOpacity']);
+    /** The fields that hold a color: a string is the field of the rows it names, else the color itself. */
+    static #COLOR_KEYS = new Set(['fill', 'stroke']);
     /** A shape style's field as a `dot` marker names it. */
     static #DOT_KEYS = {
         fill: 'dotFill',
@@ -18,8 +35,15 @@ export class HoverShapes {
         strokeDasharray: 'dotStrokeDasharray'
     };
     #rules;
+    /** The fields any rule sets, in either role. */
+    #fields;
     constructor(markers) {
         this.#rules = markers.filter((m) => m.type === 'hover' && !!(m.active || m.others));
+        this.#fields = [
+            ...new Set(this.#rules.flatMap((rule) => [rule.active, rule.others].flatMap((style) => Object.entries(style ?? {})
+                .filter(([, value]) => value !== undefined)
+                .map(([name]) => name))))
+        ];
     }
     /** Whether any hover marker restyles shapes. */
     get any() {
@@ -31,73 +55,109 @@ export class HoverShapes {
         return hover === true || hover === 'style';
     }
     /**
-     * `marker` in parts, each drawing the rows the hover styles alike - the shapes it does not style first, the
-     * hovered ones last, so their outline is on top. A marker the hover does not style is one part, as it is.
+     * `marker` with each style the hover sets as a function of the row: the hovered rows take `active`, the others
+     * `others`, and while nothing is hovered every row its own style. A marker the hover does not style is returned
+     * as it is. `rows` are what the marker draws without `data` of its own.
+     *
+     * The outline `active` sets is not the shape's own: {@link outline} draws it over every shape, whole.
      */
-    split(marker, rows, reach) {
-        const whole = [{ key: '', marker }];
+    styled(marker, rows, reach) {
+        return this.#styled(marker, rows, reach, false);
+    }
+    /** {@link styled}, with `active`'s outline on the shapes themselves when `outlined`. */
+    #styled(marker, rows, reach, outlined) {
         if (!this.any || !HoverShapes.links(marker))
-            return whole;
+            return marker;
+        const own = { ...marker.styles };
         const data = (marker.data ?? rows);
-        const buckets = new Map();
-        for (const row of data) {
-            const key = this.#signature(row, reach);
-            const bucket = buckets.get(key) ?? buckets.set(key, []).get(key);
-            bucket.push(row);
+        const isDot = marker.type === 'dot';
+        const styles = { ...own };
+        for (const field of this.#fields) {
+            const name = isDot ? HoverShapes.#DOT_KEYS[field] : field;
+            const base = HoverShapes.#reader(field, own[name], data);
+            styles[name] = (row, index) => {
+                const value = this.#hovered(field, row, index, reach, outlined);
+                return value === undefined ? base(row, index) : value;
+            };
         }
-        if (buckets.size === 1 && buckets.has(''))
-            return whole;
-        const plain = (key) => !key.includes('a');
-        return [...buckets.entries()]
-            .sort(([a], [b]) => Number(plain(b)) - Number(plain(a)))
-            .map(([key, part]) => ({
-            key,
-            marker: key === '' ? { ...marker, data: part } : this.#restyled(marker, part, key, reach)
-        }));
+        return MarkerStyles.restyle({ ...marker, styles }, { cfg: reach.cfg, rows: [...data] });
+    }
+    /** Whether any rule outlines the hovered shapes: an `active` that sets one of the stroke's fields. */
+    get outlines() {
+        return this.#rules.some((rule) => HoverShapes.#outlining(rule));
     }
     /**
-     * How the hover styles `row`: for each rule, `a` (active), `o` (other) or `-` (not at all), and `~` when the
-     * legend dims it. `''` while no rule styles it.
+     * The outline of `marker`'s hovered shapes, to draw over every shape of the plot: the marker over its hovered
+     * rows only, with no fill, no label and no pointer of its own. A shape is drawn in its marker's order, so its
+     * neighbours drawn after it would cover part of its outline - a treemap's tile, a heatmap's cell with no gap.
+     * `undefined` when no rule outlines the shapes or nothing of the marker is hovered.
      */
-    #signature(row, reach) {
-        const own = row[SERIES_KEY];
-        const roles = this.#rules.map((rule) => {
-            if (rule.series !== undefined && own !== rule.series)
-                return '-';
-            const role = reach.roleOf(row, rule.series);
-            if (role === 'active')
-                return rule.active ? 'a' : '-';
-            if (role === 'other')
-                return rule.others ? 'o' : '-';
-            return '-';
-        });
-        if (roles.every((role) => role === '-'))
-            return '';
-        return roles.join('') + (reach.dimmed(row) ? '~' : '');
+    outline(marker, rows, reach) {
+        if (!this.outlines || !HoverShapes.links(marker))
+            return undefined;
+        const rules = this.#rules.filter((rule) => HoverShapes.#outlining(rule));
+        const data = (marker.data ?? rows).filter((row) => rules.some((rule) => (rule.series === undefined || row?.[SERIES_KEY] === rule.series) &&
+            reach.roleOf(row, rule.series) === 'active'));
+        if (data.length === 0)
+            return undefined;
+        const styled = this.#styled(marker, rows, reach, true);
+        const isDot = marker.type === 'dot';
+        const unfilled = isDot
+            ? { dotFill: 'none', dotFillOpacity: 0 }
+            : { fill: 'none', fillOpacity: 0 };
+        const rest = Object.fromEntries(Object.entries(styled).filter(([key]) => key !== 'label' && key !== 'hover' && !key.startsWith('on')));
+        return {
+            ...rest,
+            data,
+            styles: { ...styled.styles, ...unfilled }
+        };
     }
-    /** `marker` over `rows`, with the styles `key` stands for over its own. */
-    #restyled(marker, rows, key, reach) {
-        const dimmed = key.endsWith('~');
-        const styles = this.#rules.reduce((merged, rule, i) => {
-            const role = key[i];
-            const style = role === 'a' ? rule.active : role === 'o' ? rule.others : undefined;
-            return {
-                ...merged,
-                ...HoverShapes.#named(HoverShapes.#defined(style, dimmed), marker)
-            };
-        }, { ...marker.styles });
-        return MarkerStyles.restyle({ ...marker, data: rows, styles }, { cfg: reach.cfg, rows });
+    static #outlining(rule) {
+        const active = rule.active ?? {};
+        return HoverShapes.#OUTLINE_KEYS.some((key) => active[key] !== undefined);
     }
-    /** `style` as `marker` names its fields: a `dot` marker's are its `dot` ones (`dotFill`...). */
-    static #named(style, marker) {
-        if (marker.type !== 'dot')
-            return style;
-        const keys = HoverShapes.#DOT_KEYS;
-        return Object.fromEntries(Object.entries(style).map(([name, value]) => [keys[name] ?? name, value]));
+    /**
+     * What the hover sets `field` to on `row` - the last rule that reaches the row and sets it wins - or `undefined`
+     * when none does: the row is not hovered, or the legend dims it and `field` is the legend's. An outline `active`
+     * sets is left to the outline drawn over every shape, unless `outlined`.
+     */
+    #hovered(field, row, index, reach, outlined) {
+        let value;
+        let dimmed;
+        for (const rule of this.#rules) {
+            if (rule.series !== undefined && row?.[SERIES_KEY] !== rule.series)
+                continue;
+            const role = reach.roleOf(row, rule.series);
+            const style = role === 'active' ? rule.active : role === 'other' ? rule.others : undefined;
+            const own = style?.[field];
+            if (own === undefined)
+                continue;
+            if (role === 'active' &&
+                !outlined &&
+                HoverShapes.#OUTLINE_KEYS.includes(field) &&
+                HoverShapes.#outlining(rule))
+                continue;
+            dimmed ??= HoverShapes.#LEGEND_KEYS.has(field) && reach.dimmed(row);
+            if (dimmed)
+                return undefined;
+            value = typeof own === 'function' ? own(row, index) : own;
+        }
+        return value;
     }
-    /** `style`'s set values, without what the legend owns on a dimmed shape. */
-    static #defined(style, dimmed) {
-        return Object.fromEntries(Object.entries(style ?? {}).filter(([name, value]) => value !== undefined &&
-            !(dimmed && HoverShapes.#LEGEND_KEYS.includes(name))));
+    /** How the shape's own `style` for `field` reads on a row, as the marker would draw it. */
+    static #reader(field, style, rows) {
+        if (typeof style === 'function')
+            return style;
+        // An opacity is a channel of the mark, and svelteplot leaves out a row whose channel reads nothing.
+        if (style === undefined && HoverShapes.#OPACITY_KEYS.has(field))
+            return () => 1;
+        if (typeof style !== 'string' || field === 'strokeDasharray')
+            return () => style;
+        if (HoverShapes.#COLOR_KEYS.has(field)) {
+            const color = RowStyle.colorOf(style, rows);
+            return color ? (row) => color(row) : () => style;
+        }
+        // A number (an opacity, a width) a string names the field of.
+        return (row) => row?.[style];
     }
 }

package/dist/layout/legend/ContinuousSection.svelte

@@ -153,6 +153,16 @@
 					};
 	});
 
+	// What a range set from code (`LegendState.setRange`) takes from this section.
+	$effect(() => {
+		if (!isInteractive) return;
+		interaction.narrowing = {
+			mode: section.interactive?.mode ?? 'filter',
+			disabledStyle: section.interactive?.disabledStyle ?? { opacity: cfg.legend.disabledOpacity },
+			domain: [section.min, section.max]
+		};
+	});
+
 	// Mirrors an externally-set `interaction.range` into lo/hi.
 	$effect(() => {
 		if (!isInteractive) return;

package/dist/layout/legend/LegendState.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteMap } from 'svelte/reactivity';
-import type { LegendDisabledAction, LegendEntry, LegendExtension, LegendPlot, LegendRange, LegendSection } from '../../types/layout/legend';
+import type { LegendDisabledAction, LegendDisabledStyle, LegendEntry, LegendExtension, LegendPlot, LegendRange, LegendSection } from '../../types/layout/legend';
 /**
  * A figure's legend, shared by every plot and legend under it: what the
  * reader turned off - each series' {@link LegendDisabledAction}, and the
@@ -14,6 +14,18 @@ export declare class LegendState {
     readonly disabled: SvelteMap<string, LegendDisabledAction>;
     /** The narrowed range of the first interactive continuous section, or `null`. */
     range: LegendRange | null;
+    /** How narrowing the range acts, and the span it narrows, as the interactive continuous section sets them - for a range set from code to act the same. */
+    narrowing: {
+        mode: LegendRange["mode"];
+        disabledStyle: LegendDisabledStyle;
+        domain: [number, number];
+    } | null;
+    /**
+     * Narrows the range as dragging the interactive section's handles would: `[min, max]` in the ramp's own
+     * values, or `null` for the whole of it. Its `mode` is the section's (`'filter'` without one), unless given.
+     * A span that is not a pair of numbers is left alone.
+     */
+    setRange(bounds: [number, number] | null, mode?: LegendRange['mode']): void;
     /** The enclosing figure's legend, or `null` outside one. Call during component init. */
     static current(): LegendState | null;
     /** A new legend, shared with everything below. Call during component init. */

package/dist/layout/legend/LegendState.svelte.js

@@ -19,9 +19,41 @@ export class LegendState {
     disabled = new SvelteMap();
     /** The narrowed range of the first interactive continuous section, or `null`. */
     range = $state(null);
+    /** How narrowing the range acts, and the span it narrows, as the interactive continuous section sets them - for a range set from code to act the same. */
+    narrowing = $state(null);
     #sources = new SvelteMap();
     /** What {@link setOff} last turned off, to turn back on what it no longer lists. */
     #managed = new SvelteMap();
+    /**
+     * Narrows the range as dragging the interactive section's handles would: `[min, max]` in the ramp's own
+     * values, or `null` for the whole of it. Its `mode` is the section's (`'filter'` without one), unless given.
+     * A span that is not a pair of numbers is left alone.
+     */
+    setRange(bounds, mode) {
+        if (bounds === null) {
+            this.range = null;
+            return;
+        }
+        const [a, b] = bounds;
+        if (!Number.isFinite(a) || !Number.isFinite(b))
+            return;
+        const { narrowing } = this;
+        const min = Math.min(a, b);
+        const max = Math.max(a, b);
+        // What spans the whole ramp is no narrowing: the section resets its handles the same way.
+        if (narrowing && min <= narrowing.domain[0] && max >= narrowing.domain[1]) {
+            this.range = null;
+            return;
+        }
+        this.range = {
+            min,
+            max,
+            mode: mode ?? narrowing?.mode ?? 'filter',
+            disabledStyle: narrowing?.disabledStyle ?? {
+                opacity: getConfiguration().legend.disabledOpacity
+            }
+        };
+    }
     /** The enclosing figure's legend, or `null` outside one. Call during component init. */
     static current() {
         return getContext(LEGEND_KEY) ?? null;

package/dist/layout/margins/Box.d.ts

@@ -37,6 +37,10 @@ export declare class Box {
     get empty(): boolean;
     /** How far this box reaches out from its origin (the point it sits around), in whole pixels. */
     get reach(): Margins;
+    /** Whether this box and `other` share any area. */
+    intersects(other: Box): boolean;
+    /** Whether this box lies wholly inside `bounds`. */
+    inside(bounds: Box): boolean;
     /** This box grown by `px` on every side. */
     pad(px: number): Box;
     /**

package/dist/layout/margins/Box.js

@@ -61,6 +61,20 @@ export class Box {
     get reach() {
         return this.overflow(Box.size(0, 0));
     }
+    /** Whether this box and `other` share any area. */
+    intersects(other) {
+        return (this.left < other.right &&
+            other.left < this.right &&
+            this.top < other.bottom &&
+            other.top < this.bottom);
+    }
+    /** Whether this box lies wholly inside `bounds`. */
+    inside(bounds) {
+        return (this.left >= bounds.left &&
+            this.right <= bounds.right &&
+            this.top >= bounds.top &&
+            this.bottom <= bounds.bottom);
+    }
     /** This box grown by `px` on every side. */
     pad(px) {
         return new Box(this.x - px, this.y - px, this.width + 2 * px, this.height + 2 * px);

package/dist/layout/margins/PlotMargins.svelte.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from 'svelte';
+import { get } from 'svelte/store';
 import { Margins } from './Margins';
 import { Box } from './Box';
 import { CellAlignment } from '../grid/GridAlignment.svelte';
@@ -27,6 +28,17 @@ export class PlotMargins {
     #settled;
     /** What svelteplot's own `<Plot>` lays the plot out by, once {@link follow} is handed it. */
     #plot = $state.raw();
+    /** The room svelteplot's axes ask of each side, whether or not it is `'auto'`, once {@link follow} reads it. */
+    #autoMargins = $state.raw();
+    #auto = $derived.by(() => {
+        const maps = this.#autoMargins;
+        if (!maps)
+            return {};
+        return Object.fromEntries(Margins.SIDES.flatMap((side) => {
+            const values = [...maps[side].values()];
+            return values.length ? [[side, Math.max(...values)]] : [];
+        }));
+    });
     constructor(inputs) {
         this.#inputs = inputs;
         setContext(PLOT_MARGINS_KEY, this);
@@ -124,6 +136,10 @@ export class PlotMargins {
      */
     follow(plot) {
         this.#plot = plot;
+        const stores = getContext('svelteplot/autoMargins');
+        if (stores) {
+            this.#autoMargins = Object.fromEntries(Margins.SIDES.map((side) => [side, get(stores[PlotMargins.#AUTO_STORE[side]])]));
+        }
         const cell = this.#cell;
         if (!cell)
             return;
@@ -132,6 +148,12 @@ export class PlotMargins {
             cell.report(new Margins(Number(marginTop) || 0, Number(marginRight) || 0, Number(marginBottom) || 0, Number(marginLeft) || 0));
         });
     }
+    static #AUTO_STORE = {
+        top: 'autoMarginTop',
+        right: 'autoMarginRight',
+        bottom: 'autoMarginBottom',
+        left: 'autoMarginLeft'
+    };
     /** The room the `reserve` boxes take past the edges their points can sit on. */
     #reserved = $derived.by(() => this.#inputs.reserve().reduce((room, { box, edges }) => {
         const reach = box.reach;
@@ -143,7 +165,10 @@ export class PlotMargins {
         const settled = this.#settled;
         const { width, height } = this.#inputs.size();
         const growth = this.#measured.max(this.#reserved).min(Margins.half(width, height));
-        const estimate = this.#inputs.estimate();
+        // A side grows from at least the room svelteplot's axes take on it: their ticks and title.
+        const estimate = this.#inputs
+            .estimate()
+            .map((value, side) => Math.max(value, this.#auto[side] ?? 0));
         const out = {};
         for (const side of Margins.SIDES) {
             const own = author?.[side];

package/dist/layout/plot/{Plot.svelte → AbstractPlot.svelte}

@@ -2,7 +2,7 @@
 	lang="ts"
 	generics="TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase"
 >
-	import type { Component } from 'svelte';
+	import { untrack, type Component } from 'svelte';
 	import Figure from '../figure/Figure.svelte';
 	import TimelineLayout from '../timeline/TimelineLayout.svelte';
 	import FacetLayout from '../facet/FacetLayout.svelte';
@@ -18,6 +18,11 @@
 	import { merge } from '../../utils/merge';
 	import { Pipeline } from '../../phases/Pipeline';
 	import { Slice } from './Slice';
+	import { SharedStepScales } from '../../phases/sharedScales/SharedStepScales';
+	import { TimelineTime } from '../timeline/TimelineTime';
+	import { TimelineSteps } from '../timeline/TimelineSteps';
+	import { resolveAccessor } from '../../utils/accessors';
+	import { ConfigEquality } from '../../utils/ConfigEquality';
 	import { FacetScope } from '../facet/scope';
 	import type { TooltipProp } from '../../types/layout/tooltip';
 	import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
@@ -130,12 +135,82 @@
 		return (r: TRow[], f: FacetConfig<TRow> | undefined, legend: LegendState | null) =>
 			run.runData(core ?? {}, r, f as never, legend, cfg);
 	});
-	// Kept while its inputs are the same objects: a timeline step re-reads them without changing them.
+	// What sets a timeline's steps, as values that change only when they do: a moving `progress` makes a new
+	// `timeline` object, which these do not follow, so the frame is not run again for it.
+	const stepAccessor = $derived(timeline?.accessor);
+	const stepDateFormat = $derived(timeline?.dateFormat);
+	const stepValues = $derived(timeline?.values);
+	const stepMode = $derived(slicing.filterMode);
+
+	// The plot's own props: one array that is the same object while none of them changed. Rows are compared as
+	// the same object, the rest - `segments`, `styles`, `scales` - as they hold, so a parent that builds the
+	// same configuration again does not make the data phases run again.
+	const ROW_PROPS = new Set(['data', 'series']);
+	let propsSeen: unknown[] = [];
+	const propsKey = $derived.by(() => {
+		const now = core
+			? Object.keys(core).flatMap((key) => [key, (core as Record<string, unknown>)[key]])
+			: [];
+		const same =
+			now.length === propsSeen.length &&
+			now.every(
+				(value, i) =>
+					Object.is(value, propsSeen[i]) ||
+					(i % 2 === 1 &&
+						!ROW_PROPS.has(String(now[i - 1])) &&
+						ConfigEquality.same(value, propsSeen[i]))
+			);
+		if (same) return propsSeen;
+		propsSeen = now;
+		return now;
+	});
+
+	/**
+	 * The frame: the run over every row. With a timeline that shows each step's own rows, the domains it
+	 * shares are the widest any step reaches - a step's rows stack, aggregate or bin among themselves, so the
+	 * extent over every row at once would be wider than any step's.
+	 *
+	 * It is run again when what the runs read changes - the plot's props (`segments` among them), the
+	 * configuration, the rows, the facet, what sets the steps - and for nothing else: a moving timeline, or
+	 * a pointer, never makes it run again.
+	 */
 	let frame: { inputs: unknown[]; state: DataRunState | undefined } | undefined;
-	const frameState = $derived.by(() => {
-		const inputs = [dataRun, facet, rows];
-		if (frame?.inputs.every((input, i) => input === inputs[i])) return frame.state;
-		const state = dataRun && rows ? dataRun(rows, facet, null) : undefined;
+	const frameState = $derived.by((): DataRunState | undefined => {
+		const inputs = [
+			propsKey,
+			cfg,
+			dataRun,
+			rows,
+			facet,
+			stepAccessor,
+			stepDateFormat,
+			stepValues,
+			stepMode
+		];
+		// Svelte may ask again with the same inputs: the answer is the one it has.
+		if (frame?.inputs.every((input, i) => Object.is(input, inputs[i]))) return frame.state;
+		const state = untrack(() => {
+			if (!dataRun || !rows) return undefined;
+			const whole = dataRun(rows, facet, null);
+			if (stepAccessor === undefined) return whole;
+			const reader = new TimelineTime(stepDateFormat);
+			const get = resolveAccessor<TRow>(stepAccessor as never) as (row: TRow) => unknown;
+			const timeOf = (row: TRow) => reader.toTime(get(row));
+			const named = stepValues?.map((v) => reader.toTime(v)).filter((t) => t !== undefined);
+			const steps = TimelineSteps.of(named, rows, (row) => timeOf(row) ?? NaN);
+			const perStep = steps.values
+				.filter((step) => !Number.isNaN(step))
+				.map((step) => {
+					// A row without a step shows in every one.
+					const shown = rows.filter((row) => {
+						const at = timeOf(row);
+						return at === undefined || TimelineSteps.matches(at, step, stepMode);
+					});
+					return dataRun(shown, facet, null).sharedScales;
+				});
+			const bands = (whole as { axes?: { bands?: string[] } }).axes?.bands ?? [];
+			return { ...whole, sharedScales: SharedStepScales.over(whole.sharedScales, bands, perStep) };
+		});
 		frame = { inputs, state };
 		return state;
 	});
@@ -216,6 +291,7 @@
 				? FacetPanels.buildPanelState(panels, slicing.panelKey(place) ?? '')
 				: undefined,
 			facet: place,
+			time,
 			keep: slicing.keep({ time, facet: place })
 		})}
 	</HoverScope>
@@ -260,6 +336,7 @@
 			height: h,
 			tooltip: tooltipConfig,
 			scales: slicing.timelineScales<TScales>(sharedScales),
+			time,
 			keep: slicing.keep({ time })
 		})}
 	{/if}

package/dist/layout/plot/{Plot.svelte.d.ts → AbstractPlot.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { Component } from 'svelte';
+import { type Component } from 'svelte';
 import { Pipeline } from '../../phases/Pipeline';
 import type { TooltipProp } from '../../types/layout/tooltip';
 import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
@@ -45,6 +45,6 @@ interface $$IsomorphicComponent {
     <TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase>(internal: unknown, props: ReturnType<__sveltets_Render<TRow, TScales, TCore>['props']> & {}): ReturnType<__sveltets_Render<TRow, TScales, TCore>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
-declare const Plot: $$IsomorphicComponent;
-type Plot<TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase> = InstanceType<typeof Plot<TRow, TScales, TCore>>;
-export default Plot;
+declare const AbstractPlot: $$IsomorphicComponent;
+type AbstractPlot<TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase> = InstanceType<typeof AbstractPlot<TRow, TScales, TCore>>;
+export default AbstractPlot;

package/dist/layout/plot/PublicPlotContext.d.ts

@@ -53,6 +53,11 @@ export declare class PublicLegend {
     get entries(): LegendEntry[];
     /** The range its continuous section narrows to, or `null`. */
     get range(): LegendRange | null;
+    /**
+     * Narrows the continuous section to `[min, max]` as dragging its handles would, or resets it with `null`:
+     * its plots filter or rescale to it. `mode` is the section's own unless given.
+     */
+    setRange(range: [number, number] | null, mode?: LegendRange['mode']): void;
     /** The series that are turned off. */
     get off(): string[];
     isOff(series: string): boolean;

package/dist/layout/plot/PublicPlotContext.js

@@ -73,6 +73,13 @@ export class PublicLegend {
     get range() {
         return this.#state.range;
     }
+    /**
+     * Narrows the continuous section to `[min, max]` as dragging its handles would, or resets it with `null`:
+     * its plots filter or rescale to it. `mode` is the section's own unless given.
+     */
+    setRange(range, mode) {
+        this.#state.setRange(range, mode);
+    }
     /** The series that are turned off. */
     get off() {
         return [...this.#state.disabled.keys()];