@norskvideo/norsk-studio-built-ins 1.27.0-2026-01-10-23683704 → 1.27.0-2026-01-14-d7f304fc

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 = {
@@ -76651,16 +76672,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 +76714,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 +76734,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 +76758,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 +76768,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 +76779,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 +76805,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 +76823,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 +76836,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 +76869,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 +76927,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 +76943,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 +76999,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 +77016,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 +77062,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 +77072,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 +77111,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 +77139,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 +77169,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 +77801,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 +77842,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 +78138,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 +78146,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 +78158,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 +78202,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);