@withpotter/pages-admin 0.13.0-next.101

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

@@ -0,0 +1,259 @@
+/* On the grey canvas, no fill, no edge: workspace card, nav (scrolls when
+   tall; hover wash glides; focus ring from the keyboard only), pinned foot.
+   Inbox counts are brand squares. */
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  padding: 8px 12px 12px;
+  overflow: hidden;
+}
+
+.nav {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  margin: 0 -4px;
+  padding: 0 4px 16px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.nav::-webkit-scrollbar {
+  display: none;
+}
+
+.glide {
+  position: absolute;
+  top: 0;
+  left: 4px;
+  right: 4px;
+  border-radius: 10px;
+  background: var(--adm-hover);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--adm-fast-spring),
+    height var(--adm-fast-spring),
+    opacity var(--adm-fast);
+}
+
+.glide[data-visible='true'] {
+  opacity: 1;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.groupLabel {
+  margin: 16px 0 8px;
+  padding-left: 8px;
+  font-size: var(--text-xs);
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+/* A heading that folds its group: the label's look, as a button. */
+.groupToggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 8px;
+  border: 0;
+  background: none;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.groupToggle:hover {
+  color: var(--text-secondary);
+}
+
+.groupToggle:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+  border-radius: 6px;
+}
+
+.groupChevron {
+  flex: none;
+  opacity: 0;
+  transition:
+    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[aria-expanded='true'] .groupChevron {
+  opacity: 1;
+}
+
+.groupToggle[aria-expanded='true'] .groupChevron {
+  transform: rotate(180deg);
+}
+
+@media (hover: none) {
+  .groupChevron {
+    opacity: 1;
+  }
+}
+
+/* A folding group has no gap of its own between heading and rows: that 2px
+   would pop in and out as the rows mount, so it lives inside the rows' padding
+   and grows with their height. */
+.groupFold {
+  gap: 0;
+}
+
+/* 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 side and bottom
+   margins take it back, and the top padding is the gap under the heading. */
+.groupRows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: 0 -2px -2px;
+}
+
+.link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  line-height: 18px;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--adm-fast);
+}
+
+.link:hover {
+  color: var(--text-primary);
+}
+
+.link[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);
+}
+
+.link[data-active='true'] .icon {
+  /* The white pill says where you are; the brand icon marks it quietly. */
+  color: var(--adm-tint-ink);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.linkText {
+  display: flex;
+  flex: 1;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.linkLabel {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.badgeSlot {
+  display: flex;
+  flex: none;
+}
+
+.badgeSlot > span {
+  min-width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--accent-primary);
+  color: var(--adm-on-accent);
+  font-size: var(--text-3xs);
+}
+
+/* ---- Rail: 64px, every target a 40px square on one centre line ---- */
+.sidebar[data-collapsed='true'] {
+  padding-inline: 0;
+}
+
+.sidebar[data-collapsed='true'] .nav {
+  margin: 0;
+  padding: 0 0 16px;
+}
+
+.sidebar[data-collapsed='true'] .group {
+  align-items: center;
+}
+
+.sidebar[data-collapsed='true'] .glide {
+  left: calc(50% - 20px);
+  right: auto;
+  width: 40px;
+}
+
+/* A group heading becomes a full-width hairline between groups. */
+.sidebar[data-collapsed='true'] .groupLabel {
+  align-self: stretch;
+  height: 1px;
+  margin: 8px 0;
+  padding: 0;
+  overflow: hidden;
+  background: var(--border-subtle);
+  font-size: 0;
+  line-height: 0;
+  color: transparent;
+}
+
+.sidebar[data-collapsed='true'] .link {
+  justify-content: center;
+  width: 40px;
+  min-height: 40px;
+  padding: 0;
+}
+
+.sidebar[data-collapsed='true'] .linkText {
+  display: none;
+}
+
+.sidebar[data-collapsed='true'] .badgeSlot {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+}

package/dist/admin/_shell/sign-out.js

@@ -0,0 +1,14 @@
+import { platformAdminApi } from "@withpotter/lib/admin-api";
+import { apiFetch } from "@withpotter/lib/api";
+import { clearOwnerSession } from "../accounts/owner-session";
+async function signOutAdmin() {
+  await apiFetch("/accounts/logout", { method: "POST" }).catch(() => {
+  });
+  clearOwnerSession();
+  await platformAdminApi.logout().catch(() => {
+  });
+}
+export {
+  signOutAdmin
+};
+//# sourceMappingURL=sign-out.js.map

package/dist/admin/_shell/sign-out.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/sign-out.ts"],"sourcesContent":["import { platformAdminApi } from '@withpotter/lib/admin-api';\nimport { apiFetch } from '@withpotter/lib/api';\nimport { clearOwnerSession } from '../accounts/owner-session';\n\n/**\n * Ends the admin's session, and any \"View as owner\" session with it so that\n * one cannot outlive the other. The caller sends the browser to sign-in.\n */\nexport async function signOutAdmin() {\n  await apiFetch('/accounts/logout', { method: 'POST' }).catch(() => {});\n  clearOwnerSession();\n  await platformAdminApi.logout().catch(() => {});\n}\n"],"mappings":"AAAA,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAMlC,eAAsB,eAAe;AACnC,QAAM,SAAS,oBAAoB,EAAE,QAAQ,OAAO,CAAC,EAAE,MAAM,MAAM;AAAA,EAAC,CAAC;AACrE,oBAAkB;AAClB,QAAM,iBAAiB,OAAO,EAAE,MAAM,MAAM;AAAA,EAAC,CAAC;AAChD;","names":[]}

package/dist/admin/_shell/system-status-panel.js

@@ -0,0 +1,100 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@withpotter/ui-kit";
+import { relativeTime } from "../accounts/relative-time";
+import styles from "./system-status-panel.module.css";
+function overallOf(data, isError) {
+  if (isError)
+    return {
+      tone: "unknown",
+      label: "Unavailable",
+      detail: "The deployment did not answer. Try again in a moment."
+    };
+  if (!data)
+    return { tone: "unknown", label: "Checking", detail: "Asking the server\u2026" };
+  const missing = data.checks.filter((c) => !c.configured);
+  if (!data.ready)
+    return {
+      tone: "down",
+      label: "Merchants affected",
+      detail: `${missing.length} integration${missing.length === 1 ? "" : "s"} missing, including one merchants rely on.`
+    };
+  if (missing.length > 0)
+    return {
+      tone: "warn",
+      label: "Degraded",
+      detail: `Merchants can trade. ${missing.length} integration${missing.length === 1 ? " is" : "s are"} missing.`
+    };
+  return {
+    tone: "ok",
+    label: "All systems normal",
+    detail: "Every integration is configured."
+  };
+}
+const titleOf = (key) => {
+  const w = key.replace(/[-_]+/g, " ");
+  return w.charAt(0).toUpperCase() + w.slice(1);
+};
+const toneOf = (c) => c.configured ? "ok" : c.severity === "blocks-merchants" ? "down" : "warn";
+const IMPACT = {
+  "blocks-merchants": "Merchants",
+  degrades: "Degrades",
+  internal: "Internal"
+};
+const rank = (c) => c.configured ? 3 : c.severity === "blocks-merchants" ? 0 : 1;
+function SystemStatusPanel({
+  data,
+  overall,
+  isLoading,
+  isError,
+  isFetching,
+  checkedAt,
+  onRefresh
+}) {
+  const checks = [...data?.checks ?? []].sort((a, b) => rank(a) - rank(b));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.head, "data-tone": overall.tone, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.bigDot, "data-tone": overall.tone, "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("div", { className: styles.headText, children: [
+        /* @__PURE__ */ jsx("p", { className: styles.verdict, children: overall.label }),
+        /* @__PURE__ */ jsx("p", { className: styles.detail, children: overall.detail })
+      ] }),
+      data && /* @__PURE__ */ jsx("span", { className: styles.env, children: data.environment })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("ul", { className: styles.list, "aria-busy": true, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("li", { className: styles.skeleton, "aria-hidden": true }, i)) }) : checks.length > 0 ? /* @__PURE__ */ jsx("ul", { className: styles.list, children: checks.map((c) => /* @__PURE__ */ jsxs("li", { className: styles.check, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.dot, "data-tone": toneOf(c), "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("div", { className: styles.checkText, children: [
+        /* @__PURE__ */ jsxs("p", { className: styles.checkTitle, children: [
+          titleOf(c.key),
+          /* @__PURE__ */ jsx("span", { className: styles.state, "data-tone": toneOf(c), children: c.configured ? "Configured" : "Missing" })
+        ] }),
+        !c.configured && c.breaks && /* @__PURE__ */ jsx("p", { className: styles.breaks, children: c.breaks }),
+        !c.configured && c.vars.length > 0 && /* @__PURE__ */ jsxs("p", { className: styles.vars, children: [
+          "Set ",
+          c.vars.join(", ")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: styles.impact, children: IMPACT[c.severity] })
+    ] }, c.key)) }) : !isError && /* @__PURE__ */ jsx("p", { className: styles.empty, children: "No checks reported." }),
+    /* @__PURE__ */ jsxs("footer", { className: styles.foot, children: [
+      /* @__PURE__ */ jsx("span", { children: checkedAt ? `Checked ${relativeTime(new Date(checkedAt).toISOString())}` : "" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: onRefresh,
+          loading: isFetching,
+          icon: /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": true }),
+          children: "Check again"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  SystemStatusPanel,
+  overallOf
+};
+//# sourceMappingURL=system-status-panel.js.map

package/dist/admin/_shell/system-status-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/system-status-panel.tsx"],"sourcesContent":["'use client';\n\nimport { RefreshCw } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit';\nimport type {\n  DeploymentReadiness,\n  ReadinessCheck,\n} from '@withpotter/lib/admin-readiness-api';\nimport { relativeTime } from '../accounts/relative-time';\nimport styles from './system-status-panel.module.css';\n\nexport type StatusTone = 'ok' | 'warn' | 'down' | 'unknown';\n\nexport interface Overall {\n  tone: StatusTone;\n  label: string;\n  detail: string;\n}\n\n/** One verdict for the whole deployment, from its individual checks. */\nexport function overallOf(\n  data: DeploymentReadiness | undefined,\n  isError: boolean\n): Overall {\n  if (isError)\n    return {\n      tone: 'unknown',\n      label: 'Unavailable',\n      detail: 'The deployment did not answer. Try again in a moment.',\n    };\n  if (!data)\n    return { tone: 'unknown', label: 'Checking', detail: 'Asking the server…' };\n  const missing = data.checks.filter((c) => !c.configured);\n  if (!data.ready)\n    return {\n      tone: 'down',\n      label: 'Merchants affected',\n      detail: `${missing.length} integration${\n        missing.length === 1 ? '' : 's'\n      } missing, including one merchants rely on.`,\n    };\n  if (missing.length > 0)\n    return {\n      tone: 'warn',\n      label: 'Degraded',\n      detail: `Merchants can trade. ${missing.length} integration${\n        missing.length === 1 ? ' is' : 's are'\n      } missing.`,\n    };\n  return {\n    tone: 'ok',\n    label: 'All systems normal',\n    detail: 'Every integration is configured.',\n  };\n}\n\nconst titleOf = (key: string) => {\n  const w = key.replace(/[-_]+/g, ' ');\n  return w.charAt(0).toUpperCase() + w.slice(1);\n};\n\nconst toneOf = (c: ReadinessCheck): StatusTone =>\n  c.configured ? 'ok' : c.severity === 'blocks-merchants' ? 'down' : 'warn';\n\nconst IMPACT: Record<ReadinessCheck['severity'], string> = {\n  'blocks-merchants': 'Merchants',\n  degrades: 'Degrades',\n  internal: 'Internal',\n};\n\n/** Missing first (blocking before degrading), then what is configured. */\nconst rank = (c: ReadinessCheck) =>\n  c.configured ? 3 : c.severity === 'blocks-merchants' ? 0 : 1;\n\nexport function SystemStatusPanel({\n  data,\n  overall,\n  isLoading,\n  isError,\n  isFetching,\n  checkedAt,\n  onRefresh,\n}: {\n  data: DeploymentReadiness | undefined;\n  overall: Overall;\n  isLoading: boolean;\n  isError: boolean;\n  isFetching: boolean;\n  checkedAt: number;\n  onRefresh: () => void;\n}) {\n  const checks = [...(data?.checks ?? [])].sort((a, b) => rank(a) - rank(b));\n\n  return (\n    <>\n      <header className={styles.head} data-tone={overall.tone}>\n        <span className={styles.bigDot} data-tone={overall.tone} aria-hidden />\n        <div className={styles.headText}>\n          <p className={styles.verdict}>{overall.label}</p>\n          <p className={styles.detail}>{overall.detail}</p>\n        </div>\n        {data && <span className={styles.env}>{data.environment}</span>}\n      </header>\n\n      {isLoading ? (\n        <ul className={styles.list} aria-busy>\n          {[0, 1, 2].map((i) => (\n            <li key={i} className={styles.skeleton} aria-hidden />\n          ))}\n        </ul>\n      ) : checks.length > 0 ? (\n        <ul className={styles.list}>\n          {checks.map((c) => (\n            <li key={c.key} className={styles.check}>\n              <span className={styles.dot} data-tone={toneOf(c)} aria-hidden />\n              <div className={styles.checkText}>\n                <p className={styles.checkTitle}>\n                  {titleOf(c.key)}\n                  <span className={styles.state} data-tone={toneOf(c)}>\n                    {c.configured ? 'Configured' : 'Missing'}\n                  </span>\n                </p>\n                {!c.configured && c.breaks && (\n                  <p className={styles.breaks}>{c.breaks}</p>\n                )}\n                {!c.configured && c.vars.length > 0 && (\n                  <p className={styles.vars}>Set {c.vars.join(', ')}</p>\n                )}\n              </div>\n              <span className={styles.impact}>{IMPACT[c.severity]}</span>\n            </li>\n          ))}\n        </ul>\n      ) : (\n        !isError && <p className={styles.empty}>No checks reported.</p>\n      )}\n\n      <footer className={styles.foot}>\n        <span>\n          {checkedAt\n            ? `Checked ${relativeTime(new Date(checkedAt).toISOString())}`\n            : ''}\n        </span>\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={onRefresh}\n          loading={isFetching}\n          icon={<RefreshCw aria-hidden />}\n        >\n          Check again\n        </Button>\n      </footer>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/_shell/system-status-panel.module.css

@@ -0,0 +1,195 @@
+/* The status popover's checks. Tones: configured green, degraded soft amber,
+   red only when merchants are blocked; each sets a dot, a wash and an ink. */
+.dot,
+.bigDot,
+.head,
+.state {
+  --tone: var(--adm-cat-8);
+  --wash: var(--bg-base);
+  --ink: var(--text-secondary);
+}
+
+.dot[data-tone='ok'],
+.bigDot[data-tone='ok'],
+.head[data-tone='ok'],
+.state[data-tone='ok'] {
+  --tone: var(--adm-ok);
+  --wash: var(--adm-ok-bg);
+  --ink: var(--adm-ok-ink);
+}
+
+.dot[data-tone='warn'],
+.bigDot[data-tone='warn'],
+.head[data-tone='warn'],
+.state[data-tone='warn'] {
+  --tone: var(--adm-wait);
+  --wash: var(--adm-wait-bg);
+  --ink: var(--adm-wait-ink);
+}
+
+.dot[data-tone='down'],
+.bigDot[data-tone='down'],
+.head[data-tone='down'],
+.state[data-tone='down'] {
+  --tone: var(--error);
+  --wash: color-mix(in srgb, var(--error) 8%, transparent);
+  --ink: color-mix(in srgb, var(--error) 80%, var(--text-primary));
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--tone);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--wash);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bigDot {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--tone);
+}
+
+.headText {
+  flex: 1;
+  min-width: 0;
+}
+
+.verdict {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.detail {
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-secondary);
+}
+
+.env {
+  flex-shrink: 0;
+  padding: 0 8px;
+  border-radius: 10px;
+  background: var(--adm-hover);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--text-secondary);
+}
+
+.list {
+  display: grid;
+  margin: 0;
+  padding: 8px;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.check {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 8px;
+  border-radius: 10px;
+}
+
+.check + .check {
+  border-top: 1px solid var(--border-subtle);
+}
+
+.check > .dot {
+  margin-top: 6px;
+}
+
+.checkText {
+  flex: 1;
+  min-width: 0;
+}
+
+.checkTitle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.state {
+  flex-shrink: 0;
+  padding: 0 6px;
+  border-radius: 10px;
+  background: var(--wash);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--ink);
+}
+
+.breaks {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-secondary);
+}
+
+.vars {
+  margin: 4px 0 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 16px;
+  overflow-wrap: anywhere;
+  color: var(--text-tertiary);
+}
+
+.impact {
+  flex-shrink: 0;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--text-tertiary);
+}
+
+.skeleton {
+  height: 44px;
+  margin: 4px 0;
+  border-radius: 10px;
+  background: var(--adm-hover);
+}
+
+.empty {
+  margin: 0;
+  padding: 16px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-tertiary);
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 8px 8px 16px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-tertiary);
+}

package/dist/admin/_shell/topbar.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isActive } from "./nav-filter";
+import { InboxBell } from "./inbox-bell";
+import styles from "./topbar.module.css";
+function Topbar({
+  groups,
+  pathname,
+  canSupport,
+  showInbox
+}) {
+  const group = groups.find((g) => g.items.some((i) => isActive(i, pathname)));
+  const item = group?.items.find((i) => isActive(i, pathname));
+  return /* @__PURE__ */ jsxs("header", { className: styles.topbar, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.crumbs, children: [
+      group?.label && /* @__PURE__ */ jsx("span", { className: styles.crumbGroup, children: group.label }),
+      group?.label && /* @__PURE__ */ jsx("span", { className: styles.crumbSep, children: "/" }),
+      /* @__PURE__ */ jsx("span", { className: styles.crumbPage, children: item?.label ?? "Admin" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.actions, children: showInbox && /* @__PURE__ */ jsx(InboxBell, { canSupport }) })
+  ] });
+}
+export {
+  Topbar
+};
+//# sourceMappingURL=topbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/topbar.tsx"],"sourcesContent":["'use client';\n\nimport type { NavGroup } from './nav-config';\nimport { isActive } from './nav-filter';\nimport { InboxBell } from './inbox-bell';\nimport styles from './topbar.module.css';\n\n/**\n * The top of the work sheet: where you are, and what is waiting. Search and\n * the theme switch live in the sidebar's foot.\n */\nexport function Topbar({\n  groups,\n  pathname,\n  canSupport,\n  showInbox,\n}: {\n  groups: NavGroup[];\n  pathname: string;\n  canSupport: boolean;\n  /** Off when this Box serves neither Support nor Product feedback. */\n  showInbox: boolean;\n}) {\n  const group = groups.find((g) => g.items.some((i) => isActive(i, pathname)));\n  const item = group?.items.find((i) => isActive(i, pathname));\n\n  return (\n    <header className={styles.topbar}>\n      <div className={styles.crumbs}>\n        {group?.label && (\n          <span className={styles.crumbGroup}>{group.label}</span>\n        )}\n        {group?.label && <span className={styles.crumbSep}>/</span>}\n        <span className={styles.crumbPage}>{item?.label ?? 'Admin'}</span>\n      </div>\n\n      <div className={styles.actions}>\n        {showInbox && <InboxBell canSupport={canSupport} />}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AA4BM,SAEI,KAFJ;AAzBN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AAMZ,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,QAAQ,OAAO,KAAK,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC3E,QAAM,OAAO,OAAO,MAAM,KAAK,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC;AAE3D,SACE,qBAAC,YAAO,WAAW,OAAO,QACxB;AAAA,yBAAC,SAAI,WAAW,OAAO,QACpB;AAAA,aAAO,SACN,oBAAC,UAAK,WAAW,OAAO,YAAa,gBAAM,OAAM;AAAA,MAElD,OAAO,SAAS,oBAAC,UAAK,WAAW,OAAO,UAAU,eAAC;AAAA,MACpD,oBAAC,UAAK,WAAW,OAAO,WAAY,gBAAM,SAAS,SAAQ;AAAA,OAC7D;AAAA,IAEA,oBAAC,SAAI,WAAW,OAAO,SACpB,uBAAa,oBAAC,aAAU,YAAwB,GACnD;AAAA,KACF;AAEJ;","names":[]}