@agent-native/core 0.187.0 → 0.187.1-nightly-20260925003003

package/corpus/templates/design/app/pages/Present.tsx

@@ -67,6 +67,7 @@ export default function Present() {
   const location = useLocation();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const reviewEmbed = searchParams.get("reviewEmbed") === "1";
   const { session } = useSession();
   const [currentPage, setCurrentPage] = useState(0);
   const [commentMode, setCommentMode] = useState(false);
@@ -107,7 +108,7 @@ export default function Present() {
       newestFirst: true,
       limit: 500,
     },
-    { enabled: Boolean(id) },
+    { enabled: Boolean(id) && !reviewEmbed },
   );
   const canPost = Boolean(
     session?.email &&
@@ -164,6 +165,7 @@ export default function Present() {
   );
 
   useEffect(() => {
+    if (reviewEmbed) return;
     const commentId =
       reviewThreadIdFromHash(location.hash) ?? searchParams.get("comment");
     const comments = reviewQuery.data?.comments ?? [];
@@ -191,6 +193,7 @@ export default function Present() {
     handleReviewThreadSelect,
     reviewQuery.data?.comments,
     location.hash,
+    reviewEmbed,
     searchParams,
   ]);
 
@@ -198,10 +201,13 @@ export default function Present() {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === "Escape") {
-        const action = resolvePresentEscapeAction({
-          commentsOpen,
-          commentMode,
-        });
+        const action = resolvePresentEscapeAction(
+          {
+            commentsOpen,
+            commentMode,
+          },
+          reviewEmbed,
+        );
         if (action === "close-comments") setCommentsOpen(false);
         if (action === "exit-presentation") void navigate(`/design/${id}`);
         // ReviewCanvasPins owns "defer-to-comment-mode" so it can dismiss an
@@ -222,7 +228,7 @@ export default function Present() {
         setCurrentPage((p) => Math.max(p - 1, 0));
       }
     },
-    [commentMode, commentsOpen, files.length, id, navigate],
+    [commentMode, commentsOpen, files.length, id, navigate, reviewEmbed],
   );
 
   useEffect(() => {
@@ -276,88 +282,94 @@ export default function Present() {
           className="h-full w-full border-0"
           title={`${design.title} — ${activeFile.filename}`}
         />
-        <ReviewCanvasPins
-          active={commentMode}
-          onClose={() => setCommentMode(false)}
-          canvasSelector=".present-review-canvas"
-          resourceType="design"
-          resourceId={id}
-          targetId={activeFile.id}
-          canPost={canPost}
-          canResolve={canResolve}
-          currentUserEmail={session?.email}
-          focusRequest={reviewFocusRequest}
-        />
-      </div>
-
-      <div className="fixed right-4 top-4 z-[70] flex items-center gap-2">
-        <ReviewStatusBadge
-          status={reviewQuery.data?.reviewStatus?.status ?? "draft"}
-        />
-        <Button
-          type="button"
-          variant="secondary"
-          size="sm"
-          className="gap-1.5 rounded-full bg-black/75 text-white shadow-lg hover:bg-black"
-          onClick={() => {
-            setCommentMode(false);
-            setCommentsOpen(true);
-          }}
-        >
-          <IconMessageCircle className="size-4" />
-          {t("review.presentComments")}
-          {reviewCommentCount > 0 ? ` · ${reviewCommentCount}` : ""}
-        </Button>
+        {!reviewEmbed ? (
+          <ReviewCanvasPins
+            active={commentMode}
+            onClose={() => setCommentMode(false)}
+            canvasSelector=".present-review-canvas"
+            resourceType="design"
+            resourceId={id}
+            targetId={activeFile.id}
+            canPost={canPost}
+            canResolve={canResolve}
+            currentUserEmail={session?.email}
+            focusRequest={reviewFocusRequest}
+          />
+        ) : null}
       </div>
 
-      <Sheet open={commentsOpen} onOpenChange={setCommentsOpen}>
-        <SheetContent
-          side="right"
-          className="flex w-[min(92vw,380px)] flex-col overflow-hidden p-0"
-        >
-          <SheetHeader className="border-b border-border px-4 py-3">
-            <SheetTitle className="flex items-center gap-2 text-sm">
+      {!reviewEmbed ? (
+        <>
+          <div className="fixed right-4 top-4 z-[70] flex items-center gap-2">
+            <ReviewStatusBadge
+              status={reviewQuery.data?.reviewStatus?.status ?? "draft"}
+            />
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              className="gap-1.5 rounded-full bg-foreground/75 text-background shadow-lg hover:bg-foreground"
+              onClick={() => {
+                setCommentMode(false);
+                setCommentsOpen(true);
+              }}
+            >
               <IconMessageCircle className="size-4" />
               {t("review.presentComments")}
-            </SheetTitle>
-            <SheetDescription className="sr-only">
-              {t("review.commentsTitle")}
-            </SheetDescription>
-          </SheetHeader>
-          <ReviewCommentsPanel
-            designId={id}
-            canComment={canPost}
-            canResolve={canResolve}
-            currentTargetId={activeFile?.id ?? null}
-            currentUserEmail={session?.email}
-            canDeleteComment={(comment) =>
-              canResolve ||
-              ("canDelete" in comment && comment.canDelete === true) ||
-              comment.authorEmail === session?.email
-            }
-            signInHref={signInHref}
-            onSelectThread={handleReviewThreadSelect}
-            className="min-h-0 flex-1"
-          />
-          {canPost ? (
-            <div className="shrink-0 border-t border-border p-3">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="w-full gap-1.5"
-                onClick={() => {
-                  setCommentsOpen(false);
-                  setCommentMode(true);
-                }}
-              >
-                <IconMessageCircle className="size-3.5" />
-                {t("review.presentCommentMode")}
-              </Button>
-            </div>
-          ) : null}
-        </SheetContent>
-      </Sheet>
+              {reviewCommentCount > 0 ? ` · ${reviewCommentCount}` : ""}
+            </Button>
+          </div>
+
+          <Sheet open={commentsOpen} onOpenChange={setCommentsOpen}>
+            <SheetContent
+              side="right"
+              className="flex w-[min(92vw,380px)] flex-col overflow-hidden p-0"
+            >
+              <SheetHeader className="border-b border-border px-4 py-3">
+                <SheetTitle className="flex items-center gap-2 text-sm">
+                  <IconMessageCircle className="size-4" />
+                  {t("review.presentComments")}
+                </SheetTitle>
+                <SheetDescription className="sr-only">
+                  {t("review.commentsTitle")}
+                </SheetDescription>
+              </SheetHeader>
+              <ReviewCommentsPanel
+                designId={id}
+                canComment={canPost}
+                canResolve={canResolve}
+                currentTargetId={activeFile?.id ?? null}
+                currentUserEmail={session?.email}
+                canDeleteComment={(comment) =>
+                  canResolve ||
+                  ("canDelete" in comment && comment.canDelete === true) ||
+                  comment.authorEmail === session?.email
+                }
+                signInHref={signInHref}
+                onSelectThread={handleReviewThreadSelect}
+                className="min-h-0 flex-1"
+              />
+              {canPost ? (
+                <div className="shrink-0 border-t border-border p-3">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="w-full gap-1.5"
+                    onClick={() => {
+                      setCommentsOpen(false);
+                      setCommentMode(true);
+                    }}
+                  >
+                    <IconMessageCircle className="size-3.5" />
+                    {t("review.presentCommentMode")}
+                  </Button>
+                </div>
+              ) : null}
+            </SheetContent>
+          </Sheet>
+        </>
+      ) : null}
 
       {/* Page indicator */}
       {files.length > 1 && (
@@ -375,9 +387,11 @@ export default function Present() {
       )}
 
       {/* Exit hint */}
-      <div className="fixed left-4 top-4 text-xs text-white/20">
-        {t("pages.presentExitHint")}
-      </div>
+      {!reviewEmbed ? (
+        <div className="fixed left-4 top-4 text-xs text-foreground/20">
+          {t("pages.presentExitHint")}
+        </div>
+      ) : null}
     </div>
   );
 }

package/corpus/templates/design/app/pages/design-editor/clone-and-pen-edit.ts

@@ -25,7 +25,9 @@ import {
   penCornerRadiusFromAttribute,
   serializePenPath,
   serializePenNodes,
+  scalePenPathToGeometry,
   serializeRoundedPenPath,
+  translatePenPath,
   type PenPath,
 } from "@shared/pen-path";
 
@@ -259,6 +261,33 @@ export function writeBackVectorEditedPenPath(
   }
 }
 
+/** Axis-aligned scale plus the authored-to-screen-content translation. */
+function penPathScreenContentMapping(svg: SVGSVGElement): {
+  scaleX: number;
+  scaleY: number;
+  offset: { x: number; y: number };
+  viewBox: { x: number; y: number; width: number; height: number };
+} | null {
+  const viewBox = parseViewBox(svg.getAttribute("viewBox"));
+  const matrix = svg.getScreenCTM();
+  if (!viewBox || !matrix) return null;
+  if (
+    Math.abs(matrix.b) > 0.001 ||
+    Math.abs(matrix.c) > 0.001 ||
+    !(matrix.a > 0) ||
+    !(matrix.d > 0)
+  ) {
+    return null;
+  }
+  const view = svg.ownerDocument.defaultView;
+  const offset = {
+    x: matrix.a * viewBox.x + matrix.e + (view?.scrollX ?? 0) - viewBox.x,
+    y: matrix.d * viewBox.y + matrix.f + (view?.scrollY ?? 0) - viewBox.y,
+  };
+  if (!Number.isFinite(offset.x) || !Number.isFinite(offset.y)) return null;
+  return { scaleX: matrix.a, scaleY: matrix.d, offset, viewBox };
+}
+
 /**
  * Returns the translation between an SVG PenPath's authored coordinates and
  * its current screen-content position. Vector edit handles use screen-content
@@ -273,25 +302,57 @@ export function penPathScreenContentOffset(svg: SVGSVGElement): {
   x: number;
   y: number;
 } | null {
-  const viewBox = parseViewBox(svg.getAttribute("viewBox"));
-  const matrix = svg.getScreenCTM();
-  if (!viewBox || !matrix) return null;
+  const mapping = penPathScreenContentMapping(svg);
   if (
-    Math.abs(matrix.a - 1) > 0.001 ||
-    Math.abs(matrix.b) > 0.001 ||
-    Math.abs(matrix.c) > 0.001 ||
-    Math.abs(matrix.d - 1) > 0.001
+    !mapping ||
+    Math.abs(mapping.scaleX - 1) > 0.001 ||
+    Math.abs(mapping.scaleY - 1) > 0.001
   ) {
     return null;
   }
-  const view = svg.ownerDocument.defaultView;
-  const x = matrix.a * viewBox.x + matrix.c * viewBox.y + matrix.e;
-  const y = matrix.b * viewBox.x + matrix.d * viewBox.y + matrix.f;
-  const offset = {
-    x: x + (view?.scrollX ?? 0) - viewBox.x,
-    y: y + (view?.scrollY ?? 0) - viewBox.y,
+  return mapping.offset;
+}
+
+/**
+ * A drawn vector's nodes in screen-content space for vector edit. A resize or
+ * K-scale leaves the viewBox behind, so the SVG draws at a scale; scaling the
+ * nodes about the viewBox origin lets writeBackVectorEditedPenPath re-base the
+ * SVG at 1:1 on commit, where `sourceOffset` maps them back.
+ */
+export function penPathForVectorEdit(
+  svg: SVGSVGElement,
+  path: PenPath,
+  renderOffset: { x: number; y: number },
+): { path: PenPath; sourceOffset: { x: number; y: number } } | null {
+  const mapping = penPathScreenContentMapping(svg);
+  if (!mapping) return null;
+  const { viewBox, scaleX, scaleY } = mapping;
+  // Only the box-vs-viewBox stretch is re-based; a CSS transform survives
+  // write-back, so baking its scale into the nodes would apply it twice.
+  const boxStretchMatches = (scale: number, box: string, extent: number) => {
+    const size = parsePixelValue(box);
+    if (size === null) return false;
+    return extent === 0 || Math.abs(scale - size / extent) <= 0.001;
+  };
+  if (
+    !boxStretchMatches(scaleX, svg.style.width, viewBox.width) ||
+    !boxStretchMatches(scaleY, svg.style.height, viewBox.height)
+  ) {
+    return null;
+  }
+  const sourceOffset = {
+    x: mapping.offset.x - renderOffset.x,
+    y: mapping.offset.y - renderOffset.y,
+  };
+  const unscaled = scalePenPathToGeometry(path, viewBox, {
+    ...viewBox,
+    width: viewBox.width * scaleX,
+    height: viewBox.height * scaleY,
+  });
+  return {
+    path: translatePenPath(unscaled, sourceOffset.x, sourceOffset.y),
+    sourceOffset,
   };
-  return Number.isFinite(offset.x) && Number.isFinite(offset.y) ? offset : null;
 }
 
 /**

package/corpus/templates/design/app/pages/design-editor/commands/README.md

@@ -67,6 +67,7 @@ a module breaks those — re-point the spec in the same commit.
 | `screen-visual-style-change.ts`                     | Canvas style change addressed by explicit `screenId`                                |
 | `record-pending-visual-style-edit.ts`               | Record an uncommitted style gesture, stamped with breakpoint scope                  |
 | `change-selected-z-index.ts`                        | Raise or lower the selection's z-order                                              |
+| `swap-fill-stroke.ts`                               | Shift+X: swap fill and stroke, folding paint opacity into the colours               |
 
 ## Text
 

package/corpus/templates/design/app/pages/design-editor/commands/commit-relative-style-delta-to-selected-layers.ts

@@ -128,7 +128,7 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
     reportLinkedEditUnavailable,
     setSelectedElement,
   }: CommitRelativeStyleDeltaToSelectedLayersArgs,
-  property: string,
+  property: string | string[],
   operation: number | ScrubRelativeExpression,
   pendingUndoGestureId?: string,
 ) {
@@ -142,8 +142,37 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
       !effectiveLayerState.hiddenIds.has(target.layerId),
   );
   if (targets.length === 0) return false;
+  const properties = [
+    ...new Set(Array.isArray(property) ? property : [property]),
+  ];
+  if (properties.length === 0) return false;
+  const relativeStylesByTarget = new Map<
+    SelectedLayerTarget,
+    Record<string, string>
+  >();
+  const stylesForTarget = (target: SelectedLayerTarget) => {
+    const styles: Record<string, string> = {};
+    for (const property of properties) {
+      const writeProperty = property === "rotation" ? "transform" : property;
+      const currentValue =
+        property === "rotation"
+          ? (target.elementInfo.inlineStyles?.transform ??
+            target.elementInfo.computedStyles.transform)
+          : (target.elementInfo.computedStyles[
+              property as keyof typeof target.elementInfo.computedStyles
+            ] as string | undefined);
+      const nextValue =
+        property === "rotation"
+          ? applyRelativeRotationToTransform(currentValue, operation)
+          : typeof operation === "number"
+            ? applyRelativeDeltaToStyleValue(currentValue, operation)
+            : applyRelativeExpressionToStyleValue(currentValue, operation);
+      if (nextValue === null) return null;
+      styles[writeProperty] = nextValue;
+    }
+    return styles;
+  };
 
-  const writeProperty = property === "rotation" ? "transform" : property;
   const styleTargets: Array<{
     fileId: string;
     nodeId: string;
@@ -180,29 +209,18 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
       targetsResolved = false;
       return;
     }
-    const currentValue =
-      property === "rotation"
-        ? (target.elementInfo.inlineStyles?.transform ??
-          target.elementInfo.computedStyles.transform)
-        : (target.elementInfo.computedStyles[
-            property as keyof typeof target.elementInfo.computedStyles
-          ] as string | undefined);
-    const nextValue =
-      property === "rotation"
-        ? applyRelativeRotationToTransform(currentValue, operation)
-        : typeof operation === "number"
-          ? applyRelativeDeltaToStyleValue(currentValue, operation)
-          : applyRelativeExpressionToStyleValue(currentValue, operation);
-    if (nextValue === null) {
+    const styles = stylesForTarget(target);
+    if (!styles) {
       targetsResolved = false;
       return;
     }
+    relativeStylesByTarget.set(target, styles);
     if (linkedComponentRootForNode(node, projection))
       includesLinkedTarget = true;
     styleTargets.push({
       fileId: target.fileId,
       nodeId: node.dataAttributes["data-agent-native-node-id"] ?? "",
-      styles: { [writeProperty]: nextValue },
+      styles,
     });
   });
   if (includesLinkedTarget) {
@@ -293,7 +311,7 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
   });
 
   let appliedAny = false;
-  const appliedValueByLayerId = new Map<string, string>();
+  const appliedStylesByLayerId = new Map<string, Record<string, string>>();
   const acceptedNodeByLayerId = new Map<
     string,
     NonNullable<ReturnType<typeof mapAcceptedSelectionNode>>
@@ -312,20 +330,8 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
     let nextContent = baseContent;
     let projection = buildCodeLayerProjection(nextContent, { source });
     fileTargets.forEach((target) => {
-      const currentValue =
-        property === "rotation"
-          ? (target.elementInfo.inlineStyles?.transform ??
-            target.elementInfo.computedStyles.transform)
-          : (target.elementInfo.computedStyles[
-              property as keyof typeof target.elementInfo.computedStyles
-            ] as string | undefined);
-      const nextValue =
-        property === "rotation"
-          ? applyRelativeRotationToTransform(currentValue, operation)
-          : typeof operation === "number"
-            ? applyRelativeDeltaToStyleValue(currentValue, operation)
-            : applyRelativeExpressionToStyleValue(currentValue, operation);
-      if (nextValue === null) return;
+      const styles = relativeStylesByTarget.get(target);
+      if (!styles) return;
       const sourceId = bridgeSourceIdForCodeLayerNode(target.node);
       const selector = preferredCodeLayerSelector(target.node);
       const node =
@@ -336,22 +342,28 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
       if (!node) return;
       // §6.4 — relative-delta commits (mixed-value arrow steps) route
       // through the same breakpoint scoping as absolute commits.
-      const patch = applyScopedVisualStyleEdit({
-        content: nextContent,
-        target: { nodeId: node.id },
-        property: writeProperty,
-        value: nextValue,
-        source,
-        upperBoundPx: activeBreakpointUpperBoundPx,
-        lowerBoundPx:
-          responsiveEditScopeRef.current === "only"
-            ? activeBreakpointWidthStateRef.current
-            : null,
-      });
-      if (patch.result.status !== "applied") return;
-      nextContent = patch.content;
-      projection = patch.projection;
-      appliedValueByLayerId.set(target.layerId, nextValue);
+      let targetNextContent = nextContent;
+      let targetProjection = projection;
+      for (const [writeProperty, value] of Object.entries(styles)) {
+        const patch = applyScopedVisualStyleEdit({
+          content: targetNextContent,
+          target: { nodeId: node.id },
+          property: writeProperty,
+          value,
+          source,
+          upperBoundPx: activeBreakpointUpperBoundPx,
+          lowerBoundPx:
+            responsiveEditScopeRef.current === "only"
+              ? activeBreakpointWidthStateRef.current
+              : null,
+        });
+        if (patch.result.status !== "applied") return;
+        targetNextContent = patch.content;
+        targetProjection = patch.projection;
+      }
+      nextContent = targetNextContent;
+      projection = targetProjection;
+      appliedStylesByLayerId.set(target.layerId, styles);
     });
     if (nextContent === baseContent) return;
     appliedAny = true;
@@ -386,10 +398,10 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
 
   if (appliedAny) {
     const primaryTarget = targets[targets.length - 1];
-    const primaryValue = primaryTarget
-      ? appliedValueByLayerId.get(primaryTarget.layerId)
+    const primaryStyles = primaryTarget
+      ? appliedStylesByLayerId.get(primaryTarget.layerId)
       : undefined;
-    if (primaryTarget && primaryValue !== undefined) {
+    if (primaryTarget && primaryStyles !== undefined) {
       const acceptedPrimaryTarget = acceptedNodeByLayerId.get(
         primaryTarget.layerId,
       );
@@ -412,14 +424,15 @@ export function runCommitRelativeStyleDeltaToSelectedLayers(
           ...base,
           computedStyles: {
             ...base.computedStyles,
-            [writeProperty]: primaryValue,
+            ...primaryStyles,
           },
-          inlineStyles: patchAuthoredInlineStyles(base.inlineStyles, {
-            [writeProperty]: primaryValue,
-          }),
+          inlineStyles: patchAuthoredInlineStyles(
+            base.inlineStyles,
+            primaryStyles,
+          ),
           authoredSizeStyles: clearAuthoredSizeStylesForCommit(
             base.authoredSizeStyles,
-            { [writeProperty]: primaryValue },
+            primaryStyles,
           ),
         };
       });

package/corpus/templates/design/app/pages/design-editor/commands/mode-change.ts

@@ -34,6 +34,8 @@ export interface ModeChangeArgs {
   setMode: Dispatch<SetStateAction<EditorMode>>;
   setPinMode: Dispatch<SetStateAction<boolean>>;
   setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  overviewInteractScreenId: string | null;
+  setOverviewInteractScreenId: Dispatch<SetStateAction<string | null>>;
   t: (key: string, options?: Record<string, unknown>) => string;
   viewModeRef: RefObject<"single" | "overview">;
 }
@@ -56,6 +58,8 @@ export function runModeChange(
     setMode,
     setPinMode,
     setSelectedElement,
+    overviewInteractScreenId,
+    setOverviewInteractScreenId,
     t,
     viewModeRef,
   }: ModeChangeArgs,
@@ -94,14 +98,26 @@ export function runModeChange(
     viewMode: viewModeRef.current,
   });
   if (routing === "enter-single-interact") {
+    setOverviewInteractScreenId(nextActiveFile!.id);
     enterSingleScreen(nextActiveFile?.id);
     return;
   }
   if (routing === "enter-overview") {
+    setOverviewInteractScreenId(null);
     if (options?.targetFileId) setActiveFileId(options.targetFileId);
     enterOverviewFromZoom(next);
     return;
   }
+  if (next === "interact" && overviewInteractScreenId) {
+    setOverviewInteractScreenId(nextActiveFile!.id);
+    if (
+      options?.targetFileId &&
+      nextActiveFile!.id !== overviewInteractScreenId
+    ) {
+      enterSingleScreen(nextActiveFile!.id);
+      return;
+    }
+  }
   if (options?.targetFileId) setActiveFileId(options.targetFileId);
   setMode(next);
   setSelectedElement(null);

package/corpus/templates/design/app/pages/design-editor/commands/scale-selection.ts

@@ -1,5 +1,8 @@
 import type { ScaleAnchor } from "@/components/design/edit-panel/scale-properties";
-import { findCanvasIframeForScreen } from "@/components/design/multi-screen/iframe-targeting";
+import {
+  findCanvasIframeForScreen,
+  getBreakpointIframeId,
+} from "@/components/design/multi-screen/iframe-targeting";
 import type { ElementInfo } from "@/components/design/types";
 
 /**
@@ -11,6 +14,7 @@ export function runScaleSelection(
   args: {
     selectedElement: ElementInfo | null;
     boardFileId: string | null | undefined;
+    activeBreakpointWidthPx: number | undefined;
     fallbackIframe: HTMLIFrameElement | null;
   },
   factor: number,
@@ -19,14 +23,25 @@ export function runScaleSelection(
   const selector = args.selectedElement?.selector;
   if (!selector) return;
   const screenId = args.selectedElement?.sourceLayerIdentity?.screenId;
+  // While a breakpoint is being edited, its own frame holds the selection
+  // at that width; the screen's primary frame would scale the wrong size.
+  const breakpointIframe =
+    screenId && args.activeBreakpointWidthPx !== undefined
+      ? findCanvasIframeForScreen(
+          document.body,
+          getBreakpointIframeId(screenId, args.activeBreakpointWidthPx),
+        )
+      : null;
   const iframe =
+    breakpointIframe ??
     (screenId
       ? findCanvasIframeForScreen(
           document.body,
           screenId,
           args.boardFileId ?? undefined,
         )
-      : null) ?? args.fallbackIframe;
+      : null) ??
+    args.fallbackIframe;
   iframe?.contentWindow?.postMessage(
     {
       type: "agent-native:scale-selection",