@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/support/workspace/merchant.module.css

@@ -0,0 +1,97 @@
+/* The merchant card and the workspace's other cases. */
+
+.merchant {
+  display: grid;
+  gap: 12px;
+}
+
+.personText {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.personName {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.verified {
+  flex-shrink: 0;
+  color: var(--adm-ok);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* Grows with the merchant's history, so it scrolls inside a fixed height. */
+.related {
+  display: grid;
+  gap: 4px;
+  max-height: 176px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+.relatedItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--adm-fast);
+}
+
+.relatedItem:hover {
+  background: var(--adm-hover);
+}
+
+.relatedItem:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.relatedRef {
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.relatedAge {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}

package/dist/admin/support/workspace/related-cases.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { adminServiceOperationsApi } from "@withpotter/lib/admin-service-operations-api";
+import { StatusDot } from "../case-pills";
+import { age } from "../support-trend";
+import styles from "./details.module.css";
+import card from "./merchant.module.css";
+function useWorkspaceCases(tenantId) {
+  return useQuery({
+    queryKey: [
+      "platform-admin",
+      "support",
+      "cases",
+      { tenantId, page: 1, pageSize: 6 }
+    ],
+    queryFn: () => adminServiceOperationsApi.listCases({ tenantId, page: 1, pageSize: 6 }),
+    enabled: Boolean(tenantId)
+  });
+}
+function RelatedCases({
+  caseId,
+  cases,
+  onOpen
+}) {
+  const rows = cases.data?.rows.filter((row) => row.id !== caseId) ?? [];
+  if (cases.isLoading) return /* @__PURE__ */ jsx("p", { className: styles.muted, children: "Loading cases\u2026" });
+  if (cases.isError)
+    return /* @__PURE__ */ jsx("p", { className: styles.muted, children: "Their other cases did not load." });
+  if (!rows.length)
+    return /* @__PURE__ */ jsx("p", { className: styles.muted, children: "This is their only case." });
+  return /* @__PURE__ */ jsx("ul", { className: card.related, children: rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: card.relatedItem,
+      onClick: () => onOpen(row.id),
+      children: [
+        /* @__PURE__ */ jsx(StatusDot, { status: row.status }),
+        /* @__PURE__ */ jsx("span", { className: card.relatedRef, children: row.reference }),
+        /* @__PURE__ */ jsx("span", { className: styles.truncate, title: row.subject, children: row.subject }),
+        /* @__PURE__ */ jsx("span", { className: card.relatedAge, children: age(row.updatedAt) })
+      ]
+    }
+  ) }, row.id)) });
+}
+export {
+  RelatedCases,
+  useWorkspaceCases
+};
+//# sourceMappingURL=related-cases.js.map

package/dist/admin/support/workspace/related-cases.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/related-cases.tsx"],"sourcesContent":["'use client';\n\nimport { useQuery } from '@tanstack/react-query';\nimport { adminServiceOperationsApi } from '@withpotter/lib/admin-service-operations-api';\nimport { StatusDot } from '../case-pills';\nimport { age } from '../support-trend';\nimport styles from './details.module.css';\nimport card from './merchant.module.css';\n\n/** The workspace's other cases, newest activity first, a few at a time. */\nexport function useWorkspaceCases(tenantId: string) {\n  return useQuery({\n    queryKey: [\n      'platform-admin',\n      'support',\n      'cases',\n      { tenantId, page: 1, pageSize: 6 },\n    ],\n    queryFn: () =>\n      adminServiceOperationsApi.listCases({ tenantId, page: 1, pageSize: 6 }),\n    enabled: Boolean(tenantId),\n  });\n}\n\n/** Each opens in this workspace, so the reader never loses their place. */\nexport function RelatedCases({\n  caseId,\n  cases,\n  onOpen,\n}: {\n  caseId: string;\n  cases: ReturnType<typeof useWorkspaceCases>;\n  onOpen: (id: string) => void;\n}) {\n  const rows = cases.data?.rows.filter((row) => row.id !== caseId) ?? [];\n  if (cases.isLoading) return <p className={styles.muted}>Loading cases…</p>;\n  if (cases.isError)\n    return <p className={styles.muted}>Their other cases did not load.</p>;\n  if (!rows.length)\n    return <p className={styles.muted}>This is their only case.</p>;\n  return (\n    <ul className={card.related}>\n      {rows.map((row) => (\n        <li key={row.id}>\n          <button\n            type=\"button\"\n            className={card.relatedItem}\n            onClick={() => onOpen(row.id)}\n          >\n            <StatusDot status={row.status} />\n            <span className={card.relatedRef}>{row.reference}</span>\n            <span className={styles.truncate} title={row.subject}>\n              {row.subject}\n            </span>\n            <span className={card.relatedAge}>{age(row.updatedAt)}</span>\n          </button>\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";AAmC8B,cASpB,YAToB;AAjC9B,SAAS,gBAAgB;AACzB,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AACpB,OAAO,YAAY;AACnB,OAAO,UAAU;AAGV,SAAS,kBAAkB,UAAkB;AAClD,SAAO,SAAS;AAAA,IACd,UAAU;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,EAAE,UAAU,MAAM,GAAG,UAAU,EAAE;AAAA,IACnC;AAAA,IACA,SAAS,MACP,0BAA0B,UAAU,EAAE,UAAU,MAAM,GAAG,UAAU,EAAE,CAAC;AAAA,IACxE,SAAS,QAAQ,QAAQ;AAAA,EAC3B,CAAC;AACH;AAGO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,OAAO,MAAM,MAAM,KAAK,OAAO,CAAC,QAAQ,IAAI,OAAO,MAAM,KAAK,CAAC;AACrE,MAAI,MAAM,UAAW,QAAO,oBAAC,OAAE,WAAW,OAAO,OAAO,iCAAc;AACtE,MAAI,MAAM;AACR,WAAO,oBAAC,OAAE,WAAW,OAAO,OAAO,6CAA+B;AACpE,MAAI,CAAC,KAAK;AACR,WAAO,oBAAC,OAAE,WAAW,OAAO,OAAO,sCAAwB;AAC7D,SACE,oBAAC,QAAG,WAAW,KAAK,SACjB,eAAK,IAAI,CAAC,QACT,oBAAC,QACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,KAAK;AAAA,MAChB,SAAS,MAAM,OAAO,IAAI,EAAE;AAAA,MAE5B;AAAA,4BAAC,aAAU,QAAQ,IAAI,QAAQ;AAAA,QAC/B,oBAAC,UAAK,WAAW,KAAK,YAAa,cAAI,WAAU;AAAA,QACjD,oBAAC,UAAK,WAAW,OAAO,UAAU,OAAO,IAAI,SAC1C,cAAI,SACP;AAAA,QACA,oBAAC,UAAK,WAAW,KAAK,YAAa,cAAI,IAAI,SAAS,GAAE;AAAA;AAAA;AAAA,EACxD,KAZO,IAAI,EAab,CACD,GACH;AAEJ;","names":[]}

package/dist/admin/support/workspace/sort-cases.js

@@ -0,0 +1,16 @@
+const SORTS = [
+  { value: "activity", label: "Latest activity" },
+  { value: "newest", label: "Newest first" },
+  { value: "oldest", label: "Longest waiting" }
+];
+const opened = (row) => new Date(row.createdAt).getTime();
+function sortCases(rows, sort) {
+  if (sort === "activity") return rows;
+  const sorted = [...rows].sort((a, b) => opened(a) - opened(b));
+  return sort === "newest" ? sorted.reverse() : sorted;
+}
+export {
+  SORTS,
+  sortCases
+};
+//# sourceMappingURL=sort-cases.js.map

package/dist/admin/support/workspace/sort-cases.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/sort-cases.ts"],"sourcesContent":["import type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\n\nexport type CaseSort = 'activity' | 'newest' | 'oldest';\n\nexport const SORTS: Array<{ value: CaseSort; label: string }> = [\n  { value: 'activity', label: 'Latest activity' },\n  { value: 'newest', label: 'Newest first' },\n  { value: 'oldest', label: 'Longest waiting' },\n];\n\nconst opened = (row: PlatformServiceCase) => new Date(row.createdAt).getTime();\n\n/**\n * The loaded page in the chosen order. The API returns latest activity\n * first; the other two reorder what is on screen, not the whole queue.\n */\nexport function sortCases(rows: PlatformServiceCase[], sort: CaseSort) {\n  if (sort === 'activity') return rows;\n  const sorted = [...rows].sort((a, b) => opened(a) - opened(b));\n  return sort === 'newest' ? sorted.reverse() : sorted;\n}\n"],"mappings":"AAIO,MAAM,QAAmD;AAAA,EAC9D,EAAE,OAAO,YAAY,OAAO,kBAAkB;AAAA,EAC9C,EAAE,OAAO,UAAU,OAAO,eAAe;AAAA,EACzC,EAAE,OAAO,UAAU,OAAO,kBAAkB;AAC9C;AAEA,MAAM,SAAS,CAAC,QAA6B,IAAI,KAAK,IAAI,SAAS,EAAE,QAAQ;AAMtE,SAAS,UAAU,MAA6B,MAAgB;AACrE,MAAI,SAAS,WAAY,QAAO;AAChC,QAAM,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,IAAI,OAAO,CAAC,CAAC;AAC7D,SAAO,SAAS,WAAW,OAAO,QAAQ,IAAI;AAChD;","names":[]}

package/dist/admin/support/workspace/status-banner.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Banner, Button, ThumbVote } from "@withpotter/ui-kit";
+import { messageCount } from "../case-origin";
+import { ADMIN_NAME } from "../../_shell/admin-brand";
+import { age } from "../support-trend";
+import { lastMessageAt, senderOf, workspaceOf } from "./case-facts";
+import styles from "./conversation.module.css";
+const TONE = {
+  open: "info",
+  waiting_on_potter: "info",
+  waiting_on_tenant: "neutral",
+  waiting_on_customer: "neutral",
+  resolved: "neutral",
+  closed: "neutral"
+};
+function headline(item) {
+  const name = senderOf(item);
+  if (!item.firstRespondedAt && item.status !== "closed")
+    return `${name} is waiting on a first response`;
+  switch (item.status) {
+    case "open":
+    case "waiting_on_potter":
+      return `Waiting on us \xB7 ${name} wrote last`;
+    case "waiting_on_tenant":
+      return `Waiting on ${workspaceOf(item)} to reply`;
+    case "waiting_on_customer":
+      return "Waiting on the customer to reply";
+    case "resolved":
+      return "Resolved \xB7 close it once the merchant is happy";
+    default:
+      return "This case is closed";
+  }
+}
+function StatusBanner({ item }) {
+  const [open, setOpen] = useState(false);
+  const [vote, setVote] = useState(null);
+  const replies = item.messages?.filter(
+    (m) => m.authorType === "platform_admin"
+  );
+  const count = messageCount(item);
+  const tone = !item.firstRespondedAt && item.status !== "closed" ? "info" : TONE[item.status];
+  const excerpt = item.description.replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx(
+    Banner,
+    {
+      tone,
+      title: headline(item),
+      action: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          "aria-expanded": open,
+          onClick: () => setOpen((value) => !value),
+          children: [
+            open ? "Hide summary" : "Show summary",
+            open ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+          ]
+        }
+      ),
+      children: open ? /* @__PURE__ */ jsxs("div", { className: styles.summary, children: [
+        /* @__PURE__ */ jsx("p", { className: styles.summaryText, title: excerpt, children: excerpt }),
+        /* @__PURE__ */ jsxs("p", { className: styles.summaryFacts, children: [
+          "Opened ",
+          age(item.createdAt),
+          " ago \xB7 ",
+          count,
+          " ",
+          count === 1 ? "message" : "messages",
+          " \xB7 ",
+          replies?.length ?? 0,
+          " from",
+          " ",
+          ADMIN_NAME,
+          " \xB7 last activity ",
+          age(lastMessageAt(item)),
+          " ago"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.summaryVote, children: [
+          /* @__PURE__ */ jsx("span", { children: "Was this summary useful?" }),
+          /* @__PURE__ */ jsx(
+            ThumbVote,
+            {
+              value: vote,
+              onVote: setVote,
+              upLabel: "Useful",
+              downLabel: "Not useful"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsx("span", { className: styles.summaryLine, children: excerpt })
+    }
+  );
+}
+export {
+  StatusBanner
+};
+//# sourceMappingURL=status-banner.js.map

package/dist/admin/support/workspace/status-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/status-banner.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { Banner, Button, ThumbVote, type ThumbValue } from '@withpotter/ui-kit';\nimport type {\n  PlatformServiceCase,\n  ServiceCaseStatus,\n} from '@withpotter/lib/admin-service-operations-api';\nimport { messageCount } from '../case-origin';\nimport { ADMIN_NAME } from '../../_shell/admin-brand';\nimport { age } from '../support-trend';\nimport { lastMessageAt, senderOf, workspaceOf } from './case-facts';\nimport styles from './conversation.module.css';\n\ntype Tone = 'info' | 'neutral';\n\nconst TONE: Record<ServiceCaseStatus, Tone> = {\n  open: 'info',\n  waiting_on_potter: 'info',\n  waiting_on_tenant: 'neutral',\n  waiting_on_customer: 'neutral',\n  resolved: 'neutral',\n  closed: 'neutral',\n};\n\nfunction headline(item: PlatformServiceCase) {\n  const name = senderOf(item);\n  if (!item.firstRespondedAt && item.status !== 'closed')\n    return `${name} is waiting on a first response`;\n  switch (item.status) {\n    case 'open':\n    case 'waiting_on_potter':\n      return `Waiting on us · ${name} wrote last`;\n    case 'waiting_on_tenant':\n      return `Waiting on ${workspaceOf(item)} to reply`;\n    case 'waiting_on_customer':\n      return 'Waiting on the customer to reply';\n    case 'resolved':\n      return 'Resolved · close it once the merchant is happy';\n    default:\n      return 'This case is closed';\n  }\n}\n\n/**\n * Where the case stands, tinted by status, above the composer, with a short\n * summary built from the case itself that folds away.\n */\nexport function StatusBanner({ item }: { item: PlatformServiceCase }) {\n  const [open, setOpen] = useState(false);\n  const [vote, setVote] = useState<ThumbValue | null>(null);\n  const replies = item.messages?.filter(\n    (m) => m.authorType === 'platform_admin',\n  );\n  const count = messageCount(item);\n  const tone =\n    !item.firstRespondedAt && item.status !== 'closed'\n      ? 'info'\n      : TONE[item.status];\n  const excerpt = item.description.replace(/\\s+/g, ' ').trim();\n\n  return (\n    <Banner\n      tone={tone}\n      title={headline(item)}\n      action={\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          aria-expanded={open}\n          onClick={() => setOpen((value) => !value)}\n        >\n          {open ? 'Hide summary' : 'Show summary'}\n          {open ? (\n            <ChevronUp className=\"size-4\" />\n          ) : (\n            <ChevronDown className=\"size-4\" />\n          )}\n        </Button>\n      }\n    >\n      {open ? (\n        <div className={styles.summary}>\n          <p className={styles.summaryText} title={excerpt}>\n            {excerpt}\n          </p>\n          <p className={styles.summaryFacts}>\n            Opened {age(item.createdAt)} ago · {count}{' '}\n            {count === 1 ? 'message' : 'messages'} · {replies?.length ?? 0} from{' '}\n            {ADMIN_NAME} · last activity {age(lastMessageAt(item))} ago\n          </p>\n          <div className={styles.summaryVote}>\n            <span>Was this summary useful?</span>\n            <ThumbVote\n              value={vote}\n              onVote={setVote}\n              upLabel=\"Useful\"\n              downLabel=\"Not useful\"\n            />\n          </div>\n        </div>\n      ) : (\n        <span className={styles.summaryLine}>{excerpt}</span>\n      )}\n    </Banner>\n  );\n}\n"],"mappings":";AAmEQ,SAQI,KARJ;AAjER,SAAS,gBAAgB;AACzB,SAAS,aAAa,iBAAiB;AACvC,SAAS,QAAQ,QAAQ,iBAAkC;AAK3D,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AACpB,SAAS,eAAe,UAAU,mBAAmB;AACrD,OAAO,YAAY;AAInB,MAAM,OAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,QAAQ;AACV;AAEA,SAAS,SAAS,MAA2B;AAC3C,QAAM,OAAO,SAAS,IAAI;AAC1B,MAAI,CAAC,KAAK,oBAAoB,KAAK,WAAW;AAC5C,WAAO,GAAG,IAAI;AAChB,UAAQ,KAAK,QAAQ;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAmB,IAAI;AAAA,IAChC,KAAK;AACH,aAAO,cAAc,YAAY,IAAI,CAAC;AAAA,IACxC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAMO,SAAS,aAAa,EAAE,KAAK,GAAkC;AACpE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,IAAI;AACxD,QAAM,UAAU,KAAK,UAAU;AAAA,IAC7B,CAAC,MAAM,EAAE,eAAe;AAAA,EAC1B;AACA,QAAM,QAAQ,aAAa,IAAI;AAC/B,QAAM,OACJ,CAAC,KAAK,oBAAoB,KAAK,WAAW,WACtC,SACA,KAAK,KAAK,MAAM;AACtB,QAAM,UAAU,KAAK,YAAY,QAAQ,QAAQ,GAAG,EAAE,KAAK;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,SAAS,IAAI;AAAA,MACpB,QACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,iBAAe;AAAA,UACf,SAAS,MAAM,QAAQ,CAAC,UAAU,CAAC,KAAK;AAAA,UAEvC;AAAA,mBAAO,iBAAiB;AAAA,YACxB,OACC,oBAAC,aAAU,WAAU,UAAS,IAE9B,oBAAC,eAAY,WAAU,UAAS;AAAA;AAAA;AAAA,MAEpC;AAAA,MAGD,iBACC,qBAAC,SAAI,WAAW,OAAO,SACrB;AAAA,4BAAC,OAAE,WAAW,OAAO,aAAa,OAAO,SACtC,mBACH;AAAA,QACA,qBAAC,OAAE,WAAW,OAAO,cAAc;AAAA;AAAA,UACzB,IAAI,KAAK,SAAS;AAAA,UAAE;AAAA,UAAQ;AAAA,UAAO;AAAA,UAC1C,UAAU,IAAI,YAAY;AAAA,UAAW;AAAA,UAAI,SAAS,UAAU;AAAA,UAAE;AAAA,UAAM;AAAA,UACpE;AAAA,UAAW;AAAA,UAAkB,IAAI,cAAc,IAAI,CAAC;AAAA,UAAE;AAAA,WACzD;AAAA,QACA,qBAAC,SAAI,WAAW,OAAO,aACrB;AAAA,8BAAC,UAAK,sCAAwB;AAAA,UAC9B;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAQ;AAAA,cACR,WAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,SACF,IAEA,oBAAC,UAAK,WAAW,OAAO,aAAc,mBAAQ;AAAA;AAAA,EAElD;AAEJ;","names":[]}

package/dist/admin/support/workspace/step-case.js

@@ -0,0 +1,9 @@
+function stepTarget(rows, currentId, direction) {
+  const index = rows.findIndex((row) => row.id === currentId);
+  if (index < 0) return direction === 1 ? rows[0]?.id ?? null : null;
+  return rows[index + direction]?.id ?? null;
+}
+export {
+  stepTarget
+};
+//# sourceMappingURL=step-case.js.map

package/dist/admin/support/workspace/step-case.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/step-case.ts"],"sourcesContent":["/**\n * The case that Next or Previous opens, or null to stay put.\n *\n * A case opened by link may not be in the loaded list at all (another page,\n * another filter). From there Next starts the list at its first row, and\n * Previous does nothing: there is no row before one that is not in the list.\n */\nexport function stepTarget(\n  rows: ReadonlyArray<{ id: string }>,\n  currentId: string,\n  direction: 1 | -1,\n): string | null {\n  const index = rows.findIndex((row) => row.id === currentId);\n\n  if (index < 0) return direction === 1 ? (rows[0]?.id ?? null) : null;\n\n  return rows[index + direction]?.id ?? null;\n}\n"],"mappings":"AAOO,SAAS,WACd,MACA,WACA,WACe;AACf,QAAM,QAAQ,KAAK,UAAU,CAAC,QAAQ,IAAI,OAAO,SAAS;AAE1D,MAAI,QAAQ,EAAG,QAAO,cAAc,IAAK,KAAK,CAAC,GAAG,MAAM,OAAQ;AAEhE,SAAO,KAAK,QAAQ,SAAS,GAAG,MAAM;AACxC;","names":[]}

package/dist/admin/support/workspace/support-workspace.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useAdminSupportCase } from "../use-admin-support";
+import { CaseListPane } from "./case-list-pane";
+import { ConversationPane } from "./conversation-pane";
+import { DetailsPane } from "./details-pane";
+import { sortCases } from "./sort-cases";
+import { useMedia } from "./use-media";
+import { useWorkspaceKeys } from "./use-workspace-keys";
+import styles from "./workspace.module.css";
+import { stepTarget } from "./step-case";
+function SupportWorkspace({
+  caseId,
+  filters,
+  cases,
+  me,
+  canManage,
+  onSelect,
+  pager
+}) {
+  const wide = useMedia("(min-width: 1100px)");
+  const narrow = useMedia("(max-width: 719.98px)");
+  const [sort, setSort] = useState("activity");
+  const [pane, setPane] = useState("conversation");
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [composer, setComposer] = useState(null);
+  const [shownCase, setShownCase] = useState(caseId);
+  if (shownCase !== caseId) {
+    setShownCase(caseId);
+    setComposer(null);
+  }
+  const detail = useAdminSupportCase(caseId);
+  const rows = useMemo(
+    () => sortCases(cases.data?.rows ?? [], sort),
+    [cases.data?.rows, sort]
+  );
+  const open = (id) => {
+    onSelect(id);
+    setPane("conversation");
+  };
+  const step = (direction) => {
+    const next = stepTarget(rows, caseId, direction);
+    if (next) open(next);
+  };
+  const compose = (mode, intent = null) => {
+    if (!canManage || detail.data?.status === "closed") return;
+    setPane("conversation");
+    setComposer((current) => ({
+      mode,
+      intent,
+      session: (current?.session ?? 0) + 1
+    }));
+  };
+  const back = () => {
+    if (composer) setComposer(null);
+    else if (narrow && pane !== "list") setPane("list");
+    else if (!wide && !narrow && detailsOpen) setDetailsOpen(false);
+    else onSelect(null);
+  };
+  useWorkspaceKeys({
+    next: () => step(1),
+    previous: () => step(-1),
+    reply: () => compose("reply"),
+    note: () => compose("note"),
+    escape: back
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.workspace,
+      "data-pane": narrow ? pane : void 0,
+      "data-details": !wide && !narrow && detailsOpen ? "open" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.listSlot, children: /* @__PURE__ */ jsx(
+          CaseListPane,
+          {
+            filters,
+            me,
+            rows,
+            total: cases.data?.total,
+            isLoading: cases.isLoading,
+            isError: cases.isError,
+            onRetry: () => void cases.refetch(),
+            selectedId: caseId,
+            onOpen: open,
+            sort,
+            onSort: setSort,
+            pager
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: styles.conversationSlot, children: /* @__PURE__ */ jsx(
+          ConversationPane,
+          {
+            caseId,
+            detail,
+            me,
+            canManage,
+            composer,
+            onCompose: compose,
+            onCollapse: () => setComposer(null),
+            header: {
+              onBack: narrow ? () => setPane("list") : () => onSelect(null),
+              backLabel: narrow ? "Back to cases" : "Back to the queue",
+              onStep: step,
+              detailsOpen: narrow ? false : detailsOpen,
+              onToggleDetails: wide ? null : narrow ? () => setPane("details") : () => setDetailsOpen((value) => !value)
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: styles.detailsSlot, children: /* @__PURE__ */ jsx(
+          DetailsPane,
+          {
+            item: detail.data,
+            canManage,
+            onOpen: open,
+            onClose: wide ? null : narrow ? () => setPane("conversation") : () => setDetailsOpen(false)
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  SupportWorkspace
+};
+//# sourceMappingURL=support-workspace.js.map

package/dist/admin/support/workspace/support-workspace.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/support-workspace.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState, type ReactNode } from 'react';\nimport type { useQueueFilters } from '../queue-filters';\nimport type { useQueueCases } from '../use-queue-cases';\nimport { useAdminSupportCase } from '../use-admin-support';\nimport type { ComposerIntent } from '../support-composer';\nimport { CaseListPane } from './case-list-pane';\nimport { ConversationPane, type ComposerState } from './conversation-pane';\nimport { DetailsPane } from './details-pane';\nimport { sortCases, type CaseSort } from './sort-cases';\nimport { useMedia } from './use-media';\nimport { useWorkspaceKeys } from './use-workspace-keys';\nimport styles from './workspace.module.css';\nimport { stepTarget } from './step-case';\n\ntype Pane = 'list' | 'conversation' | 'details';\n\n/**\n * Three panes for working cases: the list, the conversation and the case's\n * details. Below 1100px the details fold behind a toggle; below 720px one\n * pane shows at a time. ↑/↓ or J/K move between cases, R and N write,\n * Escape steps back (composer, then pane, then the queue).\n */\nexport function SupportWorkspace({\n  caseId,\n  filters,\n  cases,\n  me,\n  canManage,\n  onSelect,\n  pager,\n}: {\n  caseId: string;\n  filters: ReturnType<typeof useQueueFilters>;\n  cases: ReturnType<typeof useQueueCases>;\n  me: string | undefined;\n  canManage: boolean;\n  onSelect: (id: string | null) => void;\n  pager: ReactNode;\n}) {\n  const wide = useMedia('(min-width: 1100px)');\n  const narrow = useMedia('(max-width: 719.98px)');\n  const [sort, setSort] = useState<CaseSort>('activity');\n  const [pane, setPane] = useState<Pane>('conversation');\n  const [detailsOpen, setDetailsOpen] = useState(false);\n  const [composer, setComposer] = useState<ComposerState | null>(null);\n  // A different case starts with the composer folded away.\n  const [shownCase, setShownCase] = useState(caseId);\n  if (shownCase !== caseId) {\n    setShownCase(caseId);\n    setComposer(null);\n  }\n  const detail = useAdminSupportCase(caseId);\n  const rows = useMemo(\n    () => sortCases(cases.data?.rows ?? [], sort),\n    [cases.data?.rows, sort],\n  );\n\n  const open = (id: string) => {\n    onSelect(id);\n    setPane('conversation');\n  };\n  const step = (direction: 1 | -1) => {\n    const next = stepTarget(rows, caseId, direction);\n    if (next) open(next);\n  };\n  const compose = (mode: 'reply' | 'note', intent: ComposerIntent = null) => {\n    if (!canManage || detail.data?.status === 'closed') return;\n    setPane('conversation');\n    setComposer((current) => ({\n      mode,\n      intent,\n      session: (current?.session ?? 0) + 1,\n    }));\n  };\n  const back = () => {\n    if (composer) setComposer(null);\n    else if (narrow && pane !== 'list') setPane('list');\n    else if (!wide && !narrow && detailsOpen) setDetailsOpen(false);\n    else onSelect(null);\n  };\n  useWorkspaceKeys({\n    next: () => step(1),\n    previous: () => step(-1),\n    reply: () => compose('reply'),\n    note: () => compose('note'),\n    escape: back,\n  });\n\n  return (\n    <div\n      className={styles.workspace}\n      data-pane={narrow ? pane : undefined}\n      data-details={!wide && !narrow && detailsOpen ? 'open' : undefined}\n    >\n      <div className={styles.listSlot}>\n        <CaseListPane\n          filters={filters}\n          me={me}\n          rows={rows}\n          total={cases.data?.total}\n          isLoading={cases.isLoading}\n          isError={cases.isError}\n          onRetry={() => void cases.refetch()}\n          selectedId={caseId}\n          onOpen={open}\n          sort={sort}\n          onSort={setSort}\n          pager={pager}\n        />\n      </div>\n      <div className={styles.conversationSlot}>\n        <ConversationPane\n          caseId={caseId}\n          detail={detail}\n          me={me}\n          canManage={canManage}\n          composer={composer}\n          onCompose={compose}\n          onCollapse={() => setComposer(null)}\n          header={{\n            onBack: narrow ? () => setPane('list') : () => onSelect(null),\n            backLabel: narrow ? 'Back to cases' : 'Back to the queue',\n            onStep: step,\n            detailsOpen: narrow ? false : detailsOpen,\n            onToggleDetails: wide\n              ? null\n              : narrow\n                ? () => setPane('details')\n                : () => setDetailsOpen((value) => !value),\n          }}\n        />\n      </div>\n      <div className={styles.detailsSlot}>\n        <DetailsPane\n          item={detail.data}\n          canManage={canManage}\n          onOpen={open}\n          onClose={\n            wide\n              ? null\n              : narrow\n                ? () => setPane('conversation')\n                : () => setDetailsOpen(false)\n          }\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/support/workspace/use-media.js

@@ -0,0 +1,17 @@
+"use client";
+import { useSyncExternalStore } from "react";
+function useMedia(query) {
+  return useSyncExternalStore(
+    (notify) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", notify);
+      return () => list.removeEventListener("change", notify);
+    },
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+export {
+  useMedia
+};
+//# sourceMappingURL=use-media.js.map

package/dist/admin/support/workspace/use-media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/use-media.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\n/** Whether a media query matches, kept live; false on the server. */\nexport function useMedia(query: string) {\n  return useSyncExternalStore(\n    (notify) => {\n      const list = window.matchMedia(query);\n      list.addEventListener('change', notify);\n      return () => list.removeEventListener('change', notify);\n    },\n    () => window.matchMedia(query).matches,\n    () => false,\n  );\n}\n"],"mappings":";AAEA,SAAS,4BAA4B;AAG9B,SAAS,SAAS,OAAe;AACtC,SAAO;AAAA,IACL,CAAC,WAAW;AACV,YAAM,OAAO,OAAO,WAAW,KAAK;AACpC,WAAK,iBAAiB,UAAU,MAAM;AACtC,aAAO,MAAM,KAAK,oBAAoB,UAAU,MAAM;AAAA,IACxD;AAAA,IACA,MAAM,OAAO,WAAW,KAAK,EAAE;AAAA,IAC/B,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/admin/support/workspace/use-workspace-keys.js

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { singleKeyShortcutsEnabled } from "../../_settings";
+function busy(target) {
+  const el = target instanceof HTMLElement ? target : null;
+  if (el?.closest(
+    'input, textarea, select, [contenteditable="true"], [role="menu"], [role="listbox"], [role="combobox"], [role="tablist"], [aria-haspopup]'
+  ))
+    return true;
+  return Boolean(
+    document.querySelector(
+      '[aria-modal="true"], [role="alertdialog"], [role="menu"], [role="listbox"]'
+    )
+  );
+}
+function useWorkspaceKeys(keys) {
+  const latest = useRef(keys);
+  useEffect(() => {
+    latest.current = keys;
+  });
+  useEffect(() => {
+    const onKey = (event) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey) return;
+      if (event.altKey || busy(event.target)) return;
+      if (event.key.length === 1 && !singleKeyShortcutsEnabled()) return;
+      const action = {
+        ArrowDown: "next",
+        j: "next",
+        ArrowUp: "previous",
+        k: "previous",
+        r: "reply",
+        n: "note",
+        Escape: "escape"
+      }[event.key];
+      if (!action) return;
+      event.preventDefault();
+      latest.current[action]();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+}
+export {
+  useWorkspaceKeys
+};
+//# sourceMappingURL=use-workspace-keys.js.map

package/dist/admin/support/workspace/use-workspace-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/use-workspace-keys.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { singleKeyShortcutsEnabled } from '../../_settings';\n\nexport interface WorkspaceKeys {\n  next: () => void;\n  previous: () => void;\n  reply: () => void;\n  note: () => void;\n  escape: () => void;\n}\n\n/** Typing, a menu, a list box or a modal keeps its own keys. */\nfunction busy(target: EventTarget | null) {\n  const el = target instanceof HTMLElement ? target : null;\n  if (\n    el?.closest(\n      'input, textarea, select, [contenteditable=\"true\"], [role=\"menu\"], [role=\"listbox\"], [role=\"combobox\"], [role=\"tablist\"], [aria-haspopup]',\n    )\n  )\n    return true;\n  return Boolean(\n    document.querySelector(\n      '[aria-modal=\"true\"], [role=\"alertdialog\"], [role=\"menu\"], [role=\"listbox\"]',\n    ),\n  );\n}\n\n/**\n * The workspace's keys: ↓ or J and ↑ or K move between cases, R replies,\n * N writes an internal note, Escape goes back. Inactive while typing or\n * while a menu or dialog is open, and never with a modifier held.\n */\nexport function useWorkspaceKeys(keys: WorkspaceKeys) {\n  const latest = useRef(keys);\n  useEffect(() => {\n    latest.current = keys;\n  });\n\n  useEffect(() => {\n    const onKey = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || event.metaKey || event.ctrlKey) return;\n      if (event.altKey || busy(event.target)) return;\n      if (event.key.length === 1 && !singleKeyShortcutsEnabled()) return;\n      const action = {\n        ArrowDown: 'next',\n        j: 'next',\n        ArrowUp: 'previous',\n        k: 'previous',\n        r: 'reply',\n        n: 'note',\n        Escape: 'escape',\n      }[event.key] as keyof WorkspaceKeys | undefined;\n      if (!action) return;\n      event.preventDefault();\n      latest.current[action]();\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, []);\n}\n"],"mappings":";AAEA,SAAS,WAAW,cAAc;AAClC,SAAS,iCAAiC;AAW1C,SAAS,KAAK,QAA4B;AACxC,QAAM,KAAK,kBAAkB,cAAc,SAAS;AACpD,MACE,IAAI;AAAA,IACF;AAAA,EACF;AAEA,WAAO;AACT,SAAO;AAAA,IACL,SAAS;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACF;AAOO,SAAS,iBAAiB,MAAqB;AACpD,QAAM,SAAS,OAAO,IAAI;AAC1B,YAAU,MAAM;AACd,WAAO,UAAU;AAAA,EACnB,CAAC;AAED,YAAU,MAAM;AACd,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,MAAM,oBAAoB,MAAM,WAAW,MAAM,QAAS;AAC9D,UAAI,MAAM,UAAU,KAAK,MAAM,MAAM,EAAG;AACxC,UAAI,MAAM,IAAI,WAAW,KAAK,CAAC,0BAA0B,EAAG;AAC5D,YAAM,SAAS;AAAA,QACb,WAAW;AAAA,QACX,GAAG;AAAA,QACH,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,QAAQ;AAAA,MACV,EAAE,MAAM,GAAG;AACX,UAAI,CAAC,OAAQ;AACb,YAAM,eAAe;AACrB,aAAO,QAAQ,MAAM,EAAE;AAAA,IACzB;AACA,WAAO,iBAAiB,WAAW,KAAK;AACxC,WAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,EAC1D,GAAG,CAAC,CAAC;AACP;","names":[]}

package/dist/admin/support/workspace/workspace.module.css

@@ -0,0 +1,89 @@
+/* Three floating panes on the canvas: list, conversation, details. */
+
+.workspace {
+  position: relative;
+  display: grid;
+  grid-template-columns: 340px minmax(0, 1fr) 340px;
+  gap: 8px;
+  /* Exactly the sheet's height under the top bar: viewport − 16px inset −
+     2px border − top bar − 24px padding. */
+  height: calc(100dvh - var(--adm-topbar-h) - 42px);
+  min-height: 520px;
+}
+
+.listSlot,
+.conversationSlot,
+.detailsSlot {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.listSlot > *,
+.conversationSlot > *,
+.detailsSlot > * {
+  flex: 1;
+}
+
+/* Below 1100px the details become a sheet over the conversation. */
+@media (max-width: 1099.98px) {
+  .workspace {
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+  }
+
+  .detailsSlot {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    display: none;
+    width: min(360px, 100%);
+    border: 1px solid var(--border-subtle);
+    border-radius: 10px;
+  }
+
+  .workspace[data-details='open'] .detailsSlot {
+    display: flex;
+    animation: slide-in var(--adm-fast);
+  }
+}
+
+/* Below 720px, one pane at a time. */
+@media (max-width: 719.98px) {
+  .workspace {
+    grid-template-columns: minmax(0, 1fr);
+    height: calc(100dvh - var(--adm-topbar-h) - 42px);
+  }
+
+  .listSlot,
+  .conversationSlot,
+  .detailsSlot {
+    display: none;
+  }
+
+  .detailsSlot {
+    position: static;
+    width: auto;
+    border: 0;
+  }
+
+  .workspace[data-pane='list'] .listSlot,
+  .workspace[data-pane='conversation'] .conversationSlot,
+  .workspace[data-pane='details'] .detailsSlot {
+    display: flex;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .workspace[data-details='open'] .detailsSlot {
+    animation: none;
+  }
+}