@svadmin/ui 0.42.2 → 0.43.0

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>

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

@@ -0,0 +1,17 @@
+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;
+}
+declare const MemberList: import("svelte").Component<Props, {}, "">;
+type MemberList = ReturnType<typeof MemberList>;
+export default MemberList;

package/dist/components/content/MetricBlock.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Skeleton } from '../ui/skeleton/index.js';
+  interface Props {
+    label: string;
+    value: string | number;
+    detail?: string;
+    trend?: string;
+    icon?: Snippet;
+    loading?: boolean;
+    class?: string;
+  }
+  let { label, value, detail, trend, icon, loading = false, class: className = '' }: Props = $props();
+</script>
+
+<div data-svadmin-metric-card class={'min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm ' + className}>
+  <div class="flex items-start justify-between gap-3">
+    <p class="text-sm text-muted-foreground">{label}</p>
+    {#if icon}<span class="text-muted-foreground">{@render icon()}</span>{/if}
+  </div>
+  {#if loading}
+    <Skeleton class="mt-3 h-8 w-24" />
+  {:else}
+    <p class="mt-2 truncate text-2xl font-semibold tracking-normal text-foreground">{value}</p>
+    {#if detail || trend}<div class="mt-2 flex flex-wrap gap-2 text-xs">{#if trend}<span class="font-medium text-success">{trend}</span>{/if}{#if detail}<span class="text-muted-foreground">{detail}</span>{/if}</div>{/if}
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    value: string | number;
+    detail?: string;
+    trend?: string;
+    icon?: Snippet;
+    loading?: boolean;
+    class?: string;
+}
+declare const MetricBlock: import("svelte").Component<Props, {}, "">;
+type MetricBlock = ReturnType<typeof MetricBlock>;
+export default MetricBlock;

package/dist/components/content/NetworkTable.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" generics="T extends object">
+  import type { Snippet } from 'svelte';
+  import * as Table from '../ui/table/index.js';
+  import type { NetworkColumn } from './NetworkTable.types.js';
+  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; class?: string; }
+  let { rows = [], columns, row, class: className = '' }: Props = $props();
+</script>
+<div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
+  <Table.Root data-svadmin-datatable>
+    <Table.Header data-svadmin-table-head><Table.Row>{#each columns as column (String(column.key))}<Table.Head>{column.label}</Table.Head>{/each}</Table.Row></Table.Header>
+    <Table.Body>
+      {#each rows as item, index (String('id' in item ? item.id : index))}
+        {#if row}{@render row(item)}{:else}<Table.Row data-svadmin-table-row>{#each columns as column (String(column.key))}<Table.Cell>{String(item[column.key] ?? '')}</Table.Cell>{/each}</Table.Row>{/if}
+      {/each}
+    </Table.Body>
+  </Table.Root>
+  {#if rows.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No records</div>{/if}
+</div>

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { NetworkColumn } from './NetworkTable.types.js';
+declare function $$render<T extends object>(): {
+    props: {
+        rows?: T[];
+        columns: NetworkColumn<T>[];
+        row?: Snippet<[T]>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NetworkTable: $$IsomorphicComponent;
+type NetworkTable<T extends object> = InstanceType<typeof NetworkTable<T>>;
+export default NetworkTable;

package/dist/components/content/NetworkTable.types.d.ts

@@ -0,0 +1,4 @@
+export interface NetworkColumn<T extends object> {
+    key: keyof T;
+    label: string;
+}

package/dist/components/content/NetworkTable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/content/NetworkUserCard.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { MessageSquare, UserPlus } from '@lucide/svelte';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  export interface NetworkUser { id: string; name: string; handle?: string; role?: string; avatar?: string; summary?: string; }
+  interface Props { user: NetworkUser; onconnect?: () => void; onmessage?: () => void; class?: string; }
+  let { user, onconnect, onmessage, class: className = '' }: Props = $props();
+  const initials = $derived(user.name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase());
+</script>
+<Card.Card class={className}>
+  <Card.CardContent class="flex items-start gap-3 p-4">
+    <Avatar src={user.avatar} alt={user.name} fallback={initials} size="lg" />
+    <div class="min-w-0 flex-1"><h3 class="truncate text-sm font-semibold text-foreground">{user.name}</h3>{#if user.handle}<p class="truncate text-xs text-muted-foreground">{user.handle}</p>{/if}{#if user.role}<p class="mt-2 text-xs font-medium text-foreground">{user.role}</p>{/if}{#if user.summary}<p class="mt-1 line-clamp-2 text-xs text-muted-foreground">{user.summary}</p>{/if}</div>
+    <div class="flex shrink-0 gap-1">{#if onmessage}<Button variant="ghost" size="icon-sm" aria-label={'Message ' + user.name} onclick={onmessage}><MessageSquare class="size-4" /></Button>{/if}{#if onconnect}<Button variant="outline" size="icon-sm" aria-label={'Connect with ' + user.name} onclick={onconnect}><UserPlus class="size-4" /></Button>{/if}</div>
+  </Card.CardContent>
+</Card.Card>

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

@@ -0,0 +1,17 @@
+export interface NetworkUser {
+    id: string;
+    name: string;
+    handle?: string;
+    role?: string;
+    avatar?: string;
+    summary?: string;
+}
+interface Props {
+    user: NetworkUser;
+    onconnect?: () => void;
+    onmessage?: () => void;
+    class?: string;
+}
+declare const NetworkUserCard: import("svelte").Component<Props, {}, "">;
+type NetworkUserCard = ReturnType<typeof NetworkUserCard>;
+export default NetworkUserCard;

package/dist/components/content/OtpInput.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Input } from '../ui/input/index.js';
+  interface Props { value?: string[]; length?: number; disabled?: boolean; 'aria-label'?: string; class?: string; }
+  let { value = $bindable<string[]>([]), length = 6, disabled = false, 'aria-label': ariaLabel = 'One-time password', class: className = '' }: Props = $props();
+  const slots = $derived(Array.from({ length }, (_, index) => index));
+  function updateDigit(event: Event, index: number) {
+    const input = event.currentTarget as HTMLInputElement;
+    const digit = input.value.replace(/\D/g, '').slice(-1);
+    const next = [...value];
+    next[index] = digit;
+    value = next;
+    if (digit && index < length - 1) {
+      const sibling = input.parentElement?.querySelectorAll('input')[index + 1] as HTMLInputElement | undefined;
+      sibling?.focus();
+    }
+  }
+</script>
+<div class={'flex justify-center gap-2 ' + className} role="group" aria-label={ariaLabel}>
+  {#each slots as index (index)}
+    <Input class="size-12 text-center text-lg font-semibold" value={value[index] ?? ''} maxlength={1} inputmode="numeric" pattern="[0-9]*" aria-label={ariaLabel + ' digit ' + (index + 1)} {disabled} oninput={(event) => updateDigit(event, index)} />
+  {/each}
+</div>

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

@@ -0,0 +1,10 @@
+interface Props {
+    value?: string[];
+    length?: number;
+    disabled?: boolean;
+    'aria-label'?: string;
+    class?: string;
+}
+declare const OtpInput: import("svelte").Component<Props, {}, "value">;
+type OtpInput = ReturnType<typeof OtpInput>;
+export default OtpInput;

package/dist/components/content/PageToolbar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    leading?: Snippet;
+    trailing?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+  let { leading, trailing, children, class: className = '' }: Props = $props();
+</script>
+
+<div data-svadmin-table-toolbar class={'flex flex-col gap-3 rounded-lg border border-border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between ' + className}>
+  <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+    {#if leading}{@render leading()}{/if}
+    {#if children}{@render children()}{/if}
+  </div>
+  {#if trailing}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render trailing()}</div>{/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    leading?: Snippet;
+    trailing?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const PageToolbar: import("svelte").Component<Props, {}, "">;
+type PageToolbar = ReturnType<typeof PageToolbar>;
+export default PageToolbar;

package/dist/components/content/ProjectCard.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { ArrowRight, CheckCircle2, FolderKanban, Users } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import Progress from '../ui/progress/progress.svelte';
+  import StatusBadge from './StatusBadge.svelte';
+  export type ProjectStatus = 'active' | 'completed' | 'on-hold' | 'draft';
+  export interface ProjectSummary {
+    id: string;
+    name: string;
+    description?: string;
+    status: ProjectStatus;
+    members?: number;
+    tasks?: number;
+    progress?: number;
+    tags?: string[];
+    image?: string;
+  }
+  interface Props { project: ProjectSummary; onclick?: () => void; class?: string; }
+  let { project, onclick, class: className = '' }: Props = $props();
+  const progress = $derived(project.progress ?? (project.status === 'completed' ? 100 : project.status === 'active' ? 72 : 0));
+</script>
+<Card.Card data-interactive={onclick ? 'true' : undefined} class={'h-full ' + className}>
+  {#if project.image}<img src={project.image} alt={project.name} class="h-32 w-full object-cover" />{/if}
+  <Card.CardContent class="flex h-full flex-col gap-4 p-4">
+    <div class="flex items-start justify-between gap-3">
+      <div class="flex min-w-0 items-center gap-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50 text-muted-foreground"><FolderKanban class="size-4" /></span><h3 class="truncate text-sm font-semibold text-foreground">{project.name}</h3></div>
+      <StatusBadge status={project.status === 'active' ? 'success' : project.status === 'completed' ? 'info' : project.status === 'on-hold' ? 'warning' : 'neutral'} label={project.status} />
+    </div>
+    {#if project.description}<p class="line-clamp-2 text-sm text-muted-foreground">{project.description}</p>{/if}
+    {#if project.tags?.length}<div class="flex flex-wrap gap-1.5">{#each project.tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div>{/if}
+    <div class="mt-auto space-y-2">
+      <div class="flex items-center justify-between text-xs text-muted-foreground"><span>Progress</span><span class="font-medium text-foreground">{progress}%</span></div>
+      <Progress value={progress} class="h-1.5" />
+      <div class="flex items-center justify-between border-t border-border pt-3 text-xs text-muted-foreground"><span class="flex items-center gap-1"><Users class="size-3.5" />{project.members ?? 0}</span><span class="flex items-center gap-1"><CheckCircle2 class="size-3.5" />{project.tasks ?? 0}</span>{#if onclick}<Button variant="ghost" size="icon-sm" aria-label={project.name} onclick={onclick}><ArrowRight class="size-3.5" /></Button>{/if}</div>
+    </div>
+  </Card.CardContent>
+</Card.Card>

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

@@ -0,0 +1,20 @@
+export type ProjectStatus = 'active' | 'completed' | 'on-hold' | 'draft';
+export interface ProjectSummary {
+    id: string;
+    name: string;
+    description?: string;
+    status: ProjectStatus;
+    members?: number;
+    tasks?: number;
+    progress?: number;
+    tags?: string[];
+    image?: string;
+}
+interface Props {
+    project: ProjectSummary;
+    onclick?: () => void;
+    class?: string;
+}
+declare const ProjectCard: import("svelte").Component<Props, {}, "">;
+type ProjectCard = ReturnType<typeof ProjectCard>;
+export default ProjectCard;

package/dist/components/content/SectionHeader.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    class?: string;
+  }
+  let { title, description, actions, class: className = '' }: Props = $props();
+</script>
+
+<div class={'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ' + className}>
+  <div class="min-w-0 space-y-1">
+    <h2 class="text-base font-semibold text-foreground">{title}</h2>
+    {#if description}<p class="text-sm 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>

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

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

package/dist/components/content/SecurityEventTable.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import * as Table from '../ui/table/index.js';
+  import StatusBadge from './StatusBadge.svelte';
+  export interface SecurityEvent { id: string; event: string; actor?: string; location?: string; createdAt: string; severity: 'info' | 'warning' | 'danger'; }
+  interface Props { events?: SecurityEvent[]; class?: string; }
+  let { events = [], class: className = '' }: Props = $props();
+</script>
+<div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
+  <Table.Root data-svadmin-datatable>
+    <Table.Header data-svadmin-table-head><Table.Row><Table.Head>Event</Table.Head><Table.Head>Actor</Table.Head><Table.Head>Location</Table.Head><Table.Head>Time</Table.Head><Table.Head>Risk</Table.Head></Table.Row></Table.Header>
+    <Table.Body>
+      {#each events as event (event.id)}
+        <Table.Row data-svadmin-table-row><Table.Cell class="font-medium">{event.event}</Table.Cell><Table.Cell>{event.actor ?? 'System'}</Table.Cell><Table.Cell>{event.location ?? 'Unknown'}</Table.Cell><Table.Cell class="whitespace-nowrap">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
+      {/each}
+    </Table.Body>
+  </Table.Root>
+  {#if events.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No security events</div>{/if}
+</div>

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

@@ -0,0 +1,15 @@
+export interface SecurityEvent {
+    id: string;
+    event: string;
+    actor?: string;
+    location?: string;
+    createdAt: string;
+    severity: 'info' | 'warning' | 'danger';
+}
+interface Props {
+    events?: SecurityEvent[];
+    class?: string;
+}
+declare const SecurityEventTable: import("svelte").Component<Props, {}, "">;
+type SecurityEventTable = ReturnType<typeof SecurityEventTable>;
+export default SecurityEventTable;

package/dist/components/content/StatusBadge.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+  export type Status = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+  interface Props {
+    status: Status;
+    label?: string;
+    class?: string;
+  }
+  let { status, label = status, class: className = '' }: Props = $props();
+  const toneClass: Record<Status, string> = {
+    success: 'border-success/30 bg-success/10 text-success',
+    warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
+    danger: 'border-destructive/30 bg-destructive/10 text-destructive',
+    info: 'border-primary/30 bg-primary/10 text-primary',
+    neutral: 'border-border bg-muted text-muted-foreground',
+  };
+</script>
+
+<Badge variant="outline" class={'font-medium ' + toneClass[status] + ' ' + className}>{label}</Badge>

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

@@ -0,0 +1,9 @@
+export type Status = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface Props {
+    status: Status;
+    label?: string;
+    class?: string;
+}
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;

package/dist/components/content/SystemErrorState.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { AlertTriangle, ArrowLeft, FileQuestion, Home } from '@lucide/svelte';
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  interface Props { status?: '404' | '500'; title?: string; description?: string; action?: Snippet; }
+  let { status = '404', title, description, action }: Props = $props();
+  const adminContext = captureAdminContext();
+  const i18n = useTranslation();
+  const isNotFound = $derived(status === '404');
+  const resolvedTitle = $derived(title ?? (isNotFound ? i18n.t('common.pageNotFound') : i18n.t('common.error')));
+  const resolvedDescription = $derived(description ?? (isNotFound ? i18n.t('error.pageNotFoundDescription') : i18n.t('error.internalServerErrorDescription')));
+</script>
+<div class="flex min-h-[24rem] items-center justify-center p-4" data-svadmin-system-error>
+  <Card.Card class="w-full max-w-md"><Card.CardContent class="space-y-5 p-8 text-center"><div class="mx-auto flex size-14 items-center justify-center rounded-lg bg-muted text-muted-foreground">{#if isNotFound}<FileQuestion class="size-7" />{:else}<AlertTriangle class="size-7 text-destructive" />{/if}</div><div class="space-y-2"><p class="text-xs font-medium text-muted-foreground">{status}</p><h2 class="text-xl font-semibold text-foreground">{resolvedTitle}</h2><p class="text-sm leading-6 text-muted-foreground">{resolvedDescription}</p></div>{#if action}<div>{@render action()}</div>{/if}<div class="flex flex-wrap justify-center gap-2"><Button variant="outline" onclick={() => adminContext.back()}><ArrowLeft class="size-4" />{i18n.t('common.back')}</Button><Button onclick={() => adminContext.navigate('/')}><Home class="size-4" />{i18n.t('common.returnHome')}</Button></div></Card.CardContent></Card.Card>
+</div>