@svadmin/ui 0.45.0 → 0.47.1

package/dist/components/RowActions.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import { Ellipsis } from '@lucide/svelte';
+  import type { Component, Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../utils.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
+  import { Button } from './ui/button/index.js';
+
+  export type RowActionItem = {
+    label: string;
+    icon?: Component<{ class?: string }>;
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    disabled?: boolean;
+    title?: string;
+    danger?: boolean;
+    hidden?: boolean;
+  };
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    actions?: RowActionItem[];
+    maxVisible?: number;
+    moreLabel?: string;
+    children?: Snippet;
+    moreContent?: Snippet;
+  };
+
+  let {
+    actions = [],
+    maxVisible = 2,
+    moreLabel = 'More actions',
+    ref = $bindable(null),
+    class: className,
+    children,
+    moreContent,
+    ...restProps
+  }: Props = $props();
+
+  let overflowOpen = $state(false);
+  const availableActions = $derived(actions.filter((action) => !action.hidden));
+  const visibleLimit = $derived(
+    Number.isFinite(maxVisible)
+      ? Math.max(0, Math.floor(maxVisible))
+      : availableActions.length
+  );
+  const visibleActions = $derived(availableActions.slice(0, visibleLimit));
+  const overflowActions = $derived(availableActions.slice(visibleLimit));
+
+  function resolvedVariant(action: RowActionItem): RowActionItem['variant'] {
+    return action.variant ?? (action.danger ? 'destructive' : 'ghost');
+  }
+
+  function handleOverflowAction(action: RowActionItem, event: MouseEvent): void {
+    if (action.disabled) {
+      event.preventDefault();
+      return;
+    }
+    overflowOpen = false;
+    action.onclick?.(event);
+  }
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="row-actions"
+  class={cn("inline-flex items-center gap-1.5", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+
+  {#each visibleActions as action (action)}
+    {#if action.href}
+      <Button
+        variant={resolvedVariant(action)}
+        size="sm"
+        href={action.href}
+        disabled={action.disabled}
+        title={action.title || action.label}
+        class="h-8 px-2 text-xs"
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="mr-1 size-3.5" />
+        {/if}
+        {action.label}
+      </Button>
+    {:else}
+      <Button
+        variant={resolvedVariant(action)}
+        size="sm"
+        onclick={action.onclick}
+        disabled={action.disabled}
+        title={action.title || action.label}
+        class="h-8 px-2 text-xs"
+      >
+        {#if action.icon}
+          {@const Icon = action.icon}
+          <Icon class="mr-1 size-3.5" />
+        {/if}
+        {action.label}
+      </Button>
+    {/if}
+  {/each}
+
+  {#if overflowActions.length > 0 || moreContent}
+    <DropdownMenu.Root bind:open={overflowOpen}>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Button {...props} variant="ghost" size="icon-sm" title={moreLabel} aria-label={moreLabel}>
+            <Ellipsis class="size-4" />
+          </Button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end" class="min-w-[8rem]">
+        {#each overflowActions as action (action)}
+          {#if action.href}
+            <Button
+              href={action.href}
+              variant={resolvedVariant(action)}
+              size="sm"
+              disabled={action.disabled}
+              onclick={(event) => handleOverflowAction(action, event)}
+              class="h-auto w-full justify-start rounded-md px-2 py-1.5 text-sm font-normal"
+            >
+              {#if action.icon}
+                {@const Icon = action.icon}
+                <Icon class="size-3.5" />
+              {/if}
+              {action.label}
+            </Button>
+          {:else}
+            <DropdownMenu.Item
+              onclick={(event) => handleOverflowAction(action, event)}
+              disabled={action.disabled}
+              destructive={action.danger || action.variant === 'destructive'}
+            >
+              {#if action.icon}
+                {@const Icon = action.icon}
+                <Icon class="size-3.5" />
+              {/if}
+              {action.label}
+            </DropdownMenu.Item>
+          {/if}
+        {/each}
+        {#if moreContent}
+          {@render moreContent()}
+        {/if}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {/if}
+</div>

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

@@ -0,0 +1,26 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+export type RowActionItem = {
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    disabled?: boolean;
+    title?: string;
+    danger?: boolean;
+    hidden?: boolean;
+};
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    actions?: RowActionItem[];
+    maxVisible?: number;
+    moreLabel?: string;
+    children?: Snippet;
+    moreContent?: Snippet;
+};
+declare const RowActions: Component<Props, {}, "ref">;
+type RowActions = ReturnType<typeof RowActions>;
+export default RowActions;

package/dist/components/SecuritySettings.svelte

@@ -2,14 +2,15 @@
   import { useNotification } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
-  import { AlertTriangle, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
+  import { AlertTriangle, Monitor, Smartphone, Trash2 } from '@lucide/svelte';
   import type { Component } from 'svelte';
   import * as Alert from './ui/alert/index.js';
-  import * as Card from './ui/card/index.js';
   import { Button } from './ui/button/index.js';
-  import { Label } from './ui/label/index.js';
   import { Switch } from './ui/switch/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import SettingsGroup from './content/SettingsGroup.svelte';
+  import SettingsFieldRow from './content/SettingsFieldRow.svelte';
+  import DataState from './content/DataState.svelte';
 
   const i18n = useTranslation();
   const notification = useNotification();
@@ -76,41 +77,14 @@
     <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.securityDescription')}</p>
   </div>
 
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        {#if is2faEnabled}
-          <ShieldCheck class="h-5 w-5 text-green-500" />
-        {:else}
-          <ShieldAlert class="h-5 w-5 text-amber-500" />
-        {/if}
-        {i18n.t('security.twoFactorAuth')}
-      </Card.CardTitle>
-      <Card.CardDescription>{i18n.t('security.twoFactorDescription')}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="flex items-center justify-between gap-4 border-t pt-4">
-        <div class="space-y-1">
-          <Label for="two-factor" class="text-sm font-medium">{i18n.t('security.enable2fa')}</Label>
-          <p class="text-xs text-muted-foreground">
-            {is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}
-          </p>
-        </div>
-        <Switch id="two-factor" bind:checked={is2faEnabled} />
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <KeyRound class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('profile.changePassword')}
-      </Card.CardTitle>
-      <Card.CardDescription>{i18n.t('security.passwordLastChanged', { time: lastChanged })}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <form onsubmit={handlePasswordChange} class="max-w-sm space-y-4">
+  <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 id="two-factor" bind:checked={is2faEnabled} />{/snippet}
+      </SettingsFieldRow>
+  </SettingsGroup>
+
+  <SettingsGroup title={i18n.t('profile.changePassword')} description={i18n.t('security.passwordLastChanged', { time: lastChanged })}>
+      <form onsubmit={handlePasswordChange} class="max-w-lg space-y-4">
         {#if passwordErrorMessage}
           <Alert.Root variant="destructive">
             <AlertTriangle class="h-4 w-4" />
@@ -124,23 +98,10 @@
 
         <Button type="submit">{i18n.t('profile.updatePassword')}</Button>
       </form>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader class="flex flex-row items-start justify-between gap-4">
-      <div class="space-y-1">
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Shield class="h-4 w-4 text-muted-foreground" />
-          {i18n.t('security.activeSessions')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('security.sessionsDescription')}</Card.CardDescription>
-      </div>
-      {#if sessions.length > 1}
-        <Button variant="outline" size="sm" onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>
-      {/if}
-    </Card.CardHeader>
-    <Card.CardContent>
+  </SettingsGroup>
+
+  <SettingsGroup title={i18n.t('security.activeSessions')} description={i18n.t('security.sessionsDescription')}>
+    {#snippet actions()}{#if sessions.length > 1}<Button variant="outline" size="sm" onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>{/if}{/snippet}
       <div class="divide-y">
         {#each sessions as session (session.id)}
           <div class="flex items-center justify-between gap-4 py-3">
@@ -168,9 +129,8 @@
             {/if}
           </div>
         {:else}
-          <div class="py-6 text-center text-sm text-muted-foreground">{i18n.t('security.noSessions')}</div>
+          <DataState state="empty" title={i18n.t('security.noSessions')} />
         {/each}
       </div>
-    </Card.CardContent>
-  </Card.Card>
+  </SettingsGroup>
 </div>

package/dist/components/SettingsPage.svelte

@@ -115,6 +115,16 @@
     return content ? alias : "profile";
   });
 
+  const contentWidth = $derived(
+    activeKey === 'roles' || activeKey === 'audit'
+      ? 'max-w-[92rem]'
+      : activeKey === 'api'
+        ? 'max-w-[78rem]'
+        : activeKey === 'integrations'
+          ? 'max-w-[64rem]'
+          : 'max-w-3xl',
+  );
+
   // Default redirect to profile
   $effect(() => {
     if (getRoute() === "/settings") {
@@ -151,7 +161,7 @@
       </div>
       {#each resolvedSections as section, _i (_i)}
         <div>
-          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+          <h3 class="px-3 mb-1 text-xs font-medium text-muted-foreground">
             {i18n.t(section.group)}
           </h3>
           <div class="space-y-0.5">
@@ -175,7 +185,7 @@
   </nav>
 
   <!-- Right content area -->
-  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' || activeKey === 'integrations' || activeKey === 'api' ? 'max-w-6xl' : 'max-w-3xl'}">
+  <div class="min-w-0 w-full flex-1 p-6 lg:p-8 {contentWidth}">
     {#if activeKey === "profile"}
       {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
     {:else if activeKey === "appearance"}

package/dist/components/SvadminLogo.svelte

@@ -10,7 +10,7 @@
 
 <span
   aria-hidden="true"
-  class="inline-block shrink-0 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shadow-sm {onDark ? 'ring-1 ring-white/35' : ''}"
+  class="inline-block shrink-0 rounded-lg bg-primary shadow-sm {onDark ? 'ring-1 ring-white/35' : ''}"
   style:width={`${size}px`}
   style:height={`${size}px`}
 ></span>

package/dist/components/UpdatePasswordPage.svelte

@@ -4,8 +4,8 @@
 
   import { Button } from './ui/button/index.js';
   import * as Alert from './ui/alert/index.js';
+  import AuthPageShell from './AuthPageShell.svelte';
   import PasswordInput from './PasswordInput.svelte';
-  import SvadminLogo from './SvadminLogo.svelte';
   import { Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
@@ -35,53 +35,7 @@
   }
 </script>
 
-<div class="min-h-screen flex flex-col lg:flex-row">
-  <!-- Left brand panel -->
-  <div class="hidden lg:flex lg:w-[480px] xl:w-[520px] relative overflow-hidden bg-gradient-to-br from-primary/90 via-primary to-primary/80 shrink-0">
-    <div class="absolute inset-0">
-      <div class="absolute top-[12%] left-[8%] w-28 h-28 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[55%] left-[55%] w-40 h-40 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
-      <div class="absolute bottom-[15%] left-[15%] w-24 h-24 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[30%] right-[10%] w-16 h-16 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
-      <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
-    </div>
-
-    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
-      <div class="flex items-center gap-3">
-        <SvadminLogo size={36} onDark />
-        <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-4">
-        <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
-          {i18n.t('auth.resetPassword')}
-        </h2>
-        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
-          {i18n.t('auth.resetPasswordDescription')}
-        </p>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <div class="h-1 w-8 rounded-full bg-white/30"></div>
-        <div class="h-1 w-4 rounded-full bg-white/15"></div>
-        <div class="h-1 w-2 rounded-full bg-white/10"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Right form panel -->
-  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
-    <div class="w-full max-w-[400px]">
-      <div class="mb-8 flex items-center gap-3 lg:hidden">
-        <SvadminLogo size={36} />
-        <span class="text-lg font-semibold tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-1 mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight">{i18n.t('auth.resetPassword')}</h1>
-        <p class="text-sm text-muted-foreground">{i18n.t('auth.resetPasswordDescription')}</p>
-      </div>
-
+<AuthPageShell brand={title} title={i18n.t('auth.resetPassword')} description={i18n.t('auth.resetPasswordDescription')}>
       <form onsubmit={handleSubmit} class="space-y-5">
         {#if error}
           <Alert.Root variant="destructive">
@@ -118,10 +72,4 @@
           </Button>
         </div>
       </form>
-
-      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
-        Powered by {title}
-      </p>
-    </div>
-  </div>
-</div>
+</AuthPageShell>

package/dist/components/account/CompanyProfilePage.svelte

@@ -4,11 +4,14 @@
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
-  import * as Card from '../ui/card/index.js';
+  import { Textarea } from '../ui/textarea/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import DescriptionList from '../content/DescriptionList.svelte';
   import MemberList from '../content/MemberList.svelte';
+  import SectionHeader from '../content/SectionHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
+  import WorkspaceLayout from '../content/WorkspaceLayout.svelte';
   import type { MemberSummary } from '../content/MemberList.svelte';
   const i18n = useTranslation();
   let companyName = $state('Acme Corporation');
@@ -25,11 +28,20 @@
   async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
 </script>
 
+{#snippet headerActions()}
+  <Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t('common.save')}</Button>
+{/snippet}
+
+{#snippet primary()}
+  <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.companyProfileDescription')} bodyClass="space-y-4"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><Textarea id="company-description" bind:value={description} rows={4} /></div></SettingsGroup>
+{/snippet}
+
+{#snippet secondary()}
+  <SettingsGroup title={i18n.t('profile.companyName')} description={industry} bodyClass="space-y-4"><p class="text-lg font-semibold text-foreground">{companyName}</p><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></SettingsGroup>
+{/snippet}
+
 <ContentPageShell pageId="account-company-profile" width="wide">
-  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t("account.companyProfile")} description={i18n.t("account.companyProfileDescription")} /><Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t("common.save")}</Button></div>
-  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-    <Card.Card><Card.CardContent class="space-y-4 p-5"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><textarea id="company-description" bind:value={description} rows={4} class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"></textarea></div></Card.CardContent></Card.Card>
-    <Card.Card><Card.CardContent class="space-y-4 p-5"><div><p class="text-xs font-medium text-muted-foreground">{i18n.t('profile.companyName')}</p><p class="mt-1 text-lg font-semibold text-foreground">{companyName}</p><p class="text-sm text-muted-foreground">{industry}</p></div><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></Card.CardContent></Card.Card>
-  </div>
-  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('profileSections.members')}</h2><MemberList {members} /></section>
+  <ContentPageHeader title={i18n.t('account.companyProfile')} description={i18n.t('account.companyProfileDescription')} actions={headerActions} />
+  <WorkspaceLayout {primary} {secondary} secondaryWidth="20rem" />
+  <section class="space-y-3"><SectionHeader title={i18n.t('profileSections.members')} /><MemberList {members} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
 </ContentPageShell>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -4,9 +4,11 @@
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import * as Card from '../ui/card/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import SectionHeader from '../content/SectionHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
+  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   import IntegrationCard from '../content/IntegrationCard.svelte';
   import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
   import SecurityEventTable from '../content/SecurityEventTable.svelte';
@@ -18,9 +20,28 @@
   const events: SecurityEvent[] = [{ id: '1', event: 'SSO policy updated', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Today, 09:12', severity: 'info' }, { id: '2', event: 'Audit log retention changed', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Yesterday, 16:40', severity: 'warning' }];
 </script>
 
+{#snippet auditControl()}
+  <Switch bind:checked={auditLogging} aria-label={i18n.t('account.auditLogging')} />
+{/snippet}
+
+{#snippet ssoControl()}
+  <Switch bind:checked={ssoEnabled} aria-label={i18n.t('account.enableSso')} />
+{/snippet}
+
 <ContentPageShell pageId="account-settings-enterprise" width="wide">
   <ContentPageHeader title={i18n.t('account.settingsEnterprise')} description={i18n.t('account.settingsEnterpriseDescription')} />
-  <div class="grid gap-4 lg:grid-cols-2"><Card.Card><Card.CardContent class="space-y-4 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.securityPolicy')}</h2><p class="mt-1 text-sm text-muted-foreground">Set organization-wide controls for authentication and sessions.</p></div><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.auditLogging')}</span><Switch bind:checked={auditLogging} /></div><Button size="sm">{i18n.t('common.save')}</Button></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.singleSignOn')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.ssoDescription')}</p></div><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.enableSso')}</span><Switch bind:checked={ssoEnabled} /></div><Input value="https://idp.example.com/metadata" aria-label={i18n.t('account.ssoProvider')} /><Button variant="outline" size="sm">{i18n.t('common.test')}</Button></Card.CardContent></Card.Card></div>
-  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each identity as integration (integration.id)}<IntegrationCard {integration} />{/each}</section>
-  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.securityLog')}</h2><SecurityEventTable events={events} /></section>
+  <div class="grid items-start gap-4 lg:grid-cols-2">
+    <SettingsGroup title={i18n.t('account.securityPolicy')} description="Set organization-wide controls for authentication and sessions." bodyClass="space-y-4">
+      <div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div></div>
+      <SettingsFieldRow label={i18n.t('account.auditLogging')} description="Preserve an auditable record of organization-level changes." control={auditControl} separated />
+      <Button size="sm">{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="Require the configured identity provider for organization members." control={ssoControl} />
+      <Input value="https://idp.example.com/metadata" aria-label={i18n.t('account.ssoProvider')} />
+      <Button variant="outline" size="sm">{i18n.t('common.test')}</Button>
+    </SettingsGroup>
+  </div>
+  <section class="space-y-3"><SectionHeader title={i18n.t('account.connections')} />{#each identity as integration (integration.id)}<IntegrationCard {integration} />{/each}</section>
+  <section class="space-y-3"><SectionHeader title={i18n.t('account.securityLog')} /><SecurityEventTable events={events} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
 </ContentPageShell>

package/dist/components/account/SettingsPlainPage.svelte

@@ -4,9 +4,10 @@
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import * as Card from '../ui/card/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
+  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   const i18n = useTranslation();
   let displayName = $state('Alex Chen');
   let email = $state('alex@example.com');
@@ -16,7 +17,28 @@
   async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
 </script>
 
+{#snippet headerActions()}
+  <Button size="sm" onclick={save} disabled={saving}>{i18n.t('common.save')}</Button>
+{/snippet}
+
+{#snippet notificationControl()}
+  <Switch bind:checked={notifications} aria-label={i18n.t('settings.notifications')} />
+{/snippet}
+
+{#snippet twoFactorControl()}
+  <Switch bind:checked={twoFactor} aria-label={i18n.t('account.twoFactorAuth')} />
+{/snippet}
+
 <ContentPageShell pageId="account-settings-plain" width="narrow">
-  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('account.settingsPlain')} description={i18n.t('account.settingsPlainDescription')} /><Button size="sm" onclick={save} disabled={saving}>{i18n.t('common.save')}</Button></div>
-  <Card.Card><Card.CardContent class="space-y-5 p-5"><div class="space-y-2"><Label for="settings-name">{i18n.t('profile.name')}</Label><Input id="settings-name" bind:value={displayName} /></div><div class="space-y-2"><Label for="settings-email">Email</Label><Input id="settings-email" bind:value={email} type="email" /></div><div class="flex items-center justify-between gap-4 border-t border-border pt-4"><div><p class="text-sm font-medium text-foreground">{i18n.t('settings.notifications')}</p><p class="mt-1 text-sm text-muted-foreground">Receive account and workflow updates.</p></div><Switch bind:checked={notifications} /></div><div class="flex items-center justify-between gap-4 border-t border-border pt-4"><div><p class="text-sm font-medium text-foreground">{i18n.t('account.twoFactorAuth')}</p><p class="mt-1 text-sm text-muted-foreground">Require an additional verification code when signing in.</p></div><Switch bind:checked={twoFactor} /></div></Card.CardContent></Card.Card>
+  <ContentPageHeader title={i18n.t('account.settingsPlain')} description={i18n.t('account.settingsPlainDescription')} actions={headerActions} />
+  <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.settingsPlainDescription')} bodyClass="space-y-5">
+    <div class="grid gap-4 sm:grid-cols-2">
+      <div class="space-y-2"><Label for="settings-name">{i18n.t('profile.name')}</Label><Input id="settings-name" bind:value={displayName} /></div>
+      <div class="space-y-2"><Label for="settings-email">Email</Label><Input id="settings-email" bind:value={email} type="email" /></div>
+    </div>
+    <div>
+      <SettingsFieldRow label={i18n.t('settings.notifications')} description="Receive account and workflow updates." control={notificationControl} />
+      <SettingsFieldRow label={i18n.t('account.twoFactorAuth')} description="Require an additional verification code when signing in." control={twoFactorControl} separated />
+    </div>
+  </SettingsGroup>
 </ContentPageShell>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -3,9 +3,10 @@
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import * as Card from '../ui/card/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
+  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   const i18n = useTranslation();
   const sections = [{ id: 'profile', title: i18n.t('account.basicSettings') }, { id: 'signin', title: i18n.t('account.socialSignIn') }, { id: 'preferences', title: i18n.t('account.preferences') }, { id: 'api', title: i18n.t('account.manageApi') }];
   let active = $state('profile');
@@ -13,7 +14,35 @@
   let available = $state(true);
 </script>
 
+{#snippet visibilityControl()}
+  <Switch bind:checked={visible} aria-label={i18n.t('account.visibility')} />
+{/snippet}
+
+{#snippet availabilityControl()}
+  <Switch bind:checked={available} aria-label={i18n.t('account.availability')} />
+{/snippet}
+
 <ContentPageShell pageId="account-settings-sidebar" width="wide">
   <ContentPageHeader title={i18n.t('account.settingsSidebar')} description={i18n.t('account.settingsSidebarDescription')} />
-  <div class="grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)]"><nav class="flex gap-1 overflow-x-auto lg:flex-col">{#each sections as section (section.id)}<button type="button" class={'whitespace-nowrap rounded-md px-3 py-2 text-left text-sm ' + (active === section.id ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:text-foreground')} onclick={() => active = section.id}>{section.title}</button>{/each}</nav><div class="space-y-4">{#if active === 'profile'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.basicSettings')}</h2><Input value="Alex Chen" aria-label={i18n.t('profile.name')} /><Input value="Nebula Labs" aria-label="Company" /><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.visibility')}</span><Switch bind:checked={visible} /></div><div class="flex items-center justify-between"><span class="text-sm text-foreground">{i18n.t('account.availability')}</span><Switch bind:checked={available} /></div></Card.CardContent></Card.Card>{:else if active === 'signin'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.socialSignIn')}</h2><p class="text-sm text-muted-foreground">Connect the providers your team trusts for sign in.</p><Button variant="outline">GitHub</Button><Button variant="outline">Google</Button></Card.CardContent></Card.Card>{:else if active === 'preferences'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.preferences')}</h2><Input value="English" aria-label={i18n.t('account.language')} /><Input value="Asia/Shanghai" aria-label={i18n.t('account.timezone')} /><Input value="CNY" aria-label={i18n.t('account.currency')} /></Card.CardContent></Card.Card>{:else}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.manageApi')}</h2><Input readonly value="sv_demo_pub_9f3e********41ab" aria-label="API key" /><Button variant="outline">{i18n.t('common.copy')}</Button></Card.CardContent></Card.Card>{/if}</div></div>
+  <div class="grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)]">
+    <nav class="flex gap-1 overflow-x-auto lg:flex-col" aria-label={i18n.t('account.settingsSidebar')}>
+      {#each sections as section (section.id)}
+        <button type="button" class={'whitespace-nowrap rounded-md px-3 py-2 text-left text-sm ' + (active === section.id ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground')} aria-current={active === section.id ? 'page' : undefined} onclick={() => active = section.id}>{section.title}</button>
+      {/each}
+    </nav>
+    <div class="min-w-0">
+      {#if active === 'profile'}
+        <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.settingsPlainDescription')} bodyClass="space-y-4">
+          <div class="grid gap-4 sm:grid-cols-2"><Input value="Alex Chen" aria-label={i18n.t('profile.name')} /><Input value="Nebula Labs" aria-label="Company" /></div>
+          <div><SettingsFieldRow label={i18n.t('account.visibility')} control={visibilityControl} separated /><SettingsFieldRow label={i18n.t('account.availability')} control={availabilityControl} separated /></div>
+        </SettingsGroup>
+      {:else if active === 'signin'}
+        <SettingsGroup title={i18n.t('account.socialSignIn')} description="Connect the providers your team trusts for sign in." bodyClass="flex flex-wrap gap-2"><Button variant="outline">GitHub</Button><Button variant="outline">Google</Button></SettingsGroup>
+      {:else if active === 'preferences'}
+        <SettingsGroup title={i18n.t('account.preferences')} bodyClass="grid gap-4 sm:grid-cols-3"><Input value="English" aria-label={i18n.t('account.language')} /><Input value="Asia/Shanghai" aria-label={i18n.t('account.timezone')} /><Input value="CNY" aria-label={i18n.t('account.currency')} /></SettingsGroup>
+      {:else}
+        <SettingsGroup title={i18n.t('account.manageApi')} description="Use scoped credentials and rotate them when access changes." bodyClass="flex flex-col gap-3 sm:flex-row"><Input readonly value="sv_demo_pub_9f3e********41ab" aria-label="API key" /><Button variant="outline">{i18n.t('common.copy')}</Button></SettingsGroup>
+      {/if}
+    </div>
+  </div>
 </ContentPageShell>