@svadmin/ui 0.76.0 → 0.78.0

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

@@ -21,6 +21,7 @@ export interface NotificationPreferencesProvider {
 }
 type $$ComponentProps = {
     preferencesProvider?: NotificationPreferencesProvider;
+    headingLevel?: 'h1' | 'h2';
 };
 declare const NotificationsSettings: import("svelte").Component<$$ComponentProps, {}, "">;
 type NotificationsSettings = ReturnType<typeof NotificationsSettings>;

package/dist/components/ProfilePage.svelte

@@ -13,8 +13,10 @@
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
   import { User, Mail, Lock, Loader2, AlertCircle, Camera } from '@lucide/svelte';
 
+  let { headingLevel = 'h1' }: { headingLevel?: 'h1' | 'h2' } = $props();
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
 
@@ -150,9 +152,7 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div>
-    <h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('profile.title')}</h2>
-  </div>
+  <ContentPageHeader title={i18n.t('profile.title')} {headingLevel} />
 
   <!-- Profile Info -->
   <Card.Card>

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

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

package/dist/components/ResourceOverview.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import ContentPageShell from './content/ContentPageShell.svelte';
+  import DataState from './content/DataState.svelte';
+  import ResourceOverviewCard from './ResourceOverviewCard.svelte';
+
+  let { title }: { title?: string } = $props();
+  const context = captureAdminContext();
+  const i18n = useTranslation();
+  const resources = $derived(context.resources
+    .filter(resource => resource.showInMenu !== false && !resource.parentName)
+    .sort((left, right) => (left.menuOrder ?? 0) - (right.menuOrder ?? 0)));
+</script>
+
+<ContentPageShell title={title ?? i18n.t('common.dashboard')} pageId="resource-overview" width="wide">
+  {#if resources.length}
+    <div class="svadmin-resource-overview-grid">
+      {#each resources as resource (resource.identifier ?? resource.name)}
+        <ResourceOverviewCard {resource} />
+      {/each}
+    </div>
+  {:else}
+    <DataState state="empty" />
+  {/if}
+</ContentPageShell>
+
+<style>
+  .svadmin-resource-overview-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+    align-items: start;
+    gap: 1rem;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    title?: string;
+};
+declare const ResourceOverview: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResourceOverview = ReturnType<typeof ResourceOverview>;
+export default ResourceOverview;

package/dist/components/ResourceOverviewCard.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { useCan, useNavigation, type ResourceDefinition } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { ArrowRight, Plus } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import DataState from './content/DataState.svelte';
+
+  let { resource }: { resource: ResourceDefinition } = $props();
+  const i18n = useTranslation();
+  const navigation = useNavigation();
+  const read = useCan(() => ({ resource: resource.name, action: 'list' }));
+  const create = useCan(() => ({ resource: resource.name, action: 'create' }));
+</script>
+
+<section class="svadmin-resource-overview-card" aria-label={resource.label}>
+  <h2>{resource.label}</h2>
+  {#if read.isLoading}
+    <DataState state="loading" />
+  {:else if !read.allowed}
+    <DataState state="forbidden" />
+  {:else}
+    <div class="svadmin-resource-overview-actions">
+      <Button variant="outline" onclick={() => navigation.list(resource.name)}>
+        {i18n.t('profileSections.viewAll')}<ArrowRight aria-hidden="true" />
+      </Button>
+      {#if resource.canCreate !== false && !create.isLoading && create.allowed}
+        <Button onclick={() => navigation.create(resource.name)}>
+          <Plus aria-hidden="true" />{i18n.t('common.create')}
+        </Button>
+      {/if}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .svadmin-resource-overview-card {
+    display: grid;
+    align-content: start;
+    gap: 1rem;
+    min-width: 0;
+    padding: 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--card);
+    color: var(--card-foreground);
+    box-shadow: var(--shadow-surface);
+  }
+  h2 { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
+  .svadmin-resource-overview-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+</style>

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

@@ -0,0 +1,7 @@
+import { type ResourceDefinition } from '@svadmin/core';
+type $$ComponentProps = {
+    resource: ResourceDefinition;
+};
+declare const ResourceOverviewCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResourceOverviewCard = ReturnType<typeof ResourceOverviewCard>;
+export default ResourceOverviewCard;

package/dist/components/SecuritySettings.svelte

@@ -11,7 +11,10 @@
   import DataState from './content/DataState.svelte';
   import FeedbackNotice from './content/FeedbackNotice.svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
+  let { headingLevel = 'h1' }: { headingLevel?: 'h1' | 'h2' } = $props();
+  const controlId = $props.id();
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
   const authProvider = $derived(adminContext.authProvider);
@@ -179,16 +182,16 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.security')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.securityDescription')}</p></div>
+  <ContentPageHeader title={i18n.t('settings.security')} description={i18n.t('settings.securityDescription')} {headingLevel} />
   {#if !sessionProvider}
     <FeedbackNotice tone="warning" message={isZh ? '未配置 SessionProvider。会话和 MFA 设置不会使用模拟数据。' : 'SessionProvider is not configured. Session and MFA controls do not use simulated data.'} />
   {/if}
-  <SettingsGroup title={i18n.t('security.twoFactorAuth')} description={i18n.t('security.twoFactorDescription')}>
-    <SettingsFieldRow label={i18n.t('security.enable2fa')} description={is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}>
-      {#snippet control()}<Switch bind:checked={() => is2faEnabled, (enabled) => { void handleMfaChange(enabled); }} disabled={!sessionProvider?.setMfaEnabled || updatingMfa} />{/snippet}
+  <SettingsGroup title={i18n.t('security.twoFactorAuth')} description={i18n.t('security.twoFactorDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
+    <SettingsFieldRow controlId={`${controlId}-mfa`} label={i18n.t('security.enable2fa')} description={is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}>
+      {#snippet control()}<Switch id={`${controlId}-mfa`} bind:checked={() => is2faEnabled, (enabled) => { void handleMfaChange(enabled); }} disabled={!sessionProvider?.setMfaEnabled || updatingMfa} />{/snippet}
     </SettingsFieldRow>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('profile.changePassword')} description={isZh ? '密码修改由 AuthProvider 持久化。' : 'Password changes are persisted by AuthProvider.'}>
+  <SettingsGroup title={i18n.t('profile.changePassword')} description={isZh ? '密码修改由 AuthProvider 持久化。' : 'Password changes are persisted by AuthProvider.'} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     {#if !authProvider?.updatePassword}<FeedbackNotice tone="warning" message={isZh ? '当前 AuthProvider 不支持修改密码。' : 'The current AuthProvider does not support password updates.'} />{/if}
     <form onsubmit={handlePasswordChange} class="svadmin-u-6199866f612f svadmin-u-3e7ce58d64fa">
       {#if passwordErrorMessage}<Alert.Root variant="destructive"><AlertTriangle class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" /><Alert.Description>{passwordErrorMessage}</Alert.Description></Alert.Root>{/if}
@@ -198,7 +201,7 @@
       <Button type="submit" disabled={!authProvider?.updatePassword || changingPassword}>{changingPassword ? (isZh ? '更新中...' : 'Updating...') : i18n.t('profile.updatePassword')}</Button>
     </form>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('security.activeSessions')} description={i18n.t('security.sessionsDescription')}>
+  <SettingsGroup title={i18n.t('security.activeSessions')} description={i18n.t('security.sessionsDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     {#snippet actions()}{#if sessions.some((session) => !session.current)}<Button variant="outline" size="sm" disabled={revoking !== null} onclick={() => revokeAllOthers()}>{i18n.t('security.revokeOthers')}</Button>{/if}{/snippet}
     {#if loadingSessions}
       <DataState state="loading" />

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

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

package/dist/components/Sidebar.svelte

@@ -427,7 +427,7 @@
             <span class="svadmin-u-36e579c0b41c svadmin-u-2eba0d65d059">{i18n.t('common.toggleTheme')}</span>
             <span
               class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29 svadmin-u-ac204c108886 svadmin-u-3daca9af0861 svadmin-u-823f000e740a svadmin-u-6f8ab8abb126"
-              style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}"
+              style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#635bff'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#635bff'}"
             ></span>
             <!-- The dot previews the user-selected runtime theme swatch; the hex
                  fallback only covers the case where no registered theme matches. -->

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -25,6 +25,7 @@
   import FeedbackNotice from '../content/FeedbackNotice.svelte';
 
   const i18n = useTranslation();
+  const controlId = $props.id();
   const adminContext = captureAdminContext();
   const identityProvider = $derived(adminContext.identityGovernanceProvider);
   const organizationProvider = $derived(adminContext.organizationProvider);
@@ -50,16 +51,12 @@
     && organizationName.trim()
     && organizationName.trim() !== organization.name,
   ));
-  const policyNumbersValid = $derived.by(() => {
-    const sessionTimeout = Number(sessionTimeoutValue);
-    const auditRetention = Number(auditRetentionValue);
-    return /^\d+$/.test(sessionTimeoutValue)
-      && /^\d+$/.test(auditRetentionValue)
-      && Number.isSafeInteger(sessionTimeout)
-      && Number.isSafeInteger(auditRetention)
-      && sessionTimeout > 0
-      && auditRetention > 0;
-  });
+  function isPositiveInteger(value: string): boolean {
+    return /^\d+$/.test(value) && Number.isSafeInteger(Number(value)) && Number(value) > 0;
+  }
+  const sessionTimeoutValid = $derived(isPositiveInteger(sessionTimeoutValue));
+  const auditRetentionValid = $derived(isPositiveInteger(auditRetentionValue));
+  const policyNumbersValid = $derived(sessionTimeoutValid && auditRetentionValid);
 
   function message(error: unknown): string {
     return error instanceof Error ? error.message : String(error);
@@ -202,11 +199,11 @@
 </script>
 
 {#snippet auditControl()}
-  <Switch checked={policy?.auditLoggingEnabled ?? false} disabled={!policy || saving} aria-label={i18n.t('account.auditLogging')} onCheckedChange={(checked) => { if (policy) policy = { ...policy, auditLoggingEnabled: checked }; }} />
+  <Switch id={`${controlId}-audit`} checked={policy?.auditLoggingEnabled ?? false} disabled={!policy || saving} onCheckedChange={(checked) => { if (policy) policy = { ...policy, auditLoggingEnabled: checked }; }} />
 {/snippet}
 
 {#snippet ssoControl()}
-  <Switch checked={policy?.requireSso ?? false} disabled={!policy || saving} aria-label={i18n.t('account.enableSso')} onCheckedChange={(checked) => { if (policy) policy = { ...policy, requireSso: checked }; }} />
+  <Switch id={`${controlId}-sso`} checked={policy?.requireSso ?? false} disabled={!policy || saving} onCheckedChange={(checked) => { if (policy) policy = { ...policy, requireSso: checked }; }} />
 {/snippet}
 
 <ContentPageShell pageId="account-settings-enterprise" width="wide">
@@ -222,19 +219,22 @@
     <div class="svadmin-u-f3c543ad5fe9 svadmin-u-60541e1e26f8 svadmin-u-0c3bc98565dd svadmin-u-2f27a80ed92b">
       <SettingsGroup title={i18n.t('account.securityPolicy')} description={isZh ? '配置组织级身份、会话与审计策略。' : 'Configure organization-wide identity, session, and audit controls.'} bodyClass="space-y-4">
         {#if organizationProvider}
-          <div class="svadmin-u-6f7e013d6499"><Label for="organization-name">{isZh ? '组织名称' : 'Organization name'}</Label><div class="svadmin-u-60fbb7713999 svadmin-u-77a2a20e90d4"><Input id="organization-name" bind:value={organizationName} disabled={!organizationProvider.updateCurrentOrganization || savingOrganization} /><Button variant="outline" size="sm" disabled={!organizationChanged || savingOrganization} onclick={saveOrganization}>{savingOrganization ? (isZh ? '保存中...' : 'Saving...') : i18n.t('common.save')}</Button></div></div>
+          <div class="svadmin-u-6f7e013d6499"><Label for={`${controlId}-organization-name`}>{isZh ? '组织名称' : 'Organization name'}</Label><div class="svadmin-u-60fbb7713999 svadmin-u-77a2a20e90d4"><Input id={`${controlId}-organization-name`} bind:value={organizationName} disabled={!organizationProvider.updateCurrentOrganization || savingOrganization} /><Button variant="outline" size="sm" disabled={!organizationChanged || savingOrganization} onclick={saveOrganization}>{savingOrganization ? (isZh ? '保存中...' : 'Saving...') : i18n.t('common.save')}</Button></div></div>
         {/if}
         <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e00ad81645a2">
-          <div class="svadmin-u-6f7e013d6499"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" type="number" min="1" step="1" bind:value={sessionTimeoutValue} disabled={!policy || saving} /></div>
-          <div class="svadmin-u-6f7e013d6499"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" type="number" min="1" step="1" bind:value={auditRetentionValue} disabled={!policy || saving} /></div>
+          <div class="svadmin-u-6f7e013d6499"><Label for={`${controlId}-session-timeout`}>{i18n.t('account.sessionTimeout')}</Label><Input id={`${controlId}-session-timeout`} type="number" min="1" step="1" bind:value={sessionTimeoutValue} disabled={!policy || saving} aria-invalid={policy ? !sessionTimeoutValid : undefined} aria-describedby={policy && !sessionTimeoutValid ? `${controlId}-policy-error` : undefined} /></div>
+          <div class="svadmin-u-6f7e013d6499"><Label for={`${controlId}-retention`}>{i18n.t('account.dataRetention')}</Label><Input id={`${controlId}-retention`} type="number" min="1" step="1" bind:value={auditRetentionValue} disabled={!policy || saving} aria-invalid={policy ? !auditRetentionValid : undefined} aria-describedby={policy && !auditRetentionValid ? `${controlId}-policy-error` : undefined} /></div>
         </div>
-        {#if policy && !policyNumbersValid}<FeedbackNotice tone="warning" message={isZh ? '会话超时和审计保留天数必须为正整数。' : 'Session timeout and audit retention must be positive integers.'} />{/if}
-        <SettingsFieldRow label={i18n.t('account.auditLogging')} description={isZh ? '由后端持久化组织级审计策略。' : 'Persist the organization audit policy through the backend provider.'} control={auditControl} separated />
+        {#if policy && !policyNumbersValid}<div id={`${controlId}-policy-error`}><FeedbackNotice tone="warning" message={isZh ? '会话超时和审计保留天数必须为正整数。' : 'Session timeout and audit retention must be positive integers.'} /></div>{/if}
+        <SettingsFieldRow label={i18n.t('account.auditLogging')} controlId={`${controlId}-audit`} description={isZh ? '由后端持久化组织级审计策略。' : 'Persist the organization audit policy through the backend provider.'} control={auditControl} separated />
         <Button size="sm" disabled={!identityProvider || !policy || !policyNumbersValid || saving} onclick={saveSettings}>{saving ? (isZh ? '保存中...' : 'Saving...') : i18n.t('common.save')}</Button>
       </SettingsGroup>
       <SettingsGroup title={i18n.t('account.singleSignOn')} description={i18n.t('account.ssoDescription')} bodyClass="space-y-4">
-        <SettingsFieldRow label={i18n.t('account.enableSso')} description={isZh ? '启用后由已配置身份源执行组织登录策略。' : 'Require the configured identity provider for organization members.'} control={ssoControl} />
-        <Input bind:value={metadataUrl} placeholder="https://idp.example.com/.well-known/openid-configuration" aria-label={i18n.t('account.ssoProvider')} disabled={!identityProvider || testing} />
+        <SettingsFieldRow label={i18n.t('account.enableSso')} controlId={`${controlId}-sso`} description={isZh ? '启用后由已配置身份源执行组织登录策略。' : 'Require the configured identity provider for organization members.'} control={ssoControl} />
+        <div class="svadmin-u-6f7e013d6499">
+          <Label for={`${controlId}-metadata-url`}>{i18n.t('account.ssoProvider')}</Label>
+          <Input id={`${controlId}-metadata-url`} type="url" bind:value={metadataUrl} placeholder="https://idp.example.com/.well-known/openid-configuration" disabled={!identityProvider || testing} />
+        </div>
         <Button variant="outline" size="sm" disabled={!identityProvider || testing} onclick={() => testConnection()}>{testing ? (isZh ? '测试中...' : 'Testing...') : i18n.t('common.test')}</Button>
       </SettingsGroup>
     </div>

package/dist/components/account/SettingsPlainPage.svelte

@@ -3,11 +3,15 @@
   import NotificationsSettings from '../NotificationsSettings.svelte';
   import SecuritySettings from '../SecuritySettings.svelte';
   import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  const i18n = useTranslation();
   let { preferencesProvider }: { preferencesProvider?: import('../NotificationsSettings.svelte').NotificationPreferencesProvider } = $props();
 </script>
 
 <ContentPageShell pageId="account-settings-plain" width="narrow">
-  <ProfilePage />
-  <NotificationsSettings {...preferencesProvider ? { preferencesProvider } : {}} />
-  <SecuritySettings />
+  <ContentPageHeader title={i18n.t('account.settingsPlain')} />
+  <ProfilePage headingLevel="h2" />
+  <NotificationsSettings headingLevel="h2" {...preferencesProvider ? { preferencesProvider } : {}} />
+  <SecuritySettings headingLevel="h2" />
 </ContentPageShell>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -27,11 +27,11 @@
     </nav>
     <div class="svadmin-u-7e0b7cdf1a94">
       {#if active === 'profile'}
-        <ProfilePage />
+        <ProfilePage headingLevel="h2" />
       {:else if active === 'signin'}
-        <IntegrationsSettings />
+        <IntegrationsSettings headingLevel="h2" />
       {:else if active === 'preferences'}
-        <AppearanceSettings />
+        <AppearanceSettings headingLevel="h2" />
       {:else}
         <SettingsGroup title={i18n.t('account.manageApi')} description={isZh ? '使用有作用域的真实凭据，并在权限变更时轮换。' : 'Use scoped credentials and rotate them when access changes.'} bodyClass="space-y-3">
           {#if credentialProvider}

package/dist/components/content/ContentPageHeader.svelte

@@ -8,13 +8,29 @@
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    density?: 'compact' | 'comfortable';
+    headingLevel?: 'h1' | 'h2';
     class?: string;
   }
-  let { title, eyebrow, description, breadcrumbs = [], actions, class: className = '' }: Props = $props();
-  const styles = contentHeader();
+  let {
+    title,
+    eyebrow,
+    description,
+    breadcrumbs = [],
+    actions,
+    density = 'comfortable',
+    headingLevel = 'h1',
+    class: className = '',
+  }: Props = $props();
+  const styles = $derived(contentHeader({ density }));
 </script>
 
-<header class={styles.root + ' ' + className} data-svadmin-page-header>
+<header
+  class={styles.root + ' ' + className}
+  data-svadmin-page-header
+  data-svadmin-content-header
+  data-density={density}
+>
   {#if breadcrumbs.length > 0}
     <nav aria-label="Breadcrumb" class={styles.breadcrumbs}>
       {#each breadcrumbs as crumb, index (crumb)}
@@ -26,7 +42,7 @@
   <div class={styles.row}>
     <div class={styles.heading}>
       {#if eyebrow}<p class={styles.eyebrow}>{eyebrow}</p>{/if}
-      <h1 class={styles.title}>{title}</h1>
+      <svelte:element this={headingLevel} class={styles.title}>{title}</svelte:element>
       {#if description}<p class={styles.description}>{description}</p>{/if}
     </div>
     {#if actions}<div class={styles.actions}>{@render actions()}</div>{/if}

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

@@ -5,6 +5,8 @@ interface Props {
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    density?: 'compact' | 'comfortable';
+    headingLevel?: 'h1' | 'h2';
     class?: string;
 }
 declare const ContentPageHeader: import("svelte").Component<Props, {}, "">;

package/dist/components/content/ContentPageShell.svelte

@@ -12,6 +12,7 @@
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -23,16 +24,24 @@
     children,
     pageId = 'content',
     width = 'default',
+    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 
   // 保留旧组件对非窄屏/宽屏输入的默认宽度回退。
+  const resolvedWidth = $derived(width === 'narrow' || width === 'wide' ? width : 'default');
   const styles = $derived(contentPage({
-    width: width === 'narrow' || width === 'wide' ? width : 'default',
+    width: resolvedWidth,
+    density,
   }));
 </script>
 
-<div data-svadmin-content-page={pageId} class={styles.root + ' ' + className}>
-  {#if title}<ContentPageHeader {title} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
+<div
+  data-svadmin-content-page={pageId}
+  data-svadmin-content-page-width={resolvedWidth}
+  data-density={density}
+  class={styles.root + ' ' + className}
+>
+  {#if title}<ContentPageHeader {title} {density} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
   {@render children()}
 </div>

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

@@ -7,6 +7,7 @@ interface Props {
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const ContentPageShell: import("svelte").Component<Props, {}, "">;

package/dist/components/content/DashboardPage.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { definedOptions } from '@svadmin/core/options';
+  import ContentPageShell from './ContentPageShell.svelte';
+  import WorkspaceLayout from './WorkspaceLayout.svelte';
+
+  let {
+    title, description, actions, metrics, secondary, children,
+    pageId = 'dashboard',
+  }: {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    metrics?: Snippet;
+    secondary?: Snippet;
+    children: Snippet;
+    pageId?: string;
+  } = $props();
+</script>
+
+<ContentPageShell {title} {pageId} width="wide" {...definedOptions({ description, actions })}>
+  {#if metrics}
+    <div class="svadmin-dashboard-metrics" data-svadmin-dashboard-metrics>{@render metrics()}</div>
+  {/if}
+  <WorkspaceLayout primary={children} {...definedOptions({ secondary })} />
+</ContentPageShell>
+
+<style>
+  .svadmin-dashboard-metrics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+    gap: 1rem;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    metrics?: Snippet;
+    secondary?: Snippet;
+    children: Snippet;
+    pageId?: string;
+};
+declare const DashboardPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type DashboardPage = ReturnType<typeof DashboardPage>;
+export default DashboardPage;

package/dist/components/content/FeedbackNotice.svelte

@@ -27,7 +27,7 @@
     tone === 'danger'
       ? 'svadmin-u-26e4f7bdbd56 svadmin-u-7a0854fdbc30 svadmin-u-811148b13d1e'
       : tone === 'warning'
-        ? 'svadmin-u-d008dee27eaa svadmin-u-283481e780bb svadmin-u-3a4ff758c2ab'
+        ? 'svadmin-u-d008dee27eaa svadmin-u-283481e780bb svadmin-u-d4108abe6359'
         : 'svadmin-u-18049387f0af svadmin-u-b00f43c30c2b svadmin-u-d4108abe6359',
   );
 </script>

package/dist/components/content/MetricBlock.svelte

@@ -35,7 +35,7 @@
   {#if loading}
     <Skeleton class={styles.skeleton} />
   {:else}
-    <p class={styles.value}>{value}</p>
+    <p data-svadmin-metric-value 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/PageSection.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { definedOptions } from '@svadmin/core/options';
+  import SectionHeader from './SectionHeader.svelte';
+
+  let { title, description, actions, children }: {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+  } = $props();
+  const id = $props.id();
+</script>
+
+<section class="svadmin-page-section" aria-labelledby={id} data-svadmin-page-section>
+  <SectionHeader {id} {title} {...definedOptions({ description, actions })} />
+  {@render children()}
+</section>
+
+<style>
+  .svadmin-page-section {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: 1rem;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+};
+declare const PageSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageSection = ReturnType<typeof PageSection>;
+export default PageSection;

package/dist/components/content/SettingsFieldRow.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   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();
+  interface Props { label: string; description?: string; control: Snippet; controlId?: string; separated?: boolean; class?: string; }
+  let { label, description, control, controlId, separated = false, class: className = '' }: Props = $props();
+  const labelId = $props.id();
   const styles = $derived(productSettingsRow({ separated }));
 </script>
 <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}
+    {#if controlId}
+      <label id={labelId} for={controlId} class={styles.label}>{label}</label>
+    {:else}
+      <p id={labelId} class={styles.label}>{label}</p>
+    {/if}
+    {#if description}<p id={`${labelId}-description`} class={styles.description}>{description}</p>{/if}
   </div>
-  <div class={styles.control}>{@render control()}</div>
+  <div class={styles.control} role="group" aria-labelledby={labelId} aria-describedby={description ? `${labelId}-description` : undefined}>{@render control()}</div>
 </div>

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

@@ -3,6 +3,7 @@ interface Props {
     label: string;
     description?: string;
     control: Snippet;
+    controlId?: string;
     separated?: boolean;
     class?: string;
 }

package/dist/components/content/SettingsGroup.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { productSettingsRecipe as productSettings } from '../../recipes.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();
+  interface Props { title: string; description?: string; actions?: Snippet; children: Snippet; headingLevel?: 'h2' | 'h3'; class?: string; bodyClass?: string; }
+  let { title, description, actions, children, headingLevel = 'h2', class: className = '', bodyClass = '' }: Props = $props();
   const styles = productSettings();
 </script>
 <section class={styles.root + ' ' + className} data-svadmin-settings-group>
   <header class={styles.header}>
     <div class={styles.heading}>
-      <h2 class={styles.title}>{title}</h2>
+      <svelte:element this={headingLevel} class={styles.title}>{title}</svelte:element>
       {#if description}<p class={styles.description}>{description}</p>{/if}
     </div>
     {#if actions}<div class={styles.actions}>{@render actions()}</div>{/if}

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

@@ -4,6 +4,7 @@ interface Props {
     description?: string;
     actions?: Snippet;
     children: Snippet;
+    headingLevel?: 'h2' | 'h3';
     class?: string;
     bodyClass?: string;
 }

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

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

package/dist/components/content/index.js

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