@remotion/shapes 4.0.476 → 4.0.477

package/dist/esm/index.mjs

@@ -175,6 +175,7 @@ var RenderSvg = ({
   pixelDensity,
   durationInFrames,
   from,
+  freeze,
   hidden,
   name,
   showInTimeline,
@@ -283,6 +284,7 @@ var RenderSvg = ({
   return /* @__PURE__ */ jsx(Sequence, {
     layout: "none",
     from,
+    freeze,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
@@ -353,6 +355,7 @@ var enumField = ({
 var makeShapeSchema = (shapeFields) => {
   return {
     from: Internals2.sequenceSchema.from,
+    freeze: Internals2.sequenceSchema.freeze,
     durationInFrames: Internals2.sequenceSchema.durationInFrames,
     ...shapeFields,
     fill: colorField({
@@ -423,15 +426,452 @@ var ArrowInner = ({
 };
 var Arrow = Internals3.wrapInSchema({
   Component: ArrowInner,
+  componentIdentity: "dev.remotion.shapes.Arrow",
   schema: arrowSchema,
   supportsEffects: true
 });
 Internals3.addSequenceStackTraces(Arrow);
-// src/components/circle.tsx
+// src/components/callout.tsx
 import { Internals as Internals4 } from "remotion";
 
-// src/utils/make-circle.ts
+// src/utils/make-callout.ts
 import { serializeInstructions as serializeInstructions2 } from "@remotion/paths";
+
+// src/utils/join-points.ts
+var shortenVector = (vector, radius) => {
+  const [x, y] = vector;
+  const currentLength = Math.sqrt(x * x + y * y);
+  const scalingFactor = (currentLength - radius) / currentLength;
+  return [x * scalingFactor, y * scalingFactor];
+};
+var scaleVectorToLength = (vector, length) => {
+  const [x, y] = vector;
+  const currentLength = Math.sqrt(x * x + y * y);
+  const scalingFactor = length / currentLength;
+  return [x * scalingFactor, y * scalingFactor];
+};
+var joinPoints = (points, {
+  edgeRoundness,
+  cornerRadius,
+  roundCornerStrategy
+}) => {
+  return points.map(([x, y], i) => {
+    const prevPointIndex = i === 0 ? points.length - 2 : i - 1;
+    const prevPoint = points[prevPointIndex];
+    const nextPointIndex = i === points.length - 1 ? 1 : i + 1;
+    const nextPoint = points[nextPointIndex];
+    const middleOfLine = [(x + nextPoint[0]) / 2, (y + nextPoint[1]) / 2];
+    const prevPointMiddleOfLine = [
+      (x + prevPoint[0]) / 2,
+      (y + prevPoint[1]) / 2
+    ];
+    const prevVector = [x - prevPoint[0], y - prevPoint[1]];
+    const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
+    if (i === 0) {
+      if (edgeRoundness !== null) {
+        return [
+          {
+            type: "M",
+            x: middleOfLine[0],
+            y: middleOfLine[1]
+          }
+        ];
+      }
+      if (cornerRadius !== 0) {
+        const computeRadius = shortenVector(nextVector, cornerRadius);
+        return [
+          {
+            type: "M",
+            x: computeRadius[0] + x,
+            y: computeRadius[1] + y
+          }
+        ];
+      }
+      return [
+        {
+          type: "M",
+          x,
+          y
+        }
+      ];
+    }
+    if (cornerRadius && edgeRoundness !== null) {
+      throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
+    }
+    if (edgeRoundness === null) {
+      if (cornerRadius === 0) {
+        return [
+          {
+            type: "L",
+            x,
+            y
+          }
+        ];
+      }
+      const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
+      const prevVectorLength = scaleVectorToLength(prevVector, cornerRadius);
+      const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
+      const firstDraw = [
+        prevPoint[0] + prevVectorMinusRadius[0],
+        prevPoint[1] + prevVectorMinusRadius[1]
+      ];
+      return [
+        {
+          type: "L",
+          x: firstDraw[0],
+          y: firstDraw[1]
+        },
+        roundCornerStrategy === "arc" ? {
+          type: "a",
+          rx: cornerRadius,
+          ry: cornerRadius,
+          xAxisRotation: 0,
+          dx: prevVectorLength[0] + nextVectorMinusRadius[0],
+          dy: prevVectorLength[1] + nextVectorMinusRadius[1],
+          largeArcFlag: false,
+          sweepFlag: true
+        } : {
+          type: "C",
+          x: firstDraw[0] + prevVectorLength[0] + nextVectorMinusRadius[0],
+          y: firstDraw[1] + prevVectorLength[1] + nextVectorMinusRadius[1],
+          cp1x: x,
+          cp1y: y,
+          cp2x: x,
+          cp2y: y
+        }
+      ];
+    }
+    const controlPoint1 = [
+      prevPointMiddleOfLine[0] + prevVector[0] * edgeRoundness * 0.5,
+      prevPointMiddleOfLine[1] + prevVector[1] * edgeRoundness * 0.5
+    ];
+    const controlPoint2 = [
+      middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
+      middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5
+    ];
+    return [
+      {
+        type: "C",
+        cp1x: controlPoint1[0],
+        cp1y: controlPoint1[1],
+        cp2x: controlPoint2[0],
+        cp2y: controlPoint2[1],
+        x: middleOfLine[0],
+        y: middleOfLine[1]
+      }
+    ];
+  }).flat(1);
+};
+
+// src/utils/make-callout.ts
+var ensurePositive = (name, value) => {
+  if (typeof value !== "number" || value <= 0) {
+    throw new Error(`"${name}" must be a positive number, got ${value}`);
+  }
+};
+var pointerInterval = ({
+  availableLength,
+  pointerBaseWidth,
+  pointerPosition
+}) => {
+  const center = availableLength * pointerPosition;
+  const half = pointerBaseWidth / 2;
+  return {
+    center,
+    start: Math.max(0, center - half),
+    end: Math.min(availableLength, center + half)
+  };
+};
+var areSamePoint = (a, b) => {
+  return a[0] === b[0] && a[1] === b[1];
+};
+var normalizeClosedPoints = (points) => {
+  const deduplicated = points.reduce((acc, entry) => {
+    const previous = acc[acc.length - 1];
+    if (previous && areSamePoint(previous.point, entry.point)) {
+      acc[acc.length - 1] = {
+        point: previous.point,
+        round: previous.round && entry.round
+      };
+      return acc;
+    }
+    return [...acc, entry];
+  }, []);
+  if (deduplicated.length === 0) {
+    return deduplicated;
+  }
+  const first = deduplicated[0];
+  const last = deduplicated[deduplicated.length - 1];
+  if (areSamePoint(first.point, last.point)) {
+    const [firstEntry, ...rest] = deduplicated;
+    const withoutLast = rest.slice(0, -1);
+    const mergedFirst = {
+      point: firstEntry.point,
+      round: firstEntry.round && last.round
+    };
+    return [mergedFirst, ...withoutLast, mergedFirst];
+  }
+  return [...deduplicated, first];
+};
+var unitDir2 = (from, to) => {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    return [0, 0];
+  }
+  return [dx / len, dy / len];
+};
+var makeInstructions = ({
+  points,
+  edgeRoundness,
+  cornerRadius
+}) => {
+  const rawPoints = points.map((p) => p.point);
+  if (edgeRoundness !== null || cornerRadius === 0) {
+    return [
+      ...joinPoints(rawPoints, {
+        edgeRoundness,
+        cornerRadius,
+        roundCornerStrategy: "arc"
+      }),
+      {
+        type: "Z"
+      }
+    ];
+  }
+  const uniquePoints = areSamePoint(points[0].point, points[points.length - 1].point) ? points.slice(0, -1) : points;
+  const firstPoint = uniquePoints[0];
+  const startDir = firstPoint.round ? unitDir2(uniquePoints[0].point, uniquePoints[1].point) : null;
+  const startPoint = startDir ? [
+    firstPoint.point[0] + startDir[0] * cornerRadius,
+    firstPoint.point[1] + startDir[1] * cornerRadius
+  ] : firstPoint.point;
+  const instructions = [
+    { type: "M", x: startPoint[0], y: startPoint[1] }
+  ];
+  for (let i = 1;i < uniquePoints.length; i++) {
+    const current = uniquePoints[i];
+    if (!current.round) {
+      instructions.push({
+        type: "L",
+        x: current.point[0],
+        y: current.point[1]
+      });
+      continue;
+    }
+    const previous = uniquePoints[i - 1].point;
+    const next = uniquePoints[(i + 1) % uniquePoints.length].point;
+    const incoming = unitDir2(previous, current.point);
+    const outgoing = unitDir2(current.point, next);
+    const arcStart = [
+      current.point[0] - incoming[0] * cornerRadius,
+      current.point[1] - incoming[1] * cornerRadius
+    ];
+    instructions.push({
+      type: "L",
+      x: arcStart[0],
+      y: arcStart[1]
+    }, {
+      type: "a",
+      rx: cornerRadius,
+      ry: cornerRadius,
+      xAxisRotation: 0,
+      dx: incoming[0] * cornerRadius + outgoing[0] * cornerRadius,
+      dy: incoming[1] * cornerRadius + outgoing[1] * cornerRadius,
+      largeArcFlag: false,
+      sweepFlag: true
+    });
+  }
+  if (firstPoint.round) {
+    const previous = uniquePoints[uniquePoints.length - 1].point;
+    const incoming = unitDir2(previous, firstPoint.point);
+    instructions.push({
+      type: "L",
+      x: firstPoint.point[0] - incoming[0] * cornerRadius,
+      y: firstPoint.point[1] - incoming[1] * cornerRadius
+    }, {
+      type: "a",
+      rx: cornerRadius,
+      ry: cornerRadius,
+      xAxisRotation: 0,
+      dx: incoming[0] * cornerRadius + startDir[0] * cornerRadius,
+      dy: incoming[1] * cornerRadius + startDir[1] * cornerRadius,
+      largeArcFlag: false,
+      sweepFlag: true
+    });
+  }
+  instructions.push({ type: "Z" });
+  return instructions;
+};
+var makeCallout = ({
+  width = 500,
+  height = 200,
+  pointerLength = 40,
+  pointerBaseWidth = 60,
+  pointerPosition = 0.5,
+  pointerDirection = "down",
+  edgeRoundness = null,
+  cornerRadius = 0
+}) => {
+  ensurePositive("width", width);
+  ensurePositive("height", height);
+  ensurePositive("pointerLength", pointerLength);
+  ensurePositive("pointerBaseWidth", pointerBaseWidth);
+  if (typeof pointerPosition !== "number" || pointerPosition < 0 || pointerPosition > 1) {
+    throw new Error(`"pointerPosition" must be a number between 0 and 1, got ${pointerPosition}`);
+  }
+  const horizontalInterval = pointerInterval({
+    availableLength: width,
+    pointerBaseWidth,
+    pointerPosition
+  });
+  const verticalInterval = pointerInterval({
+    availableLength: height,
+    pointerBaseWidth,
+    pointerPosition
+  });
+  const pointsByDirection = {
+    up: [
+      { point: [0, pointerLength], round: true },
+      { point: [horizontalInterval.start, pointerLength], round: false },
+      { point: [horizontalInterval.center, 0], round: false },
+      { point: [horizontalInterval.end, pointerLength], round: false },
+      { point: [width, pointerLength], round: true },
+      { point: [width, height + pointerLength], round: true },
+      { point: [0, height + pointerLength], round: true },
+      { point: [0, pointerLength], round: true }
+    ],
+    down: [
+      { point: [0, 0], round: true },
+      { point: [width, 0], round: true },
+      { point: [width, height], round: true },
+      { point: [horizontalInterval.end, height], round: false },
+      {
+        point: [horizontalInterval.center, height + pointerLength],
+        round: false
+      },
+      { point: [horizontalInterval.start, height], round: false },
+      { point: [0, height], round: true },
+      { point: [0, 0], round: true }
+    ],
+    left: [
+      { point: [pointerLength, 0], round: true },
+      { point: [width + pointerLength, 0], round: true },
+      { point: [width + pointerLength, height], round: true },
+      { point: [pointerLength, height], round: true },
+      { point: [pointerLength, verticalInterval.end], round: false },
+      { point: [0, verticalInterval.center], round: false },
+      { point: [pointerLength, verticalInterval.start], round: false },
+      { point: [pointerLength, 0], round: true }
+    ],
+    right: [
+      { point: [0, 0], round: true },
+      { point: [width, 0], round: true },
+      { point: [width, verticalInterval.start], round: false },
+      { point: [width + pointerLength, verticalInterval.center], round: false },
+      { point: [width, verticalInterval.end], round: false },
+      { point: [width, height], round: true },
+      { point: [0, height], round: true },
+      { point: [0, 0], round: true }
+    ]
+  };
+  const points = normalizeClosedPoints(pointsByDirection[pointerDirection]);
+  const instructions = makeInstructions({ points, edgeRoundness, cornerRadius });
+  const path = serializeInstructions2(instructions);
+  const shapeWidth = pointerDirection === "left" || pointerDirection === "right" ? width + pointerLength : width;
+  const shapeHeight = pointerDirection === "up" || pointerDirection === "down" ? height + pointerLength : height;
+  const bodyX = pointerDirection === "left" ? pointerLength : 0;
+  const bodyY = pointerDirection === "up" ? pointerLength : 0;
+  return {
+    width: shapeWidth,
+    height: shapeHeight,
+    instructions,
+    path,
+    transformOrigin: `${bodyX + width / 2} ${bodyY + height / 2}`
+  };
+};
+
+// src/components/callout.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var calloutSchema = makeShapeSchema({
+  width: numberField({
+    defaultValue: 500,
+    description: "Width",
+    min: 1
+  }),
+  height: numberField({
+    defaultValue: 200,
+    description: "Height",
+    min: 1
+  }),
+  pointerLength: numberField({
+    defaultValue: 40,
+    description: "Pointer Length",
+    min: 1
+  }),
+  pointerBaseWidth: numberField({
+    defaultValue: 60,
+    description: "Pointer Base Width",
+    min: 1
+  }),
+  pointerPosition: numberField({
+    defaultValue: 0.5,
+    description: "Pointer Position",
+    min: 0,
+    max: 1,
+    step: 0.01
+  }),
+  pointerDirection: enumField({
+    defaultValue: "down",
+    description: "Pointer Direction",
+    variants: ["up", "down", "left", "right"]
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var CalloutInner = ({
+  width,
+  height,
+  pointerLength,
+  pointerBaseWidth,
+  pointerPosition,
+  pointerDirection,
+  edgeRoundness,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(RenderSvg, {
+    defaultName: "<Callout>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/callout",
+    ...makeCallout({
+      width,
+      height,
+      pointerLength,
+      pointerBaseWidth,
+      pointerPosition,
+      pointerDirection,
+      edgeRoundness,
+      cornerRadius
+    }),
+    ...props
+  });
+};
+var Callout = Internals4.wrapInSchema({
+  Component: CalloutInner,
+  componentIdentity: "dev.remotion.shapes.Callout",
+  schema: calloutSchema,
+  supportsEffects: true
+});
+Internals4.addSequenceStackTraces(Callout);
+// src/components/circle.tsx
+import { Internals as Internals5 } from "remotion";
+
+// src/utils/make-circle.ts
+import { serializeInstructions as serializeInstructions3 } from "@remotion/paths";
 var makeCircle = ({ radius }) => {
   const instructions = [
     {
@@ -463,7 +903,7 @@ var makeCircle = ({ radius }) => {
       type: "Z"
     }
   ];
-  const path = serializeInstructions2(instructions);
+  const path = serializeInstructions3(instructions);
   return {
     height: radius * 2,
     width: radius * 2,
@@ -474,7 +914,7 @@ var makeCircle = ({ radius }) => {
 };
 
 // src/components/circle.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var circleSchema = makeShapeSchema({
   radius: numberField({
     defaultValue: 100,
@@ -483,24 +923,25 @@ var circleSchema = makeShapeSchema({
   })
 });
 var CircleInner = ({ radius, ...props }) => {
-  return /* @__PURE__ */ jsx3(RenderSvg, {
+  return /* @__PURE__ */ jsx4(RenderSvg, {
     defaultName: "<Circle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/circle",
     ...makeCircle({ radius }),
     ...props
   });
 };
-var Circle = Internals4.wrapInSchema({
+var Circle = Internals5.wrapInSchema({
   Component: CircleInner,
+  componentIdentity: "dev.remotion.shapes.Circle",
   schema: circleSchema,
   supportsEffects: true
 });
-Internals4.addSequenceStackTraces(Circle);
+Internals5.addSequenceStackTraces(Circle);
 // src/components/ellipse.tsx
-import { Internals as Internals5 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/utils/make-ellipse.ts
-import { serializeInstructions as serializeInstructions3 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions4 } from "@remotion/paths";
 var makeEllipse = ({ rx, ry }) => {
   const instructions = [
     {
@@ -522,7 +963,7 @@ var makeEllipse = ({ rx, ry }) => {
       type: "Z"
     }
   ];
-  const path = serializeInstructions3(instructions);
+  const path = serializeInstructions4(instructions);
   return {
     width: rx * 2,
     height: ry * 2,
@@ -533,7 +974,7 @@ var makeEllipse = ({ rx, ry }) => {
 };
 
 // src/components/ellipse.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ellipseSchema = makeShapeSchema({
   rx: numberField({
     defaultValue: 100,
@@ -547,24 +988,25 @@ var ellipseSchema = makeShapeSchema({
   })
 });
 var EllipseInner = ({ rx, ry, ...props }) => {
-  return /* @__PURE__ */ jsx4(RenderSvg, {
+  return /* @__PURE__ */ jsx5(RenderSvg, {
     defaultName: "<Ellipse>",
     documentationLink: "https://www.remotion.dev/docs/shapes/ellipse",
     ...makeEllipse({ rx, ry }),
     ...props
   });
 };
-var Ellipse = Internals5.wrapInSchema({
+var Ellipse = Internals6.wrapInSchema({
   Component: EllipseInner,
+  componentIdentity: "dev.remotion.shapes.Ellipse",
   schema: ellipseSchema,
   supportsEffects: true
 });
-Internals5.addSequenceStackTraces(Ellipse);
+Internals6.addSequenceStackTraces(Ellipse);
 // src/components/heart.tsx
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/utils/make-heart.ts
-import { serializeInstructions as serializeInstructions4 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions5 } from "@remotion/paths";
 var makeHeart = ({
   height,
   aspectRatio = 1.1,
@@ -645,7 +1087,7 @@ var makeHeart = ({
       type: "Z"
     }
   ];
-  const path = serializeInstructions4(instructions);
+  const path = serializeInstructions5(instructions);
   return {
     path,
     width,
@@ -656,7 +1098,7 @@ var makeHeart = ({
 };
 
 // src/components/heart.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var heartSchema = makeShapeSchema({
   height: numberField({
     defaultValue: 100,
@@ -687,7 +1129,7 @@ var HeartInner = ({
   depthAdjustment = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx5(RenderSvg, {
+  return /* @__PURE__ */ jsx6(RenderSvg, {
     defaultName: "<Heart>",
     documentationLink: "https://www.remotion.dev/docs/shapes/heart",
     ...makeHeart({
@@ -699,17 +1141,18 @@ var HeartInner = ({
     ...props
   });
 };
-var Heart = Internals6.wrapInSchema({
+var Heart = Internals7.wrapInSchema({
   Component: HeartInner,
+  componentIdentity: "dev.remotion.shapes.Heart",
   schema: heartSchema,
   supportsEffects: true
 });
-Internals6.addSequenceStackTraces(Heart);
+Internals7.addSequenceStackTraces(Heart);
 // src/components/pie.tsx
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/utils/make-pie.ts
-import { serializeInstructions as serializeInstructions5 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions6 } from "@remotion/paths";
 var getCoord = ({
   counterClockwise,
   actualProgress,
@@ -806,7 +1249,7 @@ var makePie = ({
       type: "Z"
     } : null
   ].filter(Boolean);
-  const path = serializeInstructions5(instructions);
+  const path = serializeInstructions6(instructions);
   return {
     height: radius * 2,
     width: radius * 2,
@@ -817,7 +1260,7 @@ var makePie = ({
 };
 
 // src/components/pie.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var pieSchema = makeShapeSchema({
   radius: numberField({
     defaultValue: 100,
@@ -853,157 +1296,30 @@ var PieInner = ({
   rotation,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx6(RenderSvg, {
+  return /* @__PURE__ */ jsx7(RenderSvg, {
     defaultName: "<Pie>",
     documentationLink: "https://www.remotion.dev/docs/shapes/pie",
     ...makePie({ radius, progress, closePath, counterClockwise, rotation }),
     ...props
   });
 };
-var Pie = Internals7.wrapInSchema({
+var Pie = Internals8.wrapInSchema({
   Component: PieInner,
+  componentIdentity: "dev.remotion.shapes.Pie",
   schema: pieSchema,
   supportsEffects: true
 });
-Internals7.addSequenceStackTraces(Pie);
+Internals8.addSequenceStackTraces(Pie);
 // src/components/polygon.tsx
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 
 // src/utils/make-polygon.ts
 import {
   PathInternals,
   reduceInstructions,
   resetPath,
-  serializeInstructions as serializeInstructions6
+  serializeInstructions as serializeInstructions7
 } from "@remotion/paths";
-
-// src/utils/join-points.ts
-var shortenVector = (vector, radius) => {
-  const [x, y] = vector;
-  const currentLength = Math.sqrt(x * x + y * y);
-  const scalingFactor = (currentLength - radius) / currentLength;
-  return [x * scalingFactor, y * scalingFactor];
-};
-var scaleVectorToLength = (vector, length) => {
-  const [x, y] = vector;
-  const currentLength = Math.sqrt(x * x + y * y);
-  const scalingFactor = length / currentLength;
-  return [x * scalingFactor, y * scalingFactor];
-};
-var joinPoints = (points, {
-  edgeRoundness,
-  cornerRadius,
-  roundCornerStrategy
-}) => {
-  return points.map(([x, y], i) => {
-    const prevPointIndex = i === 0 ? points.length - 2 : i - 1;
-    const prevPoint = points[prevPointIndex];
-    const nextPointIndex = i === points.length - 1 ? 1 : i + 1;
-    const nextPoint = points[nextPointIndex];
-    const middleOfLine = [(x + nextPoint[0]) / 2, (y + nextPoint[1]) / 2];
-    const prevPointMiddleOfLine = [
-      (x + prevPoint[0]) / 2,
-      (y + prevPoint[1]) / 2
-    ];
-    const prevVector = [x - prevPoint[0], y - prevPoint[1]];
-    const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
-    if (i === 0) {
-      if (edgeRoundness !== null) {
-        return [
-          {
-            type: "M",
-            x: middleOfLine[0],
-            y: middleOfLine[1]
-          }
-        ];
-      }
-      if (cornerRadius !== 0) {
-        const computeRadius = shortenVector(nextVector, cornerRadius);
-        return [
-          {
-            type: "M",
-            x: computeRadius[0] + x,
-            y: computeRadius[1] + y
-          }
-        ];
-      }
-      return [
-        {
-          type: "M",
-          x,
-          y
-        }
-      ];
-    }
-    if (cornerRadius && edgeRoundness !== null) {
-      throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
-    }
-    if (edgeRoundness === null) {
-      if (cornerRadius === 0) {
-        return [
-          {
-            type: "L",
-            x,
-            y
-          }
-        ];
-      }
-      const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
-      const prevVectorLength = scaleVectorToLength(prevVector, cornerRadius);
-      const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
-      const firstDraw = [
-        prevPoint[0] + prevVectorMinusRadius[0],
-        prevPoint[1] + prevVectorMinusRadius[1]
-      ];
-      return [
-        {
-          type: "L",
-          x: firstDraw[0],
-          y: firstDraw[1]
-        },
-        roundCornerStrategy === "arc" ? {
-          type: "a",
-          rx: cornerRadius,
-          ry: cornerRadius,
-          xAxisRotation: 0,
-          dx: prevVectorLength[0] + nextVectorMinusRadius[0],
-          dy: prevVectorLength[1] + nextVectorMinusRadius[1],
-          largeArcFlag: false,
-          sweepFlag: true
-        } : {
-          type: "C",
-          x: firstDraw[0] + prevVectorLength[0] + nextVectorMinusRadius[0],
-          y: firstDraw[1] + prevVectorLength[1] + nextVectorMinusRadius[1],
-          cp1x: x,
-          cp1y: y,
-          cp2x: x,
-          cp2y: y
-        }
-      ];
-    }
-    const controlPoint1 = [
-      prevPointMiddleOfLine[0] + prevVector[0] * edgeRoundness * 0.5,
-      prevPointMiddleOfLine[1] + prevVector[1] * edgeRoundness * 0.5
-    ];
-    const controlPoint2 = [
-      middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
-      middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5
-    ];
-    return [
-      {
-        type: "C",
-        cp1x: controlPoint1[0],
-        cp1y: controlPoint1[1],
-        cp2x: controlPoint2[0],
-        cp2y: controlPoint2[1],
-        x: middleOfLine[0],
-        y: middleOfLine[1]
-      }
-    ];
-  }).flat(1);
-};
-
-// src/utils/make-polygon.ts
 function polygon({
   points,
   radius,
@@ -1049,7 +1365,7 @@ var makePolygon = ({
     edgeRoundness
   });
   const reduced = reduceInstructions(polygonPathInstructions);
-  const path = resetPath(serializeInstructions6(reduced));
+  const path = resetPath(serializeInstructions7(reduced));
   const boundingBox = PathInternals.getBoundingBoxFromInstructions(reduced);
   return {
     path,
@@ -1061,7 +1377,7 @@ var makePolygon = ({
 };
 
 // src/components/polygon.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var polygonSchema = makeShapeSchema({
   points: numberField({
     defaultValue: 5,
@@ -1087,7 +1403,7 @@ var PolygonInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx7(RenderSvg, {
+  return /* @__PURE__ */ jsx8(RenderSvg, {
     defaultName: "<Polygon>",
     documentationLink: "https://www.remotion.dev/docs/shapes/polygon",
     ...makePolygon({
@@ -1099,17 +1415,18 @@ var PolygonInner = ({
     ...props
   });
 };
-var Polygon = Internals8.wrapInSchema({
+var Polygon = Internals9.wrapInSchema({
   Component: PolygonInner,
+  componentIdentity: "dev.remotion.shapes.Polygon",
   schema: polygonSchema,
   supportsEffects: true
 });
-Internals8.addSequenceStackTraces(Polygon);
+Internals9.addSequenceStackTraces(Polygon);
 // src/components/rect.tsx
-import { Internals as Internals9 } from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/utils/make-rect.ts
-import { serializeInstructions as serializeInstructions7 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions8 } from "@remotion/paths";
 var makeRect = ({
   width,
   height,
@@ -1129,7 +1446,7 @@ var makeRect = ({
       type: "Z"
     }
   ];
-  const path = serializeInstructions7(instructions);
+  const path = serializeInstructions8(instructions);
   return {
     width,
     height,
@@ -1140,7 +1457,7 @@ var makeRect = ({
 };
 
 // src/components/rect.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var rectSchema = makeShapeSchema({
   width: numberField({
     defaultValue: 100,
@@ -1165,28 +1482,29 @@ var RectInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx8(RenderSvg, {
+  return /* @__PURE__ */ jsx9(RenderSvg, {
     defaultName: "<Rect>",
     documentationLink: "https://www.remotion.dev/docs/shapes/rect",
     ...makeRect({ height, width, edgeRoundness, cornerRadius }),
     ...props
   });
 };
-var Rect = Internals9.wrapInSchema({
+var Rect = Internals10.wrapInSchema({
   Component: RectInner,
+  componentIdentity: "dev.remotion.shapes.Rect",
   schema: rectSchema,
   supportsEffects: true
 });
-Internals9.addSequenceStackTraces(Rect);
+Internals10.addSequenceStackTraces(Rect);
 // src/components/star.tsx
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/utils/make-star.ts
 import {
   PathInternals as PathInternals2,
   reduceInstructions as reduceInstructions2,
   resetPath as resetPath2,
-  serializeInstructions as serializeInstructions8
+  serializeInstructions as serializeInstructions9
 } from "@remotion/paths";
 var star = ({
   centerX,
@@ -1237,7 +1555,7 @@ var makeStar = ({
     edgeRoundness
   });
   const reduced = reduceInstructions2(starPathInstructions);
-  const path = resetPath2(serializeInstructions8(reduced));
+  const path = resetPath2(serializeInstructions9(reduced));
   const boundingBox = PathInternals2.getBoundingBoxFromInstructions(reduced);
   return {
     path,
@@ -1249,7 +1567,7 @@ var makeStar = ({
 };
 
 // src/components/star.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var starSchema = makeShapeSchema({
   points: numberField({
     defaultValue: 5,
@@ -1281,7 +1599,7 @@ var StarInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx9(RenderSvg, {
+  return /* @__PURE__ */ jsx10(RenderSvg, {
     defaultName: "<Star>",
     documentationLink: "https://www.remotion.dev/docs/shapes/star",
     ...makeStar({
@@ -1294,17 +1612,18 @@ var StarInner = ({
     ...props
   });
 };
-var Star = Internals10.wrapInSchema({
+var Star = Internals11.wrapInSchema({
   Component: StarInner,
+  componentIdentity: "dev.remotion.shapes.Star",
   schema: starSchema,
   supportsEffects: true
 });
-Internals10.addSequenceStackTraces(Star);
+Internals11.addSequenceStackTraces(Star);
 // src/components/triangle.tsx
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/utils/make-triangle.ts
-import { serializeInstructions as serializeInstructions9 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions10 } from "@remotion/paths";
 var makeTriangle = ({
   length,
   direction = "right",
@@ -1364,7 +1683,7 @@ var makeTriangle = ({
       type: "Z"
     }
   ];
-  const path = serializeInstructions9(instructions);
+  const path = serializeInstructions10(instructions);
   return {
     path,
     instructions,
@@ -1375,7 +1694,7 @@ var makeTriangle = ({
 };
 
 // src/components/triangle.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var triangleSchema = makeShapeSchema({
   length: numberField({
     defaultValue: 100,
@@ -1400,19 +1719,20 @@ var TriangleInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx10(RenderSvg, {
+  return /* @__PURE__ */ jsx11(RenderSvg, {
     defaultName: "<Triangle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/triangle",
     ...makeTriangle({ length, direction, edgeRoundness, cornerRadius }),
     ...props
   });
 };
-var Triangle = Internals11.wrapInSchema({
+var Triangle = Internals12.wrapInSchema({
   Component: TriangleInner,
+  componentIdentity: "dev.remotion.shapes.Triangle",
   schema: triangleSchema,
   supportsEffects: true
 });
-Internals11.addSequenceStackTraces(Triangle);
+Internals12.addSequenceStackTraces(Triangle);
 export {
   makeTriangle,
   makeStar,
@@ -1422,6 +1742,7 @@ export {
   makeHeart,
   makeEllipse,
   makeCircle,
+  makeCallout,
   makeArrow,
   Triangle,
   Star,
@@ -1431,5 +1752,6 @@ export {
   Heart,
   Ellipse,
   Circle,
+  Callout,
   Arrow
 };