@agent-native/core 0.93.0 → 0.94.1

package/corpus/templates/design/.agents/skills/design-systems/SKILL.md

@@ -248,10 +248,27 @@ notes, then pass that summary to `index-design-system-with-builder` as an
 uploaded text context file. Do not build a local design system from the Figma
 summary unless the user explicitly asks for a manual local fallback.
 
-**When the user uploads a raw `.fig` file**, send it to Builder design-system
-indexing through the setup page upload route. Do not parse `.fig` files locally
-and do not call `create-design-system` from raw `.fig` output; Builder owns the
-indexed brand kit, generated docs, and usage guidance.
+**When the user uploads a raw `.fig` file on the Design System Setup page**,
+send it to Builder design-system indexing through the setup page upload route.
+Do not parse `.fig` files locally for this flow and do not call
+`create-design-system` from raw `.fig` output; Builder owns the indexed brand
+kit, generated docs, and usage guidance. This is unchanged and is specifically
+about **token/brand-kit extraction**.
+
+**When the user uploads a raw `.fig` file in the Design editor's Import panel**
+(not Design System Setup), it takes a different, narrower path: the server
+decodes the container/Kiwi document locally (`fig-file-decoder.ts`) and maps
+its `NodeChange` tree to editable HTML screens (`fig-file-to-html.ts`,
+`fig-file-import.ts`) through the same `saveImportedDesignFiles` path as other
+Design imports — no Builder connection required. This is explicitly scoped to
+**screens only**, not tokens: it does not create or update a design system, and
+it is separate from (and does not reopen) the Design System Setup `.fig`
+upload above. Treat it as experimental — the `.fig` container is a proprietary,
+undocumented format, so unsupported node types, geometry, or schema variants
+fail closed with an explicit warning/placeholder rather than a silent
+approximation. Read the returned `fidelityReport` (`stats`, `warnings`) back to
+the user, and see `FIGMA_INTEROPERABILITY.md`'s "`.fig` upload" row for the
+current fidelity contract and required verification corpus.
 
 **When the user wants a Figma Assets-style native component drawer inside
 Design**, do not use Figma or media assets. Use `list-design-native-assets` to

package/corpus/templates/design/AGENTS.md

@@ -89,6 +89,13 @@ patterns live in `.agents/skills/`.
   consult `FIGMA_INTEROPERABILITY.md` for the feature-level fidelity contract,
   fallback rules, scale limits, and real-file golden corpus. See the
   `design-systems` skill's "Import from Figma" section.
+- Uploading a raw `.fig` file in the Design editor's Import panel decodes the
+  container/Kiwi document locally into editable screens — no Builder
+  connection needed — and is scoped to screens only; it never creates or
+  updates a design system. This is separate from uploading `.fig` on the
+  Design System Setup page, which still indexes tokens/brand-kit data through
+  Builder and does not parse `.fig` locally. See the `design-systems` skill
+  for both paths.
 - A current Figma Cmd+C clipboard includes exact selected node ids in
   `figmeta.selectedNodeData`; `import-figma-clipboard` uses those before any
   heuristic matching and supports multi-selection. Clipboard metadata is not a

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -912,6 +912,25 @@ function contentHash(value: string): string {
   return `${value.length}:${hash >>> 0}`;
 }
 
+const SCRIPT_ELEMENT_RE = /<script\b[^>]*>[\s\S]*?<\/script\s*>/gi; // i18n-ignore non-UI regex
+
+/**
+ * Runtime document replacement uses `head.innerHTML` / `body.innerHTML`, which
+ * intentionally preserves the iframe browsing context but cannot execute
+ * newly inserted or changed scripts. Reload only when source script elements
+ * change; ordinary markup/style edits continue through the no-flash bridge.
+ */
+function runtimeDocumentNeedsReload(
+  previousContent: string,
+  nextContent: string,
+): boolean {
+  const scriptSignature = (html: string) =>
+    Array.from(html.matchAll(SCRIPT_ELEMENT_RE), (match) => match[0]).join(
+      "\n",
+    );
+  return scriptSignature(previousContent) !== scriptSignature(nextContent);
+}
+
 /**
  * Safely reads an embedded screen iframe's own internal document scroll
  * position, in the iframe's own unscaled content pixels — the same units
@@ -1053,6 +1072,11 @@ export function DesignCanvas({
   const runtimeReplacementContentRef = useRef(runtimeReplacementContent);
   const runtimeReplacementKeyRef = useRef(runtimeReplacementKey);
   const lastRuntimeReplacementKeyRef = useRef(runtimeReplacementKey);
+  // The key also includes updatedAt, so a save acknowledgement can change it
+  // while the rendered bytes are identical. Track the bytes separately to
+  // avoid a redundant forced document replacement that would terminate an
+  // in-progress text edit/caret after every save echo.
+  const lastRuntimeReplacementContentRef = useRef(runtimeReplacementContent);
   // Bridge-ready handshake (see EDITOR_CHROME_BRIDGE_SCRIPT's
   // agent-native:editor-chrome-ready post on install). One-shot commands —
   // begin-text-edit, set-editor-chrome-scale, style-change, delete-element,
@@ -1906,6 +1930,7 @@ export function DesignCanvas({
     if (previousContentKeyRef.current !== contentKey) {
       previousContentKeyRef.current = contentKey;
       lastRuntimeReplacementKeyRef.current = runtimeReplacementKey;
+      lastRuntimeReplacementContentRef.current = runtimeReplacementContent;
       // A content-key change rebuilds srcdoc, which reloads the iframe with a
       // brand-new document. The previous document's ready handshake (and any
       // one-shot commands still queued against it) no longer apply — reset
@@ -1922,7 +1947,7 @@ export function DesignCanvas({
     // reloads the iframe, flashes unstyled content, and drops selection. Only a
     // content-key change (screen switch / explicit remount) should replace the
     // iframe document here; the bridge replays inspector state after that load.
-  }, [content, contentKey, runtimeReplacementKey]);
+  }, [content, contentKey, runtimeReplacementContent, runtimeReplacementKey]);
 
   usePinchZoom({
     containerRef: scrollContainerRef,
@@ -2104,11 +2129,25 @@ export function DesignCanvas({
     waitingForLiveEditBridge,
   ]);
 
+  // PERF (soak measurement 2): contentHash walks the full srcdoc string
+  // char-by-char. `srcdoc` is already memoized above, but this call site
+  // was NOT — so every board-wide re-render (e.g. `renderScreenContent`'s
+  // identity churns on any screen's hover/selection change, invalidating
+  // every screen's cached content node — see MultiScreenCanvas.tsx's PF21
+  // comment) re-hashed every unaffected screen's full content again, with
+  // cost scaling with total board content rather than the actual edit.
+  // Profiling a 10-click selection sequence over a 31-screen board (one
+  // screen with ~30KB of HTML) showed `contentHash` alone consuming
+  // 300-2300ms of self time depending on board content size, and was the
+  // single largest named JS contributor to the resulting 300-600ms
+  // long tasks. Memoizing on the (already-stable) `srcdoc` reference
+  // makes unrelated re-renders skip this entirely.
+  const srcdocHash = useMemo(() => contentHash(srcdoc ?? ""), [srcdoc]);
   const iframeDocumentIdentity = externalPreviewUrl
     ? `src:${externalPreviewUrl}`
     : waitingForLiveEditBridge
       ? `live-edit-pending:${liveEditBridgeKey}`
-      : `srcdoc:${contentKey ?? ""}:${contentHash(srcdoc ?? "")}`;
+      : `srcdoc:${contentKey ?? ""}:${srcdocHash}`;
   if (previousIframeDocumentIdentityRef.current !== iframeDocumentIdentity) {
     previousIframeDocumentIdentityRef.current = iframeDocumentIdentity;
     bridgeReadyRef.current = false;
@@ -3443,7 +3482,10 @@ export function DesignCanvas({
       nextContent: string,
       selector?: string | null,
       candidates?: string[],
-      options?: { forceFullDocument?: boolean },
+      options?: {
+        forceFullDocument?: boolean;
+        preserveTextEditingSession?: boolean;
+      },
     ) => {
       const iframe = iframeRef.current;
       if (!iframe?.contentWindow) return false;
@@ -3453,11 +3495,41 @@ export function DesignCanvas({
         selectedSelector: selector ?? "",
         selectorCandidates: candidates ?? [],
         forceFullDocument: options?.forceFullDocument === true,
+        preserveTextEditingSession:
+          options?.preserveTextEditingSession === true,
       });
     },
     [postOneShotBridgeMessage],
   );
 
+  const replacePreviewContentFromHost = useCallback(
+    (
+      nextContent: string,
+      selector?: string | null,
+      candidates?: string[],
+      options?: {
+        forceFullDocument?: boolean;
+        preserveTextEditingSession?: boolean;
+      },
+    ) => {
+      const replaced = replacePreviewContent(
+        nextContent,
+        selector,
+        candidates,
+        options,
+      );
+      if (replaced) {
+        // The orchestrator applied these exact bytes imperatively before the
+        // React props carrying their new runtimeReplacementKey rendered.
+        // Remember them so that render can acknowledge the new key without
+        // applying the same forced replacement a second time.
+        lastRuntimeReplacementContentRef.current = nextContent;
+      }
+      return replaced;
+    },
+    [replacePreviewContent],
+  );
+
   const replaceRuntimeContentInPlace = useCallback(
     (nextContent: string) => {
       if (externalPreviewUrl) return false;
@@ -3471,7 +3543,13 @@ export function DesignCanvas({
         }),
         null,
         [],
-        { forceFullDocument: true },
+        {
+          forceFullDocument: true,
+          // Prop/save echoes are synchronization, not a user command. If a
+          // text draft is active, buffer the newest generation until commit
+          // instead of tearing down its caret mid-keystroke.
+          preserveTextEditingSession: true,
+        },
       );
     },
     [
@@ -3492,11 +3570,39 @@ export function DesignCanvas({
     ) {
       return;
     }
+    if (
+      lastRuntimeReplacementContentRef.current === runtimeReplacementContent
+    ) {
+      lastRuntimeReplacementKeyRef.current = runtimeReplacementKey;
+      return;
+    }
+    const previousRuntimeContent =
+      lastRuntimeReplacementContentRef.current ?? renderedContent;
+    if (
+      runtimeDocumentNeedsReload(
+        previousRuntimeContent,
+        runtimeReplacementContent,
+      )
+    ) {
+      // `replaceRuntimeDocument` cannot execute scripts introduced through
+      // innerHTML. A real srcdoc rebuild is required for transitions such as a
+      // static variant becoming an Alpine app with `body[x-cloak]`; otherwise
+      // Alpine never starts and the entire editable canvas remains hidden
+      // while Interact mode (which does reload) appears to work.
+      lastRuntimeReplacementKeyRef.current = runtimeReplacementKey;
+      lastRuntimeReplacementContentRef.current = runtimeReplacementContent;
+      bridgeReadyRef.current = false;
+      pendingOneShotMessagesRef.current = [];
+      setRenderedContent(runtimeReplacementContent);
+      return;
+    }
     if (replaceRuntimeContentInPlace(runtimeReplacementContent)) {
       lastRuntimeReplacementKeyRef.current = runtimeReplacementKey;
+      lastRuntimeReplacementContentRef.current = runtimeReplacementContent;
     }
   }, [
     replaceRuntimeContentInPlace,
+    renderedContent,
     runtimeReplacementContent,
     runtimeReplacementKey,
   ]);
@@ -3511,6 +3617,7 @@ export function DesignCanvas({
       if (nextContent === undefined) return;
       if (replaceRuntimeContentInPlace(nextContent)) {
         lastRuntimeReplacementKeyRef.current = runtimeReplacementKeyRef.current;
+        lastRuntimeReplacementContentRef.current = nextContent;
       }
     };
     iframe.addEventListener("load", replaceLatestRuntimeContent);
@@ -3537,7 +3644,8 @@ export function DesignCanvas({
     (window as any).__designCanvasSendStyle = sendStyleChange;
     (window as any).__designCanvasSendInteractionStatePreviewStyle =
       sendInteractionStatePreviewStyle;
-    (window as any).__designCanvasReplaceContent = replacePreviewContent;
+    (window as any).__designCanvasReplaceContent =
+      replacePreviewContentFromHost;
     (window as any).__designCanvasDeleteElement = deleteRuntimeElement;
     (window as any).__designCanvasSendMotionPreview = sendMotionPreview;
     (window as any).__designCanvasClearMotionPreview = clearMotionPreview;
@@ -3561,7 +3669,8 @@ export function DesignCanvas({
         delete (window as any).__designCanvasSendInteractionStatePreviewStyle;
       }
       if (
-        (window as any).__designCanvasReplaceContent === replacePreviewContent
+        (window as any).__designCanvasReplaceContent ===
+        replacePreviewContentFromHost
       ) {
         delete (window as any).__designCanvasReplaceContent;
       }
@@ -3599,7 +3708,7 @@ export function DesignCanvas({
   }, [
     deleteRuntimeElement,
     registerRuntimeBridge,
-    replacePreviewContent,
+    replacePreviewContentFromHost,
     sendStyleChange,
     sendInteractionStatePreviewStyle,
     sendMotionPreview,
@@ -3698,6 +3807,21 @@ export function DesignCanvas({
     [handToolActive, spacePanActive],
   );
 
+  // Clicking the empty grey canvas background deselects the current element.
+  // Preview-iframe clicks never bubble to the parent document (that path uses
+  // postMessage → onClearSelection), so a plain left click that reaches this
+  // scroll surface means the user clicked outside the framed preview.
+  const handleScrollSurfaceBackgroundClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.button !== 0) return;
+      if (handToolActive || spacePanActive) return;
+      const target = e.target as HTMLElement | null;
+      if (target?.closest(".design-canvas-iframe-wrapper")) return;
+      onClearSelection?.();
+    },
+    [handToolActive, spacePanActive, onClearSelection],
+  );
+
   const panCursor = isPanningState
     ? "grabbing"
     : handToolActive || spacePanActive
@@ -4248,6 +4372,7 @@ export function DesignCanvas({
       onPointerEnter={focusScrollSurface}
       onMouseEnter={focusScrollSurface}
       onMouseDown={handleScrollSurfaceMouseDown}
+      onClick={handleScrollSurfaceBackgroundClick}
       className="relative flex-1 h-full overflow-auto"
       style={{ cursor: panCursor || undefined }}
     >

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -297,6 +297,7 @@ import {
   getLayerSelectableBounds,
   getOutsideFrameDraftFallback,
   getPreviewDeviceFrameGeometry,
+  getResponsiveScreenCullGeometry,
   getScreenPreviewViewport,
   getSelectableBounds,
   rectContainsPoint,
@@ -1293,6 +1294,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         id: screen.id,
         metadata: getResolvedMetadata(screen),
         breakpointWidths: screen.breakpointWidths,
+        layoutGroupId: screen.layoutGroupId,
       })),
       currentGeometryById: frameGeometryRef.current,
       persistedGeometryById: geometryById,
@@ -6467,23 +6469,76 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   useEffect(() => {
     if (!cameraCommand) return;
     if (lastCameraCommandNonceRef.current === cameraCommand.nonce) return;
-    lastCameraCommandNonceRef.current = cameraCommand.nonce;
-    const rect = surfaceRef.current?.getBoundingClientRect();
-    if (!rect || rect.width <= 0 || rect.height <= 0) return;
-    const camera = getCameraForBounds(
-      cameraCommand.fitBounds,
-      { width: rect.width, height: rect.height },
-      {
-        paddingScreenPx: cameraCommand.paddingScreenPx ?? 64,
-        minZoom: MIN_ZOOM,
-        maxZoom: MAX_ZOOM,
-        fallbackZoom: zoomRef.current,
-      },
-    );
-    zoomRef.current = camera.zoom;
-    panRef.current = { x: camera.x, y: camera.y };
-    applyViewToDom();
-    scheduleViewCommit();
+
+    let cancelled = false;
+    let retryFrame: number | null = null;
+    let retryCount = 0;
+    let resizeObserver: ResizeObserver | null = null;
+    const maxMeasureRetries = 30;
+
+    const applyPendingCameraCommand = () => {
+      if (
+        cancelled ||
+        lastCameraCommandNonceRef.current === cameraCommand.nonce
+      ) {
+        return true;
+      }
+      const rect = surfaceRef.current?.getBoundingClientRect();
+      if (!rect || rect.width <= 0 || rect.height <= 0) return false;
+      const camera = getCameraForBounds(
+        cameraCommand.fitBounds,
+        { width: rect.width, height: rect.height },
+        {
+          paddingScreenPx: cameraCommand.paddingScreenPx ?? 64,
+          // Frame geometry is canvas-space, while every frame DOM node lives
+          // inside the padded world. Include that shared origin so fitting a
+          // small drawn/preset frame actually centers its painted card.
+          canvasPadding: SURFACE_PADDING,
+          minZoom: MIN_ZOOM,
+          maxZoom: MAX_ZOOM,
+          fallbackZoom: zoomRef.current,
+        },
+      );
+      zoomRef.current = camera.zoom;
+      panRef.current = { x: camera.x, y: camera.y };
+      applyViewToDom();
+      scheduleViewCommit();
+      // A nonce is acknowledged only after a measurable surface accepted the
+      // imperative camera commit. Consuming it before this point loses the
+      // command during the brief zero-size overview remount caused by active
+      // screen URL synchronization.
+      lastCameraCommandNonceRef.current = cameraCommand.nonce;
+      resizeObserver?.disconnect();
+      return true;
+    };
+
+    const scheduleMeasureRetry = () => {
+      if (cancelled || retryFrame !== null || retryCount >= maxMeasureRetries) {
+        return;
+      }
+      retryFrame = window.requestAnimationFrame(() => {
+        retryFrame = null;
+        retryCount += 1;
+        if (!applyPendingCameraCommand()) scheduleMeasureRetry();
+      });
+    };
+
+    if (!applyPendingCameraCommand()) {
+      scheduleMeasureRetry();
+      const surface = surfaceRef.current;
+      if (surface && typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => {
+          if (!applyPendingCameraCommand()) scheduleMeasureRetry();
+        });
+        resizeObserver.observe(surface);
+      }
+    }
+
+    return () => {
+      cancelled = true;
+      if (retryFrame !== null) window.cancelAnimationFrame(retryFrame);
+      resizeObserver?.disconnect();
+    };
   }, [cameraCommand, applyViewToDom, scheduleViewCommit]);
 
   // PERF9-WHEEL: the first flush that actually moves the camera mutes
@@ -7168,7 +7223,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     const next = computeBoundedScreenCullState({
       candidates: canvasFrames.map(({ screen, geometry }) => ({
         id: screen.id,
-        geometry,
+        geometry: getResponsiveScreenCullGeometry(screen, geometry),
         iframeCount: 1 + (screen.breakpointWidths?.length ?? 0),
       })),
       viewport,

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

@@ -2555,6 +2555,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     preferredSelector: string,
     selectorCandidates: string[],
     forceFullDocument?: boolean,
+    preserveTextEditingSession?: boolean,
   ): void {
     if (typeof html !== "string") return;
     // T23: a session whose element was already detached (earlier patch,
@@ -2565,7 +2566,10 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     // finish() runs before we continue; this newer payload then supersedes
     // its result, preserving ordering.)
     exitStaleTextEditSession();
-    if (activeTextEditEl && !forceFullDocument) {
+    if (
+      activeTextEditEl &&
+      (!forceFullDocument || preserveTextEditingSession)
+    ) {
       // Don't yank a runtime content update out from under an in-progress
       // text edit — but don't silently lose it either (T13). Buffer only the
       // latest payload; it is applied once the edit session ends via
@@ -10976,6 +10980,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
         e.data.forceFullDocument ? "" : e.data.selectedSelector,
         e.data.forceFullDocument ? [] : e.data.selectorCandidates,
         Boolean(e.data.forceFullDocument),
+        Boolean(e.data.preserveTextEditingSession),
       );
       return;
     }

package/corpus/templates/design/app/components/design/multi-screen/frame-geometry.ts

@@ -61,6 +61,69 @@ export function getResponsiveScreenGroupSize(
   };
 }
 
+/**
+ * Bounds used by viewport culling for a screen and every responsive preview
+ * painted to its right. Culling only the persisted primary frame can evict a
+ * breakpoint that is still visibly on-screen after the user pans right.
+ *
+ * Rotated groups pivot around the primary frame, not around the wider row.
+ * Return an unrotated AABB so the generic culler cannot rotate around the
+ * wrong center and underestimate the painted region.
+ */
+export function getResponsiveScreenCullGeometry(
+  screen: ResponsiveLayoutScreen,
+  primaryGeometry: FrameGeometry,
+): FrameGeometry {
+  const size = getResponsiveScreenGroupSize(screen, primaryGeometry);
+  const rotation = primaryGeometry.rotation ?? 0;
+  if (!rotation) {
+    return {
+      ...primaryGeometry,
+      width: size.width,
+      height: size.height,
+      rotation: undefined,
+    };
+  }
+
+  const radians = (rotation * Math.PI) / 180;
+  const cosine = Math.cos(radians);
+  const sine = Math.sin(radians);
+  const pivot = {
+    x: primaryGeometry.x + primaryGeometry.width / 2,
+    y: primaryGeometry.y + primaryGeometry.height / 2,
+  };
+  const corners = [
+    { x: primaryGeometry.x, y: primaryGeometry.y },
+    { x: primaryGeometry.x + size.width, y: primaryGeometry.y },
+    { x: primaryGeometry.x, y: primaryGeometry.y + size.height },
+    {
+      x: primaryGeometry.x + size.width,
+      y: primaryGeometry.y + size.height,
+    },
+  ].map((point) => {
+    const dx = point.x - pivot.x;
+    const dy = point.y - pivot.y;
+    return {
+      x: pivot.x + dx * cosine - dy * sine,
+      y: pivot.y + dx * sine + dy * cosine,
+    };
+  });
+  const xs = corners.map((point) => point.x);
+  const ys = corners.map((point) => point.y);
+  const left = Math.min(...xs);
+  const right = Math.max(...xs);
+  const top = Math.min(...ys);
+  const bottom = Math.max(...ys);
+  return {
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top,
+    rotation: undefined,
+    z: primaryGeometry.z,
+  };
+}
+
 /** Legacy three-column lineup with each cell reserving its complete responsive
  * row. This prevents one generated variation's breakpoint frames from
  * painting over the next variation while preserving the familiar grid. */
@@ -151,6 +214,41 @@ function getGeneratedVariantInitialFrameGeometry(
   };
 }
 
+function getResponsiveVariantGroupOriginY(
+  groupId: string,
+  screens: readonly (ResponsiveLayoutScreen & { id: string })[],
+  primaryGeometryById: Record<string, Partial<FrameGeometry> | undefined>,
+): number {
+  const groupIds = Array.from(
+    new Set(
+      screens
+        .map((screen) => screen.layoutGroupId)
+        .filter((id): id is string => Boolean(id)),
+    ),
+  );
+  let originY = 0;
+  for (const candidateGroupId of groupIds) {
+    if (candidateGroupId === groupId) return originY;
+    const groupScreens = screens.filter(
+      (screen) => screen.layoutGroupId === candidateGroupId,
+    );
+    const groupBottom = groupScreens.reduce((bottom, screen, index) => {
+      const frame = getResponsiveInitialFrameGeometry(
+        index,
+        groupScreens,
+        primaryGeometryById,
+      );
+      const groupSize = getResponsiveScreenGroupSize(
+        screen,
+        primaryGeometryById[screen.id],
+      );
+      return Math.max(bottom, frame.y + groupSize.height);
+    }, 0);
+    originY += groupBottom + FRAME_LABEL_HEIGHT + GENERATED_VARIANT_GAP;
+  }
+  return originY;
+}
+
 /** Canonical bottom-to-top screen stack. Persisted frame `z` wins; screens
  * without one retain their source order, which is also the canvas DOM paint
  * order. This is shared by the overview canvas and Layers projection so the
@@ -306,15 +404,45 @@ export function resolveFrameGeometrySync(args: {
     const layoutGroupIndex = layoutGroupScreens?.findIndex(
       (candidate) => candidate.id === screen.id,
     );
+    const generatedGroupUntouched = Boolean(
+      layoutGroupScreens?.every((candidate, candidateIndex) => {
+        const baseline = getGeneratedVariantInitialFrameGeometry(
+          candidateIndex,
+          layoutGroupScreens,
+        );
+        const candidateGeometry =
+          persistedGeometryById?.[candidate.id] ??
+          currentGeometryById[candidate.id];
+        return (
+          candidateGeometry?.x === baseline.x &&
+          candidateGeometry?.y === baseline.y
+        );
+      }),
+    );
+    const variantGroupOriginY = screen.layoutGroupId
+      ? getResponsiveVariantGroupOriginY(
+          screen.layoutGroupId,
+          screens,
+          baseGeometryById,
+        )
+      : 0;
     const responsiveInitial =
       layoutGroupScreens &&
       layoutGroupIndex !== undefined &&
       layoutGroupIndex >= 0
-        ? getResponsiveInitialFrameGeometry(
-            layoutGroupIndex,
-            layoutGroupScreens,
-            baseGeometryById,
-          )
+        ? {
+            ...getResponsiveInitialFrameGeometry(
+              layoutGroupIndex,
+              layoutGroupScreens,
+              baseGeometryById,
+            ),
+            y:
+              getResponsiveInitialFrameGeometry(
+                layoutGroupIndex,
+                layoutGroupScreens,
+                baseGeometryById,
+              ).y + variantGroupOriginY,
+          }
         : getResponsiveInitialFrameGeometry(index, screens, baseGeometryById);
     const generatedVariantInitial =
       layoutGroupScreens &&
@@ -327,6 +455,7 @@ export function resolveFrameGeometrySync(args: {
         : null;
     const persistedUsesGeneratedVariantLineup =
       Boolean(screen.breakpointWidths?.length) &&
+      generatedGroupUntouched &&
       generatedVariantInitial !== null &&
       persisted?.x === generatedVariantInitial.x &&
       persisted?.y === generatedVariantInitial.y &&
@@ -335,6 +464,7 @@ export function resolveFrameGeometrySync(args: {
     const existingUsesGeneratedVariantLineup =
       !persisted &&
       Boolean(screen.breakpointWidths?.length) &&
+      generatedGroupUntouched &&
       generatedVariantInitial !== null &&
       existing?.x === generatedVariantInitial.x &&
       existing?.y === generatedVariantInitial.y &&