matterviz 0.3.1 → 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, is_css_color, is_url, 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
@@ -36,10 +36,24 @@ let trimmed_str = $derived(value_type === `string` ? value.trim() : ``);
 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
+// 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) {
+    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);
     }
 }
@@ -62,121 +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}
-  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="Click to copy"
->
-  {#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"
-    >
+{#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}
-    </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` &&
+    {/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% {
@@ -186,7 +258,6 @@ function toggle_expand(event) {
       background: transparent;
     }
   }
-  /* Expand/collapse button for long strings */
   .expand-btn {
     display: inline;
     background: none;
@@ -196,11 +267,10 @@ 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));
@@ -210,9 +280,19 @@ function toggle_expand(event) {
   .url-link {
     color: var(--jt-url, light-dark(#0066cc, #4fc3f7));
     text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
   }
-  .url-link: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;

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

@@ -16,6 +16,8 @@ export interface JsonTreeProps {
     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: {
@@ -27,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>;
@@ -41,8 +44,8 @@ export interface JsonTreeContext {
     collapse_all: () => void;
     collapse_to_level: (level: number) => void;
     set_focused: (path: string | null) => void;
-    copy_value: (path: string, value: unknown, event?: MouseEvent) => Promise<void>;
-    copy_path: (path: string, event?: MouseEvent) => 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;
@@ -54,7 +57,12 @@ export interface JsonTreeContext {
     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 {

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

@@ -14,6 +14,8 @@ 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;

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

@@ -390,6 +390,39 @@ 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

package/dist/math.d.ts

@@ -34,6 +34,7 @@ export type Matrix4Tuple = [
     number,
     number
 ];
+export declare function combinations<T>(arr: T[], k: number): T[][];
 export declare const LOG_EPS = 1e-9;
 export declare const EPS = 1e-10;
 export declare const RAD_TO_DEG: number;
@@ -71,8 +72,11 @@ export declare const cross_3d: (vec1: Vec3, vec2: Vec3) => Vec3;
 export declare const lerp: (start: number, end: number, t: number) => number;
 export declare const lerp_vec3: (start: Vec3, end: Vec3, t: number) => Vec3;
 export declare const centered_frac: (val: number) => number;
+export declare const vecs_equal: (vec_a?: Vec3, vec_b?: Vec3) => boolean;
 export declare function normalize_vec3(vec: Vec3, fallback?: Vec3): Vec3;
 export declare function compute_in_plane_basis(normal: Vec3): [Vec3, Vec3];
+export declare function are_coplanar(points: number[][], tolerance?: number): boolean;
+export declare function merge_coplanar_triangles(positions: Float32Array, tolerance?: number): Float32Array;
 export declare function compute_bounding_box(vertices: Vec3[]): {
     min: Vec3;
     max: Vec3;
@@ -86,3 +90,6 @@ export declare function compute_bounding_box_2d(vertices: Vec2[]): {
     height: number;
 };
 export declare function polygon_centroid(vertices: Vec2[]): Vec2;
+export declare function solve_linear_system(A: number[][], // NxN coefficient matrix
+b: number[]): number[] | null;
+export declare function convex_hull_2d(points: Vec2[]): Vec2[];