matterviz 0.3.7 → 0.4.1

package/dist/layout/fullscreen.svelte.js

@@ -0,0 +1,37 @@
+import { set_fullscreen_bg } from './fullscreen';
+// Two-way sync between a bindable `fullscreen` flag, the browser fullscreen state of a wrapper, and the fullscreen background CSS var. Creates $effects (call during component init). Shared by BrillouinZone/FermiSurface/Structure viewers.
+// TODO Trajectory.svelte still has its own fullscreen variant — migrate it here.
+export function sync_fullscreen(opts) {
+    // Flag -> browser: enter/exit fullscreen when the bound flag changes
+    $effect(() => {
+        if (typeof window === `undefined`)
+            return;
+        const wrapper = opts.get_wrapper();
+        const fullscreen = opts.get_fullscreen();
+        const fs_el = document.fullscreenElement;
+        if (fullscreen && fs_el !== wrapper && wrapper) {
+            wrapper.requestFullscreen().catch((err) => {
+                console.error(err);
+                opts.on_request_error?.(err);
+            });
+        }
+        else if (!fullscreen && fs_el === wrapper) {
+            document.exitFullscreen().catch(console.error);
+        }
+        set_fullscreen_bg(wrapper, fullscreen, opts.bg_css_var);
+    });
+    // Browser -> flag: track fullscreenchange events (covers Esc key, programmatic exit, ...)
+    $effect(() => {
+        if (typeof document === `undefined`)
+            return () => { };
+        const handler = () => {
+            // tie state to this component's own wrapper so another element entering fullscreen
+            // doesn't flip every viewer's flag (would also trigger a requestFullscreen cascade)
+            const is_fullscreen = document.fullscreenElement === opts.get_wrapper();
+            opts.set_fullscreen(is_fullscreen);
+            opts.on_change?.(is_fullscreen);
+        };
+        document.addEventListener(`fullscreenchange`, handler);
+        return () => document.removeEventListener(`fullscreenchange`, handler);
+    });
+}

package/dist/layout/index.d.ts

@@ -1,4 +1,6 @@
 export * from './fullscreen';
+export * from './fullscreen.svelte';
+export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
@@ -6,5 +8,6 @@ export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
 export { default as SubpageGrid } from './SubpageGrid.svelte';
+export { default as ViewerChrome } from './ViewerChrome.svelte';
 export type InfoTagVariant = `default` | `success` | `warning` | `error` | `info`;
 export type InfoTagSize = `sm` | `md` | `lg`;

package/dist/layout/index.js

@@ -1,4 +1,6 @@
 export * from './fullscreen';
+export * from './fullscreen.svelte';
+export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
@@ -6,3 +8,4 @@ export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
 export { default as SubpageGrid } from './SubpageGrid.svelte';
+export { default as ViewerChrome } from './ViewerChrome.svelte';

package/dist/layout/json-tree/JsonNode.svelte

@@ -118,7 +118,7 @@
   }
 
   // Get children based on value type
-  function get_children(): Array<{ key: string | number; value: unknown }> {
+  function get_children(): { key: string | number; value: unknown }[] {
     if (!expandable) return []
 
     if (value_type === `array`) {

package/dist/layout/json-tree/JsonTree.svelte

@@ -252,8 +252,8 @@
     const all_paths = collect_all_paths(value, root_path)
     const descendants = target_path === `` ? all_paths : all_paths.filter(
       (entry) =>
-        entry === target_path || entry.startsWith(target_path + `.`) ||
-        entry.startsWith(target_path + `[`),
+        entry === target_path || entry.startsWith(`${target_path}.`) ||
+        entry.startsWith(`${target_path}[`),
     )
     return descendants.includes(target_path)
       ? descendants

package/dist/layout/json-tree/utils.js

@@ -13,6 +13,7 @@ function safe_stringify(val) {
             return `${inner}n`;
         if (typeof inner === `symbol`)
             return inner.toString();
+        // oxlint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- anonymous fns have name ``
         if (typeof inner === `function`)
             return `[Function: ${inner.name || `anonymous`}]`;
         return inner;
@@ -93,7 +94,7 @@ function format_path_segment(segment, is_first = false) {
         return is_first ? segment : `.${segment}`;
     }
     // Use bracket notation for keys with special characters
-    return `["${segment.replace(/"/g, `\\"`)}"]`;
+    return `["${segment.replaceAll('"', `\\"`)}"]`;
 }
 // Format a full path from segments
 // e.g., ["users", 0, "name"] -> "users[0].name"
@@ -317,7 +318,7 @@ export function parse_path(path) {
                 const num = Number(current);
                 if (Number.isNaN(num)) {
                     // Remove surrounding quotes and unescape internal quotes
-                    const unquoted = current.replace(/^"|"$/g, ``).replace(/\\"/g, `"`);
+                    const unquoted = current.replaceAll(/^"|"$/g, ``).replaceAll('\\"', `"`);
                     segments.push(unquoted);
                 }
                 else
@@ -335,7 +336,7 @@ export function parse_path(path) {
             // Apply same numeric/quoted-string logic as inside brackets
             const num = Number(current);
             if (Number.isNaN(num)) {
-                const unquoted = current.replace(/^"|"$/g, ``).replace(/\\"/g, `"`);
+                const unquoted = current.replaceAll(/^"|"$/g, ``).replaceAll('\\"', `"`);
                 segments.push(unquoted);
             }
             else
@@ -407,7 +408,7 @@ export function set_at_path(root, path_str, new_value, root_label) {
     const start = root_label && segments[0] === root_label ? 1 : 0;
     if (start >= segments.length)
         return new_value;
-    const cloned = JSON.parse(JSON.stringify(root));
+    const cloned = structuredClone(root);
     let current = cloned;
     for (let idx = start; idx < segments.length - 1; idx++) {
         const next = current[segments[idx]];

package/dist/marching-cubes.js

@@ -335,9 +335,11 @@ export function marching_cubes(grid, iso_value, k_lattice, options = {}) {
     const vertices = [];
     const faces = [];
     const normals = [];
-    // Precompute grid dimension products for flattening and cache keys
-    const ny_nz = ny * nz;
-    const max_flat = nx * ny_nz; // for computing cache keys
+    // Cache keys use UNWRAPPED grid coords (reach n in periodic mode, hence radix n+1):
+    // wrapping would merge vertices on opposite cell faces into cell-spanning triangles.
+    const key_nz = nz + 1;
+    const key_ny_nz = (ny + 1) * key_nz;
+    const max_flat = (nx + 1) * key_ny_nz; // for computing cache keys
     // Use numeric cache key - safe for grids up to ~300³ (2^53 / 2 / max_flat)
     // For much larger grids (>30M cells), consider switching to Map<string, number>
     // with keys like `${flat1},${flat2}` or Map<bigint, number> to avoid
@@ -367,17 +369,10 @@ export function marching_cubes(grid, iso_value, k_lattice, options = {}) {
         const ox2 = CUBE_VERTS_X[v2_idx];
         const oy2 = CUBE_VERTS_Y[v2_idx];
         const oz2 = CUBE_VERTS_Z[v2_idx];
-        // Compute wrapped grid positions using safe modulo for periodic boundaries
-        const g1x = periodic ? wrap_grid_idx(ix + ox1, nx) : ix + ox1;
-        const g1y = periodic ? wrap_grid_idx(iy + oy1, ny) : iy + oy1;
-        const g1z = periodic ? wrap_grid_idx(iz + oz1, nz) : iz + oz1;
-        const g2x = periodic ? wrap_grid_idx(ix + ox2, nx) : ix + ox2;
-        const g2y = periodic ? wrap_grid_idx(iy + oy2, ny) : iy + oy2;
-        const g2z = periodic ? wrap_grid_idx(iz + oz2, nz) : iz + oz2;
-        // Create numeric cache key (sorted for consistency)
+        // Sorted numeric key from UNWRAPPED coords (value/gradient lookups wrap internally).
         // Safe for grids up to ~300³ before exceeding Number.MAX_SAFE_INTEGER
-        const flat1 = g1x * ny_nz + g1y * nz + g1z;
-        const flat2 = g2x * ny_nz + g2y * nz + g2z;
+        const flat1 = (ix + ox1) * key_ny_nz + (iy + oy1) * key_nz + (iz + oz1);
+        const flat2 = (ix + ox2) * key_ny_nz + (iy + oy2) * key_nz + (iz + oz2);
         const cache_key = flat1 < flat2 ? flat1 * max_flat + flat2 : flat2 * max_flat + flat1;
         const cached = vertex_cache.get(cache_key);
         if (cached !== undefined)

package/dist/math.d.ts

@@ -2,6 +2,7 @@ import type { LatticeParams, Pbc } from './structure/index';
 export type Vec2 = [number, number];
 export type Vec3 = [number, number, number];
 export type Vec4 = [number, number, number, number];
+export type Vec5 = [number, number, number, number, number];
 export type Vec9 = [number, number, number, number, number, number, number, number, number];
 export type Point2D = {
     x: number;
@@ -51,12 +52,14 @@ export declare function matrix_inverse_3x3(matrix: Matrix3x3): Matrix3x3;
 export declare function mat3x3_vec3_multiply(matrix: Matrix3x3, vector: Vec3): Vec3;
 export declare function add<T extends NdVector>(...vecs: T[]): T;
 export declare function subtract<T extends NdVector>(vec1: T, vec2: T): T;
+export declare function dot(vec1: Matrix3x3, vec2: Matrix3x3): Matrix3x3;
+export declare function dot(vec1: Matrix3x3, vec2: Vec3): Vec3;
 export declare function dot(vec1: NdVector, vec2: NdVector): number;
 export declare function dot(vec1: NdVector[], vec2: NdVector): number[];
 export declare function dot(vec1: NdVector[], vec2: NdVector[]): number[][];
 export declare function to_voigt(tensor: number[][]): number[];
-export declare function from_voigt(voigt: number[]): number[][];
-export declare function vec9_to_mat3x3(flat_array: number[]): number[][];
+export declare function from_voigt(voigt: number[]): Matrix3x3;
+export declare function vec9_to_mat3x3(flat_array: number[]): Matrix3x3;
 export declare function tensor_to_flat_array(tensor: number[][]): number[];
 export declare const transpose_3x3_matrix: (matrix: Matrix3x3) => Matrix3x3;
 export declare function scale_lattice_matrix(orig_matrix: Matrix3x3, scaling_factors: Vec3): Matrix3x3;
@@ -78,7 +81,10 @@ export declare const lerp: (start: number, end: number, t: number) => number;
 export declare const lerp_vec3: (start: Vec3, end: Vec3, t: number) => Vec3;
 export declare const centered_frac: (val: number) => number;
 export declare const vecs_equal: (vec_a?: Vec3, vec_b?: Vec3) => boolean;
-export declare function normalize_vec3(vec: Vec3, fallback?: Vec3): Vec3;
+type Normalized<T extends readonly number[]> = {
+    -readonly [K in keyof T]: number;
+};
+export declare function normalize_vec<T extends readonly number[]>(vec: T, fallback?: NoInfer<T>): Normalized<T>;
 export declare function compute_in_plane_basis(normal: Vec3): [Vec3, Vec3];
 export declare function are_coplanar(points: number[][], tolerance?: number): boolean;
 export declare function merge_coplanar_triangles(positions: Float32Array, tolerance?: number): Float32Array;
@@ -86,7 +92,7 @@ export declare function compute_bounding_box(vertices: Vec3[]): {
     min: Vec3;
     max: Vec3;
 };
-export declare function is_square_matrix(matrix: unknown, dim: number): boolean;
+export declare function is_square_matrix(matrix: unknown, dim: number): matrix is number[][];
 export declare function point_in_polygon(point_x: number, point_y: number, vertices: Vec2[]): boolean;
 export declare function compute_bounding_box_2d(vertices: Vec2[]): {
     min: Vec2;
@@ -98,4 +104,6 @@ export declare function polygon_centroid(vertices: Vec2[]): Vec2;
 export declare function solve_linear_system(A: number[][], // NxN coefficient matrix
 b: number[]): number[] | null;
 export declare const cross_2d: (origin: Vec2, point_a: Vec2, point_b: Vec2) => number;
+export declare const monotone_chain: (sorted: Vec2[]) => Vec2[];
 export declare function convex_hull_2d(points: Vec2[]): Vec2[];
+export {};

package/dist/math.js

@@ -448,17 +448,19 @@ export const centered_frac = (val) => {
 // Element-wise equality check for two optional Vec3s.
 // Returns true if both are the same reference, or both are defined with equal components.
 export const vecs_equal = (vec_a, vec_b) => vec_a === vec_b ||
-    (!!vec_a &&
-        !!vec_b &&
+    (vec_a != null &&
+        vec_b != null &&
         vec_a[0] === vec_b[0] &&
         vec_a[1] === vec_b[1] &&
         vec_a[2] === vec_b[2]);
-// Normalize a Vec3 to unit length, returns zero vector if input is zero
-export function normalize_vec3(vec, fallback) {
-    const len = Math.hypot(vec[0], vec[1], vec[2]);
-    if (len < EPS)
-        return fallback ?? [0, 0, 0];
-    return [vec[0] / len, vec[1] / len, vec[2] / len];
+// Normalize a vector of any length to unit length; returns `fallback` (or zeros) when ~zero.
+export function normalize_vec(vec, fallback) {
+    let sum_sq = 0;
+    for (const coord of vec)
+        sum_sq += coord * coord;
+    const len = Math.sqrt(sum_sq);
+    const unit = len < EPS ? (fallback ?? vec.map(() => 0)) : vec.map((coord) => coord / len);
+    return unit;
 }
 // Compute orthonormal basis vectors in a plane perpendicular to `normal`.
 // Uses Gram-Schmidt orthogonalization + cross product.
@@ -472,7 +474,7 @@ export function compute_in_plane_basis(normal) {
         ref_vec[1] - dot_nr * normal[1],
         ref_vec[2] - dot_nr * normal[2],
     ];
-    const u_vec = normalize_vec3(u_raw, [0, 1, 0]);
+    const u_vec = normalize_vec(u_raw, [0, 1, 0]);
     const v_vec = cross_3d(normal, u_vec);
     return [u_vec, v_vec]; // u, v basis vectors
 }
@@ -649,6 +651,7 @@ export function merge_coplanar_triangles(positions, tolerance = 1e-4) {
             emit_tri(verts[0], verts[1], verts[2]);
         }
     };
+    const tri_area = (va, vb, vc) => 0.5 * Math.hypot(...cross_3d(subtract(vb, va), subtract(vc, va)));
     for (const members of groups.values()) {
         if (members.length === 1) {
             emit_original(members);
@@ -692,6 +695,18 @@ export function merge_coplanar_triangles(positions, tolerance = 1e-4) {
             }
             return unique_verts[best_idx];
         });
+        // Convex hull fills notches of concave patches, inventing area — keep originals then
+        let group_area = 0;
+        let fan_area = 0;
+        for (const tri_idx of members)
+            group_area += tri_area(...tri_planes[tri_idx].verts);
+        for (let idx = 1; idx < hull_3d.length - 1; idx++) {
+            fan_area += tri_area(hull_3d[0], hull_3d[idx], hull_3d[idx + 1]);
+        }
+        if (Math.abs(fan_area - group_area) > Math.max(group_area, 1e-12) * 1e-6) {
+            emit_original(members);
+            continue;
+        }
         // Fan-triangulate from hull vertex 0
         for (let idx = 1; idx < hull_3d.length - 1; idx++) {
             emit_tri(hull_3d[0], hull_3d[idx], hull_3d[idx + 1]);
@@ -722,13 +737,14 @@ export function compute_bounding_box(vertices) {
     }
     return { min, max };
 }
-// Check if a matrix is square with dimension NxN
+// Check if a matrix is a finite-numeric square matrix of dimension NxN (type predicate
+// so callers get number[][] narrowing without assertions). Rejects NaN/Infinity entries.
 export function is_square_matrix(matrix, dim) {
     if (!Array.isArray(matrix))
         return false;
     if (matrix.length !== dim)
         return false;
-    return matrix.every((row) => Array.isArray(row) && row.length === dim);
+    return matrix.every((row) => Array.isArray(row) && row.length === dim && row.every((val) => Number.isFinite(val)));
 }
 // --- 2D Geometry Utilities ---
 // Point-in-polygon test using ray casting algorithm
@@ -873,31 +889,27 @@ b) {
 }
 export const cross_2d = (origin, point_a, point_b) => (point_a[0] - origin[0]) * (point_b[1] - origin[1]) -
     (point_a[1] - origin[1]) * (point_b[0] - origin[0]);
+// One half of Andrew's monotone chain built from x-then-y *pre-sorted* points
+// (lower chain; pass reversed input for the upper chain).
+export const monotone_chain = (sorted) => {
+    const chain = [];
+    for (const pt of sorted) {
+        while (chain.length >= 2 &&
+            cross_2d(chain[chain.length - 2], chain[chain.length - 1], pt) <= 0) {
+            chain.pop();
+        }
+        chain.push(pt);
+    }
+    return chain;
+};
 // Full 2D convex hull via Andrew's monotone chain algorithm.
 // Returns vertices in counter-clockwise order.
 export function convex_hull_2d(points) {
     if (points.length < 3)
         return [...points];
     const sorted = points.toSorted((a, b) => a[0] - b[0] || a[1] - b[1]);
-    // Lower hull
-    const lower = [];
-    for (const pt of sorted) {
-        while (lower.length >= 2 &&
-            cross_2d(lower[lower.length - 2], lower[lower.length - 1], pt) <= 0) {
-            lower.pop();
-        }
-        lower.push(pt);
-    }
-    // Upper hull
-    const upper = [];
-    for (let idx = sorted.length - 1; idx >= 0; idx--) {
-        const pt = sorted[idx];
-        while (upper.length >= 2 &&
-            cross_2d(upper[upper.length - 2], upper[upper.length - 1], pt) <= 0) {
-            upper.pop();
-        }
-        upper.push(pt);
-    }
+    const lower = monotone_chain(sorted);
+    const upper = monotone_chain(sorted.toReversed());
     // Remove last point of each half (it's the first point of the other)
     lower.pop();
     upper.pop();

package/dist/overlays/DraggablePane.svelte

@@ -173,10 +173,10 @@
     if (Date.now() - resize_end_time < 200) return
 
     const target = event.target
-    const is_toggle_button = target instanceof Node && toggle_pane_btn &&
-      (target === toggle_pane_btn || toggle_pane_btn.contains(target))
-    const is_inside_pane = target instanceof Node && pane_div &&
-      (target === pane_div || pane_div.contains(target))
+    const is_toggle_button = target instanceof Node &&
+      (target === toggle_pane_btn || (toggle_pane_btn?.contains(target) ?? false))
+    const is_inside_pane = target instanceof Node &&
+      (target === pane_div || (pane_div?.contains(target) ?? false))
 
     if (!is_toggle_button && !is_inside_pane && !currently_dragging && !resizing) {
       close_pane()

package/dist/overlays/index.d.ts

@@ -1,3 +1,7 @@
+import type { ComponentProps } from 'svelte';
+import type DraggablePane from './DraggablePane.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
 export { default as DraggablePane } from './DraggablePane.svelte';
 export { default as DragControlTab } from './DragControlTab.svelte';
+export type PaneToggleProps = ComponentProps<typeof DraggablePane>[`toggle_props`];
+export type PaneProps = ComponentProps<typeof DraggablePane>[`pane_props`];

package/dist/periodic-table/PeriodicTable.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { is_color } from '../colors'
+  import { get_d3_interpolator, is_color } from '../colors'
   import type { ChemicalElement, ElementCategory, ElementSymbol } from '../element'
   import { element_data, ElementPhoto, ElementTile } from '../element'
   import { ELEM_SYMBOLS } from '../labels'
   import type { Point2D, Vec2 } from '../math'
   import { ColorBar } from '../plot'
   import { colors } from '../state.svelte'
-  import * as d3_sc from 'd3-scale-chromatic'
   import type { ComponentProps, Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { D3InterpolateName } from '../colors'
@@ -30,7 +29,7 @@
     active_elements = $bindable([]),
     gap = `0.3cqw`,
     inner_transition_metal_offset = 0.5,
-    lanth_act_tiles = tile_props?.show_symbol == false
+    lanth_act_tiles = tile_props?.show_symbol === false
       ? []
       : [...default_f_block_inset_tiles],
     lanth_act_style = ``,
@@ -115,8 +114,8 @@
             `each element possibly omitting elements at the end, got ${heatmap_values.length}`,
         )
         return []
-      } else return heatmap_values
-    } else if (typeof heatmap_values == `object`) {
+      }return heatmap_values
+    } else if (typeof heatmap_values === `object`) {
       const bad_keys = Object.keys(heatmap_values).filter(
         (key) => !ELEM_SYMBOLS.includes(key as ElementSymbol),
       )
@@ -143,7 +142,7 @@
 
   function handle_key(event: KeyboardEvent) {
     if (disabled || !active_element) return
-    if (event.key == `Enter`) onenter?.(active_element)
+    if (event.key === `Enter`) onenter?.(active_element)
 
     const arrow_keys = [`ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight`]
     if (!arrow_keys.includes(event.key)) return
@@ -186,26 +185,35 @@
   }
 
   let color_scale_fn = $derived(
-    typeof color_scale == `string` ? d3_sc[color_scale] : color_scale,
+    typeof color_scale === `string` ? get_d3_interpolator(color_scale) : color_scale,
   )
 
   let cs_min = $derived(
     color_scale_range[0] ??
-      (heat_values.length
+      (heat_values.length > 0
         ? Math.min(
-          ...heat_values.flat().filter((v): v is number => typeof v === `number`),
+          ...heat_values.flat().filter((val): val is number => typeof val === `number`),
         )
         : 0),
   )
   let cs_max = $derived(
     color_scale_range[1] ??
-      (heat_values.length
+      (heat_values.length > 0
         ? Math.max(
-          ...heat_values.flat().filter((v): v is number => typeof v === `number`),
+          ...heat_values.flat().filter((val): val is number => typeof val === `number`),
         )
         : 1),
   )
 
+  // smallest positive bound for log color mapping (matches the auto ColorBar's log scale)
+  let cs_min_pos = $derived.by(() => {
+    if (cs_min > 0) return cs_min
+    const pos = heat_values.flat().filter((val): val is number =>
+      typeof val === `number` && val > 0
+    )
+    return pos.length > 0 ? Math.min(...pos) : cs_max
+  })
+
   let bg_color = $derived(
     (
       value: number | number[] | string | string[] | false,
@@ -217,7 +225,7 @@
       }
 
       // If it's already a color string, return it directly
-      if (is_color(value)) return value as string
+      if (is_color(value)) return value
 
       // Return missing color for zero/invalid values or when no heatmap data
       if (
@@ -238,8 +246,12 @@
       const span = cs_max - cs_min
       if (span === 0) return color_scale_fn?.(0.5) // midpoint when all values equal
 
-      if (log) value = Math.log((value as number) - cs_min + 1) / Math.log(span + 1)
-      else value = ((value as number) - cs_min) / span
+      if (log) {
+        // log mapping matching the log ColorBar (value <= 0 returned missing_color above)
+        const log_span = Math.log(cs_max) - Math.log(cs_min_pos)
+        if (log_span === 0) return color_scale_fn?.(0.5)
+        value = (Math.log(value as number) - Math.log(cs_min_pos)) / log_span
+      } else value = ((value as number) - cs_min) / span
       return color_scale_fn?.(value as number)
     },
   )
@@ -253,7 +265,7 @@
 
       return value.map((val) => {
         // If it's already a color string, return it directly
-        if (is_color(val)) return val as string
+        if (is_color(val)) return val
         // Otherwise, map it through the color scale
         return bg_color(val as number, element)
       })

package/dist/periodic-table/PropertySelect.svelte

@@ -29,6 +29,7 @@
   {options}
   {selected}
   maxSelect={1}
+  maxOptions={options.length}
   {minSelect}
   bind:value
   placeholder="Select a heatmap"

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte

@@ -8,7 +8,8 @@
   import { sanitize_svg } from '../sanitize'
   import { compute_bounding_box_2d, polygon_centroid, type Vec2 } from '../math'
   import type { AxisConfig } from '../plot'
-  import { constrain_tooltip_position } from '../plot/layout'
+  import { constrain_tooltip_position } from '../plot/core/layout'
+  import { unique_id } from '../plot/core/utils'
   import { scaleLinear } from 'd3-scale'
   import type { ComponentProps, Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -124,6 +125,11 @@
   const pane_icon_style = `width: 14px; height: 14px`
   const pane_toggle_props = { style: `padding: 0` }
 
+  // Instance-unique prefix for gradient ids: region ids come from user data (e.g.
+  // 'liquid'), so two diagrams on one page would otherwise cross-reference each
+  // other's gradients (first-in-document wins, with that instance's pixel coords)
+  const gradient_uid = unique_id(`pd-gradient`)
+
   // Rebuild diagram data when diagram_input changes ($derived auto-recomputes)
   const rebuilt_data = $derived.by(() => {
     if (!diagram_input) return null
@@ -619,7 +625,7 @@
         {#each transformed_regions as region (region.id)}
           {#if region.gradient}
             <linearGradient
-              id="gradient-{region.id}"
+              id="{gradient_uid}-{region.id}"
               x1={region.x_min}
               x2={region.x_max}
               y1="0"
@@ -661,7 +667,7 @@
           <path
             d={region.svg_path}
             fill={region.gradient
-            ? `url(#gradient-${region.id})`
+            ? `url(#${gradient_uid}-${region.id})`
             : (region.color || get_phase_color(region.name))}
             stroke="none"
             class:hovered={hovered_region?.id === region.id}

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte.d.ts

@@ -39,6 +39,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
         }
     ]>;
 };
-declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<$$ComponentProps, {}, "x_axis" | "y_axis" | "fullscreen" | "controls_open" | "wrapper" | "show_grid" | "config" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "export_pane_open" | "lever_rule_mode" | "editor_open" | "diagram_input" | "hovered_region" | "display_temp_unit">;
+declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "fullscreen" | "wrapper" | "controls_open" | "x_axis" | "export_pane_open" | "png_dpi" | "config" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode" | "editor_open" | "diagram_input" | "hovered_region" | "display_temp_unit">;
 type IsobaricBinaryPhaseDiagram = ReturnType<typeof IsobaricBinaryPhaseDiagram>;
 export default IsobaricBinaryPhaseDiagram;

package/dist/phase-diagram/PhaseDiagramControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
   import { css_color_to_hex } from '../colors'
   import { format_num } from '../labels'
@@ -58,8 +59,8 @@
     enable_export?: boolean
     png_dpi?: number
     // Pane customization
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
     // Custom content snippets
     children?: Snippet<[{ controls_open: boolean }]>
     post_children?: Snippet<[{ controls_open: boolean }]>

package/dist/phase-diagram/PhaseDiagramControls.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AxisConfig } from '../plot';
 import type { ComponentProps, Snippet } from 'svelte';
@@ -16,8 +17,8 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     data?: PhaseDiagramData;
     enable_export?: boolean;
     png_dpi?: number;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
     children?: Snippet<[{
         controls_open: boolean;
     }]>;
@@ -25,6 +26,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
         controls_open: boolean;
     }]>;
 };
-declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "x_axis" | "y_axis" | "controls_open" | "show_grid" | "config" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "lever_rule_mode">;
+declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "controls_open" | "x_axis" | "png_dpi" | "config" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode">;
 type PhaseDiagramControls = ReturnType<typeof PhaseDiagramControls>;
 export default PhaseDiagramControls;

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { PaneToggleProps } from '../overlays'
   import { JsonTree } from '../layout/json-tree'
   import { set_at_path } from '../layout/json-tree/utils'
   import DraggablePane from '../overlays/DraggablePane.svelte'
@@ -6,6 +7,7 @@
   import { build_diagram } from './build-diagram'
   import type { DiagramInput } from './diagram-input'
   import type { PhaseDiagramData } from './types'
+  import { to_error } from '../utils'
 
   let {
     editor_open = $bindable(false),
@@ -20,7 +22,7 @@
     data?: PhaseDiagramData | null
     ondata?: (data: PhaseDiagramData) => void
     icon_style?: string
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    toggle_props?: PaneToggleProps
   } = $props()
 
   // The source object currently displayed (DiagramInput or PhaseDiagramData)
@@ -54,7 +56,7 @@
         build_diagram(updated as DiagramInput)
         diagram_input = updated as DiagramInput
       } catch (error) {
-        const msg = error instanceof Error ? error.message : String(error)
+        const msg = to_error(error).message
         show_rejection(msg)
       }
       return

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte.d.ts

@@ -1,5 +1,4 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
+import type { PaneToggleProps } from '../overlays';
 import type { DiagramInput } from './diagram-input';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = {
@@ -8,7 +7,7 @@ type $$ComponentProps = {
     data?: PhaseDiagramData | null;
     ondata?: (data: PhaseDiagramData) => void;
     icon_style?: string;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    toggle_props?: PaneToggleProps;
 };
 declare const PhaseDiagramEditorPane: import("svelte").Component<$$ComponentProps, {}, "editor_open" | "diagram_input">;
 type PhaseDiagramEditorPane = ReturnType<typeof PhaseDiagramEditorPane>;