@spectratools/graphic-designer-cli 0.12.2 → 0.14.0

package/dist/renderer.js

@@ -614,6 +614,8 @@ function estimateElementHeight(element) {
       return 130;
     case "image":
       return 220;
+    case "ring":
+      return element.radius * 2 + element.glowRadius * 2 + 16;
     case "connection":
       return 0;
   }
@@ -634,6 +636,8 @@ function estimateElementWidth(element) {
       return 280;
     case "image":
       return 320;
+    case "ring":
+      return element.radius * 2 + element.glowRadius * 2 + 16;
     case "connection":
       return 0;
   }
@@ -1248,6 +1252,30 @@ function drawRainbowRule(ctx, x, y, width, thickness = 2, colors = [...DEFAULT_R
   ctx.fill();
   ctx.restore();
 }
+function drawEdgeVignette(ctx, width, height, color = "#000000", topHeight = 35, bottomHeight = 55, topOpacity = 0.3, bottomOpacity = 0.4) {
+  if (width <= 0 || height <= 0) {
+    return;
+  }
+  if (topHeight > 0 && topOpacity > 0) {
+    const topGradient = ctx.createLinearGradient(0, 0, 0, topHeight);
+    topGradient.addColorStop(0, withAlpha2(color, clamp01(topOpacity)));
+    topGradient.addColorStop(1, withAlpha2(color, 0));
+    ctx.save();
+    ctx.fillStyle = topGradient;
+    ctx.fillRect(0, 0, width, topHeight);
+    ctx.restore();
+  }
+  if (bottomHeight > 0 && bottomOpacity > 0) {
+    const bottomY = height - bottomHeight;
+    const bottomGradient = ctx.createLinearGradient(0, bottomY, 0, height);
+    bottomGradient.addColorStop(0, withAlpha2(color, 0));
+    bottomGradient.addColorStop(1, withAlpha2(color, clamp01(bottomOpacity)));
+    ctx.save();
+    ctx.fillStyle = bottomGradient;
+    ctx.fillRect(0, bottomY, width, bottomHeight);
+    ctx.restore();
+  }
+}
 function drawVignette(ctx, width, height, intensity = 0.3, color = "#000000") {
   if (width <= 0 || height <= 0 || intensity <= 0) {
     return;
@@ -3330,10 +3358,118 @@ function renderDrawCommands(ctx, commands, theme) {
         });
         break;
       }
+      case "stats-bar": {
+        const barRect = renderStatsBar(ctx, command, theme);
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: barRect,
+          foregroundColor: command.valueColor,
+          backgroundColor: theme.background
+        });
+        break;
+      }
     }
   }
   return rendered;
 }
+function renderStatsBar(ctx, command, theme) {
+  const canvasWidth = ctx.canvas.width;
+  const valueFontFamily = resolveDrawFont(theme, command.valueFontFamily);
+  const labelFontFamily = resolveDrawFont(theme, command.labelFontFamily);
+  const spaceWidth = 4;
+  const measuredItems = [];
+  for (const item of command.items) {
+    applyFont(ctx, {
+      size: command.valueFontSize,
+      weight: command.valueFontWeight,
+      family: valueFontFamily
+    });
+    const valueWidth = ctx.measureText(item.value).width;
+    applyFont(ctx, {
+      size: command.labelFontSize,
+      weight: command.labelFontWeight,
+      family: labelFontFamily
+    });
+    const labelWidth = ctx.measureText(item.label).width;
+    measuredItems.push({
+      valueWidth,
+      labelWidth,
+      totalWidth: valueWidth + spaceWidth + labelWidth
+    });
+  }
+  let separatorWidth = 0;
+  let separatorText = "";
+  if (command.separator !== "none" && command.items.length > 1) {
+    separatorText = command.separator === "dot" ? "\xB7" : "|";
+    const sepFontSize = Math.max(command.valueFontSize, command.labelFontSize);
+    applyFont(ctx, { size: sepFontSize, weight: 400, family: labelFontFamily });
+    separatorWidth = ctx.measureText(separatorText).width;
+  }
+  const itemsWidth = measuredItems.reduce((sum, m) => sum + m.totalWidth, 0);
+  const gapCount = command.items.length - 1;
+  const totalWidth = itemsWidth + gapCount * (command.gap + separatorWidth);
+  let cursorX = (canvasWidth - totalWidth) / 2;
+  const startX = cursorX;
+  applyFont(ctx, {
+    size: command.valueFontSize,
+    weight: command.valueFontWeight,
+    family: valueFontFamily
+  });
+  const valueMetrics = ctx.measureText("M");
+  const valueAscent = valueMetrics.actualBoundingBoxAscent || command.valueFontSize * 0.75;
+  const valueDescent = valueMetrics.actualBoundingBoxDescent || command.valueFontSize * 0.25;
+  applyFont(ctx, {
+    size: command.labelFontSize,
+    weight: command.labelFontWeight,
+    family: labelFontFamily
+  });
+  const labelMetrics = ctx.measureText("M");
+  const labelAscent = labelMetrics.actualBoundingBoxAscent || command.labelFontSize * 0.75;
+  const labelDescent = labelMetrics.actualBoundingBoxDescent || command.labelFontSize * 0.25;
+  const maxAscent = Math.max(valueAscent, labelAscent);
+  const maxDescent = Math.max(valueDescent, labelDescent);
+  withOpacity(ctx, command.opacity, () => {
+    for (let i = 0; i < command.items.length; i++) {
+      const item = command.items[i];
+      const measured = measuredItems[i];
+      applyFont(ctx, {
+        size: command.valueFontSize,
+        weight: command.valueFontWeight,
+        family: valueFontFamily
+      });
+      ctx.fillStyle = command.valueColor;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "alphabetic";
+      ctx.fillText(item.value, cursorX, command.y);
+      cursorX += measured.valueWidth + spaceWidth;
+      applyFont(ctx, {
+        size: command.labelFontSize,
+        weight: command.labelFontWeight,
+        family: labelFontFamily
+      });
+      ctx.fillStyle = command.labelColor;
+      ctx.fillText(item.label, cursorX, command.y);
+      cursorX += measured.labelWidth;
+      if (i < command.items.length - 1 && command.separator !== "none") {
+        const sepFontSize = Math.max(command.valueFontSize, command.labelFontSize);
+        applyFont(ctx, { size: sepFontSize, weight: 400, family: labelFontFamily });
+        ctx.fillStyle = command.separatorColor;
+        ctx.textAlign = "center";
+        ctx.fillText(separatorText, cursorX + command.gap / 2 + separatorWidth / 2, command.y);
+        ctx.textAlign = "left";
+        cursorX += command.gap + separatorWidth;
+      }
+    }
+  });
+  const height = Math.max(1, maxAscent + maxDescent);
+  return {
+    x: startX,
+    y: command.y - maxAscent,
+    width: Math.max(1, totalWidth),
+    height
+  };
+}
 
 // src/renderers/image.ts
 import { loadImage } from "@napi-rs/canvas";
@@ -3420,6 +3556,110 @@ async function renderImageElement(ctx, image, bounds, theme) {
   }
 }
 
+// src/renderers/ring.ts
+function renderRingElement(ctx, ring, bounds, theme) {
+  const cx = bounds.x + bounds.width / 2;
+  const cy = bounds.y + bounds.height / 2;
+  const { radius, strokeWidth, segments } = ring;
+  if (ring.glowRadius > 0) {
+    const glowColor = ring.glowColor ?? segments[0].color;
+    ctx.save();
+    ctx.globalAlpha = 0.15;
+    ctx.beginPath();
+    ctx.arc(cx, cy, radius + ring.glowRadius, 0, Math.PI * 2);
+    ctx.fillStyle = glowColor;
+    ctx.fill();
+    ctx.restore();
+  }
+  if (ring.fill || ring.fillOpacity > 0) {
+    const fillColor = ring.fill ?? segments[0].color;
+    ctx.save();
+    ctx.globalAlpha = ring.fillOpacity;
+    ctx.beginPath();
+    ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+    ctx.restore();
+  }
+  ctx.save();
+  ctx.globalAlpha = 0.2;
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.strokeStyle = theme.border;
+  ctx.lineWidth = strokeWidth;
+  ctx.stroke();
+  ctx.restore();
+  const segmentAngle = 2 * Math.PI / segments.length;
+  for (let i = 0; i < segments.length; i++) {
+    const startAngle = i * segmentAngle - Math.PI / 2;
+    ctx.beginPath();
+    ctx.arc(cx, cy, radius, startAngle, startAngle + segmentAngle);
+    ctx.strokeStyle = segments[i].color;
+    ctx.lineWidth = strokeWidth;
+    ctx.stroke();
+  }
+  if (ring.showCycleArrows) {
+    const arrowArcRadius = radius + strokeWidth + 4;
+    const arrowColor = segments[0].color;
+    const numArrows = Math.min(segments.length, 4);
+    const arrowSpacing = 2 * Math.PI / numArrows;
+    for (let i = 0; i < numArrows; i++) {
+      const baseAngle = i * arrowSpacing - Math.PI / 2;
+      const arcStart = baseAngle + 0.15;
+      const arcEnd = baseAngle + arrowSpacing - 0.15;
+      ctx.beginPath();
+      ctx.arc(cx, cy, arrowArcRadius, arcStart, arcEnd);
+      ctx.strokeStyle = arrowColor;
+      ctx.lineWidth = Math.max(1, strokeWidth * 0.6);
+      ctx.stroke();
+      const headAngle = arcEnd;
+      const headX = cx + arrowArcRadius * Math.cos(headAngle);
+      const headY = cy + arrowArcRadius * Math.sin(headAngle);
+      const tangentAngle = headAngle + Math.PI / 2;
+      const headSize = Math.max(4, strokeWidth * 2);
+      ctx.beginPath();
+      ctx.moveTo(headX, headY);
+      ctx.lineTo(
+        headX - headSize * Math.cos(tangentAngle - 0.4),
+        headY - headSize * Math.sin(tangentAngle - 0.4)
+      );
+      ctx.lineTo(
+        headX - headSize * Math.cos(tangentAngle + 0.4),
+        headY - headSize * Math.sin(tangentAngle + 0.4)
+      );
+      ctx.closePath();
+      ctx.fillStyle = arrowColor;
+      ctx.fill();
+    }
+  }
+  if (ring.label) {
+    const labelColor = ring.labelColor ?? theme.text;
+    const labelSize = ring.labelSize;
+    const bodyFont = resolveFont(theme.fonts.body, "body");
+    applyFont(ctx, { size: labelSize, weight: 500, family: bodyFont });
+    ctx.fillStyle = labelColor;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    const lines = ring.label.split("\\n");
+    const lineHeight = labelSize * 1.3;
+    const totalHeight = lines.length * lineHeight;
+    const startY = cy - totalHeight / 2 + lineHeight / 2;
+    for (let i = 0; i < lines.length; i++) {
+      ctx.fillText(lines[i], cx, startY + i * lineHeight);
+    }
+    ctx.textAlign = "left";
+    ctx.textBaseline = "alphabetic";
+  }
+  return [
+    {
+      id: `ring-${ring.id}`,
+      kind: "shape",
+      bounds,
+      foregroundColor: segments[0].color
+    }
+  ];
+}
+
 // src/renderers/shape.ts
 function renderShapeElement(ctx, shape, bounds, theme) {
   const fill = shape.fill ?? theme.surfaceMuted;
@@ -3779,6 +4019,27 @@ var drawTextRowSchema = z2.object({
   defaultColor: colorHexSchema2.default("#FFFFFF"),
   opacity: z2.number().min(0).max(1).default(1)
 }).strict();
+var drawStatsBarItemSchema = z2.object({
+  value: z2.string().min(1).max(50),
+  label: z2.string().min(1).max(100)
+}).strict();
+var drawStatsBarSchema = z2.object({
+  type: z2.literal("stats-bar"),
+  y: z2.number().describe("Vertical position of the stats bar"),
+  items: z2.array(drawStatsBarItemSchema).min(1).max(8),
+  separator: z2.enum(["dot", "pipe", "none"]).default("dot"),
+  valueColor: colorHexSchema2.default("#FFFFFF"),
+  valueFontSize: z2.number().min(8).max(72).default(18),
+  valueFontWeight: z2.number().int().min(100).max(900).default(700),
+  valueFontFamily: drawFontFamilySchema.default("mono"),
+  labelColor: colorHexSchema2.default("#AAAAAA"),
+  labelFontSize: z2.number().min(8).max(72).default(14),
+  labelFontWeight: z2.number().int().min(100).max(900).default(400),
+  labelFontFamily: drawFontFamilySchema.default("body"),
+  separatorColor: colorHexSchema2.default("#666666"),
+  gap: z2.number().min(0).max(100).default(24),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -3790,7 +4051,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawBadgeSchema,
   drawGradientRectSchema,
   drawGridSchema,
-  drawTextRowSchema
+  drawTextRowSchema,
+  drawStatsBarSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -3991,6 +4253,24 @@ var imageElementSchema = z2.object({
   fit: z2.enum(["contain", "cover", "fill", "none"]).default("contain"),
   borderRadius: z2.number().min(0).default(0)
 }).strict();
+var ringSegmentSchema = z2.object({
+  color: colorHexSchema2
+}).strict();
+var ringElementSchema = z2.object({
+  type: z2.literal("ring"),
+  id: z2.string().min(1).max(120),
+  radius: z2.number().min(8).max(512).default(48),
+  strokeWidth: z2.number().min(1).max(32).default(2),
+  label: z2.string().max(100).optional(),
+  labelColor: colorHexSchema2.optional(),
+  labelSize: z2.number().min(8).max(48).default(12),
+  segments: z2.array(ringSegmentSchema).min(1).max(24).default([{ color: "#4A7BF7" }]),
+  glowRadius: z2.number().min(0).max(64).default(0),
+  glowColor: colorHexSchema2.optional(),
+  showCycleArrows: z2.boolean().default(false),
+  fill: colorHexSchema2.optional(),
+  fillOpacity: z2.number().min(0).max(1).default(0.05)
+}).strict();
 var elementSchema = z2.discriminatedUnion("type", [
   cardElementSchema,
   flowNodeElementSchema,
@@ -3999,7 +4279,8 @@ var elementSchema = z2.discriminatedUnion("type", [
   terminalElementSchema,
   textElementSchema,
   shapeElementSchema,
-  imageElementSchema
+  imageElementSchema,
+  ringElementSchema
 ]);
 var diagramCenterSchema = z2.object({
   x: z2.number(),
@@ -4120,8 +4401,13 @@ var decoratorSchema = z2.discriminatedUnion("type", [
   }).strict(),
   z2.object({
     type: z2.literal("vignette"),
+    mode: z2.enum(["radial", "edge"]).default("radial"),
     intensity: z2.number().min(0).max(1).default(0.3),
-    color: colorHexSchema2.default("#000000")
+    color: colorHexSchema2.default("#000000"),
+    edgeTopHeight: z2.number().min(0).max(200).default(35),
+    edgeBottomHeight: z2.number().min(0).max(200).default(55),
+    edgeTopOpacity: z2.number().min(0).max(1).default(0.3),
+    edgeBottomOpacity: z2.number().min(0).max(1).default(0.4)
   }).strict(),
   z2.object({
     type: z2.literal("gradient-overlay"),
@@ -4460,7 +4746,16 @@ async function renderDesign(input, options = {}) {
   const deferredVignettes = [];
   for (const [index, decorator] of spec.decorators.entries()) {
     if (decorator.type === "vignette") {
-      deferredVignettes.push({ index, intensity: decorator.intensity, color: decorator.color });
+      deferredVignettes.push({
+        index,
+        mode: decorator.mode,
+        intensity: decorator.intensity,
+        color: decorator.color,
+        edgeTopHeight: decorator.edgeTopHeight,
+        edgeBottomHeight: decorator.edgeBottomHeight,
+        edgeTopOpacity: decorator.edgeTopOpacity,
+        edgeBottomOpacity: decorator.edgeBottomOpacity
+      });
       continue;
     }
     if (decorator.type === "gradient-overlay") {
@@ -4533,6 +4828,9 @@ async function renderDesign(input, options = {}) {
       case "image":
         elements.push(...await renderImageElement(ctx, element, rect, theme));
         break;
+      case "ring":
+        elements.push(...renderRingElement(ctx, element, rect, theme));
+        break;
     }
   }
   const nodeBounds = spec.elements.filter((element) => element.type !== "connection").map((element) => elementRects.get(element.id)).filter((rect) => rect != null);
@@ -4587,7 +4885,20 @@ async function renderDesign(input, options = {}) {
   }
   elements.push(...renderDrawCommands(ctx, spec.draw, theme));
   for (const vignette of deferredVignettes) {
-    drawVignette(ctx, spec.canvas.width, spec.canvas.height, vignette.intensity, vignette.color);
+    if (vignette.mode === "edge") {
+      drawEdgeVignette(
+        ctx,
+        spec.canvas.width,
+        spec.canvas.height,
+        vignette.color,
+        vignette.edgeTopHeight,
+        vignette.edgeBottomHeight,
+        vignette.edgeTopOpacity,
+        vignette.edgeBottomOpacity
+      );
+    } else {
+      drawVignette(ctx, spec.canvas.width, spec.canvas.height, vignette.intensity, vignette.color);
+    }
     elements.push({
       id: `decorator-vignette-${vignette.index}`,
       kind: "vignette",