@marianmeres/stuic 2.7.1 → 2.8.0

package/dist/actions/tooltip/tooltip.svelte.d.ts

@@ -20,7 +20,7 @@ export declare function isTooltipSupported(): boolean;
 /**
  * Valid positions for tooltip placement relative to the anchor element.
  */
-export type TooltipPosition = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
+export type TooltipPosition = "top" | "top-left" | "top-right" | "top-span-left" | "top-span-right" | "bottom" | "bottom-left" | "bottom-right" | "bottom-span-left" | "bottom-span-right" | "left" | "right";
 /**
  * A Svelte action that displays a tooltip anchored to an element using CSS Anchor Positioning.
  *

package/dist/actions/tooltip/tooltip.svelte.js

@@ -37,9 +37,13 @@ const POSITION_MAP = {
     top: "top",
     "top-left": "top left",
     "top-right": "top right",
+    "top-span-left": "top span-left",
+    "top-span-right": "top span-right",
     bottom: "bottom",
     "bottom-left": "bottom left",
     "bottom-right": "bottom right",
+    "bottom-span-left": "bottom span-left",
+    "bottom-span-right": "bottom span-right",
     left: "left",
     right: "right",
 };

package/dist/actions/validate.svelte.d.ts

@@ -145,6 +145,11 @@ export interface ValidateOptions {
  * ```ts
  * validate.t = (reason, value, fallback) => translations[reason] ?? fallback;
  * ```
+ *
+ * **Hidden Input Limitation**: Browsers don't populate `el.validationMessage`
+ * for hidden inputs (`type="hidden"`) even when `setCustomValidity()` is called.
+ * This action works around this by preserving the `customValidator` return value
+ * and using it directly as the error message fallback.
  */
 export declare function validate(el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, fn?: () => boolean | ValidateOptions): void;
 export declare namespace validate {

package/dist/actions/validate.svelte.js

@@ -127,6 +127,11 @@ const KNOWN_REASONS = [
  * ```ts
  * validate.t = (reason, value, fallback) => translations[reason] ?? fallback;
  * ```
+ *
+ * **Hidden Input Limitation**: Browsers don't populate `el.validationMessage`
+ * for hidden inputs (`type="hidden"`) even when `setCustomValidity()` is called.
+ * This action works around this by preserving the `customValidator` return value
+ * and using it directly as the error message fallback.
  */
 export function validate(el, fn) {
     $effect(() => {
@@ -153,8 +158,14 @@ export function validate(el, fn) {
             if (!enabled)
                 return;
             el.checkValidity();
+            // Store customValidator message directly - hidden inputs (type="hidden")
+            // don't populate el.validationMessage even when setCustomValidity() is called.
+            // This is a browser limitation. We preserve the message here and use it
+            // directly as the fallback in ValidationResult.message below.
+            let customValidatorMessage = "";
             if (typeof customValidator === "function") {
-                el.setCustomValidity(customValidator(el.value, context, el) || "");
+                customValidatorMessage = customValidator(el.value, context, el) || "";
+                el.setCustomValidity(customValidatorMessage);
             }
             // this triggers the bubble, which is not what we want
             // el.reportValidity();
@@ -172,12 +183,11 @@ export function validate(el, fn) {
                 validity: validityState,
                 reasons,
                 valid: validityState?.valid,
-                // use translate fn for first reason (if fn provided and allowed),
-                // otherwise fallback to native msg
-                message: _t(reasons?.[0], el.value, el.validationMessage ||
-                    // PROBLEM: hidden inputs do not report validationMessage-s even
-                    // if correctly reported as invalid. So all we can do, is
-                    // put only something generic here...
+                // Use translate fn for first reason (if fn provided and allowed),
+                // otherwise fallback to native msg. We use customValidatorMessage first
+                // because hidden inputs don't populate el.validationMessage (see above).
+                message: _t(reasons?.[0], el.value, customValidatorMessage ||
+                    el.validationMessage ||
                     "This field is invalid. Please review and try again."),
             });
             // });

package/dist/components/Input/FieldAssets.svelte

@@ -173,6 +173,7 @@
 			onProgress?: (blobUrl: string, progress: number) => any
 		) => Promise<FieldAssetWithBlobUrl[]>;
 		withOnProgress?: boolean;
+		classControls?: string;
 	}
 </script>
 
@@ -229,6 +230,7 @@
 		// onChange,
 		processAssets,
 		withOnProgress,
+		classControls = "",
 		parseValue = (strigifiedModels: string) => {
 			const val = strigifiedModels ?? "[]";
 			try {
@@ -273,13 +275,12 @@
 	let wrappedValidate: Omit<ValidateOptions, "setValidationResult"> = $derived({
 		enabled: true,
 		customValidator(value: any, context: Record<string, any> | undefined, el: any) {
-			// NOTE: the below error message code will be ignored, so it's just cosmetics.
-			// NOTE2: we are NOT validating
-			// 	  - neither the actual form value.
-			//    - nor the hidden input's value
+			// Return actual translated messages (not reason names) because hidden inputs
+			// don't support el.validationMessage - the validate action preserves our
+			// return value and uses it directly as the error message.
 
-			if (required && !assets.length) return "valueMissing";
-			if (assets.length > cardinality) return "rangeOverflow";
+			if (required && !assets.length) return t("field_req_att");
+			if (assets.length > cardinality) return t("cardinality_reached", { max: cardinality });
 
 			// normally, with other fieldtypes, we would continue with provided validator:
 			// return (validate as any)?.customValidator?.(value, context, el) || "";
@@ -289,10 +290,6 @@
 			}
 			return "";
 		},
-		t(reason: keyof ValidityStateFlags, value: any, fallback: string) {
-			// Unfortunately, for hidden, everything is a `customError` reason. So, we must generalize...
-			return t("field_req_att");
-		},
 		setValidationResult,
 	});
 
@@ -378,7 +375,7 @@
 			{@const _is_img = isImage(asset.type ?? thumb)}
 			<div class="relative group">
 				<button
-					class={[objectSize, "bg-black/10 grid place-content-center"]}
+					class={[objectSize, "bg-black/10 grid place-content-center", classControls]}
 					onclick={(e) => {
 						e.stopPropagation();
 						e.preventDefault();
@@ -433,7 +430,7 @@
 				e.stopPropagation();
 				inputEl.click();
 			}}
-			class={[objectSize, " grid place-content-center group"]}
+			class={[objectSize, " grid place-content-center group", classControls]}
 		>
 			{@html iconAdd({ size: 32, class: "opacity-75 group-hover:opacity-100" })}
 		</button>
@@ -441,7 +438,7 @@
 {/snippet}
 
 <div
-	class="w-full"
+	class="w-full stuic-field-assets"
 	use:highlightDragover={() => ({
 		enabled: typeof processAssets === "function",
 		classes: ["outline-dashed outline-2 outline-neutral-300"],
@@ -559,7 +556,7 @@
 	classBackdrop="p-4 md:p-4"
 	classInner="max-w-full h-full"
 	class="max-h-full md:max-h-full"
-	classMain="flex items-center justify-center relative "
+	classMain="flex items-center justify-center relative stuic-field-assets stuic-field-assets-open"
 >
 	{@const previewAsset = assets?.[previewIdx]}
 	{#if previewAsset}
@@ -585,13 +582,21 @@
 
 		{#if assets?.length > 1}
 			<div class={["absolute inset-0 flex items-center justify-between"]}>
-				<button class="p-4 focus:outline-0" onclick={preview_previous} type="button">
+				<button
+					class={twMerge("p-4", classControls)}
+					onclick={preview_previous}
+					type="button"
+				>
 					<span class="bg-white rounded-full p-3 block">
 						{@html iconPrevious()}
 					</span>
 				</button>
 
-				<button class="p-4 focus:outline-0" onclick={preview_next} type="button">
+				<button
+					class={twMerge("p-4", classControls)}
+					onclick={preview_next}
+					type="button"
+				>
 					<span class="bg-white rounded-full p-3 block">
 						{@html iconNext()}
 					</span>
@@ -602,7 +607,7 @@
 		<!--  bg-white rounded-md p-2 -->
 		<div class="absolute top-4 right-4 flex items-center space-x-3">
 			<button
-				class={TOP_BUTTON_CLS}
+				class={twMerge(TOP_BUTTON_CLS, classControls)}
 				onclick={(e) => {
 					e.preventDefault();
 					remove_by_idx(previewIdx);
@@ -615,7 +620,7 @@
 				{@html iconDelete({ class: "size-6" })}
 			</button>
 			<button
-				class={TOP_BUTTON_CLS}
+				class={twMerge(TOP_BUTTON_CLS, classControls)}
 				type="button"
 				onclick={(e) => {
 					e.preventDefault();
@@ -627,7 +632,7 @@
 				{@html iconDownload({ class: "size-6" })}
 			</button>
 			<button
-				class={TOP_BUTTON_CLS}
+				class={twMerge(TOP_BUTTON_CLS, classControls)}
 				onclick={modal.close}
 				aria-label={t("close")}
 				type="button"

package/dist/components/Input/FieldAssets.svelte.d.ts

@@ -63,6 +63,7 @@ export interface Props extends Record<string, any> {
     accept?: string;
     processAssets?: (assets: FieldAsset[], onProgress?: (blobUrl: string, progress: number) => any) => Promise<FieldAssetWithBlobUrl[]>;
     withOnProgress?: boolean;
+    classControls?: string;
 }
 declare const FieldAssets: import("svelte").Component<Props, {}, "value">;
 type FieldAssets = ReturnType<typeof FieldAssets>;

package/dist/components/Input/FieldKeyValues.svelte

@@ -10,9 +10,9 @@
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
 	export interface KeyValueEntry {
-		id: string;
 		key: string;
-		value: string;
+		value: string; // Raw input from user
+		parsedValue: unknown; // Parsed JSON value
 	}
 
 	export interface Props extends Record<string, any> {
@@ -52,8 +52,6 @@
 </script>
 
 <script lang="ts">
-	import { iconFeatherChevronDown } from "@marianmeres/icons-fns/feather/iconFeatherChevronDown.js";
-	import { iconFeatherChevronUp } from "@marianmeres/icons-fns/feather/iconFeatherChevronUp.js";
 	import { iconFeatherPlus } from "@marianmeres/icons-fns/feather/iconFeatherPlus.js";
 	import { iconFeatherTrash2 } from "@marianmeres/icons-fns/feather/iconFeatherTrash2.js";
 	import { tick } from "svelte";
@@ -74,27 +72,29 @@
 	) {
 		const m: Record<string, string> = {
 			field_req_att: "This field requires attention. Please review and try again.",
+			entry_required: "At least one entry is required",
 			key_placeholder: "Key",
 			value_placeholder: "Value",
 			add_label: "Add",
 			empty_message: "No entries",
 			remove_entry: "Remove entry",
-			move_up: "Move up",
-			move_down: "Move down",
+			duplicate_keys: "Duplicate keys are not allowed",
 		};
 		let out = m[k] ?? fallback ?? k;
 		return isPlainObject(values) ? replaceMap(out, values as any) : out;
 	}
 
+	const SERIALIZED_DEFAULT = "{}";
+
 	let {
-		value = $bindable("[]"),
+		value = $bindable(),
 		name,
 		id = getId(),
 		label,
 		description,
 		class: classProp,
 		tabindex = 0,
-		renderSize = "md",
+		renderSize = "sm",
 		required = false,
 		disabled = false,
 		validate,
@@ -124,18 +124,32 @@
 	let hiddenInputEl: HTMLInputElement | undefined = $state();
 	let keyInputRefs: HTMLInputElement[] = $state([]);
 
-	// Internal state
-	let entries: KeyValueEntry[] = $state(parseValue(value));
+	// Internal state - handle undefined value from async form initialization
+	let entries: KeyValueEntry[] = $state(parseValue(value ?? SERIALIZED_DEFAULT));
+
+	// Parse JSON value with auto-detect: try JSON first, fallback to plain string
+	function parseJsonValue(input: string): { value: unknown } {
+		const trimmed = input.trim();
+		if (trimmed === "") return { value: "" };
+
+		try {
+			const parsed = JSON.parse(trimmed);
+			return { value: parsed };
+		} catch {
+			// If parse fails, treat as plain string
+			return { value: trimmed };
+		}
+	}
 
 	// Parse external JSON string to internal entries
 	function parseValue(jsonString: string): KeyValueEntry[] {
 		try {
-			const parsed = JSON.parse(jsonString || "[]");
-			if (!Array.isArray(parsed)) return [];
-			return parsed.map(([key, val]: [string, string]) => ({
-				id: getId("entry-"),
-				key: key ?? "",
-				value: val ?? "",
+			const parsed = JSON.parse(jsonString || SERIALIZED_DEFAULT);
+			if (!isPlainObject(parsed)) return [];
+			return Object.entries(parsed).map(([key, val]) => ({
+				key,
+				value: typeof val === "string" ? val : JSON.stringify(val),
+				parsedValue: val,
 			}));
 		} catch (e) {
 			return [];
@@ -144,7 +158,13 @@
 
 	// Serialize internal entries to external JSON string
 	function serializeValue(entries: KeyValueEntry[]): string {
-		return JSON.stringify(entries.map((e) => [e.key, e.value]));
+		const obj: Record<string, unknown> = {};
+		for (const e of entries) {
+			if (e.key) {
+				obj[e.key] = e.parsedValue;
+			}
+		}
+		return JSON.stringify(obj);
 	}
 
 	// Sync internal state to external value
@@ -158,7 +178,7 @@
 
 	// Sync external value to internal state when it changes externally
 	$effect(() => {
-		const newEntries = parseValue(value);
+		const newEntries = parseValue(value ?? SERIALIZED_DEFAULT);
 		const currentSerialized = serializeValue(entries);
 		const newSerialized = serializeValue(newEntries);
 		if (currentSerialized !== newSerialized) {
@@ -168,7 +188,7 @@
 
 	// Add new entry
 	function addEntry() {
-		const newEntry = { id: getId("entry-"), key: "", value: "" };
+		const newEntry: KeyValueEntry = { key: "", value: "", parsedValue: "" };
 		entries = [...entries, newEntry];
 		syncToValue();
 		// Focus the new key input after render
@@ -184,20 +204,15 @@
 		syncToValue();
 	}
 
-	// Move entry up or down
-	function moveEntry(idx: number, direction: "up" | "down") {
-		const newIdx = direction === "up" ? idx - 1 : idx + 1;
-		if (newIdx < 0 || newIdx >= entries.length) return;
-
-		const newEntries = [...entries];
-		[newEntries[idx], newEntries[newIdx]] = [newEntries[newIdx], newEntries[idx]];
-		entries = newEntries;
-		syncToValue();
-	}
-
 	// Update entry field
 	function updateEntry(idx: number, field: "key" | "value", newValue: string) {
-		entries[idx][field] = newValue;
+		if (field === "value") {
+			const { value: parsed } = parseJsonValue(newValue);
+			entries[idx].value = newValue;
+			entries[idx].parsedValue = parsed;
+		} else {
+			entries[idx].key = newValue;
+		}
 		syncToValue();
 	}
 
@@ -210,24 +225,27 @@
 		customValidator(val: any, context: Record<string, any> | undefined, el: any) {
 			// Validate JSON structure
 			try {
-				const parsed = JSON.parse(val || "[]");
-				if (!Array.isArray(parsed)) return "typeMismatch";
-				for (const entry of parsed) {
-					if (!Array.isArray(entry) || entry.length !== 2) return "typeMismatch";
-				}
+				const parsed = JSON.parse(val || SERIALIZED_DEFAULT);
+				if (!isPlainObject(parsed)) return t("field_req_att");
 			} catch (e) {
-				return "typeMismatch";
+				return t("field_req_att");
 			}
 
-			// Required check
-			if (required && !entries.length) return "valueMissing";
+			// Get non-empty keys first (used for both required and duplicate checks)
+			const keys = entries.map((e) => e.key).filter((k) => k.trim() !== "");
+
+			// Required check FIRST - must have at least one entry with non-empty key
+			if (required && keys.length === 0) return t("entry_required");
+
+			// Then check for duplicate keys
+			const uniqueKeys = new Set(keys);
+			if (keys.length !== uniqueKeys.size) {
+				return t("duplicate_keys");
+			}
 
 			// Continue with provided validator
 			return (validate as any)?.customValidator?.(val, context, el) || "";
 		},
-		t(reason: keyof ValidityStateFlags, val: any, fallback: string) {
-			return t("field_req_att");
-		},
 		setValidationResult,
 	});
 
@@ -278,7 +296,7 @@
 			</div>
 		{:else}
 			<div class="p-2">
-				{#each entries as entry, idx (entry.id)}
+				{#each entries as entry, idx (idx)}
 					<div
 						class={twMerge(
 							"flex gap-2 items-start py-2",
@@ -323,26 +341,8 @@
 							<!-- use:autogrow={() => ({ enabled: true, value: entry.value })} -->
 						</div>
 
-						<!-- Controls: Up/Down + Delete -->
-						<div class="flex flex-col gap-0.5 pt-0.5">
-							<button
-								type="button"
-								onclick={() => moveEntry(idx, "up")}
-								disabled={disabled || idx === 0}
-								class={BTN_CLS}
-								aria-label={t("move_up")}
-							>
-								{@html iconFeatherChevronUp({ size: 14 })}
-							</button>
-							<button
-								type="button"
-								onclick={() => moveEntry(idx, "down")}
-								disabled={disabled || idx === entries.length - 1}
-								class={BTN_CLS}
-								aria-label={t("move_down")}
-							>
-								{@html iconFeatherChevronDown({ size: 14 })}
-							</button>
+						<!-- Delete button -->
+						<div class="pt-0.5">
 							<button
 								type="button"
 								onclick={() => removeEntry(idx)}
@@ -386,7 +386,7 @@
 <input
 	type="hidden"
 	{name}
-	{value}
+	value={value ?? SERIALIZED_DEFAULT}
 	bind:this={hiddenInputEl}
 	use:validateAction={() => wrappedValidate}
 />

package/dist/components/Input/FieldKeyValues.svelte.d.ts

@@ -6,9 +6,9 @@ type SnippetWithId = Snippet<[{
     id: string;
 }]>;
 export interface KeyValueEntry {
-    id: string;
     key: string;
     value: string;
+    parsedValue: unknown;
 }
 export interface Props extends Record<string, any> {
     value: string;

package/dist/components/Input/FieldLikeButton.svelte

@@ -185,20 +185,19 @@
 			enabled: !!validate,
 			...(typeof validate === "boolean"
 				? {
-						// PROBLEM with hidden inputs is that they:
-						// 1. do not report required (AFAICT)
-						// 2. do not report el.validationMessage even if invalid via custom validation
+						// Return actual messages (not reason names) because hidden inputs
+						// don't support el.validationMessage - the validate action preserves
+						// our return value and uses it directly as the error message.
 						customValidator(val, ctx, el) {
-							// so, here, we're fixing (1.) and will handle the (2.) elsewhere
-							// (the message will be ignored anyway, we just need to send non-empty string)
-							if (required && !val) return "valueMissing";
+							if (required && !val)
+								return "This field requires attention. Please review and try again.";
 
 							// also, by default, JSON validation is built in
 							try {
 								JSON.parse(val as string);
 								return "";
 							} catch (e) {
-								return "typeMismatch";
+								return "This field is invalid. Please review and try again.";
 							}
 						},
 					}

package/dist/components/Input/README.md

@@ -179,8 +179,8 @@ A comprehensive form input system with multiple field components, validation sup
 <script lang="ts">
   import { FieldKeyValues } from 'stuic';
 
-  // Value is a JSON string of [[key, value], [key, value], ...]
-  let headers = $state('[]');
+  // Value is a JSON string of {key: value, key2: value2, ...}
+  let headers = $state('{}');
 </script>
 
 <FieldKeyValues
@@ -196,7 +196,7 @@ A comprehensive form input system with multiple field components, validation sup
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value` | `string` | `"[]"` | JSON string of `[[key, value], ...]` (bindable) |
+| `value` | `string` | `"{}"` | JSON string of `{key: value, ...}` (bindable) |
 | `name` | `string` | - | Form field name |
 | `keyPlaceholder` | `string` | `"Key"` | Placeholder for key input |
 | `valuePlaceholder` | `string` | `"Value"` | Placeholder for value textarea |
@@ -209,9 +209,9 @@ A comprehensive form input system with multiple field components, validation sup
 
 Features:
 - Add/remove key-value pairs with + and trash buttons
-- Reorder entries with up/down arrow buttons
-- Duplicate keys are allowed
-- Value is serialized as ordered map: `[[key, value], [key2, value2]]`
+- Values support any JSON type (auto-detected): plain text → string, `42` → number, `true` → boolean, `{"a":1}` → object
+- Duplicate keys are validated and rejected on form submission
+- Value is serialized as plain object: `{key: value, key2: value2}`
 - Validation at top level only (not individual pairs)
 
 ## Validation

package/package.json

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