@svadmin/ui 0.72.0 → 0.74.0

package/dist/components/account/TeamMembersPage.svelte

@@ -1,28 +1,12 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import { Copy, Link2, Send, UserPlus } from '@lucide/svelte';
-  import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Label } from '../ui/label/index.js';
-  import * as Card from '../ui/card/index.js';
+  import MemberDirectory, { type MemberDirectoryProvider } from './MemberDirectory.svelte';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
-  import FilterToolbar from '../content/FilterToolbar.svelte';
-  import MemberList from '../content/MemberList.svelte';
-  import type { MemberSummary } from '../content/MemberList.svelte';
-  import { referenceDemoData } from '../../reference-data.js';
+  let { memberProvider }: { memberProvider?: MemberDirectoryProvider } = $props();
   const i18n = useTranslation();
-  let query = $state('');
-  let inviteEmail = $state('');
-  let inviteStatus = $state('');
-  let members = $state<MemberSummary[]>(referenceDemoData.members.map((member) => ({ ...member, status: member.status === 'active' ? 'success' : member.status === 'invited' ? 'warning' : 'neutral' })));
-  const filtered = $derived(query ? members.filter((member) => `${member.name} ${member.email} ${member.department}`.toLowerCase().includes(query.toLowerCase())) : members);
-  function sendInvite() { const email = inviteEmail.trim(); if (!email) return; members = [...members, { id: `invite-${Date.now()}`, name: email.replace(/@.*$/, ''), email, role: 'Viewer', department: 'Pending assignment', status: 'warning' }]; inviteStatus = email; inviteEmail = ''; }
 </script>
-
 <ContentPageShell pageId="account-team-members" width="wide">
-  <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93"><ContentPageHeader title={i18n.t("account.teamMembers")} description={i18n.t("account.teamMembersDescription")} /><Button size="sm" onclick={() => document.getElementById("invite-email")?.focus()}><UserPlus class="svadmin-u-783b0d9d1e2c" />{i18n.t("account.inviteMember")}</Button></div>
-  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
-  <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-2f27a80ed92b"><Card.Card><Card.CardContent class="svadmin-u-6ed543e2fbbb svadmin-u-c07e54fd1439"><div><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.invitePeople')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('account.invitePeopleDescription')}</p></div><div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-77a2a20e90d4 svadmin-u-020ba687fa12"><div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c svadmin-u-6f7e013d6499"><Label for="invite-email">Email</Label><Input id="invite-email" bind:value={inviteEmail} type="email" placeholder="name@example.com" /></div><Button class="svadmin-u-c7d50d5fc0c3" size="sm" disabled={!inviteEmail} onclick={sendInvite}><Send class="svadmin-u-783b0d9d1e2c" />{i18n.t('account.sendInvite')}</Button></div>{#if inviteStatus}<p class="svadmin-u-359090c2d529 svadmin-u-76747e5e02ff" role="status">{i18n.t('account.invited')}: {inviteStatus}</p>{/if}</Card.CardContent></Card.Card><Card.Card><Card.CardContent class="svadmin-u-6ed543e2fbbb svadmin-u-c07e54fd1439"><div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><Link2 class="svadmin-u-f7b5fa971871 svadmin-u-bfa603190748" /><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.inviteWithLink')}</h2></div><p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('account.inviteLinkHint')}</p><div class="svadmin-u-60fbb7713999 svadmin-u-77a2a20e90d4"><Input readonly value="https://acme.com/invite/xK7fQ2" class="svadmin-u-0e65706bcccd svadmin-u-359090c2d529" /><Button variant="outline" size="sm"><Copy class="svadmin-u-783b0d9d1e2c" />{i18n.t('account.copyLink')}</Button></div></Card.CardContent></Card.Card></div>
-  <MemberList members={filtered} />
+  <ContentPageHeader title={i18n.t('account.teamMembers')} />
+  <MemberDirectory provider={memberProvider} />
 </ContentPageShell>

package/dist/components/account/TeamMembersPage.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const TeamMembersPage: import("svelte").Component<Record<string, never>, {}, "">;
+import { type MemberDirectoryProvider } from './MemberDirectory.svelte';
+type $$ComponentProps = {
+    memberProvider?: MemberDirectoryProvider;
+};
+declare const TeamMembersPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type TeamMembersPage = ReturnType<typeof TeamMembersPage>;
 export default TeamMembersPage;

package/dist/components/account/UserProfilePage.svelte

@@ -1,30 +1,8 @@
 <script lang="ts">
-  import { useTranslation } from '@svadmin/core/i18n';
-  import { Loader2 } from '@lucide/svelte';
-  import { Button } from '../ui/button/index.js';
-  import { Switch } from '../ui/switch/index.js';
-  import * as Card from '../ui/card/index.js';
+  import ProfilePage from '../ProfilePage.svelte';
   import ContentPageShell from '../content/ContentPageShell.svelte';
-  import ContentPageHeader from '../content/ContentPageHeader.svelte';
-  import DescriptionList from '../content/DescriptionList.svelte';
-  import FileList from '../content/FileList.svelte';
-  import IntegrationCard from '../content/IntegrationCard.svelte';
-  import WorkspaceLayout from '../content/WorkspaceLayout.svelte';
-  import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
-  import { referenceDemoData } from '../../reference-data.js';
-  const i18n = useTranslation();
-  let availableToHire = $state(true);
-  let saving = $state(false);
-  async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
-  let integrations = $state<IntegrationSummary[]>(referenceDemoData.integrations);
-  const files = [{ id: '1', name: 'portfolio-2026.pdf', size: '2.1 MB', type: 'PDF' }, { id: '2', name: 'avatar-pack.zip', size: '8.4 MB', type: 'Archive' }, { id: '3', name: 'cover-photo.png', size: '1.2 MB', type: 'Image' }];
-  function toggle(id: string) { integrations = integrations.map((item) => item.id === id ? { ...item, connected: !item.connected } : item); }
 </script>
 
-<ContentPageShell pageId="account-user-profile" width="wide">
-  <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93"><ContentPageHeader title={i18n.t('account.userProfile')} description={i18n.t('account.userProfileDescription')} /><Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="svadmin-u-783b0d9d1e2c svadmin-u-afbdd13a380e" />{/if}{i18n.t('common.save')}</Button></div>
-  <WorkspaceLayout secondaryWidth="20rem">
-    {#snippet primary()}<div class="svadmin-u-3e7ce58d64fa"><Card.Card><Card.CardContent class="svadmin-u-b43b4c086d9a svadmin-u-c07e54fd1439"><div><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.personalInfo')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="svadmin-u-3e7ce58d64fa svadmin-u-c07e54fd1439"><div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c"><div><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.work')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-58284b4ea568">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-d5eab218aa34 svadmin-u-660d2effb880 svadmin-u-359090c2d529 svadmin-u-bfa603190748">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="svadmin-u-6ed543e2fbbb"><h2 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>{/snippet}
-    {#snippet secondary()}<div class="svadmin-u-3e7ce58d64fa"><Card.Card><Card.CardContent class="svadmin-u-6ed543e2fbbb svadmin-u-c07e54fd1439"><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="svadmin-u-6ed543e2fbbb svadmin-u-c07e54fd1439"><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>{/snippet}
-  </WorkspaceLayout>
+<ContentPageShell pageId="account-user-profile" width="narrow">
+  <ProfilePage />
 </ContentPageShell>

package/dist/components/account/UserProfilePage.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const UserProfilePage: import("svelte").Component<Record<string, never>, {}, "">;
-type UserProfilePage = ReturnType<typeof UserProfilePage>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const UserProfilePage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type UserProfilePage = InstanceType<typeof UserProfilePage>;
 export default UserProfilePage;

package/dist/components/auto-table-grid.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { Sort } from '@svadmin/core';
+/** 可信宿主的渲染扩展；资源查询、权限、操作和偏好状态仍由 AutoTable 持有。 */
+export interface AutoTableGridState {
+    readonly records: readonly Record<string, unknown>[];
+    readonly columns: readonly {
+        key: string;
+        label: string;
+        width: number;
+        sortable: boolean;
+    }[];
+    readonly primaryKey: string;
+    readonly sorters: readonly Sort[];
+    readonly density: 'compact' | 'comfortable';
+    readonly locale: string;
+    readonly label: string;
+    readonly scopeKey: string;
+    readonly disabled: boolean;
+    readonly onSortChange: (sorters: readonly Sort[]) => void;
+    readonly cell: Snippet<[{
+        id: string | number;
+        field: string;
+    }]>;
+    readonly controls: Snippet;
+    readonly after: Snippet;
+}

package/dist/components/auto-table-grid.js

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/ExportButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useCan, useTranslation, useExport, useResourceContract } from '@svadmin/core';
+  import { useCan, useTranslation, useExport, useResourceContract, type TaskProvider, type ExportFormat, type Filter, type Sort } from '@svadmin/core';
   import { definedReactiveOptions } from '@svadmin/core/options';
   import { Button } from '../ui/button/index.js';
   import { Download } from '@lucide/svelte';
@@ -14,6 +14,16 @@
     children,
     hideText = false,
     accessControl = { enabled: true, hideIfUnauthorized: true },
+    taskName,
+    taskProvider,
+    taskIdempotencyKey,
+    initialTaskId,
+    onTaskSubmitted,
+    filters,
+    sorters,
+    maxItemCount,
+    format = 'csv',
+    meta,
     class: className = '',
   } = $props<{
     resource: string;
@@ -21,15 +31,20 @@
     children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
+    taskName?: string;
+    taskProvider?: TaskProvider;
+    taskIdempotencyKey?: string;
+    initialTaskId?: string;
+    onTaskSubmitted?: (taskId: string) => void | Promise<void>;
+    filters?: Filter[];
+    sorters?: Sort[];
+    maxItemCount?: number;
+    format?: ExportFormat;
+    meta?: Record<string, unknown>;
     class?: string;
   }>();
 
   const binding = useResourceContract(() => resource);
-  const exporter = useExport(definedReactiveOptions({
-    get resource() { return binding.resource; },
-    get dataProviderName() { return binding.dataProviderName; },
-    get meta() { return binding.meta; },
-  }));
   const can = useCan(() => ({
     resource,
     action: 'export',
@@ -37,11 +52,40 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
+  const exporter = useExport(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+    get taskName() { return taskName; },
+    get taskProvider() { return taskProvider; },
+    get taskIdempotencyKey() { return taskIdempotencyKey; },
+    get initialTaskId() { return initialTaskId; },
+    get onTaskSubmitted() { return onTaskSubmitted; },
+    get filters() { return filters; },
+    get sorters() { return sorters; },
+    get maxItemCount() { return maxItemCount; },
+    get format() { return format; },
+    get meta() { return meta ?? binding.meta; },
+    get enabled() { return can.allowed; },
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-  const displayText = $derived(label ?? i18n.t('common.export'));
+  const taskDownloadReady = $derived(exporter.artifact !== undefined);
+  const busy = $derived(exporter.isLoading || (exporter.isTaskPending && !exporter.taskError));
+  const displayText = $derived(taskDownloadReady ? i18n.t('common.download')
+    : exporter.taskError ? i18n.t('common.retry')
+    : exporter.taskId && exporter.error ? i18n.t('common.error')
+    : exporter.taskId && !exporter.isTaskPending ? i18n.t('task.status.cancelled')
+    : busy ? i18n.t('common.processing') : label ?? i18n.t('common.export'));
 
   async function exportRecords() {
-    if (!can.allowed || exporter.isLoading) return;
+    if (!can.allowed || busy) return;
+    if (exporter.taskError) {
+      try { await exporter.refetchTask(); } catch { /* 查询错误由 hook 暴露。 */ }
+      return;
+    }
+    if (taskDownloadReady) {
+      exporter.downloadTask();
+      return;
+    }
     try { await exporter.triggerExport(); }
     catch {
       // The hook exposes a sanitized error; stale-scope cancellations remain silent.
@@ -55,14 +99,14 @@
     size={hideText ? 'icon' : 'sm'}
     class={className}
     aria-label={hideText ? displayText : undefined}
-    disabled={exporter.isLoading || !can.allowed}
-    aria-busy={exporter.isLoading}
+    disabled={busy || !can.allowed || (!!exporter.taskId && !taskDownloadReady && !exporter.taskError)}
+    aria-busy={busy}
     onclick={exportRecords}
   >
     <Download class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
     {#if !hideText}
       <span class="svadmin-u-f58b02572ab2">
-        {#if children}
+        {#if children && !taskName}
           {@render children()}
         {:else}
           {displayText}
@@ -70,7 +114,7 @@
       </span>
     {/if}
   </Button>
-  {#if exporter.error}
+  {#if exporter.error || exporter.taskError}
     <p role="alert">{i18n.t('common.error')}</p>
   {/if}
 {/if}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type TaskProvider, type ExportFormat, type Filter, type Sort } from '@svadmin/core';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
@@ -6,6 +7,16 @@ type $$ComponentProps = {
     children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
+    taskName?: string;
+    taskProvider?: TaskProvider;
+    taskIdempotencyKey?: string;
+    initialTaskId?: string;
+    onTaskSubmitted?: (taskId: string) => void | Promise<void>;
+    filters?: Filter[];
+    sorters?: Sort[];
+    maxItemCount?: number;
+    format?: ExportFormat;
+    meta?: Record<string, unknown>;
     class?: string;
 };
 declare const ExportButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/content/ContentPageHeader.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { contentHeaderRecipe as contentHeader } from '../../recipes.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,7 +1,7 @@
 <script lang="ts">
   import { definedOptions } from '@svadmin/core/options';
-
   import type { Snippet } from 'svelte';
+  import { contentPageRecipe as contentPage } from '../../recipes.js';
   import ContentPageHeader from './ContentPageHeader.svelte';
 
   interface Props {
@@ -26,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}>
+<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/MetricBlock.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { metricBlockRecipe as metricBlock } from '../../recipes.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

@@ -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; }
-  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} {...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 { productToolbarRecipe as productToolbar } from '../../recipes.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/ReferenceNotice.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+  const i18n = useTranslation();
+</script>
+<p role="note">{i18n.locale === 'zh-CN' ? '示例资料，不代表当前账户或组织。连接状态仅在本页演示，导出只包含示例数据。' : 'Sample content, not your current account or organization. Connection changes are local previews; exports contain sample data only.'}</p>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ReferenceNotice: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ReferenceNotice = InstanceType<typeof ReferenceNotice>;
+export default ReferenceNotice;

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 { productSectionRecipe as productSection } from '../../recipes.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/SettingsFieldRow.svelte

@@ -1,28 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { cn } from '../../utils.js';
-
-  interface Props {
-    label: string;
-    description?: string;
-    control: Snippet;
-    separated?: boolean;
-    class?: string;
-  }
-
-  let {
-    label,
-    description,
-    control,
-    separated = false,
-    class: className = '',
-  }: Props = $props();
+  import { productSettingsRowRecipe as productSettingsRow } from '../../recipes.js';
+  interface Props { label: string; description?: string; control: Snippet; separated?: boolean; class?: string; }
+  let { label, description, control, separated = false, class: className = '' }: Props = $props();
+  const styles = $derived(productSettingsRow({ separated }));
 </script>
-
-<div class={cn('svadmin-u-60fbb7713999 svadmin-u-0e5b245b4ed1 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-0c3bc98565dd svadmin-u-1b2d54a3fd12', separated && 'svadmin-u-b950dda299d3 svadmin-u-18049387f0af', className)} data-svadmin-settings-field-row>
-  <div class="svadmin-u-7e0b7cdf1a94">
-    <p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{label}</p>
-    {#if description}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-2cc8041eca99 svadmin-u-fc7473ca09eb svadmin-u-7054e2767710 svadmin-u-bfa603190748">{description}</p>{/if}
+<div class={styles.root + ' ' + className} data-svadmin-settings-field-row>
+  <div class={styles.heading}>
+    <p class={styles.label}>{label}</p>
+    {#if description}<p class={styles.description}>{description}</p>{/if}
   </div>
-  <div class="svadmin-u-012fbd121f37">{@render control()}</div>
+  <div class={styles.control}>{@render control()}</div>
 </div>