@svadmin/ui 0.85.0 → 0.88.0

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

@@ -10,7 +10,6 @@ interface Props {
     columns?: 1 | 2 | 3 | 4;
     layout?: 'vertical' | 'horizontal';
     bordered?: boolean;
-    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const DescriptionList: import("svelte").Component<Props, {}, "">;

package/dist/components/content/FilterToolbar.svelte

@@ -16,7 +16,6 @@
     clearLabel?: string;
     advancedLabel?: string;
     showSearch?: boolean;
-    density?: 'compact' | 'comfortable';
     activeFilterCount?: number;
     advancedOpen?: boolean;
     filters?: Snippet;
@@ -31,7 +30,6 @@
     clearLabel = 'Clear search',
     advancedLabel = 'Filters',
     showSearch = true,
-    density = 'compact',
     activeFilterCount = 0,
     advancedOpen = $bindable(false),
     filters,
@@ -40,10 +38,14 @@
     class: className = '',
   }: Props = $props();
 
-  const isCompact = $derived(density === 'compact');
+  let searchInput = $state<HTMLInputElement | null>(null);
   const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
   const i18n = useTranslation();
   let mobile = $state(false);
+  function clearSearch(): void {
+    query = '';
+    searchInput?.focus();
+  }
   onMount(() => {
     const media = window.matchMedia('(max-width: 767px)');
     const update = () => { mobile = media.matches; };
@@ -53,13 +55,14 @@
   });
 </script>
 
-<div class={cn('svadmin-filter-toolbar', className)} data-density={density} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
+<div class={cn('svadmin-filter-toolbar', className)} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
   <div class="svadmin-filter-toolbar__row">
     {#if showSearch}
       <div class="svadmin-filter-toolbar__search">
         <Search class="svadmin-filter-toolbar__search-icon" aria-hidden="true" />
         <Input
           bind:value={query}
+          bind:ref={searchInput}
           {placeholder}
           class="svadmin-filter-toolbar__input"
           aria-label={placeholder}
@@ -71,7 +74,7 @@
             class="svadmin-filter-toolbar__clear"
             aria-label={clearLabel}
             title={clearLabel}
-            onclick={() => query = ''}
+            onclick={clearSearch}
           >
             <X class="svadmin-filter-toolbar__control-icon" aria-hidden="true" />
           </Button>
@@ -86,7 +89,7 @@
     {#if advanced || (mobile && filters)}
       <Button
         variant={advancedOpen ? 'secondary' : 'outline'}
-        size={isCompact ? 'sm' : 'default'}
+        size="default"
         class="svadmin-filter-toolbar__toggle"
         onclick={() => advancedOpen = !advancedOpen}
         aria-expanded={advancedOpen}

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

@@ -5,7 +5,6 @@ interface Props {
     clearLabel?: string;
     advancedLabel?: string;
     showSearch?: boolean;
-    density?: 'compact' | 'comfortable';
     activeFilterCount?: number;
     advancedOpen?: boolean;
     filters?: Snippet;

package/dist/components/content/NetworkTable.svelte

@@ -6,15 +6,15 @@
   import DataState from './DataState.svelte';
   import type { DataStateKind } from './DataState.svelte';
   import type { NetworkColumn } from './NetworkTable.types.js';
-  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; class?: string; density?: 'comfortable' | 'compact'; }
-  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '', density = 'comfortable' }: Props = $props();
+  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; class?: string; }
+  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '' }: Props = $props();
   const resolvedState = $derived(state ?? (rows.length === 0 ? 'empty' : undefined));
 </script>
 {#if resolvedState}
   <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-1384f66f41d0 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
-  <Table.Root {density} data-svadmin-datatable>
+  <Table.Root data-svadmin-datatable>
     <Table.Header data-svadmin-table-head><Table.Row>{#each columns as column (String(column.key))}<Table.Head>{column.label}</Table.Head>{/each}</Table.Row></Table.Header>
     <Table.Body>
       {#each rows as item, index (String('id' in item ? item.id : index))}

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

@@ -15,7 +15,6 @@ declare function $$render<T extends object>(): {
         retryLabel?: string;
         loadingLabel?: string;
         class?: string;
-        density?: "comfortable" | "compact";
     };
     exports: {};
     bindings: "";

package/dist/components/content/PageSection.svelte

@@ -22,7 +22,7 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     align-content: start;
-    gap: 1rem;
+    gap: var(--svadmin-space-4);
     min-width: 0;
   }
 </style>

package/dist/components/content/StatusTabs.svelte

@@ -12,7 +12,6 @@
   interface Props {
     items: StatusTabItem[];
     value?: string;
-    density?: 'compact' | 'comfortable';
     variant?: 'pills' | 'underline' | 'segmented';
     onchange?: (key: string) => void;
     class?: string;
@@ -21,7 +20,6 @@
   let {
     items = [],
     value = $bindable(items[0]?.key ?? ''),
-    density = 'compact',
     variant = 'pills',
     onchange,
     class: className = '',
@@ -61,8 +59,6 @@
     tabs[nextIndex]?.click();
   }
 
-  const isCompact = $derived(density === 'compact');
-
   const toneClasses: Record<NonNullable<StatusTabItem['tone']>, { activeBadge: string; inactiveBadge: string }> = {
     default: {
       activeBadge: 'svadmin-u-6a1572b6bf5a svadmin-u-20aaf08a7ed1',
@@ -95,7 +91,6 @@
   role="tablist"
   aria-orientation="horizontal"
   data-svadmin-status-tabs
-  data-density={density}
   data-variant={variant}
   class={cn(
     'svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-1384f66f41d0',
@@ -118,7 +113,7 @@
       onkeydown={handleKeydown}
       class={cn(
         'svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568 svadmin-u-e82ae8be04aa svadmin-u-2689f3958069 svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-df37b1fd9495 svadmin-u-793c80e97ffb svadmin-u-ddac70ae5d29 svadmin-u-49330148794a svadmin-u-b29d8adbad2e',
-        isCompact ? 'svadmin-u-359090c2d529 svadmin-u-0b91436debbd svadmin-u-660d2effb880' : 'svadmin-u-fc7473ca09eb svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b',
+        'svadmin-u-fc7473ca09eb svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b',
         variant === 'pills' && [
           'svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f',
           active
@@ -144,7 +139,7 @@
         <span
           class={cn(
             'svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-e83a7042bc91 svadmin-u-3032cae0badb svadmin-u-c2385a463da8',
-            isCompact ? 'svadmin-u-69aaf7265e58 svadmin-u-d8e0e382c67b svadmin-u-465609a240a8 svadmin-u-1dc571a3609f' : 'svadmin-u-f8516763aedd svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-359090c2d529',
+            'svadmin-u-f8516763aedd svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-359090c2d529',
             active ? badgeTone.activeBadge : badgeTone.inactiveBadge
           )}
         >

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

@@ -8,7 +8,6 @@ export interface StatusTabItem {
 interface Props {
     items: StatusTabItem[];
     value?: string;
-    density?: 'compact' | 'comfortable';
     variant?: 'pills' | 'underline' | 'segmented';
     onchange?: (key: string) => void;
     class?: string;

package/dist/components/content/WorkspaceLayout.svelte

@@ -10,6 +10,7 @@
     secondaryCollapsed?: boolean;
     secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
+    label?: string;
     class?: string;
   }
 
@@ -21,6 +22,7 @@
     secondaryCollapsed = false,
     secondaryCollapsedWidth = '3rem',
     mobileOrder = 'primary-first',
+    label,
     class: className = '',
   }: Props = $props();
 
@@ -28,7 +30,7 @@
   const resolvedSecondaryWidth = $derived(secondaryCollapsed ? secondaryCollapsedWidth : secondaryWidth);
 </script>
 
-<div class={styles.root + ' ' + className} data-svadmin-workspace-layout data-secondary-collapsed={secondaryCollapsed} style:--workspace-secondary-width={resolvedSecondaryWidth}>
+<div class={styles.root + ' ' + className} data-svadmin-workspace-layout data-workspace-order={mobileOrder} data-secondary-collapsed={secondaryCollapsed} {...(label ? { 'aria-label': label, role: 'region' } : {})} style:--workspace-secondary-width={resolvedSecondaryWidth}>
   {#if summary}<div class={styles.summary} data-svadmin-workspace-summary>{@render summary()}</div>{/if}
   <div class={styles.columns}>
     {#if mobileOrder === 'secondary-first' && secondary}<aside class={styles.secondary} data-svadmin-workspace-secondary>{@render secondary()}</aside>{/if}

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

@@ -7,6 +7,7 @@ interface Props {
     secondaryCollapsed?: boolean;
     secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
+    label?: string;
     class?: string;
 }
 declare const WorkspaceLayout: import("svelte").Component<Props, {}, "">;

package/dist/components/content/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as DashboardPage } from './DashboardPage.svelte';
 export { default as PageSection } from './PageSection.svelte';
+export { default as DataPanel } from './DataPanel.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';

package/dist/components/content/index.js

@@ -1,6 +1,7 @@
 export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as DashboardPage } from './DashboardPage.svelte';
 export { default as PageSection } from './PageSection.svelte';
+export { default as DataPanel } from './DataPanel.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';

package/dist/components/network/TeamCrewTablePage.svelte

@@ -5,6 +5,7 @@
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import FilterToolbar from '../content/FilterToolbar.svelte';
+  import DataState from '../content/DataState.svelte';
   import NetworkTable from '../content/NetworkTable.svelte';
   import type { NetworkColumn } from '../content/NetworkTable.types.js';
   import { Avatar } from '../ui/avatar/index.js';
@@ -38,5 +39,11 @@
   <ReferenceNotice />
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93"><ContentPageHeader title={i18n.t('network.teamCrew')} description={i18n.t('network.teamCrewDescription')} /><div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77a2a20e90d4"><Button variant="outline" size="sm" onclick={() => downloadRows('sample-team.json', filtered)}><Download class="svadmin-u-783b0d9d1e2c" />{i18n.t('common.export')}</Button><Button size="sm" onclick={() => context.navigate('/account/members/team-members')}><UserPlus class="svadmin-u-783b0d9d1e2c" />{i18n.t('account.inviteMember')}</Button></div></div>
   <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
-  <NetworkTable rows={filtered} {columns} {row} />
+  {#if rows.length === 0}
+    <DataState state="empty" title={i18n.t('account.member')} />
+  {:else if filtered.length === 0}
+    <DataState state="filtered-empty" title={i18n.t('account.member')} description={i18n.t('common.search')} />
+  {:else}
+    <NetworkTable rows={filtered} {columns} {row} />
+  {/if}
 </ContentPageShell>

package/dist/components/network/UserCardsNFTPage.svelte

@@ -28,8 +28,10 @@
   <ReferenceNotice />
   <ContentPageHeader title={i18n.t('network.userCards')} description={i18n.t('network.userCardsDescription')} />
   <FilterToolbar bind:query placeholder={i18n.t('common.search')} clearLabel={i18n.locale === 'zh-CN' ? '清除搜索' : 'Clear search'} />
-  {#if filtered.length === 0}
+  {#if users.length === 0}
     <DataState state="empty" title={i18n.t('network.userCards')} />
+  {:else if filtered.length === 0}
+    <DataState state="filtered-empty" title={i18n.t('network.userCards')} description={i18n.t('common.search')} />
   {:else}
     <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff svadmin-u-b86f7f946cd8">
       {#each filtered as user (user.id)}

package/dist/components/profile/ProjectsGrid.svelte

@@ -34,7 +34,7 @@
   {#if projects.length === 0}
     <DataState state="empty" title={i18n.t('publicProfile.noProjects')} />
   {:else if filtered.length === 0}
-    <DataState state="empty" title={i18n.t('publicProfile.noProjects')} description={i18n.t('publicProfile.searchProjects')} />
+    <DataState state="filtered-empty" title={i18n.t('publicProfile.noProjects')} description={i18n.t('publicProfile.searchProjects')} />
   {:else}
     <div class={'svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd ' + gridClass}>
       {#each filtered as project (project.id)}

package/dist/components/profile/TeamsShowcase.svelte

@@ -13,5 +13,5 @@
 <section class="svadmin-u-3e7ce58d64fa">
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"><div><h2 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('publicProfile.searchTeams')}</p></div></div>
   <FilterToolbar bind:query placeholder={i18n.t('publicProfile.searchTeams')} />
-  {#if filtered.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noTeams')} />{:else}<div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff svadmin-u-b86f7f946cd8">{#each filtered as team (team.id)}<TeamCard {team} />{/each}</div>{/if}
+  {#if teams.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noTeams')} />{:else if filtered.length === 0}<DataState state="filtered-empty" title={i18n.t('publicProfile.noTeams')} description={i18n.t('publicProfile.searchTeams')} />{:else}<div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff svadmin-u-b86f7f946cd8">{#each filtered as team (team.id)}<TeamCard {team} />{/each}</div>{/if}
 </section>

package/dist/components/ui/table/index.d.ts

@@ -6,5 +6,4 @@ import Footer from "./table-footer.svelte";
 import Head from "./table-head.svelte";
 import Header from "./table-header.svelte";
 import Row from "./table-row.svelte";
-export type { TableDensity } from "./table.svelte";
 export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

package/dist/components/ui/table/table.svelte

@@ -6,6 +6,7 @@
 	export type TableDensity = "compact" | "comfortable";
 
 	type Props = WithElementRef<HTMLTableAttributes, HTMLTableElement> & {
+		/** @deprecated Retained for compatibility; comfortable is the shared default. */
 		density?: TableDensity;
 	};
 

package/dist/components/ui/table/table.svelte.d.ts

@@ -2,6 +2,7 @@ import type { HTMLTableAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
 export type TableDensity = "compact" | "comfortable";
 type Props = WithElementRef<HTMLTableAttributes, HTMLTableElement> & {
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: TableDensity;
 };
 declare const Table: import("svelte").Component<Props, {}, "ref">;

package/dist/components.css

@@ -889,11 +889,6 @@ main {
     vertical-align: middle;
     white-space: nowrap;
   }
-  .svadmin-table-cell[data-density="compact"] {
-    height: 2rem;
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-  }
   .svadmin-table-cell[data-sticky="right"], .svadmin-table-cell[data-sticky="left"] {
     position: sticky;
     z-index: 10;
@@ -2041,11 +2036,6 @@ main {
     font-weight: 500;
     white-space: nowrap;
   }
-  .svadmin-table-head[data-density="compact"] {
-    height: 2rem;
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-  }
   .svadmin-table-head[data-sticky="right"], .svadmin-table-head[data-sticky="left"] {
     position: sticky;
     z-index: 20;
@@ -2218,7 +2208,7 @@ details[data-svadmin-filter][open] > :not(summary),
 
 /* --- Admin UI layout preset (clean-flat) --- */
 /* Keep this public class for layoutPreset API compatibility. The preset only
- * adjusts density and composition; color, focus, and elevation stay semantic. */
+ * adjusts composition; color, focus, and elevation stay semantic. */
 .layout-clean-flat {
   --radius: 0.5rem;
   --svadmin-content-width: 74rem;

package/dist/data-panel.css

@@ -0,0 +1,88 @@
+/* Data panel: the recurring "titled surface with a body" container.
+ *
+ * Hosts previously hand-rolled this block per page, which is how a project ends
+ * up with three panel paddings and two radii. Every length here is a token. */
+@layer components {
+  .svadmin-data-panel {
+    --svadmin-panel-padding: var(--svadmin-space-5);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    min-width: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--card);
+    color: var(--card-foreground);
+    overflow: hidden;
+  }
+  .svadmin-data-panel[data-padding="compact"] {
+    --svadmin-panel-padding: var(--svadmin-space-4);
+  }
+  .svadmin-data-panel[data-padding="none"] {
+    --svadmin-panel-padding: 0;
+  }
+
+  .svadmin-data-panel__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--svadmin-space-3);
+    min-width: 0;
+    padding: var(--svadmin-panel-padding);
+    padding-block-end: 0;
+  }
+  .svadmin-data-panel[data-padding="none"] .svadmin-data-panel__header {
+    padding: var(--svadmin-space-4) var(--svadmin-space-5);
+    border-bottom: 1px solid var(--border);
+  }
+  .svadmin-data-panel__heading {
+    display: grid;
+    gap: var(--svadmin-space-1);
+    min-width: 0;
+    flex: 1 1 0;
+  }
+  .svadmin-data-panel__title {
+    margin: 0;
+    color: var(--foreground);
+    font-size: var(--svadmin-text-section);
+    font-weight: 600;
+    line-height: var(--svadmin-leading-tight);
+    overflow-wrap: anywhere;
+  }
+  .svadmin-data-panel__description {
+    max-width: var(--svadmin-measure);
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: var(--svadmin-text-body);
+    line-height: var(--svadmin-leading-body);
+    overflow-wrap: anywhere;
+  }
+  .svadmin-data-panel__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--svadmin-space-2);
+    flex: 0 0 auto;
+  }
+  .svadmin-data-panel__body {
+    display: grid;
+    gap: var(--svadmin-space-4);
+    min-width: 0;
+    padding: var(--svadmin-panel-padding);
+  }
+  .svadmin-data-panel[data-padding="none"] .svadmin-data-panel__body {
+    gap: 0;
+  }
+  .svadmin-data-panel__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--svadmin-space-2);
+    padding: var(--svadmin-space-3) var(--svadmin-space-5);
+    border-top: 1px solid var(--border);
+    color: var(--muted-foreground);
+    font-size: var(--svadmin-text-caption);
+  }
+}

package/dist/design-contract.d.ts

@@ -8,6 +8,17 @@ export declare const surfaceDesignContract: {
     readonly table: {
         readonly density: readonly ["comfortable", "compact"];
     };
+    readonly pageFamilies: readonly ["list", "form", "detail", "workspace", "dashboard"];
+    readonly pageStates: readonly ["ready", "loading", "empty", "filtered-empty", "error", "forbidden"];
+    readonly composition: {
+        readonly maxPrimaryActions: 1;
+        readonly secondaryActions: "overflow";
+        readonly destructiveActions: "confirm";
+        readonly modalNesting: 0;
+    };
 };
 export type SurfaceTone = typeof surfaceDesignContract.metric.tone[number];
+/** @deprecated Kept for source compatibility; product pages use one baseline rhythm. */
 export type SurfaceDensity = typeof surfaceDesignContract.metric.density[number];
+export type AdminPageFamily = typeof surfaceDesignContract.pageFamilies[number];
+export type AdminPageState = typeof surfaceDesignContract.pageStates[number];

package/dist/design-contract.js

@@ -8,4 +8,12 @@ export const surfaceDesignContract = {
     table: {
         density: ['comfortable', 'compact'],
     },
+    pageFamilies: ['list', 'form', 'detail', 'workspace', 'dashboard'],
+    pageStates: ['ready', 'loading', 'empty', 'filtered-empty', 'error', 'forbidden'],
+    composition: {
+        maxPrimaryActions: 1,
+        secondaryActions: 'overflow',
+        destructiveActions: 'confirm',
+        modalNesting: 0,
+    },
 };

package/dist/design-system.d.ts

@@ -1,11 +1,12 @@
-import type { SurfaceTone, SurfaceDensity } from "./design-contract.js";
+import type { SurfaceDensity, SurfaceTone } from "./design-contract.js";
 export declare function metricSurfaceClasses(tone?: SurfaceTone): {
     state: string;
     description: string;
     root: string;
     card: string;
 };
-export declare function tableSurfaceClasses(density?: SurfaceDensity): {
+/** @deprecated The argument is accepted for compatibility and uses the shared baseline. */
+export declare function tableSurfaceClasses(_density?: SurfaceDensity): {
     state: string;
     content: string;
     head: string;

package/dist/design-system.js

@@ -2,6 +2,7 @@ import { surfaceMetricRecipe as surfaceMetric, surfaceTableRecipe as surfaceTabl
 export function metricSurfaceClasses(tone = "neutral") {
     return surfaceMetric({ tone });
 }
-export function tableSurfaceClasses(density = "comfortable") {
-    return surfaceTable({ density });
+/** @deprecated The argument is accepted for compatibility and uses the shared baseline. */
+export function tableSurfaceClasses(_density = "comfortable") {
+    return surfaceTable();
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { surfaceDesignContract } from "./design-contract.js";
-export type { SurfaceTone, SurfaceDensity } from "./design-contract.js";
+export type { AdminPageFamily, AdminPageState, SurfaceDensity, SurfaceTone } from "./design-contract.js";
 export { designSystemComponents, type DesignComponentContract, type DesignComponentId, type DesignComponentState, } from "./design-system-components.js";
 export { metricSurfaceClasses, tableSurfaceClasses } from "./design-system.js";
 export { default as AdminApp } from './components/AdminApp.svelte';
@@ -38,7 +38,8 @@ export { default as MetricStrip } from './components/MetricStrip.svelte';
 export type { MetricStripItem, MetricTone } from './components/MetricStrip.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as PagePattern } from './components/PagePattern.svelte';
-export type { PagePatternKind } from './components/PagePattern.svelte';
+export type { PagePatternKind, PagePatternState } from './components/PagePattern.svelte';
+export { default as AppShellPage } from './components/AppShellPage.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
 export { default as ResourceAccessGuard } from './components/ResourceAccessGuard.svelte';
@@ -278,6 +279,7 @@ export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.sve
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
 export { default as DashboardPage } from './components/content/DashboardPage.svelte';
 export { default as PageSection } from './components/content/PageSection.svelte';
+export { default as DataPanel } from './components/content/DataPanel.svelte';
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as ConfigurationPage } from './components/ConfigurationPage.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';

package/dist/index.js

@@ -31,6 +31,7 @@ export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as MetricStrip } from './components/MetricStrip.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as PagePattern } from './components/PagePattern.svelte';
+export { default as AppShellPage } from './components/AppShellPage.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
 export { default as ResourceAccessGuard } from './components/ResourceAccessGuard.svelte';
@@ -245,6 +246,7 @@ export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.sve
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
 export { default as DashboardPage } from './components/content/DashboardPage.svelte';
 export { default as PageSection } from './components/content/PageSection.svelte';
+export { default as DataPanel } from './components/content/DataPanel.svelte';
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as ConfigurationPage } from './components/ConfigurationPage.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';