@withpotter/components 0.13.0-next.101

package/dist/feedback/feedback-vote.d.ts

@@ -0,0 +1,64 @@
+export declare function FeedbackVote({ promptKey, subject, kind, choices, media, label, savedLabel, askWhy, downVotePrefill, onDownVote, onScoreChange, className, }: {
+    promptKey: string;
+    /** What is being judged. Its presence is what keeps this repeatable. */
+    subject: {
+        type: string;
+        id: string;
+    };
+    /**
+     * `thumb` for "was this right", `star` for "how good is this". Stars belong
+     * beside something the merchant CHOSE and has lived with; a thumb belongs
+     * under something the product just produced.
+     */
+    kind?: 'thumb' | 'star' | 'choice';
+    /**
+     * The three words, WORST FIRST, because the scale underneath runs -1 to 1
+     * and a scale reads low to high. Overridable so the question can be asked in
+     * its own language — "Not for me" / "Fine" / "More like this".
+     */
+    choices?: [string, string, string] | string[];
+    /**
+     * A picture of what is being judged, shown above the question.
+     *
+     * `subject` is an identifier and says nothing on screen, so a prompt about
+     * "the last thing you saw" had no way to show which thing it meant. Only
+     * worth passing where the subject IS something you look at.
+     */
+    media?: {
+        src: string;
+        alt?: string;
+    };
+    label?: string;
+    /**
+     * What it says once the score is in.
+     *
+     * The default thanks them, which is right where the vote is the only thing
+     * on the surface. It is WRONG inside the help sheet: a message box sits
+     * above these stars waiting for Send, and "Thanks — noted." on the press of
+     * a star reads as "your feedback has been sent" to anybody who then closes
+     * the panel. Two commit models in one 440px card need two sentences.
+     */
+    savedLabel?: string;
+    /**
+     * Whether pressing opens the "anything to add?" step underneath.
+     *
+     * TURN IT OFF WHERE A MESSAGE BOX IS ALREADY ON SCREEN. In the help sheet the
+     * stars sit under a composer that has its own textarea, its own microphone
+     * and its own Send — so opening a second textarea, a second microphone and a
+     * second Send inside the same 440px panel asked the same question twice and
+     * gave two answers to "where do I type". John, looking at it: *"this is
+     * redundant"*.
+     *
+     * On by default, because everywhere else the vote is alone under the thing it
+     * judges and the inline step is the only way to say why.
+     */
+    askWhy?: boolean;
+    /**
+     * What to put in the feedback sheet when the thumb goes down. Omit both this
+     * and `onDownVote` to record the vote and nothing else.
+     */
+    downVotePrefill?: string;
+    onDownVote?: () => void;
+    onScoreChange?: (score: number) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/feedback/feedback-vote.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ThumbVote } from "@withpotter/ui-kit/thumb-vote";
+import { RatingInput } from "@withpotter/ui-kit/star-rating";
+import { ScoreScale } from "@withpotter/ui-kit/score-scale";
+import { springs } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+import { openFeedback } from "@withpotter/components/feedback-widget";
+import { useFeedbackSignal } from "./feedback-prompt-context";
+import { SayWhy } from "./say-why";
+const FAILED_LABEL = "That didn\u2019t save. Press again to retry.";
+function FeedbackVote({
+  promptKey,
+  subject,
+  kind = "thumb",
+  choices = ["I don\u2019t like it", "Neither like nor dislike it", "I like it"],
+  media,
+  label = "Was this helpful?",
+  savedLabel = "Thanks, noted.",
+  askWhy = true,
+  downVotePrefill,
+  onDownVote,
+  onScoreChange,
+  className
+}) {
+  const { record } = useFeedbackSignal();
+  const [thumb, setThumb] = useState(null);
+  const [choice, setChoice] = useState(null);
+  const [stars, setStars] = useState(null);
+  const [signalId, setSignalId] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [asking, setAsking] = useState(false);
+  const reduce = useReducedMotion();
+  const answered = kind === "star" ? stars !== null : kind === "choice" ? choice !== null : thumb !== null;
+  const handsOff = Boolean(onDownVote || downVotePrefill);
+  const send = (score) => {
+    onScoreChange?.(score);
+    setFailed(false);
+    void record({
+      kind: kind === "star" ? "star" : "thumb",
+      promptKey,
+      score,
+      subjectType: subject.type,
+      subjectId: subject.id
+    }).then((id) => {
+      if (id) setSignalId(id);
+      else setFailed(true);
+    }).catch(() => setFailed(true));
+    const poor = kind === "star" ? score <= 2 : score < 0;
+    if (poor && handsOff) {
+      if (onDownVote) onDownVote();
+      else if (downVotePrefill)
+        openFeedback({ category: "suggestion", description: downVotePrefill });
+      return;
+    }
+    if (askWhy) setAsking(true);
+  };
+  const handleVote = (next) => {
+    setThumb(next);
+    if (next) send(next === "up" ? 1 : -1);
+  };
+  const handleStars = (next) => {
+    setStars(next);
+    send(next);
+  };
+  const handleChoice = (next) => {
+    setChoice(next);
+    send(next);
+  };
+  if (kind === "choice") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-3", className), children: [
+      media && /* eslint-disable-next-line @next/next/no-img-element */
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: media.src,
+          alt: media.alt ?? "",
+          className: "h-28 w-auto rounded-lg object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+        motion.p,
+        {
+          initial: { opacity: 0, y: 3 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -3 },
+          transition: reduce ? { duration: 0 } : springs.gentle,
+          className: "text-center text-sm font-medium text-[var(--text-primary)]",
+          children: answered ? failed ? FAILED_LABEL : savedLabel : label
+        },
+        answered ? failed ? "failed" : "thanks" : "ask"
+      ) }),
+      /* @__PURE__ */ jsx(
+        ScoreScale,
+        {
+          className: "w-full",
+          min: -1,
+          max: 1,
+          value: choice,
+          onChange: handleChoice,
+          label,
+          options: choices,
+          toneFor: (n) => n < 0 ? "bad" : n === 0 ? "middling" : "good",
+          disabled: answered
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: askWhy && asking && /* @__PURE__ */ jsx(
+        SayWhy,
+        {
+          signalId,
+          placeholder: "Anything you want to add? You can record it.",
+          onDone: () => setAsking(false)
+        },
+        "say-why"
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          initial: { opacity: 0, y: 3 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -3 },
+          transition: reduce ? { duration: 0 } : springs.gentle,
+          className: "text-xs text-[var(--text-tertiary)]",
+          children: answered ? failed ? FAILED_LABEL : savedLabel : label
+        },
+        answered ? failed ? "failed" : "thanks" : "ask"
+      ) }),
+      kind === "star" ? /* @__PURE__ */ jsx(
+        RatingInput,
+        {
+          value: stars,
+          onChange: handleStars,
+          label,
+          size: "sm"
+        }
+      ) : /* @__PURE__ */ jsx(ThumbVote, { value: thumb, onVote: handleVote })
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: askWhy && asking && /* @__PURE__ */ jsx(
+      SayWhy,
+      {
+        signalId,
+        placeholder: "Anything you want to add? You can record it.",
+        onDone: () => setAsking(false)
+      },
+      "say-why"
+    ) })
+  ] });
+}
+export {
+  FeedbackVote
+};
+//# sourceMappingURL=feedback-vote.js.map

package/dist/feedback/feedback-vote.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/feedback-vote.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\n// Concrete modules, not the barrel — see the note in feedback-prompt.tsx.\nimport { ThumbVote, type ThumbValue } from '@withpotter/ui-kit/thumb-vote';\nimport { RatingInput } from '@withpotter/ui-kit/star-rating';\nimport { ScoreScale } from '@withpotter/ui-kit/score-scale';\nimport { springs } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\nimport { openFeedback } from '@withpotter/components/feedback-widget';\nimport { useFeedbackSignal } from './feedback-prompt-context';\nimport { SayWhy } from './say-why';\n\n/**\n * Was this one thing any good.\n *\n * Sits IN the content, under the thing it is about — a help answer, a\n * generated draft, a report. Unlike `FeedbackPrompt` it takes no live slot and\n * is never suppressed, because twenty of these on a page are not twenty\n * interruptions; each one is part of the object above it. A page of help topics\n * where one carried a thumb and sixteen did not would read as a bug.\n *\n * EVERY VOTE CAN CARRY A REASON, spoken or typed. It used to record silently\n * and the only way to explain anything was a down-vote throwing you out into\n * the whole feedback sheet — so the most-used control in the set was the one\n * that could not be elaborated, and an up-vote could never say what was good.\n * Now `SayWhy` opens under it: the same note-or-recording step the prompts\n * use, attached to the score already recorded.\n *\n * A DOWN VOTE STILL HAS SOMEWHERE LOUDER TO GO. Where a caller passes\n * `onDownVote` or `downVotePrefill`, a poor score opens the feedback sheet\n * instead — that is a deliberate handoff for the cases where a human should\n * read it and file something, like a wrong answer from Box. Everywhere\n * else the inline step is lighter and gets answered more often, and it lands\n * in the same place either way.\n *\n * THREE SHAPES, ONE COMPONENT. A thumb answers \"was this right\", which is the\n * only question worth asking about an answer. Stars answer \"how good is this\",\n * which needs more than two positions and is what people already expect beside\n * a thing they CHOSE — a template, a theme. The machinery is identical:\n * subject-scoped, repeatable, no live slot, and a poor score opens the sheet.\n * A second component would have been the same file with one control swapped,\n * and the two would have drifted on what \"poor\" means.\n *\n * `choice` is the third: a like / neither / dislike about the thing above it,\n * stacked and in words. It is for a judgement somebody makes in a glance about\n * a piece of CONTENT — a suggested draft, a recommendation, a generated image —\n * where a thumb is too blunt to admit indifference and stars invite a precision\n * nobody has. TikTok asks exactly this under a video.\n *\n * IT RECORDS AS A THUMB, score -1 / 0 / 1, because that is what it is: the\n * `thumb` scale is already -1..1 and the middle was simply never offered. So\n * there is no new kind, no migration, and the summary and health panels count\n * it with every other thumb in the product.\n *\n * NO SUBMIT BUTTON, and that is a deliberate departure from the screen this\n * copies. TikTok greys a Submit until you choose and records on the press of\n * THAT — which loses everybody who taps an answer and swipes away, and on a\n * one-tap question that is most people. Ours writes on the tap, exactly as the\n * scored prompts do, and `SayWhy` opens underneath for anyone who wants to add\n * a sentence.\n */\n/**\n * What a vote says when it did not reach us.\n *\n * It keeps the score on screen rather than clearing it — the press was real\n * and undoing it would read as the control breaking — and it names the one\n * thing the merchant can do about it. Pressing again re-sends.\n */\nconst FAILED_LABEL = 'That didn’t save. Press again to retry.';\n\nexport function FeedbackVote({\n  promptKey,\n  subject,\n  kind = 'thumb',\n  choices = ['I don’t like it', 'Neither like nor dislike it', 'I like it'],\n  media,\n  label = 'Was this helpful?',\n  savedLabel = 'Thanks, noted.',\n  askWhy = true,\n  downVotePrefill,\n  onDownVote,\n  onScoreChange,\n  className,\n}: {\n  promptKey: string;\n  /** What is being judged. Its presence is what keeps this repeatable. */\n  subject: { type: string; id: string };\n  /**\n   * `thumb` for \"was this right\", `star` for \"how good is this\". Stars belong\n   * beside something the merchant CHOSE and has lived with; a thumb belongs\n   * under something the product just produced.\n   */\n  kind?: 'thumb' | 'star' | 'choice';\n  /**\n   * The three words, WORST FIRST, because the scale underneath runs -1 to 1\n   * and a scale reads low to high. Overridable so the question can be asked in\n   * its own language — \"Not for me\" / \"Fine\" / \"More like this\".\n   */\n  choices?: [string, string, string] | string[];\n  /**\n   * A picture of what is being judged, shown above the question.\n   *\n   * `subject` is an identifier and says nothing on screen, so a prompt about\n   * \"the last thing you saw\" had no way to show which thing it meant. Only\n   * worth passing where the subject IS something you look at.\n   */\n  media?: { src: string; alt?: string };\n  label?: string;\n  /**\n   * What it says once the score is in.\n   *\n   * The default thanks them, which is right where the vote is the only thing\n   * on the surface. It is WRONG inside the help sheet: a message box sits\n   * above these stars waiting for Send, and \"Thanks — noted.\" on the press of\n   * a star reads as \"your feedback has been sent\" to anybody who then closes\n   * the panel. Two commit models in one 440px card need two sentences.\n   */\n  savedLabel?: string;\n  /**\n   * Whether pressing opens the \"anything to add?\" step underneath.\n   *\n   * TURN IT OFF WHERE A MESSAGE BOX IS ALREADY ON SCREEN. In the help sheet the\n   * stars sit under a composer that has its own textarea, its own microphone\n   * and its own Send — so opening a second textarea, a second microphone and a\n   * second Send inside the same 440px panel asked the same question twice and\n   * gave two answers to \"where do I type\". John, looking at it: *\"this is\n   * redundant\"*.\n   *\n   * On by default, because everywhere else the vote is alone under the thing it\n   * judges and the inline step is the only way to say why.\n   */\n  askWhy?: boolean;\n  /**\n   * What to put in the feedback sheet when the thumb goes down. Omit both this\n   * and `onDownVote` to record the vote and nothing else.\n   */\n  downVotePrefill?: string;\n  onDownVote?: () => void;\n  onScoreChange?: (score: number) => void;\n  className?: string;\n}) {\n  const { record } = useFeedbackSignal();\n  const [thumb, setThumb] = useState<ThumbValue | null>(null);\n  /** -1, 0 or 1. Null until answered — there is no neutral default. */\n  const [choice, setChoice] = useState<number | null>(null);\n  const [stars, setStars] = useState<number | null>(null);\n  /** The score just recorded, so a note can be attached to it. */\n  const [signalId, setSignalId] = useState<string | null>(null);\n  /** The score did NOT record. Said, rather than swallowed — see `send`. */\n  const [failed, setFailed] = useState(false);\n  const [asking, setAsking] = useState(false);\n  const reduce = useReducedMotion();\n  const answered =\n    kind === 'star'\n      ? stars !== null\n      : kind === 'choice'\n        ? choice !== null\n        : thumb !== null;\n  /** A caller that wants a ticket rather than a note. */\n  const handsOff = Boolean(onDownVote || downVotePrefill);\n\n  /**\n   * Record, then hand a poor answer somewhere a human will read it.\n   *\n   * \"Poor\" is one or two stars, on the same argument the thumb makes: three of\n   * five is a shrug and needs no follow-up, but a merchant who gives their own\n   * live template two stars has a specific complaint and no way to say it.\n   */\n  const send = (score: number) => {\n    onScoreChange?.(score);\n    // A REJECTION IS NOT NOTHING. This used to be `.catch(() => {})` beside a\n    // `savedLabel` driven purely by local state, so a vote that never reached\n    // the server still said \"Rating saved.\" — and the only person who could\n    // tell was whoever went looking for it in the admin console and found no\n    // row. Silent-on-failure is defensible for a signal nobody was promised\n    // was stored; it is not defensible under a sentence claiming it was.\n    setFailed(false);\n    void record({\n      kind: kind === 'star' ? 'star' : 'thumb',\n      promptKey,\n      score,\n      subjectType: subject.type,\n      subjectId: subject.id,\n    })\n      .then((id) => {\n        // `record` answers null when there is no provider above this vote,\n        // which is the same nothing as a rejection: no row was written.\n        if (id) setSignalId(id);\n        else setFailed(true);\n      })\n      .catch(() => setFailed(true));\n\n    const poor = kind === 'star' ? score <= 2 : score < 0;\n\n    // A poor score with a caller that wants a ticket goes to the sheet, which\n    // has its own recorder. Everything else gets the inline step.\n    if (poor && handsOff) {\n      if (onDownVote) onDownVote();\n      else if (downVotePrefill)\n        openFeedback({ category: 'suggestion', description: downVotePrefill });\n      return;\n    }\n    // `askWhy` GATES THE STATE, not just one of the two renders.\n    //\n    // This is the bug behind the two-composer sheet. `asking` was set here\n    // unconditionally, and only the CHOICE branch below checked `askWhy`\n    // before drawing `SayWhy` — the star/thumb branch did not. So the help\n    // sheet, which passes `askWhy={false}` precisely because its own message\n    // box IS the \"anything to add\" step, pressed a star and grew a second\n    // textarea, a second \"Record a voice note\" card and a second Send under\n    // the first. One sheet, two composers, two Sends, and no way to tell\n    // which one was the real one.\n    //\n    // Gating the state rather than the markup means a caller that opts out\n    // never enters the asking state at all, so there is no second render site\n    // that can forget the check again.\n    if (askWhy) setAsking(true);\n  };\n\n  const handleVote = (next: ThumbValue | null) => {\n    setThumb(next);\n    if (next) send(next === 'up' ? 1 : -1);\n  };\n\n  const handleStars = (next: number) => {\n    setStars(next);\n    send(next);\n  };\n\n  const handleChoice = (next: number) => {\n    setChoice(next);\n    send(next);\n  };\n\n  /**\n   * A CHOICE IS A BLOCK, NOT A ROW. The other two shapes are an afterthought\n   * beside a sentence — a thumb and a caption on one line. Three stacked\n   * sentences is the subject of its own area, so the question goes above them\n   * at full width instead of sharing a line, which is also the only way the\n   * picture has anywhere to sit.\n   */\n  if (kind === 'choice') {\n    return (\n      <div className={cn('flex flex-col items-center gap-3', className)}>\n        {media && (\n          /* eslint-disable-next-line @next/next/no-img-element */\n          <img\n            src={media.src}\n            alt={media.alt ?? ''}\n            className=\"h-28 w-auto rounded-lg object-cover\"\n          />\n        )}\n        <AnimatePresence mode=\"wait\" initial={false}>\n          <motion.p\n            key={answered ? (failed ? 'failed' : 'thanks') : 'ask'}\n            initial={{ opacity: 0, y: 3 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -3 }}\n            transition={reduce ? { duration: 0 } : springs.gentle}\n            className=\"text-center text-sm font-medium text-[var(--text-primary)]\"\n          >\n            {answered ? (failed ? FAILED_LABEL : savedLabel) : label}\n          </motion.p>\n        </AnimatePresence>\n\n        <ScoreScale\n          className=\"w-full\"\n          min={-1}\n          max={1}\n          value={choice}\n          onChange={handleChoice}\n          label={label}\n          options={choices}\n          // The bands are the obvious ones here, and passing them is what stops\n          // the middle reading as an answer rather than the absence of one.\n          toneFor={(n) => (n < 0 ? 'bad' : n === 0 ? 'middling' : 'good')}\n          disabled={answered}\n        />\n\n        <AnimatePresence initial={false}>\n          {askWhy && asking && (\n            <SayWhy\n              key=\"say-why\"\n              signalId={signalId}\n              placeholder=\"Anything you want to add? You can record it.\"\n              onDone={() => setAsking(false)}\n            />\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      <div className=\"flex items-center gap-2\">\n        <AnimatePresence mode=\"wait\" initial={false}>\n          <motion.span\n            key={answered ? (failed ? 'failed' : 'thanks') : 'ask'}\n            initial={{ opacity: 0, y: 3 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -3 }}\n            transition={reduce ? { duration: 0 } : springs.gentle}\n            className=\"text-xs text-[var(--text-tertiary)]\"\n          >\n            {answered ? (failed ? FAILED_LABEL : savedLabel) : label}\n          </motion.span>\n        </AnimatePresence>\n        {kind === 'star' ? (\n          <RatingInput\n            value={stars}\n            onChange={handleStars}\n            label={label}\n            size=\"sm\"\n          />\n        ) : (\n          <ThumbVote value={thumb} onVote={handleVote} />\n        )}\n      </div>\n\n      {/* Opens UNDER the row rather than replacing it, so the answer you just\n          gave stays visible while you explain it. `askWhy` is checked here as\n          well as in `send` — the two render sites disagreeing is what shipped\n          the double composer. */}\n      <AnimatePresence initial={false}>\n        {askWhy && asking && (\n          <SayWhy\n            key=\"say-why\"\n            signalId={signalId}\n            placeholder=\"Anything you want to add? You can record it.\"\n            onDone={() => setAsking(false)}\n          />\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/feedback/flow-ces-dock.d.ts

@@ -0,0 +1,20 @@
+/**
+ * "How easy was that?", asked by whichever flow just ended.
+ *
+ * One dock for every flow in `FLOW_CES`, mounted once in the dashboard shell.
+ * The alternative — a prompt inside each flow's own screen — asks the question
+ * from inside the thing that just finished, and finishing usually means that
+ * thing is closing: a publish dialog dismisses itself, a connect flow
+ * redirects, an invite modal shuts. A dock outlives all of them.
+ *
+ * IT LATCHES, because `useFlowJustCompleted` forgets after twenty seconds and
+ * answering takes longer than that. Without the latch the card would vanish
+ * mid-sentence while somebody was typing why the domain was hard, which is
+ * both a lost answer and the rudest possible moment to disappear. The counter
+ * in the key is what lets the same flow ask again on a later run, once a
+ * dismissal has aged out — re-setting the same string would not remount.
+ *
+ * It competes for the one live slot like every other prompt, so a merchant who
+ * finishes two things at once is asked once.
+ */
+export declare function FlowCesDock(): import("react").JSX.Element | null;

package/dist/feedback/flow-ces-dock.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cesTone } from "@withpotter/ui-kit/score-scale";
+import { FeedbackPrompt } from "./feedback-prompt";
+import { useFlowJustCompleted } from "./flow-completion";
+import { cesForFlow, cesKeyFor } from "./flow-ces";
+function FlowCesDock() {
+  const flow = useFlowJustCompleted();
+  const [asked, setAsked] = useState(
+    null
+  );
+  const [seen, setSeen] = useState(null);
+  if (flow !== seen) {
+    setSeen(flow);
+    if (flow && cesForFlow(flow)) {
+      setAsked((prev) => ({ flow, run: (prev?.run ?? 0) + 1 }));
+    }
+  }
+  const entry = cesForFlow(asked?.flow ?? null);
+  if (!asked || !entry) return null;
+  const stars = entry.kind === "star";
+  return /* @__PURE__ */ jsx(
+    FeedbackPrompt,
+    {
+      promptKey: cesKeyFor(asked.flow),
+      kind: stars ? "star" : "ces",
+      layout: "dock",
+      question: entry.question,
+      minLabel: stars ? void 0 : "Very easy",
+      maxLabel: stars ? void 0 : "Very hard",
+      toneFor: stars ? void 0 : cesTone,
+      commentPrompt: stars ? "What would make it better?" : "What would have made it easier?"
+    },
+    `${asked.flow}:${asked.run}`
+  );
+}
+export {
+  FlowCesDock
+};
+//# sourceMappingURL=flow-ces-dock.js.map

package/dist/feedback/flow-ces-dock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/flow-ces-dock.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { cesTone } from '@withpotter/ui-kit/score-scale';\nimport { FeedbackPrompt } from './feedback-prompt';\nimport { useFlowJustCompleted } from './flow-completion';\nimport { cesForFlow, cesKeyFor } from './flow-ces';\n\n/**\n * \"How easy was that?\", asked by whichever flow just ended.\n *\n * One dock for every flow in `FLOW_CES`, mounted once in the dashboard shell.\n * The alternative — a prompt inside each flow's own screen — asks the question\n * from inside the thing that just finished, and finishing usually means that\n * thing is closing: a publish dialog dismisses itself, a connect flow\n * redirects, an invite modal shuts. A dock outlives all of them.\n *\n * IT LATCHES, because `useFlowJustCompleted` forgets after twenty seconds and\n * answering takes longer than that. Without the latch the card would vanish\n * mid-sentence while somebody was typing why the domain was hard, which is\n * both a lost answer and the rudest possible moment to disappear. The counter\n * in the key is what lets the same flow ask again on a later run, once a\n * dismissal has aged out — re-setting the same string would not remount.\n *\n * It competes for the one live slot like every other prompt, so a merchant who\n * finishes two things at once is asked once.\n */\nexport function FlowCesDock() {\n  const flow = useFlowJustCompleted();\n  const [asked, setAsked] = useState<{ flow: string; run: number } | null>(\n    null,\n  );\n  const [seen, setSeen] = useState<string | null>(null);\n\n  /**\n   * Latched DURING RENDER, not in an effect. An effect that calls setState\n   * renders the dock once without the card and again with it, which is a\n   * cascading render for a value already known — React's own advice, and the\n   * lint rule that enforces it. Comparing against the last flow seen makes the\n   * update idempotent, so this settles in one pass.\n   */\n  if (flow !== seen) {\n    setSeen(flow);\n    if (flow && cesForFlow(flow)) {\n      setAsked((prev) => ({ flow, run: (prev?.run ?? 0) + 1 }));\n    }\n  }\n\n  const entry = cesForFlow(asked?.flow ?? null);\n  if (!asked || !entry) return null;\n\n  const stars = entry.kind === 'star';\n\n  return (\n    <FeedbackPrompt\n      key={`${asked.flow}:${asked.run}`}\n      promptKey={cesKeyFor(asked.flow)}\n      kind={stars ? 'star' : 'ces'}\n      layout=\"dock\"\n      question={entry.question}\n      // A star rating carries no end labels: five stars mean what five stars\n      // have always meant, and \"Very easy / Very hard\" under them would be\n      // answering a different question. `toneFor` goes with them — CES is the\n      // one scale where low is the good end, and stars are not that scale.\n      minLabel={stars ? undefined : 'Very easy'}\n      maxLabel={stars ? undefined : 'Very hard'}\n      toneFor={stars ? undefined : cesTone}\n      commentPrompt={\n        stars ? 'What would make it better?' : 'What would have made it easier?'\n      }\n    />\n  );\n}\n"],"mappings":";AAsDI;AApDJ,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,YAAY,iBAAiB;AAqB/B,SAAS,cAAc;AAC5B,QAAM,OAAO,qBAAqB;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB;AAAA,EACF;AACA,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AASpD,MAAI,SAAS,MAAM;AACjB,YAAQ,IAAI;AACZ,QAAI,QAAQ,WAAW,IAAI,GAAG;AAC5B,eAAS,CAAC,UAAU,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,EAAE,EAAE;AAAA,IAC1D;AAAA,EACF;AAEA,QAAM,QAAQ,WAAW,OAAO,QAAQ,IAAI;AAC5C,MAAI,CAAC,SAAS,CAAC,MAAO,QAAO;AAE7B,QAAM,QAAQ,MAAM,SAAS;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW,UAAU,MAAM,IAAI;AAAA,MAC/B,MAAM,QAAQ,SAAS;AAAA,MACvB,QAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAKhB,UAAU,QAAQ,SAAY;AAAA,MAC9B,UAAU,QAAQ,SAAY;AAAA,MAC9B,SAAS,QAAQ,SAAY;AAAA,MAC7B,eACE,QAAQ,+BAA+B;AAAA;AAAA,IAbpC,GAAG,MAAM,IAAI,IAAI,MAAM,GAAG;AAAA,EAejC;AAEJ;","names":[]}

package/dist/feedback/flow-ces.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The question each finished flow asks about itself.
+ *
+ * WHY A REGISTRY AND NOT A PROMPT PER SCREEN. Seven flows end in seven
+ * different places — a dialog that closes, a hook that redirects, a toast on a
+ * settings pane — and a prompt written into each of them would be seven
+ * copies of the same card, seven spellings of the same sentence, and seven
+ * chances for one of them to sit inside a panel that unmounts the moment it
+ * lands. The flow announces itself with `completeFlow()`; the dock reads this
+ * table and asks. Adding the eighth flow is one line here and one line there.
+ *
+ * THE KEY IS THE FLOW AND THE PROMPT KEY IS DERIVED, so the two can never
+ * drift apart: flow `domain.connect` records against `domain.connect.ces`, and
+ * that string is what the admin scores panel groups by. A flow with no entry
+ * here asks nothing — which is the right default, and is why the batch
+ * runner's own announcement (it passes the prompt key as the flow) does not
+ * collide with this table.
+ *
+ * WHAT BELONGS IN IT: work with an ending somebody notices, done rarely, that
+ * cost real effort — publishing, connecting a domain, wiring payouts. What
+ * does NOT: anything recurring. "How easy was that?" after a fulfilled order
+ * is asking about a Tuesday, and the answer measures the day rather than the
+ * product.
+ */
+export interface FlowCes {
+    /** The whole question, as a sentence. */
+    question: string;
+    /**
+     * Effort unless a flow needs otherwise.
+     *
+     * `ces` asks how hard the work was and belongs to a piece of work. `star`
+     * asks how good the RESULT is and belongs to a thing the merchant now has —
+     * a template their storefront is wearing. The two are not interchangeable:
+     * "how easy was choosing this" is a question about our picker, and nobody
+     * cares about our picker.
+     */
+    kind?: 'ces' | 'star';
+}
+export declare const FLOW_CES: Record<string, FlowCes>;
+/** What a flow's answers are recorded against. */
+export declare function cesKeyFor(flow: string): string;
+/** The question a flow owns, if it owns one. */
+export declare function cesForFlow(flow: string | null): FlowCes | null;

package/dist/feedback/flow-ces.js

@@ -0,0 +1,38 @@
+"use client";
+const FLOW_CES = {
+  "site.publish": { question: "How easy was that to publish?" },
+  "domain.connect": { question: "How easy was connecting your domain?" },
+  "payouts.connect": { question: "How easy was setting up payouts?" },
+  "campaign.send": { question: "How easy was sending that?" },
+  "calendar.connect": { question: "How easy was connecting your calendar?" },
+  "channel.connect": { question: "How easy was connecting that channel?" },
+  "team.invite": { question: "How easy was adding someone?" },
+  "hardware.pair": { question: "How easy was setting that device up?" },
+  /**
+   * The template they just put their storefront in.
+   *
+   * IT USED TO LIVE IN THE TOOLBAR — five stars between an "Open preview"
+   * button and a "Current" badge, asked of somebody who came to that row to do
+   * something else. John: *"that ratings and feedback thingy shouldnt be
+   * there, it should either be a pop up on the middle center of the page or
+   * below and should be after a flow"*. So it is asked the way every other
+   * question in the product is asked: once, from the dock, at the end of the
+   * flow that gives it an answer.
+   */
+  "template.use": {
+    kind: "star",
+    question: "How is that template working out?"
+  }
+};
+function cesKeyFor(flow) {
+  return `${flow}.ces`;
+}
+function cesForFlow(flow) {
+  return flow ? FLOW_CES[flow] ?? null : null;
+}
+export {
+  FLOW_CES,
+  cesForFlow,
+  cesKeyFor
+};
+//# sourceMappingURL=flow-ces.js.map

package/dist/feedback/flow-ces.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/flow-ces.ts"],"sourcesContent":["'use client';\n\n/**\n * The question each finished flow asks about itself.\n *\n * WHY A REGISTRY AND NOT A PROMPT PER SCREEN. Seven flows end in seven\n * different places — a dialog that closes, a hook that redirects, a toast on a\n * settings pane — and a prompt written into each of them would be seven\n * copies of the same card, seven spellings of the same sentence, and seven\n * chances for one of them to sit inside a panel that unmounts the moment it\n * lands. The flow announces itself with `completeFlow()`; the dock reads this\n * table and asks. Adding the eighth flow is one line here and one line there.\n *\n * THE KEY IS THE FLOW AND THE PROMPT KEY IS DERIVED, so the two can never\n * drift apart: flow `domain.connect` records against `domain.connect.ces`, and\n * that string is what the admin scores panel groups by. A flow with no entry\n * here asks nothing — which is the right default, and is why the batch\n * runner's own announcement (it passes the prompt key as the flow) does not\n * collide with this table.\n *\n * WHAT BELONGS IN IT: work with an ending somebody notices, done rarely, that\n * cost real effort — publishing, connecting a domain, wiring payouts. What\n * does NOT: anything recurring. \"How easy was that?\" after a fulfilled order\n * is asking about a Tuesday, and the answer measures the day rather than the\n * product.\n */\nexport interface FlowCes {\n  /** The whole question, as a sentence. */\n  question: string;\n  /**\n   * Effort unless a flow needs otherwise.\n   *\n   * `ces` asks how hard the work was and belongs to a piece of work. `star`\n   * asks how good the RESULT is and belongs to a thing the merchant now has —\n   * a template their storefront is wearing. The two are not interchangeable:\n   * \"how easy was choosing this\" is a question about our picker, and nobody\n   * cares about our picker.\n   */\n  kind?: 'ces' | 'star';\n}\n\nexport const FLOW_CES: Record<string, FlowCes> = {\n  'site.publish': { question: 'How easy was that to publish?' },\n  'domain.connect': { question: 'How easy was connecting your domain?' },\n  'payouts.connect': { question: 'How easy was setting up payouts?' },\n  'campaign.send': { question: 'How easy was sending that?' },\n  'calendar.connect': { question: 'How easy was connecting your calendar?' },\n  'channel.connect': { question: 'How easy was connecting that channel?' },\n  'team.invite': { question: 'How easy was adding someone?' },\n  'hardware.pair': { question: 'How easy was setting that device up?' },\n  /**\n   * The template they just put their storefront in.\n   *\n   * IT USED TO LIVE IN THE TOOLBAR — five stars between an \"Open preview\"\n   * button and a \"Current\" badge, asked of somebody who came to that row to do\n   * something else. John: *\"that ratings and feedback thingy shouldnt be\n   * there, it should either be a pop up on the middle center of the page or\n   * below and should be after a flow\"*. So it is asked the way every other\n   * question in the product is asked: once, from the dock, at the end of the\n   * flow that gives it an answer.\n   */\n  'template.use': {\n    kind: 'star',\n    question: 'How is that template working out?',\n  },\n};\n\n/** What a flow's answers are recorded against. */\nexport function cesKeyFor(flow: string) {\n  return `${flow}.ces`;\n}\n\n/** The question a flow owns, if it owns one. */\nexport function cesForFlow(flow: string | null): FlowCes | null {\n  return flow ? (FLOW_CES[flow] ?? null) : null;\n}\n"],"mappings":";AAyCO,MAAM,WAAoC;AAAA,EAC/C,gBAAgB,EAAE,UAAU,gCAAgC;AAAA,EAC5D,kBAAkB,EAAE,UAAU,uCAAuC;AAAA,EACrE,mBAAmB,EAAE,UAAU,mCAAmC;AAAA,EAClE,iBAAiB,EAAE,UAAU,6BAA6B;AAAA,EAC1D,oBAAoB,EAAE,UAAU,yCAAyC;AAAA,EACzE,mBAAmB,EAAE,UAAU,wCAAwC;AAAA,EACvE,eAAe,EAAE,UAAU,+BAA+B;AAAA,EAC1D,iBAAiB,EAAE,UAAU,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYpE,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;AAGO,SAAS,UAAU,MAAc;AACtC,SAAO,GAAG,IAAI;AAChB;AAGO,SAAS,WAAW,MAAqC;AAC9D,SAAO,OAAQ,SAAS,IAAI,KAAK,OAAQ;AAC3C;","names":[]}

package/dist/feedback/flow-completion.d.ts

@@ -0,0 +1,30 @@
+export interface FlowCompletion {
+    /** What finished: `catalog.import`, `setup`, `campaign.send`. */
+    flow: string;
+}
+/**
+ * Announce that a merchant just FINISHED something.
+ *
+ * A flow is a piece of work with an ending somebody notices — an import that
+ * lands, a setup checklist that completes, a campaign that goes out. It is not
+ * a page view, and the distinction is the whole point of this module.
+ *
+ * Prefer this over dispatching the event by hand: the detail shape is the
+ * contract, and a hand-rolled `new Event(...)` carries no detail at all. Same
+ * pattern, and the same reasoning, as `openFeedback`.
+ */
+export declare function completeFlow(flow: string): void;
+/**
+ * Whether a flow finished in the last few seconds.
+ *
+ * THIS REPLACED A TIMER, and the timer was the wrong idea rather than the
+ * wrong number. "Ninety seconds on any page" asks whoever left a tab open,
+ * which is a measure of nothing — the answer you get is about the last thing
+ * they happened to be looking at. Asking at the end of a flow asks somebody
+ * who just DID something, and the question inherits the subject.
+ *
+ * The window is short on purpose. Twenty seconds after an import lands, the
+ * merchant is still looking at the result; two minutes later they are
+ * somewhere else and the question is an interruption again.
+ */
+export declare function useFlowJustCompleted(): string | null;

package/dist/feedback/flow-completion.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useState } from "react";
+import { playSound } from "@withpotter/lib/sound";
+const FLOW_WINDOW_MS = 2e4;
+const EVENT = "potter:flow-complete";
+function completeFlow(flow) {
+  if (typeof window === "undefined") return;
+  playSound("commit");
+  window.dispatchEvent(
+    new CustomEvent(EVENT, { detail: { flow } })
+  );
+}
+function useFlowJustCompleted() {
+  const [flow, setFlow] = useState(null);
+  useEffect(() => {
+    let timer;
+    const handler = (event) => {
+      const detail = event.detail;
+      setFlow(detail?.flow ?? "unknown");
+      clearTimeout(timer);
+      timer = setTimeout(() => setFlow(null), FLOW_WINDOW_MS);
+    };
+    window.addEventListener(EVENT, handler);
+    return () => {
+      window.removeEventListener(EVENT, handler);
+      clearTimeout(timer);
+    };
+  }, []);
+  return flow;
+}
+export {
+  completeFlow,
+  useFlowJustCompleted
+};
+//# sourceMappingURL=flow-completion.js.map

package/dist/feedback/flow-completion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/flow-completion.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { playSound } from '@withpotter/lib/sound';\n\n/** How long after a flow lands the moment is still \"just finished\". */\nconst FLOW_WINDOW_MS = 20_000;\n\nconst EVENT = 'potter:flow-complete';\n\nexport interface FlowCompletion {\n  /** What finished: `catalog.import`, `setup`, `campaign.send`. */\n  flow: string;\n}\n\n/**\n * Announce that a merchant just FINISHED something.\n *\n * A flow is a piece of work with an ending somebody notices — an import that\n * lands, a setup checklist that completes, a campaign that goes out. It is not\n * a page view, and the distinction is the whole point of this module.\n *\n * Prefer this over dispatching the event by hand: the detail shape is the\n * contract, and a hand-rolled `new Event(...)` carries no detail at all. Same\n * pattern, and the same reasoning, as `openFeedback`.\n */\nexport function completeFlow(flow: string) {\n  if (typeof window === 'undefined') return;\n  /**\n   * THE SOUND LIVES HERE, not in the eight screens that finish these flows.\n   *\n   * Every one of them already calls this, and every one of them means the same\n   * thing: a piece of work with an ending somebody notices just ended. That is\n   * exactly what `commit` is — two impacts, landing and seating. Wiring it per\n   * screen would have been eight chances for one of them to play a different\n   * sound for the same event, which is how a product ends up with four\n   * successes that sound like four different products.\n   */\n  playSound('commit');\n  window.dispatchEvent(\n    new CustomEvent<FlowCompletion>(EVENT, { detail: { flow } }),\n  );\n}\n\n/**\n * Whether a flow finished in the last few seconds.\n *\n * THIS REPLACED A TIMER, and the timer was the wrong idea rather than the\n * wrong number. \"Ninety seconds on any page\" asks whoever left a tab open,\n * which is a measure of nothing — the answer you get is about the last thing\n * they happened to be looking at. Asking at the end of a flow asks somebody\n * who just DID something, and the question inherits the subject.\n *\n * The window is short on purpose. Twenty seconds after an import lands, the\n * merchant is still looking at the result; two minutes later they are\n * somewhere else and the question is an interruption again.\n */\nexport function useFlowJustCompleted(): string | null {\n  const [flow, setFlow] = useState<string | null>(null);\n\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<FlowCompletion>).detail;\n      setFlow(detail?.flow ?? 'unknown');\n      clearTimeout(timer);\n      timer = setTimeout(() => setFlow(null), FLOW_WINDOW_MS);\n    };\n    window.addEventListener(EVENT, handler);\n    return () => {\n      window.removeEventListener(EVENT, handler);\n      clearTimeout(timer);\n    };\n  }, []);\n\n  return flow;\n}\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAG1B,MAAM,iBAAiB;AAEvB,MAAM,QAAQ;AAkBP,SAAS,aAAa,MAAc;AACzC,MAAI,OAAO,WAAW,YAAa;AAWnC,YAAU,QAAQ;AAClB,SAAO;AAAA,IACL,IAAI,YAA4B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAAA,EAC7D;AACF;AAeO,SAAS,uBAAsC;AACpD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,YAAU,MAAM;AACd,QAAI;AACJ,UAAM,UAAU,CAAC,UAAiB;AAChC,YAAM,SAAU,MAAsC;AACtD,cAAQ,QAAQ,QAAQ,SAAS;AACjC,mBAAa,KAAK;AAClB,cAAQ,WAAW,MAAM,QAAQ,IAAI,GAAG,cAAc;AAAA,IACxD;AACA,WAAO,iBAAiB,OAAO,OAAO;AACtC,WAAO,MAAM;AACX,aAAO,oBAAoB,OAAO,OAAO;AACzC,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/feedback/index.d.ts

@@ -0,0 +1,13 @@
+export { FeedbackPromptProvider, useFeedbackPrompt, useFeedbackSignal, useReportAdoption, useFeatureAdoption, usePromptEligible, } from './feedback-prompt-context';
+export { FeedbackPrompt } from './feedback-prompt';
+export { FeedbackVote } from './feedback-vote';
+export { AdminFeedbackPrompt } from './admin-feedback-prompt';
+export { AppNpsDock } from './app-nps-dock';
+export { FlowCesDock } from './flow-ces-dock';
+export { FeedbackDocks } from './feedback-docks';
+export { FLOW_CES, cesForFlow, cesKeyFor, type FlowCes } from './flow-ces';
+export { SetupCsatDock } from './setup-csat-dock';
+export { completeFlow, useFlowJustCompleted } from './flow-completion';
+export { measureAdoption, ADOPTION_BAR, type AdoptionInput, type Adoption, } from './feature-adoption';
+export { ReportAdoption, buildAdoptionInput } from './report-adoption';
+export { SayWhy } from './say-why';

package/dist/feedback/index.js

@@ -0,0 +1,49 @@
+import {
+  FeedbackPromptProvider,
+  useFeedbackPrompt,
+  useFeedbackSignal,
+  useReportAdoption,
+  useFeatureAdoption,
+  usePromptEligible
+} from "./feedback-prompt-context";
+import { FeedbackPrompt } from "./feedback-prompt";
+import { FeedbackVote } from "./feedback-vote";
+import { AdminFeedbackPrompt } from "./admin-feedback-prompt";
+import { AppNpsDock } from "./app-nps-dock";
+import { FlowCesDock } from "./flow-ces-dock";
+import { FeedbackDocks } from "./feedback-docks";
+import { FLOW_CES, cesForFlow, cesKeyFor } from "./flow-ces";
+import { SetupCsatDock } from "./setup-csat-dock";
+import { completeFlow, useFlowJustCompleted } from "./flow-completion";
+import {
+  measureAdoption,
+  ADOPTION_BAR
+} from "./feature-adoption";
+import { ReportAdoption, buildAdoptionInput } from "./report-adoption";
+import { SayWhy } from "./say-why";
+export {
+  ADOPTION_BAR,
+  AdminFeedbackPrompt,
+  AppNpsDock,
+  FLOW_CES,
+  FeedbackDocks,
+  FeedbackPrompt,
+  FeedbackPromptProvider,
+  FeedbackVote,
+  FlowCesDock,
+  ReportAdoption,
+  SayWhy,
+  SetupCsatDock,
+  buildAdoptionInput,
+  cesForFlow,
+  cesKeyFor,
+  completeFlow,
+  measureAdoption,
+  useFeatureAdoption,
+  useFeedbackPrompt,
+  useFeedbackSignal,
+  useFlowJustCompleted,
+  usePromptEligible,
+  useReportAdoption
+};
+//# sourceMappingURL=index.js.map

package/dist/feedback/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/index.ts"],"sourcesContent":["export {\n  FeedbackPromptProvider,\n  useFeedbackPrompt,\n  useFeedbackSignal,\n  useReportAdoption,\n  useFeatureAdoption,\n  usePromptEligible,\n} from './feedback-prompt-context';\nexport { FeedbackPrompt } from './feedback-prompt';\nexport { FeedbackVote } from './feedback-vote';\nexport { AdminFeedbackPrompt } from './admin-feedback-prompt';\nexport { AppNpsDock } from './app-nps-dock';\nexport { FlowCesDock } from './flow-ces-dock';\nexport { FeedbackDocks } from './feedback-docks';\nexport { FLOW_CES, cesForFlow, cesKeyFor, type FlowCes } from './flow-ces';\nexport { SetupCsatDock } from './setup-csat-dock';\nexport { completeFlow, useFlowJustCompleted } from './flow-completion';\nexport {\n  measureAdoption,\n  ADOPTION_BAR,\n  type AdoptionInput,\n  type Adoption,\n} from './feature-adoption';\nexport { ReportAdoption, buildAdoptionInput } from './report-adoption';\nexport { SayWhy } from './say-why';\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,UAAU,YAAY,iBAA+B;AAC9D,SAAS,qBAAqB;AAC9B,SAAS,cAAc,4BAA4B;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,gBAAgB,0BAA0B;AACnD,SAAS,cAAc;","names":[]}

package/dist/feedback/merchant-feedback-prompt.d.ts

@@ -0,0 +1,6 @@
+interface MerchantFeedbackPromptProps {
+    tenantSlug?: string;
+    route: string;
+}
+export declare function MerchantFeedbackPrompt({ tenantSlug, route, }: MerchantFeedbackPromptProps): import("react").JSX.Element;
+export {};