diff --git a/.Jules/palette.md b/.Jules/palette.md index d6d129b..2f8f5a1 100644 --- a/.Jules/palette.md +++ b/.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. diff --git a/.jules/palette.md b/.jules/palette.md index 00f41cd..9cc85e1 100644 --- a/.jules/palette.md +++ b/.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. diff --git a/dev_output.log b/dev_output.log new file mode 100644 index 0000000..a44ea06 --- /dev/null +++ b/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
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