@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/_settings/store.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_settings/store.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\nimport {\n  DEFAULTS,\n  SETTINGS_KEY,\n  parseSettings,\n  serializeSettings,\n  type AdminSettings,\n} from './schema';\n\nconst listeners = new Set<() => void>();\nlet cache: AdminSettings | null = null;\n/** False when the browser refuses storage: settings then last this visit. */\nlet persisted = true;\n\nfunction read(): AdminSettings {\n  try {\n    return parseSettings(window.localStorage.getItem(SETTINGS_KEY));\n  } catch {\n    persisted = false;\n    return { ...DEFAULTS };\n  }\n}\n\nfunction emit() {\n  listeners.forEach((listener) => listener());\n}\n\nfunction onStorage(event: StorageEvent) {\n  if (event.key !== SETTINGS_KEY && event.key !== null) return;\n  cache = read();\n  emit();\n}\n\nfunction write(next: AdminSettings) {\n  cache = next;\n  try {\n    window.localStorage.setItem(SETTINGS_KEY, serializeSettings(next));\n    persisted = true;\n  } catch {\n    persisted = false;\n  }\n  emit();\n}\n\n/** One store for every consumer, so a change applies everywhere at once. */\nexport const settingsStore = {\n  subscribe(listener: () => void) {\n    listeners.add(listener);\n    if (listeners.size === 1) window.addEventListener('storage', onStorage);\n    return () => {\n      listeners.delete(listener);\n      if (!listeners.size) window.removeEventListener('storage', onStorage);\n    };\n  },\n  snapshot(): AdminSettings {\n    if (!cache) cache = read();\n    return cache;\n  },\n  serverSnapshot: (): AdminSettings => DEFAULTS,\n  update(patch: Partial<AdminSettings>) {\n    write({ ...settingsStore.snapshot(), ...patch });\n  },\n  reset() {\n    try {\n      window.localStorage.removeItem(SETTINGS_KEY);\n    } catch {\n      // Nothing stored to remove.\n    }\n    cache = { ...DEFAULTS };\n    emit();\n  },\n  /** Whether choices survive a reload in this browser. */\n  persisted: () => persisted,\n};\n\n/** The admin's preferences, live. */\nexport function useSettings(): AdminSettings {\n  return useSyncExternalStore(\n    settingsStore.subscribe,\n    settingsStore.snapshot,\n    settingsStore.serverSnapshot,\n  );\n}\n\n/**\n * For key handlers outside React's render: J/K/R/N and other bare-letter keys\n * only run while this is true.\n */\nexport function singleKeyShortcutsEnabled(): boolean {\n  if (typeof window === 'undefined') return true;\n  return settingsStore.snapshot().singleKey;\n}\n"],"mappings":";AAEA,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,MAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,QAA8B;AAElC,IAAI,YAAY;AAEhB,SAAS,OAAsB;AAC7B,MAAI;AACF,WAAO,cAAc,OAAO,aAAa,QAAQ,YAAY,CAAC;AAAA,EAChE,QAAQ;AACN,gBAAY;AACZ,WAAO,EAAE,GAAG,SAAS;AAAA,EACvB;AACF;AAEA,SAAS,OAAO;AACd,YAAU,QAAQ,CAAC,aAAa,SAAS,CAAC;AAC5C;AAEA,SAAS,UAAU,OAAqB;AACtC,MAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAM;AACtD,UAAQ,KAAK;AACb,OAAK;AACP;AAEA,SAAS,MAAM,MAAqB;AAClC,UAAQ;AACR,MAAI;AACF,WAAO,aAAa,QAAQ,cAAc,kBAAkB,IAAI,CAAC;AACjE,gBAAY;AAAA,EACd,QAAQ;AACN,gBAAY;AAAA,EACd;AACA,OAAK;AACP;AAGO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAsB;AAC9B,cAAU,IAAI,QAAQ;AACtB,QAAI,UAAU,SAAS,EAAG,QAAO,iBAAiB,WAAW,SAAS;AACtE,WAAO,MAAM;AACX,gBAAU,OAAO,QAAQ;AACzB,UAAI,CAAC,UAAU,KAAM,QAAO,oBAAoB,WAAW,SAAS;AAAA,IACtE;AAAA,EACF;AAAA,EACA,WAA0B;AACxB,QAAI,CAAC,MAAO,SAAQ,KAAK;AACzB,WAAO;AAAA,EACT;AAAA,EACA,gBAAgB,MAAqB;AAAA,EACrC,OAAO,OAA+B;AACpC,UAAM,EAAE,GAAG,cAAc,SAAS,GAAG,GAAG,MAAM,CAAC;AAAA,EACjD;AAAA,EACA,QAAQ;AACN,QAAI;AACF,aAAO,aAAa,WAAW,YAAY;AAAA,IAC7C,QAAQ;AAAA,IAER;AACA,YAAQ,EAAE,GAAG,SAAS;AACtB,SAAK;AAAA,EACP;AAAA;AAAA,EAEA,WAAW,MAAM;AACnB;AAGO,SAAS,cAA6B;AAC3C,SAAO;AAAA,IACL,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,EAChB;AACF;AAMO,SAAS,4BAAqC;AACnD,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,cAAc,SAAS,EAAE;AAClC;","names":[]}

package/dist/admin/_settings/use-apply-preferences.js

@@ -0,0 +1,38 @@
+"use client";
+import { useSyncExternalStore } from "react";
+import { useSettings } from "./store";
+const MORE_CONTRAST = "(prefers-contrast: more)";
+function subscribeContrast(listener) {
+  const query = window.matchMedia(MORE_CONTRAST);
+  query.addEventListener("change", listener);
+  return () => query.removeEventListener("change", listener);
+}
+function useOsHighContrast() {
+  return useSyncExternalStore(
+    subscribeContrast,
+    () => window.matchMedia(MORE_CONTRAST).matches,
+    () => false
+  );
+}
+function useApplyPreferences() {
+  const s = useSettings();
+  const osHigh = useOsHighContrast();
+  const contrast = s.contrast === "system" ? osHigh ? "high" : "standard" : s.contrast;
+  const shellProps = {
+    "data-density": s.density,
+    "data-motion": s.motion,
+    "data-contrast": contrast,
+    "data-focus": s.focus,
+    "data-underline": s.underline ? "on" : "off",
+    "data-status-shapes": s.statusShapes ? "on" : "off",
+    style: {
+      "--adm-text-scale": String(Number(s.textScale) / 100)
+    }
+  };
+  const reducedMotion = s.motion === "reduce" ? "always" : s.motion === "full" ? "never" : "user";
+  return { shellProps, reducedMotion };
+}
+export {
+  useApplyPreferences
+};
+//# sourceMappingURL=use-apply-preferences.js.map

package/dist/admin/_settings/use-apply-preferences.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_settings/use-apply-preferences.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore, type CSSProperties } from 'react';\nimport { useSettings } from './store';\n\nconst MORE_CONTRAST = '(prefers-contrast: more)';\n\nfunction subscribeContrast(listener: () => void) {\n  const query = window.matchMedia(MORE_CONTRAST);\n  query.addEventListener('change', listener);\n  return () => query.removeEventListener('change', listener);\n}\n\n/** The operating system's contrast request, live. */\nfunction useOsHighContrast() {\n  return useSyncExternalStore(\n    subscribeContrast,\n    () => window.matchMedia(MORE_CONTRAST).matches,\n    () => false,\n  );\n}\n\n/** What `MotionConfig` should do: follow the OS, or the admin's choice. */\nexport type ReducedMotionMode = 'user' | 'always' | 'never';\n\n/**\n * The preferences as attributes and a variable for `.adm-shell`. The rules in\n * admin.css (the \"Preferences\" section) read them, so components restyle from\n * tokens without knowing settings exist.\n */\nexport function useApplyPreferences() {\n  const s = useSettings();\n  const osHigh = useOsHighContrast();\n  const contrast =\n    s.contrast === 'system' ? (osHigh ? 'high' : 'standard') : s.contrast;\n\n  const shellProps = {\n    'data-density': s.density,\n    'data-motion': s.motion,\n    'data-contrast': contrast,\n    'data-focus': s.focus,\n    'data-underline': s.underline ? 'on' : 'off',\n    'data-status-shapes': s.statusShapes ? 'on' : 'off',\n    style: {\n      '--adm-text-scale': String(Number(s.textScale) / 100),\n    } as CSSProperties,\n  };\n\n  const reducedMotion: ReducedMotionMode =\n    s.motion === 'reduce' ? 'always' : s.motion === 'full' ? 'never' : 'user';\n\n  return { shellProps, reducedMotion };\n}\n"],"mappings":";AAEA,SAAS,4BAAgD;AACzD,SAAS,mBAAmB;AAE5B,MAAM,gBAAgB;AAEtB,SAAS,kBAAkB,UAAsB;AAC/C,QAAM,QAAQ,OAAO,WAAW,aAAa;AAC7C,QAAM,iBAAiB,UAAU,QAAQ;AACzC,SAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAC3D;AAGA,SAAS,oBAAoB;AAC3B,SAAO;AAAA,IACL;AAAA,IACA,MAAM,OAAO,WAAW,aAAa,EAAE;AAAA,IACvC,MAAM;AAAA,EACR;AACF;AAUO,SAAS,sBAAsB;AACpC,QAAM,IAAI,YAAY;AACtB,QAAM,SAAS,kBAAkB;AACjC,QAAM,WACJ,EAAE,aAAa,WAAY,SAAS,SAAS,aAAc,EAAE;AAE/D,QAAM,aAAa;AAAA,IACjB,gBAAgB,EAAE;AAAA,IAClB,eAAe,EAAE;AAAA,IACjB,iBAAiB;AAAA,IACjB,cAAc,EAAE;AAAA,IAChB,kBAAkB,EAAE,YAAY,OAAO;AAAA,IACvC,sBAAsB,EAAE,eAAe,OAAO;AAAA,IAC9C,OAAO;AAAA,MACL,oBAAoB,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAAA,IACtD;AAAA,EACF;AAEA,QAAM,gBACJ,EAAE,WAAW,WAAW,WAAW,EAAE,WAAW,SAAS,UAAU;AAErE,SAAO,EAAE,YAAY,cAAc;AACrC;","names":[]}

package/dist/admin/_settings/use-start-page.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { START_PATHS } from "./schema";
+import { settingsStore } from "./store";
+let decided = false;
+function useStartPage(pathname, ready, allowed) {
+  const router = useRouter();
+  useEffect(() => {
+    if (!ready || decided) return;
+    decided = true;
+    if (pathname !== "/admin") return;
+    const target = START_PATHS[settingsStore.snapshot().startPage];
+    if (target !== "/admin" && allowed(target)) router.replace(target);
+  }, [ready, pathname, allowed, router]);
+}
+export {
+  useStartPage
+};
+//# sourceMappingURL=use-start-page.js.map

package/dist/admin/_settings/use-start-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_settings/use-start-page.ts"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { START_PATHS } from './schema';\nimport { settingsStore } from './store';\n\n/** Decided once per page load, so Overview stays reachable afterwards. */\nlet decided = false;\n\n/**\n * Opens the chosen start page when the console first loads on `/admin`.\n * Later visits to Overview (the nav, the logo) stay on Overview.\n */\nexport function useStartPage(\n  pathname: string,\n  ready: boolean,\n  allowed: (href: string) => boolean,\n) {\n  const router = useRouter();\n\n  useEffect(() => {\n    if (!ready || decided) return;\n    decided = true;\n    if (pathname !== '/admin') return;\n    const target = START_PATHS[settingsStore.snapshot().startPage];\n    if (target !== '/admin' && allowed(target)) router.replace(target);\n  }, [ready, pathname, allowed, router]);\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,IAAI,UAAU;AAMP,SAAS,aACd,UACA,OACA,SACA;AACA,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,QAAS;AACvB,cAAU;AACV,QAAI,aAAa,SAAU;AAC3B,UAAM,SAAS,YAAY,cAAc,SAAS,EAAE,SAAS;AAC7D,QAAI,WAAW,YAAY,QAAQ,MAAM,EAAG,QAAO,QAAQ,MAAM;AAAA,EACnE,GAAG,CAAC,OAAO,UAAU,SAAS,MAAM,CAAC;AACvC;","names":[]}

package/dist/admin/_settings.js

@@ -0,0 +1 @@
+export * from './_settings/index.js';

package/dist/admin/_shell/admin-brand.js

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, useContext } from "react";
+import { APP_NAME } from "@withpotter/lib/app-name";
+const ADMIN_NAME = process.env.NEXT_PUBLIC_BOX_ADMIN_NAME || APP_NAME;
+const BrandContext = createContext(void 0);
+const AdminBrandProvider = BrandContext.Provider;
+function useAdminBrand() {
+  return useContext(BrandContext);
+}
+export {
+  ADMIN_NAME,
+  AdminBrandProvider,
+  useAdminBrand
+};
+//# sourceMappingURL=admin-brand.js.map

package/dist/admin/_shell/admin-brand.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/admin-brand.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\nimport { APP_NAME } from '@withpotter/lib/app-name';\n\n/**\n * What this admin calls the product in its copy (\"Every person registered on\n * OliveBox\"). Set per Box at build time; the platform name when unset.\n */\nexport const ADMIN_NAME = process.env.NEXT_PUBLIC_BOX_ADMIN_NAME || APP_NAME;\n\n/**\n * A host's own artwork: `logo` beside \"Admin\" in the sidebar card and on the\n * sign-in page, `mark` alone in the collapsed rail. Box's mark when absent.\n */\nexport type AdminBrand = { logo: ReactNode; mark: ReactNode };\n\nconst BrandContext = createContext<AdminBrand | undefined>(undefined);\n\nexport const AdminBrandProvider = BrandContext.Provider;\n\nexport function useAdminBrand(): AdminBrand | undefined {\n  return useContext(BrandContext);\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkC;AAC1D,SAAS,gBAAgB;AAMlB,MAAM,aAAa,QAAQ,IAAI,8BAA8B;AAQpE,MAAM,eAAe,cAAsC,MAAS;AAE7D,MAAM,qBAAqB,aAAa;AAExC,SAAS,gBAAwC;AACtD,SAAO,WAAW,YAAY;AAChC;","names":[]}

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

@@ -0,0 +1,147 @@
+/* The workspace card at the top of the sidebar, and the menu it opens. */
+
+.wrap {
+  position: relative;
+  flex: none;
+  margin-bottom: 16px;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 44px;
+  padding: 0 8px;
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--adm-fast);
+}
+
+.card:hover,
+.card[aria-expanded='true'] {
+  border-color: var(--adm-line-strong);
+}
+
+.card:focus {
+  outline: none;
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.card > svg:first-child {
+  flex: none;
+}
+
+.name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: none;
+  color: var(--text-tertiary);
+}
+
+/* A host's own artwork: its logo when open, its mark alone in the rail. */
+.hostLogo {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.hostMark {
+  display: none;
+  flex: none;
+  color: var(--accent-primary);
+}
+
+.hostLogo + .name {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* Rail: the mark alone, in a 40px square on the rail's axis. */
+.wrap[data-collapsed='true'] {
+  display: flex;
+  justify-content: center;
+}
+
+.wrap[data-collapsed='true'] .card {
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+.wrap[data-collapsed='true'] .name,
+.wrap[data-collapsed='true'] .chevron,
+.wrap[data-collapsed='true'] .hostLogo {
+  display: none;
+}
+
+.wrap[data-collapsed='true'] .hostMark {
+  display: inline-flex;
+}
+
+.menu {
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 232px;
+}
+
+.who {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.avatar {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  background: var(--accent-secondary);
+  color: var(--accent-secondary-ink);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.whoText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.3;
+}
+
+.email {
+  overflow: hidden;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.role {
+  font-size: var(--text-2xs);
+  text-transform: capitalize;
+  color: var(--text-tertiary);
+}

package/dist/admin/_shell/command-palette.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { CornerDownLeft, Search } from "lucide-react";
+import { Input } from "@withpotter/ui-kit";
+import styles from "./command-palette.module.css";
+function CommandPalette({
+  groups,
+  open,
+  onClose
+}) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const all = useMemo(
+    () => groups.flatMap(
+      (g) => g.items.map((item) => ({ ...item, group: g.label ?? "Home" }))
+    ),
+    [groups]
+  );
+  const results = all.filter(
+    (item) => `${item.label} ${item.group}`.toLowerCase().includes(query.toLowerCase())
+  );
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  const go = (href) => {
+    onClose();
+    router.push(href);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setCursor((c) => Math.min(c + 1, results.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setCursor((c) => Math.max(c - 1, 0));
+    } else if (event.key === "Enter" && results[cursor]) {
+      go(results[cursor].href);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${styles.scrim} bg-black/60 backdrop-blur-[3px]`,
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.panel, onKeyDown, children: [
+      /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
+        /* @__PURE__ */ jsx(Search, { size: 16 }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "bare",
+            autoFocus: true,
+            value: query,
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setCursor(0);
+            },
+            placeholder: "Jump to a page\u2026",
+            "aria-label": "Jump to a page"
+          }
+        ),
+        /* @__PURE__ */ jsx("kbd", { className: styles.kbd, children: "esc" })
+      ] }),
+      /* @__PURE__ */ jsxs("ul", { className: styles.list, role: "listbox", children: [
+        results.map(({ href, label, group, icon: Icon }, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            role: "option",
+            "aria-selected": index === cursor,
+            "data-active": index === cursor,
+            className: styles.option,
+            onPointerMove: () => setCursor(index),
+            onClick: () => go(href),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { children: label }),
+              /* @__PURE__ */ jsx("small", { children: group }),
+              index === cursor && /* @__PURE__ */ jsx(CornerDownLeft, { size: 14 })
+            ]
+          },
+          href
+        )),
+        !results.length && /* @__PURE__ */ jsx("li", { className: styles.empty, children: "No page matches" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  CommandPalette
+};
+//# sourceMappingURL=command-palette.js.map

package/dist/admin/_shell/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/command-palette.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { CornerDownLeft, Search } from 'lucide-react';\nimport { Input } from '@withpotter/ui-kit';\nimport type { NavGroup } from './nav-config';\nimport styles from './command-palette.module.css';\n\n/** ⌘K: type a page name, press Enter. */\nexport function CommandPalette({\n  groups,\n  open,\n  onClose,\n}: {\n  groups: NavGroup[];\n  open: boolean;\n  onClose: () => void;\n}) {\n  const router = useRouter();\n  const [query, setQuery] = useState('');\n  const [cursor, setCursor] = useState(0);\n  const all = useMemo(\n    () =>\n      groups.flatMap((g) =>\n        g.items.map((item) => ({ ...item, group: g.label ?? 'Home' })),\n      ),\n    [groups],\n  );\n  const results = all.filter((item) =>\n    `${item.label} ${item.group}`.toLowerCase().includes(query.toLowerCase()),\n  );\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') onClose();\n    };\n\n    window.addEventListener('keydown', onKey);\n\n    return () => window.removeEventListener('keydown', onKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  const go = (href: string) => {\n    onClose();\n    router.push(href);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      setCursor((c) => Math.min(c + 1, results.length - 1));\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      setCursor((c) => Math.max(c - 1, 0));\n    } else if (event.key === 'Enter' && results[cursor]) {\n      go(results[cursor].href);\n    }\n  };\n\n  return (\n    <div className={styles.root} role=\"dialog\" aria-modal=\"true\">\n      <div\n        className={`${styles.scrim} bg-black/60 backdrop-blur-[3px]`}\n        onClick={onClose}\n      />\n      <div className={styles.panel} onKeyDown={onKeyDown}>\n        <label className={styles.field}>\n          <Search size={16} />\n          <Input\n            variant=\"bare\"\n            autoFocus\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value);\n              setCursor(0);\n            }}\n            placeholder=\"Jump to a page…\"\n            aria-label=\"Jump to a page\"\n          />\n          <kbd className={styles.kbd}>esc</kbd>\n        </label>\n        <ul className={styles.list} role=\"listbox\">\n          {results.map(({ href, label, group, icon: Icon }, index) => (\n            <li\n              key={href}\n              role=\"option\"\n              aria-selected={index === cursor}\n              data-active={index === cursor}\n              className={styles.option}\n              onPointerMove={() => setCursor(index)}\n              onClick={() => go(href)}\n            >\n              <Icon size={16} />\n              <span>{label}</span>\n              <small>{group}</small>\n              {index === cursor && <CornerDownLeft size={14} />}\n            </li>\n          ))}\n          {!results.length && <li className={styles.empty}>No page matches</li>}\n        </ul>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAkEM,cAKE,YALF;AAhEN,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,cAAc;AACvC,SAAS,aAAa;AAEtB,OAAO,YAAY;AAGZ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AACtC,QAAM,MAAM;AAAA,IACV,MACE,OAAO;AAAA,MAAQ,CAAC,MACd,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,OAAO,EAAE,SAAS,OAAO,EAAE;AAAA,IAC/D;AAAA,IACF,CAAC,MAAM;AAAA,EACT;AACA,QAAM,UAAU,IAAI;AAAA,IAAO,CAAC,SAC1B,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK,GAAG,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC;AAAA,EAC1E;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AAEX,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,MAAM,QAAQ,SAAU,SAAQ;AAAA,IACtC;AAEA,WAAO,iBAAiB,WAAW,KAAK;AAExC,WAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,EAC1D,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,KAAK,CAAC,SAAiB;AAC3B,YAAQ;AACR,WAAO,KAAK,IAAI;AAAA,EAClB;AAEA,QAAM,YAAY,CAAC,UAA+B;AAChD,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,gBAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,QAAQ,SAAS,CAAC,CAAC;AAAA,IACtD,WAAW,MAAM,QAAQ,WAAW;AAClC,YAAM,eAAe;AACrB,gBAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC;AAAA,IACrC,WAAW,MAAM,QAAQ,WAAW,QAAQ,MAAM,GAAG;AACnD,SAAG,QAAQ,MAAM,EAAE,IAAI;AAAA,IACzB;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAW,OAAO,MAAM,MAAK,UAAS,cAAW,QACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,OAAO,KAAK;AAAA,QAC1B,SAAS;AAAA;AAAA,IACX;AAAA,IACA,qBAAC,SAAI,WAAW,OAAO,OAAO,WAC5B;AAAA,2BAAC,WAAM,WAAW,OAAO,OACvB;AAAA,4BAAC,UAAO,MAAM,IAAI;AAAA,QAClB;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAS;AAAA,YACT,OAAO;AAAA,YACP,UAAU,CAAC,UAAU;AACnB,uBAAS,MAAM,OAAO,KAAK;AAC3B,wBAAU,CAAC;AAAA,YACb;AAAA,YACA,aAAY;AAAA,YACZ,cAAW;AAAA;AAAA,QACb;AAAA,QACA,oBAAC,SAAI,WAAW,OAAO,KAAK,iBAAG;AAAA,SACjC;AAAA,MACA,qBAAC,QAAG,WAAW,OAAO,MAAM,MAAK,WAC9B;AAAA,gBAAQ,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,MAAM,KAAK,GAAG,UAChD;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,iBAAe,UAAU;AAAA,YACzB,eAAa,UAAU;AAAA,YACvB,WAAW,OAAO;AAAA,YAClB,eAAe,MAAM,UAAU,KAAK;AAAA,YACpC,SAAS,MAAM,GAAG,IAAI;AAAA,YAEtB;AAAA,kCAAC,QAAK,MAAM,IAAI;AAAA,cAChB,oBAAC,UAAM,iBAAM;AAAA,cACb,oBAAC,WAAO,iBAAM;AAAA,cACb,UAAU,UAAU,oBAAC,kBAAe,MAAM,IAAI;AAAA;AAAA;AAAA,UAX1C;AAAA,QAYP,CACD;AAAA,QACA,CAAC,QAAQ,UAAU,oBAAC,QAAG,WAAW,OAAO,OAAO,6BAAe;AAAA,SAClE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/_shell/command-palette.module.css

@@ -0,0 +1,109 @@
+/* ⌘K: a centred sheet that springs in, keyboard first. */
+
+.root {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: flex;
+  justify-content: center;
+  padding-top: 14vh;
+}
+
+.scrim {
+  position: absolute;
+  inset: 0;
+  animation: fade var(--adm-moderate) both;
+}
+
+.panel {
+  position: relative;
+  width: min(560px, calc(100vw - 32px));
+  align-self: flex-start;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--card-bg);
+  box-shadow: var(--adm-shadow-sheet);
+  animation: rise var(--adm-moderate) both;
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 52px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-tertiary);
+}
+
+.field > div {
+  flex: 1;
+}
+
+.list {
+  max-height: 360px;
+  margin: 0;
+  padding: 6px;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 40px;
+  padding: 0 12px;
+  border-radius: 10px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.option span {
+  flex: 1;
+  color: var(--text-primary);
+}
+
+.option small {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.option[data-active='true'] {
+  background: var(--adm-hover);
+}
+
+.option[data-active='true'] svg:first-child {
+  color: var(--accent-ink, var(--accent-primary));
+}
+
+.kbd {
+  padding: 2px 6px;
+  border-radius: 5px;
+  background: var(--adm-hover);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+}
+
+.empty {
+  padding: 20px 12px;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  text-align: center;
+}

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

@@ -0,0 +1,92 @@
+/* App frame, as on the merchant dashboard: the sidebar sits on the grey
+   canvas, the work area is a white sheet inset 8px from the top, right and
+   bottom with a hairline and a 12px corner. The sheet scrolls, not the page.
+   Motion tiers live on .adm-shell in admin.css. */
+
+.shell {
+  --sidebar-w: 232px;
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--adm-sidebar);
+  color: var(--text-primary);
+  transition: grid-template-columns var(--adm-moderate);
+}
+
+.shell[data-collapsed='true'] {
+  --sidebar-w: 64px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  margin: 8px 8px 8px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--border-default);
+  border-radius: var(--adm-card-radius);
+  background: var(--adm-canvas);
+}
+
+/* Content width caps at 1480px; past that the side padding grows. */
+.main {
+  flex: 1 0 auto;
+  width: 100%;
+  padding: 20px max(20px, calc((100% - 1440px) / 2)) 48px;
+}
+
+/* Work surfaces that should own the whole sheet (Support): no width cap,
+   slim padding, so the three panes use the full screen. */
+.main[data-full='true'] {
+  padding: 12px 16px;
+}
+
+/* The collapse tab, centred on the seam between sidebar and sheet. */
+.seam {
+  position: absolute;
+  top: 50%;
+  left: var(--sidebar-w);
+  z-index: 35;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 36px;
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  background: var(--bg-base);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  transition:
+    left var(--adm-moderate),
+    color var(--adm-fast),
+    border-color var(--adm-fast);
+}
+
+.seam:hover {
+  border-color: var(--adm-line-strong);
+  color: var(--text-primary);
+}
+
+.seam:focus {
+  outline: none;
+}
+
+.seam:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.seam svg {
+  transition: transform var(--adm-moderate);
+}
+
+.seam[data-collapsed='true'] svg {
+  transform: rotate(180deg);
+}

package/dist/admin/_shell/inbox-bell.js

@@ -0,0 +1,74 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { Bell, Headphones, MessageSquareText } from "lucide-react";
+import { useAdminInbox } from "../_inbox/use-admin-inbox";
+import bar from "./topbar.module.css";
+import menus from "./menus.module.css";
+import styles from "./inbox.module.css";
+function InboxBell({ canSupport }) {
+  const inbox = useAdminInbox(canSupport);
+  const [open, setOpen] = useState(false);
+  const total = inbox.support + inbox.feedback;
+  const rows = [
+    canSupport && {
+      href: "/admin/support",
+      icon: Headphones,
+      label: "Support cases",
+      hint: "New cases and merchant replies",
+      count: inbox.support
+    },
+    {
+      href: "/admin/feedback",
+      icon: MessageSquareText,
+      label: "Product feedback",
+      hint: "New since you last looked",
+      count: inbox.feedback
+    }
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrap, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: bar.iconBtn,
+        onClick: () => setOpen((value) => !value),
+        "aria-label": total ? `${total} new items` : "Nothing new",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx(Bell, { size: 16 }),
+          total > 0 && /* @__PURE__ */ jsx("span", { className: styles.dot })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: menus.menuScrim, onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { className: `${menus.pop} ${styles.panel}`, role: "menu", children: [
+        /* @__PURE__ */ jsx("div", { className: styles.head, children: "New since you last looked" }),
+        rows.map(({ href, icon: Icon, label, hint, count }) => /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href,
+            className: styles.row,
+            onClick: () => setOpen(false),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { size: 15 }) }),
+              /* @__PURE__ */ jsxs("span", { className: styles.text, children: [
+                /* @__PURE__ */ jsx("strong", { children: label }),
+                /* @__PURE__ */ jsx("small", { children: hint })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: styles.count, "data-zero": !count, children: count })
+            ]
+          },
+          href
+        )),
+        !total && /* @__PURE__ */ jsx("p", { className: styles.clear, children: "All caught up." })
+      ] })
+    ] })
+  ] });
+}
+export {
+  InboxBell
+};
+//# sourceMappingURL=inbox-bell.js.map

package/dist/admin/_shell/inbox-bell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/inbox-bell.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport Link from 'next/link';\nimport { Bell, Headphones, MessageSquareText } from 'lucide-react';\nimport { useAdminInbox } from '../_inbox/use-admin-inbox';\nimport bar from './topbar.module.css';\nimport menus from './menus.module.css';\nimport styles from './inbox.module.css';\n\n/** One place that says what is waiting on an admin, and goes there. */\nexport function InboxBell({ canSupport }: { canSupport: boolean }) {\n  const inbox = useAdminInbox(canSupport);\n  const [open, setOpen] = useState(false);\n  const total = inbox.support + inbox.feedback;\n  const rows = [\n    canSupport && {\n      href: '/admin/support',\n      icon: Headphones,\n      label: 'Support cases',\n      hint: 'New cases and merchant replies',\n      count: inbox.support,\n    },\n    {\n      href: '/admin/feedback',\n      icon: MessageSquareText,\n      label: 'Product feedback',\n      hint: 'New since you last looked',\n      count: inbox.feedback,\n    },\n  ].filter(Boolean) as Array<{\n    href: string;\n    icon: typeof Bell;\n    label: string;\n    hint: string;\n    count: number;\n  }>;\n\n  return (\n    <div className={styles.wrap}>\n      <button\n        type=\"button\"\n        className={bar.iconBtn}\n        onClick={() => setOpen((value) => !value)}\n        aria-label={total ? `${total} new items` : 'Nothing new'}\n        aria-expanded={open}\n      >\n        <Bell size={16} />\n        {total > 0 && <span className={styles.dot} />}\n      </button>\n      {open && (\n        <>\n          <div className={menus.menuScrim} onClick={() => setOpen(false)} />\n          <div className={`${menus.pop} ${styles.panel}`} role=\"menu\">\n            <div className={styles.head}>New since you last looked</div>\n            {rows.map(({ href, icon: Icon, label, hint, count }) => (\n              <Link\n                key={href}\n                href={href}\n                className={styles.row}\n                onClick={() => setOpen(false)}\n              >\n                <span className={styles.icon}>\n                  <Icon size={15} />\n                </span>\n                <span className={styles.text}>\n                  <strong>{label}</strong>\n                  <small>{hint}</small>\n                </span>\n                <span className={styles.count} data-zero={!count}>\n                  {count}\n                </span>\n              </Link>\n            ))}\n            {!total && <p className={styles.clear}>All caught up.</p>}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwCM,SAWE,UAJA,KAPF;AAtCN,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,SAAS,MAAM,YAAY,yBAAyB;AACpD,SAAS,qBAAqB;AAC9B,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,YAAY;AAGZ,SAAS,UAAU,EAAE,WAAW,GAA4B;AACjE,QAAM,QAAQ,cAAc,UAAU;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,UAAU,MAAM;AACpC,QAAM,OAAO;AAAA,IACX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO,MAAM;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO,MAAM;AAAA,IACf;AAAA,EACF,EAAE,OAAO,OAAO;AAQhB,SACE,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,IAAI;AAAA,QACf,SAAS,MAAM,QAAQ,CAAC,UAAU,CAAC,KAAK;AAAA,QACxC,cAAY,QAAQ,GAAG,KAAK,eAAe;AAAA,QAC3C,iBAAe;AAAA,QAEf;AAAA,8BAAC,QAAK,MAAM,IAAI;AAAA,UACf,QAAQ,KAAK,oBAAC,UAAK,WAAW,OAAO,KAAK;AAAA;AAAA;AAAA,IAC7C;AAAA,IACC,QACC,iCACE;AAAA,0BAAC,SAAI,WAAW,MAAM,WAAW,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,MAChE,qBAAC,SAAI,WAAW,GAAG,MAAM,GAAG,IAAI,OAAO,KAAK,IAAI,MAAK,QACnD;AAAA,4BAAC,SAAI,WAAW,OAAO,MAAM,uCAAyB;AAAA,QACrD,KAAK,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAChD;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA,WAAW,OAAO;AAAA,YAClB,SAAS,MAAM,QAAQ,KAAK;AAAA,YAE5B;AAAA,kCAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,QAAK,MAAM,IAAI,GAClB;AAAA,cACA,qBAAC,UAAK,WAAW,OAAO,MACtB;AAAA,oCAAC,YAAQ,iBAAM;AAAA,gBACf,oBAAC,WAAO,gBAAK;AAAA,iBACf;AAAA,cACA,oBAAC,UAAK,WAAW,OAAO,OAAO,aAAW,CAAC,OACxC,iBACH;AAAA;AAAA;AAAA,UAdK;AAAA,QAeP,CACD;AAAA,QACA,CAAC,SAAS,oBAAC,OAAE,WAAW,OAAO,OAAO,4BAAc;AAAA,SACvD;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}