@agent-native/core 0.134.0 → 0.134.1

package/corpus/templates/design/.generated/bridge/editor-chrome.generated.ts

@@ -560,17 +560,28 @@ export const editorChromeBridgeScript: string = `"use strict";
       }
       renderRuntimeInteractionStatePreviews();
     }
-    function runtimeHeadHtmlWithoutEditorChrome() {
-      if (!document.head) return "";
-      var clone = document.head.cloneNode(true);
-      Array.prototype.slice.call(
-        clone.querySelectorAll(
-          "[data-agent-native-editor-chrome-style], [data-agent-native-editing-safety-style]"
-        )
-      ).forEach(function(node) {
+    var lastSourceHeadHtml = null;
+    function replaceSourceHeadNodes(previousSourceHtml, nextSourceHtml) {
+      if (!document.head) return;
+      var stale = document.createElement("head");
+      stale.innerHTML = previousSourceHtml || "";
+      var staleCounts = {};
+      Array.prototype.forEach.call(stale.children, function(node) {
+        var key = node.outerHTML;
+        staleCounts[key] = (staleCounts[key] || 0) + 1;
+      });
+      Array.prototype.slice.call(document.head.children).forEach(function(node) {
+        var key = node.outerHTML;
+        if (!staleCounts[key]) return;
+        staleCounts[key] -= 1;
         if (node.parentNode) node.parentNode.removeChild(node);
       });
-      return clone.innerHTML;
+      var next = document.createElement("head");
+      next.innerHTML = nextSourceHtml || "";
+      var anchor = document.head.firstChild;
+      Array.prototype.slice.call(next.children).forEach(function(node) {
+        document.head.insertBefore(document.importNode(node, true), anchor);
+      });
     }
     function chromeScaleX() {
       return 1 / Math.max(0.05, editorChromeScaleX);
@@ -2536,7 +2547,10 @@ export const editorChromeBridgeScript: string = `"use strict";
       }
       var nextHeadHtml = nextDoc.head ? nextDoc.head.innerHTML : "";
       ensureEditorChromeStyle();
-      var currentHeadHtml = runtimeHeadHtmlWithoutEditorChrome();
+      if (lastSourceHeadHtml === null) {
+        lastSourceHeadHtml = nextHeadHtml;
+      }
+      var currentHeadHtml = lastSourceHeadHtml;
       if (nextHeadHtml === currentHeadHtml && activeCandidates.length > 0) {
         var currentMatch = null;
         var nextMatch = null;
@@ -2598,8 +2612,9 @@ export const editorChromeBridgeScript: string = `"use strict";
         }
       }
       if (currentHeadHtml !== nextHeadHtml) {
-        document.head.innerHTML = nextHeadHtml;
+        replaceSourceHeadNodes(currentHeadHtml, nextHeadHtml);
         ensureEditorChromeStyle();
+        lastSourceHeadHtml = nextHeadHtml;
       }
       Array.prototype.slice.call(document.body.attributes).forEach(function(attribute) {
         document.body.removeAttribute(attribute.name);

package/corpus/templates/design/actions/take-design-screenshot.ts

@@ -588,8 +588,15 @@ export default defineAction({
         const consoleErrors: string[] = [];
         const fontLoadFailures: string[] = [];
         page.on("console", (msg) => {
+          // Alpine reports failed expressions at warn level, and that warning
+          // is the only place the expression and element appear — its paired
+          // `pageerror` is a bare "Invalid or unexpected token".
           if (msg.type() === "error") {
             consoleErrors.push(msg.text().slice(0, 300));
+            return;
+          }
+          if (msg.type() === "warning" && /Alpine/.test(msg.text())) {
+            consoleErrors.push(msg.text().slice(0, 300));
           }
         });
         page.on("pageerror", (err) => {

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

@@ -106,6 +106,7 @@ import {
   forwardEmbeddedCanvasPanMessage,
   type EmbeddedCanvasPanSession,
 } from "./design-canvas/iframe-pan";
+import { withLocalRuntimes } from "./design-canvas/local-runtime";
 import type { MotionTrackWire } from "./design-canvas/motion-types";
 import {
   PENDING_TEXT_EDIT_TIMEOUT_MS,
@@ -1018,7 +1019,14 @@ function runtimeDocumentNeedsReload(
     Array.from(html.matchAll(SCRIPT_ELEMENT_RE), (match) => match[0]).join(
       "\n",
     );
-  return scriptSignature(previousContent) !== scriptSignature(nextContent);
+  // A changed <head> is replaced wholesale, which drops whatever the page's own
+  // runtime injected there and cannot re-run the scripts that produced it.
+  const headSignature = (html: string) =>
+    /<head\b[^>]*>([\s\S]*?)<\/head\s*>/i.exec(html)?.[1] ?? "";
+  return (
+    scriptSignature(previousContent) !== scriptSignature(nextContent) ||
+    headSignature(previousContent) !== headSignature(nextContent)
+  );
 }
 
 /**
@@ -2261,7 +2269,7 @@ export function DesignCanvas({
       editorChromeBridge +
       imageDiagBridge;
     const frameContent = getEmbeddedFrameDocumentContent({
-      content: iframeRenderContent,
+      content: withLocalRuntimes(iframeRenderContent),
       embeddedFrameBackground,
       transparentBackground,
       contentOffsetX: embeddedFrame?.contentOffsetX ?? 0,
@@ -2282,7 +2290,7 @@ export function DesignCanvas({
           embeddedFrame?.contentOffsetY ?? 0,
         ),
       ].join("");
-      frameDocument = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${iframeRenderContent}${bridgeToInject}</body></html>`;
+      frameDocument = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${withLocalRuntimes(iframeRenderContent)}${bridgeToInject}</body></html>`;
     }
     // Overview frames report their own content height so the canvas can
     // content-fit them (Framer-style). Embedded (overview) frames only — a

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

@@ -88,6 +88,7 @@ import {
   type ContentSizeSample,
 } from "./design-canvas/content-size-report";
 import { appendHitTestResponder } from "./design-canvas/hit-test";
+import { withLocalRuntimes } from "./design-canvas/local-runtime";
 import { DesignCanvas } from "./DesignCanvas";
 import { dndHostLog } from "./dnd-debug";
 import {
@@ -9499,7 +9500,9 @@ const Screen = memo(function Screen({
     // editable DesignCanvas is supplied) still report their own height and
     // content-fit. The editable DesignCanvas path injects its own reporter.
     return injectSessionReplayIframeBootstrap(
-      appendContentSizeReporter(appendHitTestResponder(screen.content)),
+      appendContentSizeReporter(
+        appendHitTestResponder(withLocalRuntimes(screen.content)),
+      ),
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screen.content]);

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -315,19 +315,49 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     renderRuntimeInteractionStatePreviews();
   }
 
-  function runtimeHeadHtmlWithoutEditorChrome(): string {
-    if (!document.head) return "";
-    var clone = document.head.cloneNode(true) as HTMLElement;
-    Array.prototype.slice
-      .call(
-        clone.querySelectorAll(
-          "[data-agent-native-editor-chrome-style], [data-agent-native-editing-safety-style]",
-        ),
-      )
-      .forEach(function (node) {
-        if (node.parentNode) node.parentNode.removeChild(node);
-      });
-    return clone.innerHTML;
+  /**
+   * The last source <head> this bridge applied. Compared against instead of the
+   * live head, which also carries nodes the page's own runtime injected —
+   * @tailwindcss/browser's compiled sheet above all. Against the live head the
+   * comparison always differs, the head gets wiped, the compiled CSS goes with
+   * it, and the re-inserted `<script src>` cannot rebuild it because innerHTML
+   * never executes scripts. The screen then renders unstyled for good.
+   */
+  var lastSourceHeadHtml: string | null = null;
+
+  /**
+   * Swaps only the nodes the previous source head contributed. Assigning
+   * `document.head.innerHTML` instead destroys whatever the page's own runtime
+   * injected — @tailwindcss/browser's compiled sheet above all — and the
+   * `<script src>` re-inserted in its place can never rebuild it, because
+   * innerHTML does not execute scripts.
+   */
+  function replaceSourceHeadNodes(
+    previousSourceHtml: string | null,
+    nextSourceHtml: string,
+  ): void {
+    if (!document.head) return;
+    var stale = document.createElement("head");
+    stale.innerHTML = previousSourceHtml || "";
+    var staleCounts: Record<string, number> = {};
+    Array.prototype.forEach.call(stale.children, function (node: Element) {
+      var key = node.outerHTML;
+      staleCounts[key] = (staleCounts[key] || 0) + 1;
+    });
+    Array.prototype.slice.call(document.head.children).forEach(function (
+      node: Element,
+    ) {
+      var key = node.outerHTML;
+      if (!staleCounts[key]) return;
+      staleCounts[key] -= 1;
+      if (node.parentNode) node.parentNode.removeChild(node);
+    });
+    var next = document.createElement("head");
+    next.innerHTML = nextSourceHtml || "";
+    var anchor = document.head.firstChild;
+    Array.prototype.slice.call(next.children).forEach(function (node: Element) {
+      document.head.insertBefore(document.importNode(node, true), anchor);
+    });
   }
 
   function chromeScaleX(): number {
@@ -3123,8 +3153,8 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   // Both layer states are painted here, from the one `layer-states` message,
   // so every call site that re-runs after a runtime document swap restores
   // hide AND lock together. Locked paints an attribute only; the hairline
-  // treatment lives in the editor chrome stylesheet so it is stripped from
-  // runtimeHeadHtmlWithoutEditorChrome and never reaches source or export.
+  // treatment lives in the editor chrome stylesheet, which is never part of
+  // the source head and so never reaches source or export.
   function applyLayerStateSelectors(): void {
     document
       .querySelectorAll("[data-agent-native-runtime-hidden]")
@@ -3248,7 +3278,13 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
 
     var nextHeadHtml = nextDoc.head ? nextDoc.head.innerHTML : "";
     ensureEditorChromeStyle();
-    var currentHeadHtml = runtimeHeadHtmlWithoutEditorChrome();
+    if (lastSourceHeadHtml === null) {
+      // First patch after a srcdoc build, so the document already carries this
+      // source head. Forced replacements adopt too: treating the live head as
+      // the baseline is what wipes the runtime's own nodes.
+      lastSourceHeadHtml = nextHeadHtml;
+    }
+    var currentHeadHtml = lastSourceHeadHtml;
     if (nextHeadHtml === currentHeadHtml && activeCandidates.length > 0) {
       var currentMatch = null;
       var nextMatch = null;
@@ -3326,8 +3362,9 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       }
     }
     if (currentHeadHtml !== nextHeadHtml) {
-      document.head.innerHTML = nextHeadHtml;
+      replaceSourceHeadNodes(currentHeadHtml, nextHeadHtml);
       ensureEditorChromeStyle();
+      lastSourceHeadHtml = nextHeadHtml;
     }
     Array.prototype.slice.call(document.body.attributes).forEach(function (
       attribute: Attr,

package/corpus/templates/design/app/components/design/design-canvas/local-runtime.ts

@@ -0,0 +1,126 @@
+/**
+ * A blocked CDN request leaves a screen rendering as unstyled default HTML with
+ * nothing in its own markup to explain it. Rewriting at render time rather than
+ * at generation time also repairs every design already stored.
+ *
+ * Export keeps the CDN on purpose: a downloaded file runs outside this app.
+ */
+
+import tailwindRuntimeUrl from "@tailwindcss/browser?url";
+import alpineRuntimeUrl from "alpinejs/dist/cdn.min.js?url";
+import { parse } from "parse5";
+
+/**
+ * Only the major version this app vendors may be substituted. Swapping v3's Play
+ * CDN for the v4 runtime looks equivalent and is not: v4 resolves spacing and
+ * radius through theme variables a v3 document never defines, so `px-8` computes
+ * to 0 and `rounded-full` to garbage.
+ */
+function substitutable(src: string, pinned: RegExp, vendored: RegExp): boolean {
+  const version = pinned.exec(src);
+  return !version || vendored.test(version[1] ?? "");
+}
+
+function tailwindReplacement(src: string): boolean {
+  if (!/tailwindcss\/browser/i.test(src)) return false;
+  return substitutable(src, /@tailwindcss\/browser@(\d+)/i, /^4$/);
+}
+
+/**
+ * Core Alpine only. `@alpinejs/persist`, `/focus`, `/mask` and friends all carry
+ * "alpinejs" in their URL, and swapping one for the core bundle drops the plugin
+ * entirely while loading Alpine a second time.
+ */
+function alpineReplacement(src: string): boolean {
+  if (/@alpinejs\//i.test(src)) return false;
+  if (!/(^|[/@])alpinejs(@|\/|$)/i.test(src)) return false;
+  return substitutable(src, /alpinejs@(\d+)/i, /^3$/);
+}
+
+/**
+ * Absolute, because a srcdoc document resolves relative URLs against the parent
+ * document rather than against the app root it was composed for.
+ */
+function absolute(url: string): string {
+  if (/^[a-z]+:\/\//i.test(url)) return url;
+  if (typeof window === "undefined") return url;
+  return new URL(url, window.location.origin).href;
+}
+
+export function localRuntimeUrls(): { tailwind: string; alpine: string } {
+  return {
+    tailwind: absolute(tailwindRuntimeUrl),
+    alpine: absolute(alpineRuntimeUrl),
+  };
+}
+
+interface SrcSpan {
+  start: number;
+  end: number;
+  replacement: string;
+}
+
+/**
+ * Spans come from the parser, never from a source-wide regex: a runtime URL
+ * written inside a `<script>` body, an HTML comment, or another element's
+ * attribute is user content, and rewriting it makes the preview diverge from
+ * the stored and exported document.
+ */
+function runtimeSrcSpans(
+  html: string,
+  urls: { tailwind: string; alpine: string },
+): SrcSpan[] {
+  const spans: SrcSpan[] = [];
+
+  const visit = (node: unknown) => {
+    const element = node as {
+      tagName?: string;
+      attrs?: Array<{ name: string; value: string }>;
+      childNodes?: unknown[];
+      content?: { childNodes?: unknown[] };
+      sourceCodeLocation?: {
+        attrs?: Record<string, { startOffset: number; endOffset: number }>;
+      } | null;
+    };
+    if (element.tagName === "script") {
+      const src = element.attrs?.find((attr) => attr.name === "src")?.value;
+      const at = element.sourceCodeLocation?.attrs?.src;
+      if (src && at) {
+        const replacement = tailwindReplacement(src)
+          ? urls.tailwind
+          : alpineReplacement(src)
+            ? urls.alpine
+            : null;
+        if (replacement) {
+          spans.push({ start: at.startOffset, end: at.endOffset, replacement });
+        }
+      }
+    }
+    for (const child of [
+      ...(element.childNodes ?? []),
+      ...(element.content?.childNodes ?? []),
+    ]) {
+      visit(child);
+    }
+  };
+  visit(parse(html, { sourceCodeLocationInfo: true }));
+
+  return spans.sort((left, right) => left.start - right.start);
+}
+
+export function withLocalRuntimes(
+  html: string,
+  urls: { tailwind: string; alpine: string } = localRuntimeUrls(),
+): string {
+  if (!html || !/<script/i.test(html)) return html;
+  const spans = runtimeSrcSpans(html, urls);
+  if (spans.length === 0) return html;
+
+  let out = "";
+  let cursor = 0;
+  for (const span of spans) {
+    out += `${html.slice(cursor, span.start)}src="${span.replacement}"`;
+    cursor = span.end;
+  }
+  return out + html.slice(cursor);
+}

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

@@ -63,6 +63,8 @@ export function TemplatePreview({
         className,
       )}
     >
+      {/* The empty sandbox blocks scripts, so the CDN runtimes stay inert here;
+          a styled preview needs precompiled CSS, not a runtime swap. */}
       <iframe
         title={`${title} preview`}
         srcDoc={html}

package/corpus/templates/design/app/pages/Index.tsx

@@ -71,6 +71,8 @@ import {
   writePendingGeneration,
 } from "@/lib/pending-generation";
 
+import { withLocalRuntimes } from "../components/design/design-canvas/local-runtime";
+
 type ProjectType = "prototype" | "other";
 interface Design {
   id: string;
@@ -1176,7 +1178,7 @@ function DesignThumbnail({ html }: { html: string | null }) {
     >
       <iframe
         {...{ [SESSION_REPLAY_IFRAME_ATTRIBUTE]: "" }}
-        srcDoc={injectSessionReplayIframeBootstrap(html)}
+        srcDoc={injectSessionReplayIframeBootstrap(withLocalRuntimes(html))}
         sandbox="allow-scripts"
         loading="lazy"
         tabIndex={-1}

package/corpus/templates/design/app/pages/Present.tsx

@@ -28,6 +28,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { ReviewCanvasPins } from "@/components/visual-editor/ReviewCanvasPins";
 
+import { withLocalRuntimes } from "../components/design/design-canvas/local-runtime";
 import {
   resolvePresentEscapeAction,
   shouldBlockPresentPageNavigation,
@@ -181,7 +182,7 @@ export default function Present() {
       <div className="present-review-canvas h-full w-full">
         <iframe
           {...{ [SESSION_REPLAY_IFRAME_ATTRIBUTE]: "" }}
-          srcDoc={reviewableContent}
+          srcDoc={withLocalRuntimes(reviewableContent)}
           sandbox="allow-scripts"
           data-design-preview-iframe
           className="h-full w-full border-0"

package/corpus/templates/design/changelog/2026-07-30-a-broken-inline-script-in-a-generated-screen-is-now-caught-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-30
+---
+
+A broken inline script in a generated screen is now caught on save instead of silently never running.

package/corpus/templates/design/changelog/2026-07-30-design-html-is-now-validated-with-a-spec-grade-html-parser-i.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-30
+---
+
+Design HTML is now validated with a spec-grade HTML parser instead of hand-rolled scanning, so markup inside attributes and scripts is no longer mistaken for real tags.

package/corpus/templates/design/changelog/2026-07-30-designs-now-load-their-tailwind-and-alpine-runtimes-from-the.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-30
+---
+
+Designs now load their Tailwind and Alpine runtimes from the app itself instead of a public CDN, so an ad blocker, a restricted network, or being offline cannot leave every screen unstyled.

package/corpus/templates/design/changelog/2026-07-30-designs-with-a-broken-alpine-expression-are-now-caught-on-sa.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-30
+---
+
+Designs with a broken Alpine expression are now caught on save instead of rendering with every interaction silently dead.

package/corpus/templates/design/changelog/2026-07-30-editing-a-design-no-longer-strips-its-styling-the-canvas-kep.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-30
+---
+
+Editing a design no longer strips its styling: the canvas now keeps the page's compiled CSS instead of discarding it on every update.

package/corpus/templates/design/package.json

@@ -25,6 +25,9 @@
     "@libsql/client": "^0.15.8",
     "@paper-design/shaders-react": "0.0.76",
     "@tabler/icons-react": "catalog:",
+    "@tailwindcss/browser": "^4.3.3",
+    "acorn": "^8.18.0",
+    "alpinejs": "^3.15.12",
     "drizzle-orm": "^0.45.2",
     "entities": "8.0.0",
     "fzstd": "^0.1.1",
@@ -37,6 +40,7 @@
     "monaco-editor": "^0.55.1",
     "nanoid": "^5.1.9",
     "pako": "^3.0.0",
+    "parse5": "^8.0.1",
     "pdf-parse": "^2.4.5",
     "prettier": "^3.9.4",
     "yjs": "catalog:",