matterviz 0.4.2 → 0.4.3

package/dist/plot/core/layout.js

@@ -31,23 +31,35 @@ export function measure_text_width(text, font = `12px sans-serif`) {
     ctx.font = font;
     return ctx.measureText(text).width;
 }
-// Measure an element's full visual footprint, including descendants that overflow its
-// offset box. Colorbar tick labels are position:absolute outside the bar, so
-// offsetWidth/offsetHeight underestimate the space they actually occupy — which lets
-// auto-placement put the colorbar where its labels overlap the axes.
-export function measure_full_footprint(el) {
+function measure_full_footprint(el) {
     const root = el.getBoundingClientRect();
+    let left = root.left;
+    let top = root.top;
     let right = root.right;
     let bottom = root.bottom;
     for (const child of el.querySelectorAll(`*`)) {
         const rect = child.getBoundingClientRect();
         if (rect.width === 0 && rect.height === 0)
             continue;
+        left = Math.min(left, rect.left);
+        top = Math.min(top, rect.top);
         right = Math.max(right, rect.right);
         bottom = Math.max(bottom, rect.bottom);
     }
-    return { width: right - root.left, height: bottom - root.top };
+    return {
+        width: right - left,
+        height: bottom - top,
+        offset_x: left - root.left,
+        offset_y: top - root.top,
+    };
 }
+// Full footprint once the element is laid out, else `fallback` (offset dims read 0
+// before first render). NOT interchangeable with auto-place's measured_footprint:
+// that returns the offset box, which underestimates elements with overflowing
+// absolutely-positioned descendants like colorbar tick labels.
+export const full_footprint_or = (el, fallback) => el?.offsetWidth && el?.offsetHeight
+    ? measure_full_footprint(el)
+    : { ...fallback, offset_x: 0, offset_y: 0 };
 // Measure the widest formatted tick label. Used for auto-padding and label placement.
 export const measure_max_tick_width = (ticks, format = ``) => ticks.length === 0
     ? 0
@@ -148,7 +160,7 @@ const DISTANCE_WEIGHT = 0.001;
 const CORNER_WEIGHT = 5.0;
 const MAX_SAMPLE_POINTS = 500;
 // Check if a point is inside a rectangle
-const point_in_rect = (point, rect) => point.x >= rect.x &&
+export const point_in_rect = (point, rect) => point.x >= rect.x &&
     point.x <= rect.x + rect.width &&
     point.y >= rect.y &&
     point.y <= rect.y + rect.height;
@@ -195,14 +207,16 @@ export function compute_element_placement(config) {
     // Measure the element's full footprint (incl. descendants that overflow its box,
     // such as colorbar tick labels) once it's laid out; fall back to element_size before
     // first render. Centralizing this keeps every plot's auto-placement overlap-free.
-    const { width: elem_width, height: elem_height } = element?.offsetWidth && element?.offsetHeight
-        ? measure_full_footprint(element)
-        : element_size;
+    const { width: elem_width, height: elem_height, offset_x, offset_y, } = full_footprint_or(element, element_size);
     // Calculate valid placement region (plot bounds minus axis clearance)
-    const valid_x_min = plot_bounds.x + axis_clearance;
-    const valid_y_min = plot_bounds.y + axis_clearance;
-    const valid_x_max = plot_bounds.x + plot_bounds.width - axis_clearance - elem_width;
-    const valid_y_max = plot_bounds.y + plot_bounds.height - axis_clearance - elem_height;
+    const plot_left = plot_bounds.x + axis_clearance;
+    const plot_right = plot_bounds.x + plot_bounds.width - axis_clearance;
+    const plot_top = plot_bounds.y + axis_clearance;
+    const plot_bottom = plot_bounds.y + plot_bounds.height - axis_clearance;
+    const valid_x_min = plot_left - offset_x;
+    const valid_y_min = plot_top - offset_y;
+    const valid_x_max = plot_right - offset_x - elem_width;
+    const valid_y_max = plot_bottom - offset_y - elem_height;
     // Handle case where element is too large for the valid region
     const effective_x_min = Math.min(valid_x_min, valid_x_max);
     const effective_x_max = Math.max(valid_x_min, valid_x_max);
@@ -225,18 +239,14 @@ export function compute_element_placement(config) {
         ? (effective_y_max - effective_y_min) / (grid_resolution - 1)
         : 0;
     // Precompute plot corners (constant across all candidates)
-    const plot_left = valid_x_min;
-    const plot_right = plot_bounds.x + plot_bounds.width - axis_clearance;
-    const plot_top = valid_y_min;
-    const plot_bottom = plot_bounds.y + plot_bounds.height - axis_clearance;
     const max_corner_dist = euclidean_dist([plot_left, plot_top], [plot_right, plot_bottom]);
     for (let grid_x = 0; grid_x < grid_resolution; grid_x++) {
         for (let grid_y = 0; grid_y < grid_resolution; grid_y++) {
             const cand_x = effective_x_min + grid_x * x_step;
             const cand_y = effective_y_min + grid_y * y_step;
             const cand_rect = {
-                x: cand_x,
-                y: cand_y,
+                x: cand_x + offset_x,
+                y: cand_y + offset_y,
                 width: elem_width,
                 height: elem_height,
             };
@@ -250,8 +260,8 @@ export function compute_element_placement(config) {
             // Count points overlapping this candidate position
             let overlap_count = 0;
             let min_distance_sq = Infinity;
-            const center_x = cand_x + elem_width / 2;
-            const center_y = cand_y + elem_height / 2;
+            const center_x = cand_rect.x + elem_width / 2;
+            const center_y = cand_rect.y + elem_height / 2;
             for (const point of sampled_points) {
                 if (point_in_rect(point, cand_rect)) {
                     overlap_count++;
@@ -271,12 +281,12 @@ export function compute_element_placement(config) {
             // Corner preference: use element's actual corner (not center) for distance
             // This ensures a wide element at the left edge gets proper corner credit
             // (measured footprint, same as cand_rect — not the element_size fallback)
-            const elem_right = cand_x + elem_width;
-            const elem_bottom = cand_y + elem_height;
+            const elem_right = cand_rect.x + elem_width;
+            const elem_bottom = cand_rect.y + elem_height;
             // Distance from element's matching corner to each plot corner
-            const min_corner_dist = Math.min(euclidean_dist([cand_x, cand_y], [plot_left, plot_top]), // top-left
-            euclidean_dist([elem_right, cand_y], [plot_right, plot_top]), // top-right
-            euclidean_dist([cand_x, elem_bottom], [plot_left, plot_bottom]), // bottom-left
+            const min_corner_dist = Math.min(euclidean_dist([cand_rect.x, cand_rect.y], [plot_left, plot_top]), // top-left
+            euclidean_dist([elem_right, cand_rect.y], [plot_right, plot_top]), // top-right
+            euclidean_dist([cand_rect.x, elem_bottom], [plot_left, plot_bottom]), // bottom-left
             euclidean_dist([elem_right, elem_bottom], [plot_right, plot_bottom]));
             // Higher bonus for positions closer to corners (0 = at corner, 1 = far from all)
             const corner_bonus = max_corner_dist > 0 ? (1 - min_corner_dist / max_corner_dist) * CORNER_WEIGHT : 0;

package/dist/plot/core/pan-zoom.svelte.d.ts

@@ -1,13 +1,11 @@
 import type { Point2D, Vec2 } from '../../math';
+import { type Rect } from './layout';
 import type { AxisRanges, PanConfig, ScaleType } from './types';
 type Axis = `x` | `x2` | `y` | `y2`;
 export interface PanZoomOptions {
     ranges: () => AxisRanges;
     scale_type: (axis: Axis) => ScaleType | undefined;
-    plot_dims: () => {
-        width: number;
-        height: number;
-    };
+    plot_bounds: () => Rect;
     pan: () => PanConfig | undefined;
     set_range: (axis: Axis, range: Vec2) => void;
     svg: () => SVGElement | null;

package/dist/plot/core/pan-zoom.svelte.js

@@ -3,17 +3,18 @@
 // per-component policy (which axis props to write on rect-zoom, reset semantics)
 // stays in the component via the on_rect_zoom/on_reset/set_range callbacks.
 import { MIN_TOUCH_DISTANCE_PIXELS, pan_range_by_pixels, PINCH_ZOOM_THRESHOLD, remove_drag_listeners, snapshot_ranges, zoom_range_by_factor, } from './interactions';
+import { point_in_rect } from './layout';
 const AXES = [`x`, `x2`, `y`, `y2`];
 export function create_pan_zoom(opts) {
     // Rect-zoom drag state
-    let drag_state = $state({ start: null, current: null, bounds: null });
+    let drag_state = $state(null);
     // Pan state
     let is_focused = $state(false);
     let shift_held = $state(false);
     let pan_drag_state = $state(null);
     let touch_state = $state(null);
     const cancel_rect_drag = () => {
-        drag_state = { start: null, current: null, bounds: null };
+        drag_state = null;
         if (typeof window !== `undefined`) {
             window.removeEventListener(`mousemove`, on_window_mouse_move);
             window.removeEventListener(`mouseup`, on_window_mouse_up);
@@ -21,7 +22,7 @@ export function create_pan_zoom(opts) {
         }
     };
     const on_window_mouse_move = (evt) => {
-        if (!drag_state.start || !drag_state.bounds)
+        if (!drag_state)
             return;
         const coords = {
             x: evt.clientX - drag_state.bounds.left,
@@ -35,7 +36,7 @@ export function create_pan_zoom(opts) {
         opts.on_drag_move?.(coords, inside_svg);
     };
     const on_window_mouse_up = () => {
-        if (drag_state.start && drag_state.current) {
+        if (drag_state) {
             // Ignore minuscule drag rects (e.g. accidental clicks)
             const dx = Math.abs(drag_state.start.x - drag_state.current.x);
             const dy = Math.abs(drag_state.start.y - drag_state.current.y);
@@ -47,7 +48,7 @@ export function create_pan_zoom(opts) {
     // Pan/zoom all four axes from an interaction-start snapshot, each in its own
     // scale's transform space (log axes pan by a constant factor, linear by a shift)
     const pan_all_axes = (init, dx_px, dy_px) => {
-        const dims = opts.plot_dims();
+        const dims = opts.plot_bounds();
         for (const axis of AXES) {
             const horizontal = axis === `x` || axis === `x2`;
             opts.set_range(axis, pan_range_by_pixels(init[`initial_${axis}_range`], horizontal ? dx_px : dy_px, horizontal ? dims.width : dims.height, opts.scale_type(axis)));
@@ -72,9 +73,17 @@ export function create_pan_zoom(opts) {
         window.removeEventListener(`mouseup`, on_pan_end);
     };
     const on_mouse_down = (evt) => {
+        if (evt.button !== 0)
+            return;
         const svg = opts.svg();
         if (!svg)
             return;
+        // The SVG also contains axes, tick labels, and titles. Only the padded data
+        // rectangle may start a drag interaction.
+        const svg_bounds = svg.getBoundingClientRect();
+        const coords = { x: evt.clientX - svg_bounds.left, y: evt.clientY - svg_bounds.top };
+        if (!point_in_rect(coords, opts.plot_bounds()))
+            return;
         // Shift+drag pans (when enabled); plain drag draws the zoom rect
         const pan_enabled = opts.pan()?.enabled !== false;
         if (pan_enabled && evt.shiftKey) {
@@ -89,9 +98,7 @@ export function create_pan_zoom(opts) {
             return;
         }
         // Cache bounds at drag start so window mousemove can compute relative coords
-        const bounds = svg.getBoundingClientRect();
-        const coords = { x: evt.clientX - bounds.left, y: evt.clientY - bounds.top };
-        drag_state = { start: coords, current: coords, bounds };
+        drag_state = { start: coords, current: coords, bounds: svg_bounds };
         window.addEventListener(`mousemove`, on_window_mouse_move);
         window.addEventListener(`mouseup`, on_window_mouse_up);
         document.body.style.cursor = `crosshair`;
@@ -104,7 +111,7 @@ export function create_pan_zoom(opts) {
         if (pan_cfg?.enabled === false || !is_focused || !shift_held)
             return;
         evt.preventDefault();
-        const dims = opts.plot_dims();
+        const dims = opts.plot_bounds();
         const sensitivity = pan_cfg?.wheel_sensitivity ?? 1;
         const ranges = opts.ranges();
         // Pan along the dominant wheel direction
@@ -125,12 +132,22 @@ export function create_pan_zoom(opts) {
         const touch_enabled = pan_cfg?.enabled !== false && pan_cfg?.touch_enabled !== false;
         if (!touch_enabled || evt.touches.length !== 2)
             return;
+        const svg_bounds = opts.svg()?.getBoundingClientRect();
+        if (!svg_bounds)
+            return;
+        const plot_bounds = opts.plot_bounds();
+        const start_touches = Array.from(evt.touches).map((touch) => ({
+            x: touch.clientX,
+            y: touch.clientY,
+        }));
+        // Every contact must start in the data rectangle; touching an axis or label
+        // must not arm a gesture that later moves into the plot.
+        const starts_outside_plot = start_touches.some((touch) => !point_in_rect({ x: touch.x - svg_bounds.left, y: touch.y - svg_bounds.top }, plot_bounds));
+        if (starts_outside_plot)
+            return;
         evt.preventDefault();
         touch_state = {
-            start_touches: Array.from(evt.touches).map((touch) => ({
-                x: touch.clientX,
-                y: touch.clientY,
-            })),
+            start_touches,
             ...snapshot_ranges(opts.ranges()),
         };
     };
@@ -168,7 +185,7 @@ export function create_pan_zoom(opts) {
     const on_key_down = (evt) => {
         if (evt.target !== evt.currentTarget)
             return;
-        if (evt.key === `Escape` && drag_state.start)
+        if (evt.key === `Escape` && drag_state)
             cancel_rect_drag();
         if ([`Enter`, ` `].includes(evt.key)) {
             evt.preventDefault();
@@ -177,10 +194,10 @@ export function create_pan_zoom(opts) {
     };
     return {
         get drag_start() {
-            return drag_state.start;
+            return drag_state?.start ?? null;
         },
         get drag_current() {
-            return drag_state.current;
+            return drag_state?.current ?? null;
         },
         get is_pan_dragging() {
             return pan_drag_state !== null;
@@ -213,7 +230,7 @@ export function create_pan_zoom(opts) {
         // stuck cursor). Safe during SSR teardown, where window/document don't exist.
         destroy: () => {
             remove_drag_listeners([on_window_mouse_move, on_pan_move], [on_window_mouse_up, on_pan_end]);
-            drag_state = { start: null, current: null, bounds: null };
+            drag_state = null;
             pan_drag_state = null;
             touch_state = null;
         },

package/dist/plot/core/placed-tween.svelte.d.ts

@@ -14,8 +14,11 @@ export declare function create_placed_tween(opts: {
     tween?: () => TweenOptions<Point> | undefined;
     suspended?: () => boolean;
     manual_position?: () => Point | null;
+    on_element_resize?: () => void;
+    placement_revision?: () => unknown;
 }): {
     coords: Tween<Point>;
+    placed: () => boolean;
     set_locked: (locked: boolean) => void;
 };
 export {};

package/dist/plot/core/placed-tween.svelte.js

@@ -5,9 +5,9 @@ import { Tween } from 'svelte/motion';
 const HOVER_DEBOUNCE_MS = 300;
 // Tweened position for an auto-placed plot element with the stability gating shared
 // by BarPlot/BoxPlot/Histogram/ScatterPlot legends: snap (no animation) on first
-// placement, follow container resizes, stay put while hovered (debounced hover lock),
-// and track placement continuously only when `responsive`. Creates $effects, so it
-// must be called during component init.
+// placement, follow container/element resizes, stay put while hovered (debounced
+// hover lock), and track placement continuously only when `responsive`. Creates
+// $effects, so it must be called during component init.
 export function create_placed_tween(opts) {
     // Hover lock: placement updates pause while the element is hovered; release is
     // debounced so brief mouse-outs don't cause jumps
@@ -22,16 +22,43 @@ export function create_placed_tween(opts) {
         else
             unlock_timeout = setTimeout(() => (hover_locked = false), HOVER_DEBOUNCE_MS);
     };
-    // Plain (untracked) flags: only read/written inside the effect below, and outcomes
-    // don't depend on re-running when they flip
+    // Previous plot dimensions stay plain; they only classify the current effect run.
     let prev_dims = null;
-    let has_initial_placement = false;
+    let element_size_revision = $state(0);
+    let prev_element_size_revision = 0;
+    let previous_element;
+    let previous_placement_revision;
+    let placed = $state(false);
     const coords = new Tween({ x: 0, y: 0 }, untrack(() => ({ duration: 400, ...opts.tween?.() })));
     // Clear pending unlock timeout to prevent state updates after unmount
     $effect(() => () => {
         if (unlock_timeout)
             clearTimeout(unlock_timeout);
     });
+    // Decoration content (title, orientation, tick labels) can resize without the
+    // plot dimensions changing. Observe it so frozen placements are recomputed.
+    $effect(() => {
+        const element = opts.element() ?? null;
+        if (previous_element !== undefined && previous_element !== element) {
+            element_size_revision += 1;
+            if (!element)
+                placed = false;
+        }
+        previous_element = element;
+        if (!element || typeof ResizeObserver === `undefined`)
+            return undefined;
+        const observed_elements = new WeakSet();
+        const observer = new ResizeObserver((entries) => {
+            const size_changed = entries.some(({ target }) => observed_elements.has(target));
+            for (const { target } of entries)
+                observed_elements.add(target);
+            if (size_changed)
+                element_size_revision += 1;
+        });
+        for (const target of [element, ...element.querySelectorAll(`*`)])
+            observer.observe(target);
+        return () => observer.disconnect();
+    });
     // Update position with stability checks
     $effect(() => {
         const { width, height } = opts.dims();
@@ -43,26 +70,46 @@ export function create_placed_tween(opts) {
         if (manual) {
             // Immediate update (no animation) for manually positioned elements
             void coords.set({ x: manual.x, y: manual.y }, { duration: 0 });
-            return;
+            if (opts.element())
+                placed = true;
         }
-        const placement = opts.placement();
-        if (!placement)
+        // Leave resize revisions pending so unlock recomputes the latest placement.
+        if (hover_locked)
             return;
         // Track dimensions for resize detection
         const dims_changed = !prev_dims || prev_dims.width !== width || prev_dims.height !== height;
         if (dims_changed)
             prev_dims = { width, height };
-        // Only update if: resize occurred, OR (not hover-locked AND (responsive OR not
-        // yet initially placed))
-        const should_update = dims_changed || (!hover_locked && (opts.responsive() || !has_initial_placement));
-        if (should_update) {
-            void coords.set({ x: placement.x, y: placement.y }, 
-            // Skip animation on initial placement to avoid jump from (0, 0)
-            has_initial_placement ? undefined : { duration: 0 });
-            // Only lock position after the element has an actual measured size
-            if (opts.element())
-                has_initial_placement = true;
-        }
+        const element_size_changed = prev_element_size_revision !== element_size_revision;
+        prev_element_size_revision = element_size_revision;
+        if (element_size_changed)
+            opts.on_element_resize?.();
+        if (manual)
+            return;
+        const placement_revision = opts.placement_revision?.();
+        const placement_invalidated = !Object.is(previous_placement_revision, placement_revision);
+        previous_placement_revision = placement_revision;
+        const responsive = opts.responsive();
+        // A non-responsive tween tracks `placed` once so it immediately reruns and
+        // unsubscribes from the expensive placement chain after its first placement.
+        const has_initial_placement = responsive ? untrack(() => placed) : placed;
+        // Skip expensive DOM placement before evaluating it: non-responsive
+        // elements stay fixed after their initial placement until the plot resizes.
+        if (!dims_changed &&
+            !element_size_changed &&
+            !placement_invalidated &&
+            !responsive &&
+            has_initial_placement)
+            return;
+        const placement = opts.placement();
+        if (!placement)
+            return;
+        void coords.set({ x: placement.x, y: placement.y }, 
+        // Skip animation on initial placement to avoid jump from (0, 0)
+        has_initial_placement ? undefined : { duration: 0 });
+        // Only lock position after the element has an actual measured size
+        if (opts.element())
+            placed = true;
     });
-    return { coords, set_locked };
+    return { coords, placed: () => placed, set_locked };
 }

package/dist/plot/core/svg.js

@@ -29,7 +29,6 @@ export function violin_path(grid_px, half_offsets_px, center, side, orient) {
     }
     return `M${pts.map(([x_pos, y_pos]) => `${x_pos},${y_pos}`).join(`L`)}Z`;
 }
-//
 // Generate SVG path for a bar with rounded corners on the "free" end (away from axis).
 // For vertical bars, rounds top corners. For horizontal bars, rounds right corners.
 export function bar_path(x, y, w, h, r, vertical = true) {

package/dist/plot/core/utils/hierarchy-chart.d.ts

@@ -36,6 +36,7 @@ export declare function compute_node_infos<Metadata>(arcs: readonly PositionedAr
     contrast: (fill: string) => string;
     clickable?: (arc: PositionedArc<Metadata>) => boolean;
 }): HierarchyNodeInfo[];
+export declare const observe_height: (on_height: (px: number) => void) => (element: Element) => () => void;
 export declare function svg_label_font(svg_element: SVGSVGElement | null): string;
 export declare const pointer_pos: (event: MouseEvent | FocusEvent | undefined, svg_element: SVGSVGElement | null) => {
     x: number;

package/dist/plot/core/utils/hierarchy-chart.js

@@ -145,6 +145,18 @@ export function compute_node_infos(arcs, opts) {
         };
     });
 }
+// Attachment factory reporting an element's rendered height (immediately, on
+// resize, and 0 on unmount) — used to reserve chart space below the cells/arcs
+// for the colorbar without an extra measuring wrapper div.
+export const observe_height = (on_height) => (element) => {
+    const observer = new ResizeObserver(() => on_height(element.clientHeight));
+    observer.observe(element);
+    on_height(element.clientHeight);
+    return () => {
+        observer.disconnect();
+        on_height(0); // release the reserved space when the element unmounts
+    };
+};
 // The font node labels actually render in (respects the chart's font-size CSS
 // var instead of assuming 11px), for canvas-measured label fitting
 export function svg_label_font(svg_element) {

package/dist/plot/core/utils/hierarchy-labels.js

@@ -88,12 +88,13 @@ const EXPORT_INLINE_STYLES = [
     `font-weight`,
     `opacity`,
 ];
+const EXPORT_OPTIONS = { viewbox_padding: `stroke` };
 export function export_hierarchy_chart(svg_element, base_filename, format) {
     if (!svg_element)
         return;
     const filename = `${base_filename}.${format}`;
     if (format === `svg`)
-        export_svg_as_svg(svg_element, filename, EXPORT_INLINE_STYLES);
+        export_svg_as_svg(svg_element, filename, EXPORT_INLINE_STYLES, EXPORT_OPTIONS);
     else
-        export_svg_as_png(svg_element, filename, 150, EXPORT_INLINE_STYLES);
+        export_svg_as_png(svg_element, filename, 150, EXPORT_INLINE_STYLES, EXPORT_OPTIONS);
 }

package/dist/plot/histogram/Histogram.svelte

@@ -398,10 +398,13 @@
       base_pad = new_pad
   })
 
-  const legend_footprint = $derived(
-    measured_footprint(legend_element, { width: 120, height: 60 }),
-  )
+  let legend_size_revision = $state(0)
+  const legend_footprint = $derived.by(() => {
+    void legend_size_revision
+    return measured_footprint(legend_element, { width: 120, height: 60 })
+  })
   const legend_has_explicit_pos = $derived(has_explicit_position(legend?.style))
+  const should_show_legend = $derived(show_legend && legend != null && series.length > 1)
 
   // Obstacle field in normalized [0,1] plot coords (y=0 at top). Each filled bar is modeled as a
   // vertical segment (top -> baseline) so the legend can't hide inside a tall bar. Built from
@@ -431,7 +434,7 @@
   })
 
   // Move the legend to the bottom margin when no interior spot avoids the bars
-  const decor = $derived.by(() =>
+  const decor = $derived(
     place_decorations({
       base_pad,
       width,
@@ -439,11 +442,7 @@
       obstacles_norm,
       // gate on legend_element (the render signal) not legend_data, whose entries can read pad
       legend:
-        show_legend &&
-        legend != null &&
-        series.length > 1 &&
-        legend_element != null &&
-        !legend_has_explicit_pos
+        should_show_legend && legend_element != null && !legend_has_explicit_pos
           ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
           : null,
     }),
@@ -472,9 +471,6 @@
   const marginal_has_axis = $derived(
     marginal_axis_presence(x2_series.length > 0, y2_series.length > 0),
   )
-  const legend_auto_outside = $derived(decor.legend_outside)
-  const legend_outside_x = $derived(decor.legend_pos.x)
-  const legend_outside_y = $derived(decor.legend_pos.y)
 
   // Scales and data (x/x2 share the horizontal pixel span, y/y2 the inverted vertical one)
   let scales = $derived(
@@ -531,7 +527,6 @@
   // Cache measured tick-label widths so expensive text measurement only runs
   // when tick values/format change, not on every template rerender.
   let tick_label_widths = $derived({
-    x2_max: measure_max_tick_width(ticks.x2, final_x2_axis.format ?? ``),
     y_max: measure_max_tick_width(ticks.y, final_y_axis.format ?? ``),
     y2_max: measure_max_tick_width(ticks.y2, final_y2_axis.format ?? ``),
   })
@@ -562,14 +557,13 @@
   })
 
   // Calculate best legend placement using continuous grid sampling
-  let legend_placement = $derived.by(() => {
-    const should_place = show_legend && legend != null && series.length > 1
-    if (!should_place || !width || !height) return null
+  const get_legend_placement = () => {
+    if (!should_show_legend || !width || !height) return null
 
     const plot_width = width - pad.l - pad.r
     const plot_height = height - pad.t - pad.b
 
-    const result = compute_element_placement({
+    return compute_element_placement({
       plot_bounds: { x: pad.l, y: pad.t, width: plot_width, height: plot_height },
       element: legend_element,
       element_size: { width: 120, height: 60 }, // fallback before first render
@@ -577,17 +571,16 @@
       exclude_rects: [],
       points: hist_points_for_placement,
     })
-
-    return result
-  })
+  }
 
   // Tweened legend coordinates with shared placement stability gating
   const legend_tween = create_placed_tween({
-    placement: () => legend_placement,
+    placement: get_legend_placement,
     dims: () => ({ width, height }),
     responsive: () => legend?.responsive ?? false,
     element: () => legend_element,
     tween: () => legend?.tween,
+    on_element_resize: () => (legend_size_revision += 1),
   })
 
   // Shared pan/zoom/touch/drag-rect interaction controller
@@ -597,7 +590,9 @@
       ({ x: final_x_axis, x2: final_x2_axis, y: final_y_axis, y2: final_y2_axis })[axis]
         .scale_type,
     // Clamp to at least 1 to avoid Infinity deltas when padding equals container size
-    plot_dims: () => ({
+    plot_bounds: () => ({
+      x: pad.l,
+      y: pad.t,
       width: Math.max(1, width - pad.l - pad.r),
       height: Math.max(1, height - pad.t - pad.b),
     }),
@@ -1042,11 +1037,11 @@
     />
   {/if}
 
-  {#if show_legend && legend != null && series.length > 1}
+  {#if should_show_legend && legend}
     {@const legend_pos = placed_coords(
-      legend_auto_outside,
-      { x: legend_outside_x, y: legend_outside_y },
-      legend_placement,
+      decor.legend_outside,
+      decor.legend_pos,
+      legend_tween.placed(),
       legend_tween.coords.current,
       { x: pad.l + 10, y: pad.t + 10 },
     )}

package/dist/plot/sankey/sankey.js

@@ -20,11 +20,6 @@ function resolve_node_ref(ref, id_to_idx, n_nodes) {
     }
     throw new Error(`Sankey link references unknown node: ${JSON.stringify(ref)}`);
 }
-function resolve_numeric_node_ref(ref, n_nodes) {
-    if (Number.isInteger(ref) && ref >= 0 && ref < n_nodes)
-        return ref;
-    throw new Error(`Sankey link references unknown node: ${JSON.stringify(ref)}`);
-}
 // Build a SankeyData object from parallel flat arrays (e.g. the plotly/matbench
 // `link.source`/`link.target`/`link.value` + `node.label` format).
 export function sankey_from_links(source, target, value, labels) {
@@ -107,9 +102,18 @@ export function compute_sankey_layout(data, opts) {
     }));
     // Resolve a source/target ref to a node index: id/label lookup when any link uses
     // non-numeric refs, otherwise a cheap numeric-range check (no map built).
-    const resolve_ref = (ref) => needs_ref_lookup
-        ? resolve_node_ref(ref, id_to_idx, data.nodes.length)
-        : resolve_numeric_node_ref(ref, data.nodes.length);
+    const resolve_ref = (ref) => {
+        if (needs_ref_lookup) {
+            return resolve_node_ref(ref, id_to_idx, data.nodes.length);
+        }
+        if (typeof ref === `number` &&
+            Number.isInteger(ref) &&
+            ref >= 0 &&
+            ref < data.nodes.length) {
+            return ref;
+        }
+        throw new Error(`Sankey link references unknown node: ${JSON.stringify(ref)}`);
+    };
     const link_copies = data.links.map((link, idx) => ({
         link_idx: idx,
         color: link.color,
@@ -185,5 +189,5 @@ export function compute_sankey_layout(data, opts) {
     }
     return graph;
 }
-// Map a node alignment string to the d3-sankey alignment function (exposed for tests)
+// Map a node alignment string to the d3-sankey alignment function
 export const sankey_align_fn = (align) => ALIGN_FNS[align];