@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/components/RenderModal/SchemaEditor/local-state.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocalState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const deep_equal_1 = require("./deep-equal");
+const RevisionContext = (0, react_1.createContext)({
+    childResetRevision: 0,
+});
+const useLocalState = ({ value, schema, setValue, defaultValue, }) => {
+    const parentRevision = (0, react_1.useContext)(RevisionContext).childResetRevision;
+    const [resetRevision, setResetRevision] = (0, react_1.useState)(0);
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            [parentRevision]: {
+                value,
+                keyStabilityRevision: 0,
+                zodValidation: schema.safeParse(value),
+            },
+        };
+    });
+    const currentLocalValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = localValue[parentRevision]) !== null && _a !== void 0 ? _a : {
+            value: defaultValue,
+            keyStabilityRevision: 0,
+            zodValidation: schema.safeParse(defaultValue),
+        });
+    }, [defaultValue, localValue, parentRevision, schema]);
+    const stateRef = (0, react_1.useRef)(currentLocalValue);
+    stateRef.current = currentLocalValue;
+    const onChange = (0, react_1.useCallback)(
+    // Increment is to regenerate `key` attributes in array items,
+    // so should increment when changing array items
+    (updater, forceApply, increment) => {
+        const newValue = updater(stateRef.current.value);
+        const isSame = (0, deep_equal_1.deepEqual)(newValue, stateRef.current.value);
+        if (isSame) {
+            return;
+        }
+        const safeParse = schema.safeParse(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(updater, forceApply, increment);
+        }
+        setLocalValue(() => {
+            const newState = {
+                keyStabilityRevision: currentLocalValue.keyStabilityRevision + (increment ? 1 : 0),
+                value: newValue,
+                zodValidation: safeParse,
+            };
+            stateRef.current = newState;
+            return {
+                ...localValue,
+                [parentRevision]: newState,
+            };
+        });
+    }, [
+        currentLocalValue.keyStabilityRevision,
+        localValue,
+        parentRevision,
+        schema,
+        setValue,
+    ]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            childResetRevision: resetRevision,
+        };
+    }, [resetRevision]);
+    const reset = (0, react_1.useCallback)(() => {
+        // Only need to do key stability for arrays, but
+        // since user is not editing right now, should be fine
+        onChange(() => defaultValue, true, true);
+        setResetRevision((old) => old + 1);
+    }, [defaultValue, onChange]);
+    const RevisionContextProvider = (0, react_1.useCallback)(({ children }) => {
+        return ((0, jsx_runtime_1.jsx)(RevisionContext.Provider, { value: contextValue, children: children }));
+    }, [contextValue]);
+    return {
+        localValue: currentLocalValue,
+        onChange,
+        reset,
+        RevisionContextProvider,
+    };
+};
+exports.useLocalState = useLocalState;

package/dist/editor/components/RenderModal/SchemaEditor/zod-types.d.ts

@@ -0,0 +1 @@
+export type JSONPath = (string | number)[];

package/dist/editor/components/RenderModal/SchemaEditor/zod-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/editor/components/RenderModal/WarningIndicatorButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const WarningIndicatorButton: React.FC<{
+    setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;
+    showWarning: boolean;
+    warningCount: number;
+}>;

package/dist/editor/components/RenderModal/WarningIndicatorButton.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningIndicatorButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const caret_1 = require("../../icons/caret");
+const layout_1 = require("../layout");
+const style = {
+    fontSize: 12,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    color: colors_1.LIGHT_TEXT,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    cursor: 'pointer',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
+};
+const triangleStyle = {
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+    fill: colors_1.WARNING_COLOR,
+};
+const WarningTriangle = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
+};
+const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        setShowWarning((s) => !s);
+    }, [setShowWarning]);
+    const buttonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : 'transparent',
+            borderColor: showWarning
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            color: showWarning ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [showWarning]);
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", style: buttonStyle, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(WarningTriangle, { style: triangleStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), warningCount, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(caret_1.AngleDown, { down: showWarning })] }));
+};
+exports.WarningIndicatorButton = WarningIndicatorButton;

package/dist/editor/components/RenderModal/get-render-modal-warnings.d.ts

@@ -0,0 +1,19 @@
+import type { PropsEditType } from './DataEditor';
+export type TypeCanSaveState = {
+    canUpdate: true;
+} | {
+    canUpdate: false;
+    reason: string;
+    determined: boolean;
+};
+export declare const defaultTypeCanSaveState: TypeCanSaveState;
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }: {
+    cliProps: unknown;
+    canSaveDefaultProps: TypeCanSaveState;
+    isCustomDateUsed: boolean;
+    customFileUsed: boolean;
+    jsMapUsed: boolean;
+    jsSetUsed: boolean;
+    inJSONEditor: boolean;
+    propsEditType: PropsEditType;
+}) => string[];

package/dist/editor/components/RenderModal/get-render-modal-warnings.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRenderModalWarnings = exports.defaultTypeCanSaveState = void 0;
+const truthy_1 = require("../../../truthy");
+exports.defaultTypeCanSaveState = {
+    canUpdate: false,
+    reason: 'Loading...',
+    determined: false,
+};
+const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
+    if (Object.keys(cliProps).length > 0 &&
+        propsEditType === 'default-props') {
+        return 'The data that was passed using --props takes priority over the data you enter here.';
+    }
+    return null;
+};
+const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
+    if (canSaveDefaultProps.canUpdate) {
+        return null;
+    }
+    if (!canSaveDefaultProps.determined) {
+        return null;
+    }
+    return `Can't save default props: ${canSaveDefaultProps.reason}.`;
+};
+const customDateUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'There is a Date in the schema which was serialized. Note the custom syntax.';
+    }
+    return null;
+};
+const staticFileUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'There is a staticFile() in the schema which was serialized. Note the custom syntax.';
+    }
+    return null;
+};
+const mapUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Map` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const setUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Set` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
+    return [
+        getInputPropsWarning({ cliProps, propsEditType }),
+        getCannotSaveDefaultProps(canSaveDefaultProps),
+        customDateUsed(isCustomDateUsed, inJSONEditor),
+        staticFileUsed(customFileUsed, inJSONEditor),
+        mapUsed(jsMapUsed, inJSONEditor),
+        setUsed(jsSetUsed, inJSONEditor),
+    ].filter(truthy_1.truthy);
+};
+exports.getRenderModalWarnings = getRenderModalWarnings;

package/dist/editor/components/RenderModal/human-readable-audio-codecs.d.ts

@@ -0,0 +1,2 @@
+import type { AudioCodec } from '@remotion/renderer';
+export declare const humanReadableAudioCodec: (audioCodec: AudioCodec) => "AAC" | "MP3" | "Lossless" | "Opus" | undefined;

package/dist/editor/components/RenderModal/human-readable-audio-codecs.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.humanReadableAudioCodec = void 0;
+const humanReadableAudioCodec = (audioCodec) => {
+    if (audioCodec === 'aac') {
+        return 'AAC';
+    }
+    if (audioCodec === 'mp3') {
+        return 'MP3';
+    }
+    if (audioCodec === 'pcm-16') {
+        return 'Lossless';
+    }
+    if (audioCodec === 'opus') {
+        return 'Opus';
+    }
+};
+exports.humanReadableAudioCodec = humanReadableAudioCodec;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -0,0 +1,2 @@
+import type { Codec } from '@remotion/renderer';
+export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/RenderModal/human-readable-codec.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.humanReadableCodec = void 0;
+const humanReadableCodec = (codec) => {
+    if (codec === 'aac') {
+        return 'AAC';
+    }
+    if (codec === 'mp3') {
+        return 'MP3';
+    }
+    if (codec === 'gif') {
+        return 'GIF';
+    }
+    if (codec === 'h264') {
+        return 'H.264';
+    }
+    if (codec === 'h264-mkv') {
+        return 'H.264 Matroska';
+    }
+    if (codec === 'h265') {
+        return 'H.265';
+    }
+    if (codec === 'prores') {
+        return 'ProRes';
+    }
+    if (codec === 'vp8') {
+        return 'WebM VP8';
+    }
+    if (codec === 'vp9') {
+        return 'WebM VP9';
+    }
+    if (codec === 'wav') {
+        return 'Waveform';
+    }
+};
+exports.humanReadableCodec = humanReadableCodec;

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

@@ -0,0 +1,6 @@
+import type React from 'react';
+export declare const optionRow: React.CSSProperties;
+export declare const label: React.CSSProperties;
+export declare const rightRow: React.CSSProperties;
+export declare const input: React.CSSProperties;
+export declare const fieldsetLabel: React.CSSProperties;

package/dist/editor/components/RenderModal/layout.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldsetLabel = exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
+const colors_1 = require("../../helpers/colors");
+exports.optionRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    minHeight: 40,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+};
+exports.label = {
+    width: 220,
+    fontSize: 15,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+exports.rightRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+    flex: 1,
+};
+exports.input = {
+    minWidth: 250,
+};
+exports.fieldsetLabel = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 14,
+    display: 'flex',
+    flexDirection: 'row',
+    fontFamily: 'monospace',
+    alignItems: 'center',
+    width: '100%',
+};

package/dist/editor/components/RenderModal/out-name-checker.d.ts

@@ -0,0 +1,14 @@
+import type { AudioCodec, Codec, StillImageFormat } from '@remotion/renderer';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, }: {
+    outName: string;
+    codec: Codec;
+    audioCodec: AudioCodec;
+    renderMode: RenderType;
+    stillImageFormat: StillImageFormat | null;
+}) => {
+    valid: true;
+} | {
+    valid: false;
+    error: Error;
+};

package/dist/editor/components/RenderModal/out-name-checker.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOutnameGui = void 0;
+const client_1 = require("@remotion/renderer/client");
+const invalidCharacters = ['?', '*', '+', ':', '%'];
+const isValidStillExtension = (extension, stillImageFormat) => {
+    if (stillImageFormat === 'jpeg' && extension === 'jpg') {
+        return true;
+    }
+    return extension === stillImageFormat;
+};
+const validateOutnameGui = ({ outName, codec, audioCodec, renderMode, stillImageFormat, }) => {
+    try {
+        isValidOutName({
+            audioCodec,
+            codec,
+            outName,
+            renderMode,
+            stillImageFormat,
+        });
+        return { valid: true };
+    }
+    catch (err) {
+        return { valid: false, error: err };
+    }
+};
+exports.validateOutnameGui = validateOutnameGui;
+const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageFormat, }) => {
+    const extension = outName.substring(outName.lastIndexOf('.') + 1);
+    const prefix = outName.substring(0, outName.lastIndexOf('.'));
+    const map = client_1.BrowserSafeApis.defaultFileExtensionMap[codec];
+    if (client_1.BrowserSafeApis.supportedAudioCodecs[codec].length > 0 &&
+        !(audioCodec in map.forAudioCodec)) {
+        throw new Error(`Audio codec ${audioCodec} is not supported for codec ${codec}`);
+    }
+    const hasDotAfterSlash = () => {
+        const substrings = prefix.split('/');
+        for (const str of substrings) {
+            if (str[0] === '.') {
+                return true;
+            }
+        }
+        return false;
+    };
+    const hasInvalidChar = () => {
+        return prefix.split('').some((char) => invalidCharacters.includes(char));
+    };
+    if (renderMode === 'video' || renderMode === 'audio') {
+        client_1.BrowserSafeApis.validateOutputFilename({
+            codec,
+            audioCodec: audioCodec !== null && audioCodec !== void 0 ? audioCodec : null,
+            extension,
+            preferLossless: false,
+        });
+    }
+    if (prefix.length < 1 && renderMode !== 'sequence') {
+        throw new Error('The prefix must be at least 1 character long');
+    }
+    if (prefix[0] === '.' || hasDotAfterSlash()) {
+        throw new Error('The output name must not start with a dot');
+    }
+    if (hasInvalidChar()) {
+        throw new Error("Filename can't contain the following characters:  ?, *, +, %, :");
+    }
+    if (renderMode === 'still' &&
+        stillImageFormat &&
+        !isValidStillExtension(extension, stillImageFormat)) {
+        throw new Error(`The extension ${extension} is not supported for still image format ${stillImageFormat}`);
+    }
+    if (renderMode === 'sequence') {
+        if (outName.includes('.')) {
+            throw new Error('Folder names must not contain a dot');
+        }
+    }
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { AssetMetadata } from '../helpers/get-asset-metadata';
+export declare const RenderPreview: React.FC<{
+    path: string;
+    assetMetadata: AssetMetadata | null;
+}>;

package/dist/editor/components/RenderPreview.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
+const FilePreview_1 = require("./FilePreview");
+const Preview_1 = require("./Preview");
+const msgStyle = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    justifyContent: 'center',
+};
+const errMsgStyle = {
+    ...msgStyle,
+    color: colors_1.LIGHT_TEXT,
+};
+const RenderPreview = ({ path, assetMetadata }) => {
+    const fileType = (0, Preview_1.getPreviewFileType)(path);
+    const src = get_asset_metadata_1.remotion_outputsBase + path;
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    if (connectionStatus === 'disconnected') {
+        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
+    }
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { assetMetadata: assetMetadata, currentAsset: path, fileType: fileType, src: src }));
+};
+exports.RenderPreview = RenderPreview;

package/dist/editor/components/RenderQueue/CircularProgress.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const RENDER_STATUS_INDICATOR_SIZE = 16;
+export declare const CircularProgress: React.FC<{
+    progress: number;
+}>;

package/dist/editor/components/RenderQueue/CircularProgress.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = exports.RENDER_STATUS_INDICATOR_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+exports.RENDER_STATUS_INDICATOR_SIZE = 16;
+const STROKE_WIDTH = 3;
+const container = {
+    height: exports.RENDER_STATUS_INDICATOR_SIZE,
+    width: exports.RENDER_STATUS_INDICATOR_SIZE,
+    transform: `rotate(-90deg)`,
+};
+const CircularProgress = ({ progress }) => {
+    const r = exports.RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH;
+    const circumference = r * Math.PI * 2;
+    return ((0, jsx_runtime_1.jsx)("svg", { style: container, viewBox: `0 0 ${exports.RENDER_STATUS_INDICATOR_SIZE} ${exports.RENDER_STATUS_INDICATOR_SIZE}`, children: (0, jsx_runtime_1.jsx)("circle", { r: exports.RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH, stroke: colors_1.LIGHT_TEXT, fill: "none", strokeWidth: STROKE_WIDTH, cx: exports.RENDER_STATUS_INDICATOR_SIZE / 2, cy: exports.RENDER_STATUS_INDICATOR_SIZE / 2, strokeDasharray: `${circumference} ${circumference}`, strokeMiterlimit: 0, strokeDashoffset: (1 - progress) * circumference }) }));
+};
+exports.CircularProgress = CircularProgress;

package/dist/editor/components/RenderQueue/RenderQueueCopyToClipboard.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const supportsCopyingToClipboard: (job: RenderJob) => boolean;
+export declare const RenderQueueCopyToClipboard: React.FC<{
+    job: RenderJob;
+}>;

package/dist/editor/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueCopyToClipboard = exports.supportsCopyingToClipboard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clipboard_1 = require("../../icons/clipboard");
+const InlineAction_1 = require("../InlineAction");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("./actions");
+const revealIconStyle = {
+    height: 12,
+    color: 'currentColor',
+};
+const supportsCopyingToClipboard = (job) => {
+    if (job.status !== 'done') {
+        return false;
+    }
+    if (job.type !== 'still') {
+        return false;
+    }
+    if (job.imageFormat === 'png') {
+        return true;
+    }
+    if (job.imageFormat === 'jpeg') {
+        return true;
+    }
+    return false;
+};
+exports.supportsCopyingToClipboard = supportsCopyingToClipboard;
+const RenderQueueCopyToClipboard = ({ job }) => {
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
+    }, []);
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        (0, actions_1.copyToClipboard)({ outName: job.outName })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy to clipboard: ${err.message}`);
+        })
+            .then(() => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: 'Copied to clipboard',
+                created: Date.now(),
+                duration: 1000,
+                id: String(Math.random()),
+            });
+        });
+    }, [job.outName]);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
+};
+exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/editor/components/RenderQueue/RenderQueueError.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const RenderQueueError: React.FC<{
+    job: RenderJob;
+}>;

package/dist/editor/components/RenderQueue/RenderQueueError.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const z_index_1 = require("../../state/z-index");
+const item_style_1 = require("./item-style");
+const outputLocation = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+};
+const RenderQueueError = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onClick = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'render-progress',
+            jobId: job.id,
+        });
+    }, [job.id, setSelectedModal]);
+    if (job.status !== 'failed') {
+        throw new Error('should not have rendered this component');
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.error.message, children: job.error.message }));
+};
+exports.RenderQueueError = RenderQueueError;

package/dist/editor/components/RenderQueue/RenderQueueItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+export declare const RenderQueueItem: React.FC<{
+    job: RenderJob;
+    selected: boolean;
+}>;