@lightworkai.official/debug-capture 0.19.6 → 0.19.8

package/dist/ui/bubblePlace.d.ts

@@ -14,11 +14,14 @@
  *   Content that scrolls under is not: a floating button over content is what a floating button is. A host may name
  *   more (`chat.avoid: "<selector>"`) or turn it off (`false`).
  *
- *   THE NEAREST FREE PLACE. Up or down its own side first; the other side when that is nearer than a long climb
- *   (`SWITCH_COST`) — a column the height of the window sends it to the other corner, a FAB lifts it above. Once it
- *   stepped aside on a page it stays there while that place is free (`settleSpot`): a toolbar opening and closing
- *   does not send it back and forth across the screen.
- *
+ *   THE NEAREST FREE PLACE (`placeSpot`). What a place costs is the climb plus the move in from its edge, and
+ *   SWITCH_COST more on the other side. Up or down its own column; or a column further in, just past what stands in
+ *   the way; or the other corner. A FAB lifts it above. A toolbar column as tall as the window puts it just inside the
+ *   toolbar, at the same height. 0.19.7 only knew the two corner columns, so on a short window, with the ERP's tray
+ *   filling the right edge and its sidebar the left, it found no free place and stayed on the tray (the owner's
+ *   screenshot, 11-02). When a nearer place frees up it goes back: the tray shut, it is home again. A shift of less than
+ *   STAY_MARGIN does not move it, so it does not jitter as the page settles.
+
  *   A PAGE'S OWN PLACE. The desk's rules (ปุ่มแชท › ตำแหน่งปุ่ม): pages whose path starts so — hidden there, or
  *   started in a corner at a height. The most specific rule wins; a person who moved it keeps their place.
  *
@@ -35,6 +38,8 @@ export type Side = "right" | "left";
 export declare const CLEAR = 8;
 /** What moving to the other side costs, in px of climbing — a short lift stays on its side, a long one crosses. */
 export declare const SWITCH_COST = 160;
+/** A free place this much nearer (in the same px of cost) is needed to move it from one it already stands in. */
+export declare const STAY_MARGIN = 48;
 /** An obstacle is smaller than this share of the window — a box as big as the page is the page. */
 export declare const OBSTACLE_MAX_AREA = 0.34;
 /**
@@ -47,31 +52,28 @@ export declare function blockedRanges(obstacles: readonly Rect[], col: {
 }, viewH: number, size: number): [number, number][];
 /** The free height nearest `want` within [min, max], outside every range (open ends) — null when none. Up wins a tie. Pure. */
 export declare function nearestFreeY(want: number, ranges: readonly [number, number][], min: number, max: number): number | null;
-/**
- * Where the bubble stands: `want` on its side when free, else the nearest free height there — or the other side's when
- * that is cheaper (SWITCH_COST plus its own move). Nothing free anywhere: `want`, as it was. Pure.
- */
-export declare function chooseSpot(want: {
-    side: Side;
-    y: number;
-}, free: Record<Side, readonly [number, number][]>, min: number, max: number): {
+export interface Spot {
     side: Side;
+    /** From its side's edge, px. */
+    x: number;
+    /** Up from the bottom, px. */
     y: number;
-};
+}
+/** The page's boxes across the bubble's column at `x` from `side`'s edge — read off the page, or given in the tests. */
+export type ReadColumn = (side: Side, x: number) => readonly Rect[];
+/** How many columns further in it looks on a side, past what stands in the way. */
+export declare const MAX_SHIFTS = 3;
 /**
- * Where it stands now, given where it stood: kept while that place is still free and it was chosen for the same wish
- * (`prev` is null when the wish, the page or the person's own place changed) — else `chooseSpot`. Pure.
+ * Where the bubble stands: `want` when it is free there; else the cheapest free place — up or down its column, a column
+ * further in just past what stands in the way (a toolbar column as tall as the window: just left of it, at the same
+ * height), or the other side's (SWITCH_COST more). What a place costs is the climb plus the move in. A place it already
+ * stands in (`prev`), still free and within STAY_MARGIN of the best, is kept — no jitter as the page settles. Columns
+ * are read only as needed (`read`), and never past the middle of the window. Nothing free anywhere: `want`. Pure.
  */
-export declare function settleSpot(prev: {
-    side: Side;
-    y: number;
-} | null, want: {
-    side: Side;
-    y: number;
-}, free: Record<Side, readonly [number, number][]>, min: number, max: number): {
-    side: Side;
-    y: number;
-};
+export declare function placeSpot(want: Spot, read: ReadColumn, view: {
+    w: number;
+    h: number;
+}, size: number, min: number, max: number, prev?: Spot | null): Spot;
 export interface PlaceRule {
     /** "/saraban/edoc-management" — the page and every page under it; `*` one segment, `**` any. */
     path: string;
@@ -89,7 +91,9 @@ export declare function placeFor(pathname: string, rules: readonly PlaceRule[] |
  * - a host's selector (`extra`): what it names, whole, wherever it is;
  * - in a small floating box (its nearest `fixed`, or `sticky` stuck at its edge): what shows there, by its own box —
  *   the control it is part of, else itself;
- * - in a box as big as the window, or on a page that does not scroll: a control not inside a scroller;
+ * - in a box as big as the window, or on a page that does not scroll: a control not inside a scroller — a disabled one
+ *   too, found by its own selector, as no hit test reaches it (the ERP's ผลการจำแนก panel on a phone, 11-02: its
+ *   greyed มอบหมายผู้ดำเนินการ was under the bubble);
  * - anything else scrolls with the page, and is not.
  */
 export declare function scanColumns(cols: readonly {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.19.6",
+  "version": "0.19.8",
   "description": "Report-a-problem widget: rolling network/console/action capture, optional rrweb session replay, annotated screenshot, and submission to a Lightwork Support host",
   "type": "module",
   "module": "./dist/index.mjs",

package/src/ui/bubblePlace.ts

@@ -14,11 +14,14 @@
  *   Content that scrolls under is not: a floating button over content is what a floating button is. A host may name
  *   more (`chat.avoid: "<selector>"`) or turn it off (`false`).
  *
- *   THE NEAREST FREE PLACE. Up or down its own side first; the other side when that is nearer than a long climb
- *   (`SWITCH_COST`) — a column the height of the window sends it to the other corner, a FAB lifts it above. Once it
- *   stepped aside on a page it stays there while that place is free (`settleSpot`): a toolbar opening and closing
- *   does not send it back and forth across the screen.
- *
+ *   THE NEAREST FREE PLACE (`placeSpot`). What a place costs is the climb plus the move in from its edge, and
+ *   SWITCH_COST more on the other side. Up or down its own column; or a column further in, just past what stands in
+ *   the way; or the other corner. A FAB lifts it above. A toolbar column as tall as the window puts it just inside the
+ *   toolbar, at the same height. 0.19.7 only knew the two corner columns, so on a short window, with the ERP's tray
+ *   filling the right edge and its sidebar the left, it found no free place and stayed on the tray (the owner's
+ *   screenshot, 11-02). When a nearer place frees up it goes back: the tray shut, it is home again. A shift of less than
+ *   STAY_MARGIN does not move it, so it does not jitter as the page settles.
+
  *   A PAGE'S OWN PLACE. The desk's rules (ปุ่มแชท › ตำแหน่งปุ่ม): pages whose path starts so — hidden there, or
  *   started in a corner at a height. The most specific rule wins; a person who moved it keeps their place.
  *
@@ -37,6 +40,8 @@ export type Side = "right" | "left";
 export const CLEAR = 8;
 /** What moving to the other side costs, in px of climbing — a short lift stays on its side, a long one crosses. */
 export const SWITCH_COST = 160;
+/** A free place this much nearer (in the same px of cost) is needed to move it from one it already stands in. */
+export const STAY_MARGIN = 48;
 /** An obstacle is smaller than this share of the window — a box as big as the page is the page. */
 export const OBSTACLE_MAX_AREA = 0.34;
 
@@ -72,33 +77,58 @@ export function nearestFreeY(want: number, ranges: readonly [number, number][],
   });
 }
 
-/**
- * Where the bubble stands: `want` on its side when free, else the nearest free height there — or the other side's when
- * that is cheaper (SWITCH_COST plus its own move). Nothing free anywhere: `want`, as it was. Pure.
- */
-export function chooseSpot(want: { side: Side; y: number }, free: Record<Side, readonly [number, number][]>, min: number, max: number): { side: Side; y: number } {
-  const other: Side = want.side === "right" ? "left" : "right";
-  const here = nearestFreeY(want.y, free[want.side], min, max);
-  const there = nearestFreeY(want.y, free[other], min, max);
-  if (here === null && there === null) return want;
-  const costHere = here === null ? Infinity : Math.abs(here - want.y);
-  const costThere = there === null ? Infinity : SWITCH_COST + Math.abs(there - want.y);
-  return costHere <= costThere ? { side: want.side, y: here! } : { side: other, y: there! };
+export interface Spot {
+  side: Side;
+  /** From its side's edge, px. */
+  x: number;
+  /** Up from the bottom, px. */
+  y: number;
 }
+/** The page's boxes across the bubble's column at `x` from `side`'s edge — read off the page, or given in the tests. */
+export type ReadColumn = (side: Side, x: number) => readonly Rect[];
+/** How many columns further in it looks on a side, past what stands in the way. */
+export const MAX_SHIFTS = 3;
 
 /**
- * Where it stands now, given where it stood: kept while that place is still free and it was chosen for the same wish
- * (`prev` is null when the wish, the page or the person's own place changed) — else `chooseSpot`. Pure.
+ * Where the bubble stands: `want` when it is free there; else the cheapest free place — up or down its column, a column
+ * further in just past what stands in the way (a toolbar column as tall as the window: just left of it, at the same
+ * height), or the other side's (SWITCH_COST more). What a place costs is the climb plus the move in. A place it already
+ * stands in (`prev`), still free and within STAY_MARGIN of the best, is kept — no jitter as the page settles. Columns
+ * are read only as needed (`read`), and never past the middle of the window. Nothing free anywhere: `want`. Pure.
  */
-export function settleSpot(
-  prev: { side: Side; y: number } | null,
-  want: { side: Side; y: number },
-  free: Record<Side, readonly [number, number][]>,
-  min: number,
-  max: number,
-): { side: Side; y: number } {
-  if (prev && nearestFreeY(prev.y, free[prev.side], min, max) === prev.y) return prev;
-  return chooseSpot(want, free, min, max);
+export function placeSpot(want: Spot, read: ReadColumn, view: { w: number; h: number }, size: number, min: number, max: number, prev: Spot | null = null): Spot {
+  const boxes = new Map<string, readonly Rect[]>();
+  const at = (side: Side, x: number) => {
+    const k = `${side}:${x}`;
+    if (!boxes.has(k)) boxes.set(k, read(side, x));
+    return boxes.get(k)!;
+  };
+  const col = (side: Side, x: number) => (side === "right" ? { left: view.w - x - size, right: view.w - x } : { left: x, right: x + size });
+  const ranges = (side: Side, x: number) => blockedRanges(at(side, x), col(side, x), view.h, size);
+  const cost = (s: Spot) => Math.abs(s.y - want.y) + Math.abs(s.x - want.x) + (s.side === want.side ? 0 : SWITCH_COST);
+  const freeAt = (s: Spot) => nearestFreeY(s.y, ranges(s.side, s.x), min, max) === s.y;
+  const keep = (best: Spot) => (prev && (prev.side !== best.side || prev.x !== best.x || prev.y !== best.y) && cost(prev) <= cost(best) + STAY_MARGIN && freeAt(prev) ? prev : best);
+  if (freeAt(want)) return keep(want);
+  let best: Spot | null = null;
+  const other: Side = want.side === "right" ? "left" : "right";
+  for (const side of [want.side, other]) {
+    const away = side === want.side ? 0 : SWITCH_COST;
+    if (best && away >= cost(best)) break;
+    let x = want.x;
+    for (let i = 0; i <= MAX_SHIFTS; i++) {
+      const y = nearestFreeY(want.y, ranges(side, x), min, max);
+      if (y !== null && (!best || cost({ side, x, y }) < cost(best))) best = { side, x, y };
+      // What stands where it wants to be, at this column: the next column in is just past it.
+      const c = col(side, x);
+      const band = { top: view.h - want.y - size - CLEAR, bottom: view.h - want.y + CLEAR };
+      const inWay = at(side, x).filter((r) => r.top < band.bottom && r.bottom > band.top && r.left < c.right && r.right > c.left);
+      if (!inWay.length) break;
+      const next = Math.round(side === "right" ? Math.max(...inWay.map((r) => view.w - r.left + CLEAR)) : Math.max(...inWay.map((r) => r.right + CLEAR)));
+      if (next <= x || next + size > view.w / 2 || (best && away + next - want.x >= cost(best))) break;
+      x = next;
+    }
+  }
+  return best ? keep(best) : want;
 }
 
 /* ── A page's own place: the desk's rules ───────────────────────────────── */
@@ -145,6 +175,8 @@ const OURS = /^LW-/;
 const CONTROL =
   'a[href],button,input,select,textarea,summary,label,[role="button"],[role="link"],[role="tab"],[role="menuitem"],[role="checkbox"],[role="switch"],[role="radio"],[role="option"],[role="slider"],[role="combobox"],[role="textbox"],[contenteditable=""],[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
 const SCROLLS = /(auto|scroll|overlay)/;
+/** A control that takes no press now — no hit test finds it (`disabled:pointer-events-none`), yet it shows, and takes one soon. */
+const DISABLED = 'button:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled="true"]';
 
 /**
  * The page's pieces the bubble must not cover, for each column — sampled every `step` px down it at three points
@@ -152,12 +184,15 @@ const SCROLLS = /(auto|scroll|overlay)/;
  * - a host's selector (`extra`): what it names, whole, wherever it is;
  * - in a small floating box (its nearest `fixed`, or `sticky` stuck at its edge): what shows there, by its own box —
  *   the control it is part of, else itself;
- * - in a box as big as the window, or on a page that does not scroll: a control not inside a scroller;
+ * - in a box as big as the window, or on a page that does not scroll: a control not inside a scroller — a disabled one
+ *   too, found by its own selector, as no hit test reaches it (the ERP's ผลการจำแนก panel on a phone, 11-02: its
+ *   greyed มอบหมายผู้ดำเนินการ was under the bubble);
  * - anything else scrolls with the page, and is not.
  */
 export function scanColumns(cols: readonly { left: number; right: number }[], view: { w: number; h: number }, opts: { step?: number; extra?: string | null } = {}): Rect[][] {
   if (typeof document === "undefined" || typeof document.elementsFromPoint !== "function") return cols.map(() => []);
-  const step = opts.step ?? 12;
+  // 16 px: anything a hand presses is taller. Each point is a hit test, ~30 µs on the ERP's เอกสาร page.
+  const step = opts.step ?? 16;
   const html = document.documentElement;
   const body = document.body;
   const styles = new Map<Element, CSSStyleDeclaration>();
@@ -205,6 +240,16 @@ export function scanColumns(cols: readonly { left: number; right: number }[], vi
     return { float, scrolled, opacity };
   };
   const pins = new Map<Element, ReturnType<typeof pinOf>>();
+  /*
+   * The page's topmost piece at a point. elementsFromPoint hit-tests every layer down to the root — 450 of them took
+   * 30–37 ms on the ERP's เอกสาร page, against 14 ms for elementFromPoint, which stops at the first; the whole stack
+   * is asked for only where this library's own box is the first.
+   */
+  const topAt = (x: number, y: number): Element | null => {
+    const first = document.elementFromPoint(x, y);
+    if (!first || !OURS.test(first.tagName)) return first;
+    return document.elementsFromPoint(x, y).find((e) => !OURS.test(e.tagName)) ?? null;
+  };
   return cols.map((col) => {
     const seen = new Set<Element>();
     const kept = new Set<Element>();
@@ -221,10 +266,12 @@ export function scanColumns(cols: readonly { left: number; right: number }[], vi
           right: r.right,
         });
     };
+    /** The frames as big as the window met down this column (null: a page that does not scroll) — their disabled controls are looked for below. */
+    const frames = new Set<Element | null>();
     const xs = [col.left + 6, (col.left + col.right) / 2, col.right - 6];
     for (let y = step / 2; y < view.h; y += step) {
       for (const x of xs) {
-        const top = document.elementsFromPoint(x, y).find((e) => !OURS.test(e.tagName));
+        const top = topAt(x, y);
         if (!top || top === html || top === body || seen.has(top)) continue;
         seen.add(top);
         if (opts.extra) {
@@ -249,10 +296,23 @@ export function scanColumns(cols: readonly { left: number; right: number }[], vi
           continue;
         }
         // The page itself — a scrolling page, or what is in a frame as big as the window: only a control that stays put.
+        if (!scrolled && (float || !pageScrolls)) frames.add(float);
         if (scrolled || !own || big(own.getBoundingClientRect())) continue;
         keep(own);
       }
     }
+    for (const frame of frames) {
+      for (const el of (frame ?? body)?.querySelectorAll(DISABLED) ?? []) {
+        const r = el.getBoundingClientRect();
+        if (!r.width || !r.height || r.right <= col.left || r.left >= col.right || big(r) || style(el).visibility === "hidden") continue;
+        const pin = pins.get(el) ?? (pins.set(el, pinOf(el)), pins.get(el)!);
+        if (pin.float !== frame || pin.scrolled || pin.opacity < 0.05) continue;
+        // Not under another layer: what is on top at its middle (in this column) is it, or the frame's piece around it.
+        const on = topAt(Math.min(Math.max((r.left + r.right) / 2, col.left + 6), col.right - 6), (r.top + r.bottom) / 2);
+        if (on && on !== el && !el.contains(on) && !on.contains(el)) continue;
+        keep(el);
+      }
+    }
     return out;
   });
 }

package/src/ui/chatBubble.ts

@@ -18,7 +18,7 @@ import { chatPlace, getConfig } from "../config";
 import { hostToken, onLiveFrame } from "../live";
 import { openSupportPortal } from "../portal";
 import { launch } from "../reporter";
-import { blockedRanges, placeFor, scanColumns, settleSpot, type PlaceRule, type Side } from "./bubblePlace";
+import { blockedRanges, placeFor, placeSpot, scanColumns, type PlaceRule, type Rect, type Side } from "./bubblePlace";
 import { followHostFont, OWN_FONTS } from "./hostFont";
 import { strings } from "./strings";
 
@@ -254,7 +254,7 @@ function wearLook(look: DeskLook | null): void {
   const face = shadow?.querySelector<HTMLImageElement>(".face");
   const url = lookFaceUrl(getConfig().host, look);
   // Its rules and its switch may have changed where it stands.
-  queueRescan(true);
+  queueRescan("now");
   if (face) {
     if (!url) {
       bubble.classList.remove("has-face");
@@ -311,7 +311,7 @@ function show(on: boolean): void {
   // Its words in the host page's own font — read again here, after the host has drawn itself.
   if (on) followHostFont(root);
   layout();
-  if (on) queueRescan(true);
+  if (on) queueRescan("now");
 }
 
 /* ── Where it is: the config's place, or where the person put it ───────── */
@@ -354,10 +354,27 @@ function savePlace(): void {
 const pagePath = () => window.location?.pathname ?? "/";
 /** Where it stands now — `spot` (or the page's rule), moved clear of the page's floating controls. */
 let shown: BubbleSpot | null = null;
-/** What `shown` was chosen for — the page and the wish; while they hold, a free `shown` is kept (settleSpot). */
+/** What `shown` was chosen for — the page and the wish; while they hold, a free `shown` is kept (placeSpot's prev). */
 let shownFor = "";
-/** The heights each side's column rules out, as last read off the page — null: not read yet, or not stepping aside. */
-let blocked: Record<Side, [number, number][]> | null = null;
+/**
+ * The page's boxes across each column read since the last look, for the window size they were read at — null: not
+ * looked at yet, or not stepping aside. `placeSpot` asks for columns as it needs them; one not read is read then.
+ */
+let columns: { w: number; h: number; boxes: Map<string, Rect[]> } | null = null;
+/** What the last placing saw at home and chose — a look that changes neither is "nothing new" (queueRescan). */
+let placedSig = "";
+function readColumn(side: Side, x: number): Rect[] {
+  const v = view();
+  if (!columns || columns.w !== v.w || columns.h !== v.h) columns = { w: v.w, h: v.h, boxes: new Map() };
+  const k = `${side}:${x}`;
+  let boxes = columns.boxes.get(k);
+  if (!boxes) {
+    const col = side === "right" ? { left: v.w - x - SIZE, right: v.w - x } : { left: x, right: x + SIZE };
+    boxes = scanColumns([col], v, { extra: avoidSetting().extra })[0] ?? [];
+    columns.boxes.set(k, boxes);
+  }
+  return boxes;
+}
 /** Hidden on this page by the desk's rule (ซ่อนปุ่มแชทในหน้านี้). */
 let ruleHidden = false;
 
@@ -374,32 +391,29 @@ function wanted(): BubbleSpot {
   if (movedByHand || !rule || rule.show === "hide") return spot;
   return { side: rule.show, x: spot.x, y: rule.y };
 }
-/** Read the page's floating controls across both corners' columns — then place again. */
+/** Look at the page afresh — its columns read again as placing asks for them — and place again. */
 function rescan(): void {
   if (!bubble) return;
-  const { on, extra } = avoidSetting();
-  if (!on) {
-    blocked = null;
+  if (!avoidSetting().on) {
+    columns = null;
     return layout();
   }
+  const before = placedSig;
   const v = view();
-  const x = spot.x;
-  const colR = { left: v.w - x - SIZE, right: v.w - x };
-  const colL = { left: x, right: x + SIZE };
-  const [foundR = [], foundL = []] = scanColumns([colR, colL], v, { extra });
-  const right = blockedRanges(foundR, colR, v.h, SIZE);
-  const left = blockedRanges(foundL, colL, v.h, SIZE);
-  // Nothing new where it could stand: the page is looked at less often while that holds (queueRescan).
-  calm = JSON.stringify([right, left]) === JSON.stringify(blocked && [blocked.right, blocked.left]) ? Math.min(calm + 1, CALM_STEPS) : 0;
-  blocked = { right, left };
+  columns = { w: v.w, h: v.h, boxes: new Map() };
   layout();
+  // Nothing new where it could stand: the page is looked at less often while that holds (queueRescan).
+  calm = placedSig === before ? Math.min(calm + 1, CALM_STEPS) : 0;
 }
 /*
- * How often the page is read (a read is two columns of hit tests, a few ms). A page that keeps changing — a clock, a
+ * How often the page is read (a read is a column or two of hit tests). A page that keeps changing — a clock, a
  * live list — said "look again" ten times a second, and a read every 400 ms cost it half a second of script in ten
  * (0.19.5: 20 ms). So: a read that finds nothing new doubles the wait for the next one a change asks for (400 ms up to
  * 3.2 s); a person's own press or key, a new page, a resize or the tab coming back is looked at at once (URGENT_MS),
- * and resets it. Never while the panel is open (it does not move then), while it is dragged, or in a hidden tab.
+ * and resets it; a transition or animation that ends in a corner's column — something there just finished appearing
+ * — resets it too and is looked at within RESCAN_MS ("soon": a read during the ERP tray's 300 ms fade-in saw it nearly
+ * clear, and the next waited out the doubling). Never while the panel is open (it does not move then), while it is
+ * dragged, or in a hidden tab.
  */
 const RESCAN_MS = 400;
 const CALM_STEPS = 3;
@@ -408,17 +422,14 @@ let rescanTimer: ReturnType<typeof setTimeout> | undefined;
 let rescanDue = 0;
 let lastRescan = 0;
 let calm = 0;
-function queueRescan(urgent = false): void {
+function queueRescan(when: "now" | "soon" | "later" = "later"): void {
   if (!root) return;
   const now = Date.now();
-  if (urgent) {
-    calm = 0;
-    if (rescanTimer && rescanDue - now <= URGENT_MS) return;
-    clearTimeout(rescanTimer);
-    rescanTimer = undefined;
-  }
-  if (rescanTimer) return;
-  const wait = urgent ? URGENT_MS : Math.max(0, RESCAN_MS * 2 ** calm - (now - lastRescan));
+  if (when !== "later") calm = 0;
+  const wait = when === "now" ? URGENT_MS : Math.max(0, RESCAN_MS * 2 ** calm - (now - lastRescan));
+  // One read waiting at a time — moved sooner when this asks sooner.
+  if (rescanTimer && rescanDue <= now + wait) return;
+  clearTimeout(rescanTimer);
   rescanDue = now + wait;
   rescanTimer = setTimeout(() => {
     rescanTimer = undefined;
@@ -431,16 +442,31 @@ function queueRescan(urgent = false): void {
 let watcher: MutationObserver | null = null;
 let lastPath = "";
 let pathTimer: ReturnType<typeof setInterval> | undefined;
-const onPageMoved = () => queueRescan();
+const ours = (t: EventTarget | null) => t instanceof Element && (t === root || /^LW-/.test(t.tagName));
+const onPageMoved = (e: Event) => {
+  if (!ours(e.target)) queueRescan();
+};
+/** A transition or animation ended: soon when it was in a corner's column, where the bubble may stand. */
+const onPageSettled = (e: Event) => {
+  if (ours(e.target)) return;
+  const r = e.target instanceof Element ? e.target.getBoundingClientRect() : null;
+  const v = view();
+  const x = spot.x;
+  const inColumn = !!r && r.width > 0 && (r.left < x + SIZE || r.right > v.w - x - SIZE);
+  queueRescan(inColumn ? "soon" : "later");
+};
 /** What a person did, or the window itself changed: looked at at once. */
-const onPageActed = () => queueRescan(true);
+const onPageActed = (e: Event) => {
+  if (!ours(e.target)) queueRescan("now");
+};
 const ACTED = ["popstate", "hashchange", "pointerup", "keyup"] as const;
 function watchPage(on: boolean): void {
   watcher?.disconnect();
   watcher = null;
   clearInterval(pathTimer);
   for (const t of ACTED) window.removeEventListener(t, onPageActed, true);
-  for (const t of ["scroll", "transitionend", "animationend"] as const) window.removeEventListener(t, onPageMoved, true);
+  window.removeEventListener("scroll", onPageMoved, true);
+  for (const t of ["transitionend", "animationend"] as const) window.removeEventListener(t, onPageSettled, true);
   document.removeEventListener("visibilitychange", onPageActed);
   if (!on) return;
   if (typeof MutationObserver !== "undefined") {
@@ -452,11 +478,12 @@ function watchPage(on: boolean): void {
       });
       if (theirs) queueRescan();
     });
-    watcher.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "open", "aria-expanded"] });
+    watcher.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "open", "aria-expanded", "disabled", "aria-disabled"] });
   }
   for (const t of ACTED) window.addEventListener(t, onPageActed, { capture: true, passive: true });
   // A toolbar's own opening ends after the press; a sticky bar sticks as the page scrolls.
-  for (const t of ["scroll", "transitionend", "animationend"] as const) window.addEventListener(t, onPageMoved, { capture: true, passive: true });
+  window.addEventListener("scroll", onPageMoved, { capture: true, passive: true });
+  for (const t of ["transitionend", "animationend"] as const) window.addEventListener(t, onPageSettled, { capture: true, passive: true });
   document.addEventListener("visibilitychange", onPageActed);
   // A single-page app moves by history.pushState, which says nothing: the path is looked at once a second.
   lastPath = pagePath();
@@ -464,7 +491,7 @@ function watchPage(on: boolean): void {
     if (pagePath() === lastPath) return;
     lastPath = pagePath();
     layout();
-    queueRescan(true);
+    queueRescan("now");
   }, 1000);
 }
 
@@ -477,9 +504,12 @@ function layout(): void {
   // While the panel is open it stays where it was opened from — never moved under the person's eyes.
   const wish = `${pagePath()}|${want.side}|${want.x}|${wantY}`;
   const prev = shown && shownFor === wish ? shown : null;
-  const free = !isOpen || !shown ? (blocked && avoidSetting().on ? settleSpot(prev, { side: want.side, y: wantY }, blocked, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN)) : { side: want.side, y: wantY }) : shown;
-  shown = { side: free.side, x: want.x, y: free.y };
+  const home = { side: want.side, x: want.x, y: wantY };
+  const placing = !!columns && avoidSetting().on;
+  const free = !isOpen || !shown ? (placing ? placeSpot(home, readColumn, v, SIZE, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN), prev) : home) : shown;
+  shown = { side: free.side, x: free.x, y: free.y };
   shownFor = wish;
+  if (placing) placedSig = JSON.stringify([blockedRanges(readColumn(home.side, home.x), home.side === "right" ? { left: v.w - home.x - SIZE, right: v.w - home.x } : { left: home.x, right: home.x + SIZE }, v.h, SIZE), shown]);
   const at = shown;
   const y = at.y;
   const other = at.side === "right" ? "left" : "right";
@@ -496,8 +526,13 @@ function layout(): void {
   }
   // The call's card and frame sit above the bubble while it is there and low on their side (ring.ts, callFrame.ts).
   const lift = root && root.style.display !== "none" && bubble.style.display !== "none" ? liftFor(at) : 0;
-  if (lift) document.documentElement.style.setProperty("--lw-chat-lift", `${lift}px`);
-  else document.documentElement.style.removeProperty("--lw-chat-lift");
+  // Written only when it differs from what <html> carries (read back, so a host that rewrites its style attribute
+  // gets it again): a property there restyles the host's whole page, and layout() runs on every read of the page.
+  const liftNow = lift ? `${lift}px` : "";
+  if (document.documentElement.style.getPropertyValue("--lw-chat-lift") !== liftNow) {
+    if (liftNow) document.documentElement.style.setProperty("--lw-chat-lift", liftNow);
+    else document.documentElement.style.removeProperty("--lw-chat-lift");
+  }
   setLabel();
 }
 
@@ -586,7 +621,7 @@ function followHere(on: boolean): void {
 }
 const onResize = () => {
   layout();
-  queueRescan(true);
+  queueRescan("now");
 };
 
 function post(message: Record<string, unknown>): void {
@@ -665,7 +700,7 @@ export function closeSupportChat(refocus = true): void {
   void refreshUnread();
   // Closed: free to step aside again from whatever the page did meanwhile.
   layout();
-  queueRescan(true);
+  queueRescan("now");
 }
 
 let stopFrames: (() => void) | null = null;
@@ -749,7 +784,8 @@ export function unmountSupportChat(): void {
   calm = 0;
   shown = null;
   shownFor = "";
-  blocked = null;
+  columns = null;
+  placedSig = "";
   ruleHidden = false;
   followHere(false);
   root?.remove();