@agent-native/core 0.80.9 → 0.80.11

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-design-token-edits-now-stay-visible-in-previews-and-token-li.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Design token edits now stay visible in previews and token lists after saving new CSS variables.

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/global-setup.ts

@@ -1,6 +1,7 @@
 import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 
+import { createClient } from "@libsql/client";
 import { chromium, type FullConfig } from "@playwright/test";
 
 /**
@@ -19,6 +20,12 @@ const AUTH_DIR = path.join(import.meta.dirname, ".auth");
 const STATE_PATH = path.join(AUTH_DIR, "state.json");
 const SEED_PATH = path.join(AUTH_DIR, "seed.json");
 const BROWSER_CHANNEL = process.env.E2E_BROWSER_CHANNEL;
+const E2E_DATABASE_URL = `file:${path.join(
+  import.meta.dirname,
+  "..",
+  "data",
+  "e2e.db",
+)}`;
 
 /**
  * Fixture HTML with distinct, text-identifiable elements. Plain inline styles
@@ -31,6 +38,12 @@ export const FIXTURE_HTML = `<!doctype html>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>E2E Fixture</title>
+    <style>
+      :root {
+        --e2e-accent-color: #6366f1;
+        --e2e-radius: 14px;
+      }
+    </style>
   </head>
   <body style="margin:0;font-family:system-ui,sans-serif;background:#0f1115;color:#f4f4f5">
     <main style="max-width:720px;margin:0 auto;padding:48px 32px;display:flex;flex-direction:column;gap:24px">
@@ -38,8 +51,26 @@ export const FIXTURE_HTML = `<!doctype html>
       <p style="font-size:18px;line-height:1.6;margin:0;color:#a1a1aa">First fixture paragraph for selection tests.</p>
       <p style="font-size:18px;line-height:1.6;margin:0;color:#a1a1aa">Second fixture paragraph for selection tests.</p>
       <div style="display:flex;flex-direction:row;gap:16px">
-        <button style="padding:14px 28px;border-radius:10px;border:0;background:#6366f1;color:#fff;font-size:16px">Alpha Button</button>
-        <button style="padding:14px 28px;border-radius:10px;border:0;background:#22c55e;color:#06240f;font-size:16px">Beta Button</button>
+        <button data-agent-native-node-id="e2e-alpha-button" data-agent-native-layer-name="Alpha Button" style="padding:14px 28px;border-radius:10px;border:0;background:#6366f1;color:#fff;font-size:16px">Alpha Button</button>
+        <button data-agent-native-node-id="e2e-beta-button" data-agent-native-layer-name="Beta Button" style="padding:14px 28px;border-radius:10px;border:0;background:#22c55e;color:#06240f;font-size:16px">Beta Button</button>
+      </div>
+      <button
+        data-agent-native-node-id="e2e-component-button"
+        data-agent-native-layer-name="E2E Component Button"
+        data-agent-native-component="E2EButton"
+        data-agent-native-prop-variant="primary"
+        data-agent-native-prop-size="md"
+        style="align-self:flex-start;padding:14px 28px;border-radius:var(--e2e-radius);border:0;background:var(--e2e-accent-color);color:#fff;font-size:16px"
+      >Variant CTA</button>
+      <div
+        data-agent-native-node-id="e2e-token-sample"
+        data-agent-native-layer-name="E2E Token Sample"
+        style="padding:18px 20px;border-radius:var(--e2e-radius);background:var(--e2e-accent-color);color:#fff;font-weight:700"
+      >Token swatch sample</div>
+      <div style="display:flex;align-items:center;gap:12px">
+        <img data-agent-native-node-id="e2e-audit-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" style="width:32px;height:32px;border-radius:8px;background:#27272a" />
+        <input data-agent-native-node-id="e2e-audit-input" placeholder="Email" style="height:32px;border-radius:8px;border:1px solid #3f3f46;background:#18181b;color:#fff;padding:0 10px" />
+        <button data-agent-native-node-id="e2e-audit-focus-button" class="outline-none" style="height:32px;border-radius:8px;border:1px solid #3f3f46;background:#27272a;color:#fff;padding:0 10px">Focus me</button>
       </div>
       <div style="padding:8px;border:1px solid #27272a;border-radius:12px">
         <div style="padding:8px;border:1px solid #3f3f46;border-radius:10px">
@@ -76,6 +107,63 @@ async function postAction(
   return res.json();
 }
 
+function componentIndexId(designId: string, name: string): string {
+  return `ci_${designId}_${name.toLowerCase().replace(/[^a-z0-9]/g, "_")}`;
+}
+
+export async function seedComponentVariantMetadata(
+  designId: string,
+): Promise<void> {
+  const client = createClient({ url: E2E_DATABASE_URL });
+  const name = "E2EButton";
+  const now = new Date().toISOString();
+  const variants = JSON.stringify({
+    variant: ["primary", "secondary", "ghost"],
+    size: ["sm", "md", "lg"],
+  });
+  const props = JSON.stringify([
+    { name: "variant", type: "primary | secondary | ghost" },
+    { name: "size", type: "sm | md | lg" },
+  ]);
+
+  try {
+    const result = await client.execute({
+      sql: `
+        UPDATE component_index
+        SET variants = ?, props = ?, file_path = ?, export_name = ?, updated_at = ?
+        WHERE design_id = ? AND name = ?
+      `,
+      args: [variants, props, "index.html", name, now, designId, name],
+    });
+
+    if (result.rowsAffected > 0) return;
+
+    await client.execute({
+      sql: `
+        INSERT INTO component_index (
+          id, design_id, name, file_path, export_name, props, variants,
+          runtime_selectors, owner_email, created_at, updated_at
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+      `,
+      args: [
+        componentIndexId(designId, name),
+        designId,
+        name,
+        "index.html",
+        name,
+        props,
+        variants,
+        JSON.stringify(['[data-agent-native-node-id="e2e-component-button"]']),
+        E2E_EMAIL,
+        now,
+        now,
+      ],
+    });
+  } finally {
+    client.close();
+  }
+}
+
 export default async function globalSetup(config: FullConfig) {
   const baseURL =
     (config.projects[0]?.use?.baseURL as string | undefined) ??
@@ -148,6 +236,10 @@ export default async function globalSetup(config: FullConfig) {
       content: FIXTURE_HTML,
       fileType: "html",
     });
+    await postAction(context.request, baseURL, "index-components", {
+      designId,
+    });
+    await seedComponentVariantMetadata(designId);
 
     await writeFile(SEED_PATH, JSON.stringify({ designId }, null, 2));
     // eslint-disable-next-line no-console

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" },
 );