@svadmin/ui 0.72.0 → 0.74.0

package/dist/components/KanbanBoard.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
-  import { Plus, GripVertical } from '@lucide/svelte';
+  import { Plus, GripVertical, RotateCw, ArrowUp, ArrowDown } from '@lucide/svelte';
   import { cn } from '../utils.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { onDestroy } from 'svelte';
 
   export interface KanbanCard {
     id: string;
@@ -25,9 +27,16 @@
     columns: KanbanColumn[];
     cards?: KanbanCard[];
     allowAddCard?: boolean;
-    oncardmove?: (cardId: string, targetColumnId: string) => void;
+    oncardmove?: (cardId: string, targetColumnId: string, targetIndex: number) => void | Promise<void>;
+    canMoveCard?: (card: KanbanCard, targetColumnId: string) => boolean;
+    oncardmoveerror?: (error: unknown) => void;
     oncardclick?: (card: KanbanCard) => void;
-    oncardadd?: (columnId: string, title: string) => void;
+    oncardadd?: (columnId: string, title: string) => KanbanCard | Promise<KanbanCard>;
+    scopeKey?: string | number;
+    loading?: boolean;
+    error?: string | undefined;
+    onRetry?: () => void;
+    ariaLabel?: string;
     class?: string;
   }
 
@@ -36,16 +45,80 @@
     cards = $bindable([]),
     allowAddCard = true,
     oncardmove,
+    canMoveCard,
+    oncardmoveerror,
     oncardclick,
     oncardadd,
+    scopeKey,
+    loading = false,
+    error,
+    onRetry,
+    ariaLabel,
     class: className = '',
   }: Props = $props();
 
   let draggedCardId = $state<string | null>(null);
   let addingColumnId = $state<string | null>(null);
   let newCardTitle = $state('');
+  let movingCardId = $state<string | null>(null);
+  let moveError = $state<string | null>(null);
+  let adding = $state(false);
+  let mounted = true;
+  const i18n = useTranslation();
+  const invalidData = $derived.by(() => {
+    if (!Array.isArray(columns) || !Array.isArray(cards)) return 'kanban.invalidData';
+    if (columns.length > 200 || cards.length > 1000) return 'kanban.limit';
+    if (columns.some(column => !column || !validText(column.id) || !validText(column.title))) return 'kanban.invalidData';
+    const columnIds = new Set(columns.map(column => column.id));
+    if (columnIds.size !== columns.length) return 'kanban.invalidData';
+    const cardIds = new Set<string>();
+    for (const card of cards) {
+      if (!validCard(card) || cardIds.has(card.id) || !columnIds.has(card.columnId)) return 'kanban.invalidData';
+      cardIds.add(card.id);
+    }
+    return '';
+  });
+  const displayError = $derived(error || (invalidData ? i18n.t(invalidData) : ''));
+  const fingerprint = $derived(invalidData ? '' : JSON.stringify([columns.map(column => ({ id: column.id, title: column.title })), cards.map(card => ({
+    id: card.id, title: card.title, columnId: card.columnId, description: card.description,
+    priority: card.priority, tags: card.tags, assignee: card.assignee?.name, dueDate: card.dueDate,
+  }))]));
+  const scope = $derived({ scopeKey, cards, columns, fingerprint, loading, error, oncardmove, oncardadd, canMoveCard, allowAddCard });
+  let operation = $state.raw<{ scope: typeof scope; preview?: KanbanCard[] }>();
+  const currentOperation = $derived(operation?.scope === scope);
+  const busy = $derived(currentOperation && (movingCardId !== null || adding));
+  const visibleCards = $derived(currentOperation && operation?.preview ? operation.preview : cards);
+
+  function validText(value: unknown): value is string {
+    return typeof value === 'string' && value.trim().length > 0 && value.length <= 1000;
+  }
+  function validCard(card: KanbanCard): boolean {
+    return !!card && validText(card.id) && validText(card.title) && validText(card.columnId)
+      && (card.description === undefined || (typeof card.description === 'string' && card.description.length <= 10_000))
+      && (card.tags === undefined || (Array.isArray(card.tags) && card.tags.length <= 100 && card.tags.every(validText)))
+      && (card.assignee === undefined || (!!card.assignee && validText(card.assignee.name)))
+      && (card.dueDate === undefined || typeof card.dueDate === 'string')
+      && (card.priority === undefined || ['low', 'medium', 'high', 'urgent'].includes(card.priority));
+  }
+  function moveAllowed(card: KanbanCard, targetColumn: string): boolean {
+    if (!oncardmove || loading || displayError || busy || !columns.some(column => column.id === targetColumn)) return false;
+    try { return canMoveCard === undefined || canMoveCard(card, targetColumn) === true; }
+    catch { return false; }
+  }
+  function active(origin: typeof scope): boolean {
+    return mounted && origin === scope;
+  }
+  $effect.pre(() => {
+    void scope;
+    draggedCardId = null;
+    addingColumnId = null;
+    newCardTitle = '';
+    moveError = null;
+  });
+  onDestroy(() => { mounted = false; });
 
   function handleDragStart(e: DragEvent, cardId: string) {
+    if (!oncardmove || busy || loading || displayError) { e.preventDefault(); return; }
     draggedCardId = cardId;
     if (e.dataTransfer) {
       e.dataTransfer.effectAllowed = 'move';
@@ -60,32 +133,65 @@
     }
   }
 
-  function handleDrop(targetColId: string) {
-    if (!draggedCardId) return;
-    const card = cards.find((c) => c.id === draggedCardId);
-    if (card && card.columnId !== targetColId) {
-      cards = cards.map((c) =>
-        c.id === draggedCardId ? { ...c, columnId: targetColId } : c
-      );
-      oncardmove?.(draggedCardId, targetColId);
+  async function moveCard(cardId: string, targetColId: string, targetIndex = Number.MAX_SAFE_INTEGER) {
+    const card = cards.find((c) => c.id === cardId);
+    if (!card || !moveAllowed(card, targetColId)) return;
+    const source = [...cards];
+    const without = source.filter(item => item.id !== card.id);
+    const targetCards = without.filter(item => item.columnId === targetColId);
+    const index = Math.min(Math.max(0, targetIndex), targetCards.length);
+    if (card.columnId === targetColId && source.filter(item => item.columnId === targetColId).findIndex(item => item.id === card.id) === index) return;
+    const destination = { ...card, columnId: targetColId };
+    const optimistic = [...without.filter(item => item.columnId !== targetColId), ...targetCards.slice(0, index), destination, ...targetCards.slice(index)];
+    const changed = source.length !== optimistic.length || source.some((item, i) => item.id !== optimistic[i]?.id || item.columnId !== optimistic[i]?.columnId);
+    if (!changed) return;
+    const origin = scope;
+    const current = { scope: origin, preview: optimistic };
+    operation = current;
+    adding = false;
+    movingCardId = card.id;
+    moveError = null;
+    try {
+      await origin.oncardmove?.(card.id, targetColId, index);
+      if (active(origin) && operation === current) cards = optimistic;
+    } catch (cause) {
+      if (active(origin) && operation === current) {
+        moveError = i18n.t('kanban.moveFailed');
+        try { oncardmoveerror?.(cause); } catch { /* 错误观察者不能再次触发写入。 */ }
+      }
+    } finally {
+      if (operation === current) { operation = undefined; movingCardId = null; }
     }
+  }
+
+  function handleDrop(targetColId: string, index?: number) {
+    const id = draggedCardId;
     draggedCardId = null;
+    if (id) void moveCard(id, targetColId, index);
   }
 
-  function submitAddCard(columnId: string) {
-    if (!newCardTitle.trim()) {
+  async function submitAddCard(columnId: string) {
+    if (!validText(newCardTitle) || !oncardadd || !allowAddCard || busy || loading || displayError || cards.length >= 1000) return;
+    const origin = scope;
+    const current = { scope: origin };
+    operation = current;
+    movingCardId = null;
+    adding = true;
+    moveError = null;
+    try {
+      const newCard = await origin.oncardadd?.(columnId, newCardTitle.trim());
+      if (!active(origin) || operation !== current) return;
+      if (!newCard || !validCard(newCard) || newCard.columnId !== columnId || cards.some(card => card.id === newCard.id)) {
+        throw new Error('Invalid card receipt');
+      }
+      cards = [...cards, newCard];
+      newCardTitle = '';
       addingColumnId = null;
-      return;
+    } catch {
+      if (active(origin) && operation === current) moveError = i18n.t('kanban.addFailed');
+    } finally {
+      if (operation === current) { operation = undefined; adding = false; }
     }
-    const newCard: KanbanCard = {
-      id: `k_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
-      title: newCardTitle.trim(),
-      columnId,
-    };
-    cards = [...cards, newCard];
-    oncardadd?.(columnId, newCardTitle.trim());
-    newCardTitle = '';
-    addingColumnId = null;
   }
 
   function getPriorityClass(priority?: string) {
@@ -102,15 +208,27 @@
   }
 </script>
 
-<div class={cn('svadmin-u-60fbb7713999 svadmin-u-0c3bc98565dd svadmin-u-1384f66f41d0 svadmin-u-9fcd8a13827e svadmin-u-359090c2d529 svadmin-u-7f6912283f11', className)}>
+{#if moveError}<div role="alert">{moveError}</div>{/if}
+<div role="region" aria-label={ariaLabel ?? i18n.t('kanban.label')} aria-busy={loading || busy}
+  class={cn('svadmin-u-60fbb7713999 svadmin-u-0c3bc98565dd svadmin-u-1384f66f41d0 svadmin-u-9fcd8a13827e svadmin-u-359090c2d529 svadmin-u-7f6912283f11', className)}>
+  {#if loading}
+    <div role="status">{i18n.t('common.loading')}</div>
+  {:else if displayError}
+    <div role="alert">{displayError}</div>
+    {#if error && onRetry}
+      <Button type="button" variant="ghost" size="sm" onclick={onRetry}><RotateCw aria-hidden="true" />{i18n.t('common.retry')}</Button>
+    {/if}
+  {:else if columns.length === 0}
+    <div role="status">{i18n.t('common.noData')}</div>
+  {:else}
   {#each columns as col (col.id)}
-    {@const colCards = cards.filter((c) => c.columnId === col.id)}
+    {@const colCards = visibleCards.filter((c) => c.columnId === col.id)}
     <div
       role="region"
       aria-label={col.title}
       class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-92e13d146fd7 svadmin-u-012fbd121f37 svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-22bb278694b4 svadmin-u-7f351d50b6e6 svadmin-u-cef5b893cf23 svadmin-u-a4805b5f5b63"
       ondragover={handleDragOver}
-      ondrop={() => handleDrop(col.id)}
+      ondrop={(event) => { event.preventDefault(); handleDrop(col.id); }}
     >
       <!-- Column Header -->
       <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-eb6e8b881acd svadmin-u-65fdbade2025 svadmin-u-591f378e24a1">
@@ -121,8 +239,12 @@
           </span>
         </div>
 
-        {#if allowAddCard}
+        {#if allowAddCard && oncardadd}
           <Button
+            type="button"
+            disabled={busy || cards.length >= 1000}
+            aria-label={i18n.t('kanban.addTo', { column: col.title })}
+            title={i18n.t('kanban.addTo', { column: col.title })}
             variant="ghost"
             size="sm"
             class="svadmin-u-f6fe902450dc svadmin-u-7ec10f86d9b1 svadmin-u-8a539c7fe216 svadmin-u-bfa603190748 svadmin-u-ea7b2e9e070e"
@@ -138,22 +260,28 @@
 
       <!-- Column Card List -->
       <div class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-7660b450905a svadmin-u-6f7e013d6499 svadmin-u-53ecdb131b58">
-        {#each colCards as card (card.id)}
+        {#each colCards as card, cardIndex (card.id)}
           <div
-            role="button"
-            tabindex="0"
-            draggable="true"
+            role="group"
+            aria-label={card.title}
+            aria-busy={busy && movingCardId === card.id}
+            draggable={!!oncardmove && !busy}
             class={cn(
               'group svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-77a2a20e90d4 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-05faf5c801ff svadmin-u-cd0ad9a56558 svadmin-u-eb6e8b881acd svadmin-u-cef5b893cf23 svadmin-u-0fe7d7d814d0 svadmin-u-8d08385288a6 svadmin-u-d9bff91ef7ee svadmin-u-512e82e6a68f svadmin-u-ab1dd417ce7d svadmin-u-2eba0d65d059',
               draggedCardId === card.id ? 'svadmin-u-2a2db4667b27 svadmin-u-16b1efa5875e svadmin-u-2691847b25ed' : ''
             )}
             ondragstart={(e) => handleDragStart(e, card.id)}
-            onclick={() => oncardclick?.(card)}
-            onkeydown={(e) => { if (e.key === 'Enter') oncardclick?.(card); }}
+            ondragend={() => { draggedCardId = null; }}
+            ondragover={handleDragOver}
+            ondrop={(e) => { e.preventDefault(); e.stopPropagation(); handleDrop(col.id, cardIndex); }}
           >
             <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-8ef2268efbbc svadmin-u-77a2a20e90d4">
-              <div class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-e25ca6535dea">{card.title}</div>
-              <GripVertical class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-52183a1cca53 svadmin-u-7065497e1ca0 svadmin-u-181f3d6c9821 svadmin-u-67d6184a0024 svadmin-u-012fbd121f37" />
+              {#if oncardclick}
+                <button type="button" disabled={busy} onclick={() => oncardclick?.(card)} class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-e25ca6535dea">{card.title}</button>
+              {:else}
+                <div class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-e25ca6535dea">{card.title}</div>
+              {/if}
+              {#if oncardmove}<GripVertical aria-hidden="true" class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-52183a1cca53 svadmin-u-7065497e1ca0 svadmin-u-181f3d6c9821 svadmin-u-67d6184a0024 svadmin-u-012fbd121f37" />{/if}
             </div>
 
             {#if card.description}
@@ -167,7 +295,7 @@
                     {card.priority}
                   </Badge>
                 {/if}
-                {#each card.tags ?? [] as tag (tag)}
+                {#each card.tags ?? [] as tag, tagIndex (tagIndex)}
                   <span class="svadmin-u-07389a777c1f svadmin-u-706701550477 svadmin-u-d8e0e382c67b svadmin-u-465609a240a8 svadmin-u-bfa603190748">#{tag}</span>
                 {/each}
               </div>
@@ -181,18 +309,44 @@
                 </div>
               {/if}
             </div>
+            {#if oncardmove}
+              <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+                <select aria-label={i18n.t('kanban.move', { card: card.title })} value={card.columnId} disabled={busy}
+                  style="min-width: 0; max-width: 100%;"
+                  onchange={(event) => {
+                    const target = event.currentTarget.value;
+                    event.currentTarget.value = card.columnId;
+                    void moveCard(card.id, target);
+                  }}>
+                  {#each columns as destination (destination.id)}
+                    <option value={destination.id} disabled={destination.id !== card.columnId && !moveAllowed(card, destination.id)}>{destination.title}</option>
+                  {/each}
+                </select>
+                <Button type="button" variant="ghost" size="icon-sm" title={i18n.t('common.moveUp')}
+                  aria-label={i18n.t('common.moveUp')} disabled={cardIndex === 0 || !moveAllowed(card, col.id)}
+                  onclick={() => void moveCard(card.id, col.id, cardIndex - 1)}><ArrowUp aria-hidden="true" /></Button>
+                <Button type="button" variant="ghost" size="icon-sm" title={i18n.t('common.moveDown')}
+                  aria-label={i18n.t('common.moveDown')} disabled={cardIndex === colCards.length - 1 || !moveAllowed(card, col.id)}
+                  onclick={() => void moveCard(card.id, col.id, cardIndex + 1)}><ArrowDown aria-hidden="true" /></Button>
+              </div>
+            {/if}
           </div>
+        {:else}
+          <div role="status">{i18n.t('common.noData')}</div>
         {/each}
 
         {#if addingColumnId === col.id}
           <div class="svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-f5583b2907be svadmin-u-cd0ad9a56558 svadmin-u-9fe52d5d506c svadmin-u-6f7e013d6499 svadmin-u-cef5b893cf23">
             <textarea
               bind:value={newCardTitle}
-              placeholder="Card title..."
+              aria-label={i18n.t('kanban.cardTitle')}
+              placeholder={i18n.t('kanban.cardTitle')}
+              maxlength={1000}
+              disabled={busy}
               rows={2}
               class="svadmin-u-6da6a3c3f741 svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-cd009d7d208c svadmin-u-359090c2d529 svadmin-u-d4108abe6359 svadmin-u-9c24ab70af61 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a svadmin-u-6aef32016896"
               onkeydown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
+                if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && !e.repeat) {
                   e.preventDefault();
                   submitAddCard(col.id);
                 } else if (e.key === 'Escape') {
@@ -201,12 +355,13 @@
               }}
             ></textarea>
             <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77c08e015d14 svadmin-u-58284b4ea568">
-              <Button variant="ghost" size="sm" class="svadmin-u-f6fe902450dc svadmin-u-d058ca6de60f svadmin-u-d5eab218aa34" onclick={() => { addingColumnId = null; }}>Cancel</Button>
-              <Button size="sm" class="svadmin-u-f6fe902450dc svadmin-u-d058ca6de60f svadmin-u-d5eab218aa34" onclick={() => submitAddCard(col.id)}>Add</Button>
+              <Button type="button" disabled={busy} variant="ghost" size="sm" class="svadmin-u-f6fe902450dc svadmin-u-d058ca6de60f svadmin-u-d5eab218aa34" onclick={() => { addingColumnId = null; }}>{i18n.t('common.cancel')}</Button>
+              <Button type="button" disabled={busy || !validText(newCardTitle)} size="sm" class="svadmin-u-f6fe902450dc svadmin-u-d058ca6de60f svadmin-u-d5eab218aa34" onclick={() => submitAddCard(col.id)}>{i18n.t('common.add')}</Button>
             </div>
           </div>
         {/if}
       </div>
     </div>
   {/each}
+  {/if}
 </div>

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

@@ -20,9 +20,16 @@ interface Props {
     columns: KanbanColumn[];
     cards?: KanbanCard[];
     allowAddCard?: boolean;
-    oncardmove?: (cardId: string, targetColumnId: string) => void;
+    oncardmove?: (cardId: string, targetColumnId: string, targetIndex: number) => void | Promise<void>;
+    canMoveCard?: (card: KanbanCard, targetColumnId: string) => boolean;
+    oncardmoveerror?: (error: unknown) => void;
     oncardclick?: (card: KanbanCard) => void;
-    oncardadd?: (columnId: string, title: string) => void;
+    oncardadd?: (columnId: string, title: string) => KanbanCard | Promise<KanbanCard>;
+    scopeKey?: string | number;
+    loading?: boolean;
+    error?: string | undefined;
+    onRetry?: () => void;
+    ariaLabel?: string;
     class?: string;
 }
 declare const KanbanBoard: import("svelte").Component<Props, {}, "cards">;

package/dist/components/Layout.svelte

@@ -203,9 +203,9 @@
 
     <div
       class="svadmin-u-36e579c0b41c svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2cd02d11d1af svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63"
-      class:md:ml-[252px]={!collapsed}
+      class:svadmin-sidebar-content-expanded={!collapsed}
       class:sidebar-content-expanded={!collapsed}
-      class:md:ml-[70px]={collapsed}
+      class:svadmin-sidebar-content-collapsed={collapsed}
       class:sidebar-content-collapsed={collapsed}
     >
       <!-- Header with mobile hamburger -->
@@ -244,7 +244,8 @@
       <main id={mainContentId} tabindex="-1" data-svadmin-main class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-2859c861d7de svadmin-u-f0faeb26d656 svadmin-u-c9b99cd93450 svadmin-u-cc06a6575385 svadmin-u-daf5dc5fac2b svadmin-u-e86fadb84483">
         <div class="svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 svadmin-u-9e3dc30c26a3">
           {#key getPath()}
-            <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
+            <!-- 路由切换立即释放旧页面，避免退出期间继续读取已失效的路由派生状态。 -->
+            <div in:fly={{ x: 20, duration: 150 }}>
               {@render children()}
             </div>
           {/key}

package/dist/components/LazyAutoForm.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type AutoForm from './AutoForm.svelte';
+  export interface LazyAutoFormProps extends ComponentProps<typeof AutoForm> {
+    resourceName: ComponentProps<typeof AutoForm>['resourceName'];
+  }
+</script>
+
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  let props: LazyAutoFormProps = $props();
+  const i18n = useTranslation();
+  let page = $state.raw(import('./AutoForm.svelte'));
+</script>
+
+{#await page}
+  <p role="status" aria-live="polite">{i18n.t('common.loading')}</p>
+{:then module}
+  <module.default {...props} />
+{:catch}
+  <div role="alert">
+    <p>{i18n.t('common.operationFailed')}</p>
+    <button type="button" onclick={() => page = import('./AutoForm.svelte')}>
+      {i18n.t('common.retry')}
+    </button>
+  </div>
+{/await}

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

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'svelte';
+import type AutoForm from './AutoForm.svelte';
+export interface LazyAutoFormProps extends ComponentProps<typeof AutoForm> {
+    resourceName: ComponentProps<typeof AutoForm>['resourceName'];
+}
+declare const LazyAutoForm: import("svelte").Component<LazyAutoFormProps, {}, "">;
+type LazyAutoForm = ReturnType<typeof LazyAutoForm>;
+export default LazyAutoForm;

package/dist/components/LazyAutoTable.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type AutoTable from './AutoTable.svelte';
+  export interface LazyAutoTableProps extends ComponentProps<typeof AutoTable> {
+    resourceName: ComponentProps<typeof AutoTable>['resourceName'];
+  }
+</script>
+
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  let props: LazyAutoTableProps = $props();
+  const i18n = useTranslation();
+  let page = $state.raw(import('./AutoTable.svelte'));
+</script>
+
+{#await page}
+  <p role="status" aria-live="polite">{i18n.t('common.loading')}</p>
+{:then module}
+  <module.default {...props} />
+{:catch}
+  <div role="alert">
+    <p>{i18n.t('common.operationFailed')}</p>
+    <button type="button" onclick={() => page = import('./AutoTable.svelte')}>
+      {i18n.t('common.retry')}
+    </button>
+  </div>
+{/await}

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

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'svelte';
+import type AutoTable from './AutoTable.svelte';
+export interface LazyAutoTableProps extends ComponentProps<typeof AutoTable> {
+    resourceName: ComponentProps<typeof AutoTable>['resourceName'];
+}
+declare const LazyAutoTable: import("svelte").Component<LazyAutoTableProps, {}, "">;
+type LazyAutoTable = ReturnType<typeof LazyAutoTable>;
+export default LazyAutoTable;

package/dist/components/LazySettingsPage.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type SettingsPage from './SettingsPage.svelte';
+  export interface LazySettingsPageProps extends ComponentProps<typeof SettingsPage> {
+    preferencesProvider?: NonNullable<ComponentProps<typeof SettingsPage>['preferencesProvider']>;
+  }
+</script>
+
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  let props: LazySettingsPageProps = $props();
+  const i18n = useTranslation();
+  let page = $state.raw(import('./SettingsPage.svelte'));
+</script>
+
+{#await page}
+  <p role="status" aria-live="polite">{i18n.t('common.loading')}</p>
+{:then module}
+  <module.default {...props} />
+{:catch}
+  <div role="alert">
+    <p>{i18n.t('common.operationFailed')}</p>
+    <button type="button" onclick={() => page = import('./SettingsPage.svelte')}>
+      {i18n.t('common.retry')}
+    </button>
+  </div>
+{/await}

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

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'svelte';
+import type SettingsPage from './SettingsPage.svelte';
+export interface LazySettingsPageProps extends ComponentProps<typeof SettingsPage> {
+    preferencesProvider?: NonNullable<ComponentProps<typeof SettingsPage>['preferencesProvider']>;
+}
+declare const LazySettingsPage: import("svelte").Component<LazySettingsPageProps, {}, "">;
+type LazySettingsPage = ReturnType<typeof LazySettingsPage>;
+export default LazySettingsPage;

package/dist/components/LazyShowPage.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type ShowPage from './ShowPage.svelte';
+  export interface LazyShowPageProps extends ComponentProps<typeof ShowPage> {
+    resourceName: ComponentProps<typeof ShowPage>['resourceName'];
+  }
+</script>
+
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  let props: LazyShowPageProps = $props();
+  const i18n = useTranslation();
+  let page = $state.raw(import('./ShowPage.svelte'));
+</script>
+
+{#await page}
+  <p role="status" aria-live="polite">{i18n.t('common.loading')}</p>
+{:then module}
+  <module.default {...props} />
+{:catch}
+  <div role="alert">
+    <p>{i18n.t('common.operationFailed')}</p>
+    <button type="button" onclick={() => page = import('./ShowPage.svelte')}>
+      {i18n.t('common.retry')}
+    </button>
+  </div>
+{/await}

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

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'svelte';
+import type ShowPage from './ShowPage.svelte';
+export interface LazyShowPageProps extends ComponentProps<typeof ShowPage> {
+    resourceName: ComponentProps<typeof ShowPage>['resourceName'];
+}
+declare const LazyShowPage: import("svelte").Component<LazyShowPageProps, {}, "">;
+type LazyShowPage = ReturnType<typeof LazyShowPage>;
+export default LazyShowPage;

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

@@ -2,7 +2,7 @@ declare const LazyTaskQueueDrawer: import("svelte").Component<{
     open?: boolean;
     taskProvider?: import("@svadmin/core").TaskProvider<import("@svadmin/core").TaskRecord>;
     title?: string;
-    initialTab?: "dlq" | "tasks";
+    initialTab?: "tasks" | "dlq";
 }, {}, "open">;
 type LazyTaskQueueDrawer = ReturnType<typeof LazyTaskQueueDrawer>;
 export default LazyTaskQueueDrawer;

package/dist/components/ListPage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
 
   import { getResource } from '@svadmin/core';
@@ -7,15 +8,18 @@
   import type { FieldDefinition } from '@svadmin/core';
   import PageHeader from './PageHeader.svelte';
   import AutoTable from './AutoTable.svelte';
+  import type { BatchSelection } from './table-contract';
   import CreateButton from './buttons/CreateButton.svelte';
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     canCreate?: boolean;
     density?: 'compact' | 'comfortable';
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
+    allowSelectAllMatching?: boolean;
     /** Passthrough: custom header actions */
     headerActions?: Snippet;
     /** Optional status tabs slot above filter/table */
@@ -23,7 +27,7 @@
     /** Optional filter toolbar slot between status tabs and table */
     filterToolbar?: Snippet;
     /** Passthrough: custom batch actions to render when rows are selected */
-    batchActions?: Snippet<[{ selectedIds: (string | number)[] }]>;
+    batchActions?: Snippet<[{ selectedIds: (string | number)[]; selection: BatchSelection }]>;
     /** Passthrough: custom cell renderer per field */
     cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
     /** Passthrough: custom row actions */
@@ -37,10 +41,12 @@
 
   let {
     resourceName,
+    rendering,
     title,
     canCreate,
     density = 'comfortable',
     selectable,
+    allowSelectAllMatching,
     headerActions,
     statusTabs,
     filterToolbar,
@@ -81,10 +87,12 @@
   {/if}
 
   <AutoTable
+    {rendering}
     {resourceName}
     showHeader={false}
     {density}
     {...definedOptions({ "selectable": selectable })}
+    {...definedOptions({ allowSelectAllMatching })}
     {...definedOptions({ batchActions })}
     {...definedOptions({ "defaultCellRenderer": cellRenderer })}
     {...definedOptions({ "rowActions": rowActions })}

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

@@ -1,12 +1,16 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 import type { FieldDefinition } from '@svadmin/core';
+import type { BatchSelection } from './table-contract';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     canCreate?: boolean;
     density?: 'compact' | 'comfortable';
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
+    allowSelectAllMatching?: boolean;
     /** Passthrough: custom header actions */
     headerActions?: Snippet;
     /** Optional status tabs slot above filter/table */
@@ -16,6 +20,7 @@ interface Props {
     /** Passthrough: custom batch actions to render when rows are selected */
     batchActions?: Snippet<[{
         selectedIds: (string | number)[];
+        selection: BatchSelection;
     }]>;
     /** Passthrough: custom cell renderer per field */
     cellRenderer?: Snippet<[{