@warkypublic/svelix 0.1.24 → 0.1.26

package/dist/components/Former/Former.svelte

@@ -1,465 +1,526 @@
 <script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import { untrack } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { FormRequestType, FormerAPICallType, FormerLayout, FormerState, FormerStateAndProps } from './types';
-	import FormerButtonArea from './FormerButtonArea.svelte';
-
-	export interface Props<T = any> {
-		// Called before the GET request is made; can transform the outgoing payload.
-		beforeGet?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | T;
-		afterGet?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | void;
-		afterSave?: (data: T, state: Partial<FormerState<T>>) => Promise<void> | void;
-		beforeSave?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | T;
-		children?: Snippet<[FormerState<T>]>;
-		id?: string;
-		keepOpen?: boolean;
-		layout?: FormerLayout<T>;
-		mounted?: boolean;
-		onAPICall?: FormerAPICallType<T>;
-		onChange?: (value: T, state: Partial<FormerState<T>>) => void;
-		onClose?: (data?: T) => void;
-		onConfirmDelete?: (values?: T) => Promise<boolean>;
-		onError?: (error: Error | string, state: Partial<FormerState<T>>) => void;
-		onOpen?: (data?: T) => void;
-		opened?: boolean;
-		primeData?: T;
-		request?: FormRequestType;
-		uniqueKeyField?: string;
-		values?: T;
-	}
-
-	let {
-		afterGet,
-		afterSave,
-		beforeGet,
-		beforeSave,
-		children,
-		id = crypto.randomUUID(),
-		keepOpen = $bindable(false),
-		layout,
-		mounted = true,
-		onAPICall,
-		onChange,
-		onClose,
-		onConfirmDelete,
-		onError,
-		onOpen,
-		opened = $bindable(false),
-		primeData,
-		request = $bindable<FormRequestType>('insert'),
-		uniqueKeyField = 'id',
-		values = $bindable<any>(undefined),
-	}: Props = $props();
-
-	// Internal state
-	let loading = $state(false);
-	let error = $state<string | undefined>(undefined);
-	let dirty = $state(false);
-	let deleteConfirmed = $state(false);
-
-	// Track initial values for dirty detection
-	let initialValues = $state<any>(undefined);
-
-	// Snapshot initial values once when the form opens.
-	// untrack() prevents values/primeData reads from being tracked — only the
-	// opened transition should trigger re-initialization.
-	$effect(() => {
-		if (!mounted) {
-			return;
-		}
-		if (opened) {
-			untrack(() => {
-				if (initialValues === undefined) {
-					if (values !== undefined) {
-						initialValues = JSON.parse(JSON.stringify(values));
-					} else if (primeData !== undefined) {
-						initialValues = JSON.parse(JSON.stringify(primeData));
-					}
-				}
-			});
-		} else {
-			// Reset when form closes so re-opens start fresh.
-			initialValues = undefined;
-			dirty = false;
-			deleteConfirmed = false;
-			error = undefined;
-		}
-	});
-
-	// Track dirty state
-	$effect(() => {
-		if (!mounted) {
-			return;
-		}
-		if (initialValues !== undefined && values !== undefined) {
-			dirty = JSON.stringify(values) !== JSON.stringify(initialValues);
-		}
-	});
-
-	function getState<K extends keyof FormerStateAndProps>(key: K): FormerStateAndProps[K] {
-		const state = getAllState();
-		return state[key];
-	}
-
-	function getAllState(): FormerStateAndProps {
-		return {
-			afterGet,
-			afterSave,
-			beforeGet,
-			beforeSave,
-			deleteConfirmed,
-			dirty,
-			error,
-			getAllState,
-			getState,
-			keepOpen,
-			layout,
-			load,
-			loading,
-			onAPICall,
-			onChange,
-			onClose: handleClose,
-			onConfirmDelete,
-			onError,
-			onOpen,
-			opened,
-			primeData,
-			request,
-			reset,
-			save,
-			setRequest,
-			setState,
-			uniqueKeyField,
-			validate,
-			values,
-		};
-	}
-
-	function setState<K extends keyof FormerStateAndProps>(key: K, value: FormerStateAndProps[K]) {
-		if (key === 'opened') opened = value as boolean;
-		else if (key === 'values') values = value as any;
-		else if (key === 'request') request = value as FormRequestType;
-		else if (key === 'keepOpen') keepOpen = value as boolean;
-		else if (key === 'loading') loading = value as boolean;
-		else if (key === 'error') error = value as string | undefined;
-		else if (key === 'dirty') dirty = value as boolean;
-		else if (key === 'deleteConfirmed') deleteConfirmed = value as boolean;
-	}
-
-	function setRequest(r: FormRequestType) {
-		request = r;
-	}
-
-	async function validate(): Promise<boolean> {
-		if (!mounted) {
-			return true;
-		}
-		// With native HTML form validation, check validity
-		const form = document.getElementById(`former_f${id}`) as HTMLFormElement | null;
-		if (form) {
-			return form.reportValidity();
-		}
-		return true;
-	}
-
-	async function load(reset?: boolean): Promise<void> {
-		if (!mounted) {
-			return;
-		}
-		try {
-			loading = true;
-			error = undefined;
-
-			// Base data for "load" comes from existing values or primeData.
-			// If `beforeGet` is provided, it can normalize/augment this data even
-			// when no API call is configured.
-			let inData = values !== undefined ? { ...values } : primeData !== undefined ? { ...primeData } : values;
-			if (beforeGet) {
-				const modified = await beforeGet(inData, getAllState());
-				if (modified !== undefined) inData = modified;
-			}
-			const keyValue = (inData as any)?.[uniqueKeyField] ?? (primeData as any)?.[uniqueKeyField];
-			if (onAPICall && keyValue !== undefined) {
-				let data = await onAPICall('read', request ?? 'insert', inData, keyValue);
-				if (afterGet) {
-					const result = await afterGet(data, getAllState());
-					if (result !== undefined) data = result;
-				}
-				values = data;
-				onChange?.(data, getAllState());
-			} else if (beforeGet) {
-				// No API call: still apply `beforeGet` output to the form values.
-				values = inData;
-				onChange?.(inData, getAllState());
-			}
-			if (reset) {
-				initialValues = values ? JSON.parse(JSON.stringify(values)) : undefined;
-				dirty = false;
-			}
-		} catch (e) {
-			const msg = (e as Error)?.message ?? String(e);
-			error = msg;
-			onError?.(msg, getAllState());
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function save(): Promise<any> {
-		if (!mounted) {
-			return undefined;
-		}
-		try {
-			loading = true;
-			error = undefined;
-
-			let data = values ? { ...values } : {};
-
-			if (beforeSave) {
-				const modified = await beforeSave(data, getAllState());
-				if (modified !== undefined) data = modified;
-			}
-
-			if (request === 'delete' && !deleteConfirmed) {
-				const confirmed = onConfirmDelete
-					? await onConfirmDelete(data)
-					: confirm('Are you sure you want to delete this item?');
-				if (!confirmed) {
-					loading = false;
-					return undefined;
-				}
-				deleteConfirmed = true;
-			}
-
-			if (onAPICall) {
-				const keyValue = (values as any)?.[uniqueKeyField] ?? (primeData as any)?.[uniqueKeyField];
-				const savedData = await onAPICall('mutate', request ?? 'insert', data, keyValue);
-				const newData = { ...data, ...savedData };
-
-				if (afterSave) {
-					await afterSave(newData, getAllState());
-				}
-
-				if (keepOpen) {
-					const clearedData = { ...newData };
-					delete (clearedData as any)[uniqueKeyField];
-					values = clearedData;
-					initialValues = JSON.parse(JSON.stringify(clearedData));
-					dirty = false;
-					deleteConfirmed = false;
-					onChange?.(clearedData, getAllState());
-					return newData;
-				}
-
-				values = newData;
-				initialValues = JSON.parse(JSON.stringify(newData));
-				dirty = false;
-				onChange?.(newData, getAllState());
-				handleClose(newData);
-				return newData;
-			}
-
-			if (keepOpen) {
-				const clearedData = { ...data };
-				delete (clearedData as any)[uniqueKeyField];
-				values = clearedData;
-				initialValues = JSON.parse(JSON.stringify(clearedData));
-				dirty = false;
-				onChange?.(clearedData, getAllState());
-				return data;
-			}
-
-			values = data;
-			initialValues = JSON.parse(JSON.stringify(data));
-			dirty = false;
-			onChange?.(data, getAllState());
-			handleClose(data);
-			return data;
-		} catch (e) {
-			const msg = (e as Error)?.message ?? String(e);
-			error = msg;
-			onError?.(msg, getAllState());
-		} finally {
-			loading = false;
-		}
-		return undefined;
-	}
-
-	async function reset(): Promise<void> {
-		if (request !== 'insert') {
-			await load(true);
-		} else {
-			values = initialValues ? JSON.parse(JSON.stringify(initialValues)) : undefined;
-			dirty = false;
-		}
-	}
-
-	function handleClose(data?: any) {
-		if (dirty) {
-			if (!confirm('You have unsaved changes. Are you sure you want to close?')) {
-				return;
-			}
-		}
-		if (onClose) {
-			onClose(data);
-		} else {
-			opened = false;
-		}
-	}
-
-	// Load data when opened changes (for non-insert modes).
-	// untrack() prevents reactive reads inside load() (values, onAPICall, etc.)
-	// from being tracked by this effect, which would cause a re-fetch every time
-	// load() writes back to values after a successful GET.
-	$effect(() => {
-		if (mounted && opened && request && request !== 'insert') {
-			untrack(() => load(true));
-		}
-	});
-
-	const formerState: FormerState = {
-		get deleteConfirmed() { return deleteConfirmed; },
-		get dirty() { return dirty; },
-		get error() { return error; },
-		getAllState,
-		getState,
-		load,
-		get loading() { return loading; },
-		get opened() { return opened; },
-		get primeData() { return primeData; },
-		get request() { return request; },
-		reset,
-		save,
-		setRequest,
-		setState,
-		validate,
-		get values() { return values; },
-	};
-
-	// Exposed methods for bind:this
-	export async function show(): Promise<void> {
-		opened = true;
-		onOpen?.(values);
-	}
-
-	export async function close(): Promise<void> {
-		handleClose(values);
-	}
-
-	export async function saveForm(): Promise<any> {
-		return save();
-	}
-
-	export async function validateForm(): Promise<boolean> {
-		return validate();
-	}
-
-	export function resetForm(): void {
-		reset();
-	}
-
-	export function getValue(): any {
-		return values;
-	}
-
-	export function setValue(val: any): void {
-		values = val;
-		onChange?.(val, getAllState());
-	}
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { untrack } from "svelte";
+  import type { Snippet } from "svelte";
+  import type {
+    FormRequestType,
+    FormerAPICallType,
+    FormerLayout,
+    FormerState,
+    FormerStateAndProps,
+  } from "./types";
+  import FormerButtonArea from "./FormerButtonArea.svelte";
+  import { getUUID } from "@warkypublic/artemis-kit/strings";
+  export interface Props<T = any> {
+    // Called before the GET request is made; can transform the outgoing payload.
+    beforeGet?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | T;
+    afterGet?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | void;
+    afterSave?: (
+      data: T,
+      state: Partial<FormerState<T>>,
+    ) => Promise<void> | void;
+    beforeSave?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | T;
+    children?: Snippet<[FormerState<T>]>;
+    id?: string;
+    keepOpen?: boolean;
+    layout?: FormerLayout<T>;
+    mounted?: boolean;
+    onAPICall?: FormerAPICallType<T>;
+    onChange?: (value: T, state: Partial<FormerState<T>>) => void;
+    onClose?: (data?: T) => void;
+    onConfirmDelete?: (values?: T) => Promise<boolean>;
+    onError?: (error: Error | string, state: Partial<FormerState<T>>) => void;
+    onOpen?: (data?: T) => void;
+    opened?: boolean;
+    primeData?: T;
+    request?: FormRequestType;
+    uniqueKeyField?: string;
+    values?: T;
+  }
+
+  let {
+    afterGet,
+    afterSave,
+    beforeGet,
+    beforeSave,
+    children,
+    id = getUUID(),
+    keepOpen = $bindable(false),
+    layout,
+    mounted = true,
+    onAPICall,
+    onChange,
+    onClose,
+    onConfirmDelete,
+    onError,
+    onOpen,
+    opened = $bindable(false),
+    primeData,
+    request = $bindable<FormRequestType>("insert"),
+    uniqueKeyField = "id",
+    values = $bindable<any>(undefined),
+  }: Props = $props();
+
+  // Internal state
+  let loading = $state(false);
+  let error = $state<string | undefined>(undefined);
+  let dirty = $state(false);
+  let deleteConfirmed = $state(false);
+
+  // Track initial values for dirty detection
+  let initialValues = $state<any>(undefined);
+
+  // Snapshot initial values once when the form opens.
+  // untrack() prevents values/primeData reads from being tracked — only the
+  // opened transition should trigger re-initialization.
+  $effect(() => {
+    if (!mounted) {
+      return;
+    }
+    if (opened) {
+      untrack(() => {
+        if (initialValues === undefined) {
+          if (values !== undefined) {
+            initialValues = JSON.parse(JSON.stringify(values));
+          } else if (primeData !== undefined) {
+            initialValues = JSON.parse(JSON.stringify(primeData));
+          }
+        }
+      });
+    } else {
+      // Reset when form closes so re-opens start fresh.
+      initialValues = undefined;
+      dirty = false;
+      deleteConfirmed = false;
+      error = undefined;
+    }
+  });
+
+  // Track dirty state
+  $effect(() => {
+    if (!mounted) {
+      return;
+    }
+    if (initialValues !== undefined && values !== undefined) {
+      dirty = JSON.stringify(values) !== JSON.stringify(initialValues);
+    }
+  });
+
+  function getState<K extends keyof FormerStateAndProps>(
+    key: K,
+  ): FormerStateAndProps[K] {
+    const state = getAllState();
+    return state[key];
+  }
+
+  function getAllState(): FormerStateAndProps {
+    return {
+      afterGet,
+      afterSave,
+      beforeGet,
+      beforeSave,
+      deleteConfirmed,
+      dirty,
+      error,
+      getAllState,
+      getState,
+      keepOpen,
+      layout,
+      load,
+      loading,
+      onAPICall,
+      onChange,
+      onClose: handleClose,
+      onConfirmDelete,
+      onError,
+      onOpen,
+      opened,
+      primeData,
+      request,
+      reset,
+      save,
+      setRequest,
+      setState,
+      uniqueKeyField,
+      validate,
+      values,
+    };
+  }
+
+  function setState<K extends keyof FormerStateAndProps>(
+    key: K,
+    value: FormerStateAndProps[K],
+  ) {
+    if (key === "opened") opened = value as boolean;
+    else if (key === "values") values = value as any;
+    else if (key === "request") request = value as FormRequestType;
+    else if (key === "keepOpen") keepOpen = value as boolean;
+    else if (key === "loading") loading = value as boolean;
+    else if (key === "error") error = value as string | undefined;
+    else if (key === "dirty") dirty = value as boolean;
+    else if (key === "deleteConfirmed") deleteConfirmed = value as boolean;
+  }
+
+  function setRequest(r: FormRequestType) {
+    request = r;
+  }
+
+  async function validate(): Promise<boolean> {
+    if (!mounted) {
+      return true;
+    }
+    // With native HTML form validation, check validity
+    const form = document.getElementById(
+      `former_f${id}`,
+    ) as HTMLFormElement | null;
+    if (form) {
+      return form.reportValidity();
+    }
+    return true;
+  }
+
+  async function load(reset?: boolean): Promise<void> {
+    if (!mounted) {
+      return;
+    }
+    try {
+      loading = true;
+      error = undefined;
+
+      // Base data for "load" comes from existing values or primeData.
+      // If `beforeGet` is provided, it can normalize/augment this data even
+      // when no API call is configured.
+      let inData =
+        values !== undefined
+          ? { ...values }
+          : primeData !== undefined
+            ? { ...primeData }
+            : values;
+      if (beforeGet) {
+        const modified = await beforeGet(inData, getAllState());
+        if (modified !== undefined) inData = modified;
+      }
+      const keyValue =
+        (inData as any)?.[uniqueKeyField] ??
+        (primeData as any)?.[uniqueKeyField];
+      if (onAPICall && keyValue !== undefined) {
+        let data = await onAPICall(
+          "read",
+          request ?? "insert",
+          inData,
+          keyValue,
+        );
+        if (afterGet) {
+          const result = await afterGet(data, getAllState());
+          if (result !== undefined) data = result;
+        }
+        values = data;
+        onChange?.(data, getAllState());
+      } else if (beforeGet) {
+        // No API call: still apply `beforeGet` output to the form values.
+        values = inData;
+        onChange?.(inData, getAllState());
+      }
+      if (reset) {
+        initialValues = values ? JSON.parse(JSON.stringify(values)) : undefined;
+        dirty = false;
+      }
+    } catch (e) {
+      const msg = (e as Error)?.message ?? String(e);
+      error = msg;
+      onError?.(msg, getAllState());
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function save(): Promise<any> {
+    if (!mounted) {
+      return undefined;
+    }
+    try {
+      loading = true;
+      error = undefined;
+
+      let data = values ? { ...values } : {};
+
+      if (beforeSave) {
+        const modified = await beforeSave(data, getAllState());
+        if (modified !== undefined) data = modified;
+      }
+
+      if (request === "delete" && !deleteConfirmed) {
+        const confirmed = onConfirmDelete
+          ? await onConfirmDelete(data)
+          : confirm("Are you sure you want to delete this item?");
+        if (!confirmed) {
+          loading = false;
+          return undefined;
+        }
+        deleteConfirmed = true;
+      }
+
+      if (onAPICall) {
+        const keyValue =
+          (values as any)?.[uniqueKeyField] ??
+          (primeData as any)?.[uniqueKeyField];
+        const savedData = await onAPICall(
+          "mutate",
+          request ?? "insert",
+          data,
+          keyValue,
+        );
+        const newData = { ...data, ...savedData };
+
+        if (afterSave) {
+          await afterSave(newData, getAllState());
+        }
+
+        if (keepOpen) {
+          const clearedData = { ...newData };
+          delete (clearedData as any)[uniqueKeyField];
+          values = clearedData;
+          initialValues = JSON.parse(JSON.stringify(clearedData));
+          dirty = false;
+          deleteConfirmed = false;
+          onChange?.(clearedData, getAllState());
+          return newData;
+        }
+
+        values = newData;
+        initialValues = JSON.parse(JSON.stringify(newData));
+        dirty = false;
+        onChange?.(newData, getAllState());
+        handleClose(newData);
+        return newData;
+      }
+
+      if (keepOpen) {
+        const clearedData = { ...data };
+        delete (clearedData as any)[uniqueKeyField];
+        values = clearedData;
+        initialValues = JSON.parse(JSON.stringify(clearedData));
+        dirty = false;
+        onChange?.(clearedData, getAllState());
+        return data;
+      }
+
+      values = data;
+      initialValues = JSON.parse(JSON.stringify(data));
+      dirty = false;
+      onChange?.(data, getAllState());
+      handleClose(data);
+      return data;
+    } catch (e) {
+      const msg = (e as Error)?.message ?? String(e);
+      error = msg;
+      onError?.(msg, getAllState());
+    } finally {
+      loading = false;
+    }
+    return undefined;
+  }
+
+  async function reset(): Promise<void> {
+    if (request !== "insert") {
+      await load(true);
+    } else {
+      values = initialValues
+        ? JSON.parse(JSON.stringify(initialValues))
+        : undefined;
+      dirty = false;
+    }
+  }
+
+  function handleClose(data?: any) {
+    if (dirty) {
+      if (
+        !confirm("You have unsaved changes. Are you sure you want to close?")
+      ) {
+        return;
+      }
+    }
+    if (onClose) {
+      onClose(data);
+    } else {
+      opened = false;
+    }
+  }
+
+  // Load data when opened changes (for non-insert modes).
+  // untrack() prevents reactive reads inside load() (values, onAPICall, etc.)
+  // from being tracked by this effect, which would cause a re-fetch every time
+  // load() writes back to values after a successful GET.
+  $effect(() => {
+    if (mounted && opened && request && request !== "insert") {
+      untrack(() => load(true));
+    }
+  });
+
+  const formerState: FormerState = {
+    get deleteConfirmed() {
+      return deleteConfirmed;
+    },
+    get dirty() {
+      return dirty;
+    },
+    get error() {
+      return error;
+    },
+    getAllState,
+    getState,
+    load,
+    get loading() {
+      return loading;
+    },
+    get opened() {
+      return opened;
+    },
+    get primeData() {
+      return primeData;
+    },
+    get request() {
+      return request;
+    },
+    reset,
+    save,
+    setRequest,
+    setState,
+    validate,
+    get values() {
+      return values;
+    },
+  };
+
+  // Exposed methods for bind:this
+  export async function show(): Promise<void> {
+    opened = true;
+    onOpen?.(values);
+  }
+
+  export async function close(): Promise<void> {
+    handleClose(values);
+  }
+
+  export async function saveForm(): Promise<any> {
+    return save();
+  }
+
+  export async function validateForm(): Promise<boolean> {
+    return validate();
+  }
+
+  export function resetForm(): void {
+    reset();
+  }
+
+  export function getValue(): any {
+    return values;
+  }
+
+  export function setValue(val: any): void {
+    values = val;
+    onChange?.(val, getAllState());
+  }
 </script>
 
 {#if mounted}
-	<div class="flex flex-col h-full relative" id={`former_${id}`}>
-		<!-- Top button area -->
-		{#if layout?.buttonArea === 'top'}
-			{#if layout.renderTop}
-				{@render layout.renderTop(formerState)}
-			{:else}
-				<FormerButtonArea
-					closeButtonTitle={layout?.closeButtonTitle}
-					{deleteConfirmed}
-					{dirty}
-					{keepOpen}
-					{request}
-					saveButtonTitle={layout?.saveButtonTitle}
-					showKeepOpenSwitch={layout?.showKeepOpenSwitch}
-					onClose={() => handleClose(values)}
-					onSave={save}
-					onToggleKeepOpen={(c) => (keepOpen = c)}
-				/>
-			{/if}
-		{/if}
-
-		<!-- Scrollable content area -->
-		<div class="flex-1 overflow-auto p-1 relative">
-			<!-- Loading overlay -->
-			{#if loading}
-				<div
-					class="absolute inset-0 bg-surface-50/50 dark:bg-surface-900/50 flex items-center justify-center z-10"
-				>
-					<span class="animate-spin text-2xl">⟳</span>
-				</div>
-			{/if}
-
-			<!-- Error message -->
-			{#if error}
-				<div class="alert preset-outlined-error-token mb-2 p-3 text-sm">
-					⚠ {error}
-					<button class="ml-2 text-xs" onclick={() => (error = undefined)}>✕</button>
-				</div>
-			{/if}
-
-			<form
-				id={`former_f${id}`}
-				data-request={request}
-				onreset={() => reset()}
-				onsubmit={(e) => {
-					e.preventDefault();
-					save();
-				}}
-			>
-				<fieldset disabled={request === 'delete'} class="contents">
-					{#if children}
-						{@render children(formerState)}
-					{/if}
-				</fieldset>
-			</form>
-
-			{#if request === 'delete'}
-				<div class="mt-3 p-3 rounded border border-error-500 bg-error-50 dark:bg-error-950 text-sm space-y-2">
-					<p class="font-semibold text-error-700 dark:text-error-300">⚠ This action cannot be undone</p>
-					<label class="flex items-center gap-2 cursor-pointer">
-						<input
-							type="checkbox"
-							class="checkbox"
-							checked={deleteConfirmed}
-							onchange={(e) => (deleteConfirmed = e.currentTarget.checked)}
-						/>
-						<span>I confirm I want to permanently delete this record</span>
-					</label>
-				</div>
-			{/if}
-		</div>
-
-		<!-- Bottom button area -->
-		{#if !layout?.buttonArea || layout?.buttonArea === 'bottom'}
-			{#if layout?.renderBottom}
-				{@render layout.renderBottom(formerState)}
-			{:else if layout?.buttonArea !== 'none'}
-				<FormerButtonArea
-					closeButtonTitle={layout?.closeButtonTitle}
-					{deleteConfirmed}
-					{dirty}
-					{keepOpen}
-					{request}
-					saveButtonTitle={layout?.saveButtonTitle}
-					showKeepOpenSwitch={layout?.showKeepOpenSwitch}
-					onClose={() => handleClose(values)}
-					onSave={save}
-					onToggleKeepOpen={(c) => (keepOpen = c)}
-				/>
-			{/if}
-		{/if}
-	</div>
+  <div class="flex flex-col h-full relative" id={`former_${id}`}>
+    <!-- Top button area -->
+    {#if layout?.buttonArea === "top"}
+      {#if layout.renderTop}
+        {@render layout.renderTop(formerState)}
+      {:else}
+        <FormerButtonArea
+          closeButtonTitle={layout?.closeButtonTitle}
+          {deleteConfirmed}
+          {dirty}
+          {keepOpen}
+          {request}
+          saveButtonTitle={layout?.saveButtonTitle}
+          showKeepOpenSwitch={layout?.showKeepOpenSwitch}
+          onClose={() => handleClose(values)}
+          onSave={save}
+          onToggleKeepOpen={(c) => (keepOpen = c)}
+        />
+      {/if}
+    {/if}
+
+    <!-- Scrollable content area -->
+    <div class="flex-1 overflow-auto p-1 relative">
+      <!-- Loading overlay -->
+      {#if loading}
+        <div
+          class="absolute inset-0 bg-surface-50/50 dark:bg-surface-900/50 flex items-center justify-center z-10"
+        >
+          <span class="animate-spin text-2xl">⟳</span>
+        </div>
+      {/if}
+
+      <!-- Error message -->
+      {#if error}
+        <div class="alert preset-outlined-error-token mb-2 p-3 text-sm">
+          ⚠ {error}
+          <button class="ml-2 text-xs" onclick={() => (error = undefined)}
+            >✕</button
+          >
+        </div>
+      {/if}
+
+      <form
+        id={`former_f${id}`}
+        data-request={request}
+        onreset={() => reset()}
+        onsubmit={(e) => {
+          e.preventDefault();
+          save();
+        }}
+      >
+        <fieldset disabled={request === "delete"} class="contents">
+          {#if children}
+            {@render children(formerState)}
+          {/if}
+        </fieldset>
+      </form>
+
+      {#if request === "delete"}
+        <div
+          class="mt-3 p-3 rounded border border-error-500 bg-error-50 dark:bg-error-950 text-sm space-y-2"
+        >
+          <p class="font-semibold text-error-700 dark:text-error-300">
+            ⚠ This action cannot be undone
+          </p>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              class="checkbox"
+              checked={deleteConfirmed}
+              onchange={(e) => (deleteConfirmed = e.currentTarget.checked)}
+            />
+            <span>I confirm I want to permanently delete this record</span>
+          </label>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Bottom button area -->
+    {#if !layout?.buttonArea || layout?.buttonArea === "bottom"}
+      {#if layout?.renderBottom}
+        {@render layout.renderBottom(formerState)}
+      {:else if layout?.buttonArea !== "none"}
+        <FormerButtonArea
+          closeButtonTitle={layout?.closeButtonTitle}
+          {deleteConfirmed}
+          {dirty}
+          {keepOpen}
+          {request}
+          saveButtonTitle={layout?.saveButtonTitle}
+          showKeepOpenSwitch={layout?.showKeepOpenSwitch}
+          onClose={() => handleClose(values)}
+          onSave={save}
+          onToggleKeepOpen={(c) => (keepOpen = c)}
+        />
+      {/if}
+    {/if}
+  </div>
 {/if}