@spectratools/graphic-designer-cli 0.8.0 → 0.10.0

package/dist/index.js

@@ -829,6 +829,21 @@ var drawLineSchema = z2.object({
   opacity: z2.number().min(0).max(1).default(1),
   shadow: drawShadowSchema.optional()
 }).strict();
+var drawArcSchema = z2.object({
+  type: z2.literal("arc"),
+  center: z2.object({
+    x: z2.number(),
+    y: z2.number()
+  }).strict(),
+  radius: z2.number().positive(),
+  startAngle: z2.number(),
+  endAngle: z2.number(),
+  color: colorHexSchema2.default("#FFFFFF"),
+  width: z2.number().min(0.5).max(32).default(2),
+  dash: z2.array(z2.number()).max(6).optional(),
+  opacity: z2.number().min(0).max(1).default(1),
+  shadow: drawShadowSchema.optional()
+}).strict();
 var drawPointSchema = z2.object({
   x: z2.number(),
   y: z2.number()
@@ -913,6 +928,7 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawCircleSchema,
   drawTextSchema,
   drawLineSchema,
+  drawArcSchema,
   drawBezierSchema,
   drawPathSchema,
   drawBadgeSchema,
@@ -1049,6 +1065,8 @@ var connectionElementSchema = z2.object({
   label: z2.string().min(1).max(200).optional(),
   labelPosition: z2.enum(["start", "middle", "end"]).default("middle"),
   color: colorHexSchema2.optional(),
+  fromColor: colorHexSchema2.optional(),
+  toColor: colorHexSchema2.optional(),
   width: z2.number().min(0.5).max(10).optional(),
   strokeWidth: z2.number().min(0.5).max(10).default(2),
   arrowSize: z2.number().min(4).max(32).optional(),
@@ -1880,6 +1898,38 @@ function renderFlowNode(ctx, node, bounds, theme) {
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
   }
+  if (node.accentColor) {
+    const barWidth = node.accentBarWidth ?? 3;
+    const effectiveRadius = node.shape === "box" ? 0 : cornerRadius;
+    ctx.save();
+    ctx.beginPath();
+    ctx.roundRect(bounds.x, bounds.y, bounds.width, bounds.height, effectiveRadius);
+    ctx.clip();
+    ctx.fillStyle = node.accentColor;
+    ctx.fillRect(bounds.x, bounds.y, barWidth, bounds.height);
+    ctx.restore();
+  }
+  if (node.glowColor) {
+    const glowW = node.glowWidth ?? 16;
+    const glowOp = node.glowOpacity ?? 0.15;
+    ctx.save();
+    ctx.beginPath();
+    ctx.roundRect(bounds.x, bounds.y, bounds.width, bounds.height, cornerRadius);
+    ctx.clip();
+    const barOffset = node.accentColor ? node.accentBarWidth ?? 3 : 0;
+    const gradient = ctx.createLinearGradient(
+      bounds.x + barOffset,
+      bounds.y,
+      bounds.x + barOffset + glowW,
+      bounds.y
+    );
+    gradient.addColorStop(0, node.glowColor);
+    gradient.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.globalAlpha = glowOp;
+    ctx.fillStyle = gradient;
+    ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    ctx.restore();
+  }
   const headingFont = resolveFont(theme.fonts.heading, "heading");
   const bodyFont = resolveFont(theme.fonts.body, "body");
   const monoFont = resolveFont(theme.fonts.mono, "mono");
@@ -3155,16 +3205,6 @@ function drawBezier(ctx, points, style) {
   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
 var ELLIPSE_KAPPA = 4 * (Math.sqrt(2) - 1) / 3;
@@ -3404,11 +3444,36 @@ function pointAlongPolyline(points, t) {
   }
   return points[points.length - 1];
 }
-function drawCubicInterpolatedPath(ctx, points, style) {
+function createConnectionGradient(ctx, start, end, fromColor, baseColor, toColor) {
+  const gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+  gradient.addColorStop(0, fromColor);
+  gradient.addColorStop(0.5, baseColor);
+  gradient.addColorStop(1, toColor);
+  return gradient;
+}
+function resolveConnectionStroke(ctx, start, end, fromColor, baseColor, toColor) {
+  if (!fromColor || !toColor) {
+    return baseColor;
+  }
+  return createConnectionGradient(ctx, start, end, fromColor, baseColor, toColor);
+}
+function drawOrthogonalPathWithStroke(ctx, from, to, style, stroke) {
+  const midX = (from.x + to.x) / 2;
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = style.width;
+  ctx.setLineDash(style.dash ?? []);
+  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();
+}
+function drawCubicInterpolatedPath(ctx, points, style, stroke) {
   if (points.length < 2) {
     return;
   }
-  ctx.strokeStyle = style.color;
+  ctx.strokeStyle = stroke;
   ctx.lineWidth = style.width;
   ctx.setLineDash(style.dash ?? []);
   ctx.beginPath();
@@ -3479,7 +3544,8 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
       conn.fromAnchor,
       conn.toAnchor
     );
-    ctx.strokeStyle = style.color;
+    const stroke = resolveConnectionStroke(ctx, p0, p3, conn.fromColor, style.color, conn.toColor);
+    ctx.strokeStyle = stroke;
     ctx.lineWidth = style.width;
     ctx.setLineDash(style.dash ?? []);
     ctx.beginPath();
@@ -3521,7 +3587,8 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     );
     const [p0, cp1, cp2, pMid] = first;
     const [, cp3, cp4, p3] = second;
-    ctx.strokeStyle = style.color;
+    const stroke = resolveConnectionStroke(ctx, p0, p3, conn.fromColor, style.color, conn.toColor);
+    ctx.strokeStyle = stroke;
     ctx.lineWidth = style.width;
     ctx.setLineDash(style.dash ?? []);
     ctx.beginPath();
@@ -3564,10 +3631,18 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     endPoint = linePoints[linePoints.length - 1] ?? linePoints[0];
     startAngle = Math.atan2(startSegment.y - linePoints[0].y, startSegment.x - linePoints[0].x) + Math.PI;
     endAngle = Math.atan2(endPoint.y - endStart.y, endPoint.x - endStart.x);
+    const stroke = resolveConnectionStroke(
+      ctx,
+      startPoint,
+      endPoint,
+      conn.fromColor,
+      style.color,
+      conn.toColor
+    );
     if (useElkRoute) {
-      drawCubicInterpolatedPath(ctx, linePoints, style);
+      drawCubicInterpolatedPath(ctx, linePoints, style, stroke);
     } else {
-      drawOrthogonalPath(ctx, startPoint, endPoint, style);
+      drawOrthogonalPathWithStroke(ctx, startPoint, endPoint, style, stroke);
     }
     labelPoint = pointAlongPolyline(linePoints, labelT);
   }
@@ -3872,6 +3947,9 @@ function measureTextBounds(ctx, options) {
 function angleBetween(from, to) {
   return Math.atan2(to.y - from.y, to.x - from.x);
 }
+function degreesToRadians(angle) {
+  return angle * Math.PI / 180;
+}
 function pathBounds(operations) {
   let minX = Number.POSITIVE_INFINITY;
   let minY = Number.POSITIVE_INFINITY;
@@ -4109,6 +4187,34 @@ function renderDrawCommands(ctx, commands, theme) {
         });
         break;
       }
+      case "arc": {
+        const startAngle = degreesToRadians(command.startAngle);
+        const endAngle = degreesToRadians(command.endAngle);
+        withOpacity(ctx, command.opacity, () => {
+          applyDrawShadow(ctx, command.shadow);
+          ctx.beginPath();
+          ctx.setLineDash(command.dash ?? []);
+          ctx.lineWidth = command.width;
+          ctx.strokeStyle = command.color;
+          ctx.arc(command.center.x, command.center.y, command.radius, startAngle, endAngle);
+          ctx.stroke();
+        });
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: expandRect(
+            {
+              x: command.center.x - command.radius,
+              y: command.center.y - command.radius,
+              width: command.radius * 2,
+              height: command.radius * 2
+            },
+            command.width / 2
+          ),
+          foregroundColor: command.color
+        });
+        break;
+      }
       case "bezier": {
         const points = command.points;
         withOpacity(ctx, command.opacity, () => {
@@ -4265,6 +4371,84 @@ function renderDrawCommands(ctx, commands, theme) {
         });
         break;
       }
+      case "text-row": {
+        const segments = command.segments;
+        if (segments.length === 0) break;
+        const resolveSegment = (seg) => ({
+          text: seg.text,
+          fontSize: seg.fontSize ?? command.defaultFontSize,
+          fontWeight: seg.fontWeight ?? command.defaultFontWeight,
+          fontFamily: resolveDrawFont(theme, seg.fontFamily ?? command.defaultFontFamily),
+          color: seg.color ?? command.defaultColor
+        });
+        const measured = [];
+        let totalWidth = 0;
+        let maxAscent = 0;
+        let maxDescent = 0;
+        for (const seg of segments) {
+          const resolved = resolveSegment(seg);
+          applyFont(ctx, {
+            size: resolved.fontSize,
+            weight: resolved.fontWeight,
+            family: resolved.fontFamily
+          });
+          const metrics = ctx.measureText(resolved.text);
+          const width = metrics.width;
+          const ascent = metrics.actualBoundingBoxAscent || 0;
+          const descent = metrics.actualBoundingBoxDescent || 0;
+          totalWidth += width;
+          maxAscent = Math.max(maxAscent, ascent);
+          maxDescent = Math.max(maxDescent, descent);
+          measured.push({ width, resolved });
+        }
+        let cursorX;
+        if (command.align === "center") {
+          cursorX = command.x - totalWidth / 2;
+        } else if (command.align === "right") {
+          cursorX = command.x - totalWidth;
+        } else {
+          cursorX = command.x;
+        }
+        const startX = cursorX;
+        withOpacity(ctx, command.opacity, () => {
+          ctx.textBaseline = command.baseline;
+          for (const { width, resolved } of measured) {
+            applyFont(ctx, {
+              size: resolved.fontSize,
+              weight: resolved.fontWeight,
+              family: resolved.fontFamily
+            });
+            ctx.fillStyle = resolved.color;
+            ctx.textAlign = "left";
+            ctx.fillText(resolved.text, cursorX, command.y);
+            cursorX += width;
+          }
+        });
+        const height = Math.max(1, maxAscent + maxDescent);
+        let topY;
+        if (command.baseline === "top") {
+          topY = command.y;
+        } else if (command.baseline === "middle") {
+          topY = command.y - height / 2;
+        } else if (command.baseline === "bottom") {
+          topY = command.y - height;
+        } else {
+          topY = command.y - maxAscent;
+        }
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: {
+            x: startX,
+            y: topY,
+            width: Math.max(1, totalWidth),
+            height
+          },
+          foregroundColor: command.defaultColor,
+          backgroundColor: theme.background
+        });
+        break;
+      }
     }
   }
   return rendered;
@@ -4674,6 +4858,18 @@ async function renderDesign(input, options = {}) {
   const specHash = computeSpecHash(spec);
   const generatorVersion = options.generatorVersion ?? DEFAULT_GENERATOR_VERSION;
   const renderedAt = options.renderedAt ?? (/* @__PURE__ */ new Date()).toISOString();
+  const iteration = options.iteration;
+  if (iteration) {
+    if (!Number.isInteger(iteration.iteration) || iteration.iteration <= 0) {
+      throw new Error("Iteration metadata requires iteration to be a positive integer.");
+    }
+    if (iteration.maxIterations != null && (!Number.isInteger(iteration.maxIterations) || iteration.maxIterations <= 0)) {
+      throw new Error("Iteration metadata requires maxIterations to be a positive integer.");
+    }
+    if (iteration.maxIterations != null && iteration.maxIterations < iteration.iteration) {
+      throw new Error("Iteration metadata requires maxIterations to be >= iteration.");
+    }
+  }
   const renderScale = resolveRenderScale(spec);
   const canvas = createCanvas(spec.canvas.width * renderScale, spec.canvas.height * renderScale);
   const ctx = canvas.getContext("2d");
@@ -4914,7 +5110,8 @@ async function renderDesign(input, options = {}) {
     layout: {
       safeFrame,
       elements
-    }
+    },
+    ...iteration ? { iteration } : {}
   };
   return {
     png: pngBuffer,
@@ -5221,6 +5418,12 @@ var renderOutputSchema = z3.object({
   artifactHash: z3.string(),
   specHash: z3.string(),
   layoutMode: z3.string(),
+  iteration: z3.object({
+    current: z3.number().int().positive(),
+    max: z3.number().int().positive(),
+    isLast: z3.boolean(),
+    notes: z3.string().optional()
+  }).optional(),
   qa: z3.object({
     pass: z3.boolean(),
     issueCount: z3.number(),
@@ -5307,8 +5510,30 @@ function readCodeRange(code, start, end) {
   const lines = code.split(/\r?\n/u);
   return lines.slice(start - 1, end).join("\n");
 }
+function parseIterationMeta(options) {
+  if (options.iteration == null) {
+    if (options.maxIterations != null || options.iterationNotes || options.previousHash) {
+      throw new Error(
+        "--iteration is required when using --max-iterations, --iteration-notes, or --previous-hash."
+      );
+    }
+    return void 0;
+  }
+  if (options.maxIterations != null && options.maxIterations < options.iteration) {
+    throw new Error("--max-iterations must be greater than or equal to --iteration.");
+  }
+  return {
+    iteration: options.iteration,
+    ...options.maxIterations != null ? { maxIterations: options.maxIterations } : {},
+    ...options.iterationNotes ? { notes: options.iterationNotes } : {},
+    ...options.previousHash ? { previousHash: options.previousHash } : {}
+  };
+}
 async function runRenderPipeline(spec, options) {
-  const renderResult = await renderDesign(spec, { generatorVersion: pkg.version });
+  const renderResult = await renderDesign(spec, {
+    generatorVersion: pkg.version,
+    ...options.iteration ? { iteration: options.iteration } : {}
+  });
   const written = await writeRenderArtifacts(renderResult, options.out);
   const specPath = options.specOut ? resolve4(options.specOut) : specPathFor(written.metadataPath);
   await mkdir2(dirname3(specPath), { recursive: true });
@@ -5325,6 +5550,14 @@ async function runRenderPipeline(spec, options) {
     artifactHash: written.metadata.artifactHash,
     specHash: written.metadata.specHash,
     layoutMode: spec.layout.mode,
+    ...written.metadata.iteration ? {
+      iteration: {
+        current: written.metadata.iteration.iteration,
+        max: written.metadata.iteration.maxIterations ?? written.metadata.iteration.iteration,
+        isLast: (written.metadata.iteration.maxIterations ?? written.metadata.iteration.iteration) === written.metadata.iteration.iteration,
+        ...written.metadata.iteration.notes ? { notes: written.metadata.iteration.notes } : {}
+      }
+    } : {},
     qa: {
       pass: qa.pass,
       issueCount: qa.issues.length,
@@ -5338,6 +5571,10 @@ cli.command("render", {
     spec: z3.string().describe('Path to DesignSpec JSON file (or "-" to read JSON from stdin)'),
     out: z3.string().describe("Output file path (.png) or output directory"),
     specOut: z3.string().optional().describe("Optional explicit output path for normalized spec JSON"),
+    iteration: z3.number().int().positive().optional().describe("Optional iteration number for iterative workflows (1-indexed)"),
+    iterationNotes: z3.string().optional().describe("Optional notes for the current iteration metadata"),
+    maxIterations: z3.number().int().positive().optional().describe("Optional maximum planned iteration count"),
+    previousHash: z3.string().optional().describe("Optional artifact hash from the previous iteration"),
     allowQaFail: z3.boolean().default(false).describe("Allow render success even if QA fails")
   }),
   output: renderOutputSchema,
@@ -5352,9 +5589,26 @@ cli.command("render", {
   ],
   async run(c) {
     const spec = parseDesignSpec(await readJson(c.options.spec));
+    let iteration;
+    try {
+      iteration = parseIterationMeta({
+        ...c.options.iteration != null ? { iteration: c.options.iteration } : {},
+        ...c.options.maxIterations != null ? { maxIterations: c.options.maxIterations } : {},
+        ...c.options.iterationNotes ? { iterationNotes: c.options.iterationNotes } : {},
+        ...c.options.previousHash ? { previousHash: c.options.previousHash } : {}
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return c.error({
+        code: "INVALID_ITERATION_OPTIONS",
+        message,
+        retryable: false
+      });
+    }
     const runReport = await runRenderPipeline(spec, {
       out: c.options.out,
-      ...c.options.specOut ? { specOut: c.options.specOut } : {}
+      ...c.options.specOut ? { specOut: c.options.specOut } : {},
+      ...iteration ? { iteration } : {}
     });
     if (!runReport.qa.pass && !c.options.allowQaFail) {
       return c.error({

package/dist/qa.d.ts

@@ -1,4 +1,4 @@
-import { R as RenderMetadata, D as DesignSpec } from './spec.schema-B_Z-KNqt.js';
+import { R as RenderMetadata, D as DesignSpec } from './spec.schema-B6sXTTou.js';
 import 'zod';
 import '@napi-rs/canvas';
 

package/dist/qa.js

@@ -563,6 +563,21 @@ var drawLineSchema = z2.object({
   opacity: z2.number().min(0).max(1).default(1),
   shadow: drawShadowSchema.optional()
 }).strict();
+var drawArcSchema = z2.object({
+  type: z2.literal("arc"),
+  center: z2.object({
+    x: z2.number(),
+    y: z2.number()
+  }).strict(),
+  radius: z2.number().positive(),
+  startAngle: z2.number(),
+  endAngle: z2.number(),
+  color: colorHexSchema2.default("#FFFFFF"),
+  width: z2.number().min(0.5).max(32).default(2),
+  dash: z2.array(z2.number()).max(6).optional(),
+  opacity: z2.number().min(0).max(1).default(1),
+  shadow: drawShadowSchema.optional()
+}).strict();
 var drawPointSchema = z2.object({
   x: z2.number(),
   y: z2.number()
@@ -647,6 +662,7 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawCircleSchema,
   drawTextSchema,
   drawLineSchema,
+  drawArcSchema,
   drawBezierSchema,
   drawPathSchema,
   drawBadgeSchema,
@@ -782,6 +798,8 @@ var connectionElementSchema = z2.object({
   label: z2.string().min(1).max(200).optional(),
   labelPosition: z2.enum(["start", "middle", "end"]).default("middle"),
   color: colorHexSchema2.optional(),
+  fromColor: colorHexSchema2.optional(),
+  toColor: colorHexSchema2.optional(),
   width: z2.number().min(0.5).max(10).optional(),
   strokeWidth: z2.number().min(0.5).max(10).default(2),
   arrowSize: z2.number().min(4).max(32).optional(),

package/dist/renderer.d.ts

@@ -1,3 +1,3 @@
-export { i as DEFAULT_GENERATOR_VERSION, S as LayoutSnapshot, a as Rect, R as RenderMetadata, W as RenderResult, d as RenderedElement, a1 as WrittenArtifacts, a4 as computeSpecHash, an as inferSidecarPath, aq as renderDesign, as as writeRenderArtifacts } from './spec.schema-B_Z-KNqt.js';
+export { i as DEFAULT_GENERATOR_VERSION, S as IterationMeta, V as LayoutSnapshot, a as Rect, Y as RenderDesignOptions, R as RenderMetadata, Z as RenderResult, d as RenderedElement, a4 as WrittenArtifacts, a7 as computeSpecHash, aq as inferSidecarPath, at as renderDesign, av as writeRenderArtifacts } from './spec.schema-B6sXTTou.js';
 import 'zod';
 import '@napi-rs/canvas';