@svadmin/ui 0.38.7 → 0.40.0

package/dist/components/Layout.svelte

@@ -7,6 +7,7 @@
   import CommandPalette from './CommandPalette.svelte';
   import KeyboardShortcuts from './KeyboardShortcuts.svelte';
   import ChatDialog from './ChatDialog.svelte';
+  import DevTools from './DevTools.svelte';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import { captureAdminContext, getAuthProvider, getTaskProvider } from '@svadmin/core';
@@ -121,6 +122,9 @@
       </div>
     </div>
   </div>
+  <div class="hidden" aria-hidden="true">
+    <DevTools docked />
+  </div>
 {:else}
   <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
@@ -145,6 +149,7 @@
       <!-- Header with mobile hamburger -->
       <Header
         {siteUrl}
+        {menu}
         showSearch={true}
         onSearchClick={() => { commandOpen = true; }}
       >
@@ -182,6 +187,11 @@
           {/key}
         </div>
       </main>
+
+      <footer class="flex min-h-14 shrink-0 items-center justify-end gap-2 border-t border-border/60 bg-background px-4 empty:hidden">
+        <DevTools docked />
+        <ChatDialog docked />
+      </footer>
     </div>
   </div>
   <CommandPalette 
@@ -193,5 +203,4 @@
     }}
   />
   <KeyboardShortcuts bind:open={shortcutsOpen} />
-  <ChatDialog />
 {/if}

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/SettingsPage.svelte

@@ -88,10 +88,22 @@
     },
   ];
 
-  const resolvedSections = $derived(customSections ?? defaultSections);
+  const resolvedSections = $derived.by(() => {
+    if (customSections) return customSections;
+    const accountPath = getPath().startsWith('/account/');
+    if (!accountPath) return defaultSections;
+
+    return defaultSections.map((section) => ({
+      ...section,
+      items: section.items.map((item) => ({
+        ...item,
+        path: `/account/${item.key === 'api' ? 'api-keys' : item.key}`,
+      })),
+    }));
+  });
   const sectionKeys = $derived(new Set(resolvedSections.flatMap((section) => section.items.map((item) => item.key))));
 
-  import { getParams, getRoute } from "../router-state.svelte.js";
+  import { getParams, getPath, getRoute } from "../router-state.svelte.js";
 
   const i18n = useTranslation();
 

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/SystemPageShell.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { ArrowLeft } from '@lucide/svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
+  import { Button } from './ui/button/index.js';
+
+  let { title = 'svadmin', children }: { title?: string; children: Snippet } = $props();
+
+  const adminContext = captureAdminContext();
+  const i18n = useTranslation();
+</script>
+
+<div class="min-h-screen bg-background text-foreground">
+  <header class="flex h-[70px] items-center justify-between border-b border-border/60 px-4 sm:px-6">
+    <button
+      type="button"
+      class="inline-flex items-center gap-2.5 text-sm font-semibold"
+      onclick={() => adminContext.navigate('/')}
+    >
+      <SvadminLogo size={30} />
+      <span>{title}</span>
+    </button>
+    <Button variant="ghost" size="sm" onclick={() => adminContext.back()}>
+      <ArrowLeft class="h-4 w-4" />
+      <span class="hidden sm:inline">{i18n.t('common.back')}</span>
+    </Button>
+  </header>
+
+  <main class="min-h-[calc(100vh-70px)] bg-muted/20 px-3 py-5 sm:px-6 sm:py-8">
+    {@render children()}
+  </main>
+</div>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string;
+    children: Snippet;
+};
+declare const SystemPageShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type SystemPageShell = ReturnType<typeof SystemPageShell>;
+export default SystemPageShell;

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>