@svadmin/ui 0.42.3 → 0.44.0

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}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+export type DataStateKind = 'loading' | 'empty' | 'error' | 'forbidden';
+interface Props {
+    state: DataStateKind;
+    title?: string;
+    description?: string;
+    retry?: () => void;
+    action?: Snippet;
+    class?: string;
+}
+declare const DataState: import("svelte").Component<Props, {}, "">;
+type DataState = ReturnType<typeof DataState>;
+export default DataState;

package/dist/components/content/DescriptionList.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export interface DescriptionItem {
+    label: string;
+    value: string | number;
+    description?: string;
+    href?: string;
+  }
+  interface Props {
+    items?: DescriptionItem[];
+    columns?: 1 | 2;
+    class?: string;
+  }
+  let { items = [], columns = 1, class: className = '' }: Props = $props();
+  const columnClass = $derived(columns === 2 ? 'sm:grid-cols-2' : 'grid-cols-1');
+</script>
+
+<dl class={'grid gap-x-6 gap-y-5 ' + columnClass + ' ' + className}>
+  {#each items as item (item.label)}
+    <div class="min-w-0">
+      <dt class="text-xs font-medium text-muted-foreground">{item.label}</dt>
+      <dd class="mt-1 break-words text-sm font-medium text-foreground">
+        {#if item.href}<a class="text-primary underline-offset-4 hover:underline" href={item.href}>{item.value}</a>{:else}{item.value}{/if}
+      </dd>
+      {#if item.description}<p class="mt-1 text-xs text-muted-foreground">{item.description}</p>{/if}
+    </div>
+  {/each}
+</dl>

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

@@ -0,0 +1,14 @@
+export interface DescriptionItem {
+    label: string;
+    value: string | number;
+    description?: string;
+    href?: string;
+}
+interface Props {
+    items?: DescriptionItem[];
+    columns?: 1 | 2;
+    class?: string;
+}
+declare const DescriptionList: import("svelte").Component<Props, {}, "">;
+type DescriptionList = ReturnType<typeof DescriptionList>;
+export default DescriptionList;

package/dist/components/content/FileList.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Download, File, Trash2 } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  export interface FileItem { id?: string; name: string; size?: string; type?: string; updatedAt?: string; }
+  interface Props { files?: FileItem[]; ondownload?: (file: FileItem) => void; onremove?: (file: FileItem) => void; class?: string; }
+  let { files = [], ondownload, onremove, class: className = '' }: Props = $props();
+</script>
+<div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
+  {#each files as file, index (file.id ?? file.name + '-' + index)}
+    <div class="flex items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><File class="size-4" /></span><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 ?? file.type ?? 'File'}{file.updatedAt ? ' / ' + file.updatedAt : ''}</p></div>{#if ondownload}<Button variant="ghost" size="icon-sm" aria-label={'Download ' + file.name} onclick={() => ondownload?.(file)}><Download class="size-4" /></Button>{/if}{#if onremove}<Button variant="ghost" size="icon-sm" aria-label={'Remove ' + file.name} onclick={() => onremove?.(file)}><Trash2 class="size-4" /></Button>{/if}</div>
+  {/each}
+  {#if files.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No files</div>{/if}
+</div>

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

@@ -0,0 +1,16 @@
+export interface FileItem {
+    id?: string;
+    name: string;
+    size?: string;
+    type?: string;
+    updatedAt?: string;
+}
+interface Props {
+    files?: FileItem[];
+    ondownload?: (file: FileItem) => void;
+    onremove?: (file: FileItem) => void;
+    class?: string;
+}
+declare const FileList: import("svelte").Component<Props, {}, "">;
+type FileList = ReturnType<typeof FileList>;
+export default FileList;

package/dist/components/content/FilterToolbar.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Search, X } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import { Input } from '../ui/input/index.js';
+  interface Props {
+    query?: string;
+    placeholder?: string;
+    filters?: Snippet;
+    actions?: Snippet;
+    class?: string;
+  }
+  let { query = $bindable(''), placeholder = 'Search', filters, actions, class: className = '' }: Props = $props();
+</script>
+
+<div class={'flex flex-col gap-2 sm:flex-row sm:items-center ' + className}>
+  <div class="relative min-w-0 flex-1">
+    <Search class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+    <Input bind:value={query} {placeholder} class="pl-9 pr-9" aria-label={placeholder} />
+    {#if query}<Button variant="ghost" size="icon-xs" class="absolute right-1 top-1/2 -translate-y-1/2" aria-label="Clear search" onclick={() => query = ''}><X class="size-3.5" /></Button>{/if}
+  </div>
+  {#if filters}<div class="flex flex-wrap items-center gap-2">{@render filters()}</div>{/if}
+  {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    query?: string;
+    placeholder?: string;
+    filters?: Snippet;
+    actions?: Snippet;
+    class?: string;
+}
+declare const FilterToolbar: import("svelte").Component<Props, {}, "query">;
+type FilterToolbar = ReturnType<typeof FilterToolbar>;
+export default FilterToolbar;

package/dist/components/content/ImportDropzone.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { UploadCloud } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import { Input } from '../ui/input/index.js';
+  interface Props { accept?: string; loading?: boolean; status?: string; onimport?: (files: FileList | null) => void; class?: string; }
+  let { accept = '.csv,.xlsx', loading = false, status = '', onimport, class: className = '' }: Props = $props();
+  let files = $state<FileList | null>(null);
+  function choose(event: Event) {
+    files = (event.currentTarget as HTMLInputElement).files;
+    if (files?.length) onimport?.(files);
+  }
+</script>
+<div class={'rounded-lg border border-dashed border-border bg-card p-6 text-center ' + className} data-svadmin-import-dropzone>
+  <UploadCloud class="mx-auto size-8 text-muted-foreground" /><p class="mt-3 text-sm font-medium text-foreground">Import records</p><p class="mt-1 text-xs text-muted-foreground">CSV or spreadsheet files are accepted.</p>
+  <Input class="mx-auto mt-4 max-w-sm" type="file" {accept} onchange={choose} disabled={loading} />
+  {#if loading}<p class="mt-3 text-xs text-muted-foreground" aria-live="polite">Importing...</p>{/if}
+  {#if status}<p class="mt-3 text-xs text-success" role="status">{status}</p>{/if}
+  {#if !loading && files?.length}<Button class="mt-4" size="sm" onclick={() => onimport?.(files)}>Import {files.length} file{files.length === 1 ? '' : 's'}</Button>{/if}
+</div>

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

@@ -0,0 +1,10 @@
+interface Props {
+    accept?: string;
+    loading?: boolean;
+    status?: string;
+    onimport?: (files: FileList | null) => void;
+    class?: string;
+}
+declare const ImportDropzone: import("svelte").Component<Props, {}, "">;
+type ImportDropzone = ReturnType<typeof ImportDropzone>;
+export default ImportDropzone;

package/dist/components/content/IntegrationCard.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Check, ExternalLink, PlugZap } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import * as Card from '../ui/card/index.js';
+  export interface IntegrationSummary { id: string; name: string; description?: string; account?: string; connected?: boolean; }
+  interface Props { integration: IntegrationSummary; onconnect?: () => void; class?: string; }
+  let { integration, onconnect, class: className = '' }: Props = $props();
+</script>
+<Card.Card class={className}>
+  <Card.CardContent class="flex items-start gap-3 p-4">
+    <span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><PlugZap class="size-4" /></span>
+    <div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-2"><h3 class="text-sm font-semibold text-foreground">{integration.name}</h3>{#if integration.connected}<Badge variant="outline" class="border-success/30 bg-success/10 text-success"><Check class="size-3" />Connected</Badge>{/if}</div><p class="mt-1 text-sm text-muted-foreground">{integration.description ?? 'Connect this provider to unlock synchronized workflows.'}</p>{#if integration.account}<p class="mt-2 text-xs text-muted-foreground">{integration.account}</p>{/if}</div>
+    {#if onconnect}<Button variant={integration.connected ? 'outline' : 'default'} size="sm" onclick={onconnect}>{integration.connected ? 'Manage' : 'Connect'}{#if !integration.connected}<ExternalLink class="size-3.5" />{/if}</Button>{/if}
+  </Card.CardContent>
+</Card.Card>

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

@@ -0,0 +1,15 @@
+export interface IntegrationSummary {
+    id: string;
+    name: string;
+    description?: string;
+    account?: string;
+    connected?: boolean;
+}
+interface Props {
+    integration: IntegrationSummary;
+    onconnect?: () => void;
+    class?: string;
+}
+declare const IntegrationCard: import("svelte").Component<Props, {}, "">;
+type IntegrationCard = ReturnType<typeof IntegrationCard>;
+export default IntegrationCard;

package/dist/components/content/MemberList.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { MoreHorizontal, UserRound } from '@lucide/svelte';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Button } from '../ui/button/index.js';
+  import StatusBadge from './StatusBadge.svelte';
+  export interface MemberSummary { id: string; name: string; email?: string; role?: string; department?: string; status?: 'success' | 'warning' | 'danger' | 'info' | 'neutral'; avatar?: string; }
+  interface Props { members?: MemberSummary[]; onaction?: (member: MemberSummary) => void; class?: string; }
+  let { members = [], onaction, class: className = '' }: Props = $props();
+  const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
+</script>
+<div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
+  {#each members as member (member.id)}
+    <div class="flex items-center gap-3 px-4 py-3"><Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" /><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{member.name}</p><p class="truncate text-xs text-muted-foreground">{member.email ?? member.department ?? 'Team member'}</p></div>{#if member.role}<span class="hidden text-xs text-muted-foreground sm:inline">{member.role}</span>{/if}{#if member.status}<StatusBadge status={member.status} label={member.status} />{/if}{#if onaction}<Button variant="ghost" size="icon-sm" aria-label={'Actions for ' + member.name} onclick={() => onaction?.(member)}><MoreHorizontal class="size-4" /></Button>{/if}</div>
+  {/each}
+  {#if members.length === 0}<div class="flex flex-col items-center gap-2 p-6 text-center text-sm text-muted-foreground"><UserRound class="size-6" />No members</div>{/if}
+</div>