@agent-native/core 0.80.8 → 0.80.10

package/corpus/templates/design/playwright.config.ts

@@ -15,6 +15,11 @@ import { defineConfig, devices } from "@playwright/test";
  */
 const PORT = Number(process.env.E2E_PORT ?? 9333);
 const BASE_URL = process.env.E2E_BASE_URL ?? `http://127.0.0.1:${PORT}`;
+const E2E_DATABASE_URL = `file:${path.join(
+  import.meta.dirname,
+  "data",
+  "e2e.db",
+)}`;
 const BROWSER_CHANNEL = process.env.E2E_BROWSER_CHANNEL;
 
 export default defineConfig({
@@ -47,9 +52,10 @@ export default defineConfig({
     ? undefined
     : {
         // APP_NAME + the app-prefixed DESIGN_DATABASE_URL is checked BEFORE the
-        // generic DATABASE_URL, so a `.env` Postgres URL can never override this
-        // throwaway local SQLite db.
-        command: `APP_NAME=design DESIGN_DATABASE_URL="file:./data/e2e.db" PORT=${PORT} pnpm dev`,
+        // generic DATABASE_URL, but set both to an absolute SQLite URL so a
+        // `.env` Postgres URL or a changed command cwd can never override this
+        // throwaway local db.
+        command: `APP_NAME=design DESIGN_DATABASE_URL=${JSON.stringify(E2E_DATABASE_URL)} DATABASE_URL=${JSON.stringify(E2E_DATABASE_URL)} PORT=${PORT} corepack pnpm dev`,
         url: BASE_URL,
         reuseExistingServer: !process.env.CI,
         // Cold Vite dep-optimization on first boot can exceed two minutes.

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/lib/coding-handoff.ts

@@ -82,6 +82,23 @@ export function buildRawHandoffUrl({
   return normalizedOrigin ? `${normalizedOrigin}${path}` : path;
 }
 
+export function buildHandoffZipUrl({
+  id,
+  token,
+  origin,
+}: {
+  id: string;
+  token: string;
+  origin?: string | null;
+}): string {
+  const params = new URLSearchParams({ token });
+  const path = appPath(
+    `/api/design-handoff/${encodeURIComponent(id)}.zip?${params.toString()}`,
+  );
+  const normalizedOrigin = normalizeHandoffOrigin(origin);
+  return normalizedOrigin ? `${normalizedOrigin}${path}` : path;
+}
+
 function parseDesignData(data?: string | null): Record<string, unknown> {
   if (!data) return {};
   try {
@@ -301,20 +318,127 @@ export function buildDesignHandoffMarkdown(
   return `${lines.join("\n")}\n`;
 }
 
+function safeZipBaseName(title?: string | null): string {
+  const safe = (title || "design")
+    .replace(/[^a-zA-Z0-9_-]/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+  return safe || "design";
+}
+
+export function buildHandoffZipFilename(title?: string | null): string {
+  return `${safeZipBaseName(title)}-agent-handoff.zip`;
+}
+
+function safeZipPath(filename: string, fallback: string): string {
+  const normalized = filename
+    .replace(/\\/g, "/")
+    .split("/")
+    .map((part) => part.trim())
+    .filter((part) => part && part !== "." && part !== "..")
+    .join("/");
+  const withoutControlCharacters = normalized.replace(/[\x00-\x1f\x7f]/g, "");
+  return withoutControlCharacters || fallback;
+}
+
+function uniqueZipPath(path: string, seen: Set<string>): string {
+  if (!seen.has(path)) {
+    seen.add(path);
+    return path;
+  }
+  const slash = path.lastIndexOf("/");
+  const dir = slash === -1 ? "" : `${path.slice(0, slash + 1)}`;
+  const base = slash === -1 ? path : path.slice(slash + 1);
+  const dot = base.lastIndexOf(".");
+  const name = dot === -1 ? base : base.slice(0, dot);
+  const ext = dot === -1 ? "" : base.slice(dot);
+  let index = 2;
+  while (seen.has(`${dir}${name}-${index}${ext}`)) index += 1;
+  const next = `${dir}${name}-${index}${ext}`;
+  seen.add(next);
+  return next;
+}
+
+export async function buildDesignHandoffZip(
+  payload: DesignHandoffPayload,
+): Promise<Uint8Array> {
+  const JSZip = (await import("jszip")).default;
+  const zip = new JSZip();
+  const seenPaths = new Set<string>();
+
+  const readme = [
+    `# ${payload.design.title}`,
+    "",
+    "This archive contains the source files exported from Agent-Native Design.",
+    "Use the files as the source of truth for layout, typography, colors, spacing, copy, and interactions.",
+    "",
+    `Design ID: ${payload.design.id}`,
+    `Exported: ${payload.exportedAt}`,
+    payload.design.projectType
+      ? `Project type: ${payload.design.projectType}`
+      : null,
+    "",
+    "## Files",
+    "",
+    ...payload.files.map((file) => `- ${file.filename} (${file.fileType})`),
+  ]
+    .filter((line): line is string => line !== null)
+    .join("\n");
+
+  zip.file(uniqueZipPath("README.md", seenPaths), readme);
+  zip.file(
+    uniqueZipPath("design-handoff.json", seenPaths),
+    JSON.stringify(
+      {
+        exportedAt: payload.exportedAt,
+        design: payload.design,
+        files: payload.files.map((file) => ({
+          filename: file.filename,
+          fileType: file.fileType,
+        })),
+        appliedDesignTokens: payload.appliedDesignTokens,
+      },
+      null,
+      2,
+    ),
+  );
+
+  payload.files.forEach((file, index) => {
+    const path = uniqueZipPath(
+      safeZipPath(file.filename, `file-${index + 1}.${file.fileType || "txt"}`),
+      seenPaths,
+    );
+    zip.file(path, file.content);
+  });
+
+  return zip.generateAsync({ type: "uint8array" });
+}
+
 export function buildCodingHandoffPrompt({
   rawUrl,
+  zipUrl,
   title,
   fileCount,
 }: {
   rawUrl: string;
+  zipUrl?: string;
   title: string;
   fileCount: number;
 }): string {
-  return [
+  const lines = [
     `Build this design as production code: ${title}`,
     "",
     `Fetch the raw design bundle here: ${rawUrl}`,
+  ];
+  if (zipUrl) {
+    lines.push(
+      "",
+      `If you prefer files, download the ZIP bundle here: ${zipUrl}`,
+    );
+  }
+  lines.push(
     "",
     `The bundle contains ${fileCount} file${fileCount === 1 ? "" : "s"} with the exact HTML/CSS/JSX source from the Design app. Use it as the source of truth for layout, typography, colors, spacing, responsive behavior, copy, and interactions. Convert it into the target project stack or Builder.io page/component while preserving the visual intent. If multiple screens are included, implement the primary page first and map the rest to routes, sections, or components as appropriate.`,
-  ].join("\n");
+  );
+  return lines.join("\n");
 }

package/corpus/templates/design/server/plugins/core-routes.ts

@@ -6,8 +6,7 @@ import { createCoreRoutesPlugin } from "@agent-native/core/server";
 // a resolveOpenPath, `/_agent-native/open?app=design&view=editor&designId=…`
 // falls back to `/<view>` = `/editor`, which has no matching route (the
 // editor route is `design.$id.tsx` → `/design/:id`) and 404s — so an
-// "Open in Design" link for a connected Claude Code / Codex / Cowork never
-// opened the design.
+// "Open in Design" link for a connected external agent never opened the design.
 export default createCoreRoutesPlugin({
   resolveOpenPath: ({ view, params }) => {
     if (params.designId) return `/design/${params.designId}`;

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/server/routes/api/design-handoff/[id].zip.get.ts

@@ -0,0 +1,86 @@
+import { verifyShortLivedToken } from "@agent-native/core/server";
+import { eq } from "drizzle-orm";
+import {
+  defineEventHandler,
+  getQuery,
+  getRouterParam,
+  setResponseHeader,
+  setResponseStatus,
+  type H3Event,
+} from "h3";
+
+import { getDb, schema } from "../../../db/index.js";
+import {
+  buildDesignHandoffPayload,
+  buildDesignHandoffZip,
+  buildHandoffZipFilename,
+} from "../../../lib/coding-handoff.js";
+import { buildDesignSnapshot } from "../../../lib/design-snapshot.js";
+
+function notFound(event: H3Event) {
+  setResponseStatus(event, 404);
+  return { error: "Not found" };
+}
+
+function normalizeRouteId(value: string | undefined): string | undefined {
+  if (!value) return value;
+  return value.endsWith(".zip") ? value.slice(0, -4) : value;
+}
+
+export default defineEventHandler(async (event: H3Event) => {
+  const id = normalizeRouteId(getRouterParam(event, "id"));
+  if (!id) {
+    setResponseStatus(event, 400);
+    return { error: "Design ID is required" };
+  }
+
+  const q = getQuery(event) as {
+    token?: string;
+    t?: string;
+  };
+  const token =
+    typeof q.token === "string" ? q.token : typeof q.t === "string" ? q.t : "";
+
+  const verified = verifyShortLivedToken(token, id);
+  if (!verified.ok) {
+    setResponseStatus(event, 403);
+    return { error: "Invalid or expired handoff link" };
+  }
+
+  const db = getDb();
+  // guard:allow-unscoped — this unauthenticated endpoint is gated by a signed, expiring handoff token bound to the design id.
+  const [design] = await db
+    .select()
+    .from(schema.designs)
+    .where(eq(schema.designs.id, id))
+    .limit(1);
+  if (!design) return notFound(event);
+
+  const snapshot = await buildDesignSnapshot(id, design.data);
+  if (snapshot.files.length === 0) return notFound(event);
+
+  const payload = buildDesignHandoffPayload({
+    design,
+    files: snapshot.files.map((f) => ({
+      filename: f.filename,
+      fileType: f.fileType,
+      content: f.content,
+    })),
+    resolvedCssVars: snapshot.resolvedCssVars,
+  });
+  const zip = await buildDesignHandoffZip(payload);
+  const filename = buildHandoffZipFilename(design.title);
+
+  setResponseHeader(event, "Cache-Control", "no-store");
+  setResponseHeader(event, "Referrer-Policy", "no-referrer");
+  setResponseHeader(event, "X-Content-Type-Options", "nosniff");
+  setResponseHeader(event, "Access-Control-Allow-Origin", "*");
+  setResponseHeader(event, "Content-Type", "application/zip");
+  setResponseHeader(
+    event,
+    "Content-Disposition",
+    `attachment; filename="${filename}"; filename*=UTF-8''${encodeURIComponent(filename)}`,
+  );
+
+  return zip;
+});