@flanksource/clicky-ui 0.3.55 → 0.3.56

package/dist/layout/AppShell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.cjs","names":["useState","NavSections","cn","AppShellSlotOutlines","Icon","UiSidebar","UiMenu","_Fragment","contentWidthClassName","SplitPane","UiClose"],"sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport type { DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections, type GroupState } from \"./AppShell.nav\";\nimport type { AppShellNavDrag } from \"./AppShell.nav.drag\";\nimport { contentWidthClassName, type ContentWidth } from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Additional searchable text for a tree destination. */\n  searchText?: string;\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened by right-click, the Context Menu key, or Shift+F10. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n};\n\nexport type AppShellNavGroup = {\n  /** Stable key; also the key its collapsed state persists under. */\n  key: string;\n  /** Group heading rendered on the toggle row. */\n  label: string;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Trailing adornment (aggregate count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened from the group heading's context menu. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n  /** Folded on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  /**\n   * Keeps the group open regardless of stored state, so a deep-linked\n   * destination can never hide under a folder the user collapsed earlier.\n   * Set it on the active item's ancestors.\n   */\n  forceExpanded?: boolean;\n  items: AppShellNavItem[];\n  /**\n   * Nested sub-groups, rendered after `items` at one further indent. Groups\n   * nest arbitrarily, so a backend hierarchy deeper than two levels does not\n   * have to be flattened to fit the rail.\n   */\n  groups?: AppShellNavGroup[];\n  /**\n   * Makes the group's own heading row a destination as well as a disclosure:\n   * the label becomes a nav link and the chevron sits beside it as a separate\n   * control. Needed wherever a node is both a folder and a leaf — e.g. a\n   * profile named `jms` that is runnable *and* the parent of `jms.incoming`.\n   */\n  item?: AppShellNavItem;\n};\n\nexport type AppShellNavSection = {\n  /** Show a loading message instead of an empty tree while data is being fetched. */\n  loading?: boolean;\n  /** Optional controlled search for tree navigation. */\n  search?: { value: string; onChange: (value: string) => void; label?: string };\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items?: AppShellNavItem[];\n  /** Collapsible groups rendered after the flat items. High-cardinality\n   *  clusters (provider surfaces, per-ledger journals) belong here so they can\n   *  be folded away; a collapsed rail flattens them back to plain items. */\n  groups?: AppShellNavGroup[];\n  /**\n   * How the groups read.\n   *\n   * `\"list\"` (the default) styles each group heading as a small uppercase\n   * cluster label — right for a handful of named clusters under one section.\n   *\n   * `\"tree\"` styles headings as ordinary nav rows, because in a tree a folder\n   * sits at the same level as its sibling destinations: a group carrying an\n   * `item` renders as a link either way, so an uppercase heading beside it\n   * would make two nodes of the same kind look like different things.\n   */\n  variant?: \"list\" | \"tree\";\n  /**\n   * Makes the section's rows draggable onto one another, so a hierarchy can be\n   * rearranged in place. The section stays the boundary — a row never lands in\n   * a different section — and the consumer owns what a move means. Ignored\n   * while the rail is collapsed, where there are no folder rows to aim at.\n   */\n  drag?: AppShellNavDrag;\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-shell:groups\";\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\"\n      ? (parsed as Record<string, boolean>)\n      : {};\n  } catch {\n    return {};\n  }\n}\n\n// Lives here rather than in AppShell.nav so a single instance can be shared by\n// both NavSections renders (rail + mobile drawer).\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() =>\n    readGroupState(storageKey),\n  );\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Rail state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) =>\n      setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    groupCollapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  // One instance for the rail AND the mobile drawer: both render NavSections,\n  // and per-render state behind a shared storage key would desync.\n  const groupState = useGroupCollapsed(\n    groupCollapsedStorageKey ?? DEFAULT_GROUP_COLLAPSE_KEY,\n  );\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (\n    collapsedValue: boolean,\n    onNavigate?: () => void,\n  ) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          data-collapsed={collapsed}\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div\n                data-slot=\"app-shell-brand\"\n                className=\"flex min-w-0 items-center gap-2\"\n              >\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            <div\n              className={cn(\n                hasSidebar\n                  ? \"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:h-14 md:flex-nowrap md:gap-density-3 md:px-density-4 md:py-0\"\n                  : // Wraps rather than squeezing. The nav shrinks and the\n                    // actions cluster does not, so on a laptop a full actions\n                    // row left the nav a sliver — every tab but the first\n                    // scrolled out of sight. A second line costs 44px and only\n                    // appears when the row genuinely cannot fit.\n                    \"flex min-h-14 flex-wrap items-center gap-density-3 px-density-4\",\n                headerClassName,\n              )}\n            >\n              {hasSidebar && (\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent md:hidden\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n              )}\n              {brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className={cn(\n                    \"min-w-0 items-center gap-density-2\",\n                    hasSidebar ? \"flex flex-1 md:hidden\" : \"flex shrink-0\",\n                  )}\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div\n                  data-slot=\"app-shell-nav\"\n                  className={cn(\n                    // The nav is the only header slot that both shrinks\n                    // (min-w-0) and holds wide content, while the actions\n                    // cluster beside it is shrink-0. Give a full actions row\n                    // and this box collapses to a sliver — so it needs a guard,\n                    // or its tabs paint straight over the toolbar next to it\n                    // and both become unreadable. Scrolling keeps every tab\n                    // reachable; overflowing keeps none of them.\n                    \"flex min-w-0 items-center overflow-x-auto\",\n                    hasSidebar && \"order-3 basis-full md:order-none md:basis-auto\",\n                  )}\n                >\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className={cn(\n                    \"flex min-w-0 flex-1 justify-center\",\n                    hasSidebar &&\n                      \"order-2 basis-full md:order-none md:basis-auto md:flex-1\",\n                  )}\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && (\n                <div\n                  className={cn(\"flex-1\", hasSidebar && \"hidden md:block\")}\n                />\n              )}\n              {(actions !== undefined ||\n                (hasSidebar && mobileActions !== undefined)) && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className={cn(\n                    \"flex shrink-0 items-center gap-density-2\",\n                    // Below md the cluster must never be wider than the\n                    // phone: a shrink-0 row that overflows widens the layout\n                    // viewport, and then every fixed overlay on the page\n                    // loses its right edge. Let it shrink and scroll its own\n                    // contents instead, the same guard the nav slot has.\n                    \"max-md:min-w-0 max-md:max-w-full max-md:shrink max-md:overflow-x-auto\",\n                    hasSidebar && \"order-1 ml-auto md:order-none md:ml-0\",\n                  )}\n                >\n                  {!hasSidebar || mobileActions === undefined ? (\n                    actions\n                  ) : (\n                    <>\n                      <div className=\"hidden items-center gap-density-2 md:flex\">\n                        {actions}\n                      </div>\n                      <div className=\"flex items-center gap-density-2 md:hidden\">\n                        {mobileActions}\n                      </div>\n                    </>\n                  )}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <SplitPane\n            stackOnMobile\n            className=\"min-h-0 flex-1\"\n            defaultSplit={bodySplit}\n            minLeft={12}\n            minRight={30}\n            left={\n              <div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">\n                {bodySidebar}\n              </div>\n            }\n            right={\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"h-full min-h-0 min-w-0 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            }\n            leftClass=\"max-h-[40vh] shrink-0 border-b border-border md:max-h-none md:border-b-0\"\n            rightClass=\"min-h-0 flex-1 md:flex-none\"\n          />\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && (\n                <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n              )}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AppShell.cjs","names":["useState","NavSections","cn","AppShellSlotOutlines","Icon","UiSidebar","UiMenu","_Fragment","contentWidthClassName","SplitPane","UiArrowLeft","UiClose"],"sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiArrowLeft, UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport type { DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections, type GroupState } from \"./AppShell.nav\";\nimport type { AppShellNavDrag } from \"./AppShell.nav.drag\";\nimport { contentWidthClassName, type ContentWidth } from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Additional searchable text for a tree destination. */\n  searchText?: string;\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened by right-click, the Context Menu key, or Shift+F10. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n};\n\nexport type AppShellNavGroup = {\n  /** Stable key; also the key its collapsed state persists under. */\n  key: string;\n  /** Group heading rendered on the toggle row. */\n  label: string;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Trailing adornment (aggregate count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened from the group heading's context menu. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n  /** Folded on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  /**\n   * Keeps the group open regardless of stored state, so a deep-linked\n   * destination can never hide under a folder the user collapsed earlier.\n   * Set it on the active item's ancestors.\n   */\n  forceExpanded?: boolean;\n  items: AppShellNavItem[];\n  /**\n   * Nested sub-groups, rendered after `items` at one further indent. Groups\n   * nest arbitrarily, so a backend hierarchy deeper than two levels does not\n   * have to be flattened to fit the rail.\n   */\n  groups?: AppShellNavGroup[];\n  /**\n   * Makes the group's own heading row a destination as well as a disclosure:\n   * the label becomes a nav link and the chevron sits beside it as a separate\n   * control. Needed wherever a node is both a folder and a leaf — e.g. a\n   * profile named `jms` that is runnable *and* the parent of `jms.incoming`.\n   */\n  item?: AppShellNavItem;\n};\n\nexport type AppShellNavSection = {\n  /** Show a loading message instead of an empty tree while data is being fetched. */\n  loading?: boolean;\n  /** Optional controlled search for tree navigation. */\n  search?: { value: string; onChange: (value: string) => void; label?: string };\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items?: AppShellNavItem[];\n  /** Collapsible groups rendered after the flat items. High-cardinality\n   *  clusters (provider surfaces, per-ledger journals) belong here so they can\n   *  be folded away; a collapsed rail flattens them back to plain items. */\n  groups?: AppShellNavGroup[];\n  /**\n   * How the groups read.\n   *\n   * `\"list\"` (the default) renders groups as navigation rows with a trailing\n   * disclosure and indented children. Section labels provide the cluster headings.\n   *\n   * `\"tree\"` styles headings as ordinary nav rows, because in a tree a folder\n   * sits at the same level as its sibling destinations: a group carrying an\n   * `item` renders as a link either way, so an uppercase heading beside it\n   * would make two nodes of the same kind look like different things.\n   */\n  variant?: \"list\" | \"tree\";\n  /**\n   * Makes the section's rows draggable onto one another, so a hierarchy can be\n   * rearranged in place. The section stays the boundary — a row never lands in\n   * a different section — and the consumer owns what a move means. Ignored\n   * while the rail is collapsed, where there are no folder rows to aim at.\n   */\n  drag?: AppShellNavDrag;\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /**\n   * Pages a narrow body (under 48rem) between bodySidebar and body-main\n   * instead of stacking them: only this pane shows, full height. A list/detail\n   * host passes \"main\" while an item is selected and \"sidebar\" otherwise.\n   * Wide layouts always show both panes.\n   */\n  bodyPane?: \"sidebar\" | \"main\";\n  /** With `bodyPane=\"main\"`, a narrow body shows a back bar that calls this (e.g. to clear the selection). */\n  onBodyBack?: () => void;\n  /** Label of the narrow back bar. Defaults to \"Back\". */\n  bodyBackLabel?: string;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-shell:groups\";\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\"\n      ? (parsed as Record<string, boolean>)\n      : {};\n  } catch {\n    return {};\n  }\n}\n\n// Lives here rather than in AppShell.nav so a single instance can be shared by\n// both NavSections renders (rail + mobile drawer).\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() =>\n    readGroupState(storageKey),\n  );\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Rail state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) =>\n      setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    groupCollapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    bodyPane,\n    onBodyBack,\n    bodyBackLabel = \"Back\",\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  // One instance for the rail AND the mobile drawer: both render NavSections,\n  // and per-render state behind a shared storage key would desync.\n  const groupState = useGroupCollapsed(\n    groupCollapsedStorageKey ?? DEFAULT_GROUP_COLLAPSE_KEY,\n  );\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (\n    collapsedValue: boolean,\n    onNavigate?: () => void,\n  ) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"@container/app-shell flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          data-collapsed={collapsed}\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 @3xl/app-shell:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div\n                data-slot=\"app-shell-brand\"\n                className=\"flex min-w-0 items-center gap-2\"\n              >\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            <div\n              className={cn(\n                hasSidebar\n                  ? \"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 @3xl/app-shell:h-14 @3xl/app-shell:flex-nowrap @3xl/app-shell:gap-density-3 @3xl/app-shell:px-density-4 @3xl/app-shell:py-0\"\n                  : // Wraps rather than squeezing. The nav shrinks and the\n                    // actions cluster does not, so on a laptop a full actions\n                    // row left the nav a sliver — every tab but the first\n                    // scrolled out of sight. A second line costs 44px and only\n                    // appears when the row genuinely cannot fit.\n                    \"flex min-h-14 flex-wrap items-center gap-density-3 px-density-4\",\n                headerClassName,\n              )}\n            >\n              {hasSidebar && (\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent @3xl/app-shell:hidden\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n              )}\n              {brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className={cn(\n                    \"min-w-0 items-center gap-density-2\",\n                    hasSidebar ? \"flex flex-1 @3xl/app-shell:hidden\" : \"flex shrink-0\",\n                  )}\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div\n                  data-slot=\"app-shell-nav\"\n                  className={cn(\n                    // The nav is the only header slot that both shrinks\n                    // (min-w-0) and holds wide content, while the actions\n                    // cluster beside it is shrink-0. Give a full actions row\n                    // and this box collapses to a sliver — so it needs a guard,\n                    // or its tabs paint straight over the toolbar next to it\n                    // and both become unreadable. Scrolling keeps every tab\n                    // reachable; overflowing keeps none of them.\n                    \"flex min-w-0 items-center overflow-x-auto\",\n                    hasSidebar && \"order-3 basis-full @3xl/app-shell:order-none @3xl/app-shell:basis-auto\",\n                  )}\n                >\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className={cn(\n                    \"flex min-w-0 flex-1 justify-center\",\n                    hasSidebar &&\n                      \"order-2 basis-full @3xl/app-shell:order-none @3xl/app-shell:basis-auto @3xl/app-shell:flex-1\",\n                  )}\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && (\n                <div\n                  className={cn(\"flex-1\", hasSidebar && \"hidden @3xl/app-shell:block\")}\n                />\n              )}\n              {(actions !== undefined ||\n                (hasSidebar && mobileActions !== undefined)) && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className={cn(\n                    \"flex shrink-0 items-center gap-density-2\",\n                    // Below md the cluster must never be wider than the\n                    // phone: a shrink-0 row that overflows widens the layout\n                    // viewport, and then every fixed overlay on the page\n                    // loses its right edge. Let it shrink and scroll its own\n                    // contents instead, the same guard the nav slot has.\n                    \"@max-3xl/app-shell:min-w-0 @max-3xl/app-shell:max-w-full @max-3xl/app-shell:shrink @max-3xl/app-shell:overflow-x-auto\",\n                    hasSidebar && \"order-1 ml-auto @3xl/app-shell:order-none @3xl/app-shell:ml-0\",\n                  )}\n                >\n                  {!hasSidebar || mobileActions === undefined ? (\n                    actions\n                  ) : (\n                    <>\n                      <div className=\"hidden items-center gap-density-2 @3xl/app-shell:flex\">\n                        {actions}\n                      </div>\n                      <div className=\"flex items-center gap-density-2 @3xl/app-shell:hidden\">\n                        {mobileActions}\n                      </div>\n                    </>\n                  )}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 @3xl/app-shell:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 @3xl/app-shell:flex-row @3xl/app-shell:items-start @3xl/app-shell:justify-between @3xl/app-shell:gap-density-3 @3xl/app-shell:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <SplitPane\n            stackOnMobile\n            {...(bodyPane ? { mobilePane: bodyPane === \"sidebar\" ? \"left\" : \"right\" } : {})}\n            className=\"min-h-0 flex-1\"\n            defaultSplit={bodySplit}\n            minLeft={12}\n            minRight={30}\n            left={\n              <div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">\n                {bodySidebar}\n              </div>\n            }\n            right={\n              <div className=\"flex h-full min-h-0 min-w-0 flex-col\">\n                {bodyPane === \"main\" && onBodyBack && (\n                  <div\n                    data-slot=\"app-shell-body-back\"\n                    className=\"shrink-0 border-b border-border px-density-2 @3xl/split-pane:hidden\"\n                  >\n                    <button\n                      type=\"button\"\n                      onClick={onBodyBack}\n                      className=\"inline-flex min-h-11 items-center gap-density-2 rounded-md px-density-2 text-sm font-medium text-muted-foreground hover:text-foreground\"\n                    >\n                      <Icon icon={UiArrowLeft} className=\"h-4 w-4\" />\n                      {bodyBackLabel}\n                    </button>\n                  </div>\n                )}\n                <main\n                  data-slot=\"app-shell-main\"\n                  className={cn(\n                    \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                    contentClassName,\n                  )}\n                >\n                  {children}\n                </main>\n              </div>\n            }\n            {...(bodyPane ? {} : { leftClass: \"max-h-[40vh]\" })}\n          />\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 @3xl/app-shell:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && (\n                <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n              )}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layout/AppShell.d.ts

@@ -80,8 +80,8 @@ export type AppShellNavSection = {
     /**
      * How the groups read.
      *
-     * `"list"` (the default) styles each group heading as a small uppercase
-     * cluster label — right for a handful of named clusters under one section.
+     * `"list"` (the default) renders groups as navigation rows with a trailing
+     * disclosure and indented children. Section labels provide the cluster headings.
      *
      * `"tree"` styles headings as ordinary nav rows, because in a tree a folder
      * sits at the same level as its sibling destinations: a group carrying an
@@ -142,6 +142,17 @@ export type AppShellProps = {
     bodySidebar?: ReactNode;
     /** bodySidebar width as a percent when present. Defaults to 24. */
     bodySplit?: number;
+    /**
+     * Pages a narrow body (under 48rem) between bodySidebar and body-main
+     * instead of stacking them: only this pane shows, full height. A list/detail
+     * host passes "main" while an item is selected and "sidebar" otherwise.
+     * Wide layouts always show both panes.
+     */
+    bodyPane?: "sidebar" | "main";
+    /** With `bodyPane="main"`, a narrow body shows a back bar that calls this (e.g. to clear the selection). */
+    onBodyBack?: () => void;
+    /** Label of the narrow back bar. Defaults to "Back". */
+    bodyBackLabel?: string;
     /** Main content (body-main); fills the remaining space and scrolls. */
     children: ReactNode;
     /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */

package/dist/layout/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.tsx"],"names":[],"mappings":"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"}

package/dist/layout/AppShell.js

@@ -1,6 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { UiClose } from "../icons/components/UiClose.js";
 import { UiMenu } from "../icons/components/UiMenu.js";
+import { UiArrowLeft } from "../icons/components/UiArrowLeft.js";
 import { UiSidebar } from "../icons/components/UiSidebar.js";
 import { Icon } from "../data/Icon.js";
 import { useEscapeLayer } from "../overlay/modalStack.js";
@@ -44,7 +45,7 @@ function useGroupCollapsed(storageKey) {
 	};
 }
 function AppShell(props) {
-	const { brand, nav, search, actions, mobileActions, toolbar, searchMaxWidth = "28rem", navSections, sidebar, sidebarHeader, sidebarFooter, collapsible = true, defaultCollapsed = false, collapsedStorageKey, groupCollapsedStorageKey, sidebarWidth = 240, collapsedWidth = 56, mobileSidebarLabel = "Navigation", bodyHeader, bodyActions, bodySidebar, bodySplit = 24, children, contentWidth = "contained", debugSlots = false, className, headerClassName, toolbarClassName, sidebarClassName, bodyHeaderClassName, contentClassName } = props;
+	const { brand, nav, search, actions, mobileActions, toolbar, searchMaxWidth = "28rem", navSections, sidebar, sidebarHeader, sidebarFooter, collapsible = true, defaultCollapsed = false, collapsedStorageKey, groupCollapsedStorageKey, sidebarWidth = 240, collapsedWidth = 56, mobileSidebarLabel = "Navigation", bodyHeader, bodyActions, bodySidebar, bodySplit = 24, bodyPane, onBodyBack, bodyBackLabel = "Back", children, contentWidth = "contained", debugSlots = false, className, headerClassName, toolbarClassName, sidebarClassName, bodyHeaderClassName, contentClassName } = props;
 	const hasSidebar = sidebar !== void 0 || (navSections?.length ?? 0) > 0;
 	const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 	const [collapsed, setCollapsed] = useState(() => readStored(collapsedStorageKey) === "true" || readStored(collapsedStorageKey) === null && defaultCollapsed);
@@ -65,7 +66,7 @@ function AppShell(props) {
 		...onNavigate ? { onNavigate } : {}
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex h-full min-h-0 w-full bg-background", className),
+		className: cn("@container/app-shell flex h-full min-h-0 w-full bg-background", className),
 		...debugSlots ? { "data-debug-slots": "true" } : {},
 		children: [
 			debugSlots && /* @__PURE__ */ jsx(AppShellSlotOutlines, {}),
@@ -73,7 +74,7 @@ function AppShell(props) {
 				"data-slot": "app-shell-sidebar",
 				"data-collapsed": collapsed,
 				style: { width: railWidth },
-				className: cn("hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex", sidebarClassName),
+				className: cn("hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 @3xl/app-shell:flex", sidebarClassName),
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: cn("flex h-14 shrink-0 items-center border-b border-sidebar-border", collapsed ? "justify-center px-2" : "justify-between px-density-3"),
@@ -117,13 +118,13 @@ function AppShell(props) {
 						"data-slot": "app-shell-header",
 						className: "shrink-0 border-b border-border bg-card",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: cn(hasSidebar ? "flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:h-14 md:flex-nowrap md:gap-density-3 md:px-density-4 md:py-0" : "flex min-h-14 flex-wrap items-center gap-density-3 px-density-4", headerClassName),
+							className: cn(hasSidebar ? "flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 @3xl/app-shell:h-14 @3xl/app-shell:flex-nowrap @3xl/app-shell:gap-density-3 @3xl/app-shell:px-density-4 @3xl/app-shell:py-0" : "flex min-h-14 flex-wrap items-center gap-density-3 px-density-4", headerClassName),
 							children: [
 								hasSidebar && /* @__PURE__ */ jsx("button", {
 									type: "button",
 									"aria-label": `Open ${mobileSidebarLabel}`,
 									title: mobileSidebarLabel,
-									className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent md:hidden",
+									className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent @3xl/app-shell:hidden",
 									onClick: () => setMobileSidebarOpen(true),
 									children: /* @__PURE__ */ jsx(Icon, {
 										icon: UiMenu,
@@ -132,39 +133,39 @@ function AppShell(props) {
 								}),
 								brand && /* @__PURE__ */ jsx("div", {
 									"data-slot": "app-shell-brand",
-									className: cn("min-w-0 items-center gap-density-2", hasSidebar ? "flex flex-1 md:hidden" : "flex shrink-0"),
+									className: cn("min-w-0 items-center gap-density-2", hasSidebar ? "flex flex-1 @3xl/app-shell:hidden" : "flex shrink-0"),
 									children: brand
 								}),
 								nav && /* @__PURE__ */ jsx("div", {
 									"data-slot": "app-shell-nav",
-									className: cn("flex min-w-0 items-center overflow-x-auto", hasSidebar && "order-3 basis-full md:order-none md:basis-auto"),
+									className: cn("flex min-w-0 items-center overflow-x-auto", hasSidebar && "order-3 basis-full @3xl/app-shell:order-none @3xl/app-shell:basis-auto"),
 									children: nav
 								}),
 								search !== void 0 && /* @__PURE__ */ jsx("div", {
 									"data-slot": "app-shell-search",
-									className: cn("flex min-w-0 flex-1 justify-center", hasSidebar && "order-2 basis-full md:order-none md:basis-auto md:flex-1"),
+									className: cn("flex min-w-0 flex-1 justify-center", hasSidebar && "order-2 basis-full @3xl/app-shell:order-none @3xl/app-shell:basis-auto @3xl/app-shell:flex-1"),
 									children: /* @__PURE__ */ jsx("div", {
 										className: "w-full",
 										style: { maxWidth: searchMaxWidth },
 										children: search
 									})
 								}),
-								search === void 0 && /* @__PURE__ */ jsx("div", { className: cn("flex-1", hasSidebar && "hidden md:block") }),
+								search === void 0 && /* @__PURE__ */ jsx("div", { className: cn("flex-1", hasSidebar && "hidden @3xl/app-shell:block") }),
 								(actions !== void 0 || hasSidebar && mobileActions !== void 0) && /* @__PURE__ */ jsx("div", {
 									"data-slot": "app-shell-actions",
-									className: cn("flex shrink-0 items-center gap-density-2", "max-md:min-w-0 max-md:max-w-full max-md:shrink max-md:overflow-x-auto", hasSidebar && "order-1 ml-auto md:order-none md:ml-0"),
+									className: cn("flex shrink-0 items-center gap-density-2", "@max-3xl/app-shell:min-w-0 @max-3xl/app-shell:max-w-full @max-3xl/app-shell:shrink @max-3xl/app-shell:overflow-x-auto", hasSidebar && "order-1 ml-auto @3xl/app-shell:order-none @3xl/app-shell:ml-0"),
 									children: !hasSidebar || mobileActions === void 0 ? actions : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-										className: "hidden items-center gap-density-2 md:flex",
+										className: "hidden items-center gap-density-2 @3xl/app-shell:flex",
 										children: actions
 									}), /* @__PURE__ */ jsx("div", {
-										className: "flex items-center gap-density-2 md:hidden",
+										className: "flex items-center gap-density-2 @3xl/app-shell:hidden",
 										children: mobileActions
 									})] })
 								})
 							]
 						}), toolbar && /* @__PURE__ */ jsx("div", {
 							"data-slot": "app-shell-toolbar",
-							className: cn("flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4", toolbarClassName),
+							className: cn("flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 @3xl/app-shell:px-density-4", toolbarClassName),
 							children: toolbar
 						})]
 					}),
@@ -174,7 +175,7 @@ function AppShell(props) {
 						children: /* @__PURE__ */ jsxs("div", {
 							"data-slot": "app-shell-body-header-content",
 							"data-content-width": effectiveContentWidth,
-							className: cn("flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4", contentWidthClassName(effectiveContentWidth)),
+							className: cn("flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 @3xl/app-shell:flex-row @3xl/app-shell:items-start @3xl/app-shell:justify-between @3xl/app-shell:gap-density-3 @3xl/app-shell:px-density-4", contentWidthClassName(effectiveContentWidth)),
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "min-w-0 flex-1",
 								children: bodyHeader
@@ -187,6 +188,7 @@ function AppShell(props) {
 					}),
 					bodySidebar !== void 0 ? /* @__PURE__ */ jsx(SplitPane, {
 						stackOnMobile: true,
+						...bodyPane ? { mobilePane: bodyPane === "sidebar" ? "left" : "right" } : {},
 						className: "min-h-0 flex-1",
 						defaultSplit: bodySplit,
 						minLeft: 12,
@@ -196,13 +198,27 @@ function AppShell(props) {
 							className: "h-full",
 							children: bodySidebar
 						}),
-						right: /* @__PURE__ */ jsx("main", {
-							"data-slot": "app-shell-main",
-							className: cn("h-full min-h-0 min-w-0 overflow-auto", contentClassName),
-							children
+						right: /* @__PURE__ */ jsxs("div", {
+							className: "flex h-full min-h-0 min-w-0 flex-col",
+							children: [bodyPane === "main" && onBodyBack && /* @__PURE__ */ jsx("div", {
+								"data-slot": "app-shell-body-back",
+								className: "shrink-0 border-b border-border px-density-2 @3xl/split-pane:hidden",
+								children: /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: onBodyBack,
+									className: "inline-flex min-h-11 items-center gap-density-2 rounded-md px-density-2 text-sm font-medium text-muted-foreground hover:text-foreground",
+									children: [/* @__PURE__ */ jsx(Icon, {
+										icon: UiArrowLeft,
+										className: "h-4 w-4"
+									}), bodyBackLabel]
+								})
+							}), /* @__PURE__ */ jsx("main", {
+								"data-slot": "app-shell-main",
+								className: cn("min-h-0 min-w-0 flex-1 overflow-auto", contentClassName),
+								children
+							})]
 						}),
-						leftClass: "max-h-[40vh] shrink-0 border-b border-border md:max-h-none md:border-b-0",
-						rightClass: "min-h-0 flex-1 md:flex-none"
+						...bodyPane ? {} : { leftClass: "max-h-[40vh]" }
 					}) : /* @__PURE__ */ jsx("main", {
 						"data-slot": "app-shell-main",
 						className: cn("min-h-0 min-w-0 flex-1 overflow-auto", contentClassName),
@@ -216,7 +232,7 @@ function AppShell(props) {
 				]
 			}),
 			hasSidebar && mobileSidebarOpen && /* @__PURE__ */ jsxs("div", {
-				className: "fixed inset-0 z-50 md:hidden",
+				className: "fixed inset-0 z-50 @3xl/app-shell:hidden",
 				role: "presentation",
 				onClick: () => setMobileSidebarOpen(false),
 				children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }), /* @__PURE__ */ jsxs("aside", {

package/dist/layout/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","names":["_Fragment"],"sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport type { DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections, type GroupState } from \"./AppShell.nav\";\nimport type { AppShellNavDrag } from \"./AppShell.nav.drag\";\nimport { contentWidthClassName, type ContentWidth } from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Additional searchable text for a tree destination. */\n  searchText?: string;\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened by right-click, the Context Menu key, or Shift+F10. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n};\n\nexport type AppShellNavGroup = {\n  /** Stable key; also the key its collapsed state persists under. */\n  key: string;\n  /** Group heading rendered on the toggle row. */\n  label: string;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Trailing adornment (aggregate count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened from the group heading's context menu. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n  /** Folded on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  /**\n   * Keeps the group open regardless of stored state, so a deep-linked\n   * destination can never hide under a folder the user collapsed earlier.\n   * Set it on the active item's ancestors.\n   */\n  forceExpanded?: boolean;\n  items: AppShellNavItem[];\n  /**\n   * Nested sub-groups, rendered after `items` at one further indent. Groups\n   * nest arbitrarily, so a backend hierarchy deeper than two levels does not\n   * have to be flattened to fit the rail.\n   */\n  groups?: AppShellNavGroup[];\n  /**\n   * Makes the group's own heading row a destination as well as a disclosure:\n   * the label becomes a nav link and the chevron sits beside it as a separate\n   * control. Needed wherever a node is both a folder and a leaf — e.g. a\n   * profile named `jms` that is runnable *and* the parent of `jms.incoming`.\n   */\n  item?: AppShellNavItem;\n};\n\nexport type AppShellNavSection = {\n  /** Show a loading message instead of an empty tree while data is being fetched. */\n  loading?: boolean;\n  /** Optional controlled search for tree navigation. */\n  search?: { value: string; onChange: (value: string) => void; label?: string };\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items?: AppShellNavItem[];\n  /** Collapsible groups rendered after the flat items. High-cardinality\n   *  clusters (provider surfaces, per-ledger journals) belong here so they can\n   *  be folded away; a collapsed rail flattens them back to plain items. */\n  groups?: AppShellNavGroup[];\n  /**\n   * How the groups read.\n   *\n   * `\"list\"` (the default) styles each group heading as a small uppercase\n   * cluster label — right for a handful of named clusters under one section.\n   *\n   * `\"tree\"` styles headings as ordinary nav rows, because in a tree a folder\n   * sits at the same level as its sibling destinations: a group carrying an\n   * `item` renders as a link either way, so an uppercase heading beside it\n   * would make two nodes of the same kind look like different things.\n   */\n  variant?: \"list\" | \"tree\";\n  /**\n   * Makes the section's rows draggable onto one another, so a hierarchy can be\n   * rearranged in place. The section stays the boundary — a row never lands in\n   * a different section — and the consumer owns what a move means. Ignored\n   * while the rail is collapsed, where there are no folder rows to aim at.\n   */\n  drag?: AppShellNavDrag;\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-shell:groups\";\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\"\n      ? (parsed as Record<string, boolean>)\n      : {};\n  } catch {\n    return {};\n  }\n}\n\n// Lives here rather than in AppShell.nav so a single instance can be shared by\n// both NavSections renders (rail + mobile drawer).\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() =>\n    readGroupState(storageKey),\n  );\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Rail state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) =>\n      setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    groupCollapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  // One instance for the rail AND the mobile drawer: both render NavSections,\n  // and per-render state behind a shared storage key would desync.\n  const groupState = useGroupCollapsed(\n    groupCollapsedStorageKey ?? DEFAULT_GROUP_COLLAPSE_KEY,\n  );\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (\n    collapsedValue: boolean,\n    onNavigate?: () => void,\n  ) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          data-collapsed={collapsed}\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div\n                data-slot=\"app-shell-brand\"\n                className=\"flex min-w-0 items-center gap-2\"\n              >\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            <div\n              className={cn(\n                hasSidebar\n                  ? \"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:h-14 md:flex-nowrap md:gap-density-3 md:px-density-4 md:py-0\"\n                  : // Wraps rather than squeezing. The nav shrinks and the\n                    // actions cluster does not, so on a laptop a full actions\n                    // row left the nav a sliver — every tab but the first\n                    // scrolled out of sight. A second line costs 44px and only\n                    // appears when the row genuinely cannot fit.\n                    \"flex min-h-14 flex-wrap items-center gap-density-3 px-density-4\",\n                headerClassName,\n              )}\n            >\n              {hasSidebar && (\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent md:hidden\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n              )}\n              {brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className={cn(\n                    \"min-w-0 items-center gap-density-2\",\n                    hasSidebar ? \"flex flex-1 md:hidden\" : \"flex shrink-0\",\n                  )}\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div\n                  data-slot=\"app-shell-nav\"\n                  className={cn(\n                    // The nav is the only header slot that both shrinks\n                    // (min-w-0) and holds wide content, while the actions\n                    // cluster beside it is shrink-0. Give a full actions row\n                    // and this box collapses to a sliver — so it needs a guard,\n                    // or its tabs paint straight over the toolbar next to it\n                    // and both become unreadable. Scrolling keeps every tab\n                    // reachable; overflowing keeps none of them.\n                    \"flex min-w-0 items-center overflow-x-auto\",\n                    hasSidebar && \"order-3 basis-full md:order-none md:basis-auto\",\n                  )}\n                >\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className={cn(\n                    \"flex min-w-0 flex-1 justify-center\",\n                    hasSidebar &&\n                      \"order-2 basis-full md:order-none md:basis-auto md:flex-1\",\n                  )}\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && (\n                <div\n                  className={cn(\"flex-1\", hasSidebar && \"hidden md:block\")}\n                />\n              )}\n              {(actions !== undefined ||\n                (hasSidebar && mobileActions !== undefined)) && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className={cn(\n                    \"flex shrink-0 items-center gap-density-2\",\n                    // Below md the cluster must never be wider than the\n                    // phone: a shrink-0 row that overflows widens the layout\n                    // viewport, and then every fixed overlay on the page\n                    // loses its right edge. Let it shrink and scroll its own\n                    // contents instead, the same guard the nav slot has.\n                    \"max-md:min-w-0 max-md:max-w-full max-md:shrink max-md:overflow-x-auto\",\n                    hasSidebar && \"order-1 ml-auto md:order-none md:ml-0\",\n                  )}\n                >\n                  {!hasSidebar || mobileActions === undefined ? (\n                    actions\n                  ) : (\n                    <>\n                      <div className=\"hidden items-center gap-density-2 md:flex\">\n                        {actions}\n                      </div>\n                      <div className=\"flex items-center gap-density-2 md:hidden\">\n                        {mobileActions}\n                      </div>\n                    </>\n                  )}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <SplitPane\n            stackOnMobile\n            className=\"min-h-0 flex-1\"\n            defaultSplit={bodySplit}\n            minLeft={12}\n            minRight={30}\n            left={\n              <div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">\n                {bodySidebar}\n              </div>\n            }\n            right={\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"h-full min-h-0 min-w-0 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            }\n            leftClass=\"max-h-[40vh] shrink-0 border-b border-border md:max-h-none md:border-b-0\"\n            rightClass=\"min-h-0 flex-1 md:flex-none\"\n          />\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && (\n                <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n              )}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AppShell.js","names":["_Fragment"],"sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiArrowLeft, UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport type { DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections, type GroupState } from \"./AppShell.nav\";\nimport type { AppShellNavDrag } from \"./AppShell.nav.drag\";\nimport { contentWidthClassName, type ContentWidth } from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Additional searchable text for a tree destination. */\n  searchText?: string;\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened by right-click, the Context Menu key, or Shift+F10. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n};\n\nexport type AppShellNavGroup = {\n  /** Stable key; also the key its collapsed state persists under. */\n  key: string;\n  /** Group heading rendered on the toggle row. */\n  label: string;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Trailing adornment (aggregate count, status dot). */\n  badge?: ReactNode;\n  /** Actions opened from the group heading's context menu. */\n  contextMenu?: DropdownMenuItem[];\n  /** Accessible label for the context menu. Defaults to `<label> actions`. */\n  contextMenuLabel?: string;\n  /** Folded on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  /**\n   * Keeps the group open regardless of stored state, so a deep-linked\n   * destination can never hide under a folder the user collapsed earlier.\n   * Set it on the active item's ancestors.\n   */\n  forceExpanded?: boolean;\n  items: AppShellNavItem[];\n  /**\n   * Nested sub-groups, rendered after `items` at one further indent. Groups\n   * nest arbitrarily, so a backend hierarchy deeper than two levels does not\n   * have to be flattened to fit the rail.\n   */\n  groups?: AppShellNavGroup[];\n  /**\n   * Makes the group's own heading row a destination as well as a disclosure:\n   * the label becomes a nav link and the chevron sits beside it as a separate\n   * control. Needed wherever a node is both a folder and a leaf — e.g. a\n   * profile named `jms` that is runnable *and* the parent of `jms.incoming`.\n   */\n  item?: AppShellNavItem;\n};\n\nexport type AppShellNavSection = {\n  /** Show a loading message instead of an empty tree while data is being fetched. */\n  loading?: boolean;\n  /** Optional controlled search for tree navigation. */\n  search?: { value: string; onChange: (value: string) => void; label?: string };\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items?: AppShellNavItem[];\n  /** Collapsible groups rendered after the flat items. High-cardinality\n   *  clusters (provider surfaces, per-ledger journals) belong here so they can\n   *  be folded away; a collapsed rail flattens them back to plain items. */\n  groups?: AppShellNavGroup[];\n  /**\n   * How the groups read.\n   *\n   * `\"list\"` (the default) renders groups as navigation rows with a trailing\n   * disclosure and indented children. Section labels provide the cluster headings.\n   *\n   * `\"tree\"` styles headings as ordinary nav rows, because in a tree a folder\n   * sits at the same level as its sibling destinations: a group carrying an\n   * `item` renders as a link either way, so an uppercase heading beside it\n   * would make two nodes of the same kind look like different things.\n   */\n  variant?: \"list\" | \"tree\";\n  /**\n   * Makes the section's rows draggable onto one another, so a hierarchy can be\n   * rearranged in place. The section stays the boundary — a row never lands in\n   * a different section — and the consumer owns what a move means. Ignored\n   * while the rail is collapsed, where there are no folder rows to aim at.\n   */\n  drag?: AppShellNavDrag;\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /**\n   * Pages a narrow body (under 48rem) between bodySidebar and body-main\n   * instead of stacking them: only this pane shows, full height. A list/detail\n   * host passes \"main\" while an item is selected and \"sidebar\" otherwise.\n   * Wide layouts always show both panes.\n   */\n  bodyPane?: \"sidebar\" | \"main\";\n  /** With `bodyPane=\"main\"`, a narrow body shows a back bar that calls this (e.g. to clear the selection). */\n  onBodyBack?: () => void;\n  /** Label of the narrow back bar. Defaults to \"Back\". */\n  bodyBackLabel?: string;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-shell:groups\";\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\"\n      ? (parsed as Record<string, boolean>)\n      : {};\n  } catch {\n    return {};\n  }\n}\n\n// Lives here rather than in AppShell.nav so a single instance can be shared by\n// both NavSections renders (rail + mobile drawer).\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() =>\n    readGroupState(storageKey),\n  );\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Rail state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) =>\n      setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    groupCollapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    bodyPane,\n    onBodyBack,\n    bodyBackLabel = \"Back\",\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  // One instance for the rail AND the mobile drawer: both render NavSections,\n  // and per-render state behind a shared storage key would desync.\n  const groupState = useGroupCollapsed(\n    groupCollapsedStorageKey ?? DEFAULT_GROUP_COLLAPSE_KEY,\n  );\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (\n    collapsedValue: boolean,\n    onNavigate?: () => void,\n  ) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"@container/app-shell flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          data-collapsed={collapsed}\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 @3xl/app-shell:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div\n                data-slot=\"app-shell-brand\"\n                className=\"flex min-w-0 items-center gap-2\"\n              >\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            <div\n              className={cn(\n                hasSidebar\n                  ? \"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 @3xl/app-shell:h-14 @3xl/app-shell:flex-nowrap @3xl/app-shell:gap-density-3 @3xl/app-shell:px-density-4 @3xl/app-shell:py-0\"\n                  : // Wraps rather than squeezing. The nav shrinks and the\n                    // actions cluster does not, so on a laptop a full actions\n                    // row left the nav a sliver — every tab but the first\n                    // scrolled out of sight. A second line costs 44px and only\n                    // appears when the row genuinely cannot fit.\n                    \"flex min-h-14 flex-wrap items-center gap-density-3 px-density-4\",\n                headerClassName,\n              )}\n            >\n              {hasSidebar && (\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent @3xl/app-shell:hidden\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n              )}\n              {brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className={cn(\n                    \"min-w-0 items-center gap-density-2\",\n                    hasSidebar ? \"flex flex-1 @3xl/app-shell:hidden\" : \"flex shrink-0\",\n                  )}\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div\n                  data-slot=\"app-shell-nav\"\n                  className={cn(\n                    // The nav is the only header slot that both shrinks\n                    // (min-w-0) and holds wide content, while the actions\n                    // cluster beside it is shrink-0. Give a full actions row\n                    // and this box collapses to a sliver — so it needs a guard,\n                    // or its tabs paint straight over the toolbar next to it\n                    // and both become unreadable. Scrolling keeps every tab\n                    // reachable; overflowing keeps none of them.\n                    \"flex min-w-0 items-center overflow-x-auto\",\n                    hasSidebar && \"order-3 basis-full @3xl/app-shell:order-none @3xl/app-shell:basis-auto\",\n                  )}\n                >\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className={cn(\n                    \"flex min-w-0 flex-1 justify-center\",\n                    hasSidebar &&\n                      \"order-2 basis-full @3xl/app-shell:order-none @3xl/app-shell:basis-auto @3xl/app-shell:flex-1\",\n                  )}\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && (\n                <div\n                  className={cn(\"flex-1\", hasSidebar && \"hidden @3xl/app-shell:block\")}\n                />\n              )}\n              {(actions !== undefined ||\n                (hasSidebar && mobileActions !== undefined)) && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className={cn(\n                    \"flex shrink-0 items-center gap-density-2\",\n                    // Below md the cluster must never be wider than the\n                    // phone: a shrink-0 row that overflows widens the layout\n                    // viewport, and then every fixed overlay on the page\n                    // loses its right edge. Let it shrink and scroll its own\n                    // contents instead, the same guard the nav slot has.\n                    \"@max-3xl/app-shell:min-w-0 @max-3xl/app-shell:max-w-full @max-3xl/app-shell:shrink @max-3xl/app-shell:overflow-x-auto\",\n                    hasSidebar && \"order-1 ml-auto @3xl/app-shell:order-none @3xl/app-shell:ml-0\",\n                  )}\n                >\n                  {!hasSidebar || mobileActions === undefined ? (\n                    actions\n                  ) : (\n                    <>\n                      <div className=\"hidden items-center gap-density-2 @3xl/app-shell:flex\">\n                        {actions}\n                      </div>\n                      <div className=\"flex items-center gap-density-2 @3xl/app-shell:hidden\">\n                        {mobileActions}\n                      </div>\n                    </>\n                  )}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 @3xl/app-shell:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 @3xl/app-shell:flex-row @3xl/app-shell:items-start @3xl/app-shell:justify-between @3xl/app-shell:gap-density-3 @3xl/app-shell:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <SplitPane\n            stackOnMobile\n            {...(bodyPane ? { mobilePane: bodyPane === \"sidebar\" ? \"left\" : \"right\" } : {})}\n            className=\"min-h-0 flex-1\"\n            defaultSplit={bodySplit}\n            minLeft={12}\n            minRight={30}\n            left={\n              <div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">\n                {bodySidebar}\n              </div>\n            }\n            right={\n              <div className=\"flex h-full min-h-0 min-w-0 flex-col\">\n                {bodyPane === \"main\" && onBodyBack && (\n                  <div\n                    data-slot=\"app-shell-body-back\"\n                    className=\"shrink-0 border-b border-border px-density-2 @3xl/split-pane:hidden\"\n                  >\n                    <button\n                      type=\"button\"\n                      onClick={onBodyBack}\n                      className=\"inline-flex min-h-11 items-center gap-density-2 rounded-md px-density-2 text-sm font-medium text-muted-foreground hover:text-foreground\"\n                    >\n                      <Icon icon={UiArrowLeft} className=\"h-4 w-4\" />\n                      {bodyBackLabel}\n                    </button>\n                  </div>\n                )}\n                <main\n                  data-slot=\"app-shell-main\"\n                  className={cn(\n                    \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                    contentClassName,\n                  )}\n                >\n                  {children}\n                </main>\n              </div>\n            }\n            {...(bodyPane ? {} : { leftClass: \"max-h-[40vh]\" })}\n          />\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 @3xl/app-shell:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && (\n                <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n              )}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layout/AppShell.nav.cjs

@@ -1,4 +1,6 @@
 const require_utils = require("../lib/utils.cjs");
+const require_UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const require_UiChevronRight = require("../icons/components/UiChevronRight.cjs");
 const require_Icon = require("../data/Icon.cjs");
 const require_router = require("../rpc/router.cjs");
 const require_ContextMenu = require("../overlay/ContextMenu.cjs");
@@ -101,10 +103,9 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 	const fallback = group.defaultCollapsed ?? false;
 	const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
 	const toggle = () => groupState.toggle(group.key, fallback);
-	const chevron = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	const chevron = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(collapsed ? require_UiChevronRight.UiChevronRight : require_UiChevronDown.UiChevronDown, {
 		"aria-hidden": true,
-		className: "text-[0.65rem] opacity-60",
-		children: collapsed ? "▸" : "▾"
+		className: "size-3.5 shrink-0 opacity-60"
 	});
 	const groupIcon = group.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex h-4 w-4 shrink-0 items-center justify-center",
@@ -144,7 +145,7 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 		className: "flex flex-col",
 		children: [group.item ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: setContextTarget,
-			className: require_utils.cn("group/nav flex items-center gap-1", leafFolderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
+			className: require_utils.cn("group/nav flex items-center gap-1 rounded-md", !collapsed && "bg-sidebar-accent/50", leafFolderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
 			...leafFolderDrag,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -176,7 +177,7 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 			type: "button",
 			onClick: toggle,
 			"aria-expanded": !collapsed,
-			className: require_utils.cn("flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55", folderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
+			className: require_utils.cn("flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "text-left text-[13px] text-sidebar-foreground", !collapsed && "bg-sidebar-accent/50", folderDrag && "data-[nav-drag=source]:opacity-40 data-[nav-drop=over]:bg-sidebar-accent data-[nav-drop=over]:ring-1 data-[nav-drop=over]:ring-inset data-[nav-drop=over]:ring-sidebar-primary"),
 			...folderDrag,
 			children: [
 				groupIcon,
@@ -192,7 +193,7 @@ function NavGroupRows({ group, renderLink, groupState, dragState, onNavigate })
 			menuLabel: group.contextMenuLabel ?? `${group.label} actions`,
 			menuItems: group.contextMenu
 		})] }), !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2",
+			className: "ml-4 mt-0.5 flex flex-col gap-0.5",
 			children: [group.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavItemRow, {
 				item,
 				collapsed: false,