matterviz 0.3.0 → 0.3.2

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

@@ -1,6 +1,6 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, tick } from 'svelte';
 import { JSON_TREE_CONTEXT_KEY } from './types';
-import { format_preview, values_equal } from './utils';
+import { format_preview, is_css_color, is_url, parse_edited_value, values_equal, } from './utils';
 let { value, value_type, path, } = $props();
 const ctx = getContext(JSON_TREE_CONTEXT_KEY);
 // Track if value just changed for animation
@@ -30,11 +30,31 @@ $effect(() => {
             clearTimeout(change_timeout);
     };
 });
-// Handle click to copy
+// Trimmed string for URL/color detection (avoids using raw whitespace in href/style)
+let trimmed_str = $derived(value_type === `string` ? value.trim() : ``);
+// Auto-detect URLs in string values
+let url_detected = $derived(value_type === `string` && is_url(trimmed_str));
+// Auto-detect CSS colors in string values
+let color_detected = $derived(value_type === `string` && is_css_color(trimmed_str) ? trimmed_str : null);
+// Handle click to copy (delayed to avoid firing on double-click-to-edit)
+let click_timer;
+$effect(() => () => {
+    if (click_timer)
+        clearTimeout(click_timer);
+});
 async function handle_click(event) {
     event.stopPropagation();
-    if (ctx) {
-        await ctx.copy_value(path, value);
+    if (!ctx)
+        return;
+    // When editable, delay copy so double-click can cancel it
+    if (ctx.settings.editable && ctx.onchange) {
+        if (click_timer)
+            clearTimeout(click_timer);
+        const copy_pos = { clientX: event.clientX, clientY: event.clientY };
+        click_timer = setTimeout(() => ctx.copy_value(path, value, copy_pos), 250);
+    }
+    else {
+        await ctx.copy_value(path, value, event);
     }
 }
 // Format display value - strings use custom truncation, others use format_preview
@@ -56,102 +76,179 @@ function toggle_expand(event) {
     event.stopPropagation();
     is_expanded = !is_expanded;
 }
+// === Inline Editing ===
+let editing = $state(false);
+let edit_text = $state(``);
+let edit_input = $state(null);
+function start_edit(event) {
+    if (!ctx?.settings.editable || !ctx.onchange)
+        return;
+    event.stopPropagation();
+    // Cancel pending click-to-copy
+    if (click_timer)
+        clearTimeout(click_timer);
+    // Pre-fill with raw value (strings without quotes)
+    edit_text = value_type === `string` ? value : String(value);
+    editing = true;
+    tick().then(() => edit_input?.select());
+}
+function commit_edit() {
+    if (!editing)
+        return;
+    editing = false;
+    const new_value = parse_edited_value(edit_text);
+    if (!values_equal(new_value, value)) {
+        ctx?.onchange?.(path, new_value, value);
+    }
+}
+function handle_edit_keydown(event) {
+    if (event.key === `Enter`) {
+        event.preventDefault();
+        commit_edit();
+    }
+    else if (event.key === `Escape`) {
+        event.preventDefault();
+        editing = false;
+    }
+}
 </script>
 
-<span
-  class="json-value {value_type}"
-  class:changed={just_changed}
-  onclick={handle_click}
-  onkeydown={(event) => {
-    if (event.key === `Enter` || event.key === ` `) {
-      event.preventDefault()
-      ctx?.copy_value(path, value)
-    }
-  }}
-  role="button"
-  tabindex="-1"
-  title="Click to copy"
->
-  {display_value}
-  {#if is_truncated}
-    <button
-      type="button"
-      class="expand-btn"
-      onclick={toggle_expand}
-      title="Show full string"
-    >
-      ...
-    </button>
-  {:else if is_long_string && is_expanded}
-    <button
-      type="button"
-      class="expand-btn"
-      onclick={toggle_expand}
-      title="Collapse string"
-    >
-      ▲
-    </button>
-  {/if}
-  {#if ctx?.settings.show_data_types && value_type !== `null` &&
+{#if editing}
+  <!-- svelte-ignore a11y_autofocus -->
+  <input
+    bind:this={edit_input}
+    type="text"
+    class="edit-input {value_type}"
+    bind:value={edit_text}
+    onkeydown={handle_edit_keydown}
+    onblur={commit_edit}
+    style:width="{Math.max(edit_text.length + 2, 6)}ch"
+    autofocus
+  />
+{:else}
+  <span
+    class="json-value {value_type}"
+    class:changed={just_changed}
+    class:editable={ctx?.settings.editable}
+    onclick={handle_click}
+    ondblclick={start_edit}
+    oncontextmenu={(event) => {
+      ctx?.show_context_menu(event, path, value, false, false)
+    }}
+    onkeydown={(event) => {
+      if (event.key === `Enter` || event.key === ` `) {
+        event.preventDefault()
+        ctx?.copy_value(path, value)
+      }
+    }}
+    role="button"
+    tabindex="-1"
+    title={ctx?.settings.editable ? `Double-click to edit` : undefined}
+  >
+    {#if color_detected}
+      <span class="color-swatch" style:background={color_detected}></span>
+    {/if}
+    {#if url_detected}
+      <a
+        href={encodeURI(trimmed_str)}
+        class="url-link"
+        target="_blank"
+        rel="noopener noreferrer"
+        onclick={(event) => event.stopPropagation()}
+        title="Open URL in new tab"
+      >
+        {display_value}
+      </a>
+    {:else}
+      {display_value}
+    {/if}
+    {#if is_truncated}
+      <button
+        type="button"
+        class="expand-btn"
+        onclick={toggle_expand}
+        title="Show full string"
+      >
+        ...
+      </button>
+    {:else if is_long_string && is_expanded}
+      <button
+        type="button"
+        class="expand-btn"
+        onclick={toggle_expand}
+        title="Collapse string"
+      >
+        ▲
+      </button>
+    {/if}
+    {#if ctx?.settings.show_data_types && value_type !== `null` &&
       value_type !== `undefined`}
-    <span class="type-annotation">{value_type}</span>
-  {/if}
-</span>
+      <span class="type-annotation">{value_type}</span>
+    {/if}
+  </span>
+{/if}
 
 <style>
+  /* Type-specific colors shared between display and edit input */
+  :is(.json-value, .edit-input) {
+    &.string {
+      color: var(--jt-string, light-dark(#a31515, #ce9178));
+    }
+    &.number {
+      color: var(--jt-number, light-dark(#098658, #b5cea8));
+    }
+    &.boolean {
+      color: var(--jt-boolean, light-dark(#0000ff, #569cd6));
+    }
+    &.null {
+      color: var(--jt-null, light-dark(#808080, #808080));
+    }
+  }
   .json-value {
     cursor: pointer;
     border-radius: 2px;
     transition: background-color 0.15s, color 0.15s;
-  }
-  .json-value:hover {
-    background: var(
-      --jt-hover-bg,
-      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08))
-    );
-  }
-  /* Type-specific colors */
-  .json-value.string {
-    color: var(--jt-string, light-dark(#a31515, #ce9178));
-    word-break: break-word;
-  }
-  .json-value.number {
-    color: var(--jt-number, light-dark(#098658, #b5cea8));
-  }
-  .json-value.boolean {
-    color: var(--jt-boolean, light-dark(#0000ff, #569cd6));
-  }
-  .json-value.null,
-  .json-value.undefined {
-    color: var(--jt-null, light-dark(#808080, #808080));
-    font-style: italic;
-  }
-  .json-value.date {
-    color: var(--jt-date, light-dark(#098658, #dcdcaa));
-  }
-  .json-value.regexp {
-    color: var(--jt-regexp, light-dark(#811f3f, #d16969));
-  }
-  .json-value.symbol {
-    color: var(--jt-symbol, light-dark(#267f99, #4ec9b0));
-  }
-  .json-value.bigint {
-    color: var(--jt-bigint, light-dark(#098658, #b5cea8));
-  }
-  .json-value.function {
-    color: var(--jt-function, light-dark(#795e26, #dcdcaa));
-    font-style: italic;
-  }
-  .json-value.error {
-    color: var(--jt-error, light-dark(#a31515, #f48771));
-  }
-  .json-value.circular {
-    color: var(--jt-circular, light-dark(#808080, #808080));
-    font-style: italic;
-  }
-  /* Change animation */
-  .json-value.changed {
-    animation: value-change 1s ease-out;
+    &:hover {
+      background: var(
+        --jt-hover-bg,
+        light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08))
+      );
+    }
+    &.string {
+      word-break: break-word;
+    }
+    &:is(.null, .undefined) {
+      font-style: italic;
+    }
+    &.date {
+      color: var(--jt-date, light-dark(#098658, #dcdcaa));
+    }
+    &.regexp {
+      color: var(--jt-regexp, light-dark(#811f3f, #d16969));
+    }
+    &.symbol {
+      color: var(--jt-symbol, light-dark(#267f99, #4ec9b0));
+    }
+    &.bigint {
+      color: var(--jt-bigint, light-dark(#098658, #b5cea8));
+    }
+    &.function {
+      color: var(--jt-function, light-dark(#795e26, #dcdcaa));
+      font-style: italic;
+    }
+    &.error {
+      color: var(--jt-error, light-dark(#a31515, #f48771));
+    }
+    &.circular {
+      color: var(--jt-circular, light-dark(#808080, #808080));
+      font-style: italic;
+    }
+    &.changed {
+      animation: value-change 1s ease-out;
+    }
+    &.editable {
+      cursor: default;
+    }
   }
   @keyframes value-change {
     0% {
@@ -161,7 +258,6 @@ function toggle_expand(event) {
       background: transparent;
     }
   }
-  /* Expand/collapse button for long strings */
   .expand-btn {
     display: inline;
     background: none;
@@ -171,15 +267,40 @@ function toggle_expand(event) {
     font-size: 0.85em;
     padding: 0 2px;
     margin-left: 2px;
+    &:hover {
+      text-decoration: underline;
+    }
   }
-  .expand-btn:hover {
-    text-decoration: underline;
-  }
-  /* Type annotation */
   .type-annotation {
     font-size: 0.7em;
     color: var(--jt-type-annotation, light-dark(#808080, #6a6a6a));
     margin-left: 4px;
     opacity: 0.7;
   }
+  .url-link {
+    color: var(--jt-url, light-dark(#0066cc, #4fc3f7));
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .edit-input {
+    font: inherit;
+    font-family: var(--jt-font-family, 'SF Mono', Monaco, 'Courier New', monospace);
+    padding: 0 2px;
+    border: 1px solid var(--jt-edit-border, light-dark(#4a90d9, #4a90d9));
+    border-radius: 2px;
+    background: var(--jt-edit-bg, light-dark(#fff, #1a1a2e));
+    outline: none;
+    min-width: 4ch;
+  }
+  .color-swatch {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
+    vertical-align: middle;
+    margin-right: 4px;
+  }
 </style>

package/dist/layout/json-tree/types.d.ts

@@ -15,6 +15,9 @@ export interface JsonTreeProps {
     onselect?: (path: string, value: unknown) => void;
     oncopy?: (path: string, value: string) => void;
     download_filename?: string;
+    compare_value?: unknown;
+    editable?: boolean;
+    onchange?: (path: string, new_value: unknown, old_value: unknown) => void;
 }
 export interface JsonTreeContext {
     settings: {
@@ -26,6 +29,7 @@ export interface JsonTreeContext {
         sort_keys: boolean;
         max_string_length: number;
         highlight_changes: boolean;
+        editable: boolean;
     };
     collapsed: Set<string>;
     force_expanded: Set<string>;
@@ -40,9 +44,30 @@ export interface JsonTreeContext {
     collapse_all: () => void;
     collapse_to_level: (level: number) => void;
     set_focused: (path: string | null) => void;
-    copy_value: (path: string, value: unknown) => Promise<void>;
-    copy_path: (path: string) => Promise<void>;
+    copy_value: (path: string, value: unknown, event?: CopyEventPosition) => Promise<void>;
+    copy_path: (path: string, event?: CopyEventPosition) => Promise<void>;
     register_path: (path: string) => void;
     unregister_path: (path: string) => void;
+    show_context_menu: (event: MouseEvent, path: string, value: unknown, expandable: boolean, is_collapsed: boolean) => void;
+    pinned_paths: Set<string>;
+    toggle_pin: (path: string) => void;
+    selected_paths: Set<string>;
+    toggle_select: (path: string, shift: boolean) => void;
+    copy_selected: () => void;
+    diff_map: Map<string, DiffEntry> | null;
+    ghost_map: Map<string, import('./utils').GhostEntry[]>;
+    collapse_children_only: (path: string) => void;
+    onchange?: (path: string, new_value: unknown, old_value: unknown) => void;
 }
+export type CopyEventPosition = {
+    clientX: number;
+    clientY: number;
+};
 export declare const JSON_TREE_CONTEXT_KEY: unique symbol;
+export type DiffStatus = `added` | `removed` | `changed`;
+export interface DiffEntry {
+    status: DiffStatus;
+    path: string;
+    old_value?: unknown;
+    new_value?: unknown;
+}

package/dist/layout/json-tree/utils.d.ts

@@ -1,4 +1,4 @@
-import type { JsonValueType } from './types';
+import type { DiffEntry, JsonValueType } from './types';
 export declare function get_value_type(value: unknown): JsonValueType;
 export declare function is_expandable_type(value_type: JsonValueType): boolean;
 export declare function is_primitive_type(value_type: JsonValueType): boolean;
@@ -14,3 +14,16 @@ export declare function find_matching_paths(value: unknown, query: string, curre
 export declare function get_ancestor_paths(path: string): string[];
 export declare function parse_path(path: string): (string | number)[];
 export declare function values_equal(val_a: unknown, val_b: unknown): boolean;
+export declare function parse_edited_value(text: string): unknown;
+export declare function set_at_path(root: unknown, path_str: string, new_value: unknown, root_label?: string): unknown;
+export declare function is_url(str: string): boolean;
+export declare function is_css_color(str: string): boolean;
+export declare function estimate_byte_size(value: unknown, max_depth?: number, current_depth?: number): number;
+export interface GhostEntry {
+    key: string | number;
+    value: unknown;
+    path: string;
+}
+export declare function build_ghost_map(diff_map: Map<string, DiffEntry>): Map<string, GhostEntry[]>;
+export declare function format_byte_size(bytes: number): string;
+export declare function compute_diff(old_val: unknown, new_val: unknown, current_path?: string, result?: Map<string, DiffEntry>, seen?: WeakSet<object>): Map<string, DiffEntry>;

package/dist/layout/json-tree/utils.js

@@ -390,3 +390,257 @@ export function values_equal(val_a, val_b) {
     }
     return false;
 }
+// Parse a raw edited string into a typed JSON value
+// Numbers, booleans, and null are auto-detected; everything else stays as string
+export function parse_edited_value(text) {
+    const trimmed = text.trim();
+    if (trimmed === `null`)
+        return null;
+    if (trimmed === `true`)
+        return true;
+    if (trimmed === `false`)
+        return false;
+    const num = Number(trimmed);
+    if (trimmed !== `` && Number.isFinite(num))
+        return num;
+    return text;
+}
+// Set a value at a dot/bracket path in a deep-cloned copy of root
+// root_label is stripped from the path prefix if present
+export function set_at_path(root, path_str, new_value, root_label) {
+    const segments = parse_path(path_str);
+    const start = root_label && segments[0] === root_label ? 1 : 0;
+    if (start >= segments.length)
+        return new_value;
+    const cloned = JSON.parse(JSON.stringify(root));
+    let current = cloned;
+    for (let idx = start; idx < segments.length - 1; idx++) {
+        const next = current[segments[idx]];
+        if (next === undefined || next === null)
+            return root; // bail — path no longer valid
+        current = next;
+    }
+    current[segments[segments.length - 1]] = new_value;
+    return cloned;
+}
+// URL regex for auto-detection in string values
+const URL_RE = /^https?:\/\/\S+$/;
+// CSS color patterns for swatch rendering
+const HEX_COLOR_RE = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const FUNC_COLOR_RE = /^(?:rgba?|hsla?|oklch|oklab|lch|lab|color)\([^)]*\)$/i;
+// Check if a string is a URL
+export function is_url(str) {
+    return URL_RE.test(str.trim());
+}
+// Check if a string looks like a CSS color value
+// Rejects strings with semicolons to prevent CSS injection
+export function is_css_color(str) {
+    const trimmed = str.trim();
+    if (trimmed.includes(`;`))
+        return false;
+    return HEX_COLOR_RE.test(trimmed) || FUNC_COLOR_RE.test(trimmed);
+}
+// Estimate the serialized byte size of a value (rough approximation)
+// Uses max_depth to avoid expensive deep recursion on large trees
+export function estimate_byte_size(value, max_depth = 4, current_depth = 0) {
+    if (current_depth >= max_depth)
+        return 10;
+    const type = get_value_type(value);
+    if (type === `null`)
+        return 4;
+    if (type === `undefined`)
+        return 9;
+    if (type === `boolean`)
+        return value ? 4 : 5;
+    if (type === `number` || type === `bigint`)
+        return String(value).length;
+    if (type === `string`)
+        return value.length + 2;
+    if (type === `symbol`)
+        return value.toString().length;
+    if (type === `function`)
+        return 20;
+    if (type === `date`)
+        return 24;
+    if (type === `regexp`)
+        return value.toString().length;
+    if (type === `error`) {
+        return `${value.name}: ${value.message}`.length;
+    }
+    // Accumulate child sizes for collection types
+    const child_depth = current_depth + 1;
+    const child_size = (val, overhead = 1) => estimate_byte_size(val, max_depth, child_depth) + overhead;
+    if (type === `array`) {
+        let size = 2;
+        for (const item of value)
+            size += child_size(item);
+        return size;
+    }
+    if (type === `object`) {
+        let size = 2;
+        for (const [key, val] of Object.entries(value)) {
+            size += key.length + 4 + child_size(val, 0);
+        }
+        return size;
+    }
+    if (type === `map`) {
+        let size = 2;
+        for (const [, val] of value)
+            size += child_size(val, 10);
+        return size;
+    }
+    if (type === `set`) {
+        let size = 2;
+        for (const val of value)
+            size += child_size(val);
+        return size;
+    }
+    return String(value).length;
+}
+// Pre-compute a map of parent_path -> removed children from a diff map
+// This avoids O(diff_size) iteration per expanded node
+export function build_ghost_map(diff_map) {
+    const ghost_map = new Map();
+    for (const [diff_path, entry] of diff_map) {
+        if (entry.status !== `removed`)
+            continue;
+        const segments = parse_path(diff_path);
+        if (segments.length === 0)
+            continue;
+        const parent_path = segments.length === 1 ? `` : format_path(segments.slice(0, -1));
+        const key = segments[segments.length - 1];
+        const ghosts = ghost_map.get(parent_path) ?? [];
+        ghosts.push({ key, value: entry.old_value, path: diff_path });
+        ghost_map.set(parent_path, ghosts);
+    }
+    return ghost_map;
+}
+// Format byte size as human-readable string (e.g., "1.2 KB")
+export function format_byte_size(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+// Compute diff between old and new values, returning path -> DiffEntry map
+// Only paths that differ are included (unchanged paths are omitted)
+export function compute_diff(old_val, new_val, current_path = ``, result = new Map(), seen = new WeakSet()) {
+    const old_type = get_value_type(old_val);
+    const new_type = get_value_type(new_val);
+    // Different types = changed
+    if (old_type !== new_type) {
+        result.set(current_path, {
+            status: `changed`,
+            path: current_path,
+            old_value: old_val,
+            new_value: new_val,
+        });
+        return result;
+    }
+    // Both primitive: compare values (with NaN === NaN special case)
+    if (is_primitive_type(old_type)) {
+        const both_nan = typeof old_val === `number` && typeof new_val === `number` &&
+            Number.isNaN(old_val) && Number.isNaN(new_val);
+        if (!both_nan && old_val !== new_val) {
+            result.set(current_path, {
+                status: `changed`,
+                path: current_path,
+                old_value: old_val,
+                new_value: new_val,
+            });
+        }
+        return result;
+    }
+    // Non-expandable special types (date, regexp, etc): compare string forms
+    if (!is_expandable_type(old_type)) {
+        if (String(old_val) !== String(new_val)) {
+            result.set(current_path, {
+                status: `changed`,
+                path: current_path,
+                old_value: old_val,
+                new_value: new_val,
+            });
+        }
+        return result;
+    }
+    // Prevent circular references
+    if (typeof old_val === `object` && old_val !== null) {
+        if (seen.has(old_val))
+            return result;
+        seen.add(old_val);
+    }
+    // Diff two indexed lists element-by-element (shared by array, map, set)
+    function diff_indexed(old_items, new_items) {
+        const max_len = Math.max(old_items.length, new_items.length);
+        for (let idx = 0; idx < max_len; idx++) {
+            const child_path = build_path(current_path, idx);
+            if (idx >= old_items.length) {
+                result.set(child_path, {
+                    status: `added`,
+                    path: child_path,
+                    new_value: new_items[idx],
+                });
+            }
+            else if (idx >= new_items.length) {
+                result.set(child_path, {
+                    status: `removed`,
+                    path: child_path,
+                    old_value: old_items[idx],
+                });
+            }
+            else {
+                compute_diff(old_items[idx], new_items[idx], child_path, result, seen);
+            }
+        }
+    }
+    if (old_type === `array`) {
+        diff_indexed(old_val, new_val);
+        return result;
+    }
+    // Objects: compare key sets and recurse
+    if (old_type === `object`) {
+        const old_obj = old_val;
+        const new_obj = new_val;
+        const all_keys = new Set([...Object.keys(old_obj), ...Object.keys(new_obj)]);
+        for (const key of all_keys) {
+            const child_path = build_path(current_path, key);
+            const in_old = key in old_obj;
+            const in_new = key in new_obj;
+            if (!in_old) {
+                result.set(child_path, {
+                    status: `added`,
+                    path: child_path,
+                    new_value: new_obj[key],
+                });
+            }
+            else if (!in_new) {
+                result.set(child_path, {
+                    status: `removed`,
+                    path: child_path,
+                    old_value: old_obj[key],
+                });
+            }
+            else {
+                compute_diff(old_obj[key], new_obj[key], child_path, result, seen);
+            }
+        }
+        return result;
+    }
+    // Maps: wrap entries as { key, value } to match JsonNode.get_children() rendering
+    if (old_type === `map`) {
+        diff_indexed(Array.from(old_val.entries()).map(([key, val]) => ({
+            key,
+            value: val,
+        })), Array.from(new_val.entries()).map(([key, val]) => ({
+            key,
+            value: val,
+        })));
+        return result;
+    }
+    if (old_type === `set`) {
+        diff_indexed(Array.from(old_val), Array.from(new_val));
+        return result;
+    }
+    return result;
+}