@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/ShowPage.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { useShow, getResource } from '@svadmin/core';
+  import type { FieldDefinition } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t, getLocale } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import PageHeader from './PageHeader.svelte';
+  import { getDisplayComponent } from './fieldComponentMap';
+  import ListButton from './buttons/ListButton.svelte';
+  import EditButton from './buttons/EditButton.svelte';
+  import DeleteButton from './buttons/DeleteButton.svelte';
+  import RefreshButton from './buttons/RefreshButton.svelte';
+
+  let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
+
+  const resource = $derived(getResource(resourceName));
+  const showFields = $derived(resource.fields.filter(f => f.showInShow !== false));
+
+  const query = useShow({ get resource() { return resourceName; }, get id() { return id; } });
+</script>
+
+<div class="space-y-6">
+  <PageHeader title="{resource.label} {t('common.detail')}">
+    {#snippet actions()}
+      <ListButton resource={resourceName} hideText />
+      {#if resource.canEdit !== false}
+        <EditButton resource={resourceName} recordItemId={id} hideText />
+      {/if}
+      {#if resource.canDelete !== false}
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
+      {/if}
+      <RefreshButton resource={resourceName} hideText />
+    {/snippet}
+  </PageHeader>
+
+  {#if query.isLoading}
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
+        {#each showFields.slice(0, 6) as _, i}
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
+            <Skeleton class="h-4 w-1/2 sm:w-1/4" />
+            <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
+          </div>
+        {/each}
+      </Card.Content>
+    </Card.Root>
+  {:else if query.data?.data}
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
+        {#each showFields as field, i}
+          {@const value = (query.data!.data as Record<string, unknown>)[field.key]}
+          {@const DisplayComponent = getDisplayComponent(field.type)}
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
+            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
+            <div class="sm:w-2/3 text-sm text-foreground">
+              {#if DisplayComponent && value != null}
+                <DisplayComponent
+                  {value}
+                  options={field.options}
+                  resourceName={field.resource}
+                />
+              {:else}
+                {value != null ? String(value) : '—'}
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </Card.Content>
+    </Card.Root>
+  {/if}
+</div>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    resourceName: string;
+    id: string | number;
+};
+declare const ShowPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShowPage = ReturnType<typeof ShowPage>;
+export default ShowPage;

package/dist/components/Sidebar.svelte

@@ -0,0 +1,417 @@
+<script lang="ts">
+  import { getResources, canAccessAsync } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
+  import { currentPath, navigate } from '@svadmin/core/router';
+  import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
+  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme } from '@svadmin/core';
+  import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
+  import * as Tooltip from './ui/tooltip/index.js';
+  import SidebarItem from './SidebarItem.svelte';
+
+  import { ScrollArea } from './ui/scroll-area/index.js';
+  import * as Collapsible from './ui/collapsible/index.js';
+  import { Avatar } from './ui/avatar/index.js';
+  import {
+    LayoutDashboard, FileText, Users, Settings, Home,
+    ChevronLeft, ChevronRight, ChevronDown, LogOut, Sun, Moon, Palette,
+    Image as ImageIcon, Layout, Folder, Type, Video,
+    Download, ListTodo, TrendingUp, Sparkles, Images, Bot, Key, KeyRound, CreditCard, BookOpen, Wrench
+  } from '@lucide/svelte';
+
+  let { collapsed, identity, title, onToggle, onLogout, menu, routeMode = 'auto' }: {
+    collapsed: boolean;
+    identity: Identity | null;
+    title: string;
+    onToggle: () => void;
+    onLogout: () => void;
+    menu?: MenuItem[];
+    /** 'hash' for SPA hash routing, 'path' for SvelteKit/filesystem routing, 'auto' to detect */
+    routeMode?: 'hash' | 'path' | 'auto';
+  } = $props();
+
+  const effectiveRouteMode = $derived(
+    routeMode === 'auto'
+      ? (typeof window !== 'undefined' && window.location.hash.startsWith('#/') ? 'hash' : 'path')
+      : routeMode
+  );
+
+  const resources = getResources();
+
+  const iconMap: Record<string, typeof LayoutDashboard> = {
+    'dashboard': LayoutDashboard,
+    'posts': FileText,
+    'users': Users,
+    'settings': Settings,
+    'home': Home,
+    'palette': Palette,
+    'image': ImageIcon,
+    'layout': Layout,
+    'folder': Folder,
+    'type': Type,
+    'video': Video,
+    'download': Download,
+    'list-todo': ListTodo,
+    'trending-up': TrendingUp,
+    'sparkles': Sparkles,
+    'images': Images,
+    'bot': Bot,
+    'key': Key,
+    'key-round': KeyRound,
+    'credit-card': CreditCard,
+    'book-open': BookOpen,
+    'wrench': Wrench,
+  };
+
+  interface NavItem {
+    path: string;
+    label: string;
+    Icon: typeof LayoutDashboard;
+    group?: string;
+  }
+
+  interface NavGroup {
+    name: string | null; // null = ungrouped
+    items: NavItem[];
+  }
+
+  // Use effect to build nav items, taking access control into account
+  let navItems = $state.raw<NavItem[]>([]);
+
+  $effect(() => {
+    // Re-run when locale or resources change
+    const localeVal = getLocale();
+
+    Promise.all(resources.map(async (r) => {
+      try {
+        const { can } = await canAccessAsync(r.name, 'list');
+        return { r, can };
+      } catch {
+        return { r, can: false };
+      }
+    })).then(results => {
+      const items: NavItem[] = [{ path: '/', label: t('common.home'), Icon: LayoutDashboard }];
+      for (const { r, can } of results) {
+        if (can) {
+          items.push({
+            path: `/${r.name}`,
+            label: r.label,
+            Icon: iconMap[r.icon ?? r.name] ?? Settings,
+            group: r.group,
+          });
+        }
+      }
+      navItems = items;
+    });
+  });
+
+  /** Toggle between available locales */
+  function toggleLocale() {
+    const locales = getAvailableLocales();
+    const current = getLocale();
+    const idx = locales.indexOf(current);
+    const next = locales[(idx + 1) % locales.length];
+    setLocale(next);
+  }
+
+  /** Short display label for current locale */
+  const localeLabel = $derived(getLocale() === 'zh-CN' ? '中' : 'EN');
+
+  // Track current hash for active state
+  let path = $state(currentPath());
+
+  function onHashChange() { path = currentPath(); }
+
+  function isActive(itemPath: string): boolean {
+    if (itemPath === '/') return path === '/';
+    return path === itemPath || path.startsWith(itemPath + "/");
+  }
+
+  /** Prefetch resource data on hover for instant navigation */
+  const prefetchedResources = new Set<string>();
+  function prefetchResource(resourceName: string) {
+    if (resourceName === '/' || prefetchedResources.has(resourceName)) return;
+    prefetchedResources.add(resourceName);
+    // Trigger a background fetch by navigating the browser cache
+    // The actual prefetch happens via the #key block re-creating useList in AdminApp
+  }
+
+  // Group nav items by group field (null = ungrouped)
+  const navGroups = $derived.by((): NavGroup[] => {
+    const groups: NavGroup[] = [];
+    const groupMap = new Map<string | null, NavItem[]>();
+
+    for (const item of navItems) {
+      const key = item.group ?? null;
+      if (!groupMap.has(key)) {
+        groupMap.set(key, []);
+        groups.push({ name: key, items: groupMap.get(key)! });
+      }
+      groupMap.get(key)!.push(item);
+    }
+
+    return groups;
+  });
+
+  // Track which groups are open
+  let openGroups = $state<Set<string>>(new Set());
+  let colorPickerOpen = $state(false);
+  let colorPickerRef = $state<HTMLDivElement | null>(null);
+  let colorPickerOpenedAt = 0;
+
+  // Click-outside to close color picker
+  $effect(() => {
+    if (!colorPickerOpen) return;
+    function handleMouseDown(e: MouseEvent) {
+      // Ignore if opened within last 200ms (same interaction)
+      if (Date.now() - colorPickerOpenedAt < 200) return;
+      if (colorPickerRef && !colorPickerRef.contains(e.target as Node)) {
+        colorPickerOpen = false;
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true);
+    };
+  });
+</script>
+
+<svelte:window onhashchange={onHashChange} />
+
+<aside
+  aria-label="Sidebar navigation"
+  class="fixed inset-y-0 left-0 z-30 flex flex-col backdrop-blur-xl transition-all duration-300"
+  style="background-color: var(--sidebar);"
+  class:w-64={!collapsed}
+  class:w-16={collapsed}
+>
+  <!-- Logo -->
+  <div class="flex h-16 items-center justify-between px-4">
+    {#if !collapsed}
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+        <span class="font-semibold text-lg tracking-tight text-sidebar-foreground">{title}</span>
+      </div>
+    {:else}
+      <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 mx-auto" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+    {/if}
+    {#if !collapsed}
+      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle}>
+        <ChevronLeft class="h-4 w-4" />
+      </TooltipButton>
+    {:else}
+      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="mx-auto mt-2 mb-2 block">
+        <ChevronRight class="h-4 w-4" />
+      </TooltipButton>
+    {/if}
+  </div>
+
+  <ScrollArea class="flex-1">
+  <nav aria-label="Main menu" class="py-4 px-3 space-y-1">
+    {#if menu && menu.length > 0}
+      <!-- Custom multi-level menu -->
+      {#each menu as item}
+        <SidebarItem {item} currentPath={path} {collapsed} depth={0} />
+      {/each}
+    {:else}
+    <!-- Auto-generated menu from resources (fallback) -->
+    {#each navGroups as group}
+      {#if group.name && !collapsed}
+        <!-- Grouped section with Collapsible -->
+        <Collapsible.Root open={openGroups.has(group.name)} onOpenChange={(isOpen) => {
+          const next = new Set(openGroups);
+          if (isOpen) next.add(group.name!); else next.delete(group.name!);
+          openGroups = next;
+        }}>
+          <Collapsible.Trigger
+            class="flex w-full items-center justify-between px-3 py-1.5 text-sm font-semibold tracking-wider text-sidebar-foreground/60 hover:text-sidebar-foreground transition-colors"
+          >
+            <span>{group.name}</span>
+            <ChevronDown class="h-3 w-3 transition-transform {openGroups.has(group.name) ? 'rotate-180' : ''}" />
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div class="mt-1 space-y-1">
+              {#each group.items as item}
+                {@const active = isActive(item.path)}
+                <a
+                  href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
+                  class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+                  {active
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+                >
+                  <item.Icon class="h-4 w-4 flex-shrink-0" />
+                  <span>{item.label}</span>
+                </a>
+              {/each}
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      {:else}
+        <!-- Ungrouped items (flat) -->
+        {#each group.items as item}
+          {@const active = isActive(item.path)}
+          {#if collapsed}
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props }: { props: Record<string, unknown> })}
+                  <a
+                    {...props}
+                    href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
+                    class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+                    {active
+                      ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+                  >
+                    <item.Icon class="h-4 w-4 flex-shrink-0" />
+                  </a>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content side="right">
+                {item.label}
+              </Tooltip.Content>
+            </Tooltip.Root>
+          {:else}
+            <a
+              href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
+              class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+              {active
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+                : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+            >
+              <item.Icon class="h-4 w-4 flex-shrink-0" />
+              <span>{item.label}</span>
+            </a>
+          {/if}
+        {/each}
+      {/if}
+    {/each}
+    {/if}
+  </nav>
+  </ScrollArea>
+
+  <!-- Footer -->
+  <div>
+    <!-- Color theme picker -->
+    {#if !collapsed}
+      <div class="px-3 pt-3 pb-1">
+        <div class="relative" bind:this={colorPickerRef}>
+          <Button
+            variant="ghost"
+            class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors h-auto justify-start"
+            onclick={() => { if (!colorPickerOpen) colorPickerOpenedAt = Date.now(); colorPickerOpen = !colorPickerOpen; }}
+          >
+            <Palette class="h-4 w-4" />
+            <span class="flex-1 text-left text-xs">{t('common.toggleTheme')}</span>
+            <span
+              class="h-3.5 w-3.5 rounded-full ring-1 ring-offset-1 ring-offset-sidebar"
+              style="background-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#6366f1'}; --tw-ring-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#6366f1'}"
+            ></span>
+          </Button>
+          {#if colorPickerOpen}
+            <div class="absolute bottom-full left-0 mb-1 z-50 w-40 rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95">
+              {#each colorThemes as ct}
+                <button
+                  class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                  onclick={() => { setColorTheme(ct.id as typeof ct.id & import('@svadmin/core').ColorTheme); colorPickerOpen = false; }}
+                >
+                  <span
+                    class="h-3.5 w-3.5 rounded-full {getColorTheme() === ct.id ? 'ring-2 ring-offset-1 scale-110' : 'opacity-70'}"
+                    style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
+                  ></span>
+                  <span class="text-xs">{ct.label}</span>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+
+    <!-- User info -->
+    {#if !collapsed && identity}
+      <div class="px-3 pb-3 pt-1">
+        <div class="flex items-center gap-3 rounded-lg p-2 hover:bg-sidebar-accent/50 transition-colors">
+          <Avatar
+            src={(identity as Record<string, unknown>).avatar as string | undefined}
+            alt={identity.name ?? 'User'}
+            fallback={identity.name?.charAt(0).toUpperCase() ?? 'U'}
+            size="sm"
+          />
+          <div class="flex-1 min-w-0">
+            <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
+            <p class="truncate text-[10px] text-sidebar-foreground/50">{((identity as Record<string, unknown>).role || (identity as Record<string, unknown>).roleName) ?? 'User'}</p>
+          </div>
+        </div>
+        <div class="flex items-center justify-between px-1 mt-1">
+          <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+            <span class="text-xs font-bold">{localeLabel}</span>
+          </TooltipButton>
+          <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+            {#if getResolvedTheme() === 'dark'}
+              <Sun class="h-4 w-4" />
+            {:else}
+              <Moon class="h-4 w-4" />
+            {/if}
+          </TooltipButton>
+          <TooltipButton tooltip={t('settings.title')} variant="ghost" size="icon-sm" onclick={() => navigate('/settings')} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+            <Settings class="h-4 w-4" />
+          </TooltipButton>
+          <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground/60 hover:text-destructive">
+            <LogOut class="h-4 w-4" />
+          </TooltipButton>
+        </div>
+      </div>
+    {:else if collapsed}
+      <div class="px-1 py-3 space-y-1">
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props }: { props: Record<string, unknown> })}
+              <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
+                <span class="text-xs font-bold">{localeLabel}</span>
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">{t('common.switchLanguage')}</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props }: { props: Record<string, unknown> })}
+              <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
+                {#if getResolvedTheme() === 'dark'}
+                  <Sun class="h-4 w-4" />
+                {:else}
+                  <Moon class="h-4 w-4" />
+                {/if}
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">{t('common.toggleTheme')}</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props }: { props: Record<string, unknown> })}
+              <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground/60 hover:text-destructive">
+                <LogOut class="h-4 w-4" />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">{t('common.logout')}</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    {:else}
+      <div class="flex gap-1 p-3">
+        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground/60 hover:text-sidebar-foreground">
+          <span class="text-xs font-bold">{localeLabel}</span>
+        </TooltipButton>
+        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground/60 hover:text-sidebar-foreground">
+          {#if getResolvedTheme() === 'dark'}
+            <Sun class="h-4 w-4" />
+          {:else}
+            <Moon class="h-4 w-4" />
+          {/if}
+        </TooltipButton>
+      </div>
+    {/if}
+  </div>
+</aside>

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

@@ -0,0 +1,14 @@
+import type { Identity, MenuItem } from '@svadmin/core';
+type $$ComponentProps = {
+    collapsed: boolean;
+    identity: Identity | null;
+    title: string;
+    onToggle: () => void;
+    onLogout: () => void;
+    menu?: MenuItem[];
+    /** 'hash' for SPA hash routing, 'path' for SvelteKit/filesystem routing, 'auto' to detect */
+    routeMode?: 'hash' | 'path' | 'auto';
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/SidebarItem.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { MenuItem } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import * as Collapsible from './ui/collapsible/index.js';
+  import * as Tooltip from './ui/tooltip/index.js';
+  import SidebarItem from './SidebarItem.svelte';
+  import {
+    LayoutDashboard, FileText, Users, Settings, Home,
+    ChevronDown, Folder, ExternalLink, type Icon as LucideIcon,
+  } from '@lucide/svelte';
+
+  let { item, currentPath, collapsed = false, depth = 0 }: {
+    item: MenuItem;
+    currentPath: string;
+    collapsed?: boolean;
+    depth?: number;
+  } = $props();
+
+  const iconMap: Record<string, typeof LayoutDashboard> = {
+    dashboard: LayoutDashboard,
+    posts: FileText,
+    users: Users,
+    settings: Settings,
+    home: Home,
+    folder: Folder,
+  };
+
+  function getIcon(name?: string): typeof LayoutDashboard {
+    if (!name) return depth === 0 ? Settings : Folder;
+    return iconMap[name] ?? Settings;
+  }
+
+  function getLabel(mi: MenuItem): string {
+    return mi.label ?? mi.name;
+  }
+
+  function isActive(itemHref: string | undefined): boolean {
+    if (!itemHref) return false;
+    if (itemHref === '/') return currentPath === '/';
+    return currentPath.startsWith(itemHref);
+  }
+
+  /** Check if any child (recursively) is active — used to auto-open parent groups */
+  function hasActiveChild(menuItem: MenuItem): boolean {
+    if (isActive(menuItem.href)) return true;
+    return menuItem.children?.some((c: MenuItem) => hasActiveChild(c)) ?? false;
+  }
+
+  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');
+
+  // Track open state — auto-open if a child is active
+  let isOpen = $state(false);
+  $effect(() => { if (childActive) isOpen = true; });
+
+  const Icon = $derived(getIcon(item.icon));
+  const label = $derived(getLabel(item));
+</script>
+
+{#if item.meta?.hidden}
+  <!-- hidden item, render nothing -->
+{:else if hasChildren && !collapsed}
+  <!-- Parent node with children: render as collapsible group -->
+  <Collapsible.Root bind:open={isOpen}>
+    <Collapsible.Trigger
+      class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+      {childActive
+        ? 'text-sidebar-foreground bg-sidebar-accent/30'
+        : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+      style="padding-left: {12 + depth * 12}px"
+    >
+      <span class="flex items-center gap-3">
+        <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' : ''}" />
+    </Collapsible.Trigger>
+    <Collapsible.Content>
+      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px">
+        {#each item.children as child}
+          <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
+        {/each}
+      </div>
+    </Collapsible.Content>
+  </Collapsible.Root>
+{:else if collapsed}
+  <!-- Collapsed sidebar: icon-only with tooltip -->
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      {#snippet child({ props }: { props: Record<string, unknown> })}
+        <a
+          {...props}
+          href={item.href ? `#${item.href}` : undefined}
+          target={isExternal ? '_blank' : undefined}
+          rel={isExternal ? 'noopener noreferrer' : undefined}
+          class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+          {active
+            ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+        >
+          <Icon class="h-4 w-4 flex-shrink-0" />
+        </a>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content side="right">
+      {label}
+    </Tooltip.Content>
+  </Tooltip.Root>
+{:else}
+  <!-- Leaf node: render as a link -->
+  <a
+    href={item.href ? `#${item.href}` : undefined}
+    target={isExternal ? '_blank' : undefined}
+    rel={isExternal ? 'noopener noreferrer' : undefined}
+    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+    {active
+      ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+    style="padding-left: {12 + depth * 12}px"
+  >
+    <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}
+  </a>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { MenuItem } from '@svadmin/core';
+import SidebarItem from './SidebarItem.svelte';
+type $$ComponentProps = {
+    item: MenuItem;
+    currentPath: string;
+    collapsed?: boolean;
+    depth?: number;
+};
+declare const SidebarItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarItem = ReturnType<typeof SidebarItem>;
+export default SidebarItem;