@agent-native/core 0.80.10 → 0.81.0

package/corpus/templates/design/actions/insert-design-native-asset.ts

@@ -0,0 +1,268 @@
+import { defineAction } from "@agent-native/core";
+import { readAppStateForCurrentTab } from "@agent-native/core/application-state";
+import {
+  applyText,
+  getText,
+  hasCollabState,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { accessFilter, assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import {
+  DESIGN_NATIVE_ASSET_KINDS,
+  type DesignNativeAssetKind,
+} from "./list-design-native-assets.js";
+
+const schemaInput = z.object({
+  kind: z
+    .enum(DESIGN_NATIVE_ASSET_KINDS)
+    .describe("Design-native asset kind from list-design-native-assets."),
+  designId: z
+    .string()
+    .optional()
+    .describe("Design id. Defaults to the current editor navigation state."),
+  fileId: z
+    .string()
+    .optional()
+    .describe("Design file id. Defaults to the active editor file."),
+  ownerId: z
+    .string()
+    .optional()
+    .describe("Design editor selection owner token from current screen state."),
+});
+
+function stringFromState(state: unknown, key: string): string | undefined {
+  if (!state || typeof state !== "object") return undefined;
+  const value = (state as Record<string, unknown>)[key];
+  return typeof value === "string" && value ? value : undefined;
+}
+
+function insertBeforeClosingTag(
+  html: string,
+  closingTag: "main" | "body",
+  snippet: string,
+): string | null {
+  const pattern = new RegExp(`</${closingTag}>`, "i");
+  if (!pattern.test(html)) return null;
+  return html.replace(pattern, `${snippet}\n</${closingTag}>`);
+}
+
+function nativeSnippet(kind: DesignNativeAssetKind): string {
+  const attrs = (componentName: string) =>
+    `data-agent-native-native-asset data-agent-native-component="${componentName}" data-agent-native-layer-name="${componentName}"`;
+  switch (kind) {
+    case "section-frame":
+      return `
+    <section ${attrs("Frame")} class="mx-auto my-8 max-w-5xl rounded-2xl border border-slate-200 bg-white/90 p-8 shadow-sm">
+      <div class="text-sm font-medium uppercase text-slate-500">Frame</div>
+      <div class="mt-3 min-h-24 rounded-xl border border-dashed border-slate-300 bg-slate-50"></div>
+    </section>`;
+    case "text-block":
+      return `
+    <section ${attrs("TextBlock")} class="mx-auto my-8 max-w-3xl px-4">
+      <p class="text-sm font-medium uppercase text-slate-500">Eyebrow</p>
+      <h2 class="mt-3 text-3xl font-semibold text-slate-950">Editable headline</h2>
+      <p class="mt-3 text-base leading-7 text-slate-600">Use this text block as a native content primitive, then edit copy, spacing, and typography in Design.</p>
+    </section>`;
+    case "button":
+      return `
+    <section class="mx-auto my-8 max-w-5xl px-4">
+      <button ${attrs("Button")} class="inline-flex h-11 items-center justify-center rounded-lg bg-slate-950 px-5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2">
+        Primary action
+      </button>
+    </section>`;
+    case "card":
+      return `
+    <section class="mx-auto my-8 max-w-5xl px-4">
+      <article ${attrs("Card")} class="max-w-sm rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-sm font-semibold text-slate-700">01</div>
+        <h3 class="mt-4 text-lg font-semibold text-slate-950">Native card</h3>
+        <p class="mt-2 text-sm leading-6 text-slate-600">A reusable content block with editable text, spacing, border, and action styling.</p>
+        <button class="mt-4 text-sm font-medium text-slate-950">Learn more</button>
+      </article>
+    </section>`;
+    case "input":
+      return `
+    <section class="mx-auto my-8 max-w-md px-4">
+      <label ${attrs("Input")} class="block">
+        <span class="text-sm font-medium text-slate-700">Email</span>
+        <input class="mt-2 h-11 w-full rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-950 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-slate-500 focus:ring-2 focus:ring-slate-200" placeholder="you@example.com" />
+        <span class="mt-2 block text-xs text-slate-500">Helper text can explain the field.</span>
+      </label>
+    </section>`;
+    case "nav-bar":
+      return `
+    <nav ${attrs("NavBar")} class="mx-auto my-8 flex max-w-5xl items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
+      <div class="text-sm font-semibold text-slate-950">Product</div>
+      <div class="hidden items-center gap-5 text-sm text-slate-600 sm:flex">
+        <a href="#" class="hover:text-slate-950">Overview</a>
+        <a href="#" class="hover:text-slate-950">Pricing</a>
+        <a href="#" class="hover:text-slate-950">Docs</a>
+      </div>
+      <button class="rounded-lg bg-slate-950 px-3 py-2 text-sm font-medium text-white">Start</button>
+    </nav>`;
+    case "hero":
+      return `
+    <section ${attrs("Hero")} class="mx-auto my-8 grid max-w-5xl gap-8 rounded-3xl bg-slate-950 px-6 py-10 text-white sm:grid-cols-[1.15fr_0.85fr] sm:px-8">
+      <div>
+        <p class="text-sm font-medium uppercase text-slate-300">Native hero</p>
+        <h1 class="mt-4 text-4xl font-semibold">A clear product promise</h1>
+        <p class="mt-4 max-w-xl text-base leading-7 text-slate-300">Drop in a complete editable section and reshape it with Design tools.</p>
+        <button class="mt-6 rounded-lg bg-white px-4 py-2 text-sm font-medium text-slate-950">Get started</button>
+      </div>
+      <div class="min-h-48 rounded-2xl bg-white/10 ring-1 ring-white/15"></div>
+    </section>`;
+    case "feature-grid":
+      return `
+    <section ${attrs("FeatureGrid")} class="mx-auto my-8 max-w-5xl px-4">
+      <div class="grid gap-3 sm:grid-cols-3">
+        ${["Fast", "Flexible", "Observable"]
+          .map(
+            (
+              title,
+            ) => `<article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+          <h3 class="text-base font-semibold text-slate-950">${title}</h3>
+          <p class="mt-2 text-sm leading-6 text-slate-600">Edit this native component copy and styling directly.</p>
+        </article>`,
+          )
+          .join("")}
+      </div>
+    </section>`;
+  }
+}
+
+function appendNativeAssetMarkup(
+  html: string,
+  kind: DesignNativeAssetKind,
+): string {
+  const snippet = nativeSnippet(kind);
+  return (
+    insertBeforeClosingTag(html, "main", snippet) ??
+    insertBeforeClosingTag(html, "body", snippet) ??
+    `${html}\n${snippet}`
+  );
+}
+
+async function resolveTarget(args: z.infer<typeof schemaInput>) {
+  const [navigation, selection] = await Promise.all([
+    readAppStateForCurrentTab("navigation").catch(() => null),
+    readAppStateForCurrentTab("design-selection").catch(() => null),
+  ]);
+  const navigationDesignId = stringFromState(navigation, "designId");
+  const selectionDesignId = stringFromState(selection, "designId");
+  const selectionOwnerId = stringFromState(selection, "ownerId");
+  const selectionMatchesOwner =
+    Boolean(args.ownerId) && selectionOwnerId === args.ownerId;
+  const designId =
+    args.designId ??
+    (selectionMatchesOwner ? selectionDesignId : undefined) ??
+    navigationDesignId;
+  const canUseSelection =
+    selectionMatchesOwner &&
+    Boolean(designId) &&
+    selectionDesignId === designId;
+  const navigationActiveFileId =
+    designId && navigationDesignId === designId
+      ? stringFromState(navigation, "activeFileId")
+      : undefined;
+  return {
+    designId,
+    fileId:
+      args.fileId ??
+      (canUseSelection
+        ? stringFromState(selection, "activeFileId")
+        : undefined) ??
+      navigationActiveFileId,
+  };
+}
+
+function isHtmlFile(file: {
+  fileType: string | null;
+  filename: string | null;
+}): boolean {
+  return file.fileType === "html" || file.filename?.endsWith(".html") === true;
+}
+
+export default defineAction({
+  description:
+    "Insert a Design-native reusable primitive/component into the active design file. Use list-design-native-assets first to choose a kind. Inserts editable HTML stamped with Design component and layer metadata.",
+  schema: schemaInput,
+  publicAgent: { expose: true, readOnly: false, requiresAuth: true },
+  run: async (args) => {
+    const target = await resolveTarget(args);
+    if (!target.designId) {
+      throw new Error(
+        "No active design found. Open a design or pass designId.",
+      );
+    }
+
+    const db = getDb();
+    const files = await db
+      .select({
+        id: schema.designFiles.id,
+        designId: schema.designFiles.designId,
+        filename: schema.designFiles.filename,
+        fileType: schema.designFiles.fileType,
+        content: schema.designFiles.content,
+      })
+      .from(schema.designFiles)
+      .innerJoin(
+        schema.designs,
+        eq(schema.designFiles.designId, schema.designs.id),
+      )
+      .where(
+        and(
+          eq(schema.designFiles.designId, target.designId),
+          accessFilter(schema.designs, schema.designShares),
+        ),
+      );
+    const requestedFile = files.find(
+      (candidate) => candidate.id === target.fileId,
+    );
+    const file =
+      requestedFile && isHtmlFile(requestedFile)
+        ? requestedFile
+        : (files.find(isHtmlFile) ?? null);
+    if (!file) throw new Error("No editable HTML design file found.");
+    await assertAccess("design", file.designId, "editor");
+
+    let base = file.content ?? "";
+    try {
+      if (await hasCollabState(file.id)) {
+        const live = await getText(file.id, "content");
+        if (typeof live === "string") base = live;
+      }
+    } catch {
+      // Collab read is best-effort; fall back to stored content.
+    }
+
+    const content = appendNativeAssetMarkup(base, args.kind);
+    const now = new Date().toISOString();
+    await db
+      .update(schema.designFiles)
+      .set({ content, updatedAt: now })
+      .where(eq(schema.designFiles.id, file.id));
+    await db
+      .update(schema.designs)
+      .set({ updatedAt: now })
+      .where(eq(schema.designs.id, file.designId));
+
+    if (await hasCollabState(file.id)) {
+      await applyText(file.id, content, "content", "agent");
+    } else {
+      await seedFromText(file.id, content);
+    }
+
+    return {
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+      inserted: true,
+      source: "design-native",
+      kind: args.kind,
+    };
+  },
+});

package/corpus/templates/design/actions/insert-figma-library-asset.ts

@@ -0,0 +1,233 @@
+import { defineAction } from "@agent-native/core";
+import { readAppStateForCurrentTab } from "@agent-native/core/application-state";
+import {
+  applyText,
+  getText,
+  hasCollabState,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { accessFilter, assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+
+const schemaInput = z.object({
+  renderUrl: z
+    .string()
+    .url()
+    .refine((value) => {
+      try {
+        const protocol = new URL(value).protocol;
+        return protocol === "http:" || protocol === "https:";
+      } catch {
+        return false;
+      }
+    }, "Render URL must use http or https.")
+    .describe(
+      "Figma-rendered SVG/PNG URL returned by list-figma-library-assets.",
+    ),
+  fileKey: z.string().describe("Figma file key."),
+  nodeId: z.string().optional().describe("Figma node id for this asset."),
+  componentKey: z.string().optional().describe("Figma component key."),
+  kind: z.enum(["component", "component_set"]).default("component"),
+  name: z.string().optional().describe("Human-readable Figma asset name."),
+  description: z.string().optional().describe("Figma asset description."),
+  sourceUrl: z
+    .string()
+    .url()
+    .optional()
+    .describe("URL back to the Figma node."),
+  designId: z
+    .string()
+    .optional()
+    .describe("Design id. Defaults to the current editor navigation state."),
+  fileId: z
+    .string()
+    .optional()
+    .describe("Design file id. Defaults to the active editor file."),
+  ownerId: z
+    .string()
+    .optional()
+    .describe("Design editor selection owner token from current screen state."),
+});
+
+function stringFromState(state: unknown, key: string): string | undefined {
+  if (!state || typeof state !== "object") return undefined;
+  const value = (state as Record<string, unknown>)[key];
+  return typeof value === "string" && value ? value : undefined;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function insertBeforeClosingTag(
+  html: string,
+  closingTag: "main" | "body",
+  snippet: string,
+): string | null {
+  const pattern = new RegExp(`</${closingTag}>`, "i");
+  if (!pattern.test(html)) return null;
+  return html.replace(pattern, `${snippet}\n</${closingTag}>`);
+}
+
+function optionalDataAttribute(name: string, value: string | undefined) {
+  return value ? ` ${name}="${escapeHtml(value)}"` : "";
+}
+
+function appendFigmaAssetMarkup(
+  html: string,
+  args: z.infer<typeof schemaInput>,
+): string {
+  const label = args.name?.trim() || "Figma library asset";
+  const description = args.description?.trim();
+  const sourceLink = args.sourceUrl
+    ? `<a href="${escapeHtml(args.sourceUrl)}" target="_blank" rel="noreferrer" class="text-slate-500 underline decoration-slate-300 underline-offset-2 hover:text-slate-800">Open in Figma</a>`
+    : "";
+  const snippet = `
+    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset-source="figma" data-agent-native-figma-asset data-figma-file-key="${escapeHtml(args.fileKey)}"${optionalDataAttribute("data-figma-node-id", args.nodeId)}${optionalDataAttribute("data-figma-component-key", args.componentKey)} data-figma-asset-kind="${escapeHtml(args.kind)}">
+      <figure class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <img src="${escapeHtml(args.renderUrl)}" alt="${escapeHtml(label)}" class="w-full rounded-t-2xl object-contain" />
+        <figcaption class="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3 text-sm text-slate-600">
+          <span class="font-medium text-slate-800">${escapeHtml(label)}</span>
+          ${description ? `<span>${escapeHtml(description)}</span>` : ""}
+          ${sourceLink}
+        </figcaption>
+      </figure>
+    </section>`;
+
+  return (
+    insertBeforeClosingTag(html, "main", snippet) ??
+    insertBeforeClosingTag(html, "body", snippet) ??
+    `${html}\n${snippet}`
+  );
+}
+
+async function resolveTarget(args: z.infer<typeof schemaInput>) {
+  const [navigation, selection] = await Promise.all([
+    readAppStateForCurrentTab("navigation").catch(() => null),
+    readAppStateForCurrentTab("design-selection").catch(() => null),
+  ]);
+  const navigationDesignId = stringFromState(navigation, "designId");
+  const selectionDesignId = stringFromState(selection, "designId");
+  const selectionOwnerId = stringFromState(selection, "ownerId");
+  const selectionMatchesOwner =
+    Boolean(args.ownerId) && selectionOwnerId === args.ownerId;
+  const designId =
+    args.designId ??
+    (selectionMatchesOwner ? selectionDesignId : undefined) ??
+    navigationDesignId;
+  const canUseSelection =
+    selectionMatchesOwner &&
+    Boolean(designId) &&
+    selectionDesignId === designId;
+  const navigationActiveFileId =
+    designId && navigationDesignId === designId
+      ? stringFromState(navigation, "activeFileId")
+      : undefined;
+  return {
+    designId,
+    fileId:
+      args.fileId ??
+      (canUseSelection
+        ? stringFromState(selection, "activeFileId")
+        : undefined) ??
+      navigationActiveFileId,
+  };
+}
+
+function isHtmlFile(file: {
+  fileType: string | null;
+  filename: string | null;
+}): boolean {
+  return file.fileType === "html" || file.filename?.endsWith(".html") === true;
+}
+
+export default defineAction({
+  description:
+    "Insert a rendered Figma component or component set into a Design file, preserving Figma file/node/component provenance. Use list-figma-library-assets first to get renderUrl and metadata.",
+  schema: schemaInput,
+  publicAgent: { expose: true, readOnly: false, requiresAuth: true },
+  run: async (args) => {
+    const target = await resolveTarget(args);
+    if (!target.designId) {
+      throw new Error(
+        "No active design found. Open a design or pass designId.",
+      );
+    }
+
+    const db = getDb();
+    const files = await db
+      .select({
+        id: schema.designFiles.id,
+        designId: schema.designFiles.designId,
+        filename: schema.designFiles.filename,
+        fileType: schema.designFiles.fileType,
+        content: schema.designFiles.content,
+      })
+      .from(schema.designFiles)
+      .innerJoin(
+        schema.designs,
+        eq(schema.designFiles.designId, schema.designs.id),
+      )
+      .where(
+        and(
+          eq(schema.designFiles.designId, target.designId),
+          accessFilter(schema.designs, schema.designShares),
+        ),
+      );
+    const requestedFile = files.find(
+      (candidate) => candidate.id === target.fileId,
+    );
+    const file =
+      requestedFile && isHtmlFile(requestedFile)
+        ? requestedFile
+        : (files.find(isHtmlFile) ?? null);
+    if (!file) throw new Error("No editable HTML design file found.");
+    await assertAccess("design", file.designId, "editor");
+
+    let base = file.content ?? "";
+    try {
+      if (await hasCollabState(file.id)) {
+        const live = await getText(file.id, "content");
+        if (typeof live === "string") base = live;
+      }
+    } catch {
+      // Collab read is best-effort; fall back to stored content.
+    }
+
+    const content = appendFigmaAssetMarkup(base, args);
+    const now = new Date().toISOString();
+    await db
+      .update(schema.designFiles)
+      .set({ content, updatedAt: now })
+      .where(eq(schema.designFiles.id, file.id));
+    await db
+      .update(schema.designs)
+      .set({ updatedAt: now })
+      .where(eq(schema.designs.id, file.designId));
+
+    if (await hasCollabState(file.id)) {
+      await applyText(file.id, content, "content", "agent");
+    } else {
+      await seedFromText(file.id, content);
+    }
+
+    return {
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+      inserted: true,
+      source: "figma",
+      fileKey: args.fileKey,
+      nodeId: args.nodeId ?? null,
+      componentKey: args.componentKey ?? null,
+      renderUrl: args.renderUrl,
+    };
+  },
+});

package/corpus/templates/design/actions/list-design-extensions.ts

@@ -68,15 +68,23 @@ const FIRST_PARTY_EXTENSIONS: FirstPartyDesignExtension[] = [
     id: "design.asset-library",
     name: "Asset Library",
     description:
-      "Browse and insert generated or uploaded assets into the active design screen. " +
+      "Browse and insert Design-native primitives, generated or uploaded media, and rendered Figma library components into the active design screen. " +
       "Selection-aware: inserts near the selected element when one is active.",
     icon: "Photo",
     availability: "available",
-    availabilityNote: "Fully available — call insert-asset with an asset URL.",
+    availabilityNote:
+      "Fully available — call list-design-native-assets then insert-design-native-asset for editable Design primitives, insert-asset for media, or list-figma-library-assets then insert-figma-library-asset for Figma components.",
     capabilities: [
       {
-        id: "browse",
-        label: "Browse asset library",
+        id: "native",
+        label: "Browse Design-native assets",
+        status: "available",
+        reason:
+          "Uses list-design-native-assets and insert-design-native-asset for editable HTML primitives/components.",
+      },
+      {
+        id: "media",
+        label: "Browse generated and uploaded media",
         status: "available",
       },
       {
@@ -93,8 +101,22 @@ const FIRST_PARTY_EXTENSIONS: FirstPartyDesignExtension[] = [
         reason:
           "Delegate to the Assets app via call-agent or the Assets MCP tool.",
       },
+      {
+        id: "figma",
+        label: "Browse Figma library assets",
+        status: "available",
+        reason:
+          "Uses FIGMA_ACCESS_TOKEN to list Figma file components/component sets and insert rendered nodes with provenance.",
+      },
+    ],
+    actions: [
+      "list-design-native-assets",
+      "insert-design-native-asset",
+      "insert-asset",
+      "list-figma-library-assets",
+      "insert-figma-library-asset",
+      "get-design-snapshot",
     ],
-    actions: ["insert-asset", "get-design-snapshot"],
     slotId: "design.editor.inspector",
   },
 
@@ -212,12 +234,12 @@ const FIRST_PARTY_EXTENSIONS: FirstPartyDesignExtension[] = [
     description:
       "One-click animation presets (fade-in, slide-up, pulse, bounce, spin) that " +
       "apply to the selected node via the motion timeline.  Preview is live; " +
-      "Write to CSS commits the keyframes atomically.",
+      "track edits persist to managed CSS atomically.",
     icon: "PlayerPlay",
     availability: "available",
     availabilityNote:
-      "Motion preview is available for all source types.  Write to CSS (apply-motion-edit) " +
-      "is atomic and available for inline + localhost.  Source write-back to real CSS " +
+      "Motion preview is available for all source types.  Managed CSS persistence " +
+      "(apply-motion-edit) is atomic and available for inline + localhost. Source write-back to real CSS " +
       "modules remains planned for the fusion tier.",
     capabilities: [
       {
@@ -229,7 +251,7 @@ const FIRST_PARTY_EXTENSIONS: FirstPartyDesignExtension[] = [
       },
       {
         id: "apply",
-        label: "Write keyframes to CSS (apply-motion-edit)",
+        label: "Persist keyframes to managed CSS (apply-motion-edit)",
         status: "available",
         reason:
           "apply-motion-edit is atomic: persists timeline row + compiled CSS + " +
@@ -259,7 +281,7 @@ export default defineAction({
 List the first-party Design Studio extensions with their capability and availability status.
 
 Returns the four built-in extensions:
-  1. Asset Library     — selection-aware asset insertion (available now).
+  1. Asset Library     — native components, media, and Figma imports (available now).
   2. Shader Fills      — GPU shader fill previews (preview-only; apply is gated).
   3. Token Auditor     — token usage reads + edits (available; source write-back planned).
   4. Motion Presets    — one-click animation presets (available; source write-back planned).

package/corpus/templates/design/actions/list-design-native-assets.ts

@@ -0,0 +1,105 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+
+export const DESIGN_NATIVE_ASSET_KINDS = [
+  "section-frame",
+  "text-block",
+  "button",
+  "card",
+  "input",
+  "nav-bar",
+  "hero",
+  "feature-grid",
+] as const;
+
+export type DesignNativeAssetKind = (typeof DESIGN_NATIVE_ASSET_KINDS)[number];
+
+type DesignNativeAsset = {
+  kind: DesignNativeAssetKind;
+  title: string;
+  description: string;
+  category: "primitive" | "component" | "layout";
+  componentName: string;
+};
+
+export const DESIGN_NATIVE_ASSETS: DesignNativeAsset[] = [
+  {
+    kind: "section-frame",
+    title: "Frame",
+    description:
+      "A flexible section container with padding and a subtle border.",
+    category: "primitive",
+    componentName: "Frame",
+  },
+  {
+    kind: "text-block",
+    title: "Text Block",
+    description: "Headline, supporting copy, and compact spacing.",
+    category: "primitive",
+    componentName: "TextBlock",
+  },
+  {
+    kind: "button",
+    title: "Button",
+    description: "Primary call-to-action with accessible focus styling.",
+    category: "component",
+    componentName: "Button",
+  },
+  {
+    kind: "card",
+    title: "Card",
+    description: "Reusable content card with title, body, and action row.",
+    category: "component",
+    componentName: "Card",
+  },
+  {
+    kind: "input",
+    title: "Input",
+    description: "Labeled input field with helper copy.",
+    category: "component",
+    componentName: "Input",
+  },
+  {
+    kind: "nav-bar",
+    title: "Nav Bar",
+    description: "Compact navigation row for app or page headers.",
+    category: "layout",
+    componentName: "NavBar",
+  },
+  {
+    kind: "hero",
+    title: "Hero",
+    description: "Product intro section with headline, copy, and action.",
+    category: "layout",
+    componentName: "Hero",
+  },
+  {
+    kind: "feature-grid",
+    title: "Feature Grid",
+    description: "Three-item feature layout for scanning and comparison.",
+    category: "layout",
+    componentName: "FeatureGrid",
+  },
+];
+
+export default defineAction({
+  description:
+    "List Design-native reusable assets and primitives that can be inserted into the active design screen. These are not external media; they are editable HTML components stamped with Design component/layer metadata.",
+  schema: z.object({
+    category: z.enum(["primitive", "component", "layout"]).optional(),
+  }),
+  http: { method: "GET" },
+  readOnly: true,
+  publicAgent: { expose: true, readOnly: true, requiresAuth: true },
+  run: ({ category }) => {
+    const assets = category
+      ? DESIGN_NATIVE_ASSETS.filter((asset) => asset.category === category)
+      : DESIGN_NATIVE_ASSETS;
+    return {
+      source: "design-native",
+      assets,
+      guidance:
+        "Use insert-design-native-asset to add one of these assets to the active Design screen. They are editable Design-native HTML components, unlike external media or rendered Figma nodes.",
+    };
+  },
+});