convert actions to attachments (#84)

package.json

@@ -45,11 +45,11 @@
 		"openai": "^4.90.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"runed": "^0.25.0",
 		"shiki": "^3.4.0",
-		"svelte": "^5.28.2",
+		"svelte": "^5.30.1",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",
@@ -63,7 +63,7 @@
 	"type": "module",
 	"dependencies": {
 		"dequal": "^2.0.3",
-		"eslint-plugin-svelte": "^3.3.1",
+		"eslint-plugin-svelte": "^3.6.0",
 		"remult": "^3.0.2",
 		"typia": "^8.0.0"
 	}

pnpm-lock.yaml

@@ -12,8 +12,8 @@ importers:
         specifier: ^2.0.3
         version: 2.0.3
       eslint-plugin-svelte:
-        specifier: ^3.3.1
-        version: 3.3.1([email protected]([email protected]))(svelte@5.28.2)
+        specifier: ^3.6.0
+        version: 3.6.0([email protected]([email protected]))(svelte@5.30.1)
       remult:
         specifier: ^3.0.2
         version: 3.0.2
@@ -56,16 +56,16 @@ importers:
         version: 3.0.0
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.3.1(@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected])))
+        version: 3.3.1(@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected])))
       '@sveltejs/adapter-node':
         specifier: ^5.2.0
-        version: 5.2.12(@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected])))
+        version: 5.2.12(@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected])))
       '@sveltejs/kit':
         specifier: ^2.5.27
-        version: 2.18.0(@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))
+        version: 2.18.0(@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.4(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))
+        version: 4.0.4(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1([email protected])
@@ -101,7 +101,7 @@ importers:
         version: 2.4.2
       melt:
         specifier: ^0.30.1
-        version: 0.30.1(@floating-ui/[email protected])(svelte@5.28.2)
+        version: 0.30.1(@floating-ui/[email protected])(svelte@5.30.1)
       openai:
         specifier: ^4.90.0
         version: 4.90.0
@@ -112,23 +112,23 @@ importers:
         specifier: ^3.1.1
         version: 3.5.3
       prettier-plugin-svelte:
-        specifier: ^3.2.6
-        version: 3.3.3([email protected])(svelte@5.28.2)
+        specifier: ^3.4.0
+        version: 3.4.0([email protected])(svelte@5.30.1)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.11(prettier-plugin-svelte@3.3.3([email protected])(svelte@5.28.2))([email protected])
+        version: 0.6.11(prettier-plugin-svelte@3.4.0([email protected])(svelte@5.30.1))([email protected])
       runed:
         specifier: ^0.25.0
-        version: 0.25.0(svelte@5.28.2)
+        version: 0.25.0(svelte@5.30.1)
       shiki:
         specifier: ^3.4.0
         version: 3.4.0
       svelte:
-        specifier: ^5.28.2
-        version: 5.28.2
+        specifier: ^5.30.1
+        version: 5.30.1
       svelte-check:
         specifier: ^4.0.0
-        version: 4.1.5([email protected])(svelte@5.28.2)([email protected])
+        version: 4.1.5([email protected])(svelte@5.30.1)([email protected])
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -149,7 +149,7 @@ importers:
         version: 8.26.1([email protected]([email protected]))([email protected])
       unplugin-icons:
         specifier: ^22.1.0
-        version: 22.1.0(svelte@5.28.2)
+        version: 22.1.0(svelte@5.30.1)
       vite:
         specifier: ^5.4.4
         version: 5.4.14(@types/[email protected])([email protected])
@@ -1410,12 +1410,6 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  [email protected]:
-    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
   [email protected]:
     resolution: {integrity: sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==}
     hasBin: true
@@ -1436,8 +1430,8 @@ packages:
       eslint-config-prettier:
         optional: true
 
-  eslint-plugin-svelte@3.3.1:
-    resolution: {integrity: sha512-5p3JGBMautDKtQdNmHkp33akcssAqZObV955UREa8v1thDDRG6sCj8gQMztQRRDFJiGsBdWgLWEB5HrdKg5B2w==}
+  eslint-plugin-svelte@3.6.0:
+    resolution: {integrity: sha512-IIf6Cj6yQuCwL7Qd8bX13BZspz+DQsOkClozMF9EkW20FSxI75Ndd5ZzbviCn32DdXRo9FUWXn+YMIL46qPOOg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.1 || ^9.0.0
@@ -1798,8 +1792,8 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  known-css-properties@0.35.0:
-    resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
+  known-css-properties@0.36.0:
+    resolution: {integrity: sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==}
 
   [email protected]:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
@@ -2176,8 +2170,8 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier-plugin-svelte@3.3.3:
-    resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
+  prettier-plugin-svelte@3.4.0:
+    resolution: {integrity: sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
@@ -2427,8 +2421,8 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
-  svelte-eslint-parser@1.1.0:
-    resolution: {integrity: sha512-JP0v/wzDXWxza6c8K9ZjKKHYfgt0KidlbWx1e9n9UV4q+o28GTkk71fR0IDZDmLUDYs3vSq0+Tm9fofDqzGe1w==}
+  svelte-eslint-parser@1.2.0:
+    resolution: {integrity: sha512-mbPtajIeuiyU80BEyGvwAktBeTX7KCr5/0l+uRGLq1dafwRNrjfM5kHGJScEBlPG3ipu6dJqfW/k0/fujvIEVw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
@@ -2436,8 +2430,8 @@ packages:
       svelte:
         optional: true
 
-  svelte@5.28.2:
-    resolution: {integrity: sha512-FbWBxgWOpQfhKvoGJv/TFwzqb4EhJbwCD17dB0tEpQiw1XyUEKZJtgm4nA4xq3LLsMo7hu5UY/BOFmroAxKTMg==}
+  svelte@5.30.1:
+    resolution: {integrity: sha512-QIYtKnJGkubWXtNkrUBKVCvyo9gjcccdbnvXfwsGNhvbeNNdQjRDTa/BiQcJ2kWXbXPQbWKyT7CUu53KIj1rfw==}
     engines: {node: '>=18'}
 
   [email protected]:
@@ -3335,22 +3329,22 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
-  '@sveltejs/[email protected](@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected])))':
+  '@sveltejs/[email protected](@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected])))':
     dependencies:
-      '@sveltejs/kit': 2.18.0(@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))
+      '@sveltejs/kit': 2.18.0(@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/[email protected](@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected])))':
+  '@sveltejs/[email protected](@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected])))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.2([email protected])
       '@rollup/plugin-json': 6.1.0([email protected])
       '@rollup/plugin-node-resolve': 16.0.0([email protected])
-      '@sveltejs/kit': 2.18.0(@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))
+      '@sveltejs/kit': 2.18.0(@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))
       rollup: 4.34.9
 
-  '@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))':
+  '@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -3362,26 +3356,26 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
-      svelte: 5.28.2
+      svelte: 5.30.1
       vite: 5.4.14(@types/[email protected])([email protected])
 
-  '@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))':
+  '@sveltejs/[email protected](@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))
       debug: 4.4.0
-      svelte: 5.28.2
+      svelte: 5.30.1
       vite: 5.4.14(@types/[email protected])([email protected])
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected]))':
+  '@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected]))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/[email protected](svelte@5.28.2)([email protected](@types/[email protected])([email protected])))(svelte@5.28.2)([email protected](@types/[email protected])([email protected]))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/[email protected](svelte@5.30.1)([email protected](@types/[email protected])([email protected])))(svelte@5.30.1)([email protected](@types/[email protected])([email protected]))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 5.28.2
+      svelte: 5.30.1
       vite: 5.4.14(@types/[email protected])([email protected])
       vitefu: 1.0.6([email protected](@types/[email protected])([email protected]))
     transitivePeerDependencies:
@@ -3852,11 +3846,6 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]([email protected]([email protected])):
-    dependencies:
-      eslint: 9.22.0([email protected])
-      semver: 7.7.1
-
   [email protected]([email protected]([email protected])):
     dependencies:
       eslint: 9.22.0([email protected])
@@ -3870,21 +3859,20 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.1([email protected]([email protected]))
 
-  eslint-plugin-svelte@3.3.1([email protected]([email protected]))(svelte@5.28.2):
+  eslint-plugin-svelte@3.6.0([email protected]([email protected]))(svelte@5.30.1):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1([email protected]([email protected]))
       '@jridgewell/sourcemap-codec': 1.5.0
       eslint: 9.22.0([email protected])
-      eslint-compat-utils: 0.6.4([email protected]([email protected]))
       esutils: 2.0.3
-      known-css-properties: 0.35.0
+      known-css-properties: 0.36.0
       postcss: 8.5.3
       postcss-load-config: 3.1.4([email protected])
       postcss-safe-parser: 7.0.1([email protected])
       semver: 7.7.1
-      svelte-eslint-parser: 1.1.0(svelte@5.28.2)
+      svelte-eslint-parser: 1.2.0(svelte@5.30.1)
     optionalDependencies:
-      svelte: 5.28.2
+      svelte: 5.30.1
     transitivePeerDependencies:
       - ts-node
 
@@ -4258,7 +4246,7 @@ snapshots:
 
   [email protected]: {}
 
-  known-css-properties@0.35.0: {}
+  known-css-properties@0.36.0: {}
 
   [email protected]: {}
 
@@ -4359,14 +4347,14 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
-  [email protected](@floating-ui/[email protected])(svelte@5.28.2):
+  [email protected](@floating-ui/[email protected])(svelte@5.30.1):
     dependencies:
       '@floating-ui/dom': 1.6.13
       dequal: 2.0.3
       jest-axe: 9.0.0
       nanoid: 5.1.5
-      runed: 0.23.4(svelte@5.28.2)
-      svelte: 5.28.2
+      runed: 0.23.4(svelte@5.30.1)
+      svelte: 5.30.1
 
   [email protected]: {}
 
@@ -4602,16 +4590,16 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-svelte@3.3.3([email protected])(svelte@5.28.2):
+  prettier-plugin-svelte@3.4.0([email protected])(svelte@5.30.1):
     dependencies:
       prettier: 3.5.3
-      svelte: 5.28.2
+      svelte: 5.30.1
 
-  [email protected](prettier-plugin-svelte@3.3.3([email protected])(svelte@5.28.2))([email protected]):
+  [email protected](prettier-plugin-svelte@3.4.0([email protected])(svelte@5.30.1))([email protected]):
     dependencies:
       prettier: 3.5.3
     optionalDependencies:
-      prettier-plugin-svelte: 3.3.3([email protected])(svelte@5.28.2)
+      prettier-plugin-svelte: 3.4.0([email protected])(svelte@5.30.1)
 
   [email protected]: {}
 
@@ -4728,15 +4716,15 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  [email protected](svelte@5.28.2):
+  [email protected](svelte@5.30.1):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.28.2
+      svelte: 5.30.1
 
-  [email protected](svelte@5.28.2):
+  [email protected](svelte@5.30.1):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.28.2
+      svelte: 5.30.1
 
   [email protected]:
     dependencies:
@@ -4840,19 +4828,19 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]([email protected])(svelte@5.28.2)([email protected]):
+  [email protected]([email protected])(svelte@5.30.1)([email protected]):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.3
       fdir: 6.4.3([email protected])
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.28.2
+      svelte: 5.30.1
       typescript: 5.8.2
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.1.0(svelte@5.28.2):
+  svelte-eslint-parser@1.2.0(svelte@5.30.1):
     dependencies:
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -4861,9 +4849,9 @@ snapshots:
       postcss-scss: 4.0.9([email protected])
       postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 5.28.2
+      svelte: 5.30.1
 
-  svelte@5.28.2:
+  svelte@5.30.1:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -5004,7 +4992,7 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  [email protected](svelte@5.28.2):
+  [email protected](svelte@5.30.1):
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@iconify/utils': 2.3.0
@@ -5012,7 +5000,7 @@ snapshots:
       local-pkg: 1.1.1
       unplugin: 2.2.0
     optionalDependencies:
-      svelte: 5.28.2
+      svelte: 5.30.1
     transitivePeerDependencies:
       - supports-color
 

src/lib/actions/autofocus.ts

@@ -1,14 +0,0 @@
-import { tick } from "svelte";
-
-export function autofocus(node: HTMLElement, enabled = true) {
-	function update(enabled = true) {
-		if (enabled) {
-			tick().then(() => {
-				node.focus();
-			});
-		}
-	}
-	update(enabled);
-
-	return { update };
-}

src/lib/actions/click-outside.ts

@@ -1,55 +0,0 @@
-import type { Action } from "svelte/action";
-
-export const clickOutside: Action<HTMLElement, () => void> = (node, callback) => {
-	let _callback = callback;
-
-	function update(newCallback: () => void) {
-		_callback = newCallback;
-	}
-
-	function handleClick(event: MouseEvent) {
-		if (window.getSelection()?.toString()) {
-			// Don't close if text is selected
-			return;
-		}
-
-		// For dialog elements, check if click was on the backdrop
-		if (node instanceof HTMLDialogElement) {
-			const rect = node.getBoundingClientRect();
-			const isInDialog =
-				event.clientX >= rect.left &&
-				event.clientX <= rect.right &&
-				event.clientY >= rect.top &&
-				event.clientY <= rect.bottom;
-
-			if (!isInDialog) {
-				_callback();
-				return;
-			}
-		}
-
-		// For non-dialog elements, use the standard contains check
-		if (!node.contains(event.target as Node) && !event.defaultPrevented) {
-			_callback();
-		}
-	}
-
-	// For dialogs, listen on the element itself
-	if (node instanceof HTMLDialogElement) {
-		node.addEventListener("click", handleClick);
-	} else {
-		// For other elements, listen on the document
-		document.addEventListener("click", handleClick, true);
-	}
-
-	return {
-		update,
-		destroy() {
-			if (node instanceof HTMLDialogElement) {
-				node.removeEventListener("click", handleClick);
-			} else {
-				document.removeEventListener("click", handleClick, true);
-			}
-		},
-	};
-};

src/lib/attachments/autofocus.ts

@@ -0,0 +1,12 @@
+import { tick } from "svelte";
+import type { Attachment } from "svelte/attachments";
+
+export function autofocus(enabled = true): Attachment<HTMLElement> {
+	return node => {
+		if (!enabled) return;
+
+		tick().then(() => {
+			node.focus();
+		});
+	};
+}

src/lib/attachments/click-outside.ts

@@ -0,0 +1,48 @@
+import type { Attachment } from "svelte/attachments";
+
+export function clickOutside(callback: () => void): Attachment {
+	return node => {
+		function handleClick(event: MouseEvent) {
+			if (window.getSelection()?.toString()) {
+				// Don't close if text is selected
+				return;
+			}
+
+			// For dialog elements, check if click was on the backdrop
+			if (node instanceof HTMLDialogElement) {
+				const rect = node.getBoundingClientRect();
+				const isInDialog =
+					event.clientX >= rect.left &&
+					event.clientX <= rect.right &&
+					event.clientY >= rect.top &&
+					event.clientY <= rect.bottom;
+
+				if (!isInDialog) {
+					callback();
+					return;
+				}
+			}
+
+			// For non-dialog elements, use the standard contains check
+			if (!node.contains(event.target as Node) && !event.defaultPrevented) {
+				callback();
+			}
+		}
+
+		// For dialogs, listen on the element itself
+		if (node instanceof HTMLDialogElement) {
+			node.addEventListener("click", handleClick);
+		} else {
+			// For other elements, listen on the document
+			document.addEventListener("click", handleClick, true);
+		}
+
+		return () => {
+			if (node instanceof HTMLDialogElement) {
+				node.removeEventListener("click", handleClick);
+			} else {
+				document.removeEventListener("click", handleClick, true);
+			}
+		};
+	};
+}

src/lib/{actions → attachments}/observe.svelte.ts

@@ -1,4 +1,5 @@
-import type { Action } from "svelte/action";
+import { AnimationFrames } from "runed";
+import type { Attachment } from "svelte/attachments";
 
 export enum ObservedElements {
 	BottomActions = "bottom-actions",
@@ -55,6 +56,7 @@ export const observed: Record<ObservedElements, ObservedData> = $state(
 
 type ObserveArgs = {
 	name: ObservedElements;
+	useRaf?: boolean;
 };
 
 function getOffsetPosition(el: HTMLElement) {
@@ -72,42 +74,42 @@ function getOffsetPosition(el: HTMLElement) {
 	return { top, left, width, height, right: left + width, bottom: top + height };
 }
 
-export const observe: Action<HTMLElement, ObserveArgs> = (node, args) => {
-	let resizeObserver: ResizeObserver;
-
-	function setVars(name: ObservedElements) {
-		// 1. Standard rect (includes transforms)
-		const rect = node.getBoundingClientRect();
-		document.documentElement.style.setProperty(`--${name}-width`, `${rect.width}px`);
-		document.documentElement.style.setProperty(`--${name}-height`, `${rect.height}px`);
-		document.documentElement.style.setProperty(`--${name}-top`, `${rect.top}px`);
-		document.documentElement.style.setProperty(`--${name}-left`, `${rect.left}px`);
-		document.documentElement.style.setProperty(`--${name}-right`, `${rect.right}px`);
-		document.documentElement.style.setProperty(`--${name}-bottom`, `${rect.bottom}px`);
-
-		// 2. Offset position (ignores transforms)
-		const offset = getOffsetPosition(node);
-		document.documentElement.style.setProperty(`--${name}-width-offset`, `${offset.width}px`);
-		document.documentElement.style.setProperty(`--${name}-height-offset`, `${offset.height}px`);
-		document.documentElement.style.setProperty(`--${name}-top-offset`, `${offset.top}px`);
-		document.documentElement.style.setProperty(`--${name}-left-offset`, `${offset.left}px`);
-		document.documentElement.style.setProperty(`--${name}-right-offset`, `${offset.right}px`);
-		document.documentElement.style.setProperty(`--${name}-bottom-offset`, `${offset.bottom}px`);
-
-		observed[name] = {
-			rect,
-			offset,
-		};
-	}
+export function observe(args: ObserveArgs): Attachment<HTMLElement> {
+	return node => {
+		function setVars(name: ObservedElements) {
+			// 1. Standard rect (includes transforms)
+			const rect = node.getBoundingClientRect();
+			document.documentElement.style.setProperty(`--${name}-width`, `${rect.width}px`);
+			document.documentElement.style.setProperty(`--${name}-height`, `${rect.height}px`);
+			document.documentElement.style.setProperty(`--${name}-top`, `${rect.top}px`);
+			document.documentElement.style.setProperty(`--${name}-left`, `${rect.left}px`);
+			document.documentElement.style.setProperty(`--${name}-right`, `${rect.right}px`);
+			document.documentElement.style.setProperty(`--${name}-bottom`, `${rect.bottom}px`);
+
+			// 2. Offset position (ignores transforms)
+			const offset = getOffsetPosition(node);
+			document.documentElement.style.setProperty(`--${name}-width-offset`, `${offset.width}px`);
+			document.documentElement.style.setProperty(`--${name}-height-offset`, `${offset.height}px`);
+			document.documentElement.style.setProperty(`--${name}-top-offset`, `${offset.top}px`);
+			document.documentElement.style.setProperty(`--${name}-left-offset`, `${offset.left}px`);
+			document.documentElement.style.setProperty(`--${name}-right-offset`, `${offset.right}px`);
+			document.documentElement.style.setProperty(`--${name}-bottom-offset`, `${offset.bottom}px`);
+
+			observed[name] = {
+				rect,
+				offset,
+			};
+		}
 
-	function update(args: ObserveArgs) {
-		if (resizeObserver) {
-			resizeObserver.disconnect();
+		function onWindowChange() {
+			setVars(args.name);
 		}
 
-		resizeObserver = new ResizeObserver(() => {
+		/** Initialize */
+		const resizeObserver = new ResizeObserver(() => {
 			setVars(args.name);
 		});
+
 		resizeObserver.observe(node);
 
 		// Listen for scroll and resize events
@@ -115,22 +117,16 @@ export const observe: Action<HTMLElement, ObserveArgs> = (node, args) => {
 		window.addEventListener("resize", onWindowChange, true);
 
 		setVars(args.name); // Initial set after observing
-	}
-
-	function onWindowChange() {
-		setVars(args.name);
-	}
-
-	update(args); // Initial setup
-
-	function destroy() {
-		resizeObserver.disconnect();
-		window.removeEventListener("scroll", onWindowChange, true);
-		window.removeEventListener("resize", onWindowChange, true);
-	}
+		if (args.useRaf) {
+			new AnimationFrames(() => {
+				setVars(args.name);
+			});
+		}
 
-	return {
-		update,
-		destroy,
+		return function destroy() {
+			resizeObserver.disconnect();
+			window.removeEventListener("scroll", onWindowChange, true);
+			window.removeEventListener("resize", onWindowChange, true);
+		};
 	};
-};
+}

src/lib/components/dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import type { Snippet } from "svelte";
 	import type { EventHandler } from "svelte/elements";
 	import IconCross from "~icons/carbon/close";
@@ -29,7 +29,10 @@
 <dialog bind:this={dialog} onclose={onClose}>
 	{#if open}
 		<form class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85" onsubmit={onSubmit}>
-			<div class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900" use:clickOutside={() => onClose?.()}>
+			<div
+				class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900"
+				{@attach clickOutside(() => onClose?.())}
+			>
 				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
 					{#if typeof title === "string"}
 						<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">

src/lib/components/inference-playground/checkpoints-menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import { checkpoints } from "$lib/state/checkpoints.svelte";
 	import { projects } from "$lib/state/projects.svelte";
 	import { iterate } from "$lib/utils/array.js";
@@ -37,7 +37,7 @@
 <dialog
 	bind:this={dialog}
 	class="mb-2 !overflow-visible rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
-	use:clickOutside={() => (popover.open = false)}
+	{@attach clickOutside(() => (popover.open = false))}
 	{...popover.content}
 >
 	<div

src/lib/components/inference-playground/custom-model-config.svelte

@@ -20,8 +20,8 @@
 </script>
 
 <script lang="ts">
-	import { autofocus } from "$lib/actions/autofocus.js";
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { autofocus } from "$lib/attachments/autofocus.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import { models } from "$lib/state/models.svelte";
 	import { PipelineTag, pipelineTagLabel, type Conversation, type CustomModel } from "$lib/types.js";
 	import { createFieldValidation } from "$lib/utils/form.svelte.js";
@@ -140,7 +140,7 @@
 			<!-- Content -->
 			<form
 				class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900"
-				use:clickOutside={() => close()}
+				{@attach clickOutside(() => close())}
 				transition:scale={{ start: 0.975, duration: 250 }}
 				{onsubmit}
 			>
@@ -166,12 +166,12 @@
 							Model ID <span class="text-red-800 dark:text-red-300">*</span>
 						</p>
 						<input
-							use:autofocus
 							bind:value={model.id}
 							required
 							placeholder="e.g. mistralai/mistral-large-2407"
 							type="text"
 							class="input block w-full"
+							{@attach autofocus()}
 						/>
 					</label>
 					<label class="flex flex-col gap-2">

src/lib/components/inference-playground/hf-token-modal.svelte

@@ -2,11 +2,11 @@
 	import { createBubbler, preventDefault } from "svelte/legacy";
 
 	const bubble = createBubbler();
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
 	import IconCross from "~icons/carbon/close";
-	import { autofocus } from "$lib/actions/autofocus.js";
+	import { autofocus } from "$lib/attachments/autofocus.js";
 
 	interface Props {
 		storeLocallyHfToken?: boolean;
@@ -51,7 +51,7 @@
 		class="relative max-h-full w-full max-w-xl p-4 outline-hidden"
 		bind:this={modalEl}
 		onkeydown={handleKeydown}
-		use:clickOutside={() => dispatch("close")}
+		{@attach clickOutside(() => dispatch("close"))}
 	>
 		<form onsubmit={preventDefault(bubble("submit"))} class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
 			<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
@@ -85,13 +85,13 @@
 						Hugging Face Token
 					</label>
 					<input
-						use:autofocus
 						required
 						placeholder="Enter HF Token"
 						type="text"
 						id="hf-token"
 						name="hf-token"
 						class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+						{@attach autofocus()}
 					/>
 				</div>
 				<label class="mt-4 flex items-center gap-x-1.5 text-gray-900 dark:text-gray-200">

src/lib/components/inference-playground/img-preview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import { fade, scale } from "svelte/transition";
 	import IconCross from "~icons/carbon/close";
 
@@ -39,7 +39,7 @@
 				class="max-h-[calc(100vh-120px)] max-w-[calc(100vw-120px)] object-contain"
 				src={img}
 				alt=""
-				use:clickOutside={() => (img = undefined)}
+				{@attach clickOutside(() => (img = undefined))}
 				transition:scale={{ start: 0.975, duration: 250 }}
 			/>
 

src/lib/components/inference-playground/message.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { autofocus as autofocusAction } from "$lib/actions/autofocus.js";
+	import { autofocus as autofocusAction } from "$lib/attachments/autofocus.js";
 	import Tooltip from "$lib/components/tooltip.svelte";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { type ConversationClass } from "$lib/state/conversations.svelte.js";
@@ -51,7 +51,6 @@
 			}
 
 			fileQueue.add(async () => {
-				console.log("queue item start");
 				const key = await images.upload(file);
 
 				const prev = message.images ?? [];
@@ -59,7 +58,6 @@
 				// We're dealing with files ourselves, so we don't want fileUpload to have any internal state,
 				// to avoid conflicts
 				if (fileQueue.queue.length <= 1) fileUpload.clear();
-				console.log("queue item end");
 			});
 		},
 		disabled: () => !canUploadImgs,
@@ -102,7 +100,6 @@
 		<div class="flex w-full gap-4">
 			<textarea
 				bind:this={element}
-				use:autofocusAction={autofocus}
 				value={message?.content}
 				onchange={e => {
 					const el = e.target as HTMLTextAreaElement;
@@ -114,6 +111,7 @@
 				class="grow resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 				rows="1"
 				data-message
+				{@attach autofocusAction(autofocus)}
 			></textarea>
 
 			<!-- Sticky wrapper for action buttons -->

src/lib/components/inference-playground/model-selector-modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { autofocus } from "$lib/actions/autofocus.js";
+	import { autofocus } from "$lib/attachments/autofocus.js";
 	import type { ConversationClass } from "$lib/state/conversations.svelte";
 	import { models } from "$lib/state/models.svelte.js";
 	import type { CustomModel, Model } from "$lib/types.js";
@@ -81,10 +81,10 @@
 			</div>
 			<input
 				{...combobox.input}
-				use:autofocus
 				class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
 				placeholder="Search models ..."
 				bind:value={query}
+				{@attach autofocus()}
 			/>
 		</div>
 		<div

src/lib/components/inference-playground/playground.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { observe, observed, ObservedElements } from "$lib/actions/observe.svelte.js";
+	import { observe, observed, ObservedElements } from "$lib/attachments/observe.svelte.js";
 	import { token } from "$lib/state/token.svelte.js";
 	import { cmdOrCtrl, optOrAlt } from "$lib/utils/platform.js";
 	import { Popover } from "melt/components";
@@ -170,9 +170,13 @@
 					{@const tceRight = observed["token-count-end"].offset.right}
 					<span
 						style:translate={isLast ? (baLeft - 12 < tceRight ? baLeft - tceRight - 12 + "px" : "") : undefined}
-						use:observe={{ name: isLast ? ObservedElements.TokenCountEnd : ObservedElements.TokenCountStart }}
-						>{tokens} tokens · Latency {latency}ms</span
+						{@attach observe({
+							name: isLast ? ObservedElements.TokenCountEnd : ObservedElements.TokenCountStart,
+							useRaf: true,
+						})}
 					>
+						{tokens} tokens · Latency {latency}ms
+					</span>
 				{/each}
 			</div>
 			<div class="flex flex-1 justify-end gap-x-2">
@@ -180,7 +184,7 @@
 					type="button"
 					onclick={() => (viewCode = !viewCode)}
 					class="btn"
-					use:observe={{ name: ObservedElements.BottomActions }}
+					{@attach observe({ name: ObservedElements.BottomActions, useRaf: true })}
 				>
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}

src/lib/components/inference-playground/project-select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { autofocus } from "$lib/actions/autofocus.js";
+	import { autofocus } from "$lib/attachments/autofocus.js";
 	import { checkpoints } from "$lib/state/checkpoints.svelte";
 	import { cn } from "$lib/utils/cn.js";
 	import { Select } from "melt/builders";
@@ -156,9 +156,9 @@
 		<input
 			bind:value={sdState.name}
 			placeholder={projectPlaceholder}
-			use:autofocus
 			type="text"
 			class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+			{@attach autofocus()}
 		/>
 	</label>
 	<label class="mt-4 flex gap-2 font-medium text-gray-900 dark:text-white">

src/lib/components/local-toasts.svelte

@@ -2,6 +2,7 @@
 	import { autoUpdate, computePosition } from "@floating-ui/dom";
 	import { Toaster } from "melt/builders";
 	import { type Snippet } from "svelte";
+	import { type Attachment } from "svelte/attachments";
 	import { fly } from "svelte/transition";
 
 	interface Props {
@@ -29,7 +30,7 @@
 
 	export const addToast = toaster.addToast;
 
-	function float(node: HTMLElement) {
+	const float: Attachment<HTMLElement> = function (node) {
 		const triggerEl = document.querySelector(`[data-local-toast-trigger=${id}]`);
 		if (!triggerEl) return;
 
@@ -44,10 +45,8 @@
 				});
 			});
 
-		return {
-			destroy: autoUpdate(triggerEl, node, compute),
-		};
-	}
+		return autoUpdate(triggerEl, node, compute);
+	};
 
 	const classMap: Record<ToastData["variant"], string> = {
 		info: "border border-blue-400 bg-gradient-to-b from-blue-500 to-blue-600",
@@ -65,7 +64,7 @@
 		class={[!toastSnippet && `${classMap[toast.data.variant]} rounded-full px-2 py-1 text-xs`]}
 		in:fly={{ y: 10 }}
 		out:fly={{ y: -4 }}
-		use:float
+		{@attach float}
 	>
 		{#if toastSnippet}
 			{@render toastSnippet({ toast, float })}

src/lib/components/prompts.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-	import { autofocus } from "$lib/actions/autofocus.js";
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { autofocus } from "$lib/attachments/autofocus.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import IconCross from "~icons/carbon/close";
 
 	type Prompt = {
@@ -49,7 +49,7 @@
 			<form
 				onsubmit={onSubmit}
 				class="relative w-xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
-				use:clickOutside={resolvePrompt}
+				{@attach clickOutside(resolvePrompt)}
 			>
 				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
 					<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
@@ -73,9 +73,9 @@
 							bind:value={current.value}
 							placeholder={current.placeholder}
 							required
-							use:autofocus
 							type="text"
 							class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+							{@attach autofocus()}
 						/>
 					</label>
 				</div>

src/lib/components/quota-modal.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import IconCross from "~icons/carbon/close";
 	import IconCheck from "~icons/carbon/checkmark";
 	import IconExternal from "~icons/carbon/arrow-up-right";
@@ -41,7 +41,7 @@
 			<!-- Content -->
 			<div
 				class="relative w-lg rounded-xl bg-white shadow-sm dark:bg-gray-900"
-				use:clickOutside={() => (open = false)}
+				{@attach clickOutside(() => (open = false))}
 				transition:scale={{ start: 0.975, duration: 250 }}
 			>
 				<h2 class="mt-8 text-center text-2xl font-semibold text-balance sm:text-3xl dark:text-white">

src/lib/components/share-modal.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import { ProjectEntity, projects, type ProjectEntityMembers } from "$lib/state/projects.svelte";
 	import { copyToClipboard } from "$lib/utils/copy.js";
 	import { decodeString, encodeObject } from "$lib/utils/encode.js";
@@ -87,7 +87,7 @@
 			<!-- Content -->
 			<div
 				class="relative w-xl max-w-[calc(100dvw-2rem)] rounded-xl bg-white shadow-sm dark:bg-gray-900"
-				use:clickOutside={() => close()}
+				{@attach clickOutside(() => close())}
 				transition:scale={{ start: 0.975, duration: 250 }}
 			>
 				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">