@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/_ui/motion.css

@@ -0,0 +1,22 @@
+/* ---- Motion: grid content fades in once, briefly (reduced: none) ----
+   No stagger, no rise, no loops: one short fade on mount. */
+@keyframes adm-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+.adm-grid > * {
+  animation: adm-fade var(--adm-moderate) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .adm-shell:not([data-motion='full']) .adm-grid > * {
+    animation: none;
+  }
+}
+
+/* Settings → Motion: Reduce turns the fade off whatever the OS says. */
+.adm-shell[data-motion='reduce'] .adm-grid > * {
+  animation: none;
+}

package/dist/admin/_ui/page-header.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import { Info } from "lucide-react";
+import styles from "./page-header.module.css";
+import { useInWorkspaceTab } from "./workspace-tab";
+function PageInfo({ title, text }) {
+  return /* @__PURE__ */ jsx("span", { className: `adm-page-desc ${styles.info}`, children: /* @__PURE__ */ jsxs(Popover.Root, { children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.trigger,
+        "aria-label": `About ${title}`,
+        children: /* @__PURE__ */ jsx(Info, { size: 16, "aria-hidden": true })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        side: "bottom",
+        align: "start",
+        sideOffset: 6,
+        collisionPadding: 16,
+        className: styles.popover,
+        children: text
+      }
+    ) })
+  ] }) });
+}
+function PageHeader({
+  title,
+  description,
+  actions
+}) {
+  if (useInWorkspaceTab()) {
+    if (!description && !actions) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "adm-page-header adm-tab-lead", children: [
+      description && /* @__PURE__ */ jsx(PageInfo, { title, text: description }),
+      actions && /* @__PURE__ */ jsx("div", { className: "adm-page-actions", children: actions })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "adm-page-header", children: [
+    /* @__PURE__ */ jsxs("div", { className: "adm-page-lead", children: [
+      /* @__PURE__ */ jsx("h1", { className: "adm-page-title", children: title }),
+      description && /* @__PURE__ */ jsx(PageInfo, { title, text: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "adm-page-actions", children: actions })
+  ] });
+}
+export {
+  PageHeader
+};
+//# sourceMappingURL=page-header.js.map

package/dist/admin/_ui/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/page-header.tsx"],"sourcesContent":["'use client';\n\nimport * as Popover from '@radix-ui/react-popover';\nimport { Info } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { LucideIcon } from 'lucide-react';\nimport type { Tone } from '../_fx';\nimport styles from './page-header.module.css';\nimport { useInWorkspaceTab } from './workspace-tab';\n\n/**\n * The page's explanation: an info icon with the text in a popover, never a\n * line under the title. It keeps the `adm-page-desc` class as a global hook so\n * an app that draws its own info icon can hide this one with CSS.\n */\nfunction PageInfo({ title, text }: { title: string; text: string }) {\n  return (\n    <span className={`adm-page-desc ${styles.info}`}>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <button\n            type=\"button\"\n            className={styles.trigger}\n            aria-label={`About ${title}`}\n          >\n            <Info size={16} aria-hidden />\n          </button>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            side=\"bottom\"\n            align=\"start\"\n            sideOffset={6}\n            collisionPadding={16}\n            className={styles.popover}\n          >\n            {text}\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </span>\n  );\n}\n\n/**\n * Standard page header: title, an info icon for context, actions on the right.\n * No icon: the nav already says where you are. `icon`/`tone` are accepted\n * and ignored so existing callers compile.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n}: {\n  title: string;\n  description?: string;\n  actions?: ReactNode;\n  icon?: LucideIcon;\n  tone?: Tone;\n}) {\n  // Inside a workspace tab the tab is the title: keep the context and actions.\n  if (useInWorkspaceTab()) {\n    if (!description && !actions) return null;\n    return (\n      <div className=\"adm-page-header adm-tab-lead\">\n        {description && <PageInfo title={title} text={description} />}\n        {actions && <div className=\"adm-page-actions\">{actions}</div>}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"adm-page-header\">\n      <div className=\"adm-page-lead\">\n        <h1 className=\"adm-page-title\">{title}</h1>\n        {description && <PageInfo title={title} text={description} />}\n      </div>\n      {actions && <div className=\"adm-page-actions\">{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":";AAkBM,SAOM,KAPN;AAhBN,YAAY,aAAa;AACzB,SAAS,YAAY;AAIrB,OAAO,YAAY;AACnB,SAAS,yBAAyB;AAOlC,SAAS,SAAS,EAAE,OAAO,KAAK,GAAoC;AAClE,SACE,oBAAC,UAAK,WAAW,iBAAiB,OAAO,IAAI,IAC3C,+BAAC,QAAQ,MAAR,EACC;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,cAAY,SAAS,KAAK;AAAA,QAE1B,8BAAC,QAAK,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,IAC9B,GACF;AAAA,IACA,oBAAC,QAAQ,QAAR,EACC;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAClB,WAAW,OAAO;AAAA,QAEjB;AAAA;AAAA,IACH,GACF;AAAA,KACF,GACF;AAEJ;AAOO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAMG;AAED,MAAI,kBAAkB,GAAG;AACvB,QAAI,CAAC,eAAe,CAAC,QAAS,QAAO;AACrC,WACE,qBAAC,SAAI,WAAU,gCACZ;AAAA,qBAAe,oBAAC,YAAS,OAAc,MAAM,aAAa;AAAA,MAC1D,WAAW,oBAAC,SAAI,WAAU,oBAAoB,mBAAQ;AAAA,OACzD;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,mBACb;AAAA,yBAAC,SAAI,WAAU,iBACb;AAAA,0BAAC,QAAG,WAAU,kBAAkB,iBAAM;AAAA,MACrC,eAAe,oBAAC,YAAS,OAAc,MAAM,aAAa;AAAA,OAC7D;AAAA,IACC,WAAW,oBAAC,SAAI,WAAU,oBAAoB,mBAAQ;AAAA,KACzD;AAEJ;","names":[]}

package/dist/admin/_ui/page-header.module.css

@@ -0,0 +1,45 @@
+/* The page description as an info icon with a popover. */
+.info {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: background var(--adm-fast);
+}
+
+.trigger:hover,
+.trigger[data-state='open'] {
+  background: var(--adm-hover);
+  color: var(--text-primary);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.popover {
+  z-index: 70;
+  width: min(320px, calc(100vw - 32px));
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  box-shadow: var(--adm-shadow-pop);
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-secondary);
+}

package/dist/admin/_ui/page-tabs.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+import { TabNav } from "@withpotter/ui-kit/tab-nav";
+import { NESTED_TAB_PARAM, useInWorkspaceTab } from "./workspace-tab";
+function useTabParam(keys, name) {
+  const nested = useInWorkspaceTab();
+  const param = name ?? (nested ? NESTED_TAB_PARAM : "tab");
+  const router = useRouter();
+  const pathname = usePathname();
+  const search = useSearchParams();
+  const wanted = search.get(param);
+  const active = wanted && keys.includes(wanted) ? wanted : keys[0];
+  const setActive = useCallback(
+    (next) => {
+      const params = new URLSearchParams(search.toString());
+      if (next === keys[0]) params.delete(param);
+      else params.set(param, next);
+      const qs = params.toString();
+      router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+    },
+    [keys, param, pathname, router, search]
+  );
+  return [active, setActive];
+}
+function PageTabs({
+  tabs,
+  active,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "adm-page-tabs", children: /* @__PURE__ */ jsx(
+    TabNav,
+    {
+      tabs: tabs.map(({ icon: _icon, ...rest }) => rest),
+      activeTab: active,
+      onTabChange: (id) => onChange(id),
+      tone: "brand"
+    }
+  ) });
+}
+export {
+  PageTabs,
+  useTabParam
+};
+//# sourceMappingURL=page-tabs.js.map

package/dist/admin/_ui/page-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/page-tabs.tsx"],"sourcesContent":["'use client';\n\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation';\nimport { useCallback } from 'react';\nimport { TabNav, type TabItem } from '@withpotter/ui-kit/tab-nav';\nimport { NESTED_TAB_PARAM, useInWorkspaceTab } from './workspace-tab';\n\n/**\n * Sections of one page as tabs under its header, instead of a long scroll.\n * The active tab lives in `?tab=` so it can be linked, refreshed and shared;\n * an unknown or missing value falls back to the first tab.\n */\nexport function useTabParam<T extends string>(\n  keys: readonly T[],\n  name?: string,\n) {\n  // Tabs inside a workspace tab read `?view=`; the workspace owns `?tab=`.\n  const nested = useInWorkspaceTab();\n  const param = name ?? (nested ? NESTED_TAB_PARAM : 'tab');\n  const router = useRouter();\n  const pathname = usePathname();\n  const search = useSearchParams();\n  const wanted = search.get(param) as T | null;\n  const active = wanted && keys.includes(wanted) ? wanted : keys[0];\n\n  const setActive = useCallback(\n    (next: T) => {\n      const params = new URLSearchParams(search.toString());\n\n      if (next === keys[0]) params.delete(param);\n      else params.set(param, next);\n\n      const qs = params.toString();\n\n      router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });\n    },\n    [keys, param, pathname, router, search],\n  );\n\n  return [active, setActive] as const;\n}\n\n/**\n * The tab strip itself: the merchant app's TabNav, so both read alike. The\n * chosen tab carries the brand tint; the focus ring is keyboard-only.\n */\nexport function PageTabs<T extends string>({\n  tabs,\n  active,\n  onChange,\n}: {\n  tabs: ReadonlyArray<TabItem & { id: T }>;\n  active: T;\n  onChange: (id: T) => void;\n}) {\n  return (\n    <div className=\"adm-page-tabs\">\n      {/* Words only: tab icons were decoration (no icons in content). */}\n      <TabNav\n        tabs={tabs.map(({ icon: _icon, ...rest }) => rest)}\n        activeTab={active}\n        onTabChange={(id) => onChange(id as T)}\n        tone=\"brand\"\n      />\n    </div>\n  );\n}\n"],"mappings":";AA0DM;AAxDN,SAAS,aAAa,WAAW,uBAAuB;AACxD,SAAS,mBAAmB;AAC5B,SAAS,cAA4B;AACrC,SAAS,kBAAkB,yBAAyB;AAO7C,SAAS,YACd,MACA,MACA;AAEA,QAAM,SAAS,kBAAkB;AACjC,QAAM,QAAQ,SAAS,SAAS,mBAAmB;AACnD,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,gBAAgB;AAC/B,QAAM,SAAS,OAAO,IAAI,KAAK;AAC/B,QAAM,SAAS,UAAU,KAAK,SAAS,MAAM,IAAI,SAAS,KAAK,CAAC;AAEhE,QAAM,YAAY;AAAA,IAChB,CAAC,SAAY;AACX,YAAM,SAAS,IAAI,gBAAgB,OAAO,SAAS,CAAC;AAEpD,UAAI,SAAS,KAAK,CAAC,EAAG,QAAO,OAAO,KAAK;AAAA,UACpC,QAAO,IAAI,OAAO,IAAI;AAE3B,YAAM,KAAK,OAAO,SAAS;AAE3B,aAAO,QAAQ,KAAK,GAAG,QAAQ,IAAI,EAAE,KAAK,UAAU,EAAE,QAAQ,MAAM,CAAC;AAAA,IACvE;AAAA,IACA,CAAC,MAAM,OAAO,UAAU,QAAQ,MAAM;AAAA,EACxC;AAEA,SAAO,CAAC,QAAQ,SAAS;AAC3B;AAMO,SAAS,SAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,SAAI,WAAU,iBAEb;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,IAAI,CAAC,EAAE,MAAM,OAAO,GAAG,KAAK,MAAM,IAAI;AAAA,MACjD,WAAW;AAAA,MACX,aAAa,CAAC,OAAO,SAAS,EAAO;AAAA,MACrC,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/dist/admin/_ui/pagination.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination({
+  page,
+  totalPages,
+  total,
+  noun,
+  onPage
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginTop: 16,
+        fontSize: 13,
+        color: "var(--text-secondary)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { children: total != null && noun ? `${total} ${noun}` : "" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPage(Math.max(1, page - 1)),
+              disabled: page <= 1,
+              style: pageBtn(page <= 1),
+              children: "Prev"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { padding: "6px 4px" }, children: [
+            page,
+            " / ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPage(Math.min(totalPages, page + 1)),
+              disabled: page >= totalPages,
+              style: pageBtn(page >= totalPages),
+              children: "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function pageBtn(disabled) {
+  return {
+    padding: "6px 12px",
+    borderRadius: 8,
+    border: "1px solid var(--border-default)",
+    background: "var(--bg-base)",
+    color: "var(--text-primary)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    fontSize: 13
+  };
+}
+export {
+  Pagination
+};
+//# sourceMappingURL=pagination.js.map

package/dist/admin/_ui/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/pagination.tsx"],"sourcesContent":["/**\n * Prev / next pager with a total-count label on the left.\n */\nexport function Pagination({\n  page,\n  totalPages,\n  total,\n  noun,\n  onPage,\n}: {\n  page: number;\n  totalPages: number;\n  total?: number;\n  noun?: string;\n  onPage: (next: number) => void;\n}) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        marginTop: 16,\n        fontSize: 13,\n        color: 'var(--text-secondary)',\n      }}\n    >\n      <span>{total != null && noun ? `${total} ${noun}` : ''}</span>\n      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>\n        <button\n          type=\"button\"\n          onClick={() => onPage(Math.max(1, page - 1))}\n          disabled={page <= 1}\n          style={pageBtn(page <= 1)}\n        >\n          Prev\n        </button>\n        <span style={{ padding: '6px 4px' }}>\n          {page} / {totalPages}\n        </span>\n        <button\n          type=\"button\"\n          onClick={() => onPage(Math.min(totalPages, page + 1))}\n          disabled={page >= totalPages}\n          style={pageBtn(page >= totalPages)}\n        >\n          Next\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction pageBtn(disabled: boolean): React.CSSProperties {\n  return {\n    padding: '6px 12px',\n    borderRadius: 8,\n    border: '1px solid var(--border-default)',\n    background: 'var(--bg-base)',\n    color: 'var(--text-primary)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    fontSize: 13,\n  };\n}\n"],"mappings":"AA2BM,cAUE,YAVF;AAxBC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,4BAAC,UAAM,mBAAS,QAAQ,OAAO,GAAG,KAAK,IAAI,IAAI,KAAK,IAAG;AAAA,QACvD,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,GAAG,YAAY,SAAS,GAC1D;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,cAC3C,UAAU,QAAQ;AAAA,cAClB,OAAO,QAAQ,QAAQ,CAAC;AAAA,cACzB;AAAA;AAAA,UAED;AAAA,UACA,qBAAC,UAAK,OAAO,EAAE,SAAS,UAAU,GAC/B;AAAA;AAAA,YAAK;AAAA,YAAI;AAAA,aACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,OAAO,KAAK,IAAI,YAAY,OAAO,CAAC,CAAC;AAAA,cACpD,UAAU,QAAQ;AAAA,cAClB,OAAO,QAAQ,QAAQ,UAAU;AAAA,cAClC;AAAA;AAAA,UAED;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,QAAQ,UAAwC;AACvD,SAAO;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,WAAW,gBAAgB;AAAA,IACnC,SAAS,WAAW,MAAM;AAAA,IAC1B,UAAU;AAAA,EACZ;AACF;","names":[]}

package/dist/admin/_ui/panel.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./panel.module.css";
+function Panel({
+  title,
+  count,
+  caption,
+  action,
+  footer,
+  height,
+  flush,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `${styles.panel} ${className ?? ""}`,
+      style: { height: height ?? (flush ? "var(--adm-panel-h)" : "auto") },
+      "aria-label": title,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: styles.head, children: [
+          /* @__PURE__ */ jsxs("h2", { className: styles.title, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.titleText, children: title }),
+            count !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.count, children: count })
+          ] }),
+          caption && /* @__PURE__ */ jsx("span", { className: "adm-caption", children: caption }),
+          action && /* @__PURE__ */ jsx("div", { className: styles.action, children: action })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.body, "data-flush": flush, children }),
+        footer && /* @__PURE__ */ jsx("footer", { className: styles.footer, children: footer })
+      ]
+    }
+  );
+}
+export {
+  Panel
+};
+//# sourceMappingURL=panel.js.map

package/dist/admin/_ui/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/panel.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './panel.module.css';\n\n/**\n * A card that holds a list without growing the page. Title, a muted count\n * and one action sit in a fixed header (no heading icon: `icon` is accepted\n * for older callers and not drawn); the body scrolls inside a fixed height, with\n * a fade that says there is more. Sibling panels in a grid row share the\n * same height, so the row reads as one band.\n */\nexport function Panel({\n  title,\n  count,\n  caption,\n  action,\n  footer,\n  height,\n  flush,\n  children,\n  className,\n}: {\n  title: string;\n  count?: number;\n  icon?: ReactNode;\n  /** The window or unit, stated once: \"Last 30 days · USD\". */\n  caption?: ReactNode;\n  action?: ReactNode;\n  footer?: ReactNode;\n  /** CSS height; defaults to fixed for flush lists/tables, auto otherwise. */\n  height?: string;\n  /** Let rows run to the card edge (tables, divided lists). */\n  flush?: boolean;\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <section\n      className={`${styles.panel} ${className ?? ''}`}\n      // Lists and tables (flush) scroll inside a fixed height; any other\n      // content sizes to itself, so nothing clips or jumps.\n      style={{ height: height ?? (flush ? 'var(--adm-panel-h)' : 'auto') }}\n      aria-label={title}\n    >\n      <header className={styles.head}>\n        <h2 className={styles.title}>\n          <span className={styles.titleText}>{title}</span>\n          {count !== undefined && <span className={styles.count}>{count}</span>}\n        </h2>\n        {caption && <span className=\"adm-caption\">{caption}</span>}\n        {action && <div className={styles.action}>{action}</div>}\n      </header>\n      <div className={styles.body} data-flush={flush}>\n        {children}\n      </div>\n      {footer && <footer className={styles.footer}>{footer}</footer>}\n    </section>\n  );\n}\n"],"mappings":"AA4CQ,SACE,KADF;AA3CR,OAAO,YAAY;AASZ,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAcG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,OAAO,KAAK,IAAI,aAAa,EAAE;AAAA,MAG7C,OAAO,EAAE,QAAQ,WAAW,QAAQ,uBAAuB,QAAQ;AAAA,MACnE,cAAY;AAAA,MAEZ;AAAA,6BAAC,YAAO,WAAW,OAAO,MACxB;AAAA,+BAAC,QAAG,WAAW,OAAO,OACpB;AAAA,gCAAC,UAAK,WAAW,OAAO,WAAY,iBAAM;AAAA,YACzC,UAAU,UAAa,oBAAC,UAAK,WAAW,OAAO,OAAQ,iBAAM;AAAA,aAChE;AAAA,UACC,WAAW,oBAAC,UAAK,WAAU,eAAe,mBAAQ;AAAA,UAClD,UAAU,oBAAC,SAAI,WAAW,OAAO,QAAS,kBAAO;AAAA,WACpD;AAAA,QACA,oBAAC,SAAI,WAAW,OAAO,MAAM,cAAY,OACtC,UACH;AAAA,QACC,UAAU,oBAAC,YAAO,WAAW,OAAO,QAAS,kBAAO;AAAA;AAAA;AAAA,EACvD;AAEJ;","names":[]}

package/dist/admin/_ui/panel.module.css

@@ -0,0 +1,87 @@
+/* Fixed-height card with an inner scroll: long lists, short pages. */
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  box-shadow: var(--adm-shadow-1);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+  padding: 16px 20px 12px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.titleText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Plain muted number beside the title, not a pill. */
+.count {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.action {
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.action a {
+  color: var(--accent-ink, var(--accent-primary));
+  text-decoration: none;
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  padding: 0 20px 24px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  /* Fade the bottom edge so a long list reads as "scroll for more". The
+     body's bottom padding is as tall as the fade, so once scrolled to the
+     end the last row sits fully above it instead of being cut mid-item. */
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
+  scrollbar-width: thin;
+}
+
+.body[data-flush='true'] {
+  padding: 0 0 24px;
+}
+
+.body thead th {
+  background: var(--bg-base);
+}
+
+.footer {
+  padding: 10px 20px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 12px;
+  color: var(--text-tertiary);
+}

package/dist/admin/_ui/period-selector.js

@@ -0,0 +1,81 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DateField } from "@withpotter/ui-kit";
+import { RANGE_OPTIONS } from "./period";
+import styles from "./period.module.css";
+function PeriodSelector({
+  value,
+  onChange,
+  customStart,
+  customEnd,
+  onCustomChange
+}) {
+  const [open, setOpen] = useState(false);
+  const today = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const custom = value === "custom";
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrap, children: [
+    /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Time period", className: "adm-segments", children: [
+      RANGE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "adm-segment",
+          "aria-pressed": opt.key === value,
+          onClick: () => {
+            setOpen(false);
+            onChange(opt.key);
+          },
+          children: opt.label
+        },
+        opt.key
+      )),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "adm-segment",
+          "aria-pressed": custom,
+          "aria-expanded": open,
+          onClick: () => {
+            onChange("custom");
+            setOpen((o) => !o || !custom);
+          },
+          children: "Custom"
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: styles.scrim, onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.popover, role: "dialog", "aria-label": "Dates", children: [
+        /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
+          /* @__PURE__ */ jsx("span", { children: "From" }),
+          /* @__PURE__ */ jsx(
+            DateField,
+            {
+              value: customStart,
+              max: customEnd || today,
+              onChange: (v) => onCustomChange("start", v)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
+          /* @__PURE__ */ jsx("span", { children: "To" }),
+          /* @__PURE__ */ jsx(
+            DateField,
+            {
+              value: customEnd,
+              min: customStart,
+              max: today,
+              onChange: (v) => onCustomChange("end", v)
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  PeriodSelector
+};
+//# sourceMappingURL=period-selector.js.map

package/dist/admin/_ui/period-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/period-selector.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { DateField } from '@withpotter/ui-kit';\nimport { RANGE_OPTIONS, type RangeKey } from './period';\nimport styles from './period.module.css';\n\n/**\n * One segmented control whose size never depends on the choice. Custom is a\n * segment like the others; its dates live in a popover under it instead of\n * a second row that shoves the page down when picked.\n */\nexport function PeriodSelector({\n  value,\n  onChange,\n  customStart,\n  customEnd,\n  onCustomChange,\n}: {\n  value: RangeKey;\n  onChange: (k: RangeKey) => void;\n  customStart: string;\n  customEnd: string;\n  onCustomChange: (field: 'start' | 'end', val: string) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const today = new Date().toISOString().slice(0, 10);\n  const custom = value === 'custom';\n\n  return (\n    <div className={styles.wrap}>\n      <div role=\"group\" aria-label=\"Time period\" className=\"adm-segments\">\n        {RANGE_OPTIONS.map((opt) => (\n          <button\n            key={opt.key}\n            type=\"button\"\n            className=\"adm-segment\"\n            aria-pressed={opt.key === value}\n            onClick={() => {\n              setOpen(false);\n              onChange(opt.key);\n            }}\n          >\n            {opt.label}\n          </button>\n        ))}\n        <button\n          type=\"button\"\n          className=\"adm-segment\"\n          aria-pressed={custom}\n          aria-expanded={open}\n          onClick={() => {\n            onChange('custom');\n            setOpen((o) => !o || !custom);\n          }}\n        >\n          Custom\n        </button>\n      </div>\n      {open && (\n        <>\n          <div className={styles.scrim} onClick={() => setOpen(false)} />\n          <div className={styles.popover} role=\"dialog\" aria-label=\"Dates\">\n            <label className={styles.field}>\n              <span>From</span>\n              <DateField\n                value={customStart}\n                max={customEnd || today}\n                onChange={(v) => onCustomChange('start', v)}\n              />\n            </label>\n            <label className={styles.field}>\n              <span>To</span>\n              <DateField\n                value={customEnd}\n                min={customStart}\n                max={today}\n                onChange={(v) => onCustomChange('end', v)}\n              />\n            </label>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA+BM,SA6BE,UA3BE,KAFJ;AA7BN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,qBAAoC;AAC7C,OAAO,YAAY;AAOZ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,SAAQ,oBAAI,KAAK,GAAE,YAAY,EAAE,MAAM,GAAG,EAAE;AAClD,QAAM,SAAS,UAAU;AAEzB,SACE,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA,yBAAC,SAAI,MAAK,SAAQ,cAAW,eAAc,WAAU,gBAClD;AAAA,oBAAc,IAAI,CAAC,QAClB;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,gBAAc,IAAI,QAAQ;AAAA,UAC1B,SAAS,MAAM;AACb,oBAAQ,KAAK;AACb,qBAAS,IAAI,GAAG;AAAA,UAClB;AAAA,UAEC,cAAI;AAAA;AAAA,QATA,IAAI;AAAA,MAUX,CACD;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,gBAAc;AAAA,UACd,iBAAe;AAAA,UACf,SAAS,MAAM;AACb,qBAAS,QAAQ;AACjB,oBAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;AAAA,UAC9B;AAAA,UACD;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IACC,QACC,iCACE;AAAA,0BAAC,SAAI,WAAW,OAAO,OAAO,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC7D,qBAAC,SAAI,WAAW,OAAO,SAAS,MAAK,UAAS,cAAW,SACvD;AAAA,6BAAC,WAAM,WAAW,OAAO,OACvB;AAAA,8BAAC,UAAK,kBAAI;AAAA,UACV;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,KAAK,aAAa;AAAA,cAClB,UAAU,CAAC,MAAM,eAAe,SAAS,CAAC;AAAA;AAAA,UAC5C;AAAA,WACF;AAAA,QACA,qBAAC,WAAM,WAAW,OAAO,OACvB;AAAA,8BAAC,UAAK,gBAAE;AAAA,UACR;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,KAAK;AAAA,cACL,KAAK;AAAA,cACL,UAAU,CAAC,MAAM,eAAe,OAAO,CAAC;AAAA;AAAA,UAC1C;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/admin/_ui/period.js

@@ -0,0 +1,52 @@
+"use client";
+const RANGE_OPTIONS = [
+  { key: "7d", label: "7 days", days: 7 },
+  { key: "30d", label: "30 days", days: 30 },
+  { key: "90d", label: "90 days", days: 90 },
+  { key: "12m", label: "12 months", days: 365 },
+  { key: "all", label: "All time", days: null }
+];
+const WINDOW_STEP = 5 * 60 * 1e3;
+function rangeFromKey(key) {
+  const opt = RANGE_OPTIONS.find((o) => o.key === key) ?? RANGE_OPTIONS[1];
+  const end = new Date(Math.ceil(Date.now() / WINDOW_STEP) * WINDOW_STEP);
+  const start = opt.days == null ? /* @__PURE__ */ new Date(0) : new Date(end.getTime() - opt.days * 24 * 60 * 60 * 1e3);
+  return {
+    startDate: start.toISOString(),
+    endDate: end.toISOString(),
+    label: opt.label
+  };
+}
+const shortDate = new Intl.DateTimeFormat("en", {
+  month: "short",
+  day: "numeric",
+  timeZone: "UTC"
+});
+function formatSpan(start, end) {
+  if (!start || !end) return "Pick dates";
+  const s = /* @__PURE__ */ new Date(`${start}T00:00:00.000Z`);
+  const e = /* @__PURE__ */ new Date(`${end}T00:00:00.000Z`);
+  return start === end ? shortDate.format(s) : `${shortDate.format(s)} \u2013 ${shortDate.format(e)}`;
+}
+function customRange(start, end) {
+  const s = start ? /* @__PURE__ */ new Date(`${start}T00:00:00.000Z`) : /* @__PURE__ */ new Date(0);
+  const e = end ? /* @__PURE__ */ new Date(`${end}T23:59:59.999Z`) : /* @__PURE__ */ new Date();
+  return {
+    startDate: s.toISOString(),
+    endDate: e.toISOString(),
+    label: "Custom",
+    detail: formatSpan(start, end)
+  };
+}
+function periodPhrase(range) {
+  if (range.detail) return range.detail;
+  return range.label === "All time" ? "all time" : `last ${range.label.toLowerCase()}`;
+}
+export {
+  RANGE_OPTIONS,
+  customRange,
+  formatSpan,
+  periodPhrase,
+  rangeFromKey
+};
+//# sourceMappingURL=period.js.map

package/dist/admin/_ui/period.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/period.tsx"],"sourcesContent":["'use client';\n\nexport type RangeKey = '7d' | '30d' | '90d' | '12m' | 'all' | 'custom';\n\nexport const RANGE_OPTIONS: Array<{\n  key: RangeKey;\n  label: string;\n  days: number | null;\n}> = [\n  { key: '7d', label: '7 days', days: 7 },\n  { key: '30d', label: '30 days', days: 30 },\n  { key: '90d', label: '90 days', days: 90 },\n  { key: '12m', label: '12 months', days: 365 },\n  { key: 'all', label: 'All time', days: null },\n];\n\nexport interface DateRange {\n  startDate: string;\n  endDate: string;\n  label: string;\n  detail?: string;\n}\n\nconst WINDOW_STEP = 5 * 60 * 1000;\n\nexport function rangeFromKey(key: RangeKey): DateRange {\n  const opt = RANGE_OPTIONS.find((o) => o.key === key) ?? RANGE_OPTIONS[1];\n  // Ends on the next 5-minute mark, so two screens opened moments apart send\n  // the same window and share one cached answer (finder → money page).\n  const end = new Date(Math.ceil(Date.now() / WINDOW_STEP) * WINDOW_STEP);\n  const start =\n    opt.days == null\n      ? new Date(0)\n      : new Date(end.getTime() - opt.days * 24 * 60 * 60 * 1000);\n  return {\n    startDate: start.toISOString(),\n    endDate: end.toISOString(),\n    label: opt.label,\n  };\n}\n\nconst shortDate = new Intl.DateTimeFormat('en', {\n  month: 'short',\n  day: 'numeric',\n  timeZone: 'UTC',\n});\n\n/** \"Sep 30 – Oct 1\": the window, readable, short enough for a chip. */\nexport function formatSpan(start: string, end: string) {\n  if (!start || !end) return 'Pick dates';\n\n  const s = new Date(`${start}T00:00:00.000Z`);\n  const e = new Date(`${end}T00:00:00.000Z`);\n\n  return start === end\n    ? shortDate.format(s)\n    : `${shortDate.format(s)} – ${shortDate.format(e)}`;\n}\n\nexport function customRange(start: string, end: string): DateRange {\n  const s = start ? new Date(`${start}T00:00:00.000Z`) : new Date(0);\n  const e = end ? new Date(`${end}T23:59:59.999Z`) : new Date();\n  return {\n    startDate: s.toISOString(),\n    endDate: e.toISOString(),\n    label: 'Custom',\n    detail: formatSpan(start, end),\n  };\n}\n\n/**\n * The window in words, for a caption stated ONCE per section rather than in\n * every card title: \"last 30 days\", \"all time\", \"Sep 30 – Oct 1\".\n */\nexport function periodPhrase(range: DateRange) {\n  if (range.detail) return range.detail;\n\n  return range.label === 'All time'\n    ? 'all time'\n    : `last ${range.label.toLowerCase()}`;\n}\n"],"mappings":";AAIO,MAAM,gBAIR;AAAA,EACH,EAAE,KAAK,MAAM,OAAO,UAAU,MAAM,EAAE;AAAA,EACtC,EAAE,KAAK,OAAO,OAAO,WAAW,MAAM,GAAG;AAAA,EACzC,EAAE,KAAK,OAAO,OAAO,WAAW,MAAM,GAAG;AAAA,EACzC,EAAE,KAAK,OAAO,OAAO,aAAa,MAAM,IAAI;AAAA,EAC5C,EAAE,KAAK,OAAO,OAAO,YAAY,MAAM,KAAK;AAC9C;AASA,MAAM,cAAc,IAAI,KAAK;AAEtB,SAAS,aAAa,KAA0B;AACrD,QAAM,MAAM,cAAc,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,cAAc,CAAC;AAGvE,QAAM,MAAM,IAAI,KAAK,KAAK,KAAK,KAAK,IAAI,IAAI,WAAW,IAAI,WAAW;AACtE,QAAM,QACJ,IAAI,QAAQ,OACR,oBAAI,KAAK,CAAC,IACV,IAAI,KAAK,IAAI,QAAQ,IAAI,IAAI,OAAO,KAAK,KAAK,KAAK,GAAI;AAC7D,SAAO;AAAA,IACL,WAAW,MAAM,YAAY;AAAA,IAC7B,SAAS,IAAI,YAAY;AAAA,IACzB,OAAO,IAAI;AAAA,EACb;AACF;AAEA,MAAM,YAAY,IAAI,KAAK,eAAe,MAAM;AAAA,EAC9C,OAAO;AAAA,EACP,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAGM,SAAS,WAAW,OAAe,KAAa;AACrD,MAAI,CAAC,SAAS,CAAC,IAAK,QAAO;AAE3B,QAAM,IAAI,oBAAI,KAAK,GAAG,KAAK,gBAAgB;AAC3C,QAAM,IAAI,oBAAI,KAAK,GAAG,GAAG,gBAAgB;AAEzC,SAAO,UAAU,MACb,UAAU,OAAO,CAAC,IAClB,GAAG,UAAU,OAAO,CAAC,CAAC,WAAM,UAAU,OAAO,CAAC,CAAC;AACrD;AAEO,SAAS,YAAY,OAAe,KAAwB;AACjE,QAAM,IAAI,QAAQ,oBAAI,KAAK,GAAG,KAAK,gBAAgB,IAAI,oBAAI,KAAK,CAAC;AACjE,QAAM,IAAI,MAAM,oBAAI,KAAK,GAAG,GAAG,gBAAgB,IAAI,oBAAI,KAAK;AAC5D,SAAO;AAAA,IACL,WAAW,EAAE,YAAY;AAAA,IACzB,SAAS,EAAE,YAAY;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ,WAAW,OAAO,GAAG;AAAA,EAC/B;AACF;AAMO,SAAS,aAAa,OAAkB;AAC7C,MAAI,MAAM,OAAQ,QAAO,MAAM;AAE/B,SAAO,MAAM,UAAU,aACnB,aACA,QAAQ,MAAM,MAAM,YAAY,CAAC;AACvC;","names":[]}

package/dist/admin/_ui/period.module.css

@@ -0,0 +1,43 @@
+/* Period control: fixed footprint, custom dates in a popover. The strip
+   itself is the console's segmented look (.adm-segments in tint.css). */
+
+.wrap {
+  position: relative;
+  max-width: 100%;
+}
+
+.scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 50;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  width: 320px;
+  padding: 14px;
+  border-radius: var(--adm-card-radius);
+  background: var(--card-bg);
+  box-shadow: var(--adm-shadow-pop);
+  animation: pop var(--adm-moderate-spring) both;
+}
+
+@keyframes pop {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.field {
+  display: grid;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}