🎨 Palette: Improve domain search interaction

.Jules/palette.md

@@ -2,3 +2,8 @@
 
 **Learning:** Async buttons that handle errors often fail to reset their error state on subsequent attempts. This leads to a confusing UX where a successful retry still displays the error icon, making the user believe the action failed again.
 **Action:** Always ensure that error flags (e.g., `hasError`) are reset at the _start_ of the async operation, not just set in the `catch` block.
+
+## 2024-10-24 - Search Input Debounce Pattern
+
+**Learning:** Using `on:keyup` for search inputs misses paste and drag-drop events, making the UI feel broken for non-typing interactions.
+**Action:** Use a reactive statement `$: debounce(value)` instead of event listeners to catch all value changes reliably.

.jules/palette.md

@@ -1,3 +1,4 @@
 ## 2024-10-24 - Accessible Icon Props and Loading Button State
+
 **Learning:** Svelte wrapper components (like `Icon.svelte`) must spread `$$restProps` to allow passing accessibility attributes (e.g., `aria-label`) from parent components. Without this, icons remain inaccessible to screen readers. Also, persistent "Success" states on buttons can be confusing; auto-resetting them after a timeout improves clarity.
 **Action:** Always include `{...$$restProps}` in wrapper components and implement auto-reset logic for temporary success states in interactive elements.

dev_output.log

@@ -0,0 +1,99 @@
+yarn run v1.22.22
+$ vite dev --port 5173
+Forced re-optimization of dependencies
+
+  VITE v5.4.9  ready in 2120 ms
+
+  ➜  Local:   http://localhost:5173/
+  ➜  Network: use --host to expose
+9:06:09 PM [vite-plugin-svelte] /app/src/components/Icon.svelte:31:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
+DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+1 │ @import './theme-overrides.scss';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/app.scss 1:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+2 │ @import './mixins.scss';
+  │         ^^^^^^^^^^^^^^^
+  ╵
+    src/styles/app.scss 2:9  root stylesheet
+
+DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+9:06:10 PM [vite-plugin-svelte] /app/node_modules/@smui/snackbar/dist/Snackbar.svelte:16:2 A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.
+9:06:10 PM [vite-plugin-svelte] /app/node_modules/@smui/snackbar/dist/Snackbar.svelte:1:0 A11y: Non-interactive element <aside> should not be assigned mouse or keyboard event listeners.
+9:06:10 PM [vite-plugin-svelte] /app/node_modules/@smui/menu-surface/dist/MenuSurface.svelte:3:0 A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.
+DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+1 │ @import './theme-overrides.scss';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/app.scss 1:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+2 │ @import './mixins.scss';
+  │         ^^^^^^^^^^^^^^^
+  ╵
+    src/styles/app.scss 2:9  root stylesheet
+
+DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+9:06:16 PM [vite-plugin-svelte] /app/src/components/Icon.svelte:31:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
+DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+1 │ @import './theme-overrides.scss';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/app.scss 1:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+2 │ @import './mixins.scss';
+  │         ^^^^^^^^^^^^^^^
+  ╵
+    src/styles/app.scss 2:9  root stylesheet
+
+DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+9:09:13 PM [vite] .env changed, restarting server...
+9:09:13 PM [vite] server restarted.

src/routes/DomainSearch.svelte

@@ -22,8 +22,16 @@
 	$: invalid = domainName !== '' && !validator.validate(domainName, { raiseError: false });
 	$: nameSearchedLabel = nameSearched ? `${nameSearched}.${$metaNamesSdk.config.tld}` : null;
 
-	function debounce() {
+	$: debounce(domainName);
+
+	function debounce(name: string) {
 		clearTimeout(debounceTimer);
+		if (name === '') {
+			domain = undefined;
+			nameSearched = '';
+			isLoading = false;
+			return;
+		}
 		debounceTimer = setTimeout(async () => await search(), 400);
 	}
 
@@ -50,6 +58,7 @@
 	}
 
 	async function submit() {
+		clearTimeout(debounceTimer);
 		await search(true);
 	}
 </script>
@@ -60,7 +69,6 @@
 			class="domain-input"
 			variant="outlined"
 			bind:value={domainName}
-			on:keyup={() => debounce()}
 			bind:invalid
 			label="Domain name"
 			withTrailingIcon