@svadmin/ui 0.42.2 → 0.43.0

package/dist/components/account/TeamMembersPage.svelte

@@ -1,197 +1,28 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Copy, Link2, Send, UserPlus } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
-  import { Search, UserPlus, MoreHorizontal, Link2, Copy, Send } from '@lucide/svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import FilterToolbar from '../content/FilterToolbar.svelte';
+  import MemberList from '../content/MemberList.svelte';
+  import type { MemberSummary } from '../content/MemberList.svelte';
+  import { referenceDemoData } from '../../reference-data.js';
   const i18n = useTranslation();
-
-  interface TeamMember {
-    id: string;
-    name: string;
-    email: string;
-    role: 'Admin' | 'Editor' | 'Viewer';
-    avatar?: string;
-    department: string;
-    status: 'active' | 'invited' | 'inactive';
-    lastActive: string;
-  }
-
-  let searchQuery = $state('');
+  let query = $state('');
   let inviteEmail = $state('');
-  let inviteRole = $state('Viewer');
-  let linkCopied = $state(false);
   let inviteStatus = $state('');
-
-  function focusInvite() {
-    document.getElementById('invite-email')?.focus();
-  }
-
-  function copyInviteLink() {
-    navigator.clipboard?.writeText('https://acme.com/invite/xK7fQ2').catch(() => {});
-    linkCopied = true;
-    setTimeout(() => linkCopied = false, 2000);
-  }
-
-  let members = $state<TeamMember[]>([
-    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: 'Just now' },
-    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', department: 'Design', status: 'active', lastActive: '5 min ago' },
-    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', department: 'Marketing', status: 'invited', lastActive: 'Pending' },
-    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', department: 'Engineering', status: 'active', lastActive: '1 hour ago' },
-    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'Viewer', department: 'Sales', status: 'inactive', lastActive: '2 weeks ago' },
-    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: '10 min ago' },
-    { id: '7', name: 'James Wilson', email: 'james@acme.com', role: 'Editor', department: 'Infrastructure', status: 'active', lastActive: '30 min ago' },
-    { id: '8', name: 'Yuki Tanaka', email: 'yuki@acme.com', role: 'Editor', department: 'Engineering', status: 'invited', lastActive: 'Pending' },
-    { id: '9', name: 'Priya Nair', email: 'priya@acme.com', role: 'Viewer', department: 'Data', status: 'active', lastActive: '2 hours ago' },
-    { id: '10', name: 'Carlos Mendez', email: 'carlos@acme.com', role: 'Editor', department: 'Engineering', status: 'active', lastActive: '1 day ago' },
-    { id: '11', name: 'Hana Sato', email: 'hana@acme.com', role: 'Viewer', department: 'Design', status: 'active', lastActive: '3 hours ago' },
-    { id: '12', name: 'Oscar Lund', email: 'oscar@acme.com', role: 'Viewer', department: 'Infrastructure', status: 'inactive', lastActive: '1 month ago' },
-    { id: '13', name: 'Mia Torres', email: 'mia@acme.com', role: 'Editor', department: 'Marketing', status: 'invited', lastActive: 'Pending' },
-    { id: '14', name: 'Chen Wei', email: 'chen@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: '15 min ago' },
-  ]);
-
-  function sendInvite() {
-    const email = inviteEmail.trim();
-    if (!email) return;
-    const name = email.split('@')[0].split(/[._-]/).filter(Boolean).map(part => part[0]?.toUpperCase() + part.slice(1)).join(' ') || email;
-    members = [...members, {
-      id: `invite-${Date.now()}`,
-      name,
-      email,
-      role: inviteRole as TeamMember['role'],
-      department: 'Pending assignment',
-      status: 'invited',
-      lastActive: 'Pending',
-    }];
-    inviteStatus = email;
-    inviteEmail = '';
-  }
-
-  const filtered = $derived(
-    searchQuery
-      ? members.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
-      : members
-  );
-
-  const roleColors = {
-    'Admin': 'bg-red-500/10 text-red-600',
-    'Editor': 'bg-blue-500/10 text-blue-600',
-    'Viewer': 'bg-green-500/10 text-green-600',
-  };
-
-  const statusColors = {
-    'active': 'bg-green-500/10 text-green-600',
-    'invited': 'bg-amber-500/10 text-amber-600',
-    'inactive': 'bg-muted text-muted-foreground',
-  };
-
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-
-  function statusLabel(status: TeamMember['status']) {
-    if (status === 'active') return i18n.t('account.active');
-    if (status === 'invited') return i18n.t('account.invited');
-    return i18n.t('account.inactive');
-  }
+  let members = $state<MemberSummary[]>(referenceDemoData.members.map((member) => ({ ...member, status: member.status === 'active' ? 'success' : member.status === 'invited' ? 'warning' : 'neutral' })));
+  const filtered = $derived(query ? members.filter((member) => `${member.name} ${member.email} ${member.department}`.toLowerCase().includes(query.toLowerCase())) : members);
+  function sendInvite() { const email = inviteEmail.trim(); if (!email) return; members = [...members, { id: `invite-${Date.now()}`, name: email.split('@')[0], email, role: 'Viewer', department: 'Pending assignment', status: 'warning' }]; inviteStatus = email; inviteEmail = ''; }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.teamMembersCount', { count: members.length })}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.teamMembersDescription')}</p>
-    </div>
-    <Button size="sm" onclick={focusInvite}>
-      <UserPlus class="h-4 w-4 mr-1" />{i18n.t('account.inviteMember')}
-    </Button>
-  </div>
-
-  <div class="relative">
-    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
-  </div>
-
-  <!-- Invite people -->
-  <div class="grid gap-4 lg:grid-cols-2">
-    <Card.Card class="border-border/60">
-      <Card.CardHeader class="pb-3">
-        <Card.CardTitle class="text-base">{i18n.t('account.invitePeople')}</Card.CardTitle>
-        <Card.CardDescription>{i18n.t('account.invitePeopleDescription')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-3">
-        <div class="grid gap-3 sm:grid-cols-[1fr_140px]">
-          <div class="space-y-1.5">
-            <Label for="invite-email">Email</Label>
-            <Input id="invite-email" type="email" placeholder="name@example.com" bind:value={inviteEmail} />
-          </div>
-          <div class="space-y-1.5">
-            <Label for="invite-role">{i18n.t('account.role')}</Label>
-            <select id="invite-role" bind:value={inviteRole} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring">
-              <option>Admin</option>
-              <option>Editor</option>
-              <option>Viewer</option>
-            </select>
-          </div>
-        </div>
-        <div class="flex justify-end">
-          <Button size="sm" disabled={!inviteEmail} onclick={sendInvite}>
-            <Send class="h-3.5 w-3.5 mr-1" />{i18n.t('account.sendInvite')}
-          </Button>
-        </div>
-        {#if inviteStatus}
-          <p class="text-xs text-green-600" role="status">{i18n.t('account.invited')}: {inviteStatus}</p>
-        {/if}
-      </Card.CardContent>
-    </Card.Card>
-
-    <Card.Card class="border-border/60">
-      <Card.CardHeader class="pb-3">
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Link2 class="h-4 w-4 text-muted-foreground" />{i18n.t('account.inviteWithLink')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('account.inviteLinkHint')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-3">
-        <div class="flex items-center gap-2">
-          <Input readonly value="https://acme.com/invite/xK7fQ2" class="flex-1 font-mono text-xs" />
-          <Button size="sm" variant="outline" onclick={copyInviteLink}>
-            <Copy class="h-3.5 w-3.5 mr-1" />{linkCopied ? '✓' : ''} {i18n.t('account.copyLink')}
-          </Button>
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-  </div>
-
-  <!-- Members grid -->
-  <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-    {#each filtered as member (member.id)}
-      <Card.Card class="border-border/60 hover:border-primary/30 transition-colors">
-        <Card.CardContent class="p-4">
-          <div class="flex items-start gap-3">
-            <div class="shrink-0">
-              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold">
-                {initials(member.name)}
-              </div>
-            </div>
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2">
-                <h4 class="text-sm font-semibold text-foreground truncate">{member.name}</h4>
-              </div>
-              <p class="text-xs text-muted-foreground truncate">{member.email}</p>
-              <div class="mt-2 flex flex-wrap gap-1.5">
-                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {roleColors[member.role]}">{member.role}</span>
-                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {statusColors[member.status]}">{statusLabel(member.status)}</span>
-              </div>
-              <div class="mt-2 flex items-center justify-between">
-                <span class="text-xs text-muted-foreground">{member.department}</span>
-                <span class="text-xs text-muted-foreground">{member.lastActive}</span>
-              </div>
-            </div>
-            <Button variant="ghost" size="icon-sm" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    {/each}
-  </div>
-</div>
+<ContentPageShell pageId="account-team-members" width="wide">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t("account.teamMembers")} description={i18n.t("account.teamMembersDescription")} /><Button size="sm" onclick={() => document.getElementById("invite-email")?.focus()}><UserPlus class="size-3.5" />{i18n.t("account.inviteMember")}</Button></div>
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
+  <div class="grid gap-4 lg:grid-cols-2"><Card.Card><Card.CardContent class="space-y-3 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.invitePeople')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.invitePeopleDescription')}</p></div><div class="flex flex-col gap-2 sm:flex-row"><div class="min-w-0 flex-1 space-y-2"><Label for="invite-email">Email</Label><Input id="invite-email" bind:value={inviteEmail} type="email" placeholder="name@example.com" /></div><Button class="self-end" size="sm" disabled={!inviteEmail} onclick={sendInvite}><Send class="size-3.5" />{i18n.t('account.sendInvite')}</Button></div>{#if inviteStatus}<p class="text-xs text-success" role="status">{i18n.t('account.invited')}: {inviteStatus}</p>{/if}</Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><div class="flex items-center gap-2"><Link2 class="size-4 text-muted-foreground" /><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.inviteWithLink')}</h2></div><p class="text-sm text-muted-foreground">{i18n.t('account.inviteLinkHint')}</p><div class="flex gap-2"><Input readonly value="https://acme.com/invite/xK7fQ2" class="font-mono text-xs" /><Button variant="outline" size="sm"><Copy class="size-3.5" />{i18n.t('account.copyLink')}</Button></div></Card.CardContent></Card.Card></div>
+  <MemberList members={filtered} />
+</ContentPageShell>

package/dist/components/account/UserProfilePage.svelte

@@ -1,206 +1,29 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
-  import { Badge } from '../ui/badge/index.js';
+  import { Loader2 } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import {
-    Briefcase, Calendar, FileText, Image, FileArchive, Link2, Loader2,
-    Star, Award, Medal, Crown,
-  } from '@lucide/svelte';
-  import type { Component } from 'svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import DescriptionList from '../content/DescriptionList.svelte';
+  import FileList from '../content/FileList.svelte';
+  import IntegrationCard from '../content/IntegrationCard.svelte';
+  import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
+  import { referenceDemoData } from '../../reference-data.js';
   const i18n = useTranslation();
-
   let availableToHire = $state(true);
   let saving = $state(false);
-
-  async function handleSave() {
-    saving = true;
-    await new Promise((r) => setTimeout(r, 800));
-    saving = false;
-  }
-
-  const infoRows = [
-    { label: 'profile.name', value: 'Alex Chen' },
-    { label: 'account.phone', value: '+86 138 **** 9527' },
-    { label: 'account.dateOfBirth', value: '1995-04-18' },
-    { label: 'account.address', value: 'Shanghai, CN' },
-  ];
-
-  const badges: { name: string; Icon: Component; tone: string }[] = [
-    { name: 'Top Contributor', Icon: Medal, tone: 'bg-amber-500/10 text-amber-600' },
-    { name: 'Early Adopter', Icon: Star, tone: 'bg-blue-500/10 text-blue-600' },
-    { name: 'Community Mentor', Icon: Award, tone: 'bg-violet-500/10 text-violet-600' },
-    { name: 'Launch Partner', Icon: Crown, tone: 'bg-emerald-500/10 text-emerald-600' },
-  ];
-
-  interface Connection {
-    id: string;
-    name: string;
-    detail: string;
-    connected: boolean;
-  }
-  let connections = $state<Connection[]>([
-    { id: 'repo', name: 'Source Control', detail: 'alexchen', connected: true },
-    { id: 'chat', name: 'ChatOps', detail: '@alex.chen', connected: true },
-    { id: 'drive', name: 'Cloud Drive', detail: 'alex@example.com', connected: false },
-  ]);
-
-  const files: { name: string; size: string; Icon: Component; tone: string }[] = [
-    { name: 'portfolio-2026.pdf', size: '2.1 MB', Icon: FileText, tone: 'bg-red-500/10 text-red-600' },
-    { name: 'avatar-pack.zip', size: '8.4 MB', Icon: FileArchive, tone: 'bg-amber-500/10 text-amber-600' },
-    { name: 'cover-photo.png', size: '1.2 MB', Icon: Image, tone: 'bg-pink-500/10 text-pink-600' },
-  ];
-
-  const calendars = [
-    { name: 'Work Calendar', detail: 'alex@nebulalabs.io', primary: true },
-    { name: 'Personal Calendar', detail: 'alex@example.com', primary: false },
-  ];
-
-  function toggleConnection(id: string, connected: boolean) {
-    connections = connections.map((c) => (c.id === id ? { ...c, connected } : c));
-  }
+  async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
+  let integrations = $state<IntegrationSummary[]>(referenceDemoData.integrations);
+  const files = [{ id: '1', name: 'portfolio-2026.pdf', size: '2.1 MB', type: 'PDF' }, { id: '2', name: 'avatar-pack.zip', size: '8.4 MB', type: 'Archive' }, { id: '3', name: 'cover-photo.png', size: '1.2 MB', type: 'Image' }];
+  function toggle(id: string) { integrations = integrations.map((item) => item.id === id ? { ...item, connected: !item.connected } : item); }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.userProfile')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.userProfileDescription')}</p>
-    </div>
-    <Button onclick={handleSave} disabled={saving} size="sm">
-      {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-      {i18n.t('common.save')}
-    </Button>
-  </div>
-
-  <div class="grid gap-4 lg:grid-cols-3">
-    <div class="space-y-4 lg:col-span-2">
-      <!-- Personal Info -->
-      <Card.Card class="border-border/60">
-        <Card.CardHeader class="pb-3">
-          <Card.CardTitle class="text-base">{i18n.t('account.personalInfo')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="p-0">
-          <div class="divide-y">
-            {#each infoRows as row (row.label)}
-              <div class="flex items-center justify-between px-6 py-3 text-sm">
-                <span class="text-muted-foreground">{i18n.t(row.label)}</span>
-                <span class="font-medium text-foreground">{row.value}</span>
-              </div>
-            {/each}
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Work -->
-      <Card.Card class="border-border/60">
-        <Card.CardHeader class="pb-3">
-          <Card.CardTitle class="flex items-center gap-2 text-base">
-            <Briefcase class="h-4 w-4 text-muted-foreground" />{i18n.t('account.work')}
-          </Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <p class="text-sm font-medium text-foreground">{i18n.t('account.availableToHire')}</p>
-              <p class="text-xs text-muted-foreground">{i18n.t('account.availableNow')}</p>
-            </div>
-            <Switch bind:checked={availableToHire} />
-          </div>
-          <div class="flex flex-wrap gap-1.5">
-            {#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}
-              <Badge variant="secondary" class="text-xs">{skill}</Badge>
-            {/each}
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Connections -->
-      <Card.Card class="border-border/60">
-        <Card.CardHeader class="pb-3">
-          <Card.CardTitle class="flex items-center gap-2 text-base">
-            <Link2 class="h-4 w-4 text-muted-foreground" />{i18n.t('account.connections')}
-          </Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="p-0">
-          <div class="divide-y">
-            {#each connections as conn (conn.id)}
-              <div class="flex items-center justify-between gap-4 px-6 py-3">
-                <div class="min-w-0">
-                  <p class="text-sm font-medium text-foreground">{conn.name}</p>
-                  <p class="truncate text-xs text-muted-foreground">{conn.detail}</p>
-                </div>
-                <Switch checked={conn.connected} onCheckedChange={(checked) => toggleConnection(conn.id, checked)} />
-              </div>
-            {/each}
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    </div>
-
-    <div class="space-y-4">
-      <!-- Badges -->
-      <Card.Card class="border-border/60">
-        <Card.CardHeader class="pb-3">
-          <Card.CardTitle class="text-base">{i18n.t('account.badges')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid grid-cols-2 gap-2">
-            {#each badges as badge (badge.name)}
-              <div class="flex items-center gap-2 rounded-lg border border-border/60 p-2.5">
-                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg {badge.tone}">
-                  <badge.Icon class="h-4 w-4" />
-                </div>
-                <span class="text-xs font-medium text-foreground">{badge.name}</span>
-              </div>
-            {/each}
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Calendar Accounts -->
-      <Card.Card class="border-border/60">
-        <Card.CardHeader class="pb-3">
-          <Card.CardTitle class="flex items-center gap-2 text-base">
-            <Calendar class="h-4 w-4 text-muted-foreground" />{i18n.t('account.calendarAccounts')}
-          </Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="space-y-3">
-          {#each calendars as cal (cal.name)}
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0">
-                <p class="truncate text-sm font-medium text-foreground">{cal.name}</p>
-                <p class="truncate text-xs text-muted-foreground">{cal.detail}</p>
-              </div>
-              {#if cal.primary}
-                <Badge variant="secondary" class="shrink-0 text-[10px]">{i18n.t('account.active')}</Badge>
-              {/if}
-            </div>
-          {/each}
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- My Files -->
-      <Card.Card class="border-border/60">
-        <Card.CardHeader class="pb-3">
-          <Card.CardTitle class="text-base">{i18n.t('account.myFiles')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="space-y-2.5">
-          {#each files as file (file.name)}
-            <div class="flex items-center gap-3">
-              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg {file.tone}">
-                <file.Icon class="h-4 w-4" />
-              </div>
-              <div class="min-w-0 flex-1">
-                <p class="truncate text-sm font-medium text-foreground">{file.name}</p>
-                <p class="text-xs text-muted-foreground">{file.size}</p>
-              </div>
-            </div>
-          {/each}
-        </Card.CardContent>
-      </Card.Card>
-    </div>
+<ContentPageShell pageId="account-user-profile" width="wide">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('account.userProfile')} description={i18n.t('account.userProfileDescription')} /><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]">
+    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-5 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.personalInfo')}</h2><p class="mt-1 text-sm text-muted-foreground">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div class="flex items-center justify-between gap-3"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.work')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="flex flex-wrap gap-1.5">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>
+    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>
   </div>
-</div>
+</ContentPageShell>

package/dist/components/account/UserProfilePage.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Component } from 'svelte';
-declare const UserProfilePage: Component<Record<string, never>, {}, "">;
+declare const UserProfilePage: import("svelte").Component<Record<string, never>, {}, "">;
 type UserProfilePage = ReturnType<typeof UserProfilePage>;
 export default UserProfilePage;

package/dist/components/content/ApiKeyList.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Copy, KeyRound, Trash2 } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  export interface ApiKeySummary { id: string; name: string; prefix: string; createdAt?: string; lastUsedAt?: string; }
+  interface Props { keys?: ApiKeySummary[]; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
+  let { keys = [], oncopy, onrevoke, class: className = '' }: Props = $props();
+</script>
+<div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
+  {#each keys as apiKey (apiKey.id)}
+    <div class="flex flex-wrap items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p><p class="font-mono text-xs text-muted-foreground">{apiKey.prefix}********</p></div><div class="text-right text-xs text-muted-foreground"><p>Created {apiKey.createdAt ?? 'Recently'}</p><p>Used {apiKey.lastUsedAt ?? 'Never'}</p></div><div class="flex items-center gap-1">{#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={'Copy ' + apiKey.name} onclick={() => oncopy?.(apiKey)}><Copy class="size-4" /></Button>{/if}{#if onrevoke}<Button variant="ghost" size="icon-sm" aria-label={'Revoke ' + apiKey.name} onclick={() => onrevoke?.(apiKey)}><Trash2 class="size-4" /></Button>{/if}</div></div>
+  {/each}
+  {#if keys.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No API keys</div>{/if}
+</div>

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

@@ -0,0 +1,16 @@
+export interface ApiKeySummary {
+    id: string;
+    name: string;
+    prefix: string;
+    createdAt?: string;
+    lastUsedAt?: string;
+}
+interface Props {
+    keys?: ApiKeySummary[];
+    oncopy?: (key: ApiKeySummary) => void;
+    onrevoke?: (key: ApiKeySummary) => void;
+    class?: string;
+}
+declare const ApiKeyList: import("svelte").Component<Props, {}, "">;
+type ApiKeyList = ReturnType<typeof ApiKeyList>;
+export default ApiKeyList;

package/dist/components/content/ContentPageHeader.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    title: string;
+    eyebrow?: string;
+    description?: string;
+    breadcrumbs?: string[];
+    actions?: Snippet;
+    class?: string;
+  }
+  let { title, eyebrow, description, breadcrumbs = [], actions, class: className = '' }: Props = $props();
+</script>
+
+<header class={'space-y-3 ' + className} data-svadmin-page-header>
+  {#if breadcrumbs.length > 0}
+    <nav aria-label="Breadcrumb" class="flex items-center gap-2 text-xs text-muted-foreground">
+      {#each breadcrumbs as crumb, index (crumb)}
+        {#if index > 0}<span aria-hidden="true">/</span>{/if}
+        <span class={index === breadcrumbs.length - 1 ? 'text-foreground' : ''}>{crumb}</span>
+      {/each}
+    </nav>
+  {/if}
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div class="min-w-0 space-y-1">
+      {#if eyebrow}<p class="text-xs font-medium text-muted-foreground">{eyebrow}</p>{/if}
+      <h1 class="text-xl font-semibold leading-tight tracking-normal text-foreground">{title}</h1>
+      {#if description}<p class="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>{/if}
+    </div>
+    {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+  </div>
+</header>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    eyebrow?: string;
+    description?: string;
+    breadcrumbs?: string[];
+    actions?: Snippet;
+    class?: string;
+}
+declare const ContentPageHeader: import("svelte").Component<Props, {}, "">;
+type ContentPageHeader = ReturnType<typeof ContentPageHeader>;
+export default ContentPageHeader;

package/dist/components/content/ContentPageShell.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import ContentPageHeader from './ContentPageHeader.svelte';
+
+  interface Props {
+    title?: string;
+    eyebrow?: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    pageId?: string;
+    width?: 'narrow' | 'default' | 'wide';
+    class?: string;
+  }
+
+  let {
+    title,
+    eyebrow,
+    description,
+    actions,
+    children,
+    pageId = 'content',
+    width = 'default',
+    class: className = '',
+  }: Props = $props();
+
+  const widthClass = $derived(
+    width === 'narrow'
+      ? 'max-w-3xl'
+      : width === 'wide'
+        ? 'max-w-[92rem]'
+        : 'max-w-[74rem]',
+  );
+</script>
+
+<div data-svadmin-content-page={pageId} class={'mx-auto w-full ' + widthClass + ' space-y-6 ' + className}>
+  {#if title}<ContentPageHeader {title} {eyebrow} {description} {actions} />{/if}
+  {@render children()}
+</div>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    eyebrow?: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    pageId?: string;
+    width?: 'narrow' | 'default' | 'wide';
+    class?: string;
+}
+declare const ContentPageShell: import("svelte").Component<Props, {}, "">;
+type ContentPageShell = ReturnType<typeof ContentPageShell>;
+export default ContentPageShell;

package/dist/components/content/DataState.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { AlertTriangle, Inbox, LockKeyhole, RefreshCw } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import * as Alert from '../ui/alert/index.js';
+  import { Skeleton } from '../ui/skeleton/index.js';
+  export type DataStateKind = 'loading' | 'empty' | 'error' | 'forbidden';
+  interface Props {
+    state: DataStateKind;
+    title?: string;
+    description?: string;
+    retry?: () => void;
+    action?: Snippet;
+    class?: string;
+  }
+  let { state, title, description, retry, action, class: className = '' }: Props = $props();
+  const defaults = {
+    loading: ['Loading', 'Fetching the latest data.'],
+    empty: ['Nothing here yet', 'New records will appear here when they are available.'],
+    error: ['Unable to load data', 'Try again or check the connection before continuing.'],
+    forbidden: ['Access restricted', 'You do not have permission to view this content.'],
+  } as const;
+  const resolvedTitle = $derived(title ?? defaults[state][0]);
+  const resolvedDescription = $derived(description ?? defaults[state][1]);
+</script>
+
+{#if state === 'loading'}
+  <div class={'space-y-3 rounded-lg border border-border bg-card p-5 ' + className} aria-busy="true">
+    <Skeleton class="h-5 w-40" /><Skeleton class="h-4 w-full max-w-md" /><Skeleton class="h-20 w-full" />
+  </div>
+{:else if state === 'error' || state === 'forbidden'}
+  <Alert.Root variant={state === 'error' ? 'destructive' : 'warning'} class={className}>
+    {#if state === 'error'}<AlertTriangle class="size-4" />{:else}<LockKeyhole class="size-4" />{/if}
+    <Alert.Title>{resolvedTitle}</Alert.Title>
+    <Alert.Description>{resolvedDescription}</Alert.Description>
+    {#if retry}<Button variant="outline" size="sm" class="mt-3" onclick={retry}><RefreshCw class="size-3.5" />Retry</Button>{/if}
+    {#if action}<div class="mt-3">{@render action()}</div>{/if}
+  </Alert.Root>
+{:else}
+  <div class={'flex min-h-40 flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card p-6 text-center ' + className}>
+    <Inbox class="size-8 text-muted-foreground" /><h3 class="mt-3 text-sm font-semibold text-foreground">{resolvedTitle}</h3><p class="mt-1 max-w-sm text-sm text-muted-foreground">{resolvedDescription}</p>
+    {#if action}<div class="mt-4">{@render action()}</div>{/if}
+  </div>
+{/if}