@fjader/svelte 0.2.3 → 0.2.5

package/dist/components/rendering/uniform-sizes.js

@@ -15,7 +15,7 @@ export const PARALLEL_MAX_AXES = 16;
 const SCALE_PARAM_BYTES = 16;
 export const UNIFORM_BYTES = {
     dotsMarkConstants: 48,
-    rectsMarkConstants: 48,
+    rectsMarkConstants: 64,
     ruleXMarkConstants: 48,
     ruleYMarkConstants: 48,
     linesMarkConstants: 64,

package/dist/config/ChartConfig.svelte.d.ts

@@ -1,5 +1,6 @@
+import { EntranceGate } from '../animation/EntranceGate';
 import type { SelectionResponse } from '../components/rendering/activity-reads';
-import type { FieldRef, LODConfig, SortConfig, ColorScheme, CurveType, Transform } from '../types';
+import type { FieldRef, LODConfig, SortConfig, ColorScheme, CurveType, NullsResponse, Transform } from '../types';
 import type { MarkLODSurface } from '../lod/rung-types';
 export interface MarkEntry {
     readonly id: string;
@@ -25,6 +26,9 @@ export interface MarkEntry {
     transforms?: Transform[];
     selection?: string;
     selectionResponse?: SelectionResponse;
+    contributeDomain?: boolean;
+    nulls?: NullsResponse;
+    holdsEntrance?: boolean;
     limit?: number;
     preferredXScaleType?: string | null;
     preferredYScaleType?: string | null;
@@ -59,6 +63,11 @@ export interface ChartProps {
 }
 export declare class ChartConfig {
     #private;
+    /**
+     * Holds the chart's entrance until its marks have their first data. One per
+     * container, shared by its facet cells, as this config is.
+     */
+    readonly entrance: EntranceGate;
     /**
      * Register a mark with prop getters for each configurable property.
      * Returns the reactive entry that the mark reads from.

package/dist/config/ChartConfig.svelte.js

@@ -12,10 +12,17 @@
 // The entry outlives MarkLifecycle — registerMark returns the existing entry
 // on re-registration, preventing infinite loops.
 // =============================================================================
+import { untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
+import { EntranceGate } from '../animation/EntranceGate';
 import { createOverridable } from './overridable.svelte';
 // ---- ChartConfig ----
 export class ChartConfig {
+    /**
+     * Holds the chart's entrance until its marks have their first data. One per
+     * container, shared by its facet cells, as this config is.
+     */
+    entrance = new EntranceGate();
     /** Overridable channels per mark, for reset support. */
     #channels = new Map();
     /** Reactive entries — SvelteMap so iteration/size reads are tracked. */
@@ -45,6 +52,14 @@ export class ChartConfig {
         const existing = this.#entries.get(id);
         if (existing)
             return existing;
+        // A data mark holds the chart's entrance from the moment it mounts, which
+        // is now: its lifecycle is built later, in an effect that waits for the
+        // chart's scales, and until something holds the gate the chart looks
+        // like one with no data marks and enters on its first drawable layer.
+        if (untrack(() => propGetters.table?.()) &&
+            untrack(() => propGetters.holdsEntrance?.()) !== false) {
+            this.entrance.hold(id);
+        }
         const channels = new Map();
         const entry = { id, markType };
         for (const [key, getter] of Object.entries(propGetters)) {
@@ -66,6 +81,8 @@ export class ChartConfig {
         return entry;
     }
     unregisterMark(id) {
+        // A mark that leaves before its first data must not hold the chart.
+        this.entrance.release(id);
         this.#entries.delete(id);
         this.#channels.delete(id);
     }

package/dist/gpu/GPUCoordinator.svelte.d.ts

@@ -1,3 +1,6 @@
+import { type TransitionRecord } from '../animation/transition-log';
+import type { EntranceMode } from '../types';
+import type { EntranceGate } from '../animation/EntranceGate';
 import type { RendererDefinition } from './ScaleTemplateSystem';
 import type { ScaleRegistry } from '../scales/ScaleRegistry.svelte';
 import type { FilterGroupRegistry } from '../query-engine/FilterGroupRegistry.svelte';
@@ -88,6 +91,18 @@ interface ChartRegistrationConfig {
     zIndex?: number;
     facetIndex?: number;
     facetScale?: FacetScaleRef | null;
+    /** How the chart's marks enter when its data first draws. Default 'auto'. */
+    entrance?: EntranceMode;
+    /** Holds the entrance until the chart's marks have their first data. */
+    entranceGate?: EntranceGate | null;
+}
+/** A chart's entrance starting, for observeEntrances. */
+export interface ChartEntrance {
+    chartId: string;
+    /** The chart's canvas, to find it in the page (a label on an ancestor). */
+    canvas: HTMLCanvasElement;
+    /** performance.now() when the entrance started. */
+    time: number;
 }
 /**
  * One chart's pixels as the coordinator rendered them, for the scale-source
@@ -142,6 +157,12 @@ export declare class GPUCoordinator {
      * left alone.
      */
     writeScaleParams(scaleId: string, view: Float32Array, offset: number): boolean;
+    /**
+     * Listen to every chart's entrance as it starts: when its marks have their
+     * first data and it first draws. For measuring load (how soon charts enter);
+     * returns the unsubscribe. Costs nothing while no one listens.
+     */
+    observeEntrances(listener: (entrance: ChartEntrance) => void): () => void;
     /**
      * Configure canvases so the coordinator can copy from them. Test-only: set
      * it before the charts mount, since a canvas reads it when it configures
@@ -263,10 +284,19 @@ export declare class GPUCoordinator {
     removePhysicsCallback(fn: () => void): void;
     registerChart(chartId: string, canvas: HTMLCanvasElement, config: ChartRegistrationConfig): ChartRegistrationResult;
     unregisterChart(chartId: string): void;
+    /**
+     * Debug: every transition that starts, and whether it animates or lands at
+     * once (see transition-log). Returns the unsubscribe. Forwards to the
+     * page-wide log: records from every coordinator in the document arrive
+     * here, so filter by chart id.
+     */
+    observeTransitions(listener: (record: TransitionRecord) => void): () => void;
+    /** Whether a registered chart is visible: in view (with the 200 px margin) and the page shown. */
+    isChartVisible(chartId: string): boolean;
     /**
      * Register a callback invoked when a chart's effective visibility changes.
      * Effective visibility = IntersectionObserver visible AND page visible.
-     * Used by ChartCell to toggle Mosaic client.enabled.
+     * Used by ChartCell to report into the chart's ChartVisibility.
      */
     setVisibilityCallback(chartId: string, callback: (visible: boolean) => void): () => void;
     invalidateChart(chartId: string): void;

package/dist/gpu/GPUCoordinator.svelte.js

@@ -1,5 +1,7 @@
+import { observeTransitions } from '../animation/transition-log';
 import { setContext, getContext } from 'svelte';
 import { AnimationLoop } from '../animation';
+import { TransitionClock, ENTRANCE_FADE_STIFFNESS, ENTRANCE_GROW_STIFFNESS } from '../animation/TransitionClock';
 import { scaleTemplateSystem, CHART_SCALE_IMMEDIATE_SIZE } from './ScaleTemplateSystem';
 import { isCategoricalScale } from '../scales/scale-categories';
 import { MAX_SIZE_SLOTS } from './SizeScaleShaderLib';
@@ -19,8 +21,23 @@ export const COLOR_RAMP_RESOLUTION = 256;
 function layerCanDraw(layer, chartScalesKnown) {
     return (!!layer.renderer?.perDataBindGroup && (chartScalesKnown || layer.readsChartScales === false));
 }
+/** A guide (a grid line) rather than data: it neither enters nor starts the entrance. */
+function isGuideLayer(layer) {
+    return layer.markType.startsWith('grid-line-');
+}
 /** No fields to pack, for a coordinator without filter groups. */
 const NO_FIELDS = [];
+/**
+ * A chart's entrance once the viewer's preference is applied: under reduced
+ * motion, 'auto' fades rather than grows. Opacity is not motion, so a fade
+ * stays; an author's explicit 'fade' or 'none' is kept as is.
+ */
+function resolveEntrance(mode) {
+    const chosen = mode ?? 'auto';
+    if (chosen !== 'auto' || typeof matchMedia === 'undefined')
+        return chosen;
+    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'fade' : 'auto';
+}
 // =============================================================================
 // HELPER CLASSES
 // =============================================================================
@@ -477,10 +494,6 @@ export class GPUCoordinator {
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
         });
     }
-    /**
-     * Fill CPU buffer with current scale GPU state.
-     * Zero-allocation hot path.
-     */
     /**
      * Buffers for the slot table and its per-frame resolve.
      *
@@ -746,8 +759,115 @@ export class GPUCoordinator {
         this.#device.queue.writeBuffer(buffer, 0, view);
         last.set(view);
     }
-    /** Reused per pass: the chart's x and y ScaleParam, pushed as immediates. */
+    /** Reused per pass: the chart's x and y ScaleParam and entrance, pushed as immediates. */
     #chartScaleImmediates = new Float32Array(CHART_SCALE_IMMEDIATE_SIZE / 4);
+    /** Debug listeners for chart entrances (observeEntrances). */
+    #entranceObservers = new Set();
+    /**
+     * Listen to every chart's entrance as it starts: when its marks have their
+     * first data and it first draws. For measuring load (how soon charts enter);
+     * returns the unsubscribe. Costs nothing while no one listens.
+     */
+    observeEntrances(listener) {
+        this.#entranceObservers.add(listener);
+        return () => this.#entranceObservers.delete(listener);
+    }
+    /**
+     * Begin a chart's entrance on the first pass that draws data in it.
+     *
+     * Per chart, not per mark: every mark in the chart reads the same immediate,
+     * so a bar chart and the line drawn over it enter together. Marks normally
+     * land in one query batch; one landing mid-entrance joins at the current t,
+     * and one landing after it simply appears.
+     *
+     * Started here rather than on registration, so an off-screen chart enters
+     * when it is first drawn, which is when it can be seen.
+     */
+    #startEntranceIfDrawing(chart, scalesKnown) {
+        // Every mark's first data first, so the chart enters once, whole. Only
+        // this chart's marks: a chart sharing a scale that lands later springs
+        // the domain to the combined extent, as any later data would.
+        const gate = chart.entranceGate;
+        if (gate) {
+            if (!gate.canEnter)
+                return;
+            gate.open();
+        }
+        const plan = chart.renderPlan;
+        let drawing = false;
+        for (let i = 0; i < plan.length; i++) {
+            // Data marks only: a grid line draws as soon as the scales exist, which
+            // is usually before the query has answered, and would start the
+            // entrance with nothing in it.
+            if (isGuideLayer(plan[i]))
+                continue;
+            if (layerCanDraw(plan[i], scalesKnown)) {
+                drawing = true;
+                break;
+            }
+        }
+        if (!drawing)
+            return;
+        chart.entranceStarted = true;
+        if (this.#entranceObservers.size > 0) {
+            const entrance = {
+                chartId: chart.chartId,
+                canvas: chart.canvas,
+                time: performance.now()
+            };
+            for (const observe of this.#entranceObservers) {
+                try {
+                    observe(entrance);
+                }
+                catch (e) {
+                    console.error('[GPUCoordinator] entrance observer threw:', e);
+                }
+            }
+        }
+        if (chart.entranceMode === 'none')
+            return;
+        const clock = new TransitionClock({
+            loop: this,
+            stiffness: ENTRANCE_GROW_STIFFNESS,
+            charts: () => chart.entranceCharts,
+            onRest: () => {
+                if (chart.entranceClock === clock)
+                    chart.entranceClock = null;
+            }
+        });
+        chart.entranceClock = clock;
+        // Ease-out: growth should move from its first frame.
+        clock.restartEaseOut();
+        const fade = new TransitionClock({
+            loop: this,
+            stiffness: ENTRANCE_FADE_STIFFNESS,
+            charts: () => chart.entranceCharts,
+            onRest: () => {
+                if (chart.entranceFadeClock === fade)
+                    chart.entranceFadeClock = null;
+            }
+        });
+        chart.entranceFadeClock = fade;
+        // From rest: a soft S-curve for opacity.
+        fade.restart();
+    }
+    /**
+     * The entrance immediates: x = growth, y = a growing mark's opacity, z = a
+     * fading mark's opacity. The mode is folded in here, so a mark only says
+     * whether it grows or fades.
+     */
+    #writeEntrance(chart, view) {
+        // Before the entrance starts the chart draws nothing, so 0 is never
+        // seen; after it, the clocks are gone and everything is at 1.
+        const idle = chart.entranceStarted ? 1 : 0;
+        const grow = chart.entranceClock ? chart.entranceClock.t : idle;
+        const fade = chart.entranceFadeClock ? chart.entranceFadeClock.t : idle;
+        const mode = chart.entranceMode;
+        view[8] = mode === 'auto' ? grow : 1;
+        view[9] = mode === 'fade' ? fade : 1;
+        view[10] = mode === 'none' ? 1 : fade;
+        view[11] = 0;
+    }
     // =========================================================================
     // READBACK (test-only)
     // =========================================================================
@@ -996,6 +1116,9 @@ export class GPUCoordinator {
             // known: a layer that does not read them still needs every byte set
             // before it may draw.
             const scalesKnown = this.#writeChartScales(chartConfig, this.#chartScaleImmediates);
+            if (!chartConfig.entranceStarted)
+                this.#startEntranceIfDrawing(chartConfig, scalesKnown);
+            this.#writeEntrance(chartConfig, this.#chartScaleImmediates);
             passEncoder.setImmediates(0, this.#chartScaleImmediates);
             if (chartConfig.perFrameBindGroup) {
                 passEncoder.setBindGroup(0, chartConfig.perFrameBindGroup);
@@ -1501,8 +1624,19 @@ export class GPUCoordinator {
             renderPassDescriptor: null,
             msaa: null,
             _lastRenderFrame: -1,
-            _isDirty: false
+            _isDirty: false,
+            entranceMode: resolveEntrance(config.entrance),
+            entranceStarted: false,
+            entranceClock: null,
+            entranceFadeClock: null,
+            entranceCharts: [chartId],
+            entranceGate: config.entranceGate ?? null,
+            entranceGateOff: null
         };
+        // The gate opens on a mark's data or a timeout, neither of which need
+        // redraw this chart. Without a frame the entrance would wait for one.
+        chartConfig.entranceGateOff =
+            chartConfig.entranceGate?.onOpen(() => this.invalidateChart(chartId)) ?? null;
         this.#registeredCharts.set(chartId, chartConfig);
         // Observe canvas for viewport visibility
         if (this.#visibilityObserver) {
@@ -1552,6 +1686,12 @@ export class GPUCoordinator {
         const chartConfig = this.#registeredCharts.get(chartId);
         if (chartConfig) {
             chartConfig._isDirty = false;
+            chartConfig.entranceClock?.stop();
+            chartConfig.entranceClock = null;
+            chartConfig.entranceFadeClock?.stop();
+            chartConfig.entranceFadeClock = null;
+            chartConfig.entranceGateOff?.();
+            chartConfig.entranceGateOff = null;
             if (chartConfig.frameUniformsBuffer) {
                 chartConfig.frameUniformsBuffer.destroy();
             }
@@ -1580,13 +1720,30 @@ export class GPUCoordinator {
     // =========================================================================
     // VIEWPORT VISIBILITY
     // =========================================================================
+    /**
+     * Debug: every transition that starts, and whether it animates or lands at
+     * once (see transition-log). Returns the unsubscribe. Forwards to the
+     * page-wide log: records from every coordinator in the document arrive
+     * here, so filter by chart id.
+     */
+    observeTransitions(listener) {
+        return observeTransitions(listener);
+    }
+    /** Whether a registered chart is visible: in view (with the 200 px margin) and the page shown. */
+    isChartVisible(chartId) {
+        return this.#registeredCharts.get(chartId)?.visible ?? false;
+    }
     /**
      * Register a callback invoked when a chart's effective visibility changes.
      * Effective visibility = IntersectionObserver visible AND page visible.
-     * Used by ChartCell to toggle Mosaic client.enabled.
+     * Used by ChartCell to report into the chart's ChartVisibility.
      */
     setVisibilityCallback(chartId, callback) {
         this.#visibilityCallbacks.set(chartId, callback);
+        // Callbacks hear changes only. One set after the chart was already found
+        // off screen would otherwise go on assuming it visible.
+        if (this.#registeredCharts.get(chartId)?.visible === false)
+            callback(false);
         return () => this.#visibilityCallbacks.delete(chartId);
     }
     #handleVisibilityChange(chartId, ioVisible) {

package/dist/gpu/MorphedChannels.d.ts

@@ -1,31 +1,4 @@
 import { TransitionClock, type ClockLoop } from '../animation/TransitionClock';
-/**
- * Channels of one mark that morph between data updates rather than replacing
- * outright.
- *
- * Each holds three buffers where a static channel holds one: `from` and `to` are
- * read by a compute pass, and `resolved = mix(from, to, t)` is what the vertex
- * stage binds — in place of the static buffer, not in addition to it. So
- * animating a channel costs the vertex stage nothing, which is what makes it
- * affordable on a mark already at the device's storage-buffer limit.
- *
- * THE FOLD. When a transition restarts, whatever is on screen becomes the new
- * `from`. On screen is the resolved buffer as last dispatched, so the fold is a
- * buffer copy, and it reads neither `from` nor `to` — which is what lets data
- * land at any moment, in any order relative to anything else. Writing it as
- * `from = mix(from, to, t)` would need the OLD `to`, making the order of two
- * writes load-bearing and silently wrong if they ever swap.
- *
- * THE SNAP. Some updates have nothing to travel from: the first one, a buffer
- * that had to be reallocated, and a row set that is not the one being animated.
- * Those copy `to` over `from`, which makes the mix the identity for every t.
- *
- * THE CLOCK. A mark ADOPTS the band scale's clock when it has one, so a bar's
- * height travels on the same number as its slot — two clocks with two velocities
- * desynchronise on a retarget, and the bar reaches its rank before or after it
- * finishes growing. It OWNS one otherwise. Adoption is safe across marks because
- * a mark with no new data folds to where it already is and does not move.
- */
 /**
  * The coordinator's slice this needs. Structural, so tests can supply a fake.
  * It is also the loop an owned clock joins — the clock does that itself.
@@ -61,6 +34,10 @@ export interface MorphedChannelsOptions {
  * travelling to its neighbour's value and back. So the claim is checked, and a
  * change snaps rather than interpolates. A hash rather than a comparison
  * because it costs one pass and no retained copy.
+ *
+ * Over the values' bits, read through a view of the same buffer: a
+ * histogram's rows are keyed by bin edges, fractions a sum would truncate
+ * away, so a re-bin could otherwise hash like the bins it replaced.
  */
 export declare function alignmentKey(ids: ArrayLike<number>): number;
 export declare class MorphedChannels {
@@ -85,8 +62,14 @@ export declare class MorphedChannels {
      *
      * All channels in one call, so one update starts one transition. Returns
      * whether any buffer was (re)allocated, which the caller must rebind.
+     *
+     * `land`: bindings whose new values take effect at once while the rest
+     * travel. For a channel whose change is shown some other way at that moment
+     * (an Other bar's split, when both sides of it look the same): sliding it
+     * would draw a movement nothing asked for. `'all'`: the whole update lands,
+     * for a catch-up result (MarkHandle.resultCause).
      */
-    write(rowIds: ArrayLike<number>, channels: readonly (readonly [number, AllowSharedBufferSource])[]): boolean;
+    write(rowIds: ArrayLike<number>, channels: readonly (readonly [number, AllowSharedBufferSource])[], land?: readonly number[] | 'all'): boolean;
     /**
      * Stop morphing a channel and release its buffers. Returns whether it was
      * morphing, in which case the caller's binding has lost its buffer.

package/dist/gpu/MorphedChannels.js

@@ -1,6 +1,36 @@
+import { noteTransition, transitionsObserved } from '../animation/transition-log';
 import { RESOLVE_IMMEDIATE_SIZE, RESOLVE_WORKGROUP, resolvePipelineFor } from './ResolveShader';
 import { TransitionClock } from '../animation/TransitionClock';
 import { immediatesSupported } from './immediates';
+/**
+ * Channels of one mark that morph between data updates rather than replacing
+ * outright.
+ *
+ * Each holds three buffers where a static channel holds one: `from` and `to` are
+ * read by a compute pass, and `resolved = mix(from, to, t)` is what the vertex
+ * stage binds — in place of the static buffer, not in addition to it. So
+ * animating a channel costs the vertex stage nothing, which is what makes it
+ * affordable on a mark already at the device's storage-buffer limit.
+ *
+ * THE FOLD. When a transition restarts, whatever is on screen becomes the new
+ * `from`. On screen is the resolved buffer as last dispatched, so the fold is a
+ * buffer copy, and it reads neither `from` nor `to` — which is what lets data
+ * land at any moment, in any order relative to anything else. Writing it as
+ * `from = mix(from, to, t)` would need the OLD `to`, making the order of two
+ * writes load-bearing and silently wrong if they ever swap.
+ *
+ * THE SNAP. Some updates have nothing to travel from: the first one, a buffer
+ * that had to be reallocated, and a row set that is not the one being animated.
+ * Those copy `to` over `from`, which makes the mix the identity for every t.
+ *
+ * THE CLOCK. A mark ADOPTS the band scale's clock when it has one, so a bar's
+ * height travels on the same number as its slot — two clocks with two velocities
+ * desynchronise on a retarget, and the bar reaches its rank before or after it
+ * finishes growing. It OWNS one otherwise. Adoption is safe across marks because
+ * a mark with no new data folds to where it already is and does not move.
+ */
+/** No bindings: the default for `write`'s `land`. */
+const NO_BINDINGS = [];
 /**
  * A cheap fingerprint of the band ids, per update.
  *
@@ -10,11 +40,16 @@ import { immediatesSupported } from './immediates';
  * travelling to its neighbour's value and back. So the claim is checked, and a
  * change snaps rather than interpolates. A hash rather than a comparison
  * because it costs one pass and no retained copy.
+ *
+ * Over the values' bits, read through a view of the same buffer: a
+ * histogram's rows are keyed by bin edges, fractions a sum would truncate
+ * away, so a re-bin could otherwise hash like the bins it replaced.
  */
 export function alignmentKey(ids) {
-    let hash = ids.length;
-    for (let i = 0; i < ids.length; i++)
-        hash = (hash * 31 + ids[i]) | 0;
+    const bits = ids instanceof Float32Array ? new Uint32Array(ids.buffer, ids.byteOffset, ids.length) : ids;
+    let hash = bits.length;
+    for (let i = 0; i < bits.length; i++)
+        hash = (Math.imul(hash, 31) + bits[i]) | 0;
     return hash;
 }
 export class MorphedChannels {
@@ -87,8 +122,14 @@ export class MorphedChannels {
      *
      * All channels in one call, so one update starts one transition. Returns
      * whether any buffer was (re)allocated, which the caller must rebind.
+     *
+     * `land`: bindings whose new values take effect at once while the rest
+     * travel. For a channel whose change is shown some other way at that moment
+     * (an Other bar's split, when both sides of it look the same): sliding it
+     * would draw a movement nothing asked for. `'all'`: the whole update lands,
+     * for a catch-up result (MarkHandle.resultCause).
      */
-    write(rowIds, channels) {
+    write(rowIds, channels, land = NO_BINDINGS) {
         const key = alignmentKey(rowIds);
         let travels = this.#alignmentKey === key;
         this.#alignmentKey = key;
@@ -100,6 +141,7 @@ export class MorphedChannels {
                 reallocated = true;
             }
             channel.count = data.byteLength >> 2;
+            channel.land = land === 'all' || land.includes(binding);
             this.#device.queue.writeBuffer(channel.to, 0, data);
         }
         // A fresh buffer holds nothing that was ever on screen, so there is
@@ -107,10 +149,29 @@ export class MorphedChannels {
         if (reallocated)
             travels = false;
         this.#dirty = true;
-        if (travels)
+        // Every channel landing travels nothing, so it starts no transition: on
+        // a shared band clock a restart would set every sibling folding for a
+        // transition with nowhere to go.
+        // A loop, not `every`: this runs on each data update of a brush, and
+        // the callback would allocate per write.
+        let allLand = land === 'all';
+        if (land !== 'all' && land.length > 0) {
+            allLand = true;
+            for (let i = 0; i < channels.length; i++) {
+                if (!land.includes(channels[i][0])) {
+                    allLand = false;
+                    break;
+                }
+            }
+        }
+        if (travels && !allLand)
             this.#startTransition();
-        else
+        else if (!travels)
             this.#snapPending = true;
+        if (transitionsObserved()) {
+            // Snaps when the row set changed or a buffer grew, or every channel lands.
+            noteTransition('morph', !travels || allLand, this.#affectedCharts, this.#label);
+        }
         if (!this.#registered) {
             this.#registered = true;
             this.#host.registerComputeWork(this.#label, (encoder) => this.encode(encoder));
@@ -158,8 +219,10 @@ export class MorphedChannels {
             return;
         for (let i = 0; i < channels.length; i++) {
             const channel = channels[i];
-            if (snap) {
+            if (snap || channel.land) {
+                // A landed channel: from = to, so the mix is its new value at any t.
                 encoder.copyBufferToBuffer(channel.to, 0, channel.from, 0, channel.size);
+                channel.land = false;
             }
             else if (this.#foldPending) {
                 // A transition interrupted mid-flight continues from where it is,
@@ -225,7 +288,8 @@ export class MorphedChannels {
             resolved: make('resolved'),
             size,
             count: 0,
-            bindGroup: null
+            bindGroup: null,
+            land: false
         };
         this.#channels.set(binding, channel);
         this.#channelList = [...this.#channels.values()];

package/dist/gpu/ScaleTemplateSystem.d.ts

@@ -33,14 +33,14 @@ interface ShaderResult {
 }
 /**
  * Bytes of immediate data every render pipeline declares: the chart's x and y
- * `ScaleParam`, 16 bytes each. Every layout declares the same size because a
+ * `ScaleParam`, 16 bytes each, and its entrance, a vec4. Every layout declares the same size because a
  * draw requires every declared byte to have been set, and the pass sets them
  * once, before its first draw.
  *
  * Immediates carry state shared across the pass and read by several marks: the
  * chart's scales and settings. 64 bytes are available on M-series Macs.
  */
-export declare const CHART_SCALE_IMMEDIATE_SIZE = 32;
+export declare const CHART_SCALE_IMMEDIATE_SIZE = 48;
 /**
  * Main template system class
  */
@@ -69,6 +69,24 @@ export declare class ScaleTemplateSystem {
      * @private
      */
     _buildDeclarations(xFragment: ScaleFragment, yFragment: ScaleFragment): string;
+    /**
+     * The chart's entrance, for marks to apply in the vertex stage.
+     *
+     * A mark either GROWS along one axis (bars, histograms and areas, from the
+     * value 0 on their measure axis) or FADES (everything else). Which one is
+     * the mark's to say, as `axis`: 0 fades, 1 grows along x, 2 along y. The
+     * chart's mode is already folded into the immediates, so a chart set to
+     * fade hands a growing mark g = 1 and its opacity instead.
+     *
+     * The base a mark grows from is where 0 sits on screen, clamped to the plot:
+     * a domain that leaves 0 out grows from the edge, which is where its bars
+     * visibly start anyway. A log axis has no 0 and grows from its low edge.
+     * Decided per scale type here, so no shader evaluates log(0).
+     */
+    _buildEntranceHelpers(scaleTypes: {
+        x: string;
+        y: string;
+    }): string;
     /**
      * `bandActivityX(value, group)` and `bandActivityY(value, group)`: how
      * selected a band or point axis's category is in the mark's filter group,