matterviz 0.3.1 → 0.3.3

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
@@ -223,9 +268,6 @@ $effect(() => {
         type="button"
         class="node-key"
         class:array-index={typeof node_key === `number`}
-        title={expandable && is_collapsed
-        ? `Click to expand · Shift+click: copy path · Ctrl+click: select`
-        : `Click to copy value · Shift+click: copy path · Ctrl+click: select`}
         tabindex="-1"
         onclick={(event) => {
           event.stopPropagation()
@@ -348,17 +390,50 @@ $effect(() => {
     font-size: var(--jt-font-size, 13px);
     line-height: var(--jt-line-height, 1.5);
     outline: none;
-  }
-  .json-node:focus {
-    outline: none;
-  }
-  .json-node.focused > .node-content {
-    background: var(--jt-focus-bg, light-dark(#e3f2fd, #0d3a58));
-    border-radius: 2px;
-  }
-  .json-node.current-match > .node-content {
-    background: var(--jt-current-match-bg, light-dark(#ffcc80, #8a5600));
-    border-radius: 2px;
+    &:focus {
+      outline: none;
+    }
+    &.focused > .node-content {
+      background: var(--jt-focus-bg, light-dark(#e3f2fd, #0d3a58));
+      border-radius: 2px;
+    }
+    &.current-match > .node-content {
+      background: var(--jt-current-match-bg, light-dark(#ffcc80, #8a5600));
+      border-radius: 2px;
+    }
+    &.selected > .node-content {
+      background: var(--jt-select-bg, light-dark(#bbdefb, #0a3050));
+    }
+    &.diff-added > .node-content {
+      background: var(
+        --jt-diff-added,
+        light-dark(rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.2))
+      );
+    }
+    &.diff-removed > .node-content {
+      background: var(
+        --jt-diff-removed,
+        light-dark(rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.18))
+      );
+      text-decoration: line-through;
+      opacity: 0.7;
+    }
+    &.diff-changed > .node-content {
+      background: var(
+        --jt-diff-changed,
+        light-dark(rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.2))
+      );
+    }
+    &.sticky-header > .node-content {
+      position: sticky;
+      top: calc(var(--jt-sticky-depth) * 20px);
+      z-index: calc(100 - var(--jt-sticky-depth));
+      background: var(--jt-sticky-bg, var(--jt-bg, transparent));
+      display: flex;
+    }
+    &:hover > .node-content > .collapse-level-btn {
+      opacity: 0.5;
+    }
   }
   .node-content {
     display: inline-flex;
@@ -366,14 +441,22 @@ $effect(() => {
     gap: 2px;
     padding: 1px 2px;
     border-radius: 2px;
+    /* Higher specificity than DraggablePane's :where(button) so our reset wins when nested */
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
+    }
   }
-  .node-content :where(button) {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
+  .ghost .node-content {
+    background: var(
+      --jt-diff-removed,
+      light-dark(rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.18))
+    );
+    text-decoration: line-through;
   }
   .collapse-toggle {
     display: inline-flex;
@@ -384,17 +467,17 @@ $effect(() => {
     margin: 0;
     color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
     flex-shrink: 0;
-  }
-  .collapse-toggle:hover {
-    color: light-dark(#000, #fff);
+    &:hover {
+      color: light-dark(#000, #fff);
+    }
   }
   .arrow {
     display: inline-block;
     font-size: 0.7em;
     transition: transform 0.15s ease;
-  }
-  .arrow.collapsed {
-    transform: rotate(-90deg);
+    &.collapsed {
+      transform: rotate(-90deg);
+    }
   }
   .no-toggle {
     display: inline-block;
@@ -403,30 +486,29 @@ $effect(() => {
   }
   .node-key {
     color: var(--jt-key, light-dark(#001080, #9cdcfe));
+    &:hover {
+      text-decoration: underline;
+      .action-hint {
+        opacity: 0.6;
+      }
+    }
+    &.array-index .index {
+      color: var(--jt-number, light-dark(#098658, #b5cea8));
+    }
   }
-  .node-key:hover {
-    text-decoration: underline;
-  }
-  .node-key.array-index .index {
-    color: var(--jt-number, light-dark(#098658, #b5cea8));
+  .colon, .comma, .bracket {
+    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
   }
   .colon {
-    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
     margin-right: 4px;
   }
-  .bracket {
-    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
-  }
   .preview {
     color: var(--jt-preview, light-dark(#808080, #808080));
     font-style: italic;
     margin: 0 4px;
-  }
-  .preview:hover {
-    text-decoration: underline;
-  }
-  .comma {
-    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
+    &:hover {
+      text-decoration: underline;
+    }
   }
   .children {
     padding-left: var(--jt-indent, 1.2em);
@@ -434,39 +516,6 @@ $effect(() => {
       var(--jt-indent-guide, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
     margin-left: 0.5em;
   }
-  .json-node.selected > .node-content {
-    background: var(--jt-select-bg, light-dark(#bbdefb, #0a3050));
-  }
-  .json-node.diff-added > .node-content {
-    background: var(
-      --jt-diff-added,
-      light-dark(rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.2))
-    );
-  }
-  .json-node.diff-removed > .node-content,
-  .ghost .node-content {
-    background: var(
-      --jt-diff-removed,
-      light-dark(rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.18))
-    );
-    text-decoration: line-through;
-  }
-  .json-node.diff-removed > .node-content {
-    opacity: 0.7;
-  }
-  .json-node.diff-changed > .node-content {
-    background: var(
-      --jt-diff-changed,
-      light-dark(rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.2))
-    );
-  }
-  .json-node.sticky-header > .node-content {
-    position: sticky;
-    top: calc(var(--jt-sticky-depth) * 20px);
-    z-index: calc(100 - var(--jt-sticky-depth));
-    background: var(--jt-sticky-bg, var(--jt-bg, light-dark(white, #1e1e1e)));
-    display: flex;
-  }
   .action-hint {
     opacity: 0;
     font-size: 0.8em;
@@ -474,9 +523,6 @@ $effect(() => {
     transition: opacity 0.15s;
     color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
   }
-  .node-key:hover .action-hint {
-    opacity: 0.6;
-  }
   .size-hint {
     font-size: 0.8em;
     color: var(--jt-preview, light-dark(#808080, #808080));
@@ -490,13 +536,10 @@ $effect(() => {
     color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
     transition: opacity 0.15s;
     margin-left: 4px;
-  }
-  .json-node:hover > .node-content > .collapse-level-btn {
-    opacity: 0.5;
-  }
-  .collapse-level-btn:hover {
-    opacity: 1;
-    color: light-dark(#000, #fff);
+    &:hover {
+      opacity: 1;
+      color: light-dark(#000, #fff);
+    }
   }
   .ghost {
     opacity: 0.5;