@petrarca/sonnet-shell 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,12 +1,12 @@
 // src/AppShell.tsx
 import {
-  useState as useState2,
-  useEffect as useEffect3,
-  useCallback as useCallback2,
+  useState as useState4,
+  useEffect as useEffect6,
+  useCallback as useCallback3,
   useRef as useRef2,
-  useMemo as useMemo5
+  useMemo as useMemo4
 } from "react";
-import { useResizablePanel as useResizablePanel2 } from "@petrarca/sonnet-core/hooks";
+import { useResizablePanel as useResizablePanel2, useMediaQuery } 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";
@@ -20,8 +20,9 @@ import {
 } from "@petrarca/sonnet-ui";
 
 // src/ConfirmDialog.tsx
+import { useState } from "react";
 import { AlertTriangle } from "lucide-react";
-import { Button } from "@petrarca/sonnet-ui";
+import { Button, Input } from "@petrarca/sonnet-ui";
 import {
   Dialog,
   DialogContent,
@@ -38,9 +39,12 @@ function ConfirmDialog({
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   variant = "default",
+  confirmText,
   onConfirm,
   onCancel
 }) {
+  const [typed, setTyped] = useState("");
+  const confirmed = confirmText == null || typed === confirmText;
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && onCancel(), children: /* @__PURE__ */ jsxs(DialogContent, { children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsx(DialogTitle, { children: title }),
@@ -56,9 +60,28 @@ function ConfirmDialog({
       ),
       /* @__PURE__ */ jsx("p", { className: "flex-1 text-sm text-muted-foreground", children: "This action cannot be undone." })
     ] }),
+    confirmText != null && /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5 text-sm", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        "Type",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground", children: confirmText }),
+        " ",
+        "to confirm"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: typed,
+          onChange: (e) => setTyped(e.target.value),
+          autoComplete: "off",
+          spellCheck: false,
+          "aria-label": `Type ${confirmText} to confirm`
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs(DialogFooter, { children: [
       /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ jsx(Button, { variant, onClick: onConfirm, children: confirmLabel })
+      /* @__PURE__ */ jsx(Button, { variant, onClick: onConfirm, disabled: !confirmed, children: confirmLabel })
     ] })
   ] }) });
 }
@@ -76,7 +99,7 @@ function ShellFooter({ children }) {
 }
 
 // src/ShellRail.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/IconRail.tsx
 import { cn } from "@petrarca/sonnet-core";
@@ -132,7 +155,6 @@ function RailSeparator() {
 }
 
 // src/SubNavPanel.tsx
-import { useMemo as useMemo2 } from "react";
 import { ChevronsLeft, ChevronsRight } from "lucide-react";
 import { ScrollArea } from "@petrarca/sonnet-ui";
 import { Tooltip as Tooltip2, TooltipContent as TooltipContent2, TooltipTrigger as TooltipTrigger2 } from "@petrarca/sonnet-ui";
@@ -185,18 +207,25 @@ function emit(key, payload) {
 }
 
 // src/api.ts
+var toastOptions = (options) => options && {
+  description: options.description,
+  action: options.action && {
+    label: options.action.label,
+    onClick: () => options.action?.onClick()
+  }
+};
 var notification = {
-  success(message) {
-    toast.success(message);
+  success(message, options) {
+    toast.success(message, toastOptions(options));
   },
-  error(message) {
-    toast.error(message);
+  error(message, options) {
+    toast.error(message, toastOptions(options));
   },
-  warning(message) {
-    toast.warning(message);
+  warning(message, options) {
+    toast.warning(message, toastOptions(options));
   },
-  info(message) {
-    toast.info(message);
+  info(message, options) {
+    toast.info(message, toastOptions(options));
   },
   promise(promise, opts) {
     return toast.promise(promise, opts);
@@ -419,6 +448,33 @@ function useExtensionPoint(name) {
   const { getExtensionPoint } = useShellModules();
   return useMemo(() => getExtensionPoint(name), [getExtensionPoint, name]);
 }
+function useContributedComponent(extensionPoint, path) {
+  const contributions = useExtensionPoint(extensionPoint);
+  return useMemo(() => {
+    const found = contributions.find((c) => c.path === path && c.component);
+    return found?.component;
+  }, [contributions, path]);
+}
+function noRuntimeNavigation() {
+  return [];
+}
+function useModuleNavigation(module) {
+  const runtime = (module.useNavigation ?? noRuntimeNavigation)();
+  const contributions = useExtensionPoint(`${module.id}.nav`);
+  return useMemo(() => {
+    const groups = [...module.navigation, ...runtime];
+    if (contributions.length === 0) return groups;
+    const contributed = {
+      id: `${module.id}-contributed`,
+      links: contributions.map((c) => ({
+        id: c.extensionPoint + "." + c.label.toLowerCase().replace(/\s+/g, "-"),
+        label: c.label,
+        path: c.path
+      }))
+    };
+    return [...groups, contributed];
+  }, [module, runtime, contributions]);
+}
 function useMainModules() {
   const { mainModules } = useShellModules();
   return mainModules;
@@ -432,7 +488,7 @@ function useShellEvent(key, handler) {
 }
 
 // src/SidebarGroup.tsx
-import { useState } from "react";
+import { useState as useState2 } 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";
@@ -448,9 +504,10 @@ function GroupHeading({
       type: "button",
       onClick: canCollapse ? onToggle : void 0,
       className: cn2(
-        "flex w-full items-center gap-1 px-2 py-1.5",
+        "flex w-full items-center gap-1 rounded px-2 py-1.5",
         "text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/70",
-        canCollapse ? "hover:text-foreground cursor-pointer" : "cursor-default"
+        canCollapse ? "hover:text-foreground cursor-pointer" : "cursor-default",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
       ),
       children: [
         canCollapse && /* @__PURE__ */ jsx5(
@@ -471,7 +528,7 @@ function SidebarGroup({
   separator = false,
   children
 }) {
-  const [open, setOpen] = useState(defaultOpen);
+  const [open, setOpen] = useState2(defaultOpen);
   const canCollapse = collapsible && !!heading;
   return /* @__PURE__ */ jsxs3("div", { className: cn2(separator && "border-b border-border pb-2"), children: [
     heading && /* @__PURE__ */ jsx5(
@@ -511,8 +568,9 @@ function ItemTrailing({
       "button",
       {
         type: "button",
+        "aria-label": expanded ? "Collapse" : "Expand",
         onClick: handleClick,
-        className: "p-0.5 text-muted-foreground hover:text-foreground",
+        className: "rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         children: /* @__PURE__ */ jsx6(
           ChevronRight,
           {
@@ -562,6 +620,7 @@ function SidebarItem({
       style,
       className: cn3(
         "flex items-center gap-2 rounded px-2 py-1.5 text-[13px] font-medium transition-colors select-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         itemStateClass(disabled, isActive)
       ),
       children: [
@@ -583,34 +642,23 @@ function SidebarItem({
 
 // src/SubNavPanel.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function useMergedNavigation(service) {
-  const contributions = useExtensionPoint(`${service.id}.nav`);
-  return useMemo2(() => {
-    if (contributions.length === 0) return service.navigation;
-    const contributed = {
-      id: `${service.id}-contributed`,
-      links: contributions.map((c) => ({
-        id: c.extensionPoint + "." + c.label.toLowerCase().replace(/\s+/g, "-"),
-        label: c.label,
-        path: c.path
-      }))
-    };
-    return [...service.navigation, contributed];
-  }, [service, contributions]);
+function SubNavPanel(props) {
+  return /* @__PURE__ */ jsx7(ModuleSubNav, { ...props }, props.service.id);
 }
-function SubNavPanel({
+function ModuleSubNav({
   service,
   collapsed,
   onToggleCollapse
 }) {
-  const mergedNavigation = useMergedNavigation(service);
+  const mergedNavigation = useModuleNavigation(service);
   if (collapsed) {
     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",
+          "aria-label": "Expand navigation",
+          className: "rounded text-muted-foreground/50 hover:text-muted-foreground transition-colors p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           onClick: onToggleCollapse,
           children: /* @__PURE__ */ jsx7(ChevronsRight, { className: "h-4 w-4" })
         }
@@ -626,7 +674,8 @@ function SubNavPanel({
           "button",
           {
             type: "button",
-            className: "text-muted-foreground/40 hover:text-muted-foreground transition-colors p-0.5",
+            "aria-label": "Collapse navigation",
+            className: "rounded text-muted-foreground/40 hover:text-muted-foreground transition-colors p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             onClick: onToggleCollapse,
             children: /* @__PURE__ */ jsx7(ChevronsLeft, { className: "h-3.5 w-3.5" })
           }
@@ -655,7 +704,7 @@ function SubNavPanel({
 }
 
 // src/shellNavigation.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2 } from "react";
 var ShellNavigationContext = createContext2(null);
 function useShellNavigation() {
   const ctx = useContext2(ShellNavigationContext);
@@ -664,6 +713,13 @@ function useShellNavigation() {
   }
   return ctx;
 }
+function useCollapsedSubNav(active = true) {
+  const request = useContext2(ShellNavigationContext)?.requestSubNavCollapse;
+  useEffect2(
+    () => active && request ? request() : void 0,
+    [active, request]
+  );
+}
 
 // src/shellConfig.ts
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -749,7 +805,7 @@ function ShellRail() {
     onServiceSelect
   } = useShellNavigation();
   const isActive = (id) => activeService?.id === id || sidePaneModuleId === id;
-  const policy = useMemo3(
+  const policy = useMemo2(
     () => resolveCapabilityPolicy(capabilityPolicy),
     [capabilityPolicy]
   );
@@ -896,7 +952,7 @@ function SidePaneOpen({
 }
 
 // src/CommandMenu.tsx
-import { useEffect as useEffect2, useCallback, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect3, useCallback, useMemo as useMemo3 } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   CommandDialog,
@@ -912,7 +968,7 @@ function CommandMenu({ open, onOpenChange }) {
   const navigate = useNavigate();
   const { mainModules, bottomModules } = useShellModules();
   const { resolveCapability, capabilityPolicy } = useShellConfig();
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKeyDown = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -922,7 +978,7 @@ function CommandMenu({ open, onOpenChange }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onOpenChange]);
-  const policy = useMemo4(
+  const policy = useMemo3(
     () => resolveCapabilityPolicy(capabilityPolicy),
     [capabilityPolicy]
   );
@@ -935,27 +991,18 @@ function CommandMenu({ open, onOpenChange }) {
     [navigate, 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__ */ jsx11(CommandGroup, { heading: service.label, children: service.navigation.flatMap(
-      (group) => group.links.map((link) => /* @__PURE__ */ jsxs8(
-        CommandItem,
-        {
-          value: `${service.label} ${group.heading ?? ""} ${link.label}`,
-          disabled,
-          onSelect: disabled ? void 0 : () => handleSelect(link.path),
-          children: [
-            /* @__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
-      ))
-    ) }, `nav-${service.id}`);
+    return /* @__PURE__ */ jsx11(
+      ModuleNavCommands,
+      {
+        service,
+        disabled: effect === "disabled",
+        reason,
+        onSelect: handleSelect
+      },
+      `nav-${service.id}`
+    );
   };
   const renderCommandGroup = (service) => {
     if (!service.commands?.length) return null;
@@ -1012,12 +1059,38 @@ function CommandMenu({ open, onOpenChange }) {
     ] })
   ] });
 }
+function ModuleNavCommands({
+  service,
+  disabled,
+  reason,
+  onSelect
+}) {
+  const navigation2 = useModuleNavigation(service);
+  if (navigation2.length === 0) return null;
+  const Icon = service.icon;
+  return /* @__PURE__ */ jsx11(CommandGroup, { heading: service.label, children: navigation2.flatMap(
+    (group) => group.links.map((link) => /* @__PURE__ */ jsxs8(
+      CommandItem,
+      {
+        value: `${service.label} ${group.heading ?? ""} ${link.label}`,
+        disabled,
+        onSelect: disabled ? void 0 : () => onSelect(link.path),
+        children: [
+          /* @__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
+    ))
+  ) });
+}
 
 // src/ModuleEffects.tsx
-import React3 from "react";
+import React5 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 {
+var ModuleEffectBoundary = class extends React5.Component {
   state = { caught: false };
   static getDerivedStateFromError() {
     return { caught: true };
@@ -1041,8 +1114,64 @@ 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/ModuleFeatures.tsx
+import { useEffect as useEffect4 } from "react";
+import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
+function ModuleFeatureHost({
+  module,
+  record
+}) {
+  const navigation2 = useModuleNavigation(module);
+  useEffect4(() => {
+    const links = /* @__PURE__ */ new Map();
+    for (const group of navigation2) {
+      for (const link of group.links) {
+        if (link.id) links.set(link.id, link.path);
+      }
+    }
+    record.set(module.id, links);
+  }, [module.id, navigation2, record]);
+  return null;
+}
+function ModuleFeatures({
+  modules,
+  record
+}) {
+  return /* @__PURE__ */ jsx13(Fragment4, { children: modules.map((m) => /* @__PURE__ */ jsx13(ModuleFeatureHost, { module: m, record }, m.id)) });
+}
+
+// src/subNavCollapse.ts
+import { useCallback as useCallback2, useEffect as useEffect5, useState as useState3 } from "react";
+function useSubNavCollapse(isBelowTablet) {
+  const [preference, setPreference] = useState3(false);
+  const [requests, setRequests] = useState3(0);
+  const [overridden, setOverridden] = useState3(false);
+  useEffect5(() => {
+    if (requests === 0) setOverridden(false);
+  }, [requests]);
+  const requested = requests > 0 && !overridden;
+  const toggle = useCallback2(() => {
+    if (requested) {
+      setOverridden(true);
+      setPreference(false);
+      return;
+    }
+    setPreference((c) => !c);
+  }, [requested]);
+  const requestCollapse = useCallback2(() => {
+    setRequests((n) => n + 1);
+    return () => setRequests((n) => n - 1);
+  }, []);
+  return {
+    collapsed: preference || isBelowTablet || requested,
+    toggle,
+    setCollapsed: setPreference,
+    requestCollapse
+  };
+}
+
 // src/AppShell.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var PANEL_WIDTHS = {
   narrow: { css: "w-[480px]", px: 480 },
   default: { css: "w-[640px]", px: 640 },
@@ -1082,10 +1211,10 @@ function selectNavModule(service, navigate, setSubNavCollapsed, closeSidePane) {
 }
 function useShellApiInit(deps) {
   const latest = useRef2(deps);
-  useEffect3(() => {
+  useEffect6(() => {
     latest.current = deps;
   });
-  useEffect3(() => {
+  useEffect6(() => {
     initNavigation(
       (path) => latest.current.navigate(path),
       () => latest.current.openCommandMenu()
@@ -1115,7 +1244,7 @@ function useShellApiInit(deps) {
 }
 function useActiveService(modules) {
   const location = useLocation2();
-  const prefixToService = useMemo5(() => {
+  const prefixToService = useMemo4(() => {
     const pairs = [];
     for (const m of modules) {
       if (m.hidden) continue;
@@ -1127,7 +1256,7 @@ function useActiveService(modules) {
     pairs.sort((a, b) => b[0].length - a[0].length);
     return pairs;
   }, [modules]);
-  const resolveServiceFromPath = useCallback2(
+  const resolveServiceFromPath = useCallback3(
     (pathname) => {
       for (const [prefix, id] of prefixToService) {
         if (pathname.startsWith(prefix)) return id;
@@ -1136,10 +1265,10 @@ function useActiveService(modules) {
     },
     [prefixToService]
   );
-  const [selectedServiceId, setSelectedServiceId] = useState2(
+  const [selectedServiceId, setSelectedServiceId] = useState4(
     () => resolveServiceFromPath(location.pathname)
   );
-  useEffect3(
+  useEffect6(
     () => setSelectedServiceId(resolveServiceFromPath(location.pathname)),
     [location.pathname, resolveServiceFromPath]
   );
@@ -1147,26 +1276,26 @@ function useActiveService(modules) {
   return { activeService, selectedServiceId, setSelectedServiceId };
 }
 function useSidePaneState2() {
-  const [sidePaneState, setSidePaneState] = useState2(
+  const [sidePaneState, setSidePaneState] = useState4(
     null
   );
-  const handleOpen = useCallback2(
+  const handleOpen = useCallback3(
     (opts) => setSidePaneState(opts),
     []
   );
-  const handleClose = useCallback2(() => setSidePaneState(null), []);
-  const handleIsOpen = useCallback2(
+  const handleClose = useCallback3(() => setSidePaneState(null), []);
+  const handleIsOpen = useCallback3(
     () => sidePaneState !== null,
     [sidePaneState]
   );
-  const handleActiveModuleId = useCallback2(
+  const handleActiveModuleId = useCallback3(
     () => sidePaneState?.moduleId ?? null,
     [sidePaneState]
   );
-  const handleSetFullWidth = useCallback2((fullWidth) => {
+  const handleSetFullWidth = useCallback3((fullWidth) => {
     setSidePaneState((prev) => prev ? { ...prev, fullWidth } : prev);
   }, []);
-  const handleToggle = useCallback2((opts) => {
+  const handleToggle = useCallback3((opts) => {
     setSidePaneState(
       (prev) => prev?.moduleId === opts.moduleId ? null : opts
     );
@@ -1202,13 +1331,13 @@ function resizeOptionsFromPanel(state, widthEntry) {
   };
 }
 function usePanelState() {
-  const [panelState, setPanelState] = useState2(null);
+  const [panelState, setPanelState] = useState4(null);
   const panelOnCloseRef = useRef2(void 0);
-  const handleOpen = useCallback2(
+  const handleOpen = useCallback3(
     (opts) => setPanelState(opts),
     []
   );
-  const handleClose = useCallback2(() => {
+  const handleClose = useCallback3(() => {
     panelOnCloseRef.current = panelState?.onClose;
     setPanelState(null);
   }, [panelState]);
@@ -1226,48 +1355,57 @@ function usePanelState() {
   };
 }
 function useDialogState() {
-  const [dialogState, setDialogState] = useState2(null);
-  const handleConfirm = useCallback2(() => {
+  const [dialogState, setDialogState] = useState4(null);
+  const handleConfirm = useCallback3(() => {
     dialogState?.resolve(true);
     setDialogState(null);
   }, [dialogState]);
-  const handleCancel = useCallback2(() => {
+  const handleCancel = useCallback3(() => {
     dialogState?.resolve(false);
     setDialogState(null);
   }, [dialogState]);
   return { dialogState, setDialogState, handleConfirm, handleCancel };
 }
-function useFeatureLookup(modules) {
-  return useMemo5(() => {
-    const map = /* @__PURE__ */ new Map();
+function useFeatureLookup(modules, record) {
+  return useMemo4(() => {
+    const declared = /* @__PURE__ */ new Map();
     for (const m of modules) {
       for (const group of m.navigation) {
         for (const link of group.links) {
-          if (link.id) map.set(link.id, link.path);
+          if (link.id) declared.set(link.id, link.path);
         }
       }
     }
-    return (featureId) => map.get(featureId) ?? null;
-  }, [modules]);
+    return (featureId) => {
+      for (const links of record.values()) {
+        const path = links.get(featureId);
+        if (path) return path;
+      }
+      return declared.get(featureId) ?? null;
+    };
+  }, [modules, record]);
 }
 function AppShell({ registry, sidebar }) {
   const navigate = useNavigate2();
   const config = useShellConfig();
   const { modules } = registry;
   const { activeService, setSelectedServiceId } = useActiveService(modules);
-  const [subNavCollapsed, setSubNavCollapsed] = useState2(false);
-  const [commandMenuOpen, setCommandMenuOpen] = useState2(false);
-  const openCommandMenu = useCallback2(() => setCommandMenuOpen(true), []);
-  const [fullscreenState, setFullscreenState] = useState2(null);
-  const handleFullscreenEnter = useCallback2(
+  const isBelowTablet = useMediaQuery("(max-width: 1023px)");
+  const subNav = useSubNavCollapse(isBelowTablet);
+  const setSubNavCollapsed = subNav.setCollapsed;
+  const [commandMenuOpen, setCommandMenuOpen] = useState4(false);
+  const openCommandMenu = useCallback3(() => setCommandMenuOpen(true), []);
+  const [fullscreenState, setFullscreenState] = useState4(null);
+  const handleFullscreenEnter = useCallback3(
     (opts) => setFullscreenState(opts),
     []
   );
-  const handleFullscreenExit = useCallback2(() => setFullscreenState(null), []);
+  const handleFullscreenExit = useCallback3(() => setFullscreenState(null), []);
   const sidePane2 = useSidePaneState2();
   const panel2 = usePanelState();
   const dialog2 = useDialogState();
-  const featureLookup = useFeatureLookup(modules);
+  const featureRecord = useRef2(/* @__PURE__ */ new Map()).current;
+  const featureLookup = useFeatureLookup(modules, featureRecord);
   useShellApiInit({
     navigate,
     openCommandMenu,
@@ -1283,7 +1421,7 @@ function AppShell({ registry, sidebar }) {
     setDialogState: dialog2.setDialogState,
     featureLookup
   });
-  const handleServiceSelect = useCallback2(
+  const handleServiceSelect = useCallback3(
     (serviceId) => {
       const service = modules.find((s) => s.id === serviceId);
       if (!service) return;
@@ -1317,7 +1455,7 @@ function AppShell({ registry, sidebar }) {
       setSubNavCollapsed
     ]
   );
-  const sidePaneContextValue = useMemo5(
+  const sidePaneContextValue = useMemo4(
     () => ({
       pane: sidePane2.sidePaneState,
       open: sidePane2.handleOpen,
@@ -1336,22 +1474,24 @@ function AppShell({ registry, sidebar }) {
   const navigationValue = {
     activeService,
     sidePaneModuleId: sidePane2.sidePaneState?.moduleId ?? null,
-    subNavCollapsed,
-    onToggleSubNav: () => setSubNavCollapsed((c) => !c),
+    subNavCollapsed: subNav.collapsed,
+    onToggleSubNav: subNav.toggle,
+    requestSubNavCollapse: subNav.requestCollapse,
     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 }),
+  return /* @__PURE__ */ jsx14(ShellModulesContext.Provider, { value: registry, children: /* @__PURE__ */ jsx14(SidePaneContext.Provider, { value: sidePaneContextValue, children: /* @__PURE__ */ jsx14(ShellNavigationContext.Provider, { value: navigationValue, children: /* @__PURE__ */ jsxs9(TooltipProvider, { children: [
+    /* @__PURE__ */ jsx14(ModuleEffects, { modules }),
+    /* @__PURE__ */ jsx14(ModuleFeatures, { modules, record: featureRecord }),
     /* @__PURE__ */ jsxs9("div", { className: "flex h-screen w-screen flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx13(TopBar, { children: config.topBar }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(TopBar, { children: config.topBar }),
+      /* @__PURE__ */ jsx14(
         CommandMenu,
         {
           open: commandMenuOpen,
           onOpenChange: setCommandMenuOpen
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         ShellBody,
         {
           activeService,
@@ -1359,8 +1499,8 @@ function AppShell({ registry, sidebar }) {
           sidebar
         }
       ),
-      config.footer && /* @__PURE__ */ jsx13(ShellFooter, { children: config.footer }),
-      dialog2.dialogState && /* @__PURE__ */ jsx13(
+      config.footer && /* @__PURE__ */ jsx14(ShellFooter, { children: config.footer }),
+      dialog2.dialogState && /* @__PURE__ */ jsx14(
         ConfirmDialog,
         {
           open: true,
@@ -1369,12 +1509,13 @@ function AppShell({ registry, sidebar }) {
           confirmLabel: dialog2.dialogState.opts.confirmLabel,
           cancelLabel: dialog2.dialogState.opts.cancelLabel,
           variant: dialog2.dialogState.opts.variant,
+          confirmText: dialog2.dialogState.opts.confirmText,
           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(
+      fullscreenState && /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 z-50 bg-background overflow-auto", children: fullscreenState.content }),
+      /* @__PURE__ */ jsx14(
         SlideOverPanel,
         {
           panelState: panel2.panelState,
@@ -1407,14 +1548,14 @@ function SlideOverPanel({
     },
     ...!panelState?.description && { "aria-describedby": void 0 }
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Sheet,
     {
       open: panelState !== null,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      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 }) })
+      children: resize.enabled ? /* @__PURE__ */ jsx14(ResizableSheetContent, { ...sheetProps, resize, children: panelState && /* @__PURE__ */ jsx14(PanelContent, { state: panelState }) }) : /* @__PURE__ */ jsx14(SheetContent, { ...sheetProps, className: `${panelWidth} max-w-[90vw]`, children: panelState && /* @__PURE__ */ jsx14(PanelContent, { state: panelState }) })
     }
   );
 }
@@ -1441,7 +1582,7 @@ function ResizableSheetContent({
       className: "max-w-[90vw]",
       style: { width: dynWidth },
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           DragHandle,
           {
             edge: "left",
@@ -1461,24 +1602,24 @@ function ShellBody({
   sidebar
 }) {
   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 }) })
+    sidebar ?? /* @__PURE__ */ jsx14(ShellRail, {}),
+    /* @__PURE__ */ jsx14(SidePane, {}),
+    sidePaneFullWidth !== true && /* @__PURE__ */ jsx14("div", { className: "flex-1 min-w-0 h-full overflow-hidden", children: /* @__PURE__ */ jsx14(ContentArea, { layout: activeService?.layout }) })
   ] });
 }
 function ContentArea({ layout }) {
   if (layout === "full") {
-    return /* @__PURE__ */ jsx13("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx13(Outlet, {}) });
+    return /* @__PURE__ */ jsx14("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx14(Outlet, {}) });
   }
-  return /* @__PURE__ */ jsx13(ScrollArea2, { className: "h-full", children: /* @__PURE__ */ jsx13("main", { className: "p-6", children: /* @__PURE__ */ jsx13(Outlet, {}) }) });
+  return /* @__PURE__ */ jsx14(ScrollArea2, { className: "h-full", children: /* @__PURE__ */ jsx14("main", { className: "p-6", children: /* @__PURE__ */ jsx14(Outlet, {}) }) });
 }
 function PanelContent({ state }) {
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment5, { 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 })
+      /* @__PURE__ */ jsx14(SheetTitle, { children: state.title }),
+      state.description && /* @__PURE__ */ jsx14(SheetDescription, { children: state.description })
+    ] }) : /* @__PURE__ */ jsx14(SheetTitle, { className: "sr-only", children: "Panel" }),
+    /* @__PURE__ */ jsx14(SheetBody, { children: state.content })
   ] });
 }
 
@@ -1486,36 +1627,36 @@ function PanelContent({ state }) {
 import { Toaster } from "sonner";
 
 // src/ShellConfigProvider.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ShellConfigProvider({
   config,
   children
 }) {
-  return /* @__PURE__ */ jsx14(ShellConfigContext.Provider, { value: config, children });
+  return /* @__PURE__ */ jsx15(ShellConfigContext.Provider, { value: config, children });
 }
 
 // src/RootLayout.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, 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 })
+    /* @__PURE__ */ jsx16(Toaster, { position: "top-right", richColors: true, closeButton: true }),
+    /* @__PURE__ */ jsx16(AppShell, { registry, sidebar })
   ] });
 }
 
 // src/PlaceholderPage.tsx
 import { useLocation as useLocation3 } from "react-router-dom";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function PlaceholderPage() {
   const { pathname } = useLocation3();
   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" }) })
+    /* @__PURE__ */ jsx17("h1", { className: "mb-1", children: pathToTitle(pathname) }),
+    /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground mb-6", children: pathname }),
+    /* @__PURE__ */ jsx17("div", { className: "rounded-lg border-2 border-dashed border-border p-12 flex items-center justify-center", children: /* @__PURE__ */ jsx17("span", { className: "text-sm text-muted-foreground", children: "Content area \u2014 not yet implemented" }) })
   ] });
 }
 function pathToTitle(path) {
@@ -1524,46 +1665,148 @@ function pathToTitle(path) {
   return last.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
 
-// src/Sidebar.tsx
+// src/Breadcrumbs.tsx
+import { useContext as useContext5 } from "react";
+import { Link as Link2 } from "react-router-dom";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
 import { cn as cn6 } from "@petrarca/sonnet-core";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var ELLIPSIS = { label: "\u2026" };
+function useTrail({
+  items,
+  omitModule,
+  maxItems
+}) {
+  const navigation2 = useContext5(ShellNavigationContext);
+  const module = navigation2?.activeService;
+  const root = !omitModule && module ? [{ label: module.label, to: module.basePath }] : [];
+  const trail = [...root, ...items];
+  if (trail.length <= maxItems || maxItems < 3) return trail;
+  return [trail[0], ELLIPSIS, ...trail.slice(trail.length - 2)];
+}
+function titleOf(label) {
+  return typeof label === "string" ? label : void 0;
+}
+function Crumb({
+  item,
+  current
+}) {
+  const text = /* @__PURE__ */ jsx18("span", { className: "truncate max-w-[18rem]", children: item.label });
+  if (current || !item.to) {
+    return /* @__PURE__ */ jsx18(
+      "span",
+      {
+        className: cn6(
+          "inline-flex min-w-0",
+          current ? "text-foreground font-medium" : "text-muted-foreground"
+        ),
+        "aria-current": current ? "page" : void 0,
+        title: titleOf(item.label),
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx18(
+    Link2,
+    {
+      to: item.to,
+      className: "inline-flex min-w-0 text-muted-foreground hover:text-foreground transition-colors",
+      title: titleOf(item.label),
+      children: text
+    }
+  );
+}
+function Breadcrumbs({
+  items,
+  omitModule = false,
+  maxItems = 5,
+  className
+}) {
+  const trail = useTrail({ items, omitModule, maxItems });
+  return /* @__PURE__ */ jsx18("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx18("ol", { className: "flex items-center gap-1.5 text-sm min-w-0", children: trail.map((item, index) => {
+    const current = index === trail.length - 1;
+    return /* @__PURE__ */ jsxs12(
+      "li",
+      {
+        className: "inline-flex items-center gap-1.5 min-w-0",
+        children: [
+          /* @__PURE__ */ jsx18(Crumb, { item, current }),
+          !current && /* @__PURE__ */ jsx18(
+            ChevronRight2,
+            {
+              className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+              "aria-hidden": true
+            }
+          )
+        ]
+      },
+      index
+    );
+  }) }) });
+}
+
+// src/DrillDownHeader.tsx
+import { cn as cn7 } from "@petrarca/sonnet-core";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+function DrillDownHeader({
+  breadcrumbs,
+  title,
+  adornment,
+  actions,
+  subtitle,
+  className
+}) {
+  return /* @__PURE__ */ jsxs13("header", { className: cn7("mb-4", className), children: [
+    /* @__PURE__ */ jsx19(Breadcrumbs, { items: breadcrumbs, className: "mb-3" }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 mb-1 min-w-0", children: [
+      /* @__PURE__ */ jsx19("h1", { className: "truncate", children: title }),
+      adornment,
+      actions && /* @__PURE__ */ jsx19("div", { className: "ml-auto flex items-center gap-2 shrink-0", children: actions })
+    ] }),
+    subtitle && /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: subtitle })
+  ] });
+}
+
+// src/Sidebar.tsx
+import { cn as cn8 } from "@petrarca/sonnet-core";
 import { ScrollArea as ScrollArea3 } from "@petrarca/sonnet-ui";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function Sidebar({
   children,
   header,
   width = 260,
   className
 }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "aside",
     {
       style: { width },
-      className: cn6(
+      className: cn8(
         "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 }) })
+        /* @__PURE__ */ jsx20(ScrollArea3, { className: "flex-1", children: /* @__PURE__ */ jsx20("nav", { className: "px-1.5 py-2 space-y-3", children }) })
       ]
     }
   );
 }
 
 // src/ShellSidebar.tsx
-import React5, { useMemo as useMemo6 } from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import React8, { useMemo as useMemo5 } from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function ShellSidebar({
   bottomGroupLabel = "Tools",
   ...sidebarProps
 }) {
   const { mainModules, bottomModules } = useShellModules();
   const { resolveCapability, capabilityPolicy } = useShellConfig();
-  const policy = useMemo6(
+  const policy = useMemo5(
     () => resolveCapabilityPolicy(capabilityPolicy),
     [capabilityPolicy]
   );
-  const effectOf = React5.useCallback(
+  const effectOf = React8.useCallback(
     (moduleId) => {
       const module = [...mainModules, ...bottomModules].find(
         (m) => m.id === moduleId
@@ -1584,8 +1827,8 @@ function ShellSidebar({
       reason
     }));
   });
-  return /* @__PURE__ */ jsxs13(Sidebar, { ...sidebarProps, children: [
-    topNavItems.length > 0 && /* @__PURE__ */ jsx18(SidebarGroup, { separator: true, children: topNavItems.map(({ link, icon, disabled, reason }) => /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs15(Sidebar, { ...sidebarProps, children: [
+    topNavItems.length > 0 && /* @__PURE__ */ jsx21(SidebarGroup, { separator: true, children: topNavItems.map(({ link, icon, disabled, reason }) => /* @__PURE__ */ jsx21(
       SidebarItem,
       {
         icon,
@@ -1600,63 +1843,21 @@ function ShellSidebar({
     mainModules.map((mod) => {
       const { effect, reason } = effectOf(mod.id);
       if (effect === "hidden" || effect === "redirect") return null;
-      const disabled = effect === "disabled";
-      const title = disabled ? reason : void 0;
-      if (mod.navigation.length === 0) {
-        return /* @__PURE__ */ jsx18(
-          SidebarItem,
-          {
-            icon: mod.icon,
-            label: mod.label,
-            path: mod.basePath,
-            disabled,
-            title
-          },
-          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,
-                  disabled,
-                  title: disabled ? reason : void 0
-                },
-                link.path
-              ))
-            },
-            group.id
-          )
-        ] : group.links.map((link) => /* @__PURE__ */ jsx18(
-          SidebarItem,
-          {
-            icon: mod.icon,
-            label: link.label,
-            path: link.path,
-            badge: link.badge,
-            disabled,
-            title: disabled ? reason : void 0
-          },
-          link.path
-        ))
-      ]) }, mod.id);
+      return /* @__PURE__ */ jsx21(
+        ModuleSection,
+        {
+          mod,
+          disabled: effect === "disabled",
+          reason
+        },
+        mod.id
+      );
     }),
-    bottomModules.length > 0 && /* @__PURE__ */ jsx18(SidebarGroup, { heading: bottomGroupLabel, collapsible: true, children: bottomModules.map((mod) => {
+    bottomModules.length > 0 && /* @__PURE__ */ jsx21(SidebarGroup, { heading: bottomGroupLabel, collapsible: true, children: bottomModules.map((mod) => {
       const { effect, reason } = effectOf(mod.id);
       if (effect === "hidden" || effect === "redirect") return null;
       const disabled = effect === "disabled";
-      return /* @__PURE__ */ jsx18(
+      return /* @__PURE__ */ jsx21(
         SidebarItem,
         {
           icon: mod.icon,
@@ -1670,16 +1871,61 @@ function ShellSidebar({
     }) })
   ] });
 }
+function ModuleSection({
+  mod,
+  disabled,
+  reason
+}) {
+  const navigation2 = useModuleNavigation(mod);
+  const title = disabled ? reason : void 0;
+  if (navigation2.length === 0) {
+    return /* @__PURE__ */ jsx21(
+      SidebarItem,
+      {
+        icon: mod.icon,
+        label: mod.label,
+        path: mod.basePath,
+        disabled,
+        title
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx21(SidebarGroup, { heading: mod.label, collapsible: true, children: navigation2.flatMap((group) => {
+    const items = group.links.map((link) => /* @__PURE__ */ jsx21(
+      SidebarItem,
+      {
+        icon: mod.icon,
+        label: link.label,
+        path: link.path,
+        badge: link.badge,
+        disabled,
+        title
+      },
+      link.path
+    ));
+    return group.heading ? [
+      /* @__PURE__ */ jsx21(
+        SidebarGroup,
+        {
+          heading: group.heading,
+          collapsible: group.collapsible,
+          children: items
+        },
+        group.id
+      )
+    ] : items;
+  }) });
+}
 
 // src/ShellVersion.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } 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: [
+  return /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx22("span", { children: name }),
+    version && /* @__PURE__ */ jsxs16("span", { className: "text-tertiary-foreground", children: [
       "v",
       version
     ] })
@@ -1689,9 +1935,9 @@ function ShellVersion({
 // src/SearchTrigger.tsx
 import { Search } from "lucide-react";
 import { Button as Button3 } from "@petrarca/sonnet-ui";
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function SearchTrigger() {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     Button3,
     {
       variant: "outline",
@@ -1699,10 +1945,10 @@ function SearchTrigger() {
       className: "h-8 gap-2 text-sm text-muted-foreground w-56 justify-start",
       onClick: () => navigation.openCommandMenu(),
       children: [
-        /* @__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" }),
+        /* @__PURE__ */ jsx23(Search, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx23("span", { children: "Search..." }),
+        /* @__PURE__ */ jsxs17("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__ */ jsx23("span", { className: "text-xs", children: "\u2318" }),
           "K"
         ] })
       ]
@@ -1710,9 +1956,32 @@ function SearchTrigger() {
   );
 }
 
+// src/ThemeToggle.tsx
+import { Moon, Sun } from "lucide-react";
+import { Button as Button4 } from "@petrarca/sonnet-ui";
+import { useTheme } from "@petrarca/sonnet-core/hooks";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const dark = theme === "dark";
+  const label = dark ? "Switch to light mode" : "Switch to dark mode";
+  return /* @__PURE__ */ jsx24(
+    Button4,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "h-8 w-8",
+      "aria-label": label,
+      title: label,
+      onClick: () => setTheme(dark ? "light" : "dark"),
+      children: dark ? /* @__PURE__ */ jsx24(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx24(Moon, { className: "h-4 w-4" })
+    }
+  );
+}
+
 // src/UserMenu.tsx
 import { LogOut, User } from "lucide-react";
-import { Button as Button4 } from "@petrarca/sonnet-ui";
+import { Button as Button5 } from "@petrarca/sonnet-ui";
 import { Avatar, AvatarFallback } from "@petrarca/sonnet-ui";
 import {
   DropdownMenu,
@@ -1722,23 +1991,23 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function UserMenu({ user, onSignOut }) {
-  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 })
+  return /* @__PURE__ */ jsxs18(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(Button5, { variant: "ghost", size: "compact", className: "rounded-full", children: /* @__PURE__ */ jsx25(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx25(AvatarFallback, { className: "text-xs", children: user.initials }) }) }) }),
+    /* @__PURE__ */ jsxs18(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsx25(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium", children: user.name }),
+        /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: user.email })
       ] }) }),
-      /* @__PURE__ */ jsx21(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxs16(DropdownMenuItem, { children: [
-        /* @__PURE__ */ jsx21(User, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ jsx25(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs18(DropdownMenuItem, { children: [
+        /* @__PURE__ */ jsx25(User, { className: "mr-2 h-4 w-4" }),
         "Profile"
       ] }),
-      /* @__PURE__ */ jsx21(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxs16(DropdownMenuItem, { onSelect: onSignOut, children: [
-        /* @__PURE__ */ jsx21(LogOut, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ jsx25(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs18(DropdownMenuItem, { onSelect: onSignOut, children: [
+        /* @__PURE__ */ jsx25(LogOut, { className: "mr-2 h-4 w-4" }),
         "Sign out"
       ] })
     ] })
@@ -1750,7 +2019,6 @@ function createModuleRegistry(modules) {
   const visible = modules.filter((m) => !m.hidden);
   const mainModules = visible.filter((m) => !m.pinBottom);
   const bottomModules = visible.filter((m) => m.pinBottom);
-  const allRoutes = modules.flatMap((m) => m.routes);
   const contributionsByPoint = /* @__PURE__ */ new Map();
   for (const m of modules) {
     for (const c of m.contributions ?? []) {
@@ -1765,17 +2033,57 @@ function createModuleRegistry(modules) {
   function getExtensionPoint(name) {
     return contributionsByPoint.get(name) ?? [];
   }
+  const allRoutes = nestContributedRoutes(
+    modules.flatMap((m) => m.routes),
+    contributionsByPoint
+  );
   return { modules, mainModules, bottomModules, allRoutes, getExtensionPoint };
 }
+function nestContributedRoutes(routes, contributionsByPoint) {
+  const hosted = /* @__PURE__ */ new Set();
+  function nest(route) {
+    if (route.index) return route;
+    const pages = (contributionsByPoint.get(route.id ?? "") ?? []).filter(
+      (c) => c.element !== void 0
+    );
+    const children = route.children?.map(nest);
+    if (pages.length === 0) {
+      return children ? { ...route, children } : route;
+    }
+    hosted.add(route.id);
+    const contributed = pages.map((c) => ({
+      path: c.path,
+      element: c.element
+    }));
+    return { ...route, children: [...children ?? [], ...contributed] };
+  }
+  const nested = routes.map(nest);
+  for (const [point, list] of contributionsByPoint) {
+    if (!hosted.has(point) && list.some((c) => c.element !== void 0)) {
+      throw new Error(
+        `Pages are contributed to extension point "${point}", but no route has id "${point}" to host them.`
+      );
+    }
+  }
+  return nested;
+}
+
+// src/contributionPath.ts
+function contributionPath(path, params) {
+  return path.replace(
+    /:([A-Za-z_][A-Za-z0-9_]*)/g,
+    (token, name) => name in params ? encodeURIComponent(params[name]) : token
+  );
+}
 
 // src/OverviewCard.tsx
-import { cn as cn7 } from "@petrarca/sonnet-core";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { cn as cn9 } from "@petrarca/sonnet-core";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function FeatureLink({
   feature,
   children
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx26(
     "span",
     {
       role: "link",
@@ -1801,37 +2109,51 @@ function OverviewCard({
   title,
   description,
   feature,
+  path,
   className
 }) {
-  return /* @__PURE__ */ jsxs17(
+  const go = feature ? () => navigation.goToFeature(feature) : path ? () => navigation.goTo(path) : void 0;
+  return /* @__PURE__ */ jsxs19(
     "button",
     {
-      onClick: feature ? () => navigation.goToFeature(feature) : void 0,
-      disabled: !feature,
-      className: cn7(
+      onClick: go,
+      disabled: !go,
+      className: cn9(
         "rounded-lg border bg-card p-5 text-left flex flex-col gap-3",
         "disabled:cursor-default",
-        feature && "hover:bg-accent/50 transition-colors",
+        go && "hover:bg-accent/50 transition-colors",
         className
       ),
       children: [
-        /* @__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 })
+        /* @__PURE__ */ jsx26("div", { className: "h-9 w-9 rounded-md bg-blue-50 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx26(Icon, { className: "h-5 w-5 text-blue-600" }) }),
+        /* @__PURE__ */ jsxs19("div", { children: [
+          /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium mb-1", children: title }),
+          /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground leading-relaxed", children: description })
         ] })
       ]
     }
   );
 }
+function OverviewGroupHeading({
+  heading,
+  description
+}) {
+  return /* @__PURE__ */ jsxs19("div", { className: "mb-3", children: [
+    /* @__PURE__ */ jsx26("h2", { className: "text-sm font-semibold text-foreground", children: heading }),
+    description && /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: description })
+  ] });
+}
 export {
   AppShell,
+  Breadcrumbs,
   CommandMenu,
   ConfirmDialog,
   DEFAULT_CAPABILITY_POLICY,
+  DrillDownHeader,
   FeatureLink,
   IconRail,
   OverviewCard,
+  OverviewGroupHeading,
   PlaceholderPage,
   RailIcon,
   RailSeparator,
@@ -1848,8 +2170,10 @@ export {
   SidebarGroup,
   SidebarItem,
   SubNavPanel,
+  ThemeToggle,
   TopBar,
   UserMenu,
+  contributionPath,
   createModuleRegistry,
   dialog,
   evaluateModule,
@@ -1866,8 +2190,11 @@ export {
   panel,
   resolveCapabilityPolicy,
   sidePane,
+  useCollapsedSubNav,
+  useContributedComponent,
   useExtensionPoint,
   useMainModules,
+  useModuleNavigation,
   useShellConfig,
   useShellEvent,
   useShellModules,