matterviz 0.3.7 → 0.4.1

package/dist/plot/{ScatterPlot3D.svelte → scatter-3d/ScatterPlot3D.svelte}

@@ -2,15 +2,16 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import type { D3ColorSchemeName, D3InterpolateName } from '../colors'
-  import { FullscreenToggle } from '../layout'
-  import type { Vec2, Vec3 } from '../math'
-  import { ColorBar, PlotLegend } from './'
-  import { get_series_color } from './data-transform'
-  import type { Sides } from './layout'
+  import type { D3InterpolateName } from '../../colors'
+  import { FullscreenToggle } from '../../layout'
+  import type { Vec2, Vec3 } from '../../math'
+  import { ColorBar, PlotLegend } from '..'
+  import { get_series_color } from '../core/data-transform'
+  import type { Sides } from '../core/layout'
   import type {
     AxisConfig3D,
     CameraProjection3D,
+    ColorScaleConfig,
     ControlsConfig3D,
     DataSeries3D,
     DisplayConfig3D,
@@ -20,9 +21,10 @@
     RefPlane,
     ScaleType,
     Scatter3DHandlerEvent,
+    SizeScaleConfig,
     StyleOverrides3D,
     Surface3DConfig,
-  } from './types'
+  } from '../core/types'
   import { Canvas } from '@threlte/core'
   import * as extras from '@threlte/extras'
   import { onMount } from 'svelte'
@@ -30,7 +32,7 @@
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteMap, SvelteSet } from 'svelte/reactivity'
   import type { Camera, Scene } from 'three'
-  import { create_color_scale } from './scales'
+  import { calculate_domain, create_color_scale } from '../core/scales'
   import ScatterPlot3DControls from './ScatterPlot3DControls.svelte'
   import ScatterPlot3DScene from './ScatterPlot3DScene.svelte'
 
@@ -116,17 +118,9 @@
     z_axis?: AxisConfig3D
     display?: DisplayConfig3D
     styles?: StyleOverrides3D
-    color_scale?: {
-      type?: ScaleType
-      scheme?: D3ColorSchemeName | D3InterpolateName
-      value_range?: [number, number]
-    } | D3InterpolateName
+    color_scale?: ColorScaleConfig | D3InterpolateName
     color_bar?: ComponentProps<typeof ColorBar> & { margin?: number | Sides } | null
-    size_scale?: {
-      type?: ScaleType
-      radius_range?: [number, number]
-      value_range?: [number, number]
-    }
+    size_scale?: SizeScaleConfig
     legend?: LegendConfig | null
     camera_position?: Vec3
     camera_projection?: CameraProjection3D
@@ -175,11 +169,14 @@
         id_counts.set(srs.id, (id_counts.get(srs.id) ?? 0) + 1)
       }
     }
+    // Prefix classes stay disjoint: `idx:` keys have `x` at index 2 where `id:` keys
+    // have `:`, and `dup:` keys differ in first char. Within a class, idx is unique
+    // and bare ids are only used when they occur exactly once.
     return series.map((srs, idx) => {
-      if (srs?.id === undefined || srs.id === ``) return JSON.stringify([`idx`, idx])
-      return id_counts.get(srs.id) === 1
-        ? JSON.stringify([`id`, srs.id])
-        : JSON.stringify([`duplicate-id`, idx, srs.id])
+      if (srs?.id === undefined || srs.id === ``) return `idx:${idx}`
+      // include typeof so numeric/string ids (1 vs "1") don't collide on the same key
+      const id_key = `${typeof srs.id}:${String(srs.id)}`
+      return id_counts.get(srs.id) === 1 ? `id:${id_key}` : `dup:${idx}:${id_key}`
     })
   })
 
@@ -227,15 +224,7 @@
     ),
   )
 
-  let auto_color_range = $derived.by((): [number, number] => {
-    if (all_color_values.length === 0) return [0, 1]
-    let [min, max] = [Infinity, -Infinity]
-    for (const val of all_color_values) {
-      if (val < min) min = val
-      if (val > max) max = val
-    }
-    return [min, max]
-  })
+  let auto_color_range = $derived(calculate_domain(all_color_values))
 
   let color_scale_fn = $derived(
     create_color_scale(normalized_color_scale, auto_color_range),
@@ -342,7 +331,7 @@
           {z_axis}
           {display}
           {styles}
-          color_scale={normalized_color_scale}
+          {color_scale_fn}
           {size_scale}
           {camera_position}
           {camera_projection}
@@ -462,8 +451,10 @@
     border-radius: 0;
     max-height: none !important;
     overflow: hidden;
-    /* Add padding to prevent titles from being cropped at top */
-    padding-top: var(--plot-fullscreen-padding-top, 2em);
+    /* border-top (not padding-top): bind:clientHeight includes padding but excludes
+    borders - padding made the chart overflow + clip its bottom 2em (x-axis title) */
+    border-top: var(--plot-fullscreen-padding-top, 2em) solid
+      var(--scatter3d-bg, var(--plot-bg, transparent));
     box-sizing: border-box;
   }
   /* Threlte Canvas container needs flex: 1 to fill available space in flex layout

package/dist/plot/{ScatterPlot3D.svelte.d.ts → scatter-3d/ScatterPlot3D.svelte.d.ts}

@@ -1,8 +1,8 @@
-import type { D3ColorSchemeName, D3InterpolateName } from '../colors';
-import type { Vec3 } from '../math';
-import { ColorBar } from './';
-import type { Sides } from './layout';
-import type { AxisConfig3D, CameraProjection3D, ControlsConfig3D, DataSeries3D, DisplayConfig3D, InternalPoint3D, LegendConfig, RefLine3D, RefPlane, ScaleType, Scatter3DHandlerEvent, StyleOverrides3D, Surface3DConfig } from './types';
+import type { D3InterpolateName } from '../../colors';
+import type { Vec3 } from '../../math';
+import { ColorBar } from '..';
+import type { Sides } from '../core/layout';
+import type { AxisConfig3D, CameraProjection3D, ColorScaleConfig, ControlsConfig3D, DataSeries3D, DisplayConfig3D, InternalPoint3D, LegendConfig, RefLine3D, RefPlane, Scatter3DHandlerEvent, SizeScaleConfig, StyleOverrides3D, Surface3DConfig } from '../core/types';
 import * as extras from '@threlte/extras';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -18,19 +18,11 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         z_axis?: AxisConfig3D;
         display?: DisplayConfig3D;
         styles?: StyleOverrides3D;
-        color_scale?: {
-            type?: ScaleType;
-            scheme?: D3ColorSchemeName | D3InterpolateName;
-            value_range?: [number, number];
-        } | D3InterpolateName;
+        color_scale?: ColorScaleConfig | D3InterpolateName;
         color_bar?: (ComponentProps<typeof ColorBar> & {
             margin?: number | Sides;
         }) | null;
-        size_scale?: {
-            type?: ScaleType;
-            radius_range?: [number, number];
-            value_range?: [number, number];
-        };
+        size_scale?: SizeScaleConfig;
         legend?: LegendConfig | null;
         camera_position?: Vec3;
         camera_projection?: CameraProjection3D;
@@ -72,7 +64,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         controls_extra?: Snippet;
     };
     exports: {};
-    bindings: "fullscreen" | "hovered" | "camera_position" | "wrapper" | "tooltip_point" | "camera" | "scene" | "orbit_controls";
+    bindings: "fullscreen" | "wrapper" | "hovered" | "scene" | "camera" | "orbit_controls" | "camera_position" | "tooltip_point";
     slots: {};
     events: {};
 };
@@ -80,7 +72,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "fullscreen" | "hovered" | "camera_position" | "wrapper" | "tooltip_point" | "camera" | "scene" | "orbit_controls";
+    bindings(): "fullscreen" | "wrapper" | "hovered" | "scene" | "camera" | "orbit_controls" | "camera_position" | "tooltip_point";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/{ScatterPlot3DControls.svelte → scatter-3d/ScatterPlot3DControls.svelte}

@@ -1,19 +1,23 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../../overlays'
   // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
   // Pattern: `x_axis = { ...x_axis, prop: value }` instead of `x_axis.prop = value`
-  import { SettingsSection } from '../layout'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { SettingsSection } from '../../layout'
+  import type { Vec2 } from '../../math'
+  import DraggablePane from '../../overlays/DraggablePane.svelte'
   import type {
     AxisConfig3D,
     CameraProjection3D,
     DataSeries3D,
     DisplayConfig3D,
     Surface3DConfig,
-  } from './types'
+  } from '../core/types'
+  import { calculate_domain } from '../core/scales'
+  import { unique_id } from '../core/utils'
   import type { ComponentProps, Snippet } from 'svelte'
 
   // Unique ID prefix to avoid conflicts when multiple instances on same page
-  const uid = crypto.randomUUID().slice(0, 8)
+  const uid = unique_id(`scatter3d-ctrl`)
 
   let {
     show = $bindable(false),
@@ -38,19 +42,15 @@
     auto_rotate?: number
     series?: DataSeries3D[]
     surfaces?: Surface3DConfig[]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: PaneToggleProps
+    pane_props?: PaneProps
     children?: Snippet
   } = $props()
 
-  // Calculate auto ranges for reset
-  function calc_auto_range(values: number[]): [number, number] {
+  // Calculate auto ranges for reset (5% padding, 0.5 when all values coincide)
+  function calc_auto_range(values: number[]): Vec2 {
     if (values.length === 0) return [0, 1]
-    let [min_val, max_val] = [values[0], values[0]]
-    for (const val of values) {
-      if (val < min_val) min_val = val
-      else if (val > max_val) max_val = val
-    }
+    const [min_val, max_val] = calculate_domain(values)
     const padding = (max_val - min_val) * 0.05 || 0.5
     return [min_val - padding, max_val + padding]
   }
@@ -96,7 +96,7 @@
   type AxisEntry = {
     name: string
     axis: AxisConfig3D
-    auto_range: [number, number]
+    auto_range: Vec2
     set: (val: AxisConfig3D) => void
   }
   const axes = $derived<AxisEntry[]>([

package/dist/plot/{ScatterPlot3DControls.svelte.d.ts → scatter-3d/ScatterPlot3DControls.svelte.d.ts}

@@ -1,6 +1,6 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { AxisConfig3D, CameraProjection3D, DataSeries3D, DisplayConfig3D, Surface3DConfig } from './types';
-import type { ComponentProps, Snippet } from 'svelte';
+import type { PaneProps, PaneToggleProps } from '../../overlays';
+import type { AxisConfig3D, CameraProjection3D, DataSeries3D, DisplayConfig3D, Surface3DConfig } from '../core/types';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     show?: boolean;
     x_axis?: AxisConfig3D;
@@ -11,10 +11,10 @@ type $$ComponentProps = {
     auto_rotate?: number;
     series?: DataSeries3D[];
     surfaces?: Surface3DConfig[];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    toggle_props?: PaneToggleProps;
+    pane_props?: PaneProps;
     children?: Snippet;
 };
-declare const ScatterPlot3DControls: import("svelte").Component<$$ComponentProps, {}, "display" | "show" | "x_axis" | "y_axis" | "camera_projection" | "auto_rotate" | "z_axis">;
+declare const ScatterPlot3DControls: import("svelte").Component<$$ComponentProps, {}, "display" | "show" | "y_axis" | "x_axis" | "camera_projection" | "auto_rotate" | "z_axis">;
 type ScatterPlot3DControls = ReturnType<typeof ScatterPlot3DControls>;
 export default ScatterPlot3DControls;

package/dist/plot/{ScatterPlot3DScene.svelte → scatter-3d/ScatterPlot3DScene.svelte}

@@ -2,9 +2,8 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import type { D3ColorSchemeName, D3InterpolateName } from '../colors'
-  import { format_num } from '../labels'
-  import type { Vec2, Vec3 } from '../math'
+  import { format_num } from '../../labels'
+  import type { Vec2, Vec3 } from '../../math'
   import type {
     AxisConfig3D,
     CameraProjection3D,
@@ -13,12 +12,13 @@
     InternalPoint3D,
     RefLine3D,
     RefPlane,
-    ScaleType,
     Scatter3DHandlerEvent,
+    SizeScaleConfig,
     StyleOverrides3D,
     Surface3DConfig,
-  } from './types'
-  import { T, useTask, useThrelte } from '@threlte/core'
+  } from '../core/types'
+  import { bind_renderer } from '../../scene'
+  import { T, useTask } from '@threlte/core'
   import * as extras from '@threlte/extras'
   import { scaleLinear } from 'd3-scale'
   import { type ComponentProps, onDestroy, type Snippet, untrack } from 'svelte'
@@ -27,11 +27,11 @@
   import { Line2 } from 'three/examples/jsm/lines/Line2.js'
   import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
   import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
-  import { get_series_color } from './data-transform'
-  import { normalize_to_scene } from './reference-line'
-  import ReferenceLine3D from './ReferenceLine3D.svelte'
-  import ReferencePlane from './ReferencePlane.svelte'
-  import { create_color_scale, create_size_scale } from './scales'
+  import { get_series_color } from '../core/data-transform'
+  import { normalize_to_scene } from '../core/reference-line'
+  import ReferenceLine3D from '../core/components/ReferenceLine3D.svelte'
+  import ReferencePlane from '../core/components/ReferencePlane.svelte'
+  import { create_size_scale } from '../core/scales'
   import Surface3D from './Surface3D.svelte'
 
   let {
@@ -45,7 +45,7 @@
     surfaces = [],
     ref_lines = [],
     ref_planes = [],
-    color_scale = { type: `linear`, scheme: `interpolateViridis` },
+    color_scale_fn = () => get_series_color(0),
     size_scale = { type: `linear`, radius_range: [0.05, 0.2] },
     camera_position = [10, 10, 10] as Vec3,
     camera_projection = `perspective` as CameraProjection3D,
@@ -81,16 +81,9 @@
     surfaces?: Surface3DConfig[]
     ref_lines?: RefLine3D[]
     ref_planes?: RefPlane[]
-    color_scale?: {
-      type?: ScaleType
-      scheme?: D3ColorSchemeName | D3InterpolateName
-      value_range?: [number, number]
-    }
-    size_scale?: {
-      type?: ScaleType
-      radius_range?: [number, number]
-      value_range?: [number, number]
-    }
+    // Color scale function for color_values (computed once by the ScatterPlot3D wrapper)
+    color_scale_fn?: (value: number) => string
+    size_scale?: SizeScaleConfig
     camera_position?: Vec3
     camera_projection?: CameraProjection3D
     auto_rotate?: number
@@ -116,10 +109,10 @@
     height?: number
   } = $props()
 
-  const threlte = useThrelte()
-  $effect(() => {
-    scene = threlte.scene
-    camera = threlte.camera.current
+  // Mirrors scene/camera into bindable props and tags the canvas so export_canvas_as_png can re-render at export DPI
+  bind_renderer((threlte_scene, threlte_camera) => {
+    scene = threlte_scene
+    camera = threlte_camera
   })
 
   extras.interactivity()
@@ -182,24 +175,28 @@
   function sample_surface(
     surface: Surface3DConfig,
   ): { x: number; y: number; z: number }[] {
-    const n = 10
+    const grid_steps = 10
     const pts: { x: number; y: number; z: number }[] = []
     if (surface.type === `grid` && surface.z_fn) {
       const [x0, x1] = surface.x_range ?? [-1, 1]
       const [y0, y1] = surface.y_range ?? [-1, 1]
-      for (let i = 0; i <= n; i++) {
-        for (let j = 0; j <= n; j++) {
-          const x = x0 + (i / n) * (x1 - x0), y = y0 + (j / n) * (y1 - y0)
+      for (let idx_x = 0; idx_x <= grid_steps; idx_x++) {
+        for (let idx_y = 0; idx_y <= grid_steps; idx_y++) {
+          const x = x0 + (idx_x / grid_steps) * (x1 - x0),
+            y = y0 + (idx_y / grid_steps) * (y1 - y0)
           pts.push({ x, y, z: surface.z_fn(x, y) })
         }
       }
     } else if (surface.type === `parametric` && surface.parametric_fn) {
       const [u0, u1] = surface.u_range ?? [0, 1]
       const [v0, v1] = surface.v_range ?? [0, 1]
-      for (let i = 0; i <= n; i++) {
-        for (let j = 0; j <= n; j++) {
+      for (let idx_u = 0; idx_u <= grid_steps; idx_u++) {
+        for (let idx_v = 0; idx_v <= grid_steps; idx_v++) {
           pts.push(
-            surface.parametric_fn(u0 + (i / n) * (u1 - u0), v0 + (j / n) * (v1 - v0)),
+            surface.parametric_fn(
+              u0 + (idx_u / grid_steps) * (u1 - u0),
+              v0 + (idx_v / grid_steps) * (v1 - v0),
+            ),
           )
         }
       }
@@ -209,15 +206,14 @@
     return pts.filter((pt) => isFinite(pt.x) && isFinite(pt.y) && isFinite(pt.z))
   }
 
-  // Compute axis range with D3's nice() for clean boundaries
+  // Compute axis range with D3's nice(); data_min/data_max are the finite extent (Infinity/-Infinity when empty)
   function compute_range(
-    values: number[],
+    [data_min, data_max]: Vec2,
     range?: [number | null, number | null],
   ): Vec2 {
     if (range?.[0] != null && range?.[1] != null) return range as Vec2
-    const valid = values.filter(isFinite)
-    if (!valid.length) return [0, 1]
-    let [min, max] = [Math.min(...valid), Math.max(...valid)]
+    if (data_min > data_max) return [0, 1] // no finite values
+    let [min, max] = [data_min, data_max]
     const pad = min === max
       ? (min === 0 ? 1 : Math.abs(min * 0.1))
       : (max - min) * 0.05
@@ -227,49 +223,39 @@
       .domain() as Vec2
   }
 
-  // Collect xyz values from points and surfaces
+  // Collect xyz extents from points and surfaces in one pass (no intermediate arrays)
   let surface_samples = $derived(surfaces.flatMap(sample_surface))
-  let x_range = $derived(
-    compute_range([
-      ...all_points.map((point) => point.x),
-      ...surface_samples.map((point) => point.x),
-    ], x_axis.range),
-  )
-  let y_range = $derived(
-    compute_range([
-      ...all_points.map((point) => point.y),
-      ...surface_samples.map((point) => point.y),
-    ], y_axis.range),
-  )
-  let z_range = $derived(
-    compute_range([
-      ...all_points.map((point) => point.z),
-      ...surface_samples.map((point) => point.z),
-    ], z_axis.range),
-  )
+  let data_extents = $derived.by(() => {
+    const extents = {
+      x: [Infinity, -Infinity] as Vec2,
+      y: [Infinity, -Infinity] as Vec2,
+      z: [Infinity, -Infinity] as Vec2,
+    }
+    for (const points of [all_points, surface_samples]) {
+      for (const pt of points) {
+        for (const axis of [`x`, `y`, `z`] as const) {
+          const val = pt[axis]
+          if (!isFinite(val)) continue
+          const extent = extents[axis]
+          if (val < extent[0]) extent[0] = val
+          if (val > extent[1]) extent[1] = val
+        }
+      }
+    }
+    return extents
+  })
+  let x_range = $derived(compute_range(data_extents.x, x_axis.range))
+  let y_range = $derived(compute_range(data_extents.y, y_axis.range))
+  let z_range = $derived(compute_range(data_extents.z, z_axis.range))
 
   const normalize_x = (value: number) => normalize_to_scene(value, x_range, scene_x)
   const normalize_y = (value: number) => normalize_to_scene(value, y_range, scene_y)
   const normalize_z = (value: number) => normalize_to_scene(value, z_range, scene_z)
 
-  // Color/size scales
-  let all_color_values = $derived(
-    all_points.map((pt) => pt.color_value).filter((val): val is number => val != null),
-  )
-  let auto_color_range: [number, number] = $derived.by(() => {
-    if (!all_color_values.length) return [0, 1]
-    let min = all_color_values[0]
-    let max = all_color_values[0]
-    for (const val of all_color_values) {
-      if (val < min) min = val
-      else if (val > max) max = val
-    }
-    return [min, max]
-  })
+  // Size scale (the color scale is computed by the wrapper and passed as a prop)
   let all_size_values = $derived(
     all_points.map((pt) => pt.size_value).filter((val): val is number => val != null),
   )
-  let color_scale_fn = $derived(create_color_scale(color_scale, auto_color_range))
   let size_scale_fn = $derived(create_size_scale(size_scale, all_size_values))
 
   // Process points with normalized positions
@@ -331,83 +317,98 @@
   )
 
   // Series line data for connecting points
-  type SeriesLineData = {
+  type SeriesLineInput = {
     series_idx: number
+    positions: number[]
     color: string
     width: number
     dashed: boolean
+  }
+  type SeriesLineData = SeriesLineInput & {
     line2: Line2
     geometry: LineGeometry
     material: LineMaterial
   }
 
-  // Track previous lines for cleanup
-  let series_lines: SeriesLineData[] = $state([])
-
-  $effect(() => {
-    // Dispose old lines before creating new ones
-    for (const line_data of untrack(() => series_lines)) {
-      line_data.geometry.dispose()
-      line_data.material.dispose()
-    }
-
-    const lines: SeriesLineData[] = []
+  // Per-series fat-line inputs (ordered positions + resolved stroke style) as a derived so
+  // the effect below can diff against previous lines and only rebuild what changed
+  let line_inputs = $derived.by((): SeriesLineInput[] => {
+    const eligible: SeriesLineInput[] = []
+    const positions_by_series = new Map<number, number[]>()
     for (let series_idx = 0; series_idx < series.length; series_idx++) {
       const srs = series[series_idx]
-      if (!srs?.line_style) continue
+      const line_style = srs?.line_style
+      if (!line_style) continue
       if (!(series_visibility[series_idx] ?? srs.visible ?? true)) continue
-
-      // Get points for this series in order
-      const series_points = processed_points
-        .filter((pt) => pt.series_idx === series_idx)
-        .sort((a, b) => a.point_idx - b.point_idx)
-
-      if (series_points.length < 2) continue
-
-      // Create fat line geometry (LineGeometry for Line2)
       const positions: number[] = []
-      for (const pt of series_points) {
-        positions.push(pt.x, pt.y, pt.z)
-      }
-      const geometry = new LineGeometry()
-      geometry.setPositions(positions)
-
-      // Determine line style
-      const line_style = srs.line_style
+      positions_by_series.set(series_idx, positions)
       const color = line_style.stroke ??
         (Array.isArray(srs.point_style)
           ? srs.point_style[0]?.fill
           : srs.point_style?.fill) ??
         get_series_color(series_idx)
-      const line_width = line_style.stroke_width ?? 2
-      const dashed = Boolean(line_style.line_dash)
-
-      // Create LineMaterial for fat lines (linewidth is in pixels when resolution is set)
-      // Use placeholder resolution; the separate resolution effect updates it
-      const material = new LineMaterial({
-        color: new THREE.Color(color).getHex(),
-        linewidth: line_width, // Width in pixels
-        dashed,
-        dashScale: dashed ? 2 : 1,
-        dashSize: 0.1,
-        gapSize: 0.05,
-        resolution: new THREE.Vector2(1, 1),
-      })
-
-      const line2 = new Line2(geometry, material)
-      line2.computeLineDistances()
-
-      lines.push({
+      eligible.push({
         series_idx,
+        positions,
         color,
-        width: line_width,
-        dashed,
-        line2,
-        geometry,
-        material,
+        width: line_style.stroke_width ?? 2,
+        dashed: Boolean(line_style.line_dash),
       })
     }
-    series_lines = lines
+    // processed_points are emitted in (series_idx, point_idx) order, so one ordered pass replaces the old per-series filter + sort
+    for (const pt of processed_points) {
+      positions_by_series.get(pt.series_idx)?.push(pt.x, pt.y, pt.z)
+    }
+    return eligible.filter((input) => input.positions.length >= 6) // >= 2 points
+  })
+
+  const same_line_input = (prev: SeriesLineData, next: SeriesLineInput): boolean =>
+    prev.color === next.color && prev.width === next.width &&
+    prev.dashed === next.dashed &&
+    prev.positions.length === next.positions.length &&
+    prev.positions.every((coord, idx) => coord === next.positions[idx])
+
+  // Track previous lines for reuse/cleanup
+  let series_lines: SeriesLineData[] = $state([])
+
+  $effect(() => {
+    const inputs = line_inputs
+    untrack(() => {
+      const prev_by_idx = new Map(series_lines.map((line) => [line.series_idx, line]))
+      const next_lines = inputs.map((input): SeriesLineData => {
+        const prev = prev_by_idx.get(input.series_idx)
+        if (prev && same_line_input(prev, input)) {
+          prev_by_idx.delete(input.series_idx) // reused - don't dispose below
+          return prev
+        }
+        // Create fat line geometry (LineGeometry for Line2)
+        const geometry = new LineGeometry()
+        geometry.setPositions(input.positions)
+        // Create LineMaterial for fat lines (linewidth is in pixels when resolution
+        // is set). Use placeholder resolution; the separate resolution effect updates it
+        const material = new LineMaterial({
+          color: new THREE.Color(input.color).getHex(),
+          linewidth: input.width, // Width in pixels
+          dashed: input.dashed,
+          dashScale: input.dashed ? 2 : 1,
+          dashSize: 0.1,
+          gapSize: 0.05,
+          resolution: new THREE.Vector2(1, 1),
+        })
+        const line2 = new Line2(geometry, material)
+        line2.computeLineDistances()
+        return { ...input, line2, geometry, material }
+      })
+      // Dispose lines that were replaced or removed
+      for (const stale of prev_by_idx.values()) {
+        stale.geometry.dispose()
+        stale.material.dispose()
+      }
+      // Skip reassignment when every line was reused to avoid invalidating consumers
+      const unchanged = next_lines.length === series_lines.length &&
+        next_lines.every((line, idx) => line === series_lines[idx])
+      if (!unchanged) series_lines = next_lines
+    })
   })
 
   // Update LineMaterial resolution when canvas size changes
@@ -434,7 +435,7 @@
 
   // Generate axis ticks using D3's smart tick generation
   function gen_ticks(
-    range: [number, number],
+    range: Vec2,
     ticks?: AxisConfig3D[`ticks`],
   ): number[] {
     if (Array.isArray(ticks)) return ticks