@flanksource/clicky-ui 0.3.17 → 0.3.19

package/dist/layout/AppShell.nav.cjs

@@ -7,6 +7,7 @@ const router = require("../rpc/router.cjs");
 function NavSections({
   sections,
   collapsed,
+  groupState,
   onNavigate
 }) {
   const { renderLink } = router.useRouter();
@@ -17,28 +18,152 @@ function NavSections({
         "flex flex-col gap-0.5",
         collapsed ? "px-2" : "px-density-2"
       ),
-      children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+      children: sections.map((section, index) => {
+        var _a, _b;
+        return /* @__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 })),
+              (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                NavItemRow,
+                {
+                  item,
+                  collapsed,
+                  renderLink,
+                  ...onNavigate ? { onNavigate } : {}
+                },
+                item.key
+              )),
+              (_b = section.groups) == null ? void 0 : _b.map(
+                (group) => (
+                  // A collapsed rail has no room for group headings, so the whole
+                  // subtree flattens into the icon strip rather than hiding behind
+                  // toggles the user cannot see.
+                  collapsed ? flattenGroup(group).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                    NavItemRow,
+                    {
+                      item,
+                      collapsed: true,
+                      renderLink,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    item.key
+                  )) : /* @__PURE__ */ jsxRuntime.jsx(
+                    NavGroupRows,
+                    {
+                      group,
+                      variant: section.variant ?? "list",
+                      renderLink,
+                      groupState,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    group.key
+                  )
+                )
+              )
+            ]
+          },
+          section.label ?? `section-${index}`
+        );
+      })
+    }
+  );
+}
+function flattenGroup(group) {
+  return [
+    ...group.item ? [group.item] : [],
+    ...group.items,
+    ...(group.groups ?? []).flatMap(flattenGroup)
+  ];
+}
+function NavGroupRows({
+  group,
+  variant,
+  renderLink,
+  groupState,
+  onNavigate
+}) {
+  var _a;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
+  const toggle = () => groupState.toggle(group.key, fallback);
+  const chevron = /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" });
+  const groupIcon = group.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Icon.Icon,
+    {
+      ...typeof group.icon === "string" ? { name: group.icon } : { icon: group.icon }
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    group.item ? (
+      // Folder AND leaf: the link and the disclosure are siblings. Nesting a
+      // button inside the anchor would be invalid DOM and would make the
+      // click target ambiguous.
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/nav flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          NavItemRow,
+          {
+            item: group.item,
+            collapsed: false,
+            renderLink,
+            ...onNavigate ? { onNavigate } : {}
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            "aria-expanded": !collapsed,
+            "aria-label": `${collapsed ? "Expand" : "Collapse"} ${group.label}`,
+            className: "shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            children: chevron
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": !collapsed,
+        className: utils.cn(
+          "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55"
+        ),
+        children: [
+          groupIcon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          chevron
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2", children: [
+      group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        NavItemRow,
+        {
+          item,
+          collapsed: false,
+          renderLink,
+          ...onNavigate ? { onNavigate } : {}
+        },
+        item.key
+      )),
+      (_a = group.groups) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+        NavGroupRows,
         {
-          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
-            ))
-          ]
+          group: child,
+          variant,
+          renderLink,
+          groupState,
+          ...onNavigate ? { onNavigate } : {}
         },
-        section.label ?? `section-${index}`
+        child.key
       ))
-    }
-  );
+    ] })
+  ] });
 }
 function NavItemRow({
   item,

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

@@ -1 +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;;"}
+{"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 {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\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          {section.groups?.map((group) =>\n            // A collapsed rail has no room for group headings, so the whole\n            // subtree flattens into the icon strip rather than hiding behind\n            // toggles the user cannot see.\n            collapsed\n              ? flattenGroup(group).map((item) => (\n                  <NavItemRow\n                    key={item.key}\n                    item={item}\n                    collapsed\n                    renderLink={renderLink}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ))\n              : (\n                  <NavGroupRows\n                    key={group.key}\n                    group={group}\n                    variant={section.variant ?? \"list\"}\n                    renderLink={renderLink}\n                    groupState={groupState}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ),\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  variant,\n  renderLink,\n  groupState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  variant: \"list\" | \"tree\";\n  renderLink: RenderLink;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div className=\"group/nav flex items-center gap-1\">\n          <div className=\"min-w-0 flex-1\">\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={!collapsed}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            variant === \"tree\"\n              ? \"text-[13px] text-sidebar-foreground\"\n              : \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n          )}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {chevron}\n        </button>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {group.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              variant={variant}\n              renderLink={renderLink}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\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","Icon","Fragment"],"mappings":"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"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"AppShell.nav.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.nav.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAOpB,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC;IACzD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,2CA4DA"}

package/dist/layout/AppShell.nav.js

@@ -5,6 +5,7 @@ import { useRouter } from "../rpc/router.js";
 function NavSections({
   sections,
   collapsed,
+  groupState,
   onNavigate
 }) {
   const { renderLink } = useRouter();
@@ -15,28 +16,152 @@ function NavSections({
         "flex flex-col gap-0.5",
         collapsed ? "px-2" : "px-density-2"
       ),
-      children: sections.map((section, index) => /* @__PURE__ */ jsxs(
-        "div",
+      children: sections.map((section, index) => {
+        var _a, _b;
+        return /* @__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 })),
+              (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
+                NavItemRow,
+                {
+                  item,
+                  collapsed,
+                  renderLink,
+                  ...onNavigate ? { onNavigate } : {}
+                },
+                item.key
+              )),
+              (_b = section.groups) == null ? void 0 : _b.map(
+                (group) => (
+                  // A collapsed rail has no room for group headings, so the whole
+                  // subtree flattens into the icon strip rather than hiding behind
+                  // toggles the user cannot see.
+                  collapsed ? flattenGroup(group).map((item) => /* @__PURE__ */ jsx(
+                    NavItemRow,
+                    {
+                      item,
+                      collapsed: true,
+                      renderLink,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    item.key
+                  )) : /* @__PURE__ */ jsx(
+                    NavGroupRows,
+                    {
+                      group,
+                      variant: section.variant ?? "list",
+                      renderLink,
+                      groupState,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    group.key
+                  )
+                )
+              )
+            ]
+          },
+          section.label ?? `section-${index}`
+        );
+      })
+    }
+  );
+}
+function flattenGroup(group) {
+  return [
+    ...group.item ? [group.item] : [],
+    ...group.items,
+    ...(group.groups ?? []).flatMap(flattenGroup)
+  ];
+}
+function NavGroupRows({
+  group,
+  variant,
+  renderLink,
+  groupState,
+  onNavigate
+}) {
+  var _a;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
+  const toggle = () => groupState.toggle(group.key, fallback);
+  const chevron = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" });
+  const groupIcon = group.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      ...typeof group.icon === "string" ? { name: group.icon } : { icon: group.icon }
+    }
+  ) });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    group.item ? (
+      // Folder AND leaf: the link and the disclosure are siblings. Nesting a
+      // button inside the anchor would be invalid DOM and would make the
+      // click target ambiguous.
+      /* @__PURE__ */ jsxs("div", { className: "group/nav flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+          NavItemRow,
+          {
+            item: group.item,
+            collapsed: false,
+            renderLink,
+            ...onNavigate ? { onNavigate } : {}
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            "aria-expanded": !collapsed,
+            "aria-label": `${collapsed ? "Expand" : "Collapse"} ${group.label}`,
+            className: "shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            children: chevron
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": !collapsed,
+        className: cn(
+          "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55"
+        ),
+        children: [
+          groupIcon,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          chevron
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2", children: [
+      group.items.map((item) => /* @__PURE__ */ jsx(
+        NavItemRow,
+        {
+          item,
+          collapsed: false,
+          renderLink,
+          ...onNavigate ? { onNavigate } : {}
+        },
+        item.key
+      )),
+      (_a = group.groups) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsx(
+        NavGroupRows,
         {
-          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
-            ))
-          ]
+          group: child,
+          variant,
+          renderLink,
+          groupState,
+          ...onNavigate ? { onNavigate } : {}
         },
-        section.label ?? `section-${index}`
+        child.key
       ))
-    }
-  );
+    ] })
+  ] });
 }
 function NavItemRow({
   item,

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

@@ -1 +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;"}
+{"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 {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\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          {section.groups?.map((group) =>\n            // A collapsed rail has no room for group headings, so the whole\n            // subtree flattens into the icon strip rather than hiding behind\n            // toggles the user cannot see.\n            collapsed\n              ? flattenGroup(group).map((item) => (\n                  <NavItemRow\n                    key={item.key}\n                    item={item}\n                    collapsed\n                    renderLink={renderLink}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ))\n              : (\n                  <NavGroupRows\n                    key={group.key}\n                    group={group}\n                    variant={section.variant ?? \"list\"}\n                    renderLink={renderLink}\n                    groupState={groupState}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ),\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  variant,\n  renderLink,\n  groupState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  variant: \"list\" | \"tree\";\n  renderLink: RenderLink;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div className=\"group/nav flex items-center gap-1\">\n          <div className=\"min-w-0 flex-1\">\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={!collapsed}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            variant === \"tree\"\n              ? \"text-[13px] text-sidebar-foreground\"\n              : \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n          )}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {chevron}\n        </button>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {group.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              variant={variant}\n              renderLink={renderLink}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\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":"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"}

package/dist/layout/SplitPane.cjs

@@ -11,7 +11,8 @@ function SplitPane({
   minRight = 20,
   leftClass,
   rightClass,
-  className
+  className,
+  stackOnMobile = false
 }) {
   const [split, setSplit] = react.useState(defaultSplit);
   const dragging = react.useRef(false);
@@ -44,13 +45,21 @@ function SplitPane({
     "div",
     {
       ref: container,
-      className: utils.cn("flex flex-1 overflow-hidden h-full", className),
+      className: utils.cn(
+        "flex h-full flex-1 overflow-hidden",
+        stackOnMobile && "flex-col md:flex-row",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: { width: `${split}%` },
-            className: utils.cn("overflow-y-auto bg-background min-h-0", leftClass),
+            style: stackOnMobile ? { "--split-pane-width": `${split}%` } : { width: `${split}%` },
+            className: utils.cn(
+              "min-h-0 overflow-y-auto bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              leftClass
+            ),
             children: left
           }
         ),
@@ -59,15 +68,22 @@ function SplitPane({
           {
             role: "separator",
             "aria-orientation": "vertical",
-            className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
+            className: utils.cn(
+              "w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary",
+              stackOnMobile && "hidden md:block"
+            ),
             onMouseDown
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: { width: `${100 - split}%` },
-            className: utils.cn("overflow-hidden bg-background min-h-0", rightClass),
+            style: stackOnMobile ? { "--split-pane-width": `${100 - split}%` } : { width: `${100 - split}%` },
+            className: utils.cn(
+              "min-h-0 overflow-hidden bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              rightClass
+            ),
             children: right
           }
         )

package/dist/layout/SplitPane.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.cjs","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div\n      ref={container}\n      className={cn(\"flex flex-1 overflow-hidden h-full\", className)}\n    >\n      <div\n        style={{ width: `${split}%` }}\n        className={cn(\"overflow-y-auto bg-background min-h-0\", leftClass)}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors\"\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={{ width: `${100 - split}%` }}\n        className={cn(\"overflow-hidden bg-background min-h-0\", rightClass)}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useRef","useCallback","jsxs","cn","jsx"],"mappings":";;;;;AAsBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,YAAY;AAC/C,QAAM,WAAWC,MAAAA,OAAO,KAAK;AAC7B,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAE7C,QAAM,cAAcC,MAAAA;AAAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,sCAAsC,SAAS;AAAA,MAE7D,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YACxB,WAAWD,MAAAA,GAAG,yCAAyC,SAAS;AAAA,YAE/D,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEHC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAU;AAAA,YACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAC9B,WAAWD,MAAAA,GAAG,yCAAyC,UAAU;AAAA,YAEhE,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"SplitPane.cjs","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n  /** Stack the panes and hide the resize handle below the `md` breakpoint. */\n  stackOnMobile?: boolean;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n  stackOnMobile = false,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div\n      ref={container}\n      className={cn(\n        \"flex h-full flex-1 overflow-hidden\",\n        stackOnMobile && \"flex-col md:flex-row\",\n        className,\n      )}\n    >\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${split}%` } as CSSProperties)\n            : { width: `${split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-y-auto bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          leftClass,\n        )}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary\",\n          stackOnMobile && \"hidden md:block\",\n        )}\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${100 - split}%` } as CSSProperties)\n            : { width: `${100 - split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-hidden bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          rightClass,\n        )}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useRef","useCallback","jsxs","cn","jsx"],"mappings":";;;;;AA8BO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,YAAY;AAC/C,QAAM,WAAWC,MAAAA,OAAO,KAAK;AAC7B,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAE7C,QAAM,cAAcC,MAAAA;AAAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OACE,gBACK,EAAE,sBAAsB,GAAG,KAAK,IAAA,IACjC,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YAEvB,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEHC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,iBAAiB;AAAA,YAAA;AAAA,YAEnB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,KAAK,IAAA,IACvC,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAE7B,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/layout/SplitPane.d.ts

@@ -16,6 +16,8 @@ export type SplitPaneProps = {
     rightClass?: string;
     /** Classes applied to the root split container. */
     className?: string;
+    /** Stack the panes and hide the resize handle below the `md` breakpoint. */
+    stackOnMobile?: boolean;
 };
-export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, stackOnMobile, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SplitPane.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,cAAc,2CA0DhB"}
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAqB,GACtB,EAAE,cAAc,2CAiFhB"}

package/dist/layout/SplitPane.js

@@ -9,7 +9,8 @@ function SplitPane({
   minRight = 20,
   leftClass,
   rightClass,
-  className
+  className,
+  stackOnMobile = false
 }) {
   const [split, setSplit] = useState(defaultSplit);
   const dragging = useRef(false);
@@ -42,13 +43,21 @@ function SplitPane({
     "div",
     {
       ref: container,
-      className: cn("flex flex-1 overflow-hidden h-full", className),
+      className: cn(
+        "flex h-full flex-1 overflow-hidden",
+        stackOnMobile && "flex-col md:flex-row",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            style: { width: `${split}%` },
-            className: cn("overflow-y-auto bg-background min-h-0", leftClass),
+            style: stackOnMobile ? { "--split-pane-width": `${split}%` } : { width: `${split}%` },
+            className: cn(
+              "min-h-0 overflow-y-auto bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              leftClass
+            ),
             children: left
           }
         ),
@@ -57,15 +66,22 @@ function SplitPane({
           {
             role: "separator",
             "aria-orientation": "vertical",
-            className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
+            className: cn(
+              "w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary",
+              stackOnMobile && "hidden md:block"
+            ),
             onMouseDown
           }
         ),
         /* @__PURE__ */ jsx(
           "div",
           {
-            style: { width: `${100 - split}%` },
-            className: cn("overflow-hidden bg-background min-h-0", rightClass),
+            style: stackOnMobile ? { "--split-pane-width": `${100 - split}%` } : { width: `${100 - split}%` },
+            className: cn(
+              "min-h-0 overflow-hidden bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              rightClass
+            ),
             children: right
           }
         )