@remotion/studio 4.0.515 → 4.0.517

package/dist/components/keyboard-shortcuts.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.askAIKeyboardShortcutGroup = exports.keyboardShortcutGroups = void 0;
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const is_mac_1 = require("../helpers/is-mac");
+exports.keyboardShortcutGroups = [
+    {
+        name: 'Playback',
+        shortcuts: [
+            { action: '1 second back', chords: [['Shift', '←']] },
+            { action: 'Previous frame', chords: [['←']] },
+            { action: 'Play / Pause', chords: [['Space']] },
+            { action: 'Next frame', chords: [['→']] },
+            { action: '1 second forward', chords: [['Shift', '→']] },
+            { action: 'Jump to beginning', chords: [['A']] },
+            { action: 'Jump to end', chords: [['E']] },
+            { action: 'Reverse playback', chords: [['J']] },
+            { action: 'Pause', chords: [['K']] },
+            { action: 'Play / Speed up', chords: [['L']] },
+            { action: 'Go to frame', chords: [['G']] },
+            {
+                action: 'Pause & return to playback start',
+                chords: [['Enter']],
+            },
+        ],
+    },
+    {
+        name: 'Sidebar',
+        shortcuts: [
+            {
+                action: 'Toggle left sidebar',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'B']],
+            },
+            {
+                action: 'Toggle right sidebar',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'J']],
+            },
+            {
+                action: 'Toggle both sidebars',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'G']],
+            },
+        ],
+    },
+    {
+        name: 'View',
+        shortcuts: [
+            { action: 'Enter fullscreen', chords: [['F']] },
+            { action: 'Exit fullscreen', chords: [['Esc']] },
+            { action: 'Enable snapping', chords: [['Shift', 'M']] },
+        ],
+    },
+    {
+        name: 'Navigation',
+        shortcuts: [
+            { action: 'Previous composition', chords: [['PageUp']] },
+            { action: 'Next composition', chords: [['PageDown']] },
+            {
+                action: 'Render, unless a sequence or prop is selected',
+                chords: [['R']],
+            },
+            {
+                action: 'Checkerboard, unless a sequence or prop is selected',
+                chords: [['T']],
+            },
+            { action: 'Show keyboard shortcuts', chords: [['?']] },
+            {
+                action: 'Quick Switcher',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'K']],
+            },
+        ],
+    },
+    {
+        name: 'Playback range',
+        shortcuts: [
+            { action: 'Set In Point', chords: [['I']] },
+            { action: 'Set Out Point', chords: [['O']] },
+            { action: 'Clear In/Out Points', chords: [['X']] },
+        ],
+    },
+    {
+        name: 'Zoom',
+        shortcuts: [
+            { action: 'Zoom in', chords: [['+']] },
+            { action: 'Zoom out', chords: [['-']] },
+            { action: 'Reset zoom', chords: [['0']] },
+        ],
+    },
+    {
+        name: 'Props Editor',
+        shortcuts: [
+            { action: 'Undo', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'Z']] },
+            {
+                action: 'Redo',
+                chords: [
+                    is_mac_1.isMac
+                        ? [ShortcutHint_1.cmdOrCtrlCharacter, 'Shift', 'Z']
+                        : [ShortcutHint_1.cmdOrCtrlCharacter, 'Y'],
+                ],
+            },
+        ],
+    },
+    {
+        name: 'Interactivity',
+        shortcuts: [
+            { action: 'Select range / axis lock drag', chords: [['Shift']] },
+            { action: 'Toggle selection', chords: [[ShortcutHint_1.cmdOrCtrlCharacter]] },
+            {
+                action: 'Select sequence rows',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'A']],
+            },
+            { action: 'Select translate prop', chords: [['P']] },
+            { action: 'Select opacity prop', chords: [['T']] },
+            { action: 'Select rotate prop', chords: [['R']] },
+            { action: 'Select scale prop', chords: [['S']] },
+            {
+                action: 'Duplicate sequences',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'D']],
+            },
+            {
+                action: 'Copy effects / values',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'C']],
+            },
+            { action: 'Cut effects', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'X']] },
+            {
+                action: 'Paste effects / values',
+                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'V']],
+            },
+            { action: 'Delete / reset selection', chords: [['Del'], ['⌫']] },
+        ],
+    },
+];
+exports.askAIKeyboardShortcutGroup = {
+    name: 'AI',
+    shortcuts: [{ action: 'Ask AI', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'I']] }],
+};

package/dist/components/selected-outline-control-layout.js

@@ -64,14 +64,10 @@ const getSelectedOutlineControlLayout = (points) => {
     const targetHalfSizeY = isSmallY ? targetHalfSize / 2 : targetHalfSize;
     const rotationHandleRadius = Math.max(targetHalfSizeX, targetHalfSizeY) * 1.5;
     const scaleEdges = ['top', 'right', 'bottom', 'left'].filter((edge) => {
-        // Preserve one scale control per axis when opposite edge targets would overlap.
-        if (edge === 'top') {
+        if (edge === 'top' || edge === 'bottom') {
             return !isTinyY;
         }
-        if (edge === 'left') {
-            return !isTinyX;
-        }
-        return true;
+        return !isTinyX;
     });
     const rotationCorners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => ({
         corner,

package/dist/components/selected-outline-measurement.d.ts

@@ -1,7 +1,6 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
 import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
-import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const pointToString: (point: OutlinePoint) => string;
 export declare const midpoint: (from: OutlinePoint, to: OutlinePoint) => OutlinePoint;
 export declare const getOutlineCenter: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint]) => OutlinePoint;
@@ -47,18 +46,18 @@ export declare const cropOutlinePoints: (points: readonly [OutlinePoint, Outline
     readonly top: number;
     readonly bottom: number;
 }) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
-export declare const getSelectedSequenceKeys: (selectedItems: readonly TimelineSelection[]) => Set<string>;
-export declare const getSequenceKeysContainingSelection: (selectedItems: readonly TimelineSelection[]) => Set<string>;
+export declare const getSelectedSequenceKeys: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
+export declare const getSequenceKeysContainingSelection: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
-}) => TimelineSelectionInteraction;
+}) => import("@remotion/canvas").CanvasSelectionInteraction;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;
 };
-export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly TimelineSelection[]) => Map<string, Map<number, SelectedEffectFields>>;
+export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Map<string, Map<number, SelectedEffectFields>>;
 type SelectedTransformOriginInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
@@ -71,15 +70,15 @@ export type SelectedCropInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
-export declare const getSelectedCropInfo: (selectedItems: readonly TimelineSelection[]) => SelectedCropInfo | null;
-export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
-export declare const getSelectedRotationInfo: (selectedItems: readonly TimelineSelection[]) => SelectedRotationInfo | null;
+export declare const getSelectedCropInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedCropInfo | null;
+export declare const getSelectedTransformOriginInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedTransformOriginInfo | null;
+export declare const getSelectedRotationInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedRotationInfo | null;
 export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
     readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
-export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[]) => SelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[], hoveredTimelineNodePathKey: string | null) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};

package/dist/components/selected-outline-measurement.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
+const get_box_quads_polyfill_internals_js_1 = require("../helpers/get-box-quads-polyfill-internals.js");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
@@ -186,11 +188,18 @@ const getSvgSvgElementOutlinePoints = (element, containerRect) => {
         containerRect,
     });
 };
-const getElementOutlinePoints = (element, containerRect) => {
+const getElementOutlinePoints = (element, containerRect, includeOutsideContainer) => {
     const elementRect = element.getBoundingClientRect();
     if (elementRect.width === 0 && elementRect.height === 0) {
         return null;
     }
+    if (!includeOutsideContainer &&
+        (elementRect.right <= containerRect.left ||
+            elementRect.left >= containerRect.right ||
+            elementRect.bottom <= containerRect.top ||
+            elementRect.top >= containerRect.bottom)) {
+        return null;
+    }
     if (isSvgSvgElement(element)) {
         return getSvgSvgElementOutlinePoints(element, containerRect);
     }
@@ -410,7 +419,9 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
     });
 };
 exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
-const measureOutlines = (container, targets) => {
+const measureOutlines = (container, targets, hoveredTimelineNodePathKey) => {
+    // Reuse shared ancestor geometry within this synchronous batch only.
+    (0, get_box_quads_polyfill_internals_js_1.useCache)();
     const containerRect = container.getBoundingClientRect();
     const outlines = [];
     for (const target of targets) {
@@ -418,7 +429,9 @@ const measureOutlines = (container, targets) => {
         if (element === null) {
             continue;
         }
-        const uncroppedPoints = getElementOutlinePoints(element, containerRect);
+        const includeOutsideContainer = target.showSelectedOutline ||
+            (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
+        const uncroppedPoints = getElementOutlinePoints(element, containerRect, includeOutsideContainer);
         if (uncroppedPoints === null) {
             continue;
         }

package/dist/components/use-delete-asset.d.ts

@@ -0,0 +1 @@
+export declare const useDeleteAsset: (relativePath: string | null) => () => void;

package/dist/components/use-delete-asset.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteAsset = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const delete_static_file_1 = require("../api/delete-static-file");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const styles_1 = require("./Menu/styles");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const useDeleteAsset = (relativePath) => {
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    return (0, react_1.useCallback)(() => {
+        if (relativePath === null) {
+            return;
+        }
+        confirm({
+            title: 'Delete asset',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Do you want to delete the asset", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: relativePath }),
+                    " from your public folder?"] })),
+            confirmLabel: 'Delete',
+        })
+            .then((confirmed) => {
+            if (!confirmed) {
+                return;
+            }
+            const notification = (0, NotificationCenter_1.showNotification)(`Deleting ${relativePath}...`, null);
+            (0, delete_static_file_1.deleteStaticFile)(relativePath)
+                .then(() => {
+                notification.dismiss();
+            })
+                .catch((err) => {
+                notification.replaceContent(`Could not delete ${relativePath}: ${err.message}`, 3000);
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
+        });
+    }, [confirm, relativePath]);
+};
+exports.useDeleteAsset = useDeleteAsset;

package/dist/components/use-selected-outline-control-target.d.ts

@@ -0,0 +1,11 @@
+import type { SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
+export declare const useSelectedOutlineControlTarget: ({ getLatestTargetByKey, layoutTarget, }: {
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
+}) => {
+    controlTarget: SelectedOutlineTarget | undefined;
+    getLayoutTarget: () => SelectedOutlineLayoutTarget | undefined;
+    getTarget: () => SelectedOutlineTarget | undefined;
+    hovered: boolean;
+    onHoverChange: (key: string | null) => void;
+};

package/dist/components/use-selected-outline-control-target.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedOutlineControlTarget = void 0;
+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 useSelectedOutlineControlTarget = ({ getLatestTargetByKey, layoutTarget, }) => {
+    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    const targetRef = (0, react_1.useRef)(layoutTarget);
+    (0, react_1.useLayoutEffect)(() => {
+        targetRef.current = layoutTarget;
+    }, [layoutTarget]);
+    const getTarget = react_1.default.useCallback(() => {
+        const currentTarget = targetRef.current;
+        if (currentTarget === undefined) {
+            return undefined;
+        }
+        return getLatestTargetByKey(currentTarget.key);
+    }, [getLatestTargetByKey]);
+    const getLayoutTarget = react_1.default.useCallback(() => targetRef.current, []);
+    const hoveredNodePathKey = (0, react_1.useMemo)(() => layoutTarget === undefined
+        ? null
+        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(layoutTarget.nodePathInfo.sequenceSubscriptionKey), [layoutTarget]);
+    const hovered = (0, timeline_sequence_hover_1.useIsTimelineSequenceHovered)(hoveredNodePathKey);
+    const controlTarget = layoutTarget !== undefined && (layoutTarget.containsSelection || hovered)
+        ? getLatestTargetByKey(layoutTarget.key)
+        : undefined;
+    const onHoverChange = react_1.default.useCallback((key) => {
+        setHoveredSequence((currentHover) => {
+            if (key !== null) {
+                const hoverTarget = targetRef.current;
+                if (hoverTarget === undefined || hoverTarget.key !== key) {
+                    return currentHover;
+                }
+                return {
+                    key,
+                    nodePathKey: (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(hoverTarget.nodePathInfo.sequenceSubscriptionKey),
+                    source: 'canvas',
+                };
+            }
+            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
+        });
+    }, [setHoveredSequence]);
+    return { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange };
+};
+exports.useSelectedOutlineControlTarget = useSelectedOutlineControlTarget;

package/dist/esm/{chunk-s6k99gh2.js → chunk-4bxz1d3g.js}

@@ -78,7 +78,6 @@ var SELECTED_GUIDE = "#d22d3a";
 var LINE_COLOR = "#363A3E";
 var TIMELINE_TRACK_SEPARATOR = "#13161B";
 var LIGHT_GRAY = "#ccc";
-var KEYBOARD_SHORTCUT_KEY_COLOR = "#eee";
 var NOTIFICATION_BACKGROUND = "#111111";
 var RENDER_STATUS_BACKGROUND = "#222";
 var ERROR_CODE_FRAME_BACKGROUND = "#070707";
@@ -88,6 +87,8 @@ var INFO_BLUE = "#60a5fa";
 var SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
 var STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
 var TIMELINE_BACKGROUND_COLOR = "#15181B";
+var TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
+var TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
 var TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
 var TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
 var TIMELINE_BLUE = "#0b84ff";
@@ -159,4 +160,4 @@ var getBackgroundFromHoverState = ({
   return TRANSPARENT;
 };
 
-export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, KEYBOARD_SHORTCUT_KEY_COLOR, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_STACK_FRAME_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };
+export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_STACK_FRAME_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };