@remotion/studio 4.0.143 → 4.0.145

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

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

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

package/dist/helpers/inject-css.d.ts

@@ -0,0 +1 @@
+export declare const injectCSS: () => void;

package/dist/helpers/inject-css.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectCSS = void 0;
+const remotion_1 = require("remotion");
+const makeDefaultGlobalCSS = () => {
+    return `
+  html {
+    --remotion-cli-internals-blue: #0b84f3;
+  }
+  
+  body {
+    overscroll-behavior-y: none;
+    overscroll-behavior-x: none;
+    /* Override Chakra UI position: relative on body */
+    position: static !important;
+  }
+  
+  .remotion-splitter {
+    user-select: none;
+  }
+  
+  .remotion-splitter-horizontal {
+    transform: scaleY(2);
+    background: linear-gradient(
+      to bottom,
+      transparent 25%,
+      black 25%,
+      black 75%,
+      transparent
+    );
+  }
+  
+  .remotion-splitter-horizontal:hover,
+  .remotion-splitter-horizontal.remotion-splitter-active {
+    background: linear-gradient(
+      to bottom,
+      var(--remotion-cli-internals-blue),
+      var(--remotion-cli-internals-blue)
+    );
+  }
+  
+  .remotion-splitter-vertical {
+    transform: scaleX(2);
+    background: linear-gradient(
+      to right,
+      transparent 25%,
+      black 25%,
+      black 75%,
+      transparent
+    );
+  }
+  
+  .remotion-splitter-vertical:hover,
+  .remotion-splitter-vertical.remotion-splitter-active {
+    background: linear-gradient(
+      to right,
+      var(--remotion-cli-internals-blue),
+      var(--remotion-cli-internals-blue)
+    );
+  }
+  
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  
+  input:focus,
+  textarea:focus,
+  button:focus,
+  a:focus {
+    outline: none;
+    box-shadow:
+      inset 1px 1px #555,
+      inset -1px -1px #555,
+      inset 1px -1px #555,
+      inset -1px 1px #555;
+    border-radius: 0 !important;
+  }
+  
+  input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  input[type='color'].__remotion_color_picker::-webkit-color-swatch {
+    border: none;
+  }
+  
+  .__remotion_thumb,
+  .__remotion_thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  .__remotion_thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    outline: none;
+    top: 15.5px;
+    width: 221px;
+    margin-left: -2px;
+    z-index: 2;
+  }
+  
+  /* For Firefox browsers */
+  .__remotion_thumb::-moz-range-thumb {
+    border: 1px solid black;
+    border-radius: 2px;
+    cursor: pointer;
+    height: 37px;
+    width: 10px;
+    pointer-events: all;
+    border-color: black;
+    background-color: white;
+    position: relative;
+  }
+  
+  /* For Chrome browsers */
+  .__remotion_thumb::-webkit-slider-thumb {
+    border: 1px solid black;
+    border-radius: 2px;
+    cursor: pointer;
+    height: 39px;
+    width: 10px;
+    pointer-events: all;
+    border-color: black;
+    background-color: white;
+    position: relative;
+  }  
+  `.trim();
+};
+let injected = false;
+const injectCSS = () => {
+    if (injected) {
+        return;
+    }
+    remotion_1.Internals.CSSUtils.injectCSS(makeDefaultGlobalCSS());
+    injected = true;
+};
+exports.injectCSS = injectCSS;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export type { GitSource, RenderDefaults } from '@remotion/studio-shared';
-export { Studio } from './Studio';
+export { StaticFile, getStaticFiles } from './api/get-static-files';
+export { watchStaticFile } from './api/watch-static-file';

package/dist/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Studio = void 0;
-var Studio_1 = require("./Studio");
-Object.defineProperty(exports, "Studio", { enumerable: true, get: function () { return Studio_1.Studio; } });
+exports.watchStaticFile = exports.getStaticFiles = void 0;
+var get_static_files_1 = require("./api/get-static-files");
+Object.defineProperty(exports, "getStaticFiles", { enumerable: true, get: function () { return get_static_files_1.getStaticFiles; } });
+var watch_static_file_1 = require("./api/watch-static-file");
+Object.defineProperty(exports, "watchStaticFile", { enumerable: true, get: function () { return watch_static_file_1.watchStaticFile; } });

package/dist/internals.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StudioInternals: {
+    Studio: import("react").FC<{
+        readonly rootComponent: import("react").FC<{}>;
+        readonly readOnly: boolean;
+    }>;
+};

package/dist/internals.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioInternals = void 0;
+const Studio_1 = require("./Studio");
+exports.StudioInternals = {
+    Studio: Studio_1.Studio,
+};

package/dist/previewEntry.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = __importDefault(require("react-dom/client"));
 const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
 const Studio_1 = require("./Studio");
 const NoRegisterRoot_1 = require("./components/NoRegisterRoot");
 const entry_basic_1 = require("./error-overlay/entry-basic");
 const client_2 = require("./hot-middleware-client/client");
-remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#1f2428'));
+remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, '#1f2428'));
 let root = null;
 const getRootForElement = () => {
     if (root) {
@@ -20,13 +21,14 @@ const getRootForElement = () => {
     return root;
 };
 const renderToDOM = (content) => {
-    // @ts-expect-error
-    if (client_1.default.createRoot) {
-        getRootForElement().render(content);
-    }
-    else {
+    if (!client_1.default.createRoot) {
+        if (no_react_1.NoReactInternals.ENABLE_V5_BREAKING_CHANGES) {
+            throw new Error('Remotion 5.0 does only support React 18+. However, ReactDOM.createRoot() is undefined.');
+        }
         client_1.default.render(content, remotion_1.Internals.getPreviewDomElement());
+        return;
     }
+    getRootForElement().render(content);
 };
 renderToDOM((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}));
 remotion_1.Internals.waitForRoot((NewRoot) => {

package/internals.d.ts

@@ -0,0 +1 @@
+export * from './dist/internals';

package/internals.js

@@ -0,0 +1 @@
+module.exports = require('./dist/internals');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.143",
+  "version": "4.0.145",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.143",
-    "@remotion/media-utils": "4.0.143",
-    "@remotion/studio-shared": "4.0.143",
-    "@remotion/renderer": "4.0.143",
-    "@remotion/player": "4.0.143"
+    "remotion": "4.0.145",
+    "@remotion/player": "4.0.145",
+    "@remotion/renderer": "4.0.145",
+    "@remotion/media-utils": "4.0.145",
+    "@remotion/studio-shared": "4.0.145"
   },
   "devDependencies": {
     "react": "18.2.0",
@@ -39,24 +39,31 @@
     "@types/semver": "^7.3.4",
     "prettier-plugin-organize-imports": "3.2.4",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.143"
+    "@remotion/zod-types": "4.0.145"
   },
   "publishConfig": {
     "access": "public"
   },
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.js"
+      "types": "./dist/index.d.ts",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/index.js"
     },
-    "./package.json": "./package.json",
-    "./entry": "./dist/previewEntry.js"
+    "./entry": "./dist/previewEntry.js",
+    "./internals": {
+      "types": "./dist/internals.d.ts",
+      "module": "./dist/esm/internals.mjs",
+      "import": "./dist/esm/internals.mjs",
+      "require": "./dist/internals.js"
+    }
   },
   "scripts": {
     "lint": "eslint src --ext ts,tsx",
     "watch": "tsc -w",
-    "build": "tsc -d",
+    "build": "tsc -d && bun bundle.ts",
     "test": "bun test src",
     "formatting": "prettier src --check"
   }