@marianmeres/stuic 2.17.0 → 2.18.0

package/dist/components/Backdrop/Backdrop.svelte

@@ -14,6 +14,9 @@
 		visible?: boolean;
 		noScrollLock?: boolean;
 	}
+
+	// Stack to track visible Backdrops - only topmost handles Escape
+	const escapeStack: Set<symbol> = new Set();
 </script>
 
 <script lang="ts">
@@ -104,17 +107,34 @@
 	// Note, that this will also reset if nested... (which is not desired, but ignoring)
 	onDestroy(BodyScroll.unlock);
 
+	// Unique ID for this Backdrop instance
+	const instanceId = Symbol();
+
 	$effect(() => {
+		if (!visible || typeof onEscape !== "function") return;
+
+		// Add to stack when visible
+		escapeStack.add(instanceId);
+
 		function onkeydown(e: KeyboardEvent) {
-			if (e.key === "Escape" && typeof onEscape === "function") {
-				e.stopPropagation();
-				e.stopImmediatePropagation();
+			// Skip if already handled by another component (ModalDialog, DropdownMenu, etc.)
+			if (e.defaultPrevented) return;
+
+			// Only handle if this is the topmost Backdrop
+			const stack = [...escapeStack];
+			if (stack[stack.length - 1] !== instanceId) return;
+
+			if (e.key === "Escape") {
 				e.preventDefault();
-				onEscape();
+				onEscape?.();
 			}
 		}
-		el?.addEventListener("keydown", onkeydown);
-		return () => el?.removeEventListener("keydown", onkeydown);
+
+		window.addEventListener("keydown", onkeydown);
+		return () => {
+			escapeStack.delete(instanceId);
+			window.removeEventListener("keydown", onkeydown);
+		};
 	});
 </script>
 

package/dist/utils/index.d.ts

@@ -11,6 +11,7 @@ export * from "./file-from-bloburl.js";
 export * from "./force-download.js";
 export * from "./get-file-type-label.js";
 export * from "./get-id.js";
+export * from "./input-history.svelte.js";
 export * from "./is-browser.js";
 export * from "./is-image.js";
 export * from "./is-mac.js";

package/dist/utils/index.js

@@ -11,6 +11,7 @@ export * from "./file-from-bloburl.js";
 export * from "./force-download.js";
 export * from "./get-file-type-label.js";
 export * from "./get-id.js";
+export * from "./input-history.svelte.js";
 export * from "./is-browser.js";
 export * from "./is-image.js";
 export * from "./is-mac.js";

package/dist/utils/input-history.svelte.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Configuration options for InputHistory
+ */
+export interface InputHistoryOptions {
+    /** Composite key parts for namespacing (e.g., [projectId, domain, entity, type]) */
+    keyParts: string[];
+    /** Maximum number of entries to store (default: 10) */
+    maxEntries?: number;
+    /** App ID prefix for the storage key (default: "app") */
+    appId?: string;
+    /** Feature name for the key (default: "input-history") */
+    featureName?: string;
+}
+/**
+ * A reactive input history manager with localStorage persistence and arrow key navigation.
+ *
+ * @example
+ * ```ts
+ * const history = new InputHistory({
+ *   keyParts: [projectId, domain, entity, type],
+ *   appId: "joy",
+ *   featureName: "filter-history"
+ * });
+ *
+ * // Add entry on submit
+ * history.add(query);
+ *
+ * // Navigate with arrow keys
+ * history.navigateUp();    // Go to older entry
+ * history.navigateDown();  // Go to newer entry
+ *
+ * // Get current entry for display
+ * const current = history.getCurrent();
+ *
+ * // Reset navigation when user starts typing
+ * history.reset();
+ * ```
+ */
+export declare class InputHistory {
+    #private;
+    /** Storage key for this history instance */
+    readonly key: string;
+    /** Maximum entries to store */
+    readonly maxEntries: number;
+    constructor(options: InputHistoryOptions);
+    /** Get the stored history entries (newest first) */
+    get entries(): string[];
+    /** Get current navigation index (-1 when not navigating) */
+    get navigationIndex(): number;
+    /** Check if currently navigating through history */
+    get isNavigating(): boolean;
+    /**
+     * Add a new query to history (called on Enter/submit).
+     * Deduplicates and limits to maxEntries.
+     */
+    add(query: string): void;
+    /**
+     * Navigate up (to older entries).
+     * On first call, saves current input value.
+     * @param currentValue - The current input value (saved on first navigation)
+     */
+    navigateUp(currentValue?: string): string | null;
+    /**
+     * Navigate down (to newer entries).
+     * When reaching past newest, returns to temp value.
+     */
+    navigateDown(): string | null;
+    /**
+     * Get the current history entry based on navigation index.
+     * Returns null if not navigating.
+     */
+    getCurrent(): string | null;
+    /**
+     * Reset navigation state (call when user starts typing).
+     */
+    reset(): void;
+    /**
+     * Clear all history for this key.
+     */
+    clear(): void;
+    /**
+     * Clear all histories matching a pattern prefix.
+     * Call this on logout to clean up user data.
+     *
+     * @param pattern - Key prefix to match (e.g., "joy:input-history")
+     *
+     * @example
+     * ```ts
+     * // On logout, clear all input histories
+     * InputHistory.clearAllMatching("joy:input-history");
+     * ```
+     */
+    static clearAllMatching(pattern: string): void;
+    /**
+     * Clear all registered histories (nuclear option).
+     */
+    static clearAll(): void;
+    /**
+     * Get all registered history keys (for debugging).
+     */
+    static getRegisteredKeys(): string[];
+}

package/dist/utils/input-history.svelte.js

@@ -0,0 +1,197 @@
+import { localStorageState } from "./persistent-state.svelte.js";
+/**
+ * A reactive input history manager with localStorage persistence and arrow key navigation.
+ *
+ * @example
+ * ```ts
+ * const history = new InputHistory({
+ *   keyParts: [projectId, domain, entity, type],
+ *   appId: "joy",
+ *   featureName: "filter-history"
+ * });
+ *
+ * // Add entry on submit
+ * history.add(query);
+ *
+ * // Navigate with arrow keys
+ * history.navigateUp();    // Go to older entry
+ * history.navigateDown();  // Go to newer entry
+ *
+ * // Get current entry for display
+ * const current = history.getCurrent();
+ *
+ * // Reset navigation when user starts typing
+ * history.reset();
+ * ```
+ */
+export class InputHistory {
+    /** Storage key for this history instance */
+    key;
+    /** Maximum entries to store */
+    maxEntries;
+    /** Persistent state for stored history entries */
+    #storage;
+    /** Current navigation index (-1 means "not navigating", 0 is newest, length-1 is oldest) */
+    #navigationIndex = $state(-1);
+    /** Temporary value holder for current input before navigation started */
+    #tempValue = $state("");
+    constructor(options) {
+        const { keyParts, maxEntries = 10, appId = "app", featureName = "input-history", } = options;
+        this.maxEntries = maxEntries;
+        // Build composite key: "joy:input-history:projectId:domain:entity:type"
+        this.key = [appId, featureName, ...keyParts].filter(Boolean).join(":");
+        // Initialize persistent storage
+        this.#storage = localStorageState(this.key, []);
+        // Register this instance for cleanup
+        InputHistory.#register(this.key);
+    }
+    // ─────────────────────────────────────────────────────────────
+    // Public API
+    // ─────────────────────────────────────────────────────────────
+    /** Get the stored history entries (newest first) */
+    get entries() {
+        return this.#storage.current;
+    }
+    /** Get current navigation index (-1 when not navigating) */
+    get navigationIndex() {
+        return this.#navigationIndex;
+    }
+    /** Check if currently navigating through history */
+    get isNavigating() {
+        return this.#navigationIndex >= 0;
+    }
+    /**
+     * Add a new query to history (called on Enter/submit).
+     * Deduplicates and limits to maxEntries.
+     */
+    add(query) {
+        query = query.trim();
+        if (!query)
+            return;
+        const current = [...this.#storage.current];
+        // Remove duplicates (case-sensitive)
+        const filtered = current.filter((item) => item !== query);
+        // Add to beginning (newest first)
+        filtered.unshift(query);
+        // Limit to maxEntries
+        this.#storage.current = filtered.slice(0, this.maxEntries);
+        // Reset navigation after adding
+        this.reset();
+    }
+    /**
+     * Navigate up (to older entries).
+     * On first call, saves current input value.
+     * @param currentValue - The current input value (saved on first navigation)
+     */
+    navigateUp(currentValue) {
+        const entries = this.entries;
+        if (entries.length === 0)
+            return null;
+        // If not navigating yet, save current value and start
+        if (this.#navigationIndex < 0) {
+            this.#tempValue = currentValue ?? "";
+            this.#navigationIndex = 0;
+        }
+        else if (this.#navigationIndex < entries.length - 1) {
+            // Move to older entry
+            this.#navigationIndex++;
+        }
+        // At oldest entry, stay there
+        return this.getCurrent();
+    }
+    /**
+     * Navigate down (to newer entries).
+     * When reaching past newest, returns to temp value.
+     */
+    navigateDown() {
+        if (this.#navigationIndex < 0)
+            return null;
+        if (this.#navigationIndex > 0) {
+            // Move to newer entry
+            this.#navigationIndex--;
+            return this.getCurrent();
+        }
+        else {
+            // At newest entry, go back to temp value
+            const temp = this.#tempValue;
+            this.reset();
+            return temp;
+        }
+    }
+    /**
+     * Get the current history entry based on navigation index.
+     * Returns null if not navigating.
+     */
+    getCurrent() {
+        if (this.#navigationIndex < 0)
+            return null;
+        return this.entries[this.#navigationIndex] ?? null;
+    }
+    /**
+     * Reset navigation state (call when user starts typing).
+     */
+    reset() {
+        this.#navigationIndex = -1;
+        this.#tempValue = "";
+    }
+    /**
+     * Clear all history for this key.
+     */
+    clear() {
+        this.#storage.current = [];
+        this.reset();
+    }
+    // ─────────────────────────────────────────────────────────────
+    // Static cleanup registration
+    // ─────────────────────────────────────────────────────────────
+    /** Registry of all history keys (for cleanup on logout) */
+    static #registeredKeys = new Set();
+    /** Register a key for potential cleanup */
+    static #register(key) {
+        InputHistory.#registeredKeys.add(key);
+    }
+    /**
+     * Clear all histories matching a pattern prefix.
+     * Call this on logout to clean up user data.
+     *
+     * @param pattern - Key prefix to match (e.g., "joy:input-history")
+     *
+     * @example
+     * ```ts
+     * // On logout, clear all input histories
+     * InputHistory.clearAllMatching("joy:input-history");
+     * ```
+     */
+    static clearAllMatching(pattern) {
+        // Clear from our registry
+        for (const key of InputHistory.#registeredKeys) {
+            if (key.startsWith(pattern)) {
+                localStorage.removeItem(key);
+                InputHistory.#registeredKeys.delete(key);
+            }
+        }
+        // Also scan localStorage for any keys we might have missed
+        // (e.g., from previous sessions)
+        for (let i = localStorage.length - 1; i >= 0; i--) {
+            const key = localStorage.key(i);
+            if (key?.startsWith(pattern)) {
+                localStorage.removeItem(key);
+            }
+        }
+    }
+    /**
+     * Clear all registered histories (nuclear option).
+     */
+    static clearAll() {
+        for (const key of InputHistory.#registeredKeys) {
+            localStorage.removeItem(key);
+        }
+        InputHistory.#registeredKeys.clear();
+    }
+    /**
+     * Get all registered history keys (for debugging).
+     */
+    static getRegisteredKeys() {
+        return [...InputHistory.#registeredKeys];
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",