matterviz 0.4.0 → 0.4.2

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

@@ -1,10 +1,11 @@
-import type { D3ColorSchemeName, D3InterpolateName } from '../../colors';
+import type { D3InterpolateName } from '../../colors';
 import type { Point2D } from '../../math';
-import type { AxisLoadError, BasePlotProps, ControlsConfig, DataLoaderFn, DataSeries, ErrorBand, FillHandlerEvent, FillRegion, HoverConfig, InternalPoint, LabelPlacementConfig, LegendConfig, PanConfig, PlotConfig, Point, RefLine, RefLineEvent, ScaleType, ScatterHandlerEvent, ScatterHandlerProps, StyleOverrides, UserContentProps } from '..';
+import type { AxisLoadError, BasePlotProps, ColorScaleConfig, ControlsConfig, DataLoaderFn, DataSeries, ErrorBand, FillHandlerEvent, FillRegion, HoverConfig, InternalPoint, LabelPlacementConfig, LegendConfig, PanConfig, PlotConfig, Point, RefLine, RefLineEvent, ScatterHandlerEvent, ScatterHandlerProps, SizeScaleConfig, StyleOverrides, UserContentProps } from '..';
 import { ColorBar } from '..';
+import type { MarginalsProp } from '../core/marginals';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type TweenOptions } from 'svelte/motion';
+import type { TweenOptions } from 'svelte/motion';
 import type { Sides } from '../core/layout';
 declare function $$render<Metadata extends Record<string, unknown> = Record<string, unknown>>(): {
     props: HTMLAttributes<HTMLDivElement> & Omit<BasePlotProps, "change"> & PlotConfig & {
@@ -31,16 +32,8 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         change?: (data: (Point<Metadata> & {
             series: DataSeries<Metadata>;
         }) | null) => void;
-        color_scale?: {
-            type?: ScaleType;
-            scheme?: D3ColorSchemeName | D3InterpolateName;
-            value_range?: [number, number];
-        } | D3InterpolateName;
-        size_scale?: {
-            type?: ScaleType;
-            radius_range?: [number, number];
-            value_range?: [number, number];
-        };
+        color_scale?: ColorScaleConfig | D3InterpolateName;
+        size_scale?: SizeScaleConfig;
         color_bar?: (ComponentProps<typeof ColorBar> & {
             margin?: number | Sides;
             tween?: TweenOptions<Point2D>;
@@ -71,9 +64,10 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: DataSeries<Metadata>[]) => void;
         on_error?: (error: AxisLoadError) => void;
         pan?: PanConfig;
+        marginals?: MarginalsProp;
     };
     exports: {};
-    bindings: "display" | "fullscreen" | "series" | "hovered" | "ref_lines" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
+    bindings: "display" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "wrapper" | "series" | "hovered" | "ref_lines" | "x_axis" | "tooltip_point" | "fill_regions" | "selected_series_idx";
     slots: {};
     events: {};
 };
@@ -81,7 +75,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" | "fullscreen" | "series" | "hovered" | "ref_lines" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis" | "wrapper" | "tooltip_point" | "fill_regions" | "selected_series_idx";
+    bindings(): "display" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "wrapper" | "series" | "hovered" | "ref_lines" | "x_axis" | "tooltip_point" | "fill_regions" | "selected_series_idx";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/scatter/ScatterPlotControls.svelte

@@ -38,9 +38,7 @@
   } = $props()
 
   let non_null_series = $derived(series.filter((srs) => srs != null))
-  let visible_series = $derived(
-    non_null_series.filter((srs) => (srs.visible ?? true)),
-  )
+  let visible_series = $derived(non_null_series.filter((srs) => srs.visible ?? true))
   let has_multiple_series = $derived(non_null_series.length > 1)
 
   // Derive what marker types are present, and whether color/size are data-driven
@@ -55,7 +53,8 @@
     visible_series.some((srs) => srs?.size_values?.some((val) => val != null)),
   )
 
-  $effect(() => { // Initialize show_points/show_lines from defaults
+  $effect(() => {
+    // Initialize show_points/show_lines from defaults
     styles.show_points ??= DEFAULTS.scatter.show_points
     styles.show_lines ??= DEFAULTS.scatter.show_lines
   })
@@ -77,14 +76,14 @@
   {...rest}
 >
   {@render children?.({
-      x_axis,
-      x2_axis,
-      y_axis,
-      y2_axis,
-      display,
-      styles,
-      selected_series_idx,
-    })}
+    x_axis,
+    x2_axis,
+    y_axis,
+    y2_axis,
+    display,
+    styles,
+    selected_series_idx,
+  })}
   {#if has_any_points || has_any_lines}
     <SettingsSection
       title="Markers"
@@ -97,14 +96,18 @@
     >
       {#if has_any_points}
         <label
-          {@attach tooltip({ content: `Toggle visibility of data points in the scatter plot` })}
+          {@attach tooltip({
+            content: `Toggle visibility of data points in the scatter plot`,
+          })}
         >
           <input type="checkbox" bind:checked={styles.show_points} /> Show points
         </label>
       {/if}
       {#if has_any_lines}
         <label
-          {@attach tooltip({ content: `Toggle visibility of connecting lines between data points` })}
+          {@attach tooltip({
+            content: `Toggle visibility of connecting lines between data points`,
+          })}
         >
           <input type="checkbox" bind:checked={styles.show_lines} /> Show lines
         </label>
@@ -164,11 +167,7 @@
           {#if !has_color_data}
             <div class="pane-row" data-key="point.color">
               <label for="{uid}-point-color">Color:</label>
-              <input
-                id="{uid}-point-color"
-                type="color"
-                bind:value={styles.point.color}
-              />
+              <input id="{uid}-point-color" type="color" bind:value={styles.point.color} />
             </div>
           {/if}
           <div class="pane-row" data-key="point.opacity">

package/dist/plot/scatter/ScatterPlotControls.svelte.d.ts

@@ -12,6 +12,6 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
         } & Required<PlotConfig>
     ]>;
 };
-declare const ScatterPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis" | "selected_series_idx" | "styles">;
+declare const ScatterPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x2_axis" | "y_axis" | "y2_axis" | "x_axis" | "styles" | "selected_series_idx">;
 type ScatterPlotControls = ReturnType<typeof ScatterPlotControls>;
 export default ScatterPlotControls;

package/dist/plot/scatter/ScatterPoint.svelte

@@ -3,7 +3,10 @@
   import type { HoverStyle, LabelStyle, Point } from '..'
   import type { Point2D } from '../../math'
   import type { PointStyle } from '../core/types'
-  import { estimate_label_size, label_leader_segment } from '../core/utils/label-placement'
+  import {
+    estimate_label_size,
+    label_leader_segment,
+  } from '../core/utils/label-placement'
   import { DEFAULTS } from '../../settings'
   import * as d3_symbols from 'd3-shape'
   import { symbol } from 'd3-shape'
@@ -103,13 +106,16 @@
     {@const offset_x = label.offset?.x ?? 10}
     {@const offset_y = label.offset?.y ?? 0}
     {@const displacement = Math.hypot(offset_x, offset_y)}
-    {@const leader_line = displacement > leader_line_threshold ? label_leader_segment({
-      point: { x: 0, y: 0 },
-      point_radius: style.radius ?? 3,
-      label_center: { x: offset_x, y: offset_y },
-      label_size: label.size ?? estimate_label_size(label.text, label.font_size),
-      min_length: 6,
-    }) : null}
+    {@const leader_line =
+      displacement > leader_line_threshold
+        ? label_leader_segment({
+            point: { x: 0, y: 0 },
+            point_radius: style.radius ?? 3,
+            label_center: { x: offset_x, y: offset_y },
+            label_size: label.size ?? estimate_label_size(label.text, label.font_size),
+            min_length: 6,
+          })
+        : null}
     {#if leader_line}
       <line
         x1={leader_line.x1}
@@ -164,7 +170,8 @@
     filter: blur(3px);
   }
   @keyframes ring-pulse {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.3;
       transform: scale(1);
     }

package/dist/plot/scatter/binned-scatter-types.d.ts

@@ -1,19 +1,13 @@
-import type { D3ColorSchemeName, D3InterpolateName } from '../../colors';
+import type { D3InterpolateName } from '../../colors';
 import type { DenseInternalPoint } from './adaptive-density';
 import type ColorBar from '../core/components/ColorBar.svelte';
-import type { LabelPlacementConfig, ScaleType, ScatterHandlerProps } from '../core/types';
+import type { ColorScaleConfig, LabelPlacementConfig, RefLine, ScatterHandlerProps, SizeScaleConfig } from '../core/types';
 import type { ComponentProps, Snippet } from 'svelte';
-export type BinnedColorScaleConfig = {
-    type?: ScaleType;
-    scheme?: D3ColorSchemeName | D3InterpolateName;
-    value_range?: [number, number];
-} | D3InterpolateName;
-export type BinnedSizeScaleConfig = {
-    type?: ScaleType;
-    radius_range?: [number, number];
-    value_range?: [number, number];
+export type BinnedColorScaleConfig = ColorScaleConfig | D3InterpolateName;
+export type BinnedSizeScaleConfig = SizeScaleConfig & {
     pick_radius?: number | `auto`;
 };
+export declare const DEFAULT_BINNED_SIZE_SCALE: BinnedSizeScaleConfig;
 export type BinnedDensityConfig = {
     bin_px?: number;
     color_scale?: BinnedColorScaleConfig;
@@ -34,7 +28,7 @@ export type BinnedRefLine = {
     width?: number;
 };
 export type BinnedOverlaysConfig = {
-    ref_lines?: BinnedRefLine[];
+    ref_lines?: (BinnedRefLine | RefLine)[];
 };
 export type BinnedPointBasePayload<Metadata extends Record<string, unknown> = Record<string, unknown>> = ScatterHandlerProps<Metadata> & {
     point: DenseInternalPoint<Metadata>;

package/dist/plot/scatter/binned-scatter-types.js

@@ -1 +1,6 @@
-export {};
+import { SCALE_DEFAULTS } from '../core/types';
+export const DEFAULT_BINNED_SIZE_SCALE = {
+    type: `linear`,
+    radius_range: SCALE_DEFAULTS.binned_radius,
+    pick_radius: SCALE_DEFAULTS.binned_radius[1],
+};

package/dist/plot/scatter/index.d.ts

@@ -1,4 +1,4 @@
-export type { DensePointSeries } from './adaptive-density';
+export type { DensePointSeries, NumericArray } from './adaptive-density';
 export { default as BinnedScatterPlot } from './BinnedScatterPlot.svelte';
 export type { BinnedColorScaleConfig, BinnedDensityConfig, BinnedOverlaysConfig, BinnedPointBasePayload, BinnedPointDataFn, BinnedPointLabelPlacementConfig, BinnedPointLabelsConfig, BinnedPointPayload, BinnedPointTooltipPayload, BinnedRefLine, BinnedSizeScaleConfig, } from './binned-scatter-types';
 export { default as ElementScatter } from './ElementScatter.svelte';

package/dist/plot/scatter/scatter-data.d.ts

@@ -1,6 +1,6 @@
 import type { DataSeries, FillRegion, InternalPoint, LegendItem, PointStyle } from '..';
 import { type AxisRanges } from '../core/types';
-export type { AxisRanges };
+export { type AxisRanges } from '../core/types';
 export declare function filter_series_to_ranges<Metadata = Record<string, unknown>>(series: readonly DataSeries<Metadata>[], ranges: AxisRanges): (DataSeries<Metadata> & {
     filtered_data: InternalPoint<Metadata>[];
 })[];

package/dist/plot/scatter/scatter-data.js

@@ -2,7 +2,8 @@ import { symbol_names } from '../../labels';
 import { get_series_color, get_series_symbol, process_prop, } from '../core/data-transform';
 import { is_fill_gradient } from '../core/fill-utils';
 import { DEFAULT_MARKERS } from '../core/types';
-const in_range = (val, lo, hi) => val != null && !isNaN(val) && val >= Math.min(lo, hi) && val <= Math.max(lo, hi);
+export {} from '../core/types';
+const in_range = (val, lo, hi) => val != null && Number.isFinite(val) && val >= Math.min(lo, hi) && val <= Math.max(lo, hi);
 // Filter series data to only include points within bounds and augment with internal data.
 // Full x/y arrays are kept on each returned series (via spread) so connecting lines can
 // continue through off-range points; only filtered_data (rendered markers) is range-limited.
@@ -79,7 +80,7 @@ export function build_legend_data(series, computed_fills, color_scale_fn) {
         const first_point_style = Array.isArray(data_series?.point_style)
             ? data_series.point_style[0]
             : data_series?.point_style;
-        if (series_markers?.includes(`points`)) {
+        if (series_markers.includes(`points`)) {
             if (first_point_style) {
                 if (typeof first_point_style.symbol_type === `string` &&
                     symbol_names.includes(first_point_style.symbol_type)) {
@@ -101,7 +102,7 @@ export function build_legend_data(series, computed_fills, color_scale_fn) {
             display_style.symbol_type = undefined;
             display_style.symbol_color = undefined;
         }
-        if (series_markers?.includes(`line`)) {
+        if (series_markers.includes(`line`)) {
             // Explicit line stroke, then color scale, then point colors, then series default
             let line_color = data_series?.line_style?.stroke;
             if (!line_color) {
@@ -172,7 +173,7 @@ export function build_legend_data(series, computed_fills, color_scale_fn) {
 const is_transparent_or_none = (color) => !color ||
     color === `none` ||
     color === `transparent` ||
-    /rgba\([^)]+[,/]\s*0(\.0*)?\s*\)$/.test(color);
+    /rgba\([^)]+[,/]\s*0(?:\.0*)?\s*\)$/.test(color);
 // Type-guard negation of is_transparent_or_none so usable colors narrow to string
 const is_opaque_color = (color) => !is_transparent_or_none(color);
 // Resolve tooltip background color: point color-scale value, then point fill, then point
@@ -186,12 +187,12 @@ export function pick_tooltip_bg(point, series, color_scale_fn) {
     const fill_color = point_style?.fill;
     if (is_opaque_color(fill_color))
         return fill_color;
-    if (series_markers?.includes(`points`)) {
+    if (series_markers.includes(`points`)) {
         const stroke_color = point_style?.stroke;
         if (is_opaque_color(stroke_color))
             return stroke_color;
     }
-    if (series_markers?.includes(`line`)) {
+    if (series_markers.includes(`line`)) {
         const line_style = series?.line_style ?? {};
         const first_point_style = Array.isArray(series?.point_style)
             ? series?.point_style[0]
@@ -203,7 +204,7 @@ export function pick_tooltip_bg(point, series, color_scale_fn) {
         }
         if (is_transparent_or_none(line_color_candidate) && first_color_value != null)
             line_color_candidate = color_scale_fn(first_color_value);
-        if (is_transparent_or_none(line_color_candidate) && series_markers?.includes(`points`))
+        if (is_transparent_or_none(line_color_candidate) && series_markers.includes(`points`))
             line_color_candidate = first_point_style?.stroke;
         if (is_opaque_color(line_color_candidate))
             return line_color_candidate;

package/dist/plot/scatter-3d/ScatterPlot3D.svelte

@@ -2,7 +2,7 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import type { D3ColorSchemeName, D3InterpolateName } from '../../colors'
+  import type { D3InterpolateName } from '../../colors'
   import { FullscreenToggle } from '../../layout'
   import type { Vec2, Vec3 } from '../../math'
   import { ColorBar, PlotLegend } from '..'
@@ -11,6 +11,7 @@
   import type {
     AxisConfig3D,
     CameraProjection3D,
+    ColorScaleConfig,
     ControlsConfig3D,
     DataSeries3D,
     DisplayConfig3D,
@@ -18,11 +19,12 @@
     LegendConfig,
     RefLine3D,
     RefPlane,
-    ScaleType,
     Scatter3DHandlerEvent,
+    SizeScaleConfig,
     StyleOverrides3D,
     Surface3DConfig,
   } from '../core/types'
+  import { SCALE_DEFAULTS } 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 '../core/scales'
+  import { calculate_domain, create_color_scale } from '../core/scales'
   import ScatterPlot3DControls from './ScatterPlot3DControls.svelte'
   import ScatterPlot3DScene from './ScatterPlot3DScene.svelte'
 
@@ -52,17 +54,9 @@
     },
     styles = {},
     // Color and size scaling
-    color_scale = {
-      type: `linear` as ScaleType,
-      scheme: `interpolateViridis` as D3InterpolateName,
-      value_range: undefined,
-    },
+    color_scale = SCALE_DEFAULTS.color,
     color_bar = {},
-    size_scale = {
-      type: `linear` as ScaleType,
-      radius_range: [0.05, 0.2],
-      value_range: undefined,
-    },
+    size_scale = SCALE_DEFAULTS.size_3d,
     // Legend
     legend = {},
     // Camera settings
@@ -116,17 +110,9 @@
     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]
-    }
+    color_scale?: ColorScaleConfig | D3InterpolateName
+    color_bar?: (ComponentProps<typeof ColorBar> & { margin?: number | Sides }) | null
+    size_scale?: SizeScaleConfig
     legend?: LegendConfig | null
     camera_position?: Vec3
     camera_projection?: CameraProjection3D
@@ -156,9 +142,7 @@
     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 }]
-    >
+    header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
     controls_extra?: Snippet
   } = $props()
 
@@ -166,7 +150,7 @@
 
   // Track mounted state to avoid SSR/hydration mismatch with Canvas
   let mounted = $state(false)
-  onMount(() => mounted = true)
+  onMount(() => (mounted = true))
 
   const series_visibility_keys = $derived.by((): string[] => {
     const id_counts = new Map<string | number, number>()
@@ -175,11 +159,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}`
     })
   })
 
@@ -193,8 +180,9 @@
     }
   })
   let series_visibility = $derived(
-    series.map((srs, idx) =>
-      visibility_overrides.get(series_visibility_keys[idx]) ?? srs?.visible ?? true
+    series.map(
+      (srs, idx) =>
+        visibility_overrides.get(series_visibility_keys[idx]) ?? srs?.visible ?? true,
     ),
   )
 
@@ -222,24 +210,14 @@
 
   // 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) ?? []
-    ),
+    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
-    }
-    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),
-  )
+  let color_scale_fn = $derived(create_color_scale(normalized_color_scale, auto_color_range))
 
   // Legend data
   let legend_data = $derived(
@@ -255,10 +233,9 @@
         display_style: {
           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
+            ? ((Array.isArray(srs.point_style)
+                ? srs.point_style[0]?.fill
+                : srs.point_style?.fill) ?? series_color)
             : series_color,
         },
         has_explicit_label: Boolean(srs?.label),
@@ -317,7 +294,7 @@
   bind:clientWidth={width}
   bind:clientHeight={height}
   {...rest}
-  class="scatter-3d {rest.class ?? ``}"
+  class={[`scatter-3d`, rest.class]}
   class:fullscreen
 >
   {#if width && height}
@@ -342,7 +319,7 @@
           {z_axis}
           {display}
           {styles}
-          color_scale={normalized_color_scale}
+          {color_scale_fn}
           {size_scale}
           {camera_position}
           {camera_projection}
@@ -402,9 +379,9 @@
     <!-- Color Bar -->
     {#if color_bar && all_color_values.length > 0}
       {@const color_domain = [
-      normalized_color_scale.value_range?.[0] ?? auto_color_range[0],
-      normalized_color_scale.value_range?.[1] ?? auto_color_range[1],
-    ] as Vec2}
+        normalized_color_scale.value_range?.[0] ?? auto_color_range[0],
+        normalized_color_scale.value_range?.[1] ?? auto_color_range[1],
+      ] as Vec2}
       <ColorBar
         tick_labels={4}
         tick_side="primary"
@@ -412,7 +389,8 @@
         color_scale_domain={color_domain}
         scale_type={normalized_color_scale.type}
         range={color_domain?.every((val) => val != null) ? color_domain : undefined}
-        wrapper_style="position: absolute; bottom: 2em; left: 2em; {color_bar?.wrapper_style ?? ``}"
+        wrapper_style="position: absolute; bottom: 2em; left: 2em; {color_bar?.wrapper_style ??
+          ``}"
         bar_style="width: 200px; height: 16px; {color_bar?.style ?? ``}"
         {...color_bar}
       />
@@ -519,7 +497,9 @@
   div.scatter-3d :global(.pane-toggle),
   div.scatter-3d .header-controls {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   div.scatter-3d:hover :global(.pane-toggle),
   div.scatter-3d:hover .header-controls,

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

@@ -1,8 +1,8 @@
-import type { D3ColorSchemeName, D3InterpolateName } from '../../colors';
+import type { D3InterpolateName } from '../../colors';
 import type { Vec3 } from '../../math';
 import { ColorBar } from '..';
 import type { Sides } from '../core/layout';
-import type { AxisConfig3D, CameraProjection3D, ControlsConfig3D, DataSeries3D, DisplayConfig3D, InternalPoint3D, LegendConfig, RefLine3D, RefPlane, ScaleType, Scatter3DHandlerEvent, StyleOverrides3D, Surface3DConfig } from '../core/types';
+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" | "camera" | "tooltip_point" | "scene" | "orbit_controls";
+    bindings: "fullscreen" | "wrapper" | "hovered" | "camera" | "camera_position" | "orbit_controls" | "scene" | "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" | "camera" | "tooltip_point" | "scene" | "orbit_controls";
+    bindings(): "fullscreen" | "wrapper" | "hovered" | "camera" | "camera_position" | "orbit_controls" | "scene" | "tooltip_point";
     exports(): {};
 }
 interface $$IsomorphicComponent {