matterviz 0.3.4 → 0.3.6

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

@@ -1,1222 +0,0 @@
-<script lang="ts">
-  import Icon from '../../Icon.svelte'
-  import { download } from '../../io/fetch'
-  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)
-
-  // Clear stale path-based state when value changes
-  let prev_value_ref: unknown
-  $effect.pre(() => {
-    if (prev_value_ref !== undefined && value !== prev_value_ref) {
-      force_expanded.clear()
-      pinned_paths = new SvelteSet()
-      selected_paths = new SvelteSet()
-      last_selected_path = null
-    }
-    prev_value_ref = value
-  })
-
-  // Debounce search input
-  let search_debounce_timeout: ReturnType<typeof setTimeout> | undefined
-
-  function handle_search_input(event: Event) {
-    const input = event.target as HTMLInputElement
-    search_input_value = input.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 previous_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
-    },
-    previous_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>