@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/actions/typeahead.svelte.js

@@ -0,0 +1,328 @@
+import { ItemCollection } from "@marianmeres/item-collection";
+import { unaccent } from "../utils/unaccent.js";
+import { createClog } from "@marianmeres/clog";
+const DEFAULT_DEBOUNCE_MS = 150;
+const DEFAULT_APPEND_HINT = " [tab]";
+const clog = createClog("typeahead", { color: "auto" });
+/**
+ * A Svelte action that adds typeahead/autocomplete functionality to an input element.
+ *
+ * Creates a "ghost input" behind the main input to show suggestions. Supports keyboard
+ * navigation with ArrowUp/Down, accepts suggestions with Tab/Enter/ArrowRight, and
+ * handles accent-insensitive matching.
+ *
+ * @param el - The input element to add typeahead to
+ * @param fn - Function returning configuration options
+ *
+ * @example
+ * ```svelte
+ * <input
+ *   bind:value
+ *   use:typeahead={() => ({
+ *     getOptions: async (q) => fetchSuggestions(q),
+ *     renderOptionLabel: (item) => item.name,
+ *     onSubmit: (v) => console.log('Selected:', v),
+ *   })}
+ * />
+ * ```
+ */
+export function typeahead(el, fn) {
+    let ghostEl = null;
+    let options = null;
+    let debounceTimer = null;
+    let previousKey = "";
+    let allowListAll = false;
+    // Current resolved options
+    let currentOpts = { getOptions: async () => [] };
+    // Helper: render option label
+    function renderLabel(item) {
+        return (currentOpts.renderOptionLabel?.(item) ??
+            `${item[currentOpts.itemIdPropName || "id"]}`);
+    }
+    // Helper: get current suggestion string
+    function getSuggestion() {
+        const active = options?.active;
+        if (!active)
+            return "";
+        const value = el.value || "";
+        const suggestion = renderLabel(active);
+        // Preserve user's case, append rest from suggestion
+        return value + suggestion.slice(value.length);
+    }
+    // Helper: get visible suggestion (with hint, or empty if matches value)
+    function getVisibleSuggestion() {
+        const suggestion = getSuggestion();
+        const value = el.value || "";
+        if (!suggestion ||
+            unaccent(suggestion.toLowerCase()) === unaccent(value.toLowerCase())) {
+            return "";
+        }
+        const hint = currentOpts.appendHint ?? DEFAULT_APPEND_HINT;
+        return suggestion ? suggestion + hint : "";
+    }
+    // Update ghost input value
+    function updateGhost() {
+        if (ghostEl) {
+            ghostEl.value = getVisibleSuggestion();
+        }
+    }
+    // Create ghost input element
+    function createGhost() {
+        if (ghostEl)
+            return;
+        ghostEl = document.createElement("input");
+        ghostEl.type = "text";
+        ghostEl.tabIndex = -1;
+        ghostEl.readOnly = true;
+        ghostEl.setAttribute("aria-hidden", "true");
+        ghostEl.setAttribute("autocomplete", "off");
+        // Ensure parent has relative positioning
+        const parent = el.parentElement;
+        if (parent) {
+            const parentPos = getComputedStyle(parent).position;
+            if (parentPos === "static") {
+                parent.style.position = "relative";
+            }
+        }
+        // Style main input for proper layering
+        el.style.position = "relative";
+        el.style.zIndex = "10";
+        el.style.background = "transparent";
+        // Style ghost input
+        applyGhostStyles();
+        // Insert after main input
+        el.insertAdjacentElement("afterend", ghostEl);
+    }
+    function applyGhostStyles() {
+        if (!ghostEl)
+            return;
+        const computed = getComputedStyle(el);
+        // Copy relevant styles from main input
+        ghostEl.style.position = "absolute";
+        ghostEl.style.inset = "0";
+        ghostEl.style.pointerEvents = "none";
+        ghostEl.style.opacity = "0.4";
+        ghostEl.style.zIndex = "0";
+        ghostEl.style.font = computed.font;
+        ghostEl.style.padding = computed.padding;
+        ghostEl.style.borderColor = "transparent";
+        ghostEl.style.background = "transparent";
+        ghostEl.style.color = "inherit";
+        ghostEl.style.outline = "none";
+        ghostEl.style.width = "100%";
+        ghostEl.style.boxSizing = "border-box";
+        ghostEl.style.transition = "none";
+        // Apply custom class if provided
+        if (currentOpts.classGhost) {
+            ghostEl.className = currentOpts.classGhost;
+        }
+    }
+    // Debounced search
+    function scheduleSearch(query) {
+        if (debounceTimer)
+            clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(async () => {
+            await performSearch(query);
+        }, currentOpts.debounceMs ?? DEFAULT_DEBOUNCE_MS);
+    }
+    async function performSearch(query) {
+        if (!options || !currentOpts.getOptions)
+            return;
+        options.clear();
+        if (!allowListAll && !query) {
+            updateGhost();
+            return;
+        }
+        currentOpts.onFetchingChange?.(true);
+        try {
+            const results = await currentOpts.getOptions(query, []);
+            if (!results.length) {
+                updateGhost();
+                return;
+            }
+            // Filter for exact "starts with" match
+            let found = results;
+            if (query) {
+                found = results.filter((item) => {
+                    const label = unaccent(renderLabel(item).toLowerCase());
+                    return label.startsWith(unaccent(query.toLowerCase()));
+                });
+            }
+            if (!found.length) {
+                updateGhost();
+                return;
+            }
+            options.addMany(found);
+            options.setActiveFirst();
+            updateGhost();
+        }
+        catch (err) {
+            clog.error(err);
+        }
+        finally {
+            currentOpts.onFetchingChange?.(false);
+        }
+    }
+    // Submit handler
+    function handleSubmit(value) {
+        value = (value || "").trim();
+        if (value) {
+            currentOpts.onSubmit?.(value);
+        }
+        allowListAll = false;
+    }
+    // Set input value (triggers Svelte binding update via input event)
+    function setInputValue(newValue) {
+        el.value = newValue;
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    // Keyboard handler
+    function onKeyDown(e) {
+        // Ignore with modifier keys
+        if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey)
+            return;
+        const cursorPos = el.selectionStart ?? 0;
+        const value = el.value || "";
+        // ArrowRight only applies if cursor at end
+        if (value.length && e.key === "ArrowRight" && cursorPos < value.length) {
+            return;
+        }
+        // Tab after Enter should behave normally
+        if (previousKey === "Enter" && e.key === "Tab") {
+            return;
+        }
+        // Allow listing all on arrow keys with empty value
+        allowListAll =
+            !value.length &&
+                !currentOpts.noListAllOnEmptyQ &&
+                ["ArrowDown", "ArrowUp"].includes(e.key);
+        if (allowListAll) {
+            scheduleSearch("");
+        }
+        const suggestion = options?.active ? renderLabel(options.active) : null;
+        if (e.key === "ArrowDown") {
+            options?.setActiveNext();
+            updateGhost();
+            e.preventDefault();
+        }
+        else if (e.key === "ArrowUp") {
+            options?.setActivePrevious();
+            updateGhost();
+            e.preventDefault();
+        }
+        else if (["ArrowRight", "Tab"].includes(e.key) && suggestion) {
+            if (e.key === "Tab" && value !== suggestion) {
+                e.preventDefault();
+            }
+            setInputValue(suggestion);
+            // Clear options and ghost immediately after accepting suggestion
+            options?.clear();
+            updateGhost();
+            if (e.key === "Tab")
+                handleSubmit(suggestion);
+        }
+        else if (e.key === "Enter") {
+            options?.clear();
+            handleSubmit(value);
+        }
+        else if (e.key === "Backspace" && cursorPos === 0) {
+            currentOpts.onDeleteRequest?.();
+        }
+        previousKey = e.key;
+    }
+    // Input handler (for value changes)
+    function onInput() {
+        const value = el.value || "";
+        // Quick clear if needed
+        if ((!allowListAll && !value) || !options?.active) {
+            options?.clear();
+            updateGhost();
+        }
+        else if (options?.active) {
+            // Check if current suggestion still matches
+            const suggestion = renderLabel(options.active);
+            if (!suggestion.toLowerCase().startsWith(value.toLowerCase())) {
+                options.clear();
+                updateGhost();
+            }
+        }
+        // Schedule new search
+        scheduleSearch(value);
+    }
+    // Blur handler
+    function onBlur() {
+        handleSubmit(el.value || "");
+    }
+    // Remove ghost and cleanup
+    function destroyGhost() {
+        ghostEl?.remove();
+        ghostEl = null;
+        // Reset main input styles
+        el.style.position = "";
+        el.style.zIndex = "";
+        el.style.background = "";
+    }
+    // Main effect for setup/cleanup
+    $effect(() => {
+        const opts = fn?.() || { getOptions: async () => [] };
+        currentOpts = {
+            enabled: opts.enabled ?? true,
+            getOptions: opts.getOptions,
+            renderOptionLabel: opts.renderOptionLabel,
+            itemIdPropName: opts.itemIdPropName || "id",
+            debounceMs: opts.debounceMs ?? DEFAULT_DEBOUNCE_MS,
+            onSubmit: opts.onSubmit,
+            onDeleteRequest: opts.onDeleteRequest,
+            onFetchingChange: opts.onFetchingChange,
+            noListAllOnEmptyQ: opts.noListAllOnEmptyQ ?? false,
+            appendHint: opts.appendHint ?? DEFAULT_APPEND_HINT,
+            classGhost: opts.classGhost,
+            onResetGhost: opts.onResetGhost,
+        };
+        if (!currentOpts.enabled || !currentOpts.getOptions) {
+            // Cleanup if disabled or no getOptions provided
+            destroyGhost();
+            return;
+        }
+        // Initialize ItemCollection if needed
+        if (!options) {
+            options = new ItemCollection([], {
+                idPropName: currentOpts.itemIdPropName,
+                searchable: { getContent: (item) => renderLabel(item) },
+                allowNextPrevCycle: true,
+                sortFn: (a, b) => {
+                    const _a = renderLabel(a).toLowerCase();
+                    const _b = renderLabel(b).toLowerCase();
+                    return _a.localeCompare(_b);
+                },
+            });
+        }
+        // Create ghost input
+        createGhost();
+        // Provide reset function via callback
+        currentOpts.onResetGhost?.(() => {
+            // Cancel any pending search
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+                debounceTimer = null;
+            }
+            options?.clear();
+            updateGhost();
+        });
+        // Add event listeners
+        el.addEventListener("keydown", onKeyDown);
+        el.addEventListener("input", onInput);
+        el.addEventListener("blur", onBlur);
+        // Set autocomplete off
+        el.setAttribute("autocomplete", "off");
+        return () => {
+            // Cleanup
+            el.removeEventListener("keydown", onKeyDown);
+            el.removeEventListener("input", onInput);
+            el.removeEventListener("blur", onBlur);
+            destroyGhost();
+            if (debounceTimer)
+                clearTimeout(debounceTimer);
+        };
+    });
+}

package/dist/base.css

@@ -0,0 +1,17 @@
+/* Base styles for STUIC components */
+@layer base {
+	button:not(:disabled),
+	[role="button"]:not(:disabled) {
+		cursor: pointer;
+	}
+
+	button:disabled,
+	[role="button"]:disabled,
+	input:disabled {
+		cursor: not-allowed !important;
+	}
+}
+
+.scrollbar-thin {
+	scrollbar-width: thin;
+}

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	import type { AlertConfirmPromptStack } from "./alert-confirm-prompt-stack.svelte.js";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
 
 	export interface Props {
 		acp?: AlertConfirmPromptStack;
@@ -21,9 +22,9 @@
 		classButtonCancel?: string;
 		classButtonCustom?: string;
 		classButtonPrimary?: string;
-		variantButtonCancel?: string;
-		variantButtonCustom?: string;
-		variantButtonPrimary?: string;
+		intentButtonCancel?: IntentColorKey;
+		intentButtonCustom?: IntentColorKey;
+		intentButtonPrimary?: IntentColorKey;
 		classSpinnerBox?: string;
 		defaultIcons?: Partial<
 			Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>
@@ -34,7 +35,6 @@
 <script lang="ts">
 	import { twMerge } from "../../utils/tw-merge.js";
 	import ModalDialog from "../ModalDialog/ModalDialog.svelte";
-	import { isTHCNotEmpty } from "../Thc/Thc.svelte";
 	import { AlertConfirmPromptType } from "./alert-confirm-prompt-stack.svelte.js";
 	import Current from "./Current.svelte";
 
@@ -63,9 +63,9 @@
 		classButtonCancel,
 		classButtonCustom,
 		classButtonPrimary,
-		variantButtonCancel,
-		variantButtonCustom,
-		variantButtonPrimary,
+		intentButtonCancel,
+		intentButtonCustom,
+		intentButtonPrimary,
 	}: Props = $props();
 
 	let modal = $state<ModalDialog>();
@@ -124,9 +124,9 @@
 			{classButtonCancel}
 			{classButtonCustom}
 			{classButtonPrimary}
-			{variantButtonCancel}
-			{variantButtonCustom}
-			{variantButtonPrimary}
+			{intentButtonCancel}
+			{intentButtonCustom}
+			{intentButtonPrimary}
 		/>
 	</ModalDialog>
 {/if}

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

@@ -1,4 +1,5 @@
 import type { AlertConfirmPromptStack } from "./alert-confirm-prompt-stack.svelte.js";
+import type { IntentColorKey } from "../../utils/design-tokens.js";
 export interface Props {
     acp?: AlertConfirmPromptStack;
     forceAsHtml?: boolean;
@@ -19,9 +20,9 @@ export interface Props {
     classButtonCancel?: string;
     classButtonCustom?: string;
     classButtonPrimary?: string;
-    variantButtonCancel?: string;
-    variantButtonCustom?: string;
-    variantButtonPrimary?: string;
+    intentButtonCancel?: IntentColorKey;
+    intentButtonCustom?: IntentColorKey;
+    intentButtonPrimary?: IntentColorKey;
     classSpinnerBox?: string;
     defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
 }

package/dist/components/AlertConfirmPrompt/Current.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from "svelte";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Button from "../Button/Button.svelte";
 	import FieldInput from "../Input/FieldInput.svelte";
@@ -37,9 +37,9 @@
 		classButtonCancel?: string;
 		classButtonCustom?: string;
 		classButtonPrimary?: string;
-		variantButtonCancel?: string;
-		variantButtonCustom?: string;
-		variantButtonPrimary?: string;
+		intentButtonCancel?: IntentColorKey;
+		intentButtonCustom?: IntentColorKey;
+		intentButtonPrimary?: IntentColorKey;
 		classSpinnerBox?: string;
 		defaultIcons?: Partial<
 			Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>
@@ -66,9 +66,9 @@
 		classButtonCancel,
 		classButtonCustom,
 		classButtonPrimary,
-		variantButtonCancel,
-		variantButtonCustom,
-		variantButtonPrimary = "primary",
+		intentButtonCancel,
+		intentButtonCustom,
+		intentButtonPrimary = "primary",
 		classSpinnerBox,
 		defaultIcons = acpDefaultIcons,
 	}: Props = $props();
@@ -119,11 +119,8 @@
 
 	const _classIconBox = `size-12 sm:size-10
 		mt-1 mb-4 sm:my-0 sm:mr-5
-		mx-auto 
-		flex flex-shrink-0 items-center justify-center 
-		rounded-full 
-		bg-neutral-950/10 text-neutral-950/80
-		dark:bg-neutral-50/20 dark:text-neutral-50/80`;
+		mx-auto
+		flex flex-shrink-0 items-center justify-center`;
 
 	const _classContentBox = `mt-3 sm:mt-0 flex-1 h-full flex flex-col`; // overflow-hidden
 
@@ -137,12 +134,12 @@
 
 	const _classButton = "min-w-24 text-center w-full sm:w-auto";
 
-	const _classSpinnerBox = `absolute inset-0 flex items-center justify-center bg-white/75 dark:bg-black/75`;
+	const _classSpinnerBox = `absolute inset-0 flex items-center justify-center`;
 
 	let hasCustom = $derived(current.labelCustom && typeof current.onCustom === "function");
 </script>
 
-<div class={twMerge("stuic-acp", _class, classProp)}>
+<div class={twMerge("stuic-acp", _class, classProp)} data-variant={current.variant}>
 	<div class={twMerge("wrap", _classWrap, classWrap)}>
 		{#if iconHtml}
 			<div
@@ -215,7 +212,7 @@
 			<li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
 				<CmpButtonCancel
 					class={twMerge("cancel", _classButton, classButton, classButtonCancel)}
-					variant={variantButtonCancel}
+					intent={intentButtonCancel}
 					disabled={isPending}
 					onclick={createOnClick("cancel", current.onCancel)}
 				>
@@ -227,7 +224,7 @@
 			<li class={twMerge(_classMenuLi, classMenuLi, classMenuLiCustom)}>
 				<CmpButtonCustom
 					class={twMerge("custom", _classButton, classButton, classButtonCustom)}
-					variant={variantButtonCustom}
+					intent={intentButtonCustom}
 					disabled={isPending}
 					onclick={createOnClick("custom", current.onCustom!)}
 				>
@@ -238,7 +235,7 @@
 		<li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
 			<CmpButtonOk
 				class={twMerge("ok", _classButton, classButton, classButtonPrimary)}
-				variant={variantButtonPrimary}
+				intent={intentButtonPrimary}
 				disabled={isPending}
 				onclick={createOnClick("ok", current.onOk)}
 				bind:el={okButtonEl}
@@ -249,7 +246,7 @@
 	</menu>
 	{#if isPending}
 		<div class={twMerge("spinner-box", _classSpinnerBox, classSpinnerBox)}>
-			<Spinner class="w-8" />
+			<Spinner />
 		</div>
 	{/if}
 </div>

package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { IntentColorKey } from "../../utils/design-tokens.js";
 import { type AlertConfirmPromptStack } from "./alert-confirm-prompt-stack.svelte.js";
 interface Props {
     acp?: AlertConfirmPromptStack;
@@ -19,9 +20,9 @@ interface Props {
     classButtonCancel?: string;
     classButtonCustom?: string;
     classButtonPrimary?: string;
-    variantButtonCancel?: string;
-    variantButtonCustom?: string;
-    variantButtonPrimary?: string;
+    intentButtonCancel?: IntentColorKey;
+    intentButtonCustom?: IntentColorKey;
+    intentButtonPrimary?: IntentColorKey;
     classSpinnerBox?: string;
     defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
 }

package/dist/components/AlertConfirmPrompt/acp-icons.js

@@ -1,8 +1,9 @@
 import { iconAlertInfo, iconAlertSuccess, iconAlertWarning, iconAlertError, iconRefresh, } from "../../icons/index.js";
+const size = 23;
 export const acpDefaultIcons = {
-    info: () => iconAlertInfo({ size: 24 }),
-    success: () => iconAlertSuccess({}),
-    warn: () => iconAlertWarning({ class: "-mt-[3px]" }), // move up a little because it looks better with the triangle
-    error: () => iconAlertError({}),
+    info: () => iconAlertInfo({ size }),
+    success: () => iconAlertSuccess({ size }),
+    warn: () => iconAlertWarning({ size, class: "-mt-[2px]" }), // move up a little because it looks better with the triangle
+    error: () => iconAlertError({ size }),
     spinner: () => iconRefresh({ size: 32, class: "opacity-50" }),
 };

package/dist/components/AlertConfirmPrompt/index.css

@@ -0,0 +1,66 @@
+/* ============================================================================
+   ALERT CONFIRM PROMPT COMPONENT TOKENS
+   Override globally: :root { --stuic-acp-icon-box-radius: 0; }
+   Override locally:  <AlertConfirmPrompt style="--stuic-acp-icon-box-radius: 4px;">
+   ============================================================================ */
+
+:root {
+	--stuic-acp-icon-box-radius: 9999px;
+	--stuic-acp-spinner-overlay-opacity: 0.8;
+}
+
+@layer components {
+	/* ============================================================================
+	   ICON BOX - colors set by variant
+	   ============================================================================ */
+
+	.stuic-acp .icon-box {
+		background: var(--_icon-bg);
+		color: var(--_icon-text);
+		border-radius: var(--stuic-acp-icon-box-radius);
+	}
+
+	/* ============================================================================
+	   SPINNER OVERLAY - uses surface color
+	   ============================================================================ */
+
+	.stuic-acp .spinner-box {
+		background: color-mix(
+			in srgb,
+			var(--stuic-color-surface) calc(var(--stuic-acp-spinner-overlay-opacity) * 100%),
+			transparent
+		);
+	}
+
+	/* ============================================================================
+	   VARIANT COLOR MAPPING
+	   Each variant sets internal CSS vars for the icon box.
+	   ============================================================================ */
+
+	/* NOTE: using primary in all except error */
+
+	/* Variant: info (default) */
+	.stuic-acp[data-variant="info"],
+	.stuic-acp:not([data-variant]) {
+		--_icon-bg: color-mix(in srgb, var(--stuic-color-primary) 15%, transparent);
+		--_icon-text: var(--stuic-color-primary);
+	}
+
+	/* Variant: success */
+	.stuic-acp[data-variant="success"] {
+		--_icon-bg: color-mix(in srgb, var(--stuic-color-primary) 15%, transparent);
+		--_icon-text: var(--stuic-color-primary);
+	}
+
+	/* Variant: warn */
+	.stuic-acp[data-variant="warn"] {
+		--_icon-bg: color-mix(in srgb, var(--stuic-color-primary) 15%, transparent);
+		--_icon-text: var(--stuic-color-primary);
+	}
+
+	/* Variant: error */
+	.stuic-acp[data-variant="error"] {
+		--_icon-bg: color-mix(in srgb, var(--stuic-color-destructive) 15%, transparent);
+		--_icon-text: var(--stuic-color-destructive);
+	}
+}