@remotion/studio 4.0.516 → 4.0.517

package/dist/components/RulersAndGuidesToggle.js

@@ -7,17 +7,28 @@ const colors_1 = require("../helpers/colors");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_rulers_1 = require("../state/editor-rulers");
 const ControlButton_1 = require("./ControlButton");
-const RulersAndGuidesToggle = () => {
+const RulersAndGuidesToggle = ({ showGuides }) => {
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
-    const rulersOrGuidesAreVisible = editorShowRulers || editorShowGuides;
+    const rulersOrGuidesAreVisible = editorShowRulers || (showGuides && editorShowGuides);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowRulers(() => !rulersOrGuidesAreVisible);
-        setEditorShowGuides(() => !rulersOrGuidesAreVisible);
-    }, [rulersOrGuidesAreVisible, setEditorShowGuides, setEditorShowRulers]);
-    const accessibilityLabel = rulersOrGuidesAreVisible
-        ? 'Hide rulers and guides'
-        : 'Show rulers and guides';
+        if (showGuides) {
+            setEditorShowGuides(() => !rulersOrGuidesAreVisible);
+        }
+    }, [
+        rulersOrGuidesAreVisible,
+        setEditorShowGuides,
+        setEditorShowRulers,
+        showGuides,
+    ]);
+    const accessibilityLabel = showGuides
+        ? rulersOrGuidesAreVisible
+            ? 'Hide rulers and guides'
+            : 'Show rulers and guides'
+        : editorShowRulers
+            ? 'Hide rulers'
+            : 'Show rulers';
     return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }));
 };
 exports.RulersAndGuidesToggle = RulersAndGuidesToggle;

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
 import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
-import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const SELECTED_OUTLINE_KEY_ATTR = "data-remotion-studio-selected-outline-key";
 export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly compositionHeight: number;
@@ -20,7 +19,7 @@ export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onHoverChange: (key: string | null) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
-    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly onSelect: (item: import("@remotion/canvas").CanvasSelectionItem, interaction: import("@remotion/canvas").CanvasSelectionInteraction) => void;
     readonly onDoubleClickTarget: (target: SelectedOutlineTarget, button: number, sequenceWasDragged: boolean) => boolean;
     readonly scale: number;
     readonly showSelectedOutline: boolean;

package/dist/components/SelectedOutlineRenderer.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
-import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;
@@ -9,7 +8,7 @@ export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
     readonly getOutlineTargets: () => readonly SelectedOutlineLayoutTarget[];
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onContextMenuOpenChange: (open: boolean) => void;
-    readonly onSelect: (item: TimelineSelection, interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly onSelect: (item: import("@remotion/canvas").CanvasSelectionItem, interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly scale: number;
     readonly sequences: readonly {
         readonly id: string;

package/dist/components/SelectedOutlineUvControls.d.ts

@@ -7,7 +7,7 @@ export declare const getSelectedOutlineUvHandleTimelineSelection: ({ effectIndex
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly nodePathInfo: SequenceNodePathInfo;
-}) => TimelineSelection;
+}) => import("@remotion/canvas").CanvasSelectionItem;
 export declare const SelectedOutlineUvHandleConnectionLayer: React.FC<{
     readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;

package/dist/components/SettingsModal.js

@@ -83,6 +83,6 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, {}))] }) }));
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SettingsModalFooter: React.FC;
+export declare const SettingsModalFooter: React.FC<{
+    readonly showLicenseFaq: boolean;
+}>;

package/dist/components/SettingsModalFooter.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
+const common_1 = require("./InspectorPanel/common");
 const layout_1 = require("./layout");
 const ModalFooter_1 = require("./ModalFooter");
 const footer = {
@@ -13,6 +14,7 @@ const footer = {
 const footerRow = {
     alignItems: 'center',
     display: 'flex',
+    justifyContent: 'space-between',
 };
 const configFileHint = {
     alignItems: 'center',
@@ -30,7 +32,14 @@ const configFileName = {
     fontWeight: 'bold',
     lineHeight: '20px',
 };
-const SettingsModalFooter = () => {
+const externalLinkIndicator = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
+const SettingsModalFooter = ({ showLicenseFaq }) => {
     const configFileLocation = (0, react_1.useMemo)(() => {
         return {
             source: 'remotion.config.ts',
@@ -38,8 +47,14 @@ const SettingsModalFooter = () => {
             column: 1,
         };
     }, []);
-    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx("div", { style: footerRow, children: jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
-                ] }) }) }));
+    const openLicenseFaq = (0, react_1.useCallback)(() => {
+        window.open('https://www.remotion.dev/docs/license/faq', '_blank', 'noopener,noreferrer');
+    }, []);
+    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
+                jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                    ] }), showLicenseFaq ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: openLicenseFaq, style: { flex: 'none', width: 'fit-content' }, title: "Open the Remotion License FAQ in a new tab", children: ["License FAQ",
+                        jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                    ] })) : null] }) }));
 };
 exports.SettingsModalFooter = SettingsModalFooter;

package/dist/components/ShowPixelGridProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShowPixelGridProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ShowPixelGridProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowPixelGridProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_pixel_grid_1 = require("../state/editor-pixel-grid");
+const ShowPixelGridProvider = ({ children }) => {
+    const [editorShowPixelGrid, setEditorShowPixelGridState] = (0, react_1.useState)(() => (0, editor_pixel_grid_1.loadEditorShowPixelGridOption)());
+    const setEditorShowPixelGrid = (0, react_1.useCallback)((newValue) => {
+        setEditorShowPixelGridState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_pixel_grid_1.persistEditorShowPixelGridOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorShowPixelGridCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorShowPixelGrid,
+            setEditorShowPixelGrid,
+        };
+    }, [editorShowPixelGrid, setEditorShowPixelGrid]);
+    return (jsx_runtime_1.jsx(editor_pixel_grid_1.EditorShowPixelGridContext.Provider, { value: editorShowPixelGridCtx, children: children }));
+};
+exports.ShowPixelGridProvider = ShowPixelGridProvider;

package/dist/components/SidebarCollapserControls.js

@@ -139,8 +139,8 @@ const SidebarCollapserControl = ({ side }) => {
         return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
     if (side === 'left') {
-        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, style: { marginRight: 4 } }));
     }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/Timeline/Timeline.js

@@ -62,6 +62,7 @@ const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequ
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
@@ -72,6 +73,7 @@ const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
@@ -94,6 +96,7 @@ const TimelineContextMenuArea = ({ children }) => {
     const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -101,6 +104,44 @@ const TimelineContextMenuArea = ({ children }) => {
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const browserStudioCanInsertSolid = browserStudioOperations !== null;
+    (0, react_1.useEffect)(() => {
+        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
+        if (!verticalScroll) {
+            return;
+        }
+        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: false,
+            includeVertical: true,
+            verticalTopOffset: isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
+            onTick: (directions) => {
+                if (directions.y === null) {
+                    return;
+                }
+                verticalScroll.scrollTop +=
+                    directions.y === 'up'
+                        ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
+                        : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
+            },
+        });
+        const onDragOver = (event) => {
+            if (!event.dataTransfer ||
+                !Array.from(event.dataTransfer.types).includes(TimelineSequenceItem_1.SEQUENCE_REORDER_MIME_TYPE)) {
+                autoScroll.stop();
+                return;
+            }
+            autoScroll.update(event);
+        };
+        const stopAutoScroll = () => autoScroll.stop();
+        verticalScroll.addEventListener('dragover', onDragOver, true);
+        document.addEventListener('dragend', stopAutoScroll, true);
+        document.addEventListener('drop', stopAutoScroll, true);
+        return () => {
+            autoScroll.stop();
+            verticalScroll.removeEventListener('dragover', onDragOver, true);
+            document.removeEventListener('dragend', stopAutoScroll, true);
+            document.removeEventListener('drop', stopAutoScroll, true);
+        };
+    }, [isStill]);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;

package/dist/components/Timeline/TimelineClipboardKeybindings.d.ts

@@ -3,7 +3,6 @@ import type React from 'react';
 import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type InteractivitySchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type EffectsClipboardEnvelope } from './effects-clipboard';
-import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
     readonly type: 'valid';
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -28,9 +27,9 @@ export type PasteEffectPropTarget = {
 } | {
     readonly type: 'none' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
-export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
+export declare const getPasteEffectsTarget: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => PasteEffectsTarget;
 export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
-    selection: TimelineSelection;
+    selection: import("@remotion/canvas").CanvasSelectionItem;
     propStatuses: PropStatuses;
 }) => EffectClipboardSnapshot[] | null;
 export type EffectClipboardDataFromSelections = {
@@ -44,15 +43,15 @@ export type EffectClipboardDataFromSelections = {
     readonly type: 'uncopyable';
 };
 export declare const getEffectClipboardDataFromSelections: ({ selectedItems, propStatuses, }: {
-    selectedItems: readonly TimelineSelection[];
+    selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     propStatuses: PropStatuses;
 }) => EffectClipboardDataFromSelections;
 export declare const getEffectsClipboardEnvelopeFromSelections: ({ selectedItems, payload, }: {
-    selectedItems: readonly TimelineSelection[];
+    selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     payload: EffectClipboardData;
 }) => EffectsClipboardEnvelope;
 export declare const getEffectPropClipboardDataFromSelection: ({ selection, propStatuses, }: {
-    selection: TimelineSelection;
+    selection: import("@remotion/canvas").CanvasSelectionItem;
     propStatuses: PropStatuses;
 }) => EffectPropClipboardData | null;
 export declare const getEasingClipboardDataFromSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
@@ -68,7 +67,7 @@ export declare const getEasingClipboardDataFromSelection: ({ selection, sequence
     propStatuses: PropStatuses;
 }) => EasingClipboardData | null;
 export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly payload: EffectPropClipboardData;
     readonly propStatuses: PropStatuses;
     readonly sequences: TSequence[];

package/dist/components/Timeline/TimelineDragHandler.js

@@ -74,20 +74,25 @@ const getClientXWithScroll = (x) => {
 const TimelineDragHandler = () => {
     const video = remotion_1.Internals.useUnsafeVideoConfig();
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
-        if (!canvasContent || canvasContent.type !== 'composition') {
+        if (!canvasContent) {
             return {};
         }
-        const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        const zoom = canvasContent.type === 'composition'
+            ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
+            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
         return {
             ...container,
             width: 100 * zoom + '%',
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
     }, [canvasContent, zoomMap]);
-    if (!canvasContent || canvasContent.type !== 'composition') {
+    const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
+        ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);
+    if (!hasPlayableContent) {
         return null;
     }
     return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && (0, interactivity_enabled_1.isStudioSelectionEnabled)() ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
@@ -248,7 +253,9 @@ const TimelineDragHandlerInner = () => {
             return;
         }
         const scroller = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: true,
             includeVertical: false,
+            verticalTopOffset: 0,
             onTick: onEdgeScrollTick,
         });
         autoScroller.current = scroller;

package/dist/components/Timeline/TimelineKeyframeControls.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {
     readonly clickedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
 }) => readonly SequenceNodePathInfo[];
 export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, keyframable, }: {
     propStatus: CanUpdateSequencePropStatus | null;

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -19,10 +19,12 @@ const TimelinePlayCursorSyncer = () => {
     const compositionId = canvasContent && canvasContent.type === 'composition'
         ? canvasContent.compositionId
         : null;
+    // Asset previews have a synthetic video config, but no composition ID
+    // with which to look up a persisted timeline zoom.
     const zoom = compositionId
         ? ((_a = zoomMap[compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-        : null;
-    if (zoom && video) {
+        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);
         (0, imperative_state_1.setCurrentZoom)(zoom);
         (0, imperative_state_1.setCurrentDuration)(video.durationInFrames);

package/dist/components/Timeline/TimelineSelection.d.ts

@@ -1,3 +1,4 @@
+import { type CanvasSelectionInteraction, type CanvasSelectionItem, type CanvasSelectionSnapshot } from '@remotion/canvas';
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
 import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
@@ -20,46 +21,11 @@ export declare const getTimelineRowHighlightBackground: ({ showSelectedBackgroun
 }) => string | undefined;
 export declare const TIMELINE_BACKGROUND = "#15181B";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
-export type TimelineSelection = {
-    readonly type: 'guide';
-    readonly guideId: string;
-} | {
-    readonly type: 'sequence';
-    readonly nodePathInfo: SequenceNodePathInfo;
-} | {
-    readonly type: 'sequence-prop';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly key: string;
-} | {
-    readonly type: 'sequence-all-effects';
-    readonly nodePathInfo: SequenceNodePathInfo;
-} | {
-    readonly type: 'sequence-effect';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly i: number;
-} | {
-    readonly type: 'sequence-effect-prop';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly i: number;
-    readonly key: string;
-} | {
-    readonly type: 'keyframe';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly frame: number;
-} | {
-    readonly type: 'easing';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly fromFrame: number;
-    readonly toFrame: number;
-    readonly segmentIndex: number;
-};
+export type TimelineSelection = CanvasSelectionItem;
 export type TimelineEasingSelection = Extract<TimelineSelection, {
     type: 'easing';
 }>;
-export type TimelineSelectionInteraction = {
-    readonly shiftKey: boolean;
-    readonly toggleKey: boolean;
-};
+export type TimelineSelectionInteraction = CanvasSelectionInteraction;
 export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
     readonly metaKey: boolean;
@@ -71,10 +37,7 @@ export declare const shouldSelectTimelineRowOnPointerDown: ({ selected, shiftKey
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => boolean;
-export type TimelineSelectionState = {
-    readonly selectedItems: readonly TimelineSelection[];
-    readonly anchor: TimelineSelection | null;
-};
+export type TimelineSelectionState = CanvasSelectionSnapshot;
 export declare const EMPTY_TIMELINE_SELECTION_STATE: TimelineSelectionState;
 export type TimelineMarqueeRect = {
     readonly left: number;
@@ -88,16 +51,16 @@ export type TimelineMarqueeSelectionCandidate = {
     readonly rect: TimelineMarqueeRect;
 };
 export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
-    readonly currentState: TimelineSelectionState;
-    readonly clickedItem: TimelineSelection;
-    readonly interaction: TimelineSelectionInteraction;
-    readonly allSelectableItems: readonly TimelineSelection[];
-}) => TimelineSelectionState;
+    readonly currentState: CanvasSelectionSnapshot;
+    readonly clickedItem: CanvasSelectionItem;
+    readonly interaction: CanvasSelectionInteraction;
+    readonly allSelectableItems: readonly CanvasSelectionItem[];
+}) => CanvasSelectionSnapshot;
 export declare const getAvailableTimelineSelectionState: ({ availableKeys, availableItemsByKey, state, }: {
     readonly availableKeys: ReadonlySet<string>;
-    readonly availableItemsByKey?: ReadonlyMap<string, TimelineSelection> | undefined;
-    readonly state: TimelineSelectionState;
-}) => TimelineSelectionState;
+    readonly availableItemsByKey?: ReadonlyMap<string, CanvasSelectionItem> | undefined;
+    readonly state: CanvasSelectionSnapshot;
+}) => CanvasSelectionSnapshot;
 export declare const getNormalizedTimelineMarqueeRect: ({ startX, startY, currentX, currentY, }: {
     readonly startX: number;
     readonly startY: number;
@@ -119,12 +82,12 @@ export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelection
     readonly marqueeRect: TimelineMarqueeRect;
 }) => {
     readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly CanvasSelectionItem[];
 };
 export declare const extendTimelineMarqueeSelection: ({ currentSelection, marqueeSelection, }: {
-    readonly currentSelection: readonly TimelineSelection[];
-    readonly marqueeSelection: readonly TimelineSelection[];
-}) => readonly TimelineSelection[];
+    readonly currentSelection: readonly CanvasSelectionItem[];
+    readonly marqueeSelection: readonly CanvasSelectionItem[];
+}) => readonly CanvasSelectionItem[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
     readonly revealRequest: TimelineSelectionRevealRequest | null;
@@ -151,23 +114,23 @@ type TimelineSelectionRevealRequest = {
     readonly item: TimelineSelection;
     readonly token: number;
 };
-export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
-export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
-export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => CanvasSelectionItem | null;
+export declare const getTimelineSelectionKey: (item: CanvasSelectionItem) => string;
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => CanvasSelectionItem[];
 export declare const getSelectableTimelineItems: ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }: {
     readonly getDragOverrides: GetDragOverrides;
     readonly getEffectDragOverrides: GetEffectDragOverrides;
     readonly getIsExpanded: GetIsExpanded;
     readonly propStatuses: PropStatuses;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly CanvasSelectionItem[];
     readonly timeline: readonly TimelineTrackData[];
     readonly timelinePosition: number;
-}) => TimelineSelection[];
+}) => CanvasSelectionItem[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
     readonly timeline: readonly TimelineTrackData[];
 }>;
-export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly TimelineSelection[]) => {
+export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly CanvasSelectionItem[]) => {
     readonly type: "sequence";
     readonly nodePathInfo: SequenceNodePathInfo;
 } | null;
@@ -186,17 +149,17 @@ export declare const useTimelineMarqueeSelection: () => {
     marqueeRect: TimelineMarqueeRect | null;
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
-export declare const useTimelineMarqueeSelectableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
+export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selectionItem: TimelineSelection | null;
+    selectionItem: CanvasSelectionItem | null;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selectionItem: TimelineSelection;
+    selectionItem: CanvasSelectionItem;
     selected: boolean;
 };
 export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }: {
@@ -205,7 +168,7 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
     readonly toFrame: number;
     readonly segmentIndex: number;
 }) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
     selectionItem: {
@@ -221,7 +184,7 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     onSelect: () => void;
     selectable: boolean;
     selected: boolean;
-    selectionItem: TimelineSelection;
+    selectionItem: CanvasSelectionItem;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, { hovered, selectedBackground, }: {