@marianmeres/stuic 2.16.0 → 2.18.0

package/dist/components/AvatarInitials/AvatarInitials.svelte

@@ -5,7 +5,7 @@
 		/** Optional string for color hash calculation (e.g., email, user ID). Falls back to `input` */
 		hashSource?: string;
 		/** Size preset or custom Tailwind size class */
-		size?: "sm" | "md" | "lg" | string;
+		size?: "sm" | "md" | "lg" | "xl" | string;
 		/** Click handler - when provided, renders as a button */
 		onclick?: (event: MouseEvent) => void;
 		/** Background color (Tailwind class). Ignored if autoColor=true */
@@ -41,6 +41,7 @@
 		sm: "size-8 text-xs",
 		md: "size-10 text-sm",
 		lg: "size-14 text-base",
+		xl: "size-16 text-lg",
 	};
 
 	let initials = $derived.by(() => {
@@ -52,7 +53,7 @@
 		if (_input.includes("@")) {
 			const username = _input.split("@")[0];
 			// Split by common separators (., _, -)
-			const parts = username.split(/[._-]/).filter(Boolean);
+			const parts = username.split(/[._+-]/).filter(Boolean);
 			if (parts.length > 1) {
 				_input = parts.map((p) => p.charAt(0)).join("");
 			} else {

package/dist/components/AvatarInitials/AvatarInitials.svelte.d.ts

@@ -4,7 +4,7 @@ export interface Props {
     /** Optional string for color hash calculation (e.g., email, user ID). Falls back to `input` */
     hashSource?: string;
     /** Size preset or custom Tailwind size class */
-    size?: "sm" | "md" | "lg" | string;
+    size?: "sm" | "md" | "lg" | "xl" | string;
     /** Click handler - when provided, renders as a button */
     onclick?: (event: MouseEvent) => void;
     /** Background color (Tailwind class). Ignored if autoColor=true */

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/components/DropdownMenu/DropdownMenu.svelte

@@ -213,7 +213,7 @@
 		bg-white dark:bg-neutral-800
 		text-neutral-900 dark:text-neutral-100
 		border border-neutral-200 dark:border-neutral-700
-		rounded-md shadow-md
+		rounded-md shadow-sm
 		p-1
 		overflow-y-auto
 		z-50

package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts

@@ -138,7 +138,7 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
 }
 export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
 export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tfocus-visible:outline-2 focus-visible:outline-offset-2\n\t\tcursor-pointer\n\t";
-export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-md\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
+export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-sm\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
 export declare const DROPDOWN_MENU_ITEM_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\tpx-2 py-1.5\n\t\tmin-h-[44px]\n\t\ttext-left text-sm\n\t\trounded-sm\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\t\thover:bg-neutral-100 dark:hover:bg-neutral-700\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-600\n\t";
 export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";
 export declare const DROPDOWN_MENU_HEADER_CLASSES = "\n\t\tpx-2 py-1.5\n\t\ttext-xs font-semibold uppercase tracking-wide\n\t\ttext-neutral-500 dark:text-neutral-400\n\t\tselect-none\n\t";

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/dist/utils/observe-exists.svelte.js

@@ -28,7 +28,7 @@ export function observeExists(selector, options = {}) {
         throw new TypeError("Expecting non empty selector");
     const { rootElement = document.body } = options;
     const ns = `[observeExists] [${selector}]`;
-    const clog = (...args) => console.debug(ns, ...args);
+    const clogDebug = (...args) => console.debug(ns, ...args);
     const check = () => rootElement.querySelector(selector) !== null;
     let current = $state(check());
     //
@@ -47,14 +47,14 @@ export function observeExists(selector, options = {}) {
             current = check();
     });
     // start observing now
-    clog(`connecting...`);
+    clogDebug(`connecting...`);
     observer.observe(rootElement, { childList: true, subtree: true });
     return {
         get current() {
             return current;
         },
         disconnect() {
-            clog(`disconnecting...`);
+            clogDebug(`disconnecting...`);
             observer.disconnect();
         },
         forceCheck() {

package/package.json

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