@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/components/get-zod-if-possible.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 (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.ZodProvider = exports.useZodTypesIfPossible = exports.useZodIfPossible = exports.getZTypesIfPossible = exports.getZodIfPossible = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getZodIfPossible = async () => {
+    try {
+        const { z } = await Promise.resolve().then(() => __importStar(require('zod')));
+        return z;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZodIfPossible = getZodIfPossible;
+const getZTypesIfPossible = async () => {
+    try {
+        const mod = await Promise.resolve().then(() => __importStar(require('@remotion/zod-types')));
+        return mod;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZTypesIfPossible = getZTypesIfPossible;
+const useZodIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zod) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodIfPossible = useZodIfPossible;
+const useZodTypesIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zodTypes) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodTypesIfPossible = useZodTypesIfPossible;
+const ZodContext = (0, react_1.createContext)(null);
+const ZodProvider = ({ children }) => {
+    const [zod, setZod] = (0, react_1.useState)(null);
+    const [zodTypes, setZodTypes] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZodIfPossible)().then((z) => setZod(z));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZTypesIfPossible)().then((z) => setZodTypes(z));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            zod,
+            zodTypes,
+        };
+    }, [zod, zodTypes]);
+    return ((0, jsx_runtime_1.jsx)(ZodContext.Provider, { value: contextValue, children: children }));
+};
+exports.ZodProvider = ZodProvider;

package/dist/editor/components/layout.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export declare const SPACING_UNIT = 8;
+export declare const Spacing: React.FC<{
+    x?: number;
+    y?: number;
+    block?: boolean;
+}>;
+export declare const Flex: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const Row: React.FC<{
+    justify?: 'center' | 'flex-start' | 'flex-end';
+    align?: 'center';
+    style?: React.CSSProperties;
+    flex?: number;
+    className?: string;
+    children: React.ReactNode;
+} & HTMLAttributes<HTMLDivElement>>;
+export declare const Column: React.FC<{
+    justify?: 'center';
+    align?: 'center';
+    style?: React.CSSProperties;
+    className?: string;
+    children: React.ReactNode;
+}>;

package/dist/editor/components/layout.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.SPACING_UNIT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SPACING_UNIT = 8;
+const Spacing = ({ x = 0, y = 0, block = false }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            display: block ? 'block' : 'inline-block',
+            width: x * exports.SPACING_UNIT,
+            height: y * exports.SPACING_UNIT,
+            flexShrink: 0,
+        };
+    }, [block, x, y]);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
+};
+exports.Spacing = Spacing;
+const flexCss = { flex: 1 };
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flexCss, children: children });
+exports.Flex = Flex;
+const Row = ({ children, justify, className, align, flex, style = {}, ...other }) => {
+    const finalStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: justify !== null && justify !== void 0 ? justify : 'flex-start',
+            alignItems: align !== null && align !== void 0 ? align : 'flex-start',
+            flex: flex !== null && flex !== void 0 ? flex : undefined,
+        };
+    }, [align, flex, justify, style]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, ...other, children: children }));
+};
+exports.Row = Row;
+const Column = ({ children, justify, className, align, style = {} }) => {
+    const finalStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: justify !== null && justify !== void 0 ? justify : 'flex-start',
+            alignItems: align !== null && align !== void 0 ? align : 'flex-start',
+        };
+    }, [align, justify, style]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
+};
+exports.Column = Column;

package/dist/editor/helpers/calculate-timeline.d.ts

@@ -0,0 +1,6 @@
+import type { TSequence } from 'remotion';
+import type { TrackWithHash } from './get-timeline-sequence-sort-key';
+export declare const calculateTimeline: ({ sequences, sequenceDuration, }: {
+    sequences: TSequence[];
+    sequenceDuration: number;
+}) => TrackWithHash[];

package/dist/editor/helpers/calculate-timeline.js

@@ -0,0 +1,84 @@
+"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 isTrackWithinParentBounds = (track) => {
+    return [
+        track.cascadedStart + track.cascadedDuration >= track.sequence.from,
+        track.cascadedStart <= track.sequence.from + track.sequence.duration,
+    ].every(Boolean);
+};
+const canCollapse = (track, allTracks) => {
+    return Boolean(allTracks.find((t) => t.parent === track.id));
+};
+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,
+                },
+                depth: 0,
+                hash: '-',
+                canCollapse: false,
+            },
+        ];
+    }
+    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,
+            canCollapse: canCollapse(sequence, sequences),
+        });
+    }
+    const uniqueTracks = [];
+    for (const track of tracks) {
+        if (!uniqueTracks.find((t) => t.hash === track.hash) &&
+            track.sequence.showInTimeline &&
+            isTrackWithinParentBounds(track)) {
+            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/editor/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/editor/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/editor/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/editor/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/editor/helpers/colors.d.ts

@@ -0,0 +1,24 @@
+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 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/editor/helpers/colors.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBackgroundFromHoverState = 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';
+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/editor/helpers/convert-env-variables.d.ts

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

package/dist/editor/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/editor/helpers/copy-text.d.ts

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

package/dist/editor/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/editor/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/editor/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/editor/helpers/document-title.d.ts

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