@lightworkai.official/debug-capture 0.19.0 → 0.19.2

package/dist/ui/chatBubble.d.ts

@@ -1,7 +1,68 @@
 /** 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;
+/** The desk's face on the button — the support host's public file, the same picture as its replies (0.19.2). */
+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;
+/** 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 interface BubbleSpot {
+    side: "right" | "left";
+    /** In from that side, px. */
+    x: number;
+    /** 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. */
+export declare function settleBubble(px: number, py: number, view: {
+    w: number;
+    h: number;
+}, inset: number): BubbleSpot;
+/** A height that keeps the whole bubble on screen. Pure. */
+export declare function clampBubbleY(y: number, viewH: 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;
+/**
+ * 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): {
+    bottom?: number;
+    top?: number;
+    height: number;
+};
+/** A dragged panel's top-left, inside the window by the margin. Pure. */
+export declare function clampPanel(p: {
+    x: number;
+    y: number;
+}, box: {
+    w: number;
+    h: number;
+}, view: {
+    w: number;
+    h: number;
+}): {
+    x: number;
+    y: number;
+};
 /** The badge's number: `99+` past 99; nothing at 0. Pure, for the tests. */
 export declare function badgeText(n: number): string;
+export declare function bubbleLabel(s: {
+    own?: string | false;
+    unread: number;
+    opened: boolean;
+    open: boolean;
+}, t: {
+    chatLabel: string;
+    chatLabelNew: string;
+}): {
+    text: string;
+    shown: boolean;
+    isNew: boolean;
+} | null;
 /** Open the panel — from the bubble, or from the host app's own button (`openSupportChat`). */
 export declare function openSupportChat(): void;
 /** Fold the panel — it stays loaded, so the chat is there as it was the next time. */

package/dist/ui/hostFont.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The host page's own font, for what this library draws on the host's page — the chat bubble's words, the call's card
+ * (0.19.2, the owner: "make sure we should correct font as well, now look like font not work"). A host loads its fonts
+ * for its own document (the ERP: Anuphan, by next/font, under a generated name); a shadow root reset by `all: initial`
+ * asked for families the host never loaded, and Thai fell to the system's looped face.
+ *
+ * Read from the host's body and set on the shadow host as `--lw-host-font` — a custom property, which `all: initial`
+ * does not reset — and the CSS falls back to its own list when there is none. A page that never chose a font (the
+ * browser's serif default) is not followed.
+ */
+export declare const OWN_FONTS = "\"Inter Variable\", \"Noto Sans Thai Variable\", \"IBM Plex Sans Thai\", -apple-system, \"Segoe UI\", Roboto, \"Noto Sans Thai\", sans-serif";
+/** The host's family as its body is drawn — "" when it never chose one. Pure but for the read. */
+export declare function hostFontFamily(computed: string | null | undefined): string;
+/** Give a shadow host the page's font (again: a host may set its font after this library mounted). */
+export declare function followHostFont(el: HTMLElement | null): void;

package/dist/ui/strings.d.ts

@@ -124,5 +124,10 @@ export interface Strings {
     chatOpen: string;
     chatTitle: string;
     chatUnread: string;
+    /** The bubble's tooltip: what a press does, and that it moves (0.19.2). */
+    chatMove: string;
+    /** The words beside the bubble (0.19.2): what it is, until first opened; that something new waits. */
+    chatLabel: string;
+    chatLabelNew: string;
 }
 export declare function strings(locale: "th" | "en" | undefined): Strings;

package/package.json

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

@@ -226,6 +226,12 @@ export interface ChatOptions {
   position?: "right" | "left";
   /** In from that corner, in px — for a host that already has something there. */
   offset?: { x?: number; y?: number };
+  /**
+   * The words beside the bubble (0.19.2) — says what the round button is to someone who never pressed it: shown until
+   * they first open the chat on this device, again while something new waits, and on hover. Your own words in place
+   * of "แชทกับทีมงาน", or `false` for the button alone.
+   */
+  label?: string | false;
 }
 
 /** The bubble's place, from `chat`: null when it is off. */

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

@@ -16,6 +16,7 @@
 import { chatPlace, getConfig } from "../config";
 import { hostToken, onLiveFrame } from "../live";
 import { launch } from "../reporter";
+import { followHostFont, OWN_FONTS } from "./hostFont";
 import { strings } from "./strings";
 
 const HOST_TAG = "lw-support-chat";
@@ -33,29 +34,54 @@ const CSS = `
   display: grid; place-items: center; border: 0; cursor: pointer; padding: 0;
   background: #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;
-  font-family: "Inter Variable", "Noto Sans Thai Variable", "IBM Plex Sans Thai", -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
+  font-family: var(--lw-host-font, ${OWN_FONTS});
 }
 .bubble:hover { background: #003a78; transform: translateY(-1px); }
+.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; }
+.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; }
+.has-face > svg { display: none; }
 .badge {
   position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
-  border-radius: 10px; background: #dc2626; color: #fff; font: 700 11px/20px "Inter Variable", -apple-system, sans-serif;
+  border-radius: 10px; background: #dc2626; color: #fff; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 20px;
   text-align: center; box-shadow: 0 0 0 2px #fff;
 }
 .badge[hidden] { display: none; }
+.label {
+  position: absolute; top: 50%; right: calc(100% + 12px); transform: translate(4px, -50%);
+  padding: 9px 15px; border-radius: 999px; background: #fff; color: #1f2937; white-space: nowrap;
+  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 18px;
+  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
+}
+.label::after {
+  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; }
+.at-left .label { right: auto; left: calc(100% + 12px); transform: translate(-4px, -50%); }
+.at-left .label::after { right: auto; left: -4px; }
+.new .label { color: #00468f; }
+.labelled .label { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
+@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));
-  border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e8e8ec;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); animation: in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  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);
 }
 .panel[hidden] { display: none; }
 .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; } }
+@media (prefers-reduced-motion: reduce) { .panel { animation: none; } .bubble, .label { transition: none; } }
 `;
 
 let root: HTMLElement | null = null;
@@ -64,6 +90,7 @@ let panel: HTMLDivElement | null = null;
 let frame: HTMLIFrameElement | null = null;
 let bubble: HTMLButtonElement | null = null;
 let badge: HTMLSpanElement | null = null;
+let label: HTMLSpanElement | null = null;
 let isOpen = false;
 let unread = 0;
 
@@ -83,6 +110,66 @@ export function supportFrameUrl(host: string, realmKey: string): string {
   url.searchParams.set("hand", "1");
   return url.toString();
 }
+/** The desk's face on the button — the support host's public file, the same picture as its replies (0.19.2). */
+export function supportFaceUrl(host: string): string {
+  return new URL("support-face.webp", base(host)).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))`;
+}
+
+/*
+ * Moved by hand (0.19.2, the owner: "sometimes the chatbubble icon might over something … can move or also the chat panel
+ * that it can drag to move it … save it on local storage"): the bubble is dragged anywhere and settles on the nearer
+ * side, at the height it was let go; the panel is dragged by its head. Both kept for this desk on this device, and
+ * brought back inside the window when it is smaller than where they were left.
+ */
+export interface BubbleSpot {
+  side: "right" | "left";
+  /** In from that side, px. */
+  x: number;
+  /** Up from the bottom, px — to the bubble's lower edge. */
+  y: number;
+}
+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 {
+  const side = px < view.w / 2 ? "left" : "right";
+  return { side, x: inset, y: clampBubbleY(view.h - py - SIZE / 2, view.h) };
+}
+/** 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)));
+}
+/** 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;
+}
+/**
+ * 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;
+  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)) };
+  return { top: viewH - spot.y + GAP, height: Math.max(240, Math.min(640, below)) };
+}
+/** 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))) };
+}
 
 /** The badge's number: `99+` past 99; nothing at 0. Pure, for the tests. */
 export function badgeText(n: number): string {
@@ -96,6 +183,32 @@ function setBadge(n: number): void {
   badge.textContent = badgeText(unread);
   badge.hidden = unread === 0;
   bubble.setAttribute("aria-label", unread ? `${t.chatOpen} · ${t.chatUnread.replace("{n}", String(unread))}` : t.chatOpen);
+  setLabel();
+}
+
+/*
+ * The words beside the bubble (0.19.2, the owner: "should we also have like a text on the left side icon"): a round
+ * button alone says nothing to someone who never pressed it, and words always there cover the page the bubble was just
+ * made movable for. So: until they first open the chat on this device, while something new waits, and on hover.
+ */
+export function bubbleLabel(s: { own?: string | false; unread: number; opened: boolean; open: boolean }, t: { chatLabel: string; chatLabelNew: string }): { text: string; shown: boolean; isNew: boolean } | null {
+  if (s.own === false) return null;
+  const isNew = s.unread > 0;
+  const own = typeof s.own === "string" ? s.own.trim().slice(0, 60) : "";
+  return { text: isNew ? t.chatLabelNew : own || t.chatLabel, shown: !s.open && (isNew || !s.opened), isNew };
+}
+/** Opened once on this device (kept with its place): from then the words come back only for something new. */
+let opened = false;
+function setLabel(): void {
+  if (!label || !bubble) return;
+  const config = getConfig();
+  const own = config.chat && config.chat !== true ? config.chat.label : undefined;
+  const l = bubbleLabel({ own, unread, opened, open: isOpen }, strings(config.locale));
+  bubble.classList.toggle("unlabelled", !l);
+  bubble.classList.toggle("labelled", !!l?.shown);
+  bubble.classList.toggle("new", !!l?.isNew);
+  bubble.classList.toggle("at-left", spot.side === "left");
+  label.querySelector(".text")!.textContent = l?.text ?? "";
 }
 
 let asking: Promise<void> | null = null;
@@ -125,11 +238,150 @@ 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).
-  const place = chatPlace(getConfig().chat);
-  if (on && place?.side === "right") document.documentElement.style.setProperty("--lw-chat-lift", `${SIZE + GAP}px`);
+  // Its words in the host page's own font — read again here, after the host has drawn itself.
+  if (on) followHostFont(root);
+  layout();
+}
+
+/* ── Where it is: the config's place, or where the person put it ───────── */
+
+let spot: BubbleSpot = { side: "right", x: 16, y: 16 };
+/** The panel's top-left once dragged by its head — null: by the bubble. */
+let panelAt: { x: number; y: number; h: number } | null = null;
+const PANEL_W = 380;
+const placeKey = () => `lw-support-chat-place:${getConfig().realmKey}`;
+const view = () => ({ w: window.innerWidth, h: window.innerHeight });
+
+/** Put there by hand — kept; else the config's place, which follows the host's own offset if it changes. */
+let movedByHand = false;
+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 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 };
+    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;
+  } catch {
+    /* a page that cannot keep it: the config's place */
+  }
+}
+function savePlace(): void {
+  try {
+    localStorage.setItem(placeKey(), JSON.stringify({ ...(movedByHand ? { bubble: { side: spot.side, y: spot.y } } : {}), panel: panelAt, ...(opened ? { opened: true } : {}) }));
+  } catch {
+    /* this visit only */
+  }
+}
+
+/** Everything placed from `spot` and `panelAt`, inside the window as it is now — and the call's card clear of the bubble. */
+function layout(): void {
+  if (!bubble || !panel) return;
+  const v = view();
+  const y = clampBubbleY(spot.y, v.h);
+  const other = spot.side === "right" ? "left" : "right";
+  Object.assign(bubble.style, { [spot.side]: `${spot.x}px`, [other]: "", bottom: `${y}px`, top: "" });
+  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({ ...spot, y }, v.h);
+    Object.assign(panel.style, { [spot.side]: `${spot.x}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" ? liftFor({ ...spot, y }) : 0;
+  if (lift) document.documentElement.style.setProperty("--lw-chat-lift", `${lift}px`);
   else document.documentElement.style.removeProperty("--lw-chat-lift");
+  setLabel();
+}
+
+/* ── The bubble, dragged: a press that moves is a move, never a press ─── */
+
+let pressed: { id: number; sx: number; sy: number; moved: boolean } | null = null;
+let swallowClick = false;
+function onBubbleDown(e: PointerEvent): void {
+  if (e.button !== 0) return;
+  pressed = { id: e.pointerId, sx: e.clientX, sy: e.clientY, moved: false };
+  try {
+    bubble?.setPointerCapture(e.pointerId);
+  } catch {
+    /* a synthetic press */
+  }
 }
+function onBubbleMove(e: PointerEvent): void {
+  if (!pressed || e.pointerId !== pressed.id || !bubble) return;
+  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: "" });
+}
+function onBubbleUp(e: PointerEvent): void {
+  if (!pressed || e.pointerId !== pressed.id) return;
+  const was = pressed;
+  pressed = null;
+  bubble?.classList.remove("dragging");
+  if (!was.moved) return;
+  // The click that follows this release is the end of a move, not a press.
+  swallowClick = true;
+  setTimeout(() => (swallowClick = false), 0);
+  if (e.type === "pointerup") {
+    spot = settleBubble(e.clientX, e.clientY, view(), chatPlace(getConfig().chat)?.x ?? 16);
+    movedByHand = true;
+    // Moved by hand: the panel opens by it again.
+    panelAt = null;
+    savePlace();
+  }
+  layout();
+}
+
+/* ── The panel, dragged by its head — the press is in the frame (as the call's, ui/callFrame) ─── */
+
+let pdrag: { sx: number; sy: number; x: number; y: number; lx: number; ly: number; h: number } | null = null;
+function onPanelDrag(m: { phase?: unknown; x?: unknown; y?: unknown }): void {
+  // A phone's panel is the whole screen: nothing to move.
+  if (!panel || typeof m.x !== "number" || typeof m.y !== "number" || view().w < 640) return;
+  if (m.phase === "start") {
+    const r = panel.getBoundingClientRect();
+    pdrag = { sx: m.x, sy: m.y, x: r.left, y: r.top, lx: m.x, ly: m.y, h: Math.round(r.height) || 640 };
+    followHere(true);
+    return;
+  }
+  if (!pdrag) return;
+  pdrag.lx = m.x;
+  pdrag.ly = m.y;
+  panelAt = { ...clampPanel({ x: pdrag.x + (m.x - pdrag.sx), y: pdrag.y + (m.y - pdrag.sy) }, { w: panel.offsetWidth, h: pdrag.h }, view()), h: pdrag.h };
+  layout();
+  if (m.phase === "end") {
+    pdrag = null;
+    followHere(false);
+    savePlace();
+  }
+}
+/*
+ * This page's own pointer while the panel is dragged: a quick flick leaves the frame on its first move, and from then
+ * only this page hears it (the call's 0.17.1 lesson). Screen coordinates, as the frame sends them.
+ */
+let hostFollow: ((e: PointerEvent) => void) | null = null;
+function followHere(on: boolean): void {
+  if (hostFollow) {
+    for (const t of ["pointermove", "pointerup", "pointercancel"] as const) window.removeEventListener(t, hostFollow, true);
+    hostFollow = null;
+  }
+  if (!on) return;
+  hostFollow = (e: PointerEvent) => {
+    if (!pdrag) return followHere(false);
+    if (e.type === "pointermove" && e.buttons !== 0) return onPanelDrag({ phase: "move", x: e.screenX, y: e.screenY });
+    const released = e.type === "pointerup";
+    onPanelDrag({ phase: "end", x: released ? e.screenX : pdrag.lx, y: released ? e.screenY : pdrag.ly });
+  };
+  for (const t of ["pointermove", "pointerup", "pointercancel"] as const) window.addEventListener(t, hostFollow, true);
+}
+const onResize = () => layout();
 
 function post(message: Record<string, unknown>): void {
   frame?.contentWindow?.postMessage({ source: HOST, ...message }, hostOrigin());
@@ -137,7 +389,7 @@ function post(message: Record<string, unknown>): void {
 
 async function onFrame(e: MessageEvent): Promise<void> {
   if (!frame || e.source !== frame.contentWindow) return;
-  const d = e.data as { source?: unknown; type?: unknown; total?: unknown } | null;
+  const d = e.data as { source?: unknown; type?: unknown; total?: unknown; phase?: unknown; x?: unknown; y?: unknown } | null;
   if (!d || d.source !== FRAME) return;
   if (d.type === "hello") {
     const token = await hostToken();
@@ -146,6 +398,7 @@ async function onFrame(e: MessageEvent): Promise<void> {
   }
   if (d.type === "ready") return post({ type: isOpen ? "shown" : "hidden" });
   if (d.type === "close") return closeSupportChat();
+  if (d.type === "drag") return onPanelDrag(d);
   if (d.type === "unread" && typeof d.total === "number") return setBadge(d.total);
   if (d.type === "report") {
     // The panel folds, and the report opens over the page it is about — linked to the chat (ingest `fromChat`).
@@ -173,9 +426,15 @@ export function openSupportChat(): void {
     panel.append(frame);
   }
   isOpen = true;
+  if (!opened) {
+    // They know what it is now: the words beside it come back only for something new.
+    opened = true;
+    savePlace();
+  }
   panel.hidden = false;
   shadow?.querySelector(".wrap")?.classList.add("open");
   bubble?.setAttribute("aria-expanded", "true");
+  setLabel();
   post({ type: "shown" });
   frame.focus();
 }
@@ -187,6 +446,7 @@ export function closeSupportChat(refocus = true): void {
   panel.hidden = true;
   shadow?.querySelector(".wrap")?.classList.remove("open");
   bubble?.setAttribute("aria-expanded", "false");
+  setLabel();
   post({ type: "hidden" });
   if (refocus) bubble?.focus();
   void refreshUnread();
@@ -211,18 +471,33 @@ export function mountSupportChat(): void {
   root = document.createElement(HOST_TAG);
   root.style.display = "none";
   shadow = root.attachShadow({ mode: "open" });
-  const side = place.side;
-  shadow.innerHTML = `<style>${CSS}</style><div class="wrap"><div class="panel" role="dialog" aria-label="${t.chatTitle}" hidden></div><button type="button" class="bubble" aria-expanded="false" aria-haspopup="dialog" aria-label="${t.chatOpen}" title="${t.chatOpen}">${ICON}<span class="badge" hidden></span></button></div>`;
+  shadow.innerHTML = `<style>${CSS}</style><div class="wrap"><div class="panel" role="dialog" aria-label="${t.chatTitle}" hidden></div><button type="button" class="bubble" aria-expanded="false" aria-haspopup="dialog" aria-label="${t.chatOpen}" title="${t.chatMove}">${ICON}<img class="face" alt="" draggable="false" decoding="async"><span class="badge" hidden></span><span class="label" aria-hidden="true"><span class="text"></span></span></button></div>`;
   panel = shadow.querySelector(".panel");
   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` });
-  bubble!.addEventListener("click", () => (isOpen ? closeSupportChat() : openSupportChat()));
+  label = shadow.querySelector(".label");
+  // The desk's face (the owner, 10-31: "all the support icon that user see … use this icon"): the support host's own,
+  // the one its replies wear — the chat glyph until it is there, and if it never comes.
+  const face = shadow.querySelector<HTMLImageElement>(".face")!;
+  face.addEventListener("load", () => bubble?.classList.add("has-face"), { once: true });
+  face.src = supportFaceUrl(config.host);
+  // Where the person left it on this device, else the config's place (0.19.2).
+  loadPlace();
+  layout();
+  bubble!.addEventListener("click", () => {
+    if (swallowClick) return;
+    if (isOpen) closeSupportChat();
+    else openSupportChat();
+  });
+  bubble!.addEventListener("pointerdown", onBubbleDown);
+  bubble!.addEventListener("pointermove", onBubbleMove);
+  bubble!.addEventListener("pointerup", onBubbleUp);
+  bubble!.addEventListener("pointercancel", onBubbleUp);
   document.body.append(root);
   window.addEventListener("message", onMessage);
   document.addEventListener("keydown", onKey);
   window.addEventListener("focus", onFocus);
+  window.addEventListener("resize", onResize);
   // The desk wrote, or opened a เรื่อง, or read: the badge asks again — while the panel is open, the panel tells it.
   let settle: ReturnType<typeof setTimeout> | undefined;
   stopFrames = onLiveFrame(() => {
@@ -240,8 +515,14 @@ export function unmountSupportChat(): void {
   window.removeEventListener("message", onMessage);
   document.removeEventListener("keydown", onKey);
   window.removeEventListener("focus", onFocus);
+  window.removeEventListener("resize", onResize);
+  followHere(false);
   root?.remove();
-  root = shadow = panel = frame = bubble = badge = null;
+  root = shadow = panel = frame = bubble = badge = label = null;
   isOpen = false;
+  pressed = pdrag = null;
+  panelAt = null;
+  movedByHand = opened = false;
+  unread = 0;
   document.documentElement.style.removeProperty("--lw-chat-lift");
 }

package/src/ui/hostFont.ts

@@ -0,0 +1,30 @@
+/**
+ * The host page's own font, for what this library draws on the host's page — the chat bubble's words, the call's card
+ * (0.19.2, the owner: "make sure we should correct font as well, now look like font not work"). A host loads its fonts
+ * for its own document (the ERP: Anuphan, by next/font, under a generated name); a shadow root reset by `all: initial`
+ * asked for families the host never loaded, and Thai fell to the system's looped face.
+ *
+ * Read from the host's body and set on the shadow host as `--lw-host-font` — a custom property, which `all: initial`
+ * does not reset — and the CSS falls back to its own list when there is none. A page that never chose a font (the
+ * browser's serif default) is not followed.
+ */
+export const OWN_FONTS = `"Inter Variable", "Noto Sans Thai Variable", "IBM Plex Sans Thai", -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif`;
+
+/** The host's family as its body is drawn — "" when it never chose one. Pure but for the read. */
+export function hostFontFamily(computed: string | null | undefined): string {
+  const f = (computed ?? "").trim();
+  return !f || /^(?:"?Times New Roman"?|"?Times"?|serif)$/i.test(f) ? "" : f;
+}
+
+/** Give a shadow host the page's font (again: a host may set its font after this library mounted). */
+export function followHostFont(el: HTMLElement | null): void {
+  if (!el || typeof document === "undefined" || !document.body) return;
+  let f = "";
+  try {
+    f = hostFontFamily(getComputedStyle(document.body).fontFamily);
+  } catch {
+    /* no styles to read: the library's own fonts */
+  }
+  if (f) el.style.setProperty("--lw-host-font", f);
+  else el.style.removeProperty("--lw-host-font");
+}

package/src/ui/ring.ts

@@ -12,6 +12,7 @@
  * it is up does not photograph it.
  */
 import { getConfig } from "../config";
+import { followHostFont, OWN_FONTS } from "./hostFont";
 import { containKeys } from "./keys";
 import { strings } from "./strings";
 
@@ -30,7 +31,7 @@ const CSS = `
   width: min(352px, calc(100vw - 32px)); box-sizing: border-box;
   padding: 16px; border-radius: 16px; background: #fff; color: #1a1a1e;
   border: 1px solid #e8e8ec; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  font-family: "Inter Variable", "Noto Sans Thai Variable", "IBM Plex Sans Thai", -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
+  font-family: var(--lw-host-font, ${OWN_FONTS});
   animation: in 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 @media (max-width: 639px) { .card { right: 8px; left: 8px; bottom: calc(8px + var(--lw-chat-lift, 0px)); width: auto; } }
@@ -117,6 +118,8 @@ function mount(): ShadowRoot | null {
   if (host?.isConnected) return host.shadowRoot;
   host = document.createElement(HOST_TAG);
   host.dataset.debugReporter = "true";
+  // The card's words in the host page's own font (ui/hostFont).
+  followHostFont(host);
   const root = host.attachShadow({ mode: "open" });
   containKeys(root);
   document.body.append(host);

package/src/ui/strings.ts

@@ -129,6 +129,11 @@ export interface Strings {
   chatOpen: string;
   chatTitle: string;
   chatUnread: string;
+  /** The bubble's tooltip: what a press does, and that it moves (0.19.2). */
+  chatMove: string;
+  /** The words beside the bubble (0.19.2): what it is, until first opened; that something new waits. */
+  chatLabel: string;
+  chatLabelNew: string;
 }
 
 const th: Strings = {
@@ -221,6 +226,9 @@ const th: Strings = {
   chatOpen: "แชทกับทีมงาน",
   chatTitle: "แชทกับทีมงาน",
   chatUnread: "{n} ข้อความใหม่จากทีมงาน",
+  chatMove: "แชทกับทีมงาน — ลากเพื่อย้ายไปที่อื่นได้ถ้าบังอะไรอยู่",
+  chatLabel: "แชทกับทีมงาน",
+  chatLabelNew: "มีข้อความใหม่จากทีมงาน",
 };
 
 const en: Strings = {
@@ -313,6 +321,9 @@ const en: Strings = {
   chatOpen: "Chat with support",
   chatTitle: "Chat with support",
   chatUnread: "{n} new from support",
+  chatMove: "Chat with support — drag to move it if it covers something",
+  chatLabel: "Chat with us",
+  chatLabelNew: "New message from support",
 };
 
 export function strings(locale: "th" | "en" | undefined): Strings {