@petrarca/sonnet-shell 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,11 +1,12 @@
 // src/AppShell.tsx
 import {
-  useState,
+  useState as useState2,
   useEffect as useEffect3,
   useCallback as useCallback2,
   useRef as useRef2,
-  useMemo as useMemo3
+  useMemo as useMemo5
 } from "react";
+import { useResizablePanel as useResizablePanel2 } from "@petrarca/sonnet-core/hooks";
 import { Outlet, useLocation as useLocation2, useNavigate as useNavigate2 } from "react-router-dom";
 import { TooltipProvider } from "@petrarca/sonnet-ui";
 import { ScrollArea as ScrollArea2 } from "@petrarca/sonnet-ui";
@@ -68,82 +69,71 @@ 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/ShellRail.tsx
+import { useMemo as useMemo3 } from "react";
+
 // 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,
+  disabled = false,
+  tooltip
+}) {
   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",
         size: "compact",
-        onClick,
+        "aria-disabled": disabled || void 0,
+        onClick: disabled ? void 0 : onClick,
         className: cn(
           "h-10 w-10 rounded-lg transition-colors",
-          isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground"
+          disabled ? "text-muted-foreground/40 cursor-default hover:bg-transparent" : 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: tooltip ?? 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 +403,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 +431,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,99 +590,249 @@ 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/shellConfig.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var ShellConfigContext = createContext3(null);
+function useShellConfig() {
+  const config = useContext3(ShellConfigContext);
+  if (!config) {
+    throw new Error("useShellConfig must be used within a ShellConfigProvider");
+  }
+  return config;
+}
+
+// src/capabilities.ts
+import { warnLog as warnLog3 } from "@petrarca/sonnet-core";
+var DEFAULT_CAPABILITY_POLICY = {
+  "missing-state": { rail: "disabled", command: "disabled", route: "redirect" },
+  "not-authorized": { rail: "hidden", command: "hidden", route: "redirect" },
+  "not-authorized-soft": {
+    rail: "disabled",
+    command: "disabled",
+    route: "redirect"
+  },
+  "feature-off": { rail: "hidden", command: "disabled", route: "redirect" },
+  error: { rail: "hidden", command: "hidden", route: "redirect" }
+};
+var EFFECT_RANK = {
+  hidden: 3,
+  redirect: 2,
+  disabled: 1,
+  visible: 0
+};
+function resolveCapabilityPolicy(override) {
+  if (!override) return DEFAULT_CAPABILITY_POLICY;
+  const merged = {};
+  for (const kind of Object.keys(DEFAULT_CAPABILITY_POLICY)) {
+    merged[kind] = {
+      ...DEFAULT_CAPABILITY_POLICY[kind],
+      ...override[kind] ?? {}
+    };
+  }
+  return merged;
+}
+function foldUnmet(effect, resultReason, acc) {
+  const rank = EFFECT_RANK[effect];
+  const worstRank = EFFECT_RANK[acc.effect];
+  if (rank > worstRank) {
+    return { effect, reason: resultReason };
+  }
+  if (rank === worstRank && !acc.reason && resultReason) {
+    return { effect: acc.effect, reason: resultReason };
+  }
+  return acc;
+}
+function evaluateModule(module, surface, resolve, policy) {
+  const capabilities = module.requires;
+  if (!capabilities || capabilities.length === 0) return { effect: "visible" };
+  if (!resolve) return { effect: "visible" };
+  let acc = { effect: "visible" };
+  for (const capability of capabilities) {
+    const result = resolve(capability);
+    if (result.met) continue;
+    const kind = result.kind ?? "error";
+    if (kind === "error") {
+      warnLog3(
+        `[capabilities] unmet capability "${capability}" resolved to kind "error" (fail-closed)`
+      );
+    }
+    acc = foldUnmet(policy[kind][surface], result.reason, acc);
+  }
+  return acc;
+}
+
+// src/ShellRail.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ShellRail() {
+  const { mainModules, bottomModules } = useShellModules();
+  const { resolveCapability, capabilityPolicy } = useShellConfig();
+  const {
+    activeService,
+    sidePaneModuleId,
+    subNavCollapsed,
+    onToggleSubNav,
+    onServiceSelect
+  } = useShellNavigation();
+  const isActive = (id) => activeService?.id === id || sidePaneModuleId === id;
+  const policy = useMemo3(
+    () => resolveCapabilityPolicy(capabilityPolicy),
+    [capabilityPolicy]
+  );
+  const renderModule = (service) => {
+    const { effect, reason } = evaluateModule(
+      service,
+      "rail",
+      resolveCapability,
+      policy
+    );
+    if (effect === "hidden" || effect === "redirect") return null;
+    const disabled = effect === "disabled";
+    return /* @__PURE__ */ jsx8(
+      RailIcon,
+      {
+        icon: service.icon,
+        label: service.label,
+        active: isActive(service.id),
+        onClick: () => onServiceSelect(service.id),
+        disabled,
+        tooltip: disabled && reason ? `${service.label} \u2014 ${reason}` : void 0
+      },
+      service.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(renderModule) }),
+      /* @__PURE__ */ jsx8(RailSeparator, {}),
+      /* @__PURE__ */ jsx8("div", { className: "flex flex-col items-center gap-1", children: bottomModules.map(renderModule) })
+    ] }),
+    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 cn5 } 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 createContext4, useContext as useContext4 } from "react";
+var SidePaneContext = createContext4(null);
 function useSidePaneState() {
-  const ctx = useContext2(SidePaneContext);
+  const ctx = useContext4(SidePaneContext);
   if (!ctx) {
     throw new Error("useSidePaneState must be used within an AppShell");
   }
   return ctx;
 }
 
-// src/SidePane.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/DragHandle.tsx
+import { cn as cn4 } from "@petrarca/sonnet-core";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function DragHandle({
+  edge,
   separatorProps,
   onPointerDown,
   onDoubleClick
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ...separatorProps,
       onPointerDown,
       onDoubleClick,
-      className: cn3(
-        "absolute right-0 top-0 h-full w-1 cursor-col-resize",
-        "hover:bg-primary/40 active:bg-primary/60 transition-colors"
+      className: cn4(
+        // 8px invisible hit area; visual feedback only via the before pseudo-element.
+        "absolute top-0 h-full w-2 cursor-col-resize",
+        edge === "right" ? "right-0" : "left-0",
+        // Centered line: invisible at rest, 2px on hover, 4px while dragging.
+        "before:absolute before:inset-y-0 before:left-1/2 before:-translate-x-1/2",
+        "before:w-0 before:transition-all before:duration-150",
+        "hover:before:w-0.5 hover:before:bg-primary/60",
+        "active:before:w-1 active:before:bg-primary/80"
       )
     }
   );
 }
+
+// src/SidePane.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_WIDTH = 320;
 var DEFAULT_MIN = 240;
 var DEFAULT_MAX = 800;
 function SidePane() {
   const { pane, close } = useSidePaneState();
   if (!pane) return null;
-  return /* @__PURE__ */ jsx5(SidePaneOpen, { pane, onClose: close });
+  return /* @__PURE__ */ jsx10(SidePaneOpen, { pane, onClose: close });
 }
 function SidePaneOpen({
   pane,
@@ -557,32 +845,33 @@ function SidePaneOpen({
     direction: "right-edge"
   });
   const isFullWidth = pane.fullWidth === true;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: cn3(
+      className: cn5(
         "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__ */ jsx10("div", { className: "flex h-10 shrink-0 items-center justify-end border-b px-2", children: /* @__PURE__ */ jsx10(
           "button",
           {
             onClick: onClose,
-            className: cn3(
+            className: cn5(
               "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__ */ jsx10(X, { className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx5("div", { className: "flex-1 overflow-auto", children: pane.content }),
-        !isFullWidth && /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx10("div", { className: "flex-1 overflow-auto", children: pane.content }),
+        !isFullWidth && /* @__PURE__ */ jsx10(
           DragHandle,
           {
+            edge: "right",
             separatorProps,
             onPointerDown: handlePointerDown,
             onDoubleClick: handleDoubleClick
@@ -594,7 +883,7 @@ function SidePaneOpen({
 }
 
 // src/CommandMenu.tsx
-import { useEffect as useEffect2, useCallback } from "react";
+import { useEffect as useEffect2, useCallback, useMemo as useMemo4 } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   CommandDialog,
@@ -605,10 +894,11 @@ 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 jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function CommandMenu({ open, onOpenChange }) {
   const navigate = useNavigate();
   const { mainModules, bottomModules } = useShellModules();
+  const { resolveCapability, capabilityPolicy } = useShellConfig();
   useEffect2(() => {
     const handleKeyDown = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -619,6 +909,11 @@ function CommandMenu({ open, onOpenChange }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onOpenChange]);
+  const policy = useMemo4(
+    () => resolveCapabilityPolicy(capabilityPolicy),
+    [capabilityPolicy]
+  );
+  const moduleEffect = (service) => evaluateModule(service, "command", resolveCapability, policy);
   const handleSelect = useCallback(
     (path) => {
       navigate(path);
@@ -628,17 +923,21 @@ function CommandMenu({ open, onOpenChange }) {
   );
   const renderNavGroup = (service) => {
     if (service.navigation.length === 0) return null;
+    const { effect, reason } = moduleEffect(service);
+    if (effect === "hidden" || effect === "redirect") return null;
+    const disabled = effect === "disabled";
     const Icon = service.icon;
-    return /* @__PURE__ */ jsx6(CommandGroup, { heading: service.label, children: service.navigation.flatMap(
-      (group) => group.links.map((link) => /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsx11(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),
+          disabled,
+          onSelect: disabled ? void 0 : () => 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__ */ jsx11(Icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx11("span", { children: link.label }),
+            disabled && reason ? /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs text-muted-foreground", children: reason }) : group.heading && /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs text-muted-foreground", children: group.heading })
           ]
         },
         link.path
@@ -647,24 +946,29 @@ function CommandMenu({ open, onOpenChange }) {
   };
   const renderCommandGroup = (service) => {
     if (!service.commands?.length) return null;
+    const { effect, reason } = moduleEffect(service);
+    if (effect === "hidden" || effect === "redirect") return null;
+    const disabled = effect === "disabled";
     const Icon = service.icon;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx11(
       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}`,
-              onSelect: () => {
+              disabled,
+              onSelect: disabled ? void 0 : () => {
                 cmd.action();
                 onOpenChange(false);
               },
               children: [
-                /* @__PURE__ */ jsx6(CmdIcon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsx6("span", { children: cmd.label })
+                /* @__PURE__ */ jsx11(CmdIcon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx11("span", { children: cmd.label }),
+                disabled && reason && /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs text-muted-foreground", children: reason })
               ]
             },
             cmd.id
@@ -675,45 +979,69 @@ 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." }),
+  const hasVisibleNav = (modules) => modules.some(
+    (m) => m.navigation.length > 0 && !["hidden", "redirect"].includes(moduleEffect(m).effect)
+  );
+  const hasVisibleCmds = allModules.some(
+    (m) => (m.commands?.length ?? 0) > 0 && !["hidden", "redirect"].includes(moduleEffect(m).effect)
+  );
+  return /* @__PURE__ */ jsxs8(CommandDialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx11(CommandInput, { placeholder: "Search pages, services, actions..." }),
+    /* @__PURE__ */ jsxs8(CommandList, { children: [
+      /* @__PURE__ */ jsx11(CommandEmpty, { children: "No results found." }),
       mainModules.map(renderNavGroup),
-      /* @__PURE__ */ jsx6(CommandSeparator, {}),
+      hasVisibleNav(mainModules) && hasVisibleNav(bottomModules) && /* @__PURE__ */ jsx11(CommandSeparator, {}),
       bottomModules.map(renderNavGroup),
-      allModules.some((m) => m.commands?.length) && /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx6(CommandSeparator, {}),
+      hasVisibleCmds && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        /* @__PURE__ */ jsx11(CommandSeparator, {}),
         allModules.map(renderCommandGroup)
       ] })
     ] })
   ] });
 }
 
-// src/shellConfig.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var ShellConfigContext = createContext3(null);
-function useShellConfig() {
-  const config = useContext3(ShellConfigContext);
-  if (!config) {
-    throw new Error("useShellConfig must be used within a ShellConfigProvider");
+// src/ModuleEffects.tsx
+import React3 from "react";
+import { warnLog as warnLog4 } from "@petrarca/sonnet-core";
+import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
+var ModuleEffectBoundary = class extends React3.Component {
+  state = { caught: false };
+  static getDerivedStateFromError() {
+    return { caught: true };
   }
-  return config;
+  componentDidCatch(error) {
+    warnLog4(
+      "[ModuleEffects] module '{}' useEffects threw \u2014 effects disabled for this module: {}",
+      this.props.moduleId,
+      error
+    );
+  }
+  render() {
+    return this.state.caught ? null : this.props.children;
+  }
+};
+function ModuleEffectHost({ module }) {
+  module.useEffects();
+  return null;
+}
+function ModuleEffects({ modules }) {
+  return /* @__PURE__ */ jsx12(Fragment3, { children: modules.filter((m) => typeof m.useEffects === "function").map((m) => /* @__PURE__ */ jsx12(ModuleEffectBoundary, { moduleId: m.id, children: /* @__PURE__ */ jsx12(ModuleEffectHost, { module: m }) }, m.id)) });
 }
 
 // src/AppShell.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var PANEL_WIDTH_CLASS = {
-  narrow: "w-[480px]",
-  default: "w-[640px]",
-  wide: "w-[800px]",
-  half: "w-[50vw]",
-  full: "w-screen",
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var PANEL_WIDTHS = {
+  narrow: { css: "w-[480px]", px: 480 },
+  default: { css: "w-[640px]", px: 640 },
+  wide: { css: "w-[800px]", px: 800 },
+  half: { css: "w-[50vw]", px: 640 },
+  full: { css: "w-screen", px: 640 },
   // legacy aliases
-  lg: "w-[640px]",
-  "1/3": "w-[33vw]",
-  "1/2": "w-[50vw]"
+  lg: { css: "w-[640px]", px: 640 },
+  "1/3": { css: "w-[33vw]", px: 640 },
+  "1/2": { css: "w-[50vw]", px: 640 }
 };
+var DEFAULT_PANEL = PANEL_WIDTHS.default;
 function isSidePaneModule(service) {
   return !!service.sidePane && service.navigation.length === 0;
 }
@@ -761,7 +1089,7 @@ function useShellApiInit(deps) {
 }
 function useActiveService(modules) {
   const location = useLocation2();
-  const serviceByBasePath = useMemo3(
+  const serviceByBasePath = useMemo5(
     () => new Map(
       modules.filter((m) => !m.hidden && m.basePath !== "/").map((m) => [m.basePath, m.id])
     ),
@@ -776,7 +1104,7 @@ function useActiveService(modules) {
     },
     [serviceByBasePath]
   );
-  const [selectedServiceId, setSelectedServiceId] = useState(
+  const [selectedServiceId, setSelectedServiceId] = useState2(
     () => resolveServiceFromPath(location.pathname)
   );
   useEffect3(
@@ -787,7 +1115,7 @@ function useActiveService(modules) {
   return { activeService, selectedServiceId, setSelectedServiceId };
 }
 function useSidePaneState2() {
-  const [sidePaneState, setSidePaneState] = useState(
+  const [sidePaneState, setSidePaneState] = useState2(
     null
   );
   const handleOpen = useCallback2(
@@ -816,8 +1144,27 @@ function useSidePaneState2() {
     handleSetFullWidth
   };
 }
+var DEFAULT_RESIZE_MIN = 240;
+var DEFAULT_RESIZE_MAX = 1200;
+function resizeOptionsFromPanel(state, widthEntry) {
+  if (!state?.resizable) {
+    return {
+      enabled: false,
+      defaultWidth: widthEntry.px,
+      minWidth: DEFAULT_RESIZE_MIN,
+      maxWidth: DEFAULT_RESIZE_MAX
+    };
+  }
+  const viewportMax = typeof window !== "undefined" ? Math.round(window.innerWidth * 0.9) : DEFAULT_RESIZE_MAX;
+  return {
+    enabled: true,
+    defaultWidth: widthEntry.px,
+    minWidth: state.minWidth ?? DEFAULT_RESIZE_MIN,
+    maxWidth: state.maxWidth ?? viewportMax
+  };
+}
 function usePanelState() {
-  const [panelState, setPanelState] = useState(null);
+  const [panelState, setPanelState] = useState2(null);
   const panelOnCloseRef = useRef2(void 0);
   const handleOpen = useCallback2(
     (opts) => setPanelState(opts),
@@ -827,7 +1174,8 @@ function usePanelState() {
     panelOnCloseRef.current = panelState?.onClose;
     setPanelState(null);
   }, [panelState]);
-  const panelWidth = PANEL_WIDTH_CLASS[panelState?.width ?? "default"] ?? PANEL_WIDTH_CLASS.default;
+  const widthEntry = PANEL_WIDTHS[panelState?.width ?? "default"] ?? DEFAULT_PANEL;
+  const panelWidth = widthEntry.css;
   const panelOffsetTop = panelState?.coverage === "full" ? "0px" : "3rem";
   return {
     panelState,
@@ -835,11 +1183,12 @@ function usePanelState() {
     handleOpen,
     handleClose,
     panelWidth,
-    panelOffsetTop
+    panelOffsetTop,
+    resize: resizeOptionsFromPanel(panelState, widthEntry)
   };
 }
 function useDialogState() {
-  const [dialogState, setDialogState] = useState(null);
+  const [dialogState, setDialogState] = useState2(null);
   const handleConfirm = useCallback2(() => {
     dialogState?.resolve(true);
     setDialogState(null);
@@ -851,7 +1200,7 @@ function useDialogState() {
   return { dialogState, setDialogState, handleConfirm, handleCancel };
 }
 function useFeatureLookup(modules) {
-  return useMemo3(() => {
+  return useMemo5(() => {
     const map = /* @__PURE__ */ new Map();
     for (const m of modules) {
       for (const group of m.navigation) {
@@ -863,15 +1212,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),
     []
@@ -930,7 +1279,7 @@ function AppShell({ registry }) {
       setSubNavCollapsed
     ]
   );
-  const sidePaneContextValue = useMemo3(
+  const sidePaneContextValue = useMemo5(
     () => ({
       pane: sidePane2.sidePaneState,
       open: sidePane2.handleOpen,
@@ -946,50 +1295,59 @@ 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(
-      CommandMenu,
-      {
-        open: commandMenuOpen,
-        onOpenChange: setCommandMenuOpen
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      ShellBody,
-      {
-        activeService,
-        sidePaneFullWidth: sidePane2.sidePaneState?.fullWidth,
-        sidePaneModuleId: sidePane2.sidePaneState?.moduleId ?? null,
-        subNavCollapsed,
-        onToggleSubNav: () => setSubNavCollapsed((c) => !c),
-        onServiceSelect: handleServiceSelect
-      }
-    ),
-    dialog2.dialogState && /* @__PURE__ */ jsx7(
-      ConfirmDialog,
-      {
-        open: true,
-        title: dialog2.dialogState.opts.title,
-        description: dialog2.dialogState.opts.description,
-        confirmLabel: dialog2.dialogState.opts.confirmLabel,
-        cancelLabel: dialog2.dialogState.opts.cancelLabel,
-        variant: dialog2.dialogState.opts.variant,
-        onConfirm: dialog2.handleConfirm,
-        onCancel: dialog2.handleCancel
-      }
-    ),
-    fullscreenState && /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-50 bg-background overflow-auto", children: fullscreenState.content }),
-    /* @__PURE__ */ jsx7(
-      SlideOverPanel,
-      {
-        panelState: panel2.panelState,
-        panelWidth: panel2.panelWidth,
-        panelOffsetTop: panel2.panelOffsetTop,
-        panelOnCloseRef: panel2.panelOnCloseRef,
-        onClose: panel2.handleClose
-      }
-    )
+  const navigationValue = {
+    activeService,
+    sidePaneModuleId: sidePane2.sidePaneState?.moduleId ?? null,
+    subNavCollapsed,
+    onToggleSubNav: () => setSubNavCollapsed((c) => !c),
+    onServiceSelect: handleServiceSelect
+  };
+  return /* @__PURE__ */ jsx13(ShellModulesContext.Provider, { value: registry, children: /* @__PURE__ */ jsx13(SidePaneContext.Provider, { value: sidePaneContextValue, children: /* @__PURE__ */ jsx13(ShellNavigationContext.Provider, { value: navigationValue, children: /* @__PURE__ */ jsxs9(TooltipProvider, { children: [
+    /* @__PURE__ */ jsx13(ModuleEffects, { modules }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex h-screen w-screen flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx13(TopBar, { children: config.topBar }),
+      /* @__PURE__ */ jsx13(
+        CommandMenu,
+        {
+          open: commandMenuOpen,
+          onOpenChange: setCommandMenuOpen
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        ShellBody,
+        {
+          activeService,
+          sidePaneFullWidth: sidePane2.sidePaneState?.fullWidth,
+          sidebar
+        }
+      ),
+      config.footer && /* @__PURE__ */ jsx13(ShellFooter, { children: config.footer }),
+      dialog2.dialogState && /* @__PURE__ */ jsx13(
+        ConfirmDialog,
+        {
+          open: true,
+          title: dialog2.dialogState.opts.title,
+          description: dialog2.dialogState.opts.description,
+          confirmLabel: dialog2.dialogState.opts.confirmLabel,
+          cancelLabel: dialog2.dialogState.opts.cancelLabel,
+          variant: dialog2.dialogState.opts.variant,
+          onConfirm: dialog2.handleConfirm,
+          onCancel: dialog2.handleCancel
+        }
+      ),
+      fullscreenState && /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 z-50 bg-background overflow-auto", children: fullscreenState.content }),
+      /* @__PURE__ */ jsx13(
+        SlideOverPanel,
+        {
+          panelState: panel2.panelState,
+          panelWidth: panel2.panelWidth,
+          panelOffsetTop: panel2.panelOffsetTop,
+          panelOnCloseRef: panel2.panelOnCloseRef,
+          onClose: panel2.handleClose,
+          resize: panel2.resize
+        }
+      )
+    ] })
   ] }) }) }) });
 }
 function SlideOverPanel({
@@ -997,78 +1355,92 @@ function SlideOverPanel({
   panelWidth,
   panelOffsetTop,
   panelOnCloseRef,
-  onClose
+  onClose,
+  resize
 }) {
-  return /* @__PURE__ */ jsx7(
+  const sheetProps = {
+    side: "right",
+    offsetTop: panelOffsetTop,
+    onCloseAutoFocus: (e) => {
+      if (panelOnCloseRef.current) {
+        e.preventDefault();
+        panelOnCloseRef.current();
+      }
+    },
+    ...!panelState?.description && { "aria-describedby": void 0 }
+  };
+  return /* @__PURE__ */ jsx13(
     Sheet,
     {
       open: panelState !== null,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsx7(
-        SheetContent,
-        {
-          side: "right",
-          className: `${panelWidth} max-w-[90vw]`,
-          offsetTop: panelOffsetTop,
-          onCloseAutoFocus: (e) => {
-            if (panelOnCloseRef.current) {
-              e.preventDefault();
-              panelOnCloseRef.current();
-            }
-          },
-          ...!panelState?.description && {
-            "aria-describedby": void 0
-          },
-          children: panelState && /* @__PURE__ */ jsx7(PanelContent, { state: panelState })
-        }
-      )
+      children: resize.enabled ? /* @__PURE__ */ jsx13(ResizableSheetContent, { ...sheetProps, resize, children: panelState && /* @__PURE__ */ jsx13(PanelContent, { state: panelState }) }) : /* @__PURE__ */ jsx13(SheetContent, { ...sheetProps, className: `${panelWidth} max-w-[90vw]`, children: panelState && /* @__PURE__ */ jsx13(PanelContent, { state: panelState }) })
+    }
+  );
+}
+function ResizableSheetContent({
+  resize,
+  children,
+  ...sheetProps
+}) {
+  const {
+    panelWidth: dynWidth,
+    handlePointerDown,
+    handleDoubleClick,
+    separatorProps
+  } = useResizablePanel2({
+    defaultWidth: resize.defaultWidth,
+    minWidth: resize.minWidth,
+    maxWidth: resize.maxWidth,
+    direction: "left-edge"
+  });
+  return /* @__PURE__ */ jsxs9(
+    SheetContent,
+    {
+      ...sheetProps,
+      className: "max-w-[90vw]",
+      style: { width: dynWidth },
+      children: [
+        /* @__PURE__ */ jsx13(
+          DragHandle,
+          {
+            edge: "left",
+            separatorProps,
+            onPointerDown: handlePointerDown,
+            onDoubleClick: handleDoubleClick
+          }
+        ),
+        children
+      ]
     }
   );
 }
 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__ */ jsx13(ShellRail, {}),
+    /* @__PURE__ */ jsx13(SidePane, {}),
+    sidePaneFullWidth !== true && /* @__PURE__ */ jsx13("div", { className: "flex-1 min-w-0 h-full overflow-hidden", children: /* @__PURE__ */ jsx13(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__ */ jsx13("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx13(Outlet, {}) });
   }
-  return /* @__PURE__ */ jsx7(ScrollArea2, { className: "h-full", children: /* @__PURE__ */ jsx7("main", { className: "p-6", children: /* @__PURE__ */ jsx7(Outlet, {}) }) });
+  return /* @__PURE__ */ jsx13(ScrollArea2, { className: "h-full", children: /* @__PURE__ */ jsx13("main", { className: "p-6", children: /* @__PURE__ */ jsx13(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(Fragment4, { children: [
+    state.title ? /* @__PURE__ */ jsxs9(SheetHeader, { children: [
+      /* @__PURE__ */ jsx13(SheetTitle, { children: state.title }),
+      state.description && /* @__PURE__ */ jsx13(SheetDescription, { children: state.description })
+    ] }) : /* @__PURE__ */ jsx13(SheetTitle, { className: "sr-only", children: "Panel" }),
+    /* @__PURE__ */ jsx13(SheetBody, { children: state.content })
   ] });
 }
 
@@ -1076,32 +1448,36 @@ function PanelContent({ state }) {
 import { Toaster } from "sonner";
 
 // src/ShellConfigProvider.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function ShellConfigProvider({
   config,
   children
 }) {
-  return /* @__PURE__ */ jsx8(ShellConfigContext.Provider, { value: config, children });
+  return /* @__PURE__ */ jsx14(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 jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function RootLayout({
+  config,
+  registry,
+  sidebar
+}) {
+  return /* @__PURE__ */ jsxs10(ShellConfigProvider, { config, children: [
+    /* @__PURE__ */ jsx15(Toaster, { position: "top-right", richColors: true, closeButton: true }),
+    /* @__PURE__ */ jsx15(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 jsx16, 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__ */ jsx16("h1", { className: "mb-1", children: pathToTitle(pathname) }),
+    /* @__PURE__ */ jsx16("p", { className: "text-sm text-muted-foreground mb-6", children: pathname }),
+    /* @__PURE__ */ jsx16("div", { className: "rounded-lg border-2 border-dashed border-border p-12 flex items-center justify-center", children: /* @__PURE__ */ jsx16("span", { className: "text-sm text-muted-foreground", children: "Content area \u2014 not yet implemented" }) })
   ] });
 }
 function pathToTitle(path) {
@@ -1110,12 +1486,131 @@ function pathToTitle(path) {
   return last.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
 
+// src/Sidebar.tsx
+import { cn as cn6 } from "@petrarca/sonnet-core";
+import { ScrollArea as ScrollArea3 } from "@petrarca/sonnet-ui";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function Sidebar({
+  children,
+  header,
+  width = 260,
+  className
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "aside",
+    {
+      style: { width },
+      className: cn6(
+        "shrink-0 border-r bg-muted/30 flex flex-col h-full",
+        className
+      ),
+      children: [
+        header,
+        /* @__PURE__ */ jsx17(ScrollArea3, { className: "flex-1", children: /* @__PURE__ */ jsx17("nav", { className: "px-1.5 py-2 space-y-3", children }) })
+      ]
+    }
+  );
+}
+
+// src/ShellSidebar.tsx
+import { jsx as jsx18, 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__ */ jsx18(SidebarGroup, { separator: true, children: topNavItems.map(({ link, icon }) => /* @__PURE__ */ jsx18(
+      SidebarItem,
+      {
+        icon,
+        label: link.label,
+        path: link.path,
+        badge: link.badge
+      },
+      link.path
+    )) }),
+    mainModules.map((mod) => {
+      if (mod.navigation.length === 0) {
+        return /* @__PURE__ */ jsx18(
+          SidebarItem,
+          {
+            icon: mod.icon,
+            label: mod.label,
+            path: mod.basePath
+          },
+          mod.id
+        );
+      }
+      return /* @__PURE__ */ jsx18(SidebarGroup, { heading: mod.label, collapsible: true, children: mod.navigation.flatMap((group) => [
+        // Render NavGroup heading if it has one
+        ...group.heading ? [
+          /* @__PURE__ */ jsx18(
+            SidebarGroup,
+            {
+              heading: group.heading,
+              collapsible: group.collapsible,
+              children: group.links.map((link) => /* @__PURE__ */ jsx18(
+                SidebarItem,
+                {
+                  icon: mod.icon,
+                  label: link.label,
+                  path: link.path,
+                  badge: link.badge
+                },
+                link.path
+              ))
+            },
+            group.id
+          )
+        ] : group.links.map((link) => /* @__PURE__ */ jsx18(
+          SidebarItem,
+          {
+            icon: mod.icon,
+            label: link.label,
+            path: link.path,
+            badge: link.badge
+          },
+          link.path
+        ))
+      ]) }, mod.id);
+    }),
+    bottomModules.length > 0 && /* @__PURE__ */ jsx18(SidebarGroup, { heading: bottomGroupLabel, collapsible: true, children: bottomModules.map((mod) => /* @__PURE__ */ jsx18(
+      SidebarItem,
+      {
+        icon: mod.icon,
+        label: mod.label,
+        path: mod.basePath
+      },
+      mod.id
+    )) })
+  ] });
+}
+
+// src/ShellVersion.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+function ShellVersion({
+  name,
+  version
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx19("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 jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function SearchTrigger() {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs15(
     Button3,
     {
       variant: "outline",
@@ -1123,10 +1618,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__ */ jsx20(Search, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx20("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__ */ jsx20("span", { className: "text-xs", children: "\u2318" }),
           "K"
         ] })
       ]
@@ -1146,23 +1641,23 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, 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__ */ jsx21(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(Button4, { variant: "ghost", size: "compact", className: "rounded-full", children: /* @__PURE__ */ jsx21(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx21(AvatarFallback, { className: "text-xs", children: user.initials }) }) }) }),
+    /* @__PURE__ */ jsxs16(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsx21(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium", children: user.name }),
+        /* @__PURE__ */ jsx21("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__ */ jsx21(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs16(DropdownMenuItem, { children: [
+        /* @__PURE__ */ jsx21(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__ */ jsx21(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs16(DropdownMenuItem, { onSelect: onSignOut, children: [
+        /* @__PURE__ */ jsx21(LogOut, { className: "mr-2 h-4 w-4" }),
         "Sign out"
       ] })
     ] })
@@ -1193,13 +1688,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 cn7 } from "@petrarca/sonnet-core";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function FeatureLink({
   feature,
   children
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx22(
     "span",
     {
       role: "link",
@@ -1227,22 +1722,22 @@ function OverviewCard({
   feature,
   className
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs17(
     "button",
     {
       onClick: feature ? () => navigation.goToFeature(feature) : void 0,
       disabled: !feature,
-      className: cn4(
+      className: cn7(
         "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__ */ jsx22("div", { className: "h-9 w-9 rounded-md bg-blue-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx22(Icon, { className: "h-5 w-5 text-blue-600" }) }),
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx22("p", { className: "text-sm font-medium mb-1", children: title }),
+          /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground leading-relaxed", children: description })
         ] })
       ]
     }
@@ -1252,35 +1747,50 @@ export {
   AppShell,
   CommandMenu,
   ConfirmDialog,
+  DEFAULT_CAPABILITY_POLICY,
   FeatureLink,
   IconRail,
   OverviewCard,
   PlaceholderPage,
+  RailIcon,
+  RailSeparator,
   RootLayout,
   SearchTrigger,
   ShellConfigProvider,
+  ShellFooter,
+  ShellRail,
+  ShellSidebar,
+  ShellVersion,
   SidePane,
   SidePaneContext,
+  Sidebar,
+  SidebarGroup,
+  SidebarItem,
   SubNavPanel,
   TopBar,
   UserMenu,
   createModuleRegistry,
   dialog,
+  evaluateModule,
   events,
   fullscreen,
   initDialog,
+  initFeatureNav,
+  initFullscreen,
   initNavigation,
   initPanel,
   initSidePane,
   navigation,
   notification,
   panel,
+  resolveCapabilityPolicy,
   sidePane,
   useExtensionPoint,
   useMainModules,
   useShellConfig,
   useShellEvent,
   useShellModules,
+  useShellNavigation,
   useSidePaneState
 };
 //# sourceMappingURL=index.js.map