@agent-native/core 0.80.7 → 0.80.9

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

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

package/corpus/templates/design/server/lib/coding-handoff.ts

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

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

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

package/corpus/templates/design/server/routes/api/design-handoff/[id].zip.get.ts

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

package/corpus/templates/design/shared/code-layer.ts

@@ -1485,6 +1485,49 @@ function treeTypeForNode(node: CodeLayerNode): CodeLayerTreeNodeType {
   return "element";
 }
 
+function isCollapsibleDocumentShellNode(
+  node: CodeLayerTreeNode,
+  nodesById: Map<string, CodeLayerNode>,
+): boolean {
+  if (node.tag !== "html" && node.tag !== "body") return false;
+  return nodesById.get(node.id)?.layerNameSource === "tag";
+}
+
+function compactCodeLayerTreeNodes(
+  nodes: CodeLayerTreeNode[],
+  nodesById: Map<string, CodeLayerNode>,
+  ancestors: Set<string> = new Set(),
+): CodeLayerTreeNode[] {
+  const compacted: CodeLayerTreeNode[] = [];
+  const siblingIds = new Set<string>();
+
+  for (const node of nodes) {
+    if (ancestors.has(node.id)) continue;
+
+    const nextAncestors = new Set(ancestors);
+    nextAncestors.add(node.id);
+    const children = compactCodeLayerTreeNodes(
+      node.children,
+      nodesById,
+      nextAncestors,
+    );
+    const compactedNode: CodeLayerTreeNode = { ...node, children };
+    const promotedNodes =
+      isCollapsibleDocumentShellNode(compactedNode, nodesById) &&
+      children.length > 0
+        ? children
+        : [compactedNode];
+
+    for (const promotedNode of promotedNodes) {
+      if (siblingIds.has(promotedNode.id)) continue;
+      siblingIds.add(promotedNode.id);
+      compacted.push(promotedNode);
+    }
+  }
+
+  return compacted;
+}
+
 function capabilitiesFor(element: ParsedElement): EditCapability[] {
   const capabilities: EditCapability[] = [
     {
@@ -1768,26 +1811,36 @@ export function buildCodeLayerTree(
     });
   }
 
+  const childIdsByParentId = new Map<string, Set<string>>();
   for (const node of projection.nodes) {
     const parent =
       node.parentId && nodesById.has(node.parentId)
         ? treeById.get(node.parentId)
         : undefined;
     const treeNode = treeById.get(node.id);
-    if (parent && treeNode) parent.children.push(treeNode);
-  }
+    if (!parent || !treeNode || parent.id === treeNode.id) continue;
+    const childIds = childIdsByParentId.get(parent.id) ?? new Set<string>();
+    if (childIds.has(treeNode.id)) continue;
+    childIds.add(treeNode.id);
+    childIdsByParentId.set(parent.id, childIds);
+    parent.children.push(treeNode);
+  }
+
+  const roots: CodeLayerTreeNode[] = [];
+  const rootIds = new Set<string>();
+  const appendRoot = (id: string) => {
+    if (rootIds.has(id)) return;
+    const treeNode = treeById.get(id);
+    if (!treeNode) return;
+    rootIds.add(id);
+    roots.push(treeNode);
+  };
 
-  const roots = projection.rootNodeIds
-    .map((id) => treeById.get(id))
-    .filter((node): node is CodeLayerTreeNode => Boolean(node));
-  const rootIds = new Set(roots.map((node) => node.id));
+  projection.rootNodeIds.forEach(appendRoot);
   for (const node of projection.nodes) {
-    if (!node.parentId && !rootIds.has(node.id)) {
-      const treeNode = treeById.get(node.id);
-      if (treeNode) roots.push(treeNode);
-    }
+    if (!node.parentId) appendRoot(node.id);
   }
-  return roots;
+  return compactCodeLayerTreeNodes(roots, nodesById);
 }
 
 function normalizeSelectorForMatch(selector: string): string {
@@ -1797,6 +1850,26 @@ function normalizeSelectorForMatch(selector: string): string {
     .replace(/\s+/g, " ");
 }
 
+function selectorPartTag(selectorPart: string): string | null {
+  const match = selectorPart.trim().match(/^([A-Za-z][A-Za-z0-9:-]*)/);
+  return match?.[1]?.toLowerCase() ?? null;
+}
+
+function isDocumentRootSelectorPart(selectorPart: string): boolean {
+  const tag = selectorPartTag(selectorPart);
+  return tag === "html" || tag === "body";
+}
+
+// Removes positional `:nth-of-type(n)` suffixes from a selector. Runtime
+// bridge selectors fall back to `:nth-of-type` for elements without a durable
+// id, and that position is computed against the live (possibly Alpine-mutated)
+// DOM. When the stored source order differs, the positional index no longer
+// lines up. Dropping the suffix lets resolution fall back to the element's
+// stable signal (tag, classes, attributes, ancestor path).
+function stripPositionalNthOfType(selector: string): string {
+  return selector.replace(/:nth-of-type\(\d+\)/g, "");
+}
+
 function lastSelectorPart(selector: string): string {
   const parts = normalizeSelectorForMatch(selector).split(" > ");
   return parts[parts.length - 1] ?? selector;
@@ -1926,7 +1999,11 @@ function selectorPathMatchesElement(
   let current: ParsedElement | undefined = element;
   for (let index = parts.length - 1; index >= 0; index -= 1) {
     const selectorPart = parts[index];
-    if (!current || !selectorPart) return false;
+    if (!selectorPart) return false;
+    if (!current) {
+      if (isDocumentRootSelectorPart(selectorPart)) continue;
+      return false;
+    }
     if (!simpleSelectorMatchesElement(current, selectorPart)) return false;
     current =
       current.parentIndex === undefined
@@ -2024,26 +2101,52 @@ function resolveTarget(
     };
   }
 
-  const matches = projection.nodes.filter((node) =>
-    selectorMatches(
-      node,
-      target.selector ?? "",
-      elementByNodeId.get(node.id),
-      elementByIndex,
-    ),
-  );
+  const selectorValue = target.selector ?? "";
+  const matchesForSelector = (value: string): CodeLayerNode[] =>
+    projection.nodes.filter((node) =>
+      selectorMatches(
+        node,
+        value,
+        elementByNodeId.get(node.id),
+        elementByIndex,
+      ),
+    );
+
+  const matches = matchesForSelector(selectorValue);
   if (matches.length === 1 && matches[0]) {
     return { status: "resolved", node: matches[0] };
   }
   if (matches.length > 1) {
     return {
       status: "conflict",
-      message: `Selector "${target.selector}" matched ${matches.length} code layer nodes.`,
+      message: `Selector "${selectorValue}" matched ${matches.length} code layer nodes.`,
     };
   }
+
+  // Strict matching found nothing. Runtime selectors anchor unstamped elements
+  // with positional `:nth-of-type(n)` parts, which drift when the live DOM
+  // order differs from the stored source (reordered or runtime-inserted nodes).
+  // Retry once with the positional suffixes dropped so an element that is still
+  // unique by its tag/classes/attributes resolves instead of surfacing a hard
+  // "did not match" error. Genuinely ambiguous results stay a conflict rather
+  // than silently editing the wrong node.
+  const positionTolerantSelector = stripPositionalNthOfType(selectorValue);
+  if (positionTolerantSelector && positionTolerantSelector !== selectorValue) {
+    const tolerantMatches = matchesForSelector(positionTolerantSelector);
+    if (tolerantMatches.length === 1 && tolerantMatches[0]) {
+      return { status: "resolved", node: tolerantMatches[0] };
+    }
+    if (tolerantMatches.length > 1) {
+      return {
+        status: "conflict",
+        message: `Selector "${selectorValue}" matched ${tolerantMatches.length} code layer nodes after ignoring positional :nth-of-type (the element may have been reordered or added at runtime). Re-select the element to refresh its id.`,
+      };
+    }
+  }
+
   return {
     status: "conflict",
-    message: `Selector "${target.selector}" did not match a code layer node.`,
+    message: `Selector "${selectorValue}" did not match a code layer node.`,
   };
 }
 

package/corpus/templates/design/shared/color-utils.ts

@@ -17,6 +17,160 @@ const RGB_PATTERN =
 const HSL_PATTERN =
   /^hsla?\(\s*([0-9.]+)(?:deg)?\s*,\s*([0-9.]+)%\s*,\s*([0-9.]+)%(?:\s*,\s*([0-9.]+%?))?\s*\)$/i;
 
+// CSS named colors → hex, so detection/round-tripping works for shadows, gradient
+// stops, and the color picker (not just #hex/rgb()/hsl()). `transparent` is handled
+// separately as fully transparent black.
+const NAMED_COLOR_HEX: Record<string, string> = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  gold: "#ffd700",
+  goldenrod: "#daa520",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32",
+};
+
 export function parseCssColor(value: string): RgbaColor | null {
   const trimmed = value.trim();
   if (!trimmed) return null;
@@ -43,6 +197,11 @@ export function parseCssColor(value: string): RgbaColor | null {
     });
   }
 
+  const lower = trimmed.toLowerCase();
+  if (lower === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+  const namedHex = NAMED_COLOR_HEX[lower];
+  if (namedHex) return hexToRgba(namedHex);
+
   return null;
 }