@remotion/studio 4.0.527 → 4.0.529

package/dist/helpers/prism-vsc-dark-plus.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prismVscDarkPlus = void 0;
-// Unmodified prism-themes@1.9.0/themes/prism-vsc-dark-plus.css, stored as a
-// string for Studio’s CSS injection (including Browser Studio, which has no
-// CSS loader).
+const colors_1 = require("./colors");
+// Adapted from prism-themes@1.9.0/themes/prism-vsc-dark-plus.css to use the
+// Studio palette. Stored as a string for CSS injection (including Browser
+// Studio, which has no CSS loader).
 /*
 The MIT License (MIT)
 
@@ -29,7 +30,7 @@ SOFTWARE.
 */
 exports.prismVscDarkPlus = `pre[class*="language-"],
 code[class*="language-"] {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 	font-size: 13px;
 	text-shadow: none;
 	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
@@ -53,7 +54,7 @@ code[class*="language-"]::selection,
 pre[class*="language-"] *::selection,
 code[class*="language-"] *::selection {
 	text-shadow: none;
-	background: #264F78;
+	background: ${colors_1.PRISM_SELECTION_BACKGROUND};
 }
 
 @media print {
@@ -67,14 +68,14 @@ pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	background: #1e1e1e;
+	background: ${colors_1.PRISM_BACKGROUND};
 }
 
 :not(pre) > code[class*="language-"] {
 	padding: .1em .3em;
 	border-radius: .3em;
-	color: #db4c69;
-	background: #1e1e1e;
+	color: ${colors_1.PRISM_INLINE_COLOR};
+	background: ${colors_1.PRISM_BACKGROUND};
 }
 /*********************************************************
 * Tokens
@@ -84,22 +85,22 @@ pre[class*="language-"] {
 }
 
 .token.doctype .token.doctype-tag {
-	color: #569CD6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.doctype .token.name {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.comment,
 .token.prolog {
-	color: #6a9955;
+	color: ${colors_1.PRISM_COMMENT_COLOR};
 }
 
 .token.punctuation,
 .language-html .language-css .token.punctuation,
 .language-html .language-javascript .token.punctuation {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.property,
@@ -110,7 +111,7 @@ pre[class*="language-"] {
 .token.symbol,
 .token.inserted,
 .token.unit {
-	color: #b5cea8;
+	color: ${colors_1.PRISM_NUMBER_COLOR};
 }
 
 .token.selector,
@@ -119,7 +120,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.deleted {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 .language-css .token.string.url {
@@ -128,53 +129,53 @@ pre[class*="language-"] {
 
 .token.operator,
 .token.entity {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.operator.arrow {
-	color: #569CD6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.atrule {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 .token.atrule .token.rule {
-	color: #c586c0;
+	color: ${colors_1.PRISM_CONTROL_FLOW_COLOR};
 }
 
 .token.atrule .token.url {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.atrule .token.url .token.function {
-	color: #dcdcaa;
+	color: ${colors_1.PRISM_FUNCTION_COLOR};
 }
 
 .token.atrule .token.url .token.punctuation {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.keyword {
-	color: #569CD6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.keyword.module,
 .token.keyword.control-flow {
-	color: #c586c0;
+	color: ${colors_1.PRISM_CONTROL_FLOW_COLOR};
 }
 
 .token.function,
 .token.function .token.maybe-class-name {
-	color: #dcdcaa;
+	color: ${colors_1.PRISM_FUNCTION_COLOR};
 }
 
 .token.regex {
-	color: #d16969;
+	color: ${colors_1.PRISM_REGEX_COLOR};
 }
 
 .token.important {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.italic {
@@ -182,80 +183,80 @@ pre[class*="language-"] {
 }
 
 .token.constant {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.class-name,
 .token.maybe-class-name {
-	color: #4ec9b0;
+	color: ${colors_1.PRISM_CLASS_NAME_COLOR};
 }
 
 .token.console {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.parameter {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.interpolation {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.punctuation.interpolation-punctuation {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.boolean {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.property,
 .token.variable,
 .token.imports .token.maybe-class-name,
 .token.exports .token.maybe-class-name {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.selector {
-	color: #d7ba7d;
+	color: ${colors_1.PRISM_SELECTOR_COLOR};
 }
 
 .token.escape {
-	color: #d7ba7d;
+	color: ${colors_1.PRISM_SELECTOR_COLOR};
 }
 
 .token.tag {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.tag .token.punctuation {
-	color: #808080;
+	color: ${colors_1.RULER_COLOR};
 }
 
 .token.cdata {
-	color: #808080;
+	color: ${colors_1.RULER_COLOR};
 }
 
 .token.attr-name {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.attr-value,
 .token.attr-value .token.punctuation {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 .token.attr-value .token.punctuation.attr-equals {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.entity {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.namespace {
-	color: #4ec9b0;
+	color: ${colors_1.PRISM_CLASS_NAME_COLOR};
 }
 /*********************************************************
 * Language Specific
@@ -269,25 +270,25 @@ pre[class*="language-typescript"],
 code[class*="language-typescript"],
 pre[class*="language-tsx"],
 code[class*="language-tsx"] {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 pre[class*="language-css"],
 code[class*="language-css"] {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 pre[class*="language-html"],
 code[class*="language-html"] {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .language-regex .token.anchor {
-	color: #dcdcaa;
+	color: ${colors_1.PRISM_FUNCTION_COLOR};
 }
 
 .language-html .token.punctuation {
-	color: #808080;
+	color: ${colors_1.RULER_COLOR};
 }
 /*********************************************************
 * Line highlighting
@@ -298,8 +299,8 @@ pre[class*="language-"] > code[class*="language-"] {
 }
 
 .line-highlight.line-highlight {
-	background: #f7ebc6;
-	box-shadow: inset 5px 0 0 #f7d87c;
+	background: ${colors_1.PRISM_LINE_HIGHLIGHT_BACKGROUND};
+	box-shadow: inset 5px 0 0 ${colors_1.PRISM_LINE_HIGHLIGHT_BORDER_COLOR};
 	z-index: 0;
 }
 `;

package/dist/helpers/resolve-studio-color.d.ts

@@ -0,0 +1 @@
+export declare const resolveStudioColor: (color: string, computedStyle: CSSStyleDeclaration) => string;

package/dist/helpers/resolve-studio-color.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveStudioColor = void 0;
+// Canvas and JavaScript color parsers need concrete colors rather than CSS var().
+// Reuse the computed style for all colors in a draw to avoid repeated style reads.
+const resolveStudioColor = (color, computedStyle) => {
+    return color.replace(/var\((--remotion-studio-[a-z0-9-]+)\)/g, (_, name) => {
+        return computedStyle.getPropertyValue(name).trim();
+    });
+};
+exports.resolveStudioColor = resolveStudioColor;

package/dist/helpers/studio-css-variables.d.ts

@@ -0,0 +1 @@
+export declare const studioCssVariables = "\n:where(:root) {\n  --remotion-studio-black: black;\n  --remotion-studio-white: white;\n  --remotion-studio-red: red;\n  --remotion-studio-transparent: transparent;\n  --remotion-studio-current-color: currentColor;\n  --remotion-studio-background: rgb(31,36,40);\n  --remotion-studio-background-transparent: rgba(31,36,40, 0);\n  --remotion-studio-input-background: #2f363d;\n  --remotion-studio-light-color: #ddd;\n  --remotion-studio-light-text: #A6A7A9;\n  --remotion-studio-ruler-color: #808080;\n  --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);\n  --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);\n  --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);\n  --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);\n  --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);\n  --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);\n  --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);\n  --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);\n  --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);\n  --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);\n  --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);\n  --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);\n  --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);\n  --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);\n  --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);\n  --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);\n  --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);\n  --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);\n  --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);\n  --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);\n  --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);\n  --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);\n  --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);\n  --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);\n  --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);\n  --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);\n  --remotion-studio-fail-color: #ff3232;\n  --remotion-studio-warning-color: #f1c40f;\n  --remotion-studio-blue: #0b84f3;\n  --remotion-studio-blue-hovered: #4da3f7;\n  --remotion-studio-blue-disabled: #284f73;\n  --remotion-studio-unselected-guide: #7e1219;\n  --remotion-studio-selected-guide: #d22d3a;\n  --remotion-studio-line-color: #363A3E;\n  --remotion-studio-timeline-track-separator: #13161B;\n  --remotion-studio-light-gray: #ccc;\n  --remotion-studio-keyboard-shortcut-key-color: #eee;\n  --remotion-studio-notification-background: #111111;\n  --remotion-studio-render-status-background: #222;\n  --remotion-studio-error-code-frame-background: #070707;\n  --remotion-studio-error-code-frame-line-background: #121212;\n  --remotion-studio-error-link-color: #58a6ff;\n  --remotion-studio-info-blue: #60a5fa;\n  --remotion-studio-server-disconnected-background: #e74c3c;\n  --remotion-studio-timeline-background-color: #15181B;\n  --remotion-studio-timeline-negative-start-background-color: #2C2F32;\n  --remotion-studio-timeline-negative-start-border-color: #414446;\n  --remotion-studio-timeline-selected-background-color: #3B3F42;\n  --remotion-studio-timeline-selected-label-background-color: #B0B0B0;\n  --remotion-studio-timeline-blue: #0b84ff;\n  --remotion-studio-timeline-playhead-color: #f02c00;\n  --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);\n  --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);\n  --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);\n  --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);\n  --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);\n  --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);\n  --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);\n  --remotion-studio-color-picker-checker-background-color: var(--remotion-studio-background);\n  --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n  --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);\n  --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);\n  --remotion-studio-focus-color: #555;\n  --remotion-studio-color-picker-checker-color: var(--remotion-studio-white-alpha-15);\n  --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);\n  --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);\n  --remotion-studio-font-family-error-color: #ff8a8a;\n  --remotion-studio-selected-outline-snap-color: #ff00ff;\n  --remotion-studio-prism-text-color: #d4d4d4;\n  --remotion-studio-prism-selection-background: #264f78;\n  --remotion-studio-prism-background: #1e1e1e;\n  --remotion-studio-prism-inline-color: #db4c69;\n  --remotion-studio-prism-keyword-color: #569cd6;\n  --remotion-studio-prism-variable-color: #9cdcfe;\n  --remotion-studio-prism-comment-color: #6a9955;\n  --remotion-studio-prism-number-color: #b5cea8;\n  --remotion-studio-prism-string-color: #ce9178;\n  --remotion-studio-prism-control-flow-color: #c586c0;\n  --remotion-studio-prism-function-color: #dcdcaa;\n  --remotion-studio-prism-regex-color: #d16969;\n  --remotion-studio-prism-class-name-color: #4ec9b0;\n  --remotion-studio-prism-selector-color: #d7ba7d;\n  --remotion-studio-prism-line-highlight-background: #f7ebc6;\n  --remotion-studio-prism-line-highlight-border-color: #f7d87c;\n}\n";

package/dist/helpers/studio-css-variables.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioCssVariables = void 0;
+// Injected in every Studio document, including standalone previews and cursors.
+// Zero specificity lets a theme override defaults regardless of injection order.
+exports.studioCssVariables = `
+:where(:root) {
+  --remotion-studio-black: black;
+  --remotion-studio-white: white;
+  --remotion-studio-red: red;
+  --remotion-studio-transparent: transparent;
+  --remotion-studio-current-color: currentColor;
+  --remotion-studio-background: rgb(31,36,40);
+  --remotion-studio-background-transparent: rgba(31,36,40, 0);
+  --remotion-studio-input-background: #2f363d;
+  --remotion-studio-light-color: #ddd;
+  --remotion-studio-light-text: #A6A7A9;
+  --remotion-studio-ruler-color: #808080;
+  --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);
+  --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);
+  --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);
+  --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);
+  --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);
+  --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);
+  --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);
+  --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);
+  --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);
+  --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);
+  --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);
+  --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);
+  --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);
+  --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);
+  --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);
+  --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);
+  --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);
+  --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);
+  --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);
+  --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);
+  --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);
+  --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);
+  --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);
+  --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);
+  --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);
+  --remotion-studio-fail-color: #ff3232;
+  --remotion-studio-warning-color: #f1c40f;
+  --remotion-studio-blue: #0b84f3;
+  --remotion-studio-blue-hovered: #4da3f7;
+  --remotion-studio-blue-disabled: #284f73;
+  --remotion-studio-unselected-guide: #7e1219;
+  --remotion-studio-selected-guide: #d22d3a;
+  --remotion-studio-line-color: #363A3E;
+  --remotion-studio-timeline-track-separator: #13161B;
+  --remotion-studio-light-gray: #ccc;
+  --remotion-studio-keyboard-shortcut-key-color: #eee;
+  --remotion-studio-notification-background: #111111;
+  --remotion-studio-render-status-background: #222;
+  --remotion-studio-error-code-frame-background: #070707;
+  --remotion-studio-error-code-frame-line-background: #121212;
+  --remotion-studio-error-link-color: #58a6ff;
+  --remotion-studio-info-blue: #60a5fa;
+  --remotion-studio-server-disconnected-background: #e74c3c;
+  --remotion-studio-timeline-background-color: #15181B;
+  --remotion-studio-timeline-negative-start-background-color: #2C2F32;
+  --remotion-studio-timeline-negative-start-border-color: #414446;
+  --remotion-studio-timeline-selected-background-color: #3B3F42;
+  --remotion-studio-timeline-selected-label-background-color: #B0B0B0;
+  --remotion-studio-timeline-blue: #0b84ff;
+  --remotion-studio-timeline-playhead-color: #f02c00;
+  --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);
+  --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);
+  --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);
+  --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);
+  --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);
+  --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);
+  --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);
+  --remotion-studio-color-picker-checker-background-color: var(--remotion-studio-background);
+  --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);
+  --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);
+  --remotion-studio-focus-color: #555;
+  --remotion-studio-color-picker-checker-color: var(--remotion-studio-white-alpha-15);
+  --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);
+  --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);
+  --remotion-studio-font-family-error-color: #ff8a8a;
+  --remotion-studio-selected-outline-snap-color: #ff00ff;
+  --remotion-studio-prism-text-color: #d4d4d4;
+  --remotion-studio-prism-selection-background: #264f78;
+  --remotion-studio-prism-background: #1e1e1e;
+  --remotion-studio-prism-inline-color: #db4c69;
+  --remotion-studio-prism-keyword-color: #569cd6;
+  --remotion-studio-prism-variable-color: #9cdcfe;
+  --remotion-studio-prism-comment-color: #6a9955;
+  --remotion-studio-prism-number-color: #b5cea8;
+  --remotion-studio-prism-string-color: #ce9178;
+  --remotion-studio-prism-control-flow-color: #c586c0;
+  --remotion-studio-prism-function-color: #dcdcaa;
+  --remotion-studio-prism-regex-color: #d16969;
+  --remotion-studio-prism-class-name-color: #4ec9b0;
+  --remotion-studio-prism-selector-color: #d7ba7d;
+  --remotion-studio-prism-line-highlight-background: #f7ebc6;
+  --remotion-studio-prism-line-highlight-border-color: #f7d87c;
+}
+`;

package/dist/helpers/studio-pixel-ratio.d.ts

@@ -0,0 +1 @@
+export declare const getStudioPixelRatio: () => number;

package/dist/helpers/studio-pixel-ratio.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStudioPixelRatio = void 0;
+// Set this to a number temporarily to increase Studio canvas backing resolution.
+const OVERRIDE_PIXEL_RATIO = null;
+const getStudioPixelRatio = () => OVERRIDE_PIXEL_RATIO !== null && OVERRIDE_PIXEL_RATIO !== void 0 ? OVERRIDE_PIXEL_RATIO : window.devicePixelRatio;
+exports.getStudioPixelRatio = getStudioPixelRatio;

package/dist/helpers/timeline-node-path-key.d.ts

@@ -1,3 +1,3 @@
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
-export { timelineSequenceNodePathToKey } from '@remotion/canvas';
+export declare const timelineSequenceNodePathToKey: (key: import("remotion").SequencePropsSubscriptionKey) => string;
 export declare const timelineNodePathInfoToKey: (info: SequenceNodePathInfo) => string;

package/dist/helpers/timeline-node-path-key.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.timelineNodePathInfoToKey = exports.timelineSequenceNodePathToKey = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "timelineSequenceNodePathToKey", { enumerable: true, get: function () { return canvas_1.timelineSequenceNodePathToKey; } });
+const studio_shared_1 = require("@remotion/studio-shared");
+({ timelineSequenceNodePathToKey: exports.timelineSequenceNodePathToKey } = canvas_1.CanvasInternals);
 const timelineNodePathInfoToKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
     info.auxiliaryKeys.join('.'),

package/dist/helpers/use-runtime-values.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRuntimeValueSnapshots = exports.useRuntimeValueSelector = exports.useRuntimeStoreValue = exports.useRuntimeValue = exports.useRuntimeValues = void 0;
+const canvas_1 = require("@remotion/canvas");
 const react_1 = require("react");
 const use_sync_external_store_1 = require("./use-sync-external-store");
 const EMPTY_RUNTIME_VALUES = {};
@@ -51,31 +52,4 @@ const useRuntimeValueSelector = ({ controls, selector, isEqual = Object.is, }) =
     return (0, use_sync_external_store_1.useSyncExternalStore)(selectedStore.subscribe, selectedStore.getSnapshot, selectedStore.getSnapshot);
 };
 exports.useRuntimeValueSelector = useRuntimeValueSelector;
-const useRuntimeValueSnapshots = (controls) => {
-    const stores = (0, react_1.useMemo)(() => controls.map((control) => control.runtimeValues), [controls]);
-    const aggregateStore = (0, react_1.useMemo)(() => {
-        let lastSnapshots = stores.map((store) => store.getSnapshot());
-        const getSnapshot = () => {
-            const nextSnapshots = stores.map((store) => store.getSnapshot());
-            if (nextSnapshots.length === lastSnapshots.length &&
-                nextSnapshots.every((snapshot, index) => snapshot === lastSnapshots[index])) {
-                return lastSnapshots;
-            }
-            lastSnapshots = nextSnapshots;
-            return lastSnapshots;
-        };
-        return {
-            getSnapshot,
-            subscribe: (listener) => {
-                const unsubscribers = stores.map((store) => store.subscribe(listener));
-                return () => {
-                    for (const unsubscribe of unsubscribers) {
-                        unsubscribe();
-                    }
-                };
-            },
-        };
-    }, [stores]);
-    return (0, use_sync_external_store_1.useSyncExternalStore)(aggregateStore.subscribe, aggregateStore.getSnapshot, aggregateStore.getSnapshot);
-};
-exports.useRuntimeValueSnapshots = useRuntimeValueSnapshots;
+({ useCanvasRuntimeValueSnapshots: exports.useRuntimeValueSnapshots } = canvas_1.CanvasInternals);

package/dist/hot-middleware-client/client.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableHotMiddleware = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const error_origin_1 = require("../error-overlay/error-origin");
-const colors_1 = require("../helpers/colors");
 const preview_server_events_1 = require("../helpers/preview-server-events");
 const process_update_1 = require("./process-update");
+// DevTools console styles cannot inherit CSS variables from the page.
+const HOT_MIDDLEWARE_ERROR_STYLE = 'color: #ff0000;';
+const HOT_MIDDLEWARE_WARNING_STYLE = 'color: #999933;';
 function createReporter() {
     const styles = {
-        errors: colors_1.HOT_MIDDLEWARE_ERROR_STYLE,
-        warnings: colors_1.HOT_MIDDLEWARE_WARNING_STYLE,
+        errors: HOT_MIDDLEWARE_ERROR_STYLE,
+        warnings: HOT_MIDDLEWARE_WARNING_STYLE,
     };
     let previousProblems = null;
     function log(type, obj) {

package/dist/icons/align-center-horizontal.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlignCenterHorizontalIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const AlignCenterHorizontalIcon = (props) => {
     var _a;
-    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : colors_1.CURRENT_COLOR;
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
             jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));

package/dist/icons/align-left.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlignLeftIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const AlignLeftIcon = (props) => {
     var _a;
-    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : colors_1.CURRENT_COLOR;
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
             jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));

package/dist/icons/align-right.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlignRightIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const AlignRightIcon = (props) => {
     var _a;
-    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : colors_1.CURRENT_COLOR;
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
             jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));

package/dist/icons/{separation.d.ts → background-removal.d.ts}

@@ -1,4 +1,4 @@
 import type { SVGProps } from 'react';
-export declare const SeparationIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
+export declare const BackgroundRemovalIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
     readonly color?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/background-removal.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundRemovalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license
+const BackgroundRemovalIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M128 64C92.7 64 64 92.7 64 128L64 208C64 216.8 71.2 224 80 224C88.8 224 96 216.8 96 208L96 128C96 110.3 110.3 96 128 96L208 96C216.8 96 224 88.8 224 80C224 71.2 216.8 64 208 64L128 64zM512 64L432 64C423.2 64 416 71.2 416 80C416 88.8 423.2 96 432 96L512 96C529.7 96 544 110.3 544 128L544 208C544 216.8 551.2 224 560 224C568.8 224 576 216.8 576 208L576 128C576 92.7 547.3 64 512 64zM64 512C64 547.3 92.7 576 128 576L208 576C216.8 576 224 568.8 224 560C224 551.2 216.8 544 208 544L128 544C110.3 544 96 529.7 96 512L96 432C96 423.2 88.8 416 80 416C71.2 416 64 423.2 64 432L64 512zM512 576C547.3 576 576 547.3 576 512L576 432C576 423.2 568.8 416 560 416C551.2 416 544 423.2 544 432L544 512C544 529.7 529.7 544 512 544L432 544C423.2 544 416 551.2 416 560C416 568.8 423.2 576 432 576L512 576zM296 288C296 274.7 285.3 264 272 264C258.7 264 248 274.7 248 288C248 301.3 258.7 312 272 312C285.3 312 296 301.3 296 288zM368 312C381.3 312 392 301.3 392 288C392 274.7 381.3 264 368 264C354.7 264 344 274.7 344 288C344 301.3 354.7 312 368 312zM320 192C390.7 192 448 249.3 448 320C448 390.7 390.7 448 320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192zM320 480C408.4 480 480 408.4 480 320C480 231.6 408.4 160 320 160C231.6 160 160 231.6 160 320C160 408.4 231.6 480 320 480zM278.4 352C274 344.4 264.2 341.7 256.5 346.2C248.8 350.7 246.2 360.4 250.7 368.1C264.5 392 290.4 408.1 320 408.1C349.6 408.1 375.5 392 389.3 368.1C393.7 360.4 391.1 350.7 383.5 346.2C375.9 341.7 366.1 344.4 361.6 352C353.3 366.4 337.8 376 320 376C302.2 376 286.7 366.4 278.4 352z" }) }));
+exports.BackgroundRemovalIcon = BackgroundRemovalIcon;

package/dist/icons/snowflake.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SnowflakeIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Font Awesome Free v7.3.1, Copyright 2026 Fonticons, Inc.
-// https://fontawesome.com/license/free
 const SnowflakeIcon = ({ color, ...props }) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M344.1 56C344.1 42.7 333.4 32 320.1 32C306.8 32 296.1 42.7 296.1 56L296.1 134.1L273.1 111.1C263.7 101.7 248.5 101.7 239.2 111.1C229.9 120.5 229.8 135.7 239.2 145L296.2 202L296.2 278.5L230 240.3L209.1 162.5C205.7 149.7 192.5 142.1 179.7 145.5C166.9 148.9 159.2 162 162.7 174.8L171.1 206.3L103.5 167.3C92 160.6 77.3 164.5 70.7 176C64.1 187.5 68 202.2 79.5 208.8L147.1 247.8L115.6 256.2C102.8 259.6 95.2 272.8 98.6 285.6C102 298.4 115.2 306 128 302.6L205.8 281.7L272 319.9L205.8 358.1L128 337.2C115.2 333.8 102 341.4 98.6 354.2C95.2 367 102.8 380.2 115.6 383.6L147.1 392L79.5 431C68 437.8 64.1 452.5 70.7 464C77.3 475.5 92 479.4 103.5 472.8L171.1 433.8L162.7 465.3C159.3 478.1 166.9 491.3 179.7 494.7C192.5 498.1 205.7 490.5 209.1 477.7L230 399.9L296.2 361.7L296.2 438.2L239.2 495.2C229.8 504.6 229.8 519.8 239.2 529.1C248.6 538.4 263.8 538.5 273.1 529.1L296.1 506.1L296.1 584.2C296.1 597.5 306.8 608.2 320.1 608.2C333.4 608.2 344.1 597.5 344.1 584.2L344.1 506.1L367.1 529.1C376.5 538.5 391.7 538.5 401 529.1C410.3 519.7 410.4 504.5 401 495.2L344 438.2L344 361.7L410.2 399.9L431.1 477.7C434.5 490.5 447.7 498.1 460.5 494.7C473.3 491.3 480.9 478.1 477.5 465.3L469.1 433.8L536.7 472.8C548.2 479.4 562.9 475.5 569.5 464C576.1 452.5 572.2 437.8 560.7 431.2L493.1 392.2L524.6 383.8C537.4 380.4 545 367.2 541.6 354.4C538.2 341.6 525 334 512.2 337.4L434.4 358.3L368.2 320.1L434.4 281.9L512.2 302.8C525 306.2 538.2 298.6 541.6 285.8C545 273 537.4 259.8 524.6 256.4L493.1 248L560.7 209C572.2 202.4 576.1 187.7 569.5 176.2C562.9 164.7 548.2 160.8 536.7 167.4L469.1 206.4L477.5 174.9C480.9 162.1 473.3 148.9 460.5 145.5C447.7 142.1 434.5 149.7 431.1 162.5L410.2 240.3L344 278.5L344 202L401 145C410.4 135.6 410.4 120.4 401 111.1C391.6 101.8 376.4 101.7 367.1 111.1L344.1 134.1L344.1 56z" }) }));
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { d: "M320 80V560M112 200L528 440M112 440L528 200M272 112L320 160L368 112M272 528L320 480L368 528M181 184L181 240L128 264M459 184L459 240L512 264M181 456L181 400L128 376M459 456L459 400L512 376", fill: "none", stroke: color, strokeWidth: 28, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 exports.SnowflakeIcon = SnowflakeIcon;

package/dist/icons/{scissors.d.ts → split.d.ts}

@@ -1,5 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
-export declare const ScissorsIcon: React.FC<SVGProps<SVGSVGElement> & {
+export declare const SplitIcon: React.FC<SVGProps<SVGSVGElement> & {
     readonly color: string;
 }>;

package/dist/icons/split.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SplitIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { d: "M152 112h72c26.5 0 48 21.5 48 48v320c0 26.5-21.5 48-48 48h-72M488 112h-72c-26.5 0-48 21.5-48 48v320c0 26.5 21.5 48 48 48h72", fill: "none", stroke: color, strokeWidth: 32, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.SplitIcon = SplitIcon;

package/dist/icons/trash.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TrashIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TrashIcon = ({ color, ...props }) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z" }) }));
+const TrashIcon = ({ color, style, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, style: { overflow: 'visible', ...style }, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z" }) }));
 };
 exports.TrashIcon = TrashIcon;

package/dist/icons/wrap.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const WrapIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/wrap.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WrapIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const WrapIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { d: "M160 112h320c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H160c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48ZM192 272v112c0 35.3 28.7 64 64 64h48M352 368h128c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H352c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48Z", fill: "none", stroke: color, strokeWidth: 28, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.WrapIcon = WrapIcon;