@flanksource/clicky-ui 0.2.19 → 0.2.20

package/dist/layout/AppSidebar.cjs

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const router = require("../rpc/router.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";
+function defaultIsActive(pathname, to) {
+  if (to === "/") return pathname === "/";
+  return pathname === to || pathname.startsWith(`${to}/`);
+}
+function useCollapsed(storageKey) {
+  const [collapsed, setCollapsed] = react.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.localStorage.getItem(storageKey) === "true";
+  });
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(storageKey, String(collapsed));
+  }, [collapsed, storageKey]);
+  return [collapsed, () => setCollapsed((c) => !c)];
+}
+function readGroupState(storageKey) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function useGroupCollapsed(storageKey) {
+  const [state, setState] = react.useState(() => readGroupState(storageKey));
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(state));
+    } catch {
+    }
+  }, [state, storageKey]);
+  return {
+    isCollapsed: (key, fallback) => state[key] ?? fallback,
+    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) }))
+  };
+}
+function flattenGroupItems(groups) {
+  const out = [];
+  for (const group of groups) {
+    if (group.items) out.push(...group.items);
+    if (group.groups) out.push(...flattenGroupItems(group.groups));
+  }
+  return out;
+}
+function AppSidebar({
+  sections,
+  pathname: pathnameProp,
+  renderLink: renderLinkProp,
+  header,
+  footer,
+  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,
+  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,
+  isActive = defaultIsActive,
+  className
+}) {
+  const router$1 = router.useRouter();
+  const pathname = pathnameProp ?? router$1.pathname;
+  const renderLink = renderLinkProp ?? router$1.renderLink;
+  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);
+  const groupState = useGroupCollapsed(groupCollapsedStorageKey);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: utils.cn(
+        "flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200",
+        collapsed ? "w-16" : "w-64",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex shrink-0 items-center border-b border-border py-3",
+              collapsed ? "justify-center px-2" : "justify-between px-4"
+            ),
+            children: [
+              !collapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: toggleCollapsed,
+                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  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",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSidebar.UiSidebar, className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2", collapsed ? "px-2" : "px-3"), children: sections.map((section, i) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            section.label && /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { collapsed, children: section.label }),
+            (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarItem,
+              {
+                item,
+                active: isActive(pathname, item.to),
+                collapsed,
+                renderLink
+              },
+              item.key
+            )),
+            (_b = section.groups) == null ? void 0 : _b.map(
+              (group) => collapsed ? flattenGroupItems([group]).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarItem,
+                {
+                  item,
+                  active: isActive(pathname, item.to),
+                  collapsed: true,
+                  renderLink
+                },
+                item.key
+              )) : /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarGroup,
+                {
+                  group,
+                  pathname,
+                  isActive,
+                  renderLink,
+                  groupState
+                },
+                group.key
+              )
+            )
+          ] }, section.label ?? `section-${i}`);
+        }) }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("mt-auto border-t border-border py-3", collapsed ? "px-2" : "px-4"), children: footer })
+      ]
+    }
+  );
+}
+function SidebarGroup({
+  group,
+  pathname,
+  isActive,
+  renderLink,
+  groupState
+}) {
+  var _a, _b;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = groupState.isCollapsed(group.key, fallback);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => groupState.toggle(group.key, fallback),
+        "aria-expanded": !collapsed,
+        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",
+        children: [
+          group.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: group.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" })
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2", children: [
+      (_a = group.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarItem,
+        {
+          item,
+          active: isActive(pathname, item.to),
+          collapsed: false,
+          renderLink
+        },
+        item.key
+      )),
+      (_b = group.groups) == null ? void 0 : _b.map((sub) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarGroup,
+        {
+          group: sub,
+          pathname,
+          isActive,
+          renderLink,
+          groupState
+        },
+        sub.key
+      ))
+    ] })
+  ] });
+}
+function SidebarItem({
+  item,
+  active,
+  collapsed,
+  renderLink
+}) {
+  const className = utils.cn(
+    "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",
+    collapsed && "justify-center px-0",
+    active && "bg-accent font-medium text-accent-foreground"
+  );
+  const title = collapsed ? item.title : void 0;
+  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: item.icon }),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.title }),
+    !collapsed && item.badge
+  ] });
+  if (item.external) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.to, className, title, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return renderLink({ key: item.key, to: item.to, className, children, ...title ? { title } : {} });
+}
+function SectionLabel({ children, collapsed }) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-border first:mt-2" });
+  }
+  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 }) {
+  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 })
+    ] })
+  ] });
+}
+exports.AppLayout = AppLayout;
+exports.AppSidebar = AppSidebar;
+//# sourceMappingURL=AppSidebar.cjs.map

package/dist/layout/AppSidebar.cjs.map

@@ -0,0 +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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"}

package/dist/layout/AppSidebar.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { RenderLink } from '../rpc/EndpointList';
+export interface AppNavItem {
+    /** Stable key; also used as the React key. */
+    key: string;
+    title: string;
+    /** Destination passed to renderLink (or href for external items). */
+    to: string;
+    icon?: ReactNode;
+    /** Render a plain anchor (new-tab style) instead of a routed link. */
+    external?: boolean;
+    /** Optional trailing adornment (count, status dot, etc.). */
+    badge?: ReactNode;
+}
+export interface AppNavGroup {
+    /** Stable key; also the persistence key for collapsed state. */
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    /** Collapsed on first render until the user toggles it. */
+    defaultCollapsed?: boolean;
+    items?: AppNavItem[];
+    /** Nested groups (one extra level, e.g. Providers > Xero). */
+    groups?: AppNavGroup[];
+}
+export interface AppNavSection {
+    /** Section heading; omitted for the leading section. */
+    label?: string;
+    items?: AppNavItem[];
+    /** Collapsible groups rendered after the flat items. */
+    groups?: AppNavGroup[];
+}
+export interface AppSidebarProps {
+    sections: AppNavSection[];
+    /** Current path for active-state. Defaults to the RouterAdapter's pathname. */
+    pathname?: string;
+    /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain
+     *  <a href={to}> unless a RouterProvider supplies a router Link). */
+    renderLink?: RenderLink;
+    /** Branding shown at the top of the expanded rail (logo/title). */
+    header?: ReactNode;
+    /** Pinned to the bottom of the rail (theme switcher, version, etc.). */
+    footer?: ReactNode;
+    /** localStorage key persisting the rail collapsed state. */
+    collapsedStorageKey?: string;
+    /** localStorage key persisting per-group collapsed state. */
+    groupCollapsedStorageKey?: string;
+    /** Override the default prefix-match active test. */
+    isActive?: (pathname: string, to: string) => boolean;
+    className?: string;
+}
+export declare function AppSidebar({ sections, pathname: pathnameProp, renderLink: renderLinkProp, header, footer, collapsedStorageKey, groupCollapsedStorageKey, isActive, className, }: AppSidebarProps): import("react/jsx-runtime").JSX.Element;
+export interface AppLayoutProps {
+    sidebar: ReactNode;
+    header?: ReactNode;
+    children: ReactNode;
+    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;
+//# sourceMappingURL=AppSidebar.d.ts.map

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

@@ -0,0 +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"}

package/dist/layout/AppSidebar.js

@@ -0,0 +1,239 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { useRouter } from "../rpc/router.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";
+function defaultIsActive(pathname, to) {
+  if (to === "/") return pathname === "/";
+  return pathname === to || pathname.startsWith(`${to}/`);
+}
+function useCollapsed(storageKey) {
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.localStorage.getItem(storageKey) === "true";
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(storageKey, String(collapsed));
+  }, [collapsed, storageKey]);
+  return [collapsed, () => setCollapsed((c) => !c)];
+}
+function readGroupState(storageKey) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function useGroupCollapsed(storageKey) {
+  const [state, setState] = useState(() => readGroupState(storageKey));
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(state));
+    } catch {
+    }
+  }, [state, storageKey]);
+  return {
+    isCollapsed: (key, fallback) => state[key] ?? fallback,
+    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) }))
+  };
+}
+function flattenGroupItems(groups) {
+  const out = [];
+  for (const group of groups) {
+    if (group.items) out.push(...group.items);
+    if (group.groups) out.push(...flattenGroupItems(group.groups));
+  }
+  return out;
+}
+function AppSidebar({
+  sections,
+  pathname: pathnameProp,
+  renderLink: renderLinkProp,
+  header,
+  footer,
+  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,
+  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,
+  isActive = defaultIsActive,
+  className
+}) {
+  const router = useRouter();
+  const pathname = pathnameProp ?? router.pathname;
+  const renderLink = renderLinkProp ?? router.renderLink;
+  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);
+  const groupState = useGroupCollapsed(groupCollapsedStorageKey);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cn(
+        "flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200",
+        collapsed ? "w-16" : "w-64",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center border-b border-border py-3",
+              collapsed ? "justify-center px-2" : "justify-between px-4"
+            ),
+            children: [
+              !collapsed && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: toggleCollapsed,
+                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  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",
+                  children: /* @__PURE__ */ jsx(Icon, { icon: UiSidebar, className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2", collapsed ? "px-2" : "px-3"), children: sections.map((section, i) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            section.label && /* @__PURE__ */ jsx(SectionLabel, { collapsed, children: section.label }),
+            (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
+              SidebarItem,
+              {
+                item,
+                active: isActive(pathname, item.to),
+                collapsed,
+                renderLink
+              },
+              item.key
+            )),
+            (_b = section.groups) == null ? void 0 : _b.map(
+              (group) => collapsed ? flattenGroupItems([group]).map((item) => /* @__PURE__ */ jsx(
+                SidebarItem,
+                {
+                  item,
+                  active: isActive(pathname, item.to),
+                  collapsed: true,
+                  renderLink
+                },
+                item.key
+              )) : /* @__PURE__ */ jsx(
+                SidebarGroup,
+                {
+                  group,
+                  pathname,
+                  isActive,
+                  renderLink,
+                  groupState
+                },
+                group.key
+              )
+            )
+          ] }, section.label ?? `section-${i}`);
+        }) }),
+        footer && /* @__PURE__ */ jsx("div", { className: cn("mt-auto border-t border-border py-3", collapsed ? "px-2" : "px-4"), children: footer })
+      ]
+    }
+  );
+}
+function SidebarGroup({
+  group,
+  pathname,
+  isActive,
+  renderLink,
+  groupState
+}) {
+  var _a, _b;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = groupState.isCollapsed(group.key, fallback);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => groupState.toggle(group.key, fallback),
+        "aria-expanded": !collapsed,
+        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",
+        children: [
+          group.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: group.icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" })
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2", children: [
+      (_a = group.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
+        SidebarItem,
+        {
+          item,
+          active: isActive(pathname, item.to),
+          collapsed: false,
+          renderLink
+        },
+        item.key
+      )),
+      (_b = group.groups) == null ? void 0 : _b.map((sub) => /* @__PURE__ */ jsx(
+        SidebarGroup,
+        {
+          group: sub,
+          pathname,
+          isActive,
+          renderLink,
+          groupState
+        },
+        sub.key
+      ))
+    ] })
+  ] });
+}
+function SidebarItem({
+  item,
+  active,
+  collapsed,
+  renderLink
+}) {
+  const className = cn(
+    "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",
+    collapsed && "justify-center px-0",
+    active && "bg-accent font-medium text-accent-foreground"
+  );
+  const title = collapsed ? item.title : void 0;
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: item.icon }),
+    !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.title }),
+    !collapsed && item.badge
+  ] });
+  if (item.external) {
+    return /* @__PURE__ */ jsx("a", { href: item.to, className, title, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return renderLink({ key: item.key, to: item.to, className, children, ...title ? { title } : {} });
+}
+function SectionLabel({ children, collapsed }) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-border first:mt-2" });
+  }
+  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 }) {
+  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 })
+    ] })
+  ] });
+}
+export {
+  AppLayout,
+  AppSidebar
+};
+//# sourceMappingURL=AppSidebar.js.map

package/dist/layout/AppSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.js","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":[],"mappings":"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"}