@remotion/shapes 4.0.527 → 4.0.528

package/dist/components/polygon.js

@@ -12,6 +12,7 @@ const polygonSchema = (0, schema_1.makeShapeSchema)({
         description: 'Points',
         min: 3,
         step: 1,
+        integer: true,
     }),
     radius: (0, schema_1.numberField)({
         defaultValue: 100,

package/dist/components/render-svg.d.ts

@@ -1,7 +1,7 @@
 import type { Instruction } from '@remotion/paths';
 import React from 'react';
-import { type EffectsProp, type HtmlInCanvasPixelDensity, type InteractiveBaseProps, type SequenceControls } from 'remotion';
-type ShapeSequenceProps = InteractiveBaseProps & {
+import { type EffectsProp, type HtmlInCanvasPixelDensity, type InteractiveBaseProps, type InteractivePremountProps, type SequenceControls } from 'remotion';
+type ShapeSequenceProps = InteractiveBaseProps & InteractivePremountProps & {
     readonly controls?: SequenceControls;
 };
 export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd' | 'hidden' | 'name'> & ShapeSequenceProps & {
@@ -10,7 +10,7 @@ export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'hei
     readonly pathStyle?: React.CSSProperties;
     readonly pixelDensity?: HtmlInCanvasPixelDensity;
 };
-export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, ...props }: {
+export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, controls, ...props }: {
     readonly defaultName: string;
     readonly documentationLink: string;
     readonly width: number;
@@ -18,7 +18,7 @@ export declare const RenderSvg: ({ defaultName, documentationLink, width, height
     readonly path: string;
     readonly instructions: Instruction[];
     readonly transformOrigin: string;
-} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "hidden" | "name" | "width"> & InteractiveBaseProps & {
+} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "hidden" | "name" | "width"> & InteractiveBaseProps & InteractivePremountProps & {
     readonly controls?: SequenceControls | undefined;
 } & {
     readonly debug?: boolean | undefined;

package/dist/components/render-svg.js

@@ -40,7 +40,20 @@ const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const does_react_support_canary_1 = require("../utils/does-react-support-canary");
 const HtmlInCanvasWithPrivateProps = remotion_1.HtmlInCanvas;
-const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, ...props }) => {
+const RenderSvgWithTiming = ({ premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, from, trimBefore, playbackRate, freeze, hidden, showInTimeline, controls, durationInFrames, name, defaultName, outlineRef, documentationLink, memoizedEffectDefinitions, content, actualStyle, }) => {
+    const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = remotion_1.Internals.usePremounting({
+        from: from !== null && from !== void 0 ? from : 0,
+        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: actualStyle,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'opacity',
+    });
+    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : defaultName, outlineRef: outlineRef, _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.cloneElement(content, { style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
+};
+const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, controls, ...props }) => {
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
             overflow: 'visible',
@@ -107,6 +120,6 @@ const RenderSvg = ({ defaultName, documentationLink, width, height, path, style,
     if (!videoConfig) {
         return svg;
     }
-    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : defaultName, outlineRef: outlineRef, _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined, children: content }));
+    return (jsx_runtime_1.jsx(RenderSvgWithTiming, { premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, from: from, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, durationInFrames: durationInFrames, name: name, defaultName: defaultName, outlineRef: outlineRef, documentationLink: documentationLink, memoizedEffectDefinitions: memoizedEffectDefinitions, content: content, actualStyle: actualStyle }));
 };
 exports.RenderSvg = RenderSvg;

package/dist/components/schema.d.ts

@@ -1,8 +1,9 @@
 import { type InteractivitySchemaField, type InteractivitySchema } from 'remotion';
-export declare const numberField: ({ defaultValue, description, hiddenFromList, max, min, step, }: {
+export declare const numberField: ({ defaultValue, description, hiddenFromList, integer, max, min, step, }: {
     readonly defaultValue: number | undefined;
     readonly description: string;
     readonly hiddenFromList?: boolean | undefined;
+    readonly integer?: boolean | undefined;
     readonly max?: number | undefined;
     readonly min?: number | undefined;
     readonly step?: number | undefined;

package/dist/components/schema.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeShapeSchema = exports.enumField = exports.colorField = exports.booleanField = exports.numberField = void 0;
 const remotion_1 = require("remotion");
-const numberField = ({ defaultValue, description, hiddenFromList = false, max, min, step = 1, }) => {
+const numberField = ({ defaultValue, description, hiddenFromList = false, integer, max, min, step = 1, }) => {
     return {
         type: 'number',
         default: defaultValue,
         description,
         hiddenFromList,
+        integer,
         max,
         min,
         step,
@@ -42,6 +43,7 @@ exports.enumField = enumField;
 const makeShapeSchema = (shapeFields) => {
     return {
         ...remotion_1.Internals.baseSchema,
+        ...remotion_1.Internals.premountSchema,
         ...shapeFields,
         fill: (0, exports.colorField)({
             defaultValue: '#0b84ff',

package/dist/components/star.js

@@ -12,6 +12,7 @@ const starSchema = (0, schema_1.makeShapeSchema)({
         description: 'Points',
         min: 3,
         step: 1,
+        integer: true,
     }),
     innerRadius: (0, schema_1.numberField)({
         defaultValue: 50,

package/dist/esm/index.mjs

@@ -144,8 +144,9 @@ import React, { useCallback, useMemo, useRef } from "react";
 import { version } from "react-dom";
 import {
   HtmlInCanvas,
-  Internals,
-  Sequence
+  Freeze,
+  Sequence,
+  Internals
 } from "remotion";
 
 // src/utils/does-react-support-canary.ts
@@ -161,6 +162,70 @@ var doesReactSupportTransformOriginProperty = (version) => {
 // src/components/render-svg.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var HtmlInCanvasWithPrivateProps = HtmlInCanvas;
+var RenderSvgWithTiming = ({
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
+  from,
+  trimBefore,
+  playbackRate,
+  freeze,
+  hidden,
+  showInTimeline,
+  controls,
+  durationInFrames,
+  name,
+  defaultName,
+  outlineRef,
+  documentationLink,
+  memoizedEffectDefinitions,
+  content,
+  actualStyle
+}) => {
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = Internals.usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: actualStyle,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx(Sequence, {
+      layout: "none",
+      from,
+      trimBefore,
+      playbackRate,
+      freeze,
+      hidden,
+      showInTimeline,
+      controls,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      durationInFrames,
+      name: name ?? defaultName,
+      outlineRef,
+      _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: React.cloneElement(content, { style: premountingStyle ?? undefined })
+    })
+  });
+};
 var RenderSvg = ({
   defaultName,
   documentationLink,
@@ -176,7 +241,12 @@ var RenderSvg = ({
   pixelDensity,
   durationInFrames,
   from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   trimBefore,
+  playbackRate,
   freeze,
   hidden,
   name,
@@ -281,20 +351,26 @@ var RenderSvg = ({
   if (!videoConfig) {
     return svg;
   }
-  return /* @__PURE__ */ jsx(Sequence, {
-    layout: "none",
+  return /* @__PURE__ */ jsx(RenderSvgWithTiming, {
+    premountFor,
+    postmountFor,
+    styleWhilePremounted,
+    styleWhilePostmounted,
     from,
     trimBefore,
+    playbackRate,
     freeze,
     hidden,
     showInTimeline,
     controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
-    name: name ?? defaultName,
+    name,
+    defaultName,
     outlineRef,
-    _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined,
-    children: content
+    documentationLink,
+    memoizedEffectDefinitions,
+    content,
+    actualStyle
   });
 };
 
@@ -307,6 +383,7 @@ var numberField = ({
   defaultValue,
   description,
   hiddenFromList = false,
+  integer,
   max,
   min,
   step = 1
@@ -316,6 +393,7 @@ var numberField = ({
     default: defaultValue,
     description,
     hiddenFromList,
+    integer,
     max,
     min,
     step
@@ -356,6 +434,7 @@ var enumField = ({
 var makeShapeSchema = (shapeFields) => {
   return {
     ...Internals2.baseSchema,
+    ...Internals2.premountSchema,
     ...shapeFields,
     fill: colorField({
       defaultValue: "#0b84ff",
@@ -1384,7 +1463,8 @@ var polygonSchema = makeShapeSchema({
     defaultValue: 5,
     description: "Points",
     min: 3,
-    step: 1
+    step: 1,
+    integer: true
   }),
   radius: numberField({
     defaultValue: 100,
@@ -1793,7 +1873,8 @@ var starSchema = makeShapeSchema({
     defaultValue: 5,
     description: "Points",
     min: 3,
-    step: 1
+    step: 1,
+    integer: true
   }),
   innerRadius: numberField({
     defaultValue: 50,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
 	},
 	"name": "@remotion/shapes",
-	"version": "4.0.527",
+	"version": "4.0.528",
 	"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.527",
+		"@remotion/eslint-config-internal": "4.0.528",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -51,8 +51,8 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.527",
-		"remotion": "4.0.527"
+		"@remotion/paths": "4.0.528",
+		"remotion": "4.0.528"
 	},
 	"homepage": "https://www.remotion.dev/docs/shapes"
 }