@svadmin/ui 0.86.0 → 0.88.1

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

@@ -8,6 +8,10 @@ interface Props {
     columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;
+    formActions?: Snippet<[{
+        isLoading: boolean;
+        onSubmit: () => void;
+    }]>;
     onSuccess?: () => void;
     class?: string;
 }

package/dist/components/ListPage.svelte

@@ -9,6 +9,7 @@
   import PageHeader from './PageHeader.svelte';
   import AutoTable from './AutoTable.svelte';
   import type { BatchSelection } from './table-contract';
+  import type { SavedListViewProvider } from './saved-list-views.js';
   import CreateButton from './buttons/CreateButton.svelte';
 
   interface Props {
@@ -19,6 +20,7 @@
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
     allowSelectAllMatching?: boolean;
+    savedViewProvider?: SavedListViewProvider;
     /** Passthrough: custom header actions */
     headerActions?: Snippet;
     /** Optional status tabs slot above filter/table */
@@ -45,6 +47,7 @@
     canCreate,
     selectable,
     allowSelectAllMatching,
+    savedViewProvider,
     headerActions,
     statusTabs,
     filterToolbar,
@@ -60,7 +63,7 @@
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
 </script>
 
-<div class="svadmin-u-3e7ce58d64fa {className}">
+<div class="svadmin-u-3e7ce58d64fa {className}" data-svadmin-list-page={resourceName}>
   <PageHeader title={pageTitle}>
     {#snippet actions()}
       {#if showCreate}
@@ -73,26 +76,29 @@
   </PageHeader>
 
   {#if statusTabs}
-    <div>
+    <div data-svadmin-list-page-status-tabs>
       {@render statusTabs()}
     </div>
   {/if}
 
   {#if filterToolbar}
-    <div>
+    <div data-svadmin-list-page-filter-toolbar>
       {@render filterToolbar()}
     </div>
   {/if}
 
-  <AutoTable
-    {rendering}
-    {resourceName}
-    showHeader={false}
-    {...definedOptions({ "selectable": selectable })}
-    {...definedOptions({ allowSelectAllMatching })}
-    {...definedOptions({ batchActions })}
-    {...definedOptions({ "defaultCellRenderer": cellRenderer })}
-    {...definedOptions({ "rowActions": rowActions })}
-    {...definedOptions({ emptyState, expandedRowRender })}
-  />
+  <div data-svadmin-list-page-table>
+    <AutoTable
+      {rendering}
+      {resourceName}
+      showHeader={false}
+      {...definedOptions({ "selectable": selectable })}
+      {...definedOptions({ allowSelectAllMatching })}
+      {...definedOptions({ savedViewProvider })}
+      {...definedOptions({ batchActions })}
+      {...definedOptions({ "defaultCellRenderer": cellRenderer })}
+      {...definedOptions({ "rowActions": rowActions })}
+      {...definedOptions({ emptyState, expandedRowRender })}
+    />
+  </div>
 </div>

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

@@ -2,6 +2,7 @@ import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 import type { FieldDefinition } from '@svadmin/core';
 import type { BatchSelection } from './table-contract';
+import type { SavedListViewProvider } from './saved-list-views.js';
 interface Props {
     resourceName: string;
     rendering?: ResourceRendering | undefined;
@@ -10,6 +11,7 @@ interface Props {
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
     allowSelectAllMatching?: boolean;
+    savedViewProvider?: SavedListViewProvider;
     /** Passthrough: custom header actions */
     headerActions?: Snippet;
     /** Optional status tabs slot above filter/table */

package/dist/components/LoginPage.svelte

@@ -25,6 +25,10 @@
     defaultIdentifier = '',
     defaultPassword = '',
     loginHint,
+    identifierLabel,
+    identifierPlaceholder,
+    passwordLabel,
+    loginButtonLabel,
   } = $props<{
     title?: string;
     onSuccess?: () => void;
@@ -32,6 +36,10 @@
     defaultIdentifier?: string;
     defaultPassword?: string;
     loginHint?: string;
+    identifierLabel?: string;
+    identifierPlaceholder?: string;
+    passwordLabel?: string;
+    loginButtonLabel?: string;
   }>();
 
   const adminContext = captureAdminContext();
@@ -72,6 +80,7 @@
   {/if}
 {/snippet}
 
+<div data-svadmin-login-page>
 <AuthPageShell brand={title} title={i18n.t('auth.welcomeBack')} description={i18n.t('auth.welcomeMessage')} {footer}>
       {#if loginHint || defaultIdentifier || defaultPassword}
         <aside data-svadmin-demo-credentials class="svadmin-u-fb88ccaacf5b svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-60ed9c3ef326 svadmin-u-eb6e8b881acd">
@@ -95,9 +104,9 @@
         </aside>
       {/if}
 
-      <form onsubmit={handleSubmit} class="svadmin-u-b43b4c086d9a">
+      <form onsubmit={handleSubmit} class="svadmin-u-b43b4c086d9a" data-svadmin-login-form>
         {#if error}
-          <Alert.Root variant="destructive">
+          <Alert.Root variant="destructive" id="login-error" data-svadmin-login-error aria-live="assertive">
             <AlertCircle class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
             <Alert.Description class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069">{error}</Alert.Description>
           </Alert.Root>
@@ -105,17 +114,20 @@
 
         <div class="svadmin-u-6f7e013d6499">
           <Label for="login-identifier">
-            {i18n.t('auth.usernameOrEmail')}
+            {identifierLabel ?? i18n.t('auth.usernameOrEmail')}
           </Label>
-          <div class="svadmin-u-d89972fe17d6">
-            <User class="svadmin-u-a4326536b8f5 svadmin-u-da4dbfbc4fdc svadmin-u-22e59b722111 svadmin-u-d694ba66e322 svadmin-u-536a7530a44f svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-36b381be4df3 svadmin-u-bfa603190748" />
+          <div class="svadmin-auth-input-field" data-svadmin-login-identifier-field>
+            <User class="svadmin-auth-input-icon" data-svadmin-auth-input-icon aria-hidden="true" />
             <Input
               id="login-identifier"
+              data-svadmin-login-identifier
               type="text"
-              placeholder={i18n.t('auth.identifierPlaceholder')}
+              placeholder={identifierPlaceholder ?? i18n.t('auth.identifierPlaceholder')}
               bind:value={identifier}
-              class="svadmin-u-9e83b2412bc9"
+              class="svadmin-auth-input-control"
               autocomplete="username"
+              aria-invalid={error ? 'true' : undefined}
+              aria-describedby={error ? 'login-error' : undefined}
             />
           </div>
         </div>
@@ -123,7 +135,7 @@
         <div class="svadmin-u-6f7e013d6499">
           <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc">
             <Label for="login-password">
-              {i18n.t('auth.password')}
+              {passwordLabel ?? i18n.t('auth.password')}
             </Label>
             {#if authProvider?.forgotPassword}
               <Button variant="link" class="svadmin-u-b8f0a08ece1e svadmin-u-8a539c7fe216 svadmin-u-359090c2d529 svadmin-u-2689f3958069" onclick={() => adminContext.navigate('/forgot-password')}>
@@ -133,17 +145,20 @@
           </div>
           <PasswordInput
             id="login-password"
-            label=""
+            label={passwordLabel ?? i18n.t('auth.password')}
+            showLabel={false}
             bind:value={password}
             autocomplete="current-password"
+            ariaInvalid={error ? 'true' : undefined}
+            ariaDescribedby={error ? 'login-error' : undefined}
           />
         </div>
 
-        <Button type="submit" class="svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741" disabled={login.isLoading}>
+        <Button type="submit" data-svadmin-login-submit class="svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741" disabled={login.isLoading} aria-busy={login.isLoading}>
           {#if login.isLoading}
             <Loader2 class="svadmin-u-cd0d9c512cdc svadmin-u-72470489ff4e svadmin-u-afbdd13a380e svadmin-u-d2347e8497a9" />
           {/if}
-          {i18n.t('auth.loginButton')}
+          {loginButtonLabel ?? i18n.t('auth.loginButton')}
         </Button>
       </form>
 
@@ -171,3 +186,4 @@
         </div>
       {/if}
 </AuthPageShell>
+</div>

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

@@ -10,6 +10,10 @@ type $$ComponentProps = {
     defaultIdentifier?: string;
     defaultPassword?: string;
     loginHint?: string;
+    identifierLabel?: string;
+    identifierPlaceholder?: string;
+    passwordLabel?: string;
+    loginButtonLabel?: string;
 };
 declare const LoginPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type LoginPage = ReturnType<typeof LoginPage>;

package/dist/components/NotificationsSettings.svelte

@@ -33,12 +33,13 @@
   let loading = $state(false);
   let saving = $state(false);
   let loaded = $state(false);
-  let error = $state('');
+  let loadError = $state('');
+  let saveError = $state('');
   let epoch = 0;
   async function load() {
     const provider = preferencesProvider;
     const request = ++epoch;
-    error = ''; loaded = false; saving = false;
+    loadError = ''; saveError = ''; loaded = false; saving = false;
     loading = Boolean(provider);
     if (!provider) return;
     try {
@@ -47,7 +48,7 @@
       emailAlerts = { ...result.email }; pushAlerts = { ...result.push }; smsAlerts = { ...result.sms };
       loaded = true;
     } catch (caught) {
-      if (request === epoch) error = caught instanceof Error ? caught.message : String(caught);
+      if (request === epoch) loadError = caught instanceof Error ? caught.message : String(caught);
     } finally {
       if (request === epoch) loading = false;
     }
@@ -61,12 +62,12 @@
     const provider = preferencesProvider;
     if (!provider || !loaded || saving) return;
     const request = epoch;
-    saving = true; error = '';
+    saving = true; saveError = '';
     try {
       await provider.save({ email: { ...emailAlerts }, push: { ...pushAlerts }, sms: { ...smsAlerts } });
       if (request === epoch) notification.success(i18n.t('common.updateSuccess'), 3000);
     } catch (caught) {
-      if (request === epoch) error = caught instanceof Error ? caught.message : String(caught);
+      if (request === epoch) saveError = caught instanceof Error ? caught.message : String(caught);
     } finally {
       if (request === epoch) saving = false;
     }
@@ -85,9 +86,15 @@
   {#if !preferencesProvider}
     <FeedbackNotice tone="warning" message={i18n.locale === 'zh-CN' ? '未配置通知偏好存储服务，设置不可保存。' : 'Notification preference storage is not configured. Settings cannot be saved.'} />
   {/if}
-  {#if loading}<DataState state="loading" />{/if}
-  {#if error}<p role="alert">{error}</p>{#if !loaded}<Button onclick={load}>{i18n.t('common.retry')}</Button>{/if}{/if}
-  <fieldset disabled={!loaded || loading || saving} class="svadmin-u-b3542e058833">
+  {#if loading}
+    <DataState state="loading" />
+  {:else if loadError}
+    <DataState state="error" description={loadError} retry={load} />
+  {:else if saveError}
+    <FeedbackNotice tone="danger" message={saveError} />
+  {/if}
+  {#if loaded || !preferencesProvider}
+  <fieldset disabled={!preferencesProvider || saving} class="svadmin-u-b3542e058833">
   <SettingsGroup title={i18n.t('notifications.emailTitle')} description={i18n.t('notifications.emailDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
       <SettingsFieldRow controlId={`${controlId}-email-security`} label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityAlertsDesc')}>{#snippet control()}<Switch id={`${controlId}-email-security`} bind:checked={emailAlerts.security} />{/snippet}</SettingsFieldRow>
@@ -106,4 +113,5 @@
     <SettingsFieldRow controlId={`${controlId}-sms-security`} label={i18n.t('notifications.criticalSecurity')} description={i18n.t('notifications.criticalSecurityDesc')}>{#snippet control()}<Switch id={`${controlId}-sms-security`} bind:checked={smsAlerts.security} />{/snippet}</SettingsFieldRow>
   </SettingsGroup>
   </fieldset>
+  {/if}
 </div>

package/dist/components/PagePattern.svelte

@@ -6,7 +6,7 @@
   import DataState from './content/DataState.svelte';
 
   export type PagePatternKind = 'list' | 'form' | 'detail' | 'workspace' | 'dashboard';
-  export type PagePatternState = 'ready' | 'loading' | 'empty' | 'error' | 'forbidden';
+  export type PagePatternState = 'ready' | 'loading' | 'empty' | 'filtered-empty' | 'error' | 'forbidden';
 
   interface Props {
     kind: PagePatternKind;
@@ -68,7 +68,7 @@
 >
   <div data-page-pattern-kind={kind} data-page-pattern-state={state}>
   {#if showState}
-    {#if state === 'loading' || state === 'empty' || state === 'error' || state === 'forbidden'}
+    {#if state === 'loading' || state === 'empty' || state === 'filtered-empty' || state === 'error' || state === 'forbidden'}
       <DataState
         {state}
         {...definedOptions({ title: stateTitle })}

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 export type PagePatternKind = 'list' | 'form' | 'detail' | 'workspace' | 'dashboard';
-export type PagePatternState = 'ready' | 'loading' | 'empty' | 'error' | 'forbidden';
+export type PagePatternState = 'ready' | 'loading' | 'empty' | 'filtered-empty' | 'error' | 'forbidden';
 interface Props {
     kind: PagePatternKind;
     title: string;

package/dist/components/PasswordInput.svelte

@@ -16,7 +16,10 @@
     autocomplete?: FullAutoFill;
     showStrength?: boolean;
     disabled?: boolean;
+    showLabel?: boolean;
     class?: string;
+    ariaInvalid?: 'true' | 'false' | undefined;
+    ariaDescribedby?: string | undefined;
   }
 
   let {
@@ -27,7 +30,10 @@
     autocomplete = 'current-password',
     showStrength = false,
     disabled = false,
+    showLabel = true,
     class: className = '',
+    ariaInvalid,
+    ariaDescribedby,
   }: Props = $props();
 
   let showPassword = $state(false);
@@ -44,10 +50,10 @@
     return Math.min(score, 100);
   });
 
-  const strengthColor = $derived(
-    strength < 30 ? 'bg-destructive' :
-    strength < 60 ? 'bg-warning' :
-    strength < 80 ? 'bg-info' : 'bg-success'
+  const strengthTone = $derived(
+    strength < 30 ? 'danger' :
+    strength < 60 ? 'warning' :
+    strength < 80 ? 'info' : 'success'
   );
 
   const strengthLabel = $derived(
@@ -57,45 +63,58 @@
   );
 </script>
 
-<div class="svadmin-u-6f7e013d6499 {className}">
-  <Label for={id}>{label}</Label>
-  <div class="svadmin-u-d89972fe17d6">
-    <Lock class="svadmin-u-da4dbfbc4fdc svadmin-u-22e59b722111 svadmin-u-d694ba66e322 svadmin-u-36b381be4df3 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-bfa603190748 svadmin-u-a4326536b8f5 svadmin-u-536a7530a44f" />
+<div
+  class="svadmin-password-input {className}"
+  data-svadmin-password-input
+  data-svadmin-login-password
+  data-password-visible={showPassword ? 'true' : 'false'}
+>
+  {#if showLabel}
+    <Label for={id} class="svadmin-password-input__label" data-svadmin-password-label>{label}</Label>
+  {/if}
+  <div class="svadmin-password-input__field" data-svadmin-password-field>
+    <Lock class="svadmin-password-input__icon" data-svadmin-password-icon aria-hidden="true" />
     <Input
       {id}
       type={showPassword ? 'text' : 'password'}
       {placeholder}
       bind:value
-      class="svadmin-u-9e83b2412bc9 svadmin-u-1b1df78e4d0a"
+      class="svadmin-password-input__control"
+      data-svadmin-password-control
       {autocomplete}
       {disabled}
+      aria-invalid={ariaInvalid}
+      aria-describedby={ariaDescribedby}
     />
     <TooltipButton
       tooltip={showPassword ? i18n.t('common.hidePassword') : i18n.t('common.showPassword')}
       variant="ghost"
       size="icon"
       type="button"
-      class="svadmin-u-da4dbfbc4fdc svadmin-u-68d3fc190004 svadmin-u-d694ba66e322 svadmin-u-36b381be4df3 svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-536a7530a44f"
+      class="svadmin-password-input__toggle"
+      data-svadmin-password-toggle
+      aria-controls={id}
+      aria-pressed={showPassword}
       onclick={(e) => { e.preventDefault(); showPassword = !showPassword; }}
       {disabled}
-      tabindex={-1}
     >
       {#if showPassword}
-        <EyeOff class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+        <EyeOff class="svadmin-password-input__glyph" />
       {:else}
-        <Eye class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+        <Eye class="svadmin-password-input__glyph" />
       {/if}
     </TooltipButton>
   </div>
   {#if showStrength && value}
-    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
-      <div class="svadmin-u-36e579c0b41c svadmin-u-095acb275581 svadmin-u-ac204c108886 svadmin-u-2ef11f1cb219 svadmin-u-2cd02d11d1af">
+    <div class="svadmin-password-input__strength" data-svadmin-password-strength>
+      <div class="svadmin-password-input__strength-track">
         <div
-          class="svadmin-u-668b21aa5409 svadmin-u-ac204c108886 svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63 {strengthColor}"
+          class="svadmin-password-input__strength-fill"
+          data-tone={strengthTone}
           style="width: {strength}%"
         ></div>
       </div>
-      <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-e7e371071bc5 svadmin-u-308fc069e46e">{strengthLabel}</span>
+      <span class="svadmin-password-input__strength-label">{strengthLabel}</span>
     </div>
   {/if}
 </div>

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

@@ -7,7 +7,10 @@ interface Props {
     autocomplete?: FullAutoFill;
     showStrength?: boolean;
     disabled?: boolean;
+    showLabel?: boolean;
     class?: string;
+    ariaInvalid?: 'true' | 'false' | undefined;
+    ariaDescribedby?: string | undefined;
 }
 declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;

package/dist/components/ShowPage.svelte

@@ -13,6 +13,7 @@
   import CloneButton from './buttons/CloneButton.svelte';
   import { Button } from './ui/button/index.js';
   import { RefreshCw } from '@lucide/svelte';
+import DataState from './content/DataState.svelte';
 
   const i18n = useTranslation();
 
@@ -73,12 +74,13 @@
   });
 </script>
 
-<div data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'show' : undefined} class="svadmin-u-3e7ce58d64fa {className}">
-  <PageHeader
-    title="{resource.label} {i18n.t('common.detail')} #{id}"
-    onBack={goBack}
-    backLabel={i18n.t('common.back')}
-  >
+<div data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'show' : undefined} data-svadmin-crud-page="show" data-svadmin-resource={resourceName} data-svadmin-record-id={id} class="svadmin-u-3e7ce58d64fa {className}">
+  <div data-svadmin-crud-page-header>
+    <PageHeader
+      title="{resource.label} {i18n.t('common.detail')} #{id}"
+      onBack={goBack}
+      backLabel={i18n.t('common.back')}
+    >
     {#snippet actions()}
       {#if detail.canRead && query.isSuccess && resource.canEdit !== false}
         <EditButton resource={resourceName} recordItemId={id} hideText />
@@ -98,8 +100,10 @@
         {@render headerActions()}
       {/if}
     {/snippet}
-  </PageHeader>
+    </PageHeader>
+  </div>
 
+  <div data-svadmin-crud-page-content data-svadmin-detail-state={detail.checkingPermission || query.isLoading ? 'loading' : !detail.canRead ? 'forbidden' : query.isError ? 'error' : query.isSuccess ? 'ready' : 'empty'}>
   {#if detail.checkingPermission || query.isLoading}
     <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
       <Card.Content class="svadmin-u-8a539c7fe216">
@@ -112,15 +116,11 @@
       </Card.Content>
     </Card.Root>
   {:else if !detail.canRead}
-    <p role="status" data-svadmin-access-denied>{i18n.t('common.accessDenied')}</p>
-  {:else if query.isError}
-    <div role="alert">
-      <p>{i18n.t('common.operationFailed')}</p>
-      <Button type="button" variant="ghost" size="icon" title={i18n.t('common.retry')}
-        aria-label={i18n.t('common.retry')} disabled={query.isFetching} onclick={detail.refresh}>
-        <RefreshCw class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
-      </Button>
+    <div data-svadmin-access-denied>
+      <DataState state="forbidden" title={i18n.t('common.accessDenied')} />
     </div>
+  {:else if query.isError}
+    <DataState state="error" title={i18n.t('common.operationFailed')} retry={detail.refresh} />
   {:else if query.isSuccess}
     {@const record = activeRendering ? activeRendering.record(query.data.data) : query.data.data}
     {#if layout === 'grid'}
@@ -165,13 +165,12 @@
       </Card.Root>
     {/if}
     {#if children}
-      {@render children()}
+      <div data-svadmin-crud-page-extension>
+        {@render children()}
+      </div>
     {/if}
   {:else}
-    <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
-      <Card.Content class="svadmin-u-845f53365c8d svadmin-u-ca6bf63030aa">
-        <p class="svadmin-u-bfa603190748">{i18n.t('common.noData')}</p>
-      </Card.Content>
-    </Card.Root>
+    <DataState state="empty" description={i18n.t('common.noData')} />
   {/if}
+  </div>
 </div>

package/dist/components/account/MemberDirectory.svelte

@@ -20,7 +20,7 @@
   import { Input } from '../ui/input/index.js';
   import DataState from '../content/DataState.svelte';
   import FeedbackNotice from '../content/FeedbackNotice.svelte';
-  import { Copy, Send } from '@lucide/svelte';
+  import { Copy, Send, X } from '@lucide/svelte';
 
   let { provider }: { provider?: MemberDirectoryProvider | undefined } = $props();
   const context = captureAdminContext();
@@ -29,6 +29,7 @@
   const controlId = $props.id();
   let rows = $state<DirectoryMember[]>([]);
   let query = $state('');
+  let searchInput = $state<HTMLInputElement | null>(null);
   let email = $state('');
   let loading = $state(false);
   let sending = $state(false);
@@ -37,6 +38,10 @@
   let status = $state('');
   let epoch = 0;
   const filtered = $derived(rows.filter(row => `${row.name} ${row.email}`.toLowerCase().includes(query.toLowerCase())));
+  function clearSearch(): void {
+    query = '';
+    searchInput?.focus();
+  }
   async function load() {
     const current = provider;
     const request = ++epoch;
@@ -117,10 +122,18 @@
   {:else}
     <div class="w-full max-w-sm space-y-2">
       <label for={`${controlId}-search`} class="block text-sm font-medium text-foreground">{isZh ? '搜索成员' : 'Search members'}</label>
-      <Input id={`${controlId}-search`} type="search" bind:value={query} />
+      <Input id={`${controlId}-search`} type="search" bind:value={query} bind:ref={searchInput} />
     </div>
-    {#if filtered.length === 0}
-      <DataState state="empty" title={isZh ? '没有匹配的成员' : 'No matching members'} />
+    {#if rows.length === 0}
+      <DataState state="empty" title={isZh ? '暂无成员' : 'No members yet'} />
+    {:else if filtered.length === 0}
+      <DataState state="filtered-empty" title={isZh ? '没有匹配的成员' : 'No matching members'} description={isZh ? '请清除或调整搜索条件。' : 'Clear or adjust the search.'}>
+        {#snippet action()}
+          <Button type="button" variant="outline" size="sm" onclick={clearSearch}>
+            <X size={16} aria-hidden="true" />{isZh ? '清除搜索' : 'Clear search'}
+          </Button>
+        {/snippet}
+      </DataState>
     {:else}
       <!-- svelte-ignore a11y_no_noninteractive_tabindex (横向滚动区域需支持键盘聚焦与滚动) -->
       <div class="member-directory-scroll w-full min-w-0 overflow-x-auto" role="region" aria-label={isZh ? '成员目录' : 'Member directory'} tabindex="0">

package/dist/components/account/SecurityLogPage.svelte

@@ -23,5 +23,12 @@
   <ContentPageHeader title={i18n.t('account.securityLog')} description={i18n.t('account.securityLogDescription')} {...definedOptions({ "actions": undefined })} />
   <div class="svadmin-u-60fbb7713999 svadmin-u-77c08e015d14"><Button variant="outline" size="sm" onclick={() => downloadRows('sample-security-events.json', filtered)}><Download class="svadmin-u-783b0d9d1e2c" />{i18n.t('common.export')}</Button></div>
   <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
-  <SecurityEventTable events={filtered} />
+  <SecurityEventTable
+    events={filtered}
+    {...definedOptions({
+      state: query.trim() && filtered.length === 0 ? 'filtered-empty' : undefined,
+      stateTitle: query.trim() && filtered.length === 0 ? (i18n.locale === 'zh-CN' ? '没有匹配的安全事件' : 'No matching security events') : undefined,
+      stateDescription: query.trim() && filtered.length === 0 ? (i18n.locale === 'zh-CN' ? '请清除或调整搜索条件。' : 'Clear or adjust the search.') : undefined,
+    })}
+  />
 </ContentPageShell>

package/dist/components/content/AuditTimeline.svelte

@@ -14,14 +14,24 @@
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { definedOptions } from '@svadmin/core/options';
   import { cn } from '../../utils.js';
   import StatusBadge from './StatusBadge.svelte';
   import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
 
   interface Props {
     items?: TimelineItem[];
     emptyTitle?: string;
     emptyDescription?: string;
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
+    action?: Snippet;
     class?: string;
   }
 
@@ -29,6 +39,13 @@
     items = [],
     emptyTitle = 'No timeline events',
     emptyDescription = 'Activity events and status transitions will appear here.',
+    state,
+    stateTitle,
+    stateDescription,
+    retry,
+    retryLabel,
+    loadingLabel,
+    action,
     class: className = '',
   }: Props = $props();
 
@@ -39,13 +56,24 @@
     info: 'svadmin-u-75b1bec3ea0e svadmin-u-05f954a846d6 svadmin-u-20aaf08a7ed1',
     neutral: 'svadmin-u-43ed7af3fc8a svadmin-u-18049387f0af svadmin-u-bfa603190748',
   };
+  const resolvedState = $derived(state ?? (items.length === 0 ? 'empty' : undefined));
 </script>
 
-<div class={cn('svadmin-u-3e7ce58d64fa', className)}>
-  {#if items.length === 0}
-    <DataState state="empty" title={emptyTitle} description={emptyDescription} />
+<div class={cn('svadmin-u-3e7ce58d64fa', className)} data-svadmin-audit-timeline data-svadmin-audit-state={resolvedState ?? 'ready'}>
+  {#if resolvedState}
+    <DataState
+      state={resolvedState}
+      {...definedOptions({
+        title: stateTitle ?? (resolvedState === 'empty' ? emptyTitle : undefined),
+        description: stateDescription ?? (resolvedState === 'empty' ? emptyDescription : undefined),
+        retry,
+        retryLabel,
+        loadingLabel,
+        action,
+      })}
+    />
   {:else}
-    <div class="svadmin-u-d89972fe17d6 svadmin-u-9079b62ef1cb svadmin-u-b3542e058833 svadmin-u-884dada40b17 svadmin-u-699f6fc4b3e0 svadmin-u-37f34e63818d svadmin-u-f76c7493f919 svadmin-u-8f848a57f066 svadmin-u-3242dfaf010c">
+    <div class="svadmin-u-d89972fe17d6 svadmin-u-9079b62ef1cb svadmin-u-b3542e058833 svadmin-u-884dada40b17 svadmin-u-699f6fc4b3e0 svadmin-u-37f34e63818d svadmin-u-f76c7493f919 svadmin-u-8f848a57f066 svadmin-u-3242dfaf010c" data-svadmin-audit-events>
       {#each items as item (item.id)}
         {@const statusTone = item.status ?? 'info'}
         <div class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-44ee8ba0a421 svadmin-u-fc7473ca09eb group">