@svadmin/ui 0.85.0 → 0.88.0

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();
 
@@ -20,7 +21,6 @@
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     id: string | number;
-    density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';
     columns?: 1 | 2 | 3 | 4;
     bordered?: boolean;
@@ -36,7 +36,6 @@
     resourceName,
     rendering,
     id,
-    density = 'comfortable',
     layout = 'list',
     columns = 2,
     bordered = false,
@@ -58,7 +57,6 @@
     }
     navigation.list(resourceName);
   }
-  const isCompact = $derived(density === 'compact');
 
   const detail = useRecordDetail(() => ({ resourceName, id, rendering }));
   const activeRendering = $derived(detail.rendering);
@@ -76,13 +74,13 @@
   });
 </script>
 
-<div data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'show' : undefined} class="{isCompact ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
-  <PageHeader
-    title="{resource.label} {i18n.t('common.detail')} #{id}"
-    {density}
-    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 />
@@ -102,13 +100,15 @@
         {@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">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 {isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b' : 'svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-b7daff9b9ddd'} {i % 2 === 1 ? 'svadmin-u-967d113a1451' : ''}">
+          <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-b7daff9b9ddd {i % 2 === 1 ? 'svadmin-u-967d113a1451' : ''}">
             <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-b7ce0d2f6c04 svadmin-u-5a14cc9f9ed4" />
             <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-1d9f2d98d149 svadmin-u-d2ffb24f3e1d svadmin-u-b6b02c0ebef6 svadmin-u-dfe9bd9e7001 svadmin-u-77533d414653" />
           </div>
@@ -116,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'}
@@ -153,9 +149,9 @@
         <Card.Content class="svadmin-u-8a539c7fe216 svadmin-u-fa6acbf81d74 svadmin-u-3533cbce9e93">
           {#each showFields as field, i (i)}
             {@const value = record[field.key]}
-            <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 {isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-cc06a6575385 svadmin-u-7209fd2a90e7' : 'svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-4701b613ff95'} {i % 2 === 1 ? 'svadmin-u-8a25a995eb8e' : ''}">
-              <div class="svadmin-u-b03f3c253900 {isCompact ? 'svadmin-u-359090c2d529' : 'svadmin-u-359090c2d529 svadmin-u-e2327d142859'} svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-65281709dacf svadmin-u-84bdd56b0e81">{field.label}</div>
-              <div class="svadmin-u-6b3526212209 {isCompact ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-fc7473ca09eb'} svadmin-u-d4108abe6359">
+            <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-4701b613ff95 {i % 2 === 1 ? 'svadmin-u-8a25a995eb8e' : ''}">
+              <div class="svadmin-u-b03f3c253900 svadmin-u-359090c2d529 svadmin-u-e2327d142859 svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-65281709dacf svadmin-u-84bdd56b0e81">{field.label}</div>
+              <div class="svadmin-u-6b3526212209 svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">
                 <FieldDisplay
                   type={field.type}
                   {value}
@@ -169,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/ShowPage.svelte.d.ts

@@ -4,7 +4,6 @@ interface Props {
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     id: string | number;
-    density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';
     columns?: 1 | 2 | 3 | 4;
     bordered?: boolean;

package/dist/components/SvarAutoTable.svelte

@@ -26,8 +26,9 @@
       {#snippet gridBody(state)}
         <details><summary>{state.locale.startsWith('zh') ? '表格选择与列顺序' : 'Selection and column order'}</summary>{@render state.controls()}</details>
         <SvarDataGrid {Grid} {Theme} items={state.records} columns={state.columns} primaryKey={state.primaryKey}
+          density={state.density}
           {height} freezeLeft={Math.min(freezeLeft, state.columns.length - Math.min(freezeRight, state.columns.length - 1))}
-          freezeRight={Math.min(freezeRight, state.columns.length - 1)} density={state.density}
+          freezeRight={Math.min(freezeRight, state.columns.length - 1)}
           queryMode="server" sorters={state.sorters} onSortChange={state.onSortChange}
           disabled={state.disabled} scopeKey={state.scopeKey} locale={state.locale} label={state.label}>
           {#snippet cellContent({ id, field })}{@render state.cell({ id, field })}{/snippet}

package/dist/components/SvarDataGrid.svelte

@@ -18,7 +18,10 @@
     primaryKey?: string;
     childrenKey?: string;
     height?: number;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
+    rowHeight?: number;
+    headerHeight?: number;
     freezeLeft?: number;
     /** 独立右侧面板，不使用上游 split.right。 */
     freezeRight?: number;
@@ -52,14 +55,15 @@
     disabledLabel?: string;
     fallbackLabel?: string;
   }
-  let { Grid, Theme, items = [], columns, primaryKey = 'id', childrenKey, height = 420, density = 'comfortable', freezeLeft = 0, freezeRight = 0, queryMode = 'local',
+  let { Grid, Theme, items = [], columns, primaryKey = 'id', childrenKey, height = 420, density = 'comfortable', rowHeight: rowHeightProp, headerHeight: headerHeightProp, freezeLeft = 0, freezeRight = 0, queryMode = 'local',
     sorters = [], filters = [], onSortChange, onFilterChange, onCellEdit, selectable = false, selectedIds = [], onSelectionChange, onRecordsChange, cellContent,
     windowSource, loadChildren, hasChildrenKey = 'hasChildren', onLoadMore, hasMore = false, scopeKey = 0,
     loading = false, error, disabled = false, locale = 'en-US', label = 'Data grid', emptyLabel = 'No records', loadingLabel = 'Loading',
     disabledLabel = 'Grid is disabled', fallbackLabel = 'Static preview (up to 20 rows)',
   }: SvarDataGridProps = $props();
   const treeKey = $derived(loadChildren ? childrenKey ?? 'children' : childrenKey);
-  const rowHeight = $derived(density === 'compact' ? 32 : 44);
+  const rowHeight = $derived(rowHeightProp ?? (density === 'compact' ? 32 : 44));
+  const headerHeight = $derived(headerHeightProp ?? (density === 'compact' ? 32 : 36));
   // 普通追加不重建引擎，否则无限加载会把滚动位置重置。懒树根替换必须清理分支缓存。
   const dataOwner = $derived({ scopeKey, items: loadChildren ? items : undefined, source: windowSource,
     loadChildren, onLoadMore, primaryKey, treeKey, hasChildrenKey, freezeRight, Grid });
@@ -304,12 +308,12 @@
         {#key dataOwner}<div class="grid-panes" inert={disabled}>
           <div class="grid-viewport center-pane" data-svar-pane="center" style:height="{height}px" role="region" aria-label="Scrollable columns" onkeydowncapture={event => navigatePane(event, 0)}>
             <Grid columns={model.center} data={activeError || isLoading ? [] : records.rows} tree={treeKey !== undefined}
-              split={{ left: freezeLeft }} sizes={{ rowHeight, headerHeight: 36, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
+              split={{ left: freezeLeft }} sizes={{ rowHeight, headerHeight, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
               reorder={false} draggableRows={false} undo={false} {...queryProps} {...dynamicProps} init={api => init(api, 0)} />
           </div>
           {#if freezeRight > 0}<div class="grid-viewport right-pane" data-svar-pane="right" style:height="{height}px" style:width="{model.rightWidth}px" role="region" aria-label="Frozen right columns" onkeydowncapture={event => navigatePane(event, 1)}>
             <Grid columns={model.right} data={activeError || isLoading ? [] : rightRows} tree={treeKey !== undefined}
-              split={{ left: 0 }} sizes={{ rowHeight, headerHeight: 36, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
+              split={{ left: 0 }} sizes={{ rowHeight, headerHeight, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
               reorder={false} draggableRows={false} undo={false} {...queryProps} {...dynamicProps} init={api => init(api, 1)} />
           </div>{/if}
         </div>{/key}

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

@@ -16,7 +16,10 @@ export interface SvarDataGridProps {
     primaryKey?: string;
     childrenKey?: string;
     height?: number;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
+    rowHeight?: number;
+    headerHeight?: number;
     freezeLeft?: number;
     /** 独立右侧面板，不使用上游 split.right。 */
     freezeRight?: number;

package/dist/components/SvarResourceTable.svelte

@@ -20,7 +20,6 @@
     /** 高级读取仍使用资源契约、Provider 和核心查询缓存。 */
     loadingMode?: 'page' | 'window' | 'infinite';
     lazyTree?: SvarLazyTree;
-    density?: 'compact' | 'comfortable';
     childrenKey?: string;
     dataScopeKey?: string | number;
     disabled?: boolean;

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

@@ -16,7 +16,6 @@ export interface SvarResourceTableProps {
     /** 高级读取仍使用资源契约、Provider 和核心查询缓存。 */
     loadingMode?: 'page' | 'window' | 'infinite';
     lazyTree?: SvarLazyTree;
-    density?: 'compact' | 'comfortable';
     childrenKey?: string;
     dataScopeKey?: string | number;
     disabled?: boolean;

package/dist/components/SvarResourceTableView.svelte

@@ -15,7 +15,7 @@
   import type { SvarResourceTableProps } from './SvarResourceTable.svelte';
 
   let { Grid, Theme, resourceName, pageSize = 25, filters = [], initialSorters = [], height = 420,
-    freezeLeft = 0, freezeRight = 0, loadingMode = 'page', lazyTree, density = 'comfortable', childrenKey: providedChildrenKey, dataScopeKey = 0, disabled = false,
+    freezeLeft = 0, freezeRight = 0, loadingMode = 'page', lazyTree, childrenKey: providedChildrenKey, dataScopeKey = 0, disabled = false,
     editable = false, selectable = false, batchUpdate = false, batchDelete = false, exportable = false,
     savedViews = false, preferenceScopeKey, migrateAutoTableViews = false, deleteVariables, formats = {},
   }: SvarResourceTableProps = $props();
@@ -333,7 +333,7 @@
     </div>{/if}
     {#if feedback}<p role="alert">{feedback}</p>{/if}
     {#if result}<p role="status">{zh ? '成功 / 失败 / 未执行' : 'Succeeded / failed / skipped'}: {result.succeeded.length} / {result.failed.length} / {result.skipped.length}</p>{/if}
-    <SvarDataGrid {Grid} {Theme} items={gridItems} {columns} {primaryKey} {height} freezeRight={Math.min(freezeRight, Math.max(0, columns.length - 1))} freezeLeft={Math.min(freezeLeft, columns.length - Math.min(freezeRight, Math.max(0, columns.length - 1)))} {density}
+    <SvarDataGrid {Grid} {Theme} items={gridItems} {columns} {primaryKey} {height} freezeRight={Math.min(freezeRight, Math.max(0, columns.length - 1))} freezeLeft={Math.min(freezeLeft, columns.length - Math.min(freezeRight, Math.max(0, columns.length - 1)))}
       queryMode="server" {sorters} filters={textFilters} onSortChange={changeSort} onFilterChange={changeFilter}
       selectable={selectable || batchUpdate || batchDelete} {selectedIds} onSelectionChange={selection} {...advanced ? { onRecordsChange: loaded } : {}} scopeKey={gridScope}
       {...windowSource ? { windowSource } : {}}

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/auto-table-grid.d.ts

@@ -11,6 +11,7 @@ export interface AutoTableGridState {
     }[];
     readonly primaryKey: string;
     readonly sorters: readonly Sort[];
+    /** @deprecated Retained for custom grid renderers during the baseline transition. */
     readonly density: 'compact' | 'comfortable';
     readonly locale: string;
     readonly label: string;

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">

package/dist/components/content/AuditTimeline.svelte.d.ts

@@ -9,10 +9,19 @@ export interface TimelineItem {
     tag?: string;
     meta?: Record<string, unknown>;
 }
+import type { Snippet } from '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;
 }
 declare const AuditTimeline: import("svelte").Component<Props, {}, "">;

package/dist/components/content/ContentPageHeader.svelte

@@ -8,6 +8,7 @@
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     headingLevel?: 'h1' | 'h2';
     class?: string;
@@ -22,7 +23,7 @@
     headingLevel = 'h1',
     class: className = '',
   }: Props = $props();
-  const styles = $derived(contentHeader({ density }));
+  const styles = $derived(contentHeader());
 </script>
 
 <header

package/dist/components/content/ContentPageHeader.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     headingLevel?: 'h1' | 'h2';
     class?: string;

package/dist/components/content/ContentPageShell.svelte

@@ -12,6 +12,7 @@
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     class?: string;
   }
@@ -32,7 +33,6 @@
   const resolvedWidth = $derived(width === 'narrow' || width === 'wide' ? width : 'default');
   const styles = $derived(contentPage({
     width: resolvedWidth,
-    density,
   }));
 </script>
 

package/dist/components/content/ContentPageShell.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     class?: string;
 }

package/dist/components/content/DataPanel.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    /** Panel heading. Omit it for an untitled surface. */
+    title?: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** `none` removes body padding so a table or list can meet the panel edge. */
+    padding?: 'default' | 'compact' | 'none';
+    headingLevel?: 'h2' | 'h3';
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    children,
+    footer,
+    padding = 'default',
+    headingLevel = 'h2',
+    class: className = '',
+  }: Props = $props();
+
+  const uid = $props.id();
+  const headingId = `svadmin-data-panel-${uid}`;
+</script>
+
+<section
+  class={cn('svadmin-data-panel', className)}
+  data-svadmin-data-panel
+  data-padding={padding}
+  aria-labelledby={title ? headingId : undefined}
+>
+  {#if title}
+    <header class="svadmin-data-panel__header" data-slot="data-panel-header">
+      <div class="svadmin-data-panel__heading">
+        <svelte:element this={headingLevel} id={headingId} class="svadmin-data-panel__title">
+          {title}
+        </svelte:element>
+        {#if description}
+          <p class="svadmin-data-panel__description">{description}</p>
+        {/if}
+      </div>
+      {#if actions}
+        <div class="svadmin-data-panel__actions">{@render actions()}</div>
+      {/if}
+    </header>
+  {/if}
+  <div class="svadmin-data-panel__body" data-slot="data-panel-body">{@render children()}</div>
+  {#if footer}
+    <footer class="svadmin-data-panel__footer" data-slot="data-panel-footer">{@render footer()}</footer>
+  {/if}
+</section>

package/dist/components/content/DataPanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Panel heading. Omit it for an untitled surface. */
+    title?: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** `none` removes body padding so a table or list can meet the panel edge. */
+    padding?: 'default' | 'compact' | 'none';
+    headingLevel?: 'h2' | 'h3';
+    class?: string;
+}
+declare const DataPanel: import("svelte").Component<Props, {}, "">;
+type DataPanel = ReturnType<typeof DataPanel>;
+export default DataPanel;

package/dist/components/content/DataState.svelte

@@ -5,7 +5,7 @@
   import { Button } from '../ui/button/index.js';
   import * as Alert from '../ui/alert/index.js';
   import { Skeleton } from '../ui/skeleton/index.js';
-  export type DataStateKind = 'loading' | 'empty' | 'error' | 'forbidden';
+  export type DataStateKind = 'loading' | 'empty' | 'filtered-empty' | 'error' | 'forbidden';
   interface Props {
     state: DataStateKind;
     title?: string;
@@ -31,6 +31,7 @@
   const defaults = $derived({
     loading: [i18n.t('common.loading'), i18n.t('common.loading')],
     empty: [i18n.t('empty.title'), i18n.t('empty.description')],
+    'filtered-empty': [isZh ? '没有匹配结果' : 'No matching results', isZh ? '请调整或清除筛选条件。' : 'Adjust or clear your filters.'],
     error: [i18n.t('common.error'), i18n.t('common.retry')],
     forbidden: [isZh ? '无权访问' : 'Access restricted', isZh ? '你没有查看此内容的权限。' : 'You do not have permission to view this content.'],
   } as const);
@@ -41,11 +42,11 @@
 </script>
 
 {#if state === 'loading'}
-  <div class={'svadmin-u-6ed543e2fbbb svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-c07e54fd1439 ' + className} role="status" aria-live="polite" aria-label={resolvedLoadingLabel} aria-busy="true">
+  <div data-svadmin-data-state={state} class={'svadmin-u-6ed543e2fbbb svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-c07e54fd1439 ' + className} role="status" aria-live="polite" aria-label={resolvedLoadingLabel} aria-busy="true">
     <Skeleton class="svadmin-u-cd0d9c512cdc svadmin-u-84789e8a20cd" /><Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-6da6a3c3f741 svadmin-u-9794ab45094d" /><Skeleton class="svadmin-u-0a769880db93 svadmin-u-6da6a3c3f741" />
   </div>
 {:else if state === 'error' || state === 'forbidden'}
-  <Alert.Root variant={state === 'error' ? 'destructive' : 'warning'} class={className}>
+  <Alert.Root data-svadmin-data-state={state} variant={state === 'error' ? 'destructive' : 'warning'} class={className}>
     {#if state === 'error'}<AlertTriangle class="svadmin-u-f7b5fa971871" aria-hidden="true" />{:else}<LockKeyhole class="svadmin-u-f7b5fa971871" aria-hidden="true" />{/if}
     <Alert.Title>{resolvedTitle}</Alert.Title>
     <Alert.Description>{resolvedDescription}</Alert.Description>
@@ -53,7 +54,7 @@
     {#if action}<div class="svadmin-u-eccd13ef4f2f">{@render action()}</div>{/if}
   </Alert.Root>
 {:else}
-  <div class={'empty-state ' + className} role="status" aria-live="polite">
+  <div data-svadmin-data-state={state} class={'empty-state ' + className} role="status" aria-live="polite">
     <span class="empty-state__icon" aria-hidden="true">
       <Inbox size={16} />
     </span>

package/dist/components/content/DataState.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type DataStateKind = 'loading' | 'empty' | 'error' | 'forbidden';
+export type DataStateKind = 'loading' | 'empty' | 'filtered-empty' | 'error' | 'forbidden';
 interface Props {
     state: DataStateKind;
     title?: string;

package/dist/components/content/DescriptionList.svelte

@@ -14,7 +14,6 @@
     columns?: 1 | 2 | 3 | 4;
     layout?: 'vertical' | 'horizontal';
     bordered?: boolean;
-    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -23,11 +22,9 @@
     columns = 1,
     layout = 'vertical',
     bordered = false,
-    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 
-  const isCompact = $derived(density === 'compact');
   const isHorizontal = $derived(layout === 'horizontal');
 
   function spanClass(span: number | undefined): string {
@@ -65,7 +62,7 @@
           <dt
             class={cn(
               'svadmin-u-2859c861d7de svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-012fbd121f37 svadmin-u-65fdbade2025 svadmin-u-a968a4123359 svadmin-u-27165ed73e86 svadmin-u-cdf6e054e5e0',
-              isCompact ? 'svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529' : 'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
+              'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
               isHorizontal ? 'svadmin-u-b03f3c253900' : '',
             )}
           >
@@ -74,7 +71,7 @@
           <dd
             class={cn(
               'svadmin-u-170cee3ff4e4 svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-cd0ad9a56558 svadmin-u-36e579c0b41c svadmin-u-7e0b7cdf1a94',
-              isCompact ? 'svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529' : 'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
+              'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
             )}
           >
             {#if item.href}
@@ -95,7 +92,7 @@
     class={cn(
       'svadmin-u-f3c543ad5fe9',
       columnClass,
-      isCompact ? 'svadmin-u-513d5c30bf66 svadmin-u-bcf14a5a5472' : 'svadmin-u-706c16d853e6 svadmin-u-375f36f67650',
+      'svadmin-u-706c16d853e6 svadmin-u-375f36f67650',
       className,
     )}
   >
@@ -110,7 +107,7 @@
         <dt
           class={cn(
             'svadmin-u-2689f3958069 svadmin-u-bfa603190748',
-            isCompact ? 'svadmin-u-359090c2d529' : 'svadmin-u-359090c2d529',
+            'svadmin-u-359090c2d529',
             isHorizontal ? 'svadmin-u-012fbd121f37 svadmin-u-2e7a6d18a20d' : '',
           )}
         >
@@ -119,7 +116,7 @@
         <dd
           class={cn(
             'svadmin-u-170cee3ff4e4 svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c',
-            isHorizontal ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : isCompact ? 'svadmin-u-15e1b1f444fe svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb',
+            isHorizontal ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb',
           )}
         >
           {#if item.href}