matterviz 0.4.2 → 0.4.3

package/dist/plot/scatter/BinnedScatterPlot.svelte

@@ -16,13 +16,16 @@
   import PlotMarginals from '../core/components/PlotMarginals.svelte'
   import PlotTooltip from '../core/components/PlotTooltip.svelte'
   import ZoomRect from '../core/components/ZoomRect.svelte'
+  import { sorted_range } from '../core/interactions'
+  import { create_placed_tween } from '../core/placed-tween.svelte'
   import {
     AXIS_TITLE_OFFSET,
     compute_element_placement,
     DEFAULT_PLOT_PADDING,
     filter_padding,
+    full_footprint_or,
     LABEL_GAP_DEFAULT,
-    measure_full_footprint,
+    point_in_rect,
   } from '../core/layout'
   import type { Sides } from '../core/layout'
   import { get_series_color } from '../core/data-transform'
@@ -161,14 +164,14 @@
   let x_range = $state<Vec2>([0, 1])
   let y_range = $state<Vec2>([0, 1])
   let has_user_range = $state(false)
-  let drag_start = $state<Point2D | null>(null)
-  let drag_current = $state<Point2D | null>(null)
+  let drag_state = $state<{ start: Point2D; current: Point2D } | null>(null)
   let suppress_next_click = false
   let hovered_bin = $state<DensityBin | null>(null)
   let hovered_point = $state<DenseInternalPoint<Metadata> | null>(null)
   let tooltip_pos = $state<Point2D>({ x: 0, y: 0 })
   let colorbar_element = $state<HTMLDivElement>()
   let annotation_element = $state<HTMLDivElement>()
+  let colorbar_size_revision = $state(0)
   let label_measure_root = $state<HTMLDivElement>()
   let label_sizes = new SvelteMap<string, LabelSize>()
   const clip_path_id = `binned-scatter-plot-area-${next_clip_id++}`
@@ -263,14 +266,16 @@
   const needs_data_range = (range: AxisConfig[`range`] | undefined): boolean =>
     range?.[0] == null || range?.[1] == null
 
+  let x_scale_type = $derived(x_axis.scale_type ?? `linear`)
+  let y_scale_type = $derived(y_axis.scale_type ?? `linear`)
   let needs_auto_range = $derived(
     needs_data_range(x_axis.range) || needs_data_range(y_axis.range),
   )
   let auto_ranges = $derived(
-    needs_auto_range ? series_extents(series) : { x: [0, 1] as Vec2, y: [0, 1] as Vec2 },
+    needs_auto_range
+      ? series_extents(series, x_scale_type, y_scale_type)
+      : { x: [0, 1] as Vec2, y: [0, 1] as Vec2 },
   )
-  let x_scale_type = $derived(x_axis.scale_type ?? `linear`)
-  let y_scale_type = $derived(y_axis.scale_type ?? `linear`)
   let has_plot_size = $derived(width > 0 && height > 0)
 
   const axis_range = (axis: AxisConfig, fallback: Vec2): Vec2 => [
@@ -383,7 +388,7 @@
       ? COLOR_BAR_DEFAULTS.vertical_footprint
       : COLOR_BAR_DEFAULTS.horizontal_footprint,
   )
-  let color_bar_placement = $derived.by(() => {
+  const get_color_bar_placement = () => {
     if (
       !color_bar_props ||
       render_mode !== `density` ||
@@ -404,21 +409,23 @@
       points: density_placement_points,
       grid_resolution: 12,
     })
-  })
+  }
   // Fallback footprint before the annotation snippet first renders; the real
   // footprint is measured once laid out (mirrors colorbar_fallback_size above)
   const annotation_fallback_size = { width: 120, height: 50 }
   // Auto-place the annotation snippet like the colorbar, but with the already-placed
   // colorbar's footprint as an exclusion zone so the two never overlap.
-  let annotation_placement = $derived.by(() => {
+  const get_annotation_placement = () => {
     if (!annotation || !width || !height) return null
 
+    const color_bar_placement = colorbar_tween.placed()
+      ? colorbar_tween.coords.target
+      : get_color_bar_placement()
+    const colorbar_footprint = full_footprint_or(colorbar_element, colorbar_fallback_size)
     const colorbar_rect = color_bar_placement && {
-      ...(colorbar_element?.offsetWidth && colorbar_element?.offsetHeight
-        ? measure_full_footprint(colorbar_element)
-        : colorbar_fallback_size),
-      x: color_bar_placement.x,
-      y: color_bar_placement.y,
+      ...colorbar_footprint,
+      x: color_bar_placement.x + colorbar_footprint.offset_x,
+      y: color_bar_placement.y + colorbar_footprint.offset_y,
     }
     return compute_element_placement({
       plot_bounds: plot_rect,
@@ -429,6 +436,21 @@
       points: density_placement_points,
       grid_resolution: 12,
     })
+  }
+  const colorbar_tween = create_placed_tween({
+    placement: get_color_bar_placement,
+    dims: () => ({ width, height }),
+    responsive: () => false,
+    element: () => colorbar_element,
+    on_element_resize: () => (colorbar_size_revision += 1),
+  })
+  const annotation_tween = create_placed_tween({
+    placement: get_annotation_placement,
+    dims: () => ({ width, height }),
+    responsive: () => false,
+    element: () => annotation_element,
+    placement_revision: () =>
+      `${colorbar_size_revision}:${colorbar_tween.coords.target.x}:${colorbar_tween.coords.target.y}`,
   })
 
   let auto_render_mode = $derived.by((): RenderMode => {
@@ -597,8 +619,9 @@
   })
 
   function pointer_coords(event: PointerEvent | MouseEvent): Point2D | null {
-    if (!wrapper) return null
-    const rect = wrapper.getBoundingClientRect()
+    if (!canvas) return null
+    // The fullscreen wrapper has a top border outside the canvas coordinate space.
+    const rect = canvas.getBoundingClientRect()
     return { x: event.clientX - rect.left, y: event.clientY - rect.top }
   }
 
@@ -854,43 +877,36 @@
   function on_pointer_down(event: PointerEvent) {
     if (event.button !== 0) return
     const coords = pointer_coords(event)
-    if (!coords) return
-    drag_start = coords
-    drag_current = coords
+    if (!coords || !point_in_rect(coords, plot_rect)) return
+    drag_state = { start: coords, current: coords }
     if (event.currentTarget instanceof HTMLElement) {
       event.currentTarget.setPointerCapture?.(event.pointerId)
     }
   }
 
   function on_pointer_drag(event: PointerEvent) {
-    if (!drag_start) {
+    if (!drag_state) {
       on_pointer_move(event)
       return
     }
     const coords = pointer_coords(event)
-    if (coords) drag_current = coords
+    if (coords) drag_state.current = coords
   }
 
   function on_pointer_up(event: PointerEvent) {
-    const start = drag_start
-    const end = drag_current
-    drag_start = null
-    drag_current = null
-
-    if (start && end && Math.abs(end.x - start.x) > 5 && Math.abs(end.y - start.y) > 5) {
-      const x0 = x_scale_fn.invert(start.x)
-      const x1 = x_scale_fn.invert(end.x)
-      const y0 = y_scale_fn.invert(start.y)
-      const y1 = y_scale_fn.invert(end.y)
-      x_range = [Math.min(x0, x1), Math.max(x0, x1)]
-      y_range = [Math.min(y0, y1), Math.max(y0, y1)]
-      has_user_range = true
-      suppress_next_click = true
-    }
+    if (!drag_state) return
+    const { start, current: end } = drag_state
+    drag_state = null
 
     if (event.currentTarget instanceof HTMLElement) {
       event.currentTarget.releasePointerCapture?.(event.pointerId)
     }
+    if (Math.abs(end.x - start.x) <= 5 || Math.abs(end.y - start.y) <= 5) return
+
+    x_range = sorted_range(x_scale_fn.invert(start.x), x_scale_fn.invert(end.x))
+    y_range = sorted_range(y_scale_fn.invert(start.y), y_scale_fn.invert(end.y))
+    has_user_range = true
+    suppress_next_click = true
   }
 
   onMount(() => {
@@ -1004,7 +1020,7 @@
       label_y={pad.t + plot_height / 2}
     />
 
-    <ZoomRect start={drag_start} current={drag_current} />
+    <ZoomRect start={drag_state?.start ?? null} current={drag_state?.current ?? null} />
 
     {#if point_label_payloads.length}
       <g class="point-label-leaders" clip-path="url(#{clip_path_id})">
@@ -1071,12 +1087,12 @@
     </div>
   {/if}
 
-  {#if color_bar_props && render_mode === `density` && density_result.max_count > 0 && color_bar_placement}
+  {#if width > 0 && height > 0 && color_bar_props && render_mode === `density` && density_result.max_count > 0}
     <div
       bind:this={colorbar_element}
       class="color-bar"
-      style:left={`${color_bar_placement.x}px`}
-      style:top={`${color_bar_placement.y}px`}
+      style:left={`${colorbar_tween.coords.current.x}px`}
+      style:top={`${colorbar_tween.coords.current.y}px`}
     >
       <ColorBar
         {...color_bar_props}
@@ -1087,12 +1103,12 @@
     </div>
   {/if}
 
-  {#if annotation && annotation_placement}
+  {#if width > 0 && height > 0 && annotation}
     <div
       bind:this={annotation_element}
       class="annotation"
-      style:left={`${annotation_placement.x}px`}
-      style:top={`${annotation_placement.y}px`}
+      style:left={`${annotation_tween.coords.current.x}px`}
+      style:top={`${annotation_tween.coords.current.y}px`}
     >
       {@render annotation({ height, width, fullscreen })}
     </div>

package/dist/plot/scatter/ScatterPlot.svelte

@@ -61,6 +61,7 @@
     has_explicit_position,
     measured_footprint,
     place_decorations,
+    placed_coords,
   } from '../core/auto-place'
   import {
     AXIS_DEFAULTS,
@@ -105,9 +106,9 @@
     AXIS_TITLE_OFFSET,
     calc_auto_padding,
     filter_padding,
+    full_footprint_or,
     LABEL_GAP_DEFAULT,
     y2_axis_label_x,
-    measure_full_footprint,
     measure_max_tick_width,
     sample_series_obstacle_points,
   } from '../core/layout'
@@ -417,16 +418,25 @@
   const colorbar_is_horizontal = $derived(
     (color_bar?.orientation ?? `horizontal`) === `horizontal`,
   )
-  const colorbar_footprint = $derived(
-    colorbar_element?.offsetWidth && colorbar_element?.offsetHeight
-      ? measure_full_footprint(colorbar_element)
-      : colorbar_is_horizontal
-        ? COLOR_BAR_DEFAULTS.horizontal_footprint
-        : COLOR_BAR_DEFAULTS.vertical_footprint,
-  )
-  const legend_footprint = $derived(
-    measured_footprint(legend_element, { width: 120, height: 80 }),
+  // Fallback estimate (with room for tick labels) used before the colorbar first
+  // renders; compute_element_placement measures the real footprint once it's laid out
+  const colorbar_fallback_size = $derived(
+    colorbar_is_horizontal
+      ? COLOR_BAR_DEFAULTS.horizontal_footprint
+      : COLOR_BAR_DEFAULTS.vertical_footprint,
   )
+  // full footprint (not the offset box): colorbar tick labels are absolutely
+  // positioned outside the bar and must count toward reserved margins
+  let colorbar_size_revision = $state(0)
+  let legend_size_revision = $state(0)
+  const colorbar_footprint = $derived.by(() => {
+    void colorbar_size_revision
+    return full_footprint_or(colorbar_element, colorbar_fallback_size)
+  })
+  const legend_footprint = $derived.by(() => {
+    void legend_size_revision
+    return measured_footprint(legend_element, { width: 120, height: 80 })
+  })
   const legend_has_explicit_pos = $derived(has_explicit_position(legend?.style))
 
   // Plot-specific obstacle field: series points/lines normalized to [0,1] (y=0 at top)
@@ -936,7 +946,7 @@
   let ref_lines_by_z = $derived(group_ref_lines_by_z(index_ref_lines(ref_lines)))
 
   // Calculate best legend placement using continuous grid sampling
-  let legend_placement = $derived.by(() => {
+  const get_legend_placement = () => {
     const should_place =
       legend != null && (legend_data.length > 1 || Object.keys(legend ?? {}).length > 0)
 
@@ -955,23 +965,27 @@
     }
 
     return compute_element_placement(placement_config)
-  })
+  }
 
   // Calculate color bar placement (coordinates with legend to avoid overlap)
-  let color_bar_placement = $derived.by(() => {
+  const get_color_bar_placement = () => {
     if (!color_bar || all_color_values.length === 0 || !width || !height) return null
 
     const plot_width = width - pad.l - pad.r
     const plot_height = height - pad.t - pad.b
 
-    // Fallback estimate (with room for tick labels) used before the colorbar first
-    // renders; compute_element_placement measures the real footprint once it's laid out
-    const colorbar_size = colorbar_is_horizontal
-      ? COLOR_BAR_DEFAULTS.horizontal_footprint
-      : COLOR_BAR_DEFAULTS.vertical_footprint
-
     // Build exclusion rects (avoid legend if it's placed)
     const exclude_rects: Rect[] = []
+    const legend_placement =
+      legend_is_dragging && legend_manual_position
+        ? legend_manual_position
+        : legend_has_explicit_pos && legend_element
+          ? { x: legend_element.offsetLeft, y: legend_element.offsetTop }
+          : legend_auto_outside
+            ? { x: legend_outside_x, y: legend_outside_y }
+            : legend_tween.placed()
+              ? legend_tween.coords.target
+              : get_legend_placement()
     if (legend_element && legend_placement) {
       exclude_rects.push({
         x: legend_placement.x,
@@ -984,38 +998,44 @@
     return compute_element_placement({
       plot_bounds: { x: pad.l, y: pad.t, width: plot_width, height: plot_height },
       element: colorbar_element,
-      element_size: colorbar_size,
+      element_size: colorbar_fallback_size,
       // Small gap from the corner; the full-footprint measurement reserves the tick
       // labels, so this alone keeps the colorbar off the axes
       axis_clearance: color_bar?.axis_clearance ?? 15,
       exclude_rects,
       points: plot_points_for_placement,
     })
-  })
+  }
 
   // Active legend placement (null if user set explicit position in style)
-  let active_legend_placement = $derived(
-    legend_placement && !legend_has_explicit_pos ? legend_placement : null,
-  )
+  const get_active_legend_placement = () =>
+    legend_has_explicit_pos ? null : get_legend_placement()
 
   // Tweened colorbar/legend coordinates with shared placement stability gating
-  const colorbar_tween = create_placed_tween({
-    placement: () => color_bar_placement,
-    dims: () => ({ width, height }),
-    responsive: () => color_bar?.responsive ?? false,
-    element: () => colorbar_element,
-    tween: () => color_bar?.tween,
-  })
   const legend_tween = create_placed_tween({
-    placement: () => active_legend_placement,
+    placement: get_active_legend_placement,
     dims: () => ({ width, height }),
     responsive: () => legend?.responsive ?? false,
     element: () => legend_element,
     tween: () => legend?.tween,
+    on_element_resize: () => (legend_size_revision += 1),
+    placement_revision: () => colorbar_size_revision,
     // Leave coords alone mid-drag; once dragged, the manual position wins permanently
     suspended: () => legend_is_dragging,
     manual_position: () => legend_manual_position,
   })
+  const colorbar_tween = create_placed_tween({
+    placement: get_color_bar_placement,
+    dims: () => ({ width, height }),
+    responsive: () => color_bar?.responsive ?? false,
+    element: () => colorbar_element,
+    tween: () => color_bar?.tween,
+    on_element_resize: () => (colorbar_size_revision += 1),
+    placement_revision: () =>
+      `${legend_size_revision}:${legend_tween.coords.target.x}:${legend_tween.coords.target.y}:${
+        legend_auto_outside ? `${legend_outside_x}:${legend_outside_y}` : `inside`
+      }:${legend?.style ?? ``}`,
+  })
 
   // Generate axis ticks - consolidated into single derived for efficiency
   let axis_ticks = $derived.by(() => {
@@ -1091,7 +1111,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),
     }),
@@ -1928,7 +1950,7 @@
     {/if}
 
     <!-- Color Bar -->
-    {#if color_bar && all_color_values.length > 0 && color_bar_placement}
+    {#if width > 0 && height > 0 && color_bar && all_color_values.length > 0}
       {@const color_domain = [
         (typeof color_scale === `string` ? undefined : color_scale.value_range)?.[0] ??
           auto_color_range[0],
@@ -1968,22 +1990,15 @@
     {#if legend != null && legend_data.length > 0 && (legend_data.length > 1 || Object.keys(legend ?? {}).length > 0)}
       {@const default_x = pad.l + 10}
       {@const default_y = pad.t + 10}
-      {@const current_x =
-        legend_is_dragging && legend_manual_position
-          ? legend_manual_position.x
-          : legend_auto_outside
-            ? legend_outside_x
-            : legend_placement
-              ? legend_tween.coords.current.x
-              : default_x}
-      {@const current_y =
-        legend_is_dragging && legend_manual_position
-          ? legend_manual_position.y
-          : legend_auto_outside
-            ? legend_outside_y
-            : legend_placement
-              ? legend_tween.coords.current.y
-              : default_y}
+      {@const auto_position = placed_coords(
+        legend_auto_outside,
+        { x: legend_outside_x, y: legend_outside_y },
+        legend_tween.placed(),
+        legend_tween.coords.current,
+        { x: default_x, y: default_y },
+      )}
+      {@const current_position =
+        legend_is_dragging && legend_manual_position ? legend_manual_position : auto_position}
       <PlotLegend
         bind:root_element={legend_element}
         series_data={legend_data}
@@ -2046,8 +2061,8 @@
         }}
         style={`
           position: absolute;
-          left: ${current_x}px;
-          top: ${current_y}px;
+          left: ${current_position.x}px;
+          top: ${current_position.y}px;
           pointer-events: auto;
           ${legend?.style ?? ``}
         `}

package/dist/plot/scatter/adaptive-density.d.ts

@@ -67,7 +67,7 @@ export type BinTransforms = {
 export declare function scale_bin_transform(scale_type?: ScaleType): BinTransform;
 export declare const get_metadata_at: <Metadata>(metadata: DensePointSeries<Metadata>[`metadata`], point_idx: number) => Metadata | undefined;
 export declare const range_bounds: (range: Vec2) => Vec2;
-export declare function series_extents(series: readonly DensePointSeries[]): {
+export declare function series_extents(series: readonly DensePointSeries[], x_scale_type?: ScaleType, y_scale_type?: ScaleType): {
     x: Vec2;
     y: Vec2;
 };

package/dist/plot/scatter/adaptive-density.js

@@ -33,39 +33,55 @@ export const range_bounds = (range) => range[0] <= range[1] ? range : [range[1],
 const in_bounds = (value, min, max) => Number.isFinite(value) && value >= min && value <= max;
 const value_bin = (value, min, span, bins) => Math.min(bins - 1, Math.max(0, Math.floor(((value - min) / span) * bins)));
 const series_length = (srs) => Math.min(srs.x.length, srs.y.length);
-const padded_extent = (min, max) => {
+const padded_extent = (min, max, scale_type) => {
+    const log_scale = get_scale_type_name(scale_type) === `log`;
     if (!Number.isFinite(min) || !Number.isFinite(max))
-        return [0, 1];
-    if (min === max)
-        return [min - 0.5, max + 0.5];
-    const padding = (max - min) * 0.05;
-    return [min - padding, max + padding];
+        return log_scale ? [1, 10] : [0, 1];
+    const { forward, inverse } = scale_bin_transform(scale_type);
+    const t_min = forward(min);
+    const t_max = forward(max);
+    if (t_min === t_max) {
+        if (log_scale) {
+            const center = Math.max(min, LOG_EPS);
+            return [Math.max(LOG_EPS, center / Math.sqrt(10)), center * Math.sqrt(10)];
+        }
+        return [inverse(t_min - 0.5), inverse(t_max + 0.5)];
+    }
+    const padding = (t_max - t_min) * 0.05;
+    const clamp = (val) => Math.min(Number.MAX_VALUE, Math.max(-Number.MAX_VALUE, val));
+    return [clamp(inverse(t_min - padding)), clamp(inverse(t_max + padding))];
 };
-export function series_extents(series) {
+export function series_extents(series, x_scale_type, y_scale_type) {
     let x_min = Infinity;
     let x_max = -Infinity;
     let y_min = Infinity;
     let y_max = -Infinity;
+    const log_x = get_scale_type_name(x_scale_type) === `log`;
+    const log_y = get_scale_type_name(y_scale_type) === `log`;
     for (const srs of series) {
         const n_points = series_length(srs);
         for (let idx = 0; idx < n_points; idx++) {
             const x = srs.x[idx];
             const y = srs.y[idx];
-            if (Number.isFinite(x)) {
-                if (x < x_min)
-                    x_min = x;
-                if (x > x_max)
-                    x_max = x;
-            }
-            if (Number.isFinite(y)) {
-                if (y < y_min)
-                    y_min = y;
-                if (y > y_max)
-                    y_max = y;
-            }
+            if (!Number.isFinite(x) || !Number.isFinite(y))
+                continue;
+            // Align with bin_points / log scale floor so sub-LOG_EPS samples don't widen extent
+            if ((log_x && x < LOG_EPS) || (log_y && y < LOG_EPS))
+                continue;
+            if (x < x_min)
+                x_min = x;
+            if (x > x_max)
+                x_max = x;
+            if (y < y_min)
+                y_min = y;
+            if (y > y_max)
+                y_max = y;
         }
     }
-    return { x: padded_extent(x_min, x_max), y: padded_extent(y_min, y_max) };
+    return {
+        x: padded_extent(x_min, x_max, x_scale_type),
+        y: padded_extent(y_min, y_max, y_scale_type),
+    };
 }
 export function bin_points(series, x_range, y_range, x_bins, y_bins, transforms) {
     const counts = new Uint32Array(x_bins * y_bins);

package/dist/plot/sunburst/Sunburst.svelte

@@ -32,6 +32,7 @@
     hierarchy_legend_items,
     is_activation_key,
     node_handler_props,
+    observe_height,
     pointer_pos,
     prune_muted_ids,
     safe_hierarchy_layout,
@@ -60,6 +61,7 @@
   import { Tween, type TweenOptions } from 'svelte/motion'
   import { SvelteSet } from 'svelte/reactivity'
 
+  // Preserve the established outer inset; pass `padding` to override chart-edge space.
   const DEFAULT_PADDING: Required<Sides> = { t: 10, b: 10, l: 10, r: 10 }
 
   // An arc with its current screen-space geometry (angles in radians, radii in px)
@@ -184,10 +186,10 @@
   let pad = $derived(filter_padding(padding, DEFAULT_PADDING))
   let inner_width = $derived(Math.max(0, width - pad.l - pad.r))
   let avail_height = $derived(Math.max(0, height - pad.t - pad.b))
-  // measured height of the bottom colorbar, reserved from the chart so it never overlaps
-  // the arcs (16px covers its bottom offset + a small gap). reset to 0 when the colorbar
-  // is hidden (effect below) since bind:clientHeight doesn't clear on unmount; capped at
-  // half the area so a bad measurement can't collapse the chart
+  // measured height of the bottom colorbar (via observe_height, which resets it
+  // to 0 on unmount), reserved from the chart so it never overlaps the arcs
+  // (16px covers its bottom offset + a small gap); capped at half the area so a
+  // bad measurement can't collapse the chart
   let colorbar_height = $state(0)
   let colorbar_reserve = $derived(
     colorbar_height > 0 ? Math.min(colorbar_height + 16, avail_height / 2) : 0,
@@ -310,11 +312,6 @@
   )
   const arc_color = (arc: PositionedArc<Metadata>): string =>
     metric?.colors[arc.node_idx] ?? arc.color
-  // release the colorbar's reserved chart space when it's not rendered
-  $effect(() => {
-    if (!metric || colorbar == null) colorbar_height = 0
-  })
-
   // Hovered arc + its ancestors/descendants stay fully opaque, others dim
   let arc_dim = $derived(compute_node_dim(layout.arcs, muted_ids, hovered_idx))
 
@@ -789,17 +786,19 @@
   {/if}
 
   {#if metric && colorbar != null}
-    <div
-      bind:clientHeight={colorbar_height}
-      style="position: absolute; bottom: var(--sunburst-colorbar-bottom, 8px); left: var(--sunburst-colorbar-left, 50%); transform: var(--sunburst-colorbar-transform, translateX(-50%)); width: var(--sunburst-colorbar-width, 40%); min-width: 120px; pointer-events: auto;"
-    >
-      <ColorBar
-        {color_scale}
-        range={metric.range}
-        {...colorbar}
-        wrapper_style={`width: 100%; ${colorbar?.wrapper_style ?? ``}`}
-      />
-    </div>
+    <!-- positioning + height measurement live on ColorBar's own root (via rest
+    props + attachment) instead of an extra wrapper div -->
+    <ColorBar
+      {color_scale}
+      range={metric.range}
+      {...colorbar}
+      wrapper_style="{colorbar?.orientation === `vertical`
+        ? `--cbar-height: var(--sunburst-colorbar-height, 150px);`
+        : ``} {colorbar?.wrapper_style ?? ``}"
+      style="position: absolute; bottom: var(--sunburst-colorbar-bottom, 8px); left: var(--sunburst-colorbar-left, 50%); transform: var(--sunburst-colorbar-transform, translateX(-50%)); width: var(--sunburst-colorbar-width, 40%); min-width: 120px; pointer-events: auto; {colorbar?.style ??
+        ``}"
+      {@attach observe_height((px) => (colorbar_height = px))}
+    />
   {/if}
 
   {@render children?.({ height, width, fullscreen })}
@@ -818,6 +817,7 @@
     flex: var(--sunburst-flex, 1 1 auto);
     display: var(--sunburst-display, flex);
     flex-direction: column;
+    /* Use the plot background by default; set --sunburst-bg to override it. */
     background: var(--sunburst-bg, var(--plot-bg));
     border-radius: var(--sunburst-border-radius, var(--border-radius, 3pt));
   }