@norskvideo/norsk-studio-built-ins 1.27.0-2026-01-10-23683704 → 1.27.0-2026-01-15-ecb87e67

package/client/info.js

@@ -25992,7 +25992,7 @@ var require_dist6 = __commonJS({
       unstable_createCollection: () => createCollection2
     });
     module.exports = __toCommonJS2(index_exports);
-    var import_react33 = __toESM2(require_react());
+    var import_react34 = __toESM2(require_react());
     var import_react_context = require_dist3();
     var import_react_compose_refs = require_dist4();
     var import_react_slot = require_dist5();
@@ -26006,14 +26006,14 @@ var require_dist6 = __commonJS({
       );
       const CollectionProvider = (props) => {
         const { scope, children } = props;
-        const ref = import_react33.default.useRef(null);
-        const itemMap = import_react33.default.useRef(/* @__PURE__ */ new Map()).current;
+        const ref = import_react34.default.useRef(null);
+        const itemMap = import_react34.default.useRef(/* @__PURE__ */ new Map()).current;
         return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
       };
       CollectionProvider.displayName = PROVIDER_NAME;
       const COLLECTION_SLOT_NAME = name + "CollectionSlot";
       const CollectionSlotImpl = (0, import_react_slot.createSlot)(COLLECTION_SLOT_NAME);
-      const CollectionSlot = import_react33.default.forwardRef(
+      const CollectionSlot = import_react34.default.forwardRef(
         (props, forwardedRef) => {
           const { scope, children } = props;
           const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -26025,13 +26025,13 @@ var require_dist6 = __commonJS({
       const ITEM_SLOT_NAME = name + "CollectionItemSlot";
       const ITEM_DATA_ATTR = "data-radix-collection-item";
       const CollectionItemSlotImpl = (0, import_react_slot.createSlot)(ITEM_SLOT_NAME);
-      const CollectionItemSlot = import_react33.default.forwardRef(
+      const CollectionItemSlot = import_react34.default.forwardRef(
         (props, forwardedRef) => {
           const { scope, children, ...itemData } = props;
-          const ref = import_react33.default.useRef(null);
+          const ref = import_react34.default.useRef(null);
           const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
           const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-          import_react33.default.useEffect(() => {
+          import_react34.default.useEffect(() => {
             context.itemMap.set(ref, { ref, ...itemData });
             return () => void context.itemMap.delete(ref);
           });
@@ -26041,7 +26041,7 @@ var require_dist6 = __commonJS({
       CollectionItemSlot.displayName = ITEM_SLOT_NAME;
       function useCollection(scope) {
         const context = useCollectionContext(name + "CollectionConsumer", scope);
-        const getItems = import_react33.default.useCallback(() => {
+        const getItems = import_react34.default.useCallback(() => {
           const collectionNode = context.collectionRef.current;
           if (!collectionNode) return [];
           const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -62393,6 +62393,15 @@ function info_default6({ defineComponent, mappingsToStreams: mappingsToStreams2,
             global: unique("sourceName")
           }
         },
+        burstProtection: {
+          advanced: true,
+          help: "Drop data until input is completely stable",
+          hint: {
+            defaultValue: false,
+            type: "boolean",
+            optional: true
+          }
+        },
         decodeOutputs: (0, import_client_types3.DecodeOutputsForm)(),
         streamMappings: StreamMappingForm(defaultStreamMapping3, {
           sourceNames: (cfg) => cfg.streamIds ?? []
@@ -73377,13 +73386,17 @@ var import_jsx_runtime55 = __toESM(require_jsx_runtime());
 var import_FaTimes = __toESM(require_FaTimes());
 var import_FaPlay2 = __toESM(require_FaPlay());
 var import_FaCircle = __toESM(require_FaCircle());
-function InlineView18({ state, config }) {
+var import_react25 = __toESM(require_react());
+function InlineView18({ state, config, sendCommand }) {
   const priorityOrder = state.sourcePriority || config.sources;
-  return (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [(0, import_jsx_runtime55.jsx)("h5", { className: "text-gray-900 dark:text-white font-medium", children: "Sources:" }), (0, import_jsx_runtime55.jsxs)("ul", { className: "space-y-2 mt-2", children: [config.sources.map((s, i) => {
+  const handlePriorityChange = (0, import_react25.useCallback)((newOrder) => {
+    sendCommand({ type: "set-priority-order", sources: newOrder });
+  }, [sendCommand]);
+  return (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [(0, import_jsx_runtime55.jsx)("h5", { className: "text-gray-900 dark:text-white font-medium", children: "Sources:" }), (0, import_jsx_runtime55.jsxs)("ul", { className: "space-y-2 mt-2", children: [priorityOrder.map((s, index3) => {
     const isActive = state.activeSource === s;
     const isAvailable = state.availableSources.includes(s);
     const isOffline = !isActive && !isAvailable;
-    const priorityRank = priorityOrder.indexOf(s) + 1;
+    const priorityRank = index3 + 1;
     return (0, import_jsx_runtime55.jsxs)("li", { className: "flex items-center gap-2 w-full", children: [(0, import_jsx_runtime55.jsx)("div", { className: "relative w-4 h-4 flex items-center justify-center flex-shrink-0", children: isOffline ? (
       // Red X for offline sources
       (0, import_jsx_runtime55.jsx)(import_FaTimes.FaTimes, { className: "w-4 h-4 text-red-500" })
@@ -73393,7 +73406,15 @@ function InlineView18({ state, config }) {
     ) : (
       // Green circle for available but not active
       (0, import_jsx_runtime55.jsx)(import_FaCircle.FaCircle, { className: "w-2 h-2 text-green-500" })
-    ) }), (0, import_jsx_runtime55.jsx)("span", { className: "text-gray-900 dark:text-white flex-1", children: s }), (0, import_jsx_runtime55.jsx)("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: priorityRank })] }, i);
+    ) }), (0, import_jsx_runtime55.jsx)("span", { className: "text-gray-900 dark:text-white flex-1", children: s }), (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-1", children: [index3 > 0 && (0, import_jsx_runtime55.jsx)("button", { onClick: () => {
+      const newOrder = [...priorityOrder];
+      [newOrder[index3], newOrder[index3 - 1]] = [newOrder[index3 - 1], newOrder[index3]];
+      handlePriorityChange(newOrder);
+    }, className: "w-4 h-4 flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", title: "Move up", children: (0, import_jsx_runtime55.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", className: "w-3 h-3", children: (0, import_jsx_runtime55.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) }) }), index3 < priorityOrder.length - 1 && (0, import_jsx_runtime55.jsx)("button", { onClick: () => {
+      const newOrder = [...priorityOrder];
+      [newOrder[index3], newOrder[index3 + 1]] = [newOrder[index3 + 1], newOrder[index3]];
+      handlePriorityChange(newOrder);
+    }, className: "w-4 h-4 flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", title: "Move down", children: (0, import_jsx_runtime55.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", className: "w-3 h-3", children: (0, import_jsx_runtime55.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) }) }), (0, import_jsx_runtime55.jsx)("span", { className: "text-gray-500 dark:text-gray-400 text-sm w-4 text-center", children: priorityRank })] })] }, s);
   }), (0, import_jsx_runtime55.jsxs)("li", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime55.jsx)("div", { className: "relative w-4 h-4 flex items-center justify-center", children: state.activeSource === "fallback" ? (
     // Green play button for active fallback
     (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [(0, import_jsx_runtime55.jsx)(import_FaPlay2.FaPlay, { className: "w-3 h-3 text-green-500" }), (0, import_jsx_runtime55.jsx)("div", { className: "absolute inset-0 flex items-center justify-center opacity-30", children: (0, import_jsx_runtime55.jsx)("div", { className: "w-4 h-4 bg-green-500 animate-ping duration-150" }) })] })
@@ -73406,12 +73427,12 @@ var inline_view_default18 = InlineView18;
 
 // build/client/processor.smartSourceSwitch/fullscreen.js
 var import_jsx_runtime56 = __toESM(require_jsx_runtime());
-var import_react25 = __toESM(require_react());
+var import_react26 = __toESM(require_react());
 function FullscreenView2({ state, config, sendCommand }) {
-  const handleMakeActive = (0, import_react25.useCallback)((source) => {
+  const handleMakeActive = (0, import_react26.useCallback)((source) => {
     sendCommand({ type: "make-source-active", source });
   }, [sendCommand]);
-  const handlePriorityChange = (0, import_react25.useCallback)((newOrder) => {
+  const handlePriorityChange = (0, import_react26.useCallback)((newOrder) => {
     sendCommand({ type: "set-priority-order", sources: newOrder });
   }, [sendCommand]);
   const displaySources = config.sources;
@@ -73776,9 +73797,9 @@ var import_config11 = __toESM(require_config2());
 
 // build/client/processor.syncExternalAudio/inline-view.js
 var import_jsx_runtime58 = __toESM(require_jsx_runtime());
-var import_react26 = __toESM(require_react());
+var import_react27 = __toESM(require_react());
 function InlineView19({ state, config, raise }) {
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (raise) {
       raise();
     }
@@ -73790,19 +73811,19 @@ var inline_view_default19 = InlineView19;
 
 // build/client/processor.syncExternalAudio/fullscreen-view.js
 var import_jsx_runtime59 = __toESM(require_jsx_runtime());
-var import_react27 = __toESM(require_react());
+var import_react28 = __toESM(require_react());
 function SyncExternalAudioFullscreenView({ state, config, sendCommand }) {
-  const videoContainerRef = (0, import_react27.useRef)(null);
-  const whepClientRef = (0, import_react27.useRef)(null);
+  const videoContainerRef = (0, import_react28.useRef)(null);
+  const whepClientRef = (0, import_react28.useRef)(null);
   const commentaries = Object.entries(state.commentaries || {});
-  const [selectedCommentary, setSelectedCommentary] = (0, import_react27.useState)(commentaries[0]?.[0] || "");
-  (0, import_react27.useEffect)(() => {
+  const [selectedCommentary, setSelectedCommentary] = (0, import_react28.useState)(commentaries[0]?.[0] || "");
+  (0, import_react28.useEffect)(() => {
     if (commentaries.length > 0 && !state.commentaries[selectedCommentary]) {
       setSelectedCommentary(commentaries[0][0]);
     }
   }, [commentaries, selectedCommentary, state.commentaries]);
   const commentary = state.commentaries[selectedCommentary];
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (commentary?.whepUrl && videoContainerRef.current) {
       if (whepClientRef.current) {
         whepClientRef.current = null;
@@ -74038,11 +74059,11 @@ var summary_view_default11 = SummaryView11;
 
 // build/client/processor.videoCompose/fullscreen.js
 var import_jsx_runtime66 = __toESM(require_jsx_runtime());
-var import_react30 = __toESM(require_react());
+var import_react31 = __toESM(require_react());
 
 // build/client/processor.videoCompose/preset-transition-panel.js
 var import_jsx_runtime63 = __toESM(require_jsx_runtime());
-var import_react28 = __toESM(require_react());
+var import_react29 = __toESM(require_react());
 
 // build/client/processor.videoCompose/presets-metadata.js
 var PRESET_METADATA = {
@@ -74482,7 +74503,7 @@ var PRESETS = {
       }))
     }
   }),
-  quarters: (sources, _config, res) => {
+  quarters: (sources, _config, res, transitionContext) => {
     const half_w = res.width / 2;
     const half_h = res.height / 2;
     const quarters = sources.slice(0, 4);
@@ -74542,22 +74563,78 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            // Reverse: move all to center, fade out all but first
-            {
-              durationMs: 500,
-              layout: {
-                layers: quarters.map((s, i) => ({
-                  sourceName: s,
-                  zIndex: i,
-                  opacity: i === 0 ? 1 : 0,
-                  id: s,
-                  sourceRect: void 0,
-                  destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                }))
-              }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInQuarters = targetSource && quarters.includes(targetSource);
+            if (targetInQuarters) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: quarters.map((s, i) => ({
+                      sourceName: s,
+                      zIndex: i,
+                      opacity: s === targetSource ? 1 : 0,
+                      id: s,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }))
+                  }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                // Step 1: Fade out all quarters
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: quarters.map((s, i) => ({
+                      sourceName: s,
+                      zIndex: i,
+                      opacity: 0,
+                      id: s,
+                      sourceRect: void 0,
+                      destRect: {
+                        x: i % 2 * half_w,
+                        y: Math.floor(i / 2) * half_h,
+                        width: half_w,
+                        height: half_h
+                      }
+                    }))
+                  }
+                },
+                // Step 2: Show target source (if available)
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "mosaic-9": [
             // Quarters → Mosaic-9: move 4 sources to their 3×3 grid positions
             {
@@ -74670,8 +74747,9 @@ var PRESETS = {
       } : void 0
     };
   },
-  pip: (sources, config, res) => {
+  pip: (sources, config, res, transitionContext) => {
     const [mainSource, pipSource] = sources;
+    const pipSources = [mainSource, pipSource].filter(Boolean);
     const pipConfig = config;
     const corner = pipConfig?.corner ?? "bottom-right";
     const pipWidth = pipConfig?.width ?? Math.round(res.width * 0.2);
@@ -74805,37 +74883,91 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            // Reverse: move to center and fade out
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: mainSource,
-                    zIndex: 0,
-                    opacity: 1,
-                    id: mainSource,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: pipSource,
-                    zIndex: 1,
-                    opacity: 0,
-                    id: pipSource,
-                    sourceRect: void 0,
-                    destRect: {
-                      x: res.width / 2 - pipWidth / 2,
-                      y: res.height / 2 - pipHeight / 2,
-                      width: pipWidth,
-                      height: pipHeight
-                    }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInPip = targetSource && pipSources.includes(targetSource);
+            if (targetInPip) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: mainSource,
+                        zIndex: 0,
+                        opacity: mainSource === targetSource ? 1 : 0,
+                        id: mainSource,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      ...pipSource ? [{
+                        sourceName: pipSource,
+                        zIndex: 1,
+                        opacity: pipSource === targetSource ? 1 : 0,
+                        id: pipSource,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      }] : []
+                    ]
                   }
-                ]
-              }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: mainSource,
+                        zIndex: 0,
+                        opacity: 0,
+                        id: mainSource,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      ...pipSource ? [{
+                        sourceName: pipSource,
+                        zIndex: 1,
+                        opacity: 0,
+                        id: pipSource,
+                        sourceRect: void 0,
+                        destRect: { x: pipX, y: pipY, width: pipWidth, height: pipHeight }
+                      }] : []
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "side-by-side": [
             // PiP → Side-by-side: background compresses to left, overlay expands to right
             {
@@ -74923,8 +75055,9 @@ var PRESETS = {
       } : void 0
     };
   },
-  "lower-third": (sources, config, res) => {
+  "lower-third": (sources, config, res, transitionContext) => {
     const [mainSource, lowerThirdSource] = sources;
+    const lowerThirdSources = [mainSource, lowerThirdSource].filter(Boolean);
     const lowerThirdConfig = config;
     const alignment = lowerThirdConfig?.alignment ?? "left";
     const lowerThirdWidth = lowerThirdConfig?.width ?? Math.round(res.width * 0.3);
@@ -75018,32 +75151,91 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            // Reverse: slide down off screen
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: mainSource,
-                    zIndex: 0,
-                    opacity: 1,
-                    id: mainSource,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: lowerThirdSource,
-                    zIndex: 1,
-                    opacity: 1,
-                    id: lowerThirdSource,
-                    sourceRect: void 0,
-                    destRect: { x: lowerThirdX, y: res.height, width: lowerThirdWidth, height: lowerThirdHeight }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInLowerThird = targetSource && lowerThirdSources.includes(targetSource);
+            if (targetInLowerThird) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: mainSource,
+                        zIndex: 0,
+                        opacity: mainSource === targetSource ? 1 : 0,
+                        id: mainSource,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: lowerThirdSource,
+                        zIndex: 1,
+                        opacity: lowerThirdSource === targetSource ? 1 : 0,
+                        id: lowerThirdSource,
+                        sourceRect: void 0,
+                        destRect: lowerThirdSource === targetSource ? { x: 0, y: 0, width: res.width, height: res.height } : { x: lowerThirdX, y: res.height, width: lowerThirdWidth, height: lowerThirdHeight }
+                      }
+                    ]
                   }
-                ]
-              }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: mainSource,
+                        zIndex: 0,
+                        opacity: 0,
+                        id: mainSource,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: lowerThirdSource,
+                        zIndex: 1,
+                        opacity: 0,
+                        id: lowerThirdSource,
+                        sourceRect: void 0,
+                        destRect: { x: lowerThirdX, y: res.height, width: lowerThirdWidth, height: lowerThirdHeight }
+                      }
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           pip: [
             // Lower-third → PiP: move overlay from bottom to corner, resize
             {
@@ -75079,9 +75271,10 @@ var PRESETS = {
       } : void 0
     };
   },
-  "side-by-side": (sources, _config, res) => {
+  "side-by-side": (sources, _config, res, transitionContext) => {
     const [source1, source2] = sources.slice(0, 2);
     const halfWidth = res.width / 2;
+    const sideBySideSources = [source1, source2].filter(Boolean);
     return {
       name: "side-by-side",
       finalConfig: {
@@ -75184,32 +75377,91 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            // Reverse: slide second off and expand first
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: source1,
-                    zIndex: 0,
-                    opacity: 1,
-                    id: source1,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: source2,
-                    zIndex: 1,
-                    opacity: 1,
-                    id: source2,
-                    sourceRect: void 0,
-                    destRect: { x: res.width, y: 0, width: halfWidth, height: res.height }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInSideBySide = targetSource && sideBySideSources.includes(targetSource);
+            if (targetInSideBySide) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: source1,
+                        zIndex: 0,
+                        opacity: 1,
+                        id: source1,
+                        sourceRect: void 0,
+                        destRect: source1 === targetSource ? { x: 0, y: 0, width: res.width, height: res.height } : { x: -halfWidth, y: 0, width: halfWidth, height: res.height }
+                      },
+                      ...source2 ? [{
+                        sourceName: source2,
+                        zIndex: 1,
+                        opacity: 1,
+                        id: source2,
+                        sourceRect: void 0,
+                        destRect: source2 === targetSource ? { x: 0, y: 0, width: res.width, height: res.height } : { x: res.width, y: 0, width: halfWidth, height: res.height }
+                      }] : []
+                    ]
                   }
-                ]
-              }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: source1,
+                        zIndex: 0,
+                        opacity: 0,
+                        id: source1,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: halfWidth, height: res.height }
+                      },
+                      ...source2 ? [{
+                        sourceName: source2,
+                        zIndex: 1,
+                        opacity: 0,
+                        id: source2,
+                        sourceRect: void 0,
+                        destRect: { x: halfWidth, y: 0, width: halfWidth, height: res.height }
+                      }] : []
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           pip: [
             // Side-by-side → PiP: left expands to fullscreen, right shrinks to corner
             {
@@ -75297,13 +75549,14 @@ var PRESETS = {
       } : void 0
     };
   },
-  "lbar": (sources, config, res) => {
+  "lbar": (sources, config, res, transitionContext) => {
     const [videoSource, overlaySource] = sources;
     const { videoWidth, videoHeight, videoX = 50, videoY = 50 } = config;
-    return createLBarPresetDefinition([videoSource, overlaySource], { videoWidth, videoHeight, videoX, videoY }, res);
+    return createLBarPresetDefinition([videoSource, overlaySource], { videoWidth, videoHeight, videoX, videoY }, res, transitionContext);
   },
-  "qr-lbar": (sources, config, res) => {
+  "qr-lbar": (sources, config, res, transitionContext) => {
     const [videoSource, qrSource, overlaySource] = sources;
+    const qrLbarSources = [videoSource, qrSource, overlaySource].filter(Boolean);
     const { qrDurationMs, qrCorner, qrWidth, qrHeight, qrPadding = 20, videoWidth, videoHeight, videoX = 0, videoY = 0 } = config;
     const qrPosition = (() => {
       switch (qrCorner) {
@@ -75423,45 +75676,112 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            // Reverse: expand video, hide overlay and QR
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: overlaySource,
-                    id: "overlay",
-                    zIndex: 0,
-                    opacity: 0,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: videoSource,
-                    id: "video",
-                    zIndex: 1,
-                    opacity: 1,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: qrSource,
-                    id: "qr",
-                    zIndex: 2,
-                    opacity: 0,
-                    sourceRect: void 0,
-                    destRect: { x: qrPosition.x, y: qrPosition.y, width: qrWidth, height: qrHeight }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInQrLbar = targetSource && qrLbarSources.includes(targetSource);
+            if (targetInQrLbar) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: overlaySource,
+                        id: "overlay",
+                        zIndex: 0,
+                        opacity: overlaySource === targetSource ? 1 : 0,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: videoSource,
+                        id: "video",
+                        zIndex: 1,
+                        opacity: videoSource === targetSource ? 1 : 0,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: qrSource,
+                        id: "qr",
+                        zIndex: 2,
+                        opacity: qrSource === targetSource ? 1 : 0,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      }
+                    ]
                   }
-                ]
-              }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: overlaySource,
+                        id: "overlay",
+                        zIndex: 0,
+                        opacity: 0,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: videoSource,
+                        id: "video",
+                        zIndex: 1,
+                        opacity: 0,
+                        sourceRect: void 0,
+                        destRect: { x: videoX, y: videoY, width: videoWidth, height: videoHeight }
+                      },
+                      {
+                        sourceName: qrSource,
+                        id: "qr",
+                        zIndex: 2,
+                        opacity: 0,
+                        sourceRect: void 0,
+                        destRect: { x: qrPosition.x, y: qrPosition.y, width: qrWidth, height: qrHeight }
+                      }
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ]
+          })()
         }
       }
     };
   },
-  "3-split": (sources, _config, res) => {
+  "3-split": (sources, _config, res, transitionContext) => {
     const third_w = res.width / 3;
     const splits = sources.slice(0, 3);
     return {
@@ -75561,21 +75881,76 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            {
-              durationMs: 500,
-              layout: {
-                layers: splits.map((s, i) => ({
-                  sourceName: s,
-                  zIndex: i,
-                  opacity: i === 0 ? 1 : 0,
-                  id: s,
-                  sourceRect: void 0,
-                  destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                }))
-              }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInSplits = targetSource && splits.includes(targetSource);
+            if (targetInSplits) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: splits.map((s, i) => ({
+                      sourceName: s,
+                      zIndex: i,
+                      opacity: s === targetSource ? 1 : 0,
+                      id: s,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }))
+                  }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: splits.map((s, i) => ({
+                      sourceName: s,
+                      zIndex: i,
+                      opacity: 0,
+                      id: s,
+                      sourceRect: void 0,
+                      destRect: {
+                        x: i * third_w,
+                        y: 0,
+                        width: third_w,
+                        height: res.height
+                      }
+                    }))
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "side-by-side": [
             // 3-split → Side-by-side: expand first 2 from 33.33% to 50%, fade out third
             {
@@ -75644,9 +76019,10 @@ var PRESETS = {
       } : void 0
     };
   },
-  "2-crop": (sources, config, res) => {
+  "2-crop": (sources, config, res, transitionContext) => {
     const [left, right] = sources.slice(0, 2);
     const half_w = res.width / 2;
+    const cropSources = [left, right].filter(Boolean);
     const crops = config.crops || {};
     return {
       name: "2-crop",
@@ -75722,31 +76098,91 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: left,
-                    zIndex: 0,
-                    opacity: 1,
-                    id: left,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: right,
-                    zIndex: 1,
-                    opacity: 0,
-                    id: right,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInCrops = targetSource && cropSources.includes(targetSource);
+            if (targetInCrops) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: left,
+                        zIndex: 0,
+                        opacity: left === targetSource ? 1 : 0,
+                        id: left,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: right,
+                        zIndex: 1,
+                        opacity: right === targetSource ? 1 : 0,
+                        id: right,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      }
+                    ]
                   }
-                ]
-              }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: left,
+                        zIndex: 0,
+                        opacity: 0,
+                        id: left,
+                        sourceRect: crops[left] || void 0,
+                        destRect: { x: 0, y: 0, width: half_w, height: res.height }
+                      },
+                      {
+                        sourceName: right,
+                        zIndex: 1,
+                        opacity: 0,
+                        id: right,
+                        sourceRect: crops[right] || void 0,
+                        destRect: { x: half_w, y: 0, width: half_w, height: res.height }
+                      }
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "3-crop": [
             // 2-crop → 3-crop: compress both from 50% to 33.33% width, adjust crop
             {
@@ -75803,7 +76239,7 @@ var PRESETS = {
       } : void 0
     };
   },
-  "3-crop": (sources, config, res) => {
+  "3-crop": (sources, config, res, transitionContext) => {
     const third_w = res.width / 3;
     const cropSources = sources.slice(0, 3);
     const cropConfig = config.crops || {};
@@ -75861,21 +76297,76 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            {
-              durationMs: 500,
-              layout: {
-                layers: cropSources.map((s, i) => ({
-                  sourceName: s,
-                  zIndex: i,
-                  opacity: i === 0 ? 1 : 0,
-                  id: s,
-                  sourceRect: void 0,
-                  destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                }))
-              }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInCrops = targetSource && cropSources.includes(targetSource);
+            if (targetInCrops) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: cropSources.map((s, i) => ({
+                      sourceName: s,
+                      zIndex: i,
+                      opacity: s === targetSource ? 1 : 0,
+                      id: s,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }))
+                  }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: cropSources.map((s, i) => ({
+                      sourceName: s,
+                      zIndex: i,
+                      opacity: 0,
+                      id: s,
+                      sourceRect: cropConfig[s] || void 0,
+                      destRect: {
+                        x: i * third_w,
+                        y: 0,
+                        width: third_w,
+                        height: res.height
+                      }
+                    }))
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "2-crop": [
             // 3-crop → 2-crop: expand first 2 from 33.33% to 50%, adjust crop, fade out 3rd
             {
@@ -75909,8 +76400,9 @@ var PRESETS = {
       } : void 0
     };
   },
-  "2-crop-left": (sources, config, res) => {
+  "2-crop-left": (sources, config, res, transitionContext) => {
     const [background, left, right] = sources.slice(0, 3);
+    const cropLeftSources = [background, left, right].filter(Boolean);
     const cropConfig = config.crops || {};
     const leftW = res.width * 0.34;
     const rightW = res.width * 0.66666;
@@ -76015,39 +76507,107 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: background,
-                    zIndex: 0,
-                    opacity: 1,
-                    id: background,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: left,
-                    zIndex: 1,
-                    opacity: 0,
-                    id: left,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: right,
-                    zIndex: 2,
-                    opacity: 0,
-                    id: right,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInCrops = targetSource && cropLeftSources.includes(targetSource);
+            if (targetInCrops) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: background,
+                        zIndex: 0,
+                        opacity: background === targetSource ? 1 : 0,
+                        id: background,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: left,
+                        zIndex: 1,
+                        opacity: left === targetSource ? 1 : 0,
+                        id: left,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: right,
+                        zIndex: 2,
+                        opacity: right === targetSource ? 1 : 0,
+                        id: right,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      }
+                    ]
                   }
-                ]
-              }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: background,
+                        zIndex: 0,
+                        opacity: 0,
+                        id: background,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: left,
+                        zIndex: 1,
+                        opacity: 0,
+                        id: left,
+                        sourceRect: cropConfig[left] || void 0,
+                        destRect: { x: 0, y: yPos, width: leftW, height: boxH }
+                      },
+                      {
+                        sourceName: right,
+                        zIndex: 2,
+                        opacity: 0,
+                        id: right,
+                        sourceRect: void 0,
+                        destRect: { x: rightX, y: yPos, width: rightW, height: boxH }
+                      }
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "2-crop-right": [
             // 2-crop-left → 2-crop-right: swap positions and crop states
             {
@@ -76088,8 +76648,9 @@ var PRESETS = {
       } : void 0
     };
   },
-  "2-crop-right": (sources, config, res) => {
+  "2-crop-right": (sources, config, res, transitionContext) => {
     const [background, left, right] = sources.slice(0, 3);
+    const cropRightSources = [background, left, right].filter(Boolean);
     const cropConfig = config.crops || {};
     const leftW = res.width * 0.67;
     const rightW = res.width * 0.33333;
@@ -76194,39 +76755,107 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: background,
-                    zIndex: 0,
-                    opacity: 1,
-                    id: background,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: left,
-                    zIndex: 1,
-                    opacity: 0,
-                    id: left,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  {
-                    sourceName: right,
-                    zIndex: 2,
-                    opacity: 0,
-                    id: right,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInCrops = targetSource && cropRightSources.includes(targetSource);
+            if (targetInCrops) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: background,
+                        zIndex: 0,
+                        opacity: background === targetSource ? 1 : 0,
+                        id: background,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: left,
+                        zIndex: 1,
+                        opacity: left === targetSource ? 1 : 0,
+                        id: left,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: right,
+                        zIndex: 2,
+                        opacity: right === targetSource ? 1 : 0,
+                        id: right,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      }
+                    ]
                   }
-                ]
-              }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: background,
+                        zIndex: 0,
+                        opacity: 0,
+                        id: background,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      {
+                        sourceName: left,
+                        zIndex: 1,
+                        opacity: 0,
+                        id: left,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: yPos, width: leftW, height: boxH }
+                      },
+                      {
+                        sourceName: right,
+                        zIndex: 2,
+                        opacity: 0,
+                        id: right,
+                        sourceRect: cropConfig[right] || void 0,
+                        destRect: { x: rightX, y: yPos, width: rightW, height: boxH }
+                      }
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "2-crop-left": [
             // 2-crop-right → 2-crop-left: swap positions and crop states
             {
@@ -76267,9 +76896,10 @@ var PRESETS = {
       } : void 0
     };
   },
-  "5-split": (sources, config, res) => {
+  "5-split": (sources, config, res, transitionContext) => {
     const [background, ...vidSources] = sources.slice(0, 6);
     const fiveSources = vidSources.slice(0, 5);
+    const allSplitSources = [background, ...fiveSources].filter(Boolean);
     const cropConfig = config.crops || {};
     const boxW = res.width * 0.34;
     const boxH = res.height * 0.5;
@@ -76361,36 +76991,101 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            {
-              durationMs: 500,
-              layout: {
-                layers: [
-                  {
-                    sourceName: background,
-                    zIndex: 0,
-                    opacity: 1,
-                    id: background,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  },
-                  ...fiveSources.map((s, i) => ({
-                    sourceName: s,
-                    zIndex: i + 1,
-                    opacity: 0,
-                    id: s,
-                    sourceRect: void 0,
-                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                  }))
-                ]
-              }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInSplit = targetSource && allSplitSources.includes(targetSource);
+            if (targetInSplit) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: background,
+                        zIndex: 0,
+                        opacity: background === targetSource ? 1 : 0,
+                        id: background,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      ...fiveSources.map((s, i) => ({
+                        sourceName: s,
+                        zIndex: i + 1,
+                        opacity: s === targetSource ? 1 : 0,
+                        id: s,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      }))
+                    ]
+                  }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: [
+                      {
+                        sourceName: background,
+                        zIndex: 0,
+                        opacity: 0,
+                        id: background,
+                        sourceRect: void 0,
+                        destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                      },
+                      ...fiveSources.map((s, i) => {
+                        const isTopRow = i < 2;
+                        const xPos = isTopRow ? topPositions[i] : bottomPositions[i - 2];
+                        const yPosCalc = isTopRow ? topY : bottomY;
+                        return {
+                          sourceName: s,
+                          zIndex: i + 1,
+                          opacity: 0,
+                          id: s,
+                          sourceRect: cropConfig[s] || void 0,
+                          destRect: { x: xPos - boxW / 2, y: yPosCalc - boxH / 2, width: boxW, height: boxH }
+                        };
+                      })
+                    ]
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ]
+          })()
         }
       } : void 0
     };
   },
-  "6-split": (sources, config, res) => {
+  "6-split": (sources, config, res, transitionContext) => {
     const sixSources = sources.slice(0, 6);
     const cropConfig = config.crops || {};
     const boxW = res.width * 0.34;
@@ -76454,21 +77149,77 @@ var PRESETS = {
           ]
         },
         to: {
-          fullscreen: [
-            {
-              durationMs: 500,
-              layout: {
-                layers: sixSources.map((s, i) => ({
-                  sourceName: s,
-                  zIndex: i,
-                  opacity: i === 0 ? 1 : 0,
-                  id: s,
-                  sourceRect: void 0,
-                  destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                }))
-              }
+          fullscreen: (() => {
+            const targetSources = transitionContext?.targetSources ?? [];
+            const targetSource = targetSources[0];
+            const targetInSplit = targetSource && sixSources.includes(targetSource);
+            if (targetInSplit) {
+              return [
+                {
+                  durationMs: 500,
+                  layout: {
+                    layers: sixSources.map((s, i) => ({
+                      sourceName: s,
+                      zIndex: i,
+                      opacity: s === targetSource ? 1 : 0,
+                      id: s,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }))
+                  }
+                },
+                // Final step: target source only
+                {
+                  durationMs: 0,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }
+              ];
+            } else {
+              return [
+                {
+                  durationMs: 250,
+                  layout: {
+                    layers: sixSources.map((s, i) => {
+                      const row = Math.floor(i / 3);
+                      const col = i % 3;
+                      const yPos = row === 0 ? topY : bottomY;
+                      const xPos = xPositions[col];
+                      return {
+                        sourceName: s,
+                        zIndex: i,
+                        opacity: 0,
+                        id: s,
+                        sourceRect: cropConfig[s] || void 0,
+                        destRect: { x: xPos - boxW / 2, y: yPos - boxH / 2, width: boxW, height: boxH }
+                      };
+                    })
+                  }
+                },
+                ...targetSource ? [{
+                  durationMs: 250,
+                  layout: {
+                    layers: [{
+                      sourceName: targetSource,
+                      zIndex: 0,
+                      opacity: 1,
+                      id: targetSource,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }]
+                  }
+                }] : []
+              ];
             }
-          ],
+          })(),
           "mosaic-9": [
             // 6-split → mosaic-9: move to grid positions, fade to no crop
             {
@@ -76503,8 +77254,9 @@ var PRESETS = {
     };
   }
 };
-function createLBarPresetDefinition(sources, config, res) {
+function createLBarPresetDefinition(sources, config, res, transitionContext) {
   const [videoSource, overlaySource] = sources;
+  const lbarSources = [videoSource, overlaySource].filter(Boolean);
   const { videoWidth, videoHeight, videoX = 0, videoY = 0 } = config;
   return {
     name: "lbar",
@@ -76584,32 +77336,91 @@ function createLBarPresetDefinition(sources, config, res) {
       },
       // Transition from L-bar to fullscreen (reverse)
       to: {
-        fullscreen: [
-          // Step 1: Expand video and hide overlay (500ms)
-          {
-            durationMs: 500,
-            layout: {
-              layers: [
-                {
-                  sourceName: overlaySource,
-                  id: "overlay",
-                  zIndex: 0,
-                  opacity: 0,
-                  sourceRect: void 0,
-                  destRect: { x: 0, y: 0, width: res.width, height: res.height }
-                },
-                {
-                  sourceName: videoSource,
-                  id: "video",
-                  zIndex: 1,
-                  opacity: 1,
-                  sourceRect: void 0,
-                  destRect: { x: 0, y: 0, width: res.width, height: res.height }
+        fullscreen: (() => {
+          const targetSources = transitionContext?.targetSources ?? [];
+          const targetSource = targetSources[0];
+          const targetInLbar = targetSource && lbarSources.includes(targetSource);
+          if (targetInLbar) {
+            return [
+              {
+                durationMs: 500,
+                layout: {
+                  layers: [
+                    {
+                      sourceName: overlaySource,
+                      id: "overlay",
+                      zIndex: 0,
+                      opacity: overlaySource === targetSource ? 1 : 0,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    },
+                    {
+                      sourceName: videoSource,
+                      id: "video",
+                      zIndex: 1,
+                      opacity: videoSource === targetSource ? 1 : 0,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    }
+                  ]
                 }
-              ]
-            }
+              },
+              // Final step: target source only
+              {
+                durationMs: 0,
+                layout: {
+                  layers: [{
+                    sourceName: targetSource,
+                    zIndex: 0,
+                    opacity: 1,
+                    id: targetSource,
+                    sourceRect: void 0,
+                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                  }]
+                }
+              }
+            ];
+          } else {
+            return [
+              {
+                durationMs: 250,
+                layout: {
+                  layers: [
+                    {
+                      sourceName: overlaySource,
+                      id: "overlay",
+                      zIndex: 0,
+                      opacity: 0,
+                      sourceRect: void 0,
+                      destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                    },
+                    {
+                      sourceName: videoSource,
+                      id: "video",
+                      zIndex: 1,
+                      opacity: 0,
+                      sourceRect: void 0,
+                      destRect: { x: videoX, y: videoY, width: videoWidth, height: videoHeight }
+                    }
+                  ]
+                }
+              },
+              ...targetSource ? [{
+                durationMs: 250,
+                layout: {
+                  layers: [{
+                    sourceName: targetSource,
+                    zIndex: 0,
+                    opacity: 1,
+                    id: targetSource,
+                    sourceRect: void 0,
+                    destRect: { x: 0, y: 0, width: res.width, height: res.height }
+                  }]
+                }
+              }] : []
+            ];
           }
-        ]
+        })()
       }
     }
   };
@@ -76651,16 +77462,16 @@ function PresetVisualPreview({ layers, size: size4 = "small", referenceResolutio
 
 // build/client/processor.videoCompose/preset-transition-panel.js
 function PresetTransitionPanel({ state, sendCommand, selectedPreset, onSelectPreset, sourceSelection, onSourceSelectionChange, presetConfig, onPresetConfigChange }) {
-  const [transition, setTransition] = (0, import_react28.useState)({
+  const [transition, setTransition] = (0, import_react29.useState)({
     durationMs: 1e3,
     easing: "ease_in_out"
   });
-  const lastPresetRef = (0, import_react28.useRef)(null);
-  const loadingSceneRef = (0, import_react28.useRef)(false);
+  const lastPresetRef = (0, import_react29.useRef)(null);
+  const loadingSceneRef = (0, import_react29.useRef)(false);
   const metadata = selectedPreset ? PRESET_METADATA[selectedPreset] : null;
   const reference = state.sources.find((s) => s.sourceName === state.reference);
-  const onlineSourceNames = (0, import_react28.useMemo)(() => state.sources.filter((s) => s.status === "online").map((s) => s.sourceName).join(","), [state.sources]);
-  (0, import_react28.useEffect)(() => {
+  const onlineSourceNames = (0, import_react29.useMemo)(() => state.sources.filter((s) => s.status === "online").map((s) => s.sourceName).join(","), [state.sources]);
+  (0, import_react29.useEffect)(() => {
     if (!selectedPreset || !metadata)
       return;
     if (lastPresetRef.current === selectedPreset)
@@ -76693,13 +77504,13 @@ function PresetTransitionPanel({ state, sendCommand, selectedPreset, onSelectPre
       onPresetConfigChange(defaults2);
     }
   }, [metadata, onPresetConfigChange, onSourceSelectionChange, onlineSourceNames, reference?.resolution, selectedPreset, state.sources]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!selectedPreset || sourceSelection.length === 0)
       return;
     const storageKey = `videoCompose.preset.${selectedPreset}.sources`;
     localStorage.setItem(storageKey, JSON.stringify(sourceSelection));
   }, [selectedPreset, sourceSelection]);
-  const handlePreview = (0, import_react28.useCallback)(() => {
+  const handlePreview = (0, import_react29.useCallback)(() => {
     if (!selectedPreset || !metadata)
       return;
     const layout = {
@@ -76713,11 +77524,20 @@ function PresetTransitionPanel({ state, sendCommand, selectedPreset, onSelectPre
       layout
     });
   }, [selectedPreset, metadata, sourceSelection, presetConfig, sendCommand]);
-  const handleCancelPreview = (0, import_react28.useCallback)(() => {
+  const handleCancelPreview = (0, import_react29.useCallback)(() => {
     sendCommand({ type: "disable-preview" });
   }, [sendCommand]);
-  const handleApplyPreview = (0, import_react28.useCallback)(() => {
-    const hasOrchestration = selectedPreset && metadata && PRESETS[selectedPreset]?.(sourceSelection, presetConfig, { width: 1920, height: 1080 })?.orchestrations;
+  const hasOrchestration = (0, import_react29.useMemo)(() => {
+    if (!selectedPreset)
+      return false;
+    try {
+      const presetDef = PRESETS[selectedPreset]?.(sourceSelection, presetConfig, { width: 1920, height: 1080 });
+      return !!presetDef?.orchestrations;
+    } catch {
+      return false;
+    }
+  }, [selectedPreset, sourceSelection, presetConfig]);
+  const handleApplyPreview = (0, import_react29.useCallback)(() => {
     sendCommand({
       type: "apply-preview",
       // Only pass transition if there's no orchestration
@@ -76728,8 +77548,8 @@ function PresetTransitionPanel({ state, sendCommand, selectedPreset, onSelectPre
         }
       }
     });
-  }, [sendCommand, transition.durationMs, transition.easing, selectedPreset, metadata, sourceSelection, presetConfig]);
-  const handleApplyDirect = (0, import_react28.useCallback)(() => {
+  }, [sendCommand, transition.durationMs, transition.easing, hasOrchestration]);
+  const handleApplyDirect = (0, import_react29.useCallback)(() => {
     if (!selectedPreset || !metadata)
       return;
     const layout = {
@@ -76738,7 +77558,6 @@ function PresetTransitionPanel({ state, sendCommand, selectedPreset, onSelectPre
       sourceSelection: sourceSelection.length > 0 ? sourceSelection : void 0,
       ...metadata.hasConfig ? { config: presetConfig } : {}
     };
-    const hasOrchestration = PRESETS[selectedPreset]?.(sourceSelection, presetConfig, { width: 1920, height: 1080 })?.orchestrations;
     sendCommand({
       type: "update-layout",
       layout,
@@ -76750,8 +77569,8 @@ function PresetTransitionPanel({ state, sendCommand, selectedPreset, onSelectPre
         }
       }
     });
-  }, [selectedPreset, metadata, sourceSelection, presetConfig, sendCommand, transition]);
-  const referenceResolution = (0, import_react28.useMemo)(() => {
+  }, [selectedPreset, metadata, sourceSelection, presetConfig, sendCommand, transition, hasOrchestration]);
+  const referenceResolution = (0, import_react29.useMemo)(() => {
     const reference2 = state.sources.find((s) => s.sourceName === state.reference);
     return reference2?.resolution;
   }, [state.sources, state.reference]);
@@ -76776,7 +77595,7 @@ function SceneCard({ scene, isActive, onSelect, onDelete }) {
   }, className: "absolute top-1 right-1 p-1 rounded bg-red-600 text-white hover:bg-red-700\n                   opacity-0 group-hover:opacity-100 transition-opacity", title: "Delete scene", children: (0, import_jsx_runtime63.jsx)("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: (0, import_jsx_runtime63.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
 }
 function PresetCard({ presetKey, metadata, onClick, referenceResolution }) {
-  const previewLayout = (0, import_react28.useMemo)(() => {
+  const previewLayout = (0, import_react29.useMemo)(() => {
     if (!referenceResolution)
       return null;
     const generator = PRESETS[presetKey];
@@ -76794,7 +77613,7 @@ function PresetCard({ presetKey, metadata, onClick, referenceResolution }) {
   return (0, import_jsx_runtime63.jsxs)("button", { className: "p-1.5 rounded border border-gray-300 dark:border-gray-600\n                 hover:border-blue-500 dark:hover:border-blue-400\n                 hover:bg-blue-50 dark:hover:bg-blue-900/20\n                 bg-white dark:bg-gray-800\n                 text-left transition-colors flex flex-col gap-1.5", onClick, children: [(0, import_jsx_runtime63.jsx)("div", { className: "w-full flex justify-center", children: previewLayout && referenceResolution ? (0, import_jsx_runtime63.jsx)(PresetVisualPreview, { layers: previewLayout.layers, size: "small", referenceResolution }) : (0, import_jsx_runtime63.jsx)("div", { className: "w-16 h-9 bg-gray-700 dark:bg-gray-900 rounded flex items-center justify-center", children: (0, import_jsx_runtime63.jsx)("span", { className: "text-xs text-gray-400", children: "?" }) }) }), (0, import_jsx_runtime63.jsxs)("div", { className: "w-full", children: [(0, import_jsx_runtime63.jsx)("h3", { className: "font-medium text-xs text-gray-900 dark:text-white truncate text-center", children: metadata.name }), (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center justify-center gap-1 mt-0.5", children: [(0, import_jsx_runtime63.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: metadata.minSources === metadata.maxSources ? `${metadata.minSources} src${metadata.minSources > 1 ? "s" : ""}` : `${metadata.minSources}-${metadata.maxSources} srcs` }), metadata.hasConfig && (0, import_jsx_runtime63.jsx)("span", { className: "text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300\n                           px-1 py-0.5 rounded", children: "Config" })] })] })] });
 }
 function SaveSceneForm({ onSave, onCancel }) {
-  const [name, setName] = (0, import_react28.useState)("");
+  const [name, setName] = (0, import_react29.useState)("");
   return (0, import_jsx_runtime63.jsxs)("div", { className: "space-y-2 p-3 bg-gray-50 dark:bg-gray-900 rounded", children: [(0, import_jsx_runtime63.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Scene Name" }), (0, import_jsx_runtime63.jsx)("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter scene name...", className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600\n                   rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white", autoFocus: true }), (0, import_jsx_runtime63.jsxs)("div", { className: "flex gap-2", children: [(0, import_jsx_runtime63.jsx)("button", { onClick: () => {
     if (name.trim()) {
       onSave(name.trim());
@@ -76807,9 +77626,29 @@ function SaveSceneForm({ onSave, onCancel }) {
 }
 function PresetConfiguration(props) {
   const { metadata, onPreview, onCancelPreview, onApplyPreview, onApplyDirect, onCancel, isTransitioning, isPreviewActive, sourceSelection, state: _state, sendCommand } = props;
-  const [activeTab, setActiveTab] = (0, import_react28.useState)("sources");
-  const [showSaveForm, setShowSaveForm] = (0, import_react28.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react29.useState)("sources");
+  const [showSaveForm, setShowSaveForm] = (0, import_react29.useState)(false);
+  const [isPending, setIsPending] = (0, import_react29.useState)(false);
+  (0, import_react29.useEffect)(() => {
+    if (isTransitioning) {
+      setIsPending(false);
+    }
+  }, [isTransitioning]);
+  (0, import_react29.useEffect)(() => {
+    if (isPending) {
+      const timeout = setTimeout(() => setIsPending(false), 1e4);
+      return () => clearTimeout(timeout);
+    }
+  }, [isPending]);
   const canPreview = sourceSelection.length >= metadata.minSources;
+  const handleApplyPreviewWithPending = (0, import_react29.useCallback)(() => {
+    setIsPending(true);
+    onApplyPreview();
+  }, [onApplyPreview]);
+  const handleApplyDirectWithPending = (0, import_react29.useCallback)(() => {
+    setIsPending(true);
+    onApplyDirect();
+  }, [onApplyDirect]);
   const handleSaveScene = (name) => {
     const layout = {
       type: "preset",
@@ -76820,7 +77659,7 @@ function PresetConfiguration(props) {
     sendCommand({ type: "create-scene", name, layout });
     setShowSaveForm(false);
   };
-  return (0, import_jsx_runtime63.jsxs)("div", { className: "h-full flex flex-col", children: [(0, import_jsx_runtime63.jsxs)("div", { className: "p-6 border-b border-gray-200 dark:border-gray-700", children: [(0, import_jsx_runtime63.jsx)("button", { onClick: onCancel, className: "text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700\n                     dark:hover:text-blue-300 mb-2", children: "\u2190 Back to Presets" }), (0, import_jsx_runtime63.jsx)("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: metadata.name }), (0, import_jsx_runtime63.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: metadata.description })] }), (0, import_jsx_runtime63.jsx)("div", { className: "flex-1 overflow-y-auto", children: metadata.hasConfig ? (0, import_jsx_runtime63.jsxs)("div", { children: [(0, import_jsx_runtime63.jsx)("div", { className: "border-b border-gray-200 dark:border-gray-700 px-6", children: (0, import_jsx_runtime63.jsxs)("div", { className: "flex gap-6", children: [(0, import_jsx_runtime63.jsx)("button", { onClick: () => setActiveTab("sources"), className: `py-3 border-b-2 font-medium text-sm transition-colors ${activeTab === "sources" ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"}`, children: "Source Ordering" }), (0, import_jsx_runtime63.jsx)("button", { onClick: () => setActiveTab("config"), className: `py-3 border-b-2 font-medium text-sm transition-colors ${activeTab === "config" ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"}`, children: "Configuration" })] }) }), (0, import_jsx_runtime63.jsx)("div", { className: "p-6", children: activeTab === "sources" ? (0, import_jsx_runtime63.jsx)(SourceOrderingPanel, { ...props }) : (0, import_jsx_runtime63.jsx)(ConfigPanel, { presetKey: props.presetKey, config: props.config, onConfigChange: props.onConfigChange }) })] }) : (0, import_jsx_runtime63.jsx)("div", { className: "p-6", children: (0, import_jsx_runtime63.jsx)(SourceOrderingPanel, { ...props }) }) }), (0, import_jsx_runtime63.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-700 p-6 space-y-4", children: [showSaveForm ? (0, import_jsx_runtime63.jsx)(SaveSceneForm, { onSave: handleSaveScene, onCancel: () => setShowSaveForm(false) }) : (0, import_jsx_runtime63.jsx)("button", { onClick: () => setShowSaveForm(true), disabled: !canPreview, className: "w-full px-4 py-2 text-sm rounded border-2 border-dashed\n                       border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400\n                       hover:border-green-500 hover:text-green-600 dark:hover:border-green-400\n                       dark:hover:text-green-400 transition-colors\n                       disabled:opacity-50 disabled:cursor-not-allowed", children: "Save as Scene" }), (0, import_jsx_runtime63.jsx)(PreviewControls, { transition: props.transition, onTransitionChange: props.onTransitionChange, onPreview, onCancelPreview, onApplyPreview, onApplyDirect, isTransitioning, isPreviewActive, canPreview, presetKey: props.presetKey, sourceSelection, config: props.config })] })] });
+  return (0, import_jsx_runtime63.jsxs)("div", { className: "h-full flex flex-col", children: [(0, import_jsx_runtime63.jsxs)("div", { className: "p-6 border-b border-gray-200 dark:border-gray-700", children: [(0, import_jsx_runtime63.jsx)("button", { onClick: onCancel, className: "text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700\n                     dark:hover:text-blue-300 mb-2", children: "\u2190 Back to Presets" }), (0, import_jsx_runtime63.jsx)("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: metadata.name }), (0, import_jsx_runtime63.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400 mt-1", children: metadata.description })] }), (0, import_jsx_runtime63.jsx)("div", { className: "flex-1 overflow-y-auto", children: metadata.hasConfig ? (0, import_jsx_runtime63.jsxs)("div", { children: [(0, import_jsx_runtime63.jsx)("div", { className: "border-b border-gray-200 dark:border-gray-700 px-6", children: (0, import_jsx_runtime63.jsxs)("div", { className: "flex gap-6", children: [(0, import_jsx_runtime63.jsx)("button", { onClick: () => setActiveTab("sources"), className: `py-3 border-b-2 font-medium text-sm transition-colors ${activeTab === "sources" ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"}`, children: "Source Ordering" }), (0, import_jsx_runtime63.jsx)("button", { onClick: () => setActiveTab("config"), className: `py-3 border-b-2 font-medium text-sm transition-colors ${activeTab === "config" ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"}`, children: "Configuration" })] }) }), (0, import_jsx_runtime63.jsx)("div", { className: "p-6", children: activeTab === "sources" ? (0, import_jsx_runtime63.jsx)(SourceOrderingPanel, { ...props }) : (0, import_jsx_runtime63.jsx)(ConfigPanel, { presetKey: props.presetKey, config: props.config, onConfigChange: props.onConfigChange }) })] }) : (0, import_jsx_runtime63.jsx)("div", { className: "p-6", children: (0, import_jsx_runtime63.jsx)(SourceOrderingPanel, { ...props }) }) }), (0, import_jsx_runtime63.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-700 p-6 space-y-4", children: [showSaveForm ? (0, import_jsx_runtime63.jsx)(SaveSceneForm, { onSave: handleSaveScene, onCancel: () => setShowSaveForm(false) }) : (0, import_jsx_runtime63.jsx)("button", { onClick: () => setShowSaveForm(true), disabled: !canPreview, className: "w-full px-4 py-2 text-sm rounded border-2 border-dashed\n                       border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400\n                       hover:border-green-500 hover:text-green-600 dark:hover:border-green-400\n                       dark:hover:text-green-400 transition-colors\n                       disabled:opacity-50 disabled:cursor-not-allowed", children: "Save as Scene" }), (0, import_jsx_runtime63.jsx)(PreviewControls, { transition: props.transition, onTransitionChange: props.onTransitionChange, onPreview, onCancelPreview, onApplyPreview: handleApplyPreviewWithPending, onApplyDirect: handleApplyDirectWithPending, isTransitioning, isPreviewActive, canPreview, presetKey: props.presetKey, sourceSelection, config: props.config, isPending })] })] });
 }
 function SourceOrderingPanel({ metadata, sourceSelection, onSourceSelectionChange, availableSources }) {
   const usedSourceNames = new Set(sourceSelection);
@@ -76878,8 +77717,9 @@ function ConfigPanel({ presetKey, config, onConfigChange }) {
   }
   return null;
 }
-function PreviewControls({ transition, onTransitionChange, onPreview, onCancelPreview, onApplyPreview, onApplyDirect, isTransitioning, isPreviewActive, canPreview, presetKey, sourceSelection, config }) {
-  const hasOrchestration = (0, import_react28.useMemo)(() => {
+function PreviewControls({ transition, onTransitionChange, onPreview, onCancelPreview, onApplyPreview, onApplyDirect, isTransitioning, isPreviewActive, canPreview, presetKey, sourceSelection, config, isPending }) {
+  const isBusy = isPending || isTransitioning;
+  const hasOrchestration = (0, import_react29.useMemo)(() => {
     try {
       const presetDef = PRESETS[presetKey]?.(sourceSelection, config, { width: 1920, height: 1080 });
       return !!presetDef?.orchestrations;
@@ -76893,22 +77733,22 @@ function PreviewControls({ transition, onTransitionChange, onPreview, onCancelPr
   }), className: "w-full accent-blue-600" }), (0, import_jsx_runtime63.jsxs)("div", { className: "flex justify-between text-xs text-gray-500", children: [(0, import_jsx_runtime63.jsx)("span", { children: "Instant" }), (0, import_jsx_runtime63.jsx)("span", { children: "3s" })] })] }), (0, import_jsx_runtime63.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime63.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Easing" }), (0, import_jsx_runtime63.jsxs)("select", { value: transition.easing, onChange: (e) => onTransitionChange({
     ...transition,
     easing: e.target.value
-  }), className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600\n                         rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white", children: [(0, import_jsx_runtime63.jsx)("option", { value: "linear", children: "Linear" }), (0, import_jsx_runtime63.jsx)("option", { value: "ease_in", children: "Ease In" }), (0, import_jsx_runtime63.jsx)("option", { value: "ease_out", children: "Ease Out" }), (0, import_jsx_runtime63.jsx)("option", { value: "ease_in_out", children: "Ease In Out" })] })] })] }), (0, import_jsx_runtime63.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime63.jsx)("button", { className: "w-full px-4 py-3 rounded-lg font-medium\n                     bg-green-600 text-white hover:bg-green-700\n                     disabled:opacity-50 disabled:cursor-not-allowed\n                     transition-colors", onClick: isPreviewActive ? onApplyPreview : onApplyDirect, disabled: !canPreview || isTransitioning, children: isTransitioning ? "Transitioning..." : "Take to Live" }), isPreviewActive ? (0, import_jsx_runtime63.jsx)("button", { className: "w-full px-4 py-2 rounded-lg font-medium\n                       bg-red-600 text-white hover:bg-red-700\n                       transition-colors", onClick: onCancelPreview, children: "Cancel Preview" }) : (0, import_jsx_runtime63.jsx)("button", { className: "w-full px-4 py-2 rounded-lg font-medium\n                       border border-blue-600 text-blue-600 dark:text-blue-400\n                       hover:bg-blue-50 dark:hover:bg-blue-900/20\n                       disabled:opacity-50 disabled:cursor-not-allowed\n                       transition-colors", onClick: onPreview, disabled: !canPreview || isTransitioning, children: "Preview Video" })] })] });
+  }), className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600\n                         rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white", children: [(0, import_jsx_runtime63.jsx)("option", { value: "linear", children: "Linear" }), (0, import_jsx_runtime63.jsx)("option", { value: "ease_in", children: "Ease In" }), (0, import_jsx_runtime63.jsx)("option", { value: "ease_out", children: "Ease Out" }), (0, import_jsx_runtime63.jsx)("option", { value: "ease_in_out", children: "Ease In Out" })] })] })] }), (0, import_jsx_runtime63.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime63.jsx)("button", { className: "w-full px-4 py-3 rounded-lg font-medium\n                     bg-green-600 text-white hover:bg-green-700\n                     disabled:opacity-50 disabled:cursor-not-allowed\n                     transition-colors", onClick: isPreviewActive ? onApplyPreview : onApplyDirect, disabled: !canPreview || isBusy, children: isBusy ? "Transitioning..." : "Take to Live" }), isPreviewActive ? (0, import_jsx_runtime63.jsx)("button", { className: "w-full px-4 py-2 rounded-lg font-medium\n                       bg-red-600 text-white hover:bg-red-700\n                       transition-colors", onClick: onCancelPreview, children: "Cancel Preview" }) : (0, import_jsx_runtime63.jsx)("button", { className: "w-full px-4 py-2 rounded-lg font-medium\n                       border border-blue-600 text-blue-600 dark:text-blue-400\n                       hover:bg-blue-50 dark:hover:bg-blue-900/20\n                       disabled:opacity-50 disabled:cursor-not-allowed\n                       transition-colors", onClick: onPreview, disabled: !canPreview || isBusy, children: "Preview Video" })] })] });
 }
 
 // build/client/processor.videoCompose/webrtc-preview.js
 var import_jsx_runtime64 = __toESM(require_jsx_runtime());
-var import_react29 = __toESM(require_react());
+var import_react30 = __toESM(require_react());
 var import_webrtc_client2 = __toESM(require_webrtc_client());
 function WebRTCPreview({ url, id, onPlaying }) {
-  const [_client, setClient] = (0, import_react29.useState)(null);
-  const [error, setError] = (0, import_react29.useState)(null);
-  const [connecting, setConnecting] = (0, import_react29.useState)(false);
-  const onPlayingRef = (0, import_react29.useRef)(onPlaying);
-  (0, import_react29.useEffect)(() => {
+  const [_client, setClient] = (0, import_react30.useState)(null);
+  const [error, setError] = (0, import_react30.useState)(null);
+  const [connecting, setConnecting] = (0, import_react30.useState)(false);
+  const onPlayingRef = (0, import_react30.useRef)(onPlaying);
+  (0, import_react30.useEffect)(() => {
     onPlayingRef.current = onPlaying;
   }, [onPlaying]);
-  const createClient = (0, import_react29.useCallback)((url2) => {
+  const createClient = (0, import_react30.useCallback)((url2) => {
     console.log(`[WebRTCPreview ${id}] Creating WHEP client for URL:`, url2);
     setConnecting(true);
     const client = new import_webrtc_client2.WhepClient({
@@ -76949,7 +77789,7 @@ function WebRTCPreview({ url, id, onPlaying }) {
     });
     return client;
   }, [id]);
-  const cleanupClient = (0, import_react29.useCallback)(() => {
+  const cleanupClient = (0, import_react30.useCallback)(() => {
     setClient((client) => {
       if (!client)
         return null;
@@ -76966,7 +77806,7 @@ function WebRTCPreview({ url, id, onPlaying }) {
     setError(null);
     setConnecting(false);
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (url) {
       setError(null);
       const client = createClient(url);
@@ -77012,7 +77852,9 @@ function VisualPreview({ layout, sourceJpegUrls, reference, title }) {
       height: `${heightPercent}%`,
       opacity: layer.opacity,
       zIndex: layer.zIndex
-    }, children: [jpegUrl ? (0, import_jsx_runtime65.jsx)("img", { src: jpegUrl, alt: layer.sourceName, className: "w-full h-full object-cover", onError: (e) => {
+    }, children: [jpegUrl ? (0, import_jsx_runtime65.jsx)("img", { src: jpegUrl, alt: layer.sourceName, className: "w-full h-full object-cover", loading: "lazy", decoding: "async", onLoad: (e) => {
+      e.currentTarget.style.display = "";
+    }, onError: (e) => {
       e.currentTarget.style.display = "none";
     } }) : (0, import_jsx_runtime65.jsx)("div", { className: "w-full h-full bg-gray-700 flex items-center justify-center", children: (0, import_jsx_runtime65.jsxs)("div", { className: "text-center p-2", children: [(0, import_jsx_runtime65.jsx)("div", { className: "text-xs text-gray-400 truncate", children: layer.sourceName }), (0, import_jsx_runtime65.jsx)("div", { className: "text-xs text-gray-500 mt-1", children: "No preview" })] }) }), (0, import_jsx_runtime65.jsx)("div", { className: "absolute top-1 left-1 px-1.5 py-0.5\n                                bg-black/60 rounded text-xs text-white\n                                font-mono", children: layer.sourceName }), (0, import_jsx_runtime65.jsx)("div", { className: "absolute top-1 right-1 w-5 h-5\n                                bg-blue-600 rounded-full flex items-center justify-center\n                                text-xs text-white font-semibold", children: layer.zIndex }), layer.opacity < 1 && (0, import_jsx_runtime65.jsxs)("div", { className: "absolute bottom-1 right-1 px-1.5 py-0.5\n                                  bg-black/60 rounded text-xs text-white", children: [(layer.opacity * 100).toFixed(0), "%"] })] }, idx);
   }) })] });
@@ -77020,19 +77862,34 @@ function VisualPreview({ layout, sourceJpegUrls, reference, title }) {
 
 // build/client/processor.videoCompose/fullscreen.js
 function FullscreenView3({ state, config: _config, sendCommand }) {
-  const [showVideoPreview, setShowVideoPreview] = (0, import_react30.useState)(false);
-  const [pendingPreviewCommand, setPendingPreviewCommand] = (0, import_react30.useState)(null);
-  const [selectedPreset, setSelectedPreset] = (0, import_react30.useState)(null);
-  const [sourceSelection, setSourceSelection] = (0, import_react30.useState)([]);
-  const [presetConfig, setPresetConfig] = (0, import_react30.useState)({});
-  const prevConfigRef = (0, import_react30.useRef)({ selectedPreset, sourceSelection, presetConfig });
-  const handleSourceSelectionChange = (0, import_react30.useCallback)((sources) => {
+  const [showVideoPreview, setShowVideoPreview] = (0, import_react31.useState)(false);
+  const [pendingPreviewCommand, setPendingPreviewCommand] = (0, import_react31.useState)(null);
+  const [selectedPreset, setSelectedPreset] = (0, import_react31.useState)(null);
+  const [sourceSelection, setSourceSelection] = (0, import_react31.useState)([]);
+  const [presetConfig, setPresetConfig] = (0, import_react31.useState)({});
+  const prevConfigRef = (0, import_react31.useRef)({ selectedPreset, sourceSelection, presetConfig });
+  const [throttledJpegUrls, setThrottledJpegUrls] = (0, import_react31.useState)({});
+  const lastJpegUpdateRef = (0, import_react31.useRef)(0);
+  (0, import_react31.useEffect)(() => {
+    const now = Date.now();
+    if (now - lastJpegUpdateRef.current > 2e3) {
+      lastJpegUpdateRef.current = now;
+      setThrottledJpegUrls(state.sourceJpegUrls ?? {});
+    }
+  }, [state.sourceJpegUrls]);
+  const [imagesReady, setImagesReady] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
+    const timer = setTimeout(() => setImagesReady(true), 100);
+    return () => clearTimeout(timer);
+  }, []);
+  const onlineSourceCount = (0, import_react31.useMemo)(() => state.sources.filter((s) => s.status === "online").length, [state.sources]);
+  const handleSourceSelectionChange = (0, import_react31.useCallback)((sources) => {
     setSourceSelection(sources);
   }, []);
-  const handlePresetConfigChange = (0, import_react30.useCallback)((config) => {
+  const handlePresetConfigChange = (0, import_react31.useCallback)((config) => {
     setPresetConfig(config);
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const prev = prevConfigRef.current;
     const configChanged = prev.selectedPreset !== selectedPreset || JSON.stringify(prev.sourceSelection) !== JSON.stringify(sourceSelection) || JSON.stringify(prev.presetConfig) !== JSON.stringify(presetConfig);
     if (configChanged) {
@@ -77044,23 +77901,20 @@ function FullscreenView3({ state, config: _config, sendCommand }) {
       prevConfigRef.current = { selectedPreset, sourceSelection, presetConfig };
     }
   }, [selectedPreset, sourceSelection, presetConfig, state.previewMode, sendCommand]);
-  const handlePreviewPlaying = (0, import_react30.useCallback)(() => {
+  const handlePreviewPlaying = (0, import_react31.useCallback)(() => {
     console.log("[FullscreenView] Preview video started playing, sending pending command");
     if (pendingPreviewCommand) {
       sendCommand(pendingPreviewCommand);
       setPendingPreviewCommand(null);
     }
   }, [pendingPreviewCommand, sendCommand]);
-  const handleSendCommand = (0, import_react30.useCallback)((cmd) => {
+  const handleSendCommand = (0, import_react31.useCallback)((cmd) => {
     if (cmd.type === "enable-preview") {
-      console.log("[FullscreenView] Deferring enable-preview until video starts playing");
       setShowVideoPreview(true);
       setPendingPreviewCommand(cmd);
       setTimeout(() => {
-        console.log("[FullscreenView] Timeout reached, checking if command still pending");
         setPendingPreviewCommand((pending) => {
           if (pending) {
-            console.log("[FullscreenView] Sending command due to timeout");
             sendCommand(pending);
             return null;
           }
@@ -77075,22 +77929,26 @@ function FullscreenView3({ state, config: _config, sendCommand }) {
       sendCommand(cmd);
     }
   }, [sendCommand]);
-  const previewLayout = (() => {
+  const referenceResolution = (0, import_react31.useMemo)(() => {
+    const ref = state.sources.find((s) => s.sourceName === state.reference);
+    return ref?.resolution;
+  }, [state.sources, state.reference]);
+  const referenceResolutionKey = referenceResolution ? `${referenceResolution.width}x${referenceResolution.height}` : null;
+  const previewLayout = (0, import_react31.useMemo)(() => {
     if (!selectedPreset || sourceSelection.length === 0)
       return void 0;
-    const reference = state.sources.find((s) => s.sourceName === state.reference);
-    if (!reference?.resolution)
+    if (!referenceResolution)
       return void 0;
     const generator = PRESETS[selectedPreset];
     if (!generator)
       return void 0;
     try {
-      const presetDef = generator(sourceSelection, presetConfig, { width: reference.resolution.width, height: reference.resolution.height });
+      const presetDef = generator(sourceSelection, presetConfig, { width: referenceResolution.width, height: referenceResolution.height });
       return presetDef.finalConfig;
     } catch (_e) {
       return void 0;
     }
-  })();
+  }, [selectedPreset, sourceSelection, presetConfig, referenceResolutionKey]);
   if (!state) {
     return (0, import_jsx_runtime66.jsx)("div", { className: "flex h-full items-center justify-center bg-gray-50 dark:bg-gray-900", children: (0, import_jsx_runtime66.jsxs)("div", { className: "text-center", children: [(0, import_jsx_runtime66.jsx)("div", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", children: "Loading Video Compose..." }), (0, import_jsx_runtime66.jsx)("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Connecting to component state..." })] }) });
   }
@@ -77101,7 +77959,7 @@ function FullscreenView3({ state, config: _config, sendCommand }) {
   }, sendCommand: handleSendCommand, selectedPreset, onSelectPreset: setSelectedPreset, sourceSelection, onSourceSelectionChange: handleSourceSelectionChange, presetConfig, onPresetConfigChange: handlePresetConfigChange }) }), (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 flex flex-col", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 flex gap-6 p-6 min-h-0", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [(0, import_jsx_runtime66.jsx)("div", { className: "flex items-center justify-between mb-4", children: (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-3", children: [(0, import_jsx_runtime66.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: showVideoPreview ? "Preview Transition" : "Preview Output" }), state.previewTransitioning && (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-blue-600 dark:text-blue-400 font-medium", children: "Transitioning..." })] }) }), showVideoPreview ? (0, import_jsx_runtime66.jsx)(WebRTCPreview, { url: state.previewPreviewUrl, id: `${_config.id}-preview`, onPlaying: handlePreviewPlaying }, state.previewPreviewUrl) : (0, import_jsx_runtime66.jsx)("div", { className: "flex-1 flex items-center justify-center bg-gray-900 rounded-lg overflow-hidden", children: (0, import_jsx_runtime66.jsx)("div", { className: "w-full h-full flex items-center justify-center p-4", children: (0, import_jsx_runtime66.jsx)("div", { className: "w-full max-w-full max-h-full", children: (0, import_jsx_runtime66.jsx)(VisualPreview, { layout: (
     // Show preset being built, or preview composition, or current layout
     previewLayout ? previewLayout : state.previewMode && state.previewResolvedLayout ? state.previewResolvedLayout : state.resolvedLayout
-  ), sourceJpegUrls: state.sourceJpegUrls, reference: state.sources.find((s) => s.sourceName === state.reference)?.resolution, title: previewLayout ? "Preset Preview (Building...)" : state.previewMode ? "Preview Composition" : "Current Layout" }) }) }) })] }), (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, import_jsx_runtime66.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Live Output" }), state.transitioning && (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-blue-600 dark:text-blue-400 font-medium", children: "Transitioning..." }), !state.previewUrl && !state.referenceAvailable && (0, import_jsx_runtime66.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Waiting for reference stream..." })] }), (0, import_jsx_runtime66.jsx)(WebRTCPreview, { url: state.previewUrl, id: `${_config.id}-live` })] })] }), (0, import_jsx_runtime66.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-700\n                        bg-white dark:bg-gray-800 h-64 flex flex-col", children: [(0, import_jsx_runtime66.jsx)("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700", children: (0, import_jsx_runtime66.jsx)("h2", { className: "text-lg font-bold text-gray-900 dark:text-white", children: "Status" }) }), (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime66.jsx)("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: "Sources" }), (0, import_jsx_runtime66.jsxs)("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [state.sources.filter((s) => s.status === "online").length, " / ", state.sources.length, " online"] })] }), (0, import_jsx_runtime66.jsx)("div", { className: "space-y-1", children: state.sources.map((source, i) => (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-2 p-1.5 rounded bg-gray-50 dark:bg-gray-900", children: [(0, import_jsx_runtime66.jsx)("div", { className: `w-1.5 h-1.5 rounded-full flex-shrink-0 ${source.status === "online" ? "bg-live" : "bg-offline"}` }), (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, import_jsx_runtime66.jsxs)("div", { className: `text-xs font-medium ${source.sourceName === state.reference ? "text-blue-600 dark:text-blue-400" : "text-gray-900 dark:text-white"}`, children: [source.sourceName, source.sourceName === state.reference && " (ref)"] }), source.resolution && (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [source.resolution.width, "\xD7", source.resolution.height, source.frameRate && ` @ ${source.frameRate.frames}/${source.frameRate.seconds}fps`] })] })] }, i)) })] }), state.resolvedLayout && state.resolvedLayout.layers.length > 0 && (0, import_jsx_runtime66.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime66.jsxs)("div", { children: [(0, import_jsx_runtime66.jsx)("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: "Active Layout" }), (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs text-gray-600 dark:text-gray-400 mt-0.5", children: [state.layout?.type === "preset" ? state.layout.preset : "Custom", " \u2022 ", state.resolvedLayout.layers.length, " ", state.resolvedLayout.layers.length === 1 ? "layer" : "layers"] })] }), (0, import_jsx_runtime66.jsx)("div", { className: "space-y-1", children: state.resolvedLayout.layers.map((layer, i) => (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs p-1.5 rounded bg-gray-50 dark:bg-gray-900", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "font-medium text-gray-900 dark:text-white", children: ["L", layer.zIndex, ": ", layer.sourceName] }), (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [(layer.opacity * 100).toFixed(0), "%", layer.destRect && (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [" \u2022 (", layer.destRect.x.toFixed(0), ", ", layer.destRect.y.toFixed(0), ")"] })] })] }, i)) })] }), state.transitioning && (0, import_jsx_runtime66.jsxs)("div", { className: "space-y-1", children: [(0, import_jsx_runtime66.jsx)("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: "Transition" }), (0, import_jsx_runtime66.jsx)("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: "In progress..." })] })] })] })] })] });
+  ), sourceJpegUrls: imagesReady ? throttledJpegUrls : {}, reference: referenceResolution, title: previewLayout ? "Preset Preview (Building...)" : state.previewMode ? "Preview Composition" : "Current Layout" }) }) }) })] }), (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, import_jsx_runtime66.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Live Output" }), state.transitioning && (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-blue-600 dark:text-blue-400 font-medium", children: "Transitioning..." }), !state.previewUrl && !state.referenceAvailable && (0, import_jsx_runtime66.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Waiting for reference stream..." })] }), (0, import_jsx_runtime66.jsx)(WebRTCPreview, { url: state.previewUrl, id: `${_config.id}-live` })] })] }), (0, import_jsx_runtime66.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-700\n                        bg-white dark:bg-gray-800 h-64 flex flex-col", children: [(0, import_jsx_runtime66.jsx)("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700", children: (0, import_jsx_runtime66.jsx)("h2", { className: "text-lg font-bold text-gray-900 dark:text-white", children: "Status" }) }), (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime66.jsx)("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: "Sources" }), (0, import_jsx_runtime66.jsxs)("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [onlineSourceCount, " / ", state.sources.length, " online"] })] }), (0, import_jsx_runtime66.jsx)("div", { className: "space-y-1", children: state.sources.map((source, i) => (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-2 p-1.5 rounded bg-gray-50 dark:bg-gray-900", children: [(0, import_jsx_runtime66.jsx)("div", { className: `w-1.5 h-1.5 rounded-full flex-shrink-0 ${source.status === "online" ? "bg-live" : "bg-offline"}` }), (0, import_jsx_runtime66.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, import_jsx_runtime66.jsxs)("div", { className: `text-xs font-medium ${source.sourceName === state.reference ? "text-blue-600 dark:text-blue-400" : "text-gray-900 dark:text-white"}`, children: [source.sourceName, source.sourceName === state.reference && " (ref)"] }), source.resolution && (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [source.resolution.width, "\xD7", source.resolution.height, source.frameRate && ` @ ${source.frameRate.frames}/${source.frameRate.seconds}fps`] })] })] }, i)) })] }), state.resolvedLayout && state.resolvedLayout.layers.length > 0 && (0, import_jsx_runtime66.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime66.jsxs)("div", { children: [(0, import_jsx_runtime66.jsx)("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: "Active Layout" }), (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs text-gray-600 dark:text-gray-400 mt-0.5", children: [state.layout?.type === "preset" ? state.layout.preset : "Custom", " \u2022 ", state.resolvedLayout.layers.length, " ", state.resolvedLayout.layers.length === 1 ? "layer" : "layers"] })] }), (0, import_jsx_runtime66.jsx)("div", { className: "space-y-1", children: state.resolvedLayout.layers.map((layer, i) => (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs p-1.5 rounded bg-gray-50 dark:bg-gray-900", children: [(0, import_jsx_runtime66.jsxs)("div", { className: "font-medium text-gray-900 dark:text-white", children: ["L", layer.zIndex, ": ", layer.sourceName] }), (0, import_jsx_runtime66.jsxs)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [(layer.opacity * 100).toFixed(0), "%", layer.destRect && (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [" \u2022 (", layer.destRect.x.toFixed(0), ", ", layer.destRect.y.toFixed(0), ")"] })] })] }, i)) })] }), state.transitioning && (0, import_jsx_runtime66.jsxs)("div", { className: "space-y-1", children: [(0, import_jsx_runtime66.jsx)("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: "Transition" }), (0, import_jsx_runtime66.jsx)("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: "In progress..." })] })] })] })] })] });
 }
 var fullscreen_default2 = FullscreenView3;
 
@@ -77733,7 +78591,7 @@ var import_util15 = __toESM(require_util());
 
 // build/client/processor.webRtcDuplex/fullscreen.js
 var import_jsx_runtime71 = __toESM(require_jsx_runtime());
-var import_react31 = __toESM(require_react());
+var import_react32 = __toESM(require_react());
 var import_webrtc_client3 = __toESM(require_webrtc_client());
 var DuplexWhepClient = class extends NorskWhepClient {
   showVideo;
@@ -77774,11 +78632,11 @@ var DuplexWhipClient = class extends import_webrtc_client3.WhipClient {
   }
 };
 function FullscreenView4({ state, config }) {
-  const [client, setClient] = (0, import_react31.useState)(void 0);
-  const [sender, setSender] = (0, import_react31.useState)(void 0);
-  const container = (0, import_react31.useRef)(null);
-  const button = (0, import_react31.useRef)(null);
-  const go = (0, import_react31.useCallback)(async () => {
+  const [client, setClient] = (0, import_react32.useState)(void 0);
+  const [sender, setSender] = (0, import_react32.useState)(void 0);
+  const container = (0, import_react32.useRef)(null);
+  const button = (0, import_react32.useRef)(null);
+  const go = (0, import_react32.useCallback)(async () => {
     if (!state.publishUrl)
       return;
     if (!client && state.outputUrl && container.current) {
@@ -78070,7 +78928,7 @@ function assertUnreachable30(_) {
 
 // build/client/util.stats.latency/inline-view.js
 var import_jsx_runtime73 = __toESM(require_jsx_runtime());
-var import_react32 = __toESM(require_react());
+var import_react33 = __toESM(require_react());
 
 // ../../node_modules/chart.js/auto/auto.js
 Chart.register(...registerables);
@@ -78078,8 +78936,8 @@ var auto_default = Chart;
 
 // build/client/util.stats.latency/inline-view.js
 function InlineView22({ state, config: _2 }) {
-  const chartContainer = (0, import_react32.useRef)(null);
-  const [chartControl, setChartControl] = (0, import_react32.useState)(void 0);
+  const chartContainer = (0, import_react33.useRef)(null);
+  const [chartControl, setChartControl] = (0, import_react33.useState)(void 0);
   function makeDataSet(key, color2, values) {
     return {
       label: key,
@@ -78090,13 +78948,13 @@ function InlineView22({ state, config: _2 }) {
       data: values
     };
   }
-  const makeData = (0, import_react32.useCallback)((state2) => {
+  const makeData = (0, import_react33.useCallback)((state2) => {
     return {
       labels: new Array(state2.values.length).fill(0).map((_, i) => i).map((_) => ""),
       datasets: [makeDataSet("latency", "rgba(255, 0, 0, 255)", state2.values)]
     };
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!chartContainer.current)
       return;
     auto_default.defaults.color = "#FFF";
@@ -78134,7 +78992,7 @@ function InlineView22({ state, config: _2 }) {
       chart.update();
     }, 100);
   }, [chartContainer, makeData, state]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!chartControl)
       return;
     chartControl.data = makeData(state);