@replohq/sandbox-runtime 0.1.0

package/design-library-preview/DesignLibraryPreview.d.ts

@@ -0,0 +1 @@
+export declare function DesignLibraryPreview(): null;

package/design-library-preview/DesignLibraryPreview.js

@@ -0,0 +1,93 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { buildGoogleFontsCssUrl } from "../_vendor/replo-utils/lib/fonts.mjs";
+import { designLibraryPreviewMessageSchema } from "../_vendor/schemas/designLibrary.mjs";
+const FONT_LINK_DATA_KEY = "reploDesignLibraryFont";
+function escapeCssString(value) {
+  return value.replace(/\\/gu, "\\\\").replace(/'/gu, "\\'");
+}
+function DesignLibraryPreview() {
+  const ownedKeys = useRef(null);
+  const ownedFontLinks = useRef(null);
+  const ownedFontFaces = useRef(null);
+  const ownsDefaultFont = useRef(false);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      const parsed = designLibraryPreviewMessageSchema.safeParse(event.data);
+      if (!parsed.success) return;
+      const { cssVars, fonts, defaultFontCssVar } = parsed.data;
+      const root = document.documentElement;
+      const nextVars = { ...cssVars };
+      for (const font of fonts) {
+        nextVars[font.cssVar] = `'${escapeCssString(font.family)}'`;
+      }
+      const owned = ownedKeys.current ?? /* @__PURE__ */ new Set();
+      for (const key of owned) {
+        if (!(key in nextVars)) root.style.removeProperty(key);
+      }
+      ownedKeys.current = new Set(Object.keys(nextVars));
+      for (const [key, value] of Object.entries(nextVars)) {
+        root.style.setProperty(key, value);
+      }
+      const customFonts = fonts.filter((font) => Boolean(font.faceUrl));
+      const googleFonts = fonts.filter((font) => !font.faceUrl);
+      const links = ownedFontLinks.current ?? /* @__PURE__ */ new Map();
+      const nextHrefs = new Set(
+        googleFonts.map((font) => buildGoogleFontsCssUrl(font.family))
+      );
+      for (const [href, link] of links) {
+        if (!nextHrefs.has(href)) {
+          link.remove();
+          links.delete(href);
+        }
+      }
+      for (const href of nextHrefs) {
+        if (links.has(href)) continue;
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = href;
+        link.dataset[FONT_LINK_DATA_KEY] = "";
+        document.head.append(link);
+        links.set(href, link);
+      }
+      ownedFontLinks.current = links;
+      const faces = ownedFontFaces.current ?? /* @__PURE__ */ new Map();
+      const nextFamilies = new Set(customFonts.map((font) => font.family));
+      for (const [family, entry] of faces) {
+        if (!nextFamilies.has(family)) {
+          entry.style.remove();
+          faces.delete(family);
+        }
+      }
+      for (const font of customFonts) {
+        if (!font.faceUrl) continue;
+        const existing = faces.get(font.family);
+        if (existing?.url === font.faceUrl) continue;
+        existing?.style.remove();
+        const style = document.createElement("style");
+        style.dataset[FONT_LINK_DATA_KEY] = "";
+        const format = font.format ? ` format('${escapeCssString(font.format)}')` : "";
+        style.textContent = `@font-face{font-family:'${escapeCssString(font.family)}';font-weight:400;font-style:normal;src:url('${escapeCssString(font.faceUrl)}')${format};font-display:swap;}`;
+        document.head.append(style);
+        faces.set(font.family, { url: font.faceUrl, style });
+      }
+      ownedFontFaces.current = faces;
+      if (defaultFontCssVar) {
+        root.style.setProperty("font-family", `var(${defaultFontCssVar})`);
+        ownsDefaultFont.current = true;
+      } else if (ownsDefaultFont.current) {
+        root.style.removeProperty("font-family");
+        ownsDefaultFont.current = false;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+  return null;
+}
+export {
+  DesignLibraryPreview
+};
+//# sourceMappingURL=DesignLibraryPreview.js.map

package/design-library-preview/DesignLibraryPreview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../design-library-preview/DesignLibraryPreview.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nimport { buildGoogleFontsCssUrl } from \"replo-utils/lib/fonts\";\nimport { designLibraryPreviewMessageSchema } from \"schemas/designLibrary\";\n\nconst FONT_LINK_DATA_KEY = \"reploDesignLibraryFont\";\n\nfunction escapeCssString(value: string): string {\n  return value.replace(/\\\\/gu, \"\\\\\\\\\").replace(/'/gu, \"\\\\'\");\n}\n\nexport function DesignLibraryPreview() {\n  // NOTE (Ben, 2026-06-03): The custom-property keys we set last time, so on the\n  // next message we remove only the ones we own that the new override set drops.\n  const ownedKeys = useRef<Set<string> | null>(null);\n  // NOTE (Ben, 2026-06-05): The Google Font <link> hrefs we injected, keyed by\n  // href so we de-dupe and remove only our own when the override set changes.\n  const ownedFontLinks = useRef<Map<string, HTMLLinkElement> | null>(null);\n  // NOTE (Ben, 2026-06-05): The @font-face <style> nodes for uploaded custom\n  // fonts, keyed by family with the URL we injected, so we de-dupe, re-inject\n  // when a family's asset URL changes (re-upload), and remove only our own when\n  // the override set changes.\n  const ownedFontFaces = useRef<Map<\n    string,\n    { url: string; style: HTMLStyleElement }\n  > | null>(null);\n  // NOTE (Ben, 2026-06-05): Whether we set the document default font-family, so\n  // we can clear just that.\n  const ownsDefaultFont = useRef(false);\n\n  // eslint-disable-next-line replo/no-use-effect -- Subscribes to window message events from the parent editor.\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      const parsed = designLibraryPreviewMessageSchema.safeParse(event.data);\n      if (!parsed.success) return;\n      const { cssVars, fonts, defaultFontCssVar } = parsed.data;\n      const root = document.documentElement;\n\n      // --- CSS variable overrides (colors + font role vars) ---\n      const nextVars: Record<string, string> = { ...cssVars };\n      for (const font of fonts) {\n        nextVars[font.cssVar] = `'${escapeCssString(font.family)}'`;\n      }\n      const owned = ownedKeys.current ?? new Set();\n      for (const key of owned) {\n        if (!(key in nextVars)) root.style.removeProperty(key);\n      }\n      ownedKeys.current = new Set(Object.keys(nextVars));\n      for (const [key, value] of Object.entries(nextVars)) {\n        root.style.setProperty(key, value);\n      }\n\n      // Custom uploaded fonts carry a faceUrl; Google fonts don't.\n      const customFonts = fonts.filter((font) => Boolean(font.faceUrl));\n      const googleFonts = fonts.filter((font) => !font.faceUrl);\n\n      // --- Google Font stylesheets (<link> to the CDN) ---\n      const links = ownedFontLinks.current ?? new Map();\n      const nextHrefs = new Set(\n        googleFonts.map((font) => buildGoogleFontsCssUrl(font.family)),\n      );\n      for (const [href, link] of links) {\n        if (!nextHrefs.has(href)) {\n          link.remove();\n          links.delete(href);\n        }\n      }\n      for (const href of nextHrefs) {\n        if (links.has(href)) continue;\n        const link = document.createElement(\"link\");\n        link.rel = \"stylesheet\";\n        link.href = href;\n        link.dataset[FONT_LINK_DATA_KEY] = \"\";\n        document.head.append(link);\n        links.set(href, link);\n      }\n      ownedFontLinks.current = links;\n\n      // --- Custom uploaded fonts (@font-face from the asset URL) ---\n      const faces = ownedFontFaces.current ?? new Map();\n      const nextFamilies = new Set(customFonts.map((font) => font.family));\n      for (const [family, entry] of faces) {\n        if (!nextFamilies.has(family)) {\n          entry.style.remove();\n          faces.delete(family);\n        }\n      }\n      for (const font of customFonts) {\n        if (!font.faceUrl) continue;\n        const existing = faces.get(font.family);\n        // Re-upload reuses the family but changes the asset URL; replace the\n        // stale node rather than skipping it.\n        if (existing?.url === font.faceUrl) continue;\n        existing?.style.remove();\n        const style = document.createElement(\"style\");\n        style.dataset[FONT_LINK_DATA_KEY] = \"\";\n        const format = font.format\n          ? ` format('${escapeCssString(font.format)}')`\n          : \"\";\n        style.textContent = `@font-face{font-family:'${escapeCssString(font.family)}';font-weight:400;font-style:normal;src:url('${escapeCssString(font.faceUrl)}')${format};font-display:swap;}`;\n        document.head.append(style);\n        faces.set(font.family, { url: font.faceUrl, style });\n      }\n      ownedFontFaces.current = faces;\n\n      // --- Document default font ---\n      if (defaultFontCssVar) {\n        root.style.setProperty(\"font-family\", `var(${defaultFontCssVar})`);\n        ownsDefaultFont.current = true;\n      } else if (ownsDefaultFont.current) {\n        root.style.removeProperty(\"font-family\");\n        ownsDefaultFont.current = false;\n      }\n    };\n    window.addEventListener(\"message\", handleMessage);\n    return () => {\n      window.removeEventListener(\"message\", handleMessage);\n    };\n  }, []);\n\n  return null;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@replohq/sandbox-runtime",
+  "version": "0.1.0",
+  "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./sandbox-runtime.d.ts",
+      "default": "./sandbox-runtime.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@tiptap/core": "^2.25.0",
+    "@tiptap/extension-bold": "^2.25.0",
+    "@tiptap/extension-document": "^2.25.0",
+    "@tiptap/extension-italic": "^2.25.0",
+    "@tiptap/extension-strike": "^2.25.0",
+    "@tiptap/extension-text": "^2.25.0",
+    "@tiptap/extension-underline": "^2.25.0",
+    "@tiptap/pm": "^2.25.0",
+    "uuid": "^11.1.0",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "@types/react": ">=18.2.0",
+    "@types/react-dom": ">=18.2.0",
+    "next": ">=15.0.0",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "engines": {
+    "node": "22.x"
+  }
+}

package/posthog-relay.d.ts

@@ -0,0 +1,11 @@
+interface PostHog {
+    init: (apiKey: string, config: Record<string, unknown>) => void;
+    sessionRecordingStarted: () => boolean;
+}
+declare global {
+    interface Window {
+        posthog?: PostHog;
+    }
+}
+export default function PostHogRelay(): null;
+export {};

package/posthog-relay.js

@@ -0,0 +1,72 @@
+"use client";
+import { useEffect } from "react";
+import { startChildPostHogReplaySnapshotRelay } from "./_vendor/replo-utils/lib/posthogReplay.mjs";
+const POSTHOG_API_KEY = "phc_dRETsj85vNkKrvQQszEFRBibH5kUF9l7rbjACuKPanZ";
+const POSTHOG_API_HOST = "https://d99bbtllqsaif.cloudfront.net";
+let initPromise = null;
+function loadPostHogScript() {
+  return new Promise((resolve) => {
+    if (window.posthog) {
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `${POSTHOG_API_HOST}/static/array.js`;
+    script.async = true;
+    script.addEventListener("load", () => resolve());
+    script.addEventListener("error", () => {
+      resolve();
+      console.warn("[PostHog Relay] Failed to load PostHog script");
+    });
+    document.head.append(script);
+  });
+}
+function initPostHogRelay() {
+  if (window.self === window.top) {
+    return Promise.resolve();
+  }
+  if (initPromise) {
+    return initPromise;
+  }
+  initPromise = (async () => {
+    await loadPostHogScript();
+    if (!window.posthog) {
+      initPromise = null;
+      console.warn("[PostHog Relay] PostHog not available after script load");
+      return;
+    }
+    window.posthog.init(POSTHOG_API_KEY, {
+      api_host: POSTHOG_API_HOST,
+      persistence: "localStorage",
+      autocapture: false,
+      // (Noah, 2026-07-14, REPL-29305): Disable performance capture — its PerformanceObserver
+      // relays a non-cloneable PerformanceServerTiming across the iframe boundary via postMessage,
+      // throwing a DataCloneError in the preview. Matches the bedrock-sdk relay.
+      capture_performance: false,
+      capture_pageview: false,
+      session_recording: {
+        recordCrossOriginIframes: true,
+        // NOTE (Nick, 2026-02-02, REPL-23284): Disable canvas recording to prevent SecurityError on tainted canvases
+        captureCanvas: { recordCanvas: false }
+      }
+    });
+  })();
+  return initPromise;
+}
+function PostHogRelay() {
+  useEffect(() => {
+    const stopRelayingSnapshotRequests = startChildPostHogReplaySnapshotRelay({
+      isRecordingStarted: () => {
+        return window.posthog?.sessionRecordingStarted() ?? false;
+      },
+      targetWindow: window
+    });
+    void initPostHogRelay();
+    return stopRelayingSnapshotRequests;
+  }, []);
+  return null;
+}
+export {
+  PostHogRelay as default
+};
+//# sourceMappingURL=posthog-relay.js.map

package/posthog-relay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../posthog-relay.tsx"],
+  "sourcesContent": ["\"use client\";\n\n/**\n * PostHog Cross-Origin Iframe Relay\n *\n * Initializes PostHog inside the sandbox iframe as a \"relay\" - it captures DOM\n * mutations via rrweb and sends them to the parent window's PostHog instance\n * via postMessage, enabling session recordings to include iframe content.\n */\nimport { useEffect } from \"react\";\n\nimport { startChildPostHogReplaySnapshotRelay } from \"replo-utils/lib/posthogReplay\";\n\nconst POSTHOG_API_KEY = \"phc_dRETsj85vNkKrvQQszEFRBibH5kUF9l7rbjACuKPanZ\";\nconst POSTHOG_API_HOST = \"https://d99bbtllqsaif.cloudfront.net\";\n\ninterface PostHog {\n  init: (apiKey: string, config: Record<string, unknown>) => void;\n  sessionRecordingStarted: () => boolean;\n}\n\ndeclare global {\n  interface Window {\n    posthog?: PostHog;\n  }\n}\n\nlet initPromise: Promise<void> | null = null;\n\nfunction loadPostHogScript() {\n  return new Promise<void>((resolve) => {\n    if (window.posthog) {\n      resolve();\n      return;\n    }\n\n    const script = document.createElement(\"script\");\n    script.src = `${POSTHOG_API_HOST}/static/array.js`;\n    script.async = true;\n    script.addEventListener(\"load\", () => resolve());\n    script.addEventListener(\"error\", () => {\n      resolve();\n      console.warn(\"[PostHog Relay] Failed to load PostHog script\");\n    });\n    document.head.append(script);\n  });\n}\n\nfunction initPostHogRelay() {\n  if (window.self === window.top) {\n    return Promise.resolve();\n  }\n\n  if (initPromise) {\n    return initPromise;\n  }\n\n  initPromise = (async () => {\n    await loadPostHogScript();\n\n    if (!window.posthog) {\n      initPromise = null;\n      console.warn(\"[PostHog Relay] PostHog not available after script load\");\n      return;\n    }\n\n    window.posthog.init(POSTHOG_API_KEY, {\n      api_host: POSTHOG_API_HOST,\n      persistence: \"localStorage\",\n      autocapture: false,\n      // (Noah, 2026-07-14, REPL-29305): Disable performance capture \u2014 its PerformanceObserver\n      // relays a non-cloneable PerformanceServerTiming across the iframe boundary via postMessage,\n      // throwing a DataCloneError in the preview. Matches the bedrock-sdk relay.\n      capture_performance: false,\n      capture_pageview: false,\n      session_recording: {\n        recordCrossOriginIframes: true,\n        // NOTE (Nick, 2026-02-02, REPL-23284): Disable canvas recording to prevent SecurityError on tainted canvases\n        captureCanvas: { recordCanvas: false },\n      },\n    });\n  })();\n\n  return initPromise;\n}\n\nexport default function PostHogRelay() {\n  // eslint-disable-next-line replo/no-use-effect -- External replay script and cross-frame listener lifecycle.\n  useEffect(() => {\n    const stopRelayingSnapshotRequests = startChildPostHogReplaySnapshotRelay({\n      isRecordingStarted: () => {\n        return window.posthog?.sessionRecordingStarted() ?? false;\n      },\n      targetWindow: window,\n    });\n    void initPostHogRelay();\n    return stopRelayingSnapshotRequests;\n  }, []);\n\n  return null;\n}\n"],
+  "mappings": ";AASA,SAAS,iBAAiB;AAE1B,SAAS,4CAA4C;AAErD,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAazB,IAAI,cAAoC;AAExC,SAAS,oBAAoB;AAC3B,SAAO,IAAI,QAAc,CAAC,YAAY;AACpC,QAAI,OAAO,SAAS;AAClB,cAAQ;AACR;AAAA,IACF;AAEA,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,MAAM,GAAG,gBAAgB;AAChC,WAAO,QAAQ;AACf,WAAO,iBAAiB,QAAQ,MAAM,QAAQ,CAAC;AAC/C,WAAO,iBAAiB,SAAS,MAAM;AACrC,cAAQ;AACR,cAAQ,KAAK,+CAA+C;AAAA,IAC9D,CAAC;AACD,aAAS,KAAK,OAAO,MAAM;AAAA,EAC7B,CAAC;AACH;AAEA,SAAS,mBAAmB;AAC1B,MAAI,OAAO,SAAS,OAAO,KAAK;AAC9B,WAAO,QAAQ,QAAQ;AAAA,EACzB;AAEA,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,iBAAe,YAAY;AACzB,UAAM,kBAAkB;AAExB,QAAI,CAAC,OAAO,SAAS;AACnB,oBAAc;AACd,cAAQ,KAAK,yDAAyD;AACtE;AAAA,IACF;AAEA,WAAO,QAAQ,KAAK,iBAAiB;AAAA,MACnC,UAAU;AAAA,MACV,aAAa;AAAA,MACb,aAAa;AAAA;AAAA;AAAA;AAAA,MAIb,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,QACjB,0BAA0B;AAAA;AAAA,QAE1B,eAAe,EAAE,cAAc,MAAM;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH,GAAG;AAEH,SAAO;AACT;AAEe,SAAR,eAAgC;AAErC,YAAU,MAAM;AACd,UAAM,+BAA+B,qCAAqC;AAAA,MACxE,oBAAoB,MAAM;AACxB,eAAO,OAAO,SAAS,wBAAwB,KAAK;AAAA,MACtD;AAAA,MACA,cAAc;AAAA,IAChB,CAAC;AACD,SAAK,iBAAiB;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
+  "names": []
+}

package/sandbox-runtime.d.ts

@@ -0,0 +1 @@
+export declare function SandboxRuntime({ children }: React.PropsWithChildren): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/sandbox-runtime.js

@@ -0,0 +1,29 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnnotationLayerMount } from "./annotations/AnnotationLayerMount";
+import { ClientErrorBoundary } from "./ClientErrorBoundary";
+import { DesignLibraryPreview } from "./design-library-preview/DesignLibraryPreview";
+import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
+import LinkInterceptor from "./LinkInterceptor";
+import { NextErrorReporter } from "./NextErrorReporter";
+import PostHogRelay from "./posthog-relay";
+import { EditorSelection } from "./select-mode/EditorSelection";
+function SandboxRuntime({ children }) {
+  const isDevServer = process.env.NODE_ENV === "development";
+  return isDevServer ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DocumentReadyBeacon, {}),
+    /* @__PURE__ */ jsx(NextErrorReporter, {}),
+    /* @__PURE__ */ jsxs(ClientErrorBoundary, { children: [
+      /* @__PURE__ */ jsx(LinkInterceptor, {}),
+      /* @__PURE__ */ jsx(PostHogRelay, {}),
+      /* @__PURE__ */ jsx(EditorSelection, {}),
+      /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
+      /* @__PURE__ */ jsx(DesignLibraryPreview, {}),
+      children
+    ] })
+  ] }) : children;
+}
+export {
+  SandboxRuntime
+};
+//# sourceMappingURL=sandbox-runtime.js.map

package/sandbox-runtime.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../sandbox-runtime.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { AnnotationLayerMount } from \"./annotations/AnnotationLayerMount\";\nimport { ClientErrorBoundary } from \"./ClientErrorBoundary\";\nimport { DesignLibraryPreview } from \"./design-library-preview/DesignLibraryPreview\";\nimport { DocumentReadyBeacon } from \"./DocumentReadyBeacon\";\nimport LinkInterceptor from \"./LinkInterceptor\";\nimport { NextErrorReporter } from \"./NextErrorReporter\";\nimport PostHogRelay from \"./posthog-relay\";\nimport { EditorSelection } from \"./select-mode/EditorSelection\";\n\nexport function SandboxRuntime({ children }: React.PropsWithChildren) {\n  // The editor only embeds dev servers (`next dev`), so editor-integration components render there only \u2014 production builds ship none of them and behave like plain Next apps.\n  const isDevServer = process.env.NODE_ENV === \"development\";\n\n  return isDevServer ? (\n    <>\n      <DocumentReadyBeacon />\n      {/* NOTE (Max, 2026-06-08): Outside ClientErrorBoundary on purpose \u2014 when\n          the boundary catches a runtime error it swaps its children for a\n          neutral cover, which would unmount the reporter and freeze it in the\n          error state. It must stay mounted to observe Next's overlay across\n          error <-> recover. */}\n      <NextErrorReporter />\n      <ClientErrorBoundary>\n        <LinkInterceptor />\n        <PostHogRelay />\n        <EditorSelection />\n        <AnnotationLayerMount />\n        <DesignLibraryPreview />\n        {children}\n      </ClientErrorBoundary>\n    </>\n  ) : (\n    children\n  );\n}\n"],
+  "mappings": ";AAgBI,mBACE,KAOA,YARF;AAdJ,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,OAAO,qBAAqB;AAC5B,SAAS,yBAAyB;AAClC,OAAO,kBAAkB;AACzB,SAAS,uBAAuB;AAEzB,SAAS,eAAe,EAAE,SAAS,GAA4B;AAEpE,QAAM,cAAc,QAAQ,IAAI,aAAa;AAE7C,SAAO,cACL,iCACE;AAAA,wBAAC,uBAAoB;AAAA,IAMrB,oBAAC,qBAAkB;AAAA,IACnB,qBAAC,uBACC;AAAA,0BAAC,mBAAgB;AAAA,MACjB,oBAAC,gBAAa;AAAA,MACd,oBAAC,mBAAgB;AAAA,MACjB,oBAAC,wBAAqB;AAAA,MACtB,oBAAC,wBAAqB;AAAA,MACrB;AAAA,OACH;AAAA,KACF,IAEA;AAEJ;",
+  "names": []
+}

package/select-mode/EditorSelection.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Mounts the iframe-side selectMode controller. This is a render-less
+ * component — every responsibility is delegated to a dedicated hook so each
+ * concern (parent messaging, cursor styling, pointer interactions, hover
+ * tracking, scroll syncing) can be read in isolation:
+ *
+ *  - `useParentMessaging` — inbound messages from the parent (set mode,
+ *    set selection type) + outbound `IFRAME_READY` handshake.
+ *  - `useCrosshairCursor` — crosshair cursor + disable text/drag selection
+ *    while in selection mode.
+ *  - `useSelectionInteractions` — pointer-down / move / up state machine
+ *    that produces `ELEMENT_SELECTED`, `AREA_SELECTED`, and live
+ *    `DRAG_RECT_UPDATED` messages.
+ *  - `useSelectionHover` — hover-element rect updates.
+ *  - `useSelectionScrollSync` — keeps the parent overlay aligned with the
+ *    selected element/area when the iframe scrolls.
+ *
+ * The `interactionSessionRef` is the single source of truth for the
+ * in-progress drag/selection — every hook reads/writes it via ref so we
+ * don't trigger React re-renders during interaction-heavy operations.
+ *
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function EditorSelection(): null;

package/select-mode/EditorSelection.js

@@ -0,0 +1,95 @@
+"use client";
+import { useCallback, useEffect } from "react";
+import { buildElementDescriptor } from "./descriptor/elementDescriptor";
+import { installFastRefreshRelay } from "./fast-refresh-relay";
+import { useCrosshairCursor } from "./hooks/useCrosshairCursor";
+import { useEditModeStateMachine } from "./hooks/useEditModeStateMachine";
+import { useOptimisticOverrides } from "./hooks/useOptimisticOverrides";
+import { useParentMessaging } from "./hooks/useParentMessaging";
+import { useSelectionHover } from "./hooks/useSelectionHover";
+import { useSelectionInteractions } from "./hooks/useSelectionInteractions";
+import { useSelectionScrollSync } from "./hooks/useSelectionScrollSync";
+import { useSelectModeController } from "./hooks/useSelectModeController";
+import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
+import { symbolicateSelectedElement } from "./symbolicate";
+function EditorSelection() {
+  const {
+    displayMode,
+    interactionSessionRef,
+    setDisplayMode,
+    setSelectionType
+  } = useSelectModeController();
+  const { beginEditing, editingElementRef, formatCommand, revert } = useEditModeStateMachine({
+    displayMode,
+    interactionSessionRef
+  });
+  const {
+    applyOptimisticUpdate,
+    markCommitted,
+    reapplyOverrides,
+    resolveSessionOverrides,
+    revertOverride
+  } = useOptimisticOverrides();
+  const postSelectedElementSnapshot = useCallback(() => {
+    const session = interactionSessionRef.current;
+    if (session.type !== "element") {
+      return;
+    }
+    const selectedElement = session.data.kind === "react-element" ? document.querySelector(session.data.selector) : null;
+    const element = selectedElement ?? session.element;
+    if (!(element instanceof Element) || !element.isConnected) {
+      return;
+    }
+    const descriptor = buildElementDescriptor({
+      element,
+      clickPosition: session.clickPosition ?? (session.data.kind === "react-element" ? session.data.clickPosition : { x: 0, y: 0 }),
+      siblingSelectors: session.data.kind === "react-element" ? session.data.siblingSelectors : []
+    });
+    if (descriptor.kind !== "react-element") {
+      return;
+    }
+    interactionSessionRef.current = {
+      ...session,
+      element,
+      data: descriptor
+    };
+    void symbolicateSelectedElement(descriptor).then((symbolicated) => {
+      getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
+    });
+  }, [interactionSessionRef]);
+  useEffect(() => {
+    installFastRefreshRelay({
+      onComplete: () => {
+        reapplyOverrides({ skipElement: editingElementRef.current });
+        postSelectedElementSnapshot();
+      }
+    });
+  }, [editingElementRef, postSelectedElementSnapshot, reapplyOverrides]);
+  useParentMessaging({
+    applyOptimisticUpdate,
+    markCommitted,
+    onExitEditMode: revert,
+    onFormatCommand: formatCommand,
+    resolveSessionOverrides,
+    revertOverride,
+    setDisplayMode,
+    setSelectionType
+  });
+  useCrosshairCursor({ displayMode });
+  useSelectionInteractions({
+    displayMode,
+    editingElementRef,
+    interactionSessionRef,
+    onBeginEditing: beginEditing
+  });
+  useSelectionHover({ displayMode, interactionSessionRef });
+  useSelectionScrollSync({
+    displayMode,
+    interactionSessionRef
+  });
+  return null;
+}
+export {
+  EditorSelection
+};
+//# sourceMappingURL=EditorSelection.js.map

package/select-mode/EditorSelection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/EditorSelection.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { useCallback, useEffect } from \"react\";\n\nimport { buildElementDescriptor } from \"./descriptor/elementDescriptor\";\nimport { installFastRefreshRelay } from \"./fast-refresh-relay\";\nimport { useCrosshairCursor } from \"./hooks/useCrosshairCursor\";\nimport { useEditModeStateMachine } from \"./hooks/useEditModeStateMachine\";\nimport { useOptimisticOverrides } from \"./hooks/useOptimisticOverrides\";\nimport { useParentMessaging } from \"./hooks/useParentMessaging\";\nimport { useSelectionHover } from \"./hooks/useSelectionHover\";\nimport { useSelectionInteractions } from \"./hooks/useSelectionInteractions\";\nimport { useSelectionScrollSync } from \"./hooks/useSelectionScrollSync\";\nimport { useSelectModeController } from \"./hooks/useSelectModeController\";\nimport { getWebsiteBuilderRpc } from \"./iframeRpcChannel\";\nimport { symbolicateSelectedElement } from \"./symbolicate\";\n\n/**\n * Mounts the iframe-side selectMode controller. This is a render-less\n * component \u2014 every responsibility is delegated to a dedicated hook so each\n * concern (parent messaging, cursor styling, pointer interactions, hover\n * tracking, scroll syncing) can be read in isolation:\n *\n *  - `useParentMessaging` \u2014 inbound messages from the parent (set mode,\n *    set selection type) + outbound `IFRAME_READY` handshake.\n *  - `useCrosshairCursor` \u2014 crosshair cursor + disable text/drag selection\n *    while in selection mode.\n *  - `useSelectionInteractions` \u2014 pointer-down / move / up state machine\n *    that produces `ELEMENT_SELECTED`, `AREA_SELECTED`, and live\n *    `DRAG_RECT_UPDATED` messages.\n *  - `useSelectionHover` \u2014 hover-element rect updates.\n *  - `useSelectionScrollSync` \u2014 keeps the parent overlay aligned with the\n *    selected element/area when the iframe scrolls.\n *\n * The `interactionSessionRef` is the single source of truth for the\n * in-progress drag/selection \u2014 every hook reads/writes it via ref so we\n * don't trigger React re-renders during interaction-heavy operations.\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function EditorSelection() {\n  const {\n    displayMode,\n    interactionSessionRef,\n    setDisplayMode,\n    setSelectionType,\n  } = useSelectModeController();\n  const { beginEditing, editingElementRef, formatCommand, revert } =\n    useEditModeStateMachine({\n      displayMode,\n      interactionSessionRef,\n    });\n  const {\n    applyOptimisticUpdate,\n    markCommitted,\n    reapplyOverrides,\n    resolveSessionOverrides,\n    revertOverride,\n  } = useOptimisticOverrides();\n\n  const postSelectedElementSnapshot = useCallback(() => {\n    const session = interactionSessionRef.current;\n    if (session.type !== \"element\") {\n      return;\n    }\n\n    const selectedElement =\n      session.data.kind === \"react-element\"\n        ? document.querySelector(session.data.selector)\n        : null;\n    const element = selectedElement ?? session.element;\n    if (!(element instanceof Element) || !element.isConnected) {\n      return;\n    }\n\n    const descriptor = buildElementDescriptor({\n      element,\n      clickPosition:\n        session.clickPosition ??\n        (session.data.kind === \"react-element\"\n          ? session.data.clickPosition\n          : { x: 0, y: 0 }),\n      siblingSelectors:\n        session.data.kind === \"react-element\"\n          ? session.data.siblingSelectors\n          : [],\n    });\n    if (descriptor.kind !== \"react-element\") {\n      return;\n    }\n\n    interactionSessionRef.current = {\n      ...session,\n      element,\n      data: descriptor,\n    };\n\n    void symbolicateSelectedElement(descriptor).then((symbolicated) => {\n      getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });\n    });\n  }, [interactionSessionRef]);\n\n  // eslint-disable-next-line replo/no-use-effect -- Installs a window-level console bridge for the preview iframe.\n  useEffect(() => {\n    installFastRefreshRelay({\n      onComplete: () => {\n        // Re-apply before re-symbolicating so the snapshot reads the\n        // optimistic content, not the source the refresh just repainted.\n        reapplyOverrides({ skipElement: editingElementRef.current });\n        postSelectedElementSnapshot();\n      },\n    });\n  }, [editingElementRef, postSelectedElementSnapshot, reapplyOverrides]);\n\n  useParentMessaging({\n    applyOptimisticUpdate,\n    markCommitted,\n    onExitEditMode: revert,\n    onFormatCommand: formatCommand,\n    resolveSessionOverrides,\n    revertOverride,\n    setDisplayMode,\n    setSelectionType,\n  });\n  useCrosshairCursor({ displayMode });\n  useSelectionInteractions({\n    displayMode,\n    editingElementRef,\n    interactionSessionRef,\n    onBeginEditing: beginEditing,\n  });\n  useSelectionHover({ displayMode, interactionSessionRef });\n  useSelectionScrollSync({\n    displayMode,\n    interactionSessionRef,\n  });\n\n  return null;\n}\n"],
+  "mappings": ";AAEA,SAAS,aAAa,iBAAiB;AAEvC,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAyBpC,SAAS,kBAAkB;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,wBAAwB;AAC5B,QAAM,EAAE,cAAc,mBAAmB,eAAe,OAAO,IAC7D,wBAAwB;AAAA,IACtB;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAE3B,QAAM,8BAA8B,YAAY,MAAM;AACpD,UAAM,UAAU,sBAAsB;AACtC,QAAI,QAAQ,SAAS,WAAW;AAC9B;AAAA,IACF;AAEA,UAAM,kBACJ,QAAQ,KAAK,SAAS,kBAClB,SAAS,cAAc,QAAQ,KAAK,QAAQ,IAC5C;AACN,UAAM,UAAU,mBAAmB,QAAQ;AAC3C,QAAI,EAAE,mBAAmB,YAAY,CAAC,QAAQ,aAAa;AACzD;AAAA,IACF;AAEA,UAAM,aAAa,uBAAuB;AAAA,MACxC;AAAA,MACA,eACE,QAAQ,kBACP,QAAQ,KAAK,SAAS,kBACnB,QAAQ,KAAK,gBACb,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,MACnB,kBACE,QAAQ,KAAK,SAAS,kBAClB,QAAQ,KAAK,mBACb,CAAC;AAAA,IACT,CAAC;AACD,QAAI,WAAW,SAAS,iBAAiB;AACvC;AAAA,IACF;AAEA,0BAAsB,UAAU;AAAA,MAC9B,GAAG;AAAA,MACH;AAAA,MACA,MAAM;AAAA,IACR;AAEA,SAAK,2BAA2B,UAAU,EAAE,KAAK,CAAC,iBAAiB;AACjE,2BAAqB,GAAG,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAAA,IAChE,CAAC;AAAA,EACH,GAAG,CAAC,qBAAqB,CAAC;AAG1B,YAAU,MAAM;AACd,4BAAwB;AAAA,MACtB,YAAY,MAAM;AAGhB,yBAAiB,EAAE,aAAa,kBAAkB,QAAQ,CAAC;AAC3D,oCAA4B;AAAA,MAC9B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,mBAAmB,6BAA6B,gBAAgB,CAAC;AAErE,qBAAmB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,qBAAmB,EAAE,YAAY,CAAC;AAClC,2BAAyB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AACD,oBAAkB,EAAE,aAAa,sBAAsB,CAAC;AACxD,yBAAuB;AAAA,IACrB;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "names": []
+}

package/select-mode/annotationFrames.d.ts

@@ -0,0 +1,33 @@
+export declare const ANNOTATION_CONTAINER_ID = "replo-annotation-frames";
+interface AnnotationRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface AnnotationFrameSpec {
+    id: string;
+    pageRect: AnnotationRect;
+    badgeCenter: {
+        x: number;
+        y: number;
+    };
+    positioning: "absolute" | "fixed";
+    colorHex: string;
+    badgeLabel: string;
+    badgeAriaLabel: string;
+    isActive: boolean;
+    onBadgeClick: () => void;
+}
+/**
+ * Style-only selection update: rebuilding the node pool mid-interaction would
+ * race the pointer sequence and swallow the click, so the active state never
+ * re-renders — it just retargets transforms on the existing nodes.
+ */
+export declare function setActiveAnnotationBadge(id: string | null): void;
+export declare function getAnnotationBadgeViewportRect(id: string): AnnotationRect | null;
+export declare function showAnnotationFrames({ frames, }: {
+    frames: AnnotationFrameSpec[];
+}): void;
+export declare function clearAnnotationFrames(): void;
+export {};

package/select-mode/annotationFrames.js

@@ -0,0 +1,119 @@
+import { getOrCreateFramesLayerContainer } from "./selectionFrame";
+const ANNOTATION_CONTAINER_ID = "replo-annotation-frames";
+const ANNOTATION_FONT_STYLE_ID = "replo-annotation-font";
+const BADGE_SIZE_PX = 30;
+const EDITORIAL_ITALIC_FONT_URL = "https://assets.replocdn.com/PPEditorialNew-Italic.woff2";
+const BADGE_FONT = 'italic 400 16px/1 "PP Editorial New", Georgia, "Times New Roman", serif';
+function ensureBadgeFont() {
+  if (document.getElementById(ANNOTATION_FONT_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = ANNOTATION_FONT_STYLE_ID;
+  style.textContent = `@font-face{font-family:"PP Editorial New";src:url("${EDITORIAL_ITALIC_FONT_URL}") format("woff2");font-weight:normal;font-style:italic;font-display:swap;}`;
+  document.head.append(style);
+}
+const badgeNodesById = /* @__PURE__ */ new Map();
+let activeBadgeId = null;
+function badgeRestingTransform(id) {
+  return id === activeBadgeId ? "scale(1.15)" : "scale(1)";
+}
+function setActiveAnnotationBadge(id) {
+  activeBadgeId = id;
+  for (const [badgeId, badge] of badgeNodesById) {
+    badge.style.transform = badgeRestingTransform(badgeId);
+  }
+}
+function getAnnotationBadgeViewportRect(id) {
+  const badge = badgeNodesById.get(id);
+  if (!badge?.isConnected) {
+    return null;
+  }
+  const rect = badge.getBoundingClientRect();
+  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+}
+function createFrameNode(spec) {
+  const frame = document.createElement("div");
+  frame.style.cssText = [
+    `position: ${spec.positioning}`,
+    `left: ${spec.pageRect.x}px`,
+    `top: ${spec.pageRect.y}px`,
+    "width: 0",
+    "height: 0",
+    "pointer-events: none",
+    "margin: 0",
+    "padding: 0"
+  ].join(";");
+  const badge = document.createElement("button");
+  badge.type = "button";
+  badge.setAttribute("aria-label", spec.badgeAriaLabel);
+  badge.textContent = spec.badgeLabel;
+  badge.style.cssText = [
+    "position: absolute",
+    `left: ${spec.badgeCenter.x - spec.pageRect.x - BADGE_SIZE_PX / 2}px`,
+    `top: ${spec.badgeCenter.y - spec.pageRect.y - BADGE_SIZE_PX / 2}px`,
+    `width: ${BADGE_SIZE_PX}px`,
+    `height: ${BADGE_SIZE_PX}px`,
+    "display: flex",
+    "align-items: center",
+    "justify-content: center",
+    "border: none",
+    "border-radius: 50%",
+    `background: ${spec.colorHex}`,
+    "color: #ffffff",
+    `font: ${BADGE_FONT}`,
+    "box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.18)",
+    `transform: scale(${spec.isActive ? 1.15 : 1})`,
+    "transition: transform 120ms ease-out",
+    "cursor: pointer",
+    "pointer-events: auto",
+    "margin: 0",
+    "padding: 0 0 1px 0"
+  ].join(";");
+  badge.addEventListener("pointerdown", () => {
+    badge.style.transform = "scale(0.9)";
+  });
+  badge.addEventListener("pointerup", () => {
+    badge.style.transform = badgeRestingTransform(spec.id);
+  });
+  badge.addEventListener("pointerleave", () => {
+    badge.style.transform = badgeRestingTransform(spec.id);
+  });
+  badge.addEventListener("click", (event) => {
+    event.stopPropagation();
+    spec.onBadgeClick();
+  });
+  frame.append(badge);
+  badgeNodesById.set(spec.id, badge);
+  return frame;
+}
+function showAnnotationFrames({
+  frames
+}) {
+  const container = getOrCreateFramesLayerContainer({
+    id: ANNOTATION_CONTAINER_ID,
+    zIndex: 2147483645
+  });
+  if (!container) {
+    return;
+  }
+  ensureBadgeFont();
+  activeBadgeId = frames.find((spec) => spec.isActive)?.id ?? null;
+  badgeNodesById.clear();
+  container.replaceChildren(...frames.map((spec) => createFrameNode(spec)));
+}
+function clearAnnotationFrames() {
+  badgeNodesById.clear();
+  if (typeof document === "undefined") {
+    return;
+  }
+  document.getElementById(ANNOTATION_CONTAINER_ID)?.replaceChildren();
+}
+export {
+  ANNOTATION_CONTAINER_ID,
+  clearAnnotationFrames,
+  getAnnotationBadgeViewportRect,
+  setActiveAnnotationBadge,
+  showAnnotationFrames
+};
+//# sourceMappingURL=annotationFrames.js.map

package/select-mode/annotationFrames.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/annotationFrames.ts"],
+  "sourcesContent": ["/**\n * In-iframe annotation frame renderer \u2014 `selectionFrame`'s sibling surface.\n *\n * Same architecture and reasons as selection frames (see selectionFrame.ts):\n * page-coordinate `position: absolute` nodes in a body-level container, so\n * document scroll translates them with zero JavaScript per scroll frame, and\n * styling is vanilla inline CSS because customer pages have no tailwind.\n *\n * An annotation frame is an invisible positioning box over the annotated\n * element carrying a numbered badge dot \u2014 the dot is the entire visual.\n * Unlike selection frames these rebuild wholesale on each call: re-renders\n * happen on set/re-measure (rare), never per scroll, so pooling buys nothing.\n */\nimport { getOrCreateFramesLayerContainer } from \"./selectionFrame\";\n\nexport const ANNOTATION_CONTAINER_ID = \"replo-annotation-frames\";\nconst ANNOTATION_FONT_STYLE_ID = \"replo-annotation-font\";\nconst BADGE_SIZE_PX = 30;\n// The badge numerals use the same PP Editorial the editor brand uses, served\n// from the CDN asset the editor already loads \u2014 no font bytes ship in canopy,\n// and this layer only exists in dev previews. `swap` degrades to Georgia.\nconst EDITORIAL_ITALIC_FONT_URL =\n  \"https://assets.replocdn.com/PPEditorialNew-Italic.woff2\";\nconst BADGE_FONT =\n  'italic 400 16px/1 \"PP Editorial New\", Georgia, \"Times New Roman\", serif';\n\nfunction ensureBadgeFont() {\n  if (document.getElementById(ANNOTATION_FONT_STYLE_ID)) {\n    return;\n  }\n  const style = document.createElement(\"style\");\n  style.id = ANNOTATION_FONT_STYLE_ID;\n  style.textContent = `@font-face{font-family:\"PP Editorial New\";src:url(\"${EDITORIAL_ITALIC_FONT_URL}\") format(\"woff2\");font-weight:normal;font-style:italic;font-display:swap;}`;\n  document.head.append(style);\n}\n\ninterface AnnotationRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface AnnotationFrameSpec {\n  id: string;\n  pageRect: AnnotationRect;\n  badgeCenter: { x: number; y: number };\n  // \"fixed\" for elements inside fixed/sticky ancestors: those don't translate\n  // on scroll, so their frame must not either (coords are viewport coords).\n  positioning: \"absolute\" | \"fixed\";\n  colorHex: string;\n  badgeLabel: string;\n  badgeAriaLabel: string;\n  isActive: boolean;\n  onBadgeClick: () => void;\n}\n\nconst badgeNodesById = new Map<string, HTMLButtonElement>();\nlet activeBadgeId: string | null = null;\n\nfunction badgeRestingTransform(id: string): string {\n  return id === activeBadgeId ? \"scale(1.15)\" : \"scale(1)\";\n}\n\n/**\n * Style-only selection update: rebuilding the node pool mid-interaction would\n * race the pointer sequence and swallow the click, so the active state never\n * re-renders \u2014 it just retargets transforms on the existing nodes.\n */\nexport function setActiveAnnotationBadge(id: string | null) {\n  activeBadgeId = id;\n  for (const [badgeId, badge] of badgeNodesById) {\n    badge.style.transform = badgeRestingTransform(badgeId);\n  }\n}\n\nexport function getAnnotationBadgeViewportRect(\n  id: string,\n): AnnotationRect | null {\n  const badge = badgeNodesById.get(id);\n  if (!badge?.isConnected) {\n    return null;\n  }\n  const rect = badge.getBoundingClientRect();\n  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };\n}\n\nfunction createFrameNode(spec: AnnotationFrameSpec): HTMLDivElement {\n  const frame = document.createElement(\"div\");\n  frame.style.cssText = [\n    `position: ${spec.positioning}`,\n    `left: ${spec.pageRect.x}px`,\n    `top: ${spec.pageRect.y}px`,\n    \"width: 0\",\n    \"height: 0\",\n    \"pointer-events: none\",\n    \"margin: 0\",\n    \"padding: 0\",\n  ].join(\";\");\n\n  const badge = document.createElement(\"button\");\n  badge.type = \"button\";\n  badge.setAttribute(\"aria-label\", spec.badgeAriaLabel);\n  badge.textContent = spec.badgeLabel;\n  badge.style.cssText = [\n    \"position: absolute\",\n    `left: ${spec.badgeCenter.x - spec.pageRect.x - BADGE_SIZE_PX / 2}px`,\n    `top: ${spec.badgeCenter.y - spec.pageRect.y - BADGE_SIZE_PX / 2}px`,\n    `width: ${BADGE_SIZE_PX}px`,\n    `height: ${BADGE_SIZE_PX}px`,\n    \"display: flex\",\n    \"align-items: center\",\n    \"justify-content: center\",\n    \"border: none\",\n    \"border-radius: 50%\",\n    `background: ${spec.colorHex}`,\n    \"color: #ffffff\",\n    `font: ${BADGE_FONT}`,\n    \"box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.18)\",\n    `transform: scale(${spec.isActive ? 1.15 : 1})`,\n    \"transition: transform 120ms ease-out\",\n    \"cursor: pointer\",\n    \"pointer-events: auto\",\n    \"margin: 0\",\n    \"padding: 0 0 1px 0\",\n  ].join(\";\");\n  badge.addEventListener(\"pointerdown\", () => {\n    badge.style.transform = \"scale(0.9)\";\n  });\n  badge.addEventListener(\"pointerup\", () => {\n    badge.style.transform = badgeRestingTransform(spec.id);\n  });\n  badge.addEventListener(\"pointerleave\", () => {\n    badge.style.transform = badgeRestingTransform(spec.id);\n  });\n  badge.addEventListener(\"click\", (event) => {\n    event.stopPropagation();\n    spec.onBadgeClick();\n  });\n\n  frame.append(badge);\n  badgeNodesById.set(spec.id, badge);\n  return frame;\n}\n\nexport function showAnnotationFrames({\n  frames,\n}: {\n  frames: AnnotationFrameSpec[];\n}) {\n  const container = getOrCreateFramesLayerContainer({\n    id: ANNOTATION_CONTAINER_ID,\n    zIndex: 2147483645,\n  });\n  if (!container) {\n    return;\n  }\n  ensureBadgeFont();\n  activeBadgeId = frames.find((spec) => spec.isActive)?.id ?? null;\n  badgeNodesById.clear();\n  container.replaceChildren(...frames.map((spec) => createFrameNode(spec)));\n}\n\nexport function clearAnnotationFrames() {\n  badgeNodesById.clear();\n  if (typeof document === \"undefined\") {\n    return;\n  }\n  document.getElementById(ANNOTATION_CONTAINER_ID)?.replaceChildren();\n}\n"],
+  "mappings": "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",
+  "names": []
+}