@svadmin/ui 0.38.7 → 0.39.0

package/dist/components/AdminApp.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   const loadPublicProfilePage = () => import('./profile/PublicProfilePage.svelte');
   const loadGetStartedPage = () => import('./account/GetStartedPage.svelte');
+  const loadUserProfilePage = () => import('./account/UserProfilePage.svelte');
   const loadCompanyProfilePage = () => import('./account/CompanyProfilePage.svelte');
   const loadSettingsPlainPage = () => import('./account/SettingsPlainPage.svelte');
   const loadSettingsSidebarPage = () => import('./account/SettingsSidebarPage.svelte');
@@ -319,11 +320,11 @@
       {:else if route === '/public-profile/teams'}
         <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'teams' }} />
       {:else if route === '/public-profile/profiles/:variant'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: (params.variant === 'company' || params.variant === 'gamer' || params.variant === 'default' ? params.variant : 'default') as 'company' | 'gamer' | 'default' }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: (params.variant === 'company' || params.variant === 'gamer' || params.variant === 'default' ? params.variant : 'default') as 'company' | 'gamer' | 'default', showSections: true }} />
       {:else if route === '/account/get-started' || route === '/account/home/get-started'}
         <LazyPage loader={loadGetStartedPage} props={{}} />
       {:else if route === '/account/home/user-profile'}
-        <SettingsPage />
+        <LazyPage loader={loadUserProfilePage} props={{}} />
       {:else if route === '/account/company-profile' || route === '/account/home/company-profile'}
         <LazyPage loader={loadCompanyProfilePage} props={{}} />
       {:else if route === '/account/settings-plain' || route === '/account/home/settings-plain'}

package/dist/components/ApiSettings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
 
-  import { AlertCircle, Calendar, Check, Copy, Key, Plus, ShieldCheck, Trash2 } from '@lucide/svelte';
+  import { AlertCircle, Calendar, Check, Copy, Key, Plus, ShieldCheck, Trash2, Webhook } from '@lucide/svelte';
   import * as Card from './ui/card/index.js';
   import { Badge } from './ui/badge/index.js';
   import { Button } from './ui/button/index.js';
@@ -30,6 +30,35 @@
   let showCreatedToken = $state(false);
   let copiedKeyId = $state<string | null>(null);
 
+  interface WebhookEntry {
+    id: string;
+    name: string;
+    url: string;
+    eventType: string;
+  }
+
+  let webhooks = $state<WebhookEntry[]>([
+    { id: 'wh-1', name: 'Order Events', url: 'https://api.acme.com/hooks/orders', eventType: 'resource.updated' },
+  ]);
+  let newWebhookName = $state('');
+  let newWebhookUrl = $state('');
+  let newWebhookEvent = $state('resource.created');
+
+  function handleAddWebhook(event: SubmitEvent) {
+    event.preventDefault();
+    if (!newWebhookName.trim() || !newWebhookUrl.trim()) return;
+    webhooks = [
+      ...webhooks,
+      { id: Date.now().toString(), name: newWebhookName.trim(), url: newWebhookUrl.trim(), eventType: newWebhookEvent },
+    ];
+    newWebhookName = '';
+    newWebhookUrl = '';
+  }
+
+  function deleteWebhook(id: string) {
+    webhooks = webhooks.filter(w => w.id !== id);
+  }
+
   function generateDemoToken() {
     const randomHex = Array.from({ length: 24 }, () => Math.floor(Math.random() * 16).toString(16)).join('');
     return `sv_demo_${randomHex}`;
@@ -190,5 +219,61 @@
         </div>
       </Card.CardContent>
     </Card.Card>
+
+    <!-- Webhooks -->
+    <Card.Card>
+      <Card.CardHeader>
+        <Card.CardTitle class="flex items-center gap-2">
+          <Webhook class="h-4 w-4 text-muted-foreground" />
+          {i18n.t('api.webhooks')}
+        </Card.CardTitle>
+        <Card.CardDescription>{i18n.t('api.webhooksDesc')}</Card.CardDescription>
+      </Card.CardHeader>
+      <Card.CardContent class="space-y-4">
+        <form class="grid gap-3 sm:grid-cols-[1fr_1fr_180px_auto]" onsubmit={handleAddWebhook}>
+          <div class="space-y-1.5">
+            <Label for="webhook-name">{i18n.t('api.webhookName')}</Label>
+            <Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" />
+          </div>
+          <div class="space-y-1.5">
+            <Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label>
+            <Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" />
+          </div>
+          <div class="space-y-1.5">
+            <Label for="webhook-event">{i18n.t('api.eventType')}</Label>
+            <select id="webhook-event" bind:value={newWebhookEvent} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring">
+              <option value="resource.created">resource.created</option>
+              <option value="resource.updated">resource.updated</option>
+              <option value="resource.deleted">resource.deleted</option>
+              <option value="auth.login">auth.login</option>
+            </select>
+          </div>
+          <div class="flex items-end">
+            <Button type="submit" size="sm" disabled={!newWebhookName.trim() || !newWebhookUrl.trim()}>
+              <Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('api.addWebhook')}
+            </Button>
+          </div>
+        </form>
+
+        <div class="divide-y border-t">
+          {#each webhooks as hook (hook.id)}
+            <div class="flex items-center justify-between gap-4 py-3">
+              <div class="min-w-0">
+                <p class="truncate text-sm font-medium text-foreground">{hook.name}</p>
+                <p class="truncate font-mono text-xs text-muted-foreground">{hook.url}</p>
+              </div>
+              <div class="flex shrink-0 items-center gap-2">
+                <Badge variant="secondary" class="px-2 py-0 text-[10px]">{hook.eventType}</Badge>
+                <Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} title={i18n.t('common.delete')}>
+                  <Trash2 class="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          {:else}
+            <p class="py-4 text-center text-sm text-muted-foreground">{i18n.t('api.noWebhooks')}</p>
+          {/each}
+        </div>
+      </Card.CardContent>
+    </Card.Card>
   </div>
 </div>

package/dist/components/ForgotPasswordPage.svelte

@@ -6,7 +6,8 @@
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
   import * as Alert from './ui/alert/index.js';
-  import { User, ArrowLeft, CheckCircle, Loader2, AlertCircle, Shield } from '@lucide/svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
+  import { User, ArrowLeft, CheckCircle, Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -49,9 +50,7 @@
 
     <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
       <div class="flex items-center gap-3">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
-          <Shield class="h-5 w-5 text-white" />
-        </div>
+        <SvadminLogo size={36} onDark />
         <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
       </div>
 
@@ -75,10 +74,8 @@
   <!-- Right form panel -->
   <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
     <div class="w-full max-w-[400px]">
-      <div class="flex items-center gap-3 mb-8 lg:hidden">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-          <Shield class="h-5 w-5" />
-        </div>
+      <div class="mb-8 flex items-center gap-3 lg:hidden">
+        <SvadminLogo size={36} />
         <span class="text-lg font-semibold tracking-tight">{title}</span>
       </div>
 

package/dist/components/LoginPage.svelte

@@ -6,8 +6,9 @@
   import { Label } from './ui/label/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
   import { Separator } from './ui/separator/index.js';
-  import { User, Loader2, AlertCircle, Shield } from '@lucide/svelte';
+  import { User, Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -77,9 +78,7 @@
 
     <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
       <div class="flex items-center gap-3">
-        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-white/15 backdrop-blur-sm">
-          <Shield class="h-5 w-5 text-white" />
-        </div>
+        <SvadminLogo size={44} onDark />
         <span class="text-xl font-semibold text-white tracking-tight">{title}</span>
       </div>
 
@@ -102,10 +101,8 @@
 
   <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-10 lg:p-14">
     <div class="w-full max-w-[460px] space-y-8">
-      <div class="flex items-center gap-3 mb-8 lg:hidden">
-        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
-          <Shield class="h-5 w-5" />
-        </div>
+      <div class="mb-8 flex items-center gap-3 lg:hidden">
+        <SvadminLogo size={44} />
         <span class="text-xl font-semibold tracking-tight text-foreground">{title}</span>
       </div>
 

package/dist/components/RegisterPage.svelte

@@ -6,7 +6,8 @@
   import { Label } from './ui/label/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { User, Loader2, AlertCircle, Shield } from '@lucide/svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
+  import { User, Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -53,9 +54,7 @@
 
     <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
       <div class="flex items-center gap-3">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
-          <Shield class="h-5 w-5 text-white" />
-        </div>
+        <SvadminLogo size={36} onDark />
         <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
       </div>
 
@@ -79,10 +78,8 @@
   <!-- Right form panel -->
   <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
     <div class="w-full max-w-[400px]">
-      <div class="flex items-center gap-3 mb-8 lg:hidden">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-          <Shield class="h-5 w-5" />
-        </div>
+      <div class="mb-8 flex items-center gap-3 lg:hidden">
+        <SvadminLogo size={36} />
         <span class="text-lg font-semibold tracking-tight">{title}</span>
       </div>
 

package/dist/components/Sidebar.svelte

@@ -9,6 +9,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import * as Tooltip from './ui/tooltip/index.js';
   import SidebarItem from './SidebarItem.svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
 
   import { ScrollArea } from './ui/scroll-area/index.js';
   import * as Collapsible from './ui/collapsible/index.js';
@@ -218,13 +219,18 @@
 >
   <div class="flex h-[70px] items-center shrink-0" class:px-5={!collapsed} class:justify-center={collapsed}>
     {#if !collapsed}
-      <a href={formatSidebarLink('/')} class="flex items-center gap-2.5 group" onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
-        <div class="w-[34px] h-[34px] rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 transition-transform group-hover:scale-105" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+      <a href={formatSidebarLink('/')} class="group flex items-center gap-2.5" onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
+        <SvadminLogo />
         <span class="font-semibold text-[15px] tracking-[-0.01em] text-sidebar-foreground">{title}</span>
       </a>
     {:else}
-      <a href={formatSidebarLink('/')} class="group" aria-label={title} onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
-        <div class="w-[34px] h-[34px] rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 transition-transform group-hover:scale-105" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+      <a
+        href={formatSidebarLink('/')}
+        class="group"
+        aria-label={title}
+        onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}
+      >
+        <SvadminLogo />
       </a>
     {/if}
   </div>

package/dist/components/SvadminLogo.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  let {
+    size = 34,
+    onDark = false,
+  }: {
+    size?: number;
+    onDark?: boolean;
+  } = $props();
+</script>
+
+<span
+  aria-hidden="true"
+  class="inline-block shrink-0 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shadow-sm {onDark ? 'ring-1 ring-white/35' : ''}"
+  style:width={`${size}px`}
+  style:height={`${size}px`}
+></span>

package/dist/components/SvadminLogo.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: number;
+    onDark?: boolean;
+};
+declare const SvadminLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+type SvadminLogo = ReturnType<typeof SvadminLogo>;
+export default SvadminLogo;

package/dist/components/UpdatePasswordPage.svelte

@@ -5,7 +5,8 @@
   import { Button } from './ui/button/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { ShieldCheck, Loader2, AlertCircle, Shield } from '@lucide/svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
+  import { Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -47,9 +48,7 @@
 
     <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
       <div class="flex items-center gap-3">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
-          <Shield class="h-5 w-5 text-white" />
-        </div>
+        <SvadminLogo size={36} onDark />
         <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
       </div>
 
@@ -73,10 +72,8 @@
   <!-- Right form panel -->
   <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
     <div class="w-full max-w-[400px]">
-      <div class="flex items-center gap-3 mb-8 lg:hidden">
-        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-          <ShieldCheck class="h-5 w-5" />
-        </div>
+      <div class="mb-8 flex items-center gap-3 lg:hidden">
+        <SvadminLogo size={36} />
         <span class="text-lg font-semibold tracking-tight">{title}</span>
       </div>
 

package/dist/components/account/CompanyProfilePage.svelte

@@ -4,7 +4,9 @@
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
-  import { Upload, Loader2 } from '@lucide/svelte';
+  import { Badge } from '../ui/badge/index.js';
+  import * as Table from '../ui/table/index.js';
+  import { Upload, Loader2, ShieldCheck, ShieldOff } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -16,6 +18,14 @@
   let description = $state('Building the future of enterprise software with cutting-edge AI and cloud solutions.');
   let saving = $state(false);
 
+  const members = [
+    { name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', twoFactor: true, joined: '2022-03-15' },
+    { name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', twoFactor: true, joined: '2022-06-22' },
+    { name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', twoFactor: false, joined: '2023-01-10' },
+    { name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', twoFactor: true, joined: '2022-02-14' },
+    { name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', twoFactor: false, joined: '2023-04-05' },
+  ];
+
   async function handleSave() {
     saving = true;
     await new Promise(r => setTimeout(r, 800));
@@ -98,4 +108,49 @@
       </div>
     </Card.CardContent>
   </Card.Card>
+
+  <!-- Members -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{i18n.t('profileSections.members')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="p-0">
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.Head>{i18n.t('profile.name')}</Table.Head>
+            <Table.Head>{i18n.t('account.role')}</Table.Head>
+            <Table.Head>2FA</Table.Head>
+            <Table.Head class="text-right">{i18n.t('account.joined')}</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {#each members as member (member.email)}
+            <Table.Row>
+              <Table.Cell>
+                <div class="flex items-center gap-3">
+                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold">
+                    {member.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
+                  </div>
+                  <div class="min-w-0">
+                    <p class="truncate text-sm font-medium text-foreground">{member.name}</p>
+                    <p class="truncate text-xs text-muted-foreground">{member.email}</p>
+                  </div>
+                </div>
+              </Table.Cell>
+              <Table.Cell><Badge variant="secondary" class="text-[10px]">{member.role}</Badge></Table.Cell>
+              <Table.Cell>
+                {#if member.twoFactor}
+                  <ShieldCheck class="h-4 w-4 text-green-500" />
+                {:else}
+                  <ShieldOff class="h-4 w-4 text-muted-foreground/50" />
+                {/if}
+              </Table.Cell>
+              <Table.Cell class="text-right text-muted-foreground">{member.joined}</Table.Cell>
+            </Table.Row>
+          {/each}
+        </Table.Body>
+      </Table.Root>
+    </Card.CardContent>
+  </Card.Card>
 </div>

package/dist/components/account/ImportMembersPage.svelte

@@ -2,6 +2,8 @@
   import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
+  import { Switch } from '../ui/switch/index.js';
+  import { Label } from '../ui/label/index.js';
   import { Upload, Download, FileText, CheckCircle2, Loader2 } from '@lucide/svelte';
 
   const i18n = useTranslation();
@@ -12,6 +14,15 @@
   let progress = $state(0);
   let importCount = $state(0);
 
+  const importOptions = [
+    { key: 'account.importCreateUsers', checked: true },
+    { key: 'account.importUpdateUsers', checked: false },
+    { key: 'account.importNotifyPassword', checked: false },
+    { key: 'account.importExternalIds', checked: false },
+    { key: 'account.importWelcomeEmail', checked: true },
+  ];
+  let optionStates = $state<boolean[]>(importOptions.map(o => o.checked));
+
   function handleDragOver(e: DragEvent) {
     e.preventDefault();
     isDragging = true;
@@ -141,5 +152,25 @@
         </Button>
       </Card.CardContent>
     </Card.Card>
+
+    <!-- Import options -->
+    <Card.Card class="border-border/60">
+      <Card.CardHeader>
+        <Card.CardTitle class="text-base">{i18n.t('account.importOptions')}</Card.CardTitle>
+      </Card.CardHeader>
+      <Card.CardContent class="space-y-4">
+        {#each importOptions as option, i (option.key)}
+          <div class="flex items-center justify-between gap-4">
+            <Label for="import-option-{i}" class="text-sm font-normal text-foreground">{i18n.t(option.key)}</Label>
+            <Switch id="import-option-{i}" bind:checked={optionStates[i]} />
+          </div>
+        {/each}
+        <div class="flex justify-end border-t pt-4">
+          <Button onclick={() => { const input = document.getElementById('file-input'); input?.click(); }}>
+            {i18n.t('account.startImport')}
+          </Button>
+        </div>
+      </Card.CardContent>
+    </Card.Card>
   {/if}
 </div>