@spectratools/graphic-designer-cli 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cli.js +83 -16
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +83 -16
  4. package/dist/qa.d.ts +1 -1
  5. package/dist/qa.js +56 -10
  6. package/dist/renderer.d.ts +1 -1
  7. package/dist/renderer.js +83 -16
  8. package/dist/{spec.schema-BeFz_nk1.d.ts → spec.schema-B_Z-KNqt.d.ts} +1494 -28
  9. package/dist/spec.schema.d.ts +1 -1
  10. package/dist/spec.schema.js +56 -10
  11. package/package.json +1 -1
package/dist/cli.js CHANGED
@@ -752,9 +752,19 @@ var linearGradientSchema = z2.object({
752
752
  }).strict();
753
753
  var radialGradientSchema = z2.object({
754
754
  type: z2.literal("radial"),
755
+ cx: z2.number().optional(),
756
+ cy: z2.number().optional(),
757
+ innerRadius: z2.number().min(0).optional(),
758
+ outerRadius: z2.number().min(0).optional(),
755
759
  stops: z2.array(gradientStopSchema).min(2)
756
760
  }).strict();
757
761
  var gradientSchema = z2.discriminatedUnion("type", [linearGradientSchema, radialGradientSchema]);
762
+ var drawShadowSchema = z2.object({
763
+ color: colorHexSchema2.default("rgba(0,0,0,0.5)"),
764
+ blur: z2.number().min(0).max(64).default(10),
765
+ offsetX: z2.number().default(0),
766
+ offsetY: z2.number().default(4)
767
+ }).strict();
758
768
  var drawFontFamilySchema = z2.enum(["heading", "body", "mono"]);
759
769
  var drawRectSchema = z2.object({
760
770
  type: z2.literal("rect"),
@@ -766,7 +776,8 @@ var drawRectSchema = z2.object({
766
776
  stroke: colorHexSchema2.optional(),
767
777
  strokeWidth: z2.number().min(0).max(32).default(0),
768
778
  radius: z2.number().min(0).max(256).default(0),
769
- opacity: z2.number().min(0).max(1).default(1)
779
+ opacity: z2.number().min(0).max(1).default(1),
780
+ shadow: drawShadowSchema.optional()
770
781
  }).strict();
771
782
  var drawCircleSchema = z2.object({
772
783
  type: z2.literal("circle"),
@@ -776,7 +787,8 @@ var drawCircleSchema = z2.object({
776
787
  fill: colorHexSchema2.optional(),
777
788
  stroke: colorHexSchema2.optional(),
778
789
  strokeWidth: z2.number().min(0).max(32).default(0),
779
- opacity: z2.number().min(0).max(1).default(1)
790
+ opacity: z2.number().min(0).max(1).default(1),
791
+ shadow: drawShadowSchema.optional()
780
792
  }).strict();
781
793
  var drawTextSchema = z2.object({
782
794
  type: z2.literal("text"),
@@ -791,7 +803,8 @@ var drawTextSchema = z2.object({
791
803
  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
792
804
  letterSpacing: z2.number().min(-10).max(50).default(0),
793
805
  maxWidth: z2.number().positive().optional(),
794
- opacity: z2.number().min(0).max(1).default(1)
806
+ opacity: z2.number().min(0).max(1).default(1),
807
+ shadow: drawShadowSchema.optional()
795
808
  }).strict();
796
809
  var drawLineSchema = z2.object({
797
810
  type: z2.literal("line"),
@@ -804,7 +817,8 @@ var drawLineSchema = z2.object({
804
817
  dash: z2.array(z2.number()).max(6).optional(),
805
818
  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
806
819
  arrowSize: z2.number().min(4).max(32).default(10),
807
- opacity: z2.number().min(0).max(1).default(1)
820
+ opacity: z2.number().min(0).max(1).default(1),
821
+ shadow: drawShadowSchema.optional()
808
822
  }).strict();
809
823
  var drawPointSchema = z2.object({
810
824
  x: z2.number(),
@@ -818,7 +832,8 @@ var drawBezierSchema = z2.object({
818
832
  dash: z2.array(z2.number()).max(6).optional(),
819
833
  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
820
834
  arrowSize: z2.number().min(4).max(32).default(10),
821
- opacity: z2.number().min(0).max(1).default(1)
835
+ opacity: z2.number().min(0).max(1).default(1),
836
+ shadow: drawShadowSchema.optional()
822
837
  }).strict();
823
838
  var drawPathSchema = z2.object({
824
839
  type: z2.literal("path"),
@@ -826,7 +841,8 @@ var drawPathSchema = z2.object({
826
841
  fill: colorHexSchema2.optional(),
827
842
  stroke: colorHexSchema2.optional(),
828
843
  strokeWidth: z2.number().min(0).max(32).default(0),
829
- opacity: z2.number().min(0).max(1).default(1)
844
+ opacity: z2.number().min(0).max(1).default(1),
845
+ shadow: drawShadowSchema.optional()
830
846
  }).strict();
831
847
  var drawBadgeSchema = z2.object({
832
848
  type: z2.literal("badge"),
@@ -840,7 +856,8 @@ var drawBadgeSchema = z2.object({
840
856
  paddingX: z2.number().min(0).max(64).default(10),
841
857
  paddingY: z2.number().min(0).max(32).default(4),
842
858
  borderRadius: z2.number().min(0).max(64).default(12),
843
- opacity: z2.number().min(0).max(1).default(1)
859
+ opacity: z2.number().min(0).max(1).default(1),
860
+ shadow: drawShadowSchema.optional()
844
861
  }).strict();
845
862
  var drawGradientRectSchema = z2.object({
846
863
  type: z2.literal("gradient-rect"),
@@ -850,7 +867,8 @@ var drawGradientRectSchema = z2.object({
850
867
  height: z2.number().positive(),
851
868
  gradient: gradientSchema,
852
869
  radius: z2.number().min(0).max(256).default(0),
853
- opacity: z2.number().min(0).max(1).default(1)
870
+ opacity: z2.number().min(0).max(1).default(1),
871
+ shadow: drawShadowSchema.optional()
854
872
  }).strict();
855
873
  var drawGridSchema = z2.object({
856
874
  type: z2.literal("grid"),
@@ -861,6 +879,26 @@ var drawGridSchema = z2.object({
861
879
  offsetX: z2.number().default(0),
862
880
  offsetY: z2.number().default(0)
863
881
  }).strict();
882
+ var drawTextRowSegmentSchema = z2.object({
883
+ text: z2.string().min(1).max(500),
884
+ color: colorHexSchema2.optional(),
885
+ fontSize: z2.number().min(6).max(200).optional(),
886
+ fontWeight: z2.number().int().min(100).max(900).optional(),
887
+ fontFamily: drawFontFamilySchema.optional()
888
+ }).strict();
889
+ var drawTextRowSchema = z2.object({
890
+ type: z2.literal("text-row"),
891
+ segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
892
+ x: z2.number(),
893
+ y: z2.number(),
894
+ align: z2.enum(["left", "center", "right"]).default("center"),
895
+ baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
896
+ defaultFontSize: z2.number().min(6).max(200).default(16),
897
+ defaultFontWeight: z2.number().int().min(100).max(900).default(400),
898
+ defaultFontFamily: drawFontFamilySchema.default("body"),
899
+ defaultColor: colorHexSchema2.default("#FFFFFF"),
900
+ opacity: z2.number().min(0).max(1).default(1)
901
+ }).strict();
864
902
  var drawCommandSchema = z2.discriminatedUnion("type", [
865
903
  drawRectSchema,
866
904
  drawCircleSchema,
@@ -870,7 +908,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
870
908
  drawPathSchema,
871
909
  drawBadgeSchema,
872
910
  drawGradientRectSchema,
873
- drawGridSchema
911
+ drawGridSchema,
912
+ drawTextRowSchema
874
913
  ]);
875
914
  var defaultCanvas = {
876
915
  width: 1200,
@@ -974,7 +1013,14 @@ var flowNodeElementSchema = z2.object({
974
1013
  badgeColor: colorHexSchema2.optional(),
975
1014
  badgeBackground: colorHexSchema2.optional(),
976
1015
  badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
977
- shadow: flowNodeShadowSchema.optional()
1016
+ shadow: flowNodeShadowSchema.optional(),
1017
+ // Accent bar (left edge colored bar)
1018
+ accentColor: colorHexSchema2.optional(),
1019
+ accentBarWidth: z2.number().min(0).max(16).default(3),
1020
+ // Inner glow (gradient overlay from accent color inward)
1021
+ glowColor: colorHexSchema2.optional(),
1022
+ glowWidth: z2.number().min(0).max(64).default(16),
1023
+ glowOpacity: z2.number().min(0).max(1).default(0.15)
978
1024
  }).strict();
979
1025
  var anchorHintSchema = z2.union([
980
1026
  z2.enum(["top", "bottom", "left", "right", "center"]),
@@ -2499,12 +2545,12 @@ function withAlpha2(color, alpha) {
2499
2545
  }
2500
2546
  function drawGradientRect(ctx, rect, gradient, borderRadius = 0) {
2501
2547
  const fill = gradient.type === "linear" ? createLinearRectGradient(ctx, rect, gradient.angle ?? 180) : ctx.createRadialGradient(
2502
- rect.x + rect.width / 2,
2503
- rect.y + rect.height / 2,
2504
- 0,
2505
- rect.x + rect.width / 2,
2506
- rect.y + rect.height / 2,
2507
- Math.max(rect.width, rect.height) / 2
2548
+ gradient.cx ?? rect.x + rect.width / 2,
2549
+ gradient.cy ?? rect.y + rect.height / 2,
2550
+ gradient.innerRadius ?? 0,
2551
+ gradient.cx ?? rect.x + rect.width / 2,
2552
+ gradient.cy ?? rect.y + rect.height / 2,
2553
+ gradient.outerRadius ?? Math.max(rect.width, rect.height) / 2
2508
2554
  );
2509
2555
  addGradientStops(fill, gradient.stops);
2510
2556
  ctx.save();
@@ -3726,6 +3772,13 @@ function expandRect(rect, amount) {
3726
3772
  height: rect.height + amount * 2
3727
3773
  };
3728
3774
  }
3775
+ function applyDrawShadow(ctx, shadow) {
3776
+ if (!shadow) return;
3777
+ ctx.shadowColor = shadow.color;
3778
+ ctx.shadowBlur = shadow.blur;
3779
+ ctx.shadowOffsetX = shadow.offsetX;
3780
+ ctx.shadowOffsetY = shadow.offsetY;
3781
+ }
3729
3782
  function fromPoints(points) {
3730
3783
  const minX = Math.min(...points.map((point) => point.x));
3731
3784
  const minY = Math.min(...points.map((point) => point.y));
@@ -3907,6 +3960,7 @@ function renderDrawCommands(ctx, commands, theme) {
3907
3960
  height: command.height
3908
3961
  };
3909
3962
  withOpacity(ctx, command.opacity, () => {
3963
+ applyDrawShadow(ctx, command.shadow);
3910
3964
  roundRectPath(ctx, rect, command.radius);
3911
3965
  if (command.fill) {
3912
3966
  ctx.fillStyle = command.fill;
@@ -3930,6 +3984,7 @@ function renderDrawCommands(ctx, commands, theme) {
3930
3984
  }
3931
3985
  case "circle": {
3932
3986
  withOpacity(ctx, command.opacity, () => {
3987
+ applyDrawShadow(ctx, command.shadow);
3933
3988
  ctx.beginPath();
3934
3989
  ctx.arc(command.cx, command.cy, command.radius, 0, Math.PI * 2);
3935
3990
  ctx.closePath();
@@ -3964,6 +4019,7 @@ function renderDrawCommands(ctx, commands, theme) {
3964
4019
  case "text": {
3965
4020
  const fontFamily = resolveDrawFont(theme, command.fontFamily);
3966
4021
  withOpacity(ctx, command.opacity, () => {
4022
+ applyDrawShadow(ctx, command.shadow);
3967
4023
  applyFont(ctx, {
3968
4024
  size: command.fontSize,
3969
4025
  weight: command.fontWeight,
@@ -4014,6 +4070,7 @@ function renderDrawCommands(ctx, commands, theme) {
4014
4070
  const to = { x: command.x2, y: command.y2 };
4015
4071
  const lineAngle = angleBetween(from, to);
4016
4072
  withOpacity(ctx, command.opacity, () => {
4073
+ applyDrawShadow(ctx, command.shadow);
4017
4074
  drawLine(ctx, from, to, {
4018
4075
  color: command.color,
4019
4076
  width: command.width,
@@ -4038,6 +4095,7 @@ function renderDrawCommands(ctx, commands, theme) {
4038
4095
  case "bezier": {
4039
4096
  const points = command.points;
4040
4097
  withOpacity(ctx, command.opacity, () => {
4098
+ applyDrawShadow(ctx, command.shadow);
4041
4099
  drawBezier(ctx, points, {
4042
4100
  color: command.color,
4043
4101
  width: command.width,
@@ -4071,6 +4129,7 @@ function renderDrawCommands(ctx, commands, theme) {
4071
4129
  const operations = parseSvgPath(command.d);
4072
4130
  const baseBounds = pathBounds(operations);
4073
4131
  withOpacity(ctx, command.opacity, () => {
4132
+ applyDrawShadow(ctx, command.shadow);
4074
4133
  applySvgOperations(ctx, operations);
4075
4134
  if (command.fill) {
4076
4135
  ctx.fillStyle = command.fill;
@@ -4111,9 +4170,16 @@ function renderDrawCommands(ctx, commands, theme) {
4111
4170
  height: textHeight + command.paddingY * 2
4112
4171
  };
4113
4172
  withOpacity(ctx, command.opacity, () => {
4173
+ applyDrawShadow(ctx, command.shadow);
4114
4174
  roundRectPath(ctx, rect, command.borderRadius);
4115
4175
  ctx.fillStyle = command.background;
4116
4176
  ctx.fill();
4177
+ if (command.shadow) {
4178
+ ctx.shadowColor = "transparent";
4179
+ ctx.shadowBlur = 0;
4180
+ ctx.shadowOffsetX = 0;
4181
+ ctx.shadowOffsetY = 0;
4182
+ }
4117
4183
  applyFont(ctx, {
4118
4184
  size: command.fontSize,
4119
4185
  weight: 600,
@@ -4141,6 +4207,7 @@ function renderDrawCommands(ctx, commands, theme) {
4141
4207
  height: command.height
4142
4208
  };
4143
4209
  withOpacity(ctx, command.opacity, () => {
4210
+ applyDrawShadow(ctx, command.shadow);
4144
4211
  drawGradientRect(ctx, rect, command.gradient, command.radius);
4145
4212
  });
4146
4213
  rendered.push({
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Cli } from 'incur';
2
- 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-BeFz_nk1.js';
3
- 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 DrawText, F as Element, G as FlowNodeElement, H as Gradient, I as GradientOverlayDecorator, J as GradientSpec, K as GradientStop, L as GridLayoutConfig, M as ImageElement, N as LayoutConfig, O as LayoutSnapshot, P as ManualLayoutConfig, Q as RainbowRuleDecorator, R as RenderMetadata, S as RenderResult, U as ShapeElement, V as StackLayoutConfig, W as TerminalElement, X as TextElement, Y as ThemeInput, Z as VignetteDecorator, _ as WrittenArtifacts, $ as builtInThemeBackgrounds, a0 as builtInThemes, a1 as computeSpecHash, a2 as connectionElementSchema, a3 as defaultAutoLayout, a4 as defaultCanvas, a5 as defaultConstraints, a6 as defaultGridLayout, a7 as defaultLayout, a8 as defaultStackLayout, a9 as defaultTheme, aa as deriveSafeFrame, ab as designSpecSchema, ac as diagramElementSchema, ad as diagramLayoutSchema, ae as diagramSpecSchema, af as drawGradientRect, ag as drawRainbowRule, ah as drawVignette, ai as flowNodeElementSchema, aj as inferLayout, ak as inferSidecarPath, al as parseDesignSpec, am as parseDiagramSpec, an as renderDesign, ao as resolveTheme, ap as writeRenderArtifacts } from './spec.schema-BeFz_nk1.js';
2
+ 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';
3
+ 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';
4
4
  import { SKRSContext2D } from '@napi-rs/canvas';
5
5
  export { QaIssue, QaReferenceResult, QaReport, QaSeverity, readMetadata, runQa } from './qa.js';
6
6
  import { Highlighter } from 'shiki';
package/dist/index.js CHANGED
@@ -761,9 +761,19 @@ var linearGradientSchema = z2.object({
761
761
  }).strict();
762
762
  var radialGradientSchema = z2.object({
763
763
  type: z2.literal("radial"),
764
+ cx: z2.number().optional(),
765
+ cy: z2.number().optional(),
766
+ innerRadius: z2.number().min(0).optional(),
767
+ outerRadius: z2.number().min(0).optional(),
764
768
  stops: z2.array(gradientStopSchema).min(2)
765
769
  }).strict();
766
770
  var gradientSchema = z2.discriminatedUnion("type", [linearGradientSchema, radialGradientSchema]);
771
+ var drawShadowSchema = z2.object({
772
+ color: colorHexSchema2.default("rgba(0,0,0,0.5)"),
773
+ blur: z2.number().min(0).max(64).default(10),
774
+ offsetX: z2.number().default(0),
775
+ offsetY: z2.number().default(4)
776
+ }).strict();
767
777
  var drawFontFamilySchema = z2.enum(["heading", "body", "mono"]);
768
778
  var drawRectSchema = z2.object({
769
779
  type: z2.literal("rect"),
@@ -775,7 +785,8 @@ var drawRectSchema = z2.object({
775
785
  stroke: colorHexSchema2.optional(),
776
786
  strokeWidth: z2.number().min(0).max(32).default(0),
777
787
  radius: z2.number().min(0).max(256).default(0),
778
- opacity: z2.number().min(0).max(1).default(1)
788
+ opacity: z2.number().min(0).max(1).default(1),
789
+ shadow: drawShadowSchema.optional()
779
790
  }).strict();
780
791
  var drawCircleSchema = z2.object({
781
792
  type: z2.literal("circle"),
@@ -785,7 +796,8 @@ var drawCircleSchema = z2.object({
785
796
  fill: colorHexSchema2.optional(),
786
797
  stroke: colorHexSchema2.optional(),
787
798
  strokeWidth: z2.number().min(0).max(32).default(0),
788
- opacity: z2.number().min(0).max(1).default(1)
799
+ opacity: z2.number().min(0).max(1).default(1),
800
+ shadow: drawShadowSchema.optional()
789
801
  }).strict();
790
802
  var drawTextSchema = z2.object({
791
803
  type: z2.literal("text"),
@@ -800,7 +812,8 @@ var drawTextSchema = z2.object({
800
812
  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
801
813
  letterSpacing: z2.number().min(-10).max(50).default(0),
802
814
  maxWidth: z2.number().positive().optional(),
803
- opacity: z2.number().min(0).max(1).default(1)
815
+ opacity: z2.number().min(0).max(1).default(1),
816
+ shadow: drawShadowSchema.optional()
804
817
  }).strict();
805
818
  var drawLineSchema = z2.object({
806
819
  type: z2.literal("line"),
@@ -813,7 +826,8 @@ var drawLineSchema = z2.object({
813
826
  dash: z2.array(z2.number()).max(6).optional(),
814
827
  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
815
828
  arrowSize: z2.number().min(4).max(32).default(10),
816
- opacity: z2.number().min(0).max(1).default(1)
829
+ opacity: z2.number().min(0).max(1).default(1),
830
+ shadow: drawShadowSchema.optional()
817
831
  }).strict();
818
832
  var drawPointSchema = z2.object({
819
833
  x: z2.number(),
@@ -827,7 +841,8 @@ var drawBezierSchema = z2.object({
827
841
  dash: z2.array(z2.number()).max(6).optional(),
828
842
  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
829
843
  arrowSize: z2.number().min(4).max(32).default(10),
830
- opacity: z2.number().min(0).max(1).default(1)
844
+ opacity: z2.number().min(0).max(1).default(1),
845
+ shadow: drawShadowSchema.optional()
831
846
  }).strict();
832
847
  var drawPathSchema = z2.object({
833
848
  type: z2.literal("path"),
@@ -835,7 +850,8 @@ var drawPathSchema = z2.object({
835
850
  fill: colorHexSchema2.optional(),
836
851
  stroke: colorHexSchema2.optional(),
837
852
  strokeWidth: z2.number().min(0).max(32).default(0),
838
- opacity: z2.number().min(0).max(1).default(1)
853
+ opacity: z2.number().min(0).max(1).default(1),
854
+ shadow: drawShadowSchema.optional()
839
855
  }).strict();
840
856
  var drawBadgeSchema = z2.object({
841
857
  type: z2.literal("badge"),
@@ -849,7 +865,8 @@ var drawBadgeSchema = z2.object({
849
865
  paddingX: z2.number().min(0).max(64).default(10),
850
866
  paddingY: z2.number().min(0).max(32).default(4),
851
867
  borderRadius: z2.number().min(0).max(64).default(12),
852
- opacity: z2.number().min(0).max(1).default(1)
868
+ opacity: z2.number().min(0).max(1).default(1),
869
+ shadow: drawShadowSchema.optional()
853
870
  }).strict();
854
871
  var drawGradientRectSchema = z2.object({
855
872
  type: z2.literal("gradient-rect"),
@@ -859,7 +876,8 @@ var drawGradientRectSchema = z2.object({
859
876
  height: z2.number().positive(),
860
877
  gradient: gradientSchema,
861
878
  radius: z2.number().min(0).max(256).default(0),
862
- opacity: z2.number().min(0).max(1).default(1)
879
+ opacity: z2.number().min(0).max(1).default(1),
880
+ shadow: drawShadowSchema.optional()
863
881
  }).strict();
864
882
  var drawGridSchema = z2.object({
865
883
  type: z2.literal("grid"),
@@ -870,6 +888,26 @@ var drawGridSchema = z2.object({
870
888
  offsetX: z2.number().default(0),
871
889
  offsetY: z2.number().default(0)
872
890
  }).strict();
891
+ var drawTextRowSegmentSchema = z2.object({
892
+ text: z2.string().min(1).max(500),
893
+ color: colorHexSchema2.optional(),
894
+ fontSize: z2.number().min(6).max(200).optional(),
895
+ fontWeight: z2.number().int().min(100).max(900).optional(),
896
+ fontFamily: drawFontFamilySchema.optional()
897
+ }).strict();
898
+ var drawTextRowSchema = z2.object({
899
+ type: z2.literal("text-row"),
900
+ segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
901
+ x: z2.number(),
902
+ y: z2.number(),
903
+ align: z2.enum(["left", "center", "right"]).default("center"),
904
+ baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
905
+ defaultFontSize: z2.number().min(6).max(200).default(16),
906
+ defaultFontWeight: z2.number().int().min(100).max(900).default(400),
907
+ defaultFontFamily: drawFontFamilySchema.default("body"),
908
+ defaultColor: colorHexSchema2.default("#FFFFFF"),
909
+ opacity: z2.number().min(0).max(1).default(1)
910
+ }).strict();
873
911
  var drawCommandSchema = z2.discriminatedUnion("type", [
874
912
  drawRectSchema,
875
913
  drawCircleSchema,
@@ -879,7 +917,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
879
917
  drawPathSchema,
880
918
  drawBadgeSchema,
881
919
  drawGradientRectSchema,
882
- drawGridSchema
920
+ drawGridSchema,
921
+ drawTextRowSchema
883
922
  ]);
884
923
  var defaultCanvas = {
885
924
  width: 1200,
@@ -984,7 +1023,14 @@ var flowNodeElementSchema = z2.object({
984
1023
  badgeColor: colorHexSchema2.optional(),
985
1024
  badgeBackground: colorHexSchema2.optional(),
986
1025
  badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
987
- shadow: flowNodeShadowSchema.optional()
1026
+ shadow: flowNodeShadowSchema.optional(),
1027
+ // Accent bar (left edge colored bar)
1028
+ accentColor: colorHexSchema2.optional(),
1029
+ accentBarWidth: z2.number().min(0).max(16).default(3),
1030
+ // Inner glow (gradient overlay from accent color inward)
1031
+ glowColor: colorHexSchema2.optional(),
1032
+ glowWidth: z2.number().min(0).max(64).default(16),
1033
+ glowOpacity: z2.number().min(0).max(1).default(0.15)
988
1034
  }).strict();
989
1035
  var anchorHintSchema = z2.union([
990
1036
  z2.enum(["top", "bottom", "left", "right", "center"]),
@@ -2512,12 +2558,12 @@ function withAlpha2(color, alpha) {
2512
2558
  }
2513
2559
  function drawGradientRect(ctx, rect, gradient, borderRadius = 0) {
2514
2560
  const fill = gradient.type === "linear" ? createLinearRectGradient(ctx, rect, gradient.angle ?? 180) : ctx.createRadialGradient(
2515
- rect.x + rect.width / 2,
2516
- rect.y + rect.height / 2,
2517
- 0,
2518
- rect.x + rect.width / 2,
2519
- rect.y + rect.height / 2,
2520
- Math.max(rect.width, rect.height) / 2
2561
+ gradient.cx ?? rect.x + rect.width / 2,
2562
+ gradient.cy ?? rect.y + rect.height / 2,
2563
+ gradient.innerRadius ?? 0,
2564
+ gradient.cx ?? rect.x + rect.width / 2,
2565
+ gradient.cy ?? rect.y + rect.height / 2,
2566
+ gradient.outerRadius ?? Math.max(rect.width, rect.height) / 2
2521
2567
  );
2522
2568
  addGradientStops(fill, gradient.stops);
2523
2569
  ctx.save();
@@ -3743,6 +3789,13 @@ function expandRect(rect, amount) {
3743
3789
  height: rect.height + amount * 2
3744
3790
  };
3745
3791
  }
3792
+ function applyDrawShadow(ctx, shadow) {
3793
+ if (!shadow) return;
3794
+ ctx.shadowColor = shadow.color;
3795
+ ctx.shadowBlur = shadow.blur;
3796
+ ctx.shadowOffsetX = shadow.offsetX;
3797
+ ctx.shadowOffsetY = shadow.offsetY;
3798
+ }
3746
3799
  function fromPoints(points) {
3747
3800
  const minX = Math.min(...points.map((point) => point.x));
3748
3801
  const minY = Math.min(...points.map((point) => point.y));
@@ -3924,6 +3977,7 @@ function renderDrawCommands(ctx, commands, theme) {
3924
3977
  height: command.height
3925
3978
  };
3926
3979
  withOpacity(ctx, command.opacity, () => {
3980
+ applyDrawShadow(ctx, command.shadow);
3927
3981
  roundRectPath(ctx, rect, command.radius);
3928
3982
  if (command.fill) {
3929
3983
  ctx.fillStyle = command.fill;
@@ -3947,6 +4001,7 @@ function renderDrawCommands(ctx, commands, theme) {
3947
4001
  }
3948
4002
  case "circle": {
3949
4003
  withOpacity(ctx, command.opacity, () => {
4004
+ applyDrawShadow(ctx, command.shadow);
3950
4005
  ctx.beginPath();
3951
4006
  ctx.arc(command.cx, command.cy, command.radius, 0, Math.PI * 2);
3952
4007
  ctx.closePath();
@@ -3981,6 +4036,7 @@ function renderDrawCommands(ctx, commands, theme) {
3981
4036
  case "text": {
3982
4037
  const fontFamily = resolveDrawFont(theme, command.fontFamily);
3983
4038
  withOpacity(ctx, command.opacity, () => {
4039
+ applyDrawShadow(ctx, command.shadow);
3984
4040
  applyFont(ctx, {
3985
4041
  size: command.fontSize,
3986
4042
  weight: command.fontWeight,
@@ -4031,6 +4087,7 @@ function renderDrawCommands(ctx, commands, theme) {
4031
4087
  const to = { x: command.x2, y: command.y2 };
4032
4088
  const lineAngle = angleBetween(from, to);
4033
4089
  withOpacity(ctx, command.opacity, () => {
4090
+ applyDrawShadow(ctx, command.shadow);
4034
4091
  drawLine(ctx, from, to, {
4035
4092
  color: command.color,
4036
4093
  width: command.width,
@@ -4055,6 +4112,7 @@ function renderDrawCommands(ctx, commands, theme) {
4055
4112
  case "bezier": {
4056
4113
  const points = command.points;
4057
4114
  withOpacity(ctx, command.opacity, () => {
4115
+ applyDrawShadow(ctx, command.shadow);
4058
4116
  drawBezier(ctx, points, {
4059
4117
  color: command.color,
4060
4118
  width: command.width,
@@ -4088,6 +4146,7 @@ function renderDrawCommands(ctx, commands, theme) {
4088
4146
  const operations = parseSvgPath(command.d);
4089
4147
  const baseBounds = pathBounds(operations);
4090
4148
  withOpacity(ctx, command.opacity, () => {
4149
+ applyDrawShadow(ctx, command.shadow);
4091
4150
  applySvgOperations(ctx, operations);
4092
4151
  if (command.fill) {
4093
4152
  ctx.fillStyle = command.fill;
@@ -4128,9 +4187,16 @@ function renderDrawCommands(ctx, commands, theme) {
4128
4187
  height: textHeight + command.paddingY * 2
4129
4188
  };
4130
4189
  withOpacity(ctx, command.opacity, () => {
4190
+ applyDrawShadow(ctx, command.shadow);
4131
4191
  roundRectPath(ctx, rect, command.borderRadius);
4132
4192
  ctx.fillStyle = command.background;
4133
4193
  ctx.fill();
4194
+ if (command.shadow) {
4195
+ ctx.shadowColor = "transparent";
4196
+ ctx.shadowBlur = 0;
4197
+ ctx.shadowOffsetX = 0;
4198
+ ctx.shadowOffsetY = 0;
4199
+ }
4134
4200
  applyFont(ctx, {
4135
4201
  size: command.fontSize,
4136
4202
  weight: 600,
@@ -4158,6 +4224,7 @@ function renderDrawCommands(ctx, commands, theme) {
4158
4224
  height: command.height
4159
4225
  };
4160
4226
  withOpacity(ctx, command.opacity, () => {
4227
+ applyDrawShadow(ctx, command.shadow);
4161
4228
  drawGradientRect(ctx, rect, command.gradient, command.radius);
4162
4229
  });
4163
4230
  rendered.push({
package/dist/qa.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { R as RenderMetadata, D as DesignSpec } from './spec.schema-BeFz_nk1.js';
1
+ import { R as RenderMetadata, D as DesignSpec } from './spec.schema-B_Z-KNqt.js';
2
2
  import 'zod';
3
3
  import '@napi-rs/canvas';
4
4
 
package/dist/qa.js CHANGED
@@ -495,9 +495,19 @@ var linearGradientSchema = z2.object({
495
495
  }).strict();
496
496
  var radialGradientSchema = z2.object({
497
497
  type: z2.literal("radial"),
498
+ cx: z2.number().optional(),
499
+ cy: z2.number().optional(),
500
+ innerRadius: z2.number().min(0).optional(),
501
+ outerRadius: z2.number().min(0).optional(),
498
502
  stops: z2.array(gradientStopSchema).min(2)
499
503
  }).strict();
500
504
  var gradientSchema = z2.discriminatedUnion("type", [linearGradientSchema, radialGradientSchema]);
505
+ var drawShadowSchema = z2.object({
506
+ color: colorHexSchema2.default("rgba(0,0,0,0.5)"),
507
+ blur: z2.number().min(0).max(64).default(10),
508
+ offsetX: z2.number().default(0),
509
+ offsetY: z2.number().default(4)
510
+ }).strict();
501
511
  var drawFontFamilySchema = z2.enum(["heading", "body", "mono"]);
502
512
  var drawRectSchema = z2.object({
503
513
  type: z2.literal("rect"),
@@ -509,7 +519,8 @@ var drawRectSchema = z2.object({
509
519
  stroke: colorHexSchema2.optional(),
510
520
  strokeWidth: z2.number().min(0).max(32).default(0),
511
521
  radius: z2.number().min(0).max(256).default(0),
512
- opacity: z2.number().min(0).max(1).default(1)
522
+ opacity: z2.number().min(0).max(1).default(1),
523
+ shadow: drawShadowSchema.optional()
513
524
  }).strict();
514
525
  var drawCircleSchema = z2.object({
515
526
  type: z2.literal("circle"),
@@ -519,7 +530,8 @@ var drawCircleSchema = z2.object({
519
530
  fill: colorHexSchema2.optional(),
520
531
  stroke: colorHexSchema2.optional(),
521
532
  strokeWidth: z2.number().min(0).max(32).default(0),
522
- opacity: z2.number().min(0).max(1).default(1)
533
+ opacity: z2.number().min(0).max(1).default(1),
534
+ shadow: drawShadowSchema.optional()
523
535
  }).strict();
524
536
  var drawTextSchema = z2.object({
525
537
  type: z2.literal("text"),
@@ -534,7 +546,8 @@ var drawTextSchema = z2.object({
534
546
  baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
535
547
  letterSpacing: z2.number().min(-10).max(50).default(0),
536
548
  maxWidth: z2.number().positive().optional(),
537
- opacity: z2.number().min(0).max(1).default(1)
549
+ opacity: z2.number().min(0).max(1).default(1),
550
+ shadow: drawShadowSchema.optional()
538
551
  }).strict();
539
552
  var drawLineSchema = z2.object({
540
553
  type: z2.literal("line"),
@@ -547,7 +560,8 @@ var drawLineSchema = z2.object({
547
560
  dash: z2.array(z2.number()).max(6).optional(),
548
561
  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
549
562
  arrowSize: z2.number().min(4).max(32).default(10),
550
- opacity: z2.number().min(0).max(1).default(1)
563
+ opacity: z2.number().min(0).max(1).default(1),
564
+ shadow: drawShadowSchema.optional()
551
565
  }).strict();
552
566
  var drawPointSchema = z2.object({
553
567
  x: z2.number(),
@@ -561,7 +575,8 @@ var drawBezierSchema = z2.object({
561
575
  dash: z2.array(z2.number()).max(6).optional(),
562
576
  arrow: z2.enum(["none", "end", "start", "both"]).default("none"),
563
577
  arrowSize: z2.number().min(4).max(32).default(10),
564
- opacity: z2.number().min(0).max(1).default(1)
578
+ opacity: z2.number().min(0).max(1).default(1),
579
+ shadow: drawShadowSchema.optional()
565
580
  }).strict();
566
581
  var drawPathSchema = z2.object({
567
582
  type: z2.literal("path"),
@@ -569,7 +584,8 @@ var drawPathSchema = z2.object({
569
584
  fill: colorHexSchema2.optional(),
570
585
  stroke: colorHexSchema2.optional(),
571
586
  strokeWidth: z2.number().min(0).max(32).default(0),
572
- opacity: z2.number().min(0).max(1).default(1)
587
+ opacity: z2.number().min(0).max(1).default(1),
588
+ shadow: drawShadowSchema.optional()
573
589
  }).strict();
574
590
  var drawBadgeSchema = z2.object({
575
591
  type: z2.literal("badge"),
@@ -583,7 +599,8 @@ var drawBadgeSchema = z2.object({
583
599
  paddingX: z2.number().min(0).max(64).default(10),
584
600
  paddingY: z2.number().min(0).max(32).default(4),
585
601
  borderRadius: z2.number().min(0).max(64).default(12),
586
- opacity: z2.number().min(0).max(1).default(1)
602
+ opacity: z2.number().min(0).max(1).default(1),
603
+ shadow: drawShadowSchema.optional()
587
604
  }).strict();
588
605
  var drawGradientRectSchema = z2.object({
589
606
  type: z2.literal("gradient-rect"),
@@ -593,7 +610,8 @@ var drawGradientRectSchema = z2.object({
593
610
  height: z2.number().positive(),
594
611
  gradient: gradientSchema,
595
612
  radius: z2.number().min(0).max(256).default(0),
596
- opacity: z2.number().min(0).max(1).default(1)
613
+ opacity: z2.number().min(0).max(1).default(1),
614
+ shadow: drawShadowSchema.optional()
597
615
  }).strict();
598
616
  var drawGridSchema = z2.object({
599
617
  type: z2.literal("grid"),
@@ -604,6 +622,26 @@ var drawGridSchema = z2.object({
604
622
  offsetX: z2.number().default(0),
605
623
  offsetY: z2.number().default(0)
606
624
  }).strict();
625
+ var drawTextRowSegmentSchema = z2.object({
626
+ text: z2.string().min(1).max(500),
627
+ color: colorHexSchema2.optional(),
628
+ fontSize: z2.number().min(6).max(200).optional(),
629
+ fontWeight: z2.number().int().min(100).max(900).optional(),
630
+ fontFamily: drawFontFamilySchema.optional()
631
+ }).strict();
632
+ var drawTextRowSchema = z2.object({
633
+ type: z2.literal("text-row"),
634
+ segments: z2.array(drawTextRowSegmentSchema).min(1).max(20),
635
+ x: z2.number(),
636
+ y: z2.number(),
637
+ align: z2.enum(["left", "center", "right"]).default("center"),
638
+ baseline: z2.enum(["top", "middle", "alphabetic", "bottom"]).default("alphabetic"),
639
+ defaultFontSize: z2.number().min(6).max(200).default(16),
640
+ defaultFontWeight: z2.number().int().min(100).max(900).default(400),
641
+ defaultFontFamily: drawFontFamilySchema.default("body"),
642
+ defaultColor: colorHexSchema2.default("#FFFFFF"),
643
+ opacity: z2.number().min(0).max(1).default(1)
644
+ }).strict();
607
645
  var drawCommandSchema = z2.discriminatedUnion("type", [
608
646
  drawRectSchema,
609
647
  drawCircleSchema,
@@ -613,7 +651,8 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
613
651
  drawPathSchema,
614
652
  drawBadgeSchema,
615
653
  drawGradientRectSchema,
616
- drawGridSchema
654
+ drawGridSchema,
655
+ drawTextRowSchema
617
656
  ]);
618
657
  var defaultCanvas = {
619
658
  width: 1200,
@@ -717,7 +756,14 @@ var flowNodeElementSchema = z2.object({
717
756
  badgeColor: colorHexSchema2.optional(),
718
757
  badgeBackground: colorHexSchema2.optional(),
719
758
  badgePosition: z2.enum(["top", "inside-top"]).default("inside-top"),
720
- shadow: flowNodeShadowSchema.optional()
759
+ shadow: flowNodeShadowSchema.optional(),
760
+ // Accent bar (left edge colored bar)
761
+ accentColor: colorHexSchema2.optional(),
762
+ accentBarWidth: z2.number().min(0).max(16).default(3),
763
+ // Inner glow (gradient overlay from accent color inward)
764
+ glowColor: colorHexSchema2.optional(),
765
+ glowWidth: z2.number().min(0).max(64).default(16),
766
+ glowOpacity: z2.number().min(0).max(1).default(0.15)
721
767
  }).strict();
722
768
  var anchorHintSchema = z2.union([
723
769
  z2.enum(["top", "bottom", "left", "right", "center"]),