@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/TypeaheadInput/TypeaheadInput.svelte

@@ -16,22 +16,20 @@
 		noSpinner?: boolean;
 		noListAllOnEmptyQ?: boolean;
 		appendHint?: string;
+		/** Function to reset the ghost text (provided by the component) */
+		resetGhost?: () => void;
 	}
 </script>
 
 <script lang="ts" generics="T extends Item">
-	import { createClog } from "@marianmeres/clog";
-	import { ItemCollection } from "@marianmeres/item-collection";
-	import { Debounced, watch } from "runed";
+	import { typeahead } from "../../actions/typeahead.svelte.js";
 	import { twMerge } from "../../utils/tw-merge.js";
-	import { unaccent } from "../../utils/unaccent.js";
 	import Spinner from "../Spinner/Spinner.svelte";
 
-	const clog = createClog("TypeaheadInput");
-
 	let {
 		input = $bindable(),
 		value = $bindable(),
+		resetGhost = $bindable(),
 		placeholder,
 		getOptions,
 		renderOptionLabel,
@@ -48,115 +46,11 @@
 		appendHint = " [tab]",
 	}: Props<T> = $props();
 
-	let inputEl: HTMLInputElement = $state()!;
-	const randName = "name-" + Math.random().toString(36).slice(2);
-	let isFetching = $state(false); // not used currently
-	let previousKey = $state();
-
-	// special case flag to allow listing all available options when navigating with arrows
-	// even on empty query
-	let allowListAll = $state(false);
-
-	// ItemCollection of all possible candidates based on the current query (value)
-	// svelte-ignore state_referenced_locally
-	const options = new ItemCollection<T>([], {
-		idPropName: itemIdPropName,
-		searchable: { getContent: (item) => _renderOptionLabel(item) },
-		allowNextPrevCycle: true,
-		sortFn: (a, b) => {
-			const _a = _renderOptionLabel(a).toLowerCase();
-			const _b = _renderOptionLabel(b).toLowerCase();
-			return _a.localeCompare(_b);
-		},
-	});
-
-	// deriving the actual suggestion from available candidates...
-	let available = $derived($options);
-	let suggestion: string = $derived.by(() => {
-		if (!available.active) return "";
-		// a little dance, since we need to be case insensitive
-		// otherwise we would just: `value = _renderOptionLabel(available.active)`
-		const suggestion = _renderOptionLabel(available.active);
-		return (value || "") + suggestion.slice(value?.length || 0);
-	});
-
-	let visibleSuggestion: string = $derived.by(() => {
-		if (
-			!suggestion ||
-			unaccent(suggestion.toLowerCase()) === unaccent(value?.toLowerCase())
-		) {
-			return "";
-		}
-
-		return suggestion ? suggestion + appendHint : suggestion;
-	});
-
-	// helper
-	function _renderOptionLabel(item: T): string {
-		return renderOptionLabel?.(item) || `${item[itemIdPropName]}`;
-	}
-
-	// reset suggestion asap, even before the debounced search finishes (it feels better)
-	// the debounce will take over short after
-	watch([() => value], ([currQ], [oldQ]) => {
-		if (value === undefined) return;
-
-		// if we don't have a query or nothing is active, reset asap
-		if ((!allowListAll && !currQ) || !available.active) {
-			options.clear();
-			return;
-		}
-
-		// we need to be case insensitive
-		const suggestion = _renderOptionLabel(available.active);
-		if (!suggestion.toLowerCase().startsWith(currQ.toLowerCase())) {
-			options.clear();
-			return;
-		}
-	});
-
-	// do the query search
-	const debounced = new Debounced(() => value, 150);
-	watch([() => debounced.current, () => allowListAll], ([currQ, ala], [oldQ, _]) => {
-		// always start fresh
-		options.clear();
-
-		// no suggestion on empty input
-		if (!ala && !currQ) return;
-
-		isFetching = true;
-
-		getOptions(currQ, [])
-			.then((res) => {
-				// no options?
-				if (!res.length) return;
+	let isFetching = $state(false);
 
-				let found = res;
-				if (currQ) {
-					// so, here we have some candidate items... but, this is not a typical
-					// "word search", this is an exact, case-insensitive "string begins with",
-					// so we need to filter further...
-					found = res.filter((item) => {
-						const label = unaccent(_renderOptionLabel(item).toLowerCase());
-						return label.startsWith(unaccent(currQ.toLowerCase()));
-					});
-				}
-
-				// no exact "starts with" found?
-				if (!found.length) return;
-
-				// finally, this is where we pick the actual suggestion (by setting it as active)
-				options.addMany(found);
-				options.setActiveFirst();
-			})
-			.catch(clog.error)
-			.finally(() => (isFetching = false));
-	});
-
-	//
 	let _fixedInputClasses = $derived(
 		twMerge(
-			"form-input z-10 relative",
+			"z-10 relative",
 			classInput,
 			"text-black",
 			"border-0 p-0 bg-transparent block w-full",
@@ -164,16 +58,6 @@
 			"focus-visible:outline-0 focus-visible:border-0 focus-visible:ring-0"
 		)
 	);
-
-	function _on_submit(v: string) {
-		v = `${v || ""}`.trim();
-		if (v) onSubmit?.(v);
-		// reset this flag, next up/down arrow will switch it on again
-		allowListAll = false;
-	}
-
-	// $inspect({ isFetching, value, suggestion }).with(clog);
-	// $inspect({ previousKey }).with(clog);
 </script>
 
 <div class={twMerge("", classProp)}>
@@ -182,78 +66,26 @@
 			<input
 				type="text"
 				bind:value
-				bind:this={inputEl}
+				bind:this={input}
 				{name}
 				class={twMerge(_fixedInputClasses)}
-				placeholder={suggestion ? "" : placeholder}
+				{placeholder}
 				autocomplete="off"
-				onkeydown={(e) => {
-					// ignore on any modifier key
-					if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) {
-						return;
-					}
-
-					const cursorPos = inputEl.selectionStart ?? 0;
-
-					// also ignore ArrowRight if cursor is not at the end
-					if (value?.length) {
-						const maxPos = value.length;
-						// clog({ cursorPosition: pos, maxPos, value });
-						if (e.key === "ArrowRight" && cursorPos < maxPos) return;
-					}
-
-					// special case Tab handling - if we hit Enter just before, we want Tab
-					// to behave normally (so we are able to set value which HAS a suggestion
-					// but is NOT a suggestion - eg "New" vs "New York")
-					if (previousKey === "Enter" && e.key === "Tab") {
-						return;
-					}
-
-					// this acts as trigger for getOptions if empty value (`allowListAll` is watched)
-					allowListAll =
-						!value?.length &&
-						!noListAllOnEmptyQ &&
-						["ArrowDown", "ArrowUp"].includes(e.key);
-
-					//
-					const suggestion = options.active ? _renderOptionLabel(options.active) : null;
-					if (e.key === "ArrowDown") {
-						options.setActiveNext();
-						e.preventDefault();
-					} else if (e.key === "ArrowUp") {
-						options.setActivePrevious();
-						e.preventDefault();
-					} else if (["ArrowRight", "Tab"].includes(e.key) && suggestion) {
-						if (e.key === "Tab" && value !== suggestion) {
-							e.preventDefault();
-						}
-						value = suggestion;
-						if (e.key === "Tab") _on_submit(value);
-					} else if (e.key === "Enter") {
-						options.clear();
-						_on_submit(value);
-					} else if (e.key === "Backspace" && cursorPos === 0) {
-						onDeleteRequest?.();
-					}
-
-					previousKey = e.key;
-				}}
-				onblur={() => _on_submit(value)}
-			/>
-			<input
-				type="text"
-				bind:value={visibleSuggestion}
-				class={twMerge(
-					_fixedInputClasses,
-					"absolute inset-0 pointer-events-none opacity-40 z-0"
-				)}
-				name={randName}
-				tabindex="-1"
-				readonly
+				use:typeahead={() => ({
+					getOptions,
+					renderOptionLabel,
+					itemIdPropName,
+					onSubmit,
+					onDeleteRequest,
+					noListAllOnEmptyQ,
+					appendHint,
+					onFetchingChange: (fetching) => (isFetching = fetching),
+					onResetGhost: (fn) => (resetGhost = fn),
+				})}
 			/>
 		</div>
 		{#if !noSpinner && isFetching}
-			<Spinner class="size-5 opacity-50" />
+			<Spinner class="size-5" />
 		{/if}
 	</div>
 </div>

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

@@ -14,11 +14,13 @@ export interface Props<T extends Item = Item> {
     noSpinner?: boolean;
     noListAllOnEmptyQ?: boolean;
     appendHint?: string;
+    /** Function to reset the ghost text (provided by the component) */
+    resetGhost?: () => void;
 }
 declare function $$render<T extends Item>(): {
     props: Props<T>;
     exports: {};
-    bindings: "value" | "input";
+    bindings: "value" | "input" | "resetGhost";
     slots: {};
     events: {};
 };
@@ -26,7 +28,7 @@ declare class __sveltets_Render<T extends Item> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "value" | "input";
+    bindings(): "value" | "input" | "resetGhost";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/X/X.svelte

@@ -3,17 +3,22 @@
 	export interface Props {
 		class?: string;
 		strokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
+		linecapRound?: boolean;
 	}
 </script>
 
 <script lang="ts">
-	let { class: classProps, strokeWidth }: Props = $props();
+	let { class: classProps, strokeWidth, linecapRound = true }: Props = $props();
 
-	const dp = new DevicePointer();
-	const auto = $derived(dp.isCoarse ? 3 : 2);
+	// motivation - make it thicker on mobile, especially for weary eyes
+	// (note: dp.isCoarse does not say nothing technically about mobile, but in 90% it will)
+	// const dp = new DevicePointer();
+	// const auto = $derived(dp.isCoarse ? 3 : 2);
 
 	// if sw not provided use thicker on mobile
-	const _strokeWidth = $derived(strokeWidth ?? auto);
+	const _strokeWidth = $derived(strokeWidth ?? 2);
+
+	const _strokeLinecap = $derived(linecapRound ? "round" : "square");
 
 	// size-6 = 1.5rem = 24px
 </script>
@@ -25,5 +30,7 @@
 	stroke="currentColor"
 	class={twMerge("inline size-6", classProps)}
 >
-	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+	<!-- iconLucideX -->
+	<path stroke-linecap={_strokeLinecap} d="M18 6 6 18" />
+	<path stroke-linecap={_strokeLinecap} d="m6 6 12 12" />
 </svg>

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

@@ -1,6 +1,7 @@
 export interface Props {
     class?: string;
     strokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
+    linecapRound?: boolean;
 }
 declare const X: import("svelte").Component<Props, {}, "">;
 type X = ReturnType<typeof X>;

package/dist/icons/index.d.ts

@@ -36,3 +36,4 @@ export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
 export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";
+export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";

package/dist/icons/index.js

@@ -40,3 +40,4 @@ export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
 export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";
+export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";

package/dist/index.css

@@ -1,33 +1,54 @@
-/*
-	Tailwind import removed here because it causes CSS cascade/layer issues in WebKit browsers
-	(Safari, iOS Chrome) when consumers also import Tailwind. The double import can result in
-	Tailwind's preflight styles (like border-style: solid) not being applied correctly.
-	Consumers of STUIC should import Tailwind at their own app level.
-*/
-/* @import "tailwindcss"; */
+@source "./";
 
-@plugin '@tailwindcss/forms';
+/*  */
+@import "./themes/neutral.css";
 
-@custom-variant dark (&:where(.dark, .dark *));
+/*****************************************************************************************
 
-@source "./";
+# Component CSS - centralized to avoid race conditions with barrel exports 
 
-/* "components" looks like a better fit here, but forms plugin uses "utilities"
-so, since we need to override, sticking with that */
-@layer utilities {
-	@import "./actions/tooltip/index.css";
-	@import "./components/Button/index.css";
-	@import "./components/ButtonGroupRadio/index.css";
-	@import "./components/DismissibleMessage/index.css";
-	@import "./components/Input/index.css";
-	@import "./components/ListItemButton/index.css";
-	@import "./components/Notifications/index.css";
-	@import "./components/Progress/index.css";
-	@import "./components/Switch/index.css";
-	@import "./components/TabbedMenu/index.css";
-	@import "./components/TwCheck/index.css";
-}
+Barrel exports + CSS side effects = race conditions
+
+When you use barrel exports (export * from) in a library entry point, importing 
+anything from that barrel causes all modules to be evaluated. If those modules have 
+CSS side effects (like import "./index.css" in Svelte components), all CSS files load 
+simultaneously in unpredictable order.
+
+The fix: Centralize CSS imports in a single entry point (like lib/index.css) that 
+loads at app startup, rather than letting each component import its own CSS. This 
+ensures CSS loads in a deterministic order before any components render.
+
+In practice:
+    - ✅ Component CSS in centralized lib/index.css
+    - ❌ import "./index.css" inside each component
+
+*****************************************************************************************/
+@import "./components/AlertConfirmPrompt/index.css";
+@import "./components/AssetsPreview/index.css";
+@import "./components/Avatar/index.css";
+@import "./components/Backdrop/index.css";
+@import "./components/Button/index.css";
+@import "./components/ButtonGroupRadio/index.css";
+@import "./components/Collapsible/index.css";
+@import "./components/CommandMenu/index.css";
+@import "./components/DismissibleMessage/index.css";
+@import "./components/DropdownMenu/index.css";
+@import "./components/Input/index.css";
+@import "./components/KbdShortcut/index.css";
+@import "./components/ListItemButton/index.css";
+@import "./components/Modal/index.css";
+@import "./components/ModalDialog/index.css";
+@import "./components/Nav/index.css";
+@import "./components/Notifications/index.css";
+@import "./components/Progress/index.css";
+@import "./components/Skeleton/index.css";
+@import "./components/Spinner/index.css";
+@import "./components/Switch/index.css";
+@import "./components/TabbedMenu/index.css";
+@import "./components/ThemePreview/index.css";
+@import "./components/TwCheck/index.css";
 
+/* Base styles for STUIC components */
 @layer base {
 	button:not(:disabled),
 	[role="button"]:not(:disabled) {
@@ -38,7 +59,6 @@ so, since we need to override, sticking with that */
 	[role="button"]:disabled,
 	input:disabled {
 		cursor: not-allowed !important;
-		/* opacity: 0.5 !important; moved to Button itself, so it can be overridden */
 	}
 }
 

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export * from "./components/KbdShortcut/index.js";
 export * from "./components/ListItemButton/index.js";
 export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
+export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Skeleton/index.js";
@@ -49,6 +50,7 @@ export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
+export * from "./components/ThemePreview/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";
 export * from "./components/X/index.js";

package/dist/index.js

@@ -42,6 +42,7 @@ export * from "./components/KbdShortcut/index.js";
 export * from "./components/ListItemButton/index.js";
 export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
+export * from "./components/Nav/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Skeleton/index.js";
@@ -50,6 +51,7 @@ export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
+export * from "./components/ThemePreview/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";
 export * from "./components/X/index.js";