@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/FormerControllers/IconButtonCtrl.svelte

@@ -1,59 +1,25 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	export interface Props {
-		children?: Snippet;
-		disabled?: boolean;
-		loading?: boolean;
-		onclick?: () => Promise<void>;
-		sid?: string;
-		tooltip?: string;
-		variant?: 'filled' | 'ghost' | 'outlined';
-	}
-
-	const {
-		children,
-		disabled,
-		loading: externalLoading = false,
-		onclick,
-		sid,
-		tooltip,
-		variant = 'ghost',
-	}: Props = $props();
-
-	let internalLoading = $state(false);
-	const isLoading = $derived(internalLoading || 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;
-			}
-		}
-	}
+<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");
+const clickPulse = createClickPulse();
+function handleClick() {
+	clickPulse.trigger();
+	clickLoading.run(onclick);
+}
 </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/InlineWrapper.svelte

@@ -1,44 +1,15 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import IconAlertCircle from '../Icons/IconAlertCircle.svelte';
-	import IconAlertTriangle from '../Icons/IconAlertTriangle.svelte';
-
-	export interface Props {
-		children?: Snippet;
-		error?: string;
-		label?: string | Snippet;
-		labelWidth?: string;
-		leftSection?: Snippet;
-		promptArea?: Snippet;
-		required?: boolean;
-		rightSection?: Snippet;
-		tooltip?: string;
-		value?: unknown;
-	}
-
-	const {
-		children,
-		error,
-		label,
-		labelWidth = '10rem',
-		leftSection,
-		promptArea,
-		required,
-		rightSection,
-		tooltip,
-		value,
-	}: Props = $props();
-
-	function isValueEmpty(v: unknown): boolean {
-		if (v === null || v === undefined) return true;
-		if (typeof v === 'number') return false;
-		if (typeof v === 'string') return v.trim() === '';
-		return false;
-	}
-
-	const isEmpty = $derived(isValueEmpty(value));
-	const showErrorIcon = $derived(!!error);
-	const showWarningIcon = $derived(!error && !!required && isEmpty);
+<script lang="ts">import IconAlertCircle from "../Icons/IconAlertCircle.svelte";
+import IconAlertTriangle from "../Icons/IconAlertTriangle.svelte";
+const { children, error, label, labelWidth = "10rem", leftSection, promptArea, required, rightSection, tooltip, value } = $props();
+function isValueEmpty(v) {
+	if (v === null || v === undefined) return true;
+	if (typeof v === "number") return false;
+	if (typeof v === "string") return v.trim() === "";
+	return false;
+}
+const isEmpty = $derived(isValueEmpty(value));
+const showErrorIcon = $derived(!!error);
+const showWarningIcon = $derived(!error && !!required && isEmpty);
 </script>
 
 <div class="flex flex-col gap-0" title={tooltip}>

package/dist/components/FormerControllers/InlineWrapperPreview.svelte

@@ -1,29 +1,7 @@
-<script lang="ts">
-	import InlineWrapper from './InlineWrapper.svelte';
-	import TextInputCtrl from './TextInputCtrl.svelte';
-	import ButtonCtrl from './ButtonCtrl.svelte';
-
-	export interface Props {
-		error?: string;
-		label?: string;
-		labelWidth?: string;
-		required?: boolean;
-		tooltip?: string;
-		value?: string;
-		withLeftSection?: boolean;
-		withRightSection?: boolean;
-	}
-
-	let {
-		error,
-		label = 'Username',
-		labelWidth,
-		required,
-		tooltip,
-		value = $bindable(''),
-		withLeftSection = false,
-		withRightSection = false,
-	}: Props = $props();
+<script lang="ts">import InlineWrapper from "./InlineWrapper.svelte";
+import TextInputCtrl from "./TextInputCtrl.svelte";
+import ButtonCtrl from "./ButtonCtrl.svelte";
+let { error, label = "Username", labelWidth, required, tooltip, value = $bindable(""), withLeftSection = false, withRightSection = false } = $props();
 </script>
 
 {#snippet leftSection()}

package/dist/components/FormerControllers/NativeSelectCtrl.svelte

@@ -1,43 +1,14 @@
-<script lang="ts">
-	import type { CtrlBaseProps } from './types';
-
-	interface SelectOption {
-		label: string;
-		value: string;
-	}
-
-	export interface Props extends CtrlBaseProps {
-		onchange?: (value: string) => void;
-		options?: Array<SelectOption | string>;
-		value?: string;
-	}
-
-	let {
-		disabled,
-		error,
-		label,
-		name,
-		onchange,
-		options = [],
-		placeholder,
-		required,
-		sid,
-		tooltip,
-		value = $bindable(''),
-	}: Props = $props();
-
-	const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
+<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"
@@ -55,7 +26,4 @@
 			{/if}
 		{/each}
 	</select>
-	{#if error}
-		<p class="text-error-500 text-xs">{error}</p>
-	{/if}
-</div>
+</CtrlFieldShell>

package/dist/components/FormerControllers/NumberInputCtrl.svelte

@@ -1,51 +1,32 @@
-<script lang="ts">
-	import type { CtrlBaseProps } from './types';
-
-	export interface Props extends CtrlBaseProps {
-		max?: number;
-		min?: number;
-		onchange?: (value: number | undefined) => void;
-		step?: number;
-		value?: number | undefined;
+<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 raw = target.value;
+	if (raw === "") {
+		value = undefined;
+		onchange?.(undefined);
+		return;
 	}
-
-	let {
-		disabled,
-		error,
-		label,
-		max,
-		min,
-		name,
-		onchange,
-		placeholder,
-		required,
-		sid,
-		step,
-		tooltip,
-		value = $bindable(undefined),
-	}: Props = $props();
-
-	const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
-
-	function handleInput(e: Event) {
-		const target = e.target as HTMLInputElement;
-		const parsed = target.value !== '' ? Number(target.value) : undefined;
-		value = parsed;
-		onchange?.(parsed);
+	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);
+}
 </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}
@@ -55,7 +36,4 @@
 		value={value ?? ''}
 		oninput={handleInput}
 	/>
-	{#if error}
-		<p class="text-error-500 text-xs">{error}</p>
-	{/if}
-</div>
+</CtrlFieldShell>

package/dist/components/FormerControllers/PasswordInputCtrl.svelte

@@ -1,38 +1,16 @@
-<script lang="ts">
-	import type { CtrlBaseProps } from './types';
-
-	export interface Props extends CtrlBaseProps {
-		onchange?: (value: string) => void;
-		value?: string;
-	}
-
-	let {
-		disabled,
-		error,
-		label,
-		name,
-		onchange,
-		placeholder,
-		required,
-		sid,
-		tooltip,
-		value = $bindable(''),
-	}: Props = $props();
-
-	const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
-	let showPassword = $state(false);
+<script lang="ts">import CtrlFieldShell from "./CtrlFieldShell.svelte";
+import { makeFieldId } from "./utils";
+let { disabled, error, label, name, onchange, placeholder, required, sid, tooltip, value = $bindable("") } = $props();
+const id = $derived(makeFieldId(name, sid));
+let showPassword = $state(false);
 </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}>
 	<div class="flex gap-0">
 		<input
 			{id}
 			{disabled}
+			{name}
 			{placeholder}
 			{required}
 			bind:value
@@ -51,7 +29,4 @@
 			{showPassword ? '🙈' : '👁'}
 		</button>
 	</div>
-	{#if error}
-		<p class="text-error-500 text-xs">{error}</p>
-	{/if}
-</div>
+</CtrlFieldShell>

package/dist/components/FormerControllers/SwitchCtrl.svelte

@@ -1,29 +1,13 @@
-<script lang="ts">
-	import type { CtrlBaseProps } from './types';
-
-	export interface Props extends Omit<CtrlBaseProps, 'placeholder'> {
-		checked?: boolean;
-		onchange?: (checked: boolean) => void;
-	}
-
-	let {
-		checked = $bindable(false),
-		disabled,
-		error,
-		label,
-		name,
-		onchange,
-		sid,
-		tooltip,
-	}: Props = $props();
-
-	const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
+<script lang="ts">import { makeFieldId } from "./utils";
+let { checked = $bindable(false), disabled, error, label, name, onchange, sid, tooltip } = $props();
+const id = $derived(makeFieldId(name, sid));
 </script>
 
 <div class="flex items-center gap-2" title={tooltip}>
 	<input
 		{id}
 		{disabled}
+		{name}
 		bind:checked
 		class="checkbox"
 		type="checkbox"

package/dist/components/FormerControllers/TextAreaCtrl.svelte

@@ -1,38 +1,14 @@
-<script lang="ts">
-	import type { CtrlBaseProps } from './types';
-
-	export interface Props extends CtrlBaseProps {
-		onchange?: (value: string) => void;
-		rows?: number;
-		value?: string;
-	}
-
-	let {
-		disabled,
-		error,
-		label,
-		name,
-		onchange,
-		placeholder,
-		required,
-		rows = 4,
-		sid,
-		tooltip,
-		value = $bindable(''),
-	}: Props = $props();
-
-	const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
+<script lang="ts">import CtrlFieldShell from "./CtrlFieldShell.svelte";
+import { makeFieldId } from "./utils";
+let { disabled, error, label, name, onchange, placeholder, required, rows = 4, 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}>
 	<textarea
 		{id}
 		{disabled}
+		{name}
 		{placeholder}
 		{required}
 		{rows}
@@ -41,7 +17,4 @@
 		class:textarea-error={!!error}
 		oninput={() => onchange?.(value)}
 	></textarea>
-	{#if error}
-		<p class="text-error-500 text-xs">{error}</p>
-	{/if}
-</div>
+</CtrlFieldShell>

package/dist/components/FormerControllers/TextInputCtrl.svelte

@@ -1,38 +1,14 @@
-<script lang="ts">
-	import type { CtrlBaseProps } from './types';
-
-	export interface Props extends CtrlBaseProps {
-		onchange?: (value: string) => void;
-		type?: string;
-		value?: string;
-	}
-
-	let {
-		disabled,
-		error,
-		label,
-		name,
-		onchange,
-		placeholder,
-		required,
-		sid,
-		tooltip,
-		type = 'text',
-		value = $bindable(''),
-	}: Props = $props();
-
-	const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
+<script lang="ts">import CtrlFieldShell from "./CtrlFieldShell.svelte";
+import { makeFieldId } from "./utils";
+let { disabled, error, label, name, onchange, placeholder, required, sid, tooltip, type = "text", 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}>
 	<input
 		{id}
 		{disabled}
+		{name}
 		{placeholder}
 		{required}
 		{type}
@@ -41,7 +17,4 @@
 		class:input-error={!!error}
 		oninput={() => onchange?.(value)}
 	/>
-	{#if error}
-		<p class="text-error-500 text-xs">{error}</p>
-	{/if}
-</div>
+</CtrlFieldShell>

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

@@ -0,0 +1,8 @@
+export declare function createClickLoading(getExternalLoading: () => boolean | undefined): {
+    readonly isLoading: boolean;
+    run: (action?: () => Promise<void>) => Promise<void>;
+};
+export declare function createClickPulse(durationMs?: number): {
+    readonly pressed: boolean;
+    trigger: () => void;
+};

package/dist/components/FormerControllers/ctrlLoading.svelte.js

@@ -0,0 +1,43 @@
+export function createClickLoading(getExternalLoading) {
+    let internalLoading = $state(false);
+    const isLoading = $derived(internalLoading || (getExternalLoading() ?? false));
+    async function run(action) {
+        if (!action || isLoading)
+            return;
+        internalLoading = true;
+        try {
+            await action();
+        }
+        finally {
+            internalLoading = false;
+        }
+    }
+    return {
+        get isLoading() {
+            return isLoading;
+        },
+        run,
+    };
+}
+// Guarantees a visible "click" pulse even when the action resolves faster than
+// a human can perceive the loading spinner — decoupled from actual duration.
+export function createClickPulse(durationMs = 200) {
+    let pressed = $state(false);
+    let timeout;
+    function trigger() {
+        pressed = true;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            pressed = false;
+        }, durationMs);
+    }
+    $effect(() => {
+        return () => clearTimeout(timeout);
+    });
+    return {
+        get pressed() {
+            return pressed;
+        },
+        trigger,
+    };
+}

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

@@ -1,4 +1,5 @@
 export { default as ButtonCtrl } from './ButtonCtrl.svelte';
+export { default as CtrlFieldShell } from './CtrlFieldShell.svelte';
 export { DateTimeCtrl } from './DateTimeCtrl/index';
 export { default as IconButtonCtrl } from './IconButtonCtrl.svelte';
 export { default as InlineWrapper } from './InlineWrapper.svelte';
@@ -8,5 +9,6 @@ export { default as PasswordInputCtrl } from './PasswordInputCtrl.svelte';
 export { default as SwitchCtrl } from './SwitchCtrl.svelte';
 export { default as TextAreaCtrl } from './TextAreaCtrl.svelte';
 export { default as TextInputCtrl } from './TextInputCtrl.svelte';
+export { makeFieldId } from './utils';
 export type { DateTimeConstraints, DateTimeMode, DateTimeParts } from './DateTimeCtrl/DateTimeCtrl.utils';
 export * from './types';

package/dist/components/FormerControllers/index.js

@@ -1,4 +1,5 @@
 export { default as ButtonCtrl } from './ButtonCtrl.svelte';
+export { default as CtrlFieldShell } from './CtrlFieldShell.svelte';
 export { DateTimeCtrl } from './DateTimeCtrl/index';
 export { default as IconButtonCtrl } from './IconButtonCtrl.svelte';
 export { default as InlineWrapper } from './InlineWrapper.svelte';
@@ -8,4 +9,5 @@ export { default as PasswordInputCtrl } from './PasswordInputCtrl.svelte';
 export { default as SwitchCtrl } from './SwitchCtrl.svelte';
 export { default as TextAreaCtrl } from './TextAreaCtrl.svelte';
 export { default as TextInputCtrl } from './TextInputCtrl.svelte';
+export { makeFieldId } from './utils';
 export * from './types';

package/dist/components/FormerControllers/utils.d.ts

@@ -0,0 +1 @@
+export declare function makeFieldId(name?: string, sid?: string): string;

package/dist/components/FormerControllers/utils.js

@@ -0,0 +1,3 @@
+export function makeFieldId(name, sid) {
+    return `field_${name ?? ''}_${sid ?? ''}`;
+}