@withpotter/components 0.13.0-next.101

package/dist/help/area-objects.js

@@ -0,0 +1,357 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  BLUE,
+  GOLD,
+  GREEN,
+  LIGHT,
+  LINE,
+  MID,
+  STROKE,
+  VIOLET,
+  WHITE
+} from "./area-palette";
+const AREA_GROUND_RX = {
+  Money: 35,
+  Selling: 33,
+  Bookings: 33,
+  Invoicing: 31,
+  "Your site": 32,
+  "Your team": 33,
+  "Your account": 29
+};
+const AREA_OBJECTS = {
+  // A fanned stack of notes with a ₦ coin leaning on it. The ₦ is deliberate:
+  // it is what our merchants are actually paid in, and a "$" on a Lagos
+  // dashboard is somebody else's product.
+  Money: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("g", { transform: "rotate(-10 54 56)", children: /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "20",
+        y: "34",
+        width: "66",
+        height: "40",
+        rx: "4",
+        fill: LIGHT,
+        ...STROKE
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("g", { transform: "rotate(-3 54 56)", children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "22",
+          y: "38",
+          width: "66",
+          height: "40",
+          rx: "4",
+          fill: WHITE,
+          ...STROKE
+        }
+      ),
+      /* @__PURE__ */ jsx("ellipse", { cx: "55", cy: "58", rx: "12", ry: "9.5", fill: GREEN, ...STROKE }),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "55",
+          cy: "58",
+          r: "3.5",
+          fill: WHITE,
+          stroke: LINE,
+          strokeWidth: "1.6"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M30 45h5M30 71h5M75 45h5M75 71h5",
+          stroke: LINE,
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("circle", { cx: "91", cy: "79", r: "20", fill: "#B87A0C", ...STROKE }),
+    /* @__PURE__ */ jsx("circle", { cx: "88", cy: "76", r: "20", fill: GOLD, ...STROKE }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "88",
+        cy: "76",
+        r: "15",
+        fill: "none",
+        stroke: LINE,
+        strokeWidth: "1.4"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M82 68v16M82 68l12 16M94 68v16",
+        stroke: LINE,
+        strokeWidth: "2.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M78 73.5h20M78 79.5h20",
+        stroke: LINE,
+        strokeWidth: "2.2",
+        strokeLinecap: "round"
+      }
+    )
+  ] }),
+  // A carton in three-quarter view with a price tag hung off the corner.
+  // Reads as goods, not as a storefront.
+  Selling: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M60 40 96 57 60 74 24 57Z", fill: WHITE, ...STROKE }),
+    /* @__PURE__ */ jsx("path", { d: "M24 57v26l36 17V74Z", fill: LIGHT, ...STROKE }),
+    /* @__PURE__ */ jsx("path", { d: "M96 57v26L60 100V74Z", fill: MID, ...STROKE }),
+    /* @__PURE__ */ jsx("path", { d: "M72 30 66 46", stroke: LINE, strokeWidth: "2" }),
+    /* @__PURE__ */ jsxs("g", { transform: "rotate(-18 84 26)", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M74 14h20a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H74L62 26Z",
+          fill: GOLD,
+          ...STROKE
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "74",
+          cy: "26",
+          r: "3.4",
+          fill: WHITE,
+          stroke: LINE,
+          strokeWidth: "1.6"
+        }
+      )
+    ] })
+  ] }),
+  // A month with one day claimed, and the clock that decides which days can be
+  // offered at all.
+  Bookings: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M38 20v14M70 20v14",
+        stroke: LINE,
+        strokeWidth: "3.5",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M84 30l8 7v50l-8 7z", fill: MID, ...STROKE }),
+    /* @__PURE__ */ jsx("path", { d: "M24 46V35a5 5 0 0 1 5-5h50a5 5 0 0 1 5 5v11z", fill: GOLD }),
+    /* @__PURE__ */ jsx("path", { d: "M24 46h60v35a5 5 0 0 1-5 5H29a5 5 0 0 1-5-5z", fill: WHITE }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "24",
+        y: "30",
+        width: "60",
+        height: "56",
+        rx: "5",
+        fill: "none",
+        ...STROKE
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M24 46h60", ...STROKE }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "33",
+        y: "54",
+        width: "15",
+        height: "13",
+        rx: "3.5",
+        fill: BLUE,
+        ...STROKE
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M56 60.5h20M33 76h34",
+        stroke: LINE,
+        strokeWidth: "2.4",
+        strokeLinecap: "round",
+        opacity: "0.25"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: "87", cy: "79", r: "18", fill: WHITE, ...STROKE }),
+    /* @__PURE__ */ jsx("circle", { cx: "87", cy: "79", r: "12.5", fill: GREEN, ...STROKE }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M87 70.5V79l6.5 4.5",
+        stroke: LINE,
+        strokeWidth: "2.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  // A bill with a torn foot, and the mark that says it stopped being one.
+  Invoicing: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M30 16h-6v72l6 5z", fill: LIGHT, ...STROKE }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M30 16h48a3 3 0 0 1 3 3v74l-8.5-6-8.5 6-8.5-6-8.5 6-8.5-6-8.5 6V19a3 3 0 0 1 3-3Z",
+        fill: WHITE,
+        ...STROKE
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M40 33h29M40 46h29M40 59h17",
+        stroke: LINE,
+        strokeWidth: "2.6",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: "87", cy: "76", r: "19", fill: GOLD, ...STROKE }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "87",
+        cy: "76",
+        r: "14",
+        fill: "none",
+        stroke: LINE,
+        strokeWidth: "1.6",
+        strokeDasharray: "3.5 3.5"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M80 76.5l5.5 5.5 10-11",
+        stroke: LINE,
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  // The window customers see, with the pointer that edits it.
+  "Your site": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M92 26l8 7v48l-8 7z", fill: MID, ...STROKE }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "22",
+        y: "26",
+        width: "70",
+        height: "55",
+        rx: "5",
+        fill: WHITE,
+        ...STROKE
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M22 41h70", ...STROKE }),
+    /* @__PURE__ */ jsx("circle", { cx: "31", cy: "33.5", r: "2.6", fill: LINE }),
+    /* @__PURE__ */ jsx("circle", { cx: "40", cy: "33.5", r: "2.6", fill: LINE }),
+    /* @__PURE__ */ jsx("circle", { cx: "49", cy: "33.5", r: "2.6", fill: LINE }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "30",
+        y: "49",
+        width: "25",
+        height: "24",
+        rx: "3.5",
+        fill: VIOLET,
+        stroke: LINE,
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M63 53h21M63 62h21M63 71h13",
+        stroke: LINE,
+        strokeWidth: "2.4",
+        strokeLinecap: "round",
+        opacity: "0.28"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M74 66 98 76l-10 3.5L84.5 91Z", fill: GOLD, ...STROKE })
+  ] }),
+  // Two name tags, one leaning on the other. The same object Customers uses
+  // for a person, because a teammate is a person the business knows.
+  "Your team": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("g", { transform: "rotate(-12 44 56)", children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "16",
+          y: "32",
+          width: "56",
+          height: "45",
+          rx: "5",
+          fill: LIGHT,
+          ...STROKE
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { d: "M16 46h56", ...STROKE })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { transform: "rotate(8 70 62)", children: [
+      /* @__PURE__ */ jsx("path", { d: "M44 43a5 5 0 0 1 5-5h46a5 5 0 0 1 5 5v11H44z", fill: GOLD }),
+      /* @__PURE__ */ jsx("path", { d: "M44 54h56v27a5 5 0 0 1-5 5H49a5 5 0 0 1-5-5z", fill: WHITE }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "44",
+          y: "38",
+          width: "56",
+          height: "48",
+          rx: "5",
+          fill: "none",
+          ...STROKE
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { d: "M44 54h56", ...STROKE }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M54 66h36M54 76h21",
+          stroke: LINE,
+          strokeWidth: "2.6",
+          strokeLinecap: "round"
+        }
+      )
+    ] })
+  ] }),
+  // A key. What you own here, and who gets to open it.
+  //
+  // Two teeth, not one, and a bow small enough to read as a handle. The first
+  // pass had a 24-unit bow on a stubby shaft, which is a magnifying glass.
+  // Laying a black stroke under a narrower gold one gives the shaft its
+  // outline in a single pass, which is the only way round caps stay round.
+  "Your account": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("g", { stroke: LINE, strokeWidth: "15", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M56 58 90 92" }),
+      /* @__PURE__ */ jsx("path", { d: "M72 74 61 85" }),
+      /* @__PURE__ */ jsx("path", { d: "M82 84 74 92" })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { stroke: GOLD, strokeWidth: "9.5", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M56 58 90 92" }),
+      /* @__PURE__ */ jsx("path", { d: "M72 74 61 85" }),
+      /* @__PURE__ */ jsx("path", { d: "M82 84 74 92" })
+    ] }),
+    /* @__PURE__ */ jsx("circle", { cx: "45", cy: "47", r: "19", fill: WHITE, ...STROKE }),
+    /* @__PURE__ */ jsx("circle", { cx: "45", cy: "47", r: "7.5", fill: GOLD, ...STROKE })
+  ] })
+};
+export {
+  AREA_GROUND_RX,
+  AREA_OBJECTS
+};
+//# sourceMappingURL=area-objects.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/area-objects.tsx"],"sourcesContent":["import type { HelpGroup } from '@withpotter/lib/help-topics';\nimport {\n  BLUE,\n  GOLD,\n  GREEN,\n  LIGHT,\n  LINE,\n  MID,\n  STROKE,\n  VIOLET,\n  WHITE,\n} from './area-palette';\n\n/**\n * The seven objects, drawn in the language `area-palette` describes.\n *\n * Each is a 120×120 box and each is built the same way, in this order: the\n * shaded faces, then the lit face, then the accent that says what it is.\n * Keeping the order fixed is why they look like a set drawn by one hand rather\n * than seven icons that happen to share a stroke width.\n *\n * No object draws its own ground shadow. See `AREA_GROUND_RX`.\n *\n * They are objects, not scenes. Cash App's set puts a joke in every frame (a\n * banana peeling open to cash, a calculator in a cowboy hat) and that is a\n * bigger art direction call than a navigation tile needs to make. What is\n * borrowed is the construction: solids with a side face, floating above a\n * ground shadow, in a four-value palette.\n */\n\n/**\n * How wide each object's ground shadow is.\n *\n * The shadow is NOT drawn in here with the object, and that is the whole point:\n * hovering lifts the object and the ground has to stay put, which it cannot do\n * if it is a sibling inside the same transformed group. `HelpAreaTile` renders\n * it as its own static layer underneath.\n *\n * The radius is per object because a shadow is cast by a footprint. A key\n * standing on its bow throws a narrower one than a fanned stack of notes, and\n * one shared value made the small objects look like they were floating.\n */\nexport const AREA_GROUND_RX: Record<HelpGroup, number> = {\n  Money: 35,\n  Selling: 33,\n  Bookings: 33,\n  Invoicing: 31,\n  'Your site': 32,\n  'Your team': 33,\n  'Your account': 29,\n};\n\nexport const AREA_OBJECTS: Record<HelpGroup, React.ReactNode> = {\n  // A fanned stack of notes with a ₦ coin leaning on it. The ₦ is deliberate:\n  // it is what our merchants are actually paid in, and a \"$\" on a Lagos\n  // dashboard is somebody else's product.\n  Money: (\n    <>\n      <g transform=\"rotate(-10 54 56)\">\n        <rect\n          x=\"20\"\n          y=\"34\"\n          width=\"66\"\n          height=\"40\"\n          rx=\"4\"\n          fill={LIGHT}\n          {...STROKE}\n        />\n      </g>\n      <g transform=\"rotate(-3 54 56)\">\n        <rect\n          x=\"22\"\n          y=\"38\"\n          width=\"66\"\n          height=\"40\"\n          rx=\"4\"\n          fill={WHITE}\n          {...STROKE}\n        />\n        <ellipse cx=\"55\" cy=\"58\" rx=\"12\" ry=\"9.5\" fill={GREEN} {...STROKE} />\n        <circle\n          cx=\"55\"\n          cy=\"58\"\n          r=\"3.5\"\n          fill={WHITE}\n          stroke={LINE}\n          strokeWidth=\"1.6\"\n        />\n        <path\n          d=\"M30 45h5M30 71h5M75 45h5M75 71h5\"\n          stroke={LINE}\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* The coin has thickness: a darker disc set behind the face. */}\n      <circle cx=\"91\" cy=\"79\" r=\"20\" fill=\"#B87A0C\" {...STROKE} />\n      <circle cx=\"88\" cy=\"76\" r=\"20\" fill={GOLD} {...STROKE} />\n      <circle\n        cx=\"88\"\n        cy=\"76\"\n        r=\"15\"\n        fill=\"none\"\n        stroke={LINE}\n        strokeWidth=\"1.4\"\n      />\n      <path\n        d=\"M82 68v16M82 68l12 16M94 68v16\"\n        stroke={LINE}\n        strokeWidth=\"2.2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M78 73.5h20M78 79.5h20\"\n        stroke={LINE}\n        strokeWidth=\"2.2\"\n        strokeLinecap=\"round\"\n      />\n    </>\n  ),\n\n  // A carton in three-quarter view with a price tag hung off the corner.\n  // Reads as goods, not as a storefront.\n  Selling: (\n    <>\n      <path d=\"M60 40 96 57 60 74 24 57Z\" fill={WHITE} {...STROKE} />\n      <path d=\"M24 57v26l36 17V74Z\" fill={LIGHT} {...STROKE} />\n      <path d=\"M96 57v26L60 100V74Z\" fill={MID} {...STROKE} />\n      <path d=\"M72 30 66 46\" stroke={LINE} strokeWidth=\"2\" />\n      <g transform=\"rotate(-18 84 26)\">\n        <path\n          d=\"M74 14h20a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H74L62 26Z\"\n          fill={GOLD}\n          {...STROKE}\n        />\n        <circle\n          cx=\"74\"\n          cy=\"26\"\n          r=\"3.4\"\n          fill={WHITE}\n          stroke={LINE}\n          strokeWidth=\"1.6\"\n        />\n      </g>\n    </>\n  ),\n\n  // A month with one day claimed, and the clock that decides which days can be\n  // offered at all.\n  Bookings: (\n    <>\n      <path\n        d=\"M38 20v14M70 20v14\"\n        stroke={LINE}\n        strokeWidth=\"3.5\"\n        strokeLinecap=\"round\"\n      />\n      <path d=\"M84 30l8 7v50l-8 7z\" fill={MID} {...STROKE} />\n      <path d=\"M24 46V35a5 5 0 0 1 5-5h50a5 5 0 0 1 5 5v11z\" fill={GOLD} />\n      <path d=\"M24 46h60v35a5 5 0 0 1-5 5H29a5 5 0 0 1-5-5z\" fill={WHITE} />\n      <rect\n        x=\"24\"\n        y=\"30\"\n        width=\"60\"\n        height=\"56\"\n        rx=\"5\"\n        fill=\"none\"\n        {...STROKE}\n      />\n      <path d=\"M24 46h60\" {...STROKE} />\n      <rect\n        x=\"33\"\n        y=\"54\"\n        width=\"15\"\n        height=\"13\"\n        rx=\"3.5\"\n        fill={BLUE}\n        {...STROKE}\n      />\n      <path\n        d=\"M56 60.5h20M33 76h34\"\n        stroke={LINE}\n        strokeWidth=\"2.4\"\n        strokeLinecap=\"round\"\n        opacity=\"0.25\"\n      />\n      <circle cx=\"87\" cy=\"79\" r=\"18\" fill={WHITE} {...STROKE} />\n      <circle cx=\"87\" cy=\"79\" r=\"12.5\" fill={GREEN} {...STROKE} />\n      <path\n        d=\"M87 70.5V79l6.5 4.5\"\n        stroke={LINE}\n        strokeWidth=\"2.6\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </>\n  ),\n\n  // A bill with a torn foot, and the mark that says it stopped being one.\n  Invoicing: (\n    <>\n      <path d=\"M30 16h-6v72l6 5z\" fill={LIGHT} {...STROKE} />\n      <path\n        d=\"M30 16h48a3 3 0 0 1 3 3v74l-8.5-6-8.5 6-8.5-6-8.5 6-8.5-6-8.5 6V19a3 3 0 0 1 3-3Z\"\n        fill={WHITE}\n        {...STROKE}\n      />\n      <path\n        d=\"M40 33h29M40 46h29M40 59h17\"\n        stroke={LINE}\n        strokeWidth=\"2.6\"\n        strokeLinecap=\"round\"\n      />\n      <circle cx=\"87\" cy=\"76\" r=\"19\" fill={GOLD} {...STROKE} />\n      <circle\n        cx=\"87\"\n        cy=\"76\"\n        r=\"14\"\n        fill=\"none\"\n        stroke={LINE}\n        strokeWidth=\"1.6\"\n        strokeDasharray=\"3.5 3.5\"\n      />\n      <path\n        d=\"M80 76.5l5.5 5.5 10-11\"\n        stroke={LINE}\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </>\n  ),\n\n  // The window customers see, with the pointer that edits it.\n  'Your site': (\n    <>\n      <path d=\"M92 26l8 7v48l-8 7z\" fill={MID} {...STROKE} />\n      <rect\n        x=\"22\"\n        y=\"26\"\n        width=\"70\"\n        height=\"55\"\n        rx=\"5\"\n        fill={WHITE}\n        {...STROKE}\n      />\n      <path d=\"M22 41h70\" {...STROKE} />\n      <circle cx=\"31\" cy=\"33.5\" r=\"2.6\" fill={LINE} />\n      <circle cx=\"40\" cy=\"33.5\" r=\"2.6\" fill={LINE} />\n      <circle cx=\"49\" cy=\"33.5\" r=\"2.6\" fill={LINE} />\n      <rect\n        x=\"30\"\n        y=\"49\"\n        width=\"25\"\n        height=\"24\"\n        rx=\"3.5\"\n        fill={VIOLET}\n        stroke={LINE}\n        strokeWidth=\"1.8\"\n      />\n      <path\n        d=\"M63 53h21M63 62h21M63 71h13\"\n        stroke={LINE}\n        strokeWidth=\"2.4\"\n        strokeLinecap=\"round\"\n        opacity=\"0.28\"\n      />\n      <path d=\"M74 66 98 76l-10 3.5L84.5 91Z\" fill={GOLD} {...STROKE} />\n    </>\n  ),\n\n  // Two name tags, one leaning on the other. The same object Customers uses\n  // for a person, because a teammate is a person the business knows.\n  'Your team': (\n    <>\n      <g transform=\"rotate(-12 44 56)\">\n        <rect\n          x=\"16\"\n          y=\"32\"\n          width=\"56\"\n          height=\"45\"\n          rx=\"5\"\n          fill={LIGHT}\n          {...STROKE}\n        />\n        <path d=\"M16 46h56\" {...STROKE} />\n      </g>\n      <g transform=\"rotate(8 70 62)\">\n        <path d=\"M44 43a5 5 0 0 1 5-5h46a5 5 0 0 1 5 5v11H44z\" fill={GOLD} />\n        <path d=\"M44 54h56v27a5 5 0 0 1-5 5H49a5 5 0 0 1-5-5z\" fill={WHITE} />\n        <rect\n          x=\"44\"\n          y=\"38\"\n          width=\"56\"\n          height=\"48\"\n          rx=\"5\"\n          fill=\"none\"\n          {...STROKE}\n        />\n        <path d=\"M44 54h56\" {...STROKE} />\n        <path\n          d=\"M54 66h36M54 76h21\"\n          stroke={LINE}\n          strokeWidth=\"2.6\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n    </>\n  ),\n\n  // A key. What you own here, and who gets to open it.\n  //\n  // Two teeth, not one, and a bow small enough to read as a handle. The first\n  // pass had a 24-unit bow on a stubby shaft, which is a magnifying glass.\n  // Laying a black stroke under a narrower gold one gives the shaft its\n  // outline in a single pass, which is the only way round caps stay round.\n  'Your account': (\n    <>\n      <g stroke={LINE} strokeWidth=\"15\" strokeLinecap=\"round\">\n        <path d=\"M56 58 90 92\" />\n        <path d=\"M72 74 61 85\" />\n        <path d=\"M82 84 74 92\" />\n      </g>\n      <g stroke={GOLD} strokeWidth=\"9.5\" strokeLinecap=\"round\">\n        <path d=\"M56 58 90 92\" />\n        <path d=\"M72 74 61 85\" />\n        <path d=\"M82 84 74 92\" />\n      </g>\n      <circle cx=\"45\" cy=\"47\" r=\"19\" fill={WHITE} {...STROKE} />\n      <circle cx=\"45\" cy=\"47\" r=\"7.5\" fill={GOLD} {...STROKE} />\n    </>\n  ),\n};\n"],"mappings":"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","names":[]}

package/dist/help/area-palette.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The drawing language the seven help objects share.
+ *
+ * Measured off Cash App's illustration set (design.cash.app), not guessed at.
+ * Their own SVGs are 250×250 with `stroke="black" stroke-width="1.5"` and a
+ * four-value palette: green, #E1E1E1, #595959, white. Two things in there are
+ * why that set reads as alive and a flat sticker does not:
+ *
+ *   thickness   objects are drawn in three-quarter view with a visible side
+ *               face, so they are solids sitting in a space rather than shapes
+ *               lying on a page.
+ *   cast shadow every object floats above a dark ground shape. Remove it and
+ *               the same drawing goes dead flat. It is the cheapest life in
+ *               the whole language and the thing our first pass was missing.
+ *
+ * What is NOT taken: their palette. Theirs is monochrome green on white
+ * because it is one brand's illustration set. Ours sit on seven different
+ * colour fields, which is where Box's colour lives, so the object keeps the
+ * greys and white and the field carries the hue.
+ *
+ * The line is proportional, not absolute. Theirs is 1.5 on a 250 box (0.6%);
+ * ours is 2 on a 120 box (1.7%), heavier because our objects render as small
+ * as 26px in the strip where a true hairline would disappear.
+ */
+/** Everything is outlined in the same black. No object gets its own line colour. */
+export declare const LINE = "#000000";
+/** The three masses. White is the subject, the greys are what it is made of. */
+export declare const WHITE = "#FFFFFF";
+export declare const LIGHT = "#E1E1E1";
+export declare const MID = "#595959";
+/** Shared line treatment. Spread onto every stroked path so weight never drifts. */
+export declare const STROKE: {
+    readonly stroke: "#000000";
+    readonly strokeWidth: 2;
+    readonly strokeLinecap: "round";
+    readonly strokeLinejoin: "round";
+};
+/**
+ * Accents, drawn from Box's own palette rather than the field colour.
+ *
+ * An object tinted with the hue it sits on vanishes into it, so each accent is
+ * chosen to sit AGAINST its field. Gold does the pointing almost everywhere,
+ * which is what keeps seven different drawings looking like one set.
+ */
+export declare const GOLD = "#F0B429";
+export declare const GREEN = "#2BB673";
+export declare const BLUE = "#116DFF";
+export declare const VIOLET = "#7C5CFF";

package/dist/help/area-palette.js

@@ -0,0 +1,26 @@
+const LINE = "#000000";
+const WHITE = "#FFFFFF";
+const LIGHT = "#E1E1E1";
+const MID = "#595959";
+const STROKE = {
+  stroke: LINE,
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+const GOLD = "#F0B429";
+const GREEN = "#2BB673";
+const BLUE = "#116DFF";
+const VIOLET = "#7C5CFF";
+export {
+  BLUE,
+  GOLD,
+  GREEN,
+  LIGHT,
+  LINE,
+  MID,
+  STROKE,
+  VIOLET,
+  WHITE
+};
+//# sourceMappingURL=area-palette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/area-palette.ts"],"sourcesContent":["/**\n * The drawing language the seven help objects share.\n *\n * Measured off Cash App's illustration set (design.cash.app), not guessed at.\n * Their own SVGs are 250×250 with `stroke=\"black\" stroke-width=\"1.5\"` and a\n * four-value palette: green, #E1E1E1, #595959, white. Two things in there are\n * why that set reads as alive and a flat sticker does not:\n *\n *   thickness   objects are drawn in three-quarter view with a visible side\n *               face, so they are solids sitting in a space rather than shapes\n *               lying on a page.\n *   cast shadow every object floats above a dark ground shape. Remove it and\n *               the same drawing goes dead flat. It is the cheapest life in\n *               the whole language and the thing our first pass was missing.\n *\n * What is NOT taken: their palette. Theirs is monochrome green on white\n * because it is one brand's illustration set. Ours sit on seven different\n * colour fields, which is where Box's colour lives, so the object keeps the\n * greys and white and the field carries the hue.\n *\n * The line is proportional, not absolute. Theirs is 1.5 on a 250 box (0.6%);\n * ours is 2 on a 120 box (1.7%), heavier because our objects render as small\n * as 26px in the strip where a true hairline would disappear.\n */\n\n/** Everything is outlined in the same black. No object gets its own line colour. */\nexport const LINE = '#000000';\n\n/** The three masses. White is the subject, the greys are what it is made of. */\nexport const WHITE = '#FFFFFF';\nexport const LIGHT = '#E1E1E1';\nexport const MID = '#595959';\n\n/** Shared line treatment. Spread onto every stroked path so weight never drifts. */\nexport const STROKE = {\n  stroke: LINE,\n  strokeWidth: 2,\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n} as const;\n\n/**\n * Accents, drawn from Box's own palette rather than the field colour.\n *\n * An object tinted with the hue it sits on vanishes into it, so each accent is\n * chosen to sit AGAINST its field. Gold does the pointing almost everywhere,\n * which is what keeps seven different drawings looking like one set.\n */\nexport const GOLD = '#F0B429';\nexport const GREEN = '#2BB673';\nexport const BLUE = '#116DFF';\nexport const VIOLET = '#7C5CFF';\n"],"mappings":"AA0BO,MAAM,OAAO;AAGb,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,MAAM;AAGZ,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAClB;AASO,MAAM,OAAO;AACb,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,SAAS;","names":[]}

package/dist/help/assistant-chat.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The support helper: ask in your own words, get the help topic that answers it, and reach a person from
+ * the same place when it does not. It answers from the Help topics and searches them the way that tab
+ * does; there is no AI behind it, so what it says is always something we wrote.
+ */
+export declare function AssistantChat({ seed, onClose, onStartCase, onRaiseDispute, }: {
+    seed: string;
+    onClose: () => void;
+    /** Opens a case with the question already written. */
+    onStartCase: (question: string) => void;
+    onRaiseDispute: () => void;
+}): import("react").JSX.Element;

package/dist/help/assistant-chat.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { ArrowUp, LifeBuoy } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { AutoGrowTextarea } from "@withpotter/ui-kit/auto-grow-textarea";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useCurrentTemplate } from "@withpotter/lib/template-context";
+import { resolveEnabledBehaviors } from "@withpotter/lib/resolve-enabled-behaviors";
+import { resolveHelpTopics } from "@withpotter/lib/help-topics";
+import { SUPPORT_NAME } from "@withpotter/lib/support";
+import { SecondaryShell } from "@withpotter/components/shell/secondary-shell";
+import { ChatFrame } from "./case-chat-panel";
+import { replyTo, startingQuestions } from "./assistant-reply";
+function AssistantChat({
+  seed,
+  onClose,
+  onStartCase,
+  onRaiseDispute
+}) {
+  const { tenant } = useAuth();
+  const { template } = useCurrentTemplate(tenant?.templateId);
+  const topics = useMemo(
+    () => resolveHelpTopics(
+      resolveEnabledBehaviors(
+        tenant?.settings,
+        template
+      )
+    ),
+    [tenant?.settings, template]
+  );
+  const [asked, setAsked] = useState(() => seed.trim() ? [seed.trim()] : []);
+  const [draft, setDraft] = useState("");
+  const ask = (text) => {
+    const question = text.trim();
+    if (!question) return;
+    setAsked((current) => [...current, question]);
+    setDraft("");
+  };
+  return /* @__PURE__ */ jsx(SecondaryShell, { title: `Ask ${SUPPORT_NAME}`, onClose, flush: true, children: /* @__PURE__ */ jsx(
+    ChatFrame,
+    {
+      thread: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs(HelperBubble, { children: [
+          /* @__PURE__ */ jsx("p", { children: "Hi, I can point you to the answer. Ask in your own words, or pick a question. If I can\u2019t help, I\u2019ll open a case with the team." }),
+          asked.length === 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: startingQuestions(topics).map((question) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => ask(question),
+              className: "rounded-full border border-[var(--border-default)] px-3 py-1 text-left text-sm text-[var(--text-secondary)] hover:bg-[var(--interactive-active)]",
+              children: question
+            },
+            question
+          )) })
+        ] }),
+        asked.map((question, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(YouBubble, { children: question }),
+          /* @__PURE__ */ jsx(
+            ReplyBubble,
+            {
+              reply: replyTo(topics, question),
+              question,
+              onAsk: ask,
+              onStartCase,
+              onRaiseDispute
+            }
+          )
+        ] }, index))
+      ] }),
+      composer: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex items-end gap-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            ask(draft);
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              AutoGrowTextarea,
+              {
+                value: draft,
+                onChange: (event) => setDraft(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+                    ask(draft);
+                  }
+                },
+                placeholder: "Ask a question",
+                rows: 1,
+                className: "min-h-9 flex-1 resize-none bg-transparent text-sm outline-none",
+                "aria-label": "Ask a question"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { type: "submit", size: "icon", disabled: !draft.trim(), "aria-label": "Send", children: /* @__PURE__ */ jsx(ArrowUp, {}) })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function YouBubble({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto max-w-[85%] rounded-2xl rounded-br-md bg-[var(--bg-muted)] px-3 py-2 text-sm text-ink", children });
+}
+function HelperBubble({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "max-w-[92%] rounded-2xl rounded-bl-md border border-[var(--border-subtle)] px-3 py-2 text-sm text-[var(--text-secondary)]", children });
+}
+function TopicAnswer({ topic }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "font-medium text-ink", children: topic.question }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1", children: topic.answer }),
+    topic.steps && topic.steps.length > 0 && /* @__PURE__ */ jsx("ol", { className: "mt-2 list-decimal space-y-1 pl-5", children: topic.steps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step)) }),
+    topic.action && /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: topic.action.href,
+        className: "mt-2 inline-block font-medium text-[var(--brand-600)] underline-offset-2 hover:underline",
+        children: topic.action.label
+      }
+    )
+  ] });
+}
+function ReplyBubble({
+  reply,
+  question,
+  onAsk,
+  onStartCase,
+  onRaiseDispute
+}) {
+  const person = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "secondary",
+      className: "mt-3",
+      onClick: () => onStartCase(question),
+      children: [
+        /* @__PURE__ */ jsx(LifeBuoy, {}),
+        "Talk to a person"
+      ]
+    }
+  );
+  if (reply.kind === "dispute") {
+    return /* @__PURE__ */ jsxs(HelperBubble, { children: [
+      /* @__PURE__ */ jsx("p", { children: "That sounds like a dispute. Raise it and the team is told straight away." }),
+      /* @__PURE__ */ jsx(Button, { className: "mt-3", onClick: onRaiseDispute, children: "Raise a dispute" })
+    ] });
+  }
+  if (reply.kind === "person") {
+    return /* @__PURE__ */ jsxs(HelperBubble, { children: [
+      /* @__PURE__ */ jsx("p", { children: "Of course. I\u2019ll open a case with what you wrote, and the team replies here and by email." }),
+      person
+    ] });
+  }
+  if (reply.kind === "none") {
+    return /* @__PURE__ */ jsxs(HelperBubble, { children: [
+      /* @__PURE__ */ jsx("p", { children: "I don\u2019t have an answer for that one. The team can help." }),
+      person
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(HelperBubble, { children: [
+    /* @__PURE__ */ jsx(TopicAnswer, { topic: reply.best }),
+    reply.related.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Related" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-2", children: reply.related.map((topic) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onAsk(topic.question),
+          className: "rounded-full border border-[var(--border-default)] px-3 py-1 text-left text-sm hover:bg-[var(--interactive-active)]",
+          children: topic.question
+        },
+        topic.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-[var(--text-tertiary)]", children: "Not what you needed?" }),
+    person
+  ] });
+}
+export {
+  AssistantChat
+};
+//# sourceMappingURL=assistant-chat.js.map