@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/_shell/seam-toggle.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ChevronLeft } from "lucide-react";
+import styles from "./frame.module.css";
+function SeamToggle({
+  collapsed,
+  onToggle
+}) {
+  const label = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: styles.seam,
+      "data-collapsed": collapsed,
+      onClick: onToggle,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ jsx(ChevronLeft, { size: 13, "aria-hidden": true })
+    }
+  );
+}
+export {
+  SeamToggle
+};
+//# sourceMappingURL=seam-toggle.js.map

package/dist/admin/_shell/seam-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/seam-toggle.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft } from 'lucide-react';\nimport styles from './frame.module.css';\n\n/**\n * The collapse handle: a small tab on the seam between the sidebar and the\n * work area, as on the merchant dashboard. The chevron turns to say which way\n * the sidebar will go.\n */\nexport function SeamToggle({\n  collapsed,\n  onToggle,\n}: {\n  collapsed: boolean;\n  onToggle: () => void;\n}) {\n  const label = collapsed ? 'Expand sidebar' : 'Collapse sidebar';\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.seam}\n      data-collapsed={collapsed}\n      onClick={onToggle}\n      aria-label={label}\n      title={label}\n    >\n      <ChevronLeft size={13} aria-hidden />\n    </button>\n  );\n}\n"],"mappings":";AA4BM;AA1BN,SAAS,mBAAmB;AAC5B,OAAO,YAAY;AAOZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,QAAQ,YAAY,mBAAmB;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,OAAO;AAAA,MAClB,kBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,OAAO;AAAA,MAEP,8BAAC,eAAY,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,EACrC;AAEJ;","names":[]}

package/dist/admin/_shell/section-tabs.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { PageTabs } from "../_ui/page-tabs";
+function SectionTabs({
+  items,
+  pathname,
+  label
+}) {
+  const router = useRouter();
+  const active = items.find(({ href }) => pathname.startsWith(href))?.href ?? items[0]?.href;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx(
+    PageTabs,
+    {
+      tabs: items.map(({ href, label: text, icon }) => ({
+        id: href,
+        label: text,
+        icon
+      })),
+      active: active ?? "",
+      onChange: (href) => router.push(href)
+    }
+  ) });
+}
+export {
+  SectionTabs
+};
+//# sourceMappingURL=section-tabs.js.map

package/dist/admin/_shell/section-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/section-tabs.tsx"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { PageTabs } from '../_ui/page-tabs';\nimport type { NavItem } from './nav-config';\n\n/**\n * Second-level pages under one nav item (Feedback · Reviews), drawn\n * with the same tab strip every page uses for its own\n * sections, so the console has one tab style.\n */\nexport function SectionTabs({\n  items,\n  pathname,\n  label,\n}: {\n  items: NavItem[];\n  pathname: string;\n  label: string;\n}) {\n  const router = useRouter();\n  const active =\n    items.find(({ href }) => pathname.startsWith(href))?.href ?? items[0]?.href;\n\n  return (\n    <nav aria-label={label}>\n      <PageTabs\n        tabs={items.map(({ href, label: text, icon }) => ({\n          id: href,\n          label: text,\n          icon,\n        }))}\n        active={active ?? ''}\n        onChange={(href) => router.push(href)}\n      />\n    </nav>\n  );\n}\n"],"mappings":";AA0BM;AAxBN,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAQlB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,SAAS,UAAU;AACzB,QAAM,SACJ,MAAM,KAAK,CAAC,EAAE,KAAK,MAAM,SAAS,WAAW,IAAI,CAAC,GAAG,QAAQ,MAAM,CAAC,GAAG;AAEzE,SACE,oBAAC,SAAI,cAAY,OACf;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,MAAM,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,KAAK,OAAO;AAAA,QAChD,IAAI;AAAA,QACJ,OAAO;AAAA,QACP;AAAA,MACF,EAAE;AAAA,MACF,QAAQ,UAAU;AAAA,MAClB,UAAU,CAAC,SAAS,OAAO,KAAK,IAAI;AAAA;AAAA,EACtC,GACF;AAEJ;","names":[]}

package/dist/admin/_shell/shell-skeleton.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import frame from "./frame.module.css";
+import styles from "./shell-skeleton.module.css";
+function ShellSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: `adm-shell ${frame.shell}`, "aria-busy": "true", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.sidebar, "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.brand }),
+      Array.from({ length: 9 }, (_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: styles.link,
+          style: { width: `${55 + i * 13 % 35}%` }
+        },
+        i
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: frame.column, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.top, "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("main", { className: frame.main, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.title }),
+        /* @__PURE__ */ jsx("div", { className: styles.cards, children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx("span", { className: styles.card }, i)) }),
+        /* @__PURE__ */ jsx("span", { className: styles.panel })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ShellSkeleton
+};
+//# sourceMappingURL=shell-skeleton.js.map

package/dist/admin/_shell/shell-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/shell-skeleton.tsx"],"sourcesContent":["import frame from './frame.module.css';\nimport styles from './shell-skeleton.module.css';\n\n/** The frame, drawn while the session loads, so the page never starts blank. */\nexport function ShellSkeleton() {\n  return (\n    <div className={`adm-shell ${frame.shell}`} aria-busy=\"true\">\n      <div className={styles.sidebar} aria-hidden>\n        <span className={styles.brand} />\n        {Array.from({ length: 9 }, (_, i) => (\n          <span\n            key={i}\n            className={styles.link}\n            style={{ width: `${55 + ((i * 13) % 35)}%` }}\n          />\n        ))}\n      </div>\n      <div className={frame.column}>\n        <div className={styles.top} aria-hidden />\n        <main className={frame.main} aria-hidden>\n          <span className={styles.title} />\n          <div className={styles.cards}>\n            {Array.from({ length: 4 }, (_, i) => (\n              <span key={i} className={styles.card} />\n            ))}\n          </div>\n          <span className={styles.panel} />\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAOM,SACE,KADF;AAPN,OAAO,WAAW;AAClB,OAAO,YAAY;AAGZ,SAAS,gBAAgB;AAC9B,SACE,qBAAC,SAAI,WAAW,aAAa,MAAM,KAAK,IAAI,aAAU,QACpD;AAAA,yBAAC,SAAI,WAAW,OAAO,SAAS,eAAW,MACzC;AAAA,0BAAC,UAAK,WAAW,OAAO,OAAO;AAAA,MAC9B,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAC7B;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,OAAO;AAAA,UAClB,OAAO,EAAE,OAAO,GAAG,KAAO,IAAI,KAAM,EAAG,IAAI;AAAA;AAAA,QAFtC;AAAA,MAGP,CACD;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAW,MAAM,QACpB;AAAA,0BAAC,SAAI,WAAW,OAAO,KAAK,eAAW,MAAC;AAAA,MACxC,qBAAC,UAAK,WAAW,MAAM,MAAM,eAAW,MACtC;AAAA,4BAAC,UAAK,WAAW,OAAO,OAAO;AAAA,QAC/B,oBAAC,SAAI,WAAW,OAAO,OACpB,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAC7B,oBAAC,UAAa,WAAW,OAAO,QAArB,CAA2B,CACvC,GACH;AAAA,QACA,oBAAC,UAAK,WAAW,OAAO,OAAO;AAAA,SACjC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/_shell/shell-skeleton.module.css

@@ -0,0 +1,57 @@
+/* Flat placeholders shaped like the real frame (no shimmer loop). */
+
+.sidebar {
+  display: grid;
+  align-content: start;
+  gap: 14px;
+  height: 100vh;
+  padding: 20px 16px;
+  background: var(--adm-sidebar);
+}
+
+.brand,
+.link,
+.title,
+.card,
+.panel {
+  display: block;
+  border-radius: 10px;
+  background: var(--adm-hover);
+}
+
+.brand {
+  width: 70%;
+  height: 32px;
+  margin-bottom: 12px;
+}
+
+.link {
+  height: 14px;
+}
+
+.top {
+  height: var(--adm-topbar-h);
+}
+
+.title {
+  width: 280px;
+  height: 36px;
+  margin-bottom: 28px;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--adm-gap);
+  margin-bottom: var(--adm-gap);
+}
+
+.card {
+  height: 128px;
+  border-radius: var(--adm-card-radius);
+}
+
+.panel {
+  height: 360px;
+  border-radius: var(--adm-card-radius);
+}

package/dist/admin/_shell/sidebar-footer.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Moon, Search, Settings, Sun } from "lucide-react";
+import { useTheme } from "@withpotter/lib/theme-context";
+import { RailTip } from "./nav-row";
+import styles from "./sidebar-footer.module.css";
+function SidebarFooter({
+  collapsed,
+  settingsActive,
+  showSettings,
+  actions = [],
+  pathname,
+  onSearch
+}) {
+  const { resolvedTheme, toggleTheme } = useTheme();
+  const dark = resolvedTheme === "dark";
+  const themeLabel = `Switch to ${dark ? "light" : "dark"} mode`;
+  return /* @__PURE__ */ jsxs("div", { className: styles.foot, "data-collapsed": collapsed, children: [
+    /* @__PURE__ */ jsx(RailTip, { label: "Search", on: collapsed, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: styles.row,
+        onClick: onSearch,
+        "aria-label": collapsed ? "Search" : void 0,
+        "aria-keyshortcuts": "Meta+K",
+        children: [
+          /* @__PURE__ */ jsx(Search, { size: 16, className: styles.icon, "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: styles.label, children: "Search" }),
+          /* @__PURE__ */ jsx("kbd", { className: styles.kbd, children: "\u2318K" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.split, children: [
+      showSettings && /* @__PURE__ */ jsx(RailTip, { label: "Settings", on: collapsed, children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/admin/settings",
+          className: styles.row,
+          "data-active": settingsActive,
+          "aria-current": settingsActive ? "page" : void 0,
+          "aria-label": collapsed ? "Settings" : void 0,
+          children: [
+            /* @__PURE__ */ jsx(Settings, { size: 16, className: styles.icon, "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: styles.label, children: "Settings" })
+          ]
+        }
+      ) }),
+      actions.map(({ href, label, icon: Icon, badge: Badge }) => {
+        const active = pathname === href || pathname.startsWith(`${href}/`);
+        return /* @__PURE__ */ jsx(RailTip, { label, on: collapsed, children: /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href,
+            className: styles.theme,
+            "data-active": active,
+            "aria-current": active ? "page" : void 0,
+            "aria-label": label,
+            title: collapsed ? void 0 : label,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 16, "aria-hidden": true }),
+              Badge && /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Badge, {}) })
+            ]
+          }
+        ) }, href);
+      }),
+      /* @__PURE__ */ jsx(RailTip, { label: themeLabel, on: collapsed, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.theme,
+          onClick: toggleTheme,
+          "aria-label": themeLabel,
+          title: collapsed ? void 0 : themeLabel,
+          children: dark ? /* @__PURE__ */ jsx(Sun, { size: 16 }) : /* @__PURE__ */ jsx(Moon, { size: 16 })
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  SidebarFooter
+};
+//# sourceMappingURL=sidebar-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/sidebar-footer.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport type { ComponentType } from 'react';\nimport { Moon, Search, Settings, Sun, type LucideIcon } from 'lucide-react';\nimport { useTheme } from '@withpotter/lib/theme-context';\nimport { RailTip } from './nav-row';\nimport styles from './sidebar-footer.module.css';\n\n/**\n * An icon a host adds to the foot, beside the theme switch: a link with a\n * name for screen readers and a tooltip, and an optional `badge` drawn on its\n * corner (a dot or a count; it draws nothing when there is nothing to show).\n */\nexport type FooterAction = {\n  href: string;\n  label: string;\n  icon: LucideIcon;\n  badge?: ComponentType;\n  /** Shown to superadmins only, like a menu item marked `superadmin`. */\n  superadmin?: boolean;\n};\n\n/**\n * The pinned foot of the sidebar: jump anywhere (⌘K), and Settings with the\n * host's icons and the theme switch beside it. In the rail each is its own\n * 40px target.\n */\nexport function SidebarFooter({\n  collapsed,\n  settingsActive,\n  showSettings,\n  actions = [],\n  pathname,\n  onSearch,\n}: {\n  collapsed: boolean;\n  settingsActive: boolean;\n  showSettings: boolean;\n  actions?: FooterAction[];\n  pathname: string;\n  onSearch: () => void;\n}) {\n  const { resolvedTheme, toggleTheme } = useTheme();\n  const dark = resolvedTheme === 'dark';\n  const themeLabel = `Switch to ${dark ? 'light' : 'dark'} mode`;\n\n  return (\n    <div className={styles.foot} data-collapsed={collapsed}>\n      <RailTip label=\"Search\" on={collapsed}>\n        <button\n          type=\"button\"\n          className={styles.row}\n          onClick={onSearch}\n          aria-label={collapsed ? 'Search' : undefined}\n          aria-keyshortcuts=\"Meta+K\"\n        >\n          <Search size={16} className={styles.icon} aria-hidden />\n          <span className={styles.label}>Search</span>\n          <kbd className={styles.kbd}>⌘K</kbd>\n        </button>\n      </RailTip>\n\n      <div className={styles.split}>\n        {showSettings && (\n          <RailTip label=\"Settings\" on={collapsed}>\n            <Link\n              href=\"/admin/settings\"\n              className={styles.row}\n              data-active={settingsActive}\n              aria-current={settingsActive ? 'page' : undefined}\n              aria-label={collapsed ? 'Settings' : undefined}\n            >\n              <Settings size={16} className={styles.icon} aria-hidden />\n              <span className={styles.label}>Settings</span>\n            </Link>\n          </RailTip>\n        )}\n        {actions.map(({ href, label, icon: Icon, badge: Badge }) => {\n          const active = pathname === href || pathname.startsWith(`${href}/`);\n          return (\n            <RailTip key={href} label={label} on={collapsed}>\n              <Link\n                href={href}\n                className={styles.theme}\n                data-active={active}\n                aria-current={active ? 'page' : undefined}\n                aria-label={label}\n                title={collapsed ? undefined : label}\n              >\n                <Icon size={16} aria-hidden />\n                {Badge && (\n                  <span className={styles.badge}>\n                    <Badge />\n                  </span>\n                )}\n              </Link>\n            </RailTip>\n          );\n        })}\n        <RailTip label={themeLabel} on={collapsed}>\n          <button\n            type=\"button\"\n            className={styles.theme}\n            onClick={toggleTheme}\n            aria-label={themeLabel}\n            title={collapsed ? undefined : themeLabel}\n          >\n            {dark ? <Sun size={16} /> : <Moon size={16} />}\n          </button>\n        </RailTip>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAkDQ,SAOE,KAPF;AAhDR,OAAO,UAAU;AAEjB,SAAS,MAAM,QAAQ,UAAU,WAA4B;AAC7D,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,OAAO,YAAY;AAqBZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACF,GAOG;AACD,QAAM,EAAE,eAAe,YAAY,IAAI,SAAS;AAChD,QAAM,OAAO,kBAAkB;AAC/B,QAAM,aAAa,aAAa,OAAO,UAAU,MAAM;AAEvD,SACE,qBAAC,SAAI,WAAW,OAAO,MAAM,kBAAgB,WAC3C;AAAA,wBAAC,WAAQ,OAAM,UAAS,IAAI,WAC1B;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,SAAS;AAAA,QACT,cAAY,YAAY,WAAW;AAAA,QACnC,qBAAkB;AAAA,QAElB;AAAA,8BAAC,UAAO,MAAM,IAAI,WAAW,OAAO,MAAM,eAAW,MAAC;AAAA,UACtD,oBAAC,UAAK,WAAW,OAAO,OAAO,oBAAM;AAAA,UACrC,oBAAC,SAAI,WAAW,OAAO,KAAK,qBAAE;AAAA;AAAA;AAAA,IAChC,GACF;AAAA,IAEA,qBAAC,SAAI,WAAW,OAAO,OACpB;AAAA,sBACC,oBAAC,WAAQ,OAAM,YAAW,IAAI,WAC5B;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,eAAa;AAAA,UACb,gBAAc,iBAAiB,SAAS;AAAA,UACxC,cAAY,YAAY,aAAa;AAAA,UAErC;AAAA,gCAAC,YAAS,MAAM,IAAI,WAAW,OAAO,MAAM,eAAW,MAAC;AAAA,YACxD,oBAAC,UAAK,WAAW,OAAO,OAAO,sBAAQ;AAAA;AAAA;AAAA,MACzC,GACF;AAAA,MAED,QAAQ,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM,OAAO,MAAM,MAAM;AAC1D,cAAM,SAAS,aAAa,QAAQ,SAAS,WAAW,GAAG,IAAI,GAAG;AAClE,eACE,oBAAC,WAAmB,OAAc,IAAI,WACpC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,YACb,gBAAc,SAAS,SAAS;AAAA,YAChC,cAAY;AAAA,YACZ,OAAO,YAAY,SAAY;AAAA,YAE/B;AAAA,kCAAC,QAAK,MAAM,IAAI,eAAW,MAAC;AAAA,cAC3B,SACC,oBAAC,UAAK,WAAW,OAAO,OACtB,8BAAC,SAAM,GACT;AAAA;AAAA;AAAA,QAEJ,KAfY,IAgBd;AAAA,MAEJ,CAAC;AAAA,MACD,oBAAC,WAAQ,OAAO,YAAY,IAAI,WAC9B;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,SAAS;AAAA,UACT,cAAY;AAAA,UACZ,OAAO,YAAY,SAAY;AAAA,UAE9B,iBAAO,oBAAC,OAAI,MAAM,IAAI,IAAK,oBAAC,QAAK,MAAM,IAAI;AAAA;AAAA,MAC9C,GACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,144 @@
+/* Pinned foot of the sidebar: Search (⌘K), then Settings with the theme
+   switch, under a hairline. Rows match the nav's shape and states. */
+
+.foot {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.split {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.row,
+.theme {
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    background var(--adm-fast),
+    color var(--adm-fast);
+}
+
+.row {
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+  height: 32px;
+  padding: 0 8px;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  text-align: left;
+  text-decoration: none;
+}
+
+.theme {
+  position: relative;
+  flex: none;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  text-decoration: none;
+}
+
+.theme[data-active='true'] {
+  border-color: var(--border-default);
+  background: var(--bg-base);
+  color: var(--text-primary);
+}
+
+/* A host's count or dot, on the icon's top right corner. */
+.badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  display: flex;
+  pointer-events: none;
+}
+
+.row:hover,
+.theme:hover {
+  background: var(--adm-hover);
+  color: var(--text-primary);
+}
+
+.row[data-active='true'] {
+  border-color: var(--border-default);
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.icon {
+  flex: none;
+  color: var(--text-tertiary);
+}
+
+.row[data-active='true'] .icon {
+  /* The white pill says where you are; the brand icon marks it quietly. */
+  color: var(--adm-tint-ink);
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kbd {
+  padding: 0 4px;
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  background: var(--bg-base);
+  font-family: inherit;
+  font-size: var(--text-2xs);
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--text-tertiary);
+}
+
+.row:focus,
+.theme:focus {
+  outline: none;
+}
+
+.row:focus-visible,
+.theme:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+/* ---- Rail: three 40px squares on the centre line ---- */
+.foot[data-collapsed='true'] {
+  align-items: center;
+}
+
+.foot[data-collapsed='true'] .split {
+  flex-direction: column;
+  gap: 2px;
+}
+
+.foot[data-collapsed='true'] .row,
+.foot[data-collapsed='true'] .theme {
+  flex: none;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+.foot[data-collapsed='true'] .label,
+.foot[data-collapsed='true'] .kbd {
+  display: none;
+}

package/dist/admin/_shell/sidebar.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isActive } from "./nav-filter";
+import { NavGroupView } from "./nav-group";
+import { useOpenGroups } from "./use-open-groups";
+import { SidebarFooter } from "./sidebar-footer";
+import { useFluidHover } from "./use-fluid-hover";
+import { UserMenu } from "./user-menu";
+import styles from "./sidebar.module.css";
+const FOOT_HREF = "/admin/settings";
+function Sidebar({
+  groups,
+  pathname,
+  canSupport,
+  collapsed,
+  email,
+  role,
+  onSearch,
+  badges,
+  footerActions
+}) {
+  const hover = useFluidHover();
+  const settings = groups.flatMap((group) => group.items).find((item) => item.href === FOOT_HREF);
+  const navGroups = groups.map((group) => ({
+    ...group,
+    items: group.items.filter((item) => item.href !== FOOT_HREF)
+  })).filter((group) => group.items.length);
+  const activeGroup = navGroups.find(
+    (group) => group.items.some((item) => isActive(item, pathname))
+  )?.label ?? null;
+  const { choices, setGroupOpen } = useOpenGroups(pathname, activeGroup);
+  return /* @__PURE__ */ jsxs("aside", { className: styles.sidebar, "data-collapsed": collapsed, children: [
+    /* @__PURE__ */ jsx(UserMenu, { email, role, collapsed }),
+    /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        className: styles.nav,
+        "aria-label": "Admin",
+        onPointerMove: hover.onPointerMove,
+        onPointerLeave: hover.onPointerLeave,
+        onClick: hover.onClick,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: styles.glide,
+              "data-visible": Boolean(hover.rect),
+              style: hover.rect ? {
+                transform: `translateY(${hover.rect.top}px)`,
+                height: hover.rect.height
+              } : void 0
+            }
+          ),
+          navGroups.map((group, index) => /* @__PURE__ */ jsx(
+            NavGroupView,
+            {
+              group,
+              pathname,
+              collapsed,
+              canSupport,
+              choices,
+              onToggle: setGroupOpen,
+              badges
+            },
+            group.label ?? index
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SidebarFooter,
+      {
+        collapsed,
+        showSettings: Boolean(settings),
+        settingsActive: settings ? isActive(settings, pathname) : false,
+        actions: footerActions,
+        pathname,
+        onSearch
+      }
+    )
+  ] });
+}
+export {
+  Sidebar
+};
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentType } from 'react';\nimport type { NavGroup } from './nav-config';\nimport { isActive } from './nav-filter';\nimport { NavGroupView } from './nav-group';\nimport { useOpenGroups } from './use-open-groups';\nimport { SidebarFooter, type FooterAction } 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  badges,\n  footerActions,\n}: {\n  groups: NavGroup[];\n  pathname: string;\n  canSupport: boolean;\n  collapsed: boolean;\n  email: string;\n  role: string;\n  onSearch: () => void;\n  /** A host's own count per item, by href. */\n  badges?: Record<string, ComponentType>;\n  /** Icons a host adds to the foot, beside the theme switch. */\n  footerActions?: FooterAction[];\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  const activeGroup =\n    navGroups.find((group) =>\n      group.items.some((item) => isActive(item, pathname)),\n    )?.label ?? null;\n  const { choices, setGroupOpen } = useOpenGroups(pathname, activeGroup);\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        onClick={hover.onClick}\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            choices={choices}\n            onToggle={setGroupOpen}\n            badges={badges}\n          />\n        ))}\n      </nav>\n\n      <SidebarFooter\n        collapsed={collapsed}\n        showSettings={Boolean(settings)}\n        settingsActive={settings ? isActive(settings, pathname) : false}\n        actions={footerActions}\n        pathname={pathname}\n        onSearch={onSearch}\n      />\n    </aside>\n  );\n}\n"],"mappings":";AAwDM,cAEA,YAFA;AApDN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAwC;AACjD,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;AAAA,EACA;AAAA,EACA;AACF,GAYG;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;AACvC,QAAM,cACJ,UAAU;AAAA,IAAK,CAAC,UACd,MAAM,MAAM,KAAK,CAAC,SAAS,SAAS,MAAM,QAAQ,CAAC;AAAA,EACrD,GAAG,SAAS;AACd,QAAM,EAAE,SAAS,aAAa,IAAI,cAAc,UAAU,WAAW;AAErE,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,QACtB,SAAS,MAAM;AAAA,QAEf;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,cACV;AAAA;AAAA,YAPK,MAAM,SAAS;AAAA,UAQtB,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,SAAS;AAAA,QACT;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}