@lightworkai.official/debug-capture 0.19.10 → 0.19.11

package/dist/ui/bubblePlace.d.ts

@@ -23,7 +23,8 @@
  *   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.
+ *   started on a side at x in from its edge and y up from the bottom, at its own z-index (0.19.11). The most specific
+ *   rule wins; a person who moved it keeps their place (the rule's z-index still holds).
  *
  * The arithmetic is pure (bubblePlace.test.ts); `scanColumns` reads the page.
  */
@@ -80,6 +81,10 @@ export interface PlaceRule {
     show: "hide" | Side;
     /** Up from the bottom, px. */
     y: number;
+    /** In from its side's edge, px (0.19.11) — the host's own inset when the desk does not say. */
+    x?: number;
+    /** Its z-index on the page (0.19.11), the panel one above — null or absent: on top of everything. */
+    z?: number | null;
 }
 /** A rule's path as a test of a page's path: from its start, ending at a segment's end. Pure; null when malformed. */
 export declare function pathTest(pattern: string): RegExp | null;

package/dist/ui/chatBubble.d.ts

@@ -24,11 +24,17 @@ export interface BubbleSpot {
     /** Up from the bottom, px — to the bubble's lower edge. */
     y: number;
 }
-/** Let go at (px, py), its centre: the nearer side, the height it was dropped at — inside the window. Pure. */
+/**
+ * Let go at (px, py), its centre: just there (0.19.11, card f34152d3 — "move ได้เฉพาะ top/bottom left กับ top/bottom
+ * right อยากได้แบบ free hand"), measured from the nearer side so it keeps its place from that edge as the window
+ * changes; within SNAP of the edge it lines up at the inset. Inside the window. Pure.
+ */
 export declare function settleBubble(px: number, py: number, view: {
     w: number;
     h: number;
 }, inset: number, s?: number): BubbleSpot;
+/** In from its edge, keeping the whole bubble on screen. Pure. */
+export declare function clampBubbleX(x: number, viewW: number, s?: number): number;
 /** A height that keeps the whole bubble on screen. Pure. */
 export declare function clampBubbleY(y: number, viewH: number, s?: number): number;
 /** How far the call's card rises to clear the bubble: only a bubble on its side, low enough to meet it. Pure. */
@@ -42,6 +48,11 @@ export declare function anchorPanel(spot: BubbleSpot, viewH: number, s?: number)
     top?: number;
     height: number;
 };
+/**
+ * The panel by the bubble, in from the same edge as the bubble — a bubble far in from it (0.19.11) still has its whole
+ * panel on screen. Pure.
+ */
+export declare function panelInset(x: number, viewW: number): number;
 /** A dragged panel's top-left, inside the window by the margin. Pure. */
 export declare function clampPanel(p: {
     x: number;

package/package.json

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

@@ -23,7 +23,8 @@
  *   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.
+ *   started on a side at x in from its edge and y up from the bottom, at its own z-index (0.19.11). The most specific
+ *   rule wins; a person who moved it keeps their place (the rule's z-index still holds).
  *
  * The arithmetic is pure (bubblePlace.test.ts); `scanColumns` reads the page.
  */
@@ -139,6 +140,10 @@ export interface PlaceRule {
   show: "hide" | Side;
   /** Up from the bottom, px. */
   y: number;
+  /** In from its side's edge, px (0.19.11) — the host's own inset when the desk does not say. */
+  x?: number;
+  /** Its z-index on the page (0.19.11), the panel one above — null or absent: on top of everything. */
+  z?: number | null;
 }
 
 /** A rule's path as a test of a page's path: from its start, ending at a segment's end. Pure; null when malformed. */

package/src/ui/chatBubble.ts

@@ -161,10 +161,21 @@ export interface BubbleSpot {
 const MARGIN = 8;
 /** The ring's card is ~180px tall at the corner: a bubble above that leaves it there. */
 const RING_ZONE = 200;
-/** Let go at (px, py), its centre: the nearer side, the height it was dropped at — inside the window. Pure. */
+/** Let go this near its edge (px past the inset), it lines up with the corner at the inset. */
+const SNAP = 24;
+/**
+ * Let go at (px, py), its centre: just there (0.19.11, card f34152d3 — "move ได้เฉพาะ top/bottom left กับ top/bottom
+ * right อยากได้แบบ free hand"), measured from the nearer side so it keeps its place from that edge as the window
+ * changes; within SNAP of the edge it lines up at the inset. Inside the window. Pure.
+ */
 export function settleBubble(px: number, py: number, view: { w: number; h: number }, inset: number, s = SIZE): BubbleSpot {
   const side = px < view.w / 2 ? "left" : "right";
-  return { side, x: inset, y: clampBubbleY(view.h - py - s / 2, view.h, s) };
+  const fromEdge = side === "left" ? px - s / 2 : view.w - px - s / 2;
+  return { side, x: fromEdge <= inset + SNAP ? inset : clampBubbleX(fromEdge, view.w, s), y: clampBubbleY(view.h - py - s / 2, view.h, s) };
+}
+/** In from its edge, keeping the whole bubble on screen. Pure. */
+export function clampBubbleX(x: number, viewW: number, s = SIZE): number {
+  return Math.round(Math.min(Math.max(x, MARGIN), Math.max(MARGIN, viewW - s - MARGIN)));
 }
 /** A height that keeps the whole bubble on screen. Pure. */
 export function clampBubbleY(y: number, viewH: number, s = SIZE): number {
@@ -184,6 +195,13 @@ export function anchorPanel(spot: BubbleSpot, viewH: number, s = SIZE): { bottom
   if (above >= 420 || above >= below) return { bottom: spot.y + s + GAP, height: Math.max(240, Math.min(640, above)) };
   return { top: viewH - spot.y + GAP, height: Math.max(240, Math.min(640, below)) };
 }
+/**
+ * The panel by the bubble, in from the same edge as the bubble — a bubble far in from it (0.19.11) still has its whole
+ * panel on screen. Pure.
+ */
+export function panelInset(x: number, viewW: number): number {
+  return Math.round(Math.max(MARGIN, Math.min(x, viewW - Math.min(PANEL_W, viewW - 32) - MARGIN)));
+}
 /** A dragged panel's top-left, inside the window by the margin. Pure. */
 export function clampPanel(p: { x: number; y: number }, box: { w: number; h: number }, view: { w: number; h: number }): { x: number; y: number } {
   return { x: Math.round(Math.min(Math.max(p.x, MARGIN), Math.max(MARGIN, view.w - box.w - MARGIN))), y: Math.round(Math.min(Math.max(p.y, MARGIN), Math.max(MARGIN, view.h - box.h - MARGIN))) };
@@ -351,10 +369,11 @@ function loadPlace(): void {
   const def = chatPlace(getConfig().chat);
   if (def) spot = { side: def.side, x: def.x, y: def.y };
   try {
-    const kept = JSON.parse(localStorage.getItem(placeKey()) ?? "null") as { bubble?: { side?: unknown; y?: unknown }; panel?: { x?: unknown; y?: unknown; h?: unknown } | null; opened?: unknown } | null;
+    const kept = JSON.parse(localStorage.getItem(placeKey()) ?? "null") as { bubble?: { side?: unknown; x?: unknown; y?: unknown }; panel?: { x?: unknown; y?: unknown; h?: unknown } | null; opened?: unknown } | null;
     const b = kept?.bubble;
     movedByHand = !!b && (b.side === "left" || b.side === "right") && typeof b.y === "number" && Number.isFinite(b.y);
-    if (movedByHand) spot = { ...spot, side: b!.side as BubbleSpot["side"], y: b!.y as number };
+    // Kept before 0.19.11 without its x: at the edge, where it was.
+    if (movedByHand) spot = { ...spot, side: b!.side as BubbleSpot["side"], y: b!.y as number, ...(typeof b!.x === "number" && Number.isFinite(b!.x) ? { x: b!.x } : {}) };
     const p = kept?.panel;
     panelAt = p && typeof p.x === "number" && typeof p.y === "number" && Number.isFinite(p.x) && Number.isFinite(p.y) ? { x: p.x, y: p.y, h: typeof p.h === "number" && p.h >= 240 ? p.h : 640 } : null;
     opened = kept?.opened === true;
@@ -364,7 +383,7 @@ function loadPlace(): void {
 }
 function savePlace(): void {
   try {
-    localStorage.setItem(placeKey(), JSON.stringify({ ...(movedByHand ? { bubble: { side: spot.side, y: spot.y } } : {}), panel: panelAt, ...(opened ? { opened: true } : {}) }));
+    localStorage.setItem(placeKey(), JSON.stringify({ ...(movedByHand ? { bubble: { side: spot.side, x: spot.x, y: spot.y } } : {}), panel: panelAt, ...(opened ? { opened: true } : {}) }));
   } catch {
     /* this visit only */
   }
@@ -406,12 +425,18 @@ function avoidSetting(): { on: boolean; extra: string | null } {
   if (own === false || deskLook?.avoid === false) return { on: false, extra: null };
   return { on: true, extra: typeof own === "string" && own.trim() ? own.trim() : null };
 }
-/** Where it wants to be on this page: put by hand — kept; else the desk's rule for the page; else the config's place. */
+/** The desk's z-index for this page (0.19.11) — null: the stylesheet's, on top of everything. */
+let ruleZ: number | null = null;
+/**
+ * Where it wants to be on this page: put by hand — kept; else the desk's rule for the page — its side, x in from that
+ * edge and y up (0.19.11: x the desk's too); else the config's place. The rule's z-index holds either way.
+ */
 function wanted(): BubbleSpot {
   const rule = placeFor(pagePath(), deskLook?.places);
   ruleHidden = rule?.show === "hide";
+  ruleZ = typeof rule?.z === "number" && Number.isFinite(rule.z) ? Math.round(Math.min(Math.max(rule.z, 0), 2147483000)) : null;
   if (movedByHand || !rule || rule.show === "hide") return spot;
-  return { side: rule.show, x: spot.x, y: rule.y };
+  return { side: rule.show, x: typeof rule.x === "number" && Number.isFinite(rule.x) ? rule.x : spot.x, y: rule.y };
 }
 /** Look at the page afresh — its columns read again as placing asks for them — and place again. */
 function rescan(): void {
@@ -473,7 +498,8 @@ 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;
+  // Its column where it stands — far in from the edge too (0.19.11).
+  const x = (shown ?? spot).x;
   const inColumn = !!r && r.width > 0 && (r.left < x + size || r.right > v.w - x - size);
   queueRescan(inColumn ? "soon" : "later");
 };
@@ -523,10 +549,11 @@ function layout(): void {
   const v = view();
   const want = wanted();
   const wantY = clampBubbleY(want.y, v.h, size);
+  const wantX = clampBubbleX(want.x, v.w, size);
   // 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 wish = `${pagePath()}|${want.side}|${wantX}|${wantY}`;
   const prev = shown && shownFor === wish ? shown : null;
-  const home = { side: want.side, x: want.x, y: wantY };
+  const home = { side: want.side, x: wantX, 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 };
@@ -537,6 +564,9 @@ function layout(): void {
   const other = at.side === "right" ? "left" : "right";
   bubble.style.display = ruleHidden && !isOpen ? "none" : "";
   Object.assign(bubble.style, { [at.side]: `${at.x}px`, [other]: "", bottom: `${y}px`, top: "" });
+  // The page's z-index (0.19.11): under the host's own layer when the desk says so — the panel just above its bubble.
+  bubble.style.zIndex = ruleZ === null ? "" : String(ruleZ);
+  panel.style.zIndex = ruleZ === null ? "" : String(ruleZ + 1);
   if (panelAt) {
     // The height it had when it was picked up — a drag moves it, never resizes it under the hand.
     const box = { w: Math.min(PANEL_W, v.w - 32), h: Math.min(panelAt.h, v.h - 2 * MARGIN) };
@@ -544,7 +574,7 @@ function layout(): void {
     Object.assign(panel.style, { left: `${p.x}px`, top: `${p.y}px`, right: "", bottom: "", height: `${box.h}px` });
   } else {
     const a = anchorPanel(at, v.h, size);
-    Object.assign(panel.style, { [at.side]: `${at.x}px`, [other]: "", bottom: a.bottom !== undefined ? `${a.bottom}px` : "", top: a.top !== undefined ? `${a.top}px` : "", height: `${a.height}px` });
+    Object.assign(panel.style, { [at.side]: `${panelInset(at.x, v.w)}px`, [other]: "", bottom: a.bottom !== undefined ? `${a.bottom}px` : "", top: a.top !== undefined ? `${a.top}px` : "", height: `${a.height}px` });
   }
   // 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, size) : 0;