@svadmin/ui 0.73.0 → 0.74.0

package/dist/component-registry.js

@@ -0,0 +1,216 @@
+import { allRecipes, describeRecipe } from "./recipes.js";
+import { surfaceDesignContract } from "./design-contract.js";
+// 组件主题入口；不是允许模型写入 CSS 的白名单。
+const semanticTokens = ["foreground", "muted-foreground", "border"];
+function variant(recipe, name) {
+    const metadata = describeRecipe(recipe);
+    const value = metadata.defaults;
+    return {
+        kind: "enum",
+        values: metadata.variants[name] ?? [],
+        ...(value[name] !== undefined ? { default: value[name] } : {}),
+    };
+}
+const registryEntries = [
+    {
+        id: "content-page-shell",
+        component: "@svadmin/ui/components/content/ContentPageShell.svelte",
+        recipe: "contentPageRecipe",
+        props: {
+            title: { kind: "string" },
+            eyebrow: { kind: "string" },
+            description: { kind: "string" },
+            pageId: { kind: "string" },
+            width: variant("contentPageRecipe", "width"),
+            class: { kind: "string" },
+        },
+        slots: { children: { kind: "snippet", required: true }, actions: { kind: "snippet" } },
+        tokens: semanticTokens,
+        states: ["default"],
+    },
+    {
+        id: "content-page-header",
+        component: "@svadmin/ui/components/content/ContentPageHeader.svelte",
+        recipe: "contentHeaderRecipe",
+        props: {
+            title: { kind: "string", required: true },
+            eyebrow: { kind: "string" },
+            description: { kind: "string" },
+            breadcrumbs: { kind: "string[]" },
+            class: { kind: "string" },
+        },
+        slots: { actions: { kind: "snippet" } },
+        tokens: semanticTokens,
+        states: ["default"],
+    },
+    {
+        id: "metric-block",
+        component: "@svadmin/ui/components/content/MetricBlock.svelte",
+        recipe: "metricBlockRecipe",
+        props: {
+            label: { kind: "string", required: true },
+            value: { kind: "string | number", required: true },
+            detail: { kind: "string" },
+            trend: { kind: "string" },
+            trendTone: variant("metricBlockRecipe", "trendTone"),
+            loading: { kind: "boolean", default: false },
+            class: { kind: "string" },
+        },
+        slots: { icon: { kind: "snippet" } },
+        tokens: [...semanticTokens, "card", "success", "destructive", "warning-foreground"],
+        states: ["default", "loading"],
+    },
+    {
+        id: "settings-field-row",
+        component: "@svadmin/ui/components/content/SettingsFieldRow.svelte",
+        recipe: "productSettingsRowRecipe",
+        props: {
+            label: { kind: "string", required: true },
+            description: { kind: "string" },
+            separated: { kind: "boolean", default: false },
+            class: { kind: "string" },
+        },
+        slots: { control: { kind: "snippet", required: true } },
+        tokens: semanticTokens,
+        states: ["default", "separated"],
+    },
+    {
+        id: "settings-group",
+        component: "@svadmin/ui/components/content/SettingsGroup.svelte",
+        recipe: "productSettingsRecipe",
+        props: {
+            title: { kind: "string", required: true },
+            description: { kind: "string" },
+            class: { kind: "string" },
+            bodyClass: { kind: "string" },
+        },
+        slots: {
+            children: { kind: "snippet", required: true },
+            actions: { kind: "snippet" },
+        },
+        tokens: semanticTokens,
+        states: ["default"],
+    },
+    {
+        id: "workspace-layout",
+        component: "@svadmin/ui/components/content/WorkspaceLayout.svelte",
+        recipe: "productWorkspaceRecipe",
+        props: {
+            secondaryWidth: { kind: "string", default: "22rem" },
+            secondaryCollapsed: { kind: "boolean", default: false },
+            secondaryCollapsedWidth: { kind: "string", default: "3rem" },
+            mobileOrder: { kind: "enum", values: ["primary-first", "secondary-first"], default: "primary-first" },
+            class: { kind: "string" },
+        },
+        slots: {
+            primary: { kind: "snippet", required: true },
+            summary: { kind: "snippet" },
+            secondary: { kind: "snippet" },
+        },
+        tokens: semanticTokens,
+        states: ["default", "secondary-collapsed"],
+    },
+    {
+        id: "button",
+        component: "@svadmin/ui/components/ui/button/button.svelte",
+        recipe: "buttonRecipe",
+        props: {
+            variant: variant("buttonRecipe", "variant"),
+            size: variant("buttonRecipe", "size"),
+            disabled: { kind: "boolean", default: false },
+            disabledReason: { kind: "string" },
+        },
+        slots: { children: { kind: "snippet" } },
+        tokens: semanticTokens,
+        states: ["default", "disabled", "focus-visible"],
+        nativeProps: "HTMLButtonAttributes | HTMLAnchorAttributes; WithElementRef",
+    },
+    {
+        id: "badge",
+        component: "@svadmin/ui/components/ui/badge/badge.svelte",
+        recipe: "badgeRecipe",
+        props: {
+            variant: variant("badgeRecipe", "variant"),
+            size: { kind: "enum", values: ["default", "compact"], default: "default" },
+        },
+        slots: { children: { kind: "snippet" } },
+        tokens: semanticTokens,
+        states: ["default"],
+        nativeProps: "HTMLAnchorAttributes; WithElementRef",
+    },
+    {
+        id: "textarea",
+        component: "@svadmin/ui/components/ui/textarea/textarea.svelte",
+        recipe: "textareaRecipe",
+        props: {},
+        slots: {},
+        tokens: semanticTokens,
+        states: ["default", "disabled", "focus-visible", "aria-invalid"],
+        nativeProps: "HTMLTextareaAttributes; WithElementRef; bind:value",
+    },
+    {
+        id: "section-header",
+        component: "@svadmin/ui/components/content/SectionHeader.svelte",
+        recipe: "productSectionRecipe",
+        props: {
+            title: { kind: "string", required: true },
+            description: { kind: "string" },
+            id: { kind: "string" },
+            class: { kind: "string" },
+        },
+        slots: { actions: { kind: "snippet" } },
+        tokens: semanticTokens,
+        states: ["default"],
+    },
+    {
+        id: "page-toolbar",
+        component: "@svadmin/ui/components/content/PageToolbar.svelte",
+        recipe: "productToolbarRecipe",
+        props: { class: { kind: "string" } },
+        slots: {
+            leading: { kind: "snippet" },
+            trailing: { kind: "snippet" },
+            children: { kind: "snippet" },
+        },
+        tokens: semanticTokens,
+        states: ["default"],
+    },
+    {
+        id: "status-badge",
+        component: "@svadmin/ui/components/content/StatusBadge.svelte",
+        recipe: "productStatusRecipe",
+        props: {
+            status: { kind: "enum", values: describeRecipe("productStatusRecipe").variants["status"] ?? [], required: true },
+            label: { kind: "string", description: "Defaults to status" },
+            class: { kind: "string" },
+        },
+        slots: {},
+        tokens: [...semanticTokens, "success", "warning", "destructive", "info"],
+        states: ["default"],
+    },
+];
+export const componentRegistry = registryEntries.map((entry) => ({
+    ...entry,
+    recipeMetadata: describeRecipe(entry.recipe),
+    tokens: [...entry.tokens],
+    states: [...entry.states],
+}));
+export function getComponentRegistry() {
+    return componentRegistry.map((entry) => ({
+        ...entry,
+        props: { ...entry.props },
+        slots: { ...entry.slots },
+    }));
+}
+export function createComponentRegistryManifest() {
+    return {
+        version: "svadmin/component-registry-v1",
+        purpose: "authoring-only",
+        coverage: "twelve-ui-components-and-fourteen-recipes",
+        runtimeCatalog: "@svadmin/surface: createSurfaceCatalogManifest",
+        designContract: surfaceDesignContract,
+        recipes: Object.fromEntries(Object.keys(allRecipes)
+            .map(name => [name, describeRecipe(name)])),
+        components: getComponentRegistry(),
+    };
+}

package/dist/components/AboutSettings.svelte

@@ -9,7 +9,13 @@
   const adminContext = captureAdminContext();
   const resources = $derived(adminContext.resources);
   const providerNames = $derived(adminContext.getDataProviderNames());
-  const version = '__SVADMIN_VERSION__';
+  let { version: suppliedVersion }: { version?: string } = $props();
+  const buildVersion = '__SVADMIN_VERSION__';
+  const version = $derived(suppliedVersion ?? (
+    buildVersion.startsWith('__')
+      ? (i18n.locale === 'zh-CN' ? '开发构建（未提供版本）' : 'Development build (version unavailable)')
+      : buildVersion
+  ));
 </script>
 
 <div class="svadmin-u-b3542e058833">

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

@@ -1,3 +1,6 @@
-declare const AboutSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    version?: string;
+};
+declare const AboutSettings: import("svelte").Component<$$ComponentProps, {}, "">;
 type AboutSettings = ReturnType<typeof AboutSettings>;
 export default AboutSettings;

package/dist/components/ActivityFeed.svelte

@@ -19,6 +19,9 @@
 
   interface Props {
     activities?: ActivityItem[];
+    title?: string;
+    emptyLabel?: string;
+    countLabel?: string;
     onaddcomment?: (comment: string) => void | Promise<void>;
     allowComment?: boolean;
     class?: string;
@@ -26,6 +29,9 @@
 
   let {
     activities = [],
+    title = 'Activity & Timeline Stream',
+    emptyLabel = 'No recent activities',
+    countLabel,
     onaddcomment,
     allowComment = true,
     class: className = '',
@@ -50,9 +56,9 @@
   <div class="svadmin-activity-feed__header">
     <h4 class="svadmin-activity-feed__title">
       <MessageSquare class="svadmin-activity-feed__icon" />
-      Activity & Timeline Stream
+      {title}
     </h4>
-    <span class="svadmin-activity-feed__count">{activities.length} event{activities.length === 1 ? '' : 's'}</span>
+    <span class="svadmin-activity-feed__count">{countLabel ?? `${activities.length} event${activities.length === 1 ? '' : 's'}`}</span>
   </div>
 
   <div class="svadmin-activity-feed__timeline">
@@ -92,7 +98,7 @@
 
     {#if activities.length === 0}
       <div class="svadmin-activity-feed__empty">
-        No recent activities
+        {emptyLabel}
       </div>
     {/if}
   </div>

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

@@ -12,6 +12,9 @@ export interface ActivityItem {
 }
 interface Props {
     activities?: ActivityItem[];
+    title?: string;
+    emptyLabel?: string;
+    countLabel?: string;
     onaddcomment?: (comment: string) => void | Promise<void>;
     allowComment?: boolean;
     class?: string;

package/dist/components/AdminApp.svelte

@@ -61,9 +61,9 @@
   import { QueryClient, QueryClientProvider, type DefaultOptions } from '@tanstack/svelte-query';
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout, { type LayoutAIAssistantProps } from './Layout.svelte';
-  import AutoTable from './AutoTable.svelte';
-  import AutoForm from './AutoForm.svelte';
-  import ShowPage from './ShowPage.svelte';
+  import AutoTable from './LazyAutoTable.svelte';
+  import AutoForm from './LazyAutoForm.svelte';
+  import ShowPage from './LazyShowPage.svelte';
   import Toast from './Toast.svelte';
   import LoginPage from './LoginPage.svelte';
   import RegisterPage from './RegisterPage.svelte';
@@ -73,7 +73,7 @@
   import Sidebar from './Sidebar.svelte';
   import Header from './Header.svelte';
   import TaskQueueDrawer from './LazyTaskQueueDrawer.svelte';
-  import SettingsPage from './SettingsPage.svelte';
+  import SettingsPage from './LazySettingsPage.svelte';
   import ErrorPage from './ErrorPage.svelte';
   import SystemPageShell from './SystemPageShell.svelte';
   import LazyPage from './LazyPage.svelte';
@@ -84,8 +84,14 @@
   import { Skeleton } from './ui/skeleton/index.js';
   import { provideRouterState } from '../router-state.svelte.js';
   import type { AdminProviderBundle } from '../types.js';
+  import type { MfaEnrollmentProvider } from './TwoFactorAuthPage.svelte';
+  import type { NotificationPreferencesProvider } from './NotificationsSettings.svelte';
+  import type { MemberDirectoryProvider } from './account/MemberDirectory.svelte';
 
   interface Props {
+    mfaEnrollmentProvider?: MfaEnrollmentProvider;
+    notificationPreferencesProvider?: NotificationPreferencesProvider;
+    memberDirectoryProvider?: MemberDirectoryProvider;
     /** Single provider, or named providers such as `{ default, analytics }`. */
     dataProvider?: DataProviderInput;
     /** Core canonical provider bundle. Existing top-level props take precedence. */
@@ -150,6 +156,9 @@
   }
 
   let {
+    mfaEnrollmentProvider,
+    notificationPreferencesProvider,
+    memberDirectoryProvider,
     dataProvider,
     providerBundle,
     providers,
@@ -545,7 +554,7 @@
     <ConfigErrorScreen title="{title} — {translation.t('common.configRequired')}" />
   {:else if (isAuthenticated || !resolvedAuthProvider) && isStandaloneTwoFactor && !authRechecking}
     <SystemPageShell {title}>
-      <LazyPage loader={loadTwoFactorAuthPage} props={{}} />
+      <LazyPage loader={loadTwoFactorAuthPage} props={mfaEnrollmentProvider ? { enrollmentProvider: mfaEnrollmentProvider } : {}} />
     </SystemPageShell>
   {:else if standaloneErrorStatus}
     <SystemPageShell {title}>
@@ -582,19 +591,19 @@
       {:else if renderedRoute === '/account/company-profile' || renderedRoute === '/account/home/company-profile'}
         <LazyPage loader={loadCompanyProfilePage} props={{}} />
       {:else if renderedRoute === '/account/settings-plain' || renderedRoute === '/account/home/settings-plain'}
-        <LazyPage loader={loadSettingsPlainPage} props={{}} />
+        <LazyPage loader={loadSettingsPlainPage} props={notificationPreferencesProvider ? { preferencesProvider: notificationPreferencesProvider } : {}} />
       {:else if renderedRoute === '/account/settings-sidebar' || renderedRoute === '/account/home/settings-sidebar'}
         <LazyPage loader={loadSettingsSidebarPage} props={{}} />
       {:else if renderedRoute === '/account/settings-enterprise' || renderedRoute === '/account/home/settings-enterprise'}
         <LazyPage loader={loadSettingsEnterprisePage} props={{}} />
       {:else if renderedRoute === '/account/:tab'}
-        <SettingsPage />
+        <SettingsPage {...notificationPreferencesProvider ? { preferencesProvider: notificationPreferencesProvider } : {}} />
       {:else if renderedRoute === '/account/import-members' || renderedRoute === '/account/members/import-members'}
         <LazyPage loader={loadImportMembersPage} props={{}} />
       {:else if renderedRoute === '/account/members-starter' || renderedRoute === '/account/members/members-starter'}
-        <LazyPage loader={loadMembersStarterPage} props={{}} />
+        <LazyPage loader={loadMembersStarterPage} props={memberDirectoryProvider ? { memberProvider: memberDirectoryProvider } : {}} />
       {:else if renderedRoute === '/account/team-members' || renderedRoute === '/account/members/team-members'}
-        <LazyPage loader={loadTeamMembersPage} props={{}} />
+        <LazyPage loader={loadTeamMembersPage} props={memberDirectoryProvider ? { memberProvider: memberDirectoryProvider } : {}} />
       {:else if renderedRoute === '/account/security-log' || renderedRoute === '/account/security/security-log'}
         <LazyPage loader={loadSecurityLogPage} props={{}} />
       {:else if renderedRoute === '/network/user-cards' || renderedRoute === '/network/user-cards/nft'}
@@ -602,7 +611,7 @@
       {:else if renderedRoute === '/network/team-crew' || renderedRoute === '/network/user-table/team-crew'}
         <LazyPage loader={loadTeamCrewTablePage} props={{}} />
       {:else if renderedRoute.startsWith('/settings')}
-        <SettingsPage />
+        <SettingsPage {...notificationPreferencesProvider ? { preferencesProvider: notificationPreferencesProvider } : {}} />
       {:else if renderedRoute === '/' || renderedRoute === '' || renderedRoute === '/inventory-dashboard'}
         {#if dashboard}
           {@render dashboard()}

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

@@ -5,7 +5,13 @@ import { QueryClient, type DefaultOptions } from '@tanstack/svelte-query';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
 import { type LayoutAIAssistantProps } from './Layout.svelte';
 import type { AdminProviderBundle } from '../types.js';
+import type { MfaEnrollmentProvider } from './TwoFactorAuthPage.svelte';
+import type { NotificationPreferencesProvider } from './NotificationsSettings.svelte';
+import type { MemberDirectoryProvider } from './account/MemberDirectory.svelte';
 interface Props {
+    mfaEnrollmentProvider?: MfaEnrollmentProvider;
+    notificationPreferencesProvider?: NotificationPreferencesProvider;
+    memberDirectoryProvider?: MemberDirectoryProvider;
     /** Single provider, or named providers such as `{ default, analytics }`. */
     dataProvider?: DataProviderInput;
     /** Core canonical provider bundle. Existing top-level props take precedence. */

package/dist/components/ApiSettings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ConfirmDialog from './ConfirmDialog.svelte';
   import { definedOptions } from '@svadmin/core/options';
   import { captureAdminContext, notifyWithProvider, type ApiCredentialSummary, type WebhookSummary } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
@@ -25,6 +26,7 @@
   let newKeyPermissions = $state({ Read: true, Write: false, Delete: false, Admin: false });
   let generatedSecret = $state('');
   let copied = $state(false);
+  let copyError = $state('');
   let newWebhookName = $state('');
   let newWebhookUrl = $state('');
   let newWebhookEvent = $state('resource.created');
@@ -32,6 +34,16 @@
   let error = $state<string | null>(null);
   let submitting = $state(false);
   let requestId = 0;
+  let pendingDanger = $state<{ label: string; run: () => Promise<void> } | null>(null);
+  let deleting = $state(false);
+  function requestDanger(label: string, run: () => Promise<void>) {
+    const epoch = requestId;
+    pendingDanger = { label, run: async () => {
+      if (epoch !== requestId || deleting) return;
+      deleting = true;
+      try { await run(); } finally { if (epoch === requestId) deleting = false; }
+    } };
+  }
 
   function message(error: unknown): string {
     return error instanceof Error ? error.message : String(error);
@@ -45,7 +57,10 @@
     webhooks = [];
     generatedSecret = '';
     copied = false;
+    copyError = '';
     error = null;
+    pendingDanger = null;
+    deleting = false;
     loading = false;
     submitting = false;
     if (!provider) return;
@@ -104,6 +119,7 @@
       keys = [...keys, created.credential];
       generatedSecret = created.secret;
       copied = false;
+      copyError = '';
       newKeyName = '';
       newKeyPermissions = { Read: true, Write: false, Delete: false, Admin: false };
     } catch (caught) {
@@ -114,7 +130,11 @@
     }
   }
 
-  async function revokeKey(id: string): Promise<void> {
+  async function revokeKey(id: string, confirmed = false): Promise<void> {
+    if (!confirmed) {
+      requestDanger(`${i18n.t('common.delete')}: ${keys.find(key => key.id === id)?.name ?? id}`, () => revokeKey(id, true));
+      return;
+    }
     const provider = credentialProvider;
     const currentRequest = requestId;
     const context = adminContext.enterpriseRequestContext;
@@ -130,7 +150,11 @@
     }
   }
 
-  async function deleteWebhook(id: string): Promise<void> {
+  async function deleteWebhook(id: string, confirmed = false): Promise<void> {
+    if (!confirmed) {
+      requestDanger(`${i18n.t('common.delete')}: ${webhooks.find(hook => hook.id === id)?.name ?? id}`, () => deleteWebhook(id, true));
+      return;
+    }
     const provider = credentialProvider;
     const currentRequest = requestId;
     const context = adminContext.enterpriseRequestContext;
@@ -147,11 +171,17 @@
   }
 
   async function copySecret(): Promise<void> {
+    const currentRequest = requestId;
+    const secret = generatedSecret;
+    copyError = '';
+    copied = false;
     try {
-      await navigator.clipboard.writeText(generatedSecret);
-      copied = true;
+      await navigator.clipboard.writeText(secret);
+      if (currentRequest === requestId && generatedSecret === secret) copied = true;
     } catch {
-      copied = false;
+      if (currentRequest === requestId && generatedSecret === secret) {
+        copyError = isZh ? '复制失败，请手动保存密钥。' : 'Copy failed. Save the secret manually.';
+      }
     }
   }
 </script>
@@ -161,6 +191,7 @@
   <WorkspaceLayout secondaryWidth="21rem">
     {#snippet summary()}
       {#if generatedSecret}
+        {#if copyError}<p role="alert">{copyError}</p>{/if}
         <section class="svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-a6afccfc915b svadmin-u-989c466fdbe7 svadmin-u-8e63407b5ceb" role="status" aria-live="polite">
           <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-0c3bc98565dd svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"><div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c"><ShieldCheck class="svadmin-u-15e1b1f444fe svadmin-u-add63bc6753d svadmin-u-012fbd121f37 svadmin-u-20aaf08a7ed1" /><div class="svadmin-u-7e0b7cdf1a94"><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('api.successTitle')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('api.successHint')}</p></div></div><Button variant="ghost" size="sm" onclick={() => { generatedSecret = ''; copied = false; }}>{i18n.t('common.close')}</Button></div>
           <div class="svadmin-u-0ab8667228fd svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><Input readonly value={generatedSecret} class="svadmin-u-7e0b7cdf1a94 svadmin-u-0e65706bcccd svadmin-u-359090c2d529" aria-label={i18n.t('api.successTitle')} /><Button size="icon" onclick={copySecret} aria-label={i18n.t('common.copy')}>{#if copied}<Check class="svadmin-u-f7b5fa971871" />{:else}<Copy class="svadmin-u-f7b5fa971871" />{/if}</Button></div>
@@ -202,3 +233,8 @@
     {/snippet}
   </WorkspaceLayout>
 </ContentPageShell>
+<ConfirmDialog open={pendingDanger !== null}
+  title={pendingDanger?.label ?? ''}
+  message={isZh ? '撤销或删除后，使用此凭据或 Webhook 的服务将受影响。确认继续？' : 'Services using this credential or webhook will be affected. Continue?'}
+  oncancel={() => pendingDanger = null}
+  onconfirm={() => { const action = pendingDanger; pendingDanger = null; void action?.run(); }} />