@svadmin/ui 0.77.0 → 0.78.0

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/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

@@ -9,6 +9,7 @@
     breadcrumbs?: string[];
     actions?: Snippet;
     density?: 'compact' | 'comfortable';
+    headingLevel?: 'h1' | 'h2';
     class?: string;
   }
   let {
@@ -18,6 +19,7 @@
     breadcrumbs = [],
     actions,
     density = 'comfortable',
+    headingLevel = 'h1',
     class: className = '',
   }: Props = $props();
   const styles = $derived(contentHeader({ density }));
@@ -40,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

@@ -6,6 +6,7 @@ interface Props {
     breadcrumbs?: string[];
     actions?: Snippet;
     density?: 'compact' | 'comfortable';
+    headingLevel?: 'h1' | 'h2';
     class?: string;
 }
 declare const ContentPageHeader: 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/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';

package/dist/components/ui/button/button.svelte

@@ -16,6 +16,7 @@
 			variant?: ButtonVariantValue;
 			size?: ButtonSizeValue;
 			disabledReason?: string;
+			disabledReasonDisplay?: "tooltip" | "inline";
 			restrictionClass?: string;
 			restrictionStyle?: string;
 		};
@@ -34,6 +35,7 @@
 		type = "button",
 		disabled,
 		disabledReason = "",
+		disabledReasonDisplay = "tooltip",
 		restrictionClass,
 		restrictionStyle,
 		children,
@@ -100,7 +102,21 @@
 	{/if}
 {/snippet}
 
-{#if restriction}
+{#if restriction && disabledReasonDisplay === "inline"}
+	<span
+		data-slot="button-restriction"
+		data-disabled-reason={restriction}
+		role="group"
+		aria-label={restProps["aria-label"]}
+		aria-labelledby={restProps["aria-labelledby"]}
+		aria-describedby={describedBy}
+		class={restrictionClass}
+		style={`display: inline-flex; flex-direction: column; align-items: flex-start; gap: .375rem; min-width: 0; max-width: 100%; ${restrictionStyle ?? ""}`}
+	>
+		{@render control()}
+		<span id={restrictionId} data-slot="button-restriction-description" style="font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere;">{restriction}</span>
+	</span>
+{:else if restriction}
 	<Tooltip.Root>
 		<Tooltip.Trigger>
 			{#snippet child({ props })}

package/dist/components/ui/button/button.svelte.d.ts

@@ -6,6 +6,7 @@ export type ButtonProps = WithElementRef<HTMLButtonAttributes & HTMLAnchorAttrib
     variant?: ButtonVariantValue;
     size?: ButtonSizeValue;
     disabledReason?: string;
+    disabledReasonDisplay?: "tooltip" | "inline";
     restrictionClass?: string;
     restrictionStyle?: string;
 };

package/dist/components/ui/sheet/sheet.svelte

@@ -33,6 +33,7 @@
 <script lang="ts">
 /* eslint-disable svelte/no-unused-svelte-ignore */
 	import { tick } from "svelte";
+	import { Portal } from "bits-ui";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
@@ -159,6 +160,7 @@
 <svelte:document onkeydown={handleKeydown} />
 
 {#if open}
+	<Portal>
 	<!-- Overlay -->
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
@@ -191,4 +193,5 @@
 			<span class="svadmin-sr-only">{closeLabel}</span>
 		</button>
 	</div>
+	</Portal>
 {/if}

package/dist/default-theme.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeConfig } from '@svadmin/core';
+/** UI 默认值不改变 headless core 的主题归属规则，也不覆盖已保存的配色。 */
+export declare function resolveAdminThemeConfig(config?: ThemeConfig): ThemeConfig;

package/dist/default-theme.js

@@ -0,0 +1,4 @@
+/** UI 默认值不改变 headless core 的主题归属规则，也不覆盖已保存的配色。 */
+export function resolveAdminThemeConfig(config) {
+    return { ...config, layoutPreset: config?.layoutPreset ?? 'clean-flat' };
+}

package/dist/index.d.ts

@@ -98,6 +98,7 @@ export { default as ApprovalActionCard } from './components/ApprovalActionCard.s
 export type { ApprovalStatus } from './components/ApprovalActionCard.svelte';
 export { default as ApprovalCenter } from './components/ApprovalCenter.svelte';
 export { default as DashboardView } from './components/DashboardView.svelte';
+export { default as ResourceOverview } from './components/ResourceOverview.svelte';
 export { default as StepForm } from './components/StepForm.svelte';
 export type { FormStep } from './components/StepForm.svelte';
 export { default as ModalForm } from './components/ModalForm.svelte';
@@ -271,6 +272,8 @@ export { default as UserCardsNFTPage } from './components/network/UserCardsNFTPa
 export { default as TeamCrewTablePage } from './components/network/TeamCrewTablePage.svelte';
 export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
+export { default as DashboardPage } from './components/content/DashboardPage.svelte';
+export { default as PageSection } from './components/content/PageSection.svelte';
 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';

package/dist/index.js

@@ -82,6 +82,7 @@ export { default as SensitiveDataMask } from './components/SensitiveDataMask.sve
 export { default as ApprovalActionCard } from './components/ApprovalActionCard.svelte';
 export { default as ApprovalCenter } from './components/ApprovalCenter.svelte';
 export { default as DashboardView } from './components/DashboardView.svelte';
+export { default as ResourceOverview } from './components/ResourceOverview.svelte';
 export { default as StepForm } from './components/StepForm.svelte';
 export { default as ModalForm } from './components/ModalForm.svelte';
 export { default as DrawerForm } from './components/DrawerForm.svelte';
@@ -241,6 +242,8 @@ export { default as TeamCrewTablePage } from './components/network/TeamCrewTable
 export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';
 // Admin UI content page and domain primitives
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
+export { default as DashboardPage } from './components/content/DashboardPage.svelte';
+export { default as PageSection } from './components/content/PageSection.svelte';
 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';

package/dist/page-chrome.css

@@ -106,7 +106,7 @@
   .svadmin-filter-toolbar__search-icon {
     position: absolute;
     top: 50%;
-    left: 0.75rem;
+    inset-inline-start: 0.75rem;
     width: var(--svadmin-filter-search-icon-size);
     height: var(--svadmin-filter-search-icon-size);
     color: var(--muted-foreground);
@@ -122,7 +122,7 @@
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
     position: absolute;
     top: 50%;
-    right: 0.25rem;
+    inset-inline-end: 0.25rem;
     transform: translateY(-50%);
   }
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
@@ -144,14 +144,14 @@
   .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
     width: 0.75rem;
     height: 0.75rem;
-    margin-left: 0.125rem;
+    margin-inline-start: 0.125rem;
     color: var(--muted-foreground);
   }
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
     height: 1rem;
     min-height: 1rem;
     min-width: 1rem;
-    margin-left: 0.125rem;
+    margin-inline-start: 0.125rem;
     padding: 0 0.25rem;
     font-size: 0.625rem;
     font-weight: 600;

package/package.json

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