@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/feedback/prompt-insights.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/feedback/prompt-insights.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { Button, TableShell, Th } from '@withpotter/ui-kit';\nimport { Select } from '@withpotter/ui-kit/select';\nimport {\n  adminFeedbackPromptsApi,\n  type AdminFeedbackPrompt,\n} from '@withpotter/lib/admin-feedback-api';\nimport { EmptyState, Skeleton } from '../_ui';\nimport styles from './prompt-operations.module.css';\n\nconst PERIODS = [\n  { value: '30', label: 'Last 30 days' },\n  { value: '90', label: 'Last 90 days' },\n  { value: '365', label: 'Last year' },\n];\n\nconst percent = (value: number | null) =>\n  value === null ? '–' : `${Math.round(value * 100)}%`;\n\n/** Delivery and response health for one prompt. No merchant identities. */\nexport function PromptInsights({ prompt }: { prompt: AdminFeedbackPrompt }) {\n  const [days, setDays] = useState('90');\n  const insights = useQuery({\n    queryKey: [\n      'platform-admin',\n      'feedback',\n      'prompts',\n      prompt.id,\n      'insights',\n      days,\n    ],\n    queryFn: () => adminFeedbackPromptsApi.insights(prompt.id, Number(days)),\n  });\n  const data = insights.data;\n  const isNps = prompt.kind === 'nps';\n\n  return (\n    <section\n      className=\"adm-panel\"\n      aria-labelledby=\"insights-heading\"\n      aria-busy={insights.isLoading || undefined}\n    >\n      <div className={styles.head}>\n        <div>\n          <h3 id=\"insights-heading\" className={styles.title}>\n            Prompt insights\n          </h3>\n          <p className={styles.caption}>\n            Aggregate delivery and response health. No merchant identities.\n          </p>\n        </div>\n        <div className={styles.period}>\n          <Select\n            size=\"sm\"\n            triggerClassName=\"h-7\"\n            ariaLabel=\"Period\"\n            value={days}\n            onChange={setDays}\n            options={PERIODS}\n          />\n        </div>\n      </div>\n\n      {insights.isLoading && (\n        <div aria-hidden>\n          <Skeleton height={136} />\n        </div>\n      )}\n      {insights.isError && (\n        <EmptyState\n          tone=\"error\"\n          title=\"Prompt insights could not be loaded\"\n          action={\n            <Button variant=\"secondary\" onClick={() => void insights.refetch()}>\n              Try again\n            </Button>\n          }\n        />\n      )}\n      {data && (\n        <>\n          <dl className={styles.figures}>\n            {(\n              [\n                ['Audience', data.audienceSize.toLocaleString()],\n                ['Reached', data.reached.toLocaleString()],\n                ['Shown', data.shown.toLocaleString()],\n                ['Answered', data.answered.toLocaleString()],\n                ['Dismissed', data.dismissed.toLocaleString()],\n                ['Waiting', data.waiting.toLocaleString()],\n                ['Response rate', percent(data.responseRate)],\n                ['Dismissal rate', percent(data.dismissalRate)],\n                [\n                  isNps ? 'NPS' : 'Average score',\n                  isNps ? (data.nps ?? '–') : (data.average?.toFixed(1) ?? '–'),\n                ],\n                ['With context', data.withContext.toLocaleString()],\n              ] as const\n            ).map(([label, value]) => (\n              <div key={label} className={styles.figure}>\n                <dt>{label}</dt>\n                <dd>{value}</dd>\n              </div>\n            ))}\n          </dl>\n\n          <h4 className={styles.subTitle}>Recent response trend</h4>\n          {data.trend.length ? (\n            <div\n              className={styles.trend}\n              tabIndex={0}\n              aria-label=\"Recent response trend\"\n            >\n              <TableShell\n                bare\n                minWidth={320}\n                density=\"compact\"\n                head={\n                  <tr>\n                    <Th>Date</Th>\n                    <Th align=\"right\">Answers</Th>\n                    <Th align=\"right\">Average</Th>\n                  </tr>\n                }\n              >\n                {data.trend.slice(-14).map((row) => (\n                  <tr key={row.date}>\n                    <td className={styles.date}>{row.date}</td>\n                    <td className={styles.num}>{row.answered}</td>\n                    <td className={styles.num}>\n                      {row.average?.toFixed(1) ?? '–'}\n                    </td>\n                  </tr>\n                ))}\n              </TableShell>\n            </div>\n          ) : (\n            <p className={styles.caption}>No responses in this period.</p>\n          )}\n        </>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/feedback/prompt-operations.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button, useConfirm } from "@withpotter/ui-kit";
+import {
+  adminFeedbackPromptsApi
+} from "@withpotter/lib/admin-feedback-api";
+import { PromptInsights } from "./prompt-insights";
+import styles from "./prompt-operations.module.css";
+import { StatusPill } from "../audit/status-pill";
+const commandFor = (status) => {
+  if (status === "draft") return [{ command: "publish", label: "Publish" }];
+  if (status === "paused")
+    return [
+      { command: "publish", label: "Resume" },
+      { command: "complete", label: "Complete" }
+    ];
+  if (status === "active" || status === "scheduled")
+    return [
+      { command: "pause", label: "Pause" },
+      { command: "complete", label: "Complete" }
+    ];
+  return [];
+};
+function PromptOperations({ prompt }) {
+  const queryClient = useQueryClient();
+  const confirm = useConfirm();
+  const [error, setError] = useState("");
+  const transition = useMutation({
+    mutationFn: (command) => adminFeedbackPromptsApi.command(prompt.id, command),
+    onSuccess: (updated) => {
+      setError("");
+      queryClient.setQueryData(
+        ["platform-admin", "feedback", "prompts", updated.id],
+        updated
+      );
+      void queryClient.invalidateQueries({
+        queryKey: ["platform-admin", "feedback", "prompts"]
+      });
+    },
+    onError: (cause) => setError(
+      cause instanceof Error ? cause.message : "The prompt status could not be changed."
+    )
+  });
+  const run = async (command) => {
+    if (command === "complete" && !await confirm({
+      title: "Complete this prompt?",
+      description: "Completed prompts cannot be published again.",
+      confirmLabel: "Complete prompt",
+      tone: "danger"
+    }))
+      return;
+    transition.mutate(command);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.stack, children: [
+    /* @__PURE__ */ jsxs("section", { className: "adm-panel", "aria-labelledby": "operations-heading", children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.head, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.titleRow, children: [
+            /* @__PURE__ */ jsx("h3", { id: "operations-heading", className: styles.title, children: "Lifecycle" }),
+            /* @__PURE__ */ jsx(StatusPill, { status: prompt.status })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: styles.caption, children: "Publishing makes eligible merchants able to receive this prompt." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.commands, children: [
+          commandFor(prompt.status).map(({ command, label }) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: command === "complete" ? "danger" : "primary",
+              loading: transition.isPending,
+              onClick: () => void run(command),
+              children: label
+            },
+            command
+          )),
+          prompt.status === "completed" && /* @__PURE__ */ jsx("span", { className: styles.caption, children: "No further transitions are available." })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { role: "alert", className: styles.error, children: error })
+    ] }),
+    /* @__PURE__ */ jsx(PromptInsights, { prompt })
+  ] });
+}
+export {
+  PromptOperations
+};
+//# sourceMappingURL=prompt-operations.js.map

package/dist/admin/feedback/prompt-operations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/feedback/prompt-operations.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useMutation, useQueryClient } from '@tanstack/react-query';\nimport { Button, useConfirm } from '@withpotter/ui-kit';\nimport {\n  adminFeedbackPromptsApi,\n  type AdminFeedbackPrompt,\n  type FeedbackPromptCommand,\n} from '@withpotter/lib/admin-feedback-api';\nimport { PromptInsights } from './prompt-insights';\nimport styles from './prompt-operations.module.css';\nimport { StatusPill } from '../audit/status-pill';\n\nconst commandFor = (\n  status: AdminFeedbackPrompt['status'],\n): Array<{ command: FeedbackPromptCommand; label: string }> => {\n  if (status === 'draft') return [{ command: 'publish', label: 'Publish' }];\n  if (status === 'paused')\n    return [\n      { command: 'publish', label: 'Resume' },\n      { command: 'complete', label: 'Complete' },\n    ];\n  if (status === 'active' || status === 'scheduled')\n    return [\n      { command: 'pause', label: 'Pause' },\n      { command: 'complete', label: 'Complete' },\n    ];\n  return [];\n};\n\n/** Lifecycle controls for a saved prompt, then how it is performing. */\nexport function PromptOperations({ prompt }: { prompt: AdminFeedbackPrompt }) {\n  const queryClient = useQueryClient();\n  const confirm = useConfirm();\n  const [error, setError] = useState('');\n  const transition = useMutation({\n    mutationFn: (command: FeedbackPromptCommand) =>\n      adminFeedbackPromptsApi.command(prompt.id, command),\n    onSuccess: (updated) => {\n      setError('');\n      queryClient.setQueryData(\n        ['platform-admin', 'feedback', 'prompts', updated.id],\n        updated,\n      );\n      void queryClient.invalidateQueries({\n        queryKey: ['platform-admin', 'feedback', 'prompts'],\n      });\n    },\n    onError: (cause) =>\n      setError(\n        cause instanceof Error\n          ? cause.message\n          : 'The prompt status could not be changed.',\n      ),\n  });\n\n  const run = async (command: FeedbackPromptCommand) => {\n    if (\n      command === 'complete' &&\n      !(await confirm({\n        title: 'Complete this prompt?',\n        description: 'Completed prompts cannot be published again.',\n        confirmLabel: 'Complete prompt',\n        tone: 'danger',\n      }))\n    )\n      return;\n    transition.mutate(command);\n  };\n\n  return (\n    <div className={styles.stack}>\n      <section className=\"adm-panel\" aria-labelledby=\"operations-heading\">\n        <div className={styles.head}>\n          <div>\n            <div className={styles.titleRow}>\n              <h3 id=\"operations-heading\" className={styles.title}>\n                Lifecycle\n              </h3>\n              <StatusPill status={prompt.status} />\n            </div>\n            <p className={styles.caption}>\n              Publishing makes eligible merchants able to receive this prompt.\n            </p>\n          </div>\n          <div className={styles.commands}>\n            {commandFor(prompt.status).map(({ command, label }) => (\n              <Button\n                key={command}\n                type=\"button\"\n                variant={command === 'complete' ? 'danger' : 'primary'}\n                loading={transition.isPending}\n                onClick={() => void run(command)}\n              >\n                {label}\n              </Button>\n            ))}\n            {prompt.status === 'completed' && (\n              <span className={styles.caption}>\n                No further transitions are available.\n              </span>\n            )}\n          </div>\n        </div>\n        {error && (\n          <p role=\"alert\" className={styles.error}>\n            {error}\n          </p>\n        )}\n      </section>\n      <PromptInsights prompt={prompt} />\n    </div>\n  );\n}\n"],"mappings":";AA4EY,SACE,KADF;AA1EZ,SAAS,gBAAgB;AACzB,SAAS,aAAa,sBAAsB;AAC5C,SAAS,QAAQ,kBAAkB;AACnC;AAAA,EACE;AAAA,OAGK;AACP,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AACnB,SAAS,kBAAkB;AAE3B,MAAM,aAAa,CACjB,WAC6D;AAC7D,MAAI,WAAW,QAAS,QAAO,CAAC,EAAE,SAAS,WAAW,OAAO,UAAU,CAAC;AACxE,MAAI,WAAW;AACb,WAAO;AAAA,MACL,EAAE,SAAS,WAAW,OAAO,SAAS;AAAA,MACtC,EAAE,SAAS,YAAY,OAAO,WAAW;AAAA,IAC3C;AACF,MAAI,WAAW,YAAY,WAAW;AACpC,WAAO;AAAA,MACL,EAAE,SAAS,SAAS,OAAO,QAAQ;AAAA,MACnC,EAAE,SAAS,YAAY,OAAO,WAAW;AAAA,IAC3C;AACF,SAAO,CAAC;AACV;AAGO,SAAS,iBAAiB,EAAE,OAAO,GAAoC;AAC5E,QAAM,cAAc,eAAe;AACnC,QAAM,UAAU,WAAW;AAC3B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,aAAa,YAAY;AAAA,IAC7B,YAAY,CAAC,YACX,wBAAwB,QAAQ,OAAO,IAAI,OAAO;AAAA,IACpD,WAAW,CAAC,YAAY;AACtB,eAAS,EAAE;AACX,kBAAY;AAAA,QACV,CAAC,kBAAkB,YAAY,WAAW,QAAQ,EAAE;AAAA,QACpD;AAAA,MACF;AACA,WAAK,YAAY,kBAAkB;AAAA,QACjC,UAAU,CAAC,kBAAkB,YAAY,SAAS;AAAA,MACpD,CAAC;AAAA,IACH;AAAA,IACA,SAAS,CAAC,UACR;AAAA,MACE,iBAAiB,QACb,MAAM,UACN;AAAA,IACN;AAAA,EACJ,CAAC;AAED,QAAM,MAAM,OAAO,YAAmC;AACpD,QACE,YAAY,cACZ,CAAE,MAAM,QAAQ;AAAA,MACd,OAAO;AAAA,MACP,aAAa;AAAA,MACb,cAAc;AAAA,MACd,MAAM;AAAA,IACR,CAAC;AAED;AACF,eAAW,OAAO,OAAO;AAAA,EAC3B;AAEA,SACE,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA,yBAAC,aAAQ,WAAU,aAAY,mBAAgB,sBAC7C;AAAA,2BAAC,SAAI,WAAW,OAAO,MACrB;AAAA,6BAAC,SACC;AAAA,+BAAC,SAAI,WAAW,OAAO,UACrB;AAAA,gCAAC,QAAG,IAAG,sBAAqB,WAAW,OAAO,OAAO,uBAErD;AAAA,YACA,oBAAC,cAAW,QAAQ,OAAO,QAAQ;AAAA,aACrC;AAAA,UACA,oBAAC,OAAE,WAAW,OAAO,SAAS,8EAE9B;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAW,OAAO,UACpB;AAAA,qBAAW,OAAO,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,MAAM,MAC/C;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAS,YAAY,aAAa,WAAW;AAAA,cAC7C,SAAS,WAAW;AAAA,cACpB,SAAS,MAAM,KAAK,IAAI,OAAO;AAAA,cAE9B;AAAA;AAAA,YANI;AAAA,UAOP,CACD;AAAA,UACA,OAAO,WAAW,eACjB,oBAAC,UAAK,WAAW,OAAO,SAAS,mDAEjC;AAAA,WAEJ;AAAA,SACF;AAAA,MACC,SACC,oBAAC,OAAE,MAAK,SAAQ,WAAW,OAAO,OAC/B,iBACH;AAAA,OAEJ;AAAA,IACA,oBAAC,kBAAe,QAAgB;AAAA,KAClC;AAEJ;","names":[]}

package/dist/admin/feedback/prompt-operations.module.css

@@ -0,0 +1,128 @@
+/* Prompt lifecycle and insights panels under the builder. */
+
+.stack {
+  display: grid;
+  gap: 16px;
+}
+
+.head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.head:last-child {
+  margin-bottom: 0;
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.caption {
+  margin: 4px 0 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.commands {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.period {
+  width: 176px;
+  max-width: 100%;
+}
+
+.error {
+  margin: 12px 0 0;
+  color: var(--error);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.figures {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin: 0;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
+}
+
+.figure {
+  display: grid;
+  gap: 4px;
+  padding: 12px 16px;
+  border-right: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.figure dt {
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.figure dd {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 18px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 24px;
+}
+
+.subTitle {
+  margin: 24px 0 12px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.trend {
+  max-height: 320px;
+  overflow: auto;
+  border-radius: 10px;
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
+}
+
+.trend thead th {
+  background: var(--bg-base);
+}
+
+.date {
+  font-variant-numeric: tabular-nums;
+}
+
+.num {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+@media (max-width: 719px) {
+  .figures {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/dist/admin/feedback/prompt-preview.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Mic, X } from "lucide-react";
+import { RatingInput, ThumbVote } from "@withpotter/ui-kit";
+import { ADMIN_NAME } from "../_shell/admin-brand";
+import styles from "./prompt-preview.module.css";
+const ENDS = {
+  nps: ["Not likely", "Very likely"],
+  csat: ["Unhappy", "Delighted"],
+  ces: ["Very easy", "Very hard"]
+};
+function PromptPreview({ draft }) {
+  const [picked, setPicked] = useState(null);
+  const [thumb, setThumb] = useState(null);
+  const count = Math.min(11, Math.max(2, draft.scaleMax - draft.scaleMin + 1));
+  const answered = draft.kind === "thumb" ? thumb !== null : picked !== null;
+  return /* @__PURE__ */ jsxs("aside", { className: styles.frame, "aria-label": "Merchant preview", children: [
+    /* @__PURE__ */ jsx("p", { className: styles.eyebrow, children: "What merchants see" }),
+    /* @__PURE__ */ jsxs("div", { className: styles.card, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.cardHead, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.brand, children: ADMIN_NAME }),
+        /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true })
+      ] }),
+      /* @__PURE__ */ jsx("h3", { className: styles.question, children: draft.question || "Your question appears here" }),
+      draft.kind === "thumb" ? /* @__PURE__ */ jsx(ThumbVote, { value: thumb, onVote: setThumb }) : draft.kind === "star" ? /* @__PURE__ */ jsx(
+        RatingInput,
+        {
+          label: "Your rating",
+          value: picked,
+          onChange: setPicked
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.scale,
+          style: { "--count": count },
+          role: "group",
+          "aria-label": `Score from ${draft.scaleMin} to ${draft.scaleMax}`,
+          children: Array.from({ length: count }, (_, index) => {
+            const value = draft.scaleMin + index;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.step,
+                "aria-pressed": picked === value,
+                onClick: () => setPicked(value),
+                children: value
+              },
+              value
+            );
+          })
+        }
+      ),
+      ENDS[draft.kind] && /* @__PURE__ */ jsx("div", { className: styles.ends, "aria-hidden": true, children: ENDS[draft.kind].map((end) => /* @__PURE__ */ jsx("span", { children: end }, end)) }),
+      answered && (draft.allowComment || draft.allowVoice) && /* @__PURE__ */ jsxs("div", { className: styles.followUp, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.followText, children: draft.followUp || "Anything you would like to add?" }),
+        /* @__PURE__ */ jsxs("div", { className: styles.fakeInput, children: [
+          draft.allowComment ? "Type a sentence\u2026" : "Record a voice note",
+          draft.allowVoice && /* @__PURE__ */ jsx(Mic, { className: "size-4", "aria-hidden": true })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: styles.caption, children: answered ? "This is what follows a score." : "Pick a score to see what follows." })
+  ] });
+}
+export {
+  PromptPreview
+};
+//# sourceMappingURL=prompt-preview.js.map

package/dist/admin/feedback/prompt-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/feedback/prompt-preview.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type CSSProperties } from 'react';\nimport { Mic, X } from 'lucide-react';\nimport { RatingInput, ThumbVote, type ThumbValue } from '@withpotter/ui-kit';\nimport type { AdminFeedbackPromptInput } from '@withpotter/lib/admin-feedback-api';\nimport { ADMIN_NAME } from '../_shell/admin-brand';\nimport styles from './prompt-preview.module.css';\n\nconst ENDS: Record<string, [string, string]> = {\n  nps: ['Not likely', 'Very likely'],\n  csat: ['Unhappy', 'Delighted'],\n  ces: ['Very easy', 'Very hard'],\n};\n\n/**\n * The prompt as a merchant meets it, redrawn on every keystroke. Try a\n * score and the follow-up opens, the way it will for them. The scale is a\n * single row of equal cells, so 0 to 10 never wraps.\n */\nexport function PromptPreview({ draft }: { draft: AdminFeedbackPromptInput }) {\n  const [picked, setPicked] = useState<number | null>(null);\n  const [thumb, setThumb] = useState<ThumbValue | null>(null);\n  const count = Math.min(11, Math.max(2, draft.scaleMax - draft.scaleMin + 1));\n  const answered = draft.kind === 'thumb' ? thumb !== null : picked !== null;\n\n  return (\n    <aside className={styles.frame} aria-label=\"Merchant preview\">\n      <p className={styles.eyebrow}>What merchants see</p>\n      <div className={styles.card}>\n        <div className={styles.cardHead}>\n          <span className={styles.brand}>{ADMIN_NAME}</span>\n          <X className=\"size-4\" aria-hidden />\n        </div>\n        <h3 className={styles.question}>\n          {draft.question || 'Your question appears here'}\n        </h3>\n        {draft.kind === 'thumb' ? (\n          <ThumbVote value={thumb} onVote={setThumb} />\n        ) : draft.kind === 'star' ? (\n          <RatingInput\n            label=\"Your rating\"\n            value={picked}\n            onChange={setPicked}\n          />\n        ) : (\n          <div\n            className={styles.scale}\n            style={{ '--count': count } as CSSProperties}\n            role=\"group\"\n            aria-label={`Score from ${draft.scaleMin} to ${draft.scaleMax}`}\n          >\n            {Array.from({ length: count }, (_, index) => {\n              const value = draft.scaleMin + index;\n              return (\n                <button\n                  key={value}\n                  type=\"button\"\n                  className={styles.step}\n                  aria-pressed={picked === value}\n                  onClick={() => setPicked(value)}\n                >\n                  {value}\n                </button>\n              );\n            })}\n          </div>\n        )}\n        {ENDS[draft.kind] && (\n          <div className={styles.ends} aria-hidden>\n            {ENDS[draft.kind].map((end) => (\n              <span key={end}>{end}</span>\n            ))}\n          </div>\n        )}\n        {answered && (draft.allowComment || draft.allowVoice) && (\n          <div className={styles.followUp}>\n            <span className={styles.followText}>\n              {draft.followUp || 'Anything you would like to add?'}\n            </span>\n            <div className={styles.fakeInput}>\n              {draft.allowComment ? 'Type a sentence…' : 'Record a voice note'}\n              {draft.allowVoice && <Mic className=\"size-4\" aria-hidden />}\n            </div>\n          </div>\n        )}\n      </div>\n      <p className={styles.caption}>\n        {answered\n          ? 'This is what follows a score.'\n          : 'Pick a score to see what follows.'}\n      </p>\n    </aside>\n  );\n}\n"],"mappings":";AA4BM,cAEE,YAFF;AA1BN,SAAS,gBAAoC;AAC7C,SAAS,KAAK,SAAS;AACvB,SAAS,aAAa,iBAAkC;AAExD,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAEnB,MAAM,OAAyC;AAAA,EAC7C,KAAK,CAAC,cAAc,aAAa;AAAA,EACjC,MAAM,CAAC,WAAW,WAAW;AAAA,EAC7B,KAAK,CAAC,aAAa,WAAW;AAChC;AAOO,SAAS,cAAc,EAAE,MAAM,GAAwC;AAC5E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA4B,IAAI;AAC1D,QAAM,QAAQ,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,WAAW,MAAM,WAAW,CAAC,CAAC;AAC3E,QAAM,WAAW,MAAM,SAAS,UAAU,UAAU,OAAO,WAAW;AAEtE,SACE,qBAAC,WAAM,WAAW,OAAO,OAAO,cAAW,oBACzC;AAAA,wBAAC,OAAE,WAAW,OAAO,SAAS,gCAAkB;AAAA,IAChD,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA,2BAAC,SAAI,WAAW,OAAO,UACrB;AAAA,4BAAC,UAAK,WAAW,OAAO,OAAQ,sBAAW;AAAA,QAC3C,oBAAC,KAAE,WAAU,UAAS,eAAW,MAAC;AAAA,SACpC;AAAA,MACA,oBAAC,QAAG,WAAW,OAAO,UACnB,gBAAM,YAAY,8BACrB;AAAA,MACC,MAAM,SAAS,UACd,oBAAC,aAAU,OAAO,OAAO,QAAQ,UAAU,IACzC,MAAM,SAAS,SACjB;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,UAClB,OAAO,EAAE,WAAW,MAAM;AAAA,UAC1B,MAAK;AAAA,UACL,cAAY,cAAc,MAAM,QAAQ,OAAO,MAAM,QAAQ;AAAA,UAE5D,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UAAU;AAC3C,kBAAM,QAAQ,MAAM,WAAW;AAC/B,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,WAAW,OAAO;AAAA,gBAClB,gBAAc,WAAW;AAAA,gBACzB,SAAS,MAAM,UAAU,KAAK;AAAA,gBAE7B;AAAA;AAAA,cANI;AAAA,YAOP;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA,MAED,KAAK,MAAM,IAAI,KACd,oBAAC,SAAI,WAAW,OAAO,MAAM,eAAW,MACrC,eAAK,MAAM,IAAI,EAAE,IAAI,CAAC,QACrB,oBAAC,UAAgB,iBAAN,GAAU,CACtB,GACH;AAAA,MAED,aAAa,MAAM,gBAAgB,MAAM,eACxC,qBAAC,SAAI,WAAW,OAAO,UACrB;AAAA,4BAAC,UAAK,WAAW,OAAO,YACrB,gBAAM,YAAY,mCACrB;AAAA,QACA,qBAAC,SAAI,WAAW,OAAO,WACpB;AAAA,gBAAM,eAAe,0BAAqB;AAAA,UAC1C,MAAM,cAAc,oBAAC,OAAI,WAAU,UAAS,eAAW,MAAC;AAAA,WAC3D;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,oBAAC,OAAE,WAAW,OAAO,SAClB,qBACG,kCACA,qCACN;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/feedback/prompt-preview.module.css

@@ -0,0 +1,135 @@
+/* The merchant preview: their card on a brand-tinted stage. */
+
+.frame {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--brand-500) 8%, var(--bg-subtle));
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--brand-500) 14%, transparent);
+}
+
+.eyebrow,
+.caption {
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.card {
+  /* Stars in the preview fill with the brand, not the shared amber. */
+  --warning: var(--brand-500);
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 10px;
+  background: var(--bg-base);
+  box-shadow: inset 0 0 0 1px var(--adm-line);
+}
+
+.cardHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--text-tertiary);
+}
+
+.brand {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+
+.question {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 24px;
+  overflow-wrap: anywhere;
+}
+
+/* One row, equal cells: never wraps, whatever the width. */
+.scale {
+  display: grid;
+  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
+  gap: 4px;
+}
+
+.step {
+  height: 32px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background var(--adm-fast);
+}
+
+.step:hover {
+  background: var(--adm-hover);
+}
+
+.step[aria-pressed='true'] {
+  background: var(--brand-500);
+  color: var(--adm-on-accent);
+}
+
+.step:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.ends {
+  display: flex;
+  justify-content: space-between;
+  margin-top: -4px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.followUp {
+  display: grid;
+  gap: 8px;
+  animation: open var(--adm-fast) both;
+}
+
+.followText {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.fakeInput {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
+
+@keyframes open {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .followUp {
+    animation: none;
+  }
+}

package/dist/admin/feedback/prompt-question-fields.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input, Textarea } from "@withpotter/ui-kit";
+import styles from "./prompt-builder.module.css";
+const slug = (text) => text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+function PromptQuestionFields({
+  draft,
+  isNew,
+  update,
+  errorFor
+}) {
+  const questionError = errorFor("question");
+  return /* @__PURE__ */ jsxs("div", { className: styles.fields, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "prompt-question",
+          label: "Question merchants see",
+          rows: 3,
+          value: draft.question,
+          placeholder: "How likely are you to recommend us to another business?",
+          "aria-invalid": Boolean(questionError),
+          "aria-describedby": questionError ? "prompt-question-error" : void 0,
+          onChange: (event) => update("question", event.target.value)
+        }
+      ),
+      questionError && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: "prompt-question-error",
+          className: styles.fieldError,
+          role: "alert",
+          children: questionError
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "prompt-follow-up",
+        label: "Follow-up line (optional)",
+        hint: "Shown under the score, inviting a sentence of context.",
+        value: draft.followUp ?? "",
+        placeholder: "What is the main reason for your score?",
+        onChange: (event) => update("followUp", event.target.value || null)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.pair, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "prompt-name",
+          label: "Internal name",
+          hint: "Only staff see this.",
+          value: draft.name,
+          error: errorFor("name"),
+          onChange: (event) => {
+            const name = event.target.value;
+            update("name", name);
+            if (isNew && (!draft.key || draft.key === slug(draft.name)))
+              update("key", slug(name));
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "prompt-key",
+          label: "Key",
+          hint: isNew ? "Permanent once saved. Lowercase, dots, dashes or underscores." : "Keys cannot change after the first save.",
+          value: draft.key,
+          disabled: !isNew,
+          error: errorFor("key"),
+          onChange: (event) => update("key", event.target.value)
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PromptQuestionFields
+};
+//# sourceMappingURL=prompt-question-fields.js.map

package/dist/admin/feedback/prompt-question-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/feedback/prompt-question-fields.tsx"],"sourcesContent":["import { Input, Textarea } from '@withpotter/ui-kit';\nimport type { AdminFeedbackPromptInput } from '@withpotter/lib/admin-feedback-api';\nimport type { UpdatePrompt } from './prompt-draft';\nimport styles from './prompt-builder.module.css';\n\nconst slug = (text: string) =>\n  text\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '')\n    .slice(0, 60);\n\n/** Step 1: what the merchant is asked, and what we call it internally. */\nexport function PromptQuestionFields({\n  draft,\n  isNew,\n  update,\n  errorFor,\n}: {\n  draft: AdminFeedbackPromptInput;\n  isNew: boolean;\n  update: UpdatePrompt;\n  errorFor: (field: string) => string | undefined;\n}) {\n  const questionError = errorFor('question');\n\n  return (\n    <div className={styles.fields}>\n      <div className={styles.field}>\n        <Textarea\n          id=\"prompt-question\"\n          label=\"Question merchants see\"\n          rows={3}\n          value={draft.question}\n          placeholder=\"How likely are you to recommend us to another business?\"\n          aria-invalid={Boolean(questionError)}\n          aria-describedby={questionError ? 'prompt-question-error' : undefined}\n          onChange={(event) => update('question', event.target.value)}\n        />\n        {questionError && (\n          <span\n            id=\"prompt-question-error\"\n            className={styles.fieldError}\n            role=\"alert\"\n          >\n            {questionError}\n          </span>\n        )}\n      </div>\n      <Input\n        id=\"prompt-follow-up\"\n        label=\"Follow-up line (optional)\"\n        hint=\"Shown under the score, inviting a sentence of context.\"\n        value={draft.followUp ?? ''}\n        placeholder=\"What is the main reason for your score?\"\n        onChange={(event) => update('followUp', event.target.value || null)}\n      />\n      <div className={styles.pair}>\n        <Input\n          id=\"prompt-name\"\n          label=\"Internal name\"\n          hint=\"Only staff see this.\"\n          value={draft.name}\n          error={errorFor('name')}\n          onChange={(event) => {\n            const name = event.target.value;\n            update('name', name);\n            // A new prompt's key follows its name until someone edits it.\n            if (isNew && (!draft.key || draft.key === slug(draft.name)))\n              update('key', slug(name));\n          }}\n        />\n        <Input\n          id=\"prompt-key\"\n          label=\"Key\"\n          hint={\n            isNew\n              ? 'Permanent once saved. Lowercase, dots, dashes or underscores.'\n              : 'Keys cannot change after the first save.'\n          }\n          value={draft.key}\n          disabled={!isNew}\n          error={errorFor('key')}\n          onChange={(event) => update('key', event.target.value)}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AA4BM,SACE,KADF;AA5BN,SAAS,OAAO,gBAAgB;AAGhC,OAAO,YAAY;AAEnB,MAAM,OAAO,CAAC,SACZ,KACG,YAAY,EACZ,QAAQ,eAAe,GAAG,EAC1B,QAAQ,YAAY,EAAE,EACtB,MAAM,GAAG,EAAE;AAGT,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,gBAAgB,SAAS,UAAU;AAEzC,SACE,qBAAC,SAAI,WAAW,OAAO,QACrB;AAAA,yBAAC,SAAI,WAAW,OAAO,OACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,OAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,MAAM;AAAA,UACb,aAAY;AAAA,UACZ,gBAAc,QAAQ,aAAa;AAAA,UACnC,oBAAkB,gBAAgB,0BAA0B;AAAA,UAC5D,UAAU,CAAC,UAAU,OAAO,YAAY,MAAM,OAAO,KAAK;AAAA;AAAA,MAC5D;AAAA,MACC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,WAAW,OAAO;AAAA,UAClB,MAAK;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,MAAM,YAAY;AAAA,QACzB,aAAY;AAAA,QACZ,UAAU,CAAC,UAAU,OAAO,YAAY,MAAM,OAAO,SAAS,IAAI;AAAA;AAAA,IACpE;AAAA,IACA,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,OAAO,SAAS,MAAM;AAAA,UACtB,UAAU,CAAC,UAAU;AACnB,kBAAM,OAAO,MAAM,OAAO;AAC1B,mBAAO,QAAQ,IAAI;AAEnB,gBAAI,UAAU,CAAC,MAAM,OAAO,MAAM,QAAQ,KAAK,MAAM,IAAI;AACvD,qBAAO,OAAO,KAAK,IAAI,CAAC;AAAA,UAC5B;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,OAAM;AAAA,UACN,MACE,QACI,kEACA;AAAA,UAEN,OAAO,MAAM;AAAA,UACb,UAAU,CAAC;AAAA,UACX,OAAO,SAAS,KAAK;AAAA,UACrB,UAAU,CAAC,UAAU,OAAO,OAAO,MAAM,OAAO,KAAK;AAAA;AAAA,MACvD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/feedback/prompt-response-fields.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField, OptionButton, ToggleRow } from "@withpotter/ui-kit";
+import { useModuleOn } from "../_shell/modules-context";
+import { SCALE_BY_KIND } from "./prompt-draft";
+import styles from "./prompt-builder.module.css";
+const KINDS = [
+  { value: "nps", label: "NPS", hint: "0 to 10, would they recommend us" },
+  { value: "csat", label: "CSAT", hint: "1 to 5, how satisfied they are" },
+  { value: "ces", label: "Effort", hint: "1 to 7, how easy it was" },
+  { value: "star", label: "Stars", hint: "1 to 5 stars" },
+  { value: "thumb", label: "Thumbs", hint: "Up or down" }
+];
+function PromptResponseFields({
+  draft,
+  setDraft,
+  update,
+  errorFor
+}) {
+  const fixed = draft.kind === "thumb";
+  const voice = useModuleOn("feedbackVoice");
+  return /* @__PURE__ */ jsxs("div", { className: styles.fields, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.fieldLabel, id: "prompt-kind-label", children: "Score type" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.kinds,
+          role: "group",
+          "aria-labelledby": "prompt-kind-label",
+          children: KINDS.map((kind) => /* @__PURE__ */ jsx(
+            OptionButton,
+            {
+              shape: "card",
+              selected: draft.kind === kind.value,
+              onClick: () => {
+                const [scaleMin, scaleMax] = SCALE_BY_KIND[kind.value];
+                setDraft((current) => ({
+                  ...current,
+                  kind: kind.value,
+                  scaleMin,
+                  scaleMax
+                }));
+              },
+              children: /* @__PURE__ */ jsxs("span", { className: styles.kind, children: [
+                /* @__PURE__ */ jsx("strong", { children: kind.label }),
+                /* @__PURE__ */ jsx("span", { children: kind.hint })
+              ] })
+            },
+            kind.value
+          ))
+        }
+      )
+    ] }),
+    !fixed && /* @__PURE__ */ jsxs("div", { className: styles.pair, children: [
+      /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          id: "scale-min",
+          label: "Lowest score",
+          value: draft.scaleMin,
+          onChange: (value) => update("scaleMin", value ?? 0),
+          error: errorFor("scaleMin") ?? errorFor("scale")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          id: "scale-max",
+          label: "Highest score",
+          value: draft.scaleMax,
+          onChange: (value) => update("scaleMax", value ?? 0),
+          error: errorFor("scaleMax")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toggles, children: [
+      /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          label: "Written context",
+          hint: "Merchants can add a sentence after scoring.",
+          checked: draft.allowComment,
+          onChange: (value) => update("allowComment", value),
+          tone: "soft"
+        }
+      ),
+      voice && /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          label: "Voice notes",
+          hint: "Merchants can record a short voice note instead.",
+          checked: draft.allowVoice,
+          onChange: (value) => update("allowVoice", value),
+          tone: "soft"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PromptResponseFields
+};
+//# sourceMappingURL=prompt-response-fields.js.map