@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/design/app/components/design/bridge/shader-runtime.bridge.ts

@@ -1,10 +1,8 @@
 /**
- * Code-backed GLSL shader runtime — the self-contained engine behind shader
- * fills and shader effects.
+ * Saved GLSL shader runtime for existing fills and shader effects.
  *
  * This script is BOTH:
- *   1. injected into every editor canvas iframe (via
- *      SHADER_FILL_PREVIEW_BRIDGE_SCRIPT in DesignCanvas.tsx), and
+ *   1. injected into every editor canvas iframe by DesignCanvas.tsx, and
  *   2. embedded into persisted/exported screen HTML (via
  *      `ensureShaderRuntime()` in shared/shader-fills.ts) so standalone
  *      artifacts render their shaders without the editor.
@@ -13,7 +11,7 @@
  * rendered inside the editor (which injects it again) initializes only once.
  *
  * Persisted format it consumes (see shared/shader-fills.ts for the canonical
- * spec + serializers — keep the parsing here in sync):
+ * format — keep the parsing here in sync):
  *
  *   <script type="application/x-agent-native-shader"
  *           data-shader-id="an-shader-x" data-shader-name="Name"
@@ -66,7 +64,6 @@
     glsl: string;
     uniforms: Record<string, AnUniformDef>;
     domText?: string;
-    volatile?: boolean;
   }
 
   interface AnShaderMount {
@@ -78,34 +75,12 @@
     defId: string;
     mode: "fill" | "effect";
     values: Record<string, unknown>;
-    preview: boolean;
     visible: boolean;
   }
 
   interface AnShadersApi {
     version: number;
     scan: () => void;
-    applyPreview: (
-      target: { nodeId?: string; selector?: string },
-      def: {
-        id?: string;
-        name?: string;
-        glsl: string;
-        uniforms?: Record<string, AnUniformDef>;
-        values?: Record<string, unknown>;
-      },
-      mode?: string,
-    ) => boolean;
-    clearPreview: () => void;
-    setUniform: (
-      filter: { shaderId?: string; nodeId?: string; preview?: boolean },
-      name: string,
-      value: unknown,
-    ) => void;
-    updateShader: (
-      id: string,
-      patch: { glsl?: string; uniforms?: Record<string, AnUniformDef> },
-    ) => void;
   }
 
   const W = window as unknown as {
@@ -129,7 +104,6 @@
   const EFFECT_VALUES_ATTR = "data-an-shader-effect-uniforms";
   const ERROR_ATTR = "data-an-shader-error";
   const CANVAS_ATTR = "data-an-shader-canvas";
-  const PREVIEW_DEF_ID = "__an-shader-preview";
   const MAX_MOUNTS = 8;
   const VERT_SRC =
     "attribute vec2 a_pos;void main(){gl_Position=vec4(a_pos,0.0,1.0);}";
@@ -137,8 +111,12 @@
   const registry: Record<string, AnShaderDef> = {};
   const mounts: AnShaderMount[] = [];
   let rafId: number | null = null;
+  let lastFrameTs: number | null = null;
   let needsRender = false;
   let scanTimer: ReturnType<typeof setTimeout> | null = null;
+  // How large the editor shows this document, from its zoom. Outside the
+  // editor nothing sends one, so standalone pages keep full resolution.
+  let viewScale = 1;
 
   function nowMs(): number {
     return W.performance && W.performance.now
@@ -214,7 +192,6 @@
       const text = s.textContent || "";
       const prev = registry[id];
       if (prev && prev.domText === text) continue;
-      if (prev && prev.volatile && prev.domText === undefined) continue;
       const parsed = parseBlock(text);
       registry[id] = {
         name: s.getAttribute("data-shader-name") || id,
@@ -317,17 +294,12 @@
     defId: string,
     mode: "fill" | "effect",
     overrides: Record<string, unknown> | null | undefined,
-    preview: boolean,
   ): AnShaderMount | null {
     const def = registry[defId];
     if (!def || !def.glsl) return null;
     for (let i = 0; i < mounts.length; i++) {
       const existing = mounts[i];
-      if (
-        existing.el === el &&
-        existing.preview === preview &&
-        existing.mode === mode
-      ) {
+      if (existing.el === el && existing.mode === mode) {
         if (existing.defId === defId) {
           existing.values = resolveValues(def, overrides);
           requestRender();
@@ -419,7 +391,6 @@
       defId: defId,
       mode: mode,
       values: resolveValues(def, overrides),
-      preview: preview,
       visible: true,
     };
     mounts.push(mount);
@@ -453,9 +424,13 @@
     const rect = el.getBoundingClientRect();
     const wCss = Math.max(1, Math.round(rect.width));
     const hCss = Math.max(1, Math.round(rect.height));
-    const dpr = Math.min(2, W.devicePixelRatio || 1);
-    const wPx = Math.max(1, Math.round(wCss * dpr));
-    const hPx = Math.max(1, Math.round(hCss * dpr));
+    // Zoomed out, render at the on-screen size, but never below one canvas
+    // pixel per CSS pixel: presets size grain and halftone dots in canvas
+    // pixels, so this keeps them no coarser than a standard display shows.
+    const deviceRatio = Math.min(2, W.devicePixelRatio || 1);
+    const ratio = Math.max(Math.min(1, deviceRatio), deviceRatio * viewScale);
+    const wPx = Math.max(1, Math.round(wCss * ratio));
+    const hPx = Math.max(1, Math.round(hCss * ratio));
     if (canvas.width !== wPx || canvas.height !== hPx) {
       canvas.width = wPx;
       canvas.height = hPx;
@@ -488,8 +463,18 @@
     gl.drawArrays(gl.TRIANGLES, 0, 3);
   }
 
-  function frame(): void {
+  function frame(ts?: number): void {
     rafId = null;
+    // On a board of several screens, Chromium can run each screen's
+    // animation-frame callbacks once per screen per display frame, all with
+    // the same timestamp. Draw on the first; the rest would repeat its pixels.
+    if (typeof ts === "number") {
+      if (ts === lastFrameTs) {
+        startLoop();
+        return;
+      }
+      lastFrameTs = ts;
+    }
     const t = (nowMs() - t0) / 1000;
     const animate = !reducedMotion && !document.hidden;
     for (let i = mounts.length - 1; i >= 0; i--) {
@@ -550,7 +535,6 @@
           fillId,
           "fill",
           parseOverrides(el, VALUES_ATTR),
-          false,
         );
         if (fillMount) seen.push(fillMount);
       }
@@ -560,14 +544,12 @@
           effectId,
           "effect",
           parseOverrides(el, EFFECT_VALUES_ATTR),
-          false,
         );
         if (effectMount) seen.push(effectMount);
       }
     }
     for (let k = mounts.length - 1; k >= 0; k--) {
       const mount = mounts[k];
-      if (mount.preview) continue;
       if (seen.indexOf(mount) === -1) unmount(mount);
     }
     startLoop();
@@ -581,115 +563,9 @@
     }, 100);
   }
 
-  function resolveTarget(target: {
-    nodeId?: string;
-    selector?: string;
-  }): HTMLElement | null {
-    if (target && target.selector) {
-      try {
-        const hit = document.querySelector(target.selector);
-        if (hit) return hit as HTMLElement;
-      } catch (_err) {
-        /* invalid selector */
-      }
-    }
-    if (target && target.nodeId) {
-      const byId = document.querySelector(
-        '[data-agent-native-node-id="' +
-          String(target.nodeId).replace(/"/g, '\\"') +
-          '"]',
-      );
-      if (byId) return byId as HTMLElement;
-    }
-    return null;
-  }
-
-  function applyPreview(
-    target: { nodeId?: string; selector?: string },
-    def: {
-      id?: string;
-      name?: string;
-      glsl: string;
-      uniforms?: Record<string, AnUniformDef>;
-      values?: Record<string, unknown>;
-    },
-    mode?: string,
-  ): boolean {
-    clearPreview();
-    const el = resolveTarget(target || {});
-    if (!el || !def || typeof def.glsl !== "string") return false;
-    const resolvedMode: "fill" | "effect" =
-      mode === "effect" ? "effect" : "fill";
-    registry[PREVIEW_DEF_ID] = {
-      name: (def.name || "Preview") + "",
-      mode: resolvedMode,
-      glsl: def.glsl,
-      uniforms: def.uniforms || {},
-      volatile: true,
-    };
-    const mount = ensureMount(
-      el,
-      PREVIEW_DEF_ID,
-      resolvedMode,
-      def.values || null,
-      true,
-    );
-    return !!mount;
-  }
-
-  function clearPreview(): void {
-    for (let i = mounts.length - 1; i >= 0; i--) {
-      if (mounts[i].preview) unmount(mounts[i]);
-    }
-    delete registry[PREVIEW_DEF_ID];
-  }
-
-  function setUniform(
-    filter: { shaderId?: string; nodeId?: string; preview?: boolean },
-    name: string,
-    value: unknown,
-  ): void {
-    const f = filter || {};
-    for (let i = 0; i < mounts.length; i++) {
-      const mount = mounts[i];
-      if (f.preview !== undefined && mount.preview !== !!f.preview) continue;
-      if (f.shaderId && mount.defId !== f.shaderId) continue;
-      if (f.nodeId) {
-        const nid = mount.el.getAttribute("data-agent-native-node-id");
-        if (nid !== f.nodeId) continue;
-      }
-      mount.values[name] = value;
-    }
-    requestRender();
-  }
-
-  function updateShader(
-    id: string,
-    patch: { glsl?: string; uniforms?: Record<string, AnUniformDef> },
-  ): void {
-    const def = registry[id];
-    if (!def || !patch) return;
-    let recompile = false;
-    if (typeof patch.glsl === "string" && patch.glsl !== def.glsl) {
-      def.glsl = patch.glsl;
-      recompile = true;
-    }
-    if (patch.uniforms && typeof patch.uniforms === "object") {
-      def.uniforms = patch.uniforms;
-    }
-    def.volatile = true;
-    if (recompile) invalidateMountsFor(id);
-    scan();
-    requestRender();
-  }
-
   W.__anShaders = {
     version: 1,
     scan: scan,
-    applyPreview: applyPreview,
-    clearPreview: clearPreview,
-    setUniform: setUniform,
-    updateShader: updateShader,
   };
 
   if (document.readyState === "loading") {
@@ -704,6 +580,25 @@
     if (!document.hidden) requestRender();
   });
 
+  // The editor posts its zoom to each screen. Zooming in keeps the
+  // document's own resolution; zoom steps round up to eighths so a pinch
+  // doesn't reallocate the canvases every frame.
+  W.addEventListener("message", function (event: MessageEvent) {
+    if (W.parent === W || event.source !== W.parent) return;
+    const data = event.data as {
+      type?: unknown;
+      scaleX?: unknown;
+      scaleY?: unknown;
+    } | null;
+    if (!data || data.type !== "set-editor-chrome-scale") return;
+    const scale = Math.max(Number(data.scaleX) || 0, Number(data.scaleY) || 0);
+    if (!(scale > 0)) return;
+    const next = Math.min(1, Math.ceil(scale * 8) / 8);
+    if (next === viewScale) return;
+    viewScale = next;
+    requestRender();
+  });
+
   try {
     new MutationObserver(function () {
       scheduleScan();

package/corpus/templates/design/app/components/design/design-canvas/interact-document.ts

@@ -7,7 +7,7 @@ import {
   getEmbeddedFrameBackgroundStyle,
   getEmbeddedFrameDocumentContent,
 } from "./embedded-frame";
-import { withLocalRuntimes, withNativeShaderRuntime } from "./local-runtime";
+import { withLocalRuntimes } from "./local-runtime";
 import { PREVIEW_THEME_BRIDGE_SCRIPT } from "./preview-theme";
 
 const INTERACT_LINKS_BRIDGE_SCRIPT = `<script data-agent-native-interact-links-bridge>${interactLinksBridgeScript}</script>`;
@@ -45,10 +45,8 @@ export function buildInteractPreviewDocument(args: {
     fitBodyToFrame: args.fitBodyToFrame,
   });
   if (/<\/(?:body|html)\s*>/i.test(frameContent)) {
-    return withNativeShaderRuntime(
-      injectSessionReplayIframeBootstrap(
-        injectDocumentMarkup(frameContent, INTERACT_PREVIEW_BRIDGES),
-      ),
+    return injectSessionReplayIframeBootstrap(
+      injectDocumentMarkup(frameContent, INTERACT_PREVIEW_BRIDGES),
     );
   }
   const frameStyle = [
@@ -61,9 +59,7 @@ export function buildInteractPreviewDocument(args: {
       args.contentOffsetY ?? 0,
     ),
   ].join("");
-  return withNativeShaderRuntime(
-    injectSessionReplayIframeBootstrap(
-      `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${localizedContent}${INTERACT_PREVIEW_BRIDGES}</body></html>`,
-    ),
+  return injectSessionReplayIframeBootstrap(
+    `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${localizedContent}${INTERACT_PREVIEW_BRIDGES}</body></html>`,
   );
 }

package/corpus/templates/design/app/components/design/design-canvas/native-preview-surface.ts

@@ -0,0 +1,150 @@
+import { attachNativePreviewViewportPublisher } from "../bridge/native-preview-viewport-transport";
+import { installNativeWorkerBroker } from "../bridge/native-worker-broker";
+import { withNativeShaderRuntime } from "./local-runtime";
+import {
+  connectNativePublicAssetPreview,
+  prepareNativePublicAssetPreviewDocument,
+  type NativePublicAssetPreviewDocument,
+} from "./native-public-asset-preview";
+import {
+  connectNativePublicWorkerPreview,
+  prepareNativePublicWorkerPreviewDocument,
+  type NativePublicWorkerPreviewDocument,
+} from "./native-public-worker-preview";
+
+export type NativePreviewSurfaceProfile =
+  | "interactive"
+  | "overview"
+  | "thumbnail"
+  | "catalog";
+
+export interface NativePreviewSurfaceDocument {
+  html: string;
+  profile: NativePreviewSurfaceProfile;
+  publicAsset: NativePublicAssetPreviewDocument | null;
+  publicWorker: NativePublicWorkerPreviewDocument | null;
+}
+
+export function nativePreviewSurfaceDocumentKey(
+  prepared: NativePreviewSurfaceDocument | null,
+): string | null {
+  return prepared?.publicWorker?.nonce ?? prepared?.publicAsset?.nonce ?? null;
+}
+
+export function prepareNativePreviewSurface({
+  html,
+  sandbox,
+  profile,
+  approvedHashes = [],
+  baseHref,
+  alwaysRuntime = false,
+  initialPixelRatio,
+  animationEpochMs,
+}: {
+  html: string;
+  sandbox: string;
+  profile: NativePreviewSurfaceProfile;
+  approvedHashes?: readonly string[];
+  baseHref?: string;
+  alwaysRuntime?: boolean;
+  initialPixelRatio?: number;
+  animationEpochMs?: number;
+}): NativePreviewSurfaceDocument {
+  let runtimeHtml = withNativeShaderRuntime(html, alwaysRuntime);
+  const runtimeAttributes: string[] = [];
+  if (initialPixelRatio !== undefined) {
+    if (!Number.isFinite(initialPixelRatio) || initialPixelRatio <= 0)
+      throw new Error("native-preview-pixel-ratio-invalid");
+    runtimeAttributes.push(
+      `data-agent-native-export-initial-pixel-ratio="${initialPixelRatio}"`,
+    );
+  }
+  if (animationEpochMs !== undefined) {
+    if (!Number.isFinite(animationEpochMs) || animationEpochMs <= 0)
+      throw new Error("native-preview-animation-epoch-invalid");
+    runtimeAttributes.push(
+      `data-agent-native-animation-epoch-ms="${animationEpochMs}"`,
+    );
+  }
+  if (runtimeAttributes.length) {
+    const marker =
+      '<script data-agent-native-native-shader-runtime data-runtime-version="2">';
+    if (!runtimeHtml.includes(marker) && initialPixelRatio !== undefined)
+      throw new Error("native-preview-runtime-marker-missing");
+    runtimeHtml = runtimeHtml.replace(
+      marker,
+      `<script data-agent-native-native-shader-runtime data-runtime-version="2" ${runtimeAttributes.join(" ")}>`,
+    );
+  }
+  const staticNonce = html.match(
+    /<meta\s+name="an-native-static-script-nonce"\s+content="([A-Za-z0-9-]{16,80})"\s*>/i,
+  )?.[1];
+  if (
+    staticNonce &&
+    runtimeHtml.includes("data-agent-native-native-shader-runtime")
+  )
+    runtimeHtml = runtimeHtml.replace(
+      "<script data-agent-native-native-shader-runtime",
+      `<script nonce="${staticNonce}" data-agent-native-native-shader-runtime`,
+    );
+  if (!baseHref || sandbox.includes("allow-same-origin"))
+    return {
+      html: runtimeHtml,
+      profile,
+      publicAsset: null,
+      publicWorker: null,
+    };
+  const publicWorker = prepareNativePublicWorkerPreviewDocument(
+    runtimeHtml,
+    approvedHashes,
+  );
+  const publicAsset = prepareNativePublicAssetPreviewDocument(
+    publicWorker?.html ?? runtimeHtml,
+    baseHref,
+    publicWorker?.manifest,
+  );
+  return { html: publicAsset.html, profile, publicAsset, publicWorker };
+}
+
+export function connectNativePreviewSurface(
+  frame: HTMLIFrameElement,
+  prepared: NativePreviewSurfaceDocument | null,
+): () => void {
+  const host = frame.ownerDocument.defaultView;
+  if (host) installNativeWorkerBroker(host);
+  const cleanups = [attachNativePreviewViewportPublisher(frame)];
+  const sendProfile = () => {
+    if (!prepared) return;
+    frame.contentWindow?.postMessage(
+      {
+        type: "native-shader-overview-preview-mode",
+        schemaVersion: 1,
+        compact: prepared.profile === "thumbnail",
+      },
+      "*",
+    );
+  };
+  frame.addEventListener("load", sendProfile);
+  sendProfile();
+  cleanups.push(() => frame.removeEventListener("load", sendProfile));
+  try {
+    if (prepared?.publicAsset)
+      cleanups.push(
+        connectNativePublicAssetPreview(frame, prepared.publicAsset),
+      );
+    if (prepared?.publicWorker)
+      cleanups.push(
+        connectNativePublicWorkerPreview(
+          frame,
+          prepared.publicWorker,
+          prepared.html,
+        ),
+      );
+  } catch (error) {
+    for (const cleanup of cleanups.reverse()) cleanup();
+    throw error;
+  }
+  return () => {
+    for (const cleanup of cleanups.reverse()) cleanup();
+  };
+}