@svadmin/ui 0.34.10 → 0.35.0

package/dist/components/ApiSettings.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { AlertCircle, Calendar, Check, Copy, Key, Plus, ShieldCheck, Trash2 } from '@lucide/svelte';
+  import * as Card from './ui/card/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Checkbox } from './ui/checkbox/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Label } from './ui/label/index.js';
+
+  interface ApiKey {
+    id: string;
+    name: string;
+    maskedToken: string;
+    created: string;
+    permissions: string[];
+  }
+
+  let keys = $state<ApiKey[]>([
+    { id: 'prod-sync', name: 'Production Sync Service', maskedToken: 'sv_demo_prod_••••_4d3e', created: '2026-03-10', permissions: ['Read', 'Write'] },
+    { id: 'reporting', name: 'Internal Reporting Tool', maskedToken: 'sv_demo_report_••••_9e8f', created: '2026-05-18', permissions: ['Read'] },
+  ]);
+
+  let newKeyName = $state('');
+  let newKeyPermissions = $state({ Read: true, Write: false, Delete: false, Admin: false });
+  let generatedToken = $state('');
+  let showCreatedToken = $state(false);
+  let copiedKeyId = $state<string | null>(null);
+
+  function generateDemoToken() {
+    const randomHex = Array.from({ length: 24 }, () => Math.floor(Math.random() * 16).toString(16)).join('');
+    return `sv_demo_${randomHex}`;
+  }
+
+  function handleGenerateKey(event: SubmitEvent) {
+    event.preventDefault();
+    if (!newKeyName.trim()) return;
+
+    const token = generateDemoToken();
+    const permissions = Object.entries(newKeyPermissions)
+      .filter(([, enabled]) => enabled)
+      .map(([name]) => name);
+
+    keys = [
+      ...keys,
+      {
+        id: Date.now().toString(),
+        name: newKeyName.trim(),
+        maskedToken: `${token.slice(0, 14)}••••${token.slice(-4)}`,
+        created: new Date().toISOString().split('T')[0],
+        permissions,
+      },
+    ];
+    generatedToken = token;
+    showCreatedToken = true;
+    newKeyName = '';
+    newKeyPermissions = { Read: true, Write: false, Delete: false, Admin: false };
+  }
+
+  function deleteKey(id: string) {
+    keys = keys.filter((key) => key.id !== id);
+  }
+
+  async function copyToken(token: string, id: string) {
+    try {
+      await navigator.clipboard.writeText(token);
+      copiedKeyId = id;
+      setTimeout(() => {
+        if (copiedKeyId === id) copiedKeyId = null;
+      }, 2000);
+    } catch {
+      copiedKeyId = null;
+    }
+  }
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.api')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('settings.apiDescription')}</p>
+  </div>
+
+  <div class="grid gap-6 lg:grid-cols-3">
+    <Card.Card class="lg:col-span-1">
+      <Card.CardHeader>
+        <Card.CardTitle class="flex items-center gap-2 text-base">
+          <Plus class="h-4 w-4" />
+          {t('api.generateTitle')}
+        </Card.CardTitle>
+        <Card.CardDescription>{t('api.generateDesc')}</Card.CardDescription>
+      </Card.CardHeader>
+      <Card.CardContent>
+        <form onsubmit={handleGenerateKey} class="space-y-4">
+          <div class="space-y-2">
+            <Label for="api-key-name">{t('api.keyName')}</Label>
+            <Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required />
+          </div>
+
+          <div class="space-y-3">
+            <Label>{t('api.permissions')}</Label>
+            {#each Object.keys(newKeyPermissions) as permission (permission)}
+              <div class="flex items-center gap-2">
+                <Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} />
+                <Label for={`perm-${permission}`} class="cursor-pointer text-sm font-normal">{permission}</Label>
+              </div>
+            {/each}
+          </div>
+
+          <Button type="submit" class="w-full">{t('api.generateButton')}</Button>
+        </form>
+      </Card.CardContent>
+    </Card.Card>
+
+    <Card.Card class="lg:col-span-2">
+      <Card.CardHeader>
+        <Card.CardTitle class="flex items-center gap-2 text-base">
+          <Key class="h-4 w-4 text-muted-foreground" />
+          {t('api.activeKeysTitle')}
+        </Card.CardTitle>
+        <Card.CardDescription>{t('api.activeKeysDesc')}</Card.CardDescription>
+      </Card.CardHeader>
+      <Card.CardContent>
+        {#if showCreatedToken}
+          <div class="mb-6 space-y-3 rounded-lg border border-green-500/20 bg-green-500/5 p-4">
+            <div class="flex items-start gap-2 text-sm text-green-700 dark:text-green-300">
+              <ShieldCheck class="mt-0.5 h-5 w-5 shrink-0" />
+              <div>
+                <h4 class="font-semibold">{t('api.successTitle')}</h4>
+                <p class="mt-0.5 text-xs">{t('api.successHint')}</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <Input readonly value={generatedToken} class="h-9 font-mono text-xs" />
+              <Button size="sm" onclick={() => copyToken(generatedToken, 'new-token')}>
+                {#if copiedKeyId === 'new-token'}
+                  <Check class="h-4 w-4" />
+                {:else}
+                  <Copy class="h-4 w-4" />
+                {/if}
+              </Button>
+            </div>
+            <div class="flex justify-end">
+              <Button variant="ghost" size="sm" onclick={() => { showCreatedToken = false; generatedToken = ''; }}>{t('common.close')}</Button>
+            </div>
+          </div>
+        {/if}
+
+        <div class="divide-y">
+          {#each keys as key (key.id)}
+            <div class="space-y-3 py-4 first:pt-0 last:pb-0">
+              <div class="flex items-start justify-between gap-4">
+                <div class="min-w-0 space-y-1">
+                  <h4 class="text-sm font-semibold text-foreground">{key.name}</h4>
+                  <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                    <span class="font-mono">{key.maskedToken}</span>
+                    <span class="flex items-center gap-1">
+                      <Calendar class="h-3 w-3" />
+                      {key.created}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex shrink-0 items-center gap-1">
+                  <Button variant="ghost" size="icon-sm" onclick={() => copyToken(key.maskedToken, key.id)} title={t('common.copy')}>
+                    {#if copiedKeyId === key.id}
+                      <Check class="h-4 w-4 text-green-500" />
+                    {:else}
+                      <Copy class="h-4 w-4" />
+                    {/if}
+                  </Button>
+                  <Button variant="ghost" size="icon-sm" onclick={() => deleteKey(key.id)} title={t('common.delete')}>
+                    <Trash2 class="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+              <div class="flex flex-wrap gap-1">
+                {#each key.permissions as permission (permission)}
+                  <Badge variant="secondary" class="px-2 py-0 text-[10px]">{permission}</Badge>
+                {/each}
+              </div>
+            </div>
+          {:else}
+            <div class="flex flex-col items-center gap-2 py-8 text-center text-sm text-muted-foreground">
+              <AlertCircle class="h-8 w-8 opacity-60" />
+              <span>{t('api.noKeys')}</span>
+            </div>
+          {/each}
+        </div>
+      </Card.CardContent>
+    </Card.Card>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+declare const ApiSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type ApiSettings = ReturnType<typeof ApiSettings>;
+export default ApiSettings;

package/dist/components/AutoForm.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable svelte/prefer-svelte-reactivity */
   import { useForm, getResource, deriveValidator } from '@svadmin/core';
   import { slide } from 'svelte/transition';
   import type { FieldDefinition } from '@svadmin/core';
@@ -45,14 +44,17 @@
   const hasGroups = $derived(formFields.some(f => f.group));
   const groups = $derived((() => {
     if (!hasGroups) return [];
-    const order: string[] = [];
-    const map = new Map<string, FieldDefinition[]>();
+    const result: Array<{ name: string; fields: FieldDefinition[] }> = [];
     for (const f of formFields) {
       const g = f.group ?? '';
-      if (!map.has(g)) { order.push(g); map.set(g, []); }
-      (map.get(g) ?? []).push(f);
+      let group = result.find(item => item.name === g);
+      if (!group) {
+        group = { name: g, fields: [] };
+        result.push(group);
+      }
+      group.fields.push(f);
     }
-    return order.map(g => ({ name: g, fields: map.get(g) ?? [] }));
+    return result;
   })());
 
   // ─── Default values from field metadata ───────────────────────────
@@ -76,18 +78,6 @@
 
   const validator = $derived(deriveValidator(formFields));
 
-  $effect(() => {
-    if (mode !== 'create') return;
-    if (!form.isTainted()) {
-      for (const key in defaults) {
-        if (form.values[key] !== defaults[key]) {
-          form.setFieldValue(key, defaults[key]);
-        }
-      }
-      form.untaint();
-    }
-  });
-
   // ─── useForm: single source of truth for values, errors, tainted ──
   const form = useForm({
     get resource() { return resourceName; },
@@ -145,23 +135,37 @@
   }
 </script>
 
-<div class="space-y-6">
-  <div class="flex items-center gap-4">
-    <TooltipButton
-      tooltip={t('common.back')}
-      onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
-    >
-      <ArrowLeft class="h-5 w-5" />
-    </TooltipButton>
-    <h1 class="text-xl font-semibold text-foreground">{pageTitle}</h1>
-    {#if form.isTainted()}
-      <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
-    {/if}
+<div class="space-y-6" data-svadmin-form-shell>
+  <div class="rounded-3xl border border-border/70 bg-card/90 p-5 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-form-header>
+    <div class="flex flex-wrap items-center gap-4">
+      <TooltipButton
+        tooltip={t('common.back')}
+        onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
+        class="h-10 w-10 rounded-xl border border-border/70 bg-background/80"
+      >
+        <ArrowLeft class="h-5 w-5" />
+      </TooltipButton>
+      <div class="min-w-0 flex-1">
+        <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{pageTitle}</h1>
+        <div class="mt-2 flex flex-wrap items-center gap-2">
+          <Badge variant="secondary" class="rounded-full px-2.5 py-0.5 text-[0.6875rem] font-semibold">
+            {mode === 'create' ? t('common.create') : mode === 'show' ? t('common.detail') : t('common.edit')}
+          </Badge>
+          <p class="text-sm text-muted-foreground">{resource.label}</p>
+        </div>
+      </div>
+      {#if headerContent}
+        {@render headerContent()}
+      {/if}
+      {#if form.isTainted()}
+        <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
+      {/if}
+    </div>
   </div>
 
   {#if form.loading}
-    <div class="max-w-3xl space-y-6">
-      <div class="rounded-lg shadow-sm ring-1 ring-border/10 p-6 space-y-5">
+    <div class="max-w-4xl space-y-6">
+      <div class="space-y-5 rounded-3xl border border-border/70 bg-card/90 p-6 shadow-sm shadow-slate-900/[0.03]">
         {#each Array(4) as _, _i (_i)}
           <div class="space-y-2">
             <Skeleton class="h-4 w-24" />
@@ -171,7 +175,7 @@
       </div>
     </div>
   {:else}
-    <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6">
+    <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-5xl space-y-6" data-svadmin-form-settings>
       {#if submitError}
         <div transition:slide={{ duration: 300, axis: 'y' }} class="svadmin-shake">
           <Alert.Root variant="destructive">
@@ -183,15 +187,15 @@
 
       {#if hasGroups}
         {#each groups as group, _i (_i)}
-          <Card.Root class="border-border/40 shadow-sm">
+          <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]" data-svadmin-form-card>
             {#if group.name}
-              <Card.Header>
-                <Card.Title class="text-lg">{group.name}</Card.Title>
+              <Card.Header class="border-b border-border/60 bg-muted/25 px-5 py-4 sm:px-6">
+                <Card.Title class="text-base font-semibold">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
+            <Card.Content class="px-4 py-0 sm:px-6" data-svadmin-form-content>
               {#each group.fields as field (field.key)}
-                <div class:border-destructive={!!form.errors[field.key]}>
+                <div data-svadmin-form-row class:border-destructive={!!form.errors[field.key]}>
                   {#if fieldRenderer}
                     {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                   {:else}
@@ -211,10 +215,10 @@
           </Card.Root>
         {/each}
       {:else}
-        <Card.Root class="border-border/40 shadow-sm">
-          <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
+        <Card.Root class="rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]" data-svadmin-form-card>
+          <Card.Content class="px-4 py-0 sm:px-6" data-svadmin-form-content>
             {#each formFields as field (field.key)}
-              <div class:border-destructive={!!form.errors[field.key]}>
+              <div data-svadmin-form-row class:border-destructive={!!form.errors[field.key]}>
                 {#if fieldRenderer}
                   {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                 {:else}
@@ -234,11 +238,11 @@
         </Card.Root>
       {/if}
 
-      <div class="flex items-center gap-3">
+      <div class="sticky bottom-4 z-10 flex items-center gap-3 rounded-3xl border border-border/70 bg-card/90 p-3 shadow-lg shadow-slate-900/[0.05] backdrop-blur" data-svadmin-form-actions>
         {#if formActions}
           {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
         {:else if !isReadonly}
-          <Button type="submit" disabled={form.submitting}>
+          <Button type="submit" disabled={form.submitting} class="h-10 rounded-xl px-5 shadow-sm shadow-primary/15">
             {#if form.submitting}
               <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
             {:else}
@@ -249,6 +253,7 @@
           <Button
             type="button"
             variant="outline"
+            class="h-10 rounded-xl"
             onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
           >
             {t('common.cancel')}

package/dist/components/AutoTable.svelte

@@ -484,13 +484,17 @@
   }
 </script>
 
-<div class="space-y-4">
+<div class="space-y-5" data-svadmin-list>
   <!-- Header -->
-  <div class="flex flex-wrap items-center justify-between gap-2">
-    <h1 class="text-lg sm:text-xl font-semibold text-foreground">{resource.label}</h1>
-    <div class="flex flex-wrap items-center gap-2">
+  <div class="rounded-3xl border border-border/70 bg-card/90 p-5 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-list-header>
+    <div class="flex flex-wrap items-center justify-between gap-4">
+      <div class="min-w-0">
+        <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{resource.label}</h1>
+        <p class="mt-1 text-sm text-muted-foreground">{t('common.list')}</p>
+      </div>
+      <div class="flex flex-wrap items-center gap-2" data-svadmin-list-actions>
       {#if canExport}
-        <Button variant="outline" size="sm" onclick={exportCSV}>
+        <Button variant="outline" size="sm" class="h-10 rounded-xl" onclick={exportCSV}>
           <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
         </Button>
       {/if}
@@ -513,8 +517,8 @@
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           {#snippet child({ props })}
-            <Button variant="outline" size="sm" {...props}>
-              <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns') || 'Columns'}
+            <Button variant="outline" size="sm" class="h-10 rounded-xl" {...props}>
+              <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns')}
             </Button>
           {/snippet}
         </DropdownMenu.Trigger>
@@ -533,15 +537,16 @@
         {@render headerActions()}
       {/if}
       {#if canCreate}
-        <Button onclick={() => navigate(`/${resourceName}/create`)}>
+        <Button class="h-10 rounded-xl px-4 shadow-sm shadow-primary/15" onclick={() => navigate(`/${resourceName}/create`)}>
           <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
         </Button>
       {/if}
+      </div>
     </div>
   </div>
 
   <!-- Search and Advanced Filters -->
-  <div class="flex flex-wrap items-center gap-2">
+  <div class="flex flex-wrap items-center gap-3 rounded-3xl border border-border/70 bg-card/80 p-3 shadow-sm shadow-slate-900/[0.02] backdrop-blur" data-svadmin-table-toolbar>
     {#if searchableFields.length > 0}
       <div class="relative max-w-sm flex-1 sm:min-w-[250px]">
         <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -550,7 +555,7 @@
           bind:value={searchText}
           oninput={() => { pagination = { ...pagination, current: 1 }; }}
           placeholder={t('common.search')}
-          class="pl-10 h-9"
+          class="h-10 rounded-xl border-border/70 bg-background/85 pl-10"
         />
       </div>
     {/if}
@@ -559,7 +564,7 @@
       <Popover.Root>
         <Popover.Trigger>
           {#snippet child({ props })}
-            <Button variant="outline" size="sm" class="h-9 px-3" {...props}>
+            <Button variant="outline" size="sm" class="h-10 rounded-xl px-3" {...props}>
               <FilterIcon class="h-4 w-4" data-icon="inline-start" />
               {t('common.filter')}
               {#if activeFilterCount > 0}
@@ -577,7 +582,7 @@
                 {#if field.type === 'select' && field.options}
                   <select
                     id="filter-{field.key}"
-                    class="h-9 text-sm w-full font-normal flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="flex h-10 w-full items-center justify-between rounded-xl border border-input bg-background px-3 py-2 text-sm font-normal ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     value={filterValues[field.key] ?? ''}
                     onchange={(e) => filterValues[field.key] = (e.currentTarget as HTMLSelectElement).value}
                   >
@@ -593,7 +598,7 @@
                     value={filterValues[field.key] ?? ''}
                     oninput={(e) => filterValues[field.key] = (e.currentTarget as HTMLInputElement).value}
                     placeholder={field.label}
-                    class="h-9 text-sm"
+                    class="h-10 rounded-xl text-sm"
                   />
                 {/if}
               </div>
@@ -616,7 +621,7 @@
   </div>
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-[24px] bg-card/80 backdrop-blur-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden ring-1 ring-border/30" role="region" aria-label="{resource.label} {t('common.list')}">
+  <div class="overflow-hidden rounded-3xl border border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-table-card role="region" aria-label="{resource.label} {t('common.list')}">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -640,8 +645,8 @@
       <div in:fade={{ duration: 150 }}>
         <!-- Desktop Table (hidden on mobile) -->
         <div class="hidden md:block">
-        <Table.Root>
-          <Table.Header>
+        <Table.Root class="svadmin-data-table" data-svadmin-datatable>
+          <Table.Header data-svadmin-table-head>
             {#each table_getHeaderGroups(tbl) as headerGroup, _i (_i)}
               <DraggableHeader
                 columns={headerGroup.headers.map((h: any) => ({ id: h.column.id, header: h }))}
@@ -652,7 +657,7 @@
                   {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
                     {...dragProps}
-                    class={cn("bg-transparent hover:bg-muted/10 border-b border-border/20 uppercase tracking-[0.12em] text-[10px] text-muted-foreground/70 font-semibold py-4", dragProps.class)}
+                    class={cn("border-b border-border/50 bg-muted/35 px-4 py-4 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/75 hover:bg-muted/45", dragProps.class)}
                     style={header_getSize(header) != null && header_getSize(header) !== 150 ? `width:${header_getSize(header)}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -694,9 +699,9 @@
               <ContextMenu.Root>
                 <ContextMenu.Trigger>
                   {#snippet child({ props })}
-                    <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
+                    <Table.Row {...props} data-svadmin-table-row class="border-b border-border/30 transition-colors duration-200 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/25'}">
                       {#each row_getVisibleCells(row) as cell, _i (_i)}
-                        <Table.Cell>
+                        <Table.Cell class="px-4 py-3.5">
                           {#if cell.column.id === '_select'}
                             <Checkbox
                               checked={row_getIsSelected(row)}
@@ -803,7 +808,7 @@
                         <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                       </svg>
                       <p class="text-sm font-medium text-muted-foreground mb-1">{t('common.noData')}</p>
-                      <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint') || 'Get started by creating your first record.'}</p>
+                      <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint')}</p>
                       {#if canCreate}
                         <Button variant="outline" size="sm" class="gap-2" onclick={() => navigate(`/${resourceName}/create`)}>
                           <Plus class="h-3.5 w-3.5" />
@@ -825,7 +830,7 @@
             {@const record = row.original}
             {@const id = record[primaryKey] as string | number}
             <div
-              class="rounded-[20px] shadow-[0_4px_20px_rgb(0,0,0,0.03)] ring-1 ring-border/20 bg-card p-5 transition-all {row_getIsSelected(row) ? 'ring-2 ring-primary/50 bg-primary/5' : ''}"
+              class="rounded-3xl border border-border/60 bg-card p-5 shadow-sm shadow-slate-900/[0.03] transition-all {row_getIsSelected(row) ? 'border-primary/35 bg-primary/5 ring-2 ring-primary/20' : ''}"
             >
               <!-- Card header: ID + select + actions -->
               <div class="flex items-center justify-between mb-3">
@@ -906,7 +911,7 @@
 
   <!-- Pagination (shadcn) -->
   {#if totalPages > 0}
-  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
+  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground" data-svadmin-pagination>
     <div class="flex items-center gap-2">
       <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
       <select

package/dist/components/ErrorPage.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { AlertTriangle, ArrowLeft, FileQuestion, Home } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+
+  interface Props {
+    status?: '404' | '500';
+    title?: string;
+    description?: string;
+  }
+
+  let { status = '404', title, description }: Props = $props();
+
+  function goBack() {
+    if (typeof window !== 'undefined') {
+      window.history.back();
+    }
+  }
+
+  const isNotFound = $derived(status === '404');
+  const resolvedTitle = $derived(title ?? (isNotFound ? t('common.pageNotFound') : t('common.error')));
+  const resolvedDescription = $derived(
+    description ?? (isNotFound ? t('error.pageNotFoundDescription') : t('error.internalServerErrorDescription')),
+  );
+</script>
+
+<div class="flex min-h-[70vh] items-center justify-center p-4">
+  <Card.Card class="w-full max-w-md border-border/60">
+    <Card.CardContent class="space-y-6 px-6 py-10 text-center">
+      <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-lg bg-muted/50 text-muted-foreground">
+        {#if isNotFound}
+          <FileQuestion class="h-8 w-8" />
+        {:else}
+          <AlertTriangle class="h-8 w-8 text-destructive" />
+        {/if}
+      </div>
+
+      <div class="space-y-2">
+        <p class="text-xs font-semibold uppercase text-muted-foreground">{status}</p>
+        <h1 class="text-2xl font-semibold text-foreground">{resolvedTitle}</h1>
+        <p class="mx-auto max-w-sm text-sm leading-relaxed text-muted-foreground">{resolvedDescription}</p>
+      </div>
+
+      <div class="flex flex-col justify-center gap-2 sm:flex-row">
+        <Button variant="outline" onclick={goBack}>
+          <ArrowLeft class="h-4 w-4" />
+          {t('common.back')}
+        </Button>
+        <Button onclick={() => navigate('/')}>
+          <Home class="h-4 w-4" />
+          {t('common.returnHome')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

@@ -0,0 +1,8 @@
+interface Props {
+    status?: '404' | '500';
+    title?: string;
+    description?: string;
+}
+declare const ErrorPage: import("svelte").Component<Props, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;

package/dist/components/FieldRenderer.svelte

@@ -85,8 +85,8 @@
   }
 </script>
 
-<div class="space-y-1.5">
-  <Label for={field.key} id="label-{field.key}">
+<div class="space-y-1.5" data-svadmin-field>
+  <Label for={field.key} id="label-{field.key}" data-svadmin-field-label>
     {field.label}
     {#if field.required}
       <span class="text-destructive">*</span>