From 6ef5dc28ed9a4874a7b5fb2a9dca73efd1632519 Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Sun, 3 May 2026 16:11:40 +0200
Subject: [PATCH] chore: move jsonviewer into ui package

---
 app/src/lib/sidebar/panels/GraphSource.svelte | 10 ++---
 .../ui/src/lib/JsonViewer.svelte              | 39 ++++++++--------
 packages/ui/src/lib/index.ts                  |  1 +
 packages/ui/src/routes/+page.svelte           | 45 +++++++++++++++++++
 pnpm-lock.yaml                                |  6 ---
 5 files changed, 71 insertions(+), 30 deletions(-)
 rename app/src/lib/sidebar/panels/JsonNode.svelte => packages/ui/src/lib/JsonViewer.svelte (73%)

diff --git a/app/src/lib/sidebar/panels/GraphSource.svelte b/app/src/lib/sidebar/panels/GraphSource.svelte
index 19abd48..efd3fce 100644
--- a/app/src/lib/sidebar/panels/GraphSource.svelte
+++ b/app/src/lib/sidebar/panels/GraphSource.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { Graph } from '$lib/types';
-  import JsonNode from './JsonNode.svelte';
+  import { JsonViewer } from '@nodarium/ui';
 
   const { graph }: { graph?: Graph } = $props();
 
   const data = $derived(
     graph
       ? {
-          ...graph,
-          nodes: graph.nodes.map((n: object) => ({ ...n, tmp: undefined, state: undefined }))
-        }
+        ...graph,
+        nodes: graph.nodes.map((n: object) => ({ ...n, tmp: undefined, state: undefined }))
+      }
       : null
   );
 </script>
 
 <div class="overflow-auto p-2">
   {#if data}
-    <JsonNode value={data} path="graph" />
+    <JsonViewer value={data} path="graph" />
   {:else}
     <span class="font-mono text-xs text-neutral-500">No graph loaded</span>
   {/if}
diff --git a/app/src/lib/sidebar/panels/JsonNode.svelte b/packages/ui/src/lib/JsonViewer.svelte
similarity index 73%
rename from app/src/lib/sidebar/panels/JsonNode.svelte
rename to packages/ui/src/lib/JsonViewer.svelte
index 2868476..7ee7f94 100644
--- a/app/src/lib/sidebar/panels/JsonNode.svelte
+++ b/packages/ui/src/lib/JsonViewer.svelte
@@ -31,7 +31,7 @@
 
 <script lang="ts">
   import { browser } from '$app/environment';
-  import JsonNode from './JsonNode.svelte';
+  import JsonViewer from './JsonViewer.svelte';
 
   let {
     value,
@@ -49,7 +49,7 @@
   const open_bracket = $derived(isArr ? '[' : '{');
   const close_bracket = $derived(isArr ? ']' : '}');
   const items = $derived.by(() => {
-    if (Array.isArray(value)) {
+    if (isArr) {
       return (value as unknown[]).map((v, i) => [String(i), v] as [string, unknown]);
     }
     if (value !== null && typeof value === 'object') {
@@ -59,6 +59,7 @@
     }
     return [] as [string, unknown][];
   });
+  const showKeys = $derived(!isArr || typeof items[0]?.[1] === "object")
 
   function toggle(next: boolean) {
     open = next;
@@ -84,53 +85,53 @@
 
 <span
   class="font-mono text-xs leading-[1.6] rounded transition-[background-color] duration-500"
-  class:bg-white={flashing}
+  class:bg-layer-3={flashing}
 >
   {#if key !== undefined}
-    <span class="text-neutral-300">{key}</span><span class="text-neutral-600">: </span>
+    <span class="text-text">{key}</span><span class="text-text/40">: </span>
   {/if}
 
   {#if isExpandable}
     {#if items.length === 0}
-      <span class="text-neutral-500">{open_bracket}{close_bracket}</span>
+      <span class="text-text/50">{open_bracket}{close_bracket}</span>
     {:else if open}
       {#if depth > 0}
-        <button class="w-3 text-neutral-500 hover:text-neutral-200" onclick={() => toggle(false)}>
+        <button class="w-3 text-text/50 hover:text-text" onclick={() => toggle(false)}>
           ▼
         </button>
       {/if}
-      <span class="text-neutral-500">{open_bracket}</span>
-      <div class="pl-4 border-l border-neutral-700/60">
+      <span class="text-text/50">{open_bracket}</span>
+      <div class="pl-4 border-l border-outline">
         {#each items as [k, v], i (k)}
           <div>
-            <JsonNode
+            <JsonViewer
               value={v}
-              key={k}
+              key={showKeys ? k : undefined }
               depth={depth + 1}
               path={path ? `${path}/${k}` : k}
-            />{#if i < items.length - 1}<span class="text-neutral-700">,</span>{/if}
+            />{#if i < items.length - 1}<span class="text-text/20">,</span>{/if}
           </div>
         {/each}
       </div>
-      <span class="text-neutral-500">{close_bracket}</span>
+      <span class="text-text/50">{close_bracket}</span>
     {:else}
       <button
-        class="inline text-neutral-500 hover:text-neutral-200"
+        class="inline text-text/50 hover:text-text"
         onclick={() => toggle(true)}
       >
         <span class="w-3 inline-block">▶</span>
-        {open_bracket}<span class="text-neutral-600 mx-1">{items.length}</span>{close_bracket}
+        {open_bracket}<span class="text-text/40 mx-1">{items.length}</span>{close_bracket}
       </button>
     {/if}
   {:else if value === null}
-    <span class="text-neutral-500!">null</span>
+    <span class="text-emerald-500!">null</span>
   {:else if typeof value === 'boolean'}
-    <span class="text-amber-400!">{value}</span>
+    <span class="text-blue-500!">{value}</span>
   {:else if typeof value === 'number'}
-    <span class="text-sky-400!">{value}</span>
+    <span class="text-orange-400!">{value}</span>
   {:else if typeof value === 'string'}
-    <span class="text-emerald-400!">"{value}"</span>
+    <span class="text-emerald-500!">"{value}"</span>
   {:else}
-    <span class="text-neutral-400">{String(value)}</span>
+    <span class="text-text/70">{String(value)}</span>
   {/if}
 </span>
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 9a51c8b..bc3be33 100644
--- a/packages/ui/src/lib/index.ts
+++ b/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';
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index 1daff88..12a91ec 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/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" />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68a6af9..e3fd078 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,12 +4,6 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-catalogs:
-  default:
-    chokidar-cli:
-      specifier: github:open-cli-tools/chokidar-cli#semver:v4.0.0
-      version: 4.0.0
-
 importers:
 
   .: