matterviz 0.3.6 → 0.3.7

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

@@ -0,0 +1,1230 @@
+<script lang="ts">
+  import Icon from '../../Icon.svelte'
+  import { download } from '../../io/fetch'
+  import { make_change_detector } from '../../utils'
+  import { setContext, tick } from 'svelte'
+  import { highlight_matches, tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteSet } from 'svelte/reactivity'
+  import JsonNode from './JsonNode.svelte'
+  import type {
+    CopyEventPosition,
+    DiffEntry,
+    JsonTreeContext,
+    JsonTreeProps,
+  } from './types'
+  import { JSON_TREE_CONTEXT_KEY } from './types'
+  import {
+    build_ghost_map,
+    collect_all_paths,
+    compute_diff,
+    find_matching_paths,
+    format_preview,
+    get_ancestor_paths,
+    parse_path,
+    serialize_for_copy,
+  } from './utils'
+
+  // Constant set for arrow key detection (avoid allocating on every keydown)
+  const ARROW_KEYS = new Set([`ArrowDown`, `ArrowUp`, `ArrowLeft`, `ArrowRight`])
+  // Shared empty set for when there's no search query (avoid allocation on every derivation)
+  const EMPTY_MATCHES = new SvelteSet<string>()
+
+  let {
+    value,
+    root_label,
+    default_fold_level = 2,
+    auto_fold_arrays = 10,
+    auto_fold_objects = 20,
+    collapsed_paths = $bindable(new SvelteSet<string>()),
+    show_header = true,
+    show_data_types = $bindable(false),
+    show_array_indices = $bindable(true),
+    sort_keys = false,
+    max_string_length = 200,
+    highlight_changes = true,
+    onselect,
+    oncopy,
+    download_filename,
+    compare_value,
+    editable = false,
+    onchange,
+    ...rest
+  }: JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`> =
+    $props()
+
+  // Internal state
+  let search_query = $state(``)
+  let search_input_value = $state(``)
+  let focused_path = $state<string | null>(null)
+  // Use Set for O(1) lookup/add/delete instead of O(n) array operations
+  let registered_paths_set = $state(new Set<string>())
+  let registered_paths_list = $state<string[]>([]) // ordered list for keyboard nav
+  let copy_feedback_path = $state<string | null>(null)
+  let copy_feedback_error = $state(false)
+  let copy_feedback_timeout: ReturnType<typeof setTimeout> | undefined
+  // Track paths explicitly expanded (overrides auto-fold thresholds)
+  let force_expanded = $state(new SvelteSet<string>())
+  // Current match index for navigation (0-based, -1 means no selection)
+  let current_match_index = $state(-1)
+  // Reference to the content container for scrolling
+  let content_element: HTMLDivElement | undefined = $state()
+  // Reference to the search input for focus management
+  let search_input_element: HTMLInputElement | undefined = $state()
+  // Context menu state (null when closed)
+  let context_menu_state = $state<
+    {
+      x: number
+      y: number
+      path: string
+      value: unknown
+      expandable: boolean
+      is_collapsed: boolean
+    } | null
+  >(null)
+  // Pinned paths for quick reference
+  let pinned_paths = $state(new SvelteSet<string>())
+  // Selection state for bulk operations
+  let selected_paths = $state(new SvelteSet<string>())
+  let last_selected_path = $state<string | null>(null)
+  // Copy feedback positioning (null = use default corner position)
+  let copy_feedback_pos = $state<{ x: number; y: number } | null>(null)
+
+  const value_changed = make_change_detector()
+  $effect.pre(() => {
+    if (!value_changed(value)) return
+    focused_path = null
+    registered_paths_set = new Set()
+    registered_paths_list = []
+    copy_feedback_path = null
+    copy_feedback_error = false
+    context_menu_state = null
+    force_expanded = new SvelteSet()
+    const valid_paths = new SvelteSet(collect_all_paths(value, root_label ?? ``))
+    collapsed_paths = new SvelteSet([...collapsed_paths].filter((path) => valid_paths.has(path)))
+    pinned_paths = new SvelteSet()
+    selected_paths = new SvelteSet()
+    last_selected_path = null
+    current_match_index = -1
+    prev_values.clear()
+    if (search_query) queueMicrotask(() => expand_to_matches())
+  })
+
+  // Debounce search input
+  let search_debounce_timeout: ReturnType<typeof setTimeout> | undefined
+
+  function handle_search_input(event: Event & { currentTarget: HTMLInputElement }) {
+    search_input_value = event.currentTarget.value
+
+    if (search_debounce_timeout) clearTimeout(search_debounce_timeout)
+    search_debounce_timeout = setTimeout(() => {
+      search_query = search_input_value
+      // queueMicrotask lets derived search_matches update before expand_to_matches runs
+      queueMicrotask(() => expand_to_matches())
+    }, 150)
+  }
+
+  // Root path used everywhere - avoids repeating `root_label ?? ''`
+  let root_path = $derived(root_label ?? ``)
+
+  // Compute search matches
+  let search_matches = $derived.by(() => {
+    if (!search_query) return EMPTY_MATCHES
+    return new SvelteSet(find_matching_paths(value, search_query, root_path))
+  })
+
+  // Sorted matches list for navigation (maintains DOM order via registered_paths_list)
+  let sorted_matches = $derived.by(() => {
+    if (search_matches.size === 0) return []
+    // Filter registered paths to only include matches, preserving DOM order
+    return registered_paths_list.filter((path) => search_matches.has(path))
+  })
+
+  // Current match path (the one being navigated to)
+  let current_match_path = $derived.by(() => {
+    if (sorted_matches.length === 0 || current_match_index < 0) return null
+    return sorted_matches[current_match_index] ?? null
+  })
+
+  // Auto-expand ancestors of search matches when search query changes
+  // This is called manually from the search input handler to avoid reactivity issues
+  async function expand_to_matches(): Promise<void> {
+    if (search_matches.size === 0) {
+      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)
+    }
+    // Wait for DOM to update before scrolling to match
+    await tick()
+    if (sorted_matches.length > 0) {
+      // Reset to first match if no selection or index is out of bounds
+      if (current_match_index < 0 || current_match_index >= sorted_matches.length) {
+        current_match_index = 0
+      }
+      scroll_to_current_match()
+    }
+  }
+
+  // Scroll the current match into view
+  function scroll_to_current_match(): void {
+    if (!current_match_path || !content_element) return
+    // Find the element with the matching path using data attribute
+    const match_element = content_element.querySelector(
+      `[data-path="${CSS.escape(current_match_path)}"]`,
+    )
+    if (match_element) {
+      match_element.scrollIntoView({ behavior: `smooth`, block: `center` })
+    }
+  }
+
+  // Navigate to next match
+  function go_to_next_match(): void {
+    if (sorted_matches.length === 0) return
+    current_match_index = (current_match_index + 1) % sorted_matches.length
+    scroll_to_current_match()
+  }
+
+  // Navigate to previous match
+  function go_to_prev_match(): void {
+    if (sorted_matches.length === 0) return
+    current_match_index = (current_match_index - 1 + sorted_matches.length) %
+      sorted_matches.length
+    scroll_to_current_match()
+  }
+
+  // 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)
+    }
+    collapsed_paths = new SvelteSet(collapsed_paths)
+    force_expanded = new SvelteSet(force_expanded)
+  }
+
+  // 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)
+  }
+
+  // Get all descendant paths of a given path (including the path itself)
+  function get_descendants(target_path: string): string[] {
+    const all_paths = collect_all_paths(value, root_path)
+    const descendants = target_path === `` ? all_paths : all_paths.filter(
+      (entry) =>
+        entry === target_path || entry.startsWith(target_path + `.`) ||
+        entry.startsWith(target_path + `[`),
+    )
+    return descendants.includes(target_path)
+      ? descendants
+      : [target_path, ...descendants]
+  }
+
+  function expand_all(): void {
+    force_expanded = new SvelteSet(collect_all_paths(value, root_path))
+    collapsed_paths = new SvelteSet()
+  }
+
+  function collapse_all(): void {
+    force_expanded = new SvelteSet()
+    collapsed_paths = new SvelteSet(collect_all_paths(value, root_path))
+  }
+
+  function collapse_to_level(level: number): void {
+    const all_paths = collect_all_paths(value, root_path)
+    const new_collapsed = new SvelteSet<string>()
+    const new_expanded = new SvelteSet<string>()
+
+    for (const path of all_paths) {
+      const segments = parse_path(path)
+      const depth = root_label && segments[0] === root_label
+        ? segments.length - 1
+        : segments.length
+      ;(depth >= level ? new_collapsed : new_expanded).add(path)
+    }
+
+    collapsed_paths = new_collapsed
+    force_expanded = new_expanded
+  }
+
+  function set_focused(path: string | null): void {
+    focused_path = path
+    if (path) onselect?.(path, get_value_at_path(path))
+  }
+
+  // Shared clipboard copy with feedback (event used for inline positioning)
+  async function copy_to_clipboard(
+    path: string,
+    text: string,
+    event?: CopyEventPosition,
+  ): Promise<void> {
+    copy_feedback_pos = event ? { x: event.clientX, y: event.clientY } : null
+    try {
+      await navigator.clipboard.writeText(text)
+      copy_feedback_error = false
+      oncopy?.(path, text)
+    } catch { // Clipboard API failed - still show feedback but as error
+      copy_feedback_error = true
+    }
+    copy_feedback_path = path // Show feedback regardless of success/failure
+    if (copy_feedback_timeout) clearTimeout(copy_feedback_timeout)
+    copy_feedback_timeout = setTimeout(() => {
+      copy_feedback_path = null
+    }, 1000)
+  }
+
+  function register_path(path: string): void {
+    if (!registered_paths_set.has(path)) {
+      registered_paths_set.add(path)
+      registered_paths_list = [...registered_paths_list, path]
+    }
+  }
+
+  function unregister_path(path: string): void {
+    if (registered_paths_set.has(path)) {
+      registered_paths_set.delete(path)
+      registered_paths_list = registered_paths_list.filter((entry) => entry !== path)
+    }
+  }
+
+  // Helper to get value at a path (for onselect callback)
+  function get_value_at_path(path: string): unknown {
+    if (!path || path === root_label) return value
+
+    const segments = parse_path(path)
+    let current: unknown = value
+    const start_idx = segments[0] === root_label ? 1 : 0
+
+    for (let idx = start_idx; idx < segments.length; idx++) {
+      const segment = segments[idx]
+      if (current == null) return undefined
+
+      // Map/Set use numeric indexing
+      if (current instanceof Map || current instanceof Set) {
+        const index = typeof segment === `number` ? segment : Number(segment)
+        if (Number.isNaN(index)) return undefined
+        current = Array.from(current.values())[index]
+      } else if (typeof current === `object`) {
+        current = (current as Record<string | number, unknown>)[segment]
+      } else {
+        return undefined
+      }
+    }
+    return current
+  }
+
+  // Compute diff map when compare_value is provided
+  let diff_map = $derived.by((): Map<string, DiffEntry> | null => {
+    if (compare_value === undefined) return null
+    return compute_diff(compare_value, value, root_path)
+  })
+
+  // 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)
+  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)
+  }
+
+  // Context menu handlers
+  function show_context_menu(
+    event: MouseEvent,
+    ctx_path: string,
+    ctx_value: unknown,
+    expandable: boolean,
+    is_collapsed: boolean,
+  ): void {
+    event.preventDefault()
+    context_menu_state = {
+      x: event.clientX,
+      y: event.clientY,
+      path: ctx_path,
+      value: ctx_value,
+      expandable,
+      is_collapsed,
+    }
+  }
+
+  function close_context_menu(): void {
+    context_menu_state = null
+  }
+
+  // Run action with current context menu state, then close
+  function ctx_menu_action(
+    action: (state: NonNullable<typeof context_menu_state>) => void,
+  ): void {
+    if (context_menu_state) action(context_menu_state)
+    close_context_menu()
+  }
+
+  // Pin/unpin a path for quick reference
+  function toggle_pin(pin_path: string): void {
+    if (pinned_paths.has(pin_path)) pinned_paths.delete(pin_path)
+    else pinned_paths.add(pin_path)
+    pinned_paths = new SvelteSet(pinned_paths)
+  }
+
+  // Toggle selection of a path (with shift for range select)
+  function toggle_select(select_path: string, shift: boolean): void {
+    if (shift && last_selected_path) {
+      const start_idx = registered_paths_list.indexOf(last_selected_path)
+      const end_idx = registered_paths_list.indexOf(select_path)
+      if (start_idx !== -1 && end_idx !== -1) {
+        const [from, to] = start_idx < end_idx
+          ? [start_idx, end_idx]
+          : [end_idx, start_idx]
+        for (let idx = from; idx <= to; idx++) {
+          selected_paths.add(registered_paths_list[idx])
+        }
+        selected_paths = new SvelteSet(selected_paths)
+      }
+    } else {
+      if (selected_paths.has(select_path)) selected_paths.delete(select_path)
+      else selected_paths.add(select_path)
+      selected_paths = new SvelteSet(selected_paths)
+    }
+    last_selected_path = select_path
+  }
+
+  // Copy all selected node values to clipboard
+  function copy_selected(): void {
+    if (selected_paths.size === 0) return
+    const text = [...selected_paths]
+      .map((sel_path) => serialize_for_copy(get_value_at_path(sel_path)))
+      .join(`\n`)
+    copy_to_clipboard(`[selection]`, text)
+  }
+
+  // Create context
+  const context: JsonTreeContext = {
+    get settings() {
+      return {
+        default_fold_level,
+        auto_fold_arrays,
+        auto_fold_objects,
+        show_data_types,
+        show_array_indices,
+        sort_keys,
+        max_string_length,
+        highlight_changes,
+        editable,
+      }
+    },
+    get collapsed() {
+      return collapsed_paths
+    },
+    get force_expanded() {
+      return force_expanded
+    },
+    get search_query() {
+      return search_query
+    },
+    get search_matches() {
+      return search_matches
+    },
+    get current_match_path() {
+      return current_match_path
+    },
+    get focused_path() {
+      return focused_path
+    },
+    prev_values,
+    toggle_collapse,
+    toggle_collapse_recursive,
+    expand_all,
+    collapse_all,
+    collapse_to_level,
+    set_focused,
+    copy_value: (val_path: string, val: unknown, event?: CopyEventPosition) =>
+      copy_to_clipboard(val_path, serialize_for_copy(val), event),
+    copy_path: (cp_path: string, event?: CopyEventPosition) =>
+      copy_to_clipboard(cp_path, cp_path, event),
+    register_path,
+    unregister_path,
+    show_context_menu,
+    get pinned_paths() {
+      return pinned_paths
+    },
+    toggle_pin,
+    get selected_paths() {
+      return selected_paths
+    },
+    toggle_select,
+    copy_selected,
+    get diff_map() {
+      return diff_map
+    },
+    get ghost_map() {
+      return ghost_map
+    },
+    collapse_children_only,
+    get onchange() {
+      return onchange
+    },
+  }
+
+  setContext(JSON_TREE_CONTEXT_KEY, context)
+
+  // Keyboard navigation at tree level
+  function handle_tree_keydown(event: KeyboardEvent) {
+    // Escape closes context menu first, then clears selection
+    if (event.key === `Escape`) {
+      if (context_menu_state) {
+        close_context_menu()
+        return
+      }
+      if (selected_paths.size > 0) {
+        selected_paths = new SvelteSet()
+        return
+      }
+    }
+    // Ctrl/Cmd+C with selection copies all selected
+    if (
+      (event.key === `c` || event.key === `C`) &&
+      (event.ctrlKey || event.metaKey) &&
+      selected_paths.size > 0
+    ) {
+      event.preventDefault()
+      copy_selected()
+      return
+    }
+
+    if (!focused_path) {
+      // Focus first node on any arrow key
+      if (ARROW_KEYS.has(event.key)) {
+        event.preventDefault()
+        if (registered_paths_list.length > 0) {
+          set_focused(registered_paths_list[0])
+        }
+      }
+      return
+    }
+
+    const current_index = registered_paths_list.indexOf(focused_path)
+    if (current_index === -1) return
+
+    if (event.key === `ArrowDown`) {
+      event.preventDefault()
+      const next_index = Math.min(current_index + 1, registered_paths_list.length - 1)
+      set_focused(registered_paths_list[next_index])
+    } else if (event.key === `ArrowUp`) {
+      event.preventDefault()
+      const prev_index = Math.max(current_index - 1, 0)
+      set_focused(registered_paths_list[prev_index])
+    }
+  }
+
+  // Clear search
+  function clear_search() {
+    if (search_debounce_timeout) clearTimeout(search_debounce_timeout)
+    search_input_value = ``
+    search_query = ``
+    current_match_index = -1
+  }
+
+  // Copy entire JSON to clipboard
+  function copy_all(): void {
+    copy_to_clipboard(`[root]`, serialize_for_copy(value))
+  }
+
+  // Download JSON as file
+  function download_json(): void {
+    const json_str = serialize_for_copy(value)
+    const date_str = new Date().toISOString().slice(0, 10)
+    const filename = download_filename ?? `data-${date_str}.json`
+    download(json_str, filename, `application/json`)
+  }
+
+  // Handle keyboard events on search input
+  function handle_search_keydown(event: KeyboardEvent) {
+    if (event.key === `Escape`) {
+      event.preventDefault()
+      clear_search()
+      search_input_element?.blur()
+    } else if (event.key === `Enter` || event.key === `F3`) {
+      event.stopPropagation() // Prevent bubbling to tree-level F3 handler
+      event.preventDefault()
+      if (event.shiftKey) go_to_prev_match()
+      else go_to_next_match()
+    }
+  }
+</script>
+
+<div
+  class="json-tree"
+  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()
+    }
+  }}
+>
+  {#if show_header}
+    <header class="json-tree-header">
+      <div class="search-wrapper">
+        <Icon icon="Search" style="width: 14px; height: 14px; opacity: 0.6" />
+        <input
+          bind:this={search_input_element}
+          type="search"
+          placeholder="Search keys and values..."
+          value={search_input_value}
+          oninput={handle_search_input}
+          onkeydown={handle_search_keydown}
+          class="search-input"
+        />
+        {#if search_input_value}
+          <button
+            type="button"
+            class="clear-search"
+            onclick={clear_search}
+            title="Clear search (Esc)"
+            {@attach tooltip()}
+          >
+            <Icon icon="Cross" style="width: 12px; height: 12px" />
+          </button>
+        {/if}
+      </div>
+      {#if search_query && sorted_matches.length > 0}
+        <div class="match-nav">
+          <button
+            type="button"
+            class="nav-btn"
+            onclick={go_to_prev_match}
+            title="Previous match (Shift+F3)"
+            {@attach tooltip()}
+          >
+            <Icon icon="ArrowUp" style="width: 12px; height: 12px" />
+          </button>
+          <button
+            type="button"
+            class="nav-btn"
+            onclick={go_to_next_match}
+            title="Next match (F3)"
+            {@attach tooltip()}
+          >
+            <Icon icon="ArrowDown" style="width: 12px; height: 12px" />
+          </button>
+          <span class="match-count">{current_match_index + 1} of {
+              sorted_matches.length
+            }</span>
+        </div>
+      {/if}
+      <div class="controls">
+        <button
+          type="button"
+          onclick={() => (show_data_types = !show_data_types)}
+          title={show_data_types ? `Hide data types` : `Show data types`}
+          class:active={show_data_types}
+          {@attach tooltip()}
+        >
+          T
+        </button>
+        <button
+          type="button"
+          onclick={() => (show_array_indices = !show_array_indices)}
+          title={show_array_indices ? `Hide array indices` : `Show array indices`}
+          class:active={show_array_indices}
+          {@attach tooltip()}
+        >
+          #
+        </button>
+      </div>
+      <div class="divider"></div>
+      <div class="controls">
+        <button type="button" onclick={expand_all} title="Expand all" {@attach tooltip()}>
+          <Icon icon="Expand" style="width: 14px; height: 14px" />
+        </button>
+        <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>
+      </div>
+      <div class="divider"></div>
+      <div class="controls">
+        <button
+          type="button"
+          onclick={copy_all}
+          title="Copy JSON to clipboard"
+          {@attach tooltip()}
+        >
+          <Icon icon="Copy" style="width: 14px; height: 14px" />
+        </button>
+        <button
+          type="button"
+          onclick={download_json}
+          title="Download as JSON file"
+          {@attach tooltip()}
+        >
+          <Icon icon="Download" style="width: 14px; height: 14px" />
+        </button>
+      </div>
+    </header>
+  {/if}
+
+  {#if focused_path}
+    <div class="path-breadcrumb">
+      <button
+        type="button"
+        class="copy-path-btn"
+        onclick={() => copy_to_clipboard(focused_path!, focused_path!)}
+        title="Click to copy path"
+        {@attach tooltip()}
+      >
+        {focused_path}
+      </button>
+    </div>
+  {/if}
+
+  {#if pinned_paths.size > 0}
+    <div class="pinned-panel">
+      <div class="pinned-header">
+        <span>Pinned ({pinned_paths.size})</span>
+        <button
+          type="button"
+          class="pinned-clear-btn"
+          onclick={() => {
+            pinned_paths = new SvelteSet()
+          }}
+        >
+          Clear
+        </button>
+      </div>
+      {#each [...pinned_paths] as pinned_path (pinned_path)}
+        <div class="pinned-item">
+          <button
+            type="button"
+            class="pinned-path"
+            onclick={() =>
+            copy_to_clipboard(
+              pinned_path,
+              serialize_for_copy(get_value_at_path(pinned_path)),
+            )}
+            title="Click to copy value"
+            {@attach tooltip()}
+          >
+            {pinned_path}
+          </button>
+          <span class="pinned-value">{
+            format_preview(get_value_at_path(pinned_path))
+          }</span>
+          <button
+            type="button"
+            class="unpin-btn"
+            onclick={() => toggle_pin(pinned_path)}
+            title="Unpin"
+          >
+            ✕
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <div
+    bind:this={content_element}
+    class="json-tree-content"
+    {@attach highlight_matches({
+      query: search_query,
+      css_class: `json-tree-search-match`,
+    })}
+  >
+    <JsonNode node_key={root_label ?? null} {value} path={root_path} depth={0} />
+  </div>
+
+  {#if copy_feedback_path !== null}
+    <div
+      class="copy-feedback"
+      class:error={copy_feedback_error}
+      style={copy_feedback_pos
+      ? `left: ${copy_feedback_pos.x}px; top: ${copy_feedback_pos.y - 24}px`
+      : `right: 8px; top: 8px`}
+    >
+      {copy_feedback_error ? `Copy failed` : `Copied!`}
+    </div>
+  {/if}
+
+  {#if context_menu_state}
+    <button
+      type="button"
+      class="context-menu-backdrop"
+      onclick={close_context_menu}
+      oncontextmenu={(ev) => {
+        ev.preventDefault()
+        close_context_menu()
+      }}
+      aria-label="Close context menu"
+      tabindex="-1"
+    >
+    </button>
+    <menu
+      class="context-menu"
+      style:left="{Math.min(context_menu_state.x, window.innerWidth - 180)}px"
+      style:top="{Math.min(context_menu_state.y, window.innerHeight - 200)}px"
+    >
+      <li>
+        <button
+          type="button"
+          onclick={() =>
+          ctx_menu_action((st) =>
+            copy_to_clipboard(st.path, serialize_for_copy(st.value))
+          )}
+        >
+          <Icon icon="Copy" style="width: 12px; height: 12px" /> Copy value
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          onclick={() => ctx_menu_action((st) => copy_to_clipboard(st.path, st.path))}
+        >
+          Copy path
+        </button>
+      </li>
+      <li class="separator"></li>
+      {#if context_menu_state.expandable}
+        <li>
+          <button
+            type="button"
+            onclick={() =>
+            ctx_menu_action((st) =>
+              st.is_collapsed
+                ? toggle_collapse_recursive(st.path, false)
+                : collapse_children_only(st.path)
+            )}
+          >
+            {context_menu_state.is_collapsed ? `Expand` : `Collapse`} all children
+          </button>
+        </li>
+        <li class="separator"></li>
+      {/if}
+      <li>
+        <button
+          type="button"
+          onclick={() => ctx_menu_action((st) => toggle_pin(st.path))}
+        >
+          {pinned_paths.has(context_menu_state.path) ? `Unpin` : `Pin`} this path
+        </button>
+      </li>
+    </menu>
+  {/if}
+</div>
+
+<style>
+  ::highlight(json-tree-search-match) {
+    background: var(--jt-search-match-bg, light-dark(#fff59d, #614d00));
+    color: inherit;
+  }
+  .json-tree {
+    /* Color variables with light-dark() for automatic theme support */
+    --jt-string: light-dark(#a31515, #ce9178);
+    --jt-number: light-dark(#098658, #b5cea8);
+    --jt-boolean: light-dark(#0000ff, #569cd6);
+    --jt-null: light-dark(#808080, #808080);
+    --jt-key: light-dark(#001080, #9cdcfe);
+    --jt-punctuation: light-dark(#000000, #d4d4d4);
+    --jt-arrow: light-dark(#6e6e6e, #858585);
+    --jt-preview: light-dark(#808080, #808080);
+    --jt-search-match-bg: light-dark(#fff59d, #614d00);
+    --jt-current-match-bg: light-dark(#ffcc80, #8a5600);
+    --jt-change-flash: light-dark(#c8e6c9, #1b5e20);
+    --jt-focus-bg: light-dark(#e3f2fd, #0d3a58);
+    --jt-hover-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08));
+    --jt-indent-guide: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+    --jt-header-bg: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05));
+    --jt-header-border: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+    /* Layout variables */
+    --jt-indent: 1.2em;
+    --jt-line-height: 1.5;
+    --jt-font-size: 13px;
+    --jt-font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+    font-family: var(--jt-font-family);
+    font-size: var(--jt-font-size);
+    line-height: var(--jt-line-height);
+    position: relative;
+    background: var(--jt-bg, transparent);
+    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;
+    gap: 8px;
+    padding: 6px 8px;
+    flex-wrap: wrap;
+  }
+  .search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    min-width: 150px;
+    max-width: 300px;
+    background: var(--jt-search-bg, light-dark(white, rgba(0, 0, 0, 0.2)));
+    border: 1px solid
+      var(--jt-search-border, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)));
+    border-radius: 4px;
+    padding: 2px 6px;
+  }
+  .search-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-size: 12px;
+    padding: 2px;
+    outline: none;
+    color: inherit;
+  }
+  .search-input::placeholder {
+    color: var(--jt-placeholder, light-dark(#999, #666));
+  }
+  .clear-search {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    opacity: 0.6;
+    border-radius: 2px;
+  }
+  .clear-search:hover {
+    opacity: 1;
+    background: var(--jt-hover-bg);
+  }
+  .controls {
+    display: flex;
+    gap: 2px;
+  }
+  .divider {
+    width: 1px;
+    height: 16px;
+    background: var(--jt-header-border);
+    margin: 0 4px;
+    align-self: center;
+  }
+  .controls button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    padding: 2px 6px;
+    border: none;
+    background: transparent;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 500;
+    color: inherit;
+    opacity: 0.6;
+    transition: opacity 0.15s, background 0.15s;
+  }
+  .controls button:hover {
+    opacity: 1;
+    background: var(--jt-hover-bg);
+  }
+  .controls button.active {
+    opacity: 1;
+  }
+  .match-nav {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  .nav-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: 3px;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+  }
+  .nav-btn:hover {
+    opacity: 1;
+    background: var(--jt-hover-bg);
+  }
+  .match-count {
+    font-size: 11px;
+    color: var(--jt-match-count-color, light-dark(#666, #aaa));
+    white-space: nowrap;
+    margin-left: 4px;
+  }
+  .path-breadcrumb {
+    padding: 4px 8px;
+    background: var(--jt-header-bg);
+    border-bottom: 1px solid var(--jt-header-border);
+    font-size: 11px;
+    overflow: hidden;
+  }
+  .copy-path-btn {
+    background: none;
+    border: none;
+    padding: 2px 4px;
+    font: inherit;
+    font-family: var(--jt-font-family);
+    color: var(--jt-key, light-dark(#001080, #9cdcfe));
+    cursor: pointer;
+    border-radius: 2px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+  .copy-path-btn:hover {
+    background: var(--jt-hover-bg);
+    text-decoration: underline;
+  }
+  .json-tree-content {
+    padding: var(--jt-content-padding, 8px);
+    overflow: auto;
+    max-height: var(--jt-max-height, none);
+  }
+  .copy-feedback {
+    position: fixed;
+    background: var(--success-color, #10b981);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    animation: fade-in-out 1s ease-out forwards;
+    pointer-events: none;
+    z-index: 1002;
+    white-space: nowrap;
+  }
+  .copy-feedback.error {
+    background: var(--error-color, #ef4444);
+  }
+  @keyframes fade-in-out {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    15% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    85% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  .context-menu-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: default;
+  }
+  .context-menu {
+    position: fixed;
+    z-index: 1001;
+    background: var(--jt-ctx-bg, light-dark(white, #2d2d2d));
+    border: 1px solid
+      var(--jt-ctx-border, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)));
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 4px 0;
+    min-width: 160px;
+    font-size: 12px;
+    list-style: none;
+    margin: 0;
+  }
+  .context-menu button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 6px 12px;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+  }
+  .context-menu button:hover {
+    background: var(
+      --jt-ctx-hover,
+      light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1))
+    );
+  }
+  .context-menu .separator {
+    height: 1px;
+    margin: 4px 8px;
+    background: var(
+      --jt-ctx-border,
+      light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))
+    );
+  }
+  .pinned-panel :where(button) {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+  }
+  .pinned-panel {
+    border-bottom: 1px solid var(--jt-header-border);
+    padding: 4px 8px;
+    background: var(--jt-header-bg);
+    font-size: 11px;
+    max-height: 120px;
+    overflow-y: auto;
+  }
+  .pinned-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2px 0;
+    font-weight: 500;
+    opacity: 0.7;
+  }
+  .pinned-clear-btn {
+    font-size: 10px;
+    opacity: 0.6;
+    padding: 1px 4px;
+  }
+  .pinned-clear-btn:hover {
+    opacity: 1;
+    text-decoration: underline;
+  }
+  .pinned-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 4px;
+    border-radius: 2px;
+  }
+  .pinned-item:hover {
+    background: var(--jt-hover-bg);
+  }
+  .pinned-path {
+    color: var(--jt-key, light-dark(#001080, #9cdcfe));
+    font-family: var(--jt-font-family);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+  }
+  .pinned-path:hover {
+    text-decoration: underline;
+  }
+  .pinned-value {
+    color: var(--jt-preview, light-dark(#808080, #808080));
+    font-style: italic;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+  .unpin-btn {
+    padding: 0 2px;
+    opacity: 0.5;
+    font-size: 10px;
+  }
+  .unpin-btn:hover {
+    opacity: 1;
+  }
+</style>