@svadmin/ui 0.42.3 → 0.43.0

package/dist/components/profile/TeamsShowcase.svelte

@@ -1,119 +1,17 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
-  import { Button } from '../ui/button/index.js';
-  import { Avatar } from '../ui/avatar/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Users, ArrowRight, Search, Star } from '@lucide/svelte';
-
-  const i18n = useTranslation();
-
-  interface TeamMember {
-    name: string;
-    avatar?: string;
-    role?: string;
-  }
-
-  interface Team {
-    id: string;
-    name: string;
-    description: string;
-    members: TeamMember[];
-    totalMembers: number;
-    color?: string;
-    rating?: number;
-  }
-
-  interface Props {
-    teams?: Team[];
-  }
-
+  import { DataState, FilterToolbar, TeamCard } from '../content/index.js';
+  import type { TeamSummary } from '../content/TeamCard.svelte';
+  interface Team extends TeamSummary { description: string; }
+  interface Props { teams?: Team[]; }
   let { teams = [] }: Props = $props();
-
-  let searchQuery = $state('');
-  const filtered = $derived(
-    searchQuery
-      ? teams.filter(t => t.name.toLowerCase().includes(searchQuery.toLowerCase()) || t.description.toLowerCase().includes(searchQuery.toLowerCase()))
-      : teams
-  );
-
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  let query = $state('');
+  const i18n = useTranslation();
+  const filtered = $derived(query ? teams.filter((team) => `${team.name} ${team.description}`.toLowerCase().includes(query.toLowerCase())) : teams);
 </script>
 
-<div class="space-y-4">
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h3>
-    <div class="relative">
-      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input placeholder={i18n.t('publicProfile.searchTeams')} bind:value={searchQuery} class="w-48 pl-9" />
-    </div>
-  </div>
-
-  {#if filtered.length === 0}
-    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
-      <p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noTeams')}</p>
-    </div>
-  {:else}
-    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      {#each filtered as team (team.id)}
-        <Card.Card class="border-border/60 hover:border-primary/30 transition-colors">
-          <Card.CardContent class="p-4 space-y-3">
-            <div class="flex items-start justify-between gap-2">
-              <div class="flex items-center gap-3">
-                {#if team.color}
-                  <div class="h-8 w-8 rounded-lg" style="background-color: {team.color}20;">
-                    <Users class="h-4 w-4" style="color: {team.color}" />
-                  </div>
-                {:else}
-                  <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                    <Users class="h-4 w-4" />
-                  </div>
-                {/if}
-                <div>
-                  <h4 class="font-semibold text-foreground">{team.name}</h4>
-                  <p class="text-xs text-muted-foreground">{i18n.t('publicProfile.projectMembers', { count: team.totalMembers })}</p>
-                </div>
-              </div>
-              {#if team.rating}
-                <span class="flex shrink-0 items-center gap-1 text-xs font-semibold text-amber-500">
-                  <Star class="h-3.5 w-3.5 fill-amber-400 text-amber-400" />{team.rating}
-                </span>
-              {/if}
-            </div>
-
-            <p class="text-sm text-muted-foreground line-clamp-2">{team.description}</p>
-
-            <!-- Member avatars -->
-            <div class="flex items-center gap-1">
-              {#each team.members.slice(0, 5) as member (member.name)}
-                {#if member.avatar}
-                  <Avatar class="h-7 w-7 ring-1 ring-background">
-                    <img src={member.avatar} alt={member.name} />
-                  </Avatar>
-                {:else}
-                  <div class="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground ring-1 ring-background">
-                    {initials(member.name)}
-                  </div>
-                {/if}
-              {/each}
-              {#if team.members.length > 5}
-                <div class="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground ring-1 ring-background">
-                  +{team.members.length - 5}
-                </div>
-              {/if}
-            </div>
-
-            <div class="flex gap-2 pt-2 border-t">
-              <Button variant="outline" size="sm" class="flex-1">
-                {i18n.t('publicProfile.join')}
-              </Button>
-              <Button variant="ghost" size="sm" class="flex-1">
-                {i18n.t('publicProfile.viewProfile')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
-              </Button>
-            </div>
-          </Card.CardContent>
-        </Card.Card>
-      {/each}
-    </div>
-  {/if}
-</div>
+<section class="space-y-4">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><div><h2 class="text-base font-semibold text-foreground">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('publicProfile.searchTeams')}</p></div></div>
+  <FilterToolbar bind:query placeholder={i18n.t('publicProfile.searchTeams')} />
+  {#if filtered.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noTeams')} />{:else}<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{#each filtered as team (team.id)}<TeamCard {team} />{/each}</div>{/if}
+</section>

package/dist/components/profile/TeamsShowcase.svelte.d.ts

@@ -1,16 +1,6 @@
-interface TeamMember {
-    name: string;
-    avatar?: string;
-    role?: string;
-}
-interface Team {
-    id: string;
-    name: string;
+import type { TeamSummary } from '../content/TeamCard.svelte';
+interface Team extends TeamSummary {
     description: string;
-    members: TeamMember[];
-    totalMembers: number;
-    color?: string;
-    rating?: number;
 }
 interface Props {
     teams?: Team[];

package/dist/index.d.ts

@@ -151,3 +151,39 @@ export { default as TeamMembersPage } from './components/account/TeamMembersPage
 export { default as UserCardsNFTPage } from './components/network/UserCardsNFTPage.svelte';
 export { default as TeamCrewTablePage } from './components/network/TeamCrewTablePage.svelte';
 export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';
+export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
+export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
+export { default as SectionHeader } from './components/content/SectionHeader.svelte';
+export { default as PageToolbar } from './components/content/PageToolbar.svelte';
+export { default as MetricBlock } from './components/content/MetricBlock.svelte';
+export { default as DescriptionList } from './components/content/DescriptionList.svelte';
+export type { DescriptionItem } from './components/content/DescriptionList.svelte';
+export { default as StatusBadge } from './components/content/StatusBadge.svelte';
+export type { Status } from './components/content/StatusBadge.svelte';
+export { default as FilterToolbar } from './components/content/FilterToolbar.svelte';
+export { default as DataState } from './components/content/DataState.svelte';
+export type { DataStateKind } from './components/content/DataState.svelte';
+export { default as ProjectCard } from './components/content/ProjectCard.svelte';
+export type { ProjectSummary, ProjectStatus } from './components/content/ProjectCard.svelte';
+export { default as TeamCard } from './components/content/TeamCard.svelte';
+export type { TeamSummary } from './components/content/TeamCard.svelte';
+export { default as FileList } from './components/content/FileList.svelte';
+export type { FileItem } from './components/content/FileList.svelte';
+export { default as IntegrationCard } from './components/content/IntegrationCard.svelte';
+export type { IntegrationSummary } from './components/content/IntegrationCard.svelte';
+export { default as ApiKeyList } from './components/content/ApiKeyList.svelte';
+export type { ApiKeySummary } from './components/content/ApiKeyList.svelte';
+export { default as SecurityEventTable } from './components/content/SecurityEventTable.svelte';
+export type { SecurityEvent } from './components/content/SecurityEventTable.svelte';
+export { default as MemberList } from './components/content/MemberList.svelte';
+export type { MemberSummary } from './components/content/MemberList.svelte';
+export { default as ImportDropzone } from './components/content/ImportDropzone.svelte';
+export { default as NetworkUserCard } from './components/content/NetworkUserCard.svelte';
+export type { NetworkUser } from './components/content/NetworkUserCard.svelte';
+export { default as NetworkTable } from './components/content/NetworkTable.svelte';
+export type { NetworkColumn } from './components/content/NetworkTable.types.js';
+export { default as OtpInput } from './components/content/OtpInput.svelte';
+export { default as TwoFactorStepper } from './components/content/TwoFactorStepper.svelte';
+export { default as SystemErrorState } from './components/content/SystemErrorState.svelte';
+export { referenceDemoData } from './reference-data.js';
+export type { DemoMember, DemoProject, DemoTeam, DemoIntegration, DemoApiKey, DemoSecurityEvent, DemoNotification } from './reference-data.js';

package/dist/index.js

@@ -166,3 +166,27 @@ export { default as UserCardsNFTPage } from './components/network/UserCardsNFTPa
 export { default as TeamCrewTablePage } from './components/network/TeamCrewTablePage.svelte';
 // Auth extensions
 export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';
+// Stripe-first content page and domain primitives
+export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
+export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
+export { default as SectionHeader } from './components/content/SectionHeader.svelte';
+export { default as PageToolbar } from './components/content/PageToolbar.svelte';
+export { default as MetricBlock } from './components/content/MetricBlock.svelte';
+export { default as DescriptionList } from './components/content/DescriptionList.svelte';
+export { default as StatusBadge } from './components/content/StatusBadge.svelte';
+export { default as FilterToolbar } from './components/content/FilterToolbar.svelte';
+export { default as DataState } from './components/content/DataState.svelte';
+export { default as ProjectCard } from './components/content/ProjectCard.svelte';
+export { default as TeamCard } from './components/content/TeamCard.svelte';
+export { default as FileList } from './components/content/FileList.svelte';
+export { default as IntegrationCard } from './components/content/IntegrationCard.svelte';
+export { default as ApiKeyList } from './components/content/ApiKeyList.svelte';
+export { default as SecurityEventTable } from './components/content/SecurityEventTable.svelte';
+export { default as MemberList } from './components/content/MemberList.svelte';
+export { default as ImportDropzone } from './components/content/ImportDropzone.svelte';
+export { default as NetworkUserCard } from './components/content/NetworkUserCard.svelte';
+export { default as NetworkTable } from './components/content/NetworkTable.svelte';
+export { default as OtpInput } from './components/content/OtpInput.svelte';
+export { default as TwoFactorStepper } from './components/content/TwoFactorStepper.svelte';
+export { default as SystemErrorState } from './components/content/SystemErrorState.svelte';
+export { referenceDemoData } from './reference-data.js';

package/dist/reference-data.d.ts

@@ -0,0 +1,171 @@
+export interface DemoMember {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    department: string;
+    status: 'active' | 'invited' | 'inactive';
+}
+export interface DemoProject {
+    id: string;
+    name: string;
+    description: string;
+    status: 'active' | 'completed' | 'on-hold';
+    members: number;
+    tasks: number;
+    progress: number;
+    tags: string[];
+}
+export interface DemoTeam {
+    id: string;
+    name: string;
+    description: string;
+    totalMembers: number;
+    members: Array<{
+        name: string;
+        role?: string;
+    }>;
+    color?: string;
+    rating?: number;
+}
+export interface DemoIntegration {
+    id: string;
+    name: string;
+    description: string;
+    account: string;
+    connected: boolean;
+}
+export interface DemoApiKey {
+    id: string;
+    name: string;
+    prefix: string;
+    createdAt: string;
+    lastUsedAt: string;
+}
+export interface DemoSecurityEvent {
+    id: string;
+    event: string;
+    actor: string;
+    location: string;
+    createdAt: string;
+    severity: 'info' | 'warning' | 'danger';
+}
+export interface DemoNotification {
+    id: string;
+    title: string;
+    detail: string;
+    unread: boolean;
+}
+export declare const referenceDemoData: {
+    organization: {
+        id: string;
+        name: string;
+        plan: string;
+        members: number;
+    };
+    members: ({
+        id: string;
+        name: string;
+        email: string;
+        role: string;
+        department: string;
+        status: "active";
+    } | {
+        id: string;
+        name: string;
+        email: string;
+        role: string;
+        department: string;
+        status: "invited";
+    } | {
+        id: string;
+        name: string;
+        email: string;
+        role: string;
+        department: string;
+        status: "inactive";
+    })[];
+    projects: ({
+        id: string;
+        name: string;
+        description: string;
+        status: "active";
+        members: number;
+        tasks: number;
+        progress: number;
+        tags: string[];
+    } | {
+        id: string;
+        name: string;
+        description: string;
+        status: "completed";
+        members: number;
+        tasks: number;
+        progress: number;
+        tags: string[];
+    } | {
+        id: string;
+        name: string;
+        description: string;
+        status: "on-hold";
+        members: number;
+        tasks: number;
+        progress: number;
+        tags: string[];
+    })[];
+    teams: {
+        id: string;
+        name: string;
+        description: string;
+        totalMembers: number;
+        members: {
+            name: string;
+        }[];
+    }[];
+    integrations: ({
+        id: string;
+        name: string;
+        description: string;
+        account: string;
+        connected: true;
+    } | {
+        id: string;
+        name: string;
+        description: string;
+        account: string;
+        connected: false;
+    })[];
+    apiKeys: {
+        id: string;
+        name: string;
+        prefix: string;
+        createdAt: string;
+        lastUsedAt: string;
+    }[];
+    securityEvents: ({
+        id: string;
+        event: string;
+        actor: string;
+        location: string;
+        createdAt: string;
+        severity: "info";
+    } | {
+        id: string;
+        event: string;
+        actor: string;
+        location: string;
+        createdAt: string;
+        severity: "warning";
+    })[];
+    notifications: ({
+        id: string;
+        title: string;
+        detail: string;
+        unread: true;
+    } | {
+        id: string;
+        title: string;
+        detail: string;
+        unread: false;
+    })[];
+};

package/dist/reference-data.js

@@ -0,0 +1,39 @@
+export const referenceDemoData = {
+    organization: { id: 'acme', name: 'Acme Corporation', plan: 'Enterprise', members: 1250 },
+    members: [
+        { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', department: 'Engineering', status: 'active' },
+        { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', department: 'Design', status: 'active' },
+        { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', department: 'Marketing', status: 'invited' },
+        { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', department: 'Engineering', status: 'active' },
+        { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'Viewer', department: 'Sales', status: 'inactive' },
+    ],
+    projects: [
+        { id: '1', name: 'Dashboard Redesign', description: 'Modern admin dashboard with real-time analytics and customizable widgets.', status: 'active', members: 8, tasks: 34, progress: 72, tags: ['UI', 'Analytics'] },
+        { id: '2', name: 'API Gateway v2', description: 'High-performance API gateway with rate limiting and circuit breaker patterns.', status: 'active', members: 5, tasks: 21, progress: 45, tags: ['Backend', 'Infra'] },
+        { id: '3', name: 'Mobile App', description: 'Cross-platform mobile application built with shared native modules.', status: 'completed', members: 12, tasks: 56, progress: 100, tags: ['Mobile', 'Product'] },
+        { id: '4', name: 'Data Pipeline', description: 'Real-time data processing pipeline for event streaming.', status: 'on-hold', members: 3, tasks: 18, progress: 20, tags: ['Data', 'Streaming'] },
+    ],
+    teams: [
+        { id: '1', name: 'Frontend Platform', description: 'Core UI component library and design system.', totalMembers: 8, members: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }] },
+        { id: '2', name: 'Backend Services', description: 'API development, services architecture, and reliability.', totalMembers: 5, members: [{ name: 'Dave' }, { name: 'Eve' }] },
+        { id: '3', name: 'Design Systems', description: 'Research, visual design, and accessibility standards.', totalMembers: 6, members: [{ name: 'Frank' }, { name: 'Grace' }] },
+    ],
+    integrations: [
+        { id: 'repo', name: 'Source Control', description: 'Pull requests, issues, and repository activity.', account: 'alexchen', connected: true },
+        { id: 'chat', name: 'ChatOps', description: 'Team notifications and direct messages.', account: '@alex.chen', connected: true },
+        { id: 'drive', name: 'Cloud Drive', description: 'Shared files and document previews.', account: 'alex@example.com', connected: false },
+    ],
+    apiKeys: [
+        { id: 'key-1', name: 'Local development', prefix: 'sv_demo_dev_', createdAt: '2026-08-01', lastUsedAt: 'Today, 09:20' },
+        { id: 'key-2', name: 'CI deploy', prefix: 'sv_demo_ci_', createdAt: '2026-07-18', lastUsedAt: 'Yesterday, 18:02' },
+    ],
+    securityEvents: [
+        { id: '1', event: 'Login succeeded', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: '2 minutes ago', severity: 'info' },
+        { id: '2', event: 'API key created', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: '1 hour ago', severity: 'info' },
+        { id: '3', event: 'Login failed', actor: 'Unknown', location: 'Unknown', createdAt: '3 hours ago', severity: 'warning' },
+    ],
+    notifications: [
+        { id: 'n1', title: 'Sarah commented on Dashboard Redesign', detail: '8 minutes ago', unread: true },
+        { id: 'n2', title: 'Weekly security summary is ready', detail: 'Yesterday', unread: false },
+    ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.42.3",
+  "version": "0.43.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [