@agent-native/core 0.92.7 → 0.92.8

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -1925,8 +1925,14 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     var persistentNodes = Array.prototype.slice.call(
       document.querySelectorAll("[data-agent-native-edit-overlay]"),
     );
-    var activeSelector =
-      preferredSelector || (selectedEl ? getSelector(selectedEl) : "");
+    // A forced whole-document replace is used for structural edits (duplicate,
+    // delete, cut/paste, undo/redo). Never fall back to the current selection
+    // in that mode: doing so activates the single-subtree fast path below,
+    // which can faithfully replace the selected node while silently omitting
+    // newly inserted or removed siblings elsewhere in the document.
+    var activeSelector = forceFullDocument
+      ? ""
+      : preferredSelector || (selectedEl ? getSelector(selectedEl) : "");
     var activeCandidates: string[] = [];
     if (Array.isArray(selectorCandidates)) {
       selectorCandidates.forEach(function (selector) {
@@ -8378,6 +8384,7 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
       target.removeEventListener("keyup", onSelectionChange, true);
       target.removeEventListener("mouseup", onSelectionChange, true);
       document.removeEventListener("selectionchange", onSelectionChange);
+      window.removeEventListener("blur", onWindowBlur, true);
       target.removeAttribute("contenteditable");
       target.removeAttribute("data-agent-native-text-editing");
       document.documentElement.removeAttribute(
@@ -8443,19 +8450,39 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     // Escape/blur would take, instead of only resetting activeTextEditEl.
     finishActiveTextEdit = finish;
 
-    function onBlur() {
-      if (programmaticTextEdit && !(target.textContent || "").trim()) {
-        window.setTimeout(function () {
-          if (committed || (target.textContent || "").trim()) return;
-          target.focus();
-          updateTextEditingChrome(target, originalMinWidth, originalMinHeight);
-          postTextEditingState(target, true);
-        }, 0);
-        return;
+    var emptyProgrammaticRefocusScheduled = false;
+    function refocusEmptyProgrammaticEdit() {
+      if (
+        emptyProgrammaticRefocusScheduled ||
+        !programmaticTextEdit ||
+        (target.textContent || "").trim()
+      ) {
+        return false;
       }
+      emptyProgrammaticRefocusScheduled = true;
+      window.setTimeout(function () {
+        emptyProgrammaticRefocusScheduled = false;
+        if (committed || (target.textContent || "").trim()) return;
+        target.focus();
+        updateTextEditingChrome(target, originalMinWidth, originalMinHeight);
+        postTextEditingState(target, true);
+      }, 0);
+      return true;
+    }
+
+    function onBlur() {
+      if (refocusEmptyProgrammaticEdit()) return;
       finish(true);
     }
 
+    // Moving focus from a child browsing context back to the host canvas does
+    // not consistently blur the iframe's activeElement in Chromium. Listen at
+    // the window boundary too so the newly created empty text field keeps the
+    // keyboard until the user types or explicitly exits.
+    function onWindowBlur() {
+      refocusEmptyProgrammaticEdit();
+    }
+
     function onKeyDown(ev) {
       // T3: bail out on IME composition input (e.g. CJK/Korean input method
       // candidate selection) so a composing Enter/Escape keystroke isn't
@@ -8525,6 +8552,7 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     target.addEventListener("keyup", onSelectionChange, true);
     target.addEventListener("mouseup", onSelectionChange, true);
     document.addEventListener("selectionchange", onSelectionChange);
+    window.addEventListener("blur", onWindowBlur, true);
     target.focus();
     if (programmaticTextEdit) {
       // The synthesized point sits at the (0×0) node's edge and resolves to the
@@ -8560,8 +8588,27 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     textTarget: HTMLElement,
     force: boolean,
   ): void {
-    // If we are already editing this element, do nothing.
-    if (activeTextEditEl && activeTextEditEl === textTarget) return;
+    // The host canvas can reclaim keyboard focus while React settles a newly
+    // created layer. In that case this document still reports the same
+    // activeElement even though its browsing context no longer has focus, so
+    // treating the session as already active makes every retry a no-op and the
+    // user's first keystroke hits host shortcuts. Re-focus the existing
+    // session instead of rebuilding it.
+    if (activeTextEditEl && activeTextEditEl === textTarget) {
+      if (document.activeElement !== textTarget || !document.hasFocus()) {
+        textTarget.focus();
+        try {
+          var refocusRange = document.createRange();
+          refocusRange.selectNodeContents(textTarget);
+          refocusRange.collapse(false);
+          var refocusSelection = window.getSelection();
+          refocusSelection.removeAllRanges();
+          refocusSelection.addRange(refocusRange);
+        } catch {}
+        postTextEditingState(textTarget, true);
+      }
+      return;
+    }
     // Synthesise coordinates at the end of the element content so the caret
     // lands at the insertion point (right after any placeholder text).
     var bteRect = textTarget.getBoundingClientRect();
@@ -9019,7 +9066,8 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
         );
         if (
           textEditStatusEditingEl &&
-          document.activeElement === textEditStatusEditingEl
+          document.activeElement === textEditStatusEditingEl &&
+          document.hasFocus()
         ) {
           textEditStatus = "active";
         } else if (

package/corpus/templates/design/app/components/design/bridge/embedded-wheel.bridge.ts

@@ -1,62 +1,300 @@
 /**
- * Embedded overview bridge — injected into every canvas iframe.
+ * Embedded canvas gesture bridge — injected into every canvas iframe.
  *
- * A screen preview is a real iframe, so normal wheel events never bubble to
- * the overview canvas underneath. In embedded mode we forward a bounded wheel
- * payload to the parent so the existing canvas wheel handler can pan/zoom
- * exactly as if the pointer were over empty canvas.
+ * A screen preview is a real iframe, so wheel and pointer-drag events never
+ * bubble to the canvas underneath. In embedded mode we forward bounded wheel
+ * payloads to the parent. In every canvas mode we also forward middle-button
+ * drags, plus left-button drags while the host's hand/Space tool is armed, so
+ * the parent can reuse its existing single/overview pan implementation.
  *
  * Runtime placeholder (replaced by DesignCanvas.tsx before injection):
  *   __EMBEDDED_WHEEL_FORWARDING_ENABLED__  — boolean literal "true"/"false"
+ *   __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__ — boolean literal; true only
+ *     when the editor-chrome bridge is absent (Interact mode)
  *
  * Protocol (iframe → parent, only when enabled):
  *
  *   { type: 'embedded-canvas-wheel', deltaX, deltaY, deltaZ, deltaMode,
  *     clientX, clientY, ctrlKey, metaKey, shiftKey, altKey }
  *
+ *   { type: 'embedded-canvas-pan', phase: 'start'|'move'|'end'|'cancel',
+ *     pointerId, button, buttons, clientX, clientY,
+ *     ctrlKey, metaKey, shiftKey, altKey }
+ *
+ * Protocol (parent → iframe):
+ *
+ *   { type: 'embedded-canvas-pan-mode', leftButtonEnabled }
+ *   { type: 'embedded-canvas-pan-cancel' }
+ *
  * Rules:
  *   • No import/require of any module (DOM globals only).
  *   • No references to outer/module scope (the code runs inside an iframe).
  *   • Wrap everything in a self-executing IIFE.
  */
 declare var __EMBEDDED_WHEEL_FORWARDING_ENABLED__: boolean;
+declare var __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__: boolean;
 
 (function () {
-  var enabled = __EMBEDDED_WHEEL_FORWARDING_ENABLED__;
-  if (!enabled) return;
+  var wheelEnabled = __EMBEDDED_WHEEL_FORWARDING_ENABLED__;
+  var spaceKeyForwardingEnabled = __EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__;
+  var leftButtonEnabled = false;
+  var temporarySpacePanEnabled = false;
+  var activePointerId: number | null = null;
+  var activeButton: 0 | 1 | null = null;
+  var captureTarget: Element | null = null;
+  var suppressClick = false;
+  var clearSuppressClickTimer: number | null = null;
+  var lastClientX = 0;
+  var lastClientY = 0;
+  var lastCtrlKey = false;
+  var lastMetaKey = false;
+  var lastShiftKey = false;
+  var lastAltKey = false;
+
   function clamp(value: number, limit: number): number {
     var number = Number(value) || 0;
     if (number > limit) return limit;
     if (number < -limit) return -limit;
     return number;
   }
-  function onWheel(e: WheelEvent): void {
+
+  function stopNativeInteraction(e: Event): void {
     e.preventDefault();
     e.stopPropagation();
     if (e.stopImmediatePropagation) e.stopImmediatePropagation();
+  }
+
+  function postToParent(message: Record<string, unknown>): void {
+    try {
+      (window.parent as Window).postMessage(message, "*");
+    } catch {}
+  }
+
+  function onWheel(e: WheelEvent): void {
+    if (!wheelEnabled) return;
+    stopNativeInteraction(e);
+    postToParent({
+      type: "embedded-canvas-wheel",
+      deltaX: clamp(e.deltaX, 240),
+      deltaY: clamp(e.deltaY, 240),
+      deltaZ: clamp(e.deltaZ, 240),
+      deltaMode: e.deltaMode,
+      clientX: clamp(e.clientX, 100000),
+      clientY: clamp(e.clientY, 100000),
+      ctrlKey: !!e.ctrlKey,
+      metaKey: !!e.metaKey,
+      shiftKey: !!e.shiftKey,
+      altKey: !!e.altKey,
+    });
+  }
+
+  function shouldStartPan(e: PointerEvent): boolean {
+    if (e.button === 1) return true;
+    return e.button === 0 && (leftButtonEnabled || temporarySpacePanEnabled);
+  }
+
+  function postPan(
+    phase: "start" | "move" | "end" | "cancel",
+    e: PointerEvent,
+  ): void {
+    if (activeButton === null) return;
+    lastClientX = clamp(e.clientX, 100000);
+    lastClientY = clamp(e.clientY, 100000);
+    lastCtrlKey = !!e.ctrlKey;
+    lastMetaKey = !!e.metaKey;
+    lastShiftKey = !!e.shiftKey;
+    lastAltKey = !!e.altKey;
+    postToParent({
+      type: "embedded-canvas-pan",
+      phase: phase,
+      pointerId: Math.max(0, Math.min(0x7fffffff, Math.trunc(e.pointerId))),
+      button: activeButton,
+      buttons: phase === "end" || phase === "cancel" ? 0 : e.buttons,
+      clientX: lastClientX,
+      clientY: lastClientY,
+      ctrlKey: lastCtrlKey,
+      metaKey: lastMetaKey,
+      shiftKey: lastShiftKey,
+      altKey: lastAltKey,
+    });
+  }
+
+  function releasePointerCapture(pointerId: number): void {
+    if (!captureTarget) return;
+    try {
+      if (captureTarget.hasPointerCapture(pointerId)) {
+        captureTarget.releasePointerCapture(pointerId);
+      }
+    } catch {}
+    captureTarget = null;
+  }
+
+  function scheduleClickSuppressionReset(): void {
+    if (clearSuppressClickTimer !== null) {
+      window.clearTimeout(clearSuppressClickTimer);
+    }
+    clearSuppressClickTimer = window.setTimeout(function () {
+      suppressClick = false;
+      clearSuppressClickTimer = null;
+    }, 0);
+  }
+
+  function onPointerDown(e: PointerEvent): void {
+    if (activePointerId !== null || !shouldStartPan(e)) return;
+    activePointerId = e.pointerId;
+    activeButton = e.button === 1 ? 1 : 0;
+    suppressClick = true;
+    captureTarget =
+      e.target instanceof Element ? e.target : document.documentElement;
     try {
-      (window.parent as Window).postMessage(
-        {
-          type: "embedded-canvas-wheel",
-          deltaX: clamp(e.deltaX, 240),
-          deltaY: clamp(e.deltaY, 240),
-          deltaZ: clamp(e.deltaZ, 240),
-          deltaMode: e.deltaMode,
-          clientX: e.clientX,
-          clientY: e.clientY,
-          ctrlKey: !!e.ctrlKey,
-          metaKey: !!e.metaKey,
-          shiftKey: !!e.shiftKey,
-          altKey: !!e.altKey,
-        },
-        "*",
-      );
-    } catch (_err) {}
+      captureTarget.setPointerCapture(e.pointerId);
+    } catch {}
+    stopNativeInteraction(e);
+    postPan("start", e);
   }
+
+  function onPointerMove(e: PointerEvent): void {
+    if (activePointerId !== e.pointerId || activeButton === null) return;
+    stopNativeInteraction(e);
+    postPan("move", e);
+  }
+
+  function finishPan(phase: "end" | "cancel", e: PointerEvent): void {
+    if (activePointerId !== e.pointerId || activeButton === null) return;
+    stopNativeInteraction(e);
+    postPan(phase, e);
+    releasePointerCapture(e.pointerId);
+    activePointerId = null;
+    activeButton = null;
+    scheduleClickSuppressionReset();
+  }
+
+  function onPointerUp(e: PointerEvent): void {
+    finishPan("end", e);
+  }
+
+  function onPointerCancel(e: PointerEvent): void {
+    finishPan("cancel", e);
+  }
+
+  function suppressTrailingClick(e: MouseEvent): void {
+    if (!suppressClick) return;
+    stopNativeInteraction(e);
+    suppressClick = false;
+    if (clearSuppressClickTimer !== null) {
+      window.clearTimeout(clearSuppressClickTimer);
+      clearSuppressClickTimer = null;
+    }
+  }
+
+  function isTypingTarget(target: EventTarget | null): boolean {
+    return !!(
+      target instanceof Element &&
+      target.closest(
+        'input, textarea, select, [contenteditable], [role="textbox"], [data-agent-native-text-editing]',
+      )
+    );
+  }
+
+  function onKeyDown(e: KeyboardEvent): void {
+    if (
+      !spaceKeyForwardingEnabled ||
+      e.key !== " " ||
+      e.code !== "Space" ||
+      e.metaKey ||
+      e.ctrlKey ||
+      e.altKey ||
+      e.shiftKey ||
+      isTypingTarget(e.target)
+    ) {
+      return;
+    }
+    temporarySpacePanEnabled = true;
+    stopNativeInteraction(e);
+    if (e.repeat) return;
+    postToParent({
+      type: "design-hotkey",
+      key: e.key,
+      code: e.code,
+      metaKey: false,
+      ctrlKey: false,
+      shiftKey: false,
+      altKey: false,
+      repeat: false,
+    });
+  }
+
+  function onKeyUp(e: KeyboardEvent): void {
+    if (!spaceKeyForwardingEnabled || e.key !== " " || e.code !== "Space") {
+      return;
+    }
+    var wasTemporarySpacePanEnabled = temporarySpacePanEnabled;
+    temporarySpacePanEnabled = false;
+    if (!wasTemporarySpacePanEnabled && isTypingTarget(e.target)) return;
+    stopNativeInteraction(e);
+    postToParent({ type: "design-hotkey-up", key: e.key, code: e.code });
+  }
+
+  function onHostMessage(e: MessageEvent): void {
+    if (e.source !== window.parent) return;
+    if (!e.data) return;
+    if (e.data.type === "embedded-canvas-pan-cancel") {
+      cancelActivePan();
+      return;
+    }
+    if (e.data.type === "embedded-canvas-pan-mode") {
+      leftButtonEnabled = !!e.data.leftButtonEnabled;
+    }
+  }
+
+  function cancelActivePan(): void {
+    temporarySpacePanEnabled = false;
+    if (activePointerId === null || activeButton === null) return;
+    var pointerId = activePointerId;
+    postToParent({
+      type: "embedded-canvas-pan",
+      phase: "cancel",
+      pointerId: pointerId,
+      button: activeButton,
+      buttons: 0,
+      clientX: lastClientX,
+      clientY: lastClientY,
+      ctrlKey: lastCtrlKey,
+      metaKey: lastMetaKey,
+      shiftKey: lastShiftKey,
+      altKey: lastAltKey,
+    });
+    releasePointerCapture(pointerId);
+    activePointerId = null;
+    activeButton = null;
+    suppressClick = false;
+  }
+
+  function onWindowBlur(): void {
+    // Moving focus from an iframe gesture into the parent canvas can blur the
+    // child window while the top-level Design window is still active. The
+    // parent separately sends embedded-canvas-pan-cancel on a real top-level
+    // blur; this local guard handles page/tab hiding without killing that
+    // intentional in-app focus transfer.
+    if (document.visibilityState === "hidden") cancelActivePan();
+  }
+
   var wheelTarget: EventTarget =
     document.documentElement || document.body || document;
   wheelTarget.addEventListener("wheel", onWheel as EventListener, {
     passive: false,
     capture: true,
   });
+  document.addEventListener("pointerdown", onPointerDown, true);
+  document.addEventListener("pointermove", onPointerMove, true);
+  document.addEventListener("pointerup", onPointerUp, true);
+  document.addEventListener("pointercancel", onPointerCancel, true);
+  document.addEventListener("click", suppressTrailingClick, true);
+  document.addEventListener("auxclick", suppressTrailingClick, true);
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("keyup", onKeyUp, true);
+  window.addEventListener("message", onHostMessage);
+  window.addEventListener("blur", onWindowBlur);
+  document.addEventListener("visibilitychange", onWindowBlur);
+  window.addEventListener("pagehide", cancelActivePan);
 })();

package/corpus/templates/design/app/components/design/design-canvas/annotation-submit.ts

@@ -0,0 +1,34 @@
+interface SubmitDesignAnnotationsOptions {
+  message: string;
+  hasQueuedPins: boolean;
+  send: (message: string) => void;
+  markQueuedPinsSubmitted: () => void;
+  exitDrawMode: () => void;
+  onError: (error: unknown) => void;
+}
+
+/**
+ * Submit a drawing/comment batch as one atomic UI transition.
+ *
+ * The overlay and queued pins must remain intact when chat handoff fails so the
+ * user can retry without recreating their annotation work.
+ */
+export function submitDesignAnnotations({
+  message,
+  hasQueuedPins,
+  send,
+  markQueuedPinsSubmitted,
+  exitDrawMode,
+  onError,
+}: SubmitDesignAnnotationsOptions): boolean {
+  try {
+    send(message);
+  } catch (error) {
+    onError(error);
+    return false;
+  }
+
+  if (hasQueuedPins) markQueuedPinsSubmitted();
+  exitDrawMode();
+  return true;
+}

package/corpus/templates/design/app/components/design/design-canvas/coordinate-transforms.ts

@@ -0,0 +1,40 @@
+/**
+ * Converts a viewport point into the iframe's unscaled content coordinates.
+ */
+export function getScreenContentPointFromClient(
+  clientX: number,
+  clientY: number,
+  iframeRect: { left: number; top: number; width: number; height: number },
+  iframeContentSize: { width: number; height: number },
+): { x: number; y: number } {
+  const scaleX =
+    iframeContentSize.width > 0
+      ? iframeRect.width / iframeContentSize.width
+      : 1;
+  const scaleY =
+    iframeContentSize.height > 0
+      ? iframeRect.height / iframeContentSize.height
+      : 1;
+  return {
+    x: (clientX - iframeRect.left) / (scaleX || 1),
+    y: (clientY - iframeRect.top) / (scaleY || 1),
+  };
+}
+
+/**
+ * Computes the scroll delta needed to keep a viewport point anchored while
+ * zooming a top-left-origin canvas layer.
+ */
+export function getZoomToCursorScrollDelta(
+  anchorClient: { x: number; y: number },
+  containerRect: { left: number; top: number },
+  scrollOffset: { scrollLeft: number; scrollTop: number },
+  zoomRatio: number,
+): { dx: number; dy: number } {
+  const cx = anchorClient.x - containerRect.left + scrollOffset.scrollLeft;
+  const cy = anchorClient.y - containerRect.top + scrollOffset.scrollTop;
+  return {
+    dx: cx * (zoomRatio - 1),
+    dy: cy * (zoomRatio - 1),
+  };
+}

package/corpus/templates/design/app/components/design/design-canvas/creation.ts

@@ -0,0 +1,47 @@
+import type { PenPath } from "@shared/pen-path";
+
+export type CreationTool =
+  | "rectangle"
+  | "ellipse"
+  | "line"
+  | "arrow"
+  | "text"
+  | "pen"
+  | "frame";
+
+export interface CreatePrimitiveSpec {
+  tool: CreationTool;
+  rect?: { x: number; y: number; width: number; height: number };
+  points?: Array<{ x: number; y: number }>;
+  /** Structured pen geometry, including Bezier handles and closed state. */
+  penPath?: PenPath;
+  fromClick: boolean;
+  /** Commit an in-progress pen path without overriding a newly chosen tool. */
+  preserveActiveTool?: boolean;
+}
+
+/**
+ * A browser double-click is two complete pointer gestures followed by a
+ * `dblclick` event. Both gestures therefore add the final pen anchor before
+ * the overlay commits. Collapse only the coincident trailing pair, retaining
+ * the anchor from the second gesture so the final clicked point is never
+ * omitted from the committed path.
+ */
+export function collapseDoubleClickPenAnchor(path: PenPath): PenPath {
+  const last = path.nodes[path.nodes.length - 1];
+  const previous = path.nodes[path.nodes.length - 2];
+  if (
+    !last ||
+    !previous ||
+    Math.hypot(
+      last.point.x - previous.point.x,
+      last.point.y - previous.point.y,
+    ) > 0.5
+  ) {
+    return path;
+  }
+  return {
+    nodes: [...path.nodes.slice(0, -2), last],
+    closed: false,
+  };
+}

package/corpus/templates/design/app/components/design/design-canvas/element-payload.ts

@@ -0,0 +1,27 @@
+import type { ElementInfo } from "../types";
+
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function isFiniteRect(value: unknown): value is ElementInfo["boundingRect"] {
+  if (!isPlainRecord(value)) return false;
+  return (
+    Number.isFinite(value.x) &&
+    Number.isFinite(value.y) &&
+    Number.isFinite(value.width) &&
+    Number.isFinite(value.height)
+  );
+}
+
+export function isElementInfoPayload(value: unknown): value is ElementInfo {
+  if (!isPlainRecord(value)) return false;
+  return (
+    typeof value.tagName === "string" &&
+    Array.isArray(value.classes) &&
+    isPlainRecord(value.computedStyles) &&
+    isFiniteRect(value.boundingRect) &&
+    typeof value.isFlexChild === "boolean" &&
+    typeof value.isFlexContainer === "boolean"
+  );
+}

package/corpus/templates/design/app/components/design/design-canvas/embedded-frame.ts

@@ -0,0 +1,62 @@
+const TRANSPARENT_EMBEDDED_FRAME_STYLE =
+  "<style data-agent-native-transparent-frame>html,body{background:transparent!important;}body{background-color:transparent!important;}</style>";
+
+function embeddedFrameBackgroundStyle(background: string | undefined): string {
+  const trimmed = background?.trim();
+  if (!trimmed || /[;{}<>]/.test(trimmed)) return "";
+  return `<style data-agent-native-frame-background>html,body{background:${trimmed}!important;}body{background-color:${trimmed}!important;}</style>`;
+}
+
+export function getEmbeddedFrameBackgroundStyle(args: {
+  embeddedFrameBackground?: string;
+  transparentBackground?: boolean;
+}): string {
+  return args.transparentBackground
+    ? TRANSPARENT_EMBEDDED_FRAME_STYLE
+    : embeddedFrameBackgroundStyle(args.embeddedFrameBackground);
+}
+
+export function getEmbeddedIframeBackgroundColor(args: {
+  embeddedFrameBackground?: string;
+  transparentBackground?: boolean;
+}): string {
+  return args.transparentBackground
+    ? "transparent"
+    : (args.embeddedFrameBackground ?? "transparent");
+}
+
+export function embeddedContentOffsetStyle(x: number, y: number): string {
+  if (x === 0 && y === 0) return "";
+  return `<style data-agent-native-content-offset>body > [data-agent-native-node-id]{translate:${Math.round(x)}px ${Math.round(y)}px;}</style>`;
+}
+
+function injectEmbeddedFrameStyle(content: string, style: string): string {
+  if (!style) return content;
+  if (/<\/head>/i.test(content)) {
+    return content.replace(/<\/head>/i, `${style}</head>`);
+  }
+  if (/<body\b/i.test(content)) {
+    return content.replace(/<body\b/i, `${style}<body`);
+  }
+  return `${style}${content}`;
+}
+
+export function getEmbeddedFrameDocumentContent(args: {
+  content: string;
+  embeddedFrameBackground?: string;
+  transparentBackground?: boolean;
+  contentOffsetX?: number;
+  contentOffsetY?: number;
+}): string {
+  const frameStyle = [
+    getEmbeddedFrameBackgroundStyle({
+      embeddedFrameBackground: args.embeddedFrameBackground,
+      transparentBackground: args.transparentBackground,
+    }),
+    embeddedContentOffsetStyle(
+      args.contentOffsetX ?? 0,
+      args.contentOffsetY ?? 0,
+    ),
+  ].join("");
+  return injectEmbeddedFrameStyle(args.content, frameStyle);
+}