@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/layout/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","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 { useRouter } from \"../rpc/router\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\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  /** 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};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\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  /** 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\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\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    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\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  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\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 renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}>\n      {hasSidebar && (\n        <aside\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 className=\"flex min-w-0 items-center gap-2\">{brand}</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 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(collapsed)}\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      )}\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n        {(hasTopBar || hasMobileHeader) && (\n          <header className=\"shrink-0 border-b border-border bg-card\">\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\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\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">\n                  {brand}\n                </div>\n              )}\n              {nav && <div className=\"flex shrink-0 items-center\">{nav}</div>}\n              {search !== undefined && (\n                <div className=\"flex min-w-0 flex-1 justify-center\">\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\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            className={cn(\n              \"flex shrink-0 flex-col items-stretch gap-density-2 border-b border-border bg-card px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n            {bodyActions && (\n              <div className=\"flex shrink-0 flex-wrap items-center gap-density-2\">\n                {bodyActions}\n              </div>\n            )}\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\">\n                {bodySidebar}\n              </div>\n              <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            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={bodySidebar}\n              right={\n                <div className={cn(\"h-full min-w-0\", contentClassName)}>\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            {children}\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 && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\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\nfunction NavSections({\n  sections,\n  collapsed,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, i) => (\n        <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const inner = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {inner}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children: inner,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return (\n    <div onClick={onNavigate}>\n      {link}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmGA,SAAS,WAAW,KAAwC;AAC1D,MAAI,CAAC,OAAO,OAAO,WAAW,YAAa,QAAO;AAClD,SAAO,OAAO,aAAa,QAAQ,GAAG;AACxC;AAEO,SAAS,SAAS,OAAsB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,aAAa,YAAY,YAAc,2CAAa,WAAU,KAAK;AACzE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAEhE,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,MACE,WAAW,mBAAmB,MAAM,UACnC,WAAW,mBAAmB,MAAM,QAAQ;AAAA,EAAA;AAGjD,YAAU,MAAM;AACd,QAAI,uBAAuB,OAAO,WAAW;AAC3C,aAAO,aAAa,QAAQ,qBAAqB,OAAO,SAAS,CAAC;AAAA,EACtE,GAAG,CAAC,WAAW,mBAAmB,CAAC;AAEnC,iBAAe,mBAAmB,MAAM,qBAAqB,KAAK,CAAC;AAEnE,QAAM,YAAY,YAAY,iBAAiB;AAC/C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,YACH,CAAC,cAAc,UAAU,UAC1B,QAAQ,UACR,WAAW,UACX,YAAY,UACZ,kBAAkB,UAClB,YAAY;AACd,QAAM,kBAAkB;AACxB,QAAM,gBAAgB,eAAe,UAAa,gBAAgB;AAClE,QAAM,uBAAuB,CAAC,gBAAyB,eACrD,OAAO,YAAY,aACf,QAAQ,cAAc,IACtB,YAAY,SACV,UACA,eACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,IAAC;AAAA,EAAA;AAIhD,8BACG,OAAA,EAAI,WAAW,GAAG,4CAA4C,SAAS,GACrE,UAAA;AAAA,IAAA,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,UAAA;AAAA,QAChB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,YACI,wBACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,gBAAA,CAAC,aAAa,SACb,oBAAC,OAAA,EAAI,WAAU,mCAAmC,UAAA,OAAM;AAAA,gBAEzD,eACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC;AAAA,oBACrC,cAAY,YAAY,mBAAmB;AAAA,oBAC3C,OAAO,YAAY,mBAAmB;AAAA,oBACtC,WAAU;AAAA,oBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,WAAU,UAAA,CAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UAAA;AAAA,UAGH,iBACC,oBAAC,OAAA,EAAI,WAAU,qEACZ,UAAA,eACH;AAAA,8BAED,OAAA,EAAI,WAAU,+CACZ,UAAA,qBAAqB,SAAS,GACjC;AAAA,UACC,iBACC,oBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA,cAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAKN,qBAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,OAAA,aAAa,oBACb,qBAAC,UAAA,EAAO,WAAU,2CACf,UAAA;AAAA,QAAA,mBACC,qBAAC,OAAA,EAAI,WAAU,iFACb,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,QAAQ,kBAAkB;AAAA,cACtC,OAAO;AAAA,cACP,WAAU;AAAA,cACV,SAAS,MAAM,qBAAqB,IAAI;AAAA,cAExC,UAAA,oBAAC,MAAA,EAAK,MAAM,QAAQ,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEzC,SACC,oBAAC,OAAA,EAAI,WAAU,kDACZ,UAAA,OACH;AAAA,UAED,kBACC,oBAAC,OAAA,EAAI,WAAU,sEACZ,UAAA,gBACH;AAAA,UAED,WAAW,UACV,oBAAC,OAAA,EAAI,WAAU,sBACZ,UAAA,QACH;AAAA,UAED,OACC,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,IAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,cAAc;AAAA,cACf;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAA,CAAC,cAAc,SACd,oBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA,OACH;AAAA,cAED,OAAO,oBAAC,OAAA,EAAI,WAAU,8BAA8B,UAAA,KAAI;AAAA,cACxD,WAAW,UACV,oBAAC,OAAA,EAAI,WAAU,sCACb,UAAA,oBAAC,OAAA,EAAI,WAAU,UAAS,OAAO,EAAE,UAAU,eAAA,GACxC,kBACH,GACF;AAAA,cAED,WAAW,UAAa,oBAAC,OAAA,EAAI,WAAU,UAAS;AAAA,cAChD,WACC,oBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA,QAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GAEJ;AAAA,MAGD,iBACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGF,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,YAAW;AAAA,YAC3C,eACC,oBAAC,OAAA,EAAI,WAAU,sDACZ,UAAA,YAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAKL,gBAAgB,SACf,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,8EACZ,UAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAc;AAAA,YACd,SAAS;AAAA,YACT,UAAU;AAAA,YACV,MAAM;AAAA,YACN,2BACG,OAAA,EAAI,WAAW,GAAG,kBAAkB,gBAAgB,GAClD,UACH;AAAA,YAEF,YAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,CACF,IAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACC,cAAc,qBACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,MAAM,qBAAqB,KAAK;AAAA,QAEzC,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B;AAAA,UAC9C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,cAAY;AAAA,cACZ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,SAAS,CAAC,UAAU,MAAM,gBAAA;AAAA,cAE1B,UAAA;AAAA,gBAAA,qBAAC,OAAA,EAAI,WAAU,+FACZ,UAAA;AAAA,kBAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,mCAAmC,UAAA,OAAM;AAAA,kBAClE;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,cAAY,SAAS,kBAAkB;AAAA,sBACvC,OAAM;AAAA,sBACN,WAAU;AAAA,sBACV,SAAS,MAAM,qBAAqB,KAAK;AAAA,sBAEzC,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAA,CAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAC3C,GACF;AAAA,gBACC,iBACC,oBAAC,OAAA,EAAI,WAAU,qEACZ,UAAA,eACH;AAAA,gBAEF,oBAAC,OAAA,EAAI,WAAU,+CACZ,UAAA,qBAAqB,OAAO,MAAM,qBAAqB,KAAK,CAAC,EAAA,CAChE;AAAA,gBACC,iBACC,oBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA,cAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,WAAA,IAAe,UAAA;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,SAAS;AAAA,MAAA;AAAA,MAGtB,UAAA,SAAS,IAAI,CAAC,SAAS,MACtB,qBAAC,OAAA,EAA0C,WAAU,iBAClD,UAAA;AAAA,QAAA,QAAQ,UACN,YACC,oBAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,IAE1E,oBAAC,OAAA,EAAI,WAAU,wHACZ,UAAA,QAAQ,MAAA,CACX;AAAA,QAEH,QAAQ,MAAM,IAAI,CAAC,SAClB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,UAAC;AAAA,UAJ/B,KAAK;AAAA,QAAA,CAMb;AAAA,MAAA,EAAA,GAjBO,QAAQ,SAAS,WAAW,CAAC,EAkBvC,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,aAAa;AAAA,IACb,KAAK,UAAU;AAAA,EAAA;AAEjB,QAAM,QACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,KAAK,QACJ,oBAAC,QAAA,EAAK,WAAU,qDACd,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK;AAAA,IAAA,GAE1B;AAAA,IAED,CAAC,aAAa,oBAAC,UAAK,WAAU,mBAAmB,eAAK,OAAM;AAAA,IAC5D,CAAC,aAAa,KAAK;AAAA,EAAA,GACtB;AAEF,QAAM,QACJ,aAAa,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ;AAE7D,MAAI,KAAK,UAAU;AACjB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,SAAS;AAAA,QAER,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACA,QAAM,OAAO,WAAW;AAAA,IACtB,KAAK,KAAK;AAAA,IACV,IAAI,KAAK;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,GAAI,QAAQ,EAAE,UAAU,CAAA;AAAA,EAAC,CAC1B;AAED,MAAI,CAAC,WAAY,QAAO;AACxB,SACE,oBAAC,OAAA,EAAI,SAAS,YACX,UAAA,MACH;AAEJ;"}
+{"version":3,"file":"AppShell.js","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 { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections } from \"./AppShell.nav\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} 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  /** 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};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\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  /** 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\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    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  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\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 = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\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          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 data-slot=\"app-shell-brand\" className=\"flex min-w-0 items-center gap-2\">\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            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\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\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div data-slot=\"app-shell-nav\" className=\"flex shrink-0 items-center\">\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className=\"flex min-w-0 flex-1 justify-center\"\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {actions}\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          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div\n                data-slot=\"app-shell-body-sidebar\"\n                className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\"\n              >\n                {bodySidebar}\n              </div>\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            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={<div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">{bodySidebar}</div>}\n              right={\n                <div\n                  data-slot=\"app-shell-main\"\n                  className={cn(\"h-full min-w-0\", contentClassName)}\n                >\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\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 && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\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"],"names":[],"mappings":"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"}

package/dist/layout/AppShell.nav.cjs

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Icon = require("../data/Icon.cjs");
+const utils = require("../lib/utils.cjs");
+const router = require("../rpc/router.cjs");
+function NavSections({
+  sections,
+  collapsed,
+  onNavigate
+}) {
+  const { renderLink } = router.useRouter();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      className: utils.cn(
+        "flex flex-col gap-0.5",
+        collapsed ? "px-2" : "px-density-2"
+      ),
+      children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col",
+          children: [
+            section.label && (collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
+            section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              NavItemRow,
+              {
+                item,
+                collapsed,
+                renderLink,
+                ...onNavigate ? { onNavigate } : {}
+              },
+              item.key
+            ))
+          ]
+        },
+        section.label ?? `section-${index}`
+      ))
+    }
+  );
+}
+function NavItemRow({
+  item,
+  collapsed,
+  renderLink,
+  onNavigate
+}) {
+  const className = utils.cn(
+    "flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    collapsed && "justify-center px-0",
+    item.active && "bg-sidebar-accent font-medium text-sidebar-primary"
+  );
+  const children = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
+      }
+    ) }),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
+    !collapsed && item.badge
+  ] });
+  const title = collapsed && typeof item.label === "string" ? item.label : void 0;
+  if (item.external) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: item.to,
+        className,
+        title,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: onNavigate,
+        children
+      }
+    );
+  }
+  const link = renderLink({
+    key: item.key,
+    to: item.to,
+    className,
+    children,
+    ...title ? { title } : {}
+  });
+  if (!onNavigate) return link;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onNavigate, children: link });
+}
+exports.NavSections = NavSections;
+//# sourceMappingURL=AppShell.nav.cjs.map

package/dist/layout/AppShell.nav.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.nav.cjs","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type { AppShellNavItem, AppShellNavSection } from \"./AppShell\";\n\nexport function NavSections({\n  sections,\n  collapsed,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return <div onClick={onNavigate}>{link}</div>;\n}\n"],"names":["useRouter","jsx","cn","jsxs","Fragment","Icon"],"mappings":";;;;;;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,WAAA,IAAeA,iBAAA;AACvB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,SAAS;AAAA,MAAA;AAAA,MAGtB,UAAA,SAAS,IAAI,CAAC,SAAS,UACtBC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAA;AAAA,YAAA,QAAQ,UACN,YACCF,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,IAE1EA,2BAAAA,IAAC,OAAA,EAAI,WAAU,wHACZ,UAAA,QAAQ,MAAA,CACX;AAAA,YAEH,QAAQ,MAAM,IAAI,CAAC,SAClBA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,cAAC;AAAA,cAJ/B,KAAK;AAAA,YAAA,CAMb;AAAA,UAAA;AAAA,QAAA;AAAA,QAnBI,QAAQ,SAAS,WAAW,KAAK;AAAA,MAAA,CAqBzC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAYC,MAAAA;AAAAA,IAChB;AAAA,IACA,aAAa;AAAA,IACb,KAAK,UAAU;AAAA,EAAA;AAEjB,QAAM,WACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,IAAA,KAAK,QACJH,+BAAC,QAAA,EAAK,WAAU,qDACd,UAAAA,2BAAAA;AAAAA,MAACI,KAAAA;AAAAA,MAAA;AAAA,QACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK;AAAA,IAAA,GAE1B;AAAA,IAED,CAAC,aAAaJ,+BAAC,UAAK,WAAU,mBAAmB,eAAK,OAAM;AAAA,IAC5D,CAAC,aAAa,KAAK;AAAA,EAAA,GACtB;AAEF,QAAM,QACJ,aAAa,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ;AAE7D,MAAI,KAAK,UAAU;AACjB,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,SAAS;AAAA,QAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACA,QAAM,OAAO,WAAW;AAAA,IACtB,KAAK,KAAK;AAAA,IACV,IAAI,KAAK;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAI,QAAQ,EAAE,UAAU,CAAA;AAAA,EAAC,CAC1B;AAED,MAAI,CAAC,WAAY,QAAO;AACxB,SAAOA,2BAAAA,IAAC,OAAA,EAAI,SAAS,YAAa,UAAA,MAAK;AACzC;;"}

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

@@ -0,0 +1,7 @@
+import { AppShellNavSection } from './AppShell';
+export declare function NavSections({ sections, collapsed, onNavigate, }: {
+    sections: AppShellNavSection[];
+    collapsed: boolean;
+    onNavigate?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppShell.nav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.nav.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.nav.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAmB,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEtE,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,2CAmCA"}

package/dist/layout/AppShell.nav.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Icon } from "../data/Icon.js";
+import { cn } from "../lib/utils.js";
+import { useRouter } from "../rpc/router.js";
+function NavSections({
+  sections,
+  collapsed,
+  onNavigate
+}) {
+  const { renderLink } = useRouter();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "flex flex-col gap-0.5",
+        collapsed ? "px-2" : "px-density-2"
+      ),
+      children: sections.map((section, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col",
+          children: [
+            section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
+            section.items.map((item) => /* @__PURE__ */ jsx(
+              NavItemRow,
+              {
+                item,
+                collapsed,
+                renderLink,
+                ...onNavigate ? { onNavigate } : {}
+              },
+              item.key
+            ))
+          ]
+        },
+        section.label ?? `section-${index}`
+      ))
+    }
+  );
+}
+function NavItemRow({
+  item,
+  collapsed,
+  renderLink,
+  onNavigate
+}) {
+  const className = cn(
+    "flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    collapsed && "justify-center px-0",
+    item.active && "bg-sidebar-accent font-medium text-sidebar-primary"
+  );
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
+      }
+    ) }),
+    !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+    !collapsed && item.badge
+  ] });
+  const title = collapsed && typeof item.label === "string" ? item.label : void 0;
+  if (item.external) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.to,
+        className,
+        title,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: onNavigate,
+        children
+      }
+    );
+  }
+  const link = renderLink({
+    key: item.key,
+    to: item.to,
+    className,
+    children,
+    ...title ? { title } : {}
+  });
+  if (!onNavigate) return link;
+  return /* @__PURE__ */ jsx("div", { onClick: onNavigate, children: link });
+}
+export {
+  NavSections
+};
+//# sourceMappingURL=AppShell.nav.js.map

package/dist/layout/AppShell.nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.nav.js","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type { AppShellNavItem, AppShellNavSection } from \"./AppShell\";\n\nexport function NavSections({\n  sections,\n  collapsed,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return <div onClick={onNavigate}>{link}</div>;\n}\n"],"names":[],"mappings":";;;;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,WAAA,IAAe,UAAA;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,SAAS;AAAA,MAAA;AAAA,MAGtB,UAAA,SAAS,IAAI,CAAC,SAAS,UACtB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAA;AAAA,YAAA,QAAQ,UACN,YACC,oBAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,IAE1E,oBAAC,OAAA,EAAI,WAAU,wHACZ,UAAA,QAAQ,MAAA,CACX;AAAA,YAEH,QAAQ,MAAM,IAAI,CAAC,SAClB;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,cAAC;AAAA,cAJ/B,KAAK;AAAA,YAAA,CAMb;AAAA,UAAA;AAAA,QAAA;AAAA,QAnBI,QAAQ,SAAS,WAAW,KAAK;AAAA,MAAA,CAqBzC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,aAAa;AAAA,IACb,KAAK,UAAU;AAAA,EAAA;AAEjB,QAAM,WACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,KAAK,QACJ,oBAAC,QAAA,EAAK,WAAU,qDACd,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK;AAAA,IAAA,GAE1B;AAAA,IAED,CAAC,aAAa,oBAAC,UAAK,WAAU,mBAAmB,eAAK,OAAM;AAAA,IAC5D,CAAC,aAAa,KAAK;AAAA,EAAA,GACtB;AAEF,QAAM,QACJ,aAAa,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ;AAE7D,MAAI,KAAK,UAAU;AACjB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,SAAS;AAAA,QAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACA,QAAM,OAAO,WAAW;AAAA,IACtB,KAAK,KAAK;AAAA,IACV,IAAI,KAAK;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAI,QAAQ,EAAE,UAAU,CAAA;AAAA,EAAC,CAC1B;AAED,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,oBAAC,OAAA,EAAI,SAAS,YAAa,UAAA,MAAK;AACzC;"}

package/dist/layout/AppSidebar.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const router = require("../rpc/router.cjs");
+const contentWidth = require("./content-width.cjs");
 const UiSidebar = require("../icons/components/UiSidebar.cjs");
 const DEFAULT_COLLAPSE_KEY = "clicky-ui:app-sidebar:collapsed";
 const DEFAULT_GROUP_COLLAPSE_KEY = "clicky-ui:app-sidebar:groups";
@@ -225,13 +226,42 @@ function SectionLabel({ children, collapsed }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2", children });
 }
-function AppLayout({ sidebar, header, children, className }) {
+function AppLayout({
+  sidebar,
+  header,
+  children,
+  contentWidth: contentWidth$1 = "contained",
+  className
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className), children: [
     sidebar,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      header,
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "app-layout-column",
+        className: "@container/app-content flex min-w-0 flex-1 flex-col",
+        children: [
+          header && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "app-layout-header-content",
+              "data-content-width": contentWidth$1,
+              className: contentWidth.contentWidthClassName(contentWidth$1),
+              children: header
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "app-layout-content",
+              "data-content-width": contentWidth$1,
+              className: contentWidth.contentWidthClassName(contentWidth$1),
+              children
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 exports.AppLayout = AppLayout;

package/dist/layout/AppSidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.cjs","sources":["../../src/layout/AppSidebar.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSidebar } from \"../icons\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\n\n// AppSidebar / AppLayout are a router-agnostic application shell: a collapsible\n// left navigation rail driven by declarative sections, plus a flex layout that\n// pairs it with an optional header and the routed content. Navigation and active\n// state come from the RouterAdapter (see ../rpc/router) — by default a plain\n// <a href={to}> browser adapter, or the host's react-router/memory adapter via\n// RouterProvider. The `pathname` and `renderLink` props still override the\n// adapter for cases where a rail's active state is independent of the URL.\n//\n// A section may carry flat `items` and/or collapsible `groups`. Groups are for\n// high-cardinality clusters (e.g. provider surfaces) that benefit from being\n// folded away; their open/closed state persists per `group.key`.\n\nexport interface AppNavItem {\n  /** Stable key; also used as the React key. */\n  key: string;\n  title: string;\n  /** Destination passed to renderLink (or href for external items). */\n  to: string;\n  icon?: ReactNode;\n  /** Render a plain anchor (new-tab style) instead of a routed link. */\n  external?: boolean;\n  /** Optional trailing adornment (count, status dot, etc.). */\n  badge?: ReactNode;\n}\n\nexport interface AppNavGroup {\n  /** Stable key; also the persistence key for collapsed state. */\n  key: string;\n  label: string;\n  icon?: ReactNode;\n  /** Collapsed on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  items?: AppNavItem[];\n  /** Nested groups (one extra level, e.g. Providers > Xero). */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppNavSection {\n  /** Section heading; omitted for the leading section. */\n  label?: string;\n  items?: AppNavItem[];\n  /** Collapsible groups rendered after the flat items. */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppSidebarProps {\n  sections: AppNavSection[];\n  /** Current path for active-state. Defaults to the RouterAdapter's pathname. */\n  pathname?: string;\n  /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain\n   *  <a href={to}> unless a RouterProvider supplies a router Link). */\n  renderLink?: RenderLink;\n  /** Branding shown at the top of the expanded rail (logo/title). */\n  header?: ReactNode;\n  /** Pinned to the bottom of the rail (theme switcher, version, etc.). */\n  footer?: ReactNode;\n  /** localStorage key persisting the rail collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Override the default prefix-match active test. */\n  isActive?: (pathname: string, to: string) => boolean;\n  className?: string;\n}\n\nconst DEFAULT_COLLAPSE_KEY = \"clicky-ui:app-sidebar:collapsed\";\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-sidebar:groups\";\n\nfunction defaultIsActive(pathname: string, to: string): boolean {\n  if (to === \"/\") return pathname === \"/\";\n  return pathname === to || pathname.startsWith(`${to}/`);\n}\n\nfunction useCollapsed(storageKey: string): [boolean, () => void] {\n  const [collapsed, setCollapsed] = useState<boolean>(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.localStorage.getItem(storageKey) === \"true\";\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(storageKey, String(collapsed));\n  }, [collapsed, storageKey]);\n  return [collapsed, () => setCollapsed((c) => !c)];\n}\n\ninterface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\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\" ? (parsed as Record<string, boolean>) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() => readGroupState(storageKey));\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Sidebar 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) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nfunction flattenGroupItems(groups: AppNavGroup[]): AppNavItem[] {\n  const out: AppNavItem[] = [];\n  for (const group of groups) {\n    if (group.items) out.push(...group.items);\n    if (group.groups) out.push(...flattenGroupItems(group.groups));\n  }\n  return out;\n}\n\nexport function AppSidebar({\n  sections,\n  pathname: pathnameProp,\n  renderLink: renderLinkProp,\n  header,\n  footer,\n  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,\n  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,\n  isActive = defaultIsActive,\n  className,\n}: AppSidebarProps) {\n  const router = useRouter();\n  const pathname = pathnameProp ?? router.pathname;\n  const renderLink = renderLinkProp ?? router.renderLink;\n  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);\n  const groupState = useGroupCollapsed(groupCollapsedStorageKey);\n  return (\n    <nav\n      className={cn(\n        \"flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200\",\n        collapsed ? \"w-16\" : \"w-64\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex shrink-0 items-center border-b border-border py-3\",\n          collapsed ? \"justify-center px-2\" : \"justify-between px-4\",\n        )}\n      >\n        {!collapsed && <div className=\"min-w-0 flex-1\">{header}</div>}\n        <button\n          type=\"button\"\n          onClick={toggleCollapsed}\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-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className={cn(\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2\", collapsed ? \"px-2\" : \"px-3\")}>\n        {sections.map((section, i) => (\n          <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n            {section.label && <SectionLabel collapsed={collapsed}>{section.label}</SectionLabel>}\n            {section.items?.map((item) => (\n              <SidebarItem\n                key={item.key}\n                item={item}\n                active={isActive(pathname, item.to)}\n                collapsed={collapsed}\n                renderLink={renderLink}\n              />\n            ))}\n            {section.groups?.map((group) =>\n              collapsed ? (\n                flattenGroupItems([group]).map((item) => (\n                  <SidebarItem\n                    key={item.key}\n                    item={item}\n                    active={isActive(pathname, item.to)}\n                    collapsed\n                    renderLink={renderLink}\n                  />\n                ))\n              ) : (\n                <SidebarGroup\n                  key={group.key}\n                  group={group}\n                  pathname={pathname}\n                  isActive={isActive}\n                  renderLink={renderLink}\n                  groupState={groupState}\n                />\n              ),\n            )}\n          </div>\n        ))}\n      </div>\n\n      {footer && <div className={cn(\"mt-auto border-t border-border py-3\", collapsed ? \"px-2\" : \"px-4\")}>{footer}</div>}\n    </nav>\n  );\n}\n\nfunction SidebarGroup({\n  group,\n  pathname,\n  isActive,\n  renderLink,\n  groupState,\n}: {\n  group: AppNavGroup;\n  pathname: string;\n  isActive: (pathname: string, to: string) => boolean;\n  renderLink: RenderLink;\n  groupState: GroupState;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed = groupState.isCollapsed(group.key, fallback);\n  return (\n    <div className=\"flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={() => groupState.toggle(group.key, fallback)}\n        aria-expanded={!collapsed}\n        className=\"flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40\"\n      >\n        {group.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{group.icon}</span>}\n        <span className=\"flex-1 truncate text-left\">{group.label}</span>\n        <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n          {collapsed ? \"▸\" : \"▾\"}\n        </span>\n      </button>\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2\">\n          {group.items?.map((item) => (\n            <SidebarItem\n              key={item.key}\n              item={item}\n              active={isActive(pathname, item.to)}\n              collapsed={false}\n              renderLink={renderLink}\n            />\n          ))}\n          {group.groups?.map((sub) => (\n            <SidebarGroup\n              key={sub.key}\n              group={sub}\n              pathname={pathname}\n              isActive={isActive}\n              renderLink={renderLink}\n              groupState={groupState}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SidebarItem({\n  item,\n  active,\n  collapsed,\n  renderLink,\n}: {\n  item: AppNavItem;\n  active: boolean;\n  collapsed: boolean;\n  renderLink: RenderLink;\n}) {\n  const className = cn(\n    \"flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    active && \"bg-accent font-medium text-accent-foreground\",\n  );\n  const title = collapsed ? item.title : undefined;\n  const children = (\n    <>\n      {item.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{item.icon}</span>}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.title}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n\n  if (item.external) {\n    return (\n      <a href={item.to} className={className} title={title} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  return renderLink({ key: item.key, to: item.to, className, children, ...(title ? { title } : {}) });\n}\n\nfunction SectionLabel({ children, collapsed }: { children: ReactNode; collapsed: boolean }) {\n  if (collapsed) {\n    return <div className=\"mx-2 mb-1 mt-3 border-t border-border first:mt-2\" />;\n  }\n  return (\n    <div className=\"mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2\">\n      {children}\n    </div>\n  );\n}\n\nexport interface AppLayoutProps {\n  sidebar: ReactNode;\n  header?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** Flex shell pairing the sidebar rail with an optional header and the routed\n * content area. The content area scrolls independently of the rail. */\nexport function AppLayout({ sidebar, header, children, className }: AppLayoutProps) {\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full overflow-hidden bg-background\", className)}>\n      {sidebar}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {header}\n        <main className=\"min-h-0 min-w-0 flex-1 overflow-y-auto\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","router","useRouter","jsxs","cn","jsx","Icon","UiSidebar","Fragment"],"mappings":"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"}
+{"version":3,"file":"AppSidebar.cjs","sources":["../../src/layout/AppSidebar.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSidebar } from \"../icons\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppSidebar / AppLayout are a router-agnostic application shell: a collapsible\n// left navigation rail driven by declarative sections, plus a flex layout that\n// pairs it with an optional header and the routed content. Navigation and active\n// state come from the RouterAdapter (see ../rpc/router) — by default a plain\n// <a href={to}> browser adapter, or the host's react-router/memory adapter via\n// RouterProvider. The `pathname` and `renderLink` props still override the\n// adapter for cases where a rail's active state is independent of the URL.\n//\n// A section may carry flat `items` and/or collapsible `groups`. Groups are for\n// high-cardinality clusters (e.g. provider surfaces) that benefit from being\n// folded away; their open/closed state persists per `group.key`.\n\nexport interface AppNavItem {\n  /** Stable key; also used as the React key. */\n  key: string;\n  title: string;\n  /** Destination passed to renderLink (or href for external items). */\n  to: string;\n  icon?: ReactNode;\n  /** Render a plain anchor (new-tab style) instead of a routed link. */\n  external?: boolean;\n  /** Optional trailing adornment (count, status dot, etc.). */\n  badge?: ReactNode;\n}\n\nexport interface AppNavGroup {\n  /** Stable key; also the persistence key for collapsed state. */\n  key: string;\n  label: string;\n  icon?: ReactNode;\n  /** Collapsed on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  items?: AppNavItem[];\n  /** Nested groups (one extra level, e.g. Providers > Xero). */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppNavSection {\n  /** Section heading; omitted for the leading section. */\n  label?: string;\n  items?: AppNavItem[];\n  /** Collapsible groups rendered after the flat items. */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppSidebarProps {\n  sections: AppNavSection[];\n  /** Current path for active-state. Defaults to the RouterAdapter's pathname. */\n  pathname?: string;\n  /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain\n   *  <a href={to}> unless a RouterProvider supplies a router Link). */\n  renderLink?: RenderLink;\n  /** Branding shown at the top of the expanded rail (logo/title). */\n  header?: ReactNode;\n  /** Pinned to the bottom of the rail (theme switcher, version, etc.). */\n  footer?: ReactNode;\n  /** localStorage key persisting the rail collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Override the default prefix-match active test. */\n  isActive?: (pathname: string, to: string) => boolean;\n  className?: string;\n}\n\nconst DEFAULT_COLLAPSE_KEY = \"clicky-ui:app-sidebar:collapsed\";\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-sidebar:groups\";\n\nfunction defaultIsActive(pathname: string, to: string): boolean {\n  if (to === \"/\") return pathname === \"/\";\n  return pathname === to || pathname.startsWith(`${to}/`);\n}\n\nfunction useCollapsed(storageKey: string): [boolean, () => void] {\n  const [collapsed, setCollapsed] = useState<boolean>(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.localStorage.getItem(storageKey) === \"true\";\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(storageKey, String(collapsed));\n  }, [collapsed, storageKey]);\n  return [collapsed, () => setCollapsed((c) => !c)];\n}\n\ninterface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\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\" ? (parsed as Record<string, boolean>) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() => readGroupState(storageKey));\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Sidebar 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) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nfunction flattenGroupItems(groups: AppNavGroup[]): AppNavItem[] {\n  const out: AppNavItem[] = [];\n  for (const group of groups) {\n    if (group.items) out.push(...group.items);\n    if (group.groups) out.push(...flattenGroupItems(group.groups));\n  }\n  return out;\n}\n\nexport function AppSidebar({\n  sections,\n  pathname: pathnameProp,\n  renderLink: renderLinkProp,\n  header,\n  footer,\n  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,\n  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,\n  isActive = defaultIsActive,\n  className,\n}: AppSidebarProps) {\n  const router = useRouter();\n  const pathname = pathnameProp ?? router.pathname;\n  const renderLink = renderLinkProp ?? router.renderLink;\n  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);\n  const groupState = useGroupCollapsed(groupCollapsedStorageKey);\n  return (\n    <nav\n      className={cn(\n        \"flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200\",\n        collapsed ? \"w-16\" : \"w-64\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex shrink-0 items-center border-b border-border py-3\",\n          collapsed ? \"justify-center px-2\" : \"justify-between px-4\",\n        )}\n      >\n        {!collapsed && <div className=\"min-w-0 flex-1\">{header}</div>}\n        <button\n          type=\"button\"\n          onClick={toggleCollapsed}\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-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className={cn(\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2\", collapsed ? \"px-2\" : \"px-3\")}>\n        {sections.map((section, i) => (\n          <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n            {section.label && <SectionLabel collapsed={collapsed}>{section.label}</SectionLabel>}\n            {section.items?.map((item) => (\n              <SidebarItem\n                key={item.key}\n                item={item}\n                active={isActive(pathname, item.to)}\n                collapsed={collapsed}\n                renderLink={renderLink}\n              />\n            ))}\n            {section.groups?.map((group) =>\n              collapsed ? (\n                flattenGroupItems([group]).map((item) => (\n                  <SidebarItem\n                    key={item.key}\n                    item={item}\n                    active={isActive(pathname, item.to)}\n                    collapsed\n                    renderLink={renderLink}\n                  />\n                ))\n              ) : (\n                <SidebarGroup\n                  key={group.key}\n                  group={group}\n                  pathname={pathname}\n                  isActive={isActive}\n                  renderLink={renderLink}\n                  groupState={groupState}\n                />\n              ),\n            )}\n          </div>\n        ))}\n      </div>\n\n      {footer && <div className={cn(\"mt-auto border-t border-border py-3\", collapsed ? \"px-2\" : \"px-4\")}>{footer}</div>}\n    </nav>\n  );\n}\n\nfunction SidebarGroup({\n  group,\n  pathname,\n  isActive,\n  renderLink,\n  groupState,\n}: {\n  group: AppNavGroup;\n  pathname: string;\n  isActive: (pathname: string, to: string) => boolean;\n  renderLink: RenderLink;\n  groupState: GroupState;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed = groupState.isCollapsed(group.key, fallback);\n  return (\n    <div className=\"flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={() => groupState.toggle(group.key, fallback)}\n        aria-expanded={!collapsed}\n        className=\"flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40\"\n      >\n        {group.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{group.icon}</span>}\n        <span className=\"flex-1 truncate text-left\">{group.label}</span>\n        <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n          {collapsed ? \"▸\" : \"▾\"}\n        </span>\n      </button>\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2\">\n          {group.items?.map((item) => (\n            <SidebarItem\n              key={item.key}\n              item={item}\n              active={isActive(pathname, item.to)}\n              collapsed={false}\n              renderLink={renderLink}\n            />\n          ))}\n          {group.groups?.map((sub) => (\n            <SidebarGroup\n              key={sub.key}\n              group={sub}\n              pathname={pathname}\n              isActive={isActive}\n              renderLink={renderLink}\n              groupState={groupState}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SidebarItem({\n  item,\n  active,\n  collapsed,\n  renderLink,\n}: {\n  item: AppNavItem;\n  active: boolean;\n  collapsed: boolean;\n  renderLink: RenderLink;\n}) {\n  const className = cn(\n    \"flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    active && \"bg-accent font-medium text-accent-foreground\",\n  );\n  const title = collapsed ? item.title : undefined;\n  const children = (\n    <>\n      {item.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{item.icon}</span>}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.title}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n\n  if (item.external) {\n    return (\n      <a href={item.to} className={className} title={title} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  return renderLink({ key: item.key, to: item.to, className, children, ...(title ? { title } : {}) });\n}\n\nfunction SectionLabel({ children, collapsed }: { children: ReactNode; collapsed: boolean }) {\n  if (collapsed) {\n    return <div className=\"mx-2 mb-1 mt-3 border-t border-border first:mt-2\" />;\n  }\n  return (\n    <div className=\"mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2\">\n      {children}\n    </div>\n  );\n}\n\nexport interface AppLayoutProps {\n  sidebar: ReactNode;\n  header?: ReactNode;\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n  className?: string;\n}\n\n/** Flex shell pairing the sidebar rail with an optional header and the routed\n * content area. The content area scrolls independently of the rail. */\nexport function AppLayout({\n  sidebar,\n  header,\n  children,\n  contentWidth = \"contained\",\n  className,\n}: AppLayoutProps) {\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full overflow-hidden bg-background\", className)}>\n      {sidebar}\n      <div\n        data-slot=\"app-layout-column\"\n        className=\"@container/app-content flex min-w-0 flex-1 flex-col\"\n      >\n        {header && (\n          <div\n            data-slot=\"app-layout-header-content\"\n            data-content-width={contentWidth}\n            className={contentWidthClassName(contentWidth)}\n          >\n            {header}\n          </div>\n        )}\n        <main className=\"min-h-0 min-w-0 flex-1 overflow-y-auto\">\n          <div\n            data-slot=\"app-layout-content\"\n            data-content-width={contentWidth}\n            className={contentWidthClassName(contentWidth)}\n          >\n            {children}\n          </div>\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","router","useRouter","jsxs","cn","jsx","Icon","UiSidebar","Fragment","contentWidth","contentWidthClassName"],"mappings":"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"}

package/dist/layout/AppSidebar.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { RenderLink } from '../rpc/EndpointList';
+import { ContentWidth } from './content-width';
 export interface AppNavItem {
     /** Stable key; also used as the React key. */
     key: string;
@@ -54,9 +55,11 @@ export interface AppLayoutProps {
     sidebar: ReactNode;
     header?: ReactNode;
     children: ReactNode;
+    /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */
+    contentWidth?: ContentWidth;
     className?: string;
 }
 /** Flex shell pairing the sidebar rail with an optional header and the routed
  * content area. The content area scrolls independently of the rail. */
-export declare function AppLayout({ sidebar, header, children, className }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayout({ sidebar, header, children, contentWidth, className, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AppSidebar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.d.ts","sourceRoot":"","sources":["../../src/layout/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAetD,MAAM,WAAW,UAAU;IACzB,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;yEACqE;IACrE,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6DAA6D;IAC7D,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAC1B,MAAM,EACN,MAAM,EACN,mBAA0C,EAC1C,wBAAqD,EACrD,QAA0B,EAC1B,SAAS,GACV,EAAE,eAAe,2CA0EjB;AAwGD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;uEACuE;AACvE,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAUjF"}
+{"version":3,"file":"AppSidebar.d.ts","sourceRoot":"","sources":["../../src/layout/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAczB,MAAM,WAAW,UAAU;IACzB,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;yEACqE;IACrE,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6DAA6D;IAC7D,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAC1B,MAAM,EACN,MAAM,EACN,mBAA0C,EAC1C,wBAAqD,EACrD,QAA0B,EAC1B,SAAS,GACV,EAAE,eAAe,2CA0EjB;AAwGD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,0FAA0F;IAC1F,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;uEACuE;AACvE,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAA0B,EAC1B,SAAS,GACV,EAAE,cAAc,2CA6BhB"}

package/dist/layout/AppSidebar.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { useRouter } from "../rpc/router.js";
+import { contentWidthClassName } from "./content-width.js";
 import { UiSidebar } from "../icons/components/UiSidebar.js";
 const DEFAULT_COLLAPSE_KEY = "clicky-ui:app-sidebar:collapsed";
 const DEFAULT_GROUP_COLLAPSE_KEY = "clicky-ui:app-sidebar:groups";
@@ -223,13 +224,42 @@ function SectionLabel({ children, collapsed }) {
   }
   return /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2", children });
 }
-function AppLayout({ sidebar, header, children, className }) {
+function AppLayout({
+  sidebar,
+  header,
+  children,
+  contentWidth = "contained",
+  className
+}) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className), children: [
     sidebar,
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      header,
-      /* @__PURE__ */ jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "app-layout-column",
+        className: "@container/app-content flex min-w-0 flex-1 flex-col",
+        children: [
+          header && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "app-layout-header-content",
+              "data-content-width": contentWidth,
+              className: contentWidthClassName(contentWidth),
+              children: header
+            }
+          ),
+          /* @__PURE__ */ jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "app-layout-content",
+              "data-content-width": contentWidth,
+              className: contentWidthClassName(contentWidth),
+              children
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 export {