@fundar/data-chart-telling 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.4.0] - 2026-10-30
+
+### Added
+
+- `legend.off` in the automatic legend's configuration turns series off from code, as if the reader had clicked them: a list of names (dimmed), or a map to an opacity or to a `dim`, `hide` or `omit` action; a series left out is turned back on. `legend.highlight` is its inverse, keeping the series it names and dimming the rest. A plot with facets can dim a series exactly when no panel shows it.
+
+### Fixed
+
+- Value labels that fit margins measure what reaches past the plot against the area svelteplot lays the plot out by, not against the estimate an `'auto'` margin has until its axes are sized. A label inside the plot could read as overflow in that moment and grow the margins for good, so the same plot drew with different margins from one render to the next.
+
+## [1.3.0] - 2026-10-30
+
+### Added
+
+- `legend.icon` in the configuration sets the icon a discrete legend item draws for its series: `rounded` softens its corners, and `marks` picks the shape by how the series draws (`line`, `dot`, `area`, `bar`, `cell`, `rect` or `geo`), unless the series sets its own `symbol`. A legend item can name its `mark` to choose from it.
+- A `rule` marker takes a list as its `value`, and a `delta` marker a list as its `at`: one line, or one delta, at each position, all with the same style, instead of one marker for each. A delta's `line`, `text` and `dot` can be functions of the position, to style each one on its own.
+- `facet` on a marker or a segment limits it to some facet panels, on every plot kind: a `by` value, a list of them, or `{ row, col }` in a `rows`/`cols` grid. Without it a marker or a segment is drawn in every panel, as before, and a plot with no facet leaves out whatever names one.
+
+### Fixed
+
+- Automatic margins reserve what a plot needs without taking its drawing area: the label of the top y tick is no longer cut off, since an `'auto'` top margin now leaves room for half its height, and margins that grow to fit labels stop growing once they would leave the plot less than a quarter of its box, which kept svelteplot from drawing marks with negative sizes on small plots.
+
 ## [1.2.0] - 2026-10-24
 
 ### Added
@@ -28,6 +50,7 @@ All notable changes to this project are documented here. The format follows [Kee
 ### Changed
 
 - The default palette is Tableau 10, and the default continuous ramp, the timeline and player accents and the connector colors follow it.
+- Plots draw faster: a plot in a facet, a grid or a composer no longer remounts its svelteplot chart each time the margins its labels need settle after mount. `pnpm test:perf` checks that every plot kind draws all the panels of a facet grid within a time budget; it runs before a push but not in CI, where the speed of the machine makes a time limit flaky.
 
 ### Fixed
 

package/README.md

@@ -10,6 +10,7 @@
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/datos-Fundar/data-chart-telling?label=Latest%20Release&display_name=tag&logo=github&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/releases/latest)
 ![GitHub License](https://img.shields.io/github/license/datos-Fundar/data-chart-telling?label=License&logo=github&logoColor=white)
 [![CI](https://img.shields.io/github/actions/workflow/status/datos-Fundar/data-chart-telling/ci.yml?branch=main&label=CI&logo=githubactions&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/actions/workflows/ci.yml)
+[![Storybook](https://img.shields.io/badge/Storybook-live-FF4785?logo=storybook&logoColor=white)](https://datos-fundar.github.io/data-chart-telling/)
 [![CodeQL](https://img.shields.io/github/actions/workflow/status/datos-Fundar/data-chart-telling/codeql.yml?branch=main&label=CodeQL&logo=github&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/actions/workflows/codeql.yml)
 
 ## Introduction
@@ -150,7 +151,7 @@ Start with the concepts; the rest is organised by what you want a plot to do.
 | [Architecture](docs/architecture.md)                           | How a plot is assembled, for contributors                                                    |
 | [Development](docs/development.md)                             | Building, testing, Storybook and publishing                                                  |
 
-Working examples live in [examples/](examples/); the Storybook (`pnpm storybook`) shows every option live.
+Working examples live in [examples/](examples/); the [online Storybook](https://datos-fundar.github.io/data-chart-telling/) (or `pnpm storybook` locally) shows every option live.
 
 ## For LLMs and coding agents
 

package/dist/configuration/config.svelte.js

@@ -92,6 +92,18 @@ export const DEFAULT_CONFIG = {
         titleWeight: 500,
         gap: '0.5rem 2rem',
         swatchSize: '0.9rem',
+        icon: {
+            rounded: false,
+            marks: {
+                line: 'line',
+                dot: 'circle',
+                area: 'square',
+                bar: 'square',
+                cell: 'square',
+                rect: 'square',
+                geo: 'square'
+            }
+        },
         disabledOpacity: 0.12,
         pretty: true,
         seriesTitle: { enabled: true, text: 'Series' },

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

@@ -0,0 +1,40 @@
+import type { FacetTarget } from '../../types/layout/facet';
+import type { SlicePlace } from '../../types/layout/plot';
+import type { FacetPanel } from '../../types/phases';
+/** Where a facet panel sits, as a segment's or a marker's `facet` names it. */
+type PanelPlace = SlicePlace['facet'];
+/**
+ * Limiting a plot's segments and markers to some facet panels: which panels a `facet` names, and each
+ * panel's share of a list of them. A plot with no facet has no panel, so what names one is left out.
+ */
+export declare class FacetScope {
+    /** Where a panel the "facet" phase laid out sits. */
+    static placeOf(panel: FacetPanel): NonNullable<PanelPlace>;
+    /**
+     * Whether something limited to `target` applies at the facet panel `place`. Without a target it
+     * applies everywhere; with one, only to the panels it names, and to no plot that has no facet.
+     */
+    static targets(target: FacetTarget | undefined, place: PanelPlace): boolean;
+    /**
+     * `items` as the facet panel `place` sees them: those that name no facet, or name this one, with
+     * their `facet` taken off. The same list comes back when none names a facet.
+     */
+    static scope<T extends object>(items: T[] | undefined, place: PanelPlace): T[] | undefined;
+    /** A `segments` config as the facet panel `place` sees it: each series' segments, {@link FacetScope.scope}d. */
+    static scopeSegments<T extends object>(segments: Record<string, T[]> | undefined, place: PanelPlace): Record<string, T[]> | undefined;
+    /**
+     * `segments` for a plot whose series are split by facet panel: each segment that names a facet moves
+     * under the key of its series in every panel it names - the id of that series' part there, as
+     * {@link FacetPanels.buildSeriesId} writes it, or `default` for the panel's series without their own -
+     * and loses its `facet`. Segments that name none stay where they were. The same config comes back
+     * when none names a facet.
+     */
+    static distributeSegments<T extends object>(segments: Record<string, T[]> | undefined, panels: FacetPanel[]): Record<string, T[]> | undefined;
+    /**
+     * `markers` for a plot split by facet panel: each marker that names a facet becomes one copy per
+     * panel it names, tagged with that panel ({@link PANEL_KEY}) and without its `facet`, in the marker's
+     * own place in the list. Markers that name none stay as they are, for every panel.
+     */
+    static distributeMarkers<T extends object>(markers: T[] | undefined, panels: FacetPanel[]): T[] | undefined;
+}
+export {};

package/dist/layout/facet/scope.js

@@ -0,0 +1,104 @@
+import { FacetPanels, PANEL_KEY } from '../../phases/facet/FacetPanels';
+/**
+ * Limiting a plot's segments and markers to some facet panels: which panels a `facet` names, and each
+ * panel's share of a list of them. A plot with no facet has no panel, so what names one is left out.
+ */
+export class FacetScope {
+    /** Where a panel the "facet" phase laid out sits. */
+    static placeOf(panel) {
+        return {
+            facetValue: panel.label,
+            ...(panel.row !== undefined ? { row: panel.row } : {}),
+            ...(panel.col !== undefined ? { col: panel.col } : {})
+        };
+    }
+    /**
+     * Whether something limited to `target` applies at the facet panel `place`. Without a target it
+     * applies everywhere; with one, only to the panels it names, and to no plot that has no facet.
+     */
+    static targets(target, place) {
+        if (target === undefined)
+            return true;
+        if (!place)
+            return false;
+        const names = (value) => (Array.isArray(value) ? value : [value]).map(String);
+        if (typeof target === 'object' && !Array.isArray(target)) {
+            const matches = (wanted, actual) => wanted === undefined || (actual !== undefined && names(wanted).includes(actual));
+            return matches(target.row, place.row) && matches(target.col, place.col);
+        }
+        return names(target).includes(place.facetValue);
+    }
+    /**
+     * `items` as the facet panel `place` sees them: those that name no facet, or name this one, with
+     * their `facet` taken off. The same list comes back when none names a facet.
+     */
+    static scope(items, place) {
+        const facetOf = (item) => item.facet;
+        if (!items || items.every((item) => facetOf(item) === undefined))
+            return items;
+        return items
+            .filter((item) => FacetScope.targets(facetOf(item), place))
+            .map((item) => {
+            const rest = { ...item };
+            delete rest.facet;
+            return rest;
+        });
+    }
+    /** A `segments` config as the facet panel `place` sees it: each series' segments, {@link FacetScope.scope}d. */
+    static scopeSegments(segments, place) {
+        if (!segments)
+            return segments;
+        const scoped = Object.entries(segments).map(([series, list]) => [series, FacetScope.scope(list, place) ?? list]);
+        if (scoped.every(([series, list]) => list === segments[series]))
+            return segments;
+        return Object.fromEntries(scoped);
+    }
+    /**
+     * `segments` for a plot whose series are split by facet panel: each segment that names a facet moves
+     * under the key of its series in every panel it names - the id of that series' part there, as
+     * {@link FacetPanels.buildSeriesId} writes it, or `default` for the panel's series without their own -
+     * and loses its `facet`. Segments that name none stay where they were. The same config comes back
+     * when none names a facet.
+     */
+    static distributeSegments(segments, panels) {
+        if (!segments)
+            return segments;
+        const named = Object.values(segments).some((list) => list.some((item) => item.facet !== undefined));
+        if (!named)
+            return segments;
+        const distributed = {};
+        for (const [series, list] of Object.entries(segments)) {
+            for (const item of list) {
+                const { facet, ...rest } = item;
+                if (facet === undefined) {
+                    (distributed[series] ??= []).push(item);
+                    continue;
+                }
+                for (const panel of panels) {
+                    if (!FacetScope.targets(facet, FacetScope.placeOf(panel)))
+                        continue;
+                    (distributed[FacetPanels.buildSeriesId(panel.key, series)] ??= []).push(rest);
+                }
+            }
+        }
+        return distributed;
+    }
+    /**
+     * `markers` for a plot split by facet panel: each marker that names a facet becomes one copy per
+     * panel it names, tagged with that panel ({@link PANEL_KEY}) and without its `facet`, in the marker's
+     * own place in the list. Markers that name none stay as they are, for every panel.
+     */
+    static distributeMarkers(markers, panels) {
+        if (!markers || markers.every((marker) => marker.facet === undefined)) {
+            return markers;
+        }
+        return markers.flatMap((marker) => {
+            const { facet, ...rest } = marker;
+            if (facet === undefined)
+                return [marker];
+            return panels
+                .filter((panel) => FacetScope.targets(facet, FacetScope.placeOf(panel)))
+                .map((panel) => ({ ...rest, [PANEL_KEY]: panel.key }));
+        });
+    }
+}

package/dist/layout/figure/Figure.svelte

@@ -98,6 +98,11 @@
 		legend && typeof legend === 'object' && !Array.isArray(legend) ? legend : undefined
 	);
 
+	const offTargets = $derived(legendState.offTargets(extension));
+	$effect(() => {
+		legendState.setOff(offTargets);
+	});
+
 	/** What the legend shows: the author's sections, the ones its plots read as (with `extension`), or none. */
 	const legendMode = $derived(
 		Array.isArray(legend)

package/dist/layout/legend/DiscreteSymbolIcon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { LegendItem } from '../../types/layout/legend';
-	import type { LineStyle } from '../../types/plots/constants';
+	import type { LineStyle, SymbolType } from '../../types/plots/constants';
 	import { SymbolPath } from '../../utils/SymbolPath';
 
 	/**
@@ -8,16 +9,35 @@
 	 * (`DiscreteSwatchItem` and `DiscreteBadgeItem`) so the two stay in sync.
 	 * `color` is caller-supplied rather than read off `item` - the swatch look
 	 * fills it with the series color, the badge look with its own label color.
-	 * A shape draws as the plot's dot does, fitted to the icon.
+	 * The shape is the item's own `symbol`, or the one `legend.icon.marks` gives
+	 * the way it draws. A shape draws as the plot's dot does, fitted to the icon;
+	 * `legend.icon.rounded` softens its corners.
 	 */
 	let { item, color }: { item: LegendItem; color: string } = $props();
 
+	const cfg = $derived(getConfiguration());
+	const icon = $derived(cfg.legend.icon);
+	const shape = $derived<SymbolType>(
+		item.symbol ?? (item.mark ? icon.marks[item.mark] : undefined) ?? 'square'
+	);
+	const rounded = $derived(icon.rounded);
 	const filled = $derived(item.filled ?? true);
-	const paint = $derived(
-		filled
-			? { fill: color }
-			: { fill: 'none', stroke: color, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' }
+	// A rounded filled shape grows a same-colored stroke with round joins, so it is drawn smaller by that much.
+	const paint = $derived<Record<string, string | number>>(
+		!filled
+			? {
+					fill: 'none',
+					stroke: color,
+					'stroke-width': 1.5,
+					...(rounded ? { 'stroke-linejoin': 'round' } : {}),
+					'vector-effect': 'non-scaling-stroke'
+				}
+			: rounded
+				? { fill: color, stroke: color, 'stroke-width': 1.5, 'stroke-linejoin': 'round' }
+				: { fill: color }
 	);
+	const size = $derived(filled ? (rounded ? 6.5 : 8) : 7);
+	const offset = $derived(!filled ? 1.5 : rounded ? 1.75 : 1);
 
 	function dashArray(style?: LineStyle): string | undefined {
 		switch (style) {
@@ -34,13 +54,7 @@
 </script>
 
 <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
-	{#if item.symbol && item.symbol !== 'line'}
-		<path
-			d={SymbolPath.fitted(item.symbol, filled ? 8 : 7)}
-			transform={filled ? 'translate(1,1)' : 'translate(1.5,1.5)'}
-			{...paint}
-		/>
-	{:else if item.symbol === 'line'}
+	{#if shape === 'line'}
 		<line
 			x1="2"
 			y1="5"
@@ -51,8 +65,18 @@
 			stroke-linecap="round"
 			stroke-dasharray={dashArray(item.lineStyle)}
 		/>
-	{:else}
+	{:else if rounded && filled && shape === 'square'}
+		<rect x="1" y="1" width="8" height="8" rx="2" fill={color} />
+	{:else if rounded && filled && shape === 'triangle'}
+		<path
+			d="M 6 2 L 9 7.5 A 1.5 1.5 0 0 1 7.8 10 L 2.2 10 A 1.5 1.5 0 0 1 1 7.5 L 4 2 A 1.5 1.5 0 0 1 6 2"
+			fill={color}
+			transform="translate(0,-1)"
+		/>
+	{:else if shape === 'square' && filled && !rounded}
 		<rect x="1" y="1" width="8" height="8" fill={color} />
+	{:else}
+		<path d={SymbolPath.fitted(shape, size)} transform="translate({offset},{offset})" {...paint} />
 	{/if}
 </svg>
 

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

@@ -37,6 +37,17 @@ export declare class LegendState {
     turnOn(series: string): void;
     /** Turns `series` off with `action`, or back on. */
     toggle(series: string, action: LegendDisabledAction): void;
+    /**
+     * What `extension`'s `off` and `highlight` turn off, by series name: `off`
+     * as listed, and every other series the plots draw for a `highlight`.
+     */
+    offTargets(extension: Pick<LegendExtension, 'off' | 'highlight'> | undefined): Map<string, LegendDisabledAction>;
+    /**
+     * Turns off exactly `targets`, turning back on what an earlier call turned
+     * off and this one leaves out. A series the reader turned off, or turned
+     * off any other way, is left alone.
+     */
+    setOff(targets: Map<string, LegendDisabledAction>): void;
     /** Whether any series is off with `'omit'` - which changes the plot's own rows, not just how they draw. */
     get omits(): boolean;
     /** `series` without those turned off with `'omit'`. */

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

@@ -1,5 +1,5 @@
 import { getContext, setContext, untrack } from 'svelte';
-import { SvelteMap } from 'svelte/reactivity';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { MarkerKinds } from '../../markers/MarkerKinds';
 import { LegendChannels } from './LegendChannels';
@@ -20,6 +20,8 @@ export class LegendState {
     /** The narrowed range of the first interactive continuous section, or `null`. */
     range = $state(null);
     #sources = new SvelteMap();
+    /** What {@link setOff} last turned off, to turn back on what it no longer lists. */
+    #managed = new SvelteMap();
     /** The enclosing figure's legend, or `null` outside one. Call during component init. */
     static current() {
         return getContext(LEGEND_KEY) ?? null;
@@ -67,6 +69,56 @@ export class LegendState {
         else
             this.turnOff(series, action);
     }
+    /**
+     * What `extension`'s `off` and `highlight` turn off, by series name: `off`
+     * as listed, and every other series the plots draw for a `highlight`.
+     */
+    offTargets(extension) {
+        const targets = new SvelteMap();
+        if (extension?.highlight !== undefined) {
+            const kept = new SvelteSet([extension.highlight].flat());
+            for (const entry of this.entries) {
+                if (entry.type === 'series' && !kept.has(entry.name))
+                    targets.set(entry.name, { mode: 'dim' });
+            }
+        }
+        const off = extension?.off;
+        const listed = Array.isArray(off)
+            ? off.map((name) => [name, undefined])
+            : Object.entries(off ?? {});
+        for (const [name, what] of listed) {
+            targets.set(name, typeof what === 'number'
+                ? { mode: 'dim', style: { opacity: what } }
+                : (what ?? { mode: 'dim' }));
+        }
+        return targets;
+    }
+    /**
+     * Turns off exactly `targets`, turning back on what an earlier call turned
+     * off and this one leaves out. A series the reader turned off, or turned
+     * off any other way, is left alone.
+     */
+    setOff(targets) {
+        untrack(() => {
+            const ours = (name) => {
+                const current = this.actionOf(name);
+                const set = this.#managed.get(name);
+                return current && set && JSON.stringify(current) === JSON.stringify(set);
+            };
+            for (const name of this.#managed.keys()) {
+                if (!targets.has(name) && ours(name))
+                    this.turnOn(name);
+            }
+            for (const [name, action] of targets) {
+                if (this.isOff(name) && !ours(name))
+                    continue;
+                if (ours(name) && JSON.stringify(this.#managed.get(name)) === JSON.stringify(action))
+                    continue;
+                this.turnOff(name, action);
+            }
+            this.#managed = new SvelteMap(targets);
+        });
+    }
     /** Whether any series is off with `'omit'` - which changes the plot's own rows, not just how they draw. */
     get omits() {
         return [...this.disabled.values()].some((action) => action.mode === 'omit');
@@ -340,11 +392,9 @@ export class LegendState {
             ...(entry.label ? { label: entry.label } : {}),
             color: entry.color,
             ...(entry.filled === false ? { filled: false } : {}),
-            ...(entry.symbol || entry.mark === 'dot'
-                ? { symbol: entry.symbol ?? 'circle' }
-                : entry.mark === 'line'
-                    ? { symbol: 'line', lineStyle: entry.lineStyle ?? 'solid' }
-                    : {})
+            ...(entry.mark ? { mark: entry.mark } : {}),
+            ...(entry.symbol ? { symbol: entry.symbol } : {}),
+            ...(entry.mark === 'line' ? { lineStyle: entry.lineStyle ?? 'solid' } : {})
         };
     }
 }

package/dist/layout/margins/PlotMargins.svelte.d.ts

@@ -55,9 +55,12 @@ export declare class PlotMargins {
     static current(): PlotMargins | 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.
+     * the plot's area or `deps` change - and reports how far it reaches past
+     * that area: to `onOverflow`, and, when `grow` holds, into the room the
+     * margins grow by. The area is where svelteplot draws the marks (see
+     * {@link follow}), not the {@link contentBox}'s estimate: an `'auto'` side
+     * is only its estimate until svelteplot sizes its axes, and what a label
+     * reaches past that is no overflow. Call during component init.
      */
     watch(el: () => SVGGraphicsElement | undefined, options: {
         grow?: () => boolean;
@@ -68,8 +71,9 @@ export declare class PlotMargins {
     reportOverflow(overflow: Margins): void;
     /**
      * 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.
+     * only readable inside its `<Plot>` - to measure against the area they
+     * leave ({@link watch}), and reports them to the enclosing aligned grid
+     * cell, if any. Call during the init of a component inside it.
      */
     follow(plot: {
         options: Record<string, unknown>;

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

@@ -25,6 +25,8 @@ export class PlotMargins {
     #measured = $state.raw(Margins.ZERO);
     /** The sides the labels settled on, as last handed to `settle`. */
     #settled;
+    /** What svelteplot's own `<Plot>` lays the plot out by, once {@link follow} is handed it. */
+    #plot = $state.raw();
     constructor(inputs) {
         this.#inputs = inputs;
         setContext(PLOT_MARGINS_KEY, this);
@@ -54,14 +56,17 @@ export class PlotMargins {
     }
     /**
      * 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.
+     * the plot's area or `deps` change - and reports how far it reaches past
+     * that area: to `onOverflow`, and, when `grow` holds, into the room the
+     * margins grow by. The area is where svelteplot draws the marks (see
+     * {@link follow}), not the {@link contentBox}'s estimate: an `'auto'` side
+     * is only its estimate until svelteplot sizes its axes, and what a label
+     * reaches past that is no overflow. Call during component init.
      */
     watch(el, options) {
         $effect(() => {
             const element = el();
-            const bounds = this.contentBox;
+            const bounds = this.#plotArea ?? this.contentBox;
             options.deps?.();
             if (!element)
                 return;
@@ -113,10 +118,12 @@ export class PlotMargins {
     }
     /**
      * 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.
+     * only readable inside its `<Plot>` - to measure against the area they
+     * leave ({@link watch}), and reports them to the enclosing aligned grid
+     * cell, if any. Call during the init of a component inside it.
      */
     follow(plot) {
+        this.#plot = plot;
         const cell = this.#cell;
         if (!cell)
             return;
@@ -148,8 +155,39 @@ export class PlotMargins {
             if (held !== undefined || grown !== undefined)
                 out[side] = Math.max(held ?? 0, grown ?? 0);
         }
+        for (const [a, b, extent] of [
+            ['left', 'right', width],
+            ['top', 'bottom', height]
+        ]) {
+            PlotMargins.#keepContent(out, [a, b], extent, author, estimate);
+        }
         return out;
     });
+    /** The share of a box's extent its margins always leave to the plot's own area. */
+    static #MIN_CONTENT = 0.25;
+    /**
+     * Cuts the growth of two opposite sides of `out`, in proportion, until they
+     * leave the plot's area its minimum share of `extent` - a negative area makes
+     * svelteplot draw marks with negative sizes. A side never goes below the
+     * estimate, and a side the author fixed is left alone.
+     */
+    static #keepContent(out, sides, extent, author, estimate) {
+        const fixed = (side) => {
+            const own = author?.[side];
+            return typeof own === 'number' ? own : estimate[side];
+        };
+        const used = (side) => out[side] ?? fixed(side);
+        const over = used(sides[0]) + used(sides[1]) - extent * (1 - PlotMargins.#MIN_CONTENT);
+        const room = sides.map((side) => out[side] === undefined ? 0 : Math.max(0, out[side] - estimate[side]));
+        const total = room[0] + room[1];
+        if (over <= 0 || total <= 0)
+            return;
+        const cut = Math.min(over, total);
+        sides.forEach((side, i) => {
+            if (out[side] !== undefined)
+                out[side] -= (cut * room[i]) / total;
+        });
+    }
     /** The author's margins, with the room labels need. */
     #labels = $derived.by(() => {
         const author = this.#inputs.author();
@@ -205,6 +243,27 @@ export class PlotMargins {
     });
     /** 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));
+    /**
+     * The plot's own area as svelteplot lays it out, by the margins it settled on, or `undefined` until
+     * the plot is followed. {@link contentBox} reads an `'auto'` side as its estimate, which is not where
+     * svelteplot draws the marks until its axes are sized.
+     */
+    #plotArea = $derived.by(() => {
+        const options = this.#plot?.options;
+        if (!options)
+            return undefined;
+        const sides = [
+            options.marginTop,
+            options.marginRight,
+            options.marginBottom,
+            options.marginLeft
+        ];
+        if (sides.some((side) => typeof side !== 'number' || !Number.isFinite(side)))
+            return undefined;
+        const [top, right, bottom, left] = sides;
+        const { width, height } = this.#inputs.size();
+        return new Margins(top, right, bottom, left).contentBox(width, 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}.

package/dist/layout/plot/Plot.svelte

@@ -18,6 +18,7 @@
 	import { merge } from '../../utils/merge';
 	import { Pipeline } from '../../phases/Pipeline';
 	import { Slice } from './Slice';
+	import { FacetScope } from '../facet/scope';
 	import type { TooltipProp } from '../../types/layout/tooltip';
 	import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
 	import type { PlotCellContext, PlotCellSnippet, PlotCoreBase } from '../../types/layout/plot';
@@ -153,6 +154,24 @@
 		return rest;
 	}
 
+	/**
+	 * The props of the core that draws the slice `ctx`: the kind's `slice`, or the plot's own, with the
+	 * `markers` and `segments` that name a facet left to the panels they name. The data phases already
+	 * handed them to their panels; this is for the cores that read them from their own props.
+	 */
+	function coreProps(ctx: PlotCellContext<TRow, TScales>) {
+		const props = (slice ?? buildSliceProps)(ctx) as Record<string, unknown>;
+		const { markers, segments } = props as {
+			markers?: object[];
+			segments?: Record<string, object[]>;
+		};
+		return {
+			...props,
+			...(markers ? { markers: FacetScope.scope(markers, ctx.facet) } : {}),
+			...(segments ? { segments: FacetScope.scopeSegments(segments, ctx.facet) } : {})
+		};
+	}
+
 	function buildSliceProps(ctx: PlotCellContext<TRow, TScales>) {
 		return {
 			...core,
@@ -172,9 +191,9 @@
 	{#if cell}
 		{@render cell(ctx)}
 	{:else if Core && sliced}
-		<Core {...(slice ?? buildSliceProps)(ctx)} {pipeline} />
+		<Core {...coreProps(ctx)} {pipeline} />
 	{:else if Core}
-		<Core {...withoutMargins((slice ?? buildSliceProps)(ctx))} bind:margins {pipeline} />
+		<Core {...withoutMargins(coreProps(ctx))} bind:margins {pipeline} />
 	{/if}
 {/snippet}
 
@@ -194,6 +213,7 @@
 			panel: panels
 				? FacetPanels.buildPanelState(panels, slicing.panelKey(place) ?? '')
 				: undefined,
+			facet: place,
 			keep: slicing.keep({ time, facet: place })
 		})}
 	</HoverScope>

package/dist/layout/scales/ScalesLayout.svelte

@@ -243,6 +243,27 @@
 		$autoMarginLeft.delete(marginId);
 	});
 
+	// The top y tick's label is centered on the plot's top edge, so it reaches
+	// half its height above it - more than svelteplot's own 5px `'auto'` top margin.
+	const { autoMarginTop } = getContext<{ autoMarginTop: Writable<Map<string, number>> }>(
+		'svelteplot/autoMargins'
+	);
+	const tickMarginId = `dct-y-tick-${Math.random().toString(36).slice(2)}`;
+	$effect(() => {
+		const wanted =
+			(scales?.y?.axisDisplay ?? 'visible') === 'visible'
+				? Math.ceil(cfg.axis.fontSize / 2) + 2
+				: undefined;
+		untrack(() => {
+			if (wanted === undefined) $autoMarginTop.delete(tickMarginId);
+			else if ($autoMarginTop.get(tickMarginId) !== wanted)
+				$autoMarginTop.set(tickMarginId, wanted);
+		});
+	});
+	$effect(() => () => {
+		$autoMarginTop.delete(tickMarginId);
+	});
+
 	// An x label centred on the domain's end reaches past the plot's right side; an `'auto'` right margin takes that much room.
 	let xAxisEl: SVGGElement | undefined = $state();
 	const { autoMarginRight } = getContext<{ autoMarginRight: Writable<Map<string, number>> }>(