@svadmin/ui 0.45.0 → 0.46.0

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 export interface NetworkUser {
     id: string;
     name: string;
@@ -6,10 +7,22 @@ export interface NetworkUser {
     avatar?: string;
     summary?: string;
 }
+export interface NetworkMetric {
+    label: string;
+    value: string | number;
+}
 interface Props {
     user: NetworkUser;
+    tags?: string[];
+    metrics?: NetworkMetric[];
+    verified?: boolean;
+    verifiedLabel?: string;
+    connected?: boolean;
+    connectLabel?: string;
+    connectedLabel?: string;
     onconnect?: () => void;
     onmessage?: () => void;
+    footer?: Snippet;
     class?: string;
 }
 declare const NetworkUserCard: import("svelte").Component<Props, {}, "">;

package/dist/components/content/SectionHeader.svelte

@@ -4,14 +4,15 @@
     title: string;
     description?: string;
     actions?: Snippet;
+    id?: string;
     class?: string;
   }
-  let { title, description, actions, class: className = '' }: Props = $props();
+  let { title, description, actions, id, class: className = '' }: Props = $props();
 </script>
 
 <div class={'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ' + className}>
   <div class="min-w-0 space-y-1">
-    <h2 class="text-base font-semibold text-foreground">{title}</h2>
+    <h2 {id} class="text-base font-semibold text-foreground">{title}</h2>
     {#if description}<p class="text-sm text-muted-foreground">{description}</p>{/if}
   </div>
   {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}

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

@@ -3,6 +3,7 @@ interface Props {
     title: string;
     description?: string;
     actions?: Snippet;
+    id?: string;
     class?: string;
 }
 declare const SectionHeader: import("svelte").Component<Props, {}, "">;

package/dist/components/content/SecurityEventTable.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
   import * as Table from '../ui/table/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
   import StatusBadge from './StatusBadge.svelte';
+  import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
   export interface SecurityEvent { id: string; event: string; actor?: string; location?: string; createdAt: string; severity: 'info' | 'warning' | 'danger'; }
-  interface Props { events?: SecurityEvent[]; class?: string; }
-  let { events = [], class: className = '' }: Props = $props();
+  interface Props { events?: SecurityEvent[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; class?: string; }
+  const i18n = useTranslation();
+  let { events = [], state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '' }: Props = $props();
+  const resolvedState = $derived(state ?? (events.length === 0 ? 'empty' : undefined));
+  const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
+{#if resolvedState}
+  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+{:else}
 <div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
   <Table.Root data-svadmin-datatable>
-    <Table.Header data-svadmin-table-head><Table.Row><Table.Head>Event</Table.Head><Table.Head>Actor</Table.Head><Table.Head>Location</Table.Head><Table.Head>Time</Table.Head><Table.Head>Risk</Table.Head></Table.Row></Table.Header>
+    <Table.Header data-svadmin-table-head><Table.Row><Table.Head>{isZh ? '事件' : 'Event'}</Table.Head><Table.Head>{isZh ? '操作者' : 'Actor'}</Table.Head><Table.Head>{isZh ? '位置' : 'Location'}</Table.Head><Table.Head>{isZh ? '时间' : 'Time'}</Table.Head><Table.Head>{isZh ? '风险' : 'Risk'}</Table.Head></Table.Row></Table.Header>
     <Table.Body>
       {#each events as event (event.id)}
-        <Table.Row data-svadmin-table-row><Table.Cell class="font-medium">{event.event}</Table.Cell><Table.Cell>{event.actor ?? 'System'}</Table.Cell><Table.Cell>{event.location ?? 'Unknown'}</Table.Cell><Table.Cell class="whitespace-nowrap">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
+        <Table.Row data-svadmin-table-row><Table.Cell class="font-medium">{event.event}</Table.Cell><Table.Cell>{event.actor ?? (isZh ? '系统' : 'System')}</Table.Cell><Table.Cell>{event.location ?? (isZh ? '未知' : 'Unknown')}</Table.Cell><Table.Cell class="whitespace-nowrap">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
       {/each}
     </Table.Body>
   </Table.Root>
-  {#if events.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No security events</div>{/if}
 </div>
+{/if}

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

@@ -1,3 +1,4 @@
+import type { DataStateKind } from './DataState.svelte';
 export interface SecurityEvent {
     id: string;
     event: string;
@@ -8,6 +9,14 @@ export interface SecurityEvent {
 }
 interface Props {
     events?: SecurityEvent[];
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
     class?: string;
 }
 declare const SecurityEventTable: import("svelte").Component<Props, {}, "">;

package/dist/components/content/SettingsFieldRow.svelte

@@ -0,0 +1,28 @@
+<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();
+</script>
+
+<div class={cn('flex min-h-11 items-center justify-between gap-4 py-3', separated && 'border-t border-border', className)} data-svadmin-settings-field-row>
+  <div class="min-w-0">
+    <p class="text-sm font-medium text-foreground">{label}</p>
+    {#if description}<p class="mt-1 max-w-2xl text-sm leading-5 text-muted-foreground">{description}</p>{/if}
+  </div>
+  <div class="shrink-0">{@render control()}</div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    description?: string;
+    control: Snippet;
+    separated?: boolean;
+    class?: string;
+}
+declare const SettingsFieldRow: import("svelte").Component<Props, {}, "">;
+type SettingsFieldRow = ReturnType<typeof SettingsFieldRow>;
+export default SettingsFieldRow;

package/dist/components/content/SettingsGroup.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    class?: string;
+    bodyClass?: string;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    children,
+    class: className = '',
+    bodyClass = '',
+  }: Props = $props();
+</script>
+
+<section class={cn('overflow-hidden rounded-lg border border-border bg-card shadow-sm', className)} data-svadmin-settings-group>
+  <header class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
+    <div class="min-w-0 space-y-1">
+      <h2 class="text-sm font-semibold text-foreground">{title}</h2>
+      {#if description}<p class="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>{/if}
+    </div>
+    {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+  </header>
+  <div class={cn('p-5', bodyClass)}>{@render children()}</div>
+</section>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    class?: string;
+    bodyClass?: string;
+}
+declare const SettingsGroup: import("svelte").Component<Props, {}, "">;
+type SettingsGroup = ReturnType<typeof SettingsGroup>;
+export default SettingsGroup;

package/dist/components/content/WorkspaceLayout.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    primary: Snippet;
+    secondary?: Snippet;
+    summary?: Snippet;
+    secondaryWidth?: string;
+    class?: string;
+  }
+
+  let {
+    primary,
+    secondary,
+    summary,
+    secondaryWidth = '22rem',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class={cn('flex flex-col gap-6', className)} data-svadmin-workspace-layout style:--workspace-secondary-width={secondaryWidth}>
+  {#if summary}<div class="order-2 sm:order-1">{@render summary()}</div>{/if}
+  <div class="order-1 grid min-w-0 gap-6 sm:order-2 lg:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]">
+    <div class="min-w-0" data-svadmin-workspace-primary>{@render primary()}</div>
+    {#if secondary}<aside class="min-w-0">{@render secondary()}</aside>{/if}
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    primary: Snippet;
+    secondary?: Snippet;
+    summary?: Snippet;
+    secondaryWidth?: string;
+    class?: string;
+}
+declare const WorkspaceLayout: import("svelte").Component<Props, {}, "">;
+type WorkspaceLayout = ReturnType<typeof WorkspaceLayout>;
+export default WorkspaceLayout;

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

@@ -2,6 +2,9 @@ export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
+export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as SettingsGroup } from './SettingsGroup.svelte';
+export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';
@@ -24,7 +27,7 @@ export { default as MemberList } from './MemberList.svelte';
 export type { MemberSummary } from './MemberList.svelte';
 export { default as ImportDropzone } from './ImportDropzone.svelte';
 export { default as NetworkUserCard } from './NetworkUserCard.svelte';
-export type { NetworkUser } from './NetworkUserCard.svelte';
+export type { NetworkUser, NetworkMetric } from './NetworkUserCard.svelte';
 export { default as NetworkTable } from './NetworkTable.svelte';
 export type { NetworkColumn } from './NetworkTable.types.js';
 export { default as OtpInput } from './OtpInput.svelte';

package/dist/components/content/index.js

@@ -2,6 +2,9 @@ export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
+export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as SettingsGroup } from './SettingsGroup.svelte';
+export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';

package/dist/components/network/UserCardsNFTPage.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import { Check, Plus } from '@lucide/svelte';
-  import { Button } from '../ui/button/index.js';
-  import { Badge } from '../ui/badge/index.js';
-  import * as Card from '../ui/card/index.js';
   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 NetworkUserCard from '../content/NetworkUserCard.svelte';
   import type { NetworkUser } from '../content/NetworkUserCard.svelte';
 
   const i18n = useTranslation();
@@ -28,6 +25,28 @@
 
 <ContentPageShell pageId="network-user-cards" width="wide">
   <ContentPageHeader title={i18n.t('network.userCards')} description={i18n.t('network.userCardsDescription')} />
-  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
-  {#if filtered.length === 0}<DataState state="empty" title={i18n.t('network.userCards')} />{:else}<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{#each filtered as user (user.id)}<Card.Card><Card.CardContent class="space-y-4 p-4"><div class="flex items-start gap-3"><span class="flex size-10 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground">{user.name.slice(0, 2).toUpperCase()}</span><div class="min-w-0 flex-1"><div class="flex items-center gap-1.5"><h2 class="truncate text-sm font-semibold text-foreground">{user.name}</h2>{#if user.verified}<Check class="size-3.5 text-primary" />{/if}</div><p class="text-xs text-muted-foreground">{user.handle}</p></div></div><p class="text-sm text-muted-foreground">{user.summary}</p><div class="flex flex-wrap gap-1.5">{#each user.tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div><div class="grid grid-cols-3 gap-2 border-t border-border pt-3 text-center"><div><p class="text-sm font-semibold text-foreground">{user.collectionCount}</p><p class="text-xs text-muted-foreground">{i18n.t('network.nftCollection')}</p></div><div><p class="text-sm font-semibold text-foreground">{user.floorPrice}</p><p class="text-xs text-muted-foreground">{i18n.t('network.floorPrice')}</p></div><div><p class="text-sm font-semibold text-foreground">{user.volume}</p><p class="text-xs text-muted-foreground">{i18n.t('network.volume')}</p></div></div><Button size="sm" variant={connected.includes(user.id) ? 'outline' : 'default'} class="w-full" onclick={() => toggle(user.id)}>{#if connected.includes(user.id)}<Check class="size-3.5" />{i18n.t('network.connected')}{:else}<Plus class="size-3.5" />{i18n.t('network.connect')}{/if}</Button></Card.CardContent></Card.Card>{/each}</div>{/if}
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} clearLabel={i18n.locale === 'zh-CN' ? '清除搜索' : 'Clear search'} />
+  {#if filtered.length === 0}
+    <DataState state="empty" title={i18n.t('network.userCards')} />
+  {:else}
+    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      {#each filtered as user (user.id)}
+        <NetworkUserCard
+          {user}
+          tags={user.tags}
+          verified={user.verified}
+          verifiedLabel={i18n.locale === 'zh-CN' ? '已验证' : 'Verified'}
+          metrics={[
+            { label: i18n.t('network.nftCollection'), value: user.collectionCount },
+            { label: i18n.t('network.floorPrice'), value: user.floorPrice },
+            { label: i18n.t('network.volume'), value: user.volume },
+          ]}
+          connected={connected.includes(user.id)}
+          connectLabel={i18n.t('network.connect')}
+          connectedLabel={i18n.t('network.connected')}
+          onconnect={() => toggle(user.id)}
+        />
+      {/each}
+    </div>
+  {/if}
 </ContentPageShell>

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as LoginPage } from './components/LoginPage.svelte';
+export { default as AuthPageShell } from './components/AuthPageShell.svelte';
 export { default as RegisterPage } from './components/RegisterPage.svelte';
 export { default as ForgotPasswordPage } from './components/ForgotPasswordPage.svelte';
 export { default as CanAccess } from './components/CanAccess.svelte';
@@ -157,7 +158,11 @@ export { default as ContentPageShell } from './components/content/ContentPageShe
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';
+export { default as WorkspaceLayout } from './components/content/WorkspaceLayout.svelte';
+export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
+export { default as SettingsFieldRow } from './components/content/SettingsFieldRow.svelte';
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';
+export type { MetricTrendTone } from './components/content/MetricBlock.svelte';
 export { default as DescriptionList } from './components/content/DescriptionList.svelte';
 export type { DescriptionItem } from './components/content/DescriptionList.svelte';
 export { default as StatusBadge } from './components/content/StatusBadge.svelte';
@@ -181,7 +186,7 @@ export { default as MemberList } from './components/content/MemberList.svelte';
 export type { MemberSummary } from './components/content/MemberList.svelte';
 export { default as ImportDropzone } from './components/content/ImportDropzone.svelte';
 export { default as NetworkUserCard } from './components/content/NetworkUserCard.svelte';
-export type { NetworkUser } from './components/content/NetworkUserCard.svelte';
+export type { NetworkUser, NetworkMetric } from './components/content/NetworkUserCard.svelte';
 export { default as NetworkTable } from './components/content/NetworkTable.svelte';
 export type { NetworkColumn } from './components/content/NetworkTable.types.js';
 export { default as OtpInput } from './components/content/OtpInput.svelte';

package/dist/index.js

@@ -19,6 +19,7 @@ export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as LoginPage } from './components/LoginPage.svelte';
+export { default as AuthPageShell } from './components/AuthPageShell.svelte';
 export { default as RegisterPage } from './components/RegisterPage.svelte';
 export { default as ForgotPasswordPage } from './components/ForgotPasswordPage.svelte';
 export { default as CanAccess } from './components/CanAccess.svelte';
@@ -172,6 +173,9 @@ export { default as ContentPageShell } from './components/content/ContentPageShe
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';
+export { default as WorkspaceLayout } from './components/content/WorkspaceLayout.svelte';
+export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
+export { default as SettingsFieldRow } from './components/content/SettingsFieldRow.svelte';
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';
 export { default as DescriptionList } from './components/content/DescriptionList.svelte';
 export { default as StatusBadge } from './components/content/StatusBadge.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [