@lightworkai.official/debug-capture 0.16.0 → 0.17.1

package/src/ui/inkOverlay.ts

@@ -0,0 +1,59 @@
+/**
+ * The team's marks on this page (0.17) — ชี้ · วาด · กรอบ, drawn by the support team on the screen this person is
+ * sharing with them, shown here where they are working (the support host's docs/CALLS-PLAN.md §17).
+ *
+ * The call lives in its frame in a corner (ui/callFrame), which cannot draw outside itself; it hands each mark up and
+ * this layer draws it over the whole page: never in the way (no pointer events — every click goes to the app beneath),
+ * gone when the marks fade, and taken away with the call. The same drawing as the support host's (../ink). Marked as
+ * ours, so a report filed meanwhile does not photograph it.
+ *
+ * It covers the page exactly as the shared picture does: a tab is shared as its viewport, so a mark at a fraction of
+ * the picture is at that fraction of the window.
+ */
+import { InkPainter, InkScene, type InkOp } from "../ink";
+
+const HOST_TAG = "lw-call-ink";
+
+let host: HTMLElement | null = null;
+let scene: InkScene | null = null;
+let painter: InkPainter | null = null;
+
+function mount(): void {
+  if (host?.isConnected && painter) return;
+  host = document.createElement(HOST_TAG);
+  host.dataset.debugReporter = "true";
+  const root = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  // Over the page and its scrollbar, as the shared picture is; under the call's own frame.
+  style.textContent = `:host { all: initial; }
+canvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147483002; }`;
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("aria-hidden", "true");
+  canvas.dataset.lwCallInk = "";
+  root.append(style, canvas);
+  document.body.append(host);
+  scene = new InkScene();
+  painter = new InkPainter(canvas, scene, () => ({ w: window.innerWidth, h: window.innerHeight }));
+}
+
+/** A mark from the team, as the call's frame handed it up (already read by `readInkOp`). */
+export function inkOnPage(op: InkOp): void {
+  if (typeof document === "undefined") return;
+  if (op.op === "clear" && !host) return;
+  mount();
+  scene!.apply(op);
+  painter!.kick();
+}
+
+export function inkMarksOnPage(): number {
+  return scene?.size ?? 0;
+}
+
+/** The call is over: the layer goes. */
+export function removeInkLayer(): void {
+  painter?.stop();
+  host?.remove();
+  host = null;
+  scene = null;
+  painter = null;
+}