@svadmin/ui 0.47.1 → 0.48.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/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">;

package/dist/components/SecuritySettings.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { useNotification } from '@svadmin/core';
+  import { captureAdminContext, notifyWithProvider, type SessionInfo } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-
   import { AlertTriangle, Monitor, Smartphone, Trash2 } from '@lucide/svelte';
-  import type { Component } from 'svelte';
   import * as Alert from './ui/alert/index.js';
   import { Button } from './ui/button/index.js';
   import { Switch } from './ui/switch/index.js';
@@ -11,126 +9,193 @@
   import SettingsGroup from './content/SettingsGroup.svelte';
   import SettingsFieldRow from './content/SettingsFieldRow.svelte';
   import DataState from './content/DataState.svelte';
+  import FeedbackNotice from './content/FeedbackNotice.svelte';
 
   const i18n = useTranslation();
-  const notification = useNotification();
-
-  interface SessionInfo {
-    id: string;
-    os: string;
-    browser: string;
-    ip: string;
-    lastActive: string;
-    isCurrent: boolean;
-    Icon: Component;
-  }
+  const adminContext = captureAdminContext();
+  const authProvider = $derived(adminContext.authProvider);
+  const sessionProvider = $derived(adminContext.sessionProvider);
+  const isZh = $derived(i18n.locale === 'zh-CN');
 
   let is2faEnabled = $state(false);
-  let sessions = $state<SessionInfo[]>([
-    { id: 'current', os: 'macOS', browser: 'Chrome', ip: '192.168.1.102', lastActive: 'Active now', isCurrent: true, Icon: Monitor },
-    { id: 'mobile', os: 'iOS', browser: 'Safari', ip: '192.168.1.105', lastActive: '2 hours ago', isCurrent: false, Icon: Smartphone },
-    { id: 'desktop', os: 'Windows', browser: 'Edge', ip: '10.0.0.4', lastActive: '2 days ago', isCurrent: false, Icon: Monitor },
-  ]);
-
+  let sessions = $state.raw<SessionInfo[]>([]);
+  let loadingSessions = $state(false);
+  let sessionError = $state<string | null>(null);
+  let updatingMfa = $state(false);
+  let revoking = $state<string | null>(null);
   let currentPassword = $state('');
   let newPassword = $state('');
   let confirmPassword = $state('');
   let passwordErrorMessage = $state('');
-  let lastChanged = $state('3 months ago');
+  let changingPassword = $state(false);
+  let requestId = 0;
 
-  function handlePasswordChange(event: SubmitEvent) {
-    event.preventDefault();
-    passwordErrorMessage = '';
+  function message(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+  }
 
-    if (!currentPassword) {
-      passwordErrorMessage = i18n.t('profile.currentPassword');
-      return;
-    }
-    if (newPassword.length < 8) {
-      passwordErrorMessage = i18n.t('validation.minLength', { min: 8 });
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      passwordErrorMessage = i18n.t('auth.passwordMismatch');
-      return;
+  async function loadSecurity(): Promise<void> {
+    const currentRequest = ++requestId;
+    const provider = sessionProvider;
+    const context = adminContext.enterpriseRequestContext;
+    sessions = [];
+    is2faEnabled = false;
+    sessionError = null;
+    loadingSessions = false;
+    if (!provider) return;
+    loadingSessions = true;
+    try {
+      const [nextSessions, mfa] = await Promise.all([
+        provider.listSessions(context),
+        provider.getMfaState?.(context) ?? { enabled: false },
+      ]);
+      if (currentRequest !== requestId) return;
+      sessions = nextSessions;
+      is2faEnabled = mfa.enabled;
+    } catch (caught) {
+      if (currentRequest === requestId) sessionError = message(caught);
+    } finally {
+      if (currentRequest === requestId) loadingSessions = false;
     }
+  }
 
-    notification.success(i18n.t('profile.passwordChanged'), 3000);
-    lastChanged = 'Just now';
+  $effect(() => {
+    void authProvider;
+    void sessionProvider;
+    void adminContext.tenantCacheKey?.__svadminTenant;
     currentPassword = '';
     newPassword = '';
     confirmPassword = '';
+    passwordErrorMessage = '';
+    changingPassword = false;
+    updatingMfa = false;
+    revoking = null;
+    void loadSecurity();
+    return () => { requestId += 1; };
+  });
+
+  async function handleMfaChange(enabled: boolean): Promise<void> {
+    const provider = sessionProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider?.setMfaEnabled) return;
+    updatingMfa = true;
+    try {
+      const result = await provider.setMfaEnabled(enabled, context);
+      if (currentRequest !== requestId) return;
+      is2faEnabled = result.enabled;
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) updatingMfa = false;
+    }
   }
 
-  function revokeSession(id: string) {
-    sessions = sessions.filter((session) => session.id !== id);
+  async function handlePasswordChange(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+    passwordErrorMessage = '';
+    const provider = authProvider;
+    const currentRequest = requestId;
+    if (!provider?.updatePassword) return;
+    if (!currentPassword) passwordErrorMessage = i18n.t('profile.currentPassword');
+    else if (newPassword.length < 8) passwordErrorMessage = i18n.t('validation.minLength', { min: 8 });
+    else if (newPassword !== confirmPassword) passwordErrorMessage = i18n.t('auth.passwordMismatch');
+    if (passwordErrorMessage) return;
+
+    changingPassword = true;
+    try {
+      const result = await provider.updatePassword({ currentPassword, password: newPassword, confirmPassword });
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '密码修改失败' : 'Password update failed'));
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'success', message: i18n.t('profile.passwordChanged') }, adminContext.notificationProvider);
+      currentPassword = '';
+      newPassword = '';
+      confirmPassword = '';
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      passwordErrorMessage = message(caught);
+    } finally {
+      if (currentRequest === requestId) changingPassword = false;
+    }
+  }
+
+  async function revokeSession(id: string): Promise<void> {
+    const provider = sessionProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    revoking = id;
+    try {
+      const result = await provider.revokeSession(id, context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '会话撤销失败' : 'Session revocation failed'));
+      if (currentRequest !== requestId) return;
+      sessions = sessions.filter((session) => session.id !== id);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) revoking = null;
+    }
   }
 
-  function revokeAllOthers() {
-    sessions = sessions.filter((session) => session.isCurrent);
+  async function revokeAllOthers(): Promise<void> {
+    const provider = sessionProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    revoking = '*';
+    try {
+      const result = await provider.revokeOtherSessions(context);
+      if (!result.success) throw new Error(result.error?.message ?? (isZh ? '会话撤销失败' : 'Session revocation failed'));
+      if (currentRequest !== requestId) return;
+      sessions = sessions.filter((session) => session.current);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) revoking = null;
+    }
   }
 </script>
 
 <div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.security')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.securityDescription')}</p>
-  </div>
-
+  <div><h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.security')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.securityDescription')}</p></div>
+  {#if !sessionProvider}
+    <FeedbackNotice tone="warning" message={isZh ? '未配置 SessionProvider。会话和 MFA 设置不会使用模拟数据。' : 'SessionProvider is not configured. Session and MFA controls do not use simulated data.'} />
+  {/if}
   <SettingsGroup title={i18n.t('security.twoFactorAuth')} description={i18n.t('security.twoFactorDescription')}>
-      <SettingsFieldRow label={i18n.t('security.enable2fa')} description={is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}>
-        {#snippet control()}<Switch id="two-factor" bind:checked={is2faEnabled} />{/snippet}
-      </SettingsFieldRow>
+    <SettingsFieldRow label={i18n.t('security.enable2fa')} description={is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}>
+      {#snippet control()}<Switch checked={is2faEnabled} disabled={!sessionProvider?.setMfaEnabled || updatingMfa} onCheckedChange={handleMfaChange} />{/snippet}
+    </SettingsFieldRow>
   </SettingsGroup>
-
-  <SettingsGroup title={i18n.t('profile.changePassword')} description={i18n.t('security.passwordLastChanged', { time: lastChanged })}>
-      <form onsubmit={handlePasswordChange} class="max-w-lg space-y-4">
-        {#if passwordErrorMessage}
-          <Alert.Root variant="destructive">
-            <AlertTriangle class="h-4 w-4" />
-            <Alert.Description>{passwordErrorMessage}</Alert.Description>
-          </Alert.Root>
-        {/if}
-
-        <PasswordInput id="security-current-password" label={i18n.t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" />
-        <PasswordInput id="security-new-password" label={i18n.t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength />
-        <PasswordInput id="security-confirm-password" label={i18n.t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" />
-
-        <Button type="submit">{i18n.t('profile.updatePassword')}</Button>
-      </form>
+  <SettingsGroup title={i18n.t('profile.changePassword')} description={isZh ? '密码修改由 AuthProvider 持久化。' : 'Password changes are persisted by AuthProvider.'}>
+    {#if !authProvider?.updatePassword}<FeedbackNotice tone="warning" message={isZh ? '当前 AuthProvider 不支持修改密码。' : 'The current AuthProvider does not support password updates.'} />{/if}
+    <form onsubmit={handlePasswordChange} class="max-w-lg space-y-4">
+      {#if passwordErrorMessage}<Alert.Root variant="destructive"><AlertTriangle class="h-4 w-4" /><Alert.Description>{passwordErrorMessage}</Alert.Description></Alert.Root>{/if}
+      <PasswordInput id="security-current-password" label={i18n.t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" disabled={!authProvider?.updatePassword || changingPassword} />
+      <PasswordInput id="security-new-password" label={i18n.t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength disabled={!authProvider?.updatePassword || changingPassword} />
+      <PasswordInput id="security-confirm-password" label={i18n.t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" disabled={!authProvider?.updatePassword || changingPassword} />
+      <Button type="submit" disabled={!authProvider?.updatePassword || changingPassword}>{changingPassword ? (isZh ? '更新中...' : 'Updating...') : i18n.t('profile.updatePassword')}</Button>
+    </form>
   </SettingsGroup>
-
   <SettingsGroup title={i18n.t('security.activeSessions')} description={i18n.t('security.sessionsDescription')}>
-    {#snippet actions()}{#if sessions.length > 1}<Button variant="outline" size="sm" onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>{/if}{/snippet}
+    {#snippet actions()}{#if sessions.some((session) => !session.current)}<Button variant="outline" size="sm" disabled={revoking !== null} onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>{/if}{/snippet}
+    {#if loadingSessions}
+      <DataState state="loading" />
+    {:else if sessionError}
+      <DataState state="error" description={sessionError} retry={loadSecurity} />
+    {:else if sessions.length === 0}
+      <DataState state="empty" title={i18n.t('security.noSessions')} description={sessionProvider ? (isZh ? 'Provider 未返回活跃会话。' : 'The provider returned no active sessions.') : (isZh ? '配置 SessionProvider 后可管理真实会话。' : 'Configure SessionProvider to manage real sessions.')} />
+    {:else}
       <div class="divide-y">
         {#each sessions as session (session.id)}
           <div class="flex items-center justify-between gap-4 py-3">
-            <div class="flex min-w-0 items-center gap-3">
-              <div class="rounded-lg bg-muted p-2 text-muted-foreground">
-                <session.Icon class="h-5 w-5" />
-              </div>
-              <div class="min-w-0 space-y-1">
-                <div class="flex flex-wrap items-center gap-2">
-                  <span class="text-sm font-medium">{session.os} - {session.browser}</span>
-                  {#if session.isCurrent}
-                    <span class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">{i18n.t('security.currentSession')}</span>
-                  {/if}
-                </div>
-                <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                  <span>{session.ip}</span>
-                  <span>{session.lastActive}</span>
-                </div>
-              </div>
-            </div>
-            {#if !session.isCurrent}
-              <Button variant="ghost" size="icon-sm" onclick={() => revokeSession(session.id)} title={i18n.t('security.revokeSession')}>
-                <Trash2 class="h-4 w-4" />
-              </Button>
-            {/if}
+            <div class="flex min-w-0 items-center gap-3"><div class="rounded-lg bg-muted p-2 text-muted-foreground">{#if (session.os ?? '').toLowerCase().includes('ios') || (session.os ?? '').toLowerCase().includes('android')}<Smartphone class="h-5 w-5" />{:else}<Monitor class="h-5 w-5" />{/if}</div><div class="min-w-0 space-y-1"><div class="flex flex-wrap items-center gap-2"><span class="text-sm font-medium">{session.os ?? (isZh ? '未知系统' : 'Unknown OS')} - {session.browser ?? (isZh ? '未知浏览器' : 'Unknown browser')}</span>{#if session.current}<span class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">{i18n.t('security.currentSession')}</span>{/if}</div><div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground"><span>{session.ipAddress ?? '-'}</span><span>{session.lastActiveAt ? new Date(session.lastActiveAt).toLocaleString() : '-'}</span></div></div></div>
+            {#if !session.current}<Button variant="ghost" size="icon-sm" disabled={revoking !== null} onclick={() => revokeSession(session.id)} title={i18n.t('security.revokeSession')}><Trash2 class="h-4 w-4" /></Button>{/if}
           </div>
-        {:else}
-          <DataState state="empty" title={i18n.t('security.noSessions')} />
         {/each}
       </div>
+    {/if}
   </SettingsGroup>
 </div>

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

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

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -1,4 +1,12 @@
 <script lang="ts">
+  import {
+    captureAdminContext,
+    notifyWithProvider,
+    type EnterpriseSecurityEvent,
+    type EnterpriseSecurityPolicy,
+    type IdentityProviderSummary,
+    type Organization,
+  } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -10,38 +18,234 @@
   import SettingsGroup from '../content/SettingsGroup.svelte';
   import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   import IntegrationCard from '../content/IntegrationCard.svelte';
-  import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
-  import SecurityEventTable from '../content/SecurityEventTable.svelte';
-  import type { SecurityEvent } from '../content/SecurityEventTable.svelte';
+  import SecurityEventTable, { type SecurityEvent } from '../content/SecurityEventTable.svelte';
+  import DataState from '../content/DataState.svelte';
+  import FeedbackNotice from '../content/FeedbackNotice.svelte';
+
   const i18n = useTranslation();
-  let ssoEnabled = $state(false);
-  let auditLogging = $state(true);
-  const identity: IntegrationSummary[] = [{ id: 'sso', name: 'Enterprise identity provider', description: i18n.t('account.ssoDescription'), account: 'SAML / OIDC', connected: false }];
-  const events: SecurityEvent[] = [{ id: '1', event: 'SSO policy updated', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Today, 09:12', severity: 'info' }, { id: '2', event: 'Audit log retention changed', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Yesterday, 16:40', severity: 'warning' }];
+  const adminContext = captureAdminContext();
+  const identityProvider = $derived(adminContext.identityGovernanceProvider);
+  const organizationProvider = $derived(adminContext.organizationProvider);
+  const isZh = $derived(i18n.locale === 'zh-CN');
+
+  let policy = $state<EnterpriseSecurityPolicy | null>(null);
+  let organization = $state<Organization | null>(null);
+  let organizationName = $state('');
+  let sessionTimeoutValue = $state('');
+  let auditRetentionValue = $state('');
+  let identityProviders = $state.raw<IdentityProviderSummary[]>([]);
+  let events = $state.raw<EnterpriseSecurityEvent[]>([]);
+  let metadataUrl = $state('');
+  let loading = $state(false);
+  let saving = $state(false);
+  let savingOrganization = $state(false);
+  let testing = $state(false);
+  let error = $state<string | null>(null);
+  let requestId = 0;
+  const organizationChanged = $derived(Boolean(
+    organizationProvider?.updateCurrentOrganization
+    && organization
+    && organizationName.trim()
+    && organizationName.trim() !== organization.name,
+  ));
+  const policyNumbersValid = $derived.by(() => {
+    const sessionTimeout = Number(sessionTimeoutValue);
+    const auditRetention = Number(auditRetentionValue);
+    return /^\d+$/.test(sessionTimeoutValue)
+      && /^\d+$/.test(auditRetentionValue)
+      && Number.isSafeInteger(sessionTimeout)
+      && Number.isSafeInteger(auditRetention)
+      && sessionTimeout > 0
+      && auditRetention > 0;
+  });
+
+  function message(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+  }
+
+  async function loadSettings(): Promise<void> {
+    const currentRequest = ++requestId;
+    const scopedIdentityProvider = identityProvider;
+    const scopedOrganizationProvider = organizationProvider;
+    const context = adminContext.enterpriseRequestContext;
+    policy = null;
+    organization = null;
+    organizationName = '';
+    sessionTimeoutValue = '';
+    auditRetentionValue = '';
+    identityProviders = [];
+    events = [];
+    error = null;
+    loading = false;
+    saving = false;
+    savingOrganization = false;
+    testing = false;
+    if (!scopedIdentityProvider && !scopedOrganizationProvider) return;
+    loading = true;
+    try {
+      const [nextPolicy, nextIdentityProviders, nextEvents, nextOrganization] = await Promise.all([
+        scopedIdentityProvider?.getSecurityPolicy(context) ?? null,
+        scopedIdentityProvider?.listIdentityProviders(context) ?? [],
+        scopedIdentityProvider?.listSecurityEvents?.({ page: 1, pageSize: 20 }, context) ?? { data: [], total: 0 },
+        scopedOrganizationProvider?.getCurrentOrganization(context) ?? null,
+      ]);
+      if (currentRequest !== requestId) return;
+      policy = nextPolicy;
+      sessionTimeoutValue = nextPolicy ? String(nextPolicy.sessionTimeoutMinutes) : '';
+      auditRetentionValue = nextPolicy ? String(nextPolicy.auditRetentionDays) : '';
+      identityProviders = nextIdentityProviders;
+      events = nextEvents.data;
+      organization = nextOrganization;
+      organizationName = nextOrganization?.name ?? '';
+      metadataUrl = nextIdentityProviders[0]?.metadataUrl ?? '';
+    } catch (caught) {
+      if (currentRequest === requestId) error = message(caught);
+    } finally {
+      if (currentRequest === requestId) loading = false;
+    }
+  }
+
+  $effect(() => {
+    void identityProvider;
+    void organizationProvider;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+    void loadSettings();
+    return () => { requestId += 1; };
+  });
+
+  async function saveSettings(): Promise<void> {
+    const provider = identityProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider || !policy || !policyNumbersValid) return;
+    saving = true;
+    try {
+      const updatedPolicy = await provider.updateSecurityPolicy({
+        ...policy,
+        sessionTimeoutMinutes: Number(sessionTimeoutValue),
+        auditRetentionDays: Number(auditRetentionValue),
+      }, context);
+      if (currentRequest !== requestId) return;
+      policy = updatedPolicy;
+      sessionTimeoutValue = String(updatedPolicy.sessionTimeoutMinutes);
+      auditRetentionValue = String(updatedPolicy.auditRetentionDays);
+      notifyWithProvider({ type: 'success', message: isZh ? '企业策略已保存' : 'Enterprise policy saved' }, adminContext.notificationProvider);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) saving = false;
+    }
+  }
+
+  async function saveOrganization(): Promise<void> {
+    const provider = organizationProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    const name = organizationName.trim();
+    if (!provider?.updateCurrentOrganization || !organization || !name || name === organization.name) return;
+    savingOrganization = true;
+    try {
+      const updatedOrganization = await provider.updateCurrentOrganization({ name }, context);
+      if (currentRequest !== requestId) return;
+      organization = updatedOrganization;
+      organizationName = updatedOrganization.name;
+      notifyWithProvider({ type: 'success', message: isZh ? '组织信息已保存' : 'Organization saved' }, adminContext.notificationProvider);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) savingOrganization = false;
+    }
+  }
+
+  async function testConnection(target?: IdentityProviderSummary): Promise<void> {
+    const provider = identityProvider;
+    const currentRequest = requestId;
+    const context = adminContext.enterpriseRequestContext;
+    if (!provider) return;
+    testing = true;
+    try {
+      const selectedProvider = target ?? identityProviders[0];
+      const result = await provider.testIdentityProvider({
+        id: selectedProvider?.id,
+        protocol: selectedProvider?.protocol,
+        metadataUrl: target
+          ? target.metadataUrl
+          : (metadataUrl.trim() || selectedProvider?.metadataUrl),
+      }, context);
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({
+        type: result.success ? 'success' : 'error',
+        message: result.success
+          ? (isZh ? '身份源连接测试通过' : 'Identity provider connection succeeded')
+          : (result.error?.message ?? (isZh ? '身份源连接测试失败' : 'Identity provider connection failed')),
+      }, adminContext.notificationProvider);
+    } catch (caught) {
+      if (currentRequest !== requestId) return;
+      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } finally {
+      if (currentRequest === requestId) testing = false;
+    }
+  }
+
+  const displayEvents = $derived(events.map((event): SecurityEvent => ({
+    id: event.id,
+    event: event.event,
+    actor: event.actor,
+    location: event.location,
+    createdAt: event.createdAt instanceof Date ? event.createdAt.toLocaleString() : String(event.createdAt),
+    severity: event.severity === 'critical' ? 'danger' : (event.severity ?? 'info'),
+  })));
 </script>
 
 {#snippet auditControl()}
-  <Switch bind:checked={auditLogging} aria-label={i18n.t('account.auditLogging')} />
+  <Switch checked={policy?.auditLoggingEnabled ?? false} disabled={!policy || saving} aria-label={i18n.t('account.auditLogging')} onCheckedChange={(checked) => { if (policy) policy = { ...policy, auditLoggingEnabled: checked }; }} />
 {/snippet}
 
 {#snippet ssoControl()}
-  <Switch bind:checked={ssoEnabled} aria-label={i18n.t('account.enableSso')} />
+  <Switch checked={policy?.requireSso ?? false} disabled={!policy || saving} aria-label={i18n.t('account.enableSso')} onCheckedChange={(checked) => { if (policy) policy = { ...policy, requireSso: checked }; }} />
 {/snippet}
 
 <ContentPageShell pageId="account-settings-enterprise" width="wide">
   <ContentPageHeader title={i18n.t('account.settingsEnterprise')} description={i18n.t('account.settingsEnterpriseDescription')} />
-  <div class="grid items-start gap-4 lg:grid-cols-2">
-    <SettingsGroup title={i18n.t('account.securityPolicy')} description="Set organization-wide controls for authentication and sessions." bodyClass="space-y-4">
-      <div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div></div>
-      <SettingsFieldRow label={i18n.t('account.auditLogging')} description="Preserve an auditable record of organization-level changes." control={auditControl} separated />
-      <Button size="sm">{i18n.t('common.save')}</Button>
-    </SettingsGroup>
-    <SettingsGroup title={i18n.t('account.singleSignOn')} description={i18n.t('account.ssoDescription')} bodyClass="space-y-4">
-      <SettingsFieldRow label={i18n.t('account.enableSso')} description="Require the configured identity provider for organization members." control={ssoControl} />
-      <Input value="https://idp.example.com/metadata" aria-label={i18n.t('account.ssoProvider')} />
-      <Button variant="outline" size="sm">{i18n.t('common.test')}</Button>
-    </SettingsGroup>
-  </div>
-  <section class="space-y-3"><SectionHeader title={i18n.t('account.connections')} />{#each identity as integration (integration.id)}<IntegrationCard {integration} />{/each}</section>
-  <section class="space-y-3"><SectionHeader title={i18n.t('account.securityLog')} /><SecurityEventTable events={events} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
+  {#if !identityProvider}
+    <FeedbackNotice tone="warning" message={isZh ? '未配置 IdentityGovernanceProvider。企业策略、SSO 测试和安全事件保持不可用，不会伪造保存结果。' : 'IdentityGovernanceProvider is not configured. Enterprise policy, SSO tests, and security events remain unavailable instead of simulating persistence.'} />
+  {/if}
+  {#if loading}
+    <DataState state="loading" />
+  {:else if error}
+    <DataState state="error" title={isZh ? '企业设置加载失败' : 'Enterprise settings failed to load'} description={error} retry={loadSettings} />
+  {:else}
+    <div class="grid items-start gap-4 lg:grid-cols-2">
+      <SettingsGroup title={i18n.t('account.securityPolicy')} description={isZh ? '配置组织级身份、会话与审计策略。' : 'Configure organization-wide identity, session, and audit controls.'} bodyClass="space-y-4">
+        {#if organizationProvider}
+          <div class="space-y-2"><Label for="organization-name">{isZh ? '组织名称' : 'Organization name'}</Label><div class="flex gap-2"><Input id="organization-name" bind:value={organizationName} disabled={!organizationProvider.updateCurrentOrganization || savingOrganization} /><Button variant="outline" size="sm" disabled={!organizationChanged || savingOrganization} onclick={saveOrganization}>{savingOrganization ? (isZh ? '保存中...' : 'Saving...') : i18n.t('common.save')}</Button></div></div>
+        {/if}
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" type="number" min="1" step="1" bind:value={sessionTimeoutValue} disabled={!policy || saving} /></div>
+          <div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" type="number" min="1" step="1" bind:value={auditRetentionValue} disabled={!policy || saving} /></div>
+        </div>
+        {#if policy && !policyNumbersValid}<FeedbackNotice tone="warning" message={isZh ? '会话超时和审计保留天数必须为正整数。' : 'Session timeout and audit retention must be positive integers.'} />{/if}
+        <SettingsFieldRow label={i18n.t('account.auditLogging')} description={isZh ? '由后端持久化组织级审计策略。' : 'Persist the organization audit policy through the backend provider.'} control={auditControl} separated />
+        <Button size="sm" disabled={!identityProvider || !policy || !policyNumbersValid || saving} onclick={saveSettings}>{saving ? (isZh ? '保存中...' : 'Saving...') : i18n.t('common.save')}</Button>
+      </SettingsGroup>
+      <SettingsGroup title={i18n.t('account.singleSignOn')} description={i18n.t('account.ssoDescription')} bodyClass="space-y-4">
+        <SettingsFieldRow label={i18n.t('account.enableSso')} description={isZh ? '启用后由已配置身份源执行组织登录策略。' : 'Require the configured identity provider for organization members.'} control={ssoControl} />
+        <Input bind:value={metadataUrl} placeholder="https://idp.example.com/.well-known/openid-configuration" aria-label={i18n.t('account.ssoProvider')} disabled={!identityProvider || testing} />
+        <Button variant="outline" size="sm" disabled={!identityProvider || testing} onclick={() => testConnection()}>{testing ? (isZh ? '测试中...' : 'Testing...') : i18n.t('common.test')}</Button>
+      </SettingsGroup>
+    </div>
+    <section class="space-y-3">
+      <SectionHeader title={i18n.t('account.connections')} />
+      {#if identityProviders.length === 0}
+        <DataState state="empty" title={isZh ? '尚未配置身份源' : 'No identity provider configured'} description={isZh ? '请在后端 IdentityGovernanceProvider 中创建并验证身份源。' : 'Create and verify an identity provider through the backend IdentityGovernanceProvider.'} />
+      {:else}
+        {#each identityProviders as connection (connection.id)}
+          <IntegrationCard integration={{ id: connection.id, name: connection.name, account: connection.protocol.toUpperCase(), connected: connection.status === 'connected', description: connection.domain ?? connection.metadataUrl }} onconnect={() => testConnection(connection)} />
+        {/each}
+      {/if}
+    </section>
+    <section class="space-y-3"><SectionHeader title={i18n.t('account.securityLog')} /><SecurityEventTable events={displayEvents} emptyTitle={i18n.t('common.noData')} emptyDescription={isZh ? '当前 Provider 未返回安全事件。' : 'The provider returned no security events.'} /></section>
+  {/if}
 </ContentPageShell>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -7,7 +8,11 @@
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import SettingsGroup from '../content/SettingsGroup.svelte';
   import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
+  import FeedbackNotice from '../content/FeedbackNotice.svelte';
   const i18n = useTranslation();
+  const adminContext = captureAdminContext();
+  const credentialProvider = $derived(adminContext.credentialProvider);
+  const isZh = $derived(i18n.locale === 'zh-CN');
   const sections = [{ id: 'profile', title: i18n.t('account.basicSettings') }, { id: 'signin', title: i18n.t('account.socialSignIn') }, { id: 'preferences', title: i18n.t('account.preferences') }, { id: 'api', title: i18n.t('account.manageApi') }];
   let active = $state('profile');
   let visible = $state(true);
@@ -41,7 +46,13 @@
       {:else if active === 'preferences'}
         <SettingsGroup title={i18n.t('account.preferences')} bodyClass="grid gap-4 sm:grid-cols-3"><Input value="English" aria-label={i18n.t('account.language')} /><Input value="Asia/Shanghai" aria-label={i18n.t('account.timezone')} /><Input value="CNY" aria-label={i18n.t('account.currency')} /></SettingsGroup>
       {:else}
-        <SettingsGroup title={i18n.t('account.manageApi')} description="Use scoped credentials and rotate them when access changes." bodyClass="flex flex-col gap-3 sm:flex-row"><Input readonly value="sv_demo_pub_9f3e********41ab" aria-label="API key" /><Button variant="outline">{i18n.t('common.copy')}</Button></SettingsGroup>
+        <SettingsGroup title={i18n.t('account.manageApi')} description={isZh ? '使用有作用域的真实凭据，并在权限变更时轮换。' : 'Use scoped credentials and rotate them when access changes.'} bodyClass="space-y-3">
+          {#if credentialProvider}
+            <Button variant="outline" onclick={() => void adminContext.navigate('/settings/api')}>{isZh ? '打开 API 凭据管理' : 'Open API credential management'}</Button>
+          {:else}
+            <FeedbackNotice tone="warning" message={isZh ? '未配置 CredentialProvider，不会显示或生成演示密钥。' : 'CredentialProvider is not configured. No demo credential is displayed or generated.'} />
+          {/if}
+        </SettingsGroup>
       {/if}
     </div>
   </div>

package/dist/components/ui/sheet/sheet.svelte

@@ -1,8 +1,51 @@
+<script lang="ts" module>
+	let bodyScrollLockDepth = 0;
+	let bodyOverflowBeforeLock = "";
+	const openSheets: HTMLElement[] = [];
+
+	function lockBodyScroll() {
+		if (bodyScrollLockDepth === 0) bodyOverflowBeforeLock = document.body.style.overflow;
+		bodyScrollLockDepth += 1;
+		document.body.style.overflow = "hidden";
+	}
+
+	function unlockBodyScroll() {
+		bodyScrollLockDepth = Math.max(0, bodyScrollLockDepth - 1);
+		if (bodyScrollLockDepth > 0) return;
+		document.body.style.overflow = bodyOverflowBeforeLock;
+		bodyOverflowBeforeLock = "";
+	}
+
+	function registerSheet(panel: HTMLElement) {
+		openSheets.push(panel);
+	}
+
+	function unregisterSheet(panel: HTMLElement) {
+		const index = openSheets.lastIndexOf(panel);
+		if (index >= 0) openSheets.splice(index, 1);
+	}
+
+	function isTopmostSheet(panel: HTMLElement) {
+		return openSheets.at(-1) === panel;
+	}
+</script>
+
 <script lang="ts">
 /* eslint-disable svelte/no-unused-svelte-ignore */
+	import { tick } from "svelte";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
+	const focusableSelector = [
+		'a[href]',
+		'button',
+		'input',
+		'select',
+		'textarea',
+		'[tabindex]:not([tabindex="-1"])',
+		'[contenteditable]:not([contenteditable="false"])',
+	].join(",");
+
 	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		open?: boolean;
 		side?: "left" | "right";
@@ -15,6 +58,7 @@
 		side = "right",
 		onClose,
 		class: className,
+		tabindex = -1,
 		children,
 		...restProps
 	}: Props = $props();
@@ -24,22 +68,88 @@
 		onClose?.();
 	}
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === "Escape") close();
+	function isContentEditableHost(element: HTMLElement) {
+		const contentEditable = element.getAttribute("contenteditable");
+		const isEditable = element.isContentEditable || (contentEditable !== null && contentEditable.toLowerCase() !== "false");
+		return isEditable && !element.parentElement?.isContentEditable;
 	}
 
-	$effect(() => {
-		if (open) {
-			document.addEventListener("keydown", handleKeydown);
-			document.body.style.overflow = "hidden";
-			return () => {
-				document.removeEventListener("keydown", handleKeydown);
-				document.body.style.overflow = "";
-			};
+	function isVisible(element: HTMLElement) {
+		for (let current: HTMLElement | null = element; current; current = current.parentElement) {
+			const style = getComputedStyle(current);
+			if (style.display === "none" || style.visibility === "hidden") return false;
+			if (current === ref) break;
 		}
+		return true;
+	}
+
+	function isTabbable(element: HTMLElement) {
+		if (element.matches(":disabled, [aria-disabled='true']")) return false;
+		if (element.closest("[hidden], [inert], [aria-hidden='true']")) return false;
+		if (element.hasAttribute("tabindex") && element.tabIndex < 0) return false;
+		if (!element.hasAttribute("tabindex") && !isContentEditableHost(element) && element.tabIndex < 0) return false;
+		return isVisible(element);
+	}
+
+	function tabbableElements() {
+		return ref ? [...ref.querySelectorAll<HTMLElement>(focusableSelector)].filter(isTabbable) : [];
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.defaultPrevented || !open || !ref || !isTopmostSheet(ref)) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if (event.key !== "Tab") return;
+
+		const tabbable = tabbableElements();
+		if (tabbable.length === 0) {
+			event.preventDefault();
+			ref.focus();
+			return;
+		}
+
+		const first = tabbable[0];
+		const last = tabbable.at(-1);
+		const activeIndex = tabbable.indexOf(document.activeElement as HTMLElement);
+		if (!ref.contains(document.activeElement) || activeIndex === -1) {
+			event.preventDefault();
+			(event.shiftKey ? last : first)?.focus();
+		} else if (event.shiftKey && activeIndex === 0) {
+			event.preventDefault();
+			last?.focus();
+		} else if (!event.shiftKey && activeIndex === tabbable.length - 1) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+
+	$effect(() => {
+		if (!open || !ref) return;
+		const panel = ref;
+		const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		registerSheet(panel);
+		lockBodyScroll();
+		void tick().then(() => {
+			if (open && ref === panel && isTopmostSheet(panel)) {
+				(tabbableElements()[0] ?? panel).focus();
+			}
+		});
+		return () => {
+			unregisterSheet(panel);
+			unlockBodyScroll();
+			const remainingSheet = openSheets.at(-1);
+			if (!remainingSheet || (previousFocus && remainingSheet.contains(previousFocus))) {
+				previousFocus?.focus();
+			}
+		};
 	});
 </script>
 
+<svelte:document onkeydown={handleKeydown} />
+
 {#if open}
 	<!-- Overlay -->
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
@@ -50,9 +160,11 @@
 	></div>
 
 	<!-- Sheet panel -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
 		bind:this={ref}
 		data-slot="sheet"
+		{tabindex}
 		class={cn(
 			"fixed z-50 flex translate-x-0 flex-col gap-4 bg-background p-6 shadow-lg",
 			side === "right"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.47.1",
+  "version": "0.48.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.38.0",
+    "@svadmin/core": "^0.39.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",