@shotstack/schemas 1.8.2 → 1.8.3

package/dist/schema.d.ts

@@ -1383,36 +1383,688 @@ export interface components {
             offset?: components["schemas"]["Offset"];
         };
         /**
-         * @description The SvgAsset is used to create scalable vector graphic (SVG) assets using
-         *     raw SVG markup.
+         * @description The SvgAsset is used to add scalable vector graphics (SVG) shapes to a video.
+         *     It provides two mutually exclusive ways to define shapes:
          *
+         *     **Option 1: Import SVG markup using `src`**
          *     ```json
          *     {
          *       "type": "svg",
          *       "src": "<svg width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#FF0000\"/></svg>"
          *     }
          *     ```
+         *     When using `src`, no other properties are allowed. The fill, stroke, and dimensions
+         *     are automatically extracted from the SVG markup.
          *
-         *     See [W3C SVG 2 Specification](https://www.w3.org/TR/SVG2/) for SVG markup syntax.
+         *     **Option 2: Define shapes programmatically using `shape`**
+         *     ```json
+         *     {
+         *       "type": "svg",
+         *       "shape": { "type": "circle", "radius": 50 },
+         *       "fill": { "type": "solid", "color": "#FF0000" }
+         *     }
+         *     ```
+         *     When using `shape`, you can customize fill, stroke, shadow, transform, and other properties.
+         *     The `src` property is not allowed in this mode.
+         *
+         *     **Important:** You must provide either `src` OR `shape`, but not both.
+         *     These two modes are mutually exclusive.
+         *
+         *     **Available Shapes (Option 2 only):**
+         *     - `rectangle` - Rectangles with optional rounded corners
+         *     - `circle` - Perfect circles
+         *     - `ellipse` - Ellipses/ovals with separate x and y radii
+         *     - `line` - Straight lines with configurable thickness
+         *     - `polygon` - Regular polygons (triangle, pentagon, hexagon, etc.)
+         *     - `star` - Multi-pointed stars
+         *     - `arrow` - Directional arrows
+         *     - `heart` - Heart shapes
+         *     - `cross` - Plus/cross shapes
+         *     - `ring` - Donut/ring shapes
+         *     - `path` - Custom shapes using SVG path data
+         *
+         *     See [W3C SVG 2 Specification](https://www.w3.org/TR/SVG2/) for path data syntax.
          * @example {
          *       "type": "svg",
-         *       "src": "<svg width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#3498db\"/></svg>"
+         *       "shape": {
+         *         "type": "star",
+         *         "points": 5,
+         *         "outerRadius": 100,
+         *         "innerRadius": 50
+         *       },
+         *       "fill": {
+         *         "type": "linear",
+         *         "angle": 45,
+         *         "stops": [
+         *           {
+         *             "offset": 0,
+         *             "color": "#FFD700"
+         *           },
+         *           {
+         *             "offset": 1,
+         *             "color": "#FF6B6B"
+         *           }
+         *         ],
+         *         "opacity": 1
+         *       },
+         *       "stroke": {
+         *         "color": "#2C3E50",
+         *         "width": 3,
+         *         "opacity": 1,
+         *         "lineCap": "round",
+         *         "lineJoin": "round"
+         *       },
+         *       "transform": {
+         *         "x": 200,
+         *         "y": 150,
+         *         "rotation": 0,
+         *         "scale": 1
+         *       },
+         *       "opacity": 1
          *     }
          */
         SvgAsset: {
             /**
-             * @description The asset type - set to `svg` for SVG assets. (enum property replaced by openapi-typescript)
+             * @description The asset type - set to `svg` for SVG shapes. (enum property replaced by openapi-typescript)
              * @enum {string}
              */
             type: "svg";
             /**
-             * @description Raw SVG markup string to import.
+             * @description Raw SVG markup string to import. When provided, the shape is extracted
+             *     automatically from the SVG content.
              *
              *     **Supported elements:** `<path>`, `<rect>`, `<circle>`, `<ellipse>`,
              *     `<line>`, `<polygon>`, `<polyline>`
+             *
+             *     **Automatically extracted:**
+             *     - Path data (converted to a single combined path)
+             *     - Fill color (from `fill` attribute or `style`)
+             *     - Stroke color and width (from attributes or `style`)
+             *     - Dimensions (from `width`/`height` or `viewBox`)
+             *     - Opacity (from `opacity` attribute)
+             *
+             *     **Important:** When using `src`, no other properties (shape, fill, stroke, etc.)
+             *     are allowed. All styling must be defined within the SVG markup itself.
              * @example <svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="#3498db"/></svg>
              */
-            src: string;
+            src?: string;
+            /**
+             * @description The shape definition using primitives. The `type` property within determines
+             *     the shape kind and its specific properties.
+             *
+             *     **Important:** When using `shape`, the `src` property is not allowed.
+             */
+            shape?: components["schemas"]["SvgShape"];
+            /**
+             * @description Fill properties for the shape interior.
+             *     Can be a solid color or a gradient (linear/radial).
+             *     If omitted, the shape will have no fill (transparent interior).
+             *
+             *     **Note:** Only allowed when using `shape`, not with `src`.
+             */
+            fill?: components["schemas"]["SvgFill"];
+            /**
+             * @description Stroke (outline) properties for the shape.
+             *     If omitted, the shape will have no stroke (no outline).
+             *
+             *     **Note:** Only allowed when using `shape`, not with `src`.
+             */
+            stroke?: components["schemas"]["SvgStroke"];
+            /**
+             * @description Drop shadow properties for the shape.
+             *     Creates a shadow effect behind the shape.
+             *
+             *     **Note:** Only allowed when using `shape`, not with `src`.
+             */
+            shadow?: components["schemas"]["SvgShadow"];
+            /**
+             * @description Transform properties for positioning, rotating, and scaling the shape.
+             *     The transform is applied relative to the transformation origin.
+             *
+             *     **Note:** Only allowed when using `shape`, not with `src`.
+             */
+            transform?: components["schemas"]["SvgTransform"];
+            /**
+             * @description The overall opacity of the entire shape (including fill, stroke, and shadow).
+             *     `1` is fully opaque, `0` is fully transparent.
+             *     This is applied on top of individual fill/stroke/shadow opacity values.
+             *
+             *     **Note:** Only allowed when using `shape`, not with `src`.
+             * @default 1
+             * @example 1
+             */
+            opacity?: number;
+            /**
+             * @description The width of the bounding box in pixels.
+             *     If specified, the shape may be scaled to fit within this width.
+             *     If omitted, the shape uses its natural dimensions.
+             *
+             *     **Note:** Only allowed when using `shape`, not with `src`.
+             * @example 400
+             */
+            width?: number;
+            /**
+             * @description The height of the bounding box in pixels.
+             *     If specified, the shape may be scaled to fit within this height.
+             *     If omitted, the shape uses its natural dimensions.
+             *
+             *     **Note:** Only allowed when using `shape`, not with `src`.
+             * @example 300
+             */
+            height?: number;
+        };
+        /**
+         * @description The shape definition for an SVG asset. Each shape type has its own specific
+         *     properties. The `type` field determines which shape is rendered.
+         */
+        SvgShape: components["schemas"]["SvgRectangleShape"] | components["schemas"]["SvgCircleShape"] | components["schemas"]["SvgEllipseShape"] | components["schemas"]["SvgLineShape"] | components["schemas"]["SvgPolygonShape"] | components["schemas"]["SvgStarShape"] | components["schemas"]["SvgArrowShape"] | components["schemas"]["SvgHeartShape"] | components["schemas"]["SvgCrossShape"] | components["schemas"]["SvgRingShape"] | components["schemas"]["SvgPathShape"];
+        /**
+         * @description A rectangle shape with optional rounded corners.
+         *     The rectangle is defined by its width and height dimensions.
+         */
+        SvgRectangleShape: {
+            /**
+             * @description The shape type - set to `rectangle`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "rectangle";
+            /**
+             * @description The width of the rectangle in pixels.
+             * @example 200
+             */
+            width: number;
+            /**
+             * @description The height of the rectangle in pixels.
+             * @example 100
+             */
+            height: number;
+            /**
+             * @description The corner radius for rounded corners in pixels.
+             *     Set to `0` for sharp corners. The radius is automatically clamped
+             *     to half of the smallest dimension.
+             * @default 0
+             * @example 10
+             */
+            cornerRadius?: number;
+        };
+        /**
+         * @description A perfect circle shape defined by its radius.
+         *     The circle is centered at the shape's position.
+         */
+        SvgCircleShape: {
+            /**
+             * @description The shape type - set to `circle`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "circle";
+            /**
+             * @description The radius of the circle in pixels.
+             * @example 50
+             */
+            radius: number;
+        };
+        /**
+         * @description An ellipse (oval) shape with separate horizontal and vertical radii.
+         *     The ellipse is centered at the shape's position.
+         */
+        SvgEllipseShape: {
+            /**
+             * @description The shape type - set to `ellipse`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "ellipse";
+            /**
+             * @description The horizontal radius (semi-major axis) in pixels.
+             * @example 80
+             */
+            radiusX: number;
+            /**
+             * @description The vertical radius (semi-minor axis) in pixels.
+             * @example 50
+             */
+            radiusY: number;
+        };
+        /**
+         * @description A straight line shape with a specified length and thickness.
+         *     The line is drawn horizontally by default and can be rotated using transform.
+         */
+        SvgLineShape: {
+            /**
+             * @description The shape type - set to `line`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "line";
+            /**
+             * @description The length of the line in pixels.
+             * @example 100
+             */
+            length: number;
+            /**
+             * @description The thickness of the line in pixels.
+             * @example 4
+             */
+            thickness: number;
+        };
+        /**
+         * @description A regular polygon shape with a specified number of sides.
+         *     Examples: triangle (3), square (4), pentagon (5), hexagon (6), etc.
+         *     The polygon is inscribed in a circle of the given radius.
+         */
+        SvgPolygonShape: {
+            /**
+             * @description The shape type - set to `polygon`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "polygon";
+            /**
+             * @description The number of sides of the polygon.
+             *     Minimum 3 (triangle), maximum 100 for practical use.
+             * @example 6
+             */
+            sides: number;
+            /**
+             * @description The radius of the circumscribed circle in pixels.
+             *     This determines the size of the polygon.
+             * @example 50
+             */
+            radius: number;
+        };
+        /**
+         * @description A star shape with a specified number of points.
+         *     The star is defined by outer and inner radii, creating the characteristic
+         *     pointed appearance.
+         */
+        SvgStarShape: {
+            /**
+             * @description The shape type - set to `star`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "star";
+            /**
+             * @description The number of points on the star.
+             *     Minimum 3 for a triangle-like star, typically 5 for a classic star.
+             * @example 5
+             */
+            points: number;
+            /**
+             * @description The outer radius in pixels - the distance from center to the tips of the points.
+             * @example 50
+             */
+            outerRadius: number;
+            /**
+             * @description The inner radius in pixels - the distance from center to the inner vertices.
+             *     Should be smaller than outerRadius for a star effect.
+             * @example 25
+             */
+            innerRadius: number;
+        };
+        /**
+         * @description An arrow shape pointing to the right by default.
+         *     Use transform rotation to change direction.
+         */
+        SvgArrowShape: {
+            /**
+             * @description The shape type - set to `arrow`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "arrow";
+            /**
+             * @description The total length of the arrow from tail to tip in pixels.
+             * @example 100
+             */
+            length: number;
+            /**
+             * @description The width of the arrow head (the widest part) in pixels.
+             * @example 40
+             */
+            headWidth: number;
+            /**
+             * @description The length of the arrow head portion in pixels.
+             * @example 30
+             */
+            headLength: number;
+            /**
+             * @description The width of the arrow shaft (body) in pixels.
+             * @example 20
+             */
+            shaftWidth: number;
+        };
+        /**
+         * @description A heart shape commonly used for love/like icons.
+         *     The heart is defined by a single size parameter.
+         */
+        SvgHeartShape: {
+            /**
+             * @description The shape type - set to `heart`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "heart";
+            /**
+             * @description The size of the heart in pixels.
+             *     This determines both the width and height proportionally.
+             * @example 100
+             */
+            size: number;
+        };
+        /**
+         * @description A cross or plus shape with equal or different arm lengths.
+         *     Can be styled as a plus sign (+) or a cross (x with rotation).
+         */
+        SvgCrossShape: {
+            /**
+             * @description The shape type - set to `cross`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "cross";
+            /**
+             * @description The total width of the cross in pixels.
+             * @example 100
+             */
+            width: number;
+            /**
+             * @description The total height of the cross in pixels.
+             * @example 100
+             */
+            height: number;
+            /**
+             * @description The thickness of the cross arms in pixels.
+             * @example 20
+             */
+            thickness: number;
+        };
+        /**
+         * @description A ring (donut/annulus) shape - a circle with a circular hole in the center.
+         *     The ring is defined by outer and inner radii.
+         */
+        SvgRingShape: {
+            /**
+             * @description The shape type - set to `ring`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "ring";
+            /**
+             * @description The outer radius of the ring in pixels.
+             * @example 50
+             */
+            outerRadius: number;
+            /**
+             * @description The inner radius (hole) of the ring in pixels.
+             *     Must be smaller than outerRadius.
+             * @example 30
+             */
+            innerRadius: number;
+        };
+        /**
+         * @description A custom shape defined by SVG path data.
+         *     Supports all standard SVG path commands for creating complex shapes.
+         *
+         *     **Path Commands:**
+         *     - `M x y` / `m dx dy` - Move to (absolute/relative)
+         *     - `L x y` / `l dx dy` - Line to
+         *     - `H x` / `h dx` - Horizontal line to
+         *     - `V y` / `v dy` - Vertical line to
+         *     - `C x1 y1 x2 y2 x y` / `c` - Cubic Bezier curve
+         *     - `S x2 y2 x y` / `s` - Smooth cubic Bezier
+         *     - `Q x1 y1 x y` / `q` - Quadratic Bezier curve
+         *     - `T x y` / `t` - Smooth quadratic Bezier
+         *     - `A rx ry angle large-arc sweep x y` / `a` - Elliptical arc
+         *     - `Z` / `z` - Close path
+         */
+        SvgPathShape: {
+            /**
+             * @description The shape type - set to `path`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "path";
+            /**
+             * @description The SVG path data string defining the shape.
+             *     Uses standard SVG path commands (M, L, C, Q, A, Z, etc.).
+             *     Example: `M 0 0 L 100 0 L 100 100 L 0 100 Z` draws a square.
+             * @example M 0 0 L 100 0 L 50 86.6 Z
+             */
+            d: string;
+        };
+        /**
+         * @description Fill properties for SVG shapes. Supports solid colors and gradients.
+         *     The fill defines how the interior of a shape is painted.
+         */
+        SvgFill: components["schemas"]["SvgSolidFill"] | components["schemas"]["SvgLinearGradientFill"] | components["schemas"]["SvgRadialGradientFill"];
+        /** @description A solid color fill for SVG shapes. */
+        SvgSolidFill: {
+            /**
+             * @description The fill type - set to `solid` for a single color fill. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "solid";
+            /**
+             * @description The fill color using hexadecimal color notation (e.g., `#FF0000` for red).
+             *     Must be a 6-digit hex color code prefixed with `#`.
+             * @default #000000
+             * @example #3498db
+             */
+            color: string;
+            /**
+             * @description The opacity of the fill where `1` is fully opaque and `0` is fully transparent.
+             *     Values between 0 and 1 create semi-transparent fills.
+             * @default 1
+             * @example 0.8
+             */
+            opacity?: number;
+        };
+        /**
+         * @description A linear gradient fill that transitions colors along a straight line.
+         *     The gradient direction is controlled by the `angle` property.
+         */
+        SvgLinearGradientFill: {
+            /**
+             * @description The fill type - set to `linear` for a linear gradient fill. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "linear";
+            /**
+             * @description The angle of the gradient in degrees. `0` is horizontal (left to right),
+             *     `90` is vertical (bottom to top), `180` is right to left, etc.
+             * @default 0
+             * @example 45
+             */
+            angle?: number;
+            /**
+             * @description Array of color stops that define the gradient colors and their positions.
+             *     Must have at least 2 stops. Offsets should increase from 0 to 1.
+             */
+            stops: components["schemas"]["SvgGradientStop"][];
+            /**
+             * @description The overall opacity of the gradient where `1` is fully opaque and `0` is fully transparent.
+             * @default 1
+             * @example 1
+             */
+            opacity?: number;
+        };
+        /**
+         * @description A radial gradient fill that transitions colors radiating outward from a center point.
+         *     The gradient creates a circular or elliptical color transition.
+         */
+        SvgRadialGradientFill: {
+            /**
+             * @description The fill type - set to `radial` for a radial gradient fill. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "radial";
+            /**
+             * @description Array of color stops that define the gradient colors and their positions.
+             *     Must have at least 2 stops. Offset `0` is the center, `1` is the outer edge.
+             */
+            stops: components["schemas"]["SvgGradientStop"][];
+            /**
+             * @description The overall opacity of the gradient where `1` is fully opaque and `0` is fully transparent.
+             * @default 1
+             * @example 1
+             */
+            opacity?: number;
+        };
+        /**
+         * @description A color stop in a gradient. Each stop defines a color at a specific position
+         *     along the gradient vector. Gradients require at least 2 stops.
+         */
+        SvgGradientStop: {
+            /**
+             * @description Position of the color stop along the gradient vector.
+             *     `0` represents the start and `1` represents the end of the gradient.
+             * @example 0.5
+             */
+            offset: number;
+            /**
+             * @description The color at this stop using hexadecimal color notation.
+             * @example #e74c3c
+             */
+            color: string;
+        };
+        /**
+         * @description Stroke (outline) properties for SVG shapes. The stroke defines how the outline
+         *     of a shape is painted, including its color, width, and line style.
+         */
+        SvgStroke: {
+            /**
+             * @description The stroke color using hexadecimal color notation.
+             * @default #000000
+             * @example #2c3e50
+             */
+            color?: string;
+            /**
+             * @description The width of the stroke in pixels. Must be greater than 0.
+             *     Larger values create thicker outlines.
+             * @default 1
+             * @example 2
+             */
+            width?: number;
+            /**
+             * @description The opacity of the stroke where `1` is opaque and `0` is transparent.
+             * @default 1
+             * @example 1
+             */
+            opacity?: number;
+            /**
+             * @description The shape at the end of open paths (lines, polylines, unclosed paths).
+             *     <ul>
+             *       <li>`butt` - flat edge perpendicular to the line (default)</li>
+             *       <li>`round` - semicircular cap extending beyond the endpoint</li>
+             *       <li>`square` - rectangular cap extending beyond the endpoint</li>
+             *     </ul>
+             * @default butt
+             * @example round
+             * @enum {string}
+             */
+            lineCap?: "butt" | "round" | "square";
+            /**
+             * @description The shape at the corners where two lines meet.
+             *     <ul>
+             *       <li>`miter` - sharp corner (default)</li>
+             *       <li>`round` - rounded corner</li>
+             *       <li>`bevel` - flattened corner</li>
+             *     </ul>
+             * @default miter
+             * @example round
+             * @enum {string}
+             */
+            lineJoin?: "miter" | "round" | "bevel";
+            /**
+             * @description Pattern of dashes and gaps for the stroke. An array of numbers where
+             *     odd indices are dash lengths and even indices are gap lengths.
+             *     For example, `[10, 5]` creates 10px dashes with 5px gaps.
+             *     `[10, 5, 2, 5]` creates alternating 10px and 2px dashes with 5px gaps.
+             * @example [
+             *       10,
+             *       5
+             *     ]
+             */
+            dashArray?: number[];
+            /**
+             * @description Offset for the dash pattern. Positive values shift the pattern
+             *     forward along the path, negative values shift it backward.
+             * @default 0
+             * @example 5
+             */
+            dashOffset?: number;
+        };
+        /** @description Drop shadow properties for SVG shapes. Creates a shadow effect behind the shape. */
+        SvgShadow: {
+            /**
+             * @description Horizontal offset of the shadow in pixels.
+             *     Positive values move the shadow to the right, negative to the left.
+             * @default 0
+             * @example 4
+             */
+            offsetX?: number;
+            /**
+             * @description Vertical offset of the shadow in pixels.
+             *     Positive values move the shadow down, negative values move it up.
+             * @default 0
+             * @example 4
+             */
+            offsetY?: number;
+            /**
+             * @description The blur radius of the shadow in pixels. Must be 0 or greater.
+             * @default 0
+             * @example 8
+             */
+            blur?: number;
+            /**
+             * @description The shadow color using hexadecimal color notation.
+             * @default #000000
+             * @example #000000
+             */
+            color?: string;
+            /**
+             * @description The opacity of the shadow where `1` is opaque and `0` is transparent.
+             * @default 0.5
+             * @example 0.3
+             */
+            opacity?: number;
+        };
+        /** @description Transformation properties for positioning, rotating, and scaling SVG shapes. */
+        SvgTransform: {
+            /**
+             * @description The x-coordinate position of the shape in pixels.
+             *     Relative to the top-left corner of the viewport.
+             * @default 0
+             * @example 100
+             */
+            x?: number;
+            /**
+             * @description The y-coordinate position of the shape in pixels.
+             *     Relative to the top-left corner of the viewport.
+             * @default 0
+             * @example 100
+             */
+            y?: number;
+            /**
+             * @description Rotation angle in degrees. Positive values rotate clockwise,
+             *     negative values rotate counter-clockwise. Range: -360 to 360.
+             * @default 0
+             * @example 45
+             */
+            rotation?: number;
+            /**
+             * @description Scale factor for the shape. `1` is original size, `2` is double size,
+             *     `0.5` is half size. Must be greater than 0.
+             * @default 1
+             * @example 1.5
+             */
+            scale?: number;
+            /**
+             * @description The x-coordinate of the transformation origin as a value from 0 to 1.
+             *     `0` is the left edge, `0.5` is the center, `1` is the right edge.
+             * @default 0.5
+             * @example 0.5
+             */
+            originX?: number;
+            /**
+             * @description The y-coordinate of the transformation origin as a value from 0 to 1.
+             *     `0` is the top edge, `0.5` is the center, `1` is the bottom edge.
+             * @default 0.5
+             * @example 0.5
+             */
+            originY?: number;
         };
         /** @description In and out transitions for a clip - i.e. fade in and fade out */
         Transition: {