@remotion/studio 4.0.516 → 4.0.517

package/dist/components/AssetSelector.js

@@ -140,7 +140,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
                 }
                 return;
             }
-            const { files } = e.dataTransfer;
+            const files = Array.from(e.dataTransfer.files);
             if (files.length === 0) {
                 setDropLocation(null);
                 return;

package/dist/components/Canvas.js

@@ -16,7 +16,6 @@ const clipboard_images_1 = require("../helpers/clipboard-images");
 const clipboard_svg_1 = require("../helpers/clipboard-svg");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
-const get_canvas_capture_import_1 = require("../helpers/get-canvas-capture-import");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -29,6 +28,7 @@ const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
+const canvas_capture_drop_1 = require("./canvas-capture-drop");
 const composition_drop_preview_1 = require("./composition-drop-preview");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const drop_handler_data_1 = require("./drop-handler-data");
@@ -135,6 +135,7 @@ const Canvas = ({ canvasContent, size }) => {
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCurrentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerClientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -146,6 +147,7 @@ const Canvas = ({ canvasContent, size }) => {
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
+    const metadataRequestRef = (0, react_1.useRef)(0);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -530,13 +532,19 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [keybindings, onReset, onZoomIn, onZoomOut]);
     const fetchMetadata = (0, react_1.useCallback)(async () => {
+        const request = ++metadataRequestRef.current;
         setAssetResolution(null);
         if (canvasContent.type === 'composition') {
+            setCurrentAssetMetadata(null);
             return;
         }
         const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent, canvasContent.type === 'asset');
+        if (request !== metadataRequestRef.current) {
+            return;
+        }
         setAssetResolution(metadata);
-    }, [canvasContent]);
+        setCurrentAssetMetadata((0, get_asset_metadata_1.getAssetPreviewMetadata)({ canvasContent, metadata }));
+    }, [canvasContent, setCurrentAssetMetadata]);
     (0, react_1.useEffect)(() => {
         if (canvasContent.type !== 'asset') {
             return;
@@ -855,15 +863,10 @@ const Canvas = ({ canvasContent, size }) => {
             if (localFiles.length === 1) {
                 setIsAddingAsset(true);
                 try {
-                    const canvasCapture = await (0, get_canvas_capture_import_1.getCanvasCaptureImport)(localFiles[0]);
-                    if (canvasCapture !== null) {
-                        setSelectedModal({
-                            type: 'new-comp',
-                            canvasCapture,
-                            folderName: null,
-                            parentName: null,
-                            stack: null,
-                        });
+                    if (await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({
+                        files: localFiles,
+                        setSelectedModal,
+                    })) {
                         return;
                     }
                 }
@@ -1097,6 +1100,6 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [compositionDropPreview, contentDimensions, previewSize, size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasCaptureDropHandler.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+export declare const CanvasCaptureDropHandler: FC<{
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/CanvasCaptureDropHandler.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasCaptureDropHandler = void 0;
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const canvas_capture_drop_1 = require("./canvas-capture-drop");
+const drop_handler_data_1 = require("./drop-handler-data");
+const CanvasCaptureDropHandler = ({ readOnlyStudio }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const onDragOver = (0, react_1.useCallback)((event) => {
+        if (readOnlyStudio || !(0, drop_handler_data_1.isFileDragEvent)(event)) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }, [readOnlyStudio]);
+    const onDrop = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        var _b;
+        if (readOnlyStudio || !(0, drop_handler_data_1.isFileDragEvent)(event)) {
+            return;
+        }
+        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+        if (files.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({ files, setSelectedModal });
+    }, [readOnlyStudio, setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('dragover', onDragOver);
+        document.addEventListener('drop', onDrop);
+        return () => {
+            document.removeEventListener('dragover', onDragOver);
+            document.removeEventListener('drop', onDrop);
+        };
+    }, [onDragOver, onDrop]);
+    return null;
+};
+exports.CanvasCaptureDropHandler = CanvasCaptureDropHandler;

package/dist/components/CanvasOrLoading.js

@@ -58,9 +58,10 @@ const CanvasOrLoading = ({ size }) => {
     }
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ZoomPersistor_1.ZoomPersistor, {}), jsx_runtime_1.jsx(Canvas_1.Canvas, { size: size, canvasContent: canvasContent }), (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing' ? (jsx_runtime_1.jsx(RefreshCompositionOverlay_1.RefreshCompositionOverlay, {})) : null] }));
-    if (canvasContent.type === 'asset' ||
-        canvasContent.type === 'output' ||
-        canvasContent.type === 'output-blob') {
+    if (canvasContent.type === 'output' || canvasContent.type === 'output-blob') {
+        return content;
+    }
+    if (canvasContent.type === 'asset' && resolved === null) {
         return content;
     }
     if (!resolved) {

package/dist/components/CaptionInspector.js

@@ -17,6 +17,6 @@ const readOnlyStatus = {
 };
 const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onToggle, readOnly, readOnlyTitle, }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CheckboardToggle.js

@@ -21,7 +21,7 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": checkerboard, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
                 jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
             ] })) }));
 };

package/dist/components/Checkbox.d.ts

@@ -8,7 +8,6 @@ export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
-    readonly rounded?: boolean;
     readonly disabled?: boolean;
     readonly variant?: CheckboxVariant;
 }>;

package/dist/components/Checkbox.js

@@ -9,30 +9,18 @@ const SIZES = {
     default: 20,
     small: 18,
 };
-const BULLET_SIZES = {
-    default: 10,
-    small: 9,
-};
 const CHECKMARK_SIZES = {
     default: 14,
     small: 13,
 };
-const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'default' }) => {
-    const ref = (0, react_1.useRef)(null);
+const Checkbox = ({ checked, onChange, disabled, name, variant = 'default' }) => {
     const size = SIZES[variant];
-    const bulletSize = BULLET_SIZES[variant];
     const checkmarkSize = CHECKMARK_SIZES[variant];
     const background = (0, react_1.useMemo)(() => ({
         height: size,
         width: size,
         position: 'relative',
     }), [size]);
-    const bullet = (0, react_1.useMemo)(() => ({
-        width: bulletSize,
-        height: bulletSize,
-        backgroundColor: colors_1.WHITE,
-        borderRadius: '50%',
-    }), [bulletSize]);
     const box = (0, react_1.useMemo)(() => ({
         display: 'flex',
         justifyContent: 'center',
@@ -58,13 +46,8 @@ const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'defau
             margin: 0,
         };
     }, [disabled, size]);
-    (0, react_1.useEffect)(() => {
-        if (ref.current) {
-            ref.current.style.setProperty('border-radius', rounded ? '50%' : '0%', 'important');
-        }
-    }, [rounded]);
     return (jsx_runtime_1.jsxs("div", { style: background, children: [
-            jsx_runtime_1.jsx("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? (rounded ? (jsx_runtime_1.jsx("div", { style: bullet })) : (jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }))) : null })
+            jsx_runtime_1.jsx("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }) : null })
         ] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/ConfigureLicenseModal.js

@@ -4,11 +4,11 @@ exports.LicenseSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
-const Checkbox_1 = require("./Checkbox");
 const layout_1 = require("./layout");
 const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const RadioButton_1 = require("./RadioButton");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
@@ -34,21 +34,50 @@ const descriptionLink = {
     fontSize: 14,
     lineHeight: '21px',
 };
-const checkboxRow = {
+const externalDescriptionLink = {
+    ...descriptionLink,
+    color: colors_1.BLUE,
+};
+const externalLinkIndicator = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
+const licenseExplanation = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+};
+const licenseExplanationRow = {
     display: 'flex',
-    flexDirection: 'row',
     alignItems: 'center',
-    cursor: 'pointer',
-    marginTop: 5,
+    gap: 12,
+};
+const people = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 9px)',
+    gap: 3,
+    flexShrink: 0,
+};
+const person = {
+    display: 'block',
+    height: 24,
+    overflow: 'visible',
+    width: 9,
+};
+const PersonIcon = ({ handsUp, opacity }) => {
+    return (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", opacity: opacity, style: person, viewBox: "0 0 192 512", xmlns: "http://www.w3.org/2000/svg", children: [
+            jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M128 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM32 64A64 64 0 1 1 160 64 64 64 0 1 1 32 64zm0 128l0 128 128 0 0-128-128 0zM0 160l192 0 0 192-32 0 0 160-32 0 0-160-64 0 0 160-32 0 0-160-32 0 0-192z" }), handsUp ? (jsx_runtime_1.jsx("path", { d: "M10.667 192 0 -32 M181.333 192 192 -32", fill: "none", stroke: colors_1.LIGHT_TEXT, strokeWidth: "32" })) : null] }));
+};
+const freeLicenseMessage = {
+    ...description,
     marginBottom: 5,
+    marginLeft: 28,
 };
-const checkboxLabel = {
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-    lineHeight: '20px',
-    cursor: 'pointer',
-    userSelect: 'none',
+const companyLicenseContent = {
+    marginLeft: 28,
 };
 const inputLabel = {
     color: colors_1.LIGHT_TEXT,
@@ -170,40 +199,44 @@ const LicenseSettings = () => {
     });
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
-                jsx_runtime_1.jsxs("p", { style: description, children: ["Remotion is free to use if you are an individual or company with a headcount of 3 or less.",
-                        jsx_runtime_1.jsx("br", {}),
-                        "If used in an organization with 4 people or more, a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }), ' needs to be obtained.'] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
-                        if (!(event.target instanceof HTMLInputElement)) {
-                            toggleFreeLicense();
-                        }
-                    }, children: [
-                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: toggleFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
-                    ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
-                        if (!(event.target instanceof HTMLInputElement)) {
-                            toggleCompanyLicense();
-                        }
-                    }, children: [
-                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: toggleCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
-                    ] }), licenseType === 'company' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "remotion.pro/license" }), ' ', "to obtain a license key. Enter the public license key from", ' "License Keys".'] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
-                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
-                                        remoteValidationMessage ||
-                                        (licenseKeyDetails !== null &&
-                                            !(0, LicenseKeyValidation_1.hasActiveCompanyLicense)(licenseKeyDetails))
-                                        ? 'error'
-                                        : 'ok', rightAlign: false, value: companyLicenseKey, onChange: (event) => {
-                                        setCompanyLicenseKey(event.target.value);
-                                        setError(null);
-                                    }, onBlur: () => {
-                                        setCompanyLicenseKeyToSave(companyLicenseKey.trim());
-                                    }, placeholder: "rm_pub_...", autoFocus: true })
-                            ] }), localLicenseKeyValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: localLicenseKeyValidation.message, align: "flex-start", type: "error" })
-                            ] })) : null, remoteValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: remoteValidationMessage, align: "flex-start", type: "error" })
-                            ] })) : null, isValidatingLicenseKey ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
-                            ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null, displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsxs("div", { style: licenseExplanation, children: [
+                        jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                                jsx_runtime_1.jsxs("div", { style: people, children: [
+                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 })
+                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "Remotion is free to use if you are an individual or company of 3 or less." })
+                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                                jsx_runtime_1.jsxs("div", { style: people, children: [
+                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 })
+                                    ] }), jsx_runtime_1.jsxs("p", { style: description, children: ["If used in an organization with 4+ people, you need a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }),
+                                        "."] })
+                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                                jsx_runtime_1.jsxs("div", { style: people, children: [
+                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 })
+                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "The total headcount matters, not the amount of people using Remotion." })
+                            ] })
+                    ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
+                        jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
+                                jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsxs("a", { style: externalDescriptionLink, href: "https://remotion.pro/license", target: "_blank", rel: "noopener noreferrer", children: ["remotion.pro/license",
+                                                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.BLUE, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                                            ] }), ' ', "to obtain a license key. Then enter it here."] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
+                                        jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
+                                                remoteValidationMessage ||
+                                                (licenseKeyDetails !== null &&
+                                                    !(0, LicenseKeyValidation_1.hasActiveCompanyLicense)(licenseKeyDetails))
+                                                ? 'error'
+                                                : 'ok', rightAlign: false, value: companyLicenseKey, onChange: (event) => {
+                                                setCompanyLicenseKey(event.target.value);
+                                                setError(null);
+                                            }, onBlur: () => {
+                                                setCompanyLicenseKeyToSave(companyLicenseKey.trim());
+                                            }, placeholder: "rm_pub_...", autoFocus: true })
+                                    ] }), localLicenseKeyValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: localLicenseKeyValidation.message, align: "flex-start", type: "error" })
+                                    ] })) : null, remoteValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: remoteValidationMessage, align: "flex-start", type: "error" })
+                                    ] })) : null, isValidatingLicenseKey ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
+                                    ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null] }), displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: displayedError, align: "flex-start", type: "error" })
                     ] })) : null] }) }));
 };

package/dist/components/CurrentAsset.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MediaMetadata } from '../helpers/use-media-metadata';
-export declare const CURRENT_ASSET_HEIGHT: number;
+export declare const CURRENT_ASSET_HEIGHT = 28;
 export declare const getCurrentAssetMetadataSource: (assetName: string | null) => string | null;
 export declare const getCurrentAssetImageMetadataSource: (assetName: string | null) => string | null;
 type CurrentAssetDetail = {

package/dist/components/CurrentAsset.js

@@ -28,7 +28,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const use_delete_asset_1 = require("./use-delete-asset");
 const use_static_files_1 = require("./use-static-files");
-exports.CURRENT_ASSET_HEIGHT = layout_1.COMPACT_INLINE_ROW_HEIGHT + 8;
+exports.CURRENT_ASSET_HEIGHT = layout_1.COMPACT_CONTROL_ROW_HEIGHT;
 const quickActionIconStyle = {
     display: 'block',
     height: 18,
@@ -189,6 +189,12 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     }
     const fileName = (_a = assetName.split('/').pop()) !== null && _a !== void 0 ? _a : assetName;
     const fileDetails = [];
+    if (imageMetadata !== null) {
+        fileDetails.push({
+            label: 'Dimensions',
+            value: `${imageMetadata.width} × ${imageMetadata.height}`,
+        });
+    }
     const container = (_c = (_b = mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.format) !== null && _b !== void 0 ? _b : imageMetadata === null || imageMetadata === void 0 ? void 0 : imageMetadata.format) !== null && _c !== void 0 ? _c : null;
     if (container !== null) {
         fileDetails.push({ label: 'Container', value: container });
@@ -207,10 +213,9 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     const mutationsDisabled = browserStudioOperations === null &&
         (readOnlyStudio || connectionStatus !== 'connected');
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
+            jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: [
-                    jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }), imageMetadata ? (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: [imageMetadata.width, " \u00D7 ", imageMetadata.height] })) : null] }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
                             jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, 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, fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
         ] }));

package/dist/components/Editor.js

@@ -48,6 +48,7 @@ const composition_list_1 = require("../state/composition-list");
 const scale_lock_1 = require("../state/scale-lock");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
+const CanvasCaptureDropHandler_1 = require("./CanvasCaptureDropHandler");
 const EditorContent_1 = require("./EditorContent");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const Modals_1 = require("./Modals");
@@ -111,7 +112,7 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
+                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(CanvasCaptureDropHandler_1.CanvasCaptureDropHandler, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
                                         jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? (jsx_runtime_1.jsx(RootCompositionLoader, { Root: MemoRoot })) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)(), onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})

package/dist/components/EditorContent.js

@@ -34,8 +34,11 @@ const StudioClearSelectionArea = ({ children }) => {
     return (jsx_runtime_1.jsx("div", { style: container, onPointerDown: onPointerDown, children: children }));
 };
 const EditorContent = ({ readOnlyStudio, children }) => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
+    const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const showTimeline = canvasContent !== null &&
+        (canvasContent.type === 'composition' ||
+            (canvasContent.type === 'asset' &&
+                (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset));
     const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));

package/dist/components/EditorContexts.js

@@ -21,6 +21,7 @@ const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const SettingsContext_1 = require("./SettingsContext");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowOutlinesProvider_1 = require("./ShowOutlinesProvider");
+const ShowPixelGridProvider_1 = require("./ShowPixelGridProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const SnappingProvider_1 = require("./SnappingProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
@@ -28,7 +29,7 @@ const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children }) => {
     return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsxs(SettingsContext_1.SettingsProvider, { children: [
                         jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                                jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                                jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowPixelGridProvider_1.ShowPixelGridProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
                             ] })
                     ] }) }) }) }));
 };

package/dist/components/EditorRuler/Ruler.d.ts

@@ -12,6 +12,7 @@ interface RulerProps {
     readonly markingGaps: number;
     readonly orientation: 'horizontal' | 'vertical';
     readonly size: Size;
+    readonly canCreateGuides: boolean;
     readonly onPointerSessionStart: (event: React.PointerEvent<HTMLCanvasElement>, guideId: string) => void;
 }
 declare const Ruler: React.FC<RulerProps>;

package/dist/components/EditorRuler/Ruler.js

@@ -14,7 +14,7 @@ const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const makeGuideId = () => {
     return Math.random().toString(36).substring(7);
 };
-const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, onPointerSessionStart, }) => {
+const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, canCreateGuides, onPointerSessionStart, }) => {
     const rulerCanvasRef = (0, react_1.useRef)(null);
     const isVerticalRuler = orientation === 'vertical';
     const { shouldCreateGuideRef, setGuidesList, draggingGuideId, hoveredGuideId, setDraggingGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -23,7 +23,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
     if (!unsafeVideoConfig) {
         throw new Error('Video config not set');
     }
-    const cursor = isVerticalRuler ? 'ew-resize' : 'ns-resize';
+    const guideCursor = isVerticalRuler ? 'ew-resize' : 'ns-resize';
+    const cursor = canCreateGuides ? guideCursor : 'default';
     const guideHighlight = (0, react_1.useMemo)(() => (0, editor_guide_selection_1.getRulerGuideHighlight)({
         guidesList,
         selectedItems,
@@ -66,19 +67,18 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         height: rulerHeight,
         left: isVerticalRuler ? 0 : 'unset',
         top: isVerticalRuler ? 'unset' : 0,
-        borderBottom: isVerticalRuler ? undefined : '1px solid ' + colors_1.RULER_COLOR,
-        borderRight: isVerticalRuler ? '1px solid ' + colors_1.RULER_COLOR : undefined,
+        boxShadow: colors_1.SHADOW_BLACK,
         cursor,
     }), [rulerWidth, rulerHeight, cursor, isVerticalRuler]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
+        if (!canCreateGuides || e.button !== 0) {
             return;
         }
         e.preventDefault();
         // Prevent deselection of currently selected items
         e.stopPropagation();
         shouldCreateGuideRef.current = true;
-        (0, ForceSpecificCursor_1.forceSpecificCursor)(cursor);
+        (0, ForceSpecificCursor_1.forceSpecificCursor)(guideCursor);
         const guideId = makeGuideId();
         setEditorShowGuides(() => true);
         setDraggingGuideId(() => guideId);
@@ -103,9 +103,10 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         orientation,
         originOffset,
         unsafeVideoConfig.id,
-        cursor,
+        guideCursor,
         onPointerSessionStart,
+        canCreateGuides,
     ]);
-    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, "aria-label": `${isVerticalRuler ? 'Vertical' : 'Horizontal'} ruler`, "aria-readonly": !canCreateGuides, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
 };
 exports.default = Ruler;

package/dist/components/EditorRuler/index.d.ts

@@ -7,4 +7,5 @@ export declare const EditorRulers: React.FC<{
     readonly contentDimensions: Dimensions | 'none' | null;
     readonly assetMetadata: AssetMetadata | null;
     readonly containerRef: React.RefObject<HTMLDivElement | null>;
+    readonly canCreateGuides: boolean;
 }>;

package/dist/components/EditorRuler/index.js

@@ -19,13 +19,12 @@ const originBlockStyles = {
     position: 'absolute',
     top: 0,
     left: 0,
-    borderBottom: '1px solid ' + colors_1.RULER_COLOR,
-    borderRight: '1px solid ' + colors_1.RULER_COLOR,
+    boxShadow: `inset -1px -1px 0 ${colors_1.WHITE_ALPHA_15}`,
     width: `${editor_rulers_1.RULER_WIDTH}px`,
     height: `${editor_rulers_1.RULER_WIDTH}px`,
     background: colors_1.BACKGROUND,
 };
-const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef }) => {
+const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef, canCreateGuides, }) => {
     const { scale, canvasPosition } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
         canvasSize,
         contentDimensions,
@@ -176,7 +175,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         });
     }, [finishGuideInteraction, onMouseMove]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { style: originBlockStyles }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.left, size: canvasSize, onPointerSessionStart: onPointerSessionStart }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize, onPointerSessionStart: onPointerSessionStart })
+            jsx_runtime_1.jsx(Ruler_1.default, { canCreateGuides: canCreateGuides, orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.left, size: canvasSize, onPointerSessionStart: onPointerSessionStart }), jsx_runtime_1.jsx(Ruler_1.default, { canCreateGuides: canCreateGuides, orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize, onPointerSessionStart: onPointerSessionStart }), jsx_runtime_1.jsx("div", { style: originBlockStyles })
         ] }));
 };
 exports.EditorRulers = EditorRulers;