@svadmin/ui 0.35.0 → 0.36.0

package/dist/components/SidebarItem.svelte

@@ -64,16 +64,41 @@
     return menuItem.children?.some((c: MenuItem) => hasActiveChild(c)) ?? false;
   }
 
+  function getItemBadge(menuItem: MenuItem): string | undefined {
+    const meta = menuItem.meta as (MenuItem['meta'] & { badge?: unknown }) | undefined;
+    return typeof meta?.badge === 'string' ? meta.badge : undefined;
+  }
+
+  function aggregateBadges(menuItems: MenuItem[] | undefined): string | undefined {
+    const total = menuItems?.reduce((sum, menuItem) => {
+      const ownBadge = Number(getItemBadge(menuItem));
+      const childBadge = Number(aggregateBadges(menuItem.children));
+      return sum + (Number.isFinite(ownBadge) ? ownBadge : 0) + (Number.isFinite(childBadge) ? childBadge : 0);
+    }, 0) ?? 0;
+
+    return total > 0 ? String(total) : undefined;
+  }
+
   const hasChildren = $derived(item.children && item.children.length > 0);
   const active = $derived(isActive(item.href));
   const childActive = $derived(hasActiveChild(item));
   const isExternal = $derived(item.target === '_blank' || item.href?.startsWith('http'));
+  const badge = $derived(getItemBadge(item));
+  const childrenBadge = $derived(aggregateBadges(item.children));
 
   const finalHref = $derived(isExternal ? item.href : (item.href ? formatLink(item.href) : undefined));
-
-  // Track open state — auto-open if a child is active
+  // Auto-open the active branch once, then respect manual collapse/expand.
   let isOpen = $state(false);
-  $effect(() => { if (childActive) isOpen = true; });
+  let touchedOpen = $state(false);
+
+  function setOpen(nextOpen: boolean) {
+    touchedOpen = true;
+    isOpen = nextOpen;
+  }
+
+  $effect(() => {
+    if (childActive && !touchedOpen && !isOpen) isOpen = true;
+  });
 
   const Icon = $derived(getIcon(item.icon));
   const label = $derived(getLabel(item));
@@ -83,13 +108,13 @@
   <!-- hidden item, render nothing -->
 {:else if hasChildren && !collapsed}
   <!-- Parent node with children: render as collapsible group -->
-  <Collapsible.Root bind:open={isOpen}>
+  <Collapsible.Root open={isOpen} onOpenChange={setOpen}>
     <Collapsible.Trigger
-      class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200
+      class="flex w-full items-center justify-between rounded-xl px-3 {depth === 1 ? 'py-1.5' : 'py-2'} text-sm font-medium transition-all duration-200
       {childActive
-        ? 'bg-primary/10 text-primary ring-1 ring-primary/15'
-        : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
-      style="padding-left: {12 + depth * 12}px"
+        ? 'text-primary font-semibold'
+        : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/45 hover:text-sidebar-foreground'}"
+      style="padding-left: {depth === 0 ? 12 : 4 + (depth - 1) * 12}px"
       data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
       data-active={childActive ? "true" : "false"}
     >
@@ -97,10 +122,19 @@
         <Icon class="h-4 w-4 flex-shrink-0" />
         <span>{label}</span>
       </span>
-      <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+      <span class="ml-2 flex items-center gap-2">
+        {#if childrenBadge}
+          <span class="rounded-full {childActive ? 'bg-primary/12 text-primary' : 'bg-sidebar-accent text-sidebar-foreground/60'} px-2 py-0.5 text-[10px] font-semibold">{childrenBadge}</span>
+        {/if}
+        <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+      </span>
     </Collapsible.Trigger>
     <Collapsible.Content>
-      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px" data-sidebar="menu-sub">
+      <div
+        class="mt-0.5 {depth >= 1 ? 'divide-y divide-border/45' : 'space-y-0'}"
+        style="padding-left: {depth > 0 ? 0 : 0}px"
+        data-sidebar="menu-sub"
+      >
         {#each item.children as child, _i (_i)}
           <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
         {/each}
@@ -117,10 +151,10 @@
           href={finalHref}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
-          class="flex items-center justify-center rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200
+          class="mx-auto flex h-10 w-10 items-center justify-center text-sm font-medium transition-colors duration-200
           {active
-            ? 'bg-primary/10 text-primary shadow-sm shadow-primary/10 ring-1 ring-primary/15'
-            : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
+            ? 'text-primary'
+            : 'text-sidebar-foreground/68 hover:text-sidebar-foreground'}"
           data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
           data-active={active ? "true" : "false"}
         >
@@ -138,21 +172,21 @@
     href={finalHref}
     target={isExternal ? '_blank' : undefined}
     rel={isExternal ? 'noopener noreferrer' : undefined}
-    class="relative flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200
+    class="relative flex items-center gap-3 px-3 {depth === 1 ? 'py-1.5' : 'py-2'} text-sm font-medium transition-all duration-200 {depth >= 2 ? 'first:rounded-t-xl last:rounded-b-xl' : 'rounded-xl'}
     {active
-      ? 'bg-primary/10 text-primary font-semibold shadow-sm shadow-primary/10 ring-1 ring-primary/15'
-      : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
+      ? 'text-primary font-semibold'
+      : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/45 hover:text-sidebar-foreground'}"
     style="padding-left: {12 + depth * 12}px"
     data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
     data-active={active ? "true" : "false"}
   >
-    {#if active && !collapsed}
-      <div class="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full bg-primary"></div>
-    {/if}
     <Icon class="h-4 w-4 flex-shrink-0" />
     <span class="flex-1">{label}</span>
     {#if isExternal}
       <ExternalLink class="h-3 w-3 opacity-50" />
     {/if}
+    {#if badge}
+      <span class="rounded-full {active ? 'bg-primary/12 text-primary' : 'bg-sidebar-accent text-sidebar-foreground/60'} px-2 py-0.5 text-[10px] font-semibold">{badge}</span>
+    {/if}
   </a>
 {/if}

package/dist/components/TwoFactorAuthPage.svelte

@@ -79,7 +79,7 @@
   }
 </script>
 
-<div class="flex min-h-[70vh] items-center justify-center p-4">
+<div class="flex min-h-[70vh] items-center justify-center p-4" data-svadmin-content-page="auth-2fa">
   <div class="w-full max-w-lg space-y-6">
     {#if currentStep === 'intro' && !is2faEnabled}
       <!-- Intro -->

package/dist/components/account/CompanyProfilePage.svelte

@@ -21,7 +21,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.companyProfile')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.companyProfileDescription')}</p>

package/dist/components/account/GetStartedPage.svelte

@@ -47,7 +47,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.getStarted')}</h2>

package/dist/components/account/ImportMembersPage.svelte

@@ -59,7 +59,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.importMembers')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.importMembersDescription')}</p>

package/dist/components/account/MembersStarterPage.svelte

@@ -43,7 +43,7 @@
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.membersStarter')}</h2>

package/dist/components/account/SecurityLogPage.svelte

@@ -43,7 +43,7 @@
 
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.securityLog')}</h2>
@@ -74,7 +74,7 @@
   <!-- Log table -->
   <Card.Card class="border-border/60">
     <Card.CardContent class="p-0">
-      <div class="overflow-x-auto">
+      <div class="hidden overflow-x-auto md:block">
         <table class="w-full">
           <thead>
             <tr class="border-b bg-muted/30">
@@ -103,6 +103,33 @@
           </tbody>
         </table>
       </div>
+      <div class="divide-y md:hidden">
+        {#each filteredLogs as log (log.id)}
+          <div class="space-y-3 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex min-w-0 items-center gap-2">
+                <span class="inline-flex h-2 w-2 shrink-0 rounded-full {log.severity === 'critical' ? 'bg-red-500' : log.severity === 'warning' ? 'bg-amber-500' : 'bg-blue-500'}"></span>
+                <span class="truncate text-sm font-medium text-foreground">{log.eventLabel}</span>
+              </div>
+              <span class="shrink-0 text-xs text-muted-foreground">{log.time}</span>
+            </div>
+            <div class="grid gap-2 text-xs text-muted-foreground">
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.ip')}</span>
+                <span class="font-mono text-foreground">{log.ip}</span>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.device')}</span>
+                <span class="truncate text-foreground">{log.device}</span>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.location')}</span>
+                <span class="truncate text-foreground">{log.location}</span>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
     </Card.CardContent>
   </Card.Card>
 </div>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -25,7 +25,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.settingsEnterprise')}</h2>

package/dist/components/account/SettingsPlainPage.svelte

@@ -22,7 +22,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.settingsPlain')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsPlainDescription')}</p>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -21,7 +21,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.settingsSidebar')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsSidebarDescription')}</p>

package/dist/components/account/TeamMembersPage.svelte

@@ -48,7 +48,7 @@
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.membersStarter')}</h2>

package/dist/components/network/TeamCrewTablePage.svelte

@@ -45,7 +45,7 @@
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="network">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('network.teamCrew')}</h2>
@@ -69,7 +69,7 @@
   <!-- Table -->
   <Card.Card class="border-border/60">
     <Card.CardContent class="p-0">
-      <div class="overflow-x-auto">
+      <div class="hidden overflow-x-auto lg:block">
         <table class="w-full">
           <thead>
             <tr class="border-b bg-muted/30">
@@ -117,6 +117,39 @@
           </tbody>
         </table>
       </div>
+      <div class="divide-y lg:hidden">
+        {#each filtered as member (member.id)}
+          {@const sc = statusConfig[member.status]}
+          <div class="space-y-3 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex min-w-0 items-center gap-3">
+                <div class="relative shrink-0">
+                  <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
+                    {initials(member.name)}
+                  </div>
+                  <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
+                </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>
+              <Button variant="ghost" size="icon-sm" class="shrink-0"><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">
+                <span class="block font-medium text-foreground">{member.role}</span>
+                <span class="truncate">{member.department}</span>
+              </div>
+              <div class="flex items-center gap-1 {sc.color}">
+                <sc.icon class="h-3 w-3" />{sc.label}
+              </div>
+              <div>{t('publicProfile.projects')}: <span class="font-medium text-foreground">{member.projects}</span></div>
+              <div>{t('account.joined')}: <span class="font-medium text-foreground">{member.joinedAt}</span></div>
+            </div>
+          </div>
+        {/each}
+      </div>
     </Card.CardContent>
   </Card.Card>
 </div>

package/dist/components/network/UserCardsNFTPage.svelte

@@ -51,7 +51,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="network">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('network.userCards')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('network.userCardsDescription')}</p>

package/dist/components/profile/PublicProfilePage.svelte

@@ -99,7 +99,7 @@
   ];
 </script>
 
-<div class="space-y-6">
+<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">

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

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

package/package.json

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