@agent-native/core 0.92.6 → 0.92.8

package/corpus/templates/design/app/components/design/multi-screen/cross-screen-drop.ts

@@ -1,7 +1,8 @@
 import type { CSSProperties } from "react";
 
-import { SURFACE_PADDING } from "../MultiScreenCanvas";
 import type { PortableStyleSnapshot } from "../types";
+import { screenLocalRectToBoardGeometry } from "./coordinate-transforms";
+import { SURFACE_PADDING } from "./overview-layout";
 import type {
   CrossScreenDropAxis,
   CrossScreenDropGuide,
@@ -67,19 +68,14 @@ export function getCrossScreenDropGuideForHitTest(args: {
   if (!rect) return null;
   const placement = args.hit.placement ?? "inside";
   const axis = args.hit.axis ?? "y";
-  const scaleX =
-    args.targetGeometry.width / Math.max(1, args.targetMetadata.width);
-  const scaleY =
-    args.targetGeometry.height / Math.max(1, args.targetMetadata.height);
   return {
     placement,
     axis,
-    boardRect: {
-      x: args.targetGeometry.x + rect.left * scaleX,
-      y: args.targetGeometry.y + rect.top * scaleY,
-      width: Math.max(1, rect.width * scaleX),
-      height: Math.max(1, rect.height * scaleY),
-    },
+    boardRect: screenLocalRectToBoardGeometry(
+      rect,
+      args.targetGeometry,
+      args.targetMetadata,
+    ),
   };
 }
 
@@ -93,6 +89,7 @@ export function getCrossScreenDropGuideStyle(args: {
   const top = args.pan.y + (SURFACE_PADDING + boardRect.y) * args.scale;
   const width = Math.max(1, boardRect.width * args.scale);
   const height = Math.max(1, boardRect.height * args.scale);
+  const rotation = boardRect.rotation ?? 0;
 
   if (placement === "inside") {
     return {
@@ -105,30 +102,43 @@ export function getCrossScreenDropGuideStyle(args: {
         "color-mix(in srgb, var(--design-editor-accent-color) 14%, transparent)",
       borderRadius: 2,
       boxShadow: "none",
+      transform: rotation ? `rotate(${rotation}deg)` : undefined,
     };
   }
 
   if (axis === "x") {
     const x = placement === "before" ? left : left + width;
+    const lineLeft = x - 1;
     return {
-      left: x - 1,
+      left: lineLeft,
       top,
       width: 2,
       height: Math.max(8, height),
       background: "var(--design-editor-accent-color)",
       borderRadius: 999,
       boxShadow: "0 0 0 1px var(--design-editor-accent-color)",
+      transform: rotation ? `rotate(${rotation}deg)` : undefined,
+      // Rotate the insertion line around the anchor rect's center, not its
+      // own center, so before/after edges stay attached to a rotated target.
+      transformOrigin: rotation
+        ? `${left + width / 2 - lineLeft}px ${height / 2}px`
+        : undefined,
     };
   }
 
   const y = placement === "before" ? top : top + height;
+  const lineTop = y - 1;
   return {
     left,
-    top: y - 1,
+    top: lineTop,
     width: Math.max(8, width),
     height: 2,
     background: "var(--design-editor-accent-color)",
     borderRadius: 999,
     boxShadow: "0 0 0 1px var(--design-editor-accent-color)",
+    transform: rotation ? `rotate(${rotation}deg)` : undefined,
+    transformOrigin: rotation
+      ? `${width / 2}px ${top + height / 2 - lineTop}px`
+      : undefined,
   };
 }

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

@@ -1,6 +1,6 @@
 import { getRotatedFrameAABB } from "@shared/canvas-math";
 
-import { SURFACE_PADDING } from "../MultiScreenCanvas";
+import { SURFACE_PADDING } from "./overview-layout";
 import type { FrameGeometry, Point } from "./types";
 
 // ── Overview viewport culling (PF22) ────────────────────────────────────────
@@ -20,12 +20,11 @@ import type { FrameGeometry, Point } from "./types";
 //   screen (the debounced commit lags real cursor position by up to
 //   ~120ms — see scheduleViewCommit) is already mounted by the time it's
 //   reachable.
-// - Two tiers, see computeScreenCullTier: a screen that has never intersected
-//   the overscanned viewport this session renders a lightweight placeholder;
-//   once visible it mounts real content and never goes back to a placeholder
-//   — it only ever gets hidden (Tier B), never unmounted, since iframes lose
-//   all internal state (scroll position, form input, Alpine/JS state) on
-//   unmount.
+// - A bounded live-context pool keeps nearby screens warm without retaining
+//   every browsing context ever visited. Active/selected/in-progress screens
+//   are protected; the remaining budget is filled by viewport distance and
+//   then by recency. Evicted screens keep their lightweight React content-cache
+//   entry so revisiting can remount directly without rebuilding source HTML.
 
 /** Escape hatch: flip to `false` to fully disable culling in one line if a
  *  regression appears — every screen goes back to always rendering full
@@ -40,17 +39,236 @@ export const OVERVIEW_CULLING_ENABLED = true;
  *  recomputes. */
 export const OVERVIEW_CULLING_OVERSCAN_FACTOR = 1.5;
 
+/** Maximum number of evictable overview browsing contexts kept mounted at
+ * once. One screen costs its primary preview plus every breakpoint preview.
+ * Interaction-protected screens are the sole safety exception: if the user
+ * explicitly selects more than this budget, preserving their live editor
+ * state wins until that interaction ends, after which the pool contracts on
+ * the next culling pass. */
+export const OVERVIEW_LIVE_IFRAME_BUDGET = 32;
+
 export type ScreenCullTier =
   /** Full content (iframe/DesignCanvas) is mounted and rendered normally. */
   | "visible"
   /** Has been visible before this session; content stays mounted (iframes
-   *  never unmount — see the module doc above) but is skipped from paint via
+   *  remains inside the bounded warm pool) but is skipped from paint via
    *  visibility/content-visibility, not display:none or will-change. */
   | "culled"
+  /** Has rendered before but was least-recently-used outside the bounded live
+   *  iframe pool. Its browsing contexts are unmounted; the cached React node
+   *  is retained so a revisit can remount without regenerating content. */
+  | "evicted"
   /** Has never been visible this session; renders a lightweight placeholder
    *  with no iframe/content node at all. */
   | "placeholder";
 
+/** Shared render lifecycle for every iframe belonging to one screen, including
+ * breakpoint previews. Warm offscreen screens remain mounted and hidden;
+ * never-seen and LRU-evicted screens own no browsing contexts. */
+export function getScreenContentCullState(tier: ScreenCullTier): {
+  shouldMount: boolean;
+  isHidden: boolean;
+} {
+  return {
+    shouldMount: tier === "visible" || tier === "culled",
+    isHidden: tier === "culled",
+  };
+}
+
+export interface ScreenCullCandidate {
+  id: string;
+  geometry: FrameGeometry;
+  /** Primary preview plus all breakpoint preview iframes for this screen. */
+  iframeCount: number;
+}
+
+export interface BoundedScreenCullState {
+  tierByScreenId: Map<string, ScreenCullTier>;
+  liveScreenIds: Set<string>;
+  everVisibleScreenIds: Set<string>;
+  lastVisibleEpochByScreenId: Map<string, number>;
+  mountedIframeCount: number;
+}
+
+function normalizedIframeCount(candidate: ScreenCullCandidate): number {
+  return Math.max(1, Math.floor(candidate.iframeCount));
+}
+
+function distanceSquaredToViewportCenter(
+  geometry: FrameGeometry,
+  viewport: OverscannedViewportBounds,
+): number {
+  const bounds = getRotatedFrameAABB(geometry);
+  const dx =
+    (bounds.left + bounds.right) / 2 - (viewport.left + viewport.right) / 2;
+  const dy =
+    (bounds.top + bounds.bottom) / 2 - (viewport.top + viewport.bottom) / 2;
+  return dx * dx + dy * dy;
+}
+
+/**
+ * Allocate overview browsing contexts under a bounded LRU/distance budget.
+ *
+ * Allocation order is intentional:
+ * 1. protected interactions (active, selected, dragged, text/layer edited),
+ * 2. screens inside the overscanned viewport, nearest the viewport center,
+ * 3. previously-mounted offscreen screens, most recently visible first.
+ *
+ * This keeps imminent pan/zoom destinations live while guaranteeing that a
+ * long tour through a 100+ screen board cannot accumulate 100+ hidden iframe
+ * documents. The function is pure: callers own the returned Set/Map snapshots
+ * and can feed them into the next committed pan/zoom pass.
+ */
+export function computeBoundedScreenCullState({
+  candidates,
+  viewport,
+  protectedScreenIds,
+  previousLiveScreenIds,
+  everVisibleScreenIds,
+  lastVisibleEpochByScreenId,
+  accessEpoch,
+  liveIframeBudget = OVERVIEW_LIVE_IFRAME_BUDGET,
+}: {
+  candidates: readonly ScreenCullCandidate[];
+  viewport: OverscannedViewportBounds | null;
+  protectedScreenIds: ReadonlySet<string>;
+  previousLiveScreenIds: ReadonlySet<string>;
+  everVisibleScreenIds: ReadonlySet<string>;
+  lastVisibleEpochByScreenId: ReadonlyMap<string, number>;
+  accessEpoch: number;
+  liveIframeBudget?: number;
+}): BoundedScreenCullState {
+  if (!OVERVIEW_CULLING_ENABLED) {
+    const allIds = new Set(candidates.map((candidate) => candidate.id));
+    return {
+      tierByScreenId: new Map(
+        candidates.map((candidate) => [candidate.id, "visible"] as const),
+      ),
+      liveScreenIds: allIds,
+      everVisibleScreenIds: allIds,
+      lastVisibleEpochByScreenId: new Map(
+        candidates.map((candidate) => [candidate.id, accessEpoch] as const),
+      ),
+      mountedIframeCount: candidates.reduce(
+        (total, candidate) => total + normalizedIframeCount(candidate),
+        0,
+      ),
+    };
+  }
+
+  const candidateById = new Map(
+    candidates.map((candidate) => [candidate.id, candidate] as const),
+  );
+  const viewportScreenIds = new Set<string>();
+  if (viewport) {
+    for (const candidate of candidates) {
+      if (isFrameWithinOverscannedViewport(candidate.geometry, viewport)) {
+        viewportScreenIds.add(candidate.id);
+      }
+    }
+  }
+
+  const nextLastVisible = new Map(lastVisibleEpochByScreenId);
+  for (const id of protectedScreenIds) {
+    if (candidateById.has(id)) nextLastVisible.set(id, accessEpoch);
+  }
+  for (const id of viewportScreenIds) nextLastVisible.set(id, accessEpoch);
+
+  const nextLive = new Set<string>();
+  let mountedIframeCount = 0;
+  const add = (candidate: ScreenCullCandidate) => {
+    if (nextLive.has(candidate.id)) return;
+    nextLive.add(candidate.id);
+    mountedIframeCount += normalizedIframeCount(candidate);
+  };
+
+  // Protected editor interactions must never be destroyed mid-gesture/edit.
+  for (const candidate of candidates) {
+    if (protectedScreenIds.has(candidate.id)) add(candidate);
+  }
+  // Protected screens can temporarily exceed the normal pool. In that case
+  // no evictable iframe is admitted until the interaction set shrinks again.
+  const effectiveBudget = Math.max(
+    Math.max(0, Math.floor(liveIframeBudget)),
+    mountedIframeCount,
+  );
+  const tryAddWithinBudget = (candidate: ScreenCullCandidate) => {
+    if (nextLive.has(candidate.id)) return;
+    if (
+      mountedIframeCount + normalizedIframeCount(candidate) <=
+      effectiveBudget
+    ) {
+      add(candidate);
+    }
+  };
+
+  const visibleCandidates = candidates
+    .filter(
+      (candidate) =>
+        viewportScreenIds.has(candidate.id) &&
+        !protectedScreenIds.has(candidate.id),
+    )
+    .sort((a, b) => {
+      if (!viewport) return a.id.localeCompare(b.id);
+      const distanceDelta =
+        distanceSquaredToViewportCenter(a.geometry, viewport) -
+        distanceSquaredToViewportCenter(b.geometry, viewport);
+      if (distanceDelta !== 0) return distanceDelta;
+      const recencyDelta =
+        (nextLastVisible.get(b.id) ?? -1) - (nextLastVisible.get(a.id) ?? -1);
+      return recencyDelta || a.id.localeCompare(b.id);
+    });
+  visibleCandidates.forEach(tryAddWithinBudget);
+
+  const warmCandidates = candidates
+    .filter(
+      (candidate) =>
+        previousLiveScreenIds.has(candidate.id) &&
+        !viewportScreenIds.has(candidate.id) &&
+        !protectedScreenIds.has(candidate.id),
+    )
+    .sort((a, b) => {
+      const recencyDelta =
+        (nextLastVisible.get(b.id) ?? -1) - (nextLastVisible.get(a.id) ?? -1);
+      return recencyDelta || a.id.localeCompare(b.id);
+    });
+  warmCandidates.forEach(tryAddWithinBudget);
+
+  const nextEverVisible = new Set(everVisibleScreenIds);
+  const tierByScreenId = new Map<string, ScreenCullTier>();
+  for (const candidate of candidates) {
+    const isProtected = protectedScreenIds.has(candidate.id);
+    const isInViewport = viewportScreenIds.has(candidate.id);
+    const isLive = nextLive.has(candidate.id);
+    if (isLive && (isProtected || isInViewport)) {
+      nextEverVisible.add(candidate.id);
+      tierByScreenId.set(candidate.id, "visible");
+    } else if (isLive) {
+      tierByScreenId.set(candidate.id, "culled");
+    } else if (nextEverVisible.has(candidate.id)) {
+      tierByScreenId.set(candidate.id, "evicted");
+    } else {
+      tierByScreenId.set(candidate.id, "placeholder");
+    }
+  }
+
+  const liveIds = new Set(candidateById.keys());
+  for (const id of nextEverVisible) {
+    if (!liveIds.has(id)) nextEverVisible.delete(id);
+  }
+  for (const id of nextLastVisible.keys()) {
+    if (!liveIds.has(id)) nextLastVisible.delete(id);
+  }
+
+  return {
+    tierByScreenId,
+    liveScreenIds: nextLive,
+    everVisibleScreenIds: nextEverVisible,
+    lastVisibleEpochByScreenId: nextLastVisible,
+    mountedIframeCount,
+  };
+}
+
 /** The world-space (canvas-space) rectangle currently visible inside the
  *  pannable surface, expanded by `overscanFactor` viewport-widths/heights in
  *  every direction. Built from the *committed* pan/zoom state, matching the
@@ -72,8 +290,9 @@ export interface OverscannedViewportBounds {
  *  `SURFACE_PADDING`-relative space — compare directly against
  *  `geometry.x`/`geometry.y`-based frame bounds, no further offset needed.
  *  Returns `null` when the surface has no measured size yet (e.g. before the
- *  first layout pass) — callers should treat that as "cannot determine
- *  visibility yet" and fall back to treating everything as visible. */
+ *  first layout pass). Callers keep only active/selected or previously-live
+ *  screens mounted until measurement; otherwise a cold open would eagerly
+ *  instantiate every iframe and permanently defeat placeholder culling. */
 export function getOverscannedViewportCanvasBounds(
   surfaceSize: { width: number; height: number },
   pan: Point,
@@ -158,12 +377,13 @@ export function clampFrameGeometryToViewport(
  *  itself never culls the object you're actively editing or have selected,
  *  and keeping these paths iframe-backed avoids any risk of interrupting
  *  in-progress edits/bridge state on the screen the user is looking at.
- *  `viewport` is `null` when surface size isn't known yet (initial layout) —
- *  treated as visible so nothing is incorrectly culled before we can measure.
+ *  `viewport` is `null` when surface size isn't known yet (initial layout).
+ *  Active/selected screens stay visible, previously-live screens stay mounted
+ *  but culled, and never-seen screens remain placeholders until measurement.
  *  `hasBeenVisible` should reflect whether this screen id has *ever* been
- *  visible this session (see the hasBeenVisibleRef Set in MultiScreenCanvas):
- *  once true, a screen can only be "visible" or "culled", never regress to
- *  "placeholder". */
+ *  visible this session (see the hasBeenVisibleRef Set in MultiScreenCanvas).
+ *  This low-level geometry helper does not apply the live-iframe budget;
+ *  computeBoundedScreenCullState layers the separate "evicted" tier on top. */
 export function computeScreenCullTier({
   geometry,
   viewport,
@@ -176,10 +396,9 @@ export function computeScreenCullTier({
   hasBeenVisible: boolean;
 }): ScreenCullTier {
   if (!OVERVIEW_CULLING_ENABLED) return "visible";
-  const isWithinViewport =
-    alwaysVisible ||
-    !viewport ||
-    isFrameWithinOverscannedViewport(geometry, viewport);
+  if (alwaysVisible) return "visible";
+  if (!viewport) return hasBeenVisible ? "culled" : "placeholder";
+  const isWithinViewport = isFrameWithinOverscannedViewport(geometry, viewport);
   if (isWithinViewport) return "visible";
   return hasBeenVisible ? "culled" : "placeholder";
 }