@fundar/data-chart-telling 0.0.64 → 1.1.0

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

@@ -0,0 +1,219 @@
+import { getContext, setContext } from 'svelte';
+import { Margins } from './Margins';
+import { Box } from './Box';
+import { CellAlignment } from '../grid/GridAlignment.svelte';
+const PLOT_MARGINS_KEY = Symbol('dct-plot-margins');
+/** The side each axis draws its tick labels on. */
+const TICK_SIDES = { x: 'bottom', y: 'left' };
+/**
+ * One plot's margins: the theme's, then the author's, then the room its
+ * labels reach out into (grown on every side the author left open), then the
+ * room rotated tick labels take or give back, and last the margins an aligned grid pinned on
+ * it. The plot's markers hand it what they draw to measure ({@link watch});
+ * it follows what svelteplot settles on ({@link follow}), for its grid. Its {@link box} and {@link contentBox} are the plot's box and
+ * area for any consumer, and {@link place} fits something of a given size
+ * next to a point inside the box.
+ *
+ * The margins the labels settled on go back out through `settle`; read back
+ * in as `author`, they hold as a minimum instead of fixing their sides.
+ * Create it during component init: it registers itself for the plot's
+ * markers ({@link PlotMargins.current}).
+ */
+export class PlotMargins {
+    #inputs;
+    #cell = CellAlignment.current();
+    #measured = $state.raw(Margins.ZERO);
+    /** The sides the labels settled on, as last handed to `settle`. */
+    #settled;
+    constructor(inputs) {
+        this.#inputs = inputs;
+        setContext(PLOT_MARGINS_KEY, this);
+        // The first run is not a reset.
+        let first = true;
+        $effect(() => {
+            inputs.resetKey();
+            if (first)
+                first = false;
+            else
+                this.#measured = Margins.ZERO;
+        });
+        $effect(() => {
+            const grown = this.#grown;
+            const settled = this.#settled;
+            if (!inputs.settle || Object.keys(grown).length === 0)
+                return;
+            if (settled && Margins.SIDES.every((side) => settled[side] === grown[side]))
+                return;
+            this.#settled = grown;
+            inputs.settle({ ...inputs.author(), ...grown });
+        });
+    }
+    /** The plot's margins, or `null` outside a plot. Call during component init. */
+    static current() {
+        return getContext(PLOT_MARGINS_KEY) ?? null;
+    }
+    /**
+     * Measures `el`'s rendered box once its readings settle - again whenever
+     * the content box or `deps` change - and reports how far it reaches past
+     * the content box: to `onOverflow`, and, when `grow` holds, into the room
+     * the margins grow by. Call during component init.
+     */
+    watch(el, options) {
+        $effect(() => {
+            const element = el();
+            const bounds = this.contentBox;
+            options.deps?.();
+            if (!element)
+                return;
+            let cancelled = false;
+            let frame;
+            let attempt = 0;
+            let last;
+            const measure = () => {
+                if (cancelled)
+                    return;
+                let box;
+                try {
+                    box = Box.of(element.getBBox());
+                }
+                catch {
+                    return;
+                }
+                const overflow = box.overflow(bounds);
+                attempt += 1;
+                const stable = overflow.equals(last);
+                last = overflow;
+                if (!stable && attempt < PlotMargins.#MAX_READINGS) {
+                    frame = requestAnimationFrame(measure);
+                    return;
+                }
+                options.onOverflow?.(overflow);
+                if (options.grow?.())
+                    this.reportOverflow(overflow);
+            };
+            // Text measures right only once its fonts load.
+            (document.fonts?.ready ?? Promise.resolve()).then(() => {
+                if (!cancelled)
+                    frame = requestAnimationFrame(measure);
+            });
+            return () => {
+                cancelled = true;
+                if (frame !== undefined)
+                    cancelAnimationFrame(frame);
+            };
+        });
+    }
+    /** How many frames {@link watch} waits for a box to settle. */
+    static #MAX_READINGS = 30;
+    /** Grows the labels' room to fit what reached `overflow` px past the content box. */
+    reportOverflow(overflow) {
+        const next = this.#measured.max(overflow);
+        if (!next.equals(this.#measured))
+            this.#measured = next;
+    }
+    /**
+     * Follows the margins svelteplot settles on - `plot` is its `usePlot()`,
+     * only readable inside its `<Plot>` - and reports them to the enclosing
+     * aligned grid cell, if any. Call during the init of a component inside it.
+     */
+    follow(plot) {
+        const cell = this.#cell;
+        if (!cell)
+            return;
+        $effect(() => {
+            const { marginTop, marginRight, marginBottom, marginLeft } = plot.options;
+            cell.report(new Margins(Number(marginTop) || 0, Number(marginRight) || 0, Number(marginBottom) || 0, Number(marginLeft) || 0));
+        });
+    }
+    /** 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;
+        return room.max(Margins.of(Object.fromEntries(edges.map((side) => [side, reach[side]]))));
+    }, Margins.ZERO));
+    /** The room labels need, on every side the author left open. */
+    #grown = $derived.by(() => {
+        const author = this.#inputs.author();
+        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();
+        const out = {};
+        for (const side of Margins.SIDES) {
+            const own = author?.[side];
+            // A side read back from `settle` is a minimum; any other the author set is fixed.
+            const held = typeof own === 'number' && settled?.[side] === own ? own : undefined;
+            if (own !== undefined && held === undefined)
+                continue;
+            const grown = growth[side] > 0 ? estimate[side] + growth[side] : undefined;
+            if (held !== undefined || grown !== undefined)
+                out[side] = Math.max(held ?? 0, grown ?? 0);
+        }
+        return out;
+    });
+    /** The author's margins, with the room labels need. */
+    #labels = $derived.by(() => {
+        const author = this.#inputs.author();
+        const grown = this.#grown;
+        return author === undefined && Object.keys(grown).length === 0
+            ? undefined
+            : { ...author, ...grown };
+    });
+    /**
+     * How much more room (or less) each axis' rotated tick labels take across
+     * it, on its side. An x label stands as tall as its text, a y label as wide;
+     * rotated, it reaches across by its turned box. A label is taken as twice
+     * as wide as its font size.
+     */
+    #tickRoom = $derived.by(() => {
+        const scales = this.#inputs.scales();
+        const height = this.#inputs.tickFontSize();
+        const width = 2 * height;
+        const room = {};
+        for (const axis of ['x', 'y']) {
+            const degrees = scales?.[axis]?.tickRotate;
+            if (!degrees)
+                continue;
+            const rad = (degrees * Math.PI) / 180;
+            const [across, along] = axis === 'x' ? [height, width] : [width, height];
+            const turned = Math.abs(Math.cos(rad)) * across + Math.abs(Math.sin(rad)) * along;
+            room[TICK_SIDES[axis]] = Math.ceil(turned - across);
+        }
+        return room;
+    });
+    /** What svelteplot's `<Plot margin>` takes. */
+    config = $derived.by(() => {
+        const base = { ...this.#inputs.theme(), ...this.#labels };
+        const pinned = this.#cell?.pinned;
+        if (pinned)
+            return { ...base, ...pinned.toJSON() };
+        // A fixed side makes room for its rotated tick labels; an `'auto'` one fits them itself.
+        const out = { ...base };
+        for (const [side, room] of Object.entries(this.#tickRoom)) {
+            const own = out[side];
+            if (typeof own === 'number')
+                out[side] = Math.max(0, own + room);
+        }
+        return out;
+    });
+    /** {@link config} as numbers, an `'auto'` side read as the plot's estimate. */
+    numeric = $derived.by(() => Margins.resolve(this.config, this.#inputs.estimate()));
+    /** The plot's whole box, in pixels. */
+    box = $derived.by(() => {
+        const { width, height } = this.#inputs.size();
+        return Box.size(width, height);
+    });
+    /** The plot's own area, in pixels: what its margins leave inside its box. */
+    contentBox = $derived.by(() => this.numeric.contentBox(this.box.width, this.box.height));
+    /**
+     * Where something of `size` sits next to `point`, on its preferred side
+     * per axis, without leaving the plot's box - see {@link Box.placeNear}.
+     */
+    place(size, point, anchor) {
+        return size.placeNear(point, anchor, this.box);
+    }
+    /**
+     * Changes whenever the labels' margins move after mount, which svelteplot
+     * only takes on a remount. The same margins read back from `settle` keep it.
+     */
+    remountKey = $derived.by(() => JSON.stringify(this.#labels ?? null));
+}

package/dist/layout/plot/Core.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { PlotInteraction } from '../interaction/PlotInteraction.svelte';
+	import BasePlotLayout from '../base/BasePlotLayout.svelte';
+	import { validateSegments } from '../../plots/utils/segments';
+	import type { Pipeline } from '../../phases/Pipeline';
+	import type { SegmentsConfig, MarginConfig } from '../../types/plots/props';
+	import type { FacetStageState } from '../../types/phases';
+
+	/**
+	 * What every axis plot kind renders for one slice of its rows: its props
+	 * run through the plot's `pipeline`, and the state that comes out drawn by
+	 * `BasePlotLayout`. It sits under the plot's `Figure`, which provides the
+	 * legend's toggles and the hover its phases read.
+	 */
+	type Props = {
+		width: number;
+		height: number;
+		styles?: object;
+		segments?: SegmentsConfig<never>;
+		markers?: { type: string }[];
+		scales?: object;
+		margins?: MarginConfig;
+		panelState?: FacetStageState;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		pipeline?: Pipeline<any, any>;
+		data?: TData[];
+		[prop: string]: unknown;
+	};
+
+	let {
+		width,
+		height,
+		styles = {},
+		segments = {},
+		markers = [],
+		scales = {},
+		margins = $bindable(),
+		panelState,
+		pipeline,
+		...rest
+	}: Props = $props();
+
+	$effect(() => {
+		validateSegments(segments as never);
+	});
+
+	const cfg = $derived(getConfiguration());
+	const interaction = PlotInteraction.current(() => cfg);
+	const ctx = $derived({ cfg, interaction, range: interaction.legend?.range });
+
+	const plotState = $derived(
+		pipeline!.run(
+			{ ...rest, width, height, styles, segments, markers, scales, margins },
+			ctx,
+			panelState
+		)
+	);
+</script>
+
+<BasePlotLayout {width} {height} state={plotState} bind:margins />

package/dist/layout/plot/Core.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Pipeline } from '../../phases/Pipeline';
+import type { SegmentsConfig, MarginConfig } from '../../types/plots/props';
+import type { FacetStageState } from '../../types/phases';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        [prop: string]: unknown;
+        width: number;
+        height: number;
+        styles?: object;
+        segments?: SegmentsConfig<never>;
+        markers?: {
+            type: string;
+        }[];
+        scales?: object;
+        margins?: MarginConfig;
+        panelState?: FacetStageState;
+        pipeline?: Pipeline<any, any>;
+        data?: TData[];
+    };
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Core: $$IsomorphicComponent;
+type Core<TData extends Record<string, unknown>> = InstanceType<typeof Core<TData>>;
+export default Core;

package/dist/layout/plot/PanelRun.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+	import { LegendState } from '../legend/LegendState.svelte';
+	import type { Snippet } from 'svelte';
+	import type { FacetStageState } from '../../types/phases';
+
+	/**
+	 * Runs a plot's data phases once over `rows`, for every facet panel, under
+	 * the legend in scope, and hands the result to `children`. `frame` is the
+	 * same run over the same rows without the legend: reused while the legend
+	 * omits no series, since only omitting one changes the data phases.
+	 */
+	let {
+		rows,
+		run,
+		frame,
+		children
+	}: {
+		rows: TRow[];
+		run: (rows: TRow[], legend: LegendState | null) => FacetStageState;
+		frame?: FacetStageState;
+		children: Snippet<[FacetStageState]>;
+	} = $props();
+
+	const legend = LegendState.current();
+	const state = $derived(frame && !legend?.omits ? frame : run(rows, legend));
+</script>
+
+{@render children(state)}

package/dist/{charts/heatmap/Chart.svelte.d.ts → layout/plot/PanelRun.svelte.d.ts}

@@ -1,8 +1,12 @@
-import type { Accessor } from '../../types/plots/data/common';
-import type { ChartProps } from '../../types/charts/props';
+import { LegendState } from '../legend/LegendState.svelte';
+import type { Snippet } from 'svelte';
+import type { FacetStageState } from '../../types/phases';
 declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, import("../..").AreaStyle> & {
-        z: Accessor<TRow, number>;
+    props: {
+        rows: TRow[];
+        run: (rows: TRow[], legend: LegendState | null) => FacetStageState;
+        frame?: FacetStageState;
+        children: Snippet<[FacetStageState]>;
     };
     exports: {};
     bindings: "";
@@ -23,6 +27,6 @@ interface $$IsomorphicComponent {
     <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const Chart: $$IsomorphicComponent;
-type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
-export default Chart;
+declare const PanelRun: $$IsomorphicComponent;
+type PanelRun<TRow extends Record<string, unknown>> = InstanceType<typeof PanelRun<TRow>>;
+export default PanelRun;

package/dist/layout/plot/Plot.svelte

@@ -0,0 +1,287 @@
+<script
+	lang="ts"
+	generics="TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase"
+>
+	import type { Component } from 'svelte';
+	import Figure from '../figure/Figure.svelte';
+	import TimelineLayout from '../timeline/TimelineLayout.svelte';
+	import FacetLayout from '../facet/FacetLayout.svelte';
+	import HoverScope from '../hover/HoverScope.svelte';
+	import PanelRun from './PanelRun.svelte';
+	import GenericCore from './Core.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { TimelineState } from '../timeline/TimelineState.svelte';
+	import { HoverState } from '../hover/HoverState.svelte';
+	import { HoverSettings } from '../hover/HoverSettings';
+	import { Interpolation } from '../../utils/Interpolation';
+	import { FacetPanels } from '../../phases/facet/FacetPanels';
+	import { merge } from '../../utils/merge';
+	import { Pipeline } from '../../phases/Pipeline';
+	import { Slice } from './Slice';
+	import type { TooltipProp } from '../../types/layout/tooltip';
+	import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
+	import type { PlotCellContext, PlotCellSnippet, PlotCoreBase } from '../../types/layout/plot';
+	import type { FacetCellContext, FacetConfig } from '../../types/layout/facet';
+	import type { TimelineConfig, TimeValue } from '../../types/layout/timeline';
+	import type { LegendState } from '../legend/LegendState.svelte';
+	import type { AxisPlotDefaults, DataRunState, FacetStageState } from '../../types/phases';
+
+	/**
+	 * Renders a plot's core from its `core` props, inside the plot's
+	 * {@link Figure} (its box, stores and chrome): once, or once per slice of
+	 * its `timeline` and `facet`. `slice` builds the core's props for one
+	 * slice; by default it swaps in the slice's rows, box, margins and shared
+	 * scales. The core is the generic one, which runs the kind's pipeline; a
+	 * kind with its own rendering (a map) passes its `Core`. The `cell`
+	 * snippet draws each slice instead -
+	 * anything that takes `{ data, width, height }`. `defaults` builds the
+	 * kind's defaults - or its own pipeline - once per plot: the {@link Pipeline}
+	 * every core it renders runs, and the plot's hover and timeline defaults. `margins` is
+	 * bindable: an unsliced core reports the margin it settled on. The plot's
+	 * box is its own `width`/`height` or, drawn straight inside a
+	 * `PlotComposer`, a cell (`area`, `inset`).
+	 */
+	let {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Core = GenericCore as Component<any, Record<string, never>, 'margins'>,
+		core,
+		defaults,
+		slice,
+		cell,
+		margins = $bindable(),
+		tooltip,
+		data,
+		width,
+		height,
+		markers,
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet
+	}: PlotChromeConfig & {
+		// A generic plot core can't be typed against `core`'s own row type.
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Core?: Component<any, Record<string, never>, 'margins'>;
+		core?: TCore;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		defaults?: () => AxisPlotDefaults<any, any> | Pipeline<any, any>;
+		slice?: (cell: PlotCellContext<TRow, TScales>) => TCore;
+		cell?: PlotCellSnippet<TRow, TScales>;
+		margins?: MarginConfig;
+		tooltip?: TooltipProp<TRow>;
+		/** The rows `timeline` and `facet` slice. Defaults to `core.data`. */
+		data?: TRow[];
+		width?: number;
+		height?: number;
+		markers?: { type: string }[];
+		timeline?: TimelineConfig<TRow>;
+		facet?: FacetConfig<TRow>;
+	} = $props();
+
+	const cfg = $derived(getConfiguration());
+	// The kind's pipeline, built once per plot: every core it renders runs it.
+	const pipeline = $derived(defaults ? Pipeline.of(defaults()) : undefined);
+	const hoverSettings = $derived(
+		new HoverSettings(
+			tooltip,
+			markers ?? core?.markers,
+			pipeline?.hoverStrategy(core ?? {}, cfg) ?? 'x'
+		)
+	);
+	const tooltipConfig = $derived(hoverSettings.tooltip);
+	const rows = $derived(data ?? (core?.data as TRow[] | undefined));
+
+	// Inside a composer with a timeline, that one drives every panel; otherwise
+	// this plot has one of its own, which its figure draws when it's a player.
+	const outerTimeline = TimelineState.current();
+	const sharedTimeline = outerTimeline?.enabled ? outerTimeline : null;
+	const ownTimeline = sharedTimeline ? null : new TimelineState(() => timeline);
+	ownTimeline?.watch();
+	const timelineState = sharedTimeline ?? ownTimeline;
+	const parentScope = HoverState.scope();
+	const scopeOf = (facetValue: string) => {
+		const parent = parentScope();
+		return parent ? `${parent}/${facetValue}` : facetValue;
+	};
+
+	// How the rows divide into slices: timeline steps and facet panels.
+	const slicing = $derived(new Slice({ rows, timeline, facet, filterMode: pipeline?.filterMode }));
+	// A boolean, so a timeline step re-slicing the same rows invalidates nothing downstream.
+	const sliced = $derived(slicing.sliced);
+	$effect(() => {
+		for (const problem of slicing.problems) console.warn(`Plot: ${problem}`);
+	});
+
+	// With a facet, the kind's data phases run once over every panel (`dataRun`),
+	// and each panel's core runs only the phases after them. The run over every
+	// row, without the legend (the frame), also gives the domains that facets
+	// and timeline steps share.
+	const dataRun = $derived.by(() => {
+		const run = pipeline;
+		if (!sliced || !run?.facets) return undefined;
+		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.
+	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;
+		frame = { inputs, state };
+		return state;
+	});
+	// The domains slices share, from the frame's "sharedScales" phase, keyed by facet panel.
+	const sharedScales = $derived(frameState?.sharedScales);
+
+	const timelineInterpolation = $derived.by(() => {
+		if (!timeline) return undefined;
+		const tween = pipeline?.interpolation<TRow>((core ?? {}) as { data?: TRow[] }, cfg);
+		if (tween) return Interpolation.buildTimeline(timeline.interpolate, tween);
+		return typeof timeline.interpolate === 'object' ? timeline.interpolate : undefined;
+	});
+
+	/** A core's props without `margins`, for a core that binds them instead. */
+	function withoutMargins<T extends object>(props: T): Omit<T, 'margins'> {
+		const rest = { ...props } as T & { margins?: unknown };
+		delete rest.margins;
+		return rest;
+	}
+
+	function buildSliceProps(ctx: PlotCellContext<TRow, TScales>) {
+		return {
+			...core,
+			...(ctx.data ? { data: ctx.data } : {}),
+			width: ctx.width,
+			height: ctx.height,
+			margins: ctx.margins ?? margins,
+			scales: merge(ctx.scales, core?.scales as TScales | undefined),
+			tooltip: ctx.tooltip,
+			...(ctx.panel ? { panelState: ctx.panel } : {})
+		};
+	}
+</script>
+
+<!-- One slice: the kind's core with the slice's rows, box and scales, or the author's own `cell`. -->
+{#snippet sliceCell(ctx: PlotCellContext<TRow, TScales>)}
+	{#if cell}
+		{@render cell(ctx)}
+	{:else if Core && sliced}
+		<Core {...(slice ?? buildSliceProps)(ctx)} {pipeline} />
+	{:else if Core}
+		<Core {...withoutMargins((slice ?? buildSliceProps)(ctx))} bind:margins {pipeline} />
+	{/if}
+{/snippet}
+
+{#snippet facetCell(
+	place: FacetCellContext<TRow>,
+	time: TimeValue | undefined,
+	panels: FacetStageState | undefined
+)}
+	<HoverScope id={scopeOf(place.facetValue)}>
+		{@render sliceCell({
+			data: place.data,
+			width: place.width,
+			height: place.height,
+			margins: place.margins,
+			tooltip: tooltipConfig,
+			scales: slicing.facetScales<TScales>(sharedScales, place),
+			panel: panels
+				? FacetPanels.buildPanelState(panels, slicing.panelKey(place) ?? '')
+				: undefined,
+			keep: slicing.keep({ time, facet: place })
+		})}
+	</HoverScope>
+{/snippet}
+
+{#snippet facetGrid(
+	stepRows: TRow[],
+	w: number,
+	h: number,
+	time: TimeValue | undefined,
+	panels: FacetStageState | undefined
+)}
+	<FacetLayout data={stepRows} {...slicing.layout} width={w} height={h}>
+		{#snippet cell(place)}
+			{@render facetCell(place, time, panels)}
+		{/snippet}
+	</FacetLayout>
+{/snippet}
+
+{#snippet facetBody(
+	stepRows: TRow[] | undefined,
+	w: number,
+	h: number,
+	time: TimeValue | undefined
+)}
+	{#if facet && stepRows && dataRun}
+		<PanelRun
+			rows={stepRows}
+			run={(r, legendInteraction) => dataRun(r, facet, legendInteraction)}
+			frame={stepRows === rows ? frameState : undefined}
+		>
+			{#snippet children(panels)}
+				{@render facetGrid(stepRows, w, h, time, panels)}
+			{/snippet}
+		</PanelRun>
+	{:else if facet && stepRows}
+		{@render facetGrid(stepRows, w, h, time, undefined)}
+	{:else}
+		{@render sliceCell({
+			data: stepRows,
+			width: w,
+			height: h,
+			tooltip: tooltipConfig,
+			scales: slicing.timelineScales<TScales>(sharedScales),
+			keep: slicing.keep({ time })
+		})}
+	{/if}
+{/snippet}
+
+{#snippet body({ width: w, height: h }: { width: number; height: number })}
+	{#if timeline && rows}
+		<TimelineLayout
+			data={rows}
+			accessor={timeline.accessor}
+			dateFormat={timeline.dateFormat}
+			progress={timelineState?.progress ?? timeline.progress ?? 0}
+			values={sharedTimeline ? sharedTimeline.steps : timeline.values}
+			onsteps={ownTimeline ? (found, temporal) => ownTimeline.setSteps(found, temporal) : undefined}
+			orientation={timeline.orientation}
+			show={false}
+			filterMode={slicing.filterMode}
+			interpolate={timelineInterpolation}
+			width={w}
+			height={h}
+		>
+			{#snippet child({ data: stepRows, width: tw, height: th, selectedValue })}
+				{@render facetBody(stepRows, tw, th, selectedValue)}
+			{/snippet}
+		</TimelineLayout>
+	{:else}
+		{@render facetBody(rows, w, h, undefined)}
+	{/if}
+{/snippet}
+
+<Figure
+	width={width ?? core?.width}
+	height={height ?? core?.height}
+	area={core?.area}
+	inset={core?.inset}
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	hoverStrategy={hoverSettings.strategy}
+	hoverSync={hoverSettings.sync}
+	timelineState={ownTimeline}
+	{body}
+/>