@svadmin/ui 0.34.9 → 0.35.0

package/dist/components/AutoTable.svelte

@@ -25,7 +25,7 @@
     table_toggleAllRowsSelected,
     row_getIsSelected,
     row_toggleSelected,
-    row_getAllVisibleCells,
+    row_getVisibleCells,
     row_getIsExpanded,
     row_toggleExpanded,
     cell_getValue,
@@ -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,13 +517,13 @@
       <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>
         <DropdownMenu.Content align="end" class="w-48">
-          {#each table_getAllLeafColumns(tbl).filter((c: any) => !c.id.startsWith('_')) as column}
+          {#each table_getAllLeafColumns(tbl).filter((c: any) => !c.id.startsWith('_')) as column, _i (_i)}
             <DropdownMenu.CheckboxItem
               checked={column_getIsVisible(column)}
               onCheckedChange={(v) => column_toggleVisibility(column, !!v)}
@@ -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}
@@ -571,18 +576,18 @@
         <Popover.Content class="w-80">
           <div class="space-y-3">
             <h4 class="font-medium text-sm">{t('common.filter')}</h4>
-            {#each filterableFields as field}
+            {#each filterableFields as field, _i (_i)}
               <div class="space-y-1">
                 <label class="text-xs text-muted-foreground" for="filter-{field.key}">{field.label}</label>
                 {#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}
                   >
                     <option value="">{t('common.all')}</option>
-                    {#each field.options as opt}
+                    {#each field.options as opt, _i (_i)}
                       <option value={opt.value}>{opt.label}</option>
                     {/each}
                   </select>
@@ -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,17 +621,17 @@
   </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">
-          {#each visibleFields.slice(0, 4) as _}
+          {#each visibleFields.slice(0, 4) as _, _i (_i)}
             <Skeleton class="h-4 flex-1" />
           {/each}
         </div>
-        {#each Array(5) as _}
+        {#each Array(5) as _, _i (_i)}
           <div class="flex gap-4">
-            {#each visibleFields.slice(0, 4) as __}
+            {#each visibleFields.slice(0, 4) as __, _i (_i)}
               <Skeleton class="h-8 flex-1" />
             {/each}
           </div>
@@ -640,19 +645,19 @@
       <div in:fade={{ duration: 150 }}>
         <!-- Desktop Table (hidden on mobile) -->
         <div class="hidden md:block">
-        <Table.Root>
-          <Table.Header>
-            {#each table_getHeaderGroups(tbl) as headerGroup}
+        <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 }))}
                 resourceName={resourceName}
                 onReorder={(newOrder) => { columnOrder = newOrder.map((c: any) => c.id); }}
               >
-                {#snippet header(col, index, dragProps)}
+                {#snippet header(col, _index, dragProps)}
                   {@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'}
@@ -688,15 +693,15 @@
             {/each}
           </Table.Header>
           <Table.Body>
-            {#each table_getRowModel(tbl).rows as row}
+            {#each table_getRowModel(tbl).rows as row, _i (_i)}
               {@const record = row.original}
               {@const id = record[primaryKey] as string | number}
               <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'}">
-                      {#each row_getAllVisibleCells(row) as cell}
-                        <Table.Cell>
+                    <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 class="px-4 py-3.5">
                           {#if cell.column.id === '_select'}
                             <Checkbox
                               checked={row_getIsSelected(row)}
@@ -739,7 +744,7 @@
                               {new Date(cell_getValue(cell) as string).toLocaleDateString()}
                             {:else if field?.type === 'tags' && Array.isArray(cell_getValue(cell))}
                               <div class="flex flex-wrap gap-1">
-                                {#each (cell_getValue(cell) as string[]).slice(0, 3) as tag}
+                                {#each (cell_getValue(cell) as string[]).slice(0, 3) as tag, _i (_i)}
                                   <Badge variant="secondary">{tag}</Badge>
                                 {/each}
                               </div>
@@ -787,7 +792,7 @@
               </ContextMenu.Root>
               {#if expandedRowRender && row_getIsExpanded(row)}
                 <Table.Row class="bg-muted/10 border-b border-border/10 transition-all">
-                  <Table.Cell colspan={row_getAllVisibleCells(row).length}>
+                  <Table.Cell colspan={row_getVisibleCells(row).length}>
                     {@render expandedRowRender({ record })}
                   </Table.Cell>
                 </Table.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" />
@@ -821,11 +826,11 @@
 
         <!-- Mobile Card View (visible only on small screens) -->
         <div class="md:hidden space-y-3 p-2">
-          {#each table_getRowModel(tbl).rows as row}
+          {#each table_getRowModel(tbl).rows as row, _i (_i)}
             {@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">
@@ -860,7 +865,7 @@
               </div>
               <!-- Card fields -->
               <div class="space-y-2">
-                {#each visibleFields.slice(0, 6) as field}
+                {#each visibleFields.slice(0, 6) as field, _i (_i)}
                   {@const value = record[field.key]}
                   <div class="flex items-start justify-between gap-4">
                     <span class="text-xs font-medium text-muted-foreground shrink-0">{field.label}</span>
@@ -875,7 +880,7 @@
                         {new Date(value as string).toLocaleDateString()}
                       {:else if field.type === 'tags' && Array.isArray(value)}
                         <div class="flex flex-wrap gap-1 justify-end">
-                          {#each (value as string[]).slice(0, 2) as tag}
+                          {#each (value as string[]).slice(0, 2) as tag, _i (_i)}
                             <Badge variant="secondary" class="text-[10px]">{tag}</Badge>
                           {/each}
                         </div>
@@ -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
@@ -933,7 +938,7 @@
             disabled={currentPage <= 1}
           />
         </PaginationUI.Item>
-        {#each pages as page}
+        {#each pages as page, _i (_i)}
           <PaginationUI.Item>
             {#if page === '...'}
               <PaginationUI.Ellipsis />

package/dist/components/Breadcrumbs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
   import { getResources } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { formatLink } from '@svadmin/core/router';

package/dist/components/ChatDialog.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+/* eslint-disable no-undef, svelte/no-at-html-tags */
   import { getChatProvider, getChatContext, setChatContext, getAgentProvider, registerApproval, resolveApproval } from '@svadmin/core';
-  import type { ChatMessage, ChatAction, AgentEvent } from '@svadmin/core';
+  import type { ChatMessage, ChatAction } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { useParsed } from '@svadmin/core';
   import { fly, fade, scale } from 'svelte/transition';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
-  import { MessageCircle, X, Minus, Send, Loader2, Bot, Trash2, ShieldCheck, ShieldX, Wrench, LayoutDashboard } from '@lucide/svelte';
+  import { MessageCircle, X, Minus, Send, Loader2, Bot, Trash2 } from '@lucide/svelte';
 
   interface Props {
     /** localStorage key for chat history persistence. Set to '' to disable. */
@@ -508,7 +509,7 @@
                 {t('chat.welcomeDesc') || 'Ask me anything about your admin panel.'}
               </p>
               <div class="flex flex-col gap-2 w-full max-w-[240px]">
-                {#each suggestions as suggestion}
+                {#each suggestions as suggestion, _i (_i)}
                   <button
                     class="text-left text-xs px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
                     onclick={() => { inputValue = suggestion; }}
@@ -535,7 +536,7 @@
                       <!-- Action Buttons -->
                       {#if msg.actions && msg.actions.length > 0}
                         <div class="flex flex-wrap gap-1.5 mt-2 pt-2 border-t border-border/50">
-                          {#each msg.actions as action}
+                          {#each msg.actions as action, _i (_i)}
                             <Button
                               variant={action.variant ?? 'outline'}
                               size="sm"

package/dist/components/ComboboxField.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
   import { t } from '@svadmin/core/i18n';
   import { useSelect } from '@svadmin/core';
   import type { Filter } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
-  import { Badge } from './ui/badge/index.js';
   import { Command } from 'cmdk-sv';
   import { Skeleton } from './ui/skeleton/index.js';
   import { ChevronsUpDown, Check, X, Search } from '@lucide/svelte';
@@ -117,11 +117,11 @@
             No results.
           </Command.Empty>
           {#if query.isLoading}
-            {#each Array(3) as _}
+            {#each Array(3) as _, _i (_i)}
               <div class="px-2 py-1.5"><Skeleton class="h-5 w-full" /></div>
             {/each}
           {:else}
-            {#each (options as { label: string; value: string | number }[]) ?? [] as opt}
+            {#each (options as { label: string; value: string | number }[]) ?? [] as opt, _i (_i)}
               <Command.Item
                 value={opt.label}
                 onSelect={() => handleSelect(opt.value)}

package/dist/components/CommandPalette.svelte

@@ -5,7 +5,7 @@
   import { toggleTheme } from '@svadmin/core';
   import { Command } from 'cmdk-sv';
   import * as Dialog from './ui/dialog/index.js';
-  import { Search, LayoutDashboard, Plus, Sun, FileText, Bot, Sparkles } from '@lucide/svelte';
+  import { Search, LayoutDashboard, Plus, Sun, FileText, Sparkles } from '@lucide/svelte';
 
   interface Props {
     open?: boolean;
@@ -93,7 +93,7 @@
             <LayoutDashboard class="h-4 w-4 text-muted-foreground" />
             {t('common.home')}
           </Command.Item>
-          {#each resources as r}
+          {#each resources as r, _i (_i)}
             <Command.Item
               value={r.name}
               onSelect={() => act(() => navigate(`/${r.name}`))}
@@ -109,7 +109,7 @@
 
         <!-- Actions -->
         <Command.Group heading={t('common.actions')}>
-          {#each resources as r}
+          {#each resources as r, _i (_i)}
             <Command.Item
               value={"create-" + r.name}
               onSelect={() => act(() => navigate(`/${r.name}/create`))}

package/dist/components/CopilotPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getChatProvider, getChatContext } from '@svadmin/core';
-  import { Sparkles, X, ChevronRight, Check, RefreshCcw } from '@lucide/svelte';
-  import { fade, slide } from 'svelte/transition';
+  import { Sparkles, X, Check, RefreshCcw } from '@lucide/svelte';
+  import { slide } from 'svelte/transition';
   import { Button } from './ui/button/index.js';
   import MarkdownRenderer from './MarkdownRenderer.svelte';
   import TooltipButton from './TooltipButton.svelte';

package/dist/components/CreatePage.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getResource } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
   import { t } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
   import PageHeader from './PageHeader.svelte';

package/dist/components/DevTools.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { fly, scale } from 'svelte/transition';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+  import { fly } from 'svelte/transition';
   import { getResources } from '@svadmin/core';
   import { getTheme, getColorTheme } from '@svadmin/core';
   import { getLocale, t } from '@svadmin/core/i18n';
   import { currentPath } from '@svadmin/core/router';
-  import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Tabs from './ui/tabs/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -35,6 +35,7 @@
 
   // Auto-trace state changes in dev mode via Svelte 5 $inspect
   if ((import.meta as any).env?.DEV) {
+    // eslint-disable-next-line svelte/no-inspect
     $inspect({ path, theme, colorTheme, locale, resourceCount: resources.length });
   }
 </script>
@@ -119,7 +120,7 @@
                 <!-- Resources -->
                 <div class="py-1">
                   <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">Resources ({resources.length})</h4>
-                  {#each resources as r}
+                  {#each resources as r, _i (_i)}
                     <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
                       <span class="text-xs text-foreground">{r.name}</span>
                       <Badge variant="outline" class="font-mono text-[0.6875rem]">{r.fields.length} fields</Badge>

package/dist/components/DraggableHeader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
   /**
    * DraggableHeader — Wraps table header cells with HTML5 Drag and Drop
    * to enable column reorder. Persists order to localStorage.
@@ -99,7 +100,7 @@
 </script>
 
 <tr class="hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors bg-muted/50">
-  {#each columns as column, index}
+  {#each columns as column, index (index)}
     {@render header(column, index, {
       draggable: true,
       ondragstart: (e: DragEvent) => handleDragStart(e, index),

package/dist/components/EditPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getResource, useDelete } from '@svadmin/core';
+  import { getResource } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { t } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';

package/dist/components/EmptyState.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade, scale } from 'svelte/transition';
+  import { scale } from 'svelte/transition';
   import { PackageOpen } from '@lucide/svelte';
   import { t } from '@svadmin/core';
 

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

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+/* eslint-disable no-import-assign */
   export type { FieldDefinition } from '@svadmin/core';
 </script>
 
@@ -84,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>
@@ -240,7 +241,7 @@
         disabled={disabled}
       >
         <option value="">{t('field.selectPlaceholder')}</option>
-        {#each field.options ?? [] as opt}
+        {#each field.options ?? [] as opt, _i (_i)}
           <option value={opt.value}>{opt.label}</option>
         {/each}
       </select>
@@ -253,7 +254,7 @@
         {disabled}
         placeholder={t('field.selectPlaceholder')}
       >
-        {#each field.options ?? [] as opt}
+        {#each field.options ?? [] as opt, _i (_i)}
           <option value={opt.value}>{opt.label}</option>
         {/each}
       </Select>
@@ -265,7 +266,7 @@
       role="group" 
       aria-labelledby="label-{field.key}"
     >
-      {#each field.options ?? [] as opt}
+      {#each field.options ?? [] as opt, _i (_i)}
         <label class="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5 transition-colors">
           <Checkbox
             id={`${field.key}-${opt.value}`}
@@ -282,7 +283,7 @@
     </div>
     {#if multiVal.length > 0}
       <div class="flex flex-wrap gap-1 mt-1">
-        {#each multiVal as v}
+        {#each multiVal as v, _i (_i)}
           {@const label = field.options?.find((o: { label: string; value: string | number }) => o.value === v)?.label ?? String(v)}
           <Badge variant="secondary" class="gap-1">
             {label}
@@ -306,7 +307,7 @@
   {:else if field.type === 'tags'}
     <div class="space-y-2">
       <div class="flex flex-wrap gap-1.5">
-        {#each tagsVal as tag, i}
+        {#each tagsVal as tag, i (i)}
           <Badge variant="secondary" class="gap-1">
             {tag}
             <button
@@ -339,7 +340,7 @@
 
   {:else if field.type === 'images'}
     <div class="space-y-2">
-      {#each imagesVal as url, i}
+      {#each imagesVal as url, i (i)}
         <div class="flex items-center gap-2">
           <Input
             id={i === 0 ? field.key : undefined}