@withpotter/pages-admin 0.13.0-next.101

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

@@ -0,0 +1,84 @@
+/* The top of the work sheet: breadcrumb, system status, inbox. Plain: a
+   hairline under it and nothing else. */
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 16px;
+  height: var(--adm-topbar-h);
+  padding: 0 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--adm-canvas);
+}
+
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.crumbGroup,
+.crumbSep {
+  color: var(--text-tertiary);
+}
+
+.crumbPage {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Shared by the status and inbox buttons. */
+.iconBtn {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    background var(--adm-fast),
+    color var(--adm-fast);
+}
+
+.iconBtn:hover,
+.iconBtn[aria-expanded='true'] {
+  background: var(--adm-hover);
+  color: var(--text-primary);
+}
+
+.iconBtn:focus {
+  outline: none;
+}
+
+.iconBtn:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+@media (max-width: 720px) {
+  .topbar {
+    padding: 0 16px;
+  }
+
+  .crumbGroup,
+  .crumbSep {
+    display: none;
+  }
+}

package/dist/admin/_shell/use-admin-query-defaults.js

@@ -0,0 +1,18 @@
+"use client";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+function useAdminQueryDefaults() {
+  const client = useQueryClient();
+  useState(() => {
+    client.setQueryDefaults(["platform-admin"], {
+      staleTime: 6e4,
+      gcTime: 10 * 6e4,
+      refetchOnWindowFocus: false
+    });
+    return true;
+  });
+}
+export {
+  useAdminQueryDefaults
+};
+//# sourceMappingURL=use-admin-query-defaults.js.map

package/dist/admin/_shell/use-admin-query-defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/use-admin-query-defaults.ts"],"sourcesContent":["'use client';\n\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\n\n/**\n * Admin data is read far more than it changes, so it is served from cache for\n * a minute while revalidating and kept for ten.\n *\n * No global `placeholderData`: a drawer that switches from record A to B\n * would show A's data as B's (and a reply could reach the wrong case). Lists\n * and period-driven queries opt in to `keepPreviousData` themselves.\n */\nexport function useAdminQueryDefaults() {\n  const client = useQueryClient();\n\n  useState(() => {\n    client.setQueryDefaults(['platform-admin'], {\n      staleTime: 60_000,\n      gcTime: 10 * 60_000,\n      refetchOnWindowFocus: false,\n    });\n\n    return true;\n  });\n}\n"],"mappings":";AAEA,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAUlB,SAAS,wBAAwB;AACtC,QAAM,SAAS,eAAe;AAE9B,WAAS,MAAM;AACb,WAAO,iBAAiB,CAAC,gBAAgB,GAAG;AAAA,MAC1C,WAAW;AAAA,MACX,QAAQ,KAAK;AAAA,MACb,sBAAsB;AAAA,IACxB,CAAC;AAED,WAAO;AAAA,EACT,CAAC;AACH;","names":[]}

package/dist/admin/_shell/use-fluid-hover.js

@@ -0,0 +1,62 @@
+"use client";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+function useFluidHover() {
+  const [rect, setRect] = useState(null);
+  const pointerY = useRef(null);
+  const frame = useRef(0);
+  const measure = useCallback((container, y) => {
+    const items = container.querySelectorAll("[data-fluid-item]");
+    let nearest = null;
+    let best = Infinity;
+    items.forEach((item) => {
+      const box2 = item.getBoundingClientRect();
+      const distance = Math.abs(y - (box2.top + box2.height / 2));
+      if (distance < best) {
+        best = distance;
+        nearest = box2;
+      }
+    });
+    if (!nearest) return;
+    const box = nearest;
+    const top = box.top - container.getBoundingClientRect().top + container.scrollTop;
+    setRect(
+      (current) => current && current.top === top && current.height === box.height ? current : { top, height: box.height }
+    );
+  }, []);
+  const onPointerMove = useCallback(
+    (event) => {
+      pointerY.current = event.clientY;
+      measure(event.currentTarget, event.clientY);
+    },
+    [measure]
+  );
+  const onPointerLeave = useCallback(() => {
+    pointerY.current = null;
+    setRect(null);
+  }, []);
+  const onClick = useCallback(
+    (event) => {
+      const container = event.currentTarget;
+      const until = performance.now() + 320;
+      cancelAnimationFrame(frame.current);
+      const follow = () => {
+        if (pointerY.current !== null) measure(container, pointerY.current);
+        if (performance.now() < until)
+          frame.current = requestAnimationFrame(follow);
+      };
+      frame.current = requestAnimationFrame(follow);
+    },
+    [measure]
+  );
+  useEffect(() => () => cancelAnimationFrame(frame.current), []);
+  return { rect, onPointerMove, onPointerLeave, onClick };
+}
+export {
+  useFluidHover
+};
+//# sourceMappingURL=use-fluid-hover.js.map

package/dist/admin/_shell/use-fluid-hover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/use-fluid-hover.ts"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PointerEvent,\n} from 'react';\n\ntype Rect = { top: number; height: number } | null;\n\n/**\n * Fluid hover: one highlight that glides to the item nearest the pointer\n * (not just the one under it), so the target is lit before the click lands.\n * Items opt in with `data-fluid-item`; bind the handlers on their scrolling\n * container. The glide is a CSS spring on `transform`, so it retargets\n * smoothly when the pointer changes direction.\n */\nexport function useFluidHover() {\n  const [rect, setRect] = useState<Rect>(null);\n  const pointerY = useRef<number | null>(null);\n  const frame = useRef(0);\n\n  const measure = useCallback((container: HTMLElement, y: number) => {\n    const items = container.querySelectorAll<HTMLElement>('[data-fluid-item]');\n    let nearest: DOMRect | null = null;\n    let best = Infinity;\n\n    items.forEach((item) => {\n      const box = item.getBoundingClientRect();\n      const distance = Math.abs(y - (box.top + box.height / 2));\n\n      if (distance < best) {\n        best = distance;\n        nearest = box;\n      }\n    });\n\n    if (!nearest) return;\n\n    const box: DOMRect = nearest;\n    const top =\n      box.top - container.getBoundingClientRect().top + container.scrollTop;\n\n    setRect((current) =>\n      current && current.top === top && current.height === box.height\n        ? current\n        : { top, height: box.height },\n    );\n  }, []);\n\n  const onPointerMove = useCallback(\n    (event: PointerEvent<HTMLElement>) => {\n      pointerY.current = event.clientY;\n      measure(event.currentTarget, event.clientY);\n    },\n    [measure],\n  );\n\n  const onPointerLeave = useCallback(() => {\n    pointerY.current = null;\n    setRect(null);\n  }, []);\n\n  /**\n   * A group opening or closing moves the rows under a still pointer, and no\n   * pointer event follows, so the highlight would stay where the row was. After\n   * a press, follow the rows for the length of the move.\n   */\n  const onClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      const container = event.currentTarget;\n      const until = performance.now() + 320;\n      cancelAnimationFrame(frame.current);\n\n      const follow = () => {\n        if (pointerY.current !== null) measure(container, pointerY.current);\n        if (performance.now() < until)\n          frame.current = requestAnimationFrame(follow);\n      };\n\n      frame.current = requestAnimationFrame(follow);\n    },\n    [measure],\n  );\n\n  useEffect(() => () => cancelAnimationFrame(frame.current), []);\n\n  return { rect, onPointerMove, onPointerLeave, onClick };\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAWA,SAAS,gBAAgB;AAC9B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAe,IAAI;AAC3C,QAAM,WAAW,OAAsB,IAAI;AAC3C,QAAM,QAAQ,OAAO,CAAC;AAEtB,QAAM,UAAU,YAAY,CAAC,WAAwB,MAAc;AACjE,UAAM,QAAQ,UAAU,iBAA8B,mBAAmB;AACzE,QAAI,UAA0B;AAC9B,QAAI,OAAO;AAEX,UAAM,QAAQ,CAAC,SAAS;AACtB,YAAMA,OAAM,KAAK,sBAAsB;AACvC,YAAM,WAAW,KAAK,IAAI,KAAKA,KAAI,MAAMA,KAAI,SAAS,EAAE;AAExD,UAAI,WAAW,MAAM;AACnB,eAAO;AACP,kBAAUA;AAAA,MACZ;AAAA,IACF,CAAC;AAED,QAAI,CAAC,QAAS;AAEd,UAAM,MAAe;AACrB,UAAM,MACJ,IAAI,MAAM,UAAU,sBAAsB,EAAE,MAAM,UAAU;AAE9D;AAAA,MAAQ,CAAC,YACP,WAAW,QAAQ,QAAQ,OAAO,QAAQ,WAAW,IAAI,SACrD,UACA,EAAE,KAAK,QAAQ,IAAI,OAAO;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAqC;AACpC,eAAS,UAAU,MAAM;AACzB,cAAQ,MAAM,eAAe,MAAM,OAAO;AAAA,IAC5C;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,aAAS,UAAU;AACnB,YAAQ,IAAI;AAAA,EACd,GAAG,CAAC,CAAC;AAOL,QAAM,UAAU;AAAA,IACd,CAAC,UAAmC;AAClC,YAAM,YAAY,MAAM;AACxB,YAAM,QAAQ,YAAY,IAAI,IAAI;AAClC,2BAAqB,MAAM,OAAO;AAElC,YAAM,SAAS,MAAM;AACnB,YAAI,SAAS,YAAY,KAAM,SAAQ,WAAW,SAAS,OAAO;AAClE,YAAI,YAAY,IAAI,IAAI;AACtB,gBAAM,UAAU,sBAAsB,MAAM;AAAA,MAChD;AAEA,YAAM,UAAU,sBAAsB,MAAM;AAAA,IAC9C;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM,MAAM,qBAAqB,MAAM,OAAO,GAAG,CAAC,CAAC;AAE7D,SAAO,EAAE,MAAM,eAAe,gBAAgB,QAAQ;AACxD;","names":["box"]}

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

@@ -0,0 +1,64 @@
+"use client";
+import { useState, useSyncExternalStore } from "react";
+const STORAGE_KEY = "pb_admin_nav_groups";
+let cache = {};
+let cachedRaw = null;
+const listeners = /* @__PURE__ */ new Set();
+function read() {
+  if (typeof window === "undefined") return cache;
+  let raw = null;
+  try {
+    raw = localStorage.getItem(STORAGE_KEY);
+  } catch {
+    return cache;
+  }
+  if (raw !== cachedRaw) {
+    cachedRaw = raw;
+    try {
+      const parsed = raw ? JSON.parse(raw) : {};
+      cache = parsed && typeof parsed === "object" ? parsed : {};
+    } catch {
+      cache = {};
+    }
+  }
+  return cache;
+}
+const empty = {};
+const emptySnapshot = () => empty;
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function remember(label, open) {
+  const next = { ...read(), [label]: open };
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+  } catch {
+  }
+  cachedRaw = JSON.stringify(next);
+  cache = next;
+  listeners.forEach((listener) => listener());
+}
+function useOpenGroups(pathname, activeGroup) {
+  const remembered = useSyncExternalStore(subscribe, read, emptySnapshot);
+  const [arrived, setArrived] = useState({});
+  const [choiceRoute, setChoiceRoute] = useState(pathname);
+  if (choiceRoute !== pathname) {
+    setChoiceRoute(pathname);
+    if (activeGroup && arrived[activeGroup] !== true)
+      setArrived({ ...arrived, [activeGroup]: true });
+  }
+  const setGroupOpen = (label, next) => {
+    if (label in arrived) {
+      const rest = { ...arrived };
+      delete rest[label];
+      setArrived(rest);
+    }
+    remember(label, next);
+  };
+  return { choices: { ...remembered, ...arrived }, setGroupOpen };
+}
+export {
+  useOpenGroups
+};
+//# sourceMappingURL=use-open-groups.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/use-open-groups.ts"],"sourcesContent":["'use client';\n\nimport { useState, useSyncExternalStore } from 'react';\nimport type { GroupChoices } from './nav-fold';\n\nconst STORAGE_KEY = 'pb_admin_nav_groups';\n\n/**\n * The groups the admin has opened or closed by hand, remembered across visits.\n * An external store, not state read in an effect: localStorage does not exist\n * while the server renders, and the snapshot must stay referentially stable\n * between renders, so it is cached by the raw string.\n */\nlet cache: GroupChoices = {};\nlet cachedRaw: string | null = null;\nconst listeners = new Set<() => void>();\n\nfunction read(): GroupChoices {\n  if (typeof window === 'undefined') return cache;\n\n  let raw: string | null = null;\n\n  try {\n    raw = localStorage.getItem(STORAGE_KEY);\n  } catch {\n    return cache;\n  }\n\n  if (raw !== cachedRaw) {\n    cachedRaw = raw;\n\n    try {\n      const parsed: unknown = raw ? JSON.parse(raw) : {};\n\n      cache =\n        parsed && typeof parsed === 'object' ? (parsed as GroupChoices) : {};\n    } catch {\n      cache = {};\n    }\n  }\n\n  return cache;\n}\n\nconst empty: GroupChoices = {};\nconst emptySnapshot = () => empty;\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n\n  return () => listeners.delete(listener);\n}\n\nfunction remember(label: string, open: boolean) {\n  const next = { ...read(), [label]: open };\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  cachedRaw = JSON.stringify(next);\n  cache = next;\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Which sidebar groups are open by choice, each on its own: pressing one never\n * moves another. `activeGroup` is the group holding the current page, or null.\n *\n * Arriving on a page opens its own group and holds it open, so a group that was\n * open only for the last page does not shut by itself, and one closed by hand\n * does not hide the row you landed on. That arrival is kept for the visit only;\n * what is remembered is what was pressed. Pressing a group again takes over.\n * Adjusted during render, not in an effect, so no stale frame paints.\n */\nexport function useOpenGroups(pathname: string, activeGroup: string | null) {\n  const remembered = useSyncExternalStore(subscribe, read, emptySnapshot);\n  const [arrived, setArrived] = useState<GroupChoices>({});\n  const [choiceRoute, setChoiceRoute] = useState(pathname);\n\n  if (choiceRoute !== pathname) {\n    setChoiceRoute(pathname);\n\n    if (activeGroup && arrived[activeGroup] !== true)\n      setArrived({ ...arrived, [activeGroup]: true });\n  }\n\n  const setGroupOpen = (label: string, next: boolean) => {\n    if (label in arrived) {\n      const rest = { ...arrived };\n\n      delete rest[label];\n      setArrived(rest);\n    }\n\n    remember(label, next);\n  };\n\n  return { choices: { ...remembered, ...arrived }, setGroupOpen };\n}\n"],"mappings":";AAEA,SAAS,UAAU,4BAA4B;AAG/C,MAAM,cAAc;AAQpB,IAAI,QAAsB,CAAC;AAC3B,IAAI,YAA2B;AAC/B,MAAM,YAAY,oBAAI,IAAgB;AAEtC,SAAS,OAAqB;AAC5B,MAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,MAAI,MAAqB;AAEzB,MAAI;AACF,UAAM,aAAa,QAAQ,WAAW;AAAA,EACxC,QAAQ;AACN,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,WAAW;AACrB,gBAAY;AAEZ,QAAI;AACF,YAAM,SAAkB,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;AAEjD,cACE,UAAU,OAAO,WAAW,WAAY,SAA0B,CAAC;AAAA,IACvE,QAAQ;AACN,cAAQ,CAAC;AAAA,IACX;AAAA,EACF;AAEA,SAAO;AACT;AAEA,MAAM,QAAsB,CAAC;AAC7B,MAAM,gBAAgB,MAAM;AAE5B,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AAEtB,SAAO,MAAM,UAAU,OAAO,QAAQ;AACxC;AAEA,SAAS,SAAS,OAAe,MAAe;AAC9C,QAAM,OAAO,EAAE,GAAG,KAAK,GAAG,CAAC,KAAK,GAAG,KAAK;AAExC,MAAI;AACF,iBAAa,QAAQ,aAAa,KAAK,UAAU,IAAI,CAAC;AAAA,EACxD,QAAQ;AAAA,EAER;AAEA,cAAY,KAAK,UAAU,IAAI;AAC/B,UAAQ;AACR,YAAU,QAAQ,CAAC,aAAa,SAAS,CAAC;AAC5C;AAYO,SAAS,cAAc,UAAkB,aAA4B;AAC1E,QAAM,aAAa,qBAAqB,WAAW,MAAM,aAAa;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAC,CAAC;AACvD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,QAAQ;AAEvD,MAAI,gBAAgB,UAAU;AAC5B,mBAAe,QAAQ;AAEvB,QAAI,eAAe,QAAQ,WAAW,MAAM;AAC1C,iBAAW,EAAE,GAAG,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC;AAAA,EAClD;AAEA,QAAM,eAAe,CAAC,OAAe,SAAkB;AACrD,QAAI,SAAS,SAAS;AACpB,YAAM,OAAO,EAAE,GAAG,QAAQ;AAE1B,aAAO,KAAK,KAAK;AACjB,iBAAW,IAAI;AAAA,IACjB;AAEA,aAAS,OAAO,IAAI;AAAA,EACtB;AAEA,SAAO,EAAE,SAAS,EAAE,GAAG,YAAY,GAAG,QAAQ,GAAG,aAAa;AAChE;","names":[]}

package/dist/admin/_shell/use-shell-prefs.js

@@ -0,0 +1,87 @@
+"use client";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+const KEY = "potter-admin-sidebar-collapsed";
+function readCollapsed() {
+  try {
+    return typeof window !== "undefined" && localStorage.getItem(KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+const listeners = /* @__PURE__ */ new Set();
+let collapsedNow = null;
+const sidebarStore = {
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+  snapshot() {
+    if (collapsedNow === null) collapsedNow = readCollapsed();
+    return collapsedNow;
+  },
+  serverSnapshot: () => false,
+  set(next) {
+    collapsedNow = next;
+    try {
+      window.localStorage.setItem(KEY, next ? "1" : "0");
+    } catch {
+    }
+    listeners.forEach((listener) => listener());
+  }
+};
+function useSidebarCollapsed() {
+  return useSyncExternalStore(
+    sidebarStore.subscribe,
+    sidebarStore.snapshot,
+    sidebarStore.serverSnapshot
+  );
+}
+const NARROW = "(max-width: 860px)";
+function subscribeNarrow(listener) {
+  const query = window.matchMedia(NARROW);
+  query.addEventListener("change", listener);
+  return () => query.removeEventListener("change", listener);
+}
+function useNarrow() {
+  return useSyncExternalStore(
+    subscribeNarrow,
+    () => window.matchMedia(NARROW).matches,
+    () => false
+  );
+}
+function useShellPrefs() {
+  const collapsed = useSidebarCollapsed();
+  const narrow = useNarrow();
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  useEffect(() => {
+    const onKey = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setPaletteOpen((open) => !open);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const toggleCollapsed = useCallback(
+    () => sidebarStore.set(!sidebarStore.snapshot()),
+    []
+  );
+  const openPalette = useCallback(() => setPaletteOpen(true), []);
+  const closePalette = useCallback(() => setPaletteOpen(false), []);
+  return {
+    collapsed,
+    rail: collapsed || narrow,
+    narrow,
+    toggleCollapsed,
+    paletteOpen,
+    openPalette,
+    closePalette
+  };
+}
+export {
+  sidebarStore,
+  useShellPrefs,
+  useSidebarCollapsed
+};
+//# sourceMappingURL=use-shell-prefs.js.map

package/dist/admin/_shell/use-shell-prefs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/use-shell-prefs.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState, useSyncExternalStore } from 'react';\n\nconst KEY = 'potter-admin-sidebar-collapsed';\n\nfunction readCollapsed() {\n  try {\n    return typeof window !== 'undefined' && localStorage.getItem(KEY) === '1';\n  } catch {\n    return false;\n  }\n}\n\nconst listeners = new Set<() => void>();\nlet collapsedNow: boolean | null = null;\n\n/**\n * The sidebar's collapsed state, shared by the shell and Settings so a change\n * in either shows in both at once.\n */\nexport const sidebarStore = {\n  subscribe(listener: () => void) {\n    listeners.add(listener);\n    return () => listeners.delete(listener);\n  },\n  snapshot(): boolean {\n    if (collapsedNow === null) collapsedNow = readCollapsed();\n    return collapsedNow;\n  },\n  serverSnapshot: () => false,\n  set(next: boolean) {\n    collapsedNow = next;\n    try {\n      window.localStorage.setItem(KEY, next ? '1' : '0');\n    } catch {\n      // Not remembered; still applies.\n    }\n    listeners.forEach((listener) => listener());\n  },\n};\n\nexport function useSidebarCollapsed() {\n  return useSyncExternalStore(\n    sidebarStore.subscribe,\n    sidebarStore.snapshot,\n    sidebarStore.serverSnapshot,\n  );\n}\n\nconst NARROW = '(max-width: 860px)';\n\nfunction subscribeNarrow(listener: () => void) {\n  const query = window.matchMedia(NARROW);\n  query.addEventListener('change', listener);\n  return () => query.removeEventListener('change', listener);\n}\n\n/** A narrow window always gets the icon rail; the toggle is hidden there. */\nfunction useNarrow() {\n  return useSyncExternalStore(\n    subscribeNarrow,\n    () => window.matchMedia(NARROW).matches,\n    () => false,\n  );\n}\n\n/**\n * Sidebar collapse (remembered per browser) and the ⌘K palette. `rail` is\n * what the sidebar draws: collapsed by choice, or forced by a narrow window.\n */\nexport function useShellPrefs() {\n  const collapsed = useSidebarCollapsed();\n  const narrow = useNarrow();\n  const [paletteOpen, setPaletteOpen] = useState(false);\n\n  useEffect(() => {\n    const onKey = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\n        event.preventDefault();\n        setPaletteOpen((open) => !open);\n      }\n    };\n\n    window.addEventListener('keydown', onKey);\n\n    return () => window.removeEventListener('keydown', onKey);\n  }, []);\n\n  const toggleCollapsed = useCallback(\n    () => sidebarStore.set(!sidebarStore.snapshot()),\n    [],\n  );\n\n  const openPalette = useCallback(() => setPaletteOpen(true), []);\n  const closePalette = useCallback(() => setPaletteOpen(false), []);\n\n  return {\n    collapsed,\n    rail: collapsed || narrow,\n    narrow,\n    toggleCollapsed,\n    paletteOpen,\n    openPalette,\n    closePalette,\n  };\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,UAAU,4BAA4B;AAEvE,MAAM,MAAM;AAEZ,SAAS,gBAAgB;AACvB,MAAI;AACF,WAAO,OAAO,WAAW,eAAe,aAAa,QAAQ,GAAG,MAAM;AAAA,EACxE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,MAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,eAA+B;AAM5B,MAAM,eAAe;AAAA,EAC1B,UAAU,UAAsB;AAC9B,cAAU,IAAI,QAAQ;AACtB,WAAO,MAAM,UAAU,OAAO,QAAQ;AAAA,EACxC;AAAA,EACA,WAAoB;AAClB,QAAI,iBAAiB,KAAM,gBAAe,cAAc;AACxD,WAAO;AAAA,EACT;AAAA,EACA,gBAAgB,MAAM;AAAA,EACtB,IAAI,MAAe;AACjB,mBAAe;AACf,QAAI;AACF,aAAO,aAAa,QAAQ,KAAK,OAAO,MAAM,GAAG;AAAA,IACnD,QAAQ;AAAA,IAER;AACA,cAAU,QAAQ,CAAC,aAAa,SAAS,CAAC;AAAA,EAC5C;AACF;AAEO,SAAS,sBAAsB;AACpC,SAAO;AAAA,IACL,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,EACf;AACF;AAEA,MAAM,SAAS;AAEf,SAAS,gBAAgB,UAAsB;AAC7C,QAAM,QAAQ,OAAO,WAAW,MAAM;AACtC,QAAM,iBAAiB,UAAU,QAAQ;AACzC,SAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAC3D;AAGA,SAAS,YAAY;AACnB,SAAO;AAAA,IACL;AAAA,IACA,MAAM,OAAO,WAAW,MAAM,EAAE;AAAA,IAChC,MAAM;AAAA,EACR;AACF;AAMO,SAAS,gBAAgB;AAC9B,QAAM,YAAY,oBAAoB;AACtC,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,YAAU,MAAM;AACd,UAAM,QAAQ,CAAC,UAAyB;AACtC,WAAK,MAAM,WAAW,MAAM,YAAY,MAAM,IAAI,YAAY,MAAM,KAAK;AACvE,cAAM,eAAe;AACrB,uBAAe,CAAC,SAAS,CAAC,IAAI;AAAA,MAChC;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,KAAK;AAExC,WAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,EAC1D,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB;AAAA,IACtB,MAAM,aAAa,IAAI,CAAC,aAAa,SAAS,CAAC;AAAA,IAC/C,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,YAAY,MAAM,eAAe,IAAI,GAAG,CAAC,CAAC;AAC9D,QAAM,eAAe,YAAY,MAAM,eAAe,KAAK,GAAG,CAAC,CAAC;AAEhE,SAAO;AAAA,IACL;AAAA,IACA,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/admin/_shell/user-menu.js

@@ -0,0 +1,80 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ChevronsUpDown, LogOut } from "lucide-react";
+import { BoxMark } from "@withpotter/ui-kit/box-mark";
+import { ADMIN_NAME, useAdminBrand } from "./admin-brand";
+import { RailTip } from "./nav-row";
+import { signOutAdmin } from "./sign-out";
+import brand from "./brand.module.css";
+import menus from "./menus.module.css";
+function UserMenu({
+  email,
+  role,
+  collapsed
+}) {
+  const host = useAdminBrand();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const title = `${ADMIN_NAME} Admin`;
+  const initials = email.slice(0, 2).toUpperCase() || "PA";
+  const signOut = async () => {
+    setOpen(false);
+    await signOutAdmin();
+    router.replace("/admin/login");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: brand.wrap, "data-collapsed": collapsed, children: [
+    /* @__PURE__ */ jsx(RailTip, { label: title, on: collapsed && !open, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: brand.card,
+        onClick: () => setOpen((value) => !value),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-label": collapsed ? title : void 0,
+        children: [
+          host ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: brand.hostMark, children: host.mark }),
+            /* @__PURE__ */ jsx("span", { className: brand.hostLogo, children: host.logo }),
+            /* @__PURE__ */ jsx("span", { className: brand.name, children: "Admin" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(BoxMark, { glyph: "mark", height: 28, "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: brand.name, children: title })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16, className: brand.chevron, "aria-hidden": true })
+        ]
+      }
+    ) }),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: menus.menuScrim, onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { className: `${menus.pop} ${brand.menu}`, role: "menu", children: [
+        /* @__PURE__ */ jsxs("div", { className: brand.who, children: [
+          /* @__PURE__ */ jsx("span", { className: brand.avatar, "aria-hidden": true, children: initials }),
+          /* @__PURE__ */ jsxs("span", { className: brand.whoText, children: [
+            /* @__PURE__ */ jsx("span", { className: brand.email, children: email || "Administrator" }),
+            /* @__PURE__ */ jsx("span", { className: brand.role, children: role })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: menus.menuItem,
+            onClick: signOut,
+            children: [
+              /* @__PURE__ */ jsx(LogOut, { size: 16, "aria-hidden": true }),
+              "Sign out"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  UserMenu
+};
+//# sourceMappingURL=user-menu.js.map

package/dist/admin/_shell/user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_shell/user-menu.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { ChevronsUpDown, LogOut } from 'lucide-react';\nimport { BoxMark } from '@withpotter/ui-kit/box-mark';\nimport { ADMIN_NAME, useAdminBrand } from './admin-brand';\nimport { RailTip } from './nav-row';\nimport { signOutAdmin } from './sign-out';\nimport brand from './brand.module.css';\nimport menus from './menus.module.css';\n\n/**\n * The workspace card at the top of the sidebar: the Box's logo and \"Admin\"\n * (its mark alone in the rail), or the Box mark and \"Box Admin\".\n * It opens on who is signed in, and Sign out.\n */\nexport function UserMenu({\n  email,\n  role,\n  collapsed,\n}: {\n  email: string;\n  role: string;\n  collapsed: boolean;\n}) {\n  const host = useAdminBrand();\n  const router = useRouter();\n  const [open, setOpen] = useState(false);\n  const title = `${ADMIN_NAME} Admin`;\n  const initials = email.slice(0, 2).toUpperCase() || 'PA';\n\n  const signOut = async () => {\n    setOpen(false);\n    await signOutAdmin();\n    router.replace('/admin/login');\n  };\n\n  return (\n    <div className={brand.wrap} data-collapsed={collapsed}>\n      <RailTip label={title} on={collapsed && !open}>\n        <button\n          type=\"button\"\n          className={brand.card}\n          onClick={() => setOpen((value) => !value)}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          aria-label={collapsed ? title : undefined}\n        >\n          {host ? (\n            <>\n              <span className={brand.hostMark}>{host.mark}</span>\n              <span className={brand.hostLogo}>{host.logo}</span>\n              <span className={brand.name}>Admin</span>\n            </>\n          ) : (\n            <>\n              <BoxMark glyph=\"mark\" height={28} aria-hidden />\n              <span className={brand.name}>{title}</span>\n            </>\n          )}\n          <ChevronsUpDown size={16} className={brand.chevron} aria-hidden />\n        </button>\n      </RailTip>\n      {open && (\n        <>\n          <div className={menus.menuScrim} onClick={() => setOpen(false)} />\n          <div className={`${menus.pop} ${brand.menu}`} role=\"menu\">\n            <div className={brand.who}>\n              <span className={brand.avatar} aria-hidden>\n                {initials}\n              </span>\n              <span className={brand.whoText}>\n                <span className={brand.email}>{email || 'Administrator'}</span>\n                <span className={brand.role}>{role}</span>\n              </span>\n            </div>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              className={menus.menuItem}\n              onClick={signOut}\n            >\n              <LogOut size={16} aria-hidden />\n              Sign out\n            </button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAkDY,mBACE,KADF;AAhDZ,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,cAAc;AACvC,SAAS,eAAe;AACxB,SAAS,YAAY,qBAAqB;AAC1C,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,OAAO,WAAW;AAOX,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,OAAO,cAAc;AAC3B,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,GAAG,UAAU;AAC3B,QAAM,WAAW,MAAM,MAAM,GAAG,CAAC,EAAE,YAAY,KAAK;AAEpD,QAAM,UAAU,YAAY;AAC1B,YAAQ,KAAK;AACb,UAAM,aAAa;AACnB,WAAO,QAAQ,cAAc;AAAA,EAC/B;AAEA,SACE,qBAAC,SAAI,WAAW,MAAM,MAAM,kBAAgB,WAC1C;AAAA,wBAAC,WAAQ,OAAO,OAAO,IAAI,aAAa,CAAC,MACvC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,MAAM;AAAA,QACjB,SAAS,MAAM,QAAQ,CAAC,UAAU,CAAC,KAAK;AAAA,QACxC,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,cAAY,YAAY,QAAQ;AAAA,QAE/B;AAAA,iBACC,iCACE;AAAA,gCAAC,UAAK,WAAW,MAAM,UAAW,eAAK,MAAK;AAAA,YAC5C,oBAAC,UAAK,WAAW,MAAM,UAAW,eAAK,MAAK;AAAA,YAC5C,oBAAC,UAAK,WAAW,MAAM,MAAM,mBAAK;AAAA,aACpC,IAEA,iCACE;AAAA,gCAAC,WAAQ,OAAM,QAAO,QAAQ,IAAI,eAAW,MAAC;AAAA,YAC9C,oBAAC,UAAK,WAAW,MAAM,MAAO,iBAAM;AAAA,aACtC;AAAA,UAEF,oBAAC,kBAAe,MAAM,IAAI,WAAW,MAAM,SAAS,eAAW,MAAC;AAAA;AAAA;AAAA,IAClE,GACF;AAAA,IACC,QACC,iCACE;AAAA,0BAAC,SAAI,WAAW,MAAM,WAAW,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,MAChE,qBAAC,SAAI,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,IAAI,MAAK,QACjD;AAAA,6BAAC,SAAI,WAAW,MAAM,KACpB;AAAA,8BAAC,UAAK,WAAW,MAAM,QAAQ,eAAW,MACvC,oBACH;AAAA,UACA,qBAAC,UAAK,WAAW,MAAM,SACrB;AAAA,gCAAC,UAAK,WAAW,MAAM,OAAQ,mBAAS,iBAAgB;AAAA,YACxD,oBAAC,UAAK,WAAW,MAAM,MAAO,gBAAK;AAAA,aACrC;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAW,MAAM;AAAA,YACjB,SAAS;AAAA,YAET;AAAA,kCAAC,UAAO,MAAM,IAAI,eAAW,MAAC;AAAA,cAAE;AAAA;AAAA;AAAA,QAElC;AAAA,SACF;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}