matterviz 0.3.0 → 0.3.2

package/dist/plot/ScatterPlotControls.svelte

@@ -4,8 +4,16 @@ import { DEFAULTS } from '../settings';
 import { tooltip } from 'svelte-multiselect/attachments';
 // Unique ID prefix to avoid conflicts when multiple instances on same page
 const uid = crypto.randomUUID().slice(0, 8);
-let { series = [], x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), styles = $bindable({}), selected_series_idx = $bindable(0), on_touch, children, ...rest } = $props();
-let has_multiple_series = $derived(series.filter(Boolean).length > 1);
+let { series = [], x_axis = $bindable({}), x2_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), styles = $bindable({}), selected_series_idx = $bindable(0), on_touch, children, ...rest } = $props();
+let non_null_series = $derived(series.filter((srs) => srs != null));
+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
+const markers_include = (mode) => visible_series.some((srs) => (srs?.markers ?? `line+points`).includes(mode));
+let has_any_lines = $derived(markers_include(`line`));
+let has_any_points = $derived(markers_include(`points`));
+let has_color_data = $derived(visible_series.some((srs) => srs?.color_values?.some((val) => val != null)));
+let has_size_data = $derived(visible_series.some((srs) => srs?.size_values?.some((val) => val != null)));
 $effect(() => {
     styles.show_points ??= DEFAULTS.scatter.show_points;
     styles.show_lines ??= DEFAULTS.scatter.show_lines;
@@ -17,30 +25,52 @@ const touch = ({ target }) => {
 };
 </script>
 
-<PlotControls bind:x_axis bind:y_axis bind:y2_axis bind:display show_controls {...rest}>
-  {@render children?.({ x_axis, y_axis, y2_axis, display, styles, selected_series_idx })}
-  <SettingsSection
-    title="Markers"
-    current_values={{ show_points: styles.show_points, show_lines: styles.show_lines }}
-    on_reset={() => {
-      styles.show_points = DEFAULTS.scatter.show_points
-      styles.show_lines = DEFAULTS.scatter.show_lines
-    }}
-    style="display: flex; flex-wrap: wrap; gap: 1ex"
-  >
-    <label
-      {@attach tooltip({ content: `Toggle visibility of data points in the scatter plot` })}
+<PlotControls
+  bind:x_axis
+  bind:x2_axis
+  bind:y_axis
+  bind:y2_axis
+  bind:display
+  show_controls
+  {...rest}
+>
+  {@render children?.({
+      x_axis,
+      x2_axis,
+      y_axis,
+      y2_axis,
+      display,
+      styles,
+      selected_series_idx,
+    })}
+  {#if has_any_points || has_any_lines}
+    <SettingsSection
+      title="Markers"
+      current_values={{ show_points: styles.show_points, show_lines: styles.show_lines }}
+      on_reset={() => {
+        styles.show_points = DEFAULTS.scatter.show_points
+        styles.show_lines = DEFAULTS.scatter.show_lines
+      }}
+      style="display: flex; flex-wrap: wrap; gap: 1ex"
     >
-      <input type="checkbox" bind:checked={styles.show_points} /> Show points
-    </label>
-    <label
-      {@attach tooltip({
-        content: `Toggle visibility of connecting lines between data points`,
-      })}
-    >
-      <input type="checkbox" bind:checked={styles.show_lines} /> Show lines
-    </label>
-  </SettingsSection>
+      {#if has_any_points}
+        <label
+          {@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`,
+          })}
+        >
+          <input type="checkbox" bind:checked={styles.show_lines} /> Show lines
+        </label>
+      {/if}
+    </SettingsSection>
+  {/if}
 
   {#snippet post_children()}
     <!-- Series Selection (for multi-series style controls) -->
@@ -59,8 +89,8 @@ const touch = ({ target }) => {
       </div>
     {/if}
 
-    <!-- Point Style Controls -->
-    {#if styles.show_points}
+    <!-- Point Style Controls: only when points exist and are visible -->
+    {#if has_any_points && styles.show_points}
       <SettingsSection
         title="Point Style"
         current_values={styles.point ?? {}}
@@ -71,28 +101,36 @@ const touch = ({ target }) => {
         oninput={touch}
       >
         {#if styles.point}
-          <div class="pane-row" data-key="point.size">
-            <label for="{uid}-point-size">Size:</label>
-            <input
-              id="{uid}-point-size"
-              type="range"
-              min="1"
-              max="20"
-              step="0.5"
-              bind:value={styles.point.size}
-            />
-            <input
-              type="number"
-              min="1"
-              max="20"
-              step="0.5"
-              bind:value={styles.point.size}
-            />
-          </div>
-          <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} />
-          </div>
+          {#if !has_size_data}
+            <div class="pane-row" data-key="point.size">
+              <label for="{uid}-point-size">Size:</label>
+              <input
+                id="{uid}-point-size"
+                type="range"
+                min="1"
+                max="20"
+                step="0.5"
+                bind:value={styles.point.size}
+              />
+              <input
+                type="number"
+                min="1"
+                max="20"
+                step="0.5"
+                bind:value={styles.point.size}
+              />
+            </div>
+          {/if}
+          {#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}
+              />
+            </div>
+          {/if}
           <div class="pane-row" data-key="point.opacity">
             <label for="{uid}-point-opacity">Opacity:</label>
             <input
@@ -159,8 +197,8 @@ const touch = ({ target }) => {
       </SettingsSection>
     {/if}
 
-    <!-- Line Style Controls -->
-    {#if styles.show_lines}
+    <!-- Line Style Controls: only when lines exist and are visible -->
+    {#if has_any_lines && styles.show_lines}
       <SettingsSection
         title="Line Style"
         current_values={styles.line ?? {}}
@@ -189,10 +227,12 @@ const touch = ({ target }) => {
               bind:value={styles.line.width}
             />
           </div>
-          <div class="pane-row" data-key="line.color">
-            <label for="{uid}-line-color">Color:</label>
-            <input id="{uid}-line-color" type="color" bind:value={styles.line.color} />
-          </div>
+          {#if !has_color_data}
+            <div class="pane-row" data-key="line.color">
+              <label for="{uid}-line-color">Color:</label>
+              <input id="{uid}-line-color" type="color" bind:value={styles.line.color} />
+            </div>
+          {/if}
           <div class="pane-row" data-key="line.opacity">
             <label for="{uid}-line-opacity">Opacity:</label>
             <input

package/dist/plot/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" | "y2_axis" | "selected_series_idx" | "styles">;
+declare const ScatterPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "selected_series_idx" | "styles">;
 type ScatterPlotControls = ReturnType<typeof ScatterPlotControls>;
 export default ScatterPlotControls;

package/dist/plot/ZeroLines.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">import { get_scale_type_name } from './';
+let { display, x_scale_fn, x2_scale_fn, y_scale_fn, y2_scale_fn, x_range, x2_range, y_range, y2_range, x_scale_type, x2_scale_type, y_scale_type, y2_scale_type, x_is_time = false, x2_is_time = false, has_x2 = false, has_y2 = false, width, height, pad, } = $props();
+const spans_zero = (range) => Math.min(range[0], range[1]) <= 0 && Math.max(range[0], range[1]) >= 0;
+</script>
+
+{#if display.x_zero_line && get_scale_type_name(x_scale_type) !== `log` &&
+    !x_is_time && spans_zero(x_range)}
+  {@const zero_x = x_scale_fn(0)}
+  {#if isFinite(zero_x)}
+    <line class="zero-line" x1={zero_x} x2={zero_x} y1={pad.t} y2={height - pad.b} />
+  {/if}
+{/if}
+
+{#if display.x2_zero_line && has_x2 && x2_scale_fn && x2_range &&
+    get_scale_type_name(x2_scale_type) !== `log` && !x2_is_time && spans_zero(x2_range)}
+  {@const zero_x2 = x2_scale_fn(0)}
+  {#if isFinite(zero_x2)}
+    <line class="zero-line" x1={zero_x2} x2={zero_x2} y1={pad.t} y2={height - pad.b} />
+  {/if}
+{/if}
+
+{#if display.y_zero_line && get_scale_type_name(y_scale_type) !== `log` &&
+    spans_zero(y_range)}
+  {@const zero_y = y_scale_fn(0)}
+  {#if isFinite(zero_y)}
+    <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zero_y} y2={zero_y} />
+  {/if}
+{/if}
+
+{#if display.y2_zero_line && has_y2 && y2_scale_fn && y2_range &&
+    get_scale_type_name(y2_scale_type) !== `log` && spans_zero(y2_range)}
+  {@const zero_y2 = y2_scale_fn(0)}
+  {#if isFinite(zero_y2)}
+    <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zero_y2} y2={zero_y2} />
+  {/if}
+{/if}
+
+<style>
+  .zero-line {
+    stroke: var(--plot-zero-line-color, light-dark(black, white));
+    stroke-width: var(--plot-zero-line-width, 1);
+    opacity: var(--plot-zero-line-opacity, 0.3);
+  }
+</style>

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

@@ -0,0 +1,32 @@
+import type { Vec2 } from '../math';
+import { type ScaleType, type Sides } from './';
+type $$ComponentProps = {
+    display: {
+        x_zero_line?: boolean;
+        x2_zero_line?: boolean;
+        y_zero_line?: boolean;
+        y2_zero_line?: boolean;
+    };
+    x_scale_fn: (val: number) => number;
+    x2_scale_fn?: (val: number) => number;
+    y_scale_fn: (val: number) => number;
+    y2_scale_fn?: (val: number) => number;
+    x_range: Vec2;
+    x2_range?: Vec2;
+    y_range: Vec2;
+    y2_range?: Vec2;
+    x_scale_type?: ScaleType;
+    x2_scale_type?: ScaleType;
+    y_scale_type?: ScaleType;
+    y2_scale_type?: ScaleType;
+    x_is_time?: boolean;
+    x2_is_time?: boolean;
+    has_x2?: boolean;
+    has_y2?: boolean;
+    width: number;
+    height: number;
+    pad: Required<Sides>;
+};
+declare const ZeroLines: import("svelte").Component<$$ComponentProps, {}, "">;
+type ZeroLines = ReturnType<typeof ZeroLines>;
+export default ZeroLines;

package/dist/plot/ZoomRect.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">let { start, current } = $props();
+export {};
+</script>
+
+{#if start && current && isFinite(start.x) && isFinite(start.y) &&
+    isFinite(current.x) && isFinite(current.y)}
+  {@const x = Math.min(start.x, current.x)}
+  {@const y = Math.min(start.y, current.y)}
+  {@const rect_width = Math.abs(start.x - current.x)}
+  {@const rect_height = Math.abs(start.y - current.y)}
+  <rect class="zoom-rect" {x} {y} width={rect_width} height={rect_height} />
+{/if}
+
+<style>
+  .zoom-rect {
+    fill: var(--plot-zoom-rect-fill, rgba(100, 100, 255, 0.2));
+    stroke: var(--plot-zoom-rect-stroke, rgba(100, 100, 255, 0.8));
+    stroke-width: var(--plot-zoom-rect-stroke-width, 1);
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { XyObj } from './';
+type $$ComponentProps = {
+    start: XyObj | null;
+    current: XyObj | null;
+};
+declare const ZoomRect: import("svelte").Component<$$ComponentProps, {}, "">;
+type ZoomRect = ReturnType<typeof ZoomRect>;
+export default ZoomRect;

package/dist/plot/axis-utils.d.ts

@@ -1,5 +1,5 @@
 import type { AxisConfig, AxisLoadError, BarSeries, DataLoaderFn, DataSeries } from './types';
-type AxisType = `x` | `y` | `y2`;
+type AxisType = `x` | `x2` | `y` | `y2`;
 export declare function merge_series_state<T extends DataSeries | BarSeries>(old_series: T[], new_series: T[]): T[];
 export interface AxisChangeState<T extends DataSeries | BarSeries> {
     get_axis: (axis: AxisType) => AxisConfig;

package/dist/plot/data-cleaning.js

@@ -264,7 +264,7 @@ function compute_savgol_coefficients(window, order) {
     }
     // Compute (V^T V)^-1 V^T using simple pseudoinverse
     // For smoothing, we only need the first row (constant term coefficients)
-    const vtv = multiply_transpose(vandermonde, vandermonde);
+    const vtv = multiply_matrices(transpose(vandermonde), vandermonde);
     const vtv_inv = invert_matrix(vtv);
     if (!vtv_inv) {
         // Fallback to uniform weights
@@ -815,10 +815,6 @@ function transpose(matrix) {
     }
     return result;
 }
-function multiply_transpose(a, b) {
-    const at = transpose(a);
-    return multiply_matrices(at, b);
-}
 function multiply_matrices(a, b) {
     const rows_a = a.length;
     const cols_a = a[0]?.length ?? 0;

package/dist/plot/index.d.ts

@@ -4,17 +4,19 @@ export interface TweenedOptions<T> {
     easing?: (t: number) => number;
     interpolate?: (a: T, b: T) => (t: number) => T;
 }
+export { default as AxisLabel } from './AxisLabel.svelte';
 export { default as BarPlot } from './BarPlot.svelte';
 export { default as BarPlotControls } from './BarPlotControls.svelte';
 export { default as ColorBar } from './ColorBar.svelte';
 export { default as ColorScaleSelect } from './ColorScaleSelect.svelte';
+export * from './data-cleaning';
 export { default as ElementScatter } from './ElementScatter.svelte';
 export * from './fill-utils';
 export { default as FillArea } from './FillArea.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as HistogramControls } from './HistogramControls.svelte';
-export { default as InteractiveAxisLabel } from './InteractiveAxisLabel.svelte';
 export * from './interactions';
+export { default as InteractiveAxisLabel } from './InteractiveAxisLabel.svelte';
 export * from './layout';
 export { default as Line } from './Line.svelte';
 export { default as PlotControls } from './PlotControls.svelte';
@@ -36,4 +38,6 @@ export { default as SpacegroupBarPlot } from './SpacegroupBarPlot.svelte';
 export { default as Surface3D } from './Surface3D.svelte';
 export * from './svg';
 export * from './types';
-export * from './data-cleaning';
+export * from './utils';
+export { default as ZeroLines } from './ZeroLines.svelte';
+export { default as ZoomRect } from './ZoomRect.svelte';

package/dist/plot/index.js

@@ -1,14 +1,16 @@
+export { default as AxisLabel } from './AxisLabel.svelte';
 export { default as BarPlot } from './BarPlot.svelte';
 export { default as BarPlotControls } from './BarPlotControls.svelte';
 export { default as ColorBar } from './ColorBar.svelte';
 export { default as ColorScaleSelect } from './ColorScaleSelect.svelte';
+export * from './data-cleaning';
 export { default as ElementScatter } from './ElementScatter.svelte';
 export * from './fill-utils';
 export { default as FillArea } from './FillArea.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as HistogramControls } from './HistogramControls.svelte';
-export { default as InteractiveAxisLabel } from './InteractiveAxisLabel.svelte';
 export * from './interactions';
+export { default as InteractiveAxisLabel } from './InteractiveAxisLabel.svelte';
 export * from './layout';
 export { default as Line } from './Line.svelte';
 export { default as PlotControls } from './PlotControls.svelte';
@@ -30,4 +32,6 @@ export { default as SpacegroupBarPlot } from './SpacegroupBarPlot.svelte';
 export { default as Surface3D } from './Surface3D.svelte';
 export * from './svg';
 export * from './types';
-export * from './data-cleaning';
+export * from './utils';
+export { default as ZeroLines } from './ZeroLines.svelte';
+export { default as ZoomRect } from './ZoomRect.svelte';

package/dist/plot/interactions.d.ts

@@ -1,14 +1,12 @@
-import type { Y2SyncConfig, Y2SyncMode } from './types';
-export declare function get_relative_coords(evt: MouseEvent): {
-    x: number;
-    y: number;
-} | null;
+import type { Vec2 } from '../math';
+import type { XyObj, Y2SyncConfig, Y2SyncMode } from './types';
+export declare function get_relative_coords(evt: MouseEvent): XyObj | null;
 export declare function normalize_y2_sync(sync: Y2SyncConfig | Y2SyncMode | undefined): Y2SyncConfig;
-export declare function sync_y2_range(y1_range: [number, number], y2_base_range: [number, number], sync: Y2SyncConfig): [number, number];
-export declare function pan_range(current: [number, number], delta: number): [number, number];
-export declare function pixels_to_data_delta(pixel_delta: number, data_range: [number, number], pixel_range: number): number;
+export declare function sync_y2_range(y1_range: Vec2, y2_base_range: Vec2, sync: Y2SyncConfig): Vec2;
+export declare function pan_range(current: Vec2, delta: number): Vec2;
+export declare function pixels_to_data_delta(pixel_delta: number, data_range: Vec2, pixel_range: number): number;
 export declare const PINCH_ZOOM_THRESHOLD = 0.1;
-export declare function expand_range_if_needed(current: [number, number], new_range: [number, number]): {
-    range: [number, number];
+export declare function expand_range_if_needed(current: Vec2, new_range: Vec2): {
+    range: Vec2;
     changed: boolean;
 };

package/dist/plot/interactions.js

@@ -1,9 +1,8 @@
 // Get relative coordinates from a mouse event
 export function get_relative_coords(evt) {
     const current_target = evt.currentTarget;
-    if (!current_target || typeof current_target.getBoundingClientRect !== `function`) {
+    if (!(current_target instanceof SVGElement))
         return null;
-    }
     const svg_box = current_target.getBoundingClientRect();
     if (!svg_box)
         return null;
@@ -27,7 +26,7 @@ export function sync_y2_range(y1_range, y2_base_range, sync) {
         return y2_base_range;
     // Synced: Y2 has exact same range as Y1
     if (sync.mode === `synced`) {
-        return [...y1_range];
+        return [y1_range[0], y1_range[1]];
     }
     // Align: Position so align_val (default 0) is at same relative position on both axes
     // Y2 range expands as needed to show all data while maintaining alignment
@@ -77,8 +76,7 @@ export const PINCH_ZOOM_THRESHOLD = 0.1;
 // Helper to check if range is the default [0, 1] sentinel (no data)
 // Note: min === 0 handles -0 correctly since -0 === 0 in JavaScript
 const is_default_range = ([min, max]) => min === 0 && max === 1;
-// Lazy range expansion: only expand when new data exceeds current bounds.
-// Never shrink when data is hidden (preserves user's view context).
+// Adopt the new data range, unless all series were hidden (sentinel [0, 1] fallback).
 // NOTE: [0, 1] is the "no data" sentinel - when all series are hidden, auto ranges
 // fall back to [0, 1]. Actual data spanning exactly [0, 1] is a rare edge case.
 export function expand_range_if_needed(current, new_range) {
@@ -91,19 +89,12 @@ export function expand_range_if_needed(current, new_range) {
         return { range: current, changed: false };
     if (!current_valid)
         return { range: new_range, changed: true };
-    const current_is_default = is_default_range(current);
-    const new_is_default = is_default_range(new_range);
-    // Adopt new range if transitioning from default, keep current if data was hidden
-    if (current_is_default !== new_is_default) {
-        return current_is_default
-            ? { range: new_range, changed: true }
-            : { range: current, changed: false };
+    // When all series are hidden, auto ranges fall back to [0, 1] sentinel.
+    // Don't shrink to that — preserve the current view so it doesn't jump.
+    if (!is_default_range(current) && is_default_range(new_range)) {
+        return { range: current, changed: false };
     }
-    // Both default or neither - expand only (take min of mins, max of maxes)
-    const expanded = [
-        Math.min(current[0], new_range[0]),
-        Math.max(current[1], new_range[1]),
-    ];
-    const changed = expanded[0] !== current[0] || expanded[1] !== current[1];
-    return { range: expanded, changed };
+    // Otherwise adopt the new range directly (both expand and shrink)
+    const changed = new_range[0] !== current[0] || new_range[1] !== current[1];
+    return { range: new_range, changed };
 }

package/dist/plot/layout.d.ts

@@ -5,6 +5,9 @@ export declare function measure_text_width(text: string, font?: string): number;
 export interface AutoPaddingConfig {
     padding: Partial<Sides>;
     default_padding: Required<Sides>;
+    x2_axis?: AxisConfig & {
+        tick_values?: (string | number)[];
+    };
     y_axis?: AxisConfig & {
         tick_values?: (string | number)[];
     };
@@ -13,7 +16,10 @@ export interface AutoPaddingConfig {
     };
     label_gap?: number;
 }
-export declare const calc_auto_padding: ({ padding, default_padding, y_axis, y2_axis, label_gap, }: AutoPaddingConfig) => Required<Sides>;
+export declare const measure_max_tick_width: (ticks: (string | number)[], format?: string) => number;
+export declare const TICK_LABEL_HEIGHT = 16;
+export declare const AXIS_LABEL_HEIGHT = 20;
+export declare const calc_auto_padding: ({ padding, default_padding, x2_axis, y_axis, y2_axis, label_gap, }: AutoPaddingConfig) => Required<Sides>;
 export declare function constrain_tooltip_position(cursor_x: number, cursor_y: number, tooltip_width: number, tooltip_height: number, viewport_width: number, viewport_height: number, options?: {
     offset?: number;
     offset_x?: number;

package/dist/plot/layout.js

@@ -22,18 +22,26 @@ export function measure_text_width(text, font = `12px sans-serif`) {
     ctx.font = font;
     return ctx.measureText(text).width;
 }
-// Helper to measure max tick width
-const measure_max_tick_width = (ticks, format = ``) => ticks.length === 0 ? 0 : Math.max(...ticks.map((tick) => {
+// Measure the widest formatted tick label. Used for auto-padding and label placement.
+export const measure_max_tick_width = (ticks, format = ``) => ticks.length === 0 ? 0 : Math.max(...ticks.map((tick) => {
     const label = typeof tick === `string` ? tick : format_value(tick, format);
     return measure_text_width(label, `12px sans-serif`);
 }));
-export const calc_auto_padding = ({ padding, default_padding, y_axis = {}, y2_axis = {}, label_gap = LABEL_GAP_DEFAULT, }) => {
+// Estimated height of a single tick label line (font-size 0.8em ≈ 12px + leading)
+export const TICK_LABEL_HEIGHT = 16;
+// Estimated height of an axis label (font-size ~14px + margin)
+export const AXIS_LABEL_HEIGHT = 20;
+export const calc_auto_padding = ({ padding, default_padding, x2_axis = {}, y_axis = {}, y2_axis = {}, label_gap = LABEL_GAP_DEFAULT, }) => {
+    const x2_ticks = x2_axis.tick_values ?? [];
     const y_ticks = y_axis.tick_values ?? [];
     const y_format = y_axis.format ?? ``;
     const y2_ticks = y2_axis.tick_values ?? [];
     const y2_format = y2_axis.format ?? ``;
     return {
-        t: padding.t ?? default_padding.t,
+        t: padding.t ??
+            (x2_ticks.length > 0
+                ? Math.max(default_padding.t, TICK_LABEL_HEIGHT + label_gap + (x2_axis.label ? AXIS_LABEL_HEIGHT : 0))
+                : default_padding.t),
         b: padding.b ?? default_padding.b,
         l: padding.l ??
             Math.max(default_padding.l, measure_max_tick_width(y_ticks, y_format) + label_gap),

package/dist/plot/reference-line.d.ts

@@ -1,5 +1,4 @@
-import type { Vec3 } from '../math';
-import type { RefLine, RefLine3D, RefLine3DBase, RefLineBase, RefLineValue, RefPlane, RefPlaneBase } from './types';
+import type { RefLine, RefLineValue } from './types';
 export type IndexedRefLine = RefLine & {
     idx: number;
 };
@@ -12,31 +11,15 @@ export interface RefLinesByZIndex {
 }
 export declare function group_ref_lines_by_z(lines: IndexedRefLine[]): RefLinesByZIndex;
 export declare function normalize_value(value: RefLineValue): number;
-export declare function normalize_point(point: [RefLineValue, RefLineValue]): [number, number];
-export declare function horizontal_line(y_value: RefLineValue, opts?: Partial<RefLineBase>): RefLine;
-export declare function vertical_line(x_value: RefLineValue, opts?: Partial<RefLineBase>): RefLine;
-export declare function diagonal_line(slope: number, intercept: number, opts?: Partial<RefLineBase>): RefLine;
-export declare function line_segment(p1: [RefLineValue, RefLineValue], p2: [RefLineValue, RefLineValue], opts?: Partial<RefLineBase>): RefLine;
-export declare function line_through(p1: [RefLineValue, RefLineValue], p2: [RefLineValue, RefLineValue], opts?: Partial<RefLineBase>): RefLine;
-export declare function horizontal_lines(values: RefLineValue[], opts?: Partial<RefLineBase>): RefLine[];
-export declare function vertical_lines(values: RefLineValue[], opts?: Partial<RefLineBase>): RefLine[];
-export declare function plane_xy(z_value: number, opts?: Partial<RefPlaneBase>): RefPlane;
-export declare function plane_xz(y_value: number, opts?: Partial<RefPlaneBase>): RefPlane;
-export declare function plane_yz(x_value: number, opts?: Partial<RefPlaneBase>): RefPlane;
-export declare function plane_normal(normal: Vec3, point: Vec3, opts?: Partial<RefPlaneBase>): RefPlane;
-export declare function plane_through_points(p1: Vec3, p2: Vec3, p3: Vec3, opts?: Partial<RefPlaneBase>): RefPlane;
-export declare function line_x_axis(y_value: number, z_value: number, opts?: Partial<RefLine3DBase>): RefLine3D;
-export declare function line_y_axis(x_value: number, z_value: number, opts?: Partial<RefLine3DBase>): RefLine3D;
-export declare function line_z_axis(x_value: number, y_value: number, opts?: Partial<RefLine3DBase>): RefLine3D;
-export declare function line_segment_3d(p1: [number, number, number], p2: [number, number, number], opts?: Partial<RefLine3DBase>): RefLine3D;
-export declare function line_through_3d(p1: [number, number, number], p2: [number, number, number], opts?: Partial<RefLine3DBase>): RefLine3D;
+export declare const normalize_point: (point: [RefLineValue, RefLineValue]) => [number, number];
 export declare function resolve_line_endpoints(ref_line: RefLine, { x_min, x_max, y_min, y_max }: {
     x_min: number;
     x_max: number;
     y_min: number;
     y_max: number;
-}, { x_scale, y_scale, y2_scale }: {
+}, { x_scale, x2_scale, y_scale, y2_scale }: {
     x_scale: (val: number) => number;
+    x2_scale?: (val: number) => number;
     y_scale: (val: number) => number;
     y2_scale?: (val: number) => number;
 }): [number, number, number, number] | null;