@svadmin/ui 0.70.0 → 0.72.0

package/dist/components/StepsForm.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { definedOptions, definedReactiveOptions } from '@svadmin/core/options';
+
   import { fly } from 'svelte/transition';
-  import { captureAdminContext, useStepsForm, deriveValidator } from '@svadmin/core';
+  import { tick } from 'svelte';
+  import { captureAdminContext, captureAuthSession, deriveValidator, useStepsForm, useResourceContract, getContractFormFields, useCan } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
-  import { getResource } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import { Button } from './ui/button/index.js';
@@ -11,6 +13,8 @@
   import { Progress } from './ui/progress/index.js';
   import { Save, ArrowLeft, ArrowRight, Check, Loader2 } from '@lucide/svelte';
   import FieldRenderer from './FieldRenderer.svelte';
+  import ConfirmDialog from './ConfirmDialog.svelte';
+  import { Skeleton } from './ui/skeleton/index.js';
 
   const i18n = useTranslation();
 
@@ -24,18 +28,26 @@
     id?: string | number;
     mode?: 'create' | 'edit';
     steps: StepDef[];
+    onSuccess?: () => void;
   }
 
-  let { resourceName, id, mode = 'create', steps }: Props = $props();
+  let { resourceName, id, mode = 'create', steps, onSuccess }: Props = $props();
   const adminContext = captureAdminContext();
+  const binding = useResourceContract(() => resourceName);
 
-  const resource = $derived(getResource(resourceName));
+  const resource = $derived(adminContext.getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
+  const writableFields = $derived(getContractFormFields(binding.resource, mode));
+  const permission = useCan(() => definedOptions({ resource: resourceName, action: mode, id }));
+  const allowed = $derived(permission.allowed && (mode === 'create' ? resource.canCreate !== false : resource.canEdit !== false));
 
   // All fields used across all steps
   const flatStepsFields = $derived(steps.flatMap(s => s.fields)
     .map(key => resource.fields.find(f => f.key === key))
-    .filter((f): f is FieldDefinition => f != null));
+    .filter((f): f is FieldDefinition => f != null && writableFields.includes(f.key)));
+  const configurationValid = $derived(steps.every(step => step.fields.every(key =>
+    flatStepsFields.some(field => field.key === key && key !== primaryKey && field.showInForm !== false &&
+      (mode === 'create' ? field.showInCreate !== false : field.showInEdit !== false)))));
 
   // Default values from field metadata
   function getDefaultForType(field: FieldDefinition): unknown {
@@ -57,61 +69,152 @@
   })());
 
   const validator = $derived(deriveValidator(flatStepsFields, { translate: i18n.t }));
-  const stepsCount = $derived(steps.length);
 
   // ─── useStepsForm: form state + step navigation ──────────────────
-  const form = useStepsForm({
-    get resource() { return resourceName; },
+  const form = useStepsForm(definedReactiveOptions({
+    get resource() { return binding.resource; },
     get action() { return mode; },
     get id() { return id; },
     get defaultValues() { return defaults; },
-    get stepsCount() { return stepsCount; },
+    get steps() { return steps.map(step => ({ fields: step.fields })); },
+    get enabled() { return allowed && configurationValid; },
+    get dataProviderName() { return binding.dataProviderName; },
     redirect: 'list',
     warnWhenUnsavedChanges: true,
     get validate() { return validator; },
-  });
+    get onMutationSuccess() {
+      const callback = onSuccess;
+      return callback ? () => callback() : undefined;
+    },
+  }));
 
-  const totalSteps = $derived(steps.length);
-  const progressValue = $derived(((form.steps.currentStep + 1) / totalSteps) * 100);
+  const totalSteps = $derived(form.steps.totalSteps);
+  const progressValue = $derived(totalSteps > 0 ? ((form.steps.currentStep + 1) / totalSteps) * 100 : 0);
   const isLastStep = $derived(form.steps.currentStep >= totalSteps - 1);
 
   // Fields for the current step
   const currentFields = $derived(
     steps[form.steps.currentStep]?.fields
       .map(key => resource.fields.find(f => f.key === key))
-      .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
+      .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey && writableFields.includes(f.key)) ?? []
   );
 
-  // Validate only fields in the current step
-  function validateCurrentStep(): boolean {
-    let valid = true;
-    form.clearErrors();
-    const errors = validator(form.values);
-    if (errors) {
-      for (const field of currentFields) {
-        if (errors[field.key]) {
-          form.setFieldError(field.key, errors[field.key]);
-          valid = false;
-        }
-      }
+  let element = $state.raw<HTMLFormElement>();
+  let submitError = $state<string | null>(null);
+  let submission = $state.raw<object>();
+  const scope = $derived({
+    contract: binding.resource, id, mode, allowed, configurationValid,
+    steps: JSON.stringify(steps), provider: adminContext.providers?.[binding.dataProviderName],
+    meta: binding.meta, tenant: adminContext.tenantCacheKey?.__svadminTenant,
+    auth: adminContext.authProvider, router: adminContext.routerProvider,
+    session: captureAuthSession(adminContext.authProvider),
+  });
+  const rendered = $derived({ scope, step: form.steps.currentStep });
+  let mounted = true;
+  let confirmation = $state.raw<typeof rendered>();
+  const currentRendered = (origin: typeof rendered) => mounted && origin === rendered &&
+    origin.scope.session.isCurrent() && form.ready;
+  const confirmOpen = $derived(confirmation !== undefined && currentRendered(confirmation));
+  $effect(() => {
+    void scope;
+    submitError = null;
+    submission = undefined;
+    confirmation = undefined;
+  });
+  $effect(() => () => { mounted = false; submission = undefined; confirmation = undefined; });
+  function errorId(field: string): string { return `${resourceName}-step-${field}-error`; }
+  async function focusInvalid(origin: typeof scope) {
+    await tick();
+    if (mounted && scope === origin && origin.session.isCurrent() && element?.isConnected) {
+      element.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
     }
-    return valid;
   }
-
-  async function handleSubmit() {
-    if (!validateCurrentStep()) return;
-
-    if (!isLastStep) {
-      form.steps.nextStep();
-      return;
-    }
-
-    // Last step — submit the full form
-    await form.submit({ redirect: 'list' });
+  const changeStep = $derived.by(() => {
+    const origin = rendered;
+    return (step: number) => () => {
+      if (!currentRendered(origin) || !allowed || form.submitting) return;
+      submitError = null;
+      if (!form.steps.gotoStep(step)) void focusInvalid(origin.scope);
+    };
+  });
+  const fieldChange = $derived.by(() => {
+    const origin = rendered;
+    return (key: string) => (value: unknown) => {
+      if (currentRendered(origin)) form.setFieldValue(key, value);
+    };
+  });
+  function leave(origin: typeof rendered) {
+    if (!currentRendered(origin)) return;
+    confirmation = undefined;
+    void adminContext.navigate(`/${encodeURIComponent(resourceName)}`).catch(() => {
+      if (currentRendered(origin) && element?.isConnected) submitError = i18n.t('common.operationFailed');
+    });
   }
+  const back = $derived.by(() => {
+    const origin = rendered;
+    const previous = changeStep(origin.step - 1);
+    return () => {
+      if (!currentRendered(origin) || form.submitting) return;
+      if (origin.step > 0) previous();
+      else if (form.isDirty) confirmation = origin;
+      else leave(origin);
+    };
+  });
+  const confirmLeave = $derived.by(() => {
+    const origin = confirmation;
+    return () => { if (origin && confirmation === origin) leave(origin); };
+  });
+  const cancelLeave = $derived.by(() => {
+    const origin = confirmation;
+    return () => { if (origin && confirmation === origin) confirmation = undefined; };
+  });
+  const retry = $derived.by(() => {
+    const origin = scope;
+    const refetch = form.query.refetch;
+    return () => {
+      if (mounted && scope === origin && origin.session.isCurrent()) void refetch().catch(() => {});
+    };
+  });
+
+  const handleSubmit = $derived.by(() => {
+    const origin = rendered;
+    return async () => {
+      if (!currentRendered(origin) || !allowed || form.submitting || submission) return;
+      submitError = null;
+      if (!isLastStep) {
+        if (!form.steps.nextStep()) void focusInvalid(origin.scope);
+        return;
+      }
+      const token = {};
+      submission = token;
+      try { await form.submit(); }
+      catch {
+        if (submission === token && mounted && scope === origin.scope && origin.scope.session.isCurrent()) {
+          submitError = i18n.t('common.operationFailed');
+          void focusInvalid(origin.scope);
+        }
+      } finally {
+        if (submission === token) submission = undefined;
+      }
+    };
+  });
+  const submitEvent = $derived.by(() => {
+    const submit = handleSubmit;
+    return (event: Event) => { event.preventDefault(); void submit(); };
+  });
 </script>
 
 <div class="svadmin-u-b3542e058833">
+  {#if permission.isLoading || form.loading}
+    <Skeleton class="svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741" />
+  {:else if !allowed || !configurationValid || (!form.ready && form.error)}
+    <p role="alert">{i18n.t('common.operationFailed')}</p>
+    {#if allowed && configurationValid && form.query.isError}
+      <Button type="button" variant="outline" onclick={retry}>
+        {i18n.t('common.retry')}
+      </Button>
+    {/if}
+  {:else if form.ready}
   <!-- Step indicators -->
   <div class="svadmin-u-6ed543e2fbbb">
     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-fc7473ca09eb">
@@ -120,7 +223,9 @@
           variant="ghost"
           type="button"
           class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-ceb69a6b0e5f svadmin-u-b8f0a08ece1e svadmin-u-660d2effb880 svadmin-u-d5eab218aa34 {i === form.steps.currentStep ? 'svadmin-u-20aaf08a7ed1 svadmin-u-e83a7042bc91' : 'svadmin-u-bfa603190748'}"
-          onclick={() => form.steps.gotoStep(i)}
+          aria-current={i === form.steps.currentStep ? 'step' : undefined}
+          disabled={form.submitting || !!submission}
+          onclick={changeStep(i)}
         >
           <span
             class="svadmin-u-60fbb7713999 svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-ceb69a6b0e5f"
@@ -154,16 +259,21 @@
       </Badge>
     </Card.CardHeader>
     <Card.CardContent>
-      {#key form.steps.currentStep}
-        <form class="svadmin-u-b43b4c086d9a" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} in:fly={{ x: 30, duration: 250 }}>
+      {#key rendered}
+        <form bind:this={element} class="svadmin-u-b43b4c086d9a" novalidate onsubmit={submitEvent} in:fly={{ x: 30, duration: 250 }}>
+        {#if submitError || form.error}
+          <p role="alert">{submitError ?? i18n.t('common.operationFailed')}</p>
+        {/if}
         {#each currentFields as field (field.key)}
           <FieldRenderer
             {field}
             value={form.values[field.key]}
-            onchange={(v) => form.setFieldValue(field.key, v)}
+            onchange={fieldChange(field.key)}
+            invalid={!!form.errors[field.key]}
+            {...definedOptions({ errorId: form.errors[field.key] ? errorId(field.key) : undefined })}
           />
           {#if form.errors[field.key]}
-            <p class="svadmin-u-811148b13d1e svadmin-u-1d5904e7e755 svadmin-u-b6b02c0ebef6">{form.errors[field.key]}</p>
+            <p id={errorId(field.key)} role="alert" aria-live="polite" class="svadmin-u-811148b13d1e svadmin-u-1d5904e7e755 svadmin-u-b6b02c0ebef6">{form.errors[field.key]}</p>
           {/if}
         {/each}
 
@@ -171,13 +281,14 @@
           <Button
             type="button"
             variant="outline"
-            onclick={() => form.steps.currentStep === 0 ? adminContext.navigate(`/${resourceName}`) : form.steps.prevStep()}
+            disabled={form.submitting || !!submission}
+            onclick={back}
           >
             <ArrowLeft class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" data-icon="inline-start" />
             {form.steps.currentStep === 0 ? i18n.t('common.cancel') : i18n.t('common.back')}
           </Button>
 
-          <Button type="submit" disabled={form.submitting}>
+          <Button type="submit" disabled={form.submitting || !!submission}>
             {#if form.submitting}
               <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" data-icon="inline-start" />
             {:else if isLastStep}
@@ -192,4 +303,10 @@
       {/key}
     </Card.CardContent>
   </Card.Root>
+  {/if}
 </div>
+
+{#key confirmation}
+  <ConfirmDialog open={confirmOpen} message={i18n.t('common.unsavedChanges')}
+    onconfirm={confirmLeave} oncancel={cancelLeave} />
+{/key}

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

@@ -7,6 +7,7 @@ interface Props {
     id?: string | number;
     mode?: 'create' | 'edit';
     steps: StepDef[];
+    onSuccess?: () => void;
 }
 declare const StepsForm: import("svelte").Component<Props, {}, "">;
 type StepsForm = ReturnType<typeof StepsForm>;

package/dist/components/TaskDetails.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { useTask, getTaskProvider } from '@svadmin/core';
+  import { decodeTaskRecord } from '@svadmin/core/schema';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import type { TaskProvider, TaskRecord } from '@svadmin/core';
@@ -27,7 +30,7 @@
   let {
     task,
     taskId,
-    taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
+    taskProvider = getTaskProvider({ optional: true }) ?? undefined,
     title,
     useProviderData = !task && !!taskId,
     queryOptions,
@@ -59,13 +62,21 @@
     },
   });
 
-  const resolvedTask = $derived(task ?? query.data);
+  const view = $derived.by(() => {
+    const value = task === undefined ? query.data : task;
+    try {
+      return { data: value === undefined ? undefined : decodeTaskRecord(value, taskId), invalid: false };
+    } catch {
+      return { data: undefined, invalid: true };
+    }
+  });
+  const resolvedTask = $derived(view.data);
   const resolvedTitle = $derived(title ?? i18n.t('task.detailsTitle'));
 
   function formatDate(value: unknown) {
-    if (!value) return '—';
-    const date = new Date(value as string | Date);
-    if (Number.isNaN(date.getTime())) return String(value);
+    if (typeof value !== 'string' || !value) return '—';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '—';
     return date.toLocaleString();
   }
 
@@ -90,7 +101,9 @@
     </Card.Description>
   </Card.Header>
   <Card.Content class="svadmin-u-b43b4c086d9a svadmin-u-9335c39f6eff">
-    {#if useProviderData && taskProvider && query.isLoading}
+    {#if view.invalid || (useProviderData && query.isError)}
+      <p role="alert">{i18n.t('validation.invalidFormat')}</p>
+    {:else if useProviderData && taskProvider && query.isLoading}
       <div class="svadmin-u-60fbb7713999 svadmin-u-aadad6871af8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-bfa603190748">
         <Loader2 class="svadmin-u-d2347e8497a9 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
         {i18n.t('task.loadingDetail')}
@@ -102,7 +115,7 @@
       </div>
 
       {#if typeof resolveTaskProgress(resolvedTask) === 'number'}
-        <TaskProgressBar value={resolveTaskProgress(resolvedTask)} />
+        <TaskProgressBar {...definedOptions({ "value": resolveTaskProgress(resolvedTask) })} />
       {/if}
 
       <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff">

package/dist/components/TaskList.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { useTaskList, getTaskProvider } from '@svadmin/core';
+  import { decodeTaskList } from '@svadmin/core/schema';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import type { TaskProvider, TaskRecord } from '@svadmin/core';
@@ -24,7 +27,7 @@
 
   let {
     tasks,
-    taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
+    taskProvider = getTaskProvider({ optional: true }) ?? undefined,
     params,
     dlq = false,
     title,
@@ -70,14 +73,21 @@
     },
   });
 
-  const resolvedTasks = $derived(tasks ?? query.data?.data ?? []);
+  const view = $derived.by(() => {
+    try {
+      return { data: decodeTaskList({ data: tasks === undefined ? query.data?.data ?? [] : tasks }).data, invalid: false };
+    } catch {
+      return { data: [], invalid: true };
+    }
+  });
+  const resolvedTasks = $derived(view.data);
   const resolvedTitle = $derived(title ?? (dlq ? i18n.t('task.dlqTitle') : i18n.t('task.listTitle')));
   const resolvedEmptyText = $derived(emptyText ?? (dlq ? i18n.t('task.noDlq') : i18n.t('task.noTasks')));
 
   function formatDate(value: unknown) {
-    if (!value) return '—';
-    const date = new Date(value as string | Date);
-    if (Number.isNaN(date.getTime())) return String(value);
+    if (typeof value !== 'string' || !value) return '—';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '—';
     return date.toLocaleString();
   }
 </script>
@@ -94,7 +104,9 @@
     </Card.Description>
   </Card.Header>
   <Card.Content class="svadmin-u-9335c39f6eff">
-    {#if useProviderData && taskProvider && query.isLoading}
+    {#if view.invalid || (useProviderData && query.isError)}
+      <p role="alert">{i18n.t('validation.invalidFormat')}</p>
+    {:else if useProviderData && taskProvider && query.isLoading}
       <div class="svadmin-u-60fbb7713999 svadmin-u-aadad6871af8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-bfa603190748">
         <Loader2 class="svadmin-u-d2347e8497a9 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
         {i18n.t('task.loadingList')}
@@ -122,7 +134,7 @@
                       <div class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{resolveTaskMessage(task)}</div>
                     {/if}
                     {#if showProgress && typeof resolveTaskProgress(task) === 'number'}
-                      <TaskProgressBar value={resolveTaskProgress(task)} />
+                      <TaskProgressBar {...definedOptions({ "value": resolveTaskProgress(task) })} />
                     {/if}
                   </div>
                 </Table.Cell>

package/dist/components/TaskQueueDrawer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import { definedReactiveOptions, definedOptions } from '@svadmin/core/options';
+
   import { ListTodo, Loader2, Plus, Search, RefreshCw } from '@lucide/svelte';
   import { getTaskProvider, useSubmitTask, useTaskList } from '@svadmin/core';
+  import { decodeTaskSubmitOptions } from '@svadmin/core/schema';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { TaskProvider, TaskRecord } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
@@ -28,7 +31,7 @@
 
   let {
     open = $bindable(false),
-    taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
+    taskProvider = getTaskProvider({ optional: true }) ?? undefined,
     title,
     initialTab = 'tasks',
   }: {
@@ -38,8 +41,7 @@
     initialTab?: TaskTab;
   } = $props();
 
-    // eslint-disable-next-line svelte/prefer-writable-derived
-  let activeTab = $state<TaskTab>('tasks');
+  let activeTab = $derived(initialTab);
   let selectedTaskId = $state<string | null>(null);
   let searchQuery = $state('');
   let statusFilter = $state('all');
@@ -55,7 +57,7 @@
   );
   const resolvedTitle = $derived(title ?? i18n.t('task.drawerTitle'));
 
-  const taskQuery = useTaskList({
+  const taskQuery = useTaskList(definedReactiveOptions({
     get taskProvider() {
       return taskProvider;
     },
@@ -66,9 +68,9 @@
         refetchIntervalInBackground: true,
       };
     },
-  });
+  }));
 
-  const dlqQuery = useTaskList({
+  const dlqQuery = useTaskList(definedReactiveOptions({
     get dlq() {
       return true;
     },
@@ -82,7 +84,7 @@
         refetchIntervalInBackground: true,
       };
     },
-  });
+  }));
 
   const submitTask = useSubmitTask();
 
@@ -123,10 +125,6 @@
     allTasks.filter(isTaskActive).length,
   );
 
-  $effect(() => {
-    activeTab = initialTab;
-  });
-
   $effect(() => {
     if (statusFilter !== 'all' && !availableStatuses.includes(statusFilter)) {
       statusFilter = 'all';
@@ -141,19 +139,19 @@
     }
 
     if (!selectedTaskId) {
-      selectedTaskId = current[0].id;
+      selectedTaskId = current[0]?.id ?? null;
       return;
     }
 
     if (!current.some((task) => task.id === selectedTaskId)) {
-      selectedTaskId = current[0].id;
+      selectedTaskId = current[0]?.id ?? null;
     }
   });
 
   function formatTime(value: unknown) {
-    if (!value) return '—';
-    const date = new Date(value as string | Date);
-    if (Number.isNaN(date.getTime())) return String(value);
+    if (typeof value !== 'string' || !value) return '—';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '—';
     return date.toLocaleString();
   }
 
@@ -174,7 +172,8 @@
     let body: Record<string, unknown> | undefined;
     if (submitBodyText.trim()) {
       try {
-        body = JSON.parse(submitBodyText) as Record<string, unknown>;
+        const parsed: unknown = JSON.parse(submitBodyText);
+        body = decodeTaskSubmitOptions({ body: parsed }).body;
       } catch {
         submitError = i18n.t('task.invalidJson');
         return;
@@ -182,16 +181,16 @@
     }
 
     try {
-      const handle = await submitTask.mutation.mutateAsync({
+      const handle = await submitTask.mutation.mutateAsync(definedOptions({
         taskName: submitTaskName.trim(),
         taskProvider,
-        options: {
+        options: definedOptions({
           body,
           idempotencyKey: submitIdempotencyKey.trim() || undefined,
-        },
-      });
+        }),
+      }));
       activeTab = 'tasks';
-      selectedTaskId = handle.id ?? null;
+      selectedTaskId = handle.id;
       submitOpen = false;
       resetSubmitForm();
       await Promise.all([

package/dist/components/Toast.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { onMount } from 'svelte';
   import { Toaster, toast as sonner, type ToasterProps } from 'svelte-sonner';
   import {
@@ -29,7 +31,7 @@
     const queue = getToastQueue();
     if (queue.length > 0) {
       for (const t of queue) {
-        const options = { duration: t.duration, id: t.key ?? t.id };
+        const options = definedOptions({ duration: t.duration, id: t.key ?? t.id });
         switch (t.type) {
           case 'success': sonner.success(t.message, options); break;
           case 'error': sonner.error(t.message, options); break;
@@ -86,7 +88,7 @@
     {#each getToasts().slice(-3) as item (item.id)}
       <UndoableNotification
         message={item.message}
-        duration={item.duration}
+        {...definedOptions({ "duration": item.duration })}
         embedded
         managedExternally
         onUndo={() => undo(item.id, item.onUndo)}

package/dist/components/TooltipButton.svelte

@@ -60,7 +60,7 @@
 <Tooltip.Root bind:open>
   <Tooltip.Trigger aria-describedby={restProps['aria-describedby']}>
     {#snippet child({ props })}
-      {@const primitiveOnclick = props.onclick as ((event: MouseEvent) => void) | undefined}
+      {@const primitiveOnclick = props['onclick'] as ((event: MouseEvent) => void) | undefined}
       {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, 'aria-describedby': props['aria-describedby'], onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex } as any}
       <Button {...buttonProps}>
         {@render children()}

package/dist/components/TreeSelect.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { SvelteSet } from 'svelte/reactivity';
   import { ChevronRight, ChevronDown, Check, X, Search, ChevronsUpDown } from '@lucide/svelte';
   import { cn } from '../utils.js';
@@ -140,10 +142,10 @@
       const matchChildren = filteredChildren && filteredChildren.length > 0;
 
       if (matchSelf || matchChildren) {
-        filtered.push({
+        filtered.push(definedOptions({
           ...node,
           children: filteredChildren ?? node.children,
-        });
+        }));
       }
     }
     return filtered;

package/dist/components/ValidatedField.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" generics="P extends Record<string, unknown>">
+  import type { Component } from 'svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import type { FieldDisplayProps } from './fieldComponentMap';
+
+  let { component: Display, resolve, input }: {
+    component: Component<P>;
+    resolve: (input: FieldDisplayProps) => { ok: true; props: P } | { ok: false };
+    input: FieldDisplayProps;
+  } = $props();
+
+  const i18n = useTranslation();
+  const result = $derived.by(() => {
+    try {
+      return resolve(input);
+    } catch {
+      // Invalid recursive values and schema failures must not reach the renderer.
+      return { ok: false } as const;
+    }
+  });
+</script>
+
+{#if result.ok}
+  <Display {...result.props} />
+{:else}
+  <span role="status" data-svadmin-invalid-field>{i18n.t('validation.invalidFormat')}</span>
+{/if}