@agent-native/core 0.92.12 → 0.94.0

package/corpus/templates/design/app/lib/design-import.ts

@@ -1,5 +1,10 @@
 import type { PortableStyleSnapshot } from "@/components/design/types";
 
+import {
+  isValidDesignClipboardManagedStyleSnapshot,
+  type DesignClipboardManagedStyleSnapshot,
+} from "./design-clipboard-managed-styles";
+
 export interface FigmaFidelityReport {
   exactCount: number;
   approximated: Array<{
@@ -31,6 +36,12 @@ export interface ImportResult {
   guidance?: string;
 }
 
+export interface ImportResultNotification {
+  variant: "success" | "warning";
+  title: string;
+  description?: string;
+}
+
 export const VISUAL_EDIT_CONNECT_COMMAND =
   "npx @agent-native/core@latest design connect --url 'http://localhost:<port>' --root . --daemon";
 
@@ -38,8 +49,11 @@ export const VISUAL_EDIT_INSTALL_COMMAND =
   "npx @agent-native/core@latest skills add visual-edit";
 
 export function hasFigmaClipboardPayload(value: string): boolean {
-  return /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
-    value,
+  return (
+    /\((figmeta|figma)\)[\s\S]*?\(\/(figmeta|figma)\)/i.test(value) ||
+    /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
+      value,
+    )
   );
 }
 
@@ -70,6 +84,40 @@ export function importResultSummary(
   return `Imported ${count} screens.`;
 }
 
+function isGenericFigFormatCaveat(warning: string): boolean {
+  return /Figma's \.fig format is proprietary and undocumented/i.test(warning);
+}
+
+/**
+ * Builds one import notification instead of stacking a success toast and a
+ * warning toast. The generic experimental `.fig` caveat is already disclosed
+ * beside the upload control, so only actionable conversion warnings belong in
+ * the transient result notification.
+ */
+export function importResultNotification(
+  result: ImportResult | undefined,
+  fallback: string,
+  options?: { fidelityWarnings?: string[] },
+): ImportResultNotification {
+  const title = importResultSummary(result, fallback);
+  const actionableWarnings = [
+    ...(result?.warnings ?? []).filter(
+      (warning) => !isGenericFigFormatCaveat(warning),
+    ),
+    ...(options?.fidelityWarnings ?? []),
+  ].slice(0, 3);
+
+  if (actionableWarnings.length === 0) {
+    return { variant: "success", title };
+  }
+
+  return {
+    variant: "warning",
+    title,
+    description: actionableWarnings.join("\n"),
+  };
+}
+
 // --- R83: safe fetch-response parsing for the file upload path ---
 //
 // A failed upload can come back as a non-JSON body — a plaintext "Internal
@@ -159,6 +207,7 @@ export interface DesignClipboardLayerEntry {
   rootNodeId?: string;
   sourceFileId: string;
   portableStyleSnapshot?: PortableStyleSnapshot;
+  managedStyleSnapshot?: DesignClipboardManagedStyleSnapshot;
 }
 
 export interface DesignClipboardScreenEntry {
@@ -180,6 +229,129 @@ export interface DesignClipboardPayload {
 }
 
 const CLIPBOARD_MARKER_PREFIX = "agent-native-clipboard-v1:";
+const MAX_CLIPBOARD_MARKER_DATA_CHARS = 16_000_000;
+const MAX_CLIPBOARD_CONTENT_CHARS = 8_000_000;
+const MAX_CLIPBOARD_LAYER_ENTRIES = 1_000;
+const MAX_CLIPBOARD_SCREEN_ENTRIES = 100;
+
+function clipboardString(value: unknown, max = 1_024): value is string {
+  return typeof value === "string" && value.length <= max;
+}
+
+function isPortableClipboardStyleSnapshot(value: unknown): boolean {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const snapshot = value as Record<string, unknown>;
+  if (snapshot.version !== 1 || !Array.isArray(snapshot.nodes)) return false;
+  if (snapshot.nodes.length > 5_000) return false;
+  if (
+    snapshot.rootSourceId !== undefined &&
+    !clipboardString(snapshot.rootSourceId)
+  ) {
+    return false;
+  }
+  return snapshot.nodes.every((rawNode) => {
+    if (!rawNode || typeof rawNode !== "object" || Array.isArray(rawNode)) {
+      return false;
+    }
+    const node = rawNode as Record<string, unknown>;
+    if (node.sourceId !== undefined && !clipboardString(node.sourceId)) {
+      return false;
+    }
+    if (
+      !Array.isArray(node.path) ||
+      node.path.length > 128 ||
+      !node.path.every((part) => Number.isInteger(part) && Number(part) >= 0)
+    ) {
+      return false;
+    }
+    if (!node.styles || typeof node.styles !== "object") return false;
+    const styles = Object.entries(node.styles as Record<string, unknown>);
+    return (
+      styles.length <= 256 &&
+      styles.every(
+        ([property, value]) =>
+          clipboardString(property, 256) && clipboardString(value, 16_384),
+      )
+    );
+  });
+}
+
+function validateDesignClipboardPayload(
+  value: unknown,
+): DesignClipboardPayload | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value as Record<string, unknown>;
+  if (payload.version !== 1 || !Array.isArray(payload.entries)) return null;
+  if (payload.entries.length > MAX_CLIPBOARD_LAYER_ENTRIES) return null;
+  const screens = payload.screens;
+  if (
+    screens !== undefined &&
+    (!Array.isArray(screens) || screens.length > MAX_CLIPBOARD_SCREEN_ENTRIES)
+  ) {
+    return null;
+  }
+  let contentChars = 0;
+  for (const rawEntry of payload.entries) {
+    if (!rawEntry || typeof rawEntry !== "object" || Array.isArray(rawEntry)) {
+      return null;
+    }
+    const entry = rawEntry as Record<string, unknown>;
+    if (
+      !clipboardString(entry.html, MAX_CLIPBOARD_CONTENT_CHARS) ||
+      !clipboardString(entry.sourceFileId) ||
+      (entry.rootNodeId !== undefined && !clipboardString(entry.rootNodeId)) ||
+      (entry.portableStyleSnapshot !== undefined &&
+        !isPortableClipboardStyleSnapshot(entry.portableStyleSnapshot)) ||
+      (entry.managedStyleSnapshot !== undefined &&
+        !isValidDesignClipboardManagedStyleSnapshot(entry.managedStyleSnapshot))
+    ) {
+      return null;
+    }
+    contentChars += entry.html.length;
+  }
+  for (const rawScreen of (screens as unknown[] | undefined) ?? []) {
+    if (
+      !rawScreen ||
+      typeof rawScreen !== "object" ||
+      Array.isArray(rawScreen)
+    ) {
+      return null;
+    }
+    const screen = rawScreen as Record<string, unknown>;
+    if (
+      !clipboardString(screen.filename, 512) ||
+      screen.filename.includes("..") ||
+      screen.filename.includes("/") ||
+      screen.filename.includes("\\") ||
+      !clipboardString(screen.content, MAX_CLIPBOARD_CONTENT_CHARS) ||
+      (screen.fileType !== undefined && !clipboardString(screen.fileType, 32))
+    ) {
+      return null;
+    }
+    if (screen.canvasFrame !== undefined) {
+      if (
+        !screen.canvasFrame ||
+        typeof screen.canvasFrame !== "object" ||
+        Array.isArray(screen.canvasFrame)
+      ) {
+        return null;
+      }
+      if (
+        Object.values(screen.canvasFrame as Record<string, unknown>).some(
+          (part) =>
+            typeof part !== "number" ||
+            !Number.isFinite(part) ||
+            Math.abs(part) > 10_000_000,
+        )
+      ) {
+        return null;
+      }
+    }
+    contentChars += screen.content.length;
+  }
+  if (contentChars > MAX_CLIPBOARD_CONTENT_CHARS) return null;
+  return value as DesignClipboardPayload;
+}
 
 function encodeClipboardMarkerData(payload: DesignClipboardPayload): string {
   // btoa is UTF-16-unsafe for non-Latin1 text; encodeURIComponent first so
@@ -190,18 +362,11 @@ function encodeClipboardMarkerData(payload: DesignClipboardPayload): string {
 function decodeClipboardMarkerData(
   data: string,
 ): DesignClipboardPayload | null {
+  if (data.length > MAX_CLIPBOARD_MARKER_DATA_CHARS) return null;
   try {
     const json = decodeURIComponent(atob(data));
     const parsed = JSON.parse(json) as unknown;
-    if (
-      !parsed ||
-      typeof parsed !== "object" ||
-      (parsed as { version?: unknown }).version !== 1 ||
-      !Array.isArray((parsed as { entries?: unknown }).entries)
-    ) {
-      return null;
-    }
-    return parsed as DesignClipboardPayload;
+    return validateDesignClipboardPayload(parsed);
   } catch {
     return null;
   }
@@ -214,8 +379,10 @@ function decodeClipboardMarkerData(
 export function serializeDesignClipboardPayload(
   visibleText: string,
   payload: DesignClipboardPayload,
+  trustToken?: string,
 ): string {
-  const marker = `<!--${CLIPBOARD_MARKER_PREFIX}${encodeClipboardMarkerData(payload)}-->`;
+  const trustedPrefix = trustToken ? `${trustToken}.` : "";
+  const marker = `<!--${CLIPBOARD_MARKER_PREFIX}${trustedPrefix}${encodeClipboardMarkerData(payload)}-->`;
   return `${visibleText}\n${marker}`;
 }
 
@@ -226,6 +393,7 @@ export function serializeDesignClipboardPayload(
  */
 export function parseDesignClipboardMarker(
   text: string | null | undefined,
+  expectedTrustToken?: string | null,
 ): DesignClipboardPayload | null {
   if (!text) return null;
   const markerIndex = text.lastIndexOf(`<!--${CLIPBOARD_MARKER_PREFIX}`);
@@ -233,5 +401,22 @@ export function parseDesignClipboardMarker(
   const start = markerIndex + 4 + CLIPBOARD_MARKER_PREFIX.length;
   const end = text.indexOf("-->", start);
   if (end === -1) return null;
-  return decodeClipboardMarkerData(text.slice(start, end));
+  const markerData = text.slice(start, end);
+  const separator = markerData.indexOf(".");
+  if (expectedTrustToken === null) return null;
+  if (expectedTrustToken !== undefined) {
+    if (
+      separator <= 0 ||
+      markerData.slice(0, separator) !== expectedTrustToken
+    ) {
+      return null;
+    }
+    return decodeClipboardMarkerData(markerData.slice(separator + 1));
+  }
+  // The low-level parser remains able to inspect legacy markers for migration
+  // and tests. Browser paste paths always provide the per-installation trust
+  // token and therefore reject unauthenticated clipboard HTML.
+  return decodeClipboardMarkerData(
+    separator > 0 ? markerData.slice(separator + 1) : markerData,
+  );
 }

package/corpus/templates/design/app/lib/desktop-design-preview.ts

@@ -0,0 +1,423 @@
+import { getFrameOrigin } from "@agent-native/core/client";
+import { useEffect, useRef, useState, type RefObject } from "react";
+
+const REQUEST_TYPE = "agentNative.designPreview.request";
+const STATE_TYPE = "agentNative.designPreview.state";
+const HEARTBEAT_MS = 750;
+
+type PreviewState = {
+  state?: string;
+  screenId?: string;
+  generation?: number;
+  reason?: string;
+  url?: string;
+  version?: number;
+  width?: number;
+  height?: number;
+  devicePixelRatio?: number;
+  mimeType?: string;
+  bytes?: unknown;
+};
+
+type PreviewRequest = {
+  action: "update" | "destroy" | "snapshot-ready";
+  appId: "design";
+  workspaceId: string;
+  connectionId: string;
+  screenId: string;
+  generation: number;
+  [key: string]: unknown;
+};
+
+interface DesktopPreviewBridge {
+  request(request: PreviewRequest): void;
+  onState(callback: (state: PreviewState) => void): () => void;
+}
+
+let lastGeneration = 0;
+
+function nextGeneration(): number {
+  lastGeneration = Math.max(lastGeneration + 1, Math.floor(Date.now() * 1_000));
+  return lastGeneration;
+}
+
+function getDirectBridge(): DesktopPreviewBridge | null {
+  const desktop = (
+    window as typeof window & {
+      agentNativeDesktop?: { designPreview?: DesktopPreviewBridge };
+    }
+  ).agentNativeDesktop;
+  return desktop?.designPreview ?? null;
+}
+
+function postRequest(request: PreviewRequest): void {
+  const direct = getDirectBridge();
+  if (direct) {
+    direct.request(request);
+    return;
+  }
+  const frameOrigin = getFrameOrigin();
+  if (!frameOrigin || window.parent === window) return;
+  window.parent.postMessage({ type: REQUEST_TYPE, data: request }, frameOrigin);
+}
+
+function connectionIdForUrl(url: string): string | null {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return null;
+  }
+}
+
+export function resolveDesktopDesignPreviewConnectionId(
+  connectionId: string | undefined,
+  url: string,
+): string | null {
+  const explicit = connectionId?.trim();
+  // Legacy URL screens predate connection metadata. Origin is a conservative
+  // compatibility fallback; current localhost/Fusion screens must pass their
+  // stable connection id so same-origin projects remain session-isolated.
+  return explicit || connectionIdForUrl(url);
+}
+
+function isIframeObscured(iframe: HTMLIFrameElement, rect: DOMRect): boolean {
+  const inset = 1;
+  const points = [
+    [rect.left + inset, rect.top + inset],
+    [rect.right - inset, rect.top + inset],
+    [rect.left + inset, rect.bottom - inset],
+    [rect.right - inset, rect.bottom - inset],
+    [rect.left + rect.width / 2, rect.top + rect.height / 2],
+  ];
+  return points.some(([x, y]) => {
+    if (x < 0 || y < 0 || x >= window.innerWidth || y >= window.innerHeight) {
+      return true;
+    }
+    return document.elementFromPoint(x, y) !== iframe;
+  });
+}
+
+export interface DesktopDesignNativePreviewOptions {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  url: string | null;
+  workspaceId?: string;
+  connectionId?: string;
+  screenId?: string;
+  enabled: boolean;
+  active?: boolean;
+  mode: "interact" | "edit" | "draw" | "comment";
+  presentation: "focused" | "overview";
+  scale: number;
+  rotationDegrees?: number;
+}
+
+export interface DesktopDesignNativePreviewSnapshot {
+  url: string;
+  version: number;
+  width: number;
+  height: number;
+  devicePixelRatio: number;
+  acknowledge(): void;
+}
+
+export function resolveDesktopDesignSnapshotLayer(options: {
+  hasSnapshot: boolean;
+  interactMode: boolean;
+  editMode: boolean;
+  hasLiveEditorBridge: boolean;
+}): "none" | "handoff" | "page" {
+  if (!options.hasSnapshot || options.interactMode) return "none";
+  if (options.editMode) {
+    return options.hasLiveEditorBridge ? "handoff" : "none";
+  }
+  return "page";
+}
+
+function normalizeSnapshotBytes(value: unknown): Uint8Array | null {
+  if (value instanceof Uint8Array) return Uint8Array.from(value);
+  if (value instanceof ArrayBuffer) return new Uint8Array(value.slice(0));
+  if (Array.isArray(value) && value.every((item) => Number.isInteger(item))) {
+    return Uint8Array.from(value as number[]);
+  }
+  if (
+    value &&
+    typeof value === "object" &&
+    Array.isArray((value as { data?: unknown }).data)
+  ) {
+    return Uint8Array.from((value as { data: number[] }).data);
+  }
+  return null;
+}
+
+/**
+ * Reports a focused URL-backed Interact surface to the desktop app. Browsers
+ * without the desktop bridge continue using the iframe unchanged. Electron's
+ * main process remains authoritative for eligibility, sender, URL, bounds,
+ * session, and generation validation.
+ */
+export function useDesktopDesignNativePreview(
+  options: DesktopDesignNativePreviewOptions,
+): DesktopDesignNativePreviewSnapshot | null {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const [snapshot, setSnapshot] =
+    useState<DesktopDesignNativePreviewSnapshot | null>(null);
+  const snapshotUrlRef = useRef<string | null>(null);
+  const snapshotVersionRef = useRef(0);
+  const reportRef = useRef<(() => void) | null>(null);
+
+  const clearSnapshot = () => {
+    if (snapshotUrlRef.current) URL.revokeObjectURL(snapshotUrlRef.current);
+    snapshotUrlRef.current = null;
+    snapshotVersionRef.current = 0;
+    setSnapshot(null);
+  };
+
+  useEffect(() => {
+    const initial = optionsRef.current;
+    if (initial.active === false) return;
+    const connectionId = initial.url
+      ? resolveDesktopDesignPreviewConnectionId(
+          initial.connectionId,
+          initial.url,
+        )
+      : null;
+    if (!initial.workspaceId || !initial.screenId || !connectionId) return;
+
+    const base = {
+      appId: "design" as const,
+      workspaceId: initial.workspaceId,
+      connectionId,
+      screenId: initial.screenId,
+    };
+    let frame = 0;
+    let disposed = false;
+
+    const report = () => {
+      if (disposed) return;
+      const current = optionsRef.current;
+      const iframe = current.iframeRef.current;
+      const currentConnectionId = current.url
+        ? resolveDesktopDesignPreviewConnectionId(
+            current.connectionId,
+            current.url,
+          )
+        : null;
+      if (
+        !iframe ||
+        !current.url ||
+        !current.workspaceId ||
+        !current.screenId ||
+        current.workspaceId !== base.workspaceId ||
+        current.screenId !== base.screenId ||
+        currentConnectionId !== base.connectionId
+      ) {
+        postRequest({
+          action: "destroy",
+          ...base,
+          generation: nextGeneration(),
+        });
+        return;
+      }
+
+      const rect = iframe.getBoundingClientRect();
+      const visible =
+        current.enabled &&
+        document.visibilityState === "visible" &&
+        rect.width > 0 &&
+        rect.height > 0 &&
+        rect.right > 0 &&
+        rect.bottom > 0 &&
+        rect.left < window.innerWidth &&
+        rect.top < window.innerHeight;
+      const borderRadius = Number.parseFloat(
+        window.getComputedStyle(iframe).borderTopLeftRadius,
+      );
+      postRequest({
+        action: "update",
+        ...base,
+        generation: nextGeneration(),
+        url: current.url,
+        previewBounds: {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+        },
+        clipBounds: {
+          x: 0,
+          y: 0,
+          width: window.innerWidth,
+          height: window.innerHeight,
+        },
+        mode: current.mode,
+        presentation: current.presentation,
+        scale: current.scale,
+        rotationDegrees: current.rotationDegrees ?? 0,
+        borderRadius: Number.isFinite(borderRadius) ? borderRadius : 0,
+        devicePixelRatio: window.devicePixelRatio || 1,
+        obscured: visible ? isIframeObscured(iframe, rect) : false,
+        visible,
+      });
+    };
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(report);
+    };
+    reportRef.current = schedule;
+
+    const iframe = initial.iframeRef.current;
+    const observer = new ResizeObserver(schedule);
+    if (iframe) observer.observe(iframe);
+    window.addEventListener("resize", schedule);
+    window.addEventListener("scroll", schedule, true);
+    document.addEventListener("visibilitychange", schedule);
+    window.visualViewport?.addEventListener("resize", schedule);
+    window.visualViewport?.addEventListener("scroll", schedule);
+    const heartbeat = window.setInterval(report, HEARTBEAT_MS);
+    schedule();
+
+    return () => {
+      disposed = true;
+      reportRef.current = null;
+      cancelAnimationFrame(frame);
+      window.clearInterval(heartbeat);
+      observer.disconnect();
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", schedule, true);
+      document.removeEventListener("visibilitychange", schedule);
+      window.visualViewport?.removeEventListener("resize", schedule);
+      window.visualViewport?.removeEventListener("scroll", schedule);
+      postRequest({
+        action: "destroy",
+        ...base,
+        generation: nextGeneration(),
+      });
+    };
+  }, [
+    options.active,
+    options.connectionId,
+    options.screenId,
+    options.url,
+    options.workspaceId,
+  ]);
+
+  useEffect(() => {
+    reportRef.current?.();
+  }, [
+    options.enabled,
+    options.mode,
+    options.presentation,
+    options.rotationDegrees,
+    options.scale,
+  ]);
+
+  useEffect(() => {
+    clearSnapshot();
+  }, [options.screenId, options.url]);
+
+  useEffect(() => {
+    if (options.enabled && options.mode === "interact") clearSnapshot();
+  }, [options.enabled, options.mode]);
+
+  useEffect(
+    () => () => {
+      if (snapshotUrlRef.current) URL.revokeObjectURL(snapshotUrlRef.current);
+      snapshotUrlRef.current = null;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const direct = getDirectBridge();
+    const handleState = (state: PreviewState) => {
+      if (
+        state.state === "snapshot" &&
+        state.screenId === optionsRef.current.screenId &&
+        state.mimeType === "image/png" &&
+        typeof state.version === "number" &&
+        typeof state.width === "number" &&
+        typeof state.height === "number" &&
+        typeof state.devicePixelRatio === "number"
+      ) {
+        if (state.version <= snapshotVersionRef.current) return;
+        const bytes = normalizeSnapshotBytes(state.bytes);
+        if (
+          !bytes ||
+          bytes.byteLength === 0 ||
+          bytes.byteLength > 8 * 1024 * 1024
+        ) {
+          clearSnapshot();
+          return;
+        }
+        const blobBytes = new Uint8Array(bytes.byteLength);
+        blobBytes.set(bytes);
+        const blobUrl = URL.createObjectURL(
+          new Blob([blobBytes.buffer], { type: "image/png" }),
+        );
+        if (snapshotUrlRef.current) URL.revokeObjectURL(snapshotUrlRef.current);
+        snapshotUrlRef.current = blobUrl;
+        snapshotVersionRef.current = state.version;
+        const current = optionsRef.current;
+        const connectionId = current.url
+          ? resolveDesktopDesignPreviewConnectionId(
+              current.connectionId,
+              current.url,
+            )
+          : null;
+        setSnapshot({
+          url: blobUrl,
+          version: state.version,
+          width: state.width,
+          height: state.height,
+          devicePixelRatio: state.devicePixelRatio,
+          acknowledge: () => {
+            if (!connectionId || !current.workspaceId || !current.screenId) {
+              return;
+            }
+            postRequest({
+              action: "snapshot-ready",
+              appId: "design",
+              workspaceId: current.workspaceId,
+              connectionId,
+              screenId: current.screenId,
+              generation: nextGeneration(),
+              version: state.version!,
+            });
+          },
+        });
+        return;
+      }
+      if (
+        state.state !== "blocked-navigation" ||
+        state.screenId !== optionsRef.current.screenId
+      ) {
+        return;
+      }
+      window.dispatchEvent(
+        new CustomEvent("agent-native:design-preview-navigation-blocked", {
+          detail: state,
+        }),
+      );
+    };
+    if (direct) return direct.onState(handleState);
+    if (window.parent === window) return;
+    const onMessage = (event: MessageEvent) => {
+      const frameOrigin = getFrameOrigin();
+      if (
+        !frameOrigin ||
+        event.source !== window.parent ||
+        event.origin !== frameOrigin ||
+        event.data?.type !== STATE_TYPE ||
+        !event.data.data
+      ) {
+        return;
+      }
+      handleState(event.data.data as PreviewState);
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, []);
+
+  return snapshot;
+}