matterviz 0.3.1 → 0.3.3

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

@@ -1,395 +1,475 @@
-<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 { SvelteSet } from 'svelte/reactivity';
-import JsonNode from './JsonNode.svelte';
-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();
-let { value, root_label, default_fold_level = 2, auto_fold_arrays = 10, auto_fold_objects = 20, collapsed_paths = $bindable(new SvelteSet()), 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, ...rest } = $props();
-// Internal state
-let search_query = $state(``);
-let search_input_value = $state(``);
-let focused_path = $state(null);
-// Use Set for O(1) lookup/add/delete instead of O(n) array operations
-let registered_paths_set = $state(new Set());
-let registered_paths_list = $state([]); // ordered list for keyboard nav
-let copy_feedback_path = $state(null);
-let copy_feedback_error = $state(false);
-let copy_feedback_timeout;
-// Track paths explicitly expanded (overrides auto-fold thresholds)
-let force_expanded = $state(new SvelteSet());
-// 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 = $state();
-// Reference to the search input for focus management
-let search_input_element = $state();
-// Context menu state (null when closed)
-let context_menu_state = $state(null);
-// Pinned paths for quick reference
-let pinned_paths = $state(new SvelteSet());
-// Selection state for bulk operations
-let selected_paths = $state(new SvelteSet());
-let last_selected_path = $state(null);
-// Copy feedback positioning (null = use default corner position)
-let copy_feedback_pos = $state(null);
-// Clear stale path-based state when value changes
-let prev_value_ref;
-$effect.pre(() => {
+<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;
+      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;
-function handle_search_input(event) {
-    const input = event.target;
-    search_input_value = input.value;
-    if (search_debounce_timeout)
-        clearTimeout(search_debounce_timeout);
+    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 [];
+      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() {
+    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;
+      current_match_index = -1
+      return
     }
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- local variable, not reactive state
-    const paths_to_expand = new Set();
+    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);
-        }
+      for (const ancestor of get_ancestor_paths(match)) {
+        paths_to_expand.add(ancestor)
+      }
     }
-    let collapsed_changed = false;
-    let force_expanded_changed = false;
+    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_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);
+      collapsed_paths = new SvelteSet(collapsed_paths)
     }
     if (force_expanded_changed) {
-        force_expanded = new SvelteSet(force_expanded);
+      force_expanded = new SvelteSet(force_expanded)
     }
     // Wait for DOM to update before scrolling to match
-    await tick();
+    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();
+      // 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() {
-    if (!current_match_path || !content_element)
-        return;
+  }
+
+  // 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)}"]`);
+    const match_element = content_element.querySelector(
+      `[data-path="${CSS.escape(current_match_path)}"]`,
+    )
     if (match_element) {
-        match_element.scrollIntoView({ behavior: `smooth`, block: `center` });
+      match_element.scrollIntoView({ behavior: `smooth`, block: `center` })
     }
-}
-// Navigate to next match
-function go_to_next_match() {
-    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() {
-    if (sorted_matches.length === 0)
-        return;
+  }
+
+  // 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();
-// Toggle collapse - tracks force_expanded to override auto-fold thresholds
-function toggle_collapse(path, is_currently_collapsed) {
+      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);
+      collapsed_paths.delete(path)
+      force_expanded.add(path)
+    } else {
+      force_expanded.delete(path)
+      collapsed_paths.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, collapse) {
+    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);
-        }
+      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) {
-    const all_paths = collect_all_paths(value, root_path);
-    const descendants = target_path === `` ? all_paths : all_paths.filter((p) => p === target_path || p.startsWith(target_path + `.`) ||
-        p.startsWith(target_path + `[`));
+    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() {
-    force_expanded = new SvelteSet(collect_all_paths(value, root_path));
-    collapsed_paths = new SvelteSet();
-}
-function collapse_all() {
-    force_expanded = new SvelteSet();
-    collapsed_paths = new SvelteSet(collect_all_paths(value, root_path));
-}
-function collapse_to_level(level) {
-    const all_paths = collect_all_paths(value, root_path);
-    const new_collapsed = new SvelteSet();
-    const new_expanded = new SvelteSet();
+      ? 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);
+      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) {
-    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, text, event) {
-    copy_feedback_pos = event ? { x: event.clientX, y: event.clientY } : null;
+
+    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;
+      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_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) {
+      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];
+      registered_paths_set.add(path)
+      registered_paths_list = [...registered_paths_list, path]
     }
-}
-function unregister_path(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((p) => p !== 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) {
-    if (!path || path === root_label)
-        return value;
-    const segments = parse_path(path);
-    let current = value;
-    const start_idx = segments[0] === root_label ? 1 : 0;
+  }
+
+  // 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 || current === undefined)
-            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[segment];
-        }
-        else {
-            return undefined;
-        }
+      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(() => {
-    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) {
+    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);
-        }
+      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, ctx_path, ctx_value, expandable, is_collapsed) {
-    event.preventDefault();
+    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() {
-    context_menu_state = null;
-}
-// Run action with current context menu state, then close
-function ctx_menu_action(action) {
-    if (context_menu_state)
-        action(context_menu_state);
-    close_context_menu();
-}
-// Pin/unpin a path for quick reference
-function toggle_pin(pin_path) {
-    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, shift) {
+      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);
+      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)
     }
-    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() {
-    if (selected_paths.size === 0)
-        return;
+    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 = {
+      .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,
-        };
+      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;
+      return collapsed_paths
     },
     get force_expanded() {
-        return force_expanded;
+      return force_expanded
     },
     get search_query() {
-        return search_query;
+      return search_query
     },
     get search_matches() {
-        return search_matches;
+      return search_matches
     },
     get current_match_path() {
-        return current_match_path;
+      return current_match_path
     },
     get focused_path() {
-        return focused_path;
+      return focused_path
     },
     previous_values,
     toggle_collapse,
@@ -398,109 +478,119 @@ const context = {
     collapse_all,
     collapse_to_level,
     set_focused,
-    copy_value: (val_path, val, event) => copy_to_clipboard(val_path, serialize_for_copy(val), event),
-    copy_path: (cp_path, event) => copy_to_clipboard(cp_path, cp_path, event),
+    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;
+      return pinned_paths
     },
     toggle_pin,
     get selected_paths() {
-        return selected_paths;
+      return selected_paths
     },
     toggle_select,
     copy_selected,
     get diff_map() {
-        return diff_map;
+      return diff_map
     },
     get ghost_map() {
-        return ghost_map;
+      return ghost_map
     },
     collapse_children_only,
-};
-setContext(JSON_TREE_CONTEXT_KEY, context);
-// Keyboard navigation at tree level
-function handle_tree_keydown(event) {
+    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;
-        }
+      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 (
+      (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]);
-            }
+      // 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;
+      }
+      return
     }
-    const current_index = registered_paths_list.indexOf(focused_path);
-    if (current_index === -1)
-        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]);
+      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() {
-    copy_to_clipboard(`[root]`, serialize_for_copy(value));
-}
-// Download JSON as file
-function download_json() {
-    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) {
+  }
+
+  // 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();
+      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
@@ -832,12 +922,14 @@ function handle_search_keydown(event) {
     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;
-    background: var(--jt-header-bg);
     flex-wrap: wrap;
   }
   .search-wrapper {
@@ -898,26 +990,22 @@ function handle_search_keydown(event) {
     min-width: 24px;
     height: 24px;
     padding: 2px 6px;
-    border: 1px solid var(--jt-header-border);
-    background: var(--jt-btn-bg, light-dark(white, rgba(255, 255, 255, 0.1)));
+    border: none;
+    background: transparent;
     border-radius: 3px;
     cursor: pointer;
     font-size: 11px;
     font-weight: 500;
     color: inherit;
-    transition: background 0.15s;
+    opacity: 0.6;
+    transition: opacity 0.15s, background 0.15s;
   }
   .controls button:hover {
-    background: var(
-      --jt-btn-hover-bg,
-      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15))
-    );
+    opacity: 1;
+    background: var(--jt-hover-bg);
   }
   .controls button.active {
-    background: var(
-      --jt-btn-active-bg,
-      light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))
-    );
+    opacity: 1;
   }
   .match-nav {
     display: flex;
@@ -931,17 +1019,16 @@ function handle_search_keydown(event) {
     width: 20px;
     height: 20px;
     padding: 0;
-    border: 1px solid var(--jt-header-border);
-    background: var(--jt-btn-bg, light-dark(white, rgba(255, 255, 255, 0.1)));
+    border: none;
+    background: transparent;
     border-radius: 3px;
     cursor: pointer;
     color: inherit;
+    opacity: 0.6;
   }
   .nav-btn:hover {
-    background: var(
-      --jt-btn-hover-bg,
-      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15))
-    );
+    opacity: 1;
+    background: var(--jt-hover-bg);
   }
   .match-count {
     font-size: 11px;