matterviz 0.4.1 → 0.4.2

package/dist/EmptyState.svelte

@@ -2,7 +2,11 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { message, children, ...rest }: {
+  let {
+    message,
+    children,
+    ...rest
+  }: {
     // Simple text message to display. Ignored if children snippet is provided.
     message?: string
     // Custom content to render. Takes precedence over message prop.
@@ -10,7 +14,7 @@
   } & HTMLAttributes<HTMLDivElement> = $props()
 </script>
 
-<div {...rest} class="empty-state {rest.class ?? ``}">
+<div {...rest} class={[`empty-state`, rest.class]}>
   {#if children}
     {@render children()}
   {:else if message}
@@ -34,10 +38,12 @@
   .empty-state :global(.status-message) {
     --status-message-border: none; /* Remove inner border from StatusMessage */
   }
-  .empty-state > :global(:is(p, h3, ul, strong)), .empty-state > .message {
+  .empty-state > :global(:is(p, h3, ul, strong)),
+  .empty-state > .message {
     max-width: var(--empty-state-max-width, 500px);
   }
-  .empty-state :global(p), .empty-state > .message {
+  .empty-state :global(p),
+  .empty-state > .message {
     color: var(--text-color-muted);
     margin: 0;
   }

package/dist/FilePicker.svelte

@@ -137,9 +137,9 @@
         class:active={is_active}
         onclick={() => category && toggle_filter(`category`, category)}
         onkeydown={(evt) =>
-        (evt.key === `Enter` || evt.key === ` `) &&
-        category &&
-        toggle_filter(`category`, category)}
+          (evt.key === `Enter` || evt.key === ` `) &&
+          category &&
+          toggle_filter(`category`, category)}
         role="button"
         tabindex="0"
         aria-pressed={is_active}
@@ -148,8 +148,7 @@
         {category}
       </span>
     {/each}
-    {#if show_category_filters && uniq_categories.length > 0 &&
-        uniq_formats.length > 0}
+    {#if show_category_filters && uniq_categories.length > 0 && uniq_formats.length > 0}
       <span class="divider"></span>
     {/if}
 
@@ -160,15 +159,13 @@
         class:active={is_active}
         onclick={() => toggle_filter(`type`, format)}
         onkeydown={(evt) =>
-        (evt.key === `Enter` || evt.key === ` `) && toggle_filter(`type`, format)}
+          (evt.key === `Enter` || evt.key === ` `) && toggle_filter(`type`, format)}
         role="button"
         tabindex="0"
         {@attach tooltip({ content: `Filter to show only ${format.toUpperCase()} files` })}
       >
-        <span
-          class="format-circle"
-          style:background-color={file_type_colors[format]}
-        ></span> {format.toUpperCase()}
+        <span class="format-circle" style:background-color={file_type_colors[format]}></span>
+        {format.toUpperCase()}
       </span>
     {/each}
 
@@ -176,7 +173,7 @@
       <button
         {@attach tooltip({ content: `Clear all filters` })}
         class="clear-filter"
-        onclick={() => [active_category_filter, active_type_filter] = [null, null]}
+        onclick={() => ([active_category_filter, active_type_filter] = [null, null])}
       >
         ✕
       </button>
@@ -222,14 +219,15 @@
       role="button"
       tabindex="0"
       title={on_click
-      ? `Click to load or drag this ${base_type.toUpperCase()} file`
-      : `Drag this ${base_type.toUpperCase()} file`}
+        ? `Click to load or drag this ${base_type.toUpperCase()} file`
+        : `Drag this ${base_type.toUpperCase()} file`}
     >
       {#if file.label}
         <span
           class="file-type-badge"
           style:background-color={file_type_colors[base_type] ?? `rgba(128,128,128,0.8)`}
-        >{base_type.toUpperCase()}</span>
+          >{base_type.toUpperCase()}</span
+        >
       {/if}
       <div class="file-name">
         {file.category ? `${file.category_icon} ` : ``}{file.label ?? file.name}

package/dist/Icon.svelte

@@ -3,10 +3,13 @@
   import { ICON_DATA, type IconName } from './icons'
 
   type IconData = { path: string; viewBox: string; stroke?: string }
-  let { icon, path, viewBox = `0 0 24 24`, stroke, ...rest }:
-    & { icon?: IconName }
-    & Partial<IconData>
-    & SVGAttributes<SVGSVGElement> = $props()
+  let {
+    icon,
+    path,
+    viewBox = `0 0 24 24`,
+    stroke,
+    ...rest
+  }: { icon?: IconName } & Partial<IconData> & SVGAttributes<SVGSVGElement> = $props()
 
   const data: IconData = $derived.by(() => {
     if (path) return { path, viewBox, stroke }

package/dist/MillerIndexInput.svelte

@@ -20,7 +20,7 @@
     }
     // Fall back to compact single-digit format: "001", "-101"
     const compact = input.replaceAll(/\s+/g, ``)
-    const match = compact.match(/^(-?\d)(-?\d)(-?\d)$/)
+    const match = compact.match(/^(?<h>-?\d)(?<k>-?\d)(?<l>-?\d)$/)
     if (match) return [Number(match[1]), Number(match[2]), Number(match[3])] as Vec3
     return null
   }
@@ -53,7 +53,7 @@
       font-size: 0.85em;
     }
     input {
-      width: 4em;
+      width: 5.5em;
       padding: 0.15em 0.3em;
       border: 1px solid var(--border-color, #ccc);
       border-radius: 4px;

package/dist/app.css

@@ -18,6 +18,13 @@
   --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
   --border-radius: 3pt;
 
+  /* Single source of truth for viewer control-button icon size, shared by all viewer chromes
+     (Structure/Brillouin/Fermi/ConvexHull/Trajectory). Scales with the container but is capped so
+     toolbar icons don't grow oversized in fullscreen. Uses rem (not em) so the size is consistent
+     across viewers regardless of their local font-size (e.g. Trajectory's controls run at 0.85em).
+     Override per viewer by setting this on its wrapper. */
+  --ctrl-btn-icon-size: clamp(0.7rem, 2cqmin, 0.85rem);
+
   /* App-wide overlay stack: controls < fullscreen/nav < dialogs < floating options.
      These must exceed Threlte HTML overlays, which use very high z-index values. */
   --z-index-overlay-controls: 100000000;
@@ -204,6 +211,52 @@
   input:is([type='checkbox'], [type='radio'], [type='range'], [type='color']) {
     border: none;
   }
+  input[type='range'] {
+    --range-track-bg: var(--range-track-bg-override, var(--surface-bg, #2a2f3a));
+    --range-track-border: var(--range-track-border-override, var(--border-color, #404040));
+    --range-thumb-bg: var(--range-thumb-bg-override, var(--accent-color, #4a9eff));
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    accent-color: var(--range-thumb-bg);
+    cursor: pointer;
+  }
+  input[type='range']::-webkit-slider-runnable-track {
+    height: var(--range-track-height, 0.45rem);
+    border-radius: 999px;
+    background: var(--range-track-bg);
+    box-shadow: inset 0 0 0 1px var(--range-track-border);
+  }
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    inline-size: var(--range-thumb-size, 0.9rem);
+    block-size: var(--range-thumb-size, 0.9rem);
+    margin-top: calc(
+      (var(--range-track-height, 0.45rem) - var(--range-thumb-size, 0.9rem)) / 2
+    );
+    border-radius: 50%;
+    background: var(--range-thumb-bg);
+    box-shadow: 0 0 0 2px var(--surface-bg, #1f242d);
+  }
+  input[type='range']::-moz-range-track {
+    height: var(--range-track-height, 0.45rem);
+    border-radius: 999px;
+    background: var(--range-track-bg);
+    box-shadow: inset 0 0 0 1px var(--range-track-border);
+  }
+  input[type='range']::-moz-range-progress {
+    height: var(--range-track-height, 0.45rem);
+    border-radius: 999px;
+    background: var(--range-thumb-bg);
+  }
+  input[type='range']::-moz-range-thumb {
+    inline-size: var(--range-thumb-size, 0.9rem);
+    block-size: var(--range-thumb-size, 0.9rem);
+    border: 0;
+    border-radius: 50%;
+    background: var(--range-thumb-bg);
+    box-shadow: 0 0 0 2px var(--surface-bg, #1f242d);
+  }
   input[type='number'] {
     min-width: 40px;
     width: auto;

package/dist/brillouin/BrillouinZone.svelte

@@ -53,7 +53,7 @@
     surface_color = $bindable(`#4488ff`),
     surface_opacity = $bindable(0.3),
     edge_color = $bindable(`#000000`),
-    edge_width = $bindable(0.05),
+    edge_width = $bindable(0.002),
     show_vectors = $bindable(true),
     vector_scale = $bindable(1.0),
     camera_projection = $bindable(`perspective`),
@@ -91,72 +91,68 @@
     on_point_hover,
     on_hover,
     ...rest
-  }:
-    & {
-      structure?: Crystal
-      bz_order?: number
-      bz_data?: BrillouinZoneData
-      controls_open?: boolean
-      info_pane_open?: boolean
-      surface_color?: string
-      surface_opacity?: number
-      edge_color?: string
-      edge_width?: number
-      show_vectors?: boolean
-      vector_scale?: number
-      camera_projection?: CameraProjection
-      // Irreducible BZ options
-      show_ibz?: boolean
-      ibz_color?: string
-      ibz_opacity?: number
-      ibz_data?: IrreducibleBZData | null
-      // Controls visibility configuration.
-      // - 'always': controls always visible
-      // - 'hover': controls visible on component hover (default)
-      // - 'never': controls never visible
-      // - object: { mode, hidden, style } for fine-grained control
-      //
-      // Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
-      show_controls?: ShowControlsProp
-      fullscreen?: boolean
-      width?: number
-      height?: number
-      wrapper?: HTMLDivElement
-      png_dpi?: number
-      hovered?: boolean
-      dragover?: boolean
-      allow_file_drop?: boolean
-      fullscreen_toggle?: FullscreenToggleProp
-      data_url?: string
-      on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
-      spinner_props?: ComponentProps<typeof Spinner>
-      loading?: boolean
-      error_msg?: string
-      structure_string?: string
-      // K-path points in Cartesian reciprocal space coordinates (not fractional coords)
-      // Should be computed using the reciprocal lattice matrix (includes 2π factor)
-      k_path_points?: Vec3[]
-      // K-path labels with positions in Cartesian reciprocal space coordinates
-      // Each position should match a corresponding point in k_path_points
-      k_path_labels?: { position: Vec3; label: string | null }[]
-      // Currently hovered k-point in Cartesian reciprocal space coordinates
-      hovered_k_point?: Vec3 | null
-      // Index of the currently hovered q-point in the band structure
-      hovered_qpoint_index?: number | null
-      // Called with the q-point index when the user hovers the k-path in the BZ (null on leave)
-      on_kpath_hover?: (qpoint_index: number | null) => void
-      children?: Snippet<
-        [{ structure?: Crystal; bz_data?: BrillouinZoneData }]
-      >
-      tooltip_config?: BZTooltipProp
-      on_file_load?: (data: BZHandlerData) => void
-      on_error?: (data: BZHandlerData) => void
-      on_fullscreen_change?: (data: BZHandlerData) => void
-      on_point_hover?: (data: BZHoverData | null) => void
-      // Deprecated alias for on_point_hover (honored when on_point_hover is unset)
-      on_hover?: (data: BZHoverData | null) => void
-    }
-    & HTMLAttributes<HTMLDivElement> = $props()
+  }: {
+    structure?: Crystal
+    bz_order?: number
+    bz_data?: BrillouinZoneData
+    controls_open?: boolean
+    info_pane_open?: boolean
+    surface_color?: string
+    surface_opacity?: number
+    edge_color?: string
+    edge_width?: number
+    show_vectors?: boolean
+    vector_scale?: number
+    camera_projection?: CameraProjection
+    // Irreducible BZ options
+    show_ibz?: boolean
+    ibz_color?: string
+    ibz_opacity?: number
+    ibz_data?: IrreducibleBZData | null
+    // Controls visibility configuration.
+    // - 'always': controls always visible
+    // - 'hover': controls visible on component hover (default)
+    // - 'never': controls never visible
+    // - object: { mode, hidden, style } for fine-grained control
+    //
+    // Control names: 'filename', 'fullscreen', 'info-pane', 'export-pane', 'controls'
+    show_controls?: ShowControlsProp
+    fullscreen?: boolean
+    width?: number
+    height?: number
+    wrapper?: HTMLDivElement
+    png_dpi?: number
+    hovered?: boolean
+    dragover?: boolean
+    allow_file_drop?: boolean
+    fullscreen_toggle?: FullscreenToggleProp
+    data_url?: string
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
+    spinner_props?: ComponentProps<typeof Spinner>
+    loading?: boolean
+    error_msg?: string
+    structure_string?: string
+    // K-path points in Cartesian reciprocal space coordinates (not fractional coords)
+    // Should be computed using the reciprocal lattice matrix (includes 2π factor)
+    k_path_points?: Vec3[]
+    // K-path labels with positions in Cartesian reciprocal space coordinates
+    // Each position should match a corresponding point in k_path_points
+    k_path_labels?: { position: Vec3; label: string | null }[]
+    // Currently hovered k-point in Cartesian reciprocal space coordinates
+    hovered_k_point?: Vec3 | null
+    // Index of the currently hovered q-point in the band structure
+    hovered_qpoint_index?: number | null
+    // Called with the q-point index when the user hovers the k-path in the BZ (null on leave)
+    on_kpath_hover?: (qpoint_index: number | null) => void
+    children?: Snippet<[{ structure?: Crystal; bz_data?: BrillouinZoneData }]>
+    tooltip_config?: BZTooltipProp
+    on_file_load?: (data: BZHandlerData) => void
+    on_error?: (data: BZHandlerData) => void
+    on_fullscreen_change?: (data: BZHandlerData) => void
+    on_point_hover?: (data: BZHoverData | null) => void
+    // Deprecated alias for on_point_hover (honored when on_point_hover is unset)
+    on_hover?: (data: BZHoverData | null) => void
+  } & HTMLAttributes<HTMLDivElement> = $props()
 
   let scene = $state(undefined)
   let camera = $state(undefined)
@@ -181,9 +177,7 @@
 
   // Parse and load structure from content
   function parse_structure(content: string | ArrayBuffer, filename: string) {
-    const text = content instanceof ArrayBuffer
-      ? new TextDecoder().decode(content)
-      : content
+    const text = content instanceof ArrayBuffer ? new TextDecoder().decode(content) : content
     const parsed = parse_any_structure(text, filename)
     if (!parsed) throw new Error(`Failed to parse structure from ${filename}`)
 
@@ -198,9 +192,7 @@
     try {
       parse_structure(content, filename)
     } catch (err) {
-      error_msg = `Failed to parse ${filename}: ${
-        to_error(err).message
-      }`
+      error_msg = `Failed to parse ${filename}: ${to_error(err).message}`
       on_error?.({ error_msg, filename })
     }
   }
@@ -241,9 +233,7 @@
     analyze_structure_symmetry(structure, {})
       .then((sym_data) => {
         if (stale) return
-        const point_group_ops = extract_point_group_from_operations(
-          sym_data.operations,
-        )
+        const point_group_ops = extract_point_group_from_operations(sym_data.operations)
         ibz_data = compute_irreducible_bz(captured_bz, point_group_ops)
       })
       .catch((err) => {
@@ -267,12 +257,8 @@
     if (data_url && !structure) {
       loading = true
       error_msg = undefined
-      load_from_url(
-        data_url,
-        (content, filename) =>
-          on_file_drop
-            ? on_file_drop(content, filename)
-            : safe_parse(content, filename),
+      load_from_url(data_url, (content, filename) =>
+        on_file_drop ? on_file_drop(content, filename) : safe_parse(content, filename),
       )
         .catch((err) => handle_error(err, data_url))
         .finally(() => (loading = false))
@@ -307,7 +293,8 @@
     if (
       target instanceof HTMLElement &&
       (target.tagName === `INPUT` || target.tagName === `TEXTAREA`)
-    ) return
+    )
+      return
 
     if (event.key === `f` && fullscreen_toggle) toggle_fullscreen(wrapper)
     else if (event.key === `i`) info_pane_open = !info_pane_open
@@ -338,10 +325,13 @@
   onmouseenter={() => (hovered = true)}
   onmouseleave={() => (hovered = false)}
   ondrop={handle_file_drop}
-  {...drag_over_handlers({ allow: () => allow_file_drop, set_dragover: (over) => dragover = over })}
+  {...drag_over_handlers({
+    allow: () => allow_file_drop,
+    set_dragover: (over) => (dragover = over),
+  })}
   {onkeydown}
   {...rest}
-  class="brillouin-zone {rest.class ?? ``}"
+  class={[`brillouin-zone`, rest.class]}
 >
   {@render children?.({ structure, bz_data })}
   {#if loading}

package/dist/brillouin/BrillouinZone.svelte.d.ts

@@ -57,12 +57,10 @@ type $$ComponentProps = {
     hovered_k_point?: Vec3 | null;
     hovered_qpoint_index?: number | null;
     on_kpath_hover?: (qpoint_index: number | null) => void;
-    children?: Snippet<[
-        {
-            structure?: Crystal;
-            bz_data?: BrillouinZoneData;
-        }
-    ]>;
+    children?: Snippet<[{
+        structure?: Crystal;
+        bz_data?: BrillouinZoneData;
+    }]>;
     tooltip_config?: BZTooltipProp;
     on_file_load?: (data: BZHandlerData) => void;
     on_error?: (data: BZHandlerData) => void;
@@ -70,6 +68,6 @@ type $$ComponentProps = {
     on_point_hover?: (data: BZHoverData | null) => void;
     on_hover?: (data: BZHoverData | null) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "loading" | "camera_projection" | "vector_scale" | "png_dpi" | "info_pane_open" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "structure" | "camera_projection" | "vector_scale" | "loading" | "png_dpi" | "info_pane_open" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "ibz_data">;
 type BrillouinZone = ReturnType<typeof BrillouinZone>;
 export default BrillouinZone;

package/dist/brillouin/BrillouinZoneControls.svelte

@@ -9,7 +9,7 @@
     surface_color = $bindable(`#4488ff`),
     surface_opacity = $bindable(0.3),
     edge_color = $bindable(`#000000`),
-    edge_width = $bindable(0.05),
+    edge_width = $bindable(0.002),
     show_vectors = $bindable(true),
     camera_projection = $bindable(`perspective`),
     // Irreducible BZ options
@@ -84,10 +84,7 @@
   <SettingsSection
     title="Edges"
     current_values={{ edge_color, edge_width }}
-    on_reset={() => {
-      edge_color = `#000000`
-      edge_width = 0.05
-    }}
+    on_reset={() => ([edge_color, edge_width] = [`#000000`, 0.002])}
   >
     <label>
       <span>Color:</span>
@@ -95,7 +92,7 @@
     </label>
     <label>
       <span>Width:</span>
-      <input type="range" min="0.01" max="0.2" step="0.01" bind:value={edge_width} />
+      <input type="range" min="0.002" max="0.02" step="0.001" bind:value={edge_width} />
       <span class="value">{edge_width.toFixed(2)}</span>
     </label>
   </SettingsSection>

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -58,25 +58,29 @@
   const sections = $derived<ExportSection[]>([
     {
       title: `Export as image`,
-      items: [{
-        label: `PNG`,
-        disabled: !scene || !camera,
-        show_dpi: true,
-        on_download: export_as_png,
-      }],
+      items: [
+        {
+          label: `PNG`,
+          disabled: !scene || !camera,
+          show_dpi: true,
+          on_download: export_as_png,
+        },
+      ],
     },
     {
       title: `Export as data`,
       tooltip: `Includes vertices, faces, edges, and reciprocal lattice vectors`,
-      items: [{
-        label: `JSON`,
-        disabled: !bz_data,
-        on_download: export_as_json,
-        copy_text: () => {
-          const json_data = get_json_data()
-          return json_data ? JSON.stringify(json_data, null, 2) : null
+      items: [
+        {
+          label: `JSON`,
+          disabled: !bz_data,
+          on_download: export_as_json,
+          copy_text: () => {
+            const json_data = get_json_data()
+            return json_data ? JSON.stringify(json_data, null, 2) : null
+          },
         },
-      }],
+      ],
     },
   ])
 </script>

package/dist/brillouin/BrillouinZoneInfoPane.svelte

@@ -73,20 +73,16 @@
       items: [
         {
           label: `a, b, c`,
-          value: `${
-            [structure.lattice.a, structure.lattice.b, structure.lattice.c]
-              .map((val) => format_num(val, `.3~f`))
-              .join(`, `)
-          } Å`,
+          value: `${[structure.lattice.a, structure.lattice.b, structure.lattice.c]
+            .map((val) => format_num(val, `.3~f`))
+            .join(`, `)} Å`,
           key: `real-lattice-abc`,
         },
         {
           label: `α, β, γ`,
-          value: `${
-            [structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
-              .map((val) => format_num(val, `.2~f`))
-              .join(`, `)
-          }°`,
+          value: `${[structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
+            .map((val) => format_num(val, `.2~f`))
+            .join(`, `)}°`,
           key: `real-lattice-angles`,
         },
       ],