@remotion/studio 4.0.515 → 4.0.517

package/dist/components/SelectedOutlinePolygon.js

@@ -33,17 +33,17 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlinePolygon = void 0;
+exports.SelectedOutlinePolygon = exports.SELECTED_OUTLINE_KEY_ATTR = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const drag_aware_double_click_1 = require("../helpers/drag-aware-double-click");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_snapping_1 = require("../state/editor-snapping");
-const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -56,8 +56,10 @@ const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
-const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, onContextMenuOpenChange, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
+exports.SELECTED_OUTLINE_KEY_ATTR = 'data-remotion-studio-selected-outline-key';
+const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -254,6 +256,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             updateDragOverrides();
         };
         const onPointerUp = (reason) => {
+            dragAwareDoubleClick.endPointerGesture(dragStarted);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -318,6 +321,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         compositionHeight,
         compositionWidth,
         containsSelection,
+        dragAwareDoubleClick,
         editorShowGuides,
         editorSnapping,
         getAllDragOutlines,
@@ -338,12 +342,12 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         if (target === undefined) {
             return;
         }
-        if (!onDoubleClickTarget(target, event.button)) {
+        if (!onDoubleClickTarget(target, event.button, dragAwareDoubleClick.consumePointerGestureWasDragged())) {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
-    }, [getTarget, onDoubleClickTarget]);
+    }, [dragAwareDoubleClick, getTarget, onDoubleClickTarget]);
     const onEffectDragOver = react_1.default.useCallback((event) => {
         if (!(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
             return;
@@ -391,16 +395,14 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             clientId: effectDrop.clientId,
         });
     }, [getEffectDropTarget]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', "data-remotion-directly-selected-outline": directlySelected ? 'true' : undefined, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
-                    if (!dragging) {
-                        onHoverChange(outline.key);
-                    }
-                }, onPointerLeave: () => {
-                    if (!dragging) {
-                        onHoverChange(null);
-                    }
-                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen, onOpenChange: onContextMenuOpenChange })
-        ] }));
+    return (jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', [exports.SELECTED_OUTLINE_KEY_ATTR]: outline.key, "data-remotion-directly-selected-outline": directlySelected ? 'true' : undefined, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
+            if (!dragging) {
+                onHoverChange(outline.key);
+            }
+        }, onPointerLeave: () => {
+            if (!dragging) {
+                onHoverChange(null);
+            }
+        }, onPointerDown: onPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }));
 };
 exports.SelectedOutlinePolygon = react_1.default.memo(SelectedOutlinePolygonUnmemoized);

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/SelectedOutlineRenderer.js

@@ -36,10 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const ContextMenu_1 = require("./ContextMenu");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_order_1 = require("./selected-outline-order");
+const SelectedOutlineEditingHandles_1 = require("./SelectedOutlineEditingHandles");
 const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
+const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
 const SelectedOutlineSnapIndicators_1 = require("./SelectedOutlineSnapIndicators");
 const SelectedOutlineTransformOriginHandle_1 = require("./SelectedOutlineTransformOriginHandle");
 const SelectedOutlineUvControls_1 = require("./SelectedOutlineUvControls");
@@ -53,30 +57,47 @@ const emptyRenderState = {
     outlines: [],
     targets: [],
 };
-const SelectedOutlineHoverCleanup = ({ targets }) => {
-    const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
-    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
-    (0, react_1.useEffect)(() => {
-        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
-            !targets.some((target) => target.key === hoveredSequence.key)) {
-            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
-        }
-    }, [hoveredSequence, setHoveredSequence, targets]);
-    return null;
-};
 const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, getOutlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
+    var _a;
     const [renderState, setRenderState] = (0, react_1.useState)(emptyRenderState);
     const overlayRef = (0, react_1.useRef)(null);
     const resizeObserverRef = (0, react_1.useRef)(null);
     const resizeObserverAnimationFrameRef = (0, react_1.useRef)(null);
     const observedOutlineElementsRef = (0, react_1.useRef)(new Set());
+    const contextMenuOpenHandlersRef = (0, react_1.useRef)(new Map());
+    const registerContextMenuOpen = (0, react_1.useCallback)((key, handler) => {
+        if (handler === null) {
+            contextMenuOpenHandlersRef.current.delete(key);
+        }
+        else {
+            contextMenuOpenHandlersRef.current.set(key, handler);
+        }
+    }, []);
+    const getContextMenuOpenByKey = (0, react_1.useCallback)((key) => contextMenuOpenHandlersRef.current.get(key), []);
+    const getDelegatedContextMenuItems = (0, react_1.useCallback)((event) => {
+        var _a;
+        var _b;
+        if (!(event.target instanceof Element)) {
+            return false;
+        }
+        const polygon = event.target.closest(`polygon[${SelectedOutlinePolygon_1.SELECTED_OUTLINE_KEY_ATTR}]`);
+        if ((polygon === null || polygon === void 0 ? void 0 : polygon.ownerSVGElement) !== overlayRef.current) {
+            return false;
+        }
+        const key = polygon.getAttribute(SelectedOutlinePolygon_1.SELECTED_OUTLINE_KEY_ATTR);
+        return key === null ? false : ((_b = (_a = getContextMenuOpenByKey(key)) === null || _a === void 0 ? void 0 : _a()) !== null && _b !== void 0 ? _b : false);
+    }, [getContextMenuOpenByKey]);
+    const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
+    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    const hoveredNodePathKey = (_a = hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.nodePathKey) !== null && _a !== void 0 ? _a : null;
+    const hoveredTimelineNodePathKey = (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline' ? hoveredNodePathKey : null;
     const updateOutlines = (0, react_1.useCallback)(() => {
         const targets = getOutlineTargets();
         if (overlayRef.current === null || targets.length === 0) {
             setRenderState((prevState) => prevState.targets.length === 0 ? prevState : emptyRenderState);
             return;
         }
-        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, targets);
+        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, targets, hoveredTimelineNodePathKey);
         setRenderState((prevState) => {
             const outlines = (0, selected_outline_measurement_1.outlinesAreEqual)(prevState.outlines, nextOutlines)
                 ? prevState.outlines
@@ -86,7 +107,7 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
             }
             return { outlines, targets };
         });
-    }, [getOutlineTargets]);
+    }, [getOutlineTargets, hoveredTimelineNodePathKey]);
     (0, react_1.useLayoutEffect)(() => {
         updateOutlinesRef.current = updateOutlines;
         updateOutlines();
@@ -149,6 +170,12 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const targetsByKey = (0, react_1.useMemo)(() => {
         return new Map(renderState.targets.map((target) => [target.key, target]));
     }, [renderState.targets]);
+    (0, react_1.useEffect)(() => {
+        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
+            !renderState.targets.some((target) => target.key === hoveredSequence.key)) {
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
+        }
+    }, [hoveredSequence, renderState.targets, setHoveredSequence]);
     // Reordering a captured SVG target can cancel the active pointer session.
     const outlineRenderingOrderRef = (0, react_1.useRef)([]);
     const outlinesForRendering = (0, react_1.useMemo)(() => {
@@ -176,6 +203,31 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const outlinesByKey = (0, react_1.useMemo)(() => {
         return new Map(renderState.outlines.map((outline) => [outline.key, outline]));
     }, [renderState.outlines]);
+    const { outlinesForEditingHandles, outlinesForTransformOrigin, outlinesForUvHandles, } = (0, react_1.useMemo)(() => {
+        const editingHandles = [];
+        const transformOrigin = [];
+        const uvHandles = [];
+        for (const outline of outlinesForRendering) {
+            const target = targetsByKey.get(outline.key);
+            if ((target === null || target === void 0 ? void 0 : target.containsSelection) === true ||
+                (target !== undefined &&
+                    (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredNodePathKey)) {
+                editingHandles.push(outline);
+            }
+            if ((target === null || target === void 0 ? void 0 : target.selectedForUvHandles) === true) {
+                uvHandles.push(outline);
+            }
+            if ((target === null || target === void 0 ? void 0 : target.selectedForTransformOrigin) === true ||
+                (target === null || target === void 0 ? void 0 : target.selectedForRotation) === true) {
+                transformOrigin.push(outline);
+            }
+        }
+        return {
+            outlinesForEditingHandles: editingHandles,
+            outlinesForTransformOrigin: transformOrigin,
+            outlinesForUvHandles: uvHandles,
+        };
+    }, [hoveredNodePathKey, outlinesForRendering, targetsByKey]);
     const targetsRef = (0, react_1.useRef)(renderState.targets);
     const outlinesByKeyRef = (0, react_1.useRef)(outlinesByKey);
     (0, react_1.useLayoutEffect)(() => {
@@ -220,6 +272,6 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const updateSnapPointsRef = (0, react_1.useRef)(() => undefined);
     const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => updateSnapPointsRef.current(snapPoints), []);
     return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
-            jsx_runtime_1.jsx(SelectedOutlineHoverCleanup, { targets: renderState.targets }), jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapIndicators, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, updateSnapPointsRef: updateSnapPointsRef }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`)))] }));
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: overlayRef, getItems: getDelegatedContextMenuItems, onOpenChange: onContextMenuOpenChange }), jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapIndicators, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, updateSnapPointsRef: updateSnapPointsRef }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, registerContextMenuOpen: registerContextMenuOpen, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForEditingHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineEditingHandles_1.SelectedOutlineEditingHandles, { dragging: dragging, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getContextMenuOpenByKey: getContextMenuOpenByKey, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key), onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline }, `${outline.key}-editing-handles`))), outlinesForUvHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForUvHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`))), outlinesForTransformOrigin.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`)))] }));
 };
 exports.SelectedOutlineRenderer = react_1.default.memo(SelectedOutlineRendererUnmemoized);

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.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type SettingsTab = 'apps' | 'rendering' | 'studio' | 'license';
+type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'license';
 export declare const SettingsModal: React.FC<{
     readonly initialTab: SettingsTab;
     readonly initialPublicLicenseKey: string | null;

package/dist/components/SettingsModal.js

@@ -3,13 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const apps_1 = require("../icons/apps");
-const certificate_1 = require("../icons/certificate");
+const keyboard_1 = require("../icons/keyboard");
+const license_1 = require("../icons/license");
+const package_1 = require("../icons/package");
 const remotion_triangle_1 = require("../icons/remotion-triangle");
+const skills_1 = require("../icons/skills");
 const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
 const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
 const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
+const InstallPackage_1 = require("./InstallPackage");
+const KeyboardShortcutsSettings_1 = require("./KeyboardShortcutsSettings");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
@@ -17,6 +23,7 @@ const RenderingSettings_1 = require("./RenderingSettings");
 const render_modals_1 = require("./RenderModal/render-modals");
 const SettingsContext_1 = require("./SettingsContext");
 const SettingsModalFooter_1 = require("./SettingsModalFooter");
+const SkillsSettings_1 = require("./SkillsSettings");
 const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
 const hiddenPanel = {
@@ -27,21 +34,38 @@ const settingsOptionsPanel = {
     boxSizing: 'border-box',
     paddingBottom: 16,
 };
+const settingsLeftSidebar = {
+    ...render_modals_1.leftSidebar,
+    paddingLeft: 8,
+};
 const appsIcon = {
     ...render_modals_1.icon,
-    height: 20,
-    width: 20,
+    flexShrink: 0,
+    height: 24,
+    width: 24,
 };
-const appsIconContainer = {
-    ...render_modals_1.iconContainer,
+const skillsIcon = {
+    ...render_modals_1.icon,
+    flexShrink: 0,
     height: 20,
     width: 20,
 };
+const keyboardIcon = {
+    ...render_modals_1.icon,
+    height: 16,
+    width: 16,
+};
 const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const packageManager = window.remotion_packageManager === 'unknown'
+        ? null
+        : window.remotion_packageManager;
+    const showPackages = (0, browser_studio_operations_1.canInstallPackages)() && (isBrowserStudio || packageManager !== null);
     const [tab, setTab] = (0, react_1.useState)(initialTab);
     const [openedTabs, setOpenedTabs] = (0, react_1.useState)([initialTab]);
+    const [packagesFooterContainer, setPackagesFooterContainer] = (0, react_1.useState)(null);
     const dismiss = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
@@ -59,7 +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: render_modals_1.leftSidebar, children: [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" }), 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 === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: appsIconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" }), 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(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), 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('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] }), 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,8 @@ 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 = {
     flex: 'none',
@@ -12,6 +14,7 @@ const footer = {
 const footerRow = {
     alignItems: 'center',
     display: 'flex',
+    justifyContent: 'space-between',
 };
 const configFileHint = {
     alignItems: 'center',
@@ -29,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',
@@ -37,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(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/SkillsSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SkillsSettings: React.FC;

package/dist/components/SkillsSettings.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkillsSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const copy_text_1 = require("../helpers/copy-text");
+const check_circle_filled_1 = require("../icons/check-circle-filled");
+const clipboard_1 = require("../icons/clipboard");
+const minus_1 = require("../icons/minus");
+const InlineAction_1 = require("./InlineAction");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SettingsContext_1 = require("./SettingsContext");
+const INSTALL_COMMAND = 'npx remotion skills add';
+const container = {
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    flex: 1,
+    fontFamily: 'sans-serif',
+    minWidth: 0,
+    padding: '16px 16px 0',
+};
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const commandField = {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.22)',
+    borderRadius: 4,
+    display: 'flex',
+    marginTop: 8,
+    padding: '5px 6px 5px 9px',
+};
+const command = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: '24px',
+    margin: 0,
+    minWidth: 0,
+    overflowX: 'auto',
+    whiteSpace: 'pre',
+};
+const copyIcon = {
+    height: 12,
+    width: 12,
+};
+const list = {
+    marginTop: 14,
+};
+const skillRow = {
+    alignItems: 'center',
+    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
+    display: 'flex',
+    gap: 10,
+    minHeight: 38,
+    padding: '0 10px',
+};
+const lastSkillRow = {
+    ...skillRow,
+    borderBottom: 'none',
+};
+const statusIcon = {
+    flexShrink: 0,
+    height: 14,
+    width: 14,
+};
+const skillName = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.4,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const status = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+};
+const loading = {
+    ...description,
+    marginTop: 14,
+};
+const SkillsSettings = () => {
+    var _a;
+    const { error, remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const installedSkills = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.filter(({ installedGlobally, installedInProject }) => installedGlobally || installedInProject).length) !== null && _a !== void 0 ? _a : 0);
+    }, [remotionSkillsInfo]);
+    const missingSkills = ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.length) !== null && _a !== void 0 ? _a : 0) - installedSkills;
+    const onCopy = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(INSTALL_COMMAND).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, []);
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
+    }, []);
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 ? (jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                            jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
+                        ] })
+                ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill, index) => {
+                    const installed = skill.installedInProject || skill.installedGlobally;
+                    const installedLocation = skill.installedInProject && skill.installedGlobally
+                        ? 'Project and global'
+                        : skill.installedInProject
+                            ? 'Project'
+                            : skill.installedGlobally
+                                ? 'Global'
+                                : 'Not installed';
+                    return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === remotionSkillsInfo.skills.length - 1
+                            ? lastSkillRow
+                            : skillRow, children: [installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : (jsx_runtime_1.jsx(minus_1.Minus, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: statusIcon })), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), jsx_runtime_1.jsx("span", { style: status, children: installedLocation })
+                        ] }, skill.name));
+                }) })) : null] }));
+};
+exports.SkillsSettings = SkillsSettings;

package/dist/components/StaticFilePreview.js

@@ -4,6 +4,7 @@ exports.StaticFilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const add_asset_cache_bust_1 = require("../helpers/add-asset-cache-bust");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
@@ -36,6 +37,11 @@ const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     if (!currentAsset) {
         return null;
     }
-    return (jsx_runtime_1.jsx(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === 'found' ? assetMetadata.fetchedAt : 0}`, assetMetadata: assetMetadata }));
+    return (jsx_runtime_1.jsx(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: (0, add_asset_cache_bust_1.addAssetCacheBust)({
+            fetchedAt: assetMetadata && assetMetadata.type === 'found'
+                ? assetMetadata.fetchedAt
+                : 0,
+            src: staticFileSrc,
+        }), assetMetadata: assetMetadata }));
 };
 exports.StaticFilePreview = StaticFilePreview;