@spectratools/graphic-designer-cli 0.7.1 → 0.9.0

package/dist/cli.js

@@ -879,6 +879,26 @@ var drawGridSchema = z2.object({
   offsetX: z2.number().default(0),
   offsetY: z2.number().default(0)
 }).strict();
+var drawTextRowSegmentSchema = z2.object({
+  text: z2.string().min(1).max(500),
+  color: colorHexSchema2.optional(),
+  fontSize: z2.number().min(6).max(200).optional(),
+  fontWeight: z2.number().int().min(100).max(900).optional(),
+  fontFamily: drawFontFamilySchema.optional()
+}).strict();
+var drawTextRowSchema = z2.object({
+  type: z2.literal("text-row"),
+  segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
+  x: z2.number(),
+  y: z2.number(),
+  align: z2.enum(["left", "center", "right"]).default("center"),
+  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
+  defaultFontSize: z2.number().min(6).max(200).default(16),
+  defaultFontWeight: z2.number().int().min(100).max(900).default(400),
+  defaultFontFamily: drawFontFamilySchema.default("body"),
+  defaultColor: colorHexSchema2.default("#FFFFFF"),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -888,7 +908,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawPathSchema,
   drawBadgeSchema,
   drawGradientRectSchema,
-  drawGridSchema
+  drawGridSchema,
+  drawTextRowSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -992,7 +1013,14 @@ var flowNodeElementSchema = z2.object({
   badgeColor: colorHexSchema2.optional(),
   badgeBackground: colorHexSchema2.optional(),
   badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
-  shadow: flowNodeShadowSchema.optional()
+  shadow: flowNodeShadowSchema.optional(),
+  // Accent bar (left edge colored bar)
+  accentColor: colorHexSchema2.optional(),
+  accentBarWidth: z2.number().min(0).max(16).default(3),
+  // Inner glow (gradient overlay from accent color inward)
+  glowColor: colorHexSchema2.optional(),
+  glowWidth: z2.number().min(0).max(64).default(16),
+  glowOpacity: z2.number().min(0).max(1).default(0.15)
 }).strict();
 var anchorHintSchema = z2.union([
   z2.enum(["top", "bottom", "left", "right", "center"]),
@@ -1839,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");
@@ -4220,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.d.ts

@@ -1,6 +1,6 @@
 import { Cli } from 'incur';
-import { T as ThemeInput, D as DesignSpec, a as Rect$1, b as DrawCommand, c as Theme, d as RenderedElement, A as AnchorHint, C as ConnectionElement } from './spec.schema-BDvtn_mJ.js';
-export { e as AutoLayoutConfig, B as BuiltInTheme, f as CardElement, g as CodeBlockElement, h as ConstraintSpec, i as DEFAULT_GENERATOR_VERSION, j as DEFAULT_RAINBOW_COLORS, k as Decorator, l as DesignCardSpec, m as DesignSafeFrame, n as DesignTheme, o as DiagramElement, p as DiagramLayout, q as DiagramSpec, r as DrawBadge, s as DrawBezier, t as DrawCircle, u as DrawFontFamily, v as DrawGradientRect, w as DrawLine, x as DrawPath, y as DrawPoint, z as DrawRect, E as DrawShadow, F as DrawText, G as Element, H as FlowNodeElement, I as Gradient, J as GradientOverlayDecorator, K as GradientSpec, L as GradientStop, M as GridLayoutConfig, N as ImageElement, O as LayoutConfig, P as LayoutSnapshot, Q as ManualLayoutConfig, S as RainbowRuleDecorator, R as RenderMetadata, U as RenderResult, V as ShapeElement, W as StackLayoutConfig, X as TerminalElement, Y as TextElement, Z as ThemeInput, _ as VignetteDecorator, $ as WrittenArtifacts, a0 as builtInThemeBackgrounds, a1 as builtInThemes, a2 as computeSpecHash, a3 as connectionElementSchema, a4 as defaultAutoLayout, a5 as defaultCanvas, a6 as defaultConstraints, a7 as defaultGridLayout, a8 as defaultLayout, a9 as defaultStackLayout, aa as defaultTheme, ab as deriveSafeFrame, ac as designSpecSchema, ad as diagramElementSchema, ae as diagramLayoutSchema, af as diagramSpecSchema, ag as drawGradientRect, ah as drawRainbowRule, ai as drawVignette, aj as flowNodeElementSchema, ak as inferLayout, al as inferSidecarPath, am as parseDesignSpec, an as parseDiagramSpec, ao as renderDesign, ap as resolveTheme, aq as writeRenderArtifacts } from './spec.schema-BDvtn_mJ.js';
+import { T as ThemeInput, D as DesignSpec, a as Rect$1, b as DrawCommand, c as Theme, d as RenderedElement, A as AnchorHint, C as ConnectionElement } from './spec.schema-B_Z-KNqt.js';
+export { e as AutoLayoutConfig, B as BuiltInTheme, f as CardElement, g as CodeBlockElement, h as ConstraintSpec, i as DEFAULT_GENERATOR_VERSION, j as DEFAULT_RAINBOW_COLORS, k as Decorator, l as DesignCardSpec, m as DesignSafeFrame, n as DesignTheme, o as DiagramElement, p as DiagramLayout, q as DiagramSpec, r as DrawBadge, s as DrawBezier, t as DrawCircle, u as DrawFontFamily, v as DrawGradientRect, w as DrawLine, x as DrawPath, y as DrawPoint, z as DrawRect, E as DrawShadow, F as DrawText, G as DrawTextRow, H as DrawTextRowSegment, I as Element, J as FlowNodeElement, K as Gradient, L as GradientOverlayDecorator, M as GradientSpec, N as GradientStop, O as GridLayoutConfig, P as ImageElement, Q as LayoutConfig, S as LayoutSnapshot, U as ManualLayoutConfig, V as RainbowRuleDecorator, R as RenderMetadata, W as RenderResult, X as ShapeElement, Y as StackLayoutConfig, Z as TerminalElement, _ as TextElement, $ as ThemeInput, a0 as VignetteDecorator, a1 as WrittenArtifacts, a2 as builtInThemeBackgrounds, a3 as builtInThemes, a4 as computeSpecHash, a5 as connectionElementSchema, a6 as defaultAutoLayout, a7 as defaultCanvas, a8 as defaultConstraints, a9 as defaultGridLayout, aa as defaultLayout, ab as defaultStackLayout, ac as defaultTheme, ad as deriveSafeFrame, ae as designSpecSchema, af as diagramElementSchema, ag as diagramLayoutSchema, ah as diagramSpecSchema, ai as drawGradientRect, aj as drawRainbowRule, ak as drawVignette, al as flowNodeElementSchema, am as inferLayout, an as inferSidecarPath, ao as parseDesignSpec, ap as parseDiagramSpec, aq as renderDesign, ar as resolveTheme, as as writeRenderArtifacts } from './spec.schema-B_Z-KNqt.js';
 import { SKRSContext2D } from '@napi-rs/canvas';
 export { QaIssue, QaReferenceResult, QaReport, QaSeverity, readMetadata, runQa } from './qa.js';
 import { Highlighter } from 'shiki';

package/dist/index.js

@@ -888,6 +888,26 @@ var drawGridSchema = z2.object({
   offsetX: z2.number().default(0),
   offsetY: z2.number().default(0)
 }).strict();
+var drawTextRowSegmentSchema = z2.object({
+  text: z2.string().min(1).max(500),
+  color: colorHexSchema2.optional(),
+  fontSize: z2.number().min(6).max(200).optional(),
+  fontWeight: z2.number().int().min(100).max(900).optional(),
+  fontFamily: drawFontFamilySchema.optional()
+}).strict();
+var drawTextRowSchema = z2.object({
+  type: z2.literal("text-row"),
+  segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
+  x: z2.number(),
+  y: z2.number(),
+  align: z2.enum(["left", "center", "right"]).default("center"),
+  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
+  defaultFontSize: z2.number().min(6).max(200).default(16),
+  defaultFontWeight: z2.number().int().min(100).max(900).default(400),
+  defaultFontFamily: drawFontFamilySchema.default("body"),
+  defaultColor: colorHexSchema2.default("#FFFFFF"),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -897,7 +917,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawPathSchema,
   drawBadgeSchema,
   drawGradientRectSchema,
-  drawGridSchema
+  drawGridSchema,
+  drawTextRowSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -1002,7 +1023,14 @@ var flowNodeElementSchema = z2.object({
   badgeColor: colorHexSchema2.optional(),
   badgeBackground: colorHexSchema2.optional(),
   badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
-  shadow: flowNodeShadowSchema.optional()
+  shadow: flowNodeShadowSchema.optional(),
+  // Accent bar (left edge colored bar)
+  accentColor: colorHexSchema2.optional(),
+  accentBarWidth: z2.number().min(0).max(16).default(3),
+  // Inner glow (gradient overlay from accent color inward)
+  glowColor: colorHexSchema2.optional(),
+  glowWidth: z2.number().min(0).max(64).default(16),
+  glowOpacity: z2.number().min(0).max(1).default(0.15)
 }).strict();
 var anchorHintSchema = z2.union([
   z2.enum(["top", "bottom", "left", "right", "center"]),
@@ -1852,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");
@@ -4237,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/qa.d.ts

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

package/dist/qa.js

@@ -622,6 +622,26 @@ var drawGridSchema = z2.object({
   offsetX: z2.number().default(0),
   offsetY: z2.number().default(0)
 }).strict();
+var drawTextRowSegmentSchema = z2.object({
+  text: z2.string().min(1).max(500),
+  color: colorHexSchema2.optional(),
+  fontSize: z2.number().min(6).max(200).optional(),
+  fontWeight: z2.number().int().min(100).max(900).optional(),
+  fontFamily: drawFontFamilySchema.optional()
+}).strict();
+var drawTextRowSchema = z2.object({
+  type: z2.literal("text-row"),
+  segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
+  x: z2.number(),
+  y: z2.number(),
+  align: z2.enum(["left", "center", "right"]).default("center"),
+  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
+  defaultFontSize: z2.number().min(6).max(200).default(16),
+  defaultFontWeight: z2.number().int().min(100).max(900).default(400),
+  defaultFontFamily: drawFontFamilySchema.default("body"),
+  defaultColor: colorHexSchema2.default("#FFFFFF"),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -631,7 +651,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawPathSchema,
   drawBadgeSchema,
   drawGradientRectSchema,
-  drawGridSchema
+  drawGridSchema,
+  drawTextRowSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -735,7 +756,14 @@ var flowNodeElementSchema = z2.object({
   badgeColor: colorHexSchema2.optional(),
   badgeBackground: colorHexSchema2.optional(),
   badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
-  shadow: flowNodeShadowSchema.optional()
+  shadow: flowNodeShadowSchema.optional(),
+  // Accent bar (left edge colored bar)
+  accentColor: colorHexSchema2.optional(),
+  accentBarWidth: z2.number().min(0).max(16).default(3),
+  // Inner glow (gradient overlay from accent color inward)
+  glowColor: colorHexSchema2.optional(),
+  glowWidth: z2.number().min(0).max(64).default(16),
+  glowOpacity: z2.number().min(0).max(1).default(0.15)
 }).strict();
 var anchorHintSchema = z2.union([
   z2.enum(["top", "bottom", "left", "right", "center"]),

package/dist/renderer.d.ts

@@ -1,3 +1,3 @@
-export { i as DEFAULT_GENERATOR_VERSION, P as LayoutSnapshot, a as Rect, R as RenderMetadata, U as RenderResult, d as RenderedElement, $ as WrittenArtifacts, a2 as computeSpecHash, al as inferSidecarPath, ao as renderDesign, aq as writeRenderArtifacts } from './spec.schema-BDvtn_mJ.js';
+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';
 import 'zod';
 import '@napi-rs/canvas';

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;
@@ -3494,6 +3604,26 @@ var drawGridSchema = z2.object({
   offsetX: z2.number().default(0),
   offsetY: z2.number().default(0)
 }).strict();
+var drawTextRowSegmentSchema = z2.object({
+  text: z2.string().min(1).max(500),
+  color: colorHexSchema2.optional(),
+  fontSize: z2.number().min(6).max(200).optional(),
+  fontWeight: z2.number().int().min(100).max(900).optional(),
+  fontFamily: drawFontFamilySchema.optional()
+}).strict();
+var drawTextRowSchema = z2.object({
+  type: z2.literal("text-row"),
+  segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
+  x: z2.number(),
+  y: z2.number(),
+  align: z2.enum(["left", "center", "right"]).default("center"),
+  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
+  defaultFontSize: z2.number().min(6).max(200).default(16),
+  defaultFontWeight: z2.number().int().min(100).max(900).default(400),
+  defaultFontFamily: drawFontFamilySchema.default("body"),
+  defaultColor: colorHexSchema2.default("#FFFFFF"),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -3503,7 +3633,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawPathSchema,
   drawBadgeSchema,
   drawGradientRectSchema,
-  drawGridSchema
+  drawGridSchema,
+  drawTextRowSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -3607,7 +3738,14 @@ var flowNodeElementSchema = z2.object({
   badgeColor: colorHexSchema2.optional(),
   badgeBackground: colorHexSchema2.optional(),
   badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
-  shadow: flowNodeShadowSchema.optional()
+  shadow: flowNodeShadowSchema.optional(),
+  // Accent bar (left edge colored bar)
+  accentColor: colorHexSchema2.optional(),
+  accentBarWidth: z2.number().min(0).max(16).default(3),
+  // Inner glow (gradient overlay from accent color inward)
+  glowColor: colorHexSchema2.optional(),
+  glowWidth: z2.number().min(0).max(64).default(16),
+  glowOpacity: z2.number().min(0).max(1).default(0.15)
 }).strict();
 var anchorHintSchema = z2.union([
   z2.enum(["top", "bottom", "left", "right", "center"]),

package/dist/{spec.schema-BDvtn_mJ.d.ts → spec.schema-B_Z-KNqt.d.ts}

@@ -1105,6 +1105,92 @@ declare const drawGridSchema: z.ZodObject<{
     offsetY?: number | undefined;
     spacing?: number | undefined;
 }>;
+declare const drawTextRowSegmentSchema: z.ZodObject<{
+    text: z.ZodString;
+    color: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    fontSize: z.ZodOptional<z.ZodNumber>;
+    fontWeight: z.ZodOptional<z.ZodNumber>;
+    fontFamily: z.ZodOptional<z.ZodEnum<["heading", "body", "mono"]>>;
+}, "strict", z.ZodTypeAny, {
+    text: string;
+    color?: string | undefined;
+    fontSize?: number | undefined;
+    fontWeight?: number | undefined;
+    fontFamily?: "body" | "heading" | "mono" | undefined;
+}, {
+    text: string;
+    color?: string | undefined;
+    fontSize?: number | undefined;
+    fontWeight?: number | undefined;
+    fontFamily?: "body" | "heading" | "mono" | undefined;
+}>;
+declare const drawTextRowSchema: z.ZodObject<{
+    type: z.ZodLiteral<"text-row">;
+    segments: z.ZodArray<z.ZodObject<{
+        text: z.ZodString;
+        color: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+        fontSize: z.ZodOptional<z.ZodNumber>;
+        fontWeight: z.ZodOptional<z.ZodNumber>;
+        fontFamily: z.ZodOptional<z.ZodEnum<["heading", "body", "mono"]>>;
+    }, "strict", z.ZodTypeAny, {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }, {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }>, "many">;
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+    align: z.ZodDefault<z.ZodEnum<["left", "center", "right"]>>;
+    baseline: z.ZodDefault<z.ZodEnum<["top", "middle", "alphabetic", "bottom"]>>;
+    defaultFontSize: z.ZodDefault<z.ZodNumber>;
+    defaultFontWeight: z.ZodDefault<z.ZodNumber>;
+    defaultFontFamily: z.ZodDefault<z.ZodEnum<["heading", "body", "mono"]>>;
+    defaultColor: z.ZodDefault<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    opacity: z.ZodDefault<z.ZodNumber>;
+}, "strict", z.ZodTypeAny, {
+    type: "text-row";
+    opacity: number;
+    x: number;
+    y: number;
+    align: "center" | "left" | "right";
+    baseline: "top" | "alphabetic" | "bottom" | "middle";
+    segments: {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }[];
+    defaultFontSize: number;
+    defaultFontWeight: number;
+    defaultFontFamily: "body" | "heading" | "mono";
+    defaultColor: string;
+}, {
+    type: "text-row";
+    x: number;
+    y: number;
+    segments: {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }[];
+    opacity?: number | undefined;
+    align?: "center" | "left" | "right" | undefined;
+    baseline?: "top" | "alphabetic" | "bottom" | "middle" | undefined;
+    defaultFontSize?: number | undefined;
+    defaultFontWeight?: number | undefined;
+    defaultFontFamily?: "body" | "heading" | "mono" | undefined;
+    defaultColor?: string | undefined;
+}>;
 declare const drawCommandSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
     type: z.ZodLiteral<"rect">;
     x: z.ZodNumber;
@@ -1717,6 +1803,72 @@ declare const drawCommandSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
     offsetX?: number | undefined;
     offsetY?: number | undefined;
     spacing?: number | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"text-row">;
+    segments: z.ZodArray<z.ZodObject<{
+        text: z.ZodString;
+        color: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+        fontSize: z.ZodOptional<z.ZodNumber>;
+        fontWeight: z.ZodOptional<z.ZodNumber>;
+        fontFamily: z.ZodOptional<z.ZodEnum<["heading", "body", "mono"]>>;
+    }, "strict", z.ZodTypeAny, {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }, {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }>, "many">;
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+    align: z.ZodDefault<z.ZodEnum<["left", "center", "right"]>>;
+    baseline: z.ZodDefault<z.ZodEnum<["top", "middle", "alphabetic", "bottom"]>>;
+    defaultFontSize: z.ZodDefault<z.ZodNumber>;
+    defaultFontWeight: z.ZodDefault<z.ZodNumber>;
+    defaultFontFamily: z.ZodDefault<z.ZodEnum<["heading", "body", "mono"]>>;
+    defaultColor: z.ZodDefault<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    opacity: z.ZodDefault<z.ZodNumber>;
+}, "strict", z.ZodTypeAny, {
+    type: "text-row";
+    opacity: number;
+    x: number;
+    y: number;
+    align: "center" | "left" | "right";
+    baseline: "top" | "alphabetic" | "bottom" | "middle";
+    segments: {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }[];
+    defaultFontSize: number;
+    defaultFontWeight: number;
+    defaultFontFamily: "body" | "heading" | "mono";
+    defaultColor: string;
+}, {
+    type: "text-row";
+    x: number;
+    y: number;
+    segments: {
+        text: string;
+        color?: string | undefined;
+        fontSize?: number | undefined;
+        fontWeight?: number | undefined;
+        fontFamily?: "body" | "heading" | "mono" | undefined;
+    }[];
+    opacity?: number | undefined;
+    align?: "center" | "left" | "right" | undefined;
+    baseline?: "top" | "alphabetic" | "bottom" | "middle" | undefined;
+    defaultFontSize?: number | undefined;
+    defaultFontWeight?: number | undefined;
+    defaultFontFamily?: "body" | "heading" | "mono" | undefined;
+    defaultColor?: string | undefined;
 }>]>;
 /** Default canvas dimensions and padding (1200 × 675 px, 48 px padding). */
 declare const defaultCanvas: {
@@ -1869,6 +2021,11 @@ declare const flowNodeElementSchema: z.ZodObject<{
         offsetX?: number | undefined;
         offsetY?: number | undefined;
     }>>;
+    accentColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    accentBarWidth: z.ZodDefault<z.ZodNumber>;
+    glowColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    glowWidth: z.ZodDefault<z.ZodNumber>;
+    glowOpacity: z.ZodDefault<z.ZodNumber>;
 }, "strict", z.ZodTypeAny, {
     type: "flow-node";
     id: string;
@@ -1877,6 +2034,9 @@ declare const flowNodeElementSchema: z.ZodObject<{
     fillOpacity: number;
     opacity: number;
     badgePosition: "top" | "inside-top";
+    accentBarWidth: number;
+    glowWidth: number;
+    glowOpacity: number;
     width?: number | undefined;
     height?: number | undefined;
     sublabel?: string | undefined;
@@ -1900,6 +2060,8 @@ declare const flowNodeElementSchema: z.ZodObject<{
         offsetY: number;
         color?: string | undefined;
     } | undefined;
+    accentColor?: string | undefined;
+    glowColor?: string | undefined;
 }, {
     type: "flow-node";
     id: string;
@@ -1931,6 +2093,11 @@ declare const flowNodeElementSchema: z.ZodObject<{
         offsetX?: number | undefined;
         offsetY?: number | undefined;
     } | undefined;
+    accentColor?: string | undefined;
+    accentBarWidth?: number | undefined;
+    glowColor?: string | undefined;
+    glowWidth?: number | undefined;
+    glowOpacity?: number | undefined;
 }>;
 declare const anchorHintSchema: z.ZodUnion<[z.ZodEnum<["top", "bottom", "left", "right", "center"]>, z.ZodObject<{
     x: z.ZodNumber;
@@ -2369,6 +2536,11 @@ declare const elementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
         offsetX?: number | undefined;
         offsetY?: number | undefined;
     }>>;
+    accentColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    accentBarWidth: z.ZodDefault<z.ZodNumber>;
+    glowColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    glowWidth: z.ZodDefault<z.ZodNumber>;
+    glowOpacity: z.ZodDefault<z.ZodNumber>;
 }, "strict", z.ZodTypeAny, {
     type: "flow-node";
     id: string;
@@ -2377,6 +2549,9 @@ declare const elementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
     fillOpacity: number;
     opacity: number;
     badgePosition: "top" | "inside-top";
+    accentBarWidth: number;
+    glowWidth: number;
+    glowOpacity: number;
     width?: number | undefined;
     height?: number | undefined;
     sublabel?: string | undefined;
@@ -2400,6 +2575,8 @@ declare const elementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
         offsetY: number;
         color?: string | undefined;
     } | undefined;
+    accentColor?: string | undefined;
+    glowColor?: string | undefined;
 }, {
     type: "flow-node";
     id: string;
@@ -2431,6 +2608,11 @@ declare const elementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
         offsetX?: number | undefined;
         offsetY?: number | undefined;
     } | undefined;
+    accentColor?: string | undefined;
+    accentBarWidth?: number | undefined;
+    glowColor?: string | undefined;
+    glowWidth?: number | undefined;
+    glowOpacity?: number | undefined;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"connection">;
     from: z.ZodString;
@@ -3461,6 +3643,11 @@ declare const diagramElementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject
         offsetX?: number | undefined;
         offsetY?: number | undefined;
     }>>;
+    accentColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    accentBarWidth: z.ZodDefault<z.ZodNumber>;
+    glowColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+    glowWidth: z.ZodDefault<z.ZodNumber>;
+    glowOpacity: z.ZodDefault<z.ZodNumber>;
 }, "strict", z.ZodTypeAny, {
     type: "flow-node";
     id: string;
@@ -3469,6 +3656,9 @@ declare const diagramElementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject
     fillOpacity: number;
     opacity: number;
     badgePosition: "top" | "inside-top";
+    accentBarWidth: number;
+    glowWidth: number;
+    glowOpacity: number;
     width?: number | undefined;
     height?: number | undefined;
     sublabel?: string | undefined;
@@ -3492,6 +3682,8 @@ declare const diagramElementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject
         offsetY: number;
         color?: string | undefined;
     } | undefined;
+    accentColor?: string | undefined;
+    glowColor?: string | undefined;
 }, {
     type: "flow-node";
     id: string;
@@ -3523,6 +3715,11 @@ declare const diagramElementSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject
         offsetX?: number | undefined;
         offsetY?: number | undefined;
     } | undefined;
+    accentColor?: string | undefined;
+    accentBarWidth?: number | undefined;
+    glowColor?: string | undefined;
+    glowWidth?: number | undefined;
+    glowOpacity?: number | undefined;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"connection">;
     from: z.ZodString;
@@ -3852,6 +4049,11 @@ declare const diagramSpecSchema: z.ZodObject<{
             offsetX?: number | undefined;
             offsetY?: number | undefined;
         }>>;
+        accentColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+        accentBarWidth: z.ZodDefault<z.ZodNumber>;
+        glowColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+        glowWidth: z.ZodDefault<z.ZodNumber>;
+        glowOpacity: z.ZodDefault<z.ZodNumber>;
     }, "strict", z.ZodTypeAny, {
         type: "flow-node";
         id: string;
@@ -3860,6 +4062,9 @@ declare const diagramSpecSchema: z.ZodObject<{
         fillOpacity: number;
         opacity: number;
         badgePosition: "top" | "inside-top";
+        accentBarWidth: number;
+        glowWidth: number;
+        glowOpacity: number;
         width?: number | undefined;
         height?: number | undefined;
         sublabel?: string | undefined;
@@ -3883,6 +4088,8 @@ declare const diagramSpecSchema: z.ZodObject<{
             offsetY: number;
             color?: string | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        glowColor?: string | undefined;
     }, {
         type: "flow-node";
         id: string;
@@ -3914,6 +4121,11 @@ declare const diagramSpecSchema: z.ZodObject<{
             offsetX?: number | undefined;
             offsetY?: number | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        accentBarWidth?: number | undefined;
+        glowColor?: string | undefined;
+        glowWidth?: number | undefined;
+        glowOpacity?: number | undefined;
     }>, z.ZodObject<{
         type: z.ZodLiteral<"connection">;
         from: z.ZodString;
@@ -4069,6 +4281,9 @@ declare const diagramSpecSchema: z.ZodObject<{
         fillOpacity: number;
         opacity: number;
         badgePosition: "top" | "inside-top";
+        accentBarWidth: number;
+        glowWidth: number;
+        glowOpacity: number;
         width?: number | undefined;
         height?: number | undefined;
         sublabel?: string | undefined;
@@ -4092,6 +4307,8 @@ declare const diagramSpecSchema: z.ZodObject<{
             offsetY: number;
             color?: string | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        glowColor?: string | undefined;
     } | {
         type: "connection";
         opacity: number;
@@ -4199,6 +4416,11 @@ declare const diagramSpecSchema: z.ZodObject<{
             offsetX?: number | undefined;
             offsetY?: number | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        accentBarWidth?: number | undefined;
+        glowColor?: string | undefined;
+        glowWidth?: number | undefined;
+        glowOpacity?: number | undefined;
     } | {
         type: "connection";
         from: string;
@@ -4583,6 +4805,11 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
             offsetX?: number | undefined;
             offsetY?: number | undefined;
         }>>;
+        accentColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+        accentBarWidth: z.ZodDefault<z.ZodNumber>;
+        glowColor: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+        glowWidth: z.ZodDefault<z.ZodNumber>;
+        glowOpacity: z.ZodDefault<z.ZodNumber>;
     }, "strict", z.ZodTypeAny, {
         type: "flow-node";
         id: string;
@@ -4591,6 +4818,9 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         fillOpacity: number;
         opacity: number;
         badgePosition: "top" | "inside-top";
+        accentBarWidth: number;
+        glowWidth: number;
+        glowOpacity: number;
         width?: number | undefined;
         height?: number | undefined;
         sublabel?: string | undefined;
@@ -4614,6 +4844,8 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
             offsetY: number;
             color?: string | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        glowColor?: string | undefined;
     }, {
         type: "flow-node";
         id: string;
@@ -4645,6 +4877,11 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
             offsetX?: number | undefined;
             offsetY?: number | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        accentBarWidth?: number | undefined;
+        glowColor?: string | undefined;
+        glowWidth?: number | undefined;
+        glowOpacity?: number | undefined;
     }>, z.ZodObject<{
         type: z.ZodLiteral<"connection">;
         from: z.ZodString;
@@ -5728,6 +5965,72 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         offsetX?: number | undefined;
         offsetY?: number | undefined;
         spacing?: number | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"text-row">;
+        segments: z.ZodArray<z.ZodObject<{
+            text: z.ZodString;
+            color: z.ZodOptional<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+            fontSize: z.ZodOptional<z.ZodNumber>;
+            fontWeight: z.ZodOptional<z.ZodNumber>;
+            fontFamily: z.ZodOptional<z.ZodEnum<["heading", "body", "mono"]>>;
+        }, "strict", z.ZodTypeAny, {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }, {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }>, "many">;
+        x: z.ZodNumber;
+        y: z.ZodNumber;
+        align: z.ZodDefault<z.ZodEnum<["left", "center", "right"]>>;
+        baseline: z.ZodDefault<z.ZodEnum<["top", "middle", "alphabetic", "bottom"]>>;
+        defaultFontSize: z.ZodDefault<z.ZodNumber>;
+        defaultFontWeight: z.ZodDefault<z.ZodNumber>;
+        defaultFontFamily: z.ZodDefault<z.ZodEnum<["heading", "body", "mono"]>>;
+        defaultColor: z.ZodDefault<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>>;
+        opacity: z.ZodDefault<z.ZodNumber>;
+    }, "strict", z.ZodTypeAny, {
+        type: "text-row";
+        opacity: number;
+        x: number;
+        y: number;
+        align: "center" | "left" | "right";
+        baseline: "top" | "alphabetic" | "bottom" | "middle";
+        segments: {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }[];
+        defaultFontSize: number;
+        defaultFontWeight: number;
+        defaultFontFamily: "body" | "heading" | "mono";
+        defaultColor: string;
+    }, {
+        type: "text-row";
+        x: number;
+        y: number;
+        segments: {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }[];
+        opacity?: number | undefined;
+        align?: "center" | "left" | "right" | undefined;
+        baseline?: "top" | "alphabetic" | "bottom" | "middle" | undefined;
+        defaultFontSize?: number | undefined;
+        defaultFontWeight?: number | undefined;
+        defaultFontFamily?: "body" | "heading" | "mono" | undefined;
+        defaultColor?: string | undefined;
     }>]>, "many">>;
     layout: z.ZodOptional<z.ZodDiscriminatedUnion<"mode", [z.ZodObject<{
         mode: z.ZodLiteral<"auto">;
@@ -6093,6 +6396,24 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         offsetX: number;
         offsetY: number;
         spacing: number;
+    } | {
+        type: "text-row";
+        opacity: number;
+        x: number;
+        y: number;
+        align: "center" | "left" | "right";
+        baseline: "top" | "alphabetic" | "bottom" | "middle";
+        segments: {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }[];
+        defaultFontSize: number;
+        defaultFontWeight: number;
+        defaultFontFamily: "body" | "heading" | "mono";
+        defaultColor: string;
     })[];
     theme: {
         code: {
@@ -6143,6 +6464,9 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         fillOpacity: number;
         opacity: number;
         badgePosition: "top" | "inside-top";
+        accentBarWidth: number;
+        glowWidth: number;
+        glowOpacity: number;
         width?: number | undefined;
         height?: number | undefined;
         sublabel?: string | undefined;
@@ -6166,6 +6490,8 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
             offsetY: number;
             color?: string | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        glowColor?: string | undefined;
     } | {
         body: string;
         type: "card";
@@ -6572,6 +6898,24 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         offsetX?: number | undefined;
         offsetY?: number | undefined;
         spacing?: number | undefined;
+    } | {
+        type: "text-row";
+        x: number;
+        y: number;
+        segments: {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }[];
+        opacity?: number | undefined;
+        align?: "center" | "left" | "right" | undefined;
+        baseline?: "top" | "alphabetic" | "bottom" | "middle" | undefined;
+        defaultFontSize?: number | undefined;
+        defaultFontWeight?: number | undefined;
+        defaultFontFamily?: "body" | "heading" | "mono" | undefined;
+        defaultColor?: string | undefined;
     })[] | undefined;
     theme?: {
         code: {
@@ -6645,6 +6989,11 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
             offsetX?: number | undefined;
             offsetY?: number | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        accentBarWidth?: number | undefined;
+        glowColor?: string | undefined;
+        glowWidth?: number | undefined;
+        glowOpacity?: number | undefined;
     } | {
         body: string;
         type: "card";
@@ -7040,6 +7389,24 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         offsetX: number;
         offsetY: number;
         spacing: number;
+    } | {
+        type: "text-row";
+        opacity: number;
+        x: number;
+        y: number;
+        align: "center" | "left" | "right";
+        baseline: "top" | "alphabetic" | "bottom" | "middle";
+        segments: {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }[];
+        defaultFontSize: number;
+        defaultFontWeight: number;
+        defaultFontFamily: "body" | "heading" | "mono";
+        defaultColor: string;
     })[];
     theme: {
         code: {
@@ -7090,6 +7457,9 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         fillOpacity: number;
         opacity: number;
         badgePosition: "top" | "inside-top";
+        accentBarWidth: number;
+        glowWidth: number;
+        glowOpacity: number;
         width?: number | undefined;
         height?: number | undefined;
         sublabel?: string | undefined;
@@ -7113,6 +7483,8 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
             offsetY: number;
             color?: string | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        glowColor?: string | undefined;
     } | {
         body: string;
         type: "card";
@@ -7470,6 +7842,24 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
         offsetX?: number | undefined;
         offsetY?: number | undefined;
         spacing?: number | undefined;
+    } | {
+        type: "text-row";
+        x: number;
+        y: number;
+        segments: {
+            text: string;
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: "body" | "heading" | "mono" | undefined;
+        }[];
+        opacity?: number | undefined;
+        align?: "center" | "left" | "right" | undefined;
+        baseline?: "top" | "alphabetic" | "bottom" | "middle" | undefined;
+        defaultFontSize?: number | undefined;
+        defaultFontWeight?: number | undefined;
+        defaultFontFamily?: "body" | "heading" | "mono" | undefined;
+        defaultColor?: string | undefined;
     })[] | undefined;
     theme?: {
         code: {
@@ -7543,6 +7933,11 @@ declare const designSpecSchema: z.ZodEffects<z.ZodObject<{
             offsetX?: number | undefined;
             offsetY?: number | undefined;
         } | undefined;
+        accentColor?: string | undefined;
+        accentBarWidth?: number | undefined;
+        glowColor?: string | undefined;
+        glowWidth?: number | undefined;
+        glowOpacity?: number | undefined;
     } | {
         body: string;
         type: "card";
@@ -7757,6 +8152,8 @@ type DrawPath = z.infer<typeof drawPathSchema>;
 type DrawBadge = z.infer<typeof drawBadgeSchema>;
 type DrawGradientRect = z.infer<typeof drawGradientRectSchema>;
 type DrawGrid = z.infer<typeof drawGridSchema>;
+type DrawTextRow = z.infer<typeof drawTextRowSchema>;
+type DrawTextRowSegment = z.infer<typeof drawTextRowSegmentSchema>;
 type DrawCommand = z.infer<typeof drawCommandSchema>;
 type LayoutConfig = z.infer<typeof layoutConfigSchema>;
 type AutoLayoutConfig = z.infer<typeof autoLayoutConfigSchema>;
@@ -7814,4 +8211,4 @@ declare function deriveSafeFrame(spec: DesignSpec): DesignSafeFrame;
 declare function parseDiagramSpec(input: unknown): DiagramSpec;
 declare function parseDesignSpec(input: unknown): DesignSpec;
 
-export { type WrittenArtifacts as $, type AnchorHint as A, type BuiltInTheme as B, type ConnectionElement as C, type DesignSpec as D, type DrawShadow as E, type DrawText as F, type Element as G, type FlowNodeElement as H, type Gradient as I, type GradientOverlayDecorator as J, type GradientSpec as K, type GradientStop$1 as L, type GridLayoutConfig as M, type ImageElement as N, type LayoutConfig as O, type LayoutSnapshot as P, type ManualLayoutConfig as Q, type RenderMetadata as R, type RainbowRuleDecorator as S, type ThemeInput$1 as T, type RenderResult as U, type ShapeElement as V, type StackLayoutConfig as W, type TerminalElement as X, type TextElement as Y, type ThemeInput as Z, type VignetteDecorator as _, type Rect as a, builtInThemeBackgrounds as a0, builtInThemes as a1, computeSpecHash as a2, connectionElementSchema as a3, defaultAutoLayout as a4, defaultCanvas as a5, defaultConstraints as a6, defaultGridLayout as a7, defaultLayout as a8, defaultStackLayout as a9, defaultTheme as aa, deriveSafeFrame as ab, designSpecSchema as ac, diagramElementSchema as ad, diagramLayoutSchema as ae, diagramSpecSchema as af, drawGradientRect as ag, drawRainbowRule as ah, drawVignette as ai, flowNodeElementSchema as aj, inferLayout as ak, inferSidecarPath as al, parseDesignSpec as am, parseDiagramSpec as an, renderDesign as ao, resolveTheme as ap, writeRenderArtifacts as aq, type CodeBlockStyle as ar, type DrawGrid as as, type FlowNodeShadow as at, type GradientStop as au, type LinearGradient as av, type RadialGradient as aw, type DrawCommand as b, type Theme as c, type RenderedElement as d, type AutoLayoutConfig as e, type CardElement as f, type CodeBlockElement as g, type ConstraintSpec as h, DEFAULT_GENERATOR_VERSION as i, DEFAULT_RAINBOW_COLORS as j, type Decorator as k, type DesignCardSpec as l, type DesignSafeFrame as m, type DesignTheme as n, type DiagramElement as o, type DiagramLayout as p, type DiagramSpec as q, type DrawBadge as r, type DrawBezier as s, type DrawCircle as t, type DrawFontFamily as u, type DrawGradientRect as v, type DrawLine as w, type DrawPath as x, type DrawPoint as y, type DrawRect as z };
+export { type ThemeInput as $, type AnchorHint as A, type BuiltInTheme as B, type ConnectionElement as C, type DesignSpec as D, type DrawShadow as E, type DrawText as F, type DrawTextRow as G, type DrawTextRowSegment as H, type Element as I, type FlowNodeElement as J, type Gradient as K, type GradientOverlayDecorator as L, type GradientSpec as M, type GradientStop$1 as N, type GridLayoutConfig as O, type ImageElement as P, type LayoutConfig as Q, type RenderMetadata as R, type LayoutSnapshot as S, type ThemeInput$1 as T, type ManualLayoutConfig as U, type RainbowRuleDecorator as V, type RenderResult as W, type ShapeElement as X, type StackLayoutConfig as Y, type TerminalElement as Z, type TextElement as _, type Rect as a, type VignetteDecorator as a0, type WrittenArtifacts as a1, builtInThemeBackgrounds as a2, builtInThemes as a3, computeSpecHash as a4, connectionElementSchema as a5, defaultAutoLayout as a6, defaultCanvas as a7, defaultConstraints as a8, defaultGridLayout as a9, defaultLayout as aa, defaultStackLayout as ab, defaultTheme as ac, deriveSafeFrame as ad, designSpecSchema as ae, diagramElementSchema as af, diagramLayoutSchema as ag, diagramSpecSchema as ah, drawGradientRect as ai, drawRainbowRule as aj, drawVignette as ak, flowNodeElementSchema as al, inferLayout as am, inferSidecarPath as an, parseDesignSpec as ao, parseDiagramSpec as ap, renderDesign as aq, resolveTheme as ar, writeRenderArtifacts as as, type CodeBlockStyle as at, type DrawGrid as au, type FlowNodeShadow as av, type GradientStop as aw, type LinearGradient as ax, type RadialGradient as ay, type DrawCommand as b, type Theme as c, type RenderedElement as d, type AutoLayoutConfig as e, type CardElement as f, type CodeBlockElement as g, type ConstraintSpec as h, DEFAULT_GENERATOR_VERSION as i, DEFAULT_RAINBOW_COLORS as j, type Decorator as k, type DesignCardSpec as l, type DesignSafeFrame as m, type DesignTheme as n, type DiagramElement as o, type DiagramLayout as p, type DiagramSpec as q, type DrawBadge as r, type DrawBezier as s, type DrawCircle as t, type DrawFontFamily as u, type DrawGradientRect as v, type DrawLine as w, type DrawPath as x, type DrawPoint as y, type DrawRect as z };

package/dist/spec.schema.d.ts

@@ -1,3 +1,3 @@
 import 'zod';
-export { A as AnchorHint, e as AutoLayoutConfig, B as BuiltInTheme, f as CardElement, g as CodeBlockElement, ar as CodeBlockStyle, C as ConnectionElement, h as ConstraintSpec, k as Decorator, l as DesignCardSpec, m as DesignSafeFrame, D as DesignSpec, n as DesignTheme, o as DiagramElement, p as DiagramLayout, q as DiagramSpec, r as DrawBadge, s as DrawBezier, t as DrawCircle, b as DrawCommand, u as DrawFontFamily, v as DrawGradientRect, as as DrawGrid, w as DrawLine, x as DrawPath, y as DrawPoint, z as DrawRect, E as DrawShadow, F as DrawText, G as Element, H as FlowNodeElement, at as FlowNodeShadow, I as Gradient, J as GradientOverlayDecorator, au as GradientStop, M as GridLayoutConfig, N as ImageElement, O as LayoutConfig, av as LinearGradient, Q as ManualLayoutConfig, aw as RadialGradient, S as RainbowRuleDecorator, V as ShapeElement, W as StackLayoutConfig, X as TerminalElement, Y as TextElement, c as Theme, Z as ThemeInput, _ as VignetteDecorator, a0 as builtInThemeBackgrounds, a1 as builtInThemes, a3 as connectionElementSchema, a4 as defaultAutoLayout, a5 as defaultCanvas, a6 as defaultConstraints, a7 as defaultGridLayout, a8 as defaultLayout, a9 as defaultStackLayout, aa as defaultTheme, ab as deriveSafeFrame, ac as designSpecSchema, ad as diagramElementSchema, ae as diagramLayoutSchema, af as diagramSpecSchema, aj as flowNodeElementSchema, ak as inferLayout, am as parseDesignSpec, an as parseDiagramSpec, ap as resolveTheme } from './spec.schema-BDvtn_mJ.js';
+export { A as AnchorHint, e as AutoLayoutConfig, B as BuiltInTheme, f as CardElement, g as CodeBlockElement, at as CodeBlockStyle, C as ConnectionElement, h as ConstraintSpec, k as Decorator, l as DesignCardSpec, m as DesignSafeFrame, D as DesignSpec, n as DesignTheme, o as DiagramElement, p as DiagramLayout, q as DiagramSpec, r as DrawBadge, s as DrawBezier, t as DrawCircle, b as DrawCommand, u as DrawFontFamily, v as DrawGradientRect, au as DrawGrid, w as DrawLine, x as DrawPath, y as DrawPoint, z as DrawRect, E as DrawShadow, F as DrawText, G as DrawTextRow, H as DrawTextRowSegment, I as Element, J as FlowNodeElement, av as FlowNodeShadow, K as Gradient, L as GradientOverlayDecorator, aw as GradientStop, O as GridLayoutConfig, P as ImageElement, Q as LayoutConfig, ax as LinearGradient, U as ManualLayoutConfig, ay as RadialGradient, V as RainbowRuleDecorator, X as ShapeElement, Y as StackLayoutConfig, Z as TerminalElement, _ as TextElement, c as Theme, $ as ThemeInput, a0 as VignetteDecorator, a2 as builtInThemeBackgrounds, a3 as builtInThemes, a5 as connectionElementSchema, a6 as defaultAutoLayout, a7 as defaultCanvas, a8 as defaultConstraints, a9 as defaultGridLayout, aa as defaultLayout, ab as defaultStackLayout, ac as defaultTheme, ad as deriveSafeFrame, ae as designSpecSchema, af as diagramElementSchema, ag as diagramLayoutSchema, ah as diagramSpecSchema, al as flowNodeElementSchema, am as inferLayout, ao as parseDesignSpec, ap as parseDiagramSpec, ar as resolveTheme } from './spec.schema-B_Z-KNqt.js';
 import '@napi-rs/canvas';

package/dist/spec.schema.js

@@ -398,6 +398,26 @@ var drawGridSchema = z2.object({
   offsetX: z2.number().default(0),
   offsetY: z2.number().default(0)
 }).strict();
+var drawTextRowSegmentSchema = z2.object({
+  text: z2.string().min(1).max(500),
+  color: colorHexSchema2.optional(),
+  fontSize: z2.number().min(6).max(200).optional(),
+  fontWeight: z2.number().int().min(100).max(900).optional(),
+  fontFamily: drawFontFamilySchema.optional()
+}).strict();
+var drawTextRowSchema = z2.object({
+  type: z2.literal("text-row"),
+  segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
+  x: z2.number(),
+  y: z2.number(),
+  align: z2.enum(["left", "center", "right"]).default("center"),
+  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
+  defaultFontSize: z2.number().min(6).max(200).default(16),
+  defaultFontWeight: z2.number().int().min(100).max(900).default(400),
+  defaultFontFamily: drawFontFamilySchema.default("body"),
+  defaultColor: colorHexSchema2.default("#FFFFFF"),
+  opacity: z2.number().min(0).max(1).default(1)
+}).strict();
 var drawCommandSchema = z2.discriminatedUnion("type", [
   drawRectSchema,
   drawCircleSchema,
@@ -407,7 +427,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawPathSchema,
   drawBadgeSchema,
   drawGradientRectSchema,
-  drawGridSchema
+  drawGridSchema,
+  drawTextRowSchema
 ]);
 var defaultCanvas = {
   width: 1200,
@@ -512,7 +533,14 @@ var flowNodeElementSchema = z2.object({
   badgeColor: colorHexSchema2.optional(),
   badgeBackground: colorHexSchema2.optional(),
   badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
-  shadow: flowNodeShadowSchema.optional()
+  shadow: flowNodeShadowSchema.optional(),
+  // Accent bar (left edge colored bar)
+  accentColor: colorHexSchema2.optional(),
+  accentBarWidth: z2.number().min(0).max(16).default(3),
+  // Inner glow (gradient overlay from accent color inward)
+  glowColor: colorHexSchema2.optional(),
+  glowWidth: z2.number().min(0).max(64).default(16),
+  glowOpacity: z2.number().min(0).max(1).default(0.15)
 }).strict();
 var anchorHintSchema = z2.union([
   z2.enum(["top", "bottom", "left", "right", "center"]),

package/package.json

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