@svadmin/ui 0.13.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/app.css

@@ -154,7 +154,16 @@ button:active:not(:disabled) {
   border-color: var(--color-primary);
 }
 
-/* Scrollbar styling */
+/* Base scrollbar styling (Firefox + Standard) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.8 0 0) transparent;
+}
+.dark * {
+  scrollbar-color: oklch(0.35 0 0) transparent;
+}
+
+/* Scrollbar styling (Webkit) */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: oklch(0.8 0 0); border-radius: 3px; }
@@ -166,9 +175,11 @@ button:active:not(:disabled) {
 [data-slot="card"] {
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
-[data-slot="card"]:hover {
-  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
-  transform: translateY(-1px);
+@media (hover: hover) {
+  [data-slot="card"]:hover {
+    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
+    transform: translateY(-1px);
+  }
 }
 
 /* ② Table Row Hover — primary color tint instead of plain gray */
@@ -302,6 +313,13 @@ button:active:not(:disabled) {
   }
 }
 
+/* ⑫b Safe Area Inset — iPhone notch / Home Bar support */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  main {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
 /* ⑫ Optimistic Delete — row fade-out visual feedback */
 @keyframes svadmin-row-delete {
   from {
@@ -372,6 +390,25 @@ main {
   margin-right: 4rem;
 }
 
+/* ⑰ Accessibility Minimum Touch Target — Apple HIG 44px minimum */
+@media (max-width: 640px) and (pointer: coarse) {
+  [data-slot="button"] {
+    position: relative;
+  }
+  [data-slot="button"]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+
 /* Tailwind CSS v4 — Map design tokens to utility classes */
 @theme {
   --color-background: var(--background);

package/src/components/AdminApp.svelte

@@ -2,7 +2,7 @@
   // Auto-inject design tokens so consumers don't need to manually import
   import '../app.css';
   import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig } from '@svadmin/core';
+  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem } from '@svadmin/core';
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
@@ -41,6 +41,8 @@
     loginPage?: Snippet;
     /** Override default components via DI */
     components?: Partial<ComponentRegistry>;
+    /** Custom multi-level menu configuration */
+    menu?: MenuItem[];
   }
 
   let {
@@ -55,6 +57,7 @@
     dashboard,
     loginPage,
     components: userComponents,
+    menu,
   }: Props = $props();
 
   // Default component registry
@@ -143,7 +146,7 @@
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
     <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
-    <Layout {title}>
+    <Layout {title} {menu}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
       {#if route === '/'}

package/src/components/AutoForm.svelte

@@ -256,7 +256,7 @@
                 <Card.Title class="text-lg">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class="space-y-5">
+            <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
               {#each group.fields as field (field.key)}
                 <div class:border-destructive={!!fieldErrors[field.key]}>
                   {#if fieldRenderer}
@@ -278,7 +278,7 @@
         {/each}
       {:else}
         <Card.Root>
-          <Card.Content class="space-y-5">
+          <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
             {#each formFields as field (field.key)}
               <div class:border-destructive={!!fieldErrors[field.key]}>
                 {#if fieldRenderer}

package/src/components/AutoTable.svelte

@@ -335,9 +335,9 @@
 
 <div class="space-y-4">
   <!-- Header -->
-  <div class="flex items-center justify-between">
-    <h1 class="text-xl font-semibold text-foreground">{resource.label}</h1>
-    <div class="flex items-center gap-2">
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <h1 class="text-lg sm:text-xl font-semibold text-foreground">{resource.label}</h1>
+    <div class="flex flex-wrap items-center gap-2">
       {#if canExport}
         <Button variant="outline" size="sm" onclick={exportCSV}>
           <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
@@ -723,11 +723,11 @@
 
   <!-- Pagination (shadcn) -->
   {#if totalPages > 0}
-  <div class="flex items-center justify-between text-sm text-muted-foreground">
+  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
     <div class="flex items-center gap-2">
       <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
       <Select
-        class="h-8 w-auto text-xs"
+        class="hidden sm:inline-block h-8 w-auto text-xs"
         value={String(pagination.pageSize ?? 10)}
         onchange={(e: Event) => {
           const size = Number((e.target as HTMLSelectElement).value);

package/src/components/ChatDialog.svelte

@@ -260,7 +260,7 @@
         tooltip={t('chat.title') || 'AI Assistant'}
         variant="default"
         size="icon"
-        class="fixed bottom-6 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="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"
         onclick={() => { open = true; minimized = false; }}
       >
         <MessageCircle class="h-5 w-5" />
@@ -276,9 +276,11 @@
   <!-- Chat Panel -->
   {#if open}
     <div
-      class="fixed bottom-6 right-6 z-[9998] flex flex-col rounded-2xl border bg-card shadow-2xl overflow-hidden"
-      class:w-[400px]={!minimized}
-      class:h-[560px]={!minimized}
+      class="fixed z-[9998] flex flex-col rounded-2xl border bg-card shadow-2xl overflow-hidden bottom-3 right-3 sm:bottom-6 sm:right-6"
+      class:w-[calc(100vw-1.5rem)]={!minimized}
+      class:sm:w-[400px]={!minimized}
+      class:h-[calc(100dvh-6rem)]={!minimized}
+      class:sm:h-[560px]={!minimized}
       class:w-[280px]={minimized}
       class:h-auto={minimized}
       transition:fly={{ y: 300, duration: 250 }}

package/src/components/Layout.svelte

@@ -10,7 +10,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import { t } from '@svadmin/core/i18n';
   import { getAuthProvider } from '@svadmin/core';
-  import type { Identity } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { currentPath } from '@svadmin/core/router';
   import { Skeleton } from './ui/skeleton/index.js';
@@ -22,7 +22,7 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin' }: { children: Snippet; title?: string } = $props();
+  let { children, title = 'Admin', menu }: { children: Snippet; title?: string; menu?: MenuItem[] } = $props();
 
   let hasAuth = true;
   let auth: ReturnType<typeof getAuthProvider> | null = null;
@@ -62,12 +62,42 @@
   }
 
   let collapsed = $state(false);
+
+  // Swipe gesture for mobile menu
+  let touchStartX = $state(0);
+  let touchEndX = $state(0);
+
+  function handleTouchStart(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchStartX = e.touches[0].clientX;
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchEnd() {
+    // Only trigger swipe-to-open if starting near the left edge (e.g., within 30px)
+    // and swiping right by at least 50px
+    if (touchStartX < 30 && touchEndX - touchStartX > 50) {
+      mobileMenuOpen = true;
+    }
+  }
 </script>
 
-<svelte:window onkeydown={(e) => {
-  if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
-  if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
-}} />
+<svelte:window 
+  onkeydown={(e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
+    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
+  }}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+/>
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
     <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
@@ -91,13 +121,13 @@
   <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
-      <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+      <Sidebar {collapsed} {identity} {title} {menu} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
     <!-- Mobile sidebar via Sheet -->
     <Sheet.Root bind:open={mobileMenuOpen} side="left">
       <div class="md:hidden">
-        <Sidebar collapsed={false} {identity} {title} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+        <Sidebar collapsed={false} {identity} {title} {menu} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 

package/src/components/MarkdownRenderer.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   // @ts-expect-error - missing types
-  import { Marked } from 'marked';
+  import { Marked } from "marked";
   // @ts-expect-error - missing types
-  import { markedHighlight } from 'marked-highlight';
+  import { markedHighlight } from "marked-highlight";
   // @ts-expect-error - missing types
-  import hljs from 'highlight.js';
-  import 'highlight.js/styles/github-dark.css'; // or your preferred theme
+  import * as hljsModule from "highlight.js";
+  const hljs = "default" in hljsModule ? hljsModule.default : hljsModule;
+  import "highlight.js/styles/github-dark.css"; // or your preferred theme
   // @ts-expect-error - missing types
-  import DOMPurify from 'isomorphic-dompurify';
-  import { Check, Copy } from 'lucide-svelte';
-  import { Button } from './ui/button/index.js';
+  import DOMPurify from "isomorphic-dompurify";
+  import { Check, Copy } from "lucide-svelte";
+  import { Button } from "./ui/button/index.js";
 
   interface Props {
     /** The raw markdown string to render */
@@ -20,39 +21,41 @@
     class?: string;
   }
 
-  let { content, streaming = false, class: className = '' }: Props = $props();
+  let { content, streaming = false, class: className = "" }: Props = $props();
 
   // Configure marked with syntax highlighting
   const marked = new Marked(
     markedHighlight({
-      langPrefix: 'hljs language-',
+      langPrefix: "hljs language-",
       highlight(code: string, lang: string) {
-        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        const language = hljs.getLanguage(lang) ? lang : "plaintext";
         return hljs.highlight(code, { language }).value;
-      }
-    })
+      },
+    }),
   );
 
   // Render HTML safely
-  const html = $derived(DOMPurify.sanitize(marked.parse(content || '') as string));
+  const html = $derived(
+    DOMPurify.sanitize(marked.parse(content || "") as string),
+  );
 
   // Handle copy code blocks
   let copiedBlock = $state<string | null>(null);
 
   function handleCopy(event: MouseEvent) {
     const target = event.target as HTMLElement;
-    const button = target.closest('.copy-btn');
+    const button = target.closest(".copy-btn");
     if (!button) return;
 
-    const pre = button.closest('.code-block-wrapper')?.querySelector('pre');
+    const pre = button.closest(".code-block-wrapper")?.querySelector("pre");
     if (!pre) return;
 
-    const code = pre.textContent || '';
+    const code = pre.textContent || "";
     navigator.clipboard.writeText(code);
 
     const id = Math.random().toString(36);
     copiedBlock = id;
-    button.setAttribute('data-copied-id', id);
+    button.setAttribute("data-copied-id", id);
 
     setTimeout(() => {
       if (copiedBlock === id) copiedBlock = null;
@@ -65,48 +68,51 @@
     return {
       update(newHtml: string) {
         // Find all pre > code blocks that don't have wrappers yet
-        const pres = node.querySelectorAll('pre:not(.enhanced)');
-        pres.forEach(pre => {
-          pre.classList.add('enhanced');
-          const wrapper = document.createElement('div');
-          wrapper.className = 'code-block-wrapper group relative my-4 rounded-md bg-foreground/95';
-          
-          const header = document.createElement('div');
-          header.className = 'flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800';
-          
-          const lang = Array.from(pre.querySelector('code')?.classList || []).find(c => c.startsWith('language-'))?.replace('language-', '') || 'Code';
+        const pres = node.querySelectorAll("pre:not(.enhanced)");
+        pres.forEach((pre) => {
+          pre.classList.add("enhanced");
+          const wrapper = document.createElement("div");
+          wrapper.className =
+            "code-block-wrapper group relative my-4 rounded-md bg-foreground/95";
+
+          const header = document.createElement("div");
+          header.className =
+            "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
+
+          const lang =
+            Array.from(pre.querySelector("code")?.classList || [])
+              .find((c) => c.startsWith("language-"))
+              ?.replace("language-", "") || "Code";
           header.innerHTML = `
             <span>${lang}</span>
             <button class="copy-btn hover:text-white transition-colors flex items-center gap-1">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
             </button>
           `;
-          
+
           pre.replaceWith(wrapper);
           wrapper.appendChild(header);
-          
-          const scrollContainer = document.createElement('div');
-          scrollContainer.className = 'overflow-x-auto p-4';
+
+          const scrollContainer = document.createElement("div");
+          scrollContainer.className = "overflow-x-auto p-4";
           scrollContainer.appendChild(pre);
           wrapper.appendChild(scrollContainer);
         });
 
         // Add event listener for copy buttons
-        node.addEventListener('click', handleCopy);
+        node.addEventListener("click", handleCopy);
       },
       destroy() {
-        node.removeEventListener('click', handleCopy);
-      }
+        node.removeEventListener("click", handleCopy);
+      },
     };
   }
 </script>
 
 <div 
-  class="prose prose-sm dark:prose-invert max-w-none break-words {className}"
+  class="prose prose-sm dark:prose-invert max-w-none wrap-break-word {className}"
   class:streaming={streaming}
   use:enhanceCodeBlocks={html}
 >
   {@html html}
 </div>
-
-

package/src/components/ShowPage.svelte

@@ -39,9 +39,9 @@
     <Card.Root>
       <Card.Content class="divide-y divide-border p-0">
         {#each showFields.slice(0, 6) as _}
-          <div class="flex px-6 py-4">
-            <Skeleton class="h-4 w-1/4" />
-            <Skeleton class="h-4 w-2/5 ml-auto" />
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+            <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>
@@ -52,9 +52,9 @@
         {#each showFields as field}
           {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex px-6 py-4">
-            <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
-            <div class="w-2/3 text-sm text-foreground">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+            <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}

package/src/components/Sidebar.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { getResources, canAccessAsync } from '@svadmin/core';
-  import type { Identity } 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';
@@ -16,13 +17,14 @@
     ChevronLeft, ChevronDown, LogOut, Sun, Moon, Palette
   } from 'lucide-svelte';
 
-  let { collapsed, identity, title, onToggle, onLogout } = $props<{
+  let { collapsed, identity, title, onToggle, onLogout, menu }: {
     collapsed: boolean;
     identity: Identity | null;
     title: string;
     onToggle: () => void;
     onLogout: () => void;
-  }>();
+    menu?: MenuItem[];
+  } = $props();
 
   const resources = getResources();
 
@@ -176,7 +178,14 @@
   </div>
 
   <ScrollArea class="flex-1">
-  <nav aria-label="Main menu" class="py-4 px-3 space-y-4">
+  <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 -->
@@ -248,6 +257,7 @@
         {/each}
       {/if}
     {/each}
+    {/if}
   </nav>
   </ScrollArea>
 

package/src/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/src/components/TooltipButton.svelte

@@ -4,16 +4,13 @@
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children'> {
     tooltip: string;
     variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
     size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
     side?: 'top' | 'right' | 'bottom' | 'left';
     class?: string;
     onclick?: (e: MouseEvent) => void;
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    tabindex?: number;
     children: Snippet;
   }
 
@@ -28,6 +25,7 @@
     type = 'button',
     tabindex,
     children,
+    ...restProps
   }: Props = $props();
 </script>
 
@@ -36,10 +34,12 @@
     {#snippet child({ props })}
       <Button
         {...props}
+        {...restProps}
         {variant}
         {size}
         {type}
         class={className}
+        aria-label={restProps['aria-label'] ?? tooltip}
         {onclick}
         {disabled}
         {tabindex}

package/src/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -8,7 +8,7 @@
 
 <ol
   data-slot="breadcrumb-list"
-  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)}
+  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5", className)}
   {...restProps}
 >
   {@render children?.()}