@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/Former/FormerModalPreview.svelte

@@ -1,93 +1,104 @@
-<script lang="ts">
-	 
-	import FormerModal from './FormerModal.svelte';
-	import type { FormRequestType } from './types';
-	import TextInputCtrl from '../FormerControllers/TextInputCtrl.svelte';
-	import PasswordInputCtrl from '../FormerControllers/PasswordInputCtrl.svelte';
-	import NumberInputCtrl from '../FormerControllers/NumberInputCtrl.svelte';
-	import NativeSelectCtrl from '../FormerControllers/NativeSelectCtrl.svelte';
-	import TextAreaCtrl from '../FormerControllers/TextAreaCtrl.svelte';
-	import SwitchCtrl from '../FormerControllers/SwitchCtrl.svelte';
-	import Boxer from '../Boxer/Boxer.svelte';
-
-	interface UserForm {
-		id?: number;
-		firstName: string;
-		lastName: string;
-		email: string;
-		password: string;
-		age?: number;
-		role: string;
-		department: string;
-		skills: string[];
-		bio: string;
-		website: string;
-		emailNotifications: boolean;
-		active: boolean;
+<script lang="ts">import FormerModal from "./FormerModal.svelte";
+import TextInputCtrl from "../FormerControllers/TextInputCtrl.svelte";
+import PasswordInputCtrl from "../FormerControllers/PasswordInputCtrl.svelte";
+import NumberInputCtrl from "../FormerControllers/NumberInputCtrl.svelte";
+import NativeSelectCtrl from "../FormerControllers/NativeSelectCtrl.svelte";
+import TextAreaCtrl from "../FormerControllers/TextAreaCtrl.svelte";
+import SwitchCtrl from "../FormerControllers/SwitchCtrl.svelte";
+import Boxer from "../Boxer/Boxer.svelte";
+const { request = "insert" } = $props();
+const emptyUser = {
+	firstName: "",
+	lastName: "",
+	email: "",
+	password: "",
+	age: undefined,
+	role: "",
+	department: "",
+	skills: [],
+	bio: "",
+	website: "",
+	emailNotifications: true,
+	active: true
+};
+const filledUser = {
+	id: 1,
+	firstName: "Jane",
+	lastName: "Smith",
+	email: "jane.smith@example.com",
+	password: "",
+	age: 32,
+	role: "admin",
+	department: "engineering",
+	skills: ["typescript", "svelte"],
+	bio: "Senior software engineer with 10 years of experience building scalable systems.",
+	website: "https://janesmith.dev",
+	emailNotifications: true,
+	active: true
+};
+const roleOptions = [
+	{
+		label: "Admin",
+		value: "admin"
+	},
+	{
+		label: "Editor",
+		value: "editor"
+	},
+	{
+		label: "Viewer",
+		value: "viewer"
 	}
-
-	export interface Props {
-		request?: FormRequestType;
+];
+const departmentOptions = [
+	{
+		label: "Engineering",
+		value: "engineering"
+	},
+	{
+		label: "Product",
+		value: "product"
+	},
+	{
+		label: "Design",
+		value: "design"
+	},
+	{
+		label: "Marketing",
+		value: "marketing"
+	},
+	{
+		label: "Operations",
+		value: "operations"
 	}
-
-	const { request = 'insert' }: Props = $props();
-
-	const emptyUser: UserForm = {
-		firstName: '',
-		lastName: '',
-		email: '',
-		password: '',
-		age: undefined,
-		role: '',
-		department: '',
-		skills: [],
-		bio: '',
-		website: '',
-		emailNotifications: true,
-		active: true,
-	};
-
-	const filledUser: UserForm = {
-		id: 1,
-		firstName: 'Jane',
-		lastName: 'Smith',
-		email: 'jane.smith@example.com',
-		password: '',
-		age: 32,
-		role: 'admin',
-		department: 'engineering',
-		skills: ['typescript', 'svelte'],
-		bio: 'Senior software engineer with 10 years of experience building scalable systems.',
-		website: 'https://janesmith.dev',
-		emailNotifications: true,
-		active: true,
-	};
-
-	const roleOptions = [
-		{ label: 'Admin', value: 'admin' },
-		{ label: 'Editor', value: 'editor' },
-		{ label: 'Viewer', value: 'viewer' },
-	];
-
-	const departmentOptions = [
-		{ label: 'Engineering', value: 'engineering' },
-		{ label: 'Product', value: 'product' },
-		{ label: 'Design', value: 'design' },
-		{ label: 'Marketing', value: 'marketing' },
-		{ label: 'Operations', value: 'operations' },
-	];
-
-	const skillOptions = [
-		{ label: 'Svelte', value: 'svelte' },
-		{ label: 'TypeScript', value: 'typescript' },
-		{ label: 'Node.js', value: 'nodejs' },
-		{ label: 'Testing', value: 'testing' },
-		{ label: 'UX', value: 'ux' },
-	];
-
-	let values = $state<UserForm>(request === 'insert' ? { ...emptyUser } : { ...filledUser });
-	let lastSaved = $state<UserForm | undefined>(undefined);
-	let opened = $state(false);
+];
+const skillOptions = [
+	{
+		label: "Svelte",
+		value: "svelte"
+	},
+	{
+		label: "TypeScript",
+		value: "typescript"
+	},
+	{
+		label: "Node.js",
+		value: "nodejs"
+	},
+	{
+		label: "Testing",
+		value: "testing"
+	},
+	{
+		label: "UX",
+		value: "ux"
+	}
+];
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- initial value is intentional (sets up form state once)
+let values = $state(request === "insert" ? { ...emptyUser } : { ...filledUser });
+let lastSaved = $state(undefined);
+let opened = $state(false);
 </script>
 
 <div class="p-8 space-y-6">
@@ -212,7 +223,6 @@
 					data={skillOptions}
 					dataSource="local"
 					multiSelect
-					searchable
 					clearable
 					placeholder="Search skills..."
 					disabled={isReadonly}

package/dist/components/Former/FormerPreview.svelte

@@ -1,81 +1,79 @@
-<script lang="ts">
-  import Former from './Former.svelte';
-  import type { FormRequestType } from './types';
-  import TextInputCtrl from '../FormerControllers/TextInputCtrl.svelte';
-  import PasswordInputCtrl from '../FormerControllers/PasswordInputCtrl.svelte';
-  import NumberInputCtrl from '../FormerControllers/NumberInputCtrl.svelte';
-  import NativeSelectCtrl from '../FormerControllers/NativeSelectCtrl.svelte';
-  import TextAreaCtrl from '../FormerControllers/TextAreaCtrl.svelte';
-  import SwitchCtrl from '../FormerControllers/SwitchCtrl.svelte';
-
-  interface UserForm {
-    id?: number;
-    firstName: string;
-    lastName: string;
-    email: string;
-    password: string;
-    age?: number;
-    role: string;
-    department: string;
-    bio: string;
-    website: string;
-    emailNotifications: boolean;
-    active: boolean;
-  }
-
-  export interface Props {
-    request?: FormRequestType;
-    showKeepOpenSwitch?: boolean;
-  }
-
-  const { request = 'insert', showKeepOpenSwitch = false }: Props = $props();
-
-  const emptyUser: UserForm = {
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
-    age: undefined,
-    role: '',
-    department: '',
-    bio: '',
-    website: '',
-    emailNotifications: true,
-    active: true,
-  };
-
-  const filledUser: UserForm = {
-    id: 1,
-    firstName: 'Jane',
-    lastName: 'Smith',
-    email: 'jane.smith@example.com',
-    password: '',
-    age: 32,
-    role: 'admin',
-    department: 'engineering',
-    bio: 'Senior software engineer with 10 years of experience building scalable systems.',
-    website: 'https://janesmith.dev',
-    emailNotifications: true,
-    active: true,
-  };
-
-  let values = $state<UserForm>(request === 'insert' ? { ...emptyUser } : { ...filledUser });
-  let lastSaved = $state<UserForm | undefined>(undefined);
-  let opened = $state(true);
-
-  const roleOptions = [
-    { label: 'Admin', value: 'admin' },
-    { label: 'Editor', value: 'editor' },
-    { label: 'Viewer', value: 'viewer' },
-  ];
-
-  const departmentOptions = [
-    { label: 'Engineering', value: 'engineering' },
-    { label: 'Product', value: 'product' },
-    { label: 'Design', value: 'design' },
-    { label: 'Marketing', value: 'marketing' },
-    { label: 'Operations', value: 'operations' },
-  ];
+<script lang="ts">import Former from "./Former.svelte";
+import TextInputCtrl from "../FormerControllers/TextInputCtrl.svelte";
+import PasswordInputCtrl from "../FormerControllers/PasswordInputCtrl.svelte";
+import NumberInputCtrl from "../FormerControllers/NumberInputCtrl.svelte";
+import NativeSelectCtrl from "../FormerControllers/NativeSelectCtrl.svelte";
+import TextAreaCtrl from "../FormerControllers/TextAreaCtrl.svelte";
+import SwitchCtrl from "../FormerControllers/SwitchCtrl.svelte";
+const { request = "insert", showKeepOpenSwitch = false } = $props();
+const emptyUser = {
+	firstName: "",
+	lastName: "",
+	email: "",
+	password: "",
+	age: undefined,
+	role: "",
+	department: "",
+	bio: "",
+	website: "",
+	emailNotifications: true,
+	active: true
+};
+const filledUser = {
+	id: 1,
+	firstName: "Jane",
+	lastName: "Smith",
+	email: "jane.smith@example.com",
+	password: "",
+	age: 32,
+	role: "admin",
+	department: "engineering",
+	bio: "Senior software engineer with 10 years of experience building scalable systems.",
+	website: "https://janesmith.dev",
+	emailNotifications: true,
+	active: true
+};
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- initial value is intentional (sets up form state once)
+let values = $state(request === "insert" ? { ...emptyUser } : { ...filledUser });
+let lastSaved = $state(undefined);
+let opened = $state(true);
+const roleOptions = [
+	{
+		label: "Admin",
+		value: "admin"
+	},
+	{
+		label: "Editor",
+		value: "editor"
+	},
+	{
+		label: "Viewer",
+		value: "viewer"
+	}
+];
+const departmentOptions = [
+	{
+		label: "Engineering",
+		value: "engineering"
+	},
+	{
+		label: "Product",
+		value: "product"
+	},
+	{
+		label: "Design",
+		value: "design"
+	},
+	{
+		label: "Marketing",
+		value: "marketing"
+	},
+	{
+		label: "Operations",
+		value: "operations"
+	}
+];
 </script>
 
 <div class="p-6 space-y-6">

package/dist/components/Former/FormerRestApiPreview.svelte

@@ -1,51 +1,58 @@
-<script lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  import FormerModal from "./FormerModal.svelte";
-  import { FormerRestHeadSpecAPI } from "./FormerRestHeadSpecAPI";
-  import type { FormRequestType } from "./types";
-  import TextInputCtrl from "../FormerControllers/TextInputCtrl.svelte";
-  import TextAreaCtrl from "../FormerControllers/TextAreaCtrl.svelte";
-  import NativeSelectCtrl from "../FormerControllers/NativeSelectCtrl.svelte";
-
-  // ── Config state ────────────────────────────────────────────────────────────
-  let apiUrl = $state("https://www.postb.in/b/1771846908265-6770497136749");
-  let authToken = $state("");
-  let showToken = $state(false);
-  let recordId = $state("1");
-  let request = $state<FormRequestType>("insert");
-
-  // ── Modal state ─────────────────────────────────────────────────────────────
-  let opened = $state(false);
-  let values = $state<Record<string, any>>({});
-  let lastResponse = $state<Record<string, any> | undefined>(undefined);
-  let lastError = $state<string | undefined>(undefined);
-
-  // Re-create the API adapter whenever the URL or token changes.
-  // $derived is correct here — FormerRestHeadSpecAPI is a pure factory function.
-  const onAPICall = $derived(
-    FormerRestHeadSpecAPI({
-      authToken,
-      url: apiUrl,
-    }),
-  );
-
-  const requestOptions = [
-    { label: "Insert (POST)", value: "insert" },
-    { label: "Update (PUT)", value: "update" },
-    { label: "Delete (DELETE)", value: "delete" },
-    { label: "View (GET)", value: "view" },
-  ];
-
-  function openForm() {
-    lastError = undefined;
-    if (request === "insert") {
-      values = { title: "", body: "", userId: 1 };
-    } else {
-      // For non-insert modes prime the key so Former knows which record to load.
-      values = { id: Number(recordId) || 1 };
-    }
-    opened = true;
-  }
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
+import FormerModal from "./FormerModal.svelte";
+import { FormerRestHeadSpecAPI } from "./FormerRestHeadSpecAPI";
+import TextInputCtrl from "../FormerControllers/TextInputCtrl.svelte";
+import TextAreaCtrl from "../FormerControllers/TextAreaCtrl.svelte";
+import NativeSelectCtrl from "../FormerControllers/NativeSelectCtrl.svelte";
+// ── Config state ────────────────────────────────────────────────────────────
+let apiUrl = $state("https://www.postb.in/b/1771846908265-6770497136749");
+let authToken = $state("");
+let showToken = $state(false);
+let recordId = $state("1");
+let request = $state("insert");
+// ── Modal state ─────────────────────────────────────────────────────────────
+let opened = $state(false);
+let values = $state({});
+let lastResponse = $state(undefined);
+let lastError = $state(undefined);
+// Re-create the API adapter whenever the URL or token changes.
+// $derived is correct here — FormerRestHeadSpecAPI is a pure factory function.
+const onAPICall = $derived(FormerRestHeadSpecAPI({
+	authToken,
+	url: apiUrl
+}));
+const requestOptions = [
+	{
+		label: "Insert (POST)",
+		value: "insert"
+	},
+	{
+		label: "Update (PUT)",
+		value: "update"
+	},
+	{
+		label: "Delete (DELETE)",
+		value: "delete"
+	},
+	{
+		label: "View (GET)",
+		value: "view"
+	}
+];
+function openForm() {
+	lastError = undefined;
+	if (request === "insert") {
+		values = {
+			title: "",
+			body: "",
+			userId: 1
+		};
+	} else {
+		// For non-insert modes prime the key so Former knows which record to load.
+		values = { id: Number(recordId) || 1 };
+	}
+	opened = true;
+}
 </script>
 
 <div class="p-6 space-y-6">

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