@agent-native/core 0.134.0 → 0.135.0

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/app/routes/settings.tsx

@@ -3,6 +3,8 @@ import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
   AccountSettingsCard,
+  SettingsGroup,
+  SettingsRow,
   SettingsTabsPage,
   useAgentSettingsTabs,
   type SettingsSearchEntry,
@@ -10,14 +12,6 @@ import {
 import { CreativeContextSettingsLink } from "@agent-native/creative-context/client";
 import { useMemo } from "react";
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
 import { messagesByLocale } from "@/i18n-data";
 
 import changelog from "../../CHANGELOG.md?raw";
@@ -52,20 +46,18 @@ export default function SettingsRoute() {
           <div className="mx-auto w-full max-w-2xl space-y-6">
             <CreativeContextSettingsLink />
 
-            <Card id="language" className="scroll-mt-16">
-              <CardHeader>
-                <CardTitle className="text-base">
-                  {t("settings.languageTitle")}
-                </CardTitle>
-                <CardDescription>
-                  {t("settings.languageDescription")}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="max-w-xs space-y-1.5">
-                <Label>{t("settings.languageLabel")}</Label>
-                <LanguagePicker label={t("settings.languageLabel")} />
-              </CardContent>
-            </Card>
+            <SettingsGroup>
+              <SettingsRow
+                id="language"
+                label={t("settings.languageTitle")}
+                description={t("settings.languageDescription")}
+                control={
+                  <div className="w-56">
+                    <LanguagePicker label={t("settings.languageLabel")} />
+                  </div>
+                }
+              />
+            </SettingsGroup>
           </div>
         }
         team={

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/changelog/2026-08-01-review-comments-replies-and-mentions-now-send-an-email-to-th.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-01
+---
+
+Review comments, replies, and mentions now send an email to the people involved

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:",