@withpotter/components 0.13.0-next.101

package/dist/dashboard/home/ask-assembling.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Check } from "lucide-react";
+import { durations, eases } from "@withpotter/lib/motion";
+const MIN_MS = 520;
+const STAGGER_MS = 90;
+function searchSources(order) {
+  return [`Your ${order.plural}`, "Customers", "Invoices", "Products"];
+}
+function AskAssembling({
+  sources,
+  /** True while the requests are still out. The floor is applied on top. */
+  working,
+  onDone
+}) {
+  const reduce = useReducedMotion() ?? false;
+  const [elapsed, setElapsed] = useState(false);
+  const doneRef = useRef(onDone);
+  useEffect(() => {
+    doneRef.current = onDone;
+  });
+  useEffect(() => {
+    const t = setTimeout(() => setElapsed(true), reduce ? 0 : MIN_MS);
+    return () => clearTimeout(t);
+  }, [reduce]);
+  useEffect(() => {
+    if (!working && elapsed) doneRef.current();
+  }, [working, elapsed]);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -4 },
+      transition: { duration: durations.fast, ease: eases.out },
+      className: "space-y-2",
+      children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: sources.map((s, i) => /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: reduce ? false : { opacity: 0, x: -6 },
+          animate: { opacity: 1, x: 0 },
+          transition: {
+            duration: durations.normal,
+            ease: eases.out,
+            delay: reduce ? 0 : i * STAGGER_MS / 1e3
+          },
+          className: "flex items-center gap-3",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "grid h-4 w-4 shrink-0 place-items-center rounded-full bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(Check, { className: "h-[9px] w-[9px] text-[var(--text-tertiary)]" }) }),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: reduce ? false : { opacity: 0.45 },
+                animate: { opacity: 1 },
+                transition: {
+                  duration: durations.slow,
+                  ease: eases.out,
+                  delay: reduce ? 0 : i * STAGGER_MS / 1e3
+                },
+                className: "text-sm text-[var(--text-tertiary)]",
+                children: s
+              }
+            )
+          ]
+        },
+        s
+      )) })
+    }
+  );
+}
+export {
+  AskAssembling,
+  searchSources
+};
+//# sourceMappingURL=ask-assembling.js.map

package/dist/dashboard/home/ask-assembling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/ask-assembling.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Check } from 'lucide-react';\nimport { durations, eases } from '@withpotter/lib/motion';\n\n/**\n * Box going and getting it, drawn the way Arc Search draws it.\n *\n * ARC'S MOVE, AND WHY IT IS NOT A SPINNER. \"Browse for Me\" reads six or more\n * sites and builds one page out of them, and the loading state does not hide\n * that — it SHOWS the work, source by source, so the wait stops being dead time\n * and becomes the reason to trust the answer. A spinner says \"wait\". This says\n * \"here is what I am reading\", which is the only loading state that makes the\n * result more credible rather than merely later.\n *\n * Built to the constraints Josh Miller published when they redesigned Arc\n * Search's own loader: bold enough to notice but not distracting, pulls the eye\n * to the top of the screen, and on brand. Ours sits directly under the bar,\n * which is where the eye already is because it is where the caret was.\n *\n * ── THE HONESTY RULE, AND IT IS THE WHOLE REASON THIS FILE IS CAREFUL ──\n *\n * Arc can show six sites because it is genuinely reading six sites. THE ROWS\n * HERE NAME ONLY WHAT IS ACTUALLY BEING FETCHED. `find` runs\n * `useCommandSearch`, which hits orders, customers, invoices and products in\n * one `Promise.all` — four real requests, so four rows, and the wait is real.\n * `help` reads a corpus already in memory and gets NO rows and no animation,\n * because there is nothing to wait for and a progress display over an\n * instantaneous lookup is theatre. `setup` does its POST behind its own button,\n * later, and says so there.\n *\n * A branch with no work does not get a loading state. That is the difference\n * between this and every AI product that plays a two-second \"thinking…\" over a\n * cache hit, and it is the same line `use-potter-ask` already drew: *there is\n * nothing to be pending FOR*.\n *\n * THE FLOOR IS FOR LEGIBILITY, NOT FOR DRAMA. A fetch that returns in 80ms\n * would flash four rows and vanish, which reads as a glitch rather than as\n * speed. `MIN_MS` holds the assembly on screen just long enough to be read. It\n * never delays the ANSWER — the answer is already rendering behind it — and it\n * never runs at all where there was no request.\n */\n\n/** Long enough that four rows can be read; short enough to feel instant. */\nconst MIN_MS = 520;\n/** Gap between rows lighting up, so they read as a sequence not a block. */\nconst STAGGER_MS = 90;\n\n/**\n * The four collections the typeahead actually reads.\n *\n * These are not a description of the feature, they are the four requests in\n * `useCommandSearch`'s `Promise.all`. If that list changes, this one is wrong\n * and the loading state has started lying — which is the failure mode this\n * whole file exists to avoid, so they are named identically and defined once.\n */\nexport function searchSources(order: { plural: string }): string[] {\n  return [`Your ${order.plural}`, 'Customers', 'Invoices', 'Products'];\n}\n\nexport function AskAssembling({\n  sources,\n  /** True while the requests are still out. The floor is applied on top. */\n  working,\n  onDone,\n}: {\n  sources: string[];\n  working: boolean;\n  onDone: () => void;\n}) {\n  const reduce = useReducedMotion() ?? false;\n  const [elapsed, setElapsed] = useState(false);\n  const doneRef = useRef(onDone);\n  useEffect(() => {\n    doneRef.current = onDone;\n  });\n\n  // The legibility floor, started on mount rather than on `working` flipping —\n  // a request that has already resolved by the time this renders still gets its\n  // moment on screen instead of a single frame.\n  useEffect(() => {\n    const t = setTimeout(() => setElapsed(true), reduce ? 0 : MIN_MS);\n    return () => clearTimeout(t);\n  }, [reduce]);\n\n  useEffect(() => {\n    if (!working && elapsed) doneRef.current();\n  }, [working, elapsed]);\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: -4 }}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0, y: -4 }}\n      transition={{ duration: durations.fast, ease: eases.out }}\n      className=\"space-y-2\"\n    >\n      <AnimatePresence initial={false}>\n        {sources.map((s, i) => (\n          <motion.div\n            key={s}\n            initial={reduce ? false : { opacity: 0, x: -6 }}\n            animate={{ opacity: 1, x: 0 }}\n            transition={{\n              duration: durations.normal,\n              ease: eases.out,\n              delay: reduce ? 0 : (i * STAGGER_MS) / 1000,\n            }}\n            className=\"flex items-center gap-3\"\n          >\n            {/* The tick arrives when the row does. Four indeterminate spinners\n                would be four things saying \"unknown\"; a row that lands already\n                read says the work is finishing in front of you, which is what\n                is actually happening — the requests go out together. */}\n            <span className=\"grid h-4 w-4 shrink-0 place-items-center rounded-full bg-[var(--bg-muted)]\">\n              <Check className=\"h-[9px] w-[9px] text-[var(--text-tertiary)]\" />\n            </span>\n            {/* The label RESOLVES rather than shimmers. A sweep of light\n                across the words is the obvious move here and it is a gradient,\n                which this codebase does not ship — and the ban is right in this\n                case rather than merely binding: a shimmer is the vocabulary of\n                a skeleton, of content not yet known, and the label is known.\n                What is in progress is the reading. So the row lands dim and\n                settles to full as its request comes home, which says the same\n                thing with the one property already in the motion system. */}\n            <motion.span\n              initial={reduce ? false : { opacity: 0.45 }}\n              animate={{ opacity: 1 }}\n              transition={{\n                duration: durations.slow,\n                ease: eases.out,\n                delay: reduce ? 0 : (i * STAGGER_MS) / 1000,\n              }}\n              className=\"text-sm text-[var(--text-tertiary)]\"\n            >\n              {s}\n            </motion.span>\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </motion.div>\n  );\n}\n"],"mappings":";AAqGU,SAgBI,KAhBJ;AAnGV,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,iBAAiB,QAAQ,wBAAwB;AAC1D,SAAS,aAAa;AACtB,SAAS,WAAW,aAAa;AAyCjC,MAAM,SAAS;AAEf,MAAM,aAAa;AAUZ,SAAS,cAAc,OAAqC;AACjE,SAAO,CAAC,QAAQ,MAAM,MAAM,IAAI,aAAa,YAAY,UAAU;AACrE;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA;AAAA,EAEA;AAAA,EACA;AACF,GAIG;AACD,QAAM,SAAS,iBAAiB,KAAK;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,UAAU,OAAO,MAAM;AAC7B,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,CAAC;AAKD,YAAU,MAAM;AACd,UAAM,IAAI,WAAW,MAAM,WAAW,IAAI,GAAG,SAAS,IAAI,MAAM;AAChE,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,QAAI,CAAC,WAAW,QAAS,SAAQ,QAAQ;AAAA,EAC3C,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,MAAM,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC1B,YAAY,EAAE,UAAU,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,MACxD,WAAU;AAAA,MAEV,8BAAC,mBAAgB,SAAS,OACvB,kBAAQ,IAAI,CAAC,GAAG,MACf;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEC,SAAS,SAAS,QAAQ,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,UAC9C,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,UAC5B,YAAY;AAAA,YACV,UAAU,UAAU;AAAA,YACpB,MAAM,MAAM;AAAA,YACZ,OAAO,SAAS,IAAK,IAAI,aAAc;AAAA,UACzC;AAAA,UACA,WAAU;AAAA,UAMV;AAAA,gCAAC,UAAK,WAAU,8EACd,8BAAC,SAAM,WAAU,+CAA8C,GACjE;AAAA,YASA;AAAA,cAAC,OAAO;AAAA,cAAP;AAAA,gBACC,SAAS,SAAS,QAAQ,EAAE,SAAS,KAAK;AAAA,gBAC1C,SAAS,EAAE,SAAS,EAAE;AAAA,gBACtB,YAAY;AAAA,kBACV,UAAU,UAAU;AAAA,kBACpB,MAAM,MAAM;AAAA,kBACZ,OAAO,SAAS,IAAK,IAAI,aAAc;AAAA,gBACzC;AAAA,gBACA,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,QApCK;AAAA,MAqCP,CACD,GACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/dashboard/home/ask-attachments.d.ts

@@ -0,0 +1,12 @@
+/**
+ * What you have chosen to send, shown in the card before you send it.
+ *
+ * A picture is its own thumbnail and anything else (a product list, say) is a
+ * named chip, each with a × to take it back. They are held on the card until
+ * Send, which hands them over with the sentence — an attachment you cannot see
+ * is one you cannot check or take back.
+ */
+export declare function AskAttachments({ files, onRemove, }: {
+    files: File[];
+    onRemove: (index: number) => void;
+}): import("react").JSX.Element | null;

package/dist/dashboard/home/ask-attachments.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { FileText, X } from "lucide-react";
+function AskAttachments({
+  files,
+  onRemove
+}) {
+  const previews = useMemo(
+    () => files.map((file) => ({
+      file,
+      url: file.type.startsWith("image/") ? URL.createObjectURL(file) : null
+    })),
+    [files]
+  );
+  useEffect(
+    () => () => previews.forEach((p) => p.url && URL.revokeObjectURL(p.url)),
+    [previews]
+  );
+  if (previews.length === 0) return null;
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2 px-4 pt-4", children: previews.map((p, i) => /* @__PURE__ */ jsxs("li", { className: "relative", children: [
+    p.url ? (
+      // eslint-disable-next-line @next/next/no-img-element -- a local blob preview, not a remote image
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: p.url,
+          alt: p.file.name,
+          className: "size-12 rounded-lg border border-[var(--border-default)] object-cover"
+        }
+      )
+    ) : /* @__PURE__ */ jsxs("span", { className: "flex h-12 max-w-48 items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-muted)] px-3 text-sm text-[var(--text-secondary)]", children: [
+      /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-4 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: p.file.name })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => onRemove(i),
+        "aria-label": `Remove ${p.file.name}`,
+        className: "absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-[var(--text-primary)] text-[var(--bg-base)] transition-opacity hover:opacity-80",
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+      }
+    )
+  ] }, `${p.file.name}-${i}`)) });
+}
+export {
+  AskAttachments
+};
+//# sourceMappingURL=ask-attachments.js.map

package/dist/dashboard/home/ask-attachments.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/ask-attachments.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo } from 'react';\nimport { FileText, X } from 'lucide-react';\n\n/**\n * What you have chosen to send, shown in the card before you send it.\n *\n * A picture is its own thumbnail and anything else (a product list, say) is a\n * named chip, each with a × to take it back. They are held on the card until\n * Send, which hands them over with the sentence — an attachment you cannot see\n * is one you cannot check or take back.\n */\nexport function AskAttachments({\n  files,\n  onRemove,\n}: {\n  files: File[];\n  onRemove: (index: number) => void;\n}) {\n  const previews = useMemo(\n    () =>\n      files.map((file) => ({\n        file,\n        url: file.type.startsWith('image/') ? URL.createObjectURL(file) : null,\n      })),\n    [files],\n  );\n\n  /* Object URLs are held by the document until revoked, so each set is\n     released when the next one replaces it. */\n  useEffect(\n    () => () => previews.forEach((p) => p.url && URL.revokeObjectURL(p.url)),\n    [previews],\n  );\n\n  if (previews.length === 0) return null;\n\n  return (\n    <ul className=\"flex flex-wrap gap-2 px-4 pt-4\">\n      {previews.map((p, i) => (\n        <li key={`${p.file.name}-${i}`} className=\"relative\">\n          {p.url ? (\n            // eslint-disable-next-line @next/next/no-img-element -- a local blob preview, not a remote image\n            <img\n              src={p.url}\n              alt={p.file.name}\n              className=\"size-12 rounded-lg border border-[var(--border-default)] object-cover\"\n            />\n          ) : (\n            <span className=\"flex h-12 max-w-48 items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-muted)] px-3 text-sm text-[var(--text-secondary)]\">\n              <FileText aria-hidden className=\"size-4 shrink-0\" />\n              <span className=\"truncate\">{p.file.name}</span>\n            </span>\n          )}\n          <button\n            type=\"button\"\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={() => onRemove(i)}\n            aria-label={`Remove ${p.file.name}`}\n            className=\"absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-[var(--text-primary)] text-[var(--bg-base)] transition-opacity hover:opacity-80\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";AA4CY,cAMA,YANA;AA1CZ,SAAS,WAAW,eAAe;AACnC,SAAS,UAAU,SAAS;AAUrB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW;AAAA,IACf,MACE,MAAM,IAAI,CAAC,UAAU;AAAA,MACnB;AAAA,MACA,KAAK,KAAK,KAAK,WAAW,QAAQ,IAAI,IAAI,gBAAgB,IAAI,IAAI;AAAA,IACpE,EAAE;AAAA,IACJ,CAAC,KAAK;AAAA,EACR;AAIA;AAAA,IACE,MAAM,MAAM,SAAS,QAAQ,CAAC,MAAM,EAAE,OAAO,IAAI,gBAAgB,EAAE,GAAG,CAAC;AAAA,IACvE,CAAC,QAAQ;AAAA,EACX;AAEA,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,SACE,oBAAC,QAAG,WAAU,kCACX,mBAAS,IAAI,CAAC,GAAG,MAChB,qBAAC,QAA+B,WAAU,YACvC;AAAA,MAAE;AAAA;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,EAAE;AAAA,UACP,KAAK,EAAE,KAAK;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,QAEA,qBAAC,UAAK,WAAU,yJACd;AAAA,0BAAC,YAAS,eAAW,MAAC,WAAU,mBAAkB;AAAA,MAClD,oBAAC,UAAK,WAAU,YAAY,YAAE,KAAK,MAAK;AAAA,OAC1C;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM,SAAS,CAAC;AAAA,QACzB,cAAY,UAAU,EAAE,KAAK,IAAI;AAAA,QACjC,WAAU;AAAA,QAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,OAtBO,GAAG,EAAE,KAAK,IAAI,IAAI,CAAC,EAuB5B,CACD,GACH;AAEJ;","names":[]}

package/dist/dashboard/home/ask-capabilities.d.ts

@@ -0,0 +1,48 @@
+/**
+ * "Box can also do this", in the one place a merchant has already said what
+ * they are looking for.
+ *
+ * ── THE PAGE HAD ONE DOOR ──
+ *
+ * `/dashboard/explore` was reachable from the sidebar row and nowhere else,
+ * which means it is found by merchants who go looking for something to add.
+ * The merchants worth reaching are the other ones: somebody who types
+ * "waitlist" into search, gets nothing, and concludes the product does not do
+ * it. It does — it is one press away, on an archetype they have not switched
+ * on — and a search that answers "no results" to that question is the app
+ * declining to mention its own capability at the exact moment it was asked.
+ *
+ * So a search that matches a business model this workspace is NOT running
+ * offers it. Not as a record — this is not something they have — but as a
+ * section of its own under the records, headed as a suggestion.
+ *
+ * ── WHAT IT WILL NOT DO ──
+ *
+ * It never displaces a real result. It renders under them, and it is capped at
+ * two: a search box that answers a question about an order with three offers
+ * to change the shape of the business is an upsell wearing a search box, and
+ * the second time a merchant sees that they stop reading the panel.
+ *
+ * It is silent for a workspace already running the match, which is the common
+ * case and the one that would be most annoying to get wrong: a restaurant
+ * typing "tables" wants its tables, not an offer of the thing it already has.
+ *
+ * And it never claims a match on our own vocabulary alone. `navRowsFor` is
+ * what makes "waitlist" and "tabs" reach dine-in — the nav rows are the words
+ * merchants use, where "food-orders" is the word we use.
+ */
+/**
+ * A hook and not just a component, because the caller has to know.
+ *
+ * "Nothing matched" and an offer to switch the matching thing on are two
+ * answers to one question, and a panel that prints both is arguing with
+ * itself — which is exactly what happens in the common case, a merchant
+ * searching for a capability they do not have and having no records to show.
+ * So `ask-results` reads the offers, renders them, and drops its own
+ * no-results line when there are any.
+ */
+export declare function useCapabilityOffers(query: string): import("@withpotter/lib/business-intents").IntentCard[];
+export declare function AskCapabilities({ offers, onNavigate, }: {
+    offers: ReturnType<typeof useCapabilityOffers>;
+    onNavigate: () => void;
+}): import("react").JSX.Element | null;

package/dist/dashboard/home/ask-capabilities.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { ArrowRight, Grid2x2Plus } from "lucide-react";
+import { INTENT_CARDS } from "@withpotter/lib/business-intents";
+import { useIntentConfig } from "@withpotter/lib/intents/use-intent-config";
+import { navRowsFor } from "@withpotter/lib/intents/what-it-adds";
+function useCapabilityOffers(query) {
+  const { activeKeys } = useIntentConfig();
+  const q = query.trim().toLowerCase();
+  if (q.length < 2) return [];
+  return INTENT_CARDS.filter((card) => {
+    if (activeKeys.includes(card.id)) return false;
+    return card.label.toLowerCase().includes(q) || card.description.toLowerCase().includes(q) || card.verbPhrase.toLowerCase().includes(q) || navRowsFor(card.id, { includeGeneric: false }).some(
+      (row) => row.toLowerCase().includes(q)
+    );
+  }).slice(0, 2);
+}
+function AskCapabilities({
+  offers,
+  onNavigate
+}) {
+  if (offers.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("p", { className: "mb-2 flex items-center gap-2 px-1 text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsx(Grid2x2Plus, { className: "h-[11px] w-[11px]" }),
+      "Box can also"
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: offers.map((card) => {
+      const Icon = card.icon;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/dashboard/explore",
+          onClick: onNavigate,
+          className: "surface-interactive flex items-center gap-3 p-3",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]",
+                children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "block truncate text-md font-medium text-[var(--text-primary)]", children: card.label }),
+              /* @__PURE__ */ jsx("span", { className: "block truncate text-sm text-[var(--text-tertiary)]", children: navRowsFor(card.id, { includeGeneric: false }).slice(0, 4).join(", ") })
+            ] }),
+            /* @__PURE__ */ jsx(ArrowRight, { className: "shrink-0 text-[var(--text-muted)]" })
+          ]
+        }
+      ) }, card.id);
+    }) })
+  ] });
+}
+export {
+  AskCapabilities,
+  useCapabilityOffers
+};
+//# sourceMappingURL=ask-capabilities.js.map

package/dist/dashboard/home/ask-capabilities.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/ask-capabilities.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { ArrowRight, Grid2x2Plus } from 'lucide-react';\nimport { INTENT_CARDS } from '@withpotter/lib/business-intents';\nimport { useIntentConfig } from '@withpotter/lib/intents/use-intent-config';\nimport { navRowsFor } from '@withpotter/lib/intents/what-it-adds';\n\n/**\n * \"Box can also do this\", in the one place a merchant has already said what\n * they are looking for.\n *\n * ── THE PAGE HAD ONE DOOR ──\n *\n * `/dashboard/explore` was reachable from the sidebar row and nowhere else,\n * which means it is found by merchants who go looking for something to add.\n * The merchants worth reaching are the other ones: somebody who types\n * \"waitlist\" into search, gets nothing, and concludes the product does not do\n * it. It does — it is one press away, on an archetype they have not switched\n * on — and a search that answers \"no results\" to that question is the app\n * declining to mention its own capability at the exact moment it was asked.\n *\n * So a search that matches a business model this workspace is NOT running\n * offers it. Not as a record — this is not something they have — but as a\n * section of its own under the records, headed as a suggestion.\n *\n * ── WHAT IT WILL NOT DO ──\n *\n * It never displaces a real result. It renders under them, and it is capped at\n * two: a search box that answers a question about an order with three offers\n * to change the shape of the business is an upsell wearing a search box, and\n * the second time a merchant sees that they stop reading the panel.\n *\n * It is silent for a workspace already running the match, which is the common\n * case and the one that would be most annoying to get wrong: a restaurant\n * typing \"tables\" wants its tables, not an offer of the thing it already has.\n *\n * And it never claims a match on our own vocabulary alone. `navRowsFor` is\n * what makes \"waitlist\" and \"tabs\" reach dine-in — the nav rows are the words\n * merchants use, where \"food-orders\" is the word we use.\n */\n/**\n * A hook and not just a component, because the caller has to know.\n *\n * \"Nothing matched\" and an offer to switch the matching thing on are two\n * answers to one question, and a panel that prints both is arguing with\n * itself — which is exactly what happens in the common case, a merchant\n * searching for a capability they do not have and having no records to show.\n * So `ask-results` reads the offers, renders them, and drops its own\n * no-results line when there are any.\n */\nexport function useCapabilityOffers(query: string) {\n  const { activeKeys } = useIntentConfig();\n  const q = query.trim().toLowerCase();\n  if (q.length < 2) return [];\n  return INTENT_CARDS.filter((card) => {\n    if (activeKeys.includes(card.id)) return false;\n    return (\n      card.label.toLowerCase().includes(q) ||\n      card.description.toLowerCase().includes(q) ||\n      card.verbPhrase.toLowerCase().includes(q) ||\n      navRowsFor(card.id, { includeGeneric: false }).some((row) =>\n        row.toLowerCase().includes(q),\n      )\n    );\n  }).slice(0, 2);\n}\n\nexport function AskCapabilities({\n  offers,\n  onNavigate,\n}: {\n  offers: ReturnType<typeof useCapabilityOffers>;\n  onNavigate: () => void;\n}) {\n  if (offers.length === 0) return null;\n\n  return (\n    <div>\n      <p className=\"mb-2 flex items-center gap-2 px-1 text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n        <Grid2x2Plus className=\"h-[11px] w-[11px]\" />\n        Box can also\n      </p>\n      <ul className=\"space-y-2\">\n        {offers.map((card) => {\n          const Icon = card.icon;\n          return (\n            <li key={card.id}>\n              <Link\n                href=\"/dashboard/explore\"\n                onClick={onNavigate}\n                className=\"surface-interactive flex items-center gap-3 p-3\"\n              >\n                <span\n                  aria-hidden\n                  className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]\"\n                >\n                  <Icon className=\"size-4\" />\n                </span>\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"block truncate text-md font-medium text-[var(--text-primary)]\">\n                    {card.label}\n                  </span>\n                  {/* The rows it would put in the sidebar, which is both the\n                      honest description of what pressing this does and the\n                      reason the row matched at all. */}\n                  <span className=\"block truncate text-sm text-[var(--text-tertiary)]\">\n                    {navRowsFor(card.id, { includeGeneric: false })\n                      .slice(0, 4)\n                      .join(', ')}\n                  </span>\n                </span>\n                <ArrowRight className=\"shrink-0 text-[var(--text-muted)]\" />\n              </Link>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";AA+EM,SACE,KADF;AA7EN,OAAO,UAAU;AACjB,SAAS,YAAY,mBAAmB;AACxC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AA6CpB,SAAS,oBAAoB,OAAe;AACjD,QAAM,EAAE,WAAW,IAAI,gBAAgB;AACvC,QAAM,IAAI,MAAM,KAAK,EAAE,YAAY;AACnC,MAAI,EAAE,SAAS,EAAG,QAAO,CAAC;AAC1B,SAAO,aAAa,OAAO,CAAC,SAAS;AACnC,QAAI,WAAW,SAAS,KAAK,EAAE,EAAG,QAAO;AACzC,WACE,KAAK,MAAM,YAAY,EAAE,SAAS,CAAC,KACnC,KAAK,YAAY,YAAY,EAAE,SAAS,CAAC,KACzC,KAAK,WAAW,YAAY,EAAE,SAAS,CAAC,KACxC,WAAW,KAAK,IAAI,EAAE,gBAAgB,MAAM,CAAC,EAAE;AAAA,MAAK,CAAC,QACnD,IAAI,YAAY,EAAE,SAAS,CAAC;AAAA,IAC9B;AAAA,EAEJ,CAAC,EAAE,MAAM,GAAG,CAAC;AACf;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,MAAI,OAAO,WAAW,EAAG,QAAO;AAEhC,SACE,qBAAC,SACC;AAAA,yBAAC,OAAE,WAAU,2GACX;AAAA,0BAAC,eAAY,WAAU,qBAAoB;AAAA,MAAE;AAAA,OAE/C;AAAA,IACA,oBAAC,QAAG,WAAU,aACX,iBAAO,IAAI,CAAC,SAAS;AACpB,YAAM,OAAO,KAAK;AAClB,aACE,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBAEV,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,YAC3B;AAAA,YACA,qBAAC,UAAK,WAAU,kBACd;AAAA,kCAAC,UAAK,WAAU,iEACb,eAAK,OACR;AAAA,cAIA,oBAAC,UAAK,WAAU,sDACb,qBAAW,KAAK,IAAI,EAAE,gBAAgB,MAAM,CAAC,EAC3C,MAAM,GAAG,CAAC,EACV,KAAK,IAAI,GACd;AAAA,eACF;AAAA,YACA,oBAAC,cAAW,WAAU,qCAAoC;AAAA;AAAA;AAAA,MAC5D,KA1BO,KAAK,EA2Bd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/dashboard/home/ask-controls.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The three controls at the right end of the ask bar.
+ *
+ * Lifted out of `home-ask` for room, and they belong together anyway: they are
+ * the only things in that bar that are pressed rather than typed into, they
+ * share one frame and one size, and the rules about which of them is showing
+ * are rules about the same cluster.
+ */
+export declare function AskControls({ voice, value, canSend, engaged, inputRef, onSubmit, onClose, send, voiceLabels, }: {
+    voice: {
+        supported: boolean;
+        active: boolean;
+        start: () => Promise<void> | void;
+        stop: () => void;
+        /** Pressing it does nothing, e.g. a clip is already waiting to be sent. */
+        disabled?: boolean;
+    };
+    /** Replaces the default round send button. */
+    send?: React.ReactNode;
+    /** What the mic says it will do, for the person using a screen reader. */
+    voiceLabels?: {
+        start: string;
+        stop: string;
+    };
+    /** There is a sentence or an attachment to send. */
+    canSend: boolean;
+    value: string;
+    /** Anything is open under the bar: suggestions, results or a conversation. */
+    engaged: boolean;
+    inputRef: React.RefObject<HTMLTextAreaElement | null>;
+    onSubmit: (q: string) => void;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/dashboard/home/ask-controls.js

@@ -0,0 +1,65 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUp, Mic, Square, X } from "lucide-react";
+function AskControls({
+  voice,
+  value,
+  canSend,
+  engaged,
+  inputRef,
+  onSubmit,
+  onClose,
+  send,
+  voiceLabels = { start: "Talk to Box", stop: "Stop voice mode" }
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    voice.supported && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => {
+          if (voice.active) {
+            voice.stop();
+          } else {
+            inputRef.current?.focus();
+            void voice.start();
+          }
+        },
+        disabled: voice.disabled && !voice.active,
+        "aria-label": voice.active ? voiceLabels.stop : voiceLabels.start,
+        title: voice.active ? voiceLabels.stop : voiceLabels.start,
+        "aria-pressed": voice.active,
+        className: `grid size-8 shrink-0 place-items-center rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${voice.active ? "border-transparent bg-[var(--error)] text-white" : "border-[color-mix(in_srgb,var(--border-subtle)_55%,transparent)] bg-[var(--bg-muted)] text-[var(--text-tertiary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]"}`,
+        children: voice.active ? /* @__PURE__ */ jsx(Square, { className: "h-[9px] w-[9px] fill-current" }) : /* @__PURE__ */ jsx(Mic, {})
+      }
+    ),
+    engaged && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: onClose,
+        "aria-label": "Close",
+        className: "grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--error-bg)] hover:text-[var(--error)]",
+        children: /* @__PURE__ */ jsx(X, {})
+      }
+    ),
+    send ?? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => onSubmit(value),
+        "aria-label": "Send",
+        disabled: !canSend,
+        className: `grid size-8 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${canSend ? "bg-brand-500 text-white hover:bg-brand-600" : "bg-[var(--bg-muted)] text-[var(--text-muted)]"}`,
+        children: /* @__PURE__ */ jsx(ArrowUp, {})
+      }
+    )
+  ] });
+}
+export {
+  AskControls
+};
+//# sourceMappingURL=ask-controls.js.map

package/dist/dashboard/home/ask-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/ask-controls.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowUp, Mic, Square, X } from 'lucide-react';\n\n/**\n * The three controls at the right end of the ask bar.\n *\n * Lifted out of `home-ask` for room, and they belong together anyway: they are\n * the only things in that bar that are pressed rather than typed into, they\n * share one frame and one size, and the rules about which of them is showing\n * are rules about the same cluster.\n */\nexport function AskControls({\n  voice,\n  value,\n  canSend,\n  engaged,\n  inputRef,\n  onSubmit,\n  onClose,\n  send,\n  voiceLabels = { start: 'Talk to Box', stop: 'Stop voice mode' },\n}: {\n  voice: {\n    supported: boolean;\n    active: boolean;\n    start: () => Promise<void> | void;\n    stop: () => void;\n    /** Pressing it does nothing, e.g. a clip is already waiting to be sent. */\n    disabled?: boolean;\n  };\n  /** Replaces the default round send button. */\n  send?: React.ReactNode;\n  /** What the mic says it will do, for the person using a screen reader. */\n  voiceLabels?: { start: string; stop: string };\n  /** There is a sentence or an attachment to send. */\n  canSend: boolean;\n  value: string;\n  /** Anything is open under the bar: suggestions, results or a conversation. */\n  engaged: boolean;\n  inputRef: React.RefObject<HTMLTextAreaElement | null>;\n  onSubmit: (q: string) => void;\n  onClose: () => void;\n}) {\n  return (\n    <>\n      {/* Hidden where the browser has no recogniser, rather than shown and\n          dead. The icon becomes a stop square so the control says what\n          pressing it will do — and in voice mode that is a bigger claim than\n          it was for dictation, because pressing it ends a conversation rather\n          than closing a microphone. */}\n      {voice.supported && (\n        <button\n          type=\"button\"\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => {\n            // Both branches play their sound on the PRESS rather than on the\n            // recogniser being ready — `getUserMedia` can sit behind a\n            // permission prompt, and a confirmation that arrives late\n            // confirms nothing. Owned by the hook so every entrance to voice\n            // mode sounds the same, including the automatic one at the end of\n            // Box's reply, which has no button to hang a sound on.\n            if (voice.active) {\n              voice.stop();\n            } else {\n              inputRef.current?.focus();\n              void voice.start();\n            }\n          }}\n          disabled={voice.disabled && !voice.active}\n          aria-label={voice.active ? voiceLabels.stop : voiceLabels.start}\n          title={voice.active ? voiceLabels.stop : voiceLabels.start}\n          aria-pressed={voice.active}\n          // FRAMED, like Send. Two adjacent controls where one sits in a\n          // circle and the other floats bare read as two different KINDS of\n          // control — one a button, one a decoration — when they are both\n          // buttons. Same frame, same size, different job.\n          className={`grid size-8 shrink-0 place-items-center rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${\n            voice.active\n              ? 'border-transparent bg-[var(--error)] text-white'\n              : 'border-[color-mix(in_srgb,var(--border-subtle)_55%,transparent)] bg-[var(--bg-muted)] text-[var(--text-tertiary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]'\n          }`}\n        >\n          {voice.active ? (\n            <Square className=\"h-[9px] w-[9px] fill-current\" />\n          ) : (\n            <Mic />\n          )}\n        </button>\n      )}\n\n      {/* THE WAY BACK, on the bar, in every engaged state.\n\n          Focusing hides the whole board — deliberately; the suggestions want\n          the room. But the exits were Escape and a click on dead space, and\n          once you typed a word the reward for losing the board was one grey\n          line of \"Nothing matched\". John, twice: *\"i cant seem to close a\n          chat\"*, then *\"you cant close it when you start prompting\"*. The\n          first answer was an X above the thread, which exists only once a\n          thread does.\n\n          The bar is the one element present in all four engaged states, and\n          a control that ends something must not be rendered by the thing it\n          ends. */}\n      {engaged && (\n        <button\n          type=\"button\"\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onClose}\n          aria-label=\"Close\"\n          /* RED ON HOVER, like every other control in this product that undoes\n             something. The board's own remove control already answers a hover\n             with `--error-bg` and `--error`; this one answered with the same\n             neutral wash as the mic beside it, so the one control in the row\n             that ENDS something looked exactly like the two that start\n             something. A hover state is where a control says what it is about\n             to do, and this one was declining to. */\n          className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-tertiary)] transition-[background-color,color] duration-[var(--motion-fast)] hover:bg-[var(--error-bg)] hover:text-[var(--error)]\"\n        >\n          <X />\n        </button>\n      )}\n\n      {send ?? (\n        <button\n          type=\"button\"\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => onSubmit(value)}\n          aria-label=\"Send\"\n          disabled={!canSend}\n          // LIVE means BLUE. It was muted in both states, so the one control\n          // that commits looked equally dead whether or not it would do\n          // anything — the single most useful thing a send button can say is\n          // \"there is something to send now\", and colour is how it says it.\n          className={`grid size-8 shrink-0 place-items-center rounded-full transition-[background-color,color] duration-[var(--motion-fast)] ${\n            canSend\n              ? 'bg-brand-500 text-white hover:bg-brand-600'\n              : 'bg-[var(--bg-muted)] text-[var(--text-muted)]'\n          }`}\n        >\n          <ArrowUp />\n        </button>\n      )}\n    </>\n  );\n}\n"],"mappings":";AA6CI,mBAuCQ,KAvCR;AA3CJ,SAAS,SAAS,KAAK,QAAQ,SAAS;AAUjC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,EAAE,OAAO,eAAe,MAAM,kBAAkB;AAChE,GAqBG;AACD,SACE,iCAMG;AAAA,UAAM,aACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM;AAOb,cAAI,MAAM,QAAQ;AAChB,kBAAM,KAAK;AAAA,UACb,OAAO;AACL,qBAAS,SAAS,MAAM;AACxB,iBAAK,MAAM,MAAM;AAAA,UACnB;AAAA,QACF;AAAA,QACA,UAAU,MAAM,YAAY,CAAC,MAAM;AAAA,QACnC,cAAY,MAAM,SAAS,YAAY,OAAO,YAAY;AAAA,QAC1D,OAAO,MAAM,SAAS,YAAY,OAAO,YAAY;AAAA,QACrD,gBAAc,MAAM;AAAA,QAKpB,WAAW,+HACT,MAAM,SACF,oDACA,wLACN;AAAA,QAEC,gBAAM,SACL,oBAAC,UAAO,WAAU,gCAA+B,IAEjD,oBAAC,OAAI;AAAA;AAAA,IAET;AAAA,IAgBD,WACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS;AAAA,QACT,cAAW;AAAA,QAQX,WAAU;AAAA,QAEV,8BAAC,KAAE;AAAA;AAAA,IACL;AAAA,IAGD,QACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM,SAAS,KAAK;AAAA,QAC7B,cAAW;AAAA,QACX,UAAU,CAAC;AAAA,QAKX,WAAW,0HACT,UACI,+CACA,+CACN;AAAA,QAEA,8BAAC,WAAQ;AAAA;AAAA,IACX;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/dashboard/home/ask-dictation-flow.d.ts

@@ -0,0 +1,24 @@
+import type { VoiceModeState } from '@withpotter/hooks/use-voice-mode';
+export declare function AskDictationFlow({ 
+/** Live levels, 0..1, mutated in place by the recogniser. */
+peaksRef, 
+/** Everything recognised so far. Rides the curve behind the head. */
+transcript, 
+/**
+ * Which half of the conversation is running. Defaults to `listening` so the
+ * plain dictation caller does not have to know voice mode exists.
+ */
+state, 
+/** What Box is saying, and how far the voice has got through it. */
+spoken, spokenChars, 
+/** When silence will be taken as the end of the sentence, from voice mode. */
+endpointAt, }: {
+    peaksRef: {
+        current: number[];
+    };
+    transcript: string;
+    state?: VoiceModeState;
+    spoken?: string;
+    spokenChars?: number;
+    endpointAt?: number | null;
+}): import("react").JSX.Element;

package/dist/dashboard/home/ask-dictation-flow.js

@@ -0,0 +1,210 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { DICTATION_PEAK_COUNT } from "@withpotter/hooks/use-dictation";
+import { durations, eases } from "@withpotter/lib/motion";
+const CURVE = "M 14 178 C 104 92 206 66 318 112 C 430 158 520 150 628 56";
+const BAR_GAP = 8;
+const BAR_MAX = 13;
+const HEAD_GAP = 10;
+const RUNWAY = 132;
+const SETTLE_MS = 1200;
+const SPEAK_ANCHOR = 0.42;
+function AskDictationFlow({
+  /** Live levels, 0..1, mutated in place by the recogniser. */
+  peaksRef,
+  /** Everything recognised so far. Rides the curve behind the head. */
+  transcript,
+  /**
+   * Which half of the conversation is running. Defaults to `listening` so the
+   * plain dictation caller does not have to know voice mode exists.
+   */
+  state = "listening",
+  /** What Box is saying, and how far the voice has got through it. */
+  spoken = "",
+  spokenChars = 0,
+  /** When silence will be taken as the end of the sentence, from voice mode. */
+  endpointAt = null
+}) {
+  const uid = useId().replace(/:/g, "");
+  const pathId = `flowcurve-${uid}`;
+  const pathRef = useRef(null);
+  const textRef = useRef(null);
+  const textPathRef = useRef(null);
+  const litRef = useRef(null);
+  const boundaryRef = useRef(false);
+  const headRef = useRef(null);
+  const ringRef = useRef(null);
+  const barsRef = useRef([]);
+  const stateRef = useRef(state);
+  const endpointRef = useRef(endpointAt);
+  useEffect(() => {
+    stateRef.current = state;
+    endpointRef.current = endpointAt;
+    boundaryRef.current = spokenChars > 0;
+  });
+  const reduce = useReducedMotion() ?? false;
+  const said = useMemo(() => {
+    if (!spoken) return { lit: "", rest: "" };
+    if (spokenChars <= 0) return { lit: spoken, rest: "" };
+    const at = Math.min(spokenChars, spoken.length);
+    return { lit: spoken.slice(0, at), rest: spoken.slice(at) };
+  }, [spoken, spokenChars]);
+  const speaking = state === "speaking";
+  const words = speaking ? spoken : transcript;
+  useEffect(() => {
+    const path = pathRef.current;
+    if (!path) return;
+    const total = path.getTotalLength();
+    let raf = 0;
+    const draw = () => {
+      raf = requestAnimationFrame(draw);
+      const used = textRef.current?.getComputedTextLength() ?? 0;
+      const talking = stateRef.current === "speaking";
+      const lit = talking ? boundaryRef.current ? litRef.current?.getComputedTextLength() ?? 0 : 0 : used;
+      const head = Math.min(lit + HEAD_GAP, total - RUNWAY);
+      const anchor = talking ? Math.min(head, total * SPEAK_ANCHOR) : head;
+      const offset = Math.min(0, anchor - HEAD_GAP - lit);
+      textPathRef.current?.setAttribute("startOffset", String(offset));
+      const p = path.getPointAtLength(anchor);
+      const dot = headRef.current;
+      dot?.setAttribute("cx", String(p.x));
+      dot?.setAttribute("cy", String(p.y));
+      dot?.setAttribute(
+        "r",
+        String(talking ? 3.2 + 1.1 * Math.sin(performance.now() / 240) : 2.5)
+      );
+      const ring = ringRef.current;
+      if (ring) {
+        const until = endpointRef.current;
+        const left = until ? until - Date.now() : Infinity;
+        const closing = left < SETTLE_MS && stateRef.current === "listening";
+        ring.setAttribute("cx", String(p.x));
+        ring.setAttribute("cy", String(p.y));
+        ring.setAttribute(
+          "r",
+          String(closing ? 4 + Math.max(0, left) / SETTLE_MS * 12 : 0)
+        );
+        ring.setAttribute("opacity", String(closing ? 0.55 : 0));
+      }
+      const peaks = peaksRef.current;
+      const bars = barsRef.current;
+      const now = performance.now();
+      const t = stateRef.current;
+      let i = 0;
+      let idx = peaks.length - 1;
+      const barsFrom = talking ? total : anchor + HEAD_GAP;
+      for (let l = barsFrom; l < total && i < bars.length; l += BAR_GAP) {
+        const line = bars[i];
+        i++;
+        if (!line) continue;
+        const q = path.getPointAtLength(l);
+        const r = path.getPointAtLength(Math.min(l + 1, total));
+        const dx = r.x - q.x;
+        const dy = r.y - q.y;
+        const len = Math.hypot(dx, dy) || 1;
+        const nx = -dy / len;
+        const ny = dx / len;
+        let level;
+        if (t === "thinking") {
+          level = 0.1 + 0.3 * Math.max(0, Math.sin(now / 200 - i / 2.2));
+        } else {
+          level = idx >= 0 ? peaks[idx] ?? 0 : 0;
+          idx--;
+        }
+        const h = Math.max(0.75, level * BAR_MAX);
+        line.setAttribute("x1", String(q.x - nx * h));
+        line.setAttribute("y1", String(q.y - ny * h));
+        line.setAttribute("x2", String(q.x + nx * h));
+        line.setAttribute("y2", String(q.y + ny * h));
+        line.setAttribute("opacity", "1");
+      }
+      for (; i < bars.length; i++) bars[i]?.setAttribute("opacity", "0");
+    };
+    raf = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(raf);
+  }, [peaksRef]);
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      viewBox: "0 22 640 186",
+      className: "pointer-events-none w-full select-none",
+      "aria-hidden": true,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: durations.fast, ease: eases.out },
+      children: [
+        /* @__PURE__ */ jsx("path", { id: pathId, ref: pathRef, d: CURVE, fill: "none", stroke: "none" }),
+        /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            d: CURVE,
+            fill: "none",
+            stroke: "var(--border-default)",
+            strokeWidth: "1",
+            pathLength: 1,
+            initial: reduce ? false : { pathLength: 0, opacity: 0 },
+            animate: { pathLength: 1, opacity: 1 },
+            transition: { duration: durations.slow, ease: eases.out }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            ref: textRef,
+            className: speaking ? "fill-brand-500 text-sm font-medium" : "fill-[var(--text-primary)] text-sm font-medium",
+            style: { fontSize: 15 },
+            children: /* @__PURE__ */ jsx("textPath", { ref: textPathRef, href: `#${pathId}`, startOffset: "0", children: speaking ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("tspan", { ref: litRef, className: "fill-brand-500", children: said.lit }),
+              /* @__PURE__ */ jsx("tspan", { className: "fill-[var(--text-tertiary)]", children: said.rest })
+            ] }) : transcript })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            ref: ringRef,
+            r: "0",
+            fill: "none",
+            stroke: "var(--brand-500)",
+            strokeWidth: "1",
+            opacity: "0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            ref: headRef,
+            r: "2.5",
+            className: speaking ? "fill-brand-500" : "fill-[var(--text-primary)]",
+            opacity: words ? 1 : 0.35
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "g",
+          {
+            stroke: speaking ? "var(--brand-500)" : "var(--text-tertiary)",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            children: Array.from({ length: DICTATION_PEAK_COUNT }, (_, n) => /* @__PURE__ */ jsx(
+              "line",
+              {
+                ref: (el) => {
+                  barsRef.current[n] = el;
+                },
+                opacity: "0"
+              },
+              n
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AskDictationFlow
+};
+//# sourceMappingURL=ask-dictation-flow.js.map