@tradalab/lyra 1.0.0 → 1.3.0

package/dist/shell/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentProps, ReactNode } from 'react';
-import { S as SidebarProvider, a as SidebarInset, B as Breadcrumb } from '../breadcrumb-CGzHbSCd.js';
+import { S as SidebarProvider, a as SidebarInset, b as Sidebar, A as AccountMenuUser, c as AccountMenuLabels, B as Breadcrumb } from '../breadcrumb-CgEcSonR.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import 'radix-ui';
@@ -39,6 +39,47 @@ declare function AppShellHeader({ className, children, ...rest }: ComponentProps
 /** Scroll body inside `<AppShellMain>`. Sibling of `<AppShellHeader>`. */
 declare function AppShellBody({ className, children, ...rest }: ComponentProps<"div">): React.JSX.Element;
 
+/**
+ * Dual / stacked sidebar wrapper — an icon rail plus one or more content
+ * panels rendered side-by-side inside a single `<Sidebar>`. This is the
+ * shadcn "sidebar-07" pattern.
+ *
+ * The `*:data-[sidebar=sidebar]:flex-row` trick lays the inner
+ * `[data-sidebar=sidebar]` wrappers of the nested {@link SidebarDock} /
+ * {@link SidebarPanel} columns out horizontally. `variant`/`collapsible`
+ * default to `"sidebar"`/`"icon"` but can be overridden.
+ *
+ * @example
+ * import { AppShell, AppShellMain, StackedSidebar, SidebarDock, SidebarPanel } from "@tradalab/lyra/shell"
+ * import { SidebarHeader, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from "@tradalab/lyra/ui"
+ *
+ * <AppShell>
+ *   <StackedSidebar>
+ *     <SidebarDock>
+ *       <SidebarHeader>{logo}</SidebarHeader>
+ *       <SidebarContent>{iconButtons}</SidebarContent>
+ *     </SidebarDock>
+ *     {tab === "files" ? <SidebarPanel>{tree}</SidebarPanel> : null}
+ *   </StackedSidebar>
+ *   <AppShellMain>{children}</AppShellMain>
+ * </AppShell>
+ */
+declare function StackedSidebar({ className, ...rest }: ComponentProps<typeof Sidebar>): React.JSX.Element;
+/**
+ * Narrow icon-rail column inside a {@link StackedSidebar}. Fixed to the icon
+ * width, never collapses on its own (the parent `StackedSidebar` owns the
+ * icon-mode toggle).
+ *
+ * Named `SidebarDock` — not `SidebarRail` — because `SidebarRail` already
+ * exists in `@tradalab/lyra/ui` as shadcn's drag-to-resize edge handle.
+ */
+declare function SidebarDock({ className, ...rest }: ComponentProps<typeof Sidebar>): React.JSX.Element;
+/**
+ * Wider content column inside a {@link StackedSidebar} (tree, list, …).
+ * Fills remaining width; render conditionally to show/hide per app state.
+ */
+declare function SidebarPanel({ className, ...rest }: ComponentProps<typeof Sidebar>): React.JSX.Element;
+
 interface NavGroupProps {
     label?: ReactNode;
     children: ReactNode;
@@ -72,6 +113,134 @@ interface NavItemProps {
 /** Sidebar nav row. Must be rendered inside a {@link NavGroup}. */
 declare function NavItem({ href, label, icon, tooltip, matchMode, }: NavItemProps): React.JSX.Element;
 
+interface NavSectionProps {
+    /** Optional group heading. */
+    label?: ReactNode;
+    /** Nav rows — each rendered as a {@link NavItem}. */
+    items: NavItemProps[];
+}
+/**
+ * Config-driven convenience over {@link NavGroup} + {@link NavItem}: pass a
+ * data array instead of hand-mapping JSX. For dynamic or conditional rows,
+ * compose `NavGroup`/`NavItem` directly.
+ *
+ * @example
+ * const NAV = [
+ *   { href: "/files", label: "Files", icon: <Folder /> },
+ *   { href: "/trash", label: "Trash", icon: <Trash2 /> },
+ * ]
+ * <NavSection label="Workspace" items={NAV} />
+ */
+declare function NavSection({ label, items }: NavSectionProps): React.JSX.Element;
+
+interface NavUserThemeLabels {
+    theme: string;
+    light: string;
+    dark: string;
+    system: string;
+}
+/** Default English theme-submenu labels — spread + override for i18n. */
+declare const defaultNavUserThemeLabels: NavUserThemeLabels;
+interface NavUserProps {
+    /** Signed-in user. Renders nothing when `null`/`undefined`. */
+    user?: AccountMenuUser | null;
+    /** Account-action labels — reuses lyra's {@link AccountMenuLabels}. */
+    labels?: Partial<AccountMenuLabels>;
+    /** Switch-account handler. Item hidden if omitted. */
+    onSwitchAccount?: () => void;
+    /** Sign-out handler. Item hidden if omitted. */
+    onSignOut?: () => void;
+    /** Render the light/dark/system theme submenu. Default `true`. */
+    showTheme?: boolean;
+    /** Theme-submenu labels. */
+    themeLabels?: Partial<NavUserThemeLabels>;
+    /** Extra menu content inserted below the theme submenu. */
+    children?: ReactNode;
+}
+/**
+ * Sidebar-footer account menu — the standardized NavUser for app shells.
+ * Avatar trigger (size `lg`) + name/email opening a dropdown with an optional
+ * theme switcher and switch-account / sign-out actions. Auth flows stay in the
+ * app (callbacks); labels are props for i18n.
+ *
+ * Differs from {@link AccountMenu} in `@tradalab/lyra/ui`: that one is a
+ * generic header dropdown; this is styled for the collapsible sidebar footer
+ * and follows `useSidebar()` for mobile placement.
+ *
+ * Must render inside an `AppShell`/SidebarProvider, and below a
+ * `TooltipProvider` (the avatar button's collapsed-mode tooltip requires one —
+ * app root providers normally mount it). The theme submenu needs a
+ * `next-themes` provider mounted (it no-ops without one); pass
+ * `showTheme={false}` for apps with a fixed theme.
+ *
+ * @example
+ * import { NavUser } from "@tradalab/lyra/shell"
+ * import { SidebarFooter } from "@tradalab/lyra/ui"
+ *
+ * <SidebarFooter>
+ *   <NavUser
+ *     user={session.user}
+ *     onSwitchAccount={() => signIn("zitadel", { redirectTo: "/" }, { prompt: "select_account" })}
+ *     onSignOut={() => signOut({ redirectTo: "/" })}
+ *   />
+ * </SidebarFooter>
+ */
+declare function NavUser({ user, labels, onSwitchAccount, onSignOut, showTheme, themeLabels, children, }: NavUserProps): React.JSX.Element | null;
+
+interface TabItem {
+    id: string;
+    title: string;
+    /** Secondary line under the title (e.g. connection/db, file path). */
+    subtitle?: ReactNode;
+    /** Leading icon element — the app maps its own tab type → icon. */
+    icon?: ReactNode;
+    pinned?: boolean;
+}
+interface TabBarLabels {
+    close: string;
+    pinTab: string;
+    unpinTab: string;
+    closeOthers: string;
+    closeAll: string;
+}
+/** Default English labels — spread + override for i18n. */
+declare const defaultTabBarLabels: TabBarLabels;
+interface TabBarProps {
+    tabs: TabItem[];
+    activeId: string | null;
+    onSelect: (id: string) => void;
+    onClose: (id: string) => void;
+    /** Pin row in the context menu is hidden when omitted. */
+    onTogglePin?: (id: string) => void;
+    /** "Close others" row is hidden when omitted. */
+    onCloseOthers?: (id: string) => void;
+    /** "Close all" row is hidden when omitted. */
+    onCloseAll?: () => void;
+    labels?: Partial<TabBarLabels>;
+}
+/**
+ * Horizontal tab strip for the content area of stacked-sidebar apps
+ * (redishub, loom). Presentational + store-agnostic: the app owns tab state
+ * and passes `tabs` + callbacks; `icon`/`subtitle` are per-tab so apps map
+ * their own tab types, and labels are props for i18n. Renders nothing when
+ * `tabs` is empty.
+ *
+ * Sizes rows from the `--tab-height` CSS var — set it in your globals.
+ *
+ * @example
+ * const s = useTabStore()
+ * <TabBar
+ *   tabs={s.tabs.map(t => ({ id: t.id, title: t.title, pinned: t.pinned, icon: <Icon t={t.type}/>, subtitle: fmt(t) }))}
+ *   activeId={s.activeTabId}
+ *   onSelect={s.setActiveTabId}
+ *   onClose={s.removeTab}
+ *   onTogglePin={s.togglePin}
+ *   onCloseOthers={s.closeOthers}
+ *   onCloseAll={s.closeAll}
+ * />
+ */
+declare function TabBar({ tabs, activeId, onSelect, onClose, onTogglePin, onCloseOthers, onCloseAll, labels, }: TabBarProps): React.JSX.Element | null;
+
 interface BreadcrumbsProps extends ComponentProps<typeof Breadcrumb> {
     /** Separator content. Falls back to shadcn's chevron when omitted. */
     separator?: ReactNode;
@@ -81,4 +250,4 @@ interface BreadcrumbsProps extends ComponentProps<typeof Breadcrumb> {
 /** Pathname-derived breadcrumbs. Renders nothing on the root route. */
 declare function Breadcrumbs({ separator, labels, ...rest }: BreadcrumbsProps): React.JSX.Element | null;
 
-export { AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, Breadcrumbs, type BreadcrumbsProps, type MatchMode, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, type UseActiveRoute, useActiveRoute };
+export { AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, Breadcrumbs, type BreadcrumbsProps, type MatchMode, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, NavSection, type NavSectionProps, NavUser, type NavUserProps, type NavUserThemeLabels, SidebarDock, SidebarPanel, StackedSidebar, TabBar, type TabBarLabels, type TabBarProps, type TabItem, type UseActiveRoute, defaultNavUserThemeLabels, defaultTabBarLabels, useActiveRoute };

package/dist/shell/index.js

@@ -1,12 +1,15 @@
 "use client";
-import { SidebarInset, SidebarProvider, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, Breadcrumb, BreadcrumbList, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink } from '../chunk-E2QCV5QI.js';
+import { SidebarInset, SidebarProvider, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, useSidebar, defaultAccountMenuLabels, Avatar, AvatarImage, AvatarFallback, initialsOf, ScrollArea, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ScrollBar, Breadcrumb, BreadcrumbList, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink } from '../chunk-5UAFV75V.js';
 import '../chunk-QYA2HGKW.js';
-import '../chunk-KFQOYZ64.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItem } from '../chunk-VEWKPOMS.js';
+import { Button } from '../chunk-KFQOYZ64.js';
 import { cn } from '../chunk-XH55BHUU.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Fragment } from 'react';
+import { ChevronsUpDown, Palette, Sun, Moon, Monitor, UserRoundCog, LogOut, Pin, X, PinOff, ListX, Trash2, ChevronDown } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useRef, useEffect, Fragment as Fragment$1 } from 'react';
 
 function AppShell({ children, ...rest }) {
   return /* @__PURE__ */ jsx(SidebarProvider, { ...rest, children });
@@ -36,6 +39,52 @@ function AppShellBody({
 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto", className), ...rest, children });
 }
+function StackedSidebar({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      variant: "sidebar",
+      collapsible: "icon",
+      ...rest,
+      className: cn(
+        "overflow-hidden *:data-[sidebar=sidebar]:flex-row",
+        className
+      )
+    }
+  );
+}
+function SidebarDock({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      ...rest,
+      collapsible: "none",
+      className: cn(
+        "w-[calc(var(--sidebar-width-icon)+1px)]! overflow-hidden border-r",
+        className
+      )
+    }
+  );
+}
+function SidebarPanel({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      ...rest,
+      collapsible: "none",
+      className: cn("flex-1 overflow-hidden", className)
+    }
+  );
+}
 function NavGroup({ label, children }) {
   return /* @__PURE__ */ jsxs(SidebarGroup, { children: [
     label != null ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }) : null,
@@ -73,6 +122,310 @@ function NavItem({
     }
   ) });
 }
+function NavSection({ label, items }) {
+  return /* @__PURE__ */ jsx(NavGroup, { label, children: items.map((item) => /* @__PURE__ */ jsx(NavItem, { ...item }, item.href)) });
+}
+var defaultNavUserThemeLabels = {
+  theme: "Theme",
+  light: "Light",
+  dark: "Dark",
+  system: "System"
+};
+var THEMES = [
+  { value: "light", key: "light", icon: Sun },
+  { value: "dark", key: "dark", icon: Moon },
+  { value: "system", key: "system", icon: Monitor }
+];
+function NavUser({
+  user,
+  labels,
+  onSwitchAccount,
+  onSignOut,
+  showTheme = true,
+  themeLabels,
+  children
+}) {
+  const { isMobile } = useSidebar();
+  const { theme, setTheme } = useTheme();
+  const l = { ...defaultAccountMenuLabels, ...labels };
+  const t = { ...defaultNavUserThemeLabels, ...themeLabels };
+  if (!user) return null;
+  const name = user.name ?? user.email ?? l.account;
+  const email = user.email ?? "";
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        tooltip: name,
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "size-8 rounded-lg", children: [
+            user.image ? /* @__PURE__ */ jsx(AvatarImage, { src: user.image, alt: name }) : null,
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: initialsOf(name) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
+            email ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: email }) : null
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-(--radix-dropdown-menu-trigger-width) min-w-56",
+        side: isMobile ? "bottom" : "right",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium leading-tight", children: name }),
+            email ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs font-normal leading-tight", children: email }) : null
+          ] }),
+          showTheme ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+                /* @__PURE__ */ jsx(Palette, { className: "mr-2 size-4" }),
+                t.theme
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(
+                DropdownMenuRadioGroup,
+                {
+                  value: theme ?? "system",
+                  onValueChange: setTheme,
+                  children: THEMES.map(({ value, key, icon: Icon }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value, children: [
+                    /* @__PURE__ */ jsx(Icon, { className: "mr-2 size-4" }),
+                    t[key]
+                  ] }, value))
+                }
+              ) })
+            ] })
+          ] }) : null,
+          children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            children
+          ] }) : null,
+          onSwitchAccount || onSignOut ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+          onSwitchAccount ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSwitchAccount, children: [
+            /* @__PURE__ */ jsx(UserRoundCog, { className: "mr-2 size-4" }),
+            l.switchAccount
+          ] }) : null,
+          onSignOut ? /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onSelect: onSignOut, children: [
+            /* @__PURE__ */ jsx(LogOut, { className: "mr-2 size-4" }),
+            l.signOut
+          ] }) : null
+        ]
+      }
+    )
+  ] }) }) });
+}
+var defaultTabBarLabels = {
+  close: "Close",
+  pinTab: "Pin tab",
+  unpinTab: "Unpin tab",
+  closeOthers: "Close others",
+  closeAll: "Close all"
+};
+function TabBar({
+  tabs,
+  activeId,
+  onSelect,
+  onClose,
+  onTogglePin,
+  onCloseOthers,
+  onCloseAll,
+  labels
+}) {
+  const l = { ...defaultTabBarLabels, ...labels };
+  const activeTabRef = useRef(null);
+  useEffect(() => {
+    if (activeId && activeTabRef.current) {
+      activeTabRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }, [activeId]);
+  const handleWheel = (e) => {
+    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+      const viewport = e.currentTarget.querySelector(
+        '[data-slot="scroll-area-viewport"]'
+      );
+      if (viewport) viewport.scrollLeft += e.deltaY * 0.5;
+    }
+  };
+  if (tabs.length === 0) return null;
+  const hasContextActions = Boolean(onTogglePin || onCloseOthers || onCloseAll);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group/tabbar flex w-full shrink-0 items-center overflow-hidden border-b bg-muted/30",
+      style: { height: "var(--tab-height)" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          ScrollArea,
+          {
+            type: "hover",
+            className: "min-w-0 flex-1 overflow-hidden [&_[data-orientation=vertical]]:hidden",
+            onWheel: handleWheel,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex w-max items-center gap-0",
+                  style: { height: "var(--tab-height)" },
+                  children: tabs.map((tab) => {
+                    const isActive = activeId === tab.id;
+                    return /* @__PURE__ */ jsxs(ContextMenu, { children: [
+                      /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ref: isActive ? activeTabRef : null,
+                          onClick: () => onSelect(tab.id),
+                          title: tab.title,
+                          className: cn(
+                            "group relative flex min-w-[140px] max-w-[240px] shrink-0 cursor-pointer select-none items-center gap-2 border-r px-3 transition-colors",
+                            isActive ? "border-t-2 border-t-primary bg-background" : "border-t-2 border-t-transparent bg-transparent text-muted-foreground hover:bg-muted/50",
+                            tab.pinned && "min-w-[100px] bg-primary/5"
+                          ),
+                          style: { height: "var(--tab-height)" },
+                          children: [
+                            tab.icon ? /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "flex [&_svg]:size-3.5",
+                                    isActive && "text-primary"
+                                  ),
+                                  children: tab.icon
+                                }
+                              ),
+                              tab.pinned ? /* @__PURE__ */ jsx("div", { className: "absolute -right-1.5 -top-1.5 rounded-full bg-background p-0.5 shadow-sm", children: /* @__PURE__ */ jsx(Pin, { className: "size-2 fill-primary text-primary" }) }) : null
+                            ] }) : null,
+                            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start justify-center overflow-hidden py-1", children: [
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "w-full truncate text-xs leading-tight",
+                                    isActive && "font-medium text-foreground"
+                                  ),
+                                  children: tab.title
+                                }
+                              ),
+                              tab.subtitle ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 w-full truncate text-[10px] leading-none text-muted-foreground/70", children: tab.subtitle }) : null
+                            ] }),
+                            /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                variant: "ghost",
+                                size: "icon",
+                                title: l.close,
+                                className: cn(
+                                  "size-5 shrink-0 rounded-md opacity-0 transition-opacity hover:bg-muted-foreground/20 group-hover:opacity-100",
+                                  isActive && "opacity-100"
+                                ),
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  onClose(tab.id);
+                                },
+                                children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+                              }
+                            ),
+                            isActive ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 h-[2px] bg-background" }) : null
+                          ]
+                        }
+                      ) }),
+                      hasContextActions ? /* @__PURE__ */ jsxs(ContextMenuContent, { className: "w-48", children: [
+                        onTogglePin ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(ContextMenuItem, { onClick: () => onTogglePin(tab.id), children: tab.pinned ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(PinOff, { className: "mr-2 size-4" }),
+                            /* @__PURE__ */ jsx("span", { children: l.unpinTab })
+                          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(Pin, { className: "mr-2 size-4" }),
+                            /* @__PURE__ */ jsx("span", { children: l.pinTab })
+                          ] }) }),
+                          /* @__PURE__ */ jsx(ContextMenuSeparator, {})
+                        ] }) : null,
+                        /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: () => onClose(tab.id), children: [
+                          /* @__PURE__ */ jsx(X, { className: "mr-2 size-4" }),
+                          /* @__PURE__ */ jsx("span", { children: l.close })
+                        ] }),
+                        onCloseOthers ? /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: () => onCloseOthers(tab.id), children: [
+                          /* @__PURE__ */ jsx(ListX, { className: "mr-2 size-4" }),
+                          /* @__PURE__ */ jsx("span", { children: l.closeOthers })
+                        ] }) : null,
+                        onCloseAll ? /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: () => onCloseAll(), children: [
+                          /* @__PURE__ */ jsx(Trash2, { className: "mr-2 size-4" }),
+                          /* @__PURE__ */ jsx("span", { children: l.closeAll })
+                        ] }) : null
+                      ] }) : null
+                    ] }, tab.id);
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal", className: "z-20 h-1.5 hover:h-2" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex shrink-0 items-center border-l bg-muted/30 px-1",
+            style: { height: "var(--tab-height)" },
+            children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-8 shrink-0 rounded-sm", children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" }) }) }),
+              /* @__PURE__ */ jsx(
+                DropdownMenuContent,
+                {
+                  align: "end",
+                  className: "max-h-[400px] w-[260px] overflow-y-auto",
+                  children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => onSelect(tab.id),
+                      title: tab.title,
+                      className: cn(
+                        "cursor-pointer gap-2 py-2",
+                        activeId === tab.id && "bg-accent"
+                      ),
+                      children: [
+                        tab.icon ? /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex text-muted-foreground [&_svg]:size-4", children: tab.icon }),
+                          tab.pinned ? /* @__PURE__ */ jsx(Pin, { className: "absolute -right-1 -top-1 size-2 fill-primary text-primary" }) : null
+                        ] }) : null,
+                        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-start overflow-hidden leading-tight", children: [
+                          /* @__PURE__ */ jsx("span", { className: "w-full flex-1 truncate text-sm", children: tab.title }),
+                          tab.subtitle ? /* @__PURE__ */ jsx("span", { className: "w-full truncate text-[10px] text-muted-foreground", children: tab.subtitle }) : null
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          X,
+                          {
+                            className: "size-4 shrink-0 rounded-sm p-0.5 hover:bg-red-50 hover:text-red-500",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              onClose(tab.id);
+                            }
+                          }
+                        )
+                      ]
+                    },
+                    tab.id
+                  ))
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
 function Breadcrumbs({ separator, labels, ...rest }) {
   const { pathname } = useActiveRoute();
   const segments = pathname.split("/").filter(Boolean);
@@ -81,13 +434,13 @@ function Breadcrumbs({ separator, labels, ...rest }) {
   return /* @__PURE__ */ jsx(Breadcrumb, { ...rest, children: /* @__PURE__ */ jsx(BreadcrumbList, { children: segments.map((seg, i) => {
     const href = "/" + segments.slice(0, i + 1).join("/");
     const label = labels?.[seg] ?? seg;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       i > 0 ? /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator }) : null,
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: i === last ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href, children: label }) }) })
     ] }, href);
   }) }) });
 }
 
-export { AppShell, AppShellBody, AppShellHeader, AppShellMain, Breadcrumbs, NavGroup, NavItem, useActiveRoute };
+export { AppShell, AppShellBody, AppShellHeader, AppShellMain, Breadcrumbs, NavGroup, NavItem, NavSection, NavUser, SidebarDock, SidebarPanel, StackedSidebar, TabBar, defaultNavUserThemeLabels, defaultTabBarLabels, useActiveRoute };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map