matterviz 0.3.0 → 0.3.2

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

@@ -41,10 +41,10 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotCon
     on_ref_line_hover?: (event: RefLineEvent | null) => void;
     on_series_toggle?: (series_idx: number) => void;
     data_loader?: DataLoaderFn;
-    on_axis_change?: (axis: `x` | `y` | `y2`, key: string, new_series: DataSeries[]) => void;
+    on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: DataSeries[]) => void;
     on_error?: (error: AxisLoadError) => void;
     pan?: PanConfig;
 };
-declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "fullscreen" | "series" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines" | "show_controls" | "controls_open">;
+declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "series" | "show_controls" | "controls_open" | "fullscreen" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines">;
 type Histogram = ReturnType<typeof Histogram>;
 export default Histogram;

package/dist/plot/HistogramControls.svelte

@@ -2,7 +2,7 @@
 import { SettingsSection } from '../layout';
 import { PlotControls } from './';
 import { DEFAULTS } from '../settings';
-let { series = [], bins = $bindable(DEFAULTS.histogram.bin_count), mode = $bindable(DEFAULTS.histogram.mode), bar = $bindable({}), show_legend = $bindable(DEFAULTS.histogram.show_legend), selected_property = $bindable(``), x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), auto_y2_range = undefined, children, ...rest } = $props();
+let { series = [], bins = $bindable(DEFAULTS.histogram.bin_count), mode = $bindable(DEFAULTS.histogram.mode), bar = $bindable({}), show_legend = $bindable(DEFAULTS.histogram.show_legend), selected_property = $bindable(``), x_axis = $bindable({}), x2_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), auto_x2_range = undefined, auto_y2_range = undefined, has_x2_points = false, has_y2_points = false, children, ...rest } = $props();
 bar = { ...DEFAULTS.histogram.bar, ...bar }; // Initialize bar styles with defaults (runs once)
 let has_multiple_series = $derived(series.filter(Boolean).length > 1);
 let visible_series = $derived(series.filter((srs) => srs && (srs.visible ?? true)));
@@ -14,12 +14,14 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
   bind:controls_open
   bind:display
   bind:x_axis
+  bind:x2_axis
   bind:y_axis
   bind:y2_axis
+  {auto_x2_range}
   {auto_y2_range}
   {...rest}
 >
-  {@render children?.({ x_axis, y_axis, y2_axis, display })}
+  {@render children?.({ x_axis, x2_axis, y_axis, y2_axis, display })}
   <SettingsSection
     title="Histogram"
     current_values={{ bins, mode, show_legend }}
@@ -113,8 +115,9 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
     data-testid="scale-type-section"
     current_values={{
       x_scale_type: x_axis.scale_type,
+      ...(has_x2_points ? { x2_scale_type: x2_axis.scale_type } : {}),
       y_scale_type: y_axis.scale_type,
-      y2_scale_type: y2_axis.scale_type,
+      ...(has_y2_points ? { y2_scale_type: y2_axis.scale_type } : {}),
     }}
     on_reset={() => {
       x_axis = {
@@ -125,9 +128,17 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
         ...y_axis,
         scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
       }
-      y2_axis = {
-        ...y2_axis,
-        scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
+      if (has_x2_points) {
+        x2_axis = {
+          ...x2_axis,
+          scale_type: DEFAULTS.plot.x_scale_type as `linear` | `log`,
+        }
+      }
+      if (has_y2_points) {
+        y2_axis = {
+          ...y2_axis,
+          scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
+        }
       }
     }}
     class="pane-grid"
@@ -137,13 +148,21 @@ let series_options = $derived(visible_series.map((srs) => srs.label || `Series`)
         <option value="linear">Linear</option>
         <option value="log">Log</option>
       </select></label>
+    {#if has_x2_points}
+      <label>X2: <select bind:value={x2_axis.scale_type}>
+          <option value="linear">Linear</option>
+          <option value="log">Log</option>
+        </select></label>
+    {/if}
     <label>Y: <select bind:value={y_axis.scale_type}>
         <option value="linear">Linear</option>
         <option value="log">Log</option>
       </select></label>
-    <label>Y2: <select bind:value={y2_axis.scale_type}>
-        <option value="linear">Linear</option>
-        <option value="log">Log</option>
-      </select></label>
+    {#if has_y2_points}
+      <label>Y2: <select bind:value={y2_axis.scale_type}>
+          <option value="linear">Linear</option>
+          <option value="log">Log</option>
+        </select></label>
+    {/if}
   </SettingsSection>
 </PlotControls>

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

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../math';
 import type { BarStyle, DataSeries, PlotConfig } from './';
 import type { PlotControlsProps } from './types';
 import type { Snippet } from 'svelte';
@@ -10,9 +11,12 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
     selected_property?: string;
     show_controls?: boolean;
     controls_open?: boolean;
-    auto_y2_range?: [number, number];
+    auto_x2_range?: Vec2;
+    auto_y2_range?: Vec2;
+    has_x2_points?: boolean;
+    has_y2_points?: boolean;
     children?: Snippet<[Required<PlotConfig>]>;
 };
-declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bins" | "show_legend" | "selected_property" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "bar" | "y2_axis">;
+declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bar" | "show_controls" | "controls_open" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "bins" | "show_legend" | "selected_property">;
 type HistogramControls = ReturnType<typeof HistogramControls>;
 export default HistogramControls;

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

@@ -4,11 +4,11 @@ type $$ComponentProps = {
     options?: AxisOption[];
     selected_key?: string;
     loading?: boolean;
-    axis_type?: `x` | `y` | `y2`;
+    axis_type?: `x` | `x2` | `y` | `y2`;
     color?: string | null;
     on_select?: (key: string) => void;
     [key: string]: unknown;
 };
-declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "loading" | "selected_key">;
+declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "selected_key" | "loading">;
 type InteractiveAxisLabel = ReturnType<typeof InteractiveAxisLabel>;
 export default InteractiveAxisLabel;

package/dist/plot/PlotControls.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">// NOTE: Axis config objects (x_axis, y_axis, y2_axis) must be reassigned (not mutated)
+<script lang="ts">// NOTE: Axis config objects (x_axis, x2_axis, y_axis, y2_axis) must be reassigned (not mutated)
 // to trigger $bindable reactivity propagation to parent components.
 // Pattern: `x_axis = { ...x_axis, prop: value }` instead of `x_axis.prop = value`
 import SettingsSection from '../layout/SettingsSection.svelte';
@@ -8,15 +8,19 @@ import { format } from 'd3-format';
 import { timeFormat } from 'd3-time-format';
 import { tooltip } from 'svelte-multiselect/attachments';
 import { normalize_y2_sync } from './interactions';
-import { get_scale_type_name } from './types';
-let { show_controls = $bindable(false), controls_open = $bindable(false), children, post_children, x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), auto_x_range = [0, 1], auto_y_range = [0, 1], auto_y2_range = undefined, has_y2_points = false, show_ticks = false, controls_title = `plot`, controls_class = ``, toggle_props = {}, pane_props = {}, } = $props();
+import { get_scale_type_name, is_scale_type_name, is_y2_sync_mode } from './types';
+let { show_controls = $bindable(false), controls_open = $bindable(false), children, post_children, x_axis = $bindable({}), x2_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), auto_x_range = [0, 1], auto_x2_range = undefined, auto_y_range = [0, 1], auto_y2_range = undefined, has_x2_points = false, has_y2_points = false, show_ticks = false, controls_title = `plot`, controls_class = ``, toggle_props = {}, pane_props = {}, } = $props();
 // Range input state
-let range_inputs = $state({ x: [null, null], y: [null, null], y2: [null, null] });
+let range_inputs = $state({ x: [null, null], x2: [null, null], y: [null, null], y2: [null, null] });
 let range_els = $state({});
-let x_includes_zero = $derived(((x_axis.range?.[0] ?? auto_x_range[0]) <= 0) &&
-    ((x_axis.range?.[1] ?? auto_x_range[1]) >= 0));
-let y_includes_zero = $derived(((y_axis.range?.[0] ?? auto_y_range[0]) <= 0) &&
-    ((y_axis.range?.[1] ?? auto_y_range[1]) >= 0));
+// Check if an axis range spans zero (handles inverted ranges like [3.5, 1.4])
+const range_spans_zero = (lo, hi) => Math.min(lo, hi) <= 0 && Math.max(lo, hi) >= 0;
+let x_includes_zero = $derived(range_spans_zero(x_axis.range?.[0] ?? auto_x_range[0], x_axis.range?.[1] ?? auto_x_range[1]));
+let x2_includes_zero = $derived(has_x2_points && auto_x2_range != null &&
+    range_spans_zero(x2_axis.range?.[0] ?? auto_x2_range[0], x2_axis.range?.[1] ?? auto_x2_range[1]));
+let y_includes_zero = $derived(range_spans_zero(y_axis.range?.[0] ?? auto_y_range[0], y_axis.range?.[1] ?? auto_y_range[1]));
+let y2_includes_zero = $derived(has_y2_points && auto_y2_range != null &&
+    range_spans_zero(y2_axis.range?.[0] ?? auto_y2_range[0], y2_axis.range?.[1] ?? auto_y2_range[1]));
 // Validation function for format specifiers
 function is_valid_format(format_string) {
     if (!format_string)
@@ -38,37 +42,53 @@ function is_valid_format(format_string) {
 // Handle format input changes
 const format_input_handler = (format_type) => (event) => {
     const input = event.target;
-    const axes = { x: x_axis, y: y_axis, y2: y2_axis };
-    const axis = axes[format_type];
-    if (is_valid_format(input.value)) {
-        input.classList.remove(`invalid`);
-        axis.format = input.value;
+    if (!(input instanceof HTMLInputElement))
+        return;
+    if (!is_valid_format(input.value)) {
+        input.classList.add(`invalid`);
+        return;
     }
+    input.classList.remove(`invalid`);
+    if (format_type === `x`)
+        x_axis = { ...x_axis, format: input.value };
+    else if (format_type === `x2`)
+        x2_axis = { ...x2_axis, format: input.value };
+    else if (format_type === `y`)
+        y_axis = { ...y_axis, format: input.value };
     else
-        input.classList.add(`invalid`);
+        y2_axis = { ...y2_axis, format: input.value };
 };
 // Handle range input changes
 const update_range = (axis, bound, value) => {
     const parsed = value === `` ? null : Number(value);
     range_inputs[axis][bound] = Number.isFinite(parsed) ? parsed : null;
     const [min, max] = range_inputs[axis];
-    const auto = { x: auto_x_range, y: auto_y_range, y2: auto_y2_range }[axis];
+    const auto = { x: auto_x_range, x2: auto_x2_range, y: auto_y_range, y2: auto_y2_range }[axis];
     const invalid = min !== null && max !== null && min >= max;
     range_els[`${axis}-min`]?.classList.toggle(`invalid`, invalid);
     range_els[`${axis}-max`]?.classList.toggle(`invalid`, invalid);
     if (invalid)
         return;
-    const axis_config = { x: x_axis, y: y_axis, y2: y2_axis }[axis];
+    const axis_config = { x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis }[axis];
+    const next_range = min === null && max === null
+        ? undefined
+        : [min ?? auto?.[0] ?? 0, max ?? auto?.[1] ?? 1];
     // If auto range is undefined, only set if both min and max are provided
     if (!auto && (min === null || max === null))
         return;
-    axis_config.range = min === null && max === null
-        ? undefined
-        : [min ?? auto?.[0] ?? 0, max ?? auto?.[1] ?? 1];
+    if (axis === `x`)
+        x_axis = { ...axis_config, range: next_range };
+    else if (axis === `x2`)
+        x2_axis = { ...axis_config, range: next_range };
+    else if (axis === `y`)
+        y_axis = { ...axis_config, range: next_range };
+    else
+        y2_axis = { ...axis_config, range: next_range };
 };
 // Sync range inputs from props
 $effect(() => {
     range_inputs.x = [x_axis.range?.[0] ?? null, x_axis.range?.[1] ?? null];
+    range_inputs.x2 = [x2_axis.range?.[0] ?? null, x2_axis.range?.[1] ?? null];
     range_inputs.y = [y_axis.range?.[0] ?? null, y_axis.range?.[1] ?? null];
     range_inputs.y2 = [y2_axis.range?.[0] ?? null, y2_axis.range?.[1] ?? null];
 });
@@ -76,6 +96,7 @@ let ctrl_state = $derived({
     show_controls,
     controls_open,
     x_axis,
+    x2_axis,
     y_axis,
     y2_axis,
     display,
@@ -109,32 +130,49 @@ let ctrl_state = $derived({
       title="Display"
       current_values={{
         x_zero_line: display.x_zero_line,
+        x2_zero_line: display.x2_zero_line,
         y_zero_line: display.y_zero_line,
+        y2_zero_line: display.y2_zero_line,
         x_grid: display.x_grid,
+        x2_grid: display.x2_grid,
         y_grid: display.y_grid,
         y2_grid: display.y2_grid,
       }}
       on_reset={() => {
         display.x_zero_line = false
+        display.x2_zero_line = false
         display.y_zero_line = false
+        display.y2_zero_line = false
         display.x_grid = DEFAULTS.plot.show_x_grid
+        display.x2_grid = DEFAULTS.plot.show_x2_grid
         display.y_grid = DEFAULTS.plot.show_y_grid
         display.y2_grid = DEFAULTS.plot.show_y2_grid
       }}
       style="display: flex; flex-wrap: wrap; gap: 1ex; align-items: center"
     >
-      {#if x_includes_zero || y_includes_zero}
+      {#if x_includes_zero || x2_includes_zero || y_includes_zero || y2_includes_zero}
         <span class="control-group" data-label="zero line">Zero line:
           {#if x_includes_zero}
             <label><input type="checkbox" bind:checked={display.x_zero_line} /> X</label>
           {/if}
+          {#if x2_includes_zero}
+            <label><input type="checkbox" bind:checked={display.x2_zero_line} />
+              X2</label>
+          {/if}
           {#if y_includes_zero}
             <label><input type="checkbox" bind:checked={display.y_zero_line} /> Y</label>
           {/if}
+          {#if y2_includes_zero}
+            <label><input type="checkbox" bind:checked={display.y2_zero_line} />
+              Y2</label>
+          {/if}
         </span>
       {/if}
       <span class="control-group" data-label="grid">Grid:
         <label><input type="checkbox" bind:checked={display.x_grid} /> X</label>
+        {#if has_x2_points}
+          <label><input type="checkbox" bind:checked={display.x2_grid} /> X2</label>
+        {/if}
         <label><input type="checkbox" bind:checked={display.y_grid} /> Y</label>
         {#if has_y2_points}
           <label><input type="checkbox" bind:checked={display.y2_grid} /> Y2</label>
@@ -145,9 +183,15 @@ let ctrl_state = $derived({
     <!-- Base Axis Range controls -->
     <SettingsSection
       title="Axis Range"
-      current_values={{ x_range: x_axis.range, y_range: y_axis.range, y2_range: y2_axis.range }}
+      current_values={{
+        x_range: x_axis.range,
+        x2_range: x2_axis.range,
+        y_range: y_axis.range,
+        y2_range: y2_axis.range,
+      }}
       on_reset={() => {
         x_axis = { ...x_axis, range: [null, null] }
+        x2_axis = { ...x2_axis, range: [null, null] }
         y_axis = { ...y_axis, range: [null, null] }
         y2_axis = { ...y2_axis, range: [null, null] }
         Object.values(range_els).forEach((el) => el.classList.remove(`invalid`))
@@ -156,6 +200,7 @@ let ctrl_state = $derived({
     >
       {#each [
         [`x`, `X`],
+        ...(has_x2_points ? [[`x2`, `X2`]] : []),
         [`y`, `Y`],
         ...(has_y2_points ? [[`y2`, `Y2`]] : []),
       ] as
@@ -171,7 +216,7 @@ let ctrl_state = $derived({
             placeholder="auto"
             class="range-input"
             oninput={(e) => update_range(axis, 0, e.currentTarget.value)}
-            onkeydown={(e) => e.key === `Enter` && e.currentTarget.blur()}
+            onkeydown={(e) => e.key === `Enter` && e.currentTarget?.blur()}
           /> to <input
             type="number"
             value={range_inputs[axis][1] ?? ``}
@@ -179,7 +224,7 @@ let ctrl_state = $derived({
             placeholder="auto"
             class="range-input"
             oninput={(e) => update_range(axis, 1, e.currentTarget.value)}
-            onkeydown={(e) => e.key === `Enter` && e.currentTarget.blur()}
+            onkeydown={(e) => e.key === `Enter` && e.currentTarget?.blur()}
           />
         </label>
       {/each}
@@ -239,11 +284,13 @@ let ctrl_state = $derived({
       title="Scale Type"
       current_values={{
         x_scale: get_scale_type_name(x_axis.scale_type),
+        x2_scale: get_scale_type_name(x2_axis.scale_type),
         y_scale: get_scale_type_name(y_axis.scale_type),
         y2_scale: get_scale_type_name(y2_axis.scale_type),
       }}
       on_reset={() => {
         x_axis = { ...x_axis, scale_type: `linear` }
+        x2_axis = { ...x2_axis, scale_type: `linear` }
         y_axis = { ...y_axis, scale_type: `linear` }
         y2_axis = { ...y2_axis, scale_type: `linear` }
       }}
@@ -253,9 +300,10 @@ let ctrl_state = $derived({
         <select
           value={get_scale_type_name(x_axis.scale_type)}
           onchange={(e) => {
+            const val = e.currentTarget.value
             x_axis = {
               ...x_axis,
-              scale_type: e.currentTarget.value as ScaleTypeName,
+              scale_type: is_scale_type_name(val) ? val : `linear`,
             }
           }}
         >
@@ -264,13 +312,32 @@ let ctrl_state = $derived({
           <option value="arcsinh">Arcsinh</option>
         </select>
       </label>
+      {#if has_x2_points}
+        <label>X2:
+          <select
+            value={get_scale_type_name(x2_axis.scale_type)}
+            onchange={(e) => {
+              const val = e.currentTarget.value
+              x2_axis = {
+                ...x2_axis,
+                scale_type: is_scale_type_name(val) ? val : `linear`,
+              }
+            }}
+          >
+            <option value="linear">Linear</option>
+            <option value="log">Log</option>
+            <option value="arcsinh">Arcsinh</option>
+          </select>
+        </label>
+      {/if}
       <label>Y:
         <select
           value={get_scale_type_name(y_axis.scale_type)}
           onchange={(e) => {
+            const val = e.currentTarget.value
             y_axis = {
               ...y_axis,
-              scale_type: e.currentTarget.value as ScaleTypeName,
+              scale_type: is_scale_type_name(val) ? val : `linear`,
             }
           }}
         >
@@ -284,9 +351,10 @@ let ctrl_state = $derived({
           <select
             value={get_scale_type_name(y2_axis.scale_type)}
             onchange={(e) => {
+              const val = e.currentTarget.value
               y2_axis = {
                 ...y2_axis,
-                scale_type: e.currentTarget.value as ScaleTypeName,
+                scale_type: is_scale_type_name(val) ? val : `linear`,
               }
             }}
           >
@@ -318,7 +386,8 @@ let ctrl_state = $derived({
             value={current_sync.mode}
             aria-label="Y2 axis synchronization mode"
             onchange={(e) => {
-              const mode = e.currentTarget.value as Y2SyncMode
+              const val = e.currentTarget.value
+              const mode = is_y2_sync_mode(val) ? val : `none`
               if (mode === `none`) {
                 y2_axis = { ...y2_axis, sync: undefined }
               } else if (mode === `align`) {
@@ -365,11 +434,13 @@ let ctrl_state = $derived({
       data-testid="tick-format-section"
       current_values={{
         x_format: x_axis.format,
+        x2_format: x2_axis.format,
         y_format: y_axis.format,
         y2_format: y2_axis.format,
       }}
       on_reset={() => {
         x_axis = { ...x_axis, format: DEFAULTS.plot.x_format }
+        x2_axis = { ...x2_axis, format: DEFAULTS.plot.x2_format }
         y_axis = { ...y_axis, format: DEFAULTS.plot.y_format }
         y2_axis = { ...y2_axis, format: DEFAULTS.plot.y2_format }
       }}
@@ -384,6 +455,17 @@ let ctrl_state = $derived({
           oninput={format_input_handler(`x`)}
         />
       </label>
+      {#if has_x2_points}
+        <label style="white-space: nowrap">X2-axis:
+          <input
+            type="text"
+            value={x2_axis.format ?? DEFAULTS.plot.x2_format}
+            placeholder=".2~s / .0% / %Y-%m-%d"
+            oninput={format_input_handler(`x2`)}
+            style="width: 100%"
+          />
+        </label>
+      {/if}
       <label style="white-space: nowrap">Y-axis:
         <input
           type="text"

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

@@ -1,4 +1,4 @@
 import type { PlotControlsProps } from './index';
-declare const PlotControls: import("svelte").Component<PlotControlsProps, {}, "display" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "y2_axis">;
+declare const PlotControls: import("svelte").Component<PlotControlsProps, {}, "display" | "show_controls" | "controls_open" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis">;
 type PlotControls = ReturnType<typeof PlotControls>;
 export default PlotControls;

package/dist/plot/PlotLegend.svelte

@@ -47,7 +47,7 @@ function handle_legend_mouse_down(event) {
         return;
     // Only start drag if clicking on empty areas (not on legend items)
     const target = event.target;
-    if (target.closest(`.legend-item`))
+    if (target instanceof Element && target.closest(`.legend-item`))
         return;
     event.preventDefault();
     event.stopPropagation();

package/dist/plot/PortalSelect.svelte

@@ -130,7 +130,8 @@ function handle_click_outside(evt) {
     if (!dropdown_open)
         return;
     const target = evt.target;
-    if (!trigger_el?.contains(target) && !portal_el?.contains(target)) {
+    if (!(target instanceof Node) ||
+        (!trigger_el?.contains(target) && !portal_el?.contains(target))) {
         close_dropdown();
     }
 }

package/dist/plot/ReferenceLine.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">// ReferenceLine: 2D reference lines with annotations (horizontal, vertical, diagonal, segment, line)
 import { calculate_annotation_position, resolve_line_endpoints, } from './reference-line';
 import { REF_LINE_STYLE_DEFAULTS } from './types';
-let { ref_line, line_idx, x_min, x_max, y_min, y_max, x_scale, y_scale, y2_scale, clip_path_id, hovered_line_idx = null, on_click, on_hover, } = $props();
+let { ref_line, line_idx, x_min, x_max, y_min, y_max, x_scale, x2_scale, y_scale, y2_scale, clip_path_id, hovered_line_idx = null, on_click, on_hover, } = $props();
 let endpoints = $derived(resolve_line_endpoints(ref_line, { x_min, x_max, y_min, y_max }, {
     x_scale,
+    x2_scale,
     y_scale,
     y2_scale,
 }));

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

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     y_min: number;
     y_max: number;
     x_scale: (val: number) => number;
+    x2_scale?: (val: number) => number;
     y_scale: (val: number) => number;
     y2_scale?: (val: number) => number;
     clip_path_id: string;

package/dist/plot/ReferencePlane.svelte

@@ -25,9 +25,7 @@ let [x_min, x_max] = $derived(span_or(ref_plane.x_span, x_range));
 let [y_min, y_max] = $derived(span_or(ref_plane.y_span, y_range));
 let [z_min, z_max] = $derived(span_or(ref_plane.z_span, z_range));
 // Helper to create quad from 4 corner coords
-function quad(coords) {
-    return create_quad_geometry(coords.map(([ux, uy, uz]) => to_vec3(ux, uy, uz)));
-}
+const quad = (coords) => create_quad_geometry(coords.map(([ux, uy, uz]) => to_vec3(ux, uy, uz)));
 // Compute plane geometry based on type - returns result to use in $effect
 function compute_geometry() {
     if (ref_plane.visible === false)