@agent-native/core-corpus 0.216.0 → 0.217.0

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/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>`,
+  }),
+};

package/corpus/templates/design/shared/design-template-presets/design-studio.ts

@@ -0,0 +1,98 @@
+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: "#ECE8EF",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  paper: "#FFFFFF",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  ink: "#241F31",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  muted: "#7A748A",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  line: "#DAD4E2",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  pink: "#E8447A",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  violet: "#7A5CF0",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  teal: "#27B5A6",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  amber: "#F2A33A",
+};
+
+const swatches = [C.pink, C.violet, C.teal, C.amber, C.ink, C.line]
+  .map((color) => `<i style="background:${color}"></i>`)
+  .join("");
+
+export const designStudio: DesignTemplatePreset = {
+  id: "preset-design-studio",
+  title: "Design studio",
+  description: "Create and explore visual ideas.",
+  category: "other",
+  width: 1440,
+  height: 900,
+  filename: "design-studio.html",
+  content: presetDocument({
+    title: "Atelier — Design studio",
+    width: 1440,
+    height: 900,
+    fonts: "family=Space+Grotesk:wght@400;500;700",
+    palette: {
+      canvas: C.canvas,
+      paper: C.paper,
+      ink: C.ink,
+      muted: C.muted,
+      line: C.line,
+      pink: C.pink,
+      violet: C.violet,
+      teal: C.teal,
+      amber: C.amber,
+    },
+    css: `
+      .artboard { color:var(--ink); font-family:'Space Grotesk', sans-serif; }
+      .toolbar { position:absolute; left:24px; top:96px; z-index:1; display:grid; gap:12px; padding:12px; border-radius:18px; background:var(--paper); border:1px solid var(--line); }
+      .toolbar i { display:block; width:44px; height:44px; border-radius:12px; background:var(--canvas); }
+      .toolbar i:first-child { background:var(--pink); }
+      .menubar { position:absolute; left:96px; right:24px; top:24px; z-index:1; display:flex; align-items:center; gap:28px; height:48px; padding:0 24px; border-radius:14px; background:var(--paper); border:1px solid var(--line); color:var(--muted); font-size:15px; font-weight:500; }
+      .menubar b { margin-left:auto; padding:8px 16px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:14px; font-weight:700; }
+      .stage { position:absolute; left:96px; top:96px; right:376px; bottom:24px; z-index:1; border-radius:24px; background:var(--paper); border:1px solid var(--line); overflow:hidden; }
+      .shape { position:absolute; }
+      .tri { left:210px; top:150px; width:0; height:0; border-left:200px solid transparent; border-right:200px solid transparent; border-bottom:350px solid var(--pink); }
+      .blob { left:450px; top:130px; width:340px; height:300px; border-radius:58% 42% 55% 45% / 48% 58% 42% 52%; background:var(--violet); opacity:.82; }
+      .circle { left:380px; top:360px; width:240px; height:240px; border-radius:50%; background:var(--teal); opacity:.78; }
+      .square { left:640px; top:380px; width:210px; height:210px; border-radius:36px; background:var(--amber); transform:rotate(12deg); opacity:.9; }
+      .panel { position:absolute; right:24px; top:96px; bottom:24px; width:328px; z-index:1; padding:26px; border-radius:24px; background:var(--paper); border:1px solid var(--line); }
+      .panel h2 { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
+      .swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
+      .swatches i { display:block; aspect-ratio:1; border-radius:50%; }
+      .sliders { display:grid; gap:26px; margin-top:34px; }
+      .sliders p { display:flex; justify-content:space-between; color:var(--muted); font-size:14px; font-weight:400; }
+      .sliders em { font-style:normal; }
+      .sliders > div > span { display:block; height:6px; margin-top:12px; border-radius:3px; background:var(--line); }
+      .sliders > div > span b { display:block; height:100%; border-radius:3px; background:var(--violet); }
+    `,
+    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>
+      <div style="position:absolute;left:24px;top:30px;z-index:2;display:flex;align-items:center;gap:8px;color:${C.ink};font:700 22px/1 'Space Grotesk',sans-serif;letter-spacing:-.03em" data-agent-native-node-id="template-logo" data-agent-native-layer-name="Logo" data-agent-native-locked="true">
+        <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><rect width="30" height="30" rx="9" fill="${C.ink}"/><path d="M15 7l8 15H7z" fill="${C.pink}"/></svg>
+      </div>
+      <header class="menubar" data-agent-native-node-id="menubar" data-agent-native-layer-name="Menu bar">
+        <span>File</span><span>Edit</span><span>View</span><span>Arrange</span><b>Share</b>
+      </header>
+      <nav class="toolbar" data-agent-native-node-id="toolbar" data-agent-native-layer-name="Toolbar"><i></i><i></i><i></i><i></i><i></i></nav>
+      <section class="stage" data-agent-native-node-id="stage" data-agent-native-layer-name="Canvas">
+        <div class="shape tri"></div><div class="shape blob"></div><div class="shape circle"></div><div class="shape square"></div>
+      </section>
+      <aside class="panel" data-agent-native-node-id="inspector" data-agent-native-layer-name="Inspector">
+        <h2>Palette</h2>
+        <div class="swatches">${swatches}</div>
+        <div class="sliders">
+          <div><p><em>Opacity</em><em>82%</em></p><span><b style="width:82%"></b></span></div>
+          <div><p><em>Blur</em><em>24</em></p><span><b style="width:36%"></b></span></div>
+          <div><p><em>Rotation</em><em>12°</em></p><span><b style="width:14%"></b></span></div>
+        </div>
+      </aside>`,
+  }),
+};

package/corpus/templates/design/shared/design-template-presets/messaging-app.ts

@@ -0,0 +1,101 @@
+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: "#EDEFE4",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  paper: "#FFFFFF",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  ink: "#1F2A24",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  muted: "#6F7A73",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  line: "#DDE2D5",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  green: "#79B98B",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  greenDeep: "#2F7D4B",
+  // guard:allow-raw-color — authored template palette, not app chrome.
+  bubble: "#F7F8F2",
+};
+
+const people = [
+  ["Anna", "Are we still on for 3?", "A"],
+  ["Ben", "Sent the latest draft", "B"],
+  ["Chloe", "Thanks, that works!", "C"],
+  ["Dev team", "Release notes are live", "D"],
+  ["Elena", "Can you review this?", "E"],
+]
+  .map(
+    ([name, preview, initial], index) =>
+      `<li${index === 1 ? ' class="active"' : ""}><span class="avatar">${initial}</span><div><b>${name}</b><small>${preview}</small></div></li>`,
+  )
+  .join("");
+
+export const messagingApp: DesignTemplatePreset = {
+  id: "preset-messaging-app",
+  title: "Messaging app",
+  description: "Build a fast, modern chat experience.",
+  category: "other",
+  width: 1440,
+  height: 900,
+  filename: "messaging-app.html",
+  content: presetDocument({
+    title: "Relay — Messaging app",
+    width: 1440,
+    height: 900,
+    fonts: "family=DM+Sans:wght@400;500;700",
+    palette: {
+      canvas: C.canvas,
+      paper: C.paper,
+      ink: C.ink,
+      muted: C.muted,
+      line: C.line,
+      green: C.green,
+      deep: C.greenDeep,
+      bubble: C.bubble,
+    },
+    css: `
+      .artboard { color:var(--ink); font-family:'DM Sans', sans-serif; }
+      .inbox { position:absolute; left:0; top:0; bottom:0; width:360px; z-index:1; padding:88px 16px 24px; background:var(--paper); border-right:1px solid var(--line); }
+      .inbox li { display:flex; align-items:center; gap:14px; padding:14px; border-radius:14px; }
+      .inbox li.active { background:var(--canvas); }
+      .avatar { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--green); color:var(--paper); font-size:17px; font-weight:700; }
+      .inbox b { display:block; font-size:16px; font-weight:700; }
+      .inbox small { display:block; margin-top:3px; color:var(--muted); font-size:14px; }
+      .thread-head { position:absolute; left:360px; right:0; top:0; z-index:1; display:flex; align-items:center; gap:14px; height:84px; padding:0 40px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--paper) 80%, transparent); }
+      .thread-head b { font-size:18px; font-weight:700; }
+      .thread-head small { display:block; color:var(--deep); font-size:13px; font-weight:500; }
+      .thread { position:absolute; left:360px; right:0; top:84px; bottom:112px; z-index:1; display:flex; flex-direction:column; justify-content:flex-start; gap:16px; padding:48px 64px 0; }
+      .msg { max-width:520px; padding:16px 20px; border-radius:20px; font-size:18px; line-height:1.4; background:var(--bubble); border:1px solid var(--line); }
+      .msg.me { align-self:flex-end; background:var(--green); border-color:var(--green); color:var(--paper); border-bottom-right-radius:6px; }
+      .msg.them { border-bottom-left-radius:6px; }
+      .composer { position:absolute; left:424px; right:64px; bottom:32px; z-index:1; display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 12px 0 28px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--muted); font-size:17px; }
+      .send { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--deep); }
+    `,
+    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="inbox" data-agent-native-node-id="inbox" data-agent-native-layer-name="Inbox">
+        <ul>${people}</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 22px/1 'DM Sans',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="14" fill="${C.greenDeep}"/><path d="M8 13h12M8 17h7" stroke="${C.paper}" stroke-width="2.4" stroke-linecap="round"/></svg>
+        <span>Relay</span>
+      </div>
+      <header class="thread-head" data-agent-native-node-id="thread-header" data-agent-native-layer-name="Thread header">
+        <span class="avatar">B</span>
+        <div><b>Ben</b><small>Online</small></div>
+      </header>
+      <section class="thread" data-agent-native-node-id="thread" data-agent-native-layer-name="Conversation">
+        <p class="msg them">Hey, how are you?</p>
+        <p class="msg me">I'm good, thanks! Just got it.</p>
+        <p class="msg them">Did you get my email?</p>
+        <p class="msg me">Reading it now, looks promising!</p>
+      </section>
+      <div class="composer" data-agent-native-node-id="composer" data-agent-native-layer-name="Composer">
+        <span>Type a message</span>
+        <span class="send"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 10h13M11 5l5 5-5 5" fill="none" stroke="${C.paper}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+      </div>`,
+  }),
+};