@remotion/studio 4.0.273 → 4.0.274

package/.turbo/turbo-make.log

@@ -1,5 +1,6 @@
 
 
-> @remotion/studio@4.0.273 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.274 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
+[65.22ms] Generated.

package/bundle.ts

@@ -1,54 +1,47 @@
-import {build} from 'bun';
+import {buildPackage} from '../.monorepo/builder';
 
-if (process.env.NODE_ENV !== 'production') {
-	throw new Error('This script must be run using NODE_ENV=production');
-}
+const external = [
+	'react',
+	'remotion',
+	'scheduler',
+	'react-dom',
+	'react',
+	'@remotion/media-utils',
+	'@remotion/studio-shared',
+	'@remotion/zod-types',
+	'@remotion/renderer',
+	'@remotion/player',
+	'@remotion/renderer/client',
+	'@remotion/renderer/pure',
+	'@remotion/renderer/error-handling',
+	'source-map',
+	'zod',
+	'remotion/no-react',
+	'react/jsx-runtime',
+];
 
-const mainModule = await build({
-	entrypoints: ['src/index.ts'],
-	naming: '[name].mjs',
-	external: [
-		'react',
-		'remotion',
-		'remotion/no-react',
-		'react/jsx-runtime',
-		'zod',
+await buildPackage({
+	formats: {
+		esm: 'build',
+		cjs: 'use-tsc',
+	},
+	external,
+	entrypoints: [
+		{
+			path: 'src/index.ts',
+			target: 'browser',
+		},
+		{
+			path: 'src/renderEntry.tsx',
+			target: 'browser',
+		},
+		{
+			path: 'src/internals.ts',
+			target: 'browser',
+		},
+		{
+			path: 'src/previewEntry.tsx',
+			target: 'browser',
+		},
 	],
 });
-
-const [file] = mainModule.outputs;
-const text = await file.text();
-
-await Bun.write('dist/esm/index.mjs', text);
-
-const internalsModule = await build({
-	entrypoints: ['src/internals.ts'],
-	naming: 'internals.mjs',
-	external: [
-		'react',
-		'remotion',
-		'scheduler',
-		'react-dom',
-		'react',
-		'@remotion/media-utils',
-		'@remotion/studio-shared',
-		'@remotion/zod-types',
-		'@remotion/renderer',
-		'@remotion/player',
-		'@remotion/renderer/client',
-		'@remotion/renderer/pure',
-		'@remotion/renderer/error-handling',
-		'source-map',
-		'zod',
-		'remotion/no-react',
-		'react/jsx-runtime',
-	],
-});
-const [enableFile] = internalsModule.outputs;
-const internalsText = (await enableFile.text())
-	.replace(/jsxDEV/g, 'jsx')
-	.replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime');
-
-await Bun.write('dist/esm/internals.mjs', internalsText);
-
-export {};

package/dist/Studio.js

@@ -25,7 +25,7 @@ const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, onlyRenderComposition: null, currentCompositionMetadata: null, children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                     ? null
                     : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
 };

package/dist/api/helpers/calc-new-props.d.ts

@@ -1,4 +1,4 @@
-import type { AnyComposition } from 'remotion';
+import type { _InternalTypes } from 'remotion';
 import type { AnyZodObject } from 'zod';
 export type UpdateDefaultPropsFunction = (currentValues: {
     schema: AnyZodObject | null;
@@ -6,6 +6,6 @@ export type UpdateDefaultPropsFunction = (currentValues: {
     unsavedDefaultProps: Record<string, unknown>;
 }) => Record<string, unknown>;
 export declare const calcNewProps: (compositionId: string, defaultProps: UpdateDefaultPropsFunction) => {
-    composition: AnyComposition;
+    composition: _InternalTypes["AnyComposition"];
     generatedDefaultProps: Record<string, unknown>;
 };

package/dist/components/AssetSelectorItem.js

@@ -146,7 +146,8 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
-    const { canvasContent, setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const selected = (0, react_1.useMemo)(() => {
         if (canvasContent && canvasContent.type === 'asset') {
             const nameWOParent = canvasContent.asset.split('/').pop();

package/dist/components/CompositionSelectorItem.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { type AnyComposition } from 'remotion';
+import { type _InternalTypes } from 'remotion';
 export type CompositionSelectorItemType = {
     key: string;
     type: 'composition';
-    composition: AnyComposition;
+    composition: _InternalTypes['AnyComposition'];
 } | {
     key: string;
     type: 'folder';
@@ -16,7 +16,7 @@ export declare const CompositionSelectorItem: React.FC<{
     readonly item: CompositionSelectorItemType;
     readonly currentComposition: string | null;
     readonly tabIndex: number;
-    readonly selectComposition: (c: AnyComposition, push: boolean) => void;
+    readonly selectComposition: (c: _InternalTypes['AnyComposition'], push: boolean) => void;
     readonly toggleFolder: (folderName: string, parentName: string | null) => void;
     readonly level: number;
 }>;

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { AnyComposition } from 'remotion';
+import type { _InternalTypes } from 'remotion';
 export declare const useSelectAsset: () => (asset: string) => void;
-export declare const useSelectComposition: () => (c: AnyComposition, push: boolean) => void;
+export declare const useSelectComposition: () => (c: _InternalTypes["AnyComposition"], push: boolean) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InitialCompositionLoader.js

@@ -12,7 +12,7 @@ const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const useSelectAsset = () => {
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     return (asset) => {
         var _a;
@@ -36,7 +36,7 @@ const useSelectAsset = () => {
 exports.useSelectAsset = useSelectAsset;
 const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     return (0, react_1.useCallback)((c, push) => {
@@ -71,7 +71,8 @@ const useSelectComposition = () => {
 };
 exports.useSelectComposition = useSelectComposition;
 const InitialCompositionLoader = () => {
-    const { compositions, canvasContent, setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const selectComposition = (0, exports.useSelectComposition)();
     const selectAsset = (0, exports.useSelectAsset)();
     (0, react_1.useEffect)(() => {

package/dist/components/RenderModal/DataEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { AnyComposition } from 'remotion';
+import type { _InternalTypes } from 'remotion';
 export type State = {
     str: string;
     value: Record<string, unknown>;
@@ -12,7 +12,7 @@ export type State = {
 };
 export type PropsEditType = 'input-props' | 'default-props';
 export declare const DataEditor: React.FC<{
-    readonly unresolvedComposition: AnyComposition;
+    readonly unresolvedComposition: _InternalTypes['AnyComposition'];
     readonly defaultProps: Record<string, unknown>;
     readonly setDefaultProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     readonly mayShowSaveButton: boolean;

package/dist/components/RenderModal/DataEditor.js

@@ -90,7 +90,7 @@ const setPersistedShowWarningState = (val) => {
 const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayShowSaveButton, propsEditType, saving, setSaving, readOnlyStudio, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
     const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
-    const { updateCompositionDefaultProps } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { updateCompositionDefaultProps } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const inJSONEditor = mode === 'json';
     const serializedJSON = (0, react_1.useMemo)(() => {
         if (!inJSONEditor) {

package/dist/components/RenderModal/ResolveCompositionBeforeModal.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { AnyComposition, VideoConfig } from 'remotion';
+import type { _InternalTypes, VideoConfig } from 'remotion';
 type TResolvedCompositionContext = {
-    unresolved: AnyComposition;
+    unresolved: _InternalTypes['AnyComposition'];
     resolved: {
         type: 'success';
         result: VideoConfig;

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -42,7 +42,7 @@ const subtitle = {
 const SELECTED_CLASSNAME = '__remotion_selected_classname';
 const RenderQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);

package/dist/components/SidebarRenderButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { AnyCompMetadata } from 'remotion';
+import type { _InternalTypes } from 'remotion';
 export declare const SidebarRenderButton: React.FC<{
-    readonly composition: AnyCompMetadata;
+    readonly composition: _InternalTypes['AnyCompMetadata'];
     readonly visible: boolean;
 }>;

package/dist/esm/internals.mjs

@@ -483,7 +483,7 @@ import { Internals as Internals2 } from "remotion";
 
 // src/helpers/url-state.ts
 var getUrlHandlingType = () => {
-  if (window.process.env.NODE_ENV === "production") {
+  if (window.remotion_isReadOnlyStudio) {
     return "query-string";
   }
   return "spa";
@@ -3648,7 +3648,8 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
   const onPointerEnter = useCallback17(() => {
     setHovered(true);
   }, []);
-  const { canvasContent, setCanvasContent } = useContext10(Internals8.CompositionManager);
+  const { setCanvasContent } = useContext10(Internals8.CompositionSetters);
+  const { canvasContent } = useContext10(Internals8.CompositionManager);
   const selected = useMemo23(() => {
     if (canvasContent && canvasContent.type === "asset") {
       const nameWOParent = canvasContent.asset.split("/").pop();
@@ -4053,7 +4054,7 @@ var ExplorerPanel = ({ readOnlyStudio }) => {
 
 // src/components/InitialCompositionLoader.tsx
 var useSelectAsset = () => {
-  const { setCanvasContent } = useContext12(Internals9.CompositionManager);
+  const { setCanvasContent } = useContext12(Internals9.CompositionSetters);
   const { setAssetFoldersExpanded } = useContext12(FolderContext);
   return (asset) => {
     setCanvasContent({ type: "asset", asset });
@@ -4075,7 +4076,7 @@ var useSelectAsset = () => {
 };
 var useSelectComposition = () => {
   const { setCompositionFoldersExpanded } = useContext12(FolderContext);
-  const { setCanvasContent } = useContext12(Internals9.CompositionManager);
+  const { setCanvasContent } = useContext12(Internals9.CompositionSetters);
   const isMobileLayout = useMobileLayout();
   const { setSidebarCollapsedState } = useContext12(SidebarContext);
   return useCallback21((c, push) => {
@@ -4108,7 +4109,8 @@ var useSelectComposition = () => {
   ]);
 };
 var InitialCompositionLoader = () => {
-  const { compositions, canvasContent, setCanvasContent } = useContext12(Internals9.CompositionManager);
+  const { compositions, canvasContent } = useContext12(Internals9.CompositionManager);
+  const { setCanvasContent } = useContext12(Internals9.CompositionSetters);
   const selectComposition = useSelectComposition();
   const selectAsset = useSelectAsset();
   useEffect13(() => {
@@ -10118,7 +10120,7 @@ import React88, {
   useMemo as useMemo76,
   useState as useState46
 } from "react";
-import { Internals as Internals30, getInputProps } from "remotion";
+import { getInputProps, Internals as Internals30 } from "remotion";
 import { NoReactInternals as NoReactInternals10 } from "remotion/no-react";
 
 // src/components/NewComposition/ValidationMessage.tsx
@@ -14411,7 +14413,7 @@ var DataEditor = ({
 }) => {
   const [mode, setMode] = useState46("schema");
   const [showWarning, setShowWarningWithoutPersistance] = useState46(() => getPersistedShowWarningState());
-  const { updateCompositionDefaultProps } = useContext34(Internals30.CompositionManager);
+  const { updateCompositionDefaultProps } = useContext34(Internals30.CompositionSetters);
   const inJSONEditor = mode === "json";
   const serializedJSON = useMemo76(() => {
     if (!inJSONEditor) {
@@ -15280,7 +15282,7 @@ var subtitle2 = {
 var SELECTED_CLASSNAME = "__remotion_selected_classname";
 var RenderQueueItem = ({ job, selected }) => {
   const [hovered, setHovered] = useState47(false);
-  const { setCanvasContent } = useContext39(Internals31.CompositionManager);
+  const { setCanvasContent } = useContext39(Internals31.CompositionSetters);
   const onPointerEnter = useCallback73(() => {
     setHovered(true);
   }, []);
@@ -27693,6 +27695,8 @@ var Studio = ({ rootComponent, readOnly }) => {
   return /* @__PURE__ */ jsx261(Internals62.RemotionRoot, {
     logLevel: window.remotion_logLevel,
     numberOfAudioTags: window.remotion_numberOfAudioTags,
+    onlyRenderComposition: null,
+    currentCompositionMetadata: null,
     children: /* @__PURE__ */ jsxs134(EditorContexts, {
       readOnlyStudio: readOnly,
       children: [