@svadmin/ui 0.39.0 → 0.40.1

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

@@ -43,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';
@@ -236,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));
@@ -245,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
@@ -262,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 => {
@@ -270,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');
       }
     });
@@ -305,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 }} />
@@ -349,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()}
@@ -399,5 +416,4 @@
     </div>
   {/if}
   <Toast />
-  <DevTools />
 </QueryClientProvider>

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/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>;

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

@@ -1,19 +1,6 @@
 <script lang="ts">
 /* eslint-disable svelte/no-at-html-tags */
-  import * as markedPkg from "marked";
-  import * as markedHighlightPkg from "marked-highlight";
-  import * as hljsPkg from "highlight.js";
-  import * as DOMPurifyPkg from "isomorphic-dompurify";
-
-  const Marked = markedPkg.Marked;
-  const markedHighlight = markedHighlightPkg.markedHighlight;
-  const hljsModule = hljsPkg.default || hljsPkg;
-  const DOMPurify = 'default' in DOMPurifyPkg ? DOMPurifyPkg.default : DOMPurifyPkg;
-
-  // Only safely import css if hljs exists
-  if (hljsModule && Object.keys(hljsModule).length > 0) {
-    import("highlight.js/styles/github-dark.css").catch(() => {});
-  }
+  import { onMount } from "svelte";
 
   interface Props {
     /** The raw markdown string to render */
@@ -26,25 +13,81 @@
 
   let { content, streaming = false, class: className = "" }: Props = $props();
 
-  const hasMarkdownDeps = typeof Marked === "function" && typeof DOMPurify?.sanitize === "function";
+  type MarkedConstructor = typeof import("marked").Marked;
+  type MarkedHighlight = typeof import("marked-highlight").markedHighlight;
+  type HighlightApi = typeof import("highlight.js").default;
+  type Sanitizer = typeof import("isomorphic-dompurify").default;
+
+  // Lazily loaded optional peer dependencies (marked, marked-highlight,
+  // highlight.js, isomorphic-dompurify). They are declared as optional peer
+  // deps; statically importing them would crash consumers that have not
+  // installed them, even when MarkdownRenderer is never rendered. Load them
+  // dynamically so the module graph resolves without them and the component
+  // degrades to escaped-text rendering when they are absent.
+  let MarkedCtor = $state<MarkedConstructor | null>(null);
+  let markedHighlightFn = $state<MarkedHighlight | null>(null);
+  let hljs = $state<HighlightApi | null>(null);
+  let DOMPurify = $state<Sanitizer | null>(null);
+
+  onMount(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const [markedPkg, markedHighlightPkg, hljsPkg, DOMPurifyPkg] = await Promise.all([
+          import("marked"),
+          import("marked-highlight"),
+          import("highlight.js"),
+          import("isomorphic-dompurify"),
+        ]);
+        if (cancelled) return;
+        MarkedCtor = markedPkg.Marked;
+        markedHighlightFn = markedHighlightPkg.markedHighlight;
+        hljs = hljsPkg.default;
+        DOMPurify = DOMPurifyPkg.default;
+        // Only import the theme css when highlight.js is available
+        if (hljs && Object.keys(hljs).length > 0) {
+          import("highlight.js/styles/github-dark.css").catch(() => {});
+        }
+      } catch {
+        // Optional deps not installed; fall back to escaped-text rendering.
+        if (cancelled) return;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  const hasMarkdownDeps = $derived(
+    typeof MarkedCtor === "function" &&
+      typeof DOMPurify?.sanitize === "function" &&
+      typeof markedHighlightFn === "function",
+  );
 
   // Configure marked with syntax highlighting if available
-  const markedObj = hasMarkdownDeps ? new Marked(
-    markedHighlight({
-      langPrefix: "hljs language-",
-      highlight(code: string, lang: string) {
-        const language = hljsModule.getLanguage && hljsModule.getLanguage(lang) ? lang : "plaintext";
-        return hljsModule.highlight ? hljsModule.highlight(code, { language }).value : code;
-      },
-    }),
-  ) : null;
+  const markedObj = $derived.by(() => {
+    const Constructor = MarkedCtor;
+    const highlightExtension = markedHighlightFn;
+    if (!Constructor || !highlightExtension) return null;
+
+    return new Constructor(
+      highlightExtension({
+        langPrefix: "hljs language-",
+        highlight(code: string, lang: string) {
+          const language = hljs?.getLanguage && hljs.getLanguage(lang) ? lang : "plaintext";
+          return hljs?.highlight ? hljs.highlight(code, { language }).value : code;
+        },
+      }),
+    );
+  });
 
   // Render HTML safely
-  const html = $derived(
-    hasMarkdownDeps
-      ? DOMPurify.sanitize(markedObj?.parse(content || "") as string)
-      : `<div style="white-space: pre-wrap">${String(content || "").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>`
-  );
+  const html = $derived.by(() => {
+    const purifier = DOMPurify;
+    const parser = markedObj;
+    if (hasMarkdownDeps && purifier && parser) {
+      return purifier.sanitize(parser.parse(content || ""));
+    }
+    return `<div style="white-space: pre-wrap">${String(content || "").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>`;
+  });
 
   // Handle copy code blocks
   let copiedBlock = $state<string | null>(null);

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/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/account/TeamMembersPage.svelte

@@ -23,6 +23,11 @@
   let inviteEmail = $state('');
   let inviteRole = $state('Viewer');
   let linkCopied = $state(false);
+  let inviteStatus = $state('');
+
+  function focusInvite() {
+    document.getElementById('invite-email')?.focus();
+  }
 
   function copyInviteLink() {
     navigator.clipboard?.writeText('https://acme.com/invite/xK7fQ2').catch(() => {});
@@ -47,6 +52,23 @@
     { id: '14', name: 'Chen Wei', email: 'chen@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: '15 min ago' },
   ]);
 
+  function sendInvite() {
+    const email = inviteEmail.trim();
+    if (!email) return;
+    const name = email.split('@')[0].split(/[._-]/).filter(Boolean).map(part => part[0]?.toUpperCase() + part.slice(1)).join(' ') || email;
+    members = [...members, {
+      id: `invite-${Date.now()}`,
+      name,
+      email,
+      role: inviteRole as TeamMember['role'],
+      department: 'Pending assignment',
+      status: 'invited',
+      lastActive: 'Pending',
+    }];
+    inviteStatus = email;
+    inviteEmail = '';
+  }
+
   const filtered = $derived(
     searchQuery
       ? members.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
@@ -80,7 +102,7 @@
       <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.teamMembersCount', { count: members.length })}</h2>
       <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.teamMembersDescription')}</p>
     </div>
-    <Button size="sm">
+    <Button size="sm" onclick={focusInvite}>
       <UserPlus class="h-4 w-4 mr-1" />{i18n.t('account.inviteMember')}
     </Button>
   </div>
@@ -113,10 +135,13 @@
           </div>
         </div>
         <div class="flex justify-end">
-          <Button size="sm" disabled={!inviteEmail}>
+          <Button size="sm" disabled={!inviteEmail} onclick={sendInvite}>
             <Send class="h-3.5 w-3.5 mr-1" />{i18n.t('account.sendInvite')}
           </Button>
         </div>
+        {#if inviteStatus}
+          <p class="text-xs text-green-600" role="status">{i18n.t('account.invited')}: {inviteStatus}</p>
+        {/if}
       </Card.CardContent>
     </Card.Card>
 
@@ -163,7 +188,7 @@
                 <span class="text-xs text-muted-foreground">{member.lastActive}</span>
               </div>
             </div>
-            <Button variant="ghost" size="icon-sm"><MoreHorizontal class="h-4 w-4" /></Button>
+            <Button variant="ghost" size="icon-sm" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
           </div>
         </Card.CardContent>
       </Card.Card>

package/dist/components/network/TeamCrewTablePage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
@@ -6,6 +7,7 @@
   import { Search, Download, UserPlus, MoreHorizontal, CheckCircle2, Clock, XCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
+  const adminContext = captureAdminContext();
 
   interface CrewMember {
     id: string;
@@ -59,6 +61,20 @@
   };
 
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+
+  function exportCrew() {
+    const rows = [
+      ['Name', 'Email', 'Role', 'Department', 'Status', 'Projects', 'Joined'],
+      ...filtered.map(member => [member.name, member.email, member.role, member.department, member.status, String(member.projects), member.joinedAt]),
+    ];
+    const csv = rows.map(row => row.map(value => `"${value.replaceAll('"', '""')}"`).join(',')).join('\n');
+    const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'team-crew.csv';
+    link.click();
+    URL.revokeObjectURL(url);
+  }
 </script>
 
 <div class="space-y-6" data-svadmin-content-page="network">
@@ -68,10 +84,10 @@
       <p class="mt-1 text-sm text-muted-foreground">{i18n.t('network.teamCrewDescription')}</p>
     </div>
     <div class="flex gap-2">
-      <Button variant="outline" size="sm">
+      <Button variant="outline" size="sm" onclick={exportCrew}>
         <Download class="h-3.5 w-3.5 mr-1" />{i18n.t('common.export')}
       </Button>
-      <Button size="sm">
+      <Button size="sm" onclick={() => adminContext.navigate('/account/members/team-members')}>
         <UserPlus class="h-3.5 w-3.5 mr-1" />{i18n.t('account.inviteMember')}
       </Button>
     </div>
@@ -126,7 +142,7 @@
                 <td class="px-4 py-3 text-sm text-foreground">{member.projects}</td>
                 <td class="px-4 py-3 text-sm text-muted-foreground whitespace-nowrap">{member.joinedAt}</td>
                 <td class="px-4 py-3">
-                  <Button variant="ghost" size="icon-sm"><MoreHorizontal class="h-4 w-4" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
                 </td>
               </tr>
             {/each}
@@ -150,7 +166,7 @@
                   <p class="truncate text-xs text-muted-foreground">{member.email}</p>
                 </div>
               </div>
-              <Button variant="ghost" size="icon-sm" class="shrink-0"><MoreHorizontal class="h-4 w-4" /></Button>
+              <Button variant="ghost" size="icon-sm" class="shrink-0" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
             </div>
             <div class="grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
               <div class="min-w-0">

package/dist/components/network/UserCardsNFTPage.svelte

@@ -5,6 +5,15 @@
   import { Badge } from '../ui/badge/index.js';
   import { Input } from '../ui/input/index.js';
   import { Search, ExternalLink, Check, Plus } from '@lucide/svelte';
+  import nftCover01 from '../../assets/nft/nft-cover-01.jpg';
+  import nftCover02 from '../../assets/nft/nft-cover-02.jpg';
+  import nftCover03 from '../../assets/nft/nft-cover-03.jpg';
+  import nftCover04 from '../../assets/nft/nft-cover-04.jpg';
+  import nftCover05 from '../../assets/nft/nft-cover-05.jpg';
+  import nftCover06 from '../../assets/nft/nft-cover-06.jpg';
+  import nftCover07 from '../../assets/nft/nft-cover-07.jpg';
+  import nftCover08 from '../../assets/nft/nft-cover-08.jpg';
+  import nftCover09 from '../../assets/nft/nft-cover-09.jpg';
 
   const i18n = useTranslation();
 
@@ -12,7 +21,7 @@
     id: string;
     name: string;
     username: string;
-    avatar?: string;
+    artwork: string;
     bio: string;
     collectionCount: number;
     floorPrice: string;
@@ -24,15 +33,15 @@
   let searchQuery = $state('');
 
   const users: NFTUser[] = [
-    { id: '1', name: 'CryptoArt Studio', username: '@cryptoart', bio: 'Digital art collection featuring generative abstracts', collectionCount: 42, floorPrice: '0.5 ETH', volume: '128.3 ETH', verified: true, tags: ['Art', 'Generative'] },
-    { id: '2', name: 'PixelPunk Collective', username: '@pixelpunk', bio: 'On-chain pixel art characters with unique traits', collectionCount: 18, floorPrice: '1.2 ETH', volume: '342.7 ETH', verified: true, tags: ['PFP', 'Pixel'] },
-    { id: '3', name: 'MetaVerse Builders', username: '@metabuild', bio: '3D architectural models for virtual worlds', collectionCount: 7, floorPrice: '0.8 ETH', volume: '56.1 ETH', verified: false, tags: ['3D', 'Virtual'] },
-    { id: '4', name: 'SoundWave NFT', username: '@soundwave', bio: 'Music-backed NFTs with on-chain audio', collectionCount: 23, floorPrice: '0.3 ETH', volume: '89.4 ETH', verified: true, tags: ['Music', 'Audio'] },
-    { id: '5', name: 'GameAssets DAO', username: '@gameassets', bio: 'In-game items and collectibles for Web3 gaming', collectionCount: 156, floorPrice: '0.05 ETH', volume: '412.8 ETH', verified: true, tags: ['Gaming', 'Items'] },
-    { id: '6', name: 'PhotoVerse', username: '@photoverse', bio: 'Curated photography NFTs from world artists', collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false, tags: ['Photo', 'Curated'] },
-    { id: '7', name: 'CryptoKicks', username: '@cryptokicks', bio: 'Limited-edition digital sneakers and wearables', collectionCount: 64, floorPrice: '0.4 ETH', volume: '156.9 ETH', verified: true, tags: ['Fashion', 'Wearables'] },
-    { id: '8', name: 'ChainChronicles', username: '@chainchron', bio: 'Story-driven collectible cards with on-chain lore', collectionCount: 88, floorPrice: '0.25 ETH', volume: '203.4 ETH', verified: false, tags: ['Cards', 'Story'] },
-    { id: '9', name: 'AIArtifacts', username: '@aiartifacts', bio: 'AI-generated sculptures minted as unique tokens', collectionCount: 12, floorPrice: '2.1 ETH', volume: '512.6 ETH', verified: true, tags: ['AI', '3D'] },
+    { id: '1', name: 'CryptoArt Studio', username: '@cryptoart', artwork: nftCover01, bio: 'Digital art collection featuring generative abstracts', collectionCount: 42, floorPrice: '0.5 ETH', volume: '128.3 ETH', verified: true, tags: ['Art', 'Generative'] },
+    { id: '2', name: 'PixelPunk Collective', username: '@pixelpunk', artwork: nftCover02, bio: 'On-chain pixel art characters with unique traits', collectionCount: 18, floorPrice: '1.2 ETH', volume: '342.7 ETH', verified: true, tags: ['PFP', 'Pixel'] },
+    { id: '3', name: 'MetaVerse Builders', username: '@metabuild', artwork: nftCover03, bio: '3D architectural models for virtual worlds', collectionCount: 7, floorPrice: '0.8 ETH', volume: '56.1 ETH', verified: false, tags: ['3D', 'Virtual'] },
+    { id: '4', name: 'SoundWave NFT', username: '@soundwave', artwork: nftCover04, bio: 'Music-backed NFTs with on-chain audio', collectionCount: 23, floorPrice: '0.3 ETH', volume: '89.4 ETH', verified: true, tags: ['Music', 'Audio'] },
+    { id: '5', name: 'GameAssets DAO', username: '@gameassets', artwork: nftCover05, bio: 'In-game items and collectibles for Web3 gaming', collectionCount: 156, floorPrice: '0.05 ETH', volume: '412.8 ETH', verified: true, tags: ['Gaming', 'Items'] },
+    { id: '6', name: 'PhotoVerse', username: '@photoverse', artwork: nftCover06, bio: 'Curated photography NFTs from world artists', collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false, tags: ['Photo', 'Curated'] },
+    { id: '7', name: 'CryptoKicks', username: '@cryptokicks', artwork: nftCover07, bio: 'Limited-edition digital sneakers and wearables', collectionCount: 64, floorPrice: '0.4 ETH', volume: '156.9 ETH', verified: true, tags: ['Fashion', 'Wearables'] },
+    { id: '8', name: 'ChainChronicles', username: '@chainchron', artwork: nftCover08, bio: 'Story-driven collectible cards with on-chain lore', collectionCount: 88, floorPrice: '0.25 ETH', volume: '203.4 ETH', verified: false, tags: ['Cards', 'Story'] },
+    { id: '9', name: 'AIArtifacts', username: '@aiartifacts', artwork: nftCover09, bio: 'AI-generated sculptures minted as unique tokens', collectionCount: 12, floorPrice: '2.1 ETH', volume: '512.6 ETH', verified: true, tags: ['AI', '3D'] },
   ];
 
   const filtered = $derived(
@@ -41,8 +50,6 @@
       : users
   );
 
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-
   let connectedIds = $state<string[]>([]);
 
   function toggleConnect(id: string) {
@@ -71,16 +78,14 @@
 
   <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
     {#each filtered as user (user.id)}
-      <Card.Card class="overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
-        <div class="h-20 bg-gradient-to-r from-violet-500/20 via-purple-500/15 to-fuchsia-500/20 relative">
-          <div class="absolute inset-0 opacity-[0.08]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 16px 16px;"></div>
+      <Card.Card class="group overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
+        <div class="h-28 overflow-hidden bg-muted">
+          <img src={user.artwork} alt="" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]" />
         </div>
         <Card.CardContent class="relative px-4 pb-4">
           <div class="-mt-8 mb-2 flex items-end gap-3">
             <div class="ring-3 ring-card rounded-xl overflow-hidden shrink-0">
-              <div class="flex h-14 w-14 items-center justify-center bg-primary/10 text-primary font-bold">
-                {initials(user.name)}
-              </div>
+              <img src={user.artwork} alt="" class="h-14 w-14 object-cover" />
             </div>
             <div class="flex-1 min-w-0 pb-0.5">
               <div class="flex items-center gap-1.5">
@@ -130,7 +135,7 @@
                 <Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connect')}
               {/if}
             </Button>
-            <Button size="sm" variant="ghost">
+            <Button size="sm" variant="ghost" aria-label={i18n.t('common.detail')} title={i18n.t('common.detail')}>
               <ExternalLink class="h-3.5 w-3.5" />
             </Button>
           </div>

package/dist/components/profile/ProjectsGrid.svelte

@@ -4,7 +4,8 @@
   import { Badge } from '../ui/badge/index.js';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
-  import { Users, CheckCircle2, ArrowRight, Search, Plus } from '@lucide/svelte';
+  import { Users, CheckCircle2, ArrowRight, Search, Plus, FolderKanban } from '@lucide/svelte';
+  import Progress from '../ui/progress/progress.svelte';
 
   const i18n = useTranslation();
 
@@ -17,6 +18,7 @@
     status: 'active' | 'completed' | 'on-hold';
     tags?: string[];
     image?: string;
+    progress?: number;
   }
 
   interface Props {
@@ -50,10 +52,10 @@
     <h3 class="text-lg font-semibold text-foreground">
       {i18n.t('publicProfile.projectsCount', { count: filtered.length })}
     </h3>
-    <div class="flex items-center gap-2">
-      <div class="relative">
+    <div class="flex w-full items-center gap-2 sm:w-auto">
+      <div class="relative min-w-0 flex-1 sm:flex-none">
         <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input placeholder={i18n.t('publicProfile.searchProjects')} bind:value={searchQuery} class="w-48 pl-9" />
+        <Input placeholder={i18n.t('publicProfile.searchProjects')} bind:value={searchQuery} class="w-full pl-9 sm:w-48" />
       </div>
       <Button size="sm"><Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('common.create')}</Button>
     </div>
@@ -66,6 +68,7 @@
   {:else}
     <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 {gridCols}">
       {#each filtered as project (project.id)}
+        {@const progress = project.progress ?? (project.status === 'completed' ? 100 : project.status === 'active' ? 72 : 38)}
         <Card.Card class="group overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
           {#if project.image}
             <div class="h-32 overflow-hidden">
@@ -74,7 +77,12 @@
           {/if}
           <Card.CardContent class="p-4 space-y-3">
             <div class="flex items-start justify-between gap-2">
-              <h4 class="font-semibold text-foreground">{project.name}</h4>
+              <div class="flex min-w-0 items-center gap-3">
+                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-muted/40 text-muted-foreground">
+                  <FolderKanban class="h-4 w-4" />
+                </span>
+                <h4 class="font-semibold text-foreground">{project.name}</h4>
+              </div>
               <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold {statusConfig[project.status].color}">
                 {statusConfig[project.status].label}
               </span>
@@ -90,12 +98,20 @@
               </div>
             {/if}
 
+            <div class="space-y-1.5">
+              <div class="flex items-center justify-between text-[11px] text-muted-foreground">
+                <span>{i18n.t('common.progress')}</span>
+                <span class="font-medium text-foreground">{progress}%</span>
+              </div>
+              <Progress value={progress} class="h-1.5" />
+            </div>
+
             <div class="flex items-center justify-between pt-2 border-t">
               <div class="flex items-center gap-3 text-xs text-muted-foreground">
                 <span class="flex items-center gap-1"><Users class="h-3 w-3" />{i18n.t('publicProfile.projectMembers', { count: project.members })}</span>
                 <span class="flex items-center gap-1"><CheckCircle2 class="h-3 w-3" />{i18n.t('publicProfile.projectTasks', { count: project.tasks })}</span>
               </div>
-              <Button variant="ghost" size="icon-sm">
+              <Button variant="ghost" size="icon-sm" aria-label={project.name} title={project.name}>
                 <ArrowRight class="h-3.5 w-3.5" />
               </Button>
             </div>

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

@@ -7,6 +7,7 @@ interface Project {
     status: 'active' | 'completed' | 'on-hold';
     tags?: string[];
     image?: string;
+    progress?: number;
 }
 interface Props {
     columns?: 2 | 3;

package/dist/components/profile/PublicProfilePage.svelte

@@ -120,18 +120,18 @@
 <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="h-28 bg-gradient-to-r from-primary/25 via-primary/15 to-accent/20 relative sm:h-40">
       <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="-mt-10 flex flex-col gap-3 sm:-mt-12 sm:flex-row sm:items-end sm: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">
+          <div class="flex h-20 w-20 items-center justify-center bg-primary/10 text-2xl font-bold text-primary sm:h-24 sm:w-24 sm:text-3xl">
             {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>
+          <h2 class="text-xl font-bold text-foreground sm:text-2xl">{profileData.name}</h2>
           {#if profileData.tagline}
             <p class="text-muted-foreground">{profileData.tagline}</p>
           {/if}
@@ -147,7 +147,7 @@
             {/if}
           </div>
         </div>
-        <div class="flex gap-2 shrink-0">
+        <div class="flex shrink-0 flex-wrap gap-2">
           <Button size="sm">{i18n.t('publicProfile.editProfile')}</Button>
           <Button size="sm" variant="outline">{i18n.t('publicProfile.sendMessage')}</Button>
           <Button size="sm" variant="ghost"><MoreHorizontal class="h-4 w-4" /></Button>

package/dist/router-state.svelte.js

@@ -7,6 +7,10 @@ const ROUTES = [
     '/update-password',
     '/2fa',
     '/authentication/branded/2fa',
+    '/authentication/error-404',
+    '/authentication/error-500',
+    '/404',
+    '/500',
     '/settings',
     '/settings/:tab',
     '/',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.39.0",
+  "version": "0.40.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.33.0",
+    "@svadmin/core": "^0.34.1",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.20.0",
@@ -77,8 +77,8 @@
     "@floating-ui/dom": "^1.8.0",
     "@lucide/svelte": "^1.28.0",
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/svelte-table": "9.0.0-alpha.53",
-    "@tanstack/table-core": "9.0.0-alpha.53",
+    "@tanstack/svelte-table": "9.0.0",
+    "@tanstack/table-core": "9.0.0",
     "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",
     "svelte-sonner": "^1.1.1",