@remotion/shapes 4.0.473 → 4.0.475

package/dist/components/triangle.d.ts

@@ -2,12 +2,4 @@ import React from 'react';
 import type { MakeTriangleProps } from '../utils/make-triangle';
 import type { AllShapesProps } from './render-svg';
 export type TriangleProps = MakeTriangleProps & AllShapesProps;
-/**
- * @description Renders an SVG element containing a triangle with same length on all sides.
- * @param {Number} length The length of one triangle side.
- * @param {string} direction The direction of the triangle
- * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
- * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
- * @see [Documentation](https://www.remotion.dev/docs/shapes/triangle)
- */
 export declare const Triangle: React.FC<TriangleProps>;

package/dist/components/triangle.js

@@ -2,8 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Triangle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_triangle_1 = require("../utils/make-triangle");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const triangleSchema = (0, schema_1.makeShapeSchema)({
+    length: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Length',
+        min: 0,
+    }),
+    direction: (0, schema_1.enumField)({
+        defaultValue: 'right',
+        description: 'Direction',
+        variants: ['right', 'left', 'up', 'down'],
+    }),
+    cornerRadius: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Corner Radius',
+        min: 0,
+    }),
+});
 /**
  * @description Renders an SVG element containing a triangle with same length on all sides.
  * @param {Number} length The length of one triangle side.
@@ -12,7 +31,12 @@ const render_svg_1 = require("./render-svg");
  * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
  * @see [Documentation](https://www.remotion.dev/docs/shapes/triangle)
  */
-const Triangle = ({ length, direction, edgeRoundness, cornerRadius, ...props }) => {
-    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction, edgeRoundness, cornerRadius }), ...props }));
+const TriangleInner = ({ length, direction, edgeRoundness, cornerRadius, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Triangle>", documentationLink: "https://www.remotion.dev/docs/shapes/triangle", ...(0, make_triangle_1.makeTriangle)({ length, direction, edgeRoundness, cornerRadius }), ...props }));
 };
-exports.Triangle = Triangle;
+exports.Triangle = remotion_1.Internals.wrapInSchema({
+    Component: TriangleInner,
+    schema: triangleSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Triangle);

package/dist/esm/index.mjs

@@ -1,3 +1,6 @@
+// src/components/arrow.tsx
+import { Internals as Internals3 } from "remotion";
+
 // src/utils/make-arrow.ts
 import { serializeInstructions } from "@remotion/paths";
 var unitDir = (from, to) => {
@@ -137,8 +140,13 @@ var makeArrow = ({
 };
 
 // src/components/render-svg.tsx
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import { version } from "react-dom";
+import {
+  HtmlInCanvas,
+  Internals,
+  Sequence
+} from "remotion";
 
 // src/utils/does-react-support-canary.ts
 var doesReactSupportTransformOriginProperty = (version) => {
@@ -153,6 +161,8 @@ var doesReactSupportTransformOriginProperty = (version) => {
 // src/components/render-svg.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var RenderSvg = ({
+  defaultName,
+  documentationLink,
   width,
   height,
   path,
@@ -160,7 +170,16 @@ var RenderSvg = ({
   pathStyle,
   transformOrigin,
   debug,
+  effects = [],
   instructions,
+  pixelDensity,
+  durationInFrames,
+  from,
+  hidden,
+  name,
+  showInTimeline,
+  _experimentalControls: controls,
+  stack,
   ...props
 }) => {
   const actualStyle = useMemo(() => {
@@ -175,13 +194,23 @@ var RenderSvg = ({
       ...pathStyle ?? {}
     };
   }, [pathStyle]);
+  const outlineRef = useRef(null);
+  const setSvgRef = useCallback((node) => {
+    outlineRef.current = node;
+  }, []);
+  const setCanvasRef = useCallback((canvas) => {
+    outlineRef.current = canvas;
+  }, []);
+  const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
+  const videoConfig = Internals.useUnsafeVideoConfig();
   const reactSupportsTransformOrigin = doesReactSupportTransformOriginProperty(version);
-  return /* @__PURE__ */ jsxs("svg", {
+  const svg = /* @__PURE__ */ jsxs("svg", {
+    ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined,
     width,
     height,
     viewBox: `0 0 ${width} ${height}`,
     xmlns: "http://www.w3.org/2000/svg",
-    style: actualStyle,
+    style: effects.length === 0 || !videoConfig ? actualStyle : { overflow: "visible" },
     children: [
       /* @__PURE__ */ jsx("path", {
         ...reactSupportsTransformOrigin ? {
@@ -236,11 +265,140 @@ var RenderSvg = ({
       }) : null
     ]
   });
+  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx(HtmlInCanvas, {
+    ref: setCanvasRef,
+    width: Math.ceil(width),
+    height: Math.ceil(height),
+    effects,
+    pixelDensity,
+    showInTimeline: false,
+    style: actualStyle,
+    _experimentalControls: controls,
+    children: svg
+  });
+  const stackProps = stack === undefined ? null : { stack };
+  if (!videoConfig) {
+    return svg;
+  }
+  return /* @__PURE__ */ jsx(Sequence, {
+    layout: "none",
+    from,
+    hidden,
+    showInTimeline,
+    _experimentalControls: controls,
+    _remotionInternalEffects: memoizedEffectDefinitions,
+    durationInFrames,
+    name: name ?? defaultName,
+    _remotionInternalRefForOutline: outlineRef,
+    _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined,
+    ...stackProps,
+    children: content
+  });
+};
+
+// src/components/schema.ts
+import {
+  Internals as Internals2
+} from "remotion";
+var numberField = ({
+  defaultValue,
+  description,
+  hiddenFromList = false,
+  max,
+  min,
+  step = 1
+}) => {
+  return {
+    type: "number",
+    default: defaultValue,
+    description,
+    hiddenFromList,
+    max,
+    min,
+    step
+  };
+};
+var booleanField = ({
+  defaultValue,
+  description
+}) => {
+  return {
+    type: "boolean",
+    default: defaultValue,
+    description
+  };
+};
+var colorField = ({
+  defaultValue,
+  description
+}) => {
+  return {
+    type: "color",
+    default: defaultValue,
+    description
+  };
+};
+var enumField = ({
+  defaultValue,
+  description,
+  variants
+}) => {
+  return {
+    type: "enum",
+    default: defaultValue,
+    description,
+    variants: Object.fromEntries(variants.map((variant) => [variant, {}]))
+  };
+};
+var makeShapeSchema = (shapeFields) => {
+  return {
+    from: Internals2.sequenceSchema.from,
+    durationInFrames: Internals2.sequenceSchema.durationInFrames,
+    ...shapeFields,
+    fill: colorField({
+      defaultValue: "#0b84ff",
+      description: "Fill"
+    }),
+    ...Internals2.sequenceVisualStyleSchema,
+    hidden: Internals2.sequenceSchema.hidden
+  };
 };
 
 // src/components/arrow.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Arrow = ({
+var arrowSchema = makeShapeSchema({
+  length: numberField({
+    defaultValue: 300,
+    description: "Length",
+    min: 0
+  }),
+  headWidth: numberField({
+    defaultValue: 185,
+    description: "Head Width",
+    min: 0
+  }),
+  headLength: numberField({
+    defaultValue: 120,
+    description: "Head Length",
+    min: 0
+  }),
+  shaftWidth: numberField({
+    defaultValue: 80,
+    description: "Shaft Width",
+    min: 0
+  }),
+  direction: enumField({
+    defaultValue: "right",
+    description: "Direction",
+    variants: ["right", "left", "up", "down"]
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var ArrowInner = ({
   length,
   headWidth,
   headLength,
@@ -250,6 +408,8 @@ var Arrow = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx2(RenderSvg, {
+    defaultName: "<Arrow>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/arrow",
     ...makeArrow({
       length,
       headWidth,
@@ -261,6 +421,15 @@ var Arrow = ({
     ...props
   });
 };
+var Arrow = Internals3.wrapInSchema({
+  Component: ArrowInner,
+  schema: arrowSchema,
+  supportsEffects: true
+});
+Internals3.addSequenceStackTraces(Arrow);
+// src/components/circle.tsx
+import { Internals as Internals4 } from "remotion";
+
 // src/utils/make-circle.ts
 import { serializeInstructions as serializeInstructions2 } from "@remotion/paths";
 var makeCircle = ({ radius }) => {
@@ -306,12 +475,30 @@ var makeCircle = ({ radius }) => {
 
 // src/components/circle.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var Circle = ({ radius, ...props }) => {
+var circleSchema = makeShapeSchema({
+  radius: numberField({
+    defaultValue: 100,
+    description: "Radius",
+    min: 0
+  })
+});
+var CircleInner = ({ radius, ...props }) => {
   return /* @__PURE__ */ jsx3(RenderSvg, {
+    defaultName: "<Circle>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/circle",
     ...makeCircle({ radius }),
     ...props
   });
 };
+var Circle = Internals4.wrapInSchema({
+  Component: CircleInner,
+  schema: circleSchema,
+  supportsEffects: true
+});
+Internals4.addSequenceStackTraces(Circle);
+// src/components/ellipse.tsx
+import { Internals as Internals5 } from "remotion";
+
 // src/utils/make-ellipse.ts
 import { serializeInstructions as serializeInstructions3 } from "@remotion/paths";
 var makeEllipse = ({ rx, ry }) => {
@@ -347,12 +534,35 @@ var makeEllipse = ({ rx, ry }) => {
 
 // src/components/ellipse.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var Ellipse = ({ rx, ry, ...props }) => {
+var ellipseSchema = makeShapeSchema({
+  rx: numberField({
+    defaultValue: 100,
+    description: "X Radius",
+    min: 0
+  }),
+  ry: numberField({
+    defaultValue: 50,
+    description: "Y Radius",
+    min: 0
+  })
+});
+var EllipseInner = ({ rx, ry, ...props }) => {
   return /* @__PURE__ */ jsx4(RenderSvg, {
+    defaultName: "<Ellipse>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/ellipse",
     ...makeEllipse({ rx, ry }),
     ...props
   });
 };
+var Ellipse = Internals5.wrapInSchema({
+  Component: EllipseInner,
+  schema: ellipseSchema,
+  supportsEffects: true
+});
+Internals5.addSequenceStackTraces(Ellipse);
+// src/components/heart.tsx
+import { Internals as Internals6 } from "remotion";
+
 // src/utils/make-heart.ts
 import { serializeInstructions as serializeInstructions4 } from "@remotion/paths";
 var makeHeart = ({
@@ -447,7 +657,30 @@ var makeHeart = ({
 
 // src/components/heart.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Heart = ({
+var heartSchema = makeShapeSchema({
+  height: numberField({
+    defaultValue: 100,
+    description: "Height",
+    min: 0
+  }),
+  aspectRatio: numberField({
+    defaultValue: 1.1,
+    description: "Aspect Ratio",
+    min: 0,
+    step: 0.01
+  }),
+  bottomRoundnessAdjustment: numberField({
+    defaultValue: 0,
+    description: "Bottom Roundness Adjustment",
+    step: 0.01
+  }),
+  depthAdjustment: numberField({
+    defaultValue: 0,
+    description: "Depth Adjustment",
+    step: 0.01
+  })
+});
+var HeartInner = ({
   aspectRatio,
   height,
   bottomRoundnessAdjustment = 0,
@@ -455,6 +688,8 @@ var Heart = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx5(RenderSvg, {
+    defaultName: "<Heart>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/heart",
     ...makeHeart({
       aspectRatio,
       height,
@@ -464,6 +699,15 @@ var Heart = ({
     ...props
   });
 };
+var Heart = Internals6.wrapInSchema({
+  Component: HeartInner,
+  schema: heartSchema,
+  supportsEffects: true
+});
+Internals6.addSequenceStackTraces(Heart);
+// src/components/pie.tsx
+import { Internals as Internals7 } from "remotion";
+
 // src/utils/make-pie.ts
 import { serializeInstructions as serializeInstructions5 } from "@remotion/paths";
 var getCoord = ({
@@ -574,7 +818,34 @@ var makePie = ({
 
 // src/components/pie.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Pie = ({
+var pieSchema = makeShapeSchema({
+  radius: numberField({
+    defaultValue: 100,
+    description: "Radius",
+    min: 0
+  }),
+  progress: numberField({
+    defaultValue: 0.5,
+    description: "Progress",
+    max: 1,
+    min: 0,
+    step: 0.01
+  }),
+  closePath: booleanField({
+    defaultValue: true,
+    description: "Close Path"
+  }),
+  counterClockwise: booleanField({
+    defaultValue: false,
+    description: "Counter Clockwise"
+  }),
+  rotation: numberField({
+    defaultValue: 0,
+    description: "Rotation",
+    step: 0.01
+  })
+});
+var PieInner = ({
   radius,
   progress,
   closePath,
@@ -583,10 +854,21 @@ var Pie = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx6(RenderSvg, {
+    defaultName: "<Pie>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/pie",
     ...makePie({ radius, progress, closePath, counterClockwise, rotation }),
     ...props
   });
 };
+var Pie = Internals7.wrapInSchema({
+  Component: PieInner,
+  schema: pieSchema,
+  supportsEffects: true
+});
+Internals7.addSequenceStackTraces(Pie);
+// src/components/polygon.tsx
+import { Internals as Internals8 } from "remotion";
+
 // src/utils/make-polygon.ts
 import {
   PathInternals,
@@ -780,7 +1062,25 @@ var makePolygon = ({
 
 // src/components/polygon.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-var Polygon = ({
+var polygonSchema = makeShapeSchema({
+  points: numberField({
+    defaultValue: 5,
+    description: "Points",
+    min: 3,
+    step: 1
+  }),
+  radius: numberField({
+    defaultValue: 100,
+    description: "Radius",
+    min: 0
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var PolygonInner = ({
   points,
   radius,
   cornerRadius,
@@ -788,6 +1088,8 @@ var Polygon = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx7(RenderSvg, {
+    defaultName: "<Polygon>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/polygon",
     ...makePolygon({
       points,
       cornerRadius,
@@ -797,6 +1099,15 @@ var Polygon = ({
     ...props
   });
 };
+var Polygon = Internals8.wrapInSchema({
+  Component: PolygonInner,
+  schema: polygonSchema,
+  supportsEffects: true
+});
+Internals8.addSequenceStackTraces(Polygon);
+// src/components/rect.tsx
+import { Internals as Internals9 } from "remotion";
+
 // src/utils/make-rect.ts
 import { serializeInstructions as serializeInstructions7 } from "@remotion/paths";
 var makeRect = ({
@@ -830,7 +1141,24 @@ var makeRect = ({
 
 // src/components/rect.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var Rect = ({
+var rectSchema = makeShapeSchema({
+  width: numberField({
+    defaultValue: 100,
+    description: "Width",
+    min: 0
+  }),
+  height: numberField({
+    defaultValue: 100,
+    description: "Height",
+    min: 0
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var RectInner = ({
   width,
   edgeRoundness,
   height,
@@ -838,10 +1166,21 @@ var Rect = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx8(RenderSvg, {
+    defaultName: "<Rect>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/rect",
     ...makeRect({ height, width, edgeRoundness, cornerRadius }),
     ...props
   });
 };
+var Rect = Internals9.wrapInSchema({
+  Component: RectInner,
+  schema: rectSchema,
+  supportsEffects: true
+});
+Internals9.addSequenceStackTraces(Rect);
+// src/components/star.tsx
+import { Internals as Internals10 } from "remotion";
+
 // src/utils/make-star.ts
 import {
   PathInternals as PathInternals2,
@@ -911,7 +1250,30 @@ var makeStar = ({
 
 // src/components/star.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-var Star = ({
+var starSchema = makeShapeSchema({
+  points: numberField({
+    defaultValue: 5,
+    description: "Points",
+    min: 3,
+    step: 1
+  }),
+  innerRadius: numberField({
+    defaultValue: 50,
+    description: "Inner Radius",
+    min: 0
+  }),
+  outerRadius: numberField({
+    defaultValue: 100,
+    description: "Outer Radius",
+    min: 0
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var StarInner = ({
   innerRadius,
   outerRadius,
   points,
@@ -920,6 +1282,8 @@ var Star = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx9(RenderSvg, {
+    defaultName: "<Star>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/star",
     ...makeStar({
       innerRadius,
       outerRadius,
@@ -930,6 +1294,15 @@ var Star = ({
     ...props
   });
 };
+var Star = Internals10.wrapInSchema({
+  Component: StarInner,
+  schema: starSchema,
+  supportsEffects: true
+});
+Internals10.addSequenceStackTraces(Star);
+// src/components/triangle.tsx
+import { Internals as Internals11 } from "remotion";
+
 // src/utils/make-triangle.ts
 import { serializeInstructions as serializeInstructions9 } from "@remotion/paths";
 var makeTriangle = ({
@@ -1003,7 +1376,24 @@ var makeTriangle = ({
 
 // src/components/triangle.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Triangle = ({
+var triangleSchema = makeShapeSchema({
+  length: numberField({
+    defaultValue: 100,
+    description: "Length",
+    min: 0
+  }),
+  direction: enumField({
+    defaultValue: "right",
+    description: "Direction",
+    variants: ["right", "left", "up", "down"]
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var TriangleInner = ({
   length,
   direction,
   edgeRoundness,
@@ -1011,10 +1401,18 @@ var Triangle = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx10(RenderSvg, {
+    defaultName: "<Triangle>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/triangle",
     ...makeTriangle({ length, direction, edgeRoundness, cornerRadius }),
     ...props
   });
 };
+var Triangle = Internals11.wrapInSchema({
+  Component: TriangleInner,
+  schema: triangleSchema,
+  supportsEffects: true
+});
+Internals11.addSequenceStackTraces(Triangle);
 export {
   makeTriangle,
   makeStar,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
 	},
 	"name": "@remotion/shapes",
-	"version": "4.0.473",
+	"version": "4.0.475",
 	"description": "Generate SVG shapes",
 	"main": "dist/index.js",
 	"scripts": {
@@ -34,7 +34,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.473",
+		"@remotion/eslint-config-internal": "4.0.475",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -51,7 +51,8 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.473"
+		"@remotion/paths": "4.0.475",
+		"remotion": "4.0.475"
 	},
 	"homepage": "https://www.remotion.dev/docs/shapes"
 }