@remotion/studio 4.0.521 → 4.0.522

package/dist/esm/renderEntry.mjs

@@ -215,7 +215,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-emw4k5b0.js").then(({ StudioInternals }) => {
+    import("./chunk-3netyjd9.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/copy-text.js

@@ -8,8 +8,7 @@ const copyText = (cmd) => {
             .query({ name: permissionName })
             .then((result) => {
             if (result.state === 'granted' || result.state === 'prompt') {
-                navigator.clipboard.writeText(cmd);
-                resolve();
+                navigator.clipboard.writeText(cmd).then(resolve).catch(reject);
             }
             else {
                 reject(new Error('Permission to copy not granted'));

package/dist/helpers/use-copy-feedback.d.ts

@@ -0,0 +1,4 @@
+export declare const useCopyFeedback: () => {
+    copied: boolean;
+    markCopied: () => void;
+};

package/dist/helpers/use-copy-feedback.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCopyFeedback = void 0;
+const react_1 = require("react");
+const useCopyFeedback = () => {
+    const [copyCount, setCopyCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (copyCount === 0) {
+            return;
+        }
+        const timeout = setTimeout(() => setCopyCount(0), 2000);
+        return () => clearTimeout(timeout);
+    }, [copyCount]);
+    const markCopied = (0, react_1.useCallback)(() => {
+        setCopyCount((currentCopyCount) => currentCopyCount + 1);
+    }, []);
+    return { copied: copyCount > 0, markCopied };
+};
+exports.useCopyFeedback = useCopyFeedback;

package/dist/icons/copy.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+export declare const CopyIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly copied: boolean;
+    readonly color?: string;
+}>;

package/dist/icons/copy.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clipboard_1 = require("./clipboard");
+const CopyIcon = ({ copied, color, style, ...props }) => {
+    if (copied) {
+        return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: style, ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+    }
+    return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: style, ...props });
+};
+exports.CopyIcon = CopyIcon;

package/dist/state/canvas-ref.d.ts

@@ -1,2 +1,3 @@
 export declare const canvasRef: import("react").RefObject<HTMLDivElement | null>;
 export declare const drawRef: import("react").RefObject<HTMLDivElement | null>;
+export declare const RefreshCanvasSizeContext: import("react").Context<(() => void) | null>;

package/dist/state/canvas-ref.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawRef = exports.canvasRef = void 0;
+exports.RefreshCanvasSizeContext = exports.drawRef = exports.canvasRef = void 0;
 const react_1 = require("react");
 exports.canvasRef = (0, react_1.createRef)();
 exports.drawRef = (0, react_1.createRef)();
+exports.RefreshCanvasSizeContext = (0, react_1.createContext)(null);

package/dist/state/sidebar.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 export type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
 type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
 type Context = {
+    sidebarCollapsedDuringDrag: Sidebars | null;
+    setSidebarCollapsedDuringDrag: (side: Sidebars | null) => void;
     sidebarCollapsedStateLeft: SidebarCollapsedState;
     setSidebarCollapsedState: (options: {
         left: null | React.SetStateAction<SidebarCollapsedState>;
@@ -9,6 +11,7 @@ type Context = {
     }) => void;
     sidebarCollapsedStateRight: RightSidebarCollapsedState;
 };
+type Sidebars = 'left' | 'right';
 export declare const SidebarContext: React.Context<Context>;
 export declare const SidebarContextProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/state/sidebar.js

@@ -37,6 +37,8 @@ const saveCollapsedState = (type, sidebar) => {
     window.localStorage.setItem(storageKey(sidebar), type);
 };
 exports.SidebarContext = (0, react_1.createContext)({
+    sidebarCollapsedDuringDrag: null,
+    setSidebarCollapsedDuringDrag: () => undefined,
     sidebarCollapsedStateLeft: 'collapsed',
     setSidebarCollapsedState: () => {
         throw new Error('sidebar collapsed state');
@@ -49,8 +51,11 @@ const SidebarContextProvider = ({ children }) => {
         left: getSavedCollapsedStateLeft(isMobileLayout),
         right: getSavedCollapsedStateRight(isMobileLayout),
     }));
+    const [sidebarCollapsedDuringDrag, setSidebarCollapsedDuringDrag] = (0, react_1.useState)(null);
     const value = (0, react_1.useMemo)(() => {
         return {
+            sidebarCollapsedDuringDrag,
+            setSidebarCollapsedDuringDrag,
             sidebarCollapsedStateLeft: sidebarCollapsedState.left,
             sidebarCollapsedStateRight: sidebarCollapsedState.right,
             setSidebarCollapsedState: (options) => {
@@ -71,7 +76,7 @@ const SidebarContextProvider = ({ children }) => {
                 });
             },
         };
-    }, [sidebarCollapsedState]);
+    }, [sidebarCollapsedState, sidebarCollapsedDuringDrag]);
     return (jsx_runtime_1.jsx(exports.SidebarContext.Provider, { value: value, children: children }));
 };
 exports.SidebarContextProvider = SidebarContextProvider;

package/dist/state/timeline-zoom.d.ts

@@ -5,7 +5,7 @@ export type TimelineSetZoomOptions = {
 };
 export declare const TimelineZoomCtx: React.Context<{
     zoom: Record<string, number>;
-    setZoom: (compositionId: string, prev: (prevZoom: number) => number, options?: TimelineSetZoomOptions | undefined) => void;
+    setZoom: (videoId: string, prev: (prevZoom: number) => number, options?: TimelineSetZoomOptions | undefined) => void;
 }>;
 export declare const TimelineZoomContext: React.FC<{
     readonly children: React.ReactNode;

package/dist/state/timeline-zoom.js

@@ -17,7 +17,7 @@ exports.TimelineZoomCtx = (0, react_1.createContext)({
 });
 const TimelineZoomContext = ({ children }) => {
     const [zoom, setZoomState] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
-    const setZoom = (0, react_1.useCallback)((compositionId, callback, options) => {
+    const setZoom = (0, react_1.useCallback)((videoId, callback, options) => {
         var _a, _b;
         // Capture the old geometry before committing the new timeline width.
         const preserveTimelineCursor = (0, timeline_scroll_logic_1.prepareToPreserveTimelineCursor)({
@@ -35,14 +35,14 @@ const TimelineZoomContext = ({ children }) => {
                 const previousZoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
                     durationInFrames,
                     timelineViewportWidth,
-                    zoom: (_c = prevZoomMap[compositionId]) !== null && _c !== void 0 ? _c : null,
+                    zoom: (_c = prevZoomMap[videoId]) !== null && _c !== void 0 ? _c : null,
                 });
                 const newZoom = (0, get_timeline_max_zoom_1.clampTimelineZoom)({
                     zoom: callback(previousZoom),
                     durationInFrames,
                     timelineViewportWidth,
                 });
-                return { ...prevZoomMap, [compositionId]: newZoom };
+                return { ...prevZoomMap, [videoId]: newZoom };
             });
         });
         // The new scroll range exists now, so the browser will not clamp the offset

package/dist/visual-controls/VisualControls.js

@@ -107,6 +107,10 @@ const VisualControlsProvider = ({ children }) => {
             globalVisualControl: visualControl,
         };
     }, [visualControl]);
+    (0, react_1.useEffect)(() => {
+        // Controls may have rendered before the imperative API or Zod was ready.
+        visual_control_store_1.visualControlStore.emitChange();
+    }, [visualControl]);
     (0, react_1.useEffect)(() => {
         const callback = () => {
             if (imperativeHandles.current) {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.521",
+	"version": "4.0.522",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,20 +25,20 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/canvas": "4.0.521",
-		"@remotion/studio-protocol": "4.0.521",
-		"@remotion/studio-codemods": "4.0.521",
+		"@remotion/canvas": "4.0.522",
+		"@remotion/studio-protocol": "4.0.522",
+		"@remotion/studio-codemods": "4.0.522",
 		"semver": "7.5.3",
-		"remotion": "4.0.521",
-		"@remotion/captions": "4.0.521",
-		"@remotion/media": "4.0.521",
-		"@remotion/player": "4.0.521",
-		"@remotion/media-utils": "4.0.521",
-		"@remotion/renderer": "4.0.521",
-		"@remotion/web-renderer": "4.0.521",
-		"@remotion/studio-shared": "4.0.521",
-		"@remotion/timeline-utils": "4.0.521",
-		"@remotion/zod-types": "4.0.521",
+		"remotion": "4.0.522",
+		"@remotion/captions": "4.0.522",
+		"@remotion/media": "4.0.522",
+		"@remotion/player": "4.0.522",
+		"@remotion/media-utils": "4.0.522",
+		"@remotion/renderer": "4.0.522",
+		"@remotion/web-renderer": "4.0.522",
+		"@remotion/studio-shared": "4.0.522",
+		"@remotion/timeline-utils": "4.0.522",
+		"@remotion/zod-types": "4.0.522",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.55.5",
 		"memfs": "3.4.3",
@@ -51,7 +51,7 @@
 		"react-dom": "19.2.3",
 		"@testing-library/react": "16.1.0",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.521",
+		"@remotion/eslint-config-internal": "4.0.522",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},