From 2af01695152ca894b8ced76464ee6087f19a0fa3 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Sun, 31 Mar 2024 16:57:36 +0700
Subject: [PATCH 1/5] dogfooding svelte 5

---
 package.json                              |   4 +-
 pnpm-lock.yaml                            | 142 +++++++++++-----------
 src/app.d.ts                              |   2 +-
 src/client/svelte.js                      |   7 +-
 src/entry.ts                              |   4 +-
 src/lib/components/Button.svelte          |  13 +-
 src/lib/components/Divider.svelte         |   8 +-
 src/lib/components/Indexer.svelte         |  15 ++-
 src/lib/components/Resizable.svelte       |  14 ++-
 src/lib/nodes/Block.svelte                |  14 ++-
 src/lib/nodes/Element.svelte              |  37 +++---
 src/lib/nodes/ElementAttributes.svelte    |  26 ++--
 src/lib/nodes/Ellipsis.svelte             |  10 +-
 src/lib/nodes/Iteration.svelte            |  10 +-
 src/lib/nodes/Node.svelte                 |  45 +++----
 src/lib/nodes/Slot.svelte                 |  10 +-
 src/lib/panel/Editable.svelte             |  27 ++--
 src/lib/panel/Expandable.svelte           |  48 ++++----
 src/lib/panel/PropertyList.svelte         |  12 +-
 src/lib/{runtime.ts => runtime.svelte.ts} |  57 ++++-----
 src/routes/+layout.svelte                 | 101 ++++++++-------
 src/routes/Breadcrumbs.svelte             |  25 ++--
 src/routes/ConnectMessage.svelte          |   2 +-
 src/routes/Inspector.svelte               |  27 ++--
 src/routes/ProfileButton.svelte           |   4 +-
 src/routes/Profiler.svelte                |  18 +--
 src/routes/ProfilerFrame.svelte           |  14 ++-
 src/routes/SearchBox.svelte               |  26 ++--
 src/routes/VisibilitySelection.svelte     |  10 +-
 svelte.config.js                          |   4 +
 30 files changed, 396 insertions(+), 340 deletions(-)
 rename src/lib/{runtime.ts => runtime.svelte.ts} (65%)

diff --git a/package.json b/package.json
index d945580..f64dac6 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "pnpm run --parallel \"/dev:*/\"",
-		"dev:app": "vite build --watch",
+		"dev:app": "vite build -wd --minify=false --sourcemap=inline",
 		"dev:scripts": "rollup -cw",
 		"build": "rollup -c && vite build",
 		"build:zip": "cd build && zip -r svelte-devtools.zip *",
@@ -22,7 +22,7 @@
 		"prettier-plugin-sort-package-json": "^0.2.0",
 		"prettier-plugin-svelte": "^3.2.1",
 		"rollup": "^4.12.0",
-		"svelte": "^4.2.11",
+		"svelte": "5.0.0-next.90",
 		"svelte-check": "^3.6.4",
 		"typescript": "^5.3.3",
 		"vite": "^5.1.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f14987..aab52af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ settings:
 devDependencies:
   '@sveltejs/vite-plugin-svelte':
     specifier: ^3.0.2
-    version: 3.0.2(svelte@4.2.11)(vite@5.1.4)
+    version: 3.0.2(svelte@5.0.0-next.90)(vite@5.1.4)
   '@types/chrome':
     specifier: ^0.0.260
     version: 0.0.260
@@ -22,16 +22,16 @@ devDependencies:
     version: 0.2.0(prettier@3.2.5)
   prettier-plugin-svelte:
     specifier: ^3.2.1
-    version: 3.2.1(prettier@3.2.5)(svelte@4.2.11)
+    version: 3.2.1(prettier@3.2.5)(svelte@5.0.0-next.90)
   rollup:
     specifier: ^4.12.0
     version: 4.12.0
   svelte:
-    specifier: ^4.2.11
-    version: 4.2.11
+    specifier: 5.0.0-next.90
+    version: 5.0.0-next.90
   svelte-check:
     specifier: ^3.6.4
-    version: 3.6.4(svelte@4.2.11)
+    version: 3.6.4(svelte@5.0.0-next.90)
   typescript:
     specifier: ^5.3.3
     version: 5.3.3
@@ -41,12 +41,12 @@ devDependencies:
 
 packages:
 
-  /@ampproject/remapping@2.2.1:
-    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
+  /@ampproject/remapping@2.3.0:
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.22
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
   /@esbuild/aix-ppc64@0.19.12:
@@ -256,13 +256,13 @@ packages:
     dev: true
     optional: true
 
-  /@jridgewell/gen-mapping@0.3.3:
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+  /@jridgewell/gen-mapping@0.3.5:
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.22
+      '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
   /@jridgewell/resolve-uri@3.1.2:
@@ -270,8 +270,8 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: true
 
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+  /@jridgewell/set-array@1.2.1:
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
     dev: true
 
@@ -286,6 +286,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /@jridgewell/trace-mapping@0.3.25:
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -411,7 +418,7 @@ packages:
     dev: true
     optional: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.4):
+  /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@5.0.0-next.90)(vite@5.1.4):
     resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
@@ -419,28 +426,28 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.11)(vite@5.1.4)
+      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@5.0.0-next.90)(vite@5.1.4)
       debug: 4.3.4
-      svelte: 4.2.11
+      svelte: 5.0.0-next.90
       vite: 5.1.4(@types/node@20.11.19)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.11)(vite@5.1.4):
+  /@sveltejs/vite-plugin-svelte@3.0.2(svelte@5.0.0-next.90)(vite@5.1.4):
     resolution: {integrity: sha512-MpmF/cju2HqUls50WyTHQBZUV3ovV/Uk8k66AN2gwHogNAG8wnW8xtZDhzNBsFJJuvmq1qnzA5kE7YfMJNFv2Q==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.11)(vite@5.1.4)
+      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@5.0.0-next.90)(vite@5.1.4)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.7
-      svelte: 4.2.11
-      svelte-hmr: 0.15.3(svelte@4.2.11)
+      svelte: 5.0.0-next.90
+      svelte-hmr: 0.15.3(svelte@5.0.0-next.90)
       vite: 5.1.4(@types/node@20.11.19)
       vitefu: 0.2.5(vite@5.1.4)
     transitivePeerDependencies:
@@ -482,6 +489,14 @@ packages:
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
     dev: true
 
+  /acorn-typescript@1.4.13(acorn@8.11.3):
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+    dependencies:
+      acorn: 8.11.3
+    dev: true
+
   /acorn@8.11.3:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
@@ -555,28 +570,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@types/estree': 1.0.5
-      acorn: 8.11.3
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-    dev: true
-
   /concat-map@0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
 
-  /css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.0.2
-    dev: true
-
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -639,9 +636,14 @@ packages:
       '@esbuild/win32-x64': 0.19.12
     dev: true
 
-  /estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+  /esm-env@1.0.0:
+    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
+    dev: true
+
+  /esrap@1.2.1:
+    resolution: {integrity: sha512-dhkcOLfN/aDdMFI1iwPEcy/XqAZzGNfgfEJjZozy2tia6u0dQoZyXzkRshHTckuNsM+c0CYQndY+uRFe3N+AIQ==}
     dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
       '@types/estree': 1.0.5
     dev: true
 
@@ -768,8 +770,11 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+  /magic-string@0.30.8:
+    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
   /merge2@1.4.1:
@@ -845,14 +850,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-    dependencies:
-      '@types/estree': 1.0.5
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-    dev: true
-
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
@@ -879,14 +876,14 @@ packages:
       prettier: 3.2.5
     dev: true
 
-  /prettier-plugin-svelte@3.2.1(prettier@3.2.5)(svelte@4.2.11):
+  /prettier-plugin-svelte@3.2.1(prettier@3.2.5)(svelte@5.0.0-next.90):
     resolution: {integrity: sha512-ENAPbIxASf2R79IZwgkG5sBdeNA9kLRlXVvKKmTXh79zWTy0KKoT86XO2pHrTitUPINd+iXWy12MRmgzKGVckA==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
     dependencies:
       prettier: 3.2.5
-      svelte: 4.2.11
+      svelte: 5.0.0-next.90
     dev: true
 
   /prettier@3.2.5:
@@ -990,7 +987,7 @@ packages:
       min-indent: 1.0.1
     dev: true
 
-  /svelte-check@3.6.4(svelte@4.2.11):
+  /svelte-check@3.6.4(svelte@5.0.0-next.90):
     resolution: {integrity: sha512-mY/dqucqm46p72M8yZmn81WPZx9mN6uuw8UVfR3ZKQeLxQg5HDGO3HHm5AZuWZPYNMLJ+TRMn+TeN53HfQ/vsw==}
     hasBin: true
     peerDependencies:
@@ -1002,8 +999,8 @@ packages:
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      svelte: 4.2.11
-      svelte-preprocess: 5.1.3(svelte@4.2.11)(typescript@5.3.3)
+      svelte: 5.0.0-next.90
+      svelte-preprocess: 5.1.3(svelte@5.0.0-next.90)(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -1017,16 +1014,16 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-hmr@0.15.3(svelte@4.2.11):
+  /svelte-hmr@0.15.3(svelte@5.0.0-next.90):
     resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
     dependencies:
-      svelte: 4.2.11
+      svelte: 5.0.0-next.90
     dev: true
 
-  /svelte-preprocess@5.1.3(svelte@4.2.11)(typescript@5.3.3):
+  /svelte-preprocess@5.1.3(svelte@5.0.0-next.90)(typescript@5.3.3):
     resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
     engines: {node: '>= 16.0.0', pnpm: ^8.0.0}
     requiresBuild: true
@@ -1069,28 +1066,27 @@ packages:
       magic-string: 0.30.7
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.2.11
+      svelte: 5.0.0-next.90
       typescript: 5.3.3
     dev: true
 
-  /svelte@4.2.11:
-    resolution: {integrity: sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==}
-    engines: {node: '>=16'}
+  /svelte@5.0.0-next.90:
+    resolution: {integrity: sha512-qx5shVIRQ9b3VPgj/rim16dWi3md8B8HjHSO5p6RCSg/GP00f9CVUoUtnuCpT4f7ZnBJa/IG3v2rgW9Zn9zEqg==}
+    engines: {node: '>=18'}
     dependencies:
-      '@ampproject/remapping': 2.2.1
+      '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.22
       '@types/estree': 1.0.5
       acorn: 8.11.3
+      acorn-typescript: 1.4.13(acorn@8.11.3)
       aria-query: 5.3.0
       axobject-query: 4.0.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      esm-env: 1.0.0
+      esrap: 1.2.1
       is-reference: 3.0.2
       locate-character: 3.0.0
-      magic-string: 0.30.7
-      periscopic: 3.1.0
+      magic-string: 0.30.8
+      zimmerframe: 1.1.2
     dev: true
 
   /to-regex-range@5.0.1:
@@ -1160,3 +1156,7 @@ packages:
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
+
+  /zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+    dev: true
diff --git a/src/app.d.ts b/src/app.d.ts
index e7fd4d4..70beaea 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -34,7 +34,7 @@ declare global {
 	};
 
 	type SvelteBlockDetail = {
-		id: number;
+		id: string;
 		source: string;
 		type:
 			| 'anchor'
diff --git a/src/client/svelte.js b/src/client/svelte.js
index ee19f15..f36958c 100644
--- a/src/client/svelte.js
+++ b/src/client/svelte.js
@@ -3,7 +3,6 @@ import { listeners } from './listener.js';
 
 /** @type {undefined | SvelteBlockDetail} */
 let current_block;
-let pointer = 0;
 
 /** @param {number | Node} id */
 export function getNode(id) {
@@ -81,7 +80,7 @@ document.addEventListener('SvelteRegisterComponent', ({ detail }) => {
 let last_promise;
 document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
 	const { type, id, block, ...rest } = detail;
-	const current_node_id = pointer++;
+	const current_node_id = crypto.randomUUID();
 
 	if (block.m) {
 		const original = block.m;
@@ -134,7 +133,7 @@ document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
 					// @ts-expect-error - each block fallback
 					group = /** @type {SvelteBlockDetail} */ ({
 						version: '',
-						id: pointer++,
+						id: crypto.randomUUID(),
 						type: 'block',
 						tagName: 'each',
 						container: parent,
@@ -214,7 +213,7 @@ document.addEventListener('SvelteDOMInsert', ({ detail }) => {
 			target,
 			// @ts-expect-error - missing properties are irrelevant
 			node: {
-				id: pointer++,
+				id: crypto.randomUUID(),
 				type,
 				detail: element,
 				tagName: element.nodeName.toLowerCase(),
diff --git a/src/entry.ts b/src/entry.ts
index 6775fb8..054f97f 100644
--- a/src/entry.ts
+++ b/src/entry.ts
@@ -1,12 +1,14 @@
 import './app.css';
 import App from './routes/+layout.svelte';
 
+import { mount } from 'svelte';
+
 if (chrome.devtools.panels.themeName === 'dark') {
 	document.body.classList.add('dark');
 } else {
 	document.body.classList.remove('dark');
 }
 
-export default new App({
+export default mount(App, {
 	target: document.querySelector('#app')!,
 });
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index f6038e0..2f57949 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
-	export let type: 'button' | 'reset' | 'submit' = 'button';
-	export let disabled = false;
-	export let active = false;
+	interface Props {
+		type?: 'button' | 'reset' | 'submit';
+		disabled?: boolean;
+		active?: boolean;
+		onclick(event: MouseEvent): void;
+	}
+
+	let { type = 'button', disabled = false, active = false, onclick }: Props = $props();
 </script>
 
-<button {type} {disabled} class:active on:click>
+<button {type} {disabled} class:active {onclick}>
 	<slot />
 </button>
 
diff --git a/src/lib/components/Divider.svelte b/src/lib/components/Divider.svelte
index abd5d57..a44166d 100644
--- a/src/lib/components/Divider.svelte
+++ b/src/lib/components/Divider.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let type: 'horizontal' | 'vertical';
-	export let spacing: `${string}rem` = '0rem';
+	interface Props {
+		type: 'horizontal' | 'vertical';
+		spacing?: `${string}rem`;
+	}
+
+	let { type, spacing = '0rem' }: Props = $props();
 </script>
 
 <div class={type} style="--spacing: {spacing}"></div>
diff --git a/src/lib/components/Indexer.svelte b/src/lib/components/Indexer.svelte
index 4c69cb8..d966b46 100644
--- a/src/lib/components/Indexer.svelte
+++ b/src/lib/components/Indexer.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
-	import { query } from '$lib/store';
+	import { app } from '$lib/state.svelte';
 
-	export let text = '';
-	export let color = '';
+	const { text = '', color = '' } = $props();
 
-	$: i = text.indexOf($query);
+	const i = $derived(text.indexOf(app.query));
 </script>
 
 <p style:color>
-	{#if i === -1 || $query.length < 2}
+	{#if i === -1 || app.query.length < 2}
 		<span>{text}</span>
 	{:else}
 		{#if i !== 0}<span>{text.slice(0, i)}</span>{/if}
-		<mark>{text.slice(i, i + $query.length)}</mark>
-		{#if i + $query.length < text.length}
-			<span>{text.slice(i + $query.length)}</span>
+		<mark>{text.slice(i, i + app.query.length)}</mark>
+		{#if i + app.query.length < text.length}
+			<span>{text.slice(i + app.query.length)}</span>
 		{/if}
 	{/if}
 </p>
diff --git a/src/lib/components/Resizable.svelte b/src/lib/components/Resizable.svelte
index bb63298..0a0d2ab 100644
--- a/src/lib/components/Resizable.svelte
+++ b/src/lib/components/Resizable.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
-	export let axis: 'x' | 'y';
+	interface Props {
+		axis: 'x' | 'y';
+	}
+
+	let { axis }: Props = $props();
 
 	let resizing = false;
-	let size = 400;
+	let size = $state(400);
 </script>
 
 <svelte:window
-	on:mouseup={() => (resizing = false)}
-	on:mousemove={({ pageX: x, pageY: y }) => {
+	onmouseup={() => (resizing = false)}
+	onmousemove={({ pageX: x, pageY: y }) => {
 		if (!resizing) return;
 		size = axis === 'x' ? window.innerWidth - x : window.innerHeight - y;
 	}}
@@ -15,7 +19,7 @@
 
 <aside class={axis} style="{axis === 'x' ? 'width' : 'height'}: {size}px">
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="{axis} resize" on:mousedown={() => (resizing = true)} />
+	<div class="{axis} resize" onmousedown={() => (resizing = true)} />
 
 	<div><slot /></div>
 </aside>
diff --git a/src/lib/nodes/Block.svelte b/src/lib/nodes/Block.svelte
index 85310f0..ca44996 100644
--- a/src/lib/nodes/Block.svelte
+++ b/src/lib/nodes/Block.svelte
@@ -2,20 +2,24 @@
 	import Indexer from '../components/Indexer.svelte';
 	import Ellipsis from './Ellipsis.svelte';
 
-	export let tagName: string;
-	export let source: string | undefined;
-	export let expanded: boolean;
+	interface Props {
+		tagName: string;
+		source?: string;
+		expanded: boolean;
+	}
+
+	let { tagName, source, expanded }: Props = $props();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class:expanded class="expandable tag-open tag-name" on:dblclick={() => (expanded = !expanded)}>
+<div class:expanded class="expandable tag-open tag-name" ondblclick={() => (expanded = !expanded)}>
 	{#if source}
 		<span>{source}</span>
 	{:else}
 		<Indexer text={`{#${tagName}}`} />
 	{/if}
 	{#if !expanded}
-		<Ellipsis on:click={() => (expanded = true)} />
+		<Ellipsis onclick={() => (expanded = true)} />
 		<Indexer text={`{/${tagName}}`} />
 	{/if}
 </div>
diff --git a/src/lib/nodes/Element.svelte b/src/lib/nodes/Element.svelte
index 3c4c03e..c5b188d 100644
--- a/src/lib/nodes/Element.svelte
+++ b/src/lib/nodes/Element.svelte
@@ -5,12 +5,26 @@
 
 	import type { ComponentProps } from 'svelte';
 
-	export let tagName: string;
-	export let empty: boolean;
-	export let expanded: boolean;
+	interface Props {
+		tagName: string;
+		empty: boolean;
+		expanded: boolean;
+		attributes: ComponentProps<ElementAttributes>['attributes'];
+		listeners: ComponentProps<ElementAttributes>['listeners'];
+	}
+
+	let { tagName, empty, expanded = $bindable(), attributes, listeners }: Props = $props();
+
+	const memory: Record<string, string> = {};
+	const cached = $derived(
+		attributes.map((o) => {
+			const value = stringify(o.value);
+			const flash = memory[o.key] !== value;
+			memory[o.key] = value;
 
-	export let attributes: ComponentProps<ElementAttributes>['attributes'];
-	export let listeners: ComponentProps<ElementAttributes>['listeners'];
+			return { ...o, value, flash };
+		}),
+	);
 
 	function stringify(value: any): string {
 		switch (typeof value) {
@@ -37,15 +51,6 @@
 				return '';
 		}
 	}
-
-	const memory: Record<string, string> = {};
-	$: cached = attributes.map((o) => {
-		const value = stringify(o.value);
-		const flash = memory[o.key] !== value;
-		memory[o.key] = value;
-
-		return { ...o, value, flash };
-	});
 </script>
 
 {#if empty}
@@ -58,7 +63,7 @@
 		<span>&nbsp;/&gt;</span>
 	</div>
 {:else}
-	<div role="group" class:expanded class="expandable" on:dblclick={() => (expanded = !expanded)}>
+	<div role="group" class:expanded class="expandable" ondblclick={() => (expanded = !expanded)}>
 		<span>&lt;</span>
 		<span class="tag-name">
 			<Indexer text={tagName} />
@@ -66,7 +71,7 @@
 		<ElementAttributes attributes={cached} {listeners} />
 		<span>&gt;</span>
 		{#if !expanded}
-			<Ellipsis on:click={() => (expanded = true)} />
+			<Ellipsis onclick={() => (expanded = true)} />
 
 			<span>&lt;/</span>
 			<span class="tag-name">
diff --git a/src/lib/nodes/ElementAttributes.svelte b/src/lib/nodes/ElementAttributes.svelte
index c76a41e..69280f3 100644
--- a/src/lib/nodes/ElementAttributes.svelte
+++ b/src/lib/nodes/ElementAttributes.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
 	import Indexer from '../components/Indexer.svelte';
 
-	export let attributes: Array<{
-		key: string;
-		value: string;
-		bounded?: boolean;
-		flash?: boolean;
-	}>;
-	export let listeners: Array<{
-		event: any;
-		handler: any;
-		modifiers: any;
-	}>;
+	interface Props {
+		attributes: Array<{
+			key: string;
+			value: string;
+			bounded?: boolean;
+			flash?: boolean;
+		}>;
+		listeners: Array<{
+			event: any;
+			handler: any;
+			modifiers: any;
+		}>;
+	}
+
+	let { attributes, listeners }: Props = $props();
 </script>
 
 {#each attributes as { key, value, bounded, flash } (key)}
diff --git a/src/lib/nodes/Ellipsis.svelte b/src/lib/nodes/Ellipsis.svelte
index 9edc0e8..7ee9cbd 100644
--- a/src/lib/nodes/Ellipsis.svelte
+++ b/src/lib/nodes/Ellipsis.svelte
@@ -1,4 +1,12 @@
-<button on:click>&bull; &bull; &bull;</button>
+<script lang="ts">
+	interface Props {
+		onclick(event: MouseEvent): void;
+	}
+
+	let { onclick }: Props = $props();
+</script>
+
+<button {onclick}>&bull; &bull; &bull;</button>
 
 <style>
 	button {
diff --git a/src/lib/nodes/Iteration.svelte b/src/lib/nodes/Iteration.svelte
index d838ec8..cdcc56f 100644
--- a/src/lib/nodes/Iteration.svelte
+++ b/src/lib/nodes/Iteration.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
 	import Ellipsis from './Ellipsis.svelte';
 
-	export let expanded: boolean;
+	interface Props {
+		expanded: boolean;
+	}
+
+	let { expanded }: Props = $props();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="expandable" on:dblclick={() => (expanded = !expanded)}>
+<div class="expandable" ondblclick={() => (expanded = !expanded)}>
 	<span>&#8618;</span>
 	{#if !expanded}
-		<Ellipsis on:click={() => (expanded = true)} />
+		<Ellipsis onclick={() => (expanded = true)} />
 	{/if}
 </div>
 
diff --git a/src/lib/nodes/Node.svelte b/src/lib/nodes/Node.svelte
index 89bee21..9669cb6 100644
--- a/src/lib/nodes/Node.svelte
+++ b/src/lib/nodes/Node.svelte
@@ -3,43 +3,46 @@
 	import Block from './Block.svelte';
 	import Element from './Element.svelte';
 	import Iteration from './Iteration.svelte';
+	import Node from './Node.svelte';
 	import Slot from './Slot.svelte';
 
-	import { background } from '$lib/runtime';
-	import { hovered, selected, visibility } from '$lib/store';
+	import { background } from '$lib/runtime.svelte';
+	import { app, visibility } from '$lib/state.svelte';
 
-	export let node: NonNullable<typeof $selected>;
-	export let depth = 1;
+	interface Props {
+		node: NonNullable<typeof app.selected>;
+		depth?: number;
+	}
 
-	node.invalidate = () => (node = node);
+	let { node, depth = 1 }: Props = $props();
 
 	function invisible(n: typeof node): boolean {
-		return !$visibility[n.type] && n.children.every(invisible);
+		return !visibility[n.type] && n.children.every(invisible);
 	}
 
-	let lastLength = node.children.length;
-	let flash = false;
-	$: {
+	let lastLength = $state(node.children.length);
+	let flash = $state(false);
+	$effect(() => {
 		flash = flash || node.children.length !== lastLength;
 		lastLength = node.children.length;
-	}
+	});
 </script>
 
-{#if $visibility[node.type]}
+{#if visibility[node.type]}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<li
 		class:flash
 		style:--indent="{depth * 12}px"
-		data-current={$selected?.id === node.id || null}
-		data-hovered={$hovered?.id === node.id || null}
+		data-current={app.selected?.id === node.id || null}
+		data-hovered={app.hovered?.id === node.id || null}
 		bind:this={node.dom}
 		on:animationend={() => (flash = false)}
-		on:click|stopPropagation={() => selected.set(node)}
+		on:click|stopPropagation={() => (app.selected = node)}
 		on:mousemove|stopPropagation={() => {
-			if ($hovered?.id === node.id) return;
+			if (app.hovered?.id === node.id) return;
 			background.send('bridge::ext/highlight', node.id);
-			hovered.set(node);
+			app.hovered = node;
 		}}
 	>
 		{#if node.type === 'component' || node.type === 'element'}
@@ -52,7 +55,7 @@
 			>
 				<ul>
 					{#each node.children as child (child.id)}
-						<svelte:self node={child} depth={depth + 1} />
+						<Node node={child} depth={depth + 1} />
 					{/each}
 				</ul>
 			</Element>
@@ -60,7 +63,7 @@
 			<Block tagName={node.tagName} source={node.detail.source} bind:expanded={node.expanded}>
 				<ul>
 					{#each node.children as child (child.id)}
-						<svelte:self node={child} depth={depth + 1} />
+						<Node node={child} depth={depth + 1} />
 					{/each}
 				</ul>
 			</Block>
@@ -68,7 +71,7 @@
 			<Iteration bind:expanded={node.expanded}>
 				<ul>
 					{#each node.children as child (child.id)}
-						<svelte:self node={child} depth={depth + 1} />
+						<Node node={child} depth={depth + 1} />
 					{/each}
 				</ul>
 			</Iteration>
@@ -76,7 +79,7 @@
 			<Slot tagName={node.tagName} bind:expanded={node.expanded}>
 				<ul>
 					{#each node.children as child (child.id)}
-						<svelte:self node={child} depth={depth + 1} />
+						<Node node={child} depth={depth + 1} />
 					{/each}
 				</ul>
 			</Slot>
@@ -90,7 +93,7 @@
 	</li>
 {:else}
 	{#each node.children as child (child.id)}
-		<svelte:self node={child} {depth} />
+		<Node node={child} {depth} />
 	{/each}
 {/if}
 
diff --git a/src/lib/nodes/Slot.svelte b/src/lib/nodes/Slot.svelte
index ff8073e..28d267a 100644
--- a/src/lib/nodes/Slot.svelte
+++ b/src/lib/nodes/Slot.svelte
@@ -2,8 +2,12 @@
 	import Indexer from '../components/Indexer.svelte';
 	import Ellipsis from './Ellipsis.svelte';
 
-	export let tagName: string;
-	export let expanded: boolean;
+	interface Props {
+		tagName: string;
+		expanded: boolean;
+	}
+
+	let { tagName, expanded }: Props = $props();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -11,7 +15,7 @@
 	<Indexer text={`<${tagName}>`} color="#c586c0" />
 
 	{#if !expanded}
-		<Ellipsis on:click={() => (expanded = true)} />
+		<Ellipsis onclick={() => (expanded = true)} />
 		<Indexer text={`</${tagName}>`} color="#c586c0" />
 	{/if}
 </div>
diff --git a/src/lib/panel/Editable.svelte b/src/lib/panel/Editable.svelte
index 8ae7566..be8865a 100644
--- a/src/lib/panel/Editable.svelte
+++ b/src/lib/panel/Editable.svelte
@@ -1,38 +1,37 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	export let type: 'string' | 'number' | 'null';
-	export let value: any;
-	export let readonly: boolean;
+	interface Props {
+		type: 'string' | 'number' | 'null';
+		value: any;
+		readonly: boolean;
+		onchange(updated: unknown): void;
+	}
 
-	const dispatch = createEventDispatcher();
+	let { type, value, readonly, onchange }: Props = $props();
 
-	let editing = false;
+	let editing = $state(false);
 </script>
 
 {#if editing}
 	<input
 		value={JSON.stringify(value)}
-		on:blur={({ target }) => {
+		onblur={({ target }) => {
 			editing = false;
 			// @ts-expect-error - target and value exists
 			const updated = target.value;
-			value = JSON.parse(updated);
-			dispatch('change', updated);
+			onchange((value = JSON.parse(updated)));
 		}}
-		on:keydown={({ key, target }) => {
+		onkeydown={({ key, target }) => {
 			if (key !== 'Enter') return;
 			editing = false;
 			// @ts-expect-error - target and value exists
 			const updated = target.value;
-			value = JSON.parse(updated);
-			dispatch('change', updated);
+			onchange((value = JSON.parse(updated)));
 		}}
 	/>
 {:else}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<span class:readonly class={type} on:click={() => (editing = !readonly)}>
+	<span class:readonly class={type} onclick={() => (editing = !readonly)}>
 		{JSON.stringify(value)}
 	</span>
 {/if}
diff --git a/src/lib/panel/Expandable.svelte b/src/lib/panel/Expandable.svelte
index c3a3d71..dd279bd 100644
--- a/src/lib/panel/Expandable.svelte
+++ b/src/lib/panel/Expandable.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
 	import Editable from './Editable.svelte';
 
-	import { createEventDispatcher } from 'svelte';
+	interface Props {
+		key: string;
+		value: any;
+		readonly: boolean;
+		error?: string;
+		onchange(updated: unknown): void;
+	}
 
-	export let key: string;
-	export let value: any;
-	export let error: string | undefined;
-	export let readonly: boolean;
+	const { key, value, readonly, error, onchange }: Props = $props();
 
 	function stringify(value: unknown, k?: any, v?: any): string {
 		if (Array.isArray(value))
@@ -29,19 +32,20 @@
 		}
 	}
 
-	const dispatch = createEventDispatcher();
-
-	let expanded = false;
+	let expanded = $state(false);
 
-	$: type = typeof value;
-	$: expandable =
-		value != null &&
-		value === value &&
-		type === 'object' &&
-		((Array.isArray(value) && value.length) ||
-			value.__is === 'function' ||
-			value.__is === 'symbol' ||
-			Object.keys(value).length);
+	const type = $derived(typeof value);
+	const expandable = $derived.by(() => {
+		return (
+			value != null &&
+			value === value &&
+			type === 'object' &&
+			((Array.isArray(value) && value.length) ||
+				value.__is === 'function' ||
+				value.__is === 'symbol' ||
+				Object.keys(value).length)
+		);
+	});
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -58,11 +62,11 @@
 	<span>&nbsp;</span>
 
 	{#if type === 'string'}
-		<Editable type="string" {value} {readonly} on:change />
+		<Editable type="string" {value} {readonly} {onchange} />
 	{:else if value == null || value !== value}
-		<Editable type="null" {value} {readonly} on:change />
+		<Editable type="null" {value} {readonly} {onchange} />
 	{:else if type === 'number' || type === 'boolean'}
-		<Editable type="number" {value} {readonly} on:change />
+		<Editable type="number" {value} {readonly} {onchange} />
 	{:else if Array.isArray(value)}
 		<span class="object">Array [{value.length || ''}]</span>
 
@@ -73,7 +77,7 @@
 						{key}
 						value={v}
 						{readonly}
-						on:change={(e) => dispatch('change', stringify(value, key, e.detail))}
+						onchange={(updated: unknown) => onchange(stringify(value, key, updated))}
 					/>
 				{/each}
 			</ul>
@@ -93,7 +97,7 @@
 							{key}
 							value={v}
 							{readonly}
-							on:change={(e) => dispatch('change', stringify(value, key, e.detail))}
+							onchange={(updated: unknown) => onchange(stringify(value, key, updated))}
 						/>
 					{/each}
 				</ul>
diff --git a/src/lib/panel/PropertyList.svelte b/src/lib/panel/PropertyList.svelte
index b4618d1..a27eae2 100644
--- a/src/lib/panel/PropertyList.svelte
+++ b/src/lib/panel/PropertyList.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
 	import Expandable from './Expandable.svelte';
 
-	export let entries: Array<{ key: string; value: any }> = [];
-	export let id: number;
-	export let readonly = false;
+	interface Props {
+		id: string;
+		entries?: Array<{ key: string; value: any }>;
+		readonly?: boolean;
+	}
+
+	let { id, entries = [], readonly = false }: Props = $props();
 
 	const errors: Record<string, string | undefined> = {};
 	function change(key: string, value: any) {
@@ -27,7 +31,7 @@
 				{key}
 				{value}
 				error={errors[key]}
-				on:change={(e) => change(key, e.detail)}
+				onchange={(updated) => change(key, updated)}
 			/>
 		{/each}
 	</ul>
diff --git a/src/lib/runtime.ts b/src/lib/runtime.svelte.ts
similarity index 65%
rename from src/lib/runtime.ts
rename to src/lib/runtime.svelte.ts
index bee6673..96e7567 100644
--- a/src/lib/runtime.ts
+++ b/src/lib/runtime.svelte.ts
@@ -1,4 +1,4 @@
-import { type DebugNode, hovered, root, selected } from './store';
+import { type DebugNode, app } from './state.svelte';
 
 const tabId = chrome.devtools.inspectedWindow.tabId;
 const port = chrome.runtime.connect({ name: `${tabId}` });
@@ -11,8 +11,6 @@ export const background = {
 	},
 };
 
-const nodes = new Map<null | number, DebugNode>();
-
 function resolveEventBubble(node: any) {
 	if (!node.detail || !node.detail.listeners) return;
 
@@ -40,60 +38,59 @@ function resolveEventBubble(node: any) {
 port.onMessage.addListener(({ type, payload }) => {
 	switch (type) {
 		case 'bridge::ext/clear': {
-			selected.set(undefined);
-			hovered.set(undefined);
-			return root.set([]);
+			app.nodes = {};
+			app.selected = undefined;
+			app.hovered = undefined;
+			break;
 		}
 
 		case 'bridge::ext/inspect': {
-			if (typeof payload === 'string') return;
-			const current = nodes.get(payload.node.id);
-			return selected.set(current);
+			if (typeof payload === 'string') break;
+			app.selected = app.nodes[payload.node.id];
+			break;
 		}
 
 		case 'bridge::courier/node->add': {
 			const { node, target, anchor } = payload as {
 				node: DebugNode;
-				target: null | number;
-				anchor: null | number;
+				target: string;
+				anchor: string;
 			};
 
+			node.parent = app.nodes[target];
 			node.children = [];
 			node.expanded = false;
-			node.invalidate = () => {};
 			resolveEventBubble(node);
 
-			const parent = nodes.get(target);
-			nodes.set(node.id, node);
-			if (!parent) return root.update((n) => [...n, node]);
+			app.nodes[node.id] = node;
+			if (!node.parent) break;
 
-			const index = parent.children.findIndex((n) => n.id === anchor);
-			if (index === -1) parent.children.push(node);
-			else parent.children.splice(index, 0, node);
+			const siblings = node.parent.children;
+			const index = siblings.findIndex((n) => n.id === anchor);
+			if (index === -1) siblings.push(node);
+			else siblings.splice(index, 0, node);
 
-			return (node.parent = parent).invalidate();
+			break;
 		}
 
 		case 'bridge::courier/node->remove': {
 			const node = payload.node as SvelteBlockDetail;
-			const current = nodes.get(node.id);
-			if (current) nodes.delete(current.id);
-			if (!current?.parent) return;
+			const current = app.nodes[node.id];
+			if (current) delete app.nodes[current.id];
+			if (!current?.parent) break;
 
 			const index = current.parent.children.findIndex((o) => o.id === current.id);
 			current.parent.children.splice(index, 1);
-			return current.parent.invalidate();
+			break;
 		}
 
 		case 'bridge::courier/node->update': {
 			const node = payload.node as SvelteBlockDetail;
-			const current = nodes.get(node.id);
-			if (!current) return;
-			Object.assign(current, payload.node);
+			const current = app.nodes[node.id];
+			if (!current) break;
+			Object.assign(current, node);
 			resolveEventBubble(current);
-
-			selected.update((o) => o);
-			return current.invalidate();
+			break;
 		}
 
 		// case 'bridge::courier/profile->update': {
@@ -106,7 +103,7 @@ port.onMessage.addListener(({ type, payload }) => {
 
 		// 		if (!frame.node) return;
 
-		// 		frame.node = nodes.get(frame.node) || {
+		// 		frame.node = app.nodes.get(frame.node) || {
 		// 			type: 'Unknown',
 		// 			tagName: 'Unknown',
 		// 		};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 512259a..3ac2e64 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,78 +14,77 @@
 	import SearchBox from './SearchBox.svelte';
 	import VisibilitySelection from './VisibilitySelection.svelte';
 
-	import { background } from '$lib/runtime';
-	import { hovered, root, selected, visibility } from '$lib/store';
+	import { background } from '$lib/runtime.svelte';
+	import { app, visibility } from '$lib/state.svelte';
 
-	$: if ($selected) {
-		background.send('bridge::ext/select', $selected.id);
+	$effect(() => {
+		if (app.selected) {
+			background.send('bridge::ext/select', app.selected.id);
 
-		let current = $selected;
-		let invalid = null;
-		while ((current = current.parent)) {
-			if (current.expanded) continue;
-			(invalid = current).expanded = true;
+			let current = app.selected;
+			while ((current = current.parent)) {
+				current.expanded = true;
+			}
+
+			app.selected.dom?.scrollIntoView({ block: 'center' });
+		} else if (app.root.length) {
+			app.selected = app.root[0];
 		}
-		if (invalid) invalid.invalidate();
-	} else if ($root.length) {
-		selected.set($root[0]);
-	}
+	});
 
 	function reset() {
 		background.send('bridge::ext/highlight', null);
-		hovered.set(undefined);
+		app.hovered = undefined;
 	}
 </script>
 
 <svelte:window
 	on:keydown={({ target, key }) => {
-		if (target !== document.body || !$selected) return;
+		if (target !== document.body || !app.selected) return;
 
 		if (key === 'Enter') {
-			$selected.expanded = !$selected.expanded;
-			$selected.invalidate();
+			app.selected.expanded = !app.selected.expanded;
 		} else if (key === 'ArrowRight') {
-			if (!$selected) $selected = $root[0];
-			$selected.expanded = true;
-			$selected.invalidate();
+			if (!app.selected) app.selected = app.root[0];
+			app.selected.expanded = true;
 		} else if (key === 'ArrowLeft') {
-			if ($selected.expanded) {
-				$selected.expanded = false;
-				return $selected.invalidate();
+			if (app.selected.expanded) {
+				app.selected.expanded = false;
+				return;
 			}
-			do $selected = $selected.parent ?? $selected;
-			while (!$visibility[$selected.type]);
+			do app.selected = app.selected.parent ?? app.selected;
+			while (!visibility[app.selected.type]);
 		} else if (key === 'ArrowUp') {
-			let nodes = ($selected.parent?.children || $root).filter((n) => $visibility[n.type]);
-			let sibling = nodes[nodes.findIndex((o) => o.id === $selected?.id) - 1];
+			let nodes = (app.selected.parent?.children || app.root).filter((n) => visibility[n.type]);
+			let sibling = nodes[nodes.findIndex((o) => o.id === app.selected?.id) - 1];
 			while (sibling?.expanded) {
-				nodes = sibling.children.filter((n) => $visibility[n.type]);
+				nodes = sibling.children.filter((n) => visibility[n.type]);
 				sibling = nodes[nodes.length - 1];
 			}
-			$selected = sibling ?? $selected.parent ?? $selected;
+			app.selected = sibling ?? app.selected.parent ?? app.selected;
 		} else if (key === 'ArrowDown') {
-			const children = $selected.children.filter((n) => $visibility[n.type]);
+			const children = app.selected.children.filter((n) => visibility[n.type]);
 
-			if (!$selected.expanded || children.length === 0) {
-				let next = $selected;
-				let current = $selected;
+			if (!app.selected.expanded || children.length === 0) {
+				let next = app.selected;
+				let current = app.selected;
 				do {
-					const nodes = current.parent ? current.parent.children : $root;
-					const siblings = nodes.filter((n) => $visibility[n.type]);
+					const nodes = current.parent ? current.parent.children : app.root;
+					const siblings = nodes.filter((n) => visibility[n.type]);
 					const index = siblings.findIndex((o) => o.id === current.id);
 					next = siblings[index + 1];
 					current = current.parent;
 				} while (!next && current);
 
-				$selected = next ?? $selected;
+				app.selected = next ?? app.selected;
 			} else {
-				$selected = children[0];
+				app.selected = children[0];
 			}
 		}
 	}}
 />
 
-{#if $root.length}
+{#if app.root.length}
 	<main>
 		<!-- <Profiler /> -->
 
@@ -102,8 +101,8 @@
 
 			<!-- svelte-ignore missing-declaration -->
 			<Button
-				disabled={$selected?.id === undefined || $selected?.type !== 'element'}
-				on:click={() => chrome.devtools.inspectedWindow.eval('inspect($n).scrollIntoView()')}
+				disabled={app.selected?.id === undefined || app.selected?.type !== 'element'}
+				onclick={() => chrome.devtools.inspectedWindow.eval('inspect($n).scrollIntoView()')}
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 					<path
@@ -114,7 +113,7 @@
 		</Toolbar>
 
 		<ul on:mousemove|self={reset} on:mouseleave={reset}>
-			{#each $root as node (node.id)}
+			{#each app.root as node (node.id)}
 				<Node {node} />
 			{/each}
 		</ul>
@@ -124,36 +123,36 @@
 
 	<!-- component details -->
 	<Resizable axis="x">
-		{@const events = $selected?.detail.listeners?.map((l) => {
+		{@const events = app.selected?.detail.listeners?.map((l) => {
 			const suffix = l.modifiers?.length ? `|${l.modifiers.join('|')}` : '';
 			const value = { __is: 'function', source: l.handler };
 			return { key: l.event + suffix, value };
 		})}
 
-		{#if $selected?.type === 'component'}
+		{#if app.selected?.type === 'component'}
 			<h2>Props</h2>
-			<PropertyList id={$selected.id} entries={$selected.detail.attributes} />
+			<PropertyList id={app.selected.id} entries={app.selected?.detail.attributes} />
 
 			<Divider type="horizontal" />
 
 			<h2>Events</h2>
-			<PropertyList id={$selected.id} entries={events} />
+			<PropertyList id={app.selected.id} entries={events} />
 
 			<Divider type="horizontal" />
 
 			<h2>State</h2>
-			<PropertyList id={$selected.id} entries={$selected.detail.ctx} />
-		{:else if $selected?.type === 'block' || $selected?.type === 'iteration'}
+			<PropertyList id={app.selected.id} entries={app.selected?.detail.ctx} />
+		{:else if app.selected?.type === 'block' || app.selected?.type === 'iteration'}
 			<h2>State</h2>
-			<PropertyList readonly id={$selected.id} entries={$selected.detail.ctx} />
-		{:else if $selected?.type === 'element'}
+			<PropertyList readonly id={app.selected.id} entries={app.selected.detail.ctx} />
+		{:else if app.selected?.type === 'element'}
 			<h2>Attributes</h2>
-			<PropertyList readonly id={$selected.id} entries={$selected.detail.attributes} />
+			<PropertyList readonly id={app.selected.id} entries={app.selected.detail.attributes} />
 
 			<Divider type="horizontal" />
 
 			<h2>Events</h2>
-			<PropertyList id={$selected.id} entries={events} />
+			<PropertyList id={app.selected.id} entries={events} />
 		{/if}
 	</Resizable>
 {:else}
diff --git a/src/routes/Breadcrumbs.svelte b/src/routes/Breadcrumbs.svelte
index 6087997..f870dcc 100644
--- a/src/routes/Breadcrumbs.svelte
+++ b/src/routes/Breadcrumbs.svelte
@@ -1,27 +1,26 @@
 <script lang="ts">
-	import { selected, hovered, visibility } from '$lib/store';
+	import { app, visibility } from '$lib/state.svelte';
 
-	function trail(node: typeof $selected) {
+	const breadcrumbs = $derived.by(() => {
 		const ancestors = [];
-		while (node && node.tagName) {
-			ancestors.push(node);
-			node = node.parent;
+		let parent = app.selected;
+		while (parent && parent.tagName) {
+			ancestors.push(parent);
+			parent = parent.parent;
 		}
 		return ancestors.reverse();
-	}
-
-	$: breadcrumbs = trail($selected);
+	});
 </script>
 
 {#if breadcrumbs.length}
 	<ul>
 		{#each breadcrumbs as node}
-			{#if $visibility[node.type]}
+			{#if visibility[node.type]}
 				<button
-					class:selected={node.id === $selected?.id}
-					on:click={() => selected.set(node)}
-					on:focus={() => hovered.set(node)}
-					on:mouseover={() => hovered.set(node)}
+					class:selected={node.id === app.selected?.id}
+					onclick={() => (app.selected = node)}
+					onfocus={() => (app.hovered = node)}
+					onmouseover={() => (app.hovered = node)}
 				>
 					{node.tagName}
 				</button>
diff --git a/src/routes/ConnectMessage.svelte b/src/routes/ConnectMessage.svelte
index dc37a9c..0f6d203 100644
--- a/src/routes/ConnectMessage.svelte
+++ b/src/routes/ConnectMessage.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { background } from '$lib/runtime';
+	import { background } from '$lib/runtime.svelte';
 </script>
 
 <main>
diff --git a/src/routes/Inspector.svelte b/src/routes/Inspector.svelte
index 5ded50a..806e928 100644
--- a/src/routes/Inspector.svelte
+++ b/src/routes/Inspector.svelte
@@ -1,21 +1,24 @@
 <script>
 	import Button from '$lib/components/Button.svelte';
-	import { background } from '$lib/runtime';
-	import { selected } from '$lib/store';
+	import { background } from '$lib/runtime.svelte';
+	import { app } from '$lib/state.svelte';
 
-	let active = false;
+	let active = $state(false);
 
-	function click() {
-		active = !active;
-		background.send('bridge::ext/inspect', active ? 'start' : 'stop');
-	}
-
-	$: if (active && $selected) {
-		$selected.dom?.scrollIntoView({ block: 'center' });
-	}
+	$effect(() => {
+		if (active && app.selected) {
+			app.selected.dom?.scrollIntoView({ block: 'center' });
+		}
+	});
 </script>
 
-<Button on:click={click} {active}>
+<Button
+	{active}
+	onclick={() => {
+		active = !active;
+		background.send('bridge::ext/inspect', active ? 'start' : 'stop');
+	}}
+>
 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 		<path
 			d="M3 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.6a1 1 0 1 1 0 2H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2.6a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1H3z"
diff --git a/src/routes/ProfileButton.svelte b/src/routes/ProfileButton.svelte
index 9cc0e64..75951f1 100644
--- a/src/routes/ProfileButton.svelte
+++ b/src/routes/ProfileButton.svelte
@@ -1,11 +1,11 @@
 <script>
 	import Button from '$lib/components/Button.svelte';
 
-	import { background } from '$lib/runtime';
+	import { background } from '$lib/runtime.svelte';
 	let enabled = false;
 </script>
 
-<Button on:click={() => background.send('bridge::ext/profiler', enabled)}>
+<Button onclick={() => background.send('bridge::ext/profiler', enabled)}>
 	{#if enabled}
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 			<path d="M12.7,1.4 11.3,0l-8,8 8,8 1.4,-1.4L6,8Z" />
diff --git a/src/routes/Profiler.svelte b/src/routes/Profiler.svelte
index 7ab8ef9..ad4ad59 100644
--- a/src/routes/Profiler.svelte
+++ b/src/routes/Profiler.svelte
@@ -8,20 +8,20 @@
 
 	import { profileFrame } from '$lib/store';
 
-	let selected: null | ComponentProps<ProfilerFrame>['children'][0] = null;
-	let top: null | ComponentProps<ProfilerFrame>['children'][0] = null;
+	let selected: null | ComponentProps<ProfilerFrame>['children'][0] = $state(null);
+	let top: null | ComponentProps<ProfilerFrame>['children'][0] = $state(null);
 
 	function round(n: number) {
 		return Math.round(n * 100) / 100;
 	}
 
-	$: children = top ? [top] : $profileFrame?.children || [];
-	$: duration = children.reduce((acc, o) => acc + o.duration, 0);
+	const children = $derived(top ? [top] : $profileFrame?.children || []);
+	const duration = $derived(children.reduce((acc, o) => acc + o.duration, 0));
 </script>
 
 <Toolbar>
 	{#if top}
-		<Button on:click={() => (top = null)}>
+		<Button onclick={() => (top = null)}>
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 				<path d="M12.7,1.4 11.3,0l-8,8 8,8 1.4,-1.4L6,8Z" />
 			</svg>
@@ -30,7 +30,7 @@
 		<ProfileButton />
 	{/if}
 	<Button
-		on:click={() => {
+		onclick={() => {
 			$profileFrame = undefined;
 			top = null;
 			selected = null;
@@ -48,9 +48,9 @@
 		<ProfilerFrame
 			{children}
 			{duration}
-			on:click={({ detail }) => {
-				if (selected === detail) top = detail;
-				else selected = detail;
+			onclick={(frame) => {
+				if (selected === frame) top = frame;
+				else selected = frame;
 			}}
 		/>
 	{:else}
diff --git a/src/routes/ProfilerFrame.svelte b/src/routes/ProfilerFrame.svelte
index abc0cb9..11f4923 100644
--- a/src/routes/ProfilerFrame.svelte
+++ b/src/routes/ProfilerFrame.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
 	import type { Profiler } from '$lib/store';
-	import { createEventDispatcher } from 'svelte';
 
-	export let children: Profiler[];
-	export let duration: number;
+	interface Props {
+		children: Profiler[];
+		duration: number;
+		onclick(frame: Profiler): void;
+	}
 
-	const dispatch = createEventDispatcher();
+	let { children, duration, onclick }: Props = $props();
 </script>
 
 {#if children?.length}
 	<ul>
 		{#each children as frame}
 			<li style="width: {(frame.duration / duration) * 100}%">
-				<button class={frame.type} on:click={() => dispatch('click', frame)}>
+				<button class={frame.type} onclick={() => onclick(frame)}>
 					<span>&zwnj;</span>
 					<span>{frame.node.tagName}</span>
 				</button>
 
-				<svelte:self {...frame} on:click={() => dispatch('click', frame)} />
+				<svelte:self {...frame} onclick={() => onclick(frame)} />
 			</li>
 		{/each}
 	</ul>
diff --git a/src/routes/SearchBox.svelte b/src/routes/SearchBox.svelte
index 71d6a4d..a1ad6d7 100644
--- a/src/routes/SearchBox.svelte
+++ b/src/routes/SearchBox.svelte
@@ -1,26 +1,26 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte';
-	import { root, selected, query } from '$lib/store';
+	import { app } from '$lib/state.svelte';
 
-	let position = -1;
+	let position = $state(-1);
 	const submit = {
 		prev() {
 			if (position <= 0) position = results.length;
-			selected.set(results[--position]);
+			app.selected = results[--position];
 		},
 		next() {
 			if (position >= results.length - 1) position = -1;
-			selected.set(results[++position]);
+			app.selected = results[++position];
 		},
 	};
 
-	function search(list: typeof $root): typeof $root {
+	function search(list: typeof app.root): typeof app.root {
 		position = -1;
 		const nodes = [];
 		for (const node of list) {
 			if (
-				node.tagName.includes($query) ||
-				(node.detail && JSON.stringify(node.detail).includes($query))
+				node.tagName.includes(app.query) ||
+				(node.detail && JSON.stringify(node.detail).includes(app.query))
 			)
 				nodes.push(node);
 			nodes.push(...search(node.children));
@@ -28,10 +28,10 @@
 		return nodes;
 	}
 
-	$: results = $query.length > 1 ? search($root) : [];
+	const results = $derived(app.query.length > 1 ? search(app.root) : []);
 </script>
 
-<form on:submit|preventDefault>
+<form onsubmit={(event) => event.preventDefault()}>
 	<svg viewBox="0 0 16 16" width="1rem" fill="rgba(135, 135, 137, 0.9)">
 		<path d="M15.707 14.293l-5-5-1.414 1.414 5 5a1 1 0 0 0 1.414-1.414z" />
 		<path
@@ -42,8 +42,8 @@
 
 	<input
 		placeholder="Search"
-		bind:value={$query}
-		on:keydown={({ key, shiftKey }) => {
+		bind:value={app.query}
+		onkeydown={({ key, shiftKey }) => {
 			if (key === 'Enter') submit[shiftKey ? 'prev' : 'next']();
 		}}
 	/>
@@ -52,10 +52,10 @@
 		<span style:font-size="0.625rem">{position + 1} of {results.length}</span>
 	{/if}
 
-	<Button disabled={!results.length} on:click={submit.next}>
+	<Button disabled={!results.length} onclick={submit.next}>
 		<div class="next" />
 	</Button>
-	<Button disabled={!results.length} on:click={submit.prev}>
+	<Button disabled={!results.length} onclick={submit.prev}>
 		<div class="prev" />
 	</Button>
 </form>
diff --git a/src/routes/VisibilitySelection.svelte b/src/routes/VisibilitySelection.svelte
index f68ffff..15a2fb0 100644
--- a/src/routes/VisibilitySelection.svelte
+++ b/src/routes/VisibilitySelection.svelte
@@ -2,13 +2,13 @@
 	import Button from '$lib/components/Button.svelte';
 	import Relative from '$lib/components/Relative.svelte';
 
-	import { visibility } from '$lib/store';
+	import { visibility } from '$lib/state.svelte';
 
-	let opened = false;
+	let opened = $state(false);
 </script>
 
 <Relative>
-	<Button on:click={() => (opened = !opened)}>
+	<Button onclick={() => (opened = !opened)}>
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 			<path
 				d="M8 2C4.36364 2 1.25818 4.28067 0 7.5 1.25818 10.71933 4.36364 13 8 13s6.74182-2.28067 8-5.5C14.74182 4.28067 11.63636 2 8 2zm0 9.16667c-2.00727 0-3.63636-1.64267-3.63636-3.66667S5.99273 3.83333 8 3.83333 11.63636 5.476 11.63636 7.5 10.00727 11.16667 8 11.16667zM8 5.3c-1.20727 0-2.18182.98267-2.18182 2.2S6.79273 9.7 8 9.7s2.18182-.98267 2.18182-2.2S9.20727 5.3 8 5.3z"
@@ -18,9 +18,9 @@
 
 	{#if opened}
 		<section>
-			{#each Object.keys($visibility) as key}
+			{#each Object.keys(visibility) as key}
 				<label>
-					<input type="checkbox" bind:checked={$visibility[key]} />
+					<input type="checkbox" bind:checked={visibility[key]} />
 					<span>{key}s</span>
 				</label>
 			{/each}
diff --git a/svelte.config.js b/svelte.config.js
index d5a9d0f..58e94ac 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,6 +1,10 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default {
+	compilerOptions: {
+		runes: true,
+	},
+
 	preprocess: vitePreprocess(),
 
 	onwarn(warning, handler) {

From 593385dc2972e92a437118dbefe3069950e9b47d Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Tue, 2 Apr 2024 12:34:51 +0700
Subject: [PATCH 2/5] missed the state

---
 package.json                          |  2 +-
 pnpm-lock.yaml                        |  8 +++----
 src/lib/nodes/Slot.svelte             |  6 ++---
 src/lib/{store.ts => state.svelte.ts} | 33 ++++++++++++---------------
 src/routes/Profiler.svelte            | 15 +++++++++---
 src/routes/ProfilerFrame.svelte       |  9 +++++++-
 6 files changed, 42 insertions(+), 31 deletions(-)
 rename src/lib/{store.ts => state.svelte.ts} (51%)

diff --git a/package.json b/package.json
index f64dac6..8b7e7f9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
 		"prettier-plugin-svelte": "^3.2.1",
 		"rollup": "^4.12.0",
 		"svelte": "5.0.0-next.90",
-		"svelte-check": "^3.6.4",
+		"svelte-check": "^3.6.8",
 		"typescript": "^5.3.3",
 		"vite": "^5.1.4"
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aab52af..464478f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ devDependencies:
     specifier: 5.0.0-next.90
     version: 5.0.0-next.90
   svelte-check:
-    specifier: ^3.6.4
-    version: 3.6.4(svelte@5.0.0-next.90)
+    specifier: ^3.6.8
+    version: 3.6.8(svelte@5.0.0-next.90)
   typescript:
     specifier: ^5.3.3
     version: 5.3.3
@@ -987,8 +987,8 @@ packages:
       min-indent: 1.0.1
     dev: true
 
-  /svelte-check@3.6.4(svelte@5.0.0-next.90):
-    resolution: {integrity: sha512-mY/dqucqm46p72M8yZmn81WPZx9mN6uuw8UVfR3ZKQeLxQg5HDGO3HHm5AZuWZPYNMLJ+TRMn+TeN53HfQ/vsw==}
+  /svelte-check@3.6.8(svelte@5.0.0-next.90):
+    resolution: {integrity: sha512-rhXU7YCDtL+lq2gCqfJDXKTxJfSsCgcd08d7VWBFxTw6IWIbMWSaASbAOD3N0VV9TYSSLUqEBiratLd8WxAJJA==}
     hasBin: true
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
diff --git a/src/lib/nodes/Slot.svelte b/src/lib/nodes/Slot.svelte
index 28d267a..ec1e492 100644
--- a/src/lib/nodes/Slot.svelte
+++ b/src/lib/nodes/Slot.svelte
@@ -12,17 +12,17 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class:expanded class="expandable tag-open tag-name" on:dblclick={() => (expanded = !expanded)}>
-	<Indexer text={`<${tagName}>`} color="#c586c0" />
+	<Indexer text="<{tagName}>" color="#c586c0" />
 
 	{#if !expanded}
 		<Ellipsis onclick={() => (expanded = true)} />
-		<Indexer text={`</${tagName}>`} color="#c586c0" />
+		<Indexer text="</{tagName}>" color="#c586c0" />
 	{/if}
 </div>
 {#if expanded}
 	<slot />
 
 	<div>
-		<Indexer text={`</${tagName}>`} color="#c586c0" />
+		<Indexer text="</{tagName}>" color="#c586c0" />
 	</div>
 {/if}
diff --git a/src/lib/store.ts b/src/lib/state.svelte.ts
similarity index 51%
rename from src/lib/store.ts
rename to src/lib/state.svelte.ts
index 3f0e6e9..7c0ada5 100644
--- a/src/lib/store.ts
+++ b/src/lib/state.svelte.ts
@@ -1,11 +1,8 @@
-import { writable } from 'svelte/store';
-
 type Overwrite<A, B> = Omit<A, keyof B> & B;
 
 export type DebugNode = Overwrite<
 	SvelteBlockDetail,
 	{
-		invalidate(): void;
 		expanded: boolean;
 		detail: {
 			attributes?: Array<{
@@ -30,10 +27,20 @@ export type DebugNode = Overwrite<
 		dom?: HTMLLIElement;
 	}
 >;
-export const selected = writable<undefined | DebugNode>(undefined);
-export const hovered = writable<undefined | DebugNode>(undefined);
-export const root = writable<DebugNode[]>([]);
-export const visibility = writable<{ [key: string]: boolean }>({
+
+export const app = $state({
+	nodes: {} as { [key: string]: DebugNode },
+	get root() {
+		const nodes = Object.values(this.nodes);
+		return nodes.filter((node) => !node.parent);
+	},
+
+	selected: undefined as undefined | DebugNode,
+	hovered: undefined as undefined | DebugNode,
+	query: '',
+});
+
+export const visibility = $state<{ [key: string]: boolean }>({
 	component: true,
 	element: true,
 	block: true,
@@ -42,15 +49,3 @@ export const visibility = writable<{ [key: string]: boolean }>({
 	text: true,
 	anchor: false,
 });
-
-export const query = writable('');
-
-export type Profiler = {
-	type: 'mount' | 'patch' | 'detach';
-	node: DebugNode;
-	duration: number;
-	start: number;
-	end: number;
-	children: Profiler[];
-};
-export const profileFrame = writable<undefined | Profiler>(undefined);
diff --git a/src/routes/Profiler.svelte b/src/routes/Profiler.svelte
index ad4ad59..aa0fc17 100644
--- a/src/routes/Profiler.svelte
+++ b/src/routes/Profiler.svelte
@@ -6,7 +6,16 @@
 	import ProfileButton from './ProfileButton.svelte';
 	import ProfilerFrame from './ProfilerFrame.svelte';
 
-	import { profileFrame } from '$lib/store';
+	interface Profiler {
+		type: 'mount' | 'patch' | 'detach';
+		node: import('$lib/state.svelte').DebugNode;
+		duration: number;
+		start: number;
+		end: number;
+		children: Profiler[];
+	}
+
+	let profileFrame: undefined | Profiler = $state();
 
 	let selected: null | ComponentProps<ProfilerFrame>['children'][0] = $state(null);
 	let top: null | ComponentProps<ProfilerFrame>['children'][0] = $state(null);
@@ -15,7 +24,7 @@
 		return Math.round(n * 100) / 100;
 	}
 
-	const children = $derived(top ? [top] : $profileFrame?.children || []);
+	const children = $derived(top ? [top] : profileFrame?.children || []);
 	const duration = $derived(children.reduce((acc, o) => acc + o.duration, 0));
 </script>
 
@@ -31,7 +40,7 @@
 	{/if}
 	<Button
 		onclick={() => {
-			$profileFrame = undefined;
+			profileFrame = undefined;
 			top = null;
 			selected = null;
 		}}
diff --git a/src/routes/ProfilerFrame.svelte b/src/routes/ProfilerFrame.svelte
index 11f4923..295f6b3 100644
--- a/src/routes/ProfilerFrame.svelte
+++ b/src/routes/ProfilerFrame.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-	import type { Profiler } from '$lib/store';
+	interface Profiler {
+		type: 'mount' | 'patch' | 'detach';
+		node: import('$lib/state.svelte').DebugNode;
+		duration: number;
+		start: number;
+		end: number;
+		children: Profiler[];
+	}
 
 	interface Props {
 		children: Profiler[];

From 2c96588c52afefb2c4c2abce8929ebe8b49c67b0 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Wed, 3 Apr 2024 09:01:19 +0700
Subject: [PATCH 3/5] more svelte 5 goodies

---
 package.json                     |  2 +-
 pnpm-lock.yaml                   |  8 ++++----
 src/entry.ts                     |  1 -
 src/lib/nodes/Node.svelte        | 10 +++++++---
 src/lib/panel/Expandable.svelte  | 16 ++++++++++------
 src/routes/+layout.svelte        |  4 ++--
 src/routes/Breadcrumbs.svelte    |  8 ++++----
 src/routes/ConnectMessage.svelte |  2 +-
 8 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 8b7e7f9..fef0dad 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
 		"@types/node": "^20.11.19",
 		"prettier": "^3.2.5",
 		"prettier-plugin-sort-package-json": "^0.2.0",
-		"prettier-plugin-svelte": "^3.2.1",
+		"prettier-plugin-svelte": "^3.2.2",
 		"rollup": "^4.12.0",
 		"svelte": "5.0.0-next.90",
 		"svelte-check": "^3.6.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 464478f..51e2819 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ devDependencies:
     specifier: ^0.2.0
     version: 0.2.0(prettier@3.2.5)
   prettier-plugin-svelte:
-    specifier: ^3.2.1
-    version: 3.2.1(prettier@3.2.5)(svelte@5.0.0-next.90)
+    specifier: ^3.2.2
+    version: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.90)
   rollup:
     specifier: ^4.12.0
     version: 4.12.0
@@ -876,8 +876,8 @@ packages:
       prettier: 3.2.5
     dev: true
 
-  /prettier-plugin-svelte@3.2.1(prettier@3.2.5)(svelte@5.0.0-next.90):
-    resolution: {integrity: sha512-ENAPbIxASf2R79IZwgkG5sBdeNA9kLRlXVvKKmTXh79zWTy0KKoT86XO2pHrTitUPINd+iXWy12MRmgzKGVckA==}
+  /prettier-plugin-svelte@3.2.2(prettier@3.2.5)(svelte@5.0.0-next.90):
+    resolution: {integrity: sha512-ZzzE/wMuf48/1+Lf2Ffko0uDa6pyCfgHV6+uAhtg2U0AAXGrhCSW88vEJNAkAxW5qyrFY1y1zZ4J8TgHrjW++Q==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
diff --git a/src/entry.ts b/src/entry.ts
index 054f97f..59f53ce 100644
--- a/src/entry.ts
+++ b/src/entry.ts
@@ -1,6 +1,5 @@
 import './app.css';
 import App from './routes/+layout.svelte';
-
 import { mount } from 'svelte';
 
 if (chrome.devtools.panels.themeName === 'dark') {
diff --git a/src/lib/nodes/Node.svelte b/src/lib/nodes/Node.svelte
index 9669cb6..2827d72 100644
--- a/src/lib/nodes/Node.svelte
+++ b/src/lib/nodes/Node.svelte
@@ -37,9 +37,13 @@
 		data-current={app.selected?.id === node.id || null}
 		data-hovered={app.hovered?.id === node.id || null}
 		bind:this={node.dom}
-		on:animationend={() => (flash = false)}
-		on:click|stopPropagation={() => (app.selected = node)}
-		on:mousemove|stopPropagation={() => {
+		onanimationend={() => (flash = false)}
+		onclick={(event) => {
+			event.stopPropagation();
+			app.selected = node;
+		}}
+		onmousemove={(event) => {
+			event.stopPropagation();
 			if (app.hovered?.id === node.id) return;
 			background.send('bridge::ext/highlight', node.id);
 			app.hovered = node;
diff --git a/src/lib/panel/Expandable.svelte b/src/lib/panel/Expandable.svelte
index dd279bd..8d27af1 100644
--- a/src/lib/panel/Expandable.svelte
+++ b/src/lib/panel/Expandable.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Editable from './Editable.svelte';
+	import Expandable from './Expandable.svelte';
 
 	interface Props {
-		key: string;
+		key: string | number;
 		value: any;
 		readonly: boolean;
 		error?: string;
@@ -56,7 +57,10 @@
 	style:--y-pad="0.125rem"
 	class:expanded
 	class:expandable
-	on:click|stopPropagation={() => (expanded = !expanded)}
+	onclick={(event) => {
+		event.stopPropagation();
+		expanded = !expanded;
+	}}
 >
 	<span>{key}:</span>
 	<span>&nbsp;</span>
@@ -73,11 +77,11 @@
 		{#if value.length && expanded}
 			<ul>
 				{#each value as v, key}
-					<svelte:self
+					<Expandable
 						{key}
 						value={v}
 						{readonly}
-						onchange={(updated: unknown) => onchange(stringify(value, key, updated))}
+						onchange={(updated) => onchange(stringify(value, key, updated))}
 					/>
 				{/each}
 			</ul>
@@ -93,11 +97,11 @@
 			{#if expanded}
 				<ul>
 					{#each Object.entries(value) as [key, v] (key)}
-						<svelte:self
+						<Expandable
 							{key}
 							value={v}
 							{readonly}
-							onchange={(updated: unknown) => onchange(stringify(value, key, updated))}
+							onchange={(updated) => onchange(stringify(value, key, updated))}
 						/>
 					{/each}
 				</ul>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3ac2e64..a922494 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <svelte:window
-	on:keydown={({ target, key }) => {
+	onkeydown={({ target, key }) => {
 		if (target !== document.body || !app.selected) return;
 
 		if (key === 'Enter') {
@@ -112,7 +112,7 @@
 			</Button>
 		</Toolbar>
 
-		<ul on:mousemove|self={reset} on:mouseleave={reset}>
+		<ul on:mousemove|self={reset} onmouseleave={reset}>
 			{#each app.root as node (node.id)}
 				<Node {node} />
 			{/each}
diff --git a/src/routes/Breadcrumbs.svelte b/src/routes/Breadcrumbs.svelte
index f870dcc..da4a89d 100644
--- a/src/routes/Breadcrumbs.svelte
+++ b/src/routes/Breadcrumbs.svelte
@@ -3,10 +3,10 @@
 
 	const breadcrumbs = $derived.by(() => {
 		const ancestors = [];
-		let parent = app.selected;
-		while (parent && parent.tagName) {
-			ancestors.push(parent);
-			parent = parent.parent;
+		let node = app.selected;
+		while (node && node.tagName) {
+			ancestors.push(node);
+			node = node.parent;
 		}
 		return ancestors.reverse();
 	});
diff --git a/src/routes/ConnectMessage.svelte b/src/routes/ConnectMessage.svelte
index 0f6d203..817868f 100644
--- a/src/routes/ConnectMessage.svelte
+++ b/src/routes/ConnectMessage.svelte
@@ -7,7 +7,7 @@
 	<p style:display="inline-flex" style:font-size="1.25rem">
 		<span>No Svelte app detected</span>
 
-		<button on:click={() => background.send('bypass::ext/page->refresh')}>reload</button>
+		<button onclick={() => background.send('bypass::ext/page->refresh')}>reload</button>
 	</p>
 
 	<footer>

From 33e8c08eca79e7e349a51f48dc69a592fb466769 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Thu, 4 Apr 2024 12:23:44 +0700
Subject: [PATCH 4/5] snippets

---
 src/lib/components/Button.svelte       |  5 +-
 src/lib/components/Relative.svelte     | 10 +++-
 src/lib/components/Resizable.svelte    |  5 +-
 src/lib/components/Toolbar.svelte      | 10 +++-
 src/lib/nodes/Block.svelte             |  5 +-
 src/lib/nodes/Element.svelte           | 79 ++++++++++++--------------
 src/lib/nodes/ElementAttributes.svelte |  5 +-
 src/lib/nodes/Iteration.svelte         |  5 +-
 src/lib/nodes/Node.svelte              | 66 +++++++++------------
 src/lib/nodes/Slot.svelte              |  7 ++-
 src/routes/+layout.svelte              |  9 ++-
 11 files changed, 104 insertions(+), 102 deletions(-)

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 2f57949..2b12631 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -4,13 +4,14 @@
 		disabled?: boolean;
 		active?: boolean;
 		onclick(event: MouseEvent): void;
+		children: import('svelte').Snippet;
 	}
 
-	let { type = 'button', disabled = false, active = false, onclick }: Props = $props();
+	let { type = 'button', disabled = false, active = false, onclick, children }: Props = $props();
 </script>
 
 <button {type} {disabled} class:active {onclick}>
-	<slot />
+	{@render children()}
 </button>
 
 <style>
diff --git a/src/lib/components/Relative.svelte b/src/lib/components/Relative.svelte
index 38bd0dc..1e63383 100644
--- a/src/lib/components/Relative.svelte
+++ b/src/lib/components/Relative.svelte
@@ -1,5 +1,13 @@
+<script lang="ts">
+	interface Props {
+		children: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div>
-	<slot />
+	{@render children()}
 </div>
 
 <style>
diff --git a/src/lib/components/Resizable.svelte b/src/lib/components/Resizable.svelte
index 0a0d2ab..64a2e14 100644
--- a/src/lib/components/Resizable.svelte
+++ b/src/lib/components/Resizable.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	interface Props {
 		axis: 'x' | 'y';
+		children: import('svelte').Snippet;
 	}
 
-	let { axis }: Props = $props();
+	let { axis, children }: Props = $props();
 
 	let resizing = false;
 	let size = $state(400);
@@ -21,7 +22,7 @@
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div class="{axis} resize" onmousedown={() => (resizing = true)} />
 
-	<div><slot /></div>
+	<div>{@render children()}</div>
 </aside>
 
 <style>
diff --git a/src/lib/components/Toolbar.svelte b/src/lib/components/Toolbar.svelte
index 54e4e6f..8f73a8e 100644
--- a/src/lib/components/Toolbar.svelte
+++ b/src/lib/components/Toolbar.svelte
@@ -1,5 +1,13 @@
+<script lang="ts">
+	interface Props {
+		children: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <nav>
-	<slot />
+	{@render children()}
 </nav>
 
 <style>
diff --git a/src/lib/nodes/Block.svelte b/src/lib/nodes/Block.svelte
index ca44996..0c51b92 100644
--- a/src/lib/nodes/Block.svelte
+++ b/src/lib/nodes/Block.svelte
@@ -6,9 +6,10 @@
 		tagName: string;
 		source?: string;
 		expanded: boolean;
+		children: import('svelte').Snippet;
 	}
 
-	let { tagName, source, expanded }: Props = $props();
+	let { tagName, source, expanded, children }: Props = $props();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -24,7 +25,7 @@
 	{/if}
 </div>
 {#if expanded}
-	<slot />
+	{@render children()}
 
 	<div>
 		<Indexer text={`{/${tagName}}`} />
diff --git a/src/lib/nodes/Element.svelte b/src/lib/nodes/Element.svelte
index c5b188d..72525cd 100644
--- a/src/lib/nodes/Element.svelte
+++ b/src/lib/nodes/Element.svelte
@@ -11,20 +11,12 @@
 		expanded: boolean;
 		attributes: ComponentProps<ElementAttributes>['attributes'];
 		listeners: ComponentProps<ElementAttributes>['listeners'];
+		children: import('svelte').Snippet;
 	}
 
-	let { tagName, empty, expanded = $bindable(), attributes, listeners }: Props = $props();
+	let { tagName, empty, expanded = $bindable(), attributes, listeners, children }: Props = $props();
 
-	const memory: Record<string, string> = {};
-	const cached = $derived(
-		attributes.map((o) => {
-			const value = stringify(o.value);
-			const flash = memory[o.key] !== value;
-			memory[o.key] = value;
-
-			return { ...o, value, flash };
-		}),
-	);
+	const cached = $derived(attributes.map((o) => ({ ...o, value: stringify(o.value) })));
 
 	function stringify(value: any): string {
 		switch (typeof value) {
@@ -53,51 +45,52 @@
 	}
 </script>
 
-{#if empty}
-	<div>
-		<span>&lt;</span>
-		<span class="tag-name">
-			<Indexer text={tagName} />
-		</span>
-		<ElementAttributes attributes={cached} {listeners} />
+{#snippet close()}
+	<span>&lt;/</span>
+	<span class="tag">
+		<Indexer text={tagName} />
+	</span>
+	<span>&gt;</span>
+{/snippet}
+
+<div
+	role="group"
+	class:expandable={!empty}
+	class:expanded
+	ondblclick={() => (expanded = !empty && !expanded)}
+>
+	<span>&lt;</span>
+	<span class="tag">
+		<Indexer text={tagName} />
+	</span>
+	<ElementAttributes attributes={cached} {listeners} />
+
+	{#if empty}
 		<span>&nbsp;/&gt;</span>
-	</div>
-{:else}
-	<div role="group" class:expanded class="expandable" ondblclick={() => (expanded = !expanded)}>
-		<span>&lt;</span>
-		<span class="tag-name">
-			<Indexer text={tagName} />
-		</span>
-		<ElementAttributes attributes={cached} {listeners} />
+	{:else}
 		<span>&gt;</span>
 		{#if !expanded}
 			<Ellipsis onclick={() => (expanded = true)} />
 
-			<span>&lt;/</span>
-			<span class="tag-name">
-				<Indexer text={tagName} />
-			</span>
-			<span>&gt;</span>
+			{@render close()}
 		{/if}
-	</div>
-	{#if expanded}
-		<slot />
-		<div>
-			<span>&lt;/</span>
-			<span class="tag-name">
-				<Indexer text={tagName} />
-			</span>
-			<span>&gt;</span>
-		</div>
 	{/if}
+</div>
+
+{#if expanded}
+	{@render children()}
+
+	<div>
+		{@render close()}
+	</div>
 {/if}
 
 <style>
-	.tag-name {
+	.tag {
 		color: rgb(0, 116, 232);
 	}
 
-	:global(.dark) .tag-name {
+	:global(.dark) .tag {
 		color: rgb(117, 191, 255);
 	}
 </style>
diff --git a/src/lib/nodes/ElementAttributes.svelte b/src/lib/nodes/ElementAttributes.svelte
index 69280f3..d989fbc 100644
--- a/src/lib/nodes/ElementAttributes.svelte
+++ b/src/lib/nodes/ElementAttributes.svelte
@@ -6,7 +6,6 @@
 			key: string;
 			value: string;
 			bounded?: boolean;
-			flash?: boolean;
 		}>;
 		listeners: Array<{
 			event: any;
@@ -18,11 +17,11 @@
 	let { attributes, listeners }: Props = $props();
 </script>
 
-{#each attributes as { key, value, bounded, flash } (key)}
+{#each attributes as { key, value, bounded } (key)}
 	{@const prefix = bounded ? 'bind:' : ''}
 
 	<span>&nbsp;</span>
-	<span class:flash style:display="flex">
+	<span style:display="flex">
 		<span class="attr-name">
 			<Indexer text="{prefix}{key}" />
 		</span>
diff --git a/src/lib/nodes/Iteration.svelte b/src/lib/nodes/Iteration.svelte
index cdcc56f..a91e097 100644
--- a/src/lib/nodes/Iteration.svelte
+++ b/src/lib/nodes/Iteration.svelte
@@ -3,9 +3,10 @@
 
 	interface Props {
 		expanded: boolean;
+		children: import('svelte').Snippet;
 	}
 
-	let { expanded }: Props = $props();
+	let { expanded, children }: Props = $props();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -17,5 +18,5 @@
 </div>
 
 {#if expanded}
-	<slot />
+	{@render children()}
 {/if}
diff --git a/src/lib/nodes/Node.svelte b/src/lib/nodes/Node.svelte
index 2827d72..f86e3cc 100644
--- a/src/lib/nodes/Node.svelte
+++ b/src/lib/nodes/Node.svelte
@@ -16,28 +16,31 @@
 
 	let { node, depth = 1 }: Props = $props();
 
+	const prev = $state(node);
+
 	function invisible(n: typeof node): boolean {
 		return !visibility[n.type] && n.children.every(invisible);
 	}
-
-	let lastLength = $state(node.children.length);
-	let flash = $state(false);
-	$effect(() => {
-		flash = flash || node.children.length !== lastLength;
-		lastLength = node.children.length;
-	});
 </script>
 
+{#snippet expand(children, level)}
+	{#each children as child (child.id)}
+		<Node node={child} depth={level} />
+	{/each}
+{/snippet}
+
 {#if visibility[node.type]}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<li
-		class:flash
+		bind:this={node.dom}
 		style:--indent="{depth * 12}px"
+		class:flash={prev.id !== node.id ||
+			prev.source !== node.source ||
+			prev.children.length !== node.children.length}
 		data-current={app.selected?.id === node.id || null}
 		data-hovered={app.hovered?.id === node.id || null}
-		bind:this={node.dom}
-		onanimationend={() => (flash = false)}
+		onanimationend={() => Object.assign(prev, node)}
 		onclick={(event) => {
 			event.stopPropagation();
 			app.selected = node;
@@ -57,35 +60,19 @@
 				empty={!node.children.length || node.children.every(invisible)}
 				bind:expanded={node.expanded}
 			>
-				<ul>
-					{#each node.children as child (child.id)}
-						<Node node={child} depth={depth + 1} />
-					{/each}
-				</ul>
+				<ul>{@render expand(node.children, depth + 1)}</ul>
 			</Element>
 		{:else if node.type === 'block'}
 			<Block tagName={node.tagName} source={node.detail.source} bind:expanded={node.expanded}>
-				<ul>
-					{#each node.children as child (child.id)}
-						<Node node={child} depth={depth + 1} />
-					{/each}
-				</ul>
+				<ul>{@render expand(node.children, depth + 1)}</ul>
 			</Block>
 		{:else if node.type === 'iteration'}
 			<Iteration bind:expanded={node.expanded}>
-				<ul>
-					{#each node.children as child (child.id)}
-						<Node node={child} depth={depth + 1} />
-					{/each}
-				</ul>
+				<ul>{@render expand(node.children, depth + 1)}</ul>
 			</Iteration>
 		{:else if node.type === 'slot'}
 			<Slot tagName={node.tagName} bind:expanded={node.expanded}>
-				<ul>
-					{#each node.children as child (child.id)}
-						<Node node={child} depth={depth + 1} />
-					{/each}
-				</ul>
+				<ul>{@render expand(node.children, depth + 1)}</ul>
 			</Slot>
 		{:else if node.type === 'text'}
 			<div>
@@ -96,9 +83,7 @@
 		{/if}
 	</li>
 {:else}
-	{#each node.children as child (child.id)}
-		<Node node={child} {depth} />
-	{/each}
+	{@render expand(node.children, depth)}
 {/if}
 
 <style>
@@ -135,13 +120,6 @@
 		background: #e0e0e2;
 	}
 
-	li.flash :global(> :first-child),
-	li.flash :global(> :first-child *),
-	li :global(.flash),
-	li :global(.flash *) {
-		animation: flash 0.8s ease-in-out;
-	}
-
 	li[data-current] > :global(div:first-child),
 	li[data-current][data-hovered] > :global(div) {
 		background: rgb(0, 116, 232);
@@ -160,6 +138,14 @@
 		background: rgb(32, 78, 138);
 	}
 
+	/* flash animation for updates */
+	li.flash > :global(:first-child),
+	li.flash > :global(:first-child *),
+	li :global(.flash),
+	li :global(.flash *) {
+		animation: flash 800ms ease-in-out;
+	}
+
 	@keyframes flash {
 		10% {
 			background: rgb(250, 217, 242);
diff --git a/src/lib/nodes/Slot.svelte b/src/lib/nodes/Slot.svelte
index ec1e492..5e3a23c 100644
--- a/src/lib/nodes/Slot.svelte
+++ b/src/lib/nodes/Slot.svelte
@@ -5,13 +5,14 @@
 	interface Props {
 		tagName: string;
 		expanded: boolean;
+		children: import('svelte').Snippet;
 	}
 
-	let { tagName, expanded }: Props = $props();
+	let { tagName, expanded, children }: Props = $props();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class:expanded class="expandable tag-open tag-name" on:dblclick={() => (expanded = !expanded)}>
+<div class:expanded class="expandable tag-open tag-name" ondblclick={() => (expanded = !expanded)}>
 	<Indexer text="<{tagName}>" color="#c586c0" />
 
 	{#if !expanded}
@@ -20,7 +21,7 @@
 	{/if}
 </div>
 {#if expanded}
-	<slot />
+	{@render children()}
 
 	<div>
 		<Indexer text="</{tagName}>" color="#c586c0" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a922494..e508069 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -25,8 +25,6 @@
 			while ((current = current.parent)) {
 				current.expanded = true;
 			}
-
-			app.selected.dom?.scrollIntoView({ block: 'center' });
 		} else if (app.root.length) {
 			app.selected = app.root[0];
 		}
@@ -39,15 +37,18 @@
 </script>
 
 <svelte:window
-	onkeydown={({ target, key }) => {
+	onkeydown={(event) => {
+		const { target, key } = event;
 		if (target !== document.body || !app.selected) return;
 
 		if (key === 'Enter') {
 			app.selected.expanded = !app.selected.expanded;
 		} else if (key === 'ArrowRight') {
+			event.preventDefault();
 			if (!app.selected) app.selected = app.root[0];
 			app.selected.expanded = true;
 		} else if (key === 'ArrowLeft') {
+			event.preventDefault();
 			if (app.selected.expanded) {
 				app.selected.expanded = false;
 				return;
@@ -55,6 +56,7 @@
 			do app.selected = app.selected.parent ?? app.selected;
 			while (!visibility[app.selected.type]);
 		} else if (key === 'ArrowUp') {
+			event.preventDefault();
 			let nodes = (app.selected.parent?.children || app.root).filter((n) => visibility[n.type]);
 			let sibling = nodes[nodes.findIndex((o) => o.id === app.selected?.id) - 1];
 			while (sibling?.expanded) {
@@ -63,6 +65,7 @@
 			}
 			app.selected = sibling ?? app.selected.parent ?? app.selected;
 		} else if (key === 'ArrowDown') {
+			event.preventDefault();
 			const children = app.selected.children.filter((n) => visibility[n.type]);
 
 			if (!app.selected.expanded || children.length === 0) {

From 5c34cc0fef284f54b417479da101231502a2a5bb Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Thu, 4 Apr 2024 12:29:26 +0700
Subject: [PATCH 5/5] more fixes

---
 src/app.d.ts              | 2 +-
 src/lib/runtime.svelte.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 093d066..11f5926 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -119,7 +119,7 @@ declare global {
 			}
 		>;
 
-		SvelteDevTools: CusomEvent<{
+		SvelteDevTools: CustomEvent<{
 			type: string;
 			payload: string;
 		}>;
diff --git a/src/lib/runtime.svelte.ts b/src/lib/runtime.svelte.ts
index 755fbc3..96e7567 100644
--- a/src/lib/runtime.svelte.ts
+++ b/src/lib/runtime.svelte.ts
@@ -47,7 +47,6 @@ port.onMessage.addListener(({ type, payload }) => {
 		case 'bridge::ext/inspect': {
 			if (typeof payload === 'string') break;
 			app.selected = app.nodes[payload.node.id];
-			app.inspecting = false;
 			break;
 		}