matterviz 0.3.6 → 0.3.7

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

@@ -0,0 +1,548 @@
+<script lang="ts">
+  import Icon from '../../Icon.svelte'
+  import { getContext, onMount } from 'svelte'
+  // oxlint-disable-next-line import/no-self-import -- recursive Svelte component
+  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)
+    }
+  })
+
+  // 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
+
+    // Check if explicitly force-expanded (overrides auto-fold)
+    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
+
+    // Check auto-fold thresholds
+    if (value_type === `array`) {
+      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
+    }
+
+    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)
+    }
+  }
+
+  // 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)
+    }
+  }
+
+  // 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 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],
+      }))
+    }
+
+    if (value_type === `map`) {
+      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 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 []
+    // 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: 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)
+    }
+  }
+
+  // Element reference for focus management
+  let node_element: HTMLDivElement | undefined = $state()
+
+  $effect(() => {
+    if (is_focused && node_element) {
+      node_element.focus()
+    }
+  })
+</script>
+
+<div
+  bind:this={node_element}
+  class="json-node depth-{depth}"
+  class:collapsed={is_collapsed}
+  class:expandable
+  class:focused={is_focused}
+  class:selected={is_selected}
+  class:current-match={is_current_match}
+  class:diff-added={diff_status === `added`}
+  class:diff-removed={diff_status === `removed`}
+  class:diff-changed={diff_status === `changed`}
+  class:sticky-header={expandable && !is_collapsed && depth <= 2}
+  style:--jt-sticky-depth={depth}
+  data-path={path}
+  role="treeitem"
+  aria-expanded={expandable ? !is_collapsed : undefined}
+  aria-selected={is_selected}
+  tabindex={is_focused ? 0 : -1}
+  onclick={(event) => {
+    if (event.ctrlKey || event.metaKey) {
+      event.stopPropagation()
+      ctx?.toggle_select(path, event.shiftKey)
+    } else {
+      focus_node()
+    }
+  }}
+  onauxclick={(event) => {
+    if (event.button === 1) {
+      event.preventDefault()
+      ctx?.copy_path(path, event)
+    }
+  }}
+  oncontextmenu={(event) => {
+    ctx?.show_context_menu(event, path, value, expandable, is_collapsed)
+  }}
+  ondblclick={toggle_collapse_recursive}
+  onkeydown={handle_keydown}
+>
+  <span class="node-content">
+    {#if expandable}
+      <button
+        type="button"
+        class="collapse-toggle"
+        onclick={toggle_collapse}
+        aria-label={is_collapsed ? `Expand` : `Collapse`}
+      >
+        <span class="arrow" class:collapsed={is_collapsed}>▼</span>
+      </button>
+    {:else}
+      <span class="no-toggle"></span>
+    {/if}
+
+    {#if node_key !== null}
+      <button
+        type="button"
+        class="node-key"
+        class:array-index={typeof node_key === `number`}
+        tabindex="-1"
+        onclick={(event) => {
+          event.stopPropagation()
+          if (event.ctrlKey || event.metaKey) {
+            ctx?.toggle_select(path, event.shiftKey)
+          } else if (event.shiftKey) {
+            ctx?.copy_path(path, event)
+          } else if (expandable && is_collapsed) {
+            ctx?.toggle_collapse(path, true)
+          } else {
+            ctx?.copy_value(path, value, event)
+          }
+        }}
+        onauxclick={(event) => {
+          if (event.button === 1) {
+            event.preventDefault()
+            event.stopPropagation()
+            ctx?.copy_path(path, event)
+          }
+        }}
+      >
+        {#if typeof node_key === `number` && ctx?.settings.show_array_indices}
+          <span class="index">{node_key}</span>
+        {:else if typeof node_key === `string`}
+          "{node_key}"
+        {/if}
+        <span class="action-hint">
+          {#if expandable && is_collapsed}
+            ▸
+          {:else}
+            <Icon
+              icon="Copy"
+              style="width: 10px; height: 10px; vertical-align: baseline"
+            />
+          {/if}
+        </span>
+      </button>
+      <span class="colon">:</span>
+    {/if}
+
+    {#if expandable}
+      <span class="bracket open">{open_bracket}</span>
+      {#if is_collapsed}
+        <button type="button" class="preview" tabindex="-1" onclick={toggle_collapse}>
+          {format_preview(value)}
+        </button>
+        <span class="size-hint">{byte_size}</span>
+        <span class="bracket close">{close_bracket}</span>
+      {/if}
+    {:else}
+      <JsonValue {value} {value_type} {path} />
+    {/if}
+
+    {#if expandable && !is_collapsed}
+      <button
+        type="button"
+        class="collapse-level-btn"
+        title="Collapse children to this level"
+        tabindex="-1"
+        onclick={(event) => {
+          event.stopPropagation()
+          ctx?.collapse_children_only(path)
+        }}
+      >
+        ⊟
+      </button>
+    {/if}
+  </span>
+
+  {#if !is_last && (!expandable || is_collapsed)}
+    <span class="comma">,</span>
+  {/if}
+
+  {#if expandable && !is_collapsed}
+    <div class="children" role="group">
+      {#each children as child, idx (child.key)}
+        <JsonNode
+          node_key={child.key}
+          value={child.value}
+          path={build_path(path, child.key)}
+          depth={depth + 1}
+          is_last={idx === children.length - 1 && ghost_children.length === 0}
+        />
+      {/each}
+      {#each ghost_children as ghost (ghost.key)}
+        <div
+          class="json-node ghost"
+          data-path={ghost.path}
+          role="treeitem"
+          aria-selected="false"
+          aria-disabled="true"
+        >
+          <span class="node-content">
+            <span class="no-toggle"></span>
+            <span style="color: var(--jt-key)">
+              {#if typeof ghost.key === `number`}
+                <span class="index">{ghost.key}</span>
+              {:else}
+                "{ghost.key}"
+              {/if}
+            </span>
+            <span class="colon">:</span>
+            <span style="color: var(--jt-preview); font-style: italic">{
+              format_preview(ghost.value)
+            }</span>
+          </span>
+        </div>
+      {/each}
+    </div>
+    <span class="bracket close">{close_bracket}</span>
+    {#if !is_last}
+      <span class="comma">,</span>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .json-node {
+    font-family: var(--jt-font-family, 'SF Mono', Monaco, 'Courier New', monospace);
+    font-size: var(--jt-font-size, 13px);
+    line-height: var(--jt-line-height, 1.5);
+    outline: none;
+    &: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;
+    align-items: baseline;
+    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;
+    }
+  }
+  .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;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    margin: 0;
+    color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
+    flex-shrink: 0;
+    &:hover {
+      color: light-dark(#000, #fff);
+    }
+  }
+  .arrow {
+    display: inline-block;
+    font-size: 0.7em;
+    transition: transform 0.15s ease;
+    &.collapsed {
+      transform: rotate(-90deg);
+    }
+  }
+  .no-toggle {
+    display: inline-block;
+    width: 1em;
+    flex-shrink: 0;
+  }
+  .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));
+    }
+  }
+  .colon, .comma, .bracket {
+    color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
+  }
+  .colon {
+    margin-right: 4px;
+  }
+  .preview {
+    color: var(--jt-preview, light-dark(#808080, #808080));
+    font-style: italic;
+    margin: 0 4px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .children {
+    padding-left: var(--jt-indent, 1.2em);
+    border-left: 1px solid
+      var(--jt-indent-guide, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
+    margin-left: 0.5em;
+  }
+  .action-hint {
+    opacity: 0;
+    font-size: 0.8em;
+    margin-left: 2px;
+    transition: opacity 0.15s;
+    color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
+  }
+  .size-hint {
+    font-size: 0.8em;
+    color: var(--jt-preview, light-dark(#808080, #808080));
+    margin-left: 4px;
+    opacity: 0.6;
+  }
+  .collapse-level-btn {
+    opacity: 0;
+    padding: 0 2px;
+    font-size: 0.85em;
+    color: var(--jt-arrow, light-dark(#6e6e6e, #858585));
+    transition: opacity 0.15s;
+    margin-left: 4px;
+    &:hover {
+      opacity: 1;
+      color: light-dark(#000, #fff);
+    }
+  }
+  .ghost {
+    opacity: 0.5;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import JsonNode from './JsonNode.svelte';
+type $$ComponentProps = {
+    node_key?: string | number | null;
+    value: unknown;
+    path: string;
+    depth: number;
+    is_last?: boolean;
+};
+declare const JsonNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type JsonNode = ReturnType<typeof JsonNode>;
+export default JsonNode;