@goflowstate/widget-sdk 0.3.1 → 0.3.4

package/dist/canvas-widget-sdk.js

@@ -1,4 +1,4 @@
-// @goflowstate/widget-sdk v0.3.1
+// @goflowstate/widget-sdk v0.3.4
 // https://github.com/goflowstate/goflowstate-sdk
 
 "use strict";
@@ -159,6 +159,46 @@ var CanvasWidgetSDK = (() => {
     });
     return best;
   };
+  var TEXT_SAMPLE_LIMIT = 600;
+  var DISPLAY_MIN_PX = 22;
+  var sizeOf = (style) => {
+    const n = parseFloat(style.fontSize);
+    return Number.isFinite(n) && n > 0 ? n : 16;
+  };
+  var textSamples = (doc) => {
+    const out = [];
+    const all = doc.body.querySelectorAll("*");
+    for (let i = 0; i < all.length && out.length < TEXT_SAMPLE_LIMIT; i += 1) {
+      const el = all[i];
+      if (el.tagName === "SCRIPT" || el.tagName === "STYLE" || inOurs(el)) continue;
+      let chars = 0;
+      for (const node of Array.from(el.childNodes)) {
+        if (node.nodeType === 3) chars += (node.textContent ?? "").trim().length;
+      }
+      if (chars === 0 || !visible(el)) continue;
+      const style = styleOf(el);
+      if (!style.fontFamily) continue;
+      out.push({
+        family: style.fontFamily,
+        size: sizeOf(style),
+        chars,
+        style,
+        heading: /^H[1-3]$/.test(el.tagName)
+      });
+    }
+    return out;
+  };
+  var trackingEm = (style, min, max, fallback) => {
+    const px = style ? parseFloat(style.letterSpacing) : NaN;
+    const em = style && Number.isFinite(px) ? px / sizeOf(style) : fallback;
+    const held = Math.min(max, Math.max(min, em));
+    return held === 0 ? "0em" : `${Math.round(held * 1e3) / 1e3}em`;
+  };
+  var weightIn = (style, min, max, fallback) => {
+    const raw = style?.fontWeight ?? "";
+    const n = raw === "bold" ? 700 : raw === "normal" ? 400 : parseFloat(raw);
+    return Number.isFinite(n) ? String(Math.min(max, Math.max(min, n))) : fallback;
+  };
   function readFlowTheme(doc = document) {
     const body = doc.body;
     const stage = body.querySelector(":scope > :not(script):not(style):not([data-fs-feedback-host])");
@@ -181,12 +221,32 @@ var CanvasWidgetSDK = (() => {
     const pinnedCtaInk = parseColor(rootVar(doc, ["--fs-feedback-cta-ink"]));
     const sampledCtaInk = !pinnedCta && sampledCta && buttonStyle ? parseColor(buttonStyle.color) : null;
     const ctaInk = pinnedCtaInk ?? (sampledCtaInk && contrast(sampledCtaInk, cta) >= 3 ? sampledCtaInk : null) ?? (luminance(cta) > 0.4 ? BLACK : WHITE);
-    const heading = Array.from(doc.querySelectorAll('h1, h2, [class*="title"]')).find(
+    const samples = textSamples(doc);
+    const headings = Array.from(doc.querySelectorAll('h1, h2, [class*="title"]')).filter(
       (el) => !inOurs(el) && visible(el)
     );
-    const headingStyle = heading ? styleOf(heading) : null;
-    const fontBody = rootVar(doc, ["--fs-feedback-font"]) || (stage ? styleOf(stage).fontFamily : "") || bodyStyle.fontFamily || rootVar(doc, ["--sb-font-body", "--font-body"]) || "system-ui, sans-serif";
+    const largest = (items, size) => items.reduce(
+      (best, item) => best === null || size(item) > size(best) ? item : best,
+      null
+    );
+    const bigHeading = largest(
+      headings.filter((el) => sizeOf(styleOf(el)) >= DISPLAY_MIN_PX),
+      (el) => sizeOf(styleOf(el))
+    );
+    const bigLine = largest(
+      samples.filter((t) => t.size >= DISPLAY_MIN_PX && t.chars >= 3),
+      (t) => t.size
+    );
+    const headingStyle = bigHeading ? styleOf(bigHeading) : bigLine?.style ?? (headings[0] ? styleOf(headings[0]) : null);
+    const byFamily = /* @__PURE__ */ new Map();
+    for (const t of samples) {
+      if (t.size < DISPLAY_MIN_PX && !t.heading)
+        byFamily.set(t.family, (byFamily.get(t.family) ?? 0) + t.chars);
+    }
+    const readBody = largest(Array.from(byFamily), ([, chars]) => chars)?.[0] ?? "";
+    const fontBody = rootVar(doc, ["--fs-feedback-font"]) || readBody || (stage ? styleOf(stage).fontFamily : "") || bodyStyle.fontFamily || rootVar(doc, ["--sb-font-body", "--font-body"]) || "system-ui, sans-serif";
     const fontDisplay = rootVar(doc, ["--fs-feedback-font-display"]) || headingStyle?.fontFamily || rootVar(doc, ["--sb-font-display", "--sb-font-title", "--font-display"]) || fontBody;
+    const buttonType = buttonStyle?.fontFamily ? buttonStyle : null;
     const field = Array.from(
       doc.querySelectorAll('textarea, input[type="text"], input:not([type])')
     ).find((el) => !inOurs(el) && visible(el));
@@ -210,6 +270,11 @@ var CanvasWidgetSDK = (() => {
       fontBody,
       fontDisplay,
       displayWeight: headingStyle?.fontWeight || "500",
+      displayTracking: trackingEm(headingStyle, -0.04, 0.02, -0.01),
+      fontButton: buttonType?.fontFamily || fontBody,
+      buttonWeight: weightIn(buttonType, 500, 800, "600"),
+      buttonTracking: trackingEm(buttonType, -0.02, 0.08, 0),
+      buttonTransform: buttonType?.textTransform === "uppercase" ? "uppercase" : "none",
       radius,
       buttonRadius: buttonRadius === null ? "999px" : `${Math.min(buttonRadius, 999)}px`,
       dark
@@ -235,9 +300,10 @@ var CanvasWidgetSDK = (() => {
     return null;
   }
   async function captureViewport(ground) {
-    const { domToCanvas: domToCanvas2 } = await Promise.resolve().then(() => (init_modern_screenshot(), modern_screenshot_exports));
     const width = window.innerWidth;
     const height = window.innerHeight;
+    const { scrollX, scrollY } = window;
+    const { domToCanvas: domToCanvas2 } = await Promise.resolve().then(() => (init_modern_screenshot(), modern_screenshot_exports));
     const scale = Math.min(
       window.devicePixelRatio || 1,
       SCREENSHOT_MAX_SIDE / Math.max(width, height)
@@ -247,7 +313,7 @@ var CanvasWidgetSDK = (() => {
       height,
       scale,
       backgroundColor: ground,
-      style: { transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)` },
+      style: { transform: `translate(${-scrollX}px, ${-scrollY}px)` },
       filter: (node) => !(node instanceof Element && node.hasAttribute(FEEDBACK_HOST_ATTR))
     });
     return encodeScreenshot(canvas);
@@ -265,21 +331,168 @@ var CanvasWidgetSDK = (() => {
       }
     );
   });
+  var PLACEMENT_BASE = 16;
+  var PLACEMENT_STEP = 8;
+  var PLACEMENT_PAD = 8;
+  var PLACEMENT_MAX_SHARE = 0.6;
+  var PLACEMENT_READ_COST = 240;
+  var EMPTY = 0;
+  var READ = 1;
+  var TAP = 2;
+  var SAMPLES = 5;
+  function choosePlacement(box, viewportHeight, at) {
+    const max = Math.max(PLACEMENT_BASE, viewportHeight * PLACEMENT_MAX_SHARE);
+    const span = box.size + PLACEMENT_PAD * 2;
+    const offsets = Array.from({ length: SAMPLES }, (_, i) => span * i / (SAMPLES - 1));
+    const x0 = box.left - PLACEMENT_PAD;
+    let best = PLACEMENT_BASE;
+    let bestCost = Infinity;
+    for (let bottom = PLACEMENT_BASE; bottom <= max; bottom += PLACEMENT_STEP) {
+      if (bottom >= bestCost) break;
+      const y0 = box.top - (bottom - box.bottom) - PLACEMENT_PAD;
+      let worst = EMPTY;
+      for (const dy of offsets) {
+        for (const dx of offsets) {
+          const found = at(x0 + dx, y0 + dy);
+          if (found > worst) worst = found;
+          if (worst === TAP) break;
+        }
+        if (worst === TAP) break;
+      }
+      if (worst === TAP) continue;
+      const cost = bottom + (worst === READ ? PLACEMENT_READ_COST : 0);
+      if (cost < bestCost) {
+        bestCost = cost;
+        best = bottom;
+      }
+    }
+    return best;
+  }
+  var TAPPABLE = 'a[href],button,input,select,textarea,summary,label,[role="button"],[role="link"],[role="tab"],[role="switch"],[role="checkbox"],[role="radio"],[role="slider"],[role="option"],[tabindex]:not([tabindex="-1"]),[contenteditable=""],[contenteditable="true"],[onclick]';
+  var PICTURE = "img,svg,canvas,video,picture";
+  var SURFACE_SHARE = 0.8;
+  function occupancyReader(host, doc = document) {
+    if (typeof doc.elementsFromPoint !== "function") return () => EMPTY;
+    const view = doc.defaultView;
+    const width = view?.innerWidth ?? 1;
+    const height = view?.innerHeight ?? 1;
+    const seen = /* @__PURE__ */ new Map();
+    const read = (el) => {
+      const known = seen.get(el);
+      if (known) return known;
+      const style = view ? view.getComputedStyle(el) : null;
+      let tap = el.matches(TAPPABLE) || style?.cursor === "pointer";
+      if (tap) {
+        const r = el.getBoundingClientRect();
+        if (r.width * r.height >= width * height * SURFACE_SHARE) tap = false;
+      }
+      const text = [];
+      if (typeof doc.createRange === "function") {
+        for (const node of Array.from(el.childNodes)) {
+          if (node.nodeType !== 3 || !node.nodeValue || !node.nodeValue.trim()) continue;
+          const range = doc.createRange();
+          range.selectNodeContents(node);
+          if (typeof range.getClientRects === "function")
+            text.push(...Array.from(range.getClientRects()));
+        }
+      }
+      const ground = parseColor(style?.backgroundColor);
+      const image = style?.backgroundImage ?? "";
+      const reading = {
+        tap,
+        picture: el.matches(PICTURE) || el.closest("svg") !== null,
+        text,
+        opaque: ground !== null && ground[3] >= 0.5 || image !== "" && image !== "none"
+      };
+      seen.set(el, reading);
+      return reading;
+    };
+    return (x, y) => {
+      const cx = Math.min(Math.max(x, 0), width - 1);
+      const cy = Math.min(Math.max(y, 0), height - 1);
+      const stack = doc.elementsFromPoint(cx, cy).filter((el) => el !== host && el !== doc.documentElement && el !== doc.body);
+      for (let el = stack[0] ?? null; el && el !== doc.body; el = el.parentElement) {
+        if (read(el).tap) return TAP;
+      }
+      for (const el of stack) {
+        const r = read(el);
+        if (r.picture || r.text.some((t) => cx >= t.left && cx <= t.right && cy >= t.top && cy <= t.bottom))
+          return READ;
+        if (r.opaque) break;
+      }
+      return EMPTY;
+    };
+  }
+  var BUTTON_SIZE = 44;
+  var TAB_WIDTH = 26;
+  var TAB_HEIGHT = 54;
+  var EDGE_MARGIN = 12;
+  var DOCK_PAST = 14;
+  var SPOT_KEY = "fs-feedback-spot";
+  var projectMomentum = (v, deceleration = 0.992) => v / 1e3 * deceleration / (1 - deceleration);
+  var rubberband = (overshoot, dimension, constant = 0.55) => overshoot * dimension * constant / (dimension + constant * Math.abs(overshoot));
+  var clampY = (y, height, view) => Math.min(
+    Math.max(y, view.top + EDGE_MARGIN),
+    Math.max(view.top + EDGE_MARGIN, view.height - view.bottom - EDGE_MARGIN - height)
+  );
+  function restingSpot(state, left, y, view) {
+    if (state === "float") {
+      return {
+        state,
+        x: left ? EDGE_MARGIN : view.width - BUTTON_SIZE - EDGE_MARGIN,
+        y: clampY(y, BUTTON_SIZE, view)
+      };
+    }
+    return { state, x: left ? 0 : view.width - TAB_WIDTH, y: clampY(y, TAB_HEIGHT, view) };
+  }
+  function settleRelease(from, velocity, view) {
+    const py = from.y + projectMomentum(velocity.y);
+    if (from.state !== "float") return restingSpot(from.state, from.state === "dock-left", py, view);
+    const px = from.x + projectMomentum(velocity.x);
+    const maxX = view.width - BUTTON_SIZE;
+    const tabY = py + (BUTTON_SIZE - TAB_HEIGHT) / 2;
+    if (px < -DOCK_PAST || from.x < 3) return restingSpot("dock-left", true, tabY, view);
+    if (px > maxX + DOCK_PAST || from.x > maxX - 3)
+      return restingSpot("dock-right", false, tabY, view);
+    return restingSpot("float", px + BUTTON_SIZE / 2 < view.width / 2, py, view);
+  }
   var BUG_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="7" width="8" height="12" rx="4"/><path d="M9.5 7a2.5 2.5 0 0 1 5 0M12 11v8M4 13h4M16 13h4M5 7l3.2 2.4M19 7l-3.2 2.4M5 20l3.2-2.6M19 20l-3.2-2.6"/></svg>';
   var STYLE = `
 :host { all: initial; }
 * { box-sizing: border-box; }
 .bug {
-  position: fixed; z-index: 2147483000;
-  right: calc(var(--fs-feedback-right, 14px) + env(safe-area-inset-right, 0px));
-  bottom: calc(var(--fs-feedback-bottom, 88px) + env(safe-area-inset-bottom, 0px));
-  width: 44px; height: 44px; border-radius: 50%; padding: 0;
-  display: grid; place-items: center; cursor: pointer;
+  position: fixed; z-index: 2147483000; left: 0; top: 0;
+  width: 44px; height: 44px; border-radius: 22px; padding: 0; margin: 0;
+  display: var(--fs-feedback-display, grid); place-items: center; cursor: grab;
   background: var(--surface); color: var(--ink); border: 1px solid var(--line);
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
-  -webkit-tap-highlight-color: transparent;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.12);
+  -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none;
+  will-change: transform;
+}
+@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .bug {
+    background: color-mix(in srgb, var(--surface) 74%, transparent);
+    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
+  }
+}
+.bug svg { width: 20px; height: 20px; pointer-events: none; }
+.bug.down svg { transform: scale(0.9); }
+.bug.dragging { cursor: grabbing; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26), 0 3px 8px rgba(0, 0, 0, 0.14); }
+.bug[data-state^="dock"] { width: 26px; height: 54px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); opacity: 0.92; }
+.bug[data-state="dock-right"] { border-radius: 16px 0 0 16px; border-right-width: 0; }
+.bug[data-state="dock-left"] { border-radius: 0 16px 16px 0; border-left-width: 0; }
+.bug[data-state^="dock"] svg { width: 16px; height: 16px; }
+.probe {
+  position: fixed; visibility: hidden; pointer-events: none; width: 0; height: 0;
+  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
+}
+.tuck { align-self: center; font-size: 13px; color: var(--ink-dim); }
+@media (prefers-reduced-transparency: reduce) {
+  .bug { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
+}
+@media (prefers-contrast: more) {
+  .bug { background: var(--surface); border-color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
 }
-.bug svg { width: 20px; height: 20px; }
 .bug:focus-visible, .send:focus-visible, .link:focus-visible, textarea:focus-visible {
   outline: 2px solid var(--ink); outline-offset: 2px;
 }
@@ -294,9 +507,15 @@ var CanvasWidgetSDK = (() => {
   font-family: var(--font-body); font-size: 15px; line-height: 1.4;
 }
 .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
-h2 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; line-height: 1.2; }
+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; }
 .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);
@@ -304,19 +523,29 @@ textarea {
 }
 textarea::placeholder { color: var(--ink-dim); }
 .send {
-  font: inherit; font-weight: 500; cursor: pointer; border: 0; padding: 14px;
+  font-family: var(--font-button); font-weight: var(--button-weight); font-size: 17px; line-height: 1.2;
+  letter-spacing: var(--button-tracking); text-transform: var(--button-transform);
+  cursor: pointer; border: 0; padding: 15px 14px;
   background: var(--cta); color: var(--cta-ink); border-radius: var(--button-radius);
 }
 .send[disabled] { opacity: 0.5; cursor: default; }
 .status { margin: 0; font-size: 13px; color: var(--ink-dim); min-height: 1.4em; }
 [hidden] { display: none !important; }
 @media (prefers-reduced-motion: no-preference) {
+  .bug {
+    transition: width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
+      border-radius 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease;
+  }
+  .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; } }
   @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 SCROLL_OPTIONS = { capture: true, passive: true };
   function mountFlowFeedback(options) {
     if (typeof document === "undefined" || !document.body) return null;
     if (mounted) return mounted;
@@ -325,15 +554,17 @@ textarea::placeholder { color: var(--ink-dim); }
     host.setAttribute(FEEDBACK_HOST_ATTR, "");
     const root = host.attachShadow({ mode: "open" });
     root.innerHTML = `<style>${STYLE}</style>
-<button type="button" class="bug" aria-label="Send feedback on this page">${BUG_ICON}</button>
+<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="grab" aria-hidden="true"></div>
   <h2 id="fsf-title">Feedback on this page</h2>
-  <div class="shot" hidden><img alt="Screenshot of this page" /><span><span>Screenshot attached</span><br /><button type="button" class="link remove">Remove screenshot</button></span></div>
+  <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>`;
     const q = (selector) => root.querySelector(selector);
     const bug = q(".bug");
@@ -341,14 +572,204 @@ textarea::placeholder { color: var(--ink-dim); }
     const sheet = q(".sheet");
     const shot = q(".shot");
     const img = q(".shot img");
+    const shotLabel = q(".shot-label");
     const remove = q(".remove");
     const text = q("textarea");
     const status = q(".status");
     const send = q(".send");
+    const tuck = q(".tuck");
+    const probe = q(".probe");
     let theme = readFlowTheme();
     let screenshot = null;
     let busy = false;
     let closeTimer = null;
+    let placeTimer = null;
+    let autoBottom = PLACEMENT_BASE;
+    let spot = { state: "float", x: 0, y: 0 };
+    let placedByPerson = false;
+    let velocity = { x: 0, y: 0 };
+    let frame = 0;
+    const px = (name) => {
+      const raw = getComputedStyle(host).getPropertyValue(name).trim();
+      const n = raw ? parseFloat(raw) : NaN;
+      return Number.isFinite(n) ? n : null;
+    };
+    const viewport = () => {
+      const style = getComputedStyle(probe);
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        top: parseFloat(style.paddingTop) || 0,
+        bottom: parseFloat(style.paddingBottom) || 0
+      };
+    };
+    const draw = () => {
+      bug.style.transform = `translate3d(${spot.x}px, ${spot.y}px, 0)`;
+    };
+    const setState = (next) => {
+      spot.state = next;
+      bug.dataset.state = next;
+    };
+    const remember = (spot2) => {
+      if (!placedByPerson) return;
+      try {
+        const view = viewport();
+        const width = spot2.state === "float" ? BUTTON_SIZE : TAB_WIDTH;
+        localStorage.setItem(
+          SPOT_KEY,
+          JSON.stringify({
+            state: spot2.state,
+            left: spot2.x + width / 2 < view.width / 2,
+            y: view.height > 0 ? spot2.y / view.height : 0
+          })
+        );
+      } catch {
+      }
+    };
+    const still = () => typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const springTo = (to, flicked) => {
+      cancelAnimationFrame(frame);
+      frame = 0;
+      setState(to.state);
+      remember(to);
+      if (still() || typeof requestAnimationFrame !== "function") {
+        spot = { ...to };
+        velocity = { x: 0, y: 0 };
+        draw();
+        return;
+      }
+      const omega = 2 * Math.PI / 0.4;
+      const k = omega * omega;
+      const c = 2 * (flicked ? 0.8 : 1) * omega;
+      let last = performance.now();
+      const tick = (now) => {
+        const dt = Math.min(0.032, (now - last) / 1e3);
+        last = now;
+        velocity.x += (-k * (spot.x - to.x) - c * velocity.x) * dt;
+        velocity.y += (-k * (spot.y - to.y) - c * velocity.y) * dt;
+        spot.x += velocity.x * dt;
+        spot.y += velocity.y * dt;
+        const close2 = Math.abs(spot.x - to.x) < 0.3 && Math.abs(spot.y - to.y) < 0.3 && Math.hypot(velocity.x, velocity.y) < 6;
+        if (close2) {
+          spot = { ...to };
+          velocity = { x: 0, y: 0 };
+          frame = 0;
+          draw();
+          return;
+        }
+        draw();
+        frame = requestAnimationFrame(tick);
+      };
+      frame = requestAnimationFrame(tick);
+    };
+    const place = () => {
+      placeTimer = null;
+      if (!sheet.hidden || bug.hidden || drag || frame) return;
+      const view = viewport();
+      if (placedByPerson || spot.state !== "float") {
+        const width = spot.state === "float" ? BUTTON_SIZE : TAB_WIDTH;
+        spot = restingSpot(spot.state, spot.x + width / 2 < view.width / 2, spot.y, view);
+        draw();
+        return;
+      }
+      const right = px("--fs-feedback-right") ?? 14;
+      const left = view.width - right - BUTTON_SIZE;
+      const pinned = px("--fs-feedback-bottom");
+      if (pinned === null && typeof document.elementsFromPoint === "function") {
+        autoBottom = choosePlacement(
+          {
+            left,
+            top: view.height - view.bottom - autoBottom - BUTTON_SIZE,
+            size: BUTTON_SIZE,
+            bottom: autoBottom
+          },
+          view.height,
+          occupancyReader(host)
+        );
+      }
+      const bottom = pinned ?? autoBottom;
+      spot = { state: "float", x: left, y: view.height - view.bottom - bottom - BUTTON_SIZE };
+      draw();
+    };
+    const schedulePlace = () => {
+      if (placeTimer) clearTimeout(placeTimer);
+      placeTimer = setTimeout(place, 150);
+    };
+    let drag = null;
+    let suppressClick = false;
+    const onDown = (event) => {
+      if (!sheet.hidden || busy) return;
+      bug.setPointerCapture?.(event.pointerId);
+      cancelAnimationFrame(frame);
+      frame = 0;
+      velocity = { x: 0, y: 0 };
+      drag = {
+        id: event.pointerId,
+        ox: event.clientX - spot.x,
+        oy: event.clientY - spot.y,
+        sx: event.clientX,
+        sy: event.clientY,
+        moved: false,
+        history: [{ t: event.timeStamp, x: event.clientX, y: event.clientY }]
+      };
+      bug.classList.add("down");
+    };
+    const onMove = (event) => {
+      if (!drag || event.pointerId !== drag.id) return;
+      const dx = event.clientX - drag.sx;
+      const dy = event.clientY - drag.sy;
+      if (!drag.moved && Math.hypot(dx, dy) < 8) return;
+      if (!drag.moved) {
+        drag.moved = true;
+        bug.classList.add("dragging");
+      }
+      drag.history.push({ t: event.timeStamp, x: event.clientX, y: event.clientY });
+      if (drag.history.length > 6) drag.history.shift();
+      const view = viewport();
+      if (spot.state !== "float") {
+        const inward = spot.state === "dock-left" ? dx : -dx;
+        if (inward <= 18) {
+          spot = restingSpot(spot.state, spot.state === "dock-left", event.clientY - drag.oy, view);
+          draw();
+          return;
+        }
+        setState("float");
+        drag.ox = BUTTON_SIZE / 2;
+        drag.oy = BUTTON_SIZE / 2;
+      }
+      let x = event.clientX - drag.ox;
+      let y = event.clientY - drag.oy;
+      const maxX = view.width - BUTTON_SIZE;
+      const maxY = view.height - BUTTON_SIZE;
+      if (x < 0) x = rubberband(x, 60);
+      else if (x > maxX) x = maxX + rubberband(x - maxX, 60);
+      if (y < 0) y = rubberband(y, 80);
+      else if (y > maxY) y = maxY + rubberband(y - maxY, 80);
+      spot.x = x;
+      spot.y = y;
+      draw();
+    };
+    const onUp = (event) => {
+      if (!drag || event.pointerId !== drag.id) return;
+      const ended = drag;
+      drag = null;
+      bug.classList.remove("down", "dragging");
+      if (!ended.moved) return;
+      suppressClick = true;
+      setTimeout(() => {
+        suppressClick = false;
+      }, 0);
+      const first = ended.history[0];
+      const last = ended.history[ended.history.length - 1];
+      const dt = Math.max(1, last.t - first.t);
+      const paused = event.timeStamp - last.t > 90;
+      velocity = paused ? { x: 0, y: 0 } : { x: (last.x - first.x) / dt * 1e3, y: (last.y - first.y) / dt * 1e3 };
+      placedByPerson = true;
+      springTo(settleRelease(spot, velocity, viewport()), Math.hypot(velocity.x, velocity.y) > 350);
+    };
+    const observer = typeof MutationObserver === "function" ? new MutationObserver((records) => {
+      if (records.some((r) => r.target !== host)) schedulePlace();
+    }) : null;
     const paint = () => {
       theme = readFlowTheme();
       const vars = {
@@ -362,6 +783,11 @@ textarea::placeholder { color: var(--ink-dim); }
         "--font-body": theme.fontBody,
         "--font-display": theme.fontDisplay,
         "--display-weight": theme.displayWeight,
+        "--display-tracking": theme.displayTracking,
+        "--font-button": theme.fontButton,
+        "--button-weight": theme.buttonWeight,
+        "--button-tracking": theme.buttonTracking,
+        "--button-transform": theme.buttonTransform,
         "--radius": theme.radius,
         "--button-radius": theme.buttonRadius
       };
@@ -371,15 +797,21 @@ textarea::placeholder { color: var(--ink-dim); }
     const sync = () => {
       send.disabled = busy || text.value.trim().length === 0;
     };
+    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;
       else img.removeAttribute("src");
     };
     const close = () => {
       if (closeTimer) clearTimeout(closeTimer);
       closeTimer = null;
+      round += 1;
+      pending = null;
       sheet.hidden = true;
       scrim.hidden = true;
       bug.hidden = false;
@@ -388,20 +820,30 @@ textarea::placeholder { color: var(--ink-dim); }
       status.textContent = "";
       busy = false;
       sync();
+      schedulePlace();
     };
-    const open = async () => {
-      if (!sheet.hidden || busy) return;
-      busy = true;
+    const open = () => {
+      if (!sheet.hidden) return pending ?? Promise.resolve();
+      if (busy) return Promise.resolve();
       paint();
+      const mine = round += 1;
       bug.hidden = true;
-      const capture = options.capture ?? (() => captureViewport(theme.ground));
-      const url = await withTimeout(Promise.resolve().then(capture), CAPTURE_TIMEOUT_MS);
-      busy = false;
-      setShot(url);
+      setShot(null);
+      shot.hidden = false;
+      shot.setAttribute("data-pending", "");
+      shotLabel.textContent = "Taking a screenshot";
+      tuck.hidden = spot.state !== "float";
       scrim.hidden = false;
       sheet.hidden = false;
       sync();
-      text.focus();
+      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;
     };
     const submit = async () => {
       const message = text.value.trim();
@@ -409,6 +851,9 @@ textarea::placeholder { color: var(--ink-dim); }
       busy = true;
       sync();
       status.textContent = "";
+      const mine = round;
+      if (pending) await pending;
+      if (mine !== round) return;
       try {
         await options.submit({
           message,
@@ -428,9 +873,39 @@ textarea::placeholder { color: var(--ink-dim); }
         sync();
       }
     };
-    bug.addEventListener("click", () => void open());
+    bug.addEventListener("click", () => {
+      if (!suppressClick) void open();
+    });
+    bug.addEventListener("pointerdown", onDown);
+    if (!options.capture)
+      bug.addEventListener("pointerdown", () => void Promise.resolve().then(() => (init_modern_screenshot(), modern_screenshot_exports)).catch(() => {
+      }), {
+        once: true
+      });
+    bug.addEventListener("pointermove", onMove);
+    bug.addEventListener("pointerup", onUp);
+    bug.addEventListener("pointercancel", onUp);
+    tuck.addEventListener("click", () => {
+      const view = viewport();
+      const left = spot.x + BUTTON_SIZE / 2 < view.width / 2;
+      close();
+      placedByPerson = true;
+      springTo(
+        restingSpot(
+          left ? "dock-left" : "dock-right",
+          left,
+          spot.y + (BUTTON_SIZE - TAB_HEIGHT) / 2,
+          view
+        ),
+        false
+      );
+    });
     scrim.addEventListener("click", close);
-    remove.addEventListener("click", () => setShot(null));
+    remove.addEventListener("click", () => {
+      round += 1;
+      pending = null;
+      setShot(null);
+    });
     text.addEventListener("input", sync);
     send.addEventListener("click", () => void submit());
     sheet.addEventListener("keydown", (event) => {
@@ -442,6 +917,29 @@ textarea::placeholder { color: var(--ink-dim); }
     });
     document.body.appendChild(host);
     paint();
+    try {
+      const saved = JSON.parse(localStorage.getItem(SPOT_KEY) ?? "null");
+      if (saved && typeof saved.y === "number" && (saved.state === "float" || saved.state === "dock-left" || saved.state === "dock-right")) {
+        const view = viewport();
+        placedByPerson = true;
+        setState(saved.state);
+        spot = restingSpot(saved.state, saved.left === true, saved.y * view.height, view);
+      }
+    } catch {
+    }
+    place();
+    schedulePlace();
+    observer?.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["class", "style", "hidden"]
+    });
+    window.addEventListener("resize", schedulePlace);
+    window.addEventListener("load", schedulePlace);
+    window.addEventListener("scroll", schedulePlace, SCROLL_OPTIONS);
+    document.addEventListener("transitionend", schedulePlace, SCROLL_OPTIONS);
+    document.addEventListener("animationend", schedulePlace, SCROLL_OPTIONS);
     options.onReady?.();
     mounted = {
       host,
@@ -452,6 +950,14 @@ textarea::placeholder { color: var(--ink-dim); }
       close,
       unmount: () => {
         if (closeTimer) clearTimeout(closeTimer);
+        if (placeTimer) clearTimeout(placeTimer);
+        cancelAnimationFrame(frame);
+        observer?.disconnect();
+        window.removeEventListener("resize", schedulePlace);
+        window.removeEventListener("load", schedulePlace);
+        window.removeEventListener("scroll", schedulePlace, SCROLL_OPTIONS);
+        document.removeEventListener("transitionend", schedulePlace, SCROLL_OPTIONS);
+        document.removeEventListener("animationend", schedulePlace, SCROLL_OPTIONS);
         host.remove();
         mounted = null;
       }