@opendatalabs/vana-sdk 4.4.0 → 4.5.0

package/dist/connect/chrome.cjs

@@ -0,0 +1,284 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chrome_exports = {};
+__export(chrome_exports, {
+  DRAG_CLOSE_PX: () => DRAG_CLOSE_PX,
+  MAX_SHEET_RATIO: () => MAX_SHEET_RATIO,
+  RETURN_TAP_GUARD_MS: () => RETURN_TAP_GUARD_MS,
+  createSheetChrome: () => createSheetChrome,
+  sheetTopPx: () => sheetTopPx
+});
+module.exports = __toCommonJS(chrome_exports);
+const SHEET_RADIUS_PX = 28;
+const SHEET_MAX_WIDTH_PX = 480;
+const HANDLE_STRIP_PX = 20;
+const INITIAL_CONTENT_PX = 320;
+const TRANSITION_MS = 280;
+const SHEET_BACKGROUND = "#f4f4f4";
+const DRAG_CLOSE_PX = 120;
+const MAX_SHEET_RATIO = 0.92;
+const STYLES = `
+:host { all: initial; }
+.scrim {
+  position: fixed; inset: 0; z-index: 2147483646;
+  background: rgb(0 0 0 / 0.4);
+  opacity: 0; transition: opacity ${TRANSITION_MS}ms ease;
+}
+.sheet {
+  position: fixed; left: 0; right: 0; z-index: 2147483647;
+  margin: 0 auto; max-width: ${SHEET_MAX_WIDTH_PX}px;
+  top: 100vh;
+  transition: top ${TRANSITION_MS}ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.sheet.dragging { transition: none; }
+.handle {
+  height: ${HANDLE_STRIP_PX}px;
+  display: flex; justify-content: center; align-items: center;
+  background: ${SHEET_BACKGROUND};
+  border-radius: ${SHEET_RADIUS_PX}px ${SHEET_RADIUS_PX}px 0 0;
+  touch-action: none; cursor: grab;
+}
+.handle::before {
+  content: ""; width: 36px; height: 5px; border-radius: 3px;
+  background: rgb(0 0 0 / 0.18);
+}
+iframe {
+  display: block; width: 100%; border: 0;
+  background: ${SHEET_BACKGROUND};
+}
+.open .scrim { opacity: 1; }
+.sheet.fullscreen {
+  top: 0; height: 100vh; max-width: none;
+  display: flex; flex-direction: column; box-sizing: border-box;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+  background: ${SHEET_BACKGROUND};
+  transition: none;
+}
+.sheet.fullscreen iframe { flex: 1; min-height: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .scrim, .sheet { transition: none; }
+}
+`;
+function viewportPx() {
+  return window.visualViewport?.height ?? window.innerHeight;
+}
+function viewportTopPx() {
+  return window.visualViewport?.offsetTop ?? 0;
+}
+function capPx() {
+  return Math.round(viewportPx() * MAX_SHEET_RATIO);
+}
+function placeSheet(sheet, content) {
+  sheet.style.top = `${Math.round(viewportTopPx() + sheetTopPx(viewportPx(), content))}px`;
+}
+function sheetTopPx(viewport, content) {
+  const cap = Math.round(viewport * MAX_SHEET_RATIO);
+  const visible = Math.min(content, cap - HANDLE_STRIP_PX);
+  return Math.round(viewport - HANDLE_STRIP_PX - visible);
+}
+const RETURN_TAP_GUARD_MS = 500;
+function installReturnGuard(sheet, iframe, state) {
+  const fitIframe = () => {
+    iframe.style.height = `${capPx() - HANDLE_STRIP_PX}px`;
+    if (state.shown) {
+      placeSheet(sheet, state.lastHeight ?? INITIAL_CONTENT_PX);
+    }
+  };
+  const onReturn = () => {
+    if (document.visibilityState !== "visible") {
+      return;
+    }
+    state.returnedAt = performance.now();
+    fitIframe();
+  };
+  fitIframe();
+  window.addEventListener("resize", fitIframe);
+  window.visualViewport?.addEventListener("resize", fitIframe);
+  window.visualViewport?.addEventListener("scroll", fitIframe);
+  document.addEventListener("visibilitychange", onReturn);
+  window.addEventListener("focus", onReturn);
+  return () => {
+    window.removeEventListener("resize", fitIframe);
+    window.visualViewport?.removeEventListener("resize", fitIframe);
+    window.visualViewport?.removeEventListener("scroll", fitIframe);
+    document.removeEventListener("visibilitychange", onReturn);
+    window.removeEventListener("focus", onReturn);
+    sheet.style.transform = "";
+  };
+}
+function installDragToClose(sheet, handle, onClose) {
+  let startY = null;
+  handle.addEventListener("pointerdown", (event) => {
+    startY = event.clientY;
+    handle.setPointerCapture?.(event.pointerId);
+    sheet.classList.add("dragging");
+  });
+  handle.addEventListener("pointermove", (event) => {
+    if (startY === null) {
+      return;
+    }
+    const dy = Math.max(0, event.clientY - startY);
+    sheet.style.transform = `translateY(${dy}px)`;
+  });
+  const end = (event) => {
+    if (startY === null) {
+      return;
+    }
+    const dy = event.clientY - startY;
+    startY = null;
+    sheet.classList.remove("dragging");
+    sheet.style.transform = "";
+    if (dy > DRAG_CLOSE_PX) {
+      onClose("drag");
+    }
+  };
+  handle.addEventListener("pointerup", end);
+  handle.addEventListener("pointercancel", end);
+}
+function placeBottomSheet({
+  frame,
+  iframe,
+  onClose,
+  sheet
+}) {
+  const returnState = {
+    lastHeight: null,
+    returnedAt: 0,
+    shown: false
+  };
+  const scrim = document.createElement("div");
+  scrim.className = "scrim";
+  scrim.setAttribute("data-slot", "scrim");
+  scrim.addEventListener("click", () => {
+    if (performance.now() - returnState.returnedAt < RETURN_TAP_GUARD_MS) {
+      return;
+    }
+    onClose("scrim");
+  });
+  const handle = document.createElement("div");
+  handle.className = "handle";
+  handle.setAttribute("aria-hidden", "true");
+  handle.setAttribute("data-slot", "handle");
+  sheet.prepend(handle);
+  frame.prepend(scrim);
+  const removeReturnGuard = installReturnGuard(sheet, iframe, returnState);
+  installDragToClose(sheet, handle, onClose);
+  return {
+    remove: removeReturnGuard,
+    setContentHeight(px) {
+      if (document.visibilityState !== "visible") {
+        return;
+      }
+      returnState.lastHeight = px;
+      if (returnState.shown) {
+        placeSheet(sheet, px);
+      }
+    },
+    show() {
+      requestAnimationFrame(() => {
+        returnState.shown = true;
+        frame.classList.add("open");
+        placeSheet(sheet, returnState.lastHeight ?? INITIAL_CONTENT_PX);
+      });
+    }
+  };
+}
+function placeFullscreen({ frame, sheet }) {
+  sheet.classList.add("fullscreen");
+  const fitToViewport = () => {
+    sheet.style.top = `${Math.round(viewportTopPx())}px`;
+    sheet.style.height = `${Math.round(viewportPx())}px`;
+  };
+  fitToViewport();
+  window.addEventListener("resize", fitToViewport);
+  window.visualViewport?.addEventListener("resize", fitToViewport);
+  window.visualViewport?.addEventListener("scroll", fitToViewport);
+  return {
+    remove() {
+      window.removeEventListener("resize", fitToViewport);
+      window.visualViewport?.removeEventListener("resize", fitToViewport);
+      window.visualViewport?.removeEventListener("scroll", fitToViewport);
+    },
+    setContentHeight() {
+      return;
+    },
+    show() {
+      frame.classList.add("open");
+    }
+  };
+}
+const PLACEMENTS = {
+  fullscreen: placeFullscreen,
+  sheet: placeBottomSheet
+};
+function createSheetChrome(input) {
+  const host = document.createElement("div");
+  host.setAttribute("data-vana-connect", "");
+  const root = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = STYLES;
+  const frame = document.createElement("div");
+  const sheet = document.createElement("div");
+  sheet.className = "sheet";
+  sheet.setAttribute("role", "dialog");
+  sheet.setAttribute("aria-modal", "true");
+  sheet.setAttribute("aria-label", input.ariaLabel);
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+  );
+  iframe.setAttribute(
+    "allow",
+    "otp-credentials; publickey-credentials-get; clipboard-write"
+  );
+  iframe.setAttribute("title", "Vana");
+  iframe.referrerPolicy = "strict-origin-when-cross-origin";
+  iframe.src = input.src;
+  sheet.append(iframe);
+  frame.append(sheet);
+  root.append(style, frame);
+  input.container.append(host);
+  const placement = PLACEMENTS[input.display]({
+    frame,
+    iframe,
+    onClose: input.onClose,
+    sheet
+  });
+  return {
+    host,
+    iframe,
+    remove() {
+      placement.remove();
+      host.remove();
+    },
+    setContentHeight: placement.setContentHeight,
+    show: placement.show
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DRAG_CLOSE_PX,
+  MAX_SHEET_RATIO,
+  RETURN_TAP_GUARD_MS,
+  createSheetChrome,
+  sheetTopPx
+});
+//# sourceMappingURL=chrome.cjs.map

package/dist/connect/chrome.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/chrome.ts"],"sourcesContent":["/**\n * Sheet chrome for the Vana connect sheet, in a Shadow DOM root: a bottom\n * sheet with scrim and drag handle, or a window-filling frame.\n *\n * @remarks\n * Ported unchanged from `@vana-unity/connect-embed`. See the layout notes\n * below.\n *\n * @category Connect\n * @module connect/chrome\n */\n\n// Sheet chrome. Lives in a Shadow DOM root so partner CSS cannot restyle it, and\n// the partner cannot reach the iframe's document (cross-origin) through it.\n// One placement per display:\n//\n//   host (partner DOM)\n//   └─ #shadow-root\n//      ├─ bottom sheet\n//      │  ├─ .scrim              click closes\n//      │  └─ .sheet              top = viewport − (handle + content)\n//      │     ├─ .handle          drag down to close (above the frame, never over it)\n//      │     └─ iframe           fixed height = cap; the unused part sits below\n//      │                         the viewport\n//      └─ fullscreen\n//         └─ .sheet.fullscreen   the visible viewport, inside its safe areas\n//            └─ iframe           fills it; the frame scrolls its own content\n//\n// Nothing overlaps or clips the iframe. IntersectionObserver v2 inside the\n// sheet reports it \"not visible\" when anything covers or clips it, and the\n// consent step waits for real visibility. The part of the frame below the\n// viewport is simply off screen, which does not count as occlusion.\n\nimport type { ConnectDisplay } from \"./protocol\";\n\nconst SHEET_RADIUS_PX = 28;\nconst SHEET_MAX_WIDTH_PX = 480;\nconst HANDLE_STRIP_PX = 20;\nconst INITIAL_CONTENT_PX = 320;\nconst TRANSITION_MS = 280;\nconst SHEET_BACKGROUND = \"#f4f4f4\";\n\n/** Drag the handle this far down to dismiss. */\nexport const DRAG_CLOSE_PX = 120;\n\n/** The sheet never covers more of the viewport than this. */\nexport const MAX_SHEET_RATIO = 0.92;\n\nconst STYLES = `\n:host { all: initial; }\n.scrim {\n  position: fixed; inset: 0; z-index: 2147483646;\n  background: rgb(0 0 0 / 0.4);\n  opacity: 0; transition: opacity ${TRANSITION_MS}ms ease;\n}\n.sheet {\n  position: fixed; left: 0; right: 0; z-index: 2147483647;\n  margin: 0 auto; max-width: ${SHEET_MAX_WIDTH_PX}px;\n  top: 100vh;\n  transition: top ${TRANSITION_MS}ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet.dragging { transition: none; }\n.handle {\n  height: ${HANDLE_STRIP_PX}px;\n  display: flex; justify-content: center; align-items: center;\n  background: ${SHEET_BACKGROUND};\n  border-radius: ${SHEET_RADIUS_PX}px ${SHEET_RADIUS_PX}px 0 0;\n  touch-action: none; cursor: grab;\n}\n.handle::before {\n  content: \"\"; width: 36px; height: 5px; border-radius: 3px;\n  background: rgb(0 0 0 / 0.18);\n}\niframe {\n  display: block; width: 100%; border: 0;\n  background: ${SHEET_BACKGROUND};\n}\n.open .scrim { opacity: 1; }\n.sheet.fullscreen {\n  top: 0; height: 100vh; max-width: none;\n  display: flex; flex-direction: column; box-sizing: border-box;\n  padding: env(safe-area-inset-top) env(safe-area-inset-right)\n    env(safe-area-inset-bottom) env(safe-area-inset-left);\n  background: ${SHEET_BACKGROUND};\n  transition: none;\n}\n.sheet.fullscreen iframe { flex: 1; min-height: 0; }\n@media (prefers-reduced-motion: reduce) {\n  .scrim, .sheet { transition: none; }\n}\n`;\n\nexport type CloseReason = \"drag\" | \"scrim\";\n\nexport interface SheetChrome {\n  host: HTMLElement;\n  iframe: HTMLIFrameElement;\n  remove(): void;\n  setContentHeight(px: number): void;\n  show(): void;\n}\n\nfunction viewportPx(): number {\n  return window.visualViewport?.height ?? window.innerHeight;\n}\n\n/**\n * How far the visible viewport has panned inside the layout viewport `fixed`\n * measures from. It is non-zero when an on-screen keyboard pans the page.\n */\nfunction viewportTopPx(): number {\n  return window.visualViewport?.offsetTop ?? 0;\n}\n\nfunction capPx(): number {\n  return Math.round(viewportPx() * MAX_SHEET_RATIO);\n}\n\n/** Places the sheet so exactly `content` px of the frame show above the fold. */\nfunction placeSheet(sheet: HTMLElement, content: number): void {\n  sheet.style.top = `${Math.round(viewportTopPx() + sheetTopPx(viewportPx(), content))}px`;\n}\n\n/**\n * Where the sheet's top edge goes so `content` px of the frame show, capped\n * at {@link MAX_SHEET_RATIO} of the viewport.\n *\n * @param viewport - Viewport height in px.\n * @param content - Content height the sheet reported, in px.\n * @returns The sheet's `top`, in whole px.\n */\nexport function sheetTopPx(viewport: number, content: number): number {\n  const cap = Math.round(viewport * MAX_SHEET_RATIO);\n  const visible = Math.min(content, cap - HANDLE_STRIP_PX);\n  // Whole pixels: a fractional offset blurs the framed text.\n  return Math.round(viewport - HANDLE_STRIP_PX - visible);\n}\n\n/** Scrim taps this soon after the page returns to view are ignored. */\nexport const RETURN_TAP_GUARD_MS = 500;\n\n/**\n * Return-to-view handling, isolated so it can change on its own.\n *\n * Root cause of the spike's \"blank sheet\" (scratchpad blank-render notes): not\n * a paint failure. Returning from the Google popup tab, a stray tap landed on\n * the scrim and silently closed the sheet; a headless-Chrome harness artefact\n * looked similar. So: taps on the scrim right after the page regains\n * visibility or focus are ignored, heights reported while hidden are dropped,\n * and the last good height is re-applied on return. The iframe keeps a fixed\n * viewport (the cap) and only the sheet's position animates, so measuring\n * content inside the frame never resizes the frame itself.\n */\nfunction installReturnGuard(\n  sheet: HTMLElement,\n  iframe: HTMLIFrameElement,\n  state: { lastHeight: number | null; returnedAt: number; shown: boolean },\n): () => void {\n  const fitIframe = () => {\n    iframe.style.height = `${capPx() - HANDLE_STRIP_PX}px`;\n    if (state.shown) {\n      placeSheet(sheet, state.lastHeight ?? INITIAL_CONTENT_PX);\n    }\n  };\n  const onReturn = () => {\n    if (document.visibilityState !== \"visible\") {\n      return;\n    }\n    state.returnedAt = performance.now();\n    fitIframe();\n  };\n  fitIframe();\n  window.addEventListener(\"resize\", fitIframe);\n  window.visualViewport?.addEventListener(\"resize\", fitIframe);\n  window.visualViewport?.addEventListener(\"scroll\", fitIframe);\n  document.addEventListener(\"visibilitychange\", onReturn);\n  window.addEventListener(\"focus\", onReturn);\n  return () => {\n    window.removeEventListener(\"resize\", fitIframe);\n    window.visualViewport?.removeEventListener(\"resize\", fitIframe);\n    window.visualViewport?.removeEventListener(\"scroll\", fitIframe);\n    document.removeEventListener(\"visibilitychange\", onReturn);\n    window.removeEventListener(\"focus\", onReturn);\n    sheet.style.transform = \"\";\n  };\n}\n\nfunction installDragToClose(\n  sheet: HTMLElement,\n  handle: HTMLElement,\n  onClose: (reason: CloseReason) => void,\n): void {\n  let startY: number | null = null;\n  handle.addEventListener(\"pointerdown\", (event) => {\n    startY = event.clientY;\n    handle.setPointerCapture?.(event.pointerId);\n    sheet.classList.add(\"dragging\");\n  });\n  handle.addEventListener(\"pointermove\", (event) => {\n    if (startY === null) {\n      return;\n    }\n    const dy = Math.max(0, event.clientY - startY);\n    sheet.style.transform = `translateY(${dy}px)`;\n  });\n  const end = (event: PointerEvent) => {\n    if (startY === null) {\n      return;\n    }\n    const dy = event.clientY - startY;\n    startY = null;\n    sheet.classList.remove(\"dragging\");\n    sheet.style.transform = \"\";\n    if (dy > DRAG_CLOSE_PX) {\n      onClose(\"drag\");\n    }\n  };\n  handle.addEventListener(\"pointerup\", end);\n  handle.addEventListener(\"pointercancel\", end);\n}\n\n/** What differs between displays; the frame, focus and messages do not. */\ninterface Placement {\n  remove(): void;\n  setContentHeight(px: number): void;\n  show(): void;\n}\n\ninterface PlacementParts {\n  frame: HTMLElement;\n  iframe: HTMLIFrameElement;\n  onClose: (reason: CloseReason) => void;\n  sheet: HTMLElement;\n}\n\nfunction placeBottomSheet({\n  frame,\n  iframe,\n  onClose,\n  sheet,\n}: PlacementParts): Placement {\n  const returnState = {\n    lastHeight: null as number | null,\n    returnedAt: 0,\n    shown: false,\n  };\n  const scrim = document.createElement(\"div\");\n  scrim.className = \"scrim\";\n  scrim.setAttribute(\"data-slot\", \"scrim\");\n  scrim.addEventListener(\"click\", () => {\n    if (performance.now() - returnState.returnedAt < RETURN_TAP_GUARD_MS) {\n      return;\n    }\n    onClose(\"scrim\");\n  });\n\n  const handle = document.createElement(\"div\");\n  handle.className = \"handle\";\n  handle.setAttribute(\"aria-hidden\", \"true\");\n  handle.setAttribute(\"data-slot\", \"handle\");\n\n  sheet.prepend(handle);\n  frame.prepend(scrim);\n\n  const removeReturnGuard = installReturnGuard(sheet, iframe, returnState);\n  installDragToClose(sheet, handle, onClose);\n\n  return {\n    remove: removeReturnGuard,\n    setContentHeight(px) {\n      // A hidden page can report a throttled frame's height; keep the last good one.\n      if (document.visibilityState !== \"visible\") {\n        return;\n      }\n      returnState.lastHeight = px;\n      if (returnState.shown) {\n        placeSheet(sheet, px);\n      }\n    },\n    show() {\n      // Next frame, so the closed state paints first and the sheet slides in.\n      requestAnimationFrame(() => {\n        returnState.shown = true;\n        frame.classList.add(\"open\");\n        placeSheet(sheet, returnState.lastHeight ?? INITIAL_CONTENT_PX);\n      });\n    },\n  };\n}\n\n/**\n * Fills the visible viewport, so an on-screen keyboard shortens the frame and\n * its content scrolls above it. The window holds nothing else, so\n * there is no scrim to tap and no handle to drag: the frame's own close\n * control and Escape close it. Content height does not size anything.\n */\nfunction placeFullscreen({ frame, sheet }: PlacementParts): Placement {\n  sheet.classList.add(\"fullscreen\");\n  const fitToViewport = () => {\n    sheet.style.top = `${Math.round(viewportTopPx())}px`;\n    sheet.style.height = `${Math.round(viewportPx())}px`;\n  };\n  fitToViewport();\n  window.addEventListener(\"resize\", fitToViewport);\n  window.visualViewport?.addEventListener(\"resize\", fitToViewport);\n  window.visualViewport?.addEventListener(\"scroll\", fitToViewport);\n  return {\n    remove() {\n      window.removeEventListener(\"resize\", fitToViewport);\n      window.visualViewport?.removeEventListener(\"resize\", fitToViewport);\n      window.visualViewport?.removeEventListener(\"scroll\", fitToViewport);\n    },\n    setContentHeight() {\n      return;\n    },\n    show() {\n      frame.classList.add(\"open\");\n    },\n  };\n}\n\nconst PLACEMENTS: Record<ConnectDisplay, (parts: PlacementParts) => Placement> =\n  {\n    fullscreen: placeFullscreen,\n    sheet: placeBottomSheet,\n  };\n\nexport function createSheetChrome(input: {\n  ariaLabel: string;\n  container: HTMLElement;\n  display: ConnectDisplay;\n  onClose: (reason: CloseReason) => void;\n  src: string;\n}): SheetChrome {\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-vana-connect\", \"\");\n  const root = host.attachShadow({ mode: \"open\" });\n\n  const style = document.createElement(\"style\");\n  style.textContent = STYLES;\n\n  const frame = document.createElement(\"div\");\n\n  const sheet = document.createElement(\"div\");\n  sheet.className = \"sheet\";\n  sheet.setAttribute(\"role\", \"dialog\");\n  sheet.setAttribute(\"aria-modal\", \"true\");\n  sheet.setAttribute(\"aria-label\", input.ariaLabel);\n\n  const iframe = document.createElement(\"iframe\");\n  iframe.setAttribute(\n    \"sandbox\",\n    \"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox\",\n  );\n  iframe.setAttribute(\n    \"allow\",\n    \"otp-credentials; publickey-credentials-get; clipboard-write\",\n  );\n  iframe.setAttribute(\"title\", \"Vana\");\n  iframe.referrerPolicy = \"strict-origin-when-cross-origin\";\n  iframe.src = input.src;\n\n  sheet.append(iframe);\n  frame.append(sheet);\n  root.append(style, frame);\n  input.container.append(host);\n\n  const placement = PLACEMENTS[input.display]({\n    frame,\n    iframe,\n    onClose: input.onClose,\n    sheet,\n  });\n\n  return {\n    host,\n    iframe,\n    remove() {\n      placement.remove();\n      host.remove();\n    },\n    setContentHeight: placement.setContentHeight,\n    show: placement.show,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/connect/chrome.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Sheet chrome for the Vana connect sheet, in a Shadow DOM root: a bottom
+ * sheet with scrim and drag handle, or a window-filling frame.
+ *
+ * @remarks
+ * Ported unchanged from `@vana-unity/connect-embed`. See the layout notes
+ * below.
+ *
+ * @category Connect
+ * @module connect/chrome
+ */
+import type { ConnectDisplay } from "./protocol.js";
+/** Drag the handle this far down to dismiss. */
+export declare const DRAG_CLOSE_PX = 120;
+/** The sheet never covers more of the viewport than this. */
+export declare const MAX_SHEET_RATIO = 0.92;
+export type CloseReason = "drag" | "scrim";
+export interface SheetChrome {
+    host: HTMLElement;
+    iframe: HTMLIFrameElement;
+    remove(): void;
+    setContentHeight(px: number): void;
+    show(): void;
+}
+/**
+ * Where the sheet's top edge goes so `content` px of the frame show, capped
+ * at {@link MAX_SHEET_RATIO} of the viewport.
+ *
+ * @param viewport - Viewport height in px.
+ * @param content - Content height the sheet reported, in px.
+ * @returns The sheet's `top`, in whole px.
+ */
+export declare function sheetTopPx(viewport: number, content: number): number;
+/** Scrim taps this soon after the page returns to view are ignored. */
+export declare const RETURN_TAP_GUARD_MS = 500;
+export declare function createSheetChrome(input: {
+    ariaLabel: string;
+    container: HTMLElement;
+    display: ConnectDisplay;
+    onClose: (reason: CloseReason) => void;
+    src: string;
+}): SheetChrome;

package/dist/connect/chrome.js

@@ -0,0 +1,256 @@
+const SHEET_RADIUS_PX = 28;
+const SHEET_MAX_WIDTH_PX = 480;
+const HANDLE_STRIP_PX = 20;
+const INITIAL_CONTENT_PX = 320;
+const TRANSITION_MS = 280;
+const SHEET_BACKGROUND = "#f4f4f4";
+const DRAG_CLOSE_PX = 120;
+const MAX_SHEET_RATIO = 0.92;
+const STYLES = `
+:host { all: initial; }
+.scrim {
+  position: fixed; inset: 0; z-index: 2147483646;
+  background: rgb(0 0 0 / 0.4);
+  opacity: 0; transition: opacity ${TRANSITION_MS}ms ease;
+}
+.sheet {
+  position: fixed; left: 0; right: 0; z-index: 2147483647;
+  margin: 0 auto; max-width: ${SHEET_MAX_WIDTH_PX}px;
+  top: 100vh;
+  transition: top ${TRANSITION_MS}ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.sheet.dragging { transition: none; }
+.handle {
+  height: ${HANDLE_STRIP_PX}px;
+  display: flex; justify-content: center; align-items: center;
+  background: ${SHEET_BACKGROUND};
+  border-radius: ${SHEET_RADIUS_PX}px ${SHEET_RADIUS_PX}px 0 0;
+  touch-action: none; cursor: grab;
+}
+.handle::before {
+  content: ""; width: 36px; height: 5px; border-radius: 3px;
+  background: rgb(0 0 0 / 0.18);
+}
+iframe {
+  display: block; width: 100%; border: 0;
+  background: ${SHEET_BACKGROUND};
+}
+.open .scrim { opacity: 1; }
+.sheet.fullscreen {
+  top: 0; height: 100vh; max-width: none;
+  display: flex; flex-direction: column; box-sizing: border-box;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+  background: ${SHEET_BACKGROUND};
+  transition: none;
+}
+.sheet.fullscreen iframe { flex: 1; min-height: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .scrim, .sheet { transition: none; }
+}
+`;
+function viewportPx() {
+  return window.visualViewport?.height ?? window.innerHeight;
+}
+function viewportTopPx() {
+  return window.visualViewport?.offsetTop ?? 0;
+}
+function capPx() {
+  return Math.round(viewportPx() * MAX_SHEET_RATIO);
+}
+function placeSheet(sheet, content) {
+  sheet.style.top = `${Math.round(viewportTopPx() + sheetTopPx(viewportPx(), content))}px`;
+}
+function sheetTopPx(viewport, content) {
+  const cap = Math.round(viewport * MAX_SHEET_RATIO);
+  const visible = Math.min(content, cap - HANDLE_STRIP_PX);
+  return Math.round(viewport - HANDLE_STRIP_PX - visible);
+}
+const RETURN_TAP_GUARD_MS = 500;
+function installReturnGuard(sheet, iframe, state) {
+  const fitIframe = () => {
+    iframe.style.height = `${capPx() - HANDLE_STRIP_PX}px`;
+    if (state.shown) {
+      placeSheet(sheet, state.lastHeight ?? INITIAL_CONTENT_PX);
+    }
+  };
+  const onReturn = () => {
+    if (document.visibilityState !== "visible") {
+      return;
+    }
+    state.returnedAt = performance.now();
+    fitIframe();
+  };
+  fitIframe();
+  window.addEventListener("resize", fitIframe);
+  window.visualViewport?.addEventListener("resize", fitIframe);
+  window.visualViewport?.addEventListener("scroll", fitIframe);
+  document.addEventListener("visibilitychange", onReturn);
+  window.addEventListener("focus", onReturn);
+  return () => {
+    window.removeEventListener("resize", fitIframe);
+    window.visualViewport?.removeEventListener("resize", fitIframe);
+    window.visualViewport?.removeEventListener("scroll", fitIframe);
+    document.removeEventListener("visibilitychange", onReturn);
+    window.removeEventListener("focus", onReturn);
+    sheet.style.transform = "";
+  };
+}
+function installDragToClose(sheet, handle, onClose) {
+  let startY = null;
+  handle.addEventListener("pointerdown", (event) => {
+    startY = event.clientY;
+    handle.setPointerCapture?.(event.pointerId);
+    sheet.classList.add("dragging");
+  });
+  handle.addEventListener("pointermove", (event) => {
+    if (startY === null) {
+      return;
+    }
+    const dy = Math.max(0, event.clientY - startY);
+    sheet.style.transform = `translateY(${dy}px)`;
+  });
+  const end = (event) => {
+    if (startY === null) {
+      return;
+    }
+    const dy = event.clientY - startY;
+    startY = null;
+    sheet.classList.remove("dragging");
+    sheet.style.transform = "";
+    if (dy > DRAG_CLOSE_PX) {
+      onClose("drag");
+    }
+  };
+  handle.addEventListener("pointerup", end);
+  handle.addEventListener("pointercancel", end);
+}
+function placeBottomSheet({
+  frame,
+  iframe,
+  onClose,
+  sheet
+}) {
+  const returnState = {
+    lastHeight: null,
+    returnedAt: 0,
+    shown: false
+  };
+  const scrim = document.createElement("div");
+  scrim.className = "scrim";
+  scrim.setAttribute("data-slot", "scrim");
+  scrim.addEventListener("click", () => {
+    if (performance.now() - returnState.returnedAt < RETURN_TAP_GUARD_MS) {
+      return;
+    }
+    onClose("scrim");
+  });
+  const handle = document.createElement("div");
+  handle.className = "handle";
+  handle.setAttribute("aria-hidden", "true");
+  handle.setAttribute("data-slot", "handle");
+  sheet.prepend(handle);
+  frame.prepend(scrim);
+  const removeReturnGuard = installReturnGuard(sheet, iframe, returnState);
+  installDragToClose(sheet, handle, onClose);
+  return {
+    remove: removeReturnGuard,
+    setContentHeight(px) {
+      if (document.visibilityState !== "visible") {
+        return;
+      }
+      returnState.lastHeight = px;
+      if (returnState.shown) {
+        placeSheet(sheet, px);
+      }
+    },
+    show() {
+      requestAnimationFrame(() => {
+        returnState.shown = true;
+        frame.classList.add("open");
+        placeSheet(sheet, returnState.lastHeight ?? INITIAL_CONTENT_PX);
+      });
+    }
+  };
+}
+function placeFullscreen({ frame, sheet }) {
+  sheet.classList.add("fullscreen");
+  const fitToViewport = () => {
+    sheet.style.top = `${Math.round(viewportTopPx())}px`;
+    sheet.style.height = `${Math.round(viewportPx())}px`;
+  };
+  fitToViewport();
+  window.addEventListener("resize", fitToViewport);
+  window.visualViewport?.addEventListener("resize", fitToViewport);
+  window.visualViewport?.addEventListener("scroll", fitToViewport);
+  return {
+    remove() {
+      window.removeEventListener("resize", fitToViewport);
+      window.visualViewport?.removeEventListener("resize", fitToViewport);
+      window.visualViewport?.removeEventListener("scroll", fitToViewport);
+    },
+    setContentHeight() {
+      return;
+    },
+    show() {
+      frame.classList.add("open");
+    }
+  };
+}
+const PLACEMENTS = {
+  fullscreen: placeFullscreen,
+  sheet: placeBottomSheet
+};
+function createSheetChrome(input) {
+  const host = document.createElement("div");
+  host.setAttribute("data-vana-connect", "");
+  const root = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = STYLES;
+  const frame = document.createElement("div");
+  const sheet = document.createElement("div");
+  sheet.className = "sheet";
+  sheet.setAttribute("role", "dialog");
+  sheet.setAttribute("aria-modal", "true");
+  sheet.setAttribute("aria-label", input.ariaLabel);
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+  );
+  iframe.setAttribute(
+    "allow",
+    "otp-credentials; publickey-credentials-get; clipboard-write"
+  );
+  iframe.setAttribute("title", "Vana");
+  iframe.referrerPolicy = "strict-origin-when-cross-origin";
+  iframe.src = input.src;
+  sheet.append(iframe);
+  frame.append(sheet);
+  root.append(style, frame);
+  input.container.append(host);
+  const placement = PLACEMENTS[input.display]({
+    frame,
+    iframe,
+    onClose: input.onClose,
+    sheet
+  });
+  return {
+    host,
+    iframe,
+    remove() {
+      placement.remove();
+      host.remove();
+    },
+    setContentHeight: placement.setContentHeight,
+    show: placement.show
+  };
+}
+export {
+  DRAG_CLOSE_PX,
+  MAX_SHEET_RATIO,
+  RETURN_TAP_GUARD_MS,
+  createSheetChrome,
+  sheetTopPx
+};
+//# sourceMappingURL=chrome.js.map

package/dist/connect/chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/connect/chrome.ts"],"sourcesContent":["/**\n * Sheet chrome for the Vana connect sheet, in a Shadow DOM root: a bottom\n * sheet with scrim and drag handle, or a window-filling frame.\n *\n * @remarks\n * Ported unchanged from `@vana-unity/connect-embed`. See the layout notes\n * below.\n *\n * @category Connect\n * @module connect/chrome\n */\n\n// Sheet chrome. Lives in a Shadow DOM root so partner CSS cannot restyle it, and\n// the partner cannot reach the iframe's document (cross-origin) through it.\n// One placement per display:\n//\n//   host (partner DOM)\n//   └─ #shadow-root\n//      ├─ bottom sheet\n//      │  ├─ .scrim              click closes\n//      │  └─ .sheet              top = viewport − (handle + content)\n//      │     ├─ .handle          drag down to close (above the frame, never over it)\n//      │     └─ iframe           fixed height = cap; the unused part sits below\n//      │                         the viewport\n//      └─ fullscreen\n//         └─ .sheet.fullscreen   the visible viewport, inside its safe areas\n//            └─ iframe           fills it; the frame scrolls its own content\n//\n// Nothing overlaps or clips the iframe. IntersectionObserver v2 inside the\n// sheet reports it \"not visible\" when anything covers or clips it, and the\n// consent step waits for real visibility. The part of the frame below the\n// viewport is simply off screen, which does not count as occlusion.\n\nimport type { ConnectDisplay } from \"./protocol\";\n\nconst SHEET_RADIUS_PX = 28;\nconst SHEET_MAX_WIDTH_PX = 480;\nconst HANDLE_STRIP_PX = 20;\nconst INITIAL_CONTENT_PX = 320;\nconst TRANSITION_MS = 280;\nconst SHEET_BACKGROUND = \"#f4f4f4\";\n\n/** Drag the handle this far down to dismiss. */\nexport const DRAG_CLOSE_PX = 120;\n\n/** The sheet never covers more of the viewport than this. */\nexport const MAX_SHEET_RATIO = 0.92;\n\nconst STYLES = `\n:host { all: initial; }\n.scrim {\n  position: fixed; inset: 0; z-index: 2147483646;\n  background: rgb(0 0 0 / 0.4);\n  opacity: 0; transition: opacity ${TRANSITION_MS}ms ease;\n}\n.sheet {\n  position: fixed; left: 0; right: 0; z-index: 2147483647;\n  margin: 0 auto; max-width: ${SHEET_MAX_WIDTH_PX}px;\n  top: 100vh;\n  transition: top ${TRANSITION_MS}ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet.dragging { transition: none; }\n.handle {\n  height: ${HANDLE_STRIP_PX}px;\n  display: flex; justify-content: center; align-items: center;\n  background: ${SHEET_BACKGROUND};\n  border-radius: ${SHEET_RADIUS_PX}px ${SHEET_RADIUS_PX}px 0 0;\n  touch-action: none; cursor: grab;\n}\n.handle::before {\n  content: \"\"; width: 36px; height: 5px; border-radius: 3px;\n  background: rgb(0 0 0 / 0.18);\n}\niframe {\n  display: block; width: 100%; border: 0;\n  background: ${SHEET_BACKGROUND};\n}\n.open .scrim { opacity: 1; }\n.sheet.fullscreen {\n  top: 0; height: 100vh; max-width: none;\n  display: flex; flex-direction: column; box-sizing: border-box;\n  padding: env(safe-area-inset-top) env(safe-area-inset-right)\n    env(safe-area-inset-bottom) env(safe-area-inset-left);\n  background: ${SHEET_BACKGROUND};\n  transition: none;\n}\n.sheet.fullscreen iframe { flex: 1; min-height: 0; }\n@media (prefers-reduced-motion: reduce) {\n  .scrim, .sheet { transition: none; }\n}\n`;\n\nexport type CloseReason = \"drag\" | \"scrim\";\n\nexport interface SheetChrome {\n  host: HTMLElement;\n  iframe: HTMLIFrameElement;\n  remove(): void;\n  setContentHeight(px: number): void;\n  show(): void;\n}\n\nfunction viewportPx(): number {\n  return window.visualViewport?.height ?? window.innerHeight;\n}\n\n/**\n * How far the visible viewport has panned inside the layout viewport `fixed`\n * measures from. It is non-zero when an on-screen keyboard pans the page.\n */\nfunction viewportTopPx(): number {\n  return window.visualViewport?.offsetTop ?? 0;\n}\n\nfunction capPx(): number {\n  return Math.round(viewportPx() * MAX_SHEET_RATIO);\n}\n\n/** Places the sheet so exactly `content` px of the frame show above the fold. */\nfunction placeSheet(sheet: HTMLElement, content: number): void {\n  sheet.style.top = `${Math.round(viewportTopPx() + sheetTopPx(viewportPx(), content))}px`;\n}\n\n/**\n * Where the sheet's top edge goes so `content` px of the frame show, capped\n * at {@link MAX_SHEET_RATIO} of the viewport.\n *\n * @param viewport - Viewport height in px.\n * @param content - Content height the sheet reported, in px.\n * @returns The sheet's `top`, in whole px.\n */\nexport function sheetTopPx(viewport: number, content: number): number {\n  const cap = Math.round(viewport * MAX_SHEET_RATIO);\n  const visible = Math.min(content, cap - HANDLE_STRIP_PX);\n  // Whole pixels: a fractional offset blurs the framed text.\n  return Math.round(viewport - HANDLE_STRIP_PX - visible);\n}\n\n/** Scrim taps this soon after the page returns to view are ignored. */\nexport const RETURN_TAP_GUARD_MS = 500;\n\n/**\n * Return-to-view handling, isolated so it can change on its own.\n *\n * Root cause of the spike's \"blank sheet\" (scratchpad blank-render notes): not\n * a paint failure. Returning from the Google popup tab, a stray tap landed on\n * the scrim and silently closed the sheet; a headless-Chrome harness artefact\n * looked similar. So: taps on the scrim right after the page regains\n * visibility or focus are ignored, heights reported while hidden are dropped,\n * and the last good height is re-applied on return. The iframe keeps a fixed\n * viewport (the cap) and only the sheet's position animates, so measuring\n * content inside the frame never resizes the frame itself.\n */\nfunction installReturnGuard(\n  sheet: HTMLElement,\n  iframe: HTMLIFrameElement,\n  state: { lastHeight: number | null; returnedAt: number; shown: boolean },\n): () => void {\n  const fitIframe = () => {\n    iframe.style.height = `${capPx() - HANDLE_STRIP_PX}px`;\n    if (state.shown) {\n      placeSheet(sheet, state.lastHeight ?? INITIAL_CONTENT_PX);\n    }\n  };\n  const onReturn = () => {\n    if (document.visibilityState !== \"visible\") {\n      return;\n    }\n    state.returnedAt = performance.now();\n    fitIframe();\n  };\n  fitIframe();\n  window.addEventListener(\"resize\", fitIframe);\n  window.visualViewport?.addEventListener(\"resize\", fitIframe);\n  window.visualViewport?.addEventListener(\"scroll\", fitIframe);\n  document.addEventListener(\"visibilitychange\", onReturn);\n  window.addEventListener(\"focus\", onReturn);\n  return () => {\n    window.removeEventListener(\"resize\", fitIframe);\n    window.visualViewport?.removeEventListener(\"resize\", fitIframe);\n    window.visualViewport?.removeEventListener(\"scroll\", fitIframe);\n    document.removeEventListener(\"visibilitychange\", onReturn);\n    window.removeEventListener(\"focus\", onReturn);\n    sheet.style.transform = \"\";\n  };\n}\n\nfunction installDragToClose(\n  sheet: HTMLElement,\n  handle: HTMLElement,\n  onClose: (reason: CloseReason) => void,\n): void {\n  let startY: number | null = null;\n  handle.addEventListener(\"pointerdown\", (event) => {\n    startY = event.clientY;\n    handle.setPointerCapture?.(event.pointerId);\n    sheet.classList.add(\"dragging\");\n  });\n  handle.addEventListener(\"pointermove\", (event) => {\n    if (startY === null) {\n      return;\n    }\n    const dy = Math.max(0, event.clientY - startY);\n    sheet.style.transform = `translateY(${dy}px)`;\n  });\n  const end = (event: PointerEvent) => {\n    if (startY === null) {\n      return;\n    }\n    const dy = event.clientY - startY;\n    startY = null;\n    sheet.classList.remove(\"dragging\");\n    sheet.style.transform = \"\";\n    if (dy > DRAG_CLOSE_PX) {\n      onClose(\"drag\");\n    }\n  };\n  handle.addEventListener(\"pointerup\", end);\n  handle.addEventListener(\"pointercancel\", end);\n}\n\n/** What differs between displays; the frame, focus and messages do not. */\ninterface Placement {\n  remove(): void;\n  setContentHeight(px: number): void;\n  show(): void;\n}\n\ninterface PlacementParts {\n  frame: HTMLElement;\n  iframe: HTMLIFrameElement;\n  onClose: (reason: CloseReason) => void;\n  sheet: HTMLElement;\n}\n\nfunction placeBottomSheet({\n  frame,\n  iframe,\n  onClose,\n  sheet,\n}: PlacementParts): Placement {\n  const returnState = {\n    lastHeight: null as number | null,\n    returnedAt: 0,\n    shown: false,\n  };\n  const scrim = document.createElement(\"div\");\n  scrim.className = \"scrim\";\n  scrim.setAttribute(\"data-slot\", \"scrim\");\n  scrim.addEventListener(\"click\", () => {\n    if (performance.now() - returnState.returnedAt < RETURN_TAP_GUARD_MS) {\n      return;\n    }\n    onClose(\"scrim\");\n  });\n\n  const handle = document.createElement(\"div\");\n  handle.className = \"handle\";\n  handle.setAttribute(\"aria-hidden\", \"true\");\n  handle.setAttribute(\"data-slot\", \"handle\");\n\n  sheet.prepend(handle);\n  frame.prepend(scrim);\n\n  const removeReturnGuard = installReturnGuard(sheet, iframe, returnState);\n  installDragToClose(sheet, handle, onClose);\n\n  return {\n    remove: removeReturnGuard,\n    setContentHeight(px) {\n      // A hidden page can report a throttled frame's height; keep the last good one.\n      if (document.visibilityState !== \"visible\") {\n        return;\n      }\n      returnState.lastHeight = px;\n      if (returnState.shown) {\n        placeSheet(sheet, px);\n      }\n    },\n    show() {\n      // Next frame, so the closed state paints first and the sheet slides in.\n      requestAnimationFrame(() => {\n        returnState.shown = true;\n        frame.classList.add(\"open\");\n        placeSheet(sheet, returnState.lastHeight ?? INITIAL_CONTENT_PX);\n      });\n    },\n  };\n}\n\n/**\n * Fills the visible viewport, so an on-screen keyboard shortens the frame and\n * its content scrolls above it. The window holds nothing else, so\n * there is no scrim to tap and no handle to drag: the frame's own close\n * control and Escape close it. Content height does not size anything.\n */\nfunction placeFullscreen({ frame, sheet }: PlacementParts): Placement {\n  sheet.classList.add(\"fullscreen\");\n  const fitToViewport = () => {\n    sheet.style.top = `${Math.round(viewportTopPx())}px`;\n    sheet.style.height = `${Math.round(viewportPx())}px`;\n  };\n  fitToViewport();\n  window.addEventListener(\"resize\", fitToViewport);\n  window.visualViewport?.addEventListener(\"resize\", fitToViewport);\n  window.visualViewport?.addEventListener(\"scroll\", fitToViewport);\n  return {\n    remove() {\n      window.removeEventListener(\"resize\", fitToViewport);\n      window.visualViewport?.removeEventListener(\"resize\", fitToViewport);\n      window.visualViewport?.removeEventListener(\"scroll\", fitToViewport);\n    },\n    setContentHeight() {\n      return;\n    },\n    show() {\n      frame.classList.add(\"open\");\n    },\n  };\n}\n\nconst PLACEMENTS: Record<ConnectDisplay, (parts: PlacementParts) => Placement> =\n  {\n    fullscreen: placeFullscreen,\n    sheet: placeBottomSheet,\n  };\n\nexport function createSheetChrome(input: {\n  ariaLabel: string;\n  container: HTMLElement;\n  display: ConnectDisplay;\n  onClose: (reason: CloseReason) => void;\n  src: string;\n}): SheetChrome {\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-vana-connect\", \"\");\n  const root = host.attachShadow({ mode: \"open\" });\n\n  const style = document.createElement(\"style\");\n  style.textContent = STYLES;\n\n  const frame = document.createElement(\"div\");\n\n  const sheet = document.createElement(\"div\");\n  sheet.className = \"sheet\";\n  sheet.setAttribute(\"role\", \"dialog\");\n  sheet.setAttribute(\"aria-modal\", \"true\");\n  sheet.setAttribute(\"aria-label\", input.ariaLabel);\n\n  const iframe = document.createElement(\"iframe\");\n  iframe.setAttribute(\n    \"sandbox\",\n    \"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox\",\n  );\n  iframe.setAttribute(\n    \"allow\",\n    \"otp-credentials; publickey-credentials-get; clipboard-write\",\n  );\n  iframe.setAttribute(\"title\", \"Vana\");\n  iframe.referrerPolicy = \"strict-origin-when-cross-origin\";\n  iframe.src = input.src;\n\n  sheet.append(iframe);\n  frame.append(sheet);\n  root.append(style, frame);\n  input.container.append(host);\n\n  const placement = PLACEMENTS[input.display]({\n    frame,\n    iframe,\n    onClose: input.onClose,\n    sheet,\n  });\n\n  return {\n    host,\n    iframe,\n    remove() {\n      placement.remove();\n      host.remove();\n    },\n    setContentHeight: placement.setContentHeight,\n    show: placement.show,\n  };\n}\n"],"mappings":"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","names":[]}