AGENTS.md

@@ -31,7 +31,7 @@ src/
 
 ## Key Design Decisions
 
-- **Svelte 5 runes** — Use `$state`, `$derived`, `$effect`. Props-based event passing (no Svelte events). Event handler attributes are all lower-case (e.g. oninput)
+- **Svelte 5 runes** — Use `$state`, `$derived`, `$effect`. Props-based event passing (no Svelte events).
 - **No external crypto libraries** — Uses the browser's native Web Crypto API exclusively.
 - **Key never persisted** — Encryption key lives only in `$state` memory; cleared on lock, tab switch, or page close.
 - **Single-file build** — `vite-plugin-singlefile` inlines all JS/CSS; post-build script inlines favicon.

dist/index.html

@@ -2326,6 +2326,20 @@ function merge_text_nodes(text) {
 //#endregion
 //#region node_modules/svelte/src/internal/client/dom/elements/misc.js
 /**
+* @param {HTMLElement} dom
+* @param {boolean} value
+* @returns {void}
+*/
+function autofocus(dom, value) {
+	if (value) {
+		const body = document.body;
+		dom.autofocus = true;
+		queue_micro_task(() => {
+			if (document.activeElement === body) dom.focus();
+		});
+	}
+}
+/**
 * The child of a textarea actually corresponds to the defaultValue property, so we need
 * to remove it upon hydration to avoid a bug when someone resets the form value.
 * @param {HTMLTextAreaElement} dom
@@ -4178,36 +4192,6 @@ function head(hash, render_fn) {
 	}
 }
 //#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/actions.js
-/** @import { ActionPayload } from '#client' */
-/**
-* @template P
-* @param {Element} dom
-* @param {(dom: Element, value?: P) => ActionPayload<P>} action
-* @param {() => P} [get_value]
-* @returns {void}
-*/
-function action(dom, action, get_value) {
-	effect(() => {
-		var payload = untrack(() => action(dom, get_value?.()) || {});
-		if (get_value && payload?.update) {
-			var inited = false;
-			/** @type {P} */
-			var prev = {};
-			render_effect(() => {
-				var value = get_value();
-				deep_read_state(value);
-				if (inited && safe_not_equal(prev, value)) {
-					prev = value;
-					/** @type {Function} */ payload.update(value);
-				}
-			});
-			inited = true;
-		}
-		if (payload?.destroy) return () => payload.destroy();
-	});
-}
-//#endregion
 //#region node_modules/svelte/src/internal/shared/attributes.js
 var whitespace = [..." 	\n\r\f\xA0\v"];
 /**
@@ -5631,15 +5615,6 @@ async function importAll(data, mode = "merge", sourcePassword = "", targetKey =
 	};
 }
 //#endregion
-//#region src/lib/autofocus.js
-/**
-* Action that autofocuses an element after mount when the condition is truthy.
-* Uses a microtask to ensure the element is fully rendered.
-*/
-function autofocus(node, condition = true) {
-	if (condition) queueMicrotask(() => node.focus());
-}
-//#endregion
 //#region src/components/LockScreen.svelte
 var root_1$8 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-7sq1ct" role="alert"> </div>`);
 var root_2$6 = /* @__PURE__ */ from_html(`<div class="form-group"><label for="confirm-password">Confirm Password</label> <input id="confirm-password" type="password" placeholder="Confirm master password" autocomplete="new-password"/></div>`);
@@ -5722,8 +5697,7 @@ function LockScreen($$anchor, $$props) {
 	var div_3 = child(form);
 	var input = sibling(child(div_3), 2);
 	remove_input_defaults(input);
-	effect(() => bind_value(input, () => get(masterPassword), ($$value) => set(masterPassword, $$value)));
+	autofocus(input, true);
-	action(input, ($$node) => autofocus?.($$node));
 	reset(div_3);
 	var node_1 = sibling(div_3, 2);
 	var consequent_1 = ($$anchor) => {
@@ -5758,12 +5732,12 @@ function LockScreen($$anchor, $$props) {
 		e.preventDefault();
 		handleSubmit();
 	});
+	bind_value(input, () => get(masterPassword), ($$value) => set(masterPassword, $$value));
 	append($$anchor, div);
 	pop();
 }
 //#endregion
 //#region src/lib/stores/search.svelte.js
-var DEBOUNCE_MS = 300;
 var SearchStore = class {
 	#query = /* @__PURE__ */ state("");
 	get query() {
@@ -5772,13 +5746,6 @@ var SearchStore = class {
 	set query(value) {
 		set(this.#query, value, true);
 	}
-	#debouncedQuery = /* @__PURE__ */ state("");
-	get debouncedQuery() {
-		return get(this.#debouncedQuery);
-	}
-	set debouncedQuery(value) {
-		set(this.#debouncedQuery, value, true);
-	}
 	#activeGroupId = /* @__PURE__ */ state("all");
 	get activeGroupId() {
 		return get(this.#activeGroupId);
@@ -5793,21 +5760,8 @@ var SearchStore = class {
 	set refreshTrigger(value) {
 		set(this.#refreshTrigger, value, true);
 	}
-	#debounceTimer = null;
-	setSearchQuery(value) {
-		this.query = value;
-		if (this.#debounceTimer) clearTimeout(this.#debounceTimer);
-		if (value === "") {
-			this.debouncedQuery = "";
-			this.#debounceTimer = null;
-		} else this.#debounceTimer = setTimeout(() => {
-			this.debouncedQuery = value;
-			this.#debounceTimer = null;
-		}, DEBOUNCE_MS);
-	}
 	clear() {
 		this.query = "";
-		this.debouncedQuery = "";
 		this.activeGroupId = "all";
 	}
 	/** Force subscribed components to re-fetch data. */
@@ -5959,8 +5913,6 @@ function Sidebar($$anchor, $$props) {
 		var div_8 = sibling(node_2, 2);
 		var input_1 = sibling(child(div_8), 2);
 		remove_input_defaults(input_1);
-		effect(() => bind_value(input_1, () => get(groupName), ($$value) => set(groupName, $$value)));
-		action(input_1, ($$node, $$action_arg) => autofocus?.($$node, $$action_arg), () => !get(editingGroupId));
 		reset(div_8);
 		var div_9 = sibling(div_8, 2);
 		var div_10 = sibling(child(div_9), 2);
@@ -5990,6 +5942,7 @@ function Sidebar($$anchor, $$props) {
 		});
 		delegated("click", div_5, () => set(showGroupForm, false));
 		delegated("click", div_6, (e) => e.stopPropagation());
+		bind_value(input_1, () => get(groupName), ($$value) => set(groupName, $$value));
 		delegated("click", button_6, saveGroup);
 		delegated("click", button_7, () => set(showGroupForm, false));
 		append($$anchor, div_5);
@@ -6028,13 +5981,13 @@ function Sidebar($$anchor, $$props) {
 		set_value(input, search.query);
 		set_class(button, 1, `group-item ${search.activeGroupId === "all" ? "active" : ""}`, "svelte-181dlmc");
 	});
-	delegated("input", input, (e) => search.setSearchQuery(e.target.value));
+	event("Input", input, (e) => search.query = e.target.value);
 	delegated("click", button, () => search.activeGroupId = "all");
 	delegated("click", button_4, () => openGroupForm(null));
 	append($$anchor, div);
 	pop();
 }
-delegate(["input", "click"]);
+delegate(["click"]);
 //#endregion
 //#region src/components/EntryList.svelte
 var root_1$6 = /* @__PURE__ */ from_html(`<div class="loading svelte-13s7gu4">Loading entries...</div>`);
@@ -6055,7 +6008,7 @@ function EntryList($$anchor, $$props) {
 		set(loading, true);
 		set(error, "");
 		try {
-			const query = search.debouncedQuery.trim();
+			const query = search.query.trim();
 			const groupId = search.activeGroupId;
 			if (query) set(entries, await searchEntries(query, groupId !== "all" ? { groupId } : {}), true);
 			else if (groupId !== "all") set(entries, await getEntries({ groupId }), true);
@@ -6067,7 +6020,7 @@ function EntryList($$anchor, $$props) {
 		set(loading, false);
 	}
 	user_effect(() => {
-		search.debouncedQuery;
+		search.query;
 		search.activeGroupId;
 		search.refreshTrigger;
 		loadEntries();
@@ -6541,8 +6494,6 @@ function EntryForm($$anchor, $$props) {
 		var div_5 = sibling(node_2, 2);
 		var input = sibling(child(div_5), 2);
 		remove_input_defaults(input);
-		effect(() => bind_value(input, () => get(title), ($$value) => set(title, $$value)));
-		action(input, ($$node, $$action_arg) => autofocus?.($$node, $$action_arg), () => !get(isEdit));
 		reset(div_5);
 		var div_6 = sibling(div_5, 2);
 		var input_1 = sibling(child(div_6), 2);
@@ -6600,6 +6551,7 @@ function EntryForm($$anchor, $$props) {
 			e.preventDefault();
 			handleSubmit();
 		});
+		bind_value(input, () => get(title), ($$value) => set(title, $$value));
 		bind_value(input_1, () => get(username), ($$value) => set(username, $$value));
 		bind_value(input_2, () => get(password), ($$value) => set(password, $$value));
 		delegated("click", button, () => set(passwordVisible, !get(passwordVisible)));
@@ -6904,7 +6856,10 @@ function MainLayout($$anchor, $$props) {
 		if (get(sidebarOpen)) $$render(consequent);
 	});
 	var aside = sibling(node, 2);
-	Sidebar(child(aside), {});
+	Sidebar(child(aside), { $$events: {
+		back: handleBack,
+		goList
+	} });
 	reset(aside);
 	var main = sibling(aside, 2);
 	var div_2 = child(main);

src/components/EntryForm.svelte

@@ -5,7 +5,6 @@
   import { generatePassword } from '../lib/crypto/crypto.js'
   import { app } from '../lib/stores/app.svelte.js'
   import PasswordGenerator from './PasswordGenerator.svelte'
-import { autofocus } from '../lib/autofocus.js'
 
   let { entryId, onSave, onCancel } = $props()
 
@@ -115,7 +114,7 @@ import { autofocus } from '../lib/autofocus.js'
 
       <div class="form-group">
         <label for="title">Title *</label>
-        <input id="title" type="text" bind:value={title} placeholder="e.g. GitHub, Gmail" use:autofocus={!isEdit} />
+        <input id="title" type="text" bind:value={title} placeholder="e.g. GitHub, Gmail" />
       </div>
 
       <div class="form-group">

src/components/EntryList.svelte

@@ -13,7 +13,7 @@
     loading = true
     error = ''
     try {
-      const query = searchStore.debouncedQuery.trim()
+      const query = searchStore.query.trim()
       const groupId = searchStore.activeGroupId
 
       if (query) {
@@ -35,9 +35,9 @@
     loading = false
   }
 
-  // Reload when debounced search query, active group filter, or refresh trigger changes
+  // Reload when search query, active group filter, or refresh trigger changes
   $effect(() => {
-    searchStore.debouncedQuery
+    searchStore.query
     searchStore.activeGroupId
     searchStore.refreshTrigger
     loadEntries()

src/components/LockScreen.svelte

@@ -3,7 +3,6 @@
   import { deriveKey, createTestPayload, verifyPassword } from '../lib/crypto/crypto.js'
   import { saveVaultMeta, loadVaultMeta, isVaultInitialized } from '../lib/storage/db.js'
   import { startAutoLock } from '../lib/stores/security.svelte.js'
-  import { autofocus } from '../lib/autofocus.js'
 
   let masterPassword = $state('')
   let confirmPassword = $state('')
@@ -96,7 +95,7 @@
           bind:value={masterPassword}
           placeholder="Enter master password"
           autocomplete="current-password"
-          use:autofocus
+          autofocus
           disabled={loading}
         />
       </div>

src/components/MainLayout.svelte

@@ -58,7 +58,7 @@
 
   <!-- Sidebar -->
   <aside class="sidebar {sidebarOpen ? 'open' : ''}">
-    <Sidebar />
+    <Sidebar on:back={handleBack} on:goList={goList} />
   </aside>
 
   <!-- Main content -->

src/components/Sidebar.svelte

@@ -2,7 +2,6 @@
   import { getGroups, addGroup, updateGroup, deleteGroup, getEntryCountsByGroup } from '../lib/storage/db.js'
   import { createGroup, validateGroup } from '../lib/models/schema.js'
   import { search as searchStore } from '../lib/stores/search.svelte.js'
-  import { autofocus } from '../lib/autofocus.js'
 
   let groups = $state([])
   let entryCounts = $state(new Map())
@@ -96,7 +95,7 @@
       type="text"
       placeholder="Search entries..."
       value={searchStore.query}
-      oninput={(e) => searchStore.setSearchQuery(e.target.value)}
+      onInput={(e) => searchStore.query = e.target.value}
     />
   </div>
 
@@ -143,7 +142,7 @@
 
         <div class="form-group">
           <label for="group-name">Group Name</label>
-          <input id="group-name" type="text" bind:value={groupName} placeholder="e.g. Work, Personal" use:autofocus={!editingGroupId} />
+          <input id="group-name" type="text" bind:value={groupName} placeholder="e.g. Work, Personal" />
         </div>
 
         <div class="form-group">

src/lib/autofocus.js

@@ -1,9 +0,0 @@
-/**
- * Action that autofocuses an element after mount when the condition is truthy.
- * Uses a microtask to ensure the element is fully rendered.
- */
-export function autofocus(node, condition = true) {
-  if (condition) {
-    queueMicrotask(() => node.focus())
-  }
-}

src/lib/stores/search.svelte.js

@@ -3,36 +3,13 @@
  * Shared between Sidebar and EntryList for coordinated filtering.
  */
 
-const DEBOUNCE_MS = 300
-
 export class SearchStore {
-  query = $state('') // raw input value — bound to the search input
+  query = $state('')
-  debouncedQuery = $state('') // debounced value — used for actual search
   activeGroupId = $state('all') // 'all' or a group id
   refreshTrigger = $state(0) // incremented to force a re-fetch
-  #debounceTimer = null
-
-  /**
-   * Update the search query with debouncing.
-   * Call this from the input handler instead of setting `query` directly.
-   */
-  setSearchQuery(value) {
-    this.query = value
-    if (this.#debounceTimer) clearTimeout(this.#debounceTimer)
-    if (value === '') {
-      this.debouncedQuery = ''
-      this.#debounceTimer = null
-    } else {
-      this.#debounceTimer = setTimeout(() => {
-        this.debouncedQuery = value
-        this.#debounceTimer = null
-      }, DEBOUNCE_MS)
-    }
-  }
 
   clear() {
     this.query = ''
-    this.debouncedQuery = ''
     this.activeGroupId = 'all'
   }
 

tests/lib/stores/search.test.js

@@ -18,12 +18,12 @@ describe('SearchStore', () => {
 
   describe('query', () => {
     it('should update query', () => {
-      search.setSearchQuery('test')
+      search.query = 'test'
       expect(search.query).toBe('test')
     })
 
     it('should handle unicode query', () => {
-      search.setSearchQuery('тест')
+      search.query = 'тест'
       expect(search.query).toBe('тест')
     })
   })
@@ -48,7 +48,7 @@ describe('SearchStore', () => {
 
   describe('clear()', () => {
     it('should reset query to empty string', () => {
-      search.setSearchQuery('some search')
+      search.query = 'some search'
       search.clear()
       expect(search.query).toBe('')
     })
@@ -60,7 +60,7 @@ describe('SearchStore', () => {
     })
 
     it('should reset both fields simultaneously', () => {
-      search.setSearchQuery('some search')
+      search.query = 'some search'
       search.activeGroupId = 'group-123'
       search.clear()
       expect(search.query).toBe('')