matterviz 0.3.2 → 0.3.3

package/dist/layout/SettingsSection.svelte

@@ -1,64 +1,94 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { untrack } from 'svelte';
-let { title, current_values, children, on_reset = () => { }, ...rest } = $props();
-// Create a deep copy of current_values on mount to use as reference values
-function deep_copy(obj) {
-    if (obj === null || typeof obj !== `object`)
-        return obj;
-    if (obj instanceof Date)
-        return new Date(obj.getTime());
-    if (obj instanceof RegExp)
-        return new RegExp(obj);
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { Snippet } from 'svelte'
+  import { untrack } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    title,
+    current_values,
+    children,
+    on_reset = () => {},
+    ...rest
+  }: 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>
+      }]
+    >
+    on_reset?: () => void
+  } = $props()
+
+  // Create a deep copy of current_values on mount to use as reference values
+  function deep_copy(obj: unknown): unknown {
+    if (obj === null || typeof obj !== `object`) return obj
+    if (obj instanceof Date) return new Date(obj.getTime())
+    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);
+      return obj.map((item) =>
+        typeof item === `object` && item !== null ? deep_copy(item) : item
+      )
     }
-    const copy = {};
-    for (const [key, value] of Object.entries(obj)) {
-        copy[key] = typeof value === `object` && value !== null
-            ? deep_copy(value)
-            : value;
+
+    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;
-}
-// Capture initial values once at mount - must NOT be $derived or it tracks changes
-const reference_values = untrack(() => deep_copy(current_values));
-// Check if any values have changed from reference values
-let has_changes = $derived.by(() => {
+    return copy
+  }
+
+  // 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];
-        // 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;
+      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
+      }
     }
-    return false;
-});
-function handle_reset(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    on_reset();
-}
+    return false
+  })
+
+  function handle_reset(event: MouseEvent) {
+    event.stopPropagation()
+    event.preventDefault()
+    on_reset()
+  }
 </script>
 
 <h4 id="settings-section-title">

package/dist/layout/SubpageGrid.svelte

@@ -1,5 +1,13 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-const { title, subtitle, subpages } = $props();
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { IconName } from '../icons'
+
+  interface Props {
+    title: string
+    subtitle: string
+    subpages: { href: string; title: string; description: string; icon: IconName }[]
+  }
+  const { title, subtitle, subpages }: Props = $props()
 </script>
 
 <h1>{title}</h1>

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

@@ -1,169 +1,214 @@
-<script lang="ts">import Icon from '../../Icon.svelte';
-import { getContext, onMount } from 'svelte';
-import JsonNode from './JsonNode.svelte';
-import JsonValue from './JsonValue.svelte';
-import { JSON_TREE_CONTEXT_KEY } from './types';
-import { build_path, estimate_byte_size, format_byte_size, format_preview, get_child_count, get_value_type, is_expandable, } from './utils';
-let { node_key = null, value, path, depth, is_last = true, } = $props();
-const ctx = getContext(JSON_TREE_CONTEXT_KEY);
-onMount(() => {
+<script lang="ts">
+  import Icon from '../../Icon.svelte'
+  import { getContext, onMount } from 'svelte'
+  import JsonNode from './JsonNode.svelte'
+  import JsonValue from './JsonValue.svelte'
+  import type { JsonTreeContext } from './types'
+  import { JSON_TREE_CONTEXT_KEY } from './types'
+  import {
+    build_path,
+    estimate_byte_size,
+    format_byte_size,
+    format_preview,
+    get_child_count,
+    get_value_type,
+    is_expandable,
+  } from './utils'
+
+  let {
+    node_key = null,
+    value,
+    path,
+    depth,
+    is_last = true,
+  }: {
+    node_key?: string | number | null
+    value: unknown
+    path: string
+    depth: number
+    is_last?: boolean
+  } = $props()
+
+  const ctx = getContext<JsonTreeContext>(JSON_TREE_CONTEXT_KEY)
+
+  onMount(() => {
     // Register this path with context for keyboard navigation
     if (ctx && path) {
-        ctx.register_path(path);
-        return () => ctx.unregister_path(path);
+      ctx.register_path(path)
+      return () => ctx.unregister_path(path)
     }
-});
-// 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
-let is_collapsed = $derived.by(() => {
-    if (!expandable)
-        return false;
+  })
+
+  // 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
+  let is_collapsed = $derived.by(() => {
+    if (!expandable) return false
+
     // Check if explicitly collapsed
-    if (ctx?.collapsed.has(path))
-        return true;
+    if (ctx?.collapsed.has(path)) return true
+
     // Check if explicitly force-expanded (overrides auto-fold)
-    if (ctx?.force_expanded.has(path))
-        return false;
+    if (ctx?.force_expanded.has(path)) return false
+
     // If depth >= default_fold_level, default to collapsed
-    const fold_level = ctx?.settings.default_fold_level ?? 2;
-    if (depth >= fold_level)
-        return true;
+    const fold_level = ctx?.settings.default_fold_level ?? 2
+    if (depth >= fold_level) return true
+
     // Check auto-fold thresholds
     if (value_type === `array`) {
-        const threshold = ctx?.settings.auto_fold_arrays ?? 10;
-        if (child_count > threshold)
-            return true;
+      const threshold = ctx?.settings.auto_fold_arrays ?? 10
+      if (child_count > threshold) return true
     }
     if (value_type === `object`) {
-        const threshold = ctx?.settings.auto_fold_objects ?? 20;
-        if (child_count > threshold)
-            return true;
+      const threshold = ctx?.settings.auto_fold_objects ?? 20
+      if (child_count > threshold) return true
     }
-    return false;
-});
-// 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
-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)
-let diff_status = $derived(ctx?.diff_map?.get(path)?.status ?? null);
-// Estimated byte size for collapsed preview (only compute when collapsed)
-let byte_size = $derived(expandable && is_collapsed ? format_byte_size(estimate_byte_size(value)) : ``);
-// Toggle collapse state
-function toggle_collapse(event) {
-    event?.stopPropagation();
+
+    return false
+  })
+
+  // 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
+  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)
+  let diff_status = $derived(ctx?.diff_map?.get(path)?.status ?? null)
+
+  // Estimated byte size for collapsed preview (only compute when collapsed)
+  let byte_size = $derived(
+    expandable && is_collapsed ? format_byte_size(estimate_byte_size(value)) : ``,
+  )
+
+  // Toggle collapse state
+  function toggle_collapse(event?: MouseEvent) {
+    event?.stopPropagation()
     if (ctx && expandable) {
-        ctx.toggle_collapse(path, is_collapsed);
+      ctx.toggle_collapse(path, is_collapsed)
     }
-}
-// Toggle collapse recursively on double-click
-function toggle_collapse_recursive(event) {
-    event.stopPropagation();
+  }
+
+  // Toggle collapse recursively on double-click
+  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);
+      // 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);
-}
-// Get children based on value type
-function get_children() {
-    if (!expandable)
-        return [];
+  }
+
+  // Focus this node
+  function focus_node() {
+    ctx?.set_focused(path)
+  }
+
+  // Get children based on value type
+  function get_children(): Array<{ key: string | number; value: unknown }> {
+    if (!expandable) return []
+
     if (value_type === `array`) {
-        return value.map((val, idx) => ({ key: idx, value: val }));
+      return (value as unknown[]).map((val, idx) => ({ key: idx, value: val }))
     }
+
     if (value_type === `object`) {
-        let keys = Object.keys(value);
-        if (ctx?.settings.sort_keys) {
-            keys = keys.sort();
-        }
-        return keys.map((key) => ({
-            key,
-            value: value[key],
-        }));
+      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],
+      }))
     }
+
     if (value_type === `map`) {
-        const map = value;
-        return Array.from(map.entries()).map(([key, val], idx) => ({
-            key: idx,
-            value: { key, value: val },
-        }));
+      const map = value as Map<unknown, unknown>
+      return Array.from(map.entries()).map(([key, val], idx) => ({
+        key: idx,
+        value: { key, value: val },
+      }))
     }
+
     if (value_type === `set`) {
-        return Array.from(value).map((val, idx) => ({
-            key: idx,
-            value: val,
-        }));
+      return Array.from(value as Set<unknown>).map((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(() => {
-    if (!expandable || is_collapsed)
-        return [];
-    const all_ghosts = ctx?.ghost_map.get(path) ?? [];
-    if (all_ghosts.length === 0)
-        return [];
+
+    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(() => {
+    if (!expandable || is_collapsed) return []
+    const all_ghosts = ctx?.ghost_map.get(path) ?? []
+    if (all_ghosts.length === 0) return []
     // Filter out ghosts whose keys already exist in current children
-    const existing_keys = new Set(children.map((child) => String(child.key)));
-    return all_ghosts.filter((ghost) => !existing_keys.has(String(ghost.key)));
-});
-// Get bracket characters based on type
-let open_bracket = $derived(value_type === `array` ? `[` : `{`);
-let close_bracket = $derived(value_type === `array` ? `]` : `}`);
-// Handle keyboard navigation
-function handle_keydown(event) {
-    if (!is_focused)
-        return;
+    const existing_keys = new Set(children.map((child) => String(child.key)))
+    return all_ghosts.filter((ghost) => !existing_keys.has(String(ghost.key)))
+  })
+
+  // Get bracket characters based on type
+  let open_bracket = $derived(value_type === `array` ? `[` : `{`)
+  let close_bracket = $derived(value_type === `array` ? `]` : `}`)
+
+  // Handle keyboard navigation
+  function handle_keydown(event: KeyboardEvent) {
+    if (!is_focused) return
+
     if (event.key === `Enter` || event.key === ` `) {
-        event.preventDefault();
-        if (expandable) {
-            toggle_collapse();
-        }
-        else {
-            ctx?.copy_value(path, value);
-        }
-    }
-    else if (event.key === `ArrowRight`) {
-        event.preventDefault();
-        if (expandable && is_collapsed) {
-            toggle_collapse();
-        }
-    }
-    else if (event.key === `ArrowLeft`) {
-        event.preventDefault();
-        if (expandable && !is_collapsed) {
-            toggle_collapse();
-        }
-    }
-    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();
-        event.stopPropagation();
-        ctx?.copy_value(path, value);
+      event.preventDefault()
+      if (expandable) {
+        toggle_collapse()
+      } else {
+        ctx?.copy_value(path, value)
+      }
+    } else if (event.key === `ArrowRight`) {
+      event.preventDefault()
+      if (expandable && is_collapsed) {
+        toggle_collapse()
+      }
+    } else if (event.key === `ArrowLeft`) {
+      event.preventDefault()
+      if (expandable && !is_collapsed) {
+        toggle_collapse()
+      }
+    } 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()
+      event.stopPropagation()
+      ctx?.copy_value(path, value)
     }
-}
-// Element reference for focus management
-let node_element = $state();
-$effect(() => {
+  }
+
+  // Element reference for focus management
+  let node_element: HTMLDivElement | undefined = $state()
+
+  $effect(() => {
     if (is_focused && node_element) {
-        node_element.focus();
+      node_element.focus()
     }
-});
+  })
 </script>
 
 <div