@agent-native/core 0.92.10 → 0.92.12

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -1,3 +1,5 @@
+import type { FrameGeometry } from "./types";
+
 export function hasBoardSurfaceContent(html: string | undefined) {
   if (!html) return false;
   const bodyMatch = html.match(/<body\b[^>]*>([\s\S]*?)<\/body>/i);
@@ -53,6 +55,108 @@ function getCssPixelValue(style: string, name: string) {
   return Number.isFinite(parsed) ? parsed : null;
 }
 
+/**
+ * Returns the canvas-space bounds occupied by top-level board nodes.
+ *
+ * Board coordinates are persisted directly in each root node's absolute
+ * `left`/`top`. Keeping this parser string-only makes it usable during SSR and
+ * in the jsdom-less unit suite, while restricting the scan to root nodes keeps
+ * nested children from being counted twice with parent-relative coordinates.
+ */
+export function getBoardSurfaceContentBounds(
+  html: string | undefined,
+): FrameGeometry | null {
+  if (!html) return null;
+
+  const stack: Array<{
+    tagName: string;
+    nodeId: string;
+    offsetX: number;
+    offsetY: number;
+  }> = [];
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+
+  for (const match of html.matchAll(HTML_TAG_RE)) {
+    const token = match[0];
+    const tagName = match[1]?.toLowerCase();
+    if (!tagName) continue;
+
+    if (token.startsWith("</")) {
+      const index = findLastHtmlStackTagIndex(stack, tagName);
+      if (index >= 0) stack.splice(index);
+      continue;
+    }
+
+    const nodeId = getHtmlAttributeValue(token, "data-agent-native-node-id");
+    const style = getHtmlAttributeValue(token, "style");
+    const left = getCssPixelValue(style, "left") ?? 0;
+    const top = getCssPixelValue(style, "top") ?? 0;
+    const parentOffsetX = stack.reduce(
+      (total, entry) => total + entry.offsetX,
+      0,
+    );
+    const parentOffsetY = stack.reduce(
+      (total, entry) => total + entry.offsetY,
+      0,
+    );
+    const isDocumentRootTag =
+      tagName === "html" ||
+      tagName === "body" ||
+      tagName === "style" ||
+      tagName === "script";
+    if (nodeId && !isDocumentRootTag && !isAccidentalBoardBackdropTag(token)) {
+      const primitiveKind = getHtmlAttributeValue(
+        token,
+        "data-an-primitive",
+      ).toLowerCase();
+      // Auto-sized text has no persisted width/height. A one-pixel extent is
+      // not enough when it sits near a render-window edge. Reserve a modest
+      // intrinsic text box; the camera viewport remains the final authority
+      // for unusually long content.
+      const fallbackWidth = primitiveKind === "text" ? 256 : 1;
+      const fallbackHeight = primitiveKind === "text" ? 64 : 1;
+      const width = Math.max(
+        1,
+        getCssPixelValue(style, "width") ?? fallbackWidth,
+      );
+      const height = Math.max(
+        1,
+        getCssPixelValue(style, "height") ?? fallbackHeight,
+      );
+      const absoluteLeft = parentOffsetX + left;
+      const absoluteTop = parentOffsetY + top;
+      minX = Math.min(minX, absoluteLeft);
+      minY = Math.min(minY, absoluteTop);
+      maxX = Math.max(maxX, absoluteLeft + width);
+      maxY = Math.max(maxY, absoluteTop + height);
+    }
+
+    const selfClosing = token.endsWith("/>") || HTML_VOID_TAGS.has(tagName);
+    if (!selfClosing) {
+      stack.push({ tagName, nodeId, offsetX: left, offsetY: top });
+    }
+  }
+
+  if (
+    !Number.isFinite(minX) ||
+    !Number.isFinite(minY) ||
+    !Number.isFinite(maxX) ||
+    !Number.isFinite(maxY)
+  ) {
+    return null;
+  }
+
+  return {
+    x: minX,
+    y: minY,
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY),
+  };
+}
+
 function parseCssColor(value: string) {
   const trimmed = value.trim().toLowerCase();
   if (!trimmed || trimmed === "transparent") return null;
@@ -167,6 +271,59 @@ export function getBoardSurfaceRenderContent(html: string) {
   return `${BOARD_SURFACE_RENDER_STYLE}${renderHtml}`;
 }
 
+function stripExecutableStaticPreviewContent(html: string) {
+  return html
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>/gi, "") // i18n-ignore static-preview sanitizer regex, not visible UI copy
+    .replace(/<script\b[^>]*\/?\s*>/gi, "")
+    .replace(/<(iframe|object|audio|video)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "") // i18n-ignore static-preview sanitizer regex, not visible UI copy
+    .replace(/<(?:iframe|object|embed|audio|video|source)\b[^>]*\/?\s*>/gi, "")
+    .replace(/<(?:link|meta|base)\b[^>]*>/gi, "")
+    .replace(/@import\s+(?:url\([^)]*\)|["'][^"']*["'])\s*[^;]*;/gi, "")
+    .replace(/url\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "none")
+    .replace(/<(?:img|image|use)\b[^>]*>/gi, (tag) =>
+      tag.replace(
+        /\s+(?:src|srcset|href|xlink:href)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi,
+        "",
+      ),
+    )
+    .replace(/\s+on[a-z][\w:-]*\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+}
+
+/**
+ * Produces the inert, compressed document painted behind the live board
+ * window at very low zoom. The document is also rendered in an iframe with an
+ * empty sandbox, but removing executable markup here is defense in depth and
+ * guarantees Alpine/React never starts a duplicate runtime.
+ *
+ * Root offsets use the same `translate` seam as the interactive finite board
+ * iframe. Scaling the body into a small browser-safe viewport makes the whole
+ * logical board paintable without allocating or scrolling a 131k iframe.
+ */
+export function getBoardSurfaceStaticPreviewContent(args: {
+  html: string;
+  logicalGeometry: FrameGeometry;
+  viewport: { width: number; height: number };
+}) {
+  const renderHtml = stripExecutableStaticPreviewContent(
+    getBoardSurfaceRenderContent(args.html),
+  );
+  const width = Math.max(1, args.logicalGeometry.width);
+  const height = Math.max(1, args.logicalGeometry.height);
+  const viewportWidth = Math.max(1, args.viewport.width);
+  const viewportHeight = Math.max(1, args.viewport.height);
+  const scale = Math.min(viewportWidth / width, viewportHeight / height);
+  const offsetX = -args.logicalGeometry.x;
+  const offsetY = -args.logicalGeometry.y;
+  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
+  if (/<\/head>/i.test(renderHtml)) {
+    return renderHtml.replace(/<\/head>/i, `${style}</head>`);
+  }
+  if (/<body\b/i.test(renderHtml)) {
+    return renderHtml.replace(/<body\b/i, `${style}<body`);
+  }
+  return `${style}${renderHtml}`;
+}
+
 /** Simple djb2-xor string hash, used to build cheap cache keys elsewhere in
  *  the multi-screen canvas (board content signatures, primitive-parse cache
  *  keys, etc). */

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

@@ -18,6 +18,59 @@ export interface ScreenViewportSize {
   height: number;
 }
 
+/** 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
+ * two surfaces can never disagree about which screen is above another. */
+export function getCanonicalScreenStack(
+  screens: ReadonlyArray<{ id: string }>,
+  geometryById: Record<string, Partial<FrameGeometry> | undefined>,
+): string[] {
+  return screens
+    .map((screen, index) => ({
+      id: screen.id,
+      index,
+      z: Number.isFinite(geometryById[screen.id]?.z)
+        ? geometryById[screen.id]!.z!
+        : index,
+    }))
+    .sort((a, b) => a.z - b.z || a.index - b.index)
+    .map(({ id }) => id);
+}
+
+/** Reorders a canonical bottom-to-top stack using DOM placement semantics:
+ * `before` paints below the target and `after` paints above it. `inside` is
+ * not a screen-stack operation (it remains the layer-into-screen drop path). */
+export function reorderCanonicalScreenStack(args: {
+  orderedIds: readonly string[];
+  draggedIds: readonly string[];
+  targetId: string;
+  placement: "before" | "after" | "inside";
+}): string[] | null {
+  if (args.placement === "inside") return null;
+  const orderedIds = Array.from(new Set(args.orderedIds));
+  const orderedIdSet = new Set(orderedIds);
+  if (!orderedIdSet.has(args.targetId)) return null;
+  const draggedIdSet = new Set(
+    args.draggedIds.filter(
+      (id) => orderedIdSet.has(id) && id !== args.targetId,
+    ),
+  );
+  if (draggedIdSet.size === 0) return null;
+  const moving = orderedIds.filter((id) => draggedIdSet.has(id));
+  const remaining = orderedIds.filter((id) => !draggedIdSet.has(id));
+  const targetIndex = remaining.indexOf(args.targetId);
+  if (targetIndex < 0) return null;
+  const insertionIndex =
+    args.placement === "before" ? targetIndex : targetIndex + 1;
+  const next = [
+    ...remaining.slice(0, insertionIndex),
+    ...moving,
+    ...remaining.slice(insertionIndex),
+  ];
+  return next.every((id, index) => id === orderedIds[index]) ? null : next;
+}
+
 export function getBreakpointFrameGeometry(args: {
   widthPx: number;
   naturalAspect: number;

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

@@ -1,10 +1,23 @@
 import type { CSSProperties } from "react";
 
 import type { FrameGeometry } from "./types";
+import type { Point } from "./types";
 
 export const OVERVIEW_FRAME_WIDTH = 320;
 export const SURFACE_PADDING = 240;
 
+// Chromium does not reliably paint the far interior of the old
+// 131,072×131,072 board iframe. Keep the logical board that large for
+// persistence and hit testing, but render only a stable, chunk-snapped window
+// around the current design. Four-kilopixel chunks plus two chunks of minimum
+// extent leave ample room for nearby drawing/movement without re-keying the
+// iframe on every small edit.
+export const BOARD_SURFACE_RENDER_CHUNK = 4096;
+export const BOARD_SURFACE_RENDER_PADDING = 2048;
+export const BOARD_SURFACE_RENDER_MIN_SIZE = 8192;
+export const BOARD_SURFACE_RENDER_MAX_SIZE = 24_576;
+export const BOARD_SURFACE_STATIC_PREVIEW_SIZE = 4096;
+
 export const LINEUP_RECENTER_SUPPRESS_MAX_AGE_MS = 10_000;
 
 export interface LineupRecenterDuplicateArm {
@@ -60,3 +73,174 @@ export function getBoardSurfaceLayerStyle(args: {
     zIndex: 0,
   };
 }
+
+/**
+ * The interactive board iframe intentionally stays below Chromium's reliable
+ * paint limit. At very low zoom the visible world can be wider than that
+ * window, so a script-disabled static replica supplies visual coverage behind
+ * it. Keep the fallback off at ordinary zoom where the live window already
+ * covers the viewport.
+ */
+export function shouldRenderBoardSurfaceStaticPreview(args: {
+  zoom: number;
+  viewportGeometry?: FrameGeometry | null;
+  renderGeometry: FrameGeometry;
+}) {
+  if (args.viewportGeometry) {
+    return (
+      args.viewportGeometry.width > args.renderGeometry.width ||
+      args.viewportGeometry.height > args.renderGeometry.height
+    );
+  }
+  // ResizeObserver has not reported yet. The 5% fallback matches a 1229px
+  // viewport against the 24,576-world-pixel live cap and avoids one blank
+  // first paint at the minimum 2% zoom.
+  return args.zoom <= 5;
+}
+
+export function getBoardSurfaceStaticPreviewViewport(
+  logicalGeometry: FrameGeometry,
+) {
+  const longestAxis = Math.max(
+    1,
+    logicalGeometry.width,
+    logicalGeometry.height,
+  );
+  const scale = Math.min(1, BOARD_SURFACE_STATIC_PREVIEW_SIZE / longestAxis);
+  return {
+    width: Math.max(1, logicalGeometry.width * scale),
+    height: Math.max(1, logicalGeometry.height * scale),
+  };
+}
+
+function geometryExtent(geometry: FrameGeometry) {
+  return {
+    minX: geometry.x,
+    minY: geometry.y,
+    maxX: geometry.x + Math.max(1, geometry.width),
+    maxY: geometry.y + Math.max(1, geometry.height),
+  };
+}
+
+function fitRenderAxis(args: {
+  desiredMin: number;
+  desiredMax: number;
+  logicalMin: number;
+  logicalMax: number;
+  focus: number;
+}) {
+  const chunk = BOARD_SURFACE_RENDER_CHUNK;
+  const logicalSize = Math.max(1, args.logicalMax - args.logicalMin);
+  const maxSize = Math.min(BOARD_SURFACE_RENDER_MAX_SIZE, logicalSize);
+  const minSize = Math.min(BOARD_SURFACE_RENDER_MIN_SIZE, maxSize);
+  let min =
+    Math.floor((args.desiredMin - BOARD_SURFACE_RENDER_PADDING) / chunk) *
+    chunk;
+  let max =
+    Math.ceil((args.desiredMax + BOARD_SURFACE_RENDER_PADDING) / chunk) * chunk;
+
+  if (max - min < minSize) {
+    const center = (min + max) / 2;
+    min = Math.floor((center - minSize / 2) / chunk) * chunk;
+    max = min + minSize;
+  }
+
+  if (max - min > maxSize) {
+    // A single browser iframe cannot safely cover arbitrarily distant board
+    // islands. Prefer the active design focus while keeping the render window
+    // chunk-aligned; persistence and geometry hit testing still use the full
+    // logical board and remain lossless.
+    min = Math.floor((args.focus - maxSize / 2) / chunk) * chunk;
+    max = min + maxSize;
+  }
+
+  if (min < args.logicalMin) {
+    max += args.logicalMin - min;
+    min = args.logicalMin;
+  }
+  if (max > args.logicalMax) {
+    min -= max - args.logicalMax;
+    max = args.logicalMax;
+  }
+  min = Math.max(args.logicalMin, min);
+  max = Math.min(args.logicalMax, Math.max(min + 1, max));
+  return { origin: min, size: max - min };
+}
+
+/**
+ * Builds the finite iframe window used to paint the otherwise-infinite board.
+ * The returned geometry is deliberately separate from the logical board
+ * geometry so persisted coordinates and broad hit-testing retain their full
+ * range while Chromium only has to paint a browser-safe surface.
+ */
+export function getBoardSurfaceRenderGeometry(args: {
+  logicalGeometry: FrameGeometry;
+  contentBounds?: FrameGeometry | null;
+  screenGeometries?: readonly FrameGeometry[];
+  focus?: { x: number; y: number };
+}): FrameGeometry {
+  const candidates = [
+    ...(args.contentBounds ? [args.contentBounds] : []),
+    ...(args.screenGeometries ?? []),
+  ];
+  const logical = geometryExtent(args.logicalGeometry);
+  const extents = candidates.map(geometryExtent);
+  const desired =
+    extents.length > 0
+      ? {
+          minX: Math.min(...extents.map((extent) => extent.minX)),
+          minY: Math.min(...extents.map((extent) => extent.minY)),
+          maxX: Math.max(...extents.map((extent) => extent.maxX)),
+          maxY: Math.max(...extents.map((extent) => extent.maxY)),
+        }
+      : {
+          minX: 0,
+          minY: 0,
+          maxX: 1,
+          maxY: 1,
+        };
+  const focus = args.focus ?? {
+    x: (desired.minX + desired.maxX) / 2,
+    y: (desired.minY + desired.maxY) / 2,
+  };
+  const xAxis = fitRenderAxis({
+    desiredMin: desired.minX,
+    desiredMax: desired.maxX,
+    logicalMin: logical.minX,
+    logicalMax: logical.maxX,
+    focus: focus.x,
+  });
+  const yAxis = fitRenderAxis({
+    desiredMin: desired.minY,
+    desiredMax: desired.maxY,
+    logicalMin: logical.minY,
+    logicalMax: logical.maxY,
+    focus: focus.y,
+  });
+  return {
+    x: xAxis.origin,
+    y: yAxis.origin,
+    width: xAxis.size,
+    height: yAxis.size,
+  };
+}
+
+export function boardPointToBoardSurfaceLocalPoint(
+  point: Point,
+  renderGeometry: FrameGeometry,
+): Point {
+  return {
+    x: point.x - renderGeometry.x,
+    y: point.y - renderGeometry.y,
+  };
+}
+
+export function boardSurfaceLocalPointToBoardPoint(
+  point: Point,
+  renderGeometry: FrameGeometry,
+): Point {
+  return {
+    x: renderGeometry.x + point.x,
+    y: renderGeometry.y + point.y,
+  };
+}