@agent-native/core 0.80.9 → 0.80.10

package/corpus/templates/design/changelog/2026-06-29-added-a-review-panel-in-the-design-editor-s-inspector-with-a.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Added a Review panel in the design editor's inspector with an on-demand accessibility audit and one-click inline fixes for contrast, tap-target, and focus issues

package/corpus/templates/design/changelog/2026-06-29-copying-and-pasting-layers-no-longer-shows-success-notificat.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Copying and pasting layers no longer shows success notifications.

package/corpus/templates/design/changelog/2026-06-29-device-presets-in-all-screens-view-resize-the-selected-previ.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Device presets in all-screens view resize the selected preview width and height together.

package/corpus/templates/design/changelog/2026-06-29-layer-and-canvas-drags-keep-the-layer-list-stable-while-chan.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Layer and canvas drags keep the layer list stable while changes save.

package/corpus/templates/design/changelog/2026-06-29-layer-moves-can-be-undone-and-redone-without-flashing-the-ca.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Layer moves can be undone and redone without flashing the canvas preview.

package/corpus/templates/design/changelog/2026-06-29-screen-previews-use-a-single-blue-hover-border-in-all-screen.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Screen previews use a single blue hover border in all-screens view.

package/corpus/templates/design/changelog/2026-06-29-selected-containers-show-draggable-padding-and-gap-guides-on.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Selected containers show draggable padding and gap guides on hover.

package/corpus/templates/design/changelog/2026-06-29-the-design-editor-adds-a-studio-layer-with-tokens-respon.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+The Design editor gains a Studio layer — design tokens, multi-breakpoint responsive editing, code-backed components with Create component and Inspect code, accessibility and visual-diff review, and a Builder-powered real-app tier — with each capability gated to what the design's source can safely support.

package/corpus/templates/design/changelog/2026-06-30-accessibility-findings-now-offer-a-one-click-fix.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Accessibility findings can now be fixed in one click for common inline issues like low contrast, small tap targets, and focus visibility.

package/corpus/templates/design/changelog/2026-06-30-component-instances-now-have-editable-props-in-the-inspe.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Selecting a component instance now shows editable props in the inspector — change variants, toggle booleans, and edit labels, and the component updates live.

package/corpus/templates/design/changelog/2026-06-30-inspect-code-now-shows-the-elements-opening-tag-at-a-gla.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Inspect code now shows the selected element’s opening tag (tag name and attributes) at a glance.

package/corpus/templates/design/changelog/2026-06-30-shader-fill-presets-can-now-be-applied-to-an-element.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Shader fill presets can now be applied to a selected element, not just previewed.

package/corpus/templates/design/changelog/2026-06-30-the-motion-timeline-can-now-add-a-track-to-any-element-a.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+The motion timeline can now add an animation track to any selected element and write it to CSS, with a live scrub preview.

package/corpus/templates/design/changelog/2026-06-30-visual-editor-selection-layer-paint-and-drawing-controls-are-more-reliable.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Visual editor selection, layer dragging, paint blend modes, and drawing controls are more reliable.

package/corpus/templates/design/e2e/helpers.ts

@@ -25,8 +25,10 @@ export async function readSeedDesignId(): Promise<string> {
   return designId;
 }
 
+const DESIGN_PREVIEW_IFRAME_SELECTOR = "iframe[data-design-preview-iframe]";
+
 export function designFrame(page: Page): FrameLocator {
-  return page.frameLocator("iframe[data-design-preview-iframe]");
+  return page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).first().contentFrame();
 }
 
 /** Open the editor for a design and wait for the toolbar + iframe to be ready. */
@@ -40,7 +42,7 @@ export async function gotoEditor(page: Page, designId: string): Promise<void> {
 
 async function waitForDesignBridgeReady(page: Page): Promise<void> {
   await expect(
-    page.locator("iframe[data-design-preview-iframe]"),
+    page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).first(),
   ).toBeVisible();
   await expect(
     designFrame(page).locator('[data-agent-native-edit-overlay="shield"]'),
@@ -71,8 +73,12 @@ export async function enterDirectMode(page: Page): Promise<void> {
   await expect
     .poll(
       async () =>
-        (await page.locator("iframe[data-design-preview-iframe]").boundingBox())
-          ?.width ?? 0,
+        (
+          await page
+            .locator(DESIGN_PREVIEW_IFRAME_SELECTOR)
+            .first()
+            .boundingBox()
+        )?.width ?? 0,
       { timeout: 10_000 },
     )
     .toBeGreaterThan(600);

package/corpus/templates/design/server/db/schema.ts

@@ -81,3 +81,126 @@ export const designLocalhostConnections = table(
     updatedAt: text("updated_at").default(now()),
   },
 );
+
+// ---------------------------------------------------------------------------
+// New tables — additive only; never alter existing tables.
+// All ownable tables are read/written through accessFilter / assertAccess.
+// ---------------------------------------------------------------------------
+
+/**
+ * Real-app component metadata indexed from TS prop types, cva/tailwind-variants
+ * variants, and Storybook stories. Scoped to one design + source ref.
+ */
+export const componentIndex = table("component_index", {
+  id: text("id").primaryKey(),
+  designId: text("design_id").notNull(),
+  /** Opaque string identifying the source connection (localhost bridge id, fusion project id, etc.) */
+  sourceRef: text("source_ref"),
+  name: text("name").notNull(),
+  filePath: text("file_path"),
+  exportName: text("export_name"),
+  /** JSON: parsed prop types / cva variant definitions */
+  props: text("props"),
+  /** JSON: variant groups (size, color, state, …) */
+  variants: text("variants"),
+  /** JSON: Storybook stories referencing this component */
+  stories: text("stories"),
+  /** JSON: runtime CSS selectors used to outline instances on the canvas */
+  runtimeSelectors: text("runtime_selectors"),
+  createdAt: text("created_at").default(now()),
+  updatedAt: text("updated_at").default(now()),
+  ...ownableColumns(),
+});
+
+/**
+ * Motion timeline — scoped to one design + source ref + screen/file.
+ * A design may have many timelines (one per screen or animation target).
+ * The compiled CSS is the runtime truth; tracks JSON aids editing only.
+ */
+export const motionTimeline = table("motion_timeline", {
+  id: text("id").primaryKey(),
+  designId: text("design_id").notNull(),
+  /** Opaque source connection ref; null for inline designs. */
+  sourceRef: text("source_ref"),
+  /** File path for real-app CSS modules; null for inline (managed <style> block). */
+  filePath: text("file_path"),
+  /**
+   * JSON array of track objects:
+   *   [{ target_node_id, property, keyframes: [{ t, value, ease }] }]
+   */
+  tracks: text("tracks").notNull().default("[]"),
+  /** Total animation duration in milliseconds. */
+  durationMs: integer("duration_ms").notNull().default(300),
+  /** Default easing function name (e.g. "ease", "ease-in-out", "linear"). */
+  defaultEase: text("default_ease").notNull().default("ease"),
+  /**
+   * Hash of the compiled CSS output; used to detect drift between the tracks
+   * JSON and the compiled CSS block. apply-motion-edit updates both atomically.
+   */
+  compiledHash: text("compiled_hash"),
+  createdAt: text("created_at").default(now()),
+  updatedAt: text("updated_at").default(now()),
+  ...ownableColumns(),
+});
+
+/**
+ * Design states, fixtures, and live captures.
+ * States are alternate x-data / DOM snapshots (e.g. Default, Loading, Empty).
+ * Fixtures hold static data payloads for real-app preview.
+ * Captures are live snapshots of a running app's route + props + API data.
+ */
+export const designState = table("design_state", {
+  id: text("id").primaryKey(),
+  designId: text("design_id").notNull(),
+  /** Opaque source connection ref. */
+  sourceRef: text("source_ref"),
+  name: text("name").notNull(),
+  /** 'state' | 'fixture' | 'capture' */
+  kind: text("kind", { enum: ["state", "fixture", "capture"] })
+    .notNull()
+    .default("state"),
+  /** Active breakpoint when this state was created: 'auto' | 'desktop' | 'tablet' | 'mobile' */
+  breakpoint: text("breakpoint", {
+    enum: ["auto", "desktop", "tablet", "mobile"],
+  })
+    .notNull()
+    .default("auto"),
+  /** Route path captured (real-app captures only). */
+  route: text("route"),
+  /** JSON: static data fixture payload (fixture kind). */
+  fixtureData: text("fixture_data"),
+  /** JSON: live-captured route props + API response (capture kind). */
+  captureData: text("capture_data"),
+  /** Opaque reference to a design_version snapshot or stored preview artifact. */
+  previewRef: text("preview_ref"),
+  createdAt: text("created_at").default(now()),
+  updatedAt: text("updated_at").default(now()),
+  ...ownableColumns(),
+});
+
+/**
+ * Cached accessibility audit + visual diff results for a design.
+ * Keyed by design + optional base/compare design_versions pair + source ref.
+ * status: 'pending' | 'ready' | 'error'
+ */
+export const designReviewSnapshot = table("design_review_snapshot", {
+  id: text("id").primaryKey(),
+  designId: text("design_id").notNull(),
+  /** design_versions.id for the base (older) snapshot in a diff. */
+  baseVersionId: text("base_version_id"),
+  /** design_versions.id for the compare (newer) snapshot in a diff. */
+  compareVersionId: text("compare_version_id"),
+  /** Opaque source connection ref. */
+  sourceRef: text("source_ref"),
+  /** JSON: array of a11y findings (contrast, tap targets, roles, alt, focus). */
+  a11yFindings: text("a11y_findings"),
+  /** JSON: visual diff surface data (changed regions, before/after refs). */
+  visualDiff: text("visual_diff"),
+  /** 'pending' | 'ready' | 'error' */
+  status: text("status", { enum: ["pending", "ready", "error"] })
+    .notNull()
+    .default("pending"),
+  createdAt: text("created_at").default(now()),
+  updatedAt: text("updated_at").default(now()),
+  ...ownableColumns(),
+});

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

@@ -121,6 +121,96 @@ CREATE INDEX IF NOT EXISTS design_systems_owner_org_updated_idx ON design_system
 CREATE INDEX IF NOT EXISTS design_shares_resource_principal_idx ON design_shares (resource_id, principal_type, principal_id);
 CREATE INDEX IF NOT EXISTS design_system_shares_resource_principal_idx ON design_system_shares (resource_id, principal_type, principal_id)`,
     },
+    // v12: component_index — real-app component metadata (name, file path,
+    // export name, parsed prop types, cva/tailwind-variants variants, Storybook
+    // stories, runtime selectors). Ownable; access-checked via accessFilter /
+    // assertAccess.
+    {
+      version: 12,
+      sql: `CREATE TABLE IF NOT EXISTS component_index (
+    id TEXT PRIMARY KEY,
+    design_id TEXT NOT NULL,
+    source_ref TEXT,
+    name TEXT NOT NULL,
+    file_path TEXT,
+    export_name TEXT,
+    props TEXT,
+    variants TEXT,
+    stories TEXT,
+    runtime_selectors TEXT,
+    created_at TEXT DEFAULT (datetime('now')),
+    updated_at TEXT DEFAULT (datetime('now')),
+    owner_email TEXT NOT NULL DEFAULT 'local@localhost',
+    org_id TEXT,
+    visibility TEXT NOT NULL DEFAULT 'private'
+  )`,
+    },
+    // v13: motion_timeline — CSS-first keyframe animation tracks scoped to one
+    // design + source + screen/file. tracks JSON is the editing representation;
+    // the compiled CSS block (managed <style data-agent-native-motion>) is the
+    // runtime truth. compiled_hash guards drift between the two. Ownable.
+    {
+      version: 13,
+      sql: `CREATE TABLE IF NOT EXISTS motion_timeline (
+    id TEXT PRIMARY KEY,
+    design_id TEXT NOT NULL,
+    source_ref TEXT,
+    file_path TEXT,
+    tracks TEXT NOT NULL DEFAULT '[]',
+    duration_ms INTEGER NOT NULL DEFAULT 300,
+    default_ease TEXT NOT NULL DEFAULT 'ease',
+    compiled_hash TEXT,
+    created_at TEXT DEFAULT (datetime('now')),
+    updated_at TEXT DEFAULT (datetime('now')),
+    owner_email TEXT NOT NULL DEFAULT 'local@localhost',
+    org_id TEXT,
+    visibility TEXT NOT NULL DEFAULT 'private'
+  )`,
+    },
+    // v14: design_state — design states (alternate x-data/DOM snapshots for
+    // Default / Loading / Empty / Error), static data fixtures, and live
+    // captures of running-app route + props + API data. Ownable.
+    {
+      version: 14,
+      sql: `CREATE TABLE IF NOT EXISTS design_state (
+    id TEXT PRIMARY KEY,
+    design_id TEXT NOT NULL,
+    source_ref TEXT,
+    name TEXT NOT NULL,
+    kind TEXT NOT NULL DEFAULT 'state',
+    breakpoint TEXT NOT NULL DEFAULT 'auto',
+    route TEXT,
+    fixture_data TEXT,
+    capture_data TEXT,
+    preview_ref TEXT,
+    created_at TEXT DEFAULT (datetime('now')),
+    updated_at TEXT DEFAULT (datetime('now')),
+    owner_email TEXT NOT NULL DEFAULT 'local@localhost',
+    org_id TEXT,
+    visibility TEXT NOT NULL DEFAULT 'private'
+  )`,
+    },
+    // v15: design_review_snapshot — cached a11y audit results and visual diff
+    // data keyed by design + optional base/compare design_versions pair.
+    // status: 'pending' | 'ready' | 'error'. Ownable.
+    {
+      version: 15,
+      sql: `CREATE TABLE IF NOT EXISTS design_review_snapshot (
+    id TEXT PRIMARY KEY,
+    design_id TEXT NOT NULL,
+    base_version_id TEXT,
+    compare_version_id TEXT,
+    source_ref TEXT,
+    a11y_findings TEXT,
+    visual_diff TEXT,
+    status TEXT NOT NULL DEFAULT 'pending',
+    created_at TEXT DEFAULT (datetime('now')),
+    updated_at TEXT DEFAULT (datetime('now')),
+    owner_email TEXT NOT NULL DEFAULT 'local@localhost',
+    org_id TEXT,
+    visibility TEXT NOT NULL DEFAULT 'private'
+  )`,
+    },
   ],
   { table: "design_migrations" },
 );

package/corpus/templates/design/shared/builder-app.ts

@@ -0,0 +1,297 @@
+/**
+ * Builder app helpers for the Design Studio.
+ *
+ * Provides two capabilities:
+ *
+ * 1. **Connection status** — resolve whether Builder is configured for the
+ *    current request (credentials + project ID), without duplicating Builder
+ *    auth logic.  Delegates entirely to the core `resolveBuilderCredentials` /
+ *    `resolveIsBuilderBranchingEnabled` helpers; no credential values are
+ *    surfaced in return types.
+ *
+ * 2. **Migration seed** — build the prompt seed handed to the Builder cloud
+ *    agent when migrating an inline Alpine/HTML design to a real React + Tailwind
+ *    app.  The seed carries:
+ *      - The design's semantic HTML (up to `MAX_HTML_BYTES` per file).
+ *      - The `:root` CSS custom-property block extracted from each file.
+ *      - Any Brand Kit token summary from the linked design system.
+ *      - Human-readable migration instructions for the Builder cloud agent.
+ *
+ * Nothing in this module calls the Builder API directly.  API calls happen in
+ * `migrate-inline-design-to-app.ts` (action) via `runBuilderAgent`.
+ *
+ * Security note: credential values are never included in return types or seed
+ * content.  The `resolveBuilderStatus` function returns only boolean flags and
+ * the pre-built `connectUrl` from the core browser helpers.
+ */
+
+import {
+  resolveBuilderBranchProjectId,
+  resolveIsBuilderBranchingEnabled,
+} from "@agent-native/core/server";
+import { resolveHasCompleteBuilderConnection } from "@agent-native/core/server";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface BuilderConnectionStatus {
+  /** True when Builder credentials are configured and valid. */
+  connected: boolean;
+  /** True when a Builder branch project is also configured (= agents can run). */
+  builderEnabled: boolean;
+  /** The resolved Builder branch project ID, empty string when not configured. */
+  branchProjectId: string;
+  /** The email of the currently authenticated user (for routing the Builder job). */
+  ownerEmail: string | null;
+}
+
+export interface MigrationSeed {
+  /**
+   * The full migration prompt to hand to `runBuilderAgent`.
+   * Contains the design HTML, extracted CSS vars, token summary, and
+   * detailed instructions for the Builder cloud agent.
+   */
+  prompt: string;
+  /**
+   * The number of design files included in the seed (capped at
+   * `MAX_SEED_FILES`).
+   */
+  fileCount: number;
+  /**
+   * Total HTML bytes included in the seed (before any truncation).
+   */
+  totalBytes: number;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/**
+ * Maximum number of files to include in the migration seed.
+ * Inline designs rarely exceed this; the cap keeps the Builder prompt
+ * within a safe token budget.
+ */
+const MAX_SEED_FILES = 10;
+
+/**
+ * Maximum bytes per HTML file included in the migration seed.
+ * Files larger than this are truncated with an ellipsis notice so the
+ * Builder agent still sees the overall structure without exceeding its
+ * prompt limit.
+ */
+const MAX_HTML_BYTES_PER_FILE = 80_000;
+
+// ---------------------------------------------------------------------------
+// Connection status
+// ---------------------------------------------------------------------------
+
+/**
+ * Return the Builder connection status for the current request context.
+ *
+ * Delegates to core helpers (`resolveHasCompleteBuilderConnection`,
+ * `resolveIsBuilderBranchingEnabled`, `resolveBuilderBranchProjectId`) so
+ * credential resolution lives in one place and is never duplicated here.
+ *
+ * Usage:
+ * ```ts
+ * const status = await resolveBuilderStatus();
+ * if (!status.builderEnabled) {
+ *   return { cta: "connect-builder" };
+ * }
+ * ```
+ */
+export async function resolveBuilderStatus(): Promise<BuilderConnectionStatus> {
+  const [connected, builderEnabled, branchProjectId] = await Promise.all([
+    resolveHasCompleteBuilderConnection(),
+    resolveIsBuilderBranchingEnabled(),
+    resolveBuilderBranchProjectId(),
+  ]);
+
+  return {
+    connected,
+    builderEnabled,
+    branchProjectId,
+    ownerEmail: getRequestUserEmail() ?? null,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// CSS-var extraction
+// ---------------------------------------------------------------------------
+
+/**
+ * Extract the `:root` block(s) from a raw HTML/CSS string.
+ *
+ * Returns only the lines inside `:root { … }` declarations to keep the
+ * migration seed focused on custom-property tokens rather than the full
+ * stylesheet.  Falls back to the empty string when no `:root` block is found.
+ */
+function extractRootCssVars(html: string): string {
+  // Match one or more :root { … } blocks (non-greedy, handles multi-block files).
+  const matches = [...html.matchAll(/:root\s*\{([^}]*)\}/g)];
+  if (matches.length === 0) return "";
+
+  const lines: string[] = [];
+  for (const match of matches) {
+    const block = match[1] ?? "";
+    for (const line of block.split("\n")) {
+      const trimmed = line.trim();
+      // Only include CSS custom property declarations (--var: value;).
+      if (trimmed.startsWith("--") && trimmed.includes(":")) {
+        lines.push(`  ${trimmed}`);
+      }
+    }
+  }
+  return lines.length > 0 ? `:root {\n${lines.join("\n")}\n}` : "";
+}
+
+// ---------------------------------------------------------------------------
+// Migration seed builder
+// ---------------------------------------------------------------------------
+
+/**
+ * Build the migration seed prompt for the Builder cloud agent.
+ *
+ * @param params.title - Human-readable design title (used in the prompt header).
+ * @param params.files - Current design files (id + filename + content + fileType).
+ * @param params.resolvedCssVars - Resolved CSS-var → value map from tweak selections.
+ * @param params.brandKitSummary - Optional human-readable token summary from the
+ *   linked design system (e.g. from `index-design-tokens`).
+ *
+ * The caller is responsible for fetching the design snapshot first.  This
+ * function is pure (no DB or network calls) so it is easy to test and reuse.
+ */
+export function buildMigrationSeed(params: {
+  title: string;
+  files: Array<{
+    filename: string;
+    content: string;
+    fileType: string;
+  }>;
+  resolvedCssVars?: Record<string, string>;
+  brandKitSummary?: string;
+}): MigrationSeed {
+  const { title, files, resolvedCssVars, brandKitSummary } = params;
+
+  // Limit file count.
+  const seedFiles = files.slice(0, MAX_SEED_FILES);
+  let totalBytes = 0;
+
+  // Build per-file sections.
+  const fileSections: string[] = [];
+  for (const file of seedFiles) {
+    const rawBytes = new TextEncoder().encode(file.content).length;
+    totalBytes += rawBytes;
+
+    let content = file.content;
+    let truncationNote = "";
+    if (rawBytes > MAX_HTML_BYTES_PER_FILE) {
+      content = file.content.slice(0, MAX_HTML_BYTES_PER_FILE);
+      truncationNote = `\n<!-- [TRUNCATED: original file was ${rawBytes} bytes; only the first ${MAX_HTML_BYTES_PER_FILE} bytes are shown] -->`;
+    }
+
+    // Extract :root CSS vars from each file for the token block.
+    const cssVars = extractRootCssVars(content);
+
+    const section = [
+      `### File: ${file.filename}`,
+      "```html",
+      content,
+      truncationNote,
+      "```",
+      ...(cssVars
+        ? [
+            "",
+            "**Extracted CSS custom properties (design tokens):**",
+            "```css",
+            cssVars,
+            "```",
+          ]
+        : []),
+    ]
+      .filter((l) => l !== "")
+      .join("\n");
+
+    fileSections.push(section);
+  }
+
+  // Build the resolved CSS vars block (from tweak selections).
+  let resolvedVarsBlock = "";
+  if (resolvedCssVars && Object.keys(resolvedCssVars).length > 0) {
+    const lines = Object.entries(resolvedCssVars)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join("\n");
+    resolvedVarsBlock = [
+      "",
+      "## User-tuned token overrides (apply these values in the real app)",
+      "```css",
+      `:root {\n${lines}\n}`,
+      "```",
+    ].join("\n");
+  }
+
+  // Brand Kit summary block.
+  const brandKitBlock =
+    brandKitSummary && brandKitSummary.trim()
+      ? [
+          "",
+          "## Brand Kit / Design System tokens",
+          brandKitSummary.trim(),
+        ].join("\n")
+      : "";
+
+  // Build the full prompt.
+  const omittedFilesNote =
+    files.length > MAX_SEED_FILES
+      ? `\n> Note: ${files.length - MAX_SEED_FILES} additional file(s) were omitted to stay within the prompt limit.\n`
+      : "";
+
+  const prompt = [
+    `# Migrate inline design to React app: "${title}"`,
+    "",
+    "You are a Builder cloud agent. The user has an inline Alpine.js / Tailwind HTML prototype",
+    "that they want to migrate to a real React + TypeScript + Tailwind app.",
+    "",
+    "## Your task",
+    "1. Convert the HTML prototype below into a production-quality React + TypeScript + Tailwind",
+    "   application, preserving the visual design and UX faithfully.",
+    "2. Map Alpine.js `x-data` / `x-show` / `x-bind` patterns to React state, conditional",
+    "   rendering, and event handlers.",
+    "3. Extract inline styles and repeated patterns into reusable React components with",
+    "   Tailwind classes.  Preserve the `:root` CSS custom properties as a `globals.css` file",
+    "   and wire them into the Tailwind theme config.",
+    "4. Carry all design tokens (color, typography, spacing, radius) from the `:root` block",
+    "   into the generated `globals.css` and `tailwind.config.ts` so the visual identity is",
+    "   identical to the original prototype.",
+    "5. Do not introduce placeholder data or lorem ipsum.  Keep the structural content",
+    "   from the original design.",
+    "6. Use shadcn/ui primitives (Button, Card, Dialog, Input, etc.) where the HTML uses",
+    "   semantically equivalent patterns.",
+    "7. The app must compile and render without errors.",
+    "",
+    "## Source design files",
+    omittedFilesNote,
+    ...fileSections,
+    resolvedVarsBlock,
+    brandKitBlock,
+    "",
+    "## Output expectations",
+    "- A fully working React app in the current project branch.",
+    "- `src/app/globals.css` containing all `:root` CSS custom properties from above.",
+    "- `tailwind.config.ts` wiring those vars into the Tailwind theme.",
+    "- At least one page component that renders the migrated design.",
+    "- All Alpine `x-data` patterns converted to React hooks / state.",
+    "- All Tailwind CDN classes preserved as-is in JSX.",
+  ]
+    .filter((l) => l !== undefined && l !== null)
+    .join("\n");
+
+  return {
+    prompt,
+    fileCount: seedFiles.length,
+    totalBytes,
+  };
+}