@withpotter/components 0.13.0-next.101

package/dist/help/help-area-tile.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+import { AREA_FIELD } from "./area-art";
+import { AREA_GROUND_RX, AREA_OBJECTS } from "./area-objects";
+function HelpAreaTile({
+  group,
+  selected,
+  compact,
+  onSelect
+}) {
+  const field = AREA_FIELD[group];
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      layout: true,
+      type: "button",
+      onClick: onSelect,
+      "aria-pressed": selected,
+      whileTap: { scale: PRESS_SCALE_LARGE },
+      transition: springs.gentle,
+      className: compact ? "group flex items-center gap-2 rounded-[10px] py-2 pl-2 pr-3 transition-colors duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)]" : "group block w-full text-left",
+      style: compact && selected ? { backgroundColor: "var(--interactive-active)" } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layout: true,
+            className: compact ? "grid size-[26px] shrink-0 place-items-center overflow-hidden rounded-[7px]" : "relative grid aspect-[5/4] w-full place-items-center overflow-hidden rounded-[10px]",
+            style: {
+              backgroundColor: field,
+              boxShadow: !compact && selected ? "0 0 0 2px var(--bg-subtle), 0 0 0 4px var(--text-primary)" : "inset 0 0 0 1px var(--border-default)",
+              transition: "box-shadow var(--motion-normal) var(--motion-ease-out)"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 120 120",
+                "aria-hidden": "true",
+                className: compact ? "h-full w-full" : "h-[76%] w-[76%]",
+                children: [
+                  !compact && /* @__PURE__ */ jsx(
+                    "ellipse",
+                    {
+                      cx: "60",
+                      cy: "104",
+                      rx: AREA_GROUND_RX[group],
+                      ry: "6",
+                      fill: "#000",
+                      opacity: "0.2",
+                      style: {
+                        transformBox: "view-box",
+                        transformOrigin: "60px 104px"
+                      },
+                      className: "transition-transform duration-[var(--motion-slow)] ease-overshoot group-hover:scale-x-[0.88] motion-reduce:transition-none motion-reduce:group-hover:scale-x-100"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "g",
+                    {
+                      className: compact ? void 0 : "transition-transform duration-[var(--motion-slow)] ease-overshoot group-hover:-translate-y-[5px] motion-reduce:transition-none motion-reduce:group-hover:translate-y-0",
+                      children: AREA_OBJECTS[group]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layout: true,
+            className: compact ? "whitespace-nowrap text-sm font-medium text-[var(--text-primary)]" : "mt-2 block text-sm font-medium text-[var(--text-primary)]",
+            children: group
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  HelpAreaTile
+};
+//# sourceMappingURL=help-area-tile.js.map

package/dist/help/help-area-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/help-area-tile.tsx"],"sourcesContent":["'use client';\n\nimport { motion } from 'motion/react';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\nimport type { HelpGroup } from '@withpotter/lib/help-topics';\nimport { AREA_FIELD } from './area-art';\nimport { AREA_GROUND_RX, AREA_OBJECTS } from './area-objects';\n\n/**\n * An area of the business, as an object you can point at.\n *\n * Two densities, and the same element in both. Nothing is unmounted between\n * them, so `layout` morphs the tile rather than swapping one component for\n * another, and the object you clicked visibly becomes the thing you are now\n * reading under.\n *\n *   gallery  the first view. Large object, label beneath, no body copy at all.\n *            Its job is to be recognised before it is read.\n *   strip    once an area is chosen. The grid collapses to one row of pills so\n *            the answers sit near the top of the screen instead of below two\n *            rows of artwork, and switching areas is still one click.\n *\n * The strip exists because of a measurement, not a preference: at 1024px the\n * gallery is about 470px tall, so on a laptop the questions you just asked for\n * opened below the fold and the click read as nothing having happened.\n *\n * Selection is drawn differently per density, because the same treatment does\n * not work at both sizes. On a large saturated colour field a fill fights the\n * art and a border is invisible against seven different hues, so it is a ring\n * on the page's own ink, outside the tile. On a pill the field is only 26px,\n * the label carries the meaning, and a wash behind the whole pill is what reads.\n *\n * Motion is on the object, never on the tile. A card that scales on hover at\n * grid density reads as the whole page twitching; a single drawn object that\n * leans is the thing under the cursor answering.\n */\nexport function HelpAreaTile({\n  group,\n  selected,\n  compact,\n  onSelect,\n}: {\n  group: HelpGroup;\n  selected: boolean;\n  /** Strip density. True whenever any area is open, not just this one. */\n  compact: boolean;\n  onSelect: () => void;\n}) {\n  const field = AREA_FIELD[group];\n\n  return (\n    <motion.button\n      layout\n      type=\"button\"\n      onClick={onSelect}\n      aria-pressed={selected}\n      whileTap={{ scale: PRESS_SCALE_LARGE }}\n      transition={springs.gentle}\n      className={\n        compact\n          ? 'group flex items-center gap-2 rounded-[10px] py-2 pl-2 pr-3 transition-colors duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)]'\n          : 'group block w-full text-left'\n      }\n      style={\n        compact && selected\n          ? { backgroundColor: 'var(--interactive-active)' }\n          : undefined\n      }\n    >\n      <motion.span\n        layout\n        className={\n          compact\n            ? 'grid size-[26px] shrink-0 place-items-center overflow-hidden rounded-[7px]'\n            : 'relative grid aspect-[5/4] w-full place-items-center overflow-hidden rounded-[10px]'\n        }\n        style={{\n          backgroundColor: field,\n          boxShadow:\n            !compact && selected\n              ? '0 0 0 2px var(--bg-subtle), 0 0 0 4px var(--text-primary)'\n              : 'inset 0 0 0 1px var(--border-default)',\n          transition: 'box-shadow var(--motion-normal) var(--motion-ease-out)',\n        }}\n      >\n        {/* Hover lifts the object and leaves its shadow behind, narrowing it as\n            it goes. The whole drawing language is objects floating above a\n            ground, so rising is the one move it already implies.\n\n            The ground is a sibling of the object rather than one of its parts,\n            which is what makes that possible: a shadow inside the group that\n            casts it would travel with it, which is not what a shadow does. An\n            earlier pass tried to exclude it in place with\n            `group-hover:[&>*:not(:first-child)]:…` and that class never\n            compiled, so the hover silently did nothing at all. Two plain\n            elements with plain variants cannot fail that way. */}\n        <svg\n          viewBox=\"0 0 120 120\"\n          aria-hidden=\"true\"\n          className={compact ? 'h-full w-full' : 'h-[76%] w-[76%]'}\n        >\n          {!compact && (\n            <ellipse\n              cx=\"60\"\n              cy=\"104\"\n              rx={AREA_GROUND_RX[group]}\n              ry=\"6\"\n              fill=\"#000\"\n              opacity=\"0.2\"\n              style={{\n                transformBox: 'view-box',\n                transformOrigin: '60px 104px',\n              }}\n              className=\"transition-transform duration-[var(--motion-slow)] ease-overshoot group-hover:scale-x-[0.88] motion-reduce:transition-none motion-reduce:group-hover:scale-x-100\"\n            />\n          )}\n          <g\n            className={\n              compact\n                ? undefined\n                : 'transition-transform duration-[var(--motion-slow)] ease-overshoot group-hover:-translate-y-[5px] motion-reduce:transition-none motion-reduce:group-hover:translate-y-0'\n            }\n          >\n            {AREA_OBJECTS[group]}\n          </g>\n        </svg>\n      </motion.span>\n      <motion.span\n        layout\n        className={\n          compact\n            ? 'whitespace-nowrap text-sm font-medium text-[var(--text-primary)]'\n            : 'mt-2 block text-sm font-medium text-[var(--text-primary)]'\n        }\n      >\n        {group}\n      </motion.span>\n    </motion.button>\n  );\n}\n"],"mappings":";AAgGQ,SAMI,KANJ;AA9FR,SAAS,cAAc;AACvB,SAAS,mBAAmB,eAAe;AAE3C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,oBAAoB;AA8BtC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,QAAQ,WAAW,KAAK;AAE9B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,QAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAS;AAAA,MACT,gBAAc;AAAA,MACd,UAAU,EAAE,OAAO,kBAAkB;AAAA,MACrC,YAAY,QAAQ;AAAA,MACpB,WACE,UACI,oJACA;AAAA,MAEN,OACE,WAAW,WACP,EAAE,iBAAiB,4BAA4B,IAC/C;AAAA,MAGN;AAAA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,QAAM;AAAA,YACN,WACE,UACI,+EACA;AAAA,YAEN,OAAO;AAAA,cACL,iBAAiB;AAAA,cACjB,WACE,CAAC,WAAW,WACR,8DACA;AAAA,cACN,YAAY;AAAA,YACd;AAAA,YAaA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,eAAY;AAAA,gBACZ,WAAW,UAAU,kBAAkB;AAAA,gBAEtC;AAAA,mBAAC,WACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAG;AAAA,sBACH,IAAG;AAAA,sBACH,IAAI,eAAe,KAAK;AAAA,sBACxB,IAAG;AAAA,sBACH,MAAK;AAAA,sBACL,SAAQ;AAAA,sBACR,OAAO;AAAA,wBACL,cAAc;AAAA,wBACd,iBAAiB;AAAA,sBACnB;AAAA,sBACA,WAAU;AAAA;AAAA,kBACZ;AAAA,kBAEF;AAAA,oBAAC;AAAA;AAAA,sBACC,WACE,UACI,SACA;AAAA,sBAGL,uBAAa,KAAK;AAAA;AAAA,kBACrB;AAAA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,QAAM;AAAA,YACN,WACE,UACI,qEACA;AAAA,YAGL;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/help/help-topic-row.d.ts

@@ -0,0 +1,27 @@
+import type { HelpTopic } from '@withpotter/lib/help-topics';
+/**
+ * One question, and its answer underneath when you ask for it.
+ *
+ * The earlier page had every answer open at once. That was a reaction to an
+ * accordion that hid the sentence telling you whether to keep reading, and it
+ * overcorrected: seventeen open answers is roughly nine hundred words, so the
+ * first thing a merchant met mid-problem was a wall to read rather than a list
+ * to scan.
+ *
+ * Collapsing is safe HERE and was not safe there, and the difference is what
+ * sits above this row. A merchant reaches this list having already chosen an
+ * area from its object, so the row does not have to answer "is this even the
+ * right subject". It only has to answer "is this my question", which is what a
+ * question phrased in the merchant's own words already does.
+ *
+ * Height animates in JS because `auto` cannot be transitioned in CSS. It's a
+ * curve rather than a spring on purpose: nothing here can be grabbed
+ * mid-flight, and motion.ts reserves springs for things that can.
+ */
+export declare function HelpTopicRow({ topic, open, onToggle, showArea, }: {
+    topic: HelpTopic;
+    open: boolean;
+    onToggle: () => void;
+    /** Search results span every area, so they name the one they came from. */
+    showArea?: boolean;
+}): import("react").JSX.Element;

package/dist/help/help-topic-row.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { AnimatePresence, motion } from "motion/react";
+import { ArrowRight, Plus } from "lucide-react";
+import { durations, eases } from "@withpotter/lib/motion";
+import { FeedbackVote } from "@withpotter/components/feedback";
+import { AreaArt } from "./area-art";
+function HelpTopicRow({
+  topic,
+  open,
+  onToggle,
+  showArea = false
+}) {
+  const bodyId = `help-answer-${topic.id}`;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        className: "group flex w-full items-center gap-3 px-4 py-3 text-left transition-colors duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] sm:px-4",
+        children: [
+          showArea && /* @__PURE__ */ jsx(
+            AreaArt,
+            {
+              group: topic.group,
+              className: "size-7 shrink-0 rounded-[7px]"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm font-medium text-[var(--text-primary)]", children: topic.question }),
+          /* @__PURE__ */ jsx(
+            Plus,
+            {
+              "aria-hidden": "true",
+              className: "size-[15px] shrink-0 text-[var(--text-muted)] transition-transform duration-[var(--motion-normal)] ease-[var(--motion-ease-quart)] group-hover:text-[var(--text-secondary)]",
+              style: { transform: open ? "rotate(45deg)" : void 0 }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        id: bodyId,
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: durations.slow, ease: eases.quart },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `pb-4 pr-4 pt-0.5 ${showArea ? "pl-[60px]" : "pl-4 sm:pl-4"}`,
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "max-w-[68ch] text-sm leading-relaxed text-[var(--text-secondary)]", children: topic.answer }),
+              topic.steps && /* @__PURE__ */ jsx("ol", { className: "mt-3 space-y-2", children: topic.steps.map((stepText, i) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: "flex gap-3 text-sm leading-snug text-[var(--text-secondary)]",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "grid size-[18px] shrink-0 place-items-center rounded-full bg-[var(--bg-muted)] text-2xs font-semibold text-[var(--text-tertiary)]",
+                        children: i + 1
+                      }
+                    ),
+                    stepText
+                  ]
+                },
+                stepText
+              )) }),
+              topic.action && /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: topic.action.href,
+                  className: "mt-3 inline-flex items-center gap-2 text-sm font-medium text-[var(--text-link)] transition-colors hover:text-[var(--text-link-hover)]",
+                  children: [
+                    topic.action.label,
+                    /* @__PURE__ */ jsx(ArrowRight, { className: "size-[13px]" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-[var(--border-subtle)] pt-3", children: /* @__PURE__ */ jsx(
+                FeedbackVote,
+                {
+                  promptKey: "help.topic.thumb",
+                  subject: { type: "help-topic", id: topic.id },
+                  label: "Did this answer it?",
+                  downVotePrefill: `The help answer for "${topic.question}" didn't cover it.
+
+What I still need to know:`
+                }
+              ) })
+            ]
+          }
+        )
+      },
+      "body"
+    ) })
+  ] });
+}
+export {
+  HelpTopicRow
+};
+//# sourceMappingURL=help-topic-row.js.map

package/dist/help/help-topic-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/help-topic-row.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { ArrowRight, Plus } from 'lucide-react';\nimport { durations, eases } from '@withpotter/lib/motion';\nimport type { HelpTopic } from '@withpotter/lib/help-topics';\nimport { FeedbackVote } from '@withpotter/components/feedback';\nimport { AreaArt } from './area-art';\n\n/**\n * One question, and its answer underneath when you ask for it.\n *\n * The earlier page had every answer open at once. That was a reaction to an\n * accordion that hid the sentence telling you whether to keep reading, and it\n * overcorrected: seventeen open answers is roughly nine hundred words, so the\n * first thing a merchant met mid-problem was a wall to read rather than a list\n * to scan.\n *\n * Collapsing is safe HERE and was not safe there, and the difference is what\n * sits above this row. A merchant reaches this list having already chosen an\n * area from its object, so the row does not have to answer \"is this even the\n * right subject\". It only has to answer \"is this my question\", which is what a\n * question phrased in the merchant's own words already does.\n *\n * Height animates in JS because `auto` cannot be transitioned in CSS. It's a\n * curve rather than a spring on purpose: nothing here can be grabbed\n * mid-flight, and motion.ts reserves springs for things that can.\n */\nexport function HelpTopicRow({\n  topic,\n  open,\n  onToggle,\n  showArea = false,\n}: {\n  topic: HelpTopic;\n  open: boolean;\n  onToggle: () => void;\n  /** Search results span every area, so they name the one they came from. */\n  showArea?: boolean;\n}) {\n  const bodyId = `help-answer-${topic.id}`;\n\n  return (\n    <div>\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"group flex w-full items-center gap-3 px-4 py-3 text-left transition-colors duration-[var(--motion-fast)] hover:bg-[var(--interactive-hover)] sm:px-4\"\n      >\n        {showArea && (\n          <AreaArt\n            group={topic.group}\n            className=\"size-7 shrink-0 rounded-[7px]\"\n          />\n        )}\n        <span className=\"min-w-0 flex-1 text-sm font-medium text-[var(--text-primary)]\">\n          {topic.question}\n        </span>\n        {/* Rotating a plus into a close is one glyph doing both states, so the\n            control never re-flows the row the way swapping icons does. */}\n        <Plus\n          aria-hidden=\"true\"\n          className=\"size-[15px] shrink-0 text-[var(--text-muted)] transition-transform duration-[var(--motion-normal)] ease-[var(--motion-ease-quart)] group-hover:text-[var(--text-secondary)]\"\n          style={{ transform: open ? 'rotate(45deg)' : undefined }}\n        />\n      </button>\n\n      <AnimatePresence initial={false}>\n        {open && (\n          <motion.div\n            id={bodyId}\n            key=\"body\"\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{ duration: durations.slow, ease: eases.quart }}\n            className=\"overflow-hidden\"\n          >\n            <div\n              className={`pb-4 pr-4 pt-0.5 ${showArea ? 'pl-[60px]' : 'pl-4 sm:pl-4'}`}\n            >\n              <p className=\"max-w-[68ch] text-sm leading-relaxed text-[var(--text-secondary)]\">\n                {topic.answer}\n              </p>\n\n              {topic.steps && (\n                <ol className=\"mt-3 space-y-2\">\n                  {topic.steps.map((stepText, i) => (\n                    <li\n                      key={stepText}\n                      className=\"flex gap-3 text-sm leading-snug text-[var(--text-secondary)]\"\n                    >\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"grid size-[18px] shrink-0 place-items-center rounded-full bg-[var(--bg-muted)] text-2xs font-semibold text-[var(--text-tertiary)]\"\n                      >\n                        {i + 1}\n                      </span>\n                      {stepText}\n                    </li>\n                  ))}\n                </ol>\n              )}\n\n              {topic.action && (\n                <Link\n                  href={topic.action.href}\n                  className=\"mt-3 inline-flex items-center gap-2 text-sm font-medium text-[var(--text-link)] transition-colors hover:text-[var(--text-link-hover)]\"\n                >\n                  {topic.action.label}\n                  <ArrowRight className=\"size-[13px]\" />\n                </Link>\n              )}\n\n              {/* ONLY UNDER AN OPEN ANSWER, which is the only place it means\n                  anything. A help list is seventeen questions; a thumb beside a\n                  question nobody has read yet is asking whether the title was\n                  good. Opening the row is the act that makes the vote sincere,\n                  and it is also what keeps seventeen of these off the screen at\n                  once.\n\n                  A down vote opens the feedback sheet carrying the question, so\n                  \"this didn't answer it\" arrives with the thing it failed to\n                  answer attached. Tallying it and stopping there would be the\n                  polite version of not asking. */}\n              <div className=\"mt-4 border-t border-[var(--border-subtle)] pt-3\">\n                <FeedbackVote\n                  promptKey=\"help.topic.thumb\"\n                  subject={{ type: 'help-topic', id: topic.id }}\n                  label=\"Did this answer it?\"\n                  downVotePrefill={`The help answer for \"${topic.question}\" didn't cover it.\\n\\nWhat I still need to know:`}\n                />\n              </div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";AA6CM,SAQI,KARJ;AA3CN,OAAO,UAAU;AACjB,SAAS,iBAAiB,cAAc;AACxC,SAAS,YAAY,YAAY;AACjC,SAAS,WAAW,aAAa;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAqBjB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAMG;AACD,QAAM,SAAS,eAAe,MAAM,EAAE;AAEtC,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAU;AAAA,QAET;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,MAAM;AAAA,cACb,WAAU;AAAA;AAAA,UACZ;AAAA,UAEF,oBAAC,UAAK,WAAU,iEACb,gBAAM,UACT;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAU;AAAA,cACV,OAAO,EAAE,WAAW,OAAO,kBAAkB,OAAU;AAAA;AAAA,UACzD;AAAA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,mBAAgB,SAAS,OACvB,kBACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,IAAI;AAAA,QAEJ,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAE;AAAA,QACjC,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAE;AAAA,QACtC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAE;AAAA,QAC9B,YAAY,EAAE,UAAU,UAAU,MAAM,MAAM,MAAM,MAAM;AAAA,QAC1D,WAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,oBAAoB,WAAW,cAAc,cAAc;AAAA,YAEtE;AAAA,kCAAC,OAAE,WAAU,qEACV,gBAAM,QACT;AAAA,cAEC,MAAM,SACL,oBAAC,QAAG,WAAU,kBACX,gBAAM,MAAM,IAAI,CAAC,UAAU,MAC1B;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAU;AAAA,kBAEV;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,eAAY;AAAA,wBACZ,WAAU;AAAA,wBAET,cAAI;AAAA;AAAA,oBACP;AAAA,oBACC;AAAA;AAAA;AAAA,gBATI;AAAA,cAUP,CACD,GACH;AAAA,cAGD,MAAM,UACL;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,MAAM,OAAO;AAAA,kBACnB,WAAU;AAAA,kBAET;AAAA,0BAAM,OAAO;AAAA,oBACd,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,cACtC;AAAA,cAcF,oBAAC,SAAI,WAAU,oDACb;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAS,EAAE,MAAM,cAAc,IAAI,MAAM,GAAG;AAAA,kBAC5C,OAAM;AAAA,kBACN,iBAAiB,wBAAwB,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,cACzD,GACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,MA9DI;AAAA,IA+DN,GAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/help/help-topics-view.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The answers: pick the area of the business, then read about it.
+ *
+ * The first view is one object per area (Money, Selling, Bookings, Your site,
+ * Your team, Your account) and nothing else, so you recognise where you are
+ * stuck before you read a word. Picking one folds the grid to a strip and opens
+ * that area's questions beneath it, and the answer opens under the one you
+ * press. Collapsing answers is only safe because of that first step: choosing an
+ * area has already answered "is this the right subject", so a row only has to
+ * answer "is this my question".
+ *
+ * Search, which lives in the page's toolbar, cuts across areas and replaces the
+ * grid: somebody who typed a question has already said what they want.
+ *
+ * The one thing this knows that a help centre does not is where you came from.
+ * `?from=/dashboard/payments` means you gave up on Payments, so that area
+ * arrives picked and its question open.
+ */
+export declare function HelpTopicsView({ query }: {
+    query: string;
+}): import("react").JSX.Element;

package/dist/help/help-topics-view.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { AnimatePresence, motion } from "motion/react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useCurrentTemplate } from "@withpotter/lib/template-context";
+import { resolveEnabledBehaviors } from "@withpotter/lib/resolve-enabled-behaviors";
+import {
+  HELP_GROUP_ORDER,
+  resolveHelpTopics,
+  searchHelpTopics,
+  topicForPath
+} from "@withpotter/lib/help-topics";
+import {
+  columnItemVariants,
+  columnVariants,
+  durations,
+  eases,
+  springs
+} from "@withpotter/lib/motion";
+import { HelpAreaTile } from "@withpotter/components/help/help-area-tile";
+import { HelpTopicRow } from "@withpotter/components/help/help-topic-row";
+function HelpTopicsView({ query }) {
+  const { tenant } = useAuth();
+  const { template } = useCurrentTemplate(tenant?.templateId);
+  const searchParams = useSearchParams();
+  const behaviors = useMemo(
+    () => resolveEnabledBehaviors(
+      tenant?.settings,
+      template
+    ),
+    [tenant?.settings, template]
+  );
+  const topics = useMemo(() => resolveHelpTopics(behaviors), [behaviors]);
+  const results = useMemo(
+    () => searchHelpTopics(topics, query),
+    [topics, query]
+  );
+  const from = searchParams.get("from");
+  const lead = useMemo(() => topicForPath(topics, from), [topics, from]);
+  const [picked, setPicked] = useState(null);
+  const selection = picked ?? {
+    group: lead?.group ?? null,
+    topicId: lead?.id ?? null
+  };
+  const areas = useMemo(() => {
+    const present = new Set(topics.map((t) => t.group));
+    return HELP_GROUP_ORDER.filter((g) => present.has(g));
+  }, [topics]);
+  const areaTopics = useMemo(
+    () => selection.group ? topics.filter((t) => t.group === selection.group) : [],
+    [topics, selection.group]
+  );
+  const toggleTopic = (group, id) => setPicked({ group, topicId: selection.topicId === id ? null : id });
+  if (query.trim()) {
+    return /* @__PURE__ */ jsx(
+      SearchResults,
+      {
+        count: results.length,
+        query,
+        openTopicId: selection.topicId,
+        onToggle: toggleTopic,
+        topics: results
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        variants: columnVariants,
+        initial: selection.group ? false : "hidden",
+        animate: "shown",
+        className: selection.group ? "flex flex-wrap gap-x-1 gap-y-2" : "grid grid-cols-2 gap-x-4 gap-y-7 sm:grid-cols-3 lg:grid-cols-4",
+        children: areas.map((group) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            transition: springs.gentle,
+            variants: columnItemVariants,
+            children: /* @__PURE__ */ jsx(
+              HelpAreaTile,
+              {
+                group,
+                compact: selection.group !== null,
+                selected: selection.group === group,
+                onSelect: () => setPicked(
+                  selection.group === group ? { group: null, topicId: null } : { group, topicId: null }
+                )
+              }
+            )
+          },
+          group
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: selection.group && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: -6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -6 },
+        transition: { duration: durations.normal, ease: eases.quart },
+        className: "surface mt-6 divide-y divide-[var(--border-subtle)]",
+        children: areaTopics.map((topic) => /* @__PURE__ */ jsx(
+          HelpTopicRow,
+          {
+            topic,
+            open: selection.topicId === topic.id,
+            onToggle: () => toggleTopic(topic.group, topic.id)
+          },
+          topic.id
+        ))
+      },
+      selection.group
+    ) })
+  ] });
+}
+function SearchResults({
+  topics,
+  count,
+  query,
+  openTopicId,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "px-1 text-sm text-[var(--text-tertiary)]",
+        "aria-live": "polite",
+        children: count === 0 ? `Nothing matches \u201C${query.trim()}\u201D. Try fewer words, or start a case.` : `${count} ${count === 1 ? "answer" : "answers"} for \u201C${query.trim()}\u201D`
+      }
+    ),
+    count > 0 && /* @__PURE__ */ jsx("div", { className: "surface mt-3 divide-y divide-[var(--border-subtle)]", children: topics.map((topic) => /* @__PURE__ */ jsx(
+      HelpTopicRow,
+      {
+        topic,
+        open: openTopicId === topic.id,
+        onToggle: () => onToggle(topic.group, topic.id),
+        showArea: true
+      },
+      topic.id
+    )) })
+  ] });
+}
+export {
+  HelpTopicsView
+};
+//# sourceMappingURL=help-topics-view.js.map

package/dist/help/help-topics-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/help-topics-view.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { useSearchParams } from 'next/navigation';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useCurrentTemplate } from '@withpotter/lib/template-context';\nimport { resolveEnabledBehaviors } from '@withpotter/lib/resolve-enabled-behaviors';\nimport {\n  HELP_GROUP_ORDER,\n  resolveHelpTopics,\n  searchHelpTopics,\n  topicForPath,\n  type HelpGroup,\n} from '@withpotter/lib/help-topics';\nimport {\n  columnItemVariants,\n  columnVariants,\n  durations,\n  eases,\n  springs,\n} from '@withpotter/lib/motion';\nimport { HelpAreaTile } from '@withpotter/components/help/help-area-tile';\nimport { HelpTopicRow } from '@withpotter/components/help/help-topic-row';\n\n/** What the merchant has chosen. `null` on both means the bare tile grid. */\ninterface Selection {\n  group: HelpGroup | null;\n  topicId: string | null;\n}\n\n/**\n * The answers: pick the area of the business, then read about it.\n *\n * The first view is one object per area (Money, Selling, Bookings, Your site,\n * Your team, Your account) and nothing else, so you recognise where you are\n * stuck before you read a word. Picking one folds the grid to a strip and opens\n * that area's questions beneath it, and the answer opens under the one you\n * press. Collapsing answers is only safe because of that first step: choosing an\n * area has already answered \"is this the right subject\", so a row only has to\n * answer \"is this my question\".\n *\n * Search, which lives in the page's toolbar, cuts across areas and replaces the\n * grid: somebody who typed a question has already said what they want.\n *\n * The one thing this knows that a help centre does not is where you came from.\n * `?from=/dashboard/payments` means you gave up on Payments, so that area\n * arrives picked and its question open.\n */\nexport function HelpTopicsView({ query }: { query: string }) {\n  const { tenant } = useAuth();\n  const { template } = useCurrentTemplate(tenant?.templateId);\n  const searchParams = useSearchParams();\n\n  const behaviors = useMemo(\n    () =>\n      resolveEnabledBehaviors(\n        tenant?.settings as Record<string, unknown> | undefined,\n        template,\n      ),\n    [tenant?.settings, template],\n  );\n\n  const topics = useMemo(() => resolveHelpTopics(behaviors), [behaviors]);\n  const results = useMemo(\n    () => searchHelpTopics(topics, query),\n    [topics, query],\n  );\n\n  const from = searchParams.get('from');\n  const lead = useMemo(() => topicForPath(topics, from), [topics, from]);\n\n  /**\n   * Null until the merchant picks something. `topics` resolves asynchronously\n   * with the tenant, so the lead answer does not exist on the first render;\n   * seeding state from it would seed `null` and stay there. Deriving it lets the\n   * preselection appear the moment the behaviours land, and the first click\n   * takes over for good.\n   */\n  const [picked, setPicked] = useState<Selection | null>(null);\n  const selection: Selection = picked ?? {\n    group: lead?.group ?? null,\n    topicId: lead?.id ?? null,\n  };\n\n  /** Only areas this business actually has questions in, gated like the nav. */\n  const areas = useMemo(() => {\n    const present = new Set(topics.map((t) => t.group));\n    return HELP_GROUP_ORDER.filter((g) => present.has(g));\n  }, [topics]);\n\n  const areaTopics = useMemo(\n    () =>\n      selection.group ? topics.filter((t) => t.group === selection.group) : [],\n    [topics, selection.group],\n  );\n\n  const toggleTopic = (group: HelpGroup, id: string) =>\n    setPicked({ group, topicId: selection.topicId === id ? null : id });\n\n  if (query.trim()) {\n    return (\n      <SearchResults\n        count={results.length}\n        query={query}\n        openTopicId={selection.topicId}\n        onToggle={toggleTopic}\n        topics={results}\n      />\n    );\n  }\n\n  return (\n    <div>\n      {/* The tiles arrive in reading order, once, on the shared column stagger.\n          `initial` is the only thing that differs between the two densities and\n          the variants stay attached in both: pulling them mid-entrance left the\n          tiles holding `hidden`'s opacity 0 with nothing to resolve `shown`\n          against, which shipped a strip that took up its space and painted\n          nothing. */}\n      <motion.div\n        variants={columnVariants}\n        initial={selection.group ? false : 'hidden'}\n        animate=\"shown\"\n        className={\n          selection.group\n            ? 'flex flex-wrap gap-x-1 gap-y-2'\n            : 'grid grid-cols-2 gap-x-4 gap-y-7 sm:grid-cols-3 lg:grid-cols-4'\n        }\n      >\n        {areas.map((group) => (\n          <motion.div\n            key={group}\n            layout\n            transition={springs.gentle}\n            variants={columnItemVariants}\n          >\n            <HelpAreaTile\n              group={group}\n              compact={selection.group !== null}\n              selected={selection.group === group}\n              onSelect={() =>\n                setPicked(\n                  selection.group === group\n                    ? { group: null, topicId: null }\n                    : { group, topicId: null },\n                )\n              }\n            />\n          </motion.div>\n        ))}\n      </motion.div>\n\n      <AnimatePresence initial={false} mode=\"wait\">\n        {selection.group && (\n          <motion.div\n            key={selection.group}\n            initial={{ opacity: 0, y: -6 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -6 }}\n            transition={{ duration: durations.normal, ease: eases.quart }}\n            className=\"surface mt-6 divide-y divide-[var(--border-subtle)]\"\n          >\n            {areaTopics.map((topic) => (\n              <HelpTopicRow\n                key={topic.id}\n                topic={topic}\n                open={selection.topicId === topic.id}\n                onToggle={() => toggleTopic(topic.group, topic.id)}\n              />\n            ))}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\n/**\n * Search cuts across areas, so it drops the tiles rather than filtering them.\n * Each row keeps its area's object at the small size, so a result still says\n * which part of the business it belongs to without a line of text.\n */\nfunction SearchResults({\n  topics,\n  count,\n  query,\n  openTopicId,\n  onToggle,\n}: {\n  topics: ReturnType<typeof searchHelpTopics>;\n  count: number;\n  query: string;\n  openTopicId: string | null;\n  onToggle: (group: HelpGroup, id: string) => void;\n}) {\n  return (\n    <div>\n      <p\n        className=\"px-1 text-sm text-[var(--text-tertiary)]\"\n        aria-live=\"polite\"\n      >\n        {count === 0\n          ? `Nothing matches “${query.trim()}”. Try fewer words, or start a case.`\n          : `${count} ${count === 1 ? 'answer' : 'answers'} for “${query.trim()}”`}\n      </p>\n      {count > 0 && (\n        <div className=\"surface mt-3 divide-y divide-[var(--border-subtle)]\">\n          {topics.map((topic) => (\n            <HelpTopicRow\n              key={topic.id}\n              topic={topic}\n              open={openTopicId === topic.id}\n              onToggle={() => onToggle(topic.group, topic.id)}\n              showArea\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/help/support-cases-view.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Your cases, as a tab of the Support center rather than a page of its own.
+ *
+ * It was `/dashboard/support`, a separate screen with a different title, a
+ * breadcrumb back to Help and its own button, so the cases and the answers read
+ * as two products. They are one place now: the same title, the same toolbar and
+ * the same Start a case, with this under the second tab. Starting a case is the
+ * page's job, not this list's, so it arrives as `onStartCase`.
+ */
+export declare function SupportCasesView({ onStartCase, onOpenCase, openCaseId, }: {
+    onStartCase: () => void;
+    /** Open a case in the conversation shell beside the page. */
+    onOpenCase: (id: string) => void;
+    /** The case the shell is showing, so its row can say so. */
+    openCaseId?: string | null;
+}): import("react").JSX.Element;

package/dist/help/support-cases-view.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { LifeBuoy } from "lucide-react";
+import {
+  Button,
+  FilterBar,
+  FilterField,
+  ListStates,
+  Select,
+  StackedCell,
+  StateView,
+  TableRow,
+  TableShell,
+  Th
+} from "@withpotter/ui-kit";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import {
+  serviceOperationsApi
+} from "@withpotter/lib/service-operations-api";
+import {
+  formatSupportAge,
+  STATUS_FILTER_OPTIONS,
+  SupportStatus
+} from "@withpotter/components/support/support-case-ui";
+function SupportCasesView({
+  onStartCase,
+  onOpenCase,
+  openCaseId
+}) {
+  const { tenant } = useAuth();
+  const { can, loading: permissionsLoading } = usePermissions();
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("");
+  const [page, setPage] = useState(1);
+  const seesEveryCase = can("canManageCommunications");
+  const cases = useQuery({
+    queryKey: ["support-cases", tenant?.slug, status, search, page],
+    queryFn: () => serviceOperationsApi.list(tenant.slug, {
+      status: status || void 0,
+      search: search || void 0,
+      page
+    }),
+    enabled: Boolean(tenant?.slug)
+  });
+  const rows = cases.data?.items ?? [];
+  const narrowed = Boolean(search || status);
+  return /* @__PURE__ */ jsx(
+    ListStates,
+    {
+      framed: true,
+      loading: cases.isLoading || permissionsLoading,
+      isEmpty: rows.length === 0,
+      error: cases.isError ? "Your cases could not be loaded." : null,
+      onRetry: () => void cases.refetch(),
+      empty: narrowed ? /* @__PURE__ */ jsx(
+        StateView,
+        {
+          kind: "empty",
+          icon: LifeBuoy,
+          title: "Nothing matches",
+          description: "Try a different search, or clear the filter.",
+          action: {
+            label: "Clear filters",
+            onClick: () => {
+              setSearch("");
+              setStatus("");
+              setPage(1);
+            }
+          }
+        }
+      ) : (
+        /* The header already offers this, and it is offered again here on
+             purpose: on an empty page the header button is small and in the
+             far corner, and this is where the eye already is. */
+        /* @__PURE__ */ jsx(
+          StateView,
+          {
+            kind: "empty",
+            icon: LifeBuoy,
+            title: "No cases yet",
+            description: seesEveryCase ? "Ask us anything. A payout that has not arrived, a screen that will not behave, an idea you want built. Every reply lands back here." : "Ask us anything. A screen that will not behave, something you cannot get into, an idea you want built. Every reply lands back here.",
+            action: {
+              label: "Start a case",
+              onClick: onStartCase
+            }
+          }
+        )
+      ),
+      children: /* @__PURE__ */ jsx(
+        TableShell,
+        {
+          minWidth: 640,
+          toolbar: /* @__PURE__ */ jsx(
+            FilterBar,
+            {
+              toolbar: true,
+              search,
+              onSearchChange: (value) => {
+                setSearch(value);
+                setPage(1);
+              },
+              placeholder: "Search subject or case number\u2026",
+              activeCount: status ? 1 : 0,
+              children: /* @__PURE__ */ jsx(FilterField, { label: "Status", children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: status,
+                  onChange: (value) => {
+                    setStatus(value);
+                    setPage(1);
+                  },
+                  options: STATUS_FILTER_OPTIONS,
+                  ariaLabel: "Filter by status"
+                }
+              ) })
+            }
+          ),
+          footer: cases.data && cases.data.total > cases.data.pageSize ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3 text-sm text-[var(--text-tertiary)]", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              cases.data.total,
+              " cases"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  disabled: page === 1,
+                  onClick: () => setPage((value) => value - 1),
+                  children: "Previous"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  disabled: page * cases.data.pageSize >= cases.data.total,
+                  onClick: () => setPage((value) => value + 1),
+                  children: "Next"
+                }
+              )
+            ] })
+          ] }) : void 0,
+          head: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(Th, { children: "Case" }),
+            /* @__PURE__ */ jsx(Th, { children: "Status" }),
+            /* @__PURE__ */ jsx(Th, { children: "Last activity" })
+          ] }),
+          children: rows.map((serviceCase) => /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              active: serviceCase.id === openCaseId,
+              onClick: () => onOpenCase(serviceCase.id),
+              children: [
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                  StackedCell,
+                  {
+                    value: serviceCase.subject,
+                    sub: serviceCase.reference
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(SupportStatus, { status: serviceCase.status }) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-tertiary)]", children: formatSupportAge(serviceCase.updatedAt) })
+              ]
+            },
+            serviceCase.id
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  SupportCasesView
+};
+//# sourceMappingURL=support-cases-view.js.map