@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/profile/PublicProfilePage.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import * as Tabs from '../ui/tabs/index.js';
+  import ProjectsGrid from './ProjectsGrid.svelte';
+  import ActivityTimeline from './ActivityTimeline.svelte';
+  import TeamsShowcase from './TeamsShowcase.svelte';
+  import { MapPin, Link, Calendar, MoreHorizontal } from '@lucide/svelte';
+
+  type ProfileVariant = 'default' | 'company' | 'gamer';
+  type ProfileTab = 'projects' | 'activity' | 'teams';
+
+  interface Props {
+    variant?: ProfileVariant;
+    initialTab?: ProfileTab;
+    columns?: 2 | 3;
+  }
+
+  let { variant = 'default', initialTab = 'projects', columns = 2 }: Props = $props();
+  let activeTab = $derived<ProfileTab>(initialTab);
+
+  // Demo profile data based on variant
+  const profileData = $derived.by(() => {
+    if (variant === 'company') {
+      return {
+        name: 'Acme Corporation',
+        tagline: 'Building the future of enterprise software',
+        industry: 'Technology',
+        employees: 1250,
+        founded: '2015',
+        website: 'acme.com',
+        location: 'San Francisco, CA',
+        followers: 8420,
+        following: 312,
+        stats: [
+          { label: t('profile.employees'), value: '1,250' },
+          { label: t('publicProfile.projects'), value: '48' },
+          { label: t('publicProfile.teams'), value: '12' },
+        ],
+        tags: ['SaaS', 'Enterprise', 'Cloud', 'AI'],
+      };
+    } else if (variant === 'gamer') {
+      return {
+        name: 'ShadowFox',
+        tagline: 'Pro gamer & content creator',
+        gamerTag: 'ShadowFox#7742',
+        level: 42,
+        rank: 'Diamond II',
+        location: 'Seoul, KR',
+        followers: 24600,
+        following: 180,
+        stats: [
+          { label: t('profile.gamesPlayed'), value: '1,284' },
+          { label: t('profile.winRate'), value: '68%' },
+          { label: t('profile.rank'), value: 'Diamond II' },
+        ],
+        tags: ['FPS', 'RPG', 'Streaming', 'Esports'],
+      };
+    }
+    return {
+      name: 'Alex Chen',
+      tagline: 'Full-stack developer & open source enthusiast',
+      location: 'Shanghai, CN',
+      website: 'alexchen.dev',
+      joinedDate: '2023',
+      followers: 1234,
+      following: 567,
+      stats: [
+        { label: t('publicProfile.projects'), value: '24' },
+        { label: t('publicProfile.followers'), value: '1.2K' },
+        { label: t('publicProfile.following'), value: '567' },
+      ],
+      tags: ['TypeScript', 'Svelte', 'Node.js', 'Open Source'],
+    };
+  });
+
+  // Demo data
+  const demoProjects = [
+    { id: '1', name: 'Dashboard Redesign', description: 'Modern admin dashboard with real-time analytics and customizable widgets.', members: 8, tasks: 34, status: 'active' as const, tags: ['UI', 'Analytics'] },
+    { id: '2', name: 'API Gateway v2', description: 'High-performance API gateway with rate limiting and circuit breaker patterns.', members: 5, tasks: 21, status: 'active' as const, tags: ['Backend', 'Infra'] },
+    { id: '3', name: 'Mobile App', description: 'Cross-platform mobile application built with React Native.', members: 12, tasks: 56, status: 'completed' as const, tags: ['Mobile', 'React'] },
+    { id: '4', name: 'Data Pipeline', description: 'Real-time data processing pipeline for event streaming.', members: 3, tasks: 18, status: 'on-hold' as const, tags: ['Data', 'Streaming'] },
+  ];
+
+  const demoActivities = [
+    { id: '1', type: 'posted' as const, user: 'Alex Chen', content: 'Just shipped the new dashboard redesign with real-time analytics support.', timestamp: '2 hours ago' },
+    { id: '2', type: 'commented' as const, user: 'Alex Chen', target: 'API Gateway PR #42', content: 'Looks great, just a few minor suggestions on error handling.', timestamp: '5 hours ago' },
+    { id: '3', type: 'created' as const, user: 'Alex Chen', target: 'Mobile App project', timestamp: '1 day ago' },
+    { id: '4', type: 'joined' as const, user: 'Alex Chen', target: 'Design Systems Guild', timestamp: '3 days ago' },
+    { id: '5', type: 'starred' as const, user: 'Alex Chen', target: 'svadmin/svadmin', timestamp: '1 week ago' },
+  ];
+
+  const demoTeams = [
+    { id: '1', name: 'Frontend Platform', description: 'Building the core UI component library and design system.', members: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }], totalMembers: 8, color: '#3b82f6' },
+    { id: '2', name: 'Backend Services', description: 'API development, microservices architecture, and infrastructure.', members: [{ name: 'Dave' }, { name: 'Eve' }], totalMembers: 5, color: '#10b981' },
+    { id: '3', name: 'Design', description: 'User experience research and visual design.', members: [{ name: 'Frank' }, { name: 'Grace' }, { name: 'Hank' }, { name: 'Ivy' }], totalMembers: 6, color: '#f59e0b' },
+  ];
+</script>
+
+<div class="space-y-6" data-svadmin-content-page="public-profile">
+  <!-- Cover + Profile Header -->
+  <Card.Card class="overflow-hidden border-border/60">
+    <div class="h-40 bg-gradient-to-r from-primary/25 via-primary/15 to-accent/20 relative">
+      <div class="absolute inset-0 opacity-[0.06]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 24px 24px;"></div>
+    </div>
+    <Card.CardContent class="relative px-6 pb-5">
+      <div class="-mt-12 flex flex-col sm:flex-row sm:items-end gap-4">
+        <div class="ring-4 ring-card rounded-2xl overflow-hidden shrink-0">
+          <div class="flex h-24 w-24 items-center justify-center bg-primary/10 text-primary text-3xl font-bold">
+            {profileData.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
+          </div>
+        </div>
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold text-foreground">{profileData.name}</h2>
+          {#if profileData.tagline}
+            <p class="text-muted-foreground">{profileData.tagline}</p>
+          {/if}
+          <div class="mt-2 flex flex-wrap gap-3 text-sm text-muted-foreground">
+            {#if profileData.location}
+              <span class="flex items-center gap-1"><MapPin class="h-3.5 w-3.5" />{profileData.location}</span>
+            {/if}
+            {#if profileData.website}
+              <span class="flex items-center gap-1"><Link class="h-3.5 w-3.5" />{profileData.website}</span>
+            {/if}
+            {#if 'joinedDate' in profileData && profileData.joinedDate}
+              <span class="flex items-center gap-1"><Calendar class="h-3.5 w-3.5" />{t('publicProfile.joinedDate', { date: profileData.joinedDate })}</span>
+            {/if}
+          </div>
+        </div>
+        <div class="flex gap-2 shrink-0">
+          <Button size="sm">{t('publicProfile.editProfile')}</Button>
+          <Button size="sm" variant="outline">{t('publicProfile.sendMessage')}</Button>
+          <Button size="sm" variant="ghost"><MoreHorizontal class="h-4 w-4" /></Button>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      {#if profileData.stats.length > 0}
+        <div class="mt-4 grid grid-cols-3 gap-4 border-t pt-4">
+          {#each profileData.stats as stat (stat.label)}
+            <div class="text-center">
+              <div class="text-xl font-bold text-foreground">{stat.value}</div>
+              <div class="text-xs text-muted-foreground">{stat.label}</div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      <!-- Tags -->
+      {#if profileData.tags.length > 0}
+        <div class="mt-3 flex flex-wrap gap-1.5">
+          {#each profileData.tags as tag (tag)}
+            <Badge variant="outline" class="text-xs">{tag}</Badge>
+          {/each}
+        </div>
+      {/if}
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Tabs: Projects / Activity / Teams -->
+  <Tabs.Root value={activeTab}>
+    <Tabs.List class="w-full justify-start border-b">
+      <Tabs.Trigger value="projects" active={activeTab === 'projects'} onclick={() => activeTab = 'projects'} class="gap-1.5">{t('publicProfile.projects')}</Tabs.Trigger>
+      <Tabs.Trigger value="activity" active={activeTab === 'activity'} onclick={() => activeTab = 'activity'} class="gap-1.5">{t('publicProfile.activity')}</Tabs.Trigger>
+      <Tabs.Trigger value="teams" active={activeTab === 'teams'} onclick={() => activeTab = 'teams'} class="gap-1.5">{t('publicProfile.teams')}</Tabs.Trigger>
+    </Tabs.List>
+    <Tabs.Content value="projects" active={activeTab === 'projects'} class="mt-4">
+      <ProjectsGrid {columns} projects={demoProjects} />
+    </Tabs.Content>
+    <Tabs.Content value="activity" active={activeTab === 'activity'} class="mt-4">
+      <ActivityTimeline activities={demoActivities} />
+    </Tabs.Content>
+    <Tabs.Content value="teams" active={activeTab === 'teams'} class="mt-4">
+      <TeamsShowcase teams={demoTeams} />
+    </Tabs.Content>
+  </Tabs.Root>
+</div>

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

@@ -0,0 +1,10 @@
+type ProfileVariant = 'default' | 'company' | 'gamer';
+type ProfileTab = 'projects' | 'activity' | 'teams';
+interface Props {
+    variant?: ProfileVariant;
+    initialTab?: ProfileTab;
+    columns?: 2 | 3;
+}
+declare const PublicProfilePage: import("svelte").Component<Props, {}, "">;
+type PublicProfilePage = ReturnType<typeof PublicProfilePage>;
+export default PublicProfilePage;

package/dist/components/profile/TeamsShowcase.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Users, ArrowRight } from '@lucide/svelte';
+
+  interface TeamMember {
+    name: string;
+    avatar?: string;
+    role?: string;
+  }
+
+  interface Team {
+    id: string;
+    name: string;
+    description: string;
+    members: TeamMember[];
+    totalMembers: number;
+    color?: string;
+  }
+
+  interface Props {
+    teams?: Team[];
+  }
+
+  let { teams = [] }: Props = $props();
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+</script>
+
+<div class="space-y-4">
+  <h3 class="text-lg font-semibold text-foreground">{t('publicProfile.teams')}</h3>
+
+  {#if teams.length === 0}
+    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
+      <p class="text-sm text-muted-foreground">{t('publicProfile.noTeams')}</p>
+    </div>
+  {:else}
+    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
+      {#each teams 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">{team.totalMembers} {t('publicProfile.projectMembers', { count: team.totalMembers })}</p>
+                </div>
+              </div>
+              <Badge variant="secondary" class="shrink-0">
+                <Users class="h-3 w-3 mr-1" />{team.totalMembers}
+              </Badge>
+            </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="pt-2 border-t">
+              <Button variant="ghost" size="sm" class="w-full">
+                {t('publicProfile.viewProfile')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
+              </Button>
+            </div>
+          </Card.CardContent>
+        </Card.Card>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,19 @@
+interface TeamMember {
+    name: string;
+    avatar?: string;
+    role?: string;
+}
+interface Team {
+    id: string;
+    name: string;
+    description: string;
+    members: TeamMember[];
+    totalMembers: number;
+    color?: string;
+}
+interface Props {
+    teams?: Team[];
+}
+declare const TeamsShowcase: import("svelte").Component<Props, {}, "">;
+type TeamsShowcase = ReturnType<typeof TeamsShowcase>;
+export default TeamsShowcase;

package/dist/components/ui/pagination/pagination-ellipsis.svelte

@@ -6,7 +6,7 @@
   let { class: className, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
 </script>
 
-<span aria-hidden="true" data-slot="pagination-ellipsis" class={cn("flex size-9 items-center justify-center", className)} {...restProps}>
+<span aria-hidden="true" data-slot="pagination-ellipsis" class={cn("flex size-8 items-center justify-center", className)} {...restProps}>
   <Ellipsis class="size-4" />
   <span class="sr-only">More pages</span>
 </span>

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { default as FieldRenderer } from './components/FieldRenderer.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as LoginPage } from './components/LoginPage.svelte';
 export { default as RegisterPage } from './components/RegisterPage.svelte';
 export { default as ForgotPasswordPage } from './components/ForgotPasswordPage.svelte';
@@ -59,6 +60,11 @@ export { default as SettingsPage } from "./components/SettingsPage.svelte";
 export { setRichTextEditor, getRichTextEditor } from "./editor-config.svelte.js";
 export { default as AppearanceSettings } from "./components/AppearanceSettings.svelte";
 export { default as AboutSettings } from "./components/AboutSettings.svelte";
+export { default as SecuritySettings } from "./components/SecuritySettings.svelte";
+export { default as IntegrationsSettings } from "./components/IntegrationsSettings.svelte";
+export { default as NotificationsSettings } from "./components/NotificationsSettings.svelte";
+export { default as ApiSettings } from "./components/ApiSettings.svelte";
+export { default as ErrorPage } from "./components/ErrorPage.svelte";
 export { default as PermissionMatrix } from "./components/PermissionMatrix.svelte";
 export type { RoleInfo, ResourceInfo, ActionInfo } from "./types.js";
 export { default as RolesSettings } from "./components/RolesSettings.svelte";
@@ -120,3 +126,20 @@ export { setComponentRegistry, getComponentRegistry, useComponent, type Componen
 export { builtinDisplayComponents, registerDisplayComponent, getDisplayComponent, hasDisplayComponent, } from './components/fieldComponentMap';
 export type { FieldComponentMap } from './components/fieldComponentMap';
 export { clickOutside, shortcut, intersect, copyOnClick } from './actions';
+export { default as ProfileCard } from './components/profile/ProfileCard.svelte';
+export { default as ProjectsGrid } from './components/profile/ProjectsGrid.svelte';
+export { default as ActivityTimeline } from './components/profile/ActivityTimeline.svelte';
+export { default as TeamsShowcase } from './components/profile/TeamsShowcase.svelte';
+export { default as PublicProfilePage } from './components/profile/PublicProfilePage.svelte';
+export { default as GetStartedPage } from './components/account/GetStartedPage.svelte';
+export { default as CompanyProfilePage } from './components/account/CompanyProfilePage.svelte';
+export { default as SettingsPlainPage } from './components/account/SettingsPlainPage.svelte';
+export { default as SettingsSidebarPage } from './components/account/SettingsSidebarPage.svelte';
+export { default as SettingsEnterprisePage } from './components/account/SettingsEnterprisePage.svelte';
+export { default as ImportMembersPage } from './components/account/ImportMembersPage.svelte';
+export { default as MembersStarterPage } from './components/account/MembersStarterPage.svelte';
+export { default as SecurityLogPage } from './components/account/SecurityLogPage.svelte';
+export { default as TeamMembersPage } from './components/account/TeamMembersPage.svelte';
+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';

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as FieldRenderer } from './components/FieldRenderer.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as LoginPage } from './components/LoginPage.svelte';
 export { default as RegisterPage } from './components/RegisterPage.svelte';
 export { default as ForgotPasswordPage } from './components/ForgotPasswordPage.svelte';
@@ -64,6 +65,11 @@ export { setRichTextEditor, getRichTextEditor } from "./editor-config.svelte.js"
 // Settings & Preferences
 export { default as AppearanceSettings } from "./components/AppearanceSettings.svelte";
 export { default as AboutSettings } from "./components/AboutSettings.svelte";
+export { default as SecuritySettings } from "./components/SecuritySettings.svelte";
+export { default as IntegrationsSettings } from "./components/IntegrationsSettings.svelte";
+export { default as NotificationsSettings } from "./components/NotificationsSettings.svelte";
+export { default as ApiSettings } from "./components/ApiSettings.svelte";
+export { default as ErrorPage } from "./components/ErrorPage.svelte";
 export { default as PermissionMatrix } from "./components/PermissionMatrix.svelte";
 export { default as RolesSettings } from "./components/RolesSettings.svelte";
 export { default as AuditLogViewer } from "./components/AuditLogViewer.svelte";
@@ -131,3 +137,24 @@ export { setComponentRegistry, getComponentRegistry, useComponent, } from './com
 export { builtinDisplayComponents, registerDisplayComponent, getDisplayComponent, hasDisplayComponent, } from './components/fieldComponentMap';
 // Svelte Actions
 export { clickOutside, shortcut, intersect, copyOnClick } from './actions';
+// Public Profile
+export { default as ProfileCard } from './components/profile/ProfileCard.svelte';
+export { default as ProjectsGrid } from './components/profile/ProjectsGrid.svelte';
+export { default as ActivityTimeline } from './components/profile/ActivityTimeline.svelte';
+export { default as TeamsShowcase } from './components/profile/TeamsShowcase.svelte';
+export { default as PublicProfilePage } from './components/profile/PublicProfilePage.svelte';
+// Account extensions
+export { default as GetStartedPage } from './components/account/GetStartedPage.svelte';
+export { default as CompanyProfilePage } from './components/account/CompanyProfilePage.svelte';
+export { default as SettingsPlainPage } from './components/account/SettingsPlainPage.svelte';
+export { default as SettingsSidebarPage } from './components/account/SettingsSidebarPage.svelte';
+export { default as SettingsEnterprisePage } from './components/account/SettingsEnterprisePage.svelte';
+export { default as ImportMembersPage } from './components/account/ImportMembersPage.svelte';
+export { default as MembersStarterPage } from './components/account/MembersStarterPage.svelte';
+export { default as SecurityLogPage } from './components/account/SecurityLogPage.svelte';
+export { default as TeamMembersPage } from './components/account/TeamMembersPage.svelte';
+// Network
+export { default as UserCardsNFTPage } from './components/network/UserCardsNFTPage.svelte';
+export { default as TeamCrewTablePage } from './components/network/TeamCrewTablePage.svelte';
+// Auth extensions
+export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';

package/dist/router-state.svelte.js

@@ -10,9 +10,26 @@ const ROUTES = [
     '/register',
     '/forgot-password',
     '/update-password',
+    '/2fa',
     '/settings',
     '/settings/:tab',
     '/',
+    '/public-profile',
+    '/public-profile/projects/:columns',
+    '/public-profile/activity',
+    '/public-profile/teams',
+    '/public-profile/profiles/:variant',
+    '/account/get-started',
+    '/account/company-profile',
+    '/account/settings-plain',
+    '/account/settings-sidebar',
+    '/account/settings-enterprise',
+    '/account/import-members',
+    '/account/members-starter',
+    '/account/team-members',
+    '/account/security-log',
+    '/network/user-cards',
+    '/network/team-crew',
     '/:resource',
     '/:resource/create',
     '/:resource/edit/:id',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.34.10",
+  "version": "0.36.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -33,7 +33,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.27.1",
+    "@svadmin/core": "^0.29.0",
     "@tanstack/svelte-query": "^6.1.29",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.15.0",