diff --git a/README.md b/README.md
index ab12bb7..efff93c 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ The build produces a **single `dist/index.html`** file with all JavaScript, CSS,
 
 The single-file output is handled by [`vite-plugin-singlefile`](https://www.npmjs.com/package/vite-plugin-singlefile) for JS/CSS inlining, plus a post-build script that inlines the favicon SVG and removes leftover asset files.
 
+ 
 
 ### Encryption Flow
 
diff --git a/dist/index.html b/dist/index.html
index ca2254e..be405f3 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -36,4744 +36,238 @@
 	}
 })();
 //#endregion
-//#region node_modules/svelte/src/internal/shared/utils.js
-var is_array = Array.isArray;
-var index_of = Array.prototype.indexOf;
-var includes = Array.prototype.includes;
-var array_from = Array.from;
-var define_property = Object.defineProperty;
-var get_descriptor = Object.getOwnPropertyDescriptor;
-var get_descriptors = Object.getOwnPropertyDescriptors;
-var object_prototype = Object.prototype;
-var array_prototype = Array.prototype;
-var get_prototype_of = Object.getPrototypeOf;
-var is_extensible = Object.isExtensible;
-var noop = () => {};
-/** @param {Function} fn */
-function run(fn) {
-	return fn();
-}
-/** @param {Array<() => void>} arr */
-function run_all(arr) {
-	for (var i = 0; i < arr.length; i++) arr[i]();
-}
-/**
-* TODO replace with Promise.withResolvers once supported widely enough
-* @template [T=void]
-*/
-function deferred() {
-	/** @type {(value: T) => void} */
-	var resolve;
-	/** @type {(reason: any) => void} */
-	var reject;
-	return {
-		promise: new Promise((res, rej) => {
-			resolve = res;
-			reject = rej;
-		}),
-		resolve,
-		reject
-	};
-}
-var CLEAN = 1024;
-var DIRTY = 2048;
-var MAYBE_DIRTY = 4096;
-var INERT = 8192;
-var DESTROYED = 16384;
-/** Set once a reaction has run for the first time */
-var REACTION_RAN = 32768;
-/** Effect is in the process of getting destroyed. Can be observed in child teardown functions */
-var DESTROYING = 1 << 25;
-/**
-* 'Transparent' effects do not create a transition boundary.
-* This is on a block effect 99% of the time but may also be on a branch effect if its parent block effect was pruned
-*/
-var EFFECT_TRANSPARENT = 65536;
-var HEAD_EFFECT = 1 << 18;
-var EFFECT_PRESERVED = 1 << 19;
-var USER_EFFECT = 1 << 20;
-var EFFECT_OFFSCREEN = 1 << 25;
-/**
-* Tells that we marked this derived and its reactions as visited during the "mark as (maybe) dirty"-phase.
-* Will be lifted during execution of the derived and during checking its dirty state (both are necessary
-* because a derived might be checked but not executed). This is a pure performance optimization flag and
-* should not be used for any other purpose!
-*/
-var WAS_MARKED = 65536;
-var REACTION_IS_UPDATING = 1 << 21;
-var ASYNC = 1 << 22;
-var ERROR_VALUE = 1 << 23;
-var STATE_SYMBOL = Symbol("$state");
-var LOADING_ATTR_SYMBOL = Symbol("");
-/** allow users to ignore aborted signal errors if `reason.name === 'StaleReactionError` */
-var STALE_REACTION = new class StaleReactionError extends Error {
-	name = "StaleReactionError";
-	message = "The reaction that called `getAbortSignal()` was re-run or destroyed";
-}();
-var IS_XHTML = !!globalThis.document?.contentType && /* @__PURE__ */ globalThis.document.contentType.includes("xml");
-//#endregion
-//#region node_modules/svelte/src/internal/client/errors.js
-/**
-* Cannot create a `$derived(...)` with an `await` expression outside of an effect tree
-* @returns {never}
-*/
-function async_derived_orphan() {
-	throw new Error(`https://svelte.dev/e/async_derived_orphan`);
-}
-/**
-* Keyed each block has duplicate key `%value%` at indexes %a% and %b%
-* @param {string} a
-* @param {string} b
-* @param {string | undefined | null} [value]
-* @returns {never}
-*/
-function each_key_duplicate(a, b, value) {
-	throw new Error(`https://svelte.dev/e/each_key_duplicate`);
-}
-/**
-* `%rune%` cannot be used inside an effect cleanup function
-* @param {string} rune
-* @returns {never}
-*/
-function effect_in_teardown(rune) {
-	throw new Error(`https://svelte.dev/e/effect_in_teardown`);
-}
-/**
-* Effect cannot be created inside a `$derived` value that was not itself created inside an effect
-* @returns {never}
-*/
-function effect_in_unowned_derived() {
-	throw new Error(`https://svelte.dev/e/effect_in_unowned_derived`);
-}
-/**
-* `%rune%` can only be used inside an effect (e.g. during component initialisation)
-* @param {string} rune
-* @returns {never}
-*/
-function effect_orphan(rune) {
-	throw new Error(`https://svelte.dev/e/effect_orphan`);
-}
-/**
-* Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
-* @returns {never}
-*/
-function effect_update_depth_exceeded() {
-	throw new Error(`https://svelte.dev/e/effect_update_depth_exceeded`);
-}
-/**
-* Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
-* @returns {never}
-*/
-function state_descriptors_fixed() {
-	throw new Error(`https://svelte.dev/e/state_descriptors_fixed`);
-}
-/**
-* Cannot set prototype of `$state` object
-* @returns {never}
-*/
-function state_prototype_fixed() {
-	throw new Error(`https://svelte.dev/e/state_prototype_fixed`);
-}
-/**
-* Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
-* @returns {never}
-*/
-function state_unsafe_mutation() {
-	throw new Error(`https://svelte.dev/e/state_unsafe_mutation`);
-}
-/**
-* A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
-* @returns {never}
-*/
-function svelte_boundary_reset_onerror() {
-	throw new Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`);
-}
-//#endregion
-//#region node_modules/svelte/src/constants.js
-var HYDRATION_ERROR = {};
-var UNINITIALIZED = Symbol();
-var NAMESPACE_HTML = "http://www.w3.org/1999/xhtml";
-/**
-* Reading a derived belonging to a now-destroyed effect may result in stale values
-*/
-function derived_inert() {
-	console.warn(`https://svelte.dev/e/derived_inert`);
-}
-/**
-* Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
-* @param {string | undefined | null} [location]
-*/
-function hydration_mismatch(location) {
-	console.warn(`https://svelte.dev/e/hydration_mismatch`);
-}
-/**
-* The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
-*/
-function select_multiple_invalid_value() {
-	console.warn(`https://svelte.dev/e/select_multiple_invalid_value`);
-}
-/**
-* A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called
-*/
-function svelte_boundary_reset_noop() {
-	console.warn(`https://svelte.dev/e/svelte_boundary_reset_noop`);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/hydration.js
-/** @import { TemplateNode } from '#client' */
-/**
-* Use this variable to guard everything related to hydration code so it can be treeshaken out
-* if the user doesn't use the `hydrate` method and these code paths are therefore not needed.
-*/
-var hydrating = false;
-/** @param {boolean} value */
-function set_hydrating(value) {
-	hydrating = value;
-}
-/**
-* The node that is currently being hydrated. This starts out as the first node inside the opening
-* \x3C!--[--> comment, and updates each time a component calls `$.child(...)` or `$.sibling(...)`.
-* When entering a block (e.g. `{#if ...}`), `hydrate_node` is the block opening comment; by the
-* time we leave the block it is the closing comment, which serves as the block's anchor.
-* @type {TemplateNode}
-*/
-var hydrate_node;
-/** @param {TemplateNode | null} node */
-function set_hydrate_node(node) {
-	if (node === null) {
-		hydration_mismatch();
-		throw HYDRATION_ERROR;
-	}
-	return hydrate_node = node;
-}
-function hydrate_next() {
-	return set_hydrate_node(/* @__PURE__ */ get_next_sibling(hydrate_node));
-}
-/** @param {TemplateNode} node */
-function reset(node) {
-	if (!hydrating) return;
-	if (/* @__PURE__ */ get_next_sibling(hydrate_node) !== null) {
-		hydration_mismatch();
-		throw HYDRATION_ERROR;
-	}
-	hydrate_node = node;
-}
-function next(count = 1) {
-	if (hydrating) {
-		var i = count;
-		var node = hydrate_node;
-		while (i--) node = /* @__PURE__ */ get_next_sibling(node);
-		hydrate_node = node;
-	}
-}
-/**
-* Skips or removes (depending on {@link remove}) all nodes starting at `hydrate_node` up until the next hydration end comment
-* @param {boolean} remove
-*/
-function skip_nodes(remove = true) {
-	var depth = 0;
-	var node = hydrate_node;
-	while (true) {
-		if (node.nodeType === 8) {
-			var data = node.data;
-			if (data === "]") {
-				if (depth === 0) return node;
-				depth -= 1;
-			} else if (data === "[" || data === "[!" || data[0] === "[" && !isNaN(Number(data.slice(1)))) depth += 1;
-		}
-		var next = /* @__PURE__ */ get_next_sibling(node);
-		if (remove) node.remove();
-		node = next;
-	}
-}
+//#region src/components/component.js
 /**
+* Minimal base class for custom vanilla-JS components.
 *
-* @param {TemplateNode} node
+* Subclasses override:
+*   - render()   → returns a DOM element (or fragment)
+*   - destroy()  → cleanup (optional, called on unmount)
+*
+* Helpers:
+*   - this.el          — root DOM element
+*   - this.container   — mount target
+*   - this.subscribe(store, prop, fn) — reactive binding
+*   - this.q(sel)      — querySelector on this.el
+*   - this.qa(sel)     — querySelectorAll on this.el
+*   - this.html(html)  — set innerHTML (use sparingly; prefer createElement for interactive DOM)
+*   - this.on(el, event, fn) — addEventListener with auto-cleanup
 */
-function read_hydration_instruction(node) {
-	if (!node || node.nodeType !== 8) {
-		hydration_mismatch();
-		throw HYDRATION_ERROR;
+var Component = class {
+	/** @param {HTMLElement} container — parent to mount into */
+	constructor(container) {
+		this.container = container;
+		this.el = null;
+		this._listeners = [];
+		this._unsubs = [];
 	}
-	return node.data;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/equality.js
-/** @import { Equals } from '#client' */
-/** @type {Equals} */
-function equals(value) {
-	return value === this.v;
-}
-/**
-* @param {unknown} a
-* @param {unknown} b
-* @returns {boolean}
-*/
-function safe_not_equal(a, b) {
-	return a != a ? b == b : a !== b || a !== null && typeof a === "object" || typeof a === "function";
-}
-/** @type {Equals} */
-function safe_equals(value) {
-	return !safe_not_equal(value, this.v);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/flags/index.js
-/** True if experimental.async=true */
-var async_mode_flag = false;
-/** True if we're not certain that we only have Svelte 5 code in the compilation */
-var legacy_mode_flag = false;
-function enable_legacy_mode_flag() {
-	legacy_mode_flag = true;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/context.js
-/** @import { ComponentContext, DevStackEntry, Effect } from '#client' */
-/** @type {ComponentContext | null} */
-var component_context = null;
-/** @param {ComponentContext | null} context */
-function set_component_context(context) {
-	component_context = context;
-}
-/**
-* @param {Record<string, unknown>} props
-* @param {any} runes
-* @param {Function} [fn]
-* @returns {void}
-*/
-function push(props, runes = false, fn) {
-	component_context = {
-		p: component_context,
-		i: false,
-		c: null,
-		e: null,
-		s: props,
-		x: null,
-		r: active_effect,
-		l: legacy_mode_flag && !runes ? {
-			s: null,
-			u: null,
-			$: []
-		} : null
-	};
-}
-/**
-* @template {Record<string, any>} T
-* @param {T} [component]
-* @returns {T}
-*/
-function pop(component) {
-	var context = component_context;
-	var effects = context.e;
-	if (effects !== null) {
-		context.e = null;
-		for (var fn of effects) create_user_effect(fn);
+	/** Render and mount the component. */
+	mount() {
+		this.el = this.render();
+		if (this.el) {
+			this.container.appendChild(this.el);
+			this.afterMount?.();
+		}
+		return this;
 	}
-	if (component !== void 0) context.x = component;
-	context.i = true;
-	component_context = context.p;
-	return component ?? {};
-}
-/** @returns {boolean} */
-function is_runes() {
-	return !legacy_mode_flag || component_context !== null && component_context.l === null;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/task.js
-/** @type {Array<() => void>} */
-var micro_tasks = [];
-function run_micro_tasks() {
-	var tasks = micro_tasks;
-	micro_tasks = [];
-	run_all(tasks);
-}
-/**
-* @param {() => void} fn
-*/
-function queue_micro_task(fn) {
-	if (micro_tasks.length === 0 && !is_flushing_sync) {
-		var tasks = micro_tasks;
-		queueMicrotask(() => {
-			if (tasks === micro_tasks) run_micro_tasks();
+	/** Override in subclass. Must return a DOM node. */
+	render() {
+		return document.createElement("div");
+	}
+	/** Called after the element is appended to the DOM. Override in subclass. */
+	afterMount() {}
+	/** Remove the component and clean up. */
+	destroy() {
+		this._unsubs.forEach((fn) => fn());
+		this._unsubs = [];
+		this._listeners.forEach(({ el, event, fn }) => {
+			el.removeEventListener(event, fn);
 		});
+		this._listeners = [];
+		if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
+		this.el = null;
 	}
-	micro_tasks.push(fn);
-}
-/**
-* Synchronously run any queued tasks.
-*/
-function flush_tasks() {
-	while (micro_tasks.length > 0) run_micro_tasks();
-}
-/**
-* @param {unknown} error
-*/
-function handle_error(error) {
-	var effect = active_effect;
-	if (effect === null) {
-		/** @type {Derived} */ active_reaction.f |= ERROR_VALUE;
-		return error;
+	/** Subscribe to a store property. Auto-unsubscribed on destroy. */
+	subscribe(store, prop, fn) {
+		const unsub = store.onChange(prop, fn);
+		this._unsubs.push(unsub);
+		return unsub;
 	}
-	if ((effect.f & 32768) === 0 && (effect.f & 4) === 0) throw error;
-	invoke_error_boundary(error, effect);
-}
+	/** Add an event listener with auto-cleanup. */
+	on(target, event, fn, options) {
+		target.addEventListener(event, fn, options);
+		this._listeners.push({
+			el: target,
+			event,
+			fn
+		});
+		return fn;
+	}
+	/** Convenience: querySelector on this.el */
+	q(sel) {
+		return this.el?.querySelector(sel);
+	}
+	/** Convenience: querySelectorAll on this.el */
+	qa(sel) {
+		return this.el?.querySelectorAll(sel) || [];
+	}
+	/** Set innerHTML. Warning: loses event listeners on replaced children. */
+	html(htmlStr) {
+		if (this.el) this.el.innerHTML = htmlStr;
+	}
+	/**
+	* Create an element with tag, attributes, and children.
+	* @param {string} tag
+	* @param {Object} [attrs] — { className, id, style, textContent, innerHTML, ...dataset, ...rest }
+	* @param {...*} children — DOM nodes, strings, or arrays
+	* @returns {HTMLElement}
+	*/
+	ce(tag, attrs, ...children) {
+		const el = document.createElement(tag);
+		attrs = attrs || {};
+		if (attrs.className) el.className = attrs.className;
+		if (attrs.id) el.id = attrs.id;
+		if (attrs.style) if (typeof attrs.style === "string") el.style.cssText = attrs.style;
+		else Object.assign(el.style, attrs.style);
+		if (attrs.title) el.title = attrs.title;
+		if (attrs.disabled !== void 0) el.disabled = attrs.disabled;
+		if (attrs.checked !== void 0) el.checked = attrs.checked;
+		if (attrs.value !== void 0) el.value = attrs.value;
+		if (attrs.type) el.type = attrs.type;
+		if (attrs.placeholder) el.placeholder = attrs.placeholder;
+		if (attrs.autocomplete) el.autocomplete = attrs.autocomplete;
+		if (attrs.draggable !== void 0) el.draggable = attrs.draggable;
+		if (attrs.role) el.setAttribute("role", attrs.role);
+		if (attrs["aria-modal"]) el.setAttribute("aria-modal", attrs["aria-modal"]);
+		if (attrs["aria-label"]) el.setAttribute("aria-label", attrs["aria-label"]);
+		if (attrs["aria-hidden"]) el.setAttribute("aria-hidden", attrs["aria-hidden"]);
+		if (attrs["aria-labelledby"]) el.setAttribute("aria-labelledby", attrs["aria-labelledby"]);
+		if (attrs.tabindex !== void 0) el.tabIndex = attrs.tabindex;
+		if (attrs.href) el.href = attrs.href;
+		if (attrs.target) el.target = attrs.target;
+		if (attrs.rel) el.rel = attrs.rel;
+		if (attrs.accept) el.accept = attrs.accept;
+		if (attrs.name) el.name = attrs.name;
+		for (const key in attrs) if (Object.prototype.hasOwnProperty.call(attrs, key) && key.startsWith("data-") && key.length > 5) el.dataset[key.slice(5)] = attrs[key];
+		if (attrs.dataset) Object.assign(el.dataset, attrs.dataset);
+		if (attrs.innerHTML) el.innerHTML = attrs.innerHTML;
+		else if (attrs.textContent) el.textContent = attrs.textContent;
+		else this._appendChildren(el, children.flat());
+		return el;
+	}
+	_appendChildren(parent, children) {
+		for (const child of children) {
+			if (child === null || child === void 0) continue;
+			if (typeof child === "string" || typeof child === "number") parent.appendChild(document.createTextNode(String(child)));
+			else if (child instanceof Node) parent.appendChild(child);
+			else if (Array.isArray(child)) this._appendChildren(parent, child);
+		}
+	}
+	/**
+	* Create a text node helper.
+	*/
+	text(str) {
+		return document.createTextNode(String(str));
+	}
+	/**
+	* Create a fragment with children.
+	*/
+	frag(...children) {
+		const f = document.createDocumentFragment();
+		this._appendChildren(f, children.flat());
+		return f;
+	}
+};
+//#endregion
+//#region src/lib/stores/store.js
 /**
-* @param {unknown} error
-* @param {Effect | null} effect
+* Minimal reactive store — subscriber/callback pattern.
+*
+* Usage:
+*   const store = new Store({ count: 0, name: '' })
+*   store.onChange('count', v => console.log('count is now', v))
+*   store.set('count', 5)
+*   store.get('count') // 5
+*   // or via proxy: store.count = 5; console.log(store.count)
 */
-function invoke_error_boundary(error, effect) {
-	while (effect !== null) {
-		if ((effect.f & 128) !== 0) {
-			if ((effect.f & 32768) === 0) throw error;
+var Store = class {
+	#data;
+	#subscribers = {};
+	/** @param {Record<string, any>} initial */
+	constructor(initial) {
+		this.#data = { ...initial };
+		const self = this;
+		const proxy = new Proxy({}, {
+			get(_, prop) {
+				if (prop === "_data") return self.#data;
+				if (prop in self.#data) return self.#data[prop];
+			},
+			set(_, prop, value) {
+				if (prop in self.#data) {
+					const old = self.#data[prop];
+					self.#data[prop] = value;
+					if (old !== value) self.#emit(prop, value);
+					return true;
+				}
+				return false;
+			}
+		});
+		this.$ = proxy;
+		this.#syncDescriptors();
+	}
+	/** @param {string} prop @param {*} value */
+	set(prop, value) {
+		const old = this.#data[prop];
+		this.#data[prop] = value;
+		if (old !== value) this.#emit(prop, value);
+		this.#syncDescriptors();
+	}
+	/** @param {string} prop @returns {*} */
+	get(prop) {
+		return this.#data[prop];
+	}
+	/** @param {string} prop @param {Function} fn @returns {Function} unsubscribe */
+	onChange(prop, fn) {
+		if (!this.#subscribers[prop]) this.#subscribers[prop] = /* @__PURE__ */ new Set();
+		this.#subscribers[prop].add(fn);
+		return () => this.#subscribers[prop].delete(fn);
+	}
+	/** @param {string} prop @param {Function} fn */
+	onChangeOnce(prop, fn) {
+		const unsub = this.onChange(prop, (...args) => {
+			fn(...args);
+			unsub();
+		});
+		return unsub;
+	}
+	/** @param {string} prop @param {*} value */
+	#emit(prop, value) {
+		const fns = this.#subscribers[prop];
+		if (fns) [...fns].forEach((fn) => {
 			try {
-				/** @type {Boundary} */ effect.b.error(error);
-				return;
+				fn(value);
 			} catch (e) {
-				error = e;
-			}
-		}
-		effect = effect.parent;
-	}
-	throw error;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/status.js
-/** @import { Derived, Signal } from '#client' */
-var STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN);
-/**
-* @param {Signal} signal
-* @param {number} status
-*/
-function set_signal_status(signal, status) {
-	signal.f = signal.f & STATUS_MASK | status;
-}
-/**
-* Set a derived's status to CLEAN or MAYBE_DIRTY based on its connection state.
-* @param {Derived} derived
-*/
-function update_derived_status(derived) {
-	if ((derived.f & 512) !== 0 || derived.deps === null) set_signal_status(derived, CLEAN);
-	else set_signal_status(derived, MAYBE_DIRTY);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/utils.js
-/** @import { Derived, Effect, Value } from '#client' */
-/**
-* @param {Value[] | null} deps
-*/
-function clear_marked(deps) {
-	if (deps === null) return;
-	for (const dep of deps) {
-		if ((dep.f & 2) === 0 || (dep.f & 65536) === 0) continue;
-		dep.f ^= WAS_MARKED;
-		clear_marked(
-			/** @type {Derived} */
-			dep.deps
-		);
-	}
-}
-/**
-* @param {Effect} effect
-* @param {Set<Effect>} dirty_effects
-* @param {Set<Effect>} maybe_dirty_effects
-*/
-function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
-	if ((effect.f & 2048) !== 0) dirty_effects.add(effect);
-	else if ((effect.f & 4096) !== 0) maybe_dirty_effects.add(effect);
-	clear_marked(effect.deps);
-	set_signal_status(effect, CLEAN);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/store.js
-/**
-* We set this to `true` when updating a store so that we correctly
-* schedule effects if the update takes place inside a `$:` effect
-*/
-var legacy_is_updating_store = false;
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/batch.js
-/** @import { Fork } from 'svelte' */
-/** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
-/** @type {Set<Batch>} */
-var batches = /* @__PURE__ */ new Set();
-/** @type {Batch | null} */
-var current_batch = null;
-/**
-* This is needed to avoid overwriting inputs
-* @type {Batch | null}
-*/
-var previous_batch = null;
-/**
-* When time travelling (i.e. working in one batch, while other batches
-* still have ongoing work), we ignore the real values of affected
-* signals in favour of their values within the batch
-* @type {Map<Value, any> | null}
-*/
-var batch_values = null;
-/** @type {Effect | null} */
-var last_scheduled_effect = null;
-var is_flushing_sync = false;
-var is_processing = false;
-/**
-* During traversal, this is an array. Newly created effects are (if not immediately
-* executed) pushed to this array, rather than going through the scheduling
-* rigamarole that would cause another turn of the flush loop.
-* @type {Effect[] | null}
-*/
-var collected_effects = null;
-/**
-* An array of effects that are marked during traversal as a result of a `set`
-* (not `internal_set`) call. These will be added to the next batch and
-* trigger another `batch.process()`
-* @type {Effect[] | null}
-* @deprecated when we get rid of legacy mode and stores, we can get rid of this
-*/
-var legacy_updates = null;
-var flush_count = 0;
-var uid = 1;
-var Batch = class Batch {
-	id = uid++;
-	/**
-	* The current values of any signals that are updated in this batch.
-	* Tuple format: [value, is_derived] (note: is_derived is false for deriveds, too, if they were overridden via assignment)
-	* They keys of this map are identical to `this.#previous`
-	* @type {Map<Value, [any, boolean]>}
-	*/
-	current = /* @__PURE__ */ new Map();
-	/**
-	* The values of any signals (sources and deriveds) that are updated in this batch _before_ those updates took place.
-	* They keys of this map are identical to `this.#current`
-	* @type {Map<Value, any>}
-	*/
-	previous = /* @__PURE__ */ new Map();
-	/**
-	* When the batch is committed (and the DOM is updated), we need to remove old branches
-	* and append new ones by calling the functions added inside (if/each/key/etc) blocks
-	* @type {Set<(batch: Batch) => void>}
-	*/
-	#commit_callbacks = /* @__PURE__ */ new Set();
-	/**
-	* If a fork is discarded, we need to destroy any effects that are no longer needed
-	* @type {Set<(batch: Batch) => void>}
-	*/
-	#discard_callbacks = /* @__PURE__ */ new Set();
-	/**
-	* Callbacks that should run only when a fork is committed.
-	* @type {Set<(batch: Batch) => void>}
-	*/
-	#fork_commit_callbacks = /* @__PURE__ */ new Set();
-	/**
-	* Async effects that are currently in flight
-	* @type {Map<Effect, number>}
-	*/
-	#pending = /* @__PURE__ */ new Map();
-	/**
-	* Async effects that are currently in flight, _not_ inside a pending boundary
-	* @type {Map<Effect, number>}
-	*/
-	#blocking_pending = /* @__PURE__ */ new Map();
-	/**
-	* A deferred that resolves when the batch is committed, used with `settled()`
-	* TODO replace with Promise.withResolvers once supported widely enough
-	* @type {{ promise: Promise<void>, resolve: (value?: any) => void, reject: (reason: unknown) => void } | null}
-	*/
-	#deferred = null;
-	/**
-	* The root effects that need to be flushed
-	* @type {Effect[]}
-	*/
-	#roots = [];
-	/**
-	* Effects created while this batch was active.
-	* @type {Effect[]}
-	*/
-	#new_effects = [];
-	/**
-	* Deferred effects (which run after async work has completed) that are DIRTY
-	* @type {Set<Effect>}
-	*/
-	#dirty_effects = /* @__PURE__ */ new Set();
-	/**
-	* Deferred effects that are MAYBE_DIRTY
-	* @type {Set<Effect>}
-	*/
-	#maybe_dirty_effects = /* @__PURE__ */ new Set();
-	/**
-	* A map of branches that still exist, but will be destroyed when this batch
-	* is committed — we skip over these during `process`.
-	* The value contains child effects that were dirty/maybe_dirty before being reset,
-	* so they can be rescheduled if the branch survives.
-	* @type {Map<Effect, { d: Effect[], m: Effect[] }>}
-	*/
-	#skipped_branches = /* @__PURE__ */ new Map();
-	/**
-	* Inverse of #skipped_branches which we need to tell prior batches to unskip them when committing
-	* @type {Set<Effect>}
-	*/
-	#unskipped_branches = /* @__PURE__ */ new Set();
-	is_fork = false;
-	#decrement_queued = false;
-	/** @type {Set<Batch>} */
-	#blockers = /* @__PURE__ */ new Set();
-	#is_deferred() {
-		return this.is_fork || this.#blocking_pending.size > 0;
-	}
-	#is_blocked() {
-		for (const batch of this.#blockers) for (const effect of batch.#blocking_pending.keys()) {
-			var skipped = false;
-			var e = effect;
-			while (e.parent !== null) {
-				if (this.#skipped_branches.has(e)) {
-					skipped = true;
-					break;
-				}
-				e = e.parent;
-			}
-			if (!skipped) return true;
-		}
-		return false;
-	}
-	/**
-	* Add an effect to the #skipped_branches map and reset its children
-	* @param {Effect} effect
-	*/
-	skip_effect(effect) {
-		if (!this.#skipped_branches.has(effect)) this.#skipped_branches.set(effect, {
-			d: [],
-			m: []
-		});
-		this.#unskipped_branches.delete(effect);
-	}
-	/**
-	* Remove an effect from the #skipped_branches map and reschedule
-	* any tracked dirty/maybe_dirty child effects
-	* @param {Effect} effect
-	* @param {(e: Effect) => void} callback
-	*/
-	unskip_effect(effect, callback = (e) => this.schedule(e)) {
-		var tracked = this.#skipped_branches.get(effect);
-		if (tracked) {
-			this.#skipped_branches.delete(effect);
-			for (var e of tracked.d) {
-				set_signal_status(e, DIRTY);
-				callback(e);
-			}
-			for (e of tracked.m) {
-				set_signal_status(e, MAYBE_DIRTY);
-				callback(e);
-			}
-		}
-		this.#unskipped_branches.add(effect);
-	}
-	#process() {
-		if (flush_count++ > 1e3) {
-			batches.delete(this);
-			infinite_loop_guard();
-		}
-		if (!this.#is_deferred()) {
-			for (const e of this.#dirty_effects) {
-				this.#maybe_dirty_effects.delete(e);
-				set_signal_status(e, DIRTY);
-				this.schedule(e);
-			}
-			for (const e of this.#maybe_dirty_effects) {
-				set_signal_status(e, MAYBE_DIRTY);
-				this.schedule(e);
-			}
-		}
-		const roots = this.#roots;
-		this.#roots = [];
-		this.apply();
-		/** @type {Effect[]} */
-		var effects = collected_effects = [];
-		/** @type {Effect[]} */
-		var render_effects = [];
-		/**
-		* @type {Effect[]}
-		* @deprecated when we get rid of legacy mode and stores, we can get rid of this
-		*/
-		var updates = legacy_updates = [];
-		for (const root of roots) try {
-			this.#traverse(root, effects, render_effects);
-		} catch (e) {
-			reset_all(root);
-			throw e;
-		}
-		current_batch = null;
-		if (updates.length > 0) {
-			var batch = Batch.ensure();
-			for (const e of updates) batch.schedule(e);
-		}
-		collected_effects = null;
-		legacy_updates = null;
-		if (this.#is_deferred() || this.#is_blocked()) {
-			this.#defer_effects(render_effects);
-			this.#defer_effects(effects);
-			for (const [e, t] of this.#skipped_branches) reset_branch(e, t);
-		} else {
-			if (this.#pending.size === 0) batches.delete(this);
-			this.#dirty_effects.clear();
-			this.#maybe_dirty_effects.clear();
-			for (const fn of this.#commit_callbacks) fn(this);
-			this.#commit_callbacks.clear();
-			previous_batch = this;
-			flush_queued_effects(render_effects);
-			flush_queued_effects(effects);
-			previous_batch = null;
-			this.#deferred?.resolve();
-		}
-		var next_batch = current_batch;
-		if (this.#roots.length > 0) {
-			const batch = next_batch ??= this;
-			batch.#roots.push(...this.#roots.filter((r) => !batch.#roots.includes(r)));
-		}
-		if (next_batch !== null) {
-			batches.add(next_batch);
-			next_batch.#process();
-		}
-		if (async_mode_flag && !batches.has(this)) this.#commit();
-	}
-	/**
-	* Traverse the effect tree, executing effects or stashing
-	* them for later execution as appropriate
-	* @param {Effect} root
-	* @param {Effect[]} effects
-	* @param {Effect[]} render_effects
-	*/
-	#traverse(root, effects, render_effects) {
-		root.f ^= CLEAN;
-		var effect = root.first;
-		while (effect !== null) {
-			var flags = effect.f;
-			var is_branch = (flags & 96) !== 0;
-			if (!(is_branch && (flags & 1024) !== 0 || (flags & 8192) !== 0 || this.#skipped_branches.has(effect)) && effect.fn !== null) {
-				if (is_branch) effect.f ^= CLEAN;
-				else if ((flags & 4) !== 0) effects.push(effect);
-				else if (async_mode_flag && (flags & 16777224) !== 0) render_effects.push(effect);
-				else if (is_dirty(effect)) {
-					if ((flags & 16) !== 0) this.#maybe_dirty_effects.add(effect);
-					update_effect(effect);
-				}
-				var child = effect.first;
-				if (child !== null) {
-					effect = child;
-					continue;
-				}
-			}
-			while (effect !== null) {
-				var next = effect.next;
-				if (next !== null) {
-					effect = next;
-					break;
-				}
-				effect = effect.parent;
-			}
-		}
-	}
-	/**
-	* @param {Effect[]} effects
-	*/
-	#defer_effects(effects) {
-		for (var i = 0; i < effects.length; i += 1) defer_effect(effects[i], this.#dirty_effects, this.#maybe_dirty_effects);
-	}
-	/**
-	* Associate a change to a given source with the current
-	* batch, noting its previous and current values
-	* @param {Value} source
-	* @param {any} value
-	* @param {boolean} [is_derived]
-	*/
-	capture(source, value, is_derived = false) {
-		if (source.v !== UNINITIALIZED && !this.previous.has(source)) this.previous.set(source, source.v);
-		if ((source.f & 8388608) === 0) {
-			this.current.set(source, [value, is_derived]);
-			batch_values?.set(source, value);
-		}
-		if (!this.is_fork) source.v = value;
-	}
-	activate() {
-		current_batch = this;
-	}
-	deactivate() {
-		current_batch = null;
-		batch_values = null;
-	}
-	flush() {
-		try {
-			is_processing = true;
-			current_batch = this;
-			this.#process();
-		} finally {
-			flush_count = 0;
-			last_scheduled_effect = null;
-			collected_effects = null;
-			legacy_updates = null;
-			is_processing = false;
-			current_batch = null;
-			batch_values = null;
-			old_values.clear();
-		}
-	}
-	discard() {
-		for (const fn of this.#discard_callbacks) fn(this);
-		this.#discard_callbacks.clear();
-		this.#fork_commit_callbacks.clear();
-		batches.delete(this);
-	}
-	/**
-	* @param {Effect} effect
-	*/
-	register_created_effect(effect) {
-		this.#new_effects.push(effect);
-	}
-	#commit() {
-		for (const batch of batches) {
-			var is_earlier = batch.id < this.id;
-			/** @type {Source[]} */
-			var sources = [];
-			for (const [source, [value, is_derived]] of this.current) {
-				if (batch.current.has(source)) {
-					var batch_value = batch.current.get(source)[0];
-					if (is_earlier && value !== batch_value) batch.current.set(source, [value, is_derived]);
-					else continue;
-				}
-				sources.push(source);
-			}
-			var others = [...batch.current.keys()].filter((s) => !this.current.has(s));
-			if (others.length === 0) {
-				if (is_earlier) batch.discard();
-			} else if (sources.length > 0) {
-				if (is_earlier) for (const unskipped of this.#unskipped_branches) batch.unskip_effect(unskipped, (e) => {
-					if ((e.f & 4194320) !== 0) batch.schedule(e);
-					else batch.#defer_effects([e]);
-				});
-				batch.activate();
-				/** @type {Set<Value>} */
-				var marked = /* @__PURE__ */ new Set();
-				/** @type {Map<Reaction, boolean>} */
-				var checked = /* @__PURE__ */ new Map();
-				for (var source of sources) mark_effects(source, others, marked, checked);
-				checked = /* @__PURE__ */ new Map();
-				var current_unequal = [...batch.current.keys()].filter((c) => this.current.has(c) ? this.current.get(c)[0] !== c : true);
-				for (const effect of this.#new_effects) if ((effect.f & 155648) === 0 && depends_on(effect, current_unequal, checked)) if ((effect.f & 4194320) !== 0) {
-					set_signal_status(effect, DIRTY);
-					batch.schedule(effect);
-				} else batch.#dirty_effects.add(effect);
-				if (batch.#roots.length > 0) {
-					batch.apply();
-					for (var root of batch.#roots) batch.#traverse(root, [], []);
-					batch.#roots = [];
-				}
-				batch.deactivate();
-			}
-		}
-		for (const batch of batches) if (batch.#blockers.has(this)) {
-			batch.#blockers.delete(this);
-			if (batch.#blockers.size === 0 && !batch.#is_deferred()) {
-				batch.activate();
-				batch.#process();
-			}
-		}
-	}
-	/**
-	* @param {boolean} blocking
-	* @param {Effect} effect
-	*/
-	increment(blocking, effect) {
-		let pending_count = this.#pending.get(effect) ?? 0;
-		this.#pending.set(effect, pending_count + 1);
-		if (blocking) {
-			let blocking_pending_count = this.#blocking_pending.get(effect) ?? 0;
-			this.#blocking_pending.set(effect, blocking_pending_count + 1);
-		}
-	}
-	/**
-	* @param {boolean} blocking
-	* @param {Effect} effect
-	* @param {boolean} skip - whether to skip updates (because this is triggered by a stale reaction)
-	*/
-	decrement(blocking, effect, skip) {
-		let pending_count = this.#pending.get(effect) ?? 0;
-		if (pending_count === 1) this.#pending.delete(effect);
-		else this.#pending.set(effect, pending_count - 1);
-		if (blocking) {
-			let blocking_pending_count = this.#blocking_pending.get(effect) ?? 0;
-			if (blocking_pending_count === 1) this.#blocking_pending.delete(effect);
-			else this.#blocking_pending.set(effect, blocking_pending_count - 1);
-		}
-		if (this.#decrement_queued || skip) return;
-		this.#decrement_queued = true;
-		queue_micro_task(() => {
-			this.#decrement_queued = false;
-			this.flush();
-		});
-	}
-	/**
-	* @param {Set<Effect>} dirty_effects
-	* @param {Set<Effect>} maybe_dirty_effects
-	*/
-	transfer_effects(dirty_effects, maybe_dirty_effects) {
-		for (const e of dirty_effects) this.#dirty_effects.add(e);
-		for (const e of maybe_dirty_effects) this.#maybe_dirty_effects.add(e);
-		dirty_effects.clear();
-		maybe_dirty_effects.clear();
-	}
-	/** @param {(batch: Batch) => void} fn */
-	oncommit(fn) {
-		this.#commit_callbacks.add(fn);
-	}
-	/** @param {(batch: Batch) => void} fn */
-	ondiscard(fn) {
-		this.#discard_callbacks.add(fn);
-	}
-	/** @param {(batch: Batch) => void} fn */
-	on_fork_commit(fn) {
-		this.#fork_commit_callbacks.add(fn);
-	}
-	run_fork_commit_callbacks() {
-		for (const fn of this.#fork_commit_callbacks) fn(this);
-		this.#fork_commit_callbacks.clear();
-	}
-	settled() {
-		return (this.#deferred ??= deferred()).promise;
-	}
-	static ensure() {
-		if (current_batch === null) {
-			const batch = current_batch = new Batch();
-			if (!is_processing) {
-				batches.add(current_batch);
-				if (!is_flushing_sync) queue_micro_task(() => {
-					if (current_batch !== batch) return;
-					batch.flush();
-				});
-			}
-		}
-		return current_batch;
-	}
-	apply() {
-		if (!async_mode_flag || !this.is_fork && batches.size === 1) {
-			batch_values = null;
-			return;
-		}
-		batch_values = /* @__PURE__ */ new Map();
-		for (const [source, [value]] of this.current) batch_values.set(source, value);
-		for (const batch of batches) {
-			if (batch === this || batch.is_fork) continue;
-			var intersects = false;
-			var differs = false;
-			if (batch.id < this.id) for (const [source, [, is_derived]] of batch.current) {
-				if (is_derived) continue;
-				intersects ||= this.current.has(source);
-				differs ||= !this.current.has(source);
-			}
-			if (intersects && differs) this.#blockers.add(batch);
-			else for (const [source, previous] of batch.previous) if (!batch_values.has(source)) batch_values.set(source, previous);
-		}
-	}
-	/**
-	*
-	* @param {Effect} effect
-	*/
-	schedule(effect) {
-		last_scheduled_effect = effect;
-		if (effect.b?.is_pending && (effect.f & 16777228) !== 0 && (effect.f & 32768) === 0) {
-			effect.b.defer_effect(effect);
-			return;
-		}
-		var e = effect;
-		while (e.parent !== null) {
-			e = e.parent;
-			var flags = e.f;
-			if (collected_effects !== null && e === active_effect) {
-				if (async_mode_flag) return;
-				if ((active_reaction === null || (active_reaction.f & 2) === 0) && !legacy_is_updating_store) return;
-			}
-			if ((flags & 96) !== 0) {
-				if ((flags & 1024) === 0) return;
-				e.f ^= CLEAN;
-			}
-		}
-		this.#roots.push(e);
-	}
-};
-/**
-* Synchronously flush any pending updates.
-* Returns void if no callback is provided, otherwise returns the result of calling the callback.
-* @template [T=void]
-* @param {(() => T) | undefined} [fn]
-* @returns {T}
-*/
-function flushSync(fn) {
-	var was_flushing_sync = is_flushing_sync;
-	is_flushing_sync = true;
-	try {
-		var result;
-		if (fn) {
-			if (current_batch !== null && !current_batch.is_fork) current_batch.flush();
-			result = fn();
-		}
-		while (true) {
-			flush_tasks();
-			if (current_batch === null) return result;
-			current_batch.flush();
-		}
-	} finally {
-		is_flushing_sync = was_flushing_sync;
-	}
-}
-function infinite_loop_guard() {
-	try {
-		effect_update_depth_exceeded();
-	} catch (error) {
-		invoke_error_boundary(error, last_scheduled_effect);
-	}
-}
-/** @type {Set<Effect> | null} */
-var eager_block_effects = null;
-/**
-* @param {Array<Effect>} effects
-* @returns {void}
-*/
-function flush_queued_effects(effects) {
-	var length = effects.length;
-	if (length === 0) return;
-	var i = 0;
-	while (i < length) {
-		var effect = effects[i++];
-		if ((effect.f & 24576) === 0 && is_dirty(effect)) {
-			eager_block_effects = /* @__PURE__ */ new Set();
-			update_effect(effect);
-			if (effect.deps === null && effect.first === null && effect.nodes === null && effect.teardown === null && effect.ac === null) unlink_effect(effect);
-			if (eager_block_effects?.size > 0) {
-				old_values.clear();
-				for (const e of eager_block_effects) {
-					if ((e.f & 24576) !== 0) continue;
-					/** @type {Effect[]} */
-					const ordered_effects = [e];
-					let ancestor = e.parent;
-					while (ancestor !== null) {
-						if (eager_block_effects.has(ancestor)) {
-							eager_block_effects.delete(ancestor);
-							ordered_effects.push(ancestor);
-						}
-						ancestor = ancestor.parent;
-					}
-					for (let j = ordered_effects.length - 1; j >= 0; j--) {
-						const e = ordered_effects[j];
-						if ((e.f & 24576) !== 0) continue;
-						update_effect(e);
-					}
-				}
-				eager_block_effects.clear();
-			}
-		}
-	}
-	eager_block_effects = null;
-}
-/**
-* This is similar to `mark_reactions`, but it only marks async/block effects
-* depending on `value` and at least one of the other `sources`, so that
-* these effects can re-run after another batch has been committed
-* @param {Value} value
-* @param {Source[]} sources
-* @param {Set<Value>} marked
-* @param {Map<Reaction, boolean>} checked
-*/
-function mark_effects(value, sources, marked, checked) {
-	if (marked.has(value)) return;
-	marked.add(value);
-	if (value.reactions !== null) for (const reaction of value.reactions) {
-		const flags = reaction.f;
-		if ((flags & 2) !== 0) mark_effects(reaction, sources, marked, checked);
-		else if ((flags & 4194320) !== 0 && (flags & 2048) === 0 && depends_on(reaction, sources, checked)) {
-			set_signal_status(reaction, DIRTY);
-			schedule_effect(reaction);
-		}
-	}
-}
-/**
-* @param {Reaction} reaction
-* @param {Source[]} sources
-* @param {Map<Reaction, boolean>} checked
-*/
-function depends_on(reaction, sources, checked) {
-	const depends = checked.get(reaction);
-	if (depends !== void 0) return depends;
-	if (reaction.deps !== null) for (const dep of reaction.deps) {
-		if (includes.call(sources, dep)) return true;
-		if ((dep.f & 2) !== 0 && depends_on(dep, sources, checked)) {
-			checked.set(dep, true);
-			return true;
-		}
-	}
-	checked.set(reaction, false);
-	return false;
-}
-/**
-* @param {Effect} effect
-* @returns {void}
-*/
-function schedule_effect(effect) {
-	/** @type {Batch} */ current_batch.schedule(effect);
-}
-/**
-* Mark all the effects inside a skipped branch CLEAN, so that
-* they can be correctly rescheduled later. Tracks dirty and maybe_dirty
-* effects so they can be rescheduled if the branch survives.
-* @param {Effect} effect
-* @param {{ d: Effect[], m: Effect[] }} tracked
-*/
-function reset_branch(effect, tracked) {
-	if ((effect.f & 32) !== 0 && (effect.f & 1024) !== 0) return;
-	if ((effect.f & 2048) !== 0) tracked.d.push(effect);
-	else if ((effect.f & 4096) !== 0) tracked.m.push(effect);
-	set_signal_status(effect, CLEAN);
-	var e = effect.first;
-	while (e !== null) {
-		reset_branch(e, tracked);
-		e = e.next;
-	}
-}
-/**
-* Mark an entire effect tree clean following an error
-* @param {Effect} effect
-*/
-function reset_all(effect) {
-	set_signal_status(effect, CLEAN);
-	var e = effect.first;
-	while (e !== null) {
-		reset_all(e);
-		e = e.next;
-	}
-}
-//#endregion
-//#region node_modules/svelte/src/reactivity/create-subscriber.js
-/**
-* Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
-* It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
-*
-* If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
-* the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
-*
-* If `start` returns a cleanup function, it will be called when the effect is destroyed.
-*
-* If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
-* are active, and the returned teardown function will only be called when all effects are destroyed.
-*
-* It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery):
-*
-* ```js
-* import { createSubscriber } from 'svelte/reactivity';
-* import { on } from 'svelte/events';
-*
-* export class MediaQuery {
-* 	#query;
-* 	#subscribe;
-*
-* 	constructor(query) {
-* 		this.#query = window.matchMedia(`(${query})`);
-*
-* 		this.#subscribe = createSubscriber((update) => {
-* 			// when the `change` event occurs, re-run any effects that read `this.current`
-* 			const off = on(this.#query, 'change', update);
-*
-* 			// stop listening when all the effects are destroyed
-* 			return () => off();
-* 		});
-* 	}
-*
-* 	get current() {
-* 		// This makes the getter reactive, if read in an effect
-* 		this.#subscribe();
-*
-* 		// Return the current state of the query, whether or not we're in an effect
-* 		return this.#query.matches;
-* 	}
-* }
-* ```
-* @param {(update: () => void) => (() => void) | void} start
-* @since 5.7.0
-*/
-function createSubscriber(start) {
-	let subscribers = 0;
-	let version = source(0);
-	/** @type {(() => void) | void} */
-	let stop;
-	return () => {
-		if (effect_tracking()) {
-			get(version);
-			render_effect(() => {
-				if (subscribers === 0) stop = untrack(() => start(() => increment(version)));
-				subscribers += 1;
-				return () => {
-					queue_micro_task(() => {
-						subscribers -= 1;
-						if (subscribers === 0) {
-							stop?.();
-							stop = void 0;
-							increment(version);
-						}
-					});
-				};
-			});
-		}
-	};
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/blocks/boundary.js
-/** @import { Effect, Source, TemplateNode, } from '#client' */
-/**
-* @typedef {{
-* 	 onerror?: (error: unknown, reset: () => void) => void;
-*   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void;
-*   pending?: (anchor: Node) => void;
-* }} BoundaryProps
-*/
-var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED;
-/**
-* @param {TemplateNode} node
-* @param {BoundaryProps} props
-* @param {((anchor: Node) => void)} children
-* @param {((error: unknown) => unknown) | undefined} [transform_error]
-* @returns {void}
-*/
-function boundary(node, props, children, transform_error) {
-	new Boundary(node, props, children, transform_error);
-}
-var Boundary = class {
-	/** @type {Boundary | null} */
-	parent;
-	is_pending = false;
-	/**
-	* API-level transformError transform function. Transforms errors before they reach the `failed` snippet.
-	* Inherited from parent boundary, or defaults to identity.
-	* @type {(error: unknown) => unknown}
-	*/
-	transform_error;
-	/** @type {TemplateNode} */
-	#anchor;
-	/** @type {TemplateNode | null} */
-	#hydrate_open = hydrating ? hydrate_node : null;
-	/** @type {BoundaryProps} */
-	#props;
-	/** @type {((anchor: Node) => void)} */
-	#children;
-	/** @type {Effect} */
-	#effect;
-	/** @type {Effect | null} */
-	#main_effect = null;
-	/** @type {Effect | null} */
-	#pending_effect = null;
-	/** @type {Effect | null} */
-	#failed_effect = null;
-	/** @type {DocumentFragment | null} */
-	#offscreen_fragment = null;
-	#local_pending_count = 0;
-	#pending_count = 0;
-	#pending_count_update_queued = false;
-	/** @type {Set<Effect>} */
-	#dirty_effects = /* @__PURE__ */ new Set();
-	/** @type {Set<Effect>} */
-	#maybe_dirty_effects = /* @__PURE__ */ new Set();
-	/**
-	* A source containing the number of pending async deriveds/expressions.
-	* Only created if `$effect.pending()` is used inside the boundary,
-	* otherwise updating the source results in needless `Batch.ensure()`
-	* calls followed by no-op flushes
-	* @type {Source<number> | null}
-	*/
-	#effect_pending = null;
-	#effect_pending_subscriber = createSubscriber(() => {
-		this.#effect_pending = source(this.#local_pending_count);
-		return () => {
-			this.#effect_pending = null;
-		};
-	});
-	/**
-	* @param {TemplateNode} node
-	* @param {BoundaryProps} props
-	* @param {((anchor: Node) => void)} children
-	* @param {((error: unknown) => unknown) | undefined} [transform_error]
-	*/
-	constructor(node, props, children, transform_error) {
-		this.#anchor = node;
-		this.#props = props;
-		this.#children = (anchor) => {
-			var effect = active_effect;
-			effect.b = this;
-			effect.f |= 128;
-			children(anchor);
-		};
-		this.parent = active_effect.b;
-		this.transform_error = transform_error ?? this.parent?.transform_error ?? ((e) => e);
-		this.#effect = block(() => {
-			if (hydrating) {
-				const comment = this.#hydrate_open;
-				hydrate_next();
-				const server_rendered_pending = comment.data === "[!";
-				if (comment.data.startsWith("[?")) {
-					const serialized_error = JSON.parse(comment.data.slice(2));
-					this.#hydrate_failed_content(serialized_error);
-				} else if (server_rendered_pending) this.#hydrate_pending_content();
-				else this.#hydrate_resolved_content();
-			} else this.#render();
-		}, flags);
-		if (hydrating) this.#anchor = hydrate_node;
-	}
-	#hydrate_resolved_content() {
-		try {
-			this.#main_effect = branch(() => this.#children(this.#anchor));
-		} catch (error) {
-			this.error(error);
-		}
-	}
-	/**
-	* @param {unknown} error The deserialized error from the server's hydration comment
-	*/
-	#hydrate_failed_content(error) {
-		const failed = this.#props.failed;
-		if (!failed) return;
-		this.#failed_effect = branch(() => {
-			failed(this.#anchor, () => error, () => () => {});
-		});
-	}
-	#hydrate_pending_content() {
-		const pending = this.#props.pending;
-		if (!pending) return;
-		this.is_pending = true;
-		this.#pending_effect = branch(() => pending(this.#anchor));
-		queue_micro_task(() => {
-			var fragment = this.#offscreen_fragment = document.createDocumentFragment();
-			var anchor = create_text();
-			fragment.append(anchor);
-			this.#main_effect = this.#run(() => {
-				return branch(() => this.#children(anchor));
-			});
-			if (this.#pending_count === 0) {
-				this.#anchor.before(fragment);
-				this.#offscreen_fragment = null;
-				pause_effect(this.#pending_effect, () => {
-					this.#pending_effect = null;
-				});
-				this.#resolve(current_batch);
+				console.error("Store subscriber error:", e);
 			}
 		});
 	}
-	#render() {
-		try {
-			this.is_pending = this.has_pending_snippet();
-			this.#pending_count = 0;
-			this.#local_pending_count = 0;
-			this.#main_effect = branch(() => {
-				this.#children(this.#anchor);
+	#syncDescriptors() {
+		for (const key of Object.keys(this.#data)) {
+			if (Object.getOwnPropertyDescriptor(this, key)) continue;
+			Object.defineProperty(this, key, {
+				get: () => this.#data[key],
+				set: (value) => {
+					const old = this.#data[key];
+					this.#data[key] = value;
+					if (old !== value) this.#emit(key, value);
+				},
+				enumerable: true,
+				configurable: true
 			});
-			if (this.#pending_count > 0) {
-				var fragment = this.#offscreen_fragment = document.createDocumentFragment();
-				move_effect(this.#main_effect, fragment);
-				const pending = this.#props.pending;
-				this.#pending_effect = branch(() => pending(this.#anchor));
-			} else this.#resolve(current_batch);
-		} catch (error) {
-			this.error(error);
-		}
-	}
-	/**
-	* @param {Batch} batch
-	*/
-	#resolve(batch) {
-		this.is_pending = false;
-		batch.transfer_effects(this.#dirty_effects, this.#maybe_dirty_effects);
-	}
-	/**
-	* Defer an effect inside a pending boundary until the boundary resolves
-	* @param {Effect} effect
-	*/
-	defer_effect(effect) {
-		defer_effect(effect, this.#dirty_effects, this.#maybe_dirty_effects);
-	}
-	/**
-	* Returns `false` if the effect exists inside a boundary whose pending snippet is shown
-	* @returns {boolean}
-	*/
-	is_rendered() {
-		return !this.is_pending && (!this.parent || this.parent.is_rendered());
-	}
-	has_pending_snippet() {
-		return !!this.#props.pending;
-	}
-	/**
-	* @template T
-	* @param {() => T} fn
-	*/
-	#run(fn) {
-		var previous_effect = active_effect;
-		var previous_reaction = active_reaction;
-		var previous_ctx = component_context;
-		set_active_effect(this.#effect);
-		set_active_reaction(this.#effect);
-		set_component_context(this.#effect.ctx);
-		try {
-			Batch.ensure();
-			return fn();
-		} catch (e) {
-			handle_error(e);
-			return null;
-		} finally {
-			set_active_effect(previous_effect);
-			set_active_reaction(previous_reaction);
-			set_component_context(previous_ctx);
-		}
-	}
-	/**
-	* Updates the pending count associated with the currently visible pending snippet,
-	* if any, such that we can replace the snippet with content once work is done
-	* @param {1 | -1} d
-	* @param {Batch} batch
-	*/
-	#update_pending_count(d, batch) {
-		if (!this.has_pending_snippet()) {
-			if (this.parent) this.parent.#update_pending_count(d, batch);
-			return;
-		}
-		this.#pending_count += d;
-		if (this.#pending_count === 0) {
-			this.#resolve(batch);
-			if (this.#pending_effect) pause_effect(this.#pending_effect, () => {
-				this.#pending_effect = null;
-			});
-			if (this.#offscreen_fragment) {
-				this.#anchor.before(this.#offscreen_fragment);
-				this.#offscreen_fragment = null;
-			}
-		}
-	}
-	/**
-	* Update the source that powers `$effect.pending()` inside this boundary,
-	* and controls when the current `pending` snippet (if any) is removed.
-	* Do not call from inside the class
-	* @param {1 | -1} d
-	* @param {Batch} batch
-	*/
-	update_pending_count(d, batch) {
-		this.#update_pending_count(d, batch);
-		this.#local_pending_count += d;
-		if (!this.#effect_pending || this.#pending_count_update_queued) return;
-		this.#pending_count_update_queued = true;
-		queue_micro_task(() => {
-			this.#pending_count_update_queued = false;
-			if (this.#effect_pending) internal_set(this.#effect_pending, this.#local_pending_count);
-		});
-	}
-	get_effect_pending() {
-		this.#effect_pending_subscriber();
-		return get(this.#effect_pending);
-	}
-	/** @param {unknown} error */
-	error(error) {
-		if (!this.#props.onerror && !this.#props.failed) throw error;
-		if (current_batch?.is_fork) {
-			if (this.#main_effect) current_batch.skip_effect(this.#main_effect);
-			if (this.#pending_effect) current_batch.skip_effect(this.#pending_effect);
-			if (this.#failed_effect) current_batch.skip_effect(this.#failed_effect);
-			current_batch.on_fork_commit(() => {
-				this.#handle_error(error);
-			});
-		} else this.#handle_error(error);
-	}
-	/**
-	* @param {unknown} error
-	*/
-	#handle_error(error) {
-		if (this.#main_effect) {
-			destroy_effect(this.#main_effect);
-			this.#main_effect = null;
-		}
-		if (this.#pending_effect) {
-			destroy_effect(this.#pending_effect);
-			this.#pending_effect = null;
-		}
-		if (this.#failed_effect) {
-			destroy_effect(this.#failed_effect);
-			this.#failed_effect = null;
-		}
-		if (hydrating) {
-			set_hydrate_node(this.#hydrate_open);
-			next();
-			set_hydrate_node(skip_nodes());
-		}
-		var onerror = this.#props.onerror;
-		let failed = this.#props.failed;
-		var did_reset = false;
-		var calling_on_error = false;
-		const reset = () => {
-			if (did_reset) {
-				svelte_boundary_reset_noop();
-				return;
-			}
-			did_reset = true;
-			if (calling_on_error) svelte_boundary_reset_onerror();
-			if (this.#failed_effect !== null) pause_effect(this.#failed_effect, () => {
-				this.#failed_effect = null;
-			});
-			this.#run(() => {
-				this.#render();
-			});
-		};
-		/** @param {unknown} transformed_error */
-		const handle_error_result = (transformed_error) => {
-			try {
-				calling_on_error = true;
-				onerror?.(transformed_error, reset);
-				calling_on_error = false;
-			} catch (error) {
-				invoke_error_boundary(error, this.#effect && this.#effect.parent);
-			}
-			if (failed) this.#failed_effect = this.#run(() => {
-				try {
-					return branch(() => {
-						var effect = active_effect;
-						effect.b = this;
-						effect.f |= 128;
-						failed(this.#anchor, () => transformed_error, () => reset);
-					});
-				} catch (error) {
-					invoke_error_boundary(error, this.#effect.parent);
-					return null;
-				}
-			});
-		};
-		queue_micro_task(() => {
-			/** @type {unknown} */
-			var result;
-			try {
-				result = this.transform_error(error);
-			} catch (e) {
-				invoke_error_boundary(e, this.#effect && this.#effect.parent);
-				return;
-			}
-			if (result !== null && typeof result === "object" && typeof result.then === "function")
- /** @type {any} */ result.then(
-				handle_error_result,
-				/** @param {unknown} e */
-				(e) => invoke_error_boundary(e, this.#effect && this.#effect.parent)
-			);
-			else handle_error_result(result);
-		});
-	}
-};
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/async.js
-/** @import { Blocker, Effect, Value } from '#client' */
-/**
-* @param {Blocker[]} blockers
-* @param {Array<() => any>} sync
-* @param {Array<() => Promise<any>>} async
-* @param {(values: Value[]) => any} fn
-*/
-function flatten(blockers, sync, async, fn) {
-	const d = is_runes() ? derived : derived_safe_equal;
-	var pending = blockers.filter((b) => !b.settled);
-	if (async.length === 0 && pending.length === 0) {
-		fn(sync.map(d));
-		return;
-	}
-	var parent = active_effect;
-	var restore = capture();
-	var blocker_promise = pending.length === 1 ? pending[0].promise : pending.length > 1 ? Promise.all(pending.map((b) => b.promise)) : null;
-	/** @param {Value[]} values */
-	function finish(values) {
-		restore();
-		try {
-			fn(values);
-		} catch (error) {
-			if ((parent.f & 16384) === 0) invoke_error_boundary(error, parent);
-		}
-		unset_context();
-	}
-	if (async.length === 0) {
-		/** @type {Promise<any>} */ blocker_promise.then(() => finish(sync.map(d)));
-		return;
-	}
-	var decrement_pending = increment_pending();
-	function run() {
-		Promise.all(async.map((expression) => /* @__PURE__ */ async_derived(expression))).then((result) => finish([...sync.map(d), ...result])).catch((error) => invoke_error_boundary(error, parent)).finally(() => decrement_pending());
-	}
-	if (blocker_promise) blocker_promise.then(() => {
-		restore();
-		run();
-		unset_context();
-	});
-	else run();
-}
-/**
-* Captures the current effect context so that we can restore it after
-* some asynchronous work has happened (so that e.g. `await a + b`
-* causes `b` to be registered as a dependency).
-*/
-function capture() {
-	var previous_effect = active_effect;
-	var previous_reaction = active_reaction;
-	var previous_component_context = component_context;
-	var previous_batch = current_batch;
-	return function restore(activate_batch = true) {
-		set_active_effect(previous_effect);
-		set_active_reaction(previous_reaction);
-		set_component_context(previous_component_context);
-		if (activate_batch && (previous_effect.f & 16384) === 0) {
-			previous_batch?.activate();
-			previous_batch?.apply();
-		}
-	};
-}
-function unset_context(deactivate_batch = true) {
-	set_active_effect(null);
-	set_active_reaction(null);
-	set_component_context(null);
-	if (deactivate_batch) current_batch?.deactivate();
-}
-/**
-* @returns {(skip?: boolean) => void}
-*/
-function increment_pending() {
-	var effect = active_effect;
-	var boundary = effect.b;
-	var batch = current_batch;
-	var blocking = boundary.is_rendered();
-	boundary.update_pending_count(1, batch);
-	batch.increment(blocking, effect);
-	return (skip = false) => {
-		boundary.update_pending_count(-1, batch);
-		batch.decrement(blocking, effect, skip);
-	};
-}
-/**
-* @template V
-* @param {() => V} fn
-* @returns {Derived<V>}
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function derived(fn) {
-	var flags = 2 | DIRTY;
-	if (active_effect !== null) active_effect.f |= EFFECT_PRESERVED;
-	return {
-		ctx: component_context,
-		deps: null,
-		effects: null,
-		equals,
-		f: flags,
-		fn,
-		reactions: null,
-		rv: 0,
-		v: UNINITIALIZED,
-		wv: 0,
-		parent: active_effect,
-		ac: null
-	};
-}
-/**
-* @template V
-* @param {() => V | Promise<V>} fn
-* @param {string} [label]
-* @param {string} [location] If provided, print a warning if the value is not read immediately after update
-* @returns {Promise<Source<V>>}
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function async_derived(fn, label, location) {
-	let parent = active_effect;
-	if (parent === null) async_derived_orphan();
-	var promise = void 0;
-	var signal = source(UNINITIALIZED);
-	var should_suspend = !active_reaction;
-	/** @type {Map<Batch, ReturnType<typeof deferred<V>>>} */
-	var deferreds = /* @__PURE__ */ new Map();
-	async_effect(() => {
-		var effect = active_effect;
-		/** @type {ReturnType<typeof deferred<V>>} */
-		var d = deferred();
-		promise = d.promise;
-		try {
-			Promise.resolve(fn()).then(d.resolve, d.reject).finally(unset_context);
-		} catch (error) {
-			d.reject(error);
-			unset_context();
-		}
-		var batch = current_batch;
-		if (should_suspend) {
-			if ((effect.f & 32768) !== 0) var decrement_pending = increment_pending();
-			if (parent.b.is_rendered()) {
-				deferreds.get(batch)?.reject(STALE_REACTION);
-				deferreds.delete(batch);
-			} else {
-				for (const d of deferreds.values()) d.reject(STALE_REACTION);
-				deferreds.clear();
-			}
-			deferreds.set(batch, d);
-		}
-		/**
-		* @param {any} value
-		* @param {unknown} error
-		*/
-		const handler = (value, error = void 0) => {
-			if (decrement_pending) decrement_pending(error === STALE_REACTION);
-			if (error === STALE_REACTION || (effect.f & 16384) !== 0) return;
-			batch.activate();
-			if (error) {
-				signal.f |= ERROR_VALUE;
-				internal_set(signal, error);
-			} else {
-				if ((signal.f & 8388608) !== 0) signal.f ^= ERROR_VALUE;
-				internal_set(signal, value);
-				for (const [b, d] of deferreds) {
-					deferreds.delete(b);
-					if (b === batch) break;
-					d.reject(STALE_REACTION);
-				}
-			}
-			batch.deactivate();
-		};
-		d.promise.then(handler, (e) => handler(null, e || "unknown"));
-	});
-	teardown(() => {
-		for (const d of deferreds.values()) d.reject(STALE_REACTION);
-	});
-	return new Promise((fulfil) => {
-		/** @param {Promise<V>} p */
-		function next(p) {
-			function go() {
-				if (p === promise) fulfil(signal);
-				else next(promise);
-			}
-			p.then(go, go);
-		}
-		next(promise);
-	});
-}
-/**
-* @template V
-* @param {() => V} fn
-* @returns {Derived<V>}
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function user_derived(fn) {
-	const d = /* @__PURE__ */ derived(fn);
-	if (!async_mode_flag) push_reaction_value(d);
-	return d;
-}
-/**
-* @template V
-* @param {() => V} fn
-* @returns {Derived<V>}
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function derived_safe_equal(fn) {
-	const signal = /* @__PURE__ */ derived(fn);
-	signal.equals = safe_equals;
-	return signal;
-}
-/**
-* @param {Derived} derived
-* @returns {void}
-*/
-function destroy_derived_effects(derived) {
-	var effects = derived.effects;
-	if (effects !== null) {
-		derived.effects = null;
-		for (var i = 0; i < effects.length; i += 1) destroy_effect(effects[i]);
-	}
-}
-/**
-* @template T
-* @param {Derived} derived
-* @returns {T}
-*/
-function execute_derived(derived) {
-	var value;
-	var prev_active_effect = active_effect;
-	var parent = derived.parent;
-	if (!is_destroying_effect && parent !== null && (parent.f & 24576) !== 0) {
-		derived_inert();
-		return derived.v;
-	}
-	set_active_effect(parent);
-	try {
-		derived.f &= ~WAS_MARKED;
-		destroy_derived_effects(derived);
-		value = update_reaction(derived);
-	} finally {
-		set_active_effect(prev_active_effect);
-	}
-	return value;
-}
-/**
-* @param {Derived} derived
-* @returns {void}
-*/
-function update_derived(derived) {
-	var value = execute_derived(derived);
-	if (!derived.equals(value)) {
-		derived.wv = increment_write_version();
-		if (!current_batch?.is_fork || derived.deps === null) {
-			if (current_batch !== null) current_batch.capture(derived, value, true);
-			else derived.v = value;
-			if (derived.deps === null) {
-				set_signal_status(derived, CLEAN);
-				return;
-			}
-		}
-	}
-	if (is_destroying_effect) return;
-	if (batch_values !== null) {
-		if (effect_tracking() || current_batch?.is_fork) batch_values.set(derived, value);
-	} else update_derived_status(derived);
-}
-/**
-* @param {Derived} derived
-*/
-function freeze_derived_effects(derived) {
-	if (derived.effects === null) return;
-	for (const e of derived.effects) if (e.teardown || e.ac) {
-		e.teardown?.();
-		e.ac?.abort(STALE_REACTION);
-		e.teardown = noop;
-		e.ac = null;
-		remove_reactions(e, 0);
-		destroy_effect_children(e);
-	}
-}
-/**
-* @param {Derived} derived
-*/
-function unfreeze_derived_effects(derived) {
-	if (derived.effects === null) return;
-	for (const e of derived.effects) if (e.teardown) update_effect(e);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/sources.js
-/** @import { Derived, Effect, Source, Value } from '#client' */
-/** @type {Set<any>} */
-var eager_effects = /* @__PURE__ */ new Set();
-/** @type {Map<Source, any>} */
-var old_values = /* @__PURE__ */ new Map();
-var eager_effects_deferred = false;
-/**
-* @template V
-* @param {V} v
-* @param {Error | null} [stack]
-* @returns {Source<V>}
-*/
-function source(v, stack) {
-	return {
-		f: 0,
-		v,
-		reactions: null,
-		equals,
-		rv: 0,
-		wv: 0
-	};
-}
-/**
-* @template V
-* @param {V} v
-* @param {Error | null} [stack]
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function state(v, stack) {
-	const s = source(v, stack);
-	push_reaction_value(s);
-	return s;
-}
-/**
-* @template V
-* @param {V} initial_value
-* @param {boolean} [immutable]
-* @returns {Source<V>}
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function mutable_source(initial_value, immutable = false, trackable = true) {
-	const s = source(initial_value);
-	if (!immutable) s.equals = safe_equals;
-	if (legacy_mode_flag && trackable && component_context !== null && component_context.l !== null) (component_context.l.s ??= []).push(s);
-	return s;
-}
-/**
-* @template V
-* @param {Source<V>} source
-* @param {V} value
-* @param {boolean} [should_proxy]
-* @returns {V}
-*/
-function set(source, value, should_proxy = false) {
-	if (active_reaction !== null && (!untracking || (active_reaction.f & 131072) !== 0) && is_runes() && (active_reaction.f & 4325394) !== 0 && (current_sources === null || !includes.call(current_sources, source))) state_unsafe_mutation();
-	return internal_set(source, should_proxy ? proxy(value) : value, legacy_updates);
-}
-/**
-* @template V
-* @param {Source<V>} source
-* @param {V} value
-* @param {Effect[] | null} [updated_during_traversal]
-* @returns {V}
-*/
-function internal_set(source, value, updated_during_traversal = null) {
-	if (!source.equals(value)) {
-		old_values.set(source, is_destroying_effect ? value : source.v);
-		var batch = Batch.ensure();
-		batch.capture(source, value);
-		if ((source.f & 2) !== 0) {
-			const derived = source;
-			if ((source.f & 2048) !== 0) execute_derived(derived);
-			if (batch_values === null) update_derived_status(derived);
-		}
-		source.wv = increment_write_version();
-		mark_reactions(source, DIRTY, updated_during_traversal);
-		if (is_runes() && active_effect !== null && (active_effect.f & 1024) !== 0 && (active_effect.f & 96) === 0) if (untracked_writes === null) set_untracked_writes([source]);
-		else untracked_writes.push(source);
-		if (!batch.is_fork && eager_effects.size > 0 && !eager_effects_deferred) flush_eager_effects();
-	}
-	return value;
-}
-function flush_eager_effects() {
-	eager_effects_deferred = false;
-	for (const effect of eager_effects) {
-		if ((effect.f & 1024) !== 0) set_signal_status(effect, MAYBE_DIRTY);
-		if (is_dirty(effect)) update_effect(effect);
-	}
-	eager_effects.clear();
-}
-/**
-* Silently (without using `get`) increment a source
-* @param {Source<number>} source
-*/
-function increment(source) {
-	set(source, source.v + 1);
-}
-/**
-* @param {Value} signal
-* @param {number} status should be DIRTY or MAYBE_DIRTY
-* @param {Effect[] | null} updated_during_traversal
-* @returns {void}
-*/
-function mark_reactions(signal, status, updated_during_traversal) {
-	var reactions = signal.reactions;
-	if (reactions === null) return;
-	var runes = is_runes();
-	var length = reactions.length;
-	for (var i = 0; i < length; i++) {
-		var reaction = reactions[i];
-		var flags = reaction.f;
-		if (!runes && reaction === active_effect) continue;
-		var not_dirty = (flags & DIRTY) === 0;
-		if (not_dirty) set_signal_status(reaction, status);
-		if ((flags & 2) !== 0) {
-			var derived = reaction;
-			batch_values?.delete(derived);
-			if ((flags & 65536) === 0) {
-				if (flags & 512 && (active_effect === null || (active_effect.f & 2097152) === 0)) reaction.f |= WAS_MARKED;
-				mark_reactions(derived, MAYBE_DIRTY, updated_during_traversal);
-			}
-		} else if (not_dirty) {
-			var effect = reaction;
-			if ((flags & 16) !== 0 && eager_block_effects !== null) eager_block_effects.add(effect);
-			if (updated_during_traversal !== null) updated_during_traversal.push(effect);
-			else schedule_effect(effect);
-		}
-	}
-}
-/**
-* @template T
-* @param {T} value
-* @returns {T}
-*/
-function proxy(value) {
-	if (typeof value !== "object" || value === null || STATE_SYMBOL in value) return value;
-	const prototype = get_prototype_of(value);
-	if (prototype !== object_prototype && prototype !== array_prototype) return value;
-	/** @type {Map<any, Source<any>>} */
-	var sources = /* @__PURE__ */ new Map();
-	var is_proxied_array = is_array(value);
-	var version = /* @__PURE__ */ state(0);
-	var stack = null;
-	var parent_version = update_version;
-	/**
-	* Executes the proxy in the context of the reaction it was originally created in, if any
-	* @template T
-	* @param {() => T} fn
-	*/
-	var with_parent = (fn) => {
-		if (update_version === parent_version) return fn();
-		var reaction = active_reaction;
-		var version = update_version;
-		set_active_reaction(null);
-		set_update_version(parent_version);
-		var result = fn();
-		set_active_reaction(reaction);
-		set_update_version(version);
-		return result;
-	};
-	if (is_proxied_array) sources.set("length", /* @__PURE__ */ state(
-		/** @type {any[]} */
-		value.length,
-		stack
-	));
-	return new Proxy(value, {
-		defineProperty(_, prop, descriptor) {
-			if (!("value" in descriptor) || descriptor.configurable === false || descriptor.enumerable === false || descriptor.writable === false) state_descriptors_fixed();
-			var s = sources.get(prop);
-			if (s === void 0) with_parent(() => {
-				var s = /* @__PURE__ */ state(descriptor.value, stack);
-				sources.set(prop, s);
-				return s;
-			});
-			else set(s, descriptor.value, true);
-			return true;
-		},
-		deleteProperty(target, prop) {
-			var s = sources.get(prop);
-			if (s === void 0) {
-				if (prop in target) {
-					const s = with_parent(() => /* @__PURE__ */ state(UNINITIALIZED, stack));
-					sources.set(prop, s);
-					increment(version);
-				}
-			} else {
-				set(s, UNINITIALIZED);
-				increment(version);
-			}
-			return true;
-		},
-		get(target, prop, receiver) {
-			if (prop === STATE_SYMBOL) return value;
-			var s = sources.get(prop);
-			var exists = prop in target;
-			if (s === void 0 && (!exists || get_descriptor(target, prop)?.writable)) {
-				s = with_parent(() => {
-					return /* @__PURE__ */ state(proxy(exists ? target[prop] : UNINITIALIZED), stack);
-				});
-				sources.set(prop, s);
-			}
-			if (s !== void 0) {
-				var v = get(s);
-				return v === UNINITIALIZED ? void 0 : v;
-			}
-			return Reflect.get(target, prop, receiver);
-		},
-		getOwnPropertyDescriptor(target, prop) {
-			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
-			if (descriptor && "value" in descriptor) {
-				var s = sources.get(prop);
-				if (s) descriptor.value = get(s);
-			} else if (descriptor === void 0) {
-				var source = sources.get(prop);
-				var value = source?.v;
-				if (source !== void 0 && value !== UNINITIALIZED) return {
-					enumerable: true,
-					configurable: true,
-					value,
-					writable: true
-				};
-			}
-			return descriptor;
-		},
-		has(target, prop) {
-			if (prop === STATE_SYMBOL) return true;
-			var s = sources.get(prop);
-			var has = s !== void 0 && s.v !== UNINITIALIZED || Reflect.has(target, prop);
-			if (s !== void 0 || active_effect !== null && (!has || get_descriptor(target, prop)?.writable)) {
-				if (s === void 0) {
-					s = with_parent(() => {
-						return /* @__PURE__ */ state(has ? proxy(target[prop]) : UNINITIALIZED, stack);
-					});
-					sources.set(prop, s);
-				}
-				if (get(s) === UNINITIALIZED) return false;
-			}
-			return has;
-		},
-		set(target, prop, value, receiver) {
-			var s = sources.get(prop);
-			var has = prop in target;
-			if (is_proxied_array && prop === "length") for (var i = value; i < s.v; i += 1) {
-				var other_s = sources.get(i + "");
-				if (other_s !== void 0) set(other_s, UNINITIALIZED);
-				else if (i in target) {
-					other_s = with_parent(() => /* @__PURE__ */ state(UNINITIALIZED, stack));
-					sources.set(i + "", other_s);
-				}
-			}
-			if (s === void 0) {
-				if (!has || get_descriptor(target, prop)?.writable) {
-					s = with_parent(() => /* @__PURE__ */ state(void 0, stack));
-					set(s, proxy(value));
-					sources.set(prop, s);
-				}
-			} else {
-				has = s.v !== UNINITIALIZED;
-				var p = with_parent(() => proxy(value));
-				set(s, p);
-			}
-			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
-			if (descriptor?.set) descriptor.set.call(receiver, value);
-			if (!has) {
-				if (is_proxied_array && typeof prop === "string") {
-					var ls = sources.get("length");
-					var n = Number(prop);
-					if (Number.isInteger(n) && n >= ls.v) set(ls, n + 1);
-				}
-				increment(version);
-			}
-			return true;
-		},
-		ownKeys(target) {
-			get(version);
-			var own_keys = Reflect.ownKeys(target).filter((key) => {
-				var source = sources.get(key);
-				return source === void 0 || source.v !== UNINITIALIZED;
-			});
-			for (var [key, source] of sources) if (source.v !== UNINITIALIZED && !(key in target)) own_keys.push(key);
-			return own_keys;
-		},
-		setPrototypeOf() {
-			state_prototype_fixed();
-		}
-	});
-}
-/**
-* @param {any} value
-*/
-function get_proxied_value(value) {
-	try {
-		if (value !== null && typeof value === "object" && STATE_SYMBOL in value) return value[STATE_SYMBOL];
-	} catch {}
-	return value;
-}
-/**
-* @param {any} a
-* @param {any} b
-*/
-function is(a, b) {
-	return Object.is(get_proxied_value(a), get_proxied_value(b));
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/operations.js
-/** @import { Effect, TemplateNode } from '#client' */
-/** @type {Window} */
-var $window;
-/** @type {boolean} */
-var is_firefox;
-/** @type {() => Node | null} */
-var first_child_getter;
-/** @type {() => Node | null} */
-var next_sibling_getter;
-/**
-* Initialize these lazily to avoid issues when using the runtime in a server context
-* where these globals are not available while avoiding a separate server entry point
-*/
-function init_operations() {
-	if ($window !== void 0) return;
-	$window = window;
-	is_firefox = /Firefox/.test(navigator.userAgent);
-	var element_prototype = Element.prototype;
-	var node_prototype = Node.prototype;
-	var text_prototype = Text.prototype;
-	first_child_getter = get_descriptor(node_prototype, "firstChild").get;
-	next_sibling_getter = get_descriptor(node_prototype, "nextSibling").get;
-	if (is_extensible(element_prototype)) {
-		element_prototype.__click = void 0;
-		element_prototype.__className = void 0;
-		element_prototype.__attributes = null;
-		element_prototype.__style = void 0;
-		element_prototype.__e = void 0;
-	}
-	if (is_extensible(text_prototype)) text_prototype.__t = void 0;
-}
-/**
-* @param {string} value
-* @returns {Text}
-*/
-function create_text(value = "") {
-	return document.createTextNode(value);
-}
-/**
-* @template {Node} N
-* @param {N} node
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function get_first_child(node) {
-	return first_child_getter.call(node);
-}
-/**
-* @template {Node} N
-* @param {N} node
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function get_next_sibling(node) {
-	return next_sibling_getter.call(node);
-}
-/**
-* Don't mark this as side-effect-free, hydration needs to walk all nodes
-* @template {Node} N
-* @param {N} node
-* @param {boolean} is_text
-* @returns {TemplateNode | null}
-*/
-function child(node, is_text) {
-	if (!hydrating) return /* @__PURE__ */ get_first_child(node);
-	var child = /* @__PURE__ */ get_first_child(hydrate_node);
-	if (child === null) child = hydrate_node.appendChild(create_text());
-	else if (is_text && child.nodeType !== 3) {
-		var text = create_text();
-		child?.before(text);
-		set_hydrate_node(text);
-		return text;
-	}
-	if (is_text) merge_text_nodes(child);
-	set_hydrate_node(child);
-	return child;
-}
-/**
-* Don't mark this as side-effect-free, hydration needs to walk all nodes
-* @param {TemplateNode} node
-* @param {boolean} [is_text]
-* @returns {TemplateNode | null}
-*/
-function first_child(node, is_text = false) {
-	if (!hydrating) {
-		var first = /* @__PURE__ */ get_first_child(node);
-		if (first instanceof Comment && first.data === "") return /* @__PURE__ */ get_next_sibling(first);
-		return first;
-	}
-	if (is_text) {
-		if (hydrate_node?.nodeType !== 3) {
-			var text = create_text();
-			hydrate_node?.before(text);
-			set_hydrate_node(text);
-			return text;
-		}
-		merge_text_nodes(hydrate_node);
-	}
-	return hydrate_node;
-}
-/**
-* Don't mark this as side-effect-free, hydration needs to walk all nodes
-* @param {TemplateNode} node
-* @param {number} count
-* @param {boolean} is_text
-* @returns {TemplateNode | null}
-*/
-function sibling(node, count = 1, is_text = false) {
-	let next_sibling = hydrating ? hydrate_node : node;
-	var last_sibling;
-	while (count--) {
-		last_sibling = next_sibling;
-		next_sibling = /* @__PURE__ */ get_next_sibling(next_sibling);
-	}
-	if (!hydrating) return next_sibling;
-	if (is_text) {
-		if (next_sibling?.nodeType !== 3) {
-			var text = create_text();
-			if (next_sibling === null) last_sibling?.after(text);
-			else next_sibling.before(text);
-			set_hydrate_node(text);
-			return text;
-		}
-		merge_text_nodes(next_sibling);
-	}
-	set_hydrate_node(next_sibling);
-	return next_sibling;
-}
-/**
-* @template {Node} N
-* @param {N} node
-* @returns {void}
-*/
-function clear_text_content(node) {
-	node.textContent = "";
-}
-/**
-* Returns `true` if we're updating the current block, for example `condition` in
-* an `{#if condition}` block just changed. In this case, the branch should be
-* appended (or removed) at the same time as other updates within the
-* current `<svelte:boundary>`
-*/
-function should_defer_append() {
-	if (!async_mode_flag) return false;
-	if (eager_block_effects !== null) return false;
-	return (active_effect.f & REACTION_RAN) !== 0;
-}
-/**
-* @template {keyof HTMLElementTagNameMap | string} T
-* @param {T} tag
-* @param {string} [namespace]
-* @param {string} [is]
-* @returns {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element}
-*/
-function create_element(tag, namespace, is) {
-	let options = is ? { is } : void 0;
-	return document.createElementNS(namespace ?? "http://www.w3.org/1999/xhtml", tag, options);
-}
-/**
-* Browsers split text nodes larger than 65536 bytes when parsing.
-* For hydration to succeed, we need to stitch them back together
-* @param {Text} text
-*/
-function merge_text_nodes(text) {
-	if (text.nodeValue.length < 65536) return;
-	let next = text.nextSibling;
-	while (next !== null && next.nodeType === 3) {
-		next.remove();
-		/** @type {string} */ text.nodeValue += next.nodeValue;
-		next = text.nextSibling;
-	}
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/misc.js
-/**
-* 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
-* @returns {void}
-*/
-function remove_textarea_child(dom) {
-	if (hydrating && /* @__PURE__ */ get_first_child(dom) !== null) clear_text_content(dom);
-}
-var listening_to_form_reset = false;
-function add_form_reset_listener() {
-	if (!listening_to_form_reset) {
-		listening_to_form_reset = true;
-		document.addEventListener("reset", (evt) => {
-			Promise.resolve().then(() => {
-				if (!evt.defaultPrevented) for (const e of evt.target.elements) e.__on_r?.();
-			});
-		}, { capture: true });
-	}
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/bindings/shared.js
-/**
-* @template T
-* @param {() => T} fn
-*/
-function without_reactive_context(fn) {
-	var previous_reaction = active_reaction;
-	var previous_effect = active_effect;
-	set_active_reaction(null);
-	set_active_effect(null);
-	try {
-		return fn();
-	} finally {
-		set_active_reaction(previous_reaction);
-		set_active_effect(previous_effect);
-	}
-}
-/**
-* Listen to the given event, and then instantiate a global form reset listener if not already done,
-* to notify all bindings when the form is reset
-* @param {HTMLElement} element
-* @param {string} event
-* @param {(is_reset?: true) => void} handler
-* @param {(is_reset?: true) => void} [on_reset]
-*/
-function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
-	element.addEventListener(event, () => without_reactive_context(handler));
-	const prev = element.__on_r;
-	if (prev) element.__on_r = () => {
-		prev();
-		on_reset(true);
-	};
-	else element.__on_r = () => on_reset(true);
-	add_form_reset_listener();
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/reactivity/effects.js
-/** @import { Blocker, ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
-/**
-* @param {'$effect' | '$effect.pre' | '$inspect'} rune
-*/
-function validate_effect(rune) {
-	if (active_effect === null) {
-		if (active_reaction === null) effect_orphan(rune);
-		effect_in_unowned_derived();
-	}
-	if (is_destroying_effect) effect_in_teardown(rune);
-}
-/**
-* @param {Effect} effect
-* @param {Effect} parent_effect
-*/
-function push_effect(effect, parent_effect) {
-	var parent_last = parent_effect.last;
-	if (parent_last === null) parent_effect.last = parent_effect.first = effect;
-	else {
-		parent_last.next = effect;
-		effect.prev = parent_last;
-		parent_effect.last = effect;
-	}
-}
-/**
-* @param {number} type
-* @param {null | (() => void | (() => void))} fn
-* @returns {Effect}
-*/
-function create_effect(type, fn) {
-	var parent = active_effect;
-	if (parent !== null && (parent.f & 8192) !== 0) type |= INERT;
-	/** @type {Effect} */
-	var effect = {
-		ctx: component_context,
-		deps: null,
-		nodes: null,
-		f: type | DIRTY | 512,
-		first: null,
-		fn,
-		last: null,
-		next: null,
-		parent,
-		b: parent && parent.b,
-		prev: null,
-		teardown: null,
-		wv: 0,
-		ac: null
-	};
-	current_batch?.register_created_effect(effect);
-	/** @type {Effect | null} */
-	var e = effect;
-	if ((type & 4) !== 0) if (collected_effects !== null) collected_effects.push(effect);
-	else Batch.ensure().schedule(effect);
-	else if (fn !== null) {
-		try {
-			update_effect(effect);
-		} catch (e) {
-			destroy_effect(effect);
-			throw e;
-		}
-		if (e.deps === null && e.teardown === null && e.nodes === null && e.first === e.last && (e.f & 524288) === 0) {
-			e = e.first;
-			if ((type & 16) !== 0 && (type & 65536) !== 0 && e !== null) e.f |= EFFECT_TRANSPARENT;
-		}
-	}
-	if (e !== null) {
-		e.parent = parent;
-		if (parent !== null) push_effect(e, parent);
-		if (active_reaction !== null && (active_reaction.f & 2) !== 0 && (type & 64) === 0) {
-			var derived = active_reaction;
-			(derived.effects ??= []).push(e);
-		}
-	}
-	return effect;
-}
-/**
-* Internal representation of `$effect.tracking()`
-* @returns {boolean}
-*/
-function effect_tracking() {
-	return active_reaction !== null && !untracking;
-}
-/**
-* @param {() => void} fn
-*/
-function teardown(fn) {
-	const effect = create_effect(8, null);
-	set_signal_status(effect, CLEAN);
-	effect.teardown = fn;
-	return effect;
-}
-/**
-* Internal representation of `$effect(...)`
-* @param {() => void | (() => void)} fn
-*/
-function user_effect(fn) {
-	validate_effect("$effect");
-	var flags = active_effect.f;
-	if (!active_reaction && (flags & 32) !== 0 && (flags & 32768) === 0) {
-		var context = component_context;
-		(context.e ??= []).push(fn);
-	} else return create_user_effect(fn);
-}
-/**
-* @param {() => void | (() => void)} fn
-*/
-function create_user_effect(fn) {
-	return create_effect(4 | USER_EFFECT, fn);
-}
-/**
-* Internal representation of `$effect.pre(...)`
-* @param {() => void | (() => void)} fn
-* @returns {Effect}
-*/
-function user_pre_effect(fn) {
-	validate_effect("$effect.pre");
-	return create_effect(8 | USER_EFFECT, fn);
-}
-/**
-* An effect root whose children can transition out
-* @param {() => void} fn
-* @returns {(options?: { outro?: boolean }) => Promise<void>}
-*/
-function component_root(fn) {
-	Batch.ensure();
-	const effect = create_effect(64 | EFFECT_PRESERVED, fn);
-	return (options = {}) => {
-		return new Promise((fulfil) => {
-			if (options.outro) pause_effect(effect, () => {
-				destroy_effect(effect);
-				fulfil(void 0);
-			});
-			else {
-				destroy_effect(effect);
-				fulfil(void 0);
-			}
-		});
-	};
-}
-/**
-* @param {() => void | (() => void)} fn
-* @returns {Effect}
-*/
-function effect(fn) {
-	return create_effect(4, fn);
-}
-/**
-* @param {() => void | (() => void)} fn
-* @returns {Effect}
-*/
-function async_effect(fn) {
-	return create_effect(ASYNC | EFFECT_PRESERVED, fn);
-}
-/**
-* @param {() => void | (() => void)} fn
-* @returns {Effect}
-*/
-function render_effect(fn, flags = 0) {
-	return create_effect(8 | flags, fn);
-}
-/**
-* @param {(...expressions: any) => void | (() => void)} fn
-* @param {Array<() => any>} sync
-* @param {Array<() => Promise<any>>} async
-* @param {Blocker[]} blockers
-*/
-function template_effect(fn, sync = [], async = [], blockers = []) {
-	flatten(blockers, sync, async, (values) => {
-		create_effect(8, () => fn(...values.map(get)));
-	});
-}
-/**
-* @param {(() => void)} fn
-* @param {number} flags
-*/
-function block(fn, flags = 0) {
-	return create_effect(16 | flags, fn);
-}
-/**
-* @param {(() => void)} fn
-*/
-function branch(fn) {
-	return create_effect(32 | EFFECT_PRESERVED, fn);
-}
-/**
-* @param {Effect} effect
-*/
-function execute_effect_teardown(effect) {
-	var teardown = effect.teardown;
-	if (teardown !== null) {
-		const previously_destroying_effect = is_destroying_effect;
-		const previous_reaction = active_reaction;
-		set_is_destroying_effect(true);
-		set_active_reaction(null);
-		try {
-			teardown.call(null);
-		} finally {
-			set_is_destroying_effect(previously_destroying_effect);
-			set_active_reaction(previous_reaction);
-		}
-	}
-}
-/**
-* @param {Effect} signal
-* @param {boolean} remove_dom
-* @returns {void}
-*/
-function destroy_effect_children(signal, remove_dom = false) {
-	var effect = signal.first;
-	signal.first = signal.last = null;
-	while (effect !== null) {
-		const controller = effect.ac;
-		if (controller !== null) without_reactive_context(() => {
-			controller.abort(STALE_REACTION);
-		});
-		var next = effect.next;
-		if ((effect.f & 64) !== 0) effect.parent = null;
-		else destroy_effect(effect, remove_dom);
-		effect = next;
-	}
-}
-/**
-* @param {Effect} signal
-* @returns {void}
-*/
-function destroy_block_effect_children(signal) {
-	var effect = signal.first;
-	while (effect !== null) {
-		var next = effect.next;
-		if ((effect.f & 32) === 0) destroy_effect(effect);
-		effect = next;
-	}
-}
-/**
-* @param {Effect} effect
-* @param {boolean} [remove_dom]
-* @returns {void}
-*/
-function destroy_effect(effect, remove_dom = true) {
-	var removed = false;
-	if ((remove_dom || (effect.f & 262144) !== 0) && effect.nodes !== null && effect.nodes.end !== null) {
-		remove_effect_dom(effect.nodes.start, effect.nodes.end);
-		removed = true;
-	}
-	set_signal_status(effect, DESTROYING);
-	destroy_effect_children(effect, remove_dom && !removed);
-	remove_reactions(effect, 0);
-	var transitions = effect.nodes && effect.nodes.t;
-	if (transitions !== null) for (const transition of transitions) transition.stop();
-	execute_effect_teardown(effect);
-	effect.f ^= DESTROYING;
-	effect.f |= DESTROYED;
-	var parent = effect.parent;
-	if (parent !== null && parent.first !== null) unlink_effect(effect);
-	effect.next = effect.prev = effect.teardown = effect.ctx = effect.deps = effect.fn = effect.nodes = effect.ac = effect.b = null;
-}
-/**
-*
-* @param {TemplateNode | null} node
-* @param {TemplateNode} end
-*/
-function remove_effect_dom(node, end) {
-	while (node !== null) {
-		/** @type {TemplateNode | null} */
-		var next = node === end ? null : /* @__PURE__ */ get_next_sibling(node);
-		node.remove();
-		node = next;
-	}
-}
-/**
-* Detach an effect from the effect tree, freeing up memory and
-* reducing the amount of work that happens on subsequent traversals
-* @param {Effect} effect
-*/
-function unlink_effect(effect) {
-	var parent = effect.parent;
-	var prev = effect.prev;
-	var next = effect.next;
-	if (prev !== null) prev.next = next;
-	if (next !== null) next.prev = prev;
-	if (parent !== null) {
-		if (parent.first === effect) parent.first = next;
-		if (parent.last === effect) parent.last = prev;
-	}
-}
-/**
-* When a block effect is removed, we don't immediately destroy it or yank it
-* out of the DOM, because it might have transitions. Instead, we 'pause' it.
-* It stays around (in memory, and in the DOM) until outro transitions have
-* completed, and if the state change is reversed then we _resume_ it.
-* A paused effect does not update, and the DOM subtree becomes inert.
-* @param {Effect} effect
-* @param {() => void} [callback]
-* @param {boolean} [destroy]
-*/
-function pause_effect(effect, callback, destroy = true) {
-	/** @type {TransitionManager[]} */
-	var transitions = [];
-	pause_children(effect, transitions, true);
-	var fn = () => {
-		if (destroy) destroy_effect(effect);
-		if (callback) callback();
-	};
-	var remaining = transitions.length;
-	if (remaining > 0) {
-		var check = () => --remaining || fn();
-		for (var transition of transitions) transition.out(check);
-	} else fn();
-}
-/**
-* @param {Effect} effect
-* @param {TransitionManager[]} transitions
-* @param {boolean} local
-*/
-function pause_children(effect, transitions, local) {
-	if ((effect.f & 8192) !== 0) return;
-	effect.f ^= INERT;
-	var t = effect.nodes && effect.nodes.t;
-	if (t !== null) {
-		for (const transition of t) if (transition.is_global || local) transitions.push(transition);
-	}
-	var child = effect.first;
-	while (child !== null) {
-		var sibling = child.next;
-		if ((child.f & 64) === 0) {
-			var transparent = (child.f & 65536) !== 0 || (child.f & 32) !== 0 && (effect.f & 16) !== 0;
-			pause_children(child, transitions, transparent ? local : false);
-		}
-		child = sibling;
-	}
-}
-/**
-* The opposite of `pause_effect`. We call this if (for example)
-* `x` becomes falsy then truthy: `{#if x}...{/if}`
-* @param {Effect} effect
-*/
-function resume_effect(effect) {
-	resume_children(effect, true);
-}
-/**
-* @param {Effect} effect
-* @param {boolean} local
-*/
-function resume_children(effect, local) {
-	if ((effect.f & 8192) === 0) return;
-	effect.f ^= INERT;
-	if ((effect.f & 1024) === 0) {
-		set_signal_status(effect, DIRTY);
-		Batch.ensure().schedule(effect);
-	}
-	var child = effect.first;
-	while (child !== null) {
-		var sibling = child.next;
-		var transparent = (child.f & 65536) !== 0 || (child.f & 32) !== 0;
-		resume_children(child, transparent ? local : false);
-		child = sibling;
-	}
-	var t = effect.nodes && effect.nodes.t;
-	if (t !== null) {
-		for (const transition of t) if (transition.is_global || local) transition.in();
-	}
-}
-/**
-* @param {Effect} effect
-* @param {DocumentFragment} fragment
-*/
-function move_effect(effect, fragment) {
-	if (!effect.nodes) return;
-	/** @type {TemplateNode | null} */
-	var node = effect.nodes.start;
-	var end = effect.nodes.end;
-	while (node !== null) {
-		/** @type {TemplateNode | null} */
-		var next = node === end ? null : /* @__PURE__ */ get_next_sibling(node);
-		fragment.append(node);
-		node = next;
-	}
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/legacy.js
-/**
-* @type {Set<Value> | null}
-* @deprecated
-*/
-var captured_signals = null;
-//#endregion
-//#region node_modules/svelte/src/internal/client/runtime.js
-/** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
-var is_updating_effect = false;
-var is_destroying_effect = false;
-/** @param {boolean} value */
-function set_is_destroying_effect(value) {
-	is_destroying_effect = value;
-}
-/** @type {null | Reaction} */
-var active_reaction = null;
-var untracking = false;
-/** @param {null | Reaction} reaction */
-function set_active_reaction(reaction) {
-	active_reaction = reaction;
-}
-/** @type {null | Effect} */
-var active_effect = null;
-/** @param {null | Effect} effect */
-function set_active_effect(effect) {
-	active_effect = effect;
-}
-/**
-* When sources are created within a reaction, reading and writing
-* them within that reaction should not cause a re-run
-* @type {null | Source[]}
-*/
-var current_sources = null;
-/** @param {Value} value */
-function push_reaction_value(value) {
-	if (active_reaction !== null && (!async_mode_flag || (active_reaction.f & 2) !== 0)) if (current_sources === null) current_sources = [value];
-	else current_sources.push(value);
-}
-/**
-* The dependencies of the reaction that is currently being executed. In many cases,
-* the dependencies are unchanged between runs, and so this will be `null` unless
-* and until a new dependency is accessed — we track this via `skipped_deps`
-* @type {null | Value[]}
-*/
-var new_deps = null;
-var skipped_deps = 0;
-/**
-* Tracks writes that the effect it's executed in doesn't listen to yet,
-* so that the dependency can be added to the effect later on if it then reads it
-* @type {null | Source[]}
-*/
-var untracked_writes = null;
-/** @param {null | Source[]} value */
-function set_untracked_writes(value) {
-	untracked_writes = value;
-}
-/**
-* @type {number} Used by sources and deriveds for handling updates.
-* Version starts from 1 so that unowned deriveds differentiate between a created effect and a run one for tracing
-**/
-var write_version = 1;
-/** @type {number} Used to version each read of a source of derived to avoid duplicating depedencies inside a reaction */
-var read_version = 0;
-var update_version = read_version;
-/** @param {number} value */
-function set_update_version(value) {
-	update_version = value;
-}
-function increment_write_version() {
-	return ++write_version;
-}
-/**
-* Determines whether a derived or effect is dirty.
-* If it is MAYBE_DIRTY, will set the status to CLEAN
-* @param {Reaction} reaction
-* @returns {boolean}
-*/
-function is_dirty(reaction) {
-	var flags = reaction.f;
-	if ((flags & 2048) !== 0) return true;
-	if (flags & 2) reaction.f &= ~WAS_MARKED;
-	if ((flags & 4096) !== 0) {
-		var dependencies = reaction.deps;
-		var length = dependencies.length;
-		for (var i = 0; i < length; i++) {
-			var dependency = dependencies[i];
-			if (is_dirty(dependency)) update_derived(dependency);
-			if (dependency.wv > reaction.wv) return true;
-		}
-		if ((flags & 512) !== 0 && batch_values === null) set_signal_status(reaction, CLEAN);
-	}
-	return false;
-}
-/**
-* @param {Value} signal
-* @param {Effect} effect
-* @param {boolean} [root]
-*/
-function schedule_possible_effect_self_invalidation(signal, effect, root = true) {
-	var reactions = signal.reactions;
-	if (reactions === null) return;
-	if (!async_mode_flag && current_sources !== null && includes.call(current_sources, signal)) return;
-	for (var i = 0; i < reactions.length; i++) {
-		var reaction = reactions[i];
-		if ((reaction.f & 2) !== 0) schedule_possible_effect_self_invalidation(reaction, effect, false);
-		else if (effect === reaction) {
-			if (root) set_signal_status(reaction, DIRTY);
-			else if ((reaction.f & 1024) !== 0) set_signal_status(reaction, MAYBE_DIRTY);
-			schedule_effect(reaction);
-		}
-	}
-}
-/** @param {Reaction} reaction */
-function update_reaction(reaction) {
-	var previous_deps = new_deps;
-	var previous_skipped_deps = skipped_deps;
-	var previous_untracked_writes = untracked_writes;
-	var previous_reaction = active_reaction;
-	var previous_sources = current_sources;
-	var previous_component_context = component_context;
-	var previous_untracking = untracking;
-	var previous_update_version = update_version;
-	var flags = reaction.f;
-	new_deps = null;
-	skipped_deps = 0;
-	untracked_writes = null;
-	active_reaction = (flags & 96) === 0 ? reaction : null;
-	current_sources = null;
-	set_component_context(reaction.ctx);
-	untracking = false;
-	update_version = ++read_version;
-	if (reaction.ac !== null) {
-		without_reactive_context(() => {
-			/** @type {AbortController} */ reaction.ac.abort(STALE_REACTION);
-		});
-		reaction.ac = null;
-	}
-	try {
-		reaction.f |= REACTION_IS_UPDATING;
-		var fn = reaction.fn;
-		var result = fn();
-		reaction.f |= REACTION_RAN;
-		var deps = reaction.deps;
-		var is_fork = current_batch?.is_fork;
-		if (new_deps !== null) {
-			var i;
-			if (!is_fork) remove_reactions(reaction, skipped_deps);
-			if (deps !== null && skipped_deps > 0) {
-				deps.length = skipped_deps + new_deps.length;
-				for (i = 0; i < new_deps.length; i++) deps[skipped_deps + i] = new_deps[i];
-			} else reaction.deps = deps = new_deps;
-			if (effect_tracking() && (reaction.f & 512) !== 0) for (i = skipped_deps; i < deps.length; i++) (deps[i].reactions ??= []).push(reaction);
-		} else if (!is_fork && deps !== null && skipped_deps < deps.length) {
-			remove_reactions(reaction, skipped_deps);
-			deps.length = skipped_deps;
-		}
-		if (is_runes() && untracked_writes !== null && !untracking && deps !== null && (reaction.f & 6146) === 0) for (i = 0; i < untracked_writes.length; i++) schedule_possible_effect_self_invalidation(untracked_writes[i], reaction);
-		if (previous_reaction !== null && previous_reaction !== reaction) {
-			read_version++;
-			if (previous_reaction.deps !== null) for (let i = 0; i < previous_skipped_deps; i += 1) previous_reaction.deps[i].rv = read_version;
-			if (previous_deps !== null) for (const dep of previous_deps) dep.rv = read_version;
-			if (untracked_writes !== null) if (previous_untracked_writes === null) previous_untracked_writes = untracked_writes;
-			else previous_untracked_writes.push(...untracked_writes);
-		}
-		if ((reaction.f & 8388608) !== 0) reaction.f ^= ERROR_VALUE;
-		return result;
-	} catch (error) {
-		return handle_error(error);
-	} finally {
-		reaction.f ^= REACTION_IS_UPDATING;
-		new_deps = previous_deps;
-		skipped_deps = previous_skipped_deps;
-		untracked_writes = previous_untracked_writes;
-		active_reaction = previous_reaction;
-		current_sources = previous_sources;
-		set_component_context(previous_component_context);
-		untracking = previous_untracking;
-		update_version = previous_update_version;
-	}
-}
-/**
-* @template V
-* @param {Reaction} signal
-* @param {Value<V>} dependency
-* @returns {void}
-*/
-function remove_reaction(signal, dependency) {
-	let reactions = dependency.reactions;
-	if (reactions !== null) {
-		var index = index_of.call(reactions, signal);
-		if (index !== -1) {
-			var new_length = reactions.length - 1;
-			if (new_length === 0) reactions = dependency.reactions = null;
-			else {
-				reactions[index] = reactions[new_length];
-				reactions.pop();
-			}
-		}
-	}
-	if (reactions === null && (dependency.f & 2) !== 0 && (new_deps === null || !includes.call(new_deps, dependency))) {
-		var derived = dependency;
-		if ((derived.f & 512) !== 0) {
-			derived.f ^= 512;
-			derived.f &= ~WAS_MARKED;
-		}
-		if (derived.v !== UNINITIALIZED) update_derived_status(derived);
-		freeze_derived_effects(derived);
-		remove_reactions(derived, 0);
-	}
-}
-/**
-* @param {Reaction} signal
-* @param {number} start_index
-* @returns {void}
-*/
-function remove_reactions(signal, start_index) {
-	var dependencies = signal.deps;
-	if (dependencies === null) return;
-	for (var i = start_index; i < dependencies.length; i++) remove_reaction(signal, dependencies[i]);
-}
-/**
-* @param {Effect} effect
-* @returns {void}
-*/
-function update_effect(effect) {
-	var flags = effect.f;
-	if ((flags & 16384) !== 0) return;
-	set_signal_status(effect, CLEAN);
-	var previous_effect = active_effect;
-	var was_updating_effect = is_updating_effect;
-	active_effect = effect;
-	is_updating_effect = true;
-	try {
-		if ((flags & 16777232) !== 0) destroy_block_effect_children(effect);
-		else destroy_effect_children(effect);
-		execute_effect_teardown(effect);
-		var teardown = update_reaction(effect);
-		effect.teardown = typeof teardown === "function" ? teardown : null;
-		effect.wv = write_version;
-	} finally {
-		is_updating_effect = was_updating_effect;
-		active_effect = previous_effect;
-	}
-}
-/**
-* Returns a promise that resolves once any pending state changes have been applied.
-* @returns {Promise<void>}
-*/
-async function tick() {
-	if (async_mode_flag) return new Promise((f) => {
-		requestAnimationFrame(() => f());
-		setTimeout(() => f());
-	});
-	await Promise.resolve();
-	flushSync();
-}
-/**
-* @template V
-* @param {Value<V>} signal
-* @returns {V}
-*/
-function get(signal) {
-	var is_derived = (signal.f & 2) !== 0;
-	captured_signals?.add(signal);
-	if (active_reaction !== null && !untracking) {
-		if (!(active_effect !== null && (active_effect.f & 16384) !== 0) && (current_sources === null || !includes.call(current_sources, signal))) {
-			var deps = active_reaction.deps;
-			if ((active_reaction.f & 2097152) !== 0) {
-				if (signal.rv < read_version) {
-					signal.rv = read_version;
-					if (new_deps === null && deps !== null && deps[skipped_deps] === signal) skipped_deps++;
-					else if (new_deps === null) new_deps = [signal];
-					else new_deps.push(signal);
-				}
-			} else {
-				(active_reaction.deps ??= []).push(signal);
-				var reactions = signal.reactions;
-				if (reactions === null) signal.reactions = [active_reaction];
-				else if (!includes.call(reactions, active_reaction)) reactions.push(active_reaction);
-			}
-		}
-	}
-	if (is_destroying_effect && old_values.has(signal)) return old_values.get(signal);
-	if (is_derived) {
-		var derived = signal;
-		if (is_destroying_effect) {
-			var value = derived.v;
-			if ((derived.f & 1024) === 0 && derived.reactions !== null || depends_on_old_values(derived)) value = execute_derived(derived);
-			old_values.set(derived, value);
-			return value;
-		}
-		var should_connect = (derived.f & 512) === 0 && !untracking && active_reaction !== null && (is_updating_effect || (active_reaction.f & 512) !== 0);
-		var is_new = (derived.f & REACTION_RAN) === 0;
-		if (is_dirty(derived)) {
-			if (should_connect) derived.f |= 512;
-			update_derived(derived);
-		}
-		if (should_connect && !is_new) {
-			unfreeze_derived_effects(derived);
-			reconnect(derived);
-		}
-	}
-	if (batch_values?.has(signal)) return batch_values.get(signal);
-	if ((signal.f & 8388608) !== 0) throw signal.v;
-	return signal.v;
-}
-/**
-* (Re)connect a disconnected derived, so that it is notified
-* of changes in `mark_reactions`
-* @param {Derived} derived
-*/
-function reconnect(derived) {
-	derived.f |= 512;
-	if (derived.deps === null) return;
-	for (const dep of derived.deps) {
-		(dep.reactions ??= []).push(derived);
-		if ((dep.f & 2) !== 0 && (dep.f & 512) === 0) {
-			unfreeze_derived_effects(dep);
-			reconnect(dep);
-		}
-	}
-}
-/** @param {Derived} derived */
-function depends_on_old_values(derived) {
-	if (derived.v === UNINITIALIZED) return true;
-	if (derived.deps === null) return false;
-	for (const dep of derived.deps) {
-		if (old_values.has(dep)) return true;
-		if ((dep.f & 2) !== 0 && depends_on_old_values(dep)) return true;
-	}
-	return false;
-}
-/**
-* When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
-* any state read inside `fn` will not be treated as a dependency.
-*
-* ```ts
-* $effect(() => {
-*   // this will run when `data` changes, but not when `time` changes
-*   save(data, {
-*     timestamp: untrack(() => time)
-*   });
-* });
-* ```
-* @template T
-* @param {() => T} fn
-* @returns {T}
-*/
-function untrack(fn) {
-	var previous_untracking = untracking;
-	try {
-		untracking = true;
-		return fn();
-	} finally {
-		untracking = previous_untracking;
-	}
-}
-/**
-* Possibly traverse an object and read all its properties so that they're all reactive in case this is `$state`.
-* Does only check first level of an object for performance reasons (heuristic should be good for 99% of all cases).
-* @param {any} value
-* @returns {void}
-*/
-function deep_read_state(value) {
-	if (typeof value !== "object" || !value || value instanceof EventTarget) return;
-	if (STATE_SYMBOL in value) deep_read(value);
-	else if (!Array.isArray(value)) for (let key in value) {
-		const prop = value[key];
-		if (typeof prop === "object" && prop && STATE_SYMBOL in prop) deep_read(prop);
-	}
-}
-/**
-* Deeply traverse an object and read all its properties
-* so that they're all reactive in case this is `$state`
-* @param {any} value
-* @param {Set<any>} visited
-* @returns {void}
-*/
-function deep_read(value, visited = /* @__PURE__ */ new Set()) {
-	if (typeof value === "object" && value !== null && !(value instanceof EventTarget) && !visited.has(value)) {
-		visited.add(value);
-		if (value instanceof Date) value.getTime();
-		for (let key in value) try {
-			deep_read(value[key], visited);
-		} catch (e) {}
-		const proto = get_prototype_of(value);
-		if (proto !== Object.prototype && proto !== Array.prototype && proto !== Map.prototype && proto !== Set.prototype && proto !== Date.prototype) {
-			const descriptors = get_descriptors(proto);
-			for (let key in descriptors) {
-				const get = descriptors[key].get;
-				if (get) try {
-					get.call(value);
-				} catch (e) {}
-			}
-		}
-	}
-}
-/**
-* Subset of delegated events which should be passive by default.
-* These two are already passive via browser defaults on window, document and body.
-* But since
-* - we're delegating them
-* - they happen often
-* - they apply to mobile which is generally less performant
-* we're marking them as passive by default for other elements, too.
-*/
-var PASSIVE_EVENTS = ["touchstart", "touchmove"];
-/**
-* Returns `true` if `name` is a passive event
-* @param {string} name
-*/
-function is_passive_event(name) {
-	return PASSIVE_EVENTS.includes(name);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/events.js
-/**
-* Used on elements, as a map of event type -> event handler,
-* and on events themselves to track which element handled an event
-*/
-var event_symbol = Symbol("events");
-/** @type {Set<string>} */
-var all_registered_events = /* @__PURE__ */ new Set();
-/** @type {Set<(events: Array<string>) => void>} */
-var root_event_handles = /* @__PURE__ */ new Set();
-/**
-* @param {string} event_name
-* @param {EventTarget} dom
-* @param {EventListener} [handler]
-* @param {AddEventListenerOptions} [options]
-*/
-function create_event(event_name, dom, handler, options = {}) {
-	/**
-	* @this {EventTarget}
-	*/
-	function target_handler(event) {
-		if (!options.capture) handle_event_propagation.call(dom, event);
-		if (!event.cancelBubble) return without_reactive_context(() => {
-			return handler?.call(this, event);
-		});
-	}
-	if (event_name.startsWith("pointer") || event_name.startsWith("touch") || event_name === "wheel") queue_micro_task(() => {
-		dom.addEventListener(event_name, target_handler, options);
-	});
-	else dom.addEventListener(event_name, target_handler, options);
-	return target_handler;
-}
-/**
-* @param {string} event_name
-* @param {Element} dom
-* @param {EventListener} [handler]
-* @param {boolean} [capture]
-* @param {boolean} [passive]
-* @returns {void}
-*/
-function event(event_name, dom, handler, capture, passive) {
-	var options = {
-		capture,
-		passive
-	};
-	var target_handler = create_event(event_name, dom, handler, options);
-	if (dom === document.body || dom === window || dom === document || dom instanceof HTMLMediaElement) teardown(() => {
-		dom.removeEventListener(event_name, target_handler, options);
-	});
-}
-/**
-* @param {string} event_name
-* @param {Element} element
-* @param {EventListener} [handler]
-* @returns {void}
-*/
-function delegated(event_name, element, handler) {
-	(element[event_symbol] ??= {})[event_name] = handler;
-}
-/**
-* @param {Array<string>} events
-* @returns {void}
-*/
-function delegate(events) {
-	for (var i = 0; i < events.length; i++) all_registered_events.add(events[i]);
-	for (var fn of root_event_handles) fn(events);
-}
-var last_propagated_event = null;
-/**
-* @this {EventTarget}
-* @param {Event} event
-* @returns {void}
-*/
-function handle_event_propagation(event) {
-	var handler_element = this;
-	var owner_document = handler_element.ownerDocument;
-	var event_name = event.type;
-	var path = event.composedPath?.() || [];
-	var current_target = path[0] || event.target;
-	last_propagated_event = event;
-	var path_idx = 0;
-	var handled_at = last_propagated_event === event && event[event_symbol];
-	if (handled_at) {
-		var at_idx = path.indexOf(handled_at);
-		if (at_idx !== -1 && (handler_element === document || handler_element === window)) {
-			event[event_symbol] = handler_element;
-			return;
-		}
-		var handler_idx = path.indexOf(handler_element);
-		if (handler_idx === -1) return;
-		if (at_idx <= handler_idx) path_idx = at_idx;
-	}
-	current_target = path[path_idx] || event.target;
-	if (current_target === handler_element) return;
-	define_property(event, "currentTarget", {
-		configurable: true,
-		get() {
-			return current_target || owner_document;
-		}
-	});
-	var previous_reaction = active_reaction;
-	var previous_effect = active_effect;
-	set_active_reaction(null);
-	set_active_effect(null);
-	try {
-		/**
-		* @type {unknown}
-		*/
-		var throw_error;
-		/**
-		* @type {unknown[]}
-		*/
-		var other_errors = [];
-		while (current_target !== null) {
-			/** @type {null | Element} */
-			var parent_element = current_target.assignedSlot || current_target.parentNode || current_target.host || null;
-			try {
-				var delegated = current_target[event_symbol]?.[event_name];
-				if (delegated != null && (!current_target.disabled || event.target === current_target)) delegated.call(current_target, event);
-			} catch (error) {
-				if (throw_error) other_errors.push(error);
-				else throw_error = error;
-			}
-			if (event.cancelBubble || parent_element === handler_element || parent_element === null) break;
-			current_target = parent_element;
-		}
-		if (throw_error) {
-			for (let error of other_errors) queueMicrotask(() => {
-				throw error;
-			});
-			throw throw_error;
-		}
-	} finally {
-		event[event_symbol] = handler_element;
-		delete event.currentTarget;
-		set_active_reaction(previous_reaction);
-		set_active_effect(previous_effect);
-	}
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/reconciler.js
-var policy = globalThis?.window?.trustedTypes && /* @__PURE__ */ globalThis.window.trustedTypes.createPolicy("svelte-trusted-html", { 
-/** @param {string} html */
-createHTML: (html) => {
-	return html;
-} });
-/** @param {string} html */
-function create_trusted_html(html) {
-	return policy?.createHTML(html) ?? html;
-}
-/**
-* @param {string} html
-*/
-function create_fragment_from_html(html) {
-	var elem = create_element("template");
-	elem.innerHTML = create_trusted_html(html.replaceAll("<!>", "\x3C!---->"));
-	return elem.content;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/template.js
-/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
-/** @import { TemplateStructure } from './types' */
-/**
-* @param {TemplateNode} start
-* @param {TemplateNode | null} end
-*/
-function assign_nodes(start, end) {
-	var effect = active_effect;
-	if (effect.nodes === null) effect.nodes = {
-		start,
-		end,
-		a: null,
-		t: null
-	};
-}
-/**
-* @param {string} content
-* @param {number} flags
-* @returns {() => Node | Node[]}
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function from_html(content, flags) {
-	var is_fragment = (flags & 1) !== 0;
-	var use_import_node = (flags & 2) !== 0;
-	/** @type {Node} */
-	var node;
-	/**
-	* Whether or not the first item is a text/element node. If not, we need to
-	* create an additional comment node to act as `effect.nodes.start`
-	*/
-	var has_start = !content.startsWith("<!>");
-	return () => {
-		if (hydrating) {
-			assign_nodes(hydrate_node, null);
-			return hydrate_node;
-		}
-		if (node === void 0) {
-			node = create_fragment_from_html(has_start ? content : "<!>" + content);
-			if (!is_fragment) node = /* @__PURE__ */ get_first_child(node);
-		}
-		var clone = use_import_node || is_firefox ? document.importNode(node, true) : node.cloneNode(true);
-		if (is_fragment) {
-			var start = /* @__PURE__ */ get_first_child(clone);
-			var end = clone.lastChild;
-			assign_nodes(start, end);
-		} else assign_nodes(clone, clone);
-		return clone;
-	};
-}
-/**
-* Don't mark this as side-effect-free, hydration needs to walk all nodes
-* @param {any} value
-*/
-function text(value = "") {
-	if (!hydrating) {
-		var t = create_text(value + "");
-		assign_nodes(t, t);
-		return t;
-	}
-	var node = hydrate_node;
-	if (node.nodeType !== 3) {
-		node.before(node = create_text());
-		set_hydrate_node(node);
-	} else merge_text_nodes(node);
-	assign_nodes(node, node);
-	return node;
-}
-/**
-* @returns {TemplateNode | DocumentFragment}
-*/
-function comment() {
-	if (hydrating) {
-		assign_nodes(hydrate_node, null);
-		return hydrate_node;
-	}
-	var frag = document.createDocumentFragment();
-	var start = document.createComment("");
-	var anchor = create_text();
-	frag.append(start, anchor);
-	assign_nodes(start, anchor);
-	return frag;
-}
-/**
-* Assign the created (or in hydration mode, traversed) dom elements to the current block
-* and insert the elements into the dom (in client mode).
-* @param {Text | Comment | Element} anchor
-* @param {DocumentFragment | Element} dom
-*/
-function append(anchor, dom) {
-	if (hydrating) {
-		var effect = active_effect;
-		if ((effect.f & 32768) === 0 || effect.nodes.end === null) effect.nodes.end = hydrate_node;
-		hydrate_next();
-		return;
-	}
-	if (anchor === null) return;
-	anchor.before(dom);
-}
-/**
-* @param {Element} text
-* @param {string} value
-* @returns {void}
-*/
-function set_text(text, value) {
-	var str = value == null ? "" : typeof value === "object" ? `${value}` : value;
-	if (str !== (text.__t ??= text.nodeValue)) {
-		text.__t = str;
-		text.nodeValue = `${str}`;
-	}
-}
-/**
-* Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
-* Transitions will play during the initial render unless the `intro` option is set to `false`.
-*
-* @template {Record<string, any>} Props
-* @template {Record<string, any>} Exports
-* @param {ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>} component
-* @param {MountOptions<Props>} options
-* @returns {Exports}
-*/
-function mount(component, options) {
-	return _mount(component, options);
-}
-/** @type {Map<EventTarget, Map<string, number>>} */
-var listeners = /* @__PURE__ */ new Map();
-/**
-* @template {Record<string, any>} Exports
-* @param {ComponentType<SvelteComponent<any>> | Component<any>} Component
-* @param {MountOptions} options
-* @returns {Exports}
-*/
-function _mount(Component, { target, anchor, props = {}, events, context, intro = true, transformError }) {
-	init_operations();
-	/** @type {Exports} */
-	var component = void 0;
-	var unmount = component_root(() => {
-		var anchor_node = anchor ?? target.appendChild(create_text());
-		boundary(anchor_node, { pending: () => {} }, (anchor_node) => {
-			push({});
-			var ctx = component_context;
-			if (context) ctx.c = context;
-			if (events)
- /** @type {any} */ props.$$events = events;
-			if (hydrating) assign_nodes(anchor_node, null);
-			component = Component(anchor_node, props) || {};
-			if (hydrating) {
-				/** @type {Effect & { nodes: EffectNodes }} */ active_effect.nodes.end = hydrate_node;
-				if (hydrate_node === null || hydrate_node.nodeType !== 8 || hydrate_node.data !== "]") {
-					hydration_mismatch();
-					throw HYDRATION_ERROR;
-				}
-			}
-			pop();
-		}, transformError);
-		/** @type {Set<string>} */
-		var registered_events = /* @__PURE__ */ new Set();
-		/** @param {Array<string>} events */
-		var event_handle = (events) => {
-			for (var i = 0; i < events.length; i++) {
-				var event_name = events[i];
-				if (registered_events.has(event_name)) continue;
-				registered_events.add(event_name);
-				var passive = is_passive_event(event_name);
-				for (const node of [target, document]) {
-					var counts = listeners.get(node);
-					if (counts === void 0) {
-						counts = /* @__PURE__ */ new Map();
-						listeners.set(node, counts);
-					}
-					var count = counts.get(event_name);
-					if (count === void 0) {
-						node.addEventListener(event_name, handle_event_propagation, { passive });
-						counts.set(event_name, 1);
-					} else counts.set(event_name, count + 1);
-				}
-			}
-		};
-		event_handle(array_from(all_registered_events));
-		root_event_handles.add(event_handle);
-		return () => {
-			for (var event_name of registered_events) for (const node of [target, document]) {
-				var counts = listeners.get(node);
-				var count = counts.get(event_name);
-				if (--count == 0) {
-					node.removeEventListener(event_name, handle_event_propagation);
-					counts.delete(event_name);
-					if (counts.size === 0) listeners.delete(node);
-				} else counts.set(event_name, count);
-			}
-			root_event_handles.delete(event_handle);
-			if (anchor_node !== anchor) anchor_node.parentNode?.removeChild(anchor_node);
-		};
-	});
-	mounted_components.set(component, unmount);
-	return component;
-}
-/**
-* References of the components that were mounted or hydrated.
-* Uses a `WeakMap` to avoid memory leaks.
-*/
-var mounted_components = /* @__PURE__ */ new WeakMap();
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/blocks/branches.js
-/** @import { Effect, TemplateNode } from '#client' */
-/**
-* @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
-*/
-/**
-* @template Key
-*/
-var BranchManager = class {
-	/** @type {TemplateNode} */
-	anchor;
-	/** @type {Map<Batch, Key>} */
-	#batches = /* @__PURE__ */ new Map();
-	/**
-	* Map of keys to effects that are currently rendered in the DOM.
-	* These effects are visible and actively part of the document tree.
-	* Example:
-	* ```
-	* {#if condition}
-	* 	foo
-	* {:else}
-	* 	bar
-	* {/if}
-	* ```
-	* Can result in the entries `true->Effect` and `false->Effect`
-	* @type {Map<Key, Effect>}
-	*/
-	#onscreen = /* @__PURE__ */ new Map();
-	/**
-	* Similar to #onscreen with respect to the keys, but contains branches that are not yet
-	* in the DOM, because their insertion is deferred.
-	* @type {Map<Key, Branch>}
-	*/
-	#offscreen = /* @__PURE__ */ new Map();
-	/**
-	* Keys of effects that are currently outroing
-	* @type {Set<Key>}
-	*/
-	#outroing = /* @__PURE__ */ new Set();
-	/**
-	* Whether to pause (i.e. outro) on change, or destroy immediately.
-	* This is necessary for `<svelte:element>`
-	*/
-	#transition = true;
-	/**
-	* @param {TemplateNode} anchor
-	* @param {boolean} transition
-	*/
-	constructor(anchor, transition = true) {
-		this.anchor = anchor;
-		this.#transition = transition;
-	}
-	/**
-	* @param {Batch} batch
-	*/
-	#commit = (batch) => {
-		if (!this.#batches.has(batch)) return;
-		var key = this.#batches.get(batch);
-		var onscreen = this.#onscreen.get(key);
-		if (onscreen) {
-			resume_effect(onscreen);
-			this.#outroing.delete(key);
-		} else {
-			var offscreen = this.#offscreen.get(key);
-			if (offscreen) {
-				this.#onscreen.set(key, offscreen.effect);
-				this.#offscreen.delete(key);
-				/** @type {TemplateNode} */ offscreen.fragment.lastChild.remove();
-				this.anchor.before(offscreen.fragment);
-				onscreen = offscreen.effect;
-			}
-		}
-		for (const [b, k] of this.#batches) {
-			this.#batches.delete(b);
-			if (b === batch) break;
-			const offscreen = this.#offscreen.get(k);
-			if (offscreen) {
-				destroy_effect(offscreen.effect);
-				this.#offscreen.delete(k);
-			}
-		}
-		for (const [k, effect] of this.#onscreen) {
-			if (k === key || this.#outroing.has(k)) continue;
-			const on_destroy = () => {
-				if (Array.from(this.#batches.values()).includes(k)) {
-					var fragment = document.createDocumentFragment();
-					move_effect(effect, fragment);
-					fragment.append(create_text());
-					this.#offscreen.set(k, {
-						effect,
-						fragment
-					});
-				} else destroy_effect(effect);
-				this.#outroing.delete(k);
-				this.#onscreen.delete(k);
-			};
-			if (this.#transition || !onscreen) {
-				this.#outroing.add(k);
-				pause_effect(effect, on_destroy, false);
-			} else on_destroy();
-		}
-	};
-	/**
-	* @param {Batch} batch
-	*/
-	#discard = (batch) => {
-		this.#batches.delete(batch);
-		const keys = Array.from(this.#batches.values());
-		for (const [k, branch] of this.#offscreen) if (!keys.includes(k)) {
-			destroy_effect(branch.effect);
-			this.#offscreen.delete(k);
-		}
-	};
-	/**
-	*
-	* @param {any} key
-	* @param {null | ((target: TemplateNode) => void)} fn
-	*/
-	ensure(key, fn) {
-		var batch = current_batch;
-		var defer = should_defer_append();
-		if (fn && !this.#onscreen.has(key) && !this.#offscreen.has(key)) if (defer) {
-			var fragment = document.createDocumentFragment();
-			var target = create_text();
-			fragment.append(target);
-			this.#offscreen.set(key, {
-				effect: branch(() => fn(target)),
-				fragment
-			});
-		} else this.#onscreen.set(key, branch(() => fn(this.anchor)));
-		this.#batches.set(batch, key);
-		if (defer) {
-			for (const [k, effect] of this.#onscreen) if (k === key) batch.unskip_effect(effect);
-			else batch.skip_effect(effect);
-			for (const [k, branch] of this.#offscreen) if (k === key) batch.unskip_effect(branch.effect);
-			else batch.skip_effect(branch.effect);
-			batch.oncommit(this.#commit);
-			batch.ondiscard(this.#discard);
-		} else {
-			if (hydrating) this.anchor = hydrate_node;
-			this.#commit(batch);
 		}
 	}
 };
 //#endregion
-//#region node_modules/svelte/src/internal/client/dom/blocks/if.js
-/** @import { TemplateNode } from '#client' */
-/**
-* @param {TemplateNode} node
-* @param {(branch: (fn: (anchor: Node) => void, key?: number | false) => void) => void} fn
-* @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local'
-* @returns {void}
-*/
-function if_block(node, fn, elseif = false) {
-	/** @type {TemplateNode | undefined} */
-	var marker;
-	if (hydrating) {
-		marker = hydrate_node;
-		hydrate_next();
-	}
-	var branches = new BranchManager(node);
-	var flags = elseif ? EFFECT_TRANSPARENT : 0;
-	/**
-	* @param {number | false} key
-	* @param {null | ((anchor: Node) => void)} fn
-	*/
-	function update_branch(key, fn) {
-		if (hydrating) {
-			var data = read_hydration_instruction(marker);
-			if (key !== parseInt(data.substring(1))) {
-				var anchor = skip_nodes();
-				set_hydrate_node(anchor);
-				branches.anchor = anchor;
-				set_hydrating(false);
-				branches.ensure(key, fn);
-				set_hydrating(true);
-				return;
-			}
-		}
-		branches.ensure(key, fn);
-	}
-	block(() => {
-		var has_branch = false;
-		fn((fn, key = 0) => {
-			has_branch = true;
-			update_branch(key, fn);
-		});
-		if (!has_branch) update_branch(-1, null);
-	}, flags);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/blocks/each.js
-/** @import { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
-/** @import { Batch } from '../../reactivity/batch.js'; */
-/**
-* @param {any} _
-* @param {number} i
-*/
-function index(_, i) {
-	return i;
-}
-/**
-* Pause multiple effects simultaneously, and coordinate their
-* subsequent destruction. Used in each blocks
-* @param {EachState} state
-* @param {Effect[]} to_destroy
-* @param {null | Node} controlled_anchor
-*/
-function pause_effects(state, to_destroy, controlled_anchor) {
-	/** @type {TransitionManager[]} */
-	var transitions = [];
-	var length = to_destroy.length;
-	/** @type {EachOutroGroup} */
-	var group;
-	var remaining = to_destroy.length;
-	for (var i = 0; i < length; i++) {
-		let effect = to_destroy[i];
-		pause_effect(effect, () => {
-			if (group) {
-				group.pending.delete(effect);
-				group.done.add(effect);
-				if (group.pending.size === 0) {
-					var groups = state.outrogroups;
-					destroy_effects(state, array_from(group.done));
-					groups.delete(group);
-					if (groups.size === 0) state.outrogroups = null;
-				}
-			} else remaining -= 1;
-		}, false);
-	}
-	if (remaining === 0) {
-		var fast_path = transitions.length === 0 && controlled_anchor !== null;
-		if (fast_path) {
-			var anchor = controlled_anchor;
-			var parent_node = anchor.parentNode;
-			clear_text_content(parent_node);
-			parent_node.append(anchor);
-			state.items.clear();
-		}
-		destroy_effects(state, to_destroy, !fast_path);
-	} else {
-		group = {
-			pending: new Set(to_destroy),
-			done: /* @__PURE__ */ new Set()
-		};
-		(state.outrogroups ??= /* @__PURE__ */ new Set()).add(group);
-	}
-}
-/**
-* @param {EachState} state
-* @param {Effect[]} to_destroy
-* @param {boolean} remove_dom
-*/
-function destroy_effects(state, to_destroy, remove_dom = true) {
-	/** @type {Set<Effect> | undefined} */
-	var preserved_effects;
-	if (state.pending.size > 0) {
-		preserved_effects = /* @__PURE__ */ new Set();
-		for (const keys of state.pending.values()) for (const key of keys) preserved_effects.add(
-			/** @type {EachItem} */
-			state.items.get(key).e
-		);
-	}
-	for (var i = 0; i < to_destroy.length; i++) {
-		var e = to_destroy[i];
-		if (preserved_effects?.has(e)) {
-			e.f |= EFFECT_OFFSCREEN;
-			move_effect(e, document.createDocumentFragment());
-		} else destroy_effect(to_destroy[i], remove_dom);
-	}
-}
-/** @type {TemplateNode} */
-var offscreen_anchor;
-/**
-* @template V
-* @param {Element | Comment} node The next sibling node, or the parent node if this is a 'controlled' block
-* @param {number} flags
-* @param {() => V[]} get_collection
-* @param {(value: V, index: number) => any} get_key
-* @param {(anchor: Node, item: MaybeSource<V>, index: MaybeSource<number>) => void} render_fn
-* @param {null | ((anchor: Node) => void)} fallback_fn
-* @returns {void}
-*/
-function each(node, flags, get_collection, get_key, render_fn, fallback_fn = null) {
-	var anchor = node;
-	/** @type {Map<any, EachItem>} */
-	var items = /* @__PURE__ */ new Map();
-	if ((flags & 4) !== 0) {
-		var parent_node = node;
-		anchor = hydrating ? set_hydrate_node(/* @__PURE__ */ get_first_child(parent_node)) : parent_node.appendChild(create_text());
-	}
-	if (hydrating) hydrate_next();
-	/** @type {Effect | null} */
-	var fallback = null;
-	var each_array = /* @__PURE__ */ derived_safe_equal(() => {
-		var collection = get_collection();
-		return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
-	});
-	/** @type {V[]} */
-	var array;
-	/** @type {Map<Batch, Set<any>>} */
-	var pending = /* @__PURE__ */ new Map();
-	var first_run = true;
-	/**
-	* @param {Batch} batch
-	*/
-	function commit(batch) {
-		if ((state.effect.f & 16384) !== 0) return;
-		state.pending.delete(batch);
-		state.fallback = fallback;
-		reconcile(state, array, anchor, flags, get_key);
-		if (fallback !== null) if (array.length === 0) if ((fallback.f & 33554432) === 0) resume_effect(fallback);
-		else {
-			fallback.f ^= EFFECT_OFFSCREEN;
-			move(fallback, null, anchor);
-		}
-		else pause_effect(fallback, () => {
-			fallback = null;
-		});
-	}
-	/**
-	* @param {Batch} batch
-	*/
-	function discard(batch) {
-		state.pending.delete(batch);
-	}
-	/** @type {EachState} */
-	var state = {
-		effect: block(() => {
-			array = get(each_array);
-			var length = array.length;
-			/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
-			let mismatch = false;
-			if (hydrating) {
-				if (read_hydration_instruction(anchor) === "[!" !== (length === 0)) {
-					anchor = skip_nodes();
-					set_hydrate_node(anchor);
-					set_hydrating(false);
-					mismatch = true;
-				}
-			}
-			var keys = /* @__PURE__ */ new Set();
-			var batch = current_batch;
-			var defer = should_defer_append();
-			for (var index = 0; index < length; index += 1) {
-				if (hydrating && hydrate_node.nodeType === 8 && hydrate_node.data === "]") {
-					anchor = hydrate_node;
-					mismatch = true;
-					set_hydrating(false);
-				}
-				var value = array[index];
-				var key = get_key(value, index);
-				var item = first_run ? null : items.get(key);
-				if (item) {
-					if (item.v) internal_set(item.v, value);
-					if (item.i) internal_set(item.i, index);
-					if (defer) batch.unskip_effect(item.e);
-				} else {
-					item = create_item(items, first_run ? anchor : offscreen_anchor ??= create_text(), value, key, index, render_fn, flags, get_collection);
-					if (!first_run) item.e.f |= EFFECT_OFFSCREEN;
-					items.set(key, item);
-				}
-				keys.add(key);
-			}
-			if (length === 0 && fallback_fn && !fallback) if (first_run) fallback = branch(() => fallback_fn(anchor));
-			else {
-				fallback = branch(() => fallback_fn(offscreen_anchor ??= create_text()));
-				fallback.f |= EFFECT_OFFSCREEN;
-			}
-			if (length > keys.size) each_key_duplicate("", "", "");
-			if (hydrating && length > 0) set_hydrate_node(skip_nodes());
-			if (!first_run) {
-				pending.set(batch, keys);
-				if (defer) {
-					for (const [key, item] of items) if (!keys.has(key)) batch.skip_effect(item.e);
-					batch.oncommit(commit);
-					batch.ondiscard(discard);
-				} else commit(batch);
-			}
-			if (mismatch) set_hydrating(true);
-			get(each_array);
-		}),
-		flags,
-		items,
-		pending,
-		outrogroups: null,
-		fallback
-	};
-	first_run = false;
-	if (hydrating) anchor = hydrate_node;
-}
-/**
-* Skip past any non-branch effects (which could be created with `createSubscriber`, for example) to find the next branch effect
-* @param {Effect | null} effect
-* @returns {Effect | null}
-*/
-function skip_to_branch(effect) {
-	while (effect !== null && (effect.f & 32) === 0) effect = effect.next;
-	return effect;
-}
-/**
-* Add, remove, or reorder items output by an each block as its input changes
-* @template V
-* @param {EachState} state
-* @param {Array<V>} array
-* @param {Element | Comment | Text} anchor
-* @param {number} flags
-* @param {(value: V, index: number) => any} get_key
-* @returns {void}
-*/
-function reconcile(state, array, anchor, flags, get_key) {
-	var is_animated = (flags & 8) !== 0;
-	var length = array.length;
-	var items = state.items;
-	var current = skip_to_branch(state.effect.first);
-	/** @type {undefined | Set<Effect>} */
-	var seen;
-	/** @type {Effect | null} */
-	var prev = null;
-	/** @type {undefined | Set<Effect>} */
-	var to_animate;
-	/** @type {Effect[]} */
-	var matched = [];
-	/** @type {Effect[]} */
-	var stashed = [];
-	/** @type {V} */
-	var value;
-	/** @type {any} */
-	var key;
-	/** @type {Effect | undefined} */
-	var effect;
-	/** @type {number} */
-	var i;
-	if (is_animated) for (i = 0; i < length; i += 1) {
-		value = array[i];
-		key = get_key(value, i);
-		effect = items.get(key).e;
-		if ((effect.f & 33554432) === 0) {
-			effect.nodes?.a?.measure();
-			(to_animate ??= /* @__PURE__ */ new Set()).add(effect);
-		}
-	}
-	for (i = 0; i < length; i += 1) {
-		value = array[i];
-		key = get_key(value, i);
-		effect = items.get(key).e;
-		if (state.outrogroups !== null) for (const group of state.outrogroups) {
-			group.pending.delete(effect);
-			group.done.delete(effect);
-		}
-		if ((effect.f & 8192) !== 0) {
-			resume_effect(effect);
-			if (is_animated) {
-				effect.nodes?.a?.unfix();
-				(to_animate ??= /* @__PURE__ */ new Set()).delete(effect);
-			}
-		}
-		if ((effect.f & 33554432) !== 0) {
-			effect.f ^= EFFECT_OFFSCREEN;
-			if (effect === current) move(effect, null, anchor);
-			else {
-				var next = prev ? prev.next : current;
-				if (effect === state.effect.last) state.effect.last = effect.prev;
-				if (effect.prev) effect.prev.next = effect.next;
-				if (effect.next) effect.next.prev = effect.prev;
-				link(state, prev, effect);
-				link(state, effect, next);
-				move(effect, next, anchor);
-				prev = effect;
-				matched = [];
-				stashed = [];
-				current = skip_to_branch(prev.next);
-				continue;
-			}
-		}
-		if (effect !== current) {
-			if (seen !== void 0 && seen.has(effect)) {
-				if (matched.length < stashed.length) {
-					var start = stashed[0];
-					var j;
-					prev = start.prev;
-					var a = matched[0];
-					var b = matched[matched.length - 1];
-					for (j = 0; j < matched.length; j += 1) move(matched[j], start, anchor);
-					for (j = 0; j < stashed.length; j += 1) seen.delete(stashed[j]);
-					link(state, a.prev, b.next);
-					link(state, prev, a);
-					link(state, b, start);
-					current = start;
-					prev = b;
-					i -= 1;
-					matched = [];
-					stashed = [];
-				} else {
-					seen.delete(effect);
-					move(effect, current, anchor);
-					link(state, effect.prev, effect.next);
-					link(state, effect, prev === null ? state.effect.first : prev.next);
-					link(state, prev, effect);
-					prev = effect;
-				}
-				continue;
-			}
-			matched = [];
-			stashed = [];
-			while (current !== null && current !== effect) {
-				(seen ??= /* @__PURE__ */ new Set()).add(current);
-				stashed.push(current);
-				current = skip_to_branch(current.next);
-			}
-			if (current === null) continue;
-		}
-		if ((effect.f & 33554432) === 0) matched.push(effect);
-		prev = effect;
-		current = skip_to_branch(effect.next);
-	}
-	if (state.outrogroups !== null) {
-		for (const group of state.outrogroups) if (group.pending.size === 0) {
-			destroy_effects(state, array_from(group.done));
-			state.outrogroups?.delete(group);
-		}
-		if (state.outrogroups.size === 0) state.outrogroups = null;
-	}
-	if (current !== null || seen !== void 0) {
-		/** @type {Effect[]} */
-		var to_destroy = [];
-		if (seen !== void 0) {
-			for (effect of seen) if ((effect.f & 8192) === 0) to_destroy.push(effect);
-		}
-		while (current !== null) {
-			if ((current.f & 8192) === 0 && current !== state.fallback) to_destroy.push(current);
-			current = skip_to_branch(current.next);
-		}
-		var destroy_length = to_destroy.length;
-		if (destroy_length > 0) {
-			var controlled_anchor = (flags & 4) !== 0 && length === 0 ? anchor : null;
-			if (is_animated) {
-				for (i = 0; i < destroy_length; i += 1) to_destroy[i].nodes?.a?.measure();
-				for (i = 0; i < destroy_length; i += 1) to_destroy[i].nodes?.a?.fix();
-			}
-			pause_effects(state, to_destroy, controlled_anchor);
-		}
-	}
-	if (is_animated) queue_micro_task(() => {
-		if (to_animate === void 0) return;
-		for (effect of to_animate) effect.nodes?.a?.apply();
-	});
-}
-/**
-* @template V
-* @param {Map<any, EachItem>} items
-* @param {Node} anchor
-* @param {V} value
-* @param {unknown} key
-* @param {number} index
-* @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>, collection: () => V[]) => void} render_fn
-* @param {number} flags
-* @param {() => V[]} get_collection
-* @returns {EachItem}
-*/
-function create_item(items, anchor, value, key, index, render_fn, flags, get_collection) {
-	var v = (flags & 1) !== 0 ? (flags & 16) === 0 ? /* @__PURE__ */ mutable_source(value, false, false) : source(value) : null;
-	var i = (flags & 2) !== 0 ? source(index) : null;
-	return {
-		v,
-		i,
-		e: branch(() => {
-			render_fn(anchor, v ?? value, i ?? index, get_collection);
-			return () => {
-				items.delete(key);
-			};
-		})
-	};
-}
-/**
-* @param {Effect} effect
-* @param {Effect | null} next
-* @param {Text | Element | Comment} anchor
-*/
-function move(effect, next, anchor) {
-	if (!effect.nodes) return;
-	var node = effect.nodes.start;
-	var end = effect.nodes.end;
-	var dest = next && (next.f & 33554432) === 0 ? next.nodes.start : anchor;
-	while (node !== null) {
-		var next_node = /* @__PURE__ */ get_next_sibling(node);
-		dest.before(node);
-		if (node === end) return;
-		node = next_node;
-	}
-}
-/**
-* @param {EachState} state
-* @param {Effect | null} prev
-* @param {Effect | null} next
-*/
-function link(state, prev, next) {
-	if (prev === null) state.effect.first = next;
-	else prev.next = next;
-	if (next === null) state.effect.last = prev;
-	else next.prev = prev;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/blocks/svelte-head.js
-/** @import { TemplateNode } from '#client' */
-/**
-* @param {string} hash
-* @param {(anchor: Node) => void} render_fn
-* @returns {void}
-*/
-function head(hash, render_fn) {
-	let previous_hydrate_node = null;
-	let was_hydrating = hydrating;
-	/** @type {Comment | Text} */
-	var anchor;
-	if (hydrating) {
-		previous_hydrate_node = hydrate_node;
-		var head_anchor = /* @__PURE__ */ get_first_child(document.head);
-		while (head_anchor !== null && (head_anchor.nodeType !== 8 || head_anchor.data !== hash)) head_anchor = /* @__PURE__ */ get_next_sibling(head_anchor);
-		if (head_anchor === null) set_hydrating(false);
-		else {
-			var start = /* @__PURE__ */ get_next_sibling(head_anchor);
-			head_anchor.remove();
-			set_hydrate_node(start);
-		}
-	}
-	if (!hydrating) anchor = document.head.appendChild(create_text());
-	try {
-		block(() => render_fn(anchor), HEAD_EFFECT | EFFECT_PRESERVED);
-	} finally {
-		if (was_hydrating) {
-			set_hydrating(true);
-			set_hydrate_node(previous_hydrate_node);
-		}
-	}
-}
-//#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"];
-/**
-* @param {any} value
-* @param {string | null} [hash]
-* @param {Record<string, boolean>} [directives]
-* @returns {string | null}
-*/
-function to_class(value, hash, directives) {
-	var classname = value == null ? "" : "" + value;
-	if (hash) classname = classname ? classname + " " + hash : hash;
-	if (directives) {
-		for (var key of Object.keys(directives)) if (directives[key]) classname = classname ? classname + " " + key : key;
-		else if (classname.length) {
-			var len = key.length;
-			var a = 0;
-			while ((a = classname.indexOf(key, a)) >= 0) {
-				var b = a + len;
-				if ((a === 0 || whitespace.includes(classname[a - 1])) && (b === classname.length || whitespace.includes(classname[b]))) classname = (a === 0 ? "" : classname.substring(0, a)) + classname.substring(b + 1);
-				else a = b;
-			}
-		}
-	}
-	return classname === "" ? null : classname;
-}
-/**
-*
-* @param {Record<string,any>} styles
-* @param {boolean} important
-*/
-function append_styles(styles, important = false) {
-	var separator = important ? " !important;" : ";";
-	var css = "";
-	for (var key of Object.keys(styles)) {
-		var value = styles[key];
-		if (value != null && value !== "") css += " " + key + ": " + value + separator;
-	}
-	return css;
-}
-/**
-* @param {string} name
-* @returns {string}
-*/
-function to_css_name(name) {
-	if (name[0] !== "-" || name[1] !== "-") return name.toLowerCase();
-	return name;
-}
-/**
-* @param {any} value
-* @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [styles]
-* @returns {string | null}
-*/
-function to_style(value, styles) {
-	if (styles) {
-		var new_style = "";
-		/** @type {Record<string,any> | undefined} */
-		var normal_styles;
-		/** @type {Record<string,any> | undefined} */
-		var important_styles;
-		if (Array.isArray(styles)) {
-			normal_styles = styles[0];
-			important_styles = styles[1];
-		} else normal_styles = styles;
-		if (value) {
-			value = String(value).replaceAll(/\s*\/\*.*?\*\/\s*/g, "").trim();
-			/** @type {boolean | '"' | "'"} */
-			var in_str = false;
-			var in_apo = 0;
-			var in_comment = false;
-			var reserved_names = [];
-			if (normal_styles) reserved_names.push(...Object.keys(normal_styles).map(to_css_name));
-			if (important_styles) reserved_names.push(...Object.keys(important_styles).map(to_css_name));
-			var start_index = 0;
-			var name_index = -1;
-			const len = value.length;
-			for (var i = 0; i < len; i++) {
-				var c = value[i];
-				if (in_comment) {
-					if (c === "/" && value[i - 1] === "*") in_comment = false;
-				} else if (in_str) {
-					if (in_str === c) in_str = false;
-				} else if (c === "/" && value[i + 1] === "*") in_comment = true;
-				else if (c === "\"" || c === "'") in_str = c;
-				else if (c === "(") in_apo++;
-				else if (c === ")") in_apo--;
-				if (!in_comment && in_str === false && in_apo === 0) {
-					if (c === ":" && name_index === -1) name_index = i;
-					else if (c === ";" || i === len - 1) {
-						if (name_index !== -1) {
-							var name = to_css_name(value.substring(start_index, name_index).trim());
-							if (!reserved_names.includes(name)) {
-								if (c !== ";") i++;
-								var property = value.substring(start_index, i).trim();
-								new_style += " " + property + ";";
-							}
-						}
-						start_index = i + 1;
-						name_index = -1;
-					}
-				}
-			}
-		}
-		if (normal_styles) new_style += append_styles(normal_styles);
-		if (important_styles) new_style += append_styles(important_styles, true);
-		new_style = new_style.trim();
-		return new_style === "" ? null : new_style;
-	}
-	return value == null ? null : String(value);
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/class.js
-/**
-* @param {Element} dom
-* @param {boolean | number} is_html
-* @param {string | null} value
-* @param {string} [hash]
-* @param {Record<string, any>} [prev_classes]
-* @param {Record<string, any>} [next_classes]
-* @returns {Record<string, boolean> | undefined}
-*/
-function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
-	var prev = dom.__className;
-	if (hydrating || prev !== value || prev === void 0) {
-		var next_class_name = to_class(value, hash, next_classes);
-		if (!hydrating || next_class_name !== dom.getAttribute("class")) if (next_class_name == null) dom.removeAttribute("class");
-		else if (is_html) dom.className = next_class_name;
-		else dom.setAttribute("class", next_class_name);
-		dom.__className = value;
-	} else if (next_classes && prev_classes !== next_classes) for (var key in next_classes) {
-		var is_present = !!next_classes[key];
-		if (prev_classes == null || is_present !== !!prev_classes[key]) dom.classList.toggle(key, is_present);
-	}
-	return next_classes;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/style.js
-/**
-* @param {Element & ElementCSSInlineStyle} dom
-* @param {Record<string, any>} prev
-* @param {Record<string, any>} next
-* @param {string} [priority]
-*/
-function update_styles(dom, prev = {}, next, priority) {
-	for (var key in next) {
-		var value = next[key];
-		if (prev[key] !== value) if (next[key] == null) dom.style.removeProperty(key);
-		else dom.style.setProperty(key, value, priority);
-	}
-}
-/**
-* @param {Element & ElementCSSInlineStyle} dom
-* @param {string | null} value
-* @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [prev_styles]
-* @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [next_styles]
-*/
-function set_style(dom, value, prev_styles, next_styles) {
-	var prev = dom.__style;
-	if (hydrating || prev !== value) {
-		var next_style_attr = to_style(value, next_styles);
-		if (!hydrating || next_style_attr !== dom.getAttribute("style")) if (next_style_attr == null) dom.removeAttribute("style");
-		else dom.style.cssText = next_style_attr;
-		dom.__style = value;
-	} else if (next_styles) if (Array.isArray(next_styles)) {
-		update_styles(dom, prev_styles?.[0], next_styles[0]);
-		update_styles(dom, prev_styles?.[1], next_styles[1], "important");
-	} else update_styles(dom, prev_styles, next_styles);
-	return next_styles;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/bindings/select.js
-/**
-* Selects the correct option(s) (depending on whether this is a multiple select)
-* @template V
-* @param {HTMLSelectElement} select
-* @param {V} value
-* @param {boolean} mounting
-*/
-function select_option(select, value, mounting = false) {
-	if (select.multiple) {
-		if (value == void 0) return;
-		if (!is_array(value)) return select_multiple_invalid_value();
-		for (var option of select.options) option.selected = value.includes(get_option_value(option));
-		return;
-	}
-	for (option of select.options) if (is(get_option_value(option), value)) {
-		option.selected = true;
-		return;
-	}
-	if (!mounting || value !== void 0) select.selectedIndex = -1;
-}
-/**
-* Selects the correct option(s) if `value` is given,
-* and then sets up a mutation observer to sync the
-* current selection to the dom when it changes. Such
-* changes could for example occur when options are
-* inside an `#each` block.
-* @param {HTMLSelectElement} select
-*/
-function init_select(select) {
-	var observer = new MutationObserver(() => {
-		select_option(select, select.__value);
-	});
-	observer.observe(select, {
-		childList: true,
-		subtree: true,
-		attributes: true,
-		attributeFilter: ["value"]
-	});
-	teardown(() => {
-		observer.disconnect();
-	});
-}
-/**
-* @param {HTMLSelectElement} select
-* @param {() => unknown} get
-* @param {(value: unknown) => void} set
-* @returns {void}
-*/
-function bind_select_value(select, get, set = get) {
-	var batches = /* @__PURE__ */ new WeakSet();
-	var mounting = true;
-	listen_to_event_and_reset_event(select, "change", (is_reset) => {
-		var query = is_reset ? "[selected]" : ":checked";
-		/** @type {unknown} */
-		var value;
-		if (select.multiple) value = [].map.call(select.querySelectorAll(query), get_option_value);
-		else {
-			/** @type {HTMLOptionElement | null} */
-			var selected_option = select.querySelector(query) ?? select.querySelector("option:not([disabled])");
-			value = selected_option && get_option_value(selected_option);
-		}
-		set(value);
-		select.__value = value;
-		if (current_batch !== null) batches.add(current_batch);
-	});
-	effect(() => {
-		var value = get();
-		if (select === document.activeElement) {
-			var batch = async_mode_flag ? previous_batch : current_batch;
-			if (batches.has(batch)) return;
-		}
-		select_option(select, value, mounting);
-		if (mounting && value === void 0) {
-			/** @type {HTMLOptionElement | null} */
-			var selected_option = select.querySelector(":checked");
-			if (selected_option !== null) {
-				value = get_option_value(selected_option);
-				set(value);
-			}
-		}
-		select.__value = value;
-		mounting = false;
-	});
-	init_select(select);
-}
-/** @param {HTMLOptionElement} option */
-function get_option_value(option) {
-	if ("__value" in option) return option.__value;
-	else return option.value;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/attributes.js
-/** @import { Blocker, Effect } from '#client' */
-var IS_CUSTOM_ELEMENT = Symbol("is custom element");
-var IS_HTML = Symbol("is html");
-var LINK_TAG = IS_XHTML ? "link" : "LINK";
-var PROGRESS_TAG = IS_XHTML ? "progress" : "PROGRESS";
-/**
-* The value/checked attribute in the template 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 {HTMLInputElement} input
-* @returns {void}
-*/
-function remove_input_defaults(input) {
-	if (!hydrating) return;
-	var already_removed = false;
-	var remove_defaults = () => {
-		if (already_removed) return;
-		already_removed = true;
-		if (input.hasAttribute("value")) {
-			var value = input.value;
-			set_attribute(input, "value", null);
-			input.value = value;
-		}
-		if (input.hasAttribute("checked")) {
-			var checked = input.checked;
-			set_attribute(input, "checked", null);
-			input.checked = checked;
-		}
-	};
-	input.__on_r = remove_defaults;
-	queue_micro_task(remove_defaults);
-	add_form_reset_listener();
-}
-/**
-* @param {Element} element
-* @param {any} value
-*/
-function set_value(element, value) {
-	var attributes = get_attributes(element);
-	if (attributes.value === (attributes.value = value ?? void 0) || element.value === value && (value !== 0 || element.nodeName !== PROGRESS_TAG)) return;
-	element.value = value ?? "";
-}
-/**
-* @param {Element} element
-* @param {boolean} checked
-*/
-function set_checked(element, checked) {
-	var attributes = get_attributes(element);
-	if (attributes.checked === (attributes.checked = checked ?? void 0)) return;
-	element.checked = checked;
-}
-/**
-* @param {Element} element
-* @param {string} attribute
-* @param {string | null} value
-* @param {boolean} [skip_warning]
-*/
-function set_attribute(element, attribute, value, skip_warning) {
-	var attributes = get_attributes(element);
-	if (hydrating) {
-		attributes[attribute] = element.getAttribute(attribute);
-		if (attribute === "src" || attribute === "srcset" || attribute === "href" && element.nodeName === LINK_TAG) {
-			if (!skip_warning);
-			return;
-		}
-	}
-	if (attributes[attribute] === (attributes[attribute] = value)) return;
-	if (attribute === "loading") element[LOADING_ATTR_SYMBOL] = value;
-	if (value == null) element.removeAttribute(attribute);
-	else if (typeof value !== "string" && get_setters(element).includes(attribute)) element[attribute] = value;
-	else element.setAttribute(attribute, value);
-}
-/**
-*
-* @param {Element} element
-*/
-function get_attributes(element) {
-	return element.__attributes ??= {
-		[IS_CUSTOM_ELEMENT]: element.nodeName.includes("-"),
-		[IS_HTML]: element.namespaceURI === NAMESPACE_HTML
-	};
-}
-/** @type {Map<string, string[]>} */
-var setters_cache = /* @__PURE__ */ new Map();
-/** @param {Element} element */
-function get_setters(element) {
-	var cache_key = element.getAttribute("is") || element.nodeName;
-	var setters = setters_cache.get(cache_key);
-	if (setters) return setters;
-	setters_cache.set(cache_key, setters = []);
-	var descriptors;
-	var proto = element;
-	var element_proto = Element.prototype;
-	while (element_proto !== proto) {
-		descriptors = get_descriptors(proto);
-		for (var key in descriptors) if (descriptors[key].set) setters.push(key);
-		proto = get_prototype_of(proto);
-	}
-	return setters;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/elements/bindings/input.js
-/** @import { Batch } from '../../../reactivity/batch.js' */
-/**
-* @param {HTMLInputElement} input
-* @param {() => unknown} get
-* @param {(value: unknown) => void} set
-* @returns {void}
-*/
-function bind_value(input, get, set = get) {
-	var batches = /* @__PURE__ */ new WeakSet();
-	listen_to_event_and_reset_event(input, "input", async (is_reset) => {
-		/** @type {any} */
-		var value = is_reset ? input.defaultValue : input.value;
-		value = is_numberlike_input(input) ? to_number(value) : value;
-		set(value);
-		if (current_batch !== null) batches.add(current_batch);
-		await tick();
-		if (value !== (value = get())) {
-			var start = input.selectionStart;
-			var end = input.selectionEnd;
-			var length = input.value.length;
-			input.value = value ?? "";
-			if (end !== null) {
-				var new_length = input.value.length;
-				if (start === end && end === length && new_length > length) {
-					input.selectionStart = new_length;
-					input.selectionEnd = new_length;
-				} else {
-					input.selectionStart = start;
-					input.selectionEnd = Math.min(end, new_length);
-				}
-			}
-		}
-	});
-	if (hydrating && input.defaultValue !== input.value || untrack(get) == null && input.value) {
-		set(is_numberlike_input(input) ? to_number(input.value) : input.value);
-		if (current_batch !== null) batches.add(current_batch);
-	}
-	render_effect(() => {
-		var value = get();
-		if (input === document.activeElement) {
-			var batch = async_mode_flag ? previous_batch : current_batch;
-			if (batches.has(batch)) return;
-		}
-		if (is_numberlike_input(input) && value === to_number(input.value)) return;
-		if (input.type === "date" && !value && !input.value) return;
-		if (value !== input.value) input.value = value ?? "";
-	});
-}
-/** @type {Set<HTMLInputElement[]>} */
-var pending = /* @__PURE__ */ new Set();
-/**
-* @param {HTMLInputElement[]} inputs
-* @param {null | [number]} group_index
-* @param {HTMLInputElement} input
-* @param {() => unknown} get
-* @param {(value: unknown) => void} set
-* @returns {void}
-*/
-function bind_group(inputs, group_index, input, get, set = get) {
-	var is_checkbox = input.getAttribute("type") === "checkbox";
-	var binding_group = inputs;
-	let hydration_mismatch = false;
-	if (group_index !== null) for (var index of group_index) binding_group = binding_group[index] ??= [];
-	binding_group.push(input);
-	listen_to_event_and_reset_event(input, "change", () => {
-		var value = input.__value;
-		if (is_checkbox) value = get_binding_group_value(binding_group, value, input.checked);
-		set(value);
-	}, () => set(is_checkbox ? [] : null));
-	render_effect(() => {
-		var value = get();
-		if (hydrating && input.defaultChecked !== input.checked) {
-			hydration_mismatch = true;
-			return;
-		}
-		if (is_checkbox) {
-			value = value || [];
-			input.checked = value.includes(input.__value);
-		} else input.checked = is(input.__value, value);
-	});
-	teardown(() => {
-		var index = binding_group.indexOf(input);
-		if (index !== -1) binding_group.splice(index, 1);
-	});
-	if (!pending.has(binding_group)) {
-		pending.add(binding_group);
-		queue_micro_task(() => {
-			binding_group.sort((a, b) => a.compareDocumentPosition(b) === 4 ? -1 : 1);
-			pending.delete(binding_group);
-		});
-	}
-	queue_micro_task(() => {
-		if (hydration_mismatch) {
-			var value;
-			if (is_checkbox) value = get_binding_group_value(binding_group, value, input.checked);
-			else value = binding_group.find((input) => input.checked)?.__value;
-			set(value);
-		}
-	});
-}
-/**
-* @param {HTMLInputElement} input
-* @param {() => unknown} get
-* @param {(value: unknown) => void} set
-* @returns {void}
-*/
-function bind_checked(input, get, set = get) {
-	listen_to_event_and_reset_event(input, "change", (is_reset) => {
-		set(is_reset ? input.defaultChecked : input.checked);
-	});
-	if (hydrating && input.defaultChecked !== input.checked || untrack(get) == null) set(input.checked);
-	render_effect(() => {
-		var value = get();
-		input.checked = Boolean(value);
-	});
-}
-/**
-* @template V
-* @param {Array<HTMLInputElement>} group
-* @param {V} __value
-* @param {boolean} checked
-* @returns {V[]}
-*/
-function get_binding_group_value(group, __value, checked) {
-	/** @type {Set<V>} */
-	var value = /* @__PURE__ */ new Set();
-	for (var i = 0; i < group.length; i += 1) if (group[i].checked) value.add(group[i].__value);
-	if (!checked) value.delete(__value);
-	return Array.from(value);
-}
-/**
-* @param {HTMLInputElement} input
-*/
-function is_numberlike_input(input) {
-	var type = input.type;
-	return type === "number" || type === "range";
-}
-/**
-* @param {string} value
-*/
-function to_number(value) {
-	return value === "" ? null : +value;
-}
-//#endregion
-//#region node_modules/svelte/src/internal/client/dom/legacy/lifecycle.js
-/** @import { ComponentContextLegacy } from '#client' */
-/**
-* Legacy-mode only: Call `onMount` callbacks and set up `beforeUpdate`/`afterUpdate` effects
-* @param {boolean} [immutable]
-*/
-function init(immutable = false) {
-	const context = component_context;
-	const callbacks = context.l.u;
-	if (!callbacks) return;
-	let props = () => deep_read_state(context.s);
-	if (immutable) {
-		let version = 0;
-		let prev = {};
-		const d = /* @__PURE__ */ derived(() => {
-			let changed = false;
-			const props = context.s;
-			for (const key in props) if (props[key] !== prev[key]) {
-				prev[key] = props[key];
-				changed = true;
-			}
-			if (changed) version++;
-			return version;
-		});
-		props = () => get(d);
-	}
-	if (callbacks.b.length) user_pre_effect(() => {
-		observe_all(context, props);
-		run_all(callbacks.b);
-	});
-	user_effect(() => {
-		const fns = untrack(() => callbacks.m.map(run));
-		return () => {
-			for (const fn of fns) if (typeof fn === "function") fn();
-		};
-	});
-	if (callbacks.a.length) user_effect(() => {
-		observe_all(context, props);
-		run_all(callbacks.a);
-	});
-}
-/**
-* Invoke the getter of all signals associated with a component
-* so they can be registered to the effect this function is called in.
-* @param {ComponentContextLegacy} context
-* @param {(() => void)} props
-*/
-function observe_all(context, props) {
-	if (context.l.s) for (const signal of context.l.s) get(signal);
-	props();
-}
-if (typeof HTMLElement === "function");
-//#endregion
-//#region node_modules/svelte/src/internal/disclose-version.js
-if (typeof window !== "undefined") ((window.__svelte ??= {}).v ??= /* @__PURE__ */ new Set()).add("5");
-//#endregion
-//#region node_modules/svelte/src/internal/flags/legacy.js
-enable_legacy_mode_flag();
-//#endregion
 //#region node_modules/idb/build/index.js
 var instanceOfAny = (object, constructors) => constructors.some((c) => object instanceof c);
 var idbProxyableTypes;
@@ -5682,22 +1176,24 @@ async function importAll(data, mode = "merge", sourcePassword = "", targetKey =
 	};
 }
 //#endregion
-//#region src/lib/stores/settings.svelte.js
-var SettingsStore = class {
-	#autoLockMinutes = /* @__PURE__ */ state(5);
-	get autoLockMinutes() {
-		return get(this.#autoLockMinutes);
-	}
-	set autoLockMinutes(value) {
-		set(this.#autoLockMinutes, value, true);
-	}
-	#lockOnTabSwitch = /* @__PURE__ */ state(true);
-	get lockOnTabSwitch() {
-		return get(this.#lockOnTabSwitch);
-	}
-	set lockOnTabSwitch(value) {
-		set(this.#lockOnTabSwitch, value, true);
+//#region src/lib/stores/settings.js
+/**
+* Reactive settings store for vault security preferences.
+*
+* Settings are persisted in IndexedDB (meta store) so they survive
+* page reloads. Defaults are used until the user explicitly saves.
+*/
+var SettingsStore = class extends Store {
+	constructor() {
+		super({
+			autoLockMinutes: 5,
+			lockOnTabSwitch: true
+		});
 	}
+	/**
+	* Load persisted settings from IndexedDB.
+	* Falls back to defaults for any missing keys.
+	*/
 	async load() {
 		const minutes = await getSetting("autoLockMinutes");
 		const tabSwitch = await getSetting("lockOnTabSwitch");
@@ -5714,10 +1210,16 @@ var SettingsStore = class {
 };
 var settings = new SettingsStore();
 //#endregion
-//#region src/lib/stores/security.svelte.js
+//#region src/lib/stores/security.js
+/**
+* Security utilities: auto-lock timer, visibility change detection, cleanup.
+*/
 var autoLockTimer = null;
 var activityHandler = null;
 var activityEvents = null;
+/**
+* Start (or restart) the auto-lock timer using current settings.
+*/
 function startAutoLock() {
 	resetAutoLock();
 	if (!activityHandler) {
@@ -5774,29 +1276,21 @@ function stopAutoLock() {
 	window.removeEventListener("beforeunload", clearKeyOnExit);
 }
 //#endregion
-//#region src/lib/stores/app.svelte.js
-var AppStore = class {
-	#isUnlocked = /* @__PURE__ */ state(false);
-	get isUnlocked() {
-		return get(this.#isUnlocked);
-	}
-	set isUnlocked(value) {
-		set(this.#isUnlocked, value, true);
-	}
-	#encryptionKey = /* @__PURE__ */ state(null);
-	get encryptionKey() {
-		return get(this.#encryptionKey);
-	}
-	set encryptionKey(value) {
-		set(this.#encryptionKey, value, true);
-	}
-	#salt = /* @__PURE__ */ state(null);
-	get salt() {
-		return get(this.#salt);
-	}
-	set salt(value) {
-		set(this.#salt, value, true);
+//#region src/lib/stores/app.js
+/**
+* App-level reactive state.
+*/
+var AppStore = class extends Store {
+	constructor() {
+		super({
+			isUnlocked: false,
+			encryptionKey: null,
+			salt: null
+		});
 	}
+	/**
+	* Lock the vault — clear the key from memory.
+	*/
 	lockVault() {
 		stopAutoLock();
 		this.encryptionKey = null;
@@ -5807,48 +1301,138 @@ var app$1 = new AppStore();
 //#endregion
 //#region src/lib/autofocus.js
 /**
-* Action that autofocuses an element after mount when the condition is truthy.
+* Focus 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());
+function autofocus(el, condition = true) {
+	if (el && condition) queueMicrotask(() => el.focus());
 }
 //#endregion
-//#region src/components/LockScreen.svelte
-var root_1$7 = /* @__PURE__ */ from_html(`<div class="warning-banner svelte-7sq1ct" role="alert">This HTML file is intended for offline use.</div>`);
-var root_2$6 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-7sq1ct" role="alert"> </div>`);
-var root_3$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>`);
-var root$7 = /* @__PURE__ */ from_html(`<div class="lock-screen svelte-7sq1ct"><div class="lock-card svelte-7sq1ct"><div class="lock-icon svelte-7sq1ct">🔐</div> <h1 class="svelte-7sq1ct">Password Vault</h1> <p class="subtitle svelte-7sq1ct"> </p> <!> <!> <form class="lock-form svelte-7sq1ct"><div class="form-group"><label for="master-password">Master Password</label> <input id="master-password" type="password" placeholder="Enter master password" autocomplete="current-password"/></div> <!> <button type="submit" class="btn btn-primary w-full"> </button></form> <p class="hint svelte-7sq1ct"> </p></div></div>`);
-function LockScreen($$anchor, $$props) {
-	push($$props, true);
-	let masterPassword = /* @__PURE__ */ state("");
-	let confirmPassword = /* @__PURE__ */ state("");
-	let error = /* @__PURE__ */ state("");
-	let loading = /* @__PURE__ */ state(false);
-	let isSetup = /* @__PURE__ */ state(false);
-	let notLocal = /* @__PURE__ */ user_derived(() => typeof window !== "undefined" && window.location.protocol !== "file:");
-	async function checkVault() {
-		set(isSetup, !await isVaultInitialized());
+//#region src/components/LockScreen.js
+/**
+* LockScreen — master password setup + unlock UI.
+*/
+var LockScreen = class extends Component {
+	masterPassword = "";
+	confirmPassword = "";
+	error = "";
+	loading = false;
+	isSetup = false;
+	mount() {
+		super.mount();
+		this.#checkVault();
+		return this;
 	}
-	checkVault();
-	async function handleSubmit() {
-		set(error, "");
-		set(loading, true);
+	render() {
+		const notLocal = typeof window !== "undefined" && window.location.protocol !== "file:";
+		this.el = this.ce("div", { className: "lock-screen" }, this.ce("div", { className: "lock-card" }, this.ce("div", {
+			className: "lock-icon",
+			textContent: "🔐"
+		}), this.ce("h1", { textContent: "Password Vault" }), this.ce("p", {
+			className: "subtitle",
+			textContent: "Unlock your vault"
+		}), notLocal ? this.ce("div", {
+			className: "warning-banner",
+			role: "alert",
+			textContent: "This HTML file is intended for offline use."
+		}) : null, null, this.#buildForm(), this.ce("p", {
+			className: "hint",
+			textContent: "Your data is encrypted with AES-256-GCM. Key is stored only in memory."
+		})));
+		this._subtitle = this.q(".subtitle");
+		this._confirmGroup = this.q(".confirm-group");
+		this._submitBtn = this.q(".submit-btn");
+		this._passwordInput = this.q("#master-password");
+		this._confirmInput = this.q("#confirm-password");
+		this._hint = this.q(".hint");
+		autofocus(this._passwordInput, true);
+		if (this._passwordInput) this.on(this._passwordInput, "input", (e) => {
+			this.masterPassword = e.target.value;
+		});
+		if (this._confirmInput) this.on(this._confirmInput, "input", (e) => {
+			this.confirmPassword = e.target.value;
+		});
+		return this.el;
+	}
+	#buildForm() {
+		return this.ce("form", {
+			className: "lock-form",
+			id: "lock-form"
+		}, this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "master-password",
+			textContent: "Master Password"
+		}), this.ce("input", {
+			id: "master-password",
+			type: "password",
+			placeholder: "Enter master password",
+			autocomplete: "current-password"
+		})), this.ce("div", { className: "form-group confirm-group" }, this.ce("label", {
+			htmlFor: "confirm-password",
+			textContent: "Confirm Password"
+		}), this.ce("input", {
+			id: "confirm-password",
+			type: "password",
+			placeholder: "Confirm master password",
+			autocomplete: "new-password"
+		})), this.ce("button", {
+			type: "submit",
+			className: "btn btn-primary w-full submit-btn",
+			textContent: "Unlock"
+		}));
+	}
+	#updateUI() {
+		if (this._subtitle) this._subtitle.textContent = this.isSetup ? "Create your vault" : "Unlock your vault";
+		if (this._confirmGroup) this._confirmGroup.style.display = this.isSetup ? "" : "none";
+		if (this._submitBtn) {
+			this._submitBtn.textContent = this.loading ? "Processing..." : this.isSetup ? "Create Vault" : "Unlock";
+			this._submitBtn.disabled = this.loading;
+		}
+		if (this._passwordInput) this._passwordInput.disabled = this.loading;
+		if (this._confirmInput) this._confirmInput.disabled = this.loading;
+		if (this.error) if (!this._errorBanner) {
+			const banner = this.ce("div", {
+				className: "error-banner",
+				role: "alert",
+				textContent: this.error
+			});
+			const form = this.q("#lock-form");
+			form?.parentNode?.insertBefore(banner, form);
+			this._errorBanner = banner;
+		} else this._errorBanner.textContent = this.error;
+		else if (this._errorBanner) {
+			this._errorBanner.remove();
+			this._errorBanner = null;
+		}
+		if (this._hint) this._hint.textContent = this.isSetup ? "Your master password encrypts all data locally. It cannot be recovered if lost." : "Your data is encrypted with AES-256-GCM. Key is stored only in memory.";
+	}
+	#checkVault() {
+		isVaultInitialized().then((init) => {
+			this.isSetup = !init;
+			this.#updateUI();
+		});
+	}
+	#handleSubmit = async (e) => {
+		e.preventDefault();
+		this.error = "";
+		this.loading = true;
+		this.#updateUI();
 		try {
-			if (get(isSetup)) {
-				if (!get(masterPassword) || get(masterPassword).length < 4) {
-					set(error, "Password must be at least 4 characters");
-					set(loading, false);
+			if (this.isSetup) {
+				if (!this.masterPassword || this.masterPassword.length < 4) {
+					this.error = "Password must be at least 4 characters";
+					this.loading = false;
+					this.#updateUI();
 					return;
 				}
-				if (get(masterPassword) !== get(confirmPassword)) {
-					set(error, "Passwords do not match");
-					set(loading, false);
+				if (this.masterPassword !== this.confirmPassword) {
+					this.error = "Passwords do not match";
+					this.loading = false;
+					this.#updateUI();
 					return;
 				}
-				const { salt, testEncrypted, testPlaintext } = await createTestPayload(get(masterPassword));
+				const { salt, testEncrypted, testPlaintext } = await createTestPayload(this.masterPassword);
 				app$1.salt = salt;
-				app$1.encryptionKey = await deriveKey(get(masterPassword), salt);
+				app$1.encryptionKey = await deriveKey(this.masterPassword, salt);
 				await saveVaultMeta(salt, testEncrypted, testPlaintext);
 				await ensureTrashGroup();
 				await settings.load();
@@ -5857,14 +1441,16 @@ function LockScreen($$anchor, $$props) {
 			} else {
 				const meta = await loadVaultMeta();
 				if (!meta.salt || !meta.testEncrypted || !meta.testPlaintext) {
-					set(error, "Vault data corrupted");
-					set(loading, false);
+					this.error = "Vault data corrupted";
+					this.loading = false;
+					this.#updateUI();
 					return;
 				}
-				const key = await deriveKey(get(masterPassword), meta.salt);
-				if (!await verifyPassword(get(masterPassword), meta.salt, meta.testEncrypted, meta.testPlaintext)) {
-					set(error, "Incorrect password");
-					set(loading, false);
+				const key = await deriveKey(this.masterPassword, meta.salt);
+				if (!await verifyPassword(this.masterPassword, meta.salt, meta.testEncrypted, meta.testPlaintext)) {
+					this.error = "Incorrect password";
+					this.loading = false;
+					this.#updateUI();
 					return;
 				}
 				app$1.salt = meta.salt;
@@ -5873,113 +1459,43 @@ function LockScreen($$anchor, $$props) {
 				app$1.isUnlocked = true;
 				startAutoLock();
 			}
-		} catch (e) {
-			console.error(e);
-			set(error, "An error occurred: " + e.message);
+		} catch (err) {
+			console.error(err);
+			this.error = "An error occurred: " + err.message;
 		}
-		set(loading, false);
-		set(masterPassword, "");
-		set(confirmPassword, "");
+		this.loading = false;
+		this.masterPassword = "";
+		this.confirmPassword = "";
+		if (this._passwordInput) this._passwordInput.value = "";
+		if (this._confirmInput) this._confirmInput.value = "";
+		this.#updateUI();
+	};
+	afterMount() {
+		const form = this.q("#lock-form");
+		if (form) this.on(form, "submit", this.#handleSubmit);
 	}
-	var div = root$7();
-	var div_1 = child(div);
-	var p = sibling(child(div_1), 4);
-	var text = child(p, true);
-	reset(p);
-	var node = sibling(p, 2);
-	var consequent = ($$anchor) => {
-		append($$anchor, root_1$7());
-	};
-	if_block(node, ($$render) => {
-		if (get(notLocal)) $$render(consequent);
-	});
-	var node_1 = sibling(node, 2);
-	var consequent_1 = ($$anchor) => {
-		var div_3 = root_2$6();
-		var text_1 = child(div_3, true);
-		reset(div_3);
-		template_effect(() => set_text(text_1, get(error)));
-		append($$anchor, div_3);
-	};
-	if_block(node_1, ($$render) => {
-		if (get(error)) $$render(consequent_1);
-	});
-	var form = sibling(node_1, 2);
-	var div_4 = child(form);
-	var input = sibling(child(div_4), 2);
-	remove_input_defaults(input);
-	effect(() => bind_value(input, () => get(masterPassword), ($$value) => set(masterPassword, $$value)));
-	action(input, ($$node) => autofocus?.($$node));
-	reset(div_4);
-	var node_2 = sibling(div_4, 2);
-	var consequent_2 = ($$anchor) => {
-		var div_5 = root_3$6();
-		var input_1 = sibling(child(div_5), 2);
-		remove_input_defaults(input_1);
-		reset(div_5);
-		template_effect(() => input_1.disabled = get(loading));
-		bind_value(input_1, () => get(confirmPassword), ($$value) => set(confirmPassword, $$value));
-		append($$anchor, div_5);
-	};
-	if_block(node_2, ($$render) => {
-		if (get(isSetup)) $$render(consequent_2);
-	});
-	var button = sibling(node_2, 2);
-	var text_2 = child(button, true);
-	reset(button);
-	reset(form);
-	var p_1 = sibling(form, 2);
-	var text_3 = child(p_1, true);
-	reset(p_1);
-	reset(div_1);
-	reset(div);
-	template_effect(() => {
-		set_text(text, get(isSetup) ? "Create your vault" : "Unlock your vault");
-		input.disabled = get(loading);
-		button.disabled = get(loading);
-		set_text(text_2, get(loading) ? "Processing..." : get(isSetup) ? "Create Vault" : "Unlock");
-		set_text(text_3, get(isSetup) ? "Your master password encrypts all data locally. It cannot be recovered if lost." : "Your data is encrypted with AES-256-GCM. Key is stored only in memory.");
-	});
-	event("submit", form, (e) => {
-		e.preventDefault();
-		handleSubmit();
-	});
-	append($$anchor, div);
-	pop();
-}
+};
 //#endregion
-//#region src/lib/stores/search.svelte.js
+//#region src/lib/stores/search.js
+/**
+* Search and filter state.
+* Shared between Sidebar and EntryList for coordinated filtering.
+*/
 var DEBOUNCE_MS = 300;
-var SearchStore = class {
-	#query = /* @__PURE__ */ state("");
-	get query() {
-		return get(this.#query);
-	}
-	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);
-	}
-	set activeGroupId(value) {
-		set(this.#activeGroupId, value, true);
-	}
-	#refreshTrigger = /* @__PURE__ */ state(0);
-	get refreshTrigger() {
-		return get(this.#refreshTrigger);
-	}
-	set refreshTrigger(value) {
-		set(this.#refreshTrigger, value, true);
-	}
+var SearchStore = class extends Store {
 	#debounceTimer = null;
+	constructor() {
+		super({
+			query: "",
+			debouncedQuery: "",
+			activeGroupId: "all",
+			refreshTrigger: 0
+		});
+	}
+	/**
+	* 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);
@@ -6003,544 +1519,746 @@ var SearchStore = class {
 };
 var search = new SearchStore();
 //#endregion
-//#region src/components/Sidebar.svelte
-var root_2$5 = /* @__PURE__ */ from_html(`<div class="group-row svelte-181dlmc"><button><span class="group-color svelte-181dlmc"></span> <span class="group-name svelte-181dlmc"> </span> <span class="drop-icon svelte-181dlmc">📥</span></button> <div class="group-actions svelte-181dlmc"><button class="group-action-btn svelte-181dlmc" title="Edit group">✏️</button> <button class="group-action-btn svelte-181dlmc" title="Delete group">🗑</button></div></div>`);
-var root_4$5 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-181dlmc"> </div>`);
-var root_5$5 = /* @__PURE__ */ from_html(`<button></button>`);
-var root_3$5 = /* @__PURE__ */ from_html(`<div class="modal-overlay svelte-181dlmc" role="presentation"><div class="modal svelte-181dlmc" role="dialog" aria-modal="true" aria-label="Group settings" tabindex="-1"><h3 class="svelte-181dlmc"> </h3> <!> <div class="form-group svelte-181dlmc"><label for="group-name" class="svelte-181dlmc">Group Name</label> <input id="group-name" type="text" placeholder="e.g. Work, Personal" class="svelte-181dlmc"/></div> <div class="form-group svelte-181dlmc"><span class="field-label svelte-181dlmc">Color</span> <div class="color-picker svelte-181dlmc"></div></div> <div class="modal-actions svelte-181dlmc"><button class="btn btn-primary svelte-181dlmc"> </button> <button class="btn btn-ghost svelte-181dlmc">Cancel</button></div></div></div>`);
-var root_6$3 = /* @__PURE__ */ from_html(`<div class="modal-overlay svelte-181dlmc" role="presentation"><div class="modal svelte-181dlmc" role="dialog" aria-modal="true" aria-label="Delete group confirmation" tabindex="-1"><h3 class="svelte-181dlmc">Delete Group</h3> <p class="svelte-181dlmc">Delete "<strong class="svelte-181dlmc"> </strong>"? Entries in this group will become ungrouped.</p> <div class="modal-actions svelte-181dlmc"><button class="btn btn-danger svelte-181dlmc">Yes, delete</button> <button class="btn btn-ghost svelte-181dlmc">Cancel</button></div></div></div>`);
-var root$6 = /* @__PURE__ */ from_html(`<div class="sidebar-content svelte-181dlmc"><div class="sidebar-header svelte-181dlmc"><h2 class="svelte-181dlmc">🔐 Vault</h2></div> <div class="search-box svelte-181dlmc"><input type="text" placeholder="Search entries..." class="svelte-181dlmc"/></div> <nav class="groups-nav svelte-181dlmc"><button><span class="group-icon svelte-181dlmc">📋</span> <span class="group-name svelte-181dlmc">All Entries</span></button> <!></nav> <div class="trash-section svelte-181dlmc"><button><span class="group-color svelte-181dlmc"></span> <span class="group-name svelte-181dlmc"> </span></button></div> <div class="sidebar-footer svelte-181dlmc"><button class="btn btn-ghost btn-sm w-full svelte-181dlmc">+ New Group</button></div> <!> <!></div>`);
-function Sidebar($$anchor, $$props) {
-	push($$props, true);
-	let groups = /* @__PURE__ */ state(proxy([]));
-	let showGroupForm = /* @__PURE__ */ state(false);
-	let editingGroupId = /* @__PURE__ */ state(null);
-	let groupName = /* @__PURE__ */ state("");
-	let groupColor = /* @__PURE__ */ state("#6c63ff");
-	let groupError = /* @__PURE__ */ state("");
-	let showDeleteGroupConfirm = /* @__PURE__ */ state(null);
-	let deletingGroup = /* @__PURE__ */ user_derived(() => get(groups).find((g) => g.id === get(showDeleteGroupConfirm)));
-	let dragOverGroupId = /* @__PURE__ */ state(null);
-	let droppedGroupId = /* @__PURE__ */ state(null);
-	async function handleDrop(groupId, entryId) {
-		try {
-			await moveEntryToGroup(entryId, groupId);
-			set(droppedGroupId, groupId, true);
-			setTimeout(() => {
-				set(droppedGroupId, null);
-			}, 600);
-			await loadData();
-			search.refresh();
-		} catch (e) {}
-	}
-	function canDrop(groupId) {
-		return groupId !== search.activeGroupId && !isTrashGroup(groupId);
-	}
-	async function loadData() {
-		await ensureTrashGroup();
-		set(groups, await getGroups(), true);
-	}
-	user_effect(() => {
-		search.refreshTrigger;
-		loadData();
-	});
-	function openGroupForm(group = null) {
-		if (group) {
-			set(editingGroupId, group.id, true);
-			set(groupName, group.name, true);
-			set(groupColor, group.color || "#6c63ff", true);
-		} else {
-			set(editingGroupId, null);
-			set(groupName, "");
-			set(groupColor, GROUP_COLORS[Math.floor(Math.random() * GROUP_COLORS.length)], true);
+//#region src/components/Sidebar.js
+/**
+* Sidebar — group list + search bar + group management.
+*/
+var Sidebar = class extends Component {
+	groups = [];
+	showGroupForm = false;
+	editingGroupId = null;
+	groupName = "";
+	groupColor = "#6c63ff";
+	groupError = "";
+	showDeleteGroupConfirm = null;
+	dragOverGroupId = null;
+	droppedGroupId = null;
+	mount() {
+		super.mount();
+		this.subscribe(search, "refreshTrigger", () => this.#loadData());
+		this.subscribe(search, "activeGroupId", () => {
+			this.#renderGroups();
+			this.#updateTrashButton();
+		});
+		const nav = this.q(".groups-nav");
+		if (nav) {
+			this.on(nav, "click", (e) => {
+				const editBtn = e.target.closest(".group-action-btn[title=\"Edit group\"]");
+				if (editBtn) {
+					e.stopPropagation();
+					const groupId = editBtn.closest(".group-row")?.querySelector("[data-group-id]")?.dataset.groupId;
+					const group = this.groups.find((g) => g.id === groupId);
+					if (group) this.#openGroupForm(group);
+					return;
+				}
+				const delBtn = e.target.closest(".group-action-btn[title=\"Delete group\"]");
+				if (delBtn) {
+					e.stopPropagation();
+					const groupId = delBtn.closest(".group-row")?.querySelector("[data-group-id]")?.dataset.groupId;
+					if (groupId) {
+						this.showDeleteGroupConfirm = groupId;
+						this.#renderDeleteModal();
+					}
+					return;
+				}
+				const groupBtn = e.target.closest(".group-item[data-group-id]");
+				if (groupBtn) {
+					search.activeGroupId = groupBtn.dataset.groupId;
+					return;
+				}
+				if (e.target.closest("#all-entries-btn")) search.activeGroupId = "all";
+			});
+			this.on(nav, "dragover", (e) => {
+				const btn = e.target.closest(".group-item[data-group-id]");
+				if (btn) {
+					const gid = btn.dataset.groupId;
+					if (this.#canDrop(gid)) {
+						e.preventDefault();
+						e.dataTransfer.dropEffect = "move";
+						this.dragOverGroupId = gid;
+						btn.classList.add("drag-over");
+					}
+				}
+			});
+			this.on(nav, "dragleave", (e) => {
+				const btn = e.target.closest(".group-item[data-group-id]");
+				if (btn && this.dragOverGroupId === btn.dataset.groupId) {
+					this.dragOverGroupId = null;
+					btn.classList.remove("drag-over");
+				}
+			});
+			this.on(nav, "drop", (e) => {
+				e.preventDefault();
+				const btn = e.target.closest(".group-item[data-group-id]");
+				if (btn) {
+					btn.classList.remove("drag-over");
+					const gid = btn.dataset.groupId;
+					if (this.#canDrop(gid)) {
+						const entryId = e.dataTransfer.getData("text/plain");
+						if (entryId) this.#handleDrop(gid, entryId);
+					}
+				}
+				this.dragOverGroupId = null;
+			});
 		}
-		set(groupError, "");
-		set(showGroupForm, true);
+		this.#loadData();
+		return this;
 	}
-	async function saveGroup() {
-		set(groupError, "");
-		const validation = validateGroup(get(groupName));
+	render() {
+		this.el = this.ce("div", { className: "sidebar-content" }, this.ce("div", { className: "sidebar-header" }, this.ce("h2", { textContent: "🔐 Vault" })), this.ce("div", { className: "search-box" }, this.ce("input", {
+			id: "sidebar-search",
+			type: "text",
+			placeholder: "Search entries..."
+		})), this.ce("nav", { className: "groups-nav" }), this.ce("div", { className: "trash-section" }, this.ce("button", {
+			className: "group-item trash-btn",
+			id: "trash-btn"
+		}, this.ce("span", {
+			className: "group-color",
+			style: `background-color: ${TRASH_GROUP_COLOR}`
+		}), this.ce("span", {
+			className: "group-name",
+			textContent: TRASH_GROUP_NAME
+		}))), this.ce("div", { className: "sidebar-footer" }, this.ce("button", {
+			className: "btn btn-ghost btn-sm w-full",
+			id: "new-group-btn",
+			textContent: "+ New Group"
+		})));
+		const searchInput = this.q("#sidebar-search");
+		if (searchInput) this.on(searchInput, "input", (e) => search.setSearchQuery(e.target.value));
+		const trashBtn = this.q("#trash-btn");
+		if (trashBtn) this.on(trashBtn, "click", () => {
+			search.activeGroupId = "trash";
+		});
+		const newGroupBtn = this.q("#new-group-btn");
+		if (newGroupBtn) this.on(newGroupBtn, "click", () => this.#openGroupForm(null));
+		this.#renderGroups();
+		this.#updateTrashButton();
+		return this.el;
+	}
+	#renderGroups() {
+		const nav = this.q(".groups-nav");
+		if (!nav) return;
+		nav.innerHTML = "";
+		const allBtn = this.ce("button", {
+			className: `group-item${search.activeGroupId === "all" ? " active" : ""}`,
+			id: "all-entries-btn"
+		}, this.ce("span", {
+			className: "group-icon",
+			textContent: "📋"
+		}), this.ce("span", {
+			className: "group-name",
+			textContent: "All Entries"
+		}));
+		nav.appendChild(allBtn);
+		for (const group of this.groups) {
+			if (isTrashGroup(group.id)) continue;
+			const row = this.ce("div", { className: "group-row" });
+			const btn = this.ce("button", {
+				className: `group-item${search.activeGroupId === group.id ? " active" : ""}`,
+				"data-group-id": group.id
+			}, this.ce("span", {
+				className: "group-color",
+				style: `background-color: ${group.color || "#6c63ff"}`
+			}), this.ce("span", {
+				className: "group-name",
+				textContent: group.name
+			}), this.ce("span", {
+				className: "drop-icon",
+				textContent: "📥"
+			}));
+			row.appendChild(btn);
+			const actions = this.ce("div", { className: "group-actions" });
+			actions.appendChild(this.ce("button", {
+				className: "group-action-btn",
+				title: "Edit group",
+				textContent: "✏️"
+			}));
+			actions.appendChild(this.ce("button", {
+				className: "group-action-btn",
+				title: "Delete group",
+				textContent: "🗑"
+			}));
+			row.appendChild(actions);
+			nav.appendChild(row);
+		}
+	}
+	#renderDeleteModal() {
+		const existing = this.q(".sb-modal-overlay");
+		if (existing) existing.remove();
+		if (!this.showDeleteGroupConfirm) return;
+		const group = this.groups.find((g) => g.id === this.showDeleteGroupConfirm);
+		if (!group) return;
+		const overlay = this.ce("div", {
+			className: "sb-modal-overlay",
+			role: "presentation"
+		}, this.ce("div", {
+			className: "sb-modal",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Delete group confirmation",
+			tabindex: "-1"
+		}, this.ce("h3", { textContent: "Delete Group" }), this.ce("p", {}, this.text(`Delete "`), this.ce("strong", { textContent: group.name }), this.text(`"? Entries in this group will become ungrouped.`)), this.ce("div", { className: "sb-modal-actions" }, this.ce("button", {
+			className: "btn btn-danger",
+			id: "confirm-delete-group-btn",
+			textContent: "Yes, delete"
+		}), this.ce("button", {
+			className: "btn btn-ghost",
+			id: "cancel-delete-group-btn",
+			textContent: "Cancel"
+		}))));
+		this.el.appendChild(overlay);
+		this.on(overlay, "click", () => {
+			this.showDeleteGroupConfirm = null;
+			overlay.remove();
+		});
+		this.on(overlay.querySelector(".sb-modal"), "click", (e) => e.stopPropagation());
+		this.on(overlay.querySelector("#confirm-delete-group-btn"), "click", () => this.#confirmDeleteGroup(this.showDeleteGroupConfirm));
+		this.on(overlay.querySelector("#cancel-delete-group-btn"), "click", () => {
+			this.showDeleteGroupConfirm = null;
+			overlay.remove();
+		});
+	}
+	#renderGroupFormModal() {
+		const existing = this.q(".sb-modal-overlay");
+		if (existing) existing.remove();
+		if (!this.showGroupForm) return;
+		const overlay = this.ce("div", {
+			className: "sb-modal-overlay",
+			role: "presentation"
+		}, this.ce("div", {
+			className: "sb-modal",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Group settings",
+			tabindex: "-1"
+		}, this.ce("h3", { textContent: this.editingGroupId ? "Edit Group" : "New Group" }), this.groupError ? this.ce("div", {
+			className: "ie-error-banner",
+			textContent: this.groupError
+		}) : null, this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "group-name",
+			textContent: "Group Name"
+		}), this.ce("input", {
+			id: "group-name",
+			type: "text",
+			placeholder: "e.g. Work, Personal",
+			value: this.groupName
+		})), this.ce("div", { className: "form-group" }, this.ce("span", {
+			className: "field-label",
+			textContent: "Color"
+		}), this.#buildColorPicker()), this.ce("div", { className: "sb-modal-actions" }, this.ce("button", {
+			className: "btn btn-primary",
+			id: "save-group-btn",
+			textContent: this.editingGroupId ? "Update" : "Create"
+		}), this.ce("button", {
+			className: "btn btn-ghost",
+			id: "cancel-group-btn",
+			textContent: "Cancel"
+		}))));
+		this.el.appendChild(overlay);
+		this.on(overlay, "click", () => {
+			this.showGroupForm = false;
+			overlay.remove();
+		});
+		this.on(overlay.querySelector(".sb-modal"), "click", (e) => e.stopPropagation());
+		this.on(overlay.querySelector("#save-group-btn"), "click", () => this.#saveGroup());
+		this.on(overlay.querySelector("#cancel-group-btn"), "click", () => {
+			this.showGroupForm = false;
+			overlay.remove();
+		});
+		const nameInput = overlay.querySelector("#group-name");
+		if (nameInput) {
+			this.groupName = nameInput.value;
+			this.on(nameInput, "input", (e) => {
+				this.groupName = e.target.value;
+			});
+			if (!this.editingGroupId) autofocus(nameInput, true);
+		}
+	}
+	#buildColorPicker() {
+		const picker = this.ce("div", { className: "color-picker" });
+		for (const color of GROUP_COLORS) {
+			const swatch = this.ce("button", {
+				className: `color-swatch${this.groupColor === color ? " selected" : ""}`,
+				style: `background-color: ${color}`,
+				title: color,
+				type: "button"
+			});
+			const c = color;
+			this.on(swatch, "click", () => {
+				this.groupColor = c;
+				this.qa(".color-swatch").forEach((s) => s.classList.remove("selected"));
+				swatch.classList.add("selected");
+			});
+			picker.appendChild(swatch);
+		}
+		return picker;
+	}
+	#openGroupForm(group) {
+		if (group) {
+			this.editingGroupId = group.id;
+			this.groupName = group.name;
+			this.groupColor = group.color || "#6c63ff";
+		} else {
+			this.editingGroupId = null;
+			this.groupName = "";
+			this.groupColor = GROUP_COLORS[Math.floor(Math.random() * GROUP_COLORS.length)];
+		}
+		this.groupError = "";
+		this.showGroupForm = true;
+		this.#renderGroupFormModal();
+	}
+	async #saveGroup() {
+		this.groupError = "";
+		const nameInput = this.q("#group-name");
+		if (nameInput) this.groupName = nameInput.value;
+		const validation = validateGroup(this.groupName);
 		if (!validation.valid) {
-			set(groupError, validation.errors[0], true);
+			this.groupError = validation.errors[0];
+			this.#renderGroupFormModal();
 			return;
 		}
 		try {
-			if (get(editingGroupId)) await updateGroup({
-				...get(groups).find((g) => g.id === get(editingGroupId)),
-				name: get(groupName).trim(),
-				color: get(groupColor)
+			if (this.editingGroupId) await updateGroup({
+				...this.groups.find((g) => g.id === this.editingGroupId),
+				name: this.groupName.trim(),
+				color: this.groupColor
 			});
-			else await addGroup(createGroup(get(groupName), get(groupColor)));
-			set(showGroupForm, false);
-			await loadData();
+			else await addGroup(createGroup(this.groupName, this.groupColor));
+			this.showGroupForm = false;
+			const overlay = this.q(".sb-modal-overlay");
+			if (overlay) overlay.remove();
+			await this.#loadData();
 		} catch (e) {
-			set(groupError, "Failed to save group: " + e.message);
+			this.groupError = "Failed to save group: " + e.message;
+			this.#renderGroupFormModal();
 		}
 	}
-	async function confirmDeleteGroup(groupId) {
+	async #confirmDeleteGroup(groupId) {
 		try {
 			await deleteGroup(groupId);
 			if (search.activeGroupId === groupId) search.activeGroupId = "all";
-			set(showDeleteGroupConfirm, null);
-			await loadData();
+			this.showDeleteGroupConfirm = null;
+			const overlay = this.q(".sb-modal-overlay");
+			if (overlay) overlay.remove();
+			await this.#loadData();
 		} catch (e) {
-			set(groupError, "Failed to delete group: " + e.message);
+			this.groupError = "Failed to delete group: " + e.message;
 		}
 	}
-	var div = root$6();
-	var div_1 = sibling(child(div), 2);
-	var input = child(div_1);
-	remove_input_defaults(input);
-	reset(div_1);
-	var nav = sibling(div_1, 2);
-	var button = child(nav);
-	each(sibling(button, 2), 17, () => get(groups), index, ($$anchor, group) => {
-		var fragment = comment();
-		var node_1 = first_child(fragment);
-		var consequent = ($$anchor) => {
-			var div_2 = root_2$5();
-			var button_1 = child(div_2);
-			var span = child(button_1);
-			var span_1 = sibling(span, 2);
-			var text = child(span_1, true);
-			reset(span_1);
-			next(2);
-			reset(button_1);
-			var div_3 = sibling(button_1, 2);
-			var button_2 = child(div_3);
-			var button_3 = sibling(button_2, 2);
-			reset(div_3);
-			reset(div_2);
-			template_effect(() => {
-				set_class(button_1, 1, `group-item ${search.activeGroupId === get(group).id ? "active" : ""} ${get(dragOverGroupId) === get(group).id ? "drag-over" : ""} ${get(droppedGroupId) === get(group).id ? "dropped" : ""}`, "svelte-181dlmc");
-				set_style(span, `background-color: ${(get(group).color || "#6c63ff") ?? ""}`);
-				set_text(text, get(group).name);
-			});
-			delegated("click", button_1, () => search.activeGroupId = get(group).id);
-			event("dragover", button_1, (e) => {
-				if (canDrop(get(group).id)) {
-					e.preventDefault();
-					e.dataTransfer.dropEffect = "move";
-					set(dragOverGroupId, get(group).id, true);
-				}
-			});
-			event("dragleave", button_1, () => {
-				if (get(dragOverGroupId) === get(group).id) set(dragOverGroupId, null);
-			});
-			event("drop", button_1, (e) => {
-				e.preventDefault();
-				set(dragOverGroupId, null);
-				if (canDrop(get(group).id)) {
-					const entryId = e.dataTransfer.getData("text/plain");
-					if (entryId) handleDrop(get(group).id, entryId);
-				}
-			});
-			delegated("click", button_2, () => openGroupForm(get(group)));
-			delegated("click", button_3, () => set(showDeleteGroupConfirm, get(group).id, true));
-			append($$anchor, div_2);
-		};
-		var d = /* @__PURE__ */ user_derived(() => !isTrashGroup(get(group).id));
-		if_block(node_1, ($$render) => {
-			if (get(d)) $$render(consequent);
-		});
-		append($$anchor, fragment);
-	});
-	reset(nav);
-	var div_4 = sibling(nav, 2);
-	var button_4 = child(div_4);
-	var span_2 = child(button_4);
-	var span_3 = sibling(span_2, 2);
-	var text_1 = child(span_3, true);
-	reset(span_3);
-	reset(button_4);
-	reset(div_4);
-	var div_5 = sibling(div_4, 2);
-	var button_5 = child(div_5);
-	reset(div_5);
-	var node_2 = sibling(div_5, 2);
-	var consequent_2 = ($$anchor) => {
-		var div_6 = root_3$5();
-		var div_7 = child(div_6);
-		var h3 = child(div_7);
-		var text_2 = child(h3, true);
-		reset(h3);
-		var node_3 = sibling(h3, 2);
-		var consequent_1 = ($$anchor) => {
-			var div_8 = root_4$5();
-			var text_3 = child(div_8, true);
-			reset(div_8);
-			template_effect(() => set_text(text_3, get(groupError)));
-			append($$anchor, div_8);
-		};
-		if_block(node_3, ($$render) => {
-			if (get(groupError)) $$render(consequent_1);
-		});
-		var div_9 = sibling(node_3, 2);
-		var input_1 = sibling(child(div_9), 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_9);
-		var div_10 = sibling(div_9, 2);
-		var div_11 = sibling(child(div_10), 2);
-		each(div_11, 21, () => GROUP_COLORS, index, ($$anchor, color) => {
-			var button_6 = root_5$5();
-			template_effect(() => {
-				set_class(button_6, 1, `color-swatch ${get(groupColor) === get(color) ? "selected" : ""}`, "svelte-181dlmc");
-				set_style(button_6, `background-color: ${get(color) ?? ""}`);
-				set_attribute(button_6, "title", get(color));
-			});
-			delegated("click", button_6, () => set(groupColor, get(color), true));
-			append($$anchor, button_6);
-		});
-		reset(div_11);
-		reset(div_10);
-		var div_12 = sibling(div_10, 2);
-		var button_7 = child(div_12);
-		var text_4 = child(button_7, true);
-		reset(button_7);
-		var button_8 = sibling(button_7, 2);
-		reset(div_12);
-		reset(div_7);
-		reset(div_6);
-		template_effect(() => {
-			set_text(text_2, get(editingGroupId) ? "Edit Group" : "New Group");
-			set_text(text_4, get(editingGroupId) ? "Update" : "Create");
-		});
-		delegated("click", div_6, () => set(showGroupForm, false));
-		delegated("click", div_7, (e) => e.stopPropagation());
-		delegated("click", button_7, saveGroup);
-		delegated("click", button_8, () => set(showGroupForm, false));
-		append($$anchor, div_6);
-	};
-	if_block(node_2, ($$render) => {
-		if (get(showGroupForm)) $$render(consequent_2);
-	});
-	var node_4 = sibling(node_2, 2);
-	var consequent_3 = ($$anchor) => {
-		var div_13 = root_6$3();
-		var div_14 = child(div_13);
-		var p = sibling(child(div_14), 2);
-		var strong = sibling(child(p));
-		var text_5 = child(strong, true);
-		reset(strong);
-		next();
-		reset(p);
-		var div_15 = sibling(p, 2);
-		var button_9 = child(div_15);
-		var button_10 = sibling(button_9, 2);
-		reset(div_15);
-		reset(div_14);
-		reset(div_13);
-		template_effect(() => set_text(text_5, get(deletingGroup).name));
-		delegated("click", div_13, () => set(showDeleteGroupConfirm, null));
-		delegated("click", div_14, (e) => e.stopPropagation());
-		delegated("click", button_9, () => confirmDeleteGroup(get(deletingGroup).id));
-		delegated("click", button_10, () => set(showDeleteGroupConfirm, null));
-		append($$anchor, div_13);
-	};
-	if_block(node_4, ($$render) => {
-		if (get(deletingGroup)) $$render(consequent_3);
-	});
-	reset(div);
-	template_effect(() => {
-		set_value(input, search.query);
-		set_class(button, 1, `group-item ${search.activeGroupId === "all" ? "active" : ""}`, "svelte-181dlmc");
-		set_class(button_4, 1, `group-item ${search.activeGroupId === "trash" ? "active" : ""}`, "svelte-181dlmc");
-		set_style(span_2, `background-color: #e5484d`);
-		set_text(text_1, TRASH_GROUP_NAME);
-	});
-	delegated("input", input, (e) => search.setSearchQuery(e.target.value));
-	delegated("click", button, () => search.activeGroupId = "all");
-	delegated("click", button_4, () => search.activeGroupId = "trash");
-	delegated("click", button_5, () => openGroupForm(null));
-	append($$anchor, div);
-	pop();
-}
-delegate(["input", "click"]);
+	#updateTrashButton() {
+		const trashBtn = this.q("#trash-btn");
+		if (trashBtn) trashBtn.classList.toggle("active", search.activeGroupId === "trash");
+	}
+	async #handleDrop(groupId, entryId) {
+		try {
+			await moveEntryToGroup(entryId, groupId);
+			this.droppedGroupId = groupId;
+			const btn = this.q(`[data-group-id="${groupId}"]`);
+			if (btn) {
+				btn.classList.add("dropped");
+				setTimeout(() => btn.classList.remove("dropped"), 600);
+			}
+			await this.#loadData();
+			search.refresh();
+		} catch (e) {}
+	}
+	#canDrop(groupId) {
+		return groupId !== search.activeGroupId && !isTrashGroup(groupId);
+	}
+	async #loadData() {
+		await ensureTrashGroup();
+		this.groups = await getGroups();
+		this.#renderGroups();
+	}
+};
 //#endregion
-//#region src/components/EntryList.svelte
-var root_1$6 = /* @__PURE__ */ from_html(`<div class="loading svelte-13s7gu4">Loading entries...</div>`);
-var root_2$4 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-13s7gu4"> </div>`);
-var root_4$4 = /* @__PURE__ */ from_html(`<button class="btn btn-primary mt-3">+ New Entry</button>`);
-var root_3$4 = /* @__PURE__ */ from_html(`<div class="empty-state svelte-13s7gu4"><p class="empty-icon svelte-13s7gu4"> </p> <p class="empty-text svelte-13s7gu4"> </p> <p class="empty-hint svelte-13s7gu4"> </p> <!></div>`);
-var root_6$2 = /* @__PURE__ */ from_html(`matching "<strong> </strong>"`, 1);
-var root_7$4 = /* @__PURE__ */ from_html(`<th style="width: 60px" class="svelte-13s7gu4"></th>`);
-var root_9$1 = /* @__PURE__ */ from_html(`<span class="drag-handle svelte-13s7gu4" aria-hidden="true">⠿</span>`);
-var root_10$1 = /* @__PURE__ */ from_html(`<div class="notes-tooltip svelte-13s7gu4"><span class="notes-icon svelte-13s7gu4">🔍</span> <div class="tooltip-popup svelte-13s7gu4"> </div></div>`);
-var root_11$1 = /* @__PURE__ */ from_html(`<span>—</span>`);
-var root_12$1 = /* @__PURE__ */ from_html(`<td class="svelte-13s7gu4"><button class="btn btn-ghost btn-sm restore-btn svelte-13s7gu4" title="Restore entry">↩️</button></td>`);
-var root_8$3 = /* @__PURE__ */ from_html(`<tr><td class="svelte-13s7gu4"><!> <span class="entry-title svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><span class="entry-username svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><span class="entry-url truncate svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><!></td><!></tr>`);
-var root_5$4 = /* @__PURE__ */ from_html(`<div class="results-info svelte-13s7gu4"><span class="text-sm text-muted"> <!></span></div> <table class="entries-table svelte-13s7gu4"><thead><tr><th class="svelte-13s7gu4">Title</th><th class="svelte-13s7gu4">Username</th><th class="svelte-13s7gu4">URL</th><th class="svelte-13s7gu4">Notes</th><!></tr></thead><tbody></tbody></table>`, 1);
-var root$5 = /* @__PURE__ */ from_html(`<div class="entry-list"><!></div>`);
-function EntryList($$anchor, $$props) {
-	push($$props, true);
-	let entries = /* @__PURE__ */ state(proxy([]));
-	let loading = /* @__PURE__ */ state(true);
-	let error = /* @__PURE__ */ state("");
-	let resultCount = /* @__PURE__ */ state(0);
-	let dragging = /* @__PURE__ */ state(false);
-	const isTrashView = /* @__PURE__ */ user_derived(() => search.activeGroupId === "trash");
-	async function loadEntries() {
-		set(loading, true);
-		set(error, "");
+//#region src/components/EntryList.js
+/**
+* EntryList — credential entries grid with search/filter support.
+*/
+var EntryList = class extends Component {
+	entries = [];
+	loading = true;
+	error = "";
+	resultCount = 0;
+	dragging = false;
+	/** @param {{ onSelect: Function, onAdd: Function }} props */
+	constructor(container, props = {}) {
+		super(container);
+		this.onSelect = props.onSelect || (() => {});
+		this.onAdd = props.onAdd || (() => {});
+	}
+	mount() {
+		super.mount();
+		this.subscribe(search, "debouncedQuery", () => this.#loadEntries());
+		this.subscribe(search, "activeGroupId", () => this.#loadEntries());
+		this.subscribe(search, "refreshTrigger", () => this.#loadEntries());
+		this.#loadEntries();
+		return this;
+	}
+	render() {
+		this.el = this.ce("div", { className: "entry-list" });
+		this.#renderContent();
+		return this.el;
+	}
+	#renderContent() {
+		this.el.innerHTML = "";
+		const isTrashView = search.activeGroupId === "trash";
+		if (this.loading) {
+			this.el.appendChild(this.ce("div", {
+				className: "loading",
+				textContent: "Loading entries..."
+			}));
+			return;
+		}
+		if (this.error) {
+			this.el.appendChild(this.ce("div", {
+				className: "error-banner",
+				textContent: this.error
+			}));
+			return;
+		}
+		if (this.entries.length === 0) {
+			const emptyState = this.ce("div", { className: "empty-state" });
+			const icon = search.query ? "🔍" : isTrashView ? "🗑" : "🔑";
+			const text = search.query ? "No results found" : isTrashView ? "Trash is empty" : "No entries yet";
+			const hint = search.query ? "Try a different search term" : isTrashView ? "Deleted entries will appear here" : "Add your first login credential to get started";
+			emptyState.appendChild(this.ce("p", {
+				className: "empty-icon",
+				textContent: icon
+			}));
+			emptyState.appendChild(this.ce("p", {
+				className: "empty-text",
+				textContent: text
+			}));
+			emptyState.appendChild(this.ce("p", {
+				className: "empty-hint",
+				textContent: hint
+			}));
+			if (!search.query && !isTrashView) {
+				const addBtn = this.ce("button", {
+					className: "btn btn-primary mt-3",
+					textContent: "+ New Entry"
+				});
+				this.on(addBtn, "click", () => this.onAdd());
+				emptyState.appendChild(addBtn);
+			}
+			this.el.appendChild(emptyState);
+			return;
+		}
+		const info = this.ce("div", { className: "results-info" });
+		const countSpan = this.ce("span", { className: "text-sm text-muted" });
+		countSpan.appendChild(this.text(`${this.resultCount} entr${this.resultCount === 1 ? "y" : "ies"}`));
+		if (search.query) {
+			countSpan.appendChild(this.text(" matching \""));
+			const strong = document.createElement("strong");
+			strong.textContent = this.#escapeHtml(search.query);
+			countSpan.appendChild(strong);
+			countSpan.appendChild(this.text("\""));
+		}
+		info.appendChild(countSpan);
+		this.el.appendChild(info);
+		const table = this.ce("table", { className: "entries-table" }, this.ce("thead", null, this.ce("tr", null, this.ce("th", { textContent: "Title" }), this.ce("th", { textContent: "Username" }), this.ce("th", { textContent: "URL" }), this.ce("th", { textContent: "Notes" }), isTrashView ? this.ce("th", { style: "width: 60px" }) : null)), this.ce("tbody"));
+		const tbody = table.querySelector("tbody");
+		for (const entry of this.entries) {
+			const tr = this.ce("tr", {
+				className: `entry-row${this.dragging ? " dragging" : ""}`,
+				draggable: !isTrashView
+			});
+			const tdTitle = this.ce("td");
+			if (!isTrashView) tdTitle.appendChild(this.ce("span", {
+				className: "drag-handle",
+				"aria-hidden": "true",
+				textContent: "⠿"
+			}));
+			tdTitle.appendChild(this.ce("span", {
+				className: "entry-title",
+				textContent: entry.title
+			}));
+			tr.appendChild(tdTitle);
+			tr.appendChild(this.ce("td", null, this.ce("span", {
+				className: "entry-username",
+				textContent: entry.username || "—"
+			})));
+			tr.appendChild(this.ce("td", null, this.ce("span", {
+				className: "entry-url truncate",
+				textContent: entry.url || "—"
+			})));
+			const tdNotes = this.ce("td");
+			if (entry.notes) {
+				const tooltip = this.ce("div", { className: "notes-tooltip" }, this.ce("span", {
+					className: "notes-icon",
+					title: entry.notes,
+					textContent: "🔍"
+				}), this.ce("div", {
+					className: "tooltip-popup",
+					textContent: entry.notes
+				}));
+				tdNotes.appendChild(tooltip);
+			} else tdNotes.appendChild(this.ce("span", { textContent: "—" }));
+			tr.appendChild(tdNotes);
+			if (isTrashView) {
+				const tdRestore = this.ce("td");
+				const eid = entry.id;
+				const restoreBtn = this.ce("button", {
+					className: "btn btn-ghost btn-sm restore-btn",
+					title: "Restore entry",
+					textContent: "↩️"
+				});
+				this.on(restoreBtn, "click", (e) => {
+					e.stopPropagation();
+					this.#handleRestore(eid);
+				});
+				tdRestore.appendChild(restoreBtn);
+				tr.appendChild(tdRestore);
+			}
+			const eid = entry.id;
+			this.on(tr, "click", () => this.onSelect(eid));
+			if (!isTrashView) {
+				this.on(tr, "dragstart", (e) => {
+					this.dragging = true;
+					e.dataTransfer.setData("text/plain", eid);
+					e.dataTransfer.effectAllowed = "move";
+				});
+				this.on(tr, "dragend", () => {
+					this.dragging = false;
+				});
+			}
+			tbody.appendChild(tr);
+		}
+		this.el.appendChild(table);
+	}
+	async #loadEntries() {
+		this.loading = true;
+		this.error = "";
 		try {
 			const query = search.debouncedQuery.trim();
 			const groupId = search.activeGroupId;
 			const resolvedGroupId = groupId === "trash" ? TRASH_GROUP_ID : groupId;
-			if (query) set(entries, await searchEntries(query, resolvedGroupId !== "all" ? { groupId: resolvedGroupId } : {}), true);
-			else if (resolvedGroupId !== "all") set(entries, await getEntries({ groupId: resolvedGroupId }), true);
-			else set(entries, (await getEntries()).filter((e) => e.groupId !== TRASH_GROUP_ID), true);
-			set(resultCount, get(entries).length, true);
+			if (query) {
+				const options = resolvedGroupId !== "all" ? { groupId: resolvedGroupId } : {};
+				this.entries = await searchEntries(query, options);
+			} else if (resolvedGroupId !== "all") this.entries = await getEntries({ groupId: resolvedGroupId });
+			else this.entries = (await getEntries()).filter((e) => e.groupId !== TRASH_GROUP_ID);
+			this.resultCount = this.entries.length;
 		} catch (e) {
-			set(error, "Failed to load entries: " + e.message);
+			this.error = "Failed to load entries: " + e.message;
 		}
-		set(loading, false);
+		this.loading = false;
+		this.#renderContent();
 	}
-	async function handleRestore(entryId) {
+	async #handleRestore(entryId) {
 		try {
 			await restoreEntry(entryId);
 			search.refresh();
 		} catch (e) {
-			set(error, "Failed to restore: " + e.message);
+			this.error = "Failed to restore: " + e.message;
+			this.#renderContent();
 		}
 	}
-	user_effect(() => {
-		search.debouncedQuery;
-		search.activeGroupId;
-		search.refreshTrigger;
-		loadEntries();
-	});
-	var div = root$5();
-	var node = child(div);
-	var consequent = ($$anchor) => {
-		append($$anchor, root_1$6());
-	};
-	var consequent_1 = ($$anchor) => {
-		var div_2 = root_2$4();
-		var text = child(div_2, true);
-		reset(div_2);
-		template_effect(() => set_text(text, get(error)));
-		append($$anchor, div_2);
-	};
-	var consequent_3 = ($$anchor) => {
-		var div_3 = root_3$4();
-		var p = child(div_3);
-		var text_1 = child(p, true);
-		reset(p);
-		var p_1 = sibling(p, 2);
-		var text_2 = child(p_1, true);
-		reset(p_1);
-		var p_2 = sibling(p_1, 2);
-		var text_3 = child(p_2, true);
-		reset(p_2);
-		var node_1 = sibling(p_2, 2);
-		var consequent_2 = ($$anchor) => {
-			var button = root_4$4();
-			delegated("click", button, function(...$$args) {
-				$$props.onAdd?.apply(this, $$args);
-			});
-			append($$anchor, button);
-		};
-		if_block(node_1, ($$render) => {
-			if (!search.query && !get(isTrashView)) $$render(consequent_2);
-		});
-		reset(div_3);
-		template_effect(() => {
-			set_text(text_1, search.query ? "🔍" : get(isTrashView) ? "🗑" : "🔑");
-			set_text(text_2, search.query ? "No results found" : get(isTrashView) ? "Trash is empty" : "No entries yet");
-			set_text(text_3, search.query ? "Try a different search term" : get(isTrashView) ? "Deleted entries will appear here" : "Add your first login credential to get started");
-		});
-		append($$anchor, div_3);
-	};
-	var alternate_1 = ($$anchor) => {
-		var fragment = root_5$4();
-		var div_4 = first_child(fragment);
-		var span = child(div_4);
-		var text_4 = child(span);
-		var node_2 = sibling(text_4);
-		var consequent_4 = ($$anchor) => {
-			var fragment_1 = root_6$2();
-			var strong = sibling(first_child(fragment_1));
-			var text_5 = child(strong, true);
-			reset(strong);
-			next();
-			template_effect(() => set_text(text_5, search.query));
-			append($$anchor, fragment_1);
-		};
-		if_block(node_2, ($$render) => {
-			if (search.query) $$render(consequent_4);
-		});
-		reset(span);
-		reset(div_4);
-		var table = sibling(div_4, 2);
-		var thead = child(table);
-		var tr = child(thead);
-		var node_3 = sibling(child(tr), 4);
-		var consequent_5 = ($$anchor) => {
-			append($$anchor, root_7$4());
-		};
-		if_block(node_3, ($$render) => {
-			if (get(isTrashView)) $$render(consequent_5);
-		});
-		reset(tr);
-		reset(thead);
-		var tbody = sibling(thead);
-		each(tbody, 21, () => get(entries), (entry) => entry.id, ($$anchor, entry) => {
-			var tr_1 = root_8$3();
-			var td = child(tr_1);
-			var node_4 = child(td);
-			var consequent_6 = ($$anchor) => {
-				append($$anchor, root_9$1());
-			};
-			if_block(node_4, ($$render) => {
-				if (!get(isTrashView)) $$render(consequent_6);
-			});
-			var span_2 = sibling(node_4, 2);
-			var text_6 = child(span_2, true);
-			reset(span_2);
-			reset(td);
-			var td_1 = sibling(td);
-			var span_3 = child(td_1);
-			var text_7 = child(span_3, true);
-			reset(span_3);
-			reset(td_1);
-			var td_2 = sibling(td_1);
-			var span_4 = child(td_2);
-			var text_8 = child(span_4, true);
-			reset(span_4);
-			reset(td_2);
-			var td_3 = sibling(td_2);
-			var node_5 = child(td_3);
-			var consequent_7 = ($$anchor) => {
-				var div_5 = root_10$1();
-				var span_5 = child(div_5);
-				var div_6 = sibling(span_5, 2);
-				var text_9 = child(div_6, true);
-				reset(div_6);
-				reset(div_5);
-				template_effect(() => {
-					set_attribute(span_5, "title", get(entry).notes);
-					set_text(text_9, get(entry).notes);
-				});
-				append($$anchor, div_5);
-			};
-			var alternate = ($$anchor) => {
-				append($$anchor, root_11$1());
-			};
-			if_block(node_5, ($$render) => {
-				if (get(entry).notes) $$render(consequent_7);
-				else $$render(alternate, -1);
-			});
-			reset(td_3);
-			var node_6 = sibling(td_3);
-			var consequent_8 = ($$anchor) => {
-				var td_4 = root_12$1();
-				var button_1 = child(td_4);
-				reset(td_4);
-				delegated("click", button_1, (e) => {
-					e.stopPropagation();
-					handleRestore(get(entry).id);
-				});
-				append($$anchor, td_4);
-			};
-			if_block(node_6, ($$render) => {
-				if (get(isTrashView)) $$render(consequent_8);
-			});
-			reset(tr_1);
-			template_effect(() => {
-				set_attribute(tr_1, "draggable", !get(isTrashView));
-				set_class(tr_1, 1, `entry-row ${get(dragging) ? "dragging" : ""}`, "svelte-13s7gu4");
-				set_text(text_6, get(entry).title);
-				set_text(text_7, get(entry).username || "—");
-				set_text(text_8, get(entry).url || "—");
-			});
-			delegated("click", tr_1, () => $$props.onSelect(get(entry).id));
-			event("dragstart", tr_1, (e) => {
-				if (!get(isTrashView)) {
-					set(dragging, true);
-					e.dataTransfer.setData("text/plain", get(entry).id);
-					e.dataTransfer.effectAllowed = "move";
-				}
-			});
-			event("dragend", tr_1, () => {
-				set(dragging, false);
-			});
-			append($$anchor, tr_1);
-		});
-		reset(tbody);
-		reset(table);
-		template_effect(() => set_text(text_4, `${get(resultCount) ?? ""} entr${get(resultCount) === 1 ? "y" : "ies"} `));
-		append($$anchor, fragment);
-	};
-	if_block(node, ($$render) => {
-		if (get(loading)) $$render(consequent);
-		else if (get(error)) $$render(consequent_1, 1);
-		else if (get(entries).length === 0) $$render(consequent_3, 2);
-		else $$render(alternate_1, -1);
-	});
-	reset(div);
-	append($$anchor, div);
-	pop();
-}
-delegate(["click"]);
+	#escapeHtml(str) {
+		const div = document.createElement("div");
+		div.textContent = str;
+		return div.innerHTML;
+	}
+};
 //#endregion
-//#region src/components/EntryDetail.svelte
-var root_1$5 = /* @__PURE__ */ from_html(`<div class="toast svelte-dssgjx"> </div>`);
-var root_2$3 = /* @__PURE__ */ from_html(`<div class="loading svelte-dssgjx">Loading...</div>`);
-var root_3$3 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-dssgjx"> </div>`);
-var root_4$3 = /* @__PURE__ */ from_html(`<div class="empty-state svelte-dssgjx">Entry not found</div>`);
-var root_6$1 = /* @__PURE__ */ from_html(`<button class="btn btn-primary btn-sm">↩️ Restore</button> <button class="btn btn-danger btn-sm">🗑 Delete Forever</button>`, 1);
-var root_7$3 = /* @__PURE__ */ from_html(`<button class="btn btn-ghost btn-sm">✏️ Edit</button> <button class="btn btn-danger btn-sm">🗑 Move to Trash</button>`, 1);
-var root_8$2 = /* @__PURE__ */ from_html(`<div class="detail-field"><span class="field-label svelte-dssgjx">Username</span> <div class="field-value svelte-dssgjx"><span> </span> <button class="btn btn-ghost btn-sm copy-btn svelte-dssgjx" title="Copy username">📋</button></div></div>`);
-var root_9 = /* @__PURE__ */ from_html(`<div class="detail-field"><span class="field-label svelte-dssgjx">URL</span> <div class="field-value svelte-dssgjx"><a target="_blank" rel="noopener noreferrer" class="svelte-dssgjx"> </a> <button class="btn btn-ghost btn-sm copy-btn svelte-dssgjx" title="Copy URL">📋</button></div></div>`);
-var root_10 = /* @__PURE__ */ from_html(`<div class="detail-field"><span class="field-label svelte-dssgjx">Notes</span> <div class="field-value notes svelte-dssgjx"> </div></div>`);
-var root_11 = /* @__PURE__ */ from_html(`<div class="modal-overlay svelte-dssgjx" role="presentation"><div class="modal svelte-dssgjx" role="dialog" aria-modal="true" aria-label="Move to trash confirmation" tabindex="-1"><h3 class="svelte-dssgjx">Move to Trash</h3> <p class="svelte-dssgjx">Move "<strong> </strong>" to the trash? You can restore it later.</p> <div class="modal-actions svelte-dssgjx"><button class="btn btn-danger"> </button> <button class="btn btn-ghost">Cancel</button></div></div></div>`);
-var root_12 = /* @__PURE__ */ from_html(`<div class="modal-overlay svelte-dssgjx" role="presentation"><div class="modal svelte-dssgjx" role="dialog" aria-modal="true" aria-label="Permanent delete confirmation" tabindex="-1"><h3 class="svelte-dssgjx">Delete Forever</h3> <p class="svelte-dssgjx">Permanently delete "<strong> </strong>"? This cannot be undone.</p> <div class="modal-actions svelte-dssgjx"><button class="btn btn-danger"> </button> <button class="btn btn-ghost">Cancel</button></div></div></div>`);
-var root_5$3 = /* @__PURE__ */ from_html(`<div class="detail-card svelte-dssgjx"><div class="detail-header svelte-dssgjx"><h2 class="svelte-dssgjx"> </h2> <div class="header-actions svelte-dssgjx"><!></div></div> <div class="detail-fields svelte-dssgjx"><!> <div class="detail-field"><span class="field-label svelte-dssgjx">Password</span> <div class="field-value svelte-dssgjx"><span> </span> <button class="btn btn-ghost btn-sm" title="Toggle visibility"> </button> <button class="btn btn-ghost btn-sm copy-btn svelte-dssgjx" title="Copy password">📋</button></div></div> <!> <!></div> <div class="detail-meta svelte-dssgjx"><span class="text-xs text-muted"> </span> <span class="text-xs text-muted"> </span></div></div> <!> <!>`, 1);
-var root$4 = /* @__PURE__ */ from_html(`<div class="entry-detail"><!> <!></div>`);
-function EntryDetail($$anchor, $$props) {
-	push($$props, true);
-	let entry = /* @__PURE__ */ state(null);
-	let passwordVisible = /* @__PURE__ */ state(false);
-	let decryptedPassword = /* @__PURE__ */ state("");
-	let loading = /* @__PURE__ */ state(true);
-	let error = /* @__PURE__ */ state("");
-	let showDeleteConfirm = /* @__PURE__ */ state(false);
-	let showPermanentDeleteConfirm = /* @__PURE__ */ state(false);
-	let deleting = /* @__PURE__ */ state(false);
-	let toast = /* @__PURE__ */ state("");
-	const isInTrash = /* @__PURE__ */ user_derived(() => get(entry) && isTrashGroup(get(entry).groupId));
-	let toastTimer = null;
-	async function loadEntry() {
-		set(loading, true);
-		set(error, "");
-		try {
-			set(entry, await getEntryById($$props.entryId), true);
-			if (get(entry) && app$1.encryptionKey) set(decryptedPassword, await decrypt(get(entry).encryptedPassword, app$1.encryptionKey), true);
-		} catch (e) {
-			set(error, "Failed to load entry: " + e.message);
-		}
-		set(loading, false);
+//#region src/components/EntryDetail.js
+/**
+* EntryDetail — view single entry with copy-to-clipboard, trash, and permanent delete.
+*/
+var EntryDetail = class extends Component {
+	/** @param {{ entryId: string, onEdit: Function, onBack: Function }} props */
+	constructor(container, props = {}) {
+		super(container);
+		this.entryId = props.entryId;
+		this.onEdit = props.onEdit || (() => {});
+		this.onBack = props.onBack || (() => {});
+		this.entry = null;
+		this.passwordVisible = false;
+		this.decryptedPassword = "";
+		this.loading = true;
+		this.error = "";
+		this.showDeleteConfirm = false;
+		this.showPermanentDeleteConfirm = false;
+		this.deleting = false;
+		this.toast = "";
+		this.toastTimer = null;
 	}
-	loadEntry();
-	function showToast(message) {
-		set(toast, message, true);
-		if (toastTimer) clearTimeout(toastTimer);
-		toastTimer = setTimeout(() => {
-			set(toast, "");
+	mount() {
+		super.mount();
+		this.#loadEntry();
+		return this;
+	}
+	render() {
+		this.el = this.ce("div", { className: "entry-detail" });
+		this.#renderContent();
+		return this.el;
+	}
+	#renderContent() {
+		this.el.innerHTML = "";
+		if (this.toast) this.el.appendChild(this.ce("div", {
+			className: "toast",
+			textContent: this.toast
+		}));
+		if (this.loading) {
+			this.el.appendChild(this.ce("div", {
+				className: "loading",
+				textContent: "Loading..."
+			}));
+			return;
+		}
+		if (this.error) {
+			this.el.appendChild(this.ce("div", {
+				className: "error-banner",
+				textContent: this.error
+			}));
+			return;
+		}
+		if (!this.entry) {
+			this.el.appendChild(this.ce("div", {
+				className: "empty-state",
+				textContent: "Entry not found"
+			}));
+			return;
+		}
+		const isInTrash = isTrashGroup(this.entry.groupId);
+		const card = this.ce("div", { className: "detail-card" });
+		const header = this.ce("div", { className: "detail-header" }, this.ce("h2", { textContent: this.entry.title }), this.ce("div", { className: "header-actions" }, isInTrash ? this.ce("button", {
+			className: "btn btn-primary btn-sm",
+			id: "restore-btn",
+			textContent: "↩️ Restore"
+		}) : this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "edit-btn",
+			textContent: "✏️ Edit"
+		}), isInTrash ? this.ce("button", {
+			className: "btn btn-danger btn-sm",
+			id: "perm-delete-btn",
+			textContent: "🗑 Delete Forever"
+		}) : this.ce("button", {
+			className: "btn btn-danger btn-sm",
+			id: "trash-btn",
+			textContent: "🗑 Move to Trash"
+		})));
+		card.appendChild(header);
+		const fields = this.ce("div", { className: "detail-fields" });
+		if (this.entry.username) fields.appendChild(this.ce("div", { className: "detail-field" }, this.ce("span", {
+			className: "field-label",
+			textContent: "Username"
+		}), this.ce("div", { className: "field-value" }, this.ce("span", { textContent: this.entry.username }), this.ce("button", {
+			className: "btn btn-ghost btn-sm copy-btn",
+			textContent: "📋",
+			title: "Copy username",
+			"data-copy": this.entry.username
+		}))));
+		fields.appendChild(this.ce("div", { className: "detail-field" }, this.ce("span", {
+			className: "field-label",
+			textContent: "Password"
+		}), this.ce("div", { className: "field-value" }, this.ce("span", {
+			id: "pwd-display",
+			textContent: this.passwordVisible ? this.decryptedPassword : "••••••••••••"
+		}), this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "toggle-pwd",
+			textContent: this.passwordVisible ? "🙈" : "👁",
+			title: "Toggle visibility"
+		}), this.ce("button", {
+			className: "btn btn-ghost btn-sm copy-btn",
+			textContent: "📋",
+			title: "Copy password",
+			"data-copy": this.decryptedPassword
+		}))));
+		if (this.entry.url) {
+			const urlField = this.ce("div", { className: "detail-field" }, this.ce("span", {
+				className: "field-label",
+				textContent: "URL"
+			}), this.ce("div", { className: "field-value" }, this.ce("a", {
+				href: this.entry.url,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				textContent: this.entry.url
+			}), this.ce("button", {
+				className: "btn btn-ghost btn-sm copy-btn",
+				textContent: "📋",
+				title: "Copy URL",
+				"data-copy": this.entry.url
+			})));
+			fields.appendChild(urlField);
+		}
+		if (this.entry.notes) fields.appendChild(this.ce("div", { className: "detail-field" }, this.ce("span", {
+			className: "field-label",
+			textContent: "Notes"
+		}), this.ce("div", {
+			className: "field-value notes",
+			textContent: this.entry.notes
+		})));
+		card.appendChild(fields);
+		card.appendChild(this.ce("div", { className: "detail-meta" }, this.ce("span", {
+			className: "text-xs text-muted",
+			textContent: `Created: ${new Date(this.entry.createdAt).toLocaleString()}`
+		}), this.ce("span", {
+			className: "text-xs text-muted",
+			textContent: `Updated: ${new Date(this.entry.updatedAt).toLocaleString()}`
+		})));
+		this.el.appendChild(card);
+		const editBtn = this.q("#edit-btn");
+		if (editBtn) this.on(editBtn, "click", () => this.onEdit(this.entry.id));
+		const restoreBtn = this.q("#restore-btn");
+		if (restoreBtn) this.on(restoreBtn, "click", () => this.onEdit(this.entry.id));
+		const trashBtn = this.q("#trash-btn");
+		if (trashBtn) this.on(trashBtn, "click", () => {
+			this.showDeleteConfirm = true;
+			this.#renderModal();
+		});
+		const permDeleteBtn = this.q("#perm-delete-btn");
+		if (permDeleteBtn) this.on(permDeleteBtn, "click", () => {
+			this.showPermanentDeleteConfirm = true;
+			this.#renderModal();
+		});
+		const togglePwd = this.q("#toggle-pwd");
+		if (togglePwd) this.on(togglePwd, "click", () => {
+			this.passwordVisible = !this.passwordVisible;
+			const display = this.q("#pwd-display");
+			if (display) display.textContent = this.passwordVisible ? this.decryptedPassword : "••••••••••••";
+			togglePwd.textContent = this.passwordVisible ? "🙈" : "👁";
+		});
+		this.qa("[data-copy]").forEach((btn) => {
+			this.on(btn, "click", () => {
+				const text = btn.dataset.copy;
+				this.#copyToClipboard(text, btn.title || "Text");
+			});
+		});
+	}
+	async #loadEntry() {
+		this.loading = true;
+		this.error = "";
+		try {
+			this.entry = await getEntryById(this.entryId);
+			if (this.entry && app$1.encryptionKey) this.decryptedPassword = await decrypt(this.entry.encryptedPassword, app$1.encryptionKey);
+		} catch (e) {
+			this.error = "Failed to load entry: " + e.message;
+		}
+		this.loading = false;
+		this.#renderContent();
+	}
+	#showToast(message) {
+		this.toast = message;
+		if (this.toastTimer) clearTimeout(this.toastTimer);
+		this.toastTimer = setTimeout(() => {
+			this.toast = "";
 		}, 3e3);
 	}
-	async function copyToClipboard(text, label) {
+	async #copyToClipboard(text, label) {
 		try {
 			await navigator.clipboard.writeText(text);
-			showToast(`✓ ${label} copied (auto-clear in 15s)`);
+			this.#showToast(`✓ ${label} copied (auto-clear in 15s)`);
 			setTimeout(async () => {
 				try {
 					await navigator.clipboard.writeText("");
 				} catch {}
 			}, 15e3);
-		} catch (e) {
+		} catch {
 			const textarea = document.createElement("textarea");
 			textarea.value = text;
 			textarea.style.position = "fixed";
@@ -6549,503 +2267,507 @@ function EntryDetail($$anchor, $$props) {
 			textarea.select();
 			document.execCommand("copy");
 			document.body.removeChild(textarea);
-			showToast(`✓ ${label} copied`);
+			this.#showToast(`✓ ${label} copied`);
 		}
 	}
-	async function handleMoveToTrash() {
-		set(deleting, true);
+	#renderModal() {
+		const existing = this.q(".ed-modal-overlay");
+		if (existing) existing.remove();
+		let title, message, actionId, actionLabel;
+		if (this.showDeleteConfirm) {
+			title = "Move to Trash";
+			message = `Move "${this.entry.title}" to the trash? You can restore it later.`;
+			actionId = "confirm-trash-btn";
+			actionLabel = this.deleting ? "Moving..." : "Move to Trash";
+		} else {
+			title = "Delete Forever";
+			message = `Permanently delete "${this.entry.title}"? This cannot be undone.`;
+			actionId = "confirm-perm-delete-btn";
+			actionLabel = this.deleting ? "Deleting..." : "Delete Forever";
+		}
+		const overlay = this.ce("div", {
+			className: "ed-modal-overlay",
+			role: "presentation"
+		}, this.ce("div", {
+			className: "ed-modal",
+			role: "dialog",
+			"aria-modal": "true",
+			tabindex: "-1"
+		}, this.ce("h3", { textContent: title }), this.ce("p", { textContent: message }), this.ce("div", { className: "ed-modal-actions" }, this.ce("button", {
+			className: "btn btn-danger",
+			id: actionId,
+			disabled: this.deleting,
+			textContent: actionLabel
+		}), this.ce("button", {
+			className: "btn btn-ghost",
+			id: "cancel-modal-btn",
+			textContent: "Cancel"
+		}))));
+		this.el.appendChild(overlay);
+		this.on(overlay, "click", () => {
+			this.showDeleteConfirm = false;
+			this.showPermanentDeleteConfirm = false;
+			overlay.remove();
+		});
+		this.on(overlay.querySelector(".ed-modal"), "click", (e) => e.stopPropagation());
+		const actionBtn = overlay.querySelector(`#${actionId}`);
+		if (actionBtn) if (this.showDeleteConfirm) this.on(actionBtn, "click", () => this.#handleMoveToTrash());
+		else this.on(actionBtn, "click", () => this.#handlePermanentDelete());
+		const cancelBtn = overlay.querySelector("#cancel-modal-btn");
+		if (cancelBtn) this.on(cancelBtn, "click", () => {
+			this.showDeleteConfirm = false;
+			this.showPermanentDeleteConfirm = false;
+			overlay.remove();
+		});
+	}
+	async #handleMoveToTrash() {
+		this.deleting = true;
 		try {
-			await moveToTrash($$props.entryId);
-			$$props.onBack();
+			await moveToTrash(this.entryId);
+			this.onBack();
 		} catch (e) {
-			set(error, "Failed to move to trash: " + e.message);
+			this.error = "Failed to move to trash: " + e.message;
 		}
-		set(deleting, false);
-		set(showDeleteConfirm, false);
+		this.deleting = false;
+		this.showDeleteConfirm = false;
 	}
-	async function handlePermanentDelete() {
-		set(deleting, true);
+	async #handlePermanentDelete() {
+		this.deleting = true;
 		try {
-			await deleteEntry($$props.entryId);
-			$$props.onBack();
+			await deleteEntry(this.entryId);
+			this.onBack();
 		} catch (e) {
-			set(error, "Failed to permanently delete: " + e.message);
+			this.error = "Failed to permanently delete: " + e.message;
 		}
-		set(deleting, false);
-		set(showPermanentDeleteConfirm, false);
+		this.deleting = false;
+		this.showPermanentDeleteConfirm = false;
 	}
-	var div = root$4();
-	var node = child(div);
-	var consequent = ($$anchor) => {
-		var div_1 = root_1$5();
-		var text_1 = child(div_1, true);
-		reset(div_1);
-		template_effect(() => set_text(text_1, get(toast)));
-		append($$anchor, div_1);
-	};
-	if_block(node, ($$render) => {
-		if (get(toast)) $$render(consequent);
-	});
-	var node_1 = sibling(node, 2);
-	var consequent_1 = ($$anchor) => {
-		append($$anchor, root_2$3());
-	};
-	var consequent_2 = ($$anchor) => {
-		var div_3 = root_3$3();
-		var text_2 = child(div_3, true);
-		reset(div_3);
-		template_effect(() => set_text(text_2, get(error)));
-		append($$anchor, div_3);
-	};
-	var consequent_3 = ($$anchor) => {
-		append($$anchor, root_4$3());
-	};
-	var alternate_1 = ($$anchor) => {
-		var fragment = root_5$3();
-		var div_5 = first_child(fragment);
-		var div_6 = child(div_5);
-		var h2 = child(div_6);
-		var text_3 = child(h2, true);
-		reset(h2);
-		var div_7 = sibling(h2, 2);
-		var node_2 = child(div_7);
-		var consequent_4 = ($$anchor) => {
-			var fragment_1 = root_6$1();
-			var button = first_child(fragment_1);
-			var button_1 = sibling(button, 2);
-			delegated("click", button, () => $$props.onEdit(get(entry).id));
-			delegated("click", button_1, () => set(showPermanentDeleteConfirm, true));
-			append($$anchor, fragment_1);
-		};
-		var alternate = ($$anchor) => {
-			var fragment_2 = root_7$3();
-			var button_2 = first_child(fragment_2);
-			var button_3 = sibling(button_2, 2);
-			delegated("click", button_2, () => $$props.onEdit(get(entry).id));
-			delegated("click", button_3, () => set(showDeleteConfirm, true));
-			append($$anchor, fragment_2);
-		};
-		if_block(node_2, ($$render) => {
-			if (get(isInTrash)) $$render(consequent_4);
-			else $$render(alternate, -1);
-		});
-		reset(div_7);
-		reset(div_6);
-		var div_8 = sibling(div_6, 2);
-		var node_3 = child(div_8);
-		var consequent_5 = ($$anchor) => {
-			var div_9 = root_8$2();
-			var div_10 = sibling(child(div_9), 2);
-			var span = child(div_10);
-			var text_4 = child(span, true);
-			reset(span);
-			var button_4 = sibling(span, 2);
-			reset(div_10);
-			reset(div_9);
-			template_effect(() => set_text(text_4, get(entry).username));
-			delegated("click", button_4, () => copyToClipboard(get(entry).username, "Username"));
-			append($$anchor, div_9);
-		};
-		if_block(node_3, ($$render) => {
-			if (get(entry).username) $$render(consequent_5);
-		});
-		var div_11 = sibling(node_3, 2);
-		var div_12 = sibling(child(div_11), 2);
-		var span_1 = child(div_12);
-		var text_5 = child(span_1, true);
-		reset(span_1);
-		var button_5 = sibling(span_1, 2);
-		var text_6 = child(button_5, true);
-		reset(button_5);
-		var button_6 = sibling(button_5, 2);
-		reset(div_12);
-		reset(div_11);
-		var node_4 = sibling(div_11, 2);
-		var consequent_6 = ($$anchor) => {
-			var div_13 = root_9();
-			var div_14 = sibling(child(div_13), 2);
-			var a = child(div_14);
-			var text_7 = child(a, true);
-			reset(a);
-			var button_7 = sibling(a, 2);
-			reset(div_14);
-			reset(div_13);
-			template_effect(() => {
-				set_attribute(a, "href", get(entry).url);
-				set_text(text_7, get(entry).url);
-			});
-			delegated("click", button_7, () => copyToClipboard(get(entry).url, "URL"));
-			append($$anchor, div_13);
-		};
-		if_block(node_4, ($$render) => {
-			if (get(entry).url) $$render(consequent_6);
-		});
-		var node_5 = sibling(node_4, 2);
-		var consequent_7 = ($$anchor) => {
-			var div_15 = root_10();
-			var div_16 = sibling(child(div_15), 2);
-			var text_8 = child(div_16, true);
-			reset(div_16);
-			reset(div_15);
-			template_effect(() => set_text(text_8, get(entry).notes));
-			append($$anchor, div_15);
-		};
-		if_block(node_5, ($$render) => {
-			if (get(entry).notes) $$render(consequent_7);
-		});
-		reset(div_8);
-		var div_17 = sibling(div_8, 2);
-		var span_2 = child(div_17);
-		var text_9 = child(span_2);
-		reset(span_2);
-		var span_3 = sibling(span_2, 2);
-		var text_10 = child(span_3);
-		reset(span_3);
-		reset(div_17);
-		reset(div_5);
-		var node_6 = sibling(div_5, 2);
-		var consequent_8 = ($$anchor) => {
-			var div_18 = root_11();
-			var div_19 = child(div_18);
-			var p = sibling(child(div_19), 2);
-			var strong = sibling(child(p));
-			var text_11 = child(strong, true);
-			reset(strong);
-			next();
-			reset(p);
-			var div_20 = sibling(p, 2);
-			var button_8 = child(div_20);
-			var text_12 = child(button_8, true);
-			reset(button_8);
-			var button_9 = sibling(button_8, 2);
-			reset(div_20);
-			reset(div_19);
-			reset(div_18);
-			template_effect(() => {
-				set_text(text_11, get(entry).title);
-				button_8.disabled = get(deleting);
-				set_text(text_12, get(deleting) ? "Moving..." : "Move to Trash");
-			});
-			delegated("click", div_18, () => set(showDeleteConfirm, false));
-			delegated("click", div_19, (e) => e.stopPropagation());
-			delegated("click", button_8, handleMoveToTrash);
-			delegated("click", button_9, () => set(showDeleteConfirm, false));
-			append($$anchor, div_18);
-		};
-		if_block(node_6, ($$render) => {
-			if (get(showDeleteConfirm)) $$render(consequent_8);
-		});
-		var node_7 = sibling(node_6, 2);
-		var consequent_9 = ($$anchor) => {
-			var div_21 = root_12();
-			var div_22 = child(div_21);
-			var p_1 = sibling(child(div_22), 2);
-			var strong_1 = sibling(child(p_1));
-			var text_13 = child(strong_1, true);
-			reset(strong_1);
-			next();
-			reset(p_1);
-			var div_23 = sibling(p_1, 2);
-			var button_10 = child(div_23);
-			var text_14 = child(button_10, true);
-			reset(button_10);
-			var button_11 = sibling(button_10, 2);
-			reset(div_23);
-			reset(div_22);
-			reset(div_21);
-			template_effect(() => {
-				set_text(text_13, get(entry).title);
-				button_10.disabled = get(deleting);
-				set_text(text_14, get(deleting) ? "Deleting..." : "Delete Forever");
-			});
-			delegated("click", div_21, () => set(showPermanentDeleteConfirm, false));
-			delegated("click", div_22, (e) => e.stopPropagation());
-			delegated("click", button_10, handlePermanentDelete);
-			delegated("click", button_11, () => set(showPermanentDeleteConfirm, false));
-			append($$anchor, div_21);
-		};
-		if_block(node_7, ($$render) => {
-			if (get(showPermanentDeleteConfirm)) $$render(consequent_9);
-		});
-		template_effect(($0, $1) => {
-			set_text(text_3, get(entry).title);
-			set_text(text_5, get(passwordVisible) ? get(decryptedPassword) : "••••••••••••");
-			set_text(text_6, get(passwordVisible) ? "🙈" : "👁");
-			set_text(text_9, `Created: ${$0 ?? ""}`);
-			set_text(text_10, `Updated: ${$1 ?? ""}`);
-		}, [() => new Date(get(entry).createdAt).toLocaleString(), () => new Date(get(entry).updatedAt).toLocaleString()]);
-		delegated("click", button_5, () => set(passwordVisible, !get(passwordVisible)));
-		delegated("click", button_6, () => copyToClipboard(get(decryptedPassword), "Password"));
-		append($$anchor, fragment);
-	};
-	if_block(node_1, ($$render) => {
-		if (get(loading)) $$render(consequent_1);
-		else if (get(error)) $$render(consequent_2, 1);
-		else if (!get(entry)) $$render(consequent_3, 2);
-		else $$render(alternate_1, -1);
-	});
-	reset(div);
-	append($$anchor, div);
-	pop();
-}
-delegate(["click"]);
+};
 //#endregion
-//#region src/components/EntryForm.svelte
-var root_1$4 = /* @__PURE__ */ from_html(`<div class="loading svelte-pafazm">Loading...</div>`);
-var root_3$2 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-pafazm"> </div>`);
-var root_5$2 = /* @__PURE__ */ from_html(`<div class="validation-error svelte-pafazm"> </div>`);
-var root_4$2 = /* @__PURE__ */ from_html(`<div class="validation-errors svelte-pafazm"></div>`);
-var root_7$2 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_2$2 = /* @__PURE__ */ from_html(`<!> <form class="form-card svelte-pafazm"><!> <div class="form-group"><label for="title">Title *</label> <input id="title" type="text" placeholder="e.g. GitHub, Gmail"/></div> <div class="form-group"><label for="username">Username / Email</label> <input id="username" type="text" placeholder="username or email"/></div> <div class="form-group"><label for="password">Password *</label> <div class="password-input-group svelte-pafazm"><input id="password" placeholder="Password" class="svelte-pafazm"/> <button type="button" class="btn btn-ghost btn-sm" title="Toggle visibility"> </button> <button type="button" class="btn btn-ghost btn-sm" title="Generate password">🎲</button></div></div> <div class="form-group"><label for="url">URL</label> <input id="url" type="url" placeholder="https://example.com"/></div> <div class="form-group"><label for="group">Group</label> <select id="group"><option>No group</option><!></select></div> <div class="form-group"><label for="notes">Notes</label> <textarea id="notes" placeholder="Any additional notes..."></textarea></div> <div class="form-actions svelte-pafazm"><button type="submit" class="btn btn-primary"> </button> <button type="button" class="btn btn-ghost">Cancel</button></div></form>`, 1);
-var root$3 = /* @__PURE__ */ from_html(`<div class="entry-form"><!></div>`);
-function EntryForm($$anchor, $$props) {
-	push($$props, true);
-	let title = /* @__PURE__ */ state("");
-	let username = /* @__PURE__ */ state("");
-	let password = /* @__PURE__ */ state("");
-	let url = /* @__PURE__ */ state("");
-	let notes = /* @__PURE__ */ state("");
-	let groupId = /* @__PURE__ */ state("");
-	let passwordVisible = /* @__PURE__ */ state(false);
-	let groups = /* @__PURE__ */ state(proxy([]));
-	let loading = /* @__PURE__ */ state(true);
-	let error = /* @__PURE__ */ state("");
-	let saving = /* @__PURE__ */ state(false);
-	let isEdit = /* @__PURE__ */ state(false);
-	let formErrors = /* @__PURE__ */ state(proxy([]));
-	async function loadForm() {
-		set(loading, true);
+//#region src/components/EntryForm.js
+/**
+* EntryForm — create/edit credential form.
+*/
+var EntryForm = class extends Component {
+	/** @param {{ entryId: string|null, onSave: Function, onCancel: Function }} props */
+	constructor(container, props = {}) {
+		super(container);
+		this.entryId = props.entryId || null;
+		this.onSave = props.onSave || (() => {});
+		this.onCancel = props.onCancel || (() => {});
+		this.title = "";
+		this.username = "";
+		this.password = "";
+		this.url = "";
+		this.notes = "";
+		this.groupId = "";
+		this.passwordVisible = false;
+		this.groups = [];
+		this.loading = true;
+		this.error = "";
+		this.saving = false;
+		this.isEdit = false;
+		this.formErrors = [];
+	}
+	mount() {
+		super.mount();
+		this.#loadForm();
+		return this;
+	}
+	render() {
+		this.el = this.ce("div", { className: "entry-form" });
+		this.#renderContent();
+		return this.el;
+	}
+	#renderContent() {
+		this.el.innerHTML = "";
+		if (this.loading) {
+			this.el.appendChild(this.ce("div", {
+				className: "loading",
+				textContent: "Loading..."
+			}));
+			return;
+		}
+		if (this.error && !this.isEdit) {
+			this.el.appendChild(this.ce("div", {
+				className: "error-banner",
+				textContent: this.error
+			}));
+			return;
+		}
+		const form = this.ce("form", {
+			className: "ef-form-card",
+			id: "entry-form"
+		});
+		if (this.formErrors.length > 0) {
+			const errDiv = this.ce("div", { className: "validation-errors" });
+			for (const err of this.formErrors) errDiv.appendChild(this.ce("div", {
+				className: "validation-error",
+				textContent: `⚠ ${err}`
+			}));
+			form.appendChild(errDiv);
+		}
+		form.appendChild(this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "title",
+			textContent: "Title *"
+		}), this.ce("input", {
+			id: "title",
+			type: "text",
+			placeholder: "e.g. GitHub, Gmail",
+			value: this.title
+		})));
+		form.appendChild(this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "username",
+			textContent: "Username / Email"
+		}), this.ce("input", {
+			id: "username",
+			type: "text",
+			placeholder: "username or email",
+			value: this.username
+		})));
+		const pwdGroup = this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "password",
+			textContent: "Password *"
+		}), this.ce("div", { className: "password-input-group" }, this.ce("input", {
+			id: "password",
+			type: this.passwordVisible ? "text" : "password",
+			placeholder: "Password",
+			value: this.password
+		}), this.ce("button", {
+			type: "button",
+			className: "btn btn-ghost btn-sm",
+			id: "toggle-pwd",
+			textContent: this.passwordVisible ? "🙈" : "👁",
+			title: "Toggle visibility"
+		}), this.ce("button", {
+			type: "button",
+			className: "btn btn-ghost btn-sm",
+			id: "generate-pwd",
+			textContent: "🎲",
+			title: "Generate password"
+		})));
+		form.appendChild(pwdGroup);
+		form.appendChild(this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "url",
+			textContent: "URL"
+		}), this.ce("input", {
+			id: "url",
+			type: "url",
+			placeholder: "https://example.com",
+			value: this.url
+		})));
+		const select = this.ce("select", { id: "group" });
+		const defaultOpt = this.ce("option", { value: "" }, this.text("No group"));
+		select.appendChild(defaultOpt);
+		for (const group of this.groups) {
+			if (isTrashGroup(group.id)) continue;
+			const opt = this.ce("option", { value: group.id }, this.text(group.name));
+			if (group.id === this.groupId) opt.selected = true;
+			select.appendChild(opt);
+		}
+		form.appendChild(this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "group",
+			textContent: "Group"
+		}), select));
+		form.appendChild(this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "notes",
+			textContent: "Notes"
+		}), this.ce("textarea", {
+			id: "notes",
+			placeholder: "Any additional notes..."
+		})));
+		form.appendChild(this.ce("div", { className: "ef-form-actions" }, this.ce("button", {
+			type: "submit",
+			className: "btn btn-primary",
+			disabled: this.saving,
+			textContent: this.saving ? "Saving..." : this.isEdit ? "💾 Update" : "➕ Create"
+		}), this.ce("button", {
+			type: "button",
+			className: "btn btn-ghost",
+			id: "cancel-btn",
+			textContent: "Cancel"
+		})));
+		this.el.appendChild(form);
+		const formEl = this.q("#entry-form");
+		if (formEl) this.on(formEl, "submit", this.#handleSubmit);
+		const cancelBtn = this.q("#cancel-btn");
+		if (cancelBtn) this.on(cancelBtn, "click", () => this.onCancel());
+		const togglePwd = this.q("#toggle-pwd");
+		if (togglePwd) this.on(togglePwd, "click", () => {
+			this.passwordVisible = !this.passwordVisible;
+			const pwdInput = this.q("#password");
+			if (pwdInput) pwdInput.type = this.passwordVisible ? "text" : "password";
+			togglePwd.textContent = this.passwordVisible ? "🙈" : "👁";
+		});
+		const generatePwd = this.q("#generate-pwd");
+		if (generatePwd) this.on(generatePwd, "click", () => {
+			this.password = generatePassword({ length: 16 });
+			const pwdInput = this.q("#password");
+			if (pwdInput) pwdInput.value = this.password;
+		});
+		const titleInput = this.q("#title");
+		if (titleInput) this.on(titleInput, "input", (e) => {
+			this.title = e.target.value;
+		});
+		const usernameInput = this.q("#username");
+		if (usernameInput) this.on(usernameInput, "input", (e) => {
+			this.username = e.target.value;
+		});
+		const pwdInput = this.q("#password");
+		if (pwdInput) this.on(pwdInput, "input", (e) => {
+			this.password = e.target.value;
+		});
+		const urlInput = this.q("#url");
+		if (urlInput) this.on(urlInput, "input", (e) => {
+			this.url = e.target.value;
+		});
+		const notesInput = this.q("#notes");
+		if (notesInput) this.on(notesInput, "input", (e) => {
+			this.notes = e.target.value;
+		});
+		const groupSelect = this.q("#group");
+		if (groupSelect) this.on(groupSelect, "change", (e) => {
+			this.groupId = e.target.value;
+		});
+		if (!this.isEdit && titleInput) autofocus(titleInput, true);
+	}
+	async #loadForm() {
+		this.loading = true;
 		try {
-			set(groups, await getGroups(), true);
-			if ($$props.entryId) {
-				set(isEdit, true);
-				const entry = await getEntryById($$props.entryId);
+			this.groups = await getGroups();
+			if (this.entryId) {
+				this.isEdit = true;
+				const entry = await getEntryById(this.entryId);
 				if (entry) {
-					set(title, entry.title, true);
-					set(username, entry.username, true);
-					set(password, await decrypt(entry.encryptedPassword, app$1.encryptionKey), true);
-					set(url, entry.url || "", true);
-					set(notes, entry.notes || "", true);
-					set(groupId, entry.groupId || "", true);
-				} else set(error, "Entry not found");
+					this.title = entry.title;
+					this.username = entry.username;
+					this.password = await decrypt(entry.encryptedPassword, app$1.encryptionKey);
+					this.url = entry.url || "";
+					this.notes = entry.notes || "";
+					this.groupId = entry.groupId || "";
+				} else this.error = "Entry not found";
 			} else {
 				const active = search.activeGroupId;
-				set(groupId, active !== "all" && active !== "trash" ? active : "", true);
+				this.groupId = active !== "all" && active !== "trash" ? active : "";
 			}
 		} catch (e) {
-			set(error, "Failed to load form: " + e.message);
+			this.error = "Failed to load form: " + e.message;
 		}
-		set(loading, false);
+		this.loading = false;
+		this.#renderContent();
 	}
-	loadForm();
-	async function handleSubmit() {
-		set(formErrors, [], true);
-		set(error, "");
-		set(saving, true);
+	#handleSubmit = async (e) => {
+		e.preventDefault();
+		this.formErrors = [];
+		this.error = "";
+		this.saving = true;
+		const titleInput = this.q("#title");
+		if (titleInput) this.title = titleInput.value;
+		const usernameInput = this.q("#username");
+		if (usernameInput) this.username = usernameInput.value;
+		const pwdInput = this.q("#password");
+		if (pwdInput) this.password = pwdInput.value;
+		const urlInput = this.q("#url");
+		if (urlInput) this.url = urlInput.value;
+		const notesInput = this.q("#notes");
+		if (notesInput) this.notes = notesInput.value;
+		const groupSelect = this.q("#group");
+		if (groupSelect) this.groupId = groupSelect.value;
 		try {
 			const validation = validateEntry({
-				title: get(title),
-				username: get(username),
-				encryptedPassword: get(password)
+				title: this.title,
+				username: this.username,
+				encryptedPassword: this.password
 			});
 			if (!validation.valid) {
-				set(formErrors, validation.errors, true);
-				set(saving, false);
+				this.formErrors = validation.errors;
+				this.saving = false;
+				this.#renderContent();
 				return;
 			}
-			const encryptedPassword = await encrypt(get(password), app$1.encryptionKey);
-			if (get(isEdit)) await updateEntry(updateEntry$1(await getEntryById($$props.entryId), {
-				title: get(title),
-				username: get(username),
+			const encryptedPassword = await encrypt(this.password, app$1.encryptionKey);
+			if (this.isEdit) await updateEntry(updateEntry$1(await getEntryById(this.entryId), {
+				title: this.title,
+				username: this.username,
 				encryptedPassword,
-				url: get(url),
-				notes: get(notes),
-				groupId: get(groupId)
+				url: this.url,
+				notes: this.notes,
+				groupId: this.groupId
 			}));
 			else await addEntry(createEntry({
-				title: get(title),
-				username: get(username),
+				title: this.title,
+				username: this.username,
 				encryptedPassword,
-				url: get(url),
-				notes: get(notes),
-				groupId: get(groupId)
+				url: this.url,
+				notes: this.notes,
+				groupId: this.groupId
 			}));
-			$$props.onSave();
+			this.onSave();
 		} catch (e) {
-			set(error, "Failed to save: " + e.message);
+			this.error = "Failed to save: " + e.message;
 		}
-		set(saving, false);
-	}
-	var div = root$3();
-	var node = child(div);
-	var consequent = ($$anchor) => {
-		append($$anchor, root_1$4());
+		this.saving = false;
+		this.#renderContent();
 	};
-	var alternate = ($$anchor) => {
-		var fragment = root_2$2();
-		var node_1 = first_child(fragment);
-		var consequent_1 = ($$anchor) => {
-			var div_2 = root_3$2();
-			var text = child(div_2, true);
-			reset(div_2);
-			template_effect(() => set_text(text, get(error)));
-			append($$anchor, div_2);
-		};
-		if_block(node_1, ($$render) => {
-			if (get(error)) $$render(consequent_1);
-		});
-		var form = sibling(node_1, 2);
-		var node_2 = child(form);
-		var consequent_2 = ($$anchor) => {
-			var div_3 = root_4$2();
-			each(div_3, 21, () => get(formErrors), index, ($$anchor, err) => {
-				var div_4 = root_5$2();
-				var text_1 = child(div_4);
-				reset(div_4);
-				template_effect(() => set_text(text_1, `⚠ ${get(err) ?? ""}`));
-				append($$anchor, div_4);
-			});
-			reset(div_3);
-			append($$anchor, div_3);
-		};
-		if_block(node_2, ($$render) => {
-			if (get(formErrors).length > 0) $$render(consequent_2);
-		});
-		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);
-		remove_input_defaults(input_1);
-		reset(div_6);
-		var div_7 = sibling(div_6, 2);
-		var div_8 = sibling(child(div_7), 2);
-		var input_2 = child(div_8);
-		remove_input_defaults(input_2);
-		var button = sibling(input_2, 2);
-		var text_2 = child(button, true);
-		reset(button);
-		var button_1 = sibling(button, 2);
-		reset(div_8);
-		reset(div_7);
-		var div_9 = sibling(div_7, 2);
-		var input_3 = sibling(child(div_9), 2);
-		remove_input_defaults(input_3);
-		reset(div_9);
-		var div_10 = sibling(div_9, 2);
-		var select = sibling(child(div_10), 2);
-		var option = child(select);
-		option.value = option.__value = "";
-		each(sibling(option), 17, () => get(groups), index, ($$anchor, group) => {
-			var fragment_1 = comment();
-			var node_4 = first_child(fragment_1);
-			var consequent_3 = ($$anchor) => {
-				var option_1 = root_7$2();
-				var text_3 = child(option_1, true);
-				reset(option_1);
-				var option_1_value = {};
-				template_effect(() => {
-					set_text(text_3, get(group).name);
-					if (option_1_value !== (option_1_value = get(group).id)) option_1.value = (option_1.__value = get(group).id) ?? "";
-				});
-				append($$anchor, option_1);
-			};
-			var d = /* @__PURE__ */ user_derived(() => !isTrashGroup(get(group).id));
-			if_block(node_4, ($$render) => {
-				if (get(d)) $$render(consequent_3);
-			});
-			append($$anchor, fragment_1);
-		});
-		reset(select);
-		reset(div_10);
-		var div_11 = sibling(div_10, 2);
-		var textarea = sibling(child(div_11), 2);
-		remove_textarea_child(textarea);
-		reset(div_11);
-		var div_12 = sibling(div_11, 2);
-		var button_2 = child(div_12);
-		var text_4 = child(button_2, true);
-		reset(button_2);
-		var button_3 = sibling(button_2, 2);
-		reset(div_12);
-		reset(form);
-		template_effect(() => {
-			set_attribute(input_2, "type", get(passwordVisible) ? "text" : "password");
-			set_text(text_2, get(passwordVisible) ? "🙈" : "👁");
-			button_2.disabled = get(saving);
-			set_text(text_4, get(saving) ? "Saving..." : get(isEdit) ? "💾 Update" : "➕ Create");
-		});
-		event("submit", form, (e) => {
-			e.preventDefault();
-			handleSubmit();
-		});
-		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)));
-		delegated("click", button_1, () => set(password, generatePassword({ length: 16 }), true));
-		bind_value(input_3, () => get(url), ($$value) => set(url, $$value));
-		bind_select_value(select, () => get(groupId), ($$value) => set(groupId, $$value));
-		bind_value(textarea, () => get(notes), ($$value) => set(notes, $$value));
-		delegated("click", button_3, function(...$$args) {
-			$$props.onCancel?.apply(this, $$args);
-		});
-		append($$anchor, fragment);
-	};
-	if_block(node, ($$render) => {
-		if (get(loading)) $$render(consequent);
-		else $$render(alternate, -1);
-	});
-	reset(div);
-	append($$anchor, div);
-	pop();
-}
-delegate(["click"]);
+};
 //#endregion
-//#region src/components/ImportExport.svelte
-var root_2$1 = /* @__PURE__ */ from_html(`<label class="checkbox-label group-checkbox svelte-17di1i9"><input type="checkbox" class="svelte-17di1i9"/> <span class="group-color-dot svelte-17di1i9"></span> <span class="group-name"> </span></label>`);
-var root_1$3 = /* @__PURE__ */ from_html(`<div class="modal-overlay svelte-17di1i9" role="presentation"><div class="modal svelte-17di1i9" role="dialog" aria-modal="true" aria-label="Export vault" tabindex="-1"><h3 class="svelte-17di1i9">Export Vault</h3> <p class="svelte-17di1i9">Select which groups to export. You'll need the source vault's master password when importing into another vault.</p> <div class="group-select-header svelte-17di1i9"><label class="checkbox-label svelte-17di1i9"><input type="checkbox" class="svelte-17di1i9"/> <span>Select all</span></label> <span class="entry-count svelte-17di1i9"> </span></div> <div class="group-select-list svelte-17di1i9"></div> <div class="modal-actions svelte-17di1i9"><button class="btn btn-primary"> </button> <button class="btn btn-ghost">Cancel</button></div></div></div>`);
-var root_4$1 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-17di1i9"> </div>`);
-var root_5$1 = /* @__PURE__ */ from_html(`<div class="success-banner svelte-17di1i9"> <!></div>`);
-var root_7$1 = /* @__PURE__ */ from_html(`<p class="svelte-17di1i9">File loaded. Enter the <strong>source vault's master password</strong> to decrypt and re-encrypt entries under your current vault.</p> <div class="form-group svelte-17di1i9"><label for="source-password" class="file-label svelte-17di1i9">Source vault password</label> <input id="source-password" type="password" placeholder="Enter source vault password" autocomplete="current-password" class="svelte-17di1i9"/></div> <div class="import-mode svelte-17di1i9"><label class="radio-label svelte-17di1i9"><input type="radio" name="importMode" class="svelte-17di1i9"/> <span class="svelte-17di1i9">Merge — add to existing data</span></label> <label class="radio-label svelte-17di1i9"><input type="radio" name="importMode" class="svelte-17di1i9"/> <span class="svelte-17di1i9">Replace — clear all existing data first</span></label></div> <div class="modal-actions svelte-17di1i9"><button class="btn btn-primary"> </button> <button class="btn btn-ghost">Cancel</button></div>`, 1);
-var root_8$1 = /* @__PURE__ */ from_html(`<p class="svelte-17di1i9">Select how to handle existing data:</p> <div class="import-mode svelte-17di1i9"><label class="radio-label svelte-17di1i9"><input type="radio" name="importMode" class="svelte-17di1i9"/> <span class="svelte-17di1i9">Merge — add to existing data</span></label> <label class="radio-label svelte-17di1i9"><input type="radio" name="importMode" class="svelte-17di1i9"/> <span class="svelte-17di1i9">Replace — clear all existing data first</span></label></div> <div class="form-group svelte-17di1i9"><label for="import-file" class="file-label svelte-17di1i9">Choose JSON file</label> <input id="import-file" type="file" accept=".json,application/json" class="svelte-17di1i9"/></div>`, 1);
-var root_3$1 = /* @__PURE__ */ from_html(`<div class="modal-overlay svelte-17di1i9" role="presentation"><div class="modal svelte-17di1i9" role="dialog" aria-modal="true" aria-label="Import vault data" tabindex="-1"><h3 class="svelte-17di1i9">Import Vault Data</h3> <!> <!> <div class="modal-actions svelte-17di1i9"><button class="btn btn-ghost">Close</button></div></div></div>`);
-var root$2 = /* @__PURE__ */ from_html(`<div class="import-export"><button class="btn btn-ghost btn-sm" title="Export">📤 Export</button> <button class="btn btn-ghost btn-sm" title="Import">📥 Import</button> <!> <!></div>`);
-function ImportExport($$anchor, $$props) {
-	push($$props, true);
-	const binding_group = [];
-	let showExport = /* @__PURE__ */ state(false);
-	async function openExportModal() {
-		set(allGroups, [{
+//#region src/components/ImportExport.js
+/**
+* ImportExport — export with group selection + import with source password.
+*/
+var ImportExport = class extends Component {
+	showExport = false;
+	showImport = false;
+	importMode = "merge";
+	importResult = null;
+	importError = "";
+	importing = false;
+	exporting = false;
+	sourcePassword = "";
+	parsedFileData = null;
+	allGroups = [];
+	allEntries = [];
+	selectedGroupIds = [];
+	get selectAll() {
+		return this.allGroups.length > 0 && this.allGroups.every((g) => this.selectedGroupIds.includes(g.id));
+	}
+	get exportEntryCount() {
+		return this.allEntries.filter((e) => this.selectedGroupIds.includes(e.groupId)).length;
+	}
+	mount() {
+		super.mount();
+		return this;
+	}
+	render() {
+		this.el = this.ce("div", { className: "import-export" }, this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "export-btn",
+			title: "Export",
+			textContent: "📤 Export"
+		}), this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "import-btn",
+			title: "Import",
+			textContent: "📥 Import"
+		}));
+		this.on(this.q("#export-btn"), "click", () => this.#openExportModal());
+		this.on(this.q("#import-btn"), "click", () => {
+			this.showImport = true;
+			this.#renderImportModal();
+		});
+		return this.el;
+	}
+	async #openExportModal() {
+		const groups = (await getGroups()).filter((g) => !isTrashGroup(g.id));
+		this.allGroups = [{
 			id: "",
 			name: "Ungrouped",
 			color: "#6b7280"
-		}, ...(await getGroups()).filter((g) => !isTrashGroup(g.id))], true);
-		set(allEntries, await getEntries(), true);
-		set(selectedGroupIds, get(allGroups).map((g) => g.id), true);
-		set(showExport, true);
+		}, ...groups];
+		this.allEntries = await getEntries();
+		this.selectedGroupIds = this.allGroups.map((g) => g.id);
+		this.showExport = true;
+		this.#renderExportModal();
 	}
-	let showImport = /* @__PURE__ */ state(false);
-	let importMode = /* @__PURE__ */ state("merge");
-	let importResult = /* @__PURE__ */ state(null);
-	let importError = /* @__PURE__ */ state("");
-	let importing = /* @__PURE__ */ state(false);
-	let exportData = /* @__PURE__ */ state(null);
-	let exporting = /* @__PURE__ */ state(false);
-	let sourcePassword = /* @__PURE__ */ state("");
-	let parsedFileData = /* @__PURE__ */ state(null);
-	let allGroups = /* @__PURE__ */ state(proxy([]));
-	let allEntries = /* @__PURE__ */ state(proxy([]));
-	let selectedGroupIds = /* @__PURE__ */ state(proxy([]));
-	let selectAll = /* @__PURE__ */ user_derived(() => get(allGroups).length > 0 && get(allGroups).every((g) => get(selectedGroupIds).includes(g.id)));
-	let exportEntryCount = /* @__PURE__ */ user_derived(() => get(allEntries).filter((e) => get(selectedGroupIds).includes(e.groupId)).length);
-	async function handleExport() {
-		set(exporting, true);
+	#renderExportModal() {
+		const existing = this.q(".ie-modal-overlay");
+		if (existing) existing.remove();
+		const overlay = this.ce("div", {
+			className: "ie-modal-overlay",
+			role: "presentation"
+		});
+		const modal = this.ce("div", {
+			className: "ie-modal",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Export vault",
+			tabindex: "-1"
+		});
+		modal.appendChild(this.ce("h3", { textContent: "Export Vault" }));
+		modal.appendChild(this.ce("p", { textContent: "Select which groups to export. You'll need the source vault's master password when importing into another vault." }));
+		const header = this.ce("div", { className: "group-select-header" }, this.ce("label", { className: "checkbox-label" }, this.ce("input", {
+			type: "checkbox",
+			id: "select-all-checkbox",
+			checked: this.selectAll
+		}), this.ce("span", { textContent: "Select all" })), this.ce("span", {
+			className: "entry-count",
+			id: "export-count",
+			textContent: `${this.exportEntryCount} entries`
+		}));
+		modal.appendChild(header);
+		const list = this.ce("div", { className: "group-select-list" });
+		for (const group of this.allGroups) {
+			const label = this.ce("label", { className: "checkbox-label group-checkbox" }, this.ce("input", {
+				type: "checkbox",
+				"data-group-id": group.id,
+				checked: this.selectedGroupIds.includes(group.id)
+			}), this.ce("span", {
+				className: "group-color-dot",
+				style: `background-color: ${group.color || "#6c63ff"}`
+			}), this.ce("span", {
+				className: "group-name",
+				textContent: group.name
+			}));
+			list.appendChild(label);
+		}
+		modal.appendChild(list);
+		const actions = this.ce("div", { className: "ie-modal-actions" }, this.ce("button", {
+			className: "btn btn-primary",
+			id: "do-export-btn",
+			disabled: this.exporting || this.selectedGroupIds.length === 0,
+			textContent: this.exporting ? "Exporting..." : "📤 Export JSON"
+		}), this.ce("button", {
+			className: "btn btn-ghost",
+			id: "cancel-export-btn",
+			textContent: "Cancel"
+		}));
+		modal.appendChild(actions);
+		overlay.appendChild(modal);
+		this.el.appendChild(overlay);
+		this.on(overlay, "click", () => {
+			this.showExport = false;
+			overlay.remove();
+		});
+		this.on(modal, "click", (e) => e.stopPropagation());
+		const selectAllCb = overlay.querySelector("#select-all-checkbox");
+		if (selectAllCb) this.on(selectAllCb, "change", () => this.#toggleSelectAll());
+		overlay.querySelectorAll(".group-select-list input[data-group-id]").forEach((cb) => {
+			this.on(cb, "change", () => {
+				const gid = cb.dataset.groupId;
+				this.#toggleGroup(gid);
+			});
+		});
+		const exportBtn = overlay.querySelector("#do-export-btn");
+		if (exportBtn) this.on(exportBtn, "click", () => this.#handleExport());
+		const cancelBtn = overlay.querySelector("#cancel-export-btn");
+		if (cancelBtn) this.on(cancelBtn, "click", () => {
+			this.showExport = false;
+			overlay.remove();
+		});
+	}
+	#toggleSelectAll() {
+		if (this.selectAll) this.selectedGroupIds = [];
+		else this.selectedGroupIds = this.allGroups.map((g) => g.id);
+		this.#renderExportModal();
+	}
+	#toggleGroup(groupId) {
+		if (this.selectedGroupIds.includes(groupId)) this.selectedGroupIds = this.selectedGroupIds.filter((id) => id !== groupId);
+		else this.selectedGroupIds = [...this.selectedGroupIds, groupId];
+		const overlay = this.q(".ie-modal-overlay");
+		if (overlay) {
+			const selectAllCb = overlay.querySelector("#select-all-checkbox");
+			if (selectAllCb) selectAllCb.checked = this.selectAll;
+			const countEl = overlay.querySelector("#export-count");
+			if (countEl) countEl.textContent = `${this.exportEntryCount} entries`;
+			const exportBtn = overlay.querySelector("#do-export-btn");
+			if (exportBtn) exportBtn.disabled = this.exporting || this.selectedGroupIds.length === 0;
+		}
+	}
+	async #handleExport() {
+		this.exporting = true;
 		try {
-			set(exportData, await exportSelected(get(selectedGroupIds).length === get(allGroups).length ? null : get(selectedGroupIds)), true);
-			const json = JSON.stringify(get(exportData), null, 2);
+			const exportData = await exportSelected(this.selectedGroupIds.length === this.allGroups.length ? null : this.selectedGroupIds);
+			const json = JSON.stringify(exportData, null, 2);
 			const blob = new Blob([json], { type: "application/json" });
 			const url = URL.createObjectURL(blob);
 			const a = document.createElement("a");
@@ -7053,579 +2775,645 @@ function ImportExport($$anchor, $$props) {
 			a.download = `password-vault-export-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.json`;
 			a.click();
 			URL.revokeObjectURL(url);
-			set(showExport, false);
+			this.showExport = false;
 		} catch (e) {
-			set(importError, "Export failed: " + e.message);
+			this.importError = "Export failed: " + e.message;
 		}
-		set(exporting, false);
+		this.exporting = false;
 	}
-	function toggleSelectAll() {
-		if (get(selectAll)) set(selectedGroupIds, [], true);
-		else set(selectedGroupIds, get(allGroups).map((g) => g.id), true);
+	#renderImportModal() {
+		const existing = this.q(".ie-modal-overlay");
+		if (existing) existing.remove();
+		const overlay = this.ce("div", {
+			className: "ie-modal-overlay",
+			role: "presentation"
+		});
+		const modal = this.ce("div", {
+			className: "ie-modal",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Import vault data",
+			tabindex: "-1"
+		});
+		modal.appendChild(this.ce("h3", { textContent: "Import Vault Data" }));
+		if (this.importError) modal.appendChild(this.ce("div", {
+			className: "ie-error-banner",
+			textContent: this.importError
+		}));
+		if (this.importResult) {
+			const msg = `✓ Imported ${this.importResult.imported.entries} entries and ${this.importResult.imported.groups} groups` + (this.importResult.skipped > 0 ? ` (${this.importResult.skipped} skipped)` : "");
+			modal.appendChild(this.ce("div", {
+				className: "success-banner",
+				textContent: msg
+			}));
+		} else if (this.parsedFileData) {
+			modal.appendChild(this.ce("p", {}, this.text("File loaded. Enter the "), this.ce("strong", { textContent: "source vault's master password" }), this.text(" to decrypt and re-encrypt entries under your current vault.")));
+			modal.appendChild(this.ce("div", { className: "form-group" }, this.ce("label", {
+				htmlFor: "source-password",
+				className: "file-label",
+				textContent: "Source vault password"
+			}), this.ce("input", {
+				id: "source-password",
+				type: "password",
+				placeholder: "Enter source vault password",
+				autocomplete: "current-password",
+				value: this.sourcePassword
+			})));
+			const modeDiv = this.ce("div", { className: "import-mode" });
+			const mergeRadio = this.ce("label", { className: "radio-label" }, this.ce("input", {
+				type: "radio",
+				name: "importMode",
+				value: "merge",
+				checked: this.importMode === "merge"
+			}), this.ce("span", { textContent: "Merge — add to existing data" }));
+			const replaceRadio = this.ce("label", { className: "radio-label" }, this.ce("input", {
+				type: "radio",
+				name: "importMode",
+				value: "replace",
+				checked: this.importMode === "replace"
+			}), this.ce("span", { textContent: "Replace — clear all existing data first" }));
+			modeDiv.appendChild(mergeRadio);
+			modeDiv.appendChild(replaceRadio);
+			modal.appendChild(modeDiv);
+			const actions = this.ce("div", { className: "ie-modal-actions" }, this.ce("button", {
+				className: "btn btn-primary",
+				id: "do-import-btn",
+				disabled: this.importing,
+				textContent: this.importing ? "Importing..." : "📥 Import"
+			}), this.ce("button", {
+				className: "btn btn-ghost",
+				id: "cancel-import-btn",
+				textContent: "Cancel"
+			}));
+			modal.appendChild(actions);
+			overlay.appendChild(modal);
+			this.el.appendChild(overlay);
+			this.on(overlay, "click", () => {
+				this.showImport = false;
+				overlay.remove();
+			});
+			this.on(modal, "click", (e) => e.stopPropagation());
+			const srcPwdInput = overlay.querySelector("#source-password");
+			if (srcPwdInput) this.on(srcPwdInput, "input", (e) => {
+				this.sourcePassword = e.target.value;
+			});
+			overlay.querySelectorAll("input[name=\"importMode\"]").forEach((radio) => {
+				this.on(radio, "change", (e) => {
+					this.importMode = e.target.value;
+				});
+			});
+			const importBtn = overlay.querySelector("#do-import-btn");
+			if (importBtn) this.on(importBtn, "click", () => this.#handleImportSubmit());
+			const cancelBtn = overlay.querySelector("#cancel-import-btn");
+			if (cancelBtn) this.on(cancelBtn, "click", () => {
+				this.parsedFileData = null;
+				this.sourcePassword = "";
+				overlay.remove();
+			});
+		} else {
+			modal.appendChild(this.ce("p", { textContent: "Select how to handle existing data:" }));
+			const modeDiv = this.ce("div", { className: "import-mode" });
+			const mergeRadio = this.ce("label", { className: "radio-label" }, this.ce("input", {
+				type: "radio",
+				name: "importMode",
+				value: "merge",
+				checked: this.importMode === "merge"
+			}), this.ce("span", { textContent: "Merge — add to existing data" }));
+			const replaceRadio = this.ce("label", { className: "radio-label" }, this.ce("input", {
+				type: "radio",
+				name: "importMode",
+				value: "replace",
+				checked: this.importMode === "replace"
+			}), this.ce("span", { textContent: "Replace — clear all existing data first" }));
+			modeDiv.appendChild(mergeRadio);
+			modeDiv.appendChild(replaceRadio);
+			modal.appendChild(modeDiv);
+			modal.appendChild(this.ce("div", { className: "form-group" }, this.ce("label", {
+				htmlFor: "import-file",
+				className: "file-label",
+				textContent: "Choose JSON file"
+			}), this.ce("input", {
+				id: "import-file",
+				type: "file",
+				accept: ".json,application/json",
+				disabled: this.importing
+			})));
+			const closeActions = this.ce("div", { className: "ie-modal-actions" }, this.ce("button", {
+				className: "btn btn-ghost",
+				id: "close-import-btn",
+				textContent: "Close"
+			}));
+			modal.appendChild(closeActions);
+			overlay.appendChild(modal);
+			this.el.appendChild(overlay);
+			this.on(overlay, "click", () => {
+				this.showImport = false;
+				overlay.remove();
+			});
+			this.on(modal, "click", (e) => e.stopPropagation());
+			overlay.querySelectorAll("input[name=\"importMode\"]").forEach((radio) => {
+				this.on(radio, "change", (e) => {
+					this.importMode = e.target.value;
+				});
+			});
+			const fileInput = overlay.querySelector("#import-file");
+			if (fileInput) this.on(fileInput, "change", (e) => this.#handleFileSelect(e));
+			const closeBtn = overlay.querySelector("#close-import-btn");
+			if (closeBtn) this.on(closeBtn, "click", () => {
+				this.showImport = false;
+				this.importResult = null;
+				this.importError = "";
+				overlay.remove();
+			});
+		}
 	}
-	function toggleGroup(groupId) {
-		if (get(selectedGroupIds).includes(groupId)) set(selectedGroupIds, get(selectedGroupIds).filter((id) => id !== groupId), true);
-		else set(selectedGroupIds, [...get(selectedGroupIds), groupId], true);
-	}
-	async function handleFileSelect(event) {
+	async #handleFileSelect(event) {
 		const file = event.target.files[0];
 		if (!file) return;
-		set(importError, "");
-		set(importResult, null);
-		set(sourcePassword, "");
+		this.importError = "";
+		this.importResult = null;
+		this.sourcePassword = "";
 		try {
 			const text = await file.text();
 			const data = JSON.parse(text);
 			if (!data.entries || !data.groups) {
-				set(importError, "Invalid file format — missing entries or groups data");
+				this.importError = "Invalid file format — missing entries or groups data";
+				this.#renderImportModal();
 				return;
 			}
-			set(parsedFileData, data, true);
+			this.parsedFileData = data;
 		} catch (e) {
-			set(importError, "Failed to parse file: " + e.message);
+			this.importError = "Failed to parse file: " + e.message;
 		}
 		event.target.value = "";
+		this.#renderImportModal();
 	}
-	async function handleImportSubmit() {
-		if (!get(parsedFileData)) return;
-		if (!get(sourcePassword).trim()) {
-			set(importError, "Source vault password is required");
+	async #handleImportSubmit() {
+		if (!this.parsedFileData) return;
+		const srcPwdInput = this.q("#source-password");
+		if (srcPwdInput) this.sourcePassword = srcPwdInput.value;
+		if (!this.sourcePassword.trim()) {
+			this.importError = "Source vault password is required";
+			this.#renderImportModal();
 			return;
 		}
-		set(importing, true);
-		set(importError, "");
-		set(importResult, null);
+		this.importing = true;
+		this.importError = "";
+		this.importResult = null;
 		try {
-			set(importResult, await importAll(get(parsedFileData), get(importMode), get(sourcePassword), app$1.encryptionKey), true);
-			set(sourcePassword, "");
-			set(parsedFileData, null);
+			this.importResult = await importAll(this.parsedFileData, this.importMode, this.sourcePassword, app$1.encryptionKey);
+			this.sourcePassword = "";
+			this.parsedFileData = null;
 			search.refresh();
 		} catch (e) {
-			set(importError, "Import failed: " + e.message);
+			this.importError = "Import failed: " + e.message;
 		}
-		set(importing, false);
+		this.importing = false;
+		this.#renderImportModal();
 	}
-	var div = root$2();
-	var button = child(div);
-	var button_1 = sibling(button, 2);
-	var node = sibling(button_1, 2);
-	var consequent = ($$anchor) => {
-		var div_1 = root_1$3();
-		var div_2 = child(div_1);
-		var div_3 = sibling(child(div_2), 4);
-		var label = child(div_3);
-		var input = child(label);
-		remove_input_defaults(input);
-		next(2);
-		reset(label);
-		var span = sibling(label, 2);
-		var text_1 = child(span);
-		reset(span);
-		reset(div_3);
-		var div_4 = sibling(div_3, 2);
-		each(div_4, 21, () => get(allGroups), index, ($$anchor, group) => {
-			var label_1 = root_2$1();
-			var input_1 = child(label_1);
-			remove_input_defaults(input_1);
-			var span_1 = sibling(input_1, 2);
-			var span_2 = sibling(span_1, 2);
-			var text_2 = child(span_2, true);
-			reset(span_2);
-			reset(label_1);
-			template_effect(($0) => {
-				set_checked(input_1, $0);
-				set_style(span_1, `background-color: ${(get(group).color || "#6c63ff") ?? ""}`);
-				set_text(text_2, get(group).name);
-			}, [() => get(selectedGroupIds).includes(get(group).id)]);
-			delegated("change", input_1, () => toggleGroup(get(group).id));
-			append($$anchor, label_1);
-		});
-		reset(div_4);
-		var div_5 = sibling(div_4, 2);
-		var button_2 = child(div_5);
-		var text_3 = child(button_2, true);
-		reset(button_2);
-		var button_3 = sibling(button_2, 2);
-		reset(div_5);
-		reset(div_2);
-		reset(div_1);
-		template_effect(() => {
-			set_checked(input, get(selectAll));
-			set_text(text_1, `${get(exportEntryCount) ?? ""} entries`);
-			button_2.disabled = get(exporting) || get(selectedGroupIds).length === 0;
-			set_text(text_3, get(exporting) ? "Exporting..." : "📤 Export JSON");
-		});
-		delegated("click", div_1, () => set(showExport, false));
-		delegated("click", div_2, (e) => e.stopPropagation());
-		delegated("change", input, toggleSelectAll);
-		delegated("click", button_2, handleExport);
-		delegated("click", button_3, () => set(showExport, false));
-		append($$anchor, div_1);
-	};
-	if_block(node, ($$render) => {
-		if (get(showExport)) $$render(consequent);
-	});
-	var node_1 = sibling(node, 2);
-	var consequent_5 = ($$anchor) => {
-		var div_6 = root_3$1();
-		var div_7 = child(div_6);
-		var node_2 = sibling(child(div_7), 2);
-		var consequent_1 = ($$anchor) => {
-			var div_8 = root_4$1();
-			var text_4 = child(div_8, true);
-			reset(div_8);
-			template_effect(() => set_text(text_4, get(importError)));
-			append($$anchor, div_8);
-		};
-		if_block(node_2, ($$render) => {
-			if (get(importError)) $$render(consequent_1);
-		});
-		var node_3 = sibling(node_2, 2);
-		var consequent_3 = ($$anchor) => {
-			var div_9 = root_5$1();
-			var text_5 = child(div_9);
-			var node_4 = sibling(text_5);
-			var consequent_2 = ($$anchor) => {
-				var text_6 = text();
-				template_effect(() => set_text(text_6, `(${get(importResult).skipped ?? ""} skipped)`));
-				append($$anchor, text_6);
-			};
-			if_block(node_4, ($$render) => {
-				if (get(importResult).skipped > 0) $$render(consequent_2);
-			});
-			reset(div_9);
-			template_effect(() => set_text(text_5, `✓ Imported ${get(importResult).imported.entries ?? ""} entries and ${get(importResult).imported.groups ?? ""} groups `));
-			append($$anchor, div_9);
-		};
-		var consequent_4 = ($$anchor) => {
-			var fragment_1 = root_7$1();
-			var div_10 = sibling(first_child(fragment_1), 2);
-			var input_2 = sibling(child(div_10), 2);
-			remove_input_defaults(input_2);
-			reset(div_10);
-			var div_11 = sibling(div_10, 2);
-			var label_2 = child(div_11);
-			var input_3 = child(label_2);
-			remove_input_defaults(input_3);
-			input_3.value = input_3.__value = "merge";
-			next(2);
-			reset(label_2);
-			var label_3 = sibling(label_2, 2);
-			var input_4 = child(label_3);
-			remove_input_defaults(input_4);
-			input_4.value = input_4.__value = "replace";
-			next(2);
-			reset(label_3);
-			reset(div_11);
-			var div_12 = sibling(div_11, 2);
-			var button_4 = child(div_12);
-			var text_7 = child(button_4, true);
-			reset(button_4);
-			var button_5 = sibling(button_4, 2);
-			reset(div_12);
-			template_effect(() => {
-				button_4.disabled = get(importing);
-				set_text(text_7, get(importing) ? "Importing..." : "📥 Import");
-			});
-			bind_value(input_2, () => get(sourcePassword), ($$value) => set(sourcePassword, $$value));
-			bind_group(binding_group, [], input_3, () => get(importMode), ($$value) => set(importMode, $$value));
-			bind_group(binding_group, [], input_4, () => get(importMode), ($$value) => set(importMode, $$value));
-			delegated("click", button_4, handleImportSubmit);
-			delegated("click", button_5, () => {
-				set(parsedFileData, null);
-				set(sourcePassword, "");
-			});
-			append($$anchor, fragment_1);
-		};
-		var alternate = ($$anchor) => {
-			var fragment_2 = root_8$1();
-			var div_13 = sibling(first_child(fragment_2), 2);
-			var label_4 = child(div_13);
-			var input_5 = child(label_4);
-			remove_input_defaults(input_5);
-			input_5.value = input_5.__value = "merge";
-			next(2);
-			reset(label_4);
-			var label_5 = sibling(label_4, 2);
-			var input_6 = child(label_5);
-			remove_input_defaults(input_6);
-			input_6.value = input_6.__value = "replace";
-			next(2);
-			reset(label_5);
-			reset(div_13);
-			var div_14 = sibling(div_13, 2);
-			var input_7 = sibling(child(div_14), 2);
-			reset(div_14);
-			template_effect(() => input_7.disabled = get(importing));
-			bind_group(binding_group, [], input_5, () => get(importMode), ($$value) => set(importMode, $$value));
-			bind_group(binding_group, [], input_6, () => get(importMode), ($$value) => set(importMode, $$value));
-			delegated("change", input_7, handleFileSelect);
-			append($$anchor, fragment_2);
-		};
-		if_block(node_3, ($$render) => {
-			if (get(importResult)) $$render(consequent_3);
-			else if (get(parsedFileData)) $$render(consequent_4, 1);
-			else $$render(alternate, -1);
-		});
-		var div_15 = sibling(node_3, 2);
-		var button_6 = child(div_15);
-		reset(div_15);
-		reset(div_7);
-		reset(div_6);
-		delegated("click", div_6, () => set(showImport, false));
-		delegated("click", div_7, (e) => e.stopPropagation());
-		delegated("click", button_6, () => {
-			set(showImport, false);
-			set(importResult, null);
-			set(importError, "");
-		});
-		append($$anchor, div_6);
-	};
-	if_block(node_1, ($$render) => {
-		if (get(showImport)) $$render(consequent_5);
-	});
-	reset(div);
-	delegated("click", button, openExportModal);
-	delegated("click", button_1, () => set(showImport, true));
-	append($$anchor, div);
-	pop();
-}
-delegate(["click", "change"]);
+};
 //#endregion
-//#region src/components/SettingsDialog.svelte
-var root_1$2 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root$1 = /* @__PURE__ */ from_html(`<div class="settings-panel svelte-1koizbb"><form class="form-card svelte-1koizbb"><h3 class="svelte-1koizbb">Settings</h3> <div class="form-group"><label for="auto-lock-minutes">Auto-lock after</label> <select id="auto-lock-minutes"></select> <p class="text-muted text-xs mt-1"> </p></div> <div class="form-group"><label class="toggle-label svelte-1koizbb" for="lock-tab-switch"><input id="lock-tab-switch" type="checkbox" class="svelte-1koizbb"/> <span class="toggle-track svelte-1koizbb"><span class="toggle-thumb svelte-1koizbb"></span></span> <span class="toggle-text svelte-1koizbb">Lock when tab loses focus</span></label> <p class="text-muted text-xs mt-1"> </p></div> <div class="form-actions svelte-1koizbb"><button type="submit" class="btn btn-primary"> </button> <button type="button" class="btn btn-ghost">Cancel</button></div></form></div>`);
-function SettingsDialog($$anchor, $$props) {
-	push($$props, true);
-	let minutes = /* @__PURE__ */ state(proxy(settings.autoLockMinutes));
-	let lockOnTabSwitch = /* @__PURE__ */ state(proxy(settings.lockOnTabSwitch));
-	let saving = /* @__PURE__ */ state(false);
-	const minuteOptions = [
-		1,
-		5,
-		10,
-		15,
-		30,
-		60
-	];
-	async function handleSave() {
-		set(saving, true);
+//#region src/components/SettingsDialog.js
+/**
+* SettingsDialog — auto-lock and tab-switch settings.
+*/
+var SettingsDialog = class extends Component {
+	/** @param {{ onBack: Function }} props */
+	constructor(container, props = {}) {
+		super(container);
+		this.onBack = props.onBack || (() => {});
+		this.minutes = settings.autoLockMinutes;
+		this.lockOnTabSwitch = settings.lockOnTabSwitch;
+		this.saving = false;
+	}
+	mount() {
+		super.mount();
+		this.minutes = settings.autoLockMinutes;
+		this.lockOnTabSwitch = settings.lockOnTabSwitch;
+		return this;
+	}
+	render() {
+		this.el = this.ce("div", { className: "settings-panel" });
+		this.#renderContent();
+		return this.el;
+	}
+	#renderContent() {
+		this.el.innerHTML = "";
+		const form = this.ce("form", {
+			className: "sd-form-card",
+			id: "settings-form"
+		}, this.ce("h3", { textContent: "Settings" }), this.ce("div", { className: "form-group" }, this.ce("label", {
+			htmlFor: "auto-lock-minutes",
+			textContent: "Auto-lock after"
+		}), this.#buildMinuteSelect(), this.ce("p", {
+			className: "text-muted text-xs mt-1",
+			id: "lock-hint"
+		})), this.ce("div", { className: "form-group" }, this.ce("label", {
+			className: "toggle-label",
+			htmlFor: "lock-tab-switch"
+		}, this.ce("input", {
+			id: "lock-tab-switch",
+			type: "checkbox",
+			checked: this.lockOnTabSwitch
+		}), this.ce("span", { className: "toggle-track" }, this.ce("span", { className: "toggle-thumb" })), this.ce("span", {
+			className: "toggle-text",
+			textContent: "Lock when tab loses focus"
+		})), this.ce("p", {
+			className: "text-muted text-xs mt-1",
+			id: "tab-hint"
+		})), this.ce("div", { className: "sd-form-actions" }, this.ce("button", {
+			type: "submit",
+			className: "btn btn-primary",
+			disabled: this.saving,
+			id: "save-settings-btn",
+			textContent: this.saving ? "Saving..." : "Save"
+		}), this.ce("button", {
+			type: "button",
+			className: "btn btn-ghost",
+			id: "cancel-settings-btn",
+			textContent: "Cancel"
+		})));
+		this.el.appendChild(form);
+		const lockHint = this.q("#lock-hint");
+		if (lockHint) lockHint.textContent = `Vault locks after ${this.minutes} ${this.minutes === 1 ? "minute" : "minutes"} of inactivity.`;
+		const tabHint = this.q("#tab-hint");
+		if (tabHint) tabHint.textContent = this.lockOnTabSwitch ? "The vault locks immediately when you switch to another tab." : "The vault stays unlocked even when you switch tabs.";
+		const formEl = this.q("#settings-form");
+		if (formEl) this.on(formEl, "submit", this.#handleSave);
+		const cancelBtn = this.q("#cancel-settings-btn");
+		if (cancelBtn) this.on(cancelBtn, "click", () => this.onBack());
+		const minutesSelect = this.q("#auto-lock-minutes");
+		if (minutesSelect) this.on(minutesSelect, "change", (e) => {
+			this.minutes = Number(e.target.value);
+			if (lockHint) lockHint.textContent = `Vault locks after ${this.minutes} ${this.minutes === 1 ? "minute" : "minutes"} of inactivity.`;
+		});
+		const tabCheckbox = this.q("#lock-tab-switch");
+		if (tabCheckbox) this.on(tabCheckbox, "change", (e) => {
+			this.lockOnTabSwitch = e.target.checked;
+			if (tabHint) tabHint.textContent = this.lockOnTabSwitch ? "The vault locks immediately when you switch to another tab." : "The vault stays unlocked even when you switch tabs.";
+		});
+	}
+	#buildMinuteSelect() {
+		const select = this.ce("select", { id: "auto-lock-minutes" });
+		for (const m of [
+			1,
+			5,
+			10,
+			15,
+			30,
+			60
+		]) {
+			const opt = this.ce("option", { value: m }, this.text(`${m} ${m === 1 ? "minute" : "minutes"}`));
+			if (m === this.minutes) opt.selected = true;
+			select.appendChild(opt);
+		}
+		return select;
+	}
+	#handleSave = async (e) => {
+		e.preventDefault();
+		this.saving = true;
 		try {
-			settings.autoLockMinutes = get(minutes);
-			settings.lockOnTabSwitch = get(lockOnTabSwitch);
+			settings.autoLockMinutes = this.minutes;
+			settings.lockOnTabSwitch = this.lockOnTabSwitch;
 			await settings.save();
 			startAutoLock();
-		} catch (e) {
-			console.error("Failed to save settings:", e);
+		} catch (err) {
+			console.error("Failed to save settings:", err);
 		}
-		set(saving, false);
-		$$props.onBack();
-	}
-	user_effect(() => {
-		set(minutes, settings.autoLockMinutes, true);
-		set(lockOnTabSwitch, settings.lockOnTabSwitch, true);
-	});
-	var div = root$1();
-	var form = child(div);
-	var div_1 = sibling(child(form), 2);
-	var select = sibling(child(div_1), 2);
-	each(select, 21, () => minuteOptions, index, ($$anchor, m) => {
-		var option = root_1$2();
-		var text = child(option);
-		reset(option);
-		var option_value = {};
-		template_effect(() => {
-			set_text(text, `${get(m) ?? ""} ${get(m) === 1 ? "minute" : "minutes"}`);
-			if (option_value !== (option_value = get(m))) option.value = (option.__value = get(m)) ?? "";
-		});
-		append($$anchor, option);
-	});
-	reset(select);
-	var p = sibling(select, 2);
-	var text_1 = child(p);
-	reset(p);
-	reset(div_1);
-	var div_2 = sibling(div_1, 2);
-	var label = child(div_2);
-	var input = child(label);
-	remove_input_defaults(input);
-	next(4);
-	reset(label);
-	var p_1 = sibling(label, 2);
-	var text_2 = child(p_1, true);
-	reset(p_1);
-	reset(div_2);
-	var div_3 = sibling(div_2, 2);
-	var button = child(div_3);
-	var text_3 = child(button, true);
-	reset(button);
-	var button_1 = sibling(button, 2);
-	reset(div_3);
-	reset(form);
-	reset(div);
-	template_effect(() => {
-		set_text(text_1, `Vault locks after ${get(minutes) ?? ""} ${get(minutes) === 1 ? "minute" : "minutes"} of inactivity.`);
-		set_text(text_2, get(lockOnTabSwitch) ? "The vault locks immediately when you switch to another tab." : "The vault stays unlocked even when you switch tabs.");
-		button.disabled = get(saving);
-		set_text(text_3, get(saving) ? "Saving..." : "Save");
-	});
-	event("submit", form, (e) => {
-		e.preventDefault();
-		handleSave();
-	});
-	bind_select_value(select, () => get(minutes), ($$value) => set(minutes, $$value));
-	bind_checked(input, () => get(lockOnTabSwitch), ($$value) => set(lockOnTabSwitch, $$value));
-	delegated("click", button_1, function(...$$args) {
-		$$props.onBack?.apply(this, $$args);
-	});
-	append($$anchor, div);
-	pop();
-}
-delegate(["click"]);
+		this.saving = false;
+		this.onBack();
+	};
+};
 //#endregion
-//#region src/components/MainLayout.svelte
-var root_1$1 = /* @__PURE__ */ from_html(`<button class="sidebar-overlay svelte-1ybayt" aria-label="Close menu"></button>`);
-var root_2 = /* @__PURE__ */ from_html(`<button class="btn btn-ghost btn-sm">← Back</button>`);
-var root_3 = /* @__PURE__ */ from_html(`<h1 class="svelte-1ybayt"> </h1>`);
-var root_4 = /* @__PURE__ */ from_html(`<h1 class="svelte-1ybayt">Entry Details</h1>`);
-var root_5 = /* @__PURE__ */ from_html(`<h1 class="svelte-1ybayt"> </h1>`);
-var root_6 = /* @__PURE__ */ from_html(`<h1 class="svelte-1ybayt">Settings</h1>`);
-var root_7 = /* @__PURE__ */ from_html(`<button class="btn btn-danger btn-sm"> </button>`);
-var root_8 = /* @__PURE__ */ from_html(`<button class="btn btn-primary btn-sm">+ New Entry</button>`);
-var root_13 = /* @__PURE__ */ from_html(`<div class="modal-overlay svelte-1ybayt" role="presentation"><div class="modal svelte-1ybayt" role="dialog" aria-modal="true" aria-label="Empty trash confirmation" tabindex="-1"><h3 class="svelte-1ybayt">Empty Trash</h3> <p class="svelte-1ybayt">Permanently delete all entries from the trash? This cannot be undone.</p> <div class="modal-actions svelte-1ybayt"><button class="btn btn-danger"> </button> <button class="btn btn-ghost">Cancel</button></div></div></div>`);
-var root = /* @__PURE__ */ from_html(`<div class="app-shell svelte-1ybayt"><div class="mobile-header svelte-1ybayt"><button class="btn btn-ghost btn-sm">☰ Menu</button> <span class="mobile-title svelte-1ybayt">Password Vault</span> <button class="btn btn-ghost btn-sm" title="Lock">🔒</button></div> <!> <aside><!></aside> <main class="main-content svelte-1ybayt"><div class="top-bar svelte-1ybayt"><!> <div class="top-bar-title svelte-1ybayt"><!></div> <div class="top-bar-actions svelte-1ybayt"><!> <!> <!> <button class="btn btn-ghost btn-sm" title="Settings">⚙️</button> <button class="btn btn-ghost btn-sm" title="Lock vault">🔒</button></div></div> <div class="content-area svelte-1ybayt"><!></div></main> <!></div>`);
-function MainLayout($$anchor, $$props) {
-	push($$props, true);
-	let sidebarOpen = /* @__PURE__ */ state(false);
-	let viewMode = /* @__PURE__ */ state("list");
-	let selectedEntryId = /* @__PURE__ */ state(null);
-	let showEmptyTrashConfirm = /* @__PURE__ */ state(false);
-	let emptyingTrash = /* @__PURE__ */ state(false);
-	const isTrashView = /* @__PURE__ */ user_derived(() => search.activeGroupId === "trash");
-	function goList() {
-		set(viewMode, "list");
-		set(selectedEntryId, null);
-		set(sidebarOpen, false);
+//#region src/components/MainLayout.js
+/**
+* MainLayout — shell: sidebar + content area with view routing.
+*/
+var MainLayout = class extends Component {
+	sidebarOpen = false;
+	viewMode = "list";
+	selectedEntryId = null;
+	showEmptyTrashConfirm = false;
+	emptyingTrash = false;
+	_sidebar = null;
+	_importExport = null;
+	_contentComponent = null;
+	get isTrashView() {
+		return search.activeGroupId === "trash";
 	}
-	function goDetail(entryId) {
-		set(selectedEntryId, entryId, true);
-		set(viewMode, "detail");
-		set(sidebarOpen, false);
+	mount() {
+		super.mount();
+		this.subscribe(app$1, "isUnlocked", (unlocked) => {
+			if (!unlocked) this.emitLock();
+		});
+		return this;
 	}
-	function goForm(entryId = null) {
-		set(selectedEntryId, entryId, true);
-		set(viewMode, "form");
-		set(sidebarOpen, false);
+	render() {
+		this.el = this.ce("div", { className: "app-shell" });
+		this.el.appendChild(this.ce("div", { className: "mobile-header" }, this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "menu-btn",
+			textContent: "☰ Menu"
+		}), this.ce("span", {
+			className: "mobile-title",
+			textContent: "Password Vault"
+		}), this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "mobile-lock-btn",
+			title: "Lock",
+			textContent: "🔒"
+		})));
+		const aside = this.ce("aside", {
+			className: "sidebar",
+			id: "sidebar"
+		});
+		this.el.appendChild(aside);
+		const main = this.ce("main", { className: "main-content" }, this.ce("div", {
+			className: "top-bar",
+			id: "top-bar"
+		}), this.ce("div", {
+			className: "content-area",
+			id: "content-area"
+		}));
+		this.el.appendChild(main);
+		this.on(this.q("#menu-btn"), "click", () => {
+			this.sidebarOpen = !this.sidebarOpen;
+			this.#updateSidebar();
+		});
+		this.on(this.q("#mobile-lock-btn"), "click", () => app$1.lockVault());
+		this._sidebar = new Sidebar(this.q("#sidebar"));
+		this._sidebar.mount();
+		this.#renderTopBar();
+		this.#navigate();
+		return this.el;
 	}
-	function goSettings() {
-		set(viewMode, "settings");
-		set(sidebarOpen, false);
+	#updateSidebar() {
+		const sidebar = this.q("#sidebar");
+		if (sidebar) sidebar.classList.toggle("open", this.sidebarOpen);
+		let overlay = this.q(".sidebar-overlay");
+		if (this.sidebarOpen && !overlay) {
+			overlay = this.ce("button", {
+				className: "sidebar-overlay",
+				"aria-label": "Close menu"
+			});
+			this.on(overlay, "click", () => {
+				this.sidebarOpen = false;
+				this.#updateSidebar();
+			});
+			this.el.appendChild(overlay);
+		} else if (!this.sidebarOpen && overlay) overlay.remove();
 	}
-	function handleBack() {
-		if (get(viewMode) === "form" || get(viewMode) === "settings") goList();
-		else goList();
+	#renderTopBar() {
+		const topBar = this.q("#top-bar");
+		if (!topBar) return;
+		topBar.innerHTML = "";
+		if (this.viewMode !== "list") {
+			const backBtn = this.ce("button", {
+				className: "btn btn-ghost btn-sm",
+				id: "back-btn",
+				textContent: "← Back"
+			});
+			this.on(backBtn, "click", () => this.#handleBack());
+			topBar.appendChild(backBtn);
+		}
+		const titleDiv = this.ce("div", { className: "top-bar-title" });
+		let titleText;
+		switch (this.viewMode) {
+			case "list":
+				titleText = this.isTrashView ? TRASH_GROUP_NAME : "All Entries";
+				break;
+			case "detail":
+				titleText = "Entry Details";
+				break;
+			case "form":
+				titleText = this.selectedEntryId ? "Edit Entry" : "New Entry";
+				break;
+			case "settings":
+				titleText = "Settings";
+				break;
+			default: titleText = "Password Vault";
+		}
+		titleDiv.appendChild(this.ce("h1", { textContent: titleText }));
+		topBar.appendChild(titleDiv);
+		const actions = this.ce("div", { className: "top-bar-actions" });
+		if (this.viewMode === "list" && this.isTrashView) actions.appendChild(this.ce("button", {
+			className: "btn btn-danger btn-sm",
+			id: "empty-trash-btn",
+			disabled: this.emptyingTrash,
+			textContent: this.emptyingTrash ? "Emptying..." : "🗑 Empty Trash"
+		}));
+		if (this.viewMode === "list" && !this.isTrashView) actions.appendChild(this.ce("button", {
+			className: "btn btn-primary btn-sm",
+			id: "new-entry-btn",
+			textContent: "+ New Entry"
+		}));
+		if (!this._importExport) {
+			this._importExport = new ImportExport(actions);
+			this._importExport.mount();
+		}
+		actions.appendChild(this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "settings-btn",
+			title: "Settings",
+			textContent: "⚙️"
+		}));
+		actions.appendChild(this.ce("button", {
+			className: "btn btn-ghost btn-sm",
+			id: "lock-btn",
+			title: "Lock vault",
+			textContent: "🔒"
+		}));
+		topBar.appendChild(actions);
+		const emptyTrashBtn = this.q("#empty-trash-btn");
+		if (emptyTrashBtn) this.on(emptyTrashBtn, "click", () => {
+			this.showEmptyTrashConfirm = true;
+			this.#renderEmptyTrashModal();
+		});
+		const newEntryBtn = this.q("#new-entry-btn");
+		if (newEntryBtn) this.on(newEntryBtn, "click", () => this.#goForm(null));
+		const settingsBtn = this.q("#settings-btn");
+		if (settingsBtn) this.on(settingsBtn, "click", () => this.#goSettings());
+		const lockBtn = this.q("#lock-btn");
+		if (lockBtn) this.on(lockBtn, "click", () => app$1.lockVault());
 	}
-	async function handleEmptyTrash() {
-		set(emptyingTrash, true);
+	#navigate() {
+		if (this._contentComponent) {
+			this._contentComponent.destroy();
+			this._contentComponent = null;
+		}
+		const contentArea = this.q("#content-area");
+		if (!contentArea) return;
+		switch (this.viewMode) {
+			case "list":
+				this._contentComponent = new EntryList(contentArea, {
+					onSelect: (id) => this.#goDetail(id),
+					onAdd: () => this.#goForm(null)
+				});
+				break;
+			case "detail":
+				if (this.selectedEntryId) this._contentComponent = new EntryDetail(contentArea, {
+					entryId: this.selectedEntryId,
+					onEdit: (id) => this.#goForm(id),
+					onBack: () => this.#goList()
+				});
+				break;
+			case "form":
+				this._contentComponent = new EntryForm(contentArea, {
+					entryId: this.selectedEntryId,
+					onSave: () => this.#goList(),
+					onCancel: () => this.#handleBack()
+				});
+				break;
+			case "settings":
+				this._contentComponent = new SettingsDialog(contentArea, { onBack: () => this.#goList() });
+				break;
+		}
+		if (this._contentComponent) this._contentComponent.mount();
+		this.#renderTopBar();
+	}
+	#goList() {
+		this.viewMode = "list";
+		this.selectedEntryId = null;
+		this.sidebarOpen = false;
+		this.#updateSidebar();
+		this.#navigate();
+	}
+	#goDetail(entryId) {
+		this.selectedEntryId = entryId;
+		this.viewMode = "detail";
+		this.sidebarOpen = false;
+		this.#updateSidebar();
+		this.#navigate();
+	}
+	#goForm(entryId) {
+		this.selectedEntryId = entryId;
+		this.viewMode = "form";
+		this.sidebarOpen = false;
+		this.#updateSidebar();
+		this.#navigate();
+	}
+	#goSettings() {
+		this.viewMode = "settings";
+		this.sidebarOpen = false;
+		this.#updateSidebar();
+		this.#navigate();
+	}
+	#handleBack() {
+		this.#goList();
+	}
+	#renderEmptyTrashModal() {
+		const existing = this.q(".ml-modal-overlay");
+		if (existing) existing.remove();
+		const overlay = this.ce("div", {
+			className: "ml-modal-overlay",
+			role: "presentation"
+		});
+		const modal = this.ce("div", {
+			className: "ml-modal",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Empty trash confirmation",
+			tabindex: "-1"
+		});
+		modal.appendChild(this.ce("h3", { textContent: "Empty Trash" }));
+		modal.appendChild(this.ce("p", { textContent: "Permanently delete all entries from the trash? This cannot be undone." }));
+		const actions = this.ce("div", { className: "ml-modal-actions" }, this.ce("button", {
+			className: "btn btn-danger",
+			id: "confirm-empty-trash",
+			disabled: this.emptyingTrash,
+			textContent: this.emptyingTrash ? "Emptying..." : "Yes, empty trash"
+		}), this.ce("button", {
+			className: "btn btn-ghost",
+			id: "cancel-empty-trash",
+			textContent: "Cancel"
+		}));
+		modal.appendChild(actions);
+		overlay.appendChild(modal);
+		this.el.appendChild(overlay);
+		this.on(overlay, "click", () => {
+			this.showEmptyTrashConfirm = false;
+			overlay.remove();
+		});
+		this.on(modal, "click", (e) => e.stopPropagation());
+		const confirmBtn = overlay.querySelector("#confirm-empty-trash");
+		if (confirmBtn) this.on(confirmBtn, "click", () => this.#handleEmptyTrash());
+		const cancelBtn = overlay.querySelector("#cancel-empty-trash");
+		if (cancelBtn) this.on(cancelBtn, "click", () => {
+			this.showEmptyTrashConfirm = false;
+			overlay.remove();
+		});
+	}
+	async #handleEmptyTrash() {
+		this.emptyingTrash = true;
 		try {
 			await emptyTrash();
 			search.activeGroupId = "all";
-			set(showEmptyTrashConfirm, false);
+			this.showEmptyTrashConfirm = false;
+			this.#goList();
 		} catch (e) {
 			console.error("Failed to empty trash:", e);
 		}
-		set(emptyingTrash, false);
+		this.emptyingTrash = false;
 	}
-	function handleLock() {
-		app$1.lockVault();
+	emitLock() {
+		this.destroy();
 	}
-	var div = root();
-	var div_1 = child(div);
-	var button = child(div_1);
-	var button_1 = sibling(button, 4);
-	reset(div_1);
-	var node = sibling(div_1, 2);
-	var consequent = ($$anchor) => {
-		var button_2 = root_1$1();
-		delegated("click", button_2, () => set(sidebarOpen, false));
-		append($$anchor, button_2);
-	};
-	if_block(node, ($$render) => {
-		if (get(sidebarOpen)) $$render(consequent);
-	});
-	var aside = sibling(node, 2);
-	Sidebar(child(aside), {});
-	reset(aside);
-	var main = sibling(aside, 2);
-	var div_2 = child(main);
-	var node_2 = child(div_2);
-	var consequent_1 = ($$anchor) => {
-		var button_3 = root_2();
-		delegated("click", button_3, handleBack);
-		append($$anchor, button_3);
-	};
-	if_block(node_2, ($$render) => {
-		if (get(viewMode) !== "list") $$render(consequent_1);
-	});
-	var div_3 = sibling(node_2, 2);
-	var node_3 = child(div_3);
-	var consequent_2 = ($$anchor) => {
-		var h1 = root_3();
-		var text = child(h1, true);
-		reset(h1);
-		template_effect(() => set_text(text, search.activeGroupId === "trash" ? TRASH_GROUP_NAME : "All Entries"));
-		append($$anchor, h1);
-	};
-	var consequent_3 = ($$anchor) => {
-		append($$anchor, root_4());
-	};
-	var consequent_4 = ($$anchor) => {
-		var h1_2 = root_5();
-		var text_1 = child(h1_2, true);
-		reset(h1_2);
-		template_effect(() => set_text(text_1, get(selectedEntryId) ? "Edit Entry" : "New Entry"));
-		append($$anchor, h1_2);
-	};
-	var consequent_5 = ($$anchor) => {
-		append($$anchor, root_6());
-	};
-	if_block(node_3, ($$render) => {
-		if (get(viewMode) === "list") $$render(consequent_2);
-		else if (get(viewMode) === "detail") $$render(consequent_3, 1);
-		else if (get(viewMode) === "form") $$render(consequent_4, 2);
-		else if (get(viewMode) === "settings") $$render(consequent_5, 3);
-	});
-	reset(div_3);
-	var div_4 = sibling(div_3, 2);
-	var node_4 = child(div_4);
-	var consequent_6 = ($$anchor) => {
-		var button_4 = root_7();
-		var text_2 = child(button_4, true);
-		reset(button_4);
-		template_effect(() => {
-			button_4.disabled = get(emptyingTrash);
-			set_text(text_2, get(emptyingTrash) ? "Emptying..." : "🗑 Empty Trash");
-		});
-		delegated("click", button_4, () => set(showEmptyTrashConfirm, true));
-		append($$anchor, button_4);
-	};
-	if_block(node_4, ($$render) => {
-		if (get(viewMode) === "list" && get(isTrashView)) $$render(consequent_6);
-	});
-	var node_5 = sibling(node_4, 2);
-	var consequent_7 = ($$anchor) => {
-		var button_5 = root_8();
-		delegated("click", button_5, () => goForm(null));
-		append($$anchor, button_5);
-	};
-	if_block(node_5, ($$render) => {
-		if (get(viewMode) === "list" && !get(isTrashView)) $$render(consequent_7);
-	});
-	var node_6 = sibling(node_5, 2);
-	ImportExport(node_6, {});
-	var button_6 = sibling(node_6, 2);
-	var button_7 = sibling(button_6, 2);
-	reset(div_4);
-	reset(div_2);
-	var div_5 = sibling(div_2, 2);
-	var node_7 = child(div_5);
-	var consequent_8 = ($$anchor) => {
-		EntryList($$anchor, {
-			onSelect: goDetail,
-			onAdd: () => goForm(null)
-		});
-	};
-	var consequent_9 = ($$anchor) => {
-		EntryDetail($$anchor, {
-			get entryId() {
-				return get(selectedEntryId);
-			},
-			onEdit: () => goForm(get(selectedEntryId)),
-			onBack: goList
-		});
-	};
-	var consequent_10 = ($$anchor) => {
-		EntryForm($$anchor, {
-			get entryId() {
-				return get(selectedEntryId);
-			},
-			onSave: goList,
-			onCancel: handleBack
-		});
-	};
-	var consequent_11 = ($$anchor) => {
-		SettingsDialog($$anchor, { onBack: goList });
-	};
-	if_block(node_7, ($$render) => {
-		if (get(viewMode) === "list") $$render(consequent_8);
-		else if (get(viewMode) === "detail" && get(selectedEntryId)) $$render(consequent_9, 1);
-		else if (get(viewMode) === "form") $$render(consequent_10, 2);
-		else if (get(viewMode) === "settings") $$render(consequent_11, 3);
-	});
-	reset(div_5);
-	reset(main);
-	var node_8 = sibling(main, 2);
-	var consequent_12 = ($$anchor) => {
-		var div_6 = root_13();
-		var div_7 = child(div_6);
-		var div_8 = sibling(child(div_7), 4);
-		var button_8 = child(div_8);
-		var text_3 = child(button_8, true);
-		reset(button_8);
-		var button_9 = sibling(button_8, 2);
-		reset(div_8);
-		reset(div_7);
-		reset(div_6);
-		template_effect(() => {
-			button_8.disabled = get(emptyingTrash);
-			set_text(text_3, get(emptyingTrash) ? "Emptying..." : "Yes, empty trash");
-		});
-		delegated("click", div_6, () => set(showEmptyTrashConfirm, false));
-		delegated("click", div_7, (e) => e.stopPropagation());
-		delegated("click", button_8, handleEmptyTrash);
-		delegated("click", button_9, () => set(showEmptyTrashConfirm, false));
-		append($$anchor, div_6);
-	};
-	if_block(node_8, ($$render) => {
-		if (get(showEmptyTrashConfirm)) $$render(consequent_12);
-	});
-	reset(div);
-	template_effect(() => set_class(aside, 1, `sidebar ${get(sidebarOpen) ? "open" : ""}`, "svelte-1ybayt"));
-	delegated("click", button, () => set(sidebarOpen, !get(sidebarOpen)));
-	delegated("click", button_1, handleLock);
-	delegated("click", button_6, goSettings);
-	delegated("click", button_7, handleLock);
-	append($$anchor, div);
-	pop();
-}
-delegate(["click"]);
+	destroy() {
+		if (this._sidebar) this._sidebar.destroy();
+		if (this._importExport) this._importExport.destroy();
+		if (this._contentComponent) this._contentComponent.destroy();
+		super.destroy();
+	}
+};
 //#endregion
-//#region src/App.svelte
-var root_1 = /* @__PURE__ */ from_html(`<meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>`, 1);
-function App($$anchor, $$props) {
-	push($$props, false);
-	init();
-	var fragment_1 = comment();
-	head("1n46o8q", ($$anchor) => {
-		var fragment = root_1();
-		next(2);
-		append($$anchor, fragment);
-	});
-	var node = first_child(fragment_1);
-	var consequent = ($$anchor) => {
-		MainLayout($$anchor, {});
-	};
-	var alternate = ($$anchor) => {
-		LockScreen($$anchor, {});
-	};
-	if_block(node, ($$render) => {
-		if (app$1.isUnlocked) $$render(consequent);
-		else $$render(alternate, -1);
-	});
-	append($$anchor, fragment_1);
-	pop();
-}
-mount(App, { target: document.getElementById("app") });
+//#region src/App.js
+/**
+* Root app component — routes between LockScreen and MainLayout.
+*/
+var App = class extends Component {
+	_lockScreen = null;
+	_mainLayout = null;
+	mount() {
+		super.mount();
+		const head = document.head;
+		head.querySelectorAll("meta, link").forEach((el) => el.remove());
+		const charset = document.createElement("meta");
+		charset.setAttribute("charset", "UTF-8");
+		head.appendChild(charset);
+		const viewport = document.createElement("meta");
+		viewport.setAttribute("name", "viewport");
+		viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
+		head.appendChild(viewport);
+		document.title = "Password Vault";
+		this.subscribe(app$1, "isUnlocked", (unlocked) => this.#swapView(unlocked));
+		this.#swapView(app$1.isUnlocked);
+		return this;
+	}
+	#swapView(unlocked) {
+		if (this._lockScreen) {
+			this._lockScreen.destroy();
+			this._lockScreen = null;
+		}
+		if (this._mainLayout) {
+			this._mainLayout.destroy();
+			this._mainLayout = null;
+		}
+		if (this.container) this.container.innerHTML = "";
+		if (unlocked) {
+			this._mainLayout = new MainLayout(this.container);
+			this._mainLayout.mount();
+		} else {
+			this._lockScreen = new LockScreen(this.container);
+			this._lockScreen.mount();
+		}
+	}
+	destroy() {
+		if (this._lockScreen) this._lockScreen.destroy();
+		if (this._mainLayout) this._mainLayout.destroy();
+		super.destroy();
+	}
+};
+new App(document.getElementById("app")).mount();
 //#endregion</script>
     <style rel="stylesheet" crossorigin>/* ===== CSS Reset & Base ===== */
 *, *::before, *::after {
@@ -7807,1093 +3595,1066 @@ label {
   white-space: nowrap;
 }
 
-  .lock-screen.svelte-7sq1ct {
+/* ============================================================
+   LockScreen
+   ============================================================ */
+.lock-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1rem;
+}
+
+.lock-card {
+  width: 100%;
+  max-width: 400px;
+  padding: 2.5rem 2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.lock-icon {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.lock-card h1 { text-align: center; }
+
+.subtitle {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.lock-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lock-screen .error-banner {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.warning-banner {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(255, 193, 7, 0.15);
+  border: 1px solid rgba(230, 168, 0, 0.5);
+  border-radius: var(--radius-md);
+  color: #b8860b;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.hint {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-align: center;
+  line-height: 1.4;
+  margin-top: 0.5rem;
+}
+
+/* ============================================================
+   MainLayout (shell)
+   ============================================================ */
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+}
+
+.mobile-header {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.mobile-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.sidebar {
+  width: 260px;
+  min-width: 260px;
+  background: var(--color-sidebar);
+  border-right: 1px solid var(--color-border);
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.top-bar-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.top-bar-title h1 {
+  font-size: 1.1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.top-bar-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.content-area {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 49;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* MainLayout modals (empty-trash confirm) */
+.ml-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.ml-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 380px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.ml-modal h3 { margin-bottom: 16px; }
+
+.ml-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
+.ml-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   Sidebar
+   ============================================================ */
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar-header h2 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.search-box {
+  padding: 12px 16px;
+}
+
+.search-box input {
+  padding: 8px 10px;
+  font-size: 0.85rem;
+}
+
+.groups-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.group-row {
+  display: flex;
+  align-items: center;
+}
+
+.group-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms;
+  text-align: left;
+}
+
+.group-item:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.group-item.active {
+  background: rgba(108, 99, 255, 0.15);
+  color: var(--color-primary);
+}
+
+.group-item.drag-over {
+  background: rgba(108, 99, 255, 0.2);
+  border: 2px dashed var(--color-primary);
+  outline: 2px solid rgba(108, 99, 255, 0.25);
+  outline-offset: -4px;
+  transform: scale(1.02);
+}
+
+.group-item.drag-over .drop-icon {
+  opacity: 1;
+  transform: scale(1.2);
+}
+
+.group-item.dropped {
+  animation: dropFlash 600ms ease;
+}
+
+@keyframes dropFlash {
+  0% { background: rgba(52, 211, 153, 0.35); }
+  100% { background: transparent; }
+}
+
+.drop-icon {
+  opacity: 0;
+  font-size: 0.85rem;
+  transition: opacity 150ms, transform 150ms;
+  flex-shrink: 0;
+}
+
+.group-icon {
+  font-size: 1rem;
+}
+
+.group-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.group-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.group-actions {
+  display: flex;
+  gap: 2px;
+  padding-right: 4px;
+}
+
+.trash-section {
+  padding: 8px;
+  border-top: 1px solid var(--color-border);
+}
+
+.group-action-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  transition: background-color 150ms;
+}
+
+.group-action-btn:hover {
+  background: var(--color-surface-hover);
+}
+
+.sidebar-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+/* Color picker */
+.color-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 150ms, border-color 150ms;
+}
+
+.color-swatch:hover {
+  transform: scale(1.15);
+}
+
+.color-swatch.selected {
+  border-color: #fff;
+  transform: scale(1.15);
+}
+
+/* Sidebar modals (group form, delete confirm) */
+.sb-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.sb-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 380px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.sb-modal h3 { margin-bottom: 16px; }
+
+.sb-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
+.sb-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   EntryList
+   ============================================================ */
+.entry-list .loading,
+.entry-list .empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--color-text-muted);
+}
+
+.entry-list .error-banner {
+  padding: 12px 16px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.empty-text {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.empty-hint {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+.results-info {
+  padding: 8px 0;
+  margin-bottom: 8px;
+}
+
+.entries-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.entries-table th {
+  text-align: left;
+  padding: 8px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.entry-row {
+  cursor: grab;
+  transition: background-color 150ms, opacity 150ms;
+}
+
+.entry-row:active {
+  cursor: grabbing;
+}
+
+.entry-row:hover {
+  background: var(--color-surface-hover);
+}
+
+.entry-row.dragging {
+  opacity: 0.35;
+}
+
+.entry-row td {
+  padding: 10px 12px;
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.drag-handle {
+  color: var(--color-text-muted);
+  opacity: 0.3;
+  margin-right: 6px;
+  font-size: 0.9rem;
+  user-select: none;
+  transition: opacity 150ms;
+}
+
+.entry-row:hover .drag-handle {
+  opacity: 0.7;
+}
+
+.restore-btn {
+  font-size: 0.85rem;
+  padding: 4px 6px;
+}
+
+.entry-title {
+  font-weight: 500;
+}
+
+.entry-username {
+  color: var(--color-text-muted);
+}
+
+.entry-url {
+  color: var(--color-text-muted);
+  max-width: 200px;
+}
+
+.notes-icon {
+  color: var(--color-text-muted);
+  cursor: help;
+  font-size: 0.95rem;
+  opacity: 0.5;
+  transition: opacity 150ms;
+}
+
+.notes-icon:hover {
+  opacity: 1;
+}
+
+.notes-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-popup {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  z-index: 100;
+  background: var(--color-surface, #1e1e2e);
+  color: var(--color-text, #cdd6f4);
+  border: 1px solid var(--color-border, #45475a);
+  border-radius: var(--radius-md, 8px);
+  padding: 8px 12px;
+  font-size: 0.8rem;
+  min-width: 150px;
+  max-width: 300px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+  transition: opacity 150ms, visibility 150ms;
+}
+
+.notes-tooltip:hover .tooltip-popup {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* ============================================================
+   EntryForm
+   ============================================================ */
+.entry-form .loading {
+  text-align: center;
+  padding: 3rem;
+  color: var(--color-text-muted);
+}
+
+.entry-form .error-banner {
+  padding: 12px 16px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+  margin-bottom: 16px;
+}
+
+.ef-form-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 500px;
+}
+
+.validation-errors {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: rgba(251, 191, 36, 0.1);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  border-radius: var(--radius-md);
+}
+
+.validation-error {
+  font-size: 0.85rem;
+  color: var(--color-warning);
+}
+
+.password-input-group {
+  display: flex;
+  gap: 8px;
+}
+
+.password-input-group input {
+  flex: 1;
+}
+
+.ef-form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+/* ============================================================
+   EntryDetail
+   ============================================================ */
+.entry-detail .loading,
+.entry-detail .empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: var(--color-text-muted);
+}
+
+.entry-detail .error-banner {
+  padding: 12px 16px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+}
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 10px 16px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.85rem;
+  color: var(--color-success);
+  box-shadow: var(--shadow);
+  z-index: 1000;
+  animation: slideIn 200ms ease;
+}
+
+@keyframes slideIn {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.detail-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 600px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--color-border);
+  gap: 12px;
+}
+
+.detail-header h2 {
+  font-size: 1.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.detail-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.field-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.95rem;
+  word-break: break-all;
+}
+
+.field-value.notes {
+  white-space: pre-wrap;
+}
+
+.field-value a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.field-value a:hover {
+  text-decoration: underline;
+}
+
+.copy-btn {
+  flex-shrink: 0;
+}
+
+.detail-meta {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+/* EntryDetail modals */
+.ed-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.ed-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 400px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.ed-modal h3 { margin-bottom: 12px; }
+
+.ed-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
+.ed-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   ImportExport
+   ============================================================ */
+.ie-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.ie-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 420px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.ie-modal h3 { margin-bottom: 12px; }
+
+.ie-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 16px;
+}
+
+.ie-modal-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.ie-error-banner {
+  padding: 10px 14px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+  margin-bottom: 12px;
+}
+
+.success-banner {
+  padding: 10px 14px;
+  background: rgba(52, 211, 153, 0.15);
+  border: 1px solid rgba(52, 211, 153, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-success);
+  font-size: 0.85rem;
+  margin-bottom: 12px;
+}
+
+.import-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color 150ms, background-color 150ms;
+}
+
+.radio-label:hover {
+  border-color: var(--color-primary);
+  background: var(--color-surface-hover);
+}
+
+.radio-label input[type="radio"] {
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
+.radio-label span {
+  font-size: 0.85rem;
+}
+
+.file-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  margin-bottom: 4px;
+}
+
+input[type="file"] {
+  font-size: 0.85rem;
+  padding: 8px;
+}
+
+/* Group selection for export */
+.group-select-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 4px;
+}
+
+.group-select-header .entry-count {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.group-select-list {
+  max-height: 240px;
+  overflow-y: auto;
+  margin-bottom: 8px;
+}
+
+.group-select-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.group-select-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.group-select-list::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.checkbox-label input[type="checkbox"] {
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
+.group-checkbox {
+  padding: 6px 12px;
+  border-radius: var(--radius-md);
+  transition: background-color 150ms;
+}
+
+.group-checkbox:hover {
+  background: var(--color-surface-hover);
+}
+
+.group-color-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ============================================================
+   SettingsDialog
+   ============================================================ */
+.settings-panel {
+  max-width: 500px;
+}
+
+.sd-form-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+}
+
+.sd-form-card h3 {
+  margin-bottom: 16px;
+}
+
+.sd-form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.toggle-label input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-track {
+  width: 40px;
+  height: 22px;
+  background: var(--color-border);
+  border-radius: 11px;
+  position: relative;
+  transition: background-color 150ms;
+  flex-shrink: 0;
+}
+
+.toggle-track .toggle-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 150ms;
+}
+
+.toggle-label input:checked + .toggle-track {
+  background: var(--color-primary);
+}
+
+.toggle-label input:checked + .toggle-track .toggle-thumb {
+  transform: translateX(18px);
+}
+
+.toggle-text {
+  font-size: 0.875rem;
+  color: var(--color-text);
+}
+
+/* ============================================================
+   Responsive
+   ============================================================ */
+@media (max-width: 768px) {
+  .mobile-header {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    padding: 1rem;
   }
 
-  .lock-card.svelte-7sq1ct {
-    width: 100%;
-    max-width: 400px;
-    padding: 2.5rem 2rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .lock-icon.svelte-7sq1ct {
-    font-size: 3rem;
-    line-height: 1;
-  }
-
-  h1.svelte-7sq1ct {
-    font-size: 1.5rem;
-    text-align: center;
-  }
-
-  .subtitle.svelte-7sq1ct {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    text-align: center;
-  }
-
-  .lock-form.svelte-7sq1ct {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .error-banner.svelte-7sq1ct {
-    width: 100%;
-    padding: 10px 14px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    text-align: center;
-  }
-
-  .warning-banner.svelte-7sq1ct {
-    width: 100%;
-    padding: 10px 14px;
-    background: rgba(255, 193, 7, 0.15);
-    border: 1px solid rgba(230, 168, 0, 0.5);
-    border-radius: var(--radius-md);
-    color: #b8860b;
-    font-size: 0.85rem;
-    text-align: center;
-  }
-
-  .hint.svelte-7sq1ct {
-    font-size: 0.75rem;
-    color: var(--color-text-muted);
-    text-align: center;
-    line-height: 1.4;
-    margin-top: 0.5rem;
-  }
-
-  .sidebar-content.svelte-181dlmc {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .sidebar-header.svelte-181dlmc {
-    padding: 16px;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .sidebar-header.svelte-181dlmc h2:where(.svelte-181dlmc) {
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  .search-box.svelte-181dlmc {
-    padding: 12px 16px;
-  }
-
-  .search-box.svelte-181dlmc input:where(.svelte-181dlmc) {
-    padding: 8px 10px;
-    font-size: 0.85rem;
-  }
-
-  .groups-nav.svelte-181dlmc {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px;
-  }
-
-  .group-row.svelte-181dlmc {
-    display: flex;
-    align-items: center;
-  }
-
-  .group-item.svelte-181dlmc {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
-    min-width: 0;
-    padding: 8px 12px;
-    border: none;
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: background-color 150ms, color 150ms;
-    text-align: left;
-  }
-
-  .group-item.svelte-181dlmc:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text);
-  }
-
-  .group-item.active.svelte-181dlmc {
-    background: rgba(108, 99, 255, 0.15);
-    color: var(--color-primary);
-  }
-
-  .group-item.drag-over.svelte-181dlmc {
-    background: rgba(108, 99, 255, 0.2);
-    border: 2px dashed var(--color-primary);
-    outline: 2px solid rgba(108, 99, 255, 0.25);
-    outline-offset: -4px;
-    transform: scale(1.02);
-  }
-
-  .group-item.drag-over.svelte-181dlmc .drop-icon:where(.svelte-181dlmc) {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-
-  .group-item.dropped.svelte-181dlmc {
-    animation: svelte-181dlmc-dropFlash 600ms ease;
-  }
-
-  @keyframes svelte-181dlmc-dropFlash {
-    0% { background: rgba(52, 211, 153, 0.35); }
-    100% { background: transparent; }
-  }
-
-  .drop-icon.svelte-181dlmc {
-    opacity: 0;
-    font-size: 0.85rem;
-    transition: opacity 150ms, transform 150ms;
-    flex-shrink: 0;
-  }
-
-  .group-icon.svelte-181dlmc {
-    font-size: 1rem;
-  }
-
-  .group-color.svelte-181dlmc {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .group-name.svelte-181dlmc {
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .group-actions.svelte-181dlmc {
-    display: flex;
-    gap: 2px;
-    padding-right: 4px;
-    opacity: 0;
-    transition: opacity 150ms;
-  }
-
-  .group-row.svelte-181dlmc:hover .group-actions:where(.svelte-181dlmc) {
-    opacity: 1;
-  }
-
-  .trash-section.svelte-181dlmc {
-    padding: 8px;
-    border-top: 1px solid var(--color-border);
-  }
-
-  .group-action-btn.svelte-181dlmc {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 0.75rem;
-    padding: 4px;
-    border-radius: var(--radius-sm);
-    transition: background-color 150ms;
-  }
-
-  .group-action-btn.svelte-181dlmc:hover {
-    background: var(--color-surface-hover);
-  }
-
-  .sidebar-footer.svelte-181dlmc {
-    padding: 12px 16px;
-    border-top: 1px solid var(--color-border);
-  }
-
-  /* Modal */
-  .modal-overlay.svelte-181dlmc {
+  .sidebar {
     position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal.svelte-181dlmc {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 380px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal.svelte-181dlmc h3:where(.svelte-181dlmc) {
-    margin-bottom: 16px;
-  }
-
-  .modal.svelte-181dlmc p:where(.svelte-181dlmc) {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 20px;
-  }
-
-  .modal-actions.svelte-181dlmc {
-    display: flex;
-    gap: 8px;
-  }
-
-  .error-banner.svelte-181dlmc {
-    padding: 8px 12px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-  }
-
-  /* Color picker */
-  .color-picker.svelte-181dlmc {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .color-swatch.svelte-181dlmc {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    border: 2px solid transparent;
-    cursor: pointer;
-    transition: transform 150ms, border-color 150ms;
-  }
-
-  .color-swatch.svelte-181dlmc:hover {
-    transform: scale(1.15);
-  }
-
-  .color-swatch.selected.svelte-181dlmc {
-    border-color: #fff;
-    transform: scale(1.15);
-  }
-
-  .loading.svelte-13s7gu4, .empty-state.svelte-13s7gu4 {
-    text-align: center;
-    padding: 3rem 1rem;
-    color: var(--color-text-muted);
-  }
-
-  .error-banner.svelte-13s7gu4 {
-    padding: 12px 16px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-  }
-
-  .empty-icon.svelte-13s7gu4 {
-    font-size: 3rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .empty-text.svelte-13s7gu4 {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: var(--color-text);
-  }
-
-  .empty-hint.svelte-13s7gu4 {
-    font-size: 0.85rem;
-    color: var(--color-text-muted);
-  }
-
-  .results-info.svelte-13s7gu4 {
-    padding: 8px 0;
-    margin-bottom: 8px;
-  }
-
-  .entries-table.svelte-13s7gu4 {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .entries-table.svelte-13s7gu4 th:where(.svelte-13s7gu4) {
-    text-align: left;
-    padding: 8px 12px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--color-text-muted);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .entry-row.svelte-13s7gu4 {
-    cursor: grab;
-    transition: background-color 150ms, opacity 150ms;
-  }
-
-  .entry-row.svelte-13s7gu4:active {
-    cursor: grabbing;
-  }
-
-  .entry-row.svelte-13s7gu4:hover {
-    background: var(--color-surface-hover);
-  }
-
-  .entry-row.dragging.svelte-13s7gu4 {
-    opacity: 0.35;
-  }
-
-  .entry-row.svelte-13s7gu4 td:where(.svelte-13s7gu4) {
-    padding: 10px 12px;
-    font-size: 0.875rem;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .drag-handle.svelte-13s7gu4 {
-    color: var(--color-text-muted);
-    opacity: 0.3;
-    margin-right: 6px;
-    font-size: 0.9rem;
-    user-select: none;
-    transition: opacity 150ms;
-  }
-
-  .entry-row.svelte-13s7gu4:hover .drag-handle:where(.svelte-13s7gu4) {
-    opacity: 0.7;
-  }
-
-  .restore-btn.svelte-13s7gu4 {
-    font-size: 0.85rem;
-    padding: 4px 6px;
-  }
-
-  .entry-title.svelte-13s7gu4 {
-    font-weight: 500;
-  }
-
-  .entry-username.svelte-13s7gu4 {
-    color: var(--color-text-muted);
-  }
-
-  .entry-url.svelte-13s7gu4 {
-    color: var(--color-text-muted);
-    max-width: 200px;
-  }
-
-  .notes-icon.svelte-13s7gu4 {
-    color: var(--color-text-muted);
-    cursor: help;
-    font-size: 0.95rem;
-    opacity: 0.5;
-    transition: opacity 150ms;
-  }
-
-  .notes-icon.svelte-13s7gu4:hover {
-    opacity: 1;
-  }
-
-  .notes-tooltip.svelte-13s7gu4 {
-    position: relative;
-    display: inline-block;
-  }
-
-  .tooltip-popup.svelte-13s7gu4 {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    bottom: calc(100% + 6px);
+    top: 0;
     left: 0;
-    z-index: 100;
-    background: var(--color-surface, #1e1e2e);
-    color: var(--color-text, #cdd6f4);
-    border: 1px solid var(--color-border, #45475a);
-    border-radius: var(--radius-md, 8px);
-    padding: 8px 12px;
-    font-size: 0.8rem;
-    min-width: 150px;
-    max-width: 300px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-    transition: opacity 150ms, visibility 150ms;
+    bottom: 0;
+    z-index: 50;
+    transform: translateX(-100%);
+    transition: transform 200ms ease;
   }
 
-  .notes-tooltip.svelte-13s7gu4:hover .tooltip-popup:where(.svelte-13s7gu4) {
-    visibility: visible;
-    opacity: 1;
+  .sidebar.open {
+    transform: translateX(0);
   }
 
-  @media (max-width: 768px) {
-    .entries-table.svelte-13s7gu4 th:where(.svelte-13s7gu4):nth-child(4),
-    .entry-row.svelte-13s7gu4 td:where(.svelte-13s7gu4):nth-child(4) {
-      display: none;
-    }
-  }
-
-  @media (max-width: 600px) {
-    .entries-table.svelte-13s7gu4 th:where(.svelte-13s7gu4):nth-child(3),
-    .entry-row.svelte-13s7gu4 td:where(.svelte-13s7gu4):nth-child(3) {
-      display: none;
-    }
-  }
-
-  .loading.svelte-dssgjx, .empty-state.svelte-dssgjx {
-    text-align: center;
-    padding: 3rem;
-    color: var(--color-text-muted);
-  }
-
-  .error-banner.svelte-dssgjx {
-    padding: 12px 16px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-  }
-
-  .toast.svelte-dssgjx {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    padding: 10px 16px;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    font-size: 0.85rem;
-    color: var(--color-success);
-    box-shadow: var(--shadow);
-    z-index: 1000;
-    animation: svelte-dssgjx-slideIn 200ms ease;
-  }
-
-  @keyframes svelte-dssgjx-slideIn {
-    from { transform: translateY(20px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-  }
-
-  .detail-card.svelte-dssgjx {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 600px;
-  }
-
-  .detail-header.svelte-dssgjx {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--color-border);
-    gap: 12px;
-  }
-
-  .detail-header.svelte-dssgjx h2:where(.svelte-dssgjx) {
-    font-size: 1.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .header-actions.svelte-dssgjx {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-  }
-
-  .detail-fields.svelte-dssgjx {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-
-  .field-label.svelte-dssgjx {
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--color-text-muted);
-    margin-bottom: 4px;
+  .sidebar-overlay {
     display: block;
   }
 
-  .field-value.svelte-dssgjx {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 0.95rem;
-    word-break: break-all;
-  }
-
-  .field-value.notes.svelte-dssgjx {
-    white-space: pre-wrap;
-  }
-
-  .field-value.svelte-dssgjx a:where(.svelte-dssgjx) {
-    color: var(--color-primary);
-    text-decoration: none;
-  }
-
-  .field-value.svelte-dssgjx a:where(.svelte-dssgjx):hover {
-    text-decoration: underline;
-  }
-
-  .copy-btn.svelte-dssgjx {
-    flex-shrink: 0;
-  }
-
-  .detail-meta.svelte-dssgjx {
-    display: flex;
-    gap: 16px;
-    margin-top: 24px;
-    padding-top: 16px;
-    border-top: 1px solid var(--color-border);
-  }
-
-  /* Modal */
-  .modal-overlay.svelte-dssgjx {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal.svelte-dssgjx {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 400px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal.svelte-dssgjx h3:where(.svelte-dssgjx) {
-    margin-bottom: 12px;
-  }
-
-  .modal.svelte-dssgjx p:where(.svelte-dssgjx) {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 20px;
-  }
-
-  .modal-actions.svelte-dssgjx {
-    display: flex;
-    gap: 8px;
-  }
-
-  @media (max-width: 600px) {
-    .header-actions.svelte-dssgjx {
-      display: none;
-    }
-  }
-
-  .loading.svelte-pafazm {
-    text-align: center;
-    padding: 3rem;
-    color: var(--color-text-muted);
-  }
-
-  .error-banner.svelte-pafazm {
-    padding: 12px 16px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    margin-bottom: 16px;
-  }
-
-  .form-card.svelte-pafazm {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 500px;
-  }
-
-  .validation-errors.svelte-pafazm {
-    margin-bottom: 16px;
+  .content-area {
     padding: 12px;
-    background: rgba(251, 191, 36, 0.1);
-    border: 1px solid rgba(251, 191, 36, 0.3);
-    border-radius: var(--radius-md);
   }
 
-  .validation-error.svelte-pafazm {
-    font-size: 0.85rem;
-    color: var(--color-warning);
+  .top-bar {
+    padding: 10px 12px;
   }
 
-  .password-input-group.svelte-pafazm {
-    display: flex;
-    gap: 8px;
-  }
-
-  .password-input-group.svelte-pafazm input:where(.svelte-pafazm) {
-    flex: 1;
-  }
-
-  .form-actions.svelte-pafazm {
-    display: flex;
-    gap: 8px;
-    margin-top: 20px;
-  }
-
-  .modal-overlay.svelte-17di1i9 {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal.svelte-17di1i9 {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 420px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal.svelte-17di1i9 h3:where(.svelte-17di1i9) {
-    margin-bottom: 12px;
-  }
-
-  .modal.svelte-17di1i9 p:where(.svelte-17di1i9) {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 16px;
-  }
-
-  .modal-actions.svelte-17di1i9 {
-    display: flex;
-    gap: 8px;
-    margin-top: 16px;
-  }
-
-  .error-banner.svelte-17di1i9 {
-    padding: 10px 14px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-  }
-
-  .success-banner.svelte-17di1i9 {
-    padding: 10px 14px;
-    background: rgba(52, 211, 153, 0.15);
-    border: 1px solid rgba(52, 211, 153, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-success);
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-  }
-
-  .import-mode.svelte-17di1i9 {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 16px;
-  }
-
-  .radio-label.svelte-17di1i9 {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: border-color 150ms, background-color 150ms;
-  }
-
-  .radio-label.svelte-17di1i9:hover {
-    border-color: var(--color-primary);
-    background: var(--color-surface-hover);
-  }
-
-  .radio-label.svelte-17di1i9 input[type="radio"]:where(.svelte-17di1i9) {
-    accent-color: var(--color-primary);
-    cursor: pointer;
-  }
-
-  .radio-label.svelte-17di1i9 span:where(.svelte-17di1i9) {
-    font-size: 0.85rem;
-  }
-
-  .file-label.svelte-17di1i9 {
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: var(--color-text-muted);
-    margin-bottom: 4px;
-  }
-
-  input[type="file"].svelte-17di1i9 {
-    font-size: 0.85rem;
-    padding: 8px;
-  }
-
-  .form-group.svelte-17di1i9 {
-    margin-bottom: 16px;
-  }
-
-  .form-group.svelte-17di1i9 input[type="password"]:where(.svelte-17di1i9) {
-    width: 100%;
-    padding: 8px 12px;
-    font-size: 0.85rem;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    color: var(--color-text);
-    box-sizing: border-box;
-  }
-
-  .form-group.svelte-17di1i9 input[type="password"]:where(.svelte-17di1i9):focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
-  /* Group selection for export */
-  .group-select-header.svelte-17di1i9 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--color-border);
-    margin-bottom: 4px;
-  }
-
-  .group-select-header.svelte-17di1i9 .entry-count:where(.svelte-17di1i9) {
-    font-size: 0.8rem;
-    color: var(--color-text-muted);
-  }
-
-  .group-select-list.svelte-17di1i9 {
-    max-height: 240px;
-    overflow-y: auto;
-    margin-bottom: 8px;
-  }
-
-  .group-select-list.svelte-17di1i9::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .group-select-list.svelte-17di1i9::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .group-select-list.svelte-17di1i9::-webkit-scrollbar-thumb {
-    background: var(--color-border);
-    border-radius: 3px;
-  }
-
-  .checkbox-label.svelte-17di1i9 {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-size: 0.85rem;
-  }
-
-  .checkbox-label.svelte-17di1i9 input[type="checkbox"]:where(.svelte-17di1i9) {
-    accent-color: var(--color-primary);
-    cursor: pointer;
-  }
-
-  .group-checkbox.svelte-17di1i9 {
-    padding: 6px 12px;
-    border-radius: var(--radius-md);
-    transition: background-color 150ms;
-  }
-
-  .group-checkbox.svelte-17di1i9:hover {
-    background: var(--color-surface-hover);
-  }
-
-  .group-color-dot.svelte-17di1i9 {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .settings-panel.svelte-1koizbb {
-    max-width: 500px;
-  }
-
-  .form-card.svelte-1koizbb {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-  }
-
-  .form-card.svelte-1koizbb h3:where(.svelte-1koizbb) {
-    margin-bottom: 16px;
-  }
-
-  .form-actions.svelte-1koizbb {
-    display: flex;
-    gap: 8px;
-    margin-top: 20px;
-  }
-
-  .toggle-label.svelte-1koizbb {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    cursor: pointer;
-    margin-bottom: 0;
-  }
-
-  .toggle-label.svelte-1koizbb input[type="checkbox"]:where(.svelte-1koizbb) {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .toggle-track.svelte-1koizbb {
-    width: 40px;
-    height: 22px;
-    background: var(--color-border);
-    border-radius: 11px;
-    position: relative;
-    transition: background-color 150ms;
-    flex-shrink: 0;
-  }
-
-  .toggle-track.svelte-1koizbb .toggle-thumb:where(.svelte-1koizbb) {
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 16px;
-    height: 16px;
-    background: #fff;
-    border-radius: 50%;
-    transition: transform 150ms;
-  }
-
-  .toggle-label.svelte-1koizbb input:where(.svelte-1koizbb):checked + .toggle-track:where(.svelte-1koizbb) {
-    background: var(--color-primary);
-  }
-
-  .toggle-label.svelte-1koizbb input:where(.svelte-1koizbb):checked + .toggle-track:where(.svelte-1koizbb) .toggle-thumb:where(.svelte-1koizbb) {
-    transform: translateX(18px);
-  }
-
-  .toggle-text.svelte-1koizbb {
-    font-size: 0.875rem;
-    color: var(--color-text);
-  }
-
-  .app-shell.svelte-1ybayt {
-    display: flex;
-    min-height: 100vh;
-  }
-
-  /* Mobile header */
-  .mobile-header.svelte-1ybayt {
+  .entries-table th:nth-child(4),
+  .entry-row td:nth-child(4) {
     display: none;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 16px;
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
   }
+}
 
-  .mobile-title.svelte-1ybayt {
-    font-weight: 600;
-    font-size: 0.95rem;
-  }
-
-  /* Sidebar */
-  .sidebar.svelte-1ybayt {
-    width: 260px;
-    min-width: 260px;
-    background: var(--color-sidebar);
-    border-right: 1px solid var(--color-border);
-    height: 100vh;
-    position: sticky;
-    top: 0;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* Main content */
-  .main-content.svelte-1ybayt {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .top-bar.svelte-1ybayt {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 20px;
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .top-bar-title.svelte-1ybayt {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .top-bar-title.svelte-1ybayt h1:where(.svelte-1ybayt) {
-    font-size: 1.1rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .top-bar-actions.svelte-1ybayt {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  .content-area.svelte-1ybayt {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-  }
-
-  /* Sidebar overlay (mobile) */
-  .sidebar-overlay.svelte-1ybayt {
+@media (max-width: 600px) {
+  .entries-table th:nth-child(3),
+  .entry-row td:nth-child(3) {
     display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 49;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
   }
 
-  /* Modal */
-  .modal-overlay.svelte-1ybayt {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal.svelte-1ybayt {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 380px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal.svelte-1ybayt h3:where(.svelte-1ybayt) {
-    margin-bottom: 16px;
-  }
-
-  .modal.svelte-1ybayt p:where(.svelte-1ybayt) {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 20px;
-  }
-
-  .modal-actions.svelte-1ybayt {
-    display: flex;
-    gap: 8px;
-  }
-
-  /* Responsive */
-  @media (max-width: 768px) {
-    .mobile-header.svelte-1ybayt {
-      display: flex;
-    }
-
-    .sidebar.svelte-1ybayt {
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      z-index: 50;
-      transform: translateX(-100%);
-      transition: transform 200ms ease;
-    }
-
-    .sidebar.open.svelte-1ybayt {
-      transform: translateX(0);
-    }
-
-    .sidebar-overlay.svelte-1ybayt {
-      display: block;
-    }
-
-    .content-area.svelte-1ybayt {
-      padding: 12px;
-    }
-
-    .top-bar.svelte-1ybayt {
-      padding: 10px 12px;
-    }
+  .header-actions {
+    display: none;
   }
+}
 /*$vite$:1*/</style>
   </head>
   <body>
diff --git a/package-lock.json b/package-lock.json
index 0311ca0..fee7228 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,12 +11,9 @@
         "idb": "^8.0.3"
       },
       "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^7.1.2",
-        "@testing-library/svelte": "^5.3.1",
         "@vitest/ui": "^4.1.6",
         "fake-indexeddb": "^6.2.5",
         "jsdom": "^29.1.1",
-        "svelte": "^5.55.5",
         "vite": "^8.0.12",
         "vite-plugin-singlefile": "^2.3.3",
         "vitest": "^4.1.6"
@@ -73,41 +70,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
-      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@bramus/specificity": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
@@ -313,38 +275,6 @@
         }
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -352,17 +282,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -670,106 +589,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@sveltejs/acorn-typescript": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz",
-      "integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "acorn": "^8.9.0"
-      }
-    },
-    "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-7.1.2.tgz",
-      "integrity": "sha512-DrUBA2UXRfDmUX/ZTiEopd3X40yavsJF1FX2RygcuIScHL7o5YX1fMvoYnDhjeJQC4weCOklirpNWlcb2NiSeA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "deepmerge": "^4.3.1",
-        "magic-string": "^0.30.21",
-        "obug": "^2.1.0",
-        "vitefu": "^1.1.2"
-      },
-      "engines": {
-        "node": "^20.19 || ^22.12 || >=24"
-      },
-      "peerDependencies": {
-        "svelte": "^5.46.4",
-        "vite": "^8.0.0-beta.7 || ^8.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
-      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "picocolors": "1.1.1",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "node_modules/@testing-library/svelte": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-5.3.1.tgz",
-      "integrity": "sha512-8Ez7ZOqW5geRf9PF5rkuopODe5RGy3I9XR+kc7zHh26gBiktLaxTfKmhlGaSHYUOTQE7wFsLMN9xCJVCszw47w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@testing-library/dom": "9.x.x || 10.x.x",
-        "@testing-library/svelte-core": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "peerDependencies": {
-        "svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0",
-        "vite": "*",
-        "vitest": "*"
-      },
-      "peerDependenciesMeta": {
-        "vite": {
-          "optional": true
-        },
-        "vitest": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@testing-library/svelte-core": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/svelte-core/-/svelte-core-1.0.0.tgz",
-      "integrity": "sha512-VkUePoLV6oOYwSUvX6ShA8KLnJqZiYMIbP2JW2t0GLWLkJxKGvuH5qrrZBV/X7cXFnLGuFQEC7RheYiZOW68KQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0"
-      }
-    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -781,13 +600,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@types/aria-query": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/chai": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
@@ -813,13 +625,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@vitest/expect": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.6.tgz",
@@ -955,52 +760,6 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/aria-query": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
-      "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -1011,16 +770,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/axobject-query": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
-      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -1054,16 +803,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1106,26 +845,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1136,20 +855,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/devalue": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.0.tgz",
-      "integrity": "sha512-2zA9pFEsnp7vWBZbXF5JAgAq0fsUIt/1XPbRiAmRV3lp/2C3upzH+sADiyy66aFCihoLEsrQHxNM5w1gIDfsBg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/entities": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
@@ -1170,31 +875,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/esm-env": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
-      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/esrap": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.7.tgz",
-      "integrity": "sha512-Dl7o7btn2YXca1VXx+PVl+lKuZdHBm8oCFuckUxqchMvNMdHMJ/qF31wtPaVyWvFYLQePkbXJrirWzbAP6Yamw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/types": "^8.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@typescript-eslint/types": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -1321,23 +1001,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/is-reference": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
-      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.6"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jsdom": {
       "version": "29.1.1",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
@@ -1640,13 +1303,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/locate-character": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/lru-cache": {
       "version": "11.3.6",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.6.tgz",
@@ -1657,16 +1313,6 @@
         "node": "20 || >=22"
       }
     },
-    "node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "lz-string": "bin/bin.js"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1820,21 +1466,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -1845,13 +1476,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -1955,34 +1579,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/svelte": {
-      "version": "5.55.5",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.5.tgz",
-      "integrity": "sha512-2uCs/LZ9us+AktdzYJM8OcxQ8qnPS1kpaO7syGT/MgO+6Qr1Ybl+TqPq+97u7PHqmmMlye5ZkoyXONy5mjjAbw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@sveltejs/acorn-typescript": "^1.0.5",
-        "@types/estree": "^1.0.5",
-        "@types/trusted-types": "^2.0.7",
-        "acorn": "^8.12.1",
-        "aria-query": "5.3.1",
-        "axobject-query": "^4.1.0",
-        "clsx": "^2.1.1",
-        "devalue": "^5.6.4",
-        "esm-env": "^1.2.1",
-        "esrap": "^2.2.4",
-        "is-reference": "^3.0.3",
-        "locate-character": "^3.0.0",
-        "magic-string": "^0.30.11",
-        "zimmerframe": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -2221,26 +1817,6 @@
         }
       }
     },
-    "node_modules/vitefu": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.3.tgz",
-      "integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
-      "dev": true,
-      "license": "MIT",
-      "workspaces": [
-        "tests/deps/*",
-        "tests/projects/*",
-        "tests/projects/workspace/packages/*"
-      ],
-      "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "vite": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vitest": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.6.tgz",
@@ -2412,13 +1988,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true,
       "license": "MIT"
-    },
-    "node_modules/zimmerframe": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
-      "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-      "dev": true,
-      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index 2063e1c..ced5305 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,9 @@
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@testing-library/svelte": "^5.3.1",
     "@vitest/ui": "^4.1.6",
     "fake-indexeddb": "^6.2.5",
     "jsdom": "^29.1.1",
-    "svelte": "^5.55.5",
     "vite": "^8.0.12",
     "vite-plugin-singlefile": "^2.3.3",
     "vitest": "^4.1.6"
diff --git a/public/icons.svg b/public/icons.svg
deleted file mode 100644
index e952219..0000000
--- a/public/icons.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>
diff --git a/scripts/inline-assets.js b/scripts/inline-assets.js
index 5c7dfd5..fbbc2b3 100644
--- a/scripts/inline-assets.js
+++ b/scripts/inline-assets.js
@@ -30,13 +30,6 @@ if (existsSync(faviconPath)) {
   console.log('[inline-assets] Inlined favicon.svg into index.html')
 }
 
-// Remove any other leftover asset files (e.g. icons.svg from Svelte compiler)
-const iconsPath = join(distDir, 'icons.svg')
-if (existsSync(iconsPath)) {
-  rmSync(iconsPath)
-  console.log('[inline-assets] Removed icons.svg')
-}
-
 // Remove assets directory if it exists
 const assetsDir = join(distDir, 'assets')
 if (existsSync(assetsDir)) {
@@ -44,4 +37,13 @@ if (existsSync(assetsDir)) {
   console.log('[inline-assets] Removed assets/ directory')
 }
 
+// Remove any leftover SVG files (e.g. icons.svg from old Svelte builds)
+import { readdirSync } from 'fs'
+for (const file of readdirSync(distDir)) {
+  if (file.endsWith('.svg')) {
+    rmSync(join(distDir, file))
+    console.log(`[inline-assets] Removed ${file}`)
+  }
+}
+
 console.log('[inline-assets] Done — dist/ contains only index.html')
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..2da56ba
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,65 @@
+/**
+ * Root app component — routes between LockScreen and MainLayout.
+ */
+
+import { Component } from './components/component.js'
+import { LockScreen } from './components/LockScreen.js'
+import { MainLayout } from './components/MainLayout.js'
+import { app } from './lib/stores/app.js'
+
+export class App extends Component {
+  _lockScreen = null
+  _mainLayout = null
+
+  mount() {
+    super.mount()
+
+    // Set meta tags (preserve existing <style> and <script> tags from the build)
+    const head = document.head
+    // Only remove meta/link tags, keep style/script
+    head.querySelectorAll('meta, link').forEach(el => el.remove())
+
+    const charset = document.createElement('meta')
+    charset.setAttribute('charset', 'UTF-8')
+    head.appendChild(charset)
+
+    const viewport = document.createElement('meta')
+    viewport.setAttribute('name', 'viewport')
+    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0')
+    head.appendChild(viewport)
+
+    document.title = 'Password Vault'
+
+    // Subscribe to isUnlocked to swap views
+    this.subscribe(app, 'isUnlocked', (unlocked) => this.#swapView(unlocked))
+
+    // Initial render
+    this.#swapView(app.isUnlocked)
+
+    return this
+  }
+
+  #swapView(unlocked) {
+    // Destroy current view
+    if (this._lockScreen) { this._lockScreen.destroy(); this._lockScreen = null }
+    if (this._mainLayout) { this._mainLayout.destroy(); this._mainLayout = null }
+
+    // Clear container
+    if (this.container) this.container.innerHTML = ''
+
+    // Mount new view
+    if (unlocked) {
+      this._mainLayout = new MainLayout(this.container)
+      this._mainLayout.mount()
+    } else {
+      this._lockScreen = new LockScreen(this.container)
+      this._lockScreen.mount()
+    }
+  }
+
+  destroy() {
+    if (this._lockScreen) this._lockScreen.destroy()
+    if (this._mainLayout) this._mainLayout.destroy()
+    super.destroy()
+  }
+}
diff --git a/src/App.svelte b/src/App.svelte
deleted file mode 100644
index 2f91976..0000000
--- a/src/App.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import LockScreen from './components/LockScreen.svelte'
-  import MainLayout from './components/MainLayout.svelte'
-  import { app } from './lib/stores/app.svelte'
-</script>
-
-<svelte:head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-</svelte:head>
-
-{#if app.isUnlocked}
-  <MainLayout />
-{:else}
-  <LockScreen />
-{/if}
diff --git a/src/components/EntryDetail.js b/src/components/EntryDetail.js
new file mode 100644
index 0000000..34e9177
--- /dev/null
+++ b/src/components/EntryDetail.js
@@ -0,0 +1,288 @@
+/**
+ * EntryDetail — view single entry with copy-to-clipboard, trash, and permanent delete.
+ */
+
+import { Component } from './component.js'
+import { getEntryById, moveToTrash, deleteEntry } from '../lib/storage/db.js'
+import { decrypt } from '../lib/crypto/crypto.js'
+import { app } from '../lib/stores/app.js'
+import { isTrashGroup } from '../lib/models/schema.js'
+
+export class EntryDetail extends Component {
+  /** @param {{ entryId: string, onEdit: Function, onBack: Function }} props */
+  constructor(container, props = {}) {
+    super(container)
+    this.entryId = props.entryId
+    this.onEdit = props.onEdit || (() => {})
+    this.onBack = props.onBack || (() => {})
+
+    this.entry = null
+    this.passwordVisible = false
+    this.decryptedPassword = ''
+    this.loading = true
+    this.error = ''
+    this.showDeleteConfirm = false
+    this.showPermanentDeleteConfirm = false
+    this.deleting = false
+    this.toast = ''
+    this.toastTimer = null
+  }
+
+  mount() {
+    super.mount()
+    this.#loadEntry()
+    return this
+  }
+
+  render() {
+    this.el = this.ce('div', { className: 'entry-detail' })
+    this.#renderContent()
+    return this.el
+  }
+
+  #renderContent() {
+    this.el.innerHTML = ''
+
+    // Toast
+    if (this.toast) {
+      this.el.appendChild(this.ce('div', { className: 'toast', textContent: this.toast }))
+    }
+
+    if (this.loading) {
+      this.el.appendChild(this.ce('div', { className: 'loading', textContent: 'Loading...' }))
+      return
+    }
+
+    if (this.error) {
+      this.el.appendChild(this.ce('div', { className: 'error-banner', textContent: this.error }))
+      return
+    }
+
+    if (!this.entry) {
+      this.el.appendChild(this.ce('div', { className: 'empty-state', textContent: 'Entry not found' }))
+      return
+    }
+
+    const isInTrash = isTrashGroup(this.entry.groupId)
+
+    const card = this.ce('div', { className: 'detail-card' })
+
+    // Header
+    const header = this.ce('div', { className: 'detail-header' },
+      this.ce('h2', { textContent: this.entry.title }),
+      this.ce('div', { className: 'header-actions' },
+        isInTrash
+          ? this.ce('button', { className: 'btn btn-primary btn-sm', id: 'restore-btn', textContent: '↩️ Restore' })
+          : this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'edit-btn', textContent: '✏️ Edit' }),
+        isInTrash
+          ? this.ce('button', { className: 'btn btn-danger btn-sm', id: 'perm-delete-btn', textContent: '🗑 Delete Forever' })
+          : this.ce('button', { className: 'btn btn-danger btn-sm', id: 'trash-btn', textContent: '🗑 Move to Trash' }),
+      ),
+    )
+    card.appendChild(header)
+
+    // Fields
+    const fields = this.ce('div', { className: 'detail-fields' })
+
+    if (this.entry.username) {
+      fields.appendChild(this.ce('div', { className: 'detail-field' },
+        this.ce('span', { className: 'field-label', textContent: 'Username' }),
+        this.ce('div', { className: 'field-value' },
+          this.ce('span', { textContent: this.entry.username }),
+          this.ce('button', { className: 'btn btn-ghost btn-sm copy-btn', textContent: '📋', title: 'Copy username', 'data-copy': this.entry.username }),
+        ),
+      ))
+    }
+
+    // Password
+    fields.appendChild(this.ce('div', { className: 'detail-field' },
+      this.ce('span', { className: 'field-label', textContent: 'Password' }),
+      this.ce('div', { className: 'field-value' },
+        this.ce('span', { id: 'pwd-display', textContent: this.passwordVisible ? this.decryptedPassword : '••••••••••••' }),
+        this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'toggle-pwd', textContent: this.passwordVisible ? '🙈' : '👁', title: 'Toggle visibility' }),
+        this.ce('button', { className: 'btn btn-ghost btn-sm copy-btn', textContent: '📋', title: 'Copy password', 'data-copy': this.decryptedPassword }),
+      ),
+    ))
+
+    if (this.entry.url) {
+      const urlField = this.ce('div', { className: 'detail-field' },
+        this.ce('span', { className: 'field-label', textContent: 'URL' }),
+        this.ce('div', { className: 'field-value' },
+          this.ce('a', { href: this.entry.url, target: '_blank', rel: 'noopener noreferrer', textContent: this.entry.url }),
+          this.ce('button', { className: 'btn btn-ghost btn-sm copy-btn', textContent: '📋', title: 'Copy URL', 'data-copy': this.entry.url }),
+        ),
+      )
+      fields.appendChild(urlField)
+    }
+
+    if (this.entry.notes) {
+      fields.appendChild(this.ce('div', { className: 'detail-field' },
+        this.ce('span', { className: 'field-label', textContent: 'Notes' }),
+        this.ce('div', { className: 'field-value notes', textContent: this.entry.notes }),
+      ))
+    }
+
+    card.appendChild(fields)
+
+    // Meta
+    card.appendChild(this.ce('div', { className: 'detail-meta' },
+      this.ce('span', { className: 'text-xs text-muted', textContent: `Created: ${new Date(this.entry.createdAt).toLocaleString()}` }),
+      this.ce('span', { className: 'text-xs text-muted', textContent: `Updated: ${new Date(this.entry.updatedAt).toLocaleString()}` }),
+    ))
+
+    this.el.appendChild(card)
+
+    // Wire up buttons
+    const editBtn = this.q('#edit-btn')
+    if (editBtn) this.on(editBtn, 'click', () => this.onEdit(this.entry.id))
+
+    const restoreBtn = this.q('#restore-btn')
+    if (restoreBtn) this.on(restoreBtn, 'click', () => this.onEdit(this.entry.id))
+
+    const trashBtn = this.q('#trash-btn')
+    if (trashBtn) this.on(trashBtn, 'click', () => { this.showDeleteConfirm = true; this.#renderModal() })
+
+    const permDeleteBtn = this.q('#perm-delete-btn')
+    if (permDeleteBtn) this.on(permDeleteBtn, 'click', () => { this.showPermanentDeleteConfirm = true; this.#renderModal() })
+
+    // Toggle password visibility
+    const togglePwd = this.q('#toggle-pwd')
+    if (togglePwd) {
+      this.on(togglePwd, 'click', () => {
+        this.passwordVisible = !this.passwordVisible
+        const display = this.q('#pwd-display')
+        if (display) display.textContent = this.passwordVisible ? this.decryptedPassword : '••••••••••••'
+        togglePwd.textContent = this.passwordVisible ? '🙈' : '👁'
+      })
+    }
+
+    // Copy buttons
+    this.qa('[data-copy]').forEach(btn => {
+      this.on(btn, 'click', () => {
+        const text = btn.dataset.copy
+        this.#copyToClipboard(text, btn.title || 'Text')
+      })
+    })
+  }
+
+  async #loadEntry() {
+    this.loading = true
+    this.error = ''
+    try {
+      this.entry = await getEntryById(this.entryId)
+      if (this.entry && app.encryptionKey) {
+        this.decryptedPassword = await decrypt(this.entry.encryptedPassword, app.encryptionKey)
+      }
+    } catch (e) {
+      this.error = 'Failed to load entry: ' + e.message
+    }
+    this.loading = false
+    this.#renderContent()
+  }
+
+  #showToast(message) {
+    this.toast = message
+    if (this.toastTimer) clearTimeout(this.toastTimer)
+    this.toastTimer = setTimeout(() => { this.toast = '' }, 3000)
+  }
+
+  async #copyToClipboard(text, label) {
+    try {
+      await navigator.clipboard.writeText(text)
+      this.#showToast(`✓ ${label} copied (auto-clear in 15s)`)
+      setTimeout(async () => {
+        try { await navigator.clipboard.writeText('') } catch {}
+      }, 15000)
+    } catch {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      this.#showToast(`✓ ${label} copied`)
+    }
+  }
+
+  #renderModal() {
+    const existing = this.q('.ed-modal-overlay')
+    if (existing) existing.remove()
+
+    let title, message, actionId, actionLabel
+    if (this.showDeleteConfirm) {
+      title = 'Move to Trash'
+      message = `Move "${this.entry.title}" to the trash? You can restore it later.`
+      actionId = 'confirm-trash-btn'
+      actionLabel = this.deleting ? 'Moving...' : 'Move to Trash'
+    } else {
+      title = 'Delete Forever'
+      message = `Permanently delete "${this.entry.title}"? This cannot be undone.`
+      actionId = 'confirm-perm-delete-btn'
+      actionLabel = this.deleting ? 'Deleting...' : 'Delete Forever'
+    }
+
+    const overlay = this.ce('div', { className: 'ed-modal-overlay', role: 'presentation' },
+      this.ce('div', { className: 'ed-modal', role: 'dialog', 'aria-modal': 'true', tabindex: '-1' },
+        this.ce('h3', { textContent: title }),
+        this.ce('p', { textContent: message }),
+        this.ce('div', { className: 'ed-modal-actions' },
+          this.ce('button', { className: 'btn btn-danger', id: actionId, disabled: this.deleting, textContent: actionLabel }),
+          this.ce('button', { className: 'btn btn-ghost', id: 'cancel-modal-btn', textContent: 'Cancel' }),
+        ),
+      ),
+    )
+
+    this.el.appendChild(overlay)
+
+    this.on(overlay, 'click', () => {
+      this.showDeleteConfirm = false
+      this.showPermanentDeleteConfirm = false
+      overlay.remove()
+    })
+    this.on(overlay.querySelector('.ed-modal'), 'click', (e) => e.stopPropagation())
+
+    const actionBtn = overlay.querySelector(`#${actionId}`)
+    if (actionBtn) {
+      if (this.showDeleteConfirm) {
+        this.on(actionBtn, 'click', () => this.#handleMoveToTrash())
+      } else {
+        this.on(actionBtn, 'click', () => this.#handlePermanentDelete())
+      }
+    }
+
+    const cancelBtn = overlay.querySelector('#cancel-modal-btn')
+    if (cancelBtn) {
+      this.on(cancelBtn, 'click', () => {
+        this.showDeleteConfirm = false
+        this.showPermanentDeleteConfirm = false
+        overlay.remove()
+      })
+    }
+  }
+
+  async #handleMoveToTrash() {
+    this.deleting = true
+    try {
+      await moveToTrash(this.entryId)
+      this.onBack()
+    } catch (e) {
+      this.error = 'Failed to move to trash: ' + e.message
+    }
+    this.deleting = false
+    this.showDeleteConfirm = false
+  }
+
+  async #handlePermanentDelete() {
+    this.deleting = true
+    try {
+      await deleteEntry(this.entryId)
+      this.onBack()
+    } catch (e) {
+      this.error = 'Failed to permanently delete: ' + e.message
+    }
+    this.deleting = false
+    this.showPermanentDeleteConfirm = false
+  }
+}
diff --git a/src/components/EntryDetail.svelte b/src/components/EntryDetail.svelte
deleted file mode 100644
index 2209a60..0000000
--- a/src/components/EntryDetail.svelte
+++ /dev/null
@@ -1,362 +0,0 @@
-<script>
-  import { getEntryById, moveToTrash, deleteEntry } from '../lib/storage/db.js'
-  import { decrypt } from '../lib/crypto/crypto.js'
-  import { app } from '../lib/stores/app.svelte.js'
-  import { isTrashGroup } from '../lib/models/schema.js'
-
-  let { entryId, onEdit, onBack } = $props()
-
-  let entry = $state(null)
-  let passwordVisible = $state(false)
-  let decryptedPassword = $state('')
-  let loading = $state(true)
-  let error = $state('')
-  let showDeleteConfirm = $state(false)
-  let showPermanentDeleteConfirm = $state(false)
-  let deleting = $state(false)
-  let toast = $state('')
-  const isInTrash = $derived(entry && isTrashGroup(entry.groupId))
-  let toastTimer = null
-
-  async function loadEntry() {
-    loading = true
-    error = ''
-    try {
-      entry = await getEntryById(entryId)
-      if (entry && app.encryptionKey) {
-        decryptedPassword = await decrypt(entry.encryptedPassword, app.encryptionKey)
-      }
-    } catch (e) {
-      error = 'Failed to load entry: ' + e.message
-    }
-    loading = false
-  }
-
-  loadEntry()
-
-  function showToast(message) {
-    toast = message
-    if (toastTimer) clearTimeout(toastTimer)
-    toastTimer = setTimeout(() => { toast = '' }, 3000)
-  }
-
-  async function copyToClipboard(text, label) {
-    try {
-      await navigator.clipboard.writeText(text)
-      showToast(`✓ ${label} copied (auto-clear in 15s)`)
-      // Auto-clear after 15 seconds
-      setTimeout(async () => {
-        try {
-          // Try to clear by writing spaces
-          await navigator.clipboard.writeText('')
-        } catch {
-          // Some browsers don't allow clearing clipboard
-        }
-      }, 15000)
-    } catch (e) {
-      // Fallback for browsers without clipboard API
-      const textarea = document.createElement('textarea')
-      textarea.value = text
-      textarea.style.position = 'fixed'
-      textarea.style.opacity = '0'
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
-      showToast(`✓ ${label} copied`)
-    }
-  }
-
-  async function handleMoveToTrash() {
-    deleting = true
-    try {
-      await moveToTrash(entryId)
-      onBack()
-    } catch (e) {
-      error = 'Failed to move to trash: ' + e.message
-    }
-    deleting = false
-    showDeleteConfirm = false
-  }
-
-  async function handlePermanentDelete() {
-    deleting = true
-    try {
-      await deleteEntry(entryId)
-      onBack()
-    } catch (e) {
-      error = 'Failed to permanently delete: ' + e.message
-    }
-    deleting = false
-    showPermanentDeleteConfirm = false
-  }
-</script>
-
-<div class="entry-detail">
-  <!-- Toast notification -->
-  {#if toast}
-    <div class="toast">{toast}</div>
-  {/if}
-
-  {#if loading}
-    <div class="loading">Loading...</div>
-  {:else if error}
-    <div class="error-banner">{error}</div>
-  {:else if !entry}
-    <div class="empty-state">Entry not found</div>
-  {:else}
-    <div class="detail-card">
-      <div class="detail-header">
-        <h2>{entry.title}</h2>
-        <div class="header-actions">
-          {#if isInTrash}
-            <button class="btn btn-primary btn-sm" onclick={() => onEdit(entry.id)}>↩️ Restore</button>
-            <button class="btn btn-danger btn-sm" onclick={() => showPermanentDeleteConfirm = true}>🗑 Delete Forever</button>
-          {:else}
-            <button class="btn btn-ghost btn-sm" onclick={() => onEdit(entry.id)}>✏️ Edit</button>
-            <button class="btn btn-danger btn-sm" onclick={() => showDeleteConfirm = true}>🗑 Move to Trash</button>
-          {/if}
-        </div>
-      </div>
-
-      <div class="detail-fields">
-        {#if entry.username}
-          <div class="detail-field">
-            <span class="field-label">Username</span>
-            <div class="field-value">
-              <span>{entry.username}</span>
-              <button class="btn btn-ghost btn-sm copy-btn" onclick={() => copyToClipboard(entry.username, 'Username')} title="Copy username">📋</button>
-            </div>
-          </div>
-        {/if}
-
-        <div class="detail-field">
-          <span class="field-label">Password</span>
-          <div class="field-value">
-            <span>{passwordVisible ? decryptedPassword : '••••••••••••'}</span>
-            <button class="btn btn-ghost btn-sm" onclick={() => passwordVisible = !passwordVisible} title="Toggle visibility">
-              {passwordVisible ? '🙈' : '👁'}
-            </button>
-            <button class="btn btn-ghost btn-sm copy-btn" onclick={() => copyToClipboard(decryptedPassword, 'Password')} title="Copy password">📋</button>
-          </div>
-        </div>
-
-        {#if entry.url}
-          <div class="detail-field">
-            <span class="field-label">URL</span>
-            <div class="field-value">
-              <a href={entry.url} target="_blank" rel="noopener noreferrer">{entry.url}</a>
-              <button class="btn btn-ghost btn-sm copy-btn" onclick={() => copyToClipboard(entry.url, 'URL')} title="Copy URL">📋</button>
-            </div>
-          </div>
-        {/if}
-
-        {#if entry.notes}
-          <div class="detail-field">
-            <span class="field-label">Notes</span>
-            <div class="field-value notes">{entry.notes}</div>
-          </div>
-        {/if}
-      </div>
-
-      <div class="detail-meta">
-        <span class="text-xs text-muted">Created: {new Date(entry.createdAt).toLocaleString()}</span>
-        <span class="text-xs text-muted">Updated: {new Date(entry.updatedAt).toLocaleString()}</span>
-      </div>
-    </div>
-
-    <!-- Move to Trash confirmation modal -->
-    {#if showDeleteConfirm}
-      <div class="modal-overlay" role="presentation" onclick={() => showDeleteConfirm = false}>
-        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-        <div class="modal" role="dialog" aria-modal="true" aria-label="Move to trash confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-          <h3>Move to Trash</h3>
-          <p>Move "<strong>{entry.title}</strong>" to the trash? You can restore it later.</p>
-          <div class="modal-actions">
-            <button class="btn btn-danger" onclick={handleMoveToTrash} disabled={deleting}>
-              {deleting ? 'Moving...' : 'Move to Trash'}
-            </button>
-            <button class="btn btn-ghost" onclick={() => showDeleteConfirm = false}>Cancel</button>
-          </div>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Permanent delete confirmation modal -->
-    {#if showPermanentDeleteConfirm}
-      <div class="modal-overlay" role="presentation" onclick={() => showPermanentDeleteConfirm = false}>
-        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-        <div class="modal" role="dialog" aria-modal="true" aria-label="Permanent delete confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-          <h3>Delete Forever</h3>
-          <p>Permanently delete "<strong>{entry.title}</strong>"? This cannot be undone.</p>
-          <div class="modal-actions">
-            <button class="btn btn-danger" onclick={handlePermanentDelete} disabled={deleting}>
-              {deleting ? 'Deleting...' : 'Delete Forever'}
-            </button>
-            <button class="btn btn-ghost" onclick={() => showPermanentDeleteConfirm = false}>Cancel</button>
-          </div>
-        </div>
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style>
-  .loading, .empty-state {
-    text-align: center;
-    padding: 3rem;
-    color: var(--color-text-muted);
-  }
-
-  .error-banner {
-    padding: 12px 16px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-  }
-
-  .toast {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    padding: 10px 16px;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    font-size: 0.85rem;
-    color: var(--color-success);
-    box-shadow: var(--shadow);
-    z-index: 1000;
-    animation: slideIn 200ms ease;
-  }
-
-  @keyframes slideIn {
-    from { transform: translateY(20px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-  }
-
-  .detail-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 600px;
-  }
-
-  .detail-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--color-border);
-    gap: 12px;
-  }
-
-  .detail-header h2 {
-    font-size: 1.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .header-actions {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-  }
-
-  .detail-fields {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-
-  .field-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--color-text-muted);
-    margin-bottom: 4px;
-    display: block;
-  }
-
-  .field-value {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 0.95rem;
-    word-break: break-all;
-  }
-
-  .field-value.notes {
-    white-space: pre-wrap;
-  }
-
-  .field-value a {
-    color: var(--color-primary);
-    text-decoration: none;
-  }
-
-  .field-value a:hover {
-    text-decoration: underline;
-  }
-
-  .copy-btn {
-    flex-shrink: 0;
-  }
-
-  .detail-meta {
-    display: flex;
-    gap: 16px;
-    margin-top: 24px;
-    padding-top: 16px;
-    border-top: 1px solid var(--color-border);
-  }
-
-  /* Modal */
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 400px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal h3 {
-    margin-bottom: 12px;
-  }
-
-  .modal p {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 20px;
-  }
-
-  .modal-actions {
-    display: flex;
-    gap: 8px;
-  }
-
-  @media (max-width: 600px) {
-    .header-actions {
-      display: none;
-    }
-  }
-</style>
diff --git a/src/components/EntryForm.js b/src/components/EntryForm.js
new file mode 100644
index 0000000..bde23a3
--- /dev/null
+++ b/src/components/EntryForm.js
@@ -0,0 +1,275 @@
+/**
+ * EntryForm — create/edit credential form.
+ */
+
+import { Component } from './component.js'
+import { addEntry, updateEntry, getEntryById, getGroups } from '../lib/storage/db.js'
+import { encrypt, decrypt } from '../lib/crypto/crypto.js'
+import { createEntry, updateEntry as updateEntryModel, validateEntry, isTrashGroup } from '../lib/models/schema.js'
+import { generatePassword } from '../lib/crypto/crypto.js'
+import { app } from '../lib/stores/app.js'
+import { search } from '../lib/stores/search.js'
+import { autofocus } from '../lib/autofocus.js'
+
+export class EntryForm extends Component {
+  /** @param {{ entryId: string|null, onSave: Function, onCancel: Function }} props */
+  constructor(container, props = {}) {
+    super(container)
+    this.entryId = props.entryId || null
+    this.onSave = props.onSave || (() => {})
+    this.onCancel = props.onCancel || (() => {})
+
+    this.title = ''
+    this.username = ''
+    this.password = ''
+    this.url = ''
+    this.notes = ''
+    this.groupId = ''
+    this.passwordVisible = false
+    this.groups = []
+    this.loading = true
+    this.error = ''
+    this.saving = false
+    this.isEdit = false
+    this.formErrors = []
+  }
+
+  mount() {
+    super.mount()
+    this.#loadForm()
+    return this
+  }
+
+  render() {
+    this.el = this.ce('div', { className: 'entry-form' })
+    this.#renderContent()
+    return this.el
+  }
+
+  #renderContent() {
+    this.el.innerHTML = ''
+
+    if (this.loading) {
+      this.el.appendChild(this.ce('div', { className: 'loading', textContent: 'Loading...' }))
+      return
+    }
+
+    if (this.error && !this.isEdit) {
+      this.el.appendChild(this.ce('div', { className: 'error-banner', textContent: this.error }))
+      return
+    }
+
+    const form = this.ce('form', { className: 'ef-form-card', id: 'entry-form' })
+
+    // Validation errors
+    if (this.formErrors.length > 0) {
+      const errDiv = this.ce('div', { className: 'validation-errors' })
+      for (const err of this.formErrors) {
+        errDiv.appendChild(this.ce('div', { className: 'validation-error', textContent: `⚠ ${err}` }))
+      }
+      form.appendChild(errDiv)
+    }
+
+    // Title
+    form.appendChild(this.ce('div', { className: 'form-group' },
+      this.ce('label', { htmlFor: 'title', textContent: 'Title *' }),
+      this.ce('input', { id: 'title', type: 'text', placeholder: 'e.g. GitHub, Gmail', value: this.title }),
+    ))
+
+    // Username
+    form.appendChild(this.ce('div', { className: 'form-group' },
+      this.ce('label', { htmlFor: 'username', textContent: 'Username / Email' }),
+      this.ce('input', { id: 'username', type: 'text', placeholder: 'username or email', value: this.username }),
+    ))
+
+    // Password
+    const pwdGroup = this.ce('div', { className: 'form-group' },
+      this.ce('label', { htmlFor: 'password', textContent: 'Password *' }),
+      this.ce('div', { className: 'password-input-group' },
+        this.ce('input', {
+          id: 'password',
+          type: this.passwordVisible ? 'text' : 'password',
+          placeholder: 'Password',
+          value: this.password,
+        }),
+        this.ce('button', { type: 'button', className: 'btn btn-ghost btn-sm', id: 'toggle-pwd', textContent: this.passwordVisible ? '🙈' : '👁', title: 'Toggle visibility' }),
+        this.ce('button', { type: 'button', className: 'btn btn-ghost btn-sm', id: 'generate-pwd', textContent: '🎲', title: 'Generate password' }),
+      ),
+    )
+    form.appendChild(pwdGroup)
+
+    // URL
+    form.appendChild(this.ce('div', { className: 'form-group' },
+      this.ce('label', { htmlFor: 'url', textContent: 'URL' }),
+      this.ce('input', { id: 'url', type: 'url', placeholder: 'https://example.com', value: this.url }),
+    ))
+
+    // Group
+    const select = this.ce('select', { id: 'group' })
+    const defaultOpt = this.ce('option', { value: '' }, this.text('No group'))
+    select.appendChild(defaultOpt)
+    for (const group of this.groups) {
+      if (isTrashGroup(group.id)) continue
+      const opt = this.ce('option', { value: group.id }, this.text(group.name))
+      if (group.id === this.groupId) opt.selected = true
+      select.appendChild(opt)
+    }
+    form.appendChild(this.ce('div', { className: 'form-group' },
+      this.ce('label', { htmlFor: 'group', textContent: 'Group' }),
+      select,
+    ))
+
+    // Notes
+    form.appendChild(this.ce('div', { className: 'form-group' },
+      this.ce('label', { htmlFor: 'notes', textContent: 'Notes' }),
+      this.ce('textarea', { id: 'notes', placeholder: 'Any additional notes...' }),
+    ))
+
+    // Actions
+    form.appendChild(this.ce('div', { className: 'ef-form-actions' },
+      this.ce('button', {
+        type: 'submit',
+        className: 'btn btn-primary',
+        disabled: this.saving,
+        textContent: this.saving ? 'Saving...' : (this.isEdit ? '💾 Update' : '➕ Create'),
+      }),
+      this.ce('button', { type: 'button', className: 'btn btn-ghost', id: 'cancel-btn', textContent: 'Cancel' }),
+    ))
+
+    this.el.appendChild(form)
+
+    // Wire up form events
+    const formEl = this.q('#entry-form')
+    if (formEl) this.on(formEl, 'submit', this.#handleSubmit)
+
+    const cancelBtn = this.q('#cancel-btn')
+    if (cancelBtn) this.on(cancelBtn, 'click', () => this.onCancel())
+
+    const togglePwd = this.q('#toggle-pwd')
+    if (togglePwd) {
+      this.on(togglePwd, 'click', () => {
+        this.passwordVisible = !this.passwordVisible
+        const pwdInput = this.q('#password')
+        if (pwdInput) pwdInput.type = this.passwordVisible ? 'text' : 'password'
+        togglePwd.textContent = this.passwordVisible ? '🙈' : '👁'
+      })
+    }
+
+    const generatePwd = this.q('#generate-pwd')
+    if (generatePwd) {
+      this.on(generatePwd, 'click', () => {
+        this.password = generatePassword({ length: 16 })
+        const pwdInput = this.q('#password')
+        if (pwdInput) pwdInput.value = this.password
+      })
+    }
+
+    // Wire input changes
+    const titleInput = this.q('#title')
+    if (titleInput) this.on(titleInput, 'input', (e) => { this.title = e.target.value })
+    const usernameInput = this.q('#username')
+    if (usernameInput) this.on(usernameInput, 'input', (e) => { this.username = e.target.value })
+    const pwdInput = this.q('#password')
+    if (pwdInput) this.on(pwdInput, 'input', (e) => { this.password = e.target.value })
+    const urlInput = this.q('#url')
+    if (urlInput) this.on(urlInput, 'input', (e) => { this.url = e.target.value })
+    const notesInput = this.q('#notes')
+    if (notesInput) this.on(notesInput, 'input', (e) => { this.notes = e.target.value })
+    const groupSelect = this.q('#group')
+    if (groupSelect) this.on(groupSelect, 'change', (e) => { this.groupId = e.target.value })
+
+    // Autofocus title on new entries
+    if (!this.isEdit && titleInput) autofocus(titleInput, true)
+  }
+
+  async #loadForm() {
+    this.loading = true
+    try {
+      this.groups = await getGroups()
+      if (this.entryId) {
+        this.isEdit = true
+        const entry = await getEntryById(this.entryId)
+        if (entry) {
+          this.title = entry.title
+          this.username = entry.username
+          this.password = await decrypt(entry.encryptedPassword, app.encryptionKey)
+          this.url = entry.url || ''
+          this.notes = entry.notes || ''
+          this.groupId = entry.groupId || ''
+        } else {
+          this.error = 'Entry not found'
+        }
+      } else {
+        const active = search.activeGroupId
+        this.groupId = (active !== 'all' && active !== 'trash') ? active : ''
+      }
+    } catch (e) {
+      this.error = 'Failed to load form: ' + e.message
+    }
+    this.loading = false
+    this.#renderContent()
+  }
+
+  #handleSubmit = async (e) => {
+    e.preventDefault()
+    this.formErrors = []
+    this.error = ''
+    this.saving = true
+
+    // Read current values from inputs
+    const titleInput = this.q('#title')
+    if (titleInput) this.title = titleInput.value
+    const usernameInput = this.q('#username')
+    if (usernameInput) this.username = usernameInput.value
+    const pwdInput = this.q('#password')
+    if (pwdInput) this.password = pwdInput.value
+    const urlInput = this.q('#url')
+    if (urlInput) this.url = urlInput.value
+    const notesInput = this.q('#notes')
+    if (notesInput) this.notes = notesInput.value
+    const groupSelect = this.q('#group')
+    if (groupSelect) this.groupId = groupSelect.value
+
+    try {
+      const validation = validateEntry({ title: this.title, username: this.username, encryptedPassword: this.password })
+      if (!validation.valid) {
+        this.formErrors = validation.errors
+        this.saving = false
+        this.#renderContent()
+        return
+      }
+
+      const encryptedPassword = await encrypt(this.password, app.encryptionKey)
+
+      if (this.isEdit) {
+        const existing = await getEntryById(this.entryId)
+        const updated = updateEntryModel(existing, {
+          title: this.title,
+          username: this.username,
+          encryptedPassword,
+          url: this.url,
+          notes: this.notes,
+          groupId: this.groupId,
+        })
+        await updateEntry(updated)
+      } else {
+        const entry = createEntry({
+          title: this.title,
+          username: this.username,
+          encryptedPassword,
+          url: this.url,
+          notes: this.notes,
+          groupId: this.groupId,
+        })
+        await addEntry(entry)
+      }
+
+      this.onSave()
+    } catch (e) {
+      this.error = 'Failed to save: ' + e.message
+    }
+
+    this.saving = false
+    this.#renderContent()
+  }
+}
diff --git a/src/components/EntryForm.svelte b/src/components/EntryForm.svelte
deleted file mode 100644
index a226270..0000000
--- a/src/components/EntryForm.svelte
+++ /dev/null
@@ -1,232 +0,0 @@
-<script>
-  import { addEntry, updateEntry, getEntryById, getGroups } from '../lib/storage/db.js'
-  import { encrypt, decrypt } from '../lib/crypto/crypto.js'
-  import { createEntry, updateEntry as updateEntryModel, validateEntry, isTrashGroup } from '../lib/models/schema.js'
-  import { generatePassword } from '../lib/crypto/crypto.js'
-  import { app } from '../lib/stores/app.svelte.js'
-  import { search as searchStore } from '../lib/stores/search.svelte.js'
-  import { autofocus } from '../lib/autofocus.js'
-
-  let { entryId, onSave, onCancel } = $props()
-
-  let title = $state('')
-  let username = $state('')
-  let password = $state('')
-  let url = $state('')
-  let notes = $state('')
-  let groupId = $state('')
-  let passwordVisible = $state(false)
-  let groups = $state([])
-  let loading = $state(true)
-  let error = $state('')
-  let saving = $state(false)
-  let isEdit = $state(false)
-  let formErrors = $state([])
-
-  async function loadForm() {
-    loading = true
-    try {
-      groups = await getGroups()
-      if (entryId) {
-        isEdit = true
-        const entry = await getEntryById(entryId)
-        if (entry) {
-          title = entry.title
-          username = entry.username
-          password = await decrypt(entry.encryptedPassword, app.encryptionKey)
-          url = entry.url || ''
-          notes = entry.notes || ''
-          groupId = entry.groupId || ''
-        } else {
-          error = 'Entry not found'
-        }
-      } else {
-        // Default to the currently active group if it's a real group
-        const active = searchStore.activeGroupId
-        groupId = (active !== 'all' && active !== 'trash') ? active : ''
-      }
-    } catch (e) {
-      error = 'Failed to load form: ' + e.message
-    }
-    loading = false
-  }
-
-  loadForm()
-
-  async function handleSubmit() {
-    formErrors = []
-    error = ''
-    saving = true
-
-    try {
-      const validation = validateEntry({ title, username, encryptedPassword: password })
-      if (!validation.valid) {
-        formErrors = validation.errors
-        saving = false
-        return
-      }
-
-      const encryptedPassword = await encrypt(password, app.encryptionKey)
-
-      if (isEdit) {
-        const existing = await getEntryById(entryId)
-        const updated = updateEntryModel(existing, {
-          title,
-          username,
-          encryptedPassword,
-          url,
-          notes,
-          groupId,
-        })
-        await updateEntry(updated)
-      } else {
-        const entry = createEntry({
-          title,
-          username,
-          encryptedPassword,
-          url,
-          notes,
-          groupId,
-        })
-        await addEntry(entry)
-      }
-
-      onSave()
-    } catch (e) {
-      error = 'Failed to save: ' + e.message
-    }
-
-    saving = false
-  }
-</script>
-
-<div class="entry-form">
-  {#if loading}
-    <div class="loading">Loading...</div>
-  {:else}
-    {#if error}
-      <div class="error-banner">{error}</div>
-    {/if}
-
-    <form class="form-card" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
-      {#if formErrors.length > 0}
-        <div class="validation-errors">
-          {#each formErrors as err}
-            <div class="validation-error">⚠ {err}</div>
-          {/each}
-        </div>
-      {/if}
-
-      <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} />
-      </div>
-
-      <div class="form-group">
-        <label for="username">Username / Email</label>
-        <input id="username" type="text" bind:value={username} placeholder="username or email" />
-      </div>
-
-      <div class="form-group">
-        <label for="password">Password *</label>
-        <div class="password-input-group">
-          <input
-            id="password"
-            type={passwordVisible ? 'text' : 'password'}
-            bind:value={password}
-            placeholder="Password"
-          />
-          <button type="button" class="btn btn-ghost btn-sm" onclick={() => passwordVisible = !passwordVisible} title="Toggle visibility">
-            {passwordVisible ? '🙈' : '👁'}
-          </button>
-          <button type="button" class="btn btn-ghost btn-sm" onclick={() => password = generatePassword({ length: 16 })} title="Generate password">
-            🎲
-          </button>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="url">URL</label>
-        <input id="url" type="url" bind:value={url} placeholder="https://example.com" />
-      </div>
-
-      <div class="form-group">
-        <label for="group">Group</label>
-        <select id="group" bind:value={groupId}>
-          <option value="">No group</option>
-          {#each groups as group}
-            {#if !isTrashGroup(group.id)}
-              <option value={group.id}>{group.name}</option>
-            {/if}
-          {/each}
-        </select>
-      </div>
-
-      <div class="form-group">
-        <label for="notes">Notes</label>
-        <textarea id="notes" bind:value={notes} placeholder="Any additional notes..."></textarea>
-      </div>
-
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary" disabled={saving}>
-          {saving ? 'Saving...' : (isEdit ? '💾 Update' : '➕ Create')}
-        </button>
-        <button type="button" class="btn btn-ghost" onclick={onCancel}>Cancel</button>
-      </div>
-    </form>
-  {/if}
-</div>
-
-<style>
-  .loading {
-    text-align: center;
-    padding: 3rem;
-    color: var(--color-text-muted);
-  }
-
-  .error-banner {
-    padding: 12px 16px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    margin-bottom: 16px;
-  }
-
-  .form-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 500px;
-  }
-
-  .validation-errors {
-    margin-bottom: 16px;
-    padding: 12px;
-    background: rgba(251, 191, 36, 0.1);
-    border: 1px solid rgba(251, 191, 36, 0.3);
-    border-radius: var(--radius-md);
-  }
-
-  .validation-error {
-    font-size: 0.85rem;
-    color: var(--color-warning);
-  }
-
-  .password-input-group {
-    display: flex;
-    gap: 8px;
-  }
-
-  .password-input-group input {
-    flex: 1;
-  }
-
-  .form-actions {
-    display: flex;
-    gap: 8px;
-    margin-top: 20px;
-  }
-</style>
diff --git a/src/components/EntryList.js b/src/components/EntryList.js
new file mode 100644
index 0000000..7b2d023
--- /dev/null
+++ b/src/components/EntryList.js
@@ -0,0 +1,212 @@
+/**
+ * EntryList — credential entries grid with search/filter support.
+ */
+
+import { Component } from './component.js'
+import { getEntries, searchEntries, restoreEntry, TRASH_GROUP_ID } from '../lib/storage/db.js'
+import { search } from '../lib/stores/search.js'
+
+export class EntryList extends Component {
+  entries = []
+  loading = true
+  error = ''
+  resultCount = 0
+  dragging = false
+
+  /** @param {{ onSelect: Function, onAdd: Function }} props */
+  constructor(container, props = {}) {
+    super(container)
+    this.onSelect = props.onSelect || (() => {})
+    this.onAdd = props.onAdd || (() => {})
+  }
+
+  mount() {
+    super.mount()
+    // Subscribe to reactive changes
+    this.subscribe(search, 'debouncedQuery', () => this.#loadEntries())
+    this.subscribe(search, 'activeGroupId', () => this.#loadEntries())
+    this.subscribe(search, 'refreshTrigger', () => this.#loadEntries())
+    // Initial load (subscribers only fire on change, not on mount)
+    this.#loadEntries()
+    return this
+  }
+
+  render() {
+    this.el = this.ce('div', { className: 'entry-list' })
+    this.#renderContent()
+    return this.el
+  }
+
+  #renderContent() {
+    this.el.innerHTML = ''
+    const isTrashView = search.activeGroupId === 'trash'
+
+    if (this.loading) {
+      this.el.appendChild(this.ce('div', { className: 'loading', textContent: 'Loading entries...' }))
+      return
+    }
+
+    if (this.error) {
+      this.el.appendChild(this.ce('div', { className: 'error-banner', textContent: this.error }))
+      return
+    }
+
+    if (this.entries.length === 0) {
+      const emptyState = this.ce('div', { className: 'empty-state' })
+      const icon = search.query ? '🔍' : (isTrashView ? '🗑' : '🔑')
+      const text = search.query ? 'No results found' : (isTrashView ? 'Trash is empty' : 'No entries yet')
+      const hint = search.query
+        ? 'Try a different search term'
+        : (isTrashView ? 'Deleted entries will appear here' : 'Add your first login credential to get started')
+
+      emptyState.appendChild(this.ce('p', { className: 'empty-icon', textContent: icon }))
+      emptyState.appendChild(this.ce('p', { className: 'empty-text', textContent: text }))
+      emptyState.appendChild(this.ce('p', { className: 'empty-hint', textContent: hint }))
+
+      if (!search.query && !isTrashView) {
+        const addBtn = this.ce('button', { className: 'btn btn-primary mt-3', textContent: '+ New Entry' })
+        this.on(addBtn, 'click', () => this.onAdd())
+        emptyState.appendChild(addBtn)
+      }
+
+      this.el.appendChild(emptyState)
+      return
+    }
+
+    // Results info
+    const info = this.ce('div', { className: 'results-info' })
+    const countSpan = this.ce('span', { className: 'text-sm text-muted' })
+    countSpan.appendChild(this.text(`${this.resultCount} entr${this.resultCount === 1 ? 'y' : 'ies'}`))
+    if (search.query) {
+      countSpan.appendChild(this.text(' matching "'))
+      const strong = document.createElement('strong')
+      strong.textContent = this.#escapeHtml(search.query)
+      countSpan.appendChild(strong)
+      countSpan.appendChild(this.text('"'))
+    }
+    info.appendChild(countSpan)
+    this.el.appendChild(info)
+
+    // Table
+    const table = this.ce('table', { className: 'entries-table' },
+      this.ce('thead', null,
+        this.ce('tr', null,
+          this.ce('th', { textContent: 'Title' }),
+          this.ce('th', { textContent: 'Username' }),
+          this.ce('th', { textContent: 'URL' }),
+          this.ce('th', { textContent: 'Notes' }),
+          isTrashView ? this.ce('th', { style: 'width: 60px' }) : null,
+        ),
+      ),
+      this.ce('tbody'),
+    )
+
+    const tbody = table.querySelector('tbody')
+    for (const entry of this.entries) {
+      const tr = this.ce('tr', {
+        className: `entry-row${this.dragging ? ' dragging' : ''}`,
+        draggable: !isTrashView,
+      })
+
+      // Title cell
+      const tdTitle = this.ce('td')
+      if (!isTrashView) {
+        tdTitle.appendChild(this.ce('span', { className: 'drag-handle', 'aria-hidden': 'true', textContent: '⠿' }))
+      }
+      tdTitle.appendChild(this.ce('span', { className: 'entry-title', textContent: entry.title }))
+      tr.appendChild(tdTitle)
+
+      // Username cell
+      tr.appendChild(this.ce('td', null,
+        this.ce('span', { className: 'entry-username', textContent: entry.username || '—' }),
+      ))
+
+      // URL cell
+      tr.appendChild(this.ce('td', null,
+        this.ce('span', { className: 'entry-url truncate', textContent: entry.url || '—' }),
+      ))
+
+      // Notes cell
+      const tdNotes = this.ce('td')
+      if (entry.notes) {
+        const tooltip = this.ce('div', { className: 'notes-tooltip' },
+          this.ce('span', { className: 'notes-icon', title: entry.notes, textContent: '🔍' }),
+          this.ce('div', { className: 'tooltip-popup', textContent: entry.notes }),
+        )
+        tdNotes.appendChild(tooltip)
+      } else {
+        tdNotes.appendChild(this.ce('span', { textContent: '—' }))
+      }
+      tr.appendChild(tdNotes)
+
+      // Restore button (trash view)
+      if (isTrashView) {
+        const tdRestore = this.ce('td')
+        const eid = entry.id
+        const restoreBtn = this.ce('button', { className: 'btn btn-ghost btn-sm restore-btn', title: 'Restore entry', textContent: '↩️' })
+        this.on(restoreBtn, 'click', (e) => { e.stopPropagation(); this.#handleRestore(eid) })
+        tdRestore.appendChild(restoreBtn)
+        tr.appendChild(tdRestore)
+      }
+
+      // Row click → select entry
+      const eid = entry.id
+      this.on(tr, 'click', () => this.onSelect(eid))
+
+      // Drag events
+      if (!isTrashView) {
+        this.on(tr, 'dragstart', (e) => {
+          this.dragging = true
+          e.dataTransfer.setData('text/plain', eid)
+          e.dataTransfer.effectAllowed = 'move'
+        })
+        this.on(tr, 'dragend', () => { this.dragging = false })
+      }
+
+      tbody.appendChild(tr)
+    }
+
+    this.el.appendChild(table)
+  }
+
+  async #loadEntries() {
+    this.loading = true
+    this.error = ''
+    try {
+      const query = search.debouncedQuery.trim()
+      const groupId = search.activeGroupId
+      const resolvedGroupId = groupId === 'trash' ? TRASH_GROUP_ID : groupId
+
+      if (query) {
+        const options = resolvedGroupId !== 'all' ? { groupId: resolvedGroupId } : {}
+        this.entries = await searchEntries(query, options)
+      } else if (resolvedGroupId !== 'all') {
+        this.entries = await getEntries({ groupId: resolvedGroupId })
+      } else {
+        this.entries = (await getEntries()).filter(e => e.groupId !== TRASH_GROUP_ID)
+      }
+
+      this.resultCount = this.entries.length
+    } catch (e) {
+      this.error = 'Failed to load entries: ' + e.message
+    }
+    this.loading = false
+    this.#renderContent()
+  }
+
+  async #handleRestore(entryId) {
+    try {
+      await restoreEntry(entryId)
+      search.refresh()
+    } catch (e) {
+      this.error = 'Failed to restore: ' + e.message
+      this.#renderContent()
+    }
+  }
+
+  #escapeHtml(str) {
+    const div = document.createElement('div')
+    div.textContent = str
+    return div.innerHTML
+  }
+}
diff --git a/src/components/EntryList.svelte b/src/components/EntryList.svelte
deleted file mode 100644
index 9ed341f..0000000
--- a/src/components/EntryList.svelte
+++ /dev/null
@@ -1,309 +0,0 @@
-<script>
-  import { getEntries, searchEntries, restoreEntry, TRASH_GROUP_ID } from '../lib/storage/db.js'
-  import { search as searchStore } from '../lib/stores/search.svelte.js'
-
-  let entries = $state([])
-  let loading = $state(true)
-  let error = $state('')
-  let resultCount = $state(0)
-  let dragging = $state(false)
-
-  let { onSelect, onAdd } = $props()
-
-  const isTrashView = $derived(searchStore.activeGroupId === 'trash')
-
-  async function loadEntries() {
-    loading = true
-    error = ''
-    try {
-      const query = searchStore.debouncedQuery.trim()
-      const groupId = searchStore.activeGroupId
-
-      // Resolve 'trash' alias to the real Trash group ID for DB queries
-      const resolvedGroupId = groupId === 'trash' ? TRASH_GROUP_ID : groupId
-
-      if (query) {
-        // Search with optional group filter
-        const options = resolvedGroupId !== 'all' ? { groupId: resolvedGroupId } : {}
-        entries = await searchEntries(query, options)
-      } else if (resolvedGroupId !== 'all') {
-        // Filter by group only
-        entries = await getEntries({ groupId: resolvedGroupId })
-      } else {
-        // Show all (excluding trashed entries)
-        entries = (await getEntries()).filter(e => e.groupId !== TRASH_GROUP_ID)
-      }
-
-      resultCount = entries.length
-    } catch (e) {
-      error = 'Failed to load entries: ' + e.message
-    }
-    loading = false
-  }
-
-  async function handleRestore(entryId) {
-    try {
-      await restoreEntry(entryId)
-      searchStore.refresh()
-    } catch (e) {
-      error = 'Failed to restore: ' + e.message
-    }
-  }
-
-  // Reload when debounced search query, active group filter, or refresh trigger changes
-  $effect(() => {
-    searchStore.debouncedQuery
-    searchStore.activeGroupId
-    searchStore.refreshTrigger
-    loadEntries()
-  })
-</script>
-
-<div class="entry-list">
-  {#if loading}
-    <div class="loading">Loading entries...</div>
-  {:else if error}
-    <div class="error-banner">{error}</div>
-  {:else if entries.length === 0}
-    <div class="empty-state">
-      <p class="empty-icon">{searchStore.query ? '🔍' : (isTrashView ? '🗑' : '🔑')}</p>
-      <p class="empty-text">{searchStore.query ? 'No results found' : (isTrashView ? 'Trash is empty' : 'No entries yet')}</p>
-      <p class="empty-hint">
-        {searchStore.query
-          ? 'Try a different search term'
-          : (isTrashView ? 'Deleted entries will appear here' : 'Add your first login credential to get started')}
-      </p>
-      {#if !searchStore.query && !isTrashView}
-        <button class="btn btn-primary mt-3" onclick={onAdd}>+ New Entry</button>
-      {/if}
-    </div>
-  {:else}
-    <div class="results-info">
-      <span class="text-sm text-muted">
-        {resultCount} entr{resultCount === 1 ? 'y' : 'ies'}
-        {#if searchStore.query}
-          matching "<strong>{searchStore.query}</strong>"
-        {/if}
-      </span>
-    </div>
-
-    <table class="entries-table">
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Username</th>
-          <th>URL</th>
-          <th>Notes</th>
-          {#if isTrashView}
-            <th style="width: 60px"></th>
-          {/if}
-        </tr>
-      </thead>
-      <tbody>
-        {#each entries as entry (entry.id)}
-          <tr
-            draggable={!isTrashView}
-            onclick={() => onSelect(entry.id)}
-            ondragstart={(e) => { if (!isTrashView) { dragging = true; e.dataTransfer.setData('text/plain', entry.id); e.dataTransfer.effectAllowed = 'move'; } }}
-            ondragend={() => { dragging = false; }}
-            class="entry-row {dragging ? 'dragging' : ''}"
-          >
-            <td>
-              {#if !isTrashView}
-                <span class="drag-handle" aria-hidden="true">⠿</span>
-              {/if}
-              <span class="entry-title">{entry.title}</span>
-            </td>
-            <td>
-              <span class="entry-username">{entry.username || '—'}</span>
-            </td>
-            <td>
-              <span class="entry-url truncate">{entry.url || '—'}</span>
-            </td>
-            <td>
-              {#if entry.notes}
-                <div class="notes-tooltip">
-                  <span class="notes-icon" title="{entry.notes}">🔍</span>
-                  <div class="tooltip-popup">{entry.notes}</div>
-                </div>
-              {:else}
-                <span>—</span>
-              {/if}
-            </td>
-            {#if isTrashView}
-              <td>
-                <button class="btn btn-ghost btn-sm restore-btn" onclick={(e) => { e.stopPropagation(); handleRestore(entry.id); }} title="Restore entry">↩️</button>
-              </td>
-            {/if}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  {/if}
-</div>
-
-<style>
-  .loading, .empty-state {
-    text-align: center;
-    padding: 3rem 1rem;
-    color: var(--color-text-muted);
-  }
-
-  .error-banner {
-    padding: 12px 16px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-  }
-
-  .empty-icon {
-    font-size: 3rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .empty-text {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: var(--color-text);
-  }
-
-  .empty-hint {
-    font-size: 0.85rem;
-    color: var(--color-text-muted);
-  }
-
-  .results-info {
-    padding: 8px 0;
-    margin-bottom: 8px;
-  }
-
-  .entries-table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .entries-table th {
-    text-align: left;
-    padding: 8px 12px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--color-text-muted);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .entry-row {
-    cursor: grab;
-    transition: background-color 150ms, opacity 150ms;
-  }
-
-  .entry-row:active {
-    cursor: grabbing;
-  }
-
-  .entry-row:hover {
-    background: var(--color-surface-hover);
-  }
-
-  .entry-row.dragging {
-    opacity: 0.35;
-  }
-
-  .entry-row td {
-    padding: 10px 12px;
-    font-size: 0.875rem;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .drag-handle {
-    color: var(--color-text-muted);
-    opacity: 0.3;
-    margin-right: 6px;
-    font-size: 0.9rem;
-    user-select: none;
-    transition: opacity 150ms;
-  }
-
-  .entry-row:hover .drag-handle {
-    opacity: 0.7;
-  }
-
-  .restore-btn {
-    font-size: 0.85rem;
-    padding: 4px 6px;
-  }
-
-  .entry-title {
-    font-weight: 500;
-  }
-
-  .entry-username {
-    color: var(--color-text-muted);
-  }
-
-  .entry-url {
-    color: var(--color-text-muted);
-    max-width: 200px;
-  }
-
-  .notes-icon {
-    color: var(--color-text-muted);
-    cursor: help;
-    font-size: 0.95rem;
-    opacity: 0.5;
-    transition: opacity 150ms;
-  }
-
-  .notes-icon:hover {
-    opacity: 1;
-  }
-
-  .notes-tooltip {
-    position: relative;
-    display: inline-block;
-  }
-
-  .tooltip-popup {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    bottom: calc(100% + 6px);
-    left: 0;
-    z-index: 100;
-    background: var(--color-surface, #1e1e2e);
-    color: var(--color-text, #cdd6f4);
-    border: 1px solid var(--color-border, #45475a);
-    border-radius: var(--radius-md, 8px);
-    padding: 8px 12px;
-    font-size: 0.8rem;
-    min-width: 150px;
-    max-width: 300px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-    transition: opacity 150ms, visibility 150ms;
-  }
-
-  .notes-tooltip:hover .tooltip-popup {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  @media (max-width: 768px) {
-    .entries-table th:nth-child(4),
-    .entry-row td:nth-child(4) {
-      display: none;
-    }
-  }
-
-  @media (max-width: 600px) {
-    .entries-table th:nth-child(3),
-    .entry-row td:nth-child(3) {
-      display: none;
-    }
-  }
-</style>
diff --git a/src/components/ImportExport.js b/src/components/ImportExport.js
new file mode 100644
index 0000000..9db5733
--- /dev/null
+++ b/src/components/ImportExport.js
@@ -0,0 +1,354 @@
+/**
+ * ImportExport — export with group selection + import with source password.
+ */
+
+import { Component } from './component.js'
+import { exportSelected, importAll, getGroups, getEntries } from '../lib/storage/db.js'
+import { search } from '../lib/stores/search.js'
+import { app } from '../lib/stores/app.js'
+import { isTrashGroup } from '../lib/models/schema.js'
+
+export class ImportExport extends Component {
+  showExport = false
+  showImport = false
+  importMode = 'merge'
+  importResult = null
+  importError = ''
+  importing = false
+  exporting = false
+  sourcePassword = ''
+  parsedFileData = null
+  allGroups = []
+  allEntries = []
+  selectedGroupIds = []
+
+  get selectAll() {
+    return this.allGroups.length > 0 && this.allGroups.every(g => this.selectedGroupIds.includes(g.id))
+  }
+
+  get exportEntryCount() {
+    return this.allEntries.filter(e => this.selectedGroupIds.includes(e.groupId)).length
+  }
+
+  mount() {
+    super.mount()
+    return this
+  }
+
+  render() {
+    this.el = this.ce('div', { className: 'import-export' },
+      this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'export-btn', title: 'Export', textContent: '📤 Export' }),
+      this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'import-btn', title: 'Import', textContent: '📥 Import' }),
+    )
+
+    this.on(this.q('#export-btn'), 'click', () => this.#openExportModal())
+    this.on(this.q('#import-btn'), 'click', () => { this.showImport = true; this.#renderImportModal() })
+
+    return this.el
+  }
+
+  async #openExportModal() {
+    const groups = (await getGroups()).filter(g => !isTrashGroup(g.id))
+    this.allGroups = [{ id: '', name: 'Ungrouped', color: '#6b7280' }, ...groups]
+    this.allEntries = await getEntries()
+    this.selectedGroupIds = this.allGroups.map(g => g.id)
+    this.showExport = true
+    this.#renderExportModal()
+  }
+
+  #renderExportModal() {
+    const existing = this.q('.ie-modal-overlay')
+    if (existing) existing.remove()
+
+    const overlay = this.ce('div', { className: 'ie-modal-overlay', role: 'presentation' })
+    const modal = this.ce('div', { className: 'ie-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Export vault', tabindex: '-1' })
+
+    modal.appendChild(this.ce('h3', { textContent: 'Export Vault' }))
+    modal.appendChild(this.ce('p', { textContent: "Select which groups to export. You'll need the source vault's master password when importing into another vault." }))
+
+    // Group select header
+    const header = this.ce('div', { className: 'group-select-header' },
+      this.ce('label', { className: 'checkbox-label' },
+        this.ce('input', { type: 'checkbox', id: 'select-all-checkbox', checked: this.selectAll }),
+        this.ce('span', { textContent: 'Select all' }),
+      ),
+      this.ce('span', { className: 'entry-count', id: 'export-count', textContent: `${this.exportEntryCount} entries` }),
+    )
+    modal.appendChild(header)
+
+    // Group list
+    const list = this.ce('div', { className: 'group-select-list' })
+    for (const group of this.allGroups) {
+      const label = this.ce('label', { className: 'checkbox-label group-checkbox' },
+        this.ce('input', {
+          type: 'checkbox',
+          'data-group-id': group.id,
+          checked: this.selectedGroupIds.includes(group.id),
+        }),
+        this.ce('span', { className: 'group-color-dot', style: `background-color: ${group.color || '#6c63ff'}` }),
+        this.ce('span', { className: 'group-name', textContent: group.name }),
+      )
+      list.appendChild(label)
+    }
+    modal.appendChild(list)
+
+    // Actions
+    const actions = this.ce('div', { className: 'ie-modal-actions' },
+      this.ce('button', { className: 'btn btn-primary', id: 'do-export-btn', disabled: this.exporting || this.selectedGroupIds.length === 0, textContent: this.exporting ? 'Exporting...' : '📤 Export JSON' }),
+      this.ce('button', { className: 'btn btn-ghost', id: 'cancel-export-btn', textContent: 'Cancel' }),
+    )
+    modal.appendChild(actions)
+
+    overlay.appendChild(modal)
+
+    this.el.appendChild(overlay)
+
+    this.on(overlay, 'click', () => { this.showExport = false; overlay.remove() })
+    this.on(modal, 'click', (e) => e.stopPropagation())
+
+    // Select all
+    const selectAllCb = overlay.querySelector('#select-all-checkbox')
+    if (selectAllCb) {
+      this.on(selectAllCb, 'change', () => this.#toggleSelectAll())
+    }
+
+    // Individual checkboxes
+    overlay.querySelectorAll('.group-select-list input[data-group-id]').forEach(cb => {
+      this.on(cb, 'change', () => {
+        const gid = cb.dataset.groupId
+        this.#toggleGroup(gid)
+      })
+    })
+
+    // Export button
+    const exportBtn = overlay.querySelector('#do-export-btn')
+    if (exportBtn) this.on(exportBtn, 'click', () => this.#handleExport())
+
+    // Cancel
+    const cancelBtn = overlay.querySelector('#cancel-export-btn')
+    if (cancelBtn) this.on(cancelBtn, 'click', () => { this.showExport = false; overlay.remove() })
+  }
+
+  #toggleSelectAll() {
+    if (this.selectAll) {
+      this.selectedGroupIds = []
+    } else {
+      this.selectedGroupIds = this.allGroups.map(g => g.id)
+    }
+    this.#renderExportModal()
+  }
+
+  #toggleGroup(groupId) {
+    if (this.selectedGroupIds.includes(groupId)) {
+      this.selectedGroupIds = this.selectedGroupIds.filter(id => id !== groupId)
+    } else {
+      this.selectedGroupIds = [...this.selectedGroupIds, groupId]
+    }
+    // Update select-all checkbox and count
+    const overlay = this.q('.ie-modal-overlay')
+    if (overlay) {
+      const selectAllCb = overlay.querySelector('#select-all-checkbox')
+      if (selectAllCb) selectAllCb.checked = this.selectAll
+      const countEl = overlay.querySelector('#export-count')
+      if (countEl) countEl.textContent = `${this.exportEntryCount} entries`
+      const exportBtn = overlay.querySelector('#do-export-btn')
+      if (exportBtn) exportBtn.disabled = this.exporting || this.selectedGroupIds.length === 0
+    }
+  }
+
+  async #handleExport() {
+    this.exporting = true
+    try {
+      const exportData = await exportSelected(
+        this.selectedGroupIds.length === this.allGroups.length ? null : this.selectedGroupIds
+      )
+      const json = JSON.stringify(exportData, null, 2)
+      const blob = new Blob([json], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `password-vault-export-${new Date().toISOString().slice(0, 10)}.json`
+      a.click()
+      URL.revokeObjectURL(url)
+      this.showExport = false
+    } catch (e) {
+      this.importError = 'Export failed: ' + e.message
+    }
+    this.exporting = false
+  }
+
+  #renderImportModal() {
+    const existing = this.q('.ie-modal-overlay')
+    if (existing) existing.remove()
+
+    const overlay = this.ce('div', { className: 'ie-modal-overlay', role: 'presentation' })
+    const modal = this.ce('div', { className: 'ie-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Import vault data', tabindex: '-1' })
+
+    modal.appendChild(this.ce('h3', { textContent: 'Import Vault Data' }))
+
+    if (this.importError) {
+      modal.appendChild(this.ce('div', { className: 'ie-error-banner', textContent: this.importError }))
+    }
+
+    if (this.importResult) {
+      const msg = `✓ Imported ${this.importResult.imported.entries} entries and ${this.importResult.imported.groups} groups` +
+        (this.importResult.skipped > 0 ? ` (${this.importResult.skipped} skipped)` : '')
+      modal.appendChild(this.ce('div', { className: 'success-banner', textContent: msg }))
+    } else if (this.parsedFileData) {
+      modal.appendChild(this.ce('p', {},
+        this.text('File loaded. Enter the '),
+        this.ce('strong', { textContent: "source vault's master password" }),
+        this.text(' to decrypt and re-encrypt entries under your current vault.'),
+      ))
+
+      modal.appendChild(this.ce('div', { className: 'form-group' },
+        this.ce('label', { htmlFor: 'source-password', className: 'file-label', textContent: 'Source vault password' }),
+        this.ce('input', { id: 'source-password', type: 'password', placeholder: 'Enter source vault password', autocomplete: 'current-password', value: this.sourcePassword }),
+      ))
+
+      // Import mode radios
+      const modeDiv = this.ce('div', { className: 'import-mode' })
+      const mergeRadio = this.ce('label', { className: 'radio-label' },
+        this.ce('input', { type: 'radio', name: 'importMode', value: 'merge', checked: this.importMode === 'merge' }),
+        this.ce('span', { textContent: 'Merge — add to existing data' }),
+      )
+      const replaceRadio = this.ce('label', { className: 'radio-label' },
+        this.ce('input', { type: 'radio', name: 'importMode', value: 'replace', checked: this.importMode === 'replace' }),
+        this.ce('span', { textContent: 'Replace — clear all existing data first' }),
+      )
+      modeDiv.appendChild(mergeRadio)
+      modeDiv.appendChild(replaceRadio)
+      modal.appendChild(modeDiv)
+
+      const actions = this.ce('div', { className: 'ie-modal-actions' },
+        this.ce('button', { className: 'btn btn-primary', id: 'do-import-btn', disabled: this.importing, textContent: this.importing ? 'Importing...' : '📥 Import' }),
+        this.ce('button', { className: 'btn btn-ghost', id: 'cancel-import-btn', textContent: 'Cancel' }),
+      )
+      modal.appendChild(actions)
+
+      overlay.appendChild(modal)
+      this.el.appendChild(overlay)
+
+      this.on(overlay, 'click', () => { this.showImport = false; overlay.remove() })
+      this.on(modal, 'click', (e) => e.stopPropagation())
+
+      const srcPwdInput = overlay.querySelector('#source-password')
+      if (srcPwdInput) this.on(srcPwdInput, 'input', (e) => { this.sourcePassword = e.target.value })
+
+      overlay.querySelectorAll('input[name="importMode"]').forEach(radio => {
+        this.on(radio, 'change', (e) => { this.importMode = e.target.value })
+      })
+
+      const importBtn = overlay.querySelector('#do-import-btn')
+      if (importBtn) this.on(importBtn, 'click', () => this.#handleImportSubmit())
+
+      const cancelBtn = overlay.querySelector('#cancel-import-btn')
+      if (cancelBtn) this.on(cancelBtn, 'click', () => {
+        this.parsedFileData = null
+        this.sourcePassword = ''
+        overlay.remove()
+      })
+    } else {
+      modal.appendChild(this.ce('p', { textContent: 'Select how to handle existing data:' }))
+
+      const modeDiv = this.ce('div', { className: 'import-mode' })
+      const mergeRadio = this.ce('label', { className: 'radio-label' },
+        this.ce('input', { type: 'radio', name: 'importMode', value: 'merge', checked: this.importMode === 'merge' }),
+        this.ce('span', { textContent: 'Merge — add to existing data' }),
+      )
+      const replaceRadio = this.ce('label', { className: 'radio-label' },
+        this.ce('input', { type: 'radio', name: 'importMode', value: 'replace', checked: this.importMode === 'replace' }),
+        this.ce('span', { textContent: 'Replace — clear all existing data first' }),
+      )
+      modeDiv.appendChild(mergeRadio)
+      modeDiv.appendChild(replaceRadio)
+      modal.appendChild(modeDiv)
+
+      modal.appendChild(this.ce('div', { className: 'form-group' },
+        this.ce('label', { htmlFor: 'import-file', className: 'file-label', textContent: 'Choose JSON file' }),
+        this.ce('input', { id: 'import-file', type: 'file', accept: '.json,application/json', disabled: this.importing }),
+      ))
+
+      const closeActions = this.ce('div', { className: 'ie-modal-actions' },
+        this.ce('button', { className: 'btn btn-ghost', id: 'close-import-btn', textContent: 'Close' }),
+      )
+      modal.appendChild(closeActions)
+
+      overlay.appendChild(modal)
+      this.el.appendChild(overlay)
+
+      this.on(overlay, 'click', () => { this.showImport = false; overlay.remove() })
+      this.on(modal, 'click', (e) => e.stopPropagation())
+
+      overlay.querySelectorAll('input[name="importMode"]').forEach(radio => {
+        this.on(radio, 'change', (e) => { this.importMode = e.target.value })
+      })
+
+      const fileInput = overlay.querySelector('#import-file')
+      if (fileInput) this.on(fileInput, 'change', (e) => this.#handleFileSelect(e))
+
+      const closeBtn = overlay.querySelector('#close-import-btn')
+      if (closeBtn) this.on(closeBtn, 'click', () => {
+        this.showImport = false
+        this.importResult = null
+        this.importError = ''
+        overlay.remove()
+      })
+    }
+  }
+
+  async #handleFileSelect(event) {
+    const file = event.target.files[0]
+    if (!file) return
+
+    this.importError = ''
+    this.importResult = null
+    this.sourcePassword = ''
+
+    try {
+      const text = await file.text()
+      const data = JSON.parse(text)
+
+      if (!data.entries || !data.groups) {
+        this.importError = 'Invalid file format — missing entries or groups data'
+        this.#renderImportModal()
+        return
+      }
+
+      this.parsedFileData = data
+    } catch (e) {
+      this.importError = 'Failed to parse file: ' + e.message
+    }
+
+    event.target.value = ''
+    this.#renderImportModal()
+  }
+
+  async #handleImportSubmit() {
+    if (!this.parsedFileData) return
+    const srcPwdInput = this.q('#source-password')
+    if (srcPwdInput) this.sourcePassword = srcPwdInput.value
+
+    if (!this.sourcePassword.trim()) {
+      this.importError = 'Source vault password is required'
+      this.#renderImportModal()
+      return
+    }
+
+    this.importing = true
+    this.importError = ''
+    this.importResult = null
+
+    try {
+      this.importResult = await importAll(this.parsedFileData, this.importMode, this.sourcePassword, app.encryptionKey)
+      this.sourcePassword = ''
+      this.parsedFileData = null
+      search.refresh()
+    } catch (e) {
+      this.importError = 'Import failed: ' + e.message
+    }
+
+    this.importing = false
+    this.#renderImportModal()
+  }
+}
diff --git a/src/components/ImportExport.svelte b/src/components/ImportExport.svelte
deleted file mode 100644
index 6f9a206..0000000
--- a/src/components/ImportExport.svelte
+++ /dev/null
@@ -1,446 +0,0 @@
-<script>
-  import { exportSelected, importAll, getGroups, getEntries } from '../lib/storage/db.js'
-  import { search as searchStore } from '../lib/stores/search.svelte.js'
-  import { app } from '../lib/stores/app.svelte.js'
-  import { isTrashGroup } from '../lib/models/schema.js'
-
-  let showExport = $state(false)
-
-  async function openExportModal() {
-    const groups = (await getGroups()).filter(g => !isTrashGroup(g.id))
-    allGroups = [{ id: '', name: 'Ungrouped', color: '#6b7280' }, ...groups]
-    allEntries = await getEntries()
-    selectedGroupIds = allGroups.map(g => g.id)
-    showExport = true
-  }
-  let showImport = $state(false)
-  let importMode = $state('merge') // 'merge' or 'replace'
-  let importResult = $state(null)
-  let importError = $state('')
-  let importing = $state(false)
-  let exportData = $state(null)
-  let exporting = $state(false)
-  let sourcePassword = $state('')
-  let parsedFileData = $state(null)
-
-  // Group selection for export
-  let allGroups = $state([])
-  let allEntries = $state([])
-  let selectedGroupIds = $state([])
-  let selectAll = $derived(
-    allGroups.length > 0 && allGroups.every(g => selectedGroupIds.includes(g.id))
-  )
-  let exportEntryCount = $derived(
-    allEntries.filter(e => selectedGroupIds.includes(e.groupId)).length
-  )
-
-  async function handleExport() {
-    exporting = true
-    try {
-      exportData = await exportSelected(selectedGroupIds.length === allGroups.length ? null : selectedGroupIds)
-      const json = JSON.stringify(exportData, null, 2)
-      const blob = new Blob([json], { type: 'application/json' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `password-vault-export-${new Date().toISOString().slice(0, 10)}.json`
-      a.click()
-      URL.revokeObjectURL(url)
-      showExport = false
-    } catch (e) {
-      importError = 'Export failed: ' + e.message
-    }
-    exporting = false
-  }
-
-  function toggleSelectAll() {
-    if (selectAll) {
-      selectedGroupIds = []
-    } else {
-      selectedGroupIds = allGroups.map(g => g.id)
-    }
-  }
-
-  function toggleGroup(groupId) {
-    if (selectedGroupIds.includes(groupId)) {
-      selectedGroupIds = selectedGroupIds.filter(id => id !== groupId)
-    } else {
-      selectedGroupIds = [...selectedGroupIds, groupId]
-    }
-  }
-
-  async function handleFileSelect(event) {
-    const file = event.target.files[0]
-    if (!file) return
-
-    importError = ''
-    importResult = null
-    sourcePassword = ''
-
-    try {
-      const text = await file.text()
-      const data = JSON.parse(text)
-
-      if (!data.entries || !data.groups) {
-        importError = 'Invalid file format — missing entries or groups data'
-        return
-      }
-
-      parsedFileData = data
-    } catch (e) {
-      importError = 'Failed to parse file: ' + e.message
-    }
-
-    // Reset file input
-    event.target.value = ''
-  }
-
-  async function handleImportSubmit() {
-    if (!parsedFileData) return
-    if (!sourcePassword.trim()) {
-      importError = 'Source vault password is required'
-      return
-    }
-
-    importing = true
-    importError = ''
-    importResult = null
-
-    try {
-      const result = await importAll(parsedFileData, importMode, sourcePassword, app.encryptionKey)
-      importResult = result
-      sourcePassword = ''
-      parsedFileData = null
-      searchStore.refresh()
-    } catch (e) {
-      importError = 'Import failed: ' + e.message
-    }
-
-    importing = false
-  }
-</script>
-
-<div class="import-export">
-  <!-- Export button -->
-  <button class="btn btn-ghost btn-sm" onclick={openExportModal} title="Export">
-    📤 Export
-  </button>
-
-  <!-- Import button -->
-  <button class="btn btn-ghost btn-sm" onclick={() => showImport = true} title="Import">
-    📥 Import
-  </button>
-
-  <!-- Export modal -->
-  {#if showExport}
-    <div class="modal-overlay" role="presentation" onclick={() => showExport = false}>
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <div class="modal" role="dialog" aria-modal="true" aria-label="Export vault" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-        <h3>Export Vault</h3>
-        <p>Select which groups to export. You'll need the source vault's master password when importing into another vault.</p>
-
-        <div class="group-select-header">
-          <label class="checkbox-label">
-            <input type="checkbox" checked={selectAll} onchange={toggleSelectAll} />
-            <span>Select all</span>
-          </label>
-          <span class="entry-count">{exportEntryCount} entries</span>
-        </div>
-
-        <div class="group-select-list">
-          {#each allGroups as group}
-            <label class="checkbox-label group-checkbox">
-              <input
-                type="checkbox"
-                checked={selectedGroupIds.includes(group.id)}
-                onchange={() => toggleGroup(group.id)}
-              />
-              <span class="group-color-dot" style="background-color: {group.color || '#6c63ff'}"></span>
-              <span class="group-name">{group.name}</span>
-            </label>
-          {/each}
-        </div>
-
-        <div class="modal-actions">
-          <button class="btn btn-primary" onclick={handleExport} disabled={exporting || selectedGroupIds.length === 0}>
-            {exporting ? 'Exporting...' : '📤 Export JSON'}
-          </button>
-          <button class="btn btn-ghost" onclick={() => showExport = false}>Cancel</button>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  <!-- Import modal -->
-  {#if showImport}
-    <div class="modal-overlay" role="presentation" onclick={() => showImport = false}>
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <div class="modal" role="dialog" aria-modal="true" aria-label="Import vault data" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-        <h3>Import Vault Data</h3>
-
-        {#if importError}
-          <div class="error-banner">{importError}</div>
-        {/if}
-
-        {#if importResult}
-          <div class="success-banner">
-            ✓ Imported {importResult.imported.entries} entries and {importResult.imported.groups} groups
-            {#if importResult.skipped > 0}
-              ({importResult.skipped} skipped)
-            {/if}
-          </div>
-        {:else if parsedFileData}
-          <p>File loaded. Enter the <strong>source vault's master password</strong> to decrypt and re-encrypt entries under your current vault.</p>
-
-          <div class="form-group">
-            <label for="source-password" class="file-label">Source vault password</label>
-            <input
-              id="source-password"
-              type="password"
-              bind:value={sourcePassword}
-              placeholder="Enter source vault password"
-              autocomplete="current-password"
-            />
-          </div>
-
-          <div class="import-mode">
-            <label class="radio-label">
-              <input type="radio" name="importMode" value="merge" bind:group={importMode} />
-              <span>Merge — add to existing data</span>
-            </label>
-            <label class="radio-label">
-              <input type="radio" name="importMode" value="replace" bind:group={importMode} />
-              <span>Replace — clear all existing data first</span>
-            </label>
-          </div>
-
-          <div class="modal-actions">
-            <button class="btn btn-primary" onclick={handleImportSubmit} disabled={importing}>
-              {importing ? 'Importing...' : '📥 Import'}
-            </button>
-            <button class="btn btn-ghost" onclick={() => { parsedFileData = null; sourcePassword = ''; }}>Cancel</button>
-          </div>
-        {:else}
-          <p>Select how to handle existing data:</p>
-
-          <div class="import-mode">
-            <label class="radio-label">
-              <input type="radio" name="importMode" value="merge" bind:group={importMode} />
-              <span>Merge — add to existing data</span>
-            </label>
-            <label class="radio-label">
-              <input type="radio" name="importMode" value="replace" bind:group={importMode} />
-              <span>Replace — clear all existing data first</span>
-            </label>
-          </div>
-
-          <div class="form-group">
-            <label for="import-file" class="file-label">Choose JSON file</label>
-            <input
-              id="import-file"
-              type="file"
-              accept=".json,application/json"
-              onchange={handleFileSelect}
-              disabled={importing}
-            />
-          </div>
-        {/if}
-
-        <div class="modal-actions">
-          <button class="btn btn-ghost" onclick={() => {
-            showImport = false
-            importResult = null
-            importError = ''
-          }}>Close</button>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 420px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal h3 {
-    margin-bottom: 12px;
-  }
-
-  .modal p {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 16px;
-  }
-
-  .modal-actions {
-    display: flex;
-    gap: 8px;
-    margin-top: 16px;
-  }
-
-  .error-banner {
-    padding: 10px 14px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-  }
-
-  .success-banner {
-    padding: 10px 14px;
-    background: rgba(52, 211, 153, 0.15);
-    border: 1px solid rgba(52, 211, 153, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-success);
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-  }
-
-  .import-mode {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 16px;
-  }
-
-  .radio-label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: border-color 150ms, background-color 150ms;
-  }
-
-  .radio-label:hover {
-    border-color: var(--color-primary);
-    background: var(--color-surface-hover);
-  }
-
-  .radio-label input[type="radio"] {
-    accent-color: var(--color-primary);
-    cursor: pointer;
-  }
-
-  .radio-label span {
-    font-size: 0.85rem;
-  }
-
-  .file-label {
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: var(--color-text-muted);
-    margin-bottom: 4px;
-  }
-
-  input[type="file"] {
-    font-size: 0.85rem;
-    padding: 8px;
-  }
-
-  .form-group {
-    margin-bottom: 16px;
-  }
-
-  .form-group input[type="password"] {
-    width: 100%;
-    padding: 8px 12px;
-    font-size: 0.85rem;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    color: var(--color-text);
-    box-sizing: border-box;
-  }
-
-  .form-group input[type="password"]:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
-  /* Group selection for export */
-  .group-select-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--color-border);
-    margin-bottom: 4px;
-  }
-
-  .group-select-header .entry-count {
-    font-size: 0.8rem;
-    color: var(--color-text-muted);
-  }
-
-  .group-select-list {
-    max-height: 240px;
-    overflow-y: auto;
-    margin-bottom: 8px;
-  }
-
-  .group-select-list::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .group-select-list::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .group-select-list::-webkit-scrollbar-thumb {
-    background: var(--color-border);
-    border-radius: 3px;
-  }
-
-  .checkbox-label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-size: 0.85rem;
-  }
-
-  .checkbox-label input[type="checkbox"] {
-    accent-color: var(--color-primary);
-    cursor: pointer;
-  }
-
-  .group-checkbox {
-    padding: 6px 12px;
-    border-radius: var(--radius-md);
-    transition: background-color 150ms;
-  }
-
-  .group-checkbox:hover {
-    background: var(--color-surface-hover);
-  }
-
-  .group-color-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-</style>
diff --git a/src/components/LockScreen.js b/src/components/LockScreen.js
new file mode 100644
index 0000000..e3c003d
--- /dev/null
+++ b/src/components/LockScreen.js
@@ -0,0 +1,194 @@
+/**
+ * LockScreen — master password setup + unlock UI.
+ */
+
+import { Component } from './component.js'
+import { app } from '../lib/stores/app.js'
+import { deriveKey, createTestPayload, verifyPassword } from '../lib/crypto/crypto.js'
+import { saveVaultMeta, loadVaultMeta, isVaultInitialized, ensureTrashGroup } from '../lib/storage/db.js'
+import { startAutoLock } from '../lib/stores/security.js'
+import { settings } from '../lib/stores/settings.js'
+import { autofocus } from '../lib/autofocus.js'
+
+export class LockScreen extends Component {
+  masterPassword = ''
+  confirmPassword = ''
+  error = ''
+  loading = false
+  isSetup = false
+
+  mount() {
+    super.mount()
+    this.#checkVault()
+    return this
+  }
+
+  render() {
+    const notLocal = typeof window !== 'undefined' && window.location.protocol !== 'file:'
+
+    this.el = this.ce('div', { className: 'lock-screen' },
+      this.ce('div', { className: 'lock-card' },
+        this.ce('div', { className: 'lock-icon', textContent: '🔐' }),
+        this.ce('h1', { textContent: 'Password Vault' }),
+        this.ce('p', { className: 'subtitle', textContent: 'Unlock your vault' }),
+        notLocal ? this.ce('div', { className: 'warning-banner', role: 'alert', textContent: 'This HTML file is intended for offline use.' }) : null,
+        null, // error-banner placeholder
+        this.#buildForm(),
+        this.ce('p', { className: 'hint', textContent: 'Your data is encrypted with AES-256-GCM. Key is stored only in memory.' }),
+      ),
+    )
+
+    // Store references to dynamic elements
+    this._subtitle = this.q('.subtitle')
+    this._confirmGroup = this.q('.confirm-group')
+    this._submitBtn = this.q('.submit-btn')
+    this._passwordInput = this.q('#master-password')
+    this._confirmInput = this.q('#confirm-password')
+    this._hint = this.q('.hint')
+
+    autofocus(this._passwordInput, true)
+
+    // Wire input listeners so this.masterPassword / this.confirmPassword stay in sync
+    if (this._passwordInput) {
+      this.on(this._passwordInput, 'input', (e) => { this.masterPassword = e.target.value })
+    }
+    if (this._confirmInput) {
+      this.on(this._confirmInput, 'input', (e) => { this.confirmPassword = e.target.value })
+    }
+
+    return this.el
+  }
+
+  #buildForm() {
+    return this.ce('form', { className: 'lock-form', id: 'lock-form' },
+      this.ce('div', { className: 'form-group' },
+        this.ce('label', { htmlFor: 'master-password', textContent: 'Master Password' }),
+        this.ce('input', { id: 'master-password', type: 'password', placeholder: 'Enter master password', autocomplete: 'current-password' }),
+      ),
+      this.ce('div', { className: 'form-group confirm-group' },
+        this.ce('label', { htmlFor: 'confirm-password', textContent: 'Confirm Password' }),
+        this.ce('input', { id: 'confirm-password', type: 'password', placeholder: 'Confirm master password', autocomplete: 'new-password' }),
+      ),
+      this.ce('button', { type: 'submit', className: 'btn btn-primary w-full submit-btn', textContent: 'Unlock' }),
+    )
+  }
+
+  #updateUI() {
+    if (this._subtitle) {
+      this._subtitle.textContent = this.isSetup ? 'Create your vault' : 'Unlock your vault'
+    }
+    if (this._confirmGroup) {
+      this._confirmGroup.style.display = this.isSetup ? '' : 'none'
+    }
+    if (this._submitBtn) {
+      this._submitBtn.textContent = this.loading ? 'Processing...' : (this.isSetup ? 'Create Vault' : 'Unlock')
+      this._submitBtn.disabled = this.loading
+    }
+    if (this._passwordInput) {
+      this._passwordInput.disabled = this.loading
+    }
+    if (this._confirmInput) {
+      this._confirmInput.disabled = this.loading
+    }
+    // Error banner
+    if (this.error) {
+      if (!this._errorBanner) {
+        const banner = this.ce('div', { className: 'error-banner', role: 'alert', textContent: this.error })
+        const form = this.q('#lock-form')
+        form?.parentNode?.insertBefore(banner, form)
+        this._errorBanner = banner
+      } else {
+        this._errorBanner.textContent = this.error
+      }
+    } else if (this._errorBanner) {
+      this._errorBanner.remove()
+      this._errorBanner = null
+    }
+    if (this._hint) {
+      this._hint.textContent = this.isSetup
+        ? 'Your master password encrypts all data locally. It cannot be recovered if lost.'
+        : 'Your data is encrypted with AES-256-GCM. Key is stored only in memory.'
+    }
+  }
+
+  #checkVault() {
+    isVaultInitialized().then(init => {
+      this.isSetup = !init
+      this.#updateUI()
+    })
+  }
+
+  #handleSubmit = async (e) => {
+    e.preventDefault()
+    this.error = ''
+    this.loading = true
+    this.#updateUI()
+
+    try {
+      if (this.isSetup) {
+        if (!this.masterPassword || this.masterPassword.length < 4) {
+          this.error = 'Password must be at least 4 characters'
+          this.loading = false
+          this.#updateUI()
+          return
+        }
+        if (this.masterPassword !== this.confirmPassword) {
+          this.error = 'Passwords do not match'
+          this.loading = false
+          this.#updateUI()
+          return
+        }
+
+        const { salt, testEncrypted, testPlaintext } = await createTestPayload(this.masterPassword)
+        app.salt = salt
+        const key = await deriveKey(this.masterPassword, salt)
+        app.encryptionKey = key
+
+        await saveVaultMeta(salt, testEncrypted, testPlaintext)
+        await ensureTrashGroup()
+        await settings.load()
+        app.isUnlocked = true
+        startAutoLock()
+      } else {
+        const meta = await loadVaultMeta()
+        if (!meta.salt || !meta.testEncrypted || !meta.testPlaintext) {
+          this.error = 'Vault data corrupted'
+          this.loading = false
+          this.#updateUI()
+          return
+        }
+
+        const key = await deriveKey(this.masterPassword, meta.salt)
+        const isValid = await verifyPassword(this.masterPassword, meta.salt, meta.testEncrypted, meta.testPlaintext)
+
+        if (!isValid) {
+          this.error = 'Incorrect password'
+          this.loading = false
+          this.#updateUI()
+          return
+        }
+
+        app.salt = meta.salt
+        app.encryptionKey = key
+        await settings.load()
+        app.isUnlocked = true
+        startAutoLock()
+      }
+    } catch (err) {
+      console.error(err)
+      this.error = 'An error occurred: ' + err.message
+    }
+
+    this.loading = false
+    this.masterPassword = ''
+    this.confirmPassword = ''
+    if (this._passwordInput) this._passwordInput.value = ''
+    if (this._confirmInput) this._confirmInput.value = ''
+    this.#updateUI()
+  }
+
+  afterMount() {
+    const form = this.q('#lock-form')
+    if (form) this.on(form, 'submit', this.#handleSubmit)
+  }
+}
diff --git a/src/components/LockScreen.svelte b/src/components/LockScreen.svelte
deleted file mode 100644
index 0e5f1e2..0000000
--- a/src/components/LockScreen.svelte
+++ /dev/null
@@ -1,215 +0,0 @@
-<script>
-  import { app } from '../lib/stores/app.svelte.js'
-  import { deriveKey, createTestPayload, verifyPassword } from '../lib/crypto/crypto.js'
-  import { saveVaultMeta, loadVaultMeta, isVaultInitialized, ensureTrashGroup } from '../lib/storage/db.js'
-  import { startAutoLock } from '../lib/stores/security.svelte.js'
-  import { settings } from '../lib/stores/settings.svelte.js'
-  import { autofocus } from '../lib/autofocus.js'
-
-  let masterPassword = $state('')
-  let confirmPassword = $state('')
-  let error = $state('')
-  let loading = $state(false)
-  let isSetup = $state(false)
-  let notLocal = $derived(typeof window !== 'undefined' && window.location.protocol !== 'file:')
-
-  // Check if vault was already created
-  async function checkVault() {
-    isSetup = !(await isVaultInitialized())
-  }
-  checkVault()
-
-  async function handleSubmit() {
-    error = ''
-    loading = true
-
-    try {
-      if (isSetup) {
-        // First-time setup: create vault
-        if (!masterPassword || masterPassword.length < 4) {
-          error = 'Password must be at least 4 characters'
-          loading = false
-          return
-        }
-        if (masterPassword !== confirmPassword) {
-          error = 'Passwords do not match'
-          loading = false
-          return
-        }
-
-        const { salt, testEncrypted, testPlaintext } = await createTestPayload(masterPassword)
-        app.salt = salt
-        const key = await deriveKey(masterPassword, salt)
-        app.encryptionKey = key
-
-        await saveVaultMeta(salt, testEncrypted, testPlaintext)
-        await ensureTrashGroup()
-        await settings.load()
-        app.isUnlocked = true
-        startAutoLock()
-      } else {
-        // Unlock: verify password against stored test payload
-        const meta = await loadVaultMeta()
-        if (!meta.salt || !meta.testEncrypted || !meta.testPlaintext) {
-          error = 'Vault data corrupted'
-          loading = false
-          return
-        }
-
-        const key = await deriveKey(masterPassword, meta.salt)
-        const isValid = await verifyPassword(masterPassword, meta.salt, meta.testEncrypted, meta.testPlaintext)
-
-        if (!isValid) {
-          error = 'Incorrect password'
-          loading = false
-          return
-        }
-
-        app.salt = meta.salt
-        app.encryptionKey = key
-        await settings.load()
-        app.isUnlocked = true
-        startAutoLock()
-      }
-    } catch (e) {
-      console.error(e)
-      error = 'An error occurred: ' + e.message
-    }
-
-    loading = false
-    masterPassword = ''
-    confirmPassword = ''
-  }
-</script>
-
-<div class="lock-screen">
-  <div class="lock-card">
-    <div class="lock-icon">🔐</div>
-    <h1>Password Vault</h1>
-    <p class="subtitle">{isSetup ? 'Create your vault' : 'Unlock your vault'}</p>
-
-    {#if notLocal}
-      <div class="warning-banner" role="alert">This HTML file is intended for offline use.</div>
-    {/if}
-
-    {#if error}
-      <div class="error-banner" role="alert">{error}</div>
-    {/if}
-
-    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="lock-form">
-      <div class="form-group">
-        <label for="master-password">Master Password</label>
-        <input
-          id="master-password"
-          type="password"
-          bind:value={masterPassword}
-          placeholder="Enter master password"
-          autocomplete="current-password"
-          use:autofocus
-          disabled={loading}
-        />
-      </div>
-
-      {#if isSetup}
-        <div class="form-group">
-          <label for="confirm-password">Confirm Password</label>
-          <input
-            id="confirm-password"
-            type="password"
-            bind:value={confirmPassword}
-            placeholder="Confirm master password"
-            autocomplete="new-password"
-            disabled={loading}
-          />
-        </div>
-      {/if}
-
-      <button type="submit" class="btn btn-primary w-full" disabled={loading}>
-        {loading ? 'Processing...' : (isSetup ? 'Create Vault' : 'Unlock')}
-      </button>
-    </form>
-
-    <p class="hint">
-      {isSetup
-        ? 'Your master password encrypts all data locally. It cannot be recovered if lost.'
-        : 'Your data is encrypted with AES-256-GCM. Key is stored only in memory.'}
-    </p>
-  </div>
-</div>
-
-<style>
-  .lock-screen {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    padding: 1rem;
-  }
-
-  .lock-card {
-    width: 100%;
-    max-width: 400px;
-    padding: 2.5rem 2rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .lock-icon {
-    font-size: 3rem;
-    line-height: 1;
-  }
-
-  h1 {
-    font-size: 1.5rem;
-    text-align: center;
-  }
-
-  .subtitle {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    text-align: center;
-  }
-
-  .lock-form {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .error-banner {
-    width: 100%;
-    padding: 10px 14px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    text-align: center;
-  }
-
-  .warning-banner {
-    width: 100%;
-    padding: 10px 14px;
-    background: rgba(255, 193, 7, 0.15);
-    border: 1px solid rgba(230, 168, 0, 0.5);
-    border-radius: var(--radius-md);
-    color: #b8860b;
-    font-size: 0.85rem;
-    text-align: center;
-  }
-
-  .hint {
-    font-size: 0.75rem;
-    color: var(--color-text-muted);
-    text-align: center;
-    line-height: 1.4;
-    margin-top: 0.5rem;
-  }
-</style>
diff --git a/src/components/MainLayout.js b/src/components/MainLayout.js
new file mode 100644
index 0000000..a35b6a7
--- /dev/null
+++ b/src/components/MainLayout.js
@@ -0,0 +1,298 @@
+/**
+ * MainLayout — shell: sidebar + content area with view routing.
+ */
+
+import { Component } from './component.js'
+import { app } from '../lib/stores/app.js'
+import { search } from '../lib/stores/search.js'
+import { TRASH_GROUP_NAME } from '../lib/models/schema.js'
+import { emptyTrash } from '../lib/storage/db.js'
+import { Sidebar } from './Sidebar.js'
+import { EntryList } from './EntryList.js'
+import { EntryDetail } from './EntryDetail.js'
+import { EntryForm } from './EntryForm.js'
+import { ImportExport } from './ImportExport.js'
+import { SettingsDialog } from './SettingsDialog.js'
+
+export class MainLayout extends Component {
+  sidebarOpen = false
+  viewMode = 'list' // 'list' | 'detail' | 'form' | 'settings'
+  selectedEntryId = null
+  showEmptyTrashConfirm = false
+  emptyingTrash = false
+
+  // Child component instances
+  _sidebar = null
+  _importExport = null
+  _contentComponent = null
+
+  get isTrashView() {
+    return search.activeGroupId === 'trash'
+  }
+
+  mount() {
+    super.mount()
+
+    // Subscribe to app lock — unmount everything and emit event
+    this.subscribe(app, 'isUnlocked', (unlocked) => {
+      if (!unlocked) this.emitLock()
+    })
+
+    return this
+  }
+
+  render() {
+    this.el = this.ce('div', { className: 'app-shell' })
+
+    // Mobile header
+    this.el.appendChild(this.ce('div', { className: 'mobile-header' },
+      this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'menu-btn', textContent: '☰ Menu' }),
+      this.ce('span', { className: 'mobile-title', textContent: 'Password Vault' }),
+      this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'mobile-lock-btn', title: 'Lock', textContent: '🔒' }),
+    ))
+
+    // Sidebar
+    const aside = this.ce('aside', { className: 'sidebar', id: 'sidebar' })
+    this.el.appendChild(aside)
+
+    // Main content
+    const main = this.ce('main', { className: 'main-content' },
+      this.ce('div', { className: 'top-bar', id: 'top-bar' }),
+      this.ce('div', { className: 'content-area', id: 'content-area' }),
+    )
+    this.el.appendChild(main)
+
+    // Wire mobile header buttons
+    this.on(this.q('#menu-btn'), 'click', () => { this.sidebarOpen = !this.sidebarOpen; this.#updateSidebar() })
+    this.on(this.q('#mobile-lock-btn'), 'click', () => app.lockVault())
+
+    // Mount sidebar
+    this._sidebar = new Sidebar(this.q('#sidebar'))
+    this._sidebar.mount()
+
+    // Initial render
+    this.#renderTopBar()
+    this.#navigate()
+
+    return this.el
+  }
+
+  #updateSidebar() {
+    const sidebar = this.q('#sidebar')
+    if (sidebar) {
+      sidebar.classList.toggle('open', this.sidebarOpen)
+    }
+
+    // Overlay
+    let overlay = this.q('.sidebar-overlay')
+    if (this.sidebarOpen && !overlay) {
+      overlay = this.ce('button', { className: 'sidebar-overlay', 'aria-label': 'Close menu' })
+      this.on(overlay, 'click', () => { this.sidebarOpen = false; this.#updateSidebar() })
+      this.el.appendChild(overlay)
+    } else if (!this.sidebarOpen && overlay) {
+      overlay.remove()
+    }
+  }
+
+  #renderTopBar() {
+    const topBar = this.q('#top-bar')
+    if (!topBar) return
+    topBar.innerHTML = ''
+
+    // Back button
+    if (this.viewMode !== 'list') {
+      const backBtn = this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'back-btn', textContent: '← Back' })
+      this.on(backBtn, 'click', () => this.#handleBack())
+      topBar.appendChild(backBtn)
+    }
+
+    // Title
+    const titleDiv = this.ce('div', { className: 'top-bar-title' })
+    let titleText
+    switch (this.viewMode) {
+      case 'list': titleText = this.isTrashView ? TRASH_GROUP_NAME : 'All Entries'; break
+      case 'detail': titleText = 'Entry Details'; break
+      case 'form': titleText = this.selectedEntryId ? 'Edit Entry' : 'New Entry'; break
+      case 'settings': titleText = 'Settings'; break
+      default: titleText = 'Password Vault'
+    }
+    titleDiv.appendChild(this.ce('h1', { textContent: titleText }))
+    topBar.appendChild(titleDiv)
+
+    // Actions
+    const actions = this.ce('div', { className: 'top-bar-actions' })
+
+    if (this.viewMode === 'list' && this.isTrashView) {
+      actions.appendChild(this.ce('button', {
+        className: 'btn btn-danger btn-sm',
+        id: 'empty-trash-btn',
+        disabled: this.emptyingTrash,
+        textContent: this.emptyingTrash ? 'Emptying...' : '🗑 Empty Trash',
+      }))
+    }
+
+    if (this.viewMode === 'list' && !this.isTrashView) {
+      actions.appendChild(this.ce('button', {
+        className: 'btn btn-primary btn-sm',
+        id: 'new-entry-btn',
+        textContent: '+ New Entry',
+      }))
+    }
+
+    // ImportExport buttons
+    if (!this._importExport) {
+      this._importExport = new ImportExport(actions)
+      this._importExport.mount()
+    }
+
+    actions.appendChild(this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'settings-btn', title: 'Settings', textContent: '⚙️' }))
+    actions.appendChild(this.ce('button', { className: 'btn btn-ghost btn-sm', id: 'lock-btn', title: 'Lock vault', textContent: '🔒' }))
+
+    topBar.appendChild(actions)
+
+    // Wire action buttons
+    const emptyTrashBtn = this.q('#empty-trash-btn')
+    if (emptyTrashBtn) this.on(emptyTrashBtn, 'click', () => { this.showEmptyTrashConfirm = true; this.#renderEmptyTrashModal() })
+
+    const newEntryBtn = this.q('#new-entry-btn')
+    if (newEntryBtn) this.on(newEntryBtn, 'click', () => this.#goForm(null))
+
+    const settingsBtn = this.q('#settings-btn')
+    if (settingsBtn) this.on(settingsBtn, 'click', () => this.#goSettings())
+
+    const lockBtn = this.q('#lock-btn')
+    if (lockBtn) this.on(lockBtn, 'click', () => app.lockVault())
+  }
+
+  #navigate() {
+    // Destroy previous content component
+    if (this._contentComponent) {
+      this._contentComponent.destroy()
+      this._contentComponent = null
+    }
+
+    const contentArea = this.q('#content-area')
+    if (!contentArea) return
+
+    switch (this.viewMode) {
+      case 'list':
+        this._contentComponent = new EntryList(contentArea, {
+          onSelect: (id) => this.#goDetail(id),
+          onAdd: () => this.#goForm(null),
+        })
+        break
+      case 'detail':
+        if (this.selectedEntryId) {
+          this._contentComponent = new EntryDetail(contentArea, {
+            entryId: this.selectedEntryId,
+            onEdit: (id) => this.#goForm(id),
+            onBack: () => this.#goList(),
+          })
+        }
+        break
+      case 'form':
+        this._contentComponent = new EntryForm(contentArea, {
+          entryId: this.selectedEntryId,
+          onSave: () => this.#goList(),
+          onCancel: () => this.#handleBack(),
+        })
+        break
+      case 'settings':
+        this._contentComponent = new SettingsDialog(contentArea, {
+          onBack: () => this.#goList(),
+        })
+        break
+    }
+
+    if (this._contentComponent) this._contentComponent.mount()
+    this.#renderTopBar()
+  }
+
+  #goList() {
+    this.viewMode = 'list'
+    this.selectedEntryId = null
+    this.sidebarOpen = false
+    this.#updateSidebar()
+    this.#navigate()
+  }
+
+  #goDetail(entryId) {
+    this.selectedEntryId = entryId
+    this.viewMode = 'detail'
+    this.sidebarOpen = false
+    this.#updateSidebar()
+    this.#navigate()
+  }
+
+  #goForm(entryId) {
+    this.selectedEntryId = entryId
+    this.viewMode = 'form'
+    this.sidebarOpen = false
+    this.#updateSidebar()
+    this.#navigate()
+  }
+
+  #goSettings() {
+    this.viewMode = 'settings'
+    this.sidebarOpen = false
+    this.#updateSidebar()
+    this.#navigate()
+  }
+
+  #handleBack() {
+    this.#goList()
+  }
+
+  #renderEmptyTrashModal() {
+    const existing = this.q('.ml-modal-overlay')
+    if (existing) existing.remove()
+
+    const overlay = this.ce('div', { className: 'ml-modal-overlay', role: 'presentation' })
+    const modal = this.ce('div', { className: 'ml-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Empty trash confirmation', tabindex: '-1' })
+
+    modal.appendChild(this.ce('h3', { textContent: 'Empty Trash' }))
+    modal.appendChild(this.ce('p', { textContent: 'Permanently delete all entries from the trash? This cannot be undone.' }))
+
+    const actions = this.ce('div', { className: 'ml-modal-actions' },
+      this.ce('button', { className: 'btn btn-danger', id: 'confirm-empty-trash', disabled: this.emptyingTrash, textContent: this.emptyingTrash ? 'Emptying...' : 'Yes, empty trash' }),
+      this.ce('button', { className: 'btn btn-ghost', id: 'cancel-empty-trash', textContent: 'Cancel' }),
+    )
+    modal.appendChild(actions)
+    overlay.appendChild(modal)
+
+    this.el.appendChild(overlay)
+
+    this.on(overlay, 'click', () => { this.showEmptyTrashConfirm = false; overlay.remove() })
+    this.on(modal, 'click', (e) => e.stopPropagation())
+
+    const confirmBtn = overlay.querySelector('#confirm-empty-trash')
+    if (confirmBtn) this.on(confirmBtn, 'click', () => this.#handleEmptyTrash())
+
+    const cancelBtn = overlay.querySelector('#cancel-empty-trash')
+    if (cancelBtn) this.on(cancelBtn, 'click', () => { this.showEmptyTrashConfirm = false; overlay.remove() })
+  }
+
+  async #handleEmptyTrash() {
+    this.emptyingTrash = true
+    try {
+      await emptyTrash()
+      search.activeGroupId = 'all'
+      this.showEmptyTrashConfirm = false
+      this.#goList()
+    } catch (e) {
+      console.error('Failed to empty trash:', e)
+    }
+    this.emptyingTrash = false
+  }
+
+  emitLock() {
+    this.destroy()
+  }
+
+  destroy() {
+    if (this._sidebar) this._sidebar.destroy()
+    if (this._importExport) this._importExport.destroy()
+    if (this._contentComponent) this._contentComponent.destroy()
+    super.destroy()
+  }
+}
diff --git a/src/components/MainLayout.svelte b/src/components/MainLayout.svelte
deleted file mode 100644
index d64b31c..0000000
--- a/src/components/MainLayout.svelte
+++ /dev/null
@@ -1,328 +0,0 @@
-<script>
-  import { app } from '../lib/stores/app.svelte.js'
-  import { search as searchStore } from '../lib/stores/search.svelte.js'
-  import { TRASH_GROUP_NAME } from '../lib/models/schema.js'
-  import { emptyTrash } from '../lib/storage/db.js'
-  import Sidebar from './Sidebar.svelte'
-  import EntryList from './EntryList.svelte'
-  import EntryDetail from './EntryDetail.svelte'
-  import EntryForm from './EntryForm.svelte'
-  import ImportExport from './ImportExport.svelte'
-  import SettingsDialog from './SettingsDialog.svelte'
-
-  let sidebarOpen = $state(false)
-  let viewMode = $state('list') // 'list' | 'detail' | 'form' | 'settings'
-  let selectedEntryId = $state(null)
-  let showEmptyTrashConfirm = $state(false)
-  let emptyingTrash = $state(false)
-
-  const isTrashView = $derived(searchStore.activeGroupId === 'trash')
-
-  function goList() {
-    viewMode = 'list'
-    selectedEntryId = null
-    sidebarOpen = false
-  }
-
-  function goDetail(entryId) {
-    selectedEntryId = entryId
-    viewMode = 'detail'
-    sidebarOpen = false
-  }
-
-  function goForm(entryId = null) {
-    selectedEntryId = entryId
-    viewMode = 'form'
-    sidebarOpen = false
-  }
-
-  function goSettings() {
-    viewMode = 'settings'
-    sidebarOpen = false
-  }
-
-  function handleBack() {
-    if (viewMode === 'form' || viewMode === 'settings') {
-      goList()
-    } else {
-      goList()
-    }
-  }
-
-  async function handleEmptyTrash() {
-    emptyingTrash = true
-    try {
-      await emptyTrash()
-      searchStore.activeGroupId = 'all'
-      showEmptyTrashConfirm = false
-    } catch (e) {
-      console.error('Failed to empty trash:', e)
-    }
-    emptyingTrash = false
-  }
-
-  function handleLock() {
-    app.lockVault()
-  }
-</script>
-
-<div class="app-shell">
-  <!-- Mobile header -->
-  <div class="mobile-header">
-    <button class="btn btn-ghost btn-sm" onclick={() => sidebarOpen = !sidebarOpen}>
-      ☰ Menu
-    </button>
-    <span class="mobile-title">Password Vault</span>
-    <button class="btn btn-ghost btn-sm" onclick={handleLock} title="Lock">🔒</button>
-  </div>
-
-  <!-- Sidebar overlay for mobile -->
-  {#if sidebarOpen}
-    <button class="sidebar-overlay" onclick={() => sidebarOpen = false} aria-label="Close menu"></button>
-  {/if}
-
-  <!-- Sidebar -->
-  <aside class="sidebar {sidebarOpen ? 'open' : ''}">
-    <Sidebar />
-  </aside>
-
-  <!-- Main content -->
-  <main class="main-content">
-    <!-- Top bar -->
-    <div class="top-bar">
-      {#if viewMode !== 'list'}
-        <button class="btn btn-ghost btn-sm" onclick={handleBack}>← Back</button>
-      {/if}
-      <div class="top-bar-title">
-        {#if viewMode === 'list'}
-          <h1>{searchStore.activeGroupId === 'trash' ? TRASH_GROUP_NAME : 'All Entries'}</h1>
-        {:else if viewMode === 'detail'}
-          <h1>Entry Details</h1>
-        {:else if viewMode === 'form'}
-          <h1>{selectedEntryId ? 'Edit Entry' : 'New Entry'}</h1>
-        {:else if viewMode === 'settings'}
-          <h1>Settings</h1>
-        {/if}
-      </div>
-      <div class="top-bar-actions">
-        {#if viewMode === 'list' && isTrashView}
-          <button class="btn btn-danger btn-sm" onclick={() => showEmptyTrashConfirm = true} disabled={emptyingTrash}>
-            {emptyingTrash ? 'Emptying...' : '🗑 Empty Trash'}
-          </button>
-        {/if}
-        {#if viewMode === 'list' && !isTrashView}
-          <button class="btn btn-primary btn-sm" onclick={() => goForm(null)}>+ New Entry</button>
-        {/if}
-        <ImportExport />
-        <button class="btn btn-ghost btn-sm" onclick={goSettings} title="Settings">⚙️</button>
-        <button class="btn btn-ghost btn-sm" onclick={handleLock} title="Lock vault">🔒</button>
-      </div>
-    </div>
-
-    <!-- Content area -->
-    <div class="content-area">
-      {#if viewMode === 'list'}
-        <EntryList onSelect={goDetail} onAdd={() => goForm(null)} />
-      {:else if viewMode === 'detail' && selectedEntryId}
-        <EntryDetail
-          entryId={selectedEntryId}
-          onEdit={() => goForm(selectedEntryId)}
-          onBack={goList}
-        />
-      {:else if viewMode === 'form'}
-        <EntryForm
-          entryId={selectedEntryId}
-          onSave={goList}
-          onCancel={handleBack}
-        />
-      {:else if viewMode === 'settings'}
-        <SettingsDialog onBack={goList} />
-      {/if}
-    </div>
-  </main>
-
-  <!-- Empty trash confirmation -->
-  {#if showEmptyTrashConfirm}
-    <div class="modal-overlay" role="presentation" onclick={() => showEmptyTrashConfirm = false}>
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <div class="modal" role="dialog" aria-modal="true" aria-label="Empty trash confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-        <h3>Empty Trash</h3>
-        <p>Permanently delete all entries from the trash? This cannot be undone.</p>
-        <div class="modal-actions">
-          <button class="btn btn-danger" onclick={handleEmptyTrash} disabled={emptyingTrash}>
-            {emptyingTrash ? 'Emptying...' : 'Yes, empty trash'}
-          </button>
-          <button class="btn btn-ghost" onclick={() => showEmptyTrashConfirm = false}>Cancel</button>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .app-shell {
-    display: flex;
-    min-height: 100vh;
-  }
-
-  /* Mobile header */
-  .mobile-header {
-    display: none;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 16px;
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-
-  .mobile-title {
-    font-weight: 600;
-    font-size: 0.95rem;
-  }
-
-  /* Sidebar */
-  .sidebar {
-    width: 260px;
-    min-width: 260px;
-    background: var(--color-sidebar);
-    border-right: 1px solid var(--color-border);
-    height: 100vh;
-    position: sticky;
-    top: 0;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* Main content */
-  .main-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .top-bar {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 20px;
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .top-bar-title {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .top-bar-title h1 {
-    font-size: 1.1rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .top-bar-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  .content-area {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-  }
-
-  /* Sidebar overlay (mobile) */
-  .sidebar-overlay {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 49;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Modal */
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 380px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal h3 {
-    margin-bottom: 16px;
-  }
-
-  .modal p {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 20px;
-  }
-
-  .modal-actions {
-    display: flex;
-    gap: 8px;
-  }
-
-  /* Responsive */
-  @media (max-width: 768px) {
-    .mobile-header {
-      display: flex;
-    }
-
-    .sidebar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      z-index: 50;
-      transform: translateX(-100%);
-      transition: transform 200ms ease;
-    }
-
-    .sidebar.open {
-      transform: translateX(0);
-    }
-
-    .sidebar-overlay {
-      display: block;
-    }
-
-    .content-area {
-      padding: 12px;
-    }
-
-    .top-bar {
-      padding: 10px 12px;
-    }
-  }
-</style>
diff --git a/src/components/SettingsDialog.js b/src/components/SettingsDialog.js
new file mode 100644
index 0000000..27e7135
--- /dev/null
+++ b/src/components/SettingsDialog.js
@@ -0,0 +1,122 @@
+/**
+ * SettingsDialog — auto-lock and tab-switch settings.
+ */
+
+import { Component } from './component.js'
+import { settings } from '../lib/stores/settings.js'
+import { startAutoLock } from '../lib/stores/security.js'
+
+export class SettingsDialog extends Component {
+  /** @param {{ onBack: Function }} props */
+  constructor(container, props = {}) {
+    super(container)
+    this.onBack = props.onBack || (() => {})
+    this.minutes = settings.autoLockMinutes
+    this.lockOnTabSwitch = settings.lockOnTabSwitch
+    this.saving = false
+  }
+
+  mount() {
+    super.mount()
+    // Sync local values
+    this.minutes = settings.autoLockMinutes
+    this.lockOnTabSwitch = settings.lockOnTabSwitch
+    return this
+  }
+
+  render() {
+    this.el = this.ce('div', { className: 'settings-panel' })
+    this.#renderContent()
+    return this.el
+  }
+
+  #renderContent() {
+    this.el.innerHTML = ''
+
+    const form = this.ce('form', { className: 'sd-form-card', id: 'settings-form' },
+      this.ce('h3', { textContent: 'Settings' }),
+
+      // Auto-lock minutes
+      this.ce('div', { className: 'form-group' },
+        this.ce('label', { htmlFor: 'auto-lock-minutes', textContent: 'Auto-lock after' }),
+        this.#buildMinuteSelect(),
+        this.ce('p', { className: 'text-muted text-xs mt-1', id: 'lock-hint' }),
+      ),
+
+      // Lock on tab switch
+      this.ce('div', { className: 'form-group' },
+        this.ce('label', { className: 'toggle-label', htmlFor: 'lock-tab-switch' },
+          this.ce('input', { id: 'lock-tab-switch', type: 'checkbox', checked: this.lockOnTabSwitch }),
+          this.ce('span', { className: 'toggle-track' },
+            this.ce('span', { className: 'toggle-thumb' }),
+          ),
+          this.ce('span', { className: 'toggle-text', textContent: 'Lock when tab loses focus' }),
+        ),
+        this.ce('p', { className: 'text-muted text-xs mt-1', id: 'tab-hint' }),
+      ),
+
+      // Actions
+      this.ce('div', { className: 'sd-form-actions' },
+        this.ce('button', { type: 'submit', className: 'btn btn-primary', disabled: this.saving, id: 'save-settings-btn', textContent: this.saving ? 'Saving...' : 'Save' }),
+        this.ce('button', { type: 'button', className: 'btn btn-ghost', id: 'cancel-settings-btn', textContent: 'Cancel' }),
+      ),
+    )
+
+    this.el.appendChild(form)
+
+    // Update hints
+    const lockHint = this.q('#lock-hint')
+    if (lockHint) lockHint.textContent = `Vault locks after ${this.minutes} ${this.minutes === 1 ? 'minute' : 'minutes'} of inactivity.`
+
+    const tabHint = this.q('#tab-hint')
+    if (tabHint) tabHint.textContent = this.lockOnTabSwitch
+      ? 'The vault locks immediately when you switch to another tab.'
+      : 'The vault stays unlocked even when you switch tabs.'
+
+    // Wire events
+    const formEl = this.q('#settings-form')
+    if (formEl) this.on(formEl, 'submit', this.#handleSave)
+
+    const cancelBtn = this.q('#cancel-settings-btn')
+    if (cancelBtn) this.on(cancelBtn, 'click', () => this.onBack())
+
+    const minutesSelect = this.q('#auto-lock-minutes')
+    if (minutesSelect) this.on(minutesSelect, 'change', (e) => {
+      this.minutes = Number(e.target.value)
+      if (lockHint) lockHint.textContent = `Vault locks after ${this.minutes} ${this.minutes === 1 ? 'minute' : 'minutes'} of inactivity.`
+    })
+
+    const tabCheckbox = this.q('#lock-tab-switch')
+    if (tabCheckbox) this.on(tabCheckbox, 'change', (e) => {
+      this.lockOnTabSwitch = e.target.checked
+      if (tabHint) tabHint.textContent = this.lockOnTabSwitch
+        ? 'The vault locks immediately when you switch to another tab.'
+        : 'The vault stays unlocked even when you switch tabs.'
+    })
+  }
+
+  #buildMinuteSelect() {
+    const select = this.ce('select', { id: 'auto-lock-minutes' })
+    for (const m of [1, 5, 10, 15, 30, 60]) {
+      const opt = this.ce('option', { value: m }, this.text(`${m} ${m === 1 ? 'minute' : 'minutes'}`))
+      if (m === this.minutes) opt.selected = true
+      select.appendChild(opt)
+    }
+    return select
+  }
+
+  #handleSave = async (e) => {
+    e.preventDefault()
+    this.saving = true
+    try {
+      settings.autoLockMinutes = this.minutes
+      settings.lockOnTabSwitch = this.lockOnTabSwitch
+      await settings.save()
+      startAutoLock()
+    } catch (err) {
+      console.error('Failed to save settings:', err)
+    }
+    this.saving = false
+    this.onBack()
+  }
+}
diff --git a/src/components/SettingsDialog.svelte b/src/components/SettingsDialog.svelte
deleted file mode 100644
index 520a1c2..0000000
--- a/src/components/SettingsDialog.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script>
-  import { settings } from '../lib/stores/settings.svelte.js'
-  import { startAutoLock } from '../lib/stores/security.svelte.js'
-
-  let { onBack } = $props()
-
-  // Local copies so the user can cancel without losing values
-  let minutes = $state(settings.autoLockMinutes)
-  let lockOnTabSwitch = $state(settings.lockOnTabSwitch)
-  let saving = $state(false)
-
-  const minuteOptions = [1, 5, 10, 15, 30, 60]
-
-  async function handleSave() {
-    saving = true
-    try {
-      settings.autoLockMinutes = minutes
-      settings.lockOnTabSwitch = lockOnTabSwitch
-      await settings.save()
-      startAutoLock()
-    } catch (e) {
-      console.error('Failed to save settings:', e)
-    }
-    saving = false
-    onBack()
-  }
-
-  // Sync local values on mount
-  $effect(() => {
-    minutes = settings.autoLockMinutes
-    lockOnTabSwitch = settings.lockOnTabSwitch
-  })
-</script>
-
-<div class="settings-panel">
-  <form class="form-card" onsubmit={(e) => { e.preventDefault(); handleSave(); }}>
-    <h3>Settings</h3>
-
-    <div class="form-group">
-      <label for="auto-lock-minutes">Auto-lock after</label>
-      <select id="auto-lock-minutes" bind:value={minutes}>
-        {#each minuteOptions as m}
-          <option value={m}>{m} {m === 1 ? 'minute' : 'minutes'}</option>
-        {/each}
-      </select>
-      <p class="text-muted text-xs mt-1">
-        Vault locks after {minutes} {minutes === 1 ? 'minute' : 'minutes'} of inactivity.
-      </p>
-    </div>
-
-    <div class="form-group">
-      <label class="toggle-label" for="lock-tab-switch">
-        <input
-          id="lock-tab-switch"
-          type="checkbox"
-          bind:checked={lockOnTabSwitch}
-        />
-        <span class="toggle-track">
-          <span class="toggle-thumb"></span>
-        </span>
-        <span class="toggle-text">Lock when tab loses focus</span>
-      </label>
-      <p class="text-muted text-xs mt-1">
-        {lockOnTabSwitch
-          ? 'The vault locks immediately when you switch to another tab.'
-          : 'The vault stays unlocked even when you switch tabs.'}
-      </p>
-    </div>
-
-    <div class="form-actions">
-      <button type="submit" class="btn btn-primary" disabled={saving}>
-        {saving ? 'Saving...' : 'Save'}
-      </button>
-      <button type="button" class="btn btn-ghost" onclick={onBack}>Cancel</button>
-    </div>
-  </form>
-</div>
-
-<style>
-  .settings-panel {
-    max-width: 500px;
-  }
-
-  .form-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-  }
-
-  .form-card h3 {
-    margin-bottom: 16px;
-  }
-
-  .form-actions {
-    display: flex;
-    gap: 8px;
-    margin-top: 20px;
-  }
-
-  .toggle-label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    cursor: pointer;
-    margin-bottom: 0;
-  }
-
-  .toggle-label input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .toggle-track {
-    width: 40px;
-    height: 22px;
-    background: var(--color-border);
-    border-radius: 11px;
-    position: relative;
-    transition: background-color 150ms;
-    flex-shrink: 0;
-  }
-
-  .toggle-track .toggle-thumb {
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 16px;
-    height: 16px;
-    background: #fff;
-    border-radius: 50%;
-    transition: transform 150ms;
-  }
-
-  .toggle-label input:checked + .toggle-track {
-    background: var(--color-primary);
-  }
-
-  .toggle-label input:checked + .toggle-track .toggle-thumb {
-    transform: translateX(18px);
-  }
-
-  .toggle-text {
-    font-size: 0.875rem;
-    color: var(--color-text);
-  }
-</style>
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
new file mode 100644
index 0000000..72fe2d6
--- /dev/null
+++ b/src/components/Sidebar.js
@@ -0,0 +1,398 @@
+/**
+ * Sidebar — group list + search bar + group management.
+ */
+
+import { Component } from './component.js'
+import { getGroups, addGroup, updateGroup, deleteGroup, moveEntryToGroup, ensureTrashGroup } from '../lib/storage/db.js'
+import { createGroup, validateGroup, isTrashGroup, TRASH_GROUP_NAME, TRASH_GROUP_COLOR, GROUP_COLORS } from '../lib/models/schema.js'
+import { search } from '../lib/stores/search.js'
+import { autofocus } from '../lib/autofocus.js'
+
+export class Sidebar extends Component {
+  groups = []
+
+  // Group management state
+  showGroupForm = false
+  editingGroupId = null
+  groupName = ''
+  groupColor = '#6c63ff'
+  groupError = ''
+  showDeleteGroupConfirm = null
+  dragOverGroupId = null
+  droppedGroupId = null
+
+  mount() {
+    super.mount()
+    // Subscribe to store changes
+    this.subscribe(search, 'refreshTrigger', () => this.#loadData())
+    this.subscribe(search, 'activeGroupId', () => {
+      this.#renderGroups()
+      this.#updateTrashButton()
+    })
+    // Event delegation on the nav for all group interactions
+    const nav = this.q('.groups-nav')
+    if (nav) {
+      // Click: select group or handle action buttons
+      this.on(nav, 'click', (e) => {
+        const editBtn = e.target.closest('.group-action-btn[title="Edit group"]')
+        if (editBtn) {
+          e.stopPropagation()
+          const row = editBtn.closest('.group-row')
+          const groupId = row?.querySelector('[data-group-id]')?.dataset.groupId
+          const group = this.groups.find(g => g.id === groupId)
+          if (group) this.#openGroupForm(group)
+          return
+        }
+        const delBtn = e.target.closest('.group-action-btn[title="Delete group"]')
+        if (delBtn) {
+          e.stopPropagation()
+          const row = delBtn.closest('.group-row')
+          const groupId = row?.querySelector('[data-group-id]')?.dataset.groupId
+          if (groupId) {
+            this.showDeleteGroupConfirm = groupId
+            this.#renderDeleteModal()
+          }
+          return
+        }
+        // Group selection
+        const groupBtn = e.target.closest('.group-item[data-group-id]')
+        if (groupBtn) {
+          search.activeGroupId = groupBtn.dataset.groupId
+          return
+        }
+        // All entries button
+        if (e.target.closest('#all-entries-btn')) {
+          search.activeGroupId = 'all'
+        }
+      })
+
+      // Drag-and-drop via delegation
+      this.on(nav, 'dragover', (e) => {
+        const btn = e.target.closest('.group-item[data-group-id]')
+        if (btn) {
+          const gid = btn.dataset.groupId
+          if (this.#canDrop(gid)) {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = 'move'
+            this.dragOverGroupId = gid
+            btn.classList.add('drag-over')
+          }
+        }
+      })
+      this.on(nav, 'dragleave', (e) => {
+        const btn = e.target.closest('.group-item[data-group-id]')
+        if (btn && this.dragOverGroupId === btn.dataset.groupId) {
+          this.dragOverGroupId = null
+          btn.classList.remove('drag-over')
+        }
+      })
+      this.on(nav, 'drop', (e) => {
+        e.preventDefault()
+        const btn = e.target.closest('.group-item[data-group-id]')
+        if (btn) {
+          btn.classList.remove('drag-over')
+          const gid = btn.dataset.groupId
+          if (this.#canDrop(gid)) {
+            const entryId = e.dataTransfer.getData('text/plain')
+            if (entryId) this.#handleDrop(gid, entryId)
+          }
+        }
+        this.dragOverGroupId = null
+      })
+    }
+    this.#loadData()
+    return this
+  }
+
+  render() {
+    this.el = this.ce('div', { className: 'sidebar-content' },
+      this.ce('div', { className: 'sidebar-header' },
+        this.ce('h2', { textContent: '🔐 Vault' }),
+      ),
+      this.ce('div', { className: 'search-box' },
+        this.ce('input', { id: 'sidebar-search', type: 'text', placeholder: 'Search entries...' }),
+      ),
+      this.ce('nav', { className: 'groups-nav' }), // populated dynamically
+      this.ce('div', { className: 'trash-section' },
+        this.ce('button', { className: 'group-item trash-btn', id: 'trash-btn' },
+          this.ce('span', { className: 'group-color', style: `background-color: ${TRASH_GROUP_COLOR}` }),
+          this.ce('span', { className: 'group-name', textContent: TRASH_GROUP_NAME }),
+        ),
+      ),
+      this.ce('div', { className: 'sidebar-footer' },
+        this.ce('button', { className: 'btn btn-ghost btn-sm w-full', id: 'new-group-btn', textContent: '+ New Group' }),
+      ),
+    )
+
+    // Wire search input
+    const searchInput = this.q('#sidebar-search')
+    if (searchInput) {
+      this.on(searchInput, 'input', (e) => search.setSearchQuery(e.target.value))
+    }
+
+    // Wire trash button
+    const trashBtn = this.q('#trash-btn')
+    if (trashBtn) {
+      this.on(trashBtn, 'click', () => { search.activeGroupId = 'trash' })
+    }
+
+    // Wire new group button
+    const newGroupBtn = this.q('#new-group-btn')
+    if (newGroupBtn) {
+      this.on(newGroupBtn, 'click', () => this.#openGroupForm(null))
+    }
+
+    this.#renderGroups()
+    this.#updateTrashButton()
+
+    return this.el
+  }
+
+  #renderGroups() {
+    const nav = this.q('.groups-nav')
+    if (!nav) return
+
+    // Clear existing
+    nav.innerHTML = ''
+
+    // "All Entries" button
+    const allBtn = this.ce('button', {
+      className: `group-item${search.activeGroupId === 'all' ? ' active' : ''}`,
+      id: 'all-entries-btn',
+    },
+      this.ce('span', { className: 'group-icon', textContent: '📋' }),
+      this.ce('span', { className: 'group-name', textContent: 'All Entries' }),
+    )
+    nav.appendChild(allBtn)
+
+    // Group items
+    for (const group of this.groups) {
+      if (isTrashGroup(group.id)) continue
+
+      const row = this.ce('div', { className: 'group-row' })
+
+      const btn = this.ce('button', {
+        className: `group-item${search.activeGroupId === group.id ? ' active' : ''}`,
+        'data-group-id': group.id,
+      },
+        this.ce('span', { className: 'group-color', style: `background-color: ${group.color || '#6c63ff'}` }),
+        this.ce('span', { className: 'group-name', textContent: group.name }),
+        this.ce('span', { className: 'drop-icon', textContent: '📥' }),
+      )
+
+      row.appendChild(btn)
+
+      // Group actions (edit, delete) — handled via event delegation on .groups-nav
+      const actions = this.ce('div', { className: 'group-actions' })
+      actions.appendChild(this.ce('button', { className: 'group-action-btn', title: 'Edit group', textContent: '✏️' }))
+      actions.appendChild(this.ce('button', { className: 'group-action-btn', title: 'Delete group', textContent: '🗑' }))
+      row.appendChild(actions)
+
+      nav.appendChild(row)
+    }
+  }
+
+  #renderDeleteModal() {
+    // Remove existing modal
+    const existing = this.q('.sb-modal-overlay')
+    if (existing) existing.remove()
+
+    if (!this.showDeleteGroupConfirm) return
+
+    const group = this.groups.find(g => g.id === this.showDeleteGroupConfirm)
+    if (!group) return
+
+    const overlay = this.ce('div', { className: 'sb-modal-overlay', role: 'presentation' },
+      this.ce('div', { className: 'sb-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Delete group confirmation', tabindex: '-1' },
+        this.ce('h3', { textContent: 'Delete Group' }),
+        this.ce('p', {},
+          this.text(`Delete "`),
+          this.ce('strong', { textContent: group.name }),
+          this.text(`"? Entries in this group will become ungrouped.`),
+        ),
+        this.ce('div', { className: 'sb-modal-actions' },
+          this.ce('button', { className: 'btn btn-danger', id: 'confirm-delete-group-btn', textContent: 'Yes, delete' }),
+          this.ce('button', { className: 'btn btn-ghost', id: 'cancel-delete-group-btn', textContent: 'Cancel' }),
+        ),
+      ),
+    )
+
+    // Append overlay first so querySelector finds the elements
+    this.el.appendChild(overlay)
+
+    this.on(overlay, 'click', () => {
+      this.showDeleteGroupConfirm = null
+      overlay.remove()
+    })
+    this.on(overlay.querySelector('.sb-modal'), 'click', (e) => e.stopPropagation())
+    this.on(overlay.querySelector('#confirm-delete-group-btn'), 'click', () => this.#confirmDeleteGroup(this.showDeleteGroupConfirm))
+    this.on(overlay.querySelector('#cancel-delete-group-btn'), 'click', () => {
+      this.showDeleteGroupConfirm = null
+      overlay.remove()
+    })
+  }
+
+  #renderGroupFormModal() {
+    // Remove existing modal
+    const existing = this.q('.sb-modal-overlay')
+    if (existing) existing.remove()
+
+    if (!this.showGroupForm) return
+
+    const overlay = this.ce('div', { className: 'sb-modal-overlay', role: 'presentation' },
+      this.ce('div', { className: 'sb-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Group settings', tabindex: '-1' },
+        this.ce('h3', { textContent: this.editingGroupId ? 'Edit Group' : 'New Group' }),
+        this.groupError ? this.ce('div', { className: 'ie-error-banner', textContent: this.groupError }) : null,
+        this.ce('div', { className: 'form-group' },
+          this.ce('label', { htmlFor: 'group-name', textContent: 'Group Name' }),
+          this.ce('input', { id: 'group-name', type: 'text', placeholder: 'e.g. Work, Personal', value: this.groupName }),
+        ),
+        this.ce('div', { className: 'form-group' },
+          this.ce('span', { className: 'field-label', textContent: 'Color' }),
+          this.#buildColorPicker(),
+        ),
+        this.ce('div', { className: 'sb-modal-actions' },
+          this.ce('button', { className: 'btn btn-primary', id: 'save-group-btn', textContent: this.editingGroupId ? 'Update' : 'Create' }),
+          this.ce('button', { className: 'btn btn-ghost', id: 'cancel-group-btn', textContent: 'Cancel' }),
+        ),
+      ),
+    )
+
+    // Append overlay first so querySelector finds the elements
+    this.el.appendChild(overlay)
+
+    this.on(overlay, 'click', () => {
+      this.showGroupForm = false
+      overlay.remove()
+    })
+    this.on(overlay.querySelector('.sb-modal'), 'click', (e) => e.stopPropagation())
+    this.on(overlay.querySelector('#save-group-btn'), 'click', () => this.#saveGroup())
+    this.on(overlay.querySelector('#cancel-group-btn'), 'click', () => {
+      this.showGroupForm = false
+      overlay.remove()
+    })
+
+    // Wire group name input
+    const nameInput = overlay.querySelector('#group-name')
+    if (nameInput) {
+      this.groupName = nameInput.value
+      this.on(nameInput, 'input', (e) => { this.groupName = e.target.value })
+      if (!this.editingGroupId) autofocus(nameInput, true)
+    }
+  }
+
+  #buildColorPicker() {
+    const picker = this.ce('div', { className: 'color-picker' })
+    for (const color of GROUP_COLORS) {
+      const swatch = this.ce('button', {
+        className: `color-swatch${this.groupColor === color ? ' selected' : ''}`,
+        style: `background-color: ${color}`,
+        title: color,
+        type: 'button',
+      })
+      const c = color
+      this.on(swatch, 'click', () => {
+        this.groupColor = c
+        this.qa('.color-swatch').forEach(s => s.classList.remove('selected'))
+        swatch.classList.add('selected')
+      })
+      picker.appendChild(swatch)
+    }
+    return picker
+  }
+
+  #openGroupForm(group) {
+    if (group) {
+      this.editingGroupId = group.id
+      this.groupName = group.name
+      this.groupColor = group.color || '#6c63ff'
+    } else {
+      this.editingGroupId = null
+      this.groupName = ''
+      this.groupColor = GROUP_COLORS[Math.floor(Math.random() * GROUP_COLORS.length)]
+    }
+    this.groupError = ''
+    this.showGroupForm = true
+    this.#renderGroupFormModal()
+  }
+
+  async #saveGroup() {
+    this.groupError = ''
+    const nameInput = this.q('#group-name')
+    if (nameInput) this.groupName = nameInput.value
+
+    const validation = validateGroup(this.groupName)
+    if (!validation.valid) {
+      this.groupError = validation.errors[0]
+      this.#renderGroupFormModal()
+      return
+    }
+
+    try {
+      if (this.editingGroupId) {
+        const existing = this.groups.find(g => g.id === this.editingGroupId)
+        const updated = { ...existing, name: this.groupName.trim(), color: this.groupColor }
+        await updateGroup(updated)
+      } else {
+        const group = createGroup(this.groupName, this.groupColor)
+        await addGroup(group)
+      }
+      this.showGroupForm = false
+      const overlay = this.q('.sb-modal-overlay')
+      if (overlay) overlay.remove()
+      await this.#loadData()
+    } catch (e) {
+      this.groupError = 'Failed to save group: ' + e.message
+      this.#renderGroupFormModal()
+    }
+  }
+
+  async #confirmDeleteGroup(groupId) {
+    try {
+      await deleteGroup(groupId)
+      if (search.activeGroupId === groupId) {
+        search.activeGroupId = 'all'
+      }
+      this.showDeleteGroupConfirm = null
+      const overlay = this.q('.sb-modal-overlay')
+      if (overlay) overlay.remove()
+      await this.#loadData()
+    } catch (e) {
+      this.groupError = 'Failed to delete group: ' + e.message
+    }
+  }
+
+  #updateTrashButton() {
+    const trashBtn = this.q('#trash-btn')
+    if (trashBtn) {
+      trashBtn.classList.toggle('active', search.activeGroupId === 'trash')
+    }
+  }
+
+  async #handleDrop(groupId, entryId) {
+    try {
+      await moveEntryToGroup(entryId, groupId)
+      this.droppedGroupId = groupId
+      // Flash the dropped group
+      const btn = this.q(`[data-group-id="${groupId}"]`)
+      if (btn) {
+        btn.classList.add('dropped')
+        setTimeout(() => btn.classList.remove('dropped'), 600)
+      }
+      await this.#loadData()
+      search.refresh()
+    } catch (e) {
+      // silent fail
+    }
+  }
+
+  #canDrop(groupId) {
+    return groupId !== search.activeGroupId && !isTrashGroup(groupId)
+  }
+
+  async #loadData() {
+    await ensureTrashGroup()
+    this.groups = await getGroups()
+    this.#renderGroups()
+  }
+}
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
deleted file mode 100644
index 655d185..0000000
--- a/src/components/Sidebar.svelte
+++ /dev/null
@@ -1,436 +0,0 @@
-<script>
-  import { getGroups, addGroup, updateGroup, deleteGroup, moveEntryToGroup, ensureTrashGroup } from '../lib/storage/db.js'
-  import { createGroup, validateGroup, isTrashGroup, TRASH_GROUP_NAME, TRASH_GROUP_COLOR, GROUP_COLORS } from '../lib/models/schema.js'
-  import { search as searchStore } from '../lib/stores/search.svelte.js'
-  import { autofocus } from '../lib/autofocus.js'
-
-  let groups = $state([])
-
-  // Group management state
-  let showGroupForm = $state(false)
-  let editingGroupId = $state(null)
-  let groupName = $state('')
-  let groupColor = $state('#6c63ff')
-  let groupError = $state('')
-  let showDeleteGroupConfirm = $state(null) // groupId being confirmed for deletion
-  let deletingGroup = $derived(groups.find(g => g.id === showDeleteGroupConfirm))
-
-  // Drag-and-drop state
-  let dragOverGroupId = $state(null)
-  let droppedGroupId = $state(null)
-
-  async function handleDrop(groupId, entryId) {
-    try {
-      await moveEntryToGroup(entryId, groupId)
-      droppedGroupId = groupId
-      setTimeout(() => { droppedGroupId = null }, 600)
-      await loadData()
-      searchStore.refresh()
-    } catch (e) {
-      // silent fail
-    }
-  }
-
-  function canDrop(groupId) {
-    return groupId !== searchStore.activeGroupId && !isTrashGroup(groupId)
-  }
-
-  async function loadData() {
-    await ensureTrashGroup()
-    groups = await getGroups()
-  }
-
-  // Initial load + refresh after import/export
-  $effect(() => {
-    searchStore.refreshTrigger
-    loadData()
-  })
-
-  function openGroupForm(group = null) {
-    if (group) {
-      editingGroupId = group.id
-      groupName = group.name
-      groupColor = group.color || '#6c63ff'
-    } else {
-      editingGroupId = null
-      groupName = ''
-      groupColor = GROUP_COLORS[Math.floor(Math.random() * GROUP_COLORS.length)]
-    }
-    groupError = ''
-    showGroupForm = true
-  }
-
-  async function saveGroup() {
-    groupError = ''
-    const validation = validateGroup(groupName)
-    if (!validation.valid) {
-      groupError = validation.errors[0]
-      return
-    }
-
-    try {
-      if (editingGroupId) {
-        const existing = groups.find(g => g.id === editingGroupId)
-        const updated = { ...existing, name: groupName.trim(), color: groupColor }
-        await updateGroup(updated)
-      } else {
-        const group = createGroup(groupName, groupColor)
-        await addGroup(group)
-      }
-      showGroupForm = false
-      await loadData()
-    } catch (e) {
-      groupError = 'Failed to save group: ' + e.message
-    }
-  }
-
-  async function confirmDeleteGroup(groupId) {
-    try {
-      await deleteGroup(groupId)
-      if (searchStore.activeGroupId === groupId) {
-        searchStore.activeGroupId = 'all'
-      }
-      showDeleteGroupConfirm = null
-      await loadData()
-    } catch (e) {
-      groupError = 'Failed to delete group: ' + e.message
-    }
-  }
-</script>
-
-<div class="sidebar-content">
-  <div class="sidebar-header">
-    <h2>🔐 Vault</h2>
-  </div>
-
-  <div class="search-box">
-    <input
-      type="text"
-      placeholder="Search entries..."
-      value={searchStore.query}
-      oninput={(e) => searchStore.setSearchQuery(e.target.value)}
-    />
-  </div>
-
-  <nav class="groups-nav">
-    <button
-      class="group-item {searchStore.activeGroupId === 'all' ? 'active' : ''}"
-      onclick={() => searchStore.activeGroupId = 'all'}
-    >
-      <span class="group-icon">📋</span>
-      <span class="group-name">All Entries</span>
-    </button>
-
-    {#each groups as group}
-      {#if !isTrashGroup(group.id)}
-        <div class="group-row">
-          <button
-            class="group-item {searchStore.activeGroupId === group.id ? 'active' : ''} {dragOverGroupId === group.id ? 'drag-over' : ''} {droppedGroupId === group.id ? 'dropped' : ''}"
-            onclick={() => searchStore.activeGroupId = group.id}
-            ondragover={(e) => { if (canDrop(group.id)) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; dragOverGroupId = group.id; } }}
-            ondragleave={() => { if (dragOverGroupId === group.id) dragOverGroupId = null; }}
-            ondrop={(e) => { e.preventDefault(); dragOverGroupId = null; if (canDrop(group.id)) { const entryId = e.dataTransfer.getData('text/plain'); if (entryId) handleDrop(group.id, entryId); } }}
-          >
-            <span class="group-color" style="background-color: {group.color || '#6c63ff'}"></span>
-            <span class="group-name">{group.name}</span>
-            <span class="drop-icon">📥</span>
-          </button>
-          <div class="group-actions">
-            <button class="group-action-btn" onclick={() => openGroupForm(group)} title="Edit group">✏️</button>
-            <button class="group-action-btn" onclick={() => showDeleteGroupConfirm = group.id} title="Delete group">🗑</button>
-          </div>
-        </div>
-      {/if}
-    {/each}
-  </nav>
-
-  <!-- Trash pinned to bottom -->
-  <div class="trash-section">
-    <button
-      class="group-item {searchStore.activeGroupId === 'trash' ? 'active' : ''}"
-      onclick={() => searchStore.activeGroupId = 'trash'}
-    >
-      <span class="group-color" style="background-color: {TRASH_GROUP_COLOR}"></span>
-      <span class="group-name">{TRASH_GROUP_NAME}</span>
-    </button>
-  </div>
-
-  <div class="sidebar-footer">
-    <button class="btn btn-ghost btn-sm w-full" onclick={() => openGroupForm(null)}>+ New Group</button>
-  </div>
-
-  <!-- Group form modal -->
-  {#if showGroupForm}
-    <div class="modal-overlay" role="presentation" onclick={() => showGroupForm = false}>
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <div class="modal" role="dialog" aria-modal="true" aria-label="Group settings" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-        <h3>{editingGroupId ? 'Edit Group' : 'New Group'}</h3>
-
-        {#if groupError}
-          <div class="error-banner">{groupError}</div>
-        {/if}
-
-        <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} />
-        </div>
-
-        <div class="form-group">
-          <span class="field-label">Color</span>
-          <div class="color-picker">
-            {#each GROUP_COLORS as color}
-              <button
-                class="color-swatch {groupColor === color ? 'selected' : ''}"
-                style="background-color: {color}"
-                onclick={() => groupColor = color}
-                title={color}
-              ></button>
-            {/each}
-          </div>
-        </div>
-
-        <div class="modal-actions">
-          <button class="btn btn-primary" onclick={saveGroup}>
-            {editingGroupId ? 'Update' : 'Create'}
-          </button>
-          <button class="btn btn-ghost" onclick={() => showGroupForm = false}>Cancel</button>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  <!-- Delete group confirmation -->
-  {#if deletingGroup}
-    <div class="modal-overlay" role="presentation" onclick={() => showDeleteGroupConfirm = null}>
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <div class="modal" role="dialog" aria-modal="true" aria-label="Delete group confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-        <h3>Delete Group</h3>
-        <p>Delete "<strong>{deletingGroup.name}</strong>"? Entries in this group will become ungrouped.</p>
-        <div class="modal-actions">
-          <button class="btn btn-danger" onclick={() => confirmDeleteGroup(deletingGroup.id)}>Yes, delete</button>
-          <button class="btn btn-ghost" onclick={() => showDeleteGroupConfirm = null}>Cancel</button>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .sidebar-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .sidebar-header {
-    padding: 16px;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .sidebar-header h2 {
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  .search-box {
-    padding: 12px 16px;
-  }
-
-  .search-box input {
-    padding: 8px 10px;
-    font-size: 0.85rem;
-  }
-
-  .groups-nav {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px;
-  }
-
-  .group-row {
-    display: flex;
-    align-items: center;
-  }
-
-  .group-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
-    min-width: 0;
-    padding: 8px 12px;
-    border: none;
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: background-color 150ms, color 150ms;
-    text-align: left;
-  }
-
-  .group-item:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text);
-  }
-
-  .group-item.active {
-    background: rgba(108, 99, 255, 0.15);
-    color: var(--color-primary);
-  }
-
-  .group-item.drag-over {
-    background: rgba(108, 99, 255, 0.2);
-    border: 2px dashed var(--color-primary);
-    outline: 2px solid rgba(108, 99, 255, 0.25);
-    outline-offset: -4px;
-    transform: scale(1.02);
-  }
-
-  .group-item.drag-over .drop-icon {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-
-  .group-item.dropped {
-    animation: dropFlash 600ms ease;
-  }
-
-  @keyframes dropFlash {
-    0% { background: rgba(52, 211, 153, 0.35); }
-    100% { background: transparent; }
-  }
-
-  .drop-icon {
-    opacity: 0;
-    font-size: 0.85rem;
-    transition: opacity 150ms, transform 150ms;
-    flex-shrink: 0;
-  }
-
-  .group-icon {
-    font-size: 1rem;
-  }
-
-  .group-color {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .group-name {
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .group-actions {
-    display: flex;
-    gap: 2px;
-    padding-right: 4px;
-    opacity: 0;
-    transition: opacity 150ms;
-  }
-
-  .group-row:hover .group-actions {
-    opacity: 1;
-  }
-
-  .trash-section {
-    padding: 8px;
-    border-top: 1px solid var(--color-border);
-  }
-
-  .group-action-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 0.75rem;
-    padding: 4px;
-    border-radius: var(--radius-sm);
-    transition: background-color 150ms;
-  }
-
-  .group-action-btn:hover {
-    background: var(--color-surface-hover);
-  }
-
-  .sidebar-footer {
-    padding: 12px 16px;
-    border-top: 1px solid var(--color-border);
-  }
-
-  /* Modal */
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 200;
-    padding: 1rem;
-  }
-
-  .modal {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    max-width: 380px;
-    width: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-
-  .modal h3 {
-    margin-bottom: 16px;
-  }
-
-  .modal p {
-    color: var(--color-text-muted);
-    font-size: 0.9rem;
-    margin-bottom: 20px;
-  }
-
-  .modal-actions {
-    display: flex;
-    gap: 8px;
-  }
-
-  .error-banner {
-    padding: 8px 12px;
-    background: rgba(229, 72, 77, 0.15);
-    border: 1px solid rgba(229, 72, 77, 0.4);
-    border-radius: var(--radius-md);
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-  }
-
-  /* Color picker */
-  .color-picker {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .color-swatch {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    border: 2px solid transparent;
-    cursor: pointer;
-    transition: transform 150ms, border-color 150ms;
-  }
-
-  .color-swatch:hover {
-    transform: scale(1.15);
-  }
-
-  .color-swatch.selected {
-    border-color: #fff;
-    transform: scale(1.15);
-  }
-</style>
diff --git a/src/components/component.js b/src/components/component.js
new file mode 100644
index 0000000..22e6421
--- /dev/null
+++ b/src/components/component.js
@@ -0,0 +1,174 @@
+/**
+ * Minimal base class for custom vanilla-JS components.
+ *
+ * Subclasses override:
+ *   - render()   → returns a DOM element (or fragment)
+ *   - destroy()  → cleanup (optional, called on unmount)
+ *
+ * Helpers:
+ *   - this.el          — root DOM element
+ *   - this.container   — mount target
+ *   - this.subscribe(store, prop, fn) — reactive binding
+ *   - this.q(sel)      — querySelector on this.el
+ *   - this.qa(sel)     — querySelectorAll on this.el
+ *   - this.html(html)  — set innerHTML (use sparingly; prefer createElement for interactive DOM)
+ *   - this.on(el, event, fn) — addEventListener with auto-cleanup
+ */
+
+export class Component {
+  /** @param {HTMLElement} container — parent to mount into */
+  constructor(container) {
+    this.container = container
+    this.el = null
+    this._listeners = []   // { el, event, fn }
+    this._unsubs = []      // store unsubscribe fns
+  }
+
+  /** Render and mount the component. */
+  mount() {
+    this.el = this.render()
+    if (this.el) {
+      this.container.appendChild(this.el)
+      this.afterMount?.()
+    }
+    return this
+  }
+
+  /** Override in subclass. Must return a DOM node. */
+  render() {
+    return document.createElement('div')
+  }
+
+  /** Called after the element is appended to the DOM. Override in subclass. */
+  afterMount() {}
+
+  /** Remove the component and clean up. */
+  destroy() {
+    // Unsubscribe from stores
+    this._unsubs.forEach(fn => fn())
+    this._unsubs = []
+
+    // Remove event listeners
+    this._listeners.forEach(({ el, event, fn }) => {
+      el.removeEventListener(event, fn)
+    })
+    this._listeners = []
+
+    if (this.el && this.el.parentNode) {
+      this.el.parentNode.removeChild(this.el)
+    }
+    this.el = null
+  }
+
+  /** Subscribe to a store property. Auto-unsubscribed on destroy. */
+  subscribe(store, prop, fn) {
+    const unsub = store.onChange(prop, fn)
+    this._unsubs.push(unsub)
+    return unsub
+  }
+
+  /** Add an event listener with auto-cleanup. */
+  on(target, event, fn, options) {
+    target.addEventListener(event, fn, options)
+    this._listeners.push({ el: target, event, fn })
+    return fn
+  }
+
+  /** Convenience: querySelector on this.el */
+  q(sel) {
+    return this.el?.querySelector(sel)
+  }
+
+  /** Convenience: querySelectorAll on this.el */
+  qa(sel) {
+    return this.el?.querySelectorAll(sel) || []
+  }
+
+  /** Set innerHTML. Warning: loses event listeners on replaced children. */
+  html(htmlStr) {
+    if (this.el) this.el.innerHTML = htmlStr
+  }
+
+  /**
+   * Create an element with tag, attributes, and children.
+   * @param {string} tag
+   * @param {Object} [attrs] — { className, id, style, textContent, innerHTML, ...dataset, ...rest }
+   * @param {...*} children — DOM nodes, strings, or arrays
+   * @returns {HTMLElement}
+   */
+  ce(tag, attrs, ...children) {
+    const el = document.createElement(tag)
+    attrs = attrs || {}
+    if (attrs.className) el.className = attrs.className
+    if (attrs.id) el.id = attrs.id
+    if (attrs.style) {
+      if (typeof attrs.style === 'string') el.style.cssText = attrs.style
+      else Object.assign(el.style, attrs.style)
+    }
+    if (attrs.title) el.title = attrs.title
+    if (attrs.disabled !== undefined) el.disabled = attrs.disabled
+    if (attrs.checked !== undefined) el.checked = attrs.checked
+    if (attrs.value !== undefined) el.value = attrs.value
+    if (attrs.type) el.type = attrs.type
+    if (attrs.placeholder) el.placeholder = attrs.placeholder
+    if (attrs.autocomplete) el.autocomplete = attrs.autocomplete
+    if (attrs.draggable !== undefined) el.draggable = attrs.draggable
+    if (attrs.role) el.setAttribute('role', attrs.role)
+    if (attrs['aria-modal']) el.setAttribute('aria-modal', attrs['aria-modal'])
+    if (attrs['aria-label']) el.setAttribute('aria-label', attrs['aria-label'])
+    if (attrs['aria-hidden']) el.setAttribute('aria-hidden', attrs['aria-hidden'])
+    if (attrs['aria-labelledby']) el.setAttribute('aria-labelledby', attrs['aria-labelledby'])
+    if (attrs.tabindex !== undefined) el.tabIndex = attrs.tabindex
+    if (attrs.href) el.href = attrs.href
+    if (attrs.target) el.target = attrs.target
+    if (attrs.rel) el.rel = attrs.rel
+    if (attrs.accept) el.accept = attrs.accept
+    if (attrs.name) el.name = attrs.name
+    // data-* attributes (e.g. 'data-group-id': 'abc')
+    for (const key in attrs) {
+      if (Object.prototype.hasOwnProperty.call(attrs, key) && key.startsWith('data-') && key.length > 5) {
+        el.dataset[key.slice(5)] = attrs[key]
+      }
+    }
+    // dataset object (e.g. { dataset: { groupId: 'abc' } })
+    if (attrs.dataset) Object.assign(el.dataset, attrs.dataset)
+    // innerHTML (if provided, skip children)
+    if (attrs.innerHTML) {
+      el.innerHTML = attrs.innerHTML
+    } else if (attrs.textContent) {
+      el.textContent = attrs.textContent
+    } else {
+      this._appendChildren(el, children.flat())
+    }
+    return el
+  }
+
+  _appendChildren(parent, children) {
+    for (const child of children) {
+      if (child === null || child === undefined) continue
+      if (typeof child === 'string' || typeof child === 'number') {
+        parent.appendChild(document.createTextNode(String(child)))
+      } else if (child instanceof Node) {
+        parent.appendChild(child)
+      } else if (Array.isArray(child)) {
+        this._appendChildren(parent, child)
+      }
+    }
+  }
+
+  /**
+   * Create a text node helper.
+   */
+  text(str) {
+    return document.createTextNode(String(str))
+  }
+
+  /**
+   * Create a fragment with children.
+   */
+  frag(...children) {
+    const f = document.createDocumentFragment()
+    this._appendChildren(f, children.flat())
+    return f
+  }
+}
diff --git a/src/lib/autofocus.js b/src/lib/autofocus.js
index b90e76d..3aa4b17 100644
--- a/src/lib/autofocus.js
+++ b/src/lib/autofocus.js
@@ -1,9 +1,9 @@
 /**
- * Action that autofocuses an element after mount when the condition is truthy.
+ * Focus 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())
+export function autofocus(el, condition = true) {
+  if (el && condition) {
+    queueMicrotask(() => el.focus())
   }
 }
diff --git a/src/lib/stores/app.js b/src/lib/stores/app.js
new file mode 100644
index 0000000..b67a432
--- /dev/null
+++ b/src/lib/stores/app.js
@@ -0,0 +1,27 @@
+/**
+ * App-level reactive state.
+ */
+
+import { Store } from './store.js'
+import { stopAutoLock } from './security.js'
+
+export class AppStore extends Store {
+  constructor() {
+    super({
+      isUnlocked: false,
+      encryptionKey: null,
+      salt: null,
+    })
+  }
+
+  /**
+   * Lock the vault — clear the key from memory.
+   */
+  lockVault() {
+    stopAutoLock()
+    this.encryptionKey = null
+    this.isUnlocked = false
+  }
+}
+
+export const app = new AppStore()
diff --git a/src/lib/stores/app.svelte.js b/src/lib/stores/app.svelte.js
deleted file mode 100644
index f783f1d..0000000
--- a/src/lib/stores/app.svelte.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * App-level reactive state using Svelte 5 runes.
- */
-
-import { stopAutoLock } from './security.svelte.js'
-
-export class AppStore {
-  isUnlocked = $state(false)
-  encryptionKey = $state(null)
-  salt = $state(null)
-
-  /**
-   * Lock the vault — clear the key from memory.
-   */
-  lockVault() {
-    stopAutoLock()
-    this.encryptionKey = null
-    this.isUnlocked = false
-  }
-}
-
-export const app = new AppStore()
diff --git a/src/lib/stores/search.svelte.js b/src/lib/stores/search.js
similarity index 69%
rename from src/lib/stores/search.svelte.js
rename to src/lib/stores/search.js
index 3993d3f..f0ec4ee 100644
--- a/src/lib/stores/search.svelte.js
+++ b/src/lib/stores/search.js
@@ -3,17 +3,22 @@
  * Shared between Sidebar and EntryList for coordinated filtering.
  */
 
-import { TRASH_GROUP_ID } from '../models/schema.js'
+import { Store } from './store.js'
 
 const DEBOUNCE_MS = 300
 
-export class SearchStore {
-  query = $state('') // raw input value — bound to the search input
-  debouncedQuery = $state('') // debounced value — used for actual search
-  activeGroupId = $state('all') // 'all', 'trash', or a group id
-  refreshTrigger = $state(0) // incremented to force a re-fetch
+export class SearchStore extends Store {
   #debounceTimer = null
 
+  constructor() {
+    super({
+      query: '',          // raw input value — bound to the search input
+      debouncedQuery: '', // debounced value — used for actual search
+      activeGroupId: 'all', // 'all', 'trash', or a group id
+      refreshTrigger: 0, // incremented to force a re-fetch
+    })
+  }
+
   /**
    * Update the search query with debouncing.
    * Call this from the input handler instead of setting `query` directly.
diff --git a/src/lib/stores/security.svelte.js b/src/lib/stores/security.js
similarity index 96%
rename from src/lib/stores/security.svelte.js
rename to src/lib/stores/security.js
index 724b2ab..890ab70 100644
--- a/src/lib/stores/security.svelte.js
+++ b/src/lib/stores/security.js
@@ -2,8 +2,8 @@
  * Security utilities: auto-lock timer, visibility change detection, cleanup.
  */
 
-import { app } from './app.svelte.js'
-import { settings } from './settings.svelte.js'
+import { app } from './app.js'
+import { settings } from './settings.js'
 
 let autoLockTimer = null
 
@@ -80,4 +80,3 @@ export function stopAutoLock() {
   document.removeEventListener('visibilitychange', handleVisibilityChange)
   window.removeEventListener('beforeunload', clearKeyOnExit)
 }
-
diff --git a/src/lib/stores/settings.svelte.js b/src/lib/stores/settings.js
similarity index 83%
rename from src/lib/stores/settings.svelte.js
rename to src/lib/stores/settings.js
index 5ee613c..4970744 100644
--- a/src/lib/stores/settings.svelte.js
+++ b/src/lib/stores/settings.js
@@ -5,11 +5,16 @@
  * page reloads. Defaults are used until the user explicitly saves.
  */
 
+import { Store } from './store.js'
 import { getSetting, saveSetting } from '../storage/db.js'
 
-export class SettingsStore {
-  autoLockMinutes = $state(5)
-  lockOnTabSwitch = $state(true)
+export class SettingsStore extends Store {
+  constructor() {
+    super({
+      autoLockMinutes: 5,
+      lockOnTabSwitch: true,
+    })
+  }
 
   /**
    * Load persisted settings from IndexedDB.
diff --git a/src/lib/stores/store.js b/src/lib/stores/store.js
new file mode 100644
index 0000000..f390b04
--- /dev/null
+++ b/src/lib/stores/store.js
@@ -0,0 +1,104 @@
+/**
+ * Minimal reactive store — subscriber/callback pattern.
+ *
+ * Usage:
+ *   const store = new Store({ count: 0, name: '' })
+ *   store.onChange('count', v => console.log('count is now', v))
+ *   store.set('count', 5)
+ *   store.get('count') // 5
+ *   // or via proxy: store.count = 5; console.log(store.count)
+ */
+
+export class Store {
+  #data
+  #subscribers = {} // prop -> Set<fn>
+
+  /** @param {Record<string, any>} initial */
+  constructor(initial) {
+    this.#data = { ...initial }
+    // Build a live proxy so `store.prop` reads/writes go through get/set
+    const self = this
+    const proxy = new Proxy({}, {
+      get(_, prop) {
+        if (prop === '_data') return self.#data
+        if (prop in self.#data) return self.#data[prop]
+        return undefined
+      },
+      set(_, prop, value) {
+        if (prop in self.#data) {
+          const old = self.#data[prop]
+          self.#data[prop] = value
+          if (old !== value) self.#emit(prop, value)
+          return true
+        }
+        return false
+      },
+    })
+    // Attach proxy methods onto the instance so `store.set(...)` works
+    // but property access goes through the proxy.  We do this by
+    // forwarding store.get/set/onChange through the instance and
+    // exposing the proxy as `store.$` for direct property binding.
+    this.$ = proxy
+    // Also make direct property access on the instance work by
+    // defining getters/setters dynamically.  We update them when
+    // new props are added.
+    this.#syncDescriptors()
+  }
+
+  /** @param {string} prop @param {*} value */
+  set(prop, value) {
+    const old = this.#data[prop]
+    this.#data[prop] = value
+    if (old !== value) this.#emit(prop, value)
+    this.#syncDescriptors()
+  }
+
+  /** @param {string} prop @returns {*} */
+  get(prop) {
+    return this.#data[prop]
+  }
+
+  /** @param {string} prop @param {Function} fn @returns {Function} unsubscribe */
+  onChange(prop, fn) {
+    if (!this.#subscribers[prop]) this.#subscribers[prop] = new Set()
+    this.#subscribers[prop].add(fn)
+    return () => this.#subscribers[prop].delete(fn)
+  }
+
+  /** @param {string} prop @param {Function} fn */
+  onChangeOnce(prop, fn) {
+    const unsub = this.onChange(prop, (...args) => {
+      fn(...args)
+      unsub()
+    })
+    return unsub
+  }
+
+  /** @param {string} prop @param {*} value */
+  #emit(prop, value) {
+    const fns = this.#subscribers[prop]
+    if (fns) {
+      const snap = [...fns]
+      snap.forEach(fn => {
+        try { fn(value) } catch (e) { console.error('Store subscriber error:', e) }
+      })
+    }
+  }
+
+  // Keep instance-level property access in sync with internal data
+  #syncDescriptors() {
+    for (const key of Object.keys(this.#data)) {
+      if (Object.getOwnPropertyDescriptor(this, key)) continue
+      Object.defineProperty(this, key, {
+        get: () => this.#data[key],
+        set: (value) => {
+          const old = this.#data[key]
+          this.#data[key] = value
+          if (old !== value) this.#emit(key, value)
+        },
+        enumerable: true,
+        configurable: true,
+      })
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 4785656..cc22493 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,8 @@
-import { mount } from 'svelte'
 import './styles/main.css'
-import App from './App.svelte'
+import { App } from './App.js'
 
-const app = mount(App, {
-  target: document.getElementById('app'),
-})
+const root = document.getElementById('app')
+const app = new App(root)
+app.mount()
 
 export default app
diff --git a/src/styles/main.css b/src/styles/main.css
index 6147c16..58c8a7f 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -177,3 +177,1064 @@ label {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* ============================================================
+   LockScreen
+   ============================================================ */
+.lock-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1rem;
+}
+
+.lock-card {
+  width: 100%;
+  max-width: 400px;
+  padding: 2.5rem 2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.lock-icon {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.lock-card h1 { text-align: center; }
+
+.subtitle {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.lock-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lock-screen .error-banner {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.warning-banner {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(255, 193, 7, 0.15);
+  border: 1px solid rgba(230, 168, 0, 0.5);
+  border-radius: var(--radius-md);
+  color: #b8860b;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.hint {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-align: center;
+  line-height: 1.4;
+  margin-top: 0.5rem;
+}
+
+/* ============================================================
+   MainLayout (shell)
+   ============================================================ */
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+}
+
+.mobile-header {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.mobile-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.sidebar {
+  width: 260px;
+  min-width: 260px;
+  background: var(--color-sidebar);
+  border-right: 1px solid var(--color-border);
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.top-bar-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.top-bar-title h1 {
+  font-size: 1.1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.top-bar-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.content-area {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 49;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* MainLayout modals (empty-trash confirm) */
+.ml-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.ml-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 380px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.ml-modal h3 { margin-bottom: 16px; }
+
+.ml-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
+.ml-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   Sidebar
+   ============================================================ */
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar-header h2 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.search-box {
+  padding: 12px 16px;
+}
+
+.search-box input {
+  padding: 8px 10px;
+  font-size: 0.85rem;
+}
+
+.groups-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.group-row {
+  display: flex;
+  align-items: center;
+}
+
+.group-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms;
+  text-align: left;
+}
+
+.group-item:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.group-item.active {
+  background: rgba(108, 99, 255, 0.15);
+  color: var(--color-primary);
+}
+
+.group-item.drag-over {
+  background: rgba(108, 99, 255, 0.2);
+  border: 2px dashed var(--color-primary);
+  outline: 2px solid rgba(108, 99, 255, 0.25);
+  outline-offset: -4px;
+  transform: scale(1.02);
+}
+
+.group-item.drag-over .drop-icon {
+  opacity: 1;
+  transform: scale(1.2);
+}
+
+.group-item.dropped {
+  animation: dropFlash 600ms ease;
+}
+
+@keyframes dropFlash {
+  0% { background: rgba(52, 211, 153, 0.35); }
+  100% { background: transparent; }
+}
+
+.drop-icon {
+  opacity: 0;
+  font-size: 0.85rem;
+  transition: opacity 150ms, transform 150ms;
+  flex-shrink: 0;
+}
+
+.group-icon {
+  font-size: 1rem;
+}
+
+.group-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.group-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.group-actions {
+  display: flex;
+  gap: 2px;
+  padding-right: 4px;
+}
+
+.trash-section {
+  padding: 8px;
+  border-top: 1px solid var(--color-border);
+}
+
+.group-action-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  transition: background-color 150ms;
+}
+
+.group-action-btn:hover {
+  background: var(--color-surface-hover);
+}
+
+.sidebar-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+/* Color picker */
+.color-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 150ms, border-color 150ms;
+}
+
+.color-swatch:hover {
+  transform: scale(1.15);
+}
+
+.color-swatch.selected {
+  border-color: #fff;
+  transform: scale(1.15);
+}
+
+/* Sidebar modals (group form, delete confirm) */
+.sb-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.sb-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 380px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.sb-modal h3 { margin-bottom: 16px; }
+
+.sb-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
+.sb-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   EntryList
+   ============================================================ */
+.entry-list .loading,
+.entry-list .empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--color-text-muted);
+}
+
+.entry-list .error-banner {
+  padding: 12px 16px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.empty-text {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.empty-hint {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+.results-info {
+  padding: 8px 0;
+  margin-bottom: 8px;
+}
+
+.entries-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.entries-table th {
+  text-align: left;
+  padding: 8px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.entry-row {
+  cursor: grab;
+  transition: background-color 150ms, opacity 150ms;
+}
+
+.entry-row:active {
+  cursor: grabbing;
+}
+
+.entry-row:hover {
+  background: var(--color-surface-hover);
+}
+
+.entry-row.dragging {
+  opacity: 0.35;
+}
+
+.entry-row td {
+  padding: 10px 12px;
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.drag-handle {
+  color: var(--color-text-muted);
+  opacity: 0.3;
+  margin-right: 6px;
+  font-size: 0.9rem;
+  user-select: none;
+  transition: opacity 150ms;
+}
+
+.entry-row:hover .drag-handle {
+  opacity: 0.7;
+}
+
+.restore-btn {
+  font-size: 0.85rem;
+  padding: 4px 6px;
+}
+
+.entry-title {
+  font-weight: 500;
+}
+
+.entry-username {
+  color: var(--color-text-muted);
+}
+
+.entry-url {
+  color: var(--color-text-muted);
+  max-width: 200px;
+}
+
+.notes-icon {
+  color: var(--color-text-muted);
+  cursor: help;
+  font-size: 0.95rem;
+  opacity: 0.5;
+  transition: opacity 150ms;
+}
+
+.notes-icon:hover {
+  opacity: 1;
+}
+
+.notes-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-popup {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  z-index: 100;
+  background: var(--color-surface, #1e1e2e);
+  color: var(--color-text, #cdd6f4);
+  border: 1px solid var(--color-border, #45475a);
+  border-radius: var(--radius-md, 8px);
+  padding: 8px 12px;
+  font-size: 0.8rem;
+  min-width: 150px;
+  max-width: 300px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+  transition: opacity 150ms, visibility 150ms;
+}
+
+.notes-tooltip:hover .tooltip-popup {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* ============================================================
+   EntryForm
+   ============================================================ */
+.entry-form .loading {
+  text-align: center;
+  padding: 3rem;
+  color: var(--color-text-muted);
+}
+
+.entry-form .error-banner {
+  padding: 12px 16px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+  margin-bottom: 16px;
+}
+
+.ef-form-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 500px;
+}
+
+.validation-errors {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: rgba(251, 191, 36, 0.1);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  border-radius: var(--radius-md);
+}
+
+.validation-error {
+  font-size: 0.85rem;
+  color: var(--color-warning);
+}
+
+.password-input-group {
+  display: flex;
+  gap: 8px;
+}
+
+.password-input-group input {
+  flex: 1;
+}
+
+.ef-form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+/* ============================================================
+   EntryDetail
+   ============================================================ */
+.entry-detail .loading,
+.entry-detail .empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: var(--color-text-muted);
+}
+
+.entry-detail .error-banner {
+  padding: 12px 16px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+}
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 10px 16px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.85rem;
+  color: var(--color-success);
+  box-shadow: var(--shadow);
+  z-index: 1000;
+  animation: slideIn 200ms ease;
+}
+
+@keyframes slideIn {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.detail-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 600px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--color-border);
+  gap: 12px;
+}
+
+.detail-header h2 {
+  font-size: 1.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.detail-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.field-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.95rem;
+  word-break: break-all;
+}
+
+.field-value.notes {
+  white-space: pre-wrap;
+}
+
+.field-value a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.field-value a:hover {
+  text-decoration: underline;
+}
+
+.copy-btn {
+  flex-shrink: 0;
+}
+
+.detail-meta {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+/* EntryDetail modals */
+.ed-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.ed-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 400px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.ed-modal h3 { margin-bottom: 12px; }
+
+.ed-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+}
+
+.ed-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   ImportExport
+   ============================================================ */
+.ie-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 1rem;
+}
+
+.ie-modal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  max-width: 420px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.ie-modal h3 { margin-bottom: 12px; }
+
+.ie-modal p {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 16px;
+}
+
+.ie-modal-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.ie-error-banner {
+  padding: 10px 14px;
+  background: rgba(229, 72, 77, 0.15);
+  border: 1px solid rgba(229, 72, 77, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-danger);
+  font-size: 0.85rem;
+  margin-bottom: 12px;
+}
+
+.success-banner {
+  padding: 10px 14px;
+  background: rgba(52, 211, 153, 0.15);
+  border: 1px solid rgba(52, 211, 153, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--color-success);
+  font-size: 0.85rem;
+  margin-bottom: 12px;
+}
+
+.import-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color 150ms, background-color 150ms;
+}
+
+.radio-label:hover {
+  border-color: var(--color-primary);
+  background: var(--color-surface-hover);
+}
+
+.radio-label input[type="radio"] {
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
+.radio-label span {
+  font-size: 0.85rem;
+}
+
+.file-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  margin-bottom: 4px;
+}
+
+input[type="file"] {
+  font-size: 0.85rem;
+  padding: 8px;
+}
+
+/* Group selection for export */
+.group-select-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 4px;
+}
+
+.group-select-header .entry-count {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.group-select-list {
+  max-height: 240px;
+  overflow-y: auto;
+  margin-bottom: 8px;
+}
+
+.group-select-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.group-select-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.group-select-list::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.checkbox-label input[type="checkbox"] {
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
+.group-checkbox {
+  padding: 6px 12px;
+  border-radius: var(--radius-md);
+  transition: background-color 150ms;
+}
+
+.group-checkbox:hover {
+  background: var(--color-surface-hover);
+}
+
+.group-color-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ============================================================
+   SettingsDialog
+   ============================================================ */
+.settings-panel {
+  max-width: 500px;
+}
+
+.sd-form-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+}
+
+.sd-form-card h3 {
+  margin-bottom: 16px;
+}
+
+.sd-form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.toggle-label input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-track {
+  width: 40px;
+  height: 22px;
+  background: var(--color-border);
+  border-radius: 11px;
+  position: relative;
+  transition: background-color 150ms;
+  flex-shrink: 0;
+}
+
+.toggle-track .toggle-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 150ms;
+}
+
+.toggle-label input:checked + .toggle-track {
+  background: var(--color-primary);
+}
+
+.toggle-label input:checked + .toggle-track .toggle-thumb {
+  transform: translateX(18px);
+}
+
+.toggle-text {
+  font-size: 0.875rem;
+  color: var(--color-text);
+}
+
+/* ============================================================
+   Responsive
+   ============================================================ */
+@media (max-width: 768px) {
+  .mobile-header {
+    display: flex;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 50;
+    transform: translateX(-100%);
+    transition: transform 200ms ease;
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .content-area {
+    padding: 12px;
+  }
+
+  .top-bar {
+    padding: 10px 12px;
+  }
+
+  .entries-table th:nth-child(4),
+  .entry-row td:nth-child(4) {
+    display: none;
+  }
+}
+
+@media (max-width: 600px) {
+  .entries-table th:nth-child(3),
+  .entry-row td:nth-child(3) {
+    display: none;
+  }
+
+  .header-actions {
+    display: none;
+  }
+}
diff --git a/svelte.config.js b/svelte.config.js
deleted file mode 100644
index 0cf7db3..0000000
--- a/svelte.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
-export default {}
diff --git a/tests/lib/stores/app.test.js b/tests/lib/stores/app.test.js
index fb37f99..cfc9831 100644
--- a/tests/lib/stores/app.test.js
+++ b/tests/lib/stores/app.test.js
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { app } from '../../../src/lib/stores/app.svelte.js'
+import { app } from '../../../src/lib/stores/app.js'
 
 describe('AppStore', () => {
   beforeEach(() => {
diff --git a/tests/lib/stores/search.test.js b/tests/lib/stores/search.test.js
index eb3e916..12d12c2 100644
--- a/tests/lib/stores/search.test.js
+++ b/tests/lib/stores/search.test.js
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { search } from '../../../src/lib/stores/search.svelte.js'
+import { search } from '../../../src/lib/stores/search.js'
 
 describe('SearchStore', () => {
   beforeEach(() => {
diff --git a/tests/lib/stores/security.test.js b/tests/lib/stores/security.test.js
index 6bcd13d..121e882 100644
--- a/tests/lib/stores/security.test.js
+++ b/tests/lib/stores/security.test.js
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { startAutoLock, stopAutoLock } from '../../../src/lib/stores/security.svelte.js'
-import { app } from '../../../src/lib/stores/app.svelte.js'
-import { settings } from '../../../src/lib/stores/settings.svelte.js'
+import { startAutoLock, stopAutoLock } from '../../../src/lib/stores/security.js'
+import { app } from '../../../src/lib/stores/app.js'
+import { settings } from '../../../src/lib/stores/settings.js'
 
 // Reset singleton state before each test
 function resetState() {
diff --git a/tests/lib/stores/settings.test.js b/tests/lib/stores/settings.test.js
index 6a14f47..b181833 100644
--- a/tests/lib/stores/settings.test.js
+++ b/tests/lib/stores/settings.test.js
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { settings } from '../../../src/lib/stores/settings.svelte.js'
+import { settings } from '../../../src/lib/stores/settings.js'
 import { saveSetting, getSetting } from '../../../src/lib/storage/db.js'
 
 beforeEach(() => {
diff --git a/vite.config.js b/vite.config.js
index 9982e50..39f73cd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,9 @@
 import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { viteSingleFile } from 'vite-plugin-singlefile'
 
 // https://vite.dev/config/
 export default defineConfig(({ command }) => ({
   plugins: [
-    svelte(),
     ...(command === 'build'
       ? [viteSingleFile({
           inlineStyles: true,