@fjader/svelte 0.2.3 → 0.2.5

package/README.md

@@ -16,12 +16,14 @@ pip install fjader                 # Python: marimo and Jupyter
 pip install "fjader[streamlit]"    # Python: Streamlit
 ```
 
+`@uwdata/mosaic-sql` is a peer dependency (0.34 or 0.35), so your app and fjader share one copy. Two copies would not recognise each other's expressions: an aggregate such as `sum(...)` written with one would be misread by the other.
+
 fjader needs Chrome 149 or later, or another Chromium browser on that version. It relies on two recent features other browsers don't ship yet: WebGPU's `immediate_address_space`, through which every chart passes its scales to the shaders (so every zoom and pan uses it), and the `Temporal` API, used for calendar offsets. There is no fallback renderer.
 
 Three things to know before using it in a deployed app:
 
 - **Data goes to the browser in full.** The Python widget and the Streamlit component send every column of a DataFrame to the browser, where DuckDB-WASM queries it. Anyone viewing the app can extract it, so pass only the columns you mean to show. In Jupyter, saved widget state can also store the data in the notebook file.
-- **DuckDB-WASM loads from jsDelivr at runtime.** The browser fetches it from the CDN, so locked-down networks that block it cannot render charts.
+- **DuckDB-WASM loads from jsDelivr at runtime by default.** A Svelte app can serve the files itself with `initFjader({ bundles })`, or pass a DuckDB instance it already has with `initFjader(connectionFrom(conn))`. `Fjader.render()`, the Python widget and Streamlit always load from the CDN, so locked-down networks that block it cannot render charts with them.
 - **Specs are trusted input.** A spec's `{ "sql": "…" }` field runs as raw SQL in the viewer's DuckDB-WASM. Don't build specs from untrusted input.
 
 ## Svelte

package/dist/animation/EntranceGate.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Holds a chart's entrance until its marks have their first data.
+ *
+ * Without it the entrance started on the FIRST mark to land, which had two
+ * visible costs. Later marks widened the domain while the chart was entering,
+ * so its axes animated to the wider extent: a small version of the camera
+ * move the entrance replaced. And a mark landing mid-entrance joined it part
+ * way. Held, every mark's extent is in before anything shows, the scales snap
+ * to the union, and the chart enters once, whole.
+ *
+ * A data mark HOLDS when it mounts and RELEASES when its first result has
+ * registered its domains, when its query fails, or when it unmounts. A mark
+ * the author knows to be slow can opt out (`holdsEntrance={false}`): it then
+ * joins the entrance where it is, or appears after it.
+ *
+ * Nothing needs hiding while a chart waits: before its entrance starts the
+ * chart's entrance value is 0, so marks that have landed draw at zero height
+ * or zero opacity.
+ *
+ * OPEN is one-way. The gate opens when its last hold is released, when the
+ * coordinator starts the entrance (a chart that never had a hold), or on a
+ * timeout. The timeout is armed by the FIRST release rather than the first
+ * hold: the wait for DuckDB to start, which can take seconds on a cold page,
+ * is not a slow mark, and a chart that has not answered at all has nothing to
+ * show yet anyway. A gate stuck closed would leave a chart invisible, which is
+ * far worse than a late mark appearing after the rest.
+ */
+/** How long the rest of a chart waits for its slowest mark, from its fastest. */
+export declare const ENTRANCE_HOLD_TIMEOUT_MS = 1000;
+export declare class EntranceGate {
+    #private;
+    /** True once the gate has opened. One-way. */
+    get opened(): boolean;
+    /**
+     * Whether the chart may enter: open, or nothing is holding it. The second
+     * covers a chart with no data marks, which the coordinator then opens.
+     */
+    get canEnter(): boolean;
+    /** A mark waits on its first data. Ignored once the gate has opened. */
+    hold(id: string): void;
+    /** A mark has its first data, failed, or left. Unknown ids are ignored. */
+    release(id: string): void;
+    /** Open now, and tell whoever is waiting. Idempotent. */
+    open(): void;
+    /**
+     * Run `fn` when the gate opens: at once if it already has. Returns an
+     * unsubscribe, for a listener torn down first.
+     */
+    onOpen(fn: () => void): () => void;
+    /** Drop the timer and listeners, for a chart being torn down. */
+    destroy(): void;
+}

package/dist/animation/EntranceGate.js

@@ -0,0 +1,93 @@
+/**
+ * Holds a chart's entrance until its marks have their first data.
+ *
+ * Without it the entrance started on the FIRST mark to land, which had two
+ * visible costs. Later marks widened the domain while the chart was entering,
+ * so its axes animated to the wider extent: a small version of the camera
+ * move the entrance replaced. And a mark landing mid-entrance joined it part
+ * way. Held, every mark's extent is in before anything shows, the scales snap
+ * to the union, and the chart enters once, whole.
+ *
+ * A data mark HOLDS when it mounts and RELEASES when its first result has
+ * registered its domains, when its query fails, or when it unmounts. A mark
+ * the author knows to be slow can opt out (`holdsEntrance={false}`): it then
+ * joins the entrance where it is, or appears after it.
+ *
+ * Nothing needs hiding while a chart waits: before its entrance starts the
+ * chart's entrance value is 0, so marks that have landed draw at zero height
+ * or zero opacity.
+ *
+ * OPEN is one-way. The gate opens when its last hold is released, when the
+ * coordinator starts the entrance (a chart that never had a hold), or on a
+ * timeout. The timeout is armed by the FIRST release rather than the first
+ * hold: the wait for DuckDB to start, which can take seconds on a cold page,
+ * is not a slow mark, and a chart that has not answered at all has nothing to
+ * show yet anyway. A gate stuck closed would leave a chart invisible, which is
+ * far worse than a late mark appearing after the rest.
+ */
+/** How long the rest of a chart waits for its slowest mark, from its fastest. */
+export const ENTRANCE_HOLD_TIMEOUT_MS = 1000;
+export class EntranceGate {
+    #holds = new Set();
+    #opened = false;
+    #timer = null;
+    #listeners = new Set();
+    /** True once the gate has opened. One-way. */
+    get opened() {
+        return this.#opened;
+    }
+    /**
+     * Whether the chart may enter: open, or nothing is holding it. The second
+     * covers a chart with no data marks, which the coordinator then opens.
+     */
+    get canEnter() {
+        return this.#opened || this.#holds.size === 0;
+    }
+    /** A mark waits on its first data. Ignored once the gate has opened. */
+    hold(id) {
+        if (this.#opened)
+            return;
+        this.#holds.add(id);
+    }
+    /** A mark has its first data, failed, or left. Unknown ids are ignored. */
+    release(id) {
+        if (!this.#holds.delete(id))
+            return;
+        if (this.#holds.size === 0)
+            this.open();
+        else
+            this.#timer ??= setTimeout(() => this.open(), ENTRANCE_HOLD_TIMEOUT_MS);
+    }
+    /** Open now, and tell whoever is waiting. Idempotent. */
+    open() {
+        if (this.#opened)
+            return;
+        this.#opened = true;
+        this.#holds.clear();
+        if (this.#timer !== null)
+            clearTimeout(this.#timer);
+        this.#timer = null;
+        for (const fn of this.#listeners)
+            fn();
+        this.#listeners.clear();
+    }
+    /**
+     * Run `fn` when the gate opens: at once if it already has. Returns an
+     * unsubscribe, for a listener torn down first.
+     */
+    onOpen(fn) {
+        if (this.#opened) {
+            fn();
+            return () => { };
+        }
+        this.#listeners.add(fn);
+        return () => this.#listeners.delete(fn);
+    }
+    /** Drop the timer and listeners, for a chart being torn down. */
+    destroy() {
+        if (this.#timer !== null)
+            clearTimeout(this.#timer);
+        this.#timer = null;
+        this.#listeners.clear();
+    }
+}

package/dist/animation/TransitionClock.d.ts

@@ -1,3 +1,47 @@
+/**
+ * Stiffness for a data-update transition, and how to think about changing it.
+ *
+ * The spring is critically damped, so it never overshoots and the only knob is
+ * how fast it converges: `omega = sqrt(stiffness)`, and it is within about a
+ * percent of its destination after roughly `5 / omega` seconds. So 120 settles
+ * in ~0.46s, 240 in ~0.32s, 400 in ~0.25s. Quadrupling the number halves the
+ * time; it is not a linear dial.
+ *
+ * ONE NUMBER FOR SLOT AND VALUE, deliberately. A bar's position and its height
+ * share a clock so they arrive together — separate springs desynchronise on a
+ * retarget and the bar reaches its rank visibly before or after it finishes
+ * growing. Wanting them to differ is a design change, not a constant.
+ *
+ * Note this is also the floor on how responsive a drag feels: `t` is
+ * normalised, so settle DURATION is independent of distance and a one-pixel
+ * correction takes as long as a full reorder.
+ */
+export declare const TRANSITION_STIFFNESS = 240;
+/**
+ * Stiffness for an entrance FADE: softer than a transition, since opacity has
+ * no distance to travel and a fast fade reads as a pop. From rest it is a
+ * gentle S-curve: 30% at 100 ms, 64% at 200 ms, 96% by 450 ms.
+ */
+export declare const ENTRANCE_FADE_STIFFNESS = 120;
+/**
+ * Stiffness for an entrance's GROWTH, launched at its own speed (see
+ * `restartEaseOut`): 1 − e^(−ωt), 67% at 100 ms, 89% at 200 ms, 96% by 300 ms.
+ * Slower than a data transition: growing from nothing is the chart's first
+ * statement of magnitude, and at TRANSITION_STIFFNESS it was over before the
+ * eye had settled on it.
+ */
+export declare const ENTRANCE_GROW_STIFFNESS = 120;
+/** Sub-pixel, so rest is declared when the difference stops being visible. */
+export declare const TRANSITION_PRECISION = 0.0005;
+/**
+ * The animation loop, as a clock sees it. The coordinator's fixed-timestep loop
+ * is the one implementation; structurally typed so this module does not import
+ * the GPU layer.
+ */
+export interface ClockLoop {
+    addAnimatedSource(source: TransitionClock): void;
+    removeAnimatedSource(source: TransitionClock): void;
+}
 /**
  * One data-update transition: a spring driving a normalised `t` from 0 to 1.
  *
@@ -36,36 +80,6 @@
  * restarting it every frame makes this consumer re-fold every frame, so it
  * converges by decelerating rather than along the curve the spring intended.
  */
-/**
- * Stiffness for a data-update transition, and how to think about changing it.
- *
- * The spring is critically damped, so it never overshoots and the only knob is
- * how fast it converges: `omega = sqrt(stiffness)`, and it is within about a
- * percent of its destination after roughly `5 / omega` seconds. So 120 settles
- * in ~0.46s, 240 in ~0.32s, 400 in ~0.25s. Quadrupling the number halves the
- * time; it is not a linear dial.
- *
- * ONE NUMBER FOR SLOT AND VALUE, deliberately. A bar's position and its height
- * share a clock so they arrive together — separate springs desynchronise on a
- * retarget and the bar reaches its rank visibly before or after it finishes
- * growing. Wanting them to differ is a design change, not a constant.
- *
- * Note this is also the floor on how responsive a drag feels: `t` is
- * normalised, so settle DURATION is independent of distance and a one-pixel
- * correction takes as long as a full reorder.
- */
-export declare const TRANSITION_STIFFNESS = 240;
-/** Sub-pixel, so rest is declared when the difference stops being visible. */
-export declare const TRANSITION_PRECISION = 0.0005;
-/**
- * The animation loop, as a clock sees it. The coordinator's fixed-timestep loop
- * is the one implementation; structurally typed so this module does not import
- * the GPU layer.
- */
-export interface ClockLoop {
-    addAnimatedSource(source: TransitionClock): void;
-    removeAnimatedSource(source: TransitionClock): void;
-}
 export declare class TransitionClock {
     #private;
     /**
@@ -106,6 +120,17 @@ export declare class TransitionClock {
      * returns — the same end state the loop would reach, reached now.
      */
     restart(): void;
+    /**
+     * Begin from 0 at the spring's own speed, ω, for an ENTRANCE.
+     *
+     * From rest a critically damped spring starts slowly: its position grows as
+     * t² for the first frames, about 18% after 50 ms at the default stiffness.
+     * Between two states that is the right shape; for something appearing it
+     * reads as lag. Launched at ω the same spring follows 1 − e^(−ωt) exactly:
+     * an exponential ease-out, 54% after 50 ms, still never overshooting, and
+     * settling in the same time.
+     */
+    restartEaseOut(): void;
     /**
      * Leave the loop without settling, for an owner being torn down. Nothing
      * reads the clock afterwards, so there is nothing to land.
@@ -153,6 +178,12 @@ export declare class TransitionClock {
      * then tells the owner — which may restart it, and rejoin, from `onRest`.
      */
     _markAtRest(): void;
+    /**
+     * End the transition now, as the loop would at rest: off the loop, `t` on
+     * 1, `onRest` called. For an update that lands without animating (a
+     * catch-up result), including one that lands mid-flight.
+     */
+    finish(): void;
     /**
      * Whether the loop can stop driving this.
      *

package/dist/animation/TransitionClock.js

@@ -1,4 +1,47 @@
 import { Spring } from './Spring';
+/**
+ * Stiffness for a data-update transition, and how to think about changing it.
+ *
+ * The spring is critically damped, so it never overshoots and the only knob is
+ * how fast it converges: `omega = sqrt(stiffness)`, and it is within about a
+ * percent of its destination after roughly `5 / omega` seconds. So 120 settles
+ * in ~0.46s, 240 in ~0.32s, 400 in ~0.25s. Quadrupling the number halves the
+ * time; it is not a linear dial.
+ *
+ * ONE NUMBER FOR SLOT AND VALUE, deliberately. A bar's position and its height
+ * share a clock so they arrive together — separate springs desynchronise on a
+ * retarget and the bar reaches its rank visibly before or after it finishes
+ * growing. Wanting them to differ is a design change, not a constant.
+ *
+ * Note this is also the floor on how responsive a drag feels: `t` is
+ * normalised, so settle DURATION is independent of distance and a one-pixel
+ * correction takes as long as a full reorder.
+ */
+export const TRANSITION_STIFFNESS = 240;
+/**
+ * Stiffness for an entrance FADE: softer than a transition, since opacity has
+ * no distance to travel and a fast fade reads as a pop. From rest it is a
+ * gentle S-curve: 30% at 100 ms, 64% at 200 ms, 96% by 450 ms.
+ */
+export const ENTRANCE_FADE_STIFFNESS = 120;
+/**
+ * Stiffness for an entrance's GROWTH, launched at its own speed (see
+ * `restartEaseOut`): 1 − e^(−ωt), 67% at 100 ms, 89% at 200 ms, 96% by 300 ms.
+ * Slower than a data transition: growing from nothing is the chart's first
+ * statement of magnitude, and at TRANSITION_STIFFNESS it was over before the
+ * eye had settled on it.
+ */
+export const ENTRANCE_GROW_STIFFNESS = 120;
+/** Sub-pixel, so rest is declared when the difference stops being visible. */
+export const TRANSITION_PRECISION = 0.0005;
+/**
+ * The empty redraw list, shared.
+ *
+ * A clock whose owner supplies no charts is asked for this on every frame the
+ * loop drives it, so a fresh array here was an allocation per frame for a
+ * reason that never changes. Never mutated: the loop only reads it.
+ */
+const NO_CHARTS = [];
 /**
  * One data-update transition: a spring driving a normalised `t` from 0 to 1.
  *
@@ -37,35 +80,6 @@ import { Spring } from './Spring';
  * restarting it every frame makes this consumer re-fold every frame, so it
  * converges by decelerating rather than along the curve the spring intended.
  */
-/**
- * Stiffness for a data-update transition, and how to think about changing it.
- *
- * The spring is critically damped, so it never overshoots and the only knob is
- * how fast it converges: `omega = sqrt(stiffness)`, and it is within about a
- * percent of its destination after roughly `5 / omega` seconds. So 120 settles
- * in ~0.46s, 240 in ~0.32s, 400 in ~0.25s. Quadrupling the number halves the
- * time; it is not a linear dial.
- *
- * ONE NUMBER FOR SLOT AND VALUE, deliberately. A bar's position and its height
- * share a clock so they arrive together — separate springs desynchronise on a
- * retarget and the bar reaches its rank visibly before or after it finishes
- * growing. Wanting them to differ is a design change, not a constant.
- *
- * Note this is also the floor on how responsive a drag feels: `t` is
- * normalised, so settle DURATION is independent of distance and a one-pixel
- * correction takes as long as a full reorder.
- */
-export const TRANSITION_STIFFNESS = 240;
-/** Sub-pixel, so rest is declared when the difference stops being visible. */
-export const TRANSITION_PRECISION = 0.0005;
-/**
- * The empty redraw list, shared.
- *
- * A clock whose owner supplies no charts is asked for this on every frame the
- * loop drives it, so a fresh array here was an allocation per frame for a
- * reason that never changes. Never mutated: the loop only reads it.
- */
-const NO_CHARTS = [];
 export class TransitionClock {
     #spring;
     #precision;
@@ -149,6 +163,20 @@ export class TransitionClock {
             this.#loop.addAnimatedSource(this);
         }
     }
+    /**
+     * Begin from 0 at the spring's own speed, ω, for an ENTRANCE.
+     *
+     * From rest a critically damped spring starts slowly: its position grows as
+     * t² for the first frames, about 18% after 50 ms at the default stiffness.
+     * Between two states that is the right shape; for something appearing it
+     * reads as lag. Launched at ω the same spring follows 1 − e^(−ωt) exactly:
+     * an exponential ease-out, 54% after 50 ms, still never overshooting, and
+     * settling in the same time.
+     */
+    restartEaseOut() {
+        this.restart();
+        this.#spring.velocity = this.#spring.omega;
+    }
     /**
      * Leave the loop without settling, for an owner being torn down. Nothing
      * reads the clock afterwards, so there is nothing to land.
@@ -218,6 +246,16 @@ export class TransitionClock {
         this.settle();
         this.#onRest?.();
     }
+    /**
+     * End the transition now, as the loop would at rest: off the loop, `t` on
+     * 1, `onRest` called. For an update that lands without animating (a
+     * catch-up result), including one that lands mid-flight.
+     */
+    finish() {
+        if (this.#running)
+            this.#loop?.removeAnimatedSource(this);
+        this._markAtRest();
+    }
     /**
      * Whether the loop can stop driving this.
      *

package/dist/animation/transition-log.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A debug record of every transition that starts, and whether it animates.
+ *
+ * For test pages that check an animation claim, such as "a chart catching up
+ * on its return animates nothing of its own", without reading it off the
+ * screen: a spring that plays off screen and two springs to one place both
+ * look like nothing happened. Reported where a transition actually starts:
+ *
+ * - `domain`: a continuous scale's domain (data extents and fitDomain alike)
+ * - `morph`: a mark's morphed values (bars, dots on a band axis)
+ * - `slots`: a band axis's categories moving to new slots
+ *
+ * The cause is not recorded: the emitters do not know it, and the page does
+ * (it knows what it just did).
+ *
+ * MODULE-GLOBAL: one log per page (per module instance), not per coordinator.
+ * Two coordinators in one document (notebook cells, Streamlit iframes sharing
+ * it) see each other's records; filter by chart id. Fine for a debug hook.
+ *
+ * Free while nothing observes: each emitter asks `transitionsObserved()`
+ * before building a record.
+ */
+export type TransitionPart = 'domain' | 'morph' | 'slots';
+export interface TransitionRecord {
+    part: TransitionPart;
+    /** True when it landed at once, false when it animates. */
+    snap: boolean;
+    /** The charts it moves something in. */
+    charts: readonly string[];
+    /** What moved: a scale name, a renderer label. */
+    label: string;
+    /** performance.now() */
+    time: number;
+}
+/** Listen to every transition started; returns the unsubscribe. */
+export declare function observeTransitions(listener: (record: TransitionRecord) => void): () => void;
+/** Whether anything listens: emitters check this before building a record. */
+export declare function transitionsObserved(): boolean;
+export declare function noteTransition(part: TransitionPart, snap: boolean, 
+/** Read untracked, now: the emitter is usually inside an effect. */
+charts: () => readonly string[], label: string): void;

package/dist/animation/transition-log.js

@@ -0,0 +1,57 @@
+/**
+ * A debug record of every transition that starts, and whether it animates.
+ *
+ * For test pages that check an animation claim, such as "a chart catching up
+ * on its return animates nothing of its own", without reading it off the
+ * screen: a spring that plays off screen and two springs to one place both
+ * look like nothing happened. Reported where a transition actually starts:
+ *
+ * - `domain`: a continuous scale's domain (data extents and fitDomain alike)
+ * - `morph`: a mark's morphed values (bars, dots on a band axis)
+ * - `slots`: a band axis's categories moving to new slots
+ *
+ * The cause is not recorded: the emitters do not know it, and the page does
+ * (it knows what it just did).
+ *
+ * MODULE-GLOBAL: one log per page (per module instance), not per coordinator.
+ * Two coordinators in one document (notebook cells, Streamlit iframes sharing
+ * it) see each other's records; filter by chart id. Fine for a debug hook.
+ *
+ * Free while nothing observes: each emitter asks `transitionsObserved()`
+ * before building a record.
+ */
+import { untrack } from 'svelte';
+const observers = new Set();
+/** Noted and not yet delivered: see noteTransition. */
+let queued = [];
+/** Listen to every transition started; returns the unsubscribe. */
+export function observeTransitions(listener) {
+    observers.add(listener);
+    return () => observers.delete(listener);
+}
+/** Whether anything listens: emitters check this before building a record. */
+export function transitionsObserved() {
+    return observers.size > 0;
+}
+export function noteTransition(part, snap, 
+/** Read untracked, now: the emitter is usually inside an effect. */
+charts, label) {
+    if (observers.size === 0)
+        return;
+    const list = untrack(() => [...charts()]);
+    queued.push({ part, snap, charts: list, label, time: performance.now() });
+    // Delivered in a microtask, never in the emitter's own call: transitions
+    // start inside effects (a renderer's write, a scale update), and a
+    // listener run there that reads state makes that effect depend on it. A
+    // page appending to a $state log then re-ran the emitting effect on every
+    // record, which logged again, and never stopped.
+    if (queued.length === 1)
+        queueMicrotask(deliver);
+}
+function deliver() {
+    const records = queued;
+    queued = [];
+    for (const record of records)
+        for (const observe of observers)
+            observe(record);
+}

package/dist/components/axes/AxisBottom.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { hasEntered } from '../../scales/entered';
 	import { getContext } from 'svelte';
 	import type { ChartContext } from '../../types';
 	import type { BandScaleState } from '../../scales/BandScaleState.svelte';
@@ -8,9 +9,24 @@
 	interface Props {
 		ticksNumber?: number;
 		tickFormat?: ((value: unknown) => string) | null;
+		/**
+		 * Draw the scale's label as the axis title (default). `false` draws none; the
+		 * label still names the scale, so charts sharing it still link their zoom.
+		 */
+		title?: boolean;
+		/**
+		 * Where along the axis the title sits: `'center'` (default), or at the plot's
+		 * `'start'` (left) or `'end'` (right) edge.
+		 */
+		titleAnchor?: 'start' | 'center' | 'end';
 	}
 
-	let { ticksNumber = 5, tickFormat = null }: Props = $props();
+	let {
+		ticksNumber = 5,
+		tickFormat = null,
+		title = true,
+		titleAnchor = 'center'
+	}: Props = $props();
 	const c = getContext<ChartContext>('chart');
 
 	// Propagate custom format to scale state once it exists (for MarginLabel, tooltips, etc.)
@@ -20,9 +36,10 @@
 			(s as ContinuousScaleState).setCustomFormat(tickFormat);
 	});
 
-	// Continuous scales (linear, time): use scaleState.getTicks()
+	// Continuous scales (linear, time): use scaleState.getTicks(). None until the
+	// scale has entered: before that its domain is a placeholder.
 	const continuousTicks = $derived(
-		c.xScaleState?.getTicks ? c.xScaleState.getTicks(ticksNumber) : []
+		c.xScaleState?.getTicks && hasEntered(c.xScaleState) ? c.xScaleState.getTicks(ticksNumber) : []
 	);
 
 	// Band scales: the categories on screen NOW, at their current fractional slots,
@@ -47,10 +64,6 @@
 					{tickFormatter(tick)}
 				</text>
 			{/each}
-
-			<text text-anchor="middle" x={c.innerWidth / 2} y={28}>
-				{c.xLabel}
-			</text>
 		{:else if c.scaleTypes.x === 'band' && c.xScale}
 			<BandAxisTicks
 				scale={c.xScaleState as BandScaleState}
@@ -60,8 +73,14 @@
 				tickLength={5}
 				labelGap={16}
 			/>
+		{/if}
 
-			<text text-anchor="middle" x={c.innerWidth / 2} y={28}>
+		{#if title && c.xScale}
+			<text
+				text-anchor={titleAnchor === 'start' ? 'start' : titleAnchor === 'end' ? 'end' : 'middle'}
+				x={titleAnchor === 'start' ? 0 : titleAnchor === 'end' ? c.innerWidth : c.innerWidth / 2}
+				y={28}
+			>
 				{c.xLabel}
 			</text>
 		{/if}

package/dist/components/axes/AxisBottom.svelte.d.ts

@@ -1,6 +1,16 @@
 interface Props {
     ticksNumber?: number;
     tickFormat?: ((value: unknown) => string) | null;
+    /**
+     * Draw the scale's label as the axis title (default). `false` draws none; the
+     * label still names the scale, so charts sharing it still link their zoom.
+     */
+    title?: boolean;
+    /**
+     * Where along the axis the title sits: `'center'` (default), or at the plot's
+     * `'start'` (left) or `'end'` (right) edge.
+     */
+    titleAnchor?: 'start' | 'center' | 'end';
 }
 declare const AxisBottom: import("svelte").Component<Props, {}, "">;
 type AxisBottom = ReturnType<typeof AxisBottom>;

package/dist/components/axes/AxisCenter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { hasEntered } from '../../scales/entered';
 	import { getContext } from 'svelte';
 	import type { ChartContext } from '../../types';
 	import type { BandScaleState } from '../../scales/BandScaleState.svelte';
@@ -39,9 +40,10 @@
 	const tickDir = $derived(labelSide === 'right' ? 1 : -1);
 	const textAnchor = $derived(labelSide === 'right' ? 'start' : 'end');
 
-	// Continuous scales (linear, time): use scaleState.getTicks()
+	// Continuous scales (linear, time): use scaleState.getTicks(). None until the
+	// scale has entered: before that its domain is a placeholder.
 	const continuousTicks = $derived(
-		c.yScaleState?.getTicks ? c.yScaleState.getTicks(ticksNumber) : []
+		c.yScaleState?.getTicks && hasEntered(c.yScaleState) ? c.yScaleState.getTicks(ticksNumber) : []
 	);
 
 	// Band scales: the categories on screen NOW, at their current fractional slots —