@norskvideo/norsk-studio-built-ins 1.12.0-2025-02-12-84fa1941 → 1.12.0-2025-02-13-2521ce04

package/client/info.js

@@ -570,6 +570,23 @@ var init_fullscreen = __esm({
   }
 });
 
+// build/output.autoCmaf/inline-view.js
+var inline_view_exports3 = {};
+__export(inline_view_exports3, {
+  default: () => inline_view_default3
+});
+function InlineView5({ state }) {
+  return (0, import_jsx_runtime8.jsx)("div", { className: "-output", children: state.enabled ? (0, import_jsx_runtime8.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }) : (0, import_jsx_runtime8.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
+}
+var import_jsx_runtime8, inline_view_default3;
+var init_inline_view3 = __esm({
+  "build/output.autoCmaf/inline-view.js"() {
+    "use strict";
+    import_jsx_runtime8 = __toESM(require_jsx_runtime());
+    inline_view_default3 = InlineView5;
+  }
+});
+
 // build/output.autoCmaf/form-views.js
 var form_views_exports = {};
 __export(form_views_exports, {
@@ -577,16 +594,16 @@ __export(form_views_exports, {
   SegmentConfiguration: () => SegmentConfiguration
 });
 function S3Destination(destination) {
-  return (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime8.jsx)("div", { className: "col-span-1", children: "Host" }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-2", children: destination.host }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-1", children: "Path" }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-2", children: destination.prefix }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-1", children: "Include Ads" }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-2", children: destination.includeAdInsertions ? "yes" : "no" })] });
+  return (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime9.jsx)("div", { className: "col-span-1", children: "Host" }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-2", children: destination.host }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-1", children: "Path" }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-2", children: destination.prefix }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-1", children: "Include Ads" }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-2", children: destination.includeAdInsertions ? "yes" : "no" })] });
 }
 function SegmentConfiguration(cfg) {
-  return (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime8.jsx)("div", { className: "col-span-1", children: "Segments" }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-2", children: cfg.defaultSegmentCount == 0 ? "all" : cfg.defaultSegmentCount }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-1", children: "Segment Target" }), (0, import_jsx_runtime8.jsxs)("div", { className: "col-span-2", children: [cfg.targetSegmentDuration, "s"] }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-1", children: "Part Target" }), (0, import_jsx_runtime8.jsxs)("div", { className: "col-span-2", children: [cfg.targetPartDuration, "s"] }), (0, import_jsx_runtime8.jsx)("div", { className: "col-span-1", children: "Retention" }), (0, import_jsx_runtime8.jsxs)("div", { className: "col-span-2", children: [cfg.retentionPeriod, "s"] })] });
+  return (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime9.jsx)("div", { className: "col-span-1", children: "Segments" }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-2", children: cfg.defaultSegmentCount == 0 ? "all" : cfg.defaultSegmentCount }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-1", children: "Segment Target" }), (0, import_jsx_runtime9.jsxs)("div", { className: "col-span-2", children: [cfg.targetSegmentDuration, "s"] }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-1", children: "Part Target" }), (0, import_jsx_runtime9.jsxs)("div", { className: "col-span-2", children: [cfg.targetPartDuration, "s"] }), (0, import_jsx_runtime9.jsx)("div", { className: "col-span-1", children: "Retention" }), (0, import_jsx_runtime9.jsxs)("div", { className: "col-span-2", children: [cfg.retentionPeriod, "s"] })] });
 }
-var import_jsx_runtime8;
+var import_jsx_runtime9;
 var init_form_views = __esm({
   "build/output.autoCmaf/form-views.js"() {
     "use strict";
-    import_jsx_runtime8 = __toESM(require_jsx_runtime());
+    import_jsx_runtime9 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -598,11 +615,11 @@ var require_webrtc_client = __commonJS({
 });
 
 // build/output.preview/inline-view.js
-var inline_view_exports3 = {};
-__export(inline_view_exports3, {
-  default: () => inline_view_default3
+var inline_view_exports4 = {};
+__export(inline_view_exports4, {
+  default: () => inline_view_default4
 });
-function InlineView5({ state, config, raise }) {
+function InlineView6({ state, config, raise }) {
   const url = state.url;
   const id = config.id;
   const [showPreview, setShowPreview] = (0, import_react6.useState)(config.showPreview ?? true);
@@ -644,7 +661,7 @@ function InlineView5({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react6.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: "..." });
+    return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: "..." });
   function percentage(levels) {
     if (!levels) {
       return 0;
@@ -654,37 +671,73 @@ function InlineView5({ state, config, raise }) {
     const snapped = Math.floor(capped * 10) * 10;
     return Math.max(0, 100 - snapped);
   }
-  return (0, import_jsx_runtime9.jsxs)("div", { className: "preview-outer-container", children: [(0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime9.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime9.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime9.jsx)("div", { className: "preview-video", id: `preview-${id}`, children: (0, import_jsx_runtime9.jsx)("style", { children: `
+  return (0, import_jsx_runtime10.jsxs)("div", { className: "preview-outer-container", children: [(0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime10.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime10.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime10.jsx)("div", { className: "preview-video", id: `preview-${id}`, children: (0, import_jsx_runtime10.jsx)("style", { children: `
             #preview-${id} video::-webkit-media-controls-play-button { display: none; },
-          ` }) }) : (0, import_jsx_runtime9.jsx)("div", { className: "preview-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" }), (0, import_jsx_runtime9.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime9.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
+          ` }) }) : (0, import_jsx_runtime10.jsx)("div", { className: "preview-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" }), (0, import_jsx_runtime10.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime10.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
 }
-var import_jsx_runtime9, import_react6, import_webrtc_client, inline_view_default3;
-var init_inline_view3 = __esm({
+var import_jsx_runtime10, import_react6, import_webrtc_client, inline_view_default4;
+var init_inline_view4 = __esm({
   "build/output.preview/inline-view.js"() {
     "use strict";
-    import_jsx_runtime9 = __toESM(require_jsx_runtime());
+    import_jsx_runtime10 = __toESM(require_jsx_runtime());
     import_react6 = __toESM(require_react());
     import_webrtc_client = __toESM(require_webrtc_client());
-    inline_view_default3 = InlineView5;
+    inline_view_default4 = InlineView6;
+  }
+});
+
+// build/output.rtmp/summary-view.js
+var summary_view_exports4 = {};
+__export(summary_view_exports4, {
+  default: () => summary_view_default4
+});
+function SummaryView6({ state, sendCommand }) {
+  const handleEnableOutput = () => {
+    void enableOutput();
+  };
+  const enableOutput = async () => {
+    sendCommand({
+      type: "enable-output"
+    });
+  };
+  const handleDisableOutput = () => {
+    void disableOutput();
+  };
+  const disableOutput = async () => {
+    sendCommand({
+      type: "disable-output"
+    });
+  };
+  return (0, import_jsx_runtime11.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime11.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime11.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime11.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime11.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime11.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
+}
+var import_jsx_runtime11, summary_view_default4;
+var init_summary_view4 = __esm({
+  "build/output.rtmp/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime11 = __toESM(require_jsx_runtime());
+    summary_view_default4 = SummaryView6;
   }
 });
 
 // build/output.rtmp/inline-view.js
-var inline_view_exports4 = {};
-__export(inline_view_exports4, {
-  default: () => inline_view_default4
+var inline_view_exports5 = {};
+__export(inline_view_exports5, {
+  default: () => inline_view_default5
 });
-function InlineView6({ state, config }) {
-  const connected = (0, import_jsx_runtime10.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected and publishing" });
-  const disconnected = (0, import_jsx_runtime10.jsxs)("div", { className: "inactive text-orange-500 dark:text-orange-300", children: ["Disconnected ", state.connectRetries > 0 ? `- retrying(${state.connectRetries})` : ""] });
-  return (0, import_jsx_runtime10.jsx)("div", { className: "rtmp-output", id: `rtmp-output-${config.id}`, children: state.connected ? connected : disconnected });
+function InlineView7({ state, config }) {
+  if (!state.enabled) {
+    return (0, import_jsx_runtime12.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" });
+  }
+  const connected = (0, import_jsx_runtime12.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected and publishing" });
+  const disconnected = (0, import_jsx_runtime12.jsxs)("div", { className: "inactive text-orange-500 dark:text-orange-300", children: ["Disconnected ", state.connectRetries > 0 ? `- retrying(${state.connectRetries})` : ""] });
+  return (0, import_jsx_runtime12.jsx)("div", { className: "rtmp-output", id: `rtmp-output-${config.id}`, children: state.connected ? connected : disconnected });
 }
-var import_jsx_runtime10, inline_view_default4;
-var init_inline_view4 = __esm({
+var import_jsx_runtime12, inline_view_default5;
+var init_inline_view5 = __esm({
   "build/output.rtmp/inline-view.js"() {
     "use strict";
-    import_jsx_runtime10 = __toESM(require_jsx_runtime());
-    inline_view_default4 = InlineView6;
+    import_jsx_runtime12 = __toESM(require_jsx_runtime());
+    inline_view_default5 = InlineView7;
   }
 });
 
@@ -763,30 +816,80 @@ var require_util = __commonJS({
   }
 });
 
+// build/output.srt/summary-view.js
+var summary_view_exports5 = {};
+__export(summary_view_exports5, {
+  default: () => summary_view_default5
+});
+function SummaryView7({ state, sendCommand }) {
+  const handleEnableOutput = () => {
+    void enableOutput();
+  };
+  const enableOutput = async () => {
+    sendCommand({
+      type: "enable-output"
+    });
+  };
+  const handleDisableOutput = () => {
+    void disableOutput();
+  };
+  const disableOutput = async () => {
+    sendCommand({
+      type: "disable-output"
+    });
+  };
+  return (0, import_jsx_runtime13.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime13.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-green-500" : "bg-red-500"}` }), (0, import_jsx_runtime13.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime13.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime13.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime13.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-green-700 text-white rounded", children: "Enable Output" }) })] }) });
+}
+var import_jsx_runtime13, summary_view_default5;
+var init_summary_view5 = __esm({
+  "build/output.srt/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime13 = __toESM(require_jsx_runtime());
+    summary_view_default5 = SummaryView7;
+  }
+});
+
+// build/output.srt/inline-view.js
+var inline_view_exports6 = {};
+__export(inline_view_exports6, {
+  default: () => inline_view_default6
+});
+function InlineView8({ state }) {
+  return (0, import_jsx_runtime14.jsx)("div", { className: "srt-output", children: state.enabled ? (0, import_jsx_runtime14.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }) : (0, import_jsx_runtime14.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
+}
+var import_jsx_runtime14, inline_view_default6;
+var init_inline_view6 = __esm({
+  "build/output.srt/inline-view.js"() {
+    "use strict";
+    import_jsx_runtime14 = __toESM(require_jsx_runtime());
+    inline_view_default6 = InlineView8;
+  }
+});
+
 // build/output.statistics/inline-view.js
-var inline_view_exports5 = {};
-__export(inline_view_exports5, {
-  default: () => inline_view_default5
+var inline_view_exports7 = {};
+__export(inline_view_exports7, {
+  default: () => inline_view_default7
 });
-function InlineView7({ state }) {
+function InlineView9({ state }) {
   if (!state.previous)
-    return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+    return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
   const format = (stat) => Math.floor(stat).toLocaleString("en-US", { maximumFractionDigits: 0 });
-  return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: state.previous.allStreams.map((s, i) => {
+  return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: state.previous.allStreams.map((s, i) => {
     const metaCase = s.metadata.case;
     switch (metaCase) {
       case "audio":
-        return (0, import_jsx_runtime11.jsxs)("div", { children: [(0, import_jsx_runtime11.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime11.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime15.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "video":
-        return (0, import_jsx_runtime11.jsxs)("div", { children: [(0, import_jsx_runtime11.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime11.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime15.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "ancillary":
-        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
       case "subtitle":
-        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
       case "playlist":
-        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
       case void 0:
-        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
       default:
         assertUnreachable7(metaCase);
     }
@@ -795,19 +898,19 @@ function InlineView7({ state }) {
 function streamKey(streamKey2) {
   return streamKey2.streamId.toString();
 }
-var import_jsx_runtime11, inline_view_default5;
-var init_inline_view5 = __esm({
+var import_jsx_runtime15, inline_view_default7;
+var init_inline_view7 = __esm({
   "build/output.statistics/inline-view.js"() {
     "use strict";
-    import_jsx_runtime11 = __toESM(require_jsx_runtime());
+    import_jsx_runtime15 = __toESM(require_jsx_runtime());
     init_info();
-    inline_view_default5 = InlineView7;
+    inline_view_default7 = InlineView9;
   }
 });
 
 // build/output.statistics/info.js
 function info_default12({ defineComponent, All }) {
-  const InlineView13 = import_react10.default.lazy(async () => Promise.resolve().then(() => (init_inline_view5(), inline_view_exports5)));
+  const InlineView15 = import_react10.default.lazy(async () => Promise.resolve().then(() => (init_inline_view7(), inline_view_exports7)));
   return defineComponent({
     identifier: "output.statistics",
     category: "output",
@@ -836,7 +939,7 @@ function info_default12({ defineComponent, All }) {
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       form: {
@@ -856,45 +959,12 @@ var init_info = __esm({
   }
 });
 
-// build/output.whep/summary-view.js
-var summary_view_exports4 = {};
-__export(summary_view_exports4, {
-  default: () => summary_view_default4
-});
-function SummaryView6({ state, sendCommand }) {
-  const handleEnableOutput = () => {
-    void enableOutput();
-  };
-  const enableOutput = async () => {
-    sendCommand({
-      type: "enable-output"
-    });
-  };
-  const handleDisableOutput = () => {
-    void disableOutput();
-  };
-  const disableOutput = async () => {
-    sendCommand({
-      type: "disable-output"
-    });
-  };
-  return (0, import_jsx_runtime12.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime12.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime12.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime12.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime12.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime12.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
-}
-var import_jsx_runtime12, summary_view_default4;
-var init_summary_view4 = __esm({
-  "build/output.whep/summary-view.js"() {
-    "use strict";
-    import_jsx_runtime12 = __toESM(require_jsx_runtime());
-    summary_view_default4 = SummaryView6;
-  }
-});
-
 // build/output.whep/inline-view.js
-var inline_view_exports6 = {};
-__export(inline_view_exports6, {
-  default: () => inline_view_default6
+var inline_view_exports8 = {};
+__export(inline_view_exports8, {
+  default: () => inline_view_default8
 });
-function InlineView8({ state, config, raise }) {
+function InlineView10({ state, config, raise }) {
   const url = state.url;
   const id = config.id;
   const [showPreview, setShowPreview] = (0, import_react11.useState)(config.showPreview ?? true);
@@ -936,38 +1006,71 @@ function InlineView8({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react11.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "..." });
+    return (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "..." });
   const videoStyles = `
     #whep-${id} video::-webkit-media-controls-play-button { 
       display: none; 
     }
   `;
-  return (0, import_jsx_runtime13.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime13.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime13.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime13.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime13.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime13.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
+  return (0, import_jsx_runtime16.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime16.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime16.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime16.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime16.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime16.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
 }
-var import_jsx_runtime13, import_react11, import_webrtc_client2, inline_view_default6;
-var init_inline_view6 = __esm({
+var import_jsx_runtime16, import_react11, import_webrtc_client2, inline_view_default8;
+var init_inline_view8 = __esm({
   "build/output.whep/inline-view.js"() {
     "use strict";
-    import_jsx_runtime13 = __toESM(require_jsx_runtime());
+    import_jsx_runtime16 = __toESM(require_jsx_runtime());
     import_react11 = __toESM(require_react());
     import_webrtc_client2 = __toESM(require_webrtc_client());
-    inline_view_default6 = InlineView8;
+    inline_view_default8 = InlineView10;
   }
 });
 
-// build/processor.browserOverlay/summary-view.js
-var summary_view_exports5 = {};
-__export(summary_view_exports5, {
-  default: () => summary_view_default5
+// build/output.whep/summary-view.js
+var summary_view_exports6 = {};
+__export(summary_view_exports6, {
+  default: () => summary_view_default6
 });
 function SummaryView8({ state, sendCommand }) {
+  const handleEnableOutput = () => {
+    void enableOutput();
+  };
+  const enableOutput = async () => {
+    sendCommand({
+      type: "enable-output"
+    });
+  };
+  const handleDisableOutput = () => {
+    void disableOutput();
+  };
+  const disableOutput = async () => {
+    sendCommand({
+      type: "disable-output"
+    });
+  };
+  return (0, import_jsx_runtime17.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime17.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime17.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime17.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime17.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime17.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
+}
+var import_jsx_runtime17, summary_view_default6;
+var init_summary_view6 = __esm({
+  "build/output.whep/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime17 = __toESM(require_jsx_runtime());
+    summary_view_default6 = SummaryView8;
+  }
+});
+
+// build/processor.browserOverlay/summary-view.js
+var summary_view_exports7 = {};
+__export(summary_view_exports7, {
+  default: () => summary_view_default7
+});
+function SummaryView9({ state, sendCommand }) {
   const [url, setUrl] = (0, import_react13.useState)(state.currentUrl);
   const [enabled, setEnabled] = (0, import_react13.useState)(state.enabled);
   const stateChanged = (0, import_react13.useMemo)(() => {
     return url !== state.currentUrl || enabled !== state.enabled;
   }, [url, enabled]);
   const buttonClass = "mt-2 mb-5 text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800";
-  return (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime14.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime14.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime14.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime14.jsx)("input", { type: "email", id: "url", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", value: url, onChange: (e) => setUrl(e.target.value), required: true })] }), (0, import_jsx_runtime14.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime14.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime14.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime14.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime14.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) }), (0, import_jsx_runtime14.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
+  return (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime18.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime18.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime18.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime18.jsx)("input", { type: "email", id: "url", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", value: url, onChange: (e) => setUrl(e.target.value), required: true })] }), (0, import_jsx_runtime18.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime18.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime18.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime18.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime18.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) }), (0, import_jsx_runtime18.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
     if (url !== state.currentUrl) {
       sendCommand({ type: "change-url", url });
     }
@@ -980,30 +1083,30 @@ function SummaryView8({ state, sendCommand }) {
     }
   }, children: "Commit" })] });
 }
-var import_jsx_runtime14, import_react13, summary_view_default5;
-var init_summary_view5 = __esm({
+var import_jsx_runtime18, import_react13, summary_view_default7;
+var init_summary_view7 = __esm({
   "build/processor.browserOverlay/summary-view.js"() {
     "use strict";
-    import_jsx_runtime14 = __toESM(require_jsx_runtime());
+    import_jsx_runtime18 = __toESM(require_jsx_runtime());
     import_react13 = __toESM(require_react());
-    summary_view_default5 = SummaryView8;
+    summary_view_default7 = SummaryView9;
   }
 });
 
 // build/processor.browserOverlay/inline-view.js
-var inline_view_exports7 = {};
-__export(inline_view_exports7, {
-  default: () => inline_view_default7
+var inline_view_exports9 = {};
+__export(inline_view_exports9, {
+  default: () => inline_view_default9
 });
-function InlineView9({ state, config }) {
-  return (0, import_jsx_runtime15.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime15.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime15.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime15.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime15.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime15.jsx)("div", { children: (0, import_jsx_runtime15.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime15.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime15.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) })] }) });
+function InlineView11({ state, config }) {
+  return (0, import_jsx_runtime19.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime19.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime19.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime19.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime19.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime19.jsx)("div", { children: (0, import_jsx_runtime19.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime19.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime19.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) })] }) });
 }
-var import_jsx_runtime15, inline_view_default7;
-var init_inline_view7 = __esm({
+var import_jsx_runtime19, inline_view_default9;
+var init_inline_view9 = __esm({
   "build/processor.browserOverlay/inline-view.js"() {
     "use strict";
-    import_jsx_runtime15 = __toESM(require_jsx_runtime());
-    inline_view_default7 = InlineView9;
+    import_jsx_runtime19 = __toESM(require_jsx_runtime());
+    inline_view_default9 = InlineView11;
   }
 });
 
@@ -1018,10 +1121,10 @@ function OrderInput(props) {
   }, [props.defaultValue]);
   const [value, setValue] = (0, import_react15.useState)(props.defaultValue ?? []);
   if (value.length == 0) {
-    return (0, import_jsx_runtime16.jsx)("p", { className: "node-editor-helper-text", children: "Sources will appear here when subscriptions have been added to this node" });
+    return (0, import_jsx_runtime20.jsx)("p", { className: "node-editor-helper-text", children: "Sources will appear here when subscriptions have been added to this node" });
   } else {
-    return (0, import_jsx_runtime16.jsx)("div", { id: props.id, children: (0, import_jsx_runtime16.jsx)("ul", { children: value.map((v, ix) => {
-      return (0, import_jsx_runtime16.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime16.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) : (0, import_jsx_runtime16.jsx)("svg", { onClick: moveUp(ix), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, className: "w-4 h-6 shrink cursor-pointer stroke-gray-700 dark:stroke-gray-50", children: (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) : (0, import_jsx_runtime16.jsx)("svg", { onClick: moveDown(ix), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, className: "w-4 h-6 shrink cursor-pointer stroke-gray-700 dark:stroke-gray-50", children: (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
+    return (0, import_jsx_runtime20.jsx)("div", { id: props.id, children: (0, import_jsx_runtime20.jsx)("ul", { children: value.map((v, ix) => {
+      return (0, import_jsx_runtime20.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime20.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {}) : (0, import_jsx_runtime20.jsx)("svg", { onClick: moveUp(ix), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, className: "w-4 h-6 shrink cursor-pointer stroke-gray-700 dark:stroke-gray-50", children: (0, import_jsx_runtime20.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {}) : (0, import_jsx_runtime20.jsx)("svg", { onClick: moveDown(ix), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, className: "w-4 h-6 shrink cursor-pointer stroke-gray-700 dark:stroke-gray-50", children: (0, import_jsx_runtime20.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
     }) }) });
   }
   function moveUp(ix) {
@@ -1043,33 +1146,33 @@ function OrderInput(props) {
     };
   }
 }
-var import_jsx_runtime16, import_react15, source_selection_default;
+var import_jsx_runtime20, import_react15, source_selection_default;
 var init_source_selection = __esm({
   "build/processor.cascadingSwitch/source-selection.js"() {
     "use strict";
-    import_jsx_runtime16 = __toESM(require_jsx_runtime());
+    import_jsx_runtime20 = __toESM(require_jsx_runtime());
     import_react15 = __toESM(require_react());
     source_selection_default = OrderInput;
   }
 });
 
 // build/processor.cascadingSwitch/inline-view.js
-var inline_view_exports8 = {};
-__export(inline_view_exports8, {
-  default: () => inline_view_default8
+var inline_view_exports10 = {};
+__export(inline_view_exports10, {
+  default: () => inline_view_default10
 });
-function InlineView11({ state, config }) {
-  return (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [(0, import_jsx_runtime17.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime17.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime17.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime17.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime17.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime17.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
+function InlineView13({ state, config }) {
+  return (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [(0, import_jsx_runtime21.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime21.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime21.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime21.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime21.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime21.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
 }
-var import_jsx_runtime17, activeClasses, availableClasses, inactiveClasses, inline_view_default8;
-var init_inline_view8 = __esm({
+var import_jsx_runtime21, activeClasses, availableClasses, inactiveClasses, inline_view_default10;
+var init_inline_view10 = __esm({
   "build/processor.cascadingSwitch/inline-view.js"() {
     "use strict";
-    import_jsx_runtime17 = __toESM(require_jsx_runtime());
+    import_jsx_runtime21 = __toESM(require_jsx_runtime());
     activeClasses = "active text-green-500 dark:text-green-300";
     availableClasses = "available text-green-500 dark:text-green-300";
     inactiveClasses = "inactive text-orange-500 dark:text-orange-300";
-    inline_view_default8 = InlineView11;
+    inline_view_default10 = InlineView13;
   }
 });
 
@@ -1079,13 +1182,13 @@ __export(rung_view_exports, {
   default: () => rung_view_default
 });
 function rung_view_default(rung) {
-  return (0, import_jsx_runtime18.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
+  return (0, import_jsx_runtime22.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
 }
-var import_jsx_runtime18;
+var import_jsx_runtime22;
 var init_rung_view = __esm({
   "build/processor.fixedLadder/rung-view.js"() {
     "use strict";
-    import_jsx_runtime18 = __toESM(require_jsx_runtime());
+    import_jsx_runtime22 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -1108,7 +1211,7 @@ function CodecEditor(props) {
       target.style.height = target.scrollHeight + "px";
     }
   }, []);
-  return (0, import_jsx_runtime19.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", onChange: (e) => {
+  return (0, import_jsx_runtime23.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", onChange: (e) => {
     const target = e.currentTarget;
     try {
       const codec = JSON.parse(target.value);
@@ -1118,11 +1221,11 @@ function CodecEditor(props) {
     }
   }, defaultValue: JSON.stringify(value, void 0, 2) });
 }
-var import_jsx_runtime19, import_react16;
+var import_jsx_runtime23, import_react16;
 var init_codec_editor = __esm({
   "build/processor.fixedLadder/codec-editor.js"() {
     "use strict";
-    import_jsx_runtime19 = __toESM(require_jsx_runtime());
+    import_jsx_runtime23 = __toESM(require_jsx_runtime());
     import_react16 = __toESM(require_react());
   }
 });
@@ -1133,13 +1236,13 @@ __export(codec_view_exports, {
   default: () => CodecEditor2
 });
 function CodecEditor2(props) {
-  return (0, import_jsx_runtime20.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props.width, "x", props.height] });
+  return (0, import_jsx_runtime24.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props.width, "x", props.height] });
 }
-var import_jsx_runtime20;
+var import_jsx_runtime24;
 var init_codec_view = __esm({
   "build/processor.fixedLadder/codec-view.js"() {
     "use strict";
-    import_jsx_runtime20 = __toESM(require_jsx_runtime());
+    import_jsx_runtime24 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -1168,34 +1271,34 @@ function GraphicSelection(props) {
   }, []);
   const [graphcs, setGraphics] = (0, import_react18.useState)([]);
   if (loading) {
-    return (0, import_jsx_runtime21.jsx)("div", { children: "Loading.." });
+    return (0, import_jsx_runtime25.jsx)("div", { children: "Loading.." });
   }
   if (graphcs.length == 0) {
-    return (0, import_jsx_runtime21.jsx)("div", { children: "No graphics loaded" });
+    return (0, import_jsx_runtime25.jsx)("div", { children: "No graphics loaded" });
   }
-  return (0, import_jsx_runtime21.jsx)("div", { children: (0, import_jsx_runtime21.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime21.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
-    return (0, import_jsx_runtime21.jsx)("option", { value: o, children: o }, i);
+  return (0, import_jsx_runtime25.jsx)("div", { children: (0, import_jsx_runtime25.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime25.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
+    return (0, import_jsx_runtime25.jsx)("option", { value: o, children: o }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime21, import_react18, image_selection_default;
+var import_jsx_runtime25, import_react18, image_selection_default;
 var init_image_selection = __esm({
   "build/processor.onscreenGraphic/image-selection.js"() {
     "use strict";
-    import_jsx_runtime21 = __toESM(require_jsx_runtime());
+    import_jsx_runtime25 = __toESM(require_jsx_runtime());
     import_react18 = __toESM(require_react());
     image_selection_default = GraphicSelection;
   }
 });
 
 // build/processor.onscreenGraphic/summary-view.js
-var summary_view_exports6 = {};
-__export(summary_view_exports6, {
-  default: () => summary_view_default6
+var summary_view_exports8 = {};
+__export(summary_view_exports8, {
+  default: () => summary_view_default8
 });
-function SummaryView10({ state, sendCommand, urls }) {
+function SummaryView11({ state, sendCommand, urls }) {
   const [graphic, setGraphic] = (0, import_react19.useState)(state.activeGraphic?.file);
   const [position, setPosition] = (0, import_react19.useState)(state.activeGraphic?.position ?? { type: "named", position: "topleft" });
   const [graphics, setGraphics] = (0, import_react19.useState)([]);
@@ -1330,7 +1433,7 @@ function SummaryView10({ state, sendCommand, urls }) {
   const buttonClass = "mt-2 mb-5 text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800";
   const deleteButtonClass = "mt-2 text-white w-full justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-900";
   const fileInputClass = "block w-full text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400";
-  return (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime22.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime22.jsxs)("select", { id: "select-graphic", className: "w-full node-editor-select-input", value: graphic || "", onChange: (e) => setGraphic(e.target.value || void 0), children: [(0, import_jsx_runtime22.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime22.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime22.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime22.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, onClick: () => sendCommand({ type: "change-graphic", file: graphic, position }), disabled: !stateChanged, children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime22.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime22.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime22.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime22.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime22.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime22.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime22.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime22.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime22.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime22.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime22.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
+  return (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime26.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime26.jsxs)("div", { children: [(0, import_jsx_runtime26.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime26.jsxs)("select", { id: "select-graphic", className: "w-full node-editor-select-input", value: graphic || "", onChange: (e) => setGraphic(e.target.value || void 0), children: [(0, import_jsx_runtime26.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime26.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime26.jsxs)("div", { children: [(0, import_jsx_runtime26.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime26.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime26.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, onClick: () => sendCommand({ type: "change-graphic", file: graphic, position }), disabled: !stateChanged, children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime26.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime26.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime26.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime26.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime26.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime26.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime26.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime26.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime26.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime26.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime26.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
 }
 function convertPosition(givenPosition, currentVideo, currentGraphic) {
   if (!givenPosition)
@@ -1376,11 +1479,11 @@ function clamp(min, num, max) {
 function assertUnreachable12(_) {
   throw new Error("Didn't expect to get here");
 }
-var import_jsx_runtime22, import_react19, PositionSelector, summary_view_default6;
-var init_summary_view6 = __esm({
+var import_jsx_runtime26, import_react19, PositionSelector, summary_view_default8;
+var init_summary_view8 = __esm({
   "build/processor.onscreenGraphic/summary-view.js"() {
     "use strict";
-    import_jsx_runtime22 = __toESM(require_jsx_runtime());
+    import_jsx_runtime26 = __toESM(require_jsx_runtime());
     import_react19 = __toESM(require_react());
     PositionSelector = ({ initialPosition: givenPosition = { type: "named", position: "topleft" }, onChange, currentVideo, currentGraphic, graphicChanged }) => {
       const convertPos = (pos) => convertPosition(pos, currentVideo, currentGraphic);
@@ -1448,7 +1551,7 @@ var init_summary_view6 = __esm({
           window.removeEventListener("mouseup", handleMouseUp);
         };
       }, [isDragging]);
-      return (0, import_jsx_runtime22.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime22.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime22.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime22.jsxs)("select", { value: position.type, onChange: (e) => {
+      return (0, import_jsx_runtime26.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime26.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime26.jsxs)("select", { value: position.type, onChange: (e) => {
         const newType = e.target.value;
         if (newType === "named") {
           setPosition(convertPos({ type: "named", position: "topleft" }));
@@ -1456,12 +1559,12 @@ var init_summary_view6 = __esm({
           setPositionUnit("%");
           setPosition({ ...convertPos(position), type: "percentage" });
         }
-      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime22.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime22.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime22.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime22.jsxs)("select", { value: position.position, onChange: (e) => {
+      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime26.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime26.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime26.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime26.jsxs)("select", { value: position.position, onChange: (e) => {
         setPosition(convertPos({
           type: "named",
           position: e.target.value
         }));
-      }, className: "w-full node-editor-select-input", children: [(0, import_jsx_runtime22.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime22.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime22.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime22.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime22.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [(0, import_jsx_runtime22.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime22.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime22.jsxs)("select", { value: positionUnit, onChange: (e) => {
+      }, className: "w-full node-editor-select-input", children: [(0, import_jsx_runtime26.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime26.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime26.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime26.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime26.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime26.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime26.jsxs)("select", { value: positionUnit, onChange: (e) => {
         setPositionUnit(e.target.value);
         if (e.target.value === "px" && position.type !== "coordinate" && currentVideo && currentGraphic) {
           const { width: videoWidth, height: videoHeight } = currentVideo;
@@ -1486,18 +1589,18 @@ var init_summary_view6 = __esm({
             yStr: void 0
           });
         }
-      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime22.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime22.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime22.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-lg", style: {
+      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime26.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime26.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime26.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-lg", style: {
         width: "100%",
         userSelect: "none",
         aspectRatio: currentVideo ? `${currentVideo.width} / ${currentVideo.height}` : `3 / 2`
-      }, ref: previewAreaRef, children: [(0, import_jsx_runtime22.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime22.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime22.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime22.jsx)("div", { className: `absolute cursor-move ${currentGraphic && !graphicChanged ? "" : "p-2"} rounded-lg bg-primary-500 bg-opacity-50 hover:bg-opacity-75 transition-colors
+      }, ref: previewAreaRef, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime26.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime26.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime26.jsx)("div", { className: `absolute cursor-move ${currentGraphic && !graphicChanged ? "" : "p-2"} rounded-lg bg-primary-500 bg-opacity-50 hover:bg-opacity-75 transition-colors
                 ${isDragging ? "bg-opacity-75" : ""}`, style: {
         left: `${position.xPct}%`,
         top: `${position.yPct}%`,
         transform: `translate(-${position.xPct}%, -${position.yPct}%)`,
         aspectRatio: currentGraphic && !graphicChanged ? `${currentGraphic.width} / ${currentGraphic.height}` : `1`,
         width: currentGraphic && currentVideo && !graphicChanged ? currentGraphic.width / currentVideo.width * 100 + "%" : void 0
-      }, onMouseDown: handleMouseDown, ref: previewTargetRef, children: (0, import_jsx_runtime22.jsx)("svg", { className: `${currentGraphic && !graphicChanged ? "w-full h-full" : "w-6 h-6"} text-white`, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime22.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6v12m-6-6h12m-6-6 1.5 1.5M12 6l-1.5 1.5m1.5 10.5L10.5 16.5M12 18l1.5-1.5M6 12l1.5-1.5M7.5 13.5 6 12m12 0-1.5-1.5M16.5 13.5 18 12" }) }) })] }), (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300 text-center", children: ["Position:", " ", position.type === "percentage" ? `${position.xPct.toFixed(1)}%, ${position.yPct.toFixed(1)}%` : `${Math.round(position.x)}px, ${Math.round(position.y)}px`] }), (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime22.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.xStr ?? (positionUnit === "%" ? position.xPct.toFixed(1) : Math.round(position.x)), onChange: (e) => {
+      }, onMouseDown: handleMouseDown, ref: previewTargetRef, children: (0, import_jsx_runtime26.jsx)("svg", { className: `${currentGraphic && !graphicChanged ? "w-full h-full" : "w-6 h-6"} text-white`, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime26.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6v12m-6-6h12m-6-6 1.5 1.5M12 6l-1.5 1.5m1.5 10.5L10.5 16.5M12 18l1.5-1.5M6 12l1.5-1.5M7.5 13.5 6 12m12 0-1.5-1.5M16.5 13.5 18 12" }) }) })] }), (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300 text-center", children: ["Position:", " ", position.type === "percentage" ? `${position.xPct.toFixed(1)}%, ${position.yPct.toFixed(1)}%` : `${Math.round(position.x)}px, ${Math.round(position.y)}px`] }), (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime26.jsxs)("div", { children: [(0, import_jsx_runtime26.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime26.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.xStr ?? (positionUnit === "%" ? position.xPct.toFixed(1) : Math.round(position.x)), onChange: (e) => {
         const newX = Number(e.target.value);
         setPosition(convertPos({
           type: positionUnit === "%" ? "percentage" : "coordinate",
@@ -1506,7 +1609,7 @@ var init_summary_view6 = __esm({
           y: position.y,
           yStr: position.yStr
         }));
-      }, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600" })] }), (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime22.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.yStr ?? (positionUnit === "%" ? position.yPct.toFixed(1) : Math.round(position.y)), onChange: (e) => {
+      }, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600" })] }), (0, import_jsx_runtime26.jsxs)("div", { children: [(0, import_jsx_runtime26.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime26.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.yStr ?? (positionUnit === "%" ? position.yPct.toFixed(1) : Math.round(position.y)), onChange: (e) => {
         const newY = Number(e.target.value);
         setPosition(convertPos({
           type: positionUnit === "%" ? "percentage" : "coordinate",
@@ -1517,7 +1620,7 @@ var init_summary_view6 = __esm({
         }));
       }, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600" })] })] })] })] });
     };
-    summary_view_default6 = SummaryView10;
+    summary_view_default8 = SummaryView11;
   }
 });
 
@@ -15840,11 +15943,11 @@ var init_auto = __esm({
 });
 
 // build/util.stats.latency/inline-view.js
-var inline_view_exports9 = {};
-__export(inline_view_exports9, {
-  default: () => inline_view_default9
+var inline_view_exports11 = {};
+__export(inline_view_exports11, {
+  default: () => inline_view_default11
 });
-function InlineView12({ state, config: _2 }) {
+function InlineView14({ state, config: _2 }) {
   const chartContainer = (0, import_react21.useRef)(null);
   const [chartControl, setChartControl] = (0, import_react21.useState)(void 0);
   function makeDataSet(key, color2, values) {
@@ -15906,16 +16009,16 @@ function InlineView12({ state, config: _2 }) {
       return;
     chartControl.data = makeData(state);
   }, [state]);
-  return (0, import_jsx_runtime23.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime23.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
+  return (0, import_jsx_runtime27.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime27.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
 }
-var import_jsx_runtime23, import_react21, inline_view_default9;
-var init_inline_view9 = __esm({
+var import_jsx_runtime27, import_react21, inline_view_default11;
+var init_inline_view11 = __esm({
   "build/util.stats.latency/inline-view.js"() {
     "use strict";
-    import_jsx_runtime23 = __toESM(require_jsx_runtime());
+    import_jsx_runtime27 = __toESM(require_jsx_runtime());
     import_react21 = __toESM(require_react());
     init_auto();
-    inline_view_default9 = InlineView12;
+    inline_view_default11 = InlineView14;
   }
 });
 
@@ -15925,22 +16028,22 @@ __export(source_node_selection_exports, {
   default: () => source_node_selection_default
 });
 function SourceNodeSelection(props) {
-  return (0, import_jsx_runtime24.jsx)("div", { children: (0, import_jsx_runtime24.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime24.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
+  return (0, import_jsx_runtime28.jsx)("div", { children: (0, import_jsx_runtime28.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime28.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
     if (o.id == props.id)
-      return (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
+      return (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, {});
     if (o.info.category === "output")
       return;
-    return (0, import_jsx_runtime24.jsx)("option", { value: o.id, children: o.config.displayName }, i);
+    return (0, import_jsx_runtime28.jsx)("option", { value: o.id, children: o.config.displayName }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime24, source_node_selection_default;
+var import_jsx_runtime28, source_node_selection_default;
 var init_source_node_selection = __esm({
   "build/util.stats.latency/source-node-selection.js"() {
     "use strict";
-    import_jsx_runtime24 = __toESM(require_jsx_runtime());
+    import_jsx_runtime28 = __toESM(require_jsx_runtime());
     source_node_selection_default = SourceNodeSelection;
   }
 });
@@ -16416,8 +16519,9 @@ var import_config = __toESM(require_config());
 var import_react5 = __toESM(require_react());
 function info_default7(R) {
   const { defineComponent, All, validation: { Z, Hostname } } = R;
-  const SummaryView11 = import_react5.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
+  const SummaryView12 = import_react5.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
   const FullscreenView2 = import_react5.default.lazy(async () => Promise.resolve().then(() => (init_fullscreen(), fullscreen_exports)));
+  const InlineView15 = import_react5.default.lazy(async () => Promise.resolve().then(() => (init_inline_view3(), inline_view_exports3)));
   const SegmentConfiguration2 = import_react5.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_form_views(), form_views_exports));
     return { default: views.SegmentConfiguration };
@@ -16499,8 +16603,9 @@ function info_default7(R) {
         }
         return { ...state };
       },
-      summary: SummaryView11,
-      fullscreen: FullscreenView2
+      summary: SummaryView12,
+      fullscreen: FullscreenView2,
+      inline: InlineView15
     },
     configForm: {
       global: {
@@ -16673,7 +16778,7 @@ var import_react7 = __toESM(require_react());
 var import_config2 = __toESM(require_config());
 function info_default9(R) {
   const { defineComponent, Av, validation: { JitterBuffer } } = R;
-  const InlineView13 = import_react7.default.lazy(async () => Promise.resolve().then(() => (init_inline_view3(), inline_view_exports3)));
+  const InlineView15 = import_react7.default.lazy(async () => Promise.resolve().then(() => (init_inline_view4(), inline_view_exports4)));
   return defineComponent({
     identifier: "output.preview",
     category: "output",
@@ -16724,7 +16829,7 @@ function info_default9(R) {
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       global: {
@@ -16750,7 +16855,8 @@ function assertUnreachable4(_) {
 // build/output.rtmp/info.js
 var import_react8 = __toESM(require_react());
 function info_default10({ defineComponent, Av, validation: { Z, JitterBuffer } }) {
-  const InlineView13 = import_react8.default.lazy(async () => Promise.resolve().then(() => (init_inline_view4(), inline_view_exports4)));
+  const SummaryView12 = import_react8.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
+  const InlineView15 = import_react8.default.lazy(async () => Promise.resolve().then(() => (init_inline_view5(), inline_view_exports5)));
   return defineComponent({
     identifier: "output.rtmp",
     category: "output",
@@ -16773,7 +16879,7 @@ function info_default10({ defineComponent, Av, validation: { Z, JitterBuffer } }
       };
     },
     runtime: {
-      initialState: () => ({ connected: false, connectRetries: 0 }),
+      initialState: () => ({ connected: false, connectRetries: 0, enabled: true }),
       handleEvent: (ev, state) => {
         const evType = ev.type;
         switch (evType) {
@@ -16784,12 +16890,19 @@ function info_default10({ defineComponent, Av, validation: { Z, JitterBuffer } }
             state.connected = false;
             state.connectRetries++;
             break;
+          case "output-enabled":
+            state.enabled = true;
+            break;
+          case "output-disabled":
+            state.enabled = false;
+            break;
           default:
             assertUnreachable5(evType);
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15,
+      summary: SummaryView12
     },
     configForm: {
       form: {
@@ -16814,6 +16927,8 @@ var import_react9 = __toESM(require_react());
 var import_util = __toESM(require_util());
 function info_default11(registration) {
   const { defineComponent, All, validation } = registration;
+  const SummaryView12 = import_react9.default.lazy(async () => Promise.resolve().then(() => (init_summary_view5(), summary_view_exports5)));
+  const InlineView15 = import_react9.default.lazy(async () => Promise.resolve().then(() => (init_inline_view6(), inline_view_exports6)));
   const { Port, Hostname, JitterBuffer, SrtPassphrase, SrtStreamId } = validation;
   const SocketConfiguration2 = import_react9.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_srt_form_views(), srt_form_views_exports));
@@ -16857,7 +16972,9 @@ function info_default11(registration) {
             (0, import_util.assertUnreachable)(evType);
         }
         return { ...state };
-      }
+      },
+      summary: SummaryView12,
+      inline: InlineView15
     },
     configForm: {
       form: {
@@ -16957,10 +17074,10 @@ function info_default13({ defineComponent, All, validation: { Port, Hostname, Ji
 // build/output.whep/info.js
 var import_config3 = __toESM(require_config());
 var import_react12 = __toESM(require_react());
-var SummaryView7 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
 function info_default14(R) {
   const { defineComponent, Av, validation: { JitterBuffer } } = R;
-  const InlineView13 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_inline_view6(), inline_view_exports6)));
+  const InlineView15 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_inline_view8(), inline_view_exports8)));
+  const SummaryView12 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_summary_view6(), summary_view_exports6)));
   return defineComponent({
     identifier: "output.whep",
     category: "output",
@@ -17000,8 +17117,8 @@ function info_default14(R) {
         }
         return { ...state };
       },
-      inline: InlineView13,
-      summary: SummaryView7
+      inline: InlineView15,
+      summary: SummaryView12
     },
     configForm: {
       global: {
@@ -17025,8 +17142,8 @@ function assertUnreachable8(_) {
 // build/processor.browserOverlay/info.js
 var import_config4 = __toESM(require_config());
 var import_react14 = __toESM(require_react());
-var SummaryView9 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_summary_view5(), summary_view_exports5)));
-var InlineView10 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_inline_view7(), inline_view_exports7)));
+var SummaryView10 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_summary_view7(), summary_view_exports7)));
+var InlineView12 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_inline_view9(), inline_view_exports9)));
 function info_default15({ defineComponent, Video, validation: { Z } }) {
   return defineComponent({
     identifier: "processor.browserOverlay",
@@ -17053,8 +17170,8 @@ function info_default15({ defineComponent, Video, validation: { Z } }) {
       };
     },
     runtime: {
-      summary: SummaryView9,
-      inline: InlineView10,
+      summary: SummaryView10,
+      inline: InlineView12,
       initialState: () => ({
         currentUrl: "",
         enabled: true
@@ -17091,7 +17208,7 @@ function assertUnreachable9(_) {
 // build/processor.cascadingSwitch/info.js
 function info_default16({ defineComponent, Av, React: React14, common: { Resolutions, FrameRates } }) {
   const SourceSelection = React14.lazy(async () => Promise.resolve().then(() => (init_source_selection(), source_selection_exports)));
-  const InlineView13 = React14.lazy(async () => Promise.resolve().then(() => (init_inline_view8(), inline_view_exports8)));
+  const InlineView15 = React14.lazy(async () => Promise.resolve().then(() => (init_inline_view10(), inline_view_exports10)));
   return defineComponent({
     identifier: "processor.cascadingSwitch",
     category: "processor",
@@ -17173,9 +17290,9 @@ function info_default16({ defineComponent, Av, React: React14, common: { Resolut
             assertUnreachable10(evType);
         }
       },
-      inline: InlineView13,
-      summary: InlineView13,
-      fullscreen: InlineView13
+      inline: InlineView15,
+      summary: InlineView15,
+      fullscreen: InlineView15
     },
     configForm: {
       form: {
@@ -17560,7 +17677,7 @@ var import_config6 = __toESM(require_config());
 var import_react20 = __toESM(require_react());
 function info_default18({ defineComponent, Video }) {
   const GraphicSelection2 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_image_selection(), image_selection_exports)));
-  const SummaryView11 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_summary_view6(), summary_view_exports6)));
+  const SummaryView12 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_summary_view8(), summary_view_exports8)));
   return defineComponent({
     identifier: "processor.onscreenGraphic",
     category: "processor",
@@ -17586,7 +17703,7 @@ function info_default18({ defineComponent, Video }) {
       };
     },
     runtime: {
-      summary: SummaryView11,
+      summary: SummaryView12,
       initialState: () => ({}),
       handleEvent: (ev, state) => {
         const evType = ev.type;
@@ -17788,7 +17905,7 @@ function info_default19({ defineComponent, All, validation: { Z } }) {
 var import_react22 = __toESM(require_react());
 function info_default20(R) {
   const { defineComponent } = R;
-  const InlineView13 = import_react22.default.lazy(async () => Promise.resolve().then(() => (init_inline_view9(), inline_view_exports9)));
+  const InlineView15 = import_react22.default.lazy(async () => Promise.resolve().then(() => (init_inline_view11(), inline_view_exports11)));
   const SourceNodeSelection2 = import_react22.default.lazy(async () => Promise.resolve().then(() => (init_source_node_selection(), source_node_selection_exports)));
   return defineComponent({
     identifier: "util.stats.latency",
@@ -17821,7 +17938,7 @@ function info_default20(R) {
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       form: {