matterviz 0.4.0 → 0.4.2

package/dist/feedback/DragOverlay.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
   import Icon from '../Icon.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
 
   let {
     visible = false,
-    message = `Drop JSON file to load phase diagram data`,
+    message = `Drop file to load`,
+    ...rest
   }: {
     visible?: boolean
     message?: string
-  } = $props()
+  } & HTMLAttributes<HTMLDivElement> = $props()
 </script>
 
 {#if visible}
-  <div class="drag-overlay">
+  <div {...rest} class={[`drag-overlay`, rest.class]}>
     <div class="drag-message">
       <Icon icon="Info" />
       <span>{message}</span>

package/dist/feedback/DragOverlay.svelte.d.ts

@@ -1,7 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     visible?: boolean;
     message?: string;
-};
+} & HTMLAttributes<HTMLDivElement>;
 declare const DragOverlay: import("svelte").Component<$$ComponentProps, {}, "">;
 type DragOverlay = ReturnType<typeof DragOverlay>;
 export default DragOverlay;

package/dist/feedback/StatusMessage.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { message = $bindable(), type = `info`, dismissible = false, ...rest }: {
+  let {
+    message = $bindable(),
+    type = `info`,
+    dismissible = false,
+    ...rest
+  }: {
     message?: string
     type?: `info` | `error` | `warning`
     dismissible?: boolean
@@ -17,16 +22,18 @@
   >
     {message}
     {#if dismissible}
-      <button onclick={() => (message = undefined)} aria-label="Dismiss message">
-        ✕
-      </button>
+      <button onclick={() => (message = undefined)} aria-label="Dismiss message"> ✕ </button>
     {/if}
   </div>
 {/if}
 
 <style>
   .status-message {
+    display: flex;
+    align-items: center;
+    gap: 1em;
     border-radius: var(--border-radius, 3pt);
+    backdrop-filter: blur(8px);
     &.info {
       border: 2px dashed var(--text-color-muted, #ccc);
       background: transparent;
@@ -47,11 +54,17 @@
     }
   }
   button {
-    margin-left: 1em;
-    padding: 0.2em 0.5em;
+    flex: none;
+    display: grid;
+    place-items: center;
+    margin-left: auto;
+    box-sizing: border-box;
+    width: 1.6em;
+    height: 1.6em;
+    padding: 0;
     background: var(--btn-bg, #ddd);
     border: 1px solid var(--border-color, #bbb);
-    border-radius: var(--border-radius, 3pt);
+    border-radius: 50%;
     cursor: pointer;
     &:hover {
       background: var(--btn-bg-hover, #ccc);

package/dist/fermi-surface/FermiSlice.svelte

@@ -86,7 +86,10 @@
     const isolines = slice_data?.isolines
     if (!isolines?.length) return { min: [-1, -1], max: [1, 1] }
 
-    let xmin = Infinity, xmax = -Infinity, ymin = Infinity, ymax = -Infinity
+    let xmin = Infinity,
+      xmax = -Infinity,
+      ymin = Infinity,
+      ymax = -Infinity
     for (const iso of isolines) {
       for (const pt of iso.points_2d) {
         if (pt[0] < xmin) xmin = pt[0]
@@ -97,13 +100,14 @@
     }
     if (!isFinite(xmin)) return { min: [-1, -1], max: [1, 1] }
 
-    const pad = 0.1, rx = xmax - xmin || 1, ry = ymax - ymin || 1
+    const pad = 0.1,
+      rx = xmax - xmin || 1,
+      ry = ymax - ymin || 1
     return {
       min: [xmin - rx * pad, ymin - ry * pad],
       max: [xmax + rx * pad, ymax + ry * pad],
     }
   })
-
   function toggle_band(series_idx: number) {
     const band = slice_data?.isolines[series_idx]?.band_index
     if (band === undefined) return
@@ -114,9 +118,7 @@
   function isolate_band(series_idx: number) {
     const band = slice_data?.isolines[series_idx]?.band_index
     if (band === undefined) return
-    const all_bands = [
-      ...new Set(slice_data?.isolines.map((iso) => iso.band_index)),
-    ]
+    const all_bands = [...new Set(slice_data?.isolines.map((iso) => iso.band_index))]
     const is_solo = all_bands.every((bid) => bid === band || hidden_bands.has(bid))
     hidden_bands.clear()
     if (!is_solo) {
@@ -127,8 +129,7 @@
   }
 
   // Returns null if SVG not found, making export failures explicit
-  const export_svg = (): string | null =>
-    wrapper?.querySelector(`svg`)?.outerHTML ?? null
+  const export_svg = (): string | null => wrapper?.querySelector(`svg`)?.outerHTML ?? null
 </script>
 
 <ScatterPlot
@@ -143,16 +144,16 @@
   controls={{ show: false }}
   fullscreen_toggle={false}
   legend={show_legend && series.length > 0
-  ? {
-    on_toggle: toggle_band,
-    on_double_click: isolate_band,
-    draggable: false,
-    // pin bottom-right so it clears the top-left title/controls overlay (e.g. in the demo)
-    style: `left: auto; top: auto; right: 8px; bottom: 8px`,
-  }
-  : null}
+    ? {
+        on_toggle: toggle_band,
+        on_double_click: isolate_band,
+        draggable: false,
+        // pin bottom-right so it clears the top-left title/controls overlay (e.g. in the demo)
+        style: `left: auto; top: auto; right: 8px; bottom: 8px`,
+      }
+    : null}
   padding={{ t: 5, b: 5, l: 5, r: 5 }}
-  class="fermi-slice {rest.class ?? ``}"
+  class={[`fermi-slice`, rest.class]}
   style={rest.style}
 >
   {#snippet user_content({ x_scale_fn, y_scale_fn, pad, width, height })}
@@ -192,6 +193,8 @@
   }
   .fermi-label {
     fill: var(--fermi-surface-axis-color, #888);
-    font: 12px system-ui, sans-serif;
+    font:
+      12px system-ui,
+      sans-serif;
   }
 </style>

package/dist/fermi-surface/FermiSurface.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import type { BrillouinZoneData } from '../brillouin'
   import { compute_brillouin_zone, reciprocal_lattice } from '../brillouin'
-  import type { ShowControlsProp } from '../controls'
-  import { normalize_show_controls } from '../controls'
+  import { normalize_show_controls, type ShowControlsProp } from '../controls'
   import EmptyState from '../EmptyState.svelte'
   import { StatusMessage } from '../feedback'
   import Spinner from '../feedback/Spinner.svelte'
-  import Icon from '../Icon.svelte'
-  import { create_file_drop_handler, load_from_url } from '../io'
-  import { set_fullscreen_bg, toggle_fullscreen } from '../layout'
+  import { create_file_drop_handler, drag_over_handlers, load_from_url } from '../io'
+  import { type FullscreenToggleProp, toggle_fullscreen, ViewerChrome } from '../layout'
+  import { sync_fullscreen } from '../layout/fullscreen.svelte'
   import { PlotTooltip } from '../plot'
   import type { CameraProjection } from '../settings'
   import { DEFAULTS } from '../settings'
@@ -16,7 +15,6 @@
   import { Canvas } from '@threlte/core'
   import type { ComponentProps, Snippet } from 'svelte'
   import { untrack } from 'svelte'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { Camera, Scene } from 'three'
   import { detect_irreducible_bz, extract_fermi_surface } from './compute'
@@ -91,6 +89,7 @@
     on_error,
     on_fullscreen_change,
     on_mu_change,
+    on_point_hover,
     on_hover,
     ...rest
   }: {
@@ -117,15 +116,13 @@
     clip_flip?: boolean
     interpolation_factor?: number
     camera_projection?: CameraProjection
-    /**
-     * 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', 'controls'
-     */
+    // 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', 'controls'
     show_controls?: ShowControlsProp
     fullscreen?: boolean
     width?: number
@@ -134,20 +131,20 @@
     hovered?: boolean
     dragover?: boolean
     allow_file_drop?: boolean
-    fullscreen_toggle?: Snippet<[{ fullscreen: boolean }]> | boolean
+    fullscreen_toggle?: FullscreenToggleProp
     data_url?: string
     spinner_props?: ComponentProps<typeof Spinner>
     loading?: boolean
     error_msg?: string
-    children?: Snippet<
-      [{ fermi_data?: FermiSurfaceData; bz_data?: BrillouinZoneData }]
-    >
+    children?: Snippet<[{ fermi_data?: FermiSurfaceData; bz_data?: BrillouinZoneData }]>
     on_file_drop?: (filename: string) => void
     on_file_load?: (data: FermiFileLoadData) => void
     on_error?: (data: FermiErrorData) => void
     on_fullscreen_change?: (data: FermiHandlerData) => void
     on_mu_change?: (mu: number) => void
     tooltip_config?: Snippet<[{ hover_data: FermiHoverData }]> | FermiTooltipConfig
+    on_point_hover?: (data: FermiHoverData | null) => void
+    // Deprecated alias for on_point_hover (honored when on_point_hover is unset)
     on_hover?: (data: FermiHoverData | null) => void
   } & HTMLAttributes<HTMLDivElement> = $props()
 
@@ -157,9 +154,16 @@
   let recompute_job_id = 0 // monotonic counter to track latest recompute call
   let hover_data = $state<FermiHoverData | null>(null)
 
-  // Call on_hover callback when hover_data changes
+  // Call on_point_hover callback when hover_data changes (on_hover is a deprecated alias)
+  let warned_deprecated_on_hover = false
   $effect(() => {
-    on_hover?.(hover_data)
+    if (on_hover && !on_point_hover && !warned_deprecated_on_hover) {
+      warned_deprecated_on_hover = true
+      console.warn(
+        `FermiSurface: the on_hover prop was renamed to on_point_hover; the alias will be removed in a future release`,
+      )
+    }
+    ;(on_point_hover ?? on_hover)?.(hover_data)
   })
 
   let controls_config = $derived(normalize_show_controls(show_controls))
@@ -167,20 +171,15 @@
   // Yield to browser so spinner can render before heavy computation
   const tick = () =>
     new Promise<void>((resolve) =>
-      requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
     )
 
   // Parse and load Fermi surface from content (async for UI responsiveness)
-  async function parse_fermi_content(
-    content: string | ArrayBuffer,
-    filename: string,
-  ) {
-    const text = content instanceof ArrayBuffer
-      ? new TextDecoder().decode(content)
-      : content
+  async function parse_fermi_content(content: string | ArrayBuffer, filename: string) {
+    const text = content instanceof ArrayBuffer ? new TextDecoder().decode(content) : content
 
+    // parse_fermi_file throws a descriptive error when parsing fails
     const parsed = parse_fermi_file(text, filename)
-    if (!parsed) throw new Error(`Failed to parse Fermi surface from ${filename}`)
 
     const file_size = new Blob([content]).size
     current_filename = filename
@@ -202,9 +201,7 @@
     try {
       await parse_fermi_content(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 })
     }
   }
@@ -271,11 +268,10 @@
   // Compute BZ when structure or fermi_data changes
   $effect(() => {
     // Get k_lattice from available sources (priority order)
-    const k_lattice = fermi_data?.k_lattice ??
+    const k_lattice =
+      fermi_data?.k_lattice ??
       band_data?.k_lattice ??
-      (structure?.lattice?.matrix
-        ? reciprocal_lattice(structure.lattice.matrix)
-        : null)
+      (structure?.lattice?.matrix ? reciprocal_lattice(structure.lattice.matrix) : null)
 
     if (!k_lattice) {
       bz_data = undefined
@@ -349,28 +345,18 @@
     else if (event.key === `Escape`) controls_open = false
   }
 
-  $effect(() => {
-    if (typeof window === `undefined`) return
-    const fs_el = document.fullscreenElement
-    if (fullscreen && fs_el !== wrapper && wrapper) {
-      wrapper.requestFullscreen().catch((err) => {
-        console.error(err)
-        fullscreen = false
-      })
-    } else if (!fullscreen && fs_el === wrapper) document.exitFullscreen()
-    set_fullscreen_bg(wrapper, fullscreen, `--fermi-bg-fullscreen`)
+  sync_fullscreen({
+    get_wrapper: () => wrapper,
+    get_fullscreen: () => fullscreen,
+    set_fullscreen: (val) => (fullscreen = val),
+    bg_css_var: `--fermi-bg-fullscreen`,
+    on_request_error: () => (fullscreen = false),
+    on_change: (val) => on_fullscreen_change?.({ fermi_data, bz_data, fullscreen: val }),
   })
 </script>
 
 <svelte:window onkeydown={handle_keydown} />
 
-<svelte:document
-  onfullscreenchange={() => {
-    fullscreen = Boolean(document.fullscreenElement)
-    on_fullscreen_change?.({ fermi_data, bz_data, fullscreen })
-  }}
-/>
-
 <div
   class:dragover
   class:active={controls_open}
@@ -382,17 +368,12 @@
   onmouseenter={() => (hovered = true)}
   onmouseleave={() => (hovered = false)}
   ondrop={handle_file_drop}
-  ondragover={(event) => {
-    event.preventDefault()
-    if (!allow_file_drop) return
-    dragover = true
-  }}
-  ondragleave={(event) => {
-    event.preventDefault()
-    dragover = false
-  }}
+  {...drag_over_handlers({
+    allow: () => allow_file_drop,
+    set_dragover: (over) => (dragover = over),
+  })}
   {...rest}
-  class="fermi-surface {rest.class ?? ``}"
+  class={[`fermi-surface`, rest.class]}
 >
   {@render children?.({ fermi_data, bz_data })}
   {#if loading}
@@ -409,61 +390,41 @@
       style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; text-align: center"
     />
   {:else if fermi_data || band_data}
-    <section
-      class="control-buttons {controls_config.class}"
-      style={controls_config.style}
+    <ViewerChrome
+      {controls_config}
+      filename={current_filename}
+      {fullscreen}
+      {fullscreen_toggle}
+      {wrapper}
     >
-      {#if controls_config.mode !== `never`}
-        {#if current_filename && controls_config.visible(`filename`)}
-          <span class="filename">{current_filename}</span>
-        {/if}
-
-        {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
-          <button
-            type="button"
-            onclick={() => fullscreen_toggle && toggle_fullscreen(wrapper)}
-            title="{fullscreen ? `Exit` : `Enter`} fullscreen"
-            aria-pressed={fullscreen}
-            class="fullscreen-toggle"
-            {@attach tooltip()}
-          >
-            {#if typeof fullscreen_toggle === `function`}
-              {@render fullscreen_toggle({ fullscreen })}
-            {:else}
-              <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
-            {/if}
-          </button>
-        {/if}
-
-        {#if controls_config.visible(`controls`)}
-          <FermiSurfaceControls
-            bind:controls_open
-            {fermi_data}
-            {band_data}
-            bind:mu
-            bind:color_property
-            bind:color_scale
-            {custom_property_label}
-            bind:representation
-            bind:surface_opacity
-            bind:selected_bands
-            bind:show_bz
-            bind:bz_opacity
-            bind:show_vectors
-            bind:tile_bz
-            bind:clip_enabled
-            bind:clip_axis
-            bind:clip_position
-            bind:clip_flip
-            bind:interpolation_factor
-            bind:camera_projection
-            on_mu_change={handle_mu_change}
-            on_interpolation_change={handle_interpolation_change}
-            on_export={handle_export}
-          />
-        {/if}
+      {#if controls_config.visible(`controls`)}
+        <FermiSurfaceControls
+          bind:controls_open
+          {fermi_data}
+          {band_data}
+          bind:mu
+          bind:color_property
+          bind:color_scale
+          {custom_property_label}
+          bind:representation
+          bind:surface_opacity
+          bind:selected_bands
+          bind:show_bz
+          bind:bz_opacity
+          bind:show_vectors
+          bind:tile_bz
+          bind:clip_enabled
+          bind:clip_axis
+          bind:clip_position
+          bind:clip_flip
+          bind:interpolation_factor
+          bind:camera_projection
+          on_mu_change={handle_mu_change}
+          on_interpolation_change={handle_interpolation_change}
+          on_export={handle_export}
+        />
       {/if}
-    </section>
+    </ViewerChrome>
 
     {#if typeof WebGLRenderingContext !== `undefined`}
       <Canvas renderMode="on-demand" dpr={Math.min(2, window.devicePixelRatio)}>
@@ -555,52 +516,4 @@
   .fermi-surface :global(canvas) {
     user-select: none;
   }
-  section.control-buttons {
-    position: absolute;
-    display: flex;
-    top: var(--fermi-buttons-top, var(--ctrl-btn-top, 1ex));
-    right: var(--fermi-buttons-right, var(--ctrl-btn-right, 1ex));
-    gap: clamp(6pt, 1cqmin, 9pt);
-    z-index: var(
-      --fermi-buttons-z-index,
-      var(--z-index-overlay-controls, 100000000)
-    );
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    align-items: center;
-  }
-  /* Mode: always - controls always visible */
-  section.control-buttons.always-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: hover - controls visible on component hover */
-  .fermi-surface:hover section.control-buttons.hover-visible,
-  .fermi-surface:focus-within section.control-buttons.hover-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: never - stays hidden (default state, no additional CSS needed) */
-  section.control-buttons > :global(button) {
-    background-color: transparent;
-    display: flex;
-    padding: 4px;
-    border-radius: var(--border-radius, 3pt);
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
-  }
-  section.control-buttons :global(button:hover) {
-    background-color: color-mix(in srgb, currentColor 8%, transparent);
-  }
-  .filename {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: var(--code-bg, rgba(0, 0, 0, 0.1));
-    padding: 3pt 6pt;
-    border-radius: 3pt;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 </style>

package/dist/fermi-surface/FermiSurface.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { BrillouinZoneData } from '../brillouin';
-import type { ShowControlsProp } from '../controls';
+import { type ShowControlsProp } from '../controls';
 import Spinner from '../feedback/Spinner.svelte';
+import { type FullscreenToggleProp } from '../layout';
 import type { CameraProjection } from '../settings';
 import type { Crystal } from '../structure';
 import type { ComponentProps, Snippet } from 'svelte';
@@ -38,15 +39,6 @@ type $$ComponentProps = {
     clip_flip?: boolean;
     interpolation_factor?: number;
     camera_projection?: CameraProjection;
-    /**
-     * 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', 'controls'
-     */
     show_controls?: ShowControlsProp;
     fullscreen?: boolean;
     width?: number;
@@ -55,19 +47,15 @@ type $$ComponentProps = {
     hovered?: boolean;
     dragover?: boolean;
     allow_file_drop?: boolean;
-    fullscreen_toggle?: Snippet<[{
-        fullscreen: boolean;
-    }]> | boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
     data_url?: string;
     spinner_props?: ComponentProps<typeof Spinner>;
     loading?: boolean;
     error_msg?: string;
-    children?: Snippet<[
-        {
-            fermi_data?: FermiSurfaceData;
-            bz_data?: BrillouinZoneData;
-        }
-    ]>;
+    children?: Snippet<[{
+        fermi_data?: FermiSurfaceData;
+        bz_data?: BrillouinZoneData;
+    }]>;
     on_file_drop?: (filename: string) => void;
     on_file_load?: (data: FermiFileLoadData) => void;
     on_error?: (data: FermiErrorData) => void;
@@ -76,8 +64,9 @@ type $$ComponentProps = {
     tooltip_config?: Snippet<[{
         hover_data: FermiHoverData;
     }]> | FermiTooltipConfig;
+    on_point_hover?: (data: FermiHoverData | null) => void;
     on_hover?: (data: FermiHoverData | null) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const FermiSurface: import("svelte").Component<$$ComponentProps, {}, "dragover" | "height" | "width" | "fullscreen" | "hovered" | "controls_open" | "loading" | "camera_projection" | "color_scale" | "wrapper" | "error_msg" | "surface_opacity" | "show_vectors" | "bz_data" | "mu" | "selected_bands" | "interpolation_factor" | "fermi_data" | "band_data" | "color_property" | "representation" | "show_bz" | "bz_opacity" | "tile_bz" | "clip_enabled" | "clip_axis" | "clip_position" | "clip_flip">;
+declare const FermiSurface: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "camera_projection" | "color_scale" | "loading" | "error_msg" | "surface_opacity" | "show_vectors" | "bz_data" | "mu" | "selected_bands" | "interpolation_factor" | "fermi_data" | "band_data" | "color_property" | "representation" | "show_bz" | "bz_opacity" | "tile_bz" | "clip_enabled" | "clip_axis" | "clip_position" | "clip_flip">;
 type FermiSurface = ReturnType<typeof FermiSurface>;
 export default FermiSurface;

package/dist/fermi-surface/FermiSurfaceControls.svelte

@@ -2,7 +2,7 @@
   import SettingsSection from '../layout/SettingsSection.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import type { CameraProjection } from '../settings'
-  import { make_change_detector } from '../utils'
+  import { make_change_detector, parse_num_token } from '../utils'
   import type { Snippet } from 'svelte'
   import type {
     BandGridData,
@@ -90,8 +90,8 @@
   let available_bands = $derived(
     fermi_data
       ? [...new Set(fermi_data.isosurfaces.map((iso) => iso.band_index))].toSorted(
-        (a, b) => a - b,
-      )
+          (a, b) => a - b,
+        )
       : [],
   )
   let available_bands_key = $derived(available_bands.join(`,`))
@@ -119,8 +119,7 @@
   }
 
   function handle_mu_change(event: Event & { currentTarget: HTMLInputElement }) {
-    const trimmed = event.currentTarget.value.trim()
-    const parsed = parseFloat(trimmed)
+    const parsed = parse_num_token(event.currentTarget.value)
     // Only update mu when input is valid; keep last valid value during transient
     // invalid states (e.g. empty string while user is typing a new value)
     if (Number.isFinite(parsed)) {
@@ -147,14 +146,7 @@
   >
     <label>
       <span>μ offset (eV):</span>
-      <input
-        type="range"
-        min="-1"
-        max="1"
-        step="0.01"
-        value={mu}
-        oninput={handle_mu_change}
-      />
+      <input type="range" min="-1" max="1" step="0.01" value={mu} oninput={handle_mu_change} />
       <input
         type="number"
         step="0.01"
@@ -300,13 +292,7 @@
       </label>
       <label>
         <span>Position:</span>
-        <input
-          type="range"
-          min="-1"
-          max="1"
-          step="0.01"
-          bind:value={clip_position}
-        />
+        <input type="range" min="-1" max="1" step="0.01" bind:value={clip_position} />
         <span class="value">{clip_position.toFixed(2)}</span>
       </label>
       <label>