@agent-native/core 0.80.4 → 0.80.6

package/corpus/templates/design/server/lib/builder-design-system-proxy.ts

@@ -0,0 +1,181 @@
+import { eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+
+import { getDb, schema } from "../db/index.js";
+
+type BuilderDesignSystemIndexResult = {
+  designSystemId: string;
+  jobId: string;
+  builderUrl: string;
+};
+
+export function localBuilderDesignSystemId(
+  builderDesignSystemId: string,
+): string {
+  const slug = builderDesignSystemId
+    .replace(/[^a-zA-Z0-9_-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 96);
+  return `builder-${slug || "design-system"}`;
+}
+
+function builderProxyData({
+  builderDesignSystemId,
+  jobId,
+  builderUrl,
+  projectName,
+  description,
+}: {
+  builderDesignSystemId: string;
+  jobId: string;
+  builderUrl: string;
+  projectName?: string;
+  description?: string;
+}) {
+  return JSON.stringify({
+    source: "builder",
+    builderDesignSystemId,
+    builderJobId: jobId,
+    builderUrl,
+    colors: {
+      primary: "var(--primary)",
+      secondary: "var(--secondary)",
+      accent: "var(--accent)",
+      background: "var(--background)",
+      surface: "var(--card)",
+      text: "var(--foreground)",
+      textMuted: "var(--muted-foreground)",
+    },
+    typography: {
+      headingFont: "inherit",
+      bodyFont: "inherit",
+      headingWeight: "700",
+      bodyWeight: "400",
+      headingSizes: { h1: "48px", h2: "32px", h3: "24px" },
+    },
+    spacing: { elementGap: "24px", pagePadding: "48px" },
+    borders: { radius: "12px", accentWidth: "1px" },
+    logos: [],
+    notes: [
+      "This is a local proxy for a Builder-indexed design system.",
+      `Builder design system id: ${builderDesignSystemId}`,
+      `Builder indexing job id: ${jobId}`,
+      `Builder URL: ${builderUrl}`,
+      projectName ? `Requested name: ${projectName}` : "",
+      description ? `Context: ${description}` : "",
+      "Use Builder as the source of truth for extracted tokens and guidance.",
+    ]
+      .filter(Boolean)
+      .join("\n"),
+  });
+}
+
+function builderProxyInstructions({
+  builderDesignSystemId,
+  jobId,
+  builderUrl,
+}: {
+  builderDesignSystemId: string;
+  jobId: string;
+  builderUrl: string;
+}) {
+  return [
+    "This design system is indexed and owned by Builder.",
+    `Builder design system id: ${builderDesignSystemId}`,
+    `Builder job id: ${jobId}`,
+    `Builder URL: ${builderUrl}`,
+    "When generating designs, treat Builder as the source of truth for the final extracted tokens, assets, and guidance.",
+  ].join("\n");
+}
+
+export async function upsertBuilderProxyDesignSystem({
+  result,
+  ownerEmail,
+  orgId,
+  projectName,
+  description,
+}: {
+  result: BuilderDesignSystemIndexResult;
+  ownerEmail: string;
+  orgId?: string | null;
+  projectName?: string;
+  description?: string;
+}) {
+  const db = getDb();
+  const now = new Date().toISOString();
+  const baseLocalDesignSystemId = localBuilderDesignSystemId(
+    result.designSystemId,
+  );
+  const title = projectName?.trim() || "Builder indexed design system";
+  const localData = builderProxyData({
+    builderDesignSystemId: result.designSystemId,
+    jobId: result.jobId,
+    builderUrl: result.builderUrl,
+    projectName,
+    description,
+  });
+  const customInstructions = builderProxyInstructions({
+    builderDesignSystemId: result.designSystemId,
+    jobId: result.jobId,
+    builderUrl: result.builderUrl,
+  });
+  const [existing] = await db
+    .select({
+      id: schema.designSystems.id,
+      ownerEmail: schema.designSystems.ownerEmail,
+    })
+    .from(schema.designSystems)
+    .where(eq(schema.designSystems.id, baseLocalDesignSystemId))
+    .limit(1);
+  const localDesignSystemId =
+    existing && existing.ownerEmail !== ownerEmail
+      ? `${baseLocalDesignSystemId}-${nanoid(8)}`
+      : baseLocalDesignSystemId;
+  if (existing && existing.ownerEmail === ownerEmail) {
+    await db
+      .update(schema.designSystems)
+      .set({
+        title,
+        description:
+          description ??
+          `Builder indexed design system ${result.designSystemId}`,
+        data: localData,
+        assets: "[]",
+        customInstructions,
+        updatedAt: now,
+      })
+      .where(eq(schema.designSystems.id, existing.id));
+  } else {
+    const [ownedSystem] = await db
+      .select({ id: schema.designSystems.id })
+      .from(schema.designSystems)
+      .where(eq(schema.designSystems.ownerEmail, ownerEmail))
+      .limit(1);
+    await db.insert(schema.designSystems).values({
+      id: localDesignSystemId,
+      title,
+      description:
+        description ?? `Builder indexed design system ${result.designSystemId}`,
+      data: localData,
+      assets: "[]",
+      customInstructions,
+      isDefault: !ownedSystem,
+      ownerEmail,
+      orgId: orgId ?? null,
+      createdAt: now,
+      updatedAt: now,
+    });
+  }
+
+  return {
+    localDesignSystemId,
+    instructions: [
+      "Builder design-system indexing has started.",
+      `Builder design system: ${result.designSystemId}`,
+      `Local selectable design system: ${localDesignSystemId}`,
+      `Builder job: ${result.jobId}`,
+      `Open: ${result.builderUrl}`,
+      "Use the local design system id in Design flows; Builder remains the source of truth for the indexed brand kit.",
+    ].join("\n"),
+  };
+}

package/corpus/templates/design/server/lib/coding-handoff.ts

@@ -114,7 +114,10 @@ function injectResolvedTokensIntoHtml(
 ): string {
   const entries = Object.entries(resolvedCssVars);
   if (entries.length === 0) return content;
-  if (/applied-design-tokens/.test(content)) return content;
+  if (
+    /data-applied-design-tokens|\/\* applied-design-tokens \*\//.test(content)
+  )
+    return content;
 
   const decls = entries
     .map(([name, value]) => `  ${name}: ${value}; /* applied-design-tokens */`)
@@ -124,9 +127,35 @@ function injectResolvedTokensIntoHtml(
   const rootOpen = content.lastIndexOf(":root");
   if (rootOpen !== -1) {
     const braceOpen = content.indexOf("{", rootOpen);
-    const braceClose = content.indexOf("}", braceOpen);
-    if (braceOpen !== -1 && braceClose !== -1) {
-      return `${content.slice(0, braceClose)}\n${decls}\n${content.slice(braceClose)}`;
+    if (braceOpen !== -1) {
+      // Walk forward with a brace-depth counter so values containing `}`
+      // (e.g. url("}"), attr() fallbacks) don't fool us into injecting inside
+      // the value rather than at the end of the :root block.
+      let depth = 0;
+      let braceClose = -1;
+      let inSingle = false;
+      let inDouble = false;
+      for (let i = braceOpen; i < content.length; i++) {
+        const ch = content[i];
+        if (ch === "'" && !inDouble) {
+          inSingle = !inSingle;
+        } else if (ch === '"' && !inSingle) {
+          inDouble = !inDouble;
+        } else if (!inSingle && !inDouble) {
+          if (ch === "{") {
+            depth++;
+          } else if (ch === "}") {
+            depth--;
+            if (depth === 0) {
+              braceClose = i;
+              break;
+            }
+          }
+        }
+      }
+      if (braceClose !== -1) {
+        return `${content.slice(0, braceClose)}\n${decls}\n${content.slice(braceClose)}`;
+      }
     }
   }
 

package/corpus/templates/design/server/lib/design-export.ts

@@ -17,6 +17,12 @@ function escapeHtml(str: string): string {
     .replace(/"/g, """);
 }
 
+function extractRenderableHtml(content: string): string {
+  const bodyMatch = content.match(/<body\b[^>]*>([\s\S]*?)<\/body>/i);
+  if (bodyMatch) return bodyMatch[1].trim();
+  return content;
+}
+
 export function safeExportBaseName(title: string | null | undefined): string {
   const safe = (title || "design")
     .replace(/[^a-zA-Z0-9_-]/g, "-")
@@ -42,7 +48,10 @@ export function buildStandaloneHtml(args: {
   const jsxFiles = files.filter((f) => f.fileType === "jsx");
   const indexHtml =
     files.find((f) => f.filename === "index.html") ?? htmlFiles[0];
-  const combinedCss = cssFiles.map((f) => f.content ?? "").join("\n\n");
+  const combinedCss = cssFiles
+    .map((f) => f.content ?? "")
+    .join("\n\n")
+    .replace(/<\/style/gi, "<\\/style");
 
   if (
     indexHtml?.content &&
@@ -53,7 +62,7 @@ export function buildStandaloneHtml(args: {
     // so multi-file designs still ship in one bundle.
     const extraBody = [...htmlFiles, ...jsxFiles]
       .filter((f) => f !== indexHtml)
-      .map((f) => f.content ?? "")
+      .map((f) => extractRenderableHtml(f.content ?? ""))
       .join("\n\n");
     if (extraBody.trim()) {
       // Inline JS / template literals can contain `</body>` strings, so favor
@@ -85,7 +94,7 @@ export function buildStandaloneHtml(args: {
   }
 
   const combinedBody = [...htmlFiles, ...jsxFiles]
-    .map((f) => f.content ?? "")
+    .map((f) => extractRenderableHtml(f.content ?? ""))
     .join("\n\n");
 
   return `<!DOCTYPE html>
@@ -128,18 +137,36 @@ function normalizeHtmlForSvg(html: string): string {
     "&amp;",
   );
 
-  if (/<html\b[^>]*\bxmlns=/i.test(withEscapedBareAmpersands)) {
-    return withEscapedBareAmpersands;
+  // Wrap <script> and <style> block content in CDATA so that JS/CSS with
+  // raw `<`, `>`, or `&&` survives the XML parse required by SVG foreignObject.
+  const withCdata = withEscapedBareAmpersands
+    .replace(
+      /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/gi,
+      (_, open: string, content: string, close: string) => {
+        if (content.includes("//]]>")) return _;
+        return `${open}//<![CDATA[\n${content}\n//]]>${close}`;
+      },
+    )
+    .replace(
+      /(<style\b[^>]*>)([\s\S]*?)(<\/style>)/gi,
+      (_, open: string, content: string, close: string) => {
+        if (content.includes("]]>")) return _;
+        return `${open}<![CDATA[\n${content}\n]]>${close}`;
+      },
+    );
+
+  if (/<html\b[^>]*\bxmlns=/i.test(withCdata)) {
+    return withCdata;
   }
 
-  if (/<html\b/i.test(withEscapedBareAmpersands)) {
-    return withEscapedBareAmpersands.replace(
+  if (/<html\b/i.test(withCdata)) {
+    return withCdata.replace(
       /<html\b/i,
       '<html xmlns="http://www.w3.org/1999/xhtml"',
     );
   }
 
-  return `<html xmlns="http://www.w3.org/1999/xhtml"><body>${withEscapedBareAmpersands}</body></html>`;
+  return `<html xmlns="http://www.w3.org/1999/xhtml"><body>${withCdata}</body></html>`;
 }
 
 export function buildSvgForeignObject(args: {

package/corpus/templates/design/server/plugins/agent-chat.ts

@@ -7,6 +7,8 @@ import {
 import actionsRegistry from "../../.generated/actions-registry.js";
 import "../register-secrets.js";
 
+const DESIGN_BACKGROUND_RUN_SOFT_TIMEOUT_MS = 13 * 60_000;
+
 const INITIAL_TOOL_NAMES = [
   "view-screen",
   "list-designs",
@@ -37,6 +39,8 @@ export default createAgentChatPlugin({
   // paginate, and reduce provider data through providerFetch() without us
   // hardcoding one action per GitHub endpoint.
   codeExecution: { production: "sandboxed" },
+  durableBackgroundRuns: true,
+  runSoftTimeoutMs: DESIGN_BACKGROUND_RUN_SOFT_TIMEOUT_MS,
   resolveOrgId: async (event) => (await getOrgContext(event)).orgId,
   systemPrompt: `You are an AI prototyping assistant. You create and edit designs, files, design systems, variants, exports, sharing, and connected repository context through actions and shared application state.
 

package/corpus/templates/design/server/plugins/auth.ts

@@ -1,6 +1,11 @@
 import { createAuthPlugin } from "@agent-native/core/server";
 
 export default createAuthPlugin({
+  workspaceAppAudience: "internal",
+  // The visual-edit entry route and public design editor links can load without
+  // a session. Creating, mutating, generating, and sharing designs still go
+  // through authenticated actions.
+  workspaceAppPublicPaths: ["/visual-edit", "/design"],
   marketing: {
     appName: "Agent-Native Design",
     tagline:
@@ -19,5 +24,9 @@ export default createAuthPlugin({
   // publicPaths uses prefix matching, so this covers
   // /api/design-handoff/<id>?token=... while keeping every other /api/* and
   // /_agent-native/* route behind auth.
-  publicPaths: ["/api/design-handoff"],
+  publicPaths: [
+    "/api/design-handoff",
+    "/__manifest",
+    "/_agent-native/actions/get-design",
+  ],
 });

package/corpus/templates/design/server/routes/api/index-design-system-with-builder.post.ts

@@ -0,0 +1 @@
+export { indexDesignSystemWithBuilder as default } from "../../handlers/index-design-system-with-builder";

package/corpus/templates/design/shared/api.ts

@@ -81,6 +81,8 @@ export interface TweakDefinition {
   step?: number;
   defaultValue: string | number | boolean;
   cssVar?: string;
+  /** CSS unit to append when resolving a numeric slider value, e.g. "px" or "rem". When omitted, "px" is inferred for vars whose name contains "radius" and no unit is added for others. */
+  unit?: string;
 }
 
 // --- Question Flow ---

package/corpus/templates/design/shared/apply-edits.ts

@@ -30,8 +30,9 @@ function escapeRegExp(value: string): string {
 
 function countOccurrences(haystack: string, needle: string): number {
   if (!needle) return 0;
-  // Step by 1 (not by needle length) so self-overlapping matches — e.g. "aa"
-  // inside "aaa" — are both counted and treated as ambiguous, not unique.
+  // Step by 1 (not by needle length) so self-overlapping matches are counted.
+  // A count > 1 does NOT immediately throw — Strategy 2 runs first and may
+  // still resolve a unique non-overlapping match.
   let count = 0;
   let idx = haystack.indexOf(needle);
   while (idx !== -1) {
@@ -61,11 +62,10 @@ export function applyOneEdit(
   // Strategy 1 — exact substring.
   const exact = countOccurrences(content, search);
   if (exact === 1) return content.split(search).join(replace);
-  if (exact > 1) {
-    throw new Error(
-      `Edit ${index + 1}: "search" matched ${exact} places — add more surrounding context so it matches exactly one location.`,
-    );
-  }
+  // When exact > 1 (including self-overlapping matches), fall through to
+  // Strategy 2 before declaring ambiguity. Strategy 2 uses a non-overlapping
+  // regex scan, so a search string that appears self-overlapping under Strategy
+  // 1 may still resolve to a single unique whitespace-flexible match.
 
   // Strategy 2 — whitespace-flexible.
   const pattern = escapeRegExp(search).replace(/\s+/g, "\\s+");
@@ -77,8 +77,12 @@ export function applyOneEdit(
     return content.replace(re, () => replace);
   }
   if (flexible > 1) {
+    const detail =
+      exact > 1
+        ? `${exact} places (exact) and ${flexible} places (whitespace-insensitive)`
+        : `${flexible} places (whitespace-insensitive)`;
     throw new Error(
-      `Edit ${index + 1}: "search" matched ${flexible} places (whitespace-insensitive) — add more surrounding context.`,
+      `Edit ${index + 1}: "search" matched ${detail} — add more surrounding context so it matches exactly one location.`,
     );
   }
 

package/corpus/templates/design/shared/canvas-math.ts

@@ -346,7 +346,10 @@ export function assignRegions(
   const requestedColumns =
     options.columns == null
       ? maxColumns
-      : getWholeNumberAtLeast(options.columns, maxColumns, 1);
+      : Math.min(
+          maxColumns,
+          getWholeNumberAtLeast(options.columns, maxColumns, 1),
+        );
   const columns = Math.min(total, requestedColumns);
 
   return Array.from({ length: total }, (_, index) => {
@@ -563,9 +566,24 @@ export function resizeFrameFromDelta(
     }
   }
 
+  const preClampWidth = width;
+  const preClampHeight = height;
   width = Math.max(options.minWidth ?? MIN_CANVAS_FRAME_WIDTH, width);
   height = Math.max(options.minHeight ?? MIN_CANVAS_FRAME_HEIGHT, height);
 
+  if (options.preserveAspectRatio) {
+    const widthClamped = width > preClampWidth;
+    const heightClamped = height > preClampHeight;
+    if (widthClamped && !heightClamped) {
+      height = width / ratio;
+    } else if (heightClamped && !widthClamped) {
+      width = height * ratio;
+    } else if (widthClamped && heightClamped) {
+      // Both axes hit their minimum; width wins as the primary authority
+      height = width / ratio;
+    }
+  }
+
   return {
     ...origin,
     x: getResizedAxisStart(

package/corpus/templates/design/shared/code-layer.ts

@@ -557,6 +557,20 @@ const NON_VISUAL_TAGS = new Set([
 
 const RAW_TEXT_VISUAL_TAGS = new Set(["textarea"]);
 
+// HTML5 elements that are implicitly closed when a sibling of the same (or
+// related) type opens, because their closing tags are optional per the spec.
+const IMPLICIT_CLOSE_TAGS: Map<string, Set<string>> = new Map([
+  ["li", new Set(["li"])],
+  ["p", new Set(["p"])],
+  ["td", new Set(["td", "th"])],
+  ["th", new Set(["td", "th"])],
+  ["tr", new Set(["tr"])],
+  ["dt", new Set(["dt", "dd"])],
+  ["dd", new Set(["dt", "dd"])],
+  ["option", new Set(["option"])],
+  ["optgroup", new Set(["optgroup"])],
+]);
+
 const DATA_SELECTOR_PRIORITY = [
   "data-agent-native-node-id",
   "data-code-layer-id",
@@ -1017,15 +1031,36 @@ function parseHtmlElements(html: string): ParsedElement[] {
         const element = elements[stack[i]];
         if (!element) continue;
         stack.pop();
-        element.closeStart = match.index;
-        element.closeEnd = match.index + raw.length;
-        element.contentEnd = match.index;
-        element.end = match.index + raw.length;
-        if (element.tag === tag) break;
+        if (element.tag === tag) {
+          element.closeStart = match.index;
+          element.closeEnd = match.index + raw.length;
+          element.contentEnd = match.index;
+          element.end = match.index + raw.length;
+          break;
+        } else {
+          // Implicitly close optional-close-tag elements (e.g. <li>, <p>)
+          // without attributing the parent's close tag to them.
+          element.contentEnd = match.index;
+          element.end = match.index;
+        }
       }
       continue;
     }
 
+    // Auto-close HTML5 optional-close-tag elements when a sibling of the same
+    // type (or a related type) opens. This mirrors how browsers handle elements
+    // like <li>, <p>, <td>, <th>, <tr>, <dt>, <dd>, <option>, <optgroup>.
+    const stackTopTag =
+      stack.length > 0 ? elements[stack[stack.length - 1]]?.tag : undefined;
+    if (stackTopTag && IMPLICIT_CLOSE_TAGS.get(tag)?.has(stackTopTag)) {
+      const popped = stack.pop()!;
+      const poppedElement = elements[popped];
+      if (poppedElement) {
+        poppedElement.contentEnd = match.index;
+        poppedElement.end = match.index;
+      }
+    }
+
     const parentIndex = stack.length > 0 ? stack[stack.length - 1] : undefined;
     const parentKey = `${parentIndex ?? "root"}:${tag}`;
     const nthOfType = (sameTypeCounts.get(parentKey) ?? 0) + 1;
@@ -1140,7 +1175,7 @@ function pathSelector(
         ? undefined
         : elements[current.parentIndex];
   }
-  return parts.slice(-5).join(" > ");
+  return parts.join(" > ");
 }
 
 function primarySelector(
@@ -1314,24 +1349,32 @@ function layoutFor(
     style.display ??
     (classes.has("flex")
       ? "flex"
-      : classes.has("grid")
-        ? "grid"
-        : classes.has("hidden")
-          ? "none"
-          : classes.has("block")
-            ? "block"
-            : classes.has("inline-block")
-              ? "inline-block"
-              : undefined);
+      : classes.has("inline-flex")
+        ? "inline-flex"
+        : classes.has("grid")
+          ? "grid"
+          : classes.has("inline-grid")
+            ? "inline-grid"
+            : classes.has("hidden")
+              ? "none"
+              : classes.has("block")
+                ? "block"
+                : classes.has("inline-block")
+                  ? "inline-block"
+                  : undefined);
   const parentDisplay =
     parentStyle?.display ??
     (parentClasses?.has("flex")
       ? "flex"
-      : parentClasses?.has("grid")
-        ? "grid"
-        : parentClasses?.has("hidden")
-          ? "none"
-          : undefined);
+      : parentClasses?.has("inline-flex")
+        ? "inline-flex"
+        : parentClasses?.has("grid")
+          ? "grid"
+          : parentClasses?.has("inline-grid")
+            ? "inline-grid"
+            : parentClasses?.has("hidden")
+              ? "none"
+              : undefined);
   const flexDirection =
     style["flex-direction"] ??
     (classes.has("flex-col")
@@ -1921,11 +1964,8 @@ function selectorMatches(
   const selectorHasDirectPath = normalizedSelector.includes(" > ");
   if (
     selectorHasDirectPath &&
-    normalizedNodeSelectors.some(
-      (candidate) =>
-        candidate.endsWith(` > ${normalizedSelector}`) ||
-        (candidate.includes(" > ") &&
-          normalizedSelector.endsWith(` > ${candidate}`)),
+    normalizedNodeSelectors.some((candidate) =>
+      candidate.endsWith(` > ${normalizedSelector}`),
     )
   ) {
     return true;
@@ -2180,7 +2220,7 @@ function sanitizeTextEditHtml(html: string): string {
     )
     .replace(/\s+on[A-Za-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/g, "")
     .replace(
-      /\s+(href|src|xlink:href)\s*=\s*(["'])\s*javascript:[\s\S]*?\2/gi,
+      /\s+(href|src|xlink:href)\s*=\s*(?:(["'])\s*(?:javascript|vbscript|data):[\s\S]*?\2|(?:javascript|vbscript|data):[^\s>]*)/gi,
       "",
     );
 }
@@ -2253,6 +2293,7 @@ function applyMoveNodeEdit(
 function findAfterNode(
   projection: CodeLayerProjection,
   before: CodeLayerNode,
+  insertAt?: number,
 ): CodeLayerNode | undefined {
   return (
     projection.nodes.find((node) => node.id === before.id) ??
@@ -2260,7 +2301,13 @@ function findAfterNode(
       (node) =>
         node.tag === before.tag &&
         node.source?.openStart === before.source?.openStart,
-    )
+    ) ??
+    (insertAt !== undefined
+      ? projection.nodes.find(
+          (node) =>
+            node.tag === before.tag && node.source?.openStart === insertAt,
+        )
+      : undefined)
   );
 }
 
@@ -2322,6 +2369,7 @@ export function applyVisualEdit(
   }
 
   let edit: { content: string; capability: EditCapability } | PatchResultStatus;
+  let moveInsertAt: number | undefined;
   if (intent.kind === "style") {
     edit = applyStyleEdit(html, element, intent);
   } else if (intent.kind === "class") {
@@ -2363,6 +2411,17 @@ export function applyVisualEdit(
         ),
       };
     }
+    // Compute the expected post-move openStart so findAfterNode can locate the
+    // moved node even when its nodeId changes (position-based id).
+    const rawInsertAt =
+      intent.placement === "before"
+        ? anchorElement.start
+        : intent.placement === "after"
+          ? anchorElement.end
+          : anchorElement.contentEnd;
+    const removedLength = element.end - element.start;
+    moveInsertAt =
+      element.start < rawInsertAt ? rawInsertAt - removedLength : rawInsertAt;
     edit = applyMoveNodeEdit(html, element, anchorElement, intent);
   }
 
@@ -2389,7 +2448,7 @@ export function applyVisualEdit(
   }
 
   const nextProjection = buildCodeLayerProjection(edit.content, { source });
-  const afterNode = findAfterNode(nextProjection, beforeNode);
+  const afterNode = findAfterNode(nextProjection, beforeNode, moveInsertAt);
   const after = afterNode ? summarizeNode(afterNode) : undefined;
 
   return {

package/corpus/templates/design/shared/generation-session.ts

@@ -18,6 +18,7 @@ export type DesignGenerationFrameRole = "screen" | "variant";
 
 export interface DesignGenerationFrame {
   frameId: string;
+  filename?: string;
   agentId: string;
   agentName: string;
   agentColor: string;

package/corpus/templates/design/shared/resolve-tweaks.ts

@@ -24,8 +24,8 @@ export type TweakSelections = Record<string, string | number | boolean>;
  * assignments. Rules (must match the editor's historical inline behavior):
  *
  *  - booleans  -> "1" / "0"
- *  - numbers   -> `${value}` plus "px" when the CSS var name contains "radius",
- *                 otherwise unitless
+ *  - numbers   -> `${value}` plus `t.unit` when provided, falling back to "px"
+ *                 when the CSS var name contains "radius", otherwise unitless
  *  - strings   -> the string as-is
  *
  * Tweaks without a `cssVar` are skipped (they don't map to a property).
@@ -42,7 +42,8 @@ export function resolveTweaksToCssVars(
     if (typeof v === "boolean") {
       out[t.cssVar] = v ? "1" : "0";
     } else if (typeof v === "number") {
-      const unit = t.cssVar.toLowerCase().includes("radius") ? "px" : "";
+      const unit =
+        t.unit ?? (t.cssVar.toLowerCase().includes("radius") ? "px" : "");
       out[t.cssVar] = `${v}${unit}`;
     } else {
       out[t.cssVar] = String(v);