matterviz 0.3.0 → 0.3.2

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

@@ -5,12 +5,12 @@ 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 { collect_all_paths, find_matching_paths, get_ancestor_paths, parse_path, serialize_for_copy, } from './utils';
+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, ...rest } = $props();
+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, editable = false, onchange, ...rest } = $props();
 // Internal state
 let search_query = $state(``);
 let search_input_value = $state(``);
@@ -29,11 +29,23 @@ let current_match_index = $state(-1);
 let content_element = $state();
 // Reference to the search input for focus management
 let search_input_element = $state();
-// Clear force_expanded when value changes (stale paths from old data)
+// 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(() => {
     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;
 });
@@ -50,11 +62,13 @@ function handle_search_input(event) {
         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_label ?? ``));
+    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(() => {
@@ -154,21 +168,12 @@ function toggle_collapse(path, is_currently_collapsed) {
 }
 // Toggle collapse recursively for all descendants
 function toggle_collapse_recursive(path, collapse) {
-    const all_paths = collect_all_paths(value, root_label ?? ``);
-    // Find all paths that start with this path (descendants)
-    // Empty path means root without label - all paths are descendants
-    let descendants = path === `` ? all_paths : all_paths.filter((p) => p === path || p.startsWith(path + `.`) || p.startsWith(path + `[`));
-    // Always include the current path itself (collect_all_paths excludes empty root path)
-    if (!descendants.includes(path))
-        descendants = [path, ...descendants];
-    if (collapse) {
-        for (const desc of descendants) {
+    for (const desc of get_descendants(path)) {
+        if (collapse) {
             force_expanded.delete(desc);
             collapsed_paths.add(desc);
         }
-    }
-    else {
-        for (const desc of descendants) {
+        else {
             collapsed_paths.delete(desc);
             force_expanded.add(desc);
         }
@@ -176,16 +181,25 @@ function toggle_collapse_recursive(path, collapse) {
     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 + `[`));
+    return descendants.includes(target_path)
+        ? descendants
+        : [target_path, ...descendants];
+}
 function expand_all() {
-    force_expanded = new SvelteSet(collect_all_paths(value, root_label ?? ``));
+    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_label ?? ``));
+    collapsed_paths = new SvelteSet(collect_all_paths(value, root_path));
 }
 function collapse_to_level(level) {
-    const all_paths = collect_all_paths(value, root_label ?? ``);
+    const all_paths = collect_all_paths(value, root_path);
     const new_collapsed = new SvelteSet();
     const new_expanded = new SvelteSet();
     for (const path of all_paths) {
@@ -203,8 +217,9 @@ function set_focused(path) {
     if (path)
         onselect?.(path, get_value_at_path(path));
 }
-// Shared clipboard copy with feedback
-async function copy_to_clipboard(path, text) {
+// 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;
     try {
         await navigator.clipboard.writeText(text);
         copy_feedback_error = false;
@@ -259,6 +274,91 @@ function get_value_at_path(path) {
     }
     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) {
+    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, ctx_path, ctx_value, expandable, is_collapsed) {
+    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) {
+    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() {
+    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 = {
     get settings() {
@@ -271,6 +371,7 @@ const context = {
             sort_keys,
             max_string_length,
             highlight_changes,
+            editable,
         };
     },
     get collapsed() {
@@ -298,14 +399,53 @@ const context = {
     collapse_all,
     collapse_to_level,
     set_focused,
-    copy_value: (path, val) => copy_to_clipboard(path, serialize_for_copy(val)),
-    copy_path: (path) => copy_to_clipboard(path, path),
+    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),
     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) {
+    // 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)) {
@@ -526,6 +666,51 @@ function handle_search_keydown(event) {
     </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"
@@ -534,13 +719,85 @@ function handle_search_keydown(event) {
       css_class: `json-tree-search-match`,
     })}
   >
-    {#if copy_feedback_path !== null}
-      <div class="copy-feedback" class:error={copy_feedback_error}>
-        {copy_feedback_error ? `Copy failed` : `Copied!`}
-      </div>
-    {/if}
-    <JsonNode node_key={root_label ?? null} {value} path={root_label ?? ``} depth={0} />
+    <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>
@@ -579,12 +836,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 {
@@ -645,26 +904,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;
@@ -678,17 +933,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;
@@ -728,9 +982,7 @@ function handle_search_keydown(event) {
     max-height: var(--jt-max-height, none);
   }
   .copy-feedback {
-    position: absolute;
-    top: 8px;
-    right: 8px;
+    position: fixed;
     background: var(--success-color, #10b981);
     color: white;
     padding: 4px 8px;
@@ -738,7 +990,8 @@ function handle_search_keydown(event) {
     font-size: 11px;
     animation: fade-in-out 1s ease-out forwards;
     pointer-events: none;
-    z-index: 10;
+    z-index: 1002;
+    white-space: nowrap;
   }
   .copy-feedback.error {
     background: var(--error-color, #ef4444);
@@ -759,4 +1012,125 @@ function handle_search_keydown(event) {
       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>

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { JsonTreeProps } from './types';
-type $$ComponentProps = JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect`>;
+type $$ComponentProps = JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`>;
 declare const JsonTree: import("svelte").Component<$$ComponentProps, {}, "collapsed_paths" | "show_data_types" | "show_array_indices">;
 type JsonTree = ReturnType<typeof JsonTree>;
 export default JsonTree;