@petrarca/sonnet-shell 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/AppShell.tsx
 import {
-  useState,
+  useState as useState2,
   useEffect as useEffect3,
   useCallback as useCallback2,
   useRef as useRef2,
@@ -68,58 +68,40 @@ function TopBar({ children }) {
   return /* @__PURE__ */ jsx2("header", { className: "h-12 shrink-0 border-b border-border flex items-center justify-between px-3 bg-background z-20", children });
 }
 
-// src/IconRail.tsx
-import { cn } from "@petrarca/sonnet-core";
-import { Button as Button2 } from "@petrarca/sonnet-ui";
-import { Separator } from "@petrarca/sonnet-ui";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@petrarca/sonnet-ui";
-
-// src/shellModules.ts
-import { createContext, useContext } from "react";
-var ShellModulesContext = createContext(null);
-function useShellModules() {
-  const registry = useContext(ShellModulesContext);
-  if (!registry) {
-    throw new Error("useShellModules must be used within an AppShell");
-  }
-  return registry;
+// src/ShellFooter.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ShellFooter({ children }) {
+  return /* @__PURE__ */ jsx3("footer", { className: "h-8 shrink-0 border-t border-border flex items-center justify-between px-3 bg-background text-[11px] text-muted-foreground z-20", children });
 }
 
 // src/IconRail.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { cn } from "@petrarca/sonnet-core";
+import { Button as Button2, Separator } from "@petrarca/sonnet-ui";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@petrarca/sonnet-ui";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function IconRail({
-  activeServiceId,
-  activeSidePaneModuleId,
-  onServiceSelect
+  children,
+  className
 }) {
-  const { mainModules, bottomModules } = useShellModules();
-  const isActive = (id) => activeServiceId === id || activeSidePaneModuleId === id;
-  return /* @__PURE__ */ jsxs2("nav", { className: "w-14 shrink-0 border-r bg-muted flex flex-col items-center py-2 gap-1", children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex-1 flex flex-col items-center gap-1 overflow-y-auto", children: mainModules.map((service) => /* @__PURE__ */ jsx3(
-      RailIcon,
-      {
-        service,
-        isActive: isActive(service.id),
-        onClick: () => onServiceSelect(service.id)
-      },
-      service.id
-    )) }),
-    /* @__PURE__ */ jsx3(Separator, { className: "w-6 my-1" }),
-    /* @__PURE__ */ jsx3("div", { className: "flex flex-col items-center gap-1", children: bottomModules.map((service) => /* @__PURE__ */ jsx3(
-      RailIcon,
-      {
-        service,
-        isActive: isActive(service.id),
-        onClick: () => onServiceSelect(service.id)
-      },
-      service.id
-    )) })
-  ] });
+  return /* @__PURE__ */ jsx4(
+    "nav",
+    {
+      className: cn(
+        "w-14 shrink-0 border-r bg-muted flex flex-col items-center py-2 gap-1",
+        className
+      ),
+      children
+    }
+  );
 }
-function RailIcon({ service, isActive, onClick }) {
-  const Icon = service.icon;
+function RailIcon({
+  icon: Icon,
+  label,
+  active = false,
+  onClick
+}) {
   return /* @__PURE__ */ jsxs2(Tooltip, { delayDuration: 0, children: [
-    /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
       Button2,
       {
         variant: "ghost",
@@ -127,23 +109,24 @@ function RailIcon({ service, isActive, onClick }) {
         onClick,
         className: cn(
           "h-10 w-10 rounded-lg transition-colors",
-          isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground"
+          active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
         ),
         children: [
-          /* @__PURE__ */ jsx3(Icon, { className: "h-5 w-5" }),
-          /* @__PURE__ */ jsx3("span", { className: "sr-only", children: service.label })
+          /* @__PURE__ */ jsx4(Icon, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx4("span", { className: "sr-only", children: label })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx3(TooltipContent, { side: "right", sideOffset: 8, children: service.label })
+    /* @__PURE__ */ jsx4(TooltipContent, { side: "right", sideOffset: 8, children: label })
   ] });
 }
+function RailSeparator() {
+  return /* @__PURE__ */ jsx4(Separator, { className: "w-6 my-1" });
+}
 
 // src/SubNavPanel.tsx
 import { useMemo as useMemo2 } from "react";
-import { useLocation, Link } from "react-router-dom";
 import { ChevronsLeft, ChevronsRight } from "lucide-react";
-import { cn as cn2 } from "@petrarca/sonnet-core";
 import { ScrollArea } from "@petrarca/sonnet-ui";
 import { Tooltip as Tooltip2, TooltipContent as TooltipContent2, TooltipTrigger as TooltipTrigger2 } from "@petrarca/sonnet-ui";
 
@@ -413,6 +396,17 @@ var events = {
   }
 };
 
+// src/shellModules.ts
+import { createContext, useContext } from "react";
+var ShellModulesContext = createContext(null);
+function useShellModules() {
+  const registry = useContext(ShellModulesContext);
+  if (!registry) {
+    throw new Error("useShellModules must be used within an AppShell");
+  }
+  return registry;
+}
+
 // src/hooks.ts
 function useExtensionPoint(name) {
   const { getExtensionPoint } = useShellModules();
@@ -430,8 +424,145 @@ function useShellEvent(key, handler) {
   }, [key]);
 }
 
+// src/SidebarGroup.tsx
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn as cn2 } from "@petrarca/sonnet-core";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function GroupHeading({
+  heading,
+  canCollapse,
+  open,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      onClick: canCollapse ? onToggle : void 0,
+      className: cn2(
+        "flex w-full items-center gap-1 px-2 py-1.5",
+        "text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/70",
+        canCollapse ? "hover:text-foreground cursor-pointer" : "cursor-default"
+      ),
+      children: [
+        canCollapse && /* @__PURE__ */ jsx5(
+          ChevronDown,
+          {
+            className: cn2("h-3 w-3 transition-transform", !open && "-rotate-90")
+          }
+        ),
+        /* @__PURE__ */ jsx5("span", { children: heading })
+      ]
+    }
+  );
+}
+function SidebarGroup({
+  heading,
+  collapsible = false,
+  defaultOpen = true,
+  separator = false,
+  children
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const canCollapse = collapsible && !!heading;
+  return /* @__PURE__ */ jsxs3("div", { className: cn2(separator && "border-b border-border pb-2"), children: [
+    heading && /* @__PURE__ */ jsx5(
+      GroupHeading,
+      {
+        heading,
+        canCollapse,
+        open,
+        onToggle: () => setOpen((v) => !v)
+      }
+    ),
+    (!canCollapse || open) && /* @__PURE__ */ jsx5("ul", { className: "space-y-0.5", children })
+  ] });
+}
+
+// src/SidebarItem.tsx
+import { Link, useLocation } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+import { cn as cn3 } from "@petrarca/sonnet-core";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ItemTrailing({
+  badge,
+  expandable,
+  expanded,
+  onToggle
+}) {
+  if (badge != null) {
+    return /* @__PURE__ */ jsx6("span", { className: "inline-flex items-center rounded-full bg-muted px-1.5 h-[18px] text-[10px] tabular-nums text-muted-foreground", children: badge });
+  }
+  if (expandable) {
+    const handleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onToggle?.();
+    };
+    return /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        className: "p-0.5 text-muted-foreground hover:text-foreground",
+        children: /* @__PURE__ */ jsx6(
+          ChevronRight,
+          {
+            className: cn3(
+              "h-3 w-3 transition-transform",
+              expanded && "rotate-90"
+            )
+          }
+        )
+      }
+    );
+  }
+  return null;
+}
+function SidebarItem({
+  icon: Icon,
+  label,
+  path,
+  badge,
+  indent = 0,
+  expandable = false,
+  expanded = false,
+  onToggle,
+  onClick
+}) {
+  const { pathname } = useLocation();
+  const isActive = pathname === path;
+  const style = indent > 0 ? { paddingLeft: `${indent * 16 + 8}px` } : void 0;
+  return /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs4(
+    Link,
+    {
+      to: path,
+      onClick,
+      style,
+      className: cn3(
+        "flex items-center gap-2 rounded px-2 py-1.5 text-[13px] font-medium transition-colors select-none",
+        isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx6(Icon, { className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        /* @__PURE__ */ jsx6(
+          ItemTrailing,
+          {
+            badge,
+            expandable,
+            expanded,
+            onToggle
+          }
+        )
+      ]
+    }
+  ) });
+}
+
 // src/SubNavPanel.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function useMergedNavigation(service) {
   const contributions = useExtensionPoint(`${service.id}.nav`);
   return useMemo2(() => {
@@ -452,66 +583,125 @@ function SubNavPanel({
   collapsed,
   onToggleCollapse
 }) {
-  const { pathname } = useLocation();
   const mergedNavigation = useMergedNavigation(service);
   if (collapsed) {
-    return /* @__PURE__ */ jsx4("aside", { className: "shrink-0 border-r bg-background flex flex-col items-center pt-2.5", children: /* @__PURE__ */ jsxs3(Tooltip2, { children: [
-      /* @__PURE__ */ jsx4(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx7("aside", { className: "shrink-0 border-r bg-background flex flex-col items-center pt-2.5", children: /* @__PURE__ */ jsxs5(Tooltip2, { children: [
+      /* @__PURE__ */ jsx7(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx7(
         "button",
         {
+          type: "button",
           className: "text-muted-foreground/50 hover:text-muted-foreground transition-colors p-1",
           onClick: onToggleCollapse,
-          children: /* @__PURE__ */ jsx4(ChevronsRight, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx7(ChevronsRight, { className: "h-4 w-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx4(TooltipContent2, { side: "right", children: "Expand navigation" })
+      /* @__PURE__ */ jsx7(TooltipContent2, { side: "right", children: "Expand navigation" })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs3("aside", { className: "w-52 shrink-0 border-r bg-background flex flex-col", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "h-10 shrink-0 flex items-center justify-between px-4", children: [
-      /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: service.label }),
-      /* @__PURE__ */ jsxs3(Tooltip2, { children: [
-        /* @__PURE__ */ jsx4(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("aside", { className: "w-52 shrink-0 border-r bg-background flex flex-col", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "h-10 shrink-0 flex items-center justify-between px-4", children: [
+      /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold text-foreground", children: service.label }),
+      /* @__PURE__ */ jsxs5(Tooltip2, { children: [
+        /* @__PURE__ */ jsx7(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx7(
           "button",
           {
+            type: "button",
             className: "text-muted-foreground/40 hover:text-muted-foreground transition-colors p-0.5",
             onClick: onToggleCollapse,
-            children: /* @__PURE__ */ jsx4(ChevronsLeft, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx7(ChevronsLeft, { className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx4(TooltipContent2, { side: "right", children: "Collapse navigation" })
+        /* @__PURE__ */ jsx7(TooltipContent2, { side: "right", children: "Collapse navigation" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx4(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx4("nav", { className: "px-2 pb-4", children: mergedNavigation.map((group, gi) => /* @__PURE__ */ jsxs3("div", { className: cn2(gi > 0 && "mt-4"), children: [
-      group.heading && /* @__PURE__ */ jsx4("h6", { className: "text-xs font-medium font-mono uppercase tracking-wider text-muted-foreground px-2 mb-1", children: group.heading }),
-      /* @__PURE__ */ jsx4("ul", { className: "space-y-0.5", children: group.links.map((link) => {
-        const isActive = pathname === link.path;
-        return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
-          Link,
+    /* @__PURE__ */ jsx7(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx7("nav", { className: "px-1.5 pb-4 space-y-2", children: mergedNavigation.map((group) => /* @__PURE__ */ jsx7(
+      SidebarGroup,
+      {
+        heading: group.heading,
+        collapsible: group.collapsible,
+        children: group.links.map((link) => /* @__PURE__ */ jsx7(
+          SidebarItem,
           {
-            to: link.path,
-            className: cn2(
-              "flex items-center rounded-md px-2 py-1.5 text-sm transition-colors",
-              isActive ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
-            ),
-            children: link.label
-          }
-        ) }, link.path);
-      }) })
-    ] }, group.id)) }) })
+            label: link.label,
+            path: link.path,
+            badge: link.badge
+          },
+          link.path
+        ))
+      },
+      group.id
+    )) }) })
+  ] });
+}
+
+// src/shellNavigation.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ShellNavigationContext = createContext2(null);
+function useShellNavigation() {
+  const ctx = useContext2(ShellNavigationContext);
+  if (!ctx) {
+    throw new Error("useShellNavigation must be used within AppShell");
+  }
+  return ctx;
+}
+
+// src/ShellRail.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ShellRail() {
+  const { mainModules, bottomModules } = useShellModules();
+  const {
+    activeService,
+    sidePaneModuleId,
+    subNavCollapsed,
+    onToggleSubNav,
+    onServiceSelect
+  } = useShellNavigation();
+  const isActive = (id) => activeService?.id === id || sidePaneModuleId === id;
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6(IconRail, { children: [
+      /* @__PURE__ */ jsx8("div", { className: "flex-1 flex flex-col items-center gap-1 overflow-y-auto", children: mainModules.map((service) => /* @__PURE__ */ jsx8(
+        RailIcon,
+        {
+          icon: service.icon,
+          label: service.label,
+          active: isActive(service.id),
+          onClick: () => onServiceSelect(service.id)
+        },
+        service.id
+      )) }),
+      /* @__PURE__ */ jsx8(RailSeparator, {}),
+      /* @__PURE__ */ jsx8("div", { className: "flex flex-col items-center gap-1", children: bottomModules.map((service) => /* @__PURE__ */ jsx8(
+        RailIcon,
+        {
+          icon: service.icon,
+          label: service.label,
+          active: isActive(service.id),
+          onClick: () => onServiceSelect(service.id)
+        },
+        service.id
+      )) })
+    ] }),
+    activeService && activeService.navigation.length > 0 && /* @__PURE__ */ jsx8(
+      SubNavPanel,
+      {
+        service: activeService,
+        collapsed: subNavCollapsed,
+        onToggleCollapse: onToggleSubNav
+      }
+    )
   ] });
 }
 
 // src/SidePane.tsx
 import { X } from "lucide-react";
-import { cn as cn3 } from "@petrarca/sonnet-core";
+import { cn as cn4 } from "@petrarca/sonnet-core";
 import { useResizablePanel } from "@petrarca/sonnet-core/hooks";
 
 // src/sidePaneState.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var SidePaneContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var SidePaneContext = createContext3(null);
 function useSidePaneState() {
-  const ctx = useContext2(SidePaneContext);
+  const ctx = useContext3(SidePaneContext);
   if (!ctx) {
     throw new Error("useSidePaneState must be used within an AppShell");
   }
@@ -519,19 +709,19 @@ function useSidePaneState() {
 }
 
 // src/SidePane.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function DragHandle({
   separatorProps,
   onPointerDown,
   onDoubleClick
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ...separatorProps,
       onPointerDown,
       onDoubleClick,
-      className: cn3(
+      className: cn4(
         "absolute right-0 top-0 h-full w-1 cursor-col-resize",
         "hover:bg-primary/40 active:bg-primary/60 transition-colors"
       )
@@ -544,7 +734,7 @@ var DEFAULT_MAX = 800;
 function SidePane() {
   const { pane, close } = useSidePaneState();
   if (!pane) return null;
-  return /* @__PURE__ */ jsx5(SidePaneOpen, { pane, onClose: close });
+  return /* @__PURE__ */ jsx9(SidePaneOpen, { pane, onClose: close });
 }
 function SidePaneOpen({
   pane,
@@ -557,30 +747,30 @@ function SidePaneOpen({
     direction: "right-edge"
   });
   const isFullWidth = pane.fullWidth === true;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: cn3(
+      className: cn4(
         "relative flex flex-col border-r bg-background",
         isFullWidth ? "flex-1" : "shrink-0"
       ),
       style: isFullWidth ? void 0 : { width: panelWidth },
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "flex h-10 shrink-0 items-center justify-end border-b px-2", children: /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx9("div", { className: "flex h-10 shrink-0 items-center justify-end border-b px-2", children: /* @__PURE__ */ jsx9(
           "button",
           {
             onClick: onClose,
-            className: cn3(
+            className: cn4(
               "flex h-6 w-6 items-center justify-center rounded text-muted-foreground",
               "hover:bg-accent hover:text-foreground transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             ),
             "aria-label": "Close side pane",
-            children: /* @__PURE__ */ jsx5(X, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx9(X, { className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx5("div", { className: "flex-1 overflow-auto", children: pane.content }),
-        !isFullWidth && /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx9("div", { className: "flex-1 overflow-auto", children: pane.content }),
+        !isFullWidth && /* @__PURE__ */ jsx9(
           DragHandle,
           {
             separatorProps,
@@ -605,7 +795,7 @@ import {
   CommandList,
   CommandSeparator
 } from "@petrarca/sonnet-ui";
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function CommandMenu({ open, onOpenChange }) {
   const navigate = useNavigate();
   const { mainModules, bottomModules } = useShellModules();
@@ -629,16 +819,16 @@ function CommandMenu({ open, onOpenChange }) {
   const renderNavGroup = (service) => {
     if (service.navigation.length === 0) return null;
     const Icon = service.icon;
-    return /* @__PURE__ */ jsx6(CommandGroup, { heading: service.label, children: service.navigation.flatMap(
-      (group) => group.links.map((link) => /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsx10(CommandGroup, { heading: service.label, children: service.navigation.flatMap(
+      (group) => group.links.map((link) => /* @__PURE__ */ jsxs8(
         CommandItem,
         {
           value: `${service.label} ${group.heading ?? ""} ${link.label}`,
           onSelect: () => handleSelect(link.path),
           children: [
-            /* @__PURE__ */ jsx6(Icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ jsx6("span", { children: link.label }),
-            group.heading && /* @__PURE__ */ jsx6("span", { className: "ml-auto text-xs text-muted-foreground", children: group.heading })
+            /* @__PURE__ */ jsx10(Icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx10("span", { children: link.label }),
+            group.heading && /* @__PURE__ */ jsx10("span", { className: "ml-auto text-xs text-muted-foreground", children: group.heading })
           ]
         },
         link.path
@@ -648,13 +838,13 @@ function CommandMenu({ open, onOpenChange }) {
   const renderCommandGroup = (service) => {
     if (!service.commands?.length) return null;
     const Icon = service.icon;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx10(
       CommandGroup,
       {
         heading: service.commands[0].group ?? service.label,
         children: service.commands.map((cmd) => {
           const CmdIcon = cmd.icon ?? Icon;
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs8(
             CommandItem,
             {
               value: `${service.label} ${cmd.label}`,
@@ -663,8 +853,8 @@ function CommandMenu({ open, onOpenChange }) {
                 onOpenChange(false);
               },
               children: [
-                /* @__PURE__ */ jsx6(CmdIcon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsx6("span", { children: cmd.label })
+                /* @__PURE__ */ jsx10(CmdIcon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx10("span", { children: cmd.label })
               ]
             },
             cmd.id
@@ -675,15 +865,15 @@ function CommandMenu({ open, onOpenChange }) {
     );
   };
   const allModules = [...mainModules, ...bottomModules];
-  return /* @__PURE__ */ jsxs5(CommandDialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx6(CommandInput, { placeholder: "Search pages, services, actions..." }),
-    /* @__PURE__ */ jsxs5(CommandList, { children: [
-      /* @__PURE__ */ jsx6(CommandEmpty, { children: "No results found." }),
+  return /* @__PURE__ */ jsxs8(CommandDialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx10(CommandInput, { placeholder: "Search pages, services, actions..." }),
+    /* @__PURE__ */ jsxs8(CommandList, { children: [
+      /* @__PURE__ */ jsx10(CommandEmpty, { children: "No results found." }),
       mainModules.map(renderNavGroup),
-      /* @__PURE__ */ jsx6(CommandSeparator, {}),
+      /* @__PURE__ */ jsx10(CommandSeparator, {}),
       bottomModules.map(renderNavGroup),
-      allModules.some((m) => m.commands?.length) && /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx6(CommandSeparator, {}),
+      allModules.some((m) => m.commands?.length) && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        /* @__PURE__ */ jsx10(CommandSeparator, {}),
         allModules.map(renderCommandGroup)
       ] })
     ] })
@@ -691,10 +881,10 @@ function CommandMenu({ open, onOpenChange }) {
 }
 
 // src/shellConfig.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var ShellConfigContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var ShellConfigContext = createContext4(null);
 function useShellConfig() {
-  const config = useContext3(ShellConfigContext);
+  const config = useContext4(ShellConfigContext);
   if (!config) {
     throw new Error("useShellConfig must be used within a ShellConfigProvider");
   }
@@ -702,7 +892,7 @@ function useShellConfig() {
 }
 
 // src/AppShell.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var PANEL_WIDTH_CLASS = {
   narrow: "w-[480px]",
   default: "w-[640px]",
@@ -776,7 +966,7 @@ function useActiveService(modules) {
     },
     [serviceByBasePath]
   );
-  const [selectedServiceId, setSelectedServiceId] = useState(
+  const [selectedServiceId, setSelectedServiceId] = useState2(
     () => resolveServiceFromPath(location.pathname)
   );
   useEffect3(
@@ -787,7 +977,7 @@ function useActiveService(modules) {
   return { activeService, selectedServiceId, setSelectedServiceId };
 }
 function useSidePaneState2() {
-  const [sidePaneState, setSidePaneState] = useState(
+  const [sidePaneState, setSidePaneState] = useState2(
     null
   );
   const handleOpen = useCallback2(
@@ -817,7 +1007,7 @@ function useSidePaneState2() {
   };
 }
 function usePanelState() {
-  const [panelState, setPanelState] = useState(null);
+  const [panelState, setPanelState] = useState2(null);
   const panelOnCloseRef = useRef2(void 0);
   const handleOpen = useCallback2(
     (opts) => setPanelState(opts),
@@ -839,7 +1029,7 @@ function usePanelState() {
   };
 }
 function useDialogState() {
-  const [dialogState, setDialogState] = useState(null);
+  const [dialogState, setDialogState] = useState2(null);
   const handleConfirm = useCallback2(() => {
     dialogState?.resolve(true);
     setDialogState(null);
@@ -863,15 +1053,15 @@ function useFeatureLookup(modules) {
     return (featureId) => map.get(featureId) ?? null;
   }, [modules]);
 }
-function AppShell({ registry }) {
+function AppShell({ registry, sidebar }) {
   const navigate = useNavigate2();
   const config = useShellConfig();
   const { modules } = registry;
   const { activeService, setSelectedServiceId } = useActiveService(modules);
-  const [subNavCollapsed, setSubNavCollapsed] = useState(false);
-  const [commandMenuOpen, setCommandMenuOpen] = useState(false);
+  const [subNavCollapsed, setSubNavCollapsed] = useState2(false);
+  const [commandMenuOpen, setCommandMenuOpen] = useState2(false);
   const openCommandMenu = useCallback2(() => setCommandMenuOpen(true), []);
-  const [fullscreenState, setFullscreenState] = useState(null);
+  const [fullscreenState, setFullscreenState] = useState2(null);
   const handleFullscreenEnter = useCallback2(
     (opts) => setFullscreenState(opts),
     []
@@ -946,27 +1136,32 @@ function AppShell({ registry }) {
     }),
     [sidePane2]
   );
-  return /* @__PURE__ */ jsx7(ShellModulesContext.Provider, { value: registry, children: /* @__PURE__ */ jsx7(SidePaneContext.Provider, { value: sidePaneContextValue, children: /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsxs6("div", { className: "flex h-screen w-screen flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx7(TopBar, { children: config.topBar }),
-    /* @__PURE__ */ jsx7(
+  const navigationValue = {
+    activeService,
+    sidePaneModuleId: sidePane2.sidePaneState?.moduleId ?? null,
+    subNavCollapsed,
+    onToggleSubNav: () => setSubNavCollapsed((c) => !c),
+    onServiceSelect: handleServiceSelect
+  };
+  return /* @__PURE__ */ jsx11(ShellModulesContext.Provider, { value: registry, children: /* @__PURE__ */ jsx11(SidePaneContext.Provider, { value: sidePaneContextValue, children: /* @__PURE__ */ jsx11(ShellNavigationContext.Provider, { value: navigationValue, children: /* @__PURE__ */ jsx11(TooltipProvider, { children: /* @__PURE__ */ jsxs9("div", { className: "flex h-screen w-screen flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx11(TopBar, { children: config.topBar }),
+    /* @__PURE__ */ jsx11(
       CommandMenu,
       {
         open: commandMenuOpen,
         onOpenChange: setCommandMenuOpen
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx11(
       ShellBody,
       {
         activeService,
         sidePaneFullWidth: sidePane2.sidePaneState?.fullWidth,
-        sidePaneModuleId: sidePane2.sidePaneState?.moduleId ?? null,
-        subNavCollapsed,
-        onToggleSubNav: () => setSubNavCollapsed((c) => !c),
-        onServiceSelect: handleServiceSelect
+        sidebar
       }
     ),
-    dialog2.dialogState && /* @__PURE__ */ jsx7(
+    config.footer && /* @__PURE__ */ jsx11(ShellFooter, { children: config.footer }),
+    dialog2.dialogState && /* @__PURE__ */ jsx11(
       ConfirmDialog,
       {
         open: true,
@@ -979,8 +1174,8 @@ function AppShell({ registry }) {
         onCancel: dialog2.handleCancel
       }
     ),
-    fullscreenState && /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-50 bg-background overflow-auto", children: fullscreenState.content }),
-    /* @__PURE__ */ jsx7(
+    fullscreenState && /* @__PURE__ */ jsx11("div", { className: "fixed inset-0 z-50 bg-background overflow-auto", children: fullscreenState.content }),
+    /* @__PURE__ */ jsx11(
       SlideOverPanel,
       {
         panelState: panel2.panelState,
@@ -990,7 +1185,7 @@ function AppShell({ registry }) {
         onClose: panel2.handleClose
       }
     )
-  ] }) }) }) });
+  ] }) }) }) }) });
 }
 function SlideOverPanel({
   panelState,
@@ -999,14 +1194,14 @@ function SlideOverPanel({
   panelOnCloseRef,
   onClose
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     Sheet,
     {
       open: panelState !== null,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx11(
         SheetContent,
         {
           side: "right",
@@ -1021,7 +1216,7 @@ function SlideOverPanel({
           ...!panelState?.description && {
             "aria-describedby": void 0
           },
-          children: panelState && /* @__PURE__ */ jsx7(PanelContent, { state: panelState })
+          children: panelState && /* @__PURE__ */ jsx11(PanelContent, { state: panelState })
         }
       )
     }
@@ -1030,45 +1225,27 @@ function SlideOverPanel({
 function ShellBody({
   activeService,
   sidePaneFullWidth,
-  sidePaneModuleId,
-  subNavCollapsed,
-  onToggleSubNav,
-  onServiceSelect
+  sidebar
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-1 overflow-hidden", children: [
-    /* @__PURE__ */ jsx7(
-      IconRail,
-      {
-        activeServiceId: activeService?.id ?? null,
-        activeSidePaneModuleId: sidePaneModuleId,
-        onServiceSelect
-      }
-    ),
-    activeService && activeService.navigation.length > 0 && /* @__PURE__ */ jsx7(
-      SubNavPanel,
-      {
-        service: activeService,
-        collapsed: subNavCollapsed,
-        onToggleCollapse: onToggleSubNav
-      }
-    ),
-    /* @__PURE__ */ jsx7(SidePane, {}),
-    sidePaneFullWidth !== true && /* @__PURE__ */ jsx7("div", { className: "flex-1 min-w-0 h-full overflow-hidden", children: /* @__PURE__ */ jsx7(ContentArea, { layout: activeService?.layout }) })
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-1 overflow-hidden", children: [
+    sidebar ?? /* @__PURE__ */ jsx11(ShellRail, {}),
+    /* @__PURE__ */ jsx11(SidePane, {}),
+    sidePaneFullWidth !== true && /* @__PURE__ */ jsx11("div", { className: "flex-1 min-w-0 h-full overflow-hidden", children: /* @__PURE__ */ jsx11(ContentArea, { layout: activeService?.layout }) })
   ] });
 }
 function ContentArea({ layout }) {
   if (layout === "full") {
-    return /* @__PURE__ */ jsx7("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx7(Outlet, {}) });
+    return /* @__PURE__ */ jsx11("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx11(Outlet, {}) });
   }
-  return /* @__PURE__ */ jsx7(ScrollArea2, { className: "h-full", children: /* @__PURE__ */ jsx7("main", { className: "p-6", children: /* @__PURE__ */ jsx7(Outlet, {}) }) });
+  return /* @__PURE__ */ jsx11(ScrollArea2, { className: "h-full", children: /* @__PURE__ */ jsx11("main", { className: "p-6", children: /* @__PURE__ */ jsx11(Outlet, {}) }) });
 }
 function PanelContent({ state }) {
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    state.title ? /* @__PURE__ */ jsxs6(SheetHeader, { children: [
-      /* @__PURE__ */ jsx7(SheetTitle, { children: state.title }),
-      state.description && /* @__PURE__ */ jsx7(SheetDescription, { children: state.description })
-    ] }) : /* @__PURE__ */ jsx7(SheetTitle, { className: "sr-only", children: "Panel" }),
-    /* @__PURE__ */ jsx7(SheetBody, { children: state.content })
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    state.title ? /* @__PURE__ */ jsxs9(SheetHeader, { children: [
+      /* @__PURE__ */ jsx11(SheetTitle, { children: state.title }),
+      state.description && /* @__PURE__ */ jsx11(SheetDescription, { children: state.description })
+    ] }) : /* @__PURE__ */ jsx11(SheetTitle, { className: "sr-only", children: "Panel" }),
+    /* @__PURE__ */ jsx11(SheetBody, { children: state.content })
   ] });
 }
 
@@ -1076,32 +1253,36 @@ function PanelContent({ state }) {
 import { Toaster } from "sonner";
 
 // src/ShellConfigProvider.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function ShellConfigProvider({
   config,
   children
 }) {
-  return /* @__PURE__ */ jsx8(ShellConfigContext.Provider, { value: config, children });
+  return /* @__PURE__ */ jsx12(ShellConfigContext.Provider, { value: config, children });
 }
 
 // src/RootLayout.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function RootLayout({ config, registry }) {
-  return /* @__PURE__ */ jsxs7(ShellConfigProvider, { config, children: [
-    /* @__PURE__ */ jsx9(Toaster, { position: "top-right", richColors: true, closeButton: true }),
-    /* @__PURE__ */ jsx9(AppShell, { registry })
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function RootLayout({
+  config,
+  registry,
+  sidebar
+}) {
+  return /* @__PURE__ */ jsxs10(ShellConfigProvider, { config, children: [
+    /* @__PURE__ */ jsx13(Toaster, { position: "top-right", richColors: true, closeButton: true }),
+    /* @__PURE__ */ jsx13(AppShell, { registry, sidebar })
   ] });
 }
 
 // src/PlaceholderPage.tsx
 import { useLocation as useLocation3 } from "react-router-dom";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function PlaceholderPage() {
   const { pathname } = useLocation3();
-  return /* @__PURE__ */ jsxs8("div", { children: [
-    /* @__PURE__ */ jsx10("h1", { className: "mb-1", children: pathToTitle(pathname) }),
-    /* @__PURE__ */ jsx10("p", { className: "text-sm text-muted-foreground mb-6", children: pathname }),
-    /* @__PURE__ */ jsx10("div", { className: "rounded-lg border-2 border-dashed border-border p-12 flex items-center justify-center", children: /* @__PURE__ */ jsx10("span", { className: "text-sm text-muted-foreground", children: "Content area \u2014 not yet implemented" }) })
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsx14("h1", { className: "mb-1", children: pathToTitle(pathname) }),
+    /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground mb-6", children: pathname }),
+    /* @__PURE__ */ jsx14("div", { className: "rounded-lg border-2 border-dashed border-border p-12 flex items-center justify-center", children: /* @__PURE__ */ jsx14("span", { className: "text-sm text-muted-foreground", children: "Content area \u2014 not yet implemented" }) })
   ] });
 }
 function pathToTitle(path) {
@@ -1110,12 +1291,131 @@ function pathToTitle(path) {
   return last.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
 
+// src/Sidebar.tsx
+import { cn as cn5 } from "@petrarca/sonnet-core";
+import { ScrollArea as ScrollArea3 } from "@petrarca/sonnet-ui";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function Sidebar({
+  children,
+  header,
+  width = 260,
+  className
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "aside",
+    {
+      style: { width },
+      className: cn5(
+        "shrink-0 border-r bg-muted/30 flex flex-col h-full",
+        className
+      ),
+      children: [
+        header,
+        /* @__PURE__ */ jsx15(ScrollArea3, { className: "flex-1", children: /* @__PURE__ */ jsx15("nav", { className: "px-1.5 py-2 space-y-3", children }) })
+      ]
+    }
+  );
+}
+
+// src/ShellSidebar.tsx
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function ShellSidebar({
+  bottomGroupLabel = "Tools",
+  ...sidebarProps
+}) {
+  const { mainModules, bottomModules } = useShellModules();
+  const topNavItems = mainModules.flatMap(
+    (mod) => (mod.topNav ?? []).map((link) => ({ link, icon: mod.icon }))
+  );
+  return /* @__PURE__ */ jsxs13(Sidebar, { ...sidebarProps, children: [
+    topNavItems.length > 0 && /* @__PURE__ */ jsx16(SidebarGroup, { separator: true, children: topNavItems.map(({ link, icon }) => /* @__PURE__ */ jsx16(
+      SidebarItem,
+      {
+        icon,
+        label: link.label,
+        path: link.path,
+        badge: link.badge
+      },
+      link.path
+    )) }),
+    mainModules.map((mod) => {
+      if (mod.navigation.length === 0) {
+        return /* @__PURE__ */ jsx16(
+          SidebarItem,
+          {
+            icon: mod.icon,
+            label: mod.label,
+            path: mod.basePath
+          },
+          mod.id
+        );
+      }
+      return /* @__PURE__ */ jsx16(SidebarGroup, { heading: mod.label, collapsible: true, children: mod.navigation.flatMap((group) => [
+        // Render NavGroup heading if it has one
+        ...group.heading ? [
+          /* @__PURE__ */ jsx16(
+            SidebarGroup,
+            {
+              heading: group.heading,
+              collapsible: group.collapsible,
+              children: group.links.map((link) => /* @__PURE__ */ jsx16(
+                SidebarItem,
+                {
+                  icon: mod.icon,
+                  label: link.label,
+                  path: link.path,
+                  badge: link.badge
+                },
+                link.path
+              ))
+            },
+            group.id
+          )
+        ] : group.links.map((link) => /* @__PURE__ */ jsx16(
+          SidebarItem,
+          {
+            icon: mod.icon,
+            label: link.label,
+            path: link.path,
+            badge: link.badge
+          },
+          link.path
+        ))
+      ]) }, mod.id);
+    }),
+    bottomModules.length > 0 && /* @__PURE__ */ jsx16(SidebarGroup, { heading: bottomGroupLabel, collapsible: true, children: bottomModules.map((mod) => /* @__PURE__ */ jsx16(
+      SidebarItem,
+      {
+        icon: mod.icon,
+        label: mod.label,
+        path: mod.basePath
+      },
+      mod.id
+    )) })
+  ] });
+}
+
+// src/ShellVersion.tsx
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+function ShellVersion({
+  name,
+  version
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx17("span", { children: name }),
+    version && /* @__PURE__ */ jsxs14("span", { className: "text-muted-foreground/50", children: [
+      "v",
+      version
+    ] })
+  ] });
+}
+
 // src/SearchTrigger.tsx
 import { Search } from "lucide-react";
 import { Button as Button3 } from "@petrarca/sonnet-ui";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function SearchTrigger() {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs15(
     Button3,
     {
       variant: "outline",
@@ -1123,10 +1423,10 @@ function SearchTrigger() {
       className: "h-8 gap-2 text-sm text-muted-foreground w-56 justify-start",
       onClick: () => navigation.openCommandMenu(),
       children: [
-        /* @__PURE__ */ jsx11(Search, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx11("span", { children: "Search..." }),
-        /* @__PURE__ */ jsxs9("kbd", { className: "ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground", children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-xs", children: "\u2318" }),
+        /* @__PURE__ */ jsx18(Search, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx18("span", { children: "Search..." }),
+        /* @__PURE__ */ jsxs15("kbd", { className: "ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsx18("span", { className: "text-xs", children: "\u2318" }),
           "K"
         ] })
       ]
@@ -1146,23 +1446,23 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function UserMenu({ user, onSignOut }) {
-  return /* @__PURE__ */ jsxs10(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(Button4, { variant: "ghost", size: "compact", className: "rounded-full", children: /* @__PURE__ */ jsx12(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx12(AvatarFallback, { className: "text-xs", children: user.initials }) }) }) }),
-    /* @__PURE__ */ jsxs10(DropdownMenuContent, { align: "end", className: "w-48", children: [
-      /* @__PURE__ */ jsx12(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium", children: user.name }),
-        /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground", children: user.email })
+  return /* @__PURE__ */ jsxs16(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx19(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button4, { variant: "ghost", size: "compact", className: "rounded-full", children: /* @__PURE__ */ jsx19(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx19(AvatarFallback, { className: "text-xs", children: user.initials }) }) }) }),
+    /* @__PURE__ */ jsxs16(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsx19(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: user.name }),
+        /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: user.email })
       ] }) }),
-      /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxs10(DropdownMenuItem, { children: [
-        /* @__PURE__ */ jsx12(User, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ jsx19(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs16(DropdownMenuItem, { children: [
+        /* @__PURE__ */ jsx19(User, { className: "mr-2 h-4 w-4" }),
         "Profile"
       ] }),
-      /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxs10(DropdownMenuItem, { onSelect: onSignOut, children: [
-        /* @__PURE__ */ jsx12(LogOut, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ jsx19(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs16(DropdownMenuItem, { onSelect: onSignOut, children: [
+        /* @__PURE__ */ jsx19(LogOut, { className: "mr-2 h-4 w-4" }),
         "Sign out"
       ] })
     ] })
@@ -1193,13 +1493,13 @@ function createModuleRegistry(modules) {
 }
 
 // src/OverviewCard.tsx
-import { cn as cn4 } from "@petrarca/sonnet-core";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { cn as cn6 } from "@petrarca/sonnet-core";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function FeatureLink({
   feature,
   children
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx20(
     "span",
     {
       role: "link",
@@ -1227,22 +1527,22 @@ function OverviewCard({
   feature,
   className
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs17(
     "button",
     {
       onClick: feature ? () => navigation.goToFeature(feature) : void 0,
       disabled: !feature,
-      className: cn4(
+      className: cn6(
         "rounded-lg border bg-card p-5 text-left flex flex-col gap-3",
         "disabled:cursor-default",
         feature && "hover:bg-accent/50 transition-colors",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx13("div", { className: "h-9 w-9 rounded-md bg-blue-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx13(Icon, { className: "h-5 w-5 text-blue-600" }) }),
-        /* @__PURE__ */ jsxs11("div", { children: [
-          /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium mb-1", children: title }),
-          /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground leading-relaxed", children: description })
+        /* @__PURE__ */ jsx20("div", { className: "h-9 w-9 rounded-md bg-blue-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx20(Icon, { className: "h-5 w-5 text-blue-600" }) }),
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx20("p", { className: "text-sm font-medium mb-1", children: title }),
+          /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground leading-relaxed", children: description })
         ] })
       ]
     }
@@ -1256,11 +1556,20 @@ export {
   IconRail,
   OverviewCard,
   PlaceholderPage,
+  RailIcon,
+  RailSeparator,
   RootLayout,
   SearchTrigger,
   ShellConfigProvider,
+  ShellFooter,
+  ShellRail,
+  ShellSidebar,
+  ShellVersion,
   SidePane,
   SidePaneContext,
+  Sidebar,
+  SidebarGroup,
+  SidebarItem,
   SubNavPanel,
   TopBar,
   UserMenu,
@@ -1269,6 +1578,8 @@ export {
   events,
   fullscreen,
   initDialog,
+  initFeatureNav,
+  initFullscreen,
   initNavigation,
   initPanel,
   initSidePane,
@@ -1281,6 +1592,7 @@ export {
   useShellConfig,
   useShellEvent,
   useShellModules,
+  useShellNavigation,
   useSidePaneState
 };
 //# sourceMappingURL=index.js.map