matterviz 0.4.1 → 0.4.2

package/dist/layout/ViewerChrome.svelte

@@ -2,11 +2,12 @@
   import type { FullscreenToggleProp } from './fullscreen'
   import type { ShowControlsState } from '../controls'
   // Shared control-buttons row (filename chip + fullscreen toggle + snippet buttons/panes) for BrillouinZone/FermiSurface/Structure viewers; themed via neutral --viewer-* CSS vars
-  // TODO Trajectory.svelte still has its own control-buttons variant — migrate it here.
+  // NOTE Trajectory.svelte intentionally keeps its own controls: its bar is a full playback strip (nav/step/FPS/info+export panes/view-mode) rather than this floating top-right cluster. It already shares FullscreenButton + sync_fullscreen.
   import type { Snippet } from 'svelte'
   import { createAttachmentKey } from 'svelte/attachments'
   import { tooltip } from 'svelte-multiselect/attachments'
   import FullscreenButton from './FullscreenButton.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
 
   let {
     controls_config,
@@ -15,10 +16,10 @@
     fullscreen_toggle = true,
     fullscreen_btn_style = undefined,
     wrapper = undefined,
-    style = undefined,
     before = undefined,
     children = undefined,
-  }: {
+    ...rest
+  }: HTMLAttributes<HTMLElement> & {
     controls_config: ShowControlsState
     filename?: string
     fullscreen?: boolean
@@ -35,8 +36,9 @@
 </script>
 
 <section
-  class="control-buttons {controls_config.class}"
-  style={[style, controls_config.style].filter(Boolean).join(`; `)}
+  {...rest}
+  class={[`control-buttons`, controls_config.class, rest.class]}
+  style={[rest.style, controls_config.style].filter(Boolean).join(`; `)}
 >
   {#if controls_config.mode !== `never`}
     {@render before?.()}
@@ -67,10 +69,7 @@
     top: var(--viewer-buttons-top, var(--ctrl-btn-top, 1ex));
     right: var(--viewer-buttons-right, var(--ctrl-btn-right, 1ex));
     gap: var(--viewer-buttons-gap, clamp(6pt, 1cqmin, 9pt));
-    z-index: var(
-      --viewer-buttons-z-index,
-      var(--z-index-overlay-controls, 100000000)
-    );
+    z-index: var(--viewer-buttons-z-index, var(--z-index-overlay-controls, 100000000));
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
@@ -97,7 +96,7 @@
     display: flex;
     padding: var(--viewer-buttons-btn-padding, 4px);
     border-radius: var(--border-radius, 3pt);
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
+    font-size: var(--ctrl-btn-icon-size, clamp(0.7rem, 2cqmin, 0.85rem));
   }
   section.control-buttons :global(button:hover) {
     background-color: color-mix(in srgb, currentColor 8%, transparent);

package/dist/layout/ViewerChrome.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { FullscreenToggleProp } from './fullscreen';
 import type { ShowControlsState } from '../controls';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
     controls_config: ShowControlsState;
     filename?: string;
     fullscreen?: boolean;

package/dist/layout/fullscreen.js

@@ -4,14 +4,12 @@ export async function toggle_fullscreen(wrapper) {
     if (!wrapper || !wrapper.isConnected)
         return;
     try {
-        if (!document.fullscreenElement) {
-            await wrapper.requestFullscreen();
-        }
-        else if (document.fullscreenElement === wrapper) {
+        if (document.fullscreenElement === wrapper) {
             await document.exitFullscreen();
         }
         else {
-            await document.exitFullscreen();
+            if (document.fullscreenElement)
+                await document.exitFullscreen();
             await wrapper.requestFullscreen();
         }
     }

package/dist/layout/fullscreen.svelte.js

@@ -1,6 +1,5 @@
 import { set_fullscreen_bg } from './fullscreen';
-// Two-way sync between a bindable `fullscreen` flag, the browser fullscreen state of a wrapper, and the fullscreen background CSS var. Creates $effects (call during component init). Shared by BrillouinZone/FermiSurface/Structure viewers.
-// TODO Trajectory.svelte still has its own fullscreen variant — migrate it here.
+// Two-way sync between a bindable `fullscreen` flag, the browser fullscreen state of a wrapper, and the fullscreen background CSS var. Creates $effects (call during component init). Shared by BrillouinZone/FermiSurface/Structure/Trajectory viewers.
 export function sync_fullscreen(opts) {
     // Flag -> browser: enter/exit fullscreen when the bound flag changes
     $effect(() => {

package/dist/layout/index.d.ts

@@ -4,6 +4,7 @@ export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
+export { default as NumberRangeInput } from './NumberRangeInput.svelte';
 export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';

package/dist/layout/index.js

@@ -4,6 +4,7 @@ export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
+export { default as NumberRangeInput } from './NumberRangeInput.svelte';
 export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';

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

@@ -191,9 +191,7 @@
       if (expandable && !is_collapsed) {
         toggle_collapse()
       }
-    } else if (
-      (event.key === `c` || event.key === `C`) && (event.ctrlKey || event.metaKey)
-    ) {
+    } else if ((event.key === `c` || event.key === `C`) && (event.ctrlKey || event.metaKey)) {
       // When nodes are selected, let the tree-level handler do bulk copy
       if (ctx?.selected_paths.size) return
       event.preventDefault()
@@ -299,10 +297,7 @@
           {#if expandable && is_collapsed}
             ▸
           {:else}
-            <Icon
-              icon="Copy"
-              style="width: 10px; height: 10px; vertical-align: baseline"
-            />
+            <Icon icon="Copy" style="width: 10px; height: 10px; vertical-align: baseline" />
           {/if}
         </span>
       </button>
@@ -371,9 +366,9 @@
               {/if}
             </span>
             <span class="colon">:</span>
-            <span style="color: var(--jt-preview); font-style: italic">{
-              format_preview(ghost.value)
-            }</span>
+            <span style="color: var(--jt-preview); font-style: italic"
+              >{format_preview(ghost.value)}</span
+            >
           </span>
         </div>
       {/each}
@@ -497,7 +492,9 @@
       color: var(--jt-number, light-dark(#098658, #b5cea8));
     }
   }
-  .colon, .comma, .bracket {
+  .colon,
+  .comma,
+  .bracket {
     color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
   }
   .colon {

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

@@ -7,12 +7,7 @@
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteSet } from 'svelte/reactivity'
   import JsonNode from './JsonNode.svelte'
-  import type {
-    CopyEventPosition,
-    DiffEntry,
-    JsonTreeContext,
-    JsonTreeProps,
-  } from './types'
+  import type { CopyEventPosition, DiffEntry, JsonTreeContext, JsonTreeProps } from './types'
   import { JSON_TREE_CONTEXT_KEY } from './types'
   import {
     build_ghost_map,
@@ -50,15 +45,14 @@
     editable = false,
     onchange,
     ...rest
-  }: JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`> =
-    $props()
+  }: JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`> = $props()
 
   // Internal state
   let search_query = $state(``)
   let search_input_value = $state(``)
   let focused_path = $state<string | null>(null)
   // Use Set for O(1) lookup/add/delete instead of O(n) array operations
-  let registered_paths_set = $state(new Set<string>())
+  const registered_paths_set = new SvelteSet<string>()
   let registered_paths_list = $state<string[]>([]) // ordered list for keyboard nav
   let copy_feedback_path = $state<string | null>(null)
   let copy_feedback_error = $state(false)
@@ -72,16 +66,14 @@
   // Reference to the search input for focus management
   let search_input_element: HTMLInputElement | undefined = $state()
   // Context menu state (null when closed)
-  let context_menu_state = $state<
-    {
-      x: number
-      y: number
-      path: string
-      value: unknown
-      expandable: boolean
-      is_collapsed: boolean
-    } | null
-  >(null)
+  let context_menu_state = $state<{
+    x: number
+    y: number
+    path: string
+    value: unknown
+    expandable: boolean
+    is_collapsed: boolean
+  } | null>(null)
   // Pinned paths for quick reference
   let pinned_paths = $state(new SvelteSet<string>())
   // Selection state for bulk operations
@@ -94,14 +86,16 @@
   $effect.pre(() => {
     if (!value_changed(value)) return
     focused_path = null
-    registered_paths_set = new Set()
+    registered_paths_set.clear()
     registered_paths_list = []
     copy_feedback_path = null
     copy_feedback_error = false
     context_menu_state = null
     force_expanded = new SvelteSet()
     const valid_paths = new SvelteSet(collect_all_paths(value, root_label ?? ``))
-    collapsed_paths = new SvelteSet([...collapsed_paths].filter((path) => valid_paths.has(path)))
+    collapsed_paths = new SvelteSet(
+      [...collapsed_paths].filter((path) => valid_paths.has(path)),
+    )
     pinned_paths = new SvelteSet()
     selected_paths = new SvelteSet()
     last_selected_path = null
@@ -211,8 +205,8 @@
   // Navigate to previous match
   function go_to_prev_match(): void {
     if (sorted_matches.length === 0) return
-    current_match_index = (current_match_index - 1 + sorted_matches.length) %
-      sorted_matches.length
+    current_match_index =
+      (current_match_index - 1 + sorted_matches.length) % sorted_matches.length
     scroll_to_current_match()
   }
 
@@ -250,14 +244,16 @@
   // Get all descendant paths of a given path (including the path itself)
   function get_descendants(target_path: string): string[] {
     const all_paths = collect_all_paths(value, root_path)
-    const descendants = target_path === `` ? all_paths : all_paths.filter(
-      (entry) =>
-        entry === target_path || entry.startsWith(`${target_path}.`) ||
-        entry.startsWith(`${target_path}[`),
-    )
-    return descendants.includes(target_path)
-      ? descendants
-      : [target_path, ...descendants]
+    const descendants =
+      target_path === ``
+        ? all_paths
+        : all_paths.filter(
+            (entry) =>
+              entry === target_path ||
+              entry.startsWith(`${target_path}.`) ||
+              entry.startsWith(`${target_path}[`),
+          )
+    return descendants.includes(target_path) ? descendants : [target_path, ...descendants]
   }
 
   function expand_all(): void {
@@ -277,9 +273,8 @@
 
     for (const path of all_paths) {
       const segments = parse_path(path)
-      const depth = root_label && segments[0] === root_label
-        ? segments.length - 1
-        : segments.length
+      const depth =
+        root_label && segments[0] === root_label ? segments.length - 1 : segments.length
       ;(depth >= level ? new_collapsed : new_expanded).add(path)
     }
 
@@ -303,7 +298,8 @@
       await navigator.clipboard.writeText(text)
       copy_feedback_error = false
       oncopy?.(path, text)
-    } catch { // Clipboard API failed - still show feedback but as error
+    } catch {
+      // Clipboard API failed - still show feedback but as error
       copy_feedback_error = true
     }
     copy_feedback_path = path // Show feedback regardless of success/failure
@@ -421,9 +417,7 @@
       const start_idx = registered_paths_list.indexOf(last_selected_path)
       const end_idx = registered_paths_list.indexOf(select_path)
       if (start_idx !== -1 && end_idx !== -1) {
-        const [from, to] = start_idx < end_idx
-          ? [start_idx, end_idx]
-          : [end_idx, start_idx]
+        const [from, to] = start_idx < end_idx ? [start_idx, end_idx] : [end_idx, start_idx]
         for (let idx = from; idx <= to; idx++) {
           selected_paths.add(registered_paths_list[idx])
         }
@@ -661,9 +655,7 @@
           >
             <Icon icon="ArrowDown" style="width: 12px; height: 12px" />
           </button>
-          <span class="match-count">{current_match_index + 1} of {
-              sorted_matches.length
-            }</span>
+          <span class="match-count">{current_match_index + 1} of {sorted_matches.length}</span>
         </div>
       {/if}
       <div class="controls">
@@ -691,12 +683,7 @@
         <button type="button" onclick={expand_all} title="Expand all" {@attach tooltip()}>
           <Icon icon="Expand" style="width: 14px; height: 14px" />
         </button>
-        <button
-          type="button"
-          onclick={collapse_all}
-          title="Collapse all"
-          {@attach tooltip()}
-        >
+        <button type="button" onclick={collapse_all} title="Collapse all" {@attach tooltip()}>
           <Icon icon="Collapse" style="width: 14px; height: 14px" />
         </button>
         <button
@@ -780,18 +767,16 @@
             type="button"
             class="pinned-path"
             onclick={() =>
-            copy_to_clipboard(
-              pinned_path,
-              serialize_for_copy(get_value_at_path(pinned_path)),
-            )}
+              copy_to_clipboard(
+                pinned_path,
+                serialize_for_copy(get_value_at_path(pinned_path)),
+              )}
             title="Click to copy value"
             {@attach tooltip()}
           >
             {pinned_path}
           </button>
-          <span class="pinned-value">{
-            format_preview(get_value_at_path(pinned_path))
-          }</span>
+          <span class="pinned-value">{format_preview(get_value_at_path(pinned_path))}</span>
           <button
             type="button"
             class="unpin-btn"
@@ -821,8 +806,8 @@
       class="copy-feedback"
       class:error={copy_feedback_error}
       style={copy_feedback_pos
-      ? `left: ${copy_feedback_pos.x}px; top: ${copy_feedback_pos.y - 24}px`
-      : `right: 8px; top: 8px`}
+        ? `left: ${copy_feedback_pos.x}px; top: ${copy_feedback_pos.y - 24}px`
+        : `right: 8px; top: 8px`}
     >
       {copy_feedback_error ? `Copy failed` : `Copied!`}
     </div>
@@ -850,9 +835,7 @@
         <button
           type="button"
           onclick={() =>
-          ctx_menu_action((st) =>
-            copy_to_clipboard(st.path, serialize_for_copy(st.value))
-          )}
+            ctx_menu_action((st) => copy_to_clipboard(st.path, serialize_for_copy(st.value)))}
         >
           <Icon icon="Copy" style="width: 12px; height: 12px" /> Copy value
         </button>
@@ -871,11 +854,11 @@
           <button
             type="button"
             onclick={() =>
-            ctx_menu_action((st) =>
-              st.is_collapsed
-                ? toggle_collapse_recursive(st.path, false)
-                : collapse_children_only(st.path)
-            )}
+              ctx_menu_action((st) =>
+                st.is_collapsed
+                  ? toggle_collapse_recursive(st.path, false)
+                  : collapse_children_only(st.path),
+              )}
           >
             {context_menu_state.is_collapsed ? `Expand` : `Collapse`} all children
           </button>
@@ -883,10 +866,7 @@
         <li class="separator"></li>
       {/if}
       <li>
-        <button
-          type="button"
-          onclick={() => ctx_menu_action((st) => toggle_pin(st.path))}
-        >
+        <button type="button" onclick={() => ctx_menu_action((st) => toggle_pin(st.path))}>
           {pinned_paths.has(context_menu_state.path) ? `Unpin` : `Pin`} this path
         </button>
       </li>
@@ -1006,7 +986,9 @@
     font-weight: 500;
     color: inherit;
     opacity: 0.6;
-    transition: opacity 0.15s, background 0.15s;
+    transition:
+      opacity 0.15s,
+      background 0.15s;
   }
   .controls button:hover {
     opacity: 1;
@@ -1144,18 +1126,12 @@
     font: inherit;
   }
   .context-menu button:hover {
-    background: var(
-      --jt-ctx-hover,
-      light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1))
-    );
+    background: var(--jt-ctx-hover, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1)));
   }
   .context-menu .separator {
     height: 1px;
     margin: 4px 8px;
-    background: var(
-      --jt-ctx-border,
-      light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))
-    );
+    background: var(--jt-ctx-border, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
   }
   .pinned-panel :where(button) {
     background: none;

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

@@ -31,9 +31,7 @@
 
   // Extract max_string_length threshold for reuse
   let max_len = $derived(ctx?.settings.max_string_length ?? 200)
-  let is_long_string = $derived(
-    value_type === `string` && (value as string).length > max_len,
-  )
+  let is_long_string = $derived(value_type === `string` && (value as string).length > max_len)
 
   // Check for changes on mount and when value changes
   $effect(() => {
@@ -89,9 +87,7 @@
     if (value_type === `circular`) return `[Circular]`
     if (value_type === `string`) {
       const str = value as string
-      return is_long_string && !is_expanded
-        ? `"${str.slice(0, max_len)}..."`
-        : `"${str}"`
+      return is_long_string && !is_expanded ? `"${str.slice(0, max_len)}..."` : `"${str}"`
     }
     return format_preview(value)
   })
@@ -200,17 +196,11 @@
         ...
       </button>
     {:else if is_long_string && is_expanded}
-      <button
-        type="button"
-        class="expand-btn"
-        onclick={toggle_expand}
-        title="Collapse string"
-      >
+      <button type="button" class="expand-btn" onclick={toggle_expand} title="Collapse string">
         ▲
       </button>
     {/if}
-    {#if ctx?.settings.show_data_types && value_type !== `null` &&
-      value_type !== `undefined`}
+    {#if ctx?.settings.show_data_types && value_type !== `null` && value_type !== `undefined`}
       <span class="type-annotation">{value_type}</span>
     {/if}
   </span>
@@ -235,7 +225,9 @@
   .json-value {
     cursor: pointer;
     border-radius: 2px;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
     &:hover {
       background: var(
         --jt-hover-bg,

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

@@ -299,8 +299,16 @@ export function parse_path(path) {
     const segments = [];
     let current = ``;
     let in_bracket = false;
-    for (let idx = 0; idx < path.length; idx++) {
-        const char = path[idx];
+    // Bracket tokens are numeric indices or quoted keys (quotes stripped, \" unescaped)
+    const push_bracket_token = (token) => {
+        const num = Number(token);
+        if (Number.isNaN(num)) {
+            segments.push(token.replaceAll(/^"|"$/g, ``).replaceAll(String.raw `\"`, `"`));
+        }
+        else
+            segments.push(num);
+    };
+    for (const char of path) {
         if (char === `.` && !in_bracket) {
             if (current)
                 segments.push(current);
@@ -313,17 +321,8 @@ export function parse_path(path) {
             in_bracket = true;
         }
         else if (char === `]`) {
-            if (current) {
-                // Check if it's a number index
-                const num = Number(current);
-                if (Number.isNaN(num)) {
-                    // Remove surrounding quotes and unescape internal quotes
-                    const unquoted = current.replaceAll(/^"|"$/g, ``).replaceAll('\\"', `"`);
-                    segments.push(unquoted);
-                }
-                else
-                    segments.push(num);
-            }
+            if (current)
+                push_bracket_token(current);
             current = ``;
             in_bracket = false;
         }
@@ -332,16 +331,8 @@ export function parse_path(path) {
     }
     // Handle trailing content (e.g., unclosed bracket like "a[0")
     if (current) {
-        if (in_bracket) {
-            // Apply same numeric/quoted-string logic as inside brackets
-            const num = Number(current);
-            if (Number.isNaN(num)) {
-                const unquoted = current.replaceAll(/^"|"$/g, ``).replaceAll('\\"', `"`);
-                segments.push(unquoted);
-            }
-            else
-                segments.push(num);
-        }
+        if (in_bracket)
+            push_bracket_token(current);
         else
             segments.push(current);
     }

package/dist/math.d.ts

@@ -77,6 +77,8 @@ export declare function get_coefficient_of_variation(values: number[]): number;
 export declare function det_4x4(matrix: Matrix4x4): number;
 export declare function det_nxn(matrix: number[][]): number;
 export declare const cross_3d: (vec1: Vec3, vec2: Vec3) => Vec3;
+export declare function cell_heights(matrix: Matrix3x3): Vec3;
+export declare const frac_cutoff_per_axis: (matrix: Matrix3x3, dist: number) => Vec3;
 export declare const lerp: (start: number, end: number, t: number) => number;
 export declare const lerp_vec3: (start: Vec3, end: Vec3, t: number) => Vec3;
 export declare const centered_frac: (val: number) => number;

package/dist/math.js

@@ -426,6 +426,25 @@ export const cross_3d = (vec1, vec2) => [
     vec1[2] * vec2[0] - vec1[0] * vec2[2],
     vec1[0] * vec2[1] - vec1[1] * vec2[0],
 ];
+// Perpendicular distance between opposite cell faces per axis: volume / opposite-
+// face area. This (not the lattice vector length) is the correct denominator for
+// per-axis fractional reach in oblique cells. Degenerate (zero-volume) cells →
+// Infinity so callers' `dist / height` collapses to 0.
+export function cell_heights(matrix) {
+    const [a_vec, b_vec, c_vec] = matrix;
+    const cross_bc = cross_3d(b_vec, c_vec);
+    const volume = Math.abs(dot(a_vec, cross_bc));
+    if (volume === 0)
+        return [Infinity, Infinity, Infinity];
+    // height along axis k = volume / area of the face spanned by the OTHER two vectors
+    const height_a = volume / Math.hypot(...cross_bc); // face b×c ⟂ a
+    const height_b = volume / Math.hypot(...cross_3d(a_vec, c_vec)); // face a×c ⟂ b
+    const height_c = volume / Math.hypot(...cross_3d(a_vec, b_vec)); // face a×b ⟂ c
+    return [height_a, height_b, height_c];
+}
+// `dist` Å of real-space reach as a fractional pad per axis (via cell heights,
+// correct for oblique cells). Degenerate cells → 0 (no images).
+export const frac_cutoff_per_axis = (matrix, dist) => cell_heights(matrix).map((height) => dist / height);
 // Scalar linear interpolation
 export const lerp = (start, end, t) => start + t * (end - start);
 // Vec3 linear interpolation

package/dist/overlays/ContextMenu.svelte

@@ -78,7 +78,7 @@
 {#if visible}
   {@const { x, y } = get_smart_position()}
   {@const style = `position: absolute; left: ${x}px; top: ${y}px; ${rest.style ?? ``}`}
-  <div {...rest} class="context-menu {rest.class ?? ``}" {style} bind:this={menu_element}>
+  <div {...rest} class={[`context-menu`, rest.class]} {style} bind:this={menu_element}>
     {#each sections as { title, options } (title)}
       <div class="section">
         <div class="header">{title}</div>
@@ -104,7 +104,9 @@
     background: var(--surface-bg);
     border: 1px solid var(--border-color);
     border-radius: var(--context-menu-border-radius, var(--border-radius, 3pt));
-    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 8px 16px -4px rgba(0, 0, 0, 0.3),
+      0 4px 8px -2px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(4px);
     min-width: var(--context-menu-min-width, 160px);
     overflow: hidden;

package/dist/overlays/CopyButton.svelte

@@ -2,16 +2,22 @@
   import Icon from '../Icon.svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
 
-  let { copied = false, label, title = label, onclick, ...rest }: Omit<
-    HTMLButtonAttributes,
-    `type` | `aria-label`
-  > & { copied?: boolean; label: string } = $props()
+  let {
+    copied = false,
+    label,
+    title = label,
+    onclick,
+    ...rest
+  }: Omit<HTMLButtonAttributes, `type` | `aria-label`> & {
+    copied?: boolean
+    label: string
+  } = $props()
 </script>
 
 <button
   {...rest}
   type="button"
-  class="copy-button {rest.class ?? ``}"
+  class={[`copy-button`, rest.class]}
   aria-label={label}
   {title}
   {onclick}

package/dist/overlays/DragControlTab.svelte

@@ -13,7 +13,12 @@
   } = $props()
 </script>
 
-{#snippet control_button(callback: () => void, css_class: string, icon: IconName, label: string)}
+{#snippet control_button(
+  callback: () => void,
+  css_class: string,
+  icon: IconName,
+  label: string,
+)}
   <button
     type="button"
     class={css_class}