@lightworkai.official/debug-capture 0.19.0 → 0.19.1

package/dist/ui/chatBubble.d.ts

@@ -1,5 +1,12 @@
 /** 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;
+/**
+ * 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;
+/** 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;
 /** The badge's number: `99+` past 99; nothing at 0. Pure, for the tests. */
 export declare function badgeText(n: number): string;
 /** Open the panel — from the bubble, or from the host app's own button (`openSupportChat`). */

package/package.json

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

@@ -77,7 +77,7 @@ export type { OpenPortalOptions } from "./portal";
  * แชทกับทีม (0.19): `chat` in the config mounts the bubble on install; a host with its own button opens and closes
  * the same panel. The panel is the support host's page, framed — as the tickets are, maintained where they live.
  */
-export { openSupportChat, closeSupportChat, mountSupportChat, unmountSupportChat, supportFrameUrl, badgeText } from "./ui/chatBubble";
+export { openSupportChat, closeSupportChat, mountSupportChat, unmountSupportChat, supportFrameUrl, badgeText, chatLift, panelHeight } from "./ui/chatBubble";
 export type { ChatOptions } from "./config";
 
 export type * from "./types";

package/src/ui/chatBubble.ts

@@ -52,7 +52,7 @@ const CSS = `
 .panel iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
 @keyframes in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
 @media (max-width: 639px) {
-  .panel { inset: 0 !important; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
+  .panel { inset: 0 !important; width: 100vw !important; height: 100dvh !important; border-radius: 0; border: 0; }
   .open .bubble { display: none; }
 }
 @media (prefers-reduced-motion: reduce) { .panel { animation: none; } .bubble { transition: none; } }
@@ -84,6 +84,18 @@ export function supportFrameUrl(host: string, realmKey: string): string {
   return url.toString();
 }
 
+/**
+ * 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;
+}
+/** 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))`;
+}
+
 /** The badge's number: `99+` past 99; nothing at 0. Pure, for the tests. */
 export function badgeText(n: number): string {
   return n <= 0 ? "" : n > 99 ? "99+" : String(n);
@@ -125,9 +137,9 @@ async function refreshUnread(): Promise<void> {
 function show(on: boolean): void {
   if (!root) return;
   root.style.display = on ? "" : "none";
-  // The call's card and frame sit above the bubble while it is there (ring.ts, callFrame.ts).
+  // The call's card and frame sit above the bubble while it is there (ring.ts, callFrame.ts) — wherever `offset` put it.
   const place = chatPlace(getConfig().chat);
-  if (on && place?.side === "right") document.documentElement.style.setProperty("--lw-chat-lift", `${SIZE + GAP}px`);
+  if (on && place?.side === "right") document.documentElement.style.setProperty("--lw-chat-lift", `${chatLift(place.y)}px`);
   else document.documentElement.style.removeProperty("--lw-chat-lift");
 }
 
@@ -217,7 +229,7 @@ export function mountSupportChat(): void {
   bubble = shadow.querySelector(".bubble");
   badge = shadow.querySelector(".badge");
   Object.assign(bubble!.style, { [side]: `${place.x}px`, bottom: `${place.y}px` });
-  Object.assign(panel!.style, { [side]: `${place.x}px`, bottom: `${place.y + SIZE + GAP}px` });
+  Object.assign(panel!.style, { [side]: `${place.x}px`, bottom: `${place.y + SIZE + GAP}px`, height: panelHeight(place.y) });
   bubble!.addEventListener("click", () => (isOpen ? closeSupportChat() : openSupportChat()));
   document.body.append(root);
   window.addEventListener("message", onMessage);