matterviz 0.3.2 → 0.3.3

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

@@ -69,7 +69,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         pan?: PanConfig;
     };
     exports: {};
-    bindings: "display" | "series" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "hovered" | "ref_lines" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
+    bindings: "display" | "fullscreen" | "series" | "hovered" | "ref_lines" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
     slots: {};
     events: {};
 };
@@ -77,7 +77,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(): "display" | "series" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "hovered" | "ref_lines" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
+    bindings(): "display" | "fullscreen" | "series" | "hovered" | "ref_lines" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/ScatterPlot3D.svelte

@@ -1,154 +1,279 @@
 <script
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
->import { FullscreenToggle } from '../layout';
-import { ColorBar, PlotLegend } from './';
-import { get_series_color } from './data-transform';
-import { Canvas } from '@threlte/core';
-import * as extras from '@threlte/extras';
-import { onMount } from 'svelte';
-import { create_color_scale } from './scales';
-import ScatterPlot3DControls from './ScatterPlot3DControls.svelte';
-import ScatterPlot3DScene from './ScatterPlot3DScene.svelte';
-let { 
-// Data props
-series = [], surfaces = [], ref_lines = [], ref_planes = [], 
-// Axis configuration (initial values)
-x_axis: x_axis_init = {}, y_axis: y_axis_init = {}, z_axis: z_axis_init = {}, 
-// Display settings (initial value)
-display: display_init = {
-    show_axes: true,
-    show_grid: true,
-    show_axis_labels: true,
-}, styles = {}, 
-// Color and size scaling
-color_scale = {
-    type: `linear`,
-    scheme: `interpolateViridis`,
-    value_range: undefined,
-}, color_bar = {}, size_scale = {
-    type: `linear`,
-    radius_range: [0.05, 0.2],
-    value_range: undefined,
-}, 
-// Legend
-legend = {}, 
-// Camera settings
-camera_position = $bindable([8, 8, 8]), camera_projection: camera_projection_init = `perspective`, auto_rotate: auto_rotate_init = 0, rotation_damping = 0, fov = 50, min_zoom = 0.1, max_zoom = 100, rotate_speed = 1, zoom_speed = 2, pan_speed = 2, 
-// Lighting
-ambient_light = 0.6, directional_light = 0.8, 
-// Rendering quality
-sphere_segments = 16, 
-// Gizmo
-gizmo = true, 
-// Controls
-controls: controls_init = {}, 
-// State
-hovered = $bindable(false), tooltip_point = $bindable(null), 
-// Callbacks
-on_point_click, on_point_hover, on_series_visibility_change, 
-// Fullscreen
-fullscreen = $bindable(false), fullscreen_toggle = true, 
-// Binding refs
-wrapper = $bindable(), scene = $bindable(), camera = $bindable(), orbit_controls = $bindable(), 
-// Snippets
-tooltip, children, header_controls, controls_extra, ...rest } = $props();
-let [width, height] = $state([0, 0]);
-// Track mounted state to avoid SSR/hydration mismatch with Canvas
-let mounted = $state(false);
-onMount(() => mounted = true);
-// User overrides merged with series.visible defaults
-let visibility_overrides = $state({});
-let series_visibility = $derived(series.map((srs, idx) => visibility_overrides[idx] ?? srs?.visible ?? true));
-// Local state for controls (initialized from props, owned by this component)
-const axis_defaults = { format: `.3~g`, scale_type: `linear` };
-let x_axis = $derived({ label: `X`, ...axis_defaults, ...x_axis_init });
-let y_axis = $derived({ label: `Y`, ...axis_defaults, ...y_axis_init });
-let z_axis = $derived({ label: `Z`, ...axis_defaults, ...z_axis_init });
-let display = $derived({
+>
+  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 {
+    AxisConfig3D,
+    CameraProjection3D,
+    ControlsConfig3D,
+    DataSeries3D,
+    DisplayConfig3D,
+    InternalPoint3D,
+    LegendConfig,
+    RefLine3D,
+    RefPlane,
+    ScaleType,
+    Scatter3DHandlerEvent,
+    Sides,
+    StyleOverrides3D,
+    Surface3DConfig,
+  } from './types'
+  import { Canvas } from '@threlte/core'
+  import * as extras from '@threlte/extras'
+  import { type ComponentProps, onMount, type Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Camera, Scene } from 'three'
+  import { create_color_scale } from './scales'
+  import ScatterPlot3DControls from './ScatterPlot3DControls.svelte'
+  import ScatterPlot3DScene from './ScatterPlot3DScene.svelte'
+
+  let {
+    // Data props
+    series = [],
+    surfaces = [],
+    ref_lines = [],
+    ref_planes = [],
+    // Axis configuration (initial values)
+    x_axis: x_axis_init = {},
+    y_axis: y_axis_init = {},
+    z_axis: z_axis_init = {},
+    // Display settings (initial value)
+    display: display_init = {
+      show_axes: true,
+      show_grid: true,
+      show_axis_labels: true,
+    },
+    styles = {},
+    // Color and size scaling
+    color_scale = {
+      type: `linear` as ScaleType,
+      scheme: `interpolateViridis` as D3InterpolateName,
+      value_range: undefined,
+    },
+    color_bar = {},
+    size_scale = {
+      type: `linear` as ScaleType,
+      radius_range: [0.05, 0.2],
+      value_range: undefined,
+    },
+    // Legend
+    legend = {},
+    // Camera settings
+    camera_position = $bindable([8, 8, 8]),
+    camera_projection: camera_projection_init = `perspective` as CameraProjection3D,
+    auto_rotate: auto_rotate_init = 0,
+    rotation_damping = 0,
+    fov = 50,
+    min_zoom = 0.1,
+    max_zoom = 100,
+    rotate_speed = 1,
+    zoom_speed = 2,
+    pan_speed = 2,
+    // Lighting
+    ambient_light = 0.6,
+    directional_light = 0.8,
+    // Rendering quality
+    sphere_segments = 16,
+    // Gizmo
+    gizmo = true,
+    // Controls
+    controls: controls_init = {},
+    // State
+    hovered = $bindable(false),
+    tooltip_point = $bindable(null),
+    // Callbacks
+    on_point_click,
+    on_point_hover,
+    on_series_visibility_change,
+    // Fullscreen
+    fullscreen = $bindable(false),
+    fullscreen_toggle = true,
+    // Binding refs
+    wrapper = $bindable(),
+    scene = $bindable(),
+    camera = $bindable(),
+    orbit_controls = $bindable(),
+    // Snippets
+    tooltip,
+    children,
+    header_controls,
+    controls_extra,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    series?: DataSeries3D<Metadata>[]
+    surfaces?: Surface3DConfig[]
+    ref_lines?: RefLine3D[]
+    ref_planes?: RefPlane[]
+    x_axis?: AxisConfig3D
+    y_axis?: AxisConfig3D
+    z_axis?: AxisConfig3D
+    display?: DisplayConfig3D
+    styles?: StyleOverrides3D
+    color_scale?: {
+      type?: ScaleType
+      scheme?: D3ColorSchemeName | D3InterpolateName
+      value_range?: [number, number]
+    } | D3InterpolateName
+    color_bar?: ComponentProps<typeof ColorBar> & { margin?: number | Sides } | null
+    size_scale?: {
+      type?: ScaleType
+      radius_range?: [number, number]
+      value_range?: [number, number]
+    }
+    legend?: LegendConfig | null
+    camera_position?: Vec3
+    camera_projection?: CameraProjection3D
+    auto_rotate?: number
+    rotation_damping?: number
+    fov?: number
+    min_zoom?: number
+    max_zoom?: number
+    rotate_speed?: number
+    zoom_speed?: number
+    pan_speed?: number
+    ambient_light?: number
+    directional_light?: number
+    sphere_segments?: number
+    gizmo?: boolean | ComponentProps<typeof extras.Gizmo>
+    controls?: ControlsConfig3D
+    hovered?: boolean
+    tooltip_point?: InternalPoint3D<Metadata> | null
+    on_point_click?: (data: Scatter3DHandlerEvent<Metadata>) => void
+    on_point_hover?: (data: Scatter3DHandlerEvent<Metadata> | null) => void
+    on_series_visibility_change?: (series_idx: number, visible: boolean) => void
+    fullscreen?: boolean
+    fullscreen_toggle?: boolean
+    wrapper?: HTMLDivElement
+    scene?: Scene
+    camera?: Camera
+    orbit_controls?: ComponentProps<typeof extras.OrbitControls>[`ref`]
+    tooltip?: Snippet<[Scatter3DHandlerEvent<Metadata>]>
+    children?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
+    header_controls?: Snippet<
+      [{ height: number; width: number; fullscreen: boolean }]
+    >
+    controls_extra?: Snippet
+  } = $props()
+
+  let [width, height] = $state([0, 0])
+
+  // Track mounted state to avoid SSR/hydration mismatch with Canvas
+  let mounted = $state(false)
+  onMount(() => mounted = true)
+
+  // User overrides merged with series.visible defaults
+  let visibility_overrides: Record<number, boolean> = $state({})
+  let series_visibility = $derived(
+    series.map((srs, idx) => visibility_overrides[idx] ?? srs?.visible ?? true),
+  )
+
+  // Local state for controls (initialized from props, owned by this component)
+  const axis_defaults = { format: `.3~g`, scale_type: `linear` as const }
+  let x_axis = $derived({ label: `X`, ...axis_defaults, ...x_axis_init })
+  let y_axis = $derived({ label: `Y`, ...axis_defaults, ...y_axis_init })
+  let z_axis = $derived({ label: `Z`, ...axis_defaults, ...z_axis_init })
+  let display = $derived({
     show_axes: true,
     show_grid: true,
     show_axis_labels: true,
     ...display_init,
-});
-let camera_projection = $derived(camera_projection_init);
-let auto_rotate = $derived(auto_rotate_init);
-let controls = $derived({ show: true, open: false, ...controls_init });
-// Normalize color_scale to always be an object
-let normalized_color_scale = $derived(typeof color_scale === `string`
-    ? { type: `linear`, scheme: color_scale }
-    : color_scale);
-// Collect all color values for color bar
-let all_color_values = $derived(series.filter(Boolean).flatMap((srs) => srs.color_values?.filter((val) => val != null) ?? []));
-let auto_color_range = $derived.by(() => {
-    if (all_color_values.length === 0)
-        return [0, 1];
-    let min = Infinity;
-    let max = -Infinity;
+  })
+  let camera_projection = $derived(camera_projection_init)
+  let auto_rotate = $derived(auto_rotate_init)
+  let controls = $derived({ show: true, open: false, ...controls_init })
+
+  // Normalize color_scale to always be an object
+  let normalized_color_scale = $derived(
+    typeof color_scale === `string`
+      ? { type: `linear` as const, scheme: color_scale }
+      : color_scale,
+  )
+
+  // Collect all color values for color bar
+  let all_color_values = $derived(
+    series.filter(Boolean).flatMap((srs) =>
+      srs.color_values?.filter((val): val is number => val != null) ?? []
+    ),
+  )
+
+  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;
+      if (val < min) min = val
+      if (val > max) max = val
     }
-    return [min, max];
-});
-let color_scale_fn = $derived(create_color_scale(normalized_color_scale, auto_color_range));
-// Legend data
-let legend_data = $derived(series.map((srs, series_idx) => {
-    const is_visible = series_visibility[series_idx] ?? true;
-    const label = srs?.label ?? `Series ${series_idx + 1}`;
-    const series_color = get_series_color(series_idx);
-    return {
+    return [min, max]
+  })
+
+  let color_scale_fn = $derived(
+    create_color_scale(normalized_color_scale, auto_color_range),
+  )
+
+  // Legend data
+  let legend_data = $derived(
+    series.map((srs, series_idx) => {
+      const is_visible = series_visibility[series_idx] ?? true
+      const label = srs?.label ?? `Series ${series_idx + 1}`
+      const series_color = get_series_color(series_idx)
+
+      return {
         series_idx,
         label,
         visible: is_visible,
         display_style: {
-            symbol_type: `Circle`,
-            symbol_color: srs?.point_style
-                ? (Array.isArray(srs.point_style)
-                    ? srs.point_style[0]?.fill
-                    : srs.point_style?.fill) ??
-                    series_color
-                : series_color,
+          symbol_type: `Circle` as const,
+          symbol_color: srs?.point_style
+            ? (Array.isArray(srs.point_style)
+              ? srs.point_style[0]?.fill
+              : srs.point_style?.fill) ??
+              series_color
+            : series_color,
         },
         has_explicit_label: Boolean(srs?.label),
         legend_group: srs?.legend_group,
-    };
-}));
-// Compute gizmo props - move up when color bar is shown
-let has_color_bar = $derived(color_bar && all_color_values.length > 0);
-let computed_gizmo = $derived.by(() => {
-    if (gizmo === false)
-        return false;
-    const base_offset = { left: 5, bottom: has_color_bar ? 70 : 5 };
+      }
+    }),
+  )
+
+  // Compute gizmo props - move up when color bar is shown
+  let has_color_bar = $derived(color_bar && all_color_values.length > 0)
+  let computed_gizmo = $derived.by(() => {
+    if (gizmo === false) return false
+    const base_offset = { left: 5, bottom: has_color_bar ? 70 : 5 }
     // className enables CSS targeting for z-index and pointer-events
     const base = {
-        background: { enabled: false },
-        offset: base_offset,
-        className: `scatter3d-gizmo`,
-    };
-    if (gizmo === true)
-        return base;
+      background: { enabled: false },
+      offset: base_offset,
+      className: `scatter3d-gizmo`,
+    }
+    if (gizmo === true) return base
     // Merge user-provided gizmo config, preserving scatter3d-gizmo class
-    const merged_class = `scatter3d-gizmo ${gizmo.className ?? ``}`.trim();
+    const merged_class = `scatter3d-gizmo ${gizmo.className ?? ``}`.trim()
     return {
-        ...base,
-        ...gizmo,
-        offset: { ...base_offset, ...gizmo.offset },
-        className: merged_class,
-    };
-});
-function toggle_series_visibility(idx) {
-    const visible = (visibility_overrides[idx] = !series_visibility[idx]);
-    on_series_visibility_change?.(idx, visible);
-}
-// Handle point hover
-function handle_point_hover(data) {
-    hovered = data !== null;
-    tooltip_point = data?.point ?? null;
-    on_point_hover?.(data);
-}
+      ...base,
+      ...gizmo,
+      offset: { ...base_offset, ...gizmo.offset },
+      className: merged_class,
+    }
+  })
+
+  function toggle_series_visibility(idx: number) {
+    const visible = (visibility_overrides[idx] = !series_visibility[idx])
+    on_series_visibility_change?.(idx, visible)
+  }
+
+  // Handle point hover
+  function handle_point_hover(data: Scatter3DHandlerEvent<Metadata> | null) {
+    hovered = data !== null
+    tooltip_point = data?.point ?? null
+    on_point_hover?.(data)
+  }
 </script>
 
 <svelte:window

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

@@ -71,7 +71,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         controls_extra?: Snippet;
     };
     exports: {};
-    bindings: "fullscreen" | "hovered" | "camera_position" | "wrapper" | "tooltip_point" | "scene" | "camera" | "orbit_controls";
+    bindings: "fullscreen" | "hovered" | "camera_position" | "wrapper" | "tooltip_point" | "camera" | "scene" | "orbit_controls";
     slots: {};
     events: {};
 };
@@ -79,7 +79,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" | "scene" | "camera" | "orbit_controls";
+    bindings(): "fullscreen" | "hovered" | "camera_position" | "wrapper" | "tooltip_point" | "camera" | "scene" | "orbit_controls";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/ScatterPlot3DControls.svelte

@@ -1,83 +1,133 @@
-<script lang="ts">// 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';
-// Unique ID prefix to avoid conflicts when multiple instances on same page
-const uid = crypto.randomUUID().slice(0, 8);
-let { x_axis = $bindable({}), y_axis = $bindable({}), z_axis = $bindable({}), display = $bindable({}), camera_projection = $bindable(`perspective`), auto_rotate = $bindable(0), series = [], surfaces = [], toggle_props, pane_props, children, } = $props();
-// Calculate auto ranges for reset
-function calc_auto_range(values) {
-    if (values.length === 0)
-        return [0, 1];
-    let [min_val, max_val] = [values[0], values[0]];
+<script lang="ts">
+  // 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 type {
+    AxisConfig3D,
+    CameraProjection3D,
+    DataSeries3D,
+    DisplayConfig3D,
+    Surface3DConfig,
+  } from './types'
+  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)
+
+  let {
+    show = $bindable(false),
+    x_axis = $bindable({}),
+    y_axis = $bindable({}),
+    z_axis = $bindable({}),
+    display = $bindable({}),
+    camera_projection = $bindable(`perspective`),
+    auto_rotate = $bindable(0),
+    series = [],
+    surfaces = [],
+    toggle_props,
+    pane_props,
+    children,
+  }: {
+    show?: boolean
+    x_axis?: AxisConfig3D
+    y_axis?: AxisConfig3D
+    z_axis?: AxisConfig3D
+    display?: DisplayConfig3D
+    camera_projection?: CameraProjection3D
+    auto_rotate?: number
+    series?: DataSeries3D[]
+    surfaces?: Surface3DConfig[]
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    children?: Snippet
+  } = $props()
+
+  // Calculate auto ranges for reset
+  function calc_auto_range(values: number[]): [number, number] {
+    if (values.length === 0) return [0, 1]
+    let [min_val, max_val] = [values[0], values[0]]
     for (const v of values) {
-        if (v < min_val)
-            min_val = v;
-        else if (v > max_val)
-            max_val = v;
+      if (v < min_val) min_val = v
+      else if (v > max_val) max_val = v
     }
-    const padding = (max_val - min_val) * 0.05 || 0.5;
-    return [min_val - padding, max_val + padding];
-}
-// flatMap already creates new array, no need to spread
-let all_x_values = $derived(series.flatMap((srs) => srs.x));
-let all_y_values = $derived(series.flatMap((srs) => srs.y));
-let all_z_values = $derived(series.flatMap((srs) => srs.z));
-let auto_x_range = $derived(calc_auto_range(all_x_values));
-let auto_y_range = $derived(calc_auto_range(all_y_values));
-let auto_z_range = $derived(calc_auto_range(all_z_values));
-// Helper to extract input value from event - DRYs up event handler casts
-const get_input_value = (event) => event.target.value;
-// Helpers to update display properties - avoids verbose inline handlers
-const update_display = (key) => (event) => {
-    const parsed = parseFloat(get_input_value(event));
+    const padding = (max_val - min_val) * 0.05 || 0.5
+    return [min_val - padding, max_val + padding]
+  }
+
+  // flatMap already creates new array, no need to spread
+  let all_x_values = $derived(series.flatMap((srs) => srs.x))
+  let all_y_values = $derived(series.flatMap((srs) => srs.y))
+  let all_z_values = $derived(series.flatMap((srs) => srs.z))
+
+  let auto_x_range = $derived(calc_auto_range(all_x_values))
+  let auto_y_range = $derived(calc_auto_range(all_y_values))
+  let auto_z_range = $derived(calc_auto_range(all_z_values))
+
+  // Helper to extract input value from event - DRYs up event handler casts
+  const get_input_value = (event: Event) => (event.target as HTMLInputElement).value
+
+  // Helpers to update display properties - avoids verbose inline handlers
+  const update_display = (key: keyof DisplayConfig3D) => (event: Event) => {
+    const parsed = parseFloat(get_input_value(event))
     // Guard against NaN when input is cleared - preserve existing value
-    if (!Number.isNaN(parsed))
-        display = { ...display, [key]: parsed };
-};
-const toggle_display = (key) => () => {
-    display = { ...display, [key]: !display[key] };
-};
-const toggle_projection = (plane) => () => {
+    if (!Number.isNaN(parsed)) display = { ...display, [key]: parsed }
+  }
+  const toggle_display = (key: keyof DisplayConfig3D) => () => {
+    display = { ...display, [key]: !display[key] }
+  }
+  const toggle_projection = (plane: `xy` | `xz` | `yz`) => () => {
     display = {
-        ...display,
-        projections: { ...display.projections, [plane]: !display.projections?.[plane] },
-    };
-};
-// Round to 4 decimal places for display
-const round4 = (val) => Math.round(val * 1e4) / 1e4;
-// Helper for axis label updates
-const update_axis_label = (axis, setter) => (event) => {
-    setter({ ...axis, label: get_input_value(event) });
-};
-const axes = $derived([
+      ...display,
+      projections: { ...display.projections, [plane]: !display.projections?.[plane] },
+    }
+  }
+
+  // Round to 4 decimal places for display
+  const round4 = (val: number) => Math.round(val * 1e4) / 1e4
+
+  // Helper for axis label updates
+  const update_axis_label =
+    <T extends { label?: string }>(axis: T, setter: (val: T) => void) =>
+    (event: Event) => {
+      setter({ ...axis, label: get_input_value(event) })
+    }
+
+  type AxisEntry = {
+    name: string
+    axis: AxisConfig3D
+    auto_range: [number, number]
+    set: (val: AxisConfig3D) => void
+  }
+  const axes = $derived<AxisEntry[]>([
     {
-        name: `X`,
-        axis: x_axis,
-        auto_range: auto_x_range,
-        set: (val) => (x_axis = val),
+      name: `X`,
+      axis: x_axis,
+      auto_range: auto_x_range,
+      set: (val) => (x_axis = val),
     },
     {
-        name: `Y`,
-        axis: y_axis,
-        auto_range: auto_y_range,
-        set: (val) => (y_axis = val),
+      name: `Y`,
+      axis: y_axis,
+      auto_range: auto_y_range,
+      set: (val) => (y_axis = val),
     },
     {
-        name: `Z`,
-        axis: z_axis,
-        auto_range: auto_z_range,
-        set: (val) => (z_axis = val),
+      name: `Z`,
+      axis: z_axis,
+      auto_range: auto_z_range,
+      set: (val) => (z_axis = val),
     },
-]);
+  ])
 </script>
 
 <DraggablePane
+  bind:show
   {toggle_props}
   pane_props={{
     title: `3D Plot Settings`,
     ...pane_props,
-    style: `max-height: 80cqh; overflow-y: auto; ${pane_props?.style ?? ``}`,
+    style: `--pane-max-height: 80cqh; ${pane_props?.style ?? ``}`,
   }}
 >
   <!-- Camera Controls -->