@svadmin/ui 0.38.2 → 0.38.7

package/dist/components/AutoTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { untrack } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { cn } from '../utils.js';
   import {
     createTable,
@@ -10,33 +10,38 @@
     type ColumnVisibilityState,
     type ExpandedState,
   } from '@tanstack/svelte-table';
-  import type { Updater } from '@tanstack/table-core';
+  import type { Column, Header, TableFeatures } from '@tanstack/table-core';
+  import { createAtom, useSelector } from '@tanstack/svelte-store';
   import {
     column_getCanSort,
     column_getIsSorted,
     column_toggleSorting,
-    column_getIsVisible,
     column_toggleVisibility,
     header_getSize,
     table_getRowModel,
-    table_getHeaderGroups,
     table_getAllLeafColumns,
     table_getIsAllRowsSelected,
     table_toggleAllRowsSelected,
     row_getIsSelected,
     row_toggleSelected,
     row_getVisibleCells,
-    row_getIsExpanded,
     row_toggleExpanded,
     cell_getValue,
   } from '@tanstack/table-core/static-functions';
 
-  import { useList, useDelete, useDeleteMany, getResource, notify } from '@svadmin/core';
-  import type { Pagination as PaginationState, Sort, Filter, FieldDefinition } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext, useList, useDelete, useDeleteMany, getResource, notify } from '@svadmin/core';
+  import type {
+    BaseRecord,
+    FieldDefinition,
+    Filter,
+    LogicalFilter,
+    Pagination as PaginationState,
+    Sort,
+  } from '@svadmin/core';
   import { useCan, getAccessControlProvider } from '@svadmin/core';
   import { readURLState, writeURLState } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { fade } from 'svelte/transition';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
@@ -50,7 +55,7 @@
   import * as ContextMenu from './ui/context-menu/index.js';
   import {
     Plus, Pencil, Trash2,
-    Search, Download, Upload, ChevronDown, ChevronUp, SlidersHorizontal, Filter as FilterIcon,
+    Search, Download, ChevronDown, ChevronUp, SlidersHorizontal, Filter as FilterIcon,
     Eye, Copy
   } from '@lucide/svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
@@ -59,6 +64,8 @@
   import DraggableHeader from './DraggableHeader.svelte';
   import type { Snippet } from 'svelte';
 
+  const i18n = useTranslation();
+
   // ─── Props with Snippet composability ─────────────────────────
   interface Props {
     resourceName: string;
@@ -96,12 +103,13 @@
     pagination: externalPagination,
     sorters: externalSorters,
   }: Props = $props();
+  const adminContext = captureAdminContext();
 
   const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
 
   // ─── URL state + server-side state ────────────────────────────
-  const urlState = readURLState();
+  const urlState = readURLState(adminContext);
 
   // Snapshot resource values for initial state (untrack to avoid reactive tracking)
   const storedPageSize = typeof window !== 'undefined' ? parseInt(localStorage.getItem('svadmin-default-page-size') ?? '', 10) : NaN;
@@ -120,6 +128,22 @@
   );
   let filters = $state<Filter[]>([]);
   let searchText = $state(urlState.search ?? '');
+  let appliedSearchText = $state(untrack(() => searchText));
+  let searchDebounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function scheduleSearch(event: Event) {
+    searchText = (event.currentTarget as HTMLInputElement).value;
+    if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+    searchDebounceTimer = setTimeout(() => {
+      appliedSearchText = searchText;
+      pagination = { ...pagination, current: 1 };
+      searchDebounceTimer = undefined;
+    }, 300);
+  }
+
+  onDestroy(() => {
+    if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+  });
 
   // Sync external controlled state
   $effect(() => {
@@ -141,8 +165,8 @@
       pageSize: pagination.pageSize,
       sortField: sorters[0]?.field,
       sortOrder: sorters[0]?.order,
-      search: searchText || undefined,
-    });
+      search: appliedSearchText || undefined,
+    }, adminContext);
   });
 
   // ─── Build active filters with search ─────────────────────────
@@ -152,18 +176,19 @@
   const activeFilterCount = $derived(Object.values(filterValues).filter(v => v.trim()).length);
   const activeFilters = $derived.by(() => {
     const result: Filter[] = [...filters];
-    if (searchText.trim() && searchableFields.length > 0) {
+    if (appliedSearchText.trim() && searchableFields.length > 0) {
       if (searchableFields.length === 1) {
-        result.push({ field: searchableFields[0].key, operator: 'contains', value: searchText });
+        result.push({ field: searchableFields[0].key, operator: 'contains', value: appliedSearchText });
       } else {
-        result.push({
+        const searchFilter: LogicalFilter = {
           operator: 'or',
           value: searchableFields.map(f => ({
             field: f.key,
             operator: 'contains',
-            value: searchText
+            value: appliedSearchText
           }))
-        } as any);
+        };
+        result.push(searchFilter);
       }
     }
     for (const [key, value] of Object.entries(filterValues)) {
@@ -240,10 +265,10 @@
   const canExport = $derived(canExportPerm.allowed);
 
   // ─── TanStack Table state ────────────────────────────────────
-  let sorting = $state<SortingState>(untrack(() =>
+  const initialSorting = untrack<SortingState>(() =>
     sorters.map(s => ({ id: s.field, desc: s.order === 'desc' }))
-  ));
-  let columnVisibility = $state<ColumnVisibilityState>((() => {
+  );
+  const initialColumnVisibility = (() => {
     // Try to restore from localStorage first
     const storageKey = `svadmin-columns-${resourceName}`;
     if (typeof window !== 'undefined') {
@@ -258,79 +283,41 @@
       if (f.showInList === false) vis[f.key] = false;
     }
     return vis;
-  })());
-  let rowSelection = $state<RowSelectionState>({});
-  let expanded = $state.raw<ExpandedState>({});
-  let columnOrder = $state<string[]>([]);
-
-  function applyTableUpdater<T>(current: T, updater: Updater<T>): T {
-    return typeof updater === 'function' ? (updater as (old: T) => T)(current) : updater;
+  })();
+  const sortingAtom = createAtom(initialSorting);
+  const columnVisibilityAtom = createAtom(initialColumnVisibility);
+  const rowSelectionAtom = createAtom({} as RowSelectionState);
+  const expandedAtom = createAtom({} as ExpandedState);
+  const columnOrderAtom = createAtom([] as string[]);
+
+  const tableSorting = useSelector(sortingAtom);
+  const tableColumnVisibility = useSelector(columnVisibilityAtom);
+  const tableRowSelection = useSelector(rowSelectionAtom);
+  const tableExpanded = useSelector(expandedAtom);
+  const tableColumnOrder = useSelector(columnOrderAtom);
+
+  function rowIsExpanded(rowId: string): boolean {
+    const expanded = tableExpanded.current;
+    return expanded === true || expanded[rowId] === true;
   }
 
-  const tableSorting = $derived<SortingState>(sorting.map(sorter => ({
-    id: sorter.id,
-    desc: sorter.desc,
-  })));
-  const tableColumnVisibility = $derived<ColumnVisibilityState>({ ...columnVisibility });
-  const tableRowSelection = $derived<RowSelectionState>({ ...rowSelection });
-  const tableExpanded = $derived<ExpandedState>(expanded === true ? true : { ...expanded });
-  const tableColumnOrder = $derived<string[]>([...columnOrder]);
-
-  const sortingAtom = {
-    get: () => tableSorting,
-    set: (updater: Updater<SortingState>) => {
-      const nextSorting = applyTableUpdater(tableSorting, updater);
-      sorting = nextSorting;
-
-      const nextSorters: Sort[] = nextSorting.map((s) => ({
-        field: s.id,
-        order: s.desc ? 'desc' as const : 'asc' as const,
-      }));
-
-      if (JSON.stringify(nextSorters) !== JSON.stringify(sorters)) {
-        sorters = nextSorters;
-      }
-
-      if ((pagination.current ?? 1) !== 1) {
-        pagination = { ...pagination, current: 1 };
-      }
-    },
-  };
-
-  const columnVisibilityAtom = {
-    get: () => tableColumnVisibility,
-    set: (updater: Updater<ColumnVisibilityState>) => {
-      columnVisibility = applyTableUpdater(tableColumnVisibility, updater);
-    },
-  };
-
-  const rowSelectionAtom = {
-    get: () => tableRowSelection,
-    set: (updater: Updater<RowSelectionState>) => {
-      rowSelection = applyTableUpdater(tableRowSelection, updater);
-    },
-  };
-
-  const expandedAtom = {
-    get: () => tableExpanded,
-    set: (updater: Updater<ExpandedState>) => {
-      expanded = applyTableUpdater(tableExpanded, updater);
-    },
-  };
+  $effect(() => {
+    const nextSorters: Sort[] = tableSorting.current.map((sorter) => ({
+      field: sorter.id,
+      order: sorter.desc ? 'desc' as const : 'asc' as const,
+    }));
 
-  const columnOrderAtom = {
-    get: () => tableColumnOrder,
-    set: (updater: Updater<string[]>) => {
-      columnOrder = applyTableUpdater(tableColumnOrder, updater);
-    },
-  };
+    if (JSON.stringify(nextSorters) !== JSON.stringify(sorters)) {
+      sorters = nextSorters;
+    }
+  });
 
   // Persist column visibility to localStorage
   $effect(() => {
     const storageKey = `svadmin-columns-${resourceName}`;
     if (typeof window !== 'undefined') {
       try {
-        localStorage.setItem(storageKey, JSON.stringify(columnVisibility));
+        localStorage.setItem(storageKey, JSON.stringify(tableColumnVisibility.current));
       } catch { /* ignore quota errors */ }
     }
   });
@@ -342,8 +329,8 @@
       sorters = externalSorters;
     }
     const nextSorting = externalSorters.map(s => ({ id: s.field, desc: s.order === 'desc' }));
-    if (JSON.stringify(nextSorting) !== JSON.stringify(sorting)) {
-      sorting = nextSorting;
+    if (JSON.stringify(nextSorting) !== JSON.stringify(tableSorting.current)) {
+      sortingAtom.set(nextSorting);
     }
   });
 
@@ -353,7 +340,7 @@
     resource.fields.filter(f => f.showInList !== false)
   );
 
-  const columns = $derived<ColumnDef<any, Record<string, unknown>>[]>([
+  const columns = $derived<ColumnDef<TableFeatures, BaseRecord, unknown>[]>([
     // Selection column
     ...(selectable && (canDelete || batchActions) ? [{
       id: '_select',
@@ -361,7 +348,7 @@
       cell: () => '',
       size: 40,
       enableSorting: false,
-    } satisfies ColumnDef<any, Record<string, unknown>>] : []),
+    } satisfies ColumnDef<TableFeatures, BaseRecord, unknown>] : []),
     // Expand column
     ...(expandedRowRender ? [{
       id: '_expand',
@@ -369,9 +356,9 @@
       cell: () => '',
       size: 40,
       enableSorting: false,
-    } satisfies ColumnDef<any, Record<string, unknown>>] : []),
+    } satisfies ColumnDef<TableFeatures, BaseRecord, unknown>] : []),
     // Data columns
-    ...visibleFields.map((field): ColumnDef<any, Record<string, unknown>> => ({
+    ...visibleFields.map((field): ColumnDef<TableFeatures, BaseRecord, unknown> => ({
       id: field.key,
       accessorKey: field.key,
       header: () => field.label,
@@ -380,33 +367,72 @@
     // Actions column
     {
       id: '_actions',
-      header: () => t('common.actions'),
+      header: () => i18n.t('common.actions'),
       cell: () => '',
       size: 100,
       enableSorting: false,
     },
   ]);
+  const orderedColumns = $derived.by(() => {
+    const columnOrder = tableColumnOrder.current;
+    if (!columnOrder.length) return columns;
+
+    const columnsById = new Map(columns.map((column) => [column.id, column]));
+    return [
+      ...columnOrder.flatMap((id) => {
+        const column = columnsById.get(id);
+        return column ? [column] : [];
+      }),
+      ...columns.filter((column) => !columnOrder.includes(column.id ?? '')),
+    ];
+  });
 
   // ─── Create TanStack Table ────────────────────────────────────
-  const tbl = createTable({
-    get data() { return query.data?.data ?? []; },
-    get columns() { return columns; },
-    getCoreRowModel: createCoreRowModel(),
-    manualPagination: true,
-    manualSorting: true,
-    getRowId: (row: any) => String(row[primaryKey]),
-    atoms: {
-      sorting: sortingAtom,
-      columnVisibility: columnVisibilityAtom,
-      rowSelection: rowSelectionAtom,
-      expanded: expandedAtom,
-      columnOrder: columnOrderAtom,
+  const tbl = createTable(
+    {
+      get data() { return query.data?.data ?? []; },
+      get columns() { return orderedColumns; },
+      getCoreRowModel: createCoreRowModel(),
+      manualPagination: true,
+      manualSorting: true,
+      getRowId: (row: BaseRecord) => String(row[primaryKey]),
+      atoms: {
+        sorting: sortingAtom,
+        columnVisibility: columnVisibilityAtom,
+        rowSelection: rowSelectionAtom,
+        expanded: expandedAtom,
+      },
+      onSortingChange: sortingAtom.set,
+      onColumnVisibilityChange: columnVisibilityAtom.set,
+      onRowSelectionChange: rowSelectionAtom.set,
+      onExpandedChange: expandedAtom.set,
+      get enableRowSelection() { return selectable && (canDelete || batchActions); },
+      get enableExpanding() { return !!expandedRowRender; },
+      getRowCanExpand: () => !!expandedRowRender,
     },
-    get enableRowSelection() { return selectable && (canDelete || batchActions); },
-    get enableExpanding() { return !!expandedRowRender; },
+    // AutoTable reads focused atoms directly; selecting the full state triggers Svelte proxy equality warnings.
+    () => undefined,
+  );
+
+  $effect.pre(() => {
+    const nextColumns = orderedColumns;
+    untrack(() => {
+      tbl.setOptions({ ...tbl.options, columns: nextColumns });
+    });
   });
 
-  const selectedCount = $derived(Object.keys(rowSelection).length);
+  const selectedCount = $derived(Object.keys(tableRowSelection.current).length);
+  const tableView = $derived.by(() => {
+    void tableSorting.current;
+    void tableColumnVisibility.current;
+    void tableRowSelection.current;
+    void tableExpanded.current;
+    void tableColumnOrder.current;
+    return {
+      headerGroups: tbl.getHeaderGroups(),
+      rows: table_getRowModel(tbl).rows,
+    };
+  });
   const totalPages = $derived(Math.ceil((query.data?.total ?? 0) / (pagination.pageSize ?? 10)));
 
   // ─── Pagination helpers ───────────────────────────────────────
@@ -433,7 +459,7 @@
   let confirmAction = $state<() => void>(() => {});
 
   function confirmDelete(id: string | number) {
-    confirmMessage = t('common.deleteConfirm');
+    confirmMessage = i18n.t('common.deleteConfirm');
     confirmAction = async () => {
       await deleteMutation.mutateAsync({ id, resource: resourceName });
       confirmOpen = false;
@@ -442,16 +468,16 @@
   }
 
   function confirmBatchDelete() {
-    const ids = Object.keys(rowSelection);
-    confirmMessage = t('common.batchDeleteConfirm', { count: ids.length });
+    const ids = Object.keys(tableRowSelection.current);
+    confirmMessage = i18n.t('common.batchDeleteConfirm', { count: ids.length });
     confirmAction = async () => {
       try {
         await deleteManyMutation.mutateAsync({ ids, resource: resourceName });
-        notify({ type: 'success', message: t('common.batchDeleteSuccess', { count: ids.length }) });
+        notify({ type: 'success', message: i18n.t('common.batchDeleteSuccess', { count: ids.length }) });
       } catch {
-        notify({ type: 'error', message: t('common.batchDeletePartialFail', { failed: 1, total: ids.length }) });
+        notify({ type: 'error', message: i18n.t('common.batchDeletePartialFail', { failed: 1, total: ids.length }) });
       }
-      rowSelection = {};
+      rowSelectionAtom.set({});
       confirmOpen = false;
     };
     confirmOpen = true;
@@ -491,7 +517,7 @@
     <div class="flex flex-wrap items-center gap-2">
       {#if canExport}
         <Button variant="outline" size="sm" onclick={exportCSV}>
-          <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
+          <Download class="h-4 w-4" data-icon="inline-start" /> {i18n.t('common.export')}
         </Button>
       {/if}
       {#if selectedCount > 0 && canDelete}
@@ -501,12 +527,12 @@
           class="h-9 whitespace-nowrap"
           onclick={confirmBatchDelete}
         >
-          <Trash2 class="h-4 w-4" data-icon="inline-start" /> {t('common.batchDelete', { count: selectedCount })}
+          <Trash2 class="h-4 w-4" data-icon="inline-start" /> {i18n.t('common.batchDelete', { count: selectedCount })}
         </Button>
       {/if}
       
       {#if selectedCount > 0 && batchActions}
-        {@render batchActions({ selectedIds: Object.keys(rowSelection) })}
+        {@render batchActions({ selectedIds: Object.keys(tableRowSelection.current) })}
       {/if}
 
       <!-- Column Visibility Picker (DropdownMenu) -->
@@ -514,14 +540,14 @@
         <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'}
+              <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {i18n.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, _i (_i)}
+          {#each table_getAllLeafColumns(tbl).filter((column: Column<TableFeatures, BaseRecord, unknown>) => !column.id.startsWith('_')) as column, _i (_i)}
             <DropdownMenu.CheckboxItem
-              checked={column_getIsVisible(column)}
+              checked={tableColumnVisibility.current[column.id] ?? true}
               onCheckedChange={(v) => column_toggleVisibility(column, !!v)}
             >
               {visibleFields.find(f => f.key === column.id)?.label ?? column.id}
@@ -533,8 +559,8 @@
         {@render headerActions()}
       {/if}
       {#if canCreate}
-        <Button onclick={() => navigate(`/${resourceName}/create`)}>
-          <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
+        <Button onclick={() => adminContext.navigate(`/${resourceName}/create`)}>
+          <Plus class="h-4 w-4" data-icon="inline-start" /> {i18n.t('common.create')}
         </Button>
       {/if}
     </div>
@@ -547,9 +573,9 @@
         <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
         <Input
           type="text"
-          bind:value={searchText}
-          oninput={() => { pagination = { ...pagination, current: 1 }; }}
-          placeholder={t('common.search')}
+          value={searchText}
+          oninput={scheduleSearch}
+          placeholder={i18n.t('common.search')}
           class="pl-10 h-9"
         />
       </div>
@@ -561,7 +587,7 @@
           {#snippet child({ props })}
             <Button variant="outline" size="sm" class="h-9 px-3" {...props}>
               <FilterIcon class="h-4 w-4" data-icon="inline-start" />
-              {t('common.filter')}
+              {i18n.t('common.filter')}
               {#if activeFilterCount > 0}
                 <Badge variant="secondary" class="ml-1 h-5 min-w-5 px-1">{activeFilterCount}</Badge>
               {/if}
@@ -570,7 +596,7 @@
         </Popover.Trigger>
         <Popover.Content class="w-80">
           <div class="space-y-3">
-            <h4 class="font-medium text-sm">{t('common.filter')}</h4>
+            <h4 class="font-medium text-sm">{i18n.t('common.filter')}</h4>
             {#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>
@@ -581,7 +607,7 @@
                     value={filterValues[field.key] ?? ''}
                     onchange={(e) => filterValues[field.key] = (e.currentTarget as HTMLSelectElement).value}
                   >
-                    <option value="">{t('common.all')}</option>
+                    <option value="">{i18n.t('common.all')}</option>
                     {#each field.options as opt, _i (_i)}
                       <option value={opt.value}>{opt.label}</option>
                     {/each}
@@ -600,13 +626,13 @@
             {/each}
             <div class="flex gap-2 pt-2">
               <Button size="sm" class="flex-1" onclick={() => { pagination = { ...pagination, current: 1 }; }}>
-                {t('common.confirm')}
+                {i18n.t('common.confirm')}
               </Button>
               <Button variant="outline" size="sm" onclick={() => {
                 filterValues = {};
                 pagination = { ...pagination, current: 1 };
               }}>
-                {t('common.reset')}
+                {i18n.t('common.reset')}
               </Button>
             </div>
           </div>
@@ -616,7 +642,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="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} {i18n.t('common.list')}">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -634,7 +660,7 @@
       </div>
     {:else if query.error}
       <div class="flex h-64 items-center justify-center text-destructive text-sm">
-        {t('common.loadFailed', { message: (query.error as Error).message })}
+        {i18n.t('common.loadFailed', { message: (query.error as Error).message })}
       </div>
     {:else}
       <div in:fade={{ duration: 150 }}>
@@ -642,11 +668,11 @@
         <div class="hidden md:block">
         <Table.Root>
           <Table.Header>
-            {#each table_getHeaderGroups(tbl) as headerGroup, _i (_i)}
+            {#each tableView.headerGroups as headerGroup, _i (_i)}
               <DraggableHeader
-                columns={headerGroup.headers.map((h: any) => ({ id: h.column.id, header: h }))}
+                columns={headerGroup.headers.map((header: Header<TableFeatures, BaseRecord, unknown>) => ({ id: header.column.id, header }))}
                 resourceName={resourceName}
-                onReorder={(newOrder) => { columnOrder = newOrder.map((c: any) => c.id); }}
+                onReorder={(newOrder) => columnOrderAtom.set(newOrder.map((column) => column.id))}
               >
                 {#snippet header(col, _index, dragProps)}
                   {@const header = col.header as typeof headerGroup.headers[0]}
@@ -663,7 +689,7 @@
                     {:else if header.id === '_expand'}
                       <!-- empty -->
                     {:else if header.id === '_actions'}
-                      <span class="text-right block">{t('common.actions')}</span>
+                      <span class="text-right block">{i18n.t('common.actions')}</span>
                     {:else if column_getCanSort(header.column)}
                       <Button
                         variant="ghost"
@@ -688,7 +714,7 @@
             {/each}
           </Table.Header>
           <Table.Body>
-            {#each table_getRowModel(tbl).rows as row, _i (_i)}
+            {#each tableView.rows as row, _i (_i)}
               {@const record = row.original}
               {@const id = record[primaryKey] as string | number}
               <ContextMenu.Root>
@@ -703,8 +729,8 @@
                               onCheckedChange={() => row_toggleSelected(row)}
                             />
                           {:else if cell.column.id === '_expand'}
-                            <TooltipButton tooltip={row_getIsExpanded(row) ? t('common.collapse') : t('common.expand')} variant="ghost" size="icon" class="h-7 w-7" onclick={() => row_toggleExpanded(row)}>
-                              {#if row_getIsExpanded(row)}
+                            <TooltipButton tooltip={rowIsExpanded(row.id) ? i18n.t('common.collapse') : i18n.t('common.expand')} variant="ghost" size="icon" class="h-7 w-7" onclick={() => row_toggleExpanded(row)}>
+                              {#if rowIsExpanded(row.id)}
                                 <ChevronUp class="h-4 w-4" />
                               {:else}
                                 <ChevronDown class="h-4 w-4" />
@@ -716,12 +742,12 @@
                                 {@render rowActions({ record, id })}
                               {:else}
                                 {#if canEdit}
-                                  <TooltipButton tooltip={t('common.edit')} variant="ghost" size="icon-sm" onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
+                                  <TooltipButton tooltip={i18n.t('common.edit')} variant="ghost" size="icon-sm" onclick={() => adminContext.navigate(`/${resourceName}/edit/${id}`)}>
                                     <Pencil class="h-4 w-4" />
                                   </TooltipButton>
                                 {/if}
                                 {#if canDelete}
-                                  <TooltipButton tooltip={t('common.delete')} variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} class="hover:text-destructive">
+                                  <TooltipButton tooltip={i18n.t('common.delete')} variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} class="hover:text-destructive">
                                     <Trash2 class="h-4 w-4" />
                                   </TooltipButton>
                                 {/if}
@@ -767,25 +793,25 @@
                 </ContextMenu.Trigger>
                 <ContextMenu.Content class="w-48">
                   {#if canEdit}
-                    <ContextMenu.Item onclick={() => navigate(`/${resourceName}/edit/${id}`)} class="gap-2">
-                      <Pencil class="h-4 w-4" /> {t('common.edit')}
+                    <ContextMenu.Item onclick={() => adminContext.navigate(`/${resourceName}/edit/${id}`)} class="gap-2">
+                      <Pencil class="h-4 w-4" /> {i18n.t('common.edit')}
                     </ContextMenu.Item>
                   {/if}
-                  <ContextMenu.Item onclick={() => navigate(`/${resourceName}/show/${id}`)} class="gap-2">
-                    <Eye class="h-4 w-4" /> {t('common.detail')}
+                  <ContextMenu.Item onclick={() => adminContext.navigate(`/${resourceName}/show/${id}`)} class="gap-2">
+                    <Eye class="h-4 w-4" /> {i18n.t('common.detail')}
                   </ContextMenu.Item>
                   <ContextMenu.Item onclick={() => navigator.clipboard?.writeText(String(id))} class="gap-2">
-                    <Copy class="h-4 w-4" /> {t('common.copyId')}
+                    <Copy class="h-4 w-4" /> {i18n.t('common.copyId')}
                   </ContextMenu.Item>
                   {#if canDelete}
                     <ContextMenu.Separator />
                     <ContextMenu.Item onclick={() => confirmDelete(id)} class="gap-2 text-destructive">
-                      <Trash2 class="h-4 w-4" /> {t('common.delete')}
+                      <Trash2 class="h-4 w-4" /> {i18n.t('common.delete')}
                     </ContextMenu.Item>
                   {/if}
                 </ContextMenu.Content>
               </ContextMenu.Root>
-              {#if expandedRowRender && row_getIsExpanded(row)}
+              {#if expandedRowRender && rowIsExpanded(row.id)}
                 <Table.Row class="bg-muted/10 border-b border-border/10 transition-all">
                   <Table.Cell colspan={row_getVisibleCells(row).length}>
                     {@render expandedRowRender({ record })}
@@ -802,12 +828,12 @@
                       <svg class="h-16 w-16 text-muted-foreground/30 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                         <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-sm font-medium text-muted-foreground mb-1">{i18n.t('common.noData')}</p>
+                      <p class="text-xs text-muted-foreground/60 mb-4">{i18n.t('common.noDataHint')}</p>
                       {#if canCreate}
-                        <Button variant="outline" size="sm" class="gap-2" onclick={() => navigate(`/${resourceName}/create`)}>
+                        <Button variant="outline" size="sm" class="gap-2" onclick={() => adminContext.navigate(`/${resourceName}/create`)}>
                           <Plus class="h-3.5 w-3.5" />
-                          {t('common.create')}
+                          {i18n.t('common.create')}
                         </Button>
                       {/if}
                     </div>
@@ -821,7 +847,7 @@
 
         <!-- Mobile Card View (visible only on small screens) -->
         <div class="md:hidden space-y-3 p-2">
-          {#each table_getRowModel(tbl).rows as row, _i (_i)}
+          {#each tableView.rows as row, _i (_i)}
             {@const record = row.original}
             {@const id = record[primaryKey] as string | number}
             <div
@@ -843,15 +869,15 @@
                     {@render rowActions({ record, id })}
                   {:else}
                     {#if canEdit}
-                      <TooltipButton tooltip={t('common.edit')} variant="ghost" size="icon-sm" onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
+                      <TooltipButton tooltip={i18n.t('common.edit')} variant="ghost" size="icon-sm" onclick={() => adminContext.navigate(`/${resourceName}/edit/${id}`)}>
                         <Pencil class="h-4 w-4" />
                       </TooltipButton>
                     {/if}
-                    <TooltipButton tooltip={t('common.detail')} variant="ghost" size="icon-sm" onclick={() => navigate(`/${resourceName}/show/${id}`)}>
+                    <TooltipButton tooltip={i18n.t('common.detail')} variant="ghost" size="icon-sm" onclick={() => adminContext.navigate(`/${resourceName}/show/${id}`)}>
                       <Eye class="h-4 w-4" />
                     </TooltipButton>
                     {#if canDelete}
-                      <TooltipButton tooltip={t('common.delete')} variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} class="hover:text-destructive">
+                      <TooltipButton tooltip={i18n.t('common.delete')} variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} class="hover:text-destructive">
                         <Trash2 class="h-4 w-4" />
                       </TooltipButton>
                     {/if}
@@ -895,7 +921,7 @@
               {#if emptyState}
                 {@render emptyState()}
               {:else}
-                {t('common.noData')}
+                {i18n.t('common.noData')}
               {/if}
             </div>
           {/each}
@@ -908,7 +934,7 @@
   {#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 items-center gap-2">
-      <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
+      <span>{i18n.t('common.total', { total: query.data?.total ?? 0 })}</span>
       <select
         class="h-8 w-[70px] px-1 py-1 flex items-center justify-between rounded-md border border-input bg-background 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"
         value={String(pagination.pageSize ?? 10)}
@@ -962,7 +988,7 @@
 <ConfirmDialog
   open={confirmOpen}
   message={confirmMessage}
-  confirmText={t('common.delete')}
+  confirmText={i18n.t('common.delete')}
   onconfirm={confirmAction}
   oncancel={() => { confirmOpen = false; }}
 />