@narrative.io/jsonforms-provider-protocols 3.0.0-beta.17 → 3.0.0-beta.19

package/src/debug/overlay.ts

@@ -0,0 +1,358 @@
+/**
+ * In-DOM debug overlay for `@narrative.io/jsonforms-provider-protocols`.
+ *
+ * Renders a fixed-position panel with a scrollable list of structured log
+ * entries. Used in place of `console.*` because some host apps strip console
+ * output in production. No-op unless explicitly enabled at runtime via
+ * either `window.__PP_DEBUG__ = true` or `localStorage.PP_DEBUG = "1"`.
+ *
+ * Internal API. Not part of the package's public surface.
+ */
+
+const RING_SIZE = 250;
+const PANEL_ID = "__pp_debug_panel__";
+const STYLE_ID = "__pp_debug_styles__";
+
+interface Entry {
+  ts: number;
+  label: string;
+  json: string;
+}
+
+let entries: Entry[] = [];
+let panel: HTMLElement | null = null;
+let listEl: HTMLElement | null = null;
+
+function isEnabled(): boolean {
+  if (typeof window === "undefined") return false;
+  const w = window as unknown as { __PP_DEBUG__?: boolean };
+  if (w.__PP_DEBUG__ === true) return true;
+  try {
+    return window.localStorage?.getItem("PP_DEBUG") === "1";
+  } catch {
+    return false;
+  }
+}
+
+function safeStringify(value: unknown): string {
+  const seen = new WeakSet<object>();
+  try {
+    const out = JSON.stringify(
+      value,
+      (_key, v) => {
+        if (typeof v === "object" && v !== null) {
+          if (seen.has(v as object)) return "[Circular]";
+          seen.add(v as object);
+        }
+        if (typeof v === "function")
+          return `[Function ${(v as { name?: string }).name || "anonymous"}]`;
+        if (typeof v === "undefined") return "[undefined]";
+        return v;
+      },
+      2,
+    );
+    return out ?? String(value);
+  } catch (e) {
+    return `[unstringifiable: ${(e as Error).message}]`;
+  }
+}
+
+function ensureStyles(): void {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+#${PANEL_ID} {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  width: 460px;
+  max-height: 70vh;
+  z-index: 2147483647;
+  background: #0b0f17;
+  color: #d6e1ff;
+  border: 1px solid #2a3656;
+  border-radius: 6px;
+  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
+  display: flex;
+  flex-direction: column;
+  resize: both;
+  overflow: hidden;
+}
+#${PANEL_ID} .pp-header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 8px;
+  background: #131a2c;
+  border-bottom: 1px solid #2a3656;
+  cursor: move;
+  user-select: none;
+  flex-shrink: 0;
+}
+#${PANEL_ID} .pp-title {
+  flex: 1;
+  font-weight: 600;
+  color: #9fb4ff;
+}
+#${PANEL_ID} .pp-count {
+  color: #6f7fa6;
+  font-weight: 400;
+  margin-left: 4px;
+}
+#${PANEL_ID} button {
+  background: #1f2a47;
+  color: #d6e1ff;
+  border: 1px solid #2a3656;
+  border-radius: 3px;
+  padding: 2px 6px;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1.2;
+}
+#${PANEL_ID} button:hover { background: #2a3656; }
+#${PANEL_ID} .pp-list {
+  flex: 1;
+  overflow: auto;
+  padding: 4px 6px;
+}
+#${PANEL_ID}.pp-collapsed { resize: none; max-height: none; }
+#${PANEL_ID}.pp-collapsed .pp-list { display: none; }
+#${PANEL_ID} details {
+  margin: 4px 0;
+  border: 1px solid #2a3656;
+  border-radius: 3px;
+  background: #0f1422;
+}
+#${PANEL_ID} summary {
+  padding: 4px 6px;
+  cursor: pointer;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  list-style: none;
+}
+#${PANEL_ID} summary::-webkit-details-marker { display: none; }
+#${PANEL_ID} summary::before {
+  content: "▸";
+  color: #6f7fa6;
+  width: 10px;
+}
+#${PANEL_ID} details[open] > summary::before { content: "▾"; }
+#${PANEL_ID} .pp-label {
+  color: #ffd479;
+  font-weight: 600;
+}
+#${PANEL_ID} .pp-ts {
+  color: #6f7fa6;
+}
+#${PANEL_ID} summary button { margin-left: auto; }
+#${PANEL_ID} pre {
+  margin: 0;
+  padding: 6px 8px;
+  max-height: 320px;
+  overflow: auto;
+  background: #050811;
+  color: #c9d6ff;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+`;
+  document.head.appendChild(style);
+}
+
+function makeButton(label: string, onClick: (e: MouseEvent) => void): HTMLButtonElement {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.textContent = label;
+  btn.addEventListener("click", onClick);
+  return btn;
+}
+
+function flashButton(btn: HTMLButtonElement, msg: string, original: string): void {
+  btn.textContent = msg;
+  setTimeout(() => {
+    btn.textContent = original;
+  }, 1200);
+}
+
+function copyToClipboard(text: string, btn: HTMLButtonElement, original: string): void {
+  const fallback = () => {
+    try {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.left = "-9999px";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      flashButton(btn, "copied", original);
+    } catch {
+      flashButton(btn, "fail", original);
+    }
+  };
+  if (navigator.clipboard?.writeText) {
+    navigator.clipboard.writeText(text).then(
+      () => flashButton(btn, "copied", original),
+      fallback,
+    );
+  } else {
+    fallback();
+  }
+}
+
+function updateCount(): void {
+  if (!panel) return;
+  const countEl = panel.querySelector(".pp-count");
+  if (countEl) countEl.textContent = `(${entries.length})`;
+}
+
+function attachDrag(panelEl: HTMLElement, header: HTMLElement): void {
+  let dragging = false;
+  let offX = 0;
+  let offY = 0;
+  header.addEventListener("mousedown", (e) => {
+    if ((e.target as HTMLElement).tagName === "BUTTON") return;
+    dragging = true;
+    const rect = panelEl.getBoundingClientRect();
+    offX = e.clientX - rect.left;
+    offY = e.clientY - rect.top;
+    e.preventDefault();
+  });
+  window.addEventListener("mousemove", (e) => {
+    if (!dragging) return;
+    panelEl.style.left = `${e.clientX - offX}px`;
+    panelEl.style.top = `${e.clientY - offY}px`;
+  });
+  window.addEventListener("mouseup", () => {
+    dragging = false;
+  });
+}
+
+function ensurePanel(): HTMLElement {
+  if (panel && document.body.contains(panel)) return panel;
+  ensureStyles();
+
+  panel = document.createElement("div");
+  panel.id = PANEL_ID;
+
+  const header = document.createElement("div");
+  header.className = "pp-header";
+
+  const title = document.createElement("span");
+  title.className = "pp-title";
+  title.textContent = "[provider-protocols] debug";
+  const count = document.createElement("span");
+  count.className = "pp-count";
+  count.textContent = `(${entries.length})`;
+  title.appendChild(count);
+  header.appendChild(title);
+
+  const copyAllBtn = makeButton("copy all", (e) => {
+    e.stopPropagation();
+    const blob = entries
+      .map((en) => `// ${new Date(en.ts).toISOString()} ${en.label}\n${en.json}`)
+      .join("\n\n");
+    copyToClipboard(blob, copyAllBtn, "copy all");
+  });
+  header.appendChild(copyAllBtn);
+
+  const clearBtn = makeButton("clear", (e) => {
+    e.stopPropagation();
+    entries = [];
+    if (listEl) listEl.innerHTML = "";
+    updateCount();
+  });
+  header.appendChild(clearBtn);
+
+  const collapseBtn = makeButton("−", (e) => {
+    e.stopPropagation();
+    panel!.classList.toggle("pp-collapsed");
+    collapseBtn.textContent = panel!.classList.contains("pp-collapsed") ? "+" : "−";
+  });
+  header.appendChild(collapseBtn);
+
+  attachDrag(panel, header);
+  panel.appendChild(header);
+
+  listEl = document.createElement("div");
+  listEl.className = "pp-list";
+  panel.appendChild(listEl);
+
+  document.body.appendChild(panel);
+  return panel;
+}
+
+function renderEntry(entry: Entry): void {
+  if (!listEl) return;
+  const det = document.createElement("details");
+  det.open = false;
+
+  const sum = document.createElement("summary");
+  const lbl = document.createElement("span");
+  lbl.className = "pp-label";
+  lbl.textContent = entry.label;
+  const ts = document.createElement("span");
+  ts.className = "pp-ts";
+  ts.textContent = new Date(entry.ts).toISOString().slice(11, 23);
+  const copyBtn = makeButton("copy", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    copyToClipboard(entry.json, copyBtn, "copy");
+  });
+  sum.appendChild(lbl);
+  sum.appendChild(ts);
+  sum.appendChild(copyBtn);
+  det.appendChild(sum);
+
+  const pre = document.createElement("pre");
+  pre.textContent = entry.json;
+  det.appendChild(pre);
+
+  listEl.appendChild(det);
+  listEl.scrollTop = listEl.scrollHeight;
+
+  while (listEl.children.length > RING_SIZE) {
+    const first = listEl.firstChild;
+    if (first) listEl.removeChild(first);
+    else break;
+  }
+}
+
+/**
+ * Append a structured debug entry to the in-DOM overlay. No-op unless the
+ * runtime gate is on (`window.__PP_DEBUG__ === true` or
+ * `localStorage.PP_DEBUG === "1"`). Stringification is lazy: the payload is
+ * not serialized when the gate is off, so this is safe to leave in hot paths.
+ */
+export function debugLog(label: string, payload: unknown): void {
+  if (!isEnabled()) return;
+  if (typeof document === "undefined") return;
+
+  const entry: Entry = {
+    ts: Date.now(),
+    label,
+    json: safeStringify(payload),
+  };
+
+  entries.push(entry);
+  if (entries.length > RING_SIZE) entries.shift();
+
+  const append = () => {
+    try {
+      ensurePanel();
+      renderEntry(entry);
+      updateCount();
+    } catch {
+      // never break the host on debug failure
+    }
+  };
+
+  if (document.body) {
+    append();
+  } else {
+    document.addEventListener("DOMContentLoaded", append, { once: true });
+  }
+}