@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/design/changelog/2026-10-22-shader-fills-keep-rendering-when-other-screen-content-cannot.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-10-22
+---
+
+Shader fills keep rendering when other screen content cannot be captured

package/corpus/templates/design/package.json

@@ -31,7 +31,6 @@
     "@fontsource-variable/inter": "^5.2.8",
     "@jridgewell/trace-mapping": "0.3.31",
     "@noble/hashes": "^2.3.0",
-    "@paper-design/shaders-react": "0.0.76",
     "@tabler/icons-react": "catalog:",
     "@tailwindcss/browser": "^4.3.3",
     "@tanstack/react-query": "^5.99.2",

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

@@ -171,7 +171,7 @@ const config = defineConfig({
   webServer: process.env.E2E_BASE_URL
     ? undefined
     : {
-        command: `APP_NAME=design AGENT_NATIVE_DESIGN_QA_LOCAL_UPLOADS=${USE_SIDEBAR_LOOPBACK ? "0" : "1"} ${USE_SIDEBAR_LOOPBACK ? `AGENT_ENGINE=ai-sdk:openai AGENT_MODEL=agentkit-loopback OPENAI_API_KEY=e2e-loopback-placeholder OPENAI_BASE_URL=http://127.0.0.1:${LOOPBACK_PORT}/v1 E2E_LOOPBACK_PORT=${LOOPBACK_PORT} E2E_ATTACHMENT_STORAGE_ENABLED=1 E2E_ATTACHMENT_STORAGE_URL=${JSON.stringify(ATTACHMENT_STORAGE_URL)} E2E_ATTACHMENT_STORAGE_HTTPS_PORT=${ATTACHMENT_STORAGE_HTTPS_PORT} E2E_ATTACHMENT_STORAGE_CONTROL_PORT=${ATTACHMENT_STORAGE_CONTROL_PORT} E2E_ATTACHMENT_STORAGE_CERT=${JSON.stringify(ATTACHMENT_STORAGE_CERT)} E2E_ATTACHMENT_STORAGE_KEY=${JSON.stringify(ATTACHMENT_STORAGE_KEY)} NODE_EXTRA_CA_CERTS=${JSON.stringify(ATTACHMENT_STORAGE_CERT)} ` : ""}${SECONDARY_PANELS_ENV}DESIGN_DATABASE_URL=${JSON.stringify(E2E_DATABASE_URL)} DATABASE_URL=${JSON.stringify(E2E_DATABASE_URL)} PORT=${PORT} corepack pnpm exec agent-native dev --inspect=${INSPECT_PORT}`,
+        command: `corepack pnpm codegen:bridge && APP_NAME=design AGENT_NATIVE_DESIGN_QA_LOCAL_UPLOADS=${USE_SIDEBAR_LOOPBACK ? "0" : "1"} ${USE_SIDEBAR_LOOPBACK ? `AGENT_ENGINE=ai-sdk:openai AGENT_MODEL=agentkit-loopback OPENAI_API_KEY=e2e-loopback-placeholder OPENAI_BASE_URL=http://127.0.0.1:${LOOPBACK_PORT}/v1 E2E_LOOPBACK_PORT=${LOOPBACK_PORT} E2E_ATTACHMENT_STORAGE_ENABLED=1 E2E_ATTACHMENT_STORAGE_URL=${JSON.stringify(ATTACHMENT_STORAGE_URL)} E2E_ATTACHMENT_STORAGE_HTTPS_PORT=${ATTACHMENT_STORAGE_HTTPS_PORT} E2E_ATTACHMENT_STORAGE_CONTROL_PORT=${ATTACHMENT_STORAGE_CONTROL_PORT} E2E_ATTACHMENT_STORAGE_CERT=${JSON.stringify(ATTACHMENT_STORAGE_CERT)} E2E_ATTACHMENT_STORAGE_KEY=${JSON.stringify(ATTACHMENT_STORAGE_KEY)} NODE_EXTRA_CA_CERTS=${JSON.stringify(ATTACHMENT_STORAGE_CERT)} ` : ""}${SECONDARY_PANELS_ENV}DESIGN_DATABASE_URL=${JSON.stringify(E2E_DATABASE_URL)} DATABASE_URL=${JSON.stringify(E2E_DATABASE_URL)} PORT=${PORT} corepack pnpm exec agent-native dev --inspect=${INSPECT_PORT}`,
         url: BASE_URL,
         reuseExistingServer: false,
         timeout: 300_000,

package/corpus/templates/design/scripts/design-export-validation/export-baseline.json

@@ -29,6 +29,18 @@
     "maxApproximated": 0,
     "sourceHash": "ed09aaa70a136c0b2c479da951e9d58777e9f626b791dba45f74f9c83356b15c"
   },
+  "preset-analytics-dashboard": {
+    "maxDiffPercent": 1.229,
+    "maxOmitted": 0,
+    "maxApproximated": 0,
+    "sourceHash": "4906ac5a06738a6158fbf367b52bf690d1e339bb09367f916a78e1bbabc1ffbe"
+  },
+  "preset-design-studio": {
+    "maxDiffPercent": 6.815,
+    "maxOmitted": 0,
+    "maxApproximated": 0,
+    "sourceHash": "8b9b89e2a42d5e6fead4d642afe9c6dd60c6d50a7d367c893689bedea8a8b27b"
+  },
   "preset-display-ad": {
     "maxDiffPercent": 9.364,
     "maxOmitted": 0,
@@ -83,6 +95,12 @@
     "maxApproximated": 0,
     "sourceHash": "69ffb5a9b551bf1a21177334be2c799a97cdd803a3fc8ce97383ab4eb7058601"
   },
+  "preset-messaging-app": {
+    "maxDiffPercent": 1.049,
+    "maxOmitted": 0,
+    "maxApproximated": 0,
+    "sourceHash": "bbd041c27252ed44bb3b0c5034c7ac65bac77b658367900410f672b137b6c36e"
+  },
   "preset-one-pager": {
     "maxDiffPercent": 0.481,
     "maxOmitted": 0,
@@ -95,6 +113,12 @@
     "maxApproximated": 0,
     "sourceHash": "08f864b21b806752f7052096229593809d49e73d63e3ab8b7e4e0ebc50346cc0"
   },
+  "preset-project-tasks": {
+    "maxDiffPercent": 13.965,
+    "maxOmitted": 0,
+    "maxApproximated": 0,
+    "sourceHash": "719e35f7cf11e46e1e16b8aa1c71aac3df32ebffe9c5e1c2f3b07e1fca1866c4"
+  },
   "preset-social-brutalist": {
     "maxDiffPercent": 2.866,
     "maxOmitted": 0,

package/corpus/templates/design/scripts/runtime-budget-zoom.ts

@@ -29,25 +29,6 @@ function isUsableZoomSnapshot(
   );
 }
 
-export function expectedCanvasScaleAtZoomPercent(
-  currentScale: number | null,
-  currentZoomPercent: number,
-  targetZoomPercent: number,
-): number | null {
-  if (
-    currentScale === null ||
-    !Number.isFinite(currentScale) ||
-    currentScale <= 0 ||
-    !Number.isFinite(currentZoomPercent) ||
-    currentZoomPercent <= 0 ||
-    !Number.isFinite(targetZoomPercent) ||
-    targetZoomPercent <= 0
-  ) {
-    return null;
-  }
-  return (currentScale * targetZoomPercent) / currentZoomPercent;
-}
-
 async function beforeDeadline<T>(
   run: () => Promise<T>,
   timeoutMs: number,
@@ -98,8 +79,12 @@ export async function readStableZoomUntilAvailable(
   wait: (milliseconds: number) => Promise<unknown>,
   deadline: number,
   cleanup: () => Promise<unknown>,
-  now = Date.now,
+  options: {
+    matches?: (snapshot: StableZoomSnapshot) => boolean;
+    now?: () => number;
+  } = {},
 ): Promise<StableZoomSnapshot | null> {
+  const now = options.now ?? Date.now;
   let previous: StableZoomSnapshot | null = null;
   let stableReads = 0;
   while (now() < deadline) {
@@ -110,7 +95,10 @@ export async function readStableZoomUntilAvailable(
     );
     if (result.timedOut) return null;
     const snapshot = result.value;
-    if (!isUsableZoomSnapshot(snapshot)) {
+    if (
+      !isUsableZoomSnapshot(snapshot) ||
+      (options.matches && !options.matches(snapshot))
+    ) {
       previous = null;
       stableReads = 0;
     } else if (

package/corpus/templates/design/scripts/runtime-budget.ts

@@ -10,9 +10,7 @@ import { parseArgs } from "node:util";
 import { chromium, errors, type CDPSession, type Page } from "@playwright/test";
 
 import {
-  expectedCanvasScaleAtZoomPercent,
   readStableZoomUntilAvailable,
-  readZoomUntilAvailable,
   type ZoomSnapshot,
 } from "./runtime-budget-zoom.ts";
 
@@ -417,44 +415,32 @@ async function zoomTo(target: number): Promise<boolean> {
     );
     return false;
   }
-  const { routeZoom: currentZoomPercent, canvasScale: currentCanvasScale } =
-    startingSnapshot;
-  // Overview zoom is normalized by board geometry, so compare the world
-  // transform with the exact, stable route zoom instead of the rounded label.
-  const expectedScale = expectedCanvasScaleAtZoomPercent(
-    currentCanvasScale,
-    currentZoomPercent,
-    target,
-  );
-  if (expectedScale === null) return false;
   await readout.click({ timeout: remainingTimeout() });
   const zoomInput = page.getByRole("textbox", { name: "Zoom percentage" });
   await zoomInput.fill(`${target}%`, { timeout: remainingTimeout() });
   await zoomInput.press("Enter", { timeout: remainingTimeout() });
   let lastEndingSnapshot: ZoomSnapshot | null = null;
-  const actual = await readZoomUntilAvailable(
+  // Overview scale depends on active-frame geometry, which may settle after
+  // the route zoom changes. Verify the requested route/readout and let the
+  // transform settle instead of projecting its scale from the previous view.
+  const actual = await readStableZoomUntilAvailable(
     async () => {
       const snapshot = await readZoomSnapshot();
       lastEndingSnapshot = snapshot;
-      if (
-        snapshot.canvasScale === null ||
-        snapshot.routeZoom !== target ||
-        snapshot.labelZoom !== target ||
-        Math.abs(snapshot.canvasScale - expectedScale) >
-          Math.max(0.005, expectedScale * 0.001)
-      ) {
-        return null;
-      }
-      return snapshot.canvasScale;
+      return snapshot;
     },
     (ms) => page.waitForTimeout(ms),
     deadline,
     () => cdp.send("Runtime.terminateExecution"),
+    {
+      matches: (snapshot) =>
+        snapshot.routeZoom === target && snapshot.labelZoom === target,
+    },
   );
   const arrived = actual !== null;
   if (!arrived) {
     console.log(
-      `  zoom ${target}% did not settle after ${Date.now() - startedAt}ms: start=${JSON.stringify(startingSnapshot)} expectedCanvasScale=${expectedScale.toFixed(3)} final=${JSON.stringify(lastEndingSnapshot)}`,
+      `  zoom ${target}% did not settle after ${Date.now() - startedAt}ms: start=${JSON.stringify(startingSnapshot)} final=${JSON.stringify(lastEndingSnapshot)}`,
     );
   }
   return arrived;

package/corpus/templates/design/server/lib/getting-started.ts

@@ -0,0 +1,267 @@
+import { getDbExec } from "@agent-native/core/db";
+import { isFeatureFlagEnabled } from "@agent-native/core/feature-flags";
+import {
+  registerOnboardingStep,
+  type OnboardingResolveContext,
+  type OnboardingStep,
+} from "@agent-native/core/onboarding";
+import { isMissingOrganizationTableError } from "@agent-native/core/org";
+import { accessFilter } from "@agent-native/core/sharing";
+import { and, eq, inArray, notInArray, sql, type AnyColumn } from "drizzle-orm";
+
+import { DESIGN_SYSTEM_WORKFLOWS } from "../../shared/design-flags.js";
+import { PRODUCTION_DESIGN_SYSTEM_TEMPLATES } from "../../shared/design-system-templates.js";
+import { getDb, schema } from "../db/index.js";
+
+export const GETTING_STARTED_CHECKLIST = "getting-started";
+
+type Ctx = OnboardingResolveContext | undefined;
+
+function ownerEmailOf(ctx: Ctx): string | null {
+  return ctx?.userEmail?.trim().toLowerCase() || null;
+}
+
+function ownedBy(column: AnyColumn, email: string) {
+  return sql`lower(trim(${column})) = ${email}`;
+}
+
+/** The user has created at least one design of their own. */
+export async function hasOwnDesign(ctx: Ctx): Promise<boolean> {
+  const email = ownerEmailOf(ctx);
+  if (!email) return false;
+  const rows = await getDb()
+    .select({ id: schema.designs.id })
+    .from(schema.designs)
+    .where(
+      and(
+        accessFilter(schema.designs, schema.designShares),
+        ownedBy(schema.designs.ownerEmail, email),
+      ),
+    )
+    .limit(1);
+  return rows.length > 0;
+}
+
+/**
+ * A design system that is not an untouched copy of a built-in template.
+ * `create-design-system` stores a template copy's `data` as the exact JSON of
+ * the template snapshot, so any edit or custom system counts as the user's
+ * brand while a one-click copy does not.
+ */
+export async function hasOwnBrand(ctx: Ctx): Promise<boolean> {
+  const email = ownerEmailOf(ctx);
+  if (!email) return false;
+  const rows = await getDb()
+    .select({ id: schema.designSystems.id })
+    .from(schema.designSystems)
+    .where(
+      and(
+        accessFilter(schema.designSystems, schema.designSystemShares),
+        ownedBy(schema.designSystems.ownerEmail, email),
+        notInArray(
+          schema.designSystems.data,
+          PRODUCTION_DESIGN_SYSTEM_TEMPLATES.map((template) =>
+            JSON.stringify(template.data),
+          ),
+        ),
+      ),
+    )
+    .limit(1);
+  return rows.length > 0;
+}
+
+/**
+ * `create-design-system` refuses to run while the design-system workflows flag
+ * is off, so the step would be impossible to finish. A user who already has a
+ * brand keeps the step either way.
+ */
+export async function canAddBrand(ctx: Ctx): Promise<boolean> {
+  const enabled = await isFeatureFlagEnabled(DESIGN_SYSTEM_WORKFLOWS, {
+    userEmail: ctx?.userEmail,
+    orgId: ctx?.orgId ?? undefined,
+  });
+  return enabled || (await hasOwnBrand(ctx));
+}
+
+/**
+ * The user connected a running app (a localhost connection) to Design, so
+ * designs can start from its real screens and data. Design has no other
+ * per-user data-source row; a connection that errored does not count.
+ */
+export async function hasConnectedDataSource(ctx: Ctx): Promise<boolean> {
+  const email = ownerEmailOf(ctx);
+  if (!email) return false;
+  const rows = await getDb()
+    .select({ id: schema.designLocalhostConnections.id })
+    .from(schema.designLocalhostConnections)
+    .where(
+      and(
+        ownedBy(schema.designLocalhostConnections.ownerEmail, email),
+        inArray(schema.designLocalhostConnections.status, [
+          "connected",
+          "manual",
+        ]),
+      ),
+    )
+    .limit(1);
+  return rows.length > 0;
+}
+
+/**
+ * Something the user shared on purpose. New designs in an organization start
+ * with `org` visibility, so only an explicit grant to someone else or a public
+ * link counts.
+ */
+export async function hasSharedDesign(ctx: Ctx): Promise<boolean> {
+  const email = ownerEmailOf(ctx);
+  if (!email) return false;
+  const db = getDb();
+  const ownDesign = and(
+    accessFilter(schema.designs, schema.designShares),
+    ownedBy(schema.designs.ownerEmail, email),
+  );
+  const [grants, publicDesigns] = await Promise.all([
+    db
+      .select({ id: schema.designShares.id })
+      .from(schema.designShares)
+      .innerJoin(
+        schema.designs,
+        eq(schema.designs.id, schema.designShares.resourceId),
+      )
+      .where(
+        and(
+          ownDesign,
+          sql`not (${schema.designShares.principalType} = 'user' and lower(trim(${schema.designShares.principalId})) = ${email})`,
+        ),
+      )
+      .limit(1),
+    db
+      .select({ id: schema.designs.id })
+      .from(schema.designs)
+      .where(and(ownDesign, eq(schema.designs.visibility, "public")))
+      .limit(1),
+  ]);
+  return grants.length > 0 || publicDesigns.length > 0;
+}
+
+/**
+ * The organization has someone besides the caller, or an invitation waiting.
+ * No active organization (or no organization tables at all) means no teammate
+ * can exist yet; any other read failure rejects so it is not reported as "no".
+ */
+export async function hasInvitedTeammate(ctx: Ctx): Promise<boolean> {
+  const orgId = ctx?.orgId;
+  if (!orgId) return false;
+  try {
+    const db = getDbExec();
+    const members = await db.execute({
+      sql: `SELECT 1 FROM org_members
+            WHERE org_id = ? AND federation_removal_pending_at IS NULL
+            LIMIT 2`,
+      args: [orgId],
+    });
+    if (members.rows.length > 1) return true;
+    const invitations = await db.execute({
+      sql: `SELECT 1 FROM org_invitations
+            WHERE org_id = ? AND status = 'pending'
+            LIMIT 1`,
+      args: [orgId],
+    });
+    return invitations.rows.length > 0;
+  } catch (error) {
+    if (isMissingOrganizationTableError(error)) return false;
+    throw error;
+  }
+}
+
+/** The user saved a design as a template of their own. */
+export async function hasSavedTemplate(ctx: Ctx): Promise<boolean> {
+  const email = ownerEmailOf(ctx);
+  if (!email) return false;
+  const rows = await getDb()
+    .select({ id: schema.designTemplates.id })
+    .from(schema.designTemplates)
+    .where(
+      and(
+        accessFilter(schema.designTemplates, schema.designTemplateShares),
+        ownedBy(schema.designTemplates.ownerEmail, email),
+      ),
+    )
+    .limit(1);
+  return rows.length > 0;
+}
+
+type GettingStartedStep = Pick<
+  OnboardingStep,
+  | "id"
+  | "order"
+  | "title"
+  | "description"
+  | "href"
+  | "isAvailable"
+  | "isComplete"
+>;
+
+export const GETTING_STARTED_STEPS: GettingStartedStep[] = [
+  {
+    id: "create-design",
+    order: 10,
+    title: "Create your first design",
+    description: "Describe what you want and let the agent build it.",
+    href: "/home",
+    isComplete: hasOwnDesign,
+  },
+  {
+    id: "add-brand",
+    order: 20,
+    title: "Add your brand",
+    description: "Set up a design system with your colors, type, and logo.",
+    href: "/design-systems/setup",
+    isAvailable: canAddBrand,
+    isComplete: hasOwnBrand,
+  },
+  {
+    id: "use-real-data",
+    order: 30,
+    title: "Use your real data",
+    description: "Connect a running app so designs start from real screens.",
+    href: "/settings/integrations",
+    isComplete: hasConnectedDataSource,
+  },
+  {
+    id: "share-feedback",
+    order: 40,
+    title: "Share for feedback",
+    description: "Share a design with someone or publish a link.",
+    href: "/home",
+    isComplete: hasSharedDesign,
+  },
+  {
+    id: "invite-teammate",
+    order: 50,
+    title: "Invite a teammate",
+    description: "Add someone to your organization.",
+    href: "/settings/organization",
+    isComplete: hasInvitedTeammate,
+  },
+  {
+    id: "save-template",
+    order: 60,
+    title: "Save a design as a template",
+    description: "Turn a finished design into something your team can reuse.",
+    href: "/home",
+    isComplete: hasSavedTemplate,
+  },
+];
+
+/** Safe to call from every entry point that reads the checklist; a repeat replaces the same ids. */
+export function registerGettingStartedSteps(): void {
+  for (const step of GETTING_STARTED_STEPS) {
+    registerOnboardingStep({
+      ...step,
+      checklist: GETTING_STARTED_CHECKLIST,
+      required: false,
+      methods: [],
+    });
+  }
+}

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

@@ -137,7 +137,6 @@ const DESIGN_EDIT_TOOLS = new Set([
   "apply-component-prop-edit",
   "apply-design-token-edit",
   "apply-motion-edit",
-  "apply-shader-fill",
   "apply-tweaks",
   "apply-visual-edit",
   "create-file",
@@ -163,7 +162,6 @@ const DESIGN_FILE_TARGET_TOOLS = new Set([
   "apply-a11y-fix",
   "apply-component-prop-edit",
   "apply-motion-edit",
-  "apply-shader-fill",
   "apply-visual-edit",
   "delete-file",
   "detach-component-instance",

package/corpus/templates/design/server/plugins/getting-started.ts

@@ -0,0 +1,5 @@
+import { defineNitroPlugin } from "@agent-native/core/server";
+
+import { registerGettingStartedSteps } from "../lib/getting-started.js";
+
+export default defineNitroPlugin(registerGettingStartedSteps);

package/corpus/templates/design/shared/design-template-presets/analytics-dashboard.ts

@@ -0,0 +1,127 @@
+import type { DesignTemplatePreset } from "../design-template-presets.js";
+import { presetDocument } from "./doc.js";
+
+const C = {
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  canvas: "#EEF1F8",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  paper: "#FFFFFF",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  ink: "#1C2033",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  muted: "#6B7190",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  line: "#E3E7F2",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  indigo: "#6F6BE8",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  lilac: "#C9C6FA",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  sky: "#CFE3FF",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  teal: "#2FB5A8",
+};
+
+const bars = [
+  ["Direct", 92],
+  ["Search", 78],
+  ["Referral", 61],
+  ["Social", 47],
+  ["Email", 34],
+]
+  .map(
+    ([label, value]) =>
+      `<li><span>${label}</span><i style="width:${Number(value) * 4.4}px"></i><b>${value}%</b></li>`,
+  )
+  .join("");
+
+export const analyticsDashboard: DesignTemplatePreset = {
+  id: "preset-analytics-dashboard",
+  title: "Analytics dashboard",
+  description: "Track KPIs and metrics in one place.",
+  category: "other",
+  width: 1440,
+  height: 900,
+  filename: "analytics-dashboard.html",
+  content: presetDocument({
+    title: "Lumen — Analytics dashboard",
+    width: 1440,
+    height: 900,
+    fonts: "family=Inter:wght@400;500;600;700",
+    palette: {
+      canvas: C.canvas,
+      paper: C.paper,
+      ink: C.ink,
+      muted: C.muted,
+      line: C.line,
+      indigo: C.indigo,
+      lilac: C.lilac,
+      sky: C.sky,
+      teal: C.teal,
+    },
+    css: `
+      .artboard { color:var(--ink); font-family:'Inter', sans-serif; }
+      .sidebar { position:absolute; left:0; top:0; bottom:0; width:240px; z-index:1; padding:84px 20px 24px; background:var(--paper); border-right:1px solid var(--line); }
+      .sidebar li { display:flex; align-items:center; gap:12px; height:42px; padding:0 14px; border-radius:10px; color:var(--muted); font-size:15px; font-weight:500; }
+      .sidebar li::before { content:""; width:16px; height:16px; border-radius:5px; background:var(--line); }
+      .sidebar li.active { background:var(--canvas); color:var(--ink); }
+      .sidebar li.active::before { background:var(--indigo); }
+      .head { position:absolute; left:288px; right:48px; top:36px; z-index:1; display:flex; justify-content:space-between; align-items:center; }
+      .head h1 { font-size:30px; font-weight:700; letter-spacing:-.02em; }
+      .range { padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--muted); font-size:14px; font-weight:500; }
+      .stats { position:absolute; left:288px; right:48px; top:116px; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
+      .stat { padding:22px 24px; border-radius:16px; background:var(--paper); border:1px solid var(--line); }
+      .stat small { display:block; color:var(--muted); font-size:14px; font-weight:400; }
+      .stat strong { display:block; margin-top:10px; font-size:36px; font-weight:700; letter-spacing:-.03em; }
+      .stat em { display:block; margin-top:6px; color:var(--teal); font-size:13px; font-style:normal; font-weight:600; }
+      .stat.hot { background:var(--indigo); border-color:var(--indigo); color:var(--paper); }
+      .stat.hot small, .stat.hot em { color:var(--lilac); }
+      .card { position:absolute; z-index:1; padding:26px 28px; border-radius:16px; background:var(--paper); border:1px solid var(--line); }
+      .card h2 { font-size:18px; font-weight:600; letter-spacing:-.01em; }
+      .revenue { left:288px; top:300px; width:520px; height:552px; }
+      .revenue ul { margin-top:28px; display:grid; gap:22px; }
+      .revenue li { display:grid; grid-template-columns:84px auto 1fr; align-items:center; gap:14px; font-size:14px; font-weight:500; color:var(--muted); }
+      .revenue i { display:block; height:22px; border-radius:6px; background:linear-gradient(90deg, var(--indigo), var(--lilac)); }
+      .revenue b { color:var(--ink); font-weight:600; text-align:right; }
+      .engagement { left:832px; top:300px; right:48px; height:552px; }
+      .engagement svg { position:absolute; left:28px; right:28px; bottom:84px; width:calc(100% - 56px); height:300px; }
+      .engagement .axis { position:absolute; left:28px; right:28px; bottom:40px; display:flex; justify-content:space-between; color:var(--muted); font-size:13px; font-weight:500; }
+      .pill { position:absolute; right:28px; top:24px; padding:6px 12px; border-radius:999px; background:var(--sky); color:var(--indigo); font-size:13px; font-weight:600; }
+    `,
+    body: `
+      <div style="position:absolute;inset:0;background:${C.canvas}" data-agent-native-node-id="template-background" data-agent-native-layer-name="Background" data-agent-native-locked="true"></div>
+      <aside class="sidebar" data-agent-native-node-id="sidebar" data-agent-native-layer-name="Sidebar">
+        <ul>
+          <li class="active">Overview</li><li>Audience</li><li>Revenue</li><li>Campaigns</li><li>Reports</li><li>Settings</li>
+        </ul>
+      </aside>
+      <div style="position:absolute;left:24px;top:28px;z-index:2;display:flex;align-items:center;gap:10px;color:${C.ink};font:700 20px/1 'Inter',sans-serif;letter-spacing:-.02em" data-agent-native-node-id="template-logo" data-agent-native-layer-name="Logo" data-agent-native-locked="true">
+        <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="8" fill="${C.indigo}"/><circle cx="14" cy="14" r="5" fill="${C.paper}"/></svg>
+        <span>Lumen</span>
+      </div>
+      <header class="head" data-agent-native-node-id="header" data-agent-native-layer-name="Header">
+        <h1>Overview</h1>
+        <span class="range">Last 30 days</span>
+      </header>
+      <section class="stats" data-agent-native-node-id="stats" data-agent-native-layer-name="Stats">
+        <div class="stat"><small>Total users</small><strong>1.2M</strong><em>+8.2% vs last month</em></div>
+        <div class="stat"><small>Conversion rate</small><strong>4.8%</strong><em>+0.6 pts</em></div>
+        <div class="stat hot"><small>New sign-ups</small><strong>25,000</strong><em>+12.4% vs last month</em></div>
+        <div class="stat"><small>Avg. session</small><strong>6m 12s</strong><em>+14s</em></div>
+      </section>
+      <section class="card revenue" data-agent-native-node-id="revenue" data-agent-native-layer-name="Revenue by channel">
+        <h2>Revenue by channel</h2>
+        <ul>${bars}</ul>
+      </section>
+      <section class="card engagement" data-agent-native-node-id="engagement" data-agent-native-layer-name="User engagement">
+        <h2>User engagement over time</h2>
+        <span class="pill">+18% this quarter</span>
+        <svg viewBox="0 0 520 300" preserveAspectRatio="none" aria-hidden="true">
+          <path d="M0 240 C60 220 90 150 150 170 S250 250 310 150 S420 60 520 40 L520 300 L0 300 Z" fill="${C.sky}" opacity=".7"/>
+          <path d="M0 240 C60 220 90 150 150 170 S250 250 310 150 S420 60 520 40" fill="none" stroke="${C.indigo}" stroke-width="4" stroke-linecap="round"/>
+          <path d="M0 270 C80 250 120 230 190 235 S330 200 390 190 S470 170 520 150" fill="none" stroke="${C.teal}" stroke-width="3" stroke-linecap="round" stroke-dasharray="2 8"/>
+        </svg>
+        <div class="axis"><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span></div>
+      </section>`,
+  }),
+};