@goflowstate/widget-sdk 0.3.4 → 0.3.5

package/dist/feedback.d.ts

@@ -2,9 +2,11 @@
  * Flow feedback: the bug icon every flow carries (flowstate-docs plan 2026-11-09-flow-feedback).
  *
  * The session client mounts this when the session state says `feedbackEnabled`. A round button
- * sits in the corner of the flow's own page. A tap takes a screenshot of the page as the person
- * sees it, then opens a sheet: the thumbnail, one field, one button. The note goes out through
- * the flow's own session (`session.request('feedback', …)`).
+ * sits in the corner of the flow's own page. A tap opens a sheet (one field, one button) and
+ * takes a screenshot of the page as the person sees it. The sheet says each step: the picture is
+ * being taken, it is attached (or there is none, with a way to take it again), the note is
+ * sending, it is sent. The note goes out through the flow's own session
+ * (`session.request('feedback', …)`).
  *
  * It lives in the flow's document, in a shadow root, so it takes the flow's look instead of
  * bringing one: the flow's fonts by inheritance, and its ground, ink, main button and corner

package/dist/feedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../src/feedback.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,0FAA0F;IAC1F,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7C;AAED,MAAM,WAAW,mBAAmB;IAClC,yFAAyF;IACzF,MAAM,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD;;iGAE6F;IAC7F,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,0EAA0E;IAC1E,OAAO,IAAI,IAAI,CAAC;IAChB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtB,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,0BAA0B,CAAC;AAC1D,gGAAgG;AAChG,eAAO,MAAM,oBAAoB,SAAU,CAAC;AAC5C,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAKxC,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE7C,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CA8BtE;AAaD,+BAA+B;AAC/B,eAAO,MAAM,SAAS,GAAI,GAAG,IAAI,KAAG,MAMnC,CAAC;AAmHF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,GAAE,QAAmB,GAAG,iBAAiB,CAwHzE;AAOD,sFAAsF;AACtF,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAiBzE;AAkDD,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,cAAc,IAAI,CAAC;AAChC,kFAAkF;AAClF,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,6DAA6D;AAC7D,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,4FAA4F;AAC5F,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,sFAAsF;AACtF,eAAO,MAAM,KAAK,IAAI,CAAC;AACvB,eAAO,MAAM,IAAI,IAAI,CAAC;AACtB,eAAO,MAAM,GAAG,IAAI,CAAC;AACrB,MAAM,MAAM,SAAS,GAAG,OAAO,KAAK,GAAG,OAAO,IAAI,GAAG,OAAO,GAAG,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;CAChB;AAKD;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,MAAM,EACtB,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,SAAS,GACtC,MAAM,CA4BR;AAkBD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,OAAO,EACb,GAAG,GAAE,QAAmB,GACvB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,SAAS,CAyDrC;AAUD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,CAAC;AAC7D,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,sFAAsF;AACtF,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B;6CAC6C;AAC7C,eAAO,MAAM,QAAQ,qBAAqB,CAAC;AAE3C,4FAA4F;AAC5F,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,0FAA0F;AAC1F,eAAO,MAAM,eAAe,GAAI,GAAG,MAAM,EAAE,qBAAoB,KAAG,MAChB,CAAC;AAEnD,8FAA8F;AAC9F,eAAO,MAAM,UAAU,GAAI,WAAW,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAe,KAAG,MACA,CAAC;AAQpF,6DAA6D;AAC7D,wBAAgB,WAAW,CACzB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,OAAO,EACb,CAAC,EAAE,MAAM,EACT,IAAI,EAAE,gBAAgB,GACrB,YAAY,CASd;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAClC,IAAI,EAAE,gBAAgB,GACrB,YAAY,CAUd;AAgGD,qFAAqF;AACrF,eAAO,MAAM,gBAAgB,GAAI,MAAK,QAAmB,KAAG,OACI,CAAC;AAIjE,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,GAAG,IAAI,CA6dzF;AAED,eAAO,MAAM,mBAAmB,QAAO,IAA0B,CAAC"}
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../src/feedback.ts"],"names":[],"mappings":"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"}

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// @goflowstate/widget-sdk v0.3.4
+// @goflowstate/widget-sdk v0.3.5
 // https://github.com/goflowstate/goflowstate-sdk
 
 var __defProp = Object.defineProperty;
@@ -43,7 +43,9 @@ function createServiceClient(opts) {
 var FEEDBACK_HOST_ATTR = "data-fs-feedback-host";
 var SCREENSHOT_MAX_BYTES = 15e4;
 var SCREENSHOT_MAX_SIDE = 1280;
-var CAPTURE_TIMEOUT_MS = 4e3;
+var CAPTURE_TIMEOUT_MS = 15e3;
+var SEND_WAIT_MS = 4e3;
+var SENT_HOLD_MS = 1600;
 function parseColor(raw) {
   const value = (raw ?? "").trim().toLowerCase();
   if (!value || value === "transparent") return null;
@@ -473,11 +475,41 @@ h2 {
   margin: 2px 0 0; font-family: var(--font-display); font-weight: var(--display-weight);
   font-size: 22px; line-height: 1.15; letter-spacing: var(--display-tracking); text-wrap: balance;
 }
-.shot { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-dim); }
-.shot img { width: 50px; max-height: 108px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); }
-.ghost { display: none; width: 50px; height: 108px; border-radius: 8px; border: 1px solid var(--line); background: var(--fill); }
-.shot[data-pending] .ghost { display: block; }
-.shot[data-pending] img { display: none; }
+.form { display: contents; }
+.shot { display: flex; gap: 14px; align-items: center; font-size: 14px; }
+.thumb {
+  position: relative; flex: none; width: 60px; aspect-ratio: var(--shot-ratio, 0.46); max-height: 124px;
+  border-radius: 9px; border: 1px solid var(--line); background: var(--fill);
+}
+.thumb img { display: none; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px; }
+.scan, .empty, .badge { display: none; }
+.shot[data-shot="taking"] .thumb { overflow: hidden; }
+.shot[data-shot="taking"] .scan {
+  display: block; position: absolute; left: 0; right: 0; top: 0; height: 34%;
+  background: linear-gradient(to bottom, transparent, var(--line)); border-bottom: 2px solid var(--ink);
+}
+.shot[data-shot="attached"] .thumb { background: var(--surface); }
+.shot[data-shot="attached"] img { display: block; }
+.shot[data-shot="attached"] .badge {
+  display: grid; place-items: center; position: absolute; right: -8px; top: -8px; width: 22px; height: 22px;
+  border-radius: 50%; background: #1f7a4d; color: #fff; border: 2px solid var(--surface);
+}
+.badge svg { width: 12px; height: 12px; }
+.shot[data-shot="none"] .thumb { border-style: dashed; background: none; }
+.shot[data-shot="none"] .empty { display: grid; place-items: center; position: absolute; inset: 0; color: var(--ink-dim); }
+.empty svg { width: 22px; height: 22px; }
+.shot-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
+.shot-label { font-weight: 600; color: var(--ink); }
+.shot[data-shot="none"] .shot-label { color: var(--ink-dim); font-weight: inherit; }
+.finder {
+  position: fixed; z-index: 2147483002; pointer-events: none;
+  top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; bottom: var(--finder-bottom, 55%);
+}
+.finder i { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); }
+.finder i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
+.finder i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
+.finder i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }
+.finder i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }
 .link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
 textarea {
   width: 100%; min-height: 84px; resize: none; font: inherit; font-size: 16px; color: var(--ink);
@@ -490,7 +522,19 @@ textarea::placeholder { color: var(--ink-dim); }
   cursor: pointer; border: 0; padding: 15px 14px;
   background: var(--cta); color: var(--cta-ink); border-radius: var(--button-radius);
 }
+.send { display: flex; align-items: center; justify-content: center; gap: 9px; }
 .send[disabled] { opacity: 0.5; cursor: default; }
+.sheet[data-busy] .send { opacity: 1; }
+.dots { display: inline-flex; gap: 4px; }
+.dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.4; }
+.done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 10px; }
+.ring { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1f7a4d; color: #fff; }
+.ring svg { width: 26px; height: 26px; }
+.done-title {
+  margin: 0; font-family: var(--font-display); font-weight: var(--display-weight);
+  font-size: 22px; line-height: 1.15; letter-spacing: var(--display-tracking);
+}
+.said { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .status { margin: 0; font-size: 13px; color: var(--ink-dim); min-height: 1.4em; }
 [hidden] { display: none !important; }
 @media (prefers-reduced-motion: no-preference) {
@@ -500,13 +544,31 @@ textarea::placeholder { color: var(--ink-dim); }
   }
   .bug svg { transition: transform 0.1s ease-out, width 0.22s ease, height 0.22s ease; }
   .sheet { animation: rise 0.22s ease-out; }
-  .shot[data-pending] .ghost { animation: wait 1.1s ease-in-out infinite alternate; }
-  @keyframes wait { from { opacity: 0.45; } to { opacity: 1; } }
+  .shot[data-shot="taking"] .scan { animation: fsf-scan 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
+  @keyframes fsf-scan { from { transform: translateY(-100%); } to { transform: translateY(300%); } }
+  .finder i { animation: fsf-frame 0.9s ease-in-out infinite alternate; }
+  @keyframes fsf-frame { from { opacity: 0.55; } to { opacity: 1; } }
+  .shot[data-shot="attached"] img { animation: fsf-land 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
+  @keyframes fsf-land { from { transform: scale(1.14); opacity: 0; } to { transform: none; opacity: 1; } }
+  .shot[data-shot="attached"] .badge { animation: fsf-pop 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) 0.14s backwards; }
+  .ring { animation: fsf-pop 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
+  @keyframes fsf-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
+  .dots i { animation: fsf-dot 1s ease-in-out infinite; }
+  .dots i:nth-child(2) { animation-delay: 0.15s; }
+  .dots i:nth-child(3) { animation-delay: 0.3s; }
+  @keyframes fsf-dot { 30% { opacity: 1; transform: translateY(-2px); } 60% { opacity: 0.4; transform: none; } }
   @keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
 }
 `;
 var mounted = null;
 var feedbackOptedOut = (doc = document) => doc.documentElement.getAttribute("data-fs-feedback") === "off";
+var CHECK_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+var CAMERA_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6.5" width="17" height="12.5" rx="3"/><circle cx="12" cy="12.8" r="3.2"/><path d="M9 6.5l1-2h4l1 2"/></svg>';
+var SHOT_LABEL = {
+  taking: "Taking a screenshot",
+  attached: "Screenshot attached",
+  none: "No screenshot"
+};
 var SCROLL_OPTIONS = { capture: true, passive: true };
 function mountFlowFeedback(options) {
   if (typeof document === "undefined" || !document.body) return null;
@@ -519,14 +581,22 @@ function mountFlowFeedback(options) {
 <button type="button" class="bug" data-state="float" aria-label="Send feedback on this page">${BUG_ICON}</button>
 <div class="probe" aria-hidden="true"></div>
 <div class="scrim" hidden></div>
-<div class="sheet" role="dialog" aria-modal="true" aria-labelledby="fsf-title" hidden>
+<div class="finder" aria-hidden="true" hidden><i></i><i></i><i></i><i></i></div>
+<div class="sheet" role="dialog" aria-modal="true" aria-labelledby="fsf-title" data-view="form" hidden>
   <div class="grab" aria-hidden="true"></div>
-  <h2 id="fsf-title">Feedback on this page</h2>
-  <div class="shot" hidden><span class="ghost" aria-hidden="true"></span><img alt="Screenshot of this page" /><span><span class="shot-label">Screenshot attached</span><br /><button type="button" class="link remove">Remove screenshot</button></span></div>
-  <textarea aria-labelledby="fsf-title" placeholder="What should change?" maxlength="2000"></textarea>
-  <p class="status" role="status" aria-live="polite"></p>
-  <button type="button" class="send" disabled>Send feedback</button>
-  <button type="button" class="link tuck">Tuck the button to the side</button>
+  <div class="form">
+    <h2 id="fsf-title">Feedback on this page</h2>
+    <div class="shot" data-shot="none">
+      <span class="thumb"><span class="scan" aria-hidden="true"></span><img alt="Screenshot of this page" /><span class="empty" aria-hidden="true">${CAMERA_ICON}</span><span class="badge" aria-hidden="true">${CHECK_ICON}</span></span>
+      <span class="shot-text"><span class="shot-label" role="status" aria-live="polite">No screenshot</span><button type="button" class="link remove" hidden>Remove</button><button type="button" class="link retake" hidden>Take screenshot</button></span>
+    </div>
+    <textarea aria-labelledby="fsf-title" placeholder="What should change?" maxlength="2000"></textarea>
+    <p class="status" role="status" aria-live="polite"></p>
+    <button type="button" class="send" disabled><span class="send-label">Send feedback</span><span class="dots" aria-hidden="true" hidden><i></i><i></i><i></i></span></button>
+    <button type="button" class="link tuck">Tuck the button to the side</button>
+  </div>
+  <div class="done" hidden><span class="ring">${CHECK_ICON}</span><p class="done-title" aria-hidden="true">Feedback sent</p></div>
+  <p class="said" role="status" aria-live="polite"></p>
 </div>`;
   const q = (selector) => root.querySelector(selector);
   const bug = q(".bug");
@@ -536,6 +606,13 @@ function mountFlowFeedback(options) {
   const img = q(".shot img");
   const shotLabel = q(".shot-label");
   const remove = q(".remove");
+  const retake = q(".retake");
+  const finder = q(".finder");
+  const form = q(".form");
+  const done = q(".done");
+  const said = q(".said");
+  const sendLabel = q(".send-label");
+  const dots = q(".dots");
   const text = q("textarea");
   const status = q(".status");
   const send = q(".send");
@@ -761,14 +838,54 @@ function mountFlowFeedback(options) {
   };
   let round = 0;
   let pending = null;
-  const setShot = (url) => {
-    screenshot = url;
-    shot.hidden = url === null;
-    shot.removeAttribute("data-pending");
-    shotLabel.textContent = "Screenshot attached";
-    if (url) img.src = url;
+  const setShot = (state, url = null) => {
+    screenshot = state === "attached" ? url : null;
+    shot.dataset.shot = state;
+    shotLabel.textContent = SHOT_LABEL[state];
+    remove.hidden = state !== "attached" || busy;
+    retake.hidden = state !== "none" || busy;
+    finder.hidden = state !== "taking";
+    if (screenshot) img.src = screenshot;
     else img.removeAttribute("src");
   };
+  const setBusy = (next) => {
+    busy = next;
+    if (busy) sheet.setAttribute("data-busy", "");
+    else sheet.removeAttribute("data-busy");
+    text.readOnly = busy;
+    sendLabel.textContent = busy ? "Sending" : "Send feedback";
+    dots.hidden = !busy;
+    const state = shot.dataset.shot;
+    remove.hidden = state !== "attached" || busy;
+    retake.hidden = state !== "none" || busy;
+    sync();
+  };
+  const setView = (view) => {
+    sheet.dataset.view = view;
+    form.hidden = view !== "form";
+    done.hidden = view !== "sent";
+    said.textContent = view === "sent" ? "Feedback sent" : "";
+  };
+  const take = () => {
+    const mine = round += 1;
+    setShot("taking");
+    host.style.setProperty("--finder-bottom", `${sheet.offsetHeight + 10}px`);
+    host.style.setProperty(
+      "--shot-ratio",
+      String(Math.max(0.3, Math.min(1, window.innerWidth / Math.max(1, window.innerHeight))))
+    );
+    const capture = options.capture ?? (() => captureViewport(theme.ground));
+    const work = withTimeout(Promise.resolve().then(capture), CAPTURE_TIMEOUT_MS).then((url) => {
+      if (mine !== round) return;
+      pending = null;
+      setShot(url ? "attached" : "none", url);
+      const active = root.activeElement;
+      if (!busy && (!active || active === bug || active === retake || active === remove))
+        text.focus();
+    });
+    pending = work;
+    return work;
+  };
   const close = () => {
     if (closeTimer) clearTimeout(closeTimer);
     closeTimer = null;
@@ -777,10 +894,11 @@ function mountFlowFeedback(options) {
     sheet.hidden = true;
     scrim.hidden = true;
     bug.hidden = false;
-    setShot(null);
+    setBusy(false);
+    setShot("none");
+    setView("form");
     text.value = "";
     status.textContent = "";
-    busy = false;
     sync();
     schedulePlace();
   };
@@ -788,34 +906,34 @@ function mountFlowFeedback(options) {
     if (!sheet.hidden) return pending ?? Promise.resolve();
     if (busy) return Promise.resolve();
     paint();
-    const mine = round += 1;
     bug.hidden = true;
-    setShot(null);
-    shot.hidden = false;
-    shot.setAttribute("data-pending", "");
-    shotLabel.textContent = "Taking a screenshot";
+    setView("form");
     tuck.hidden = spot.state !== "float";
     scrim.hidden = false;
     sheet.hidden = false;
     sync();
-    const capture = options.capture ?? (() => captureViewport(theme.ground));
-    pending = withTimeout(Promise.resolve().then(capture), CAPTURE_TIMEOUT_MS).then((url) => {
-      if (mine !== round) return;
-      pending = null;
-      setShot(url);
-      if (!root.activeElement || root.activeElement === bug) text.focus();
-    });
-    return pending;
+    return take();
   };
   const submit = async () => {
     const message = text.value.trim();
     if (!message || busy) return;
-    busy = true;
-    sync();
+    setBusy(true);
     status.textContent = "";
-    const mine = round;
-    if (pending) await pending;
-    if (mine !== round) return;
+    let mine = round;
+    if (pending) {
+      let timer;
+      await Promise.race([
+        pending,
+        new Promise((resolve) => timer = setTimeout(resolve, SEND_WAIT_MS))
+      ]);
+      clearTimeout(timer);
+      if (mine !== round) return;
+      if (pending) {
+        mine = round += 1;
+        pending = null;
+        setShot("none");
+      }
+    }
     try {
       await options.submit({
         message,
@@ -824,15 +942,16 @@ function mountFlowFeedback(options) {
         pagePath: window.location.pathname.slice(-200),
         viewport: { width: window.innerWidth, height: window.innerHeight }
       });
-      status.textContent = "Sent.";
+      if (mine !== round) return;
+      setView("sent");
       closeTimer = setTimeout(() => {
         close();
         bug.focus();
-      }, 1200);
+      }, SENT_HOLD_MS);
     } catch {
-      busy = false;
+      if (mine !== round) return;
+      setBusy(false);
       status.textContent = "That did not send. Try again.";
-      sync();
     }
   };
   bug.addEventListener("click", () => {
@@ -866,7 +985,15 @@ function mountFlowFeedback(options) {
   remove.addEventListener("click", () => {
     round += 1;
     pending = null;
-    setShot(null);
+    setShot("none");
+    retake.focus();
+  });
+  retake.addEventListener("click", () => void take());
+  sheet.addEventListener("click", () => {
+    if (sheet.dataset.view === "sent") {
+      close();
+      bug.focus();
+    }
   });
   text.addEventListener("input", sync);
   send.addEventListener("click", () => void submit());