@lightworkai.official/debug-capture 0.19.9 → 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

@@ -1,4 +1,9 @@
 import { type PlaceRule } from "./bubblePlace";
+/**
+ * The desk's size for it, px (0.19.10; the owner, 11-02: "make it smaller or bigger as a config") — the desk offers
+ * 44 to 72; anything else it might say is brought within reach of a finger and of the corner. Pure.
+ */
+export declare function bubbleSize(v: unknown): number;
 /** The panel's address: the support host's page, told the realm, signing in by hand-off (no token in the address). */
 export declare function supportFrameUrl(host: string, realmKey: string): string;
 /** Where the panel's เปิดในระบบแจ้งปัญหา may land: the person's chat or their เรื่อง — anything else, their chat. Pure. */
@@ -9,9 +14,9 @@ export declare function supportFaceUrl(host: string): string;
  * How far the call's card and frame rise from their own 16px so they clear the bubble — its offset, its size and the
  * gap above it (0.19.1: 0.19.0 assumed the bubble at the corner, and a raised one sat under a ringing call). Pure.
  */
-export declare function chatLift(bubbleY: number): number;
+export declare function chatLift(bubbleY: number, s?: number): number;
 /** The panel above the bubble, never past the top of the window — its height for the bubble's offset (0.19.1). Pure. */
-export declare function panelHeight(bubbleY: number): string;
+export declare function panelHeight(bubbleY: number, s?: number): string;
 export interface BubbleSpot {
     side: "right" | "left";
     /** In from that side, px. */
@@ -19,24 +24,35 @@ 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): BubbleSpot;
+}, 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): number;
+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. */
-export declare function liftFor(spot: BubbleSpot): number;
+export declare function liftFor(spot: BubbleSpot, s?: number): number;
 /**
  * The panel by the bubble, where it was not dragged: above it when the room above is enough (or more than below),
  * else below it — its own height, never past the window. Pure.
  */
-export declare function anchorPanel(spot: BubbleSpot, viewH: number): {
+export declare function anchorPanel(spot: BubbleSpot, viewH: number, s?: number): {
     bottom?: 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;
@@ -75,6 +91,8 @@ export interface DeskLook {
     avoid?: boolean;
     /** A page's own place (0.19.6): hidden there, or started in a corner at a height — the desk's rules. */
     places?: PlaceRule[];
+    /** ขนาดปุ่ม, px (0.19.10) — 56 when the desk does not say. */
+    size?: number;
 }
 /** The face's address for a desk's look: its own path on the support host, the shipped one, or none (the glyph). Pure. */
 export declare function lookFaceUrl(host: string, look: DeskLook | null): string | null;

package/package.json

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

@@ -25,15 +25,25 @@ import { strings } from "./strings";
 const HOST_TAG = "lw-support-chat";
 const FRAME = "lw-support-frame";
 const HOST = "lw-support-host";
+/** The button's size until the desk says its own (ปุ่มแชท › ขนาดปุ่ม, 0.19.10). */
 const SIZE = 56;
 const GAP = 12;
+/**
+ * The desk's size for it, px (0.19.10; the owner, 11-02: "make it smaller or bigger as a config") — the desk offers
+ * 44 to 72; anything else it might say is brought within reach of a finger and of the corner. Pure.
+ */
+export function bubbleSize(v: unknown): number {
+  return typeof v === "number" && Number.isFinite(v) ? Math.round(Math.min(Math.max(v, 32), 96)) : SIZE;
+}
+/** Its size now — the desk's, once its look is read. */
+let size = SIZE;
 
 const ICON = `<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`;
 
 const CSS = `
 :host { all: initial; }
 .bubble {
-  position: fixed; z-index: 2147483000; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%;
+  position: fixed; z-index: 2147483000; width: var(--lw-chat-size, ${SIZE}px); height: var(--lw-chat-size, ${SIZE}px); border-radius: 50%;
   display: grid; place-items: center; border: 0; cursor: pointer; padding: 0;
   background: var(--lw-chat-color, #00468f); color: #fff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
   transition: transform 150ms ease, background 150ms ease;
@@ -43,6 +53,7 @@ const CSS = `
 .bubble { touch-action: none; }
 .bubble.dragging { cursor: grabbing; transform: scale(1.06); transition: none; box-shadow: 0 18px 35px -8px rgba(0, 0, 0, 0.4); }
 .bubble:focus-visible { outline: 3px solid rgba(0, 70, 143, 0.35); outline-offset: 3px; }
+.bubble > svg { width: calc(var(--lw-chat-size, ${SIZE}px) * 0.46); height: calc(var(--lw-chat-size, ${SIZE}px) * 0.46); }
 .face { display: none; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
 .bubble.has-face, .bubble.has-face:hover { background: #fff; }
 .has-face .face { display: block; }
@@ -64,7 +75,7 @@ const CSS = `
   content: ""; position: absolute; top: 50%; right: -4px; width: 10px; height: 10px; background: #fff; border-radius: 2px;
   transform: translateY(-50%) rotate(45deg); box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.04);
 }
-.label .text { display: block; max-width: min(240px, calc(100vw - ${SIZE + 64}px)); overflow: hidden; text-overflow: ellipsis; }
+.label .text { display: block; max-width: min(240px, calc(100vw - var(--lw-chat-size, ${SIZE}px) - 64px)); overflow: hidden; text-overflow: ellipsis; }
 .at-left .label { right: auto; left: calc(100% + 12px); transform: translate(-4px, -50%); }
 .at-left .label::after { right: auto; left: -4px; }
 .new .label { color: var(--lw-chat-color, #00468f); }
@@ -72,7 +83,7 @@ const CSS = `
 @media (hover: hover) { .bubble:hover .label { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); } }
 .unlabelled .label, .bubble.dragging .label, .open .label { display: none; }
 .panel {
-  position: fixed; z-index: 2147483001; width: min(380px, calc(100vw - 32px)); height: min(640px, calc(100vh - ${SIZE + GAP + 32}px));
+  position: fixed; z-index: 2147483001; width: min(380px, calc(100vw - 32px)); height: min(640px, calc(100vh - var(--lw-chat-size, ${SIZE}px) - ${GAP + 32}px));
   border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
   box-shadow: 0 28px 64px -16px rgba(15, 23, 42, 0.3), 0 10px 24px -10px rgba(15, 23, 42, 0.14);
   animation: in 180ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -126,12 +137,12 @@ export function supportFaceUrl(host: string): string {
  * How far the call's card and frame rise from their own 16px so they clear the bubble — its offset, its size and the
  * gap above it (0.19.1: 0.19.0 assumed the bubble at the corner, and a raised one sat under a ringing call). Pure.
  */
-export function chatLift(bubbleY: number): number {
-  return bubbleY + SIZE + GAP - 16;
+export function chatLift(bubbleY: number, s = SIZE): number {
+  return bubbleY + s + GAP - 16;
 }
 /** The panel above the bubble, never past the top of the window — its height for the bubble's offset (0.19.1). Pure. */
-export function panelHeight(bubbleY: number): string {
-  return `min(640px, calc(100vh - ${bubbleY + SIZE + GAP + 16}px))`;
+export function panelHeight(bubbleY: number, s = SIZE): string {
+  return `min(640px, calc(100vh - ${bubbleY + s + GAP + 16}px))`;
 }
 
 /*
@@ -150,29 +161,47 @@ 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. */
-export function settleBubble(px: number, py: number, view: { w: number; h: number }, inset: number): BubbleSpot {
+/** 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 - SIZE / 2, view.h) };
+  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): number {
-  return Math.round(Math.min(Math.max(y, MARGIN), Math.max(MARGIN, viewH - SIZE - MARGIN)));
+export function clampBubbleY(y: number, viewH: number, s = SIZE): number {
+  return Math.round(Math.min(Math.max(y, MARGIN), Math.max(MARGIN, viewH - s - MARGIN)));
 }
 /** How far the call's card rises to clear the bubble: only a bubble on its side, low enough to meet it. Pure. */
-export function liftFor(spot: BubbleSpot): number {
-  return spot.side === "right" && spot.y < RING_ZONE ? chatLift(spot.y) : 0;
+export function liftFor(spot: BubbleSpot, s = SIZE): number {
+  return spot.side === "right" && spot.y < RING_ZONE ? chatLift(spot.y, s) : 0;
 }
 /**
  * The panel by the bubble, where it was not dragged: above it when the room above is enough (or more than below),
  * else below it — its own height, never past the window. Pure.
  */
-export function anchorPanel(spot: BubbleSpot, viewH: number): { bottom?: number; top?: number; height: number } {
-  const above = viewH - (spot.y + SIZE + GAP) - 16;
+export function anchorPanel(spot: BubbleSpot, viewH: number, s = SIZE): { bottom?: number; top?: number; height: number } {
+  const above = viewH - (spot.y + s + GAP) - 16;
   const below = spot.y - GAP - 16;
-  if (above >= 420 || above >= below) return { bottom: spot.y + SIZE + GAP, height: Math.max(240, Math.min(640, above)) };
+  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))) };
@@ -233,6 +262,8 @@ export interface DeskLook {
   avoid?: boolean;
   /** A page's own place (0.19.6): hidden there, or started in a corner at a height — the desk's rules. */
   places?: PlaceRule[];
+  /** ขนาดปุ่ม, px (0.19.10) — 56 when the desk does not say. */
+  size?: number;
 }
 let deskLook: DeskLook | null = null;
 /** The face's address for a desk's look: its own path on the support host, the shipped one, or none (the glyph). Pure. */
@@ -251,6 +282,15 @@ function wearLook(look: DeskLook | null): void {
   const color = look?.color && /^#[0-9a-f]{6}$/i.test(look.color) ? look.color : null;
   if (color) root.style.setProperty("--lw-chat-color", color);
   else root.style.removeProperty("--lw-chat-color");
+  // Its size (0.19.10): the button drawn so, and every place it stands, the panel and the call's card measured from it.
+  const s = bubbleSize(look?.size);
+  if (s !== size) {
+    size = s;
+    if (s === SIZE) root.style.removeProperty("--lw-chat-size");
+    else root.style.setProperty("--lw-chat-size", `${s}px`);
+    columns = null;
+    layout();
+  }
   const face = shadow?.querySelector<HTMLImageElement>(".face");
   const url = lookFaceUrl(getConfig().host, look);
   // Its rules and its switch may have changed where it stands.
@@ -329,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;
@@ -342,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 */
   }
@@ -369,7 +410,7 @@ function readColumn(side: Side, x: number): Rect[] {
   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 };
+    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);
   }
@@ -384,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 {
@@ -451,8 +498,9 @@ 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);
+  // 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");
 };
 /** What a person did, or the window itself changed: looked at at once. */
@@ -500,32 +548,36 @@ function layout(): void {
   if (!bubble || !panel) return;
   const v = view();
   const want = wanted();
-  const wantY = clampBubbleY(want.y, v.h);
+  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;
+  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]);
+  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";
   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) };
     const p = clampPanel(panelAt, box, v);
     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);
-    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` });
+    const a = anchorPanel(at, v.h, size);
+    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) : 0;
+  const lift = root && root.style.display !== "none" && bubble.style.display !== "none" ? liftFor(at, size) : 0;
   // 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` : "";
@@ -542,6 +594,14 @@ let pressed: { id: number; sx: number; sy: number; moved: boolean } | null = nul
 let swallowClick = false;
 function onBubbleDown(e: PointerEvent): void {
   if (e.button !== 0) return;
+  /*
+   * The press is the bubble's alone (0.19.10; the owner, 11-02: "it can move only top/bottom on the right side … it
+   * cannot [move to] the left"): the bubble follows the pointer at once, and the browser then looks for what to drag at
+   * the point first pressed — the host page's own link or picture under it there (a left menu's link) — and starts
+   * dragging THAT, cancelling ours (pointercancel): the bubble went back where it was. Taken here, no native drag or
+   * text selection begins; the press is still a click, and the panel is still focused when it opens.
+   */
+  e.preventDefault();
   pressed = { id: e.pointerId, sx: e.clientX, sy: e.clientY, moved: false };
   try {
     bubble?.setPointerCapture(e.pointerId);
@@ -554,7 +614,7 @@ function onBubbleMove(e: PointerEvent): void {
   if (!pressed.moved && Math.hypot(e.clientX - pressed.sx, e.clientY - pressed.sy) < 6) return;
   pressed.moved = true;
   bubble.classList.add("dragging");
-  Object.assign(bubble.style, { left: `${e.clientX - SIZE / 2}px`, top: `${e.clientY - SIZE / 2}px`, right: "", bottom: "" });
+  Object.assign(bubble.style, { left: `${e.clientX - size / 2}px`, top: `${e.clientY - size / 2}px`, right: "", bottom: "" });
 }
 function onBubbleUp(e: PointerEvent): void {
   if (!pressed || e.pointerId !== pressed.id) return;
@@ -566,7 +626,7 @@ function onBubbleUp(e: PointerEvent): void {
   swallowClick = true;
   setTimeout(() => (swallowClick = false), 0);
   if (e.type === "pointerup") {
-    spot = settleBubble(e.clientX, e.clientY, view(), chatPlace(getConfig().chat)?.x ?? 16);
+    spot = settleBubble(e.clientX, e.clientY, view(), chatPlace(getConfig().chat)?.x ?? 16, size);
     movedByHand = true;
     // Moved by hand: the panel opens by it again.
     panelAt = null;
@@ -772,6 +832,7 @@ export function refreshSupportChat(): Promise<void> {
 
 export function unmountSupportChat(): void {
   deskLook = null;
+  size = SIZE;
   stopFrames?.();
   stopFrames = null;
   window.removeEventListener("message", onMessage);