@remotion/studio 4.0.80

package/dist/helpers/calculate-timeline.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateTimeline = void 0;
+const get_sequence_visible_range_1 = require("./get-sequence-visible-range");
+const get_timeline_nestedness_1 = require("./get-timeline-nestedness");
+const get_timeline_sequence_hash_1 = require("./get-timeline-sequence-hash");
+const get_timeline_sequence_sort_key_1 = require("./get-timeline-sequence-sort-key");
+const calculateTimeline = ({ sequences, sequenceDuration, }) => {
+    const tracks = [];
+    if (sequences.length === 0) {
+        return [
+            {
+                sequence: {
+                    displayName: '',
+                    duration: sequenceDuration,
+                    from: 0,
+                    id: 'seq',
+                    parent: null,
+                    type: 'sequence',
+                    rootId: '-',
+                    showInTimeline: true,
+                    nonce: 0,
+                    loopDisplay: undefined,
+                    stack: null,
+                },
+                depth: 0,
+                hash: '-',
+            },
+        ];
+    }
+    const sameHashes = {};
+    const hashesUsedInRoot = {};
+    const cache = {};
+    for (let i = 0; i < sequences.length; i++) {
+        const sequence = sequences[i];
+        if (!hashesUsedInRoot[sequence.rootId]) {
+            hashesUsedInRoot[sequence.rootId] = [];
+        }
+        const actualHash = (0, get_timeline_sequence_hash_1.getTimelineSequenceHash)(sequence, sequences, hashesUsedInRoot, cache);
+        if (!sameHashes[actualHash]) {
+            sameHashes[actualHash] = [];
+        }
+        sameHashes[actualHash].push(sequence.id);
+        const cascadedStart = (0, get_sequence_visible_range_1.getCascadedStart)(sequence, sequences);
+        const visibleStart = (0, get_sequence_visible_range_1.getTimelineVisibleStart)(sequence, sequences);
+        const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sequences);
+        tracks.push({
+            sequence: {
+                ...sequence,
+                from: visibleStart,
+                duration: visibleDuration,
+            },
+            depth: (0, get_timeline_nestedness_1.getTimelineNestedLevel)(sequence, sequences, 0),
+            hash: actualHash,
+            cascadedStart,
+            cascadedDuration: sequence.duration,
+        });
+    }
+    const uniqueTracks = [];
+    for (const track of tracks) {
+        if (!uniqueTracks.find((t) => t.hash === track.hash)) {
+            const { cascadedDuration, cascadedStart, ...cleanTrack } = track;
+            uniqueTracks.push(cleanTrack);
+        }
+    }
+    return uniqueTracks.sort((a, b) => {
+        const sortKeyA = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(a, tracks, sameHashes);
+        const sortKeyB = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(b, tracks, sameHashes);
+        return sortKeyA.localeCompare(sortKeyB);
+    });
+};
+exports.calculateTimeline = calculateTimeline;

package/dist/helpers/checkerboard-background.d.ts

@@ -0,0 +1,4 @@
+export declare const getCheckerboardBackgroundSize: (size: number) => string;
+export declare const getCheckerboardBackgroundPos: (size: number) => string;
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
+export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

package/dist/helpers/checkerboard-background.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkerboardBackgroundImage = exports.checkerboardBackgroundColor = exports.getCheckerboardBackgroundPos = exports.getCheckerboardBackgroundSize = void 0;
+const getCheckerboardBackgroundSize = (size) => `${size}px ${size}px`;
+exports.getCheckerboardBackgroundSize = getCheckerboardBackgroundSize;
+const getCheckerboardBackgroundPos = (size) => `0 0, ${size / 2}px 0, ${size / 2}px -${size / 2}px, 0px ${size / 2}px`;
+exports.getCheckerboardBackgroundPos = getCheckerboardBackgroundPos;
+const checkerboardBackgroundColor = (checkerboard) => {
+    if (checkerboard) {
+        return 'white';
+    }
+    return 'black';
+};
+exports.checkerboardBackgroundColor = checkerboardBackgroundColor;
+const checkerboardBackgroundImage = (checkerboard) => {
+    if (checkerboard) {
+        return `
+     linear-gradient(
+        45deg,
+        rgba(0, 0, 0, 0.1) 25%,
+        transparent 25%
+      ),
+      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),
+      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)
+    `;
+    }
+    return undefined;
+};
+exports.checkerboardBackgroundImage = checkerboardBackgroundImage;

package/dist/helpers/client-id.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type PreviewServerState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+export declare const StudioServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const studioServerConnectionRef: React.RefObject<{
+    set: (jobs: PreviewServerState) => void;
+}>;
+export declare const PreviewServerConnection: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/helpers/client-id.js

@@ -0,0 +1,46 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewServerConnection = exports.studioServerConnectionRef = exports.StudioServerConnectionCtx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.StudioServerConnectionCtx = react_1.default.createContext({
+    type: 'init',
+});
+exports.studioServerConnectionRef = (0, react_1.createRef)();
+const PreviewServerConnection = ({ children }) => {
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useImperativeHandle)(exports.studioServerConnectionRef, () => {
+        return {
+            set: (newState) => {
+                setState(newState);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: state, children: children }));
+};
+exports.PreviewServerConnection = PreviewServerConnection;

package/dist/helpers/color-math.d.ts

@@ -0,0 +1,2 @@
+import type { ZodTypesType } from '../components/get-zod-if-possible';
+export declare const colorWithNewOpacity: (color: string, opacity: number, zodTypes: ZodTypesType) => string;

package/dist/helpers/color-math.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorWithNewOpacity = void 0;
+const colorWithNewOpacity = (color, opacity, zodTypes) => {
+    const { r, g, b } = zodTypes.ZodZypesInternals.parseColor(color);
+    if (opacity >= 255) {
+        return `#${r.toString(16).padStart(2, '0')}${g
+            .toString(16)
+            .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${(opacity / 255).toFixed(2)})`;
+};
+exports.colorWithNewOpacity = colorWithNewOpacity;

package/dist/helpers/colors.d.ts

@@ -0,0 +1,26 @@
+export declare const BACKGROUND = "rgb(31,36,40)";
+export declare const BACKGROUND__TRANSPARENT = "rgba(31,36,40, 0)";
+export declare const INPUT_BACKGROUND = "#2f363d";
+export declare const BORDER_COLOR = "#000";
+export declare const LIGHT_COLOR = "#ddd";
+export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
+export declare const LIGHT_TEXT = "#A6A7A9";
+export declare const RULER_COLOR = "#808080";
+export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
+export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
+export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
+export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
+export declare const TIMELINE_BACKGROUND = "#111";
+export declare const FAIL_COLOR = "#ff3232";
+export declare const WARNING_COLOR = "#f1c40f";
+export declare const BLUE = "#0b84f3";
+export declare const BLUE_DISABLED = "#284f73";
+export declare const LIGHT_TRANSPARENT = "rgba(255, 255, 255, 0.7)";
+export declare const UNSELECTED_GUIDE = "#7e1219";
+export declare const SELECTED_GUIDE = "#d22d3a";
+export declare const LINE_COLOR = "#363A3E";
+export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
+export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
+    selected: boolean;
+    hovered: boolean;
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/helpers/colors.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBackgroundFromHoverState = exports.TIMELINE_TRACK_SEPARATOR = exports.LINE_COLOR = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.LIGHT_TRANSPARENT = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND = void 0;
+exports.BACKGROUND = 'rgb(31,36,40)';
+exports.BACKGROUND__TRANSPARENT = 'rgba(31,36,40, 0)';
+exports.INPUT_BACKGROUND = '#2f363d';
+exports.BORDER_COLOR = '#000';
+exports.LIGHT_COLOR = '#ddd';
+exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
+exports.LIGHT_TEXT = '#A6A7A9';
+exports.RULER_COLOR = '#808080';
+exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
+const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
+exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
+exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
+exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+exports.TIMELINE_BACKGROUND = '#111';
+exports.FAIL_COLOR = '#ff3232';
+exports.WARNING_COLOR = '#f1c40f';
+exports.BLUE = '#0b84f3';
+exports.BLUE_DISABLED = '#284f73';
+exports.LIGHT_TRANSPARENT = 'rgba(255, 255, 255, 0.7)';
+exports.UNSELECTED_GUIDE = '#7e1219';
+exports.SELECTED_GUIDE = '#d22d3a';
+exports.LINE_COLOR = '#363A3E';
+exports.TIMELINE_TRACK_SEPARATOR = 'rgba(0, 0, 0, 0.3)';
+const getBackgroundFromHoverState = ({ selected, hovered, }) => {
+    if (selected) {
+        if (hovered) {
+            return SELECTED_HOVER_BACKGROUND;
+        }
+        return exports.SELECTED_BACKGROUND;
+    }
+    if (hovered) {
+        return exports.CLEAR_HOVER;
+    }
+    return 'transparent';
+};
+exports.getBackgroundFromHoverState = getBackgroundFromHoverState;

package/dist/helpers/convert-env-variables.d.ts

@@ -0,0 +1,2 @@
+export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [string, string][];
+export declare const envVariablesArrayToObject: (envVariables: [string, string][]) => Record<string, string>;

package/dist/helpers/convert-env-variables.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.envVariablesArrayToObject = exports.envVariablesObjectToArray = void 0;
+const envVariablesObjectToArray = (envVariables) => {
+    return Object.entries(envVariables).map(([key, one]) => [
+        key.trim().toUpperCase(),
+        one.trim(),
+    ]);
+};
+exports.envVariablesObjectToArray = envVariablesObjectToArray;
+const envVariablesArrayToObject = (envVariables) => {
+    return envVariables
+        .map(([key, val]) => [key.trim(), val.trim()])
+        .filter(([key, val]) => key && val)
+        .reduce((acc, [key, value]) => {
+        acc[key.toUpperCase()] = value;
+        return acc;
+    }, {});
+};
+exports.envVariablesArrayToObject = envVariablesArrayToObject;

package/dist/helpers/copy-text.d.ts

@@ -0,0 +1 @@
+export declare const copyText: (cmd: string) => Promise<void>;

package/dist/helpers/copy-text.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyText = void 0;
+const copyText = (cmd) => {
+    const permissionName = 'clipboard-write';
+    return new Promise((resolve, reject) => {
+        navigator.permissions
+            .query({ name: permissionName })
+            .then((result) => {
+            if (result.state === 'granted' || result.state === 'prompt') {
+                navigator.clipboard.writeText(cmd);
+                resolve();
+            }
+            else {
+                reject(new Error('Permission to copy not granted'));
+            }
+        })
+            .catch((err) => {
+            reject(err);
+        });
+    });
+};
+exports.copyText = copyText;

package/dist/helpers/create-folder-tree.d.ts

@@ -0,0 +1,17 @@
+import type { AnyComposition, StaticFile, TFolder } from 'remotion';
+import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
+export type AssetFolder = {
+    name: string;
+    items: AssetStructure;
+    expanded: boolean;
+};
+export type AssetStructure = {
+    files: StaticFile[];
+    folders: AssetFolder[];
+};
+export declare const buildAssetFolderStructure: (files: StaticFile[], parentFolderName: string | null, foldersExpanded: Record<string, boolean>) => AssetStructure;
+export declare const splitParentIntoNameAndParent: (name: string | null) => {
+    name: string | null;
+    parent: string | null;
+};
+export declare const createFolderTree: (comps: AnyComposition[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];

package/dist/helpers/create-folder-tree.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFolderTree = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
+const persist_open_folders_1 = require("./persist-open-folders");
+const buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
+    const notInFolder = files.filter((f) => !f.name.includes('/'));
+    const inFolder = files.filter((f) => f.name.includes('/'));
+    const groupedByFolder = {};
+    for (const item of inFolder) {
+        const folderName = item.name.split('/')[0];
+        if (!groupedByFolder[folderName]) {
+            groupedByFolder[folderName] = [];
+        }
+        groupedByFolder[folderName].push(item);
+    }
+    return {
+        files: notInFolder,
+        folders: Object.keys(groupedByFolder).map((folderName) => {
+            var _a;
+            const filesInFolder = groupedByFolder[folderName];
+            const filesWithoutFolderName = filesInFolder.map((f) => {
+                return {
+                    ...f,
+                    name: f.name.substring(folderName.length + 1),
+                };
+            });
+            const key = [parentFolderName, folderName].filter(Boolean).join('/');
+            const isExpanded = (_a = foldersExpanded[key]) !== null && _a !== void 0 ? _a : false;
+            return {
+                name: folderName,
+                items: (0, exports.buildAssetFolderStructure)(filesWithoutFolderName, [parentFolderName, folderName].filter(Boolean).join('/'), foldersExpanded),
+                expanded: isExpanded,
+            };
+        }),
+    };
+};
+exports.buildAssetFolderStructure = buildAssetFolderStructure;
+const splitParentIntoNameAndParent = (name) => {
+    if (name === null) {
+        return {
+            name: null,
+            parent: null,
+        };
+    }
+    const splitted = name.split('/');
+    const lastName = splitted[splitted.length - 1];
+    const parentParentArray = splitted.slice(0, splitted.length - 1);
+    const parentParent = parentParentArray.length === 0 ? null : parentParentArray.join('/');
+    return {
+        name: lastName,
+        parent: parentParent,
+    };
+};
+exports.splitParentIntoNameAndParent = splitParentIntoNameAndParent;
+const doesFolderExist = (items, folderName, parentName) => {
+    for (const item of items) {
+        if (item.type === 'folder') {
+            if (item.folderName === folderName && item.parentName === parentName) {
+                return item.items;
+            }
+            const found = doesFolderExist(item.items, folderName, parentName);
+            if (found !== false) {
+                return found;
+            }
+        }
+    }
+    return false;
+};
+const findItemListToPush = (items, folderName, parentName) => {
+    if (folderName === null) {
+        return items;
+    }
+    const folder = doesFolderExist(items, folderName, parentName);
+    if (!folder) {
+        // eslint-disable-next-line no-console
+        console.log({ items, folderName, parentName });
+        throw new Error('did not find folder ' + folderName);
+    }
+    return folder;
+};
+const createFolderIfDoesNotExist = (items, availableFolders, folderItem, foldersExpanded) => {
+    var _a;
+    if (doesFolderExist(items, folderItem.name, folderItem.parent)) {
+        return;
+    }
+    const splitted = (0, exports.splitParentIntoNameAndParent)(folderItem.parent);
+    if (folderItem.parent) {
+        const parent = availableFolders.find((f) => f.name === splitted.name && f.parent === splitted.parent);
+        if (!parent) {
+            throw new Error('unexpectedly did not have parent');
+        }
+        createFolderIfDoesNotExist(items, availableFolders, parent, foldersExpanded);
+    }
+    const itemList = findItemListToPush(items, splitted.name, splitted.parent);
+    if (!itemList) {
+        throw new Error('why did folder not exist? ' + folderItem.name);
+    }
+    itemList.push({
+        type: 'folder',
+        folderName: folderItem.name,
+        items: [],
+        key: folderItem.name,
+        expanded: (_a = foldersExpanded[(0, persist_open_folders_1.openFolderKey)(folderItem.name, folderItem.parent)]) !== null && _a !== void 0 ? _a : false,
+        parentName: folderItem.parent,
+    });
+};
+const createFolderTree = (comps, folders, foldersExpanded) => {
+    const items = [];
+    const uniqueFolderKeys = [];
+    for (const folder of folders) {
+        const folderKey = (0, persist_open_folders_1.openFolderKey)(folder.name, folder.parent);
+        if (uniqueFolderKeys.includes(folderKey)) {
+            if (folder.parent) {
+                throw new Error(`Multiple folders with the name ${folder.name} inside the folder ${folder.parent} exist. Folder names must be unique.`);
+            }
+            throw new Error('Multiple folders with the name ' +
+                folder.name +
+                ' exist. Folder names must be unique.');
+        }
+        uniqueFolderKeys.push(folderKey);
+        createFolderIfDoesNotExist(items, folders, folder, foldersExpanded);
+    }
+    for (const item of comps) {
+        const toPush = {
+            type: 'composition',
+            composition: item,
+            key: item.id,
+        };
+        const list = findItemListToPush(items, item.folderName, item.parentFolderName);
+        list.push(toPush);
+    }
+    return items;
+};
+exports.createFolderTree = createFolderTree;

package/dist/helpers/document-title.d.ts

@@ -0,0 +1,4 @@
+import type { RenderJob } from '../preview-server/job';
+export declare const setCurrentCanvasContentId: (id: string | null) => void;
+export declare const setUnsavedProps: (unsaved: boolean) => void;
+export declare const setRenderJobs: (jobs: RenderJob[]) => void;

package/dist/helpers/document-title.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentCanvasContentId = void 0;
+const no_react_1 = require("remotion/no-react");
+let currentItemName = null;
+let unsavedProps = false;
+let tabInactive = false;
+let renderJobs = [];
+const setCurrentCanvasContentId = (id) => {
+    if (!id) {
+        currentItemName = id;
+        updateTitle();
+        return;
+    }
+    const idWithoutFolder = id.split('/').pop();
+    currentItemName = idWithoutFolder;
+    updateTitle();
+};
+exports.setCurrentCanvasContentId = setCurrentCanvasContentId;
+const setUnsavedProps = (unsaved) => {
+    window.remotion_unsavedProps = unsaved;
+    unsavedProps = unsaved;
+};
+exports.setUnsavedProps = setUnsavedProps;
+const setRenderJobs = (jobs) => {
+    renderJobs = jobs;
+    updateTitle();
+};
+exports.setRenderJobs = setRenderJobs;
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});
+const productName = 'Remotion Studio';
+const suffix = `- ${productName}`;
+const updateTitle = () => {
+    if (!currentItemName) {
+        document.title = productName;
+        return;
+    }
+    const currentCompTitle = `${currentItemName} / ${window.remotion_projectName}`;
+    document.title = [
+        getProgressInBrackets(currentItemName, renderJobs),
+        unsavedProps && tabInactive ? '✏️' : null,
+        `${currentCompTitle} ${suffix}`,
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
+};
+const getProgressInBrackets = (selectedCompositionId, jobs) => {
+    const currentRender = jobs.find((job) => job.status === 'running');
+    if (!currentRender) {
+        return null;
+    }
+    if (currentRender.status !== 'running') {
+        throw new Error('expected running job');
+    }
+    const progInPercent = Math.ceil(currentRender.progress.value * 100);
+    const progressInBrackets = currentRender.compositionId === selectedCompositionId
+        ? `[${progInPercent}%]`
+        : `[${progInPercent}% ${currentRender.compositionId}]`;
+    return progressInBrackets;
+};
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});

package/dist/helpers/editor-ruler.d.ts

@@ -0,0 +1,36 @@
+import type { Guide } from '../state/editor-guides';
+export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }: {
+    scale: number;
+    points: Array<{
+        position: number;
+        value: number;
+    }>;
+    startMarking: number;
+    originOffset: number;
+    markingGaps: number;
+    orientation: 'horizontal' | 'vertical';
+    rulerCanvasRef: React.RefObject<HTMLCanvasElement>;
+    selectedGuide: Guide | null;
+}) => void;
+export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale, }: {
+    rulerScaleRange: {
+        start: number;
+        end: number;
+    };
+    rulerMarkingGaps: number;
+    scale: number;
+}) => {
+    points: {
+        value: number;
+        position: number;
+    }[];
+    startMarking: number;
+};
+export declare const getRulerScaleRange: ({ canvasLength, containerRef, scale, }: {
+    canvasLength: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    scale: number;
+}) => {
+    start: number;
+    end: number;
+};