@svadmin/ui 0.76.0 → 0.78.0

package/dist/component-registry.js

@@ -22,6 +22,7 @@ const registryEntries = [
             description: { kind: "string" },
             pageId: { kind: "string" },
             width: variant("contentPageRecipe", "width"),
+            density: variant("contentPageRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { children: { kind: "snippet", required: true }, actions: { kind: "snippet" } },
@@ -37,6 +38,7 @@ const registryEntries = [
             eyebrow: { kind: "string" },
             description: { kind: "string" },
             breadcrumbs: { kind: "string[]" },
+            density: variant("contentHeaderRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { actions: { kind: "snippet" } },

package/dist/components/AboutSettings.svelte

@@ -4,12 +4,13 @@
   import { Badge } from './ui/badge/index.js';
   import DescriptionList from './content/DescriptionList.svelte';
   import SettingsGroup from './content/SettingsGroup.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
   const resources = $derived(adminContext.resources);
   const providerNames = $derived(adminContext.getDataProviderNames());
-  let { version: suppliedVersion }: { version?: string } = $props();
+  let { version: suppliedVersion, headingLevel = 'h1' }: { version?: string; headingLevel?: 'h1' | 'h2' } = $props();
   const buildVersion = '__SVADMIN_VERSION__';
   const version = $derived(suppliedVersion ?? (
     buildVersion.startsWith('__')
@@ -19,8 +20,8 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.about')}</h2></div>
-  <SettingsGroup title="svadmin" description={i18n.t('settings.currentEnvironment')} bodyClass="space-y-6">
+  <ContentPageHeader title={i18n.t('settings.about')} {headingLevel} />
+  <SettingsGroup title="svadmin" description={i18n.t('settings.currentEnvironment')} bodyClass="space-y-6" headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <DescriptionList columns={2} items={[
       { label: i18n.t('settings.version'), value: version },
       { label: i18n.t('settings.language'), value: i18n.locale },

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

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     version?: string;
+    headingLevel?: 'h1' | 'h2';
 };
 declare const AboutSettings: import("svelte").Component<$$ComponentProps, {}, "">;
 type AboutSettings = ReturnType<typeof AboutSettings>;

package/dist/components/AdminApp.svelte

@@ -62,6 +62,10 @@
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout, { type LayoutAIAssistantProps } from './Layout.svelte';
   import AutoTable from './LazyAutoTable.svelte';
+  import ResourceOverview from './ResourceOverview.svelte';
+  import DataState from './content/DataState.svelte';
+  import { parseContractRouteId } from '@svadmin/core/schema';
+  import { resolveAdminThemeConfig } from '../default-theme.js';
   import AutoForm from './LazyAutoForm.svelte';
   import ShowPage from './LazyShowPage.svelte';
   import Toast from './Toast.svelte';
@@ -270,11 +274,13 @@
   });
 
   let themeOwner = $state.raw<ReturnType<typeof registerThemeOwner>>(undefined);
+  const resolvedThemeConfig = $derived(userThemeConfig === undefined ? undefined : resolveAdminThemeConfig(userThemeConfig));
 
   onMount(() => {
     themeOwner = registerThemeOwner(definedOptions({
       defaultTheme,
-      themeConfig: userThemeConfig,
+      themeConfig: resolvedThemeConfig,
+      fallbackThemeConfig: resolveAdminThemeConfig(),
     }));
 
     return () => {
@@ -287,7 +293,8 @@
     const owner = themeOwner;
     const ownerOptions = definedOptions({
       defaultTheme,
-      themeConfig: userThemeConfig,
+      themeConfig: resolvedThemeConfig,
+      fallbackThemeConfig: resolveAdminThemeConfig(),
     });
     untrack(() => updateThemeOwner(owner, ownerOptions));
   });
@@ -364,6 +371,15 @@
   const renderedRoute = $derived(route);
   const renderedParams = $derived(params);
   const renderedResourceName = $derived(renderedParams['resource']);
+  const renderedRecord = $derived.by(() => {
+    const id = renderedParams['id'];
+    const contract = resources.find(resource => resource.name === renderedResourceName)?.contract;
+    try {
+      return { id: id === undefined || !contract ? id : parseContractRouteId(contract, id), invalid: false };
+    } catch {
+      return { id: undefined, invalid: true };
+    }
+  });
   const renderedHasRouteResource = $derived(renderedResourceName !== undefined && resourceNames.has(renderedResourceName));
   const renderedResourcePages = $derived(renderedParams['resource'] ? resourcePages?.[renderedParams['resource']] : undefined);
   const documentTitle = $derived.by(() => {
@@ -616,10 +632,7 @@
         {#if dashboard}
           {@render dashboard()}
         {:else}
-          <div class="svadmin-u-3e7ce58d64fa">
-            <h1 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{translation.t('common.welcome', { title })}</h1>
-            <p class="svadmin-u-bfa603190748">{translation.t('common.dashboardHint')}</p>
-          </div>
+          <ResourceOverview />
         {/if}
       {:else if (renderedRoute === '/:resource' || renderedRoute === '/:parent/:parentId/:resource') && renderedHasRouteResource && renderedResourceName !== undefined}
         {#key renderedParams['resource']}
@@ -635,25 +648,27 @@
             <Comp resourceName={renderedResourceName} mode="create" />
           </ResourceAccessGuard>
         {/key}
-      {:else if (renderedRoute === '/:resource/edit/:id' || renderedRoute === '/:resource/:id/edit' || renderedRoute === '/:parent/:parentId/:resource/edit/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedParams['id'] !== undefined}
+      {:else if renderedHasRouteResource && renderedRecord.invalid}
+        <DataState state="error" title={translation.t('common.operationFailed')} />
+      {:else if (renderedRoute === '/:resource/edit/:id' || renderedRoute === '/:resource/:id/edit' || renderedRoute === '/:parent/:parentId/:resource/edit/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedRecord.id !== undefined}
         {#key `${renderedParams['resource']}-${renderedParams['id']}`}
           {@const Comp = renderedResourcePages?.edit ?? mergedComponents.AutoForm}
-          <ResourceAccessGuard resourceName={renderedResourceName} action="edit" {...definedOptions({ "id": renderedParams['id'] })}>
-            <Comp resourceName={renderedResourceName} mode="edit" {...definedOptions({ "id": renderedParams['id'] })} />
+          <ResourceAccessGuard resourceName={renderedResourceName} action="edit" id={renderedRecord.id}>
+            <Comp resourceName={renderedResourceName} mode="edit" id={renderedRecord.id} />
           </ResourceAccessGuard>
         {/key}
-      {:else if (renderedRoute === '/:resource/show/:id' || renderedRoute === '/:resource/:id' || renderedRoute === '/:parent/:parentId/:resource/show/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedParams['id'] !== undefined}
+      {:else if (renderedRoute === '/:resource/show/:id' || renderedRoute === '/:resource/:id' || renderedRoute === '/:parent/:parentId/:resource/show/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedRecord.id !== undefined}
         {#key `${renderedParams['resource']}-${renderedParams['id']}`}
           {@const Comp = renderedResourcePages?.show ?? mergedComponents.ShowPage}
-          <ResourceAccessGuard resourceName={renderedResourceName} action="show" {...definedOptions({ "id": renderedParams['id'] })}>
-            <Comp resourceName={renderedResourceName} id={renderedParams['id']} />
+          <ResourceAccessGuard resourceName={renderedResourceName} action="show" id={renderedRecord.id}>
+            <Comp resourceName={renderedResourceName} id={renderedRecord.id} />
           </ResourceAccessGuard>
         {/key}
-      {:else if (renderedRoute === '/:resource/clone/:id' || renderedRoute === '/:parent/:parentId/:resource/clone/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedParams['id'] !== undefined}
+      {:else if (renderedRoute === '/:resource/clone/:id' || renderedRoute === '/:parent/:parentId/:resource/clone/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedRecord.id !== undefined}
         {#key `${renderedParams['resource']}-clone-${renderedParams['id']}`}
           {@const Comp = renderedResourcePages?.clone ?? mergedComponents.AutoForm}
-          <ResourceAccessGuard resourceName={renderedResourceName} action="create" {...definedOptions({ "id": renderedParams['id'] })} requireSourceRead>
-            <Comp resourceName={renderedResourceName} mode="clone" {...definedOptions({ "id": renderedParams['id'] })} />
+          <ResourceAccessGuard resourceName={renderedResourceName} action="create" id={renderedRecord.id} requireSourceRead>
+            <Comp resourceName={renderedResourceName} mode="clone" id={renderedRecord.id} />
           </ResourceAccessGuard>
         {/key}
       {:else}

package/dist/components/ApiSettings.svelte

@@ -16,6 +16,7 @@
   import WorkspaceLayout from './content/WorkspaceLayout.svelte';
 
   const i18n = useTranslation();
+  const controlId = $props.id();
   const adminContext = captureAdminContext();
   const credentialProvider = $derived(adminContext.credentialProvider);
   const isZh = $derived(i18n.locale === 'zh-CN');
@@ -221,14 +222,50 @@
           {/if}
         </SettingsGroup>
         <SettingsGroup title={i18n.t('api.webhooks')} description={i18n.t('api.webhooksDesc')} bodyClass="space-y-5">
-          <form class="svadmin-u-f3c543ad5fe9 svadmin-u-7e0b7cdf1a94 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff" onsubmit={handleAddWebhook}><div class="svadmin-u-6f7e013d6499"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="svadmin-u-6f7e013d6499 svadmin-u-eea04c60c0ca"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="svadmin-u-6f7e013d6499"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-b29d8adbad2e"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="svadmin-u-60fbb7713999 svadmin-u-6f27f4f79e55"><Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="svadmin-u-f7b5fa971871" />{i18n.t('api.addWebhook')}</Button></div></form>
+          <form class="svadmin-u-f3c543ad5fe9 svadmin-u-7e0b7cdf1a94 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff" onsubmit={handleAddWebhook}>
+            <div class="svadmin-u-6f7e013d6499">
+              <Label for={`${controlId}-webhook-name`}>{i18n.t('api.webhookName')}</Label>
+              <Input id={`${controlId}-webhook-name`} bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} />
+            </div>
+            <div class="svadmin-u-6f7e013d6499 svadmin-u-eea04c60c0ca">
+              <Label for={`${controlId}-webhook-url`}>{i18n.t('api.webhookUrl')}</Label>
+              <Input id={`${controlId}-webhook-url`} type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} />
+            </div>
+            <div class="svadmin-u-6f7e013d6499">
+              <Label for={`${controlId}-webhook-event`}>{i18n.t('api.eventType')}</Label>
+              <select id={`${controlId}-webhook-event`} bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-b29d8adbad2e">
+                <option value="resource.created">resource.created</option>
+                <option value="resource.updated">resource.updated</option>
+                <option value="resource.deleted">resource.deleted</option>
+                <option value="auth.login">auth.login</option>
+              </select>
+            </div>
+            <div class="svadmin-u-60fbb7713999 svadmin-u-6f27f4f79e55">
+              <Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="svadmin-u-f7b5fa971871" />{i18n.t('api.addWebhook')}</Button>
+            </div>
+          </form>
           {#if webhooks.length === 0}<DataState state="empty" title={i18n.t('api.noWebhooks')} description={credentialProvider ? i18n.t('api.webhooksDesc') : (isZh ? '配置 CredentialProvider 后可管理真实 Webhook。' : 'Configure CredentialProvider to manage real webhooks.')} />{:else}<div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-b950dda299d3 svadmin-u-18049387f0af">{#each webhooks as hook (hook.id)}<div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-cb11fec3bb46 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"><div class="svadmin-u-7e0b7cdf1a94"><p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{hook.name}</p><p class="svadmin-u-f283ea9bea0e svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-bfa603190748">{hook.url}</p></div><div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-1f51d781e606"><span class="svadmin-u-07389a777c1f svadmin-u-2ef11f1cb219 svadmin-u-d5eab218aa34 svadmin-u-660d2effb880 svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-bfa603190748">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="svadmin-u-f7b5fa971871" /></Button></div></div>{/each}</div>{/if}
         </SettingsGroup>
       </div>
     {/snippet}
     {#snippet secondary()}
       <SettingsGroup title={i18n.t('api.generateTitle')} description={i18n.t('api.generateDesc')}>
-        <form onsubmit={handleGenerateKey} class="svadmin-u-b43b4c086d9a"><div class="svadmin-u-6f7e013d6499"><Label for="api-key-name">{i18n.t('api.keyName')}</Label><Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} /></div><fieldset class="svadmin-u-6ed543e2fbbb" disabled={!credentialProvider || submitting}><legend class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('api.permissions')}</legend>{#each Object.keys(newKeyPermissions) as permission (permission)}<div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} /><Label for={`perm-${permission}`} class="svadmin-u-34516836730d svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6">{permission}</Label></div>{/each}</fieldset><Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button></form>
+        <form onsubmit={handleGenerateKey} class="svadmin-u-b43b4c086d9a">
+          <div class="svadmin-u-6f7e013d6499">
+            <Label for={`${controlId}-api-key-name`}>{i18n.t('api.keyName')}</Label>
+            <Input id={`${controlId}-api-key-name`} placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} />
+          </div>
+          <fieldset class="svadmin-u-6ed543e2fbbb" disabled={!credentialProvider || submitting}>
+            <legend class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('api.permissions')}</legend>
+            {#each Object.keys(newKeyPermissions) as permission (permission)}
+              <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+                <Checkbox id={`${controlId}-perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} />
+                <Label for={`${controlId}-perm-${permission}`} class="svadmin-u-34516836730d svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6">{permission}</Label>
+              </div>
+            {/each}
+          </fieldset>
+          <Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button>
+        </form>
       </SettingsGroup>
     {/snippet}
   </WorkspaceLayout>

package/dist/components/AppearanceSettings.svelte

@@ -4,7 +4,10 @@
   import { Check, Monitor, Moon, Sun } from '@lucide/svelte';
   import SettingsGroup from './content/SettingsGroup.svelte';
   import SettingsFieldRow from './content/SettingsFieldRow.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
+  let { headingLevel = 'h1' }: { headingLevel?: 'h1' | 'h2' } = $props();
+  const controlId = $props.id();
   const i18n = useTranslation();
   const themeOptions = [
     { value: 'light' as const, icon: Sun, label: 'settings.light' },
@@ -17,18 +20,20 @@
   const availableLocales = i18n.getAvailableLocales();
   const presets = getColorPresets();
   const DENSITY_KEY = 'svadmin-sidebar-density';
-  let density = $state<'compact' | 'standard'>((typeof window !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard');
+  const storedDensity = typeof window !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null;
+  let density = $state<'compact' | 'standard'>(storedDensity === 'compact' ? 'compact' : 'standard');
   const PAGE_SIZE_KEY = 'svadmin-default-page-size';
   const pageSizeOptions = [10, 20, 50];
-  let pageSize = $state(typeof window !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10);
+  const storedPageSize = typeof window !== 'undefined' ? Number(localStorage.getItem(PAGE_SIZE_KEY) ?? '10') : 10;
+  let pageSize = $state(pageSizeOptions.includes(storedPageSize) ? storedPageSize : 10);
   const localeNames: Record<string, string> = { 'zh-CN': '中文（简体）', en: 'English', ja: '日本語', ko: '한국어' };
   function setDensity(value: 'compact' | 'standard') { density = value; if (typeof window !== 'undefined') { localStorage.setItem(DENSITY_KEY, value); window.dispatchEvent(new CustomEvent('svadmin-density-change', { detail: value })); } }
   function setPageSize(size: number) { pageSize = size; if (typeof window !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size)); }
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.appearance')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.settingsDescription')}</p></div>
-  <SettingsGroup title={i18n.t('settings.themeMode')}>
+  <ContentPageHeader title={i18n.t('settings.appearance')} description={i18n.t('settings.settingsDescription')} {headingLevel} />
+  <SettingsGroup title={i18n.t('settings.themeMode')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-f3c543ad5fe9 svadmin-u-be2e831be5dd svadmin-u-1004c0c3954c">
       {#each themeOptions as option (option.value)}
         {@const active = currentTheme === option.value}
@@ -40,7 +45,7 @@
       {/each}
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('settings.colorAccent')}>
+  <SettingsGroup title={i18n.t('settings.colorAccent')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-1004c0c3954c">
       {#each presets as preset (preset.name)}
         {@const active = currentColor === preset.name}
@@ -48,11 +53,32 @@
       {/each}
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('settings.interface')}>
+  <SettingsGroup title={i18n.t('settings.interface')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
-      <SettingsFieldRow label={i18n.t('settings.language')} description={localeNames[currentLocale] ?? currentLocale}>{#snippet control()}<select class="svadmin-u-e7a768f922d2 svadmin-u-3713c4c7843d svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752" value={currentLocale} onchange={(event) => i18n.setLocale((event.target as HTMLSelectElement).value)}>{#each availableLocales as locale (locale)}<option value={locale}>{localeNames[locale] ?? locale}</option>{/each}</select>{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('settings.sidebarDensity')}>{#snippet control()}<div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22"><button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'compact' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('compact')}>{i18n.t('settings.compact')}</button><button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'standard' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('standard')}>{i18n.t('settings.standard')}</button></div>{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('settings.defaultPageSize')}>{#snippet control()}<div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22">{#each pageSizeOptions as size (size)}<button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-2689f3958069 {pageSize === size ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setPageSize(size)}>{size}</button>{/each}</div>{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.language')} description={localeNames[currentLocale] ?? currentLocale} controlId={`${controlId}-language`}>
+        {#snippet control()}
+          <select id={`${controlId}-language`} class="svadmin-u-e7a768f922d2 svadmin-u-3713c4c7843d svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752" value={currentLocale} onchange={(event) => i18n.setLocale((event.target as HTMLSelectElement).value)}>
+            {#each availableLocales as locale (locale)}<option value={locale}>{localeNames[locale] ?? locale}</option>{/each}
+          </select>
+        {/snippet}
+      </SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.sidebarDensity')}>
+        {#snippet control()}
+          <div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22">
+            <button type="button" aria-pressed={density === 'compact'} class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'compact' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('compact')}>{i18n.t('settings.compact')}</button>
+            <button type="button" aria-pressed={density === 'standard'} class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'standard' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('standard')}>{i18n.t('settings.standard')}</button>
+          </div>
+        {/snippet}
+      </SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.defaultPageSize')}>
+        {#snippet control()}
+          <div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22">
+            {#each pageSizeOptions as size (size)}
+              <button type="button" aria-pressed={pageSize === size} class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-2689f3958069 {pageSize === size ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setPageSize(size)}>{size}</button>
+            {/each}
+          </div>
+        {/snippet}
+      </SettingsFieldRow>
     </div>
   </SettingsGroup>
 </div>

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

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

package/dist/components/AutoTable.svelte

@@ -123,6 +123,8 @@
   // ─── Props with Snippet composability ─────────────────────────
   interface Props {
     resourceName: string;
+    /** 嵌入仪表盘的多个表格应关闭 URL 同步，避免互相覆盖筛选与分页。 */
+    syncWithLocation?: boolean;
     rendering?: ResourceRendering | undefined;
     /** 可选主体渲染器：不替换资源、权限、工具栏和持久化逻辑。 */
     gridBody?: Snippet<[AutoTableGridState]>;
@@ -170,6 +172,7 @@
 
   let {
     resourceName,
+    syncWithLocation = true,
     rendering,
     gridBody,
     selectable = true,
@@ -254,7 +257,7 @@
   }
 
   // ─── URL state + server-side state ────────────────────────────
-  const urlState = readURLState(adminContext);
+  const urlState: ReturnType<typeof readURLState> = untrack(() => syncWithLocation ? readURLState(adminContext) : {});
 
   const savedViewColumnIds = $derived(new Set([
     ...resource.fields.map((field) => field.key),
@@ -504,9 +507,8 @@
     }
     return result;
   });
-
-  // URL sync
   $effect(() => {
+    if (!syncWithLocation) return;
     writeURLState({
       page: pagination.current,
       pageSize: pagination.pageSize,
@@ -1448,7 +1450,9 @@
       && left.canDelete === right.canDelete
       && left.variables === right.variables;
   }
+  let localDetailId = $state<string | number>();
   const detailState = $derived.by(() => {
+    if (!syncWithLocation) return { id: canRead ? localDetailId : undefined, invalid: false };
     const route = parsed.params['detail'];
     if (route === undefined || !canRead) return { id: undefined, invalid: false };
     try { return { id: parseContractRouteId(binding.resource, route), invalid: false }; }
@@ -1470,6 +1474,7 @@
       rowSelection = {};
       expandedAtom.set({});
       detailOpenedInHistory = false;
+      localDetailId = undefined;
       quickEditId = undefined;
       if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
       searchDebounceTimer = undefined;
@@ -1563,14 +1568,14 @@
       await tick();
     }
   }
-
   function openDetail(id: string | number): void {
     if (!canRead || !canShow) return;
+    if (!syncWithLocation) { localDetailId = id; return; }
     detailOpenedInHistory = true;
     writeURLState({ detailId: formatContractRouteId(binding.resource, id) }, adminContext, 'push');
   }
-
   function closeDetail(): void {
+    if (!syncWithLocation) { localDetailId = undefined; return; }
     if (detailOpenedInHistory && adminContext.routerProvider) {
       detailOpenedInHistory = false;
       adminContext.routerProvider.back();
@@ -1579,7 +1584,6 @@
     detailOpenedInHistory = false;
     writeURLState({ detailId: undefined }, adminContext);
   }
-
   // ─── CSV Export ───────────────────────────────────────────────
   function exportCSV() {
     if (!canRead || !canExport || !pageRecords.ok || query.isError || query.isFetching || !pageRecords.data.length) return;

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

@@ -7,6 +7,8 @@ import { type SavedListViewProvider } from './saved-list-views.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    /** 嵌入仪表盘的多个表格应关闭 URL 同步，避免互相覆盖筛选与分页。 */
+    syncWithLocation?: boolean;
     rendering?: ResourceRendering | undefined;
     /** 可选主体渲染器：不替换资源、权限、工具栏和持久化逻辑。 */
     gridBody?: Snippet<[AutoTableGridState]>;

package/dist/components/IntegrationsSettings.svelte

@@ -6,6 +6,7 @@
   import SettingsGroup from './content/SettingsGroup.svelte';
   import SettingsFieldRow from './content/SettingsFieldRow.svelte';
   import StatusBadge from './content/StatusBadge.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
   const i18n = useTranslation();
 
@@ -18,11 +19,12 @@
   }
 
   interface Props {
+    headingLevel?: 'h1' | 'h2';
     integrations?: Integration[];
     onConnectionChange?: (id: string, connected: boolean) => void | Promise<void>;
   }
 
-  let { integrations, onConnectionChange }: Props = $props();
+  let { integrations, onConnectionChange, headingLevel = 'h1' }: Props = $props();
   const defaultIntegrations = $derived<Integration[]>([
     { id: 'source-control', name: i18n.t('integrations.sourceControl'), description: i18n.t('integrations.sourceControlDescription'), Icon: FolderGit },
     { id: 'chatops', name: 'ChatOps', description: i18n.t('integrations.chatOpsDescription'), Icon: MessageCircle },
@@ -33,8 +35,8 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.integrations')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.integrationsDescription')}</p></div>
-  <SettingsGroup title={i18n.t('settings.integrations')} description={i18n.t('integrations.addMoreHint')}>
+  <ContentPageHeader title={i18n.t('settings.integrations')} description={i18n.t('settings.integrationsDescription')} {headingLevel} />
+  <SettingsGroup title={i18n.t('settings.integrations')} description={i18n.t('integrations.addMoreHint')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
       {#each displayedIntegrations as integration (integration.id)}
         <SettingsFieldRow label={integration.name} description={integration.description}>

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

@@ -7,6 +7,7 @@ interface Integration {
     Icon: Component;
 }
 interface Props {
+    headingLevel?: 'h1' | 'h2';
     integrations?: Integration[];
     onConnectionChange?: (id: string, connected: boolean) => void | Promise<void>;
 }

package/dist/components/Layout.svelte

@@ -27,6 +27,7 @@
   import { Menu } from '@lucide/svelte';
   import { getComponentRegistry } from '../component-registry.svelte.js';
   import { Button } from './ui/button/index.js';
+  import { cn } from '../utils.js';
 
   const i18n = useTranslation();
 
@@ -34,7 +35,25 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto', aiAssistant }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto'; aiAssistant?: Snippet<[LayoutAIAssistantProps]> } = $props();
+  interface Props {
+    children: Snippet;
+    title?: string;
+    menu?: MenuItem[];
+    siteUrl?: string;
+    routeMode?: 'hash' | 'path' | 'auto';
+    aiAssistant?: Snippet<[LayoutAIAssistantProps]>;
+    class?: string;
+  }
+
+  let {
+    children,
+    title = 'Admin',
+    menu,
+    siteUrl,
+    routeMode = 'auto',
+    aiAssistant,
+    class: className = '',
+  }: Props = $props();
   const layoutId = $props.id();
   const layoutScope = `svadmin-layout-${layoutId}`;
   const mainContentId = `${layoutScope}-main`;
@@ -150,7 +169,14 @@
   ontouchend={handleTouchEnd}
 />
 {#if loading}
-  <div data-svadmin-layout-scope={layoutScope} class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1" in:fade={{ duration: 150 }}>
+  <div
+    data-svadmin-layout-scope={layoutScope}
+    data-svadmin-layout
+    data-svadmin-layout-state="loading"
+    aria-busy="true"
+    class={cn('svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1', className)}
+    in:fade={{ duration: 150 }}
+  >
     <div class="svadmin-u-99d72c7fc3e2 svadmin-u-9d60be3a6d80 svadmin-u-e2fe2012a697 svadmin-u-ac402894e356 svadmin-u-8e63407b5ceb svadmin-u-3e7ce58d64fa">
       <Skeleton class="svadmin-u-ed8a5df7b2fb svadmin-u-516b03df0b7c" />
       <div class="svadmin-u-6f7e013d6499 svadmin-u-31f2553311b6">
@@ -172,7 +198,14 @@
     <DevTools docked />
   </div>
 {:else}
-  <div data-svadmin-layout-scope={layoutScope} class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1 svadmin-u-e6f9e383a762" in:fade={{ duration: 200, delay: 50 }}>
+  <div
+    data-svadmin-layout-scope={layoutScope}
+    data-svadmin-layout
+    data-svadmin-layout-state="ready"
+    aria-busy="false"
+    class={cn('svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1 svadmin-u-e6f9e383a762', className)}
+    in:fade={{ duration: 200, delay: 50 }}
+  >
     <button
       type="button"
       data-svadmin-skip-link={mainContentId}
@@ -241,7 +274,7 @@
 
       <!-- Content area: responsive padding + centered max-width container
            so wide screens don't stretch content indefinitely (avoids sparse layouts) -->
-      <main id={mainContentId} tabindex="-1" data-svadmin-main class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-2859c861d7de svadmin-u-f0faeb26d656 svadmin-u-c9b99cd93450 svadmin-u-cc06a6575385 svadmin-u-daf5dc5fac2b svadmin-u-e86fadb84483">
+      <main id={mainContentId} tabindex="-1" data-svadmin-main data-svadmin-layout-content class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-2859c861d7de svadmin-u-f0faeb26d656 svadmin-u-c9b99cd93450 svadmin-u-cc06a6575385 svadmin-u-daf5dc5fac2b svadmin-u-e86fadb84483">
         <div class="svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 svadmin-u-9e3dc30c26a3">
           {#key getPath()}
             <!-- 路由切换立即释放旧页面，避免退出期间继续读取已失效的路由派生状态。 -->
@@ -252,7 +285,7 @@
         </div>
       </main>
 
-      <footer class="svadmin-u-60fbb7713999 svadmin-u-0cfe3fb5e434 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-77c08e015d14 svadmin-u-77a2a20e90d4 svadmin-u-b950dda299d3 svadmin-u-05faf5c801ff svadmin-u-e6f9e383a762 svadmin-u-f0faeb26d656 svadmin-u-472f43d3a27b">
+      <footer data-svadmin-layout-footer class="svadmin-u-60fbb7713999 svadmin-u-0cfe3fb5e434 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-77c08e015d14 svadmin-u-77a2a20e90d4 svadmin-u-b950dda299d3 svadmin-u-05faf5c801ff svadmin-u-e6f9e383a762 svadmin-u-f0faeb26d656 svadmin-u-472f43d3a27b">
         <DevTools docked />
         {@render aiAssistant?.({ docked: true, scope: chatScope, ownerScope: layoutScope })}
       </footer>

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

@@ -5,14 +5,15 @@ export interface LayoutAIAssistantProps {
 }
 import type { Snippet } from 'svelte';
 import type { MenuItem } from '@svadmin/core';
-type $$ComponentProps = {
+interface Props {
     children: Snippet;
     title?: string;
     menu?: MenuItem[];
     siteUrl?: string;
     routeMode?: 'hash' | 'path' | 'auto';
     aiAssistant?: Snippet<[LayoutAIAssistantProps]>;
-};
-declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
+    class?: string;
+}
+declare const Layout: import("svelte").Component<Props, {}, "">;
 type Layout = ReturnType<typeof Layout>;
 export default Layout;

package/dist/components/NotificationsSettings.svelte

@@ -20,8 +20,10 @@
   import SettingsFieldRow from './content/SettingsFieldRow.svelte';
   import DataState from './content/DataState.svelte';
   import FeedbackNotice from './content/FeedbackNotice.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
-  let { preferencesProvider }: { preferencesProvider?: NotificationPreferencesProvider } = $props();
+  let { preferencesProvider, headingLevel = 'h1' }: { preferencesProvider?: NotificationPreferencesProvider; headingLevel?: 'h1' | 'h2' } = $props();
+  const controlId = $props.id();
   const i18n = useTranslation();
   const context = captureAdminContext();
   const notification = useNotification();
@@ -72,6 +74,11 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
+  <ContentPageHeader title={i18n.t('settings.notifications')} description={i18n.t('settings.notificationsDescription')} {headingLevel}>
+    {#snippet actions()}
+      <Button disabled={!loaded || loading || saving} onclick={saveSettings}>{i18n.t('common.save')}</Button>
+    {/snippet}
+  </ContentPageHeader>
   {#if preferencesProvider?.description}
     <p role="note">{preferencesProvider.description}</p>
   {/if}
@@ -81,23 +88,22 @@
   {#if loading}<DataState state="loading" />{/if}
   {#if error}<p role="alert">{error}</p>{#if !loaded}<Button onclick={load}>{i18n.t('common.retry')}</Button>{/if}{/if}
   <fieldset disabled={!loaded || loading || saving} class="svadmin-u-b3542e058833">
-  <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a"><div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.notifications')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.notificationsDescription')}</p></div><Button onclick={saveSettings}>{i18n.t('common.save')}</Button></div>
-  <SettingsGroup title={i18n.t('notifications.emailTitle')} description={i18n.t('notifications.emailDescription')}>
+  <SettingsGroup title={i18n.t('notifications.emailTitle')} description={i18n.t('notifications.emailDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
-      <SettingsFieldRow label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityAlertsDesc')}>{#snippet control()}<Switch id="email-security" bind:checked={emailAlerts.security} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityLogsDesc')}>{#snippet control()}<Switch id="email-activity" bind:checked={emailAlerts.activity} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemAlertsDesc')}>{#snippet control()}<Switch id="email-reports" bind:checked={emailAlerts.reports} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-email-security`} label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityAlertsDesc')}>{#snippet control()}<Switch id={`${controlId}-email-security`} bind:checked={emailAlerts.security} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-email-activity`} label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityLogsDesc')}>{#snippet control()}<Switch id={`${controlId}-email-activity`} bind:checked={emailAlerts.activity} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-email-reports`} label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemAlertsDesc')}>{#snippet control()}<Switch id={`${controlId}-email-reports`} bind:checked={emailAlerts.reports} />{/snippet}</SettingsFieldRow>
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('notifications.pushTitle')} description={i18n.t('notifications.pushDescription')}>
+  <SettingsGroup title={i18n.t('notifications.pushTitle')} description={i18n.t('notifications.pushDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
-      <SettingsFieldRow label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityPushDesc')}>{#snippet control()}<Switch id="push-security" bind:checked={pushAlerts.security} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityPushDesc')}>{#snippet control()}<Switch id="push-activity" bind:checked={pushAlerts.activity} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemPushDesc')}>{#snippet control()}<Switch id="push-reports" bind:checked={pushAlerts.reports} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-push-security`} label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityPushDesc')}>{#snippet control()}<Switch id={`${controlId}-push-security`} bind:checked={pushAlerts.security} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-push-activity`} label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityPushDesc')}>{#snippet control()}<Switch id={`${controlId}-push-activity`} bind:checked={pushAlerts.activity} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-push-reports`} label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemPushDesc')}>{#snippet control()}<Switch id={`${controlId}-push-reports`} bind:checked={pushAlerts.reports} />{/snippet}</SettingsFieldRow>
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('notifications.smsTitle')} description={i18n.t('notifications.smsDescription')}>
-    <SettingsFieldRow label={i18n.t('notifications.criticalSecurity')} description={i18n.t('notifications.criticalSecurityDesc')}>{#snippet control()}<Switch id="sms-security" bind:checked={smsAlerts.security} />{/snippet}</SettingsFieldRow>
+  <SettingsGroup title={i18n.t('notifications.smsTitle')} description={i18n.t('notifications.smsDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
+    <SettingsFieldRow controlId={`${controlId}-sms-security`} label={i18n.t('notifications.criticalSecurity')} description={i18n.t('notifications.criticalSecurityDesc')}>{#snippet control()}<Switch id={`${controlId}-sms-security`} bind:checked={smsAlerts.security} />{/snippet}</SettingsFieldRow>
   </SettingsGroup>
   </fieldset>
 </div>