@lightworkai.official/debug-capture 0.19.6 → 0.19.7

package/dist/ui/bubblePlace.d.ts

@@ -15,9 +15,11 @@
  *   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.
+ *   (`SWITCH_COST`) — a column the height of the window sends it to the other corner, a FAB lifts it above. When a
+ *   nearer place frees up it goes back (`settleSpot`): the tray shut, it is above the toggle again. 0.19.6 stayed
+ *   where it had stepped to for the rest of the page, which on the real เอกสาร page left it high on the right over
+ *   the viewer's ยังไม่มีการวางตรา once the tray was shut. A shift of less than STAY_MARGIN does not move it — no
+ *   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 +37,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;
 /**
@@ -59,8 +63,8 @@ export declare function chooseSpot(want: {
     y: number;
 };
 /**
- * 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 it stands now, given where it stood: the best place (`chooseSpot`), unless where it stands is still free and
+ * within STAY_MARGIN of it (`prev` is null when the wish, the page or the person's own place changed). Pure.
  */
 export declare function settleSpot(prev: {
     side: Side;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.19.6",
+  "version": "0.19.7",
   "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

@@ -15,9 +15,11 @@
  *   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.
+ *   (`SWITCH_COST`) — a column the height of the window sends it to the other corner, a FAB lifts it above. When a
+ *   nearer place frees up it goes back (`settleSpot`): the tray shut, it is above the toggle again. 0.19.6 stayed
+ *   where it had stepped to for the rest of the page, which on the real เอกสาร page left it high on the right over
+ *   the viewer's ยังไม่มีการวางตรา once the tray was shut. A shift of less than STAY_MARGIN does not move it — no
+ *   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 +39,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;
 
@@ -86,9 +90,12 @@ export function chooseSpot(want: { side: Side; y: number }, free: Record<Side, r
   return costHere <= costThere ? { side: want.side, y: here! } : { side: other, y: there! };
 }
 
+/** What a place costs against the wish: the climb, and SWITCH_COST more on the other side. */
+const costOf = (spot: { side: Side; y: number }, want: { side: Side; y: number }) => Math.abs(spot.y - want.y) + (spot.side === want.side ? 0 : SWITCH_COST);
+
 /**
- * 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 it stands now, given where it stood: the best place (`chooseSpot`), unless where it stands is still free and
+ * within STAY_MARGIN of it (`prev` is null when the wish, the page or the person's own place changed). Pure.
  */
 export function settleSpot(
   prev: { side: Side; y: number } | null,
@@ -97,8 +104,9 @@ export function settleSpot(
   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);
+  const best = chooseSpot(want, free, min, max);
+  if (prev && nearestFreeY(prev.y, free[prev.side], min, max) === prev.y && costOf(prev, want) <= costOf(best, want) + STAY_MARGIN) return prev;
+  return best;
 }
 
 /* ── A page's own place: the desk's rules ───────────────────────────────── */
@@ -157,7 +165,8 @@ const SCROLLS = /(auto|scroll|overlay)/;
  */
 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 +214,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>();
@@ -224,7 +243,7 @@ export function scanColumns(cols: readonly { left: number; right: number }[], vi
     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) {

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, nearestFreeY, placeFor, scanColumns, settleSpot, type PlaceRule, 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 ───────── */
@@ -356,8 +356,11 @@ const pagePath = () => window.location?.pathname ?? "/";
 let shown: BubbleSpot | null = null;
 /** What `shown` was chosen for — the page and the wish; while they hold, a free `shown` is kept (settleSpot). */
 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 heights each side's column rules out, as last read off the page — null: not read yet, or not stepping aside. A
+ * side is null when it was not read: its own place was free, so the other corner could not be better.
+ */
+let blocked: Record<Side, [number, number][] | null> | null = null;
 /** Hidden on this page by the desk's rule (ซ่อนปุ่มแชทในหน้านี้). */
 let ruleHidden = false;
 
@@ -384,22 +387,29 @@ function rescan(): void {
   }
   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);
+  const cols: Record<Side, { left: number; right: number }> = { right: { left: v.w - x - SIZE, right: v.w - x }, left: { left: x, right: x + SIZE } };
+  const read = (side: Side) => blockedRanges(scanColumns([cols[side]], v, { extra })[0] ?? [], cols[side], v.h, SIZE);
+  // Its own side first; the other corner is read only when the place it wants there is taken (half the hit tests).
+  const want = wanted();
+  const wantY = clampBubbleY(want.y, v.h);
+  const other: Side = want.side === "right" ? "left" : "right";
+  const here = read(want.side);
+  const there = nearestFreeY(wantY, here, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN)) === wantY ? null : read(other);
+  const next = { [want.side]: here, [other]: there } as Record<Side, [number, number][] | null>;
   // 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 };
+  calm = JSON.stringify([next.right, next.left]) === JSON.stringify(blocked && [blocked.right, blocked.left]) ? Math.min(calm + 1, CALM_STEPS) : 0;
+  blocked = next;
   layout();
 }
 /*
- * 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 +418,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 +438,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") {
@@ -456,7 +478,8 @@ function watchPage(on: boolean): void {
   }
   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 +487,7 @@ function watchPage(on: boolean): void {
     if (pagePath() === lastPath) return;
     lastPath = pagePath();
     layout();
-    queueRescan(true);
+    queueRescan("now");
   }, 1000);
 }
 
@@ -477,7 +500,9 @@ 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;
+  // A side not read is free here: it was left unread because the wish's own place was free, and that place wins.
+  const read = blocked && avoidSetting().on ? { right: blocked.right ?? [], left: blocked.left ?? [] } : null;
+  const free = !isOpen || !shown ? (read ? settleSpot(prev, { side: want.side, y: wantY }, read, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN)) : { side: want.side, y: wantY }) : shown;
   shown = { side: free.side, x: want.x, y: free.y };
   shownFor = wish;
   const at = shown;
@@ -496,8 +521,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 +616,7 @@ function followHere(on: boolean): void {
 }
 const onResize = () => {
   layout();
-  queueRescan(true);
+  queueRescan("now");
 };
 
 function post(message: Record<string, unknown>): void {
@@ -665,7 +695,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;