@svadmin/ui 0.70.0 → 0.72.0

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

@@ -0,0 +1,35 @@
+import type { Component } from 'svelte';
+import type { FieldDisplayProps } from './fieldComponentMap';
+declare function $$render<P extends Record<string, unknown>>(): {
+    props: {
+        component: Component<P>;
+        resolve: (input: FieldDisplayProps) => {
+            ok: true;
+            props: P;
+        } | {
+            ok: false;
+        };
+        input: FieldDisplayProps;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<P extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<P>>['props'];
+    events(): ReturnType<typeof $$render<P>>['events'];
+    slots(): ReturnType<typeof $$render<P>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <P extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<P>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<P>['props']>, ReturnType<__sveltets_Render<P>['events']>, ReturnType<__sveltets_Render<P>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<P>['bindings']>;
+    } & ReturnType<__sveltets_Render<P>['exports']>;
+    <P extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<P>['props']> & {}): ReturnType<__sveltets_Render<P>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ValidatedField: $$IsomorphicComponent;
+type ValidatedField<P extends Record<string, unknown>> = InstanceType<typeof ValidatedField<P>>;
+export default ValidatedField;

package/dist/components/account/ImportMembersPage.svelte

@@ -40,7 +40,7 @@
   }
 
   function handleFileSelect(e: Event) {
-    const file = (e.target as HTMLInputElement).files?.[0];
+    const file = e.target instanceof HTMLInputElement ? e.target.files?.[0] : undefined;
     if (file) processFile(file);
   }
 
@@ -162,7 +162,7 @@
         {#each importOptions as option, i (option.key)}
           <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-0c3bc98565dd">
             <Label for="import-option-{i}" class="svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6 svadmin-u-d4108abe6359">{i18n.t(option.key)}</Label>
-            <Switch id="import-option-{i}" bind:checked={optionStates[i]} />
+            <Switch id="import-option-{i}" checked={optionStates[i] ?? option.checked} onCheckedChange={(checked) => { optionStates[i] = checked; }} />
           </div>
         {/each}
         <div class="svadmin-u-60fbb7713999 svadmin-u-77c08e015d14 svadmin-u-b950dda299d3 svadmin-u-173fa8f06789">

package/dist/components/account/SecurityLogPage.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { useTranslation } from '@svadmin/core/i18n';
   import { Download } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
@@ -15,7 +17,7 @@
 </script>
 
 <ContentPageShell pageId="account-security-log" width="wide">
-  <ContentPageHeader title={i18n.t('account.securityLog')} description={i18n.t('account.securityLogDescription')} actions={undefined} />
+  <ContentPageHeader title={i18n.t('account.securityLog')} description={i18n.t('account.securityLogDescription')} {...definedOptions({ "actions": undefined })} />
   <div class="svadmin-u-60fbb7713999 svadmin-u-77c08e015d14"><Button variant="outline" size="sm"><Download class="svadmin-u-783b0d9d1e2c" />{i18n.t('common.export')}</Button></div>
   <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
   <SecurityEventTable events={filtered} />

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import {
     captureAdminContext,
     notifyWithProvider,
@@ -167,13 +169,13 @@
     testing = true;
     try {
       const selectedProvider = target ?? identityProviders[0];
-      const result = await provider.testIdentityProvider({
+      const result = await provider.testIdentityProvider(definedOptions({
         id: selectedProvider?.id,
         protocol: selectedProvider?.protocol,
         metadataUrl: target
           ? target.metadataUrl
           : (metadataUrl.trim() || selectedProvider?.metadataUrl),
-      }, context);
+      }), context);
       if (currentRequest !== requestId) return;
       notifyWithProvider({
         type: result.success ? 'success' : 'error',
@@ -189,14 +191,14 @@
     }
   }
 
-  const displayEvents = $derived(events.map((event): SecurityEvent => ({
+  const displayEvents = $derived(events.map((event): SecurityEvent => (definedOptions({
     id: event.id,
     event: event.event,
     actor: event.actor,
     location: event.location,
     createdAt: event.createdAt instanceof Date ? event.createdAt.toLocaleString() : String(event.createdAt),
     severity: event.severity === 'critical' ? 'danger' : (event.severity ?? 'info'),
-  })));
+  }))));
 </script>
 
 {#snippet auditControl()}
@@ -242,7 +244,7 @@
         <DataState state="empty" title={isZh ? '尚未配置身份源' : 'No identity provider configured'} description={isZh ? '请在后端 IdentityGovernanceProvider 中创建并验证身份源。' : 'Create and verify an identity provider through the backend IdentityGovernanceProvider.'} />
       {:else}
         {#each identityProviders as connection (connection.id)}
-          <IntegrationCard integration={{ id: connection.id, name: connection.name, account: connection.protocol.toUpperCase(), connected: connection.status === 'connected', description: connection.domain ?? connection.metadataUrl }} onconnect={() => testConnection(connection)} />
+          <IntegrationCard integration={definedOptions({ id: connection.id, name: connection.name, account: connection.protocol.toUpperCase(), connected: connection.status === 'connected', description: connection.domain ?? connection.metadataUrl })} onconnect={() => testConnection(connection)} />
         {/each}
       {/if}
     </section>

package/dist/components/account/TeamMembersPage.svelte

@@ -17,7 +17,7 @@
   let inviteStatus = $state('');
   let members = $state<MemberSummary[]>(referenceDemoData.members.map((member) => ({ ...member, status: member.status === 'active' ? 'success' : member.status === 'invited' ? 'warning' : 'neutral' })));
   const filtered = $derived(query ? members.filter((member) => `${member.name} ${member.email} ${member.department}`.toLowerCase().includes(query.toLowerCase())) : members);
-  function sendInvite() { const email = inviteEmail.trim(); if (!email) return; members = [...members, { id: `invite-${Date.now()}`, name: email.split('@')[0], email, role: 'Viewer', department: 'Pending assignment', status: 'warning' }]; inviteStatus = email; inviteEmail = ''; }
+  function sendInvite() { const email = inviteEmail.trim(); if (!email) return; members = [...members, { id: `invite-${Date.now()}`, name: email.replace(/@.*$/, ''), email, role: 'Viewer', department: 'Pending assignment', status: 'warning' }]; inviteStatus = email; inviteEmail = ''; }
 </script>
 
 <ContentPageShell pageId="account-team-members" width="wide">

package/dist/components/buttons/CloneButton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
   import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
@@ -16,7 +18,7 @@
     hideText = false,
     accessControl = { enabled: true, hideIfUnauthorized: true },
     class: className = '',
-  } = $props<{
+  }: {
     resource: string;
     recordItemId: string | number;
     label?: string;
@@ -24,7 +26,7 @@
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;
-  }>();
+  } = $props();
 
   const nav = useNavigation();
   const resourceDefinition = $derived.by(() => {
@@ -34,13 +36,13 @@
       return null;
     }
   });
-  const can = useCan(() => ({
+  const can = useCan(() => (definedOptions({
     resource,
     action: 'create',
     params: withRecordId(accessControl?.params, recordItemId),
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
-  }));
+  })));
   const displayText = $derived(label ?? i18n.t('common.clone'));
   const hidden = $derived(resourceDefinition?.canCreate === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>

package/dist/components/buttons/DeleteButton.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { definedOptions, definedReactiveOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
-  import { getResource, useDelete, useCan, useTranslation } from '@svadmin/core';
+  import { captureAdminContext, captureAuthSession, useResourceContract, useDelete, useCan, useTranslation, UndoError } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Trash2 } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
-  import { withRecordId } from './access-control';
 
   const i18n = useTranslation();
 
@@ -17,8 +18,10 @@
     accessControl = { enabled: true, hideIfUnauthorized: true },
     onSuccess,
     undoable = false,
+    undoableTimeout,
+    variables,
     class: className = '',
-  } = $props<{
+  }: {
     resource: string;
     recordItemId: string | number;
     label?: string;
@@ -27,59 +30,119 @@
     accessControl?: ButtonAccessControl;
     onSuccess?: () => void;
     undoable?: boolean;
+    undoableTimeout?: number;
+    variables?: unknown;
     class?: string;
-  }>();
+  } = $props();
 
-  const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
-  const resourceDefinition = $derived.by(() => {
-    try {
-      return getResource(resource);
-    } catch {
-      return null;
-    }
-  });
-  const can = useCan(() => ({
+  const binding = useResourceContract(() => resource);
+  const context = captureAdminContext();
+  const resourceDefinition = $derived(context.getResource(resource));
+  const can = useCan(() => (definedOptions({
     resource,
     action: 'delete',
-    params: withRecordId(accessControl?.params, recordItemId),
+    id: recordItemId,
+    params: accessControl?.params,
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
-  }));
+  })));
   const displayText = $derived(label ?? i18n.t('common.delete'));
-  const hidden = $derived(resourceDefinition?.canDelete === false || (accessControl?.hideIfUnauthorized && !can.allowed));
+  const session = $derived(captureAuthSession(context.authProvider));
+  const policyAllowed = $derived(accessControl.enabled === false || can.allowed === true);
+  const allowed = $derived(session.available && policyAllowed);
+  const hidden = $derived(resourceDefinition.canDelete === false || (accessControl.hideIfUnauthorized && !allowed));
+  const deleteMut = useDelete(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get id() { return recordItemId; },
+    get enabled() { return policyAllowed && resourceDefinition.canDelete !== false; },
+    get undoable() { return undoable; },
+    get undoableTimeout() { return undoableTimeout; },
+  }));
   let confirming = $state(false);
-
-  async function handleDelete() {
-    if (!confirming) {
-      confirming = true;
-      return;
+  let pending = $state(false);
+  let failed = $state(false);
+  const scope = $derived({
+    contract: binding.resource, id: recordItemId, variables,
+    provider: context.providers?.[binding.dataProviderName],
+    tenant: context.tenantCacheKey?.__svadminTenant,
+    meta: binding.meta, allowed, hidden, auth: context.authProvider, session,
+  });
+  let confirmationScope = $state.raw<typeof scope>();
+  let previousScope: typeof scope | undefined;
+  let active: object | undefined;
+  $effect(() => {
+    if (previousScope !== scope) {
+      // The hook owns session retirement; do not cancel its own checked logout delegate.
+      if (active && previousScope?.session.isCurrent()) deleteMut.mutation.reset();
+      previousScope = scope;
+      active = undefined;
+      confirming = false;
+      confirmationScope = undefined;
+      pending = false;
+      failed = false;
     }
+  });
+  $effect(() => () => { active = undefined; });
+
+  function beginConfirmation() {
+    if (pending || !allowed || hidden || !session.isCurrent()) return;
+    confirmationScope = scope;
+    confirming = true;
+  }
+
+  const confirmDelete = $derived.by(() => {
+    const captured = scope;
+    return () => handleDelete(captured);
+  });
+  async function handleDelete(capturedScope: typeof scope) {
+    if (pending || !allowed || hidden || !capturedScope.session.isCurrent() ||
+      capturedScope !== scope || !confirming || confirmationScope !== capturedScope) return;
+    const token = {};
+    const success = onSuccess;
+    previousScope = capturedScope;
+    active = token;
     confirming = false;
-    await deleteMut.mutation.mutateAsync({ id: recordItemId, resource });
-    onSuccess?.();
+    confirmationScope = undefined;
+    pending = true;
+    failed = false;
+    try {
+      await deleteMut.mutation.mutateAsync(definedOptions({
+        variables, dataProviderName: binding.dataProviderName,
+      }));
+      if (active === token && scope === capturedScope && capturedScope.session.isCurrent()) success?.();
+    } catch (error) {
+      if (!(error instanceof UndoError) && active === token && scope === capturedScope && capturedScope.session.isCurrent()) failed = true;
+    } finally {
+      if (active === token && scope === capturedScope && capturedScope.session.isCurrent()) {
+        active = undefined;
+        pending = false;
+      }
+    }
   }
 
-  function cancel() { confirming = false; }
+  function cancel() { confirming = false; confirmationScope = undefined; }
 </script>
 
 {#if !hidden}
-  {#if confirming}
+  {#if confirming && confirmationScope === scope && session.isCurrent()}
     <div class="svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421">
-      <Button variant="destructive" size="sm" onclick={handleDelete}>
+      <Button type="button" variant="destructive" size="sm" disabled={pending || !allowed} onclick={confirmDelete}>
         {i18n.t('common.confirm')}
       </Button>
-      <Button variant="ghost" size="sm" onclick={cancel}>
+      <Button type="button" variant="ghost" size="sm" disabled={pending} onclick={cancel}>
         {i18n.t('common.cancel')}
       </Button>
     </div>
   {:else}
     <Button
+      type="button"
       variant="ghost"
       size={hideText ? 'icon' : 'sm'}
       class="svadmin-u-811148b13d1e svadmin-u-51e95020d6f2 {className}"
       aria-label={hideText ? displayText : undefined}
-      disabled={!can.allowed}
-      onclick={handleDelete}
+      disabled={pending || !allowed}
+      aria-busy={pending}
+      onclick={beginConfirmation}
     >
       <Trash2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
       {#if !hideText}
@@ -93,4 +156,7 @@
       {/if}
     </Button>
   {/if}
+  {#if failed}
+    <p role="alert">{i18n.t('common.error')}</p>
+  {/if}
 {/if}

package/dist/components/buttons/DeleteButton.svelte.d.ts

@@ -9,6 +9,8 @@ type $$ComponentProps = {
     accessControl?: ButtonAccessControl;
     onSuccess?: () => void;
     undoable?: boolean;
+    undoableTimeout?: number;
+    variables?: unknown;
     class?: string;
 };
 declare const DeleteButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/EditButton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
   import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
@@ -16,7 +18,7 @@
     hideText = false,
     accessControl = { enabled: true, hideIfUnauthorized: true },
     class: className = '',
-  } = $props<{
+  }: {
     resource: string;
     recordItemId: string | number;
     label?: string;
@@ -24,7 +26,7 @@
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
     class?: string;
-  }>();
+  } = $props();
 
   const nav = useNavigation();
   const resourceDefinition = $derived.by(() => {
@@ -34,13 +36,13 @@
       return null;
     }
   });
-  const can = useCan(() => ({
+  const can = useCan(() => (definedOptions({
     resource,
     action: 'edit',
     params: withRecordId(accessControl?.params, recordItemId),
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
-  }));
+  })));
   const displayText = $derived(label ?? i18n.t('common.edit'));
   const hidden = $derived(resourceDefinition?.canEdit === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>

package/dist/components/buttons/ExportButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useExport, useCan, useTranslation } from '@svadmin/core';
+  import { useCan, useTranslation, useExport, useResourceContract } from '@svadmin/core';
+  import { definedReactiveOptions } from '@svadmin/core/options';
   import { Button } from '../ui/button/index.js';
   import { Download } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -23,7 +24,12 @@
     class?: string;
   }>();
 
-  const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
+  const binding = useResourceContract(() => resource);
+  const exporter = useExport(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+    get meta() { return binding.meta; },
+  }));
   const can = useCan(() => ({
     resource,
     action: 'export',
@@ -33,6 +39,14 @@
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.export'));
+
+  async function exportRecords() {
+    if (!can.allowed || exporter.isLoading) return;
+    try { await exporter.triggerExport(); }
+    catch {
+      // The hook exposes a sanitized error; stale-scope cancellations remain silent.
+    }
+  }
 </script>
 
 {#if !hidden}
@@ -41,8 +55,9 @@
     size={hideText ? 'icon' : 'sm'}
     class={className}
     aria-label={hideText ? displayText : undefined}
-    disabled={isLoading || !can.allowed}
-    onclick={triggerExport}
+    disabled={exporter.isLoading || !can.allowed}
+    aria-busy={exporter.isLoading}
+    onclick={exportRecords}
   >
     <Download class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
     {#if !hideText}
@@ -55,4 +70,7 @@
       </span>
     {/if}
   </Button>
+  {#if exporter.error}
+    <p role="alert">{i18n.t('common.error')}</p>
+  {/if}
 {/if}

package/dist/components/buttons/ImportButton.svelte

@@ -1,76 +1,118 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useImport, useCan, useTranslation } from '@svadmin/core';
+  import { captureAdminContext, captureAuthSession, useCan, useTranslation, useImport, useResourceContract,
+    type ImportResult, type ContractSchemas } from '@svadmin/core';
+  import { definedOptions, definedReactiveOptions } from '@svadmin/core/options';
   import { Button } from '../ui/button/index.js';
   import { Upload } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
 
   const i18n = useTranslation();
 
-  let {
-    resource,
-    label,
-    children,
-    hideText = false,
-    onFinish,
-    accessControl = { enabled: true, hideIfUnauthorized: true },
-    class: className = '',
-  } = $props<{
+  interface Props {
     resource: string;
     label?: string;
     children?: Snippet;
     hideText?: boolean;
-    onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
+    onFinish?: (result: ImportResult<ContractSchemas>) => void | Promise<void>;
+    mapData?: (row: Record<string, unknown>) => unknown;
     accessControl?: ButtonAccessControl;
     class?: string;
-  }>();
+  }
+  let {
+    resource, label, children, hideText = false, onFinish, mapData,
+    accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '',
+  }: Props = $props();
 
   let fileInput: HTMLInputElement | undefined = $state();
 
-  const importHook = useImport({
-    get resource() { return resource; },
-    onFinish: (result) => onFinish?.(result),
-  });
-
-  const can = useCan(() => ({
+  const context = captureAdminContext();
+  const binding = useResourceContract(() => resource);
+  const can = useCan(() => definedOptions({
     resource,
     action: 'import',
     params: accessControl?.params,
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true },
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const session = $derived(captureAuthSession(context.authProvider));
+  const policyAllowed = $derived(accessControl.enabled === false || can.allowed === true);
+  const allowed = $derived(policyAllowed && session.available);
+  const canCreate = $derived(context.getResource(resource).canCreate !== false);
+  const hidden = $derived(!canCreate ||
+    (accessControl.hideIfUnauthorized && !allowed));
+  const importHook = useImport(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+    get enabled() { return policyAllowed && canCreate; },
+    get onFinish() { return onFinish; },
+    get mapData() { return mapData; },
+  }));
+  const scope = $derived({
+    contract: binding.resource, provider: context.providers?.[binding.dataProviderName],
+    tenant: context.tenantCacheKey?.__svadminTenant, meta: binding.meta, allowed, hidden,
+    auth: context.authProvider, router: context.routerProvider, session,
+  });
+  let mounted = true;
+  let picker: { scope: typeof scope; input: HTMLInputElement } | undefined;
+  let selection: object | undefined;
+  const currentScope = (origin: typeof scope) => mounted && scope === origin && origin.session.isCurrent();
+  $effect.pre(() => { void scope; picker = undefined; selection = undefined; });
+  $effect(() => () => { mounted = false; picker = undefined; selection = undefined; });
 
-  function triggerImport() {
-    fileInput?.click();
-  }
+  const triggerImport = $derived.by(() => {
+    const origin = scope;
+    return () => {
+      if (!currentScope(origin) || !allowed || hidden || importHook.isLoading || !fileInput) return;
+      picker = { scope: origin, input: fileInput };
+      fileInput.click();
+    };
+  });
 
-  function handleFileChange(e: Event) {
-    const input = e.target as HTMLInputElement;
-    const file = input.files?.[0];
-    if (file) {
-      importHook.handleChange({ file });
-      input.value = ''; // reset for re-import
-    }
-  }
+  const handleFileChange = $derived.by(() => {
+    const origin = scope;
+    return async (event: Event) => {
+      const input = event.currentTarget;
+      if (!(input instanceof HTMLInputElement) || !currentScope(origin) || picker?.scope !== origin ||
+        picker.input !== input || !allowed || hidden || importHook.isLoading) return;
+      const token = {};
+      selection = token;
+      picker = undefined;
+      try {
+        const file = input.files?.[0];
+        if (file) await importHook.handleChange({ file });
+      } catch {
+        // The hook exposes a sanitized error; event handlers must not reject globally.
+      } finally {
+        if (currentScope(origin) && selection === token && fileInput === input) {
+          input.value = '';
+          selection = undefined;
+        }
+      }
+    };
+  });
 
   const displayText = $derived(label ?? i18n.t('common.import'));
 </script>
 
 {#if !hidden}
-  <input
-    type="file"
-    accept={importHook.inputProps.accept}
-    class="svadmin-u-99d72c7fc3e2"
-    bind:this={fileInput}
-    onchange={handleFileChange}
-  />
+  {#key scope}
+    <input
+      type="file"
+      accept={importHook.inputProps.accept}
+      class="svadmin-u-99d72c7fc3e2"
+      bind:this={fileInput}
+      onchange={handleFileChange}
+    />
+  {/key}
   <Button
+    type="button"
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
     aria-label={hideText ? displayText : undefined}
-    disabled={importHook.isLoading || !can.allowed}
+    disabled={importHook.isLoading || !allowed}
+    aria-busy={importHook.isLoading}
     onclick={triggerImport}
   >
     <Upload class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
@@ -84,4 +126,7 @@
       </span>
     {/if}
   </Button>
+  {#if importHook.error}
+    <p role="alert">{i18n.t('common.operationFailed')}</p>
+  {/if}
 {/if}

package/dist/components/buttons/ImportButton.svelte.d.ts

@@ -1,20 +1,16 @@
 import type { Snippet } from 'svelte';
+import { type ImportResult, type ContractSchemas } from '@svadmin/core';
 import type { ButtonAccessControl } from './access-control';
-type $$ComponentProps = {
+interface Props {
     resource: string;
     label?: string;
     children?: Snippet;
     hideText?: boolean;
-    onFinish?: (result: {
-        succeeded: unknown[];
-        errored: {
-            request: unknown;
-            error: unknown;
-        }[];
-    }) => void;
+    onFinish?: (result: ImportResult<ContractSchemas>) => void | Promise<void>;
+    mapData?: (row: Record<string, unknown>) => unknown;
     accessControl?: ButtonAccessControl;
     class?: string;
-};
-declare const ImportButton: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const ImportButton: import("svelte").Component<Props, {}, "">;
 type ImportButton = ReturnType<typeof ImportButton>;
 export default ImportButton;