@svadmin/ui 0.85.0 → 0.88.0

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/AutoForm.svelte

@@ -29,7 +29,6 @@
     rendering?: ResourceRendering | undefined;
     id?: string | number;
     mode?: 'create' | 'edit' | 'clone' | 'show';
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     showHeader?: boolean;
     fieldRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; onchange: (v: unknown) => void }]>;
@@ -47,7 +46,6 @@
     rendering,
     id,
     mode = 'create',
-    density = 'comfortable',
     columns = 1,
     showHeader = true,
     fieldRenderer,
@@ -64,7 +62,6 @@
   const binding = useResourceContract(() => resourceName);
   const activeRendering = $derived(bindResourceRendering(rendering, binding.resource));
   const isReadonly = $derived(mode === 'show');
-  const isCompact = $derived(density === 'compact');
   const instanceId = $props.id();
 
   // ─── Resource metadata ────────────────────────────────────────────
@@ -315,7 +312,7 @@
   });
 </script>
 
-<div class={isCompact ? 'svadmin-u-3e7ce58d64fa' : 'svadmin-u-b3542e058833'} data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'form' : undefined}>
+<div class="svadmin-u-b3542e058833" data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'form' : undefined}>
   {#if showHeader}
     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-0c3bc98565dd">
       <TooltipButton
@@ -378,11 +375,11 @@
         {#each groups as group, _i (_i)}
           <Card.Root class="svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
             {#if group.name}
-              <Card.Header class={isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12' : ''}>
+              <Card.Header>
                 <Card.Title class="svadmin-u-42536e69e639">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class={isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-9fcd8a13827e svadmin-u-9335c39f6eff' : 'svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-9fcd8a13827e svadmin-u-050494726fba svadmin-u-9335c39f6eff'}>
+            <Card.Content class="svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-9fcd8a13827e svadmin-u-050494726fba svadmin-u-9335c39f6eff">
               <div class={gridClass}>
                 {#each group.fields as field (field.key)}
                   <div data-svadmin-field-key={field.key} class={cn(columns > 1 && isFullWidthField(field) && 'svadmin-u-2c955d1b45df', !!form.errors[field.key] && 'svadmin-u-ee1a5af3aa10')}>
@@ -393,7 +390,6 @@
                         {field}
                         value={renderedDraft.values[field.key]}
                         onchange={fieldChange(field.key)}
-                        {density}
                         invalid={!!form.errors[field.key]}
                         {...definedOptions({ "errorId": form.errors[field.key] ? fieldErrorId(field.key) : undefined })}
                         disabled={isReadonly}
@@ -410,8 +406,8 @@
         {/each}
       {:else}
         <Card.Root class="svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
-          <Card.Content class={isCompact ? 'svadmin-u-8e63407b5ceb' : 'svadmin-u-f0faeb26d656 svadmin-u-52be28846b5f svadmin-u-9fcd8a13827e svadmin-u-7a9aabfcd059 svadmin-u-0a58453f3755 svadmin-u-050494726fba'}>
-              <div class={gridClass} data-svadmin-form-grid data-columns={columns} data-density={density}>
+          <Card.Content class="svadmin-u-f0faeb26d656 svadmin-u-52be28846b5f svadmin-u-9fcd8a13827e svadmin-u-7a9aabfcd059 svadmin-u-0a58453f3755 svadmin-u-050494726fba">
+              <div class={gridClass} data-svadmin-form-grid data-columns={columns}>
               {#each formFields as field (field.key)}
                 <div data-svadmin-field-key={field.key} class={cn(columns > 1 && isFullWidthField(field) && 'svadmin-u-2c955d1b45df', !!form.errors[field.key] && 'svadmin-u-ee1a5af3aa10')}>
                   {#if fieldRenderer}
@@ -421,7 +417,6 @@
                     {field}
                     value={renderedDraft.values[field.key]}
                     onchange={fieldChange(field.key)}
-                    {density}
                     invalid={!!form.errors[field.key]}
                       {...definedOptions({ "errorId": form.errors[field.key] ? fieldErrorId(field.key) : undefined })}
                       disabled={isReadonly}
@@ -441,7 +436,7 @@
         {#if formActions && !isReadonly}
           {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
         {:else if !isReadonly}
-          <Button type="submit" size={isCompact ? 'sm' : 'default'} disabled={form.submitting}>
+          <Button type="submit" size="default" disabled={form.submitting}>
             {#if form.submitting}
               <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" data-icon="inline-start" aria-hidden="true" />
             {:else}
@@ -452,7 +447,7 @@
           <Button
             type="button"
             variant="outline"
-            size={isCompact ? 'sm' : 'default'}
+            size="default"
             onclick={back}
           >
             {i18n.t('common.cancel')}

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

@@ -6,7 +6,6 @@ interface Props {
     rendering?: ResourceRendering | undefined;
     id?: string | number;
     mode?: 'create' | 'edit' | 'clone' | 'show';
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     showHeader?: boolean;
     fieldRenderer?: Snippet<[{

package/dist/components/AutoTable.svelte

@@ -112,10 +112,12 @@
     selectable?: boolean;
     /** 仅在业务回调支持按查询执行服务端命令时启用。 */
     allowSelectAllMatching?: boolean;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
     showHeader?: boolean;
     title?: string;
     showFilterTags?: boolean;
+    /** @deprecated Retained for compatibility; use the shared appearance baseline. */
     showDensitySwitcher?: boolean;
     showRefresh?: boolean;
     /** Custom header actions (right side) */
@@ -788,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;
   });
@@ -1042,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/AutoTable.svelte.d.ts

@@ -15,10 +15,12 @@ interface Props {
     selectable?: boolean;
     /** 仅在业务回调支持按查询执行服务端命令时启用。 */
     allowSelectAllMatching?: boolean;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
     showHeader?: boolean;
     title?: string;
     showFilterTags?: boolean;
+    /** @deprecated Retained for compatibility; use the shared appearance baseline. */
     showDensitySwitcher?: boolean;
     showRefresh?: boolean;
     /** Custom header actions (right side) */

package/dist/components/ConfigurationPage.svelte

@@ -11,7 +11,6 @@
     footer?: Snippet;
     children: Snippet;
     width?: 'narrow' | 'default' | 'wide';
-    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -23,7 +22,6 @@
     footer,
     children,
     width = 'default',
-    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 </script>
@@ -32,7 +30,6 @@
   {title}
   {...definedOptions({ description, eyebrow, actions })}
   {width}
-  {density}
   class={className}
 >
   <div class="configuration-page__content">

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

@@ -7,7 +7,6 @@ interface Props {
     footer?: Snippet;
     children: Snippet;
     width?: 'narrow' | 'default' | 'wide';
-    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const ConfigurationPage: import("svelte").Component<Props, {}, "">;

package/dist/components/CreatePage.svelte

@@ -15,9 +15,9 @@
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
+    formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     onSuccess?: () => void;
     class?: string;
   }
@@ -26,9 +26,9 @@
     resourceName,
     rendering,
     title,
-    density = 'comfortable',
     columns = 1,
     headerActions,
+    formActions,
     onSuccess,
     class: className = '',
   }: Props = $props();
@@ -39,28 +39,31 @@
   const pageTitle = $derived(title ?? `${i18n.t('common.create')}${resource.label}`);
 </script>
 
-<div class="{density === 'compact' ? 'svadmin-u-3e7ce58d64fa' : 'svadmin-u-b3542e058833'} {className}">
-  <PageHeader
-    title={pageTitle}
-    {density}
-    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"
-    {density}
-    {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

@@ -4,9 +4,12 @@ interface Props {
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
+    formActions?: Snippet<[{
+        isLoading: boolean;
+        onSubmit: () => void;
+    }]>;
     onSuccess?: () => void;
     class?: string;
 }

package/dist/components/EditPage.svelte

@@ -20,10 +20,10 @@
     rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;
+    formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     onSuccess?: () => void;
     class?: string;
   }
@@ -33,10 +33,10 @@
     rendering,
     id,
     title,
-    density = 'comfortable',
     columns = 1,
     canDelete,
     headerActions,
+    formActions,
     onSuccess,
     class: className = '',
   }: Props = $props();
@@ -48,12 +48,12 @@
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
 </script>
 
-<div class="{density === 'compact' ? 'svadmin-u-3e7ce58d64fa' : 'svadmin-u-b3542e058833'} {className}">
-  <PageHeader
-    title={pageTitle}
-    {density}
-    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} />
@@ -65,17 +65,20 @@
         {@render headerActions()}
       {/if}
     {/snippet}
-  </PageHeader>
+    </PageHeader>
+  </div>
 
-  <AutoForm
-    {rendering}
-    {resourceName}
-    mode="edit"
-    {id}
-    {density}
-    {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>

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

@@ -5,10 +5,13 @@ interface Props {
     rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;
+    formActions?: Snippet<[{
+        isLoading: boolean;
+        onSubmit: () => void;
+    }]>;
     onSuccess?: () => void;
     class?: string;
 }

package/dist/components/FieldRenderer.svelte

@@ -35,25 +35,21 @@
   import { Plus, X } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
-  import { cn } from '../utils.js';
   import { numericInputValue } from '../numeric-input.js';
 
   type FieldOption = NonNullable<FieldDefinition['options']>[number];
   const i18n = useTranslation();
 
-  let { field, value, onchange, disabled, invalid = false, errorId, density = 'comfortable', children } = $props<{
+  let { field, value, onchange, disabled, invalid = false, errorId, children } = $props<{
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
     disabled?: boolean;
     invalid?: boolean;
     errorId?: string;
-    density?: 'compact' | 'comfortable';
     children?: Snippet;
   }>();
 
-  const isCompact = $derived(density === 'compact');
-
   // Typed accessors
   const strVal = $derived((value as string) ?? '');
   const numVal = $derived(numericInputValue(value));
@@ -111,13 +107,9 @@
 </script>
 
 <div
-  class={cn(
-    'svadmin-u-5a2508227c6a',
-    isCompact && 'svadmin-u-da7c36cd8867 svadmin-u-01e043b9ca05 svadmin-u-5e375759a547 svadmin-u-0144d38a6921 svadmin-u-910198b850a8 svadmin-u-220cd47c030c svadmin-u-84a68a4bfa38 svadmin-u-2b201b2c12c7 svadmin-u-334c9da7fe2b svadmin-u-f7194f86de09 svadmin-u-a281d7e98ab9 svadmin-u-6cddb40447d9 svadmin-u-150c3670da1d svadmin-u-f01a063e8052 svadmin-u-3e2aa4ec6454'
-  )}
+  class="svadmin-u-5a2508227c6a"
   data-svadmin-field
   data-svadmin-field-key={field.key}
-  data-density={density}
 >
   <Label for={field.key} id="label-{field.key}" data-svadmin-field-label>
     {field.label}