@goflowstate/widget-sdk 0.3.1 → 0.3.2

package/dist/feedback.d.ts

@@ -71,6 +71,79 @@ export declare const luminance: (c: Rgba) => number;
 export declare function readFlowTheme(doc?: Document): FlowFeedbackTheme;
 /** Step the JPEG quality, then the size, until the picture fits the service's cap. */
 export declare function encodeScreenshot(canvas: HTMLCanvasElement): string | null;
+export declare const PLACEMENT_BASE = 16;
+export declare const PLACEMENT_STEP = 8;
+/** Clear space kept around the icon, so it does not crowd what it sits beside. */
+export declare const PLACEMENT_PAD = 8;
+/** The icon never climbs past this share of the viewport. */
+export declare const PLACEMENT_MAX_SHARE = 0.6;
+/** How far up empty space is still worth more than sitting on a line of text lower down. */
+export declare const PLACEMENT_READ_COST = 240;
+/** What is at a point: nothing, something to read or look at, or something to tap. */
+export declare const EMPTY = 0;
+export declare const READ = 1;
+export declare const TAP = 2;
+export type Occupancy = typeof EMPTY | typeof READ | typeof TAP;
+export interface PlacementBox {
+    /** The icon's box as measured now, in viewport pixels. */
+    left: number;
+    top: number;
+    size: number;
+    /** The bottom offset that box was measured at. */
+    bottom: number;
+}
+/**
+ * The bottom offset to sit at. `at(x, y)` says what is at a viewport point. An empty spot costs
+ * its height; a spot over text or a picture costs its height plus PLACEMENT_READ_COST; a spot
+ * over a control is taken only when there is no other, and then it is the base.
+ */
+export declare function choosePlacement(box: PlacementBox, viewportHeight: number, at: (x: number, y: number) => Occupancy): number;
+/**
+ * Reads what is at viewport points, the feedback host aside. One reader serves one placement
+ * pass: what it learns about an element is kept for the pass and dropped with it.
+ *
+ * A tap lands on the topmost element and travels up its ancestors, so only those can make a
+ * point a control: a button under the flow's own bottom sheet is not one. What a person reads
+ * is whatever shows through, down to the first element that paints its own ground.
+ */
+export declare function occupancyReader(host: Element, doc?: Document): (x: number, y: number) => Occupancy;
+export type DockState = 'float' | 'dock-left' | 'dock-right';
+export declare const BUTTON_SIZE = 44;
+export declare const TAB_WIDTH = 26;
+export declare const TAB_HEIGHT = 54;
+export declare const EDGE_MARGIN = 12;
+/** How far past an edge a release has to be heading before the button docks there. */
+export declare const DOCK_PAST = 14;
+/** Storage key for where the person left the button. One origin serves every flow, so the
+ *  choice follows them from flow to flow. */
+export declare const SPOT_KEY = "fs-feedback-spot";
+/** The part of the viewport the button may rest in: its size, less the safe-area insets. */
+export interface FeedbackViewport {
+    width: number;
+    height: number;
+    top: number;
+    bottom: number;
+}
+export interface FeedbackSpot {
+    state: DockState;
+    x: number;
+    y: number;
+}
+/** Where a release at velocity `v` (px per second) comes to rest: scroll deceleration. */
+export declare const projectMomentum: (v: number, deceleration?: number) => number;
+/** Past a boundary the button follows less and less, so the edge reads as soft, not stuck. */
+export declare const rubberband: (overshoot: number, dimension: number, constant?: number) => number;
+/** The resting spot for a state on one side, at a height. */
+export declare function restingSpot(state: DockState, left: boolean, y: number, view: FeedbackViewport): FeedbackSpot;
+/**
+ * Where a drag that ends at (x, y) with velocity (vx, vy) settles. A floating button heading
+ * past an edge, or let go against one, docks on that side; otherwise it floats on the side its
+ * momentum carries it to. A docked tab stays docked and only slides along its edge.
+ */
+export declare function settleRelease(from: FeedbackSpot, velocity: {
+    x: number;
+    y: number;
+}, view: FeedbackViewport): FeedbackSpot;
 /** Whether the page asked for no feedback icon (`<html data-fs-feedback="off">`). */
 export declare const feedbackOptedOut: (doc?: Document) => boolean;
 export declare function mountFlowFeedback(options: FlowFeedbackOptions): FlowFeedbackHandle | null;

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,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;8DAC0D;IAC1D,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;AAmDF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,GAAE,QAAmB,GAAG,iBAAiB,CAyFzE;AAOD,sFAAsF;AACtF,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAiBzE;AA8FD,qFAAqF;AACrF,eAAO,MAAM,gBAAgB,GAAI,MAAK,QAAmB,KAAG,OACI,CAAC;AAEjE,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,GAAG,IAAI,CAmJzF;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.1
+// @goflowstate/widget-sdk v0.3.2
 // https://github.com/goflowstate/goflowstate-sdk
 
 var __defProp = Object.defineProperty;
@@ -227,21 +227,168 @@ var withTimeout = (work, ms) => new Promise((resolve) => {
     }
   );
 });
+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;
 }
@@ -273,12 +420,18 @@ textarea::placeholder { color: var(--ink-dim); }
 .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; }
   @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;
@@ -287,7 +440,8 @@ function mountFlowFeedback(options) {
   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>
@@ -296,6 +450,7 @@ function mountFlowFeedback(options) {
   <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");
@@ -307,10 +462,199 @@ function mountFlowFeedback(options) {
   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 = {
@@ -350,6 +694,7 @@ function mountFlowFeedback(options) {
     status.textContent = "";
     busy = false;
     sync();
+    schedulePlace();
   };
   const open = async () => {
     if (!sheet.hidden || busy) return;
@@ -360,6 +705,7 @@ function mountFlowFeedback(options) {
     const url = await withTimeout(Promise.resolve().then(capture), CAPTURE_TIMEOUT_MS);
     busy = false;
     setShot(url);
+    tuck.hidden = spot.state !== "float";
     scrim.hidden = false;
     sheet.hidden = false;
     sync();
@@ -390,7 +736,28 @@ function mountFlowFeedback(options) {
       sync();
     }
   };
-  bug.addEventListener("click", () => void open());
+  bug.addEventListener("click", () => {
+    if (!suppressClick) void open();
+  });
+  bug.addEventListener("pointerdown", onDown);
+  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));
   text.addEventListener("input", sync);
@@ -404,6 +771,29 @@ function mountFlowFeedback(options) {
   });
   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,
@@ -414,6 +804,14 @@ function mountFlowFeedback(options) {
     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;
     }