@withpotter/pages-admin 0.13.0-next.73 → 0.13.0-next.74

package/dist/admin/_shell/nav-fold.js

@@ -5,10 +5,10 @@ const FOLDABLE_GROUPS = /* @__PURE__ */ new Set([
   "Platform"
 ]);
 const foldsGroup = (label, rows, collapsed) => label !== null && FOLDABLE_GROUPS.has(label) && rows > 1 && !collapsed;
-const isGroupClosed = (folded, label, containsActive) => !containsActive && folded[label] === true;
+const isGroupOpen = (choice, label, containsActive) => choice === void 0 ? containsActive : choice === label;
 export {
   FOLDABLE_GROUPS,
   foldsGroup,
-  isGroupClosed
+  isGroupOpen
 };
 //# sourceMappingURL=nav-fold.js.map

package/dist/admin/_shell/nav-fold.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/_shell/nav-fold.ts"],"sourcesContent":["/**\n * Which sidebar groups can fold, and which are folded. Pure, so it is tested\n * without a browser. The merchant rail's NavSection follows the same rules.\n */\n\n/** Folded groups by label; a group not listed is open. */\nexport type FoldMap = Record<string, boolean>;\n\n/** The groups that fold; every other group keeps its plain heading. */\nexport const FOLDABLE_GROUPS: ReadonlySet<string> = new Set([\n  'Workspaces',\n  'Operations',\n  'Inbox',\n  'Platform',\n]);\n\n/**\n * A group folds only when it is one of those, has more than one row to hide,\n * and the rail is wide: the icon-only rail has no headings to press.\n */\nexport const foldsGroup = (\n  label: string | null,\n  rows: number,\n  collapsed: boolean,\n): label is string =>\n  label !== null && FOLDABLE_GROUPS.has(label) && rows > 1 && !collapsed;\n\n/**\n * Folded by the admin's choice, except while the group owns the current page:\n * shut, the page you are on would have no lit row anywhere in the nav.\n */\nexport const isGroupClosed = (\n  folded: FoldMap,\n  label: string,\n  containsActive: boolean,\n) => !containsActive && folded[label] === true;\n"],"mappings":"AASO,MAAM,kBAAuC,oBAAI,IAAI;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAMM,MAAM,aAAa,CACxB,OACA,MACA,cAEA,UAAU,QAAQ,gBAAgB,IAAI,KAAK,KAAK,OAAO,KAAK,CAAC;AAMxD,MAAM,gBAAgB,CAC3B,QACA,OACA,mBACG,CAAC,kBAAkB,OAAO,KAAK,MAAM;","names":[]}
+{"version":3,"sources":["../../../src/admin/_shell/nav-fold.ts"],"sourcesContent":["/**\n * Which sidebar groups fold, and which one is open. Pure, so it is tested\n * without a browser. The merchant rail's hubs follow the same rules.\n */\n\n/** The group the admin opened: one, none, or no choice yet (`undefined`). */\nexport type GroupChoice = string | null | undefined;\n\n/** The groups that fold; every other group keeps its plain heading. */\nexport const FOLDABLE_GROUPS: ReadonlySet<string> = new Set([\n  'Workspaces',\n  'Operations',\n  'Inbox',\n  'Platform',\n]);\n\n/**\n * A group folds only when it is one of those, has more than one row to hide,\n * and the rail is wide: the icon-only rail has no headings to press.\n */\nexport const foldsGroup = (\n  label: string | null,\n  rows: number,\n  collapsed: boolean,\n): label is string =>\n  label !== null && FOLDABLE_GROUPS.has(label) && rows > 1 && !collapsed;\n\n/**\n * With no choice yet the group that owns the current page is open, so the page\n * you are on always has a lit row. Once a group is chosen it is the only one\n * open: opening a second closes the first, and choosing none closes them all.\n */\nexport const isGroupOpen = (\n  choice: GroupChoice,\n  label: string,\n  containsActive: boolean,\n) => (choice === undefined ? containsActive : choice === label);\n"],"mappings":"AASO,MAAM,kBAAuC,oBAAI,IAAI;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAMM,MAAM,aAAa,CACxB,OACA,MACA,cAEA,UAAU,QAAQ,gBAAgB,IAAI,KAAK,KAAK,OAAO,KAAK,CAAC;AAOxD,MAAM,cAAc,CACzB,QACA,OACA,mBACI,WAAW,SAAY,iBAAiB,WAAW;","names":[]}

package/dist/admin/_shell/nav-group.js

@@ -1,21 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { eases } from "@withpotter/lib/motion";
 import { isActive } from "./nav-filter";
-import { foldsGroup } from "./nav-fold";
+import { foldsGroup, isGroupOpen } from "./nav-fold";
 import { NavRow } from "./nav-row";
-import { useGroupFold } from "./use-group-fold";
 import styles from "./sidebar.module.css";
 function NavGroupView({
   group,
   pathname,
   collapsed,
-  canSupport
+  canSupport,
+  choice,
+  onToggle
 }) {
+  const reduced = useReducedMotion();
   const { label, items } = group;
   const containsActive = items.some((item) => isActive(item, pathname));
-  const { closed, toggle } = useGroupFold(label ?? "", containsActive);
-  const folds = foldsGroup(label, items.length, collapsed);
   const rows = items.map((item) => /* @__PURE__ */ jsx(
     NavRow,
     {
@@ -26,34 +28,41 @@ function NavGroupView({
     },
     item.href
   ));
-  if (!folds)
+  if (!foldsGroup(label, items.length, collapsed))
     return /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
       label && /* @__PURE__ */ jsx("div", { className: styles.groupLabel, children: label }),
       rows
     ] });
+  const open = isGroupOpen(choice, label, containsActive);
   return /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         className: `${styles.groupLabel} ${styles.groupToggle}`,
-        "aria-expanded": !closed,
-        onClick: toggle,
+        "aria-expanded": open,
+        onClick: () => onToggle(label, !open),
         children: [
           /* @__PURE__ */ jsx("span", { children: label }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              size: 14,
-              className: styles.groupChevron,
-              "data-closed": closed,
-              "aria-hidden": true
-            }
-          )
+          /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: styles.groupChevron, "aria-hidden": true })
         ]
       }
     ),
-    !closed && rows
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: styles.groupRows,
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: reduced ? { duration: 0 } : {
+          height: { duration: 0.24, ease: eases.settle },
+          opacity: { duration: 0.16, ease: eases.out }
+        },
+        style: { overflow: "hidden" },
+        children: rows
+      }
+    ) })
   ] });
 }
 export {

package/dist/admin/_shell/nav-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/_shell/nav-group.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport type { NavGroup } from './nav-config';\nimport { isActive } from './nav-filter';\nimport { foldsGroup } from './nav-fold';\nimport { NavRow } from './nav-row';\nimport { useGroupFold } from './use-group-fold';\nimport styles from './sidebar.module.css';\n\n/**\n * One sidebar group. With a heading and more than one row, the heading is a\n * button that folds the rows away; the choice is remembered. The group that\n * holds the current page stays open, and the icon-only rail shows every row.\n */\nexport function NavGroupView({\n  group,\n  pathname,\n  collapsed,\n  canSupport,\n}: {\n  group: NavGroup;\n  pathname: string;\n  collapsed: boolean;\n  canSupport: boolean;\n}) {\n  const { label, items } = group;\n  const containsActive = items.some((item) => isActive(item, pathname));\n  const { closed, toggle } = useGroupFold(label ?? '', containsActive);\n  const folds = foldsGroup(label, items.length, collapsed);\n\n  const rows = items.map((item) => (\n    <NavRow\n      key={item.href}\n      item={item}\n      active={isActive(item, pathname)}\n      collapsed={collapsed}\n      canSupport={canSupport}\n    />\n  ));\n\n  if (!folds)\n    return (\n      <div className={styles.group}>\n        {label && <div className={styles.groupLabel}>{label}</div>}\n        {rows}\n      </div>\n    );\n\n  return (\n    <div className={styles.group}>\n      <button\n        type=\"button\"\n        className={`${styles.groupLabel} ${styles.groupToggle}`}\n        aria-expanded={!closed}\n        onClick={toggle}\n      >\n        <span>{label}</span>\n        <ChevronDown\n          size={14}\n          className={styles.groupChevron}\n          data-closed={closed}\n          aria-hidden\n        />\n      </button>\n      {/* Not drawn while folded: the hover glide measures every row it finds. */}\n      {!closed && rows}\n    </div>\n  );\n}\n"],"mappings":";AAgCI,cAWE,YAXF;AA9BJ,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AAOZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,EAAE,OAAO,MAAM,IAAI;AACzB,QAAM,iBAAiB,MAAM,KAAK,CAAC,SAAS,SAAS,MAAM,QAAQ,CAAC;AACpE,QAAM,EAAE,QAAQ,OAAO,IAAI,aAAa,SAAS,IAAI,cAAc;AACnE,QAAM,QAAQ,WAAW,OAAO,MAAM,QAAQ,SAAS;AAEvD,QAAM,OAAO,MAAM,IAAI,CAAC,SACtB;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA,QAAQ,SAAS,MAAM,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA;AAAA,IAJK,KAAK;AAAA,EAKZ,CACD;AAED,MAAI,CAAC;AACH,WACE,qBAAC,SAAI,WAAW,OAAO,OACpB;AAAA,eAAS,oBAAC,SAAI,WAAW,OAAO,YAAa,iBAAM;AAAA,MACnD;AAAA,OACH;AAGJ,SACE,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,GAAG,OAAO,UAAU,IAAI,OAAO,WAAW;AAAA,QACrD,iBAAe,CAAC;AAAA,QAChB,SAAS;AAAA,QAET;AAAA,8BAAC,UAAM,iBAAM;AAAA,UACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAW,OAAO;AAAA,cAClB,eAAa;AAAA,cACb,eAAW;AAAA;AAAA,UACb;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,CAAC,UAAU;AAAA,KACd;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/admin/_shell/nav-group.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { eases } from '@withpotter/lib/motion';\nimport type { NavGroup } from './nav-config';\nimport { isActive } from './nav-filter';\nimport { foldsGroup, isGroupOpen, type GroupChoice } from './nav-fold';\nimport { NavRow } from './nav-row';\nimport styles from './sidebar.module.css';\n\n/**\n * One sidebar group. With a heading and more than one row, the heading is a\n * button that opens and closes the rows, and only one group is open at a time.\n * The group holding the current page is open until another is chosen, and the\n * icon-only rail shows every row.\n */\nexport function NavGroupView({\n  group,\n  pathname,\n  collapsed,\n  canSupport,\n  choice,\n  onToggle,\n}: {\n  group: NavGroup;\n  pathname: string;\n  collapsed: boolean;\n  canSupport: boolean;\n  choice: GroupChoice;\n  onToggle: (label: string, next: boolean) => void;\n}) {\n  const reduced = useReducedMotion();\n  const { label, items } = group;\n  const containsActive = items.some((item) => isActive(item, pathname));\n\n  const rows = items.map((item) => (\n    <NavRow\n      key={item.href}\n      item={item}\n      active={isActive(item, pathname)}\n      collapsed={collapsed}\n      canSupport={canSupport}\n    />\n  ));\n\n  if (!foldsGroup(label, items.length, collapsed))\n    return (\n      <div className={styles.group}>\n        {label && <div className={styles.groupLabel}>{label}</div>}\n        {rows}\n      </div>\n    );\n\n  const open = isGroupOpen(choice, label, containsActive);\n\n  return (\n    <div className={styles.group}>\n      <button\n        type=\"button\"\n        className={`${styles.groupLabel} ${styles.groupToggle}`}\n        aria-expanded={open}\n        onClick={() => onToggle(label, !open)}\n      >\n        <span>{label}</span>\n        <ChevronDown size={14} className={styles.groupChevron} aria-hidden />\n      </button>\n      {/* The rows grow and collapse rather than blink, as the merchant rail's\n          hubs do: height so the groups below move with them, opacity finishing\n          early on the way in. Clipped, or the rows spill past the closing box. */}\n      <AnimatePresence initial={false}>\n        {open && (\n          <motion.div\n            className={styles.groupRows}\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={\n              reduced\n                ? { duration: 0 }\n                : {\n                    height: { duration: 0.24, ease: eases.settle },\n                    opacity: { duration: 0.16, ease: eases.out },\n                  }\n            }\n            style={{ overflow: 'hidden' }}\n          >\n            {rows}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";AAqCI,cAWE,YAXF;AAnCJ,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB,QAAQ,wBAAwB;AAC1D,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,YAAY,mBAAqC;AAC1D,SAAS,cAAc;AACvB,OAAO,YAAY;AAQZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,UAAU,iBAAiB;AACjC,QAAM,EAAE,OAAO,MAAM,IAAI;AACzB,QAAM,iBAAiB,MAAM,KAAK,CAAC,SAAS,SAAS,MAAM,QAAQ,CAAC;AAEpE,QAAM,OAAO,MAAM,IAAI,CAAC,SACtB;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA,QAAQ,SAAS,MAAM,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA;AAAA,IAJK,KAAK;AAAA,EAKZ,CACD;AAED,MAAI,CAAC,WAAW,OAAO,MAAM,QAAQ,SAAS;AAC5C,WACE,qBAAC,SAAI,WAAW,OAAO,OACpB;AAAA,eAAS,oBAAC,SAAI,WAAW,OAAO,YAAa,iBAAM;AAAA,MACnD;AAAA,OACH;AAGJ,QAAM,OAAO,YAAY,QAAQ,OAAO,cAAc;AAEtD,SACE,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,GAAG,OAAO,UAAU,IAAI,OAAO,WAAW;AAAA,QACrD,iBAAe;AAAA,QACf,SAAS,MAAM,SAAS,OAAO,CAAC,IAAI;AAAA,QAEpC;AAAA,8BAAC,UAAM,iBAAM;AAAA,UACb,oBAAC,eAAY,MAAM,IAAI,WAAW,OAAO,cAAc,eAAW,MAAC;AAAA;AAAA;AAAA,IACrE;AAAA,IAIA,oBAAC,mBAAgB,SAAS,OACvB,kBACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAE;AAAA,QACjC,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAE;AAAA,QACtC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAE;AAAA,QAC9B,YACE,UACI,EAAE,UAAU,EAAE,IACd;AAAA,UACE,QAAQ,EAAE,UAAU,MAAM,MAAM,MAAM,OAAO;AAAA,UAC7C,SAAS,EAAE,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,QAC7C;AAAA,QAEN,OAAO,EAAE,UAAU,SAAS;AAAA,QAE3B;AAAA;AAAA,IACH,GAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/_shell/sidebar.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isActive } from "./nav-filter";
 import { NavGroupView } from "./nav-group";
+import { useOpenGroup } from "./use-open-group";
 import { SidebarFooter } from "./sidebar-footer";
 import { useFluidHover } from "./use-fluid-hover";
 import { UserMenu } from "./user-menu";
@@ -17,6 +18,7 @@ function Sidebar({
   onSearch
 }) {
   const hover = useFluidHover();
+  const { choice, setGroupOpen } = useOpenGroup(pathname);
   const settings = groups.flatMap((group) => group.items).find((item) => item.href === FOOT_HREF);
   const navGroups = groups.map((group) => ({
     ...group,
@@ -50,7 +52,9 @@ function Sidebar({
               group,
               pathname,
               collapsed,
-              canSupport
+              canSupport,
+              choice,
+              onToggle: setGroupOpen
             },
             group.label ?? index
           ))

package/dist/admin/_shell/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/_shell/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport type { NavGroup } from './nav-config';\nimport { isActive } from './nav-filter';\nimport { NavGroupView } from './nav-group';\nimport { SidebarFooter } from './sidebar-footer';\nimport { useFluidHover } from './use-fluid-hover';\nimport { UserMenu } from './user-menu';\nimport styles from './sidebar.module.css';\n\n/** Settings lives in the pinned foot, beside the theme switch. */\nconst FOOT_HREF = '/admin/settings';\n\nexport function Sidebar({\n  groups,\n  pathname,\n  canSupport,\n  collapsed,\n  email,\n  role,\n  onSearch,\n}: {\n  groups: NavGroup[];\n  pathname: string;\n  canSupport: boolean;\n  collapsed: boolean;\n  email: string;\n  role: string;\n  onSearch: () => void;\n}) {\n  const hover = useFluidHover();\n  const settings = groups\n    .flatMap((group) => group.items)\n    .find((item) => item.href === FOOT_HREF);\n  const navGroups = groups\n    .map((group) => ({\n      ...group,\n      items: group.items.filter((item) => item.href !== FOOT_HREF),\n    }))\n    .filter((group) => group.items.length);\n\n  return (\n    <aside className={styles.sidebar} data-collapsed={collapsed}>\n      <UserMenu email={email} role={role} collapsed={collapsed} />\n\n      <nav\n        className={styles.nav}\n        aria-label=\"Admin\"\n        onPointerMove={hover.onPointerMove}\n        onPointerLeave={hover.onPointerLeave}\n      >\n        <span\n          aria-hidden\n          className={styles.glide}\n          data-visible={Boolean(hover.rect)}\n          style={\n            hover.rect\n              ? {\n                  transform: `translateY(${hover.rect.top}px)`,\n                  height: hover.rect.height,\n                }\n              : undefined\n          }\n        />\n        {navGroups.map((group, index) => (\n          <NavGroupView\n            key={group.label ?? index}\n            group={group}\n            pathname={pathname}\n            collapsed={collapsed}\n            canSupport={canSupport}\n          />\n        ))}\n      </nav>\n\n      <SidebarFooter\n        collapsed={collapsed}\n        showSettings={Boolean(settings)}\n        settingsActive={settings ? isActive(settings, pathname) : false}\n        onSearch={onSearch}\n      />\n    </aside>\n  );\n}\n"],"mappings":";AA2CM,cAEA,YAFA;AAxCN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAGnB,MAAM,YAAY;AAEX,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,QAAQ,cAAc;AAC5B,QAAM,WAAW,OACd,QAAQ,CAAC,UAAU,MAAM,KAAK,EAC9B,KAAK,CAAC,SAAS,KAAK,SAAS,SAAS;AACzC,QAAM,YAAY,OACf,IAAI,CAAC,WAAW;AAAA,IACf,GAAG;AAAA,IACH,OAAO,MAAM,MAAM,OAAO,CAAC,SAAS,KAAK,SAAS,SAAS;AAAA,EAC7D,EAAE,EACD,OAAO,CAAC,UAAU,MAAM,MAAM,MAAM;AAEvC,SACE,qBAAC,WAAM,WAAW,OAAO,SAAS,kBAAgB,WAChD;AAAA,wBAAC,YAAS,OAAc,MAAY,WAAsB;AAAA,IAE1D;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,cAAW;AAAA,QACX,eAAe,MAAM;AAAA,QACrB,gBAAgB,MAAM;AAAA,QAEtB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAW,OAAO;AAAA,cAClB,gBAAc,QAAQ,MAAM,IAAI;AAAA,cAChC,OACE,MAAM,OACF;AAAA,gBACE,WAAW,cAAc,MAAM,KAAK,GAAG;AAAA,gBACvC,QAAQ,MAAM,KAAK;AAAA,cACrB,IACA;AAAA;AAAA,UAER;AAAA,UACC,UAAU,IAAI,CAAC,OAAO,UACrB;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,YAJK,MAAM,SAAS;AAAA,UAKtB,CACD;AAAA;AAAA;AAAA,IACH;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAc,QAAQ,QAAQ;AAAA,QAC9B,gBAAgB,WAAW,SAAS,UAAU,QAAQ,IAAI;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/admin/_shell/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport type { NavGroup } from './nav-config';\nimport { isActive } from './nav-filter';\nimport { NavGroupView } from './nav-group';\nimport { useOpenGroup } from './use-open-group';\nimport { SidebarFooter } from './sidebar-footer';\nimport { useFluidHover } from './use-fluid-hover';\nimport { UserMenu } from './user-menu';\nimport styles from './sidebar.module.css';\n\n/** Settings lives in the pinned foot, beside the theme switch. */\nconst FOOT_HREF = '/admin/settings';\n\nexport function Sidebar({\n  groups,\n  pathname,\n  canSupport,\n  collapsed,\n  email,\n  role,\n  onSearch,\n}: {\n  groups: NavGroup[];\n  pathname: string;\n  canSupport: boolean;\n  collapsed: boolean;\n  email: string;\n  role: string;\n  onSearch: () => void;\n}) {\n  const hover = useFluidHover();\n  const { choice, setGroupOpen } = useOpenGroup(pathname);\n  const settings = groups\n    .flatMap((group) => group.items)\n    .find((item) => item.href === FOOT_HREF);\n  const navGroups = groups\n    .map((group) => ({\n      ...group,\n      items: group.items.filter((item) => item.href !== FOOT_HREF),\n    }))\n    .filter((group) => group.items.length);\n\n  return (\n    <aside className={styles.sidebar} data-collapsed={collapsed}>\n      <UserMenu email={email} role={role} collapsed={collapsed} />\n\n      <nav\n        className={styles.nav}\n        aria-label=\"Admin\"\n        onPointerMove={hover.onPointerMove}\n        onPointerLeave={hover.onPointerLeave}\n      >\n        <span\n          aria-hidden\n          className={styles.glide}\n          data-visible={Boolean(hover.rect)}\n          style={\n            hover.rect\n              ? {\n                  transform: `translateY(${hover.rect.top}px)`,\n                  height: hover.rect.height,\n                }\n              : undefined\n          }\n        />\n        {navGroups.map((group, index) => (\n          <NavGroupView\n            key={group.label ?? index}\n            group={group}\n            pathname={pathname}\n            collapsed={collapsed}\n            canSupport={canSupport}\n            choice={choice}\n            onToggle={setGroupOpen}\n          />\n        ))}\n      </nav>\n\n      <SidebarFooter\n        collapsed={collapsed}\n        showSettings={Boolean(settings)}\n        settingsActive={settings ? isActive(settings, pathname) : false}\n        onSearch={onSearch}\n      />\n    </aside>\n  );\n}\n"],"mappings":";AA6CM,cAEA,YAFA;AA1CN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAGnB,MAAM,YAAY;AAEX,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,QAAQ,cAAc;AAC5B,QAAM,EAAE,QAAQ,aAAa,IAAI,aAAa,QAAQ;AACtD,QAAM,WAAW,OACd,QAAQ,CAAC,UAAU,MAAM,KAAK,EAC9B,KAAK,CAAC,SAAS,KAAK,SAAS,SAAS;AACzC,QAAM,YAAY,OACf,IAAI,CAAC,WAAW;AAAA,IACf,GAAG;AAAA,IACH,OAAO,MAAM,MAAM,OAAO,CAAC,SAAS,KAAK,SAAS,SAAS;AAAA,EAC7D,EAAE,EACD,OAAO,CAAC,UAAU,MAAM,MAAM,MAAM;AAEvC,SACE,qBAAC,WAAM,WAAW,OAAO,SAAS,kBAAgB,WAChD;AAAA,wBAAC,YAAS,OAAc,MAAY,WAAsB;AAAA,IAE1D;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,cAAW;AAAA,QACX,eAAe,MAAM;AAAA,QACrB,gBAAgB,MAAM;AAAA,QAEtB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAW,OAAO;AAAA,cAClB,gBAAc,QAAQ,MAAM,IAAI;AAAA,cAChC,OACE,MAAM,OACF;AAAA,gBACE,WAAW,cAAc,MAAM,KAAK,GAAG;AAAA,gBACvC,QAAQ,MAAM,KAAK;AAAA,cACrB,IACA;AAAA;AAAA,UAER;AAAA,UACC,UAAU,IAAI,CAAC,OAAO,UACrB;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU;AAAA;AAAA,YANL,MAAM,SAAS;AAAA,UAOtB,CACD;AAAA;AAAA;AAAA,IACH;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAc,QAAQ,QAAQ;AAAA,QAC9B,gBAAgB,WAAW,SAAS,UAAU,QAAQ,IAAI;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/_shell/sidebar.module.css

@@ -92,20 +92,37 @@
   flex: none;
   opacity: 0;
   transition:
-    opacity var(--adm-fast),
-    transform var(--adm-fast);
+    transform var(--adm-fast),
+    opacity var(--adm-fast);
 }
 
+/* The chevron arrives on hover, as on the merchant rail, and stays while the
+   group is open, rotated, to say the rows below belong to this heading. A
+   keyboard has no pointer and touch has no hover, so those keep it too. */
 .groupToggle:hover .groupChevron,
-.groupToggle:focus-visible .groupChevron {
+.groupToggle:focus-visible .groupChevron,
+.groupToggle[aria-expanded='true'] .groupChevron {
   opacity: 1;
 }
 
-/* A folded group always shows its chevron: otherwise the only sign that rows
-   are hidden is their absence. */
-.groupChevron[data-closed='true'] {
-  opacity: 1;
-  transform: rotate(-90deg);
+.groupToggle[aria-expanded='true'] .groupChevron {
+  transform: rotate(180deg);
+}
+
+@media (hover: none) {
+  .groupChevron {
+    opacity: 1;
+  }
+}
+
+/* The rows of a folding group, laid out like the group's own. The padding keeps
+   a focus ring from being clipped by the closing box; the margin takes it back. */
+.groupRows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: -2px;
 }
 
 .link {

package/dist/admin/_shell/use-open-group.js

@@ -0,0 +1,16 @@
+"use client";
+import { useState } from "react";
+function useOpenGroup(pathname) {
+  const [choice, setChoice] = useState(void 0);
+  const setGroupOpen = (label, next) => setChoice(next ? label : null);
+  const [choiceRoute, setChoiceRoute] = useState(pathname);
+  if (choiceRoute !== pathname) {
+    setChoiceRoute(pathname);
+    setChoice(void 0);
+  }
+  return { choice, setGroupOpen };
+}
+export {
+  useOpenGroup
+};
+//# sourceMappingURL=use-open-group.js.map

package/dist/admin/_shell/use-open-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/use-open-group.ts"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport type { GroupChoice } from './nav-fold';\n\n/**\n * Which sidebar group is showing its rows: ONE, none, or \"not said yet\"\n * (`undefined`, which leaves the group owning the current page open). The\n * merchant rail's useOpenHub, for the admin's groups.\n */\nexport function useOpenGroup(pathname: string) {\n  const [choice, setChoice] = useState<GroupChoice>(undefined);\n  const setGroupOpen = (label: string, next: boolean) =>\n    setChoice(next ? label : null);\n  // A new route retires the choice, or arriving from inside the page would\n  // leave the rail on the last group pressed, with the current row hidden.\n  // Adjusted during render, not in an effect, so no stale frame paints first.\n  const [choiceRoute, setChoiceRoute] = useState(pathname);\n\n  if (choiceRoute !== pathname) {\n    setChoiceRoute(pathname);\n    setChoice(undefined);\n  }\n\n  return { choice, setGroupOpen };\n}\n"],"mappings":";AAEA,SAAS,gBAAgB;AAQlB,SAAS,aAAa,UAAkB;AAC7C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,MAAS;AAC3D,QAAM,eAAe,CAAC,OAAe,SACnC,UAAU,OAAO,QAAQ,IAAI;AAI/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,QAAQ;AAEvD,MAAI,gBAAgB,UAAU;AAC5B,mBAAe,QAAQ;AACvB,cAAU,MAAS;AAAA,EACrB;AAEA,SAAO,EAAE,QAAQ,aAAa;AAChC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@withpotter/pages-admin",
-  "version": "0.13.0-next.73",
+  "version": "0.13.0-next.74",
   "description": "Box console platform-admin routes: overview, revenue, accounts, tenants, admins, roles, audit.",
   "license": "UNLICENSED",
   "sideEffects": false,
@@ -31,9 +31,9 @@
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.23",
     "@tanstack/react-query": "^5.90.20",
-    "@withpotter/lib": "^0.13.0-next.73",
-    "@withpotter/platform-admin": "^0.13.0-next.73",
-    "@withpotter/ui-kit": "^0.13.0-next.73",
+    "@withpotter/lib": "^0.13.0-next.74",
+    "@withpotter/platform-admin": "^0.13.0-next.74",
+    "@withpotter/ui-kit": "^0.13.0-next.74",
     "lucide-react": "^0.562.0",
     "motion": "^12.42.2"
   },

package/dist/admin/_shell/use-group-fold.js

@@ -1,50 +0,0 @@
-"use client";
-import { useCallback, useSyncExternalStore } from "react";
-import { isGroupClosed } from "./nav-fold";
-const STORAGE_KEY = "pb_admin_nav_closed";
-let closedCache = {};
-let closedRaw = null;
-const listeners = /* @__PURE__ */ new Set();
-function readClosed() {
-  if (typeof window === "undefined") return closedCache;
-  let raw = null;
-  try {
-    raw = localStorage.getItem(STORAGE_KEY);
-  } catch {
-    return closedCache;
-  }
-  if (raw !== closedRaw) {
-    closedRaw = raw;
-    try {
-      closedCache = raw ? JSON.parse(raw) : {};
-    } catch {
-      closedCache = {};
-    }
-  }
-  return closedCache;
-}
-const serverSnapshot = () => closedCache;
-function subscribe(fn) {
-  listeners.add(fn);
-  return () => listeners.delete(fn);
-}
-function setClosed(label, closed) {
-  const next = { ...readClosed(), [label]: closed };
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-  } catch {
-  }
-  closedRaw = JSON.stringify(next);
-  closedCache = next;
-  listeners.forEach((fn) => fn());
-}
-function useGroupFold(label, containsActive) {
-  const folded = useSyncExternalStore(subscribe, readClosed, serverSnapshot);
-  const closed = isGroupClosed(folded, label, containsActive);
-  const toggle = useCallback(() => setClosed(label, !closed), [label, closed]);
-  return { closed, toggle };
-}
-export {
-  useGroupFold
-};
-//# sourceMappingURL=use-group-fold.js.map

package/dist/admin/_shell/use-group-fold.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/admin/_shell/use-group-fold.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { isGroupClosed, type FoldMap } from './nav-fold';\n\nconst STORAGE_KEY = 'pb_admin_nav_closed';\n\n/**\n * Which groups the admin has folded away, as an external store. localStorage\n * does not exist while the server renders, so reading it into state would\n * mismatch the HTML; useSyncExternalStore is built for this (the merchant\n * rail's NavSection does the same).\n */\nlet closedCache: FoldMap = {};\nlet closedRaw: string | null = null;\nconst listeners = new Set<() => void>();\n\nfunction readClosed(): FoldMap {\n  if (typeof window === 'undefined') return closedCache;\n\n  let raw: string | null = null;\n\n  try {\n    raw = localStorage.getItem(STORAGE_KEY);\n  } catch {\n    return closedCache;\n  }\n\n  // Cached by raw string so the snapshot is stable between renders; a fresh\n  // object every call makes useSyncExternalStore loop.\n  if (raw !== closedRaw) {\n    closedRaw = raw;\n\n    try {\n      closedCache = raw ? JSON.parse(raw) : {};\n    } catch {\n      closedCache = {};\n    }\n  }\n\n  return closedCache;\n}\n\n/** The server has no localStorage, so nothing is folded on first paint. */\nconst serverSnapshot = () => closedCache;\n\nfunction subscribe(fn: () => void) {\n  listeners.add(fn);\n\n  return () => listeners.delete(fn);\n}\n\nfunction setClosed(label: string, closed: boolean) {\n  const next = { ...readClosed(), [label]: closed };\n\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));\n  } catch {\n    /* private mode: the choice just won't survive the visit */\n  }\n\n  closedRaw = JSON.stringify(next);\n  closedCache = next;\n  listeners.forEach((fn) => fn());\n}\n\nexport function useGroupFold(label: string, containsActive: boolean) {\n  const folded = useSyncExternalStore(subscribe, readClosed, serverSnapshot);\n  const closed = isGroupClosed(folded, label, containsActive);\n  const toggle = useCallback(() => setClosed(label, !closed), [label, closed]);\n\n  return { closed, toggle };\n}\n"],"mappings":";AAEA,SAAS,aAAa,4BAA4B;AAClD,SAAS,qBAAmC;AAE5C,MAAM,cAAc;AAQpB,IAAI,cAAuB,CAAC;AAC5B,IAAI,YAA2B;AAC/B,MAAM,YAAY,oBAAI,IAAgB;AAEtC,SAAS,aAAsB;AAC7B,MAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,MAAI,MAAqB;AAEzB,MAAI;AACF,UAAM,aAAa,QAAQ,WAAW;AAAA,EACxC,QAAQ;AACN,WAAO;AAAA,EACT;AAIA,MAAI,QAAQ,WAAW;AACrB,gBAAY;AAEZ,QAAI;AACF,oBAAc,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;AAAA,IACzC,QAAQ;AACN,oBAAc,CAAC;AAAA,IACjB;AAAA,EACF;AAEA,SAAO;AACT;AAGA,MAAM,iBAAiB,MAAM;AAE7B,SAAS,UAAU,IAAgB;AACjC,YAAU,IAAI,EAAE;AAEhB,SAAO,MAAM,UAAU,OAAO,EAAE;AAClC;AAEA,SAAS,UAAU,OAAe,QAAiB;AACjD,QAAM,OAAO,EAAE,GAAG,WAAW,GAAG,CAAC,KAAK,GAAG,OAAO;AAEhD,MAAI;AACF,iBAAa,QAAQ,aAAa,KAAK,UAAU,IAAI,CAAC;AAAA,EACxD,QAAQ;AAAA,EAER;AAEA,cAAY,KAAK,UAAU,IAAI;AAC/B,gBAAc;AACd,YAAU,QAAQ,CAAC,OAAO,GAAG,CAAC;AAChC;AAEO,SAAS,aAAa,OAAe,gBAAyB;AACnE,QAAM,SAAS,qBAAqB,WAAW,YAAY,cAAc;AACzE,QAAM,SAAS,cAAc,QAAQ,OAAO,cAAc;AAC1D,QAAM,SAAS,YAAY,MAAM,UAAU,OAAO,CAAC,MAAM,GAAG,CAAC,OAAO,MAAM,CAAC;AAE3E,SAAO,EAAE,QAAQ,OAAO;AAC1B;","names":[]}