@svadmin/ui 0.38.7 → 0.40.0

package/dist/app.css

@@ -1363,10 +1363,6 @@ main {
     padding-right: 1rem !important;
   }
 
-  .layout-clean-flat [data-svadmin-content-page] [class*="grid-cols-3"] {
-    grid-template-columns: minmax(0, 1fr) !important;
-  }
-
   .layout-clean-flat [data-svadmin-content-page="auth-2fa"] [data-slot="card-content"],
   .layout-clean-flat [data-svadmin-content-page="error"] [data-slot="card-content"] {
     padding-left: 1rem !important;

package/dist/app.theme.css

@@ -1362,10 +1362,6 @@ main {
     padding-right: 1rem !important;
   }
 
-  .layout-clean-flat [data-svadmin-content-page] [class*="grid-cols-3"] {
-    grid-template-columns: minmax(0, 1fr) !important;
-  }
-
   .layout-clean-flat [data-svadmin-content-page="auth-2fa"] [data-slot="card-content"],
   .layout-clean-flat [data-svadmin-content-page="error"] [data-slot="card-content"] {
     padding-left: 1rem !important;

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');
@@ -42,12 +43,12 @@
   import ForgotPasswordPage from './ForgotPasswordPage.svelte';
   import UpdatePasswordPage from './UpdatePasswordPage.svelte';
   import ConfigErrorScreen from './ConfigErrorScreen.svelte';
-  import DevTools from './DevTools.svelte';
   import Sidebar from './Sidebar.svelte';
   import Header from './Header.svelte';
   import TaskQueueDrawer from './TaskQueueDrawer.svelte';
   import SettingsPage from './SettingsPage.svelte';
   import ErrorPage from './ErrorPage.svelte';
+  import SystemPageShell from './SystemPageShell.svelte';
   import LazyPage from './LazyPage.svelte';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
@@ -235,6 +236,12 @@
   const resourceNames = $derived(new Set(resources.map((resource) => resource.name)));
   const hasRouteResource = $derived(!params.resource || resourceNames.has(params.resource));
   const currentResourcePages = $derived(params.resource ? resourcePages?.[params.resource] : undefined);
+  const isStandaloneTwoFactor = $derived(route === '/2fa' || route === '/authentication/branded/2fa');
+  const standaloneErrorStatus = $derived.by((): '404' | '500' | undefined => {
+    if (route === '/authentication/error-404' || route === '/404' || (route === '/:resource' && params.resource === '404')) return '404';
+    if (route === '/authentication/error-500' || route === '/500' || (route === '/:resource' && params.resource === '500')) return '500';
+    return undefined;
+  });
 
   // Auth check
   let isAuthenticated = $state(untrack(() => !authProvider));
@@ -244,6 +251,13 @@
     await adminContext.navigate(path);
   }
 
+  function isPublicSystemRoute(currentRoute: string): boolean {
+    return currentRoute === '/authentication/error-404'
+      || currentRoute === '/authentication/error-500'
+      || currentRoute === '/404'
+      || currentRoute === '/500';
+  }
+
   $effect(() => {
     let cancelled = false;
     // Explicitly track route so auth is re-checked on navigation
@@ -261,7 +275,7 @@
       if (cancelled) return;
       isAuthenticated = result.authenticated;
       authChecked = true;
-      if (!result.authenticated && _route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
+      if (!result.authenticated && _route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password' && !isPublicSystemRoute(_route)) {
         void navigateWithinApp(result.redirectTo ?? '/login');
       }
     }).catch(err => {
@@ -269,7 +283,7 @@
       console.warn('Auth check failed:', err);
       isAuthenticated = false;
       authChecked = true;
-      if (_route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
+      if (_route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password' && !isPublicSystemRoute(_route)) {
         void navigateWithinApp('/login');
       }
     });
@@ -304,13 +318,20 @@
     <UpdatePasswordPage {title} />
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
     <ConfigErrorScreen title="{title} — {translation.t('common.configRequired')}" />
+  {:else if (isAuthenticated || !authProvider) && isStandaloneTwoFactor}
+    <SystemPageShell {title}>
+      <LazyPage loader={loadTwoFactorAuthPage} props={{}} />
+    </SystemPageShell>
+  {:else if standaloneErrorStatus}
+    <SystemPageShell {title}>
+      {@const ErrorComp = mergedComponents.ErrorPage || ErrorPage}
+      <ErrorComp status={standaloneErrorStatus} />
+    </SystemPageShell>
   {:else if isAuthenticated || !authProvider}
     <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
       {#key route + (params.resource ?? '') + (params.id ?? '') + (params.variant ?? '') + (params.columns ?? '')}
       <div class="svadmin-page-enter">
-      {#if route === '/2fa' || route === '/authentication/branded/2fa'}
-        <LazyPage loader={loadTwoFactorAuthPage} props={{}} />
-      {:else if route === '/public-profile'}
+      {#if route === '/public-profile'}
         <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects' }} />
       {:else if route === '/public-profile/projects/:columns'}
         <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: params.columns?.includes('3') ? 3 : 2 }} />
@@ -319,11 +340,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'}
@@ -348,9 +369,6 @@
         <LazyPage loader={loadTeamCrewTablePage} props={{}} />
       {:else if route.startsWith('/settings')}
         <SettingsPage />
-      {:else if route === '/500' || (route === '/:resource' && params.resource === '500')}
-        {@const ErrorComp = mergedComponents.ErrorPage || ErrorPage}
-        <ErrorComp status="500" />
       {:else if route === '/' || route === '' || route === '/inventory-dashboard'}
         {#if dashboard}
           {@render dashboard()}
@@ -398,5 +416,4 @@
     </div>
   {/if}
   <Toast />
-  <DevTools />
 </QueryClientProvider>

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

@@ -3,7 +3,13 @@
   import { cn } from '../utils.js';
   import {
     createTable,
-    createCoreRowModel,
+    tableFeatures,
+    columnOrderingFeature,
+    columnSizingFeature,
+    columnVisibilityFeature,
+    rowExpandingFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
     type ColumnDef,
     type SortingState,
     type RowSelectionState,
@@ -25,7 +31,6 @@
     row_getIsSelected,
     row_toggleSelected,
     row_getVisibleCells,
-    row_toggleExpanded,
     cell_getValue,
   } from '@tanstack/table-core/static-functions';
 
@@ -289,6 +294,14 @@
   const rowSelectionAtom = createAtom({} as RowSelectionState);
   const expandedAtom = createAtom({} as ExpandedState);
   const columnOrderAtom = createAtom([] as string[]);
+  const features = tableFeatures({
+    columnOrderingFeature,
+    columnSizingFeature,
+    columnVisibilityFeature,
+    rowExpandingFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
+  });
 
   const tableSorting = useSelector(sortingAtom);
   const tableColumnVisibility = useSelector(columnVisibilityAtom);
@@ -388,12 +401,11 @@
   });
 
   // ─── Create TanStack Table ────────────────────────────────────
-  const tbl = createTable(
+  const tbl = createTable<TableFeatures, BaseRecord>(
     {
+      features,
       get data() { return query.data?.data ?? []; },
       get columns() { return orderedColumns; },
-      getCoreRowModel: createCoreRowModel(),
-      manualPagination: true,
       manualSorting: true,
       getRowId: (row: BaseRecord) => String(row[primaryKey]),
       atoms: {
@@ -402,16 +414,11 @@
         rowSelection: rowSelectionAtom,
         expanded: expandedAtom,
       },
-      onSortingChange: sortingAtom.set,
-      onColumnVisibilityChange: columnVisibilityAtom.set,
-      onRowSelectionChange: rowSelectionAtom.set,
-      onExpandedChange: expandedAtom.set,
-      get enableRowSelection() { return selectable && (canDelete || batchActions); },
+      autoResetExpanded: false,
+      get enableRowSelection() { return selectable && (canDelete || !!batchActions); },
       get enableExpanding() { return !!expandedRowRender; },
       getRowCanExpand: () => !!expandedRowRender,
     },
-    // AutoTable reads focused atoms directly; selecting the full state triggers Svelte proxy equality warnings.
-    () => undefined,
   );
 
   $effect.pre(() => {
@@ -433,6 +440,26 @@
       rows: table_getRowModel(tbl).rows,
     };
   });
+
+  function toggleRowExpanded(rowId: string): void {
+    const current = tableExpanded.current;
+    if (current === true) {
+      expandedAtom.set(Object.fromEntries(
+        table_getRowModel(tbl).flatRows
+          .filter((row) => row.id !== rowId)
+          .map((row) => [row.id, true])
+      ));
+      return;
+    }
+    if (current[rowId]) {
+      expandedAtom.set(Object.fromEntries(
+        Object.entries(current).filter(([id, isExpanded]) => id !== rowId && isExpanded)
+      ));
+      return;
+    }
+    expandedAtom.set({ ...current, [rowId]: true });
+  }
+
   const totalPages = $derived(Math.ceil((query.data?.total ?? 0) / (pagination.pageSize ?? 10)));
 
   // ─── Pagination helpers ───────────────────────────────────────
@@ -729,7 +756,7 @@
                               onCheckedChange={() => row_toggleSelected(row)}
                             />
                           {:else if cell.column.id === '_expand'}
-                            <TooltipButton tooltip={rowIsExpanded(row.id) ? i18n.t('common.collapse') : i18n.t('common.expand')} variant="ghost" size="icon" class="h-7 w-7" onclick={() => row_toggleExpanded(row)}>
+                            <TooltipButton tooltip={rowIsExpanded(row.id) ? i18n.t('common.collapse') : i18n.t('common.expand')} variant="ghost" size="icon" class="h-7 w-7" onclick={() => toggleRowExpanded(row.id)}>
                               {#if rowIsExpanded(row.id)}
                                 <ChevronUp class="h-4 w-4" />
                               {:else}

package/dist/components/Breadcrumbs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext, getResources } from '@svadmin/core';
+  import { captureAdminContext, getResources, type MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -10,12 +10,43 @@
   const adminContext = captureAdminContext();
   const resources = $derived((() => { try { return getResources(); } catch { return []; } })());
 
-  interface Crumb { label: string; href: string; }
+  let { menu }: { menu?: MenuItem[] } = $props();
+
+  interface Crumb { label: string; href?: string; }
+
+  function normalizePath(path: string): string {
+    const normalized = path.replace(/^#/, '').split(/[?#]/)[0].replace(/\/$/, '');
+    return normalized || '/';
+  }
+
+  function findMenuTrail(items: MenuItem[], path: string, ancestors: MenuItem[] = []): MenuItem[] | undefined {
+    for (const item of items) {
+      const trail = [...ancestors, item];
+      if (item.href && normalizePath(item.href) === path) return trail;
+      if (item.children) {
+        const match = findMenuTrail(item.children, path, trail);
+        if (match) return match;
+      }
+    }
+  }
 
   const crumbs = $derived.by(() => {
     const result: Crumb[] = [{ label: i18n.t('common.home') ?? 'Home', href: adminContext.formatLink('/') }];
-    const path = getPath().replace(/^\//, ''); 
-    if (path === '') return result;
+    const currentPathname = normalizePath(getPath());
+    if (currentPathname === '/') return result;
+
+    const menuTrail = menu ? findMenuTrail(menu, currentPathname) : undefined;
+    if (menuTrail) {
+      for (const item of menuTrail) {
+        result.push({
+          label: item.label ?? item.name,
+          href: item.href ? adminContext.formatLink(normalizePath(item.href)) : undefined,
+        });
+      }
+      return result;
+    }
+
+    const path = currentPathname.replace(/^\//, '');
 
     const segments = path.split('/').filter(Boolean);
     const resourceNames = resources.map(r => r.name);
@@ -54,7 +85,7 @@
 {#if crumbs.length > 1}
   <Breadcrumb.Root class="mb-4">
     <Breadcrumb.List>
-      {#each crumbs as crumb, i (crumb.href)}
+      {#each crumbs as crumb, i (`${crumb.label}-${i}`)}
         {#if i > 0}
           <Breadcrumb.Separator />
         {/if}
@@ -62,8 +93,10 @@
           <span class="inline-flex svadmin-page-enter" style="animation-duration: 0.2s;">
           {#if i === crumbs.length - 1}
             <Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
-          {:else}
+          {:else if crumb.href}
             <Breadcrumb.Link href={crumb.href}>{crumb.label}</Breadcrumb.Link>
+          {:else}
+            <span class="text-muted-foreground">{crumb.label}</span>
           {/if}
           </span>
         </Breadcrumb.Item>

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

@@ -1,3 +1,7 @@
-declare const Breadcrumbs: import("svelte").Component<Record<string, never>, {}, "">;
+import { type MenuItem } from '@svadmin/core';
+type $$ComponentProps = {
+    menu?: MenuItem[];
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
 export default Breadcrumbs;

package/dist/components/ChatDialog.svelte

@@ -13,6 +13,8 @@
   const i18n = useTranslation();
 
   interface Props {
+    /** Render the launcher inside a layout toolbar instead of as a floating action button. */
+    docked?: boolean;
     /** localStorage key for chat history persistence. Set to '' to disable. */
     persistKey?: string;
     /** Custom persistence callback — called when messages change */
@@ -24,6 +26,7 @@
   }
 
   const {
+    docked = false,
     persistKey = 'svadmin-chat',
     onPersist,
     onRestore,
@@ -420,7 +423,7 @@
         tooltip={i18n.t('chat.title') || 'AI Assistant'}
         variant="default"
         size="icon"
-        class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-[9998] h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 transition-all bg-primary text-primary-foreground"
+        class="{docked ? 'relative h-9 w-9 rounded-md shadow-sm' : 'fixed bottom-4 right-4 h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 sm:bottom-6 sm:right-6'} z-[9998] transition-all bg-primary text-primary-foreground"
         onclick={() => { open = true; minimized = false; }}
       >
         <MessageCircle class="h-5 w-5" />
@@ -608,4 +611,3 @@
   {/if}
 {/if}
 
-

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

@@ -1,5 +1,7 @@
 import type { ChatMessage, ChatAction } from '@svadmin/core';
 interface Props {
+    /** Render the launcher inside a layout toolbar instead of as a floating action button. */
+    docked?: boolean;
     /** localStorage key for chat history persistence. Set to '' to disable. */
     persistKey?: string;
     /** Custom persistence callback — called when messages change */

package/dist/components/DevTools.svelte

@@ -14,6 +14,8 @@
 
   const i18n = useTranslation();
 
+  let { docked = false }: { docked?: boolean } = $props();
+
   const adminContext = captureAdminContext();
   let visible = $state(false);
   let collapsed = $state(false);
@@ -138,7 +140,7 @@
       tooltip={i18n.t('devtools.title')}
       variant="default"
       size="icon"
-      class="fixed bottom-4 right-4 z-[9999] h-9 w-9 rounded-full shadow-lg opacity-60 hover:opacity-100 hover:scale-110 transition-all"
+      class="{docked ? 'relative rounded-md shadow-sm' : 'fixed bottom-5 right-[4.75rem] rounded-full shadow-lg sm:bottom-7 sm:right-[5.5rem]'} z-[9999] h-9 w-9 opacity-60 hover:opacity-100 hover:scale-110 transition-all"
       onclick={toggle}
     >
       <Bug class="h-4 w-4" />

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

@@ -1,3 +1,6 @@
-declare const DevTools: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    docked?: boolean;
+};
+declare const DevTools: import("svelte").Component<$$ComponentProps, {}, "">;
 type DevTools = ReturnType<typeof DevTools>;
 export default DevTools;

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

@@ -3,7 +3,7 @@
   import { Moon, Sun, Search, MonitorUp } from '@lucide/svelte';
   import { Button } from './ui/button';
   import TooltipButton from './TooltipButton.svelte';
-  import { getResolvedTheme, toggleTheme } from '@svadmin/core';
+  import { getResolvedTheme, toggleTheme, type MenuItem } from '@svadmin/core';
   import Breadcrumbs from './Breadcrumbs.svelte';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -20,6 +20,7 @@
     /** Slot for additional actions on the right side of the header */
     rightActions,
     siteUrl,
+    menu,
   } = $props<{
     showThemeToggle?: boolean;
     showBreadcrumbs?: boolean;
@@ -28,6 +29,7 @@
     children?: import('svelte').Snippet;
     rightActions?: import('svelte').Snippet;
     siteUrl?: string;
+    menu?: MenuItem[];
   }>();
 
   // Retrieve optional component overrides from registry
@@ -47,7 +49,7 @@
       {#if CustomBreadcrumbs}
         <CustomBreadcrumbs />
       {:else}
-        <Breadcrumbs />
+        <Breadcrumbs {menu} />
       {/if}
     {/if}
   </div>
@@ -69,7 +71,7 @@
     {#if showSearch && onSearchClick}
       <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-9 px-3 rounded-lg border-border/60">
         <Search class="h-3.5 w-3.5" />
-        <span class="hidden sm:inline text-xs">{i18n.t('common.search')}...</span>
+        <span class="hidden sm:inline text-xs">{i18n.t('common.search')}</span>
         <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
           <span class="text-xs">⌘</span>K
         </kbd>

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

@@ -1,3 +1,4 @@
+import { type MenuItem } from '@svadmin/core';
 type $$ComponentProps = {
     showThemeToggle?: boolean;
     showBreadcrumbs?: boolean;
@@ -6,6 +7,7 @@ type $$ComponentProps = {
     children?: import('svelte').Snippet;
     rightActions?: import('svelte').Snippet;
     siteUrl?: string;
+    menu?: MenuItem[];
 };
 declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
 type Header = ReturnType<typeof Header>;