@agent-native/core 0.92.6 → 0.92.8

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

@@ -0,0 +1,283 @@
+import { hashString } from "./board-surface-html";
+import { screenLocalRectToBoardGeometry } from "./coordinate-transforms";
+import {
+  geometryContainsGeometry,
+  geometryContainsPoint,
+} from "./frame-geometry";
+import type {
+  FrameGeometry,
+  FrameGeometryById,
+  Point,
+  ScreenFile,
+} from "./types";
+
+export interface PrimitiveDropTarget {
+  nodeId: string;
+  screenId: string;
+  boardRect: FrameGeometry;
+}
+
+export interface ParsedScreenPrimitive {
+  nodeId: string;
+  screenId: string;
+  localLeft: number;
+  localTop: number;
+  localWidth: number;
+  localHeight: number;
+  isContainer: boolean;
+}
+
+export const primitiveParseCache = new Map<string, ParsedScreenPrimitive[]>();
+const PRIMITIVE_PARSE_CACHE_MAX = 64;
+const PRIMITIVE_IDENTITY_CACHE_MAX = 64;
+const primitiveParseIdentityCache = new Map<
+  string,
+  { content: string; result: ParsedScreenPrimitive[] }
+>();
+
+function rememberPrimitiveIdentity(
+  screenId: string,
+  content: string,
+  result: ParsedScreenPrimitive[],
+) {
+  primitiveParseIdentityCache.delete(screenId);
+  if (primitiveParseIdentityCache.size >= PRIMITIVE_IDENTITY_CACHE_MAX) {
+    const oldestId = primitiveParseIdentityCache.keys().next().value;
+    if (oldestId !== undefined) primitiveParseIdentityCache.delete(oldestId);
+  }
+  primitiveParseIdentityCache.set(screenId, { content, result });
+}
+
+export function __clearPrimitiveParseCachesForTests() {
+  primitiveParseCache.clear();
+  primitiveParseIdentityCache.clear();
+}
+
+export function __getPrimitiveParseCacheSizesForTests() {
+  return {
+    parsed: primitiveParseCache.size,
+    identity: primitiveParseIdentityCache.size,
+  };
+}
+
+export function parsePrimitivesFromScreen(
+  screen: ScreenFile,
+): ParsedScreenPrimitive[] {
+  const identityEntry = primitiveParseIdentityCache.get(screen.id);
+  if (identityEntry && identityEntry.content === screen.content) {
+    return identityEntry.result;
+  }
+
+  const cacheKey = `${screen.id}:${screen.content.length}:${hashString(screen.content)}`;
+  const cached = primitiveParseCache.get(cacheKey);
+  if (cached) {
+    rememberPrimitiveIdentity(screen.id, screen.content, cached);
+    return cached;
+  }
+
+  const result: ParsedScreenPrimitive[] = [];
+  if (typeof DOMParser === "undefined" || !screen.content) {
+    return result;
+  }
+
+  try {
+    const doc = new DOMParser().parseFromString(screen.content, "text/html");
+    const nodes = doc.querySelectorAll("[data-agent-native-node-id]");
+    nodes.forEach((element) => {
+      const nodeId = element.getAttribute("data-agent-native-node-id");
+      if (!nodeId) return;
+
+      const htmlElement = element as HTMLElement;
+      const style = htmlElement.style;
+      const tag = element.tagName.toLowerCase();
+      const primitiveKind = (
+        element.getAttribute("data-an-primitive") || ""
+      ).toLowerCase();
+      if (style.position !== "absolute") return;
+
+      const left = parseFloat(style.left) || 0;
+      const top = parseFloat(style.top) || 0;
+      const width = parseFloat(style.width) || 0;
+      const height = parseFloat(style.height) || 0;
+      if (width <= 0 || height <= 0) return;
+
+      const isDiv = tag === "div";
+      const isEllipse =
+        style.borderRadius === "50%" ||
+        style.borderRadius === "50% 50% 50% 50%";
+      const isTextAutoSize = style.display === "inline-block";
+      const isAutoLayout =
+        style.display === "flex" ||
+        style.display === "inline-flex" ||
+        style.display === "grid" ||
+        style.display === "inline-grid";
+      const isCanvasRectangle =
+        isDiv && (primitiveKind === "rectangle" || primitiveKind === "rect");
+      const isContainer =
+        isDiv &&
+        !isEllipse &&
+        !isTextAutoSize &&
+        (isAutoLayout || isCanvasRectangle);
+
+      result.push({
+        nodeId,
+        screenId: screen.id,
+        localLeft: left,
+        localTop: top,
+        localWidth: width,
+        localHeight: height,
+        isContainer,
+      });
+    });
+  } catch {
+    // Malformed imported HTML simply has no discoverable canvas primitives.
+  }
+
+  if (primitiveParseCache.size >= PRIMITIVE_PARSE_CACHE_MAX) {
+    const firstKey = primitiveParseCache.keys().next().value;
+    if (firstKey !== undefined) primitiveParseCache.delete(firstKey);
+  }
+  primitiveParseCache.set(cacheKey, result);
+  rememberPrimitiveIdentity(screen.id, screen.content, result);
+  return result;
+}
+
+export function primitiveLocalToBoardRect(
+  localLeft: number,
+  localTop: number,
+  localWidth: number,
+  localHeight: number,
+  frameGeometry: FrameGeometry,
+  metadata: { width: number; height: number },
+): FrameGeometry {
+  return screenLocalRectToBoardGeometry(
+    {
+      left: localLeft,
+      top: localTop,
+      width: localWidth,
+      height: localHeight,
+    },
+    frameGeometry,
+    metadata,
+  );
+}
+
+export function getPrimitiveDropTargetForPoint(
+  point: Point,
+  draggedNodeId: string | null,
+  screens: ScreenFile[],
+  frameGeometryById: FrameGeometryById,
+  getMetadata: (screen: ScreenFile) => { width: number; height: number },
+  options: {
+    identityCoordinateScreenIds?: ReadonlySet<string>;
+    backgroundScreenIds?: ReadonlySet<string>;
+    foregroundScreenId?: string;
+  } = {},
+): PrimitiveDropTarget | null {
+  const toBoardRect = (
+    primitive: ParsedScreenPrimitive,
+    frameGeometry: FrameGeometry,
+    metadata: { width: number; height: number },
+  ): FrameGeometry => {
+    if (options.identityCoordinateScreenIds?.has(primitive.screenId)) {
+      return {
+        x: primitive.localLeft,
+        y: primitive.localTop,
+        width: Math.max(1, primitive.localWidth),
+        height: Math.max(1, primitive.localHeight),
+      };
+    }
+    return primitiveLocalToBoardRect(
+      primitive.localLeft,
+      primitive.localTop,
+      primitive.localWidth,
+      primitive.localHeight,
+      frameGeometry,
+      metadata,
+    );
+  };
+
+  let draggedBoardRect: FrameGeometry | null = null;
+  let draggedScreenId: string | null = null;
+  if (draggedNodeId) {
+    outer: for (const screen of screens) {
+      const frameGeometry = frameGeometryById[screen.id];
+      if (!frameGeometry) continue;
+      const metadata = getMetadata(screen);
+      const primitives = parsePrimitivesFromScreen(screen);
+      for (const primitive of primitives) {
+        if (primitive.nodeId === draggedNodeId) {
+          draggedBoardRect = toBoardRect(primitive, frameGeometry, metadata);
+          draggedScreenId = screen.id;
+          break outer;
+        }
+      }
+    }
+  }
+
+  const topScreen = screens
+    .map((screen, index) => ({
+      screen,
+      index,
+      geometry: frameGeometryById[screen.id],
+    }))
+    .filter(
+      (
+        entry,
+      ): entry is {
+        screen: ScreenFile;
+        index: number;
+        geometry: FrameGeometry;
+      } => !!entry.geometry && geometryContainsPoint(entry.geometry, point),
+    )
+    .sort((a, b) => {
+      const foregroundDelta =
+        Number(b.screen.id === options.foregroundScreenId) -
+        Number(a.screen.id === options.foregroundScreenId);
+      if (foregroundDelta) return foregroundDelta;
+      const backgroundDelta =
+        Number(options.backgroundScreenIds?.has(a.screen.id)) -
+        Number(options.backgroundScreenIds?.has(b.screen.id));
+      if (backgroundDelta) return backgroundDelta;
+      return (b.geometry.z ?? 0) - (a.geometry.z ?? 0) || b.index - a.index;
+    })[0];
+
+  if (!topScreen) return null;
+
+  const metadata = getMetadata(topScreen.screen);
+  const primitives = parsePrimitivesFromScreen(topScreen.screen);
+  let best: PrimitiveDropTarget | null = null;
+  for (const primitive of primitives) {
+    if (!primitive.isContainer) continue;
+    if (draggedNodeId && primitive.nodeId === draggedNodeId) continue;
+    const boardRect = toBoardRect(primitive, topScreen.geometry, metadata);
+    if (
+      draggedBoardRect &&
+      draggedScreenId === topScreen.screen.id &&
+      geometryContainsGeometry(draggedBoardRect, boardRect)
+    ) {
+      continue;
+    }
+    if (geometryContainsPoint(boardRect, point)) {
+      best = {
+        nodeId: primitive.nodeId,
+        screenId: topScreen.screen.id,
+        boardRect,
+      };
+    }
+  }
+  return best;
+}
+
+export function resolveNodeScreenId(
+  nodeId: string,
+  screens: ScreenFile[],
+): string | null {
+  for (const screen of screens) {
+    const primitives = parsePrimitivesFromScreen(screen);
+    if (primitives.some((primitive) => primitive.nodeId === nodeId)) {
+      return screen.id;
+    }
+  }
+  return null;
+}

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

@@ -0,0 +1,272 @@
+import type { ReactNode } from "react";
+
+import { DEVICE_FRAME_VIEWPORTS, type DeviceFrameType } from "../types";
+import type {
+  FrameGeometry,
+  MultiScreenCanvasProps,
+  ResolvedScreenMetadata,
+  ScreenContentCacheEntry,
+  ScreenFile,
+  ScreenMetadata,
+  ScreenPreviewState,
+  ScreenSourceType,
+} from "./types";
+
+export interface ResolvedMetadataCacheEntry {
+  screen: ScreenFile;
+  keyedMetadata?: ScreenMetadata;
+  getterMetadata?: ScreenMetadata;
+  previewDeviceFrame: DeviceFrameType;
+  result: ResolvedScreenMetadata;
+}
+
+export function sameResolvedMetadata(
+  a: ResolvedScreenMetadata,
+  b: ResolvedScreenMetadata,
+): boolean {
+  return (
+    a.source === b.source &&
+    a.previewState === b.previewState &&
+    a.title === b.title &&
+    a.width === b.width &&
+    a.height === b.height &&
+    a.previewUrl === b.previewUrl
+  );
+}
+
+function sameScreenMetadataInput(
+  a: ScreenMetadata | undefined,
+  b: ScreenMetadata | undefined,
+) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.source === b.source &&
+    a.sourceType === b.sourceType &&
+    a.lod === b.lod &&
+    a.previewState === b.previewState &&
+    a.status === b.status &&
+    a.title === b.title &&
+    a.width === b.width &&
+    a.height === b.height &&
+    a.url === b.url &&
+    a.previewUrl === b.previewUrl &&
+    a.bridgeUrl === b.bridgeUrl &&
+    a.previewToken === b.previewToken
+  );
+}
+
+export function pruneResolvedMetadataCache(
+  cache: Map<string, ResolvedMetadataCacheEntry>,
+  liveScreenIds: ReadonlySet<string>,
+) {
+  for (const id of cache.keys()) {
+    if (!liveScreenIds.has(id)) cache.delete(id);
+  }
+}
+
+/** Keep cached React content nodes for screens that still exist, even while an
+ * overview iframe is LRU-evicted. The node is cheap compared with its mounted
+ * browsing context and lets a revisit reuse the already-built DesignCanvas
+ * element. Deleted screens are still pruned so create/delete churn cannot grow
+ * this cache without bound. */
+export function pruneScreenContentCache(
+  cache: Map<string, ScreenContentCacheEntry>,
+  existingScreenIds: ReadonlySet<string>,
+) {
+  for (const id of cache.keys()) {
+    if (!existingScreenIds.has(id)) cache.delete(id);
+  }
+}
+
+export function __clearResolvedMetadataCacheForTests(
+  cache: Map<string, ResolvedMetadataCacheEntry>,
+) {
+  cache.clear();
+}
+
+export function resolveScreenMetadataCached(
+  cache: Map<string, ResolvedMetadataCacheEntry>,
+  screen: ScreenFile,
+  keyedMetadata: ScreenMetadata | undefined,
+  getterMetadata: ScreenMetadata | undefined,
+  previewDeviceFrame: DeviceFrameType,
+): ResolvedScreenMetadata {
+  const cached = cache.get(screen.id);
+  if (
+    cached &&
+    cached.screen === screen &&
+    cached.previewDeviceFrame === previewDeviceFrame &&
+    sameScreenMetadataInput(cached.keyedMetadata, keyedMetadata) &&
+    sameScreenMetadataInput(cached.getterMetadata, getterMetadata)
+  ) {
+    return cached.result;
+  }
+  const result = resolveScreenMetadata(
+    screen,
+    keyedMetadata,
+    getterMetadata,
+    previewDeviceFrame,
+  );
+  cache.set(screen.id, {
+    screen,
+    keyedMetadata,
+    getterMetadata,
+    previewDeviceFrame,
+    result,
+  });
+  return result;
+}
+
+export function getCachedScreenContentNode(
+  cache: Map<string, ScreenContentCacheEntry>, // i18n-ignore -- type signature, not visible copy
+  screen: ScreenFile,
+  metadata: ResolvedScreenMetadata,
+  geometry: FrameGeometry,
+  renderScreenContent: NonNullable<
+    MultiScreenCanvasProps["renderScreenContent"]
+  >,
+): ReactNode {
+  const width = Math.max(1, Math.round(geometry.width));
+  const height = Math.max(1, Math.round(geometry.height));
+  const prior = cache.get(screen.id);
+  if (
+    prior &&
+    prior.screen === screen &&
+    prior.renderScreenContent === renderScreenContent &&
+    sameResolvedMetadata(prior.metadata, metadata) &&
+    prior.width === width &&
+    prior.height === height
+  ) {
+    return prior.contentNode;
+  }
+  const contentNode = renderScreenContent(screen, metadata, geometry);
+  cache.set(screen.id, {
+    screen,
+    metadata,
+    width,
+    height,
+    renderScreenContent,
+    contentNode,
+  });
+  return contentNode;
+}
+
+export function resolveScreenMetadata(
+  screen: ScreenFile,
+  keyedMetadata?: ScreenMetadata,
+  getterMetadata?: ScreenMetadata,
+  previewDeviceFrame: DeviceFrameType = "none",
+): ResolvedScreenMetadata {
+  const safeScreen: ScreenFile =
+    typeof screen.content === "string" ? screen : { ...screen, content: "" };
+  const metadata = { ...safeScreen, ...keyedMetadata, ...getterMetadata };
+  const previewUrl =
+    metadata.url ??
+    metadata.previewUrl ??
+    safeScreen.previewUrl ??
+    getPreviewUrl(safeScreen.content);
+  const deviceViewport =
+    previewDeviceFrame === "none"
+      ? undefined
+      : DEVICE_FRAME_VIEWPORTS[previewDeviceFrame];
+  const width =
+    deviceViewport?.width ??
+    (metadata.width && metadata.width > 0 ? metadata.width : 1280);
+  const height =
+    deviceViewport?.height ??
+    (metadata.height && metadata.height > 0 ? metadata.height : 2560);
+  return {
+    source:
+      normalizeSource(metadata.sourceType ?? metadata.source) ??
+      deriveSource(safeScreen, previewUrl),
+    previewState:
+      normalizePreviewState(
+        metadata.lod ?? metadata.previewState ?? metadata.status,
+      ) ?? derivePreviewState(safeScreen, previewUrl),
+    title: metadata.title,
+    width,
+    height,
+    previewUrl,
+  };
+}
+
+function normalizeSource(value?: string): ScreenSourceType | undefined {
+  const normalized = value?.toLowerCase();
+  if (!normalized) return undefined;
+  if (normalized === "local" || normalized === "localhost") return "localhost";
+  if (normalized === "fusion" || normalized === "remote-fusion") {
+    return "fusion";
+  }
+  if (normalized === "inline" || normalized === "code") return "inline";
+  return undefined;
+}
+
+function normalizePreviewState(value?: string): ScreenPreviewState | undefined {
+  const normalized = value?.toLowerCase();
+  if (!normalized) return undefined;
+  if (normalized === "live") return "live";
+  if (normalized === "snapshot" || normalized === "cached") return "snapshot";
+  if (normalized === "preview" || normalized === "draft") return "preview";
+  return undefined;
+}
+
+function deriveSource(
+  screen: ScreenFile,
+  previewUrl?: string,
+): ScreenSourceType {
+  const haystack =
+    `${screen.filename} ${screen.content.slice(0, 4000)}`.toLowerCase();
+  const url = getUrl(previewUrl ?? screen.content);
+  if (
+    url?.hostname === "localhost" ||
+    url?.hostname === "127.0.0.1" ||
+    url?.hostname.endsWith(".local") ||
+    haystack.includes("localhost") ||
+    haystack.includes("127.0.0.1")
+  ) {
+    return "localhost";
+  }
+  if (haystack.includes("fusion") || url?.hostname.includes("fusion")) {
+    return "fusion";
+  }
+  return "inline";
+}
+
+function derivePreviewState(
+  screen: ScreenFile,
+  previewUrl?: string,
+): ScreenPreviewState {
+  const haystack =
+    `${screen.filename} ${screen.content.slice(0, 4000)}`.toLowerCase();
+  if (
+    haystack.includes("snapshot") ||
+    haystack.includes("screenshot") ||
+    haystack.includes("cached") ||
+    haystack.includes("data:image/")
+  ) {
+    return "snapshot";
+  }
+  if (previewUrl || deriveSource(screen, previewUrl) !== "inline") {
+    return "live";
+  }
+  return "preview";
+}
+
+export function getPreviewUrl(content: string) {
+  return getUrl(
+    typeof content === "string" ? content.trim() : undefined,
+  )?.toString();
+}
+
+function getUrl(value: string | undefined) {
+  if (!value) return undefined;
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:"
+      ? url
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}

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

@@ -10,7 +10,7 @@ import type {
   IframeContextMenuPayload,
   IframeFigmaClipboardPastePayload,
   IframeHotkeyPayload,
-} from "../DesignCanvas";
+} from "../design-canvas/iframe-events";
 import type {
   DeviceFrameType,
   ElementInfo,
@@ -34,6 +34,8 @@ export interface ScreenFile {
   url?: string;
   previewUrl?: string;
   bridgeUrl?: string;
+  /** Read-only localhost preview credential. Never a filesystem token. */
+  previewToken?: string;
   /**
    * When set, renders multiple side-by-side breakpoint frames (mobile-first,
    * §6.4). Each entry is a pixel width; the active breakpoint determines the
@@ -93,12 +95,14 @@ export interface ScreenMetadata {
   sourceType?: string;
   lod?: string;
   previewState?: string;
+  status?: string;
   title?: string;
   width?: number;
   height?: number;
   url?: string;
   previewUrl?: string;
   bridgeUrl?: string;
+  previewToken?: string;
 }
 
 export interface DuplicateRequest {

package/corpus/templates/design/app/components/design/multi-screen/wheel-gesture-state.ts

@@ -0,0 +1,12 @@
+// The editor renders one overview canvas at a time. Keeping the in-flight
+// gesture flag outside React lets hover handlers read it without causing a
+// render in the first wheel frame.
+let wheelCameraGestureActive = false;
+
+export function isWheelCameraGestureActive(): boolean {
+  return wheelCameraGestureActive;
+}
+
+export function setWheelCameraGestureActive(active: boolean): void {
+  wheelCameraGestureActive = active;
+}