@svadmin/ui 0.88.0 → 0.91.0

package/dist/components/ProfilePage.svelte

@@ -19,6 +19,7 @@
   let { headingLevel = 'h1' }: { headingLevel?: 'h1' | 'h2' } = $props();
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
+  const controlId = $props.id();
 
   const identity = useGetIdentity();
   const notification = useNotification();
@@ -33,6 +34,7 @@
   let profileSaving = $state(false);
   let profileError = $state('');
   let avatarUploading = $state(false);
+  let avatarError = $state('');
   let fileInput = $state<HTMLInputElement>();
   let currentPassword = $state('');
   let newPassword = $state('');
@@ -46,6 +48,7 @@
     profileSaving = false;
     profileError = '';
     avatarUploading = false;
+    avatarError = '';
     currentPassword = '';
     newPassword = '';
     confirmPassword = '';
@@ -62,6 +65,10 @@
       && scopedTenantIdentity === tenantIdentity;
   }
 
+  function failureMessage(): string {
+    return i18n.t('common.operationFailed');
+  }
+
   $effect(() => {
     void authProvider;
     void tenantIdentity;
@@ -93,11 +100,11 @@
         identity.refetch();
         notification.success(i18n.t('common.updateSuccess'), 3000);
       } else {
-        profileError = result.error?.message ?? i18n.t('common.operationFailed');
+        profileError = failureMessage();
       }
-    } catch (e) {
+    } catch {
       if (isActiveScope(epoch, provider, scopedTenantIdentity)) {
-        profileError = e instanceof Error ? e.message : String(e);
+        profileError = failureMessage();
       }
     } finally {
       if (isActiveScope(epoch, provider, scopedTenantIdentity)) profileSaving = false;
@@ -105,15 +112,22 @@
   }
 
   async function handleAvatarChange(e: Event) {
-    const file = (e.target as HTMLInputElement).files?.[0];
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
     const provider = authProvider;
-    if (!file || !provider?.updateProfile) return;
+    input.value = '';
+    if (!file || avatarUploading || !provider?.updateProfile) return;
     const epoch = scopeEpoch;
     const scopedTenantIdentity = tenantIdentity;
     avatarUploading = true;
+    avatarError = '';
     try {
       const result = await provider.updateProfile({ avatar: file });
-      if (isActiveScope(epoch, provider, scopedTenantIdentity) && result.success) identity.refetch();
+      if (!isActiveScope(epoch, provider, scopedTenantIdentity)) return;
+      if (result.success) identity.refetch();
+      else avatarError = failureMessage();
+    } catch {
+      if (isActiveScope(epoch, provider, scopedTenantIdentity)) avatarError = failureMessage();
     } finally {
       if (isActiveScope(epoch, provider, scopedTenantIdentity)) avatarUploading = false;
     }
@@ -140,7 +154,7 @@
       newPassword = '';
       confirmPassword = '';
     } else {
-      pwError = result.error?.message ?? i18n.t('common.operationFailed');
+      pwError = failureMessage();
     }
   }
 
@@ -168,6 +182,14 @@
           <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
           {i18n.t('common.loading')}
         </div>
+      {:else if identity.error}
+        <Alert.Root variant="destructive">
+          <AlertCircle class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+          <Alert.Description class="svadmin-u-60fbb7713999 svadmin-u-77a2a20e90d4">
+            <span>{failureMessage()}</span>
+            <Button size="sm" variant="outline" onclick={() => { void identity.refetch(); }}>{i18n.t('common.retry')}</Button>
+          </Alert.Description>
+        </Alert.Root>
       {:else if identity.data}
         <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-0d304f904cb0">
           <!-- Avatar -->
@@ -188,6 +210,8 @@
                 class="svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-5f22e64f2282 svadmin-u-53bb3a280599 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-7065497e1ca0 svadmin-u-181f3d6c9821 svadmin-u-67d6184a0024 svadmin-u-34516836730d"
                 onclick={() => fileInput?.click()}
                 disabled={avatarUploading}
+                aria-label={i18n.t('account.uploadAvatar')}
+                title={i18n.t('account.uploadAvatar')}
               >
                 {#if avatarUploading}
                   <Loader2 class="svadmin-u-cd0d9c512cdc svadmin-u-72470489ff4e svadmin-u-72a4c7cdeef7 svadmin-u-afbdd13a380e" />
@@ -207,11 +231,12 @@
 
           <!-- Info -->
           <div class="svadmin-u-6ed543e2fbbb svadmin-u-36e579c0b41c svadmin-u-7e0b7cdf1a94">
+            {#if avatarError}<p role="alert">{avatarError}</p>{/if}
             {#if editingProfile}
               <div class="svadmin-u-6ed543e2fbbb svadmin-u-2472e9b81a97">
                 <div>
-                  <Label for="edit-name" class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{i18n.t('profile.name')}</Label>
-                  <Input id="edit-name" bind:value={editName} class="svadmin-u-b6b02c0ebef6" />
+                  <Label for={`${controlId}-edit-name`} class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{i18n.t('profile.name')}</Label>
+                  <Input id={`${controlId}-edit-name`} bind:value={editName} class="svadmin-u-b6b02c0ebef6" />
                 </div>
                 {#if profileError}
                   <p class="svadmin-u-359090c2d529 svadmin-u-811148b13d1e">{profileError}</p>
@@ -281,22 +306,22 @@
         {/if}
 
         <PasswordInput
-          id="current-password"
+          id={`${controlId}-current-password`}
           label={i18n.t('profile.currentPassword')}
           bind:value={currentPassword}
           autocomplete="current-password"
         />
 
         <PasswordInput
-          id="new-password"
-          label={i18n.t('auth.password')}
+          id={`${controlId}-new-password`}
+          label={i18n.t('profile.newPassword')}
           bind:value={newPassword}
           autocomplete="new-password"
           showStrength
         />
 
         <PasswordInput
-          id="confirm-new-password"
+          id={`${controlId}-confirm-new-password`}
           label={i18n.t('auth.confirmPassword')}
           bind:value={confirmPassword}
           autocomplete="new-password"

package/dist/components/RadioGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="T extends string">
+  import { useTranslation } from '@svadmin/core/i18n';
   import { cn } from '../utils.js';
 
   export interface RadioGroupOption<T extends string = string> {
@@ -11,7 +12,7 @@
   interface Props<T extends string = string> {
     options: readonly RadioGroupOption<T>[];
     value?: T | null;
-    name?: string;
+    name?: string | undefined;
     legend?: string;
     ariaLabel?: string;
     disabled?: boolean;
@@ -35,18 +36,214 @@
     class: className = '',
     onchange,
   }: Props<T> = $props();
+  const instanceId = $props.id();
+  const i18n = useTranslation();
+  let groupRoot: HTMLFieldSetElement;
+  // 原生 reset 恢复的是初始选中值，而不是最后一次用户选择。值一旦变化就
+  // 无法再推断初始状态，因此只在挂载后的首个值快照一次；初始 null 表示
+  // 恢复为未选。
+  let resetValue: T | null = null;
+  let resetCaptured = false;
+  let pendingNativeReset: { event: Event; form: HTMLFormElement } | undefined;
+  const enabledOptions = $derived(options.filter(option => !option.disabled));
+  const tabValue = $derived(enabledOptions.find(option => option.value === value)?.value ?? enabledOptions[0]?.value);
+
+  function syncChecked(): void {
+    if (!groupRoot) return;
+    for (const input of groupRoot.querySelectorAll<HTMLInputElement>('input[type="radio"]')) {
+      input.checked = input.value === value;
+    }
+  }
+
+  function flushNativeReset(): void {
+    const reset = pendingNativeReset;
+    if (!reset || reset.event.eventPhase !== Event.NONE) return;
+    pendingNativeReset = undefined;
+    if (groupRoot?.form !== reset.form) return;
+    // 与 FileUpload 保持同一原生 reset 约定：先等事件分发结束，再读取
+    // defaultPrevented。被取消时保留当前值，并修复 happy-dom 在取消前
+    // 已清空 checked 的模拟差异；真实浏览器此处是无副作用的重复赋值。
+    if (reset.event.defaultPrevented) {
+      syncChecked();
+      return;
+    }
+    value = options.some(option => option.value === resetValue) ? resetValue : null;
+    syncChecked();
+  }
+
+  $effect(() => {
+    const form = groupRoot?.form;
+    if (!form) return;
+    const reset = (event: Event) => {
+      flushNativeReset();
+      pendingNativeReset = { event, form };
+      // reset 事件先于默认动作；等默认动作完成后才能读取最终取消状态。
+      setTimeout(flushNativeReset, 0);
+    };
+    form.addEventListener('reset', reset);
+    return () => {
+      form.removeEventListener('reset', reset);
+      if (pendingNativeReset?.form === form) pendingNativeReset = undefined;
+    };
+  });
+
+  // Svelte 的 checked 只写 DOM property，不会留下 checked 内容属性，因此
+  // 浏览器 reset 默认会清空全部选中项。显式同步 defaultChecked，让原生
+  // 默认动作与上面缓存的 resetValue 保持一致；后续用户选择不改变该基线。
+  $effect(() => {
+    const current = value;
+    void options;
+    if (!groupRoot) return;
+    if (!resetCaptured) {
+      resetCaptured = true;
+      resetValue = current;
+    }
+    for (const input of groupRoot.querySelectorAll<HTMLInputElement>('input[type="radio"]')) {
+      input.defaultChecked = resetValue !== null && input.value === resetValue;
+    }
+  });
+
+  // 空 name 的原生 radio 在同一表单内仍属于同一个浏览器分组，不能靠逐个
+  // required 隔离实例。未命名组改用组件内的 custom validity，且不生成字段名。
+  // 每次重新同步所有输入，避免切换 name/required/disabled、替换选项或父级
+  // 清空后残留旧错误；提示复用现有 i18n 的 validation.required。
+  $effect(() => {
+    // 先读取全部依赖再分支，避免某次提前返回后漏跟踪 required/disabled/
+    // options/value，导致后续状态变化不再清除或重建 custom validity。
+    const currentName = name;
+    const isRequired = required;
+    const isDisabled = disabled;
+    const currentValue = value;
+    const currentOptions = options;
+    const message = i18n.t('validation.required');
+    const inputs = groupRoot
+      ? [...groupRoot.querySelectorAll<HTMLInputElement>('input[type="radio"]')]
+      : [];
+    const hasSelection = currentOptions.some(option => !option.disabled && option.value === currentValue);
+    const firstEnabledIndex = currentOptions.findIndex(option => !option.disabled);
+    for (const input of inputs) input.setCustomValidity('');
+    if (!groupRoot || currentName || !isRequired || isDisabled || hasSelection) return;
+    if (firstEnabledIndex >= 0) inputs[firstEnabledIndex]?.setCustomValidity(message);
+  });
 
   function select(option: RadioGroupOption<T>): void {
     if (disabled || option.disabled) return;
+    // reset 的最终状态要等事件分发结束才能判定；若同一任务内用户已经重新
+    // 选择，则最后一次选择优先，作废尚未冲刷的 pending reset。即使新选择
+    // 与 reset 前的值相同，也必须先作废并同步 DOM，否则延迟冲刷会用初始值
+    // 覆盖它，reset 的默认动作也可能留下与绑定值不一致的 checked。
+    const hadPendingReset = pendingNativeReset !== undefined;
+    pendingNativeReset = undefined;
     if (value !== option.value) {
       value = option.value;
       onchange?.(option.value);
     }
+    if (hadPendingReset) syncChecked();
+  }
+
+  const focusableSelector = [
+    'a[href]',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'summary',
+    '[tabindex]',
+    '[contenteditable]:not([contenteditable="false"])',
+  ].join(',');
+
+  function isContentEditableHost(element: HTMLElement): boolean {
+    const attribute = element.getAttribute('contenteditable');
+    const editable = element.isContentEditable || (attribute !== null && attribute.toLowerCase() !== 'false');
+    return editable && !element.parentElement?.isContentEditable;
+  }
+
+  // 与现有 UI focus helper 保持同一判定：排除原生禁用、inert/隐藏区域和
+  // 不可见元素，并把 contenteditable 宿主视为真实 Tab 停靠点。aria-disabled
+  // 和 aria-hidden 不等于原生不可聚焦，不能据此跳过宿主真实的 Tab 停靠点。
+  function isTabbable(element: HTMLElement): boolean {
+    if (element.matches(':disabled')) return false;
+    if (element.closest('[hidden], [inert]')) return false;
+    if (element.hasAttribute('tabindex') && element.tabIndex < 0) return false;
+    if (!element.hasAttribute('tabindex') && !isContentEditableHost(element) && element.tabIndex < 0) return false;
+    return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+  }
+
+  // 只有非空 name 才参与原生命名分组；name="" 与省略 name 语义一致。
+  function hasNonEmptyName(input: HTMLInputElement): boolean {
+    return input.name !== '';
+  }
+
+  function tabbableSequence(form: HTMLFormElement): HTMLElement[] {
+    // 只取零序 Tab 停靠点。正 tabindex 元素已在文档起点先访问，不能当作
+    // 当前组之后的下一个停靠点；contenteditable 宿主即使 tabIndex 报告 -1
+    // 也仍在浏览器 Tab 顺序中。范围收敛到当前表单，不重写整页焦点顺序。
+    return [...form.querySelectorAll<HTMLElement>(focusableSelector)]
+      .filter(element => (element.tabIndex === 0
+        || (!element.hasAttribute('tabindex') && isContentEditableHost(element)))
+        && isTabbable(element));
+  }
+
+  function handleGroupTab(event: KeyboardEvent): void {
+    // WebKit 会把同一表单内空 name 的 radio 视为同一原生组，并在 Tab 时
+    // 跳过后续未命名 RadioGroup。只有同表单存在多个未命名实例时才接管，
+    // 且只接管确实落在本组件未命名组上的目标；普通原生 radio、contenteditable、
+    // inert 边界交还浏览器。先聚焦成功再取消默认行为，避免半途困住键盘。
+    const form = groupRoot.form ?? groupRoot.closest('form');
+    const current = document.activeElement;
+    if (!form || !(current instanceof HTMLInputElement) || !groupRoot.contains(current)) return;
+    const unnamedGroups = [...form.querySelectorAll<HTMLElement>('[data-svadmin-radio-group]')]
+      .filter(group => ![...group.querySelectorAll<HTMLInputElement>('input[type="radio"]')].some(hasNonEmptyName));
+    if (unnamedGroups.length < 2) return;
+    const sequence = tabbableSequence(form);
+    const contained = sequence.filter(element => groupRoot.contains(element));
+    if (!contained.length) return;
+    const firstContained = contained[0];
+    const lastContained = contained[contained.length - 1];
+    if (!firstContained || !lastContained) return;
+    const first = sequence.indexOf(firstContained);
+    const last = sequence.indexOf(lastContained);
+    if (first < 0 || last < 0) return;
+    const target = event.shiftKey ? sequence[first - 1] : sequence[last + 1];
+    if (!(target instanceof HTMLInputElement) || target.type !== 'radio') return;
+    const targetGroup = target.closest<HTMLElement>('[data-svadmin-radio-group]');
+    if (!targetGroup || targetGroup === groupRoot) return;
+    if ([...targetGroup.querySelectorAll<HTMLInputElement>('input[type="radio"]')].some(hasNonEmptyName)) return;
+    // 保留平台默认的滚动行为，让窄屏上的键盘焦点进入视口。
+    target.focus();
+    if (document.activeElement === target) event.preventDefault();
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    const current = event.currentTarget;
+    if (name || disabled || event.altKey || event.ctrlKey || event.metaKey
+      || !(current instanceof HTMLInputElement) || current.matches(':disabled')) return;
+    if (event.key === 'Tab') {
+      handleGroupTab(event);
+      return;
+    }
+    if (!['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+
+    // 未命名 radio 的原生方向键可能跨越 fieldset；只在当前组件内选择。
+    const inputs = [...groupRoot.querySelectorAll<HTMLInputElement>('input[type="radio"]')]
+      .filter(input => !input.matches(':disabled'));
+    const index = inputs.indexOf(current);
+    if (index < 0) return;
+    const rtl = getComputedStyle(groupRoot).direction === 'rtl';
+    const forward = event.key === 'ArrowDown' || event.key === (rtl ? 'ArrowLeft' : 'ArrowRight');
+    const nextIndex = event.key === 'Home' ? 0 : event.key === 'End' ? inputs.length - 1
+      : (index + (forward ? 1 : -1) + inputs.length) % inputs.length;
+    const next = inputs[nextIndex];
+    event.preventDefault();
+    next?.focus();
+    next?.click();
   }
 </script>
 
   <fieldset
+    bind:this={groupRoot}
     class={cn('svadmin-radio-group', className)}
+    data-svadmin-radio-group
     disabled={disabled}
   data-invalid={invalid ? 'true' : undefined}
   aria-describedby={describedby}
@@ -54,8 +251,8 @@
 >
   {#if legend}<legend>{legend}</legend>{/if}
   <div class="svadmin-radio-group__options">
-    {#each options as option (option.value)}
-      {@const inputId = `${name ?? 'radio'}-${option.value}`}
+    {#each options as option, index (option.value)}
+      {@const inputId = `${instanceId}-radio-${index}`}
       <label class="svadmin-radio-group__option" class:svadmin-radio-group__option--disabled={disabled || option.disabled} for={inputId}>
         <input
           id={inputId}
@@ -64,8 +261,10 @@
           value={option.value}
           checked={value === option.value}
           disabled={disabled || option.disabled}
-          required={required}
+          required={required && Boolean(name)}
           aria-describedby={describedby}
+          tabindex={name ? undefined : !disabled && !option.disabled && option.value === tabValue ? 0 : -1}
+          onkeydown={handleKeydown}
           onchange={() => select(option)}
         />
         <span class="svadmin-radio-group__copy">

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

@@ -7,7 +7,7 @@ export interface RadioGroupOption<T extends string = string> {
 interface Props<T extends string = string> {
     options: readonly RadioGroupOption<T>[];
     value?: T | null;
-    name?: string;
+    name?: string | undefined;
     legend?: string;
     ariaLabel?: string;
     disabled?: boolean;

package/dist/components/Rate.svelte

@@ -6,11 +6,11 @@
     value?: number;
     count?: number;
     allowClear?: boolean;
-    name?: string;
+    name?: string | undefined;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     ariaLabel?: string;
     class?: string;
     onchange?: (value: number) => void;
@@ -66,7 +66,7 @@
   aria-describedby={describedby}
   data-invalid={invalid ? 'true' : undefined}
 >
-  {#if name}<input type="hidden" {name} value={normalizedValue} required={required} />{/if}
+  {#if name}<input type="hidden" {name} value={normalizedValue} required={required} {disabled} />{/if}
   {#each Array(normalizedCount) as _, index (index)}
     {@const rating = index + 1}
     <button

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

@@ -2,11 +2,11 @@ interface Props {
     value?: number;
     count?: number;
     allowClear?: boolean;
-    name?: string;
+    name?: string | undefined;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     ariaLabel?: string;
     class?: string;
     onchange?: (value: number) => void;

package/dist/components/RecordDetailDrawer.svelte

@@ -13,7 +13,7 @@
     open?: boolean;
     recordId?: string | number;
     onClose?: () => void;
-    extraSections?: Snippet;
+    extraSections?: Snippet | undefined;
   } = $props();
   const context = captureAdminContext();
   const i18n = useTranslation();

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

@@ -6,7 +6,7 @@ type $$ComponentProps = {
     open?: boolean;
     recordId?: string | number;
     onClose?: () => void;
-    extraSections?: Snippet;
+    extraSections?: Snippet | undefined;
 };
 declare const RecordDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type RecordDetailDrawer = ReturnType<typeof RecordDetailDrawer>;

package/dist/components/RegisterPage.svelte

@@ -36,7 +36,7 @@
     if (result.success) {
       onSuccess?.();
     } else {
-      error = result.error?.message ?? i18n.t('common.operationFailed');
+      error = i18n.t('common.operationFailed');
     }
   }
 </script>

package/dist/components/RelationPicker.svelte

@@ -69,6 +69,7 @@
   const scope = $derived({
     resource,
     contract: binding.resource,
+    providerName: binding.dataProviderName,
     provider: context.providers?.[binding.dataProviderName],
     meta: JSON.stringify(binding.meta),
     access: context.accessControlProvider,
@@ -80,6 +81,24 @@
     filters,
     sorters,
   });
+  function sameScope(left: typeof scope | undefined, right: typeof scope | undefined): boolean {
+    if (!left || !right) return left === right;
+    return left.resource === right.resource
+      && left.contract === right.contract
+      && left.providerName === right.providerName
+      && left.provider === right.provider
+      && left.meta === right.meta
+      && left.access === right.access
+      && left.authProvider === right.authProvider
+      && left.tenant === right.tenant
+      && left.auth === right.auth
+      && left.optionLabel === right.optionLabel
+      && left.normalizedFetchSize === right.normalizedFetchSize
+      && left.filters === right.filters
+      && left.sorters === right.sorters;
+  }
+  let observedScope = $state.raw(untrack(() => scope));
+  let observedSearchable = $state(untrack(() => searchable));
   let valueInvalidated = $state(false);
   const selectedValues = $derived(allowed && !valueInvalidated ? normalizedValues(value) : []);
   const select = useSelect(definedReactiveOptions({
@@ -98,12 +117,14 @@
     get sorters() { return sorters; },
     get filters() { return [...filters, ...searchFilters]; },
     get defaultValue() { return selectedValues; },
-    get queryOptions() { return { enabled: allowed }; },
+    // 查询会先于清理 effect 重算，旧草稿不得先发送给新作用域。
+    get queryOptions() {
+      return { enabled: allowed && sameScope(observedScope, scope) && observedSearchable === searchable };
+    },
     get projectionKey() { return `relation-picker:${String(optionLabel)}:id`; },
   }));
 
   let loaded = $state.raw<{ scope: typeof scope; search: string; options: RelationPickerOption[] }>();
-  let observedScope = untrack(() => scope);
   let observedValue = untrack(() => value);
   let observedAllowed = untrack(() => allowed);
   let draftScope = $state.raw<typeof scope>();
@@ -123,7 +144,7 @@
     const currentScope = scope;
     const previous = untrack(() => loaded);
     const options = new Map<string | number, RelationPickerOption>(
-      page > 1 && previous?.scope === currentScope && previous.search === appliedSearch
+      page > 1 && previous && sameScope(previous.scope, currentScope) && previous.search === appliedSearch
         ? previous.options.map(option => [option.value, option]) : [],
     );
     for (const option of data.options) options.set(option.value, option);
@@ -133,7 +154,7 @@
   const availableOptions = $derived.by(() => {
     if (!allowed || select.isError) return [];
     const options = new Map<string | number, RelationPickerOption>();
-    if (loaded?.scope === scope && loaded.search === appliedSearch) {
+    if (loaded && sameScope(loaded.scope, scope) && loaded.search === appliedSearch) {
       for (const option of loaded.options) options.set(option.value, option);
     }
     for (const option of select.options) options.set(option.value, option);
@@ -152,7 +173,7 @@
   }
 
   function toggle(item: string | number): void {
-    if (disabled || !allowed || !open || draftScope !== scope || select.isError
+    if (disabled || !allowed || !open || !sameScope(draftScope, scope) || select.isError
       || select.isFetching || searchText !== appliedSearch) return;
     if (!multiple) {
       draftValues = [item];
@@ -165,16 +186,17 @@
   }
 
   function commit(): void {
-    if (disabled || !allowed || !open || draftScope !== scope || select.isError
+    if (disabled || !allowed || !open || !sameScope(draftScope, scope) || select.isError
       || select.isFetching || searchText !== appliedSearch) return;
     const next = [...draftValues];
     onchange?.(multiple ? next : next[0] ?? null);
-    open = false;
-    resetSearch();
+    cancel();
   }
 
   function cancel(): void {
     open = false;
+    draftValues = [];
+    draftScope = undefined;
     resetSearch();
   }
 
@@ -198,7 +220,7 @@
     clearTimeout(timer);
     const origin = scope;
     timer = setTimeout(() => {
-      if (origin !== scope || disabled || !allowed || !open) return;
+      if (!sameScope(origin, scope) || disabled || !allowed || !open) return;
       appliedSearch = searchText;
       page = 1;
       loaded = undefined;
@@ -210,13 +232,19 @@
       && searchText === appliedSearch) page += 1;
   }
 
+  $effect.pre(() => {
+    if (observedSearchable === searchable) return;
+    observedSearchable = searchable;
+    resetSearch();
+  });
+
   $effect.pre(() => {
     const currentScope = scope;
     const currentValue = value;
     const currentAllowed = allowed;
     const currentDisabled = disabled;
     untrack(() => {
-      if (observedScope !== currentScope || (observedAllowed && !currentAllowed)) {
+      if (!sameScope(observedScope, currentScope) || (observedAllowed && !currentAllowed)) {
         observedScope = currentScope;
         valueInvalidated = true;
         draftValues = [];
@@ -261,7 +289,7 @@
     {/if}
   </div>
 
-  <Dialog.Root bind:open>
+  <Dialog.Root bind:open onOpenChange={(next) => { if (!next) cancel(); }}>
     <Dialog.Content class="svadmin-relation-picker__dialog" aria-label={title ?? i18n.t('common.selectOption')}>
       <Dialog.Header>
         <Dialog.Title>{title ?? i18n.t('common.selectOption')}</Dialog.Title>

package/dist/components/ResourceAccessGuard.svelte

@@ -3,6 +3,7 @@
 
   import type { Action } from '@svadmin/core';
   import { captureAdminContext, useCan } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
   import DataState from './content/DataState.svelte';
 
@@ -23,6 +24,7 @@
   }: Props = $props();
 
   const adminContext = captureAdminContext();
+  const i18n = useTranslation();
   const resource = $derived(adminContext.getResource(resourceName));
   const accessControlEnabled = $derived(Boolean(adminContext.accessControlProvider));
   const actionAllowedByResource = $derived(
@@ -58,7 +60,10 @@
       && (!accessControlEnabled || permission.allowed)
       && (!requireSourceRead || !accessControlEnabled || sourceReadPermission.allowed),
   );
-  const denialReason = $derived(permission.reason ?? sourceReadPermission.reason);
+  const permissionError = $derived(permission.isError || sourceReadPermission.isError);
+  const denialDescription = $derived(
+    permissionError ? i18n.t('common.permissionUnavailable') : i18n.t('common.permissionDenied'),
+  );
 </script>
 
 {#if permissionPending}
@@ -66,5 +71,5 @@
 {:else if allowed}
   {@render children()}
 {:else}
-  <DataState state="forbidden" {...definedOptions({ "description": denialReason })} />
+  <DataState state={permissionError ? 'error' : 'forbidden'} description={denialDescription} />
 {/if}