matterviz 0.3.5 → 0.3.7

package/dist/sanitize.d.ts

@@ -1,4 +1,6 @@
 export declare function sanitize_html(html: unknown): string;
+export declare const compact_formula: (formula: string) => string;
 export declare const sanitize_formula: (formula: string, use_subscripts?: boolean) => string;
+export declare const sanitize_compact_formula: (formula: string, use_subscripts?: boolean) => string;
 export declare const sanitize_svg: (html: string) => string;
 export declare const sanitize_icon_svg: (html: string) => string;

package/dist/sanitize.js

@@ -91,8 +91,10 @@ export function sanitize_html(html) {
         ] });
     return dp.sanitize(safe, { ALLOWED_TAGS: SAFE_TAGS, ALLOWED_ATTR: SAFE_ATTRS });
 }
+export const compact_formula = (formula) => formula.replaceAll(/\s+/g, ``);
 // Sanitize a chemical formula with optional subscript formatting
 export const sanitize_formula = (formula, use_subscripts = true) => sanitize_html(format_formula_html(formula, use_subscripts));
+export const sanitize_compact_formula = (formula, use_subscripts = true) => sanitize_formula(compact_formula(formula), use_subscripts);
 const SVG_TEXT_TAGS = [`tspan`, `title`];
 // oxfmt-ignore
 const SVG_TEXT_ATTRS = [`dx`, `dy`, `x`, `y`, `fill`, `font-size`, `font-weight`, `baseline-shift`];

package/dist/spectral/Bands.svelte

@@ -883,7 +883,7 @@
       {/each}
 
       <!-- Symmetry point vertical lines (filter NaN from scale) -->
-      {#each Object.keys(x_axis_ticks).map(Number).map((x) => x_scale_fn(x)).filter(
+      {#each Object.keys(x_axis_ticks).map(Number).map((tick) => x_scale_fn(tick)).filter(
       Number.isFinite,
     ) as
         scaled_x

package/dist/spectral/BandsAndDos.svelte

@@ -7,6 +7,7 @@
   import Bands from './Bands.svelte'
   import Dos from './Dos.svelte'
   import {
+    axis_with_range,
     compute_frequency_range,
     detect_zoom_change,
     extract_efermi,
@@ -40,10 +41,26 @@
   )
   let fermi_level = $derived(extract_efermi(band_structs) ?? extract_efermi(doses))
 
-  // Synced zoom state (null = use auto-computed range)
+  const bands_default_axis = (range = shared_frequency_range): AxisConfig =>
+    shared_y_axis ? axis_with_range(bands_props.y_axis, range) : { ...bands_props.y_axis }
+  const dos_default_axis = (range = shared_frequency_range): AxisConfig =>
+    shared_y_axis ? axis_with_range(dos_props.y_axis, range, ``) : {
+      label: ``,
+      ...dos_props.y_axis,
+    }
+
   let synced_zoom_range = $state<Vec2 | null>(null)
-  let bands_y_axis = $state<AxisConfig>({})
-  let dos_y_axis = $state<AxisConfig>({ label: `` })
+  let bands_y_axis = $state<AxisConfig>(bands_default_axis())
+  let dos_y_axis = $state<AxisConfig>(dos_default_axis())
+  let prev_sources: unknown[] | undefined
+  $effect(() => {
+    const sources = [band_structs, doses, shared_y_axis, bands_props.y_axis, dos_props.y_axis]
+    if (prev_sources?.every((source, idx) => source === sources[idx])) return
+    prev_sources = sources
+    synced_zoom_range = null
+    bands_y_axis = bands_default_axis()
+    dos_y_axis = dos_default_axis()
+  })
 
   // Detect zoom changes and sync between components (runs first to capture child updates)
   $effect(() => {
@@ -67,12 +84,7 @@
       return
     }
     // Only include range if it's valid (don't override child's auto-range with undefined)
-    bands_y_axis = shared_y_axis
-      ? {
-        ...bands_props.y_axis,
-        ...(is_valid_range(base_range) && { range: base_range }),
-      }
-      : { ...bands_props.y_axis }
+    bands_y_axis = bands_default_axis(base_range)
   })
 
   // Propagate synced range to DOS y-axis (untrack current to avoid overwriting child zoom)
@@ -85,13 +97,7 @@
       return
     }
     // Only include range if it's valid (don't override child's auto-range with undefined)
-    dos_y_axis = shared_y_axis
-      ? {
-        label: ``,
-        ...dos_props.y_axis,
-        ...(is_valid_range(base_range) && { range: base_range }),
-      }
-      : { label: ``, ...dos_props.y_axis }
+    dos_y_axis = dos_default_axis(base_range)
   })
 
   let hovered_frequency = $state<number | null>(null)

package/dist/spectral/BrillouinBandsDos.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { BrillouinZone, reciprocal_lattice } from '../brillouin'
   import type { Vec2, Vec3 } from '../math'
-  import type { InternalPoint } from '../plot'
+  import type { InternalPoint, ScatterHandlerEvent } from '../plot'
   import type { AxisConfig } from '../plot/types'
   import type { Crystal } from '../structure'
   import type { ComponentProps, Snippet } from 'svelte'
@@ -101,10 +101,23 @@
       : `phone`,
   )
 
-  // Synced zoom state (null = use auto-computed range)
+  const bands_default_axis = (range = shared_frequency_range): AxisConfig =>
+    helpers.axis_with_range(bands_props.y_axis, range)
+  const dos_default_axis = (range = shared_frequency_range): AxisConfig =>
+    is_desktop ? helpers.axis_with_range(dos_props.y_axis, range, ``) : { ...dos_props.y_axis }
+
   let synced_zoom_range = $state<Vec2 | null>(null)
-  let bands_y_axis = $state<AxisConfig>({})
-  let dos_y_axis = $state<AxisConfig>({})
+  let bands_y_axis = $state<AxisConfig>(bands_default_axis())
+  let dos_y_axis = $state<AxisConfig>(dos_default_axis())
+  let prev_sources: unknown[] | undefined
+  $effect(() => {
+    const sources = [band_structs, doses, is_desktop, bands_props.y_axis, dos_props.y_axis]
+    if (prev_sources?.every((source, idx) => source === sources[idx])) return
+    prev_sources = sources
+    synced_zoom_range = null
+    bands_y_axis = bands_default_axis()
+    dos_y_axis = dos_default_axis()
+  })
 
   // Detect zoom changes and sync between components (runs first to capture child updates)
   $effect(() => {
@@ -130,10 +143,7 @@
       !helpers.ranges_equal(current_range, base_range)
     ) return
     // Only include range if it's valid (don't override child's auto-range with undefined)
-    bands_y_axis = {
-      ...bands_props.y_axis,
-      ...(helpers.is_valid_range(base_range) && { range: base_range }),
-    }
+    bands_y_axis = bands_default_axis(base_range)
   })
 
   // Propagate synced range to DOS y-axis (untrack current to avoid overwriting child zoom)
@@ -147,13 +157,7 @@
       !helpers.ranges_equal(current_range, base_range)
     ) return
     // Only include range if it's valid (don't override child's auto-range with undefined)
-    dos_y_axis = is_desktop
-      ? {
-        label: ``,
-        ...dos_props.y_axis,
-        ...(helpers.is_valid_range(base_range) && { range: base_range }),
-      }
-      : { ...dos_props.y_axis }
+    dos_y_axis = dos_default_axis(base_range)
   })
 
   let hovered_frequency = $state<number | null>(null)
@@ -174,7 +178,7 @@
     bind:y_axis={bands_y_axis}
     bind:x_positions={bands_x_positions}
     reference_frequency={hovered_frequency}
-    on_point_hover={(event) => {
+    on_point_hover={(event: ScatterHandlerEvent | null) => {
       hovered_band_point = event?.point ?? null
       bands_props.on_point_hover?.(event)
     }}

package/dist/spectral/Dos.svelte

@@ -239,7 +239,7 @@
 
           // For mirror mode, negate the densities
           if (effective_spin_mode === `mirror`) {
-            densities_down = densities_down.map((d) => -d)
+            densities_down = densities_down.map((density) => -density)
           }
 
           // For stacked plots with overlay mode, use separate spin-down cumulative

package/dist/spectral/helpers.d.ts

@@ -1,8 +1,10 @@
-import { type Matrix3x3, type Vec2, type Vec3 } from '../math';
+import type { Matrix3x3, Vec2, Vec3 } from '../math';
+import type { AxisConfig } from '../plot/types';
 import type * as types from './types';
 import type { RibbonConfig } from './types';
 export declare const is_valid_range: (range: unknown) => range is Vec2;
 export declare const ranges_equal: (a: Vec2 | undefined | null, b: Vec2 | undefined | null, tol?: number) => boolean;
+export declare const axis_with_range: (axis: AxisConfig | undefined, range: Vec2 | undefined, label?: string) => AxisConfig;
 export declare function detect_zoom_change(bands_range: unknown, dos_range: unknown, shared_range: Vec2, current_synced: Vec2 | null, dos_enabled?: boolean): Vec2 | null | undefined;
 export declare const IMAGINARY_MODE_NOISE_THRESHOLD = 0.005;
 export declare function pretty_sym_point(symbol: string): string;
@@ -89,7 +91,7 @@ export declare const DEFAULT_SIGMA = 0;
 export declare const DEFAULT_NORMALIZE: types.NormalizationMode;
 export declare const DEFAULT_UNITS: types.FrequencyUnit;
 export declare function format_sigma(val: number): string;
-export declare function validate_sigma_range([min, max]: [number, number]): [number, number];
+export declare const validate_sigma_range: ([min, max]: [number, number]) => [number, number];
 export declare function calculate_sigma_step(range: [number, number]): number;
 export interface BandPointMeta extends Record<string, unknown> {
     band_idx: number;

package/dist/spectral/helpers.js

@@ -1,6 +1,7 @@
 // Helper utilities for band structure and DOS data processing
 import { SUBSCRIPT_MAP } from '../labels';
 import { centered_frac, euclidean_dist } from '../math';
+const is_subscript_key = (key) => key in SUBSCRIPT_MAP;
 // Check if range is a valid [min, max] tuple (strict 2-element array of finite numbers)
 export const is_valid_range = (range) => Array.isArray(range) &&
     range.length === 2 &&
@@ -16,6 +17,11 @@ export const ranges_equal = (a, b, tol = 0.001) => {
         Math.abs(a[0] - b[0]) <= safe_tol &&
         Math.abs(a[1] - b[1]) <= safe_tol);
 };
+export const axis_with_range = (axis, range, label) => ({
+    ...axis,
+    ...(label !== undefined && { label }),
+    ...(is_valid_range(range) && { range }),
+});
 // Detect which plot triggered a zoom change and return the new synced range.
 // Returns null to reset to shared range, undefined for no change, or Vec2 for new zoom.
 export function detect_zoom_change(bands_range, dos_range, shared_range, current_synced, dos_enabled = true) {
@@ -72,7 +78,7 @@ export function pretty_sym_point(symbol) {
         .replace(/(\p{L})(\d+)/gu, (_, letter, num) => letter +
         num
             .split(``)
-            .map((digit) => SUBSCRIPT_MAP[digit] ?? digit)
+            .map((digit) => (is_subscript_key(digit) ? SUBSCRIPT_MAP[digit] : digit))
             .join(``));
 }
 // Create segment key from start and end labels
@@ -81,7 +87,7 @@ export const get_segment_key = (start_label, end_label) => `${start_label ?? `nu
 export const get_ordered_segments = (band_struct, segments) => {
     if (!band_struct)
         return Array.from(segments);
-    const ordered = band_struct.branches.map((br) => get_segment_key(band_struct.qpoints[br.start_index]?.label ?? undefined, band_struct.qpoints[br.end_index]?.label ?? undefined));
+    const ordered = band_struct.branches.map((branch) => get_segment_key(band_struct.qpoints[branch.start_index]?.label ?? undefined, band_struct.qpoints[branch.end_index]?.label ?? undefined));
     const remaining = Array.from(segments).filter((seg) => !ordered.includes(seg));
     return [...ordered, ...remaining];
 };
@@ -105,17 +111,23 @@ export function scale_segment_distances(segment_distances, x_start, x_end) {
 // primitive-typed keys (opacity, max_width, scale, color) exist at the top level.
 export function get_ribbon_config(ribbon_config, label) {
     const defaults = { opacity: 0.3, max_width: 6, scale: 1 };
+    const config_record = ribbon_config;
     // Check for primitive config values (not objects) to distinguish single vs per-structure config
-    const cfg = ribbon_config;
-    const has_primitive = [`opacity`, `max_width`, `scale`, `color`].some((key) => cfg[key] !== undefined && typeof cfg[key] !== `object`);
+    const has_primitive = [`opacity`, `max_width`, `scale`, `color`].some((key) => {
+        const value = config_record[key];
+        return value !== undefined && typeof value !== `object`;
+    });
     if (has_primitive) {
         // Single global config with primitive values - apply to all structures
         return { ...defaults, ...ribbon_config };
     }
     // Otherwise, treat as Record<string, RibbonConfig> and look up by label
     // Empty label skips lookup and uses defaults only
-    const per_struct = ribbon_config;
-    return { ...defaults, ...(label ? per_struct[label] : {}) };
+    const label_config = label ? config_record[label] : undefined;
+    return {
+        ...defaults,
+        ...(label_config && typeof label_config === `object` ? label_config : {}),
+    };
 }
 // Extract tick positions and labels for a band structure plot.
 export function get_band_xaxis_ticks(band_struct, branches = []) {
@@ -132,7 +144,7 @@ export function get_band_xaxis_ticks(band_struct, branches = []) {
         // Find which branch this point belongs to
         const branch_names = band_struct.branches
             .filter((branch) => branch.start_index <= idx && idx <= branch.end_index)
-            .map((b) => b.name);
+            .map((branch) => branch.name);
         const this_branch = branch_names[0] || null;
         if (point.label !== prev_label && prev_branch !== this_branch) {
             // Branch transition - combine labels
@@ -279,10 +291,7 @@ export function clear_smearing_cache() {
 }
 // Type guards for pymatgen qpoint formats
 const is_vec3 = (val) => Array.isArray(val) && val.length >= 3 && val.slice(0, 3).every(Number.isFinite);
-const is_kpoint = (val) => !!val &&
-    typeof val === `object` &&
-    `frac_coords` in val &&
-    is_vec3(val.frac_coords);
+const is_kpoint = (val) => !!val && typeof val === `object` && `frac_coords` in val && is_vec3(val.frac_coords);
 const is_pymatgen_format = (obj) => {
     // Check for explicit pymatgen markers
     if (typeof obj[`@class`] === `string` || typeof obj[`@module`] === `string`) {
@@ -381,17 +390,19 @@ function convert_pymatgen_band_structure(pmg) {
         !raw_bands.length)
         return null;
     const qpoints = raw_qpts
-        .map((q) => parse_qpoint(q, labels_dict))
-        .filter((q) => q !== null);
+        .map((qpoint) => parse_qpoint(qpoint, labels_dict))
+        .filter((qpoint) => qpoint !== null);
     if (!qpoints.length)
         return null;
     // Step distances and discontinuity detection (5x median threshold)
     const steps = qpoints
         .slice(1)
-        .map((q, idx) => euclidean_dist(qpoints[idx].frac_coords, q.frac_coords));
+        .map((qpoint, idx) => euclidean_dist(qpoints[idx].frac_coords, qpoint.frac_coords));
     const sorted = steps.slice().sort((a, b) => a - b);
     const threshold = (sorted[Math.floor(sorted.length / 2)] ?? 0) * 5;
-    const disc_set = new Set(steps.map((s, idx) => (s > threshold ? idx + 1 : -1)).filter((i) => i >= 0));
+    const disc_set = new Set(steps
+        .map((step, idx) => (step > threshold ? idx + 1 : -1))
+        .filter((disc_idx) => disc_idx >= 0));
     // Cumulative distance (skip discontinuities)
     const distance = steps.reduce((acc, step, idx) => [...acc, disc_set.has(idx + 1) ? acc[idx] : acc[idx] + step], [0]);
     // Use pymatgen's branches if available - they correctly handle discontinuities
@@ -400,11 +411,11 @@ function convert_pymatgen_band_structure(pmg) {
     let branches = [];
     if (Array.isArray(pmg_branches) && pmg_branches.length > 0) {
         // Validate and use pymatgen branches directly
-        branches = pmg_branches.filter((br) => typeof br.start_index === `number` &&
-            typeof br.end_index === `number` &&
-            br.start_index >= 0 &&
-            br.end_index < qpoints.length &&
-            br.start_index <= br.end_index);
+        branches = pmg_branches.filter((branch) => typeof branch.start_index === `number` &&
+            typeof branch.end_index === `number` &&
+            branch.start_index >= 0 &&
+            branch.end_index < qpoints.length &&
+            branch.start_index <= branch.end_index);
     }
     // Fallback: infer branches from discontinuities when none provided or all invalid
     if (branches.length === 0) {
@@ -426,7 +437,7 @@ function convert_pymatgen_band_structure(pmg) {
                 name: `${start_label}-${end_label}`,
             };
         })
-            .filter((br) => br.start_index <= br.end_index);
+            .filter((branch) => branch.start_index <= branch.end_index);
     }
     if (!branches.length) {
         branches.push({ start_index: 0, end_index: qpoints.length - 1, name: `path` });
@@ -482,11 +493,11 @@ export function normalize_band_structure(bs) {
     const n_qpts = qpoints.length;
     if (distance.length !== n_qpts ||
         bands.some((band) => !Array.isArray(band) || band.length !== n_qpts) ||
-        branches.some((br) => typeof br.start_index !== `number` ||
-            typeof br.end_index !== `number` ||
-            br.start_index < 0 ||
-            br.end_index >= n_qpts ||
-            br.start_index > br.end_index))
+        branches.some((branch) => typeof branch.start_index !== `number` ||
+            typeof branch.end_index !== `number` ||
+            branch.start_index < 0 ||
+            branch.end_index >= n_qpts ||
+            branch.start_index > branch.end_index))
         return null;
     return band_struct;
 }
@@ -522,7 +533,7 @@ export function normalize_dos(dos, options = {}) {
         let final_frequencies = frequencies;
         if (auto_convert_units && max_freq > 100) {
             // Likely in cm⁻¹, convert to THz
-            final_frequencies = frequencies.map((f) => f * CM_TO_THZ);
+            final_frequencies = frequencies.map((frequency) => frequency * CM_TO_THZ);
             console.warn(`Phonon DOS frequencies appear to be in cm⁻¹ (max: ${max_freq.toFixed(1)}). ` +
                 `Converting to THz (max: ${(max_freq * CM_TO_THZ).toFixed(1)} THz).`);
         }
@@ -912,6 +923,7 @@ function parse_axis_label(label) {
     const match = /^(.+?)\s*\(([^)]+)\)$/.exec(label);
     return match ? { name: match[1], unit: match[2] } : { name: label };
 }
+const format_tooltip_line = (name, value, unit) => `${name}: ${value}${unit ? ` ${unit}` : ``}`;
 // Format DOS tooltip content from axis labels and values
 export function format_dos_tooltip(x_formatted, y_formatted, label, is_horizontal, is_phonon, units, x_axis_label, y_axis_label, num_series) {
     const x_parsed = parse_axis_label(x_axis_label);
@@ -920,15 +932,14 @@ export function format_dos_tooltip(x_formatted, y_formatted, label, is_horizonta
         name: is_phonon ? `Frequency` : `Energy`,
         unit: is_phonon ? units : `eV`,
     };
-    const format_line = (name, value, unit) => `${name}: ${value}${unit ? ` ${unit}` : ``}`;
     const lines = is_horizontal
         ? [
-            format_line(y_parsed.name || freq_defaults.name, y_formatted, y_parsed.unit || freq_defaults.unit),
-            format_line(x_parsed.name || `Density`, x_formatted),
+            format_tooltip_line(y_parsed.name || freq_defaults.name, y_formatted, y_parsed.unit || freq_defaults.unit),
+            format_tooltip_line(x_parsed.name || `Density`, x_formatted),
         ]
         : [
-            format_line(y_parsed.name || `Density`, y_formatted),
-            format_line(x_parsed.name || freq_defaults.name, x_formatted, x_parsed.unit || freq_defaults.unit),
+            format_tooltip_line(y_parsed.name || `Density`, y_formatted),
+            format_tooltip_line(x_parsed.name || freq_defaults.name, x_formatted, x_parsed.unit || freq_defaults.unit),
         ];
     return { title: num_series > 1 && label ? label : undefined, lines };
 }
@@ -962,9 +973,7 @@ export function format_sigma(val) {
     return val.toFixed(val < 1 ? 3 : 2);
 }
 // Validate sigma_range: ensures min < max, returns [0, 1] if invalid
-export function validate_sigma_range([min, max]) {
-    return Number.isFinite(min) && Number.isFinite(max) && min < max ? [min, max] : [0, 1];
-}
+export const validate_sigma_range = ([min, max]) => Number.isFinite(min) && Number.isFinite(max) && min < max ? [min, max] : [0, 1];
 // Calculate slider step: 1/100th of range, or 0.01 fallback
 export function calculate_sigma_step(range) {
     const [min, max] = validate_sigma_range(range);

package/dist/spectral/index.d.ts

@@ -3,4 +3,4 @@ export { default as BandsAndDos } from './BandsAndDos.svelte';
 export { default as BrillouinBandsDos } from './BrillouinBandsDos.svelte';
 export { default as Dos } from './Dos.svelte';
 export * from './helpers';
-export * from './types';
+export type * from './types';

package/dist/spectral/index.js

@@ -4,4 +4,3 @@ export { default as BandsAndDos } from './BandsAndDos.svelte';
 export { default as BrillouinBandsDos } from './BrillouinBandsDos.svelte';
 export { default as Dos } from './Dos.svelte';
 export * from './helpers';
-export * from './types';

package/dist/structure/AtomLegend.svelte

@@ -44,6 +44,7 @@
     title = ``,
     sym_data = null,
     structure = undefined,
+    show_mode_toggle = true,
     children,
     ...rest
   }: Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
@@ -66,6 +67,7 @@
     title?: string
     sym_data?: MoyoDataset | null
     structure?: AnyStructure | null
+    show_mode_toggle?: boolean
     children?: Snippet<[{ mode_menu_open: boolean; structure?: AnyStructure | null }]>
   } = $props()
 
@@ -87,13 +89,14 @@
 
   // Dropdown state
   let mode_menu_open = $state(false)
+  let mode_toggle_visible = $derived(show_mode_toggle || mode_menu_open)
 
   // Clear hidden property values when switching modes (since they may not be valid)
-  let previous_mode = $state(atom_color_config.mode)
+  let prev_mode = $state(atom_color_config.mode)
   $effect(() => {
-    if (atom_color_config.mode !== previous_mode) {
+    if (atom_color_config.mode !== prev_mode) {
       hidden_prop_vals.clear()
-      previous_mode = atom_color_config.mode
+      prev_mode = atom_color_config.mode
     }
   })
 
@@ -111,7 +114,9 @@
     if (typeof val === `string` && val.includes(`|`)) { // Format Wyckoff orbit IDs
       const [wyckoff, element] = val.split(`|`, 2)
       // Count how many sites have this wyckoff+element combination
-      const count = property_colors?.values.filter((v) => v === val).length ?? 0
+      const count = property_colors?.values.filter((property_value) =>
+        property_value === val
+      ).length ?? 0
       return `${element}:${count}${wyckoff}`
     }
     return String(val)
@@ -237,9 +242,12 @@
   >
     <button
       class="mode-toggle"
+      class:visible={mode_toggle_visible}
       onclick={() => (mode_menu_open = !mode_menu_open)}
       title="Change atom coloring mode"
       aria-expanded={mode_menu_open}
+      aria-hidden={mode_toggle_visible ? undefined : true}
+      tabindex={mode_toggle_visible ? undefined : -1}
       {@attach tooltip()}
     >
       <Icon icon={mode_menu_open ? `Collapse` : `Expand`} />
@@ -715,6 +723,7 @@
     position: relative;
     display: flex;
     align-items: center;
+    margin-left: calc(-0.5 * var(--struct-legend-gap, clamp(3pt, 2cqmin, 7pt)));
   }
   .mode-toggle {
     background: transparent;
@@ -724,10 +733,18 @@
     display: flex;
     align-items: center;
     font-size: 0.9em;
-    opacity: 0.7;
+    opacity: 0;
+    pointer-events: none;
     transition: opacity 0.2s ease;
   }
-  .mode-toggle:hover {
+  .mode-toggle :global(svg) {
+    font-size: 1.15em;
+  }
+  .mode-toggle.visible {
+    opacity: 0.7;
+    pointer-events: auto;
+  }
+  .mode-toggle.visible:hover {
     opacity: 1;
   }
   .mode-dropdown {

package/dist/structure/AtomLegend.svelte.d.ts

@@ -24,6 +24,7 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
     title?: string;
     sym_data?: MoyoDataset | null;
     structure?: AnyStructure | null;
+    show_mode_toggle?: boolean;
     children?: Snippet<[{
         mode_menu_open: boolean;
         structure?: AnyStructure | null;

package/dist/structure/CanvasTooltip.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import { HTML } from '@threlte/extras'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
   import type { Vec3 } from '../math'
-    import { HTML } from '@threlte/extras'
-    import type { Snippet } from 'svelte'
-    import type { HTMLAttributes } from 'svelte/elements'
 
-    let { position, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
-      position: Vec3
-      children: Snippet<[{ position: Vec3 }]>
-    } = $props()
+  let { position, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    position: Vec3
+    children: Snippet<[{ position: Vec3 }]>
+  } = $props()
 </script>
 
 <HTML {position} pointerEvents="none">
@@ -22,9 +22,9 @@
     box-sizing: border-box;
     text-align: var(--canvas-tooltip-text-align, left);
     border-radius: var(--canvas-tooltip-border-radius, var(--border-radius, 3pt));
-    background: var(--canvas-tooltip-bg, var(--code-bg));
+    background: var(--canvas-tooltip-bg, light-dark(rgba(226, 232, 240, 0.96), rgba(15, 23, 42, 0.96)));
     padding: var(--canvas-tooltip-padding, 1pt 5pt);
-    color: var(--canvas-tooltip-text-color);
+    color: var(--canvas-tooltip-text-color, light-dark(#0f172a, #f8fafc));
     font-family: var(--canvas-tooltip-font-family);
     font-size: var(--canvas-tooltip-font-size, clamp(8pt, 3cqmin, 18pt));
     line-height: var(--canvas-tooltip-line-height);

package/dist/structure/CanvasTooltip.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Vec3 } from '../math';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { Vec3 } from '../math';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     position: Vec3;
     children: Snippet<[{

package/dist/structure/CellSelect.svelte

@@ -118,7 +118,6 @@
       class:align-left={align === `left`}
       transition:fade={{ duration: 100 }}
     >
-      <!-- Cell type selector -->
       <div class="cell-type-row">
         {#each cell_types as type (type)}
           {@const disabled = type !== `original` && !sym_data}
@@ -140,7 +139,6 @@
         {/each}
       </div>
 
-      <!-- Supercell presets -->
       <div class="supercell-grid">
         {#each supercell_presets as preset (preset)}
           <button
@@ -153,7 +151,6 @@
         {/each}
       </div>
 
-      <!-- Custom input -->
       <div class="custom-input-row">
         <input
           type="text"
@@ -188,10 +185,11 @@
     );
   }
   .toggle-btn {
+    font: inherit;
     padding: var(--struct-legend-padding, 0 4pt);
     line-height: var(--struct-legend-line-height, 1.3);
     vertical-align: middle;
-    color: var(--text-color);
+    color: inherit;
     background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);
@@ -211,15 +209,22 @@
     right: 0;
     margin-top: 2px;
     background: var(--surface-bg, light-dark(rgba(255, 255, 255, 0.96), #222));
-    padding: 6px;
+    padding: 4px;
     border-radius: var(--struct-border-radius, var(--border-radius, 3pt));
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
     gap: 5px;
     z-index: 100;
+    font-size: var(--struct-cell-select-dropdown-font, max(10px, 1em));
     min-width: 118px;
   }
+  .dropdown button,
+  .custom-input-row input {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+  }
   /* Invisible bridge to prevent menu closing when moving mouse from toggle to dropdown */
   .dropdown::before {
     content: '';
@@ -244,7 +249,6 @@
     left: 0;
   }
 
-  /* Cell type row - compact buttons with minimal padding */
   .cell-type-row {
     display: flex;
     gap: 3px;
@@ -253,9 +257,7 @@
   }
   .cell-type-btn {
     flex: 1;
-    padding: 2px 6px;
-    font-size: 0.9em;
-    color: var(--text-color);
+    padding: 1px 3px;
     background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);
@@ -288,16 +290,14 @@
     cursor: not-allowed;
   }
 
-  /* Supercell grid */
   .supercell-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 2px;
+    gap: 3px;
   }
   .preset-btn {
-    padding: 2px 4px;
-    font-size: 0.9em;
-    color: var(--text-color);
+    padding: 0 1px;
+    line-height: 1;
     background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius, 3pt);
@@ -324,7 +324,6 @@
     );
   }
 
-  /* Custom input row */
   .custom-input-row {
     display: flex;
     align-items: center;
@@ -334,7 +333,6 @@
     max-width: 60px;
     min-height: 0;
     padding: 1px 4px;
-    font-size: 0.85em;
   }
   .custom-input-row input.invalid {
     border-color: rgba(255, 100, 100, 0.6);