@svadmin/ui 0.88.0 → 0.91.0

package/dist/components/RetryTaskButton.svelte

@@ -6,6 +6,8 @@
   import { createTaskAction } from './task-action.svelte.js';
 
   const i18n = useTranslation();
+  const instanceId = $props.id();
+  const errorId = `${instanceId}-error`;
 
   let {
     taskId,
@@ -37,7 +39,9 @@
   });
 </script>
 
-<Button {variant} {size} onclick={action.run} disabled={!action.available || action.pending}>
+<span class="task-action-feedback">
+<Button {variant} {size} onclick={action.run} disabled={!action.available || action.pending}
+  aria-describedby={action.failed && !onError ? errorId : undefined}>
   {#if action.pending}
     <Loader2 class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
   {:else}
@@ -49,3 +53,12 @@
     {i18n.t('common.retry')}
   {/if}
 </Button>
+{#if action.failed && !onError}
+  <span id={errorId} role="alert">{i18n.t('task.actionFailed')}</span>
+{/if}
+</span>
+
+<style>
+  .task-action-feedback { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 16rem; }
+  .task-action-feedback [role="alert"] { color: var(--destructive); font-size: 12px; line-height: 16px; white-space: normal; overflow-wrap: anywhere; }
+</style>

package/dist/components/RolesSettings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { captureAdminContext } from '@svadmin/core';
   import type { AuthProvider } from '@svadmin/core';
@@ -6,6 +7,8 @@
   import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
   import { toast } from '@svadmin/core/toast';
   import { AlertCircle } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import DataState from './content/DataState.svelte';
 
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
@@ -22,7 +25,8 @@
   let loadingRoles = $state(true);
   let loadingPermissions = $state(false);
   let saving = $state(false);
-  let error = $state<string | null>(null);
+  let error = $state<'roles' | 'unsupported' | null>(null);
+  let permissionError = $state(false);
   let roleRequestEpoch = 0;
   let permissionRequestEpoch = 0;
   let mutationRequestEpoch = 0;
@@ -35,7 +39,7 @@
     }))
   );
 
-  let matrixActions = $state<ActionInfo[]>([
+  let matrixActions = $derived<ActionInfo[]>([
     { code: 'create', name: i18n.t('common.create') ?? 'Create' },
     { code: 'read', name: i18n.t('common.detail') ?? 'Read' },
     { code: 'update', name: i18n.t('common.edit') ?? 'Update' },
@@ -45,7 +49,7 @@
   async function loadRoles(scopedProvider: AuthProvider | null, epoch: number) {
     if (!scopedProvider?.getRoles) {
       if (epoch !== roleRequestEpoch) return;
-      error = i18n.t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
+      error = 'unsupported';
       loadingRoles = false;
       return;
     }
@@ -54,8 +58,8 @@
       if (epoch !== roleRequestEpoch) return;
       roles = fetchedRoles.map(r => ({ code: r.id, ...r }));
       selectedRoleCode = roles[0]?.code ?? '';
-    } catch (e) {
-      if (epoch === roleRequestEpoch) error = (e as Error).message;
+    } catch {
+      if (epoch === roleRequestEpoch) error = 'roles';
     } finally {
       if (epoch === roleRequestEpoch) loadingRoles = false;
     }
@@ -63,15 +67,20 @@
 
   async function loadPermissionsForRole(roleId: string) {
     const scopedProvider = authProvider;
-    const epoch = permissionRequestEpoch;
-    if (!scopedProvider?.getRolePermissions || permissionsCache[roleId]) return;
+    const epoch = ++permissionRequestEpoch;
+    if (permissionsCache[roleId]) return;
+    if (!scopedProvider?.getRolePermissions) {
+      permissionError = true;
+      return;
+    }
     
     loadingPermissions = true;
+    permissionError = false;
     try {
       const perms = await scopedProvider.getRolePermissions(roleId);
       if (epoch === permissionRequestEpoch) permissionsCache[roleId] = perms;
-    } catch (e) {
-      if (epoch === permissionRequestEpoch) toast.error((e as Error).message);
+    } catch {
+      if (epoch === permissionRequestEpoch) permissionError = true;
     } finally {
       if (epoch === permissionRequestEpoch) loadingPermissions = false;
     }
@@ -79,9 +88,13 @@
 
   // Load permissions whenever the selected role changes
   $effect(() => {
-    if (selectedRoleCode && !permissionsCache[selectedRoleCode] && !loadingPermissions) {
-      loadPermissionsForRole(selectedRoleCode);
-    }
+    const roleId = selectedRoleCode;
+    untrack(() => {
+      permissionRequestEpoch += 1;
+      loadingPermissions = false;
+      permissionError = false;
+      if (roleId) void loadPermissionsForRole(roleId);
+    });
   });
 
   $effect(() => {
@@ -94,6 +107,7 @@
     selectedRoleCode = '';
     permissionsCache = {};
     error = null;
+    permissionError = false;
     loadingRoles = true;
     loadingPermissions = false;
     saving = false;
@@ -115,7 +129,8 @@
 
   async function handleToggle(roleCode: string, resourceCode: string, actionCode: string, grant: boolean) {
     const scopedProvider = authProvider;
-    if (!scopedProvider?.updateRolePermissions) return;
+    if (!scopedProvider?.updateRolePermissions || saving || loadingRoles || loadingPermissions
+      || permissionError || roleCode !== selectedRoleCode || !permissionsCache[roleCode]) return;
     const mutationEpoch = ++mutationRequestEpoch;
     
     // Copy state
@@ -141,14 +156,14 @@
       if (result.success) {
         // Success silently
       } else {
-         throw new Error(result.error?.message ?? i18n.t('common.operationFailed'));
+         throw new Error(i18n.t('common.operationFailed'));
       }
-    } catch (e) {
+    } catch {
       if (mutationEpoch !== mutationRequestEpoch) return;
-      toast.error((e as Error).message);
+      toast.error(i18n.t('common.operationFailed'));
       // Rollback on fail
       delete permissionsCache[roleCode]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
-      void loadPermissionsForRole(roleCode);
+      if (selectedRoleCode === roleCode) void loadPermissionsForRole(roleCode);
     } finally {
       if (mutationEpoch === mutationRequestEpoch) saving = false;
     }
@@ -156,21 +171,52 @@
 </script>
 
 {#if error}
-  <div class="svadmin-u-668b21aa5409 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227">
+  <div role="alert" class="svadmin-u-668b21aa5409 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227">
     <div class="svadmin-u-9794ab45094d svadmin-u-0478c89a150f svadmin-u-ca6bcd4b6f3f svadmin-u-f0c1e65bd6f2 svadmin-u-43928fcc832f svadmin-u-811148b13d1e svadmin-u-5f22e64f2282 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-ca6bf63030aa">
       <AlertCircle class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179" />
       <h3 class="svadmin-u-69450ef1487e svadmin-u-42536e69e639">{i18n.t('common.error') ?? 'Error'}</h3>
-      <p>{error}</p>
+      <p>{error === 'unsupported' ? i18n.t('settings.rbacNotSupported') : i18n.t('common.operationFailed')}</p>
+      {#if authProvider?.getRoles}<Button size="sm" variant="outline" onclick={() => {
+        const provider = authProvider;
+        const epoch = ++roleRequestEpoch;
+        error = null;
+        loadingRoles = true;
+        roles = [];
+        selectedRoleCode = '';
+        permissionsCache = {};
+        permissionError = false;
+        void loadRoles(provider, epoch);
+      }}>{i18n.t('common.retry')}</Button>{/if}
     </div>
   </div>
 {:else}
-  <PermissionMatrix 
-    {roles}
-    resources={matrixResources}
-    actions={matrixActions}
-    isGranted={checkGrant}
-    bind:selectedRole={selectedRoleCode}
-    loading={loadingRoles || loadingPermissions || saving}
-    onToggle={handleToggle}
-  />
+  {#if loadingRoles}
+    <DataState state="loading" loadingLabel={i18n.t('common.loading')} />
+  {/if}
+  {#snippet permissionsTableContent()}
+    {#if !permissionError}
+      <DataState state="loading" loadingLabel={i18n.t('common.loading')} />
+    {:else if permissionError}
+      <div role="alert" class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-811148b13d1e">
+        <span>{i18n.t(authProvider?.getRolePermissions ? 'common.operationFailed' : 'settings.rbacNotSupported')}</span>
+        {#if authProvider?.getRolePermissions}
+          <Button size="sm" variant="outline" onclick={() => { if (selectedRoleCode) void loadPermissionsForRole(selectedRoleCode); }}>{i18n.t('common.retry')}</Button>
+        {/if}
+      </div>
+    {/if}
+  {/snippet}
+  {#if !loadingRoles}
+  <div aria-busy={saving}>
+    <PermissionMatrix
+      {roles}
+      resources={matrixResources}
+      actions={matrixActions}
+      isGranted={checkGrant}
+      bind:selectedRole={selectedRoleCode}
+      tableContent={loadingPermissions || permissionError || (selectedRoleCode && !permissionsCache[selectedRoleCode]) ? permissionsTableContent : undefined}
+      loading={loadingRoles || loadingPermissions || saving || permissionError || !permissionsCache[selectedRoleCode] || !authProvider?.updateRolePermissions}
+      onToggle={handleToggle}
+    />
+  </div>
+  {/if}
 {/if}

package/dist/components/SecuritySettings.svelte

@@ -21,50 +21,53 @@
   const sessionProvider = $derived(adminContext.sessionProvider);
   const isZh = $derived(i18n.locale === 'zh-CN');
 
-  let is2faEnabled = $state(false);
+  let is2faEnabled = $state<boolean | null>(null);
   let sessions = $state.raw<SessionInfo[]>([]);
   let loadingSessions = $state(false);
-  let sessionError = $state<string | null>(null);
+  let sessionError = $state(false);
   let updatingMfa = $state(false);
   let revoking = $state<string | null>(null);
   let currentPassword = $state('');
   let newPassword = $state('');
   let confirmPassword = $state('');
   let passwordErrorMessage = $state('');
+  let passwordChangedRecently = $state(false);
+  let passwordRequestFailed = $state(false);
   let changingPassword = $state(false);
-  let requestId = 0;
+  let scopeId = 0;
+  let securityReadId = 0;
   let pendingDanger = $state<{ label: string; run: () => Promise<void> } | null>(null);
   function requestDanger(label: string, run: () => Promise<void>): void {
-    const epoch = requestId;
-    pendingDanger = { label, run: async () => { if (epoch === requestId) await run(); } };
+    const epoch = scopeId;
+    pendingDanger = { label, run: async () => { if (epoch === scopeId) await run(); } };
   }
 
-  function message(error: unknown): string {
-    return error instanceof Error ? error.message : String(error);
+  function failureMessage(): string {
+    return i18n.t('common.operationFailed');
   }
 
   async function loadSecurity(): Promise<void> {
-    const currentRequest = ++requestId;
+    const currentRequest = ++securityReadId;
     const provider = sessionProvider;
     const context = adminContext.enterpriseRequestContext;
     sessions = [];
-    is2faEnabled = false;
-    sessionError = null;
+    is2faEnabled = null;
+    sessionError = false;
     loadingSessions = false;
     if (!provider) return;
     loadingSessions = true;
     try {
       const [nextSessions, mfa] = await Promise.all([
         provider.listSessions(context),
-        provider.getMfaState?.(context) ?? { enabled: false },
+        provider.getMfaState?.(context) ?? null,
       ]);
-      if (currentRequest !== requestId) return;
+      if (currentRequest !== securityReadId) return;
       sessions = nextSessions;
-      is2faEnabled = mfa.enabled;
-    } catch (caught) {
-      if (currentRequest === requestId) sessionError = message(caught);
+      is2faEnabled = typeof mfa?.enabled === 'boolean' ? mfa.enabled : null;
+    } catch {
+      if (currentRequest === securityReadId) sessionError = true;
     } finally {
-      if (currentRequest === requestId) loadingSessions = false;
+      if (currentRequest === securityReadId) loadingSessions = false;
     }
   }
 
@@ -76,41 +79,49 @@
     newPassword = '';
     confirmPassword = '';
     passwordErrorMessage = '';
+    passwordChangedRecently = false;
+    passwordRequestFailed = false;
     changingPassword = false;
     updatingMfa = false;
     revoking = null;
     pendingDanger = null;
     void loadSecurity();
-    return () => { requestId += 1; };
+    return () => {
+      scopeId += 1;
+      securityReadId += 1;
+    };
   });
 
   async function handleMfaChange(enabled: boolean, confirmed = false): Promise<void> {
+    if (is2faEnabled === null || loadingSessions || sessionError || updatingMfa) return;
     if (!enabled && !confirmed) {
       requestDanger(isZh ? '关闭两步验证' : 'Disable two-factor authentication', () => handleMfaChange(false, true));
       return;
     }
     const provider = sessionProvider;
-    const currentRequest = requestId;
+    const currentRequest = scopeId;
     const context = adminContext.enterpriseRequestContext;
     if (!provider?.setMfaEnabled) return;
     updatingMfa = true;
     try {
       const result = await provider.setMfaEnabled(enabled, context);
-      if (currentRequest !== requestId) return;
+      if (currentRequest !== scopeId) return;
       is2faEnabled = result.enabled;
-    } catch (caught) {
-      if (currentRequest !== requestId) return;
-      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } catch {
+      if (currentRequest !== scopeId) return;
+      notifyWithProvider({ type: 'error', message: failureMessage() }, adminContext.notificationProvider);
     } finally {
-      if (currentRequest === requestId) updatingMfa = false;
+      if (currentRequest === scopeId) updatingMfa = false;
     }
   }
 
   async function handlePasswordChange(event: SubmitEvent): Promise<void> {
     event.preventDefault();
+    if (changingPassword) return;
     passwordErrorMessage = '';
+    passwordRequestFailed = false;
     const provider = authProvider;
-    const currentRequest = requestId;
+    const currentRequest = scopeId;
     if (!provider?.updatePassword) return;
     if (!currentPassword) passwordErrorMessage = i18n.t('profile.currentPassword');
     else if (newPassword.length < 8) passwordErrorMessage = i18n.t('validation.minLength', { min: 8 });
@@ -120,63 +131,66 @@
     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;
+      if (!result.success) throw new Error('Password update failed');
+      if (currentRequest !== scopeId) return;
       notifyWithProvider({ type: 'success', message: i18n.t('profile.passwordChanged') }, adminContext.notificationProvider);
+      passwordChangedRecently = true;
       currentPassword = '';
       newPassword = '';
       confirmPassword = '';
-    } catch (caught) {
-      if (currentRequest !== requestId) return;
-      passwordErrorMessage = message(caught);
+    } catch {
+      if (currentRequest !== scopeId) return;
+      passwordRequestFailed = true;
     } finally {
-      if (currentRequest === requestId) changingPassword = false;
+      if (currentRequest === scopeId) changingPassword = false;
     }
   }
 
   async function revokeSession(id: string, confirmed = false): Promise<void> {
+    if (revoking !== null) return;
     if (!confirmed) {
       requestDanger(`${i18n.t('security.revokeSession')}: ${id}`, () => revokeSession(id, true));
       return;
     }
     const provider = sessionProvider;
-    const currentRequest = requestId;
+    const currentRequest = scopeId;
     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;
+      if (!result.success) throw new Error('Session revocation failed');
+      if (currentRequest !== scopeId) return;
       sessions = sessions.filter((session) => session.id !== id);
-    } catch (caught) {
-      if (currentRequest !== requestId) return;
-      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } catch {
+      if (currentRequest !== scopeId) return;
+      notifyWithProvider({ type: 'error', message: failureMessage() }, adminContext.notificationProvider);
     } finally {
-      if (currentRequest === requestId) revoking = null;
+      if (currentRequest === scopeId) revoking = null;
     }
   }
 
   async function revokeAllOthers(confirmed = false): Promise<void> {
+    if (revoking !== null) return;
     if (!confirmed) {
       requestDanger(i18n.t('security.revokeOthers'), () => revokeAllOthers(true));
       return;
     }
     const provider = sessionProvider;
-    const currentRequest = requestId;
+    const currentRequest = scopeId;
     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;
+      if (!result.success) throw new Error('Session revocation failed');
+      if (currentRequest !== scopeId) return;
       sessions = sessions.filter((session) => session.current);
-    } catch (caught) {
-      if (currentRequest !== requestId) return;
-      notifyWithProvider({ type: 'error', message: message(caught) }, adminContext.notificationProvider);
+    } catch {
+      if (currentRequest !== scopeId) return;
+      notifyWithProvider({ type: 'error', message: failureMessage() }, adminContext.notificationProvider);
     } finally {
-      if (currentRequest === requestId) revoking = null;
+      if (currentRequest === scopeId) revoking = null;
     }
   }
 </script>
@@ -187,17 +201,18 @@
     <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')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
-    <SettingsFieldRow controlId={`${controlId}-mfa`} label={i18n.t('security.enable2fa')} description={is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}>
-      {#snippet control()}<Switch id={`${controlId}-mfa`} bind:checked={() => is2faEnabled, (enabled) => { void handleMfaChange(enabled); }} disabled={!sessionProvider?.setMfaEnabled || updatingMfa} />{/snippet}
+    <SettingsFieldRow controlId={`${controlId}-mfa`} label={i18n.t('security.enable2fa')} description={is2faEnabled === null ? i18n.t('security.twoFactorUnknown') : (is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive'))}>
+      {#snippet control()}<Switch id={`${controlId}-mfa`} bind:checked={() => is2faEnabled === true, (enabled) => { void handleMfaChange(enabled); }} disabled={!sessionProvider?.setMfaEnabled || is2faEnabled === null || updatingMfa} />{/snippet}
     </SettingsFieldRow>
   </SettingsGroup>
   <SettingsGroup title={i18n.t('profile.changePassword')} description={isZh ? '密码修改由 AuthProvider 持久化。' : 'Password changes are persisted by AuthProvider.'} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     {#if !authProvider?.updatePassword}<FeedbackNotice tone="warning" message={isZh ? '当前 AuthProvider 不支持修改密码。' : 'The current AuthProvider does not support password updates.'} />{/if}
     <form onsubmit={handlePasswordChange} class="svadmin-u-6199866f612f svadmin-u-3e7ce58d64fa">
-      {#if passwordErrorMessage}<Alert.Root variant="destructive"><AlertTriangle class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" /><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} />
+      {#if passwordRequestFailed || passwordErrorMessage}<Alert.Root variant="destructive"><AlertTriangle class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" /><Alert.Description>{passwordRequestFailed ? failureMessage() : passwordErrorMessage}</Alert.Description></Alert.Root>{/if}
+      <PasswordInput id={`${controlId}-security-current-password`} label={i18n.t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" disabled={!authProvider?.updatePassword || changingPassword} />
+      <PasswordInput id={`${controlId}-security-new-password`} label={i18n.t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength disabled={!authProvider?.updatePassword || changingPassword} />
+      <PasswordInput id={`${controlId}-security-confirm-password`} label={i18n.t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" disabled={!authProvider?.updatePassword || changingPassword} />
+      {#if passwordChangedRecently}<p class="text-xs text-muted-foreground">{i18n.t('profile.passwordChangedRecently')}</p>{/if}
       <Button type="submit" disabled={!authProvider?.updatePassword || changingPassword}>{changingPassword ? (isZh ? '更新中...' : 'Updating...') : i18n.t('profile.updatePassword')}</Button>
     </form>
   </SettingsGroup>
@@ -206,7 +221,7 @@
     {#if loadingSessions}
       <DataState state="loading" />
     {:else if sessionError}
-      <DataState state="error" description={sessionError} retry={loadSecurity} />
+      <DataState state="error" description={failureMessage()} 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}

package/dist/components/SegmentedControl.svelte

@@ -9,7 +9,7 @@
 
   interface Props<T extends string = string> {
     options: readonly SegmentedControlOption<T>[];
-    value?: T;
+    value?: T | undefined;
     disabled?: boolean;
     ariaLabel: string;
     dir?: 'ltr' | 'rtl';
@@ -52,7 +52,9 @@
   }
 
   function handleKeydown(event: KeyboardEvent, option: SegmentedControlOption<T>, index: number): void {
-    if (disabled || option.disabled) return;
+    const current = event.currentTarget;
+    if (disabled || option.disabled || event.altKey || event.ctrlKey || event.metaKey
+      || !(current instanceof HTMLButtonElement) || current.matches(':disabled')) return;
     const rtl = getComputedStyle(root).direction === 'rtl' || dir === 'rtl';
     if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
       event.preventDefault();

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

@@ -5,7 +5,7 @@ export interface SegmentedControlOption<T extends string = string> {
 }
 interface Props<T extends string = string> {
     options: readonly SegmentedControlOption<T>[];
-    value?: T;
+    value?: T | undefined;
     disabled?: boolean;
     ariaLabel: string;
     dir?: 'ltr' | 'rtl';

package/dist/components/Sidebar.svelte

@@ -463,7 +463,7 @@
           />
           <div class="svadmin-u-36e579c0b41c svadmin-u-7e0b7cdf1a94">
             <p class="svadmin-u-f283ea9bea0e svadmin-u-a14daebf7748 svadmin-u-2689f3958069 svadmin-u-a7a63217e098">{identity.name}</p>
-            <p class="svadmin-u-f283ea9bea0e svadmin-u-d058ca6de60f svadmin-u-5f1ff8fe8768">{((identity as Record<string, unknown>)['role'] || (identity as Record<string, unknown>)['roleName']) ?? 'User'}</p>
+            <p class="svadmin-u-f283ea9bea0e svadmin-u-d058ca6de60f svadmin-u-5f1ff8fe8768">{((identity as Record<string, unknown>)['role'] || (identity as Record<string, unknown>)['roleName']) ?? i18n.t('common.user')}</p>
           </div>
           <button
             class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-3e3534b4c5df svadmin-u-646e10356266 svadmin-u-0b48b877be2a svadmin-u-ceb69a6b0e5f"

package/dist/components/StepsForm.svelte

@@ -15,6 +15,7 @@
   import FieldRenderer from './FieldRenderer.svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
   import { Skeleton } from './ui/skeleton/index.js';
+  import { withoutArrayFieldMetadata } from './fields/array-field-metadata.js';
 
   const i18n = useTranslation();
 
@@ -25,7 +26,7 @@
 
   interface Props {
     resourceName: string;
-    id?: string | number;
+    id?: string | number | undefined;
     mode?: 'create' | 'edit';
     steps: StepDef[];
     onSuccess?: () => void;
@@ -102,6 +103,7 @@
   let element = $state.raw<HTMLFormElement>();
   let submitError = $state<string | null>(null);
   let submission = $state.raw<object>();
+  const instanceId = $props.id();
   const scope = $derived({
     contract: binding.resource, id, mode, allowed, configurationValid,
     steps: JSON.stringify(steps), provider: adminContext.providers?.[binding.dataProviderName],
@@ -110,6 +112,14 @@
     session: captureAuthSession(adminContext.authProvider),
   });
   const rendered = $derived({ scope, step: form.steps.currentStep });
+  const authoritativeDraft = $derived({ scope, values: form.values });
+  let acceptedDraft = $state.raw<{
+    snapshot: typeof authoritativeDraft;
+    values: Record<string, unknown>;
+  }>();
+  // 仅回显本次写入已确认的 UI 身份；新的 Core 快照使缓存立即失效。
+  const renderedValues = $derived(acceptedDraft?.snapshot === authoritativeDraft
+    ? acceptedDraft.values : authoritativeDraft.values);
   let mounted = true;
   let confirmation = $state.raw<typeof rendered>();
   const currentRendered = (origin: typeof rendered) => mounted && origin === rendered &&
@@ -122,11 +132,35 @@
     confirmation = undefined;
   });
   $effect(() => () => { mounted = false; submission = undefined; confirmation = undefined; });
-  function errorId(field: string): string { return `${resourceName}-step-${field}-error`; }
+  function errorId(field: string): string { return `${instanceId}-${resourceName}-step-${field}-error`; }
+  const focusableFieldSelector = [
+    'input:not([type="hidden"])', 'textarea', 'select', 'button', '[tabindex]',
+  ].join(', ');
+  function insideDisabledFieldset(candidate: HTMLElement): boolean {
+    for (let parent = candidate.parentElement; parent; parent = parent.parentElement) {
+      if (!(parent instanceof HTMLFieldSetElement) || !parent.disabled) continue;
+      const legend = Array.from(parent.children).find(child => child instanceof HTMLLegendElement);
+      if (!legend?.contains(candidate)) return true;
+    }
+    return false;
+  }
+  function focusFirstActionableControl(field: HTMLElement): boolean {
+    for (const candidate of field.querySelectorAll<HTMLElement>(focusableFieldSelector)) {
+      if (candidate.matches(':disabled, [disabled], input[type="hidden"]')) continue;
+      if (candidate.closest('[hidden], [inert], [aria-disabled="true"]')) continue;
+      if (insideDisabledFieldset(candidate)) continue;
+      candidate.focus();
+      if (document.activeElement === candidate) return true;
+    }
+    return false;
+  }
   async function focusInvalid(origin: typeof scope) {
     await tick();
-    if (mounted && scope === origin && origin.session.isCurrent() && element?.isConnected) {
-      element.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
+    if (!mounted || scope !== origin || !origin.session.isCurrent() || !element?.isConnected) return;
+    // 嵌套数组的子字段键不属于当前步骤的顶层错误。
+    for (const field of element.querySelectorAll<HTMLElement>(':scope > [data-svadmin-field]')) {
+      const key = field.getAttribute('data-svadmin-field-key');
+      if (key && form.errors[key] && focusFirstActionableControl(field)) return;
     }
   }
   const changeStep = $derived.by(() => {
@@ -140,7 +174,15 @@
   const fieldChange = $derived.by(() => {
     const origin = rendered;
     return (key: string) => (value: unknown) => {
-      if (currentRendered(origin)) form.setFieldValue(key, value);
+      if (!currentRendered(origin)) return;
+      const previous = renderedValues;
+      form.setFieldValue(key, withoutArrayFieldMetadata(value));
+      if (currentRendered(origin)) {
+        acceptedDraft = {
+          snapshot: authoritativeDraft,
+          values: { ...previous, [key]: value },
+        };
+      }
     };
   });
   function leave(origin: typeof rendered) {
@@ -176,6 +218,16 @@
     };
   });
 
+  // 显式 reset 入口：宿主通过 bind:this 调用，恢复 Core 草稿、步骤导航和本实例
+  // 提交提示；不触发导航，也不改变未授权状态。
+  export function reset(): void {
+    if (!allowed) return;
+    submitError = null;
+    submission = undefined;
+    confirmation = undefined;
+    form.reset();
+  }
+
   const handleSubmit = $derived.by(() => {
     const origin = rendered;
     return async () => {
@@ -267,7 +319,7 @@
         {#each currentFields as field (field.key)}
           <FieldRenderer
             {field}
-            value={form.values[field.key]}
+            value={renderedValues[field.key]}
             onchange={fieldChange(field.key)}
             invalid={!!form.errors[field.key]}
             {...definedOptions({ errorId: form.errors[field.key] ? errorId(field.key) : undefined })}
@@ -306,7 +358,5 @@
   {/if}
 </div>
 
-{#key confirmation}
-  <ConfirmDialog open={confirmOpen} message={i18n.t('common.unsavedChanges')}
-    onconfirm={confirmLeave} oncancel={cancelLeave} />
-{/key}
+<ConfirmDialog open={confirmOpen} message={i18n.t('common.unsavedChanges')}
+  onconfirm={confirmLeave} oncancel={cancelLeave} />