matterviz 0.3.3 → 0.3.5

package/dist/plot/Histogram.svelte

@@ -218,6 +218,7 @@
 
   // Legend placement stability state
   let legend_element = $state<HTMLDivElement | undefined>()
+  let hovered_legend_series_idx = $state<number | null>(null)
   const legend_hover = create_hover_lock()
   const dim_tracker = create_dimension_tracker()
   let has_initial_legend_placement = $state(false)
@@ -226,12 +227,17 @@
   $effect(() => () => legend_hover.cleanup())
 
   // Derived data
+  type IndexedSeries = { series_data: DataSeries; series_idx: number }
+  let selected_series_entries = $derived<IndexedSeries[]>(
+    series
+      .map((series_data: DataSeries, series_idx: number) => ({ series_data, series_idx }))
+      .filter(({ series_data }) =>
+        (series_data.visible ?? true) &&
+        (mode !== `single` || !selected_property || series_data.label === selected_property)
+      ),
+  )
   let selected_series = $derived(
-    mode === `single` && selected_property
-      ? series.filter((srs: DataSeries) =>
-        (srs.visible ?? true) && srs.label === selected_property
-      )
-      : series.filter((srs: DataSeries) => srs.visible ?? true),
+    selected_series_entries.map(({ series_data }) => series_data),
   )
 
   // Separate series by y-axis
@@ -472,7 +478,7 @@
     const x2_hist_generator = x2_series.length > 0
       ? bin().domain([ranges.current.x2[0], ranges.current.x2[1]]).thresholds(bins)
       : null
-    return selected_series.map((series_data, series_idx) => {
+    return selected_series_entries.map(({ series_data, series_idx }) => {
       const use_x2 = series_data.x_axis === `x2`
       const active_hist = use_x2 && x2_hist_generator
         ? x2_hist_generator
@@ -551,15 +557,15 @@
 
     const points: { x: number; y: number }[] = []
 
-    for (const { bins, x_scale, y_scale } of histogram_data) {
-      for (const bin of bins) {
-        if (bin.length > 0) {
-          const bar_x = x_scale(((bin.x0 ?? 0) + (bin.x1 ?? 0)) / 2)
-          const bar_y = y_scale(bin.length)
+    for (const { bins: series_bins, x_scale, y_scale } of histogram_data) {
+      for (const series_bin of series_bins) {
+        if (series_bin.length > 0) {
+          const bar_x = x_scale(((series_bin.x0 ?? 0) + (series_bin.x1 ?? 0)) / 2)
+          const bar_y = y_scale(series_bin.length)
           if (isFinite(bar_x) && isFinite(bar_y)) {
             // Add multiple points for taller bars to increase their weight
             // Cap to prevent O(N·count/10) blow-ups for large counts
-            const weight = Math.min(20, Math.ceil(bin.length / 10))
+            const weight = Math.min(20, Math.ceil(series_bin.length / 10))
             for (let idx = 0; idx < weight; idx++) points.push({ x: bar_x, y: bar_y })
           }
         }
@@ -596,7 +602,7 @@
   // untrack() explicitly captures initial tween config (intentional - config set once at mount)
   const tweened_legend_coords = new Tween(
     { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...(legend?.tween ?? {}) })),
+    untrack(() => ({ duration: 400, ...legend?.tween })),
   )
 
   // Update legend position with stability checks
@@ -1431,11 +1437,18 @@
 
     <!-- Histogram bars (rendered after axes so bars appear above grid lines) -->
     {#each histogram_data as
-      { id, bins, color, label, x_scale, y_scale, x_axis: srs_x_axis, y_axis },
-      series_idx
-      (id ?? series_idx)
+      { id, bins, color, label, x_scale, y_scale, x_axis: srs_x_axis, y_axis, series_idx },
+      idx
+      (id ?? idx)
     }
-      <g class="histogram-series" data-series-idx={series_idx}>
+      <g
+        class="histogram-series"
+        data-series-idx={series_idx}
+        opacity={hovered_legend_series_idx !== null &&
+            hovered_legend_series_idx !== series_idx
+          ? 0.25
+          : 1}
+      >
         {#each bins as bin, bin_idx (bin_idx)}
           {@const bar_x = x_scale(bin.x0!)}
           {@const bar_width = Math.max(1, Math.abs(x_scale(bin.x1!) - bar_x))}
@@ -1561,6 +1574,11 @@
       series_data={legend_data}
       on_toggle={legend?.on_toggle || toggle_series_visibility}
       on_hover_change={legend_hover.set_locked}
+      on_item_hover={(series_idx) =>
+        (hovered_legend_series_idx = series_idx != null && series_idx >= 0
+          ? series_idx
+          : null)}
+      active_series_idx={hover_info?.series_idx ?? hovered_legend_series_idx}
       style={`
         position: absolute;
         left: ${legend_placement ? tweened_legend_coords.current.x : pad.l + 10}px;
@@ -1595,8 +1613,8 @@
     left: 0;
     width: 100vw !important;
     height: 100vh !important;
-    /* Must be higher than Structure.svelte's --struct-buttons-z-index (100000000) */
-    z-index: var(--histogram-fullscreen-z-index, 100000001);
+    /* Must be higher than Structure.svelte's --struct-buttons-z-index. */
+    z-index: var(--histogram-fullscreen-z-index, var(--z-index-overlay-nav, 100000001));
     margin: 0;
     border-radius: 0;
     background: var(--histogram-fullscreen-bg, var(--histogram-bg, var(--plot-bg)));

package/dist/plot/Line.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { TweenedOptions } from './'
   import { DEFAULTS } from '../settings'
   import { extent, min } from 'd3-array'
   import { interpolatePath } from 'd3-interpolate-path'
@@ -7,7 +6,7 @@
   import { untrack } from 'svelte'
   import { linear } from 'svelte/easing'
   import type { SVGAttributes } from 'svelte/elements'
-  import { Tween } from 'svelte/motion'
+  import { Tween, type TweenOptions } from 'svelte/motion'
 
   let {
     points,
@@ -26,7 +25,7 @@
     line_width?: number
     area_color?: string
     area_stroke?: string | null
-    line_tween?: TweenedOptions<string>
+    line_tween?: TweenOptions<string>
     line_dash?: string
   } = $props()
 

package/dist/plot/Line.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { TweenedOptions } from './';
 import type { SVGAttributes } from 'svelte/elements';
+import { type TweenOptions } from 'svelte/motion';
 type $$ComponentProps = Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
     points: readonly [number, number][];
     origin: [number, number];
@@ -7,7 +7,7 @@ type $$ComponentProps = Omit<SVGAttributes<SVGPathElement>, `origin` | `points`>
     line_width?: number;
     area_color?: string;
     area_stroke?: string | null;
-    line_tween?: TweenedOptions<string>;
+    line_tween?: TweenOptions<string>;
     line_dash?: string;
 };
 declare const Line: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/plot/PlotLegend.svelte

@@ -26,6 +26,10 @@
     on_drag = () => {},
     on_drag_end = () => {},
     on_hover_change,
+    on_item_hover,
+    active_series_idx = null,
+    filterable = true,
+    filter_threshold = 12,
     draggable = true,
     root_element = $bindable<HTMLDivElement | undefined>(undefined),
     ...rest
@@ -54,6 +58,10 @@
     on_drag_end?: (event: MouseEvent) => void
     // Callback when hover state changes (for placement stability)
     on_hover_change?: (is_hovered: boolean) => void
+    on_item_hover?: (series_idx: number | null) => void
+    active_series_idx?: number | null
+    filterable?: boolean
+    filter_threshold?: number
     draggable?: boolean
     // Bindable reference to the root DOM element for size measurements
     root_element?: HTMLDivElement
@@ -61,9 +69,14 @@
 
   let is_dragging = $state(false)
   let drag_start_coords = $state<{ x: number; y: number } | null>(null)
+  let legend_filter = $state(``)
 
   // Group series by legend_group, preserving order
-  type GroupedData = { group_name: string | null; items: LegendItem[] }
+  type GroupedData = {
+    group_name: string | null
+    items: LegendItem[]
+    all_items?: LegendItem[]
+  }
   let grouped_series = $derived.by<GroupedData[]>(() => {
     const groups: GroupedData[] = []
     const group_map = new SvelteMap<string | null, LegendItem[]>()
@@ -88,6 +101,22 @@
     ),
   )
 
+  let show_filter = $derived(filterable && series_data.length >= filter_threshold)
+
+  let filtered_grouped_series = $derived.by<GroupedData[]>(() => {
+    const filter = show_filter ? legend_filter.trim().toLowerCase() : ``
+    if (!filter) return grouped_series
+    return grouped_series
+      .map(({ group_name, items }) => ({
+        group_name,
+        all_items: items,
+        items: items.filter((item) =>
+          `${group_name ?? ``} ${strip_html(item.label)}`.toLowerCase().includes(filter)
+        ),
+      }))
+      .filter(({ items }) => items.length > 0)
+  })
+
   function toggle_group_collapse(group_name: string) {
     // Normalize to SvelteSet if a plain Set was passed (ensures reactivity)
     if (!(collapsed_groups instanceof SvelteSet)) {
@@ -111,7 +140,10 @@
       document.body.style.userSelect = `auto`
     }
   }
-  onDestroy(cleanup_drag_listeners)
+  onDestroy(() => {
+    cleanup_drag_listeners()
+    on_item_hover?.(null)
+  })
 
   function handle_legend_mouse_down(event: MouseEvent) {
     if (!draggable) return
@@ -185,6 +217,7 @@
   <div
     class="legend-item"
     class:hidden={!series.visible}
+    class:active={active_series_idx === series.series_idx}
     class:indented={indent}
     class:fill-item={is_fill_item}
     style={item_style}
@@ -204,6 +237,10 @@
         toggle_item(series)
       }
     }}
+    onmouseenter={() => on_item_hover?.(series.series_idx)}
+    onmouseleave={() => on_item_hover?.(null)}
+    onfocus={() => on_item_hover?.(series.series_idx)}
+    onblur={() => on_item_hover?.(null)}
     role="button"
     tabindex="0"
     aria-pressed={series.visible}
@@ -312,28 +349,43 @@
   class:is-dragging={is_dragging}
   class:grouped={has_groups}
 >
-  {#each grouped_series as { group_name, items } (group_name ?? `__ungrouped__`)}
+  {#if show_filter}
+    <input
+      class="legend-filter"
+      type="search"
+      bind:value={legend_filter}
+      placeholder="Filter legend"
+      aria-label="Filter legend items"
+      onclick={(event) => event.stopPropagation()}
+      onmousedown={(event) => event.stopPropagation()}
+    />
+  {/if}
+  {#if show_filter && legend_filter && filtered_grouped_series.length === 0}
+    <span class="legend-empty">No legend items</span>
+  {/if}
+  {#each filtered_grouped_series as { group_name, items, all_items } (group_name ?? `__ungrouped__`)}
     {#if group_name !== null && has_groups}
       <!-- Group header -->
+      {@const group_items = all_items ?? items}
       {@const is_collapsed = collapsed_groups.has(group_name)}
-      {@const group_visible = items.some((item) => item.visible)}
+      {@const group_visible = group_items.some((item) => item.visible)}
       <div
         class="legend-group-header"
         class:hidden={!group_visible}
         onclick={(event: MouseEvent) => {
           event.preventDefault()
           event.stopPropagation()
-          handle_group_click(group_name, items)
+          handle_group_click(group_name, group_items)
         }}
         ondblclick={(event: MouseEvent) => {
           event.preventDefault()
           event.stopPropagation()
-          on_group_double_click?.(group_name, items.map((item) => item.series_idx))
+          on_group_double_click?.(group_name, group_items.map((item) => item.series_idx))
         }}
         onkeydown={(event) => {
           if ([`Enter`, ` `].includes(event.key)) {
             event.preventDefault()
-            handle_group_click(group_name, items)
+            handle_group_click(group_name, group_items)
           }
         }}
         role="button"
@@ -425,6 +477,22 @@
     transition: var(--plot-legend-item-transition, opacity 0.3s ease);
     color: var(--plot-legend-item-color);
   }
+  .legend-filter {
+    box-sizing: border-box;
+    width: calc(100% - 6px);
+    min-width: 10em;
+    margin: 3px;
+    padding: 2px 5px;
+    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+    border-radius: var(--border-radius, 3pt);
+    background: color-mix(in srgb, var(--plot-legend-bg-color, Canvas) 88%, currentColor);
+    color: inherit;
+    font: inherit;
+  }
+  .legend-empty {
+    padding: var(--plot-legend-item-padding, 1px 8px 1px 3px);
+    opacity: 0.7;
+  }
   .legend-item.indented {
     padding: var(--plot-legend-item-padding, 0 8px 1px 3px);
     padding-left: var(--plot-legend-group-indent, 16px);
@@ -432,9 +500,12 @@
   .legend-item.hidden {
     opacity: var(--plot-legend-item-hidden-opacity, 0.5);
   }
-  .legend-item:hover, .legend-item:focus {
+  .legend-item:hover, .legend-item:focus, .legend-item.active {
     background-color: var(--plot-legend-item-hover-bg-color);
   }
+  .legend-item.active {
+    box-shadow: inset 2px 0 0 var(--accent-color, currentColor);
+  }
   .legend-marker {
     display: inline-flex; /* Use flex to align items */
     align-items: center; /* Vertically center items */

package/dist/plot/PlotLegend.svelte.d.ts

@@ -17,6 +17,10 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `style`> & {
     on_drag?: (event: MouseEvent) => void;
     on_drag_end?: (event: MouseEvent) => void;
     on_hover_change?: (is_hovered: boolean) => void;
+    on_item_hover?: (series_idx: number | null) => void;
+    active_series_idx?: number | null;
+    filterable?: boolean;
+    filter_threshold?: number;
     draggable?: boolean;
     root_element?: HTMLDivElement;
 };

package/dist/plot/PortalSelect.svelte

@@ -100,15 +100,15 @@
       btn.setAttribute(`role`, `option`)
       btn.innerHTML = sanitize_html(format_option(opt))
       style_sub_sup(btn)
-      btn.onclick = () => select(opt.key)
-      btn.onmouseenter = () => {
+      btn.addEventListener(`click`, () => select(opt.key))
+      btn.addEventListener(`mouseenter`, () => {
         if (!btn.classList.contains(`selected`)) {
           btn.style.background = `rgba(128, 128, 128, 0.15)`
         }
-      }
-      btn.onmouseleave = () => {
+      })
+      btn.addEventListener(`mouseleave`, () => {
         if (!btn.classList.contains(`selected`)) btn.style.background = `transparent`
-      }
+      })
       if (opt.key === selected_key) {
         btn.classList.add(`selected`)
         btn.style.cssText = portal_styles.btn + portal_styles.btn_selected

package/dist/plot/ScatterPlot.svelte

@@ -32,7 +32,6 @@
     ScatterHandlerProps,
     Sides,
     StyleOverrides,
-    TweenedOptions,
     UserContentProps,
     XyObj,
   } from './'
@@ -81,7 +80,7 @@
   import type { ComponentProps, Snippet } from 'svelte'
   import { untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { Tween } from 'svelte/motion'
+  import { Tween, type TweenOptions } from 'svelte/motion'
   import { SvelteSet } from 'svelte/reactivity'
   import type { FillPathPoint } from './fill-utils'
   import {
@@ -206,15 +205,15 @@
     color_bar?:
       | (ComponentProps<typeof ColorBar> & {
         margin?: number | Sides
-        tween?: TweenedOptions<XyObj>
+        tween?: TweenOptions<XyObj>
         responsive?: boolean // Allow colorbar to reposition if density changes (default: false)
       })
       | null
     label_placement_config?: Partial<LabelPlacementConfig>
     hover_config?: Partial<HoverConfig>
     legend?: LegendConfig | null
-    point_tween?: TweenedOptions<XyObj>
-    line_tween?: TweenedOptions<string>
+    point_tween?: TweenOptions<XyObj>
+    line_tween?: TweenOptions<string>
     point_events?: Record<
       string,
       (payload: { point: InternalPoint<Metadata>; event: Event }) => void
@@ -245,15 +244,15 @@
   const final_x_axis = $derived({
     ...AXIS_DEFAULTS,
     label_shift: { x: 0, y: -40 }, // x-axis needs different label position
-    ...(x_axis ?? {}),
+    ...x_axis,
   })
-  const final_y_axis = $derived({ ...AXIS_DEFAULTS, ...(y_axis ?? {}) })
+  const final_y_axis = $derived({ ...AXIS_DEFAULTS, ...y_axis })
   const final_x2_axis = $derived({
     ...AXIS_DEFAULTS,
     label_shift: { x: 0, y: 40 }, // x2-axis label above top edge
-    ...(x2_axis ?? {}),
+    ...x2_axis,
   })
-  const final_y2_axis = $derived({ ...AXIS_DEFAULTS, ...(y2_axis ?? {}) })
+  const final_y2_axis = $derived({ ...AXIS_DEFAULTS, ...y2_axis })
   // Cache time-axis check — used in ~10 places for scale/tick/tooltip logic
   let is_time_x = $derived(
     is_time_scale(final_x_axis.scale_type, final_x_axis.format),
@@ -261,16 +260,16 @@
   let is_time_x2 = $derived(
     is_time_scale(final_x2_axis.scale_type, final_x2_axis.format),
   )
-  const final_display = $derived({ ...DEFAULTS.scatter.display, ...(display ?? {}) })
+  const final_display = $derived({ ...DEFAULTS.scatter.display, ...display })
   // Local state for styles (initialized from prop, owned by this component for controls)
   // Using $state because styles has bindings in ScatterPlotControls
   // untrack() explicitly captures initial prop value (intentional - props provide initial config)
   let styles = $state(untrack(() => ({
     show_points: DEFAULTS.scatter.show_points,
     show_lines: DEFAULTS.scatter.show_lines,
-    point: { ...DEFAULTS.scatter.point, ...(styles_init?.point ?? {}) },
-    line: { ...DEFAULTS.scatter.line, ...(styles_init?.line ?? {}) },
-    ...(styles_init ?? {}),
+    point: { ...DEFAULTS.scatter.point, ...styles_init?.point },
+    line: { ...DEFAULTS.scatter.line, ...styles_init?.line },
+    ...styles_init,
   })))
   let controls = $derived({ show: true, open: false, ...controls_init })
 
@@ -364,6 +363,7 @@
   let legend_is_dragging = $state(false)
   let legend_drag_offset = $state<{ x: number; y: number }>({ x: 0, y: 0 })
   let legend_manual_position = $state<{ x: number; y: number } | null>(null)
+  let hovered_legend_series_idx = $state<number | null>(null)
 
   // State for legend/colorbar placement stability
   let legend_element = $state<HTMLDivElement | undefined>()
@@ -394,13 +394,13 @@
 
     for (const srs of series_with_ids) {
       if (!srs) continue
-      const { x: xs, y: ys, visible = true, y_axis = `y1`, x_axis: x_ax = `x1` } =
+      const { x: xs, y: ys, visible = true, y_axis: series_y_axis = `y1`, x_axis: x_ax = `x1` } =
         srs as DataSeries
       for (let idx = 0; idx < xs.length; idx++) {
         const point = { x: xs[idx], y: ys[idx] }
         all.push(point)
         if (visible) {
-          if (y_axis === `y2`) y2.push(point)
+          if (series_y_axis === `y2`) y2.push(point)
           else y1.push(point)
           if (x_ax === `x2`) x2.push(point)
         }
@@ -666,7 +666,7 @@
           }
         }
 
-        const { x: xs, y: ys, color_values, size_values, ...rest } = data_series
+        const { x: xs, y: ys, color_values, size_values, ...series_rest } = data_series
 
         // Process points internally, adding properties beyond the base Point type
         const processed_points: InternalPoint<Metadata>[] = xs.map(
@@ -674,11 +674,11 @@
             x: x_val,
             y: ys[point_idx],
             color_value: color_values?.[point_idx],
-            metadata: process_prop(rest.metadata, point_idx) as Metadata | undefined,
-            point_style: process_prop(rest.point_style, point_idx),
-            point_hover: process_prop(rest.point_hover, point_idx),
-            point_label: process_prop(rest.point_label, point_idx),
-            point_offset: process_prop(rest.point_offset, point_idx),
+            metadata: process_prop(series_rest.metadata, point_idx) as Metadata | undefined,
+            point_style: process_prop(series_rest.point_style, point_idx),
+            point_hover: process_prop(series_rest.point_hover, point_idx),
+            point_label: process_prop(series_rest.point_label, point_idx),
+            point_offset: process_prop(series_rest.point_offset, point_idx),
             series_idx,
             point_idx,
             size_value: size_values?.[point_idx],
@@ -1141,12 +1141,12 @@
   // untrack() explicitly captures initial tween config (intentional - config set once at mount)
   const tweened_colorbar_coords = new Tween(
     { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...(color_bar?.tween ?? {}) })),
+    untrack(() => ({ duration: 400, ...color_bar?.tween })),
   )
   // Initialize tweened values for legend position - create once, update target via effect
   const tweened_legend_coords = new Tween(
     { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...(legend?.tween ?? {}) })),
+    untrack(() => ({ duration: 400, ...legend?.tween })),
   )
 
   // Update placement positions (with animation and stability checks)
@@ -1727,9 +1727,9 @@
     legend_manual_position = { x: constrained_x, y: constrained_y }
   }
 
-  function get_screen_coords(point: Point, series?: DataSeries): [number, number] {
+  function get_screen_coords(point: Point, data_series?: DataSeries): [number, number] {
     // convert data coordinates to potentially non-finite screen coordinates
-    const use_x2 = series?.x_axis === `x2`
+    const use_x2 = data_series?.x_axis === `x2`
     const active_x_scale = use_x2 ? x2_scale_fn : x_scale_fn
     const active_is_time_x = use_x2 ? is_time_x2 : is_time_x
     const screen_x = active_is_time_x
@@ -1738,7 +1738,7 @@
 
     const y_val = point.y
     // Determine which y-scale to use based on series y_axis property
-    const use_y2 = series?.y_axis === `y2`
+    const use_y2 = data_series?.y_axis === `y2`
     const y_scale = use_y2 ? y2_scale_fn : y_scale_fn
     const y_scale_type = use_y2
       ? get_scale_type_name(final_y2_axis.scale_type)
@@ -2035,7 +2035,7 @@
                       y1={-(height - pad.b - pad.t)}
                       y2="0"
                       {...DEFAULT_GRID_STYLE}
-                      {...(final_x_axis.grid_style ?? {})}
+                      {...final_x_axis.grid_style}
                     />
                   {/if}
                   <line y1="0" y2={inside ? -5 : 5} stroke="var(--border-color, gray)" />
@@ -2116,7 +2116,7 @@
                       x1="0"
                       x2={width - pad.l - pad.r}
                       {...DEFAULT_GRID_STYLE}
-                      {...(final_y_axis.grid_style ?? {})}
+                      {...final_y_axis.grid_style}
                     />
                   {/if}
                   <line
@@ -2186,7 +2186,7 @@
                         x1={-(width - pad.l - pad.r)}
                         x2="0"
                         {...DEFAULT_GRID_STYLE}
-                        {...(final_y2_axis.grid_style ?? {})}
+                        {...final_y2_axis.grid_style}
                       />
                     {/if}
                     <line
@@ -2256,7 +2256,7 @@
                         y1="0"
                         y2={height - pad.b - pad.t}
                         {...DEFAULT_GRID_STYLE}
-                        {...(final_x2_axis.grid_style ?? {})}
+                        {...final_x2_axis.grid_style}
                       />
                     {/if}
                     <line
@@ -2353,7 +2353,14 @@
         {#each filtered_series ?? [] as series_data (series_data._id)}
           {@const series_markers = series_data.markers ?? DEFAULT_MARKERS}
           {@const series_default_color = get_series_color(series_data.orig_series_idx ?? 0)}
-          <g data-series-id={series_data._id} clip-path="url(#{clip_path_id})">
+          <g
+            data-series-id={series_data._id}
+            clip-path="url(#{clip_path_id})"
+            opacity={hovered_legend_series_idx !== null &&
+                hovered_legend_series_idx !== series_data.orig_series_idx
+              ? 0.25
+              : 1}
+          >
             {#if series_markers?.includes(`line`)}
               {@const all_line_points = series_data.x.map((x, idx) => ({
           x,
@@ -2439,6 +2446,8 @@
                 <ScatterPoint
                   x={screen_x}
                   y={screen_y}
+                  is_dimmed={hovered_legend_series_idx !== null &&
+                    hovered_legend_series_idx !== point.series_idx}
                   is_hovered={tooltip_point?.series_idx === point.series_idx &&
                   tooltip_point?.point_idx === point.point_idx}
                   is_selected={selected_point?.series_idx === point.series_idx &&
@@ -2662,6 +2671,11 @@
         on_drag={handle_legend_drag}
         on_drag_end={() => (legend_is_dragging = false)}
         on_hover_change={legend_hover.set_locked}
+        on_item_hover={(series_idx) =>
+          (hovered_legend_series_idx = series_idx != null && series_idx >= 0
+            ? series_idx
+            : null)}
+        active_series_idx={tooltip_point?.series_idx ?? hovered_legend_series_idx}
         draggable={legend?.draggable ?? true}
         {...legend}
         on_toggle={legend?.on_toggle ??
@@ -2745,8 +2759,8 @@
     left: 0;
     width: 100vw !important;
     height: 100vh !important;
-    /* Must be higher than Structure.svelte's --struct-buttons-z-index (100000000) */
-    z-index: var(--scatter-fullscreen-z-index, 100000001);
+    /* Must be higher than Structure.svelte's --struct-buttons-z-index. */
+    z-index: var(--scatter-fullscreen-z-index, var(--z-index-overlay-nav, 100000001));
     margin: 0;
     border-radius: 0;
     background: var(--scatter-fullscreen-bg, var(--scatter-bg, var(--plot-bg)));

package/dist/plot/ScatterPlot.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { D3ColorSchemeName, D3InterpolateName } from '../colors';
-import type { AxisLoadError, BasePlotProps, ControlsConfig, DataLoaderFn, DataSeries, ErrorBand, FillHandlerEvent, FillRegion, HoverConfig, InternalPoint, LabelPlacementConfig, LegendConfig, PanConfig, PlotConfig, Point, RefLine, RefLineEvent, ScaleType, ScatterHandlerEvent, ScatterHandlerProps, Sides, StyleOverrides, TweenedOptions, UserContentProps, XyObj } from './';
+import type { AxisLoadError, BasePlotProps, ControlsConfig, DataLoaderFn, DataSeries, ErrorBand, FillHandlerEvent, FillRegion, HoverConfig, InternalPoint, LabelPlacementConfig, LegendConfig, PanConfig, PlotConfig, Point, RefLine, RefLineEvent, ScaleType, ScatterHandlerEvent, ScatterHandlerProps, Sides, StyleOverrides, UserContentProps, XyObj } from './';
 import { ColorBar } from './';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type TweenOptions } from 'svelte/motion';
 declare function $$render<Metadata extends Record<string, unknown> = Record<string, unknown>>(): {
     props: HTMLAttributes<HTMLDivElement> & Omit<BasePlotProps, "change"> & PlotConfig & {
         series?: DataSeries<Metadata>[];
@@ -40,14 +41,14 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         };
         color_bar?: (ComponentProps<typeof ColorBar> & {
             margin?: number | Sides;
-            tween?: TweenedOptions<XyObj>;
+            tween?: TweenOptions<XyObj>;
             responsive?: boolean;
         }) | null;
         label_placement_config?: Partial<LabelPlacementConfig>;
         hover_config?: Partial<HoverConfig>;
         legend?: LegendConfig | null;
-        point_tween?: TweenedOptions<XyObj>;
-        line_tween?: TweenedOptions<string>;
+        point_tween?: TweenOptions<XyObj>;
+        line_tween?: TweenOptions<string>;
         point_events?: Record<string, (payload: {
             point: InternalPoint<Metadata>;
             event: Event;

package/dist/plot/ScatterPlot3D.svelte

@@ -355,8 +355,10 @@
         }}
         pane_props={{
           ...controls.pane_props,
-          // z-index must exceed fullscreen z-index (100000001) to remain clickable in fullscreen mode
-          style: `--pane-z-index: 100000002; ${controls.pane_props?.style ?? ``}`,
+          // z-index must exceed fullscreen z-index to remain clickable in fullscreen mode
+          style: `--pane-z-index: var(--z-index-overlay-dialog, 100000002); ${
+            controls.pane_props?.style ?? ``
+          }`,
         }}
         bind:x_axis
         bind:y_axis
@@ -394,6 +396,7 @@
       <PlotLegend
         series_data={legend_data}
         on_toggle={toggle_series_visibility}
+        active_series_idx={tooltip_point?.series_idx ?? null}
         draggable={legend?.draggable ?? true}
         {...legend}
         style={`position: absolute; top: 2.5em; right: 1em; ${legend?.style ?? ``}`}
@@ -427,7 +430,7 @@
     left: 0;
     width: 100vw !important;
     height: 100vh !important;
-    z-index: var(--scatter3d-fullscreen-z-index, 100000001);
+    z-index: var(--scatter3d-fullscreen-z-index, var(--z-index-overlay-nav, 100000001));
     margin: 0;
     border-radius: 0;
     max-height: none !important;