@remotion/studio 4.0.515 → 4.0.516

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.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/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, {}))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
+const layout_1 = require("./layout");
 const ModalFooter_1 = require("./ModalFooter");
 const footer = {
     flex: 'none',
@@ -38,7 +39,7 @@ const SettingsModalFooter = () => {
         };
     }, []);
     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" }) })
+                    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" }) })
                 ] }) }) }));
 };
 exports.SettingsModalFooter = SettingsModalFooter;

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;

package/dist/components/StudioSettings.js

@@ -6,16 +6,14 @@ const client_1 = require("@remotion/renderer/client");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
-const Checkmark_1 = require("../icons/Checkmark");
 const undo_1 = require("../icons/undo");
 const Button_1 = require("./Button");
+const ConfigSelect_1 = require("./ConfigSelect");
 const styles_1 = require("./InspectorPanel/styles");
 const layout_1 = require("./layout");
-const ComboBox_1 = require("./NewComposition/ComboBox");
 const InputDragger_1 = require("./NewComposition/InputDragger");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const layout_2 = require("./RenderModal/layout");
-const RenderModalHr_1 = require("./RenderModal/RenderModalHr");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
@@ -29,15 +27,14 @@ const dividerLabel = {
     margin: 0,
     padding: '4px 16px',
 };
-const controlWidth = {
-    boxSizing: 'border-box',
-    width: 180,
+const sectionTitle = {
+    ...dividerLabel,
+    marginTop: 8,
 };
 const resetIcon = {
     height: 12,
     width: 12,
 };
-const DEFAULT_VALUE = 'studio-default';
 const initialSettings = {
     askAIEnabled: null,
     audioLatencyHint: null,
@@ -50,39 +47,6 @@ const initialSettings = {
     numberOfSharedAudioTags: null,
     rspack: null,
 };
-const ConfigSelect = ({ defaultLabel, name, onChange, options, value, }) => {
-    const values = [
-        {
-            id: DEFAULT_VALUE,
-            keyHint: null,
-            label: `Default (${defaultLabel})`,
-            leftItem: value === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-            onClick: () => onChange(null),
-            quickSwitcherLabel: null,
-            subMenu: null,
-            type: 'item',
-            value: DEFAULT_VALUE,
-        },
-        { id: `${DEFAULT_VALUE}-divider`, type: 'divider' },
-        ...options.map((option) => {
-            const id = `${name}-${String(option.value)}`;
-            return {
-                id,
-                keyHint: null,
-                label: option.label,
-                leftItem: value === option.value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                onClick: () => onChange(option.value),
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: id,
-            };
-        }),
-    ];
-    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-            jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, title: name }) })
-        ] }));
-};
 const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd, value, }) => {
     const resolvedDefaultLabel = defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : String(defaultValue);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -91,10 +55,6 @@ const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd,
                 ] })
         ] }));
 };
-const booleanOptions = [
-    { label: 'Enabled', value: true },
-    { label: 'Disabled', value: false },
-];
 const StudioSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
@@ -140,7 +100,6 @@ const StudioSettings = () => {
             update('setAudioLatencyHint', settings.audioLatencyHint),
             update('setNumberOfSharedAudioTags', committedNumberSettings.numberOfSharedAudioTags),
             update('setRspack', settings.rspack),
-            update('setKeyboardShortcutsEnabled', settings.keyboardShortcutsEnabled),
             update('setInteractivityEnabled', settings.interactivityEnabled),
             update('setLogLevel', settings.logLevel),
         ].filter((item) => editedSetters.has(item.setter));
@@ -167,14 +126,14 @@ const StudioSettings = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Keyboard shortcuts enabled", onChange: (value) => changeSetting('keyboardShortcutsEnabled', 'setKeyboardShortcutsEnabled', value), options: booleanOptions, value: settings.keyboardShortcutsEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
+            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
                     { label: 'Interactive', value: 'interactive' },
                     { label: 'Balanced', value: 'balanced' },
                     { label: 'Playback', value: 'playback' },
-                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
+                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: ConfigSelect_1.booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
                     { label: 'Rspack', value: true },
                     { label: 'Webpack', value: false },
-                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
+                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: ConfigSelect_1.booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
                     label: value[0].toUpperCase() + value.slice(1),
                     value,
                 })), value: settings.logLevel }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [