matterviz 0.4.2 → 0.4.3

package/dist/math.js

@@ -147,22 +147,19 @@ export function matrix_inverse_3x3(matrix) {
 export function mat3x3_vec3_multiply(matrix, vector) {
     const [a, b, c] = matrix;
     const [x, y, z] = vector;
-    const a_new = a[0] * x + a[1] * y + a[2] * z;
-    const b_new = b[0] * x + b[1] * y + b[2] * z;
-    const c_new = c[0] * x + c[1] * y + c[2] * z;
-    return [a_new, b_new, c_new];
+    return [
+        a[0] * x + a[1] * y + a[2] * z,
+        b[0] * x + b[1] * y + b[2] * z,
+        c[0] * x + c[1] * y + c[2] * z,
+    ];
 }
+// Add up any number of same-length vectors
 export function add(...vecs) {
-    // add up any number of same-length vectors
     if (vecs.length === 0)
         throw new Error(`Cannot add zero vectors`);
-    const first_vec = vecs[0];
-    const length = first_vec.length;
-    // Validate all vectors have the same length
-    for (const vec of vecs) {
-        if (vec.length !== length) {
-            throw new Error(`All vectors must have the same length`);
-        }
+    const length = vecs[0].length;
+    if (vecs.some((vec) => vec.length !== length)) {
+        throw new Error(`All vectors must have the same length`);
     }
     const result = Array.from({ length }).fill(0);
     for (const vec of vecs) {
@@ -180,20 +177,14 @@ export function subtract(vec1, vec2) {
 }
 // Validate matrix structure and return column count
 function validate_matrix(mat, name) {
-    // Check for empty matrix (no rows)
-    if (mat.length === 0) {
+    if (mat.length === 0)
         throw new Error(`${name} must have at least one row`);
-    }
     if (!mat.every((row) => Array.isArray(row))) {
         throw new Error(`${name} must contain only array rows (no undefined/non-array elements)`);
     }
-    const cols = mat[0]?.length;
-    if (!Number.isFinite(cols))
-        throw new Error(`${name} has no columns`);
-    // Check for zero columns
-    if (cols === 0) {
+    const cols = mat[0].length;
+    if (cols === 0)
         throw new Error(`${name} must have at least one column`);
-    }
     if (!mat.every((row) => row.length === cols)) {
         throw new Error(`${name} must be rectangular`);
     }
@@ -293,7 +284,10 @@ export function scale_lattice_matrix(orig_matrix, scaling_factors) {
         [c[0] * nz, c[1] * nz, c[2] * nz],
     ];
 }
-const create_cart_to_frac_matrix = (lattice) => matrix_inverse_3x3(transpose_3x3_matrix(lattice));
+// Matrix mapping Cartesian coords to fractional (inverse of transposed
+// row-vector lattice). Prefer create_cart_to_frac unless the raw matrix is
+// needed, e.g. for allocation-free scalar arithmetic in hot loops.
+export const create_cart_to_frac_matrix = (lattice) => matrix_inverse_3x3(transpose_3x3_matrix(lattice));
 // Curried fractional→Cartesian converter (caches transposed matrix)
 export const create_frac_to_cart = (lattice) => {
     const transposed = transpose_3x3_matrix(lattice);
@@ -811,11 +805,12 @@ export function compute_bounding_box_2d(vertices) {
 export function polygon_centroid(vertices) {
     if (vertices.length === 0)
         return [0, 0];
-    if (vertices.length < 3) {
-        const sum_x = vertices.reduce((acc, [x]) => acc + x, 0);
-        const sum_y = vertices.reduce((acc, [, y]) => acc + y, 0);
-        return [sum_x / vertices.length, sum_y / vertices.length];
-    }
+    const vertex_average = () => [
+        vertices.reduce((acc, [x]) => acc + x, 0) / vertices.length,
+        vertices.reduce((acc, [, y]) => acc + y, 0) / vertices.length,
+    ];
+    if (vertices.length < 3)
+        return vertex_average();
     let [signed_area, cx, cy] = [0, 0, 0];
     for (let idx = 0; idx < vertices.length; idx++) {
         const [x0, y0] = vertices[idx];
@@ -826,12 +821,8 @@ export function polygon_centroid(vertices) {
         cy += (y0 + y1) * cross;
     }
     signed_area *= 0.5;
-    // Fall back to vertex average for degenerate polygons
-    if (Math.abs(signed_area) < EPS) {
-        const sum_x = vertices.reduce((acc, [x]) => acc + x, 0);
-        const sum_y = vertices.reduce((acc, [, y]) => acc + y, 0);
-        return [sum_x / vertices.length, sum_y / vertices.length];
-    }
+    if (Math.abs(signed_area) < EPS)
+        return vertex_average();
     const factor = 1 / (6 * signed_area);
     return [cx * factor, cy * factor];
 }
@@ -910,11 +901,11 @@ export const cross_2d = (origin, point_a, point_b) => (point_a[0] - origin[0]) *
     (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) => {
+export const monotone_chain = (sorted, tolerance = 0) => {
     const chain = [];
     for (const pt of sorted) {
         while (chain.length >= 2 &&
-            cross_2d(chain[chain.length - 2], chain[chain.length - 1], pt) <= 0) {
+            cross_2d(chain[chain.length - 2], chain[chain.length - 1], pt) <= tolerance) {
             chain.pop();
         }
         chain.push(pt);
@@ -923,12 +914,12 @@ export const monotone_chain = (sorted) => {
 };
 // Full 2D convex hull via Andrew's monotone chain algorithm.
 // Returns vertices in counter-clockwise order.
-export function convex_hull_2d(points) {
+export function convex_hull_2d(points, tolerance = 0) {
     if (points.length < 3)
         return [...points];
     const sorted = points.toSorted((a, b) => a[0] - b[0] || a[1] - b[1]);
-    const lower = monotone_chain(sorted);
-    const upper = monotone_chain(sorted.toReversed());
+    const lower = monotone_chain(sorted, tolerance);
+    const upper = monotone_chain(sorted.toReversed(), tolerance);
     // Remove last point of each half (it's the first point of the other)
     lower.pop();
     upper.pop();

package/dist/overlays/ContextMenu.svelte

@@ -38,41 +38,22 @@
     return { x: Math.max(0, x), y: Math.max(0, y) }
   }
 
-  // Handle click outside to close
-  function handle_click_outside(event: MouseEvent) {
-    const target = event.target
-    if (target instanceof Element && visible) {
-      const menu = target.closest(`.context-menu`)
-      if (!menu) on_close?.()
-    }
-  }
-
-  // Handle right-click outside to close
-  function handle_right_click_outside(event: MouseEvent) {
-    if (!visible) return
-    const target = event.target
-    const menu = target instanceof Element ? target.closest(`.context-menu`) : null
-    if (!menu) {
-      event.preventDefault()
-      on_close?.()
-    }
-  }
-
-  // Handle keyboard shortcuts
-  function handle_keydown(event: KeyboardEvent) {
-    if (event.key === `Escape` && visible) on_close?.()
-  }
-
-  // Handle option selection
-  function handle_option_click(section_title: string, option: MenuOption) {
-    if (!option.disabled) on_select?.(section_title, option)
+  // Close on click or right-click outside the menu (right-click also suppresses
+  // the native context menu)
+  function handle_outside_pointer(event: MouseEvent) {
+    if (!visible || !(event.target instanceof Element)) return
+    if (event.target.closest(`.context-menu`)) return
+    if (event.type === `contextmenu`) event.preventDefault()
+    on_close?.()
   }
 </script>
 
 <svelte:document
-  onclick={handle_click_outside}
-  oncontextmenu={handle_right_click_outside}
-  onkeydown={handle_keydown}
+  onclick={handle_outside_pointer}
+  oncontextmenu={handle_outside_pointer}
+  onkeydown={(event) => {
+    if (event.key === `Escape` && visible) on_close?.()
+  }}
 />
 
 {#if visible}
@@ -86,7 +67,9 @@
           <button
             class:selected={selected_values[title] === option.value}
             class:disabled={option.disabled}
-            onclick={() => handle_option_click(title, option)}
+            onclick={() => {
+              if (!option.disabled) on_select?.(title, option)
+            }}
           >
             {#if option.icon}
               <Icon icon={option.icon as IconName} />

package/dist/overlays/DraggablePane.svelte

@@ -2,7 +2,7 @@
   import Icon from '../Icon.svelte'
   import type { IconName } from '../icons'
   import { DragControlTab } from './'
-  import type { Snippet } from 'svelte'
+  import { onDestroy, type Snippet } from 'svelte'
   import { draggable, tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
 
@@ -118,25 +118,29 @@
     onclose()
   }
 
-  function reset_position() {
-    if (toggle_pane_btn) {
-      const pos = calculate_position()
-      initial_position = pos
-      if (pane_div) {
-        Object.assign(pane_div.style, {
-          left: pos.left,
-          top: pos.top,
-          right: `auto`,
-          bottom: `auto`,
-          width: ``,
-          maxHeight: ``,
-        })
-        // Refresh --pane-viewport-clamp for the new position (matches
-        // handle_resize and the mount effect; without this a reset after a
-        // drag + window resize keeps a stale bottom-edge cap)
-        apply_viewport_clamp()
-      }
+  // Move the pane back under the toggle button, clear manual size overrides and
+  // refresh --pane-viewport-clamp (without which a reset after a drag + window
+  // resize would keep a stale bottom-edge cap)
+  function position_pane() {
+    if (pane_div) {
+      // Clear manual size first so calculate_position() uses natural pane dimensions
+      pane_div.style.width = ``
+      pane_div.style.maxHeight = ``
     }
+    const pos = calculate_position()
+    initial_position = pos
+    if (!pane_div) return
+    Object.assign(pane_div.style, {
+      left: pos.left,
+      top: pos.top,
+      right: `auto`,
+      bottom: `auto`,
+    })
+    apply_viewport_clamp()
+  }
+
+  function reset_position() {
+    if (toggle_pane_btn) position_pane()
     // Hide the control buttons after reset
     show_control_buttons = false
     has_been_dragged = false
@@ -204,37 +208,26 @@
     // (Playwright and some browsers synthesize a click after pointer up)
     if (Date.now() - resize_end_time < 200) return
 
-    const target = event.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()
-    }
+    const target = event.target instanceof Node ? event.target : null
+    const inside_toggle_or_pane = [toggle_pane_btn, pane_div].some(
+      (el) => el && (el === target || el.contains(target)),
+    )
+    if (!inside_toggle_or_pane && !currently_dragging && !resizing) close_pane()
   }
 
   // Debounced resize handler for better performance
-  let resize_timeout: ReturnType<typeof setTimeout> | undefined = $state(undefined)
+  let resize_timeout: ReturnType<typeof setTimeout> | undefined
+  onDestroy(() => resize_timeout && clearTimeout(resize_timeout))
 
   function handle_resize() {
     // Only reposition if pane is visible and hasn't been manually dragged
     if (!show || has_been_dragged || currently_dragging) return
 
     if (resize_timeout) clearTimeout(resize_timeout)
-    const current_timeout = setTimeout(() => {
-      if (resize_timeout !== current_timeout) return
-      if (show && toggle_pane_btn && !has_been_dragged && pane_div) {
-        const pos = calculate_position()
-        initial_position = pos
-        pane_div.style.left = pos.left
-        pane_div.style.top = pos.top
-        apply_viewport_clamp()
-      }
+    resize_timeout = setTimeout(() => {
+      // Re-check state since it may have changed during the debounce window
+      if (show && toggle_pane_btn && !has_been_dragged && pane_div) position_pane()
     }, 50) // Debounce resize events
-    resize_timeout = current_timeout
   }
 
   // Fixed panes must never extend past the bottom viewport edge: cap the
@@ -257,21 +250,7 @@
 
   // Position pane when shown
   $effect(() => {
-    if (show && toggle_pane_btn && !has_been_dragged) {
-      const pos = calculate_position()
-      initial_position = pos
-      if (pane_div) {
-        Object.assign(pane_div.style, {
-          left: pos.left,
-          top: pos.top,
-          right: `auto`,
-          bottom: `auto`,
-          width: ``,
-          maxHeight: ``,
-        })
-        apply_viewport_clamp()
-      }
-    }
+    if (show && toggle_pane_btn && !has_been_dragged) position_pane()
   })
 </script>
 
@@ -374,7 +353,7 @@
     background-color: color-mix(in srgb, currentColor 8%, transparent);
   }
   div.draggable-pane {
-    position: absolute; /* Use absolute so pane scrolls with page content */
+    /* position set inline via style:position (default absolute: scrolls with page) */
     background: var(--pane-bg, var(--page-bg, light-dark(white, black)));
     border: var(
       --pane-border,
@@ -386,7 +365,9 @@
       --pane-box-shadow,
       light-dark(0 4px 20px -4px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.3))
     );
-    z-index: var(--pane-z-index, 10);
+    z-index: var(--pane-z-index, var(--z-index-viewer-pane, 10));
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     display: grid;
     text-align: left;
     /* Exclude position from being transitioned to prevent sluggish dragging */
@@ -466,7 +447,7 @@
   .draggable-pane :global(input[type='number']) {
     box-sizing: border-box;
     text-align: center;
-    width: 2.2em;
+    width: 3.5em;
     margin: 0 3pt;
     flex-shrink: 0;
   }

package/dist/overlays/DraggablePane.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { IconName } from '../icons';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     show?: boolean;

package/dist/overlays/GlassChip.svelte

@@ -18,7 +18,9 @@
     position: absolute;
     top: var(--glass-chip-top, 10px);
     left: var(--glass-chip-left, 10px);
-    z-index: var(--glass-chip-z, 2);
+    z-index: var(--glass-chip-z, var(--z-index-viewer-chip, 2));
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     max-width: var(--glass-chip-max-width, calc(100% - 20px));
     padding: 4px 8px;
     border-radius: 6px;

package/dist/periodic-table/PeriodicTableControls.svelte

@@ -102,40 +102,6 @@
     }
   })
 
-  // Generic reset function using simple object key access
-  function reset_property(prop: keyof typeof defaults): void {
-    const default_value = defaults[prop]
-
-    // Use simple assignment based on property name
-    if (prop === `tile_gap`) tile_gap = default_value as string
-    else if (prop === `symbol_font_size`) symbol_font_size = default_value as number
-    else if (prop === `number_font_size`) number_font_size = default_value as number
-    else if (prop === `name_font_size`) name_font_size = default_value as number
-    else if (prop === `value_font_size`) value_font_size = default_value as number
-    else if (prop === `tooltip_font_size`) tooltip_font_size = default_value as number
-    else if (prop === `tooltip_bg_color`) tooltip_bg_color = default_value as string
-    else if (prop === `tile_border_radius`) tile_border_radius = Number(default_value)
-    else if (prop === `inner_transition_offset`) {
-      inner_transition_offset = Number(default_value)
-    } else if (prop === `tile_font_color`) tile_font_color = String(default_value)
-    else if (prop === `tile_transition_duration`) {
-      tile_transition_duration = Number(default_value)
-    } else if (prop === `hover_border_width`) {
-      hover_border_width = Number(default_value)
-    } else if (prop === `symbol_font_weight`) {
-      symbol_font_weight = Number(default_value)
-    } else if (prop === `number_font_weight`) {
-      number_font_weight = Number(default_value)
-    } else if (prop === `tooltip_border_radius`) {
-      tooltip_border_radius = Number(default_value)
-    } else if (prop === `tooltip_padding`) tooltip_padding = String(default_value)
-    else if (prop === `tooltip_line_height`) {
-      tooltip_line_height = Number(default_value)
-    } else if (prop === `tooltip_text_align`) {
-      tooltip_text_align = String(default_value)
-    }
-  }
-
   // Check if settings in each section have been modified from defaults
   let category_colors_modified = $derived(
     Object.keys(colors.category).some(
@@ -247,21 +213,23 @@
     <label>
       <span>Gap between tiles</span>
       <input type="text" bind:value={tile_gap} placeholder="0.3cqw" />
-      <button onclick={() => reset_property(`tile_gap`)}>reset</button>
+      <button onclick={() => (tile_gap = defaults.tile_gap)}>reset</button>
     </label>
 
     <label>
       <span>Border radius (pt)</span>
       <input type="range" min="0" max="10" step="0.5" bind:value={tile_border_radius} />
       <input type="number" min="0" max="10" step="0.5" bind:value={tile_border_radius} />
-      <button onclick={() => reset_property(`tile_border_radius`)}>reset</button>
+      <button onclick={() => (tile_border_radius = defaults.tile_border_radius)}>reset</button>
     </label>
 
     <label>
       <span>Inner transition offset</span>
       <input type="range" min="0.1" max="2" step="0.1" bind:value={inner_transition_offset} />
       <input type="number" min="0.1" max="2" step="0.1" bind:value={inner_transition_offset} />
-      <button onclick={() => reset_property(`inner_transition_offset`)}>reset</button>
+      <button onclick={() => (inner_transition_offset = defaults.inner_transition_offset)}
+        >reset</button
+      >
     </label>
 
     <label>
@@ -274,20 +242,22 @@
         step="0.1"
         bind:value={tile_transition_duration}
       />
-      <button onclick={() => reset_property(`tile_transition_duration`)}>reset</button>
+      <button onclick={() => (tile_transition_duration = defaults.tile_transition_duration)}
+        >reset</button
+      >
     </label>
 
     <label>
       <span>Hover border width (px)</span>
       <input type="range" min="0" max="5" step="1" bind:value={hover_border_width} />
       <input type="number" min="0" max="5" step="1" bind:value={hover_border_width} />
-      <button onclick={() => reset_property(`hover_border_width`)}>reset</button>
+      <button onclick={() => (hover_border_width = defaults.hover_border_width)}>reset</button>
     </label>
 
     <label>
       <span>Font color</span>
       <input type="color" bind:value={tile_font_color} />
-      <button onclick={() => reset_property(`tile_font_color`)}>reset</button>
+      <button onclick={() => (tile_font_color = defaults.tile_font_color)}>reset</button>
     </label>
   </section>
 
@@ -303,42 +273,42 @@
       <span>Symbol size</span>
       <input type="range" min="20" max="80" step="2" bind:value={symbol_font_size} />
       <input type="number" min="20" max="80" step="2" bind:value={symbol_font_size} />
-      <button onclick={() => reset_property(`symbol_font_size`)}>reset</button>
+      <button onclick={() => (symbol_font_size = defaults.symbol_font_size)}>reset</button>
     </label>
 
     <label>
       <span>Number size</span>
       <input type="range" min="10" max="40" step="1" bind:value={number_font_size} />
       <input type="number" min="10" max="40" step="1" bind:value={number_font_size} />
-      <button onclick={() => reset_property(`number_font_size`)}>reset</button>
+      <button onclick={() => (number_font_size = defaults.number_font_size)}>reset</button>
     </label>
 
     <label>
       <span>Name size</span>
       <input type="range" min="6" max="24" step="1" bind:value={name_font_size} />
       <input type="number" min="6" max="24" step="1" bind:value={name_font_size} />
-      <button onclick={() => reset_property(`name_font_size`)}>reset</button>
+      <button onclick={() => (name_font_size = defaults.name_font_size)}>reset</button>
     </label>
 
     <label>
       <span>Value size</span>
       <input type="range" min="10" max="30" step="1" bind:value={value_font_size} />
       <input type="number" min="10" max="30" step="1" bind:value={value_font_size} />
-      <button onclick={() => reset_property(`value_font_size`)}>reset</button>
+      <button onclick={() => (value_font_size = defaults.value_font_size)}>reset</button>
     </label>
 
     <label>
       <span>Symbol weight</span>
       <input type="range" min="100" max="900" step="100" bind:value={symbol_font_weight} />
       <input type="number" min="100" max="900" step="100" bind:value={symbol_font_weight} />
-      <button onclick={() => reset_property(`symbol_font_weight`)}>reset</button>
+      <button onclick={() => (symbol_font_weight = defaults.symbol_font_weight)}>reset</button>
     </label>
 
     <label>
       <span>Number weight</span>
       <input type="range" min="100" max="900" step="100" bind:value={number_font_weight} />
       <input type="number" min="100" max="900" step="100" bind:value={number_font_weight} />
-      <button onclick={() => reset_property(`number_font_weight`)}>reset</button>
+      <button onclick={() => (number_font_weight = defaults.number_font_weight)}>reset</button>
     </label>
   </section>
 
@@ -354,33 +324,37 @@
       <span>Font size (px)</span>
       <input type="range" min="8" max="24" step="1" bind:value={tooltip_font_size} />
       <input type="number" min="8" max="24" step="1" bind:value={tooltip_font_size} />
-      <button onclick={() => reset_property(`tooltip_font_size`)}>reset</button>
+      <button onclick={() => (tooltip_font_size = defaults.tooltip_font_size)}>reset</button>
     </label>
 
     <label>
       <span>Background color</span>
       <input type="color" bind:value={tooltip_bg_color} />
-      <button onclick={() => reset_property(`tooltip_bg_color`)}>reset</button>
+      <button onclick={() => (tooltip_bg_color = defaults.tooltip_bg_color)}>reset</button>
     </label>
 
     <label>
       <span>Border radius (px)</span>
       <input type="range" min="0" max="20" step="1" bind:value={tooltip_border_radius} />
       <input type="number" min="0" max="20" step="1" bind:value={tooltip_border_radius} />
-      <button onclick={() => reset_property(`tooltip_border_radius`)}>reset</button>
+      <button onclick={() => (tooltip_border_radius = defaults.tooltip_border_radius)}
+        >reset</button
+      >
     </label>
 
     <label>
       <span>Padding</span>
       <input type="text" bind:value={tooltip_padding} placeholder="4px 6px" />
-      <button onclick={() => reset_property(`tooltip_padding`)}>reset</button>
+      <button onclick={() => (tooltip_padding = defaults.tooltip_padding)}>reset</button>
     </label>
 
     <label>
       <span>Line height</span>
       <input type="range" min="0.8" max="2" step="0.1" bind:value={tooltip_line_height} />
       <input type="number" min="0.8" max="2" step="0.1" bind:value={tooltip_line_height} />
-      <button onclick={() => reset_property(`tooltip_line_height`)}>reset</button>
+      <button onclick={() => (tooltip_line_height = defaults.tooltip_line_height)}
+        >reset</button
+      >
     </label>
 
     <label>
@@ -390,7 +364,7 @@
         <option value="center">Center</option>
         <option value="right">Right</option>
       </select>
-      <button onclick={() => reset_property(`tooltip_text_align`)}>reset</button>
+      <button onclick={() => (tooltip_text_align = defaults.tooltip_text_align)}>reset</button>
     </label>
   </section>
 </div>

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte

@@ -802,13 +802,9 @@
           fill={merged_config.colors.text}
           font-size={merged_config.font_size + 2}
         >
-          {#if x_axis.label}
-            {@html sanitize_svg(x_axis.label)}
-          {:else if effective_data?.x_axis_label}
-            {@html sanitize_svg(effective_data.x_axis_label)}
-          {:else}
-            {@html sanitize_svg(default_x_axis_label)}
-          {/if}
+          {@html sanitize_svg(
+            x_axis.label || effective_data?.x_axis_label || default_x_axis_label,
+          )}
         </text>
       </g>
 
@@ -845,38 +841,26 @@
           fill={merged_config.colors.text}
           font-size={merged_config.font_size + 2}
         >
-          {#if y_axis.label}
-            {@html sanitize_svg(y_axis.label)}
-          {:else if effective_data?.y_axis_label}
-            {@html sanitize_svg(effective_data.y_axis_label)}
-          {:else}
-            Temperature ({temp_unit})
-          {/if}
+          {@html sanitize_svg(
+            y_axis.label || effective_data?.y_axis_label || `Temperature (${temp_unit})`,
+          )}
         </text>
       </g>
 
       <!-- Component labels at corners (supports compound formulas with subscripts) -->
       {#if show_component_labels}
-        <text
-          x={left}
-          y={bottom + 45}
-          text-anchor="middle"
-          fill={merged_config.colors.text}
-          font-size={merged_config.font_size + 2}
-          font-weight="bold"
-        >
-          {@html sanitize_svg(component_a_svg)}
-        </text>
-        <text
-          x={right}
-          y={bottom + 45}
-          text-anchor="middle"
-          fill={merged_config.colors.text}
-          font-size={merged_config.font_size + 2}
-          font-weight="bold"
-        >
-          {@html sanitize_svg(component_b_svg)}
-        </text>
+        {#each [component_a_svg, component_b_svg] as svg, idx (idx)}
+          <text
+            x={idx === 0 ? left : right}
+            y={bottom + 45}
+            text-anchor="middle"
+            fill={merged_config.colors.text}
+            font-size={merged_config.font_size + 2}
+            font-weight="bold"
+          >
+            {@html sanitize_svg(svg)}
+          </text>
+        {/each}
       {/if}
     </svg>
 

package/dist/phase-diagram/build-diagram.js

@@ -147,12 +147,7 @@ export function build_diagram(input) {
         title: meta.title,
         regions: built_regions,
         boundaries,
-        special_points: special_points?.map((sp) => ({
-            id: sp.id,
-            type: sp.type,
-            position: sp.position,
-            label: sp.label,
-        })),
+        special_points,
         ...(meta.pseudo_binary && { pseudo_binary: meta.pseudo_binary }),
         ...(meta.x_axis_label && { x_axis_label: meta.x_axis_label }),
         ...(meta.y_axis_label && { y_axis_label: meta.y_axis_label }),