@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/buttons/ImportButton.svelte

@@ -1,76 +1,118 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useImport, useCan, useTranslation } from '@svadmin/core';
+  import { captureAdminContext, captureAuthSession, useCan, useTranslation, useImport, useResourceContract,
+    type ImportResult, type ContractSchemas } from '@svadmin/core';
+  import { definedOptions, definedReactiveOptions } from '@svadmin/core/options';
   import { Button } from '../ui/button/index.js';
   import { Upload } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
 
   const i18n = useTranslation();
 
-  let {
-    resource,
-    label,
-    children,
-    hideText = false,
-    onFinish,
-    accessControl = { enabled: true, hideIfUnauthorized: true },
-    class: className = '',
-  } = $props<{
+  interface Props {
     resource: string;
     label?: string;
     children?: Snippet;
     hideText?: boolean;
-    onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
+    onFinish?: (result: ImportResult<ContractSchemas>) => void | Promise<void>;
+    mapData?: (row: Record<string, unknown>) => unknown;
     accessControl?: ButtonAccessControl;
     class?: string;
-  }>();
+  }
+  let {
+    resource, label, children, hideText = false, onFinish, mapData,
+    accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '',
+  }: Props = $props();
 
   let fileInput: HTMLInputElement | undefined = $state();
 
-  const importHook = useImport({
-    get resource() { return resource; },
-    onFinish: (result) => onFinish?.(result),
-  });
-
-  const can = useCan(() => ({
+  const context = captureAdminContext();
+  const binding = useResourceContract(() => resource);
+  const can = useCan(() => definedOptions({
     resource,
     action: 'import',
     params: accessControl?.params,
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true },
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const session = $derived(captureAuthSession(context.authProvider));
+  const policyAllowed = $derived(accessControl.enabled === false || can.allowed === true);
+  const allowed = $derived(policyAllowed && session.available);
+  const canCreate = $derived(context.getResource(resource).canCreate !== false);
+  const hidden = $derived(!canCreate ||
+    (accessControl.hideIfUnauthorized && !allowed));
+  const importHook = useImport(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+    get enabled() { return policyAllowed && canCreate; },
+    get onFinish() { return onFinish; },
+    get mapData() { return mapData; },
+  }));
+  const scope = $derived({
+    contract: binding.resource, provider: context.providers?.[binding.dataProviderName],
+    tenant: context.tenantCacheKey?.__svadminTenant, meta: binding.meta, allowed, hidden,
+    auth: context.authProvider, router: context.routerProvider, session,
+  });
+  let mounted = true;
+  let picker: { scope: typeof scope; input: HTMLInputElement } | undefined;
+  let selection: object | undefined;
+  const currentScope = (origin: typeof scope) => mounted && scope === origin && origin.session.isCurrent();
+  $effect.pre(() => { void scope; picker = undefined; selection = undefined; });
+  $effect(() => () => { mounted = false; picker = undefined; selection = undefined; });
 
-  function triggerImport() {
-    fileInput?.click();
-  }
+  const triggerImport = $derived.by(() => {
+    const origin = scope;
+    return () => {
+      if (!currentScope(origin) || !allowed || hidden || importHook.isLoading || !fileInput) return;
+      picker = { scope: origin, input: fileInput };
+      fileInput.click();
+    };
+  });
 
-  function handleFileChange(e: Event) {
-    const input = e.target as HTMLInputElement;
-    const file = input.files?.[0];
-    if (file) {
-      importHook.handleChange({ file });
-      input.value = ''; // reset for re-import
-    }
-  }
+  const handleFileChange = $derived.by(() => {
+    const origin = scope;
+    return async (event: Event) => {
+      const input = event.currentTarget;
+      if (!(input instanceof HTMLInputElement) || !currentScope(origin) || picker?.scope !== origin ||
+        picker.input !== input || !allowed || hidden || importHook.isLoading) return;
+      const token = {};
+      selection = token;
+      picker = undefined;
+      try {
+        const file = input.files?.[0];
+        if (file) await importHook.handleChange({ file });
+      } catch {
+        // The hook exposes a sanitized error; event handlers must not reject globally.
+      } finally {
+        if (currentScope(origin) && selection === token && fileInput === input) {
+          input.value = '';
+          selection = undefined;
+        }
+      }
+    };
+  });
 
   const displayText = $derived(label ?? i18n.t('common.import'));
 </script>
 
 {#if !hidden}
-  <input
-    type="file"
-    accept={importHook.inputProps.accept}
-    class="svadmin-u-99d72c7fc3e2"
-    bind:this={fileInput}
-    onchange={handleFileChange}
-  />
+  {#key scope}
+    <input
+      type="file"
+      accept={importHook.inputProps.accept}
+      class="svadmin-u-99d72c7fc3e2"
+      bind:this={fileInput}
+      onchange={handleFileChange}
+    />
+  {/key}
   <Button
+    type="button"
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
     aria-label={hideText ? displayText : undefined}
-    disabled={importHook.isLoading || !can.allowed}
+    disabled={importHook.isLoading || !allowed}
+    aria-busy={importHook.isLoading}
     onclick={triggerImport}
   >
     <Upload class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
@@ -84,4 +126,7 @@
       </span>
     {/if}
   </Button>
+  {#if importHook.error}
+    <p role="alert">{i18n.t('common.operationFailed')}</p>
+  {/if}
 {/if}

package/dist/components/buttons/ImportButton.svelte.d.ts

@@ -1,20 +1,16 @@
 import type { Snippet } from 'svelte';
+import { type ImportResult, type ContractSchemas } from '@svadmin/core';
 import type { ButtonAccessControl } from './access-control';
-type $$ComponentProps = {
+interface Props {
     resource: string;
     label?: string;
     children?: Snippet;
     hideText?: boolean;
-    onFinish?: (result: {
-        succeeded: unknown[];
-        errored: {
-            request: unknown;
-            error: unknown;
-        }[];
-    }) => void;
+    onFinish?: (result: ImportResult<ContractSchemas>) => void | Promise<void>;
+    mapData?: (row: Record<string, unknown>) => unknown;
     accessControl?: ButtonAccessControl;
     class?: string;
-};
-declare const ImportButton: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const ImportButton: import("svelte").Component<Props, {}, "">;
 type ImportButton = ReturnType<typeof ImportButton>;
 export default ImportButton;

package/dist/components/buttons/RefreshButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useInvalidate, useTranslation } from '@svadmin/core';
+  import { useTranslation, useInvalidate, useResourceContract, captureAdminContext } from '@svadmin/core';
+  import { definedReactiveOptions } from '@svadmin/core/options';
   import { Button } from '../ui/button/index.js';
   import { RefreshCw } from '@lucide/svelte';
 
@@ -20,19 +21,53 @@
     class?: string;
   }>();
 
-  const invalidate = useInvalidate();
+  const binding = useResourceContract(() => resource);
+  const context = captureAdminContext();
+  const invalidate = useInvalidate(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+  }));
+  const scope = $derived({
+    contract: binding.resource,
+    provider: context.providers?.[binding.dataProviderName],
+    tenant: context.tenantCacheKey?.__svadminTenant,
+    meta: binding.meta,
+  });
   let spinning = $state(false);
-  let spinTimer: ReturnType<typeof setTimeout> | undefined;
+  let failed = $state(false);
+  let active: object | undefined;
+  let previousScope: typeof scope | undefined;
 
   $effect(() => {
-    return () => { if (spinTimer) clearTimeout(spinTimer); };
+    if (previousScope !== scope) {
+      active = undefined;
+      spinning = false;
+      failed = false;
+      previousScope = scope;
+    }
+  });
+  $effect(() => () => {
+    active = undefined;
   });
 
-  function refresh() {
+  async function refresh() {
+    if (spinning) return;
+    const token = {};
+    const capturedScope = scope;
+    previousScope = capturedScope;
+    active = token;
     spinning = true;
-    invalidate({ resource, invalidates: ['list', 'many'] });
-    if (spinTimer) clearTimeout(spinTimer);
-    spinTimer = setTimeout(() => { spinning = false; }, 600);
+    failed = false;
+    try {
+      await invalidate({ invalidates: ['list', 'many'] });
+    } catch {
+      if (active === token && scope === capturedScope) failed = true;
+    } finally {
+      if (active === token && scope === capturedScope) {
+        active = undefined;
+        spinning = false;
+      }
+    }
   }
 
   const displayText = $derived(label ?? i18n.t('common.refresh'));
@@ -43,6 +78,8 @@
   size={hideText ? 'icon' : 'sm'}
   class={className}
   aria-label={hideText ? displayText : undefined}
+  aria-busy={spinning}
+  disabled={spinning}
   onclick={refresh}
 >
   <RefreshCw class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 {spinning ? 'svadmin-u-afbdd13a380e' : ''}" />
@@ -56,3 +93,6 @@
     </span>
   {/if}
 </Button>
+{#if failed}
+  <p role="alert">{i18n.t('common.error')}</p>
+{/if}

package/dist/components/buttons/ShowButton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
   import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
@@ -17,7 +19,7 @@
     accessControl = { enabled: true, hideIfUnauthorized: true },
     onBeforeNavigate,
     class: className = '',
-  } = $props<{
+  }: {
     resource: string;
     recordItemId: string | number;
     label?: string;
@@ -26,7 +28,7 @@
     accessControl?: ButtonAccessControl;
     onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
-  }>();
+  } = $props();
 
   const nav = useNavigation();
   const resourceDefinition = $derived.by(() => {
@@ -36,13 +38,13 @@
       return null;
     }
   });
-  const can = useCan(() => ({
+  const can = useCan(() => (definedOptions({
     resource,
     action: 'show',
     params: withRecordId(accessControl?.params, recordItemId),
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
-  }));
+  })));
   const hidden = $derived(resourceDefinition?.canShow === false || (accessControl?.hideIfUnauthorized && !can.allowed));
   const displayText = $derived(label ?? i18n.t('common.detail'));
 

package/dist/components/content/ApiKeyList.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { Check, Copy, KeyRound, Trash2 } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Badge } from '../ui/badge/index.js';
@@ -21,7 +23,7 @@
   const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle} description={stateDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle, description: stateDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each keys as apiKey (apiKey.id)}

package/dist/components/content/ContentPageHeader.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { contentHeader } from '../../styled-system/recipes/index.js';
+
   interface Props {
     title: string;
     eyebrow?: string;
@@ -9,23 +11,24 @@
     class?: string;
   }
   let { title, eyebrow, description, breadcrumbs = [], actions, class: className = '' }: Props = $props();
+  const styles = contentHeader();
 </script>
 
-<header class={'svadmin-u-6ed543e2fbbb ' + className} data-svadmin-page-header>
+<header class={styles.root + ' ' + className} data-svadmin-page-header>
   {#if breadcrumbs.length > 0}
-    <nav aria-label="Breadcrumb" class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-359090c2d529 svadmin-u-bfa603190748">
+    <nav aria-label="Breadcrumb" class={styles.breadcrumbs}>
       {#each breadcrumbs as crumb, index (crumb)}
         {#if index > 0}<span aria-hidden="true">/</span>{/if}
-        <span class={index === breadcrumbs.length - 1 ? 'svadmin-u-d4108abe6359' : ''}>{crumb}</span>
+        <span class={index === breadcrumbs.length - 1 ? styles.currentCrumb : ''}>{crumb}</span>
       {/each}
     </nav>
   {/if}
-  <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-0c3bc98565dd svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93">
-    <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-da7c36cd8867">
-      {#if eyebrow}<p class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">{eyebrow}</p>{/if}
-      <h1 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-e9fadafbd4a2 svadmin-u-d9256981a032 svadmin-u-d4108abe6359">{title}</h1>
-      {#if description}<p class="svadmin-u-2cc8041eca99 svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{description}</p>{/if}
+  <div class={styles.row}>
+    <div class={styles.heading}>
+      {#if eyebrow}<p class={styles.eyebrow}>{eyebrow}</p>{/if}
+      <h1 class={styles.title}>{title}</h1>
+      {#if description}<p class={styles.description}>{description}</p>{/if}
     </div>
-    {#if actions}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render actions()}</div>{/if}
+    {#if actions}<div class={styles.actions}>{@render actions()}</div>{/if}
   </div>
 </header>

package/dist/components/content/ContentPageShell.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
   import type { Snippet } from 'svelte';
+  import { contentPage } from '../../styled-system/recipes/index.js';
   import ContentPageHeader from './ContentPageHeader.svelte';
 
   interface Props {
@@ -24,16 +26,13 @@
     class: className = '',
   }: Props = $props();
 
-  const widthClass = $derived(
-    width === 'narrow'
-      ? 'svadmin-u-fa3f7111e53b'
-      : width === 'wide'
-        ? 'max-w-[92rem]'
-        : 'max-w-[74rem]',
-  );
+  // 保留旧组件对非窄屏/宽屏输入的默认宽度回退。
+  const styles = $derived(contentPage({
+    width: width === 'narrow' || width === 'wide' ? width : 'default',
+  }));
 </script>
 
-<div data-svadmin-content-page={pageId} class={'svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 ' + widthClass + ' svadmin-u-b3542e058833 ' + className}>
-  {#if title}<ContentPageHeader {title} {eyebrow} {description} {actions} />{/if}
+<div data-svadmin-content-page={pageId} class={styles.root + ' ' + className}>
+  {#if title}<ContentPageHeader {title} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
   {@render children()}
 </div>

package/dist/components/content/FileBrowser.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { Filemanager, Willow } from '@svar-ui/svelte-filemanager';
+  import { Locale } from '@svar-ui/svelte-core';
+
+  export type FileBrowserData = ComponentProps<typeof Filemanager>['data'];
+  export type FileBrowserInit = ComponentProps<typeof Filemanager>['init'];
+  export type FileBrowserMenuOptions = ComponentProps<typeof Filemanager>['menuOptions'];
+  export type FileBrowserProps = ComponentProps<typeof Filemanager> & {
+    words?: ComponentProps<typeof Locale>['words'];
+    fonts?: boolean;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    words, fonts = false, class: className = '',
+    mode = 'table', icons = 'simple', readonly = true,
+    ...managerProps
+  }: FileBrowserProps = $props();
+</script>
+
+<div class={'svadmin-file-browser ' + className} data-slot="file-browser">
+  <Willow {fonts}>
+    <Locale words={words ?? {}}>
+      <Filemanager {...managerProps} {mode} {icons} {readonly} />
+    </Locale>
+  </Willow>
+</div>
+
+<style>
+  .svadmin-file-browser { height: 32rem; min-width: 0; max-width: 100%; overflow: hidden; }
+  .svadmin-file-browser :global(.wx-willow-theme) { --wx-font-family: inherit; --wx-fm-box-shadow: none; }
+</style>

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'svelte';
+import { Filemanager } from '@svar-ui/svelte-filemanager';
+import { Locale } from '@svar-ui/svelte-core';
+export type FileBrowserData = ComponentProps<typeof Filemanager>['data'];
+export type FileBrowserInit = ComponentProps<typeof Filemanager>['init'];
+export type FileBrowserMenuOptions = ComponentProps<typeof Filemanager>['menuOptions'];
+export type FileBrowserProps = ComponentProps<typeof Filemanager> & {
+    words?: ComponentProps<typeof Locale>['words'];
+    fonts?: boolean;
+    class?: string;
+};
+declare const FileBrowser: import("svelte").Component<FileBrowserProps, {}, "">;
+type FileBrowser = ReturnType<typeof FileBrowser>;
+export default FileBrowser;

package/dist/components/content/FileList.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { Download, File, Trash2 } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
@@ -11,7 +13,7 @@
   const resolvedState = $derived(state ?? (files.length === 0 ? 'empty' : undefined));
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each files as file, index (file.id ?? file.name + '-' + index)}

package/dist/components/content/MemberList.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { MoreHorizontal } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Avatar } from '../ui/avatar/index.js';
@@ -14,7 +16,7 @@
   const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each members as member (member.id)}

package/dist/components/content/MetricBlock.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { metricBlock } from '../../styled-system/recipes/index.js';
   import { Skeleton } from '../ui/skeleton/index.js';
+
   export type MetricTrendTone = 'positive' | 'negative' | 'warning' | 'neutral';
   interface Props {
     label: string;
@@ -22,23 +24,18 @@
     loading = false,
     class: className = '',
   }: Props = $props();
-  const trendClass: Record<MetricTrendTone, string> = {
-    positive: 'text-success',
-    negative: 'text-destructive',
-    warning: 'text-warning-foreground',
-    neutral: 'text-muted-foreground',
-  };
+  const styles = $derived(metricBlock({ trendTone }));
 </script>
 
-<div data-svadmin-metric-card role="region" aria-label={label} class={'svadmin-u-7e0b7cdf1a94 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-8e63407b5ceb svadmin-u-438b2237b8d6 ' + className}>
-  <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c">
-    <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{label}</p>
-    {#if icon}<span class="svadmin-u-bfa603190748" aria-hidden="true">{@render icon()}</span>{/if}
+<div data-svadmin-metric-card role="region" aria-label={label} class={styles.root + ' ' + className}>
+  <div class={styles.header}>
+    <p class={styles.label}>{label}</p>
+    {#if icon}<span class={styles.icon} aria-hidden="true">{@render icon()}</span>{/if}
   </div>
   {#if loading}
-    <Skeleton class="svadmin-u-eccd13ef4f2f svadmin-u-ed8a5df7b2fb svadmin-u-69da7e4ff95d" />
+    <Skeleton class={styles.skeleton} />
   {:else}
-    <p class="svadmin-u-50d0d216a2f8 svadmin-u-f283ea9bea0e svadmin-u-3febee094e85 svadmin-u-e83a7042bc91 svadmin-u-d9256981a032 svadmin-u-d4108abe6359 svadmin-u-3032cae0badb">{value}</p>
-    {#if detail || trend}<div class="svadmin-u-50d0d216a2f8 svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77a2a20e90d4 svadmin-u-359090c2d529">{#if trend}<span class={'svadmin-u-2689f3958069 svadmin-u-3032cae0badb ' + trendClass[trendTone]}>{trend}</span>{/if}{#if detail}<span class="svadmin-u-bfa603190748">{detail}</span>{/if}</div>{/if}
+    <p class={styles.value}>{value}</p>
+    {#if detail || trend}<div class={styles.meta}>{#if trend}<span class={styles.trend}>{trend}</span>{/if}{#if detail}<span class={styles.detail}>{detail}</span>{/if}</div>{/if}
   {/if}
 </div>

package/dist/components/content/NetworkTable.svelte

@@ -1,18 +1,20 @@
 <script lang="ts" generics="T extends object">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
   import * as Table from '../ui/table/index.js';
   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; }
-  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '' }: 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; density?: 'comfortable' | 'compact'; }
+  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '', density = 'comfortable' }: Props = $props();
   const resolvedState = $derived(state ?? (rows.length === 0 ? 'empty' : undefined));
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <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 data-svadmin-datatable>
+  <Table.Root {density} 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,6 +15,7 @@ declare function $$render<T extends object>(): {
         retryLabel?: string;
         loadingLabel?: string;
         class?: string;
+        density?: "comfortable" | "compact";
     };
     exports: {};
     bindings: "";

package/dist/components/content/PageToolbar.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  interface Props {
-    leading?: Snippet;
-    trailing?: Snippet;
-    children?: Snippet;
-    class?: string;
-  }
+  import { productToolbar } from '../../styled-system/recipes/index.js';
+  interface Props { leading?: Snippet; trailing?: Snippet; children?: Snippet; class?: string; }
   let { leading, trailing, children, class: className = '' }: Props = $props();
+  const styles = productToolbar();
 </script>
-
-<div data-svadmin-table-toolbar class={'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-eb6e8b881acd svadmin-u-438b2237b8d6 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93 ' + className}>
-  <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+<div data-svadmin-table-toolbar class={styles.root + ' ' + className}>
+  <div class={styles.leading}>
     {#if leading}{@render leading()}{/if}
     {#if children}{@render children()}{/if}
   </div>
-  {#if trailing}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render trailing()}</div>{/if}
+  {#if trailing}<div class={styles.trailing}>{@render trailing()}</div>{/if}
 </div>

package/dist/components/content/SectionHeader.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  interface Props {
-    title: string;
-    description?: string;
-    actions?: Snippet;
-    id?: string;
-    class?: string;
-  }
+  import { productSection } from '../../styled-system/recipes/index.js';
+  interface Props { title: string; description?: string; actions?: Snippet; id?: string; class?: string; }
   let { title, description, actions, id, class: className = '' }: Props = $props();
+  const styles = productSection();
 </script>
-
-<div class={'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93 ' + className}>
-  <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-da7c36cd8867">
-    <h2 {id} class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{title}</h2>
-    {#if description}<p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{description}</p>{/if}
+<div class={styles.root + ' ' + className} data-svadmin-section-header>
+  <div class={styles.heading}>
+    <h2 {id} class={styles.title}>{title}</h2>
+    {#if description}<p class={styles.description}>{description}</p>{/if}
   </div>
-  {#if actions}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render actions()}</div>{/if}
+  {#if actions}<div class={styles.actions}>{@render actions()}</div>{/if}
 </div>

package/dist/components/content/SecurityEventTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import * as Table from '../ui/table/index.js';
   import { useTranslation } from '@svadmin/core/i18n';
   import StatusBadge from './StatusBadge.svelte';
@@ -12,7 +14,7 @@
   const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <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 data-svadmin-datatable>