@agent-native/core-corpus 0.213.1 → 0.216.0

package/corpus/templates/design/actions/list-design-extensions.ts

@@ -2,12 +2,11 @@
  * list-design-extensions — read action.
  *
  * Returns the first-party Design Studio extensions with their capability and
- * availability status.  The four built-in extensions are:
+ * availability status.  The three built-in extensions are:
  *
  *   1. Asset Library     — selection-aware asset insertion (ships now).
- *   2. Shader Fills      — GPU shader fill previews (preview-only now; apply gated).
- *   3. Token Auditor     — reads token usage across the design and flags clashes.
- *   4. Motion Presets    — one-click motion preset application.
+ *   2. Token Auditor     — reads token usage across the design and flags clashes.
+ *   3. Motion Presets    — one-click motion preset application.
  *
  * These are FIRST-PARTY extensions described as static metadata — they do not
  * live in the extensions SQL table (they are capabilities of the design app,
@@ -104,60 +103,6 @@ const FIRST_PARTY_EXTENSIONS: FirstPartyDesignExtension[] = [
     slotId: "design.editor.inspector",
   },
 
-  {
-    id: "design.shader-fills",
-    name: "Shader Fills",
-    description:
-      "GPU-accelerated shader fill presets (MeshGradient, GrainGradient, Voronoi, " +
-      "Metaballs, Warp, GodRays, Dithering, PaperTexture).  Preview as CSS gradient " +
-      "without writing anything; full apply is gated until runtime rendering + " +
-      "source-write + fallback + diff proof are all in place.",
-    icon: "Sparkles",
-    availability: "preview-only",
-    availabilityNote:
-      "Preview-only.  Call preview-shader-fill for a live CSS preview or " +
-      "apply-shader for a manual-edit code snippet.  apply-shader-fill is " +
-      "gated and will return NOT_YET_AVAILABLE until safety conditions are met.",
-    capabilities: [
-      {
-        id: "catalog",
-        label: "Browse shader preset catalog",
-        status: "available",
-        reason: "Call get-shader to see all 8 presets.",
-      },
-      {
-        id: "preview",
-        label: "Preview shader fill as CSS gradient",
-        status: "available",
-        reason:
-          "Call preview-shader-fill — returns previewCss + bridgeMessage; no writes.",
-      },
-      {
-        id: "code-snippet",
-        label: "Generate code snippet for manual edit",
-        status: "available",
-        reason:
-          "Call apply-shader — returns JSX import + snippet or HTML bridge mount.",
-      },
-      {
-        id: "apply",
-        label: "Apply shader fill (persist to design)",
-        status: "preview-only",
-        reason:
-          "apply-shader-fill is GATED until: (1) runtime WebGL rendering verified via " +
-          "captureSnapshot, (2) source-write bridge available, (3) CSS fallback embedded " +
-          "alongside canvas, (4) before/after diff produced.  Today it returns gated:true.",
-      },
-    ],
-    actions: [
-      "get-shader",
-      "preview-shader-fill",
-      "apply-shader",
-      "apply-shader-fill",
-    ],
-    slotId: "design.editor.inspector",
-  },
-
   {
     id: "design.token-auditor",
     name: "Token Auditor",

package/corpus/templates/design/actions/request-native-local-export.ts

@@ -1,9 +1,11 @@
 import { defineAction, fail } from "@agent-native/core/action";
-import { compareAndSetAppState } from "@agent-native/core/application-state";
+import { compareAndSetManyAppState } from "@agent-native/core/application-state";
 
 import { parseEffectsFromHtml } from "../shared/native-effects.js";
 import {
   NATIVE_LOCAL_EXPORT_PENDING_MS,
+  NATIVE_RENDER_CONTEXT_LEDGER_KEY,
+  nativeLocalExportRevisionKey,
   nativeLocalExportRequestSchema,
   nativeRenderContextSchema,
   nativeLocalExportStateKey,
@@ -13,10 +15,11 @@ import {
   assertNativeLocalExportEditor,
   expireNativeLocalExportState,
   readNativeLocalExportState,
+  readNativeLocalExportRevision,
   readNativeLocalExportVersion,
   requireNativeLocalExportTabId,
 } from "./_native-local-export-server.js";
-import { resolveNativeRenderContextTarget } from "./_native-render-contexts.js";
+import { readNativeRenderContextSnapshot } from "./_native-render-contexts.js";
 
 export default defineAction({
   mcpAnnotations: {
@@ -35,10 +38,18 @@ export default defineAction({
   }),
   http: { method: "POST" },
   run: async ({ targetTabId, ...args }) => {
-    const tabId = targetTabId
-      ? await resolveNativeRenderContextTarget(args.designId, targetTabId)
-      : requireNativeLocalExportTabId();
+    const tabId = targetTabId ?? requireNativeLocalExportTabId();
     if (!targetTabId) await assertNativeLocalExportEditor(args.designId);
+    const snapshot = await readNativeRenderContextSnapshot(
+      args.designId,
+      tabId,
+    );
+    const context = snapshot.contexts.find((entry) => entry.tabId === tabId);
+    if (targetTabId && !context)
+      fail("No live matching Design editor context was found.", {
+        errorCode: "native_export_context_not_found",
+        statusCode: 404,
+      });
     const liveSource = await readNativeLocalExportVersion(
       args.designId,
       args.fileId,
@@ -62,6 +73,7 @@ export default defineAction({
     const current = rawCurrent
       ? await expireNativeLocalExportState(rawCurrent)
       : null;
+    const revision = await readNativeLocalExportRevision(args.designId, tabId);
     if (
       current?.status === "pending" ||
       current?.status === "running" ||
@@ -78,11 +90,25 @@ export default defineAction({
       schemaVersion: 1,
       requestId: crypto.randomUUID(),
       tabId,
+      ...(context?.documentId ? { targetDocumentId: context.documentId } : {}),
       status: "pending",
       issuedAt: now,
       expiresAt: now + NATIVE_LOCAL_EXPORT_PENDING_MS,
     };
-    if (!(await compareAndSetAppState(key, current, request)))
+    const committed = await compareAndSetManyAppState([
+      {
+        key: NATIVE_RENDER_CONTEXT_LEDGER_KEY,
+        expectedValue: snapshot.rawLedger,
+        nextValue: snapshot.rawLedger ?? { schemaVersion: 1, contexts: [] },
+      },
+      {
+        key: nativeLocalExportRevisionKey(args.designId, tabId),
+        expectedValue: revision,
+        nextValue: { schemaVersion: 1, revision: crypto.randomUUID() },
+      },
+      { key, expectedValue: current, nextValue: request },
+    ]);
+    if (!committed)
       fail("The local export request changed concurrently. Retry.", {
         errorCode: "native_export_request_conflict",
         statusCode: 409,

package/corpus/templates/design/actions/run-design-extension-action.ts

@@ -4,7 +4,6 @@ import { z } from "zod";
 
 const FIRST_PARTY_IDS = [
   "design.asset-library",
-  "design.shader-fills",
   "design.token-auditor",
   "design.motion-presets",
 ] as const;
@@ -39,33 +38,6 @@ const CAPABILITY_ROUTES: Record<string, CapabilityRoute> = {
     readOnly: false,
   },
 
-  "design.shader-fills:catalog": {
-    action: "get-shader",
-    paramHint: "Call get-shader with an optional source context.",
-    readOnly: true,
-  },
-  "design.shader-fills:preview": {
-    action: "preview-shader-fill",
-    paramHint:
-      "Call preview-shader-fill with { descriptor: { preset, params?, colors?, speed? }, target? }.  Returns previewCss + bridgeMessage; no writes.",
-    readOnly: true,
-  },
-  "design.shader-fills:code-snippet": {
-    action: "apply-shader",
-    paramHint:
-      "Call apply-shader with { descriptor, surface?, target?, source? }.  Returns JSX import + snippet or HTML bridge mount for manual insertion.",
-    readOnly: true,
-  },
-  "design.shader-fills:apply": {
-    action: "apply-shader-fill",
-    paramHint:
-      "Call apply-shader-fill with { descriptor, target?, source?, surface? }.  NOTE: currently returns gated:true — all safety conditions are unmet.  Use preview or code-snippet instead.",
-    readOnly: false,
-    gated: true,
-    gateReason:
-      "apply-shader-fill is GATED until runtime rendering + source-write path + CSS fallback + diff proof are all in place.  It will return { ok: false, gated: true } today.",
-  },
-
   "design.token-auditor:index": {
     action: "index-design-tokens",
     paramHint:
@@ -130,7 +102,6 @@ duplicating action logic.
 
 Supported first-party extensions (extensionId):
   design.asset-library   — browse / insert / generate assets.
-  design.shader-fills    — catalog / preview / code-snippet / apply (apply is GATED).
   design.token-auditor   — index / preview-edit / apply-edit / write-source.
   design.motion-presets  — preview / apply / write-source.
 

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

@@ -70,7 +70,6 @@ import {
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
-import { installNativeWorkerBroker } from "@/components/design/bridge/native-worker-broker";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import {
@@ -174,10 +173,7 @@ import {
   inlineDesignStylesheets,
   useDesignStylesheets,
 } from "./design-canvas/linked-stylesheets";
-import {
-  withLocalRuntimes,
-  withNativeShaderRuntime,
-} from "./design-canvas/local-runtime";
+import { withLocalRuntimes } from "./design-canvas/local-runtime";
 import { LocalNetworkAccessPrompt } from "./design-canvas/LocalNetworkAccessPrompt";
 import {
   applyMotionPathEdit,
@@ -187,6 +183,12 @@ import type {
   MotionPathTracksChangeResult,
   MotionTrackWire,
 } from "./design-canvas/motion-types";
+import {
+  connectNativePreviewSurface,
+  nativePreviewSurfaceDocumentKey,
+  prepareNativePreviewSurface,
+  type NativePreviewSurfaceDocument,
+} from "./design-canvas/native-preview-surface";
 import {
   acknowledgePendingTextInsert,
   beginPendingTextDelivery,
@@ -391,8 +393,6 @@ function isAllowedFusionOrigin(
   return host === "builder.io" || host.endsWith(".builder.io");
 }
 
-if (typeof window !== "undefined") installNativeWorkerBroker(window);
-
 const EDITABLE_FOCUS_SELECTOR =
   'input, textarea, select, [contenteditable="true"], [role="textbox"], [data-agent-native-text-editing]';
 
@@ -562,6 +562,7 @@ ${editorChromeBridgeScript}
 interface ReplacedPreviewFrame {
   key: string;
   srcDoc: string;
+  nativePreview: NativePreviewSurfaceDocument | null;
   sandbox: string;
   name: string | undefined;
   interactMode: boolean;
@@ -722,6 +723,7 @@ interface DesignCanvasProps {
     contentOffsetY?: number;
   };
   boardSurface?: boolean;
+  nativeAnimationEpochMs?: number;
   fitRootBodyToFrame?: boolean;
   runtimeReplacementContent?: string;
   authoredSourceContent?: string;
@@ -965,11 +967,6 @@ interface DesignCanvasProps {
   ) => MotionPathTracksChangeResult | void;
   previewWidthPx?: number;
   previewHeightPx?: number;
-  shaderFillPreview?: {
-    selector?: string;
-    nodeId?: string;
-    css: string;
-  } | null;
   gradientEditTarget?: {
     nodeId: string;
     cssValue: string;
@@ -1510,6 +1507,7 @@ export function DesignCanvas({
   deviceFrame,
   embeddedFrame,
   boardSurface = false,
+  nativeAnimationEpochMs,
   fitRootBodyToFrame,
   runtimeReplacementContent,
   authoredSourceContent,
@@ -1616,7 +1614,6 @@ export function DesignCanvas({
   previewWidthPx,
   previewHeightPx,
   onComponentSourceJump,
-  shaderFillPreview,
   gradientEditTarget,
   onGradientEditChange,
   statePreviewTarget,
@@ -1631,14 +1628,54 @@ export function DesignCanvas({
   const t = useT();
   const { resolvedTheme } = useTheme();
   const browserOrigin = useBrowserOrigin();
+  const [replacedFrame, setReplacedFrame] =
+    useState<ReplacedPreviewFrame | null>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const replacedFrameRef = useRef<HTMLIFrameElement>(null);
-  const setIframeRef = useCallback((next: HTMLIFrameElement | null) => {
-    setNativePreviewIframeRef(iframeRef, next);
-  }, []);
-  const setReplacedFrameRef = useCallback((next: HTMLIFrameElement | null) => {
-    setNativePreviewIframeRef(replacedFrameRef, next);
-  }, []);
+  const nativeInteractivePreviewCleanupsRef = useRef(
+    new Map<HTMLIFrameElement, () => void>(),
+  );
+  const nativeInteractivePreviewRef =
+    useRef<NativePreviewSurfaceDocument | null>(null);
+  const replacedNativeInteractivePreviewRef =
+    useRef<NativePreviewSurfaceDocument | null>(null);
+  const setPreviewFrameRef = useCallback(
+    (
+      ref: React.RefObject<HTMLIFrameElement | null>,
+      next: HTMLIFrameElement | null,
+    ) => {
+      const previous = ref.current;
+      if (previous === next) return;
+      if (previous && previous !== next) {
+        nativeInteractivePreviewCleanupsRef.current.get(previous)?.();
+        nativeInteractivePreviewCleanupsRef.current.delete(previous);
+      }
+      setNativePreviewIframeRef(ref, next);
+      if (next)
+        nativeInteractivePreviewCleanupsRef.current.set(
+          next,
+          connectNativePreviewSurface(
+            next,
+            ref === replacedFrameRef
+              ? replacedNativeInteractivePreviewRef.current
+              : nativeInteractivePreviewRef.current,
+          ),
+        );
+    },
+    [],
+  );
+  const setIframeRef = useCallback(
+    (next: HTMLIFrameElement | null) => {
+      setPreviewFrameRef(iframeRef, next);
+    },
+    [setPreviewFrameRef],
+  );
+  const setReplacedFrameRef = useCallback(
+    (next: HTMLIFrameElement | null) => {
+      setPreviewFrameRef(replacedFrameRef, next);
+    },
+    [setPreviewFrameRef],
+  );
   const canvasFocusProbeRequestIdRef = useRef(0);
   const pendingCanvasFocusProbeRef = useRef<{
     requestId: number;
@@ -2615,13 +2652,14 @@ export function DesignCanvas({
     iframePreviewUrlRef.current.url = resolvedExternalPreviewUrl;
   }
   const externalPreviewUrl = iframePreviewUrlRef.current.url;
-  const syncNativeShaderApprovals = useNativeShaderApprovals({
-    designId,
-    fileId: screenId,
-    enabled:
-      !externalPreviewUrl &&
-      content.includes("application/x-agent-native-effects"),
-  });
+  const { syncFrame: syncNativeShaderApprovals, approvedDefinitionHashes } =
+    useNativeShaderApprovals({
+      designId,
+      fileId: screenId,
+      enabled:
+        !externalPreviewUrl &&
+        content.includes("application/x-agent-native-effects"),
+    });
   const runtimeVerificationUrl = useMemo(() => {
     if (!runtimeVerificationRequest || !externalPreviewUrl) return null;
     return externalPreviewUrl;
@@ -3677,10 +3715,7 @@ export function DesignCanvas({
     if (isEmbeddedFrame) {
       frameDocument = appendContentSizeReporter(frameDocument);
     }
-    return withNativeShaderRuntime(
-      injectSessionReplayIframeBootstrap(frameDocument),
-      true,
-    );
+    return injectSessionReplayIframeBootstrap(frameDocument);
     // editorChromeScaleX/Y are intentionally NOT deps: they only seed the initial
     // baked chrome scale. Live zoom updates flow through the set-editor-chrome-scale
     // postMessage above. Including them here rebuilds srcdoc on every zoom commit,
@@ -6113,22 +6148,6 @@ export function DesignCanvas({
     }
     sendMotionPathEditingState();
     sendMotionOriginEditingState();
-    if (shaderFillPreview) {
-      iframe.contentWindow?.postMessage(
-        {
-          type: "shader-fill-preview",
-          selector: shaderFillPreview.selector ?? "",
-          nodeId: shaderFillPreview.nodeId ?? "",
-          css: shaderFillPreview.css,
-        },
-        "*",
-      );
-    } else {
-      iframe.contentWindow?.postMessage(
-        { type: "shader-fill-preview-clear" },
-        "*",
-      );
-    }
     iframe.contentWindow?.postMessage(
       {
         type: "state-preview",
@@ -6161,7 +6180,6 @@ export function DesignCanvas({
     selectedSelectorGroups,
     passiveSelectionStyle,
     readOnly,
-    shaderFillPreview,
     spacePanActive,
     statePreviewTarget,
     tweakValues,
@@ -6280,24 +6298,6 @@ export function DesignCanvas({
     sendMotionOriginEditingState,
   ]);
 
-  useEffect(() => {
-    const win = iframeRef.current?.contentWindow;
-    if (!win) return;
-    if (!shaderFillPreview) {
-      win.postMessage({ type: "shader-fill-preview-clear" }, "*");
-    } else {
-      win.postMessage(
-        {
-          type: "shader-fill-preview",
-          selector: shaderFillPreview.selector ?? "",
-          nodeId: shaderFillPreview.nodeId ?? "",
-          css: shaderFillPreview.css,
-        },
-        "*",
-      );
-    }
-  }, [shaderFillPreview]);
-
   useEffect(() => {
     const win = iframeRef.current?.contentWindow;
     if (!win) return;
@@ -7220,25 +7220,6 @@ export function DesignCanvas({
     );
   }, []);
 
-  const sendShaderFillPreview = useCallback(
-    (selector: string, nodeId: string, css: string) => {
-      const win = iframeRef.current?.contentWindow;
-      if (!win) return;
-      win.postMessage(
-        { type: "shader-fill-preview", selector, nodeId, css },
-        "*",
-      );
-    },
-    [],
-  );
-
-  const clearShaderFillPreview = useCallback(() => {
-    iframeRef.current?.contentWindow?.postMessage(
-      { type: "shader-fill-preview-clear" },
-      "*",
-    );
-  }, []);
-
   const replacePreviewContent = useCallback(
     (
       nextContent: string,
@@ -7735,9 +7716,6 @@ export function DesignCanvas({
     (window as any).__designCanvasDeleteElement = deleteRuntimeElement;
     (window as any).__designCanvasSendMotionPreview = sendMotionPreview;
     (window as any).__designCanvasClearMotionPreview = clearMotionPreview;
-    (window as any).__designCanvasSendShaderFillPreview = sendShaderFillPreview;
-    (window as any).__designCanvasClearShaderFillPreview =
-      clearShaderFillPreview;
     return () => {
       // Identity-guard each delete so a stale unmounting instance never clobbers
       // a freshly mounted instance's bridge during a remount race.
@@ -7777,18 +7755,6 @@ export function DesignCanvas({
       ) {
         delete (window as any).__designCanvasClearMotionPreview;
       }
-      if (
-        (window as any).__designCanvasSendShaderFillPreview ===
-        sendShaderFillPreview
-      ) {
-        delete (window as any).__designCanvasSendShaderFillPreview;
-      }
-      if (
-        (window as any).__designCanvasClearShaderFillPreview ===
-        clearShaderFillPreview
-      ) {
-        delete (window as any).__designCanvasClearShaderFillPreview;
-      }
     };
   }, [
     deleteRuntimeElement,
@@ -7799,8 +7765,6 @@ export function DesignCanvas({
     sendInteractionStatePreviewStyle,
     sendMotionPreview,
     clearMotionPreview,
-    sendShaderFillPreview,
-    clearShaderFillPreview,
   ]);
 
   const deviceDimensions: Record<
@@ -8246,6 +8210,59 @@ export function DesignCanvas({
     parentOrigin: browserOrigin ?? undefined,
     liveApp: interactMode,
   });
+  const nativeInteractivePreview = useMemo(
+    () =>
+      externalPreviewUrl
+        ? null
+        : prepareNativePreviewSurface({
+            html: privateScreenshotPreview.html,
+            sandbox: previewIframeSandbox,
+            profile: "interactive",
+            approvedHashes: approvedDefinitionHashes,
+            baseHref: browserOrigin ? window.location.href : undefined,
+            alwaysRuntime: true,
+            animationEpochMs: boardSurface ? nativeAnimationEpochMs : undefined,
+          }),
+    [
+      approvedDefinitionHashes,
+      boardSurface,
+      browserOrigin,
+      externalPreviewUrl,
+      nativeAnimationEpochMs,
+      privateScreenshotPreview.html,
+      previewIframeSandbox,
+    ],
+  );
+  const replacedNativeInteractivePreview = replacedFrame?.nativePreview ?? null;
+  nativeInteractivePreviewRef.current = nativeInteractivePreview;
+  replacedNativeInteractivePreviewRef.current =
+    replacedNativeInteractivePreview;
+  useEffect(() => {
+    const frame = iframeRef.current;
+    if (!frame) return;
+    nativeInteractivePreviewCleanupsRef.current.get(frame)?.();
+    nativeInteractivePreviewCleanupsRef.current.set(
+      frame,
+      connectNativePreviewSurface(frame, nativeInteractivePreview),
+    );
+    return () => {
+      nativeInteractivePreviewCleanupsRef.current.get(frame)?.();
+      nativeInteractivePreviewCleanupsRef.current.delete(frame);
+    };
+  }, [nativeInteractivePreview]);
+  useEffect(() => {
+    const frame = replacedFrameRef.current;
+    if (!frame) return;
+    nativeInteractivePreviewCleanupsRef.current.get(frame)?.();
+    nativeInteractivePreviewCleanupsRef.current.set(
+      frame,
+      connectNativePreviewSurface(frame, replacedNativeInteractivePreview),
+    );
+    return () => {
+      nativeInteractivePreviewCleanupsRef.current.get(frame)?.();
+      nativeInteractivePreviewCleanupsRef.current.delete(frame);
+    };
+  }, [replacedNativeInteractivePreview]);
   const previewIframeName = externalPreviewUrl
     ? undefined
     : previewColorSchemeFrameName(previewColorScheme);
@@ -8284,13 +8301,12 @@ export function DesignCanvas({
     !(snapshotOnly && !iframeRenderContent.trim()) &&
     !(rawExternalPreviewUrl && !externalPreviewUrl) &&
     !externalPreviewPendingOrigin;
-  const [replacedFrame, setReplacedFrame] =
-    useState<ReplacedPreviewFrame | null>(null);
   const mountedMarkupFrameRef = useRef<ReplacedPreviewFrame | null>(null);
   const markupFrame: ReplacedPreviewFrame | null = markupFrameMounted
     ? {
         key: iframeElementIdentity,
-        srcDoc: privateScreenshotPreview.html,
+        srcDoc: nativeInteractivePreview?.html ?? privateScreenshotPreview.html,
+        nativePreview: nativeInteractivePreview,
         sandbox: previewIframeSandbox,
         name: previewIframeName,
         interactMode,
@@ -8304,6 +8320,8 @@ export function DesignCanvas({
     } else if (replacedFrame) {
       setReplacedFrame(null);
     }
+  } else if (markupFrame) {
+    mountedMarkupFrameRef.current = markupFrame;
   }
   const releaseReplacedFrame = useCallback(() => {
     window.requestAnimationFrame(() =>
@@ -8406,9 +8424,11 @@ export function DesignCanvas({
         <>
           {replacedFrame ? (
             <iframe
-              key={replacedFrame.key}
+              key={`${replacedFrame.key}:${nativePreviewSurfaceDocumentKey(replacedNativeInteractivePreview) ?? ""}`}
               ref={setReplacedFrameRef}
-              srcDoc={replacedFrame.srcDoc}
+              srcDoc={
+                replacedNativeInteractivePreview?.html ?? replacedFrame.srcDoc
+              }
               name={replacedFrame.name}
               sandbox={replacedFrame.sandbox}
               data-design-preview-replaced
@@ -8423,11 +8443,14 @@ export function DesignCanvas({
             />
           ) : null}
           <iframe
-            key={iframeElementIdentity}
+            key={`${iframeElementIdentity}:${nativePreviewSurfaceDocumentKey(nativeInteractivePreview) ?? ""}`}
             ref={setIframeRef}
             src={externalPreviewUrl ?? undefined}
             srcDoc={
-              externalPreviewUrl ? undefined : privateScreenshotPreview.html
+              externalPreviewUrl
+                ? undefined
+                : (nativeInteractivePreview?.html ??
+                  privateScreenshotPreview.html)
             }
             // The starting scheme of a markup preview; see
             // previewColorSchemeFrameName. A URL page keeps its own name.