@spectratools/graphic-designer-cli 0.3.1

package/dist/renderer.js

@@ -0,0 +1,3608 @@
+// src/renderer.ts
+import { mkdir, writeFile } from "fs/promises";
+import { basename, dirname as dirname2, extname, join, resolve as resolve2 } from "path";
+import { createCanvas } from "@napi-rs/canvas";
+
+// 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/fonts.ts
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+import { GlobalFonts } from "@napi-rs/canvas";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var fontsDir = resolve(__dirname, "../fonts");
+var loaded = false;
+function register(filename, family) {
+  GlobalFonts.registerFromPath(resolve(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 parseHexColor(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 = parseHexColor(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/utils/color.ts
+function parseChannel(hex, offset) {
+  return Number.parseInt(hex.slice(offset, offset + 2), 16);
+}
+function parseHexColor2(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 = parseHexColor2(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;
+}
+
+// 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 resolveTheme(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: resolveTheme(themeName)
+  });
+  return tokens.map((line) => ({
+    tokens: line.map((token) => ({
+      text: token.content,
+      color: normalizeTokenColor(token)
+    }))
+  }));
+}
+
+// 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 resolveTheme2(theme) {
+  if (typeof theme === "string") {
+    return builtInThemes[theme];
+  }
+  return theme;
+}
+
+// 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/spec.schema.ts
+import { z as z2 } from "zod";
+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/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 = resolveTheme2(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 canvasRect = { 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, canvasRect, 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, canvasRect, decorator.gradient);
+      ctx.restore();
+      elements.push({
+        id: `decorator-gradient-overlay-${index}`,
+        kind: "gradient-overlay",
+        bounds: { ...canvasRect },
+        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: { ...canvasRect },
+      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 = resolve2(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 = resolve2(imagePath);
+  if (extname(resolved).toLowerCase() !== ".png") {
+    return join(dirname2(resolved), `${basename(resolved)}.meta.json`);
+  }
+  return resolved.replace(/\.png$/iu, ".meta.json");
+}
+export {
+  DEFAULT_GENERATOR_VERSION,
+  computeSpecHash,
+  inferSidecarPath,
+  renderDesign,
+  writeRenderArtifacts
+};