matterviz 0.4.1 → 0.4.3

package/dist/layout/SettingsSection.svelte

@@ -4,6 +4,12 @@
   import { untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
+  type SettingsSectionContext = {
+    current_values: Record<string, unknown>
+    has_changes: boolean
+    reference_values: Record<string, unknown>
+  }
+
   let {
     title,
     current_values,
@@ -13,13 +19,7 @@
   }: HTMLAttributes<HTMLElementTagNameMap[`section`]> & {
     title: string
     current_values: Record<string, unknown>
-    children: Snippet<
-      [{
-        current_values: Record<string, unknown>
-        has_changes: boolean
-        reference_values: Record<string, unknown>
-      }]
-    >
+    children: Snippet<[SettingsSectionContext]>
     on_reset?: () => void
   } = $props()
 
@@ -28,62 +28,62 @@
     if (obj === null || typeof obj !== `object`) return obj
     if (obj instanceof Date) return new Date(obj)
     if (obj instanceof RegExp) return new RegExp(obj)
-    if (Array.isArray(obj)) {
-      return obj.map((item) =>
-        typeof item === `object` && item !== null ? deep_copy(item) : item
-      )
-    }
-
-    const copy: Record<string, unknown> = {}
-    for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
-      copy[key] = typeof value === `object` && value !== null
-        ? deep_copy(value)
-        : value
-    }
-    return copy
+    if (Array.isArray(obj)) return obj.map(deep_copy)
+    return Object.fromEntries(
+      Object.entries(obj).map(([key, value]) => [key, deep_copy(value)]),
+    )
   }
 
   // Capture initial values once at mount - must NOT be $derived or it tracks changes
-  const reference_values = untrack(() =>
-    deep_copy(current_values) as Record<string, unknown>
-  )
-
-  // Check if any values have changed from reference values
-  let has_changes = $derived.by(() => {
-    for (const [key, reference_value] of Object.entries(reference_values)) {
-      const current_value = current_values[key]
+  const reference_values = untrack(() => deep_copy(current_values) as Record<string, unknown>)
 
-      // Deep comparison for arrays
-      if (Array.isArray(reference_value) && Array.isArray(current_value)) {
-        if (reference_value.length !== current_value.length) return true
-        if (
-          reference_value.some((val, idx) => {
-            const curr_val = current_value[idx]
-            // Handle nested objects/arrays in arrays
-            if (
-              typeof val === `object` && val !== null &&
-              typeof curr_val === `object` && curr_val !== null
-            ) return JSON.stringify(val) !== JSON.stringify(curr_val) // Quick deep comparison fallback
-            return val !== curr_val
-          })
-        ) {
-          return true
-        }
-        continue
-      }
-
-      // Handle undefined/null comparisons properly
-      if (reference_value === undefined && current_value === undefined) continue
-      if (reference_value === null && current_value === null) continue
+  // unique per-instance id so aria-labelledby stays valid with multiple sections on a page
+  const title_id = `settings-section-title-${crypto.randomUUID()}`
 
-      // Basic comparison for primitives
-      if (current_value !== reference_value) {
-        return true
+  // Order-independent deep equality for setting values
+  const setting_equal = (left: unknown, right: unknown): boolean => {
+    if (Object.is(left, right)) return true
+    if (left == null || right == null) return false
+    if (typeof left !== `object` || typeof right !== `object`) return false
+    if (left instanceof Date || right instanceof Date) {
+      return (
+        left instanceof Date && right instanceof Date && left.getTime() === right.getTime()
+      )
+    }
+    if (left instanceof RegExp || right instanceof RegExp) {
+      return (
+        left instanceof RegExp &&
+        right instanceof RegExp &&
+        left.toString() === right.toString()
+      )
+    }
+    if (Array.isArray(left) || Array.isArray(right)) {
+      if (!Array.isArray(left) || !Array.isArray(right) || left.length !== right.length) {
+        return false
       }
+      return left.every((item, idx) => setting_equal(item, right[idx]))
     }
-    return false
-  })
+    const left_obj = left as Record<string, unknown>
+    const right_obj = right as Record<string, unknown>
+    const left_keys = Object.keys(left_obj)
+    if (left_keys.length !== Object.keys(right_obj).length) return false
+    return left_keys.every(
+      (key) => Object.hasOwn(right_obj, key) && setting_equal(left_obj[key], right_obj[key]),
+    )
+  }
 
+  // Key presence is independent of value: additions/removals count even when the
+  // value is undefined. Only compare values when both sides own the key.
+  let has_changes = $derived(
+    [...new Set([...Object.keys(reference_values), ...Object.keys(current_values)])].some(
+      (key) => {
+        const in_reference = Object.hasOwn(reference_values, key)
+        const in_current = Object.hasOwn(current_values, key)
+        if (in_reference !== in_current) return true
+        return !setting_equal(reference_values[key], current_values[key])
+      },
+    ),
+  )
   function handle_reset(event: MouseEvent) {
     event.stopPropagation()
     event.preventDefault()
@@ -91,7 +91,7 @@
   }
 </script>
 
-<h4 id="settings-section-title">
+<h4 id={title_id}>
   {title}
 
   {#if has_changes}
@@ -106,7 +106,7 @@
     </button>
   {/if}
 </h4>
-<section {...rest} aria-labelledby="settings-section-title">
+<section {...rest} aria-labelledby={title_id}>
   {@render children?.({ current_values, has_changes, reference_values })}
 </section>
 
@@ -140,9 +140,4 @@
     opacity: 1;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
-  .reset-button.standalone {
-    position: absolute;
-    top: -8pt;
-    right: -8pt;
-  }
 </style>

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

@@ -1,15 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+type SettingsSectionContext = {
+    current_values: Record<string, unknown>;
+    has_changes: boolean;
+    reference_values: Record<string, unknown>;
+};
 type $$ComponentProps = HTMLAttributes<HTMLElementTagNameMap[`section`]> & {
     title: string;
     current_values: Record<string, unknown>;
-    children: Snippet<[
-        {
-            current_values: Record<string, unknown>;
-            has_changes: boolean;
-            reference_values: Record<string, unknown>;
-        }
-    ]>;
+    children: Snippet<[SettingsSectionContext]>;
     on_reset?: () => void;
 };
 declare const SettingsSection: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/layout/SubpageGrid.svelte

@@ -52,7 +52,9 @@
     border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
     text-decoration: none;
     color: inherit;
-    transition: border-color 0.15s, box-shadow 0.15s;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
     &:hover {
       border-color: color-mix(in srgb, currentColor 35%, transparent);
       box-shadow: 0 2px 12px color-mix(in srgb, currentColor 8%, transparent);

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,9 @@
     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));
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
@@ -97,10 +98,14 @@
     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);
+    background-color: var(
+      --viewer-buttons-hover-bg,
+      color-mix(in srgb, currentColor 8%, transparent)
+    );
+    color: var(--viewer-buttons-hover-color, currentColor);
   }
   .filename {
     font-family: monospace;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Icon from '../../Icon.svelte'
+  import { build_path } from '../../json-path'
   import { getContext, onMount } from 'svelte'
   // oxlint-disable-next-line import/no-self-import -- recursive Svelte component
   import JsonNode from './JsonNode.svelte'
@@ -7,7 +8,6 @@
   import type { JsonTreeContext } from './types'
   import { JSON_TREE_CONTEXT_KEY } from './types'
   import {
-    build_path,
     estimate_byte_size,
     format_byte_size,
     format_preview,
@@ -40,13 +40,8 @@
     }
   })
 
-  // Determine value type
   let value_type = $derived(get_value_type(value))
-
-  // Check if this node is expandable
   let expandable = $derived(is_expandable(value))
-
-  // Get child count for preview
   let child_count = $derived(expandable ? get_child_count(value) : 0)
 
   // Determine if this node should be collapsed
@@ -77,14 +72,9 @@
   })
 
   // Note: Search highlighting is handled by CSS Highlight API in JsonTree.svelte
-
-  // Check if this node is focused
   let is_focused = $derived(ctx?.focused_path === path)
-
-  // Check if this is the current search match being navigated
+  // Current search match being navigated
   let is_current_match = $derived(ctx?.current_match_path === path)
-
-  // Check if this node is selected
   let is_selected = $derived(ctx?.selected_paths.has(path) ?? false)
 
   // Diff status for this node (null if no diff or unchanged)
@@ -103,58 +93,34 @@
     }
   }
 
-  // Toggle collapse recursively on double-click
+  // Toggle collapse recursively on double-click (collapsed expands all, and vice versa)
   function toggle_collapse_recursive(event: MouseEvent) {
     event.stopPropagation()
-    if (ctx && expandable) {
-      // If collapsed, expand all; if expanded, collapse all
-      ctx.toggle_collapse_recursive(path, !is_collapsed)
-    }
-  }
-
-  // Focus this node
-  function focus_node() {
-    ctx?.set_focused(path)
+    if (ctx && expandable) ctx.toggle_collapse_recursive(path, !is_collapsed)
   }
 
-  // Get children based on value type
-  function get_children(): { key: string | number; value: unknown }[] {
-    if (!expandable) return []
-
+  // Children as { key, value } pairs based on value type (Map entries are wrapped so
+  // key and value render as an expandable pair; Set values get numeric keys)
+  let children = $derived.by((): { key: string | number; value: unknown }[] => {
     if (value_type === `array`) {
       return (value as unknown[]).map((val, idx) => ({ key: idx, value: val }))
     }
-
     if (value_type === `object`) {
-      let keys = Object.keys(value as Record<string, unknown>)
-      if (ctx?.settings.sort_keys) {
-        keys = keys.sort()
-      }
-      return keys.map((key) => ({
-        key,
-        value: (value as Record<string, unknown>)[key],
-      }))
+      const keys = Object.keys(value as Record<string, unknown>)
+      if (ctx?.settings.sort_keys) keys.sort()
+      return keys.map((key) => ({ key, value: (value as Record<string, unknown>)[key] }))
     }
-
     if (value_type === `map`) {
-      const map = value as Map<unknown, unknown>
-      return Array.from(map.entries()).map(([key, val], idx) => ({
+      return Array.from(value as Map<unknown, unknown>, ([key, val], idx) => ({
         key: idx,
         value: { key, value: val },
       }))
     }
-
     if (value_type === `set`) {
-      return Array.from(value as Set<unknown>).map((val, idx) => ({
-        key: idx,
-        value: val,
-      }))
+      return Array.from(value as Set<unknown>, (val, idx) => ({ key: idx, value: val }))
     }
-
     return []
-  }
-
-  let children = $derived(get_children())
+  })
 
   // Ghost children: removed entries from diff (pre-computed in JsonTree for O(1) lookup)
   let ghost_children = $derived.by(() => {
@@ -191,9 +157,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()
@@ -235,7 +199,7 @@
       event.stopPropagation()
       ctx?.toggle_select(path, event.shiftKey)
     } else {
-      focus_node()
+      ctx?.set_focused(path)
     }
   }}
   onauxclick={(event) => {
@@ -299,10 +263,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 +332,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 +458,9 @@
       color: var(--jt-number, light-dark(#098658, #b5cea8));
     }
   }
-  .colon, .comma, .bracket {
+  .colon,
+  .comma,
+  .bracket {
     color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
   }
   .colon {