@spectratools/graphic-designer-cli 0.8.0 → 0.9.0

package/dist/cli.js

@@ -1867,6 +1867,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");
@@ -4248,6 +4280,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;

package/dist/index.js

@@ -1880,6 +1880,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");
@@ -4265,6 +4297,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;

package/dist/renderer.js

@@ -473,6 +473,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");
@@ -3086,6 +3118,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectratools/graphic-designer-cli",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Deterministic visual content generator — code screenshots, terminal shots, flowcharts, and infographics. No browser dependency.",
   "type": "module",
   "license": "MIT",