@svadmin/ui 0.73.0 → 0.74.0

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

@@ -1,6 +1,9 @@
 import { type ResourceRendering } from '../rendering/index.js';
 import type { AutoTableGridState } from './auto-table-grid.js';
+import { type ExportFormat, type TaskProvider } from '@svadmin/core';
+import { type BatchSelection } from './table-contract';
 import type { BaseRecord, FieldDefinition, Sort } from '@svadmin/core';
+import { type SavedListViewProvider } from './saved-list-views.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
@@ -8,6 +11,8 @@ interface Props {
     /** 可选主体渲染器：不替换资源、权限、工具栏和持久化逻辑。 */
     gridBody?: Snippet<[AutoTableGridState]>;
     selectable?: boolean;
+    /** 仅在业务回调支持按查询执行服务端命令时启用。 */
+    allowSelectAllMatching?: boolean;
     density?: 'compact' | 'comfortable';
     showHeader?: boolean;
     title?: string;
@@ -45,9 +50,10 @@ interface Props {
     };
     /** Externally controlled sorters */
     sorters?: Sort[];
-    /** Custom batch actions to render when rows are selected */
+    /** 批量操作必须按 selection.scope 区分明确 ID 与全部查询结果。 */
     batchActions?: Snippet<[{
         selectedIds: (string | number)[];
+        selection: BatchSelection;
     }]>;
     /** Summary row rendered at table footer */
     summary?: Snippet<[{
@@ -56,6 +62,16 @@ interface Props {
         visibleColumnsCount: number;
     }]>;
     deleteVariables?: unknown;
+    /** 团队/系统视图；写入需要 Provider 能力和显式可写标记。 */
+    savedViewProvider?: SavedListViewProvider;
+    /** 显式允许唯一的远程默认视图在无 URL/个人活动视图时初始化页面。 */
+    applyRemoteDefaultView?: boolean;
+    /** 提供任务名后按当前筛选/排序提交全量导出；未提供时仍导出当前已加载页。 */
+    exportTaskName?: string;
+    exportTaskProvider?: TaskProvider;
+    exportTaskIdempotencyKey?: string;
+    exportFormat?: ExportFormat;
+    exportMaxItemCount?: number;
 }
 declare const AutoTable: import("svelte").Component<Props, {}, "">;
 type AutoTable = ReturnType<typeof AutoTable>;

package/dist/components/BoundRecordDetailDrawer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
+  import type { Snippet } from 'svelte';
 
   import { useCan, useNavigation, type FieldDefinition } from '@svadmin/core';
   import { useRecordDetail } from './record-detail.svelte';
@@ -17,12 +18,14 @@
     open = $bindable(false),
     recordId,
     onClose,
+    extraSections,
   }: {
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId: string | number;
     onClose?: () => void;
+    extraSections?: Snippet;
   } = $props();
 
   const i18n = useTranslation();
@@ -149,6 +152,12 @@
     </div>
   {/if}
 
+  {#if extraSections && canReadRecord && query.isSuccess}
+    <section data-svadmin-detail-extensions aria-label={i18n.t('common.additionalDetails')}>
+      {@render extraSections()}
+    </section>
+  {/if}
+
   {#snippet footer()}
     {#if canReadRecord && query.isSuccess}
         <Button type="button" variant="outline" onclick={() => navigateTo('show')}>

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

@@ -1,10 +1,12 @@
 import type { ResourceRendering } from '../rendering/index.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId: string | number;
     onClose?: () => void;
+    extraSections?: Snippet;
 };
 declare const BoundRecordDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type BoundRecordDetailDrawer = ReturnType<typeof BoundRecordDetailDrawer>;

package/dist/components/Breadcrumbs.svelte

@@ -17,6 +17,12 @@
 
   interface Crumb { label: string; href?: string; }
 
+  // 仅复用 AdminApp 明确支持的成员页别名，宿主精确菜单项始终优先。
+  const memberAliases: Readonly<Record<string, string>> = {
+    '/account/members-starter': '/account/members/members-starter',
+    '/account/team-members': '/account/members/team-members',
+  };
+
   function normalizePath(path: string): string {
     const normalized = path.replace(/^#/, '').replace(/[?#].*$/, '').replace(/\/$/, '');
     return normalized || '/';
@@ -38,7 +44,11 @@
     const currentPathname = normalizePath(getPath());
     if (currentPathname === '/') return result;
 
-    const menuTrail = menu ? findMenuTrail(menu, currentPathname) : undefined;
+    const canonicalPath = memberAliases[currentPathname];
+    const menuTrail = menu
+      ? findMenuTrail(menu, currentPathname)
+        ?? (canonicalPath ? findMenuTrail(menu, canonicalPath) : undefined)
+      : undefined;
     if (menuTrail) {
       for (const item of menuTrail) {
         result.push(definedOptions({

package/dist/components/CancelTaskButton.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
-  import { captureAdminContext, queryKeyMatches, withValidatedTaskProvider } from '@svadmin/core';
-  import { useQueryClient } from '@tanstack/svelte-query';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import { Button } from './ui/button/index.js';
   import { Loader2, Ban } from '@lucide/svelte';
+  import { createTaskAction } from './task-action.svelte.js';
 
   const i18n = useTranslation();
-  const adminContext = captureAdminContext();
 
   let {
     taskId,
-    taskProvider = adminContext.taskProvider ?? undefined,
+    taskProvider,
     onSuccess,
     onError,
     disabled = false,
@@ -29,46 +27,18 @@
     children?: import('svelte').Snippet;
   }>();
 
-  const queryClient = useQueryClient();
-  let pending = $state(false);
-
-  async function handleCancel() {
-    if (!taskProvider?.cancel || pending) return;
-    const scopedTaskId = taskId;
-    const scope = adminContext.queryKeyMatcher();
-    pending = true;
-    try {
-      const provider = withValidatedTaskProvider(taskProvider);
-      if (!provider.cancel) return;
-      await provider.cancel(scopedTaskId);
-      await Promise.all([
-        queryClient.invalidateQueries({
-          predicate: (query) => queryKeyMatches(query.queryKey, {
-            ...scope,
-            kind: 'task',
-            action: 'list',
-          }),
-        }),
-        queryClient.invalidateQueries({
-          predicate: (query) => queryKeyMatches(query.queryKey, {
-            ...scope,
-            kind: 'task',
-            action: 'one',
-            id: scopedTaskId,
-          }),
-        }),
-      ]);
-      onSuccess?.();
-    } catch (error) {
-      onError?.(error);
-    } finally {
-      pending = false;
-    }
-  }
+  const action = createTaskAction({
+    action: 'cancel',
+    get taskId() { return taskId; },
+    get provider() { return taskProvider; },
+    get disabled() { return disabled; },
+    get onSuccess() { return onSuccess; },
+    get onError() { return onError; },
+  });
 </script>
 
-<Button {variant} {size} onclick={handleCancel} disabled={disabled || pending || !taskProvider?.cancel}>
-  {#if pending}
+<Button {variant} {size} onclick={action.run} disabled={!action.available || action.pending}>
+  {#if action.pending}
     <Loader2 class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
   {:else}
     <Ban class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />

package/dist/components/ColorPicker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    value?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    name,
+    id,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    ariaLabel,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  function handleInput(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement) || disabled) return;
+    value = input.value;
+    onchange?.(input.value);
+  }
+</script>
+
+<input
+  class={cn('svadmin-color-picker', className)}
+  {id}
+  {name}
+  type="color"
+  value={value}
+  {disabled}
+  {required}
+  aria-label={ariaLabel}
+  aria-invalid={invalid || undefined}
+  aria-describedby={describedby}
+  oninput={handleInput}
+/>
+
+<style>
+  .svadmin-color-picker {
+    display: block;
+    inline-size: 40px;
+    block-size: 32px;
+    padding: 2px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--background);
+    cursor: pointer;
+  }
+
+  .svadmin-color-picker:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  .svadmin-color-picker:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface Props {
+    value?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+}
+declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/ComboboxField.svelte

@@ -2,7 +2,8 @@
   import { definedReactiveOptions } from '@svadmin/core/options';
 
   import { useTranslation } from '@svadmin/core/i18n';
-  import { useResourceContract, useSelect } from '@svadmin/core';
+  import { captureAdminContext, captureAuthSession, useResourceContract, useSelect } from '@svadmin/core';
+  import { onDestroy, untrack } from 'svelte';
   import type { BaseRecord, Filter } from '@svadmin/core';
   import type { HTMLButtonAttributes } from 'svelte/elements';
   import type { ButtonProps } from './ui/button/index.js';
@@ -31,6 +32,7 @@
     searchable?: boolean;
     multiple?: boolean;
     onSearch?: (value: string) => Filter[];
+    fetchSize?: number;
     id?: string;
     class?: string;
   }
@@ -41,21 +43,51 @@
     onchange,
     optionLabel = 'title',
     optionValue = 'id',
-    placeholder = 'Select...',
+    placeholder,
     searchable = true,
     multiple = false,
     onSearch,
+    fetchSize = 50,
     disabled = false,
     ...restProps
   }: Props = $props();
 
   const buttonRestProps = $derived(restProps as Omit<ButtonProps, 'children' | 'variant' | 'size'>);
+  let open = $state(false);
+  let searchInputValue = $state('');
+  let page = $state(1);
+  let appliedSearch = $state('');
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  onDestroy(() => clearTimeout(timer));
+  const normalizedFetchSize = $derived(
+    Number.isSafeInteger(fetchSize) && fetchSize >= 10 && fetchSize <= 200 ? fetchSize : 50,
+  );
 
   const binding = useResourceContract(() => resource);
+  const context = captureAdminContext();
+  const sourceScope = $derived({
+    contract: binding.resource, provider: context.providers?.[binding.dataProviderName],
+    meta: JSON.stringify(binding.meta), tenant: context.tenantCacheKey?.__svadminTenant,
+    auth: context.authProvider, session: captureAuthSession(context.authProvider).cacheKey,
+    access: context.accessControlProvider, router: context.routerProvider,
+    optionLabel, optionValue, onSearch, searchable, normalizedFetchSize,
+  });
+  type Option = { value: string | number; label: string };
+  let loaded = $state.raw<{ scope: typeof sourceScope; search: string; options: Option[] }>();
   const defaultSearch = $derived.by(() => {
     const field = optionLabel;
     return (v: string): Filter[] => v ? [{ field, operator: 'contains', value: v }] : [];
   });
+  const searchFilters = $derived.by(() => {
+    try {
+      return {
+        filters: appliedSearch && (onSearch || searchable)
+          ? (onSearch ?? defaultSearch)(appliedSearch)
+          : [],
+        invalid: false,
+      };
+    } catch { return { filters: [], invalid: true }; }
+  });
   const select = useSelect(definedReactiveOptions({
     get resource() { return binding.resource; },
     get dataProviderName() { return binding.dataProviderName; },
@@ -69,33 +101,62 @@
       };
     },
     get projectionKey() { return `combobox:${optionLabel}:${optionValue}`; },
+    get fetchSize() { return normalizedFetchSize; },
+    get pagination() { return { current: page, pageSize: normalizedFetchSize }; },
     get defaultValue() {
       if (Array.isArray(value)) return value;
-      return value === null || value === undefined ? [] : [value];
+      return value === null || value === undefined || value === '' ? [] : [value];
     },
-    get onSearch() { return onSearch ?? (searchable ? defaultSearch : undefined); },
+    get filters() { return searchFilters.filters; },
+    get queryOptions() { return { enabled: !searchFilters.invalid }; },
   }));
 
-  let open = $state(false);
-  let searchInputValue = $state('');
-  $effect(() => {
-    void binding.resource;
-    void binding.dataProviderName;
-    void binding.meta;
-    searchInputValue = '';
+  $effect.pre(() => {
+    void sourceScope;
+    clearTimeout(timer);
+    searchInputValue = appliedSearch = '';
     open = false;
+    page = 1;
+    loaded = undefined;
+  });
+  $effect(() => {
+    const data = select.query.data;
+    if (!data || select.query.isFetching || select.isError || searchFilters.invalid) return;
+    const scope = sourceScope;
+    const search = appliedSearch;
+    const previous = untrack(() => loaded);
+    const options = new Map<string | number, Option>(
+      page > 1 && previous?.scope === scope && previous.search === search
+        ? previous.options.map(option => [option.value, option]) : [],
+    );
+    for (const option of data.options) options.set(option.value, option);
+    loaded = { scope, search, options: [...options.values()] };
   });
 
   const selectedValues = $derived(
     Array.isArray(value) ? value : value === null || value === undefined ? [] : [value],
   );
+  const availableOptions = $derived.by(() => {
+    if (select.isError || searchFilters.invalid) return [];
+    const options = new Map<string | number, Option>(
+      loaded?.scope === sourceScope && loaded.search === appliedSearch
+        ? loaded.options.map(option => [option.value, option]) : [],
+    );
+    for (const option of select.options) options.set(option.value, option);
+    return [...options.values()];
+  });
+  const totalOptions = $derived(select.query.data?.total ?? availableOptions.length);
+  const hasMore = $derived(totalOptions > page * normalizedFetchSize && !select.isError
+    && !searchFilters.invalid && searchInputValue === appliedSearch);
+  const invalidOptions = $derived(select.isError || searchFilters.invalid);
   const selectedLabels = $derived(selectedValues.flatMap(selectedValue => {
-    const option = select.options.find(candidate => candidate.value === selectedValue);
+    const option = availableOptions.find(candidate => candidate.value === selectedValue);
     return option ? [option.label] : [];
   }));
   const selectedLabel = $derived(selectedLabels.join(', '));
 
   function handleSelect(optValue: string | number) {
+    if (disabled || invalidOptions || select.isFetching || searchInputValue !== appliedSearch) return;
     if (multiple) {
       const next = selectedValues.includes(optValue)
         ? selectedValues.filter(selectedValue => selectedValue !== optValue)
@@ -105,23 +166,43 @@
     }
     onchange?.(optValue === value ? null : optValue);
     open = false;
-    searchInputValue = '';
-    select.onSearchChange('');
+    resetSearch();
   }
 
   function handleClear(e: Event) {
     e.stopPropagation();
+    if (disabled) return;
     onchange?.(multiple ? [] : null);
     open = false;
-    searchInputValue = '';
-    select.onSearchChange('');
+    resetSearch();
+  }
+
+  function resetSearch(): void {
+    clearTimeout(timer);
+    searchInputValue = appliedSearch = '';
+    page = 1;
+    loaded = undefined;
   }
 
   function handleSearchInput(e: Event) {
     if (!(e.currentTarget instanceof HTMLInputElement)) return;
     const v = e.currentTarget.value;
     searchInputValue = v;
-    select.onSearchChange(v);
+    clearTimeout(timer);
+    const scope = sourceScope;
+    const apply = () => {
+      if (scope !== sourceScope || disabled) return;
+      appliedSearch = v;
+      page = 1;
+      loaded = undefined;
+    };
+    if (!v) apply();
+    else timer = setTimeout(apply, 300);
+  }
+
+  function loadMore(): void {
+    if (disabled || select.isFetching || !hasMore) return;
+    page += 1;
   }
 </script>
 
@@ -138,12 +219,12 @@
     aria-expanded={open}
     aria-multiselectable={multiple || undefined}
     aria-busy={select.isFetching}
-    aria-invalid={select.isError}
+    aria-invalid={invalidOptions || restProps['aria-invalid']}
   >
     {#if selectedLabel}
       <span class="svadmin-u-f283ea9bea0e">{selectedLabel}</span>
     {:else}
-      <span class="svadmin-u-bfa603190748">{placeholder}</span>
+      <span class="svadmin-u-bfa603190748">{placeholder ?? i18n.t('field.selectPlaceholder')}</span>
     {/if}
     <ChevronsUpDown class="svadmin-u-fb56d9cff341 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37 svadmin-u-0b8c506a0596" />
   </Button>
@@ -154,9 +235,9 @@
     </Button>
   {/if}
   </div>
-  {#if select.isError}
+  {#if invalidOptions}
     <div role="alert" class="select-error">
-      <span>Unable to load options.</span>
+      <span>{i18n.t('select.loadFailed')}</span>
       <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || select.isFetching}
         title={i18n.t('common.retry')} aria-label={i18n.t('common.retry')} onclick={() => select.refetch()}>
         <RotateCw class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
@@ -164,7 +245,7 @@
     </div>
   {/if}
 
-  {#if open}
+  {#if open && !disabled}
     <div class="svadmin-u-da4dbfbc4fdc svadmin-u-181b286668b5 svadmin-u-b6b02c0ebef6 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e541d86d1ec8 svadmin-u-06bbb43166db">
       <Command.Root shouldFilter={false} class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-e541d86d1ec8 svadmin-u-9b13e8ae5c9c">
         {#if searchable}
@@ -173,7 +254,7 @@
             <Command.Input
               bind:value={searchInputValue}
               oninput={handleSearchInput}
-              placeholder="Search..."
+              placeholder={i18n.t('common.search')}
               class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-7f19cdf4c5bb svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-9c24ab70af61"
             />
           </div>
@@ -187,14 +268,15 @@
             {#each Array(3) as _, _i (_i)}
               <div class="svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b"><Skeleton class="svadmin-u-cd0d9c512cdc svadmin-u-6da6a3c3f741" /></div>
             {/each}
-          {:else if !select.isError}
-            {#if !select.options.length}
+          {:else if !invalidOptions}
+            {#if !availableOptions.length}
               <Command.Empty class="svadmin-u-cb11fec3bb46 svadmin-u-ca6bf63030aa svadmin-u-359090c2d529 svadmin-u-bfa603190748">
-                No results.
+                {i18n.t('select.noResults')}
               </Command.Empty>
             {/if}
-            {#each select.options as opt (opt.value)}
+            {#each availableOptions as opt (`${typeof opt.value}:${opt.value}`)}
               <Command.Item
+                disabled={select.isFetching || searchInputValue !== appliedSearch}
                 value={`${typeof opt.value}:${opt.value}`}
                 onSelect={() => handleSelect(opt.value)}
                 class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-50ca6ba56aa3 svadmin-u-7f6912283f11 svadmin-u-3960ffc248d9 svadmin-u-36d4469299aa svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-99afb1cc3b47 svadmin-u-529780e25268"
@@ -205,6 +287,11 @@
             {/each}
           {/if}
         </Command.List>
+        {#if hasMore}
+          <Button type="button" variant="ghost" size="sm" disabled={select.isFetching} onclick={loadMore}>
+            {i18n.t('select.loadMore')}
+          </Button>
+        {/if}
       </Command.Root>
     </div>
   {/if}

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

@@ -10,6 +10,7 @@ interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange' | 'child
     searchable?: boolean;
     multiple?: boolean;
     onSearch?: (value: string) => Filter[];
+    fetchSize?: number;
     id?: string;
     class?: string;
 }

package/dist/components/DashboardView.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { Loader2, RefreshCw } from '@lucide/svelte';
+  import {
+    DashboardContractError, captureAdminContext, captureAuthSession, createEnterpriseRequestContext,
+    decodeDashboardQuery, decodeDashboardSnapshot,
+  } from '@svadmin/core';
+  import type { DashboardProvider, DashboardSnapshot, EnterpriseProviderRequestContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { onDestroy, untrack } from 'svelte';
+  import MetricStrip, { type MetricStripItem } from './MetricStrip.svelte';
+  import { Button } from './ui/button/index.js';
+
+  interface Props {
+    provider: DashboardProvider;
+    dashboardId: string;
+    requestContext?: EnterpriseProviderRequestContext;
+    filters?: readonly { field: string; value: string | number | boolean | null }[];
+    title?: string;
+  }
+  let { provider, dashboardId, requestContext, filters = [], title }: Props = $props();
+  const context = captureAdminContext();
+  const i18n = useTranslation();
+  let snapshot = $state<DashboardSnapshot>();
+  let loading = $state(false);
+  let error = $state<'load' | 'invalid'>();
+  let epoch = 0;
+  let mounted = true;
+  let generatedContext: EnterpriseProviderRequestContext | undefined;
+  onDestroy(() => { mounted = false; });
+
+  function resolveContext(): EnterpriseProviderRequestContext {
+    if (requestContext) return requestContext;
+    const tenant = context.tenantCacheKey?.__svadminTenant;
+    if (typeof tenant !== 'string' && typeof tenant !== 'number') throw new Error('Missing tenant context');
+    if (generatedContext?.tenantId === tenant) return generatedContext;
+    generatedContext = createEnterpriseRequestContext({ tenantId: tenant });
+    return generatedContext;
+  }
+
+  async function load(): Promise<void> {
+    const currentEpoch = ++epoch;
+    loading = true;
+    error = undefined;
+    try {
+      const request = decodeDashboardQuery({
+        dashboardId: dashboardId.trim(),
+        ...(filters.length ? { filters: filters.map(filter => ({ ...filter })) } : {}),
+      });
+      const result = decodeDashboardSnapshot(await provider.get(resolveContext(), request));
+      if (!mounted || currentEpoch !== epoch) return;
+      snapshot = result;
+    } catch (cause) {
+      if (!mounted || currentEpoch !== epoch) return;
+      snapshot = undefined;
+      error = cause instanceof DashboardContractError ? 'invalid' : 'load';
+    } finally {
+      if (mounted && currentEpoch === epoch) loading = false;
+    }
+  }
+
+  const metricItems = $derived<MetricStripItem[]>(snapshot?.widgets.flatMap(widget =>
+    widget.kind === 'metric' ? widget.metrics.map(metric => ({
+      id: `${widget.id}:${metric.id}`, label: metric.label,
+      value: typeof metric.value === 'boolean' ? String(metric.value) : metric.value ?? '—',
+      ...(metric.tone ? { tone: metric.tone } : {}),
+      ...(metric.href ? { href: metric.href } : {}),
+    })) : [],
+  ) ?? []);
+
+  $effect(() => {
+    void provider; void dashboardId; void requestContext; void filters;
+    void captureAuthSession(context.authProvider).cacheKey;
+    untrack(() => { snapshot = undefined; void load(); });
+  });
+</script>
+
+<section class="svadmin-dashboard-view" aria-label={title ?? i18n.t('dashboard.title')}>
+  <header class="svadmin-dashboard-view__header">
+    <h2>{title ?? i18n.t('dashboard.title')}</h2>
+    <Button type="button" variant="outline" size="sm" aria-label={i18n.t('common.refresh')} onclick={() => void load()}>
+      <RefreshCw aria-hidden="true" class={loading ? 'svadmin-dashboard-view__spin' : undefined} />
+    </Button>
+  </header>
+  {#if loading}<div role="status"><Loader2 aria-hidden="true" /> {i18n.t('common.loading')}</div>
+  {:else if error}<div role="alert">{i18n.t(`dashboard.${error}`)}</div>
+  {:else if snapshot}
+    {#each snapshot.widgets.filter(widget => widget.kind === 'text') as widget (widget.id)}
+      <section aria-labelledby={`dashboard-widget-${widget.id}`}><h3 id={`dashboard-widget-${widget.id}`}>{widget.title}</h3><p>{widget.text}</p></section>
+    {/each}
+    <MetricStrip items={metricItems} ariaLabel={title ?? i18n.t('dashboard.metrics')} />
+  {:else}<div role="status">{i18n.t('dashboard.empty')}</div>{/if}
+</section>
+
+<style>
+  .svadmin-dashboard-view { display: grid; gap: 1rem; min-width: 0; }
+  .svadmin-dashboard-view__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+  :global(.svadmin-dashboard-view__spin) { animation: svadmin-dashboard-spin 1s linear infinite; }
+  @keyframes svadmin-dashboard-spin { to { transform: rotate(360deg); } }
+</style>