chore: move jsonviewer into ui package

packages/ui/src/lib/JsonViewer.svelte

@@ -0,0 +1,137 @@
+<script module>
+  const cache = new Map<string, Record<string, boolean>>();
+
+  function getStore(root: string): Record<string, boolean> {
+    if (!cache.has(root)) {
+      try {
+        const raw = localStorage.getItem(`json_viewer:${root}`);
+        cache.set(root, raw ? JSON.parse(raw) : {});
+      } catch {
+        cache.set(root, {});
+      }
+    }
+    return cache.get(root)!;
+  }
+
+  function readOpen(path: string, fallback: boolean): boolean {
+    const root = path.split('/')[0];
+    const store = getStore(root);
+    return path in store ? store[path] : fallback;
+  }
+
+  function writeOpen(path: string, value: boolean) {
+    const root = path.split('/')[0];
+    const store = getStore(root);
+    store[path] = value;
+    try {
+      localStorage.setItem(`json_viewer:${root}`, JSON.stringify(store));
+    } catch { /* quota exceeded etc */ }
+  }
+</script>
+
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import JsonViewer from './JsonViewer.svelte';
+
+  let {
+    value,
+    key,
+    depth = 0,
+    path = ''
+  }: { value: unknown; key?: string; depth?: number; path?: string } = $props();
+
+  const defaultOpen = $derived(depth < 4);
+  let open = $derived(browser && path ? readOpen(path, defaultOpen) : defaultOpen);
+  let flashing = $state(false);
+
+  const isArr = $derived(Array.isArray(value));
+  const isExpandable = $derived(value !== null && typeof value === 'object');
+  const open_bracket = $derived(isArr ? '[' : '{');
+  const close_bracket = $derived(isArr ? ']' : '}');
+  const items = $derived.by(() => {
+    if (isArr) {
+      return (value as unknown[]).map((v, i) => [String(i), v] as [string, unknown]);
+    }
+    if (value !== null && typeof value === 'object') {
+      return Object.entries(value as Record<string, unknown>).filter(
+        ([, v]) => v !== undefined
+      );
+    }
+    return [] as [string, unknown][];
+  });
+  const showKeys = $derived(!isArr || typeof items[0]?.[1] === "object")
+
+  function toggle(next: boolean) {
+    open = next;
+    if (browser && path) writeOpen(path, next);
+  }
+
+  let prevJson = '';
+  let flashTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  $effect(() => {
+    const json = JSON.stringify(value);
+    if (prevJson && json !== prevJson) {
+      if (flashTimeout) clearTimeout(flashTimeout);
+      flashing = true;
+      flashTimeout = setTimeout(() => {
+        flashing = false;
+        flashTimeout = null;
+      }, 500);
+    }
+    prevJson = json;
+  });
+</script>
+
+<span
+  class="font-mono text-xs leading-[1.6] rounded transition-[background-color] duration-500"
+  class:bg-layer-3={flashing}
+>
+  {#if key !== undefined}
+    <span class="text-text">{key}</span><span class="text-text/40">: </span>
+  {/if}
+
+  {#if isExpandable}
+    {#if items.length === 0}
+      <span class="text-text/50">{open_bracket}{close_bracket}</span>
+    {:else if open}
+      {#if depth > 0}
+        <button class="w-3 text-text/50 hover:text-text" onclick={() => toggle(false)}>
+          ▼
+        </button>
+      {/if}
+      <span class="text-text/50">{open_bracket}</span>
+      <div class="pl-4 border-l border-outline">
+        {#each items as [k, v], i (k)}
+          <div>
+            <JsonViewer
+              value={v}
+              key={showKeys ? k : undefined }
+              depth={depth + 1}
+              path={path ? `${path}/${k}` : k}
+            />{#if i < items.length - 1}<span class="text-text/20">,</span>{/if}
+          </div>
+        {/each}
+      </div>
+      <span class="text-text/50">{close_bracket}</span>
+    {:else}
+      <button
+        class="inline text-text/50 hover:text-text"
+        onclick={() => toggle(true)}
+      >
+        <span class="w-3 inline-block">▶</span>
+        {open_bracket}<span class="text-text/40 mx-1">{items.length}</span>{close_bracket}
+      </button>
+    {/if}
+  {:else if value === null}
+    <span class="text-emerald-500!">null</span>
+  {:else if typeof value === 'boolean'}
+    <span class="text-blue-500!">{value}</span>
+  {:else if typeof value === 'number'}
+    <span class="text-orange-400!">{value}</span>
+  {:else if typeof value === 'string'}
+    <span class="text-emerald-500!">"{value}"</span>
+  {:else}
+    <span class="text-text/70">{String(value)}</span>
+  {/if}
+</span>

packages/ui/src/lib/index.ts

@@ -7,6 +7,7 @@ export { default as InputShape } from './inputs/InputShape.svelte';
 export { default as InputVec3 } from './inputs/InputVec3.svelte';
 
 export { default as Details } from './Details.svelte';
+export { default as JsonViewer } from './JsonViewer.svelte';
 export { default as ShortCut } from './ShortCut.svelte';
 
 import Input from './Input.svelte';

packages/ui/src/routes/+page.svelte

@@ -8,6 +8,7 @@
     InputSelect,
     InputShape,
     InputVec3,
+    JsonViewer,
     ShortCut
   } from '$lib';
   import Section from './Section.svelte';
@@ -25,6 +26,32 @@
   let colorValue = $state<[number, number, number]>([59, 130, 246]);
   let mirrorShape = $state(true);
   let detailsOpen = $state(false);
+  let jsonValue = $state({
+    id: 1,
+    nodes: [{ id: 0, type: 'max/test/node', position: [0, 0] }, {
+      id: 1,
+      type: 'max/test/other',
+      position: [100, 50]
+    }],
+    edges: [[0, 0, 1, 'input']],
+    groups: [],
+    settings: { seed: 42, enabled: true }
+  });
+
+  function randomlyUpdateJson() {
+    const rand = Math.floor(Math.random() * 5);
+    if (rand === 0) {
+      jsonValue.nodes[0].position[0] += 1;
+    } else if (rand === 1) {
+      jsonValue.nodes[0].position[1] += 1;
+    } else if (rand === 2) {
+      jsonValue.settings.seed += 1;
+    } else if (rand === 3) {
+      jsonValue.settings.enabled = !jsonValue.settings.enabled;
+    } else if (rand === 4) {
+      jsonValue.id += Math.floor(Math.random() * 10 - 5);
+    }
+  }
 
   let points = $state([]);
   let theme = $state('dark');
@@ -56,6 +83,7 @@
   </Section>
 
   <Section title="Select" value={d}>
+    <i>Select with simple values</i>
     <InputSelect bind:value={selectValue} {options} />
   </Section>
 
@@ -86,6 +114,23 @@
     </Details>
   </Section>
 
+  <Section title="JsonViewer">
+    {#snippet header()}
+      <button
+        onclick={() => randomlyUpdateJson()}
+        class="-mt-1 bg-layer-2 p-1 px-2 rounded-sm cursor-pointer"
+      >
+        update
+      </button>
+    {/snippet}
+    <div class="w-64 bg-layer-1 p-2 rounded">
+      <JsonViewer
+        value={jsonValue}
+        path="demo"
+      />
+    </div>
+  </Section>
+
   <Section title="Shortcut">
     <div class="flex gap-4">
       <ShortCut ctrl key="S" />