@svadmin/ui 0.86.0 → 0.88.1

package/dist/components/ApprovalActionCard.svelte

@@ -4,6 +4,7 @@
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
   import * as Dialog from './ui/dialog/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { cn } from '../utils.js';
 
   export type ApprovalStatus = 'pending' | 'approved' | 'rejected' | 'recalled';
@@ -28,7 +29,7 @@
   }
 
   let {
-    title = 'Approval Request',
+    title,
     status = 'pending',
     applicant,
     onapprove,
@@ -39,6 +40,10 @@
     children,
   }: Props = $props();
 
+  const controlId = $props.id();
+  const i18n = useTranslation();
+  const isZh = $derived(i18n.locale === 'zh-CN');
+  const resolvedTitle = $derived(title ?? (isZh ? '审批申请' : 'Approval Request'));
   let approveDialogOpen = $state(false);
   let rejectDialogOpen = $state(false);
   let transferDialogOpen = $state(false);
@@ -47,26 +52,35 @@
   let rejectReason = $state('');
   let transferTarget = $state('');
   let isSubmitting = $state(false);
+  let errorMessage = $state('');
 
   const statusConfig = $derived.by(() => {
     switch (status) {
       case 'approved':
-        return { label: 'Approved', icon: CheckCircle2 };
+        return { label: isZh ? '已通过' : 'Approved', icon: CheckCircle2 };
       case 'rejected':
-        return { label: 'Rejected', icon: XCircle };
+        return { label: isZh ? '已驳回' : 'Rejected', icon: XCircle };
       case 'recalled':
-        return { label: 'Recalled', icon: Undo2 };
+        return { label: isZh ? '已撤回' : 'Recalled', icon: Undo2 };
       default:
-        return { label: 'Pending Approval', icon: Clock };
+        return { label: isZh ? '待审批' : 'Pending Approval', icon: Clock };
     }
   });
 
+  function failureMessage(caught: unknown): string {
+    if (caught instanceof Error && caught.message.trim()) return caught.message;
+    return isZh ? '操作失败，请检查输入后重试。' : 'Action failed. Check the input and retry.';
+  }
+
   async function handleApprove() {
     isSubmitting = true;
+    errorMessage = '';
     try {
       await onapprove?.(approveComment || undefined);
       approveDialogOpen = false;
       approveComment = '';
+    } catch (caught) {
+      errorMessage = failureMessage(caught);
     } finally {
       isSubmitting = false;
     }
@@ -75,10 +89,13 @@
   async function handleReject() {
     if (!rejectReason.trim()) return;
     isSubmitting = true;
+    errorMessage = '';
     try {
       await onreject?.(rejectReason);
       rejectDialogOpen = false;
       rejectReason = '';
+    } catch (caught) {
+      errorMessage = failureMessage(caught);
     } finally {
       isSubmitting = false;
     }
@@ -87,10 +104,13 @@
   async function handleTransfer() {
     if (!transferTarget.trim()) return;
     isSubmitting = true;
+    errorMessage = '';
     try {
       await ontransfer?.(transferTarget);
       transferDialogOpen = false;
       transferTarget = '';
+    } catch (caught) {
+      errorMessage = failureMessage(caught);
     } finally {
       isSubmitting = false;
     }
@@ -101,7 +121,7 @@
   <div class="svadmin-approval-card__header">
     <div class="svadmin-approval-card__heading">
       <div class="svadmin-approval-card__title-row">
-        <h4 class="svadmin-approval-card__title">{title}</h4>
+        <h4 class="svadmin-approval-card__title">{resolvedTitle}</h4>
         <Badge variant="outline" data-status={status}>
           <statusConfig.icon class="svadmin-approval-card__status-icon" />
           {statusConfig.label}
@@ -109,7 +129,7 @@
       </div>
       {#if applicant}
         <p class="svadmin-approval-card__applicant">
-          Submitted by <strong>{applicant.name}</strong>
+          {isZh ? '提交人：' : 'Submitted by '}<strong>{applicant.name}</strong>
           {#if applicant.department} ({applicant.department}){/if}
           {#if applicant.time} · {applicant.time}{/if}
         </p>
@@ -124,10 +144,10 @@
             size="sm"
             class="svadmin-approval-card__action"
             {disabled}
-            onclick={() => { transferDialogOpen = true; }}
+            onclick={() => { transferDialogOpen = true; errorMessage = ''; }}
           >
             <ArrowRightLeft class="svadmin-approval-card__action-icon" />
-            Transfer
+            {isZh ? '转交' : 'Transfer'}
           </Button>
         {/if}
 
@@ -137,10 +157,10 @@
             size="sm"
             class="svadmin-approval-card__action svadmin-approval-card__action--reject"
             {disabled}
-            onclick={() => { rejectDialogOpen = true; }}
+            onclick={() => { rejectDialogOpen = true; errorMessage = ''; }}
           >
             <X class="svadmin-approval-card__action-icon" />
-            Reject
+            {isZh ? '驳回' : 'Reject'}
           </Button>
         {/if}
 
@@ -149,10 +169,10 @@
             size="sm"
             class="svadmin-approval-card__action svadmin-approval-card__action--approve"
             {disabled}
-            onclick={() => { approveDialogOpen = true; }}
+            onclick={() => { approveDialogOpen = true; errorMessage = ''; }}
           >
             <Check class="svadmin-approval-card__action-icon" />
-            Approve
+            {isZh ? '通过' : 'Approve'}
           </Button>
         {/if}
       </div>
@@ -171,21 +191,22 @@
   <Dialog.Dialog bind:open={approveDialogOpen}>
     <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
-        <Dialog.DialogTitle>Confirm Approval</Dialog.DialogTitle>
+        <Dialog.DialogTitle>{isZh ? '确认通过' : 'Confirm Approval'}</Dialog.DialogTitle>
       </Dialog.DialogHeader>
       <div class="svadmin-approval-card__dialog-form">
-        <label class="svadmin-approval-card__dialog-label" for="approve_comment_input">Optional Approval Comment</label>
+        <label class="svadmin-approval-card__dialog-label" for={`${controlId}-approve-comment`}>{isZh ? '审批意见（可选）' : 'Optional Approval Comment'}</label>
         <textarea
-          id="approve_comment_input"
+          id={`${controlId}-approve-comment`}
           bind:value={approveComment}
-          placeholder="e.g. Verified and approved"
+          placeholder={isZh ? '例如：已核验，准予通过' : 'e.g. Verified and approved'}
           class="svadmin-approval-card__textarea"
         ></textarea>
+        {#if errorMessage}<p role="alert" class="svadmin-approval-card__error text-destructive">{errorMessage}</p>{/if}
       </div>
       <Dialog.DialogFooter>
-        <Button variant="outline" size="sm" onclick={() => { approveDialogOpen = false; }}>Cancel</Button>
+        <Button variant="outline" size="sm" onclick={() => { approveDialogOpen = false; errorMessage = ''; }}>{isZh ? '取消' : 'Cancel'}</Button>
         <Button size="sm" class="svadmin-approval-card__confirm svadmin-approval-card__confirm--approve" disabled={isSubmitting} onclick={handleApprove}>
-          Confirm Approval
+          {isSubmitting ? (isZh ? '处理中…' : 'Processing…') : (isZh ? '确认通过' : 'Confirm Approval')}
         </Button>
       </Dialog.DialogFooter>
     </Dialog.DialogContent>
@@ -197,22 +218,23 @@
   <Dialog.Dialog bind:open={rejectDialogOpen}>
     <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
-        <Dialog.DialogTitle class="svadmin-approval-card__reject-title">Reject Request</Dialog.DialogTitle>
+        <Dialog.DialogTitle class="svadmin-approval-card__reject-title">{isZh ? '驳回申请' : 'Reject Request'}</Dialog.DialogTitle>
       </Dialog.DialogHeader>
       <div class="svadmin-approval-card__dialog-form">
-        <label class="svadmin-approval-card__dialog-label" for="reject_reason_input">Rejection Reason (Required)</label>
+        <label class="svadmin-approval-card__dialog-label" for={`${controlId}-reject-reason`}>{isZh ? '驳回原因（必填）' : 'Rejection Reason (Required)'}</label>
         <textarea
-          id="reject_reason_input"
+          id={`${controlId}-reject-reason`}
           bind:value={rejectReason}
-          placeholder="Please explain why this request is being rejected..."
+          placeholder={isZh ? '请说明驳回原因…' : 'Please explain why this request is being rejected...'}
           class="svadmin-approval-card__textarea svadmin-approval-card__textarea--reject"
           required
         ></textarea>
+        {#if errorMessage}<p role="alert" class="svadmin-approval-card__error text-destructive">{errorMessage}</p>{/if}
       </div>
       <Dialog.DialogFooter>
-        <Button variant="outline" size="sm" onclick={() => { rejectDialogOpen = false; }}>Cancel</Button>
+        <Button variant="outline" size="sm" onclick={() => { rejectDialogOpen = false; errorMessage = ''; }}>{isZh ? '取消' : 'Cancel'}</Button>
         <Button variant="destructive" size="sm" disabled={isSubmitting || !rejectReason.trim()} onclick={handleReject}>
-          Confirm Rejection
+          {isSubmitting ? (isZh ? '处理中…' : 'Processing…') : (isZh ? '确认驳回' : 'Confirm Rejection')}
         </Button>
       </Dialog.DialogFooter>
     </Dialog.DialogContent>
@@ -224,23 +246,24 @@
   <Dialog.Dialog bind:open={transferDialogOpen}>
     <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
-        <Dialog.DialogTitle>Transfer Approval</Dialog.DialogTitle>
+        <Dialog.DialogTitle>{isZh ? '转交审批' : 'Transfer Approval'}</Dialog.DialogTitle>
       </Dialog.DialogHeader>
       <div class="svadmin-approval-card__dialog-form">
-        <label class="svadmin-approval-card__dialog-label" for="transfer_target_input">Target Approver Email / Username</label>
+        <label class="svadmin-approval-card__dialog-label" for={`${controlId}-transfer-target`}>{isZh ? '目标审批人邮箱或用户名' : 'Target Approver Email / Username'}</label>
         <input
-          id="transfer_target_input"
+          id={`${controlId}-transfer-target`}
           type="text"
           bind:value={transferTarget}
-          placeholder="e.g. manager@example.com"
+          placeholder={isZh ? '例如：manager@example.com' : 'e.g. manager@example.com'}
           class="svadmin-approval-card__input"
           required
         />
+        {#if errorMessage}<p role="alert" class="svadmin-approval-card__error text-destructive">{errorMessage}</p>{/if}
       </div>
       <Dialog.DialogFooter>
-        <Button variant="outline" size="sm" onclick={() => { transferDialogOpen = false; }}>Cancel</Button>
+        <Button variant="outline" size="sm" onclick={() => { transferDialogOpen = false; errorMessage = ''; }}>{isZh ? '取消' : 'Cancel'}</Button>
         <Button size="sm" disabled={isSubmitting || !transferTarget.trim()} onclick={handleTransfer}>
-          Transfer
+          {isSubmitting ? (isZh ? '处理中…' : 'Processing…') : (isZh ? '转交' : 'Transfer')}
         </Button>
       </Dialog.DialogFooter>
     </Dialog.DialogContent>

package/dist/components/ApprovalCenter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ChevronLeft, ChevronRight, Loader2, RefreshCw, Search } from '@lucide/svelte';
+  import { ChevronLeft, ChevronRight, RefreshCw, Search } from '@lucide/svelte';
   import { onDestroy, untrack } from 'svelte';
   import { captureAdminContext, captureAuthSession, createEnterpriseRequestContext } from '@svadmin/core';
   import {
@@ -12,6 +12,8 @@
   import { Badge } from './ui/badge/index.js';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
+  import * as Dialog from './ui/dialog/index.js';
+  import DataState from './content/DataState.svelte';
 
   type ApprovalView = 'pending' | 'history';
   interface Props {
@@ -37,6 +39,7 @@
   let comment = $state('');
   let targetId = $state('');
   let actionDialog = $state<string>();
+  let actionOpen = $state(false);
   let timer: ReturnType<typeof setTimeout> | undefined;
   let mounted = true;
   let epoch = 0;
@@ -48,6 +51,15 @@
   const activeAction = $derived(
     activeRecord?.allowedActions.find(action => action.id === actionDialog),
   );
+  const centerState = $derived(
+    loading
+      ? 'loading'
+      : error && records.length === 0
+        ? 'error'
+        : records.length === 0
+          ? (appliedSearch ? 'filtered-empty' : 'empty')
+          : 'ready',
+  );
   const normalizedPageSize = $derived(Number.isSafeInteger(pageSize) && pageSize > 0 && pageSize <= 200 ? pageSize : 20);
   const totalPages = $derived(Math.max(1, Math.ceil(total / normalizedPageSize)));
 
@@ -74,6 +86,8 @@
       records = result.data;
       total = result.total;
       selectedId = result.data.some(record => record.id === selectedId) ? selectedId : result.data[0]?.id;
+      actionDialog = undefined;
+      actionOpen = false;
     } catch (cause) {
       if (!mounted || currentEpoch !== epoch) return;
       error = cause instanceof ApprovalContractError ? 'invalid' : 'load';
@@ -95,6 +109,13 @@
     }, 250);
   }
 
+  function clearSearch(): void {
+    clearTimeout(timer);
+    search = '';
+    appliedSearch = '';
+    page = 1;
+  }
+
   function switchView(next: ApprovalView): void {
     if (view === next) return;
     view = next;
@@ -105,6 +126,7 @@
   function openAction(action: string): void {
     if (!activeRecord?.allowedActions.some(candidate => candidate.id === action)) return;
     actionDialog = action;
+    actionOpen = true;
     comment = '';
     targetId = '';
   }
@@ -139,6 +161,7 @@
         return;
       }
       actionDialog = undefined;
+      actionOpen = false;
       records = records.map(candidate => candidate.id === receipt.record.id ? receipt.record : candidate);
       selectedId = receipt.record.id;
     } catch (cause) {
@@ -166,14 +189,15 @@
       records = [];
       selectedId = undefined;
       actionDialog = undefined;
+      actionOpen = false;
       actionPending = false;
       void load();
     });
   });
 </script>
 
-<section class="svadmin-approval-center" aria-label={title ?? i18n.t('approval.title')}>
-  <header class="svadmin-approval-center__header">
+<section class="svadmin-approval-center" aria-label={title ?? i18n.t('approval.title')} data-svadmin-approval-center data-svadmin-approval-view={view} data-svadmin-approval-state={centerState}>
+  <header class="svadmin-approval-center__header" data-svadmin-approval-header>
     <div>
       <h2>{title ?? i18n.t('approval.title')}</h2>
     </div>
@@ -181,7 +205,7 @@
       <RefreshCw class={loading ? 'svadmin-approval-center__spin' : ''} />
     </Button>
   </header>
-  <div class="svadmin-approval-center__toolbar">
+  <div class="svadmin-approval-center__toolbar" data-svadmin-approval-toolbar>
     <Button type="button" aria-pressed={view === 'pending'} variant={view === 'pending' ? 'default' : 'outline'} onclick={() => switchView('pending')}>{i18n.t('approval.pending')}</Button>
     <Button type="button" aria-pressed={view === 'history'} variant={view === 'history' ? 'default' : 'outline'} onclick={() => switchView('history')}>{i18n.t('approval.history')}</Button>
     <label class="svadmin-approval-center__search">
@@ -189,15 +213,28 @@
       <Input value={search} oninput={scheduleSearch} placeholder={i18n.t('approval.search')} aria-label={i18n.t('approval.search')} />
     </label>
   </div>
-  {#if error}
+  {#if error && records.length > 0}
     <div role="alert">{i18n.t(`approval.${error}`)}</div>
   {/if}
-  <div class="svadmin-approval-center__body">
-    <div class="svadmin-approval-center__list">
+  <div class="svadmin-approval-center__body" data-svadmin-approval-body>
+    <div class="svadmin-approval-center__list" data-svadmin-approval-list>
       {#if loading}
-        <div role="status"><Loader2 class="svadmin-approval-center__spin" /> {i18n.t('common.loading')}</div>
+        <DataState state="loading" />
+      {:else if records.length === 0 && error}
+        <DataState
+          state="error"
+          title={error === 'invalid' ? i18n.t('approval.invalid') : i18n.t('approval.load')}
+          description={i18n.locale === 'zh-CN' ? '请刷新后重试。' : 'Refresh and retry.'}
+          retry={() => void load()}
+        />
       {:else if records.length === 0}
-        <div role="status">{i18n.t('approval.empty')}</div>
+        <DataState
+          state={appliedSearch ? 'filtered-empty' : 'empty'}
+          {...(appliedSearch ? {} : { title: i18n.t('approval.empty') })}
+        />
+        {#if appliedSearch}
+          <Button type="button" variant="outline" size="sm" onclick={clearSearch}>{i18n.t('common.clear')}</Button>
+        {/if}
       {:else}
         {#each records as record (record.id)}
           <button type="button" aria-pressed={record.id === selectedId} class:selected={record.id === selectedId} onclick={() => selectedId = record.id}>
@@ -207,7 +244,7 @@
         {/each}
       {/if}
     </div>
-    <div class="svadmin-approval-center__detail">
+    <div class="svadmin-approval-center__detail" data-svadmin-approval-detail>
       {#if activeRecord}
         <h3>{activeRecord.title}</h3>
         <Badge variant="outline">{activeRecord.status}</Badge>
@@ -230,7 +267,7 @@
       {/if}
     </div>
   </div>
-  <footer class="svadmin-approval-center__footer">
+  <footer class="svadmin-approval-center__footer" data-svadmin-approval-pagination>
     <Button type="button" aria-label={i18n.t('common.prev')} title={i18n.t('common.prev')} variant="outline" disabled={page <= 1 || loading} onclick={() => { page -= 1; }}>
       <ChevronLeft />
     </Button>
@@ -241,25 +278,30 @@
   </footer>
 </section>
 
-{#if actionDialog && activeRecord}
-  <div class="svadmin-approval-center__dialog" role="dialog" aria-modal="true" aria-label={activeAction?.label ?? i18n.t('common.confirmAction')}>
-    <h3>{activeAction?.label}</h3>
-    <label>{i18n.t('approval.comment')}
-      <textarea bind:value={comment} required={activeAction?.commentRequired} maxlength={10000}></textarea>
-    </label>
-    {#if activeAction?.targetRequired}
-      <label>{i18n.t('approval.target')}
-        <Input bind:value={targetId} required maxlength={200} />
+<Dialog.Root bind:open={actionOpen}>
+  {#if actionDialog && activeRecord}
+    <Dialog.Content class="svadmin-approval-center__dialog" aria-label={activeAction?.label ?? i18n.t('common.confirmAction')}>
+      <Dialog.Header>
+        <Dialog.Title>{activeAction?.label}</Dialog.Title>
+        <Dialog.Description>{i18n.t('approval.comment')}</Dialog.Description>
+      </Dialog.Header>
+      <label>{i18n.t('approval.comment')}
+        <textarea bind:value={comment} required={activeAction?.commentRequired} maxlength={10000}></textarea>
       </label>
-    {/if}
-    <div>
-      <Button type="button" variant="outline" onclick={() => actionDialog = undefined}>{i18n.t('common.cancel')}</Button>
-      <Button type="button" disabled={actionPending || !activeAction || !canSubmit(activeAction)} onclick={() => void submitAction()}>
-        {actionPending ? i18n.t('common.processing') : i18n.t('common.confirm')}
-      </Button>
-    </div>
-  </div>
-{/if}
+      {#if activeAction?.targetRequired}
+        <label>{i18n.t('approval.target')}
+          <Input bind:value={targetId} required maxlength={200} />
+        </label>
+      {/if}
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={() => { actionOpen = false; actionDialog = undefined; }}>{i18n.t('common.cancel')}</Button>
+        <Button type="button" disabled={actionPending || !activeAction || !canSubmit(activeAction)} onclick={() => void submitAction()}>
+          {actionPending ? i18n.t('common.processing') : i18n.t('common.confirm')}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Content>
+  {/if}
+</Dialog.Root>
 
 <style>
   .svadmin-approval-center { display: grid; gap: 1rem; min-width: 0; }
@@ -275,8 +317,8 @@
   .svadmin-approval-center__list span { color: var(--muted-foreground); font-size: 0.875rem; }
   .svadmin-approval-center__detail { display: grid; gap: 0.75rem; padding: 1rem; min-width: 0; }
   .svadmin-approval-center__detail ol, .svadmin-approval-center__detail ul { margin: 0; padding-inline-start: 1.25rem; }
-  .svadmin-approval-center__dialog { position: fixed; inset: 20% auto auto 50%; z-index: 20; display: grid; gap: 1rem; width: min(28rem, calc(100vw - 2rem)); transform: translateX(-50%); padding: 1rem; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
-  .svadmin-approval-center__dialog textarea { min-height: 6rem; width: 100%; }
+  :global(.svadmin-approval-center__dialog) { display: grid; gap: 1rem; width: min(28rem, calc(100vw - 2rem)); }
+  :global(.svadmin-approval-center__dialog textarea) { min-height: 6rem; width: 100%; }
   :global(.svadmin-approval-center__spin) { animation: svadmin-approval-spin 1s linear infinite; }
   @keyframes svadmin-approval-spin { to { transform: rotate(360deg); } }
   @media (max-width: 640px) { .svadmin-approval-center__body { grid-template-columns: 1fr; } .svadmin-approval-center__list { border-inline-end: 0; border-block-end: 1px solid var(--border); max-height: 15rem; overflow: auto; } }

package/dist/components/AuthPageShell.svelte

@@ -12,6 +12,9 @@
   }
 
   let { brand, title, description, children, footer, brandMark }: Props = $props();
+  const generatedId = $props.id();
+  const titleId = `svadmin-auth-title-${generatedId}`;
+  const descriptionId = `${titleId}-description`;
 </script>
 
 <div class="svadmin-u-f3c543ad5fe9 svadmin-u-793346c7362c svadmin-u-967d113a1451 svadmin-u-5d17652eacdf" data-svadmin-auth-page>
@@ -29,8 +32,16 @@
         {#if brandMark}{@render brandMark()}{:else}<span data-svadmin-auth-default-mark><SvadminLogo size={36} /></span>{/if}
         <span class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{brand}</span>
       </div>
-      <section class="svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-c07e54fd1439 svadmin-u-438b2237b8d6 svadmin-u-e299d4635ea7" data-svadmin-auth-card>
-        <header class="svadmin-u-b6777c6db914 svadmin-u-6f7e013d6499"><h1 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-e9fadafbd4a2 svadmin-u-d4108abe6359">{title}</h1>{#if description}<p class="svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{description}</p>{/if}</header>
+      <section
+        class="svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-c07e54fd1439 svadmin-u-438b2237b8d6 svadmin-u-e299d4635ea7"
+        data-svadmin-auth-card
+        aria-labelledby={titleId}
+        aria-describedby={description ? descriptionId : undefined}
+      >
+        <header class="svadmin-u-b6777c6db914 svadmin-u-6f7e013d6499">
+          <h1 id={titleId} class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-e9fadafbd4a2 svadmin-u-d4108abe6359">{title}</h1>
+          {#if description}<p id={descriptionId} class="svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{description}</p>{/if}
+        </header>
         {@render children()}
       </section>
       {#if footer}<div class="svadmin-u-ca6bf63030aa" data-svadmin-auth-footer>{@render footer()}</div>{/if}

package/dist/components/AutoTable.svelte

@@ -790,8 +790,18 @@
       detailOpenedInHistory = false;
       localDetailId = undefined;
       quickEditId = undefined;
-      listState.cancelSearch();
-      if (previousTableScope.resourceName !== scope.resourceName) resetToDefaultListState();
+      const queryScopeChanged = previousTableScope.contract !== scope.contract
+        || previousTableScope.resourceName !== scope.resourceName
+        || previousTableScope.provider !== scope.provider
+        || previousTableScope.meta !== scope.meta
+        || previousTableScope.tenant !== scope.tenant
+        || previousTableScope.auth !== scope.auth
+        || previousTableScope.router !== scope.router
+        || previousTableScope.permissionProvider !== scope.permissionProvider;
+      if (queryScopeChanged) {
+        listState.cancelSearch();
+        if (previousTableScope.resourceName !== scope.resourceName) resetToDefaultListState();
+      }
     }
     previousTableScope = scope;
   });
@@ -1044,7 +1054,7 @@
 
 {#snippet defaultEmptyState()}
   {@const hasCriteria = !!(searchText.trim() || appliedSearchText.trim() || activeFilterCount > 0)}
-  <DataState state="empty" description={i18n.t(hasCriteria ? 'empty.description' : 'common.noDataHint')}>
+  <DataState state={hasCriteria ? 'filtered-empty' : 'empty'} description={i18n.t(hasCriteria ? 'empty.description' : 'common.noDataHint')}>
     {#snippet action()}
       {#if hasCriteria}
         <Button variant="outline" size="sm" onclick={clearFilters}>

package/dist/components/CreatePage.svelte

@@ -17,6 +17,7 @@
     title?: string;
     columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
+    formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     onSuccess?: () => void;
     class?: string;
   }
@@ -27,6 +28,7 @@
     title,
     columns = 1,
     headerActions,
+    formActions,
     onSuccess,
     class: className = '',
   }: Props = $props();
@@ -37,26 +39,31 @@
   const pageTitle = $derived(title ?? `${i18n.t('common.create')}${resource.label}`);
 </script>
 
-<div class="svadmin-u-b3542e058833 {className}">
-  <PageHeader
-    title={pageTitle}
-    onBack={() => navigateGuard(() => adminContext.navigate(`/${resourceName}`))}
-  >
+<div class="svadmin-u-b3542e058833 {className}" data-svadmin-crud-page="create" data-svadmin-resource={resourceName}>
+  <div data-svadmin-crud-page-header>
+    <PageHeader
+      title={pageTitle}
+      onBack={() => navigateGuard(() => adminContext.navigate(`/${resourceName}`))}
+    >
     {#snippet actions()}
       <ListButton resource={resourceName} hideText onBeforeNavigate={navigateGuard} />
       {#if headerActions}
         {@render headerActions()}
       {/if}
     {/snippet}
-  </PageHeader>
+    </PageHeader>
+  </div>
 
-  <AutoForm
-    {rendering}
-    {resourceName}
-    mode="create"
-    {columns}
-    showHeader={false}
-    onNavigationGuardReady={(guard) => navigateGuard = guard}
-    {...definedOptions({ "onSuccess": onSuccess })}
-  />
+  <div data-svadmin-crud-page-form>
+    <AutoForm
+      {rendering}
+      {resourceName}
+      mode="create"
+      {columns}
+      showHeader={false}
+      {...definedOptions({ formActions })}
+      onNavigationGuardReady={(guard) => navigateGuard = guard}
+      {...definedOptions({ "onSuccess": onSuccess })}
+    />
+  </div>
 </div>

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

@@ -6,6 +6,10 @@ interface Props {
     title?: string;
     columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
+    formActions?: Snippet<[{
+        isLoading: boolean;
+        onSubmit: () => void;
+    }]>;
     onSuccess?: () => void;
     class?: string;
 }

package/dist/components/EditPage.svelte

@@ -23,6 +23,7 @@
     columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;
+    formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     onSuccess?: () => void;
     class?: string;
   }
@@ -35,6 +36,7 @@
     columns = 1,
     canDelete,
     headerActions,
+    formActions,
     onSuccess,
     class: className = '',
   }: Props = $props();
@@ -46,11 +48,12 @@
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
 </script>
 
-<div class="svadmin-u-b3542e058833 {className}">
-  <PageHeader
-    title={pageTitle}
-    onBack={() => navigateGuard(() => navigation.list(resourceName))}
-  >
+<div class="svadmin-u-b3542e058833 {className}" data-svadmin-crud-page="edit" data-svadmin-resource={resourceName} data-svadmin-record-id={id}>
+  <div data-svadmin-crud-page-header>
+    <PageHeader
+      title={pageTitle}
+      onBack={() => navigateGuard(() => navigation.list(resourceName))}
+    >
     {#snippet actions()}
       <ListButton resource={resourceName} hideText onBeforeNavigate={navigateGuard} />
       <ShowButton resource={resourceName} recordItemId={id} hideText onBeforeNavigate={navigateGuard} />
@@ -62,16 +65,20 @@
         {@render headerActions()}
       {/if}
     {/snippet}
-  </PageHeader>
+    </PageHeader>
+  </div>
 
-  <AutoForm
-    {rendering}
-    {resourceName}
-    mode="edit"
-    {id}
-    {columns}
-    showHeader={false}
-    onNavigationGuardReady={(guard) => navigateGuard = guard}
-    {...definedOptions({ "onSuccess": onSuccess })}
-  />
+  <div data-svadmin-crud-page-form>
+    <AutoForm
+      {rendering}
+      {resourceName}
+      mode="edit"
+      {id}
+      {columns}
+      showHeader={false}
+      {...definedOptions({ formActions })}
+      onNavigationGuardReady={(guard) => navigateGuard = guard}
+      {...definedOptions({ "onSuccess": onSuccess })}
+    />
+  </div>
 </div>