@withpotter/components 0.13.0-next.101

package/dist/ServiceWorkerRegistrar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Registers the dashboard service worker.
+ * Delays registration to avoid contending with first paint.
+ * Skipped in development (HMR + SW = pain).
+ */
+export declare function ServiceWorkerRegistrar(): null;

package/dist/ServiceWorkerRegistrar.js

@@ -0,0 +1,31 @@
+"use client";
+import { useEffect } from "react";
+function ServiceWorkerRegistrar() {
+  useEffect(() => {
+    if (typeof window === "undefined" || !("serviceWorker" in navigator) || process.env.NODE_ENV === "development") {
+      return;
+    }
+    const timer = setTimeout(() => {
+      navigator.serviceWorker.register("/sw.js", { scope: "/" }).then((registration) => {
+        registration.addEventListener("updatefound", () => {
+          const newWorker = registration.installing;
+          if (newWorker) {
+            newWorker.addEventListener("statechange", () => {
+              if (newWorker.state === "installed" && navigator.serviceWorker.controller) {
+                console.log("[Box] New dashboard version available");
+              }
+            });
+          }
+        });
+      }).catch((err) => {
+        console.warn("[Box] SW registration failed:", err);
+      });
+    }, 3e3);
+    return () => clearTimeout(timer);
+  }, []);
+  return null;
+}
+export {
+  ServiceWorkerRegistrar
+};
+//# sourceMappingURL=ServiceWorkerRegistrar.js.map

package/dist/ServiceWorkerRegistrar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ServiceWorkerRegistrar.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\n/**\n * Registers the dashboard service worker.\n * Delays registration to avoid contending with first paint.\n * Skipped in development (HMR + SW = pain).\n */\nexport function ServiceWorkerRegistrar() {\n  useEffect(() => {\n    if (\n      typeof window === 'undefined' ||\n      !('serviceWorker' in navigator) ||\n      process.env.NODE_ENV === 'development'\n    ) {\n      return;\n    }\n\n    const timer = setTimeout(() => {\n      navigator.serviceWorker\n        .register('/sw.js', { scope: '/' })\n        .then((registration) => {\n          registration.addEventListener('updatefound', () => {\n            const newWorker = registration.installing;\n            if (newWorker) {\n              newWorker.addEventListener('statechange', () => {\n                if (\n                  newWorker.state === 'installed' &&\n                  navigator.serviceWorker.controller\n                ) {\n                  console.log('[Box] New dashboard version available');\n                }\n              });\n            }\n          });\n        })\n        .catch((err) => {\n          console.warn('[Box] SW registration failed:', err);\n        });\n    }, 3000);\n\n    return () => clearTimeout(timer);\n  }, []);\n\n  return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAOnB,SAAS,yBAAyB;AACvC,YAAU,MAAM;AACd,QACE,OAAO,WAAW,eAClB,EAAE,mBAAmB,cACrB,QAAQ,IAAI,aAAa,eACzB;AACA;AAAA,IACF;AAEA,UAAM,QAAQ,WAAW,MAAM;AAC7B,gBAAU,cACP,SAAS,UAAU,EAAE,OAAO,IAAI,CAAC,EACjC,KAAK,CAAC,iBAAiB;AACtB,qBAAa,iBAAiB,eAAe,MAAM;AACjD,gBAAM,YAAY,aAAa;AAC/B,cAAI,WAAW;AACb,sBAAU,iBAAiB,eAAe,MAAM;AAC9C,kBACE,UAAU,UAAU,eACpB,UAAU,cAAc,YACxB;AACA,wBAAQ,IAAI,uCAAuC;AAAA,cACrD;AAAA,YACF,CAAC;AAAA,UACH;AAAA,QACF,CAAC;AAAA,MACH,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,gBAAQ,KAAK,iCAAiC,GAAG;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,GAAI;AAEP,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/ai-soon/ai-coming-soon.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Box intelligence, coming soon.
+ *
+ * It replaces a chat screen that answered one way and promised more. Until the
+ * thing behind it is real, this says what is coming and lets people choose what
+ * comes first. Votes are kept in this browser for now.
+ *
+ * AN EGG: press the mark five times, or enter the old code (↑ ↑ ↓ ↓ ← → ← → B
+ * A), and a small game opens.
+ */
+export declare function AiComingSoon(): import("react").JSX.Element;

package/dist/ai-soon/ai-coming-soon.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import posthog from "posthog-js";
+import { Dialog, DialogContent, DialogTitle } from "@withpotter/ui-kit/dialog";
+import { CatchGame } from "./catch-game";
+const KONAMI = [
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+  "b",
+  "a"
+];
+const HeroScene = dynamic(
+  () => import("./hero-scene").then((m) => m.HeroScene),
+  {
+    ssr: false
+  }
+);
+function AiComingSoon() {
+  const [playing, setPlaying] = useState(false);
+  const [notified, setNotified] = useState(false);
+  const onNotify = () => {
+    posthog.capture("ai_notify_me_clicked");
+    setNotified(true);
+  };
+  const taps = useRef({ n: 0, at: 0 });
+  const [wiggle, setWiggle] = useState(0);
+  const onMark = useCallback(() => {
+    const now = Date.now();
+    taps.current.n = now - taps.current.at < 1e3 ? taps.current.n + 1 : 1;
+    taps.current.at = now;
+    setWiggle((w) => w + 1);
+    if (taps.current.n >= 5) {
+      taps.current.n = 0;
+      setPlaying(true);
+    }
+  }, []);
+  useEffect(() => {
+    let at = 0;
+    const onKey = (e) => {
+      const el = e.target;
+      if (el && /^(INPUT|TEXTAREA)$/.test(el.tagName)) return;
+      const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+      if (key === KONAMI[at]) {
+        at += 1;
+        if (at === KONAMI.length) {
+          at = 0;
+          setPlaying(true);
+        }
+      } else {
+        at = key === KONAMI[0] ? 1 : 0;
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  return (
+    // Cancels the shell's own padding so the hero can fill the whole frame.
+    /* @__PURE__ */ jsxs("div", { className: "-m-4 lg:-m-[20px]", children: [
+      /* @__PURE__ */ jsxs(
+        "header",
+        {
+          className: "relative isolate flex flex-col items-center justify-center overflow-hidden px-6 py-16 text-center",
+          style: {
+            // Inline, not classes: the scene's canvas is absolute and must never
+            // find the page as its container if the stylesheet is stale.
+            position: "relative",
+            overflow: "hidden",
+            isolation: "isolate",
+            // The whole frame: the shell's card is the viewport less its 12px margin
+            // top and bottom.
+            minHeight: "calc(100dvh - 1.5rem)",
+            // It is night out there whatever the app's theme is, so the type is white.
+            ["--text-primary"]: "white",
+            ["--text-secondary"]: "color-mix(in srgb, white 74%, transparent)",
+            ["--text-tertiary"]: "color-mix(in srgb, white 55%, transparent)",
+            background: "var(--brand-600)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(HeroScene, { onFail: () => {
+            } }),
+            /* @__PURE__ */ jsx(
+              "h1",
+              {
+                onClick: onMark,
+                className: "relative max-w-2xl cursor-default select-none text-balance text-5xl font-semibold leading-tight tracking-tight text-[var(--text-primary)] sm:text-6xl",
+                style: {
+                  transform: `rotate(${(wiggle % 2 ? 1 : -1) * Math.min(wiggle, 5) * 0.4}deg)`,
+                  transition: "transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)"
+                },
+                children: "Ready for a business with a brain of its own?"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "relative mt-4 max-w-xl text-balance text-lg leading-relaxed text-[var(--text-secondary)]", children: "Ask about your sales in plain words. Get the answer, the draft or the follow-up, done for you." }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onNotify,
+                disabled: notified,
+                className: "relative mt-7 inline-flex items-center transition-transform hover:scale-[1.03] active:scale-[0.98]",
+                style: {
+                  height: 44,
+                  padding: "0 24px",
+                  borderRadius: 999,
+                  background: "white",
+                  color: "var(--brand-600)",
+                  fontSize: 15,
+                  fontWeight: 500,
+                  opacity: notified ? 0.85 : 1
+                },
+                children: notified ? "You're on the list" : "Notify me"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Dialog, { open: playing, onOpenChange: setPlaying, children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          "aria-label": "Catch the Orders",
+          className: "max-w-[420px] p-4",
+          children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "mb-3 text-lg font-semibold text-[var(--text-primary)]", children: "Catch the Orders" }),
+            playing && /* @__PURE__ */ jsx(CatchGame, {})
+          ]
+        }
+      ) })
+    ] })
+  );
+}
+export {
+  AiComingSoon
+};
+//# sourceMappingURL=ai-coming-soon.js.map

package/dist/ai-soon/ai-coming-soon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ai-soon/ai-coming-soon.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport dynamic from 'next/dynamic';\nimport posthog from 'posthog-js';\nimport { Dialog, DialogContent, DialogTitle } from '@withpotter/ui-kit/dialog';\nimport { CatchGame } from './catch-game';\n\nconst KONAMI = [\n  'ArrowUp',\n  'ArrowUp',\n  'ArrowDown',\n  'ArrowDown',\n  'ArrowLeft',\n  'ArrowRight',\n  'ArrowLeft',\n  'ArrowRight',\n  'b',\n  'a',\n];\n\n// Loaded only in the browser: it pulls in three.js, which a server render has no\n// use for and a phone should not wait on before the words are on screen.\nconst HeroScene = dynamic(\n  () => import('./hero-scene').then((m) => m.HeroScene),\n  {\n    ssr: false,\n  },\n);\n\n/**\n * Box intelligence, coming soon.\n *\n * It replaces a chat screen that answered one way and promised more. Until the\n * thing behind it is real, this says what is coming and lets people choose what\n * comes first. Votes are kept in this browser for now.\n *\n * AN EGG: press the mark five times, or enter the old code (↑ ↑ ↓ ↓ ← → ← → B\n * A), and a small game opens.\n */\nexport function AiComingSoon() {\n  const [playing, setPlaying] = useState(false);\n  const [notified, setNotified] = useState(false);\n  const onNotify = () => {\n    // Recorded as a product event against the signed-in user; there is no\n    // waitlist table, so this is how the interest is counted.\n    posthog.capture('ai_notify_me_clicked');\n    setNotified(true);\n  };\n\n  // five presses of the mark, each within a second of the last\n  const taps = useRef<{ n: number; at: number }>({ n: 0, at: 0 });\n  const [wiggle, setWiggle] = useState(0);\n  const onMark = useCallback(() => {\n    const now = Date.now();\n    taps.current.n = now - taps.current.at < 1000 ? taps.current.n + 1 : 1;\n    taps.current.at = now;\n    setWiggle((w) => w + 1);\n    if (taps.current.n >= 5) {\n      taps.current.n = 0;\n      setPlaying(true);\n    }\n  }, []);\n\n  // the code\n  useEffect(() => {\n    let at = 0;\n    const onKey = (e: KeyboardEvent) => {\n      const el = e.target as HTMLElement | null;\n      if (el && /^(INPUT|TEXTAREA)$/.test(el.tagName)) return;\n      const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;\n      if (key === KONAMI[at]) {\n        at += 1;\n        if (at === KONAMI.length) {\n          at = 0;\n          setPlaying(true);\n        }\n      } else {\n        at = key === KONAMI[0] ? 1 : 0;\n      }\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, []);\n\n  return (\n    // Cancels the shell's own padding so the hero can fill the whole frame.\n    <div className=\"-m-4 lg:-m-[20px]\">\n      <header\n        className=\"relative isolate flex flex-col items-center justify-center overflow-hidden px-6 py-16 text-center\"\n        style={{\n          // Inline, not classes: the scene's canvas is absolute and must never\n          // find the page as its container if the stylesheet is stale.\n          position: 'relative',\n          overflow: 'hidden',\n          isolation: 'isolate',\n          // The whole frame: the shell's card is the viewport less its 12px margin\n          // top and bottom.\n          minHeight: 'calc(100dvh - 1.5rem)',\n          // It is night out there whatever the app's theme is, so the type is white.\n          ['--text-primary' as string]: 'white',\n          ['--text-secondary' as string]:\n            'color-mix(in srgb, white 74%, transparent)',\n          ['--text-tertiary' as string]:\n            'color-mix(in srgb, white 55%, transparent)',\n          background: 'var(--brand-600)',\n        }}\n      >\n        {/* If the browser cannot make a WebGL context the solid blue below stays. */}\n        <HeroScene onFail={() => {}} />\n\n        {/* The egg: five quick presses on the headline, or the old code, open the\n            game. It is plain text to everyone else. */}\n        <h1\n          onClick={onMark}\n          className=\"relative max-w-2xl cursor-default select-none text-balance text-5xl font-semibold leading-tight tracking-tight text-[var(--text-primary)] sm:text-6xl\"\n          style={{\n            transform: `rotate(${(wiggle % 2 ? 1 : -1) * Math.min(wiggle, 5) * 0.4}deg)`,\n            transition: 'transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)',\n          }}\n        >\n          Ready for a business with a brain of its own?\n        </h1>\n        <p className=\"relative mt-4 max-w-xl text-balance text-lg leading-relaxed text-[var(--text-secondary)]\">\n          Ask about your sales in plain words. Get the answer, the draft or the\n          follow-up, done for you.\n        </p>\n        <button\n          type=\"button\"\n          onClick={onNotify}\n          disabled={notified}\n          className=\"relative mt-7 inline-flex items-center transition-transform hover:scale-[1.03] active:scale-[0.98]\"\n          style={{\n            height: 44,\n            padding: '0 24px',\n            borderRadius: 999,\n            background: 'white',\n            color: 'var(--brand-600)',\n            fontSize: 15,\n            fontWeight: 500,\n            opacity: notified ? 0.85 : 1,\n          }}\n        >\n          {notified ? \"You're on the list\" : 'Notify me'}\n        </button>\n      </header>\n\n      <Dialog open={playing} onOpenChange={setPlaying}>\n        <DialogContent\n          aria-label=\"Catch the Orders\"\n          className=\"max-w-[420px] p-4\"\n        >\n          <DialogTitle className=\"mb-3 text-lg font-semibold text-[var(--text-primary)]\">\n            Catch the Orders\n          </DialogTitle>\n          {playing && <CatchGame />}\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ai-soon/catch-game.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Catch the Orders: slide the box under what is falling. Orders and cash are
+ * yours; a refund costs a life, and so does letting an order drop. Three lives,
+ * and it gets quicker the longer you last.
+ *
+ * Mounted only while its window is open, so nothing runs when it is closed.
+ * Mouse, touch and the arrow keys all steer.
+ */
+export declare function CatchGame(): import("react").JSX.Element;

package/dist/ai-soon/catch-game.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { BRAND } from "@withpotter/lib/brand";
+const W = 360;
+const H = 480;
+const PADDLE_W = 76;
+const PADDLE_H = 14;
+const BEST_KEY = "box-catch-best";
+const FACE = {
+  order: { glyph: "\u{1F6CD}\uFE0F", pts: 1 },
+  cash: { glyph: "\u{1F4B8}", pts: 5 },
+  refund: { glyph: "\u21A9\uFE0F", pts: 0 }
+};
+function CatchGame() {
+  const canvas = useRef(null);
+  const [score, setScore] = useState(0);
+  const [lives, setLives] = useState(3);
+  const [best, setBest] = useState(() => {
+    try {
+      return Number(localStorage.getItem(BEST_KEY)) || 0;
+    } catch {
+      return 0;
+    }
+  });
+  const [round, setRound] = useState(0);
+  const over = lives <= 0;
+  useEffect(() => {
+    const el = canvas.current;
+    const ctx = el?.getContext("2d");
+    if (!el || !ctx) return;
+    let paddleX = W / 2;
+    let keyDir = 0;
+    let drops = [];
+    let sc = 0;
+    let lv = 3;
+    let t = 0;
+    let spawnIn = 20;
+    let raf = 0;
+    let done = false;
+    const loseLife = () => {
+      lv -= 1;
+      setLives(lv);
+      if (lv <= 0) {
+        done = true;
+        try {
+          const prev = Number(localStorage.getItem(BEST_KEY)) || 0;
+          if (sc > prev) {
+            localStorage.setItem(BEST_KEY, String(sc));
+            setBest(sc);
+          }
+        } catch {
+        }
+      }
+    };
+    const onMove = (e) => {
+      const r = el.getBoundingClientRect();
+      paddleX = (e.clientX - r.left) / r.width * W;
+    };
+    const onKey = (e) => {
+      if (e.key === "ArrowLeft") keyDir = e.type === "keydown" ? -1 : 0;
+      if (e.key === "ArrowRight") keyDir = e.type === "keydown" ? 1 : 0;
+    };
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerdown", onMove);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("keyup", onKey);
+    const frame = () => {
+      t += 1;
+      paddleX = Math.max(
+        PADDLE_W / 2,
+        Math.min(W - PADDLE_W / 2, paddleX + keyDir * 7)
+      );
+      const speed = 2.2 + Math.min(4.5, sc / 25);
+      spawnIn -= 1;
+      if (spawnIn <= 0 && !done) {
+        const roll = Math.random();
+        drops.push({
+          x: 20 + Math.random() * (W - 40),
+          y: -20,
+          vy: speed * (0.8 + Math.random() * 0.5),
+          kind: roll < 0.68 ? "order" : roll < 0.84 ? "cash" : "refund"
+        });
+        spawnIn = Math.max(16, 46 - sc / 3);
+      }
+      const top = H - 30 - PADDLE_H;
+      drops = drops.filter((d) => {
+        d.y += d.vy;
+        const caught = d.y > top - 6 && d.y < top + PADDLE_H && Math.abs(d.x - paddleX) < PADDLE_W / 2 + 8;
+        if (caught && !done) {
+          if (d.kind === "refund") loseLife();
+          else {
+            sc += FACE[d.kind].pts;
+            setScore(sc);
+          }
+          return false;
+        }
+        if (d.y > H + 20) {
+          if (d.kind === "order" && !done) loseLife();
+          return false;
+        }
+        return true;
+      });
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = BRAND[900];
+      ctx.fillRect(0, 0, W, H);
+      ctx.strokeStyle = "color-mix(in srgb, white 5%, transparent)";
+      for (let y = t * 0.5 % 40; y < H; y += 40) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(W, y);
+        ctx.stroke();
+      }
+      ctx.font = "26px system-ui, sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      for (const d of drops) ctx.fillText(FACE[d.kind].glyph, d.x, d.y);
+      const px = paddleX - PADDLE_W / 2;
+      ctx.fillStyle = BRAND[500];
+      ctx.beginPath();
+      ctx.roundRect(px, top - 8, PADDLE_W * 0.46, PADDLE_H + 8, 5);
+      ctx.fill();
+      ctx.fillStyle = BRAND[300];
+      ctx.beginPath();
+      ctx.roundRect(px + PADDLE_W * 0.54, top, PADDLE_W * 0.46, PADDLE_H, 5);
+      ctx.fill();
+      if (!done) raf = requestAnimationFrame(frame);
+    };
+    raf = requestAnimationFrame(frame);
+    return () => {
+      done = true;
+      cancelAnimationFrame(raf);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerdown", onMove);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("keyup", onKey);
+    };
+  }, [round]);
+  const again = () => {
+    setScore(0);
+    setLives(3);
+    setRound((n) => n + 1);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[360px] select-none", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between text-sm text-[var(--text-secondary)]", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Score",
+        " ",
+        /* @__PURE__ */ jsx("b", { className: "tabular-nums text-[var(--text-primary)]", children: score })
+      ] }),
+      /* @__PURE__ */ jsx("span", { "aria-label": `${Math.max(lives, 0)} lives left`, children: "\u2764\uFE0F".repeat(Math.max(lives, 0)) || "\u2014" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Best ",
+        /* @__PURE__ */ jsx("b", { className: "tabular-nums text-[var(--text-primary)]", children: best })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-xl border border-[var(--border-default)]", children: [
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvas,
+          width: W,
+          height: H,
+          className: "block h-auto w-full touch-none",
+          "aria-label": "Catch the Orders game"
+        }
+      ),
+      over && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-black/70 backdrop-blur-[2px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-white", children: score >= best && score > 0 ? "New best!" : "Shop closed" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-white/70", children: [
+          "You caught ",
+          score,
+          " ",
+          score === 1 ? "point" : "points",
+          " of sales."
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: again,
+            className: "mt-4 rounded-lg bg-[var(--brand-500)] px-4 py-2 text-sm font-medium text-white",
+            children: "Open again"
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-center text-xs text-[var(--text-tertiary)]", children: "Catch orders \u{1F6CD}\uFE0F and cash \u{1F4B8}. Dodge refunds \u21A9\uFE0F. Don\u2019t let an order drop. Move with your mouse, finger or \u2190 \u2192." })
+  ] });
+}
+export {
+  CatchGame
+};
+//# sourceMappingURL=catch-game.js.map

package/dist/ai-soon/catch-game.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ai-soon/catch-game.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { BRAND } from '@withpotter/lib/brand';\n\nconst W = 360;\nconst H = 480;\nconst PADDLE_W = 76;\nconst PADDLE_H = 14;\nconst BEST_KEY = 'box-catch-best';\n\ntype Kind = 'order' | 'cash' | 'refund';\ninterface Drop {\n  x: number;\n  y: number;\n  vy: number;\n  kind: Kind;\n}\n\nconst FACE: Record<Kind, { glyph: string; pts: number }> = {\n  order: { glyph: '🛍️', pts: 1 },\n  cash: { glyph: '💸', pts: 5 },\n  refund: { glyph: '↩️', pts: 0 },\n};\n\n/**\n * Catch the Orders: slide the box under what is falling. Orders and cash are\n * yours; a refund costs a life, and so does letting an order drop. Three lives,\n * and it gets quicker the longer you last.\n *\n * Mounted only while its window is open, so nothing runs when it is closed.\n * Mouse, touch and the arrow keys all steer.\n */\nexport function CatchGame() {\n  const canvas = useRef<HTMLCanvasElement>(null);\n  const [score, setScore] = useState(0);\n  const [lives, setLives] = useState(3);\n  // Read once on mount: the game only renders in the browser (it is opened by a\n  // click), so there is no server markup for this to disagree with.\n  const [best, setBest] = useState(() => {\n    try {\n      return Number(localStorage.getItem(BEST_KEY)) || 0;\n    } catch {\n      return 0;\n    }\n  });\n  const [round, setRound] = useState(0);\n  const over = lives <= 0;\n\n  useEffect(() => {\n    const el = canvas.current;\n    const ctx = el?.getContext('2d');\n    if (!el || !ctx) return;\n\n    let paddleX = W / 2;\n    let keyDir = 0;\n    let drops: Drop[] = [];\n    let sc = 0;\n    let lv = 3;\n    let t = 0;\n    let spawnIn = 20;\n    let raf = 0;\n    let done = false;\n\n    const loseLife = () => {\n      lv -= 1;\n      setLives(lv);\n      if (lv <= 0) {\n        done = true;\n        try {\n          const prev = Number(localStorage.getItem(BEST_KEY)) || 0;\n          if (sc > prev) {\n            localStorage.setItem(BEST_KEY, String(sc));\n            setBest(sc);\n          }\n        } catch {}\n      }\n    };\n\n    const onMove = (e: PointerEvent) => {\n      const r = el.getBoundingClientRect();\n      paddleX = ((e.clientX - r.left) / r.width) * W;\n    };\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft') keyDir = e.type === 'keydown' ? -1 : 0;\n      if (e.key === 'ArrowRight') keyDir = e.type === 'keydown' ? 1 : 0;\n    };\n    el.addEventListener('pointermove', onMove);\n    el.addEventListener('pointerdown', onMove);\n    window.addEventListener('keydown', onKey);\n    window.addEventListener('keyup', onKey);\n\n    const frame = () => {\n      t += 1;\n      paddleX = Math.max(\n        PADDLE_W / 2,\n        Math.min(W - PADDLE_W / 2, paddleX + keyDir * 7),\n      );\n      const speed = 2.2 + Math.min(4.5, sc / 25);\n\n      spawnIn -= 1;\n      if (spawnIn <= 0 && !done) {\n        const roll = Math.random();\n        drops.push({\n          x: 20 + Math.random() * (W - 40),\n          y: -20,\n          vy: speed * (0.8 + Math.random() * 0.5),\n          kind: roll < 0.68 ? 'order' : roll < 0.84 ? 'cash' : 'refund',\n        });\n        spawnIn = Math.max(16, 46 - sc / 3);\n      }\n\n      const top = H - 30 - PADDLE_H;\n      drops = drops.filter((d) => {\n        d.y += d.vy;\n        const caught =\n          d.y > top - 6 &&\n          d.y < top + PADDLE_H &&\n          Math.abs(d.x - paddleX) < PADDLE_W / 2 + 8;\n        if (caught && !done) {\n          if (d.kind === 'refund') loseLife();\n          else {\n            sc += FACE[d.kind].pts;\n            setScore(sc);\n          }\n          return false;\n        }\n        if (d.y > H + 20) {\n          if (d.kind === 'order' && !done) loseLife();\n          return false;\n        }\n        return true;\n      });\n\n      // paint\n      ctx.clearRect(0, 0, W, H);\n      ctx.fillStyle = BRAND[900];\n      ctx.fillRect(0, 0, W, H);\n      ctx.strokeStyle = 'color-mix(in srgb, white 5%, transparent)';\n      for (let y = (t * 0.5) % 40; y < H; y += 40) {\n        ctx.beginPath();\n        ctx.moveTo(0, y);\n        ctx.lineTo(W, y);\n        ctx.stroke();\n      }\n      ctx.font = '26px system-ui, sans-serif';\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'middle';\n      for (const d of drops) ctx.fillText(FACE[d.kind].glyph, d.x, d.y);\n\n      // the box: two blocks, one high and one low, as the mark has them\n      const px = paddleX - PADDLE_W / 2;\n      ctx.fillStyle = BRAND[500];\n      ctx.beginPath();\n      ctx.roundRect(px, top - 8, PADDLE_W * 0.46, PADDLE_H + 8, 5);\n      ctx.fill();\n      ctx.fillStyle = BRAND[300];\n      ctx.beginPath();\n      ctx.roundRect(px + PADDLE_W * 0.54, top, PADDLE_W * 0.46, PADDLE_H, 5);\n      ctx.fill();\n\n      if (!done) raf = requestAnimationFrame(frame);\n    };\n    raf = requestAnimationFrame(frame);\n\n    return () => {\n      done = true;\n      cancelAnimationFrame(raf);\n      el.removeEventListener('pointermove', onMove);\n      el.removeEventListener('pointerdown', onMove);\n      window.removeEventListener('keydown', onKey);\n      window.removeEventListener('keyup', onKey);\n    };\n  }, [round]);\n\n  const again = () => {\n    setScore(0);\n    setLives(3);\n    setRound((n) => n + 1);\n  };\n\n  return (\n    <div className=\"mx-auto w-full max-w-[360px] select-none\">\n      <div className=\"mb-2 flex items-center justify-between text-sm text-[var(--text-secondary)]\">\n        <span>\n          Score{' '}\n          <b className=\"tabular-nums text-[var(--text-primary)]\">{score}</b>\n        </span>\n        <span aria-label={`${Math.max(lives, 0)} lives left`}>\n          {'❤️'.repeat(Math.max(lives, 0)) || '—'}\n        </span>\n        <span>\n          Best <b className=\"tabular-nums text-[var(--text-primary)]\">{best}</b>\n        </span>\n      </div>\n      <div className=\"relative overflow-hidden rounded-xl border border-[var(--border-default)]\">\n        <canvas\n          ref={canvas}\n          width={W}\n          height={H}\n          className=\"block h-auto w-full touch-none\"\n          aria-label=\"Catch the Orders game\"\n        />\n        {over && (\n          <div className=\"absolute inset-0 grid place-items-center bg-black/70 backdrop-blur-[2px]\">\n            <div className=\"text-center\">\n              <p className=\"text-lg font-semibold text-white\">\n                {score >= best && score > 0 ? 'New best!' : 'Shop closed'}\n              </p>\n              <p className=\"mt-1 text-sm text-white/70\">\n                You caught {score} {score === 1 ? 'point' : 'points'} of sales.\n              </p>\n              <button\n                type=\"button\"\n                onClick={again}\n                className=\"mt-4 rounded-lg bg-[var(--brand-500)] px-4 py-2 text-sm font-medium text-white\"\n              >\n                Open again\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n      <p className=\"mt-2 text-center text-xs text-[var(--text-tertiary)]\">\n        Catch orders 🛍️ and cash 💸. Dodge refunds ↩️. Don&rsquo;t let an order\n        drop. Move with your mouse, finger or ← →.\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ai-soon/hero-scene.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The hero's background: a flowing blue gradient, drawn by a fragment shader
+ * on a full-screen triangle. A few soft colour fields drift slowly and lean a
+ * little toward the pointer, with film grain on top so it is not a banded CSS
+ * gradient. `three` loads in the browser only, after the page has painted.
+ *
+ * `onFail` is called when the browser cannot make a WebGL context, so the page
+ * can show its flat version instead of an empty box.
+ */
+export declare function HeroScene({ onFail }: {
+    onFail: () => void;
+}): import("react").JSX.Element;