@svadmin/ui 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -26,7 +26,25 @@
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",
-    "tailwind-merge": "^3.0.0"
+    "tailwind-merge": "^3.0.0",
+    "marked": "^15.0.0",
+    "marked-highlight": "^2.2.0",
+    "highlight.js": "^11.0.0",
+    "isomorphic-dompurify": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "marked": {
+      "optional": true
+    },
+    "marked-highlight": {
+      "optional": true
+    },
+    "highlight.js": {
+      "optional": true
+    },
+    "isomorphic-dompurify": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@lucide/svelte": "^0.577.0",

package/src/components/AboutSettings.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getResources, getDataProviderNames } from '@svadmin/core';
+  import { getLocale } from '@svadmin/core/i18n';
+  import { getResolvedTheme, getColorTheme } from '@svadmin/core';
+  import * as Card from './ui/card/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Info, Database, Globe, Palette, Layers } from 'lucide-svelte';
+
+  const resources = getResources();
+  const providerNames = getDataProviderNames();
+
+  const version = '__SVADMIN_VERSION__'; // replaced at build time or shown as-is
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.about')}</h2>
+  </div>
+
+  <!-- Version -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Info class="h-4 w-4 text-muted-foreground" />
+        svadmin
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-4 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.version')}</span>
+          <Badge variant="secondary" class="font-mono text-xs">{version}</Badge>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Registered Resources -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Layers class="h-4 w-4 text-muted-foreground" />
+        {t('settings.registeredResources')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-2">
+        {#each resources as resource}
+          <Badge variant="outline" class="font-mono text-xs">{resource.name}</Badge>
+        {/each}
+        {#if resources.length === 0}
+          <p class="text-sm text-muted-foreground">—</p>
+        {/if}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Data Providers -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Database class="h-4 w-4 text-muted-foreground" />
+        {t('settings.dataProvider')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-2">
+        {#each providerNames as name}
+          <Badge variant="outline" class="font-mono text-xs">{name}</Badge>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Current Environment -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Globe class="h-4 w-4 text-muted-foreground" />
+        {t('settings.currentEnvironment')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-3 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.language')}</span>
+          <span class="font-mono text-xs">{getLocale()}</span>
+        </div>
+        <div class="h-px bg-border"></div>
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.themeMode')}</span>
+          <span class="font-mono text-xs">{getResolvedTheme()}</span>
+        </div>
+        <div class="h-px bg-border"></div>
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground flex items-center gap-1.5">
+            <Palette class="h-3.5 w-3.5" />
+            {t('settings.colorAccent')}
+          </span>
+          <span class="font-mono text-xs">{getColorTheme()}</span>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/src/components/AdminApp.svelte

@@ -6,6 +6,7 @@
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
@@ -21,6 +22,7 @@
   import DevTools from './DevTools.svelte';
   import Sidebar from './Sidebar.svelte';
   import Header from './Header.svelte';
+  import SettingsPage from './SettingsPage.svelte';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -149,7 +151,9 @@
     <Layout {title} {menu}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
-      {#if route === '/'}
+      {#if currentPath().startsWith('/settings')}
+        <SettingsPage />
+      {:else if route === '/' || route === ''}
         {#if dashboard}
           {@render dashboard()}
         {:else}

package/src/components/AppearanceSettings.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getTheme, setTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, getColorPresets } from '@svadmin/core';
+  import { getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
+  import * as Card from './ui/card/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Sun, Moon, Monitor, Check } from 'lucide-svelte';
+
+  // Theme mode
+  const themeOptions = [
+    { value: 'light' as const, icon: Sun, label: 'settings.light' },
+    { value: 'dark' as const, icon: Moon, label: 'settings.dark' },
+    { value: 'system' as const, icon: Monitor, label: 'settings.systemTheme' },
+  ];
+
+  let currentTheme = $derived(getTheme());
+  let currentColor = $derived(getColorTheme());
+  let currentLocale = $derived(getLocale());
+  const availableLocales = getAvailableLocales();
+  const presets = getColorPresets();
+
+  // Sidebar density
+  const DENSITY_KEY = 'svadmin-sidebar-density';
+  let density = $state<'compact' | 'standard'>(
+    (typeof localStorage !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard'
+  );
+
+  function setDensity(d: 'compact' | 'standard') {
+    density = d;
+    if (typeof localStorage !== 'undefined') localStorage.setItem(DENSITY_KEY, d);
+  }
+
+  // Page size
+  const PAGE_SIZE_KEY = 'svadmin-default-page-size';
+  const pageSizeOptions = [10, 20, 50];
+  let pageSize = $state<number>(
+    typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10
+  );
+
+  function setPageSize(size: number) {
+    pageSize = size;
+    if (typeof localStorage !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size));
+  }
+
+  // Locale display names
+  const localeNames: Record<string, string> = {
+    'zh-CN': '中文（简体）',
+    'en': 'English',
+    'ja': '日本語',
+    'ko': '한국어',
+  };
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.appearance')}</h2>
+    <p class="text-sm text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+  </div>
+
+  <!-- Theme Mode -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.themeMode')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid grid-cols-3 gap-3">
+        {#each themeOptions as opt}
+          {@const active = currentTheme === opt.value}
+          <button
+            class="relative flex flex-col items-center gap-2 rounded-xl border-2 p-4 transition-all duration-200
+              {active
+                ? 'border-primary bg-primary/5 shadow-sm'
+                : 'border-border hover:border-muted-foreground/30 hover:bg-accent/50'}"
+            onclick={() => setTheme(opt.value)}
+          >
+            {#if active}
+              <div class="absolute top-2 right-2">
+                <Check class="h-3.5 w-3.5 text-primary" />
+              </div>
+            {/if}
+            <div class="h-10 w-10 rounded-lg flex items-center justify-center
+              {active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}">
+              <opt.icon class="h-5 w-5" />
+            </div>
+            <span class="text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">
+              {t(opt.label)}
+            </span>
+          </button>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Color Accent -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.colorAccent')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-3">
+        {#each presets as preset}
+          {@const active = currentColor === preset.name}
+          <button
+            class="group relative h-9 w-9 rounded-full transition-all duration-200 hover:scale-110
+              {active ? 'ring-2 ring-offset-2 ring-offset-background scale-110' : 'opacity-70 hover:opacity-100'}"
+            style="background-color: {preset.color}; {active ? `--tw-ring-color: ${preset.color}` : ''}"
+            onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])}
+            title={preset.label}
+          >
+            {#if active}
+              <Check class="h-4 w-4 text-white absolute inset-0 m-auto drop-shadow-sm" />
+            {/if}
+          </button>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Interface -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.interface')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-5">
+      <!-- Language -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.language')}</p>
+          <p class="text-xs text-muted-foreground">{localeNames[currentLocale] ?? currentLocale}</p>
+        </div>
+        <select
+          class="h-9 rounded-md border border-input bg-background px-3 text-sm ring-offset-background
+            focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          value={currentLocale}
+          onchange={(e) => setLocale((e.target as HTMLSelectElement).value)}
+        >
+          {#each availableLocales as loc}
+            <option value={loc}>{localeNames[loc] ?? loc}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="h-px bg-border"></div>
+
+      <!-- Sidebar Density -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.sidebarDensity')}</p>
+        </div>
+        <div class="flex rounded-lg border border-input overflow-hidden">
+          <button
+            class="px-3 py-1.5 text-xs font-medium transition-colors
+              {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => setDensity('compact')}
+          >{t('settings.compact')}</button>
+          <button
+            class="px-3 py-1.5 text-xs font-medium transition-colors
+              {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => setDensity('standard')}
+          >{t('settings.standard')}</button>
+        </div>
+      </div>
+
+      <div class="h-px bg-border"></div>
+
+      <!-- Default Page Size -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.defaultPageSize')}</p>
+        </div>
+        <div class="flex rounded-lg border border-input overflow-hidden">
+          {#each pageSizeOptions as size}
+            <button
+              class="px-3 py-1.5 text-xs font-mono font-medium transition-colors
+                {pageSize === size ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+              onclick={() => setPageSize(size)}
+            >{size}</button>
+          {/each}
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/src/components/AuditLogViewer.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getAuthProvider } from '@svadmin/core';
+  import type { AuditLog } from '@svadmin/core';
+  import { toast } from '@svadmin/core/toast';
+  import * as Table from './ui/table/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Loader2, ChevronLeft, ChevronRight, Search, FileSearch, Eye, X } from 'lucide-svelte';
+
+  const authProvider = getAuthProvider();
+
+  let logs = $state<AuditLog[]>([]);
+  let total = $state(0);
+  let page = $state(1);
+  let pageSize = 20;
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let searchQuery = $state('');
+
+  // Snapshot drawer
+  let drawerOpen = $state(false);
+  let drawerLog = $state<AuditLog | null>(null);
+
+  async function loadLogs() {
+    if (!authProvider?.getAuditLogs) {
+      error = t('settings.auditNotSupported') ?? 'Audit logs are not supported by the current AuthProvider';
+      loading = false;
+      return;
+    }
+    loading = true;
+    try {
+      const result = await authProvider.getAuditLogs({ page, pageSize });
+      logs = result.data;
+      total = result.total;
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => {
+    loadLogs();
+  });
+
+  let totalPages = $derived(Math.ceil(total / pageSize) || 1);
+
+  let filteredLogs = $derived(
+    searchQuery.trim()
+      ? logs.filter(l =>
+          (l.userName ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+          l.action.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          (l.resource ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+        )
+      : logs
+  );
+
+  function openSnapshot(log: AuditLog) {
+    drawerLog = log;
+    drawerOpen = true;
+  }
+
+  function formatDate(d: string | Date) {
+    return new Date(d).toLocaleString();
+  }
+
+  function getActionColor(action: string): 'default' | 'secondary' | 'destructive' | 'outline' {
+    const a = action.toLowerCase();
+    if (a.includes('delete') || a.includes('remove')) return 'destructive';
+    if (a.includes('create') || a.includes('add')) return 'default';
+    if (a.includes('update') || a.includes('edit')) return 'secondary';
+    return 'outline';
+  }
+</script>
+
+<div class="h-full flex flex-col">
+  <!-- Header -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-foreground flex items-center gap-2">
+      <FileSearch class="h-5 w-5 text-muted-foreground" />
+      {t('settings.auditLogs') ?? 'Audit Logs'}
+    </h2>
+    <p class="text-sm text-muted-foreground mt-1">
+      {t('settings.auditDescription') ?? 'Track and review all system operations for compliance and debugging.'}
+    </p>
+  </div>
+
+  {#if error}
+    <div class="p-6 border border-destructive/20 bg-destructive/5 text-destructive rounded-lg text-center">
+      <p>{error}</p>
+    </div>
+  {:else}
+    <!-- Search Bar -->
+    <div class="mb-4 relative">
+      <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Input
+        bind:value={searchQuery}
+        placeholder={t('settings.searchLogs') ?? 'Search by user, action, or resource...'}
+        class="pl-9"
+      />
+    </div>
+
+    <!-- Table -->
+    <div class="flex-1 border rounded-lg bg-card overflow-hidden">
+      {#if loading}
+        <div class="flex items-center justify-center h-48 text-muted-foreground">
+          <Loader2 class="h-5 w-5 animate-spin mr-2" />
+          {t('common.loading')}
+        </div>
+      {:else}
+        <div class="overflow-auto">
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head class="w-[160px]">{t('settings.auditTime') ?? 'Time'}</Table.Head>
+                <Table.Head>{t('settings.auditUser') ?? 'User'}</Table.Head>
+                <Table.Head>{t('settings.auditAction') ?? 'Action'}</Table.Head>
+                <Table.Head>{t('settings.auditResource') ?? 'Resource'}</Table.Head>
+                <Table.Head class="w-[120px]">{t('settings.auditIp') ?? 'IP Address'}</Table.Head>
+                <Table.Head class="w-[60px] text-center">{t('common.detail') ?? 'Detail'}</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {#each filteredLogs as log}
+                <Table.Row class="hover:bg-muted/50 transition-colors">
+                  <Table.Cell class="text-xs text-muted-foreground font-mono">
+                    {formatDate(log.createdAt)}
+                  </Table.Cell>
+                  <Table.Cell class="text-sm font-medium">{log.userName ?? log.userId ?? '—'}</Table.Cell>
+                  <Table.Cell>
+                    <Badge variant={getActionColor(log.action)}>{log.action}</Badge>
+                  </Table.Cell>
+                  <Table.Cell class="text-sm text-muted-foreground">{log.resource ?? '—'}</Table.Cell>
+                  <Table.Cell class="text-xs text-muted-foreground font-mono">{log.ipAddress ?? '—'}</Table.Cell>
+                  <Table.Cell class="text-center">
+                    {#if log.details}
+                      <Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => openSnapshot(log)}>
+                        <Eye class="h-3.5 w-3.5" />
+                      </Button>
+                    {/if}
+                  </Table.Cell>
+                </Table.Row>
+              {:else}
+                <Table.Row>
+                  <Table.Cell colspan={6} class="h-24 text-center text-muted-foreground">
+                    {t('common.noData')}
+                  </Table.Cell>
+                </Table.Row>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Pagination -->
+    <div class="mt-4 flex items-center justify-between text-sm text-muted-foreground">
+      <span>{total} {t('settings.auditTotal') ?? 'total records'}</span>
+      <div class="flex items-center gap-2">
+        <Button
+          variant="outline" size="sm"
+          disabled={page <= 1}
+          onclick={() => { page--; loadLogs(); }}
+        >
+          <ChevronLeft class="h-4 w-4" />
+        </Button>
+        <span>{page} / {totalPages}</span>
+        <Button
+          variant="outline" size="sm"
+          disabled={page >= totalPages}
+          onclick={() => { page++; loadLogs(); }}
+        >
+          <ChevronRight class="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- Snapshot Drawer -->
+{#if drawerOpen && drawerLog}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="fixed inset-0 z-[100] flex justify-end bg-black/40 backdrop-blur-sm" onclick={() => drawerOpen = false}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="bg-card shadow-2xl w-full max-w-2xl h-full flex flex-col animate-in slide-in-from-right duration-300" onclick={(e) => e.stopPropagation()}>
+      <!-- Drawer Header -->
+      <div class="p-6 border-b border-border flex items-center justify-between bg-muted/30">
+        <div>
+          <h2 class="text-lg font-bold text-foreground flex items-center gap-2">
+            <FileSearch class="h-5 w-5 text-primary" />
+            {t('settings.auditSnapshot') ?? 'Change Snapshot'}
+          </h2>
+          <p class="text-xs text-muted-foreground mt-1">{formatDate(drawerLog.createdAt)} · {drawerLog.userName ?? drawerLog.userId}</p>
+        </div>
+        <button onclick={() => drawerOpen = false} class="text-muted-foreground hover:text-foreground transition p-2 rounded-lg hover:bg-muted">
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Meta Tags -->
+      <div class="px-6 py-3 border-b border-border flex items-center gap-2 flex-wrap">
+        <Badge variant="outline">{drawerLog.action}</Badge>
+        {#if drawerLog.resource}
+          <Badge variant="secondary">{drawerLog.resource}</Badge>
+        {/if}
+        {#if drawerLog.ipAddress}
+          <Badge variant="outline" class="font-mono text-xs">{drawerLog.ipAddress}</Badge>
+        {/if}
+      </div>
+
+      <!-- JSON Diff Viewer -->
+      <div class="flex-1 p-6 overflow-y-auto bg-foreground/[0.03] dark:bg-background/50">
+        <pre class="whitespace-pre-wrap text-xs font-mono leading-relaxed text-foreground/80 bg-muted/30 rounded-lg p-4 border border-border">{typeof drawerLog.details === 'object' ? JSON.stringify(drawerLog.details, null, 2) : drawerLog.details}</pre>
+      </div>
+
+      <!-- Footer -->
+      <div class="p-4 border-t border-border bg-muted/20 text-right text-[11px] text-muted-foreground font-medium">
+        System audit snapshot · Read-only
+      </div>
+    </div>
+  </div>
+{/if}

package/src/components/AutoTable.svelte

@@ -13,7 +13,7 @@
   import { useList, useDelete, getResource } from '@svadmin/core';
   import type { Pagination as PaginationState, Sort, Filter, FieldDefinition } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
-  import { canAccess } from '@svadmin/core/permissions';
+  import { useCan, getAccessControlProvider } from '@svadmin/core';
   import { readURLState, writeURLState } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { fade } from 'svelte/transition';
@@ -77,7 +77,8 @@
   const urlState = readURLState();
 
   // Snapshot resource values for initial state (untrack to avoid reactive tracking)
-  const initPageSize = untrack(() => resource.pageSize ?? 10);
+  const storedPageSize = typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem('svadmin-default-page-size') ?? '', 10) : NaN;
+  const initPageSize = untrack(() => resource.pageSize ?? (isNaN(storedPageSize) ? 10 : storedPageSize));
   const initDefaultSort = untrack(() => resource.defaultSort);
 
   let pagination = $state<{ current: number; pageSize: number }>(untrack(() => externalPagination ?? {
@@ -135,10 +136,15 @@
   const deleteMutation = deleteResult.mutation;
 
   // ─── Permissions ──────────────────────────────────────────────
-  const canCreate = $derived(canAccess(resourceName, 'create').can && resource.canCreate !== false);
-  const canEdit = $derived(canAccess(resourceName, 'edit').can && resource.canEdit !== false);
-  const canDelete = $derived(canAccess(resourceName, 'delete').can && resource.canDelete !== false);
-  const canExport = $derived(canAccess(resourceName, 'export').can);
+  const acEnabled = $derived(!!getAccessControlProvider());
+  const canCreatePerm = useCan(() => ({ resource: resourceName, action: 'create', queryOptions: { enabled: acEnabled } }));
+  const canEditPerm = useCan(() => ({ resource: resourceName, action: 'edit', queryOptions: { enabled: acEnabled } }));
+  const canDeletePerm = useCan(() => ({ resource: resourceName, action: 'delete', queryOptions: { enabled: acEnabled } }));
+  const canExportPerm = useCan(() => ({ resource: resourceName, action: 'export', queryOptions: { enabled: acEnabled } }));
+  const canCreate = $derived(canCreatePerm.allowed && resource.canCreate !== false);
+  const canEdit = $derived(canEditPerm.allowed && resource.canEdit !== false);
+  const canDelete = $derived(canDeletePerm.allowed && resource.canDelete !== false);
+  const canExport = $derived(canExportPerm.allowed);
 
   // ─── TanStack Table state ────────────────────────────────────
   let sorting = $state<SortingState>(untrack(() =>

package/src/components/CanAccess.svelte

@@ -11,7 +11,7 @@
     fallback?: Snippet;
   }>();
 
-  const can = $derived(useCan(resource, action, params));
+  const can = useCan(() => ({ resource, action, params }));
 </script>
 
 {#if can.isLoading}