@svadmin/ui 0.47.1 → 0.49.0

package/dist/components/AdminApp.svelte

@@ -25,14 +25,18 @@
     AuditLogProvider,
     AuthProvider,
     ChatProvider,
+    CredentialProvider,
     DataProviderInput,
+    IdentityGovernanceProvider,
     I18nProvider,
     LiveProvider,
     MenuItem,
     NotificationProvider,
+    OrganizationProvider,
     ProviderBundle,
     ResourceDefinition,
     RouterProvider,
+    SessionProvider,
     TaskProvider,
     TenantAdapter,
     TenantContext,
@@ -93,6 +97,10 @@
     taskProvider?: TaskProvider;
     routerProvider?: RouterProvider;
     tenantAdapter?: TenantAdapter;
+    organizationProvider?: OrganizationProvider;
+    identityGovernanceProvider?: IdentityGovernanceProvider;
+    sessionProvider?: SessionProvider;
+    credentialProvider?: CredentialProvider;
     /** Request/tree-scoped tenant. Tenant identifiers are never rendered by DevTools. */
     tenant?: TenantContext;
     resources: ResourceDefinition[];
@@ -148,6 +156,10 @@
     taskProvider,
     routerProvider,
     tenantAdapter,
+    organizationProvider,
+    identityGovernanceProvider,
+    sessionProvider,
+    credentialProvider,
     tenant,
     resources,
     locale = $bindable(),
@@ -190,6 +202,10 @@
   const resolvedTaskProvider = $derived(taskProvider ?? resolvedProviderBundle?.taskProvider);
   const resolvedRouterInput = $derived(routerProvider ?? resolvedProviderBundle?.routerProvider);
   const resolvedTenantAdapter = $derived(tenantAdapter ?? resolvedProviderBundle?.tenantAdapter);
+  const resolvedOrganizationProvider = $derived(organizationProvider ?? resolvedProviderBundle?.organizationProvider ?? undefined);
+  const resolvedIdentityGovernanceProvider = $derived(identityGovernanceProvider ?? resolvedProviderBundle?.identityGovernanceProvider ?? undefined);
+  const resolvedSessionProvider = $derived(sessionProvider ?? resolvedProviderBundle?.sessionProvider ?? undefined);
+  const resolvedCredentialProvider = $derived(credentialProvider ?? resolvedProviderBundle?.credentialProvider ?? undefined);
   const resolvedI18nProvider = $derived(i18nProvider ?? resolvedProviderBundle?.i18nProvider);
 
   // Resolve router provider (default to hash)
@@ -280,6 +296,10 @@
     get chatProvider() { return resolvedChatProvider ?? null; },
     get agentProvider() { return resolvedAgentProvider ?? null; },
     get taskProvider() { return resolvedTaskProvider; },
+    get organizationProvider() { return resolvedOrganizationProvider ?? null; },
+    get identityGovernanceProvider() { return resolvedIdentityGovernanceProvider ?? null; },
+    get sessionProvider() { return resolvedSessionProvider ?? null; },
+    get credentialProvider() { return resolvedCredentialProvider ?? null; },
     get resources() { return resources; },
     get routerProvider() { return scopedRouterProvider; },
     get tenantAdapter() { return resolvedTenantAdapter; },

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

@@ -1,6 +1,6 @@
 import '../app.css';
 import { type Component, type Snippet } from 'svelte';
-import type { AccessControlProvider, AgentProvider, AuditLogProvider, AuthProvider, ChatProvider, DataProviderInput, I18nProvider, LiveProvider, MenuItem, NotificationProvider, ResourceDefinition, RouterProvider, TaskProvider, TenantAdapter, TenantContext, ThemeConfig, ThemeMode } from '@svadmin/core';
+import type { AccessControlProvider, AgentProvider, AuditLogProvider, AuthProvider, ChatProvider, CredentialProvider, DataProviderInput, IdentityGovernanceProvider, I18nProvider, LiveProvider, MenuItem, NotificationProvider, OrganizationProvider, ResourceDefinition, RouterProvider, SessionProvider, TaskProvider, TenantAdapter, TenantContext, ThemeConfig, ThemeMode } from '@svadmin/core';
 import { QueryClient, type DefaultOptions } from '@tanstack/svelte-query';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
 import type { AdminProviderBundle } from '../types.js';
@@ -21,6 +21,10 @@ interface Props {
     taskProvider?: TaskProvider;
     routerProvider?: RouterProvider;
     tenantAdapter?: TenantAdapter;
+    organizationProvider?: OrganizationProvider;
+    identityGovernanceProvider?: IdentityGovernanceProvider;
+    sessionProvider?: SessionProvider;
+    credentialProvider?: CredentialProvider;
     /** Request/tree-scoped tenant. Tenant identifiers are never rendered by DevTools. */
     tenant?: TenantContext;
     resources: ResourceDefinition[];

package/dist/components/ApiSettings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { captureAdminContext, notifyWithProvider, type ApiCredentialSummary, type WebhookSummary } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Check, Copy, Plus, ShieldCheck, Trash2 } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
@@ -8,91 +9,177 @@
   import ApiKeyList from './content/ApiKeyList.svelte';
   import ContentPageShell from './content/ContentPageShell.svelte';
   import DataState from './content/DataState.svelte';
+  import FeedbackNotice from './content/FeedbackNotice.svelte';
   import SettingsGroup from './content/SettingsGroup.svelte';
   import WorkspaceLayout from './content/WorkspaceLayout.svelte';
 
   const i18n = useTranslation();
-  interface ApiKey { id: string; name: string; maskedToken: string; created: string; permissions: string[]; }
-  interface WebhookEntry { id: string; name: string; url: string; eventType: 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'] },
-  ]);
+  const adminContext = captureAdminContext();
+  const credentialProvider = $derived(adminContext.credentialProvider);
+  const isZh = $derived(i18n.locale === 'zh-CN');
+
+  let keys = $state.raw<ApiCredentialSummary[]>([]);
+  let webhooks = $state.raw<WebhookSummary[]>([]);
   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);
-  let webhooks = $state<WebhookEntry[]>([{ id: 'wh-1', name: 'Order Events', url: 'https://api.acme.com/hooks/orders', eventType: 'resource.updated' }]);
+  let generatedSecret = $state('');
+  let copied = $state(false);
   let newWebhookName = $state('');
   let newWebhookUrl = $state('');
   let newWebhookEvent = $state('resource.created');
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+  let submitting = $state(false);
+  let requestId = 0;
+
+  function message(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+  }
 
-  function handleAddWebhook(event: SubmitEvent) {
+  async function loadCredentials(): Promise<void> {
+    const currentRequest = ++requestId;
+    const provider = credentialProvider;
+    const context = adminContext.enterpriseRequestContext;
+    keys = [];
+    webhooks = [];
+    generatedSecret = '';
+    copied = false;
+    error = null;
+    loading = false;
+    submitting = false;
+    if (!provider) return;
+    loading = true;
+    try {
+      const [nextKeys, nextWebhooks] = await Promise.all([provider.listApiCredentials(context), provider.listWebhooks(context)]);
+      if (currentRequest !== requestId) return;
+      keys = nextKeys;
+      webhooks = nextWebhooks;
+    } catch (caught) {
+      if (currentRequest === requestId) error = message(caught);
+    } finally {
+      if (currentRequest === requestId) loading = false;
+    }
+  }
+
+  $effect(() => {
+    void credentialProvider;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+    void loadCredentials();
+    return () => { requestId += 1; };
+  });
+
+  async function handleAddWebhook(event: SubmitEvent): Promise<void> {
     event.preventDefault();
-    if (!newWebhookName.trim() || !newWebhookUrl.trim()) return;
-    webhooks = [...webhooks, { id: Date.now().toString(), name: newWebhookName.trim(), url: newWebhookUrl.trim(), eventType: newWebhookEvent }];
-    newWebhookName = '';
-    newWebhookUrl = '';
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider || !newWebhookName.trim() || !newWebhookUrl.trim()) return;
+    submitting = true;
+    try {
+      const webhook = await provider.createWebhook({ name: newWebhookName.trim(), url: newWebhookUrl.trim(), eventType: newWebhookEvent }, context);
+      if (currentRequest !== requestId) return;
+      webhooks = [...webhooks, webhook];
+      newWebhookName = '';
+      newWebhookUrl = '';
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) submitting = false;
+    }
   }
-  function generateDemoToken() { return `sv_demo_${Array.from({ length: 24 }, () => Math.floor(Math.random() * 16).toString(16)).join('')}`; }
-  function handleGenerateKey(event: SubmitEvent) {
+
+  async function handleGenerateKey(event: SubmitEvent): Promise<void> {
     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 };
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider || !newKeyName.trim()) return;
+    submitting = true;
+    try {
+      const permissions = Object.entries(newKeyPermissions).filter(([, enabled]) => enabled).map(([name]) => name);
+      const created = await provider.createApiCredential({ name: newKeyName.trim(), permissions }, context);
+      if (currentRequest !== requestId) return;
+      keys = [...keys, created.credential];
+      generatedSecret = created.secret;
+      copied = false;
+      newKeyName = '';
+      newKeyPermissions = { Read: true, Write: false, Delete: false, Admin: false };
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) submitting = false;
+    }
+  }
+
+  async function revokeKey(id: string): Promise<void> {
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    try {
+      const result = await provider.revokeApiCredential(id, context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '密钥撤销失败' : 'Credential revocation failed'));
+      if (currentRequest !== requestId) return;
+      keys = keys.filter((key) => key.id !== id);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    }
   }
-  function deleteKey(id: string) { keys = keys.filter((key) => key.id !== id); }
-  async function copyToken(token: string, id: string) {
+
+  async function deleteWebhook(id: string): Promise<void> {
+    const provider = credentialProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    try {
+      const result = await provider.deleteWebhook(id, context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? 'Webhook 删除失败' : 'Webhook deletion failed'));
+      if (currentRequest !== requestId) return;
+      webhooks = webhooks.filter((webhook) => webhook.id !== id);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    }
+  }
+
+  async function copySecret(): Promise<void> {
     try {
-      await navigator.clipboard.writeText(token);
-      copiedKeyId = id;
-      setTimeout(() => { if (copiedKeyId === id) copiedKeyId = null; }, 2000);
-    } catch { copiedKeyId = null; }
+      await navigator.clipboard.writeText(generatedSecret);
+      copied = true;
+    } catch {
+      copied = false;
+    }
   }
 </script>
 
 <ContentPageShell pageId="api-settings" width="wide" title={i18n.t('settings.api')} description={i18n.t('settings.apiDescription')}>
+  {#if !credentialProvider}<FeedbackNotice tone="warning" message={isZh ? '未配置 CredentialProvider。页面不会在浏览器内生成假密钥或假 Webhook。' : 'CredentialProvider is not configured. This page does not generate simulated browser credentials or webhooks.'} />{/if}
   <WorkspaceLayout secondaryWidth="21rem">
     {#snippet summary()}
-      {#if showCreatedToken}
+      {#if generatedSecret}
         <section class="rounded-lg border border-primary/20 bg-primary/5 p-4" role="status" aria-live="polite">
-          <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div class="flex min-w-0 items-start gap-3"><ShieldCheck class="mt-0.5 size-5 shrink-0 text-primary" /><div class="min-w-0"><h2 class="text-sm font-semibold text-foreground">{i18n.t('api.successTitle')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('api.successHint')}</p></div></div>
-            <Button variant="ghost" size="sm" onclick={() => { showCreatedToken = false; generatedToken = ''; }}>{i18n.t('common.close')}</Button>
-          </div>
-          <div class="mt-4 flex min-w-0 items-center gap-2"><Input readonly value={generatedToken} class="min-w-0 font-mono text-xs" aria-label={i18n.t('api.successTitle')} /><Button size="icon" onclick={() => copyToken(generatedToken, 'new-token')} aria-label={i18n.t('common.copy')}>{#if copiedKeyId === 'new-token'}<Check class="size-4" />{:else}<Copy class="size-4" />{/if}</Button></div>
+          <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"><div class="flex min-w-0 items-start gap-3"><ShieldCheck class="mt-0.5 size-5 shrink-0 text-primary" /><div class="min-w-0"><h2 class="text-sm font-semibold text-foreground">{i18n.t('api.successTitle')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('api.successHint')}</p></div></div><Button variant="ghost" size="sm" onclick={() => { generatedSecret = ''; copied = false; }}>{i18n.t('common.close')}</Button></div>
+          <div class="mt-4 flex min-w-0 items-center gap-2"><Input readonly value={generatedSecret} class="min-w-0 font-mono text-xs" aria-label={i18n.t('api.successTitle')} /><Button size="icon" onclick={copySecret} aria-label={i18n.t('common.copy')}>{#if copied}<Check class="size-4" />{:else}<Copy class="size-4" />{/if}</Button></div>
         </section>
       {/if}
     {/snippet}
     {#snippet primary()}
       <div class="space-y-6">
         <SettingsGroup title={i18n.t('api.activeKeysTitle')} description={i18n.t('api.activeKeysDesc')} bodyClass="p-0">
-          <ApiKeyList class="rounded-none border-0" keys={keys.map((key) => ({ id: key.id, name: key.name, prefix: key.maskedToken, maskedToken: key.maskedToken, createdAt: key.created, permissions: key.permissions }))} stateTitle={i18n.t('api.noKeys')} stateDescription={i18n.t('api.generateDesc')} {copiedKeyId} oncopy={(key) => copyToken(key.maskedToken ?? key.prefix, key.id)} onrevoke={(key) => deleteKey(key.id)} />
+          {#if loading}<DataState state="loading" />{:else if error}<DataState state="error" description={error} retry={loadCredentials} />{:else}<ApiKeyList class="rounded-none border-0" keys={keys.map((key) => ({ id: key.id, name: key.name, prefix: key.prefix, createdAt: new Date(key.createdAt).toLocaleString(), lastUsedAt: key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleString() : undefined, permissions: key.permissions }))} stateTitle={i18n.t('api.noKeys')} stateDescription={credentialProvider ? i18n.t('api.generateDesc') : (isZh ? '配置 CredentialProvider 后可管理真实凭据。' : 'Configure CredentialProvider to manage real credentials.')} onrevoke={credentialProvider ? (key) => revokeKey(key.id) : undefined} />{/if}
         </SettingsGroup>
         <SettingsGroup title={i18n.t('api.webhooks')} description={i18n.t('api.webhooksDesc')} bodyClass="space-y-5">
-          <form class="grid min-w-0 gap-4 md:grid-cols-2" onsubmit={handleAddWebhook}>
-            <div class="space-y-2"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" /></div>
-            <div class="space-y-2"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" /></div>
-            <div class="space-y-2"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div>
-            <div class="flex items-end"><Button type="submit" class="w-full" disabled={!newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="size-4" />{i18n.t('api.addWebhook')}</Button></div>
-          </form>
-          {#if webhooks.length === 0}
-            <DataState state="empty" title={i18n.t('api.noWebhooks')} description={i18n.t('api.webhooksDesc')} />
-          {:else}
-            <div class="divide-y divide-border border-t border-border">{#each webhooks as hook (hook.id)}<div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between"><div class="min-w-0"><p class="text-sm font-medium text-foreground">{hook.name}</p><p class="truncate font-mono text-xs text-muted-foreground">{hook.url}</p></div><div class="flex items-center justify-between gap-3 sm:justify-end"><span class="rounded bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => { webhooks = webhooks.filter((entry) => entry.id !== hook.id); }} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="size-4" /></Button></div></div>{/each}</div>
-          {/if}
+          <form class="grid min-w-0 gap-4 md:grid-cols-2" onsubmit={handleAddWebhook}><div class="space-y-2"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="flex items-end"><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="size-4" />{i18n.t('api.addWebhook')}</Button></div></form>
+          {#if webhooks.length === 0}<DataState state="empty" title={i18n.t('api.noWebhooks')} description={credentialProvider ? i18n.t('api.webhooksDesc') : (isZh ? '配置 CredentialProvider 后可管理真实 Webhook。' : 'Configure CredentialProvider to manage real webhooks.')} />{:else}<div class="divide-y divide-border border-t border-border">{#each webhooks as hook (hook.id)}<div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between"><div class="min-w-0"><p class="text-sm font-medium text-foreground">{hook.name}</p><p class="truncate font-mono text-xs text-muted-foreground">{hook.url}</p></div><div class="flex items-center justify-between gap-3 sm:justify-end"><span class="rounded bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="size-4" /></Button></div></div>{/each}</div>{/if}
         </SettingsGroup>
       </div>
     {/snippet}
     {#snippet secondary()}
       <SettingsGroup title={i18n.t('api.generateTitle')} description={i18n.t('api.generateDesc')}>
-        <form onsubmit={handleGenerateKey} class="space-y-5"><div class="space-y-2"><Label for="api-key-name">{i18n.t('api.keyName')}</Label><Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required /></div><fieldset class="space-y-3"><legend class="text-sm font-medium text-foreground">{i18n.t('api.permissions')}</legend>{#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}</fieldset><Button type="submit" class="w-full">{i18n.t('api.generateButton')}</Button></form>
+        <form onsubmit={handleGenerateKey} class="space-y-5"><div class="space-y-2"><Label for="api-key-name">{i18n.t('api.keyName')}</Label><Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} /></div><fieldset class="space-y-3" disabled={!credentialProvider || submitting}><legend class="text-sm font-medium text-foreground">{i18n.t('api.permissions')}</legend>{#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}</fieldset><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button></form>
       </SettingsGroup>
     {/snippet}
   </WorkspaceLayout>

package/dist/components/AutoTable.svelte

@@ -75,6 +75,7 @@
   interface Props {
     resourceName: string;
     selectable?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Custom header actions (right side) */
     headerActions?: Snippet;
     /** Custom cell renderers by field key */
@@ -98,6 +99,7 @@
   let {
     resourceName,
     selectable = true,
+    density = 'comfortable',
     headerActions,
     columns: customColumns,
     defaultCellRenderer,
@@ -109,6 +111,8 @@
     sorters: externalSorters,
   }: Props = $props();
   const adminContext = captureAdminContext();
+  const headerDensityClass = $derived(density === 'compact' ? 'h-8 py-1.5 text-[0.6875rem]' : 'h-9 py-2.5 text-xs');
+  const cellDensityClass = $derived(density === 'compact' ? 'h-8 px-2 py-1 text-xs' : 'h-10 p-2 text-sm');
 
   const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
@@ -682,7 +686,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} {i18n.t('common.list')}">
+  <div class="overflow-hidden rounded-lg border border-border bg-card shadow-sm" role="region" aria-label="{resource.label} {i18n.t('common.list')}" data-table-density={density}>
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -719,7 +723,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 bg-muted/25 font-medium tracking-normal text-muted-foreground hover:bg-muted/40', headerDensityClass, dragProps.class)}
                     style={header_getSize(header) != null && header_getSize(header) !== 150 ? `width:${header_getSize(header)}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -764,7 +768,7 @@
                   {#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 visibleCells as cell, _i (_i)}
-                        <Table.Cell>
+                        <Table.Cell class={cellDensityClass}>
                           {#if cell.column.id === '_select'}
                             <Checkbox
                               checked={row_getIsSelected(row)}

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

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
     selectable?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Custom header actions (right side) */
     headerActions?: Snippet;
     /** Custom cell renderers by field key */

package/dist/components/Layout.svelte

@@ -28,6 +28,7 @@
   let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto' }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto' } = $props();
   const layoutId = $props.id();
   const layoutScope = `svadmin-layout-${layoutId}`;
+  const mainContentId = `${layoutScope}-main`;
   const chatScope = `${layoutScope}-chat`;
   const adminContext = captureAdminContext();
 
@@ -68,6 +69,10 @@
     }
   }
 
+  function focusMainContent() {
+    document.getElementById(mainContentId)?.focus();
+  }
+
   let collapsed = $state(false);
 
   // Swipe gesture for mobile menu
@@ -150,6 +155,15 @@
   </div>
 {:else}
   <div data-svadmin-layout-scope={layoutScope} class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
+    <button
+      type="button"
+      data-svadmin-skip-link={mainContentId}
+      class="absolute left-3 top-3 z-[100] -translate-y-16 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm transition-transform focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+      onclick={focusMainContent}
+    >
+      {i18n.t('common.skipToMainContent')}
+    </button>
+
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
       <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
@@ -201,7 +215,7 @@
 
       <!-- Content area: responsive padding + centered max-width container
            so wide screens don't stretch content indefinitely (avoids sparse layouts) -->
-      <main data-svadmin-main class="flex-1 overflow-y-auto bg-muted/30 px-4 py-5 sm:px-5 md:px-7.5 md:py-7">
+      <main id={mainContentId} tabindex="-1" data-svadmin-main class="flex-1 overflow-y-auto bg-muted/30 px-4 py-5 sm:px-5 md:px-7.5 md:py-7">
         <div class="mx-auto w-full max-w-[1600px]">
           {#key getPath()}
             <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>

package/dist/components/PasswordInput.svelte

@@ -15,6 +15,7 @@
     placeholder?: string;
     autocomplete?: string;
     showStrength?: boolean;
+    disabled?: boolean;
     class?: string;
   }
 
@@ -25,6 +26,7 @@
     placeholder = '••••••••',
     autocomplete = 'current-password',
     showStrength = false,
+    disabled = false,
     class: className = '',
   }: Props = $props();
 
@@ -66,6 +68,7 @@
       bind:value
       class="pl-9 pr-9"
       autocomplete={autocomplete as any}
+      {disabled}
     />
     <TooltipButton
       tooltip={showPassword ? i18n.t('common.hidePassword') : i18n.t('common.showPassword')}
@@ -74,6 +77,7 @@
       type="button"
       class="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 z-[1]"
       onclick={(e) => { e.preventDefault(); showPassword = !showPassword; }}
+      {disabled}
       tabindex={-1}
     >
       {#if showPassword}

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

@@ -5,6 +5,7 @@ interface Props {
     placeholder?: string;
     autocomplete?: string;
     showStrength?: boolean;
+    disabled?: boolean;
     class?: string;
 }
 declare const PasswordInput: import("svelte").Component<Props, {}, "value">;