@svadmin/ui 0.88.1 → 0.91.0

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

@@ -1,4 +1,4 @@
-import type { DashboardProvider, EnterpriseProviderRequestContext } from '@svadmin/core';
+import type { DashboardDrilldown, DashboardProvider, DashboardTimeRange, EnterpriseProviderRequestContext } from '@svadmin/core';
 interface Props {
     provider: DashboardProvider;
     dashboardId: string;
@@ -7,6 +7,8 @@ interface Props {
         field: string;
         value: string | number | boolean | null;
     }[];
+    timeRange?: DashboardTimeRange;
+    onDrillDown?: ((input: DashboardDrilldown) => void | Promise<void>) | undefined;
     title?: string;
 }
 declare const DashboardView: import("svelte").Component<Props, {}, "">;

package/dist/components/DateRangeInput.svelte

@@ -112,7 +112,14 @@
 
 <div class={cn('svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-421ac2be5045', className)} data-date-range-input>
   {#if presets.length > 0}
-    <Select value="" {disabled} aria-label={i18n.t('dateInput.presets')} onchange={choosePreset}>
+    <Select
+      value=""
+      {disabled}
+      aria-label={i18n.t('dateInput.presets')}
+      aria-describedby={describedby}
+      aria-invalid={invalid || undefined}
+      onchange={choosePreset}
+    >
       <option value="">{i18n.t('dateInput.presets')}</option>
       {#each presets as preset, index (index)}
         <option value={String(index)} disabled={!presetAllowed(preset)}>{preset.label}</option>

package/dist/components/DetailWorkspaceAsyncSection.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" generics="T">
+  import { untrack } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { captureAdminContext, captureAuthSession } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import DataState from './content/DataState.svelte';
+  import type { DetailWorkspaceProvider, DetailWorkspaceScope } from './detail-workspace.js';
+
+  let {
+    provider,
+    resourceName,
+    recordId,
+    render,
+    empty,
+    emptyTitle,
+    errorTitle,
+  }: {
+    provider: DetailWorkspaceProvider<T>;
+    resourceName: string;
+    recordId: string | number;
+    render: Snippet<[DetailWorkspaceScope & { data: T }]>;
+    empty?: ((data: T) => boolean) | undefined;
+    emptyTitle?: string | undefined;
+    errorTitle?: string | undefined;
+  } = $props();
+
+  const i18n = useTranslation();
+  const adminContext = captureAdminContext();
+  let retryVersion = $state(0);
+  let sectionState = $state<'loading' | 'ready' | 'empty' | 'error'>('loading');
+  let data = $state.raw<T>();
+
+  $effect(() => {
+    const currentProvider = provider;
+    const currentResourceName = resourceName;
+    const currentRecordId = recordId;
+    const isEmpty = empty;
+    // Provider metadata carries tenant/resource configuration for the section request.
+    const scopedMeta = adminContext.getProviderMeta(currentResourceName, { recordId: currentRecordId });
+    const currentTenant = adminContext.tenant;
+    const currentAuthProvider = adminContext.authProvider;
+    const authScope = captureAuthSession(currentAuthProvider);
+    const currentAccessControlProvider = adminContext.accessControlProvider;
+    const currentAuditLogProvider = adminContext.auditLogProvider;
+    let currentDataProvider: unknown;
+    try {
+      currentDataProvider = adminContext.providers
+        ? adminContext.getDataProviderForResource(currentResourceName)
+        : undefined;
+    } catch {
+      currentDataProvider = undefined;
+    }
+    void retryVersion;
+    const controller = new AbortController();
+    let active = true;
+    const isCurrentScope = () => {
+      if (!active || controller.signal.aborted) return false;
+      if (adminContext.tenant !== currentTenant) return false;
+      if (adminContext.authProvider !== currentAuthProvider || !authScope.isCurrent()) return false;
+      if (adminContext.accessControlProvider !== currentAccessControlProvider) return false;
+      if (adminContext.auditLogProvider !== currentAuditLogProvider) return false;
+      try {
+        const dataProvider = adminContext.providers
+          ? adminContext.getDataProviderForResource(currentResourceName)
+          : undefined;
+        return dataProvider === currentDataProvider;
+      } catch {
+        return currentDataProvider === undefined;
+      }
+    };
+    sectionState = 'loading';
+    data = undefined;
+    void (async () => {
+      try {
+        const result = await untrack(() => currentProvider.load({
+          resourceName: currentResourceName,
+          recordId: currentRecordId,
+          ...(scopedMeta ? { meta: scopedMeta } : {}),
+        }, controller.signal));
+        if (!isCurrentScope()) return;
+        data = result;
+        sectionState = isEmpty?.(result) ? 'empty' : 'ready';
+      } catch {
+        if (isCurrentScope()) sectionState = 'error';
+      }
+    })();
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  });
+</script>
+
+{#if sectionState === 'loading'}
+  <div role="status" aria-live="polite" data-svadmin-detail-section-loading>
+    {i18n.t('detailWorkspace.loading')}
+  </div>
+{:else if sectionState === 'error'}
+  <div role="alert" data-svadmin-detail-section-error>
+    <p>{errorTitle ?? i18n.t('common.operationFailed')}</p>
+    <button type="button" onclick={() => retryVersion += 1}>{i18n.t('common.retry')}</button>
+  </div>
+{:else if sectionState === 'empty'}
+  <DataState state="empty" title={emptyTitle ?? i18n.t('common.noData')} />
+{:else if data !== undefined}
+  {@render render({ resourceName, recordId, data })}
+{/if}

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

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { DetailWorkspaceProvider, DetailWorkspaceScope } from './detail-workspace.js';
+declare function $$render<T>(): {
+    props: {
+        provider: DetailWorkspaceProvider<T>;
+        resourceName: string;
+        recordId: string | number;
+        render: Snippet<[DetailWorkspaceScope & {
+            data: T;
+        }]>;
+        empty?: ((data: T) => boolean) | undefined;
+        emptyTitle?: string | undefined;
+        errorTitle?: string | undefined;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DetailWorkspaceAsyncSection: $$IsomorphicComponent;
+type DetailWorkspaceAsyncSection<T> = InstanceType<typeof DetailWorkspaceAsyncSection<T>>;
+export default DetailWorkspaceAsyncSection;

package/dist/components/DetailWorkspaceSections.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+  import { captureAdminContext, useCan, withValidatedAuditProvider, type AuditEntry } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
+  import FileList, { type FileItem } from './content/FileList.svelte';
+  import AuditTimeline from './content/AuditTimeline.svelte';
+  import type { TimelineItem } from './content/AuditTimeline.svelte';
+  import VersionDiffViewer from './VersionDiffViewer.svelte';
+  import DetailWorkspaceAsyncSection from './DetailWorkspaceAsyncSection.svelte';
+  import {
+    isDetailWorkspaceSnippet,
+    type DetailWorkspaceAsyncSection as AsyncSectionConfig,
+    type DetailWorkspaceSectionsConfig,
+    type DetailWorkspaceScope,
+    type DetailWorkspaceVersionData,
+  } from './detail-workspace.js';
+
+  let {
+    resourceName,
+    recordId,
+    sections = {},
+  }: {
+    resourceName: string;
+    recordId: string | number;
+    sections?: DetailWorkspaceSectionsConfig;
+  } = $props();
+
+  const i18n = useTranslation();
+  const adminContext = captureAdminContext();
+  const instanceId = $props.id();
+  const scope: DetailWorkspaceScope = $derived(definedOptions({
+    resourceName,
+    recordId,
+    meta: adminContext.getProviderMeta(resourceName, { recordId }),
+  }));
+
+  const parentRead = useCan(() => ({
+    resource: resourceName,
+    action: 'show',
+    id: recordId,
+    queryOptions: { enabled: sections.audit === undefined && Boolean(adminContext.auditLogProvider) },
+  }));
+  const auditDenied = $derived(
+    sections.audit === undefined
+      && Boolean(adminContext.auditLogProvider)
+      && !parentRead.isLoading
+      && parentRead.allowed !== true,
+  );
+
+  // Keep one provider identity so a parent-record permission refresh does not relaunch the audit read.
+  const defaultAuditSection: AsyncSectionConfig<AuditEntry[]> = {
+    provider: {
+      load: ({ resourceName, recordId, meta }) => {
+        const transport = adminContext.auditLogProvider;
+        if (!transport) return Promise.reject(new Error('AuditLogProvider is not configured'));
+        return withValidatedAuditProvider(transport).get(definedOptions({
+          resource: resourceName,
+          meta: meta ?? adminContext.getProviderMeta(resourceName, { recordId }),
+        }));
+      },
+    },
+  };
+
+  const auditSection = $derived.by((): AsyncSectionConfig<AuditEntry[]> | Snippet<[DetailWorkspaceScope]> | undefined => {
+    if (sections.audit) return sections.audit;
+    if (parentRead.allowed !== true) return undefined;
+    if (!adminContext.auditLogProvider) return undefined;
+    return defaultAuditSection;
+  });
+
+  function auditItems(entries: AuditEntry[]): TimelineItem[] {
+    return entries.map((entry, index) => ({
+      id: String(entry.id ?? `${entry.timestamp}:${index}`),
+      title: entry.action,
+      ...(entry.userId ? { description: `${i18n.t('audit.actorPrefix')}${entry.userId}` } : {}),
+      timestamp: entry.timestamp,
+      status: entry.outcome === 'failure' ? 'danger' as const : 'info' as const,
+      ...(entry.resource ? { tag: entry.resource } : {}),
+    }));
+  }
+
+  function attachmentSection() {
+    const section = sections.attachments;
+    if (!section) return undefined;
+    if (isDetailWorkspaceSnippet(section)) return { snippet: section };
+    return { async: section };
+  }
+  function activitySection() {
+    const section = sections.activity;
+    if (!section) return undefined;
+    if (isDetailWorkspaceSnippet(section)) return { snippet: section };
+    return { async: section };
+  }
+  function versionSection() {
+    const section = sections.versions;
+    if (!section) return undefined;
+    if (isDetailWorkspaceSnippet(section)) return { snippet: section };
+    return { async: section };
+  }
+  const attachments = $derived(attachmentSection());
+  const activity = $derived(activitySection());
+  const versions = $derived(versionSection());
+</script>
+
+{#snippet scopeUnavailable(name: string)}
+  <p data-svadmin-detail-section-unavailable data-svadmin-detail-section-name={name}>
+    {i18n.t('detailWorkspace.unavailable')}
+  </p>
+{/snippet}
+
+{#snippet attachmentRenderer({ data }: DetailWorkspaceScope & { data: FileItem[] })}
+  <FileList files={data ?? []} />
+{/snippet}
+
+{#snippet activityRenderer({ data }: DetailWorkspaceScope & { data: TimelineItem[] })}
+  <AuditTimeline items={data} />
+{/snippet}
+
+{#snippet auditRenderer({ data }: DetailWorkspaceScope & { data: AuditEntry[] })}
+  <AuditTimeline items={auditItems(data)} />
+{/snippet}
+
+{#snippet versionRenderer({ data }: DetailWorkspaceScope & { data: DetailWorkspaceVersionData })}
+  <VersionDiffViewer
+    oldValue={data.oldValue}
+    newValue={data.newValue}
+    {...definedOptions({
+      oldTitle: data.oldTitle,
+      newTitle: data.newTitle,
+      fieldLabels: data.fieldLabels,
+    })}
+  />
+{/snippet}
+
+{#key `${resourceName}:${recordId}`}
+  <div
+    data-svadmin-detail-workspace
+    data-svadmin-detail-resource={resourceName}
+    data-svadmin-detail-record={String(recordId)}
+  >
+    <section data-svadmin-detail-section="relations" aria-labelledby="{instanceId}-detail-workspace-relations">
+      <h3 id="{instanceId}-detail-workspace-relations">{i18n.t('detailWorkspace.relations')}</h3>
+      {#if sections.relations}
+        {@render sections.relations(scope)}
+      {:else}
+        {@render scopeUnavailable('relations')}
+      {/if}
+    </section>
+
+    <section data-svadmin-detail-section="attachments" aria-labelledby="{instanceId}-detail-workspace-attachments">
+      <h3 id="{instanceId}-detail-workspace-attachments">{i18n.t('detailWorkspace.attachments')}</h3>
+      {#if attachments?.async}
+        <DetailWorkspaceAsyncSection
+          provider={attachments.async.provider}
+          {resourceName}
+          {recordId}
+          render={attachments.async.render ?? attachmentRenderer}
+          empty={attachments.async.empty}
+          emptyTitle={attachments.async.emptyTitle}
+          errorTitle={attachments.async.errorTitle}
+        />
+      {:else if attachments?.snippet}
+        {@render attachments.snippet(scope)}
+      {:else}
+        {@render scopeUnavailable('attachments')}
+      {/if}
+    </section>
+
+    <section data-svadmin-detail-section="activity" aria-labelledby="{instanceId}-detail-workspace-activity">
+      <h3 id="{instanceId}-detail-workspace-activity">{i18n.t('detailWorkspace.activity')}</h3>
+      {#if activity?.async}
+        <DetailWorkspaceAsyncSection
+          provider={activity.async.provider}
+          {resourceName}
+          {recordId}
+          render={activity.async.render ?? activityRenderer}
+          empty={activity.async.empty}
+          emptyTitle={activity.async.emptyTitle}
+          errorTitle={activity.async.errorTitle}
+        />
+      {:else if activity?.snippet}
+        {@render activity.snippet(scope)}
+      {:else}
+        {@render scopeUnavailable('activity')}
+      {/if}
+    </section>
+
+    <section data-svadmin-detail-section="audit" aria-labelledby="{instanceId}-detail-workspace-audit">
+      <h3 id="{instanceId}-detail-workspace-audit">{i18n.t('detailWorkspace.audit')}</h3>
+      {#if auditDenied}
+        <p data-svadmin-detail-section-denied>{i18n.t('common.accessDenied')}</p>
+      {:else if !sections.audit && adminContext.auditLogProvider && parentRead.isLoading}
+        <div role="status" aria-live="polite" data-svadmin-detail-section-loading>
+          {i18n.t('detailWorkspace.loading')}
+        </div>
+      {:else if auditSection && typeof auditSection !== 'function'}
+        <DetailWorkspaceAsyncSection
+          provider={auditSection.provider}
+          {resourceName}
+          {recordId}
+          render={auditSection.render ?? auditRenderer}
+          empty={auditSection.empty}
+          emptyTitle={auditSection.emptyTitle}
+          errorTitle={auditSection.errorTitle}
+        />
+      {:else if auditSection}
+        {@render auditSection(scope)}
+      {:else}
+        {@render scopeUnavailable('audit')}
+      {/if}
+    </section>
+
+    <section data-svadmin-detail-section="versions" aria-labelledby="{instanceId}-detail-workspace-versions">
+      <h3 id="{instanceId}-detail-workspace-versions">{i18n.t('detailWorkspace.versions')}</h3>
+      {#if versions?.async}
+        <DetailWorkspaceAsyncSection
+          provider={versions.async.provider}
+          {resourceName}
+          {recordId}
+          render={versions.async.render ?? versionRenderer}
+          empty={versions.async.empty}
+          emptyTitle={versions.async.emptyTitle}
+          errorTitle={versions.async.errorTitle}
+        />
+      {:else if versions?.snippet}
+        {@render versions.snippet(scope)}
+      {:else}
+        {@render scopeUnavailable('versions')}
+      {/if}
+    </section>
+  </div>
+{/key}

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

@@ -0,0 +1,9 @@
+import { type DetailWorkspaceSectionsConfig } from './detail-workspace.js';
+type $$ComponentProps = {
+    resourceName: string;
+    recordId: string | number;
+    sections?: DetailWorkspaceSectionsConfig;
+};
+declare const DetailWorkspaceSections: import("svelte").Component<$$ComponentProps, {}, "">;
+type DetailWorkspaceSections = ReturnType<typeof DetailWorkspaceSections>;
+export default DetailWorkspaceSections;

package/dist/components/DrawerForm.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { onDestroy, type Snippet } from 'svelte';
   import * as Sheet from './ui/sheet/index.js';
   import { Button } from './ui/button/index.js';
   import { Loader2 } from '@lucide/svelte';
   import { cn } from '../utils.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import FeedbackNotice from './content/FeedbackNotice.svelte';
 
   interface Props {
     open?: boolean;
@@ -18,8 +20,8 @@
     widthClass?: string;
     isSubmitting?: boolean;
     disabled?: boolean;
-    onsubmit?: () => void | Promise<void>;
-    oncancel?: () => void;
+    onsubmit?: (() => void | Promise<void>) | undefined;
+    oncancel?: (() => void) | undefined;
     class?: string;
     triggerSnippet?: Snippet;
     children?: Snippet;
@@ -45,23 +47,86 @@
     children,
   }: Props = $props();
 
+  const i18n = useTranslation();
   let loading = $state(false);
+  let submitError = $state('');
+  let round = 0;
+  let nextRequestId = 0;
+  let activeRequest: { id: number; round: number; onsubmit?: Props['onsubmit'] } | undefined;
+  let formElement: HTMLFormElement | undefined;
+  let destroyed = false;
+  const busy = $derived(loading || isSubmitting);
+
+  let lastOpen = open;
+  let lastOnsubmit: Props['onsubmit'];
+  let hasLastOnsubmit = false;
+  function resetRequestState() {
+    round += 1;
+    activeRequest = undefined;
+    loading = false;
+    submitError = '';
+  }
+
+  $effect(() => {
+    if (open === lastOpen) return;
+    lastOpen = open;
+    resetRequestState();
+  });
+
+  $effect(() => {
+    const handler = onsubmit;
+    if (!hasLastOnsubmit) {
+      hasLastOnsubmit = true;
+      lastOnsubmit = handler;
+      return;
+    }
+    if (handler === lastOnsubmit) return;
+    lastOnsubmit = handler;
+    resetRequestState();
+  });
+
+  onDestroy(() => {
+    destroyed = true;
+    formElement = undefined;
+    resetRequestState();
+  });
+
+  function isCurrentRequest(token: { id: number; round: number; onsubmit?: Props['onsubmit'] }) {
+    return !destroyed && activeRequest === token && token.round === round && token.onsubmit === onsubmit;
+  }
 
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault();
+    if (!open || destroyed || e.currentTarget !== formElement || disabled || busy) return;
+    const token = { id: ++nextRequestId, round, onsubmit };
+    activeRequest = token;
     loading = true;
+    submitError = '';
     try {
       await onsubmit?.();
+      if (!isCurrentRequest(token)) return;
       open = false;
+    } catch {
+      if (!isCurrentRequest(token)) return;
+      submitError = i18n.t('common.operationFailed');
     } finally {
-      loading = false;
+      if (activeRequest === token) {
+        activeRequest = undefined;
+        loading = false;
+      }
     }
   }
 
   function handleCancel() {
+    if (busy) return;
     oncancel?.();
     open = false;
   }
+
+  function handleCloseRequest(close: () => void) {
+    if (busy) return;
+    close();
+  }
 </script>
 
 {#if triggerSnippet}
@@ -79,9 +144,9 @@
   </Button>
 {/if}
 
-<Sheet.Root bind:open {side} onClose={handleCancel} class={cn(widthClass, 'svadmin-u-8a539c7fe216 svadmin-u-2cd02d11d1af', className)}>
+<Sheet.Root bind:open {side} onClose={handleCancel} onCloseRequest={handleCloseRequest} class={cn(widthClass, 'svadmin-u-8a539c7fe216 svadmin-u-2cd02d11d1af', className)}>
   <Sheet.Content class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-668b21aa5409 svadmin-u-63a285be6490 svadmin-u-8a539c7fe216">
-    <form onsubmit={handleSubmit} class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-668b21aa5409">
+    <form bind:this={formElement} onsubmit={handleSubmit} aria-busy={busy} class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-668b21aa5409">
       <Sheet.Header class="svadmin-u-f92d02360b8f svadmin-u-cb11fec3bb46 svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
         <Sheet.Title>{title}</Sheet.Title>
         {#if description}
@@ -89,6 +154,10 @@
         {/if}
       </Sheet.Header>
 
+      {#if submitError}
+        <FeedbackNotice tone="danger" message={submitError} />
+      {/if}
+
       <div class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-0478c89a150f svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359 svadmin-u-3e7ce58d64fa">
         {#if children}
           {@render children()}
@@ -100,7 +169,7 @@
           type="button"
           variant="outline"
           size="sm"
-          disabled={loading || isSubmitting}
+          disabled={busy}
           onclick={handleCancel}
         >
           {cancelText}
@@ -108,10 +177,10 @@
         <Button
           type="submit"
           size="sm"
-          disabled={loading || isSubmitting || disabled}
+          disabled={busy || disabled}
           class="svadmin-u-58284b4ea568 svadmin-u-2e7a6d18a20d"
         >
-          {#if loading || isSubmitting}
+          {#if busy}
             <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
           {/if}
           {submitText}

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     open?: boolean;
     title: string;
@@ -12,8 +12,8 @@ interface Props {
     widthClass?: string;
     isSubmitting?: boolean;
     disabled?: boolean;
-    onsubmit?: () => void | Promise<void>;
-    oncancel?: () => void;
+    onsubmit?: (() => void | Promise<void>) | undefined;
+    oncancel?: (() => void) | undefined;
     class?: string;
     triggerSnippet?: Snippet;
     children?: Snippet;

package/dist/components/ErrorBoundary.svelte

@@ -36,7 +36,7 @@
               <div class="svadmin-u-6f7e013d6499">
                 <Alert.Title>{i18n.t('common.error')}</Alert.Title>
                 <Alert.Description class="svadmin-u-fc7473ca09eb">
-                  {error instanceof Error ? error.message : String(error)}
+                  {i18n.t('error.internalServerErrorDescription')}
                 </Alert.Description>
               </div>
             </div>

package/dist/components/ErrorComponent.svelte

@@ -6,31 +6,44 @@
 
   const i18n = useTranslation();
 
+  // 优先使用宿主自定义的旧词条；当该可选词条未注册时回退到核心内置词条，
+  // 避免默认 UI 直接暴露原始 i18n key。
+  function translatedOrFallback(key: string, fallbackKey: string): string {
+    const text = i18n.t(key);
+    return text === key ? i18n.t(fallbackKey) : text;
+  }
+
   let {
-    error,
-    title = i18n.t('error.title'),
-    description = i18n.t('error.description'),
+    title,
+    description,
     retry,
   } = $props<{
+    /** Kept for host compatibility; diagnostics are never rendered by default. */
     error?: Error | null;
     title?: string;
     description?: string;
     retry?: () => void;
   }>();
+
+  const resolvedTitle = $derived(title ?? translatedOrFallback('error.title', 'common.error'));
+  const resolvedDescription = $derived(
+    description ?? translatedOrFallback('error.description', 'error.internalServerErrorDescription'),
+  );
+  const resolvedRetryLabel = $derived(translatedOrFallback('buttons.retry', 'common.retry'));
 </script>
 
 <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-7e3e9a76c966 svadmin-u-1100bef66e60 svadmin-u-ca6bf63030aa">
   <Alert.Root variant="destructive" class="svadmin-u-9794ab45094d svadmin-u-2eba0d65d059">
     <AlertTriangle class="svadmin-u-cd0d9c512cdc svadmin-u-72470489ff4e" />
-    <Alert.Title>{title}</Alert.Title>
+    <Alert.Title>{resolvedTitle}</Alert.Title>
     <Alert.Description>
-      {error?.message || description}
+      {resolvedDescription}
     </Alert.Description>
     {#if retry}
       <div class="svadmin-u-0ab8667228fd">
         <Button variant="outline" size="sm" onclick={retry}>
           <RefreshCw class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" data-icon="inline-start" />
-          {i18n.t('buttons.retry')}
+          {resolvedRetryLabel}
         </Button>
       </div>
     {/if}

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

@@ -1,4 +1,5 @@
 type $$ComponentProps = {
+    /** Kept for host compatibility; diagnostics are never rendered by default. */
     error?: Error | null;
     title?: string;
     description?: string;