@warkypublic/svelix 0.1.47 → 0.2.1

package/dist/components/Boxer/Boxer.svelte

@@ -218,9 +218,13 @@ $effect(() => {
 	});
 });
 // Select first
+// `value` is read via untrack() — this effect should react to boxerData becoming
+// ready, not to its own write (onOptionSubmit assigns `value`), which would
+// otherwise cause a spurious second fire whenever the first option's value is
+// falsy (0/"").
 $effect(() => {
 	const boxerData = storeBoxerData;
-	if (selectFirst && boxerData.length > 0 && !multiSelect && !value) {
+	if (selectFirst && boxerData.length > 0 && !multiSelect && !untrack(() => value)) {
 		onOptionSubmit(0);
 	}
 });

package/dist/components/CardGrid/CardGrid.svelte

@@ -9,7 +9,12 @@ import { applyLocalSort, sortOrderToSortOptions } from "../Gridler/utils/sort.js
 import CardGridFilterPanel from "./CardGridFilterPanel.svelte";
 import DefaultCard from "./DefaultCard.svelte";
 import { toggleItemInSelection, rangeSelect, isItemSelected, computeColumnsInRow } from "./cardGrid.js";
-let { columns, displayColumns, cardMinWidth = 280, cardGap = 16, cardMaxFrontColumns, card, cardBack, empty, skeleton, dataSource = "local", dataSourceOptions, data, pageSize = 20, uniqueID: uniqueIDProp, searchValue, onSearchValueChange, serverSideSearch = true, searchColumns, searchPlaceholder = "Search…", sortOrder, onSortOrderChange, sortOptions, filters, onFilterChange, selectedItems: selectedItemsProp, onSelectedItemsChange, multiSelect = true, onCardClick, onCardDblClick, onCardContextMenu, menuItems, total = $bindable(0), loading = $bindable(false), onLoadError, class: cls, toolbarEnd } = $props();
+let { columns, displayColumns, cardMinWidth = 280, cardGap = 16, cardMaxFrontColumns, card, cardBack, empty, skeleton, dataSource = "local", dataSourceOptions, data, pageSize = 20, uniqueID: uniqueIDProp, searchValue, onSearchValueChange, serverSideSearch = true, searchColumns, searchPlaceholder = "Search…", sortOrder, onSortOrderChange, sortOptions, filters, onFilterChange, selectedItems: selectedItemsProp, onSelectedItemsChange, multiSelect = true, onCardClick, onCardDblClick, onCardContextMenu, menuItems, total = $bindable(0), loading = $bindable(false), onLoadError, class: cls, toolbarEnd, animate: animateProp, density: densityProp, expand: expandProp } = $props();
+// ── Animation defaults ──────────────────────────────────────────────
+const animateEnabled = $derived(animateProp ?? true);
+// ── Density/expand defaults ─────────────────────────────────────────────
+const densityMode = $derived(densityProp ?? "default");
+const expandMode = $derived(expandProp ?? "none");
 // ── Derived config ─────────────────────────────────────────────────────────
 const resolvedUniqueID = $derived(uniqueIDProp ?? dataSourceOptions?.uniqueID ?? "id");
 const resolvedColumns = $derived(displayColumns?.length ? columns.filter((c) => displayColumns?.includes(c.id)) : columns);
@@ -41,6 +46,11 @@ function handleSortOrderChange(order) {
 	onSortOrderChange?.(order);
 }
 const resolvedSort = $derived(Object.values(resolvedSortOrder).some((d) => d !== "none") ? sortOrderToSortOptions(resolvedSortOrder) : []);
+// ── Density/expand resolution ───────────────────────────────────────────
+const densityMinWidth = $derived(densityMode === "compact" ? 200 : densityMode === "spacious" ? 400 : densityMode === "comfortable" ? 340 : cardMinWidth);
+const densityGap = $derived(densityMode === "compact" ? 8 : densityMode === "spacious" ? 32 : densityMode === "comfortable" ? 24 : cardGap);
+// Expand multiplies the effective min-width/gap per-card
+const expandFactor = $derived(expandMode === "none" ? 1 : expandMode === "medium" ? 1.5 : 2);
 // ── Controlled/uncontrolled selection ─────────────────────────────────────
 let internalSelectedItems = $state([]);
 const resolvedSelectedItems = $derived(selectedItemsProp ?? internalSelectedItems);
@@ -208,7 +218,7 @@ function toggleFlip(e, item) {
 $effect(() => {
 	if (!containerEl) return;
 	const obs = new ResizeObserver((entries) => {
-		columnsInRow = computeColumnsInRow(entries[0]?.contentRect.width ?? 0, cardMinWidth, cardGap);
+		columnsInRow = computeColumnsInRow(entries[0]?.contentRect.width ?? 0, densityMinWidth * expandFactor, densityGap * expandFactor);
 	});
 	obs.observe(containerEl);
 	return () => obs.disconnect();
@@ -392,7 +402,13 @@ function scrollToCard(index) {
 		});
 	}
 }
-// ── Public API ─────────────────────────────────────────────────────────────
+export function selectItem(uniqueIDValue) {
+	const idx = displayData.findIndex((item) => item[resolvedUniqueID] === uniqueIDValue);
+	if (idx < 0) return false;
+	focusedIndex = idx;
+	scrollToCard(idx);
+	return true;
+}
 export function refresh() {
 	if (isServerMode) {
 		refreshTrigger++;
@@ -407,6 +423,19 @@ export function refresh() {
 		});
 	}
 }
+// Reconcile selection across refresh() — drop items no longer in displayData.
+// `internalSelectedItems` is read via untrack() so this effect doesn't depend on
+// its own write target — .filter() always returns a new array reference, which
+// would otherwise re-trigger this same effect forever (effect_update_depth_exceeded).
+$effect(() => {
+	if (displayData.length === 0) return;
+	const currentIds = new Set(displayData.map((item) => item[resolvedUniqueID]));
+	const current = untrack(() => internalSelectedItems);
+	const next = current.filter((item) => currentIds.has(item[resolvedUniqueID]));
+	if (next.length !== current.length) {
+		internalSelectedItems = next;
+	}
+});
 // ── Loading states ─────────────────────────────────────────────────────────
 const isFirstLoad = $derived(isServerMode && serverLoading && serverData.length === 0 || !isServerMode && localLoading && localData.length === 0);
 const isLoadingMore = $derived(isServerMode && serverLoading && serverData.length > 0);
@@ -567,12 +596,13 @@ $effect(() => {
 		<div
 			bind:this={containerEl}
 			class="cg-grid"
+			class:cg-animate={animateEnabled}
 			role="listbox"
 			aria-multiselectable={multiSelect}
 			tabindex="0"
 			onkeydown={handleKeyDown}
 			onclick={handleContainerClick}
-			style="--cg-min-width:{cardMinWidth}px;--cg-gap:{cardGap}px;--cg-cols:{columnsInRow};"
+			style="--cg-min-width:{densityMinWidth * expandFactor}px;--cg-gap:{densityGap * expandFactor}px;--cg-cols:{columnsInRow};"
 		>
 			{#if isFirstLoad}
 				<!-- ── Skeleton cards ─────────────────────────────────── -->
@@ -947,6 +977,22 @@ $effect(() => {
 		outline-offset: 2px;
 	}
 
+	/* ── Card entry animation (enabled via .cg-animate on the container) ── */
+
+	@keyframes cg-card-in {
+		from { opacity: 0; transform: translateY(6px) scale(0.97); }
+		to   { opacity: 1; transform: translateY(0)   scale(1); }
+	}
+
+	.cg-animate .cg-card {
+		animation: cg-card-in 180ms ease both;
+	}
+
+	/* Selected cards override the entry animation's transform */
+	.cg-animate .cg-card-selected {
+		animation: none;
+	}
+
 	/* ── Skeleton cards ───────────────────────────────────────────────────── */
 
 	@keyframes cg-shimmer {

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

@@ -53,8 +53,12 @@ interface Props {
     onLoadError?: (error: string) => void;
     class?: string;
     toolbarEnd?: Snippet;
+    animate?: boolean;
+    density?: 'compact' | 'default' | 'comfortable' | 'spacious';
+    expand?: 'none' | 'medium' | 'large';
 }
 declare const CardGrid: import("svelte").Component<Props, {
+    selectItem: (uniqueIDValue: string) => boolean;
     refresh: () => void;
 }, "loading" | "total">;
 type CardGrid = ReturnType<typeof CardGrid>;

package/dist/components/CardGrid/DefaultCard.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">const { record, columns, selected, focused } = $props();
+<script lang="ts">const { record, columns, selected, focused, expanded } = $props();
 // First column → title, second → subtitle, rest → detail rows
 const titleCol = $derived(columns[0]);
 const subtitleCol = $derived(columns.length > 1 ? columns[1] : undefined);
@@ -84,7 +84,7 @@ function statusVariant(val) {
 export {};
 </script>
 
-<article class="dc-card" class:dc-selected={selected} class:dc-focused={focused}>
+<article class="dc-card" class:dc-selected={selected} class:dc-focused={focused} class:dc-expanded={expanded}>
 	<!-- Header -->
 	{#if titleCol}
 		{@const titleKey = titleCol.dataKey ?? titleCol.id}
@@ -132,6 +132,11 @@ export {};
 		flex-direction: column;
 	}
 
+	/* Expanded mode — merges front + back columns */
+	.dc-expanded {
+		--cg-colspan: span 2;
+	}
+
 	/* ── Header ───────────────────────────────────────────────────────── */
 
 	.dc-header {

package/dist/components/CardGrid/DefaultCard.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     columns: CardGridColumn[];
     selected: boolean;
     focused: boolean;
+    expanded?: boolean;
 }
 declare const DefaultCard: import("svelte").Component<Props, {}, "">;
 type DefaultCard = ReturnType<typeof DefaultCard>;

package/dist/components/CardGrid/cardGrid.d.ts

@@ -31,3 +31,27 @@ export declare function rangeSelect(allItems: Record<string, unknown>[], anchorI
 export declare function isItemSelected(selectedItems: Record<string, unknown>[], item: Record<string, unknown>, uniqueID: string): boolean;
 /** Compute how many cards fit in a row given container width, min card width, and gap. */
 export declare function computeColumnsInRow(containerWidth: number, cardMinWidth: number, gap: number): number;
+/** Density mode for the card grid. */
+export type CardGridDensity = 'compact' | 'default' | 'comfortable';
+/** Expand mode for the card grid. */
+export type CardGridExpand = 'none' | 'medium' | 'large';
+/** Extended props interface including animation, density and expand controls. */
+export interface CardGridAnimationProps {
+    /** Enable staggered entry/exit animations on cards (default true). */
+    animate?: boolean;
+    /** Duration of card entrance transitions in ms (default 200). */
+    animateDuration?: number;
+}
+/** Extended props interface including animation, density and expand controls. */
+export interface CardGridDensityProps {
+    /** Density mode: compact(default), comfortable. Overrides cardMinWidth/gap when set. */
+    density?: CardGridDensity;
+    /** Expand mode: none, medium, large. Controls how much space each card occupies. */
+    expand?: CardGridExpand;
+}
+/** Build virtual rows from flat displayData, packing columnsInRow items per row. */
+export declare function buildVirtualRows(displayData: Record<string, unknown>[], columnsInRow: number): Record<string, unknown>[][];
+/** Match a search string against any hotfield column value. */
+export declare function typeaheadMatch(searchValue: string, item: Record<string, unknown>, hotfields?: string[]): boolean;
+export interface ExtendedCardGridProps extends CardGridAnimationProps, CardGridDensityProps {
+}

package/dist/components/CardGrid/cardGrid.js

@@ -19,3 +19,23 @@ export function isItemSelected(selectedItems, item, uniqueID) {
 export function computeColumnsInRow(containerWidth, cardMinWidth, gap) {
     return Math.max(1, Math.floor((containerWidth + gap) / (cardMinWidth + gap)));
 }
+/** Build virtual rows from flat displayData, packing columnsInRow items per row. */
+export function buildVirtualRows(displayData, columnsInRow) {
+    const cols = Math.max(1, columnsInRow);
+    const rows = [];
+    for (let i = 0; i < displayData.length; i += cols) {
+        rows.push(displayData.slice(i, i + cols));
+    }
+    return rows;
+}
+/** Match a search string against any hotfield column value. */
+export function typeaheadMatch(searchValue, item, hotfields) {
+    if (!searchValue)
+        return true;
+    const lower = searchValue.toLowerCase();
+    if (hotfields && hotfields.length > 0) {
+        return Object.entries(item).some(([k, v]) => hotfields.some((f) => k === f || k.endsWith(`.${f}`)) &&
+            String(v ?? '').toLowerCase().includes(lower));
+    }
+    return Object.values(item).some((v) => String(v ?? '').toLowerCase().includes(lower));
+}

package/dist/components/Former/FormerDrawer.svelte

@@ -1,29 +1,17 @@
 <script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Dialog, Portal } from "@skeletonlabs/skeleton-svelte";
-import { registerOverlay } from "../OverlayStack";
 import Former from "./Former.svelte";
+import { createOverlayZIndex, deriveAutoTitle } from "./formerOverlayHelpers.svelte";
 let { afterGet, afterSave, beforeSave, children, id, keepOpen = $bindable(false), layout, onAPICall, onChange, onClose, onConfirmDelete, onError, onOpen, opened = $bindable(false), primeData, request = $bindable("insert"), title, uniqueKeyField = "id", values = $bindable(undefined), width = "32rem" } = $props();
-const autoTitle = $derived(title ?? (request === "delete" ? `Delete Record${values?.[uniqueKeyField] ? ` — ${values[uniqueKeyField]}` : ""}` : request === "insert" ? "New Record" : `Edit Record${values?.[uniqueKeyField] ? ` — ${values[uniqueKeyField]}` : ""}`));
+const autoTitle = $derived(deriveAutoTitle({
+	request,
+	title,
+	uniqueKeyField,
+	values
+}));
 const animBackdrop = "transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100";
 const animContent = "transition transition-discrete opacity-0 translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0";
-let backdropZ = $state(1e3);
-let contentZ = $state(1010);
-$effect(() => {
-	if (!opened) {
-		return;
-	}
-	const overlay = registerOverlay({
-		kind: "drawer",
-		mount: "portal"
-	});
-	backdropZ = overlay.layer.backdrop;
-	contentZ = overlay.layer.content;
-	return () => {
-		overlay.unregister();
-		backdropZ = 1e3;
-		contentZ = 1010;
-	};
-});
+const overlayZ = createOverlayZIndex("drawer", () => opened);
 </script>
 
 <Dialog
@@ -39,11 +27,11 @@ $effect(() => {
   <Portal>
     <Dialog.Backdrop
       class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
-      style={`z-index:${backdropZ};`}
+      style={`z-index:${overlayZ.backdropZ};`}
     />
     <Dialog.Positioner
       class="fixed inset-0 flex justify-end"
-      style={`z-index:${contentZ};`}
+      style={`z-index:${overlayZ.contentZ};`}
     >
       <Dialog.Content
         class="card bg-surface-100-900 shadow-2xl h-full flex flex-col overflow-hidden rounded-none rounded-l-container-token  {animContent}"

package/dist/components/Former/FormerModal.svelte

@@ -1,29 +1,17 @@
 <script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Dialog, Portal } from "@skeletonlabs/skeleton-svelte";
-import { registerOverlay } from "../OverlayStack";
 import Former from "./Former.svelte";
+import { createOverlayZIndex, deriveAutoTitle } from "./formerOverlayHelpers.svelte";
 let { afterGet, afterSave, beforeSave, children, id, keepOpen = $bindable(false), layout, onAPICall, onChange, onClose, onConfirmDelete, onError, onOpen, opened = $bindable(false), primeData, request = $bindable("insert"), title, uniqueKeyField = "id", values = $bindable(undefined) } = $props();
-const autoTitle = $derived(title ?? (request === "delete" ? `Delete Record${values?.[uniqueKeyField] ? ` — ${values[uniqueKeyField]}` : ""}` : request === "insert" ? "New Record" : `Edit Record${values?.[uniqueKeyField] ? ` — ${values[uniqueKeyField]}` : ""}`));
+const autoTitle = $derived(deriveAutoTitle({
+	request,
+	title,
+	uniqueKeyField,
+	values
+}));
 const animBackdrop = "transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100";
 const animContent = "transition transition-discrete opacity-0 scale-95 starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
-let backdropZ = $state(1e3);
-let contentZ = $state(1010);
-$effect(() => {
-	if (!opened) {
-		return;
-	}
-	const overlay = registerOverlay({
-		kind: "dialog",
-		mount: "portal"
-	});
-	backdropZ = overlay.layer.backdrop;
-	contentZ = overlay.layer.content;
-	return () => {
-		overlay.unregister();
-		backdropZ = 1e3;
-		contentZ = 1010;
-	};
-});
+const overlayZ = createOverlayZIndex("dialog", () => opened);
 </script>
 
 <Dialog
@@ -39,9 +27,9 @@ $effect(() => {
 	<Portal>
 		<Dialog.Backdrop
 			class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
-			style={`z-index:${backdropZ};`}
+			style={`z-index:${overlayZ.backdropZ};`}
 		/>
-		<Dialog.Positioner class="fixed inset-0 flex items-center justify-center p-4" style={`z-index:${contentZ};`}>
+		<Dialog.Positioner class="fixed inset-0 flex items-center justify-center p-4" style={`z-index:${overlayZ.contentZ};`}>
 			<Dialog.Content
 				class="card bg-surface-100-900 shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden {animContent}"
 			>

package/dist/components/Former/formerOverlayHelpers.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormRequestType } from './types';
+export declare function deriveAutoTitle(params: {
+    request?: FormRequestType;
+    title?: string;
+    uniqueKeyField: string;
+    values?: unknown;
+}): string;
+export declare function createOverlayZIndex(kind: 'dialog' | 'drawer', getOpened: () => boolean): {
+    readonly backdropZ: number;
+    readonly contentZ: number;
+};

package/dist/components/Former/formerOverlayHelpers.svelte.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { registerOverlay } from '../OverlayStack';
+export function deriveAutoTitle(params) {
+    const { request, title, uniqueKeyField, values } = params;
+    if (title)
+        return title;
+    const keyValue = values?.[uniqueKeyField];
+    if (request === 'delete')
+        return `Delete Record${keyValue ? ` — ${keyValue}` : ''}`;
+    if (request === 'insert')
+        return 'New Record';
+    return `Edit Record${keyValue ? ` — ${keyValue}` : ''}`;
+}
+export function createOverlayZIndex(kind, getOpened) {
+    let backdropZ = $state(1000);
+    let contentZ = $state(1010);
+    $effect(() => {
+        if (!getOpened()) {
+            return;
+        }
+        const overlay = registerOverlay({ kind, mount: 'portal' });
+        backdropZ = overlay.layer.backdrop;
+        contentZ = overlay.layer.content;
+        return () => {
+            overlay.unregister();
+            backdropZ = 1000;
+            contentZ = 1010;
+        };
+    });
+    return {
+        get backdropZ() {
+            return backdropZ;
+        },
+        get contentZ() {
+            return contentZ;
+        },
+    };
+}

package/dist/components/Former/index.d.ts

@@ -3,6 +3,7 @@ export { default as FormerButtonArea } from './FormerButtonArea.svelte';
 export { default as FormerDrawer } from './FormerDrawer.svelte';
 export { default as FormerModal } from './FormerModal.svelte';
 export { createFormerState } from './formerState.svelte';
+export { createOverlayZIndex, deriveAutoTitle } from './formerOverlayHelpers.svelte';
 export { FormerResolveSpecAPI } from './FormerResolveSpecAPI';
 export { FormerRestHeadSpecAPI } from './FormerRestHeadSpecAPI';
 export * from './types';

package/dist/components/Former/index.js

@@ -3,6 +3,7 @@ export { default as FormerButtonArea } from './FormerButtonArea.svelte';
 export { default as FormerDrawer } from './FormerDrawer.svelte';
 export { default as FormerModal } from './FormerModal.svelte';
 export { createFormerState } from './formerState.svelte';
+export { createOverlayZIndex, deriveAutoTitle } from './formerOverlayHelpers.svelte';
 export { FormerResolveSpecAPI } from './FormerResolveSpecAPI';
 export { FormerRestHeadSpecAPI } from './FormerRestHeadSpecAPI';
 export * from './types';

package/dist/components/FormerControllers/ButtonCtrl.svelte

@@ -1,29 +1,24 @@
-<script lang="ts">const { children, disabled, loading: externalLoading = false, onclick, sid, title, tooltip, variant = "filled" } = $props();
-let internalLoading = $state(false);
-const isLoading = $derived(internalLoading || externalLoading);
+<script lang="ts">import { createClickLoading, createClickPulse } from "./ctrlLoading.svelte";
+const { children, disabled, loading: externalLoading = false, onclick, sid, title, tooltip, variant = "filled" } = $props();
+const clickLoading = createClickLoading(() => externalLoading);
 const variantClass = $derived(variant === "outlined" ? "preset-outlined-primary-500" : variant === "ghost" ? "preset-tonal-primary" : "preset-filled-primary-500");
-async function handleClick() {
-	if (onclick && !isLoading) {
-		internalLoading = true;
-		try {
-			await onclick();
-		} finally {
-			internalLoading = false;
-		}
-	}
+const clickPulse = createClickPulse();
+function handleClick() {
+	clickPulse.trigger();
+	clickLoading.run(onclick);
 }
-export {};
 </script>
 
 <button
-	class="btn {variantClass}"
+	class="btn {variantClass} transition-transform duration-150"
+	class:scale-90={clickPulse.pressed}
 	data-sid={sid}
-	disabled={disabled || isLoading}
+	disabled={disabled || clickLoading.isLoading}
 	title={tooltip}
 	type="button"
 	onclick={handleClick}
 >
-	{#if isLoading}
+	{#if clickLoading.isLoading}
 		<span class="animate-spin mr-1">⟳</span>
 	{/if}
 	{#if children}

package/dist/components/FormerControllers/CtrlFieldShell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">const { children, error, id, label, required, tooltip } = $props();
+export {};
+</script>
+
+<div class="flex flex-col gap-1" title={tooltip}>
+	{#if label}
+		<label class="label text-sm font-medium" for={id}>
+			{label}{#if required}<span class="text-error-500">*</span>{/if}
+		</label>
+	{/if}
+	{@render children()}
+	{#if error}
+		<p class="text-error-500 text-xs">{error}</p>
+	{/if}
+</div>

package/dist/components/FormerControllers/CtrlFieldShell.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    children: Snippet;
+    error?: string;
+    id?: string;
+    label?: string;
+    required?: boolean;
+    tooltip?: string;
+}
+declare const CtrlFieldShell: import("svelte").Component<Props, {}, "">;
+type CtrlFieldShell = ReturnType<typeof CtrlFieldShell>;
+export default CtrlFieldShell;

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrl.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">import { tick } from "svelte";
 import Portal from "../../Portal/Portal.svelte";
 import { registerOverlay } from "../../OverlayStack";
+import CtrlFieldShell from "../CtrlFieldShell.svelte";
+import { makeFieldId } from "../utils";
 import DateTimeCtrlPickerPanel from "./DateTimeCtrlPickerPanel.svelte";
 import { formatDateTimeByFormat, getCalendarCells, getNowDateTimeParts, getYearMonthLabel, isDateSelectable, normalizePartsForMode, parseDateTimeByFormat, parsePartialDateTimeByFormat, parseNativeDate, resolveDateTimeFormat, shiftYearMonth, toNativeDate, validateDateTimeParts } from "./DateTimeCtrl.utils";
 let { amLabel, closeOnPick = true, clearable = true, disableAutocomplete = false, disablePortal = false, disabled, error, hoursStep, inputFormat = "ISO", label, maxDate, maxTime, minDate, minTime, minutesStep, mode = "datetime", name, onblur, onchange, outputFormat = "ISO", pmLabel, popoverProps, placeholder, required, sid, tooltip, secondsStep, timePickerProps, timePresets, use12Hour, value = $bindable(null), withPicker = true, withTimeDropdown } = $props();
-const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
+const id = $derived(makeFieldId(name, sid));
 const pickerDialogId = $derived(`${id}_picker_dialog`);
 const resolvedInputFormat = $derived(resolveDateTimeFormat(inputFormat, mode));
 const resolvedOutputFormat = $derived(resolveDateTimeFormat(outputFormat, mode));
@@ -280,18 +282,13 @@ $effect(() => {
 });
 </script>
 
-<div class="flex flex-col gap-1" title={tooltip}>
-  {#if label}
-    <label class="label text-sm font-medium" for={id}>
-      {label}{#if required}<span class="text-error-500">*</span>{/if}
-    </label>
-  {/if}
-
+<CtrlFieldShell error={effectiveError} {id} {label} {required} {tooltip}>
   <div class="relative" bind:this={anchorRef}>
     <div class="relative">
       <input
         {id}
         {disabled}
+        {name}
         {required}
         class={`input ${inputRightPaddingClass}`}
         class:input-error={!!effectiveError}
@@ -479,8 +476,4 @@ $effect(() => {
       {/if}
     </Portal>
   </div>
-
-  {#if effectiveError}
-    <p class="text-xs text-error-500">{effectiveError}</p>
-  {/if}
-</div>
+</CtrlFieldShell>

package/dist/components/FormerControllers/IconButtonCtrl.svelte

@@ -1,30 +1,25 @@
-<script lang="ts">const { children, disabled, loading: externalLoading = false, onclick, sid, tooltip, variant = "ghost" } = $props();
-let internalLoading = $state(false);
-const isLoading = $derived(internalLoading || externalLoading);
+<script lang="ts">import { createClickLoading, createClickPulse } from "./ctrlLoading.svelte";
+const { children, disabled, loading: externalLoading = false, onclick, sid, tooltip, variant = "ghost" } = $props();
+const clickLoading = createClickLoading(() => externalLoading);
 const variantClass = $derived(variant === "outlined" ? "preset-outlined-primary-500" : variant === "filled" ? "preset-filled-primary-500" : "preset-tonal-primary");
-async function handleClick() {
-	if (onclick && !isLoading) {
-		internalLoading = true;
-		try {
-			await onclick();
-		} finally {
-			internalLoading = false;
-		}
-	}
+const clickPulse = createClickPulse();
+function handleClick() {
+	clickPulse.trigger();
+	clickLoading.run(onclick);
 }
-export {};
 </script>
 
 <button
 	aria-label={tooltip ?? sid ?? 'Action'}
-	class="btn-icon btn-sm {variantClass}"
+	class="btn-icon btn-sm {variantClass} transition-transform duration-150"
+	class:scale-90={clickPulse.pressed}
 	data-sid={sid}
-	disabled={disabled || isLoading}
+	disabled={disabled || clickLoading.isLoading}
 	title={tooltip}
 	type="button"
 	onclick={handleClick}
 >
-	{#if isLoading}
+	{#if clickLoading.isLoading}
 		<span class="animate-spin">⟳</span>
 	{:else if children}
 		{@render children()}

package/dist/components/FormerControllers/NativeSelectCtrl.svelte

@@ -1,17 +1,14 @@
-<script lang="ts">let { disabled, error, label, name, onchange, options = [], placeholder, required, sid, tooltip, value = $bindable("") } = $props();
-const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
-export {};
+<script lang="ts">import CtrlFieldShell from "./CtrlFieldShell.svelte";
+import { makeFieldId } from "./utils";
+let { disabled, error, label, name, onchange, options = [], placeholder, required, sid, tooltip, value = $bindable("") } = $props();
+const id = $derived(makeFieldId(name, sid));
 </script>
 
-<div class="flex flex-col gap-1" title={tooltip}>
-	{#if label}
-		<label class="label text-sm font-medium" for={id}>
-			{label}{#if required}<span class="text-error-500">*</span>{/if}
-		</label>
-	{/if}
+<CtrlFieldShell {error} {id} {label} {required} {tooltip}>
 	<select
 		{id}
 		{disabled}
+		{name}
 		{required}
 		bind:value
 		class="select"
@@ -29,7 +26,4 @@ export {};
 			{/if}
 		{/each}
 	</select>
-	{#if error}
-		<p class="text-error-500 text-xs">{error}</p>
-	{/if}
-</div>
+</CtrlFieldShell>

package/dist/components/FormerControllers/NumberInputCtrl.svelte

@@ -1,25 +1,32 @@
-<script lang="ts">let { disabled, error, label, max, min, name, onchange, placeholder, required, sid, step, tooltip, value = $bindable(undefined) } = $props();
-const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
+<script lang="ts">import CtrlFieldShell from "./CtrlFieldShell.svelte";
+import { makeFieldId } from "./utils";
+let { disabled, error, label, max, min, name, onchange, placeholder, required, sid, step, tooltip, value = $bindable(undefined) } = $props();
+const id = $derived(makeFieldId(name, sid));
 function handleInput(e) {
 	const target = e.target;
-	const parsed = target.value !== "" ? Number(target.value) : undefined;
+	const raw = target.value;
+	if (raw === "") {
+		value = undefined;
+		onchange?.(undefined);
+		return;
+	}
+	const parsed = Number(raw);
+	// Intermediate typed states (e.g. "-", "1e") parse to NaN; ignore until valid.
+	if (Number.isNaN(parsed)) {
+		return;
+	}
 	value = parsed;
 	onchange?.(parsed);
 }
-export {};
 </script>
 
-<div class="flex flex-col gap-1" title={tooltip}>
-	{#if label}
-		<label class="label text-sm font-medium" for={id}>
-			{label}{#if required}<span class="text-error-500">*</span>{/if}
-		</label>
-	{/if}
+<CtrlFieldShell {error} {id} {label} {required} {tooltip}>
 	<input
 		{id}
 		{disabled}
 		{max}
 		{min}
+		{name}
 		{placeholder}
 		{required}
 		{step}
@@ -29,7 +36,4 @@ export {};
 		value={value ?? ''}
 		oninput={handleInput}
 	/>
-	{#if error}
-		<p class="text-error-500 text-xs">{error}</p>
-	{/if}
-</div>
+</CtrlFieldShell>