@withpotter/pages-admin 0.13.0-next.101

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

@@ -0,0 +1,41 @@
+import { SUPPORT_INBOX_EMAIL } from "@withpotter/lib/support-inbox";
+const sourceFeedbackId = (item) => item.sourceFeedbackId ?? null;
+const fromEmail = (item) => {
+  const c = item;
+  return [c.source, c.channel].some((v) => v?.toLowerCase() === "email");
+};
+const channelOf = (item) => sourceFeedbackId(item) ? "Feedback" : fromEmail(item) ? "Email" : "In-app";
+const channelLabel = (item) => {
+  const channel = channelOf(item);
+  return channel === "Email" ? `Email \xB7 ${SUPPORT_INBOX_EMAIL}` : channel;
+};
+const workspaceOf = (item) => item.supportContext?.workspace.businessName || item.tenant?.businessName || "Unknown workspace";
+const countryOf = (item) => {
+  const from = item.supportContext?.workspace ?? item.tenant;
+  return { country: from?.country, code: from?.countryCode };
+};
+const senderOf = (item) => item.supportContext?.sender.name || item.reporterName;
+const lastMessageAt = (item) => item.messages?.at(-1)?.createdAt ?? item.createdAt;
+function slaState(due, doneAt, now = Date.now()) {
+  if (!due) return null;
+  const dueAt = new Date(due).getTime();
+  if (!Number.isFinite(dueAt)) return null;
+  if (doneAt)
+    return {
+      due,
+      state: new Date(doneAt).getTime() <= dueAt ? "met" : "missed"
+    };
+  if (now > dueAt) return { due, state: "missed" };
+  return { due, state: dueAt - now < 36e5 ? "at-risk" : "on-track" };
+}
+export {
+  channelLabel,
+  channelOf,
+  countryOf,
+  lastMessageAt,
+  senderOf,
+  slaState,
+  sourceFeedbackId,
+  workspaceOf
+};
+//# sourceMappingURL=case-facts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/case-facts.ts"],"sourcesContent":["import type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { SUPPORT_INBOX_EMAIL } from '@withpotter/lib/support-inbox';\n\n/**\n * The feedback a case was opened from. The case detail carries the column\n * although the client type does not name it yet, so it is read defensively.\n */\nexport const sourceFeedbackId = (item: PlatformServiceCase) =>\n  (item as { sourceFeedbackId?: string | null }).sourceFeedbackId ?? null;\n\n/**\n * Whether the case came in by email. The client type names no source or\n * channel field yet, so either is read defensively when the API sends it.\n */\nconst fromEmail = (item: PlatformServiceCase) => {\n  const c = item as { source?: string | null; channel?: string | null };\n  return [c.source, c.channel].some((v) => v?.toLowerCase() === 'email');\n};\n\n/** How the case reached us: a feedback report, email, or the in-app form. */\nexport const channelOf = (item: PlatformServiceCase) =>\n  sourceFeedbackId(item) ? 'Feedback' : fromEmail(item) ? 'Email' : 'In-app';\n\n/** The channel in words; email names the inbox it arrived at. */\nexport const channelLabel = (item: PlatformServiceCase) => {\n  const channel = channelOf(item);\n  return channel === 'Email' ? `Email · ${SUPPORT_INBOX_EMAIL}` : channel;\n};\n\nexport const workspaceOf = (item: PlatformServiceCase) =>\n  item.supportContext?.workspace.businessName ||\n  item.tenant?.businessName ||\n  'Unknown workspace';\n\n/** The merchant's country: from the support context, else the case's tenant. */\nexport const countryOf = (item: PlatformServiceCase) => {\n  const from = item.supportContext?.workspace ?? item.tenant;\n\n  return { country: from?.country, code: from?.countryCode };\n};\n\nexport const senderOf = (item: PlatformServiceCase) =>\n  item.supportContext?.sender.name || item.reporterName;\n\n/** The newest message, or the request itself when nobody has written since. */\nexport const lastMessageAt = (item: PlatformServiceCase) =>\n  item.messages?.at(-1)?.createdAt ?? item.createdAt;\n\n/** An SLA target: when, and whether it is met, at risk or missed. */\nexport function slaState(\n  due: string | null,\n  doneAt: string | null,\n  now = Date.now(),\n): { due: string; state: 'met' | 'missed' | 'at-risk' | 'on-track' } | null {\n  if (!due) return null;\n  const dueAt = new Date(due).getTime();\n  if (!Number.isFinite(dueAt)) return null;\n  if (doneAt)\n    return {\n      due,\n      state: new Date(doneAt).getTime() <= dueAt ? 'met' : 'missed',\n    };\n  if (now > dueAt) return { due, state: 'missed' };\n  return { due, state: dueAt - now < 3_600_000 ? 'at-risk' : 'on-track' };\n}\n"],"mappings":"AACA,SAAS,2BAA2B;AAM7B,MAAM,mBAAmB,CAAC,SAC9B,KAA8C,oBAAoB;AAMrE,MAAM,YAAY,CAAC,SAA8B;AAC/C,QAAM,IAAI;AACV,SAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,MAAM,OAAO;AACvE;AAGO,MAAM,YAAY,CAAC,SACxB,iBAAiB,IAAI,IAAI,aAAa,UAAU,IAAI,IAAI,UAAU;AAG7D,MAAM,eAAe,CAAC,SAA8B;AACzD,QAAM,UAAU,UAAU,IAAI;AAC9B,SAAO,YAAY,UAAU,cAAW,mBAAmB,KAAK;AAClE;AAEO,MAAM,cAAc,CAAC,SAC1B,KAAK,gBAAgB,UAAU,gBAC/B,KAAK,QAAQ,gBACb;AAGK,MAAM,YAAY,CAAC,SAA8B;AACtD,QAAM,OAAO,KAAK,gBAAgB,aAAa,KAAK;AAEpD,SAAO,EAAE,SAAS,MAAM,SAAS,MAAM,MAAM,YAAY;AAC3D;AAEO,MAAM,WAAW,CAAC,SACvB,KAAK,gBAAgB,OAAO,QAAQ,KAAK;AAGpC,MAAM,gBAAgB,CAAC,SAC5B,KAAK,UAAU,GAAG,EAAE,GAAG,aAAa,KAAK;AAGpC,SAAS,SACd,KACA,QACA,MAAM,KAAK,IAAI,GAC2D;AAC1E,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,QAAQ,IAAI,KAAK,GAAG,EAAE,QAAQ;AACpC,MAAI,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AACpC,MAAI;AACF,WAAO;AAAA,MACL;AAAA,MACA,OAAO,IAAI,KAAK,MAAM,EAAE,QAAQ,KAAK,QAAQ,QAAQ;AAAA,IACvD;AACF,MAAI,MAAM,MAAO,QAAO,EAAE,KAAK,OAAO,SAAS;AAC/C,SAAO,EAAE,KAAK,OAAO,QAAQ,MAAM,OAAY,YAAY,WAAW;AACxE;","names":[]}

package/dist/admin/support/workspace/case-list-pane.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Button, EmptyNote } from "@withpotter/ui-kit";
+import { Select } from "@withpotter/ui-kit/select";
+import { Reveal } from "../../_fx";
+import { FilterSearch, Skeleton } from "../../_ui";
+import { SUPPORT_VIEWS, viewOf } from "../support-views";
+import { useViewCounts } from "../use-view-counts";
+import { useAdminDirectory } from "../use-support-insights";
+import { CaseCard } from "./case-card";
+import { Kbd } from "../kbd";
+import { SORTS } from "./sort-cases";
+import styles from "./list.module.css";
+function CaseListPane({
+  filters,
+  me,
+  rows,
+  total,
+  isLoading,
+  isError,
+  onRetry,
+  selectedId,
+  onOpen,
+  sort,
+  onSort,
+  pager
+}) {
+  const counts = useViewCounts(me);
+  const names = useAdminDirectory();
+  const selectedRef = useRef(null);
+  useEffect(() => {
+    selectedRef.current?.scrollIntoView({ block: "nearest" });
+  }, [selectedId]);
+  const views = SUPPORT_VIEWS.filter((view) => view.value !== "mine" || me).map(
+    (view) => ({
+      value: view.value,
+      label: view.label,
+      count: counts[view.value]
+    })
+  );
+  return /* @__PURE__ */ jsxs("section", { className: styles.pane, "aria-label": "Cases", children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.head, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.headRow, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.viewSelect, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            ariaLabel: "Saved view",
+            size: "sm",
+            bare: true,
+            value: filters.view,
+            options: views,
+            onChange: (value) => filters.setView(value)
+          }
+        ) }),
+        total !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.count, children: total.toLocaleString() }),
+        /* @__PURE__ */ jsx("div", { className: styles.sortSelect, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            ariaLabel: "Sort cases",
+            size: "sm",
+            bare: true,
+            value: sort,
+            options: SORTS,
+            onChange: (value) => onSort(value)
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FilterSearch,
+        {
+          fill: true,
+          value: filters.search,
+          onChange: filters.setSearch,
+          placeholder: "Search reference or subject",
+          label: "Search reference or subject"
+        }
+      ),
+      /* @__PURE__ */ jsxs("p", { className: styles.hint, children: [
+        /* @__PURE__ */ jsx(Kbd, { children: "\u2191" }),
+        /* @__PURE__ */ jsx(Kbd, { children: "\u2193" }),
+        " or ",
+        /* @__PURE__ */ jsx(Kbd, { children: "J" }),
+        /* @__PURE__ */ jsx(Kbd, { children: "K" }),
+        " to move between cases"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.scroll, children: isLoading ? /* @__PURE__ */ jsx("div", { className: styles.cards, "aria-busy": true, children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 104 }, i)) }) : isError ? /* @__PURE__ */ jsx(
+      EmptyNote,
+      {
+        className: styles.empty,
+        action: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: "Try again" }),
+        children: "The cases did not load."
+      }
+    ) : rows.length === 0 ? /* @__PURE__ */ jsxs(
+      EmptyNote,
+      {
+        className: styles.empty,
+        action: filters.narrowed && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: filters.clear, children: "Show all cases" }),
+        children: [
+          "Nothing in ",
+          viewOf(filters.view).label.toLowerCase(),
+          "."
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("ul", { className: styles.cards, children: rows.map((row, index) => {
+      const selected = row.id === selectedId;
+      const holder = row.assignedAdminUserId;
+      return /* @__PURE__ */ jsx(Reveal, { as: "li", index: Math.min(index, 10), children: /* @__PURE__ */ jsx(
+        CaseCard,
+        {
+          ref: selected ? selectedRef : void 0,
+          row,
+          selected,
+          assignee: holder ? holder === me ? "You" : names.get(holder) ?? "A colleague" : null,
+          onOpen: () => onOpen(row.id)
+        }
+      ) }, row.id);
+    }) }) }),
+    pager && /* @__PURE__ */ jsx("footer", { className: styles.foot, children: pager })
+  ] });
+}
+export {
+  CaseListPane
+};
+//# sourceMappingURL=case-list-pane.js.map

package/dist/admin/support/workspace/case-list-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/case-list-pane.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { Button, EmptyNote } from '@withpotter/ui-kit';\nimport { Select } from '@withpotter/ui-kit/select';\nimport type { ReactNode } from 'react';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { Reveal } from '../../_fx';\nimport { FilterSearch, Skeleton } from '../../_ui';\nimport type { useQueueFilters } from '../queue-filters';\nimport { SUPPORT_VIEWS, viewOf, type SupportView } from '../support-views';\nimport { useViewCounts } from '../use-view-counts';\nimport { useAdminDirectory } from '../use-support-insights';\nimport { CaseCard } from './case-card';\nimport { Kbd } from '../kbd';\nimport { SORTS, type CaseSort } from './sort-cases';\nimport styles from './list.module.css';\n\n/** The case list beside the conversation: view, sort, search, cards. */\nexport function CaseListPane({\n  filters,\n  me,\n  rows,\n  total,\n  isLoading,\n  isError,\n  onRetry,\n  selectedId,\n  onOpen,\n  sort,\n  onSort,\n  pager,\n}: {\n  filters: ReturnType<typeof useQueueFilters>;\n  me: string | undefined;\n  rows: PlatformServiceCase[];\n  total: number | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  onRetry: () => void;\n  selectedId: string;\n  onOpen: (id: string) => void;\n  sort: CaseSort;\n  onSort: (sort: CaseSort) => void;\n  pager: ReactNode;\n}) {\n  const counts = useViewCounts(me);\n  const names = useAdminDirectory();\n  const selectedRef = useRef<HTMLButtonElement>(null);\n  useEffect(() => {\n    selectedRef.current?.scrollIntoView({ block: 'nearest' });\n  }, [selectedId]);\n  const views = SUPPORT_VIEWS.filter((view) => view.value !== 'mine' || me).map(\n    (view) => ({\n      value: view.value,\n      label: view.label,\n      count: counts[view.value],\n    }),\n  );\n\n  return (\n    <section className={styles.pane} aria-label=\"Cases\">\n      <header className={styles.head}>\n        <div className={styles.headRow}>\n          <div className={styles.viewSelect}>\n            <Select\n              ariaLabel=\"Saved view\"\n              size=\"sm\"\n              bare\n              value={filters.view}\n              options={views}\n              onChange={(value) => filters.setView(value as SupportView)}\n            />\n          </div>\n          {total !== undefined && (\n            <span className={styles.count}>{total.toLocaleString()}</span>\n          )}\n          <div className={styles.sortSelect}>\n            <Select\n              ariaLabel=\"Sort cases\"\n              size=\"sm\"\n              bare\n              value={sort}\n              options={SORTS}\n              onChange={(value) => onSort(value as CaseSort)}\n            />\n          </div>\n        </div>\n        <FilterSearch\n          fill\n          value={filters.search}\n          onChange={filters.setSearch}\n          placeholder=\"Search reference or subject\"\n          label=\"Search reference or subject\"\n        />\n        <p className={styles.hint}>\n          <Kbd>↑</Kbd>\n          <Kbd>↓</Kbd> or <Kbd>J</Kbd>\n          <Kbd>K</Kbd> to move between cases\n        </p>\n      </header>\n      <div className={styles.scroll}>\n        {isLoading ? (\n          <div className={styles.cards} aria-busy>\n            {Array.from({ length: 6 }, (_, i) => (\n              <Skeleton key={i} height={104} />\n            ))}\n          </div>\n        ) : isError ? (\n          <EmptyNote\n            className={styles.empty}\n            action={\n              <Button variant=\"secondary\" onClick={onRetry}>\n                Try again\n              </Button>\n            }\n          >\n            The cases did not load.\n          </EmptyNote>\n        ) : rows.length === 0 ? (\n          <EmptyNote\n            className={styles.empty}\n            action={\n              filters.narrowed && (\n                <Button variant=\"secondary\" onClick={filters.clear}>\n                  Show all cases\n                </Button>\n              )\n            }\n          >\n            Nothing in {viewOf(filters.view).label.toLowerCase()}.\n          </EmptyNote>\n        ) : (\n          <ul className={styles.cards}>\n            {rows.map((row, index) => {\n              const selected = row.id === selectedId;\n              const holder = row.assignedAdminUserId;\n              return (\n                <Reveal as=\"li\" key={row.id} index={Math.min(index, 10)}>\n                  <CaseCard\n                    ref={selected ? selectedRef : undefined}\n                    row={row}\n                    selected={selected}\n                    assignee={\n                      holder\n                        ? holder === me\n                          ? 'You'\n                          : (names.get(holder) ?? 'A colleague')\n                        : null\n                    }\n                    onOpen={() => onOpen(row.id)}\n                  />\n                </Reveal>\n              );\n            })}\n          </ul>\n        )}\n      </div>\n      {pager && <footer className={styles.foot}>{pager}</footer>}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Copy } from "lucide-react";
+import { Badge, Button, Tooltip, useToast } from "@withpotter/ui-kit";
+import {
+  AssigneeSelect,
+  PrioritySelect,
+  StatusSelect
+} from "../case-field-selects";
+import { dateTime, humanize } from "../support-options";
+import { age } from "../support-trend";
+import { lastMessageAt, slaState } from "./case-facts";
+import styles from "./details.module.css";
+const SLA_BADGE = {
+  met: { variant: "secondary", label: "Met" },
+  "on-track": { variant: "secondary", label: "On track" },
+  "at-risk": { variant: "primary", label: "At risk" },
+  missed: { variant: "error", label: "Breached" }
+};
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+    /* @__PURE__ */ jsx("dt", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsx("dd", { className: styles.value, children })
+  ] });
+}
+const shortDue = (iso) => {
+  const d = new Date(iso);
+  return new Intl.DateTimeFormat(void 0, {
+    month: "short",
+    day: "numeric",
+    year: d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? void 0 : "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(d);
+};
+function Sla({ due, doneAt }) {
+  const sla = slaState(due, doneAt);
+  if (!sla) return /* @__PURE__ */ jsx("span", { className: styles.muted, children: "No target" });
+  const badge = SLA_BADGE[sla.state];
+  return /* @__PURE__ */ jsxs("span", { className: styles.inline, title: dateTime(sla.due), children: [
+    /* @__PURE__ */ jsx("span", { className: styles.truncate, children: shortDue(sla.due) }),
+    /* @__PURE__ */ jsx(Badge, { size: "sm", variant: badge.variant, children: badge.label })
+  ] });
+}
+function CaseProperties({
+  item,
+  canManage
+}) {
+  const { toast } = useToast();
+  const last = lastMessageAt(item);
+  return /* @__PURE__ */ jsxs("dl", { className: styles.properties, children: [
+    /* @__PURE__ */ jsx(Row, { label: "Status", children: /* @__PURE__ */ jsx(StatusSelect, { item, canManage }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Priority", children: /* @__PURE__ */ jsx(PrioritySelect, { item, canManage }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Assignee", children: /* @__PURE__ */ jsx(AssigneeSelect, { item, canManage }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Reference", children: /* @__PURE__ */ jsxs("span", { className: styles.inline, children: [
+      /* @__PURE__ */ jsx("code", { className: styles.code, children: item.reference }),
+      /* @__PURE__ */ jsx(Tooltip, { label: "Copy reference", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          "aria-label": "Copy reference",
+          onClick: () => void navigator.clipboard?.writeText(item.reference).then(() => toast({ title: `Copied ${item.reference}` })),
+          children: /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Category", children: humanize(item.category) }),
+    /* @__PURE__ */ jsx(Row, { label: "Created", children: /* @__PURE__ */ jsxs("span", { title: dateTime(item.createdAt), children: [
+      age(item.createdAt),
+      " ago"
+    ] }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Last message", children: /* @__PURE__ */ jsxs("span", { title: dateTime(last), children: [
+      age(last),
+      " ago"
+    ] }) }),
+    /* @__PURE__ */ jsx(Row, { label: "First response", children: item.firstRespondedAt ? /* @__PURE__ */ jsx("span", { title: dateTime(item.firstRespondedAt), children: shortDue(item.firstRespondedAt) }) : /* @__PURE__ */ jsx("span", { className: styles.muted, children: "Not yet" }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Reply due", children: /* @__PURE__ */ jsx(Sla, { due: item.firstResponseDueAt, doneAt: item.firstRespondedAt }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Resolve due", children: /* @__PURE__ */ jsx(
+      Sla,
+      {
+        due: item.resolutionDueAt,
+        doneAt: item.resolvedAt ?? item.closedAt
+      }
+    ) })
+  ] });
+}
+export {
+  CaseProperties
+};
+//# sourceMappingURL=case-properties.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/case-properties.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { Copy } from 'lucide-react';\nimport { Badge, Button, Tooltip, useToast } from '@withpotter/ui-kit';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport {\n  AssigneeSelect,\n  PrioritySelect,\n  StatusSelect,\n} from '../case-field-selects';\nimport { dateTime, humanize } from '../support-options';\nimport { age } from '../support-trend';\nimport { lastMessageAt, slaState } from './case-facts';\nimport styles from './details.module.css';\n\nconst SLA_BADGE = {\n  met: { variant: 'secondary', label: 'Met' },\n  'on-track': { variant: 'secondary', label: 'On track' },\n  'at-risk': { variant: 'primary', label: 'At risk' },\n  missed: { variant: 'error', label: 'Breached' },\n} as const;\n\nfunction Row({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <div className={styles.row}>\n      <dt className={styles.label}>{label}</dt>\n      <dd className={styles.value}>{children}</dd>\n    </div>\n  );\n}\n\n/** \"Oct 3, 4:30 PM\": short enough for the pane; the year only when it differs. */\nconst shortDue = (iso: string) => {\n  const d = new Date(iso);\n  return new Intl.DateTimeFormat(undefined, {\n    month: 'short',\n    day: 'numeric',\n    year: d.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  }).format(d);\n};\n\nfunction Sla({ due, doneAt }: { due: string | null; doneAt: string | null }) {\n  const sla = slaState(due, doneAt);\n  if (!sla) return <span className={styles.muted}>No target</span>;\n  const badge = SLA_BADGE[sla.state];\n  return (\n    <span className={styles.inline} title={dateTime(sla.due)}>\n      <span className={styles.truncate}>{shortDue(sla.due)}</span>\n      <Badge size=\"sm\" variant={badge.variant}>\n        {badge.label}\n      </Badge>\n    </span>\n  );\n}\n\n/**\n * The case's fields as label and value rows; status, priority and assignee\n * change in place. SLA rows read the case's own due dates.\n */\nexport function CaseProperties({\n  item,\n  canManage,\n}: {\n  item: PlatformServiceCase;\n  canManage: boolean;\n}) {\n  const { toast } = useToast();\n  const last = lastMessageAt(item);\n\n  return (\n    <dl className={styles.properties}>\n      <Row label=\"Status\">\n        <StatusSelect item={item} canManage={canManage} />\n      </Row>\n      <Row label=\"Priority\">\n        <PrioritySelect item={item} canManage={canManage} />\n      </Row>\n      <Row label=\"Assignee\">\n        <AssigneeSelect item={item} canManage={canManage} />\n      </Row>\n      <Row label=\"Reference\">\n        <span className={styles.inline}>\n          <code className={styles.code}>{item.reference}</code>\n          <Tooltip label=\"Copy reference\">\n            <Button\n              size=\"icon\"\n              variant=\"ghost\"\n              aria-label=\"Copy reference\"\n              onClick={() =>\n                void navigator.clipboard\n                  ?.writeText(item.reference)\n                  .then(() => toast({ title: `Copied ${item.reference}` }))\n              }\n            >\n              <Copy className=\"size-4\" />\n            </Button>\n          </Tooltip>\n        </span>\n      </Row>\n      <Row label=\"Category\">{humanize(item.category)}</Row>\n      <Row label=\"Created\">\n        <span title={dateTime(item.createdAt)}>{age(item.createdAt)} ago</span>\n      </Row>\n      <Row label=\"Last message\">\n        <span title={dateTime(last)}>{age(last)} ago</span>\n      </Row>\n      <Row label=\"First response\">\n        {item.firstRespondedAt ? (\n          <span title={dateTime(item.firstRespondedAt)}>\n            {shortDue(item.firstRespondedAt)}\n          </span>\n        ) : (\n          <span className={styles.muted}>Not yet</span>\n        )}\n      </Row>\n      <Row label=\"Reply due\">\n        <Sla due={item.firstResponseDueAt} doneAt={item.firstRespondedAt} />\n      </Row>\n      <Row label=\"Resolve due\">\n        <Sla\n          due={item.resolutionDueAt}\n          doneAt={item.resolvedAt ?? item.closedAt}\n        />\n      </Row>\n    </dl>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowUp,
+  Archive,
+  Copy,
+  PanelRight
+} from "lucide-react";
+import { Button, Tooltip, useToast } from "@withpotter/ui-kit";
+import { CaseRowMenu } from "../case-row-menu";
+import { dateTime } from "../support-options";
+import { age } from "../support-trend";
+import { useCloseCase } from "../use-close-case";
+import { channelLabel, workspaceOf } from "./case-facts";
+import styles from "./conversation.module.css";
+function ConversationHeader({
+  item,
+  me,
+  canManage,
+  onBack,
+  backLabel,
+  onStep,
+  detailsOpen,
+  onToggleDetails
+}) {
+  const { toast } = useToast();
+  const closer = useCloseCase();
+  const copy = () => void navigator.clipboard?.writeText(item.reference).then(() => toast({ title: `Copied ${item.reference}` }));
+  return /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+    /* @__PURE__ */ jsx(Tooltip, { label: `${backLabel} (Esc)`, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "icon",
+        variant: "ghost",
+        "aria-label": backLabel,
+        onClick: onBack,
+        children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.titleBlock, children: [
+      /* @__PURE__ */ jsx("h2", { className: styles.subject, title: item.subject, children: item.subject }),
+      /* @__PURE__ */ jsxs("p", { className: styles.meta, children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: styles.refButton, onClick: copy, children: [
+          item.reference,
+          /* @__PURE__ */ jsx(Copy, { className: "size-4", "aria-label": "Copy reference" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: styles.metaItem,
+            title: `${channelLabel(item)} \xB7 ${workspaceOf(item)}`,
+            children: [
+              channelLabel(item),
+              " \xB7 ",
+              workspaceOf(item)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("time", { dateTime: item.createdAt, title: dateTime(item.createdAt), children: [
+          age(item.createdAt),
+          " ago"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
+      /* @__PURE__ */ jsx(Tooltip, { label: "Previous case (K)", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          "aria-label": "Previous case",
+          "aria-keyshortcuts": "K ArrowUp",
+          onClick: () => onStep(-1),
+          children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Tooltip, { label: "Next case (J)", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          "aria-label": "Next case",
+          "aria-keyshortcuts": "J ArrowDown",
+          onClick: () => onStep(1),
+          children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        CaseRowMenu,
+        {
+          row: item,
+          me,
+          canManage,
+          onClose: () => void closer.close(item)
+        }
+      ),
+      canManage && item.status !== "closed" && /* @__PURE__ */ jsx(Tooltip, { label: "Close case", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          "aria-label": "Close case",
+          loading: closer.isPending,
+          onClick: () => void closer.close(item),
+          children: /* @__PURE__ */ jsx(Archive, { className: "size-4" })
+        }
+      ) }),
+      onToggleDetails && /* @__PURE__ */ jsx(Tooltip, { label: detailsOpen ? "Hide details" : "Show details", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: detailsOpen ? "secondary" : "ghost",
+          "aria-label": "Case details",
+          "aria-expanded": detailsOpen,
+          "aria-controls": "case-details",
+          onClick: onToggleDetails,
+          children: /* @__PURE__ */ jsx(PanelRight, { className: "size-4" })
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  ConversationHeader
+};
+//# sourceMappingURL=conversation-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/conversation-header.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowUp,\n  Archive,\n  Copy,\n  PanelRight,\n} from 'lucide-react';\nimport { Button, Tooltip, useToast } from '@withpotter/ui-kit';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { CaseRowMenu } from '../case-row-menu';\nimport { dateTime } from '../support-options';\nimport { age } from '../support-trend';\nimport { useCloseCase } from '../use-close-case';\nimport { channelLabel, workspaceOf } from './case-facts';\nimport styles from './conversation.module.css';\n\n/**\n * Subject, reference (copies), channel and workspace, age; then moving\n * between cases, the case's own menu, Close, and the details toggle.\n */\nexport function ConversationHeader({\n  item,\n  me,\n  canManage,\n  onBack,\n  backLabel,\n  onStep,\n  detailsOpen,\n  onToggleDetails,\n}: {\n  item: PlatformServiceCase;\n  me: string | undefined;\n  canManage: boolean;\n  onBack: () => void;\n  backLabel: string;\n  onStep: (step: 1 | -1) => void;\n  detailsOpen: boolean;\n  onToggleDetails: (() => void) | null;\n}) {\n  const { toast } = useToast();\n  const closer = useCloseCase();\n  const copy = () =>\n    void navigator.clipboard\n      ?.writeText(item.reference)\n      .then(() => toast({ title: `Copied ${item.reference}` }));\n\n  return (\n    <header className={styles.header}>\n      <Tooltip label={`${backLabel} (Esc)`}>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          aria-label={backLabel}\n          onClick={onBack}\n        >\n          <ArrowLeft className=\"size-4\" />\n        </Button>\n      </Tooltip>\n      <div className={styles.titleBlock}>\n        <h2 className={styles.subject} title={item.subject}>\n          {item.subject}\n        </h2>\n        <p className={styles.meta}>\n          <button type=\"button\" className={styles.refButton} onClick={copy}>\n            {item.reference}\n            <Copy className=\"size-4\" aria-label=\"Copy reference\" />\n          </button>\n          <span\n            className={styles.metaItem}\n            title={`${channelLabel(item)} · ${workspaceOf(item)}`}\n          >\n            {channelLabel(item)} · {workspaceOf(item)}\n          </span>\n          <time dateTime={item.createdAt} title={dateTime(item.createdAt)}>\n            {age(item.createdAt)} ago\n          </time>\n        </p>\n      </div>\n      <div className={styles.headerActions}>\n        <Tooltip label=\"Previous case (K)\">\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            aria-label=\"Previous case\"\n            aria-keyshortcuts=\"K ArrowUp\"\n            onClick={() => onStep(-1)}\n          >\n            <ArrowUp className=\"size-4\" />\n          </Button>\n        </Tooltip>\n        <Tooltip label=\"Next case (J)\">\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            aria-label=\"Next case\"\n            aria-keyshortcuts=\"J ArrowDown\"\n            onClick={() => onStep(1)}\n          >\n            <ArrowDown className=\"size-4\" />\n          </Button>\n        </Tooltip>\n        <CaseRowMenu\n          row={item}\n          me={me}\n          canManage={canManage}\n          onClose={() => void closer.close(item)}\n        />\n        {canManage && item.status !== 'closed' && (\n          <Tooltip label=\"Close case\">\n            <Button\n              size=\"icon\"\n              variant=\"ghost\"\n              aria-label=\"Close case\"\n              loading={closer.isPending}\n              onClick={() => void closer.close(item)}\n            >\n              <Archive className=\"size-4\" />\n            </Button>\n          </Tooltip>\n        )}\n        {onToggleDetails && (\n          <Tooltip label={detailsOpen ? 'Hide details' : 'Show details'}>\n            <Button\n              size=\"icon\"\n              variant={detailsOpen ? 'secondary' : 'ghost'}\n              aria-label=\"Case details\"\n              aria-expanded={detailsOpen}\n              aria-controls=\"case-details\"\n              onClick={onToggleDetails}\n            >\n              <PanelRight className=\"size-4\" />\n            </Button>\n          </Tooltip>\n        )}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AA0DU,cAQA,YARA;AAxDV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,SAAS,gBAAgB;AAE1C,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,OAAO,YAAY;AAMZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,SAAS,aAAa;AAC5B,QAAM,OAAO,MACX,KAAK,UAAU,WACX,UAAU,KAAK,SAAS,EACzB,KAAK,MAAM,MAAM,EAAE,OAAO,UAAU,KAAK,SAAS,GAAG,CAAC,CAAC;AAE5D,SACE,qBAAC,YAAO,WAAW,OAAO,QACxB;AAAA,wBAAC,WAAQ,OAAO,GAAG,SAAS,UAC1B;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,cAAY;AAAA,QACZ,SAAS;AAAA,QAET,8BAAC,aAAU,WAAU,UAAS;AAAA;AAAA,IAChC,GACF;AAAA,IACA,qBAAC,SAAI,WAAW,OAAO,YACrB;AAAA,0BAAC,QAAG,WAAW,OAAO,SAAS,OAAO,KAAK,SACxC,eAAK,SACR;AAAA,MACA,qBAAC,OAAE,WAAW,OAAO,MACnB;AAAA,6BAAC,YAAO,MAAK,UAAS,WAAW,OAAO,WAAW,SAAS,MACzD;AAAA,eAAK;AAAA,UACN,oBAAC,QAAK,WAAU,UAAS,cAAW,kBAAiB;AAAA,WACvD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OAAO,GAAG,aAAa,IAAI,CAAC,SAAM,YAAY,IAAI,CAAC;AAAA,YAElD;AAAA,2BAAa,IAAI;AAAA,cAAE;AAAA,cAAI,YAAY,IAAI;AAAA;AAAA;AAAA,QAC1C;AAAA,QACA,qBAAC,UAAK,UAAU,KAAK,WAAW,OAAO,SAAS,KAAK,SAAS,GAC3D;AAAA,cAAI,KAAK,SAAS;AAAA,UAAE;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAW,OAAO,eACrB;AAAA,0BAAC,WAAQ,OAAM,qBACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAW;AAAA,UACX,qBAAkB;AAAA,UAClB,SAAS,MAAM,OAAO,EAAE;AAAA,UAExB,8BAAC,WAAQ,WAAU,UAAS;AAAA;AAAA,MAC9B,GACF;AAAA,MACA,oBAAC,WAAQ,OAAM,iBACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAW;AAAA,UACX,qBAAkB;AAAA,UAClB,SAAS,MAAM,OAAO,CAAC;AAAA,UAEvB,8BAAC,aAAU,WAAU,UAAS;AAAA;AAAA,MAChC,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,SAAS,MAAM,KAAK,OAAO,MAAM,IAAI;AAAA;AAAA,MACvC;AAAA,MACC,aAAa,KAAK,WAAW,YAC5B,oBAAC,WAAQ,OAAM,cACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAW;AAAA,UACX,SAAS,OAAO;AAAA,UAChB,SAAS,MAAM,KAAK,OAAO,MAAM,IAAI;AAAA,UAErC,8BAAC,WAAQ,WAAU,UAAS;AAAA;AAAA,MAC9B,GACF;AAAA,MAED,mBACC,oBAAC,WAAQ,OAAO,cAAc,iBAAiB,gBAC7C;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,cAAc,cAAc;AAAA,UACrC,cAAW;AAAA,UACX,iBAAe;AAAA,UACf,iBAAc;AAAA,UACd,SAAS;AAAA,UAET,8BAAC,cAAW,WAAU,UAAS;AAAA;AAAA,MACjC,GACF;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Button } from "@withpotter/ui-kit";
+import { EmptyState, Skeleton } from "../../_ui";
+import { Composer } from "../support-composer";
+import { SupportCaseThread } from "../support-case-thread";
+import { useCaseActivity } from "../use-case-activity";
+import { ActionBar } from "./action-bar";
+import { ConversationHeader } from "./conversation-header";
+import { StatusBanner } from "./status-banner";
+import styles from "./conversation.module.css";
+function ConversationPane({
+  caseId,
+  detail,
+  me,
+  canManage,
+  composer,
+  onCompose,
+  onCollapse,
+  header
+}) {
+  const item = detail.data;
+  const activity = useCaseActivity(caseId);
+  const scrollRef = useRef(null);
+  const size = (item?.messages?.length ?? 0) + activity.length;
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [caseId, size, item?.status]);
+  const locked = !item ? null : !canManage ? "You can read this case. Replying needs the Manage support permission." : item.status === "closed" ? "This case is closed. Reopen it from Status to write again." : null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: styles.pane,
+      "aria-label": "Case conversation",
+      "aria-busy": detail.isLoading,
+      children: [
+        item && /* @__PURE__ */ jsx(
+          ConversationHeader,
+          {
+            item,
+            me,
+            canManage,
+            ...header
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: styles.scroll,
+            tabIndex: 0,
+            "aria-label": "Messages",
+            children: detail.isLoading ? /* @__PURE__ */ jsxs("div", { className: styles.loading, children: [
+              /* @__PURE__ */ jsx(Skeleton, { height: 56 }),
+              /* @__PURE__ */ jsx(Skeleton, { height: 120 }),
+              /* @__PURE__ */ jsx(Skeleton, { height: 96 })
+            ] }) : detail.isError ? /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                tone: "error",
+                title: "This case could not be loaded",
+                description: detail.error?.message,
+                action: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => void detail.refetch(), children: "Try again" })
+              }
+            ) : item ? /* @__PURE__ */ jsxs("div", { className: styles.threadWrap, children: [
+              /* @__PURE__ */ jsx(SupportCaseThread, { item, me, activity }),
+              /* @__PURE__ */ jsx(StatusBanner, { item })
+            ] }) : null
+          }
+        ),
+        item && /* @__PURE__ */ jsx("div", { className: styles.dock, "data-open": composer ? true : void 0, children: composer && !locked ? /* @__PURE__ */ jsx(
+          Composer,
+          {
+            item,
+            mode: composer.mode,
+            intent: composer.intent,
+            onCollapse
+          },
+          composer.session
+        ) : /* @__PURE__ */ jsx(ActionBar, { onOpen: onCompose, disabledReason: locked }) })
+      ]
+    }
+  );
+}
+export {
+  ConversationPane
+};
+//# sourceMappingURL=conversation-pane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/conversation-pane.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { Button } from '@withpotter/ui-kit';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { EmptyState, Skeleton } from '../../_ui';\nimport { Composer, type ComposerIntent } from '../support-composer';\nimport { SupportCaseThread } from '../support-case-thread';\nimport { useCaseActivity } from '../use-case-activity';\nimport { ActionBar, type ComposerOpen } from './action-bar';\nimport { ConversationHeader } from './conversation-header';\nimport { StatusBanner } from './status-banner';\nimport styles from './conversation.module.css';\n\nexport interface ComposerState {\n  mode: 'reply' | 'note';\n  intent: ComposerIntent;\n  session: number;\n}\n\ntype HeaderProps = Omit<\n  Parameters<typeof ConversationHeader>[0],\n  'item' | 'me' | 'canManage'\n>;\n\n/**\n * The centre pane: header, the thread scrolling on its own with the status\n * banner at its foot, and the action bar or composer docked at the bottom.\n */\nexport function ConversationPane({\n  caseId,\n  detail,\n  me,\n  canManage,\n  composer,\n  onCompose,\n  onCollapse,\n  header,\n}: {\n  caseId: string;\n  detail: {\n    data?: PlatformServiceCase;\n    isLoading: boolean;\n    isError: boolean;\n    error: Error | null;\n    refetch: () => unknown;\n  };\n  me: string | undefined;\n  canManage: boolean;\n  composer: ComposerState | null;\n  onCompose: ComposerOpen;\n  onCollapse: () => void;\n  header: HeaderProps;\n}) {\n  const item = detail.data;\n  const activity = useCaseActivity(caseId);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const size = (item?.messages?.length ?? 0) + activity.length;\n  // Open at the latest message, and follow the thread as it grows.\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el) el.scrollTop = el.scrollHeight;\n  }, [caseId, size, item?.status]);\n\n  const locked = !item\n    ? null\n    : !canManage\n      ? 'You can read this case. Replying needs the Manage support permission.'\n      : item.status === 'closed'\n        ? 'This case is closed. Reopen it from Status to write again.'\n        : null;\n\n  return (\n    <section\n      className={styles.pane}\n      aria-label=\"Case conversation\"\n      aria-busy={detail.isLoading}\n    >\n      {item && (\n        <ConversationHeader\n          item={item}\n          me={me}\n          canManage={canManage}\n          {...header}\n        />\n      )}\n      <div\n        ref={scrollRef}\n        className={styles.scroll}\n        tabIndex={0}\n        aria-label=\"Messages\"\n      >\n        {detail.isLoading ? (\n          <div className={styles.loading}>\n            <Skeleton height={56} />\n            <Skeleton height={120} />\n            <Skeleton height={96} />\n          </div>\n        ) : detail.isError ? (\n          <EmptyState\n            tone=\"error\"\n            title=\"This case could not be loaded\"\n            description={detail.error?.message}\n            action={\n              <Button variant=\"secondary\" onClick={() => void detail.refetch()}>\n                Try again\n              </Button>\n            }\n          />\n        ) : item ? (\n          <div className={styles.threadWrap}>\n            <SupportCaseThread item={item} me={me} activity={activity} />\n            <StatusBanner item={item} />\n          </div>\n        ) : null}\n      </div>\n      {item && (\n        <div className={styles.dock} data-open={composer ? true : undefined}>\n          {composer && !locked ? (\n            <Composer\n              key={composer.session}\n              item={item}\n              mode={composer.mode}\n              intent={composer.intent}\n              onCollapse={onCollapse}\n            />\n          ) : (\n            <ActionBar onOpen={onCompose} disabledReason={locked} />\n          )}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";AA+EQ,cAcE,YAdF;AA7ER,SAAS,WAAW,cAAc;AAClC,SAAS,cAAc;AAEvB,SAAS,YAAY,gBAAgB;AACrC,SAAS,gBAAqC;AAC9C,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,iBAAoC;AAC7C,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AAiBZ,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAeG;AACD,QAAM,OAAO,OAAO;AACpB,QAAM,WAAW,gBAAgB,MAAM;AACvC,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,QAAQ,MAAM,UAAU,UAAU,KAAK,SAAS;AAEtD,YAAU,MAAM;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,IAAG,YAAY,GAAG;AAAA,EAC5B,GAAG,CAAC,QAAQ,MAAM,MAAM,MAAM,CAAC;AAE/B,QAAM,SAAS,CAAC,OACZ,OACA,CAAC,YACC,0EACA,KAAK,WAAW,WACd,+DACA;AAER,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,cAAW;AAAA,MACX,aAAW,OAAO;AAAA,MAEjB;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA;AAAA,QACN;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,OAAO;AAAA,YAClB,UAAU;AAAA,YACV,cAAW;AAAA,YAEV,iBAAO,YACN,qBAAC,SAAI,WAAW,OAAO,SACrB;AAAA,kCAAC,YAAS,QAAQ,IAAI;AAAA,cACtB,oBAAC,YAAS,QAAQ,KAAK;AAAA,cACvB,oBAAC,YAAS,QAAQ,IAAI;AAAA,eACxB,IACE,OAAO,UACT;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,aAAa,OAAO,OAAO;AAAA,gBAC3B,QACE,oBAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,KAAK,OAAO,QAAQ,GAAG,uBAElE;AAAA;AAAA,YAEJ,IACE,OACF,qBAAC,SAAI,WAAW,OAAO,YACrB;AAAA,kCAAC,qBAAkB,MAAY,IAAQ,UAAoB;AAAA,cAC3D,oBAAC,gBAAa,MAAY;AAAA,eAC5B,IACE;AAAA;AAAA,QACN;AAAA,QACC,QACC,oBAAC,SAAI,WAAW,OAAO,MAAM,aAAW,WAAW,OAAO,QACvD,sBAAY,CAAC,SACZ;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA,MAAM,SAAS;AAAA,YACf,QAAQ,SAAS;AAAA,YACjB;AAAA;AAAA,UAJK,SAAS;AAAA,QAKhB,IAEA,oBAAC,aAAU,QAAQ,WAAW,gBAAgB,QAAQ,GAE1D;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}