@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/_ui/preferences.css

@@ -0,0 +1,121 @@
+/* ============================================================
+   Preferences (Settings). Each rule reads an attribute or variable
+   that useApplyPreferences sets on .adm-shell. Nothing else in the
+   console needs to know settings exist.
+   ============================================================ */
+
+/* ---- Density: Compact tightens cards, gaps and table rows ---- */
+.adm-shell[data-density='compact'] {
+  --adm-gap: 12px;
+  --adm-section: 20px;
+}
+.adm-shell[data-density='compact'] .adm-panel {
+  padding: 16px;
+}
+.adm-shell[data-density='compact'] .adm-stat {
+  padding: 12px 16px;
+}
+.adm-shell[data-density='compact'] .adm-stat-head {
+  margin-bottom: 8px;
+}
+.adm-shell[data-density='compact'] .adm-page-header {
+  margin-bottom: 20px;
+}
+.adm-shell[data-density='compact'] .adm-main td,
+.adm-shell[data-density='compact'] .adm-main th {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+/* ---- Motion: Reduce means nothing moves; opacity alone may change ---- */
+.adm-shell[data-motion='reduce'] {
+  --adm-fast-spring: 0s linear;
+  --adm-moderate-spring: 0s linear;
+  --adm-slow-spring: 0s linear;
+}
+.adm-shell[data-motion='reduce'] *,
+.adm-shell[data-motion='reduce'] *::before,
+.adm-shell[data-motion='reduce'] *::after {
+  animation: none !important;
+  scroll-behavior: auto !important;
+  transition-property:
+    opacity, color, background-color, border-color, box-shadow, outline-color !important;
+}
+
+/* ---- Text size: zoom keeps layout reflowing (it changes layout size) ---- */
+.adm-shell .adm-main {
+  zoom: var(--adm-text-scale, 1);
+}
+
+/* ---- Contrast: High darkens secondary text and strengthens edges ---- */
+.adm-shell[data-contrast='high'] {
+  --text-secondary: color-mix(in srgb, var(--text-primary) 90%, transparent);
+  --text-tertiary: color-mix(in srgb, var(--text-primary) 84%, transparent);
+  --text-muted: color-mix(in srgb, var(--text-primary) 78%, transparent);
+  --border-subtle: color-mix(in srgb, var(--text-primary) 40%, transparent);
+  --border-default: color-mix(in srgb, var(--text-primary) 52%, transparent);
+  --border-strong: color-mix(in srgb, var(--text-primary) 64%, transparent);
+  --adm-line: color-mix(in srgb, var(--text-primary) 52%, transparent);
+  --adm-hover: color-mix(in srgb, var(--text-primary) 8%, transparent);
+  /* No tints under text. */
+  --adm-ok-bg: transparent;
+  --adm-wait-bg: transparent;
+}
+
+/* ---- Focus rings: Always shows them after a click too ---- */
+.adm-shell[data-focus='always'] :focus:not([tabindex='-1']) {
+  outline: 2px solid var(--brand-500);
+  outline-offset: 2px;
+}
+
+/* ---- Underline links: every link in the page, not just on hover ---- */
+.adm-shell[data-underline='on'] .adm-main a:not([role='tab'], .adm-stat-link) {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* ---- Status shapes: the dot becomes a glyph, so colour is never alone ---- */
+.adm-shell[data-status-shapes='on'] .adm-status-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 8px;
+  height: auto;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  animation: none;
+  color: var(--tone);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 12px;
+}
+.adm-shell[data-status-shapes='on'] .adm-status-dot::before {
+  content: '–';
+}
+.adm-shell[data-status-shapes='on']
+  [data-tone='success']
+  > .adm-status-dot::before,
+.adm-shell[data-status-shapes='on']
+  [data-tone='complete']
+  > .adm-status-dot::before {
+  content: '✓';
+}
+.adm-shell[data-status-shapes='on']
+  [data-tone='processing']
+  > .adm-status-dot::before {
+  content: '●';
+}
+.adm-shell[data-status-shapes='on']
+  [data-tone='pending']
+  > .adm-status-dot::before,
+.adm-shell[data-status-shapes='on']
+  [data-tone='draft']
+  > .adm-status-dot::before {
+  content: '○';
+}
+.adm-shell[data-status-shapes='on']
+  [data-tone='failed']
+  > .adm-status-dot::before {
+  content: '✕';
+}

package/dist/admin/_ui/prefs.js

@@ -0,0 +1,62 @@
+"use client";
+import { useCallback, useState } from "react";
+const RANGE_KEY = "adm-date-range";
+const CUSTOM_START_KEY = "adm-date-custom-start";
+const CUSTOM_END_KEY = "adm-date-custom-end";
+function readLS(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  try {
+    return window.localStorage.getItem(key) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+function writeLS(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function usePersistedDateRange(defaultKey = "30d") {
+  const [rangeKey, setRangeKeyState] = useState(
+    () => readLS(RANGE_KEY, defaultKey) || defaultKey
+  );
+  const [customStart, setCustomStartState] = useState(
+    () => readLS(CUSTOM_START_KEY, "")
+  );
+  const [customEnd, setCustomEndState] = useState(
+    () => readLS(CUSTOM_END_KEY, "")
+  );
+  const setRangeKey = useCallback((key) => {
+    setRangeKeyState(key);
+    writeLS(RANGE_KEY, key);
+  }, []);
+  const setCustomStart = useCallback((val) => {
+    setCustomStartState(val);
+    writeLS(CUSTOM_START_KEY, val);
+  }, []);
+  const setCustomEnd = useCallback((val) => {
+    setCustomEndState(val);
+    writeLS(CUSTOM_END_KEY, val);
+  }, []);
+  const onCustomChange = useCallback(
+    (field, val) => field === "start" ? setCustomStart(val) : setCustomEnd(val),
+    [setCustomStart, setCustomEnd]
+  );
+  return {
+    rangeKey,
+    setRangeKey,
+    customStart,
+    setCustomStart,
+    customEnd,
+    setCustomEnd,
+    onCustomChange,
+    /** False for "all time": there is no earlier period to compare with. */
+    compare: rangeKey !== "all"
+  };
+}
+export {
+  usePersistedDateRange
+};
+//# sourceMappingURL=prefs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/prefs.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport type { RangeKey } from './period';\n\n// Cross-page persistence for the admin analytics toolbar. Selections are kept\n// in localStorage so navigating between admin pages (each of which mounts its\n// own toolbar) doesn't reset the period or display currency every time.\n\nconst RANGE_KEY = 'adm-date-range';\nconst CUSTOM_START_KEY = 'adm-date-custom-start';\nconst CUSTOM_END_KEY = 'adm-date-custom-end';\n\nfunction readLS(key: string, fallback: string): string {\n  if (typeof window === 'undefined') return fallback;\n  try {\n    return window.localStorage.getItem(key) ?? fallback;\n  } catch {\n    return fallback;\n  }\n}\n\nfunction writeLS(key: string, value: string): void {\n  if (typeof window === 'undefined') return;\n  try {\n    window.localStorage.setItem(key, value);\n  } catch {\n    /* storage unavailable (private mode / quota) — non-fatal */\n  }\n}\n\n/**\n * Date-range selection (period key + custom start/end) persisted across admin\n * pages. Drop-in replacement for the per-page\n * `useState<RangeKey>('30d') + customStart/customEnd` triple.\n */\nexport function usePersistedDateRange(defaultKey: RangeKey = '30d') {\n  const [rangeKey, setRangeKeyState] = useState<RangeKey>(\n    () => (readLS(RANGE_KEY, defaultKey) as RangeKey) || defaultKey,\n  );\n  const [customStart, setCustomStartState] = useState(() =>\n    readLS(CUSTOM_START_KEY, ''),\n  );\n  const [customEnd, setCustomEndState] = useState(() =>\n    readLS(CUSTOM_END_KEY, ''),\n  );\n\n  const setRangeKey = useCallback((key: RangeKey) => {\n    setRangeKeyState(key);\n    writeLS(RANGE_KEY, key);\n  }, []);\n  const setCustomStart = useCallback((val: string) => {\n    setCustomStartState(val);\n    writeLS(CUSTOM_START_KEY, val);\n  }, []);\n  const setCustomEnd = useCallback((val: string) => {\n    setCustomEndState(val);\n    writeLS(CUSTOM_END_KEY, val);\n  }, []);\n  const onCustomChange = useCallback(\n    (field: 'start' | 'end', val: string) =>\n      field === 'start' ? setCustomStart(val) : setCustomEnd(val),\n    [setCustomStart, setCustomEnd],\n  );\n\n  return {\n    rangeKey,\n    setRangeKey,\n    customStart,\n    setCustomStart,\n    customEnd,\n    setCustomEnd,\n    onCustomChange,\n    /** False for \"all time\": there is no earlier period to compare with. */\n    compare: rangeKey !== 'all',\n  };\n}\n"],"mappings":";AAEA,SAAS,aAAa,gBAAgB;AAOtC,MAAM,YAAY;AAClB,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AAEvB,SAAS,OAAO,KAAa,UAA0B;AACrD,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,MAAI;AACF,WAAO,OAAO,aAAa,QAAQ,GAAG,KAAK;AAAA,EAC7C,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,QAAQ,KAAa,OAAqB;AACjD,MAAI,OAAO,WAAW,YAAa;AACnC,MAAI;AACF,WAAO,aAAa,QAAQ,KAAK,KAAK;AAAA,EACxC,QAAQ;AAAA,EAER;AACF;AAOO,SAAS,sBAAsB,aAAuB,OAAO;AAClE,QAAM,CAAC,UAAU,gBAAgB,IAAI;AAAA,IACnC,MAAO,OAAO,WAAW,UAAU,KAAkB;AAAA,EACvD;AACA,QAAM,CAAC,aAAa,mBAAmB,IAAI;AAAA,IAAS,MAClD,OAAO,kBAAkB,EAAE;AAAA,EAC7B;AACA,QAAM,CAAC,WAAW,iBAAiB,IAAI;AAAA,IAAS,MAC9C,OAAO,gBAAgB,EAAE;AAAA,EAC3B;AAEA,QAAM,cAAc,YAAY,CAAC,QAAkB;AACjD,qBAAiB,GAAG;AACpB,YAAQ,WAAW,GAAG;AAAA,EACxB,GAAG,CAAC,CAAC;AACL,QAAM,iBAAiB,YAAY,CAAC,QAAgB;AAClD,wBAAoB,GAAG;AACvB,YAAQ,kBAAkB,GAAG;AAAA,EAC/B,GAAG,CAAC,CAAC;AACL,QAAM,eAAe,YAAY,CAAC,QAAgB;AAChD,sBAAkB,GAAG;AACrB,YAAQ,gBAAgB,GAAG;AAAA,EAC7B,GAAG,CAAC,CAAC;AACL,QAAM,iBAAiB;AAAA,IACrB,CAAC,OAAwB,QACvB,UAAU,UAAU,eAAe,GAAG,IAAI,aAAa,GAAG;AAAA,IAC5D,CAAC,gBAAgB,YAAY;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,SAAS,aAAa;AAAA,EACxB;AACF;","names":[]}

package/dist/admin/_ui/skeleton.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+function Skeleton({
+  width = "100%",
+  height = 14,
+  radius = 6,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      style: {
+        display: "inline-block",
+        width,
+        height,
+        borderRadius: radius,
+        background: "var(--bg-subtle)",
+        ...style
+      }
+    }
+  );
+}
+export {
+  Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/skeleton.tsx"],"sourcesContent":["/**\n * Flat skeleton block (no shimmer loop). Use for loading states instead of \"Loading…\" text.\n */\nexport function Skeleton({\n  width = '100%',\n  height = 14,\n  radius = 6,\n  style,\n}: {\n  width?: number | string;\n  height?: number | string;\n  radius?: number;\n  style?: React.CSSProperties;\n}) {\n  return (\n    <span\n      aria-hidden\n      style={{\n        display: 'inline-block',\n        width,\n        height,\n        borderRadius: radius,\n        background: 'var(--bg-subtle)',\n        ...style,\n      }}\n    />\n  );\n}\n"],"mappings":"AAeI;AAZG,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AACF,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,GAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/_ui/sparkline.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Sparkline({
+  values,
+  width = 88,
+  height = 28,
+  color = "var(--accent-primary)",
+  strokeWidth = 1.5
+}) {
+  if (!values || values.length === 0) return null;
+  const max = Math.max(...values, 1);
+  const min = Math.min(...values, 0);
+  const range = max - min || 1;
+  const stepX = values.length > 1 ? width / (values.length - 1) : 0;
+  const pad = 2;
+  const usableH = height - pad * 2;
+  const pts = values.map((v, i) => {
+    const x = values.length > 1 ? i * stepX : width / 2;
+    const y = pad + (usableH - (v - min) / range * usableH);
+    return [x, y];
+  });
+  const line = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
+  const last = pts[pts.length - 1];
+  const first = pts[0];
+  const area = `${line} L${last[0].toFixed(1)},${height} L${first[0].toFixed(
+    1
+  )},${height} Z`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      "aria-hidden": "true",
+      style: { display: "block", overflow: "visible" },
+      children: [
+        /* @__PURE__ */ jsx("path", { d: area, fill: color, fillOpacity: 0.08 }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: line,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        last && /* @__PURE__ */ jsx("circle", { cx: last[0], cy: last[1], r: 2, fill: color })
+      ]
+    }
+  );
+}
+export {
+  Sparkline
+};
+//# sourceMappingURL=sparkline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/sparkline.tsx"],"sourcesContent":["/**\n * Compact inline trend sparkline: a flat line over a flat 8% area tint. No axes or labels —\n * meant to sit inside a KPI card as an at-a-glance shape of the series.\n */\nexport function Sparkline({\n  values,\n  width = 88,\n  height = 28,\n  color = 'var(--accent-primary)',\n  strokeWidth = 1.5,\n}: {\n  values: number[];\n  width?: number;\n  height?: number;\n  color?: string;\n  strokeWidth?: number;\n}) {\n  if (!values || values.length === 0) return null;\n\n  const max = Math.max(...values, 1);\n  const min = Math.min(...values, 0);\n  const range = max - min || 1;\n  const stepX = values.length > 1 ? width / (values.length - 1) : 0;\n  const pad = 2;\n  const usableH = height - pad * 2;\n\n  const pts = values.map((v, i) => {\n    const x = values.length > 1 ? i * stepX : width / 2;\n    const y = pad + (usableH - ((v - min) / range) * usableH);\n    return [x, y] as const;\n  });\n\n  const line = pts\n    .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)\n    .join(' ');\n  const last = pts[pts.length - 1];\n  const first = pts[0];\n  const area = `${line} L${last[0].toFixed(1)},${height} L${first[0].toFixed(\n    1,\n  )},${height} Z`;\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      aria-hidden=\"true\"\n      style={{ display: 'block', overflow: 'visible' }}\n    >\n      <path d={area} fill={color} fillOpacity={0.08} />\n      <path\n        d={line}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n      />\n      {last && <circle cx={last[0]} cy={last[1]} r={2} fill={color} />}\n    </svg>\n  );\n}\n"],"mappings":"AA0CI,SAOE,KAPF;AAtCG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAChB,GAMG;AACD,MAAI,CAAC,UAAU,OAAO,WAAW,EAAG,QAAO;AAE3C,QAAM,MAAM,KAAK,IAAI,GAAG,QAAQ,CAAC;AACjC,QAAM,MAAM,KAAK,IAAI,GAAG,QAAQ,CAAC;AACjC,QAAM,QAAQ,MAAM,OAAO;AAC3B,QAAM,QAAQ,OAAO,SAAS,IAAI,SAAS,OAAO,SAAS,KAAK;AAChE,QAAM,MAAM;AACZ,QAAM,UAAU,SAAS,MAAM;AAE/B,QAAM,MAAM,OAAO,IAAI,CAAC,GAAG,MAAM;AAC/B,UAAM,IAAI,OAAO,SAAS,IAAI,IAAI,QAAQ,QAAQ;AAClD,UAAM,IAAI,OAAO,WAAY,IAAI,OAAO,QAAS;AACjD,WAAO,CAAC,GAAG,CAAC;AAAA,EACd,CAAC;AAED,QAAM,OAAO,IACV,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,EAAE,EAC1E,KAAK,GAAG;AACX,QAAM,OAAO,IAAI,IAAI,SAAS,CAAC;AAC/B,QAAM,QAAQ,IAAI,CAAC;AACnB,QAAM,OAAO,GAAG,IAAI,KAAK,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAI,MAAM,KAAK,MAAM,CAAC,EAAE;AAAA,IACjE;AAAA,EACF,CAAC,IAAI,MAAM;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,eAAY;AAAA,MACZ,OAAO,EAAE,SAAS,SAAS,UAAU,UAAU;AAAA,MAE/C;AAAA,4BAAC,UAAK,GAAG,MAAM,MAAM,OAAO,aAAa,MAAM;AAAA,QAC/C;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACH,MAAK;AAAA,YACL,QAAQ;AAAA,YACR;AAAA,YACA,gBAAe;AAAA,YACf,eAAc;AAAA;AAAA,QAChB;AAAA,QACC,QAAQ,oBAAC,YAAO,IAAI,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,GAAG,GAAG,MAAM,OAAO;AAAA;AAAA;AAAA,EAChE;AAEJ;","names":[]}

package/dist/admin/_ui/stat-card.js

@@ -0,0 +1,85 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Skeleton } from "./skeleton";
+import { Sparkline } from "./sparkline";
+function StatCard({
+  label,
+  value,
+  sub,
+  hint,
+  isLoading,
+  delta,
+  spark,
+  sparkColor,
+  href,
+  compact,
+  note,
+  alert
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "adm-stat-head", children: [
+      hint ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "adm-stat-label adm-hint",
+          tabIndex: 0,
+          role: "note",
+          "aria-label": hint,
+          children: [
+            label,
+            /* @__PURE__ */ jsx("span", { className: "adm-hint-bubble", role: "tooltip", children: hint })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "adm-stat-label", title: label, children: label }),
+      note && /* @__PURE__ */ jsx("span", { className: "adm-stat-note", children: note })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 96, height: 30 }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `adm-stat-value${isWord(value) ? " adm-stat-value--text" : ""}`,
+        "data-alert": alert || void 0,
+        title: typeof value === "string" ? value : void 0,
+        children: value
+      }
+    ),
+    !isLoading && (delta || sub || spark && spark.length > 0) && /* @__PURE__ */ jsxs("div", { className: "adm-stat-foot", children: [
+      /* @__PURE__ */ jsxs("div", { className: "adm-stat-foot-meta", children: [
+        delta ? /* @__PURE__ */ jsx(DeltaPill, { delta }) : sub ? /* @__PURE__ */ jsx("span", { className: "adm-stat-sub", title: sub, children: sub }) : null,
+        delta?.caption && /* @__PURE__ */ jsx("span", { className: "adm-stat-caption", children: delta.caption })
+      ] }),
+      spark && spark.length > 0 && /* @__PURE__ */ jsx(Sparkline, { values: spark, color: sparkColor })
+    ] })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href,
+        className: `adm-stat adm-stat-link${compact ? " adm-stat--compact" : ""}`,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: `adm-stat${compact ? " adm-stat--compact" : ""}`, children: body });
+}
+const isWord = (value) => typeof value === "string" && !/\d/.test(value) && value.length > 10;
+function DeltaPill({ delta }) {
+  const positiveIsGood = delta.positiveIsGood ?? true;
+  if (delta.pct === null) {
+    return /* @__PURE__ */ jsx("span", { className: "adm-delta adm-delta--flat", children: "New" });
+  }
+  const up = delta.pct > 0;
+  const flat = delta.pct === 0;
+  const good = flat ? false : up === positiveIsGood;
+  const tone = flat ? "flat" : good ? "good" : "bad";
+  const sign = flat ? "" : up ? "+" : "\u2212";
+  return /* @__PURE__ */ jsxs("span", { className: `adm-delta adm-delta--${tone}`, children: [
+    sign,
+    Math.abs(delta.pct),
+    "%"
+  ] });
+}
+export {
+  StatCard
+};
+//# sourceMappingURL=stat-card.js.map

package/dist/admin/_ui/stat-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/stat-card.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport Link from 'next/link';\nimport { Skeleton } from './skeleton';\nimport { Sparkline } from './sparkline';\n\nexport interface StatCardDelta {\n  /** Period-over-period change. `null` = no prior baseline to compare against. */\n  pct: number | null;\n  /** When false, an increase is rendered red and a decrease green. Default true. */\n  positiveIsGood?: boolean;\n  /** Optional caption, e.g. \"vs prev 30d\". */\n  caption?: string;\n}\n\n/**\n * KPI stat card: label, value (weight 500), optional sub-line or plain-text\n * delta, and an optional sparkline. No icon chip. Becomes a link with `href`.\n */\nexport function StatCard({\n  label,\n  value,\n  sub,\n  hint,\n  isLoading,\n  delta,\n  spark,\n  sparkColor,\n  href,\n  compact,\n  note,\n  alert,\n}: {\n  label: string;\n  value: ReactNode;\n  sub?: string;\n  /** Accepted for older callers; KPI cards no longer draw an icon chip. */\n  icon?: ComponentType<{ size?: number; color?: string }>;\n  hint?: string;\n  isLoading?: boolean;\n  delta?: StatCardDelta;\n  spark?: number[];\n  sparkColor?: string;\n  href?: string;\n  compact?: boolean;\n  /** Quiet secondary text under the label. */\n  note?: string;\n  /** Paint the value red: a queue that needs someone now. */\n  alert?: boolean;\n}) {\n  const body = (\n    <>\n      <div className=\"adm-stat-head\">\n        {hint ? (\n          <span\n            className=\"adm-stat-label adm-hint\"\n            tabIndex={0}\n            role=\"note\"\n            aria-label={hint}\n          >\n            {label}\n            <span className=\"adm-hint-bubble\" role=\"tooltip\">\n              {hint}\n            </span>\n          </span>\n        ) : (\n          <span className=\"adm-stat-label\" title={label}>\n            {label}\n          </span>\n        )}\n        {note && <span className=\"adm-stat-note\">{note}</span>}\n      </div>\n      {isLoading ? (\n        <Skeleton width={96} height={30} />\n      ) : (\n        <div\n          className={`adm-stat-value${isWord(value) ? ' adm-stat-value--text' : ''}`}\n          data-alert={alert || undefined}\n          title={typeof value === 'string' ? value : undefined}\n        >\n          {value}\n        </div>\n      )}\n      {!isLoading && (delta || sub || (spark && spark.length > 0)) && (\n        <div className=\"adm-stat-foot\">\n          <div className=\"adm-stat-foot-meta\">\n            {delta ? (\n              <DeltaPill delta={delta} />\n            ) : sub ? (\n              <span className=\"adm-stat-sub\" title={sub}>\n                {sub}\n              </span>\n            ) : null}\n            {delta?.caption && (\n              <span className=\"adm-stat-caption\">{delta.caption}</span>\n            )}\n          </div>\n          {spark && spark.length > 0 && (\n            <Sparkline values={spark} color={sparkColor} />\n          )}\n        </div>\n      )}\n    </>\n  );\n\n  if (href) {\n    return (\n      <Link\n        href={href}\n        className={`adm-stat adm-stat-link${\n          compact ? ' adm-stat--compact' : ''\n        }`}\n      >\n        {body}\n      </Link>\n    );\n  }\n  return (\n    <div className={`adm-stat${compact ? ' adm-stat--compact' : ''}`}>\n      {body}\n    </div>\n  );\n}\n\n/** A label rather than a number: set at body size so it never shouts. */\nconst isWord = (value: ReactNode) =>\n  typeof value === 'string' && !/\\d/.test(value) && value.length > 10;\n\nfunction DeltaPill({ delta }: { delta: StatCardDelta }) {\n  const positiveIsGood = delta.positiveIsGood ?? true;\n  if (delta.pct === null) {\n    return <span className=\"adm-delta adm-delta--flat\">New</span>;\n  }\n  const up = delta.pct > 0;\n  const flat = delta.pct === 0;\n  const good = flat ? false : up === positiveIsGood;\n  const tone = flat ? 'flat' : good ? 'good' : 'bad';\n  // The sign carries the direction in words, so no arrow glyph is needed.\n  const sign = flat ? '' : up ? '+' : '\\u2212';\n  return (\n    <span className={`adm-delta adm-delta--${tone}`}>\n      {sign}\n      {Math.abs(delta.pct)}%\n    </span>\n  );\n}\n"],"mappings":"AAkDI,mBAUQ,KAPF,YAHN;AAjDJ,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAenB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAiBG;AACD,QAAM,OACJ,iCACE;AAAA,yBAAC,SAAI,WAAU,iBACZ;AAAA,aACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAY;AAAA,UAEX;AAAA;AAAA,YACD,oBAAC,UAAK,WAAU,mBAAkB,MAAK,WACpC,gBACH;AAAA;AAAA;AAAA,MACF,IAEA,oBAAC,UAAK,WAAU,kBAAiB,OAAO,OACrC,iBACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAU,iBAAiB,gBAAK;AAAA,OACjD;AAAA,IACC,YACC,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI,IAEjC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,iBAAiB,OAAO,KAAK,IAAI,0BAA0B,EAAE;AAAA,QACxE,cAAY,SAAS;AAAA,QACrB,OAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,QAE1C;AAAA;AAAA,IACH;AAAA,IAED,CAAC,cAAc,SAAS,OAAQ,SAAS,MAAM,SAAS,MACvD,qBAAC,SAAI,WAAU,iBACb;AAAA,2BAAC,SAAI,WAAU,sBACZ;AAAA,gBACC,oBAAC,aAAU,OAAc,IACvB,MACF,oBAAC,UAAK,WAAU,gBAAe,OAAO,KACnC,eACH,IACE;AAAA,QACH,OAAO,WACN,oBAAC,UAAK,WAAU,oBAAoB,gBAAM,SAAQ;AAAA,SAEtD;AAAA,MACC,SAAS,MAAM,SAAS,KACvB,oBAAC,aAAU,QAAQ,OAAO,OAAO,YAAY;AAAA,OAEjD;AAAA,KAEJ;AAGF,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,yBACT,UAAU,uBAAuB,EACnC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE,oBAAC,SAAI,WAAW,WAAW,UAAU,uBAAuB,EAAE,IAC3D,gBACH;AAEJ;AAGA,MAAM,SAAS,CAAC,UACd,OAAO,UAAU,YAAY,CAAC,KAAK,KAAK,KAAK,KAAK,MAAM,SAAS;AAEnE,SAAS,UAAU,EAAE,MAAM,GAA6B;AACtD,QAAM,iBAAiB,MAAM,kBAAkB;AAC/C,MAAI,MAAM,QAAQ,MAAM;AACtB,WAAO,oBAAC,UAAK,WAAU,6BAA4B,iBAAG;AAAA,EACxD;AACA,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,OAAO,OAAO,QAAQ,OAAO;AACnC,QAAM,OAAO,OAAO,SAAS,OAAO,SAAS;AAE7C,QAAM,OAAO,OAAO,KAAK,KAAK,MAAM;AACpC,SACE,qBAAC,UAAK,WAAW,wBAAwB,IAAI,IAC1C;AAAA;AAAA,IACA,KAAK,IAAI,MAAM,GAAG;AAAA,IAAE;AAAA,KACvB;AAEJ;","names":[]}

package/dist/admin/_ui/styles.js

@@ -0,0 +1,74 @@
+const tableStyles = {
+  table: {
+    width: "100%",
+    borderCollapse: "collapse"
+  },
+  headRow: {
+    textAlign: "left",
+    fontSize: 12.5
+  },
+  th: {
+    padding: "13px 20px",
+    color: "var(--text-tertiary)",
+    borderBottom: "1px solid var(--border-default)",
+    fontWeight: 600,
+    whiteSpace: "nowrap"
+  },
+  cell: {
+    padding: "14px 20px",
+    fontSize: 14,
+    borderBottom: "1px solid var(--border-subtle)",
+    verticalAlign: "middle"
+  },
+  cellMuted: {
+    padding: "14px 20px",
+    fontSize: 14,
+    borderBottom: "1px solid var(--border-subtle)",
+    color: "var(--text-secondary)"
+  }
+};
+const rowBtn = {
+  padding: "4px 10px",
+  borderRadius: 6,
+  border: "1px solid var(--border-default)",
+  background: "var(--bg-base)",
+  color: "var(--text-primary)",
+  cursor: "pointer",
+  fontSize: 12.5,
+  lineHeight: 1.4
+};
+const dangerRowBtn = {
+  ...rowBtn,
+  color: "var(--error)",
+  borderColor: "var(--border-default)"
+};
+function chip(on) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 12px",
+    borderRadius: 999,
+    border: `1px solid ${on ? "var(--accent-primary)" : "var(--border-default)"}`,
+    color: on ? "var(--accent-ink, var(--accent-primary))" : "var(--text-secondary)",
+    fontSize: 13,
+    cursor: "pointer",
+    userSelect: "none"
+  };
+}
+const selectStyle = {
+  padding: "8px 12px",
+  borderRadius: 8,
+  border: "1px solid var(--border-default)",
+  background: "var(--bg-base)",
+  color: "var(--text-primary)",
+  fontSize: 14
+};
+export {
+  chip,
+  dangerRowBtn,
+  rowBtn,
+  selectStyle,
+  tableStyles
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/**\n * Shared inline-style tokens for the admin design system. Centralizes the\n * ad-hoc style objects that were copy-pasted across every admin page.\n */\n\nexport const tableStyles = {\n  table: {\n    width: '100%',\n    borderCollapse: 'collapse' as const,\n  } satisfies CSSProperties,\n  headRow: {\n    textAlign: 'left' as const,\n    fontSize: 12.5,\n  } satisfies CSSProperties,\n  th: {\n    padding: '13px 20px',\n    color: 'var(--text-tertiary)',\n    borderBottom: '1px solid var(--border-default)',\n    fontWeight: 600,\n    whiteSpace: 'nowrap' as const,\n  } satisfies CSSProperties,\n  cell: {\n    padding: '14px 20px',\n    fontSize: 14,\n    borderBottom: '1px solid var(--border-subtle)',\n    verticalAlign: 'middle' as const,\n  } satisfies CSSProperties,\n  cellMuted: {\n    padding: '14px 20px',\n    fontSize: 14,\n    borderBottom: '1px solid var(--border-subtle)',\n    color: 'var(--text-secondary)',\n  } satisfies CSSProperties,\n};\n\nexport const rowBtn: CSSProperties = {\n  padding: '4px 10px',\n  borderRadius: 6,\n  border: '1px solid var(--border-default)',\n  background: 'var(--bg-base)',\n  color: 'var(--text-primary)',\n  cursor: 'pointer',\n  fontSize: 12.5,\n  lineHeight: 1.4,\n};\n\nexport const dangerRowBtn: CSSProperties = {\n  ...rowBtn,\n  color: 'var(--error)',\n  borderColor: 'var(--border-default)',\n};\n\nexport function chip(on: boolean): CSSProperties {\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n    padding: '6px 12px',\n    borderRadius: 999,\n    border: `1px solid ${on ? 'var(--accent-primary)' : 'var(--border-default)'}`,\n    color: on\n      ? 'var(--accent-ink, var(--accent-primary))'\n      : 'var(--text-secondary)',\n    fontSize: 13,\n    cursor: 'pointer',\n    userSelect: 'none',\n  };\n}\n\nexport const selectStyle: CSSProperties = {\n  padding: '8px 12px',\n  borderRadius: 8,\n  border: '1px solid var(--border-default)',\n  background: 'var(--bg-base)',\n  color: 'var(--text-primary)',\n  fontSize: 14,\n};\n"],"mappings":"AAOO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,OAAO;AAAA,IACP,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEO,MAAM,SAAwB;AAAA,EACnC,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AACd;AAEO,MAAM,eAA8B;AAAA,EACzC,GAAG;AAAA,EACH,OAAO;AAAA,EACP,aAAa;AACf;AAEO,SAAS,KAAK,IAA4B;AAC/C,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ,aAAa,KAAK,0BAA0B,uBAAuB;AAAA,IAC3E,OAAO,KACH,6CACA;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;AAEO,MAAM,cAA6B;AAAA,EACxC,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AACZ;","names":[]}

package/dist/admin/_ui/tint.css

@@ -0,0 +1,87 @@
+/* ============================================================
+   "In use" tint and the one control height.
+   The brand shows only where something is chosen, applied or on:
+   a soft wash, brand ink, a brand-200 hairline. Never a solid block
+   (primary buttons excepted), and never on hover.
+   ============================================================ */
+
+.adm-shell {
+  --adm-tint: var(--accent-secondary);
+  --adm-tint-ink: var(--accent-secondary-ink);
+  --adm-tint-line: var(--brand-200);
+  /* md: the Button's height, which every toolbar control answers to. */
+  --adm-control-h: 28px;
+}
+
+.dark .adm-shell {
+  --adm-tint-line: color-mix(in srgb, var(--brand-300) 40%, transparent);
+}
+
+/* A selected or open table row: TableRow paints `--interactive-active`,
+   so the tint is a token here, not a skin on the primitive. */
+.adm-shell tbody {
+  --interactive-active: var(--adm-tint);
+}
+
+/* ---- The segmented look (period, currency, saved views) ----
+   One track, one 28px height, the active segment tinted. */
+.adm-segments {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: var(--adm-control-h);
+  max-width: 100%;
+  padding: 2px;
+  overflow-x: auto;
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  background: var(--bg-base);
+  scrollbar-width: none;
+}
+
+.adm-segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+  padding: 0 8px;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--adm-fast),
+    color var(--adm-fast);
+}
+
+.adm-segment:hover {
+  background: var(--adm-hover);
+  color: var(--text-primary);
+}
+
+.adm-segment[aria-pressed='true'],
+.adm-segment[aria-selected='true'],
+.adm-segment[data-active='true'] {
+  background: var(--adm-tint);
+  color: var(--adm-tint-ink);
+}
+
+.adm-segment:focus {
+  outline: none;
+}
+
+.adm-segment:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+/* ViewSwitch, by token: the thumb takes the tint and the chosen label the
+   ink; unchosen labels and their hover stay neutral. 28px like the rest. */
+.adm-view-switch {
+  --control-h: calc(var(--adm-control-h) + 1px);
+  --interactive-active: var(--adm-tint);
+  --border-strong: var(--adm-tint-line);
+  --text-primary: var(--adm-tint-ink);
+}

package/dist/admin/_ui/trend.js

@@ -0,0 +1,58 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TimeSeriesChart } from "@withpotter/components/charts";
+function toTrend(series, key) {
+  return (series ?? []).map((p) => ({ date: p.date, value: p[key] }));
+}
+function GmvOrdersChart({
+  gmvTrend,
+  ordersTrend,
+  previousGmvTrend,
+  previousOrdersTrend,
+  compare,
+  span,
+  money
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TimeSeriesChart,
+      {
+        data: gmvTrend,
+        compare: compare ? previousGmvTrend : null,
+        compareLabel: `Previous ${span}`,
+        label: "GMV",
+        formatValue: money,
+        emptyMessage: "No merchant GMV in this period",
+        height: 160
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          margin: "20px 0 8px",
+          fontSize: 12,
+          fontWeight: 600,
+          color: "var(--text-tertiary)"
+        },
+        children: "Orders"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimeSeriesChart,
+      {
+        data: ordersTrend,
+        compare: compare ? previousOrdersTrend : null,
+        compareLabel: `Previous ${span}`,
+        label: "Orders",
+        emptyMessage: "No orders in this period",
+        height: 100
+      }
+    )
+  ] });
+}
+export {
+  GmvOrdersChart,
+  toTrend
+};
+//# sourceMappingURL=trend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/trend.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSeriesChart } from '@withpotter/components/charts';\n\n/** A `{date, N}[]` series reshaped into the `{date, value}` TimeSeriesChart wants. */\nexport function toTrend<K extends string>(\n  series: Array<{ date: string } & Record<K, number>> | undefined,\n  key: K,\n): Array<{ date: string; value: number }> {\n  return (series ?? []).map((p) => ({ date: p.date, value: p[key] }));\n}\n\n/**\n * GMV over orders: the two measures share a window but not a scale, so\n * they're two stacked charts rather than one dual-axis one. Used wherever a\n * page shows both for the same range (Overview, Merchants, Commerce).\n */\nexport function GmvOrdersChart({\n  gmvTrend,\n  ordersTrend,\n  previousGmvTrend,\n  previousOrdersTrend,\n  compare,\n  span,\n  money,\n}: {\n  gmvTrend: Array<{ date: string; value: number }>;\n  ordersTrend: Array<{ date: string; value: number }>;\n  previousGmvTrend: Array<{ date: string; value: number }>;\n  previousOrdersTrend: Array<{ date: string; value: number }>;\n  /** False for \"all time\": there is no earlier period to compare with. */\n  compare: boolean;\n  span: string;\n  money: (value: number) => string;\n}) {\n  return (\n    <>\n      <TimeSeriesChart\n        data={gmvTrend}\n        compare={compare ? previousGmvTrend : null}\n        compareLabel={`Previous ${span}`}\n        label=\"GMV\"\n        formatValue={money}\n        emptyMessage=\"No merchant GMV in this period\"\n        height={160}\n      />\n      <div\n        style={{\n          margin: '20px 0 8px',\n          fontSize: 12,\n          fontWeight: 600,\n          color: 'var(--text-tertiary)',\n        }}\n      >\n        Orders\n      </div>\n      <TimeSeriesChart\n        data={ordersTrend}\n        compare={compare ? previousOrdersTrend : null}\n        compareLabel={`Previous ${span}`}\n        label=\"Orders\"\n        emptyMessage=\"No orders in this period\"\n        height={100}\n      />\n    </>\n  );\n}\n"],"mappings":";AAoCI,mBACE,KADF;AAlCJ,SAAS,uBAAuB;AAGzB,SAAS,QACd,QACA,KACwC;AACxC,UAAQ,UAAU,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,EAAE,GAAG,EAAE,EAAE;AACpE;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,UAAU,mBAAmB;AAAA,QACtC,cAAc,YAAY,IAAI;AAAA,QAC9B,OAAM;AAAA,QACN,aAAa;AAAA,QACb,cAAa;AAAA,QACb,QAAQ;AAAA;AAAA,IACV;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,OAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,UAAU,sBAAsB;AAAA,QACzC,cAAc,YAAY,IAAI;AAAA,QAC9B,OAAM;AAAA,QACN,cAAa;AAAA,QACb,QAAQ;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/_ui/workspace-tab.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { motion, useReducedMotion } from "motion/react";
+const NESTED_TAB_PARAM = "view";
+const InWorkspaceTab = createContext(false);
+function WorkspaceTab({ children }) {
+  const calm = useReducedMotion();
+  return /* @__PURE__ */ jsx(InWorkspaceTab.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: calm ? false : { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.2, ease: [0, 0, 0.2, 1] },
+      children
+    }
+  ) });
+}
+const useInWorkspaceTab = () => useContext(InWorkspaceTab);
+export {
+  NESTED_TAB_PARAM,
+  WorkspaceTab,
+  useInWorkspaceTab
+};
+//# sourceMappingURL=workspace-tab.js.map

package/dist/admin/_ui/workspace-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/workspace-tab.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\n\n/** The address parameter tabs inside a workspace tab use, so they never fight the workspace's `?tab=`. */\nexport const NESTED_TAB_PARAM = 'view';\n\nconst InWorkspaceTab = createContext(false);\n\n/**\n * Wraps a page shown as one tab of a workspace (Money, say). Inside it the\n * page's header drops its title, which the tab already shows, and keeps its\n * one line of context and its actions; tabs within the page move to `?view=`.\n */\nexport function WorkspaceTab({ children }: { children: ReactNode }) {\n  const calm = useReducedMotion();\n\n  return (\n    <InWorkspaceTab.Provider value={true}>\n      {/* The first paint of a tab eases up and in (200ms), so opening one reads as arriving, not\n          as the page being replaced. Transform and opacity only, and none of it under reduced motion. */}\n      <motion.div\n        initial={calm ? false : { opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.2, ease: [0, 0, 0.2, 1] }}\n      >\n        {children}\n      </motion.div>\n    </InWorkspaceTab.Provider>\n  );\n}\n\nexport const useInWorkspaceTab = () => useContext(InWorkspaceTab);\n"],"mappings":";AAsBM;AApBN,SAAS,eAAe,kBAAkC;AAC1D,SAAS,QAAQ,wBAAwB;AAGlC,MAAM,mBAAmB;AAEhC,MAAM,iBAAiB,cAAc,KAAK;AAOnC,SAAS,aAAa,EAAE,SAAS,GAA4B;AAClE,QAAM,OAAO,iBAAiB;AAE9B,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,MAG9B;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,OAAO,QAAQ,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC3C,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,YAAY,EAAE,UAAU,KAAK,MAAM,CAAC,GAAG,GAAG,KAAK,CAAC,EAAE;AAAA,MAEjD;AAAA;AAAA,EACH,GACF;AAEJ;AAEO,MAAM,oBAAoB,MAAM,WAAW,cAAc;","names":[]}

package/dist/admin/_ui.js

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