@spectratools/graphic-designer-cli 0.3.1

package/dist/cli.js

@@ -0,0 +1,4922 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { readFileSync, realpathSync } from "fs";
+import { mkdir as mkdir2, readFile as readFile4, writeFile as writeFile2 } from "fs/promises";
+import { basename as basename4, dirname as dirname3, resolve as resolve4 } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import { Cli, z as z3 } from "incur";
+
+// src/publish/gist.ts
+import { readFile } from "fs/promises";
+import { basename } from "path";
+
+// src/utils/retry.ts
+var DEFAULT_RETRY_POLICY = {
+  maxRetries: 3,
+  baseMs: 500,
+  maxMs: 4e3
+};
+function sleep(ms) {
+  return new Promise((resolve5) => setTimeout(resolve5, ms));
+}
+async function withRetry(operation, policy = DEFAULT_RETRY_POLICY) {
+  let attempt = 0;
+  let lastError;
+  while (attempt <= policy.maxRetries) {
+    try {
+      const value = await operation();
+      return { value, attempts: attempt + 1 };
+    } catch (error) {
+      lastError = error;
+      if (attempt >= policy.maxRetries) {
+        break;
+      }
+      const backoff = Math.min(policy.baseMs * 2 ** attempt, policy.maxMs);
+      const jitter = Math.floor(Math.random() * 125);
+      await sleep(backoff + jitter);
+      attempt += 1;
+    }
+  }
+  throw lastError;
+}
+
+// src/publish/gist.ts
+function requireGitHubToken(token) {
+  const resolved = token ?? process.env.GITHUB_TOKEN;
+  if (!resolved) {
+    throw new Error("GITHUB_TOKEN is required for gist publish adapter.");
+  }
+  return resolved;
+}
+async function gistJson(path, init, token, retryPolicy) {
+  return withRetry(async () => {
+    const response = await fetch(`https://api.github.com${path}`, {
+      ...init,
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: `Bearer ${token}`,
+        "User-Agent": "spectratools-graphic-designer",
+        ...init.headers
+      }
+    });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `GitHub Gist API ${path} failed (${response.status}): ${text || response.statusText}`
+      );
+    }
+    return await response.json();
+  }, retryPolicy);
+}
+async function publishToGist(options) {
+  const token = requireGitHubToken(options.token);
+  const [imageBuffer, metadataBuffer] = await Promise.all([
+    readFile(options.imagePath),
+    readFile(options.metadataPath)
+  ]);
+  const prefix = options.filenamePrefix ?? basename(options.imagePath, ".png");
+  const imageBase64 = imageBuffer.toString("base64");
+  const metadataText = metadataBuffer.toString("utf8");
+  const readmeName = `${prefix}.md`;
+  const b64Name = `${prefix}.png.base64.txt`;
+  const metadataName = `${prefix}.meta.json`;
+  const markdown = [
+    `# ${prefix}`,
+    "",
+    "Deterministic graphic-designer artifact.",
+    "",
+    `- Source image filename: ${basename(options.imagePath)}`,
+    `- Sidecar metadata filename: ${metadataName}`,
+    "",
+    "## Preview",
+    "",
+    `![${prefix}](data:image/png;base64,${imageBase64})`,
+    "",
+    "## Notes",
+    "",
+    `- This gist stores the PNG as base64 in \`${b64Name}\` for deterministic transport.`
+  ].join("\n");
+  const payload = {
+    description: options.description ?? "graphic-designer publish",
+    public: options.public ?? false,
+    files: {
+      [readmeName]: { content: markdown },
+      [b64Name]: { content: imageBase64 },
+      [metadataName]: { content: metadataText }
+    }
+  };
+  const endpoint = options.gistId ? `/gists/${options.gistId}` : "/gists";
+  const method = options.gistId ? "PATCH" : "POST";
+  const published = await gistJson(
+    endpoint,
+    {
+      method,
+      body: JSON.stringify(payload)
+    },
+    token,
+    options.retryPolicy
+  );
+  return {
+    target: "gist",
+    gistId: published.value.id,
+    htmlUrl: published.value.html_url,
+    attempts: published.attempts,
+    files: Object.keys(published.value.files ?? payload.files)
+  };
+}
+
+// src/publish/github.ts
+import { readFile as readFile2 } from "fs/promises";
+import { basename as basename2, posix } from "path";
+function requireGitHubToken2(token) {
+  const resolved = token ?? process.env.GITHUB_TOKEN;
+  if (!resolved) {
+    throw new Error("GITHUB_TOKEN is required for GitHub publish adapter.");
+  }
+  return resolved;
+}
+async function githubJson(path, init, token, retryPolicy) {
+  return withRetry(async () => {
+    const response = await fetch(`https://api.github.com${path}`, {
+      ...init,
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: `Bearer ${token}`,
+        "User-Agent": "spectratools-graphic-designer",
+        ...init.headers
+      }
+    });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `GitHub API ${path} failed (${response.status}): ${text || response.statusText}`
+      );
+    }
+    return await response.json();
+  }, retryPolicy);
+}
+async function githubJsonMaybe(path, token, retryPolicy) {
+  const { value, attempts } = await withRetry(async () => {
+    const response = await fetch(`https://api.github.com${path}`, {
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: `Bearer ${token}`,
+        "User-Agent": "spectratools-graphic-designer"
+      }
+    });
+    if (response.status === 404) {
+      return { found: false };
+    }
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `GitHub API ${path} failed (${response.status}): ${text || response.statusText}`
+      );
+    }
+    const json = await response.json();
+    return { found: true, value: json };
+  }, retryPolicy);
+  if (!value.found) {
+    return { found: false, attempts };
+  }
+  return {
+    found: true,
+    value: value.value,
+    attempts
+  };
+}
+function parseRepo(repo) {
+  const [owner, name] = repo.split("/");
+  if (!owner || !name) {
+    throw new Error(`Invalid repo "${repo}". Expected owner/name.`);
+  }
+  return { owner, name };
+}
+function toApiContentPath(repo, filePath) {
+  const { owner, name } = parseRepo(repo);
+  return `/repos/${owner}/${name}/contents/${filePath}`;
+}
+function normalizePath(pathPrefix, filename) {
+  const trimmed = (pathPrefix ?? "artifacts").replace(/^\/+|\/+$/gu, "");
+  return posix.join(trimmed, filename);
+}
+async function publishToGitHub(options) {
+  const token = requireGitHubToken2(options.token);
+  const branch = options.branch ?? "main";
+  const commitMessage = options.commitMessage ?? "chore(graphic-designer): publish deterministic artifacts";
+  const [imageBuffer, metadataBuffer] = await Promise.all([
+    readFile2(options.imagePath),
+    readFile2(options.metadataPath)
+  ]);
+  const uploads = [
+    {
+      sourcePath: options.imagePath,
+      destination: normalizePath(options.pathPrefix, basename2(options.imagePath)),
+      content: imageBuffer.toString("base64")
+    },
+    {
+      sourcePath: options.metadataPath,
+      destination: normalizePath(options.pathPrefix, basename2(options.metadataPath)),
+      content: metadataBuffer.toString("base64")
+    }
+  ];
+  let totalAttempts = 0;
+  const files = [];
+  for (const upload of uploads) {
+    const existingPath = `${toApiContentPath(options.repo, upload.destination)}?ref=${encodeURIComponent(branch)}`;
+    const existing = await githubJsonMaybe(
+      existingPath,
+      token,
+      options.retryPolicy
+    );
+    totalAttempts += existing.attempts;
+    const body = {
+      message: `${commitMessage} (${basename2(upload.sourcePath)})`,
+      content: upload.content,
+      branch,
+      sha: existing.value?.sha
+    };
+    const putPath = toApiContentPath(options.repo, upload.destination);
+    const published = await githubJson(
+      putPath,
+      {
+        method: "PUT",
+        body: JSON.stringify(body)
+      },
+      token,
+      options.retryPolicy
+    );
+    totalAttempts += published.attempts;
+    files.push({
+      path: upload.destination,
+      ...published.value.content?.sha ? { sha: published.value.content.sha } : {},
+      ...published.value.content?.html_url ? { htmlUrl: published.value.content.html_url } : {}
+    });
+  }
+  return {
+    target: "github",
+    repo: options.repo,
+    branch,
+    attempts: totalAttempts,
+    files
+  };
+}
+
+// src/qa.ts
+import { readFile as readFile3 } from "fs/promises";
+import { resolve } from "path";
+import sharp from "sharp";
+
+// src/code-style.ts
+var CARBON_SURROUND_COLOR = "rgba(171, 184, 195, 1)";
+var DEFAULT_STYLE = {
+  paddingVertical: 56,
+  paddingHorizontal: 56,
+  windowControls: "macos",
+  dropShadow: true,
+  dropShadowOffsetY: 20,
+  dropShadowBlurRadius: 68,
+  surroundColor: CARBON_SURROUND_COLOR,
+  fontSize: 14,
+  lineHeightPercent: 143,
+  scale: 2
+};
+function normalizeScale(scale) {
+  if (scale === 1 || scale === 2 || scale === 4) {
+    return scale;
+  }
+  return DEFAULT_STYLE.scale;
+}
+function resolveCodeBlockStyle(style) {
+  return {
+    paddingVertical: style?.paddingVertical ?? DEFAULT_STYLE.paddingVertical,
+    paddingHorizontal: style?.paddingHorizontal ?? DEFAULT_STYLE.paddingHorizontal,
+    windowControls: style?.windowControls ?? DEFAULT_STYLE.windowControls,
+    dropShadow: style?.dropShadow ?? DEFAULT_STYLE.dropShadow,
+    dropShadowOffsetY: style?.dropShadowOffsetY ?? DEFAULT_STYLE.dropShadowOffsetY,
+    dropShadowBlurRadius: style?.dropShadowBlurRadius ?? DEFAULT_STYLE.dropShadowBlurRadius,
+    surroundColor: style?.surroundColor ?? DEFAULT_STYLE.surroundColor,
+    fontSize: style?.fontSize ?? DEFAULT_STYLE.fontSize,
+    lineHeightPercent: style?.lineHeightPercent ?? DEFAULT_STYLE.lineHeightPercent,
+    scale: normalizeScale(style?.scale)
+  };
+}
+function resolveElementScale(element) {
+  if (element.type !== "code-block" && element.type !== "terminal") {
+    return null;
+  }
+  return resolveCodeBlockStyle(element.style).scale;
+}
+function resolveRenderScale(spec) {
+  let scale = 1;
+  for (const element of spec.elements) {
+    const elementScale = resolveElementScale(element);
+    if (elementScale === null) {
+      continue;
+    }
+    if (elementScale > scale) {
+      scale = elementScale;
+    }
+  }
+  return scale;
+}
+
+// src/spec.schema.ts
+import { z as z2 } from "zod";
+
+// src/themes/builtin.ts
+import { z } from "zod";
+var colorHexSchema = z.string().regex(/^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, "Expected #RRGGBB or #RRGGBBAA color");
+var fontFamilySchema = z.string().min(1).max(120);
+var codeThemeSchema = z.object({
+  background: colorHexSchema,
+  text: colorHexSchema,
+  comment: colorHexSchema,
+  keyword: colorHexSchema,
+  string: colorHexSchema,
+  number: colorHexSchema,
+  function: colorHexSchema,
+  variable: colorHexSchema,
+  operator: colorHexSchema,
+  punctuation: colorHexSchema
+}).strict();
+var themeSchema = z.object({
+  background: colorHexSchema,
+  surface: colorHexSchema,
+  surfaceMuted: colorHexSchema,
+  surfaceElevated: colorHexSchema,
+  text: colorHexSchema,
+  textMuted: colorHexSchema,
+  textInverse: colorHexSchema,
+  primary: colorHexSchema,
+  secondary: colorHexSchema,
+  accent: colorHexSchema,
+  success: colorHexSchema,
+  warning: colorHexSchema,
+  error: colorHexSchema,
+  info: colorHexSchema,
+  border: colorHexSchema,
+  borderMuted: colorHexSchema,
+  code: codeThemeSchema,
+  fonts: z.object({
+    heading: fontFamilySchema,
+    body: fontFamilySchema,
+    mono: fontFamilySchema
+  }).strict()
+}).strict();
+var builtInThemeSchema = z.enum([
+  "dark",
+  "light",
+  "dracula",
+  "github-dark",
+  "one-dark",
+  "nord"
+]);
+var baseDarkTheme = {
+  background: "#0B1020",
+  surface: "#111936",
+  surfaceMuted: "#1A2547",
+  surfaceElevated: "#202D55",
+  text: "#E8EEFF",
+  textMuted: "#AAB9E8",
+  textInverse: "#0B1020",
+  primary: "#7AA2FF",
+  secondary: "#65E4A3",
+  accent: "#65E4A3",
+  success: "#2FCB7E",
+  warning: "#F4B860",
+  error: "#F97070",
+  info: "#60A5FA",
+  border: "#32426E",
+  borderMuted: "#24345F",
+  code: {
+    background: "#0F172A",
+    text: "#E2E8F0",
+    comment: "#64748B",
+    keyword: "#C084FC",
+    string: "#86EFAC",
+    number: "#FCA5A5",
+    function: "#93C5FD",
+    variable: "#E2E8F0",
+    operator: "#F8FAFC",
+    punctuation: "#CBD5E1"
+  },
+  fonts: {
+    heading: "Space Grotesk",
+    body: "Inter",
+    mono: "JetBrains Mono"
+  }
+};
+var builtInThemes = {
+  dark: baseDarkTheme,
+  light: {
+    ...baseDarkTheme,
+    background: "#F8FAFC",
+    surface: "#FFFFFF",
+    surfaceMuted: "#EEF2FF",
+    surfaceElevated: "#FFFFFF",
+    text: "#0F172A",
+    textMuted: "#334155",
+    textInverse: "#F8FAFC",
+    border: "#CBD5E1",
+    borderMuted: "#E2E8F0",
+    code: {
+      ...baseDarkTheme.code,
+      background: "#F1F5F9",
+      text: "#0F172A",
+      variable: "#1E293B",
+      punctuation: "#334155",
+      operator: "#0F172A"
+    }
+  },
+  dracula: {
+    ...baseDarkTheme,
+    background: "#282A36",
+    surface: "#303247",
+    surfaceMuted: "#3A3D55",
+    surfaceElevated: "#44475A",
+    text: "#F8F8F2",
+    textMuted: "#BD93F9",
+    primary: "#8BE9FD",
+    accent: "#50FA7B",
+    secondary: "#FFB86C",
+    success: "#50FA7B",
+    warning: "#FFB86C",
+    error: "#FF5555",
+    info: "#8BE9FD",
+    border: "#44475A",
+    borderMuted: "#3A3D55"
+  },
+  "github-dark": {
+    ...baseDarkTheme,
+    background: "#0D1117",
+    surface: "#161B22",
+    surfaceMuted: "#1F2632",
+    surfaceElevated: "#21262D",
+    text: "#E6EDF3",
+    textMuted: "#8B949E",
+    primary: "#58A6FF",
+    accent: "#3FB950",
+    secondary: "#A5D6FF",
+    border: "#30363D",
+    borderMuted: "#21262D"
+  },
+  "one-dark": {
+    ...baseDarkTheme,
+    background: "#282C34",
+    surface: "#2F343F",
+    surfaceMuted: "#3A404C",
+    surfaceElevated: "#434A59",
+    text: "#ABB2BF",
+    textMuted: "#7F848E",
+    primary: "#61AFEF",
+    accent: "#98C379",
+    secondary: "#E5C07B",
+    warning: "#E5C07B",
+    error: "#E06C75",
+    border: "#4B5263",
+    borderMuted: "#3A404C"
+  },
+  nord: {
+    ...baseDarkTheme,
+    background: "#2E3440",
+    surface: "#3B4252",
+    surfaceMuted: "#434C5E",
+    surfaceElevated: "#4C566A",
+    text: "#ECEFF4",
+    textMuted: "#D8DEE9",
+    primary: "#88C0D0",
+    accent: "#A3BE8C",
+    secondary: "#81A1C1",
+    success: "#A3BE8C",
+    warning: "#EBCB8B",
+    error: "#BF616A",
+    info: "#5E81AC",
+    border: "#4C566A",
+    borderMuted: "#434C5E"
+  }
+};
+var defaultTheme = builtInThemes.dark;
+
+// src/themes/syntax.ts
+var themeToShikiMap = {
+  dark: "github-dark-default",
+  light: "github-light-default",
+  dracula: "dracula",
+  "github-dark": "github-dark",
+  "one-dark": "one-dark-pro",
+  nord: "nord"
+};
+function isLightTheme(background) {
+  const hex = background.startsWith("#") ? background.slice(1) : background;
+  const normalized = hex.length === 8 ? hex.slice(0, 6) : hex;
+  if (!/^[0-9a-fA-F]{6}$/u.test(normalized)) {
+    return false;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance > 0.6;
+}
+function matchBuiltInTheme(theme) {
+  for (const [name, builtInTheme] of Object.entries(builtInThemes)) {
+    if (builtInTheme === theme) {
+      return name;
+    }
+  }
+  return void 0;
+}
+function resolveShikiTheme(theme) {
+  if (typeof theme === "string") {
+    return themeToShikiMap[theme] ?? themeToShikiMap.dark;
+  }
+  const builtInName = matchBuiltInTheme(theme);
+  if (builtInName) {
+    return themeToShikiMap[builtInName] ?? themeToShikiMap.dark;
+  }
+  return isLightTheme(theme.background) ? themeToShikiMap.light : themeToShikiMap.dark;
+}
+
+// src/themes/index.ts
+function resolveTheme(theme) {
+  if (typeof theme === "string") {
+    return builtInThemes[theme];
+  }
+  return theme;
+}
+
+// src/spec.schema.ts
+var colorHexSchema2 = z2.string().regex(/^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, "Expected #RRGGBB or #RRGGBBAA color");
+var gradientStopSchema = z2.object({
+  offset: z2.number().min(0).max(1),
+  color: colorHexSchema2
+}).strict();
+var linearGradientSchema = z2.object({
+  type: z2.literal("linear"),
+  angle: z2.number().default(180),
+  stops: z2.array(gradientStopSchema).min(2)
+}).strict();
+var radialGradientSchema = z2.object({
+  type: z2.literal("radial"),
+  stops: z2.array(gradientStopSchema).min(2)
+}).strict();
+var gradientSchema = z2.discriminatedUnion("type", [linearGradientSchema, radialGradientSchema]);
+var drawFontFamilySchema = z2.enum(["heading", "body", "mono"]);
+var drawRectSchema = z2.object({
+  type: z2.literal("rect"),
+  x: z2.number(),
+  y: z2.number(),
+  width: z2.number().positive(),
+  height: z2.number().positive(),
+  fill: colorHexSchema2.optional(),
+  stroke: colorHexSchema2.optional(),
+  strokeWidth: z2.number().min(0).max(32).default(0),
+  radius: z2.number().min(0).max(256).default(0),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawCircleSchema = z2.object({
+  type: z2.literal("circle"),
+  cx: z2.number(),
+  cy: z2.number(),
+  radius: z2.number().positive(),
+  fill: colorHexSchema2.optional(),
+  stroke: colorHexSchema2.optional(),
+  strokeWidth: z2.number().min(0).max(32).default(0),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawTextSchema = z2.object({
+  type: z2.literal("text"),
+  x: z2.number(),
+  y: z2.number(),
+  text: z2.string().min(1).max(500),
+  fontSize: z2.number().min(6).max(200).default(16),
+  fontWeight: z2.number().int().min(100).max(900).default(400),
+  fontFamily: drawFontFamilySchema.default("body"),
+  color: colorHexSchema2.default("#FFFFFF"),
+  align: z2.enum(["left", "center", "right"]).default("left"),
+  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
+  letterSpacing: z2.number().min(-10).max(50).default(0),
+  maxWidth: z2.number().positive().optional(),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawLineSchema = z2.object({
+  type: z2.literal("line"),
+  x1: z2.number(),
+  y1: z2.number(),
+  x2: z2.number(),
+  y2: z2.number(),
+  color: colorHexSchema2.default("#FFFFFF"),
+  width: z2.number().min(0.5).max(32).default(2),
+  dash: z2.array(z2.number()).max(6).optional(),
+  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
+  arrowSize: z2.number().min(4).max(32).default(10),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawPointSchema = z2.object({
+  x: z2.number(),
+  y: z2.number()
+}).strict();
+var drawBezierSchema = z2.object({
+  type: z2.literal("bezier"),
+  points: z2.array(drawPointSchema).min(2).max(20),
+  color: colorHexSchema2.default("#FFFFFF"),
+  width: z2.number().min(0.5).max(32).default(2),
+  dash: z2.array(z2.number()).max(6).optional(),
+  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
+  arrowSize: z2.number().min(4).max(32).default(10),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawPathSchema = z2.object({
+  type: z2.literal("path"),
+  d: z2.string().min(1).max(4e3),
+  fill: colorHexSchema2.optional(),
+  stroke: colorHexSchema2.optional(),
+  strokeWidth: z2.number().min(0).max(32).default(0),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawBadgeSchema = z2.object({
+  type: z2.literal("badge"),
+  x: z2.number(),
+  y: z2.number(),
+  text: z2.string().min(1).max(64),
+  fontSize: z2.number().min(6).max(48).default(12),
+  fontFamily: drawFontFamilySchema.default("mono"),
+  color: colorHexSchema2.default("#FFFFFF"),
+  background: colorHexSchema2.default("#334B83"),
+  paddingX: z2.number().min(0).max(64).default(10),
+  paddingY: z2.number().min(0).max(32).default(4),
+  borderRadius: z2.number().min(0).max(64).default(12),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawGradientRectSchema = z2.object({
+  type: z2.literal("gradient-rect"),
+  x: z2.number(),
+  y: z2.number(),
+  width: z2.number().positive(),
+  height: z2.number().positive(),
+  gradient: gradientSchema,
+  radius: z2.number().min(0).max(256).default(0),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var drawCommandSchema = z2.discriminatedUnion("type", [
+  drawRectSchema,
+  drawCircleSchema,
+  drawTextSchema,
+  drawLineSchema,
+  drawBezierSchema,
+  drawPathSchema,
+  drawBadgeSchema,
+  drawGradientRectSchema
+]);
+var defaultCanvas = {
+  width: 1200,
+  height: 675,
+  padding: 48
+};
+var defaultConstraints = {
+  minContrastRatio: 4.5,
+  minFooterSpacing: 16,
+  checkOverlaps: true,
+  maxTextTruncation: 0.1
+};
+var defaultAutoLayout = {
+  mode: "auto",
+  algorithm: "layered",
+  direction: "TB",
+  nodeSpacing: 80,
+  rankSpacing: 120,
+  edgeRouting: "polyline"
+};
+var defaultGridLayout = {
+  mode: "grid",
+  columns: 3,
+  gap: 24,
+  equalHeight: false
+};
+var defaultStackLayout = {
+  mode: "stack",
+  direction: "vertical",
+  gap: 24,
+  alignment: "stretch"
+};
+function inferLayout(elements, explicitLayout) {
+  if (explicitLayout) {
+    return explicitLayout;
+  }
+  const hasFlowNodes = elements.some((element) => element.type === "flow-node");
+  const hasConnections = elements.some((element) => element.type === "connection");
+  const hasOnlyCards = elements.every((element) => element.type === "card");
+  const hasCodeOrTerminal = elements.some(
+    (element) => element.type === "code-block" || element.type === "terminal"
+  );
+  if (hasFlowNodes && hasConnections) {
+    return defaultAutoLayout;
+  }
+  if (hasOnlyCards) {
+    return defaultGridLayout;
+  }
+  if (hasCodeOrTerminal) {
+    return defaultStackLayout;
+  }
+  return defaultGridLayout;
+}
+var cardElementSchema = z2.object({
+  type: z2.literal("card"),
+  id: z2.string().min(1).max(120),
+  title: z2.string().min(1).max(200),
+  body: z2.string().min(1).max(4e3),
+  badge: z2.string().min(1).max(64).optional(),
+  metric: z2.string().min(1).max(80).optional(),
+  tone: z2.enum(["neutral", "accent", "success", "warning", "error"]).default("neutral"),
+  icon: z2.string().min(1).max(64).optional()
+}).strict();
+var flowNodeElementSchema = z2.object({
+  type: z2.literal("flow-node"),
+  id: z2.string().min(1).max(120),
+  shape: z2.enum(["box", "rounded-box", "diamond", "circle", "pill", "cylinder", "parallelogram"]),
+  label: z2.string().min(1).max(200),
+  sublabel: z2.string().min(1).max(300).optional(),
+  sublabelColor: colorHexSchema2.optional(),
+  labelColor: colorHexSchema2.optional(),
+  labelFontSize: z2.number().min(10).max(48).optional(),
+  color: colorHexSchema2.optional(),
+  borderColor: colorHexSchema2.optional(),
+  borderWidth: z2.number().min(0.5).max(8).optional(),
+  cornerRadius: z2.number().min(0).max(64).optional(),
+  width: z2.number().int().min(40).max(800).optional(),
+  height: z2.number().int().min(30).max(600).optional(),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var connectionElementSchema = z2.object({
+  type: z2.literal("connection"),
+  from: z2.string().min(1).max(120),
+  to: z2.string().min(1).max(120),
+  style: z2.enum(["solid", "dashed", "dotted"]).default("solid"),
+  arrow: z2.enum(["end", "start", "both", "none"]).default("end"),
+  label: z2.string().min(1).max(200).optional(),
+  labelPosition: z2.enum(["start", "middle", "end"]).default("middle"),
+  color: colorHexSchema2.optional(),
+  width: z2.number().min(0.5).max(8).optional(),
+  arrowSize: z2.number().min(4).max(32).optional(),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
+var codeBlockStyleSchema = z2.object({
+  paddingVertical: z2.number().min(0).max(128).default(56),
+  paddingHorizontal: z2.number().min(0).max(128).default(56),
+  windowControls: z2.enum(["macos", "bw", "none"]).default("macos"),
+  dropShadow: z2.boolean().default(true),
+  dropShadowOffsetY: z2.number().min(0).max(100).default(20),
+  dropShadowBlurRadius: z2.number().min(0).max(200).default(68),
+  surroundColor: z2.string().optional(),
+  fontSize: z2.number().min(8).max(32).default(14),
+  lineHeightPercent: z2.number().min(100).max(200).default(143),
+  scale: z2.number().int().min(1).max(4).default(2)
+}).partial();
+var codeBlockElementSchema = z2.object({
+  type: z2.literal("code-block"),
+  id: z2.string().min(1).max(120),
+  code: z2.string().min(1),
+  language: z2.string().min(1).max(40),
+  theme: z2.string().min(1).max(80).optional(),
+  showLineNumbers: z2.boolean().default(false),
+  highlightLines: z2.array(z2.number().int().positive()).max(500).optional(),
+  startLine: z2.number().int().positive().default(1),
+  title: z2.string().min(1).max(200).optional(),
+  style: codeBlockStyleSchema.optional()
+}).strict();
+var terminalElementSchema = z2.object({
+  type: z2.literal("terminal"),
+  id: z2.string().min(1).max(120),
+  content: z2.string().min(1),
+  prompt: z2.string().min(1).max(24).optional(),
+  title: z2.string().min(1).max(200).optional(),
+  showPrompt: z2.boolean().default(true),
+  style: codeBlockStyleSchema.optional()
+}).strict();
+var textElementSchema = z2.object({
+  type: z2.literal("text"),
+  id: z2.string().min(1).max(120),
+  content: z2.string().min(1).max(4e3),
+  style: z2.enum(["heading", "subheading", "body", "caption", "code"]),
+  align: z2.enum(["left", "center", "right"]).default("left"),
+  color: colorHexSchema2.optional()
+}).strict();
+var shapeElementSchema = z2.object({
+  type: z2.literal("shape"),
+  id: z2.string().min(1).max(120),
+  shape: z2.enum(["rectangle", "rounded-rectangle", "circle", "ellipse", "line", "arrow"]),
+  fill: colorHexSchema2.optional(),
+  stroke: colorHexSchema2.optional(),
+  strokeWidth: z2.number().min(0).max(64).default(1)
+}).strict();
+var imageElementSchema = z2.object({
+  type: z2.literal("image"),
+  id: z2.string().min(1).max(120),
+  src: z2.string().min(1),
+  alt: z2.string().max(240).optional(),
+  fit: z2.enum(["contain", "cover", "fill", "none"]).default("contain"),
+  borderRadius: z2.number().min(0).default(0)
+}).strict();
+var elementSchema = z2.discriminatedUnion("type", [
+  cardElementSchema,
+  flowNodeElementSchema,
+  connectionElementSchema,
+  codeBlockElementSchema,
+  terminalElementSchema,
+  textElementSchema,
+  shapeElementSchema,
+  imageElementSchema
+]);
+var autoLayoutConfigSchema = z2.object({
+  mode: z2.literal("auto"),
+  algorithm: z2.enum(["layered", "stress", "force", "radial", "box"]).default("layered"),
+  direction: z2.enum(["TB", "BT", "LR", "RL"]).default("TB"),
+  nodeSpacing: z2.number().int().min(0).max(512).default(80),
+  rankSpacing: z2.number().int().min(0).max(512).default(120),
+  edgeRouting: z2.enum(["orthogonal", "polyline", "spline"]).default("polyline"),
+  aspectRatio: z2.number().min(0.5).max(3).optional()
+}).strict();
+var gridLayoutConfigSchema = z2.object({
+  mode: z2.literal("grid"),
+  columns: z2.number().int().min(1).max(12).default(3),
+  gap: z2.number().int().min(0).max(256).default(24),
+  cardMinHeight: z2.number().int().min(32).max(4096).optional(),
+  cardMaxHeight: z2.number().int().min(32).max(4096).optional(),
+  equalHeight: z2.boolean().default(false)
+}).strict();
+var stackLayoutConfigSchema = z2.object({
+  mode: z2.literal("stack"),
+  direction: z2.enum(["vertical", "horizontal"]).default("vertical"),
+  gap: z2.number().int().min(0).max(256).default(24),
+  alignment: z2.enum(["start", "center", "end", "stretch"]).default("stretch")
+}).strict();
+var manualPositionSchema = z2.object({
+  x: z2.number().int(),
+  y: z2.number().int(),
+  width: z2.number().int().positive().optional(),
+  height: z2.number().int().positive().optional()
+}).strict();
+var manualLayoutConfigSchema = z2.object({
+  mode: z2.literal("manual"),
+  positions: z2.record(z2.string().min(1), manualPositionSchema).default({})
+}).strict();
+var layoutConfigSchema = z2.discriminatedUnion("mode", [
+  autoLayoutConfigSchema,
+  gridLayoutConfigSchema,
+  stackLayoutConfigSchema,
+  manualLayoutConfigSchema
+]);
+var constraintsSchema = z2.object({
+  minContrastRatio: z2.number().min(3).max(21).default(4.5),
+  minFooterSpacing: z2.number().int().min(0).max(256).default(16),
+  checkOverlaps: z2.boolean().default(true),
+  maxTextTruncation: z2.number().min(0).max(1).default(0.1)
+}).strict();
+var headerSchema = z2.object({
+  eyebrow: z2.string().min(1).max(120).optional(),
+  title: z2.string().min(1).max(300),
+  subtitle: z2.string().min(1).max(400).optional(),
+  align: z2.enum(["left", "center", "right"]).default("center"),
+  titleLetterSpacing: z2.number().min(-2).max(20).default(0),
+  titleFontSize: z2.number().min(16).max(96).optional()
+}).strict();
+var footerSchema = z2.object({
+  text: z2.string().min(1).max(300),
+  tagline: z2.string().min(1).max(200).optional()
+}).strict();
+var decoratorSchema = z2.discriminatedUnion("type", [
+  z2.object({
+    type: z2.literal("rainbow-rule"),
+    y: z2.enum(["after-header", "before-footer", "custom"]).default("after-header"),
+    customY: z2.number().optional(),
+    thickness: z2.number().positive().max(64).default(2),
+    colors: z2.array(colorHexSchema2).min(2).optional(),
+    margin: z2.number().min(0).max(512).default(16)
+  }).strict(),
+  z2.object({
+    type: z2.literal("vignette"),
+    intensity: z2.number().min(0).max(1).default(0.3),
+    color: colorHexSchema2.default("#000000")
+  }).strict(),
+  z2.object({
+    type: z2.literal("gradient-overlay"),
+    gradient: gradientSchema,
+    opacity: z2.number().min(0).max(1).default(0.5)
+  }).strict()
+]);
+var canvasSchema = z2.object({
+  width: z2.number().int().min(320).max(4096).default(defaultCanvas.width),
+  height: z2.number().int().min(180).max(4096).default(defaultCanvas.height),
+  padding: z2.number().int().min(0).max(256).default(defaultCanvas.padding)
+}).strict();
+var themeInputSchema = z2.union([builtInThemeSchema, themeSchema]);
+var designSpecSchema = z2.object({
+  version: z2.literal(2).default(2),
+  canvas: canvasSchema.default(defaultCanvas),
+  theme: themeInputSchema.default("dark"),
+  background: z2.union([colorHexSchema2, gradientSchema]).optional(),
+  header: headerSchema.optional(),
+  elements: z2.array(elementSchema).default([]),
+  footer: footerSchema.optional(),
+  decorators: z2.array(decoratorSchema).default([]),
+  draw: z2.array(drawCommandSchema).max(200).default([]),
+  layout: layoutConfigSchema.optional(),
+  constraints: constraintsSchema.default(defaultConstraints)
+}).strict().transform((spec) => ({
+  ...spec,
+  layout: inferLayout(spec.elements, spec.layout)
+}));
+function deriveSafeFrame(spec) {
+  return {
+    x: spec.canvas.padding,
+    y: spec.canvas.padding,
+    width: spec.canvas.width - spec.canvas.padding * 2,
+    height: spec.canvas.height - spec.canvas.padding * 2
+  };
+}
+function parseDesignSpec(input) {
+  return designSpecSchema.parse(input);
+}
+
+// src/utils/color.ts
+function parseChannel(hex, offset) {
+  return Number.parseInt(hex.slice(offset, offset + 2), 16);
+}
+function parseHexColor(hexColor) {
+  const normalized = hexColor.startsWith("#") ? hexColor.slice(1) : hexColor;
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    throw new Error(`Unsupported color format: ${hexColor}`);
+  }
+  return {
+    r: parseChannel(normalized, 0),
+    g: parseChannel(normalized, 2),
+    b: parseChannel(normalized, 4)
+  };
+}
+function srgbToLinear(channel) {
+  const normalized = channel / 255;
+  if (normalized <= 0.03928) {
+    return normalized / 12.92;
+  }
+  return ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(hexColor) {
+  const rgb = parseHexColor(hexColor);
+  const r = srgbToLinear(rgb.r);
+  const g = srgbToLinear(rgb.g);
+  const b = srgbToLinear(rgb.b);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastRatio(foreground, background) {
+  const fg = relativeLuminance(foreground);
+  const bg = relativeLuminance(background);
+  const lighter = Math.max(fg, bg);
+  const darker = Math.min(fg, bg);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+// src/qa.ts
+function rectWithin(outer, inner) {
+  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+function intersects(a, b) {
+  return !(a.x + a.width <= b.x || b.x + b.width <= a.x || a.y + a.height <= b.y || b.y + b.height <= a.y);
+}
+function canvasRect(spec) {
+  return {
+    x: 0,
+    y: 0,
+    width: spec.canvas.width,
+    height: spec.canvas.height
+  };
+}
+function topLevelElements(elements) {
+  return elements.filter((element) => ["header", "card", "footer"].includes(element.kind));
+}
+function overlapCandidates(elements) {
+  return elements.filter(
+    (element) => [
+      "header",
+      "card",
+      "footer",
+      "flow-node",
+      "terminal",
+      "code-block",
+      "shape",
+      "image",
+      "draw"
+    ].includes(element.kind)
+  );
+}
+function loadMetadataFromString(raw) {
+  return JSON.parse(raw);
+}
+async function readMetadata(path) {
+  const raw = await readFile3(resolve(path), "utf8");
+  return loadMetadataFromString(raw);
+}
+async function runQa(options) {
+  const spec = parseDesignSpec(options.spec);
+  const imagePath = resolve(options.imagePath);
+  const expectedSafeFrame = deriveSafeFrame(spec);
+  const expectedCanvas = canvasRect(spec);
+  const imageMetadata = await sharp(imagePath).metadata();
+  const issues = [];
+  const expectedScale = options.metadata?.canvas.scale ?? resolveRenderScale(spec);
+  const expectedWidth = spec.canvas.width * expectedScale;
+  const expectedHeight = spec.canvas.height * expectedScale;
+  if (imageMetadata.width !== expectedWidth || imageMetadata.height !== expectedHeight) {
+    issues.push({
+      code: "DIMENSIONS_MISMATCH",
+      severity: "error",
+      message: `Image dimensions ${imageMetadata.width ?? "?"}x${imageMetadata.height ?? "?"} do not match expected ${expectedWidth}x${expectedHeight}.`,
+      details: {
+        expectedWidth,
+        expectedHeight,
+        actualWidth: imageMetadata.width ?? -1,
+        actualHeight: imageMetadata.height ?? -1
+      }
+    });
+  }
+  const layoutElements = options.metadata?.layout.elements;
+  if (!layoutElements || layoutElements.length === 0) {
+    issues.push({
+      code: "MISSING_LAYOUT",
+      severity: "warning",
+      message: "No layout metadata provided; overlap/clipping checks are partially skipped."
+    });
+  } else {
+    for (const element of layoutElements) {
+      if (element.truncated) {
+        issues.push({
+          code: "TEXT_TRUNCATED",
+          severity: "error",
+          message: `Text for ${element.id} was truncated during render.`,
+          elementId: element.id
+        });
+      }
+      const inCanvas = rectWithin(expectedCanvas, element.bounds);
+      const inSafe = rectWithin(expectedSafeFrame, element.bounds);
+      const requiresSafeFrameContainment = !element.allowOverlap && element.kind !== "draw";
+      if (element.kind === "draw" && !inCanvas) {
+        issues.push({
+          code: "DRAW_OUT_OF_BOUNDS",
+          severity: "warning",
+          message: `Draw command ${element.id} extends beyond canvas bounds.`,
+          elementId: element.id,
+          details: {
+            inCanvas,
+            x: element.bounds.x,
+            y: element.bounds.y,
+            width: element.bounds.width,
+            height: element.bounds.height
+          }
+        });
+      } else if (!inCanvas || requiresSafeFrameContainment && !inSafe) {
+        issues.push({
+          code: "ELEMENT_CLIPPED",
+          severity: "error",
+          message: `Element ${element.id} breaches ${!inCanvas ? "canvas bounds" : "safe frame"}.`,
+          elementId: element.id,
+          details: {
+            inCanvas,
+            inSafeFrame: inSafe,
+            x: element.bounds.x,
+            y: element.bounds.y,
+            width: element.bounds.width,
+            height: element.bounds.height
+          }
+        });
+      }
+      if (element.foregroundColor && element.backgroundColor) {
+        const ratio = contrastRatio(element.foregroundColor, element.backgroundColor);
+        if (ratio < spec.constraints.minContrastRatio) {
+          issues.push({
+            code: "LOW_CONTRAST",
+            severity: "error",
+            message: `Contrast ratio ${ratio.toFixed(2)} for ${element.id} is below threshold ${spec.constraints.minContrastRatio}.`,
+            elementId: element.id,
+            details: {
+              ratio: Number(ratio.toFixed(4)),
+              threshold: spec.constraints.minContrastRatio
+            }
+          });
+        }
+      }
+    }
+    if (spec.constraints.checkOverlaps) {
+      const blocks = overlapCandidates(layoutElements);
+      for (let i = 0; i < blocks.length; i += 1) {
+        for (let j = i + 1; j < blocks.length; j += 1) {
+          const first = blocks[i];
+          const second = blocks[j];
+          if (first.allowOverlap || second.allowOverlap) {
+            continue;
+          }
+          if (intersects(first.bounds, second.bounds)) {
+            const relaxed = first.kind === "draw" || second.kind === "draw";
+            issues.push({
+              code: "ELEMENT_OVERLAP",
+              severity: relaxed ? "warning" : "error",
+              message: `Elements ${first.id} and ${second.id} overlap.${relaxed ? " (Draw overlap is informational.)" : ""}`,
+              elementId: `${first.id}|${second.id}`
+            });
+          }
+        }
+      }
+    }
+    if (spec.footer) {
+      const footer = layoutElements.find((element) => element.id === "footer");
+      const nonFooter = topLevelElements(layoutElements).filter(
+        (element) => element.id !== "footer"
+      );
+      if (footer && nonFooter.length > 0) {
+        const highestBottom = Math.max(
+          ...nonFooter.map((element) => element.bounds.y + element.bounds.height)
+        );
+        const spacing = footer.bounds.y - highestBottom;
+        if (spacing < spec.constraints.minFooterSpacing) {
+          issues.push({
+            code: "FOOTER_SPACING",
+            severity: "error",
+            message: `Footer spacing ${spacing}px is below minimum ${spec.constraints.minFooterSpacing}px.`,
+            elementId: "footer",
+            details: {
+              spacing,
+              min: spec.constraints.minFooterSpacing
+            }
+          });
+        }
+      }
+    }
+    if (spec.header) {
+      const header = layoutElements.find((element) => element.id === "header");
+      if (header?.foregroundColor && header.backgroundColor) {
+        const ratio = contrastRatio(header.foregroundColor, header.backgroundColor);
+        if (ratio < spec.constraints.minContrastRatio) {
+          issues.push({
+            code: "LOW_CONTRAST",
+            severity: "error",
+            message: `Header contrast ratio ${ratio.toFixed(2)} is below threshold ${spec.constraints.minContrastRatio}.`,
+            elementId: "header"
+          });
+        }
+      }
+    }
+    if (!spec.footer && layoutElements.some((element) => element.id === "footer")) {
+      issues.push({
+        code: "FOOTER_SPACING",
+        severity: "warning",
+        message: "Metadata includes a footer element but the spec has no footer."
+      });
+    }
+  }
+  const footerSpacingPx = options.metadata?.layout.elements ? (() => {
+    const footer = options.metadata.layout.elements.find((element) => element.id === "footer");
+    if (!footer) {
+      return void 0;
+    }
+    const nonFooter = topLevelElements(options.metadata.layout.elements).filter(
+      (element) => element.id !== "footer"
+    );
+    if (nonFooter.length === 0) {
+      return void 0;
+    }
+    const highestBottom = Math.max(
+      ...nonFooter.map((element) => element.bounds.y + element.bounds.height)
+    );
+    return footer.bounds.y - highestBottom;
+  })() : void 0;
+  return {
+    pass: issues.every((issue) => issue.severity !== "error"),
+    checkedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    imagePath,
+    expected: {
+      width: expectedWidth,
+      height: expectedHeight,
+      scale: expectedScale,
+      minContrastRatio: spec.constraints.minContrastRatio,
+      minFooterSpacing: spec.constraints.minFooterSpacing
+    },
+    measured: {
+      ...imageMetadata.width !== void 0 ? { width: imageMetadata.width } : {},
+      ...imageMetadata.height !== void 0 ? { height: imageMetadata.height } : {},
+      ...footerSpacingPx !== void 0 ? { footerSpacingPx } : {}
+    },
+    issues
+  };
+}
+
+// src/renderer.ts
+import { mkdir, writeFile } from "fs/promises";
+import { basename as basename3, dirname as dirname2, extname, join, resolve as resolve3 } from "path";
+import { createCanvas } from "@napi-rs/canvas";
+
+// src/fonts.ts
+import { dirname, resolve as resolve2 } from "path";
+import { fileURLToPath } from "url";
+import { GlobalFonts } from "@napi-rs/canvas";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var fontsDir = resolve2(__dirname, "../fonts");
+var loaded = false;
+function register(filename, family) {
+  GlobalFonts.registerFromPath(resolve2(fontsDir, filename), family);
+}
+function loadFonts() {
+  if (loaded) {
+    return;
+  }
+  register("Inter-Regular.woff2", "Inter");
+  register("Inter-Medium.woff2", "Inter");
+  register("Inter-SemiBold.woff2", "Inter");
+  register("Inter-Bold.woff2", "Inter");
+  register("JetBrainsMono-Regular.woff2", "JetBrains Mono");
+  register("JetBrainsMono-Medium.woff2", "JetBrains Mono");
+  register("JetBrainsMono-Bold.woff2", "JetBrains Mono");
+  register("SpaceGrotesk-Medium.woff2", "Space Grotesk");
+  register("SpaceGrotesk-Bold.woff2", "Space Grotesk");
+  loaded = true;
+}
+
+// src/layout/elk.ts
+import ELK from "elkjs";
+
+// src/layout/estimates.ts
+function estimateElementHeight(element) {
+  switch (element.type) {
+    case "card":
+      return 220;
+    case "flow-node":
+      return element.shape === "circle" || element.shape === "diamond" ? 160 : 130;
+    case "code-block":
+      return 260;
+    case "terminal":
+      return 245;
+    case "text":
+      return element.style === "heading" ? 140 : element.style === "subheading" ? 110 : 90;
+    case "shape":
+      return 130;
+    case "image":
+      return 220;
+    case "connection":
+      return 0;
+  }
+}
+function estimateElementWidth(element) {
+  switch (element.type) {
+    case "card":
+      return 320;
+    case "flow-node":
+      return element.shape === "circle" || element.shape === "diamond" ? 160 : 220;
+    case "code-block":
+      return 420;
+    case "terminal":
+      return 420;
+    case "text":
+      return 360;
+    case "shape":
+      return 280;
+    case "image":
+      return 320;
+    case "connection":
+      return 0;
+  }
+}
+
+// src/layout/stack.ts
+function computeStackLayout(elements, config, safeFrame) {
+  const placeable = elements.filter((element) => element.type !== "connection");
+  const positions = /* @__PURE__ */ new Map();
+  if (placeable.length === 0) {
+    return { positions };
+  }
+  const gap = config.gap;
+  if (config.direction === "vertical") {
+    const estimatedHeights = placeable.map((element) => estimateElementHeight(element));
+    const totalEstimated2 = estimatedHeights.reduce((sum, value) => sum + value, 0);
+    const available2 = Math.max(0, safeFrame.height - gap * (placeable.length - 1));
+    const scale2 = totalEstimated2 > 0 ? Math.min(1, available2 / totalEstimated2) : 1;
+    let y = safeFrame.y;
+    for (const [index, element] of placeable.entries()) {
+      const stretched = config.alignment === "stretch";
+      const width = stretched ? safeFrame.width : Math.min(safeFrame.width, Math.floor(estimateElementWidth(element)));
+      const height = Math.max(48, Math.floor(estimatedHeights[index] * scale2));
+      let x2 = safeFrame.x;
+      if (!stretched) {
+        if (config.alignment === "center") {
+          x2 = safeFrame.x + Math.floor((safeFrame.width - width) / 2);
+        } else if (config.alignment === "end") {
+          x2 = safeFrame.x + safeFrame.width - width;
+        }
+      }
+      positions.set(element.id, { x: x2, y, width, height });
+      y += height + gap;
+    }
+    return { positions };
+  }
+  const estimatedWidths = placeable.map((element) => estimateElementWidth(element));
+  const totalEstimated = estimatedWidths.reduce((sum, value) => sum + value, 0);
+  const available = Math.max(0, safeFrame.width - gap * (placeable.length - 1));
+  const scale = totalEstimated > 0 ? Math.min(1, available / totalEstimated) : 1;
+  let x = safeFrame.x;
+  for (const [index, element] of placeable.entries()) {
+    const stretched = config.alignment === "stretch";
+    const height = stretched ? safeFrame.height : Math.min(safeFrame.height, Math.floor(estimateElementHeight(element)));
+    const width = Math.max(64, Math.floor(estimatedWidths[index] * scale));
+    let y = safeFrame.y;
+    if (!stretched) {
+      if (config.alignment === "center") {
+        y = safeFrame.y + Math.floor((safeFrame.height - height) / 2);
+      } else if (config.alignment === "end") {
+        y = safeFrame.y + safeFrame.height - height;
+      }
+    }
+    positions.set(element.id, { x, y, width, height });
+    x += width + gap;
+  }
+  return { positions };
+}
+
+// src/layout/elk.ts
+function estimateFlowNodeSize(node) {
+  if (node.width && node.height) {
+    return { width: node.width, height: node.height };
+  }
+  if (node.width) {
+    return {
+      width: node.width,
+      height: node.shape === "diamond" || node.shape === "circle" ? node.width : 60
+    };
+  }
+  if (node.height) {
+    return {
+      width: node.shape === "diamond" || node.shape === "circle" ? node.height : 160,
+      height: node.height
+    };
+  }
+  switch (node.shape) {
+    case "diamond":
+    case "circle":
+      return { width: 100, height: 100 };
+    case "pill":
+      return { width: 180, height: 56 };
+    case "cylinder":
+      return { width: 140, height: 92 };
+    case "parallelogram":
+      return { width: 180, height: 72 };
+    default:
+      return { width: 170, height: 64 };
+  }
+}
+function splitLayoutFrames(safeFrame, direction, hasAuxiliary) {
+  if (!hasAuxiliary) {
+    return { flowFrame: safeFrame };
+  }
+  const isHorizontal = direction === "LR" || direction === "RL";
+  const gap = Math.min(
+    32,
+    Math.max(16, Math.floor(Math.min(safeFrame.width, safeFrame.height) * 0.03))
+  );
+  if (isHorizontal) {
+    const flowWidth = Math.max(120, Math.floor(safeFrame.width * 0.7) - Math.floor(gap / 2));
+    const auxiliaryWidth = Math.max(120, safeFrame.width - flowWidth - gap);
+    return {
+      flowFrame: {
+        x: safeFrame.x,
+        y: safeFrame.y,
+        width: flowWidth,
+        height: safeFrame.height
+      },
+      auxiliaryFrame: {
+        x: safeFrame.x + flowWidth + gap,
+        y: safeFrame.y,
+        width: auxiliaryWidth,
+        height: safeFrame.height
+      }
+    };
+  }
+  const flowHeight = Math.max(120, Math.floor(safeFrame.height * 0.7) - Math.floor(gap / 2));
+  const auxiliaryHeight = Math.max(120, safeFrame.height - flowHeight - gap);
+  return {
+    flowFrame: {
+      x: safeFrame.x,
+      y: safeFrame.y,
+      width: safeFrame.width,
+      height: flowHeight
+    },
+    auxiliaryFrame: {
+      x: safeFrame.x,
+      y: safeFrame.y + flowHeight + gap,
+      width: safeFrame.width,
+      height: auxiliaryHeight
+    }
+  };
+}
+function computeBounds(nodes) {
+  const minX = Math.min(...nodes.map((node) => node.x));
+  const minY = Math.min(...nodes.map((node) => node.y));
+  const maxX = Math.max(...nodes.map((node) => node.x + node.width));
+  const maxY = Math.max(...nodes.map((node) => node.y + node.height));
+  return { minX, minY, maxX, maxY };
+}
+function computeTransform(bounds, targetFrame) {
+  const padding = 8;
+  const graphWidth = Math.max(1, bounds.maxX - bounds.minX);
+  const graphHeight = Math.max(1, bounds.maxY - bounds.minY);
+  const usableWidth = Math.max(1, targetFrame.width - padding * 2);
+  const usableHeight = Math.max(1, targetFrame.height - padding * 2);
+  const scale = Math.min(usableWidth / graphWidth, usableHeight / graphHeight, 1);
+  const offsetX = targetFrame.x + padding + (usableWidth - graphWidth * scale) / 2 - bounds.minX * scale;
+  const offsetY = targetFrame.y + padding + (usableHeight - graphHeight * scale) / 2 - bounds.minY * scale;
+  return { scale, offsetX, offsetY };
+}
+function transformPoint(point, transform) {
+  return {
+    x: Math.round(point.x * transform.scale + transform.offsetX),
+    y: Math.round(point.y * transform.scale + transform.offsetY)
+  };
+}
+function toLayoutRect(node, transform) {
+  return {
+    x: Math.round(node.x * transform.scale + transform.offsetX),
+    y: Math.round(node.y * transform.scale + transform.offsetY),
+    width: Math.max(36, Math.round(node.width * transform.scale)),
+    height: Math.max(28, Math.round(node.height * transform.scale))
+  };
+}
+function routeKey(connection) {
+  return `${connection.from}-${connection.to}`;
+}
+function edgeRoutingToElk(edgeRouting) {
+  switch (edgeRouting) {
+    case "orthogonal":
+      return "ORTHOGONAL";
+    case "spline":
+      return "SPLINES";
+    default:
+      return "POLYLINE";
+  }
+}
+function algorithmToElk(algorithm) {
+  switch (algorithm) {
+    case "stress":
+      return "stress";
+    case "force":
+      return "force";
+    case "radial":
+      return "radial";
+    case "box":
+      return "rectpacking";
+    default:
+      return "layered";
+  }
+}
+function directionToElk(direction) {
+  switch (direction) {
+    case "BT":
+      return "UP";
+    case "LR":
+      return "RIGHT";
+    case "RL":
+      return "LEFT";
+    default:
+      return "DOWN";
+  }
+}
+function fallbackForNoFlowNodes(nonFlow, safeFrame) {
+  const fallbackConfig = {
+    mode: "stack",
+    direction: "vertical",
+    gap: 24,
+    alignment: "stretch"
+  };
+  return computeStackLayout(nonFlow, fallbackConfig, safeFrame);
+}
+async function computeElkLayout(elements, config, safeFrame) {
+  const positions = /* @__PURE__ */ new Map();
+  const edgeRoutes = /* @__PURE__ */ new Map();
+  const flowNodes = elements.filter(
+    (element) => element.type === "flow-node"
+  );
+  const connections = elements.filter(
+    (element) => element.type === "connection"
+  );
+  const nonFlow = elements.filter(
+    (element) => element.type !== "flow-node" && element.type !== "connection"
+  );
+  if (flowNodes.length === 0) {
+    return fallbackForNoFlowNodes(nonFlow, safeFrame);
+  }
+  const { flowFrame, auxiliaryFrame } = splitLayoutFrames(
+    safeFrame,
+    config.direction,
+    nonFlow.length > 0
+  );
+  const flowNodeIds = new Set(flowNodes.map((node) => node.id));
+  const elkNodeSizes = /* @__PURE__ */ new Map();
+  for (const node of flowNodes) {
+    elkNodeSizes.set(node.id, estimateFlowNodeSize(node));
+  }
+  const edgeIdToRouteKey = /* @__PURE__ */ new Map();
+  const elkGraph = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": algorithmToElk(config.algorithm),
+      "elk.direction": directionToElk(config.direction),
+      "elk.spacing.nodeNode": String(config.nodeSpacing),
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(config.rankSpacing),
+      "elk.edgeRouting": edgeRoutingToElk(config.edgeRouting),
+      ...config.aspectRatio ? { "elk.aspectRatio": String(config.aspectRatio) } : {},
+      ...config.algorithm === "stress" ? { "elk.stress.desiredEdgeLength": String(config.rankSpacing + config.nodeSpacing) } : {}
+    },
+    children: flowNodes.map((node) => {
+      const size = elkNodeSizes.get(node.id) ?? { width: 160, height: 60 };
+      return {
+        id: node.id,
+        width: size.width,
+        height: size.height
+      };
+    }),
+    edges: connections.filter((connection) => flowNodeIds.has(connection.from) && flowNodeIds.has(connection.to)).map((connection, index) => {
+      const id = `edge-${index}-${connection.from}-${connection.to}`;
+      edgeIdToRouteKey.set(id, routeKey(connection));
+      return {
+        id,
+        sources: [connection.from],
+        targets: [connection.to]
+      };
+    })
+  };
+  const elk = new ELK.default();
+  const result = await elk.layout(elkGraph);
+  const laidOutNodes = (result.children ?? []).filter(
+    (node) => typeof node.id === "string" && typeof node.x === "number" && typeof node.y === "number" && typeof node.width === "number" && typeof node.height === "number"
+  );
+  if (laidOutNodes.length > 0) {
+    const bounds = computeBounds(laidOutNodes);
+    const transform = computeTransform(bounds, flowFrame);
+    for (const node of laidOutNodes) {
+      positions.set(node.id, toLayoutRect(node, transform));
+    }
+    for (const edge of result.edges ?? []) {
+      const route = edgeIdToRouteKey.get(edge.id ?? "");
+      if (!route) {
+        continue;
+      }
+      const points = [];
+      for (const section of edge.sections ?? []) {
+        if (section.startPoint) {
+          points.push(transformPoint(section.startPoint, transform));
+        }
+        for (const bend of section.bendPoints ?? []) {
+          points.push(transformPoint(bend, transform));
+        }
+        if (section.endPoint) {
+          points.push(transformPoint(section.endPoint, transform));
+        }
+      }
+      const deduped = points.filter((point, index, all) => {
+        if (index === 0) {
+          return true;
+        }
+        const prev = all[index - 1];
+        return prev.x !== point.x || prev.y !== point.y;
+      });
+      if (deduped.length >= 2) {
+        edgeRoutes.set(route, { points: deduped });
+      }
+    }
+  }
+  if (nonFlow.length > 0) {
+    const stackConfig = {
+      mode: "stack",
+      direction: config.direction === "LR" || config.direction === "RL" ? "vertical" : "horizontal",
+      gap: 20,
+      alignment: "stretch"
+    };
+    const supplemental = computeStackLayout(nonFlow, stackConfig, auxiliaryFrame ?? safeFrame);
+    for (const [id, rect] of supplemental.positions) {
+      positions.set(id, rect);
+    }
+  }
+  return {
+    positions,
+    edgeRoutes
+  };
+}
+
+// src/layout/grid.ts
+function computeGridLayout(elements, config, safeFrame) {
+  const placeable = elements.filter((element) => element.type !== "connection");
+  const positions = /* @__PURE__ */ new Map();
+  if (placeable.length === 0) {
+    return { positions };
+  }
+  const columns = Math.max(1, Math.min(config.columns, placeable.length));
+  const rows = Math.ceil(placeable.length / columns);
+  const gap = config.gap;
+  const availableWidth = Math.max(0, safeFrame.width - gap * (columns - 1));
+  const cellWidth = Math.floor(availableWidth / columns);
+  const rowElements = [];
+  for (let row = 0; row < rows; row += 1) {
+    const start = row * columns;
+    rowElements.push(placeable.slice(start, start + columns));
+  }
+  const equalRowHeight = Math.floor((safeFrame.height - gap * (rows - 1)) / rows);
+  const estimatedRowHeights = rowElements.map((row) => {
+    if (config.equalHeight) {
+      return equalRowHeight;
+    }
+    return Math.max(...row.map((element) => estimateElementHeight(element)));
+  });
+  const estimatedTotalHeight = estimatedRowHeights.reduce((sum, height) => sum + height, 0) + gap * (rows - 1);
+  const availableHeight = Math.max(0, safeFrame.height);
+  const scale = estimatedTotalHeight > 0 ? Math.min(1, availableHeight / estimatedTotalHeight) : 1;
+  const rowHeights = estimatedRowHeights.map((height) => Math.max(48, Math.floor(height * scale)));
+  let y = safeFrame.y;
+  let index = 0;
+  for (let row = 0; row < rows; row += 1) {
+    const rowHeight = rowHeights[row];
+    for (let col = 0; col < rowElements[row].length; col += 1) {
+      const element = placeable[index];
+      const x = safeFrame.x + col * (cellWidth + gap);
+      positions.set(element.id, {
+        x,
+        y,
+        width: cellWidth,
+        height: rowHeight
+      });
+      index += 1;
+    }
+    y += rowHeight + gap;
+  }
+  return { positions };
+}
+
+// src/layout/index.ts
+function defaultManualSize(total, safeFrame) {
+  return {
+    x: safeFrame.x,
+    y: safeFrame.y,
+    width: Math.floor(safeFrame.width / 2),
+    height: Math.floor(safeFrame.height / Math.max(1, total))
+  };
+}
+function computeManualLayout(elements, layout, safeFrame) {
+  const positions = /* @__PURE__ */ new Map();
+  const placeable = elements.filter((element) => element.type !== "connection");
+  if (layout.mode !== "manual") {
+    return { positions };
+  }
+  const fallbackGrid = computeGridLayout(
+    placeable,
+    { mode: "grid", columns: 3, gap: 24, equalHeight: false },
+    safeFrame
+  );
+  for (const element of placeable) {
+    const manual = layout.positions[element.id];
+    if (!manual) {
+      const fallbackRect = fallbackGrid.positions.get(element.id);
+      if (fallbackRect) {
+        positions.set(element.id, fallbackRect);
+      }
+      continue;
+    }
+    const fallback = defaultManualSize(placeable.length, safeFrame);
+    positions.set(element.id, {
+      x: manual.x,
+      y: manual.y,
+      width: manual.width ?? fallback.width,
+      height: manual.height ?? fallback.height
+    });
+  }
+  return { positions };
+}
+async function computeLayout(elements, layout, safeFrame) {
+  switch (layout.mode) {
+    case "auto":
+      return computeElkLayout(elements, layout, safeFrame);
+    case "grid":
+      return computeGridLayout(elements, layout, safeFrame);
+    case "stack":
+      return computeStackLayout(elements, layout, safeFrame);
+    case "manual":
+      return computeManualLayout(elements, layout, safeFrame);
+    default:
+      return computeGridLayout(
+        elements,
+        { mode: "grid", columns: 3, gap: 24, equalHeight: false },
+        safeFrame
+      );
+  }
+}
+
+// src/primitives/gradients.ts
+var DEFAULT_RAINBOW_COLORS = [
+  "#FF6B6B",
+  "#FFA94D",
+  "#FFD43B",
+  "#69DB7C",
+  "#4DABF7",
+  "#9775FA",
+  "#DA77F2"
+];
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function normalizeStops(stops) {
+  return [...stops].map((stop) => ({
+    offset: clamp01(stop.offset),
+    color: stop.color
+  })).sort((a, b) => a.offset - b.offset);
+}
+function addGradientStops(gradient, stops) {
+  for (const stop of normalizeStops(stops)) {
+    gradient.addColorStop(stop.offset, stop.color);
+  }
+}
+function createLinearRectGradient(ctx, rect, angleDegrees) {
+  const radians = angleDegrees * Math.PI / 180;
+  const dx = Math.sin(radians);
+  const dy = -Math.cos(radians);
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  const halfSpan = Math.max(1, Math.abs(dx) * (rect.width / 2) + Math.abs(dy) * (rect.height / 2));
+  return ctx.createLinearGradient(
+    cx - dx * halfSpan,
+    cy - dy * halfSpan,
+    cx + dx * halfSpan,
+    cy + dy * halfSpan
+  );
+}
+function roundedRectPath(ctx, x, y, width, height, radius) {
+  const safeRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
+  ctx.beginPath();
+  ctx.moveTo(x + safeRadius, y);
+  ctx.lineTo(x + width - safeRadius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + safeRadius);
+  ctx.lineTo(x + width, y + height - safeRadius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - safeRadius, y + height);
+  ctx.lineTo(x + safeRadius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - safeRadius);
+  ctx.lineTo(x, y + safeRadius);
+  ctx.quadraticCurveTo(x, y, x + safeRadius, y);
+  ctx.closePath();
+}
+function parseHexColor2(color) {
+  const normalized = color.startsWith("#") ? color.slice(1) : color;
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    throw new Error(`Expected #RRGGBB or #RRGGBBAA color, received ${color}`);
+  }
+  const parseChannel2 = (offset) => Number.parseInt(normalized.slice(offset, offset + 2), 16);
+  return {
+    r: parseChannel2(0),
+    g: parseChannel2(2),
+    b: parseChannel2(4),
+    a: normalized.length === 8 ? parseChannel2(6) / 255 : 1
+  };
+}
+function withAlpha(color, alpha) {
+  const parsed = parseHexColor2(color);
+  const effectiveAlpha = clamp01(parsed.a * alpha);
+  return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${effectiveAlpha})`;
+}
+function drawGradientRect(ctx, rect, gradient, borderRadius = 0) {
+  const fill = gradient.type === "linear" ? createLinearRectGradient(ctx, rect, gradient.angle ?? 180) : ctx.createRadialGradient(
+    rect.x + rect.width / 2,
+    rect.y + rect.height / 2,
+    0,
+    rect.x + rect.width / 2,
+    rect.y + rect.height / 2,
+    Math.max(rect.width, rect.height) / 2
+  );
+  addGradientStops(fill, gradient.stops);
+  ctx.save();
+  ctx.fillStyle = fill;
+  if (borderRadius > 0) {
+    roundedRectPath(ctx, rect.x, rect.y, rect.width, rect.height, borderRadius);
+    ctx.fill();
+  } else {
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+  }
+  ctx.restore();
+}
+function drawRainbowRule(ctx, x, y, width, thickness = 2, colors = [...DEFAULT_RAINBOW_COLORS], borderRadius = thickness / 2) {
+  if (width <= 0 || thickness <= 0) {
+    return;
+  }
+  const gradient = ctx.createLinearGradient(x, y, x + width, y);
+  const stops = colors.length >= 2 ? colors : [...DEFAULT_RAINBOW_COLORS];
+  for (const [index, color] of stops.entries()) {
+    gradient.addColorStop(index / (stops.length - 1), color);
+  }
+  const ruleTop = y - thickness / 2;
+  ctx.save();
+  roundedRectPath(ctx, x, ruleTop, width, thickness, borderRadius);
+  ctx.fillStyle = gradient;
+  ctx.fill();
+  ctx.restore();
+}
+function drawVignette(ctx, width, height, intensity = 0.3, color = "#000000") {
+  if (width <= 0 || height <= 0 || intensity <= 0) {
+    return;
+  }
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const outerRadius = Math.max(width, height) / 2;
+  const innerRadius = Math.min(width, height) * 0.2;
+  const vignette = ctx.createRadialGradient(
+    centerX,
+    centerY,
+    innerRadius,
+    centerX,
+    centerY,
+    outerRadius
+  );
+  vignette.addColorStop(0, withAlpha(color, 0));
+  vignette.addColorStop(0.6, withAlpha(color, 0));
+  vignette.addColorStop(1, withAlpha(color, clamp01(intensity)));
+  ctx.save();
+  ctx.fillStyle = vignette;
+  ctx.fillRect(0, 0, width, height);
+  ctx.restore();
+}
+
+// src/primitives/shapes.ts
+function roundRectPath(ctx, rect, radius) {
+  const r = Math.max(0, Math.min(radius, rect.width / 2, rect.height / 2));
+  const right = rect.x + rect.width;
+  const bottom = rect.y + rect.height;
+  ctx.beginPath();
+  ctx.moveTo(rect.x + r, rect.y);
+  ctx.lineTo(right - r, rect.y);
+  ctx.quadraticCurveTo(right, rect.y, right, rect.y + r);
+  ctx.lineTo(right, bottom - r);
+  ctx.quadraticCurveTo(right, bottom, right - r, bottom);
+  ctx.lineTo(rect.x + r, bottom);
+  ctx.quadraticCurveTo(rect.x, bottom, rect.x, bottom - r);
+  ctx.lineTo(rect.x, rect.y + r);
+  ctx.quadraticCurveTo(rect.x, rect.y, rect.x + r, rect.y);
+  ctx.closePath();
+}
+function fillAndStroke(ctx, fill, stroke) {
+  ctx.fillStyle = fill;
+  ctx.fill();
+  if (stroke) {
+    ctx.strokeStyle = stroke;
+    ctx.stroke();
+  }
+}
+function drawRoundedRect(ctx, rect, radius, fill, stroke) {
+  roundRectPath(ctx, rect, radius);
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawCircle(ctx, center2, radius, fill, stroke) {
+  ctx.beginPath();
+  ctx.arc(center2.x, center2.y, Math.max(0, radius), 0, Math.PI * 2);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawDiamond(ctx, bounds, fill, stroke) {
+  const cx = bounds.x + bounds.width / 2;
+  const cy = bounds.y + bounds.height / 2;
+  ctx.beginPath();
+  ctx.moveTo(cx, bounds.y);
+  ctx.lineTo(bounds.x + bounds.width, cy);
+  ctx.lineTo(cx, bounds.y + bounds.height);
+  ctx.lineTo(bounds.x, cy);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawPill(ctx, bounds, fill, stroke) {
+  drawRoundedRect(ctx, bounds, Math.min(bounds.width, bounds.height) / 2, fill, stroke);
+}
+function drawEllipse(ctx, bounds, fill, stroke) {
+  const cx = bounds.x + bounds.width / 2;
+  const cy = bounds.y + bounds.height / 2;
+  ctx.beginPath();
+  ctx.ellipse(
+    cx,
+    cy,
+    Math.max(0, bounds.width / 2),
+    Math.max(0, bounds.height / 2),
+    0,
+    0,
+    Math.PI * 2
+  );
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+function drawCylinder(ctx, bounds, fill, stroke) {
+  const rx = Math.max(2, bounds.width / 2);
+  const ry = Math.max(2, Math.min(bounds.height * 0.18, 16));
+  const cx = bounds.x + bounds.width / 2;
+  const topCy = bounds.y + ry;
+  const bottomCy = bounds.y + bounds.height - ry;
+  ctx.beginPath();
+  ctx.moveTo(bounds.x, topCy);
+  ctx.ellipse(cx, topCy, rx, ry, 0, Math.PI, 0, true);
+  ctx.lineTo(bounds.x + bounds.width, bottomCy);
+  ctx.ellipse(cx, bottomCy, rx, ry, 0, 0, Math.PI, false);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+  if (stroke) {
+    ctx.beginPath();
+    ctx.ellipse(cx, topCy, rx, ry, 0, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.strokeStyle = stroke;
+    ctx.stroke();
+  }
+}
+function drawParallelogram(ctx, bounds, fill, stroke, skew) {
+  const maxSkew = bounds.width * 0.45;
+  const skewX = Math.max(-maxSkew, Math.min(maxSkew, skew ?? bounds.width * 0.18));
+  ctx.beginPath();
+  ctx.moveTo(bounds.x + skewX, bounds.y);
+  ctx.lineTo(bounds.x + bounds.width, bounds.y);
+  ctx.lineTo(bounds.x + bounds.width - skewX, bounds.y + bounds.height);
+  ctx.lineTo(bounds.x, bounds.y + bounds.height);
+  ctx.closePath();
+  fillAndStroke(ctx, fill, stroke);
+}
+
+// src/primitives/text.ts
+var SUPPORTED_FONT_FAMILIES = /* @__PURE__ */ new Set(["Inter", "JetBrains Mono", "Space Grotesk"]);
+function resolveFont(requested, role) {
+  if (SUPPORTED_FONT_FAMILIES.has(requested)) {
+    return requested;
+  }
+  if (role === "mono" || /mono|code|terminal|console/iu.test(requested)) {
+    return "JetBrains Mono";
+  }
+  if (role === "heading" || /display|grotesk|headline/iu.test(requested)) {
+    return "Space Grotesk";
+  }
+  return "Inter";
+}
+function applyFont(ctx, options) {
+  ctx.font = `${options.weight} ${options.size}px ${options.family}`;
+}
+function wrapText(ctx, text, maxWidth, maxLines) {
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return { lines: [], truncated: false };
+  }
+  const words = trimmed.split(/\s+/u);
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const trial = current.length > 0 ? `${current} ${word}` : word;
+    if (ctx.measureText(trial).width <= maxWidth) {
+      current = trial;
+      continue;
+    }
+    if (current.length > 0) {
+      lines.push(current);
+      current = word;
+    } else {
+      lines.push(word);
+      current = "";
+    }
+    if (lines.length >= maxLines) {
+      break;
+    }
+  }
+  if (lines.length < maxLines && current.length > 0) {
+    lines.push(current);
+  }
+  const wasTruncated = lines.length >= maxLines && words.join(" ") !== lines.join(" ");
+  if (!wasTruncated) {
+    return { lines, truncated: false };
+  }
+  const lastIndex = lines.length - 1;
+  let truncatedLine = `${lines[lastIndex]}\u2026`;
+  while (truncatedLine.length > 1 && ctx.measureText(truncatedLine).width > maxWidth) {
+    truncatedLine = `${truncatedLine.slice(0, -2)}\u2026`;
+  }
+  lines[lastIndex] = truncatedLine;
+  return { lines, truncated: true };
+}
+function drawTextBlock(ctx, options) {
+  applyFont(ctx, { size: options.fontSize, weight: options.fontWeight, family: options.family });
+  const wrapped = wrapText(ctx, options.text, options.maxWidth, options.maxLines);
+  ctx.fillStyle = options.color;
+  for (const [index, line] of wrapped.lines.entries()) {
+    ctx.fillText(line, options.x, options.y + index * options.lineHeight);
+  }
+  return {
+    height: wrapped.lines.length * options.lineHeight,
+    truncated: wrapped.truncated
+  };
+}
+function drawTextLabel(ctx, text, position, options) {
+  applyFont(ctx, { size: options.fontSize, weight: 600, family: options.fontFamily });
+  const textWidth = Math.ceil(ctx.measureText(text).width);
+  const rect = {
+    x: Math.round(position.x - (textWidth + options.padding * 2) / 2),
+    y: Math.round(position.y - (options.fontSize + options.padding * 2) / 2),
+    width: textWidth + options.padding * 2,
+    height: options.fontSize + options.padding * 2
+  };
+  drawRoundedRect(ctx, rect, options.borderRadius, options.backgroundColor);
+  ctx.fillStyle = options.color;
+  ctx.fillText(text, rect.x + options.padding, rect.y + rect.height - options.padding);
+  return rect;
+}
+
+// src/renderers/card.ts
+var TONE_BADGE_COLORS = {
+  neutral: "#334B83",
+  accent: "#1E7A58",
+  success: "#166A45",
+  warning: "#7A5418",
+  error: "#8A2C2C"
+};
+function renderCard(ctx, card, rect, theme) {
+  const headingFont = resolveFont(theme.fonts.heading, "heading");
+  const bodyFont = resolveFont(theme.fonts.body, "body");
+  const monoFont = resolveFont(theme.fonts.mono, "mono");
+  ctx.lineWidth = 1;
+  drawRoundedRect(ctx, rect, 14, theme.surface, theme.border);
+  const elements = [];
+  const padding = 18;
+  const innerLeft = rect.x + padding;
+  const innerWidth = rect.width - padding * 2;
+  let cursorY = rect.y + padding;
+  if (card.badge) {
+    applyFont(ctx, { size: 13, weight: 700, family: monoFont });
+    const label = card.badge.toUpperCase();
+    const badgeWidth = Math.ceil(ctx.measureText(label).width + 18);
+    const badgeRect = {
+      x: innerLeft,
+      y: cursorY,
+      width: badgeWidth,
+      height: 24
+    };
+    const badgeBg = TONE_BADGE_COLORS[card.tone ?? "neutral"];
+    drawRoundedRect(ctx, badgeRect, 12, badgeBg);
+    ctx.fillStyle = "#FFFFFF";
+    ctx.fillText(label, badgeRect.x + 9, badgeRect.y + 16);
+    elements.push({
+      id: `card-${card.id}-badge`,
+      kind: "badge",
+      bounds: badgeRect,
+      foregroundColor: "#FFFFFF",
+      backgroundColor: badgeBg
+    });
+    cursorY += 34;
+  }
+  const titleBlock = drawTextBlock(ctx, {
+    x: innerLeft,
+    y: cursorY + 22,
+    maxWidth: innerWidth,
+    lineHeight: 26,
+    color: theme.text,
+    text: card.title,
+    maxLines: 2,
+    fontSize: 22,
+    fontWeight: 700,
+    family: headingFont
+  });
+  cursorY += titleBlock.height + 18;
+  const bodyBlock = drawTextBlock(ctx, {
+    x: innerLeft,
+    y: cursorY + 20,
+    maxWidth: innerWidth,
+    lineHeight: 22,
+    color: theme.textMuted,
+    text: card.body,
+    maxLines: 4,
+    fontSize: 18,
+    fontWeight: 500,
+    family: bodyFont
+  });
+  let cardTruncated = titleBlock.truncated || bodyBlock.truncated;
+  if (card.metric) {
+    applyFont(ctx, { size: 34, weight: 700, family: headingFont });
+    ctx.fillStyle = theme.accent;
+    ctx.fillText(card.metric, innerLeft, rect.y + rect.height - 20);
+    elements.push({
+      id: `card-${card.id}-metric`,
+      kind: "text",
+      bounds: {
+        x: innerLeft,
+        y: rect.y + rect.height - 54,
+        width: innerWidth,
+        height: 40
+      },
+      foregroundColor: theme.accent,
+      backgroundColor: theme.surface
+    });
+  }
+  if (cursorY + bodyBlock.height + 24 > rect.y + rect.height) {
+    cardTruncated = true;
+  }
+  elements.push({
+    id: `card-${card.id}`,
+    kind: "card",
+    bounds: rect,
+    foregroundColor: theme.text,
+    backgroundColor: theme.surface,
+    truncated: cardTruncated
+  });
+  elements.push({
+    id: `card-${card.id}-body`,
+    kind: "text",
+    bounds: {
+      x: innerLeft,
+      y: rect.y + 10,
+      width: innerWidth,
+      height: rect.height - 20
+    },
+    foregroundColor: theme.textMuted,
+    backgroundColor: theme.surface,
+    truncated: cardTruncated
+  });
+  return elements;
+}
+
+// src/primitives/window-chrome.ts
+var WINDOW_CHROME_HEIGHT = 34;
+var WINDOW_CHROME_LEFT_MARGIN = 14;
+var DOT_RADIUS = 6;
+var DOT_SPACING = 20;
+var DOT_STROKE_WIDTH = 0.5;
+var MACOS_DOTS = [
+  { fill: "#FF5F56", stroke: "#E0443E" },
+  { fill: "#FFBD2E", stroke: "#DEA123" },
+  { fill: "#27C93F", stroke: "#1AAB29" }
+];
+function drawMacosDots(ctx, x, y) {
+  for (const [index, dot] of MACOS_DOTS.entries()) {
+    ctx.beginPath();
+    ctx.arc(x + index * DOT_SPACING, y, DOT_RADIUS, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.fillStyle = dot.fill;
+    ctx.strokeStyle = dot.stroke;
+    ctx.lineWidth = DOT_STROKE_WIDTH;
+    ctx.fill();
+    ctx.stroke();
+  }
+}
+function drawBwDots(ctx, x, y) {
+  for (let index = 0; index < 3; index += 1) {
+    ctx.beginPath();
+    ctx.arc(x + index * DOT_SPACING, y, DOT_RADIUS, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.strokeStyle = "#878787";
+    ctx.lineWidth = DOT_STROKE_WIDTH;
+    ctx.stroke();
+  }
+}
+function resolveTitleColor(backgroundColor) {
+  try {
+    return relativeLuminance(backgroundColor) < 0.4 ? "#FFFFFF" : "#000000";
+  } catch {
+    return "#FFFFFF";
+  }
+}
+function drawWindowChrome(ctx, containerRect, options) {
+  if (options.style === "none") {
+    return { contentTop: containerRect.y, hasChrome: false };
+  }
+  const controlsCenterY = containerRect.y + WINDOW_CHROME_HEIGHT / 2;
+  const controlsStartX = containerRect.x + WINDOW_CHROME_LEFT_MARGIN + DOT_RADIUS;
+  if (options.style === "macos") {
+    drawMacosDots(ctx, controlsStartX, controlsCenterY);
+  } else {
+    drawBwDots(ctx, controlsStartX, controlsCenterY);
+  }
+  if (options.title) {
+    applyFont(ctx, { size: 14, weight: 500, family: options.fontFamily });
+    ctx.fillStyle = resolveTitleColor(options.backgroundColor);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(options.title, containerRect.x + containerRect.width / 2, controlsCenterY);
+    ctx.textAlign = "left";
+    ctx.textBaseline = "alphabetic";
+  }
+  return { contentTop: containerRect.y + WINDOW_CHROME_HEIGHT, hasChrome: true };
+}
+
+// src/syntax/highlighter.ts
+import { createHighlighter } from "shiki";
+var highlighterInstance = null;
+var loadedThemes = [
+  "github-dark-default",
+  "github-light-default",
+  "dracula",
+  "github-dark",
+  "one-dark-pro",
+  "nord"
+];
+var loadedLanguages = [
+  "typescript",
+  "javascript",
+  "python",
+  "bash",
+  "json",
+  "yaml",
+  "rust",
+  "go",
+  "html",
+  "css",
+  "markdown",
+  "sql",
+  "shell",
+  "plaintext"
+];
+var languageAliases = {
+  ts: "typescript",
+  js: "javascript",
+  py: "python",
+  sh: "bash",
+  shellscript: "shell",
+  yml: "yaml",
+  md: "markdown",
+  text: "plaintext",
+  txt: "plaintext"
+};
+async function initHighlighter() {
+  if (highlighterInstance) {
+    return highlighterInstance;
+  }
+  highlighterInstance = await createHighlighter({
+    themes: [...loadedThemes],
+    langs: [...loadedLanguages]
+  });
+  return highlighterInstance;
+}
+function isLoadedTheme(theme) {
+  return loadedThemes.includes(theme);
+}
+function isLoadedLanguage(language) {
+  return loadedLanguages.includes(language);
+}
+function resolveLanguage(language) {
+  const normalized = languageAliases[language.trim().toLowerCase()] ?? language.trim().toLowerCase();
+  if (!isLoadedLanguage(normalized)) {
+    throw new Error(`Unsupported language: ${language}`);
+  }
+  return normalized;
+}
+function resolveTheme2(themeName) {
+  if (!isLoadedTheme(themeName)) {
+    throw new Error(`Unsupported theme: ${themeName}`);
+  }
+  return themeName;
+}
+function normalizeTokenColor(token) {
+  return token.color ?? "#E2E8F0";
+}
+async function highlightCode(code, language, themeName) {
+  const highlighter = await initHighlighter();
+  const tokens = highlighter.codeToTokensBase(code, {
+    lang: resolveLanguage(language),
+    theme: resolveTheme2(themeName)
+  });
+  return tokens.map((line) => ({
+    tokens: line.map((token) => ({
+      text: token.content,
+      color: normalizeTokenColor(token)
+    }))
+  }));
+}
+
+// src/renderers/code.ts
+var fallbackKeywords = /* @__PURE__ */ new Set([
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "default",
+  "break",
+  "continue",
+  "class",
+  "extends",
+  "implements",
+  "interface",
+  "type",
+  "enum",
+  "import",
+  "export",
+  "from",
+  "as",
+  "async",
+  "await",
+  "try",
+  "catch",
+  "throw",
+  "new"
+]);
+var CONTAINER_RADIUS = 5;
+function tokenizeFallbackLine(line, theme) {
+  if (line.trim().length === 0) {
+    return [{ text: line, color: theme.code.text }];
+  }
+  const tokens = [];
+  let cursor = 0;
+  const push = (text, color) => {
+    if (text.length > 0) {
+      tokens.push({ text, color });
+    }
+  };
+  while (cursor < line.length) {
+    const rest = line.slice(cursor);
+    const whitespace = rest.match(/^\s+/u);
+    if (whitespace) {
+      push(whitespace[0], theme.code.text);
+      cursor += whitespace[0].length;
+      continue;
+    }
+    if (rest.startsWith("//")) {
+      push(rest, theme.code.comment);
+      break;
+    }
+    const stringMatch = rest.match(/^(['"`])(?:\\.|(?!\1).)*\1/u);
+    if (stringMatch) {
+      push(stringMatch[0], theme.code.string);
+      cursor += stringMatch[0].length;
+      continue;
+    }
+    const numberMatch = rest.match(/^\d+(?:\.\d+)?/u);
+    if (numberMatch) {
+      push(numberMatch[0], theme.code.number);
+      cursor += numberMatch[0].length;
+      continue;
+    }
+    const operatorMatch = rest.match(/^(===|!==|==|!=|<=|>=|=>|&&|\|\||[+\-*/%=<>!&|^~?:])/u);
+    if (operatorMatch) {
+      push(operatorMatch[0], theme.code.operator);
+      cursor += operatorMatch[0].length;
+      continue;
+    }
+    const punctuationMatch = rest.match(/^[()[\]{}.,;]/u);
+    if (punctuationMatch) {
+      push(punctuationMatch[0], theme.code.punctuation);
+      cursor += punctuationMatch[0].length;
+      continue;
+    }
+    const identifierMatch = rest.match(/^[A-Za-z_$][A-Za-z0-9_$]*/u);
+    if (identifierMatch) {
+      const identifier = identifierMatch[0];
+      const nextChar = rest[identifier.length];
+      if (fallbackKeywords.has(identifier)) {
+        push(identifier, theme.code.keyword);
+      } else if (nextChar === "(") {
+        push(identifier, theme.code.function);
+      } else {
+        push(identifier, theme.code.variable);
+      }
+      cursor += identifier.length;
+      continue;
+    }
+    push(rest[0], theme.code.text);
+    cursor += 1;
+  }
+  return tokens.length > 0 ? tokens : [{ text: line, color: theme.code.text }];
+}
+function fallbackHighlightedLines(code, theme) {
+  return code.split(/\r?\n/u).map((line) => ({
+    tokens: tokenizeFallbackLine(line, theme)
+  }));
+}
+function insetBounds(bounds, horizontal, vertical) {
+  return {
+    x: bounds.x + horizontal,
+    y: bounds.y + vertical,
+    width: Math.max(1, bounds.width - horizontal * 2),
+    height: Math.max(1, bounds.height - vertical * 2)
+  };
+}
+async function renderCodeBlock(ctx, block, bounds, theme) {
+  const bodyFont = resolveFont(theme.fonts.body, "body");
+  const monoFont = resolveFont(theme.fonts.mono, "mono");
+  const style = resolveCodeBlockStyle(block.style);
+  ctx.fillStyle = style.surroundColor;
+  ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+  const containerRect = insetBounds(bounds, style.paddingHorizontal, style.paddingVertical);
+  ctx.save();
+  if (style.dropShadow) {
+    ctx.shadowColor = "rgba(0, 0, 0, 0.55)";
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = style.dropShadowOffsetY;
+    ctx.shadowBlur = style.dropShadowBlurRadius;
+  }
+  drawRoundedRect(ctx, containerRect, CONTAINER_RADIUS, theme.code.background);
+  ctx.restore();
+  ctx.save();
+  roundRectPath(ctx, containerRect, CONTAINER_RADIUS);
+  ctx.clip();
+  const chrome = drawWindowChrome(ctx, containerRect, {
+    style: style.windowControls,
+    title: block.title ?? block.language,
+    fontFamily: bodyFont,
+    backgroundColor: theme.code.background
+  });
+  const contentTopPadding = chrome.hasChrome ? 48 : 18;
+  const contentRect = {
+    x: containerRect.x + 12,
+    y: containerRect.y + contentTopPadding,
+    width: Math.max(1, containerRect.width - 30),
+    height: Math.max(1, containerRect.height - contentTopPadding - 18)
+  };
+  const shikiTheme = block.theme ?? resolveShikiTheme(theme);
+  let lines;
+  try {
+    lines = await highlightCode(block.code, block.language, shikiTheme);
+  } catch {
+    lines = fallbackHighlightedLines(block.code, theme);
+  }
+  applyFont(ctx, { size: style.fontSize, weight: 500, family: monoFont });
+  const firstLine = block.startLine ?? 1;
+  const highlighted = new Set(block.highlightLines ?? []);
+  const lineNumberWidth = block.showLineNumbers ? Math.max(28, ctx.measureText(String(firstLine + Math.max(0, lines.length - 1))).width + 12) : 0;
+  const lineHeight = Math.max(1, Math.round(style.fontSize * style.lineHeightPercent / 100));
+  const firstBaselineY = contentRect.y + style.fontSize;
+  const contentBottom = contentRect.y + contentRect.height;
+  for (const [index, line] of lines.entries()) {
+    const lineNumber = firstLine + index;
+    const y = firstBaselineY + index * lineHeight;
+    if (y > contentBottom) {
+      break;
+    }
+    const lineTextWidth = line.tokens.reduce(
+      (total, token) => total + ctx.measureText(token.text).width,
+      0
+    );
+    if (highlighted.has(lineNumber)) {
+      ctx.fillStyle = "rgba(122, 162, 255, 0.18)";
+      ctx.fillRect(
+        contentRect.x - 4,
+        y - lineHeight + 4,
+        lineNumberWidth + lineTextWidth + 12,
+        lineHeight
+      );
+    }
+    let x = contentRect.x;
+    if (block.showLineNumbers) {
+      ctx.fillStyle = theme.code.comment;
+      ctx.fillText(String(lineNumber).padStart(2, " "), x, y);
+      x += lineNumberWidth;
+    }
+    for (const token of line.tokens) {
+      ctx.fillStyle = token.color || theme.code.text;
+      ctx.fillText(token.text, x, y);
+      x += ctx.measureText(token.text).width;
+    }
+  }
+  ctx.restore();
+  return [
+    {
+      id: `code-${block.id}`,
+      kind: "code-block",
+      bounds,
+      foregroundColor: theme.code.text,
+      backgroundColor: theme.code.background
+    },
+    {
+      id: `code-${block.id}-content`,
+      kind: "text",
+      bounds: contentRect,
+      foregroundColor: theme.code.text,
+      backgroundColor: theme.code.background
+    }
+  ];
+}
+
+// src/primitives/lines.ts
+function applyLineStyle(ctx, style) {
+  ctx.strokeStyle = style.color;
+  ctx.lineWidth = style.width;
+  ctx.setLineDash(style.dash ?? []);
+}
+function drawLine(ctx, from, to, style) {
+  applyLineStyle(ctx, style);
+  ctx.beginPath();
+  ctx.moveTo(from.x, from.y);
+  ctx.lineTo(to.x, to.y);
+  ctx.stroke();
+}
+function drawArrowhead(ctx, tip, angle, size, fill) {
+  const wing = Math.PI / 7;
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.beginPath();
+  ctx.moveTo(tip.x, tip.y);
+  ctx.lineTo(tip.x - size * Math.cos(angle - wing), tip.y - size * Math.sin(angle - wing));
+  ctx.lineTo(tip.x - size * Math.cos(angle + wing), tip.y - size * Math.sin(angle + wing));
+  ctx.closePath();
+  ctx.fillStyle = fill;
+  ctx.fill();
+  ctx.restore();
+}
+function drawArrow(ctx, from, to, arrow, style) {
+  drawLine(ctx, from, to, style);
+  if (arrow === "none") {
+    return;
+  }
+  const angle = Math.atan2(to.y - from.y, to.x - from.x);
+  if (arrow === "end" || arrow === "both") {
+    drawArrowhead(ctx, to, angle, style.headSize, style.color);
+  }
+  if (arrow === "start" || arrow === "both") {
+    drawArrowhead(ctx, from, angle + Math.PI, style.headSize, style.color);
+  }
+}
+function drawBezier(ctx, points, style) {
+  if (points.length < 2) {
+    return;
+  }
+  if (points.length === 2) {
+    drawLine(ctx, points[0], points[1], style);
+    return;
+  }
+  applyLineStyle(ctx, style);
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  if (points.length === 4) {
+    ctx.bezierCurveTo(points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y);
+    ctx.stroke();
+    return;
+  }
+  for (let i = 1; i < points.length - 2; i += 1) {
+    const xc = (points[i].x + points[i + 1].x) / 2;
+    const yc = (points[i].y + points[i + 1].y) / 2;
+    ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
+  }
+  const penultimate = points[points.length - 2];
+  const last = points[points.length - 1];
+  ctx.quadraticCurveTo(penultimate.x, penultimate.y, last.x, last.y);
+  ctx.stroke();
+}
+function drawOrthogonalPath(ctx, from, to, style) {
+  const midX = (from.x + to.x) / 2;
+  applyLineStyle(ctx, style);
+  ctx.beginPath();
+  ctx.moveTo(from.x, from.y);
+  ctx.lineTo(midX, from.y);
+  ctx.lineTo(midX, to.y);
+  ctx.lineTo(to.x, to.y);
+  ctx.stroke();
+}
+
+// src/renderers/connection.ts
+function center(rect) {
+  return {
+    x: rect.x + rect.width / 2,
+    y: rect.y + rect.height / 2
+  };
+}
+function edgeAnchor(rect, target) {
+  const c = center(rect);
+  const dx = target.x - c.x;
+  const dy = target.y - c.y;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    return {
+      x: dx >= 0 ? rect.x + rect.width : rect.x,
+      y: c.y
+    };
+  }
+  return {
+    x: c.x,
+    y: dy >= 0 ? rect.y + rect.height : rect.y
+  };
+}
+function dashFromStyle(style) {
+  switch (style) {
+    case "dashed":
+      return [10, 6];
+    case "dotted":
+      return [2, 6];
+    default:
+      return void 0;
+  }
+}
+function pointAlongPolyline(points, t) {
+  if (points.length <= 1) {
+    return points[0] ?? { x: 0, y: 0 };
+  }
+  const lengths = [];
+  let total = 0;
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const segment = Math.hypot(points[i + 1].x - points[i].x, points[i + 1].y - points[i].y);
+    lengths.push(segment);
+    total += segment;
+  }
+  if (total === 0) {
+    return points[0];
+  }
+  let target = total * t;
+  for (let i = 0; i < lengths.length; i += 1) {
+    if (target > lengths[i]) {
+      target -= lengths[i];
+      continue;
+    }
+    const ratio = lengths[i] === 0 ? 0 : target / lengths[i];
+    return {
+      x: points[i].x + (points[i + 1].x - points[i].x) * ratio,
+      y: points[i].y + (points[i + 1].y - points[i].y) * ratio
+    };
+  }
+  return points[points.length - 1];
+}
+function drawCubicInterpolatedPath(ctx, points, style) {
+  if (points.length < 2) {
+    return;
+  }
+  ctx.strokeStyle = style.color;
+  ctx.lineWidth = style.width;
+  ctx.setLineDash(style.dash ?? []);
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  if (points.length === 2) {
+    ctx.lineTo(points[1].x, points[1].y);
+    ctx.stroke();
+    return;
+  }
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const p0 = points[i - 1] ?? points[i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2] ?? p2;
+    const cp1 = {
+      x: p1.x + (p2.x - p0.x) / 6,
+      y: p1.y + (p2.y - p0.y) / 6
+    };
+    const cp2 = {
+      x: p2.x - (p3.x - p1.x) / 6,
+      y: p2.y - (p3.y - p1.y) / 6
+    };
+    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p2.x, p2.y);
+  }
+  ctx.stroke();
+}
+function polylineBounds(points) {
+  const minX = Math.min(...points.map((point) => point.x));
+  const maxX = Math.max(...points.map((point) => point.x));
+  const minY = Math.min(...points.map((point) => point.y));
+  const maxY = Math.max(...points.map((point) => point.y));
+  return {
+    x: minX,
+    y: minY,
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY)
+  };
+}
+function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute) {
+  const fromCenter = center(fromBounds);
+  const toCenter = center(toBounds);
+  const from = edgeAnchor(fromBounds, toCenter);
+  const to = edgeAnchor(toBounds, fromCenter);
+  const dash = dashFromStyle(conn.style);
+  const style = {
+    color: conn.color ?? theme.borderMuted,
+    width: conn.width ?? 2,
+    headSize: conn.arrowSize ?? 10,
+    ...dash ? { dash } : {}
+  };
+  const points = edgeRoute && edgeRoute.points.length >= 2 ? edgeRoute.points : [from, { x: (from.x + to.x) / 2, y: from.y }, { x: (from.x + to.x) / 2, y: to.y }, to];
+  const startSegment = points[1] ?? points[0];
+  const endStart = points[points.length - 2] ?? points[0];
+  const end = points[points.length - 1] ?? points[0];
+  let startAngle = Math.atan2(startSegment.y - points[0].y, startSegment.x - points[0].x) + Math.PI;
+  let endAngle = Math.atan2(end.y - endStart.y, end.x - endStart.x);
+  if (!Number.isFinite(startAngle)) {
+    startAngle = 0;
+  }
+  if (!Number.isFinite(endAngle)) {
+    endAngle = 0;
+  }
+  const t = conn.labelPosition === "start" ? 0.2 : conn.labelPosition === "end" ? 0.8 : 0.5;
+  const labelPoint = pointAlongPolyline(points, t);
+  ctx.save();
+  ctx.globalAlpha = conn.opacity;
+  if (edgeRoute && edgeRoute.points.length >= 2) {
+    drawCubicInterpolatedPath(ctx, points, style);
+  } else {
+    drawOrthogonalPath(ctx, points[0], points[points.length - 1], style);
+  }
+  if (conn.arrow === "start" || conn.arrow === "both") {
+    drawArrowhead(ctx, points[0], startAngle, style.headSize, style.color);
+  }
+  if (conn.arrow === "end" || conn.arrow === "both") {
+    drawArrowhead(ctx, end, endAngle, style.headSize, style.color);
+  }
+  ctx.restore();
+  const elements = [
+    {
+      id: `connection-${conn.from}-${conn.to}`,
+      kind: "connection",
+      bounds: polylineBounds(points),
+      foregroundColor: style.color
+    }
+  ];
+  if (conn.label) {
+    ctx.save();
+    ctx.globalAlpha = conn.opacity;
+    const labelRect = drawTextLabel(ctx, conn.label, labelPoint, {
+      fontSize: 12,
+      fontFamily: resolveFont(theme.fonts.body, "body"),
+      color: theme.text,
+      backgroundColor: theme.background,
+      padding: 6,
+      borderRadius: 8
+    });
+    ctx.restore();
+    elements.push({
+      id: `connection-${conn.from}-${conn.to}-label`,
+      kind: "text",
+      bounds: labelRect,
+      foregroundColor: theme.text,
+      backgroundColor: theme.background
+    });
+  }
+  return elements;
+}
+
+// src/utils/svg-path.ts
+var TOKEN_RE = /[A-Za-z]|[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/gu;
+function isCommandToken(token) {
+  return /^[A-Za-z]$/u.test(token);
+}
+function isNumberToken(token) {
+  return !isCommandToken(token);
+}
+function readNumber(tokens, cursor) {
+  const token = tokens[cursor.index];
+  if (token === void 0 || isCommandToken(token)) {
+    throw new Error(`Expected number at token index ${cursor.index}`);
+  }
+  cursor.index += 1;
+  const value = Number(token);
+  if (Number.isNaN(value)) {
+    throw new Error(`Invalid number token: ${token}`);
+  }
+  return value;
+}
+function parseSvgPath(pathData) {
+  const tokens = pathData.match(TOKEN_RE) ?? [];
+  if (tokens.length === 0) {
+    return [];
+  }
+  const operations = [];
+  const cursor = { index: 0 };
+  let command = "";
+  let currentX = 0;
+  let currentY = 0;
+  let subpathStartX = 0;
+  let subpathStartY = 0;
+  while (cursor.index < tokens.length) {
+    const token = tokens[cursor.index];
+    if (token === void 0) {
+      break;
+    }
+    if (isCommandToken(token)) {
+      command = token;
+      cursor.index += 1;
+    } else if (!command) {
+      throw new Error(`Path data must start with a command. Found: ${token}`);
+    }
+    switch (command) {
+      case "M":
+      case "m": {
+        let pairIndex = 0;
+        while (cursor.index < tokens.length && isNumberToken(tokens[cursor.index] ?? "")) {
+          const x = readNumber(tokens, cursor);
+          const y = readNumber(tokens, cursor);
+          const nextX = command === "m" ? currentX + x : x;
+          const nextY = command === "m" ? currentY + y : y;
+          if (pairIndex === 0) {
+            operations.push({ type: "M", x: nextX, y: nextY });
+            subpathStartX = nextX;
+            subpathStartY = nextY;
+          } else {
+            operations.push({ type: "L", x: nextX, y: nextY });
+          }
+          currentX = nextX;
+          currentY = nextY;
+          pairIndex += 1;
+        }
+        break;
+      }
+      case "L":
+      case "l": {
+        while (cursor.index < tokens.length && isNumberToken(tokens[cursor.index] ?? "")) {
+          const x = readNumber(tokens, cursor);
+          const y = readNumber(tokens, cursor);
+          const nextX = command === "l" ? currentX + x : x;
+          const nextY = command === "l" ? currentY + y : y;
+          operations.push({ type: "L", x: nextX, y: nextY });
+          currentX = nextX;
+          currentY = nextY;
+        }
+        break;
+      }
+      case "H":
+      case "h": {
+        while (cursor.index < tokens.length && isNumberToken(tokens[cursor.index] ?? "")) {
+          const x = readNumber(tokens, cursor);
+          const nextX = command === "h" ? currentX + x : x;
+          operations.push({ type: "L", x: nextX, y: currentY });
+          currentX = nextX;
+        }
+        break;
+      }
+      case "V":
+      case "v": {
+        while (cursor.index < tokens.length && isNumberToken(tokens[cursor.index] ?? "")) {
+          const y = readNumber(tokens, cursor);
+          const nextY = command === "v" ? currentY + y : y;
+          operations.push({ type: "L", x: currentX, y: nextY });
+          currentY = nextY;
+        }
+        break;
+      }
+      case "C":
+      case "c": {
+        while (cursor.index < tokens.length && isNumberToken(tokens[cursor.index] ?? "")) {
+          const cp1x = readNumber(tokens, cursor);
+          const cp1y = readNumber(tokens, cursor);
+          const cp2x = readNumber(tokens, cursor);
+          const cp2y = readNumber(tokens, cursor);
+          const x = readNumber(tokens, cursor);
+          const y = readNumber(tokens, cursor);
+          const next = command === "c" ? {
+            type: "C",
+            cp1x: currentX + cp1x,
+            cp1y: currentY + cp1y,
+            cp2x: currentX + cp2x,
+            cp2y: currentY + cp2y,
+            x: currentX + x,
+            y: currentY + y
+          } : { type: "C", cp1x, cp1y, cp2x, cp2y, x, y };
+          operations.push(next);
+          currentX = next.x;
+          currentY = next.y;
+        }
+        break;
+      }
+      case "Q":
+      case "q": {
+        while (cursor.index < tokens.length && isNumberToken(tokens[cursor.index] ?? "")) {
+          const cpx = readNumber(tokens, cursor);
+          const cpy = readNumber(tokens, cursor);
+          const x = readNumber(tokens, cursor);
+          const y = readNumber(tokens, cursor);
+          const next = command === "q" ? {
+            type: "Q",
+            cpx: currentX + cpx,
+            cpy: currentY + cpy,
+            x: currentX + x,
+            y: currentY + y
+          } : { type: "Q", cpx, cpy, x, y };
+          operations.push(next);
+          currentX = next.x;
+          currentY = next.y;
+        }
+        break;
+      }
+      case "Z":
+      case "z": {
+        operations.push({ type: "Z" });
+        currentX = subpathStartX;
+        currentY = subpathStartY;
+        break;
+      }
+      default:
+        throw new Error(`Unsupported SVG path command: ${command}`);
+    }
+  }
+  return operations;
+}
+
+// src/renderers/draw.ts
+function withOpacity(ctx, opacity, draw) {
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  draw();
+  ctx.restore();
+}
+function expandRect(rect, amount) {
+  if (amount <= 0) {
+    return rect;
+  }
+  return {
+    x: rect.x - amount,
+    y: rect.y - amount,
+    width: rect.width + amount * 2,
+    height: rect.height + amount * 2
+  };
+}
+function fromPoints(points) {
+  const minX = Math.min(...points.map((point) => point.x));
+  const minY = Math.min(...points.map((point) => point.y));
+  const maxX = Math.max(...points.map((point) => point.x));
+  const maxY = Math.max(...points.map((point) => point.y));
+  return {
+    x: minX,
+    y: minY,
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY)
+  };
+}
+function resolveDrawFont(theme, family) {
+  return resolveFont(theme.fonts[family], family);
+}
+function measureSpacedTextWidth(ctx, text, letterSpacing) {
+  const chars = [...text];
+  if (chars.length === 0) {
+    return 0;
+  }
+  let width = 0;
+  for (const char of chars) {
+    width += ctx.measureText(char).width;
+  }
+  if (chars.length > 1) {
+    width += letterSpacing * (chars.length - 1);
+  }
+  return width;
+}
+function drawTextWithLetterSpacing(ctx, text, x, y, align, letterSpacing) {
+  const chars = [...text];
+  if (chars.length === 0) {
+    return;
+  }
+  const totalWidth = measureSpacedTextWidth(ctx, text, letterSpacing);
+  let cursor = x;
+  if (align === "center") {
+    cursor = x - totalWidth / 2;
+  } else if (align === "right") {
+    cursor = x - totalWidth;
+  }
+  const originalAlign = ctx.textAlign;
+  ctx.textAlign = "left";
+  for (const [index, char] of chars.entries()) {
+    ctx.fillText(char, cursor, y);
+    const spacing = index < chars.length - 1 ? letterSpacing : 0;
+    cursor += ctx.measureText(char).width + spacing;
+  }
+  ctx.textAlign = originalAlign;
+}
+function measureTextBounds(ctx, options) {
+  const measuredWidth = options.letterSpacing > 0 ? measureSpacedTextWidth(ctx, options.text, options.letterSpacing) : ctx.measureText(options.text).width;
+  const width = options.maxWidth ? Math.min(measuredWidth, options.maxWidth) : measuredWidth;
+  const metrics = ctx.measureText(options.text);
+  const ascent = metrics.actualBoundingBoxAscent || 0;
+  const descent = metrics.actualBoundingBoxDescent || 0;
+  const height = Math.max(1, ascent + descent || Math.ceil((ascent || 0) * 1.35) || 1);
+  const leftX = options.align === "center" ? options.x - width / 2 : options.align === "right" ? options.x - width : options.x;
+  let topY = options.y - ascent;
+  if (options.baseline === "top") {
+    topY = options.y;
+  } else if (options.baseline === "middle") {
+    topY = options.y - height / 2;
+  } else if (options.baseline === "bottom") {
+    topY = options.y - height;
+  }
+  return {
+    x: leftX,
+    y: topY,
+    width: Math.max(1, width),
+    height
+  };
+}
+function angleBetween(from, to) {
+  return Math.atan2(to.y - from.y, to.x - from.x);
+}
+function pathBounds(operations) {
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  const include = (x, y) => {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  };
+  let currentX = 0;
+  let currentY = 0;
+  let subpathStartX = 0;
+  let subpathStartY = 0;
+  for (const operation of operations) {
+    switch (operation.type) {
+      case "M":
+        include(operation.x, operation.y);
+        currentX = operation.x;
+        currentY = operation.y;
+        subpathStartX = operation.x;
+        subpathStartY = operation.y;
+        break;
+      case "L":
+        include(operation.x, operation.y);
+        include(currentX, currentY);
+        currentX = operation.x;
+        currentY = operation.y;
+        break;
+      case "C":
+        include(currentX, currentY);
+        include(operation.cp1x, operation.cp1y);
+        include(operation.cp2x, operation.cp2y);
+        include(operation.x, operation.y);
+        currentX = operation.x;
+        currentY = operation.y;
+        break;
+      case "Q":
+        include(currentX, currentY);
+        include(operation.cpx, operation.cpy);
+        include(operation.x, operation.y);
+        currentX = operation.x;
+        currentY = operation.y;
+        break;
+      case "Z":
+        include(currentX, currentY);
+        include(subpathStartX, subpathStartY);
+        currentX = subpathStartX;
+        currentY = subpathStartY;
+        break;
+    }
+  }
+  if (!Number.isFinite(minX) || !Number.isFinite(minY)) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY)
+  };
+}
+function applySvgOperations(ctx, operations) {
+  ctx.beginPath();
+  for (const operation of operations) {
+    switch (operation.type) {
+      case "M":
+        ctx.moveTo(operation.x, operation.y);
+        break;
+      case "L":
+        ctx.lineTo(operation.x, operation.y);
+        break;
+      case "C":
+        ctx.bezierCurveTo(
+          operation.cp1x,
+          operation.cp1y,
+          operation.cp2x,
+          operation.cp2y,
+          operation.x,
+          operation.y
+        );
+        break;
+      case "Q":
+        ctx.quadraticCurveTo(operation.cpx, operation.cpy, operation.x, operation.y);
+        break;
+      case "Z":
+        ctx.closePath();
+        break;
+    }
+  }
+}
+function renderDrawCommands(ctx, commands, theme) {
+  const rendered = [];
+  for (const [index, command] of commands.entries()) {
+    const id = `draw-${index}`;
+    switch (command.type) {
+      case "rect": {
+        const rect = {
+          x: command.x,
+          y: command.y,
+          width: command.width,
+          height: command.height
+        };
+        withOpacity(ctx, command.opacity, () => {
+          roundRectPath(ctx, rect, command.radius);
+          if (command.fill) {
+            ctx.fillStyle = command.fill;
+            ctx.fill();
+          }
+          if (command.stroke && command.strokeWidth > 0) {
+            ctx.lineWidth = command.strokeWidth;
+            ctx.strokeStyle = command.stroke;
+            ctx.stroke();
+          }
+        });
+        const foregroundColor = command.stroke ?? command.fill;
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: expandRect(rect, command.strokeWidth / 2),
+          ...foregroundColor ? { foregroundColor } : {},
+          ...command.fill ? { backgroundColor: command.fill } : {}
+        });
+        break;
+      }
+      case "circle": {
+        withOpacity(ctx, command.opacity, () => {
+          ctx.beginPath();
+          ctx.arc(command.cx, command.cy, command.radius, 0, Math.PI * 2);
+          ctx.closePath();
+          if (command.fill) {
+            ctx.fillStyle = command.fill;
+            ctx.fill();
+          }
+          if (command.stroke && command.strokeWidth > 0) {
+            ctx.lineWidth = command.strokeWidth;
+            ctx.strokeStyle = command.stroke;
+            ctx.stroke();
+          }
+        });
+        const foregroundColor = command.stroke ?? command.fill;
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: expandRect(
+            {
+              x: command.cx - command.radius,
+              y: command.cy - command.radius,
+              width: command.radius * 2,
+              height: command.radius * 2
+            },
+            command.strokeWidth / 2
+          ),
+          ...foregroundColor ? { foregroundColor } : {},
+          ...command.fill ? { backgroundColor: command.fill } : {}
+        });
+        break;
+      }
+      case "text": {
+        const fontFamily = resolveDrawFont(theme, command.fontFamily);
+        withOpacity(ctx, command.opacity, () => {
+          applyFont(ctx, {
+            size: command.fontSize,
+            weight: command.fontWeight,
+            family: fontFamily
+          });
+          ctx.fillStyle = command.color;
+          ctx.textAlign = command.align;
+          ctx.textBaseline = command.baseline;
+          if (command.letterSpacing > 0) {
+            drawTextWithLetterSpacing(
+              ctx,
+              command.text,
+              command.x,
+              command.y,
+              command.align,
+              command.letterSpacing
+            );
+          } else if (command.maxWidth) {
+            ctx.fillText(command.text, command.x, command.y, command.maxWidth);
+          } else {
+            ctx.fillText(command.text, command.x, command.y);
+          }
+        });
+        applyFont(ctx, {
+          size: command.fontSize,
+          weight: command.fontWeight,
+          family: fontFamily
+        });
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: measureTextBounds(ctx, {
+            text: command.text,
+            x: command.x,
+            y: command.y,
+            align: command.align,
+            baseline: command.baseline,
+            letterSpacing: command.letterSpacing,
+            ...command.maxWidth ? { maxWidth: command.maxWidth } : {}
+          }),
+          foregroundColor: command.color,
+          backgroundColor: theme.background
+        });
+        break;
+      }
+      case "line": {
+        const from = { x: command.x1, y: command.y1 };
+        const to = { x: command.x2, y: command.y2 };
+        const lineAngle = angleBetween(from, to);
+        withOpacity(ctx, command.opacity, () => {
+          drawLine(ctx, from, to, {
+            color: command.color,
+            width: command.width,
+            ...command.dash ? { dash: command.dash } : {}
+          });
+          if (command.arrow === "end" || command.arrow === "both") {
+            drawArrowhead(ctx, to, lineAngle, command.arrowSize, command.color);
+          }
+          if (command.arrow === "start" || command.arrow === "both") {
+            drawArrowhead(ctx, from, lineAngle + Math.PI, command.arrowSize, command.color);
+          }
+        });
+        const arrowPadding = command.arrow === "none" ? 0 : command.arrowSize;
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: expandRect(fromPoints([from, to]), Math.max(command.width / 2, arrowPadding)),
+          foregroundColor: command.color
+        });
+        break;
+      }
+      case "bezier": {
+        const points = command.points;
+        withOpacity(ctx, command.opacity, () => {
+          drawBezier(ctx, points, {
+            color: command.color,
+            width: command.width,
+            ...command.dash ? { dash: command.dash } : {}
+          });
+          const startAngle = points.length > 1 ? angleBetween(points[0], points[1]) : 0;
+          const endAngle = points.length > 1 ? angleBetween(points[points.length - 2], points[points.length - 1]) : 0;
+          if (command.arrow === "end" || command.arrow === "both") {
+            drawArrowhead(
+              ctx,
+              points[points.length - 1],
+              endAngle,
+              command.arrowSize,
+              command.color
+            );
+          }
+          if (command.arrow === "start" || command.arrow === "both") {
+            drawArrowhead(ctx, points[0], startAngle + Math.PI, command.arrowSize, command.color);
+          }
+        });
+        const arrowPadding = command.arrow === "none" ? 0 : command.arrowSize;
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: expandRect(fromPoints(points), Math.max(command.width / 2, arrowPadding)),
+          foregroundColor: command.color
+        });
+        break;
+      }
+      case "path": {
+        const operations = parseSvgPath(command.d);
+        const baseBounds = pathBounds(operations);
+        withOpacity(ctx, command.opacity, () => {
+          applySvgOperations(ctx, operations);
+          if (command.fill) {
+            ctx.fillStyle = command.fill;
+            ctx.fill();
+          }
+          if (command.stroke && command.strokeWidth > 0) {
+            ctx.lineWidth = command.strokeWidth;
+            ctx.strokeStyle = command.stroke;
+            ctx.stroke();
+          }
+        });
+        const foregroundColor = command.stroke ?? command.fill;
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: expandRect(baseBounds, command.strokeWidth / 2),
+          ...foregroundColor ? { foregroundColor } : {},
+          ...command.fill ? { backgroundColor: command.fill } : {}
+        });
+        break;
+      }
+      case "badge": {
+        const fontFamily = resolveDrawFont(theme, command.fontFamily);
+        applyFont(ctx, {
+          size: command.fontSize,
+          weight: 600,
+          family: fontFamily
+        });
+        const metrics = ctx.measureText(command.text);
+        const textWidth = Math.ceil(metrics.width);
+        const textHeight = Math.ceil(
+          (metrics.actualBoundingBoxAscent || command.fontSize * 0.75) + (metrics.actualBoundingBoxDescent || command.fontSize * 0.25)
+        );
+        const rect = {
+          x: command.x,
+          y: command.y,
+          width: textWidth + command.paddingX * 2,
+          height: textHeight + command.paddingY * 2
+        };
+        withOpacity(ctx, command.opacity, () => {
+          roundRectPath(ctx, rect, command.borderRadius);
+          ctx.fillStyle = command.background;
+          ctx.fill();
+          applyFont(ctx, {
+            size: command.fontSize,
+            weight: 600,
+            family: fontFamily
+          });
+          ctx.fillStyle = command.color;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(command.text, rect.x + rect.width / 2, rect.y + rect.height / 2);
+        });
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: rect,
+          foregroundColor: command.color,
+          backgroundColor: command.background
+        });
+        break;
+      }
+      case "gradient-rect": {
+        const rect = {
+          x: command.x,
+          y: command.y,
+          width: command.width,
+          height: command.height
+        };
+        withOpacity(ctx, command.opacity, () => {
+          drawGradientRect(ctx, rect, command.gradient, command.radius);
+        });
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: rect,
+          backgroundColor: command.gradient.stops[0].color
+        });
+        break;
+      }
+    }
+  }
+  return rendered;
+}
+
+// src/renderers/flow-node.ts
+function renderFlowNode(ctx, node, bounds, theme) {
+  const fillColor = node.color ?? theme.surfaceElevated;
+  const borderColor = node.borderColor ?? theme.border;
+  const borderWidth = node.borderWidth ?? 2;
+  const cornerRadius = node.cornerRadius ?? 16;
+  const labelColor = node.labelColor ?? theme.text;
+  const sublabelColor = node.sublabelColor ?? theme.textMuted;
+  const labelFontSize = node.labelFontSize ?? 20;
+  ctx.save();
+  ctx.globalAlpha = node.opacity;
+  ctx.lineWidth = borderWidth;
+  switch (node.shape) {
+    case "box":
+      drawRoundedRect(ctx, bounds, 0, fillColor, borderColor);
+      break;
+    case "rounded-box":
+      drawRoundedRect(ctx, bounds, cornerRadius, fillColor, borderColor);
+      break;
+    case "diamond":
+      drawDiamond(ctx, bounds, fillColor, borderColor);
+      break;
+    case "circle": {
+      const radius = Math.min(bounds.width, bounds.height) / 2;
+      drawCircle(
+        ctx,
+        { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
+        radius,
+        fillColor,
+        borderColor
+      );
+      break;
+    }
+    case "pill":
+      drawPill(ctx, bounds, fillColor, borderColor);
+      break;
+    case "cylinder":
+      drawCylinder(ctx, bounds, fillColor, borderColor);
+      break;
+    case "parallelogram":
+      drawParallelogram(ctx, bounds, fillColor, borderColor);
+      break;
+  }
+  const headingFont = resolveFont(theme.fonts.heading, "heading");
+  const bodyFont = resolveFont(theme.fonts.body, "body");
+  const centerX = bounds.x + bounds.width / 2;
+  const centerY = bounds.y + bounds.height / 2;
+  const labelY = node.sublabel ? centerY - Math.max(4, labelFontSize * 0.2) : centerY + labelFontSize * 0.3;
+  ctx.textAlign = "center";
+  applyFont(ctx, { size: labelFontSize, weight: 700, family: headingFont });
+  ctx.fillStyle = labelColor;
+  ctx.fillText(node.label, centerX, labelY);
+  let textBoundsY = bounds.y + bounds.height / 2 - 18;
+  let textBoundsHeight = 36;
+  if (node.sublabel) {
+    const sublabelFontSize = Math.max(12, Math.round(labelFontSize * 0.68));
+    applyFont(ctx, { size: sublabelFontSize, weight: 500, family: bodyFont });
+    ctx.fillStyle = sublabelColor;
+    ctx.fillText(node.sublabel, centerX, labelY + Math.max(20, sublabelFontSize + 6));
+    textBoundsY = bounds.y + bounds.height / 2 - 24;
+    textBoundsHeight = 56;
+  }
+  ctx.restore();
+  return [
+    {
+      id: `flow-node-${node.id}`,
+      kind: "flow-node",
+      bounds,
+      foregroundColor: labelColor,
+      backgroundColor: fillColor
+    },
+    {
+      id: `flow-node-${node.id}-label`,
+      kind: "text",
+      bounds: {
+        x: bounds.x + 8,
+        y: textBoundsY,
+        width: bounds.width - 16,
+        height: textBoundsHeight
+      },
+      foregroundColor: labelColor,
+      backgroundColor: fillColor
+    }
+  ];
+}
+
+// src/renderers/image.ts
+import { loadImage } from "@napi-rs/canvas";
+function roundedRectPath2(ctx, bounds, radius) {
+  const r = Math.max(0, Math.min(radius, Math.min(bounds.width, bounds.height) / 2));
+  ctx.beginPath();
+  ctx.moveTo(bounds.x + r, bounds.y);
+  ctx.lineTo(bounds.x + bounds.width - r, bounds.y);
+  ctx.quadraticCurveTo(bounds.x + bounds.width, bounds.y, bounds.x + bounds.width, bounds.y + r);
+  ctx.lineTo(bounds.x + bounds.width, bounds.y + bounds.height - r);
+  ctx.quadraticCurveTo(
+    bounds.x + bounds.width,
+    bounds.y + bounds.height,
+    bounds.x + bounds.width - r,
+    bounds.y + bounds.height
+  );
+  ctx.lineTo(bounds.x + r, bounds.y + bounds.height);
+  ctx.quadraticCurveTo(bounds.x, bounds.y + bounds.height, bounds.x, bounds.y + bounds.height - r);
+  ctx.lineTo(bounds.x, bounds.y + r);
+  ctx.quadraticCurveTo(bounds.x, bounds.y, bounds.x + r, bounds.y);
+  ctx.closePath();
+}
+function drawImagePlaceholder(ctx, image, bounds, theme) {
+  ctx.fillStyle = theme.surfaceMuted;
+  roundedRectPath2(ctx, bounds, image.borderRadius);
+  ctx.fill();
+  ctx.strokeStyle = theme.border;
+  ctx.lineWidth = 2;
+  roundedRectPath2(ctx, bounds, image.borderRadius);
+  ctx.stroke();
+  const label = image.alt ?? "load image";
+  const fontFamily = resolveFont(theme.fonts.body, "body");
+  applyFont(ctx, { size: 16, weight: 600, family: fontFamily });
+  ctx.fillStyle = theme.textMuted;
+  ctx.textAlign = "center";
+  ctx.fillText(label, bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+  ctx.textAlign = "left";
+  return [
+    {
+      id: `image-${image.id}`,
+      kind: "image",
+      bounds,
+      foregroundColor: theme.textMuted,
+      backgroundColor: theme.surfaceMuted
+    }
+  ];
+}
+async function renderImageElement(ctx, image, bounds, theme) {
+  try {
+    const loadedImage = await loadImage(image.src);
+    let drawWidth = loadedImage.width;
+    let drawHeight = loadedImage.height;
+    if (image.fit !== "fill") {
+      const widthRatio = bounds.width / loadedImage.width;
+      const heightRatio = bounds.height / loadedImage.height;
+      let scale = 1;
+      if (image.fit === "contain") {
+        scale = Math.min(widthRatio, heightRatio);
+      } else if (image.fit === "cover") {
+        scale = Math.max(widthRatio, heightRatio);
+      }
+      drawWidth = loadedImage.width * scale;
+      drawHeight = loadedImage.height * scale;
+    } else {
+      drawWidth = bounds.width;
+      drawHeight = bounds.height;
+    }
+    const drawX = bounds.x + (bounds.width - drawWidth) / 2;
+    const drawY = bounds.y + (bounds.height - drawHeight) / 2;
+    ctx.save();
+    roundedRectPath2(ctx, bounds, image.borderRadius);
+    ctx.clip();
+    ctx.drawImage(loadedImage, drawX, drawY, drawWidth, drawHeight);
+    ctx.restore();
+    return [
+      {
+        id: `image-${image.id}`,
+        kind: "image",
+        bounds
+      }
+    ];
+  } catch {
+    return drawImagePlaceholder(ctx, image, bounds, theme);
+  }
+}
+
+// src/renderers/shape.ts
+function renderShapeElement(ctx, shape, bounds, theme) {
+  const fill = shape.fill ?? theme.surfaceMuted;
+  const stroke = shape.stroke ?? theme.border;
+  ctx.lineWidth = shape.strokeWidth;
+  switch (shape.shape) {
+    case "rectangle":
+      drawRoundedRect(ctx, bounds, 0, fill, stroke);
+      break;
+    case "rounded-rectangle":
+      drawRoundedRect(ctx, bounds, 14, fill, stroke);
+      break;
+    case "circle": {
+      const radius = Math.min(bounds.width, bounds.height) / 2;
+      drawCircle(
+        ctx,
+        { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
+        radius,
+        fill,
+        stroke
+      );
+      break;
+    }
+    case "ellipse":
+      drawEllipse(ctx, bounds, fill, stroke);
+      break;
+    case "line":
+      drawLine(
+        ctx,
+        { x: bounds.x, y: bounds.y + bounds.height / 2 },
+        { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+        { color: stroke, width: shape.strokeWidth }
+      );
+      break;
+    case "arrow":
+      drawArrow(
+        ctx,
+        { x: bounds.x, y: bounds.y + bounds.height / 2 },
+        { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+        "end",
+        { color: stroke, width: shape.strokeWidth, headSize: Math.max(8, shape.strokeWidth * 3) }
+      );
+      break;
+  }
+  return [
+    {
+      id: `shape-${shape.id}`,
+      kind: "shape",
+      bounds,
+      foregroundColor: stroke,
+      backgroundColor: fill
+    }
+  ];
+}
+
+// src/renderers/terminal.ts
+var CONTAINER_RADIUS2 = 5;
+function insetBounds2(bounds, horizontal, vertical) {
+  return {
+    x: bounds.x + horizontal,
+    y: bounds.y + vertical,
+    width: Math.max(1, bounds.width - horizontal * 2),
+    height: Math.max(1, bounds.height - vertical * 2)
+  };
+}
+function renderTerminal(ctx, terminal, bounds, theme) {
+  const bodyFont = resolveFont(theme.fonts.body, "body");
+  const monoFont = resolveFont(theme.fonts.mono, "mono");
+  const style = resolveCodeBlockStyle(terminal.style);
+  ctx.fillStyle = style.surroundColor;
+  ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+  const containerRect = insetBounds2(bounds, style.paddingHorizontal, style.paddingVertical);
+  ctx.save();
+  if (style.dropShadow) {
+    ctx.shadowColor = "rgba(0, 0, 0, 0.55)";
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = style.dropShadowOffsetY;
+    ctx.shadowBlur = style.dropShadowBlurRadius;
+  }
+  drawRoundedRect(ctx, containerRect, CONTAINER_RADIUS2, theme.code.background);
+  ctx.restore();
+  ctx.save();
+  roundRectPath(ctx, containerRect, CONTAINER_RADIUS2);
+  ctx.clip();
+  const chrome = drawWindowChrome(ctx, containerRect, {
+    style: style.windowControls,
+    title: terminal.title ?? "Terminal",
+    fontFamily: bodyFont,
+    backgroundColor: theme.code.background
+  });
+  const contentTopPadding = chrome.hasChrome ? 48 : 18;
+  const contentRect = {
+    x: containerRect.x + 12,
+    y: containerRect.y + contentTopPadding,
+    width: Math.max(1, containerRect.width - 30),
+    height: Math.max(1, containerRect.height - contentTopPadding - 18)
+  };
+  const prompt = terminal.prompt ?? "$";
+  const lines = terminal.content.split(/\r?\n/u).map((line) => {
+    if (!terminal.showPrompt || line.trim().length === 0) {
+      return line;
+    }
+    return `${prompt} ${line}`;
+  });
+  applyFont(ctx, { size: style.fontSize, weight: 500, family: monoFont });
+  ctx.fillStyle = theme.code.text;
+  const lineHeight = Math.max(1, Math.round(style.fontSize * style.lineHeightPercent / 100));
+  const firstBaselineY = contentRect.y + style.fontSize;
+  const contentBottom = contentRect.y + contentRect.height;
+  for (const [index, line] of lines.entries()) {
+    const y = firstBaselineY + index * lineHeight;
+    if (y > contentBottom) {
+      break;
+    }
+    ctx.fillText(line, contentRect.x, y);
+  }
+  ctx.restore();
+  return [
+    {
+      id: `terminal-${terminal.id}`,
+      kind: "terminal",
+      bounds,
+      foregroundColor: theme.code.text,
+      backgroundColor: theme.code.background
+    },
+    {
+      id: `terminal-${terminal.id}-content`,
+      kind: "text",
+      bounds: contentRect,
+      foregroundColor: theme.code.text,
+      backgroundColor: theme.code.background
+    }
+  ];
+}
+
+// src/renderers/text.ts
+var TEXT_STYLE_MAP = {
+  heading: { fontSize: 42, weight: 700, lineHeight: 48, familyRole: "heading" },
+  subheading: { fontSize: 28, weight: 600, lineHeight: 34, familyRole: "body" },
+  body: { fontSize: 20, weight: 500, lineHeight: 26, familyRole: "body" },
+  caption: { fontSize: 14, weight: 500, lineHeight: 18, familyRole: "body" },
+  code: { fontSize: 16, weight: 500, lineHeight: 22, familyRole: "mono" }
+};
+function renderTextElement(ctx, textEl, bounds, theme) {
+  const style = TEXT_STYLE_MAP[textEl.style];
+  const familyName = resolveFont(theme.fonts[style.familyRole], style.familyRole);
+  const maxLines = Math.max(1, Math.floor(bounds.height / style.lineHeight));
+  applyFont(ctx, { size: style.fontSize, weight: style.weight, family: familyName });
+  const wrapped = wrapText(ctx, textEl.content, bounds.width, maxLines);
+  ctx.fillStyle = textEl.color ?? theme.text;
+  ctx.textAlign = textEl.align;
+  const x = textEl.align === "center" ? bounds.x + bounds.width / 2 : textEl.align === "right" ? bounds.x + bounds.width : bounds.x;
+  for (const [index, line] of wrapped.lines.entries()) {
+    ctx.fillText(line, x, bounds.y + style.fontSize + index * style.lineHeight);
+  }
+  ctx.textAlign = "left";
+  return [
+    {
+      id: `text-${textEl.id}`,
+      kind: "text",
+      bounds,
+      foregroundColor: textEl.color ?? theme.text,
+      truncated: wrapped.truncated
+    }
+  ];
+}
+
+// src/utils/hash.ts
+import { createHash } from "crypto";
+function canonicalize(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => canonicalize(item));
+  }
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value).sort(([a], [b]) => a.localeCompare(b)).map(([key, nested]) => [key, canonicalize(nested)]);
+    return Object.fromEntries(entries);
+  }
+  return value;
+}
+function canonicalJson(value) {
+  return JSON.stringify(canonicalize(value));
+}
+function sha256Hex(value) {
+  return createHash("sha256").update(value).digest("hex");
+}
+function shortHash(hex, length = 12) {
+  return hex.slice(0, length);
+}
+
+// src/renderer.ts
+var DEFAULT_GENERATOR_VERSION = "0.2.0";
+function buildArtifactBaseName(specHash, generatorVersion) {
+  const safeVersion = generatorVersion.replace(/[^0-9A-Za-z_.-]/gu, "_");
+  return `design-v2-g${safeVersion}-s${shortHash(specHash)}`;
+}
+function computeSpecHash(spec) {
+  return sha256Hex(canonicalJson(spec));
+}
+function resolveAlignedX(rect, align) {
+  if (align === "center") {
+    return rect.x + rect.width / 2;
+  }
+  if (align === "right") {
+    return rect.x + rect.width;
+  }
+  return rect.x;
+}
+function measureTextWithLetterSpacing(ctx, text, letterSpacing) {
+  if (letterSpacing <= 0) {
+    return ctx.measureText(text).width;
+  }
+  const glyphs = Array.from(text);
+  if (glyphs.length === 0) {
+    return 0;
+  }
+  const base = glyphs.reduce((sum, glyph) => sum + ctx.measureText(glyph).width, 0);
+  return base + letterSpacing * (glyphs.length - 1);
+}
+function wrapTextWithLetterSpacing(ctx, text, maxWidth, maxLines, letterSpacing) {
+  if (letterSpacing <= 0) {
+    return wrapText(ctx, text, maxWidth, maxLines);
+  }
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return { lines: [], truncated: false };
+  }
+  const words = trimmed.split(/\s+/u);
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const trial = current.length > 0 ? `${current} ${word}` : word;
+    if (measureTextWithLetterSpacing(ctx, trial, letterSpacing) <= maxWidth) {
+      current = trial;
+      continue;
+    }
+    if (current.length > 0) {
+      lines.push(current);
+      current = word;
+    } else {
+      lines.push(word);
+      current = "";
+    }
+    if (lines.length >= maxLines) {
+      break;
+    }
+  }
+  if (lines.length < maxLines && current.length > 0) {
+    lines.push(current);
+  }
+  const wasTruncated = lines.length >= maxLines && words.join(" ") !== lines.join(" ");
+  if (!wasTruncated) {
+    return { lines, truncated: false };
+  }
+  const lastIndex = lines.length - 1;
+  let truncatedLine = `${lines[lastIndex]}\u2026`;
+  while (truncatedLine.length > 1 && measureTextWithLetterSpacing(ctx, truncatedLine, letterSpacing) > maxWidth) {
+    truncatedLine = `${truncatedLine.slice(0, -2)}\u2026`;
+  }
+  lines[lastIndex] = truncatedLine;
+  return { lines, truncated: true };
+}
+function drawAlignedTextLine(ctx, text, x, y, align, letterSpacing) {
+  if (letterSpacing <= 0) {
+    ctx.textAlign = align;
+    ctx.fillText(text, x, y);
+    return;
+  }
+  const glyphs = Array.from(text);
+  const lineWidth = measureTextWithLetterSpacing(ctx, text, letterSpacing);
+  let cursorX = x;
+  if (align === "center") {
+    cursorX = x - lineWidth / 2;
+  } else if (align === "right") {
+    cursorX = x - lineWidth;
+  }
+  ctx.textAlign = "left";
+  for (const glyph of glyphs) {
+    ctx.fillText(glyph, cursorX, y);
+    cursorX += ctx.measureText(glyph).width + letterSpacing;
+  }
+}
+function drawAlignedTextBlock(ctx, options) {
+  applyFont(ctx, {
+    size: options.fontSize,
+    weight: options.fontWeight,
+    family: options.fontFamily
+  });
+  const letterSpacing = options.letterSpacing ?? 0;
+  const wrapped = wrapTextWithLetterSpacing(
+    ctx,
+    options.text,
+    options.maxWidth,
+    options.maxLines,
+    letterSpacing
+  );
+  ctx.fillStyle = options.color;
+  for (const [index, line] of wrapped.lines.entries()) {
+    drawAlignedTextLine(
+      ctx,
+      line,
+      options.x,
+      options.y + index * options.lineHeight,
+      options.align,
+      letterSpacing
+    );
+  }
+  return {
+    height: wrapped.lines.length * options.lineHeight,
+    truncated: wrapped.truncated
+  };
+}
+async function renderDesign(input, options = {}) {
+  loadFonts();
+  const spec = parseDesignSpec(input);
+  const safeFrame = deriveSafeFrame(spec);
+  const theme = resolveTheme(spec.theme);
+  const specHash = computeSpecHash(spec);
+  const generatorVersion = options.generatorVersion ?? DEFAULT_GENERATOR_VERSION;
+  const renderedAt = options.renderedAt ?? (/* @__PURE__ */ new Date()).toISOString();
+  const renderScale = resolveRenderScale(spec);
+  const canvas = createCanvas(spec.canvas.width * renderScale, spec.canvas.height * renderScale);
+  const ctx = canvas.getContext("2d");
+  if (renderScale !== 1) {
+    ctx.scale(renderScale, renderScale);
+  }
+  const headingFont = resolveFont(theme.fonts.heading, "heading");
+  const monoFont = resolveFont(theme.fonts.mono, "mono");
+  const bodyFont = resolveFont(theme.fonts.body, "body");
+  const background = spec.background ?? theme.background;
+  const canvasRect2 = { x: 0, y: 0, width: spec.canvas.width, height: spec.canvas.height };
+  if (typeof background === "string") {
+    ctx.fillStyle = background;
+    ctx.fillRect(0, 0, spec.canvas.width, spec.canvas.height);
+  } else {
+    drawGradientRect(ctx, canvasRect2, background);
+  }
+  const metadataBackground = typeof background === "string" ? background : theme.background;
+  const elements = [];
+  const hasHeader = Boolean(spec.header);
+  const hasFooter = Boolean(spec.footer);
+  const headerRect = hasHeader ? {
+    x: safeFrame.x,
+    y: safeFrame.y,
+    width: safeFrame.width,
+    height: Math.round(safeFrame.height * 0.24)
+  } : void 0;
+  const footerRect = hasFooter ? {
+    x: safeFrame.x,
+    y: safeFrame.y + safeFrame.height - Math.round(safeFrame.height * 0.1),
+    width: safeFrame.width,
+    height: Math.round(safeFrame.height * 0.1)
+  } : void 0;
+  const sectionGap = spec.layout.mode === "grid" || spec.layout.mode === "stack" ? spec.layout.gap : 24;
+  const contentTop = headerRect ? headerRect.y + headerRect.height + sectionGap : safeFrame.y;
+  const contentBottom = footerRect ? footerRect.y - sectionGap : safeFrame.y + safeFrame.height;
+  if (headerRect && spec.header) {
+    const headerAlign = spec.header.align;
+    const headerX = resolveAlignedX(headerRect, headerAlign);
+    if (spec.header.eyebrow) {
+      applyFont(ctx, { size: 16, weight: 700, family: monoFont });
+      ctx.fillStyle = theme.primary;
+      ctx.textAlign = headerAlign;
+      ctx.fillText(spec.header.eyebrow.toUpperCase(), headerX, headerRect.y + 18);
+    }
+    const titleFontSize = spec.header.titleFontSize ?? 42;
+    const titleLineHeight = Math.round(titleFontSize * 1.14);
+    const titleY = spec.header.eyebrow ? headerRect.y + 58 : headerRect.y + 32;
+    const titleBlock = drawAlignedTextBlock(ctx, {
+      x: headerX,
+      y: titleY,
+      maxWidth: headerRect.width,
+      lineHeight: titleLineHeight,
+      color: theme.text,
+      text: spec.header.title,
+      maxLines: 2,
+      fontSize: titleFontSize,
+      fontWeight: 700,
+      fontFamily: headingFont,
+      align: headerAlign,
+      letterSpacing: spec.header.titleLetterSpacing
+    });
+    let subtitleTruncated = false;
+    if (spec.header.subtitle) {
+      const subtitleBlock = drawAlignedTextBlock(ctx, {
+        x: headerX,
+        y: titleY + titleBlock.height + 12,
+        maxWidth: headerRect.width,
+        lineHeight: 28,
+        color: theme.textMuted,
+        text: spec.header.subtitle,
+        maxLines: 2,
+        fontSize: 22,
+        fontWeight: 500,
+        fontFamily: bodyFont,
+        align: headerAlign
+      });
+      subtitleTruncated = subtitleBlock.truncated;
+    }
+    ctx.textAlign = "left";
+    elements.push({
+      id: "header",
+      kind: "header",
+      bounds: headerRect,
+      foregroundColor: theme.text,
+      backgroundColor: metadataBackground
+    });
+    elements.push({
+      id: "header-title",
+      kind: "text",
+      bounds: {
+        x: headerRect.x,
+        y: headerRect.y + 20,
+        width: headerRect.width,
+        height: headerRect.height - 20
+      },
+      foregroundColor: theme.text,
+      backgroundColor: metadataBackground,
+      truncated: titleBlock.truncated || subtitleTruncated
+    });
+  }
+  const deferredVignettes = [];
+  for (const [index, decorator] of spec.decorators.entries()) {
+    if (decorator.type === "vignette") {
+      deferredVignettes.push({ index, intensity: decorator.intensity, color: decorator.color });
+      continue;
+    }
+    if (decorator.type === "gradient-overlay") {
+      ctx.save();
+      ctx.globalAlpha = decorator.opacity;
+      drawGradientRect(ctx, canvasRect2, decorator.gradient);
+      ctx.restore();
+      elements.push({
+        id: `decorator-gradient-overlay-${index}`,
+        kind: "gradient-overlay",
+        bounds: { ...canvasRect2 },
+        allowOverlap: true
+      });
+      continue;
+    }
+    const defaultAfterHeaderY = headerRect ? headerRect.y + headerRect.height + Math.max(4, sectionGap / 2) : safeFrame.y + 24;
+    const defaultBeforeFooterY = footerRect ? footerRect.y - Math.max(4, sectionGap / 2) : safeFrame.y + safeFrame.height - 24;
+    const y = decorator.y === "before-footer" ? defaultBeforeFooterY : decorator.y === "custom" ? decorator.customY ?? defaultAfterHeaderY : defaultAfterHeaderY;
+    const x = safeFrame.x + decorator.margin;
+    const width = Math.max(0, safeFrame.width - decorator.margin * 2);
+    drawRainbowRule(ctx, x, y, width, decorator.thickness, decorator.colors);
+    elements.push({
+      id: `decorator-rainbow-rule-${index}`,
+      kind: "rainbow-rule",
+      bounds: {
+        x,
+        y: y - decorator.thickness / 2,
+        width,
+        height: decorator.thickness
+      },
+      allowOverlap: true
+    });
+  }
+  const contentFrame = {
+    x: safeFrame.x,
+    y: contentTop,
+    width: safeFrame.width,
+    height: Math.max(0, contentBottom - contentTop)
+  };
+  const layoutResult = await computeLayout(spec.elements, spec.layout, contentFrame);
+  const elementRects = layoutResult.positions;
+  const edgeRoutes = layoutResult.edgeRoutes;
+  for (const element of spec.elements) {
+    if (element.type === "connection") {
+      continue;
+    }
+    const rect = elementRects.get(element.id);
+    if (!rect) {
+      throw new Error(`Missing layout bounds for element: ${element.id}`);
+    }
+    switch (element.type) {
+      case "card":
+        elements.push(...renderCard(ctx, element, rect, theme));
+        break;
+      case "flow-node":
+        elements.push(...renderFlowNode(ctx, element, rect, theme));
+        break;
+      case "terminal":
+        elements.push(...renderTerminal(ctx, element, rect, theme));
+        break;
+      case "code-block":
+        elements.push(...await renderCodeBlock(ctx, element, rect, theme));
+        break;
+      case "text":
+        elements.push(...renderTextElement(ctx, element, rect, theme));
+        break;
+      case "shape":
+        elements.push(...renderShapeElement(ctx, element, rect, theme));
+        break;
+      case "image":
+        elements.push(...await renderImageElement(ctx, element, rect, theme));
+        break;
+    }
+  }
+  for (const element of spec.elements) {
+    if (element.type !== "connection") {
+      continue;
+    }
+    const fromRect = elementRects.get(element.from);
+    const toRect = elementRects.get(element.to);
+    if (!fromRect || !toRect) {
+      throw new Error(
+        `Connection endpoints must reference positioned elements: from=${element.from} to=${element.to}`
+      );
+    }
+    const edgeRoute = edgeRoutes?.get(`${element.from}-${element.to}`);
+    elements.push(...renderConnection(ctx, element, fromRect, toRect, theme, edgeRoute));
+  }
+  if (footerRect && spec.footer) {
+    const footerText = spec.footer.tagline ? `${spec.footer.text} \u2022 ${spec.footer.tagline}` : spec.footer.text;
+    applyFont(ctx, { size: 16, weight: 600, family: monoFont });
+    ctx.fillStyle = theme.textMuted;
+    ctx.fillText(footerText, footerRect.x, footerRect.y + footerRect.height - 10);
+    elements.push({
+      id: "footer",
+      kind: "footer",
+      bounds: footerRect,
+      foregroundColor: theme.textMuted,
+      backgroundColor: metadataBackground
+    });
+  }
+  elements.push(...renderDrawCommands(ctx, spec.draw, theme));
+  for (const vignette of deferredVignettes) {
+    drawVignette(ctx, spec.canvas.width, spec.canvas.height, vignette.intensity, vignette.color);
+    elements.push({
+      id: `decorator-vignette-${vignette.index}`,
+      kind: "vignette",
+      bounds: { ...canvasRect2 },
+      allowOverlap: true
+    });
+  }
+  const pngBuffer = Buffer.from(await canvas.encode("png"));
+  const artifactHash = sha256Hex(pngBuffer);
+  const artifactBaseName = buildArtifactBaseName(specHash, generatorVersion);
+  const metadata = {
+    schemaVersion: 2,
+    generatorVersion,
+    renderedAt,
+    specHash,
+    artifactHash,
+    artifactBaseName,
+    canvas: {
+      width: spec.canvas.width,
+      height: spec.canvas.height,
+      scale: renderScale
+    },
+    layout: {
+      safeFrame,
+      elements
+    }
+  };
+  return {
+    png: pngBuffer,
+    metadata
+  };
+}
+function resolveOutputPaths(out, artifactBaseName) {
+  const resolved = resolve3(out);
+  const hasPngExtension = extname(resolved).toLowerCase() === ".png";
+  if (hasPngExtension) {
+    const metadataPath2 = resolved.replace(/\.png$/iu, ".meta.json");
+    return { imagePath: resolved, metadataPath: metadataPath2 };
+  }
+  const imagePath = join(resolved, `${artifactBaseName}.png`);
+  const metadataPath = join(resolved, `${artifactBaseName}.meta.json`);
+  return { imagePath, metadataPath };
+}
+async function writeRenderArtifacts(result, out) {
+  const { imagePath, metadataPath } = resolveOutputPaths(out, result.metadata.artifactBaseName);
+  await mkdir(dirname2(imagePath), { recursive: true });
+  await mkdir(dirname2(metadataPath), { recursive: true });
+  await writeFile(imagePath, result.png);
+  await writeFile(metadataPath, JSON.stringify(result.metadata, null, 2));
+  return {
+    imagePath,
+    metadataPath,
+    metadata: result.metadata
+  };
+}
+function inferSidecarPath(imagePath) {
+  const resolved = resolve3(imagePath);
+  if (extname(resolved).toLowerCase() !== ".png") {
+    return join(dirname2(resolved), `${basename3(resolved)}.meta.json`);
+  }
+  return resolved.replace(/\.png$/iu, ".meta.json");
+}
+
+// src/templates/flowchart.ts
+var FLOW_NODE_SHAPES = /* @__PURE__ */ new Set([
+  "box",
+  "rounded-box",
+  "diamond",
+  "circle",
+  "pill",
+  "cylinder",
+  "parallelogram"
+]);
+function parseNodeToken(token, fallbackShape) {
+  const trimmed = token.trim();
+  if (!trimmed) {
+    throw new Error("Flowchart nodes cannot include empty values.");
+  }
+  const shapeDelimiter = trimmed.lastIndexOf(":");
+  if (shapeDelimiter <= 0 || shapeDelimiter >= trimmed.length - 1) {
+    return {
+      name: trimmed,
+      shape: fallbackShape
+    };
+  }
+  const name = trimmed.slice(0, shapeDelimiter).trim();
+  const shapeCandidate = trimmed.slice(shapeDelimiter + 1).trim();
+  if (!name) {
+    throw new Error(`Invalid node token "${token}".`);
+  }
+  if (!FLOW_NODE_SHAPES.has(shapeCandidate)) {
+    return {
+      name: trimmed,
+      shape: fallbackShape
+    };
+  }
+  return {
+    name,
+    shape: shapeCandidate
+  };
+}
+function parseEdgeToken(token) {
+  const trimmed = token.trim();
+  const match = /^(.*?)\s*->\s*([^:]+?)(?::(.*))?$/u.exec(trimmed);
+  if (!match) {
+    throw new Error(`Invalid flowchart edge "${token}". Expected "From->To" or "From->To:label".`);
+  }
+  const [, rawFrom, rawTo, rawLabel] = match;
+  const from = rawFrom.trim();
+  const to = rawTo.trim();
+  const label = rawLabel?.trim();
+  if (!from || !to) {
+    throw new Error(`Invalid flowchart edge "${token}".`);
+  }
+  return {
+    from,
+    to,
+    ...label ? { label } : {}
+  };
+}
+function buildFlowchartSpec(options) {
+  const defaultShape = options.nodeShape ?? "rounded-box";
+  if (!FLOW_NODE_SHAPES.has(defaultShape)) {
+    throw new Error(`Invalid node shape "${options.nodeShape}".`);
+  }
+  const nodeIds = /* @__PURE__ */ new Map();
+  const flowNodes = options.nodes.map((nodeToken, index) => {
+    const parsed = parseNodeToken(nodeToken, defaultShape);
+    if (nodeIds.has(parsed.name)) {
+      throw new Error(`Duplicate flowchart node "${parsed.name}".`);
+    }
+    const id = `node-${index + 1}`;
+    nodeIds.set(parsed.name, id);
+    return {
+      type: "flow-node",
+      id,
+      shape: parsed.shape,
+      label: parsed.name
+    };
+  });
+  const connections = options.edges.map((edgeToken) => {
+    const edge = parseEdgeToken(edgeToken);
+    const from = nodeIds.get(edge.from);
+    const to = nodeIds.get(edge.to);
+    if (!from || !to) {
+      throw new Error(`Edge "${edgeToken}" references unknown nodes.`);
+    }
+    return {
+      type: "connection",
+      from,
+      to,
+      arrow: "end",
+      ...edge.label ? { label: edge.label } : {}
+    };
+  });
+  return parseDesignSpec({
+    version: 2,
+    ...options.width || options.height ? {
+      canvas: {
+        ...options.width ? { width: options.width } : {},
+        ...options.height ? { height: options.height } : {}
+      }
+    } : {},
+    theme: options.theme ?? "dark",
+    ...options.title ? { header: { title: options.title } } : {},
+    layout: {
+      mode: "auto",
+      algorithm: options.algorithm ?? "layered",
+      direction: options.direction ?? "TB"
+    },
+    elements: [...flowNodes, ...connections]
+  });
+}
+
+// src/templates/code.ts
+function buildCodeSpec(options) {
+  const codeBlock = {
+    type: "code-block",
+    id: "code-1",
+    code: options.code,
+    language: options.language,
+    showLineNumbers: options.showLineNumbers ?? false,
+    style: {
+      paddingVertical: 56,
+      paddingHorizontal: 56,
+      windowControls: options.windowControls ?? "macos",
+      dropShadow: true,
+      dropShadowOffsetY: 20,
+      dropShadowBlurRadius: 68,
+      surroundColor: options.surroundColor ?? CARBON_SURROUND_COLOR,
+      fontSize: 14,
+      lineHeightPercent: 143,
+      scale: options.scale ?? 2
+    },
+    ...options.highlightLines && options.highlightLines.length > 0 ? { highlightLines: options.highlightLines } : {},
+    ...options.startLine ? { startLine: options.startLine } : {},
+    ...options.title ? { title: options.title } : {}
+  };
+  return parseDesignSpec({
+    version: 2,
+    canvas: {
+      width: options.width ?? 800,
+      height: options.height ?? 500
+    },
+    theme: options.theme ?? "dark",
+    layout: {
+      mode: "stack",
+      direction: "vertical",
+      alignment: "stretch"
+    },
+    elements: [codeBlock]
+  });
+}
+
+// src/templates/terminal.ts
+function resolveTerminalContent(options) {
+  if (options.content && options.content.trim().length > 0) {
+    return options.content;
+  }
+  const command = options.command?.trim();
+  const output = options.output ?? "";
+  if (command) {
+    const prompt = options.prompt ?? "$ ";
+    return output ? `${prompt}${command}
+
+${output}` : `${prompt}${command}`;
+  }
+  if (output.trim().length > 0) {
+    return output;
+  }
+  throw new Error("Terminal template requires either content or command/output input.");
+}
+function buildTerminalSpec(options) {
+  const content = resolveTerminalContent(options);
+  const terminal = {
+    type: "terminal",
+    id: "terminal-1",
+    content,
+    showPrompt: false,
+    style: {
+      paddingVertical: 56,
+      paddingHorizontal: 56,
+      windowControls: options.windowControls ?? "macos",
+      dropShadow: true,
+      dropShadowOffsetY: 20,
+      dropShadowBlurRadius: 68,
+      surroundColor: options.surroundColor ?? CARBON_SURROUND_COLOR,
+      fontSize: 14,
+      lineHeightPercent: 143,
+      scale: options.scale ?? 2
+    },
+    ...options.title ? { title: options.title } : {}
+  };
+  return parseDesignSpec({
+    version: 2,
+    canvas: {
+      width: options.width ?? 800,
+      height: options.height ?? 400
+    },
+    theme: options.theme ?? "dark",
+    layout: {
+      mode: "stack",
+      direction: "vertical",
+      alignment: "stretch"
+    },
+    elements: [terminal]
+  });
+}
+
+// src/templates/cards.ts
+function inferColumns(cardCount) {
+  if (cardCount <= 1) {
+    return 1;
+  }
+  if (cardCount <= 3) {
+    return cardCount;
+  }
+  if (cardCount <= 4) {
+    return 2;
+  }
+  if (cardCount <= 9) {
+    return 3;
+  }
+  return 4;
+}
+function buildCardsSpec(options) {
+  const cards = options.cards.map((card, index) => ({
+    type: "card",
+    id: `card-${index + 1}`,
+    title: card.title,
+    body: card.body,
+    ...card.badge ? { badge: card.badge } : {},
+    ...card.metric ? { metric: card.metric } : {},
+    ...card.tone ? { tone: card.tone } : {}
+  }));
+  return parseDesignSpec({
+    version: 2,
+    ...options.width || options.height ? {
+      canvas: {
+        ...options.width ? { width: options.width } : {},
+        ...options.height ? { height: options.height } : {}
+      }
+    } : {},
+    theme: options.theme ?? "dark",
+    ...options.title ? {
+      header: {
+        title: options.title,
+        ...options.subtitle ? { subtitle: options.subtitle } : {}
+      }
+    } : {},
+    layout: {
+      mode: "grid",
+      columns: options.columns ?? inferColumns(cards.length)
+    },
+    elements: cards
+  });
+}
+
+// src/cli.ts
+var __dirname2 = dirname3(fileURLToPath2(import.meta.url));
+var pkg = JSON.parse(readFileSync(resolve4(__dirname2, "../package.json"), "utf8"));
+var cli = Cli.create("design", {
+  version: pkg.version,
+  description: "Deterministic graphic designer pipeline: render \u2192 QA \u2192 publish."
+});
+var renderOutputSchema = z3.object({
+  imagePath: z3.string(),
+  metadataPath: z3.string(),
+  specPath: z3.string(),
+  artifactHash: z3.string(),
+  specHash: z3.string(),
+  layoutMode: z3.string(),
+  qa: z3.object({
+    pass: z3.boolean(),
+    issueCount: z3.number(),
+    issues: z3.array(
+      z3.object({
+        code: z3.string(),
+        severity: z3.string(),
+        message: z3.string(),
+        elementId: z3.string().optional()
+      })
+    )
+  })
+});
+async function readJson(path) {
+  if (path === "-") {
+    const chunks = [];
+    for await (const chunk of process.stdin) {
+      chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+    }
+    return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+  }
+  const raw = await readFile4(resolve4(path), "utf8");
+  return JSON.parse(raw);
+}
+function specPathFor(metadataPath) {
+  return metadataPath.replace(/\.meta\.json$/iu, ".spec.json");
+}
+function splitCommaList(value) {
+  return value.split(",").map((item) => item.trim()).filter((item) => item.length > 0);
+}
+function parseLineRange(range) {
+  const match = /^(\d+)\s*-\s*(\d+)$/u.exec(range.trim());
+  if (!match) {
+    throw new Error(`Invalid --lines value "${range}". Expected format "start-end".`);
+  }
+  const start = Number.parseInt(match[1], 10);
+  const end = Number.parseInt(match[2], 10);
+  if (start <= 0 || end <= 0 || end < start) {
+    throw new Error(`Invalid --lines range "${range}". Expected positive ascending range.`);
+  }
+  return { start, end };
+}
+function parseIntegerList(value) {
+  const values = splitCommaList(value).map((part) => {
+    const parsed = Number.parseInt(part, 10);
+    if (!Number.isInteger(parsed) || parsed <= 0) {
+      throw new Error(`Invalid integer value "${part}" in list "${value}".`);
+    }
+    return parsed;
+  });
+  return [...new Set(values)].sort((a, b) => a - b);
+}
+function readCodeRange(code, start, end) {
+  const lines = code.split(/\r?\n/u);
+  return lines.slice(start - 1, end).join("\n");
+}
+async function runRenderPipeline(spec, options) {
+  const renderResult = await renderDesign(spec, { generatorVersion: pkg.version });
+  const written = await writeRenderArtifacts(renderResult, options.out);
+  const specPath = options.specOut ? resolve4(options.specOut) : specPathFor(written.metadataPath);
+  await mkdir2(dirname3(specPath), { recursive: true });
+  await writeFile2(specPath, JSON.stringify(spec, null, 2));
+  const qa = await runQa({
+    imagePath: written.imagePath,
+    spec,
+    metadata: written.metadata
+  });
+  return {
+    imagePath: written.imagePath,
+    metadataPath: written.metadataPath,
+    specPath,
+    artifactHash: written.metadata.artifactHash,
+    specHash: written.metadata.specHash,
+    layoutMode: spec.layout.mode,
+    qa: {
+      pass: qa.pass,
+      issueCount: qa.issues.length,
+      issues: qa.issues
+    }
+  };
+}
+cli.command("render", {
+  description: "Render a deterministic design artifact from a DesignSpec JSON file.",
+  options: z3.object({
+    spec: z3.string().describe('Path to DesignSpec JSON file (or "-" to read JSON from stdin)'),
+    out: z3.string().describe("Output file path (.png) or output directory"),
+    specOut: z3.string().optional().describe("Optional explicit output path for normalized spec JSON"),
+    allowQaFail: z3.boolean().default(false).describe("Allow render success even if QA fails")
+  }),
+  output: renderOutputSchema,
+  examples: [
+    {
+      options: {
+        spec: "./specs/pipeline.json",
+        out: "./output"
+      },
+      description: "Render a design spec and write .png/.meta/.spec artifacts"
+    }
+  ],
+  async run(c) {
+    const spec = parseDesignSpec(await readJson(c.options.spec));
+    const runReport = await runRenderPipeline(spec, {
+      out: c.options.out,
+      ...c.options.specOut ? { specOut: c.options.specOut } : {}
+    });
+    if (!runReport.qa.pass && !c.options.allowQaFail) {
+      return c.error({
+        code: "QA_FAILED",
+        message: `Render completed but QA failed (${runReport.qa.issueCount} issues). Review qa output.`,
+        retryable: false
+      });
+    }
+    return c.ok(runReport);
+  }
+});
+var template = Cli.create("template", {
+  description: "Generate common design templates and run the full render \u2192 QA pipeline."
+});
+template.command("flowchart", {
+  description: "Build and render a flowchart from concise node/edge input.",
+  options: z3.object({
+    nodes: z3.string().describe("Comma-separated node names, optionally with :shape (example: Decision:diamond)"),
+    edges: z3.string().describe("Comma-separated edges as From->To or From->To:label"),
+    title: z3.string().optional().describe("Optional header title"),
+    direction: z3.enum(["TB", "BT", "LR", "RL"]).default("TB").describe("Auto-layout direction"),
+    algorithm: z3.enum(["layered", "stress", "force", "radial", "box"]).default("layered").describe("Auto-layout algorithm"),
+    theme: z3.string().default("dark").describe("Theme name"),
+    nodeShape: z3.string().optional().describe("Default shape for nodes without explicit :shape"),
+    width: z3.number().int().positive().optional().describe("Canvas width override"),
+    height: z3.number().int().positive().optional().describe("Canvas height override"),
+    out: z3.string().describe("Output file path (.png) or output directory")
+  }),
+  output: renderOutputSchema,
+  async run(c) {
+    const nodes = splitCommaList(c.options.nodes);
+    const edges = splitCommaList(c.options.edges);
+    if (nodes.length === 0) {
+      return c.error({
+        code: "INVALID_TEMPLATE_INPUT",
+        message: "Flowchart template requires at least one node.",
+        retryable: false
+      });
+    }
+    if (edges.length === 0) {
+      return c.error({
+        code: "INVALID_TEMPLATE_INPUT",
+        message: "Flowchart template requires at least one edge.",
+        retryable: false
+      });
+    }
+    const spec = buildFlowchartSpec({
+      nodes,
+      edges,
+      ...c.options.title ? { title: c.options.title } : {},
+      direction: c.options.direction,
+      algorithm: c.options.algorithm,
+      theme: c.options.theme,
+      ...c.options.nodeShape ? { nodeShape: c.options.nodeShape } : {},
+      ...c.options.width ? { width: c.options.width } : {},
+      ...c.options.height ? { height: c.options.height } : {}
+    });
+    const runReport = await runRenderPipeline(spec, { out: c.options.out });
+    if (!runReport.qa.pass) {
+      return c.error({
+        code: "QA_FAILED",
+        message: `Render completed but QA failed (${runReport.qa.issueCount} issues). Review qa output.`,
+        retryable: false
+      });
+    }
+    return c.ok(runReport);
+  }
+});
+template.command("code", {
+  description: "Build and render a code screenshot from inline code or a source file.",
+  options: z3.object({
+    code: z3.string().optional().describe("Inline code string (mutually exclusive with --file)"),
+    file: z3.string().optional().describe("Path to a source file to render"),
+    language: z3.string().describe("Language for syntax highlighting"),
+    lines: z3.string().optional().describe("Optional line range to extract (example: 10-25)"),
+    title: z3.string().optional().describe("Optional code block title"),
+    theme: z3.string().default("dark").describe("Theme name"),
+    showLineNumbers: z3.boolean().default(false).describe("Show line numbers"),
+    highlightLines: z3.string().optional().describe("Comma-separated line numbers to highlight (example: 3,4,5)"),
+    surroundColor: z3.string().optional().describe("Outer surround color (default: rgba(171, 184, 195, 1))"),
+    windowControls: z3.enum(["macos", "bw", "none"]).default("macos").describe("Window chrome controls style"),
+    scale: z3.number().int().refine((value) => value === 1 || value === 2 || value === 4, {
+      message: "Scale must be one of: 1, 2, 4"
+    }).default(2).describe("Export scale factor"),
+    width: z3.number().int().positive().optional().describe("Canvas width override"),
+    height: z3.number().int().positive().optional().describe("Canvas height override"),
+    out: z3.string().describe("Output file path (.png) or output directory")
+  }),
+  output: renderOutputSchema,
+  async run(c) {
+    if (Boolean(c.options.code) === Boolean(c.options.file)) {
+      return c.error({
+        code: "INVALID_TEMPLATE_INPUT",
+        message: "Code template requires exactly one of --code or --file.",
+        retryable: false
+      });
+    }
+    let source = c.options.code ?? "";
+    if (c.options.file) {
+      try {
+        source = await readFile4(resolve4(c.options.file), "utf8");
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        return c.error({
+          code: "FILE_READ_FAILED",
+          message: `Failed to read --file ${c.options.file}: ${message}`,
+          retryable: false
+        });
+      }
+    }
+    let startLine = 1;
+    if (c.options.lines) {
+      const range = parseLineRange(c.options.lines);
+      source = readCodeRange(source, range.start, range.end);
+      startLine = range.start;
+    }
+    const highlightLines = c.options.highlightLines ? parseIntegerList(c.options.highlightLines) : void 0;
+    const title = c.options.title ?? (c.options.file ? basename4(c.options.file) : void 0);
+    const spec = buildCodeSpec({
+      code: source,
+      language: c.options.language,
+      ...title ? { title } : {},
+      theme: c.options.theme,
+      showLineNumbers: c.options.showLineNumbers,
+      ...highlightLines && highlightLines.length > 0 ? { highlightLines } : {},
+      ...startLine > 1 ? { startLine } : {},
+      ...c.options.surroundColor ? { surroundColor: c.options.surroundColor } : {},
+      windowControls: c.options.windowControls,
+      scale: c.options.scale,
+      ...c.options.width ? { width: c.options.width } : {},
+      ...c.options.height ? { height: c.options.height } : {}
+    });
+    const runReport = await runRenderPipeline(spec, { out: c.options.out });
+    if (!runReport.qa.pass) {
+      return c.error({
+        code: "QA_FAILED",
+        message: `Render completed but QA failed (${runReport.qa.issueCount} issues). Review qa output.`,
+        retryable: false
+      });
+    }
+    return c.ok(runReport);
+  }
+});
+template.command("terminal", {
+  description: "Build and render a terminal screenshot from command/output or raw content.",
+  options: z3.object({
+    command: z3.string().optional().describe("Command to show"),
+    output: z3.string().optional().describe("Command output text"),
+    content: z3.string().optional().describe("Raw terminal content (alternative to command/output)"),
+    title: z3.string().optional().describe("Window title"),
+    prompt: z3.string().default("$ ").describe("Prompt prefix used for formatted command mode"),
+    windowControls: z3.enum(["macos", "bw", "none"]).default("macos").describe("Window chrome controls style"),
+    surroundColor: z3.string().optional().describe("Outer surround color (default: rgba(171, 184, 195, 1))"),
+    scale: z3.number().int().refine((value) => value === 1 || value === 2 || value === 4, {
+      message: "Scale must be one of: 1, 2, 4"
+    }).default(2).describe("Export scale factor"),
+    theme: z3.string().default("dark").describe("Theme name"),
+    width: z3.number().int().positive().optional().describe("Canvas width override"),
+    height: z3.number().int().positive().optional().describe("Canvas height override"),
+    out: z3.string().describe("Output file path (.png) or output directory")
+  }),
+  output: renderOutputSchema,
+  async run(c) {
+    if (c.options.content && (c.options.command || c.options.output)) {
+      return c.error({
+        code: "INVALID_TEMPLATE_INPUT",
+        message: "Use either --content or --command/--output, not both.",
+        retryable: false
+      });
+    }
+    const spec = buildTerminalSpec({
+      ...c.options.command ? { command: c.options.command } : {},
+      ...c.options.output ? { output: c.options.output } : {},
+      ...c.options.content ? { content: c.options.content } : {},
+      ...c.options.title ? { title: c.options.title } : {},
+      prompt: c.options.prompt,
+      windowControls: c.options.windowControls,
+      ...c.options.surroundColor ? { surroundColor: c.options.surroundColor } : {},
+      scale: c.options.scale,
+      theme: c.options.theme,
+      ...c.options.width ? { width: c.options.width } : {},
+      ...c.options.height ? { height: c.options.height } : {}
+    });
+    const runReport = await runRenderPipeline(spec, { out: c.options.out });
+    if (!runReport.qa.pass) {
+      return c.error({
+        code: "QA_FAILED",
+        message: `Render completed but QA failed (${runReport.qa.issueCount} issues). Review qa output.`,
+        retryable: false
+      });
+    }
+    return c.ok(runReport);
+  }
+});
+template.command("cards", {
+  description: "Build and render a card grid from JSON card input.",
+  options: z3.object({
+    cards: z3.string().describe('JSON array of cards: [{"title":"...","body":"...","metric":"..."}]'),
+    title: z3.string().optional().describe("Header title"),
+    subtitle: z3.string().optional().describe("Header subtitle"),
+    columns: z3.number().int().positive().optional().describe("Grid columns (default: auto)"),
+    theme: z3.string().default("dark").describe("Theme name"),
+    width: z3.number().int().positive().optional().describe("Canvas width override"),
+    height: z3.number().int().positive().optional().describe("Canvas height override"),
+    out: z3.string().describe("Output file path (.png) or output directory")
+  }),
+  output: renderOutputSchema,
+  async run(c) {
+    let cardsInput;
+    try {
+      cardsInput = JSON.parse(c.options.cards);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return c.error({
+        code: "INVALID_TEMPLATE_INPUT",
+        message: `Failed to parse --cards JSON: ${message}`,
+        retryable: false
+      });
+    }
+    if (!Array.isArray(cardsInput)) {
+      return c.error({
+        code: "INVALID_TEMPLATE_INPUT",
+        message: "--cards must be a JSON array.",
+        retryable: false
+      });
+    }
+    const spec = buildCardsSpec({
+      cards: cardsInput,
+      ...c.options.title ? { title: c.options.title } : {},
+      ...c.options.subtitle ? { subtitle: c.options.subtitle } : {},
+      ...c.options.columns ? { columns: c.options.columns } : {},
+      theme: c.options.theme,
+      ...c.options.width ? { width: c.options.width } : {},
+      ...c.options.height ? { height: c.options.height } : {}
+    });
+    const runReport = await runRenderPipeline(spec, { out: c.options.out });
+    if (!runReport.qa.pass) {
+      return c.error({
+        code: "QA_FAILED",
+        message: `Render completed but QA failed (${runReport.qa.issueCount} issues). Review qa output.`,
+        retryable: false
+      });
+    }
+    return c.ok(runReport);
+  }
+});
+cli.command(template);
+cli.command("qa", {
+  description: "Run hard QA checks against a rendered image + spec (and optional sidecar metadata).",
+  options: z3.object({
+    in: z3.string().describe("Path to rendered PNG"),
+    spec: z3.string().describe("Path to normalized DesignSpec JSON"),
+    meta: z3.string().optional().describe("Optional sidecar metadata path (.meta.json)")
+  }),
+  output: z3.object({
+    pass: z3.boolean(),
+    checkedAt: z3.string(),
+    imagePath: z3.string(),
+    issueCount: z3.number(),
+    issues: z3.array(
+      z3.object({
+        code: z3.string(),
+        severity: z3.string(),
+        message: z3.string(),
+        elementId: z3.string().optional()
+      })
+    )
+  }),
+  examples: [
+    {
+      options: {
+        in: "./output/design-v2-g0.2.0-sabc123.png",
+        spec: "./output/design-v2-g0.2.0-sabc123.spec.json"
+      },
+      description: "Validate dimensions, clipping, overlap, contrast, and footer spacing"
+    }
+  ],
+  async run(c) {
+    const spec = parseDesignSpec(await readJson(c.options.spec));
+    const metadataPath = c.options.meta ? resolve4(c.options.meta) : inferSidecarPath(c.options.in);
+    let metadata;
+    try {
+      metadata = await readMetadata(metadataPath);
+    } catch {
+      metadata = void 0;
+    }
+    const report = await runQa({
+      imagePath: c.options.in,
+      spec,
+      ...metadata ? { metadata } : {}
+    });
+    const response = {
+      pass: report.pass,
+      checkedAt: report.checkedAt,
+      imagePath: report.imagePath,
+      issueCount: report.issues.length,
+      issues: report.issues
+    };
+    if (!report.pass) {
+      return c.error({
+        code: "QA_FAILED",
+        message: `QA checks failed (${report.issues.length} issues).`,
+        retryable: false
+      });
+    }
+    return c.ok(response);
+  }
+});
+cli.command("publish", {
+  description: "Publish deterministic artifacts to gist or github (QA gate required by default).",
+  options: z3.object({
+    in: z3.string().describe("Path to rendered PNG"),
+    target: z3.enum(["gist", "github"]).describe("Publish target"),
+    spec: z3.string().optional().describe("Path to DesignSpec JSON (default: infer from sidecar name)"),
+    meta: z3.string().optional().describe("Path to metadata sidecar JSON (default: infer from image name)"),
+    allowQaFail: z3.boolean().default(false).describe("Bypass QA gate (not recommended)"),
+    repo: z3.string().optional().describe("GitHub target repo in owner/name format (github target only)"),
+    branch: z3.string().optional().describe("GitHub branch (default: main)"),
+    pathPrefix: z3.string().optional().describe("GitHub path prefix for uploads (default: artifacts)"),
+    gistId: z3.string().optional().describe("Existing gist id to update (gist target only)"),
+    description: z3.string().optional().describe("Publish description/commit message"),
+    public: z3.boolean().default(false).describe("Publish gist publicly (gist target only)")
+  }),
+  output: z3.object({
+    target: z3.enum(["gist", "github"]),
+    qa: z3.object({
+      pass: z3.boolean(),
+      issueCount: z3.number()
+    }),
+    publish: z3.object({
+      attempts: z3.number(),
+      summary: z3.string(),
+      url: z3.string().optional()
+    })
+  }),
+  examples: [
+    {
+      options: {
+        in: "./output/design-v2-g0.2.0-sabc123.png",
+        target: "gist"
+      },
+      description: "Publish a rendered design to a gist with retry/backoff"
+    },
+    {
+      options: {
+        in: "./output/design-v2-g0.2.0-sabc123.png",
+        target: "github",
+        repo: "spectra-the-bot/spectra-tools",
+        branch: "main"
+      },
+      description: "Publish artifact + sidecar metadata into a GitHub repository path"
+    }
+  ],
+  async run(c) {
+    const imagePath = resolve4(c.options.in);
+    const metadataPath = c.options.meta ? resolve4(c.options.meta) : inferSidecarPath(imagePath);
+    const specPath = c.options.spec ? resolve4(c.options.spec) : metadataPath.replace(/\.meta\.json$/iu, ".spec.json");
+    const metadata = await readMetadata(metadataPath);
+    const spec = parseDesignSpec(await readJson(specPath));
+    const qa = await runQa({ imagePath, spec, metadata });
+    if (!qa.pass && !c.options.allowQaFail) {
+      return c.error({
+        code: "QA_FAILED",
+        message: `Publish blocked by QA gate (${qa.issues.length} issues).`,
+        retryable: false
+      });
+    }
+    if (c.options.target === "gist") {
+      const gist = await publishToGist({
+        imagePath,
+        metadataPath,
+        public: c.options.public,
+        filenamePrefix: metadata.artifactBaseName,
+        ...c.options.gistId ? { gistId: c.options.gistId } : {},
+        ...c.options.description ? { description: c.options.description } : {}
+      });
+      return c.ok({
+        target: "gist",
+        qa: {
+          pass: qa.pass,
+          issueCount: qa.issues.length
+        },
+        publish: {
+          attempts: gist.attempts,
+          summary: `Published ${gist.files.length} files to gist ${gist.gistId}.`,
+          url: gist.htmlUrl
+        }
+      });
+    }
+    if (!c.options.repo) {
+      return c.error({
+        code: "MISSING_REPO",
+        message: "--repo owner/name is required when target=github.",
+        retryable: false
+      });
+    }
+    const github = await publishToGitHub({
+      imagePath,
+      metadataPath,
+      repo: c.options.repo,
+      ...c.options.branch ? { branch: c.options.branch } : {},
+      ...c.options.pathPrefix ? { pathPrefix: c.options.pathPrefix } : {},
+      ...c.options.description ? { commitMessage: c.options.description } : {}
+    });
+    const url = github.files.find((file) => file.htmlUrl)?.htmlUrl;
+    return c.ok({
+      target: "github",
+      qa: {
+        pass: qa.pass,
+        issueCount: qa.issues.length
+      },
+      publish: {
+        attempts: github.attempts,
+        summary: `Published ${github.files.length} files to ${github.repo}@${github.branch}.`,
+        url
+      }
+    });
+  }
+});
+var isMain = (() => {
+  const entrypoint = process.argv[1];
+  if (!entrypoint) {
+    return false;
+  }
+  try {
+    return realpathSync(entrypoint) === realpathSync(fileURLToPath2(import.meta.url));
+  } catch {
+    return false;
+  }
+})();
+if (isMain) {
+  cli.serve();
+}
+export {
+  cli
+};