matterviz 0.4.2 → 0.4.3

package/dist/labels.js

@@ -141,7 +141,7 @@ export const format_num = (num, fmt) => {
     return format(fmt)(num);
 };
 // Format a 3D vector as "(x, y, z)" with configurable precision
-export const format_vec3 = (vec, fmt_spec = `.4~`) => `(${format_num(vec[0], fmt_spec)}, ${format_num(vec[1], fmt_spec)}, ${format_num(vec[2], fmt_spec)})`;
+export const format_vec3 = (vec, fmt_spec = `.3~`) => `(${format_num(vec[0], fmt_spec)}, ${format_num(vec[1], fmt_spec)}, ${format_num(vec[2], fmt_spec)})`;
 const BYTE_UNITS = [`B`, `KiB`, `MiB`, `GiB`, `TiB`, `PiB`];
 // Format file sizes using IEC binary units (1024 factor).
 export const format_bytes = (bytes) => {

package/dist/layout/InfoCard.svelte

@@ -26,14 +26,12 @@
     data = [],
     title = ``,
     fallback = ``,
-    fmt = `.2f`,
+    fmt: default_fmt = `.2f`,
     as = `section`,
     title_snippet,
     fallback_snippet,
     ...rest
   }: Props = $props()
-
-  let default_fmt = $derived(fmt) // rename fmt to default_fmt for internal use
 </script>
 
 <svelte:element this={as} {...rest} class={[`info-card`, rest.class]}>

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,15 +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()
 
@@ -30,17 +28,10 @@
     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
@@ -49,45 +40,50 @@
   // unique per-instance id so aria-labelledby stays valid with multiple sections on a page
   const title_id = `settings-section-title-${crypto.randomUUID()}`
 
-  // 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]
-
-      // 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
-
-      // 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()
@@ -144,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/ViewerChrome.svelte

@@ -70,6 +70,8 @@
     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));
+    /* 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;
@@ -99,7 +101,11 @@
     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/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(() => {
@@ -233,7 +199,7 @@
       event.stopPropagation()
       ctx?.toggle_select(path, event.shiftKey)
     } else {
-      focus_node()
+      ctx?.set_focused(path)
     }
   }}
   onauxclick={(event) => {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '../../Icon.svelte'
   import { download } from '../../io/fetch'
+  import { parse_path } from '../../json-path'
   import { make_change_detector } from '../../utils'
   import { setContext, tick } from 'svelte'
   import { highlight_matches, tooltip } from 'svelte-multiselect/attachments'
@@ -16,7 +17,6 @@
     find_matching_paths,
     format_preview,
     get_ancestor_paths,
-    parse_path,
     serialize_for_copy,
   } from './utils'
 
@@ -147,31 +147,10 @@
       current_match_index = -1
       return
     }
-    const paths_to_expand = new Set<string>()
-    for (const match of search_matches) {
-      for (const ancestor of get_ancestor_paths(match)) {
-        paths_to_expand.add(ancestor)
-      }
-    }
-    let collapsed_changed = false
-    let force_expanded_changed = false
-    for (const path_to_expand of paths_to_expand) {
-      if (collapsed_paths.has(path_to_expand)) {
-        collapsed_paths.delete(path_to_expand)
-        collapsed_changed = true
-      }
-      // Also add to force_expanded to override auto-fold thresholds (depth/size)
-      if (!force_expanded.has(path_to_expand)) {
-        force_expanded.add(path_to_expand)
-        force_expanded_changed = true
-      }
-    }
-    if (collapsed_changed) {
-      collapsed_paths = new SvelteSet(collapsed_paths)
-    }
-    if (force_expanded_changed) {
-      force_expanded = new SvelteSet(force_expanded)
-    }
+    const paths_to_expand = new Set([...search_matches].flatMap(get_ancestor_paths))
+    // Also add to force_expanded to override auto-fold thresholds (depth/size)
+    // Only reassign (which rerenders every node) the sets that actually changed
+    set_collapsed(paths_to_expand, () => false)
     // Wait for DOM to update before scrolling to match
     await tick()
     if (sorted_matches.length > 0) {
@@ -213,32 +192,34 @@
   // Previous values map for change detection
   const prev_values = new Map<string, unknown>()
 
-  // Toggle collapse - tracks force_expanded to override auto-fold thresholds
-  function toggle_collapse(path: string, is_currently_collapsed: boolean): void {
-    if (is_currently_collapsed) {
-      collapsed_paths.delete(path)
-      force_expanded.add(path)
-    } else {
-      force_expanded.delete(path)
-      collapsed_paths.add(path)
+  // Move each path into collapsed or force_expanded (which overrides auto-fold
+  // thresholds), then reassign only the sets that changed (reassignment rerenders
+  // every node subscribed to the set's identity)
+  function set_collapsed(paths: Iterable<string>, collapse: (path: string) => boolean) {
+    let collapsed_changed = false
+    let force_expanded_changed = false
+    for (const path of paths) {
+      if (collapse(path)) {
+        force_expanded_changed = force_expanded.delete(path) || force_expanded_changed
+        collapsed_changed = !collapsed_paths.has(path) || collapsed_changed
+        collapsed_paths.add(path)
+      } else {
+        collapsed_changed = collapsed_paths.delete(path) || collapsed_changed
+        force_expanded_changed = !force_expanded.has(path) || force_expanded_changed
+        force_expanded.add(path)
+      }
     }
-    collapsed_paths = new SvelteSet(collapsed_paths)
-    force_expanded = new SvelteSet(force_expanded)
+    if (collapsed_changed) collapsed_paths = new SvelteSet(collapsed_paths)
+    if (force_expanded_changed) force_expanded = new SvelteSet(force_expanded)
+  }
+
+  function toggle_collapse(path: string, is_currently_collapsed: boolean): void {
+    set_collapsed([path], () => !is_currently_collapsed)
   }
 
   // Toggle collapse recursively for all descendants
   function toggle_collapse_recursive(path: string, collapse: boolean): void {
-    for (const desc of get_descendants(path)) {
-      if (collapse) {
-        force_expanded.delete(desc)
-        collapsed_paths.add(desc)
-      } else {
-        collapsed_paths.delete(desc)
-        force_expanded.add(desc)
-      }
-    }
-    collapsed_paths = new SvelteSet(collapsed_paths)
-    force_expanded = new SvelteSet(force_expanded)
+    set_collapsed(get_descendants(path), () => collapse)
   }
 
   // Get all descendant paths of a given path (including the path itself)
@@ -358,19 +339,9 @@
   // Pre-compute ghost children map for O(1) lookup per node
   let ghost_map = $derived(diff_map ? build_ghost_map(diff_map) : new Map())
 
-  // Collapse all descendants but keep the given node expanded (single batch)
+  // Collapse all descendants but keep the given node expanded
   function collapse_children_only(target_path: string): void {
-    for (const desc of get_descendants(target_path)) {
-      if (desc === target_path) {
-        collapsed_paths.delete(desc)
-        force_expanded.add(desc)
-      } else {
-        force_expanded.delete(desc)
-        collapsed_paths.add(desc)
-      }
-    }
-    collapsed_paths = new SvelteSet(collapsed_paths)
-    force_expanded = new SvelteSet(force_expanded)
+    set_collapsed(get_descendants(target_path), (desc) => desc !== target_path)
   }
 
   // Context menu handlers
@@ -512,6 +483,13 @@
 
   // Keyboard navigation at tree level
   function handle_tree_keydown(event: KeyboardEvent) {
+    // F3 navigates search matches (search input handles its own F3/Enter)
+    if (event.key === `F3`) {
+      event.preventDefault()
+      if (event.shiftKey) go_to_prev_match()
+      else go_to_next_match()
+      return
+    }
     // Escape closes context menu first, then clears selection
     if (event.key === `Escape`) {
       if (context_menu_state) {
@@ -600,15 +578,7 @@
   role="tree"
   aria-label="JSON tree viewer"
   {...rest}
-  onkeydown={(event) => {
-    handle_tree_keydown(event)
-    // F3 at tree level for match navigation
-    if (event.key === `F3`) {
-      event.preventDefault()
-      if (event.shiftKey) go_to_prev_match()
-      else go_to_next_match()
-    }
-  }}
+  onkeydown={handle_tree_keydown}
 >
   {#if show_header}
     <header class="json-tree-header">
@@ -686,30 +656,16 @@
         <button type="button" onclick={collapse_all} title="Collapse all" {@attach tooltip()}>
           <Icon icon="Collapse" style="width: 14px; height: 14px" />
         </button>
-        <button
-          type="button"
-          onclick={() => collapse_to_level(1)}
-          title="Collapse to level 1"
-          {@attach tooltip()}
-        >
-          1
-        </button>
-        <button
-          type="button"
-          onclick={() => collapse_to_level(2)}
-          title="Collapse to level 2"
-          {@attach tooltip()}
-        >
-          2
-        </button>
-        <button
-          type="button"
-          onclick={() => collapse_to_level(3)}
-          title="Collapse to level 3"
-          {@attach tooltip()}
-        >
-          3
-        </button>
+        {#each [1, 2, 3] as level (level)}
+          <button
+            type="button"
+            onclick={() => collapse_to_level(level)}
+            title="Collapse to level {level}"
+            {@attach tooltip()}
+          >
+            {level}
+          </button>
+        {/each}
       </div>
       <div class="divider"></div>
       <div class="controls">
@@ -910,9 +866,6 @@
     border-radius: var(--jt-border-radius, 4px);
     overflow: hidden;
   }
-  /* --jt-header-bg, --jt-header-border, --jt-btn-bg, --jt-btn-hover-bg, --jt-btn-active-bg
-     intentionally removed in favor of transparent/opacity-based button styling.
-     Use --jt-hover-bg to customize the button hover background. */
   .json-tree-header {
     display: flex;
     align-items: center;

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

@@ -28,8 +28,6 @@
 
   // Expanded state for long strings
   let is_expanded = $state(false)
-
-  // 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)
 
@@ -84,7 +82,6 @@
 
   // Format display value - strings use custom truncation, others use format_preview
   let display_value = $derived.by(() => {
-    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}"`
@@ -92,10 +89,6 @@
     return format_preview(value)
   })
 
-  // Check if string is truncated
-  let is_truncated = $derived(is_long_string && !is_expanded)
-
-  // Toggle string expansion
   function toggle_expand(event: MouseEvent) {
     event.stopPropagation()
     is_expanded = !is_expanded
@@ -186,18 +179,14 @@
     {:else}
       {display_value}
     {/if}
-    {#if is_truncated}
+    {#if is_long_string}
       <button
         type="button"
         class="expand-btn"
         onclick={toggle_expand}
-        title="Show full string"
+        title={is_expanded ? `Collapse string` : `Show full string`}
       >
-        ...
-      </button>
-    {:else if is_long_string && is_expanded}
-      <button type="button" class="expand-btn" onclick={toggle_expand} title="Collapse string">
-        ▲
+        {is_expanded ? `▲` : `...`}
       </button>
     {/if}
     {#if ctx?.settings.show_data_types && value_type !== `null` && value_type !== `undefined`}
@@ -259,10 +248,6 @@
     &.error {
       color: var(--jt-error, light-dark(#a31515, #f48771));
     }
-    &.circular {
-      color: var(--jt-circular, light-dark(#808080, #808080));
-      font-style: italic;
-    }
     &.changed {
       animation: value-change 1s ease-out;
     }

package/dist/layout/json-tree/utils.d.ts

@@ -4,15 +4,12 @@ export declare const is_expandable_type: (value_type: JsonValueType) => boolean;
 export declare const is_primitive_type: (value_type: JsonValueType) => boolean;
 export declare const is_expandable: (value: unknown) => boolean;
 export declare function get_child_count(value: unknown): number;
-export declare function format_path(segments: (string | number)[]): string;
-export declare function build_path(parent_path: string, key: string | number): string;
 export declare function serialize_for_copy(value: unknown): string;
 export declare function format_preview(value: unknown, max_length?: number): string;
 export declare function matches_search(path: string, key: string | number | null, value: unknown, query: string): boolean;
 export declare function collect_all_paths(value: unknown, current_path?: string, max_depth?: number, current_depth?: number, seen?: WeakSet<object>): string[];
 export declare function find_matching_paths(value: unknown, query: string, current_path?: string, current_key?: string | number | null, seen?: WeakSet<object>): Set<string>;
 export declare function get_ancestor_paths(path: string): string[];
-export declare function parse_path(path: string): (string | number)[];
 export declare function values_equal(val_a: unknown, val_b: unknown): boolean;
 export declare function parse_edited_value(text: string): unknown;
 export declare function set_at_path(root: unknown, path_str: string, new_value: unknown, root_label?: string): unknown;