@remotion/cli 4.0.0-webhook.26 → 4.1.0-alpha1

package/dist/config/number-of-shared-audio-tags.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setNumberOfSharedAudioTags = exports.getNumberOfSharedAudioTags = void 0;
+let numberOfSharedAudioTags = 0;
+const getNumberOfSharedAudioTags = () => {
+    return numberOfSharedAudioTags;
+};
+exports.getNumberOfSharedAudioTags = getNumberOfSharedAudioTags;
+const setNumberOfSharedAudioTags = (audioTags) => {
+    numberOfSharedAudioTags = audioTags;
+};
+exports.setNumberOfSharedAudioTags = setNumberOfSharedAudioTags;

package/dist/config/open-browser.d.ts

@@ -0,0 +1,2 @@
+export declare const setShouldOpenBrowser: (_should: boolean) => void;
+export declare const getShouldOpenBrowser: () => boolean;

package/dist/config/open-browser.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShouldOpenBrowser = exports.setShouldOpenBrowser = void 0;
+let should = true;
+const setShouldOpenBrowser = (_should) => {
+    if (typeof _should !== 'boolean') {
+        throw new TypeError(`Expected a boolean, got ${typeof _should} (${should})`);
+    }
+    should = _should;
+};
+exports.setShouldOpenBrowser = setShouldOpenBrowser;
+const getShouldOpenBrowser = () => {
+    return should;
+};
+exports.getShouldOpenBrowser = getShouldOpenBrowser;

package/dist/config/override-webpack.d.ts

@@ -1,5 +1,5 @@
 import type { WebpackConfiguration } from '@remotion/bundler';
-export declare type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;
+export type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;
 export declare const defaultOverrideFunction: WebpackOverrideFn;
 export declare const getWebpackOverrideFn: () => WebpackOverrideFn;
 export declare const overrideWebpackConfig: (fn: WebpackOverrideFn) => void;

package/dist/config/preview-server.js

@@ -4,14 +4,14 @@ exports.getServerPort = exports.setPort = void 0;
 let serverPort;
 const setPort = (port) => {
     if (!['number', 'undefined'].includes(typeof port)) {
-        throw new Error(`Preview server port should be a number. Got ${typeof port} (${JSON.stringify(port)})`);
+        throw new Error(`Studio server port should be a number. Got ${typeof port} (${JSON.stringify(port)})`);
     }
     if (port === undefined) {
         serverPort = undefined;
         return;
     }
     if (port < 1 || port > 65535) {
-        throw new Error(`Preview server port should be a number between 1 and 65535. Got ${port}`);
+        throw new Error(`Studio server port should be a number between 1 and 65535. Got ${port}`);
     }
     serverPort = port;
 };

package/dist/config/public-dir.d.ts

@@ -1,2 +1,2 @@
 export declare const getPublicDir: () => string | null;
-export declare const setPublicDir: (dir: string) => void;
+export declare const setPublicDir: (dir: string | null) => void;

package/dist/config/scale.d.ts

@@ -1,3 +1,4 @@
-export declare type Scale = number;
+type Scale = number;
 export declare const setScale: (newScale: Scale) => void;
 export declare const getScale: () => number;
+export {};

package/dist/config/still-frame.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStillFrame = exports.setStillFrame = void 0;
-const renderer_1 = require("@remotion/renderer");
+const remotion_1 = require("remotion");
 let stillFrame = 0;
 const setStillFrame = (frame) => {
-    renderer_1.RenderInternals.validateFrame(frame, Infinity);
+    remotion_1.Internals.validateFrame({
+        frame,
+        durationInFrames: Infinity,
+        allowFloats: false,
+    });
     stillFrame = frame;
 };
 exports.setStillFrame = setStillFrame;

package/dist/config/timeout.js

@@ -5,7 +5,7 @@ const renderer_1 = require("@remotion/renderer");
 let currentTimeout = renderer_1.RenderInternals.DEFAULT_TIMEOUT;
 const setPuppeteerTimeout = (newPuppeteerTimeout) => {
     if (typeof newPuppeteerTimeout !== 'number') {
-        throw new Error('--timeout flag / setTimeoutInMilliseconds() must be a number, but got ' +
+        throw new Error('--timeout flag / setDelayRenderTimeoutInMilliseconds() must be a number, but got ' +
             JSON.stringify(newPuppeteerTimeout));
     }
     currentTimeout = newPuppeteerTimeout;

package/dist/config/user-agent.d.ts

@@ -0,0 +1,4 @@
+type UserAgent = string | null;
+export declare const setChromiumUserAgent: (newAgent: UserAgent) => void;
+export declare const getChromiumUserAgent: () => UserAgent;
+export {};

package/dist/config/user-agent.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChromiumUserAgent = exports.setChromiumUserAgent = void 0;
+let userAgent = null;
+const setChromiumUserAgent = (newAgent) => {
+    userAgent = newAgent;
+};
+exports.setChromiumUserAgent = setChromiumUserAgent;
+const getChromiumUserAgent = () => {
+    return userAgent;
+};
+exports.getChromiumUserAgent = getChromiumUserAgent;

package/dist/config/webpack-poll.d.ts

@@ -0,0 +1,2 @@
+export declare const setWebpackPollingInMilliseconds: (interval: number | null) => void;
+export declare const getWebpackPolling: () => number | null;

package/dist/config/webpack-poll.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWebpackPolling = exports.setWebpackPollingInMilliseconds = void 0;
+const DEFAULT_WEBPACK_POLL = null;
+let webpackPolling = DEFAULT_WEBPACK_POLL;
+const setWebpackPollingInMilliseconds = (interval) => {
+    if (typeof interval !== 'number' && interval !== null) {
+        throw new TypeError(`Polling must be a number or null, got ${JSON.stringify(interval)} instead.`);
+    }
+    webpackPolling = interval;
+};
+exports.setWebpackPollingInMilliseconds = setWebpackPollingInMilliseconds;
+const getWebpackPolling = () => {
+    return webpackPolling;
+};
+exports.getWebpackPolling = getWebpackPolling;

package/dist/config/width.d.ts

@@ -0,0 +1,2 @@
+export declare const overrideWidth: (newWidth: number) => void;
+export declare const getWidth: () => number | null;

package/dist/config/width.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWidth = exports.overrideWidth = void 0;
+const remotion_1 = require("remotion");
+let passedWidth = null;
+const overrideWidth = (newWidth) => {
+    if (typeof newWidth !== 'number') {
+        remotion_1.Internals.validateDimension(newWidth, 'width', 'passed to `setWidth()`');
+    }
+    passedWidth = newWidth;
+};
+exports.overrideWidth = overrideWidth;
+const getWidth = () => {
+    return passedWidth;
+};
+exports.getWidth = getWidth;

package/dist/convert-entry-point-to-serve-url.d.ts

@@ -0,0 +1 @@
+export declare const convertEntryPointToServeUrl: (entryPoint: string) => string;

package/dist/convert-entry-point-to-serve-url.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertEntryPointToServeUrl = void 0;
+const renderer_1 = require("@remotion/renderer");
+const node_path_1 = __importDefault(require("node:path"));
+const convertEntryPointToServeUrl = (entryPoint) => {
+    const fullPath = renderer_1.RenderInternals.isServeUrl(entryPoint)
+        ? entryPoint
+        : node_path_1.default.resolve(process.cwd(), entryPoint);
+    return fullPath;
+};
+exports.convertEntryPointToServeUrl = convertEntryPointToServeUrl;

package/dist/determine-image-format.d.ts

@@ -1,10 +1,11 @@
-import type { ImageFormat, StillImageFormat } from '@remotion/renderer';
-export declare const determineFinalImageFormat: ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }: {
+import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+export declare const determineFinalStillImageFormat: ({ downloadName, outName, configImageFormat, cliFlag, isLambda, fromUi, }: {
     downloadName: string | null;
     outName: string | null;
-    configImageFormat: ImageFormat | null;
-    cliFlag: ImageFormat | null;
+    configImageFormat: StillImageFormat | null;
+    cliFlag: StillImageFormat | VideoImageFormat | null;
     isLambda: boolean;
+    fromUi: StillImageFormat | null;
 }) => {
     format: StillImageFormat;
     source: string;

package/dist/determine-image-format.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.determineFinalImageFormat = void 0;
+exports.determineFinalStillImageFormat = void 0;
 const deriveExtensionFromFilename = (filename) => {
     if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.png')) {
         return 'png';
@@ -11,9 +11,18 @@ const deriveExtensionFromFilename = (filename) => {
     if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.jpeg')) {
         return 'jpeg';
     }
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.pdf')) {
+        return 'pdf';
+    }
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.webp')) {
+        return 'webp';
+    }
     return null;
 };
-const determineFinalImageFormat = ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }) => {
+const determineFinalStillImageFormat = ({ downloadName, outName, configImageFormat, cliFlag, isLambda, fromUi, }) => {
+    if (fromUi) {
+        return { format: fromUi, source: 'via UI' };
+    }
     const outNameExtension = deriveExtensionFromFilename(outName);
     const downloadNameExtension = deriveExtensionFromFilename(downloadName);
     const outNameDescription = isLambda ? 'S3 output key' : 'out name';
@@ -40,9 +49,13 @@ const determineFinalImageFormat = ({ downloadName, outName, configImageFormat, c
     if (cliFlag !== null) {
         return { format: cliFlag, source: '--image-format flag' };
     }
-    if (configImageFormat !== null && configImageFormat !== 'none') {
+    if (configImageFormat !== null) {
+        // @ts-expect-error
+        if (configImageFormat === 'none') {
+            throw new Error('The still simage format in the config file must not be "none"');
+        }
         return { format: configImageFormat, source: 'Config file' };
     }
     return { format: 'png', source: 'Default' };
 };
-exports.determineFinalImageFormat = determineFinalImageFormat;
+exports.determineFinalStillImageFormat = determineFinalStillImageFormat;

package/dist/download-progress.d.ts

@@ -1,3 +1,3 @@
-import type { DownloadProgress } from './progress-bar';
+import type { DownloadProgress } from './progress-types';
 export declare const getFileSizeDownloadBar: (downloaded: number) => string;
 export declare const makeMultiDownloadProgress: (progresses: DownloadProgress[]) => string | null;

package/dist/download-progress.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
 const format_bytes_1 = require("./format-bytes");
 const make_progress_bar_1 = require("./make-progress-bar");
+const truthy_1 = require("./truthy");
 const getFileSizeDownloadBar = (downloaded) => {
     const desiredLength = (0, make_progress_bar_1.makeProgressBar)(0).length;
     return `[${(0, format_bytes_1.formatBytes)(downloaded).padEnd(desiredLength - 2, ' ')}]`;
@@ -23,7 +24,9 @@ const makeMultiDownloadProgress = (progresses) => {
                 ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
                 : (0, exports.getFileSizeDownloadBar)(progress.downloaded),
             `Downloading ${truncatedFileName}`,
-        ].join(' ');
+        ]
+            .filter(truthy_1.truthy)
+            .join(' ');
     }
     const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
@@ -33,6 +36,8 @@ const makeMultiDownloadProgress = (progresses) => {
                 progresses.length)
             : (0, exports.getFileSizeDownloadBar)(progresses.reduce((a, b) => a + b.downloaded, 0)),
         `Downloading ${progresses.length} files`,
-    ].join(' ');
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
 };
 exports.makeMultiDownloadProgress = makeMultiDownloadProgress;

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

@@ -2,10 +2,10 @@ import React from 'react';
 export declare const AudioWaveform: React.FC<{
     src: string;
     visualizationWidth: number;
-    fps: number;
     startFrom: number;
     durationInFrames: number;
     setMaxMediaDuration: React.Dispatch<React.SetStateAction<number>>;
     volume: string | number;
     doesVolumeChange: boolean;
+    playbackRate: number;
 }>;

package/dist/editor/components/AudioWaveform.js

@@ -4,6 +4,7 @@ exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const media_utils_1 = require("@remotion/media-utils");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const AudioWaveformBar_1 = require("./AudioWaveformBar");
 const container = {
@@ -26,10 +27,14 @@ const errorMessage = {
 const canvasStyle = {
     position: 'absolute',
 };
-const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, }) => {
+const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, playbackRate, }) => {
     const [metadata, setMetadata] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const mountState = (0, react_1.useRef)({ isMounted: true });
+    const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
+    if (vidConf === null) {
+        throw new Error('Expected video config');
+    }
     const canvas = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = mountState;
@@ -74,7 +79,7 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         (0, media_utils_1.getAudioData)(src)
             .then((data) => {
             if (mountState.current.isMounted) {
-                setMaxMediaDuration(Math.floor(data.durationInSeconds * fps));
+                setMaxMediaDuration(Math.floor(data.durationInSeconds * vidConf.fps));
                 setMetadata(data);
             }
         })
@@ -84,7 +89,7 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
                 setError(err);
             }
         });
-    }, [fps, setMaxMediaDuration, src]);
+    }, [setMaxMediaDuration, src, vidConf.fps]);
     const normalized = (0, react_1.useMemo)(() => {
         if (!metadata || metadata.numberOfChannels === 0) {
             return [];
@@ -92,11 +97,18 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         const numberOfSamples = Math.floor(visualizationWidth / (AudioWaveformBar_1.WAVEFORM_BAR_LENGTH + AudioWaveformBar_1.WAVEFORM_BAR_MARGIN));
         return (0, media_utils_1.getWaveformPortion)({
             audioData: metadata,
-            startTimeInSeconds: startFrom / fps,
-            durationInSeconds: durationInFrames / fps,
+            startTimeInSeconds: startFrom / vidConf.fps,
+            durationInSeconds: (durationInFrames / vidConf.fps) * playbackRate,
             numberOfSamples,
         });
-    }, [durationInFrames, fps, metadata, startFrom, visualizationWidth]);
+    }, [
+        durationInFrames,
+        vidConf.fps,
+        metadata,
+        playbackRate,
+        startFrom,
+        visualizationWidth,
+    ]);
     if (error) {
         return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
     }

package/dist/editor/components/Canvas.js

@@ -9,6 +9,7 @@ const colors_1 = require("../helpers/colors");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const preview_size_1 = require("../state/preview-size");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
@@ -30,16 +31,17 @@ const Canvas = () => {
     const dimensions = (0, is_current_selected_still_1.useDimensions)();
     const ref = (0, react_1.useRef)(null);
     const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    const isFit = previewSize.size === 'auto' ||
-        (previewSize.size === 1 &&
-            previewSize.translation.x === 0 &&
-            previewSize.translation.y === 0);
+    const isFit = previewSize.size === 'auto';
     const onWheel = (0, react_1.useCallback)((e) => {
+        if (!editorZoomGestures) {
+            return;
+        }
         if (!size) {
             return;
         }
@@ -116,7 +118,7 @@ const Canvas = () => {
                 }),
             };
         });
-    }, [dimensions, isFit, setSize, size]);
+    }, [editorZoomGestures, dimensions, isFit, setSize, size]);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {
@@ -192,18 +194,24 @@ const Canvas = () => {
             key: '0',
             commandCtrlKey: false,
             callback: onReset,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const zoomIn = keybindings.registerKeybinding({
             event: 'keydown',
             key: '+',
             commandCtrlKey: false,
             callback: onZoomIn,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const zoomOut = keybindings.registerKeybinding({
             event: 'keydown',
             key: '-',
             commandCtrlKey: false,
             callback: onZoomOut,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             resetBinding.unregister();
@@ -211,6 +219,6 @@ const Canvas = () => {
             zoomOut.unregister();
         };
     }, [keybindings, onReset, onZoomIn, onZoomOut]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
 };
 exports.Canvas = Canvas;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CanvasOrLoading: React.FC;
+export declare const ErrorLoading: React.FC<{
+    error: Error;
+}>;

package/dist/editor/components/CanvasOrLoading.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorLoading = exports.CanvasOrLoading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const ErrorLoader_1 = require("../../preview-server/error-overlay/remotion-overlay/ErrorLoader");
+const colors_1 = require("../helpers/colors");
+const Canvas_1 = require("./Canvas");
+const layout_1 = require("./layout");
+const styles_1 = require("./Menu/styles");
+const Spinner_1 = require("./Spinner");
+const container = {
+    color: 'white',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    backgroundColor: colors_1.BACKGROUND,
+    flexDirection: 'column',
+};
+const CanvasOrLoading = () => {
+    const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
+    const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => {
+            setTakesALongTime(true);
+        }, 500);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...loaderLabel,
+            opacity: takesALongTime ? 1 : 0,
+            transition: 'opacity 0.3s',
+        };
+    }, [takesALongTime]);
+    if (!resolved) {
+        return null;
+    }
+    if (resolved.type === 'loading') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 30, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
+    }
+    if (resolved.type === 'error') {
+        return (0, jsx_runtime_1.jsx)(exports.ErrorLoading, { error: resolved.error });
+    }
+    return (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {});
+};
+exports.CanvasOrLoading = CanvasOrLoading;
+const loaderLabel = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const loaderContainer = {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: '100%',
+    position: 'absolute',
+    height: '100%',
+    overflowY: 'auto',
+};
+const ErrorLoading = ({ error }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: loaderContainer, children: (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: error, onRetry: () => { var _a; return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition(); }, calculateMetadata: true }, error.stack) }));
+};
+exports.ErrorLoading = ErrorLoading;

package/dist/editor/components/CheckboardToggle.js

@@ -4,6 +4,7 @@ exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const truthy_1 = require("../../truthy");
+const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const ControlButton_1 = require("./ControlButton");
@@ -20,6 +21,6 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? 'var(--blue)' : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const Checkbox: React.FC<{
+    checked: boolean;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    name: string;
+    disabled?: boolean;
+}>;

package/dist/editor/components/Checkbox.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const Checkmark_1 = require("../icons/Checkmark");
+const size = 20;
+const background = {
+    height: size,
+    width: size,
+    position: 'relative',
+};
+const box = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    height: size,
+    width: size,
+    top: 0,
+    left: 0,
+    pointerEvents: 'none',
+    color: 'white',
+};
+const Checkbox = ({ checked, onChange, disabled, name }) => {
+    const input = (0, react_1.useMemo)(() => {
+        return {
+            appearance: 'none',
+            background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
+            border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            height: size,
+            width: size,
+            top: 0,
+            left: 0,
+            position: 'absolute',
+            margin: 0,
+        };
+    }, [disabled]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
+};
+exports.Checkbox = Checkbox;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CheckerboardProvider: React.FC<{
+    children: React.ReactNode;
+}>;